/* ==========================================================================
   Loader / Page transition — loader circular moderno (estilo Lineone)
   Isolado e namespaced (#vuexy-* / .app-loader-*) para NÃO colidir com o loader
   legado, com o theme switcher, o menu nem scripts antigos. Cor principal #2092EC.
   Só é usado nos layouts Vuexy.
   ========================================================================== */

/* Overlay de preloader (full screen) — fundo claro elegante.
   Baseado na VIEWPORT (fixed + 100vw/100vh), nunca no content wrapper:
   fica centrado no ecrã em desktop e mobile, independente de scroll/layout. */
#vuexy-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 38%, #ffffff 0%, #f4f7fc 62%, #eaf0f9 100%);
    transition: opacity .5s ease, visibility .5s ease;
}

/* Estado escondido: invisível e não-interativo (não bloqueia nada) */
#vuexy-page-loader.vuexy-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.vuexy-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo (logo_min.png) centrado DENTRO do anel */
.vuexy-loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: auto;
    animation: vuexy-loader-fade 2.4s ease-in-out infinite;
}

@keyframes vuexy-loader-fade {
    0%, 100% { opacity: 1; }
    50%      { opacity: .78; }
}

/* --------------------------------------------------------------------------
   Loader circular / anel (.app-loader-ring)
   - track exterior suave (::before)
   - arco activo #2092EC com glow a rodar (::after)
   - anel interior mais claro a rodar ao contrário (span)
   -------------------------------------------------------------------------- */
.app-loader-ring {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

.app-loader-ring::before,
.app-loader-ring::after,
.app-loader-ring span {
    content: "";
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
}

/* Track exterior (anel base, ténue) */
.app-loader-ring::before {
    inset: 0;
    border: 5px solid rgba(32, 146, 236, 0.13);
}

/* Arco activo exterior — #2092EC com glow, rotação contínua */
.app-loader-ring::after {
    inset: 0;
    border: 5px solid transparent;
    border-top-color: #2092ec;
    border-right-color: #2092ec;
    box-shadow: 0 0 16px rgba(32, 146, 236, 0.5);
    animation: app-loader-spin 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

/* Anel interior — azul mais claro, roda ao contrário (sensação de orbit) */
.app-loader-ring span {
    inset: 13px;
    border: 4px solid transparent;
    border-bottom-color: #7bc0f4;
    border-left-color: #7bc0f4;
    opacity: 0.85;
    animation: app-loader-spin-rev 1.4s linear infinite;
}

@keyframes app-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes app-loader-spin-rev {
    to { transform: rotate(-360deg); }
}

/* Barra de progresso fina no topo (transição entre páginas) --------------
   DESATIVADA (2026-06-11): o markup foi removido do _loader.php; o display
   none cobre HTML em cache. Manter o resto para reativação futura. */
#vuexy-top-progress {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: #2092ec;
    box-shadow: 0 0 10px rgba(32, 146, 236, 0.7), 0 0 5px rgba(32, 146, 236, 0.5);
    z-index: 100000;
    opacity: 0;
    transition: width .3s ease, opacity .35s ease;
    pointer-events: none;
}

#vuexy-top-progress.vuexy-progress-active {
    opacity: 1;
}

/* ==========================================================================
   Overlay de carregamento REUTILIZÁVEL por página (ex.: AJAX de dados).
   Mesmo visual do loader global (logo + anel a girar), mas como overlay
   independente que se ativa/desativa numa página (não é o preloader de
   transição). Reusa .app-loader-ring / .vuexy-loader-logo / .vuexy-loader-inner.
   Uso: partial //layouts/partials/vuexy/_si-loader (id + texto opcional);
   alternar a classe .on em JS no início/fim do pedido. Ver skill loader-pagina.
   ========================================================================== */
.si-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.9) 0%,
        rgba(244, 247, 252, 0.88) 62%, rgba(234, 240, 249, 0.88) 100%);
}

.si-loader-overlay.on {
    display: flex;
}

.si-loader-overlay .si-loader-text {
    margin-top: 18px;
    font-weight: 600;
    color: #4b465c;
    font-size: 14px;
    text-align: center;
}

/* Respeitar utilizadores com prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .vuexy-loader-logo,
    .app-loader-ring::after,
    .app-loader-ring span,
    #vuexy-page-loader,
    #vuexy-top-progress {
        animation: none !important;
        transition: opacity .2s ease, visibility .2s ease;
    }
}