/*
 * Pantalla pública de colas — armazón.
 *
 * El contenido de las columnas lo aporta la feature 001; este archivo fija la
 * estructura que la constitución impone y que no es negociable:
 *
 *   - Las dos colas SIEMPRE visibles a la vez, en dos columnas de igual jerarquía.
 *   - Divisor visible entre ellas.
 *   - Rótulo permanente en cada una.
 *   - Ninguna columna se expande sobre la otra cuando la otra está vacía.
 *   - En anchos donde dejen de ser legibles, degrada a apilado vertical
 *     conservando orden y rótulos. Se PROHÍBE ocultar una cola o usar pestañas.
 *
 * BASE MÍNIMA DE NAVEGADOR (feature 019): esta hoja la dibuja el navegador integrado del
 * televisor de la sala, que va años por detrás de uno de escritorio. Se escribe para el
 * WebKit r152340 de Tizen 2.4 / SSSP 4.0 —la plataforma del Samsung PM43F de la sala, y un
 * motor de 2013—: sin `gap` en flex, sin `min()`/`max()`/`clamp()`, sin grid ni selectores
 * modernos, sin `var()` (de ahí el valor literal delante de cada uno) y sin `display: flex`
 * a secas, que obliga a poner `-webkit-box` y `-webkit-flex` delante de cada propiedad de
 * flex. `PantallaCompatibilidadTest` lo vigila todo.
 *
 * En una computadora el fallo no se ve nunca; en la sala, lo descuadra todo. La primera
 * lectura del televisor culpó a `gap` de lo que en realidad era la falta de flex entero:
 * antes de tocar esta hoja por un descuadre, conviene la foto de `sonda.php`.
 *
 * Destino: televisión de 43" a 1920x1080, legible entre 4 y 10 metros. Los tamaños
 * van en unidades de viewport para que escalen con la resolución real del display.
 */

/*
 * El desplazamiento se corta también en la raíz, y no solo en el cuerpo.
 *
 * El navegador propaga al lienzo el overflow del elemento raíz, y solo mira el del
 * cuerpo cuando el de la raíz vale visible. Dejarlo únicamente en el cuerpo funciona
 * casi siempre, pero depende de esa regla de propagación; declararlo en los dos no
 * depende de nada.
 *
 * height: 100% en lugar de 100vh evita además el enredo clásico: si por lo que sea
 * apareciera una barra horizontal, se come alto del lienzo, y un cuerpo de 100vh pasaría
 * a ser más alto que el hueco restante y sacaría la vertical por arrastre.
 */
html {
    height: 100%;
    overflow: hidden;

    /*
     * El fondo va TAMBIÉN aquí y no solo en el cuerpo. El navegador pinta el lienzo
     * antes de conocer el <body>, así que con el fondo declarado solo abajo el televisor
     * enseña un destello blanco en cada arranque, y en una sala a oscuras eso se ve.
     */
    background: #edeef0;
    background: var(--pantalla-fondo);
}

/* ==========================================================================
   Paleta de la pantalla pública
   ==========================================================================

   Va en :root y no en .pantalla porque el navegador pinta el lienzo antes de conocer
   el cuerpo del documento: con el fondo declarado solo en <body>, la televisión enseña
   un destello blanco en cada arranque, y en una sala a oscuras eso se ve.

   El Principio III prohíbe colores escritos a mano en las reglas de una vista. Todo lo
   que se pinta más abajo sale de aquí; si hace falta un tono nuevo, se añade a esta
   lista y no a la regla que lo necesita.

   Alto contraste: la sala puede tener luz ambiente fuerte. */
:root {
    /*
     * Tema CLARO. El fondo es un gris claro neutro y no blanco puro: en una sala con luz
     * fuerte, un televisor de 43" en blanco puro deslumbra desde el fondo de la sala.
     *
     * Contrastes verificados el 2026-09-01 contra WCAG AA con herramientas/contraste.php.
     * Los diecisiete pares en uso cumplen su umbral.
     */
    --pantalla-fondo: #edeef0;
    --pantalla-texto: #101820;       /* 15.4:1 sobre el fondo */
    --pantalla-tenue: #4a5561;       /*  6.6:1 sobre el fondo */

    /*
     * El divisor entre columnas necesitó ajuste: el gris que parecía natural (#8e99a4)
     * daba 2,50:1 y no llega al 3:1 que WCAG 1.4.11 exige a los elementos no textuales.
     */
    --pantalla-divisor: #6e7a87;     /*  3.8:1 sobre el fondo */

    /* Fila de turno en reposo. */
    --turno-fondo: #ffffff;
    --turno-borde: transparent;

    /*
     * Llamado ("ACERCARSE"): ÁMBAR DE SEMÁFORO con tinta oscura. Feature 022.
     *
     * Hasta entonces era un marrón #8a3a00 con letra blanca, y la sala no lo leía como
     * "te toca": el color que todo el mundo asocia con eso es el ámbar del semáforo. Es el
     * MISMO ámbar en los dos temas, igual que el verde de "en curso": es un color de
     * identidad, y el orientador lo ve igual en sus tarjetas.
     *
     * La tinta es oscura por lo mismo que en el verde: blanco sobre este ámbar da 1,83:1.
     * Superficie llena y no un borde fino, porque a diez metros un borde desaparece.
     */
    --turno-destacado-fondo: #ffb000;
    --turno-destacado-texto: #101820;   /* 9.8:1 sobre el ámbar */
    --turno-destacado-tenue: #3d2e00;   /* 7.2:1 sobre el ámbar */

    /*
     * Contorno de la fila llamada, SOLO en el tema claro. El ámbar sobre el gris claro da
     * 1,58:1 y no llega al 3:1 de un elemento no textual; es el mismo caso que el verde de
     * --turno-en-curso-contorno, y la misma solución.
     */
    --turno-destacado-contorno: #6b4f00; /* 6.6:1 sobre el fondo claro */

    /*
     * En curso: VERDE VIVO #05be50 con tinta oscura. Decisión del 2026-09-02.
     *
     * Mismo tratamiento que el llamado —superficie de color llena, no un tinte— para que
     * se note igual desde el fondo de la sala. A diez metros un borde de pocos píxeles
     * desaparece; una superficie de color, no.
     *
     * POR QUÉ LA TINTA ES OSCURA Y NO BLANCA. Se pidieron las dos cosas, verde vivo y
     * letra blanca, y no caben juntas: sobre este verde el blanco da 2,47:1, que no llega
     * ni al 3:1 de la excepción de texto grande. Con tinta oscura son 7,23:1. El verde de
     * marca de Interbank (#009b3a) sí aguanta blanco a duras penas bajándolo a #008730
     * (4,66:1), pero ese verde ya no se notaba, que era el problema de partida. Entre
     * conservar el blanco y que la fila se lea desde el fondo de la sala, gana leerla.
     *
     * El verde y la tinta son los MISMOS en los dos temas: es un color de identidad, no
     * un tono del tema. Lo único que cambia por tema es el contorno de abajo.
     *
     * Sobre él NO cabe un tono tenue para el nombre: cualquier tono más claro que la
     * tinta se acerca al verde y pierde el umbral. Así que el nombre comparte la tinta
     * del correlativo y la jerarquía la sostienen el tamaño y el grosor, que es lo que de
     * verdad la separaba a diez metros.
     */
    --turno-en-curso-fondo: #05be50;
    --turno-en-curso-texto: #101820;    /* 7.2:1 sobre el verde */

    /*
     * Contorno de la fila en curso, SOLO en el tema claro.
     *
     * Un verde vivo sobre un gris claro se lava: #05be50 contra este fondo da 2,13:1 y
     * no llega al 3:1 que WCAG 1.4.11 pide a un elemento no textual. Sin contorno, la
     * fila que más tiene que verse sería la que peor se recorta contra el fondo. El
     * contorno lo lleva a 5,40:1.
     *
     * Va como box-shadow y no como border por lo mismo que la separación entre filas:
     * un borde sumaría alto a cada fila y empujaría los últimos turnos fuera del área
     * visible, y aquí no hay barra de desplazamiento que avise.
     */
    --turno-en-curso-contorno: #00702a;  /* 5.4:1 sobre el fondo claro */

    /*
     * Siguiente sugerido (FR-013): sugiere, no ordena. Solo pinta el borde de la fila,
     * que es un elemento no textual y le basta con 3:1.
     *
     * El valor viene de cuando este token pintaba además la palabra "SIGUIENTE" y tenía
     * que llegar a 4,5:1. Esa etiqueta se retiró el 2026-09-01, pero el tono se conserva:
     * cumple de sobra el umbral que ahora le aplica y aclararlo sería mover un color sin
     * ninguna razón.
     */
    --turno-sugerido-marca: #5f6b79;    /* 4.7:1 sobre el fondo; le bastaría 3:1 */

    /* FR-025: el aviso de que lo mostrado dejó de estar confirmado. */
    --pantalla-aviso: #8a3a00;

    /*
     * Separación entre filas. En el tema oscuro no hace falta —la fila es más clara que
     * el fondo y se distingue sola—, pero en el claro la fila blanca solo se separa
     * 1,16:1 del gris del fondo, y a diez metros las filas se funden en una mancha.
     */
    --turno-separacion: #d6d9de;
}

/*
 * Tema OSCURO: es el aspecto que la pantalla ha tenido siempre y sigue siendo su
 * predeterminado, así que instalar los temas no cambia lo que ve la sala.
 *
 * Solo VALORES. Si aquí aparece un tamaño o un espaciado, está mal: las dos columnas,
 * el divisor y los rótulos son los mismos en los dos temas (FR-012), y duplicar la
 * maquetación es cómo se acaba con dos que divergen.
 */
:root[data-tema="oscuro"] {
    --pantalla-fondo: #0d1b2a;
    --pantalla-texto: #f5f7fa;
    --pantalla-tenue: #9fb3c8;
    --pantalla-divisor: #35506b;

    --turno-fondo: #142c44;
    --turno-borde: transparent;

    /* El mismo ámbar y la misma tinta que en el tema claro (feature 022). */
    --turno-destacado-fondo: #ffb000;
    --turno-destacado-texto: #101820;
    --turno-destacado-tenue: #3d2e00;

    /* Aquí sobra: el ámbar sobre el fondo oscuro ya da 9,49:1. */
    --turno-destacado-contorno: transparent;

    /* El mismo verde vivo y la misma tinta que en el tema claro. */
    --turno-en-curso-fondo: #05be50;
    --turno-en-curso-texto: #101820;    /* 7.2:1 sobre el verde */

    /*
     * Aquí el contorno sobra: sobre el fondo oscuro el verde ya da 7,03:1 y la fila se
     * recorta sola. Es la misma razón por la que --turno-separacion es transparente en
     * este tema.
     */
    --turno-en-curso-contorno: transparent;

    --turno-sugerido-marca: #9fb3c8;

    --pantalla-aviso: #ffd166;

    /* Sobre fondo oscuro la fila ya se separa sola: aquí el anillo sobraría. */
    --turno-separacion: transparent;
}


/*
 * Las tres escrituras de flex, y siempre en este orden (feature 019).
 *
 * El WebKit r152340 del televisor (Tizen 2.4 / SSSP 4.0, la plataforma del PM43F de la sala)
 * NO conoce `display: flex` a secas: descarta la declaración entera y el contenedor se queda
 * en `block`. Eso es lo que se vio en la sala —las dos columnas apiladas una encima de otra y
 * la cabecera en tres renglones—, y no tiene nada que ver con `gap`: ahí no había flex ninguno.
 *
 * `-webkit-box` primero (sintaxis de 2009), `-webkit-flex` después (la de 2012, que es la que
 * ese WebKit sí entiende) y la estándar al final. Cada navegador se queda con la última que
 * reconoce, así que el moderno usa la estándar y el televisor la prefijada, sin duplicar hoja.
 *
 * Por eso cada `flex-direction` lleva su `-webkit-box-orient`, cada `align-items` su
 * `-webkit-box-align` y cada `flex:` su `-webkit-box-flex`: son propiedades distintas, no
 * alias, y la sintaxis vieja no las hereda de la nueva.
 */
.pantalla {
    margin: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: #edeef0;
    background: var(--pantalla-fondo);
    color: #101820;
    color: var(--pantalla-texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--fuente);

    /*
     * Alto EXACTO, no mínimo, y sin desplazamiento.
     *
     * Con min-height, cualquier cosa que sobrepase la altura estira el documento y saca
     * barras. En un televisor de señalización eso es lo peor que puede pasar: no hay
     * ratón ni teclado en la sala, así que lo que caiga por debajo del borde no lo va a
     * ver nadie nunca, y encima la barra tapa parte de la cola.
     *
     * Con height fijo y overflow oculto, el hueco es siempre el de la pantalla y son las
     * columnas las que recortan por dentro (.cola__cuerpo ya lo hace). Vale también para
     * el marco de /panel/pantalla.php, que mide 720 px de alto exactos.
     */
    height: 100%;
    overflow: hidden;
}

.pantalla__cabecera {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 1.5vh 2vw;
    border-bottom: 1px solid #6e7a87;
    border-bottom: 1px solid var(--pantalla-divisor);
}

/*
 * Separación entre identidad, chip y reloj: un margen en cada hermano y no `gap`, que el
 * navegador del televisor no aplica en flex (feature 019, research D-02). El `margin-left: auto`
 * del chip se declara más abajo y gana a esta regla: es el que empuja chip y reloj a la derecha.
 */
.pantalla__cabecera > * + * {
    margin-left: 1.5vw;
}

/*
 * Identidad a un extremo y reloj al otro, sin que la cabecera crezca en alto: lo que
 * gane de alto se lo quita a las dos colas, y esas no pueden encoger (feature 007,
 * FR-005).
 */
.pantalla__identidad {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    /*
     * Que OCUPE el hueco libre, no solo que pueda cederlo (2026-09-29).
     *
     * Sin `flex` explícito, el WebKit del televisor tomaba la identidad como encogible desde su
     * base y, con `min-width: 0`, la recortaba aunque sobrara sitio: en la sala salía
     * "DRTYC Ta…" mientras en un navegador moderno se veía entero. Con `1 1 auto` crece hasta
     * llenar lo que dejan chip y reloj, y solo encoge si de verdad no cabe. Los tres
     * prefijos, como toda propiedad flex de esta hoja (ver `.pantalla`).
     */
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    /* Sin esto, un elemento flex no baja de su contenido y el nombre largo empujaría
       al reloj fuera de la pantalla en lugar de recortarse. */
    min-width: 0;
}

.pantalla__logo {
    max-height: 6vh;
    width: auto;
    /* La separación del nombre de la entidad, que antes daba `gap` (feature 019). */
    margin-right: 1.5vw;
}

.pantalla__entidad {
    margin: 0;
    font-size: 3vh;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* El que cede espacio es el nombre, nunca el reloj: el reloj mide siempre 22
       caracteres y el nombre lo pone quien configura la entidad (FR-006). */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * El reloj de la sala (feature 007).
 *
 * Va al fondo a la derecha, con su fecha, y a su izquierda el chip del turno (feature 018).
 * El `margin-left: auto` que lo pegaba al borde lo lleva ahora el chip, que empuja a los dos.
 *
 * Cuerpo menor que el del nombre de la entidad a propósito: se tiene que leer a diez
 * metros, pero no puede competir con los correlativos, que son lo que la sala busca
 * (FR-004). Color `--pantalla-texto` —15.4:1 sobre el fondo claro— y no el tono tenue:
 * bajarle el contraste no compra nada en una pantalla de señalización (SC-006).
 *
 * `tabular-nums` y `nowrap` sostienen SC-008 junto con los ceros de FR-003: la cadena
 * mide siempre lo mismo y no se parte en dos líneas.
 */
.pantalla__reloj {
    font-size: 2.2vh;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #101820;
    color: var(--pantalla-texto);   /* 15.4:1 sobre el fondo claro; SC-006 pide 4.5:1 */
    font-variant-numeric: tabular-nums;
}

/*
 * El turno que se está atendiendo, a la IZQUIERDA del reloj (feature 018, FR-001-bis).
 *
 * Es él, y no el reloj, quien lleva `margin-left: auto`: así empuja a los dos al extremo
 * derecho, el reloj queda al fondo con su fecha y los dos siguen pegados al borde aunque la
 * identidad no ocupe nada. La separación entre chip y reloj es el `gap` de la cabecera.
 *
 * `flex: 0 0 auto` y `nowrap`: no cede ancho ni se parte. Si la cabecera aprieta, el que cede
 * es el nombre de la entidad, que ya se recorta con puntos suspensivos (feature 007). Un
 * turno recortado sería peor que uno ausente: diría una hora a medias.
 *
 * Cuerpo MAYOR que el del reloj (2,4 vh frente a 2,2 vh), porque es lo que la sala busca al
 * entrar; y menor que el nombre de la entidad (3 vh), que es el que fija el alto de la
 * cabecera. Así la cabecera no crece, y lo que no crece no se lo quita a las columnas.
 */
.chip-turno {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding: 0.2vh 0.8vw;
    border: 0.2vh solid currentColor;
    border-radius: 0.5vh;
    font-size: 2.4vh;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #101820;
    color: var(--pantalla-texto);
}

/*
 * Sin turno en curso: el mismo tamaño y el mismo sitio, en tono tenue y con el borde punteado.
 *
 * No desaparece: un hueco en la parte más visible de la pantalla se lee como una avería (FR-006).
 */
.chip-turno--sin {
    color: #4a5561;
    color: var(--pantalla-tenue);
    border-style: dashed;
    font-weight: 400;
}

/*
 * La pantalla no puede confirmar que sus datos están al día (FR-009 de la 018).
 *
 * El chip se atenúa A LA VEZ que aparece el aviso existente: un turno que podría estar viejo,
 * escrito en grande en la cabecera, es exactamente lo que nadie pondría en duda. Lo decide
 * `marcarSinConfirmar()`, el único criterio de "desactualizado" que hay.
 */
.chip-turno--sin-confirmar {
    opacity: 0.4;
}

/*
 * Dos columnas de ancho FIJO al 50 %. No se usa flex-grow: si una columna pudiera
 * crecer, la vacía se encogería y la otra se expandiría sobre su espacio, que es
 * precisamente lo que FR-018 prohíbe. La referencia visual del público se rompe si
 * la columna cambia de sitio según cuánta gente haya.
 */
.pantalla__colas {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    min-height: 0;
}

/*
 * calc(50% - 1px), no 50%.
 *
 * El divisor mide 2 px y también ocupa. Con las dos columnas al 50 % la fila sumaba
 * 100 % + 2 px, y como llevan flex-shrink: 0 no podían encoger para compensar: la
 * pantalla desbordaba dos píxeles a la derecha. Eso sacaba barra horizontal, la barra
 * se comía alto, y entonces el cuerpo de 100vh ya no cabía y salía también la vertical.
 *
 * Cada columna cede 1 px, que es la mitad del divisor. Siguen siendo iguales entre sí,
 * que es lo que FR-018 exige.
 */
.cola {
    /*
     * `width` además de `flex`, y no solo por el reparto: la sintaxis de 2009 no tiene
     * base flexible, así que en el televisor el ancho de cada columna lo fija este `width`
     * y `-webkit-box-flex: 0` le impide crecer sobre el hueco de la otra (FR-018).
     */
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 calc(50% - 1px);
    flex: 0 0 calc(50% - 1px);
    width: calc(50% - 1px);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 2vh 2vw;
    min-width: 0;
}

.cola__rotulo {
    margin: 0 0 2vh;
    font-size: 3.5vh;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
}

.cola__cuerpo {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    /* Los primeros turnos deben quedar visibles sin desplazamiento. */
    overflow: hidden;
}

.cola__vacia {
    margin-top: 6vh;
    text-align: center;
    font-size: 2.4vh;
    color: #4a5561;
    color: var(--pantalla-tenue);
}

.pantalla__divisor {
    /* `width` por lo mismo que en `.cola`: sin base flexible, el ancho lo fija esto. */
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 2px;
    flex: 0 0 2px;
    width: 2px;
    background: #6e7a87;
    background: var(--pantalla-divisor);
}

/*
 * El pie no tiene relleno ni borde propios, y es a propósito.
 *
 * Desde que se retiró el mensaje de bienvenida (2026-08-31) solo contiene el aviso de
 * FR-025 y el diagnóstico de FR-028, y los dos nacen ocultos. Si el borde y el relleno
 * vivieran aquí, la televisión mostraría una franja vacía con una línea encima durante
 * toda la jornada. Los lleva cada hijo, así que el pie ocupa cero mientras no haya nada
 * que decir y aparece con su separador en cuanto lo hay.
 */
.pantalla__pie {
    text-align: center;
}

/*
 * Degradación en anchos estrechos: apilado vertical CONSERVANDO orden y rótulos.
 * Nunca ocultando una cola, nunca con pestañas.
 */
@media (max-width: 60rem) {
    .pantalla__colas {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    /*
     * En poco ancho caben el logo y el reloj, pero no los tres. Se retira el NOMBRE, y
     * solo cuando hay logo que siga identificando a la entidad (feature 007, FR-015).
     * Sin logo esta regla no aplica y el nombre se conserva recortado (FR-016): una
     * cabecera con la hora de una entidad sin nombre no dice de quién es la sala.
     */
    .pantalla__cabecera--con-logo .pantalla__entidad {
        display: none;
    }

    .cola {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 50%;
        flex: 1 1 50%;
        width: 100%;
    }

    .pantalla__divisor {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 2px;
        flex: 0 0 2px;
        /* Apilado, el divisor cruza la pantalla: aquí manda el ancho, no los 2 px. */
        width: 100%;
        height: 2px;
    }
}

/* ===========================================================================
 * Turnos dentro de cada columna (feature 001)
 *
 * Destino: 43" a 1920x1080, leído entre 4 y 10 metros (FR-022). A esa distancia el
 * ojo resuelve poco: el correlativo es lo único que la persona busca, así que va en
 * un cuerpo grande y en tabular-nums para que M-07 y M-08 ocupen exactamente lo
 * mismo y la columna no baile al cambiar un dígito.
 *
 * El nombre acompaña, no compite: está para que quien no recuerde su número se
 * reconozca igual. Va más pequeño y en tono tenue a propósito.
 * =========================================================================== */

.turno {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    /*
     * Centrado y no alineado a la línea base (2026-09-29): con `baseline` el nombre, más pequeño,
     * se asentaba al pie del número grande y la fila se veía caída hacia abajo.
     */
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    /* Más ceñida que al principio (1.1vh / 0.9vh): caben más turnos sin desplazar. */
    padding: 0.8vh 1.2vw;
    margin-bottom: 0.6vh;
    border-radius: 0.6vh;
    border-left: 0.5vw solid transparent;
    border-left: 0.5vw solid var(--turno-borde);
    background: #ffffff;
    background: var(--turno-fondo);

    /*
     * Anillo de separación con box-shadow y no con border: un borde en los otros tres
     * lados sumaría 2 px al alto de cada fila y, con veinte turnos, empujaría el último
     * fuera del área visible. El Principio III exige que los primeros turnos se vean sin
     * desplazamiento, y la pantalla recorta por dentro sin barra que avise.
     */
    box-shadow: 0 0 0 1px #d6d9de;
    box-shadow: 0 0 0 1px var(--turno-separacion);
}

/*
 * Número, hora, nombre y etiqueta separados con márgenes y no con `gap` (feature 019, research
 * D-02): en el televisor de la sala `gap` en flex no existe, y salían pegados. El `margin-left:
 * auto` de la etiqueta se declara más abajo y gana a esta regla.
 */
.turno > * + * {
    margin-left: 1.2vw;
}

/*
 * El número del turno, sin el prefijo de examen de manejo (FR-019-bis).
 *
 * El tamaño y el ancho reservado cambiaron juntos el 2026-09-02 (FR-019-ter). Antes esto
 * decía `4.2vh` y `min-width: 5.5em`, dimensionado para que "M-01" y "M-100" no hicieran
 * bailar la columna. Sin prefijo sobraba más de la mitad de ese ancho, y el ancho sobrante
 * en una pantalla que se lee a diez metros es tamaño de letra desaprovechado.
 *
 * `min-width` en `em` y no en `vw`: la unidad tiene que seguir al tamaño de la fuente, que
 * es lo que determina cuánto ocupan tres dígitos. En `vw` el hueco y el número escalarían
 * por separado y volverían a descuadrarse en cuanto cambiara la proporción de la pantalla.
 *
 * `tabular-nums` es lo que impide que la columna se mueva al pasar de 07 a 08: sin él, cada
 * dígito tiene su propio ancho y los nombres bailan a cada actualización.
 */
.turno__correlativo {
    font-size: 6.4vh;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    /* Tres dígitos: una jornada de más de 99 turnos no descoloca la columna. */
    min-width: 2.4em;
    /*
     * Interlineado ceñido a la cifra (2026-09-29). Es lo que más alto le daba a cada fila: con
     * el `normal` del navegador la línea medía ~1.2 veces el número. Así la fila baja aunque el
     * número crezca, y como la fila centra su contenido, el número sigue al medio.
     */
    line-height: 1;
}

/*
 * La hora del turno, junto al número (FR-019-quater).
 *
 * Solo aparece cuando la columna de cierre de nota mezcla jornadas del mismo día: al
 * reiniciar la numeración en cada turno, dos personas distintas pueden llevar el "07".
 *
 * Deliberadamente PEQUEÑA y tenue. El número sigue siendo lo que el postulante busca desde
 * el fondo de la sala, y el ancho que se le ganó al quitar el prefijo (FR-019-ter) no se
 * devuelve a un desempate que la mayoría de los días no hace falta: la hora se lee de
 * cerca, cuando alguien ya vio su número y duda de si es el suyo.
 *
 * flex: 0 0 auto para que no le robe sitio al nombre, que es lo que FR-019-ter protege.
 */
.turno__hora {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: center;
    align-self: center;
    margin-right: 0.8vw;
    font-size: 1.9vh;
    font-weight: 700;
    color: #4a5561;
    color: var(--pantalla-tenue);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sobre las filas de color, el tono tenue del texto normal quedaría ilegible. */
.turno--destacado .turno__hora {
    color: #3d2e00;
    color: var(--turno-destacado-tenue);
}

.turno--en-curso .turno__hora {
    color: #101820;
    color: var(--turno-en-curso-texto);
}

.turno__nombre {
    /* Algo mayor y en seminegrita (2026-09-29): a distancia, el trazo fino se perdía. */
    font-size: 2.9vh;
    font-weight: 600;
    color: #4a5561;
    color: var(--pantalla-tenue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Empuja la etiqueta al extremo derecho de la fila, en columna con las demás. */
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    /* Lo mínimo entre el nombre y la etiqueta, que antes daba `gap` (feature 019): la
       etiqueta lleva `margin-left: auto`, que con un nombre largo se queda en cero. */
    margin-right: 1.2vw;
    /*
     * Sin min-width: 0 el text-overflow no llega a actuar: un elemento flexible no baja
     * de la anchura de su contenido, así que un nombre largo ensancharía la fila hasta
     * salirse de la columna y quedaría cortado a hachazos contra el borde en vez de
     * terminar en puntos suspensivos.
     */
    min-width: 0;
}

/* ===========================================================================
 * Etiqueta de estado
 *
 * El color solo NO alcanza. A 10 metros, con el brillo alto de un televisor de sala
 * y con quien no distingue bien los tonos, un fondo ámbar y uno verdoso se leen
 * igual. La palabra dice lo mismo sin depender de verla, y las dos señales conviven:
 * la etiqueta no sustituye al color, lo respalda.
 *
 * Ancho fijo y alineada a la derecha para que las etiquetas de toda la columna
 * queden una debajo de otra: en una lista, lo que se lee de un vistazo es la columna,
 * no la palabra suelta.
 * ======================================================================== */

.turno__etiqueta {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.35vh 0.9vw;
    border-radius: 0.4vh;
    border: 0.2vh solid currentColor;
    font-size: 1.9vh;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-align: center;
    min-width: 9em;
    /* Por defecto es la marca discreta; cada estado la sube de tono más abajo. */
    color: #4a5561;
    color: var(--pantalla-tenue);
}

/*
 * Llamado: la señal más importante de toda la pantalla. Es el momento en que alguien
 * tiene que levantarse, y si no se distingue desde el fondo de la sala el sistema no
 * sirve para lo que se construyó.
 *
 * Se marca con fondo lleno y no solo con un borde: a diez metros un borde de unos
 * pocos píxeles desaparece, una superficie de color no. En ámbar de semáforo desde la
 * feature 022: es el color que la sala ya lee como "te toca".
 */
.turno--destacado {
    background: #ffb000;
    background: var(--turno-destacado-fondo);
    color: #101820;
    color: var(--turno-destacado-texto);
    border-left-color: #ffb000;
    border-left-color: var(--turno-destacado-fondo);

    /*
     * Sustituye al anillo de separación normal, como en la fila en curso: sobre el gris
     * claro el ámbar se lava y necesita recortarse; en el tema oscuro la variable es
     * transparente y desaparece.
     */
    box-shadow: 0 0 0 0.3vh #6b4f00;
    box-shadow: 0 0 0 0.3vh var(--turno-destacado-contorno);
}

.turno--destacado .turno__nombre {
    /* Sobre el ámbar del llamado, el tono tenue de una fila normal no llegaría al umbral. */
    color: #3d2e00;
    color: var(--turno-destacado-tenue);
}

/*
 * "ACERCARSE" sobre el ámbar del llamado. Se invierte —ámbar sobre la tinta oscura—
 * porque un borde del mismo tono que el fondo desaparecería justo en la fila que más
 * tiene que verse.
 */
.turno--destacado .turno__etiqueta {
    background: #101820;
    background: var(--turno-destacado-texto);
    border-color: #101820;
    border-color: var(--turno-destacado-texto);
    color: #ffb000;
    color: var(--turno-destacado-fondo);
}

/*
 * En curso: ya está rindiendo o ya está en el módulo de registro.
 *
 * Mismo tratamiento que el llamado —superficie llena y borde izquierdo del mismo tono,
 * para que la fila se lea como un solo bloque— y se distingue de él por el color y por
 * la palabra, que es lo que FR-022 exige: el color nunca va solo.
 *
 * Las dos superficies no compiten porque no pueden coincidir en una misma fila:
 * `RepositorioTurnos::aplicarMovimiento()` apaga las dos marcas de llamado al cambiar de
 * estado, así que un turno en curso no puede además estar destacado.
 */
.turno--en-curso {
    background: #05be50;
    background: var(--turno-en-curso-fondo);
    color: #101820;
    color: var(--turno-en-curso-texto);
    border-left-color: #05be50;
    border-left-color: var(--turno-en-curso-fondo);

    /*
     * Sustituye al anillo de separación normal: sobre fondo claro este verde se lava y
     * necesita recortarse, y en el tema oscuro la variable es transparente y desaparece.
     */
    box-shadow: 0 0 0 0.3vh #00702a;
    box-shadow: 0 0 0 0.3vh var(--turno-en-curso-contorno);
}

/*
 * El nombre pierde aquí su tono tenue, y es a propósito: sobre este verde no hay ningún
 * tono más suave que llegue a 4,5:1. Lo separa del correlativo el tamaño, que es lo que
 * lo separaba de verdad a diez metros.
 */
.turno--en-curso .turno__nombre {
    color: #101820;
    color: var(--turno-en-curso-texto);
}

/*
 * "EN CURSO" invertida, igual que "ACERCARSE" sobre el ámbar: sobre una superficie llena,
 * una etiqueta con borde del mismo tono que el fondo desaparece justo en la fila que se
 * quiere destacar.
 */
.turno--en-curso .turno__etiqueta {
    background: #101820;
    background: var(--turno-en-curso-texto);
    border-color: #101820;
    border-color: var(--turno-en-curso-texto);
    color: #05be50;
    color: var(--turno-en-curso-fondo);
}

/*
 * Siguiente sugerido (FR-013). Marca discreta: sugiere, no ordena, y la pantalla y el
 * panel tienen que coincidir en cuál es. Si gritara tanto como el llamado, la sala
 * entendería que a esa persona ya le toca levantarse, y no es así.
 */
.turno--sugerido {
    border-left-color: #5f6b79;
    border-left-color: var(--turno-sugerido-marca);
}

/*
 * FR-025: lo que se ve dejó de estar confirmado.
 *
 * En el pie y no encima de las colas: el objetivo es avisar sin tapar el último
 * estado conocido, que sigue siendo la mejor información disponible.
 */
.pantalla__sin-confirmar {
    margin: 0;
    padding: 1.5vh 2vw;
    border-top: 1px solid #6e7a87;
    border-top: 1px solid var(--pantalla-divisor);
    font-size: 2vh;
    font-weight: 600;
    color: #8a3a00;
    color: var(--pantalla-aviso);
}

/* FR-028: solo visible con ?diagnostico=1. Deliberadamente discreto. */
.pantalla__diagnostico {
    margin: 0;
    padding: 1vh 2vw;
    border-top: 1px solid #6e7a87;
    border-top: 1px solid var(--pantalla-divisor);
    font-size: 1.6vh;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: #4a5561;
    color: var(--pantalla-tenue);
}

/* ---------------------------------------------------------------------------
 * El modal del llamado (feature 008)
 *
 * Se superpone a las dos columnas unos segundos y se retira solo. Es la única
 * concesión registrada frente al Principio III, que exige que las dos colas estén
 * siempre visibles, y por eso está acotada por escrito:
 *
 *   - Es TRANSITORIO. Nadie lo cierra y no hay estado en el que se quede puesto:
 *     `anuncio.js` lo retira con un techo de duración aunque la voz nunca informe
 *     de que terminó (FR-017).
 *   - NO cubre los rótulos permanentes de las dos columnas (FR-020). Empieza por
 *     debajo de ellos y termina por encima del pie. Quien mire la pantalla con el
 *     modal puesto sigue viendo que hay dos colas y cómo se llaman.
 *   - Las colas se siguen actualizando por debajo (FR-019): el modal no toca el
 *     DOM de las columnas, solo se dibuja encima.
 *
 * Lo que el Principio III prohíbe es un DISEÑO de pantalla que relegue una cola de
 * forma permanente. Un aviso acotado que se retira solo no lo es.
 * ------------------------------------------------------------------------- */
/*
 * Esta regla NO es redundante y quitarla deja la tarjeta puesta para siempre.
 *
 * El navegador oculta `[hidden]` con `display: none`, pero eso vive en su hoja de
 * estilos, y CUALQUIER regla de autor le gana: el `display: flex` de aquí abajo la
 * anula, así que el elemento se queda visible con el atributo puesto. `anuncio.js`
 * seguiría alternando `hidden` correctamente y no se notaría nada raro en el código
 * JavaScript, que es lo que hace que este fallo cueste tanto de encontrar.
 *
 * Pasó: el modal se mostraba desde que cargaba la página y no se iba nunca.
 */
.llamado[hidden] {
    display: none;
}

.llamado {
    /*
     * Desde 28vh: por encima quedan la cabecera y los dos rótulos de columna
     * (`.cola__rotulo` mide 3.5vh y lleva 2vh de margen), así que la sala nunca
     * pierde de vista que hay dos colas ni cómo se llaman.
     *
     * Hasta 16vh del borde inferior: deja a la vista el pie con el aviso de
     * "sin confirmar", que no puede quedar tapado justo cuando algo va mal.
     */
    position: fixed;
    top: 28vh;
    bottom: 16vh;
    left: 0;
    right: 0;

    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    /* Sin fondo propio: el resto de la pantalla no se oscurece. Atenuar las colas
       para anunciar a una persona es exactamente lo que FR-020 no quiere. */
    pointer-events: none;
}

.llamado__tarjeta {
    /*
     * Los mismos colores que la fila destacada de la columna, y no unos nuevos.
     *
     * Es el mismo mensaje —"acércate"— y la sala ya aprendió a leer ese color en las
     * filas. Además su contraste ya está verificado (7.8:1 y 6.6:1) y lo cubre
     * ContrasteTest: inventar aquí una pareja de colores obligaría a verificarla
     * aparte, y el Principio III prohíbe los valores escritos a mano en las vistas.
     */
    background: #ffb000;
    background: var(--turno-destacado-fondo);
    color: #101820;
    color: var(--turno-destacado-texto);

    /* `min()` no existe en el navegador del televisor (feature 019): el mismo tope, en dos líneas. */
    width: 80vw;
    max-width: 120vh;
    padding: 3vh 4vw;
    border-radius: 1.5vh;
    text-align: center;

    /* La sombra lo despega de las columnas sin necesidad de atenuarlas. */
    box-shadow: 0 1vh 4vh rgb(0 0 0 / 45%);
}

.llamado__correlativo {
    margin: 0;
    font-size: 12vh;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

/*
 * Un anuncio masivo no tiene número de turno (feature 010): se dirige a toda la cola,
 * así que no hay correlativo que mostrar. Sin esto, el elemento vacío sigue ocupando
 * doce unidades de alto y la tarjeta queda descuadrada, con el nombre desplazado hacia
 * abajo y fuera del centro.
 *
 * Se resuelve con `:empty` y no ocultándolo desde JavaScript porque `anuncio.js` no
 * distingue un anuncio masivo de uno individual —a propósito: para la sala son lo
 * mismo— y enseñarle a distinguirlos solo para esto le añadiría un caso especial que
 * no necesita.
 */
.llamado__correlativo:empty {
    display: none;
}

.llamado__nombre {
    margin: 1vh 0 0;
    font-size: 6vh;
    font-weight: 700;
    line-height: 1.1;
}

.llamado__destino {
    margin: 2vh 0 0;
    font-size: 3.2vh;
    color: #3d2e00;
    color: var(--turno-destacado-tenue);
}

.llamado__cola {
    font-weight: 700;
    letter-spacing: 0.06em;
}

/*
 * En apilado vertical las dos columnas ocupan el alto entero, así que el hueco de
 * 28vh de arriba deja de proteger al rótulo de la segunda. Se estrecha el modal y se
 * centra sobre el eje, que es lo máximo que se puede conservar sin ocultar una cola.
 */
@media (max-width: 60rem) {
    .llamado {
        top: 22vh;
        bottom: 22vh;
    }

    .llamado__correlativo {
        font-size: 9vh;
    }

    .llamado__nombre {
        font-size: 4.5vh;
    }
}


/* ==========================================================================
   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: #0d1b2a;
}

:root[data-tema="oscuro"] .pantalla {
    background: #0d1b2a;
    color: #f5f7fa;
}

:root[data-tema="oscuro"] .pantalla__cabecera {
    border-bottom: 1px solid #35506b;
}

:root[data-tema="oscuro"] .pantalla__reloj {
    color: #f5f7fa;
}

:root[data-tema="oscuro"] .chip-turno {
    color: #f5f7fa;
}

:root[data-tema="oscuro"] .chip-turno--sin {
    color: #9fb3c8;
}

:root[data-tema="oscuro"] .cola__vacia {
    color: #9fb3c8;
}

:root[data-tema="oscuro"] .pantalla__divisor {
    background: #35506b;
}

:root[data-tema="oscuro"] .turno {
    background: #142c44;
    box-shadow: 0 0 0 1px transparent;
}

:root[data-tema="oscuro"] .turno__hora {
    color: #9fb3c8;
}

:root[data-tema="oscuro"] .turno--destacado .turno__hora {
    color: #3d2e00;
}

:root[data-tema="oscuro"] .turno__nombre {
    color: #9fb3c8;
}

:root[data-tema="oscuro"] .turno__etiqueta {
    color: #9fb3c8;
}

:root[data-tema="oscuro"] .turno--destacado {
    background: #ffb000;
    color: #101820;
    border-left-color: #ffb000;
    box-shadow: 0 0 0 0.3vh transparent;
}

:root[data-tema="oscuro"] .turno--destacado .turno__nombre {
    color: #3d2e00;
}

:root[data-tema="oscuro"] .turno--destacado .turno__etiqueta {
    background: #101820;
    border-color: #101820;
    color: #ffb000;
}

/*
 * El verde va REPETIDO aquí aunque sea el mismo color en los dos temas, y no sobra.
 *
 * `:root[data-tema="oscuro"] .turno` vale (0,3,0) de especificidad y `.turno--en-curso`
 * solo (0,1,0). En tema oscuro la primera gana, y gana además por orden, porque este
 * bloque va al final de la hoja: la fila en curso se pintaba #142c44, el fondo de una
 * fila cualquiera. El verde no es que se notara poco — no llegaba a dibujarse.
 *
 * `.turno--destacado` no tenía el problema porque sus valores del tema oscuro difieren
 * de los del claro y por eso ya tenía sus reglas aquí. El de en curso es el MISMO verde
 * en los dos temas, así que nadie escribió la regla y la especificidad se lo comió. No
 * es una excepción de este color: cualquier modificador de `.turno` necesita su regla
 * aquí, coincidan o no los valores. `PantallaCompatibilidadTest` lo vigila desde ahora.
 */
:root[data-tema="oscuro"] .turno--en-curso {
    background: #05be50;
    color: #101820;
    border-left-color: #05be50;
    box-shadow: 0 0 0 0.3vh transparent;
}

:root[data-tema="oscuro"] .turno--en-curso .turno__hora {
    color: #101820;
}

:root[data-tema="oscuro"] .turno--en-curso .turno__nombre {
    color: #101820;
}

:root[data-tema="oscuro"] .turno--en-curso .turno__etiqueta {
    background: #101820;
    border-color: #101820;
    color: #05be50;
}

:root[data-tema="oscuro"] .turno--sugerido {
    border-left-color: #9fb3c8;
}

:root[data-tema="oscuro"] .pantalla__sin-confirmar {
    border-top: 1px solid #35506b;
    color: #ffd166;
}

:root[data-tema="oscuro"] .pantalla__diagnostico {
    border-top: 1px solid #35506b;
    color: #9fb3c8;
}

:root[data-tema="oscuro"] .llamado__tarjeta {
    background: #ffb000;
    color: #101820;
}

:root[data-tema="oscuro"] .llamado__destino {
    color: #3d2e00;
}