/* * 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 * Chromium 56 (provisional hasta medir el televisor con `sonda.php`): sin `gap` en flex, * sin `min()`/`max()`/`clamp()`, sin grid ni selectores modernos. `PantallaCompatibilidadTest` * lo vigila. En una computadora el fallo no se ve nunca; en la sala, lo descuadra todo. * * 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 , 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: 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 , 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. Sobre gris claro NO puede seguir siendo el ámbar del tema oscuro: serían * dos tonos claros juntos y se perdería justo la fila que más tiene que verse. Se * invierte a superficie oscura con texto claro, conservando lo que sí importa de la * versión oscura: superficie de color llena y no un borde fino, porque a diez metros * un borde de pocos píxeles desaparece. */ --turno-destacado-fondo: #8a3a00; --turno-destacado-texto: #ffffff; /* 7.8:1 sobre el fondo del llamado */ --turno-destacado-tenue: #ffe7d1; /* 6.6:1 sobre el fondo del llamado */ /* * 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; --turno-destacado-fondo: #ffd166; --turno-destacado-texto: #0d1b2a; --turno-destacado-tenue: #3d3116; /* 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; } .pantalla { margin: 0; display: flex; flex-direction: column; background: var(--pantalla-fondo); color: var(--pantalla-texto); 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: flex; align-items: center; padding: 1.5vh 2vw; 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: flex; align-items: center; /* 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: 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 { 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: 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: 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 { flex: 1; display: flex; 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 { flex: 0 0 calc(50% - 1px); width: calc(50% - 1px); display: flex; 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 { 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: var(--pantalla-tenue); } .pantalla__divisor { flex: 0 0 2px; 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 { 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 { flex: 1 1 50%; width: 100%; } .pantalla__divisor { flex: 0 0 2px; width: 100%; } } /* =========================================================================== * 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: flex; align-items: baseline; padding: 1.1vh 1.2vw; margin-bottom: 0.9vh; border-radius: 0.6vh; border-left: 0.5vw solid var(--turno-borde); 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 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: 6vh; font-weight: 700; 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; } /* * 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 { flex: 0 0 auto; align-self: center; margin-right: 0.8vw; font-size: 1.9vh; font-weight: 700; 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: var(--turno-destacado-tenue); } .turno--en-curso .turno__hora { color: var(--turno-en-curso-texto); } .turno__nombre { font-size: 2.6vh; 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. */ 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 { 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: 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. */ .turno--destacado { background: var(--turno-destacado-fondo); color: var(--turno-destacado-texto); border-left-color: var(--turno-destacado-fondo); } .turno--destacado .turno__nombre { /* Sobre el ámbar del llamado, el tono tenue original quedaría ilegible. */ color: var(--turno-destacado-tenue); } /* * "ACERCARSE" sobre el ámbar del llamado. Se invierte —fondo oscuro sobre la fila * clara— 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: var(--turno-destacado-texto); border-color: var(--turno-destacado-texto); 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: var(--turno-en-curso-fondo); color: var(--turno-en-curso-texto); 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 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: 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: var(--turno-en-curso-texto); border-color: var(--turno-en-curso-texto); 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: 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 var(--pantalla-divisor); font-size: 2vh; font-weight: 600; color: var(--pantalla-aviso); } /* FR-028: solo visible con ?diagnostico=1. Deliberadamente discreto. */ .pantalla__diagnostico { margin: 0; padding: 1vh 2vw; border-top: 1px solid var(--pantalla-divisor); font-size: 1.6vh; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; 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: flex; align-items: 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: var(--turno-destacado-fondo); 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: 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; } }