/* Pantallas internas: caja, cocina, administracion y desarrollo. */

/* El `vh` es el respaldo para los navegadores que ignoran la linea siguiente;
   `dvh` es el que sigue a la barra del navegador cuando se esconde y aparece.
   Mismo par que usan las hojas modales en brand.css. */
body.app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* --------------------------------------------------------------- topbar */
.appbar {
  display: flex; align-items: center; gap: 12px;
  /* Misma correccion que la cabecera del menu del cliente: con
     `viewport-fit=cover` la barra llega hasta el borde de la pantalla, asi que
     la franja del reloj se paga como relleno y se suma a la altura. En un iPad
     o un iPhone montado en la pared de la cocina, sin esto el nombre del
     usuario y la campana quedan bajo la hora del sistema. Las laterales son
     para el modo acostado, que es justo como se usa una tablet de comandas. */
  padding: var(--safe-t) max(16px, var(--safe-r)) 0 max(16px, var(--safe-l));
  height: calc(58px + var(--safe-t)); flex: 0 0 auto;
  background: linear-gradient(180deg, #141417, var(--ds-charcoal));
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 70;
}
.appbar .brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 14px; letter-spacing: .08em;
  color: var(--ds-white); text-transform: uppercase;
}
.appbar .brand i {
  width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ds-orange-hi), var(--ds-ember)); color: #16130C;
}
.appbar .where {
  padding: 4px 11px; border-radius: 999px; background: rgba(245,166,35,.13);
  border: 1px solid rgba(245,166,35,.34); color: var(--ds-orange-hi);
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}

.navlinks { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.navlinks::-webkit-scrollbar { display: none; }
.navlinks a {
  padding: 7px 13px; border-radius: 9px; font-size: 13px; font-weight: 700;
  color: var(--text-dim); white-space: nowrap;
}
.navlinks a:hover { background: var(--surface-2); color: var(--text); }
.navlinks a.on { background: rgba(245,166,35,.14); color: var(--ds-orange-hi); }

.who { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 31px; height: 31px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-slate), var(--ds-graphite));
  border: 1px solid var(--line);
  display: grid; place-items: center; font-weight: 900; font-size: 12.5px; color: var(--ds-orange);
}
.who-meta { line-height: 1.25; }
.who-meta b { font-size: 13px; display: block; }
.who-meta span { font-size: 10.5px; color: var(--text-faint); letter-spacing: .06em; text-transform: uppercase; }

.bell { position: relative; }
.bell .dot {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--ds-red); color: #fff;
  font-size: 10.5px; font-weight: 900; display: grid; place-items: center;
  border: 2px solid var(--ds-charcoal);
}

.banner-remote {
  padding: 7px 16px; font-size: 12.5px; font-weight: 700;
  background: rgba(155,107,232,.14); border-bottom: 1px solid rgba(155,107,232,.35);
  color: #C3A5F5; display: flex; align-items: center; gap: 9px;
}
.banner-temp {
  padding: 7px 16px; font-size: 12.5px; font-weight: 700;
  background: rgba(245,166,35,.13); border-bottom: 1px solid rgba(245,166,35,.34);
  color: var(--ds-orange-hi); display: flex; align-items: center; gap: 9px;
}

/* ---------------------------------------------------------------- layout */
/* El `max()` es para la tablet de comandas acostada: sin el, la primera columna
   del tablero queda partida por la muesca. En un monitor los dos valores de
   zona segura son 0 y esto es exactamente el `padding: 20px` de siempre. */
.wrap {
  flex: 1; max-width: 1440px; width: 100%; margin: 0 auto;
  padding: 20px max(20px, var(--safe-r)) calc(20px + var(--safe-b)) max(20px, var(--safe-l));
}
.wrap.flush { padding: 0; max-width: none; }

.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 24px; color: var(--ds-white); }
.page-head p { margin: 3px 0 0; color: var(--text-dim); font-size: 13.5px; }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 15px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-dim);
  font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.tab.on { background: var(--surface-2); color: var(--ds-orange-hi); border-color: rgba(245,166,35,.4); }

.cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cols-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .cols-2 { grid-template-columns: 1.35fr .65fr; } }

/* --------------------------------------------------------------- tablas */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; padding: 9px 11px; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
  border-bottom: 1px solid var(--line); font-weight: 800; white-space: nowrap;
}
.table td { padding: 11px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: rgba(255,255,255,.024); }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; }
.table-scroll { overflow-x: auto; }

/* ----------------------------------------------------------------- kpis */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.kpi {
  padding: 15px 17px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface), #131316);
  border: 1px solid var(--line-soft);
}
.kpi b { display: block; font-family: var(--font-display); font-size: 27px; color: var(--ds-white); line-height: 1.1; }
.kpi span { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.kpi.accent b { color: var(--ds-orange); }

/* -------------------------------------------------------------- comandas */
.board { display: grid; gap: 12px; padding: 16px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); align-items: start; }
.board-col { background: var(--ds-coal); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.board-col > header {
  padding: 11px 14px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line-soft); background: var(--surface);
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.board-col > header .n {
  margin-left: auto; background: var(--surface-2); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; color: var(--text-dim);
}
.board-col.pendiente  > header { color: var(--ds-blue); }
.board-col.confirmado > header { color: var(--ds-violet); }
.board-col.preparando > header { color: var(--ds-orange); }
.board-col.listo      > header { color: var(--ds-green); }
.board-col.entregado  > header { color: var(--text-dim); }
.board-list { padding: 10px; display: flex; flex-direction: column; gap: 9px; min-height: 60px; }

.ticket {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; border-left: 4px solid var(--line);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ticket.pendiente  { border-left-color: var(--ds-blue); }
.ticket.confirmado { border-left-color: var(--ds-violet); }
.ticket.preparando { border-left-color: var(--ds-orange); }
.ticket.listo      { border-left-color: var(--ds-green); }
.ticket.fresh { animation: ticket-in .4s cubic-bezier(.2,.9,.3,1.2); box-shadow: var(--glow); }
@keyframes ticket-in { from { transform: translateY(-8px) scale(.97); opacity: 0; } }
.ticket.urgent { box-shadow: 0 0 0 1px rgba(228,72,60,.5); }
/* Comanda que todavia nadie miro: suena y late hasta que la tocan. */
.ticket.ringing { cursor: pointer; animation: ring-glow 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ticket.ringing { animation: none; box-shadow: 0 0 0 2px rgba(245,166,35,.45); }
}
.ticket-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ticket-code { font-family: var(--font-display); font-size: 16px; color: var(--ds-white); }
.ticket-time { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }
.ticket-line { font-size: 13.5px; padding: 4px 0; border-top: 1px dashed var(--line-soft); }
.ticket-line:first-of-type { border-top: none; }
.ticket-line b { color: var(--ds-orange); margin-right: 5px; }
.ticket-line .mods { display: block; font-size: 11.5px; color: var(--text-faint); padding-left: 17px; }
.ticket-note {
  margin-top: 8px; padding: 7px 9px; border-radius: 8px;
  background: rgba(245,166,35,.1); border: 1px solid rgba(245,166,35,.28);
  font-size: 12px; color: var(--ds-orange-hi);
}
.ticket-foot { display: flex; gap: 6px; margin-top: 10px; }
.ticket-foot .btn { flex: 1; }

/* -------------------------------------------------------------- permisos */
.perm-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.perm-group { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px; background: var(--ds-coal); }
.perm-group h5 {
  margin: 0 0 9px; font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ds-orange);
}
.perm-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px;
  border-top: 1px solid var(--line-soft);
}
.perm-row:first-of-type { border-top: none; }
.perm-row .name { flex: 1; }
.perm-state {
  display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.perm-state button {
  border: none; background: transparent; color: var(--text-faint);
  padding: 4px 9px; font-size: 11px; font-weight: 800; cursor: pointer;
}
.perm-state button.on { background: var(--surface-2); color: var(--text); }
.perm-state button.on[data-v="grant"]  { background: rgba(63,191,106,.2);  color: #7FE3A2; }
.perm-state button.on[data-v="revoke"] { background: rgba(228,72,60,.2);   color: #FF8E85; }
.perm-row.inherited .name::after {
  content: "por rol"; margin-left: 7px; font-size: 10px; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px;
}

.req-card {
  border: 1px solid rgba(245,166,35,.35); border-radius: 12px; padding: 14px;
  background: rgba(245,166,35,.06); margin-bottom: 10px;
}
.req-card.resolved { border-color: var(--line-soft); background: var(--ds-coal); opacity: .78; }
.req-card h4 { margin: 0 0 5px; font-size: 15px; }
.req-perms { display: flex; gap: 5px; flex-wrap: wrap; margin: 9px 0; }

/* ----------------------------------------------------------------- login */
.login-shell {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: calc(22px + var(--safe-t)) max(22px, var(--safe-r)) calc(22px + var(--safe-b)) max(22px, var(--safe-l));
}
.login-card {
  width: min(420px, 100%); padding: 30px;
  background: linear-gradient(165deg, #17171b, #0d0d10);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.login-card .mark {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 18px;
  background: linear-gradient(135deg, var(--ds-orange-hi), var(--ds-ember));
  display: grid; place-items: center; box-shadow: 0 8px 26px rgba(224,124,11,.4);
}
.login-card h1 { font-size: 23px; text-align: center; color: var(--ds-white); }
.login-card > p { text-align: center; color: var(--text-dim); font-size: 13px; margin: 6px 0 22px; }

/* ------------------------------------------------------------------ misc */
.empty { padding: 44px 20px; text-align: center; color: var(--text-faint); }
.empty b { display: block; font-size: 16px; color: var(--text-dim); margin-bottom: 5px; }

.log-line {
  font-family: var(--font-mono); font-size: 12px; padding: 3px 9px;
  border-left: 3px solid var(--line); white-space: pre-wrap; word-break: break-word;
}
.log-line.warn  { border-left-color: var(--ds-orange); color: #F8CE8C; }
.log-line.error { border-left-color: var(--ds-red); color: #FFA79F; }
.log-line.debug { color: var(--text-faint); }
.log-line time { color: var(--text-faint); margin-right: 9px; }

.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 10px; }
.bars div {
  flex: 1; background: linear-gradient(180deg, var(--ds-orange), var(--ds-ember));
  border-radius: 4px 4px 0 0; min-height: 2px; position: relative;
}
.bars div span {
  position: absolute; bottom: -19px; left: 0; right: 0; text-align: center;
  font-size: 9px; color: var(--text-faint);
}

.qr-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.qr-cell { text-align: center; }
.qr-cell img { width: 100%; border-radius: 12px; background: #fff; }

/* ============================================================================
   FACTURAR: la pantalla partida en dos.
   Izquierda los productos con su imagen —el cajero elige por como se ve, no
   leyendo una lista—; derecha el detalle de cobro completo, que se lee como la
   factura que va a salir: cantidad, detalle, precio unitario, total, IVA.
   ========================================================================== */
.pos-layout { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1050px) { .pos-layout { grid-template-columns: 1fr 420px; align-items: start; } }
.pos-catalog { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pos-item {
  padding: 10px; border-radius: 12px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); cursor: pointer;
  color: inherit; font: inherit;
  display: flex; align-items: center; gap: 10px;
  transition: border-color .16s ease, transform .12s ease;
}
.pos-item:hover { border-color: var(--ds-orange); transform: translateY(-1px); }
.pos-item:disabled { opacity: .5; cursor: not-allowed; }
.pos-item .pos-item-txt { min-width: 0; flex: 1; }
.pos-item b { display: block; font-size: 13px; margin-bottom: 3px; line-height: 1.2; }
.pos-item span { color: var(--ds-orange); font-weight: 800; font-size: 13px; }
.pos-item .chip { flex: 0 0 auto; }
/* Pegajoso por debajo de la barra de arriba, que ahora mide lo suyo mas la
   franja del sistema. Con el `74px` pelado, en un iPhone el ticket se metia
   bajo la barra al desplazar el catalogo. */
.pos-ticket { position: sticky; top: calc(74px + var(--safe-t)); }

/* Miniatura del producto: foto recortada o el dibujo SVG de su receta. */
.item-arte {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-soft);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.item-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-arte > span { width: 100%; height: 100%; display: block; padding: 2px; }
.item-arte svg { width: 100%; height: 100%; display: block; }
.pos-item .item-arte { width: 52px; height: 52px; }

/* Linea de comanda con miniatura (cola de aprobacion). */
.ticket-line.con-arte { display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; }
.ticket-line.con-arte .item-arte { width: 34px; height: 34px; border-radius: 8px; }
.ticket-line.con-arte .mods { flex-basis: 100%; padding-left: 43px; }

/* Detalle de cobro */
.factura-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.factura-items { border-top: 1px solid var(--line-soft); margin-bottom: 10px; }
.factura-row {
  display: grid; grid-template-columns: 82px 1fr 56px 62px 28px;
  gap: 6px; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed var(--line-soft);
  font-size: 13px;
}
.factura-row.head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); font-weight: 800; border-bottom-style: solid;
}
.factura-row .det { min-width: 0; }
.factura-row .det b { font-size: 13px; }
.factura-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.factura-row .num.fuerte { font-weight: 800; }
.factura-row .quitar { padding: 4px 6px; }

/* Corregir la cantidad sin borrar la linea. Los botones son deliberadamente
   grandes para el dedo: esta pantalla se usa de pie y con prisa, y un "−" de
   16px se falla tanto que se deja de usar. */
.qty-step { display: flex; align-items: center; gap: 2px; }
.qty-step .qty-b {
  width: 24px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--text);
  font-size: 16px; font-weight: 800; line-height: 1; cursor: pointer;
}
.qty-step .qty-b:hover { background: var(--surface-2); }
.qty-step .qty-n {
  width: 30px; height: 30px; flex: none; padding: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ds-orange);
  text-align: center; font-weight: 800; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.qty-step .qty-n:focus { outline: 2px solid var(--ds-orange); outline-offset: 1px; }

/* La nota de la linea. El boton vive dentro del detalle y no en una columna
   propia: solo se usa en una linea de cada diez, y una columna entera para eso
   le robaria el ancho al nombre del producto, que se lee siempre. */
.factura-row .nota-linea {
  color: var(--ds-orange); font-style: italic;
}
.factura-row .btn-nota {
  /* En bloque, y no en linea: si no, la linea que todavia no tiene nota ni
     modificadores lo pega al lado del nombre del producto y el ticket queda con
     el mismo boton en dos sitios distintos segun la fila. */
  display: block; margin-top: 3px; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--text-faint); font-size: 11px; font-weight: 700;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.factura-row .btn-nota:hover { color: var(--ds-orange); }

/* El cliente dentro de la hoja de cobro. Va entre el total y la forma de pago
   a proposito: es el orden en que ocurre la conversacion en el mostrador —
   "son doce con cincuenta", "¿me das tu cedula?", "con tarjeta". */
.cobro-cliente { margin: 12px 0; }
.cobro-cliente .opt-head { margin-bottom: 8px; }
.cobro-cliente-ok {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(245,166,35,.06);
}
.cobro-cliente-ok > div:first-child {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ---------------------------------------------- la hoja de cobro, en dos columnas

   IZQUIERDA lo que se cobra, DERECHA como se cobra. En ese orden porque asi
   ocurre en el mostrador: primero se acuerda que paga esta persona, despues a
   nombre de quien sale la factura y con que paga.

   Se apila por debajo de 900 px. La PC del local es una pantalla ancha, pero
   caja tambien se abre desde un telefono cuando la maquina esta ocupada, y ahi
   dos columnas de 300 px no se leen. */
.cobro-grid {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .cobro-grid { grid-template-columns: 1fr; } }

/* La lista puede tener cien lineas: se desplaza ella, no la hoja entera. Si
   scrolleara la hoja, el total y el boton de cobrar se irian de la pantalla
   justo mientras se elige que cobrar. */
.cobro-items { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.cobro-col-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.cobro-linea {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
/* Lo que NO entra en este cobro se apaga, pero no desaparece: sigue estando en
   la mesa y hay que poder volver a meterlo de un toque. */
.cobro-linea.fuera { opacity: .42; }
.cobro-linea-tap {
  flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  background: none; border: 0; padding: 4px 0; text-align: left;
  color: inherit; font: inherit; cursor: pointer;
}
.cobro-linea-tap:hover .cobro-check { border-color: var(--ds-orange); }
.cobro-check {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--line); display: grid; place-items: center;
  font-weight: 900; font-size: 13px; color: var(--ds-orange);
}
.cobro-linea:not(.fuera) .cobro-check {
  border-color: var(--ds-orange); background: rgba(245,166,35,.12);
}
.cobro-linea-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cobro-linea-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobro-qty { min-width: 34px; text-align: center; font-weight: 800; font-size: 13px; }

/* El IVA es editable aqui mismo. El desplegable va EN la fila del importe, no
   en un campo aparte: quien lo cambia esta mirando ese numero. */
.totals .fila-iva > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.iva-sel { width: auto; padding: 2px 6px; font-size: 13px; }

/* Consumidor final / Con datos: dos botones, uno encendido. No es un
   desplegable porque no es una preferencia escondida — es LA decision de la
   factura, y tiene que verse cual esta tomada sin abrir nada. */
.seg { display: flex; gap: 8px; margin: 8px 0; }
.seg-btn {
  flex: 1; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: inherit;
  font-weight: 800; font-size: 14px;
}
.seg-btn.on { border-color: var(--ds-orange); background: rgba(245,166,35,.14); color: var(--ds-orange-hi, #FFC24B); }
.seg-btn:disabled { opacity: .38; cursor: not-allowed; }

/* ====================================================== LA HOJA DE COBRO, GUIADA

   Antes esto eran dos columnas con las siete decisiones a la vista a la vez:
   lineas, IVA, factura, cliente, forma de pago, recibido y cambio. Todo estaba
   ahi, y por eso mismo no se sabia por donde empezar — el cajero nuevo leia la
   hoja entera cada vez, y el veterano tecleaba de memoria y a veces en el campo
   equivocado.

   Ahora son tres pasos numerados, y esto es lo que NO se hizo: un asistente con
   "Siguiente". El cobro normal —todo, efectivo, consumidor final— es el 95% de
   los cobros y hoy cuesta UN toque; un asistente de tres pantallas lo habria
   convertido en tres, justo en hora pico. Asi que los pasos 1 y 3 arrancan
   plegados MOSTRANDO SU RESPUESTA ("Todo · $12.50", "Consumidor final"), que es
   la diferencia entre esconder algo y haberlo contestado ya. Solo el paso 2
   —como paga— arranca abierto, porque es el unico que el cajero decide de
   verdad en cada cobro. */
.cobro-guia { display: flex; flex-direction: column; gap: 10px; }

.paso { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.paso.abierto { border-color: rgba(245,166,35,.35); background: rgba(245,166,35,.03); }

/* La cabecera es un boton de ancho completo: el area de toque es la fila
   entera, no el triangulito. */
.paso-cab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; background: transparent; border: 0; color: inherit;
  cursor: pointer; text-align: left; font: inherit;
}
.paso-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900;
  background: var(--line-soft); color: var(--text-faint);
}
.paso.abierto .paso-n { background: var(--ds-orange); color: #1A1206; }
.paso-titulo { font-weight: 800; font-size: 14px; }
/* La respuesta actual del paso, que es lo que lo vuelve legible plegado. */
.paso-resp {
  flex: 1; text-align: right; font-size: 13px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paso.abierto .paso-resp { display: none; }
.paso-cambiar { flex: none; font-size: 12px; color: var(--ds-orange); font-weight: 700; }
/* Un paso abierto no ofrece "Cambiar": ya estas dentro de el. El circulo
   naranja del numero es lo que dice donde estas. */
.paso.abierto .paso-cambiar { display: none; }
.paso-cuerpo { padding: 0 14px 14px; }
.paso-cuerpo[hidden] { display: none; }

/* Un paso que el sistema abrio solo (pasar el tope de consumidor final obliga
   a pedir datos). Se señala una vez y se apaga: un parpadeo eterno se vuelve
   parte del fondo y deja de avisar de nada. */
@keyframes paso-atencion {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
  40%      { box-shadow: 0 0 0 3px rgba(245,166,35,.35); }
}
.paso.senalado { animation: paso-atencion 1.1s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .paso.senalado { animation: none; border-color: var(--ds-orange); } }

/* Forma de pago: botones, no un desplegable. Un `<select>` esconde las
   opciones detras de un toque y no deja ver cual esta elegida de lejos; ademas
   sus `<optgroup>` no se pueden estilar. Aqui las tres formas que entran ahora
   se ven siempre, y las apps de reparto van en su propia fila porque son otra
   cosa: esa plata no cae en el cajon hoy. */
.pago-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pago-op {
  padding: 12px 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: inherit;
  font-weight: 800; font-size: 13.5px; line-height: 1.3;
}
.pago-op.on { border-color: var(--ds-orange); background: rgba(245,166,35,.14); color: var(--ds-orange-hi, #FFC24B); }
.pago-op-apps { margin-top: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pago-op-apps .pago-op { font-size: 12.5px; font-weight: 700; padding: 9px 6px; color: var(--text-dim); }
.pago-op-apps .pago-op.on { color: var(--ds-orange-hi, #FFC24B); }

/* El cambio. Es el numero que el cajero le canta al cliente, asi que se lee
   de un vistazo y no compite con el total. */
.cobro-cambio {
  display: flex; align-items: baseline; gap: 10px; margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed var(--line-soft);
}
.cobro-cambio b { margin-left: auto; font-size: 30px; font-weight: 900; color: var(--ds-orange); font-variant-numeric: tabular-nums; }

/* ============================================================ CAMPOS DE DINERO

   Un campo donde se teclea plata no es un campo de numero cualquiera:
   - las flechitas de `type=number` se esconden, porque aqui se escribe la
     cifra, no se sube de medio en medio con el raton (y un roce de la rueda
     del mouse sobre el campo enfocado cambia el monto sin que nadie lo pida);
   - `tabular-nums` para que las cifras no bailen al teclear;
   - 16 px es el minimo para que iOS no haga zoom al enfocar, y el zoom
     desplaza la hoja entera.
   Sale de `.cc-input` (la apertura de caja), que era el unico sitio del repo
   donde esto estaba bien hecho. Ver `inputDinero()` en public/js/core.js. */
.campo-dinero, .cc-input {
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.campo-dinero::-webkit-outer-spin-button, .campo-dinero::-webkit-inner-spin-button,
.cc-input::-webkit-outer-spin-button, .cc-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.campo-dinero { text-align: right; font-size: 16px; font-weight: 700; }

/* El campo mas importante de la pantalla se ve como tal: se teclea de pie,
   mirando al cliente y no a la pantalla. Mismo tamaño que el de abrir caja. */
.dinero-grande { font-size: 26px; font-weight: 800; padding: 12px 14px; }

/* Billetes de verdad. Lo que de verdad ahorra tiempo no es teclear mas rapido,
   es no teclear: el cliente paga con un billete, y ese billete es uno de
   cinco. "Exacto" existe porque el otro caso frecuente es que no haya vuelto. */
.dinero-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dinero-chips .btn {
  font-variant-numeric: tabular-nums; border: 1px solid var(--line); cursor: pointer;
}
.dinero-chips .btn:hover { border-color: rgba(245,166,35,.5); color: var(--ds-orange-hi); }

/* El formulario que aparece cuando la cedula no esta en archivo. */
.cobro-alta { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cobro-fiscal { margin: 12px 0; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.check input { width: auto; }

/* Lo que todavia no existe, dicho de frente. */
.factura-pronto {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(74,144,226,.07); border: 1px dashed rgba(74,144,226,.4);
}
.factura-pronto .pronto-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.factura-pronto ul { margin: 0; padding-left: 18px; }
.factura-pronto li { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; }

/* Bloques compartidos con el menu del cliente que hasta ahora quedaban sin
   estilo en las pantallas de staff: el desglose de totales, los encabezados de
   grupo y el detalle chico de una linea. */
.totals { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.totals div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13.5px; color: var(--text-dim); }
.totals div span:last-child { font-variant-numeric: tabular-nums; color: var(--text); }
.totals .grand { font-size: 18px; font-weight: 900; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line-soft); color: var(--text); }
.totals .grand span:last-child { color: var(--ds-orange); }
.opt-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.opt-head h5 {
  margin: 0; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint);
}
.cart-mods { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; line-height: 1.5; }

/* ------------------------------------------------------ timbre de atencion */
/* Mientras nadie toca la tarjeta, esta suena y se ve que suena. */
.approve-card.ringing, .transfer-item.ringing {
  cursor: pointer;
  border-left-color: var(--ds-orange) !important;
  animation: ticket-in .35s cubic-bezier(.2,.9,.3,1.2), ring-glow 1.5s ease-in-out infinite;
}
@keyframes ring-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,.42); }
  50%      { box-shadow: 0 0 0 7px rgba(245,166,35,0); }
}
.ring-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 8px; padding: 4px 10px; border-radius: 999px;
  background: rgba(245,166,35,.16); border: 1px solid rgba(245,166,35,.45);
  color: var(--ds-orange-hi); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.ring-tag svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
  .approve-card.ringing, .transfer-item.ringing { animation: none; box-shadow: 0 0 0 2px rgba(245,166,35,.4); }
}

.form-error {
  margin: 4px 0 14px; padding: 10px 12px; border-radius: 8px;
  background: rgba(228,72,60,.12); border: 1px solid rgba(228,72,60,.4);
  color: #FFB4AC; font-size: 13px;
}

/* --------------------------------------------------------- pantalla cocina */
.kitchen-toolbar {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 16px 0; flex-wrap: wrap;
}
.kitchen-load { padding: 14px 16px 0; margin-bottom: 0; }
.kitchen-load .kpi { padding: 11px 14px; }
.kitchen-load .kpi b { font-size: 23px; }

/* Lo que el cliente pidio quitar: en rojo, imposible de pasar por alto. */
.ticket-line .removed-line {
  color: #FF8E85; font-weight: 800; letter-spacing: .02em;
}

/* ------------------------------------------------- cola de aprobacion caja */
.tab.urgent-tab {
  border-color: rgba(245,166,35,.6); color: var(--ds-orange-hi);
  animation: tab-pulse 1.8s ease-in-out infinite;
}
@keyframes tab-pulse {
  50% { box-shadow: 0 0 0 4px rgba(245,166,35,.14); }
}

/* El destello de "acaba de caer algo aqui". Es el mismo pulso de arriba pero
   contado: tres pasadas y para. La animacion infinita de `.urgent-tab` dice
   "hay algo esperando tu decision" y no puede callarse hasta que se atienda;
   esta dice "mira, se movio", y una señal que no se apaga deja de ser una
   señal. Se quita sola desde `senalarComandasAbiertas()`. */
.tab.tab-recien {
  border-color: rgba(245,166,35,.6); color: var(--ds-orange-hi);
  animation: tab-pulse .5s ease-in-out 3;
}
.approve-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  align-items: start;
}
.approve-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--ds-blue);
  border-radius: 12px; padding: 14px;
  animation: ticket-in .35s cubic-bezier(.2,.9,.3,1.2);
}
.approve-card.waiting {
  border-left-color: var(--ds-orange);
  box-shadow: 0 0 0 1px rgba(245,166,35,.28);
}
.approve-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.approve-card .ticket-foot { margin-top: 12px; }
.approve-card .ticket-foot .btn:first-child { flex: 2; }

/* ============================================================================
   PANTALLA DE INICIO DEL LOCAL
   Es la que queda abierta en el monitor de la caja todo el dia: el QR tiene que
   verse desde lejos y los accesos tienen que ser botones grandes.
   ========================================================================== */
.panel-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
/* La columna ancha es la de trabajar (estado + contadores) y va PRIMERA, que
   en el telefono —donde esto cae en una sola columna— es literalmente lo
   primero que se lee. El QR queda al lado: se enseña, no se opera. */
@media (min-width: 900px) { .panel-grid { grid-template-columns: 1fr .92fr; align-items: start; } }

.panel-qr {
  padding: 26px;
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(245,166,35,.16), transparent 62%),
    linear-gradient(165deg, var(--surface), #101013);
  border: 1px solid rgba(245,166,35,.26);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  text-align: center;
}
.panel-qr-head h2 {
  font-size: clamp(22px, 3.4vw, 32px); color: var(--ds-white);
}
.panel-qr-head p { margin: 8px 0 20px; color: var(--text-dim); font-size: 13.5px; }

.qr-frame {
  width: min(340px, 76vw); margin: 0 auto;
  padding: 16px; border-radius: 22px;
  background: var(--ds-cream);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.qr-frame img { width: 100%; display: block; border-radius: 12px; }

.panel-url { margin: 20px 0 18px; }
.panel-url span { display: block; letter-spacing: .12em; text-transform: uppercase; }
.panel-url b {
  display: block; margin-top: 5px;
  font-family: var(--font-mono); font-size: clamp(15px, 2.6vw, 22px);
  color: var(--ds-orange); word-break: break-all;
}
.panel-qr-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.panel-note {
  margin: 18px 0 0; font-size: 12.5px; color: var(--text-faint);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.panel-note span { display: inline-flex; }

.panel-side { display: flex; flex-direction: column; gap: 16px; }
.card-title {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 800; margin-bottom: 12px;
}

/* Interruptor grande de abierto / cerrado */
.big-toggle {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 18px; cursor: pointer;
  background: rgba(228,72,60,.1); border: 1px solid rgba(228,72,60,.4);
  color: inherit; font: inherit; text-align: left;
  transition: background .2s ease, border-color .2s ease, transform .14s ease;
}
.big-toggle:hover:not(:disabled) { transform: translateY(-1px); }
.big-toggle:disabled { opacity: .55; cursor: not-allowed; }
.big-toggle .dot {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ds-red); box-shadow: 0 0 0 5px rgba(228,72,60,.16);
}
.big-toggle b { display: block; font-family: var(--font-display); font-size: 19px; letter-spacing: .06em; }
.big-toggle span span { font-size: 12.5px; color: var(--text-dim); }
.big-toggle.on { background: rgba(63,191,106,.1); border-color: rgba(63,191,106,.42); }
.big-toggle.on .dot { background: var(--ds-green); box-shadow: 0 0 0 5px rgba(63,191,106,.16); }
.big-toggle.on b { color: #7FE3A2; }

.panel-counts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.count-box {
  padding: 14px; border-radius: 16px; text-align: center;
  background: var(--ds-coal); border: 1px solid var(--line-soft);
  color: inherit; transition: border-color .18s ease, transform .14s ease;
}
.count-box:hover { border-color: rgba(245,166,35,.45); transform: translateY(-1px); }
.count-box b { display: block; font-family: var(--font-display); font-size: 27px; color: var(--ds-white); }
.count-box span { font-size: 11px; color: var(--text-faint); letter-spacing: .05em; }
.count-box.urgent { border-color: rgba(245,166,35,.6); background: rgba(245,166,35,.09); }
.count-box.urgent b { color: var(--ds-orange); }

.panel-links { display: grid; gap: 9px; }
.panel-link {
  display: block; padding: 13px 16px; border-radius: 14px;
  background: var(--ds-coal); border: 1px solid var(--line-soft);
  color: inherit; transition: border-color .18s ease, transform .14s ease;
}
.panel-link:hover { border-color: rgba(245,166,35,.45); transform: translateX(2px); }
.panel-link b { display: block; font-size: 15px; color: var(--ds-white); }
.panel-link span { font-size: 12px; color: var(--text-faint); }

.net-options { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.net-option {
  padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--ds-coal); border: 1px solid var(--line); color: inherit; font: inherit;
  transition: border-color .18s ease;
}
.net-option:hover { border-color: rgba(245,166,35,.45); }
.net-option.on { border-color: var(--ds-orange); background: rgba(245,166,35,.09); }
.net-option b { display: block; font-family: var(--font-mono); font-size: 13.5px; color: var(--ds-orange); }
.net-option span { font-size: 11.5px; color: var(--text-faint); }

.panel-foot {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.panel-foot .btn { margin-left: auto; }

/* ------------------------------------------------------- pantallas chicas
   Estas vistas se hicieron para la PC del local, pero el dueno las abre desde
   el celular y ahi la barra de arriba desbordaba: es un flex de una sola fila
   —marca, sitio, navegacion, usuario, campana— y un hijo de flex no encoge por
   debajo de su contenido salvo que se le diga (`min-width: 0`). Medido en un
   ancho de 360: /admin se iba a 424 px, /dev a 392 y /caja a 362.

   El aparato de referencia es el Redmi 10, de 360 px de ancho. */

/* Que la navegacion pueda encogerse y usar su propio scroll horizontal, en vez
   de empujar la barra entera a lo ancho. Vale para cualquier tamano. */
.navlinks, .tabs { min-width: 0; flex: 1 1 auto; }
.appbar > * { min-width: 0; }

@media (max-width: 620px) {
  .appbar { gap: 8px; padding: 0 10px; }
  /* El nombre y el rol del usuario se caen: queda el avatar, que es el que
     abre el menu. El nombre ya esta dentro de ese menu. */
  .who-meta { display: none; }
  /* "CAJA", "COCINA"... ya se sabe por la pestana encendida. */
  .appbar .where { display: none; }
  .appbar .brand { font-size: 12px; }
  .appbar .brand span { display: none; }
  .navlinks a { padding: 7px 10px; font-size: 12.5px; }

  /* Nada de texto largo —un correo, un id, una URL— rompiendo su columna. */
  .who-meta b, .card, .board, td, th { overflow-wrap: anywhere; }

  /* Dos columnas fijas a 360 px dejan cada celda en 165: los contadores de
     `.panel-counts` no entran. Que decidan ellas cuantas caben. */
  .panel-counts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  /* Los dos botones de una comanda —aprobar y rechazar— no entran en una fila
     de 360 px y "Rechazar" quedaba cortado contra el borde. Apilados entran
     enteros y son mas faciles de acertar con el pulgar. */
  .ticket-foot { flex-wrap: wrap; }
  .ticket-foot .btn { flex: 1 1 100%; min-width: 0; }

  /* El area de toque minima es 44 px (Apple) / 48 (Google). Se agranda el
     area, no el dibujo: el boton se sigue viendo igual. */
  .btn-sm, .icon-btn, .tab { position: relative; }
  .btn-sm::after, .icon-btn::after {
    content: ''; position: absolute; inset: 50% 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* ==================================================== entrega a domicilio
   El bloque que el cajero le reenvia al motorizado. Se separa del resto del
   ticket con borde propio y un azul distinto del ambar de las notas: en una
   pantalla llena de pedidos, lo que hay que encontrar de un vistazo es a donde
   va este. */
.entrega {
  margin: 10px 0; padding: 10px 11px; border-radius: 12px;
  background: rgba(74,155,232,.08); border: 1px solid rgba(74,155,232,.3);
}
.entrega-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  color: var(--ds-blue); font-size: 11px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
}
.entrega-head svg { display: block; }
.entrega-dir { margin: 0; font-size: 13.5px; line-height: 1.45; font-weight: 600; }
.entrega-geo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 7px; }
.entrega-mapa {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ds-blue); font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.entrega-mapa:hover { text-decoration: underline; }
.entrega-mapa svg { display: block; }
.entrega-prec { font-size: 11.5px; color: var(--text-faint); }
/* Un punto malo es peor que ninguno si nadie avisa: el motorizado ve un mapa y
   sale, sin saber que el radio es de dos kilometros. */
.entrega-prec.mala { color: var(--ds-red); font-weight: 700; }
.entrega-sin-geo { margin: 6px 0 0; font-size: 12px; color: var(--text-faint); }
.entrega-ayuda { margin: 6px 0 0; font-size: 11px; color: var(--text-faint); line-height: 1.4; }
.entrega-cobro { margin: 7px 0 0; font-size: 12px; color: var(--text-dim); }
.entrega-botones { display: flex; gap: 6px; margin-top: 9px; }
.entrega-botones > * { flex: 1; }
.entrega-botones a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; text-decoration: none; }
.entrega-botones svg { display: block; }

/* Un tramo de la tabla de envio. En fila y no en tarjeta: son tres numeros y
   el dueno los lee de arriba abajo comprobando que van de menos a mas. */
.zona-fila {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font-size: 13px; color: var(--text-dim);
}
.zona-fila input { width: 82px; flex: none; }
.geo-local-estado { font-size: 12.5px; color: var(--ds-green); }
.geo-local-estado.falta { color: var(--ds-orange-hi); }

/* ═══ Cierre de turno (cocina y caja) ═══════════════════════════════════════
   Se dibuja en una hoja propia y no con `modal()` porque es larga, se llena a
   ratos y tiene que poder desplazarse con el teclado del celular abierto. La
   regla de esta pantalla: si cerrar cuesta mas que anotarlo en un papel, se
   anota en un papel — y entonces no existe ni el inventario ni el margen. */

.cc-hoja {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  width: min(640px, 100%);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cc-hoja-corta { max-height: min(70vh, 620px); }

.cc-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.cc-head h3 { margin: 0; font-size: 18px; }
.cc-head p { margin: 4px 0 0; }
.cc-head .btn-icon { margin-left: auto; }

.cc-cuerpo { overflow-y: auto; padding: 8px 18px; flex: 1; -webkit-overflow-scrolling: touch; }
.cc-grupo { margin: 14px 0; }
.cc-grupo h4 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}

.cc-fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cc-nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-nombre b { font-size: 14px; }
.cc-sub { font-size: 11px; color: var(--text-faint); }

.cc-conteo { display: flex; align-items: center; gap: 6px; }
/* 78 px y 16 px de letra. Los 16 px son el minimo para que iOS no haga zoom al
   enfocar (bajo eso lo hace, y desplaza la hoja entera). El ancho salio de
   mirarlo: con 64 px, "22.5" se cortaba — cuatro caracteres mas la flechita del
   campo numerico no caben. Y esa flechita se esconde porque aqui se teclea, no
   se sube de medio en medio con el raton. */
.cc-input {
  width: 78px; text-align: right; font-size: 16px;
  padding: 8px 10px;
}

/* Cuando el sistema quedo en negativo. Es un aviso, no un error del cocinero:
   falto registrar una compra, y quien lo lee tiene que entender que no es culpa
   suya ni algo que pueda arreglar contando mejor. */
.cc-sub-mal { color: var(--ds-orange); }
.cc-unidad { font-size: 11px; color: var(--text-faint); min-width: 52px; }

/* El estado de cada linea, con TEXTO y no solo color: "cuadra" / "faltan 2".
   Un punto verde o rojo obliga a recordar cual es cual, y a quien no distingue
   los colores no le dice nada. */
.cc-dif {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: var(--line-soft); color: var(--text-faint);
  white-space: nowrap; min-width: 62px; text-align: center;
}
.cc-dif-mal  { background: color-mix(in srgb, var(--ds-red) 18%, transparent); color: #F1958D; }
.cc-dif-raro { background: color-mix(in srgb, var(--ds-blue) 18%, transparent); color: #9CC8F2; }

.cc-resumen { padding: 12px 18px; border-top: 1px solid var(--line); }
.cc-aviso { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-dim); }
.cc-aviso b { color: var(--ds-orange); }
.cc-ok b { color: var(--ds-green); }
.cc-compras { margin-top: 10px; font-size: 12px; }
.cc-compras b { display: block; margin-bottom: 4px; }
.cc-compras ul { margin: 0; padding-left: 18px; color: var(--text-dim); line-height: 1.6; }

.cc-pie {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--line);
}

/* La lista de compras al terminar: es lo unico que el cocinero se lleva a
   cambio de haber contado, asi que sale grande y legible de lejos. */
.cc-lista { list-style: none; margin: 0; padding: 14px 18px; overflow-y: auto; }
.cc-lista li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px;
}
.cc-lista b { color: var(--ds-orange); min-width: 92px; }

/* --- El cierre de CAJA reusa todo lo de arriba y agrega lo suyo -----------

   Comparte hoja con el de cocina a proposito: son el mismo gesto (contar lo que
   hay, compararlo con lo que deberia haber, firmar) hecho por dos personas
   distintas, y aprenderse una sirve para la otra. Lo que cambia es la unidad:
   aqui son dolares, y por eso el simbolo va PEGADO al campo en vez de la
   unidad al lado. */

/* El campo de apertura. Es el unico numero de toda la pantalla y el mas
   importante del turno, asi que se ve grande: se teclea de pie, con el cajon
   abierto en la otra mano, sin agacharse a mirar. */
.cc-abre { display: flex; align-items: center; gap: 8px; }
.cc-signo { font-size: 26px; font-weight: 800; color: var(--text-faint); }
.cc-monto { width: 100%; max-width: 220px; font-size: 26px; padding: 12px 14px; text-align: left; }

.cc-rapidos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cc-chip { cursor: pointer; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cc-chip:hover { border-color: rgba(245,166,35,.5); color: var(--ds-orange-hi); }

/* El "$" antes del campo, no despues: se lee "$ 170", que es como esta escrito
   en todos los demas sitios de la app. */
.cc-unidad-pre { font-size: 13px; color: var(--text-faint); }

.cc-grupo textarea,
.cc-grupo input[type="text"] { width: 100%; }

/* El cuadre, en tres bloques. El de la derecha es el unico que importa y por
   eso es el que tiene color: los otros dos estan ahi para que se entienda de
   donde sale. */
.cc-cuadre { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.cc-cuadre > div { display: flex; flex-direction: column; gap: 2px; }
.cc-cuadre b { font-size: 17px; font-variant-numeric: tabular-nums; }
.cc-cuadre-dif { padding: 6px 12px; border-radius: 10px; background: var(--line-soft); }
.cc-cuadre-dif.cc-ok  { background: color-mix(in srgb, var(--ds-green) 16%, transparent); }
.cc-cuadre-dif.cc-mal { background: color-mix(in srgb, var(--ds-red) 16%, transparent); }
.cc-cuadre-dif.cc-mal b { color: #F1958D; }
.cc-cuadre-dif.cc-raro { background: color-mix(in srgb, var(--ds-blue) 16%, transparent); }
.cc-cuadre-dif.cc-raro b { color: #9CC8F2; }

/* El veredicto, despues de firmar. Grande y solo, porque es el unico momento en
   que el cajero ve para que sirvio haber contado. */
.cc-final {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border-radius: var(--radius-lg);
  background: var(--line-soft); margin: 14px 0 4px;
}
.cc-final b { font-size: 19px; }
.cc-final span { font-size: 12px; color: var(--text-dim); }
.cc-final.cc-mal  { background: color-mix(in srgb, var(--ds-red) 14%, transparent); }
.cc-final.cc-mal b { color: #F1958D; }
.cc-final.cc-raro { background: color-mix(in srgb, var(--ds-blue) 14%, transparent); }
.cc-final.cc-raro b { color: #9CC8F2; }
.cc-final.cc-ok { background: color-mix(in srgb, var(--ds-green) 14%, transparent); }

/* "Cerrar caja" vive en la fila de las pestanas pero no es una: se empuja a la
   derecha para que no se lea como "otra vista mas". Cuando la fila se desborda
   en una pantalla angosta, el separador se encoge a cero y el boton queda al
   final — sigue alcanzable arrastrando, que es como se navega esa fila. */
.tab-cierre { align-self: center; }

@media (max-width: 480px) {
  .cc-fila { grid-template-columns: 1fr auto; row-gap: 4px; }
  .cc-dif { grid-column: 2; justify-self: end; }
  .cc-pie { flex-direction: column-reverse; }
  .cc-pie .btn { width: 100%; }
  .cc-cuadre { grid-template-columns: 1fr 1fr; }
  .cc-cuadre-dif { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════ Inventario (Administracion)

   Comparte el lenguaje de las filas del cierre —nombre a la izquierda, estado
   en un chip con TEXTO, acciones a la derecha— porque son la misma tarea vista
   en dos momentos: aqui se carga lo que hay, y en el cierre se cuenta contra
   ello. Aprenderse una sirve para la otra. */

.inv-subtabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.inv-subtabs::-webkit-scrollbar { display: none; }

.inv-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.inv-head h3 { margin: 0; font-size: 17px; }
.inv-head p { margin: 4px 0 0; max-width: 62ch; }
.inv-head .btn { margin-left: auto; flex-shrink: 0; }

.inv-grupo { margin: 18px 0; }
.inv-grupo h4 {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}

.inv-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.inv-nombre { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.inv-nombre b { font-size: 14px; }
.inv-sub { font-size: 11px; color: var(--text-faint); }
.inv-acciones { display: flex; gap: 6px; flex-shrink: 0; }

/* El estado dicho con palabras. Un punto de color obliga a recordar cual es
   cual, y a quien no distingue los colores no le dice nada. */
.inv-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--line-soft); color: var(--text-faint); flex-shrink: 0;
}
.inv-chip-bajo { background: color-mix(in srgb, var(--ds-orange) 18%, transparent); color: var(--ds-orange-hi); }
.inv-chip-mal  { background: color-mix(in srgb, var(--ds-red) 18%, transparent); color: #F1958D; }
.inv-bajo .inv-nombre b { color: var(--ds-orange-hi); }

/* Lo que falta comprar va arriba y en su propio recuadro: es lo unico de esta
   pantalla que obliga a hacer algo hoy. */
.inv-compras {
  border: 1px solid color-mix(in srgb, var(--ds-orange) 35%, var(--line));
  background: color-mix(in srgb, var(--ds-orange) 7%, transparent);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 18px;
}
.inv-compras > b { color: var(--ds-orange-hi); font-size: 13px; }
.inv-compras ul { margin: 8px 0 10px; padding-left: 18px; font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.inv-compras li b { color: var(--ds-orange); margin-right: 6px; }

.inv-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.inv-receta-fila { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.inv-receta-fila select { flex: 1; min-width: 0; }
.inv-receta-fila .inv-sub { min-width: 110px; }
.inv-receta-total {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.inv-receta-total p { margin: 0; }

@media (max-width: 560px) {
  .inv-fila { flex-wrap: wrap; }
  .inv-acciones { width: 100%; }
  .inv-form2 { grid-template-columns: 1fr; }
  .inv-receta-fila { flex-wrap: wrap; }
  .inv-receta-fila select { flex-basis: 100%; }
}