/* Pantalla del mostrador. Fondo claro (reflejos del local), contraste ≥ 7:1, y cada estado dicho
   con color + forma + palabra: nunca solo el color. */
:root {
  --fondo: #F5F6F7; --tarjeta: #FFFFFF;
  --tinta: #111418; --tinta-2: #3F464C;
  --accion: #0B4FD1; --hecho: #0F6B3C; --hecho-f: #EEF1F3;
  --ojo: #8A4B00; --ojo-f: #FFF4E5; --falla: #A4161A;
  --escala: 1;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
button { font: inherit; cursor: pointer; }
.cifra { font-variant-numeric: tabular-nums; }

/* Cabecera y franja de estado */
.cabecera { display: flex; justify-content: space-between; align-items: center; padding: 6px 24px; height: 56px; }
.titulo { font: 700 calc(26px * var(--escala))/1 system-ui; }
.reloj { font: 700 calc(44px * var(--escala))/1 system-ui; font-variant-numeric: tabular-nums; }
.franja {
  min-height: 56px; padding: 10px 24px; font: 700 calc(28px * var(--escala))/1.25 system-ui;
  background: var(--hecho-f); color: var(--tinta-2); border-left: 14px solid var(--tinta-2);
}
.franja.al-dia::before { content: "✓ "; }
.franja.ojo { background: var(--ojo-f); color: var(--ojo); border-left: 14px dashed var(--ojo); }
.franja.ojo::before { content: "▨ "; }
.franja.falla { background: var(--falla); color: #fff; border-left-color: #fff; min-height: 96px; }
.franja.falla::before { content: "✕ "; }

.principal { padding: 12px 24px 112px; overflow-x: hidden; }
.rotulo { font: 600 calc(24px * var(--escala))/1.2 system-ui; color: var(--tinta-2); margin: 14px 0 6px; }
.rotulo.peligro { color: var(--falla); }

/* Tarjeta del último pago */
.tarjeta {
  position: relative; background: var(--tarjeta); border-radius: 12px; padding: 14px 24px;
  border-left: 14px solid var(--accion); margin-bottom: 16px;
}
.tarjeta .rotulo { margin: 0 0 4px; }
.tarjeta .monto { font: 800 calc(124px * var(--escala))/1 system-ui; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tarjeta .quien { font: 700 calc(52px * var(--escala))/1.15 system-ui; }
.tarjeta .detalle { font: 600 calc(36px * var(--escala))/1.2 system-ui; color: var(--tinta-2); }
.tarjeta .fila { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 8px; }
.tarjeta.nueva { animation: entra .32s ease-out, avisa .7s ease-in-out 2; }
.tarjeta.nueva::after {
  content: "NUEVO"; position: absolute; top: 20px; right: 24px; background: var(--accion); color: #fff;
  font: 800 26px/1 system-ui; padding: 10px 16px; border-radius: 8px; letter-spacing: .06em;
}
.tarjeta.atendida { border-left-color: var(--hecho); background: var(--hecho-f); }
.tarjeta.atendida .monto { color: var(--tinta-2); }
.tarjeta.vacia { border-left-color: var(--tinta-2); }
.tarjeta.vacia .quien { color: var(--tinta-2); }
.atender {
  min-height: 110px; min-width: 380px; padding: 0 32px; border: 0; border-radius: 14px; flex-shrink: 0;
  background: var(--accion); color: #fff; font: 800 calc(44px * var(--escala))/1 system-ui;
}
.sello { font: 700 36px/1.2 system-ui; color: var(--hecho); }
.sello::before { content: "✓ "; font-size: 44px; }
.deshacer { min-height: 88px; padding: 0 24px; border: 2px solid var(--tinta-2); border-radius: 12px; background: #fff; font-size: 28px; }

/* Varios pagos del mismo monto: el cajero elige */
.ambiguo { border-left-color: var(--ojo); background: var(--ojo-f); }
.ambiguo h2 { font: 800 calc(40px * var(--escala))/1.15 system-ui; color: var(--ojo); margin: 0 0 12px; }
.ambiguo h2::before { content: "⚠ "; }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 48px; }
.opcion { background: #fff; border-radius: 12px; padding: 16px 20px; }
.opcion .hora { font: 800 calc(48px * var(--escala))/1.1 system-ui; white-space: nowrap; }
.opcion .hace { font: 600 calc(28px * var(--escala))/1.2 system-ui; color: var(--tinta-2); }
.opcion .quien { font: 700 calc(44px * var(--escala))/1.2 system-ui; }
.opcion .atender { min-width: 0; width: 100%; margin-top: 12px; min-height: 96px; font-size: calc(36px * var(--escala)); }

/* Lista */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: grid; grid-template-columns: 6.9em 7.4em minmax(0, 1fr) 8.2em 6.4em; gap: 16px; align-items: center;
  background: var(--tarjeta); border-radius: 10px; padding: 8px 18px; margin-bottom: 6px; white-space: nowrap;
  font: 600 calc(30px * var(--escala))/1.2 system-ui; font-variant-numeric: tabular-nums;
  border-left: 10px solid var(--accion);
}
.lista li > span { overflow: hidden; text-overflow: ellipsis; }
.lista li .m { font-weight: 800; font-size: calc(36px * var(--escala)); text-align: right; }
.lista li .e { font-size: calc(24px * var(--escala)); }
.lista li.atendido { border-left-color: var(--hecho); background: var(--hecho-f); }
.lista li.atendido .e::before { content: "✓ "; }
.lista li.pendiente .e::before { content: "• "; }
.lista li.sv { border-left: 10px dashed var(--falla); background: #F6E9EA; color: var(--tinta-2); }
.lista li.sv .m { font-size: calc(30px * var(--escala)); }
.lista .vacio { display: block; color: var(--tinta-2); border-left-color: var(--tinta-2); }

.aviso-falla { background: var(--falla); color: #fff; padding: 24px; border-radius: 12px; font: 700 32px/1.3 system-ui; }

/* Pie y búsqueda */
.pie {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 16px; align-items: center;
  padding: 12px 24px; background: var(--fondo); border-top: 2px solid #D5D9DD;
}
.boton-sec { min-height: 88px; padding: 0 28px; border: 2px solid var(--tinta-2); border-radius: 12px; background: #fff; font-size: 30px; font-weight: 700; }
.chip-sonido { flex: 1; min-height: 88px; display: flex; align-items: center; justify-content: center; background: var(--ojo-f); color: var(--ojo); border-radius: 12px; font: 700 28px/1 system-ui; }
.buscar { position: fixed; inset: 0; background: rgba(17,20,24,.6); display: flex; align-items: center; justify-content: center; }
.buscar-caja { background: var(--fondo); border-radius: 16px; padding: 20px; width: min(1220px, 98vw); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.buscar-der { display: flex; flex-direction: column; justify-content: space-between; }
.q { display: block; margin-bottom: 12px; font: 800 64px/1.1 system-ui; font-variant-numeric: tabular-nums; text-align: right; padding: 8px 12px; background: #fff; border-radius: 10px; }
.resultado { font: 600 32px/1.3 system-ui; }
.resultado > * { margin: 0 0 12px; }
.resultado .hoy { color: var(--hecho); font-weight: 800; background: var(--hecho-f); padding: 12px; border-radius: 10px; border-left: 10px solid var(--hecho); }
.resultado .viejo { background: var(--ojo-f); color: var(--ojo); padding: 12px; border-radius: 10px; border-left: 10px dashed var(--ojo); }
.teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.teclas button { min-height: 104px; font: 700 56px/1 system-ui; border: 0; border-radius: 12px; background: #fff; }

/* Arranque del turno (gesto que desbloquea sonido y pantalla completa) */
.arranque { position: fixed; inset: 0; z-index: 10; background: var(--fondo); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.arranque h1 { font: 800 48px/1.2 system-ui; }
.arranque p { font: 600 32px/1.3 system-ui; color: var(--tinta-2); max-width: 900px; }
.arranque button, .inscribir button { min-height: 120px; min-width: 360px; border: 0; border-radius: 16px; background: var(--accion); color: #fff; font: 800 48px/1 system-ui; }
body[data-turno="abierto"] .arranque { display: none; }

.inscribir main { max-width: 640px; margin: 10vh auto; padding: 24px; font-size: 28px; }
.inscribir input { width: 100%; font: 800 56px/1.2 system-ui; letter-spacing: .1em; padding: 12px; margin: 16px 0; text-transform: uppercase; border: 2px solid var(--tinta-2); border-radius: 12px; }
.inscribir .error { color: var(--falla); font-weight: 700; }

@keyframes entra { from { transform: translateY(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes avisa { 0%, 100% { box-shadow: 0 0 0 0 #0B4FD100; } 50% { box-shadow: 0 0 0 12px #0B4FD155; } }
@media (prefers-reduced-motion: reduce) { .tarjeta.nueva { animation: none; } }