/* eco.css — el aspecto de Economato504.
 *
 * Este archivo es de quien diseñe las pantallas. Se puede editar sin abrir
 * Python y sin compilar nada: el servidor lo entrega tal como está en el
 * disco, así que un cambio se ve recargando el navegador.
 *
 * Dos reglas del sistema que también valen aquí (DISENO §10):
 *   * No entra ningún framework ni paso de compilar — ni SCSS, ni Tailwind,
 *     ni nada que haya que construir antes de desplegar. Desplegar sigue
 *     siendo `git pull` y reiniciar, en un edificio donde puede no haber
 *     nadie de nosotros.
 *   * Nada de aquí decide nada. El servidor valida y el servidor decide; si
 *     este archivo no cargara, las pantallas se verían crudas y seguirían
 *     siendo correctas.
 *
 * De escritorio primero: el ancho del monitor, tablas y no columnas
 * estrechas, varias cosas a la vista a la vez.
 */

html, body { margin: 0; height: 100%; background: #f3f4f6; color: #111;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 18px; }
.entrar { min-height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; }
/* Una sola tarjeta blanca: todo lo que el oficial puede hacer en esta pantalla
   está dentro de ella, para que se lea como un solo panel. */
.tarjeta { background: #fff; padding: 2rem 2.5rem; border: 1px solid #d1d5db;
  box-sizing: border-box; width: 27rem; max-width: 100%; }
.tarjeta form { margin: 0; }
.tarjeta h1 { margin: 0 0 1.5rem; font-size: 1.6rem; }
.tarjeta label { display: block; margin: 0.8rem 0 0.3rem; }
.tarjeta input { width: 100%; box-sizing: border-box; font-size: 1.1rem; padding: 0.5rem;
  border: 1px solid #9ca3af; }
.tarjeta button { margin-top: 1.5rem; width: 100%; font-size: 1.1rem; padding: 0.6rem;
  border: 0; background: #1f4e79; color: #fff; }
/* Rojo porque termina la sesión: al oficial que llega de turno tiene que
   saltarle a la vista cuál de los dos botones no es "seguir trabajando". */
.tarjeta form.otro-usuario button { margin-top: 0.8rem; background: #b91c1c; }
.error { margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; background: #fee2e2;
  border: 1px solid #ef4444; color: #7f1d1d; }
.barra { display: flex; align-items: baseline; gap: 1.5rem; background: #1f4e79; color: #fff;
  padding: 0.7rem 1.5rem; }
.barra .quien { margin-left: auto; font-size: 0.95rem; }
.barra form { margin: 0; margin-left: 1rem; }
.barra button { font-size: 0.95rem; padding: 0.35rem 0.9rem; border: 0; background: #fff;
  color: #1f4e79; }
.barra h1 { margin: 0; font-size: 1.2rem; font-weight: 600; }
main { padding: 1.5rem; }
main h2 { margin: 0 0 1rem; font-size: 1.4rem; }
table.ficha { border-collapse: collapse; }
table.ficha th { text-align: left; padding: 0.35rem 1.5rem 0.35rem 0; color: #4b5563;
  font-weight: 500; }
table.ficha td { padding: 0.35rem 0; }
.aviso { padding: 1rem 1.5rem; background: #fff; border: 1px solid #d1d5db; max-width: 40rem; }
.bloqueado { margin: 0 0 0.4rem; color: #7f1d1d; font-weight: 600; }
/* La primera entrada no está bloqueada: es una instrucción. Va en el ámbar
   de «hay algo que hacer», nunca en el rojo de «algo salió mal». */
.primera-entrada { margin: 0 0 0.6rem; padding: 0.7rem 0.9rem; background: #fef3c7;
  border-left: 4px solid #d97706; color: #78350f; font-weight: 600; }
/* La puerta del INP (bucle 32): la caja acepta letras, así que es más ancha;
   la lista trae la cara de cada hombre; «nadie» va en el ámbar de «hay algo
   que hacer», no en rojo, porque no encontrar a nadie no es un error. */
.buscar-inp .caja-escaneo input { width: 26rem; font-size: 1.3rem; }
.hombres td.carita { width: 48px; padding-right: 0.6rem; }
.hombres td.carita img { width: 48px; height: 64px; object-fit: cover;
  border-radius: 3px; display: block; }
.nadie { margin: 0.8rem 0; padding: 0.7rem 0.9rem; background: #fef3c7;
  border-left: 4px solid #d97706; color: #78350f; font-weight: 600; }
/* El libro de dinero: se lee de arriba abajo como un estado de cuenta, con el
   monto y lo que quedó alineados a la derecha en cifras tabulares. */
main.libro, main.buscar-inp { max-width: 60rem; }
table.movimientos { border-collapse: collapse; margin: 0.8rem 0 1.2rem; width: 100%; }
table.movimientos td:first-child { white-space: nowrap; }
table.movimientos th, table.movimientos td { text-align: left; padding: 0.45rem 0.8rem;
  border-bottom: 1px solid #e5e7eb; vertical-align: top; }
table.movimientos th { color: #4b5563; font-size: 0.9rem; }
table.movimientos th.monto, table.movimientos td.monto { text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
table.movimientos td.saldo { font-weight: 700; }
table.movimientos tr.deposito td.monto:not(.saldo) { color: #166534; }
table.movimientos .vacio { color: #6b7280; font-style: italic; }
.libro .quien-es .dinero { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.desde-inp { color: #374151; }
.quien-bloqueado { margin: 0 0 1rem; font-size: 1.2rem; }
/* Debajo de la tarjeta y del mismo ancho, no al lado: el contenedor apila. */
.aviso-tarjeta { box-sizing: border-box; width: 30rem; max-width: 100%; }
#aviso-inactividad { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.75);
  display: flex; align-items: center; justify-content: center; }
#aviso-inactividad div { background: #fff; padding: 2rem 2.5rem; max-width: 28rem;
  border: 1px solid #d1d5db; }
#aviso-inactividad h2 { margin: 0 0 0.8rem; font-size: 1.3rem; }
#aviso-inactividad p { margin: 0 0 1.2rem; }
#aviso-inactividad button { font-size: 1.1rem; padding: 0.6rem 1.4rem; border: 0;
  background: #1f4e79; color: #fff; }

/* ====================================================== el registro
 *
 * Una pantalla, dos botones. El motivo está escrito en eco_campos.py; aquí
 * está lo que se ve.
 *
 * El orden en que el ojo del oficial recorre la pantalla es el orden del
 * trabajo: la cara, el nombre, dónde duerme, cómo es, y a quién avisar. La
 * fotografía va a la izquierda y ocupa las dos filas porque es lo único que no
 * se puede arreglar después sin el hombre parado enfrente.
 *
 * Las áreas tienen nombre a propósito. Mover un panel es cambiar una palabra
 * de sitio en `grid-template-areas`, sin tocar Python: si algún día hay un
 * diseñador, esto es lo que va a querer mover.
 */

.barra h1 a { color: inherit; text-decoration: none; }
.caja { padding: 1.5rem; max-width: 42rem; }
.caja-escaneo { background: #fff; border: 1px solid #d1d5db; padding: 1.5rem; }
.caja-escaneo label { display: block; margin-bottom: 0.5rem; }
/* La casilla del escaneo, grande: un PIN de seis dígitos leído de lejos por
   alguien que además está atendiendo a una persona. */
.caja-escaneo input { width: 14rem; font-size: 1.6rem; padding: 0.5rem 0.7rem;
  border: 1px solid #9ca3af; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.caja-escaneo button { margin-left: 0.8rem; font-size: 1.1rem; padding: 0.65rem 1.6rem;
  border: 0; background: #1f4e79; color: #fff; vertical-align: top; }
/* La caja de la ventanilla y del inventario (la tercera ronda de cambios,
   bucle 146), y su página «Producto dañado o que falta». Nelson,
   2026-11-01, al ver la primera vista: *«make it uniform buttons rounded
   and lined up with each other»* — el segundo botón había bajado solo,
   debajo de la casilla, en una ventana de 1137 puntos.
   Una sola columna, del mismo ancho para el título, los avisos y la
   tarjeta. En la caja, la casilla a todo lo ancho y, debajo, los dos
   botones del mismo tamaño, lado a lado, con sus bordes en la línea de
   la casilla; donde no caben lado a lado van uno debajo del otro, cada uno
   a todo lo ancho: nunca uno suelto. «Producto dañado o que falta» lleva
   borde y no relleno: es la otra cosa que se puede hacer, y el Enter del
   lector busca a la persona. Las esquinas, redondeadas. */
main.caja-ancha.buscar-ventanilla, main.caja-ancha.producto-danado {
  max-width: 42rem; }
.buscar-ventanilla .caja-escaneo, .producto-danado .caja-escaneo {
  background: #fff; border: 1px solid #d1d5db; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06); padding: 1.6rem 1.75rem; }
.buscar-ventanilla .caja-escaneo {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.buscar-ventanilla .caja-escaneo label, .producto-danado .caja-escaneo label {
  grid-column: 1 / -1; margin: 0; font-weight: 600; color: #1f2937; }
.buscar-ventanilla .caja-escaneo input { grid-column: 1 / -1; }
.buscar-ventanilla .caja-escaneo input, .producto-danado .caja-escaneo input,
.producto-danado .caja-escaneo select {
  width: 100%; box-sizing: border-box; height: 3.5rem; margin: 0;
  padding: 0 1rem; border: 1px solid #9ca3af; border-radius: 8px; }
.buscar-ventanilla .caja-escaneo input:focus,
.producto-danado .caja-escaneo input:focus,
.producto-danado .caja-escaneo select:focus {
  outline: none; border-color: #1f4e79;
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.25); }
.buscar-ventanilla .caja-escaneo button,
.buscar-ventanilla .caja-escaneo a.producto-danado,
.producto-danado .caja-escaneo button {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 3.5rem; margin: 0; padding: 0 1rem;
  border: 2px solid #1f4e79; border-radius: 8px; background: #1f4e79;
  color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer; }
.buscar-ventanilla .caja-escaneo button:hover,
.producto-danado .caja-escaneo button:hover {
  background: #2a6496; border-color: #2a6496; }
.buscar-ventanilla .caja-escaneo a.producto-danado {
  background: #fff; color: #1f4e79; }
.buscar-ventanilla .caja-escaneo a.producto-danado:hover {
  background: #eef2f7; }
.buscar-ventanilla .caja-escaneo button:focus-visible,
.buscar-ventanilla .caja-escaneo a.producto-danado:focus-visible,
.producto-danado .caja-escaneo button:focus-visible {
  outline: 3px solid rgba(31, 78, 121, 0.35); outline-offset: 2px; }
/* Los avisos de esta columna, del ancho de la tarjeta. */
.buscar-ventanilla .aviso-tarjeta, .producto-danado .aviso-tarjeta {
  width: auto; max-width: none; border-radius: 12px; }
/* Su página, desde la tercera vista de la ronda: Nelson, al ver la lista
   entera, *«can we do a drop down so the whole screen doesnt fill up the
   whole screen»*. Una tarjeta, dos renglones del mismo dibujo —la etiqueta
   escaneada y, debajo de una raya, la lista que se despliega—: su nombre
   arriba, la casilla o la lista, y su botón; los dos botones del mismo
   ancho, uno encima del otro. La flecha de la lista se dibuja aquí, con dos
   degradados: la de cada navegador es de otro tamaño y de otro color. */
.producto-danado .caja-escaneo form {
  display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: 0.9rem;
  margin: 0; }
.producto-danado .caja-escaneo form + form,
.producto-danado .caja-escaneo form + .vacio {
  margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid #e5e7eb; }
.producto-danado .caja-escaneo .vacio { margin-bottom: 0; color: #4b5563; }
.producto-danado .caja-escaneo select {
  -webkit-appearance: none; appearance: none; padding: 0 2.8rem 0 1rem;
  background-color: #fff; color: #111; font-size: 1.05rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #1f4e79 50%),
    linear-gradient(135deg, #1f4e79 50%, transparent 50%);
  background-position: calc(100% - 1.45rem) 50%, calc(100% - 1.05rem) 50%;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat; }
/* «Volver», debajo de la tarjeta: un enlace del color del sistema. */
.producto-danado .pie { margin-top: 1.2rem; }
.producto-danado .pie a { color: #1f4e79; font-weight: 600;
  text-decoration: none; }
.producto-danado .pie a:hover { text-decoration: underline; }
.pie { color: #4b5563; font-size: 0.95rem; max-width: 34rem; }
.sin-pin { margin-top: 1.5rem; color: #4b5563; font-size: 0.95rem;
  max-width: 34rem; }
.ya-esta { margin: 0 0 0.8rem; font-size: 1.3rem; font-weight: 600; }
.pendiente { color: #92400e; }

/* El PIN recién asignado. Esta pantalla es el único sitio donde ese número
   aparece por primera vez, y el oficial tiene que dictárselo al hombre antes de
   seguir: con él su familia le manda dinero. Así que se enseña grande, con las
   cifras separadas, y con la instrucción al lado. */
.pin-grande { margin: 0 0 0.8rem; display: flex; align-items: baseline;
  gap: 0.9rem; flex-wrap: wrap; }
.pin-grande span { color: #4b5563; font-size: 0.95rem; }
.pin-grande strong { font-size: 2.4rem; letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums; color: #166534; }
.leelo { margin: 0 0 1rem; padding: 0.7rem 0.9rem; background: #ecfdf5;
  border: 1px solid #166534; color: #14532d; }
.por-asignar { color: #92400e; font-weight: 600; letter-spacing: 0; }

.registro { padding: 1.5rem; }
.pin-fijo { margin: 0 0 1.2rem; color: #4b5563; }
/* El PIN en cifras tabulares y separadas: es el número con el que la familia
   le manda dinero, y leerlo mal es mandarlo a otro hombre. */
.pin-fijo strong { color: #111; font-size: 1.2rem; letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums; }
.pin-fijo a { margin-left: 1.2rem; }

/* Columnas apiladas y no áreas de una rejilla. En una rejilla la altura de una
   fila la manda su panel más alto, y debajo del más corto quedaba un hueco de
   doscientos puntos. Apiladas, cada columna se cierra donde acaba su último
   panel. Qué panel va en qué columna se decide en economato504.py
   (PANELES_POR_COLUMNA), en una línea. */
.rejilla { display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: 23rem minmax(15rem, 1fr) minmax(15rem, 1fr); }
.columna { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.panel { background: #fff; border: 1px solid #d1d5db; padding: 1rem 1.2rem 1.2rem; }
.panel h3 { margin: 0 0 0.8rem; font-size: 1.05rem; color: #1f4e79;
  border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }

.campo { margin-bottom: 0.9rem; }
.campo label { display: block; margin-bottom: 0.25rem; font-size: 0.95rem;
  color: #374151; }
.campo input, .campo select, .campo textarea { width: 100%; box-sizing: border-box;
  font-size: 1.05rem; padding: 0.45rem 0.5rem; border: 1px solid #9ca3af;
  background: #fff; font-family: inherit; }
.campo textarea { resize: vertical; }
/* Lo que pasó, escrito (bucle 126): con sus saltos de línea. */
.lo-escrito { white-space: pre-line; }
.por-que + .lo-escrito, .en-el-camino + .lo-escrito { margin-top: -0.25rem; }
.quien-escribio { font-weight: 600; }
/* Un punto y no un asterisco, y con su leyenda al pie del formulario. Cuatro
   campos obligatorios de veintiuno: lo raro es lo obligatorio, así que lo que
   se marca es eso. */
.obliga { color: #b91c1c; font-weight: 700; margin-left: 0.3rem; }
.campo-ayuda { display: block; margin-top: 0.25rem; color: #6b7280;
  font-size: 0.85rem; }
.campo-error { display: block; margin-top: 0.25rem; color: #7f1d1d;
  font-size: 0.85rem; font-weight: 600; }
.campo-malo input, .campo-malo select, .campo-malo textarea { border-color: #ef4444;
  background: #fef2f2; }
/* La unidad pegada a la casilla: «150 lb». Sin ella, dos oficiales pueden
   estar escribiendo dos cosas distintas en el mismo campo. */
.con-unidad { display: flex; align-items: stretch; }
.con-unidad input { border-right: 0; }
.unidad { display: flex; align-items: center; padding: 0 0.7rem;
  border: 1px solid #9ca3af; background: #f3f4f6; color: #4b5563;
  font-size: 0.95rem; white-space: nowrap; }

/* La estatura: dos casillas dentro de un campo — pies y pulgadas — porque
   nadie piensa en 68 pulgadas y porque dos columnas dejarían escribir «6 pies
   13 pulgadas». */
.estatura { display: flex; align-items: stretch; }
.estatura input { border-right: 0; min-width: 0; }
.estatura .unidad:not(:last-child) { border-right: 0; }

/* El métrico entre paréntesis, debajo de la casilla. Gris y pequeño: es una
   ayuda de lectura, no un dato que se guarde. */
.metrico { display: block; margin-top: 0.25rem; color: #4b5563;
  font-size: 0.9rem; font-variant-numeric: tabular-nums; min-height: 1.1em; }
.metrico:empty { min-height: 0; }

/* La fotografía. El visor tiene la forma de la banda — más alto que ancho —
   para que lo que el oficial ve encuadrado sea lo que va a salir impreso. */
.visor { position: relative; aspect-ratio: 4 / 5; background: #111827;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Apiladas, **no** una al lado de la otra.
 *
 * Estaban las dos sueltas dentro de un flex y cada una pedía el 100% del ancho,
 * así que en cuanto había fotografía tomada se repartían la caja a la mitad: la
 * cámara viva a la izquierda y la fotografía a la derecha, las dos cortadas por
 * la mitad. Con la cámara falsa de las pruebas no se notaba — un rectángulo
 * verde partido en dos sigue pareciendo un rectángulo verde — y con una cara de
 * verdad saltó a la vista en el primer intento. Posicionadas encima de la caja,
 * cada una la llena entera y la de arriba tapa a la de abajo. */
.visor video, .visor img { position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: cover; display: none; }
.visor video.viva { display: block; }
.visor img.puesta { display: block; }
/* Y tomada la fotografía, la fotografía es lo **único** que se ve. La cámara
   sigue encendida por debajo para que volver a encuadrar sea inmediato, pero no
   se enseña: dos caras en la misma caja no se leen, y la que importa es la que
   va impresa en la banda. */
.visor.con-foto video.viva { display: none; }
.visor .sin-foto { color: #9ca3af; font-size: 0.95rem; margin: 0; padding: 1rem;
  text-align: center; }
.visor.con-algo .sin-foto { display: none; }

/* La guía del encuadre: dónde va la cabeza.
 *
 * Sin ella cada oficial encuadra a su manera y las fotografías de veinte
 * cárceles salen a veinte tamaños distintos — la de un hombre ocupando la banda
 * entera y la del siguiente perdida en medio de un cuarto. Con ella, el oficial
 * mueve la cámara o le pide al hombre que se acerque hasta que la cara llene el
 * óvalo, y todas salen iguales.
 *
 * El óvalo va donde de verdad cae la cabeza en un retrato: arriba del centro,
 * con aire por encima y los hombros entrando por abajo. No se dibuja en la
 * fotografía — es una capa por encima del visor y nada más. */
.visor .guia { position: absolute; inset: 0; pointer-events: none; }
.visor .guia .cabeza { position: absolute; left: 50%; top: 7%;
  width: 46%; height: 56%; transform: translateX(-50%);
  border: 2px dashed rgba(255, 255, 255, 0.7); border-radius: 50%; }
/* Una línea de hombros al pie, para que se vea que el retrato termina ahí. */
.visor .guia::after { content: ""; position: absolute; left: 12%; right: 12%;
  top: 86%; border-top: 2px dashed rgba(255, 255, 255, 0.45); }
/* Tomada la fotografía, la guía estorba: lo que hay que mirar es la cara. */
.visor:not(.con-algo) .guia, .visor.con-foto .guia { display: none; }
.panel-foto .encuadre { margin-top: 0.5rem; }
.panel-foto #tomar { margin-top: 0.8rem; width: 100%; font-size: 1.05rem;
  padding: 0.6rem; border: 0; background: #1f4e79; color: #fff; }
.panel-foto .del-disco { margin-top: 0.8rem; }
.panel-foto .del-disco label { display: block; margin-bottom: 0.25rem;
  font-size: 0.95rem; color: #374151; }
.panel-foto .del-disco input { width: 100%; font-size: 0.95rem; }

.cerrar { margin-top: 1.2rem; display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; }
.solo-obligatorio { margin: 0; color: #4b5563; font-size: 0.9rem; max-width: 42rem; }
/* Un solo botón, y el más grande de la pantalla. Es la única cosa de aquí que
   escribe en la base. */
.cerrar button { font-size: 1.15rem; padding: 0.75rem 2.5rem; border: 0;
  background: #166534; color: #fff; margin-left: auto; }

/* La rejilla del INP —la oficina, los topes, los proveedores, la lista, el
   inventario, una bolsa de faltante y una novedad—: **una columna, siempre**
   (bucle 89), en el orden en que se trabaja. Nelson, al aterrizar el 88, con
   la pantalla entera: «it looks beautiful and uniform when its mid size; once
   it gets full sized it looks unaligned and ugly» —la columna angosta de 24rem
   doblaba los nombres en tres renglones y la ancha estiraba la mesa de las
   cuentas por todo lo demás—. Las dos clases, para ganarle a la regla de 1100
   de `.rejilla`, que va después en este archivo. */
.rejilla.rejilla-inp { grid-template-columns: minmax(0, 1fr); }
.columna-ancha { min-width: 0; }
.listado { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem;
  font-size: 0.95rem; }
.listado th { text-align: left; color: #4b5563; font-weight: 500;
  border-bottom: 1px solid #e5e7eb; padding: 0.3rem 0.6rem 0.4rem 0; }
.listado td { padding: 0.35rem 0.6rem 0.35rem 0;
  border-bottom: 1px solid #f3f4f6; }
/* Códigos y usuarios en cifras de ancho fijo: son lo que alguien compara de un
   vistazo contra una lista impresa. */
.listado .codigo, .ficha .codigo { font-family: ui-monospace, Menlo, monospace;
  font-size: 0.95em; }
/* El usuario de una cuenta (bucle 88): hasta treinta y dos letras sin un
   espacio, y una mesa no puede hacerse más angosta que su palabra más larga,
   así que con una cuenta así la mesa de las cuentas se salía de su tarjeta
   aunque la página ya fuera en una columna. `anywhere` deja partirlo; el
   mínimo de dieciséis letras es lo que hace que uno corriente no se parta
   nunca —sin él, la mesa apretada a 1366 repartía el ancho a prorrata y
   partía treinta y siete de ochenta y tres—. Dicho por Nelson el 2026-10-09:
   «Let it break onto a second line». Solo el usuario: los códigos, los PIN
   y las clases son cortos y no los escribe nadie con treinta letras. */
.listado td.usuario { min-width: 16ch; overflow-wrap: anywhere; }
.listado .vacio { color: #6b7280; font-style: italic; }
/* El departamento debajo del nombre: en Honduras un centro penal se ubica por
   él, y es lo que distingue los dos que se llaman El Porvenir. */
.listado .departamento { display: block; color: #6b7280; font-size: 0.85rem; }
/* En la tarjeta de una novedad el producto va en un h3 y no en una tabla, así
   que la regla de arriba no lo alcanzaba y en la pantalla se leía
   «Azúcarbolsa de 1 libra». Misma lección que el «Café molidobolsa de 400 g»
   del conteo: la presentación baja de línea allí donde se pinte. */
.panel h3.producto .departamento { display: block; color: #6b7280;
  font-size: 0.85rem; font-weight: 400; }
.listado .cuantos { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
/* La fila del total, que es lo que el INP mira primero. */
.listado tr.todas td { border-top: 2px solid #d1d5db; border-bottom: 0;
  padding-top: 0.5rem; font-weight: 600; }
.listado .apagada { color: #7f1d1d; font-size: 0.85rem; }
/* La marca baja de línea, como la de «contestada» justo encima: pegada al
   nombre se lee «Distribuidora La Esperanza S. de R.L.13 sin contestar», que
   es lo que salió el 2026-09-19 en la primera recepción con novedades de
   verdad. Hasta entonces ninguna prueba tenía una. */
.listado .pendiente { display: block; color: #92400e; font-size: 0.85rem; }
/* Dos por fila mientras quepan: seis casillas en una sola columna hacen una
   pantalla que hay que recorrer entera para ver si falta algo. */
.dos-columnas { display: grid; gap: 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.panel form > button { font-size: 1.05rem; padding: 0.6rem 1.6rem; border: 0;
  background: #166534; color: #fff; margin-top: 0.6rem; }
.entregar { max-width: 34rem; margin-bottom: 1.2rem; }
/* Más corta que un PIN y con guiones: se dicta, no se recuerda. */
.entregar .pin-grande strong { font-size: 1.8rem; letter-spacing: 0.08em;
  font-family: ui-monospace, Menlo, monospace; }
/* Monitores angostos y tabletas: la misma pantalla en una columna, en el mismo
   orden en que se trabaja. Nada se esconde. */
@media (max-width: 1100px) {
  .rejilla { grid-template-columns: 22rem minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .cerrar button { margin-left: 0; width: 100%; }
}

/* La tapa de bloqueo. Se dibuja encima de la pantalla sin recargarla, de modo
   que el formulario que hay debajo se queda intacto. Reutiliza .tarjeta, así
   que se lee igual que la pantalla de bloqueo de verdad. */
#tapa-bloqueo { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.85);
  display: flex; align-items: center; justify-content: center; z-index: 50; }
#tapa-bloqueo .conserva { margin: 0 0 0.4rem; color: #4b5563; font-size: 0.95rem; }
#tapa-bloqueo .error[hidden] { display: none; }

/* ---------------------------------------------------------- el que vuelve */
/* No es un error y no se pinta como uno. Es una instrucción: lo que está en
   pantalla es lo que dice el expediente, y el trabajo de este momento es
   mirarlo contra el hombre que está enfrente (DISENO §5.7). Ámbar y no rojo:
   el rojo de arriba quiere decir «corrija esto», y esto no hay que
   corregirlo, hay que leerlo. */
.aviso-vuelve { margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; background: #fef3c7;
  border-left: 4px solid #d97706; color: #78350f; }

/* Lo que el oficial escribió distinto de lo que dice el expediente. Se enseña
   **después** de guardar la reclusión, porque el ingreso no se detiene por
   esto — y se enseña, en vez de tragárselo, porque un cambio que desaparece en
   silencio es peor que uno rechazado. */
.diferencias { margin-top: 1.2rem; border-left: 4px solid #d97706; }
.diferencias h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.diferencias table { margin-top: 0.8rem; }
.diferencias th { color: #6b7280; font-weight: 600; }
.diferencias td, .diferencias th { padding-right: 1.4rem; }
.diferencias td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.diferencias .pie { margin-bottom: 0; color: #6b7280; font-size: 0.9rem; }

/* ---------------------------------------------------- las revisiones (§5.7) */
/* La marca «Coincide» de cada línea del que vuelve. Una casilla de verdad, al
   pie del campo, que el guion cuenta y el servidor cuenta igual sin él. */
.campo-comparar { padding-left: 0.6rem; border-left: 3px solid #e5e7eb; }
.campo-comparar.campo-malo { border-left-color: #ef4444; }
.campo-comparar.revisada { border-left-color: #16a34a; }
.coincide { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem;
  font-size: 0.9rem; color: #166534; cursor: pointer; user-select: none; }
.coincide input { width: 1.1rem; height: 1.1rem; accent-color: #16a34a; margin: 0; }
.contador { font-variant-numeric: tabular-nums; }
.contador strong { color: #166534; }
button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* El aviso en la barra: solo cuando hay alguna. */
.aviso-barra { margin-left: 1.5rem; padding: 0.3rem 0.8rem; border-radius: 1rem;
  background: #fbbf24; color: #1f2937; text-decoration: none; font-size: 0.95rem; }
.aviso-barra strong { margin-left: 0.3rem; }

/* La tarjeta del supervisor: dos caras, la tabla, dos botones. */
.revision { max-width: 60rem; margin-bottom: 1.5rem; }
.revision.del-inp { border-left: 4px solid #b91c1c; }
.pin-chico { margin-left: 0.8rem; font-size: 0.9rem; color: #4b5563; letter-spacing: 0.1em; }
.etiqueta-inp { margin-left: 0.8rem; padding: 0.1rem 0.5rem; background: #b91c1c;
  color: #fff; font-size: 0.75rem; border-radius: 0.25rem; vertical-align: middle; }
.dos-caras { display: flex; gap: 1.5rem; margin: 0.8rem 0 1rem; }
.dos-caras figure { margin: 0; flex: 1; max-width: 18rem; }
.dos-caras img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: #111827; border: 1px solid #d1d5db; }
.dos-caras figcaption { text-align: center; color: #6b7280; font-size: 0.9rem;
  margin-top: 0.3rem; }
.dos-caras .sin-foto { display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 5; background: #f3f4f6; color: #6b7280; border: 1px dashed #d1d5db; }
/* «Ya no está: cicatriz en la ceja izquierda.» Una seña que desapareció pesa
   (§5.7), y lo que pesa se nombra: leer dos párrafos para encontrar la
   diferencia es trabajo que la pantalla puede hacer y el oficial no debería. */
.diferencias .falta { margin: 0.2rem 0 0; color: #7c2d12; font-weight: 700;
  font-size: 0.95rem; }
.comparacion tr.no-cuadra th, .comparacion tr.no-cuadra td { background: #fef3c7; }
.comparacion .ok { color: #166534; }
.comparacion .peso { text-align: right; color: #6b7280; }
.revision form { display: flex; gap: 0.8rem; margin-top: 0.8rem; }
.revision form button { margin-top: 0; }
.panel form > button.rojo, button.rojo { background: #b91c1c; }
.comparacion td, .comparacion th { padding-right: 1.4rem; }
.comparacion td { white-space: nowrap; }
/* «No le imprima banda nueva.» El hombre llegó con la suya puesta y esa
   funciona. En letra pequeña y gris esto ya falló una vez — el 2026-09-14, con
   Nelson en el teclado — así que va en bloque, ámbar, con titular y con el
   número dentro: lo que de verdad tranquiliza a un oficial es reconocer el
   mismo número que el hombre traía en la muñeca. Ámbar y no rojo porque no es
   un error: es una instrucción (convención del 09-13). */
.no-imprima { background: #fef3c7; border-left: 6px solid #d97706;
  color: #78350f; }
.no-imprima h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: #7c2d12;
  text-transform: uppercase; letter-spacing: 0.03em; }
.no-imprima p { margin: 0 0 0.5rem; }
.no-imprima p:last-child { margin-bottom: 0; }
.no-imprima strong { color: #7c2d12; }
.hecha { background: #dcfce7; border-left-color: #16a34a; color: #14532d; }
.espera { border-left: 4px solid #d97706; }
.espera.inp { border-left-color: #b91c1c; }
.espera h3 { margin: 0 0 0.4rem; font-size: 1rem; }

/* ------------------------------------- el expediente y la salida (§5.8) */
/* Más ancha que las demás: la descripción va en dos columnas y leerla en una
   sola obliga a recorrer la pantalla entera para comparar una cara. */
.perfil, .historial { max-width: 60rem; }
.tarjeta-perfil { display: flex; gap: 1.5rem; width: auto; max-width: 100%;
  align-items: flex-start; flex-wrap: wrap; }
.tarjeta-perfil .cara { margin: 0; width: 15rem; flex: 0 0 auto; }
.tarjeta-perfil .cara img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: #111827; border: 1px solid #d1d5db; }
.tarjeta-perfil .cara figcaption { text-align: center; color: #6b7280;
  font-size: 0.9rem; margin-top: 0.3rem; }
.tarjeta-perfil .pin { font-family: ui-monospace, Menlo, monospace;
  font-size: 1.3rem; letter-spacing: 0.08em; }
/* El saldo se lee a través del vidrio: es la respuesta a «¿cuánto tengo?», y
   el oficial la dice en voz alta sin acercarse a la pantalla. */
.tarjeta-perfil tr.saldo th { vertical-align: baseline; }
.tarjeta-perfil .dinero { font-size: 1.7rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: #111; }
.tarjeta-perfil .ya-esta { flex-basis: 100%; margin: 0; color: #4b5563;
  font-size: 0.95rem; }
.descripcion { display: grid; gap: 1.2rem; margin: 1.2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.descripcion table.ficha { width: 100%; }
.descripcion table.ficha th { width: 45%; font-weight: normal; }
.ver-historial a { color: #1f4e79; }

/* La salida. Roja, angosta, y con la razón antes que el botón. */
.salida { box-sizing: border-box; background: #fff; border: 1px solid #d1d5db;
  border-left: 4px solid #b91c1c; padding: 1rem 1.2rem 1.2rem; max-width: 34rem; }
.salida h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: #7f1d1d; }
.salida > p { margin: 0 0 1rem; font-size: 0.95rem; color: #4b5563; }
.salida button { font-size: 1.05rem; padding: 0.6rem 1.6rem; border: 0;
  color: #fff; margin-top: 0.2rem; }
.salida select:disabled, .salida option:disabled { color: #9ca3af; }

/* Las estancias. La de hoy marcada: en una lista de seis, saber cuál es la de
   hoy no puede depender de leer fechas. */
table.estancias { border-collapse: collapse; margin: 0.8rem 0 1.2rem;
  background: #fff; }
table.estancias th, table.estancias td { text-align: left; padding: 0.45rem 1.2rem;
  border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
table.estancias th { color: #4b5563; font-size: 0.9rem; }
table.estancias tr.esta td { background: #eff6ff; font-weight: 600; }
.estado-abierta { color: #166534; }
.estado-pendiente { color: #92400e; }
.estado-cerrada { color: #4b5563; }
.estado-rechazada { color: #b91c1c; }
.quien-es { margin: 0; color: #1f2937; }
.compare { max-width: 60rem; margin: 1.2rem 0 0; }

/* ------------------------------------- la etiqueta del brazalete (§13) */
/* Las medidas van en **milímetros** y no en píxeles ni en rem: una etiqueta es
   un objeto físico que se corta con tijeras y se mete dentro de un brazalete de
   plástico, y §13 las midió contra una muñeca de verdad. Un rem depende del
   navegador; un milímetro no. */
.etiquetadora { max-width: 60rem; }
.etiqueta { box-sizing: border-box; width: 58mm; height: 25mm; padding: 1.5mm;
  display: flex; gap: 1.5mm; background: #fff; color: #000;
  border: 1px dashed #9ca3af; margin: 1.2rem 0; }
.etiqueta .cara { width: 12.5mm; height: 17.5mm; object-fit: cover;
  align-self: center; background: #e5e7eb; flex: 0 0 auto; }
.etiqueta .datos { flex: 1; min-width: 0; display: flex;
  flex-direction: column; justify-content: center; }
.etiqueta p { margin: 0; }
/* El nombre se encoge por tramos, y lo decide el servidor contando letras — no
   un guion midiendo la caja, porque esta etiqueta tiene que salir igual en la
   máquina donde el guion no cargó. */
.etiqueta .nombre { font-family: Arial, Helvetica, sans-serif; font-weight: 700;
  text-transform: uppercase; line-height: 1.05; font-size: 4.2mm;
  margin-bottom: 0.6mm; overflow: hidden; }
/* Los tres tamaños y sus tramos están **medidos** (ver `clase_de_nombre`), no
   elegidos a ojo: con `overflow: hidden` un nombre que no cabe se corta en
   silencio, así que aquí un milímetro de más no se ve hasta que sale impreso. */
.etiqueta .nombre.largo { font-size: 3.2mm; }
.etiqueta .nombre.muy-largo { font-size: 2.6mm; }
.etiqueta .barras { display: block; }
/* Los dígitos debajo de las barras: con el lector roto, la ventanilla sigue
   trabajando si puede teclearlos. */
.etiqueta .digitos { font-family: ui-monospace, Menlo, monospace;
  font-size: 2.4mm; letter-spacing: 0.3mm; margin-top: 0.3mm; }
.acciones button { font-size: 1.05rem; padding: 0.6rem 1.6rem; border: 0;
  background: #166534; color: #fff; }
.imprimir-banda { margin-top: 0.8rem; }
.imprimir-banda button { font-size: 0.95rem; padding: 0.5rem 1rem; border: 0;
  background: #1f4e79; color: #fff; width: 100%; box-sizing: border-box; }
.tarjeta-perfil .columna-cara { width: 15rem; flex: 0 0 auto; }
.tarjeta-perfil .columna-cara .cara { width: 100%; }

/* Lo que sale de la impresora es la etiqueta y nada más. La página mide lo que
   mide la etiqueta, así que no hay nada que recortar ni que centrar — y el
   aviso de «imprima al 100 %» sigue siendo necesario, porque el navegador
   ofrece encoger para ajustar y eso cambia el ancho del código de barras. */
@media print {
  @page { size: 58mm 25mm; margin: 0; }
  html, body { margin: 0; padding: 0; background: #fff; }
  /* El panel de la izquierda tampoco sale, y la cuadricula de la pantalla
     se deshace: con ella puesta, `main` caia en la segunda columna y la
     etiqueta se imprimia corrida, con los iconos del panel en el papel y
     en tres paginas de 58 mm (encontrado en el bucle 63 al imprimir la
     constancia; venia asi desde el panel del bucle 50). */
  body { display: block; }
  .barra, .lateral, .no-imprimir, .etiquetadora h2 { display: none !important; }
  .caja { padding: 0; margin: 0; max-width: none; }
  .etiqueta { border: 0; margin: 0; }
}

/* ------------------------------- la etiqueta del producto (§13, bucle 139) */
/* La etiqueta adhesiva del comisariato: 10,16 × 5,08 cm (Avery 5163), con
   el código de barras de 5,50 × 1,45 cm — barras dos veces más gruesas que
   las de la banda, porque un estante es plano y el lector está más lejos.
   En milímetros, como la de la banda: es un objeto que se pega. */
.etiqueta-producto { box-sizing: border-box; width: 101.6mm; height: 50.8mm;
  padding: 3.5mm 5mm; display: flex; flex-direction: column;
  justify-content: center; background: #fff; color: #000;
  border: 1px dashed #9ca3af; margin: 1.2rem 0; overflow: hidden; }
.etiqueta-producto p { margin: 0; }
.etiqueta-producto .nombre { font-family: Arial, Helvetica, sans-serif;
  font-weight: 700; text-transform: uppercase; line-height: 1.05;
  font-size: 7mm; overflow: hidden; overflow-wrap: anywhere; }
.etiqueta-producto .nombre.largo { font-size: 5.5mm; }
.etiqueta-producto .nombre.muy-largo { font-size: 4.3mm; }
.etiqueta-producto .presentacion { font-family: Arial, Helvetica, sans-serif;
  font-size: 4mm; line-height: 1.1; margin: 0.8mm 0 1.8mm; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.etiqueta-producto .barras { display: block; }
.etiqueta-producto .digitos { font-family: ui-monospace, Menlo, monospace;
  font-size: 4.2mm; letter-spacing: 0.7mm; margin-top: 0.8mm; }
/* La hoja: carta, diez etiquetas en dos columnas de cinco, con los márgenes
   de la hoja adhesiva (12,7 mm arriba, 3,97 mm a los lados y entre las dos
   columnas, nada entre filas). En pantalla, una hoja blanca; en papel, cada
   una en su página y sin márgenes del navegador. */
.hojas-de-etiquetas { max-width: 60rem; }
.hoja-de-etiquetas { box-sizing: border-box; width: 215.9mm;
  height: 279.4mm; padding: 12.7mm 0 0 3.97mm; display: grid;
  grid-template-columns: 101.6mm 101.6mm; column-gap: 3.97mm; row-gap: 0;
  align-content: start; background: #fff; margin: 0 0 1.5rem;
  border: 1px solid #d1d5db; }
.hoja-de-etiquetas .etiqueta-producto { margin: 0; border: 1px dashed #d1d5db; }
@media print {
  .hojas-de-etiquetas { max-width: none; }
  .hoja-de-etiquetas { border: 0; margin: 0; page-break-after: always;
    break-after: page; }
  .hoja-de-etiquetas:last-child { page-break-after: auto; break-after: auto; }
  .hoja-de-etiquetas .etiqueta-producto, .etiquetadora .etiqueta-producto {
    border: 0; margin: 0; }
}
/* La instrucción del traslado: es lo contrario de lo que el sistema decía
   ayer, así que no puede leerse como una línea más. */
.no-corte { border-left: 4px solid #d97706; padding-left: 0.8rem; }

/* ------------------------------------------- el que llega trasladado (§5.6) */
/* La cara que trae de la otra cárcel, encima de la cámara: una al lado de la
   otra, sin cambiar de pantalla. Es la idea de las dos caras del supervisor
   puesta donde el oficial la necesita. */
.cara-de-antes { margin: 0 0 1rem; background: #fff; border: 1px solid #d1d5db;
  padding: 0.6rem; }
.cara-de-antes img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: #111827; display: block; }
.cara-de-antes figcaption { text-align: center; color: #6b7280;
  font-size: 0.9rem; margin-top: 0.4rem; }
/* Buscarlo por su nombre (§5.7). Los resultados son **caras**: un nombre lo
   repiten muchos hombres y una cara no, así que el oficial elige mirando. */
.por-nombre .campo { margin-bottom: 0.6rem; }
.por-nombre button { font-size: 1rem; padding: 0.55rem 1.4rem; border: 0;
  background: #1f4e79; color: #fff; }
.por-nombre-salida { max-width: 46rem; }
.resultados { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.un-resultado { width: 11rem; background: #fff; border: 1px solid #d1d5db;
  padding: 0.6rem; }
.un-resultado figure { margin: 0; }
.un-resultado img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: #111827; display: block; }
.un-resultado figcaption { font-size: 0.95rem; margin: 0.4rem 0 0.6rem;
  color: #111; }
.un-resultado figcaption span { color: #166534; }
.un-resultado button { width: 100%; border: 0; padding: 0.5rem;
  background: #166534; color: #fff; font-size: 1rem; }

/* Las caras de antes, debajo de la grande: pequeñas, en fila, cada una con
   dónde y cuándo se tomó. Un hombre a cuatro años de distancia se reconoce
   mejor contra tres caras que contra una. */
.caras-viejas { margin-top: 0.8rem; border-top: 1px solid #e5e7eb;
  padding-top: 0.6rem; }
.caras-viejas p { margin: 0 0 0.4rem; color: #6b7280; font-size: 0.9rem; }
.caras-viejas figure { display: inline-block; margin: 0 0.5rem 0 0;
  width: 5.5rem; vertical-align: top; }
.caras-viejas img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: #111827; display: block; }
.caras-viejas figcaption { font-size: 0.8rem; color: #6b7280;
  text-align: center; margin-top: 0.2rem; }

/* El portón de la cara (§5.6, §5.7). Una sola pregunta en la pantalla y la
   fotografía tan grande como quepa: si hay que mirarle la cara a un hombre,
   una miniatura al lado de dieciocho campos no es mirarle la cara. */
.la-cara { max-width: 54rem; }
/* La cara a la izquierda y las dos respuestas a la derecha, para que quepan
   juntas: una fotografía grande **y** los dos botones sin bajar la pantalla.
   Envuelve sola en un monitor angosto. */
.cara-y-respuesta { display: flex; flex-wrap: wrap; gap: 1.2rem;
  align-items: flex-start; }
.cara-y-respuesta > .cara-grande { flex: 0 0 22rem; margin: 0; }
.contesta { flex: 1 1 22rem; min-width: 18rem; }
.contesta .aviso-tarjeta { margin-top: 0; }
.contesta .no-es-el { max-width: none; }
.cara-grande { margin: 0 0 1rem; background: #fff; border: 1px solid #d1d5db;
  padding: 0.8rem; }
/* Ancha para que se le vea la cara, y **no tan alta que los dos botones queden
   debajo del borde de la pantalla**: la pregunta y sus dos respuestas tienen
   que caber juntas. Un oficial que tiene que bajar para contestar contesta sin
   volver a subir a mirar. */
.cara-grande img { width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; background: #111827; display: block; }
.cara-grande figcaption { text-align: center; color: #374151; font-size: 1rem;
  margin-top: 0.6rem; }
/* El sí es el camino normal y se pinta como tal: verde, como el botón que
   cierra cualquier otra pantalla. El no es rojo y va en su propia tarjeta,
   igual que en el formulario de recibir. */
.es-el { margin: 1.2rem 0 0; }
.es-el button { font-size: 1.15rem; padding: 0.75rem 2.5rem; border: 0;
  background: #166534; color: #fff; }
/* El botón de «no es él» va **fuera** del formulario de aceptar y separado,
   para que no pueda apretarse creyendo que es el otro. */
.no-es-el { max-width: 34rem; margin: 1.2rem 0 0; padding: 1rem 1.2rem;
  background: #fff; border: 1px solid #d1d5db; border-left: 4px solid #b91c1c; }
.no-es-el p { margin: 0 0 0.8rem; font-size: 0.95rem; color: #4b5563; }
.no-es-el button { font-size: 1rem; padding: 0.55rem 1.4rem; border: 0;
  color: #fff; }

/* El mostrador (bucle 35). Tres columnas en el orden en que se trabaja: el
   hombre a la izquierda —su cara, que es lo que hay que comparar antes de
   cobrarle—, el estante ancho en medio y lo que se lleva a la derecha, donde
   el total queda a la altura del botón que lo cobra. */
main.mostrador { padding: 1.2rem 1.5rem; max-width: none; }
/* **Una columna que lleva una mesa no se aprieta por debajo de su mesa**
   (pulido del 2026-09-25): el piso de cada una es `min-content`. Con
   `minmax(0, …)` la columna del estante bajaba a 380 puntos en una
   pantalla de 1366 y su mesa, que no baja de 560, se salía de la tarjeta y
   quedaba DEBAJO de la del carrito: a 1600 y menos, los «Agregar» no se
   podían apretar. Cómo se reacomodan cuando no caben está más abajo. */
.rejilla-mostrador { grid-template-columns: 17rem minmax(min-content, 1.35fr)
  minmax(min-content, 1.1fr); }
.el-hombre .cara { margin: 0 0 0.8rem; }
.el-hombre .cara img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: #111827; display: block; }
.el-hombre .cara figcaption { text-align: center; color: #6b7280;
  font-size: 0.85rem; margin-top: 0.3rem; }
.el-hombre .su-nombre { margin: 0 0 0.6rem; font-size: 1.15rem;
  font-weight: 600; }
/* El saldo en una sola línea: «L 1000.00» partido en dos renglones se lee
   como dos cifras, y el oficial se lo está diciendo a un hombre en voz alta. */
.el-hombre .ficha { width: 100%; }
.el-hombre .ficha th { padding-right: 0.8rem; font-size: 0.95rem; }
.el-hombre .dinero { font-size: 1.4rem; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
/* Las dos cifras que pueden parar un cobro sin que le falte dinero (bucle
   44). En ámbar cuando lo que queda es poco y en rojo cuando es cero o
   menos: son algo que mirar, no algo que salió mal, hasta que paran. */
.el-hombre .poco { color: #92400e; font-weight: 600; }
.el-hombre .nada { color: #7f1d1d; font-weight: 700; }
/* Lo que le queda del mes va debajo del saldo y más chico: es el segundo
   número que puede parar un cobro, no el primero. */
.el-hombre .dinero-chico { font-variant-numeric: tabular-nums;
  color: #4b5563; }
.el-hombre .pie { font-size: 0.85rem; max-width: none; }
/* La caja del escaneo dentro del panel: sin el marco propio, que ya lo pone
   el panel, y pegada arriba porque es donde cae el foco al abrir. */
.caja-producto { border: 0; padding: 0 0 1rem; }
.caja-producto input { width: 11rem; }
/* El vistazo con su motivo (bucle 111): lo que ve, qué pasó, cuántos y el
   detalle en una línea que se parte sola, y «Sí hay» debajo, en la suya —
   abajo a propósito: el Enter aprieta el primer botón, y el primero tiene
   que ser el que lleva el número que el oficial acaba de escribir. */
.el-vistazo .lo-que-ve { display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.6rem 0.6rem; }
.el-vistazo .lo-que-ve input, .el-vistazo .lo-que-ve select { font-size: 1rem;
  padding: 0.4rem 0.55rem; border: 1px solid #9ca3af; background: #fff;
  box-sizing: border-box; margin: 0; }
.el-vistazo .lo-que-ve input[name="vistos"],
.el-vistazo .lo-que-ve input[name="cuantos_vistazo"] { width: 5.5rem;
  font-variant-numeric: tabular-nums; }
.el-vistazo .lo-que-ve input[name="detalle_vistazo"] { flex: 1 1 16rem;
  width: auto; }
/* Los dos botones con el peso de lo que hacen: «Hay menos» escribe —con el
   azul del botón del escaneo, porque es el que aprieta el Enter— y «Sí hay»
   es el camino de siempre, con el verde de agregar. */
.el-vistazo button { font-size: 1rem; padding: 0.45rem 1.4rem; border: 0;
  color: #fff; margin: 0; }
.el-vistazo button[name="hay_menos"] { background: #1f4e79; }
.el-vistazo button[name="si_hay"] { background: #166534; }
/* Su ayuda va al lado del botón y se parte en su propia columna (bucle
   112): desde que dice que queda anotado con su nombre ya no cabe en una
   línea, y partida bajo el botón dejaba una palabra sola debajo. */
.el-vistazo .si-hay { margin: 0.9rem 0 0; display: flex; align-items: center;
  gap: 0.8rem; }
.el-vistazo .si-hay button { flex: none; }
.el-vistazo .si-hay .campo-ayuda { display: block; margin: 0; }
/* **Mírelo usted** (bucle 117): lo que contesta el «no sé», con las mismas
   casillas que el vistazo de la ventanilla y el mismo orden; el botón, con
   el azul de lo que escribe. Y lo que vio el supervisor, ya mirada, en el
   mismo recuadro que lo que dijo el oficial. */
.la-mirada .lo-que-ve { display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.6rem 0.6rem; }
.la-mirada .lo-que-ve input, .la-mirada .lo-que-ve select { font-size: 1rem;
  padding: 0.4rem 0.55rem; border: 1px solid #9ca3af; background: #fff;
  box-sizing: border-box; margin: 0; }
.la-mirada .lo-que-ve input[name="vistos"],
.la-mirada .lo-que-ve input[name="cuantos"] { width: 5.5rem;
  font-variant-numeric: tabular-nums; }
.la-mirada .lo-que-ve input[name="detalle"] { flex: 1 1 16rem; width: auto; }
.panel.la-mirada form > button { font-size: 1.05rem; padding: 0.6rem 1.6rem;
  border: 0; color: #fff; background: #166534; margin: 0.4rem 0 0; }
.lo-que-vio { margin-top: 1rem; padding: 0.7rem 0.9rem; background: #eff6ff;
  border: 1px solid #1f4e79; }
.lo-que-vio h4 { margin: 0 0 0.3rem; }
.lo-que-dijo { margin-top: 1rem; padding: 0.7rem 0.9rem; background: #fffbeb;
  border: 1px solid #f59e0b; }
.lo-que-dijo h4 { margin: 0 0 0.3rem; }
.lo-que-dijo .campo-ayuda { display: block; margin-top: 0.4rem; }
/* La alerta (bucle 114): lo que dijo el oficial y la semana de su centro
   penal. Ámbar, como lo que espera una firma: es algo que mirar. Él va
   primero en la semana, y se lee más fuerte. */
.la-alerta { margin-top: 1rem; padding: 0.7rem 0.9rem; background: #fffbeb;
  border: 1px solid #f59e0b; }
.la-alerta h4 { margin: 0.2rem 0 0.4rem; }
.la-alerta tr.el-de-la-alerta td { font-weight: 600; }
/* El número de su novedad va en la letra de los códigos; cómo está, debajo,
   en la de las palabras: «espera la firma» no es un código. */
.la-alerta td.codigo .departamento {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.estante td.hacer, .carrito td.hacer { text-align: right; white-space: nowrap; }
.estante .departamento, .carrito .departamento { white-space: nowrap; }
.estante button { border: 0; padding: 0.35rem 0.9rem; font-size: 0.95rem;
  background: #166534; color: #fff; }
/* «Mirar» (bucle 115): mirar el estante porque el oficial quiere. No pesa lo
   que pesa «Agregar» y no se pinta igual: blanco con su borde, al lado. En el
   inventario es un enlace —abrirlo no escribe nada— con la misma cara. */
.estante button.mirar, a.mirar { display: inline-block; border: 1px solid #1f4e79;
  background: #fff; color: #1f4e79; padding: 0.3rem 0.8rem; font-size: 0.9rem;
  text-decoration: none; }
/* El mostrador, parejo (la séptima ronda de cambios, bucle 150). Visto al
   cerrar el 146: «Agregar», con relleno, y «Mirar», con borde, salían de
   anchos y alturas distintos en cada renglón, y la casilla del escaneo era
   más alta que su «Agregar». Los dos botones de cada renglón, de la misma
   medida —el borde de «Mirar» va dentro de la suya—, y en la caja del
   escaneo la casilla y el botón de la misma altura. Las esquinas son las
   de «la forma», al final del archivo. */
.estante button, .estante button.mirar, a.mirar { display: inline-flex;
  align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 5.6rem; height: 2.1rem; padding: 0 0.9rem; font-size: 0.95rem;
  line-height: 1; }
.estante button.mirar, a.mirar { padding: 0 calc(0.9rem - 1px); }
.el-estante .caja-producto input, .el-estante .caja-producto button {
  box-sizing: border-box; height: 3.2rem; margin: 0; vertical-align: top; }
.el-estante .caja-producto button { margin-left: 0.8rem; }
/* Los dos van juntos y se acomodan (visto en ver_anchos): a 1728 —la
   pantalla de Nelson—, con tres renglones en el carrito, las tres columnas no
   cabían y la página se corría de lado. Donde no caben uno al lado del otro,
   «Mirar» baja debajo de «Agregar», en su misma celda. */
.estante td.hacer .con-mirar { display: inline-flex; flex-wrap: wrap;
  justify-content: flex-end; align-items: center; gap: 0.3rem 0.4rem; }
.estante button.mirar:hover, a.mirar:hover { background: #e8f0f8; }
.el-estante td.hacer, .panel-avisa td.hacer { text-align: right;
  white-space: nowrap; }
/* Quitar no es una acción del mismo peso que agregar, y no se pinta como si lo
   fuera: un botón gris y pequeño al final del renglón. */
.carrito .quitar { border: 1px solid #d1d5db; background: #fff; color: #4b5563;
  padding: 0.2rem 0.5rem; font-size: 0.8rem; }
/* El renglón que no se puede vender hoy se ve y se lee: apagado, no
   escondido. Un producto que desaparece del estante cuando se acaba deja al
   oficial explicando que el sistema está malo. */
.estante tr.apagado td, .carrito tr.apagado td { color: #6b7280; }
.estante .lleva { display: block; color: #166534; font-size: 0.85rem;
  font-weight: 600; }
.estante .por-reponer { display: block; color: #92400e; font-size: 0.8rem;
  font-weight: 600; }
.carrito .cuantos-campo { width: 4.5rem; text-align: right;
  font-variant-numeric: tabular-nums; padding: 0.3rem 0.4rem;
  border: 1px solid #9ca3af; }
.el-carrito .total { margin: 0.8rem 0 0.2rem; font-size: 1.1rem;
  display: flex; justify-content: space-between; align-items: baseline; }
.el-carrito .total .dinero { font-size: 1.6rem;
  font-variant-numeric: tabular-nums; }
.el-carrito .queda-despues { margin: 0 0 0.8rem; color: #4b5563;
  font-size: 0.95rem; }
.el-carrito .actualizar { margin: 0.6rem 0; }
.el-carrito .actualizar button { border: 1px solid #9ca3af; background: #fff;
  color: #374151; padding: 0.4rem 1rem; font-size: 0.9rem; }
/* El botón que cobra: el más grande de la pantalla y el único verde grande,
   porque es el que mueve dinero y tiene que ser inconfundible. */
.el-carrito .cobrar { display: block; width: 100%; border: 0;
  padding: 0.9rem 1rem; font-size: 1.2rem; background: #166534; color: #fff; }
.el-carrito .campo-ayuda { display: block; margin-top: 0.4rem; }
/* Cancelar: delineado en rojo y debajo del verde, no al lado. El rojo relleno
   de este sistema es el que destruye algo en la base; cancelar no escribe
   nada, asi que se mira pero no grita. */
.el-carrito .cancelar { margin: 0.9rem 0 0; }
.el-carrito .cancelar button { width: 100%; border: 1px solid #b91c1c;
  background: #fff; color: #b91c1c; padding: 0.55rem 1rem; font-size: 1rem; }

/* El recibo: la pantalla que se le enseña al hombre. Ancha como el libro y
   con el número de la venta grande, que es por lo único que se vuelve a
   encontrar. */
/* El recibo es una tarjeta blanca y no texto suelto sobre la página: es lo
   que el oficial levanta y le enseña al hombre, y tiene que leerse como un
   documento y no como el resto de una pantalla de trabajo. */
main.recibo { max-width: 46rem; margin: 1.5rem; padding: 1.5rem 2rem;
  background: #fff; border: 1px solid #d1d5db; }
.recibo .listado { margin-top: 0.8rem; }
.recibo .quien-es { margin: 0.2rem 0 0; }
.recibo .numero-venta strong { font-size: 1.8rem; letter-spacing: 0.08em;
  font-family: ui-monospace, Menlo, monospace; }
.recibo .saldo-despues { margin: 1rem 0; font-size: 1.1rem; }
.recibo .saldo-despues .dinero { font-size: 1.4rem;
  font-variant-numeric: tabular-nums; }
.ir-al-comisariato { margin: 0 0 1rem; font-size: 1.05rem; }

/* El mostrador a los anchos que hay (pulido del 2026-09-25). Las tres
   columnas caben desde 1700 de ancho, con las mesas de un estante de verdad
   —doce productos— y un carrito con tres. Por debajo, en vez de montarse:
   - de 1200 a 1699, la cara sube a una franja de lado a lado, y el estante y
     el carrito quedan debajo, lado a lado y en el mismo orden de siempre;
   - por debajo de 1200, una sola columna, en el orden en que se trabaja.
   Nada se esconde: la cara se achica, pero sigue siendo lo primero que se ve
   y lo bastante grande para compararla con el hombre que está delante. */
@media (max-width: 1699px) {
  .rejilla-mostrador { grid-template-columns: minmax(min-content, 1.3fr)
    minmax(min-content, 1fr); }
  .rejilla-mostrador > .columna:first-child { grid-column: 1 / -1; }
  /* La franja: la cara a la izquierda; el nombre, las cifras y «Volver a su
     expediente» al lado; y lo de comparar la cara en la tercera columna, a
     la altura del nombre. Cada pieza con su sitio escrito: puestas solas, el
     párrafo largo compartía renglón con el nombre y empujaba las cifras
     hacia abajo, y lo que la foto tiene de más alto se repartía entre el
     nombre y las cifras en vez de ir al final. */
  .rejilla-mostrador .el-hombre { display: grid; column-gap: 2rem;
    grid-template-columns: 9rem auto minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr; align-items: start; }
  .rejilla-mostrador .el-hombre h3 { grid-column: 1 / -1; }
  .rejilla-mostrador .el-hombre .cara { grid-column: 1; grid-row: 2 / span 3;
    margin: 0; }
  .rejilla-mostrador .el-hombre .su-nombre { grid-column: 2; grid-row: 2; }
  .rejilla-mostrador .el-hombre .ficha { grid-column: 2; grid-row: 3; }
  .rejilla-mostrador .el-hombre .pie { margin: 0 0 0.6rem; max-width: 30rem; }
  .rejilla-mostrador .el-hombre .ficha + .pie { grid-column: 3;
    grid-row: 2 / span 3; }
  .rejilla-mostrador .el-hombre .pie + .pie { grid-column: 2; grid-row: 4;
    margin-top: 0.6rem; }
}
@media (max-width: 1199px) {
  .rejilla-mostrador { grid-template-columns: minmax(min-content, 1fr); }
}
/* Y de 769 a 1440 el panel de la izquierda se queda en los dibujos en esta
   pantalla, como ya se queda en todas por debajo de 1088: es la pantalla de
   más trabajo y la que más ancho necesita, y el panel sigue llevando a
   todas partes con sus dibujos. Sin esto, a 1280 el estante y el carrito no
   caben lado a lado. */
@media (min-width: 769px) and (max-width: 1440px) {
  body:has(main.mostrador) { grid-template-columns: 3.6rem minmax(0, 1fr); }
  body:has(main.mostrador) .lateral .titulo-panel { display: none; }
  body:has(main.mostrador) .lateral .renglon { justify-content: center;
    padding: 0.6rem 0; gap: 0; }
  body:has(main.mostrador) .lateral .renglon span { display: none; }
}

/* La lista nacional del INP (bucle 36). La fotografia del producto va grande
   donde el INP la esta poniendo y chica donde el oficial la mira de reojo,
   pero **nunca tan chica que haya que leer el nombre para saber que es**: esa
   era toda la idea. Nelson, 2026-09-15: «*you know how much humans like
   pictures, they love pictures more than they like to read*». */
main.lista-inp { padding: 1.2rem 1.5rem; max-width: none; }
.lista-nacional td.carita, .estante td.carita { width: 3.4rem;
  padding-right: 0.6rem; }
.foto-producto.chica { width: 3.2rem; height: 3.2rem; object-fit: cover;
  border: 1px solid #e5e7eb; background: #fff; display: block; }
.foto-producto.grande { width: 100%; max-width: 16rem; aspect-ratio: 1 / 1;
  object-fit: cover; border: 1px solid #d1d5db; background: #fff;
  display: block; margin-bottom: 0.8rem; }
/* El hueco del que no tiene: del mismo tamano, para que la columna no baile
   entre renglones con foto y sin ella. */
.sin-foto { display: block; background: #f3f4f6;
  border: 1px dashed #d1d5db; }
.sin-foto.chica { width: 3.2rem; height: 3.2rem; }
.sin-foto.grande { width: 100%; max-width: 16rem; aspect-ratio: 1 / 1;
  margin-bottom: 0.8rem; }
.lista-nacional .apagada { display: block; color: #7f1d1d; font-size: 0.85rem; }
.lista-nacional tr.apagado td { color: #6b7280; }
.lista-nacional a { color: #1f4e79; }

/* Un producto solo: la foto y el precio uno al lado del otro, que son las dos
   cosas que el INP viene a cambiar. */
main.un-producto { max-width: 52rem; }
.producto-arriba { display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: 18rem minmax(0, 1fr); margin-bottom: 1.2rem; }
.producto-arriba input[type=file] { font-size: 0.9rem; }
.retirar-producto { margin: 1.5rem 0 0; padding-top: 1rem;
  border-top: 1px solid #e5e7eb; }
.retirar-producto .pie { margin: 0 0 0.8rem; }
/* El boton que corrige: pegado al aviso rojo, con los dos numeros escritos
   encima. Rojo relleno porque pisa un precio que ya rigio hoy. */
.corregir-precio { margin: 0 0 1rem; }
.corregir-precio button { border: 0; padding: 0.6rem 1.4rem; font-size: 1rem;
  background: #b91c1c; color: #fff; }
.retirar-producto button { font-size: 1rem; padding: 0.55rem 1.4rem; border: 0;
  background: #166534; color: #fff; }
.retirar-producto button.rojo { background: #b91c1c; }
@media (max-width: 760px) {
  .producto-arriba { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ el camion, el inventario y la cola (bucle 37) */

/* Una caja que lleva una tabla ancha: el documento de una recepcion y la cola
   de novedades. La caja normal es de leer un parrafo; estas son de leer
   columnas. */
main.caja-ancha { max-width: 60rem; }
/* El cuadre del día (bucle 74). Las cifras a la derecha y alineadas, como en
   un libro; el veredicto arriba, en verde o en rojo, porque es lo primero que
   el INP y el auditor buscan; el día al lado del nombre. */
main.cuadre { max-width: 72rem; }
.cuadre .cifra { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.cuadre h3.el-dia { margin: 1.2rem 0 0.4rem; font-size: 1.15rem;
  color: #1f4e79; }
.cuadre h3.el-dia .fecha { margin-left: 0.8rem; color: #4b5563;
  font-weight: 500; font-variant-numeric: tabular-nums; }
.cuadre .veredicto { margin: 0.6rem 0 1rem; padding: 0.7rem 0.9rem;
  font-weight: 600; }
.cuadre .veredicto.cuadra { background: #dcfce7; color: #14532d;
  border-left: 4px solid #166534; }
.cuadre .veredicto.no-cuadra { background: #fee2e2; color: #7f1d1d;
  border-left: 4px solid #b91c1c; }
.cuadre .panel { margin-bottom: 1rem; }
/* La bitácora sellada (bucle 98): el veredicto como el del cuadre, y el
   sello de sesenta y cuatro letras, que se parte donde haga falta. */
.sello .veredicto { margin: 0.6rem 0 1rem; padding: 0.7rem 0.9rem;
  font-weight: 600; }
.sello .veredicto.entera { background: #dcfce7; color: #14532d;
  border-left: 4px solid #166534; }
.sello .veredicto.rota { background: #fee2e2; color: #7f1d1d;
  border-left: 4px solid #b91c1c; }
.sello .sello-hex { font-family: ui-monospace, Menlo, monospace;
  font-size: 0.9rem; word-break: break-all; }
.sello .panel { margin-bottom: 1rem; }
.cuadre table.libro td.que { padding-left: 1.2rem; }
.cuadre table.libro tr.subtotal td { border-top: 2px solid #d1d5db;
  font-weight: 600; }
.cuadre .estado-si { color: #166534; }
.cuadre .estado-no { color: #b91c1c; font-weight: 600; }
.cuadre .cuenta { display: block; color: #6b7280; font-size: 0.85rem; }
.cuadre td.carcel a.codigo { font-family: ui-monospace, Menlo, monospace; }
.cuadre ul.libros { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.cuadre ul.libros li { margin: 0.2rem 0; }
/* Las gráficas del cuadre (bucle 75): SVG dibujado por el servidor. Ocupan
   el ancho del panel hasta 56rem —más anchas, la letra de sus ejes crecería
   más que la de la tabla de al lado—; el título en tinta y lo que explica
   debajo, más tenue. Su tabla gemela, cerrada en la pantalla. */
.cuadre figure.grafica { margin: 0 0 1.2rem; max-width: 56rem; }
.cuadre .grafica figcaption { font-weight: 600; color: #111827;
  margin: 0 0 0.35rem; }
.cuadre .grafica figcaption .subtitulo { display: block; font-weight: 400;
  color: #4b5563; font-size: 0.85rem; }
.cuadre .grafica-svg { display: block; width: 100%; height: auto; }
.cuadre .grafica.vacia .vacio { margin: 0.2rem 0 0; color: #6b7280;
  font-style: italic; }
.cuadre .tabla-de-la-grafica { margin: 0.4rem 0 0; }
.cuadre .tabla-de-la-grafica summary { cursor: pointer; color: #1f4e79;
  font-size: 0.9rem; }
.cuadre .tabla-de-la-grafica table.listado { margin: 0.4rem 0 0; }
.cuadre .codigo-bolsa { font-family: ui-monospace, Menlo, monospace; }
.cuadre .ninguna { margin: 0.2rem 0 0.4rem; }
.cuadre .imprimir-cuadre { margin: 0.2rem 0 0.8rem; }
.cuadre .imprimir-cuadre .campo-ayuda { display: inline; margin-left: 0.8rem; }
/* Los dos archivos del cuadre (bucle 76), al lado de su hoja. */
.cuadre .imprimir-cuadre a.descargar { margin-left: 1rem; }
/* Los dos archivos de la lista de precios (bucle 95), encima de la mesa;
   los de los proveedores (96) en la misma clase, y los de los conteos (97)
   en su página. */
.lista-inp .descargar-lista, .conteo .descargar-lista {
  margin: 0.2rem 0 0.8rem; }
.lista-inp .descargar-lista .campo-ayuda,
.conteo .descargar-lista .campo-ayuda { display: inline;
  margin-left: 0.8rem; }
.lista-inp .descargar-lista a.descargar + a.descargar,
.conteo .descargar-lista a.descargar + a.descargar { margin-left: 1rem; }

/* El panel que avisa. **Ambar y no rojo**: es algo que hacer, no algo que
   salio mal (convencion del 09-13, ampliada el 09-15). Lo que hay que reponer
   vive aqui. */
.panel-avisa { border-left: 4px solid #d97706; background: #fffbeb; }
.panel-avisa h3 { color: #78350f; }

/* El panel de una accion que este rol no puede hacer. Se ensena apagado y con
   quien si puede, en vez de esconderse: un hueco no explica nada. */
.panel-apagado { background: #f9fafb; border-style: dashed; }
.panel-apagado h3 { color: #6b7280; }

/* La cabecera de la factura: tres casillas en una fila, que es como se lee el
   papel — proveedor, numero, fecha. */
.rejilla-factura { display: grid; gap: 0 1.2rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }

/* La tabla del camion. Las tres casillas de cada renglon van angostas y
   alineadas a la derecha, para que la columna se lea de arriba abajo como una
   columna de numeros y no como texto. */
.tabla-recepcion input { width: 5.5rem; box-sizing: border-box;
  font-size: 1.05rem; padding: 0.35rem 0.4rem; border: 1px solid #9ca3af;
  text-align: right; }
.tabla-recepcion td, .tabla-recepcion th { vertical-align: middle; }
/* Lo que hay hoy, en gris: es contexto, no algo que se escriba. Si tuviera el
   mismo peso que las casillas, un ojo cansado escribiria encima de el. */
.tabla-recepcion .hay-ahora { color: #6b7280; }

/* El boton que parece boton aunque sea un enlace. Es la unica excepcion a la
   regla del 09-12 —lo que no escribe es un enlace— y se queda escrita aqui:
   «Recibir un camion» abre un formulario largo, y en una pantalla de tres
   paneles un enlace de texto no se encuentra. */
a.boton { display: inline-block; padding: 0.55rem 1.4rem; font-size: 1rem;
  background: #166534; color: #fff; text-decoration: none; }
a.boton:hover { background: #14532d; }

/* El pie de un formulario largo: el boton que guarda, y al lado el enlace que
   se va sin guardar. Nunca dos botones: solo uno de los dos escribe. */
.pie-botones { margin-top: 1.2rem; display: flex; gap: 1.2rem;
  align-items: center; }
.pie-botones button { border: 0; padding: 0.6rem 1.6rem; font-size: 1.05rem;
  background: #166534; color: #fff; }
.pie-botones a { color: #1f4e79; }

/* La cifra de una novedad: lo que falta o sobra, grande, con su valor en
   lempiras debajo. Es lo primero que se mira al abrirla. **Debajo** quiere
   decir en su propio renglón: hasta el bucle 64 la regla no lo ponía ahí y
   salía pegado —«faltan 3−L 150.00», «0se le deben de 2» en la bolsa de
   faltante—. Lo vio Nelson en la novedad del traslado, el 2026-10-02. */
.cifra-grande { margin: 0 0 0.8rem; font-size: 1.8rem; font-weight: 700;
  color: #78350f; line-height: 1.2; }
.cifra-grande .departamento { display: block; margin-top: 0.2rem;
  font-size: 1.1rem; font-weight: 600; color: #6b7280; }

/* Lo que alguien escribio con sus manos: el detalle de una novedad y la razon
   con que se contesto. Va en su propio recuadro porque no es del sistema, es
   de una persona, y dentro de un ano alguien lo va a leer buscando eso. */
.razon { margin: 0 0 0.8rem; padding: 0.7rem 0.9rem; background: #f9fafb;
  border-left: 4px solid #d1d5db; color: #374151; white-space: pre-wrap; }

@media (max-width: 760px) {
  .rejilla-factura { grid-template-columns: minmax(0, 1fr); }
  .tabla-recepcion input { width: 4.5rem; }
}

/* La bitácora (bucle 41): los filtros en una fila, y el texto del renglón en
   letra de máquina, que es como se lee una línea de registro.
   Bucle 67: Safari dibuja su lista desplegable más baja que una casilla, y
   alineadas por abajo la etiqueta «Cuenta» quedaba más abajo que las otras.
   Ahora las etiquetas se alinean por arriba, las tres casillas y el botón
   tienen la misma altura, y «Ver» y «Todo» van juntos: si la fila no cabe,
   bajan los dos. */
.filtros { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-start;
  margin: 0 0 1rem; }
.filtros .campo { margin: 0; min-width: 11rem; }
.filtros .campo input, .filtros .campo select { height: 2.5rem; }
/* Y la de las cuentas, con un tope. Una lista desplegable se hace tan ancha
   como su opción más larga, y con los nombres de verdad de un centro penal
   —un nombre de cuatro palabras y «Oficial de ventanilla»— la fila no cabía
   y «Ver» bajaba solo al renglón de abajo, en una pantalla ancha. Lo vio
   Nelson en su Safari al aterrizar el bucle 67; la caminata no podía verlo,
   porque sus cuentas tenían nombres cortos. La lista abierta sigue
   enseñando cada nombre entero. */
.filtros .campo select { max-width: 22rem; }
.filtros .ver-todo { align-self: flex-end; display: flex; align-items: center;
  gap: 0.4rem; white-space: nowrap; }
.filtros button { font-size: 1.05rem; padding: 0 1.4rem; height: 2.5rem;
  border: 0; background: #1f4e79; color: #fff; cursor: pointer; }
.filtros a { margin-left: 0.4rem; }
/* La casilla del día vacía (bucle 67): Safari pinta en gris la fecha de hoy
   dentro de una casilla de fecha sin nada, y un supervisor la lee como un
   filtro puesto. Vacía —`required` sin cumplir; el formulario lleva
   `novalidate` y se manda igual— y sin el cursor dentro, no enseña nada. */
.filtros input[type="date"]:invalid:not(:focus) { color: transparent; }
.filtros input[type="date"]:invalid:not(:focus)::-webkit-datetime-edit {
  opacity: 0; }
/* Qué: una frase en español (bucle 42), en la letra de todo lo demás. El
   mensaje exacto va en el title de la celda. */
.bitacora td.texto { word-break: break-word; }
.bitacora td.cuando { white-space: nowrap; }
/* Quién, en la del supervisor (bucle 66): el nombre en un renglón y la
   cuenta debajo, sin partir el nombre en dos. */
.bitacora td.quien { white-space: nowrap; }
/* El hombre, en la del INP y la del auditor (bucle 69): su PIN y su nombre
   debajo, como Quién lleva la cuenta debajo del nombre. **El nombre se parte
   donde haga falta**: sin partir, uno de cuatro palabras —como los de
   verdad— dejaba a «Qué» en 121 puntos en una pantalla ancha. En una ancha
   el nombre tiene por lo menos once letras de ancho: uno corto o mediano va
   en un renglón, y uno largo en dos. */
@media (min-width: 1440px) {
  .bitacora td.hombre .departamento { min-width: 11em; }
}
/* **Y en una ventana angosta, sí se parten** (bucle 67). La regla de arriba
   pasó a la del INP con el nombre, y la del INP tiene siete columnas: con un
   nombre de cuatro palabras sin partir y la hora sin partir, a «Qué» le
   quedaban 43 puntos en una ventana de 760 —en el 66, con la cuenta sola,
   133— y la frase salía letra por letra. Lo vio Nelson en su Safari. Por
   debajo de 1280 el nombre y la hora pueden ir en dos renglones; en una
   pantalla ancha no cambia nada. */
@media (max-width: 1279px) {
  .bitacora td.quien, .bitacora td.cuando { white-space: normal; }
}
/* **Y en la del país, Quién se parte antes: por debajo de 1440** (bucle
   69). Con el nombre del hombre al lado del de la ventanilla, a «Qué» le
   quedaban 92 puntos en una ventana de 1280 —189 en el bucle 68—. Por
   debajo de 1440 el nombre de la ventanilla también puede ir en dos
   renglones. De 1440 para arriba va en uno, y la del supervisor no cambia. */
@media (max-width: 1439px) {
  .bitacora.del-pais td.quien { white-space: normal; }
}
/* **Pero el día y la hora, cada uno entero** (bucle 68). El navegador
   también parte una línea después de un guion, y en una ventana angosta la
   fecha salía en tres pedazos —«2026-», «10-03» y la hora—. Lo vio Nelson
   en su Safari al aterrizar el bucle 67. Cada uno va en su pieza y se
   parte solo entre los dos (`celda_cuando`). */
.bitacora td.cuando span { white-space: nowrap; }
/* Lo que el auditor general ve donde el INP ve un formulario: apagado, y con
   quién sí puede. Un formulario que se apaga entero no deja botón que apretar. */
.solo-lee { padding: 0.7rem 0.9rem; margin: 0.6rem 0;
  border: 1px dashed #9ca3af; }
.solo-lee .bloqueado { margin: 0; }

/* ------------------------------------------------- los topes (§6, bucle 44) */
/* Los cinco números del país, cada uno con lo que es debajo. La cifra grande
   porque es lo único que se viene a leer a esta pantalla. */
.topes .listado td.cifra { font-size: 1.2rem; font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.topes .que-es { display: block; color: #6b7280; font-size: 0.85rem;
  max-width: 28rem; white-space: normal; font-weight: 400; }
/* El que nació con el sistema y el que puso alguien se leen distinto: uno
   tiene nombre detrás y el otro no. */
.topes .de-nacimiento { color: #6b7280; font-style: italic; }
.topes .mas-adelante { display: block; color: #92400e; font-size: 0.85rem; }
.topes .techo-del-techo { border-left: 4px solid #1f4e79; padding-left: 0.8rem;
  margin: 1.2rem 0; }
/* Lo que una cárcel cambió: la fila lleva su código delante, y la que no
   cambió nada no sale. */
.topes .codigo { font-weight: 600; }
/* La fila de un numero que todavia no empieza: la cifra apagada, porque hoy
   no es la que manda, y el boton de quitarla al final. Lo que no rige se ve
   — lo que no se ve es lo que nadie puede revisar. */
.topes .listado tr.no-rige td.cifra { color: #92400e; font-weight: 600; }
.topes .quitar-tope { border: 1px solid #b91c1c; background: #fff;
  color: #b91c1c; border-radius: 8px; padding: 0.25rem 0.7rem;
  font-size: 0.85rem; cursor: pointer; }
.topes .quitar-tope:hover { background: #b91c1c; color: #fff; }
.historia-tope { margin-top: 1.2rem; }

/* ------------------------------------------- los mínimos (§5.4.12, bucle 113) */
/* La mesa de todos los productos: la casilla del número del país en cada
   renglón, angosta y con la cifra a la derecha, como la del conteo; y los
   centros penales que tienen el suyo, cada uno en su pastilla, que se
   parten de renglón entre ellas y nunca por la mitad de una. */
.lista-minimos td.el-del-pais { width: 1%; white-space: nowrap;
  font-size: 1.05rem; font-weight: 600; }
.lista-minimos .casilla-minimo { width: 5rem; box-sizing: border-box;
  padding: 0.3rem 0.4rem; font-size: 1.05rem; text-align: right;
  font-variant-numeric: tabular-nums; border: 1px solid #9ca3af; }
.lista-minimos td.propios .propio { display: inline-block;
  margin: 0.1rem 0.4rem 0.1rem 0; padding: 0.05rem 0.5rem;
  border: 1px solid #d1d5db; border-radius: 999px; font-size: 0.85rem;
  white-space: nowrap; }
.lista-minimos td.propios .propio b { font-variant-numeric: tabular-nums; }
.lista-minimos td.propios .ninguno { color: #9ca3af; }
/* **Plegados** (la cuarta ronda de cambios, bucle 147): en las tres mesas
   gemelas —esta, la de los topes de compra y la de los límites por
   producto— los centros penales con el suyo van dentro de una línea que
   dice cuántos y se despliega, cerrada. Nelson, 2026-11-01, con veinte
   pastillas en cada renglón: *«so we dont have all that info just
   splattered all over the screen»*. La flecha es la de las listas: azul,
   hacia abajo cerrada y hacia arriba abierta; la de cada navegador se
   esconde. */
td.propios details.los-suyos summary { display: inline-flex;
  align-items: center; gap: 0.5rem; list-style: none; cursor: pointer;
  color: #1f4e79; font-weight: 600; font-size: 0.95rem; padding: 0.2rem 0; }
td.propios details.los-suyos summary::-webkit-details-marker { display: none; }
td.propios details.los-suyos summary::after { content: ""; width: 0.4rem;
  height: 0.4rem; border-right: 2px solid #1f4e79;
  border-bottom: 2px solid #1f4e79; transform: translateY(-0.15rem)
  rotate(45deg); }
td.propios details.los-suyos[open] summary::after {
  transform: translateY(0.1rem) rotate(-135deg); }
td.propios details.los-suyos summary:focus-visible {
  outline: 3px solid rgba(31, 78, 121, 0.35); outline-offset: 2px; }
td.propios details.los-suyos .pastillas { margin-top: 0.35rem; }
/* **Un centro penal a la vez** en las tres mesas gemelas (bucle 147): la
   lista de arriba es la de «Centros penales y cuentas», con su «Buscar»; y en
   la vista de un centro penal, la última columna dice el número que rige
   ahí y, debajo, de dónde viene: «el suyo», en azul, o «el del país». */
.lista-minimos td.en-el-centro, .lista-topes-de-compra td.en-el-centro,
.lista-limites td.en-el-centro { width: 1%; white-space: nowrap;
  font-size: 1.05rem; font-weight: 600; }
td.en-el-centro .de-donde { display: block; font-size: 0.8rem;
  font-weight: 400; color: #6b7280; }
td.en-el-centro.suyo .de-donde { color: #1f4e79; font-weight: 600; }
.minimos .escoger-centro, .topes-de-compra .escoger-centro,
.limites .escoger-centro { margin: 0.4rem 0 0.8rem; }
.lista-minimos tr.apagado td { color: #6b7280; }
.lista-minimos .apagada { display: block; color: #7f1d1d; font-size: 0.85rem; }
.lista-minimos a { color: #1f4e79; }
/* El renglón que no se pudo guardar: en rojo, con lo que se tecleó todavía
   en su casilla, para encontrarlo en una mesa de cien. */
.lista-minimos tr.con-error td { background: #fef2f2; }
.lista-minimos tr.con-error .casilla-minimo { border: 2px solid #b91c1c; }
form.los-minimos button.guardar-minimos { font-size: 1.05rem;
  padding: 0.6rem 1.6rem; border: 0; background: #166534; color: #fff;
  margin: 0.2rem 0 0.9rem; }
form.los-minimos .pie { margin-top: 0; }
.como-se-lee ul { margin: 0; padding-left: 1.1rem; }
.como-se-lee li { margin: 0.4rem 0; line-height: 1.4; }
/* La página de un producto: el número del país grande, porque es lo primero
   que se viene a leer; la mesa de los centros penales con el que rige; y la
   historia. Lo que no puso nadie desde una pantalla se lee distinto. */
.minimos .minimo-del-pais { margin: 0 0 0.4rem; font-size: 2rem;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.minimos .listado td.cifra, .minimos .listado th.cifra { text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  padding-right: 1.2rem; }
.minimos .listado td.cifra { font-weight: 600; }
.minimos .del-pais, .minimos .de-antes { color: #6b7280; font-weight: 400;
  font-style: italic; }
.minimos .minimos-carceles tr.suyo td { background: #f8fafc; }
.minimos .minimos-carceles td.carcel strong { font-weight: 600; }
/* El formulario de un número: una casilla para un número y un desplegable
   de centros penales no necesitan el ancho de la página. */
.minimos .campo select, .minimos .campo input { max-width: 30rem; }
/* La lista de centros penales, con el nombre entero (bucle 150): a 30rem la
   casilla cortaba al borde los más largos —«…Marco Aurelio Soto (PNMAS),
   Tám»—. En las tres mesas gemelas, en «Las computadoras», en «Crear una
   cuenta» y en la lista de arriba de «Centros penales y cuentas», la
   casilla crece hasta donde cabe el nombre más largo con su departamento;
   la que lleva además cuántos privados de libertad tiene, un poco más. Las
   de las otras dos mesas y la de «Las computadoras» llevan su medida en su
   propia regla, más abajo. */
.minimos .campo select { max-width: 44rem; }
.crear-una-cuenta .dos-columnas .campo:has(#c-carcel) { grid-column: 1 / -1; }
.crear-una-cuenta .dos-columnas .campo:has(#c-carcel) select {
  max-width: 44rem; }
.resumen-minimos { margin: 0 0 0.9rem; }
.minimos .quitar-minimo { border: 1px solid #b91c1c; background: #fff;
  color: #b91c1c; border-radius: 8px; padding: 0.25rem 0.7rem;
  font-size: 0.85rem; cursor: pointer; }
.minimos .quitar-minimo:hover { background: #b91c1c; color: #fff; }
.minimos .listado td.hacer form { margin: 0; }
.historia-minimo { margin-top: 1.2rem; }

/* ------------------------------------ los topes de compra (§5.4.19, bucle 140) */
/* Las dos páginas son gemelas de las de los mínimos y se visten igual: la
   casilla del número del país en cada renglón —vacía es «sin límite», y la
   casilla lo dice en gris—, los centros penales con el suyo en pastillas,
   el renglón que no se pudo guardar en rojo, y en la página del producto
   el número grande, la mesa de los centros penales y la historia. Lo que
   se vende al mes va en gris: es un dato para mirar, no un número puesto. */
.lista-topes-de-compra td.el-del-pais { width: 1%; white-space: nowrap;
  font-size: 1.05rem; font-weight: 600; }
.lista-topes-de-compra .casilla-tope-de-compra { width: 5.5rem;
  box-sizing: border-box; padding: 0.3rem 0.4rem; font-size: 1.05rem;
  text-align: right; font-variant-numeric: tabular-nums;
  border: 1px solid #9ca3af; }
.lista-topes-de-compra .casilla-tope-de-compra::placeholder { color: #9ca3af;
  font-size: 0.8rem; font-weight: 400; }
.lista-topes-de-compra td.vende-al-mes { color: #6b7280; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.lista-topes-de-compra td.propios .propio { display: inline-block;
  margin: 0.1rem 0.4rem 0.1rem 0; padding: 0.05rem 0.5rem;
  border: 1px solid #d1d5db; border-radius: 999px; font-size: 0.85rem;
  white-space: nowrap; }
.lista-topes-de-compra td.propios .propio b { font-variant-numeric: tabular-nums; }
.lista-topes-de-compra td.propios .ninguno,
.lista-topes-de-compra td.vende-al-mes .ninguno { color: #9ca3af; }
.lista-topes-de-compra tr.apagado td { color: #6b7280; }
.lista-topes-de-compra .apagada { display: block; color: #7f1d1d;
  font-size: 0.85rem; }
.lista-topes-de-compra a { color: #1f4e79; }
.lista-topes-de-compra tr.con-error td { background: #fef2f2; }
.lista-topes-de-compra tr.con-error .casilla-tope-de-compra {
  border: 2px solid #b91c1c; }
form.los-topes-de-compra button.guardar-topes-de-compra {
  font-size: 1.05rem; padding: 0.6rem 1.6rem; border: 0; background: #166534;
  color: #fff;
  margin: 0.2rem 0 0.9rem; }
form.los-topes-de-compra .pie { margin-top: 0; }
.topes-de-compra .sin-tope, .tabla-recepcion .sin-tope { color: #6b7280;
  font-style: italic; font-weight: 400; }
.sin-tope-panel h3 { margin-top: 0; }
.topes-de-compra .tope-del-pais { margin: 0 0 0.4rem; font-size: 2rem;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.topes-de-compra .tope-del-pais .sin-tope { font-size: 1.4rem; }
.topes-de-compra .listado td.cifra, .topes-de-compra .listado th.cifra {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
  padding-right: 1.2rem; }
.topes-de-compra .listado td.cifra { font-weight: 600; }
.topes-de-compra .listado td.este-mes .departamento { display: inline; }
.topes-de-compra .del-pais, .topes-de-compra .de-antes { color: #6b7280;
  font-weight: 400; font-style: italic; }
.topes-de-compra .topes-de-compra-carceles tr.suyo td { background: #f8fafc; }
.topes-de-compra .topes-de-compra-carceles td.carcel strong { font-weight: 600; }
.topes-de-compra .topes-de-compra-carceles td.pedido a.pidio { color: #b45309;
  font-weight: 600; white-space: nowrap; }
.topes-de-compra .campo input { max-width: 30rem; }
.topes-de-compra .campo select { max-width: 44rem; }
.resumen-topes-de-compra { margin: 0 0 0.9rem; }
.topes-de-compra .quitar-tope-de-compra { border: 1px solid #b91c1c;
  background: #fff; color: #b91c1c; border-radius: 8px;
  padding: 0.25rem 0.7rem; font-size: 0.85rem; cursor: pointer; }
.topes-de-compra .quitar-tope-de-compra:hover { background: #b91c1c;
  color: #fff; }
.topes-de-compra .listado td.hacer form { margin: 0; }
.historia-tope-de-compra { margin-top: 1.2rem; }
/* La mesa de los centros penales lleva ocho columnas, tres más que la de
   los mínimos: en una ventana angosta las cifras pierden su aire, «Este
   mes» va en dos renglones y lo demás parte donde pueda, para que la mesa
   quepa en su tarjeta (ver_anchos_del_inp la mide a dieciocho anchos; a
   1101 el panel de la izquierda todavía va entero y el contenido es el más
   angosto de todos, 768). */
@media (max-width: 1199px) {
  .topes-de-compra .topes-de-compra-carceles td.cifra,
  .topes-de-compra .topes-de-compra-carceles th.cifra { padding-right: 0.5rem; }
  .topes-de-compra .topes-de-compra-carceles td.este-mes .departamento {
    display: block; }
  .topes-de-compra .topes-de-compra-carceles td.pedido a.pidio {
    white-space: normal; }
  .topes-de-compra .topes-de-compra-carceles td.cifra { white-space: normal; }
}
/* En la entrada: lo que el mes deja, con el tope en gris al lado; en rojo
   cuando ya no queda nada, y el renglón entero en rojo cuando la entrada se
   negó a él por el tope. */
.tabla-recepcion td.quedan-del-mes { white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.tabla-recepcion td.quedan-del-mes .quedan { font-weight: 600; }
.tabla-recepcion td.quedan-del-mes .agotado { font-weight: 700; color: #b91c1c; }
.tabla-recepcion td.quedan-del-mes .departamento { display: inline; }
.tabla-recepcion tr.con-error td { background: #fef2f2; }
.tabla-recepcion tr.con-error input { border: 2px solid #b91c1c; }

/* ------------------------------ los límites por producto (§5.4.20, bucle 141) */
/* Las dos páginas son gemelas de las de los mínimos y se visten igual: la
   casilla del número del país en cada renglón —vacía es «sin límite», y la
   casilla lo dice en gris—, los centros penales con el suyo en pastillas,
   el renglón que no se pudo guardar en rojo, y en la página del producto
   el número grande, la mesa de los centros penales y la historia. */
.lista-limites td.el-del-pais { width: 1%; white-space: nowrap;
  font-size: 1.05rem; font-weight: 600; }
.lista-limites .casilla-limite { width: 5.5rem; box-sizing: border-box;
  padding: 0.3rem 0.4rem; font-size: 1.05rem; text-align: right;
  font-variant-numeric: tabular-nums; border: 1px solid #9ca3af; }
.lista-limites .casilla-limite::placeholder { color: #9ca3af;
  font-size: 0.8rem; font-weight: 400; }
.lista-limites td.propios .propio { display: inline-block;
  margin: 0.1rem 0.4rem 0.1rem 0; padding: 0.05rem 0.5rem;
  border: 1px solid #d1d5db; border-radius: 999px; font-size: 0.85rem;
  white-space: nowrap; }
.lista-limites td.propios .propio b { font-variant-numeric: tabular-nums; }
.lista-limites td.propios .ninguno { color: #9ca3af; }
.lista-limites tr.apagado td { color: #6b7280; }
.lista-limites .apagada { display: block; color: #7f1d1d; font-size: 0.85rem; }
.lista-limites a { color: #1f4e79; }
.lista-limites tr.con-error td { background: #fef2f2; }
.lista-limites tr.con-error .casilla-limite { border: 2px solid #b91c1c; }
form.los-limites button.guardar-limites { font-size: 1.05rem;
  padding: 0.6rem 1.6rem; border: 0; background: #166534; color: #fff;
  margin: 0.2rem 0 0.9rem; }
form.los-limites .pie { margin-top: 0; }
.limites .sin-limite { color: #6b7280; font-style: italic; font-weight: 400; }
.limites .limite-del-pais { margin: 0 0 0.4rem; font-size: 2rem;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.limites .limite-del-pais .sin-limite { font-size: 1.4rem; }
.limites .listado td.cifra, .limites .listado th.cifra { text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  padding-right: 1.2rem; }
.limites .listado td.cifra { font-weight: 600; }
.limites .del-pais, .limites .de-antes { color: #6b7280; font-weight: 400;
  font-style: italic; }
.limites .limites-carceles tr.suyo td { background: #f8fafc; }
.limites .limites-carceles td.carcel strong { font-weight: 600; }
.limites .campo input { max-width: 30rem; }
.limites .campo select { max-width: 44rem; }
.resumen-limites { margin: 0 0 0.9rem; }
.limites .quitar-limite { border: 1px solid #b91c1c; background: #fff;
  color: #b91c1c; border-radius: 8px; padding: 0.25rem 0.7rem;
  font-size: 0.85rem; cursor: pointer; }
.limites .quitar-limite:hover { background: #b91c1c; color: #fff; }
.limites .listado td.hacer form { margin: 0; }
.historia-limite { margin-top: 1.2rem; }
/* Las computadoras (bucle 142): la mesa de las vivas, el código que sale
   una vez, y la página de entrar que nombra su computadora. */
.computadoras .lista-computadoras td.lugar .codigo,
.computadoras .lista-retiradas td.lugar .codigo { font-weight: 600; }
.computadoras .lista-computadoras td.lugar .edificio,
.computadoras .lista-retiradas td.lugar .edificio { color: #1f4e79;
  font-weight: 600; }
.computadoras .lista-computadoras td.cuando { white-space: nowrap; }
.computadoras .computadora-nunca { color: #b45309; font-style: italic; }
.computadoras .computadora-espera { color: #1f4e79; font-size: 0.85rem; }
.computadoras .computadora-vencida { color: #b91c1c; font-size: 0.85rem; }
.computadoras .lista-computadoras td.hacer { white-space: nowrap; }
.computadoras .lista-computadoras td.hacer form { display: inline; margin: 0; }
.computadoras .codigo-nuevo { border: 1px solid #1f4e79; background: #fff;
  color: #1f4e79; border-radius: 8px; padding: 0.25rem 0.7rem;
  font-size: 0.85rem; cursor: pointer; margin-right: 0.4rem; }
.computadoras .codigo-nuevo:hover { background: #1f4e79; color: #fff; }
.computadoras .retirar-computadora { border: 1px solid #b91c1c;
  background: #fff; color: #b91c1c; border-radius: 8px;
  padding: 0.25rem 0.7rem; font-size: 0.85rem; cursor: pointer; }
.computadoras .retirar-computadora:hover { background: #b91c1c; color: #fff; }
/* Cambiarle el nombre (la primera ronda de cambios): debajo del nombre, como
   un enlace, porque no saca a nadie de la computadora. */
.computadoras .lista-computadoras td.nombre form.renombrar { display: block;
  margin: 0.15rem 0 0; }
.computadoras .cambiar-nombre { border: 0; background: none; padding: 0;
  color: #1f4e79; font-size: 0.8rem; text-decoration: underline;
  cursor: pointer; }
.computadoras .cambiar-nombre:hover { color: #163a5c; }
.renombrar-computadora .campo input { max-width: 30rem; width: 100%; }
.computadoras .resumen-computadoras { margin: 0 0 0.9rem; }
.computadoras .autorizar-computadora input,
.computadoras .autorizar-computadora select { max-width: 44rem; }
.computadoras .campo-fijo { margin: 0 0 0.6rem; }
.codigo-de-computadora h3 { margin-top: 0; }
.entrar .computadora-de-entrar { margin: -0.4rem 0 1rem; color: #1f4e79;
  font-weight: 600; }
.entrar .aviso-de-entrar { color: #166534; font-weight: 600; }
.entrar .sin-computadora .pie { margin-top: 1rem; }
/* En el mostrador: lo que la semana le deja a este hombre, debajo del
   nombre como «lleva 2»; en rojo cuando ya no le queda nada. */
.estante .limite { display: block; color: #1f4e79; font-size: 0.8rem;
  font-weight: 600; }
.estante .limite.agotado { color: #b91c1c; }

/* ------------------------------------------------- el conteo (§5.4.5) */
/* La mesa de contar: veinticinco nombres, lo que dice el sistema de cada
   uno y veinticinco casillas vacias (bucle 52; hasta el 51 iba a ciegas). */
.conteo .casilla { width: 6rem; font-size: 1.1rem; text-align: right;
  font-variant-numeric: tabular-nums; }
/* La presentacion va debajo del nombre y no pegada a el: la captura del
   09-18 decia «Cafe molidobolsa de 400 g», que no es ningun producto. La
   regla de los topes solo alcanzaba a `.topes`. */
.conteo .que-es { display: block; color: #6b7280; font-size: 0.85rem;
  font-weight: 400; }
/* Y el boton de guardar es el verde de siempre. Sin esto salia el gris de
   fabrica, que en una pantalla de trabajo no se ve como el boton que es. */
.conteo form > button { font-size: 1.05rem; padding: 0.6rem 1.6rem; border: 0;
  background: #166534; color: #fff; margin-top: 0.6rem; }
.conteo .listado td.cuantos { white-space: nowrap; }
/* Lo que dice el sistema, a la izquierda de la casilla (bucle 52). Gris y
   alineado a la derecha, como una cifra: se lee de un vistazo, pero no se
   confunde con lo que el oficial escribe, que va en negro dentro de la
   casilla. Las dos columnas de cifras de la mesa se encogen a lo que ocupan
   (width: 1%): el nombre se queda con el sobrante y el numero queda pegado
   a su casilla, no al otro lado de la mesa. */
.conteo form[action="/conteo"] .listado .sistema,
.conteo form[action="/conteo"] .listado .cuantos { width: 1%; }
.conteo .listado .sistema { text-align: right; white-space: nowrap;
  padding-right: 1.4rem; font-variant-numeric: tabular-nums; }
.conteo .listado td.sistema { color: #4b5563; font-size: 1.05rem; }
.conteo .con-el-sistema { border-left: 4px solid #1f4e79; padding-left: 0.8rem;
  margin: 1rem 0; }
/* Lo que cuadra se lee de un vistazo y lo que no, tambien: verde no, porque
   cuadrar es lo normal y lo normal no se celebra. Gris lo que esta bien,
   ambar lo que falta, rojo lo que sobra — que es peor. */
.conteo tr.cuadra td.cifra { color: #6b7280; }
.conteo tr.falta td.cifra { color: #92400e; font-weight: 700; }
.conteo tr.sobra td.cifra { color: #b91c1c; font-weight: 700; }
.conteo .explicar { background: #fffbeb; }
.conteo .explicar td { padding-top: 0.2rem; }
.conteo .firma { display: block; margin-top: 0.4rem; padding-top: 0.4rem;
  border-top: 1px dashed #d1d5db; }
/* El renglón que nombra lo que falta (pulido del 2026-09-25): una línea
   para la pregunta y lo que la contesta, todo del mismo alto, y la firma en
   la suya. Hasta ese día cada casilla traía un tamaño distinto —la del
   número la de la mesa de contar, la del motivo la chica del navegador—,
   Guardar bajaba 0.6rem por la regla del botón verde de la mesa, y la
   casilla del detalle cortaba su propia instrucción a la mitad. */
.conteo .explicar form { display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 0.5rem 0.6rem; margin: 0; }
.conteo .explicar .pregunta, .conteo .explicar .firma .que {
  align-self: center; }
.conteo .explicar input, .conteo .explicar select { font-size: 1rem;
  padding: 0.3rem 0.5rem; border: 1px solid #9ca3af; background: #fff;
  box-sizing: border-box; margin: 0; }
.conteo .explicar input[type="number"] { width: 5rem; text-align: right;
  font-variant-numeric: tabular-nums; }
.conteo .explicar input[name="detalle"] { flex: 1 1 15rem; }
.conteo .explicar button { font-size: 1rem; padding: 0.3rem 1.2rem;
  margin: 0; }
.conteo .explicar .firma { flex: 0 0 100%; display: flex; flex-wrap: wrap;
  align-items: stretch; gap: 0.5rem 0.6rem; }
.conteo .explicar .firma input { flex: 0 1 18rem; }
.conteo .sin-contar { color: #b91c1c; font-weight: 700; }
/* Lo que la ventanilla nombró y espera la firma del supervisor (bucle 111):
   el mismo ámbar del renglón que nombra lo que falta, porque es lo mismo
   —algo que alguien tiene que contestar—, y la casilla de lo que vio, ancha:
   es lo que se lee dentro de un año. */
.conteo .por-firmar { background: #fffbeb; }
.conteo .por-firmar .pregunta { display: block; margin-bottom: 0.4rem; }
.conteo .por-firmar form { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem;
  margin: 0 0 0.3rem; }
.conteo .por-firmar input[name="razon"] { flex: 1 1 24rem; font-size: 1rem;
  padding: 0.3rem 0.5rem; border: 1px solid #9ca3af; margin: 0; }
.conteo .por-firmar button { font-size: 1rem; padding: 0.3rem 1.2rem;
  margin: 0; }
.historia-tope .listado { margin-bottom: 0; }

/* ------------------------------------------------------ la bolsa (§5.2) */
/* Apartar: debajo del verde y delineado en azul. No es el camino normal
   —cobrar y entregar lo es— y no destruye nada: aparta. */
.el-carrito .apartar { margin: 0.9rem 0 0; }
.el-carrito .apartar button { width: 100%; border: 1px solid #1f4e79;
  background: #fff; color: #1f4e79; padding: 0.55rem 1rem; font-size: 1rem; }
/* El recibo de una venta apartada lleva la bolsa dentro: su código grande y
   el camino a la etiqueta. */
.bolsa-nueva { margin: 1rem 0; }
.bolsa-nueva .bloqueado { color: #1f4e79; font-size: 1.2rem; }
.bolsa-nueva .codigo-bolsa { font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em; }
.bolsa-nueva .acciones { margin: 0.8rem 0 0; }
.boton { display: inline-block; padding: 0.55rem 1.4rem; background: #1f4e79;
  color: #fff; text-decoration: none; font-size: 1.05rem; }
/* El cartel de la barra: quién tiene bolsas en la calle. Ámbar como el de
   revisiones — es algo que mirar, no algo que salió mal — y al lado de
   Salir, en rojo, lo que esta cuenta se llevaría sin contestar. */
.bolsas-barra { background: #fde68a; }
/* La bolsa de faltante (bucle 58, §5.4.7): lo que se puede llenar ahora
   mismo va en verde en la barra — es trabajo que hacer hoy, no algo que
   salió mal — y no se va hasta que se llene. En el mostrador, lo que se le
   debe al hombre va **antes** del carrito, con borde verde: lo primero que
   se hace con él delante es pagarle lo que ya pagó. */
.faltantes-barra { background: #bbf7d0; color: #14532d; }
.panel.deuda { border-left: 4px solid #166534; margin-bottom: 1.2rem; }
.panel.deuda h3 { color: #14532d; }
.panel.deuda .bloqueado { color: #14532d; }
/* Lo que trae de su traslado mientras espera que aprueben que es él (bucle
   65): todavía no es trabajo que hacer —no se le puede entregar—, así que
   no va en verde sino en el ámbar de lo que espera. */
.panel.deuda.en-camino { border-left-color: #b45309; }
.panel.deuda.en-camino h3,
.panel.deuda.en-camino .bloqueado { color: #92400e; }
/* En la pantalla del que llega (bucle 66), del ancho de las tarjetas de
   arriba: Nelson vio el panel ámbar más ancho que «Entró, y espera». */
.panel.deuda.en-la-llegada { box-sizing: border-box; width: 30rem;
  max-width: 100%; }
.listado form.entregar-ahora { display: inline-block; margin-right: 0.5rem; }
.listado form.entregar-ahora button.entregada { width: auto; margin-top: 0;
  font-size: 0.9rem; padding: 0.35rem 0.9rem; white-space: nowrap; }
.faltantes .listado .departamento,
.faltantes .listado td.producto { white-space: nowrap; }
.faltantes .listado td.donde { white-space: normal; }
.listado td.donde .parte { white-space: nowrap; }
.recibo .se-deben { display: block; color: #b45309; font-size: 0.85rem;
  font-weight: 600; white-space: nowrap; }
.deuda-nueva .bloqueado { color: #b45309; }
.faltantes .panel-mias { border-left-color: #166534; }
.estante .a-la-vista { display: block; color: #b45309; font-size: 0.8rem;
  font-weight: 600; white-space: nowrap; }
.faltantes .panel-mias h3 { color: #14532d; }
/* Y el párrafo de esa sección, en su verde (pulido del 2026-09-25). Salía
   en el rojo de `.bloqueado` debajo de un título verde: en rojo se lee
   «algo salió mal», y lo que dice es que hoy hay trabajo que hacer. Es la
   misma regla que ya tenía el panel «Se le debe» del mostrador. */
.faltantes .panel-mias .bloqueado { color: #14532d; }
.barra .sin-confirmar { color: #fecaca; font-weight: 600; margin-right: 0.8rem;
  font-size: 0.95rem; }
/* La lista: tres mesas. Lo que está en tránsito con esta cuenta va arriba y
   con borde rojo, porque es lo único que la puerta espera de ella. */
.bolsas .caja-escaneo { margin-bottom: 1.2rem; }
.panel-mias { border-left: 4px solid #b91c1c; }
.panel-mias h3 { color: #7f1d1d; }
.listado form { display: inline; margin: 0 0.4rem 0 0; }
.listado form button { font-size: 0.9rem; padding: 0.35rem 0.9rem; border: 0;
  background: #1f4e79; color: #fff; cursor: pointer; }
.listado form button.entregada { background: #166534; }
.listado .donde { white-space: nowrap; }
.listado .con-quien { color: #92400e; font-size: 0.9rem; }
/* La bolsa sola: el hombre a la izquierda con dónde está hoy en grande, lo
   que lleva y los momentos a la derecha. */
.rejilla-bolsa { grid-template-columns: 20rem minmax(0, 1fr); }
.una-bolsa .estado-bolsa { margin: 0 0 1rem; font-size: 1.1rem; }
.una-bolsa .estado-bolsa strong { color: #1f4e79; }
.una-bolsa .donde-grande { margin: 0.4rem 0 0.8rem; font-size: 1.5rem;
  font-weight: 700; line-height: 1.2; }
.una-bolsa .se-fue { color: #7f1d1d; font-weight: 600; }
.momentos { list-style: none; margin: 0; padding: 0; }
.momentos li { padding: 0.4rem 0; border-bottom: 1px solid #e5e7eb; }
.momentos li:last-child { border-bottom: 0; }
.momentos .cuando { color: #4b5563; font-size: 0.9rem; margin-left: 0.5rem; }
.momentos .razon-corta { display: block; color: #92400e; font-size: 0.9rem; }
.panel form > button.entregada { background: #166534; font-size: 1.15rem;
  width: 100%; }
.regreso { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.regreso .opcion { display: block; margin: 0.35rem 0; }
.regreso .opcion input { margin-right: 0.5rem; }
.regreso textarea { width: 100%; box-sizing: border-box; font: inherit;
  padding: 0.4rem 0.5rem; border: 1px solid #9ca3af; }
.regreso > button { margin-top: 0.6rem; border: 1px solid #b45309;
  background: #fff; color: #92400e; padding: 0.55rem 1.2rem; font-size: 1rem;
  cursor: pointer; }
/* La etiqueta de la bolsa: la misma etiqueta de 58 × 25 que la banda, sin
   fotografía y sin PIN — el nombre, dónde estaba cuando se armó, y las
   barras, más anchas que en la banda para que cada barra mida lo mismo. */
.etiqueta-bolsa .datos { padding-left: 1mm; }
.etiqueta-bolsa .donde { font-family: Arial, Helvetica, sans-serif;
  font-size: 2.8mm; font-weight: 600; margin-bottom: 0.6mm; white-space: nowrap;
  overflow: hidden; }
/* El código del centro penal va chico, al lado de los dígitos: la bolsa no
   viaja con el hombre como la banda, y el código dice de qué mostrador salió. */
.etiqueta-bolsa .digitos .carcel { margin-left: 3mm; letter-spacing: 0;
  font-family: Arial, Helvetica, sans-serif; font-size: 2.2mm; color: #374151; }

/* ============================================ el tablero y el panel (bucle 46)
 *
 * Nelson, 2026-09-19, sobre la pantalla que habia hasta hoy: «*as of right now
 * that interface after log in is Hideous*». Lo que pidio en su lugar: los
 * iconos de una tinta, los grupos con su titulo en versalitas, y una regla que
 * aqui ya se seguia sin nombrarla — «*critical items retain an explicit visual
 * marker — not a colored tile*».
 */

/* La cuadricula de todas las pantallas de adentro: la barra arriba de lado a
   lado, el panel a la izquierda y el trabajo a la derecha. Se arma aqui y no
   con divs anidados en el HTML para que el panel siga siendo un hermano de
   `main`: si esta hoja no cargara, saldria debajo de la barra y encima del
   contenido — feo, pero entero y en su orden (DISENO §10). */
body { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: 100%;
  align-content: start; }
.barra { grid-column: 1 / -1; }
.lateral { grid-column: 1; grid-row: 2; }
main { grid-column: 2; grid-row: 2; }
/* Entrar y la pantalla de bloqueo no llevan panel —la de bloqueo a proposito:
   detras de ella no se ve el trabajo— asi que ocupan las dos columnas y la
   tarjeta vuelve a caer en el centro. */
.entrar { grid-column: 1 / -1; grid-row: 1 / -1; }

/* ------------------------------------------------------------ el panel */
.lateral { background: #fff; border-right: 1px solid #d1d5db;
  padding: 0.9rem 0 2rem; min-height: 100%; box-sizing: border-box; }
.lateral .titulo-panel { margin: 0 0 0.6rem 1.1rem; font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: #6b7280;
  font-weight: 700; }
.lateral .renglon { display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 1.1rem; color: #111; text-decoration: none;
  border-left: 3px solid transparent; font-size: 0.95rem; }
.lateral .renglon:hover { background: #f3f4f6; }
.lateral .renglon .icono { color: #1f4e79; flex: 0 0 auto; }
/* Donde esta el oficial ahora mismo. Un panel que no lo dice hay que leerlo
   entero cada vez. */
.lateral .aqui { background: #eef2f7; border-left-color: #1f4e79;
  color: #1f4e79; font-weight: 600; }
/* Apagado: con el conteo de la manana pendiente, la puerta manda a /conteo de
   todas formas, asi que el enlace seria un boton que rebota. Se ensena
   apagado y no se esconde (convencion del 09-13). */
.lateral .apagado { color: #9ca3af; cursor: default; }
.lateral .apagado:hover { background: transparent; }
.lateral .apagado .icono { color: #c2c8d0; }

/* ---------------------------------------------------------- las cifras */
main.tablero { max-width: 72rem; }
.tablero h2 { margin: 0 0 0.2rem; font-size: 1.7rem; }
.tablero > .pie { margin: 0 0 1.5rem; max-width: none; }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; margin-bottom: 1.8rem; }
.cifra-tablero { background: #fff; border: 1px solid #d1d5db;
  padding: 1rem 1.2rem; text-align: center; }
.cifra-tablero strong { display: block; font-size: 2rem; font-weight: 700;
  color: #1f4e79; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra-tablero span { display: block; margin-top: 0.2rem; font-size: 0.85rem;
  color: #4b5563; }

/* ---------------------------------------------------------- las puertas */
.grupo { margin-bottom: 1.8rem; }
.versalitas { margin: 0 0 0.8rem; padding-bottom: 0.4rem; font-size: 0.78rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: #6b7280;
  font-weight: 700; border-bottom: 1px solid #e5e7eb; }
.puertas { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.puerta { display: block; background: #fff; border: 1px solid #d1d5db;
  border-left: 4px solid #d1d5db; padding: 1rem 1.2rem 1.1rem;
  text-decoration: none; color: #111; }
.puerta:hover { border-color: #1f4e79; }
.puerta .cabeza { display: flex; align-items: center; gap: 0.7rem; }
.puerta .cabeza .icono { color: #1f4e79; flex: 0 0 auto; }
.puerta h3 { margin: 0; font-size: 1.05rem; color: #1f4e79; font-weight: 600; }
.puerta p { margin: 0.6rem 0 0; color: #4b5563; font-size: 0.9rem;
  line-height: 1.35; }
/* La marca de que ahi hay algo. Un renglon, no la tarjeta pintada: un tablero
   de colores se lee como un adorno y deja de avisar. */
.puerta .marca { display: block; margin-top: 0.8rem; font-size: 0.9rem;
  color: #4b5563; }
.puerta .marca .cifra { margin-right: 0.4rem; font-size: 1.15rem;
  font-weight: 700; font-variant-numeric: tabular-nums; }
/* Ambar: algo que hacer. Rojo: algo que esta mal. La misma convencion de toda
   la aplicacion desde el 09-13. */
.puerta.avisa { border-left-color: #d97706; }
.puerta.avisa .marca { color: #92400e; font-weight: 600; }
.puerta.urge { border-left-color: #b91c1c; }
.puerta.urge .marca { color: #7f1d1d; font-weight: 600; }

/* En un monitor estrecho el panel se queda en los dibujos, y mas abajo se va
   del todo: el trabajo manda, y la barra de arriba sigue llevando a Inicio. */
@media (max-width: 68rem) {
  body { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .lateral .titulo-panel { display: none; }
  .lateral .renglon { justify-content: center; padding: 0.6rem 0; gap: 0; }
  .lateral .renglon span { display: none; }
}
@media (max-width: 48rem) {
  body { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  main { grid-column: 1; }
  .cifras { grid-template-columns: minmax(0, 1fr); }
}

/* La campana de la barra (bucle 50): lo que a esta cuenta le toca contestar
   hoy. Va pegada al nombre y no entre los avisos, porque no es un aviso de
   algo que pasó: es una cuenta de trabajo que es suyo. El número va encima y
   a la derecha del dibujo, como una notificación, que es la forma que Nelson
   pidió y la que cualquiera reconoce sin que se la expliquen. */
.barra .campana {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 0.85rem;
  color: #fff;
  text-decoration: none;
}
.barra .campana .icono { width: 1.35rem; height: 1.35rem; }
.barra .campana .cuantas {
  position: absolute;
  top: -0.35rem;
  right: -0.5rem;
  min-width: 1.05rem;
  padding: 0 0.22rem;
  border-radius: 0.6rem;
  background: #b91c1c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}
.barra .campana:hover .cuantas { background: #991b1b; }

/* La campana de quien cuenta (bucle 51): lo que hay que recontar. Va en
   ámbar y no en rojo porque es trabajo que hacer, no algo que salió mal —
   la convención del 09-13 —, y porque no para nada: el oficial sigue
   vendiendo. */
.barra .campana-recuento .cuantas { background: #b45309; }
.barra .campana-recuento:hover .cuantas { background: #92400e; }
/* **La campana, a la derecha y pegada al nombre** — arreglado en el bucle
   51, venía mal desde el 50. Nelson la pidió «*on top of the his name on the
   top right of the screen*», y salió a la izquierda, al lado del logotipo: el
   nombre (`.quien`) es el que lleva el `margin-left: auto` que empuja todo a
   la derecha, y la campana va antes que él en el HTML, así que se quedaba
   atrás con los avisos. La caminata comprobaba que la campana estuviera y
   tuviera número, y no **dónde**. Ahora, cuando hay campana, el empujón lo
   lleva ella y el nombre va justo detrás. */
.barra .campana { margin-left: auto; margin-right: 0; }
.barra .campana + .quien { margin-left: 0; }
/* Los dos botones de la novedad del conteo, uno al lado del otro y cada uno
   con lo que hace escrito debajo. Los dos son respuestas buenas; lo que
   cambia es qué pasa después, y eso es lo que se lee. */
.dos-botones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem; margin-top: 0.6rem; }
.dos-botones button { width: 100%; font-size: 1.05rem; padding: 0.6rem 1rem;
  border: 0; background: #166534; color: #fff; }
.dos-botones .campo-ayuda { display: block; margin-top: 0.35rem; }
/* «Si cuadró, ¿qué lo explica?» (bucle 129): la lista fija de «Cuadró», una
   opción por renglón y lo que quiere decir al lado, antes de los dos
   botones. Sin marco: es parte del mismo formulario. Y sin la clase
   `campo`, que pone cada casilla a todo lo ancho: un botón de radio a todo
   lo ancho se va lejos de su nombre. */
.explica { border: 0; padding: 0; margin: 0 0 0.9rem; }
.explica legend { font-weight: 600; padding: 0; margin-bottom: 0.35rem; }
.explica .opcion { display: block; margin: 0.35rem 0; }
.explica .opcion input { margin-right: 0.5rem; }
.explica .opcion .que { font-weight: 600; }
.explica .opcion .campo-ayuda { display: inline; margin-left: 0.35rem; }
.veredicto { margin: 0 0 0.6rem; font-weight: 600; color: #1f2937; }
.panel.subio { border-left: 4px solid #b45309; }
.recuento { margin: 0 0 0.9rem; }
@media (max-width: 760px) {
  .dos-botones { grid-template-columns: minmax(0, 1fr); }
}
/* El conteo del camión (bucle 59, §5.4.8). El panel de la segunda firma es
   un panel con sus dos casillas etiquetadas, no un renglón apretado: el
   supervisor está de pie al lado y tiene que ver dónde escribe. Va con
   borde azul, como lo que no es un error sino un acto. El portón cerrado
   —sin conteo no hay formulario— va en ámbar: es algo que hacer, no algo
   que salió mal. */
.panel.firma-panel { border-left: 4px solid #1f4e79; margin-top: 1.2rem; }
.panel.firma-panel h3 { color: #1f4e79; }
.panel.firma-panel .rejilla-factura {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.conteo.del-camion .firma-panel { margin: 1rem 0; }
.conteo .firma-panel input, .conteo .firma-panel select { width: 100%;
  box-sizing: border-box; }
.aviso.sin-conteo { max-width: 46rem; margin-bottom: 1.2rem;
  border-left: 4px solid #b45309; }
.aviso.sin-conteo .bloqueado { color: #b45309; }
.aviso.sin-conteo .pie-botones { margin-top: 0.8rem; }
/* Un botón de enlace dentro de un pie de botones sigue siendo un botón:
   `.pie-botones a` lo pintaba de azul sobre verde y no se leía — el del
   portón cerrado (lo vio la captura 88) y los dos del inventario (los vio
   Nelson, 2026-09-25). */
.pie-botones a.boton { color: #fff; }
.panel.conteo-de-antes { border-left: 4px solid #166534; }
.panel.conteo-de-antes h3 { color: #14532d; }
.listado td.ya-habia { color: #6b7280; }
.su-camion { margin-top: -0.4rem; }
.testigos { margin-top: -0.4rem; }
/* La puerta de la libertad (bucle 62, §5.7): cinco pasos en el orden en que
   se hacen, cada uno en su tarjeta y con su número, para que el oficial vea
   de un vistazo cuál falta. Lo que ya no tiene nada que hacer se lee en
   verde; el botón de la salida sigue rojo, porque cierra algo. El hombre a
   la izquierda y los pasos a la derecha, como en el mostrador: a lo ancho
   del monitor, todo a la vista sin bajar (desktop first). */
main.la-puerta { max-width: 84rem; }
.puerta-rejilla { display: grid; gap: 1.5rem; align-items: start;
  margin-top: 0.8rem;
  grid-template-columns: minmax(16rem, 19rem) minmax(0, 60rem); }
.puerta-rejilla > .tarjeta-perfil { flex-direction: column; width: auto;
  margin: 0; }
.puerta-rejilla > .tarjeta-perfil .columna-cara { width: 100%; }
@media (max-width: 1099px) {
  .puerta-rejilla { grid-template-columns: minmax(0, 1fr); }
}
ol.pasos-de-la-puerta { margin: 0; padding-left: 1.6rem; }
ol.pasos-de-la-puerta > li { margin: 0 0 1rem; }
ol.pasos-de-la-puerta > li::marker { font-weight: 700; color: #1f4e79; }
ol.pasos-de-la-puerta .hecho { color: #14532d; margin: 0; }
ol.pasos-de-la-puerta ul.sus-bolsas { margin: 0; padding-left: 1.2rem; }
ol.pasos-de-la-puerta ul.sus-bolsas li { margin: 0.3rem 0; }
ol.pasos-de-la-puerta .codigo-bolsa { font-family: ui-monospace, Menlo,
  monospace; letter-spacing: 0.06em; }
ol.pasos-de-la-puerta form.entregar-ahora,
ol.pasos-de-la-puerta form.pasar-al-saldo { display: inline-block;
  margin: 0.4rem 0 0 0.6rem; }
ol.pasos-de-la-puerta form.pasar-al-saldo { margin-left: 0; }
ol.pasos-de-la-puerta button.entregada { width: auto; font-size: 0.95rem;
  padding: 0.4rem 1rem; border: 0; background: #166534; color: #fff; }
ol.pasos-de-la-puerta form.salida button[disabled] { background: #9ca3af;
  cursor: not-allowed; }
ol.pasos-de-la-puerta form.salida .campo-ayuda { display: block;
  margin-top: 0.4rem; }
/* La constancia de salida es un recibo: la misma tarjeta blanca, y sus
   secciones sin marco propio, para que se lea de arriba abajo. */
.constancia .panel { border: 0; padding: 0; margin: 1rem 0; }
.constancia ul.se-llevo { margin: 0; padding-left: 1.2rem; }
.constancia .hecho { color: #4b5563; margin: 0; }
/* En el libro del INP, lo no entregado entra como un depósito: en verde. */
table.movimientos tr.no-entregado td.monto:not(.saldo) { color: #166534; }
/* La venta de la salida (bucle 63, §5.7). El alto en la puerta es lo que
   Nelson pidió como «emergency pop up»: no una ventana del navegador —las
   bloquea y le quita el foco al escáner— sino un bloque rojo a lo ancho,
   como la pantalla de la restricción, que no se puede no ver. El botón que
   lleva al comisariato de la salida es grande y es el único camino. */
.alto-salida { background: #7f1d1d; color: #fff; padding: 1.1rem 1.3rem;
  margin: 0 0 0.8rem; border-left: 8px solid #fca5a5; }
.alto-salida .alto-titulo { margin: 0 0 0.5rem; font-size: 1.35rem;
  font-weight: 700; }
.alto-salida p { margin: 0 0 0.6rem; }
.alto-salida .dinero { color: #fff; font-size: 1.3rem; }
a.boton-alto { display: inline-block; background: #fff; color: #7f1d1d;
  font-weight: 700; font-size: 1.1rem; padding: 0.6rem 1.4rem;
  text-decoration: none; margin-top: 0.2rem; }
a.boton-alto:hover { background: #fee2e2; }
.imprimir-constancia a.boton-alto { background: #1f4e79; color: #fff; }
.imprimir-constancia a.boton-alto:hover { background: #2a6496; }
.imprimir-constancia { margin: 1.2rem 0; }
.imprimir-constancia .campo-ayuda { display: block; margin-top: 0.4rem; }
.perfil .imprimir-constancia { margin: 1rem 0 0; }
/* El hombre que ya no está (bucle 63): un bloque rojo arriba de todo el
   expediente, como el alto de la puerta, que no se puede no ver antes de
   leer nada más. Nelson: «something that pops out knowing he is no longer
   there». Y el botón de volver, verde: abre el camino del que vuelve. */
.ya-no-esta { background: #7f1d1d; color: #fff; padding: 1.1rem 1.3rem;
  margin: 0 0 1rem; border-left: 8px solid #fca5a5; }
.ya-no-esta .alto-titulo { margin: 0 0 0.5rem; font-size: 1.5rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.ya-no-esta p { margin: 0 0 0.4rem; }
.ya-no-esta p:last-child { margin-bottom: 0; }
.ya-no-esta .por-que { font-weight: 600; }
.perfil form.volvio { margin: 1rem 0 0; }
.perfil form.volvio button { font-size: 1.05rem; padding: 0.6rem 1.4rem;
  border: 0; background: #166534; color: #fff; font-weight: 700; }
.perfil form.volvio button:hover { background: #15803d; }
.perfil form.volvio .campo-ayuda { display: block; margin-top: 0.4rem; }
/* El comisariato de la salida es el mostrador con el aviso arriba y un
   solo botón; el botón apagado se lee apagado, como el de la puerta. */
.comisariato-salida .sale-libre { border-left: 4px solid #7f1d1d;
  background: #fef2f2; color: #7f1d1d; }
.el-carrito button.cobrar[disabled] { background: #9ca3af;
  cursor: not-allowed; }
.el-carrito .cancelar a { color: #b91c1c; }
/* La hoja que se imprime: dos copias tamaño carta. En pantalla, dos hojas
   blancas una debajo de la otra; en papel, cada una en su página, y el
   botón no sale. El tamaño de hoja lo pone la cabecera de esa pantalla,
   porque el @page de arriba es el de la etiqueta de 58 × 25 mm. */
main.impresa { max-width: 56rem; background: transparent; border: 0;
  box-shadow: none; padding: 0; }
.impresa .imprimir { font-size: 1.1rem; padding: 0.6rem 1.4rem; border: 0;
  background: #1f4e79; color: #fff; }
.impresa .hoja { background: #fff; color: #111827; border: 1px solid #d1d5db;
  padding: 14mm 16mm; margin: 0 0 1.5rem; font-size: 0.88rem;
  line-height: 1.35; }
.impresa .hoja-cabecera { display: flex; justify-content: space-between;
  border-bottom: 2px solid #111827; padding-bottom: 0.4rem;
  margin-bottom: 1rem; font-size: 0.85rem; letter-spacing: 0.04em;
  text-transform: uppercase; }
.impresa .copia-de { font-weight: 700; }
.impresa .reimpresa { font-weight: 700; color: #7f1d1d; margin: 0 0 0.6rem;
  letter-spacing: 0.06em; }
.impresa h1 { font-size: 1.5rem; margin: 0 0 0.3rem; }
/* **La fecha va en el renglón del título** (bucle 70). Con el nombre del INP,
   «Penitenciaría Nacional Doctor Marco Aurelio Soto (PNMAS), Támara», el
   renglón del centro penal con la estancia y la fecha se partía en dos, y la
   constancia de Támara salía en tres hojas en vez de dos. Al lado del título
   hay sitio; así el centro penal y su estancia caben en un renglón, como
   antes, también con el nombre más largo de la lista. */
.impresa h1 { display: flex; justify-content: space-between;
  align-items: baseline; gap: 1rem; }
.impresa h1 .hoja-cuando { font-size: 0.95rem; font-weight: 400;
  color: #374151; white-space: nowrap; }
.impresa h2 { font-size: 1rem; margin: 0.9rem 0 0.3rem;
  border-bottom: 1px solid #9ca3af; padding-bottom: 0.15rem; }
.impresa .hoja-datos { margin: 0 0 0.6rem; color: #374151; }
.impresa table.ficha-hoja { border-collapse: collapse; margin: 0 0 0.6rem; }
.impresa table.ficha-hoja th { text-align: left; padding: 0.15rem 1rem
  0.15rem 0; color: #4b5563; font-weight: 400; }
.impresa table.listado { width: 100%; }
.impresa ul.se-llevo { margin: 0; padding-left: 1.2rem; }
.impresa .panel { border: 0; padding: 0; margin: 0.5rem 0; }
.impresa .panel h3 { font-size: 1rem; margin: 0.9rem 0 0.3rem; color: #111827;
  border-bottom: 1px solid #9ca3af; padding-bottom: 0.15rem; }
.impresa .panel p, .impresa .saldo-despues { margin: 0.3rem 0; }
.impresa .hoja-nota { color: #374151; font-size: 0.85rem; }
/* Las firmas no se parten entre dos hojas: una firma en una pagina y su
   nombre en la siguiente no es una firma. */
.impresa .firmas { display: flex; gap: 2rem; margin-top: 2.2rem;
  page-break-inside: avoid; break-inside: avoid; }
.impresa .firma { flex: 1; border-top: 1px solid #111827; padding-top: 0.3rem;
  font-size: 0.85rem; color: #374151; }
.impresa .hoja-pie { margin-top: 1rem; font-size: 0.78rem; color: #6b7280; }
@media print {
  main.impresa { max-width: none; margin: 0; }
  .impresa .no-imprimir, .impresa .vigilante { display: none !important; }
  .impresa .hoja { border: 0; margin: 0; padding: 0;
    page-break-after: always; }
  .impresa .hoja:last-child { page-break-after: auto; }
}
/* La hoja del cuadre (bucle 75): una sola hoja larga que el navegador parte
   en las páginas que hagan falta. Una gráfica, una tabla, un renglón o un
   panel corto —los que más tienen, los libros, lo de afuera— no se parten
   entre dos páginas (una tabla más alta que una hoja se parte igual), y un
   título no se queda solo al pie de una; la tabla gemela va abierta y sin
   su «Los números de esta gráfica», que en papel no se puede pulsar. El
   veredicto conserva su verde o su rojo. */
.impresa.cuadre .hoja-sacada { font-size: 0.85rem; }
@media print {
  .impresa.cuadre .grafica, .impresa.cuadre table.listado tr,
  .impresa.cuadre .veredicto, .impresa.cuadre .panel.corto,
  .impresa.cuadre table.listado { break-inside: avoid;
    page-break-inside: avoid; }
  /* Las dos que pueden llevar páginas —los centros penales del país y el
     estante producto por producto— sí se parten, renglón por renglón. */
  .impresa.cuadre table.listado.larga { break-inside: auto;
    page-break-inside: auto; }
  .impresa.cuadre h3 { break-after: avoid; page-break-after: avoid; }
  .impresa.cuadre .tabla-de-la-grafica summary { display: none; }
  /* En carta, la tabla de las cuentas tiene nueve columnas y la del país
     ocho: si sus encabezados no bajan de línea y la primera columna no
     tiene su sitio, el nombre del oficial o del centro penal se parte en
     tres o cuatro renglones. */
  .impresa.cuadre .listado th.cuantos, .impresa.cuadre .listado th.cifra {
    white-space: normal; }
  .impresa.cuadre table.cuentas-del-dia td:first-child { min-width: 10rem; }
  .impresa.cuadre .listado td.carcel { min-width: 13rem; }
  .impresa.cuadre .veredicto { -webkit-print-color-adjust: exact;
    print-color-adjust: exact; }
}
/* En el libro del INP, el cobro de la salida se lee como un cobro, con su
   palabra: la fila lleva la clase para que una prueba la encuentre. */
table.movimientos tr.cobro-al-salir td:nth-child(2) { font-weight: 700; }
/* ------------------------------------------------- el traslado (bucle 64) */
/* El botón que un formulario mete dentro de una tarjeta de aviso —el
   Confirmar de un proveedor sin confirmar— llevaba la cara del navegador:
   ninguna regla lo alcanzaba. Nelson lo vio el 2026-10-02. La misma cara que
   el botón de un panel. */
.aviso-tarjeta form > button { font-size: 1.05rem; padding: 0.6rem 1.6rem;
  border: 0; background: #166534; color: #fff; margin-top: 0.6rem;
  cursor: pointer; }
.aviso-tarjeta form > button:hover { background: #15803d; }
/* Antes de registrar el traslado: el nombre del centro penal en grande, y la
   pregunta en grande. Se lee antes de apretar. */
.confirmar-traslado .destino-grande strong { font-size: 1.5rem; display: block;
  line-height: 1.25; }
.confirmar-traslado .alto-titulo { margin: 0.6rem 0 0.4rem; font-size: 1.5rem;
  font-weight: 700; }
/* Todo lo que va a pasar, dentro de la misma tarjeta, debajo de la cara y
   de la ficha: una sola tarjeta blanca, y el botón al final de ella. */
.confirmar-traslado .tarjeta-perfil table.ficha { flex: 1 1 22rem; min-width: 0; }
.confirmar-traslado .lo-que-pasa { flex-basis: 100%; margin: 0; }
.confirmar-traslado .lo-que-pasa p { max-width: 48rem; }
.confirmar-traslado form.confirmar-traslado { margin: 1rem 0 0; }
.confirmar-traslado form.confirmar-traslado button { font-size: 1.15rem;
  padding: 0.75rem 1.6rem; border: 0; background: #b91c1c; color: #fff;
  cursor: pointer; }
.confirmar-traslado form.confirmar-traslado button:hover { background: #991b1b; }
.confirmar-traslado ul.viaja { margin: 0.4rem 0 0.8rem; padding-left: 1.3rem; }
/* La puerta equivocada ya avisó: se dice en un bloque, no en una nota. */
.avisado { background: #7f1d1d; color: #fff; padding: 0.8rem 1rem;
  margin: 0.8rem 0 0; border-radius: 8px; }
/* La bolsa que vino con él de su traslado lo dice en su renglón, en el
   mostrador y en la lista; en la lista puede partirse en dos renglones,
   porque el nombre de un centro penal es largo. */
.deuda .de-traslado,
.faltantes .listado .de-traslado { color: #7f1d1d; font-weight: 600; }
.faltantes .listado .de-traslado { white-space: normal; }
.traslados table.listado td.pin { font-variant-numeric: tabular-nums; }
/* ----------------------------- la lista de los hombres (bucle 78) */
/* La caja busca nombres además de números: ancha, como la del INP. Las
   pestañas son enlaces con su número; la de ahora se lee como la de ahora,
   y «Sin banda» lleva el ámbar de «hay algo que hacer» solo cuando hay
   alguno: un cero no avisa. */
.los-hombres .caja-escaneo input { width: 26rem; max-width: 100%;
  font-size: 1.3rem; }
.los-hombres nav.pestanas { display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin: 1.2rem 0 0.8rem; border-bottom: 2px solid #d1d5db; }
.los-hombres nav.pestanas a { padding: 0.5rem 1rem; color: #1f4e79;
  text-decoration: none; border: 1px solid transparent; border-bottom: 0;
  border-radius: 6px 6px 0 0; margin-bottom: -2px; }
.los-hombres nav.pestanas a:hover { background: #e5e7eb; }
.los-hombres nav.pestanas a.aqui { background: #fff; color: #111;
  font-weight: 600; border-color: #d1d5db; border-bottom: 2px solid #fff; }
.los-hombres nav.pestanas .cuantos { margin-left: 0.25rem; color: #4b5563;
  font-variant-numeric: tabular-nums; }
.los-hombres nav.pestanas a.avisa .cuantos { color: #92400e;
  font-weight: 700; }
.los-hombres .que-es { max-width: 48rem; }
.los-hombres .lista-de-hombres td { vertical-align: top; }
.los-hombres .lista-de-hombres td.codigo { white-space: nowrap; }
.los-hombres .lista-de-hombres td.sin-banda { color: #92400e;
  font-weight: 600; white-space: nowrap; }
.los-hombres .vacio { color: #6b7280; font-style: italic; }
.los-hombres .paginas { margin: 0.4rem 0 1rem; }

/* La marca (bucle 81, DISENO §8): lo que quien mira puede ver de ese hombre,
   escrito encima de su fotografía, abajo a la derecha. La fotografía guardada
   no la lleva —la dibuja la página—, así que va **encima** de la imagen.
   Letra blanca, un poco transparente, sin caja: Nelson, al aterrizarla, «just
   take the black square and leave the print white and a little more
   transparent». Cada letra lleva un borde oscuro fino: sin él, en una pared
   clara o una camisa clara la letra blanca no se ve, y una marca que no se lee
   no sirve. Un nombre largo parte en dos renglones antes que cortar el PIN. */
.con-marca { position: relative; display: block; line-height: 0; }
.con-marca > img { display: block; }
.con-marca > .marca { position: absolute; right: 0.3rem; bottom: 0.3rem;
  max-width: calc(100% - 0.6rem); box-sizing: border-box;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.7);
  font-size: 0.78rem; font-weight: 600; line-height: 1.25; text-align: right;
  overflow-wrap: anywhere; pointer-events: none; }
/* En las caras chicas de antes, debajo de la grande del portón: más chica. */
.caras-viejas .con-marca > .marca { font-size: 0.6rem; right: 0.15rem;
  bottom: 0.15rem; max-width: calc(100% - 0.3rem); }
@media print {
  .con-marca > .marca { -webkit-print-color-adjust: exact;
    print-color-adjust: exact; }
}

/* La restricción (bucle 83, DISENO §5.5). Mientras corre, el expediente se
   abre en rojo: el mismo bloque que el del hombre que ya no está, arriba de
   todo, con la hora exacta del final en grande —«the exact end time in large
   letters»—; su cara sigue debajo, en la tarjeta, para que el oficial sepa
   que es él. */
.restringido { background: #7f1d1d; color: #fff; padding: 1.1rem 1.3rem;
  margin: 0 0 1rem; border-left: 8px solid #fca5a5; }
.restringido .alto-titulo { margin: 0 0 0.3rem; font-size: 1.5rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.restringido .hasta { margin: 0 0 0.6rem; font-size: 2rem; font-weight: 700;
  line-height: 1.2; }
.restringido p { margin: 0 0 0.4rem; }
.restringido p:last-child { margin-bottom: 0; }
.restringido .por-que { font-weight: 600; }
/* Los dos botones del supervisor, debajo de la tarjeta: rojos, porque lo
   que empiezan no lo quita nadie. */
form.restringir { margin: 1rem 0; padding: 0.9rem 1.1rem;
  border: 1px solid #fecaca; background: #fef2f2; }
form.restringir h3 { margin: 0 0 0.3rem; font-size: 1.1rem; color: #7f1d1d; }
form.restringir p { margin: 0 0 0.7rem; max-width: 48rem; }
form.restringir button { font-size: 1.1rem; padding: 0.65rem 1.6rem;
  margin-right: 0.8rem; border: 0; background: #b91c1c; color: #fff;
  font-weight: 700; cursor: pointer; }
form.restringir button:hover { background: #991b1b; }
/* Antes de restringirlo: las horas y la hora del final en grande, y la
   razón en cuatro botones rojos, uno al lado del otro. */
.confirmar-restriccion .tarjeta-perfil table.ficha { flex: 1 1 22rem;
  min-width: 0; }
.confirmar-restriccion td.cuanto strong { font-size: 1.5rem; display: block;
  color: #7f1d1d; line-height: 1.25; }
.confirmar-restriccion td.cuanto .hasta { font-size: 1.15rem;
  font-weight: 600; }
.confirmar-restriccion .lo-que-pasa { flex-basis: 100%; margin: 0; }
.confirmar-restriccion .lo-que-pasa p { max-width: 48rem; }
.confirmar-restriccion .alto-titulo { margin: 0.8rem 0 0.4rem;
  font-size: 1.5rem; font-weight: 700; }
.confirmar-restriccion form.razones { display: flex; flex-wrap: wrap;
  gap: 0.8rem; margin: 0; }
.confirmar-restriccion form.razones button { font-size: 1.15rem;
  padding: 0.75rem 1.6rem; border: 0; background: #b91c1c; color: #fff;
  font-weight: 700; cursor: pointer; margin-top: 0; }
.confirmar-restriccion form.razones button:hover { background: #991b1b; }
/* Su historia, en su expediente: la que corre, marcada. */
table.restricciones th, table.restricciones td { text-align: left;
  padding: 0.3rem 1.2rem 0.3rem 0; vertical-align: top; }
table.restricciones tr.corre td { color: #7f1d1d; font-weight: 700; }
table.restricciones th:nth-child(-n+4),
table.restricciones td:nth-child(2),
table.restricciones td:nth-child(3) { white-space: nowrap; }
/* **Cambiar de lugar** y **Dónde ha estado** (bucle 148, DISENO §5.6.1):
   en su expediente, debajo de la descripción y antes de las restricciones.
   Las tres casillas en un renglón cuando caben —Módulo, Celda, Cama, en el
   orden del registro— y una debajo de otra en una ventana angosta. La
   casilla que está mal, con el borde rojo de las otras mesas. La historia,
   como la de las restricciones: cada fecha en dos piezas que no se parten. */
.perfil .panel.cambiar-de-lugar, .perfil .panel.lugares { margin: 0 0 1.2rem; }
.cambiar-de-lugar > p.pie { margin: 0 0 0.8rem; max-width: 48rem; }
.cambiar-de-lugar .tres-casillas { display: grid; gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.cambiar-de-lugar .campo.con-error input { border: 2px solid #b91c1c;
  background: #fef2f2; }
.cambiar-de-lugar form.cambiar-lugar button { margin-top: 0.2rem; }
table.lugares th, table.lugares td { text-align: left;
  padding: 0.3rem 1.2rem 0.3rem 0; vertical-align: top; }
table.lugares td span { white-space: nowrap; }
/* La lista de los restringidos ahora. */
.restringidos .que-es { max-width: 48rem; }
.restringidos table.restringidos { border-collapse: collapse; width: 100%; }
.restringidos table.restringidos th, .restringidos table.restringidos td {
  text-align: left; padding: 0.45rem 1rem 0.45rem 0;
  border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.restringidos table.restringidos td.hasta { color: #7f1d1d;
  font-weight: 700; }
.restringidos table.restringidos td.pin,
.restringidos table.restringidos td:nth-child(5) { white-space: nowrap; }
.restringidos .vacio { color: #6b7280; font-style: italic; }
/* **Las dos mesas, en una ventana angosta** (bucle 83). Nelson vio en su
   Safari, al aterrizar el 83, la historia de un hombre más ancha que su
   panel, con «Quién la puso» cortado a la derecha. Medidas a diez anchos,
   la historia y la lista de los restringidos se salían de su caja a 1280 y
   menos: sus fechas no se partían. Ahora cada fecha va en dos piezas que no
   se parten —el día y la hora (`en_dos_piezas`)—, y «— corre» y dónde
   duerme también, por partes: la mesa parte una línea solo entre una pieza
   y otra. **De 1440 para arriba las fechas van en un renglón, como antes**;
   lo que se parte es el centro penal, el nombre o dónde duerme. Por debajo,
   también la fecha, y en la lista el día entre sus palabras —la hora no—.
   Por debajo de 900, menos aire entre columnas. */
table.restricciones td span,
.restringidos table.restringidos td span { white-space: nowrap; }
@media (min-width: 1440px) {
  table.restricciones td:nth-child(1), table.restricciones td:nth-child(4),
  .restringidos table.restringidos td.hasta { white-space: nowrap; }
}
@media (max-width: 1439px) {
  .restringidos table.restringidos td.hasta span.dia { white-space: normal; }
}
@media (max-width: 899px) {
  table.lugares th, table.lugares td,
  table.restricciones th, table.restricciones td,
  .restringidos table.restringidos th,
  .restringidos table.restringidos td { padding-right: 0.7rem; }
}

/* ------------------------------------------ el álbum de caras (bucle 84) */
/* Las caras de los que ya salieron, para encontrar el PIN del que no dice
   quién es. A lo ancho del monitor —escritorio primero—: los filtros en una
   franja arriba, en el orden en que se ve a un hombre, y las veinte caras
   debajo, en tantas columnas como quepan. Cada tarjeta es la de la
   búsqueda por nombre, con su primera cara pequeña debajo de la última y
   el botón siempre abajo, a la misma altura en toda la fila. */
main.album { max-width: none; }
.album .pie { max-width: 48rem; }
.filtros-album { display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 0.7rem 0.9rem; background: #fff; border: 1px solid #d1d5db;
  padding: 0.9rem 1rem; margin: 0 0 1rem; }
.filtros-album .campo { margin: 0; flex: 0 1 10rem; min-width: 8rem; }
.filtros-album .campo.senas { flex: 1 1 14rem; }
/* El centro penal se lee entero: «Cualquier centro penal», y el nombre
   de uno con su departamento. */
.filtros-album .campo.donde { flex: 1 1 16rem; }
.filtros-album .botones { display: flex; align-items: center; gap: 1rem;
  padding-bottom: 0.15rem; }
.filtros-album button { font-size: 1.05rem; padding: 0.5rem 1.4rem; border: 0;
  background: #1f4e79; color: #fff; cursor: pointer; }
.filtros-album .botones a { color: #1f4e79; white-space: nowrap; }
.album .cuantos-album { margin: 0 0 0.8rem; }
.caras-album { display: grid; gap: 1rem; margin: 0 0 1rem;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.caras-album .un-resultado { width: auto; box-sizing: border-box;
  display: flex; flex-direction: column; }
.caras-album .un-resultado button { margin-top: auto; }
.caras-album .un-resultado figcaption span.salio { display: block;
  color: #4b5563; font-size: 0.85rem; margin-top: 0.15rem; }
.caras-album figure.primera { display: flex; align-items: center;
  gap: 0.6rem; margin: 0 0 0.6rem; }
.caras-album figure.primera > img,
.caras-album figure.primera > .sin-copia { width: 4.5rem; flex: none; }
.caras-album figure.primera figcaption { margin: 0; font-size: 0.85rem;
  color: #4b5563; }
.sin-copia { display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; aspect-ratio: 4 / 5; padding: 0.5rem;
  background: #e5e7eb; color: #4b5563; font-size: 0.85rem;
  text-align: center; }
.caras-album figure.primera > .sin-copia { font-size: 0.65rem;
  padding: 0.2rem; }
.album .paginas { margin: 0.4rem 0 1rem; }
.album .vacio { color: #6b7280; font-style: italic; }
.nadie-album { max-width: 40rem; font-weight: 400; }
.nadie-album p { margin: 0 0 0.4rem; }
.nadie-album p:first-child { font-weight: 700; font-size: 1.05rem; }
.nadie-album p:last-child { margin-bottom: 0; }
.nadie-album a { color: #1f4e79; font-weight: 600; }
.al-album a { font-weight: 600; color: #1f4e79; }

/* Las copias pequeñas (bucle 84): la página del INP que las hace una vez. */
.copias .cuantas-copias { font-size: 1.1rem; margin: 1rem 0; }
.hacer-copias button { font-size: 1.05rem; padding: 0.6rem 1.6rem; border: 0;
  background: #1f4e79; color: #fff; cursor: pointer; }
.hacer-copias .progreso { margin: 0.8rem 0 0; font-weight: 600;
  color: #1f4e79; max-width: 40rem; }

/* ------------------------------------- la categoría del producto (bucle 85) */

/* El título de cada categoría dentro de una mesa de productos —el estante de
   la ventanilla, el conteo, el camión y la lista del INP—: a la izquierda, en
   negrita y con su raya, para que se lea como un título y no como un producto
   más. */
.listado tr.categoria th { padding: 1rem 0.6rem 0.35rem 0; color: #111827;
  font-weight: 700; font-size: 0.95rem; text-align: left;
  border-bottom: 2px solid #d1d5db; }
/* La fila del filtro de la lista del INP: un enlace por categoría, con
   cuántos productos tiene, y el que se está viendo relleno. */
.filtro-categorias { display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0 0 0.9rem; }
.filtro-categorias a { display: inline-block; padding: 0.3rem 0.7rem;
  border: 1px solid #d1d5db; color: #1f4e79; text-decoration: none;
  font-size: 0.9rem; background: #fff; }
.filtro-categorias a .cuantos { color: #6b7280; margin-left: 0.2rem;
  font-variant-numeric: tabular-nums; }
.filtro-categorias a.esta { background: #1f4e79; border-color: #1f4e79;
  color: #fff; }
.filtro-categorias a.esta .cuantos { color: #dbeafe; }
.sin-categoria { margin: 0 0 0.9rem; }
p.sin-categoria { color: #92400e; font-weight: 600; }
/* El panel «Categorías»: solo se lee (bucle 86), las seis con sus productos. */
.categorias .vacio { color: #6b7280; font-style: italic; }
/* **El desplegable de cada renglón** de la lista del INP (bucle 86): debajo
   del nombre y su presentación, a lo ancho de la celda del producto. **Nunca
   más angosto que el nombre más largo de las seis** («Ropa y calzado»): sin
   ese mínimo la mesa lo apretaba hasta 87 puntos a 1280, y un nombre cortado
   es un nombre que no se lee. Y los dos «Guardar las categorías», arriba y
   abajo de la mesa, con lo que contestaron justo encima. */
.lista-nacional .la-suya { display: block; margin-top: 0.35rem; }
.lista-nacional .la-suya select { width: 100%; min-width: 10rem;
  max-width: 16rem; box-sizing: border-box; padding: 0.3rem;
  font-size: 0.9rem; }
form.las-categorias button.guardar-categorias { font-size: 1.05rem;
  padding: 0.6rem 1.6rem; border: 0; background: #166534; color: #fff;
  margin: 0.2rem 0 0.9rem; }
form.las-categorias .pie { margin-top: 0; }
#lo-de-la-mesa { margin: 0 0 0.8rem; }
/* **El aviso junto a su formulario** (bucle 87): lo que contesta un
   formulario del INP sale encima de él, y es lo que recibe el foco al abrir
   la página, para que el navegador lo traiga a la vista. No es un botón:
   sin el anillo del foco. */
.lo-del-formulario { margin: 0 0 0.8rem; outline: none; }
.lo-del-formulario:focus { outline: none; }
.lo-del-formulario .entregar { margin-top: 0.4rem; }
/* La categoría de un producto, en su pantalla. */
.la-categoria { margin-bottom: 1.2rem; }
.la-categoria p { margin: 0 0 0.6rem; }
.la-categoria form.poner-categoria { display: flex; flex-wrap: wrap;
  gap: 0.5rem 0.8rem; align-items: center; }
.la-categoria form.poner-categoria select { min-width: 14rem;
  padding-top: 0.4rem; padding-bottom: 0.4rem; padding-left: 0.4rem;
  font-size: 0.95rem; }
.la-categoria form.poner-categoria button { font-size: 1rem;
  padding: 0.45rem 1.2rem; border: 0; background: #166534; color: #fff; }
.la-categoria form.poner-categoria .campo-ayuda { flex: 1 1 100%; margin: 0; }
/* **La lista del INP en una columna antes que en dos que no caben.** La
   caminata del bucle 85 la midió y la mesa se salía de su caja a 900 y 865
   puntos —al lado del panel de 22rem le quedaban 330 y necesita 424— y también
   de 1090 a 1270, donde el panel de la izquierda de la pantalla se abre entero
   y le quita 279 a la página. Lo que decide es **el ancho de la página y no el
   de la ventana**, así que se pregunta al `main` (una consulta de contenedor):
   por debajo de 940 puntos de contenido, una columna —con el panel de 24rem de
   las pantallas anchas, la mesa necesita 922—. La regla de 900 de
   `.rejilla-inp` está desde antes y nunca se aplicaba —la de 1100 de
   `.rejilla` va después en este archivo y gana—, así que esta lleva las dos
   clases, y se queda la de la ventana para un navegador que no sepa de
   contenedores. Y el precio que viene («desde el …: L …») puede bajar de
   renglón: sin eso, un producto con su precio de mañana ensanchaba la mesa
   entera.
   **Bucle 86:** con el desplegable de cada renglón, que no baja de 10rem, la
   mesa necesita 529 puntos —1028 de contenido, con el panel de 24rem— y se
   salía a 1280, con el panel de la izquierda abierto (947 de contenido), y
   a 1080, sin él (961). Ahora la columna sola empieza por debajo de 1028; la
   de la ventana —para un navegador que no sepa de contenedores—, por
   debajo de 1300. Las dos dicen lo mismo en casi todos los anchos de la
   caminata; a 1340, con el panel abierto, solo la de la página pone la
   lista en una columna, y es ahí donde la caminata ve que falte.
   **Bucle 88:** la misma regla para **toda pantalla con la rejilla del INP**
   —la oficina, los topes, los proveedores, el inventario, una bolsa de
   faltante, una novedad y la lista—: cada `main` que la lleva se mide a sí
   mismo (`con-rejilla-inp`), y por debajo de 1028 puntos de contenido la
   rejilla pasa a una columna. Medidas con la demostración (veinte centros
   penales, 82 cuentas): la mesa de las cuentas necesita 979 de contenido
   para ir en dos columnas, la de los topes que cambió un centro penal 1002,
   la de reponer del inventario 916, la de los proveedores 803; a 1280, con
   el panel de la izquierda abierto, la página tiene 947 y a 1366, 1033. La
   regla de 900 de `.rejilla-inp` que nunca se aplicaba se fue.
   **Bucle 89:** una columna siempre (arriba, `.rejilla.rejilla-inp`), así que
   la consulta de contenedor y la regla de la ventana sobran. Lo que queda de
   `con-rejilla-inp` es el **tope de ancho**: la página deja de crecer a 84rem
   de contenido —1512 puntos—, pegada al panel de la izquierda, para que una
   pantalla entera enseñe lo mismo que un monitor de 1366 y no mesas estiradas
   por 1900 puntos; en un monitor de 1920 sobran unos 75. Y el formulario de
   las cuentas lleva tres casillas por renglón como mucho, nunca seis: su
   rejilla de `auto-fit` para a 54rem. Escogido por Nelson el 2026-10-09:
   «One column always, capped at ~1500». */
main.con-rejilla-inp { max-width: 84rem; }
.con-rejilla-inp .dos-columnas { max-width: 54rem; }
.lista-nacional td.cuantos .departamento { white-space: normal; }
/* La constancia de una recepción (bucle 92): un número que se compara de un
   vistazo contra el papel —TAMARA-R-000012— no se parte en dos renglones, ni
   en la lista de camiones, ni en la página del proveedor, ni en los camiones
   del INP. */
.listado td.constancia { white-space: nowrap; }
/* El supervisor que no está (bucle 93, §5.4.8). Los dos botones van en su
   propio panel, debajo del de guardar con la firma, en ámbar: no es un
   error, es una excepción que se declara. Blancos con el borde ámbar, para
   que ningún ojo los confunda con el botón azul de la firma. La marca «sin
   supervisor» va en rojo donde se lea, y el aviso del supervisor retenido,
   en rojo también: no es trabajo que hacer, es algo que explicar antes de
   seguir. */
.panel.sin-supervisor-panel { border-left: 4px solid #b45309; margin-top: 1.2rem; }
.panel.sin-supervisor-panel h3 { color: #b45309; }
.panel.sin-supervisor-panel .campo { max-width: 32rem; }
.panel.sin-supervisor-panel .pie-botones { margin-top: 0.8rem; flex-wrap: wrap; }
.panel.sin-supervisor-panel button.sin-supervisor { background: #fff;
  color: #b45309; border: 2px solid #b45309; border-radius: 8px;
  padding: 0.55rem 1.4rem; font-size: 1rem; cursor: pointer; }
.panel.sin-supervisor-panel button.sin-supervisor:hover { background: #fef3c7; }
.conteo.del-camion .sin-supervisor-panel { margin: 1rem 0; }
.conteo .sin-supervisor-panel input { width: 100%; box-sizing: border-box; }
strong.sin-supervisor, .pendiente.sin-supervisor { color: #b91c1c; }
.aviso.retenido { max-width: 46rem; margin-bottom: 1.2rem;
  border-left: 4px solid #b91c1c; }
.aviso.retenido .bloqueado { color: #b91c1c; }

/* Restablecer la contraseña (bucle 102, DISENO §4), y desactivar y
   reactivar (bucle 105), al final del renglón de cada cuenta. Desde la
   cuarta ronda de cambios (bucle 147), parejos —el mismo ancho, la misma
   altura, sus esquinas— y uno al lado del otro mientras quepan; donde no,
   uno debajo del otro, del mismo ancho. Nelson, 2026-11-01: *«make the
   buttons rounded and uniform desactivar needs to be a red button and keep
   the color of restablecer la contraseña the same»*. Restablecer y
   reactivar, del azul de siempre; desactivar, rojo —hasta aquí era gris
   oscuro, para que no se confundiera con el de restablecer: el rojo lo
   distingue más, y la pregunta «Sí, desactivar» sigue antes de hacer
   nada—. */
.listado td.hacer { text-align: right; }
.botones-de-la-cuenta { display: flex; flex-wrap: wrap; gap: 0.45rem;
  justify-content: flex-end; }
.listado form.restablecer, .listado form.apagar, .listado form.encender {
  display: block; margin: 0; }
.listado form.restablecer button, .listado form.apagar button,
.listado form.encender button { box-sizing: border-box; width: 14rem;
  height: 2.6rem; border: 0; padding: 0 0.8rem; font-size: 0.95rem;
  font-weight: 600; background: #1f4e79; color: #fff; cursor: pointer;
  line-height: 1.2; text-align: center; white-space: nowrap; }
.listado form.apagar button { background: #b91c1c; }
.listado form.restablecer button:hover, .listado form.encender button:hover {
  background: #2a6496; }
.listado form.apagar button:hover { background: #991b1b; }
/* Lo que dice de la cuenta —desactivada, sin estrenar— va debajo de su
   nombre, en su renglón, y no entre los botones. */
.listado td .estado { display: block; font-size: 0.85rem; }
/* **Un centro penal a la vez** (bucle 147): el total del país, la lista que
   se despliega con su botón «Buscar» —del alto de la lista, como «Mirar» en
   la página del producto dañado; hasta la segunda vista decía «Ver»—, y lo
   escogido en una línea encima de su mesa. «Crear una cuenta», su propia
   tarjeta, debajo. La cara de la lista es la de todas: al final del
   archivo, «Las listas que se despliegan». */
.las-cuentas .total-del-pais { margin: 0 0 0.9rem; color: #4b5563; }
.escoger-centro { display: grid; grid-template-columns: minmax(0, 1fr) 9rem;
  gap: 0.6rem 0.9rem; max-width: 64rem; margin: 0; }
.escoger-centro label { grid-column: 1 / -1; margin: 0; font-weight: 600;
  color: #1f2937; }
.escoger-centro select { width: 100%; box-sizing: border-box; height: 3rem;
  margin: 0; padding: 0 2.8rem 0 1rem; border: 1px solid #9ca3af;
  background-color: #fff; color: #111; font-size: 1rem; }
.panel form.escoger-centro > button { box-sizing: border-box; height: 3rem;
  margin: 0; padding: 0 1rem; border: 2px solid #1f4e79; background: #1f4e79;
  color: #fff; font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.panel form.escoger-centro > button:hover { background: #2a6496;
  border-color: #2a6496; }
.las-cuentas .en-el-servidor { margin: 0.6rem 0 0; }
.las-cuentas .del-centro { margin: 1.4rem 0 0.4rem; font-weight: 600;
  color: #1f2937; }
.las-cuentas .del-centro .codigo { color: #1f4e79; }
.aviso.apagado-o-encendido { max-width: 34rem; margin-bottom: 1.2rem; }
.aviso.apagado-o-encendido .ya-esta { margin: 0; font-size: 1.1rem; }
main.restablecer-clave { max-width: 46rem; margin: 1.5rem; padding: 1.5rem 2rem;
  background: #fff; border: 1px solid #d1d5db; }
.restablecer-clave .que-pasa { max-width: 44rem; }
.restablecer-clave form.confirmar-restablecer { margin: 1rem 0 0; display: flex;
  align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.restablecer-clave form.confirmar-restablecer button { font-size: 1.15rem;
  padding: 0.75rem 1.6rem; border: 0; background: #b91c1c; color: #fff;
  cursor: pointer; }
.restablecer-clave form.confirmar-restablecer button:hover { background: #991b1b; }

/* Un recibo por su número (bucle 102, DISENO §8): la caja arriba, el recibo
   debajo con la mesa de siempre, y la línea de quién, cuándo y cómo. */
.un-recibo form.buscar-recibo { display: flex; align-items: center; gap: 0.8rem;
  flex-wrap: wrap; margin: 0.4rem 0 1.2rem; }
.un-recibo form.buscar-recibo input { font-size: 1.15rem; padding: 0.45rem 0.6rem;
  width: 14ch; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }
.un-recibo form.buscar-recibo button { font-size: 1rem; padding: 0.55rem 1.4rem;
  border: 0; background: #1f4e79; color: #fff; cursor: pointer; }
.un-recibo form.buscar-recibo button:hover { background: #2a6496; }
.un-recibo .cuando-quien { margin: 0.3rem 0 0; color: #4b5563; }
.un-recibo .numero-venta .pais { font-size: 1rem; letter-spacing: 0;
  color: #4b5563; font-family: inherit; }

/* ------------------------------------------- el día de la tienda (bucle 116) */
/* La tienda cerrada, en la barra de todas las pantallas de adentro: la frase
   de quién la cerró y desde cuándo, en el rojo claro de lo que no deja
   seguir, delante de los demás avisos. Hasta el bucle 116 al lado de Salir
   iba «Falta el conteo de cierre»: el conteo se fue con él. */
.aviso-barra.tienda-cerrada { background: #fecaca; color: #7f1d1d;
  font-weight: 600; }
.error.tienda-cerrada { font-size: 1.05rem; }

/* «El día» del supervisor: lo que se cerró en verde, el día que se debe en
   rojo, el día cerrado en el gris de lo que ya no se toca; el botón del azul
   de lo que escribe —la pregunta viene después, con el rojo de lo que no se
   deshace (`.restablecer-clave`)—. */
.nadie.dia-hecho, .nadie.tienda-hecho { background: #dcfce7; color: #14532d; }
.nadie.dia-cerrado { background: #e5e7eb; color: #111827; }
.error.dia-sin-cerrar { max-width: 46rem; border-left: 4px solid #b91c1c;
  padding-left: 0.8rem; }
.el-dia .lo-abierto { margin: 0.2rem 0 0; padding-left: 1.2rem; }
.el-dia .lo-abierto li { margin-bottom: 0.35rem; max-width: 46rem; }
.el-dia tr.no-suma td { color: #b91c1c; }
.el-dia form.cerrar-el-dia { margin: 1.2rem 0 0.6rem; max-width: 46rem; }
.el-dia form.cerrar-el-dia label { display: block; font-weight: 600;
  margin-bottom: 0.3rem; }
.el-dia form.cerrar-el-dia textarea { width: 100%; box-sizing: border-box;
  font: inherit; padding: 0.4rem 0.5rem; border: 1px solid #9ca3af; }
.el-dia form.cerrar-el-dia button { font-size: 1.15rem; padding: 0.7rem 1.6rem;
  border: 0; background: #1f4e79; color: #fff; cursor: pointer; }
.el-dia form.cerrar-el-dia button:hover { background: #2a6496; }

/* «Las tiendas, ahora», del INP: un punto por centro penal —verde, abierta y
   oída; rojo, cerrada; gris, sin señal— y al lado su frase, que dice lo mismo
   con palabras: el color no va nunca solo. */
.punto { display: inline-block; width: 0.8rem; height: 0.8rem;
  border-radius: 50%; margin-right: 0.5rem; vertical-align: -0.05rem; }
.punto-oida { background: #16a34a; }
.punto-cerrada { background: #dc2626; }
.punto-sin-senal { background: #9ca3af; }
/* «El país hoy» (bucle 150): su propia pantalla, del INP, del auditor
   general y del ALCAIDE —un renglón por centro penal abierto: sus privados
   de libertad, las ventas de hoy, las bolsas en tránsito, las novedades sin
   contestar y su tienda, con el punto de «Las tiendas»—. Cuentas y nunca
   lempiras (§8.1). Un cero es una raya, apagada; lo que hay en bolsas y
   novedades, y los días que un centro penal debe cerrar, van en ámbar, que
   es algo que hacer. (Nació en el Inicio y salió de ahí el mismo día: tapaba
   las tarjetas.) */
.pais-hoy .listado td.nombre { min-width: 16rem; }
.pais-hoy .listado td.cero { color: #9ca3af; }
.pais-hoy .listado .debe { color: #b45309; font-weight: 600; }
.pais-hoy .listado td.tienda { white-space: nowrap; }
.las-tiendas .pendiente.sin-cerrar { color: #b91c1c; font-weight: 600; }
.las-tiendas form.tienda-cerrar, .las-tiendas form.tienda-abrir {
  display: flex; gap: 0.5rem; margin: 0; }
.las-tiendas form input[name="razon"] { flex: 1 1 14rem; font-size: 0.95rem;
  padding: 0.3rem 0.5rem; border: 1px solid #9ca3af; margin: 0; }
.las-tiendas form button { font-size: 0.95rem; padding: 0.3rem 0.9rem;
  border: 0; background: #1f4e79; color: #fff; cursor: pointer;
  white-space: nowrap; }
.las-tiendas form button:hover { background: #2a6496; }
.las-tiendas td.hacer { min-width: 22rem; }

/* ------------------------------------------- el manual dentro (bucle 106) */
/* El manual del oficial, en la pantalla y en el papel. Es texto largo: una
   columna angosta —sesenta y pico letras por renglón— se lee mejor que la
   caja ancha de una mesa, y las fotografías van al ancho de esa columna con
   su pie debajo. Lo que la pantalla añade al documento es el índice de
   arriba, que es de esta página y no del manual: sus capítulos y sus
   secciones, cada una con su ancla. */
main.manual { max-width: 56rem; }
.manual h3 { margin: 2.2rem 0 0.6rem; padding-top: 0.6rem;
  border-top: 2px solid #1f4e79; color: #1f4e79; }
.manual h4 { margin: 1.6rem 0 0.4rem; color: #111827; }
.manual p { max-width: 46rem; line-height: 1.55; }
.manual li { max-width: 44rem; line-height: 1.5; margin-bottom: 0.3rem; }
.manual hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.6rem 0; }
.manual figure { margin: 1rem 0 1.4rem; }
.manual figure img { display: block; max-width: 100%; height: auto;
  border: 1px solid #d1d5db; }
.manual figcaption { font-size: 0.85rem; color: #4b5563; margin-top: 0.3rem;
  max-width: 44rem; }
.manual table.listado { margin: 0.8rem 0 1.4rem; }
.manual code { font-size: 0.92em; }
/* Los únicos enlaces de esta página son los del índice y el de volver: el
   manual no lleva ninguno adentro. Del azul de la casa, sin la raya azul
   del navegador, que en una página de dos mil renglones es ruido. */
.manual a { color: #1f4e79; text-decoration: none; }
.manual a:hover { text-decoration: underline; }
.indice-manual { margin: 0.6rem 0 1.4rem; padding-left: 1.1rem; }
.indice-manual > li { margin-bottom: 0.4rem; font-weight: 600; }
.indice-manual ul { margin: 0.2rem 0 0; padding-left: 1.1rem;
  font-weight: 400; list-style: none; }
.indice-manual ul li { margin-bottom: 0.1rem; font-size: 0.92rem; }
/* En papel: sin la barra, sin el panel y sin el índice —que en una hoja no
   se pulsa—; cada capítulo empieza en su hoja, y ni una fotografía con su
   pie se parte entre dos. El tamaño de la hoja lo trae la pantalla en su
   cabecera (`CABECERA_HOJA`), porque la regla de `eco.css` es la de la
   etiqueta de 58 × 25 mm y lo que va después en la cascada gana. */
@media print {
  main.manual { max-width: none; margin: 0; padding: 0; }
  main.manual ~ .vigilante, .manual .indice-manual,
  .manual .pie { display: none !important; }
  .manual h3 { page-break-before: always; break-before: page; }
  .manual h3:first-of-type { page-break-before: auto; break-before: auto; }
  .manual figure, .manual h4, .manual li {
    page-break-inside: avoid; break-inside: avoid; }
  .manual figure img { border: 0; }
}

/* ----------------------------------- la hoja de cada puesto (bucle 136) */
/* Una hoja carta por puesto de un centro penal: el día en orden, lo que
   puede decir la pantalla y lo que nunca se hace. En la pantalla se lee como
   el manual; en el papel, cada puesto empieza en su hoja y cabe entero en
   ella —lo mide la caminata `ver_las_hojas`, que imprime la página y cuenta
   las hojas—. Lo que la pantalla añade —el título y la explicación— lleva
   `no-imprimir`. */
main.hojas { max-width: 56rem; }
.hojas h3 { margin: 1.8rem 0 0.4rem; padding-top: 0.6rem;
  border-top: 2px solid #1f4e79; color: #1f4e79; }
.hojas h4 { margin: 1.1rem 0 0.3rem; color: #111827; }
.hojas p { max-width: 46rem; line-height: 1.5; }
.hojas ol, .hojas ul { margin: 0.3rem 0 0.6rem; }
.hojas li { max-width: 46rem; line-height: 1.45; margin-bottom: 0.25rem; }
@media print {
  main.hojas { max-width: none; margin: 0; padding: 0; font-size: 11pt; }
  main.hojas ~ .vigilante { display: none !important; }
  .hoja-del-puesto { page-break-before: always; break-before: page; }
  .hoja-del-puesto:first-of-type { page-break-before: auto;
    break-before: auto; }
  .hojas h3 { margin: 0 0 0.3rem; padding-top: 0; border-top: 0; }
  .hojas h4 { margin: 0.7rem 0 0.2rem; }
  .hojas p, .hojas li { line-height: 1.3; }
  .hojas li { margin-bottom: 0.12rem; page-break-inside: avoid;
    break-inside: avoid; }
}

/* Los centros penales retirados (bucle 133, DISENO §5.9): debajo de la mesa,
   en el gris de la historia, con la razón en cursiva. Abrir, retirar y volver
   a abrir uno se hacen en el servidor, así que aquí no hay botón; la línea
   que lo dice va en el gris de las notas. */
.retirados { margin: 1.4rem 0 0; }
.retirados h4 { margin: 0 0 0.5rem; font-size: 1rem; color: #4b5563; }
.listado.retirados td { color: #4b5563; }
/* El código no se parte en su guion (bucle 134): en la tabla de los
   retirados la columna es angosta, y «PRUEBA-133» salía en dos
   renglones —se vio en su pantalla al aterrizar el 133—. */
.listado.retirados td.codigo { white-space: nowrap; }
.listado .razon { display: block; font-style: italic; color: #4b5563;
  font-size: 0.9rem; }
.pie.en-el-servidor { margin-top: 0.8rem; }

/* ================================================================ la forma
 *
 * **Una sola forma en todo el sistema** (la tercera ronda de cambios, bucle
 * 146). Nelson, 2026-11-01, al ver la caja de la ventanilla: *«make it look
 * more professional… make it uniform buttons rounded and lined up with each
 * other»*; y, entre tres, *«Every screen»*. Dos medidas y nada más:
 *
 *   * **8 puntos** para lo que se aprieta o se llena —botones, enlaces con
 *     cara de botón (los filtros de categorías también), casillas y listas—,
 *     para los avisos de un renglón y para las fotografías chicas de los
 *     productos;
 *   * **12** para lo que contiene —tarjetas, paneles, las puertas de
 *     Inicio, los marcos de las caras, el recibo—.
 *
 * Las píldoras (lo propio de cada centro penal, «Revisiones» en la barra),
 * las marcas chicas (INP, la campana) y las pestañas conservan su forma: no
 * son botones. El papel —las hojas, las etiquetas— sigue con sus esquinas:
 * se imprime y se corta.
 *
 * Va al final del archivo. Una pantalla que pone su propia esquina se
 * corrige allá, no aquí: `ver_el_manual` mide las esquinas de cada pantalla
 * que fotografía y dice cuál se salió de estas dos medidas.
 */
button, a.boton, .boton, a.mirar, a.boton-alto,
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select, textarea, .error, .nadie, .primera-entrada, .avisado,
.foto-producto, .sin-foto, .filtro-categorias a {
  border-radius: 8px; }
.tarjeta, .aviso, #aviso-inactividad div, .caja-escaneo, .panel, .salida,
.no-es-el, .cara-de-antes, .un-resultado, .cara-grande, main.recibo,
.cifra-tablero, .puerta, .filtros-album, main.restablecer-clave {
  border-radius: 12px; }
/* La cara dentro de su marco, con la esquina del marco menos su margen. */
.cara-de-antes img, .un-resultado img, .cara-grande img { border-radius: 6px; }

/* **Las listas que se despliegan, todas iguales** (la cuarta ronda de
 * cambios, bucle 147). Nelson, 2026-11-01, al mirar «Los topes» en su
 * Safari: *«make sure all the buttons are uniform and professional»*; y,
 * entre tres, en todas las pantallas. En Safari cada lista era el botón
 * gris y bajito del Mac —más chico que las casillas de al lado—, y solo la
 * de «Centro penal» tenía la cara del sistema. Desde aquí todas la tienen:
 * sin la cara del navegador, del alto de las casillas con que van —su
 * relleno y su letra son los de su formulario—, la esquina de 8 puntos y la
 * flecha azul, dibujada con dos degradados (la de cada navegador es de otro
 * tamaño y de otro color). Las de varias opciones a la vista (`multiple`,
 * `size`) no llevan flecha. Va al final: el lado de la flecha es suyo, y el
 * fondo blanco o el rojo de un campo malo lo pone su formulario.
 * `ver_el_manual` mide cada pantalla que fotografía
 * (`caminata.los_controles`).
 */
/* El fondo blanco de la que ningún formulario pinta, sin peso: cualquier
   otra regla le gana. */
:where(select:not([multiple]):not([size])) { background-color: #fff;
  color: #111; }
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; padding-right: 2.8rem;
  background-image: linear-gradient(45deg, transparent 50%, #1f4e79 50%),
    linear-gradient(135deg, #1f4e79 50%, transparent 50%);
  background-position: calc(100% - 1.45rem) 50%, calc(100% - 1.05rem) 50%;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat; cursor: pointer; }
select:not([multiple]):not([size]):focus { outline: none;
  border-color: #1f4e79; box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.25); }