/* Tipografía de marca (World Skate Games ASU26), vendorizada localmente
   como htmx.min.js — el server puede estar en una red sin salida a
   internet durante el evento, así que nada de fuentes por CDN. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-700.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  /* Paleta de identidad World Skate Games ASU26 (styleguide oficial). Uso
     de marca — nav, botones, franjas — nunca para codificar severidad. */
  --fondo: #eeede3; /* hueso */
  --tarjeta: #ffffff;
  --texto: #2e2d2c; /* casi negro */
  --borde: #d5d3c2;
  --primario: #014906; /* verde bosque — texto interactivo, foco, franja de marca */
  --acento: #01d04a; /* verde vivo — fondo de botón principal */
  --acento-texto: #014906; /* texto sobre --acento */
  --atencion: #ff6e3b; /* naranja — avisos, acción secundaria */
  --decorativo: #ffbad7; /* rosa — uso puntual, tags */
  --muted: #e2e0d1;
  --muted-texto: #6b695f;
  --error: #c0392b;
  --aviso: #b8860b;
  --verde: #2e7d32;
  --rojo: #c0392b;

  /* Semáforo de stock/urgencia: paleta de estado validada para daltonismo
     — reservada exclusivamente para severidad, en cualquier pantalla.
     Misma fuente de verdad que dashboard/service.py:_COLOR_SEMAFORO_HEX. */
  --estado-bien: #0ca30c;
  --estado-atencion: #fab219;
  --estado-grave: #ec835a;
  --estado-critico: #d03b3b;

  /* Colores de etapa (progreso dentro de un mismo recorrido — "ya pasó
     por acá"), de la paleta de tema de Banani. Distintos de los de arriba:
     esto es secuencia, no severidad. */
  --etapa-1: #3e7cb1;
  --etapa-2: #284b63;
  --etapa-3: #7b5ea7;
}

* {
  box-sizing: border-box;
}

/* El reset de `button, .boton` de más abajo fija su propio `display`, y
   una regla de autor con esa especificidad le gana a la del navegador para
   `[hidden]` aunque `[hidden]` sea más específica que un simple `button` —
   entre orígenes distintos manda el de autor. Sin esto, un botón que el JS
   oculta con `el.hidden = true` (ver `autoservicio/estado.html`) queda
   igual de visible. Un solo `[hidden]` acá alcanza para toda la hoja. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family:
    "IBM Plex Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

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

h1,
h2,
h3 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

/* Etiquetas chicas tipo "ficha técnica": mayúscula, mono, espaciada —
   mismo lenguaje que los chips de estado y las cabeceras de tabla. */
.etiqueta-mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-texto);
}

.topbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.75rem 4.5rem 0.75rem 1.5rem; /* espacio a la derecha para el avatar, que va con position:absolute */
  background: var(--primario);
  color: white;
  border-bottom: 2px solid var(--texto);
}
.topbar .marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.topbar .marca .insignia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  background: var(--acento);
  color: var(--acento-texto);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.nav-escritorio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  flex: 1 1 auto;
}
.separador-nav {
  width: 1px;
  align-self: stretch;
  min-height: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 0.15rem;
}
.nav-escritorio a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
}
.nav-escritorio a:hover {
  color: white;
}
.nav-escritorio a.activo {
  color: white;
  border-bottom-color: var(--acento);
}
.nav-escritorio .icono {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Barra de tabs fija abajo (mobile): la app se usa parado, con una mano —
   ir a apretar un link arriba de todo en una pantalla grande no es cómodo.
   En desktop se esconde y manda el nav de siempre en la franja de marca. */
.tabs-inferior {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--tarjeta);
  border-top: 2px solid var(--texto);
}
.tabs-inferior > a,
.tabs-inferior > .tab-mas > summary {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 58px;
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.tabs-inferior > a::-webkit-details-marker,
.tabs-inferior > .tab-mas > summary::-webkit-details-marker {
  display: none;
}
.tabs-inferior > a span,
.tabs-inferior > .tab-mas > summary span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tabs-inferior > a.activo {
  color: var(--primario);
}
.tab-mas {
  position: relative;
  flex: 1 1 0;
}
.tab-mas[open] > summary {
  color: var(--primario);
}
.hoja-mas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 58px;
  background: var(--tarjeta);
  border-top: 2px solid var(--texto);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 60vh;
  overflow-y: auto;
}
.hoja-mas a,
.hoja-mas button.enlace {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  min-height: 44px;
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--borde);
}
.hoja-mas form {
  display: contents;
}
.hoja-mas-usuario {
  padding: 0.75rem 0.5rem 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted-texto);
}

/* Menú de cuenta (esquina superior derecha, sólo desktop — en mobile ya
   cumple la misma función la hoja "Más" de la barra inferior). Un botón
   real (no un link) que abre/cierra un panel propio; "afuera de él, se
   cierra" lo resuelve el listener global en base.html, sin más JS que eso. */
.menu-usuario {
  position: absolute;
  top: 0.75rem;
  right: 1.5rem;
}
.avatar-boton {
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-texto);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-boton:hover {
  background: var(--acento);
  filter: brightness(1.08);
}
.menu-usuario-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 200px;
  background: var(--tarjeta);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0.4rem;
  z-index: 30;
}
.menu-usuario.abierto .menu-usuario-panel {
  display: flex;
  flex-direction: column;
}
.menu-usuario-nombre {
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--borde);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
}
.menu-usuario-panel a,
.menu-usuario-panel button.enlace {
  padding: 0.6rem;
  min-height: 40px;
  text-align: left;
  color: var(--texto);
  text-decoration: none;
  font-family: inherit;
  font-weight: 400;
  border-radius: 4px;
  width: 100%;
}
.menu-usuario-panel a:hover,
.menu-usuario-panel button.enlace:hover {
  background: var(--muted);
}
.menu-usuario-panel form {
  display: contents;
}

main {
  padding: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

/* Cualquier tabla se envuelve en esto para poder scrollear horizontal en
   vez de romper el ancho de toda la página en pantallas chicas. El borde
   y el radio van acá, no en la <table> — con border-collapse, overflow y
   border-radius en la tabla misma recortan columnas en vez de esquinas. */
.tabla-envoltorio {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borde);
  border-radius: 8px;
}

@media (max-width: 640px) {
  main {
    padding: 1rem;
    padding-bottom: calc(58px + 1rem);
  }
  .topbar {
    padding: 0.6rem 1rem;
  }
  .nav-escritorio,
  .menu-usuario {
    display: none;
  }
  .tabs-inferior {
    display: flex;
  }
  .tarjeta {
    padding: 1rem;
  }
  .tarjetas-acreditacion {
    flex-direction: column;
  }
  .tarjeta-servicio,
  .tarjeta-siguiente {
    flex: 1 1 auto;
  }
}

.pantalla-centrada {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cartel QR de acceso a autoservicio (link estático, el mismo para todos). */
.qr-acceso {
  max-width: 420px;
  margin: 2rem auto;
  text-align: center;
}
.qr-acceso-imagen {
  margin: 1.5rem auto;
  width: 260px;
}
.qr-acceso-imagen svg {
  width: 100%;
  height: 100%;
}
.qr-acceso .etiqueta-mono {
  word-break: break-all;
}

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1.5rem;
}
.formulario-login {
  width: 100%;
  max-width: 320px;
}

.cabecera-seccion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.cabecera-seccion-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.cabecera-seccion-titulo h1 {
  margin-bottom: 0;
}
.chip-en-espera {
  background: var(--atencion);
  color: var(--texto);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
}

.formulario,
.formulario-login {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.formulario label,
.formulario-login label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}
.formulario label.checkbox,
.formulario-login label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  min-height: 44px; /* objetivo táctil cómodo — este checklist se usa parado, a las apuradas */
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="file"],
select {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  font-size: 1rem;
  background: var(--tarjeta);
  color: var(--texto);
}
input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}
code {
  background: #eee;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.9em;
}
fieldset {
  border: 1px solid var(--borde);
  border-radius: 4px;
}
legend {
  padding: 0 0.4rem;
  font-size: 0.85rem;
}

button,
.boton {
  padding: 0.65rem 1.25rem;
  min-height: 44px; /* objetivo táctil recomendado para tocar sin fallar */
  border: none;
  border-radius: 4px;
  background: var(--acento);
  color: var(--acento-texto);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
button.enlace {
  background: none;
  color: var(--primario);
  font-family: inherit;
  font-weight: 400;
  min-height: auto;
  padding: 0.4rem 0;
  text-decoration: underline;
  font-size: 0.9rem;
}
form.inline {
  display: inline;
}

/* Formularios cortos de una sola línea (filtro de auditoría, motivo de
   solicitud de cambio): input + botón lado a lado si entran, apilados si no. */
.formulario-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}
.formulario-filtros input {
  flex: 1 1 200px;
  width: auto;
}
.formulario-filtros label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
}
.formulario-filtros label input {
  flex: initial;
}

/* Detalle de auditoría: pares clave/valor legibles en vez del repr de un
   dict de Python. */
.detalle-auditoria {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}
.detalle-auditoria li {
  white-space: nowrap;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--tarjeta);
}
.tabla th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  background: var(--muted);
  border-bottom: 1px solid var(--borde);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-texto);
}
.tabla td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--borde);
}
.tabla tbody tr:last-child td {
  border-bottom: none;
}
.tabla tbody tr:hover td {
  background: var(--fondo);
}

/* Cualquier link/botón de control adentro de una celda: mismo tamaño
   mínimo cómodo de tocar en los diez módulos, sin agrandar la fila más
   de lo necesario (nada de 44px acá, la tabla se deformaría). */
.tabla td a,
.tabla td button.enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
  padding: 0.3rem 0.7rem;
  margin: 0.15rem 0.3rem 0.15rem 0;
  border-radius: 4px;
  background: var(--muted);
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  vertical-align: middle;
}
.tabla td a:hover,
.tabla td button.enlace:hover {
  background: var(--borde);
}
.tabla td a:last-child,
.tabla td button.enlace:last-child {
  margin-right: 0;
}

/* Fila de acciones de inventario: +1/-1 del mismo ancho, uno al lado del
   otro, con "stock inicial" separado a continuación. */
.acciones-inventario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.acciones-inventario .paso {
  min-width: 42px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.95rem;
}

.chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: #eee;
  color: #333;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 0.25rem;
}
.chip-admin {
  background: var(--primario);
  color: white;
}
.chip-heredado {
  background: #dbe7ff;
  color: #1c3f8f;
}
.chip-concedido {
  background: #d9f2d9;
  color: var(--verde);
}
.chip-denegado {
  background: #fbdada;
  color: var(--rojo);
}

/* Semáforo de stock: mismos cortes que va a usar el dashboard (100-75%
   verde, 74-50% amarillo, 49-25% naranja, 24-0% rojo). */
.chip-verde {
  background: #d9f2d9;
  color: #2e7d32;
}
.chip-amarillo {
  background: #fdf3cf;
  color: #8a6d00;
}
.chip-naranja {
  background: #fbe3cf;
  color: #a04b00;
}
.chip-rojo {
  background: #fbdada;
  color: var(--rojo);
}

/* Estado de una solicitud en la cola de acreditaciones */
.chip-en_cola {
  background: #eee;
  color: #333;
}
.chip-reservada {
  background: #fdf3cf;
  color: #8a6d00;
}
.chip-atendiendo {
  background: #dbe7ff;
  color: #1c3f8f;
}
.chip-entregada {
  background: #d9f2d9;
  color: #2e7d32;
}

/* Pantalla de operador: tarjeta actual/siguiente */
.tarjetas-acreditacion {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  margin: 1rem 0;
}
.tarjeta-siguiente {
  flex: 1;
  opacity: 0.7;
}

.tarjeta-servicio {
  flex: 1.5;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--texto);
  border-radius: 8px;
  overflow: hidden;
  background: var(--tarjeta);
}
.tarjeta-servicio-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--texto);
  color: white;
}
.tarjeta-servicio-titulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.chip-atendiendo-badge {
  background: var(--acento);
  color: var(--acento-texto);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}
.tarjeta-servicio-cuerpo {
  padding: 0.9rem;
  flex: 1;
}
.tarjeta-servicio-numero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.chip-numero {
  background: var(--primario);
  color: white;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}
.etapas-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.chip-etapa-mini {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  color: white;
}
.chip-etapa-mini.etapa-1 {
  background: var(--etapa-1);
}
.chip-etapa-mini.etapa-2 {
  background: var(--etapa-2);
}
.chip-etapa-mini.etapa-3 {
  background: var(--etapa-3);
}

.acciones-cola {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.acciones-cola form {
  flex: 1 1 220px;
}
.boton-entregar {
  width: 100%;
  min-height: 56px;
  justify-content: space-between;
  padding: 0 0.5rem 0 1.25rem;
}
.boton-entregar-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 4px;
  background: var(--primario);
  color: white;
  flex-shrink: 0;
}
.boton-secundario {
  width: 100%;
  min-height: 48px;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--texto);
  color: var(--texto);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.boton-secundario:hover {
  background: var(--muted);
}

/* Estado de un pedido en la cola de runner */
.chip-preparando {
  background: #dbe7ff;
  color: #1c3f8f;
}
.chip-entregado {
  background: #d9f2d9;
  color: #2e7d32;
}
.nombre-persona {
  font-size: 1.3rem;
  font-weight: 700;
}

/* Estado de una entrega en la cola de indumentaria */
.chip-llamando {
  background: #fdf3cf;
  color: #8a6d00;
}
.chip-devuelta {
  background: #fbe3cf;
  color: #a04b00;
}

.lista-revision {
  list-style: none;
  padding: 0;
}
.lista-revision li {
  padding: 0.25rem 0;
}

/* Autoservicio: lista de candidatos al buscar */
.lista-candidatos {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.candidato {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  min-height: 44px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  text-decoration: none;
  color: var(--texto);
  background: var(--tarjeta);
  font-size: 1.05rem;
}
.candidato:hover {
  border-color: var(--primario);
}

/* Pantalla de estado de la persona: apila la tarjeta de estado y el aviso
   de notificaciones (`.pantalla-centrada` sola es una fila, y ahí quedarían
   uno al lado del otro). */
.pantalla-estado {
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.pantalla-estado > * {
  width: 100%;
  max-width: 420px;
}

/* Tarjeta de estado. Hereda el `display:flex` de `.formulario-login`, que
   ya separa con `gap`: sumarle además los márgenes que el navegador le
   pone a cada <p> deja el doble de aire del necesario y obliga a scrollear
   en un celular. Acá manda el gap y nada más. */
.tarjeta-estado {
  gap: 0.55rem;
  max-width: 420px;
  padding: 1.25rem;
}
.tarjeta-estado p {
  margin: 0;
}
.tarjeta-estado h1 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.15;
}
.tarjeta-estado .nombre-persona {
  font-size: 1.15rem;
}
/* Cuánta gente falta, comparado con el número que se está atendiendo: es
   el dato que la persona vuelve a mirar cada vez que abre el celular. */
.destacado-cerca {
  font-weight: 700;
  font-size: 1.05rem;
}
.dato-secundario {
  color: var(--muted-texto);
  font-size: 0.9rem;
}

/* "Es tu turno": el único momento en que esta pantalla tiene que gritar.
   Se mira desde lejos, con el celular en la mano y ruido alrededor, así que
   va el bloque más contrastado de todo el sistema. */
.llamado-activo {
  margin: 0.25rem 0;
  padding: 0.9rem;
  border: 3px solid var(--primario);
  border-radius: 8px;
  background: var(--acento);
  color: var(--acento-texto);
  text-align: center;
}
.llamado-activo p {
  margin: 0.25rem 0;
}
.llamado-activo-titulo {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.llamado-activo-box {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Aviso de permisos de notificación. Vive afuera del fragmento que HTMX
   reemplaza cada 5s, así que su estado lo maneja el script de la página. */
.aviso-notificaciones {
  border-left: 4px solid var(--atencion);
  padding: 1rem 1.25rem;
}
.aviso-notificaciones p {
  margin: 0 0 0.6rem;
}
.aviso-notificaciones button {
  min-height: 44px;
}
.aviso-notificaciones .aviso {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
}
.aviso-notificaciones #detalle-ios {
  margin: 0;
  font-size: 0.9rem;
}
.aviso-notificaciones #detalle-ios ol {
  margin: 0.4rem 0;
  padding-left: 1.25rem;
}
.aviso-notificaciones #detalle-ios li {
  margin-bottom: 0.3rem;
}

.error {
  color: var(--error);
}
.aviso {
  color: var(--aviso);
}

/* Widget de "mi box", incrustado arriba de las pantallas de acreditaciones
   e indumentaria (ver app/templates/partials/_box_operador.html). */
.box-asignado {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  border: 2px solid var(--texto);
  border-radius: 8px;
  background: var(--tarjeta);
  padding: 0.6rem;
  margin-bottom: 1rem;
}
.box-asignado-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--texto);
  color: white;
}
.box-asignado-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.box-asignado-numero {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
}
.box-asignado-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.box-asignado-form input[type="number"] {
  width: 64px;
  height: 48px;
  padding: 0;
  text-align: center;
  border: 2px solid var(--texto);
  border-radius: 6px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  /* Ocultar el spinner nativo del navegador: acá al lado va el propio. */
  -moz-appearance: textfield;
}
.box-asignado-form input[type="number"]::-webkit-outer-spin-button,
.box-asignado-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.box-asignado-stepper {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.box-asignado-stepper button {
  width: 32px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border-radius: 4px;
  background: var(--muted);
  color: var(--texto);
  font-size: 0.7rem;
  line-height: 1;
}
.box-asignado-stepper button:hover {
  background: var(--borde);
}
.box-asignado-form button[type="submit"] {
  height: 48px;
}

/* Checklist del runner (app/modules/runner/templates/runner/_tarjeta.html):
   lista vertical explícita — un ítem por línea, no depende de que el
   contenedor sea angosto para no quedar en fila. Checkboxes grandes,
   porque se marcan corriendo con el kit en la otra mano. */
.checklist-runner {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
  margin: 1rem 0;
}
.checklist-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: 0 1.1rem;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
  font-size: 1.15rem;
  font-weight: 600;
}
.checklist-runner .checklist-item:last-child {
  border-bottom: none;
}
.checklist-item input[type="checkbox"] {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  accent-color: var(--primario);
}
.checklist-item-sub {
  padding-left: 2.5rem;
  background: var(--fondo);
  font-size: 1.05rem;
  font-weight: 500;
}

/* Pantalla pública de llamados: fuentes grandes, se lee desde lejos */
.llamados-columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1rem;
}
.llamados-seccion {
  flex: 1 1 320px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1.5rem;
}
.llamados-seccion h2 {
  margin-top: 0;
}
.llamados-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.llamados-lista li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.75rem 1.25rem;
  background: var(--fondo);
  border-radius: 6px;
  font-size: 1.75rem;
  font-weight: 700;
}
.llamados-box {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--primario);
}
.llamados-vacio {
  color: var(--aviso);
  font-size: 1.1rem;
}

/* Se re-pinta con cada vuelta del SSE (cada 3s) mientras el llamado siga
   "reciente" del lado del servidor — el pulso es puramente visual (CSS),
   no hace falta JS para que se vea vivo. */
.llamados-lista li.recien-llamado {
  background: var(--acento);
  color: var(--acento-texto);
  animation: pulso-llamado 1s ease-in-out 3;
}
@keyframes pulso-llamado {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(1, 208, 74, 0.6);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(1, 208, 74, 0);
  }
}

/* Dashboard: tiles de estadística, tiles de etapa del pipeline, y barras
   horizontales (Gráfico 1 de stock con semáforo, Gráfico 2 de capacidad).
   Los colores del semáforo (verde/amarillo/naranja/rojo) se resuelven en
   Python (app/modules/dashboard/service.py:_COLOR_SEMAFORO_HEX) a la
   paleta de estado validada para daltonismo del skill de dataviz — misma
   fuente de verdad en los dos lados, sólo hex duplicado a propósito. */

/* Etapa propia del pipeline (no reusa chip-atendiendo): en las colas
   individuales "en preparación" (runner) y "en revisión" (indumentaria)
   nunca conviven en una misma pantalla, así que compartir el mismo azul
   nunca se notaba — acá sí, al mostrar las cinco etapas juntas. */
.chip-etapa-revision {
  background: #e4dffb;
  color: #4a3aa7;
}

.stat-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.stat-tile {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1.25rem;
}
.stat-tile-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-texto);
}
.stat-tile-valor {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: proportional-nums;
}

.pipeline-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 2rem;
}
.pipeline-tile {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.pipeline-tile .chip {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  margin-right: 0;
}
.pipeline-tile-etiqueta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dashboard-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

/* Lista de stock (dashboard): fila densa con punto de semáforo, barra fina
   y chip de estado en texto — mismo lenguaje visual que el resto de las
   tablas de estado del sistema (chip-en_cola, chip-preparando, etc.). */
.stock-lista {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
  background: var(--tarjeta);
  margin-bottom: 2rem;
}
.stock-fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--borde);
}
.stock-fila:last-child {
  border-bottom: none;
}
.stock-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stock-info {
  flex: 1;
  min-width: 0;
}
.stock-barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.stock-etiqueta {
  font-weight: 600;
  font-size: 0.95rem;
}
.stock-barra-fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.stock-valor {
  flex: 0 0 25px;
  text-align: right;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Envuelve a `.stock-pista`: es ESTE el que tiene que crecer dentro de
   `.stock-barra` (flex:1 1 auto) — `.stock-pista` ya no es hijo directo
   del flex container, así que poner el flex-grow ahí no hacía nada. */
.stock-pista-contenedor {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.stock-pista {
  display: block;
  width: 100%;
  height: 16px;
  border-radius: 4px;
  background: var(--muted);
  overflow: hidden;
  border: 1px solid var(--borde);
}
.stock-relleno {
  display: block;
  height: 100%;
  min-width: 2px;
}
.stock-restante {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  flex: 0 0 auto;
  min-width: 2.5rem;
  text-align: right;
}
/* Secundario respecto a `.stock-restante` (lo urgente es cuánto queda, no
   cuánto había): más chico, sin negrita, con un "/" antes para leerse
   "restante / inicial" sin agregar texto en el HTML. */
.stock-total {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted-texto);
  flex: 0 0 auto;
  min-width: 1.5rem;
  text-align: right;
}
.stock-total::before {
  content: "/ ";
}
.stock-chip {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  flex: 0 0 auto;
}
/* Mismos cuatro colores de severidad (validados para daltonismo) que
   inventario/dashboard ya usan — acá con el texto en el tono que mejor
   contrasta contra cada fondo (el amarillo necesita texto oscuro). */
.stock-chip-verde {
  background: var(--estado-bien);
  color: white;
}
.stock-chip-amarillo {
  background: var(--estado-atencion);
  color: var(--texto);
}
.stock-chip-naranja {
  background: var(--estado-grave);
  color: white;
}
.stock-chip-rojo {
  background: var(--estado-critico);
  color: white;
}

.barras {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.barra-fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.barra-etiqueta {
  flex: 0 0 130px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-texto);
}
.barra-pista {
  flex: 1;
  height: 20px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 4px;
  overflow: hidden;
}
.barra-relleno {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  min-width: 2px;
}
.barra-relleno-neutro {
  background: var(--primario);
} /* verde bosque de referencia, no es severidad */
.barra-valor {
  flex: 0 0 44px;
  text-align: right;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}