/*
 * Capa de modo oscuro -- activada por [data-theme="dark"] en <html> (ver
 * theme-toggle.js, que lee/escribe la preferencia en localStorage). 100%
 * aditivo: no modifica ninguna regla de theme.css, solo redefine los design
 * tokens de :root con más especificidad (html[data-theme="dark"] pesa más
 * que :root) y añade overrides puntuales para los pocos colores que
 * theme.css deja fuera del sistema de variables (fondo del header, imagen
 * de fondo del body, hover de enlaces). Para desactivar el modo oscuro por
 * completo: borrar este fichero, su <link> en layout.php, theme-toggle.js,
 * el <button id="theme-toggle"> y los 2 <img class="site-logo-*"> de
 * nav.php (dejando solo el logo.webp original) -- theme.css queda intacto
 * y el sitio vuelve a su aspecto original sin ningún resto.
 */

html[data-theme="dark"] {
    --color-card-age: #C9A7EE;
    --color-bg: #05080F;
    --color-surface: #121A2C;
    --color-text: #E8E3DA;
    --color-accent: #57C2D6;
    --color-accent-warm: #F2954D;
    --color-border: #263049;

    --color-quote-bg: #1A2338;
    --color-quote-text: #C7C2B8;

    --color-gold-tint: #332B12;
    --color-gold-text: #FFD866;

    --color-dialogue-orange-bg:     #33241A;
    --color-dialogue-orange-text:   #F3B37F;
    --color-dialogue-orange-border: #5A3F2A;

    --color-dialogue-purple-bg:     #251E30;
    --color-dialogue-purple-text:   #CBAEEA;
    --color-dialogue-purple-border: #453759;

    --color-dialogue-teal-bg:       #17272A;
    --color-dialogue-teal-text:     #7FDCDC;
    --color-dialogue-teal-border:   #2C4547;

    --color-dialogue-green-bg:      #212B18;
    --color-dialogue-green-text:    #B7DD8A;
    --color-dialogue-green-border:  #3F5029;

    --color-dialogue-pink-bg:       #2E1D24;
    --color-dialogue-pink-text:     #F2A8C4;
    --color-dialogue-pink-border:   #55293A;
}

/* Cabecera: mismo tono casi opaco que el fondo del logo-dark.webp / de la
   ilustración de la lamparita encendida, para que ambos queden integrados
   en la cabecera en vez de recortados sobre ella. */
html[data-theme="dark"] header.site-header {
    background: rgba(4, 7, 15, 0.9);
}

/* Estrellitas parpadeando en la cabecera nocturna -- 2 capas de puntos vía
   radial-gradient (sin imagen nueva) con ciclos de opacidad distintos y
   desfasados para que no titilen todas a la vez. pointer-events:none +
   z-index:0 para que queden detrás del menú/logo/lamparita y nunca
   intercepten clics. IMPORTANTE: nunca overflow:hidden en el header -- los
   desplegables (idioma, búsqueda, submenús) son position:absolute;top:100%
   y salen fuera de su caja a propósito; recortarlo los rompería. */
html[data-theme="dark"] header.site-header::before,
html[data-theme="dark"] header.site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Negativo (no 0): header crea su propio stacking context (position:
       relative), así que -1 basta para quedar por detrás del logo/menú/
       lamparita (bucket de contenido normal) sin caer detrás del propio
       background-color del header (que siempre pinta primero, antes que
       cualquier hijo con z-index negativo). */
    z-index: -1;
    background-repeat: no-repeat;
}

html[data-theme="dark"] header.site-header::before {
    background-image:
        radial-gradient(1.5px 1.5px at 5% 25%, #fff, transparent),
        radial-gradient(1px 1px at 11% 65%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 18% 40%, #fff, transparent),
        radial-gradient(1px 1px at 24% 80%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 30% 15%, #fff, transparent),
        radial-gradient(1px 1px at 37% 55%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 44% 30%, #fff, transparent),
        radial-gradient(1px 1px at 51% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 58% 20%, #fff, transparent),
        radial-gradient(1px 1px at 65% 60%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 72% 40%, #fff, transparent),
        radial-gradient(1px 1px at 79% 75%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 86% 25%, #fff, transparent),
        radial-gradient(1px 1px at 93% 55%, #fff, transparent);
    animation: theme-star-twinkle-a 7.5s ease-in-out infinite;
}

html[data-theme="dark"] header.site-header::after {
    background-image:
        radial-gradient(1px 1px at 8% 50%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 15% 20%, #fff, transparent),
        radial-gradient(1px 1px at 22% 85%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 28% 55%, #fff, transparent),
        radial-gradient(1px 1px at 35% 30%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 42% 70%, #fff, transparent),
        radial-gradient(1px 1px at 49% 45%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 56% 80%, #fff, transparent),
        radial-gradient(1px 1px at 63% 25%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 70% 65%, #fff, transparent),
        radial-gradient(1px 1px at 77% 35%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 90% 45%, #fff, transparent);
    animation: theme-star-twinkle-b 9.5s ease-in-out infinite;
    animation-delay: 2.3s;
}

/* Curvas asimétricas (paradas en % impares, subidas/bajadas de distinta
   duración dentro del mismo ciclo) en vez de un simple 0/50/100 -- así las
   dos capas nunca laten en fase la una con la otra y el parpadeo se siente
   más aleatorio en lugar de un pulso mecánico. */
@keyframes theme-star-twinkle-a {
    0%   { opacity: 0.15; }
    22%  { opacity: 0.6; }
    38%  { opacity: 0.2; }
    61%  { opacity: 0.7; }
    80%  { opacity: 0.25; }
    100% { opacity: 0.15; }
}

@keyframes theme-star-twinkle-b {
    0%   { opacity: 0.55; }
    17%  { opacity: 0.1; }
    43%  { opacity: 0.5; }
    68%  { opacity: 0.15; }
    85%  { opacity: 0.45; }
    100% { opacity: 0.55; }
}

/* La imagen de fondo (estrellas/libros pastel) se oscurece con filtro en vez
   de sustituirse por un asset nuevo -- mismo fichero, una capa más discreta
   por encima. Opacity algo más alta que el primer intento (el usuario lo
   vio demasiado oscuro/plano) para que el motivo siga insinuándose. */
html[data-theme="dark"] body::before {
    opacity: 0.24;
    filter: brightness(0.45) saturate(0.75);
}

/* var(--color-forest) es un tono fijo de la paleta (no un token semántico
   redefinido arriba) y se queda demasiado oscuro para leerse sobre el nuevo
   fondo navy. */
html[data-theme="dark"] a:hover {
    color: var(--color-logo-green);
}

/* .search-card y .footer-sister-site usan un pastel FIJO de la paleta como
   fondo (var(--color-cream)/var(--color-sky), no un token semántico) -- en
   la práctica, un bloque pastel intacto en medio de una página oscura se ve
   fuera de lugar (feedback del usuario tras ver capturas reales), así que
   en oscuro se convierten a un panel oscuro más (--color-quote-bg, el mismo
   tono ya usado en los bloques de cita, para diferenciarse un pelín de
   --color-surface sin introducir un tono nuevo) en vez de solo parchear el
   contraste del texto. Con el fondo ya oscuro, var(--color-text) vuelve a
   resolver claro-sobre-oscuro correctamente sin overrides de color aparte. */
html[data-theme="dark"] .search-card,
html[data-theme="dark"] .footer-sister-site {
    background: var(--color-quote-bg);
}

/* var(--color-teal) es un tono fijo de la paleta (pensado para leerse sobre
   el --color-sky claro original) -- demasiado oscuro para el nuevo fondo,
   se sustituye por el mismo teal ya aclarado que usa --color-accent en
   oscuro. */
html[data-theme="dark"] .footer-sister-eyebrow {
    color: var(--color-accent);
}

html[data-theme="dark"] .story-toc li a {
    color: var(--color-teal);
}

/* Logo: dos <img> superpuestas en nav.php (logo.webp / logo-dark.webp,
   esta última con su propio fondo nocturno estrellado ya incorporado, no
   recortada por transparencia) -- se alterna cuál es visible por tema, en
   vez de cambiar el src por JS, para que el cross-fade sea puramente CSS. */
.site-name {
    position: relative;
    display: inline-block;
}

.site-logo-dark {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* Fundido asimétrico a propósito: el logo que ENTRA se desvanece in con
   transition (2s); el que SALE desaparece instantáneo (0s) -- si ambos
   usaran la misma transición se verían superpuestos un momento (doble
   exposición) porque uno sube de 0→1 mientras el otro baja de 1→0 a la vez.
   La transición aplicable a cada cambio es la del selector que define el
   valor de LLEGADA, por eso hace falta declararla en los 4 bloques (activo/
   inactivo x claro/oscuro) en vez de una regla compartida. */
.site-logo-light { transition: opacity 2s ease; }
.site-logo-dark { transition: opacity 0s; }

html[data-theme="dark"] .site-logo-light { transition: opacity 0s; }
html[data-theme="dark"] .site-logo-dark { transition: opacity 2s ease; }

/* Ambos logos (claro Y oscuro) a la altura completa de la cabecera, sin el
   margen que dejaba el height:68px original de theme.css -- 84px es el alto
   real medido de header.site-header (68px logo + 2*0.5rem de su padding
   vertical, constante en todos los breakpoints, no hay media query que lo
   cambie); el margin negativo cancela ese padding para que la imagen llegue
   de borde a borde. No es una regla exclusiva de modo oscuro, pero vive
   aquí por ser parte del mismo ajuste de cabecera. */
header.site-header .site-logo {
    height: 84px;
    width: auto;
    margin: -0.5rem 0;
}

html[data-theme="dark"] .site-logo-light { opacity: 0; }
html[data-theme="dark"] .site-logo-dark { opacity: 1; }

/* Transición suave y deliberada al alternar día/noche (2s, igual que el
   resto de transiciones "grandes" ya establecidas en theme.css, p.ej.
   .story-sticky-title) en vez de un cambio brusco de color plano. Solo
   activa la capacidad de transición -- sin [data-theme] en el árbol no
   cambia nada, así que es inocua en modo claro. */
html { transition: background-color 2s ease; }
body,
header.site-header,
.content-card,
article.story,
article.page,
footer.site-footer,
.category-card,
.story-card-link,
ul.primary-menu .submenu {
    transition: background-color 2s ease, color 2s ease, border-color 2s ease;
}

html[data-theme="dark"] body::before { transition: opacity 2s ease, filter 2s ease; }

/* --- Interruptor de la lamparita ---
   Vive como hijo directo de header.site-header (no dentro de ul.primary-menu)
   para seguir visible en mobile aunque el menú esté colapsado. Pegado a la
   esquina superior derecha de la cabecera, cancelando su padding con
   offsets negativos, y estirado a su alto completo (top+bottom) -- sin
   recorte de círculo ni borde, se ve la ilustración entera. */
header.site-header { position: relative; }

.theme-toggle {
    position: absolute;
    /* Un pelín más pequeña que el alto completo de la cabecera (a petición
       del usuario, "se ve muy grande" y luego "un poco más grande, pegada al
       borde inferior") -- bottom:0 para tocar el borde inferior de la
       cabecera, solo un margen pequeño arriba. Pegada al borde derecho
       igual que antes. */
    top: 3px;
    right: 0;
    bottom: 0;
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 0;
    z-index: 5;
}

/* .theme-toggle tiene width:auto sin "left" -- necesita un elemento en flujo
   normal del que calcular el shrink-to-fit (un hijo position:absolute no
   cuenta para ese cálculo y el botón colapsaría a 0 de ancho). La imagen
   "off" se queda en flujo normal marcando el tamaño real; la "on" se
   superpone encima ya con caja conocida para el cross-fade. */
.theme-toggle-lamp-off {
    display: block;
    height: 100%;
    width: auto;
    transition: opacity 0.4s ease;
}

.theme-toggle-lamp-on {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

html[data-theme="dark"] .theme-toggle-lamp-off { opacity: 0; }
html[data-theme="dark"] .theme-toggle-lamp-on { opacity: 1; }

/* Sitio real de la lamparita reservado en el menú -- sin esto, el selector
   de idioma quedaría tapado detrás de la imagen fija en la esquina. Ancho
   aproximado del propio interruptor (alto de cabecera 84px * su relación
   de aspecto ~1.07 + el padding derecho de la cabecera que cancela). */
ul.primary-menu { padding-right: 96px; }

@media (max-width: 860px) {
    /* En mobile la cabecera es más baja (logo más pequeño) y el botón de
       hamburguesa vive en la esquina derecha de .site-header-top -- la
       lamparita se apoya sobre esa misma franja, así que se reduce y se
       desplaza el hamburguesa para que no se solapen. */
    .menu-toggle { right: 6rem; }
    ul.primary-menu { padding-right: 0; }
}

/* Motivo navideño (copos) en modo oscuro: velo oscuro (no gris) para que el motivo quede sutil
   y el título claro se lea bien; el marrón/halo blanco del modo claro aquí no sirven. */
html[data-theme="dark"] .theme-winter .intro h2,
html[data-theme="dark"] .winter-band,
html[data-theme="dark"] .page-title-winter {
    background:
        linear-gradient(rgba(14, 18, 32, 0.78), rgba(14, 18, 32, 0.78)),
        url("/assets/img/site/winter-band.webp") center / auto 100% repeat-x;
    filter: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .theme-winter .intro h2,
html[data-theme="dark"] .winter-band h2,
html[data-theme="dark"] .page-title-winter {
    color: #FFD9B0;
}

/* Headings de capítulo de los cuentos en modo oscuro: los tonos del logo están pensados
   para fondo claro (el morado casi no se lee sobre el fondo oscuro, y menos sobre la
   marca de agua de copos del primer capítulo), así que se redefinen aquí más claros.
   Solo afecta al cuerpo del cuento: el resto del sitio sigue con los tonos originales. */
html[data-theme="dark"] article.story .body {
    --color-logo-purple: #C9A6F0;
    --color-logo-orange: #FFA466;
    --color-logo-teal:   #6FDCDC;
    --color-logo-green:  #B4E06F;
    --color-logo-pink:   #FF93AE;
}

html[data-theme="dark"] article.story .body h2:first-of-type::before {
    opacity: 0.18;
}

/* Letra capital del extracto del cuento: el morado del logo es demasiado oscuro sobre fondo oscuro. */
html[data-theme="dark"] article.story .excerpt::first-letter {
    color: #C9A6F0;
    text-shadow: none;
}

html[data-theme="dark"] .carousel-subtitle,
html[data-theme="dark"] .categories-intro { color: #fff; }

/* El botón de campaña conserva su texto al pasar el ratón (la regla genérica a:hover lo volvía verde sobre fondo turquesa). */
html[data-theme="dark"] .campaign-button:hover { color: var(--color-surface); }