/* MODO OSCURO (decisión del 05/10/2026): los colores son variables y hay dos juegos, el claro (acá abajo, en :root) y el oscuro. El oscuro se usa cuando el alumno o el docente lo eligió con el botón
   de arriba a la derecha (js/Tema.js lo guarda en este dispositivo y pone data-tema="oscuro" en <html>) o, si nunca eligió, cuando el dispositivo prefiere oscuro (prefers-color-scheme).
   Los nombres no cambian de significado: --negro es el color del texto y de los botones principales (en oscuro es crema), --fondo el del fondo de la página y --blanco el de las tarjetas.
   Las dos copias del juego oscuro (la del media query y la de data-tema) tienen que ser IGUALES: scripts/TestTema.cjs lo comprueba.
   Marca de Rindiendo: negro #111111 y fondo claro #F7F4EE. Tipografía Nunito (el logo usa Nunito 900).
   DIRECCIÓN DE DISEÑO «HOJA DE CARPETA» (decisión del dueño, 11/10/2026; docs/PROPUESTA_DISENO.md): papel crema y tinta negra de la marca, sin azul (decisión del dueño, 12/10/2026: lo elegido, los links y el foco van en el color del texto, siempre con algo que no es color), y un margen rojo a la izquierda
   de cada hoja (tarjeta, pregunta). Variables nuevas: --acento (el color del texto: negro en claro, crema en oscuro), --accion y --sobre-accion (botón principal), --resalte y --sobre-resalte (lo elegido), --margen (el rojo de la hoja) y las formas
   (--radio-control, --radio-campo, --grosor-margen). Los nombres que ya existían no cambian de significado.
   La fuente está AUTOALOJADA en assets/fonts/nunito/ (subconjunto latino, licencia OFL en OFL.txt):
   no se llama a Google Fonts. Si el archivo no cargara, se usa una fuente redondeada del sistema. */

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/nunito/nunito-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../assets/fonts/nunito/nunito-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/nunito/nunito-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../assets/fonts/nunito/nunito-latin-800-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../assets/fonts/nunito/nunito-latin-900-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;
    --negro: #111111;
    --fondo: #F7F4EE;
    --blanco: #FFFFFF;
    --borde: #CFC8BA;
    --borde-fuerte: #6F6A5F;
    --texto-suave: #4A463E;
    --error: #9B1C1C;
    --error-fondo: #FBECEC;
    --exito: #14532D;
    --exito-fondo: #E7F4EA;
    --aviso: #7A4B00;
    --aviso-fondo: #FFF4DC;
    --fuente: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --acento: #111111;
    --accion: #111111;
    --sobre-accion: #F7F4EE;
    --resalte: #DAD6CD;
    --sobre-resalte: #111111;
    --margen: #C0392B;
    --radio: 6px;
    --radio-control: 6px;
    --radio-campo: 6px;
    --radio-chip: 4px;
    --grosor-margen: 6px;
    --sombra: 0 1px 2px rgba(17, 17, 17, .06), 0 8px 24px rgba(17, 17, 17, .08);
    --boton-hover: #2B2B2B;
    --boton-secundario-hover: rgba(17, 17, 17, .06);
    --peligro-hover: #7A1616;
    --barra-fondo: #111111;
    --barra-texto: #F7F4EE;
    --barra-aviso: #FFD27A;
    --barra-peligro-fondo: #9B1C1C;
    --barra-peligro-texto: #FFFFFF;
    --logo-filtro: none;
}

/* Oscuro por preferencia del dispositivo (si todavía no eligió con el botón) */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema]) {
        color-scheme: dark;
        --negro: #F2EEE6;
        --fondo: #121212;
        --blanco: #1E1E1D;
        --borde: #3B3935;
        --borde-fuerte: #9B9588;
        --texto-suave: #BEB8AB;
        --acento: #F2EEE6;
        --accion: #F2EEE6;
        --sobre-accion: #121212;
        --resalte: #3A3834;
        --sobre-resalte: #F2EEE6;
        --margen: #FF8A7A;
        --error: #FF9E97;
        --error-fondo: #3A1B1A;
        --exito: #8FDBA3;
        --exito-fondo: #15301F;
        --aviso: #FFD27A;
        --aviso-fondo: #3A2D0B;
        --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .55);
        --boton-hover: #FFFFFF;
        --boton-secundario-hover: rgba(242, 238, 230, .1);
        --peligro-hover: #FFC2BD;
        --barra-fondo: #2C2B28;
        --barra-texto: #F2EEE6;
        --barra-aviso: #FFD27A;
        --barra-peligro-fondo: #B3261E;
        --barra-peligro-texto: #FFFFFF;
        --logo-filtro: invert(1);
    }
}

/* Oscuro por elección (botón de arriba a la derecha) */
:root[data-tema="oscuro"] {
    color-scheme: dark;
    --negro: #F2EEE6;
    --fondo: #121212;
    --blanco: #1E1E1D;
    --borde: #3B3935;
    --borde-fuerte: #9B9588;
    --texto-suave: #BEB8AB;
    --acento: #F2EEE6;
    --accion: #F2EEE6;
    --sobre-accion: #121212;
    --resalte: #3A3834;
    --sobre-resalte: #F2EEE6;
    --margen: #FF8A7A;
    --error: #FF9E97;
    --error-fondo: #3A1B1A;
    --exito: #8FDBA3;
    --exito-fondo: #15301F;
    --aviso: #FFD27A;
    --aviso-fondo: #3A2D0B;
    --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .55);
    --boton-hover: #FFFFFF;
    --boton-secundario-hover: rgba(242, 238, 230, .1);
    --peligro-hover: #FFC2BD;
    --barra-fondo: #2C2B28;
    --barra-texto: #F2EEE6;
    --barra-aviso: #FFD27A;
    --barra-peligro-fondo: #B3261E;
    --barra-peligro-texto: #FFFFFF;
    --logo-filtro: invert(1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--fondo); }

/* El logo es negro: en oscuro se invierte (queda crema) */
img[src$="rindiendo-logo.svg"] { filter: var(--logo-filtro); }

::placeholder { color: var(--texto-suave); opacity: 1; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fondo);
    color: var(--negro);
    font-family: var(--fuente);
    font-size: 1rem;
    line-height: 1.5;
}

/* Mientras se verifica la sesión no se muestra la página (evita ver datos y volver a Login de golpe). */
.auth-pendiente body { visibility: hidden; }

/* El atributo hidden tiene que ganarle siempre a cualquier display de las clases. */
[hidden] { display: none !important; }

h1, h2, p { margin: 0; }

a { color: var(--acento); text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

.solo-lectores {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Botón del modo oscuro (js/Tema.js): siempre arriba a la derecha, en todas las pantallas */
.tema-boton {
    position: fixed; top: .5rem; right: .5rem; z-index: 60;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    color: var(--negro); background: var(--blanco);
    border: 2px solid var(--borde-fuerte); border-radius: 999px; box-shadow: var(--sombra); cursor: pointer;
}
.tema-boton:hover { background: var(--fondo); }
.tema-boton svg { display: block; width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}