/**
 * AFADIR — SPA Shell CSS
 *
 * Estilos del shell del template `page-afadir-spa.php`. Migrado desde inline
 * en audit v5d (2026-05-25) para alinearse con la política del proyecto:
 *
 *   - SECURITY_CHECKLIST.md §HTTP Security:
 *       "CSP nonce applied to all inline <script> and <style> tags."
 *   - METRICS_FAVORITOS_RATINGS.md (precedent v2.2.270):
 *       "Eliminación completa de CSS inline" — single-afadir_prensa.php,
 *       single-afadir_recurso.php, single-afadir_blog.php migrados a CSS
 *       encolado vía wp_enqueue_style.
 *
 * El template page-afadir-spa.php mantiene ~30 LOC de critical CSS inline
 * (anti-FOUC inmediato: tokens base, body reset, skip link) con nonce CSP
 * aplicado. Esto cubre el primer paint sin esperar a este archivo, pero
 * el grueso del shell (loading spinner, dark mode, layout completo) vive
 * aquí y se sirve por HTTP normal con `Content-Security-Policy: style-src
 * 'self' ...`.
 *
 * @since 2.5.56 (audit v5d)
 */

/* ──────────────────────────────────────────────────────────────────────
 * Design tokens (sync con afadir-design-system.css)
 * Estos valores se duplican porque este shell carga ANTES del design system
 * principal, y necesitamos los tokens para el loading spinner + body reset.
 * ────────────────────────────────────────────────────────────────────── */
:root {
    --af-color-bg: #ffffff;
    --af-color-text: #111827;
    --af-color-surface: #ffffff;
    --af-color-surface-secondary: #f3f4f6;
    --af-color-muted: #4b5563;
    --af-color-text-muted: #4b5563;
    --af-color-border: var(--af-color-border);
    --af-color-link: #0b5ed7;
    --afadir-brand: #f97316;
    --afadir-brand-dark: #ea580c;
    --afadir-bg: #ffffff;
    --afadir-text: #111827;
    --afadir-border: var(--af-color-border);
}

/* v2.5.200: el bloque @media (prefers-color-scheme: dark) se ha eliminado.
 * El theme parent (twentytwentyfour) NO soporta dark mode, así que cuando
 * el SO marca dark, sólo se invertían los tokens del shell SPA — produciendo
 * un splash navy sobre nav/contenido blancos (inconsistencia reportada por
 * el usuario el 2026-05-30). Para volver a habilitar dark mode hay que
 * portar los componentes del theme parent (nav, footer, banner) primero. */

/* ──────────────────────────────────────────────────────────────────────
 * Hide theme parent elements that might leak into SPA pages.
 * El template aplica `body_class('afadir-spa-page')`, por lo que estos
 * selectores sólo afectan a páginas SPA (no a contenido WP normal).
 * ────────────────────────────────────────────────────────────────────── */
.afadir-spa-page > header:not(#afadir-app-root header),
.afadir-spa-page > footer:not(#afadir-app-root footer),
.afadir-spa-page > nav:not(#afadir-app-root nav),
.afadir-spa-page > aside,
.afadir-spa-page .wp-site-blocks > header,
.afadir-spa-page .wp-site-blocks > footer,
.afadir-spa-page .site-header,
.afadir-spa-page .site-footer,
.afadir-spa-page .site-navigation {
    display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * SPA root sizing
 * ────────────────────────────────────────────────────────────────────── */
.afadir-spa-page #afadir-app-root,
.afadir-spa-page .afadir-spa-wrapper {
    min-height: 100vh;
    width: 100%;
}

/* ──────────────────────────────────────────────────────────────────────
 * SPA loading state (audit v5d)
 *
 * Overlay visible mientras el JS arranca y `#afadir-app-root` está vacío.
 * Auto-hide via `body:has(#afadir-app-root:not(:empty))` cuando el SPA
 * llama `mountHTML()` y reemplaza el innerHTML del root.
 *
 * Browser support `:has()`:
 *   Chrome 105+ / Safari 15.4+ / Firefox 121+ (Dec 2023)
 *   Cobertura global ~95%, mobile >98%.
 * Fallback: timeout duro de 20s definido por `afadir-spa-loading-timeout`.
 * ────────────────────────────────────────────────────────────────────── */
.afadir-spa-loading {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    background: var(--af-color-bg);
    color: var(--af-color-text);
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms ease-out, visibility 240ms ease-out;
    /* Safety timeout: si el SPA falla en hidratar, oculta tras 20s. */
    animation: afadir-spa-loading-timeout 20s 1 forwards;
}

/* SPA wordmark loader: las 6 letras "AFADIR" se trazan secuencialmente
 * con stroke-dasharray (handwriting effect), se mantienen visibles un
 * instante, se desvanecen y vuelven a empezar. Audit v5e.
 *
 * Implementación:
 *  - SVG con 6 `<path>` (uno por letra), `pathLength="100"` para normalizar
 *    la longitud de trazo de cada letra a 100 unidades — así un único
 *    keyframe sirve para todas.
 *  - `stroke-dasharray: 100` + `stroke-dashoffset` animado de 100 a 0
 *    "dibuja" el trazo. Después de la pausa, se desvanece (opacity 0) y
 *    al reiniciar el ciclo el dashoffset vuelve a 100 (invisible) listo
 *    para redibujar.
 *  - `animation-delay` escalonado por letra → efecto stagger de lectura
 *    izquierda→derecha.
 */
/* Audit v5g (2026-05-25): contrast fix. El brand `--afadir-brand` (var(--color-orange, var(--afadir-brand)))
 * sobre fondo blanco da ratio 2.80:1 (FAIL WCAG 1.4.11 UI 3.0:1). El
 * wordmark es decorativo (`aria-hidden="true"`, label SR aparte) por lo
 * que SC 1.4.3 (text contrast) técnicamente NO aplica, pero para
 * legibilidad real de usuarios con baja visión usamos `--afadir-brand-dark`
 * en light mode (3.56:1, pasa WCAG 1.4.11 UI components AA). En dark mode
 * el brand original (var(--color-orange, var(--afadir-brand))) ya da 6.33:1 — se mantiene.
 */
.afadir-spa-loading__wordmark {
    width: clamp(180px, 50vw, 320px);
    height: auto;
    color: var(--afadir-brand-dark);
    overflow: visible;
}
/* v2.5.200: dark-mode override del wordmark eliminado (ver el bloque @media
 * principal removed arriba). El wordmark ahora siempre usa --afadir-brand-dark
 * (#ea580c) sobre fondo blanco — coherente con resto del site light.
 * El comportamiento prefers-reduced-motion se mantiene ya gestionado más
 * abajo (línea ~183) para letras + wordmark. */

.afadir-spa-loading__wordmark .letter {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 0;
    animation: afadir-draw-letter 2.4s ease-in-out infinite;
    will-change: stroke-dashoffset, opacity;
}

.afadir-spa-loading__wordmark .letter:nth-child(1) { animation-delay: 0.00s; }
.afadir-spa-loading__wordmark .letter:nth-child(2) { animation-delay: 0.10s; }
.afadir-spa-loading__wordmark .letter:nth-child(3) { animation-delay: 0.20s; }
.afadir-spa-loading__wordmark .letter:nth-child(4) { animation-delay: 0.30s; }
.afadir-spa-loading__wordmark .letter:nth-child(5) { animation-delay: 0.40s; }
.afadir-spa-loading__wordmark .letter:nth-child(6) { animation-delay: 0.50s; }

.afadir-spa-loading__label {
    font: 600 1rem/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--af-color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8125rem;
}

@keyframes afadir-draw-letter {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    8%   { opacity: 1; }
    45%  { stroke-dashoffset: 0; opacity: 1; }   /* letra completa */
    78%  { stroke-dashoffset: 0; opacity: 1; }   /* hold visible */
    92%  { stroke-dashoffset: 0; opacity: 0; }   /* fade out */
    100% { stroke-dashoffset: 100; opacity: 0; } /* reset oculto, listo para redibujar */
}

@keyframes afadir-spa-loading-timeout {
    99%  { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
    .afadir-spa-loading__wordmark .letter {
        animation: none;
        stroke-dashoffset: 0;  /* totalmente dibujado, estático */
        opacity: 1;
    }
    .afadir-spa-loading__wordmark {
        animation: afadir-wordmark-pulse 2s ease-in-out infinite;
    }
    @keyframes afadir-wordmark-pulse {
        0%, 100% { opacity: 0.55; }
        50%      { opacity: 1; }
    }
}

/* Auto-hide cuando el SPA hidrata el root (root deja de estar vacío).
 *
 * v2.5.174: añadido `animation: none` para detener el `afadir-spa-loading-timeout`
 * (que mantenía `opacity: 1` durante 19.8s y ganaba a esta regla por
 * precedencia de animation sobre rule). Sin este reset, el usuario veía un
 * velo del ~13% sobre la página durante 20 segundos, dando la sensación de
 * que "el Cargando AFADIR se queda por encima muchísimo". El selector
 * `:has()` triggea cuando el shell se monta (root con hijos), pero las
 * propiedades de la animation seguían interpoladas a opacity 1 → visibility
 * visible. Reset explícito de animation devuelve el control a opacity:0. */
body:has(#afadir-app-root:not(:empty)) .afadir-spa-loading {
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * <noscript> fallback
 * ────────────────────────────────────────────────────────────────────── */
.afadir-spa-noscript {
    max-width: 36rem;
    margin: 4rem auto;
    padding: 1.5rem;
    border: 1px solid var(--af-color-border);
    border-radius: 8px;
    background: var(--af-color-surface);
    color: var(--af-color-text);
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.afadir-spa-noscript h2 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    color: var(--afadir-brand-dark);
}

.afadir-spa-noscript p {
    margin: 0;
    line-height: 1.5;
}