/* Asistencia en Slot — estilos de todas las pantallas.

   Misma estética que FS, a propósito: el personal de sala usa los dos sistemas el mismo
   turno y tiene que sentirse en casa. Los tokens, las tipografías, la banda de arriba con la
   línea del color de la sala, los acentos por sala y el tema oscuro opcional salen de
   C:\dev\fs\public\assets\css\tokens.css; si FS cambia su paleta, se copia de ahí.

   TEMA: el claro es el predeterminado. El oscuro se activa solo con el botón (tema.js
   escribe data-tema="oscuro" en <html> antes del primer pintado). No se usa
   prefers-color-scheme por la misma razón que en FS: el sistema operativo no decide por el
   operador.

   Los nombres de los tokens dicen el papel, no el color (ver FS). Todos los colores de los
   componentes salen de acá; el tema oscuro y cada sala sólo redefinen tokens. */

/* ------------------------------------------------------------ tipografías propias */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/oswald-variable-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-variable-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-mono-700-latin.woff2") format("woff2"); }

/* ------------------------------------------------------------ tokens: tema claro */
:root {
  color-scheme: light;

  --banda:         #101826;
  --acento-fuerte: #1a3fa8;
  --acento:        #1d4ed8;
  --acento-hover:  #2856cc;
  --acento-suave:  #e7ecfb;
  --acento-banda:  #7fb0ff;
  --sala-cabecera: rgba(255, 255, 255, .8);

  --fondo:        #f1f0ec;
  --fondo-panel:  #ffffff;
  --fondo-suave:  #f8f7f4;
  --fondo-hover:  #eae8e2;

  --texto:        #14181f;
  --texto-suave:  #57534c;
  --texto-tenue:  #6b665d;

  --borde:        #e2ded5;
  --borde-fuerte: #ccc7bd;
  --borde-medio:  #9c9488;

  --verde:      #177244;
  --verde-bg:   #e4f2e9;
  --ambar:      #8a5a00;
  --ambar-bg:   #f8efdc;
  --rojo:       #b3261e;
  --rojo-bg:    #fbeae7;
  --violeta:    #6d28a8;
  --violeta-bg: #f0e9fa;
  --gris-bg:    #eae8e2;

  --sombra: 0 1px 2px rgba(20, 24, 31, .05);
  --radio: 4px;
  --radio-chico: 3px;

  --fuente:         "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --fuente-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* ------------------------------------------------------------ tokens: tema oscuro */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --banda:         #070c13;
  --acento-fuerte: #2d62e0;
  --acento:        #7fb0ff;
  --acento-hover:  #3f70e0;
  --acento-suave:  #16233a;

  --fondo:        #0d1219;
  --fondo-panel:  #151d28;
  --fondo-suave:  #1b2532;
  --fondo-hover:  #222d3b;

  --texto:        #e9edf3;
  --texto-suave:  #9fabbb;
  --texto-tenue:  #7c8899;

  --borde:        #29333f;
  --borde-fuerte: #3a4654;
  --borde-medio:  #66748a;

  --verde:      #5cc98d;
  --verde-bg:   #133023;
  --ambar:      #e5aa4a;
  --ambar-bg:   #2a2111;
  --rojo:       #f28b83;
  --rojo-bg:    #2c1513;
  --violeta:    #c7a0ed;
  --violeta-bg: #2b1f3d;
  --gris-bg:    #222d3b;

  --sombra: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------ el acento de cada sala
   Mismos tonos que FS para Rebisco y Biyemas. Kandiko no existe en FS: lleva un azul
   petróleo que no es rojo, ámbar, verde ni violeta (los colores de estado) y se distingue
   del índigo de Biyemas y del verde azulado de Rebisco. comun.js escribe data-sala. */
:root[data-sala="rebisco"] { --acento: #10776e; --acento-fuerte: #0f635c; --acento-hover: #1a847b; --acento-suave: #e7fbf9; --acento-banda: #6fd8cd; --sala-cabecera: #78b8b0; }
:root[data-sala="biyemas"] { --acento: #2d1dd8; --acento-fuerte: #261aa8; --acento-hover: #3628cc; --acento-suave: #e9e7fb; --acento-banda: #8a7fff; --sala-cabecera: #d5968c; }
:root[data-sala="kandiko"] { --acento: #0b6e99; --acento-fuerte: #0a5d82; --acento-hover: #12779f; --acento-suave: #e4f3fa; --acento-banda: #6cc4ea; --sala-cabecera: #8fb9cc; }

:root[data-tema="oscuro"][data-sala="rebisco"] { --acento: #6fd8cd; --acento-fuerte: #138077; --acento-hover: #15837a; --acento-suave: #163a37; }
:root[data-tema="oscuro"][data-sala="biyemas"] { --acento: #8a7fff; --acento-fuerte: #3c2de0; --acento-hover: #4c3fe0; --acento-suave: #19163a; }
:root[data-tema="oscuro"][data-sala="kandiko"] { --acento: #6cc4ea; --acento-fuerte: #0f7fae; --acento-hover: #1489b8; --acento-suave: #10303d; }

/* ============================================================ BASE */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 {
  margin: 0;
  line-height: 1.25;
  font-weight: 650;
  font-family: var(--fuente-display);
  letter-spacing: .01em;
  text-wrap: balance;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
[hidden] { display: none !important; }
.num { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
.tenue { color: var(--texto-tenue); }
.chico { font-size: .86rem; }

/* Franja de entorno: sólo fuera de producción, igual que en FS, para que nadie confunda el
   sitio de pruebas con la sala real. La agrega comun.js. */
.franja-entorno {
  background: var(--rojo);
  color: #fff;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
}

/* ============================================================ CABECERA (la banda) */
.barra {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 54px;
  padding: 6px 18px;
  background: var(--banda);
  color: #fff;
  box-shadow: var(--sombra);
  border-bottom: 3px solid var(--acento);
}
.barra .espacio { flex: 1; }
.marca {
  color: #fff;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marca b { font-weight: 400; color: rgba(255, 255, 255, .65); }

/* La sala, pegada a la marca y encerrada entre dos barras finas, como en FS. */
.sala-marca {
  display: flex;
  align-items: center;
  margin-left: -4px;
  padding: 0 11px;
  border-left: 1px solid rgba(255, 255, 255, .25);
  border-right: 1px solid rgba(255, 255, 255, .25);
  font-family: var(--fuente-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sala-cabecera);
  white-space: nowrap;
}
.sala-marca:empty { display: none; }
.sala-marca select {
  background: transparent;
  color: inherit;
  border: 0;
  border-bottom: 2px solid var(--sala-cabecera);
  border-radius: 0;
  padding: 0 0 1px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
}
.sala-marca select:hover { border-bottom-color: #fff; color: #fff; }
.sala-marca select option { color: var(--texto); background: var(--fondo-panel); letter-spacing: normal; }

.usuario-chip { color: #fff; font-size: .88rem; white-space: nowrap; }

/* Botones dentro de la banda: translúcidos, como el de tema y la campanita de FS. */
.barra .btn,
.barra .btn.sec {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}
.barra .btn:hover { background: rgba(255, 255, 255, .2); }
.barra :focus-visible { outline-color: #fff; }

/* ============================================================ BOTONES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid var(--acento-fuerte);
  border-radius: var(--radio-chico);
  background: var(--acento-fuerte);
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--acento-hover); border-color: var(--acento-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.sec { background: var(--fondo-panel); border-color: var(--borde-fuerte); color: var(--texto); }
.btn.sec:hover { background: var(--fondo-hover); }
.btn.peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn.peligro:hover { background: #92201a; border-color: #92201a; }
.btn:disabled { background: var(--gris-bg); border-color: var(--borde); color: var(--texto-tenue); cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn.bloque { display: flex; width: 100%; }
.btn.grande { min-height: 54px; padding: 14px 16px; font-size: 1.1rem; }
.btn.mini { min-height: 32px; padding: 4px 10px; font-size: .82rem; }

/* ============================================================ FORMULARIOS */
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: .85rem; font-weight: 600; color: var(--texto-suave); }
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="file"], select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--fondo-panel);
  color: var(--texto);
}
textarea { min-height: 76px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.check { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.check input { width: 18px; height: 18px; accent-color: var(--acento-fuerte); }

/* ============================================================ ETIQUETAS DE ESTADO (las .etq de FS) */
.pill {
  display: inline-block;
  font-size: .8rem;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  background: var(--gris-bg);
  color: var(--texto-suave);
}
.pill.pendiente  { background: var(--rojo-bg);     color: var(--rojo); }
.pill.tomado     { background: var(--ambar-bg);    color: var(--ambar); }
.pill.atendiendo { background: var(--acento-suave); color: var(--acento); }
.pill.resuelto   { background: var(--verde-bg);    color: var(--verde); }
.pill.derivado   { background: var(--violeta-bg);  color: var(--violeta); }

/* El semáforo de la espera, en la mono de los números que se miran de reojo. */
.espera {
  display: inline-block;
  min-width: 3.4em;
  text-align: center;
  font-family: var(--fuente-mono);
  font-weight: 700;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: var(--radio-chico);
  background: var(--verde-bg);
  color: var(--verde);
}
.espera.ambar { background: var(--ambar-bg); color: var(--ambar); }
.espera.rojo  { background: var(--rojo);     color: #fff; }

/* ============================================================ AVISOS (los flash de FS) */
.avisos {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 200; width: min(92vw, 440px); pointer-events: none;
}
.aviso {
  padding: 10px 14px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  background: var(--fondo-panel);
  color: var(--texto);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font-size: .92rem;
}
.aviso.ok    { background: var(--verde-bg); border-color: var(--verde); color: var(--verde); }
.aviso.error { background: var(--rojo-bg);  border-color: var(--rojo);  color: var(--rojo); }

/* ============================================================ DIÁLOGOS (los .modal de FS) */
dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: 90vh;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-panel);
  color: var(--texto);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
}
dialog::backdrop { background: rgba(10, 16, 26, .55); }
.dialogo { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.dialogo h2 { font-size: 1.15rem; }
.dialogo-pie { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dialogo-pie .btn { flex: 0 1 auto; }

/* ============================================================ PIEZAS COMUNES */
.panel {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Títulos de sección: la condensada en mayúscula, como en FS. */
.titulo-seccion {
  font-family: var(--fuente-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto);
}
.vacio {
  color: var(--texto-tenue);
  background: var(--fondo-suave);
  border: 1px dashed var(--borde);
  border-radius: var(--radio-chico);
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vacio b { color: var(--texto-suave); }
.pie-version {
  max-width: 1500px;
  margin: 0 auto;
  padding: 14px 18px 28px;
  color: var(--texto-tenue);
  font-size: .82rem;
  text-align: center;
}
.pie-version button { background: none; border: 0; padding: 0; color: var(--acento); cursor: pointer; font-size: inherit; }

/* Aviso de pedido nuevo: rojo pleno, que es lo único que tiene que gritar. */
.alerta-nueva {
  display: flex; flex-direction: column; gap: 2px; width: calc(100% - 36px); margin: 12px 18px 0;
  padding: 12px 14px; border: 0; border-radius: var(--radio); background: var(--rojo); color: #fff;
  text-align: left; cursor: pointer; box-shadow: var(--sombra);
}
:root[data-tema="oscuro"] .alerta-nueva { background: #b3261e; }
.alerta-nueva b { font-family: var(--fuente-display); font-size: 1.15rem; font-weight: 600; letter-spacing: .03em; }
.alerta-sonido { margin: 12px 18px 0; width: calc(100% - 36px); }

/* ============================================================ JUGADOR */
/* Sin scroll: la página mide exactamente el alto visible del celular (dvh descuenta la barra
   del navegador) y cada pantalla reparte ese alto. La franja de pruebas también entra en la
   cuenta porque body es la columna. Si un celular es tan chico que no entra, scrollea sólo
   el cuerpo, nunca la cabecera. */
.pagina-cliente { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.cliente { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cliente .barra { position: static; flex: none; min-height: 48px; }
.chip-slot {
  margin-left: auto;
  font-family: var(--fuente-mono);
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radio-chico);
  padding: 3px 10px;
}
.cliente-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}
/* La pantalla del jugador es FS "amable": la misma marca y los mismos colores, pero letra
   más grande y botones que se tocan sin apuntar. Quien la usa está parado frente a la
   máquina, a veces con poca luz, y no la vio nunca antes. */
.cliente { font-size: 17px; }
.cliente h1 { font-size: 1.6rem; }
.elegir-cabeza { display: flex; flex-direction: column; gap: 0; }
.elegir-cabeza .tenue { font-size: .92rem; }
.icono { display: inline-flex; flex: none; }
.icono svg { width: 26px; height: 26px; }
/* Texto de un botón con aclaración: "Asistencia" y, debajo, "(carga QR, cambio...)" más chico. */
.texto-op { display: flex; flex-direction: column; }
.texto-op small { font-size: .78em; font-weight: 500; color: var(--texto-suave); line-height: 1.2; }

/* Primera pantalla: los tres botones se reparten el alto, con tope para que en un celular
   alto no queden desproporcionados. */
.pantalla-elegir .lista-opciones { flex: 1; min-height: 0; gap: 12px; }
.pantalla-elegir .opcion-grande { flex: 1; min-height: 72px; max-height: 120px; font-size: 1.25rem; }
/* Asistencia técnica: la grilla toma todo el alto que sobra y estira sus filas. */
.pantalla-tecnica { gap: 9px; }
.pantalla-tecnica .opciones { flex: 1; min-height: 0; grid-auto-rows: minmax(min-content, 1fr); }
/* En celulares angostos la llave de cada falla le roba al texto el ancho que necesita para
   no irse a tres renglones; el título de la pantalla ya dice que son fallas. */
@media (max-width: 400px) {
  .opcion .icono { display: none; }
}

/* Los botones de la primera pantalla: anchos, con ícono y la franja del acento a la izquierda. */
.lista-opciones { display: flex; flex-direction: column; gap: 9px; }
.opcion-grande {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 9px 14px;
  border: 1px solid var(--borde-fuerte); border-left: 5px solid var(--acento); border-radius: var(--radio);
  background: var(--fondo-panel); color: var(--texto); text-align: left; cursor: pointer; box-shadow: var(--sombra);
  font-size: 1.15rem; font-weight: 650; line-height: 1.25;
}
.opcion-grande .icono { color: var(--acento); }
.opcion-grande.tipo-pago { border-left-color: var(--verde); }
.opcion-grande.tipo-pago .icono { color: var(--verde); }
.opcion-grande.tipo-falla { border-left-color: var(--ambar); }
.opcion-grande.tipo-falla .icono { color: var(--ambar); }
.opcion-grande.tipo-otro { border-left-color: var(--borde-medio); font-size: 1.05rem; min-height: 58px; }
.opcion-grande.tipo-otro .icono { color: var(--texto-suave); }
.opcion-grande:hover, .opcion:hover { background: var(--fondo-hover); }
.opcion-grande:active, .opcion:active { background: var(--acento-suave); border-color: var(--acento); }

/* Las fallas, de a dos. */
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcion {
  display: flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 6px 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  background: var(--fondo-panel); color: var(--texto); text-align: left; cursor: pointer; box-shadow: var(--sombra);
  font-size: .98rem; font-weight: 650; line-height: 1.2;
}
.opcion .icono { color: var(--ambar); }
.opcion .icono svg { width: 22px; height: 22px; }
.opcion.tipo-otro .icono { color: var(--texto-suave); }

/* Lo elegido, arriba de la confirmación: que no quede duda de qué se va a pedir. */
.elegido {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--fondo-panel); border: 1px solid var(--borde-fuerte); border-left: 5px solid var(--acento); border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.elegido .icono { color: var(--acento); }
.elegido .icono svg { width: 34px; height: 34px; }
.elegido.tipo-pago { border-left-color: var(--verde); }
.elegido.tipo-pago .icono { color: var(--verde); }
.elegido.tipo-falla { border-left-color: var(--ambar); }
.elegido.tipo-falla .icono { color: var(--ambar); }
.elegido-tipo { display: block; font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.elegido b { display: block; font-family: var(--fuente-display); font-weight: 600; font-size: 1.45rem; line-height: 1.15; }
.elegido b small { font-family: var(--fuente); font-size: .62em; }
.cliente .campo label { font-size: .92rem; }
.cliente input[type="text"], .cliente textarea { font-size: 1.05rem; min-height: 46px; }
.cliente textarea { min-height: 58px; }
.form-cliente { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pie-fijo { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.reloj { font-family: var(--fuente-mono); font-weight: 700; font-size: 2.6rem; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.quien {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  background: var(--fondo-panel); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio);
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--acento-fuerte); color: #fff; font-family: var(--fuente-display); font-weight: 600; font-size: 1.1rem;
}
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.paso { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding-bottom: 14px; position: relative; }
.paso:not(:last-child)::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: var(--borde-fuerte); }
.paso.hecho:not(:last-child)::before { background: var(--verde); }
.paso .punto { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--borde-medio); background: var(--fondo-panel); }
.paso.hecho .punto { background: var(--verde); border-color: var(--verde); }
.paso.ahora .punto { background: var(--acento); border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.paso b { display: block; font-weight: 650; }
.listo {
  width: 64px; height: 64px; border-radius: 50%; margin: 4px auto 0; display: grid; place-items: center;
  background: var(--verde); color: #fff; font-size: 2.4rem; font-weight: 700;
}
.estrellas { display: flex; justify-content: center; gap: 4px; }
.estrellas button { width: 48px; height: 48px; padding: 0; border: 0; background: transparent; font-size: 2.2rem; color: var(--borde-fuerte); cursor: pointer; }
.estrellas button.on { color: var(--ambar); }
.centrado { text-align: center; align-items: center; }
.mensaje-grande { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
@media (prefers-reduced-motion: no-preference) {
  .paso.ahora .punto { animation: latido 1.6s ease-in-out infinite; }
  @keyframes latido { 50% { box-shadow: 0 0 0 8px transparent; } }
}

/* ============================================================ LOGIN (la .pagina-login de FS) */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 18px; }
.login form {
  width: min(100%, 380px); display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px; background: var(--fondo-panel); border: 1px solid var(--borde);
  border-top: 4px solid var(--banda); border-radius: var(--radio); box-shadow: var(--sombra);
}
.login .marca { color: var(--texto); font-size: 1.5rem; }
.login .marca b { color: var(--texto-tenue); }
.login h1 { font-family: var(--fuente); font-size: 1rem; font-weight: 400; color: var(--texto-suave); letter-spacing: 0; }
.pin { letter-spacing: .5em; font-family: var(--fuente-mono); font-size: 1.3rem; text-align: center; }
#error { color: var(--rojo); }

/* ============================================================ STAFF (celular) */
.staff { min-height: 100vh; display: flex; flex-direction: column; }
.staff-cuerpo { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 14px 18px 96px; display: flex; flex-direction: column; gap: 10px; }
/* Las tarjetas del teléfono: panel con el borde izquierdo del semáforo. */
.tarjeta {
  width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--fondo-panel); color: var(--texto); border: 1px solid var(--borde-fuerte); border-left: 5px solid var(--verde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.tarjeta:hover { background: var(--fondo-hover); }
.tarjeta.ambar { border-left-color: var(--ambar); }
.tarjeta.rojo { border-left-color: var(--rojo); }
.tarjeta.cerrada { border-left-color: var(--borde-medio); }
.tarjeta .fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tarjeta .uid { font-family: var(--fuente-mono); font-weight: 700; font-size: 1.3rem; }
.tarjeta .acciones { display: flex; gap: 8px; }
.tarjeta .acciones .btn { flex: 1; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex;
  background: var(--fondo-panel); border-top: 1px solid var(--borde-fuerte); box-shadow: 0 -1px 4px rgba(0, 0, 0, .06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar button {
  flex: 1; min-height: 56px; border: 0; background: transparent; cursor: pointer; color: var(--texto-suave);
  font-family: var(--fuente-display); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
}
.tabbar button[aria-selected="true"] { color: var(--acento); font-weight: 600; box-shadow: inset 0 3px 0 var(--acento); }
.flotante {
  position: fixed; right: 18px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 91;
  width: 56px; height: 56px; padding: 0; border-radius: 50%; font-size: 1.8rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* ------------------------------------------------------------ detalle de un pedido */
.detalle-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.detalle-uid { font-family: var(--fuente-mono); font-weight: 700; font-size: 2rem; }
.detalle-motivo {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  background: var(--fondo-suave); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-chico);
}
.detalle-acciones { display: flex; flex-direction: column; gap: 8px; }
.detalle-acciones .fila-btn { display: flex; gap: 8px; flex-wrap: wrap; }
.detalle-acciones .fila-btn .btn { flex: 1 1 130px; }
.historial { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: .86rem; color: var(--texto-suave); }
.linea-tiempo { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: .9rem; }
.linea-tiempo dt { color: var(--texto-tenue); }
.linea-tiempo dd { margin: 0; font-family: var(--fuente-mono); }

/* ============================================================ MAPA POR ZONA */
.mapa { display: flex; flex-direction: column; gap: 14px; }
.zona-titulo { font-family: var(--fuente-display); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.zona-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Mosaico: todas las zonas a la vista, un punto por slot. Entra en una pantalla aunque la
   sala tenga cientos de máquinas; el número aparece al pasar el mouse o al abrir la zona. */
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; align-items: start; }
.zona-tarjeta {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 7px 8px; text-align: left; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--fondo-panel); color: inherit; font: inherit;
}
.zona-tarjeta:hover { border-color: var(--acento); background: var(--fondo-hover); }
.zona-tarjeta.con-activos { border-color: var(--acento-fuerte); }
.zona-tarjeta.con-pendientes { border-color: var(--rojo); box-shadow: inset 3px 0 0 var(--rojo); }
.zona-tarjeta-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.zona-tarjeta .zona-titulo { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-cuenta { font-family: var(--fuente-mono); font-size: .75rem; color: var(--texto-tenue); white-space: nowrap; }
.con-activos .zona-cuenta { color: var(--texto); font-weight: 600; }
.con-pendientes .zona-cuenta { color: var(--rojo); }
/* Zona donde acaba de entrar un pedido: titila tres veces junto con el aviso sonoro. */
.zona-tarjeta.recien { animation: zona-recien 1s ease-out 3; }
@keyframes zona-recien { from { background: var(--rojo-bg); } to { background: var(--fondo-panel); } }
@media (prefers-reduced-motion: reduce) { .zona-tarjeta.recien { animation: none; background: var(--rojo-bg); } }
.mosaico-separador {
  grid-column: 1 / -1; padding-top: 4px; border-top: 1px dashed var(--borde-fuerte);
  font-family: var(--fuente-display); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue);
}
.puntos { display: grid; grid-template-columns: repeat(auto-fill, 7px); gap: 2px; }
.puntos i { width: 7px; height: 7px; border-radius: 1px; background: var(--borde-fuerte); }
.puntos i.pendiente { background: var(--rojo); }
.puntos i.tomado { background: #c98a12; }
.puntos i.atendiendo { background: var(--acento-fuerte); }
.puntos i.fuera { background: var(--texto-tenue); }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.casilla {
  aspect-ratio: 1; min-width: 0; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--fondo-suave);
  color: var(--texto-suave); font-family: var(--fuente-mono); font-size: .72rem; font-weight: 600;
}
.casilla:hover { border-color: var(--acento); }
.casilla.pendiente  { background: var(--rojo);  border-color: var(--rojo);  color: #fff; }
.casilla.tomado     { background: #c98a12;      border-color: #c98a12;      color: #241800; }
.casilla.atendiendo { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: #fff; }
.casilla.fuera { background: repeating-linear-gradient(45deg, var(--gris-bg) 0 4px, var(--fondo-panel) 4px 7px); color: var(--texto-tenue); }
:root[data-tema="oscuro"] .casilla.pendiente { background: #b3261e; border-color: #b3261e; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--texto-suave); }
.leyenda span { display: inline-flex; gap: 6px; align-items: center; }
.leyenda i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid var(--borde-fuerte); }
.leyenda .l-pendiente { background: var(--rojo); }
.leyenda .l-tomado { background: #c98a12; }
.leyenda .l-atendiendo { background: var(--acento-fuerte); }
.leyenda .l-fuera { background: repeating-linear-gradient(45deg, var(--gris-bg) 0 3px, var(--fondo-panel) 3px 5px); }

/* ============================================================ CONTROL (PC) */
.control { min-height: 100vh; display: flex; flex-direction: column; }
/* Los KPI de FS: panel con la franja izquierda del color de lo que cuentan. */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 18px 0; max-width: 1500px; width: 100%; margin: 0 auto; }
.kpi {
  display: flex; align-items: baseline; gap: 8px; padding: 9px 13px;
  background: var(--fondo-panel); border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.kpi b { font-family: var(--fuente-mono); font-size: 1.5rem; font-weight: 700; line-height: 1.05; }
.kpi small { font-size: .82rem; color: var(--texto-suave); }
.kpi.rojo { border-left-color: var(--rojo); }
.kpi.rojo b { color: var(--rojo); }
.kpi.ambar { border-left-color: var(--ambar); }
.kpi.ambar b { color: var(--ambar); }
.kpi.azul { border-left-color: var(--acento); }
.kpi.azul b { color: var(--acento); }
.kpi.verde { border-left-color: var(--verde); }
.kpi.verde b { color: var(--verde); }
@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.control-cuerpo {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 16px;
  padding: 16px 18px; max-width: 1500px; width: 100%; margin: 0 auto; align-items: start;
}
.columna { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 900px) { .control-cuerpo { grid-template-columns: 1fr; } }

/* Filtros: las .chips de FS. */
.filtros { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.filtros .espacio { flex: 1; }
.filtros button:not(.btn) {
  min-height: 32px; padding: 4px 12px; border-radius: 20px; cursor: pointer; font-size: .85rem; font-weight: 550;
  border: 1px solid var(--borde-fuerte); background: var(--fondo-panel); color: var(--texto-suave);
}
.filtros button:not(.btn):hover { background: var(--fondo-hover); color: var(--texto); }
.filtros button[aria-pressed="true"] { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: #fff; }

/* Tablas: encabezado en mayúscula chica con la línea doble de FS. */
.tabla-cont { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th {
  text-align: left; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-suave); padding: 8px 9px; border-bottom: 2px solid var(--borde-fuerte); white-space: nowrap;
}
.tabla td { padding: 8px 9px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: var(--fondo-hover); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla td.uid { font-family: var(--fuente-mono); font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.tabla .num { text-align: right; }

/* Cola de /control: una fila por pedido, sin tabla, para que nada se corte ni pida scroll
   lateral. La espera va grande a la izquierda y la franja del borde repite su color: desde
   el otro lado de la sala se ve si hay algo en rojo. */
.lista-pedidos { display: flex; flex-direction: column; gap: 6px; }
.lista-pedidos:empty { display: none; }
.fila-pedido {
  display: grid; grid-template-columns: 4.6em minmax(5.5em, auto) minmax(0, 1fr) auto 6.2em; gap: 12px; align-items: center;
  padding: 8px 10px; background: var(--fondo-panel); border: 1px solid var(--borde); border-left: 4px solid var(--verde);
  border-radius: var(--radio-chico); cursor: pointer;
}
.fila-pedido:hover { background: var(--fondo-hover); }
.fila-pedido:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.fila-pedido.ambar { border-left-color: var(--ambar); }
.fila-pedido.rojo { border-left-color: var(--rojo); }
.fila-pedido .espera { font-size: 1.05rem; padding: 5px 0; min-width: 0; width: 100%; }
.fila-slot, .fila-motivo { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fila-slot b { font-family: var(--fuente-mono); font-size: 1.1rem; white-space: nowrap; }
.fila-slot small, .fila-motivo small { font-size: .8rem; color: var(--texto-suave); }
.fila-motivo b, .fila-motivo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-motivo b { font-weight: 650; }
.etq-tipo {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 3px; vertical-align: 1px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--gris-bg); color: var(--texto-suave);
}
.etq-tipo.falla { background: var(--ambar-bg); color: var(--ambar); }
.etq-tipo.pago { background: var(--verde-bg); color: var(--verde); }
.etq-tipo.atencion { background: var(--acento-suave); color: var(--acento); }
.fila-accion .btn { width: 100%; min-height: 36px; }
.filtros .cuenta { margin-left: 3px; font-family: var(--fuente-mono); font-size: .78rem; opacity: .85; }
/* Las filas se acomodan al ancho del panel, no al de la pantalla: en /control la cola
   comparte el monitor con el mapa y puede quedar angosta aunque la pantalla sea grande. */
.columna { container-type: inline-size; }
@container (max-width: 600px) {
  .fila-pedido { grid-template-columns: 4.4em minmax(0, 1fr) auto; grid-template-areas: "espera slot estado" "motivo motivo accion"; row-gap: 6px; }
  .fila-pedido .espera { grid-area: espera; }
  .fila-slot { grid-area: slot; }
  .fila-motivo { grid-area: motivo; }
  .fila-estado { grid-area: estado; }
  .fila-accion { grid-area: accion; min-width: 5.5em; }
}

/* En curso y cerrados van en paneles separados: lo que hay que atender lleva la línea del
   acento arriba y fondo pleno; lo cerrado queda en un panel más apagado, que se lee como
   historia y no compite con la cola. */
.control-cuerpo > .columna { gap: 20px; }
.panel-en-curso { border-top: 3px solid var(--acento); }
.panel-cerrados { background: var(--fondo-suave); box-shadow: none; }
.panel-cerrados .titulo-seccion { color: var(--texto-suave); }
.panel-cerrados .cifras-turno div { background: var(--fondo-panel); }
.cuenta-seccion {
  display: inline-block; min-width: 1.6em; margin-left: 6px; padding: 0 7px; border-radius: 20px; vertical-align: 2px;
  background: var(--acento-fuerte); color: #fff; font-family: var(--fuente-mono); font-size: .8rem; letter-spacing: 0; text-align: center;
}
.cuenta-seccion:empty { display: none; }

/* Cerrados: cifras del turno y una línea por pedido. */
.cifras-turno { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cifras-turno div { display: flex; flex-direction: column; padding: 7px 11px; background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.cifras-turno b { font-family: var(--fuente-mono); font-size: 1.2rem; font-weight: 700; }
.cifras-turno small { font-size: .78rem; color: var(--texto-suave); }
@container (max-width: 420px) { .cifras-turno { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lista-cerrados { display: flex; flex-direction: column; }
.fila-cerrado {
  display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto 3.6em 5.4em; gap: 10px; align-items: center;
  padding: 7px 6px; border-bottom: 1px solid var(--borde); font-size: .92rem; cursor: pointer;
}
.fila-cerrado:last-child { border-bottom: 0; }
.fila-cerrado:hover { background: var(--fondo-hover); }
.fila-cerrado:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.fila-cerrado-uid { font-family: var(--fuente-mono); font-weight: 700; white-space: nowrap; }
.fila-cerrado-motivo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-cerrado-motivo small { color: var(--texto-suave); font-size: .85rem; }
.fila-cerrado-cuando { display: flex; align-items: center; gap: 6px; font-family: var(--fuente-mono); font-size: .82rem; color: var(--texto-suave); white-space: nowrap; }
.fila-cerrado-total { font-family: var(--fuente-mono); font-size: .88rem; text-align: right; }
.estrellas-fila { color: var(--ambar); letter-spacing: 1px; white-space: nowrap; text-align: right; }
.estrellas-fila span { color: var(--borde-fuerte); }
.fila-cerrado > .tenue { text-align: right; }
@container (max-width: 600px) {
  .fila-cerrado { grid-template-columns: 5.8em minmax(0, 1fr) auto 3.4em; }
  .fila-cerrado-hora, .fila-cerrado > .estrellas-fila, .fila-cerrado > .tenue { display: none; }
}
@container (max-width: 400px) {
  .fila-cerrado { grid-template-columns: 5.8em minmax(0, 1fr) auto; }
  .fila-cerrado-total { display: none; }
}
.enlace {
  align-self: flex-start; padding: 2px 0; border: 0; background: none; cursor: pointer;
  color: var(--acento); font: inherit; font-size: .9rem; font-weight: 600;
}
.enlace:hover { text-decoration: underline; }

/* ============================================================ ADMIN */
/* Menú lateral oscuro, de la misma familia que la banda; en el celular pasa a una tira
   horizontal arriba para no comerse el ancho. */
.admin-app { display: grid; grid-template-columns: 210px minmax(0, 1fr); flex: 1; min-height: calc(100vh - 56px); }
.admin-menu { background: #101826; padding: 14px 0; display: flex; flex-direction: column; gap: 14px; }
.menu-grupo { display: flex; flex-direction: column; }
.menu-titulo { padding: 0 18px 4px; font-family: var(--fuente-display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #7d8796; }
.admin-menu button {
  display: block; width: 100%; padding: 9px 18px; border: 0; border-left: 3px solid transparent; background: transparent; cursor: pointer;
  text-align: left; color: #c9d1dc; font-family: var(--fuente-display); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
}
.admin-menu button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.admin-menu button[aria-current="true"] { background: rgba(255, 255, 255, .1); color: #fff; border-left-color: var(--acento); }
.admin-menu :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.admin-contenido { width: 100%; max-width: 1400px; padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.admin-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-cabecera h1 { font-family: var(--fuente-display); font-size: 1.5rem; font-weight: 600; letter-spacing: .03em; }
.admin-cabecera h1 small { font-family: var(--fuente); font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--texto-suave); }
.admin-cabecera .espacio { flex: 1; }
.admin-pila { display: flex; flex-direction: column; gap: 14px; }
.admin-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 600px) { .admin-dos { grid-template-columns: minmax(0, 1fr); } }
.mono { font-family: var(--fuente-mono); }
.dato-barra { display: flex; align-items: center; gap: 8px; width: 120px; }
.dato-barra .barra-dato { flex: none; max-width: calc(100% - 3.5em); }
.dato-barra b { font-family: var(--fuente-mono); font-weight: 600; }
@media (max-width: 800px) {
  .admin-app { grid-template-columns: 1fr; min-height: 0; }
  .admin-menu { flex-direction: row; overflow-x: auto; padding: 0; gap: 0; position: sticky; top: 0; z-index: 5; }
  .menu-grupo { flex-direction: row; }
  .menu-titulo { display: none; }
  .admin-menu button { width: auto; white-space: nowrap; padding: 11px 14px; border-left: 0; border-bottom: 3px solid transparent; font-size: .9rem; }
  .admin-menu button[aria-current="true"] { border-bottom-color: var(--acento); }
  .admin-contenido { padding: 14px; }
}

/* Máquinas: filtros arriba, lista y la ficha de la máquina al costado. */
.maquinas-filtros input[type="search"] { flex: 1 1 220px; min-width: 0; }
.maquinas-filtros select { width: auto; }
.maquinas-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.maquinas-cuerpo:has(.maquina-ficha[hidden]) { grid-template-columns: minmax(0, 1fr); }
.maquinas-lista tbody tr.elegida { background: var(--acento-suave); }
.maquinas-lista th:first-child, .maquinas-lista td:first-child { width: 34px; }
.maquina-ficha { position: sticky; top: 14px; }
.ficha-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ficha-cabeza .detalle-uid { font-size: 1.35rem; white-space: nowrap; }
.ficha-acciones { display: flex; flex-direction: column; gap: 8px; }
.barra-seleccion {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 13px;
  background: var(--acento-suave); border: 1px solid var(--acento); border-radius: var(--radio-chico);
}
@media (max-width: 1099px) {
  .maquinas-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .maquina-ficha { position: static; order: -1; }
}

/* Carteles: buscar y zonas a la izquierda; a la derecha, siempre a la vista, lo que se va a
   imprimir y una muestra real del cartel. */
.carteles-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 16px; align-items: start; }
.carteles-lateral { position: sticky; top: 14px; }
.buscador input { min-height: 44px; font-size: 1rem; }
.resultados { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio-chico); max-height: 340px; overflow-y: auto; }
.resultados-vacio { padding: 10px 12px; }
.resultado {
  display: grid; grid-template-columns: 22px 7.5em minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%;
  padding: 8px 12px; border: 0; border-bottom: 1px solid var(--borde); background: var(--fondo-panel); color: var(--texto);
  font: inherit; font-size: .92rem; text-align: left; cursor: pointer;
}
.resultado:last-child { border-bottom: 0; }
.resultado:hover { background: var(--fondo-hover); }
.resultado[aria-selected="true"] { background: var(--acento-suave); }
.resultado:disabled { cursor: default; opacity: .55; }
.resultado.es-zona { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
.resultado > span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado .tenue { font-size: .82rem; white-space: nowrap; }
.marca-elegir {
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px;
  border: 1.5px solid var(--borde-fuerte); font-size: .75rem; font-weight: 700; color: #fff;
}
[aria-selected="true"] > .marca-elegir { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
mark { background: var(--ambar-bg); color: inherit; border-radius: 2px; padding: 0 1px; }
.zonas-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.zonas-elegir button {
  display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 36px; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--fondo-panel); color: var(--texto); font: inherit; font-size: .88rem;
}
.zonas-elegir button b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zonas-elegir button span { font-family: var(--fuente-mono); font-size: .78rem; color: var(--texto-suave); }
.zonas-elegir button:hover { background: var(--fondo-hover); }
.zonas-elegir button[aria-pressed="true"] { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: #fff; }
.zonas-elegir button[aria-pressed="true"] span { color: rgba(255, 255, 255, .8); }
.carteles-total { display: flex; align-items: baseline; gap: 8px; }
.carteles-total b { font-family: var(--fuente-mono); font-size: 2.2rem; line-height: 1; }
.carteles-total span { color: var(--texto-suave); }
.elegidos { display: flex; flex-wrap: wrap; gap: 5px; max-height: 160px; overflow-y: auto; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 9px; border-radius: 20px; font-size: .82rem;
  background: var(--fondo-suave); border: 1px solid var(--borde-fuerte);
}
.etiqueta button { border: 0; background: none; padding: 0 6px; cursor: pointer; color: var(--texto-suave); font-size: 1rem; line-height: 1; }
.etiqueta button:hover { color: var(--rojo); }
.carteles-muestra { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.carteles-muestra .cartel { width: 92mm; height: 84mm; box-shadow: var(--sombra); }
.fila-btn { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.apagado { pointer-events: none; opacity: .45; }
@media (max-width: 1000px) {
  .carteles-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .carteles-lateral { position: static; }
}
@media (max-width: 600px) {
  .resultado { grid-template-columns: 22px 6.5em minmax(0, 1fr); }
  .resultado > span:last-child { display: none; }
  .carteles-muestra .cartel { transform: scale(.85); transform-origin: top center; }
}

/* Personal: una tarjeta por persona. */
.tarjetas-personal { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.persona {
  display: flex; flex-direction: column; gap: 8px; padding: 13px 14px;
  background: var(--fondo-panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
}
.persona.inactiva { opacity: .6; box-shadow: none; }
.persona-cabeza { display: flex; align-items: center; gap: 10px; min-width: 0; }
.persona-cabeza div { display: flex; flex-direction: column; min-width: 0; }
.persona-cabeza b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-cabeza small { font-size: .82rem; color: var(--texto-suave); }
.persona .avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--acento-suave); color: var(--acento); font-family: var(--fuente-display); font-weight: 600; letter-spacing: .04em;
}
.persona-acciones { display: flex; gap: 6px; margin-top: auto; }
.campo-con-boton { display: flex; gap: 6px; }
.campo-con-boton input { flex: 1; min-width: 0; }
.pin-nuevo { font-family: var(--fuente-mono); font-size: 2.4rem; font-weight: 700; letter-spacing: .2em; text-align: center; padding: 10px; background: var(--fondo-suave); border-radius: var(--radio-chico); }
.formulario { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.resumen-import { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.resumen-import div { padding: 9px 12px; background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio-chico); color: var(--texto-suave); font-size: .88rem; }
.resumen-import b { display: block; font-family: var(--fuente-mono); font-size: 1.4rem; color: var(--texto); }
.lista-errores { margin: 0; padding: 8px 12px 8px 28px; max-height: 200px; overflow: auto; background: var(--ambar-bg); color: var(--ambar); border-radius: var(--radio-chico); font-size: .88rem; }
.cifras { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cifra {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 13px;
  background: var(--fondo-panel); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio); box-shadow: var(--sombra);
}
.cifra b { font-family: var(--fuente-mono); font-size: 1.5rem; font-weight: 700; color: var(--acento); }
.cifra small { color: var(--texto-suave); font-size: .82rem; }
.barra-dato { height: 8px; min-width: 2px; border-radius: 2px; background: var(--acento); }
.novedad { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.novedad pre { margin: 0; white-space: pre-wrap; font-family: var(--fuente); font-size: .9rem; color: var(--texto-suave); }

/* ============================================================ TELÉFONO */
@media (max-width: 700px) {
  .barra { gap: 10px; padding: 6px 14px; }
  .marca, .sala-marca { font-size: 1rem; }
  .usuario-chip { display: none; }
  .kpis, .control-cuerpo { padding-left: 14px; padding-right: 14px; }
  .cliente-cuerpo, .staff-cuerpo { padding-left: 14px; padding-right: 14px; }
}