/*
 * wwwcolas — Tokens del sistema de diseño y reglas base
 *
 * Principio III de la constitución: paleta, tipografía, escala de espaciados y estados se
 * definen AQUÍ, una sola vez. Se PROHÍBEN valores de color o espaciado escritos a mano en
 * vistas individuales. Si hace falta un valor nuevo, se añade a este archivo.
 *
 * Separado de `sistema.css` en la feature 019: la pantalla de la sala solo necesita esto, y
 * cargar en el televisor la hoja entera del panel (tablas, formularios, grid) era superficie que
 * podía romperse en su navegador. La cargan las dos superficies: el panel, antes de
 * `sistema.css`; la pantalla, antes de `pantalla.css`.
 *
 * Por eso esta hoja respeta la BASE MÍNIMA de navegador de la pantalla (research D-02 de la 019)
 * y `PantallaCompatibilidadTest` la vigila: nada de `gap`, `min()`, `clamp()`, grid ni
 * selectores modernos.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
    /*
     * Paleta. Contrastes verificados el 2026-08-26 contra WCAG AA:
     *   - 4.5:1 para texto normal (1.4.3)
     *   - 3:1 para elementos no textuales como el anillo de foco (1.4.11)
     * Los trece pares en uso cumplen su umbral; los ratios están en la tarea T080.
     */
    --color-fondo: #f4f6f8;
    --color-superficie: #ffffff;
    --color-superficie-tenue: #eef1f5;
    --color-borde: #d3dae2;

    --color-texto: #1c2733;          /* 13.6:1 sobre superficie */
    --color-texto-tenue: #566473;    /*  6.2:1 sobre superficie */

    --color-primario: #0b4f8a;       /*  8.1:1 sobre superficie */
    --color-primario-oscuro: #083c69;
    --color-primario-contraste: #ffffff;

    --color-exito: #14663a;
    --color-alerta: #8a5a00;
    --color-error: #9c1f2b;          /*  7.4:1 sobre superficie */
    --color-error-fondo: #fdeced;

    /*
     * Fondos tenues de aviso. Estaban escritos a mano en las reglas, y el de alerta
     * aparecía con dos valores casi idénticos (#fdf6e3 y #fdf3e0) según la regla: un
     * mismo papel con dos tonos que nadie eligió distintos. Se unifican en uno.
     */
    --color-alerta-fondo: #fdf6e3;
    --color-exito-fondo: #eaf6ef;

    /*
     * Los dos fondos de la pantalla pública, para que el marco de "ver pantalla" no
     * parpadee mientras carga.
     *
     * Son los únicos valores que cruzan de pantalla.css a este archivo, y no hay forma
     * de evitarlo sin un paso de compilación: el hueco lo pinta el panel antes de que
     * el iframe exista. Si allí cambia un fondo, aquí hay que cambiarlo también.
     */
    --color-vista-previa-fondo: #0d1b2a;
    --color-vista-previa-fondo-claro: #edeef0;

    /*
     * Foco: 6.38:1 sobre superficie. El umbral aplicable sería 3:1, pero un anillo
     * de foco que apenas se distingue del fondo cumple la norma y no cumple su
     * función, y SC-008 exige recorrer todo el panel solo con teclado.
     */
    --color-foco: #7a5a00;

    /* Tipografía del sistema: sin webfonts remotas. */
    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

    --texto-xs: 0.75rem;
    --texto-sm: 0.875rem;
    --texto-base: 1rem;
    --texto-lg: 1.125rem;
    --texto-xl: 1.5rem;
    --texto-2xl: 2rem;

    /* Escala de espaciados. */
    --esp-1: 0.25rem;
    --esp-2: 0.5rem;
    --esp-3: 0.75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
    --esp-8: 3rem;

    --radio: 6px;
    --sombra: 0 1px 3px rgba(28, 39, 51, 0.12);

    --ancho-panel-lateral: 240px;
}

/* ==========================================================================
   Tema oscuro del panel (FR-004)
   ==========================================================================

   Solo VALORES. Si aquí aparece un display, un padding o un font-size, está mal: la
   disposición es la misma en los dos temas y duplicarla es cómo se acaba con dos
   maquetaciones que divergen.

   Contrastes verificados el 2026-09-01 contra WCAG AA con herramientas/contraste.php.
   Los dieciséis pares de texto en uso cumplen 4,5:1; el anillo de foco cumple 3:1. */
:root[data-tema="oscuro"] {
    --color-fondo: #0e1620;
    --color-superficie: #16202b;
    --color-superficie-tenue: #1e2b39;

    /*
     * El borde sube de tono respecto del tema claro (2,62:1 frente a 1,41:1) porque
     * aquí hace además el trabajo de la sombra: sobre fondo oscuro, una sombra negra
     * no separa nada. Sin este ajuste, las tarjetas se funden con el fondo.
     */
    --color-borde: #4a627f;

    --color-texto: #e8ecf1;          /* 13.9:1 sobre superficie */
    --color-texto-tenue: #a3b0be;    /*  7.5:1 sobre superficie */

    /*
     * El azul se aclara en lugar de oscurecerse: sobre fondo oscuro, el primario del
     * tema claro (#0b4f8a) daría 1,7:1 y sería ilegible. Y --color-primario-oscuro
     * pasa a ser MÁS claro que el primario, porque es el estado de énfasis y sobre
     * oscuro el énfasis va hacia arriba, no hacia abajo. El nombre se queda como está:
     * cambiarlo obligaría a tocar las tres reglas que lo usan sin ganar nada.
     */
    --color-primario: #6fb3e8;       /*  7.3:1 sobre superficie */
    --color-primario-oscuro: #9acbf0;
    --color-primario-contraste: #0e1620;

    --color-exito: #5fc08d;
    --color-alerta: #e0ac4a;
    --color-error: #f08c96;

    /* Fondos de aviso: tintes profundos del mismo tono, no los pasteles del claro. */
    --color-error-fondo: #3a1a1f;
    --color-alerta-fondo: #33270f;
    --color-exito-fondo: #14301f;

    --color-foco: #f2c14e;           /*  9.8:1 sobre superficie */

    /*
     * Sin sombra. No es pereza: una sombra negra sobre fondo oscuro es invisible, así
     * que dejarla puesta solo añadiría trabajo de composición al navegador para no
     * pintar nada. La separación la hace el borde de arriba.
     */
    --sombra: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

/*
 * El fondo va en la raíz y no solo en el cuerpo: el navegador pinta el lienzo antes de
 * conocer el <body>, así que con el tema oscuro activo se vería un destello blanco en
 * cada carga de página.
 */
html {
    background: var(--color-fondo);
}

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: var(--texto-base);
    line-height: 1.5;
    color: var(--color-texto);
    background: var(--color-fondo);
}

h1, h2, h3 {
    margin: 0 0 var(--esp-3);
    line-height: 1.25;
}

h1 { font-size: var(--texto-xl); }
h2 { font-size: var(--texto-lg); }

a {
    color: var(--color-primario);
}

/*
 * Foco visible en TODO elemento interactivo. SC-008 exige que el panel sea operable
 * solo con teclado, y sin foco visible eso es imposible aunque el orden de tabulación
 * sea correcto.
 */
:focus-visible {
    outline: 3px solid var(--color-foco);
    outline-offset: 2px;
}

.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;
}

/* Enlace de salto: primer tabulable de la página. */
.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--esp-2) var(--esp-4);
    background: var(--color-primario);
    color: var(--color-primario-contraste);
}

.salto-contenido:focus {
    left: 0;
}