/* ===========================================================================
   panel.css — Cuadre de caja Las Crepes

   Mobile-first, PERO el sitio donde de verdad se llena es el PC del local
   (Cristian, ago-2026: «esto se va a llenar desde el pc del local»). Es el
   mismo PC que tiene enchufada la térmica de 58mm, así que ahí el cuadre se
   escribe y se imprime sin pasar por ningún lado.

   Se mantiene mobile-first igual, por dos razones concretas: el celular sigue
   siendo el plan B cuando el PC está ocupado tomando pedidos, y una sola hoja
   de estilos que se adapta es menos cosa que mantener que dos panels. Lo del
   PC entra al final, en `@media (min-width: 1000px)` — pantalla ancha, dos
   columnas, y menos scroll.

   Reglas: botones grandes (mín. 44 px), contraste alto, cero scroll infinito
   (una sección a la vez), y el descuadre SIEMPRE visible arriba.
   =========================================================================== */

:root {
  --fondo:      #12100e;
  --panel:      #1c1917;
  --panel-alto: #262220;
  --borde:      #3a3431;
  --texto:      #f5f0eb;
  --texto-2:    #a89f98;
  --acento:     #e8a33d;   /* mostaza Las Crepes */
  --ok:         #3fb96b;
  --mal:        #e5484d;
  --radio:      12px;
  --alto-barra: 62px;
  --alto-pasos: 48px;
  --alto-nav:   64px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;           /* 16px evita el zoom automático de iOS al enfocar */
  line-height: 1.45;
}

/* ---------------------------------------------------------------- BARRA --- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: var(--alto-barra);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
}
.barra-dato { flex: 1; min-width: 0; }
.barra-lbl {
  display: block; font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-2);
}
.barra-val {
  display: block; font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.barra-descuadre { text-align: right; }
.barra-descuadre.ok    .barra-val { color: var(--ok); }
.barra-descuadre.mal   .barra-val { color: var(--mal); }
.barra-guardado {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--texto-2); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; padding: 6px;
}
.barra-guardado.activo { color: var(--ok); }

/* ---------------------------------------------------------------- PASOS --- */
.pasos {
  position: fixed; z-index: 29; left: 0; right: 0;
  top: calc(var(--alto-barra) + env(safe-area-inset-top));
  height: var(--alto-pasos);
  display: flex; gap: 6px; padding: 6px 10px;
  overflow-x: auto; scrollbar-width: none;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}
.pasos::-webkit-scrollbar { display: none; }
.paso {
  flex: 0 0 auto; border: 1px solid var(--borde); background: var(--panel);
  color: var(--texto-2); border-radius: 999px;
  padding: 5px 13px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.paso.activo { background: var(--acento); border-color: var(--acento); color: #1a1512; font-weight: 700; }
.paso.lleno::after { content: " ✓"; color: var(--ok); }
.paso.activo.lleno::after { color: #1a1512; }

/* ----------------------------------------------------------------- MAIN --- */
main {
  padding: calc(var(--alto-barra) + var(--alto-pasos) + env(safe-area-inset-top) + 12px)
           12px calc(var(--alto-nav) + env(safe-area-inset-bottom) + 24px);
  max-width: 720px; margin: 0 auto;
}
.seccion { display: none; }
.seccion.activa { display: block; animation: entra .16s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h2 { font-size: 20px; margin: 4px 0 14px; }
.nota { color: var(--texto-2); font-size: 13px; margin: 10px 0; }

/* --------------------------------------------------------------- CAMPOS --- */
.campo { margin-bottom: 16px; }
.campo label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 6px; color: var(--texto);
}
.campo label small { display: block; font-weight: 400; color: var(--texto-2); font-size: 12px; }

/* `.etiqueta` es un <span>, no un <label>, y por eso necesita regla propia:
   rotula un grupo de chips (la sucursal), que son <button>, no un campo de
   formulario. Un <label for=…> apuntando a un botón no significa nada y algunos
   lectores de pantalla lo anuncian mal. Se ve igual que un label a propósito:
   para el cajero es la misma cosa. */
.etiqueta {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 6px; color: var(--texto);
}

/* Aviso de turno 2 (cambio de cajero). Ámbar y enmarcado, no gris de nota: el
   que entra tiene que ver SIN buscarlo que está cuadrando un segundo turno y
   que la BASE de abajo es lo que le entregaron, no la apertura del día. */
.turno-aviso {
  background: #2a2015; border: 1px solid #6b4c1c; color: #f0d3a0;
  border-radius: var(--radio); padding: 10px 12px;
  font-size: 14px; margin: 0 0 16px;
}
.turno-aviso[hidden] { display: none; }

input[type="text"], input[type="date"], input[type="time"], textarea {
  width: 100%; padding: 13px 12px;
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio);
  font-size: 16px; font-family: inherit;
}
/* `resize: vertical` y no `none`: si el cajero tiene mucho que contar, que
   pueda ver lo que escribió. Horizontal sí se bloquea (rompe el layout). */
textarea { resize: vertical; min-height: 84px; line-height: 1.4; }
input:focus, textarea:focus {
  outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento);
}
input.plata { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
input::placeholder, textarea::placeholder { color: #6b625c; }

/* Aviso vivo bajo VENDTLY: bruta − anuladas = neta. */
.neteo {
  margin: 8px 0 0; padding: 8px 10px; font-size: 13px;
  background: var(--panel-alto); border: 1px solid var(--borde);
  border-radius: var(--radio); color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.neteo b { color: var(--texto); }

/* ---------------------------------------------------------------- CHIPS --- */
/* Nombres/conceptos frecuentes: un toque y solo queda meter el valor. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  border: 1px solid var(--borde); background: var(--panel-alto); color: var(--texto);
  border-radius: 999px; padding: 7px 13px; font-size: 14px; cursor: pointer;
}
.chip:active { background: var(--acento); color: #1a1512; }

/* --- Los chips de SUCURSAL son distintos a todos los demás ---------------
   Los otros chips son atajos: se tocan, agregan una línea y vuelven a su
   estado normal. Estos son un INTERRUPTOR — uno de los dos está siempre
   puesto y hay que poder ver cuál desde lejos, porque de la sede dependen los
   domicilios que trae el bot y la clave con la que se guarda el cuadre.
   Cuadrar Circunvalar creyendo que es La Villa es el error caro de esta
   pantalla, y sale gratis si el chip activo no se distingue. */
.chips-sede { gap: 8px; }
.chips-sede .chip { flex: 1 1 0; min-width: 0; text-align: center; padding: 12px 10px; }
.chip-sede.activo {
  background: var(--acento); border-color: var(--acento);
  color: #1a1512; font-weight: 700;
}
/* El `:active` general pinta el chip de mostaza mientras se tiene el dedo
   encima. En estos eso mentiría por un instante (parecería que ya cambió la
   sede), así que el que NO está activo se queda quieto al tocarlo: lo que
   confirma el cambio es que el otro se apague. */
.chip-sede:not(.activo):active { background: var(--panel-alto); color: var(--texto); }

/* --- Editar la lista de chips (proveedores, nombres de turno, métodos) ---
   El lápiz entra en modo edición: los chips dejan de agregar líneas y cada uno
   saca su ×. Que dejen de ser botones de agregar es a propósito: si siguieran
   siéndolo, fallar el toque del × por un milímetro metería una línea de plata
   en el cuadre. */
.chips.editando { padding: 6px; border: 1px dashed var(--borde); border-radius: var(--radio); }
.chip-editar { padding: 7px 11px; color: var(--texto-2); }
.chip-editar.activo { background: var(--acento); color: #1a1512; border-color: var(--acento); }
.chip-ed { display: inline-flex; align-items: center; gap: 6px; padding-right: 5px; }
.chip-x {
  border: 0; background: transparent; color: var(--mal);
  font-size: 18px; line-height: 1; cursor: pointer;
  /* 30px para que se pueda tocar con el dedo sin apuntar. */
  min-width: 30px; min-height: 30px; border-radius: 999px;
}
.chip-x:active { background: var(--mal); color: #fff; }
.chip-nuevo { display: flex; gap: 6px; width: 100%; margin-top: 6px; }
.chip-nuevo input {
  flex: 1 1 auto; min-width: 0; padding: 9px 11px; font-size: 16px;
  background: var(--panel-alto); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 999px;
}
.chip-add {
  border: 1px solid var(--acento); background: var(--acento); color: #1a1512;
  border-radius: 999px; padding: 9px 15px; font-size: 14px; font-weight: 700; cursor: pointer;
}

/* -------------------------------------------------------------- BLOQUES --- */
.bloque-caja {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px; margin-bottom: 18px;
}
.bloque-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bloque-tit { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bloque-tot { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--acento); }
.bloque-ayuda { color: var(--texto-2); font-size: 12px; margin: 2px 0 8px; }

.lineas { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.linea { display: flex; gap: 6px; align-items: center; }
.linea .l-detalle { flex: 1 1 auto; min-width: 0; padding: 11px 10px; }
.linea .l-valor   { flex: 0 0 34%; padding: 11px 10px; }
.linea .l-num     { flex: 0 0 30%; padding: 11px 10px; }
.linea .l-borrar {
  flex: 0 0 auto; width: 40px; height: 44px; border: 0; border-radius: var(--radio);
  background: transparent; color: var(--texto-2); font-size: 22px; cursor: pointer;
}
.linea .l-borrar:active { background: var(--mal); color: #fff; }

/* Domicilios: 5 datos por fila (método · destino · pedido · domiciliario ·
   envío) → rejilla en 3 renglones en móvil. El botón "local" va pegado al
   destino porque recoger en el local es el caso más repetido. */
.linea-dom { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 6px; align-items: center; }
.linea-dom .d-metodo  { grid-column: 1 / 3; }
.linea-dom .d-destino { grid-column: 1; }
.linea-dom .l-borrar { grid-row: 1 / 4; }
.linea-dom input { padding: 11px 10px; }
.linea-dom .d-local {
  grid-column: 2; height: 44px; padding: 0 10px;
  border: 1px dashed var(--borde); border-radius: var(--radio);
  background: transparent; color: var(--acento);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.linea-dom .d-local:active { background: var(--acento); color: #fff; }
.linea-dom .mini { font-size: 10px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; }

/* Consumo familiar: 4 datos por fila (quién · qué · cuántos · cuánto).
   El PRODUCTO existe porque el kardex tiene que descontar esos insumos; sin él,
   el consumo sale después como merma. Por eso ocupa un renglón completo y no
   se aprieta al lado del nombre. */
.linea-consumo { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 6px; align-items: center; }
.linea-consumo .l-detalle  { grid-column: 1 / 3; }
.linea-consumo .l-producto { grid-column: 1 / 3; }
.linea-consumo .l-cant     { grid-column: 1; text-align: center; }
.linea-consumo .l-valor    { grid-column: 2; flex: none; }
.linea-consumo .l-borrar   { grid-row: 1 / 4; }
.linea-consumo input { padding: 11px 10px; }

/* Turnos: nombre + entrada + salida + valor + 🧾 (recibo). En móvil van en
   tres renglones; la nota de liquidación cruza toda la fila abajo. */
.linea-turno { display: grid; grid-template-columns: 1fr 1fr 40px 40px; gap: 6px; align-items: center; }
.linea-turno .l-detalle { grid-column: 1 / 3; }
.linea-turno .l-hora    { text-align: center; }
.linea-turno .l-valor   { grid-column: 1 / 3; flex: none; }
.linea-turno .l-borrar  { grid-row: 1 / 4; }
.linea-turno .l-recibo  {
  grid-row: 1 / 4;
  width: 40px; height: 44px; border: 0; border-radius: var(--radio);
  background: transparent; color: var(--texto-2); font-size: 19px; cursor: pointer;
}
.linea-turno .l-recibo:active { background: var(--acento); color: #fff; }
.linea-turno input { padding: 11px 10px; }
/* La nota ocupa el ancho completo debajo de todo: es la explicación del
   número, no un campo más. Sin ella el cajero ve aparecer una cifra que él no
   escribió y no tiene cómo saber si creerle. */
.turno-nota {
  grid-column: 1 / -1; margin: 2px 0 0;
  font-size: 12px; line-height: 1.35; color: var(--texto-2);
}
.turno-nota:empty { display: none; }
/* Se paga por debajo de lo liquidado, o la ley tiene algo que decir. */
.turno-ojo { color: var(--mal); font-weight: 700; }

/* ---------------------------------------------- LA RUEDA DE HORAS ---------
   Cristian, ago-2026: «podría entrarse las horas con un carrusel» / «que
   pueda entrar las horas con el mouse» / «hora de entrada y hora de salida».

   Se abre al hacer clic en un campo de hora y va DEBAJO de la fila, en el
   flujo normal — no flota. Por eso no hay `position: absolute` ni `z-index`
   aquí: una capa flotante en un panel que ya tiene barra fija arriba y barra
   de acciones abajo es la receta para que quede tapada justo en la fila de
   más abajo, y eso solo se descubre usándolo. Empujar el contenido es feo
   durante dos segundos y no falla nunca. */
.rueda {
  /* Hermana de `.linea-turno` dentro de `.lineas`, que es un flex en columna:
     ocupa el ancho completo sola, sin tener que declararlo. */
  margin: 6px 0 10px;
  padding: 10px;
  background: var(--panel-alto);
  border: 1px solid var(--acento);
  border-radius: var(--radio);
}
.rueda-cols { display: flex; gap: 8px; justify-content: center; }

/* Alto de 4 ítems justos: se ve que hay más arriba y más abajo, que es lo que
   le dice al cajero que la columna se puede rodar. Si cupieran todos, nadie
   sabría que hay que desplazarla. */
.rueda-col {
  height: 176px; width: 76px;
  overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y proximity;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio);
}
/* Barra fina pero VISIBLE: en el PC es la única pista de que la columna rueda.
   Ocultarla queda más limpio y deja al cajero creyendo que no hay más horas. */
.rueda-col::-webkit-scrollbar { width: 6px; }
.rueda-col::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 3px; }

.rueda-it {
  display: block; width: 100%; height: 44px;   /* el mismo objetivo de toque de todo el panel */
  scroll-snap-align: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--texto-2); font-size: 17px; font-family: inherit;
}
/* El hover existe por el mouse, que es donde de verdad se va a usar esto. */
.rueda-it:hover { background: var(--borde); color: var(--texto); }
.rueda-it.sel {
  background: var(--acento); color: #1a1512;
  font-weight: 700; border-radius: 8px;
}

/* La hora armada, en grande. Es lo que evita el error clásico de una rueda:
   dejar el am/pm sin tocar y llevarse doce horas de diferencia en el turno. */
.rueda-previa {
  margin: 10px 0 0; text-align: center;
  font-size: 22px; font-weight: 700; color: var(--acento);
  letter-spacing: 0.5px;
}
.rueda-pie { display: flex; gap: 8px; margin-top: 8px; }
.rueda-pie button {
  flex: 1; min-height: 44px; border-radius: var(--radio);
  font-family: inherit; font-size: 15px; cursor: pointer;
}
.rueda-ok { background: var(--acento); border: 0; color: #1a1512; font-weight: 700; }
.rueda-x  { background: transparent; border: 1px solid var(--borde); color: var(--texto-2); }

.btn-agregar {
  width: 100%; padding: 14px; border-radius: var(--radio);
  border: 1px dashed var(--borde); background: transparent;
  color: var(--acento); font-size: 15px; font-weight: 700; cursor: pointer;
}
.btn-agregar:active { background: var(--panel-alto); }
.vacio { color: var(--texto-2); font-size: 13px; font-style: italic; margin: 8px 0; }

/* --- "Traer del bot" (solo en DOMICILIOS, y solo si hay nube) ------------
   Va DEBAJO de "+ Agregar" y en verde nube, no en mostaza: agregar a mano es
   lo que siempre funciona y tiene que seguir siendo lo primero que se ve. Este
   es el atajo, y un atajo que depende de que haya internet no puede verse más
   importante que el camino que nunca falla. */
.btn-traer {
  margin-top: 8px;
  border-style: solid; border-color: #2e5a3c;
  background: #1d3a28; color: #b7e6c6;
}
.btn-traer:active { background: #24462f; }
.btn-traer[disabled] { opacity: .45; }

/* La nota de "trae solo lo que pasó por el bot" cuelga del botón, así que se
   pega a él (sin el margen de arriba de `.bloque-ayuda`, que está pensado para
   ir bajo un título). */
.bloque-ayuda-sec { margin-top: 6px; }

/* El resultado del traído se cuenta AQUÍ, dentro del bloque de domicilios, no
   en la barra de avisos de la pantalla de cierre: cuando el cajero toca el
   botón está mirando esta lista, y un mensaje en una sección que no está a la
   vista es un mensaje que nadie lee. */
.traer-msg {
  margin: 8px 0 0; padding: 9px 11px;
  border-radius: var(--radio); font-size: 13px;
  background: #2a2015; border: 1px solid #6b4c1c; color: #f0d3a0;
}
.traer-msg.bien { background: #16281c; border-color: #2e5a3c; color: #b7e6c6; }
.traer-msg[hidden] { display: none; }

/* ------------------------------------------------------- DENOMINACIONES --- */
.denominaciones { display: flex; flex-direction: column; gap: 8px; }
.deno {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 8px 10px;
}
.deno-lbl { font-weight: 700; font-variant-numeric: tabular-nums; }
.deno-ctrl { display: flex; align-items: center; gap: 6px; justify-content: center; }
.deno-btn {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--borde);
  background: var(--panel-alto); color: var(--texto); font-size: 22px; cursor: pointer;
}
.deno-btn:active { background: var(--acento); color: #1a1512; }
.deno-cant {
  width: 60px; text-align: center; padding: 11px 4px;
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.deno-sub { font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: 14px; min-width: 86px; text-align: right; }
.deno.tiene .deno-sub { color: var(--texto); }

.efectivo-resumen {
  display: flex; gap: 10px; margin-top: 16px;
}
.efectivo-resumen > div {
  flex: 1; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px; text-align: center;
}
.efectivo-resumen span { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texto-2); }
.efectivo-resumen strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; margin-top: 4px; }

/* --------------------------------------------------------------- CIERRE --- */
.resumen { background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 6px 12px; margin-bottom: 16px; }
.resumen-fila { display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 15px; }
.resumen-fila:last-child { border-bottom: 0; }
.resumen-fila span { color: var(--texto-2); }
.resumen-fila strong { font-variant-numeric: tabular-nums; }
.resumen-fila.destacado { font-size: 17px; }
.resumen-fila.destacado span { color: var(--texto); font-weight: 700; }
.resumen-fila.ok  strong { color: var(--ok); }
.resumen-fila.mal strong { color: var(--mal); }
/* Encabezado de grupo dentro del resumen. Separa las tres cuentas
   (lo vendido · lo que no entró en efectivo · lo que salió de la caja)
   para que el cajero pueda sumar con el dedo y le dé el mismo número. */
.resumen-grupo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-2); padding: 16px 0 4px;
  border-bottom: 1px solid var(--borde);
}
.resumen-grupo:first-child { padding-top: 6px; }

.avisos { margin-bottom: 16px; }
.aviso {
  background: #2a2015; border: 1px solid #6b4c1c; color: #f0d3a0;
  border-radius: var(--radio); padding: 10px 12px; font-size: 14px; margin-bottom: 8px;
}
.aviso.bien { background: #16281c; border-color: #2e5a3c; color: #b7e6c6; }

.acciones { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.btn {
  padding: 15px; border-radius: var(--radio); border: 1px solid var(--borde);
  background: var(--panel-alto); color: var(--texto);
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--acento); border-color: var(--acento); color: #1a1512; }
.btn[disabled] { opacity: .45; }
/* Guardar en la nube es verde y NO es el botón primario: el primario sigue
   siendo imprimir. Si la nube se cae, el PDF es lo que salva el turno. */
.btn-nube { background: #1d3a28; border-color: #2e5a3c; color: #b7e6c6; }

/* "Entregar la caja (cambio de cajero)". Va en la pantalla de cierre junto a
   los otros botones, pero NO se parece a ellos: cierra el turno de verdad
   —firma, imprime y deja el efectivo contado como BASE del siguiente— y quien
   lo toca por error se encuentra con un cuadre partido en dos.
   Por eso queda hueco y en gris: se ve, se lee, y no se toca sin querer. */
.btn-turno {
  background: transparent; border-style: dashed;
  color: var(--texto-2); font-weight: 600;
}
.btn-turno:active { background: var(--panel-alto); color: var(--texto); }

/* ------------------------------------------------------------- LOGIN ---
   Solo aparece cuando el cajero va a guardar. No es la puerta del panel:
   se puede cuadrar e imprimir sin entrar nunca. */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px calc(20px + env(safe-area-inset-right)) 20px calc(20px + env(safe-area-inset-left));
}
.modal[hidden] { display: none; }
.modal-caja {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 20px;
  width: 100%; max-width: 380px;
  max-height: 90vh; overflow-y: auto;
}
.modal-caja h2 { margin: 0 0 4px; font-size: 19px; }
/* La clave del local, grande: se teclea mirando el celular a contraluz, de pie
   y con prisa. Sin `letter-spacing` (eso era para los 6 dígitos del PIN viejo;
   con una clave que lleva letras solo estorba a la vista). */
.modal-caja #f-clave {
  text-align: center; font-size: 20px;
}

.peligro { margin-top: 20px; color: var(--texto-2); font-size: 14px; }
.peligro summary { cursor: pointer; padding: 8px 0; }
.previa { background: #fff; color: #111; padding: 10px; border-radius: 8px; overflow-x: auto; }

/* ----------------------------------------------------------- NAV ABAJO --- */
.nav-abajo {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  height: calc(var(--alto-nav) + env(safe-area-inset-bottom));
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border-top: 1px solid var(--borde);
}
.nav-abajo .btn { flex: 1; padding: 12px; }
.paso-actual { flex: 0 0 auto; font-size: 12px; color: var(--texto-2);
  font-variant-numeric: tabular-nums; }

/* Ni la hoja ni el recibo se ven en pantalla (la hoja solo dentro de la previa).
   Los dos viven siempre en el DOM y es imprimir.css quien decide cuál sale. */
.hoja, .recibo { display: none; }

/* Previa en pantalla: mismas clases que la tirilla impresa. Los estilos "de
   verdad" están en imprimir.css (media=print); aquí solo se replican.

   ⭐ ESTO IMITA UNA TIRILLA DE 58mm, no una hoja carta. Si la previa mostrara
   dos columnas y fondos negros mientras la térmica saca una sola columna sin
   fondos, el botón "ver el cuadre como se va a imprimir" estaría mintiendo —
   y es justo el botón que existe para no gastar papel comprobando. Cualquier
   clase `h-` que se agregue en imprimir.css hay que replicarla aquí. */
.previa {
  width: 260px; max-width: 100%; margin: 0 auto;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 11px; line-height: 1.3;
}
.previa .h-cab { display: block; text-align: center;
  border-bottom: 1px dashed #000; padding-bottom: 5px; margin-bottom: 5px; }
.previa .h-cab h1 { font-size: 14px; margin: 0 0 2px; letter-spacing: .05em; }
.previa .h-cab p { margin: 0; font-size: 10px; }
.previa .h-meta { text-align: center; margin-top: 3px; }
.previa .h-meta p { margin: 0; font-size: 10px; }
/* Una tabla debajo de otra: en 48mm no cabe una segunda columna. */
.previa .h-cols { display: block; }
.previa .h-cols > .h-tabla { width: 100%; }
.previa .h-tabla { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
.previa .h-tabla th, .previa .h-tabla td {
  border: 0; padding: 0; font-size: 10px; vertical-align: top; }
.previa .h-tabla thead th {
  text-align: left; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; border-bottom: 1px dashed #000; padding-bottom: 1px; }
/* Sin fondo negro: la térmica lo quema y se borra en semanas. */
.previa .h-tabla thead tr:first-child th { background: none; color: #000; }
.previa .h-tabla td.n, .previa .h-tabla th.n { text-align: right; font-variant-numeric: tabular-nums; }
.previa .h-tabla td:first-child { max-width: 145px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.previa .h-tabla td.d-cel { white-space: normal; overflow: visible; max-width: 120px; }
.previa .h-tabla .d-dest { font-size: 9px; }
.previa .h-tabla tr.tot td { font-weight: 700; background: none;
  border-top: 1px solid #000; padding-top: 1px; }
.previa .h-tabla td.v { color: #777; font-style: italic; text-align: center; }
.previa .h-cierre { display: block; margin: 8px 0; }
.previa .h-cierre > div { display: flex; justify-content: space-between;
  align-items: baseline; border: 0; padding: 1px 0; text-align: left; }
.previa .h-cierre span { display: inline; font-size: 9px; text-transform: uppercase; }
.previa .h-cierre b { display: inline; font-size: 12px; font-variant-numeric: tabular-nums; }
.previa .h-cierre > div:last-child { border: 1px solid #000; padding: 4px;
  margin-top: 4px; background: none; color: #000; }
.previa .h-cierre.descuadra > div:last-child { border-width: 2px; }
.previa .h-obs { border: 1px solid #000; padding: 4px; margin: 6px 0; }
.previa .h-obs-tit { font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 2px; }
.previa .h-obs p { margin: 0; font-size: 10px; line-height: 1.35;
  white-space: normal; overflow-wrap: break-word; }
.previa .h-firma { margin-top: 20px; width: 100%; }
.previa .h-linea { border-bottom: 1px solid #000; height: 22px; }
.previa .h-firma p { margin: 2px 0 0; text-align: center; font-size: 10px; }
.previa .h-pie { font-size: 9px; color: #555; margin-top: 6px; text-align: center; }

@media (min-width: 640px) {
  .linea-dom { grid-template-columns: 1.3fr 1.5fr 56px 1fr 1fr 1fr 40px; }
  .linea-dom .d-metodo,
  .linea-dom .d-destino { grid-column: auto; }
  .linea-dom .d-local  { grid-column: auto; }
  .linea-dom .l-borrar { grid-row: auto; }
  .linea-consumo { grid-template-columns: 1fr 1.6fr 68px 1fr 40px; }
  .linea-consumo .l-detalle,
  .linea-consumo .l-producto { grid-column: auto; }
  .linea-consumo .l-cant,
  .linea-consumo .l-valor    { grid-column: auto; }
  .linea-consumo .l-borrar   { grid-row: auto; }
  .linea-turno { grid-template-columns: 1.4fr 80px 80px 1fr 40px 40px; }
  .linea-turno .l-detalle,
  .linea-turno .l-valor      { grid-column: auto; }
  .linea-turno .l-borrar,
  .linea-turno .l-recibo     { grid-row: auto; }
  .acciones { flex-direction: row; }
}

/* ------------------------------------------------------- EL PC DEL LOCAL ---
   Cristian, ago-2026: «esto se va a llenar desde el pc del local».

   En una pantalla de PC el formato de celular se vuelve incómodo por una razón
   concreta: la sección «Lo que salió de la caja» tiene CUATRO bloques (compras,
   gastos, turnos, préstamos) y en una sola columna el cajero tiene que hacer
   scroll para llegar a TURNOS y PRÉSTAMOS — o sea, los dos últimos quedan
   fuera de pantalla justo en la sección donde más se escribe. Lo mismo pasa en
   PAGOS. A dos columnas la sección entera cabe de una y no hay que buscar nada.

   Solo se tocan esas dos secciones a propósito. `efectivo` (rejilla de
   billetes), `cerrar` (previa de la tirilla) e `inicio` ya tienen su propia
   maquetación y meterlas en un grid de dos columnas las rompería.

   Los botones siguen siendo de 44 px aunque sobre el mouse: es el mismo panel
   en el celular, y dos tamaños distintos serían dos cosas que mantener. */
@media (min-width: 1000px) {
  main { max-width: 1060px; }

  .seccion[data-paso="salidas"].activa,
  .seccion[data-paso="pagos"].activa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    align-content: start;
  }
  /* Lo que titula o cierra la sección ocupa el ancho completo: partir un
     encabezado o la fila de acciones en dos columnas no significa nada. */
  .seccion[data-paso="salidas"].activa > h2,
  .seccion[data-paso="salidas"].activa > .nota,
  .seccion[data-paso="salidas"].activa > .acciones,
  .seccion[data-paso="pagos"].activa > h2,
  .seccion[data-paso="pagos"].activa > .nota,
  .seccion[data-paso="pagos"].activa > .acciones { grid-column: 1 / -1; }
  /* Cada bloque arranca arriba de su celda; si no, el más corto se estira
     hasta el alto del más largo y quedan cajas medio vacías. */
  .seccion[data-paso="salidas"].activa > .bloque,
  .seccion[data-paso="pagos"].activa > .bloque,
  .seccion[data-paso="pagos"].activa > .campo { align-self: start; }
}