/* ============================================================
   Paxer Loader — Indicador de carga unificado
   Barra de progreso azul + spinner superior (estilo iOS/Chrome)
   ============================================================ */

/* Barra superior de progreso (indeterminada) */
#paxer-topbar {
    position: fixed;
    /* En la app instalada del iPhone, justo debajo de la isla dinámica. */
    top: env(safe-area-inset-top, 0px);
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Entra con @keyframes y no con transition: en Safari, con la página ya
   yéndose, una transición se queda congelada donde esté y el aviso no
   llegaba a verse en el iPhone; una animación ya pintada sigue corriendo.
   La transición queda solo para la salida (atrás del navegador, Bus #N sin
   datos), cuando la página no se va. */
#paxer-topbar.is-loading {
    opacity: 1;
    transition: none;
    animation: paxerFadeIn 0.15s ease;
}

@keyframes paxerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#paxer-topbar-fill {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #0077ab, #009ad6, #36c2ff, #009ad6);
    background-size: 200% 100%;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(0, 154, 214, 0.6), 0 0 20px rgba(0, 154, 214, 0.3);
    transform: translateX(-117%);
    will-change: transform;
}

/* Solo se anima mientras carga. Antes corría siempre, con la barra
   invisible, y movía margin-left: la página se volvía a maquetar en cada
   fotograma, en el iPhone a 120 por segundo. transform lo mueve la tarjeta
   gráfica sin tocar la maquetación. */
#paxer-topbar.is-loading #paxer-topbar-fill {
    animation: paxerBarSlide 1.3s ease-in-out infinite;
}

/* Del -35 % al 110 % del ancho de la pantalla, como antes: la barra mide el
   30 %, y translateX cuenta sobre su propio ancho (-35/30 y 110/30). */
@keyframes paxerBarSlide {
    0%   { transform: translateX(-117%); }
    100% { transform: translateX(367%); }
}

/* Overlay de carga (reemplaza el #loader viejo). El JS lo enciende a la
   vez que la barra, antes de navegar, pero no se ve hasta los 250 ms y
   entra con un fundido (paxerOverlayIn): una página que llega antes no
   parpadea. Si el JS lo encendiera a los 250 ms, en el iPhone ya no se
   pintaría, porque Safari deja de pintar la página en cuanto empieza a irse;
   una animación ya pintada sí sigue corriendo. Antes pasaba de display:none
   a flex de golpe y parpadeaba. Sin desenfoque de fondo: desenfocar la
   pantalla entera se repintaba en cada fotograma del spinner y en el iPhone
   iba a saltos; un fondo algo más opaco da el mismo efecto. */
#paxer-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(6, 16, 31, 0.82);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.25rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

#paxer-overlay.is-loading {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
    animation: paxerOverlayIn 0.45s ease;
}

/* La espera de 250 ms va dentro de la animación (0-55 %, opacidad 0) y no
   en animation-delay, porque Safari solo pasa al compositor una animación
   que ya ha empezado, y con la página yéndose no volvería a mirar una que
   espera. */
@keyframes paxerOverlayIn {
    0%, 55% { opacity: 0; }
    100%    { opacity: 1; }
}

@keyframes paxerOverlayAppear {
    0%, 98% { opacity: 0; }
    100%    { opacity: 1; }
}

.paxer-overlay__spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(54, 194, 255, 0.2);
    border-top-color: #36c2ff;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(54, 194, 255, 0.2);
    will-change: transform;
}

/* Solo gira mientras se ve. */
#paxer-overlay.is-loading .paxer-overlay__spinner {
    animation: paxerSpin 0.75s linear infinite;
}

@keyframes paxerSpin {
    to { transform: rotate(360deg); }
}

.paxer-overlay__text {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

/* Con «Reducir movimiento» en el sistema: sin fundidos y con giros lentos.
   El velo sigue esperando sus 250 ms, pero aparece de golpe. */
@media (prefers-reduced-motion: reduce) {
    #paxer-topbar,
    #paxer-overlay {
        transition: none;
    }

    #paxer-topbar.is-loading {
        animation: none;
    }

    #paxer-overlay.is-loading {
        animation: paxerOverlayAppear 0.25s linear;
    }

    #paxer-topbar.is-loading #paxer-topbar-fill,
    #paxer-overlay.is-loading .paxer-overlay__spinner {
        animation-duration: 2.4s;
    }
}