/* =========================================================================
   Pelusa Arsenales — hoja de estilo unica.

   Sin framework y sin build: el servidor no ejecuta npm y para esto no hace
   falta. Se despliega por FTP tal cual.

   DOS TEMAS, DIA Y NOCHE. Todo el color sale de variables declaradas dos veces:
   una en `:root` (dia) y otra en `[data-tema="noche"]`. Ningun componente de
   mas abajo escribe un color a pelo, y eso NO es manía: con un color suelto en
   una regla, el tema de noche se rompe justo en esa regla y no se ve hasta que
   alguien la abre de noche. Si hace falta un color nuevo, se declara arriba.

   Quien estudia aqui lo hace de noche mas veces de las que parece: son
   opositores que preparan la plaza despues de trabajar. El tema oscuro no es
   un adorno.

   LA ANIMACION SE APAGA SOLA si el navegador pide `prefers-reduced-motion`.
   Esta al final del fichero y no es opcional: hay gente a la que el movimiento
   le marea de verdad, y una plataforma de estudio no puede elegir entre ser
   vistosa y ser usable.
   ========================================================================= */

:root {
    color-scheme: light;

    /* --- superficie ------------------------------------------------------

       BLANCO Y AZUL CIELO. El blanco es el que manda: las tarjetas son blancas
       de verdad y el fondo lleva un velo de azul tan tenue que no se nombra
       como color, solo evita el blanco sobre blanco. El azul aparece en lo que
       se puede tocar y en lo que informa, no en el fondo.
       -------------------------------------------------------------------- */
    --fondo: #f2f8fd;
    --fondo-2: #e7f1fa;
    --superficie: #ffffff;
    --superficie-2: #eef6fc;
    --borde: #d9e8f4;
    /* 3,38:1 sobre blanco. Aqui puse #7ba5c4 diciendo que daba 3,02 y da 2,62:
       lo canto el test, no el ojo. Un borde que delimita un control es un
       elemento de interfaz y necesita 3:1; si no, en una pantalla con reflejos
       -o con la vista cansada- la tarjeta no tiene bordes. */
    --borde-fuerte: #6490b6;

    /* --- tinta ----------------------------------------------------------- */
    --tinta: #0d2438;
    --tinta-suave: #4a6076;
    --tinta-tenue: #6b8299;
    --sobre-color: #ffffff;      /* texto encima de un color saturado */

    /* --- la marca -------------------------------------------------------- */
    --marino: #0d2438;
    --marino-suave: #1b4061;
    --marca-fondo: #0d2438;
    --marca-tinta: #eef6fc;
    --marca-tinta-suave: #9db9d1;

    /* --- acentos -----------------------------------------------------------

       LA REGLA QUE ORDENA TODO ESTO, Y NO ES ESTETICA: si un color vale lo
       MISMO de dia y de noche, solo puede usarse como RELLENO. Si cambia entre
       los dos temas, es color de texto.

       Porque el contraste no es el mismo en los dos sentidos. Medido: el oro de
       la marca, #d98a00, sobre papel claro da 2,67:1 — por debajo del minimo
       legible de 4,5:1. Estuvo puesto como color de los enlaces, de los
       epigrafes y de los codigos de tema, o sea ilegible en la pantalla que mas
       se mira. Y el carmesi sobre el marino de noche da 3,29:1, que tambien
       falla.

       El publico de esto son adultos de cuarenta y tantos estudiando a las once
       de la noche. No es un detalle de cumplimiento.

       Asi que hay dos familias y no se mezclan: `-relleno` para fondos de
       insignia y barras, `-texto` para lo que hay que leer.
       -------------------------------------------------------------------- */

    /* RELLENOS: iguales de dia y de noche, nunca como color de texto. */
    --cielo-relleno: #0284c7;    /* blanco encima: 4,89:1 */
    --verde-relleno: #1f7a3d;    /* blanco encima: 5,40:1 */
    --oro-relleno: #d98a00;      /* marino encima: 5,90:1 */
    --carmesi-relleno: #d7263d;  /* blanco encima: 4,96:1 */
    --gris-relleno: #7b8894;     /* marino encima: 4,50:1 */

    /* TEXTO: cambian entre temas, y por eso se leen en los dos. */
    --cielo-texto: #04618f;      /* 6,31:1 sobre blanco */
    --oro-texto: #8f5600;        /* 5,98:1 */
    --carmesi-texto: #c01f33;    /* 5,43:1 */
    --verde-texto: #0f7a49;
    --enlace: var(--cielo-texto);
    --foco: #0284c7;

    /* Compatibilidad: lo que ya referenciaban las reglas de abajo. El oro deja
       de ser el acento principal y pasa a ser SOLO el amarillo del semaforo:
       el acento es ahora el azul. */
    --oro: var(--cielo-texto);
    --oro-vivo: var(--cielo-relleno);
    --oro-claro: #7dd3fc;
    --carmesi: var(--carmesi-texto);
    --rojo: var(--carmesi-texto);
    --verde: var(--verde-texto);
    --verde-vivo: #1fb878;

    /* --- estados --------------------------------------------------------- */
    --bien-fondo: #e7f7ee;
    --bien-borde: #a9e0c2;
    --bien-tinta: #0f7a49;
    --mal-fondo: #fdecee;
    --mal-borde: #f5c2c8;
    --mal-tinta: #a8142a;
    --aviso-fondo: #fff5e0;
    --aviso-tinta: #9a6400;

    /* --- compatibilidad con reglas antiguas ------------------------------ */
    --gris: var(--tinta-suave);
    --gris-claro: var(--superficie-2);
    --papel: var(--fondo);

    /* --- forma ----------------------------------------------------------- */
    --radio: 14px;
    --radio-chico: 9px;
    --sombra: 0 1px 2px rgba(11, 31, 51, .05), 0 6px 18px rgba(11, 31, 51, .06);
    --sombra-alta: 0 10px 34px rgba(11, 31, 51, .13);
    --anillo: 0 0 0 3px rgba(2, 132, 199, .32);

    /* El degradado de la casa. Se usa con cuentagotas: saludo, boton principal,
       barra de progreso y el hilo de la cabecera. Un degradado en todas partes
       deja de significar nada.

       Se llamaba `--fuego` y era oro a carmesi. Ahora es cielo, y el nombre lo
       dice: un nombre que miente sobre el color es peor que no tenerlo. */
    --cielo: linear-gradient(118deg, #38bdf8 0%, #0284c7 52%, #04618f 100%);

    --curva: cubic-bezier(.22, .8, .3, 1);

    /* EL MUELLE. Se pasa de largo y vuelve, en vez de frenar al llegar. Es lo
       que separa «aparece» de «llega»: un objeto con masa no se detiene en seco.
       El 1.56 del tercer punto es el rebote; por encima de 1.7 ya no parece un
       muelle, parece un fallo. */
    --muelle: cubic-bezier(.34, 1.56, .64, 1);

    /* Para el color, una curva lenta y sin tirones. Un degradado que cambia
       deprisa se ve como un parpadeo; despacio se ve como una transicion. */
    --color-lento: .55s cubic-bezier(.4, 0, .2, 1);
}

[data-tema="noche"] {
    color-scheme: dark;

    /* De noche el azul cielo no desaparece: se queda como el tono del fondo, y
       lo que se aclara es el texto. Asi la pantalla sigue siendo la misma de
       dia y de noche, no dos sitios distintos. */
    --fondo: #07192b;
    --fondo-2: #0a2036;
    --superficie: #0f2740;
    --superficie-2: #163450;
    --borde: #1d3d5c;
    --borde-fuerte: #3f6d94;

    /* HUESO, NO BLANCO PURO. El #fff sobre este marino da 16,3:1 y deslumbra:
       en una pantalla OLED a oscuras el texto blanco deja halo y cansa a la
       media hora. Este da 12,69:1, que sigue siendo muy holgado. */
    --tinta: #e6eef6;
    --tinta-suave: #a3b8cc;
    --tinta-tenue: #7b93aa;
    --sobre-color: #07192b;

    --marino: #e6eef6;
    --marino-suave: #cbdcea;
    --marca-fondo: #050f1c;
    --marca-tinta: #e6eef6;
    --marca-tinta-suave: #7b93aa;

    /* LOS RELLENOS NO CAMBIAN. Son los mismos cuatro valores, y por eso siguen
       sin poder usarse como texto: un hex fijo no sabe en que tema esta. */

    /* El TEXTO si, y con el contraste medido sobre la superficie oscura. */
    --cielo-texto: #7dd3fc;      /* 9,10:1 */
    --oro-texto: #efa621;        /* 8,47:1 — el #d98a00 da 5,90 y se apaga */
    --carmesi-texto: #ff7a8a;    /* 6,51:1 — el #d7263d da 3,29 y FALLA */
    --verde-texto: #4fd694;
    --enlace: var(--cielo-texto);
    --foco: #7dd3fc;

    --oro: var(--cielo-texto);
    --oro-vivo: #38bdf8;
    --oro-claro: #bae6fd;
    --carmesi: var(--carmesi-texto);
    --rojo: var(--carmesi-texto);
    --verde: var(--verde-texto);
    --verde-vivo: #4ee39a;

    --bien-fondo: #0e3326;
    --bien-borde: #1d6b4a;
    --bien-tinta: #6fe0a8;
    --mal-fondo: #3a1620;
    --mal-borde: #7d2c3c;
    --mal-tinta: #ff9aa6;
    --aviso-fondo: #38290d;
    --aviso-tinta: #ffce6b;

    --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .3);
    --sombra-alta: 0 10px 34px rgba(0, 0, 0, .45);
    --anillo: 0 0 0 3px rgba(255, 182, 39, .28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* EL TAMANO BASE EN PORCENTAJE, Y EL CUERPO EN REM.
   Fijar el cuerpo en pixeles ignora a quien ha subido el tamano de letra en su
   sistema, que con cuarenta y cinco anos y despues de una jornada es la mitad
   de la gente. Con `100%` y `rem`, subir al 125% reflow a la maquetacion en vez
   de recortarla. Y `maximum-scale` / `user-scalable=no` NO se tocan en ningun
   sitio: bloquear el zoom en una pantalla donde se lee derecho es inaceptable. */
html { font-size: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--tinta);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    transition: background-color .4s var(--curva), color .4s var(--curva);
}

/* EL ENLACE SE SUBRAYA. El color solo no basta: hay gente que no distingue el
   oro del texto, y en una lista de documentos del temario saber que es pulsable
   no puede depender del tono. */
a {
    color: var(--enlace);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* EL FOCO SE VE SIEMPRE, Y EN TODO.
   Un simulacro de 50 preguntas se hace con Tab y Espacio. Si el foco no se ve,
   no se sabe que opcion esta marcada, y eso no es incomodo: es no poder hacer
   el examen. En este fichero no hay ni un `outline: none` sin sustituto. */
:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
    border-radius: 4px;
}

.contenedor { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.contenedor-ancho { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------- cabecera */

.cabecera {
    background: var(--marca-fondo);
    color: var(--marca-tinta);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 20;
}

/* La linea de color de debajo de la cabecera: un hilo del degradado de la
   casa. Es lo primero que se ve y lo unico decorativo que hay siempre. */
.cabecera::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--cielo);
}

.cabecera .interior { display: flex; align-items: center; gap: 14px; }

.cabecera img { height: 38px; width: 38px; }
.cabecera .marca { font-weight: 700; letter-spacing: .3px; }
.cabecera .marca small {
    display: block; font-weight: 400; font-size: 11px;
    color: var(--marca-tinta-suave); letter-spacing: .5px;
}
.cabecera .relleno { flex: 1; }
.cabecera a, .cabecera button { color: var(--marca-tinta); text-decoration: none; font-size: 14px; }
.cabecera a:hover { color: var(--tinta); }

/* --------------------------------------------- el interruptor dia/noche */

.cambia-tema {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: var(--marca-tinta);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    transition: transform .3s var(--curva), background-color .2s, border-color .2s;
}
.cambia-tema:hover { background: rgba(255, 255, 255, .14); border-color: var(--oro-vivo); }
.cambia-tema:active { transform: scale(.9); }

/* El icono gira al cambiar: el sol se va, la luna entra. */
.cambia-tema .sol, .cambia-tema .luna { grid-area: 1 / 1; transition: transform .45s var(--curva), opacity .3s; }
.cambia-tema .luna { opacity: 0; transform: rotate(-70deg) scale(.4); }
[data-tema="noche"] .cambia-tema .sol { opacity: 0; transform: rotate(70deg) scale(.4); }
[data-tema="noche"] .cambia-tema .luna { opacity: 1; transform: none; }

/* --------------------------------------------------------------- tipos */

h1 { font-size: 30px; margin: 26px 0 4px; letter-spacing: -.4px; line-height: 1.2; }
h2 { font-size: 19px; margin: 30px 0 10px; letter-spacing: -.2px; }
.apunte { color: var(--tinta-suave); font-size: 14px; margin: 0 0 18px; }

/* Un trozo de texto con el degradado de la casa. Solo para el saludo. */
.encendido {
    background: var(--cielo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------- el saludo del panel */

.portada { position: relative; padding: 30px 0 6px; }

/* El lienzo de three.js vive aqui detras. Si no se carga -movil de gama
   baja, sin WebGL, o el navegador pide menos movimiento- esto se queda
   vacio y no se nota: no hay nada que dependa de el. */
/* EL width Y EL height NO SOBRAN, y su falta era un defecto de verdad.

   Lo vio Michael en su navegador el 2026-10-09: en `/entrar` las estrellas se pintaban
   solo en un recuadro de unos 300x230 px en la esquina superior izquierda, y el resto
   de la pantalla quedaba liso.

   LA CAUSA. Un `<canvas>` es un ELEMENTO REEMPLAZADO, con medidas intrinsecas propias
   -300x150 por omision-. En CSS, para un elemento posicionado y reemplazado con
   `width: auto`, poner `left: 0` y `right: 0` NO lo estira: se resuelve a su tamano
   intrinseco y la restriccion que sobra se ignora. O sea que el `inset` de aqui no
   estiraba nada.

   Y ENCIMA SE REALIMENTA. `constelacion.js` mide con `getBoundingClientRect()` y llama
   a `setSize(ancho, alto, false)`; ese `false` le dice a three.js «no toques el CSS»,
   asi que escribe los ATRIBUTOS `width`/`height` del lienzo multiplicados por el
   `pixelRatio`. Con la caja en 300x150 y un ratio de 1,5 los atributos quedan en
   450x225 — y 225 es el «230» que se veia.

   Las dos reglas del fondo vivo tenian el mismo agujero: esta y la de pantalla
   completa. Lo cubre `TemaYFondoVivoTest::el_fondo_vivo_declara_su_tamano`. */
.portada .fondo-vivo {
    position: absolute;
    inset: -10px 0 0;

    /* 100% de la `.portada` mas los 10px que arranca por encima. */
    width: 100%;
    height: calc(100% + 10px);
    display: block;

    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.portada .fondo-vivo.visible { opacity: 1; }
.portada > *:not(.fondo-vivo) { position: relative; z-index: 1; }

.marcador-racha {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 6px 15px 6px 9px;
    font-size: 13.5px;
    box-shadow: var(--sombra);
}
/* LATE TRES VECES Y SE PARA.
   Estaba en bucle infinito. Algo que se mueve sin parar en la pantalla donde se
   estudia obliga a releer desde cero cada vez que el ojo lo pilla, gasta bateria
   y de noche rompe la adaptacion a la oscuridad. La disciplina que funciona es
   UN SOLO foco animado en toda la pantalla, y aqui ese sitio esta reservado al
   cronometro del examen cuando quedan dos minutos. */
.marcador-racha .llama { font-size: 1.05rem; animation: latido 2.2s ease-in-out 3; }
.marcador-racha b { color: var(--oro-texto); }

/* -------------------------------------------------------------- tarjetas */

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px;
}

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 14px;
}

/* ----------------------------------------------------------------- temas */

.tema {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 15px 17px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    transition: transform .35s var(--curva), box-shadow .35s var(--curva), border-color .25s;

    /* Cada tarjeta entra un poco despues que la anterior. El escalonado lo
       pone la vista con --i; sin el, todas entran a la vez y parece un
       parpadeo en vez de una secuencia. */
    animation: surgir .55s var(--curva) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}

/* La banda de color del semaforo, a la izquierda. Crece al pasar por encima:
   es el unico dato que el alumno mira de un vistazo. */
.tema::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--color-tema, var(--borde-fuerte));
    transition: width .3s var(--curva);
}

.tema:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-alta);
    border-color: var(--borde-fuerte);
}
.tema:hover::before { width: 8px; }

/* LA BARRA DE ACIERTO, PEGADA AL BORDE DE ABAJO.
   El porcentaje ya se calculaba y solo se usaba para elegir un color: el dato
   estaba y no se veia. Pegada al borde inferior se lee de un vistazo en la
   rejilla entera, sin ocupar una linea mas en una tarjeta que ya esta llena.

   Es RELLENO, asi que usa los colores de relleno, que son los mismos de dia y de
   noche. Y nunca va sola: al lado esta siempre la etiqueta en texto, porque el
   color por si solo no es un dato para quien no lo distingue. */
.tema .barra-tema {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: color-mix(in srgb, var(--borde) 70%, transparent);
}
.tema .barra-tema > i {
    display: block;
    height: 100%;
    background: var(--color-relleno, var(--gris-relleno));

    /* Crece desde cero al cargar: la animacion ES el dato. Un salto a su
       posicion final no dice «has avanzado hasta aqui». */
    animation: crecer-barra .9s var(--curva) .25s both;
}

.tema.verde    { --color-tema: var(--verde-texto);   --color-relleno: var(--verde-relleno); }
.tema.amarillo { --color-tema: var(--oro-texto);     --color-relleno: var(--oro-relleno); }
.tema.rojo     { --color-tema: var(--carmesi-texto); --color-relleno: var(--carmesi-relleno); }
.tema.gris     { --color-tema: var(--borde-fuerte);  --color-relleno: var(--gris-relleno); }

/* MATERIAL DE CONSULTA: un tema con documento y sin preguntas.
   Azul y no gris, a proposito. El gris de esta rejilla significa «todavia no has
   empezado», y aqui no hay nada que empezar: es informacion, no progreso sin
   hacer. El azul es el color de lo que informa en toda la plataforma.
   No lleva `--color-relleno` porque no lleva barra de acierto: no hay acierto. */
.tema.consulta { --color-tema: var(--cielo-texto); }

.etiqueta-consulta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 3px;
    border-radius: 999px;
    border: 1px solid var(--borde-fuerte);
    background: color-mix(in srgb, var(--cielo-relleno) 10%, transparent);
    color: var(--cielo-texto);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .3px;
}

/* EL LIBRO VA EN EL HTML, con aria-hidden, y NO en un ::before.
   Lo tuve en un ::before con el comentario «un lector de pantalla no lo leeria». Era
   falso: NVDA y VoiceOver SI anuncian el contenido de un ::before, y lo que se oye es
   «libro abierto Material de consulta». Un pseudoelemento no se puede marcar como
   decorativo —aria-hidden no se aplica a algo que no es un nodo—, asi que la unica
   forma de que no se lea es que este en el HTML con su aria-hidden. */
.etiqueta-consulta .icono { font-size: 11px; }

.tema .codigo {
    font-size: .7rem; font-weight: 800; color: var(--tinta-tenue);
    letter-spacing: 1px;
}
.tema .titulo { font-weight: 650; font-size: 15.5px; line-height: 1.35; }
.tema .estado { font-size: 12.5px; color: var(--tinta-suave); }
.tema .pie { display: flex; gap: 8px; align-items: center; margin-top: 2px; flex-wrap: wrap; }

.punto {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: baseline;
}
/* El punto es relleno puro: mismos valores de dia y de noche. */
.punto.verde { background: var(--verde-relleno); }
.punto.amarillo { background: var(--oro-relleno); }
.punto.rojo { background: var(--carmesi-relleno); }
.punto.gris { background: var(--gris-relleno); }

/* ---------------------------------------------------------------- botones */

.boton {
    position: relative;
    display: inline-block;
    background: var(--marca-fondo);
    color: var(--marca-tinta);
    border: 0;
    border-radius: var(--radio-chico);
    padding: 10px 17px;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    overflow: hidden;
    transition: transform .2s var(--curva), box-shadow .25s var(--curva), filter .2s;
}
.boton:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }

/* LA RESPUESTA AL PULSAR. Se hunde y se encoge, y DEPRISA: 70 ms. El retorno
   tactil tiene que coincidir con el dedo; si tarda lo que la entrada, se siente
   como si el boton fuera por detras de quien lo pulsa. */
.boton:active {
    transform: translateY(1px) scale(.965);
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .22);
    transition-duration: .07s;
}

/* El anillo de la marca ADEMAS del contorno del sistema, no en lugar de el.
   Aqui ponia `outline: none`, y entonces el foco dependia de que la sombra se
   viera sobre el fondo de ese boton concreto. */
.boton:focus-visible { box-shadow: var(--anillo); }

/* El brillo que cruza el boton al pasar por encima. Es lo que hace que un
   boton parezca pulsable antes de pulsarlo. */
.boton::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-18deg);
    transition: left .55s var(--curva);
}
.boton:hover::after { left: 130%; }

/* EL BOTON PRINCIPAL CAMBIA DE COLOR DESPACIO, y eso tiene truco: un degradado
   NO se puede transicionar con `transition`, porque el navegador no sabe
   interpolar entre dos degradados.

   Asi que el segundo degradado vive en una capa de debajo, siempre dibujada, y
   lo que se transiciona es su OPACIDAD. El resultado es una mezcla real entre
   los dos, no un salto. Y por eso puede ser lenta sin verse a tirones. */
.boton.principal {
    background: var(--cielo);
    color: #2a1500;
    isolation: isolate;
}
.boton.principal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(118deg, var(--carmesi) 0%, var(--oro) 55%, var(--oro-vivo) 100%);
    opacity: 0;
    transition: opacity var(--color-lento);
}
.boton.principal:hover::before { opacity: 1; }
.boton.fino { padding: 7px 12px; font-size: 13px; font-weight: 600; }
.boton.fantasma {
    background: transparent;
    color: var(--tinta);
    border: 1px solid var(--borde-fuerte);
}
.boton.fantasma:hover { background: var(--superficie-2); border-color: var(--oro); }
.boton.fantasma::after { display: none; }
.boton[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

select.boton { appearance: auto; }

/* ---------------------------------------------------------------- acceso */

.acceso { max-width: 390px; margin: 8vh auto; position: relative; z-index: 1; }

/* LA TARJETA SE ACERCA DESDE LEJOS (Michael, 2026-10-12).

   Antes subia desde abajo con un muelle (`llegar-de-abajo`, borrado). Ahora se
   acerca: crece desde el 60 %, se enfoca y aparece.

   VA EN `.acceso .tarjeta` Y NO EN UNA CLASE APARTE, y eso tambien lo decidio
   Michael. La primera version lo puso solo en `/entrar`, con un modificador; el
   problema es que `.acceso` lo comparten `/entrar` y `/cambiar-clave`, que son
   **las dos pantallas seguidas del primer acceso** -te dictan una clave, entras y
   eliges la tuya-. Con animaciones distintas, esa secuencia se ve rota. Y puesto
   aqui, cualquier pantalla de acceso que se anada manana la hereda sin que nadie
   tenga que acordarse de una clase.

   LAS TRES PROPIEDADES SON A PROPOSITO Y NINGUNA MUEVE LA MAQUETACION:
   `transform`, `opacity` y `filter` se pintan en una capa aparte, asi que el
   resto de la pagina no se recoloca mientras dura. Con un `width` o un `margin`
   animados, el formulario entero bailaria.

   Y NO RETRASA EL FOCO: el campo Correo lleva `autofocus`, que el navegador
   aplica al parsear el HTML, no al acabar una animacion. Se escribe desde el
   primer momento aunque la tarjeta siga acercandose.

   `both` mantiene el primer fotograma antes de empezar: sin el, la tarjeta
   asomaria un instante a tamano final y daria un salto. */
.acceso .tarjeta {
    padding: 28px;
    animation: acercarse .8s cubic-bezier(.16, .84, .32, 1) both;
}

.acceso img { display: block; width: 92px; margin: 0 auto 14px; animation: entrar-logo .9s var(--curva) .18s both; }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.campo input[type=email], .campo input[type=password] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    font-size: 15px;
    font-family: inherit;
    background: var(--superficie);
    color: var(--tinta);

    /* La transicion va en el elemento, NO en el :hover. Puesta en el :hover
       solo se aplicaria al entrar, y al salir el borde volveria de golpe: se
       siente como si la pagina se hubiera quedado colgada un momento. */
    transition: border-color .32s ease, box-shadow .32s ease, background-color .32s ease;
}

/* Al pasar por encima, el borde se calienta. El `:not(:focus)` es lo que hace
   que, UNA VEZ PULSADO, el campo se quede como esta: al apartar el raton de un
   campo donde se esta escribiendo, el borde no se enfria. */
.campo input:hover:not(:focus) { border-color: var(--oro-vivo); }

.campo input:focus { border-color: var(--oro-texto); box-shadow: var(--anillo); }

/* EL AVISO NO TIEMBLA, Y LO QUITE A PROPOSITO.
   Aqui habia un `animation: temblar`. Sacudir la pantalla al fallar es castigo
   animado, y es justo lo que no sirve a quien lleva ocho meses preparando una
   plaza: el fallo es su estado normal, falla doscientas veces por sesion. La
   sacudida no le informa de nada que el color y el texto no digan ya, y repetida
   doscientas veces cansa. Entra subiendo, como todo lo demas. */
.error {
    background: var(--mal-fondo);
    border: 1px solid var(--mal-borde);
    color: var(--mal-tinta);
    padding: 10px 13px;
    border-radius: var(--radio-chico);
    font-size: .85rem;
    margin-bottom: 14px;
    animation: surgir .35s var(--curva) both;
}

/* AQUI ESTABA `.fondo-vivo-pantalla`, el fondo de estrellas de /entrar, y se
   quito el 2026-10-12 porque Michael decidio que esa pantalla llevara el fondo
   liso. Ninguna vista usa ya esa clase, asi que la regla era codigo muerto y el
   codigo muerto en un CSS acaba copiandose a otro sitio «porque ya estaba».

   El fondo vivo del PANEL sigue: es `.portada .fondo-vivo`, mas arriba. */

/* ---------------------------------------------------------------- estudio */

.barra-progreso {
    height: 6px;
    background: var(--superficie-2);
    border-radius: 3px;
    overflow: hidden;
    margin: 14px 0 22px;
}
.barra-progreso > div {
    height: 100%;
    background: var(--cielo);
    transition: width .35s var(--curva);
}

.marcador { display: flex; gap: 16px; font-size: 13px; color: var(--tinta-suave); margin-bottom: 4px; }
.marcador b { color: var(--tinta); }

.enunciado { font-size: 18px; font-weight: 650; line-height: 1.45; margin: 4px 0 16px; }
.epigrafe {
    font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
    color: var(--oro); text-transform: uppercase;
}

.opciones { display: flex; flex-direction: column; gap: 9px; }

.opcion {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    background: var(--superficie);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 13px 15px;
    font-size: 15px;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    line-height: 1.4;
    transition: border-color .18s, background-color .18s, transform .18s var(--curva);
}
.opcion:hover:not([disabled]) { border-color: var(--oro); transform: translateX(3px); }
.opcion[disabled] { cursor: default; }
.opcion .letra {
    flex: 0 0 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--superficie-2);
    color: var(--tinta);
    font-size: 12.5px;
    font-weight: 800;
    display: grid;
    place-items: center;
    margin-top: 1px;
    transition: background-color .18s, color .18s;
}
.opcion.acertada { border-color: var(--verde); background: var(--bien-fondo); }
.opcion.acertada .letra { background: var(--verde); color: var(--sobre-color); }
.opcion.fallada { border-color: var(--carmesi); background: var(--mal-fondo); }
.opcion.fallada .letra { background: var(--carmesi); color: var(--sobre-color); }

.veredicto {
    margin-top: 18px;
    border-radius: var(--radio-chico);
    padding: 15px 17px;
    font-size: 14.5px;
    animation: surgir .4s var(--curva) both;
}
.veredicto.bien { background: var(--bien-fondo); border: 1px solid var(--bien-borde); }
.veredicto.mal  { background: var(--mal-fondo); border: 1px solid var(--mal-borde); }
.veredicto .titulo { font-weight: 800; margin-bottom: 5px; }
.veredicto.bien .titulo { color: var(--bien-tinta); }
.veredicto.mal .titulo { color: var(--mal-tinta); }
.veredicto .texto { color: var(--tinta); }

.enlace-apartado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    background: var(--marca-fondo);
    color: var(--marca-tinta);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: var(--radio-chico);
    font-size: 13.5px;
    font-weight: 650;
    transition: transform .2s var(--curva), box-shadow .2s;
}
.enlace-apartado:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.enlace-apartado .pag { font-weight: 400; opacity: .75; }

.navegacion { display: flex; gap: 10px; margin-top: 22px; align-items: center; }
.navegacion .relleno { flex: 1; }

/* ---------------------------------------------------------- modo examen */

.cabecera-examen { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.cabecera-examen > div:first-child { flex: 1; }

.cronometro {
    flex: 0 0 auto;
    text-align: center;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 9px 18px;
    font-variant-numeric: tabular-nums;
}
.cronometro span { display: block; font-size: 27px; font-weight: 800; color: var(--tinta); line-height: 1.1; }
.cronometro small { font-size: 11px; color: var(--tinta-suave); letter-spacing: .5px; text-transform: uppercase; }
.cronometro.poco { background: var(--aviso-fondo); border-color: var(--oro); }
.cronometro.poco span { color: var(--aviso-tinta); }

/* El unico latido de toda la aplicacion que esta para inquietar, y solo en
   los ultimos minutos de un examen. */
.cronometro.muy-poco { background: var(--mal-fondo); border-color: var(--mal-borde); }
.cronometro.muy-poco span { color: var(--mal-tinta); animation: latido 1s ease-in-out infinite; }

.opcion.marcada { border-color: var(--oro); background: var(--aviso-fondo); }
.opcion.marcada .letra { background: var(--oro); color: var(--sobre-color); }

.mapa { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 22px; }
.casilla {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid var(--borde);
    background: var(--superficie);
    font-size: 12.5px;
    font-weight: 650;
    font-family: inherit;
    color: var(--tinta);
    cursor: pointer;
    transition: transform .15s var(--curva), background-color .15s;
}
.casilla:hover { transform: scale(1.12); }
.casilla.hecha { background: var(--oro); border-color: var(--oro); color: var(--sobre-color); }
.casilla.blanca { border-style: dashed; color: var(--tinta-tenue); }
.casilla.aqui { outline: 2px solid var(--carmesi); outline-offset: 2px; }

.velo {
    position: fixed;
    inset: 0;
    background: rgba(5, 14, 24, .62);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    padding: 20px;
    z-index: 50;
    animation: aparecer .25s ease both;
}
.dialogo { max-width: 430px; width: 100%; animation: surgir .35s var(--curva) both; }
.resumen-entrega { font-size: 17px; margin: 0 0 8px; }
.resumen-entrega b { font-size: 22px; color: var(--tinta); }

.nota {
    display: flex; gap: 20px; align-items: center;
    border-radius: var(--radio); padding: 20px 24px; margin-bottom: 14px;
    animation: surgir .5s var(--curva) both;
}
.nota.bien { background: var(--bien-fondo); border: 1px solid var(--bien-borde); }
.nota.mal { background: var(--mal-fondo); border: 1px solid var(--mal-borde); }
.nota .cifra { font-size: 50px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.nota.bien .cifra { color: var(--bien-tinta); }
.nota.mal .cifra { color: var(--mal-tinta); }
.nota .desglose { font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.nota .desglose span { color: var(--tinta); }
.nota .desglose small { color: var(--tinta-suave); font-size: 12.5px; margin-top: 4px; }

.corregida { margin-bottom: 12px; border-left: 4px solid var(--borde); }
.corregida.bien { border-left-color: var(--verde); }
.corregida.mal { border-left-color: var(--carmesi); }
.corregida.blanca { border-left-color: var(--tinta-tenue); }

.cabecera-corregida { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cabecera-corregida .numero {
    width: 27px; height: 27px; border-radius: 50%;
    background: var(--superficie-2); color: var(--tinta);
    display: grid; place-items: center; font-size: 12.5px; font-weight: 800;
}
.cabecera-corregida .veredicto-corto {
    font-size: 12.5px; font-weight: 800; color: var(--tinta-suave);
    text-transform: uppercase; letter-spacing: .5px;
}
.corregida.bien .veredicto-corto { color: var(--bien-tinta); }
.corregida.mal .veredicto-corto { color: var(--mal-tinta); }
.cabecera-corregida .epigrafe { margin-left: auto; text-transform: none; }

.corregida .opcion { cursor: default; }

@media (max-width: 800px) {
    .cabecera-examen { flex-direction: column; }
    .cronometro { align-self: flex-start; }
    .nota { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ----------------------------------------------------------- montar test */

.montar { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }

.cabecera-bloque { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cabecera-bloque b { font-size: 14px; }
.cabecera-bloque button { margin-left: auto; }

.temas-elegibles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px; }

.tema-elegible {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 13.5px;
    cursor: pointer;
    line-height: 1.3;
    transition: background-color .15s;
}
.tema-elegible:hover { background: var(--superficie-2); }
.tema-elegible .codigo { font-weight: 800; color: var(--oro); flex: 0 0 auto; }
.tema-elegible .titulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tema-elegible .cuenta { font-size: 12px; color: var(--tinta-suave); flex: 0 0 auto; }
.tema-elegible .cuenta.vacio { color: var(--carmesi); font-weight: 800; }

.resumen { position: sticky; top: 74px; }
.resumen .rotulo {
    font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 8px;
}
.resumen select + .rotulo, .resumen .opcion-filtro + .rotulo { margin-top: 16px; }

.opcion-filtro { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; cursor: pointer; }
.opcion-filtro input { margin-top: 3px; accent-color: var(--oro); }
.opcion-filtro b { font-size: 13.5px; font-weight: 650; display: block; }
.opcion-filtro small { font-size: 12px; color: var(--tinta-suave); display: block; line-height: 1.3; }

.disponibles {
    margin: 16px 0 12px;
    padding: 13px 15px;
    border-radius: var(--radio-chico);
    background: var(--superficie-2);
    transition: opacity .15s ease, background-color .2s;
}
.disponibles.cargando { opacity: .5; }
.disponibles.sin-nada { background: var(--mal-fondo); border: 1px solid var(--mal-borde); }
.disponibles .etiqueta { font-size: 12px; color: var(--tinta-suave); }
.disponibles .total { font-size: 15px; font-weight: 800; margin-top: 2px; }
.disponibles .total span { font-size: 23px; color: var(--oro); }
.disponibles .aviso { font-size: 12.5px; color: var(--mal-tinta); margin-top: 7px; line-height: 1.35; }

@media (max-width: 800px) {
    .montar { grid-template-columns: 1fr; }
    .resumen { position: static; }
}

/* ---------------------------------------------------------------- visor */

.visor { display: grid; grid-template-columns: 270px 1fr; gap: 18px; align-items: start; }

.indice { position: sticky; top: 74px; max-height: calc(100vh - 96px); overflow-y: auto; }
.indice ol, .indice ul { list-style: none; margin: 0; padding: 0; }
.indice li { margin: 0; }

.indice .rotulo {
    font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 8px;
}
.indice .rotulo ~ .rotulo,
.indice ul + .rotulo,
.indice ol + .rotulo {
    margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--borde);
}

.documentos a { padding: 8px 10px; }
.documentos .pags { display: block; font-size: 11.5px; color: var(--tinta-suave); margin-top: 2px; }
.documentos a.activo .pags { color: var(--oro-claro); }

.indice a {
    display: block;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--tinta);
    text-decoration: none;
    line-height: 1.35;
    transition: background-color .15s;
}
.indice a:hover { background: var(--superficie-2); }
.indice a.activo { background: var(--marca-fondo); color: var(--marca-tinta); }
.indice .num { font-weight: 800; color: var(--oro); margin-right: 5px; }
.indice a.activo .num { color: var(--oro-claro); }

.hoja {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

/* La proteccion de verdad es servir imagen sin capa de texto y con la marca
   de agua incrustada. Esto solo quita las ganas al que lo intenta por reflejo.

   EL FONDO DE `.hoja` SE QUEDA BLANCO TAMBIEN DE NOCHE, a proposito: la pagina
   del temario es una imagen de papel blanco, y ponerle un marco oscuro alrededor
   la hace parecer un recorte flotando. */
.hoja img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.paginador { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 14px 0 26px; }
.paginador .cuenta { font-size: 13.5px; color: var(--tinta-suave); min-width: 110px; text-align: center; }

@media (max-width: 800px) {
    .visor { grid-template-columns: 1fr; }
    .indice { position: static; max-height: 230px; }
    .enunciado { font-size: 16.5px; }
    h1 { font-size: 25px; }
}

/* ============================================================= movimiento

   RESPUESTA AL RATON EN TODO LO QUE SE PUEDE TOCAR, y en los DOS sentidos.

   La regla que lo hace funcionar: la transicion se declara en el elemento,
   nunca dentro del `:hover`. Puesta en el `:hover` solo se aplica al entrar, y
   al salir el elemento vuelve de golpe; se siente como si la pagina se hubiera
   quedado colgada un instante.

   Y el `:active` de todo lo pulsable va deprisa, 80 ms. El retorno tactil tiene
   que coincidir con el dedo.
   ========================================================================= */

a,
.enlace-apartado,
.tema-elegible,
.opcion-filtro,
.indice a,
.documentos a,
.casilla,
.punto,
.marcador-racha,
summary {
    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        transform .25s var(--curva),
        box-shadow .25s var(--curva),
        opacity .25s ease;
}

a:hover { color: var(--tinta); }

/* Lo pulsable se hunde al pulsarlo. Uno por uno y no con un selector global:
   un `*:active` tocaria tambien el cuerpo del texto y los contenedores. */
.boton:active,
.casilla:active,
.opcion:not([disabled]):active,
.tema-elegible:active,
.enlace-apartado:active,
.cambia-tema:active,
.indice a:active,
.documentos a:active {
    transform: scale(.965);
    transition-duration: .08s;
}

/* Las tarjetas de tema y las filas de cualquier tabla responden igual: un
   desplazamiento corto hacia el lado, que dice «esto es una fila» sin gritar. */
tr { transition: background-color .22s ease, transform .22s var(--curva); }
tbody tr:hover { background: var(--superficie-2); }

.marcador-racha:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.punto { transition-duration: .3s; }
.tema:hover .punto { transform: scale(1.3); }

@keyframes surgir {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

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

@keyframes entrar-logo {
    from { opacity: 0; transform: scale(.78) rotate(-7deg); }
    to   { opacity: 1; transform: none; }
}

/* EL ACERCAMIENTO DESDE LEJOS, de la tarjeta de /entrar.

   Tres cosas a la vez y las tres en la misma direccion: crece, se enfoca y
   aparece. El desenfoque es lo que hace que se lea como «lejos» y no como
   «pequena»: sin el, una escala del 60 % parece una tarjeta chica que crece.

   EL DESENFOQUE SE VA ANTES QUE LA ESCALA, en el 70 %, y no es un detalle: con el
   blur llegando hasta el final, el ultimo tramo -donde el texto ya es legible- se
   ve sucio justo cuando el ojo intenta leer «Acceso de alumnos».

   `will-change` no se pone: son 800 ms una sola vez al cargar, y dejar una capa
   de composicion reservada para siempre a cambio de eso no sale a cuenta. */
@keyframes acercarse {
      0% { opacity: 0; transform: scale(.6);   filter: blur(7px); }
     70% {             filter: blur(0); }
    100% { opacity: 1; transform: scale(1);    filter: blur(0); }
}

@keyframes crecer-barra {
    from { width: 0 !important; }
}

/* =========================================================================
   LOS BLOQUES ENTRAN CUANDO LLEGAS A ELLOS

   La entrada escalonada de la carga se gasta en lo que está fuera de la
   pantalla: en el panel hay 29 temas en cuatro partes, y los de abajo terminan
   de animarse mucho antes de que nadie baje hasta ahí. Bajar se convertía en
   recorrer una lista quieta.

   Con esto, cada bloque se presenta al asomar. El desplazamiento deja de ser
   recorrer y pasa a ser que el contenido venga a tu encuentro.

   EL ESTADO DE PARTIDA DEPENDE DE `.con-revelado`, que pone `revelar.js`. Si el
   JavaScript no llega a ejecutarse, nada de esto aplica y se ve todo. Esconder
   contenido con CSS a la espera de un JavaScript que puede no llegar es como se
   consigue una página en blanco permanente.
   ========================================================================= */

.con-revelado [data-revelar] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .62s var(--curva) var(--retraso, 0ms),
        transform .62s var(--muelle) var(--retraso, 0ms);
}

.con-revelado [data-revelar].revelado {
    opacity: 1;
    transform: none;
}

/* Los bloques de texto llegan desde un lado, alternando. Es lo que hace que una
   sucesión de párrafos se lea como una secuencia y no como un muro. */
.con-revelado [data-revelar="izquierda"] { transform: translate3d(-34px, 14px, 0); }
.con-revelado [data-revelar="derecha"]   { transform: translate3d(34px, 14px, 0); }
.con-revelado [data-revelar="izquierda"].revelado,
.con-revelado [data-revelar="derecha"].revelado { transform: none; }

/* DE NOCHE SE SEPARA CON BORDE, NO CON SOMBRA.
   Una sombra es oscuridad proyectada sobre algo claro: sobre un fondo oscuro no
   existe, y las tarjetas se funden con el fondo. Se pierde el sitio al
   desplazar, que es grave cuando la unidad de lectura es una pregunta. */
[data-tema="noche"] .tarjeta,
[data-tema="noche"] .tema,
[data-tema="noche"] .hoja,
[data-tema="noche"] .marcador-racha {
    box-shadow: none;
    border: 1px solid var(--borde-fuerte);
}
[data-tema="noche"] .tema:hover,
[data-tema="noche"] .marcador-racha:hover {
    border-color: var(--oro-texto);
    box-shadow: none;
}

@keyframes latido {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.16); }
}

@keyframes temblar {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(2px); }
}

/* =========================================================================
   MENOS MOVIMIENTO, SI EL NAVEGADOR LO PIDE.

   No es un detalle de cortesia. A una parte de la gente el movimiento en
   pantalla le produce mareo de verdad, y esto es una plataforma donde se
   estudia durante horas. Quien lo tenga puesto en su sistema ve exactamente
   la misma interfaz, con los mismos colores, quieta.

   `constelacion.js` mira esta misma preferencia y ni siquiera descarga
   three.js.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .tema:hover, .boton:hover, .casilla:hover, .enlace-apartado:hover { transform: none; }
    .opcion:hover:not([disabled]) { transform: none; }
    .marcador-racha:hover, .tema:hover .punto, tbody tr:hover { transform: none; }

    /* El hundimiento al pulsar SE QUEDA. No es movimiento decorativo: es la
       única señal de que el botón ha recibido el clic, y quitarla deja al
       usuario sin saber si ha pasado algo. Dura 10 ms, no marea a nadie. */
    .boton:active, .casilla:active, .opcion:not([disabled]):active,
    .tema-elegible:active, .enlace-apartado:active, .cambia-tema:active {
        transform: scale(.97);
    }

    .fondo-vivo { display: none; }

    /* LA TARJETA DE /entrar APARECE DIRECTAMENTE, sin acercarse.

       No basta con el `animation-duration: .01ms` de la regla global de arriba:
       eso EJECUTA la animacion durante una fraccion, y su primer fotograma lleva
       un `blur(7px)` que puede verse como un destello en el primer repintado.
       Con `animation: none` no hay ningun fotograma que pintar. */
    .acceso .tarjeta {
        animation: none;
        transform: none;
        filter: none;
        opacity: 1;
    }
}