/* ────────────────────────────────────────────────────────────────────────
   Tokens de Antima Solutions. Tres superficies con necesidades distintas, no un tema
   escalado: salonero (táctil, cálido), cocina (oscuro, legible a 3 m),
   administración (denso, tabular).
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --ink-50:#FAF9F7; --ink-100:#F2F0EC; --ink-200:#E4E0D9; --ink-300:#CFC9BE;
  --ink-400:#A9A093; --ink-500:#847A6C; --ink-600:#655D52; --ink-700:#4C463D;
  --ink-800:#332F29; --ink-900:#1F1C18; --ink-950:#12100D;
  --ember-50:#FEF6F1; --ember-100:#FDE8DA; --ember-200:#FACEB2; --ember-300:#F5AB80;
  --ember-400:#EE7F4C; --ember-500:#E15E27; --ember-600:#C4491A; --ember-700:#A23817;
  --ok:#128A5C; --ok-soft:#E4F5EE; --warn:#C77A06; --warn-soft:#FDF2DC;
  --late:#CE2318; --late-soft:#FCEBE9; --info:#2563A8; --info-soft:#E8F0F9;
  /* Semáforo de mesas (Fase 42 §4): Libre verde, Ocupada amarilla, Por
     limpiar roja, Reservada morada — significa lo mismo en todo restaurante,
     nunca lo redefine la marca (ver src/app/tenant.js). */
  --mesa-libre:#128A5C; --mesa-ocupada:#B7950B; --mesa-cuenta:#C77A06;
  --mesa-limpiar:#CE2318; --mesa-reservada:#7C3AED;
  --kds-bg:#0D0F12; --kds-panel:#161A1F; --kds-panel2:#1E242B;
  --kds-line:#2C343D; --kds-text:#F3F5F7; --kds-dim:#93A0AD;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-card:14px; --r-ctl:10px;
  --sh-card:0 1px 2px rgba(31,28,24,.05), 0 6px 18px -8px rgba(31,28,24,.14);
  --sh-lift:0 2px 4px rgba(31,28,24,.06), 0 14px 32px -12px rgba(31,28,24,.22);
  --topbar-h:62px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink-100);color:var(--ink-900);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--ember-600);outline-offset:2px;border-radius:4px}
.tnum{font-variant-numeric:tabular-nums}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}

.topbar .surfacetag{font-size:12.5px;font-weight:700;color:var(--ember-700);
  background:var(--ember-50);padding:3px 10px;border-radius:99px}
.topbar .urltag{font-family:var(--num);font-size:11.5px;color:var(--ink-400);
  text-decoration:none;border-radius:6px;padding:2px 6px}
.topbar a.urltag:hover{background:var(--ink-100);color:var(--ink-600)}
.login .loginlogo{width:44px;height:44px;border-radius:13px;background:var(--ember-600);
  color:#fff;display:grid;place-items:center;font-weight:900;font-size:19px;margin:0 auto 10px}
.login .url{font-family:var(--num);font-size:12px;color:var(--ink-600);margin-top:8px}

/* ── Armazón de la aplicación ───────────────────────────────────────── */
#app{min-height:calc(100vh - var(--topbar-h))}
.shell{display:grid;grid-template-columns:222px minmax(0,1fr);min-height:calc(100vh - var(--topbar-h))}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 20px;
  min-height:var(--topbar-h);box-sizing:border-box;
  background:#fff;border-bottom:1px solid var(--ink-200);
  position:sticky;top:0;z-index:30;
  box-shadow:0 1px 0 rgba(31,28,24,.03),0 4px 14px -10px rgba(31,28,24,.18)}
.logo{width:32px;height:32px;border-radius:9px;background:var(--ember-600);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:15px;flex:none}
.topbar .rname{font-weight:700;font-size:15px;letter-spacing:-.01em}
.topbar .branch{font-size:12px;color:var(--ink-500);background:var(--ink-100);
  padding:2px 9px;border-radius:99px}
.topbar .sp{flex:1}
.livebadge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:99px;background:var(--ink-100);color:var(--ink-500)}
.livebadge i{font-style:normal;font-size:10px;line-height:1}
.livebadge.warn{background:var(--warn-soft);color:var(--warn)}
.livebadge.late{background:var(--late-soft);color:var(--late)}
.topbar .me{text-align:right;line-height:1.3;padding-right:2px;border-right:1px solid var(--ink-200);
  margin-right:2px}
.topbar .me b{font-size:13.5px;font-weight:700}
.topbar .me span{display:block;font-size:11.5px;color:var(--ink-500)}

.nav{background:#fff;border-right:1px solid var(--ink-200);padding:16px 12px;
  position:sticky;top:var(--topbar-h);align-self:start;
  height:calc(100vh - var(--topbar-h));overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--ink-300) transparent}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:2px;
  border-radius:var(--r-ctl);color:var(--ink-700);text-decoration:none;
  font-size:13.5px;font-weight:500;line-height:1.25;transition:background .12s ease,color .12s ease}
.nav a:hover{background:var(--ink-100);color:var(--ink-900)}
/* Sub-entrada: cuelga de lo de arriba, sea un enlace (Agente bajo
   Reservaciones) o un encabezado de área. La sangría la alinea con la ETIQUETA
   del padre, no con su icono, que es lo que hace leer la relación sin
   necesidad de una línea ni un triángulo. */
.nav a.sub{padding-left:30px;font-size:13px}
/* Encabezado de área: agrupa, no navega. Versalita pequeña y apagada — tiene
   que separar sin competir con las entradas, que son lo que se pulsa. */
.nav .navgroup{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-500);padding:14px 12px 5px}
.nav .navgroup:first-child{padding-top:2px}

/* ── Widget de mesa: el ASIENTO manda ─────────────────────────────────────
   La queja era «demasiados números que no quedan claros»: la tarjeta tenía el
   código y la capacidad con el mismo peso, y la forma repetida en texto cuando
   ya la dice el borde del widget. Ahora hay UN número grande con su etiqueta
   —los asientos, que es lo que se compara mesa a mesa al cuadrar el salón— y
   el nombre arriba, pequeño y apagado. Un número sin etiqueta era el problema;
   dos, peor. */
.tbl-name{font-size:11px;font-weight:600;color:var(--ink-500);line-height:1.1}
.tbl-seats{font-size:22px;font-weight:800;line-height:1.05;margin-top:2px}
.tbl-seats-l{font-size:10.5px;font-weight:500;color:var(--ink-500);
  letter-spacing:.02em;line-height:1}

/* Panel de reservaciones: cada valor centrado BAJO su título. Alineados a la
   izquierda, el ojo no sabe a qué columna pertenece un dato corto como «2». */
.res-c{text-align:center}
/* Encabezado de turno en la lista del día: separa almuerzo de cena sin pesar
   más que los datos. */
.res-turno{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-600);padding:14px 2px 6px}
.res-turno:first-child{padding-top:2px}
td.res-c .muted{text-align:center}
.nav a.on{background:var(--ember-50);color:var(--ember-700);font-weight:700}
.nav .navicon{font-size:15px;line-height:1;flex:none;width:18px;text-align:center;
  filter:grayscale(.15);opacity:.9}
.nav .badge{margin-left:auto;background:var(--late);color:#fff;font-size:11px;font-weight:700;
  min-width:19px;height:19px;border-radius:99px;display:grid;place-items:center;padding:0 5px;flex:none}
.main{padding:0;min-width:0}
.pad{padding:18px 20px 48px}

/* ── Componentes ────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-card);
  box-shadow:var(--sh-card)}
.card>header{border-bottom:1px solid var(--ink-200);padding:11px 16px}
.card>header h2{font-size:15px;font-weight:700}
.card>header p{font-size:12px;color:var(--ink-500)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:var(--r-ctl);padding:8px 14px;font-size:14px;font-weight:600;
  border:1px solid transparent;transition:filter .12s}
.btn:hover{filter:brightness(.96)}
.btn:disabled{opacity:.42;cursor:not-allowed;filter:none}
.btn-primary{background:var(--ember-600);color:#fff}
.btn-ghost{background:#fff;border-color:var(--ink-300);color:var(--ink-800)}
.btn-quiet{background:var(--ink-100);color:var(--ink-700)}
.btn-danger{background:var(--late-soft);color:var(--late);border-color:#F3C9C5}
.btn-lg{padding:13px 18px;font-size:15px;border-radius:12px}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:2px 8px;border-radius:99px;background:var(--ink-100);color:var(--ink-600)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.late{background:var(--late-soft);color:var(--late)}
.chip.info{background:var(--info-soft);color:var(--info)}
.tabs{display:flex;border-bottom:1px solid var(--ink-200);background:#fff;border-radius:var(--r-ctl) var(--r-ctl) 0 0}
.tabs a,.tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 8px;font-size:14px;font-weight:600;color:var(--ink-500);text-decoration:none;
  position:relative;transition:color .12s ease}
.tabs a:hover,.tabs button:hover{color:var(--ink-800)}
.tabs a.on,.tabs button.on{color:var(--ember-700)}
.tabs a.on::after,.tabs button.on::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;
  background:var(--ember-600)}
.tabs .navicon{font-size:15px;line-height:1}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;font-weight:500;color:var(--ink-500);
  padding:8px 14px;border-bottom:1px solid var(--ink-200)}
td{padding:9px 14px;border-bottom:1px solid var(--ink-100)}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.permtable-wrap{overflow:auto;max-height:calc(100vh - var(--topbar-h) - 220px)}
.permtable{border-collapse:separate;border-spacing:0}
.permtable thead th{position:sticky;top:0;z-index:2;background:#fff;
  box-shadow:0 1px 0 var(--ink-200)}
input[type=text],input[type=number],input[type=email],select,textarea{
  width:100%;border:1px solid var(--ink-300);border-radius:var(--r-ctl);
  padding:8px 11px;background:#fff}
label.f{display:block;font-size:12px;font-weight:600;color:var(--ink-600);margin-bottom:4px}
.muted{color:var(--ink-500)}
.grid{display:grid;gap:14px}
.row{display:flex;gap:10px;align-items:center}
.wrapline{flex-wrap:wrap}
.empty{padding:34px 18px;text-align:center;color:var(--ink-500);font-size:13.5px}
/* Bandeja vacía de "Mi cuenta" (Fase 44). */
.traybox{display:flex;flex-direction:column;align-items:center}
.tray-ic{width:60px;height:60px;border-radius:50%;background:var(--ember-50);
  display:grid;place-items:center;font-size:28px;margin-bottom:10px}

/* ── Centro de mando de gerencia (Fase 12) ──────────────────────────── */
.kpirow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-card);padding:13px 15px;
  box-shadow:var(--sh-card)}
.kpi-l{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-500)}
.kpi-v{font-size:22px;font-weight:800;margin-top:3px;line-height:1.1}
.kpi-h{font-size:11.5px;color:var(--ink-500);margin-top:3px;line-height:1.35}
.kpi-warn{border-color:#F0DDB3;background:var(--warn-soft)} .kpi-warn .kpi-v{color:var(--warn)}
.kpi-late{border-color:#F3C9C5;background:var(--late-soft)} .kpi-late .kpi-v{color:var(--late)}

/* ── Panorama operativo del salón (Fase 11) ─────────────────────────── */
.awstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--ink-200);
  border-bottom:1px solid var(--ink-200)}
.awcell{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
  padding:10px 12px;background:#fff;color:inherit;text-decoration:none;min-height:58px}
.awcell[href]:hover{background:var(--ink-50)}
.awcell .awn{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.awcell .awl{font-size:13px;font-weight:700;color:var(--ink-500);line-height:1.25}
.awcell.late .awn{color:var(--late)} .awcell.warn .awn{color:var(--warn)} .awcell.ok .awn{color:var(--ok)}
.awcell.late{background:var(--late-soft)} .awcell.warn{background:var(--warn-soft)}
@media (max-width:820px){ .awstrip{grid-template-columns:repeat(4,1fr)} }
@media (max-width:520px){ .awstrip{grid-template-columns:repeat(2,1fr)} }

/* ── Semáforo de SLA ────────────────────────────────────────────────── */
.sla{font-family:var(--num);font-weight:700;font-size:12px;padding:2px 7px;border-radius:6px}
.sla.ok{background:var(--ok-soft);color:var(--ok)}
.sla.warn{background:var(--warn-soft);color:var(--warn)}
.sla.late{background:var(--late-soft);color:var(--late)}

/* ── Plano del salón ────────────────────────────────────────────────── */
/* Envoltura de zoom (Fase 42 §6): el `.floor` real mide su tamaño SIN
   escalar; esta envoltura es la que de verdad scrollea, con el alto/ancho ya
   multiplicados por el zoom — así acercar no lo saca de su caja ni rompe el
   scroll. Solo Salón la usa; Gerencia (editor) y el mapa del Comensal siguen
   con `.floor` a secas, sin zoom. */
/* Envoltura NO scrolleable (Fase 42 §10): ancla el control de zoom en la
   esquina, fuera del área que hace scroll, para que nunca se pierda de vista
   al desplazar el plano. */
.floor-outer{position:relative}
.floor-zoomwrap{overflow:auto;max-height:min(70vh,720px);border-radius:var(--r-card);
  width:100%;background:#fff}
.floor{position:relative;background:#fff;border:1px solid var(--ink-200);touch-action:pan-y;
  border-radius:var(--r-card);background-image:radial-gradient(var(--ink-200) 1px,transparent 1px);
  background-size:22px 22px;overflow:auto}
.floor-zoom{position:absolute;bottom:14px;right:14px;z-index:5;display:flex;gap:4px;align-items:center;
  background:#fff;padding:5px;border-radius:99px;box-shadow:var(--sh-lift);border:1px solid var(--ink-200)}
.tbl{position:absolute;border:2px solid var(--ink-300);background:#fff;display:grid;
  place-content:center;text-align:center;line-height:1.15;transition:transform .1s;
  touch-action:manipulation}
.tbl:hover{transform:scale(1.03);z-index:2}
.tbl .code{font-size:19px;font-weight:800}
.tbl .st{font-size:11px;color:var(--ink-500)}
.tbl .whos{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin-top:3px}
.tbl .who{font-size:10px;font-weight:700;background:var(--ember-600);color:#fff;
  border-radius:99px;padding:1px 6px;display:inline-block}
.tbl.mia{box-shadow:0 0 0 2px var(--ember-300)}
.dot{width:8px;height:8px;border-radius:99px;display:inline-block;margin-right:5px}
.tbl.libre{border-color:var(--mesa-libre);background:#EAF7F1}
.tbl.ocupada{border-color:var(--mesa-ocupada);background:#FBF6E3}
.tbl.cuenta{border-color:var(--mesa-cuenta);background:#FEF8EC}
.tbl.limpiar{border-style:dashed;background:var(--ink-100);border-color:var(--mesa-limpiar)}
.tbl.reservada{border-color:var(--mesa-reservada);background:#F3EEFC}
.tbl.alerta{border-color:var(--late);box-shadow:0 0 0 3px var(--late-soft)}
/* Iconos de acción por mesa (Fase 34 §4, Fase 41 §1): cada uno se toca aparte
   de la mesa (el `closest()` del despachador delegado resuelve al icono, no a
   la mesa) y su insignia baja en uno al atenderlo — sin salir de la pantalla.
   A propósito quedan DENTRO del cuadro de la mesa (no asomando fuera del
   borde): `.floor` hace scroll (`overflow:auto`) y una mesa pegada a un borde
   dejaba el icono recortado o inalcanzable — nunca "siempre visible". */
.tbl .tblicons{position:absolute;top:3px;right:3px;display:flex;gap:3px;z-index:1}
.tbl .tblicon{position:relative;width:20px;height:20px;border-radius:99px;border:none;
  background:var(--late);color:#fff;font-size:11px;display:grid;place-items:center;
  cursor:pointer;touch-action:manipulation;box-shadow:0 1px 3px rgba(31,28,24,.35)}
.tbl .tblicon.ticket{background:var(--warn)}
.tbl .tblicon.ready{background:var(--ok);cursor:default}
.tbl .tblicon .badge{position:absolute;bottom:-4px;right:-4px;min-width:13px;height:13px;
  border-radius:99px;background:#fff;color:var(--ink-900);font-size:8.5px;font-weight:800;
  display:grid;place-items:center;padding:0 2px;box-shadow:0 0 0 1.5px currentColor}

/* Semáforo de tiempos muertos de una mesa (Fase 34): inline por defecto (lista
   de mesas); en el widget del plano se reposiciona a la esquina superior
   izquierda, más grande y con borde blanco para que resalte sobre la mesa. */
.tldot{display:inline-block;width:10px;height:10px;border-radius:99px;vertical-align:middle;margin-right:5px}
.tldot.tl-green{background:var(--ok)}
.tldot.tl-yellow{background:var(--warn)}
.tldot.tl-red{background:var(--late);animation:kpulse 1.6s ease-in-out infinite}
.tbl .tldot{position:absolute;top:-6px;left:-6px;width:15px;height:15px;margin:0;
  border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:12px;
  font-size:12.5px;color:var(--ink-600)}
.legend i{width:9px;height:9px;border-radius:99px;display:inline-block;margin-right:5px}

/* ═══════════════════════════════════════════════════════════════════════
   PANTALLA DE COCINA (KDS) — Fase 10
   Táctil, alto contraste, legible a 3 m. Objetivos grandes, poco texto.
   ═══════════════════════════════════════════════════════════════════════ */
.kds{background:var(--kds-bg);color:var(--kds-text);min-height:100vh;
  -webkit-user-select:none;user-select:none}

/* Barra superior — sticky, siempre a la vista. */
.kds .bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:var(--kds-bg);border-bottom:1px solid var(--kds-line);flex-wrap:wrap}
.kds .bar h1{font-size:20px;font-weight:800;letter-spacing:-.01em}
.kds .seg{display:flex;gap:3px;background:var(--kds-panel2);border-radius:10px;padding:3px;
  overflow-x:auto;max-width:100%}
.kds .seg button{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;
  border-radius:8px;font-weight:800;font-size:14px;color:var(--kds-dim);white-space:nowrap}
.kds .seg button.on{background:#fff;color:var(--ink-900)}
.kds .seg .cnt{background:var(--ember-600);color:#fff;font-size:11px;font-weight:800;
  min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;padding:0 4px}
.kds .seg button.on .cnt{background:var(--ember-600);color:#fff}
.kds .kbtn{min-height:40px;padding:0 14px;border-radius:8px;background:var(--kds-panel2);
  color:var(--kds-text);font-weight:700;font-size:13.5px;display:inline-flex;align-items:center}
.kds .kbtn:hover{background:var(--kds-line)}

/* Conexión perdida — imposible de ignorar. */
.kds .kalert.offline{background:var(--late);color:#fff;font-weight:800;font-size:15px;
  padding:11px 16px;text-align:center;letter-spacing:.01em}

/* Tira de estado operativo — solo lo accionable, nada de analítica. */
.kds .kstrip{display:flex;gap:16px;flex-wrap:wrap;padding:9px 16px;background:var(--kds-panel);
  border-bottom:1px solid var(--kds-line);font-size:14px;font-weight:800}
.kds .kstrip .late{color:#FF6B5E} .kds .kstrip .cancel{color:#FF6B5E} .kds .kstrip .idle{color:#F5B637}

/* Agotados — rojo, en negrita. */
.kds .sold{background:#3A1512;color:#FFC9C2;padding:9px 16px;font-size:14px;font-weight:700;
  border-bottom:1px solid var(--kds-line)}
.kds .sold b{color:#fff}

/* Columnas por estado — tinte propio para distinguirlas de un vistazo. */
.kds .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 14px 60px}
.kds .col{background:var(--kds-panel);border:1px solid var(--kds-line);border-radius:14px;
  padding:12px;min-height:200px}
.kds .col h3{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--kds-dim)}
.kds .col h3 span{background:var(--kds-panel2);color:var(--kds-text);font-size:13px;
  min-width:26px;height:22px;border-radius:99px;display:grid;place-items:center;padding:0 7px}
.kds .col-queued h3{color:#F5B637}
.kds .col-preparing h3{color:#7FB2FF}
.kds .col-ready h3{color:#5FD69C}
.kds .col-ready{background:#0F2019;border-color:#1E4536}

/* Tarjeta de comanda. */
.kds .tk{background:var(--kds-panel2);border:2px solid var(--kds-line);border-radius:14px;
  padding:12px;margin-bottom:12px}
.kds .col-ready .tk{background:#12261D;border-color:#2C6349}
.kds .tk.warn{border-color:var(--warn)}
.kds .tk.late{border-color:var(--late);animation:kpulse 1.6s ease-in-out infinite}
@keyframes kpulse{0%,100%{box-shadow:0 0 0 0 rgba(206,35,24,.45)}50%{box-shadow:0 0 0 5px rgba(206,35,24,0)}}
.kds .tk.pinned{border-color:var(--ember-400)}
.kds .tk .hd{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.kds .tk .mesa{font-size:40px;font-weight:900;letter-spacing:-.03em;line-height:.95}
.kds .tk .meta{font-size:12.5px;font-weight:700;color:var(--kds-dim);line-height:1.25}
.kds .tk .clk{margin-left:auto;font-family:var(--num);font-weight:900;font-size:17px;
  padding:4px 10px;border-radius:8px;background:#2A3038;color:var(--kds-text)}
.kds .tk .clk.warn{background:var(--warn);color:#241a02}
.kds .tk .clk.late{background:var(--late);color:#fff}
.kds .tk .kpin{width:40px;height:40px;flex:none;border-radius:10px;background:var(--kds-bg);
  font-size:16px;opacity:.4;line-height:1}
.kds .tk .kpin.on{opacity:1;background:var(--ember-600)}

/* Producción agrupada (Batching) — el mismo plato de VARIAS mesas, llegado en
   la misma ventana de tiempo: un bloque destacado (dorado, distinto de las
   tarjetas de comanda) para que el cocinero lo prepare todo junto. */
.kds .kbatch{background:linear-gradient(160deg,#2E2308,var(--kds-panel2));
  border:2px solid var(--ember-500);border-radius:14px;padding:12px;margin-bottom:12px}
.kds .kbatch-hd{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ember-300)}
.kds .kbatch-body{display:flex;align-items:baseline;gap:10px;margin:6px 0 3px}
.kds .kbatch-qty{font-size:30px;font-weight:900;font-family:var(--num);color:#fff;flex:none}
.kds .kbatch-name{font-size:19px;font-weight:800;color:var(--kds-text)}
.kds .kbatch-meta{font-size:12.5px;font-weight:600;color:var(--kds-dim)}
.kds .kbatch .kbump{background:var(--ember-600)}
.kds .kbatch .kbump:active{background:var(--ember-700)}

/* Bandas de alerta dentro de la tarjeta. */
.kds .kban{font-weight:900;font-size:14px;text-align:center;padding:7px 10px;border-radius:9px;
  margin-bottom:9px;letter-spacing:.02em}
.kds .kban.late{background:var(--late);color:#fff}
.kds .kban.cancel{background:#5A1A16;color:#FFD3CD;border:2px solid var(--late)}
.kds .tk .away{background:#123326;color:#7DE0B0;font-size:12px;font-weight:900;
  padding:3px 9px;border-radius:6px;display:inline-block;margin-bottom:8px}

/* Líneas de plato — cada una es un objetivo táctil grande (completar ítem). */
.kds .klines{display:flex;flex-direction:column;gap:7px}
.kds .kline{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  min-height:56px;padding:10px 12px;border-radius:10px;background:var(--kds-bg);
  color:var(--kds-text);border:1px solid var(--kds-line)}
.kds .kline:not(:disabled):active{background:var(--kds-line)}
.kds .kline.done{opacity:.5}
.kds .kline.done .kn{text-decoration:line-through}
.kds .kline .kq{font-size:23px;font-weight:900;font-family:var(--num);flex:none;min-width:42px}
.kds .kline .kn{font-size:21px;font-weight:800;line-height:1.2;flex:1;display:flex;flex-direction:column;gap:3px}
.kds .kline .kmods{display:flex;flex-wrap:wrap;gap:4px 8px}
.kds .kline .kmod{font-size:14px;font-weight:700;color:#9BD0FF}
/* Alergias/exclusiones (Fase 44): "quitar X" casi siempre es una alergia —
   el color más urgente. Extras: aviso, no urgencia. */
.kds .kline .kmod-exclusion{color:#FF8A75;background:#3A1712;padding:2px 7px;border-radius:6px}
.kds .kline .kmod-extra{color:#FFC069;background:#3A2A0E;padding:2px 7px;border-radius:6px}
.kds .kline .knote{font-size:13.5px;font-weight:700;color:#F5D98A;background:#3A2E12;
  padding:3px 8px;border-radius:6px;align-self:flex-start}
.kds .kline .kst{font-size:11px;font-weight:800;color:var(--kds-dim);flex:none;text-transform:uppercase}
.kds .kline.done .kst{color:#5FD69C}

/* Botón de avanzar toda la comanda — el objetivo más grande. */
.kds .kbump{width:100%;margin-top:11px;min-height:60px;background:var(--ember-600);color:#fff;
  border-radius:12px;font-weight:900;font-size:18px;letter-spacing:.01em}
.kds .kbump:active{background:var(--ember-700)}

/* Línea LISTA (por entregar): resaltada, nunca tachada. */
.kds .kline.ready{border:2px solid #2C6349;background:#12261D}
.kds .kline.ready .kst{color:#5FD69C}

/* Arrastrar comandas entre columnas. */
.kds .tk[draggable="true"]{cursor:grab}
.kds .tk.dragging{opacity:.45;cursor:grabbing}
.kds .col.dropok{outline:3px dashed var(--ember-400);outline-offset:-3px;background:var(--kds-panel2)}

/* Caja: arrastrar un platillo a otra cuenta de la misma mesa. */
.caja-line[draggable="true"]{cursor:grab}
.caja-line.dragging{opacity:.4;cursor:grabbing}
.caja-acc.dropok{outline:3px dashed var(--ember-400);outline-offset:-3px}

/* "Entregados": memoria reciente, deliberadamente discreta y compacta. */
.kds .kdone{margin:0 14px 30px;padding:10px 14px;background:var(--kds-panel);
  border:1px solid var(--kds-line);border-radius:12px;opacity:.72}
.kds .kdone h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--kds-dim);margin-bottom:8px}
.kds .kdone h4 span{background:var(--kds-panel2);padding:1px 7px;border-radius:99px;margin-left:6px}
.kds .kdone-list{display:flex;flex-wrap:wrap;gap:6px}
.kds .kdone-pill{font-size:12px;font-weight:600;color:var(--kds-dim);background:var(--kds-bg);
  border:1px solid var(--kds-line);border-radius:99px;padding:3px 9px}
.kds .kdone-pill b{color:#5FD69C}
.kds .kdone-pill.more{font-style:italic}

.kds .noprice{padding:10px 16px;font-size:11.5px;color:var(--kds-dim);border-top:1px solid var(--kds-line)}
.kds .kds-empty{color:var(--kds-dim);text-align:center;padding:34px 0;font-size:15px;font-weight:700}

@media (max-width:900px){
  .kds .cols{grid-template-columns:minmax(0,1fr)}
  .kds .tk .mesa{font-size:34px}
}
@media (prefers-reduced-motion:reduce){ .kds .tk.late{animation:none} }

/* ── Teléfono del comensal ──────────────────────────────────────────── */
/* Alto fijo al viewport + overflow:hidden: así `.body` (flex:1) es la ÚNICA
   región que hace scroll de verdad, y todo lo que queda fuera de ella
   (header, pestañas, avisos) se queda fijo arriba sin necesitar `sticky`.
   `100vh` en móvil se calcula contra el viewport MÁXIMO (barra del navegador
   escondida) y no contra lo que de verdad se ve — la caja queda más alta que
   la pantalla real y parte del contenido nunca es alcanzable con scroll.
   `100dvh` (viewport dinámico) se ajusta según se muestra/oculta esa barra;
   queda como mejora progresiva sobre la `vh` de respaldo para navegadores
   viejos. */
.phone{max-width:430px;margin:0 auto;background:var(--ink-50);height:100vh;height:100dvh;
  display:flex;flex-direction:column;border-left:1px solid var(--ink-200);
  border-right:1px solid var(--ink-200);overflow:hidden}
/* Tablet/escritorio (p. ej. una tablet montada en la mesa): el frame se ensancha
   y la grilla del menú pasa de 2 a 3+ columnas por sí sola. */
@media (min-width:680px){ .phone{max-width:680px} }
@media (min-width:1024px){ .phone{max-width:860px} }
.phone header{background:#fff;border-bottom:1px solid var(--ink-200);padding:12px 16px;
  display:flex;align-items:center;gap:10px;flex:none}
.phone .lang{display:flex;border:1px solid var(--ink-200);border-radius:var(--r-ctl);padding:2px}
.phone .lang button{padding:3px 9px;border-radius:7px;font-size:12px;font-weight:700;
  text-transform:uppercase;color:var(--ink-500)}
.phone .lang button.on{background:var(--ink-900);color:#fff}
.phone .body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.phone .prod{display:flex;gap:12px;width:100%;text-align:left;background:#fff;
  padding:13px 16px;border-bottom:1px solid var(--ink-100);align-items:flex-start}
.phone .prod:disabled{opacity:.5}
.phone .plus{margin-left:auto;width:36px;height:36px;border-radius:99px;
  background:var(--ember-600);color:#fff;display:grid;place-items:center;font-size:20px;flex:none}

/* ── Grilla responsiva de tarjetas de platillo ─────────────────────────────
   n×2 en móvil/tablet, n×3+ en pantallas grandes. Nació en el menú del
   comensal (dentro de `.phone`); Salón la reutiliza tal cual para "Tomar
   pedido" (Fase 41 §1), por eso las reglas ya no están ancladas a `.phone`. */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px;padding:12px 14px;background:var(--ink-50)}
@media (min-width:520px){ .menu-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:14px 16px} }
.dish{
  background:#fff;min-width:0;
  border:1px solid var(--ink-200);border-radius:var(--r-card);overflow:hidden;position:relative}
/* El cuerpo clicable (`dish-hit`) y el "+" (`dish-plus`) son HERMANOS, nunca
   un botón dentro de otro: el "+" necesita su PROPIA acción (One-Tap cuando
   el platillo no exige elegir nada) sin disparar también la del detalle. */
.dish-hit{
  display:flex;flex-direction:column;text-align:left;width:100%;min-width:0;
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.dish-hit:disabled{opacity:.55}
.dish-media{
  position:relative;aspect-ratio:16/9;overflow:hidden;display:grid;place-items:center;
  /* Fondo de respaldo cuando el platillo no tiene foto: el color PRIMARIO de
     la marca (Fase 44) — sigue al tenant vía `--ember-*` (app/tenant.js), no
     un gris neutro genérico. */
  background:linear-gradient(120deg,var(--ember-400),var(--ember-600),var(--ember-700));
  background-size:220% 220%;animation:dishdrift 16s ease-in-out infinite}
.dish-media-ph{font-size:32px;opacity:.85;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
.dish-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dish-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.dish-name{font-size:14px;line-height:1.25}
.dish-desc{font-size:12px;color:var(--ink-500);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dish-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding-top:4px}
.dish-foot .tnum{font-size:14px}
.dish-plus{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:99px;
  background:var(--ember-600);color:#fff;display:grid;place-items:center;font-size:19px;
  box-shadow:0 1px 5px rgba(0,0,0,.28);border:0;line-height:1;padding:0;cursor:pointer;z-index:1}
.dish-plus:active{background:var(--ember-700)}

/* Buscador del menú (Fase 44) — mismo look que el resto de controles del
   comensal (`.cats`, `.dietbar`), no un `<input>` sin estilizar. */
.dinersearch{padding:0 14px 8px}
.dinersearch input{width:100%;padding:10px 14px;border:1px solid var(--ink-200);border-radius:99px;
  font:inherit;font-size:14px;background:#fff}
.dinersearch input:focus-visible{outline:2px solid var(--ember-500);outline-offset:1px}
@media (min-width:520px){ .dinersearch{padding:0 16px 10px} }

/* Media grande del modal de detalle del platillo — mismo respaldo de marca. */
.dish-hero{position:relative;aspect-ratio:16/9;margin:-16px -18px 14px;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(120deg,var(--ember-400),var(--ember-600),var(--ember-700));
  background-size:220% 220%;animation:dishdrift 16s ease-in-out infinite}
.dish-hero .dish-media-ph{font-size:54px;opacity:.85;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25))}
.dish-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dish-price{font-size:22px;font-weight:800;font-family:var(--num)}

/* Ken Burns: zoom + traslación lentos y en bucle, para simular un video ligero
   sin descargar uno. La imagen arranca ya en scale(1.05). */
@keyframes kenburns{
  0%   {transform:scale(1.05) translate(0,0)}
  45%  {transform:scale(1.14) translate(-2%,1.2%)}
  70%  {transform:scale(1.11) translate(1.4%,-1%)}
  100% {transform:scale(1.05) translate(0,0)}}
.ken-burns{transform:scale(1.05);animation:kenburns 24s ease-in-out infinite;will-change:transform}
/* Deriva ambiental del marcador (sin imagen): el media siempre tiene algo de
   movimiento, como pide el rediseño. */
@keyframes dishdrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Media generado por IA aún en proceso: barrido continuo tipo skeleton. */
.ai-media{background:linear-gradient(135deg,#EAE3F5,#DDE7F7)}
.ai-media .ai-shimmer{position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);
  background-size:220% 100%;animation:aishine 1.6s linear infinite}
@keyframes aishine{0%{background-position:120% 0}100%{background-position:-120% 0}}
.ai-media-label{position:relative;font-size:12px;font-weight:700;color:var(--ink-600);
  background:rgba(255,255,255,.7);padding:3px 9px;border-radius:99px}
.ai-chip{background:#EAE3F5;color:#5B3F86}

/* Toggle de IA en el formulario de "Crear platillo". */
.ai-toggle{display:flex;gap:11px;margin-top:12px;padding:12px 14px;cursor:pointer;
  border:1.5px solid var(--ink-200);border-radius:12px;align-items:flex-start}
.ai-toggle:has(input:checked){border-color:var(--ember-500);background:var(--ember-50)}
.ai-toggle input{margin-top:2px}
.phone .cats{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;background:var(--ink-50);
  position:sticky;top:0;z-index:2}
.phone .cats button{flex:none;padding:7px 14px;border-radius:99px;font-size:13px;
  font-weight:600;background:var(--ink-100);color:var(--ink-700)}
.phone .cats button.on{background:var(--ink-900);color:#fff}
/* Barra de filtros dietéticos del menú (Vegetariano · Vegano · Keto · Sin gluten). */
.phone .dietbar{display:flex;gap:7px;overflow-x:auto;padding:8px 16px;background:var(--ink-50);
  border-top:1px solid var(--ink-100)}
.phone .dietbar button{flex:none;padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:700;
  background:#fff;color:var(--ink-600);border:1.5px solid var(--ink-200)}
.phone .dietbar button.on{background:var(--ok-soft,#E2F1E6);color:var(--ok,#1B7A3D);border-color:var(--ok,#1B7A3D)}
.phone .dietbar button.clear{background:none;border:none;color:var(--ink-500);text-decoration:underline;font-weight:600}
.phone .menu-empty{padding:34px 22px;text-align:center;font-size:13px;color:var(--ink-500);background:var(--ink-50)}
/* Escoger cuenta o forma de pago: tarjetas grandes, no una lista apretada. */
.phone .pick{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  width:100%;min-height:56px;padding:13px 15px;border:1.5px solid var(--ink-200);
  border-radius:var(--r-card);background:#fff}
.phone .pick:hover{border-color:var(--ink-400)}
.phone .pick.big{min-height:72px}
.phone .pick b{font-size:15px}
.phone .pick span{font-size:12.5px;color:var(--ink-500)}
.phone .tablebadge{width:92px;height:92px;border-radius:22px;background:var(--ink-900);
  color:#fff;display:grid;place-items:center;font-size:38px;font-weight:800;margin:0 auto 18px}
.phone .linkish{color:var(--ember-700);font-weight:700;text-decoration:underline;font-size:12.5px}
.phone .phonefoot{text-align:center;padding:10px;font-size:12px;color:var(--ink-500);
  background:#fff;border-top:1px solid var(--ink-200)}
.phone .rm{width:38px;height:38px;flex:none;border-radius:10px;
  background:var(--late-soft);color:var(--late);font-size:15px;font-weight:700}
.phone .demopick{margin-top:22px;padding-top:14px;border-top:1px dashed var(--ink-300);
  font-size:12px;color:var(--ink-500)}
.phone .incl{padding:8px 16px;font-size:12px;color:var(--ink-500);background:var(--ink-50);
  border-bottom:1px solid var(--ink-100)}
.phone .flash{padding:11px 16px;font-size:13.5px;font-weight:600;background:var(--warn-soft);
  color:var(--warn)}
.phone .flash.ok{background:var(--ok-soft);color:var(--ok)}

/* Lista del pedido antes de enviarlo: se puede quitar lo que uno se arrepiente. */
.phone .cart{background:#fff;border-top:8px solid var(--ink-100)}
.phone .cart-hd{display:flex;align-items:baseline;gap:8px;padding:13px 16px 8px}
.phone .cart-hd b{font-size:15px}
.phone .cart-hd span{font-size:12.5px}
.phone .cart-row{display:flex;align-items:center;gap:11px;padding:11px 16px;
  border-top:1px solid var(--ink-100)}
.phone .cart-row .rm{width:38px;height:38px;flex:none;border-radius:10px;
  background:var(--late-soft);color:var(--late);font-size:15px;font-weight:700}

/* Barra inferior fija: siempre dentro del ancho del teléfono, nunca sobre él. */
.phone .dinerfoot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--ink-200);
  padding:10px 14px;display:flex;flex-direction:column;gap:9px}
.phone .callbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:48px;border-radius:var(--r-ctl);background:var(--ink-900);color:#fff;
  font-size:15px;font-weight:700}
.phone .sendbtn{flex-direction:column;gap:1px;min-height:56px;line-height:1.25}
.phone .sendbtn .tnum{font-size:12.5px;font-weight:600;opacity:.9}

/* ── Modal ──────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(18,16,13,.5);display:grid;
  place-items:center;padding:16px;z-index:50}
.modal{background:#fff;border-radius:16px;max-width:520px;width:100%;
  max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--sh-lift)}
.modal header{display:flex;align-items:center;gap:10px;padding:14px 18px;flex:none;
  border-bottom:1px solid var(--ink-200)}
.modal header h2{font-size:16px;font-weight:700;flex:1}
.modal .bd{padding:16px 18px;overflow:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
.modal .ft{padding:12px 18px;border-top:1px solid var(--ink-200);display:flex;gap:10px;flex:none}

/* En el teléfono del comensal el diálogo es una hoja que sube desde abajo y
   nunca sale del ancho del aparato: el menú se abre igual en un celular de
   360 px que en una tablet. */
.scrim.sheet{place-items:end center;padding:0}
.scrim.sheet .modal{max-width:430px;width:100%;border-radius:18px 18px 0 0;max-height:82vh}
.scrim.sheet .modal .ft{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
/* La X de cerrar del detalle del platillo, en rojo — este diálogo (el único que
   usa `.sheet`) es el que más se abre y cierra de toda la superficie. */
.scrim.sheet .modal header button[data-act="closemodal"]{
  background:var(--late-soft);color:var(--late)}
/* Móvil: el detalle del platillo ocupa toda la pantalla, no una hoja parcial. */
@media (max-width:519px){
  .scrim.sheet{padding:0}
  /* `height:100%` no basta aquí: `.scrim` es un grid sin filas explícitas
     (`place-items:end center`), así que el porcentaje no tiene una altura
     definida contra la cual resolverse y el modal termina alto según su
     CONTENIDO en vez del viewport — nada hace scroll y el resto del platillo
     queda inalcanzable. `vh`/`dvh` son unidades de viewport, no porcentajes:
     resuelven siempre, igual que en `.phone` (arriba). */
  .scrim.sheet .modal{max-width:100%;width:100%;height:100vh;height:100dvh;
    max-height:100vh;max-height:100dvh;border-radius:0}
}
@media (min-width:520px){ .scrim.sheet{place-items:center;padding:16px}
  .scrim.sheet .modal{border-radius:18px;max-height:80vh} }

/* Grupos de opciones: botones grandes, no una nota escrita a mano. */
.opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;
  padding:10px 13px;border:1.5px solid var(--ink-200);border-radius:var(--r-ctl);
  background:#fff;text-align:left;font-size:14px;font-weight:600;color:var(--ink-800)}
.opt:hover{border-color:var(--ink-400)}
.opt.on{border-color:var(--ember-600);background:var(--ember-50);color:var(--ember-700)}
.opt .d{font-size:12px;font-weight:600;color:var(--ink-500)}
.opt.on .d{color:var(--ember-700)}
.gname{display:flex;align-items:baseline;gap:8px;margin:16px 0 7px}
.gname b{font-size:14px}
.gname span{font-size:12px;color:var(--ink-500)}
.gname .req{color:var(--ember-700);font-weight:700}
.qtyrow{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.qtybtn{width:46px;height:46px;border-radius:12px;background:var(--ink-100);
  font-size:22px;font-weight:700;color:var(--ink-700)}

/* ── Aviso flotante ─────────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:var(--ink-900);color:#fff;padding:11px 18px;border-radius:11px;
  font-size:13.5px;font-weight:500;box-shadow:var(--sh-lift);max-width:min(560px,92vw)}
#toast.bad{background:var(--late)}
#toast.good{background:var(--ok)}
.err{color:var(--late);font-size:12.5px}

/* Aviso grande de "llamó al salonero" (Comensal): efímero, más prominente que
   el toast — se cierra solo a los pocos segundos, sin botón. */
#waiter-overlay{position:fixed;inset:0;z-index:95;display:flex;align-items:center;
  justify-content:center;background:rgba(18,16,13,.55);padding:24px}
#waiter-overlay .card{max-width:300px;padding:34px 26px;text-align:center;
  box-shadow:var(--sh-lift)}
#waiter-overlay .ic{font-size:46px}
#waiter-overlay b{display:block;font-size:19px;font-weight:800;margin-top:14px}

/* ── Ingreso ────────────────────────────────────────────────────────── */
.login{min-height:calc(100vh - 62px);background:var(--ink-950);display:grid;
  place-items:center;padding:24px}
.login .box{width:100%;max-width:400px}
.login h1{color:#fff;text-align:center;font-size:20px;font-weight:800}
.login .lead{color:var(--ink-400);text-align:center;font-size:13.5px;margin-top:3px}
.login .people{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.login .person{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-card);padding:15px 10px;text-align:center;color:#fff}
.login .person:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25)}
.login .av{width:46px;height:46px;border-radius:99px;display:grid;place-items:center;
  margin:0 auto 8px;font-weight:800;color:#fff}
.login .person b{font-size:13px;display:block}
.login .person span{font-size:11px;color:var(--ink-400)}
.login .pins{display:flex;gap:10px;justify-content:center;margin:20px 0}
.login .pins i{width:13px;height:13px;border-radius:99px;border:1px solid rgba(255,255,255,.28)}
.login .pins i.f{background:var(--ember-500);border-color:var(--ember-500)}
.login .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:290px;margin:0 auto}
.login .keys button{height:62px;border-radius:var(--r-ctl);background:rgba(255,255,255,.06);
  color:#fff;font-size:23px;font-weight:600}
.login .keys button.q{background:none;color:var(--ink-400);font-size:14px}
.login .err{background:rgba(206,35,24,.16);color:#FF9C93;text-align:center;
  padding:8px;border-radius:var(--r-ctl);font-size:13px;font-weight:600;margin-bottom:12px}
.login .hint{color:var(--ink-500);font-size:11.5px;text-align:center;margin-top:16px;line-height:1.6}

/* ── Denegado ───────────────────────────────────────────────────────── */
.denied{max-width:460px;margin:70px auto;text-align:center;padding:0 20px}
.denied .ic{width:52px;height:52px;border-radius:99px;background:var(--late-soft);
  color:var(--late);display:grid;place-items:center;margin:0 auto 14px;font-size:24px}
.denied h2{font-size:19px;font-weight:800}
.denied p{color:var(--ink-600);margin-top:7px;font-size:13.5px}
.denied code{font-family:var(--num);font-size:12px;background:var(--ink-100);
  padding:2px 6px;border-radius:5px}

/* El editor de salones se usa con el dedo en tablet y con el ratón en escritorio:
   la misma lógica de puntero. touch-action:none evita que el navegador
   interprete el arrastre como desplazamiento de la página. */
[data-drag]{touch-action:none;user-select:none;-webkit-user-select:none}
[data-drag]:active{box-shadow:var(--sh-lift);z-index:5}

@media (max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .topbar{overflow-x:auto}
  .topbar .rname,.topbar .surfacetag,.topbar .urltag,.topbar .me{white-space:nowrap;flex:none}
  .nav{display:flex;gap:4px;overflow-x:auto;overflow-y:visible;border-right:0;
    border-bottom:1px solid var(--ink-200);padding:8px 10px;
    position:sticky;top:var(--topbar-h);height:auto;align-self:auto}
  .nav a{white-space:nowrap}
  .kds .cols{grid-template-columns:minmax(0,1fr)}
  .phone .fab{right:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ═══════════════════════════════════════════════════════════════════════
   SISTEMA DE COMPONENTES (Fase 9) — ui/components.js
   Un solo botón, una sola tarjeta, un solo estado vacío para las 4 superficies.
   ═══════════════════════════════════════════════════════════════════════ */
:root{ --tap:44px; }                 /* objetivo táctil mínimo */

/* Todo lo pulsable llega al mínimo táctil (móvil/tablet). */
.btn{min-height:var(--tap)}
.btn-sm{min-height:36px}
.btn-lg{min-height:52px}
.btn-full{width:100%}
.btn-grow{flex:1}
.btn-ok{background:var(--ok);color:#fff}
.btn-warn{background:var(--warn);color:#fff}
.btn:focus-visible{outline:3px solid var(--ember-400);outline-offset:2px}

/* Insignia de estado — reemplaza los .chip sueltos de cada superficie. */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:99px;background:var(--ink-100);color:var(--ink-600);
  line-height:1.4;white-space:nowrap}
.pill-dot{width:7px;height:7px;border-radius:99px;background:currentColor;flex:none}
.pill-ok{background:var(--ok-soft);color:var(--ok)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}
.pill-late{background:var(--late-soft);color:var(--late)}
.pill-info{background:var(--info-soft);color:var(--info)}
.pill-primary{background:var(--ember-50);color:var(--ember-700)}
.pill-quiet{background:var(--ink-100);color:var(--ink-600)}
.attn{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  margin-left:8px;border-radius:99px;background:var(--late);color:#fff;font-size:11px;font-weight:800;
  vertical-align:middle}

/* Tarjeta reutilizable. */
.card>.card-bd{padding:14px 16px}
.card>.card-bd.flush{padding:0}
.card>.card-ft{padding:12px 16px;border-top:1px solid var(--ink-200);display:flex;gap:10px;flex-wrap:wrap}
.card-warn{border-color:#F0DDB3;background:var(--warn-soft)}
.card-late{border-color:#F3C9C5;background:var(--late-soft)}
.card-ok{border-color:#BFE6D5;background:var(--ok-soft)}

/* Estado vacío CON SIGNIFICADO. */
.emptystate{padding:40px 22px;text-align:center;max-width:360px;margin:0 auto}
.emptystate-ic{font-size:30px;margin-bottom:8px;opacity:.55}
.emptystate-t{font-size:15px;font-weight:700;color:var(--ink-800)}
.emptystate-h{font-size:13px;color:var(--ink-500);margin-top:5px;line-height:1.5}
.emptystate-a{margin-top:16px}

/* Carga (esqueleto) + barra de ocupado. */
.loadingblock{padding:16px}
.skl{display:block;height:14px;border-radius:7px;margin:9px 0;
  background:linear-gradient(90deg,var(--ink-100) 25%,var(--ink-200) 37%,var(--ink-100) 63%);
  background-size:400% 100%;animation:skl 1.3s ease infinite}
.skl:nth-child(2){width:80%} .skl:nth-child(3){width:55%}
@keyframes skl{0%{background-position:100% 0}100%{background-position:0 0}}
#busybar{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:transparent;
  overflow:hidden}
#busybar.on{background:var(--ember-100)}
#busybar.on::after{content:'';position:absolute;inset:0;width:40%;background:var(--ember-600);
  animation:busy 1.1s ease-in-out infinite}
@keyframes busy{0%{left:-40%}100%{left:100%}}

/* Campos de formulario. */
.fieldrow{margin-bottom:14px}
.fieldhint{font-size:12px;color:var(--ink-500);margin-top:4px}
.fielderr{font-size:12px;color:var(--late);margin-top:4px;font-weight:600}
.fieldrow.has-error input,.has-error input{border-color:var(--late)}
.f .req,.req{color:var(--ember-700);font-weight:700}
/* input inválido (obligatorio vacío) — pista visual sutil */
input:required:invalid{border-color:var(--late,#c0392b)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ember-600);
  outline-offset:1px;border-color:var(--ember-500)}

/* Cabecera de pantalla — las 5 preguntas de un vistazo. */
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 16px;padding:16px 20px 4px}
.pagehead-t h1{font-size:19px;font-weight:800;letter-spacing:-.01em}
.pagehead-w{font-size:12.5px;color:var(--ink-500);margin-top:2px}
.pagehead-s{flex-basis:100%;order:3;font-size:13px;color:var(--ink-600)}
.pagehead-a{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* Divulgación progresiva. */
.disclosure{border:1px solid var(--ink-200);border-radius:var(--r-ctl);margin:10px 0;background:#fff}
.disclosure>summary{padding:11px 14px;font-weight:600;font-size:13.5px;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:8px;min-height:var(--tap)}
.disclosure>summary::before{content:'▸';color:var(--ink-400);transition:transform .12s}
.disclosure[open]>summary::before{transform:rotate(90deg)}
.disclosure-bd{padding:2px 14px 14px}

/* Aviso en línea (no flotante). */
.notice{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5;
  padding:10px 13px;border-radius:var(--r-ctl);margin:10px 0}
.notice-info{background:#EEF4FB;color:#1D4E82}
.notice-warn{background:var(--warn-soft);color:var(--warn)}
.notice-late{background:var(--late-soft);color:var(--late)}
.notice-ok{background:var(--ok-soft);color:var(--ok)}

#toast{display:flex;align-items:center;gap:14px}
#toast.working{background:var(--ink-700)}

/* Diálogo de confirmación (usa el .modal existente). */
.modal-sm{max-width:400px}
.modal[role=alertdialog] .bd p{font-size:13.5px;color:var(--ink-700);line-height:1.55}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:520px){
  .pagehead{padding:14px 16px 4px}
  .pagehead-a{margin-left:0;flex-basis:100%}
  .modal .ft{flex-direction:column-reverse}
  .modal .ft .btn{width:100%}
}

/* ─── Inventario (Cocina · Fase 2) ─────────────────────────────────────── */
.inv{max-width:840px}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:4px 0 12px}
.inv-head h1{font-size:20px;display:flex;align-items:center;gap:10px}
.inv-head .muted{font-size:12.5px;margin-top:4px}
.inv-tabs{border-radius:10px;overflow:hidden;border:1px solid var(--ink-200);margin-bottom:16px}
.inv-tabs button{flex-direction:column;gap:2px;padding:10px 8px}
.inv-tabs button span{font-size:11px;font-weight:500;color:var(--ink-400)}
/* Sub-cabecera del apartado de conteo de cierre (paso secundario). */
.inv-counthead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:10px}
.inv-counthead b{font-size:14px;display:flex;align-items:center;gap:8px}
.inv-counthead .muted{font-size:12px}
.inv-subtabs{border-style:dashed}
.inv-general td:last-child{white-space:nowrap}
.inv-body .card{margin-bottom:14px}
.inv-body .card h2{font-size:14px;margin-bottom:10px}
.inv-body table{width:100%;border-collapse:collapse}
.inv-body td,.inv-body th{padding:7px 6px;border-bottom:1px solid var(--ink-100);font-size:13.5px;text-align:left}
.inv-body th.num,.inv-body td.num{text-align:right}
.inv-addrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.inv-addrow select,.inv-addrow input{padding:8px 10px;border:1px solid var(--ink-300);border-radius:8px;font-size:13.5px;background:#fff}
.inv-addrow select{flex:1;min-width:160px}
.inv-addrow input[inputmode=decimal]{width:110px}
.inv-unit{font-size:12.5px;color:var(--ink-500);font-weight:600}
.inv-new summary{font-size:12.5px;color:var(--ink-600);cursor:pointer;margin-top:10px}
.inv-count{padding:12px 0;border-bottom:1px solid var(--ink-100);display:grid;
  grid-template-columns:1fr auto;grid-template-areas:'name name' 'in in' 'q out';gap:4px 12px}
.inv-count:last-child{border-bottom:0}
.inv-count.over{background:var(--warn-soft);border-radius:8px;padding:12px;margin:2px 0}
.inv-count-name{grid-area:name;font-weight:700;font-size:14px}
.inv-count-in{grid-area:in;font-size:12.5px;color:var(--ink-600)}
.inv-count-q{grid-area:q;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.inv-count-q input{width:96px;padding:8px 10px;border:1px solid var(--ink-300);border-radius:8px;font-size:14px;text-align:right}
.inv-count-out{grid-area:out;align-self:center;font-size:13px;color:var(--ink-700)}
.inv-count [data-warn]{grid-column:1/-1;margin-top:6px}
.inv-actions{margin-top:6px}
.inv-actions .muted{font-size:12px;margin-top:8px}
.inv-summary tr.over td{background:var(--warn-soft)}
.inv-summary tr.low-stock td{background:var(--warn-soft)}
.inv-history{list-style:none;padding:0;margin:0;font-size:13px}
.inv-history li{padding:5px 0;border-bottom:1px solid var(--ink-100);color:var(--ink-600)}

/* Inventario · Gerencia (Fase 3) */
.inv-g .kpi-h{font-size:11px;color:var(--ink-400);margin-top:2px}
.inv-g .card{margin-bottom:14px}
.inv-g .card h2{font-size:14px;margin-bottom:8px}
.inv-summary tr.flagged td:first-child{font-weight:600}
.inv-flag{color:var(--warn);font-size:11px;vertical-align:middle}
.inv-filters{align-items:flex-end;gap:12px}
.inv-filters label{display:flex;flex-direction:column;font-size:12px;color:var(--ink-500);gap:3px}
.inv-filters input[type=date]{padding:7px 9px;border:1px solid var(--ink-300);border-radius:8px;font-size:13px}
.inv-hist-row{border-bottom:1px solid var(--ink-100)}
.inv-hist-hd{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:10px 2px;
  text-align:left;font-size:13.5px;cursor:pointer;color:var(--ink-800)}
.inv-hist-hd .muted{flex:1;font-size:12px}
.inv-hist-detail{margin:0 0 12px;background:var(--ink-50)}

/* Inventario · Recetas (Fase 4) */
.rec-modes{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px}
.rec-toggle{display:flex;gap:10px;align-items:flex-start;font-size:13px;cursor:pointer;flex:1;min-width:260px}
.rec-toggle.is-disabled{opacity:.6;cursor:default}
.rec-toggle input{margin-top:3px}
.rec-list{padding:0}
.rec-row{border-bottom:1px solid var(--ink-100)}
.rec-row:last-child{border-bottom:0}
.rec-hd{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:11px 14px;
  text-align:left;font-size:14px;cursor:pointer;color:var(--ink-800)}
.rec-caret{margin-left:auto;color:var(--ink-400)}
.rec-editor{padding:4px 14px 16px;background:var(--ink-50)}
.rec-lines input[type=text]{width:90px;padding:6px 8px;border:1px solid var(--ink-300);border-radius:7px;text-align:right}
.rec-lines select{padding:6px 8px;border:1px solid var(--ink-300);border-radius:7px}
.rec-badsupply td{background:var(--warn-soft)}
.rec-add{margin-top:8px}
.rec-foot{display:flex;align-items:center;gap:12px;margin-top:12px}

/* Proveedores */
.supp-archived{opacity:.6}
.supp-list{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:6px}
.supp-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.chk{display:inline-flex;align-items:center;gap:5px;font-size:13px;cursor:pointer}
.supp-directory{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.supp-dir-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding:12px 4px;border-bottom:1px solid var(--ink-100);font-size:13.5px}

/* ── Landing (raíz del dominio sin QR de mesa) ──────────────────────────── */
html{scroll-behavior:smooth}
.landing{background:var(--brand-surface-light,var(--ink-50));color:var(--ink-900);font-family:var(--serif,inherit)}
.landing-in{max-width:920px;margin:0 auto;padding:0 20px}
.landing-hero{position:relative;padding:72px 20px 56px;text-align:center;overflow:hidden;color:#fff}
.landing-hero-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 140% at 50% -10%,var(--ember-500) 0%,var(--ember-700) 46%,var(--ink-900) 100%)}
.landing-hero-in{position:relative;z-index:1;max-width:640px;margin:0 auto}
.landing-logo{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto 18px;
  border-radius:20px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-weight:800;font-size:30px;backdrop-filter:blur(2px)}
.landing-hero h1{font-size:clamp(26px,4vw,38px);font-weight:800;margin:0 0 8px;letter-spacing:-.01em;font-family:var(--sans,inherit)}
.landing-tag{font-size:15.5px;opacity:.92;margin:0 0 26px}
.landing-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.landing-cta .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4)}
.landing-cta .btn-ghost:hover{background:rgba(255,255,255,.2)}
.landing-sec{padding:48px 20px}
.landing-sec h2{font-size:22px;font-weight:800;margin:0 0 14px;color:var(--ink-900);font-family:var(--sans,inherit)}
.landing-sec p{font-size:15px;line-height:1.7;color:var(--brand-muted-light,var(--ink-700));max-width:760px}
.landing-photos{background:var(--ink-100)}
.landing-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.landing-photo{aspect-ratio:4/3;border-radius:var(--r-card);display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:14px;box-shadow:var(--sh-card)}
.landing-photo-a{background:linear-gradient(135deg,#2F6B4F,#123B2A)}
.landing-photo-b{background:linear-gradient(135deg,var(--ember-600),var(--ember-700))}
.landing-photo-c{background:linear-gradient(135deg,#B7950B,#7A5B06)}
.landing-dishes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:6px}
.landing-dish{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-card);padding:16px;box-shadow:var(--sh-card)}
.landing-dish b{font-size:15px}
.landing-dish p{font-size:13px;color:var(--ink-600);margin-top:6px;line-height:1.5}
.landing-foot{background:var(--ink-900);color:var(--ink-100);padding:32px 20px;text-align:center}
/* ── Secciones opcionales de la landing (core/landing/landing.js) ─────
   Se pintan solo si el restaurante las escribió en su strings.json. Ninguna
   aparece para quien no las pidió, así que añadir una aquí no cambia la
   portada de nadie. */
/* Banda a sangre: rompe el ritmo UNA vez. No alterna por posición —eso le
   cambiaría el fondo a cualquier restaurante que añada una sección— sino que
   la pide la sección concreta que la quiere. */
.landing-band{background:var(--brand-surface-dark,var(--ink-900));color:#fff}
.landing-band h2{color:#fff}
.landing-band p{color:var(--brand-muted-dark,var(--ink-200))}
.landing-spaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:6px}
.landing-space{border:1px solid var(--ink-200);border-radius:var(--r-card);padding:16px;background:#fff}
.landing-space b{display:block;font-size:15px;font-family:var(--sans,inherit)}
.landing-cap{display:inline-block;margin-top:4px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand-muted-light,var(--ink-600))}
.landing-space p{font-size:13px;margin-top:6px}
.landing-reviews{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.landing-visit{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:6px}
.landing-address{font-size:16px;font-weight:600}
.landing-notes{margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.8;
  color:var(--brand-muted-light,var(--ink-700))}
.landing-hours{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 12px;font-size:14px}
.landing-hours dt{font-weight:600}
.landing-hours dd{margin:0;color:var(--brand-muted-light,var(--ink-700))}
.landing-social{display:flex;gap:14px;justify-content:center;margin:12px 0}
.landing-social a{color:var(--brand-muted-dark,var(--ink-100));text-decoration:underline}
@media(max-width:720px){.landing-visit{grid-template-columns:1fr}}

/* ── Borde escalonado del hero (`heroEdge: "steps"` en theme.json) ────────
   El ÚNICO gesto estructural de la página, y aparece una sola vez: el hero no
   termina en línea recta sino en un perfil de escalones, y por ellos asoma la
   sección siguiente. Es un `clip-path` estático — nada que animar, nada que
   desactivar con `prefers-reduced-motion`— y si el navegador no lo soporta
   queda un borde recto y no se pierde nada.

   La FORMA vive aquí porque es diseño; la ELECCIÓN vive en el theme.json del
   restaurante, que es dato. */
[data-hero-edge="steps"] .landing-hero{
  clip-path:polygon(0 0,100% 0,100% 72%,86% 72%,86% 82%,68% 82%,68% 92%,32% 92%,32% 82%,14% 82%,14% 72%,0 72%);
  padding-bottom:104px}
@media(max-width:720px){[data-hero-edge="steps"] .landing-hero{
  clip-path:polygon(0 0,100% 0,100% 84%,82% 84%,82% 90%,62% 90%,62% 96%,38% 96%,38% 90%,18% 90%,18% 84%,0 84%);
  padding-bottom:84px}}
.landing-foot p{margin:0 0 14px;font-size:14px}
.landing-foot .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}
@media (max-width:640px){.landing-gallery{grid-template-columns:1fr 1fr}.landing-gallery .landing-photo:last-child{grid-column:1/-1}}
.supp-dir-row:last-child{border-bottom:0}

/* ═══════════════════════════════════════════════════════════════════════
   SALÓN Y CAJA — panorama plegable, buscador del menú, editor de espacio
   y detalle del arqueo. Todo pensado para que la misma pantalla sirva en la
   tablet del salón y en el teléfono del salonero.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Panorama operativo plegable ──────────────────────────────────────── */
.awbar{border-bottom:1px solid var(--ink-200);background:#fff}
.awbar .awstrip{border-bottom:0}
.awbar .awfoot{display:flex;justify-content:center;padding:2px 0 5px}
.awtoggle{border:0;background:none;font:inherit;font-size:12px;font-weight:700;
  color:var(--ink-500);cursor:pointer;padding:5px 12px;border-radius:99px;min-height:32px}
.awtoggle:hover{background:var(--ink-100);color:var(--ink-700)}
.awtoggle:focus-visible{outline:2px solid var(--ember-400);outline-offset:1px}
/* Plegado: una sola línea con lo que obliga a moverse. */
.awbar-mini{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 14px;font-size:12.5px}
.awmini{display:inline-flex;align-items:center;gap:4px;color:var(--ink-600);white-space:nowrap}
.awmini b{font-size:15px;font-weight:800}
.awmini.late b{color:var(--late)} .awmini.warn b{color:var(--warn)} .awmini.ok b{color:var(--ok)}
.awmini-link{display:inline-flex;gap:10px;text-decoration:none}

/* ── Buscador rápido del menú al tomar el pedido ──────────────────────── */
.salonsearch{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.salonsearch input{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--ink-200);
  border-radius:99px;font:inherit;font-size:14px;background:#fff}
.salonsearch input:focus-visible{outline:2px solid var(--ember-500);outline-offset:1px}

/* ── Editor del espacio de salón ──────────────────────────────────────── */
/* Lienzo con zoom: `.floor` es la ventana que hace scroll, `.floor-scale` mide
   ya multiplicado por el zoom (para que la barra de scroll sea la correcta) y
   `.floor-canvas` es el plano real, escalado con transform. */
/* La cuadrícula de fondo se pinta sobre el lienzo (no sobre la ventana que
   hace scroll): así se desplaza y se escala CON la distribución, en vez de
   quedarse quieta detrás mientras las mesas se mueven. */
.espacio .floor{max-height:min(68vh,720px);overscroll-behavior:contain;background-image:none}
.floor-scale{position:relative}
.floor-canvas{position:relative;transform-origin:top left;
  background-image:radial-gradient(var(--ink-200) 1px,transparent 1px);background-size:22px 22px}
.espacio-areas{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding-bottom:2px;
  scrollbar-width:thin}
.espacio-areas .btn{flex:none}
.espacio-hint{font-size:12.5px}
.espacio-takeaway{background:var(--ink-50)}
.tbl .tbl-del{position:absolute;top:3px;left:3px;font-size:12px;line-height:1}

/* ── Detalle del arqueo (gaveta vs electrónico) ───────────────────────── */
.arqueo-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;
  margin-top:10px}
.arqueo-block{border:1px solid var(--ink-200);border-radius:var(--r-card);overflow:hidden;
  background:#fff}
.arqueo-block h3{font-size:13px;font-weight:800;padding:9px 13px 0}
.arqueo-block>p.muted{font-size:11.5px;padding:2px 13px 0;margin:0}
.arqueo-block table{margin-top:6px}
.arqueo-block td{font-size:13px}

/* ── Botones de efectivo rápido del cobro ─────────────────────────────── */
.quickcash{gap:6px;margin:0 0 8px}

@media (max-width:820px){
  /* El editor con el dedo: controles a lo ancho y lienzo más alto que ancho. */
  .espacio-bar{gap:6px}
  .espacio-hint{flex-basis:100%;order:9}
  .espacio .floor{max-height:min(58vh,560px)}
  .floor-zoom{bottom:10px;right:10px;padding:4px}
  .awbar-mini{padding:7px 12px;gap:8px}
}
@media (max-width:520px){
  .espacio.pad{padding-left:12px;padding-right:12px}
  .espacio-bar .btn{flex:1 1 auto}
  .espacio-areas{flex-basis:100%;order:-1}
  .floor-zoom .btn{min-height:32px}
  .arqueo-split{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════
   GERENCIA — CTA de estado vacío, tendencias, orden de la carta, semáforo
   de márgenes, alertas de stock, simulador de precio y vista previa de marca.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CTA del estado vacío: grande, verde y centrado ───────────────────── */
.emptystate-a{margin-top:18px;display:flex;justify-content:center}
.btn-cta{min-height:52px;padding:0 26px;font-size:15px;font-weight:800;
  border-radius:999px;box-shadow:0 2px 10px rgba(18,138,92,.28);gap:8px}
.btn-cta:hover{filter:brightness(1.06)}
.btn-cta:active{transform:translateY(1px)}
td>.emptystate{max-width:420px}

/* ── Mini-tendencia de fondo en las tarjetas de KPI ───────────────────── */
.kpi-spark{position:relative;overflow:hidden}
.spark{position:absolute;inset:auto 0 0 0;height:46%;display:flex;align-items:flex-end;
  gap:2px;padding:0 6px;opacity:.16;pointer-events:none}
.sparkbar{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:var(--ember-600)}
.sparkbar.is-last{background:var(--ink-900);opacity:.7}
.kpi-spark>*:not(.spark){position:relative}
.trend{font-weight:700;white-space:nowrap}
.trend.ok{color:var(--ok)} .trend.late{color:var(--late)}

/* ── Arrastrar para ordenar la carta ──────────────────────────────────── */
.sorthint{font-size:12px;color:var(--ink-500);margin-top:4px}
/* En una cabecera en fila (la de cada categoría del menú) la pista se va a su
   propio renglón, para no apretar el selector de estación. */
header.row .sorthint{flex-basis:100%;margin-top:6px}
.sortable .grip{width:26px;color:var(--ink-400);cursor:grab;text-align:center;
  font-size:15px;line-height:1;user-select:none}
.sortrow{transition:background .12s}
.sortrow.dragging{opacity:.45}
.sortrow.dropbefore>td{box-shadow:inset 0 3px 0 0 var(--ember-600)}
.sortrow.dropafter>td{box-shadow:inset 0 -3px 0 0 var(--ember-600)}

/* ── Semáforo de márgenes en el ranking de rentabilidad ───────────────── */
.margin-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:12px;color:var(--ink-500)}
.margin-dot{display:inline-block;width:9px;height:9px;border-radius:99px;margin-right:6px;vertical-align:middle}
.margin-dot.margin-late{background:var(--late)}
.margin-dot.margin-warn{background:var(--warn)}
.margin-dot.margin-ok{background:var(--ok)}
.margin-flag{display:inline-block;width:4px;height:15px;border-radius:2px;margin-right:9px;
  vertical-align:-3px;background:transparent}
tr.margin-late .margin-flag{background:var(--late)}
tr.margin-warn .margin-flag{background:var(--warn)}
tr.margin-ok .margin-flag{background:var(--ok)}
tr.margin-late{background:color-mix(in srgb,var(--late-soft) 55%,transparent)}
tr.margin-ok{background:color-mix(in srgb,var(--ok-soft) 45%,transparent)}
tr.margin-ok .chip.ok{font-weight:800}

/* ── Alerta de insumos por agotarse ───────────────────────────────────── */
.stockalert{padding:13px 16px}
.stockalert-hd{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.stockalert-ic{font-size:17px;line-height:1;animation:kpulse 2s ease-in-out infinite}
.stockalert-list{list-style:none;margin:10px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 16px}
.stockalert-list li{font-size:12.5px;display:flex;align-items:center;gap:7px}
.stockalert-dot{display:inline-block;width:8px;height:8px;border-radius:99px;
  background:var(--warn);flex:none}
.stockalert-dot.is-out{background:var(--late)}
tr.low-stock td{background:color-mix(in srgb,var(--warn-soft) 40%,transparent)}

/* ── Inventario: más aire dentro de los cuadros ───────────────────────── */
.inv-body .card,.inv-g .card{padding:16px 18px}
.inv-body td,.inv-body th,.inv-g .inv-summary td,.inv-g .inv-summary th{padding:11px 10px}
.inv-g .card h2{margin-bottom:12px}
.inv-g .card>p.muted{margin-bottom:12px;line-height:1.55}
.inv-g .inv-addrow{gap:10px;margin-top:14px}
.inv-g .kpi{padding:15px 17px}

/* ── Simulador de precio (Ingredientes por plato) ─────────────────────── */
.rec-sim{border:1px solid var(--ink-200);border-radius:var(--r-card);padding:13px 15px;
  margin-bottom:14px;background:var(--ink-50)}
.rec-sim.is-empty{background:#fff}
.rec-sim.is-empty p{font-size:12.5px;margin-top:4px}
.rec-sim-hd{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.rec-sim-hd .muted{font-size:12px}
.rec-sim-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.rec-sim-cell{background:#fff;border:1px solid var(--ink-200);border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;gap:3px}
.rec-sim-cell.is-suggest{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok-soft)}
.rec-sim-l{font-size:11.5px;color:var(--ink-500);line-height:1.35}
.rec-sim-cell b{font-size:17px}
.rec-sim-cell .chip{align-self:flex-start;font-size:14px}
.rec-sim-delta{font-size:11.5px}
.rec-sim-foot{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--ink-200)}
.rec-sim-foot .muted{font-size:12px}

/* ── PIN oculto + ojo (Usuarios) ──────────────────────────────────────── */
.pincell{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.pincell b{letter-spacing:.14em}
.pineye{border:0;background:none;cursor:pointer;font-size:14px;line-height:1;padding:4px;
  border-radius:7px;min-width:28px;min-height:28px}
.pineye:hover{background:var(--ink-100)}
.pineye:focus-visible{outline:2px solid var(--ember-400);outline-offset:1px}
tr.user-off{opacity:.62}
tr.user-off b{text-decoration:line-through}

/* ── Buscador universal de la bitácora ────────────────────────────────── */
.auditsearch{display:flex;gap:8px;align-items:center;margin-bottom:11px}
.auditsearch input{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--ink-200);
  border-radius:99px;font:inherit;font-size:14px;background:#fff}
.auditsearch input:focus-visible{outline:2px solid var(--ember-500);outline-offset:1px}
.auditsearch-n{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Extras del platillo: constructor por pasos ───────────────────────── */
.pfx-group{border:1px solid var(--ink-200);border-radius:12px;margin-bottom:10px;overflow:hidden}
.pfx-group-hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;
  background:var(--ink-50);border-bottom:1px solid var(--ink-200)}
.pfx-group-ic{font-size:15px;line-height:1}
.pfx-opts{list-style:none;margin:0;padding:6px 12px}
.pfx-opts li{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--ink-100);font-size:13.5px}
.pfx-opts li:last-child{border-bottom:0}
.pfx-opt-n{flex:1}
.pfx-opt-p{font-size:12.5px;color:var(--ink-500)}
.pfx-emptyopts{margin:0;padding:10px 12px;font-size:12.5px;color:var(--warn);
  background:var(--warn-soft)}
.pfx-addopt{display:flex;gap:7px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--ink-100)}
.pfx-addopt input{flex:1;min-width:120px}
.pfx-new{border:1px dashed var(--ink-300);border-radius:12px;padding:14px;background:#fff}
.pfx-step{display:flex;gap:11px;margin-bottom:14px}
.pfx-step:last-of-type{margin-bottom:10px}
.pfx-stepn{flex:none;width:23px;height:23px;border-radius:99px;background:var(--ember-600);
  color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.pfx-step-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pfx-step-b .muted{font-size:12px}
.pfx-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:8px;margin-top:4px}
.pfx-kind{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 11px;
  border:1px solid var(--ink-200);border-radius:11px;background:#fff;cursor:pointer;font:inherit}
.pfx-kind:hover{border-color:var(--ember-400)}
.pfx-kind.on{border-color:var(--ember-600);box-shadow:0 0 0 2px var(--ember-100,var(--ember-50))}
.pfx-kind-ic{font-size:18px;line-height:1}
.pfx-kind b{font-size:13px}
.pfx-kind-w{font-size:11.5px;color:var(--ink-600);line-height:1.4}
.pfx-kind-ex{font-size:11px;color:var(--ink-400);font-style:italic;line-height:1.4}
.pfx-new-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:11px;
  border-top:1px solid var(--ink-100)}
.pfx-new-foot .muted{font-size:12px}

/* ── Orden de compra (WhatsApp) ───────────────────────────────────────── */
.po-lines{list-style:none;margin:12px 0 0;padding:0}
.po-lines li{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;padding:6px 0;
  border-bottom:1px solid var(--ink-100);font-size:13.5px}
.po-lines .muted{font-size:12px}
.po-text{white-space:pre-wrap;font:inherit;font-size:13px;line-height:1.55;margin:4px 0 0;
  padding:12px 14px;background:var(--ink-50);border:1px solid var(--ink-200);border-radius:10px;
  max-height:220px;overflow:auto}

/* ── Live preview de la marca (Configuración) ─────────────────────────── */
.brandpv-wrap{padding:14px 16px 4px}
.brandpv{display:flex;flex-direction:column;align-items:center;gap:8px}
.brandpv-phone{width:216px;border:8px solid var(--ink-900);border-radius:26px;overflow:hidden;
  background:#fff;box-shadow:var(--sh-lift)}
.brandpv-notch{height:15px;background:var(--ink-900);border-radius:0 0 11px 11px;width:78px;margin:0 auto}
.brandpv-hd{display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--pv-primary);color:#fff}
.brandpv-logo{width:23px;height:23px;border-radius:7px;background:rgba(255,255,255,.22);
  display:grid;place-items:center;font-weight:800;font-size:12px}
.brandpv-name{font-weight:700;font-size:12.5px}
.brandpv-body{padding:10px 12px 13px}
.brandpv-cats{display:flex;gap:5px;margin-bottom:9px}
.brandpv-cats span{font-size:9.5px;padding:3px 8px;border-radius:99px;background:var(--ink-100);
  color:var(--ink-600)}
.brandpv-cats span.on{background:var(--pv-primary);color:#fff}
.brandpv-dish{display:flex;gap:8px;align-items:center;border:1px solid var(--ink-200);
  border-radius:10px;padding:7px;margin-bottom:8px}
.brandpv-media{width:42px;height:42px;border-radius:7px;display:grid;place-items:center;
  font-size:19px;background:var(--ink-100);flex:none}
.brandpv-dish-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.brandpv-dish-b b{font-size:11px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brandpv-price{font-size:12px;font-weight:800;color:var(--pv-secondary)}
.brandpv-chiprow{display:flex;gap:5px;margin-bottom:9px}
.brandpv-chip{font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;
  background:var(--pv-accent);color:#fff}
.brandpv-chip.alt{background:var(--pv-secondary)}
.brandpv-cta{text-align:center;font-size:11.5px;font-weight:800;color:#fff;padding:9px;
  border-radius:9px;background:var(--pv-primary)}
.brandpv-cap{font-size:11.5px;text-align:center;max-width:230px;line-height:1.45}

/* ── Hoja imprimible de QR ────────────────────────────────────────────── */
.qrsheet{display:none}
@media print{
  body{background:#fff}
  .topbar,.nav,.pagehead-a,.awbar,#modal-root,#toast,#waiter-overlay{display:none!important}
  .shell{display:block}
  .main>.pad>*:not(.qrsheet){display:none!important}
  .qrsheet{display:grid!important;grid-template-columns:repeat(2,1fr);gap:10mm;padding:8mm}
  .qrsheet-card{border:1px dashed #999;border-radius:4mm;padding:8mm 6mm;text-align:center;
    break-inside:avoid;page-break-inside:avoid}
  .qrsheet-brand{font-size:10pt;font-weight:700;letter-spacing:.04em}
  .qrsheet-code{font-size:34pt;font-weight:800;line-height:1.1;margin:2mm 0}
  .qrsheet-area{font-size:9pt;color:#555}
  .qrsheet-hint{font-size:9pt;margin-top:4mm}
  .qrsheet-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:7.5pt;
    word-break:break-all;margin-top:3mm;color:#333}
}

/* ════════════════════════════════════════════════════════════════════════
   AGENTE DE RESERVAS (Fase 6) — bandeja, configuración y consumo

   La BANDEJA la usa el operario de pie, en recepción y casi siempre desde un
   celular. Por eso el orden es al revés de lo habitual: la base es UNA columna
   (lista, y al abrir un hilo la lista se oculta y aparece el botón de volver)
   y los dos paneles llegan solo a partir de 900 px.

   Sin colores nuevos: todo sale de los tokens de :root.
   ──────────────────────────────────────────────────────────────────────── */

.agente-inbox{display:grid;grid-template-columns:1fr;gap:14px}
/* En celular, abrir un hilo OCULTA la lista: dos paneles en 380 px no se
   usan, se sufren. El botón «Volver» del hilo es el camino de vuelta. */
.agente-inbox--open .agente-aside{display:none}
.agente-inbox .agente-main{display:none}
.agente-inbox--open .agente-main{display:block}

@media (min-width:900px){
  .agente-inbox{grid-template-columns:minmax(260px,340px) 1fr;align-items:start}
  .agente-inbox .agente-aside,
  .agente-inbox--open .agente-aside{display:block}
  .agente-inbox .agente-main{display:block}
  .agente-thread-head .btn[data-act="agente:back"]{display:none}
}

.agente-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}

.agente-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.agente-row{display:flex;gap:10px;width:100%;text-align:left;padding:12px;
  background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-card);
  box-shadow:var(--sh-card)}
.agente-row:hover{border-color:var(--ink-300)}
.agente-row.on{border-color:var(--ember-400);background:var(--ember-50)}
.agente-row-icon{font-size:20px;line-height:1.2;flex:0 0 auto}
.agente-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.agente-row-title{display:flex;align-items:center;gap:8px;font-weight:600;
  color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agente-row-sub{font-size:12px;color:var(--ink-500)}
.agente-row-sum{font-size:12px;color:var(--ink-600);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.agente-thread{display:flex;flex-direction:column;gap:10px;background:#fff;
  border:1px solid var(--ink-200);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:12px}
.agente-thread-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-bottom:10px;border-bottom:1px solid var(--ink-200)}
.agente-thread-head>div:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.agente-thread-head .muted{font-size:12px}
.agente-thread-actions{display:flex;gap:6px;flex-wrap:wrap}

.agente-msgs{display:flex;flex-direction:column;gap:8px;max-height:56vh;
  overflow-y:auto;padding:4px 2px}
.agente-msg{display:flex;flex-direction:column;gap:2px;max-width:86%;
  padding:8px 10px;border-radius:var(--r-ctl);font-size:14px}
/* Cuatro voces, cuatro tratamientos. El operario tiene que saber de un vistazo
   quién dijo qué antes de que llegara él. */
.agente-msg--customer{align-self:flex-start;background:var(--ink-100);
  border:1px solid var(--ink-200)}
.agente-msg--agent{align-self:flex-end;background:var(--ember-50);
  border:1px solid var(--ember-200)}
.agente-msg--operator{align-self:flex-end;background:var(--info-soft);
  border:1px solid var(--info)}
/* El sistema no es una burbuja: es una anotación entre mensajes. */
.agente-msg--system{align-self:center;max-width:100%;background:none;
  padding:2px 0;text-align:center}
.agente-sys{font-size:12px;color:var(--ink-500);font-style:italic}
.agente-who{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;color:var(--ink-500)}
.agente-text{white-space:pre-wrap;word-break:break-word}
.agente-at{font-size:11px;color:var(--ink-400);align-self:flex-end}

.agente-composer{display:flex;gap:8px;align-items:flex-end;
  padding-top:10px;border-top:1px solid var(--ink-200)}
.agente-composer textarea{flex:1;resize:vertical;min-height:44px;padding:10px;
  border:1px solid var(--ink-300);border-radius:var(--r-ctl);background:#fff}
.agente-composer textarea:focus{outline:2px solid var(--ember-300);outline-offset:1px}

.agente-config{display:flex;flex-direction:column;gap:12px}
.agente-config .chips{display:flex;gap:6px;flex-wrap:wrap}
.agente-config textarea{width:100%;resize:vertical;padding:10px;
  border:1px solid var(--ink-300);border-radius:var(--r-ctl);background:#fff}

.agente-usage{display:flex;flex-direction:column;gap:12px}
.agente-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:760px){ .agente-stats{grid-template-columns:repeat(4,1fr)} }
.agente-stat{background:#fff;border:1px solid var(--ink-200);
  border-radius:var(--r-card);box-shadow:var(--sh-card);padding:12px;
  display:flex;flex-direction:column;gap:2px}
.agente-stat-v{font-family:var(--num);font-size:22px;font-weight:600;color:var(--ink-900)}
.agente-stat-l{font-size:12px;color:var(--ink-600)}
.agente-stat-h{font-size:11px;color:var(--ink-400)}

/* La factura estimada: mismo tratamiento que una tabla de cierre de caja. */
.agente-invoice td.num,.agente-usage td.num{font-family:var(--num);text-align:right}
.agente-invoice tr.total td{font-weight:700;border-top:2px solid var(--ink-300)}
.agente-invoice tr.over td{color:var(--warn)}