/*
 * 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;

    /*
     * Estado de las tarjetas de operación (feature 022).
     *
     * El verde y el ámbar de la etiqueta son los MISMOS de la pantalla de la sala, con la
     * misma tinta oscura: el orientador y la sala leen el mismo color para el mismo estado.
     * Blanco sobre ellos no llega ni a 2:1, por eso la tinta es oscura.
     *
     * La franja es la variante oscura del color, porque un verde o un ámbar vivos no se
     * recortan sobre blanco (2,1:1 y 1,8:1). Y la tarjeta lleva un TINTE y no el color lleno:
     * sobre verde o ámbar llenos el azul de los botones no llegaría al umbral.
     */
    --color-estado-curso: #05be50;
    --color-estado-llamado: #ffb000;
    --color-estado-tinta: #101820;       /* 7.2:1 sobre el verde; 9.8:1 sobre el ámbar */
    --color-estado-curso-borde: #00702a; /* 6.3:1 sobre superficie */
    --color-estado-llamado-borde: #6b4f00; /* 7.7:1 sobre superficie */
    --color-estado-curso-fondo: #e6f7ec; /* texto 13.6:1, tenue 5.5:1, botones 7.6:1 */
    --color-estado-llamado-fondo: #fff4d6; /* texto 13.8:1, tenue 5.5:1, botones 7.7:1 */

    /*
     * Un color por vehículo compartido (feature 025, petición del 2026-09-30).
     *
     * Seis tonos claros, todos con la tinta oscura de las tarjetas encima (≥ 8:1), y ninguno
     * verde ni ámbar: esos dos ya dicen "en curso" y "llamado", y un auto no puede parecer un
     * estado. El RELLENO (placa y marca) vale igual en el tema oscuro —relleno claro con tinta
     * oscura se lee en los dos—. La FRANJA no: un tono claro sobre blanco no llega a 2:1 y no
     * se ve, así que en el claro la franja es la variante oscura del mismo tono (≥ 4,6:1 sobre
     * superficie, fondo y tinte de "en curso"); en el oscuro, el propio tono claro.
     * Con más de seis vehículos repetidos los colores se repiten; el texto "Comparte vehículo
     * con…" es lo que no se confunde. Ratios medidos con `Contraste` el 2026-09-30.
     */
    --color-vehiculo-tinta: #101820;
    --color-vehiculo-1: #8cc8ff;   /* azul      10.1:1 con la tinta */
    --color-vehiculo-2: #ffa8d9;   /* rosa      10.1:1 */
    --color-vehiculo-3: #c9a7f5;   /* violeta    8.8:1 */
    --color-vehiculo-4: #7fdfd4;   /* turquesa  11.4:1 */
    --color-vehiculo-5: #ff9f9f;   /* salmón     9.1:1 */
    --color-vehiculo-6: #d8c3a5;   /* arena     10.5:1 */
    --color-vehiculo-1-franja: #1f6fb8; /* 5.2:1 sobre superficie */
    --color-vehiculo-2-franja: #b8327d; /* 5.5:1 */
    --color-vehiculo-3-franja: #7443b8; /* 6.5:1 */
    --color-vehiculo-4-franja: #0d7a6f; /* 5.2:1 */
    --color-vehiculo-5-franja: #b3473a; /* 5.4:1 */
    --color-vehiculo-6-franja: #86662f; /* 5.3:1 */

    /*
     * 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 */

    /*
     * Estado de las tarjetas (feature 022). Relleno y tinta, iguales que en el claro. Aquí la
     * franja SÍ puede ser el color vivo —sobre la superficie oscura se recorta solo— y el
     * tinte es un fondo profundo del mismo tono, como los de aviso.
     */
    --color-estado-curso: #05be50;
    --color-estado-llamado: #ffb000;
    --color-estado-tinta: #101820;
    --color-estado-curso-borde: #05be50; /* 6.7:1 sobre superficie */
    --color-estado-llamado-borde: #ffb000; /* 9.0:1 sobre superficie */
    --color-estado-curso-fondo: #16301f; /* texto 12.0:1, tenue 6.4:1, botones 6.3:1 */
    --color-estado-llamado-fondo: #33270f; /* texto 12.3:1, tenue 6.6:1, botones 6.5:1 */

    /* Franja de vehículo (feature 025): sobre fondo oscuro el tono claro ya se recorta (≥ 8:1). */
    --color-vehiculo-1-franja: #8cc8ff;
    --color-vehiculo-2-franja: #ffa8d9;
    --color-vehiculo-3-franja: #c9a7f5;
    --color-vehiculo-4-franja: #7fdfd4;
    --color-vehiculo-5-franja: #ff9f9f;
    --color-vehiculo-6-franja: #d8c3a5;

    /*
     * 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: #f4f6f8;
    background: var(--color-fondo);
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--fuente);
    font-size: 1rem;
    font-size: var(--texto-base);
    line-height: 1.5;
    color: #1c2733;
    color: var(--color-texto);
    background: #f4f6f8;
    background: var(--color-fondo);
}

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

h1 {
    font-size: 1.5rem;
    font-size: var(--texto-xl);
}

h2 {
    font-size: 1.125rem;
    font-size: var(--texto-lg);
}

a {
    color: #0b4f8a;
    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 #7a5a00;
    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: 0.5rem 1rem;
    padding: var(--esp-2) var(--esp-4);
    background: #0b4f8a;
    background: var(--color-primario);
    color: #ffffff;
    color: var(--color-primario-contraste);
}

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


/* ==========================================================================
   Tema oscuro para el navegador del televisor (feature 019)
   ==========================================================================

   El televisor de la sala (WebKit r152340, Tizen 2.4) no conoce var(), así que
   redefinir las variables bajo [data-tema="oscuro"] no le cambia ni un color.
   Cada regla necesita aquí su equivalente con valores literales.

   Lo genera y lo vigila PantallaCompatibilidadTest: si cambia un token del tema
   oscuro, el test falla y dice qué literal debería haber aquí. No editar a mano
   sin pasar el test.
   ========================================================================== */
/* === RESPALDO DEL TEMA OSCURO (generado) === */

:root[data-tema="oscuro"] {
    background: #0e1620;
}

:root[data-tema="oscuro"] body {
    color: #e8ecf1;
    background: #0e1620;
}

:root[data-tema="oscuro"] a {
    color: #6fb3e8;
}

:root[data-tema="oscuro"] :focus-visible {
    outline: 3px solid #f2c14e;
}

:root[data-tema="oscuro"] .salto-contenido {
    background: #6fb3e8;
    color: #0e1620;
}