/* FANZINE POS v2 — biblioteca de interfaz.
   Rojo Pantone 185 C y negro PRESENTA Pantone Black 6 C.
   Nombres de tokens heredados conservados por compatibilidad con las vistas. */

/* ============ 1. Tokens ============ */
:root {
  /* Superficies */
  --bg: #F4F5F6;            /* fondo de la app */
  --bg-2: #E6E8EA;          /* hundido: panel del pedido, contenedores */
  --surface: #FAFBFC;       /* tarjetas */
  --surface-hi: #FFFFFF;    /* controles elevados, pestaña activa */
  --line: #D8DCDF;
  --line-2: #899198;
  --dots: #899198;          /* separador punteado */

  /* Tinta */
  --ink: #101820;
  --ink-2: #46515B;
  --ink-3: #525D67;
  --ink-4: #5D6872;

  /* Marca: rojo FANZINE y fondos rojos suaves */
  --coral: #E4002B;
  --coral-strong: #C50025;
  --coral-ink: #B00021;     /* texto sobre fondo rojo suave */
  --peach: #FFD6DE;         /* mesa ocupada, sillas activas */
  --peach-2: #FFE6EB;       /* pastillas de modificador */
  --peach-3: #FFF2F5;

  /* Estado */
  --green: #B00021;         /* interruptores, estado parcial */
  --green-soft: #FFE6EB;
  --live: #E4002B;          /* punto «abierto» */
  --warn: #B00021;
  --warn-soft: #FFE6EB;
  --amber: #46515B;
  --amber-soft: #E6E8EA;
  --dark: #101820;

  /* Colores de categoría */
  --c-ochre: #46515B;
  --c-plum: #101820;
  --c-navy: #34424F;
  --c-slate: #46515B;
  --c-sage: #56636F;
  --c-char: #101820;
  --c-coral: #E4002B;
  --c-blue: #34424F;

  /* Forma */
  --r-xs: 6px; --r-sm: 9px; --r: 12px; --r-lg: 16px; --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(16, 24, 32, .05), 0 0 0 1px rgba(16, 24, 32, .025);
  --sh-2: 0 2px 10px rgba(16, 24, 32, .06), 0 0 0 1px rgba(16, 24, 32, .025);
  --sh-pop: 0 16px 48px rgba(16, 24, 32, .16), 0 0 0 1px rgba(16, 24, 32, .03);
  --tap: 48px;
  --top-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
}

/* ============ 2. Base ============ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.45 var(--font); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; }
input, select, textarea {
  width: 100%; min-height: var(--tap); padding: 11px 14px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--surface-hi); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--peach-3); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.right { margin-left: auto; }
.hidden { display: none !important; }
.dotted { border: 0; border-top: 1.5px dashed var(--dots); margin: 0; }

/* ============ 3. Estructura: barra superior, sin barra lateral ============ */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--top-h); background: var(--bg);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 450; font-size: 16px; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.brand-logo {
  min-width: 68px; padding: 0 8px; height: 32px; border-radius: 9px; background: var(--coral); color: #fff; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.brand-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.status-pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 12px;
  background: var(--bg-2); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.status-pill i { width: 7px; height: 7px; border-radius: 4px; background: var(--live); }
.status-pill.off i { background: var(--ink-4); }
.status-pill.off { color: var(--ink-2); }

.navtabs { display: flex; align-items: center; gap: 4px; flex: none; margin: 0 auto; }
.navtab {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: var(--r);
  color: var(--ink-2); font-size: 15.5px; font-weight: 450; text-decoration: none; white-space: nowrap;
}
.navtab svg { color: var(--ink-3); }
.navtab:hover { color: var(--ink); }
.navtab.on { background: var(--surface-hi); color: var(--ink); box-shadow: var(--sh-1); }
.navtab.on svg { color: var(--ink-2); }
.badge-dot {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--coral); color: #fff; font-size: 12px; font-weight: 600; line-height: 1;
}
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: none; }
.top-actions > * { flex: none; }
.cash-link { flex: none; white-space: nowrap; }
.session-exit { flex: none; min-height: 44px; white-space: nowrap; }
.order-session-exit { display: none; }
@media (max-width: 899px) { .order-session-exit { display: inline-flex; } }
/* Tablet horizontal (900–1279): con contadores de dos cifras no caben el nombre del local ni la
   etiqueta de «Mis pedidos» (queda icono + contador, como en el teléfono); Caja y Salir conservan
   su nombre. Entre 900 y 999 se aprietan además los márgenes. */
@media (min-width: 900px) and (max-width: 1279px) {
  .brand-name { display: none; }
  .top-pill { padding: 0 10px; }
  .top-pill .lbl { display: none; }
}
@media (min-width: 900px) and (max-width: 999px) { .topbar { padding: 0 12px; gap: 8px; } .navtab { padding: 0 10px; } }
/* Teléfono: queda el texto «FANZINE»; el nombre completo se lee en el menú del perfil y en el aviso de entorno. */
@media (max-width: 599px) { .brand-name { display: none; } }
@media (max-width: 360px) { .cash-link-label { display: none; } .navtab { gap: 4px; padding: 0 5px; font-size: 14px; } }
/* «Caja de turno» (INT-01, 17/10) no cabe completo en el teléfono: como «Mis pedidos» y el estado de
   caja, queda el ícono; el nombre sigue en aria-label y title. */
@media (max-width: 430px) { .cash-link-label { display: none; } }
.cash-header { flex-wrap: wrap; }
.cash-close-go, .cash-hand-go { flex: none; }
.cash-open-warn { border: 1px solid var(--warn); margin-bottom: 12px; }
.cash-open-warn .list { margin: 8px 0; }
.cash-close-inputs, .cash-close-report { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cash-close-method { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.cash-close-method .kv { gap: 8px; }
.cash-close-method input { font-size: 22px; }
.cash-close-lead { margin-top: 0; }
.cash-close-history { padding: 8px 0 16px; }
.cash-close-history summary { cursor: pointer; margin-bottom: 12px; }
@media (max-width: 599px) {
  .cash-close-inputs, .cash-close-report { grid-template-columns: minmax(0, 1fr); }
  .cash-header .grow { flex-basis: 100%; }
  .cash-close-go, .cash-hand-go { flex: 1; }
  .cash-link { padding: 0 10px; }
}
.top-icon {
  position: relative; width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; color: var(--ink-2);
}
.top-icon:hover { background: var(--bg-2); }
.top-icon .dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 4px; background: var(--coral); box-shadow: 0 0 0 2px var(--bg); }
.top-icon .dot.ok { background: var(--live); }
.top-icon .dot.off { background: var(--ink-4); }
.user-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 6px; border-radius: 22px; font-weight: 450;
  min-width: 44px; white-space: nowrap; flex: none;
}
.user-chip .name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.user-chip:hover { background: var(--bg-2); }
.user-chip .avatar { position: relative; }
.user-chip .status { position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border-radius: 6px; background: var(--amber); box-shadow: 0 0 0 2px var(--bg); }
.user-chip .status.ok { background: var(--live, var(--green)); }
.user-chip .status.off { background: var(--ink-4); }
.user-chip .chev { color: var(--ink-3); }
.avatar {
  width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; font-weight: 600; font-size: 12px;
  background: var(--peach); color: var(--coral-ink); flex: 0 0 auto;
}
.avatar.lg { width: 52px; height: 52px; border-radius: 26px; font-size: 17px; }
.avatar.sm { width: 24px; height: 24px; border-radius: 12px; font-size: 10px; }
.avatar.ring { box-shadow: 0 0 0 2px var(--surface-hi); }

/* Subencabezado de cada pantalla (título + acciones), bajo la barra superior */
.top {
  position: sticky; top: var(--top-h); z-index: 20; background: var(--bg);
  display: flex; align-items: center; gap: 10px; padding: 8px 20px; min-height: 60px;
  border-bottom: 1px solid var(--line);
}
.top h1 { font-size: 18px; margin: 0; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.top .sub { font-size: 13px; color: var(--ink-3); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 17px; white-space: nowrap; min-width: 0; }
.crumbs a { color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs .sep { color: var(--ink-4); display: inline-flex; }
.crumbs h1 { overflow: hidden; text-overflow: ellipsis; }
.time-pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-xs);
  background: var(--bg-2); font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 20px; flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; }
.content.pad-bottom { padding-bottom: calc(110px + var(--safe-b)); }
.back-ic { display: inline-flex; color: var(--ink-2); margin-left: -6px; padding: 0 4px; }
/* Cuenta de la mesa: oscura para que se vea sobre toda la carta; en la cuenta, se invierte */
.btn.account-btn { background: var(--dark); color: #fff; white-space: nowrap; min-height: 44px; gap: 6px; padding: 0 12px; font-weight: 500; box-shadow: var(--sh-1); flex: 0 0 auto; }
.btn.account-btn svg { color: currentColor; }
.account-btn .amt { font-size: 16px; font-weight: 600; }
.btn.account-btn.on { background: var(--surface-hi); color: var(--ink); }
/* El nombre de la mesa nunca se corta; si falta espacio, cede el tiempo */
.crumbs h1 { flex-shrink: 0; }
.crumbs .time-pill { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Tablet horizontal (900–1279 px): con tres secciones arriba no cabe el nombre del usuario; queda su
   avatar, como en el teléfono (05/10). */
@media (min-width: 900px) and (max-width: 1279px) { .user-chip .name, .user-chip .chev { display: none; } }
@media (max-width: 899px) {
  /* Dentro de una cuenta, en el celular, la barra general se oculta: manda la mesa. */
  .shell.in-order { --top-h: 0px; }
  .shell.in-order .topbar { display: none; }
  :root { --top-h: 108px; }
  /* Dos filas exactas (56 + 52 = 108) sin separación entre filas: antes el gap de 12 px sacaba las
     pestañas por debajo de la cabecera (16/10). */
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 56px 52px; gap: 0 12px; padding: 0 12px; }
  .brand { grid-column: 1; grid-row: 1; }
  .top-actions { grid-column: 2; grid-row: 1; }
  .navtabs { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 8px; }
  .navtabs::-webkit-scrollbar { display: none; }

  .navtabs { gap: 2px; }
  .navtab { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 6px; padding: 0 8px; font-size: 15px; }
  .navtab svg { flex: none; }
  .brand .status-pill { display: none; }
  .user-chip .name, .user-chip .chev { display: none; }
  .top { padding: 8px 12px; }
  .content { padding: 12px 12px calc(24px + var(--safe-b)); }
  .content.pad-bottom { padding-bottom: calc(110px + var(--safe-b)); }
}

/* Firefox y contadores largos: conservar el ancho del contenido en móvil pequeño. */
@media (max-width: 480px) { .navtab { flex: 1 0 auto; gap: 4px; padding: 0 4px; } }

/* Menú de gestión (despliega bajo el usuario) */
.popover-back { position: fixed; inset: 0; z-index: 60; background: transparent; }
.popover {
  position: fixed; top: calc(var(--top-h) - 6px); right: 16px; width: 320px; z-index: 61;
  display: flex; flex-direction: column; gap: 10px; animation: pop .14s ease;
}
@media (max-width: 899px) { .popover { top: 56px; right: 8px; left: 8px; width: auto; } .popover-back { background: rgba(16, 24, 32, .32); } }

.popover { max-height: calc(100dvh - var(--top-h) + 6px - 12px); overflow-y: auto; overscroll-behavior: contain; gap: 8px;
  scrollbar-width: thin; padding: 2px 2px 4px; margin: -2px; }
@media (max-width: 899px) { .popover { max-height: calc(100dvh - 56px - 12px); } }
.popover .menu-card a, .popover .menu-card button, .popover .menu-card .mi { min-height: 46px; font-size: 15.5px; }
.popover .menu-card .head { min-height: 60px; align-items: center; }
.popover .menu-card .head .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.popover .menu-card .head .cloud { font-size: 12.5px; }
.popover .menu-card .mi.ms-title { min-height: 28px; }
.popover .my-sales { gap: 6px; padding-bottom: 8px; }
.popover .my-sales .ms-big { font-size: 22px; }
.popover .my-sales .ms-right .ms-big { font-size: 17px; }
.popover .my-sales .ms-bar { height: 8px; }
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============ 4. Botones ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap);
  padding: 0 18px; border-radius: var(--r); font-weight: 450; font-size: 15.5px; background: var(--surface-hi);
  box-shadow: var(--sh-1); color: var(--ink); white-space: nowrap; text-decoration: none;
}
.btn svg { color: var(--ink-3); }
.row.wrap > .btn { flex: 1 1 150px; padding: 0 12px; }
.btn.primary { background: var(--coral); color: #fff; box-shadow: none; }
.btn.primary svg, .btn.ok svg, .btn.dark svg { color: currentColor; }
.btn.primary:active { background: var(--coral-strong); }
.btn.ok { background: var(--green); color: #fff; box-shadow: none; }
.btn.danger { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.btn.danger svg { color: currentColor; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
.btn.soft { background: var(--bg-2); box-shadow: none; }
.btn.outline { background: var(--surface); box-shadow: none; border: 1px solid var(--line-2); }
.btn.dark { background: var(--dark); color: #fff; box-shadow: none; }
.btn.block { width: 100%; }
.btn.big { min-height: 60px; font-size: 17px; }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.type-select {
  width: auto; min-height: 40px; padding: 0 30px 0 12px; font-size: 14px; border-radius: 10px; border: 0;
  background: var(--bg-2); color: var(--ink); flex: 0 0 auto;
}
.icon-btn {
  width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; flex: 0 0 44px; color: var(--ink-2);
}
.icon-btn:hover, .icon-btn:active { background: var(--bg-2); }
.icon-btn.outline { border: 1px solid var(--line-2); background: var(--surface); }

/* Botón partido: acción | total (Enviar, Cobrar) */
.split-btn {
  display: flex; align-items: stretch; width: 100%; min-height: 60px; border-radius: var(--r); overflow: hidden;
  background: var(--coral); color: #fff; font-size: 17px; font-weight: 450; text-align: left;
}
.split-btn:active { background: var(--coral-strong); }
.split-btn .a { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 18px; min-width: 0; }
.split-btn .b { display: flex; align-items: center; padding: 0 18px; border-left: 1px solid rgba(255, 255, 255, .3); }
.split-btn .ico { width: 20px; height: 20px; border-radius: 10px; background: #fff; color: var(--coral); display: grid; place-items: center; flex: 0 0 20px; }
.split-btn.dark { background: var(--dark); }
.split-btn.dark .ico { color: var(--dark); }
.fab {
  position: fixed; right: 20px; bottom: calc(24px + var(--safe-b)); z-index: 25; min-height: 56px;
  padding: 0 22px; border-radius: 28px; font-size: 16px; box-shadow: 0 8px 24px rgba(228, 0, 43, .35);
}

/* ============ 5. Pastillas, conteos, chips, segmentos ============ */
.count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: rgba(0, 0, 0, .07); color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1;
}
.cat-tile .count, .on-color .count { background: rgba(255, 255, 255, .24); color: #fff; }
.chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: var(--r); background: transparent;
  font-weight: 450; font-size: 15.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px;
}
.chip:hover { color: var(--ink); }
.chip.on { background: var(--bg-2); color: var(--ink); }
.chip.on .count { background: var(--ink-3); color: #fff; }

/* Segmento: contenedor blanco, activo negro (pisos, modos) */
.seg {
  display: inline-flex; background: var(--surface-hi); border-radius: var(--r); padding: 4px; gap: 2px; box-shadow: var(--sh-2);
}
.seg button {
  min-height: 44px; padding: 0 16px; border-radius: 9px; font-weight: 450; color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1;
}
.seg button.on { background: var(--dark); color: #fff; }
.seg button .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--coral); }
.seg.block { display: flex; width: 100%; }
.packing-pick { margin: 0 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.packing-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-bottom: 10px; font-size: 14px; }
.packing-fee { font-size: 12px; color: var(--coral-ink); }
.packing-segments { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--line-2); }
.packing-segments button { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 6px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.packing-segments button.on { background: var(--surface-hi); color: var(--ink); box-shadow: var(--sh-1); }
.packing-segments button:focus-visible { outline: 2px solid var(--coral-ink); outline-offset: 2px; }
.packing-hint { margin-top: 9px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }

.tag {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-xs); font-size: 12px;
  font-weight: 500; background: var(--bg-2); color: var(--ink-2); white-space: nowrap;
}
.tag.acc { background: var(--peach-2); color: var(--coral-ink); }
.tag.ok { background: var(--green-soft); color: var(--green); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.dom { background: #E3EAF3; color: var(--c-navy); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
.tag.new { background: var(--coral); color: #fff; letter-spacing: .05em; text-transform: uppercase; font-size: 11px; height: 20px; }
.caps { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* Pastilla de modificador: anillo coral + texto sobre fondo rojo suave */
.mod {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px 3px 6px; border-radius: 8px;
  background: var(--peach-2); color: var(--ink); font-size: 14px; line-height: 1.25;
}
.mod::before {
  content: ""; width: 14px; height: 14px; border-radius: 7px; flex: 0 0 14px; background: #fff;
  box-shadow: inset 0 0 0 4px var(--coral);
}
.mod .plus { color: var(--coral-strong); }
.mods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Pastilla de propiedad (ícono gris + texto) */
.prop { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: var(--r); background: var(--bg-2); color: var(--ink); }
.prop .pi { width: 22px; height: 22px; border-radius: 11px; background: var(--ink-4); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600; }

/* ============ 6. Tarjetas y paneles ============ */
.panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
.panel h2 { font-size: 16px; font-weight: 500; margin: 0 0 12px; }
.panel.hi { background: var(--surface-hi); }
.panel.sunk { background: var(--bg-2); box-shadow: none; }
.section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 20px 2px 10px; }
.empty { text-align: center; padding: 48px 16px; color: var(--ink-3); }
.empty strong { display: block; color: var(--ink); font-size: 17px; font-weight: 500; margin-bottom: 6px; }
.empty-note > span { display: block; max-width: 46ch; margin: 0 auto; }
.empty-note > .btn { margin-top: 16px; }
.menu-notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; padding: 14px 16px;
  border: 1px dashed var(--line-2); border-radius: 12px; color: var(--ink-3); }
.menu-notice strong { display: block; color: var(--ink); font-weight: 500; }
.menu-notice .grow { flex: 1 1 220px; }
.list { display: flex; flex-direction: column; }
.list > * { border-bottom: 1px solid var(--line); }
.list > *:last-child { border-bottom: 0; }
.kv { display: flex; justify-content: space-between; padding: 9px 0; gap: 12px; }
.kv.total { font-size: 19px; font-weight: 500; }

/* Lista de navegación (Gestión) */
.menu-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 6px; display: flex; flex-direction: column; }
.menu-card a, .menu-card button, .menu-card .mi {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border-radius: 10px;
  text-decoration: none; color: var(--ink); font-size: 16px; text-align: left; width: 100%;
}
.menu-card a:hover, .menu-card button:hover { background: var(--bg); }
.menu-card .toggle { width: 52px; min-height: 0; height: 32px; padding: 0; border-radius: 16px; }
.menu-card .toggle:hover { background: var(--line-2); }
.menu-card .toggle.on, .menu-card .toggle.on:hover { background: var(--green); }
.menu-card a.on { background: var(--bg-2); }
.menu-card svg { color: var(--ink-3); flex: 0 0 auto; }
.menu-card .head { min-height: 64px; gap: 12px; }
.menu-card .head b { font-weight: 500; display: block; }
/* Mis ventas de hoy (perfil): puntos y millones con avance hacia la meta diaria. */
.menu-card .mi.ms-title { min-height: 32px; padding-top: 6px; }
.my-sales { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.my-sales .ms-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.my-sales .ms-big { font-size: 28px; font-weight: 500; letter-spacing: -.01em; }
.my-sales .ms-unit { margin-left: 6px; color: var(--ink-2); font-size: 15px; }
.my-sales .ms-right .ms-big { font-size: 22px; color: var(--ink-2); }
.my-sales .ms-bar { height: 12px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.my-sales .ms-bar i { display: block; height: 100%; border-radius: 6px; background: var(--coral); transition: width .4s; }
.my-sales .ms-bar i.done { background: var(--green); }
.my-sales .ms-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--ink-2); }
.my-sales .ms-foot b { font-weight: 500; color: var(--ink); }
/* Botón «Mis pedidos» junto al perfil y sus tiras de cuentas vigentes. */
.top-pill {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); font-weight: 450; white-space: nowrap;
}
.top-pill svg { color: var(--ink-2); }
.top-pill .badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--coral); color: #fff;
  font-size: 13px; font-weight: 600; display: grid; place-items: center;
}
@media (max-width: 899px) { .top-pill { padding: 0 10px; } .top-pill .lbl { display: none; } }
.strips { display: flex; flex-direction: column; gap: 12px; }
.strip {
  display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; padding: 14px 16px 12px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); color: var(--ink);
}
.strip:active { transform: scale(.99); }
.strip .st-h { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; }
.strip .st-h b { font-weight: 500; }
.strip .st-total { font-weight: 500; }
.strip .st-round { border-top: 1px dashed var(--line-2, var(--line)); padding-top: 8px; margin-top: 2px; display: flex; flex-direction: column; gap: 4px; }
.strip .st-rh { display: flex; justify-content: space-between; color: var(--ink-3); font-weight: 500; }
.strip .st-line { display: flex; gap: 10px; font-size: 15px; line-height: 1.3; }
.strip .st-line .q { min-width: 22px; text-align: right; color: var(--ink-2); font-weight: 500; }
.strip .st-line small { color: var(--ink-3); }
.strip .st-line.void { text-decoration: line-through; color: var(--ink-3); }
.strip .st-round.empty { color: var(--green); }
/* Cancelaciones en Mis pedidos y en el perfil (J, 27/09): contador ámbar, distinto del de cuentas. */
.badge.warn, .top-pill .badge.warn { background: var(--amber); color: #fff; }
.void-queue { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 12px; border-radius: var(--r);
  background: var(--amber-soft); }
.void-queue .vq-h { display: flex; align-items: center; gap: 8px; }
.void-queue .badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 13px; font-weight: 600;
  display: inline-grid; place-items: center; }
.vq-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; text-align: left;
  background: var(--surface); border-radius: 12px; box-shadow: var(--sh-1); color: var(--ink); }
.vq-item .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vq-item b { font-weight: 500; }
.strip-wrap { display: flex; flex-direction: column; gap: 0; }
.strip-wrap:has(.st-voids) .strip { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.st-voids { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; text-align: left;
  background: var(--amber-soft); color: var(--amber); font-weight: 500; border-radius: 0 0 var(--r) var(--r); }
.strip .st-line .st-pending { color: var(--amber); }
.menu-card a.menu-voids { border: 1px solid var(--line-2); margin-top: 4px; }
.menu-card a .badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 13px;
  font-weight: 600; display: inline-grid; place-items: center; }
.void-card.focus { box-shadow: 0 0 0 2px var(--amber), var(--sh-1); }
.void-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* Cancelar: ¿hubo merma? Dos botones grandes, obligatorio (José, 12/10). */
.void-waste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.void-waste-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 76px; padding: 12px 14px;
  border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); border: 2px solid var(--line-2); text-align: left; }
.void-waste-btn b { font-size: 19px; font-weight: 600; }
.void-waste-btn span { font-size: 14px; color: var(--ink-2); line-height: 1.3; }
.void-waste-btn.on { border-color: var(--green); background: var(--green-soft); }
.void-waste-btn.waste.on { border-color: var(--warn); background: var(--warn-soft); }
/* Cancelaciones por día. */
.vd-tabs { margin-bottom: 14px; }
.vd-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.vd-pick input { min-height: 48px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-hi); font-size: 16px; }
.vd-title { font-size: 18px; margin: 4px 0 10px; text-transform: none; }
.vd-title::first-letter { text-transform: uppercase; }
.vd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.vd-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); min-width: 0; }
.vd-tile span { font-size: 14px; color: var(--ink-2); }
.vd-tile b { font-size: 24px; font-weight: 600; }
.vd-tile small { font-size: 13px; color: var(--ink-2); }
.vd-tile.waste { border-left: 4px solid var(--warn); }
.vd-tile.ok { border-left: 4px solid var(--green); }
.vd-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.vd-row { display: grid; grid-template-columns: 56px minmax(80px, .9fr) minmax(140px, 1.6fr) 96px 170px minmax(140px, 1.5fr) minmax(150px, 1.4fr);
  gap: 10px; align-items: start; width: 100%; padding: 12px 14px; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1);
  text-align: left; font-size: 15px; line-height: 1.3; }
.vd-row > span { min-width: 0; overflow-wrap: anywhere; }
.vd-row small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.vd-row .tag { height: auto; min-height: 24px; white-space: normal; }
.vd-amount { text-align: right; font-weight: 600; }
.vd-head { background: transparent; box-shadow: none; padding-top: 0; padding-bottom: 0; font-size: 13px; color: var(--ink-2); }
.vd-head span:nth-child(4) { text-align: right; }
@media (max-width: 1100px) {
  .vd-head { display: none; }
  .vd-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "time table amount" "prod prod waste" "reason reason reason" "who who who"; gap: 4px 10px; }
  .vd-time { grid-area: time; color: var(--ink-2); } .vd-table { grid-area: table; font-weight: 500; } .vd-amount { grid-area: amount; }
  .vd-prod { grid-area: prod; font-size: 16px; } .vd-waste { grid-area: waste; justify-self: end; }
  .vd-reason { grid-area: reason; } .vd-who { grid-area: who; color: var(--ink-2); }
}
@media (max-width: 560px) {
  .vd-tiles { grid-template-columns: 1fr; }
  .void-waste { grid-template-columns: 1fr; }
  .vd-date .btn { flex: 1 1 0; padding: 0 10px; } .vd-pick { flex: 1 1 100%; order: -1; } .vd-pick input { width: 100%; }
  .vd-row { grid-template-areas: "time table amount" "prod prod prod" "waste waste waste" "reason reason reason" "who who who"; }
  .vd-waste { justify-self: start; }
}

/* Cuentas cerradas (13/10): lista por jornada y detalle con imprimir / reimprimir COPIA */
.cc-go { flex: none; }
.cc-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 12px; font-size: 16px; color: var(--ink-2); }
.cc-sum b { color: var(--ink); font-size: 18px; font-weight: 600; }
.cc-search input { width: 100%; min-height: 52px; font-size: 17px; }
.cc-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.cc-row { display: grid; grid-template-columns: 64px minmax(120px, 1.3fr) minmax(130px, 1.1fr) minmax(110px, 1fr) 130px 170px;
  gap: 10px; align-items: center; width: 100%; padding: 14px; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1);
  text-align: left; font-size: 16px; line-height: 1.3; min-height: 60px; }
.cc-row > span { min-width: 0; overflow-wrap: anywhere; }
.cc-row small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; font-weight: 400; }
.cc-row .tag { height: auto; min-height: 26px; white-space: normal; font-size: 13px; }
.cc-time { color: var(--ink-2); }
.cc-label b { font-weight: 600; font-size: 17px; }
.cc-total { text-align: right; font-weight: 600; font-size: 17px; }
.cc-pay { color: var(--ink-2); }
.cc-head { background: transparent; box-shadow: none; padding-top: 0; padding-bottom: 0; min-height: 0; font-size: 13px; color: var(--ink-2); }
.cc-head span:nth-child(5) { text-align: right; }
@media (max-width: 1100px) {
  .cc-head { display: none; }
  .cc-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "time label total" "no no paper" "pay pay pay"; gap: 4px 12px; }
  .cc-time { grid-area: time; } .cc-label { grid-area: label; } .cc-total { grid-area: total; }
  .cc-no { grid-area: no; } .cc-paper { grid-area: paper; justify-self: end; } .cc-pay { grid-area: pay; font-size: 14px; }
}
.cc-head-info { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 16px; color: var(--ink-2); margin-bottom: 4px; }
.cc-head-info b { color: var(--ink); font-weight: 600; }
.cc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
@media (max-width: 899px) { .cc-cols { grid-template-columns: minmax(0, 1fr); } }
.cc-check { display: flex; flex-direction: column; gap: 4px; }
.cc-check-h { display: flex; align-items: flex-start; gap: 10px; }
.cc-check-h .tag { font-size: 14px; height: 28px; }
.cc-check-title { display: block; font-size: 18px; font-weight: 600; }
.cc-check.voided { opacity: .7; }
.cc-alloc { border-top: 1px solid var(--line); margin-top: 6px; }
.cc-alloc .kv, .cc-pays .kv, .cc-lines .kv { padding: 6px 0; }
.cc-pays { border-top: 1px solid var(--line); }
.cc-pays small { display: block; font-size: 13px; color: var(--ink-2); }
.cc-copies { padding-top: 4px; }
.cc-print, .cc-copy { margin-top: 10px; }
.cc-lines { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 6px; }
.cc-line { padding: 8px 0; border-bottom: 1px solid var(--line); }
.cc-line:last-child { border-bottom: 0; }
.cc-line .kv { gap: 12px; font-size: 16px; }
.cc-line.all-voided .kv b, .cc-line.all-voided .kv .num { text-decoration: line-through; color: var(--ink-3); }
.cc-note { margin-top: 6px; font-size: 15px; font-weight: 500; }
.cc-void { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.cc-void .tag { font-size: 13px; }

/* Comanda impresa o no (mostrador), en la revisión antes de enviar. */
.print-pick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); }
.print-pick svg { color: var(--ink-2); flex: 0 0 auto; }
.print-pick b { display: block; font-weight: 500; font-size: 16px; }

/* Mis ventas: meta, scoreboard e histórico. */
.content.sales { display: grid; gap: 14px; max-width: 760px; }
.sales-card { display: flex; flex-direction: column; gap: 12px; }
.sales-card h2.caps { margin: 0; font-size: 12px; }
.sales-card .my-sales { padding: 0; }
.sales-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sales-stats .stat { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.sales-stats .v { font-size: 24px; font-weight: 500; }
.sales-stats .v small { font-size: 14px; color: var(--ink-3); font-weight: 450; }
.sales-stats .k { font-size: 13px; color: var(--ink-2); }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-head .seg button { min-height: 36px; padding: 0 12px; }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.board li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r); }
.board li.me { background: var(--peach-3); box-shadow: inset 0 0 0 1.5px var(--peach); }
.board .pos { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; font-weight: 600; background: var(--bg-2); color: var(--ink-2); flex: 0 0 auto; }
.board .pos.p1 { background: #FFD6DE; color: #101820; }
.board .pos.p2 { background: #D9DADB; color: #3F4245; }
.board .pos.p3 { background: #E6E8EA; color: #101820; }
.board .bn { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; }
.board .bn b { font-weight: 500; }
.board .bb { height: 8px; border-radius: 4px; background: var(--bg-2); margin: 6px 0 4px; overflow: hidden; }
.board .bb i { display: block; height: 100%; border-radius: 4px; background: var(--coral); }
.board li.me .bb i { background: var(--coral-strong, var(--coral)); }
.hist-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 15px; }
.hist-sel b { font-weight: 500; display: inline-block; }
.hist-sel b::first-letter { text-transform: uppercase; }
.hist { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-bottom: 20px; }
.hist .goal-line { position: absolute; left: 0; right: 0; bottom: calc(20px + (100% - 20px) * var(--goal)); border-top: 2px dashed var(--green); opacity: .7; pointer-events: none; }
.hist .hb { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; padding: 0; }
.hist .hb i { display: block; width: 100%; max-width: 22px; border-radius: 4px 4px 2px 2px; background: var(--peach); }
.hist .hb.met i { background: var(--green); }
.hist .hb.on i { box-shadow: 0 0 0 2px var(--ink); }
.hist .hb.today i { background: var(--coral); }
.hist .hb.today.met i { background: var(--green); }
.hist .hd { position: absolute; bottom: -20px; font-size: 11px; color: var(--ink-3); text-transform: uppercase; }
.hist .hb.today .hd { color: var(--ink); font-weight: 600; }
.hist-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.hist-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hist-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--peach); }
.hist-legend i.met { background: var(--green); }
.hist-legend i.line { height: 0; border-top: 2px dashed var(--green); border-radius: 0; background: none; }
@media (max-width: 420px) { .sales-stats .v { font-size: 20px; } .sales-stats .stat { padding: 10px; } .hist { gap: 2px; } }

.menu-card hr { border: 0; border-top: 1px solid var(--line); margin: 4px 8px; width: auto; }

/* Interruptor verde */
.toggle { width: 52px; height: 32px; border-radius: 16px; background: var(--line-2); position: relative; flex: 0 0 52px; transition: background .15s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: left .15s; }
.toggle.on { background: var(--green); }
.toggle.on::after { left: 23px; }
/* Interruptor de agotado: rojo cuando está activo */
.switch { width: 60px; height: 44px; border-radius: 22px; border: 6px solid var(--surface); background: var(--line-2); position: relative; flex: 0 0 60px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: left .15s; }
.switch.on { background: var(--warn); }
.switch.on::after { left: 19px; }

/* Casilla dentro de tarjeta */
.check-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); font-size: 16px; }
.checkbox { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: #fff; background: #fff; }
.checkbox.on { background: var(--coral); border-color: var(--coral); }

/* Tarjeta oscura de consejo y tarjeta azul de bienvenida */
.tip-card { background: var(--dark); color: #fff; border-radius: var(--r-lg); padding: 18px 20px; }
.tip-card h3 { margin: 0 0 8px; font-weight: 450; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.tip-card p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 16px; }
.tip-card hr { border: 0; border-top: 1.5px dashed rgba(255, 255, 255, .22); margin: 14px 0 6px; }
.tip-card .row { min-height: 48px; }
.hello-card { background: var(--c-navy); color: #fff; border-radius: var(--r-lg); padding: 18px 20px; position: relative; overflow: hidden; }
.hello-card h3 { margin: 0; font-weight: 450; font-size: 18px; position: relative; }
.hello-card p { margin: 2px 0 0; color: rgba(255, 255, 255, .78); font-size: 17px; position: relative; }
.hello-card hr { border: 0; border-top: 1.5px dashed rgba(255, 255, 255, .25); margin: 16px 0 10px; }
.hello-card .btn { background: transparent; color: #fff; box-shadow: none; }
.hello-card .btn.outline { border-color: rgba(255, 255, 255, .35); }
.hello-card .art { position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 65px; background: var(--coral); }
.hello-card .art::after { content: ""; position: absolute; left: 10px; top: 40px; width: 60px; height: 30px; border-radius: 30px 30px 0 0; background: var(--c-sage); }

/* Progreso de cobro */
.paying { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px 18px; }
.paying .row { font-size: 17px; }
.bar { height: 10px; border-radius: 5px; background: var(--bg-2); overflow: hidden; margin-top: 12px; }
.bar i { display: block; height: 100%; background: var(--coral); border-radius: 5px; }

/* Aviso de pedido (domicilio, mostrador) */
.notice {
  display: flex; align-items: stretch; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--sh-1);
  text-align: left; width: 100%;
}
.notice .side-act { width: 96px; flex: 0 0 96px; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 16px; }
.notice .body { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.notice .title { font-size: 17px; font-weight: 450; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notice .meta { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============ 7. Mesas numeradas ============ */
.content.rooms-wrap { max-width: none; }
.room { min-width: 0; width: 100%; }
.room-name { margin: 18px 0 8px; font-size: 20px; font-weight: 500; }

/* Mostrador (José, 14/10): dos columnas de igual peso, Mostrador y Domicilios, en un contenedor
   centrado; cada una con encabezado, número, «Añadir» y su aviso vacío corto. En el celular se apilan. */
.counter-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; align-items: start; }
.counter-col { background: var(--surface-hi); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; min-width: 0; }
.counter-col-head { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 12px; }
.counter-col-head h2 { margin: 0; font-size: 18px; font-weight: 550; }
.counter-col-count { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: var(--bg-2); display: inline-grid; place-items: center; font-size: 15px; font-weight: 600; }
.counter-col-head .btn { min-height: 48px; }
.counter-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.counter-empty { margin: 0; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r); font-size: 14px; color: var(--ink-2); }
.card .channel-tag { font-weight: 600; }
@media (max-width: 799px) {
  .counter-columns { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .counter-col { padding: 12px; }
  .counter-cards { grid-template-columns: minmax(0, 1fr); }
}
.room-activity { margin: 18px 10px 0; }
.room-activity-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.room-activity-head h3 { margin: 0; font-size: 16px; font-weight: 550; }
.room-activity-head > span { font-size: 28px; font-weight: 600; line-height: 1; color: var(--ink); }
.room-quiet { font-size: 13px; color: var(--ink-2); padding: 12px; background: var(--surface); border-radius: var(--r); }
.room-round { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-top: 8px; overflow: hidden; }
.room-round summary { cursor: pointer; list-style: none; padding: 12px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.room-round-table { font-size: 30px; font-weight: 550; line-height: 1; text-align: center; }
.room-round-info { display: block; min-width: 0; }
.room-round summary::-webkit-details-marker { display: none; }
.room-round-main, .room-round-meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.room-round-main { font-size: 13px; }
.room-round-main b { font-weight: 550; }
.room-round-meta { font-size: 12px; color: var(--ink-2); margin-top: 5px; }
.room-round-meta > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.room-round-meta > .num { white-space: nowrap; }
.room-round[open] .room-round-meta svg { transform: rotate(180deg); }
.room-round-detail { border-top: 1px solid var(--line); padding: 12px; }
.room-round-line { display: flex; align-items: start; gap: 10px; font-size: 13px; margin-bottom: 12px; }
.room-round-line > b { min-width: 20px; color: var(--coral-ink); }
.room-round-line > div { min-width: 0; overflow-wrap: anywhere; }
.room-round-note { color: var(--coral-ink); }
.room-waiting { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 58px; text-align: left; border: 1px dashed var(--line-2); border-radius: var(--r); padding: 10px 12px; margin-top: 8px; font-size: 13px; }
.room-waiting .room-round-info { display: flex; flex-direction: column; gap: 4px; }

.room-activity.compact { margin-top: 12px; }
.room-activity-box > summary { list-style: none; cursor: pointer; }
.room-activity-box > summary::-webkit-details-marker { display: none; }
.room-activity-line { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 14px; }
.room-activity-line b { font-weight: 550; flex: 1; min-width: 0; }
.room-activity-line .num { font-weight: 600; white-space: nowrap; }
.room-activity-line .muted { font-size: 13px; }
.room-activity-box[open] > summary svg { transform: rotate(180deg); }
.room-activity-box[open] > summary { border-color: var(--line-2); }
.tbl { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tbl .info.time { background: var(--wait-bg, rgba(255, 255, 255, .5)); color: var(--wait-fg, var(--coral-ink)); font-weight: 600; }
.tbl .info.time .ic { background: var(--wait-fg, var(--coral-ink)); }
.tbl .info.time.late { font-weight: 800; }
@media (max-width: 899px) {
  .physical-plan .tbl .info.time { font-size: 10.5px; height: 17px; }
}
.room-personal { margin: 22px 10px 0; padding-top: 18px; border-top: 1px solid var(--line-2); }
.personal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.personal-card { display: flex; align-items: center; gap: 8px; min-height: 76px; padding: 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-align: left; }
.personal-card.busy { background: var(--peach-3); border-color: var(--peach); }
.personal-card-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.personal-card-info b { font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.personal-card-info > span { font-size: 11px; color: var(--ink-2); }
.personal-card .avatar { flex-shrink: 0; width: 30px; height: 30px; font-size: 10px; }
.personal-manage { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); padding: 8px 0 0; }
@media (max-width: 899px) {
  .physical-room { width: auto; padding-bottom: calc(96px + var(--safe-b)); }
  .room .physical-plan { gap: 14px 4px; padding: 14px 5px; }
  .physical-plan .tbl .face { inset: 0; padding: 2px; gap: 2px; }
  .physical-plan .tbl .lbl { font-size: 20px; }
  .physical-plan .tbl .info { font-size: 9px; height: 15px; padding: 0 2px; gap: 1px; }
  .physical-plan .tbl .info .ic { display: none; }
  .physical-plan .tbl .info.note { font-size: 8px; }
  .room-activity { margin-left: 4px; margin-right: 4px; }
  .room-personal { margin-left: 4px; margin-right: 4px; }
}
@media (max-width: 899px) and (orientation: landscape) {
  .rooms .room { flex-basis: 380px; width: 380px; }
  .rooms .events-room { flex-basis: 310px; width: 310px; }
  .rooms::after { content: ""; flex: 0 0 calc(100vw - 420px); }
  .physical-room .room-name { font-size: 16px; }
}
/* Móvil: nombre pequeño debajo del minimapa, sin ensanchar el selector. */


/* Mini mesas (mover de mesa) */
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.table-btn {
  aspect-ratio: 1; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 18px; font-weight: 450;
}
.table-btn small { font-size: 11.5px; color: var(--ink-3); }
.table-btn.busy { background: var(--peach); color: var(--coral-ink); }
.search-why { font-size: 14px; color: var(--ink-2); margin: -4px 2px 2px; overflow-wrap: anywhere; }
.move-tables .table-btn:disabled { opacity: .45; }

/* Mover solo algunos productos a otra mesa (mover-unidades.js) */
.move-account.move-mode { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 76px; }
.move-account.move-mode b { font-size: 19px; }
.move-account.move-mode span { font-size: 15px; color: var(--ink-2); }
.move-hint { font-size: 15px; color: var(--ink-2); margin: 0 0 14px; }
.move-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.move-count { font-size: 17px; font-weight: 600; }
.move-accounts { display: flex; flex-direction: column; gap: 10px; }
.move-account { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px;
  border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); text-align: left; font-size: 17px; }
.move-account b { font-weight: 600; overflow-wrap: anywhere; }
.move-account.new { background: var(--bg); border: 2px dashed var(--line); box-shadow: none; flex-direction: column; align-items: flex-start; }
.move-account.new span { font-size: 15px; color: var(--ink-2); }
.move-route { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 19px; margin: 0 0 12px; }
.move-route b { font-weight: 600; overflow-wrap: anywhere; }
.move-list { margin: 0 0 14px; padding-left: 22px; font-size: 18px; line-height: 1.5; }
.move-list li { overflow-wrap: anywhere; }

/* Tarjetas de cuentas (mostrador, domicilio) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; text-align: left; position: relative; min-height: 112px;
}
.card:active { transform: scale(.99); }
.card .label { font-size: 17px; font-weight: 450; line-height: 1.2; padding-right: 40px; }
.card .total { font-size: 20px; font-weight: 450; margin-top: auto; }
.card .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.card .avatar { position: absolute; top: 12px; right: 12px; }
.card.mine { box-shadow: inset 4px 0 0 var(--coral), var(--sh-1); }

/* ============ 8. Carta: categorías y productos ============ */
.cat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 999px) { .cat-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } }
.cat-tile {
  --cat: var(--c-slate);
  background: var(--cat); color: #fff; border-radius: var(--r); min-height: 96px; padding: 12px 16px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px; position: relative;
}
@media (max-width: 999px) {
  .cat-tile { min-height: 72px; padding: 9px 9px 9px 10px; gap: 6px; }
  .cat-tile .t { display: block; font-size: 14px; letter-spacing: -.01em; overflow-wrap: anywhere; }
  .cat-tile .t .count { position: absolute; bottom: 10px; right: 10px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .cat-tile .e svg { width: 20px; height: 20px; }
}
.cat-tile .t { display: flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 450; line-height: 1.2; }
.cat-tile .e { line-height: 0; color: rgba(255, 255, 255, .92); }
.cat-tile.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--cat); }
.cat-tile:active { filter: brightness(.95); }
.menu-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--ink); font-size: 16px; min-height: 44px; }
.menu-head svg { color: var(--ink-3); }
.menu-head.sep { border-top: 1.5px dashed var(--dots); padding-top: 12px; margin-top: 18px; }

.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
/* Resultados de búsqueda agrupados: «Categoría: Desayunos › Combos» y «Por nombre» (2.ª ronda, 12/10). */
.search-group { margin-bottom: 18px; }
.search-group-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--ink); }
@media (max-width: 460px) { .products { grid-template-columns: 1fr 1fr; gap: 8px; } }
.product {
  --cat: var(--c-slate);
  background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); padding: 13px 14px 12px 24px; text-align: left;
  min-height: 104px; display: flex; flex-direction: column; gap: 2px; position: relative;
}
.product::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--cat); }
.product:active { transform: scale(.985); background: var(--surface-hi); }
.product .pn { padding-right: 26px; font-weight: 450; font-size: 16px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product .pn .code { color: var(--ink-3); }
.product .pp { font-size: 16px; color: var(--ink); }
.product .opts { position: absolute; right: 12px; bottom: 11px; color: var(--ink-4); }
.product .inCart { position: absolute; bottom: 10px; right: 12px; }
.product-wrap { position: relative; display: grid; }
.product-wrap.has-info .product .so { right: 48px; }
.product-wrap.has-info .product .pn { padding-right: 34px; }
.pinfo {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--ink-3); border-radius: 0 var(--r) 0 10px;
}
.hold { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pinfo:active { background: var(--bg-2); color: var(--ink); }
/* Vista mientras se mantiene oprimido: no recibe toques, se va al soltar */
.info-peek {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; display: flex; align-items: flex-start; justify-content: center;
  padding: calc(72px + env(safe-area-inset-top, 0px)) 16px 16px; background: rgba(16, 24, 32, .28); animation: peek-in .12s ease-out;
}
.info-peek .card {
  width: 100%; max-width: 440px; background: var(--surface-hi); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 18px 20px;
}
.info-peek .kicker { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--coral-ink); margin-bottom: 4px; }
.info-peek .row b { font-size: 18px; font-weight: 500; }
.info-peek .row .num { font-size: 17px; }
.info-peek .desc { font-size: 17px; line-height: 1.45; margin: 10px 0 0; }
.info-peek .opts-list { color: var(--ink-3); font-size: 14.5px; margin-top: 8px; }
@keyframes peek-in { from { opacity: 0; transform: translateY(-4px); } }
.product .so { position: absolute; top: 13px; right: 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); }
.product.out { opacity: .55; }
.product.out::before { opacity: .45; }
.product.out .pn, .product.out .pp { color: var(--ink-3); }

/* Carta general, tipo teclado de caja (J, 29/09, 2.ª ronda): cada categoría madre es un
   encabezado sólido de su color; debajo, si tiene subcategorías reales, sus teclas en
   cuadrícula, todas del mismo tamaño; una plana es su propio encabezado-tecla. Solo una
   abierta a la vez, con sus productos justo debajo. Práctico, no decorativo: sin burbujas
   sueltas ni bloques de fondo tenue. */
.cat-map { margin: 0 0 20px; overflow-anchor: none; }
.cat-map:last-of-type { margin-bottom: 4px; }
.cat-solid {
  --cat: var(--c-slate);
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin: 0 0 10px;
  padding: 0 14px; border: 0; border-radius: 10px; color: #fff;
  /* 85 % del color: texto blanco con contraste AA (≥ 4,5) también en ocre y salvia. */
  background: color-mix(in srgb, var(--cat) 85%, #000);
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left;
}
.cat-solid.flat-key { cursor: pointer; margin-bottom: 0; }
.cat-solid.flat-key svg { flex: none; transition: transform .15s; }
.cat-solid.flat-key.on svg, .cat-solid.flat-key[aria-expanded="true"] svg { transform: rotate(180deg); }
.cat-solid.flat-key:active { filter: brightness(.94); }
.cat-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1000px) { .cat-keys { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.cat-key {
  --cat: var(--c-slate);
  min-height: 52px; padding: 10px 12px 10px 16px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.2;
  text-align: left; position: relative; display: flex; align-items: center; overflow-wrap: break-word;
}
.cat-key::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 10px 0 0 10px; background: var(--cat); }
.cat-key.on { background: color-mix(in srgb, var(--cat) 85%, #000); color: #fff; border-color: color-mix(in srgb, var(--cat) 85%, #000); }
.cat-key.on::before { background: rgba(255, 255, 255, .5); }
.cat-key:active { filter: brightness(.97); }
.cat-map .products { margin-top: 12px; }
.search { position: relative; margin-bottom: 12px; }
.search input::-webkit-search-cancel-button { display: none; }
.search .clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.search .clear svg { position: static; transform: none; }
/* Carta → filtros (punto 10, 12/10): categoría, comanda y estado; se apilan en el celular. */
.cat-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 14px; }
.cat-filter-cat { flex: 1 1 260px; max-width: 420px; }
.cat-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cat-filter .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; font-size: 15px; }
.cat-filter .seg button { min-height: 44px; padding: 0 14px; }
.cat-count { margin: -4px 0 8px; font-weight: 500; }
/* Carta v2 (José, 14/10): búsqueda destacada, categorías de acceso directo y Filtros aparte. */
.cat-bar { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.cat-bar .cat-search { flex: 1; min-width: 0; margin: 0; }
.search.cat-search input { min-height: 54px; font-size: 18px; padding-left: 46px; border-radius: var(--r-lg, 14px); background: var(--surface-hi); }
.search.cat-search > svg { left: 15px; color: var(--ink-2); }
.cat-filters-btn { flex: 0 0 auto; min-height: 54px; gap: 6px; padding: 0 16px; }
.cat-filters-btn.on { background: var(--dark); color: #fff; }
.cat-filters-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--coral); color: #fff; font-size: 13px; font-weight: 600; }
.cat-nav { margin-bottom: 12px; }
/* Todas las categorías a la vista, sin desplazamiento lateral (José, 14/10): envuelven en filas. */
.cat-roots, .cat-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
.cat-chip { flex: 0 1 auto; max-width: 100%; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border-radius: 22px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cat-chip i { width: 9px; height: 9px; border-radius: 5px; background: var(--cat, var(--ink-3)); }
.cat-chip.on { background: var(--dark); border-color: var(--dark); color: #fff; }
.cat-chip.sm { min-height: 40px; padding: 0 12px; font-size: 14px; }
.cat-subs { align-items: center; margin-top: 4px; padding-left: 10px; border-left: 3px solid var(--line-2); }
.cat-subs-h { flex: 1 0 100%; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cat-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 10px; }
.cat-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 12px; border-radius: 18px; background: var(--peach-3); color: var(--coral-ink); font-size: 14px; font-weight: 500; }
.cat-hits { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.cat-filters-f { gap: 10px; width: 100%; }
.cat-filters-sheet { display: flex; flex-direction: column; gap: 16px; }
.cat-filters-sheet .cat-filter .seg { display: flex; width: 100%; }
.cat-filters-sheet .cat-filter .seg button { padding: 0 8px; }
@media (max-width: 599px) {
  .cat-filter, .cat-filter-cat { flex: 1 1 100%; max-width: none; }
  .cat-filter .seg { display: flex; width: 100%; }
  .cat-filter .seg button { padding: 0 8px; }
}
.search input { padding-left: 44px; background: var(--surface); }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }

/* ============ 9. Panel del pedido ============ */
.order-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); overflow-anchor: none; }
.order-layout > *, .pay-layout > * { min-width: 0; }
@media (min-width: 1000px) { .order-layout { grid-template-columns: 380px minmax(0, 1fr); align-items: start; } }
.order-side { position: sticky; top: calc(var(--top-h) + 80px); max-height: calc(100vh - var(--top-h) - 100px); display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 999px) { .order-side { position: static; max-height: none; } }
.order-side .op { flex: 0 1 auto; min-height: 0; }
.op { background: var(--bg-2); border-radius: var(--r-xl); padding: 8px; display: flex; flex-direction: column; min-height: 0; }
.op-scroll { overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 10px; }
.op-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; font-size: 17px; }
.cnt { display: inline-flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--surface); font-size: 13.5px; color: var(--ink-2); }
.cnt span { display: inline-flex; align-items: center; gap: 4px; }
.cnt svg { color: var(--ink-3); }
.op-head .tot { margin-left: auto; font-size: 17px; }
.op-sub { display: flex; align-items: center; gap: 6px; padding: 12px 10px 10px; color: var(--ink-3); border-top: 1.5px dashed var(--dots); font-size: 15px; }
.op-sub b { color: var(--ink); font-weight: 450; }
.op-empty { padding: 28px 12px; text-align: center; color: var(--ink-3); }
.gcard { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.gcard-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.gcard-h .name { flex: 1; min-width: 0; font-size: 16px; }
.gcard-h .price { font-size: 16px; }
.qty-chip { display: inline-grid; place-items: center; min-width: 32px; height: 26px; padding: 0 7px; border-radius: 7px; background: var(--bg-2); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.gline { display: flex; flex-direction: column; padding: 11px 14px; border-top: 1px solid var(--line); }
.gline .r { display: flex; align-items: center; gap: 10px; }
.gline .r .n { flex: 1; min-width: 0; font-size: 15.5px; }
.gline .note { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.duty-strip { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; padding:8px 20px; background:var(--peach-2); color:var(--ink); font-size:14px; }
.duty-strip a { display:inline-flex; align-items:center; min-height:40px; color:inherit; text-underline-offset:3px; }
.gline.void .n, .gline.void .p { text-decoration: line-through; color: var(--ink-3); }
.to-pay { background: var(--bg-2); border-radius: var(--r-lg); padding: 14px 18px; display: flex; align-items: center; gap: 10px; font-size: 17px; width: 100%; text-align: left; min-height: 60px; }

/* Líneas (cobro, rondas) */
.line { display: flex; gap: 10px; padding: 11px 0; align-items: flex-start; }
.line .q { font-weight: 500; min-width: 30px; color: var(--ink-2); }
.line .n { flex: 1; min-width: 0; }
.line .n b { font-weight: 450; }
.line .n .s { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.line .p { white-space: nowrap; }
.line.void .n > b, .line.void .p { text-decoration: line-through; color: var(--ink-3); }
.round-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); padding: 12px 0 2px; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; background: var(--bg-2); border-radius: 10px; }
.stepper button { width: 42px; height: 42px; font-size: 20px; color: var(--ink-2); }
.stepper span { min-width: 26px; text-align: center; font-weight: 500; }
.sendbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 26; padding: 10px 12px calc(10px + var(--safe-b));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
@media (min-width: 1000px) { .sendbar { position: static; background: none; padding: 0; } }
.sendbar .btn { width: 100%; justify-content: space-between; }

/* ============ 10. Hojas (modales) ============ */
.sheet-back {
  position: fixed; inset: 0; background: rgba(16, 24, 32, .32); z-index: 50; display: flex;
  align-items: flex-end; justify-content: center; animation: fade .15s ease;
}
.sheet {
  background: var(--bg); width: 100%; max-width: 620px; max-height: 94vh; max-height: 94dvh; border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex; flex-direction: column; animation: up .2s ease; box-shadow: var(--sh-pop);
}
@media (min-width: 900px) { .sheet-back { align-items: center; } .sheet { border-radius: var(--r-xl); max-height: 88vh; } }
.sheet-h { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px 20px; }
.sheet-h h2 { margin: 0; font-size: 19px; font-weight: 500; flex: 1; line-height: 1.25; }
.sheet-b { padding: 4px 20px 18px; overflow: auto; flex: 1; }
.sheet-f { padding: 12px 20px calc(14px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 var(--r-xl) var(--r-xl); }
@media (max-width: 899px) { .sheet-f { border-radius: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.group { margin-bottom: 18px; }
.group-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.group-h b { font-size: 16px; font-weight: 500; }
.group-h .need { font-size: 11.5px; font-weight: 600; color: var(--coral-ink); text-transform: uppercase; letter-spacing: .05em; }
.group-h .done { font-size: 12px; font-weight: 600; color: var(--green); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  min-height: 48px; padding: 8px 16px; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1);
  font-size: 15.5px; text-align: left; border: 1.5px solid transparent; line-height: 1.25;
}
.pill.on { border-color: var(--coral); background: var(--peach-3); color: var(--coral-ink); }
.pill.alt { border-style: dashed; border-color: var(--line-2); box-shadow: none; background: transparent; }
.pill.alt.on { border-style: solid; border-color: var(--coral); background: var(--peach-3); }
.pill small { display: block; font-size: 12px; color: var(--ink-3); }
.pill.out { opacity: .45; text-decoration: line-through; }

/* ============ 11. Teclados ============ */
.pad-display {
  background: var(--surface-hi); border-radius: var(--r-lg); padding: 14px 18px; text-align: right; font-size: 38px;
  font-weight: 450; min-height: 76px; box-shadow: var(--sh-1); letter-spacing: -.01em;
}
.pad-display.placeholder { color: var(--ink-4); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.keypad button { min-height: 62px; border-radius: var(--r-lg); background: var(--surface-hi); box-shadow: var(--sh-1); font-size: 24px; font-weight: 450; }
.keypad button:active { background: var(--bg-2); }
.keypad .enter { grid-column: 1 / -1; background: var(--coral); color: #fff; font-size: 18px; min-height: 64px; box-shadow: none; }
.pin-dots { display: flex; justify-content: center; gap: 16px; margin: 8px 0 4px; }
.pin-dots i { width: 16px; height: 16px; border-radius: 8px; border: 1.5px solid var(--ink-3); }
.pin-dots i.on { background: var(--ink); border-color: var(--ink); }
.pin-code { position: relative; display: block; }
.pin-code input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; }
.pin-code-slots { display: flex; justify-content: center; gap: 8px; width: max-content; max-width: 100%; margin-inline: auto; }
.pin-code-slot { flex: 1; min-width: 0; max-width: 42px; display: grid; place-items: center; width: 42px; height: 52px; border: 1px solid var(--ink-3); border-radius: 8px; background: var(--paper, #fff); color: var(--ink); }
.pin-code-slot.verification { background: #e4e8ee; border-color: #8190a3; }
.pin-code-slot.verification:nth-child(5) { margin-left: 8px; }
.pin-code:focus-within .pin-code-slots { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 8px; }
.pin-verification { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.pin-verification-title { font-size: 15px; font-weight: 600; }
.pin-verification-help { margin: 0; line-height: 1.45; }

/* ============ 12. Entrada ============ */
.login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { width: 100%; max-width: 440px; }
.login-box h1 { font-weight: 500; }
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.person {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px 12px; display: flex;
  flex-direction: column; align-items: center; gap: 8px; min-height: 120px;
}
.person .avatar { width: 52px; height: 52px; border-radius: 26px; font-size: 17px; }
.person b { font-size: 16px; font-weight: 450; text-align: center; }
.person span { font-size: 12.5px; color: var(--ink-3); }

/* ============ 13. Cobro ============ */
.pay-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .pay-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.big-total { font-size: 38px; font-weight: 450; letter-spacing: -.02em; line-height: 1.1; }
.methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.method { min-height: 56px; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); font-weight: 450; }
.method:active { background: var(--peach-3); }
.payrow { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.field-btn {
  flex: 1; min-height: 52px; border-radius: 10px; background: var(--bg); display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; padding: 4px 12px; text-align: left;
}
.field-btn small { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.field-btn b { font-size: 17px; font-weight: 450; }
.change { background: var(--green-soft); color: var(--green); border-radius: var(--r); padding: 12px 14px; font-weight: 500; font-size: 19px; }
.remaining { font-size: 18px; font-weight: 500; }
.remaining.due { color: var(--coral-ink); }
.remaining.okk { color: var(--green); }
.done-screen { text-align: center; padding: 40px 16px; }
.done-screen h1 { font-weight: 500; }
.done-screen .check { width: 84px; height: 84px; border-radius: 42px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; margin: 0 auto 16px; }
/* Cobro por partes (12/10): elegir unidades por producto con controles grandes para caja con prisa. */
.pay-mode { margin: 0 0 14px; }
.pay-mode button { min-height: 52px; font-size: 16px; font-weight: 500; }
.part-paid { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.part-paid-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border-radius: var(--r);
  background: var(--green-soft); color: var(--green); font-weight: 500; }
.part-paid-row > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.part-paid-row b { font-size: 17px; font-weight: 600; }
.part-paid-row .small { grid-column: 1 / -1; color: var(--ink-2); }
.part-head { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.part-lines { display: flex; flex-direction: column; gap: 8px; }
.part-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name step" "name amt";
  gap: 4px 12px; align-items: center; padding: 10px 10px 10px 12px; border-radius: var(--r); background: var(--bg); border: 2px solid transparent; }
.part-line.on { background: var(--peach-3); border-color: var(--coral); }
.part-name { grid-area: name; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 52px;
  justify-content: center; min-width: 0; }
.part-name b { font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.part-name .s { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.part-step { grid-area: step; display: inline-flex; align-items: center; background: var(--surface); border-radius: 12px; box-shadow: var(--sh-1); }
.part-step button { width: 52px; height: 52px; font-size: 26px; font-weight: 500; color: var(--ink); border-radius: 12px; }
.part-step button:disabled { color: var(--ink-4); }
.part-step button:not(:disabled):active { background: var(--peach-3); }
.part-step span { min-width: 34px; text-align: center; font-size: 22px; font-weight: 600; }
.part-amt { grid-area: amt; justify-self: end; font-size: 17px; font-weight: 600; min-height: 22px; }
.part-sum { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.part-sum .row:first-child { font-size: 20px; font-weight: 600; }
.part-sum .row:first-child b { font-size: 26px; font-weight: 600; }
.part-left { font-size: 18px; margin: 0 0 16px; }
.done-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.done-actions .btn { min-width: 280px; max-width: 100%; justify-content: center; }
/* Imprimir factura opcional (12/10): interruptor junto al botón de cobrar y factura pendiente. */
.print-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0 0 8px; padding: 8px 12px 8px 16px;
  border-radius: var(--r); background: var(--surface); border: 2px solid var(--line-2); text-align: left; color: var(--ink); }
.print-choice:not(.on) { border-color: var(--warn); }
.print-choice .pc-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.print-choice .pc-text b { font-size: 17px; font-weight: 600; }
.print-choice .pc-text .small { color: var(--ink-2); line-height: 1.3; }
.print-choice .toggle { display: inline-block; }
@media (max-width: 999px) { .content.pad-bottom:has(.print-choice) { padding-bottom: calc(190px + var(--safe-b)); } }
.receipt-status { font-size: 17px; margin: 0 0 16px; color: var(--ink-2); }
.receipt-status.off { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink); }
.receipt-status.off p { margin: 0; font-weight: 600; }
.receipt-status.off .btn { min-width: 280px; max-width: 100%; justify-content: center; }
.receipt-sent { font-weight: 600; color: var(--green); }
.part-print { grid-column: 1 / -1; margin-top: 4px; }
.receipt-unprinted .gline { padding: 8px 14px 12px; }

/* ============ 14. Avisos ============ */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + var(--safe-b)); z-index: 80; background: var(--dark);
  color: #fff; padding: 12px 18px; border-radius: var(--r); font-weight: 450; box-shadow: var(--sh-pop); max-width: calc(100% - 32px);
  animation: toast-up .2s ease;
}
/* Sube sin perder el centrado (con «up» el aviso aparecía corrido a la derecha mientras subía). */
@keyframes toast-up { from { transform: translate(-50%, 40px); opacity: .6; } to { transform: translate(-50%, 0); opacity: 1; } }
.toast.error { background: var(--warn); }
.toast.has-action { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 18px; width: max-content; }
.toast.has-action > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.toast-action { min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--peach-2, #FFE6EB); font-weight: 600; white-space: nowrap; }
.toast-action:active { background: rgba(255, 255, 255, .12); }
/* «Agregar nota» debajo del aviso: naranja con letra negra (J, 12/10). Ancho fijo para que no
   crezca más de lo necesario sobre la carta. */
.toast.has-below { flex-wrap: wrap; gap: 4px 12px; padding: 4px 4px 4px 18px; width: min(420px, calc(100% - 32px)); }
.toast.has-below > span { flex: 1; }
.toast-note { flex: 1 0 calc(100% + 14px); min-height: 48px; margin: 0 0 0 -14px; border-radius: 10px; background: #FFD6DE; color: #000;
  font-size: 17px; font-weight: 700; }
.toast-note:active { background: #FFA3B5; }
/* Elegir distinto para cada unidad (2.ª ronda, 12/10): una tarjeta por unidad. */
.per-unit-ask { margin: 14px 0 4px; display: grid; gap: 6px; }
.per-unit-ask .btn { min-height: 52px; font-size: 17px; }
.per-unit { margin: 14px 0 4px; display: grid; gap: 12px; }
.per-unit-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; font-size: 16px; }
.unit-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface); }
.unit-card-h { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.note-scope { margin: 16px 0 0; }
.note-scope > b { display: block; margin-bottom: 8px; font-size: 15px; }
.note-scope .packing-segments button { min-height: 52px; font-size: 17px; }
.note-scope .packing-hint { font-size: 14px; }
.note-sheet-mods { margin: -4px 0 12px; }
@media (max-width: 899px) { .toast { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); } }
.trial-banner { background: var(--dark); color: #fff; padding: 8px 16px; font-weight: 700; font-size: 14px; text-align: center; letter-spacing: .01em; }
.banner { background: var(--warn-soft); color: var(--warn); padding: 10px 16px; font-weight: 500; font-size: 14px; text-align: center; }
/* Caja cerrada (30/09): un solo aviso en todo el POS; la carta se puede recorrer, no marchar. */
.cash-banner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 16px; font-size:16px; font-weight:600; line-height:1.35; }
.cash-banner a { display:inline-flex; align-items:center; min-height:44px; color:inherit; font-weight:700; text-underline-offset:3px; }
.send-note { margin:0 0 8px; font-size:15px; font-weight:600; color:var(--warn); text-align:center; }
.cloud { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.cloud i { width: 8px; height: 8px; border-radius: 4px; background: var(--live); }
.cloud.pending i { background: var(--amber); }
.cloud.off i { background: var(--ink-4); }
pre.ticket { background: #fff; font: 13px/1.35 ui-monospace, Menlo, Consolas, monospace; padding: 14px; border-radius: var(--r); overflow-x: auto; margin: 0; box-shadow: var(--sh-1); }
.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
label.f input, label.f select, label.f textarea { font-size: 16px; color: var(--ink); }
.pair-code { font-size: 52px; font-weight: 450; letter-spacing: .12em; text-align: center; padding: 12px; }
/* Carta (José, 13/10): filas compactas. Nombre arriba; precio, destino de la comanda y detalle
   debajo (celular) o en columnas (pantallas anchas); a la derecha, disponibilidad y editar. */
.cat-row { display: grid; align-items: center; column-gap: 10px; row-gap: 2px; padding: 5px 2px; min-height: 52px;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "name name name avail edit" "price dest meta avail edit"; }
.cat-name { grid-area: name; font-size: 16px; font-weight: 600; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.cat-price { grid-area: price; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cat-dest { grid-area: dest; justify-self: start; font-size: 12.5px; font-weight: 500; line-height: 1; padding: 4px 8px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.cat-dest.dest-kitchen { background: var(--peach-3); color: var(--coral-ink); }
.cat-dest.dest-bar { background: var(--green-soft); color: var(--green); }
.cat-meta { grid-area: meta; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-avail { grid-area: avail; }
.cat-edit { grid-area: edit; }
.cat-state { min-width: 76px; text-align: center; color: var(--ink-3); }
.cat-row.archived .cat-name { text-decoration: line-through; color: var(--ink-3); }
.cat-row.archived .cat-price, .cat-row.draft .cat-price { color: var(--ink-3); }
.cat-row.sold .cat-name, .cat-row.sold .cat-price { color: var(--ink-3); }
@media (max-width: 520px) { .cat-meta { display: none; } }
@media (min-width: 760px) {
  .cat-row { column-gap: 14px; grid-template-columns: minmax(0, 1fr) 128px 112px auto auto;
    grid-template-areas: "name price dest avail edit" "meta price dest avail edit"; }
  .cat-price { text-align: right; }
}
/* Disponibilidad: encendido (verde) = Disponible; apagado = Agotado, con el rótulo debajo. */
.avail { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 76px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer; }
.avail-track { position: relative; width: 46px; height: 26px; border-radius: 13px; background: var(--line-2); transition: background .15s; }
.avail-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .15s; }
.avail.on .avail-track { background: var(--green); }
.avail.on .avail-track::after { left: 23px; }
.avail-lbl { font-size: 12.5px; font-weight: 600; line-height: 1; }
.avail.on .avail-lbl { color: var(--green); }
.avail.off .avail-lbl { color: var(--warn); }

/* ============ 15. Visibilidad por tamaño ============ */
@media (min-width: 1000px) { .only-mobile, .mobile-only { display: none !important; } }
@media (max-width: 999px) { .desktop-only, .hide-on-mobile { display: none !important; } }

/* ============ 17. Catálogo vivo (kit.html) ============ */
.kit { max-width: 1320px; margin: 0 auto; padding: 28px 20px 80px; }
.kit h1 { font-weight: 500; font-size: 26px; margin: 0 0 4px; }
.kit h2 { font-weight: 500; font-size: 18px; margin: 40px 0 14px; display: flex; align-items: baseline; gap: 10px; }
.kit h2 small { color: var(--ink-3); font-size: 13px; font-weight: 400; }
.kit-board { background: #E6E8EA; border-radius: 24px; padding: 28px; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.kit-board > div { display: flex; flex-direction: column; gap: 18px; }
.kit-frame { border-radius: 24px; background: var(--bg); box-shadow: var(--sh-pop); overflow: hidden; border: 10px solid #101820; }
.kit-frame .shell { min-height: 0; }
.kit-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kit-sw { border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--sh-1); font-size: 13px; }
.kit-sw i { display: block; height: 64px; }
.kit-sw div { padding: 8px 10px; display: flex; flex-direction: column; }
.kit-sw code { color: var(--ink-3); font-size: 12px; }

/* Confirmación del pedido (celular) */
.review { display: flex; flex-direction: column; }
.rline { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.rline:last-child { border-bottom: 0; }
.rline .r1 { display: flex; gap: 10px; align-items: baseline; }
.rline .r1 b { font-weight: 500; font-size: 16.5px; }
.rline .r2 { display: flex; align-items: center; gap: 8px; }
.rline .rline-units { min-height: 44px; font-size: 15px; }
.rline .mods { margin: 0; }
.danger-text { color: var(--warn); }

/* Por enviar: editar o quitar cada línea antes de enviar */
.line-acts { display: flex; gap: 4px; margin: 4px -8px -4px; }
.line-acts .btn { min-height: 36px; padding: 0 8px; font-size: 13.5px; }
@media (pointer: coarse) { .line-acts .btn { min-height: 44px; } }

/* Franja ancla de secciones + botón del rayo (modo rápido) */
.anchor-bar {
  position: sticky; top: calc(var(--top-h) + 61px); z-index: 15; display: flex; align-items: center; gap: 8px;
  margin: 0 -12px 12px; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--line);
}
@media (min-width: 1000px) { .anchor-bar { margin: 0 0 12px; padding: 8px 0; } }
.anchor-scroll {
  flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-right: 28px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.anchor-scroll::-webkit-scrollbar { display: none; }
.anchor-chip {
  --cat: var(--c-slate); flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 10px; white-space: nowrap;
  background: var(--cat); color: #fff; font-size: 15.5px; font-weight: 500;
}
.anchor-chip:active { filter: brightness(.92); }
.anchor-grid {
  flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px;
  color: var(--dark); background: transparent;
}
.anchor-grid:active { background: var(--bg-2); }
.cnav-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; min-height: 48px; }
.cnav-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cnav-tiles .cat-tile { min-height: 84px; justify-content: center; }
.cnav-tiles .cat-tile .e { display: none; }
.cnav-tiles .cat-tile .t { display: block; font-size: 19px; font-weight: 500; line-height: 1.15; }
@media (max-width: 999px) {
  .cnav-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnav-tiles .cat-tile { min-height: 76px; }
  .cnav-tiles .cat-tile .t { font-size: 17px; }
}

/* Ventana centrada (carta paso a paso) */
.sheet-back.center { align-items: center; padding: 16px; }
.sheet-back.center .sheet { border-radius: var(--r-xl); max-height: 82vh; max-height: 82dvh; animation: pop .16s ease-out; }
.sheet-back.center .sheet-f { border-radius: 0 0 var(--r-xl) var(--r-xl); }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }

/* Página del producto (J, 30/09): secciones por quién usa la información, (i) por concepto y
   espacios reservados para lo que aún no se guarda. Una sección a la vista, sin saltos. */
.cat-open { cursor: pointer; }
.ptop { gap: 12px; flex-wrap: wrap; }
.ptop-t h1 { font-size: 20px; }
.ptop .sub { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 2px; }
.pcat { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink-2); }
.pcat::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--cat); }
.pcat.none::before { background: var(--ink-4); }
.ptop-so { gap: 8px; }
.ptop-del { flex: 0 0 auto; }
.pwrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: 24px; }
.pnav { position: sticky; top: calc(var(--top-h) + 90px); display: flex; flex-direction: column; gap: 4px; }
.pnav-b { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 52px; padding: 8px 14px;
  border-radius: var(--r); text-align: left; color: var(--ink-2); }
.pnav-b b { font-weight: 500; font-size: 15.5px; }
.pnav-b span { font-size: 12px; color: var(--ink-3); }
.pnav-b:hover { background: var(--bg-2); }
.pnav-b.on { background: var(--surface-hi); color: var(--ink); box-shadow: var(--sh-1); }
.pnav-b i { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 4px; }
.pnav-b i.bad { background: var(--warn); }
.pnav-b i.todo { background: var(--amber); }
.pbody { min-width: 0; }
.psec { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 18px 20px 22px; }
.psec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.psec-h h2 { font-size: 18px; font-weight: 500; margin: 0; }
.psec-bad { color: var(--warn); font-weight: 500; margin: -4px 0 12px; }
.psub { display: flex; align-items: center; margin: 22px 0 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.lbl { display: inline-flex; align-items: center; gap: 2px; }
.pgrid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; align-items: start; }
.ppeek { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.info-card .card { background: var(--bg); border-radius: var(--r-lg); padding: 14px 16px; border: 1px solid var(--line); }
.info-card .kicker { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--coral-ink); }
.info-card .row b { font-size: 16px; font-weight: 500; }
.info-card .desc { font-size: 15.5px; line-height: 1.45; margin: 8px 0 0; }
.info-card .opts-list { color: var(--ink-3); font-size: 14px; margin-top: 6px; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 22px; }
.slot { border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: 12px 14px; }
.slot p { margin: 6px 0 0; }
/* Foto (fase 1, 30/09): ya no es un espacio «Por habilitar» — borde sólido, no punteado. */
.photo-slot { border-style: solid; border-color: var(--line); }
.photo-box { margin-top: 8px; }
.photo-preview { width: 160px; height: 120px; border-radius: var(--r); object-fit: cover; background: var(--bg); display: block; }
.photo-empty { width: 160px; height: 120px; border-radius: var(--r); background: var(--bg); display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; }
/* Burbuja (i) del mesero: la foto va arriba, con tamaño fijo para no mover el texto al cargar. */
.info-photo, .info-card .info-photo { width: 160px; height: 120px; border-radius: var(--r); object-fit: cover; display: block; margin-bottom: 10px; background: var(--bg); }
.pfacts { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); }
.pfacts > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
.pfacts > div + div { border-top: 1px solid var(--line); }
.pgroup { background: var(--bg); border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px; }
.pgroup-h { display: flex; gap: 10px; align-items: flex-end; }
.pnum { width: 96px; flex: 0 0 96px; }
.pmoney { width: 150px; flex: 0 0 150px; }
.popt-head, .popt { display: grid; grid-template-columns: minmax(0, 1fr) 120px 190px 44px; gap: 8px; align-items: center; }
.popt-head { margin-top: 12px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.popt { margin-top: 6px; }
.popt-head.pingr, .popt.pingr { grid-template-columns: minmax(0, 1fr) 110px 130px 110px 44px; }
.popt-n { font-weight: 500; }
.pcomp { display: flex; gap: 10px; align-items: flex-end; margin: 8px 0; flex-wrap: wrap; }
.pcomp > select { flex: 0 1 200px; }
.psec .form-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pval { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 150px; gap: 8px; align-items: center; margin-top: 6px; }
.pval-h { margin-top: 12px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
/* Opción de un grupo con «Valor incluido» (punto 12, 12/10): qué falta y dónde. */
.popt-warn { grid-column: 1 / -1; margin: 0; color: var(--warn); font-weight: 500; }
.pval-area { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r); background: var(--amber-soft); }
.pval-area select { flex: 0 1 220px; }
.pval input.bad { border-color: var(--warn); }
/* Preparación → Comanda de la estación (12/10/2026): lo que sale, en el orden de impresión. */
.cmd { margin-top: 18px; }
.cmd-h { display: flex; align-items: center; gap: 4px; }
.cmd-h h3 { font-size: 16.5px; font-weight: 600; margin: 0; }
.cmd-h2 { margin-top: 22px; }
.cmd-lead { margin: 4px 0 12px; }
.cmd-steps { list-style: none; counter-reset: cmd; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cmd-step { counter-increment: cmd; position: relative; background: var(--bg); border-radius: var(--r); padding: 12px 14px 12px 46px; min-width: 0; }
.cmd-step::before { content: counter(cmd); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 12px;
  background: var(--dark); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.cmd-step-h { display: flex; align-items: center; gap: 6px; min-height: 26px; flex-wrap: wrap; }
.cmd-step-h b { font-weight: 600; flex: 1 1 auto; }
.cmd-step p { margin: 6px 0 0; }
.cmd-choices { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cmd-choices li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 8px; font-size: 15px; }
.cmd-choice-g { font-weight: 500; color: var(--ink-2); min-width: 0; }
.cmd-choice-g::after { content: ":"; }
.cmd-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cmd-row { display: grid; grid-template-columns: 74px 64px minmax(0, 1fr) 44px; gap: 8px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px; }
.cmd-row.include { border-color: var(--peach); background: var(--peach-3); }
.cmd-row.other { grid-template-columns: 64px minmax(0, 1fr) 44px; margin-top: 6px; }
.cmd-move { display: flex; flex-direction: row; gap: 2px; align-self: center; }
.cmd-move .icon-btn { width: 36px; height: 40px; border-radius: 8px; }
.cmd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; align-items: start; }
.cmd-side { min-width: 0; }
@media (min-width: 1180px) {
  .cmd-layout { grid-template-columns: minmax(0, 1fr) calc(42ch + 40px); }
  .cmd-side { position: sticky; top: calc(var(--top-h) + 100px); margin-top: 18px; }
  .cmd-side .psub { margin-top: 0; }
}
.cmd-move .icon-btn:disabled { opacity: .25; }
.cmd-qty { width: 100%; min-width: 0; text-align: center; }
.cmd-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmd-main > input, .cmd-main > select { width: 100%; min-width: 0; }
.cmd-other { flex-direction: row; gap: 8px; }
.cmd-other > select { flex: 0 0 150px; width: 150px; }
.cmd-inc { color: var(--coral-ink); }
.cmd-stale { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--amber-soft); color: var(--ink); }
.linkish { color: inherit; text-decoration: underline; padding: 0; min-height: 0; background: none; font: inherit; }
.cmd-add { gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cmd-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cmd-preview p { margin: 0; }
.cmd-paper { margin: 0; padding: 14px 12px; background: #fff; border: 1px solid var(--line-2); border-radius: 6px; box-shadow: var(--sh-1);
  font: 13px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; width: calc(42ch + 26px); max-width: 100%; overflow-x: auto; color: #111; }
.cmd-paper-img { width: 288px; max-width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; image-rendering: pixelated; }
@media (max-width: 899px) {
  .cmd-step { padding: 10px 8px 12px; }
  .cmd-step::before { display: none; }
  .cmd-step-h b::before { content: counter(cmd) ". "; }
  .cmd-row { grid-template-columns: 30px 50px minmax(0, 1fr) 36px; gap: 5px; padding: 5px; }
  .cmd-row .icon-btn { width: 36px; }
  .cmd-move { flex-direction: column; align-self: start; }
  .cmd-move .icon-btn { width: 30px; height: 24px; }
  .cmd-qty { padding-left: 4px; padding-right: 4px; }
  .cmd-row.other { grid-template-columns: 50px minmax(0, 1fr) 36px; }
  .cmd-other { flex-direction: column; }
  .cmd-other > select { flex: 1 1 auto; width: 100%; }
  .cmd-choices li { grid-template-columns: minmax(0, 1fr); }
  .cmd-paper { font-size: 11.5px; padding: 10px 8px; width: calc(42ch + 18px); }
}
.phist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.phist li { padding: 12px 2px; display: flex; flex-direction: column; gap: 3px; }
.phist li + li { border-top: 1px solid var(--line); }
.pbar { position: sticky; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 10px; padding: 12px 20px calc(12px + var(--safe-b));
  background: var(--surface-hi); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(0, 0, 0, .05); }
.pbar .btn.primary { min-width: 150px; }
.pbar-reason { flex: 0 1 320px; min-height: 44px; }
.concept { position: relative; display: inline-flex; }
.concept-i { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 16px; color: var(--ink-3); }
.concept-i:hover, .concept-i.on { color: var(--coral-ink); background: var(--peach-3); }
.concept-pop { position: absolute; top: 34px; left: -8px; z-index: 40; width: min(320px, 80vw); display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; background: var(--surface-hi); border-radius: var(--r); box-shadow: var(--sh-2); font-size: 14px; line-height: 1.4;
  font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0; white-space: normal; }
.concept-pop b { font-weight: 600; }
@media (max-width: 899px) {
  .pwrap { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .ptop { position: static; display: grid; grid-template-columns: auto 1fr auto; row-gap: 6px; }
  .ptop-t { grid-column: 1 / -1; grid-row: 2; }
  .ptop-so { grid-column: 3; grid-row: 1; }
  .ptop-del { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .pval { grid-template-columns: minmax(0, 1fr) 120px; }
  .pval .popt-n { grid-column: 1 / -1; }
  .pval-h { display: none; }
  .pnav { top: var(--top-h); z-index: 18; flex-direction: row; overflow-x: auto; background: var(--bg); padding: 4px 0; scrollbar-width: none; }
  .pnav-b { flex: 0 0 auto; min-height: 48px; padding: 6px 14px 6px 12px; }
  .pnav-b i { top: 8px; right: 4px; }
  .psec { padding: 16px 14px 20px; }
  .pgrid2 { grid-template-columns: minmax(0, 1fr); }
  .popt-head { display: none; }
  .popt { grid-template-columns: minmax(0, 1fr) 96px 44px; }
  .popt select { grid-column: 1 / 3; grid-row: 2; }
  .popt.pingr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .popt.pingr > span { grid-column: 1 / 3; }
  .popt.pingr select { grid-column: auto; grid-row: auto; }
  .pgroup-h { flex-wrap: wrap; }
  .pgroup-h .grow { flex: 1 1 100%; }
  .pnum { width: auto; flex: 1 1 80px; }
  .pmoney { width: auto; flex: 1 1 120px; }
  .pbar { flex-wrap: wrap; padding: 10px 12px calc(10px + var(--safe-b)); }
  .pbar-reason { flex: 1 1 100%; order: -1; }
  .pbar .btn.primary { flex: 1 1 auto; }
}

/* Gestión: tablero de mini apps de oficina (web/gestion/). */
.gapps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.gapp { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); text-decoration: none; color: var(--ink); min-height: 120px; }
.gapp:hover { background: var(--surface-hi); }
.gapp p { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.4; }

/* Gestión · Ventas (web/gestion/ventas.js). Prefijo .gv-; barras en CSS puro. */
.gv { display: flex; flex-direction: column; gap: 16px; }
.gv-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gv-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gv-dates { display: flex; flex-wrap: wrap; gap: 10px; }
.gv-dates label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.gv-cov { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; color: var(--ink-2); }
.gv-cov > span { display: inline-flex; align-items: center; }
.gv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gv-tile { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gv-tile .k { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; }
.gv-tile b { font-size: 22px; font-weight: 500; overflow-wrap: anywhere; }
.gv-check { background: var(--bg-2); border-radius: var(--r); padding: 4px 14px; }
.gv-check p { margin: 10px 0; font-size: 14.5px; line-height: 1.4; }
.gv-check .tag { margin-right: 6px; }
.gv-sec { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px 6px; min-width: 0; }
.gv-h { display: flex; align-items: center; font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.gv-list { list-style: none; margin: 0; padding: 0; }
.gv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; padding: 9px 0; border-top: 1px dotted var(--dots); }
.gv-row:first-child { border-top: 0; }
.gv-n { overflow-wrap: anywhere; }
.gv-v { font-weight: 500; text-align: right; }
.gv-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.gv-bar i { display: block; height: 100%; background: var(--coral); border-radius: 3px; }
.gv-sub { grid-column: 1 / -1; overflow-wrap: anywhere; }
.gv-row.tot { border-top: 1px solid var(--line-2); font-weight: 600; }
.gv-origin { padding-bottom: 12px; }
.gv-o { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px dotted var(--dots); overflow-wrap: anywhere; }
.gv-o:first-child { border-top: 0; }
@media (min-width: 900px) {
  .gv-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .gv-cov, .gv-tiles, .gv-check, .gv-body > .empty, .gv-origin { grid-column: 1 / -1; }
}
/* Gestión · Estadísticas (web/gestion/estadisticas.js). Prefijo .st-; pestañas con .gi-tabs.
   Gráficos en SVG/CSS propios; los importes y porcentajes van escritos, el color solo acompaña. */
.st-sum { display: flex; flex-direction: column; gap: 10px; }
.st-check { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-sec { padding-bottom: 12px; }
.st-sec > p { margin: 10px 0 0; }
.st-row.has-q { grid-template-columns: auto minmax(0, 1fr) auto; }
.st-row > .st-doc, .st-row > .st-vars { grid-column: 1 / -1; }
.st-q { min-width: 44px; text-align: right; font-size: 17px; font-weight: 600; }
.st-open { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; column-gap: 12px;
  width: 100%; min-height: 44px; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.st-row.has-q .st-open { grid-template-columns: auto minmax(0, 1fr) auto 20px; }
.st-row.has-lead .st-open { grid-template-columns: 64px minmax(0, 1fr) auto 20px; }
.st-row.has-q .gv-sub { padding-left: 56px; }
.st-row.has-lead .gv-sub { padding-left: 76px; }
.st-when { display: flex; flex-direction: column; line-height: 1.15; }
.st-when b { font-size: 17px; }
.st-search { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; margin-bottom: 8px; border-radius: var(--r); background: var(--surface-hi); box-shadow: var(--sh-2); color: var(--ink-2); flex: 1 1 260px; min-width: 0; }
.st-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.st-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.st-tools .st-search { margin-bottom: 0; }
.st-order { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.st-order select { min-height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-hi); font: inherit; font-size: 15px; padding: 0 10px; color: var(--ink); }
.st-head, .st-dhead { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; padding: 4px 0; }
.st-head.no-q { grid-template-columns: minmax(0, 1fr) auto; }
.st-head span:first-child { text-align: right; }
.st-head.no-q span:first-child { text-align: left; }
.st-dhead { grid-template-columns: 64px minmax(0, 1fr) auto; }
.st-dhead span:first-child { text-align: left; }
.st-doc, .st-vars { margin: 6px 0 4px; padding: 10px 12px; border-radius: var(--r); background: var(--bg-2); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-doc p { margin: 0; overflow-wrap: anywhere; }
.st-doc .btn { align-self: flex-start; }
.st-lines { list-style: none; margin: 0; padding: 0; }
.st-lines li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px dotted var(--dots); }
.st-lines li:first-child { border-top: 0; }
.st-lines .tag { vertical-align: middle; }
.st-pct { font-size: 14px; font-weight: 500; }
.st-gname { color: var(--ink-2); letter-spacing: .04em; }
.st-group + .st-group { margin-top: 6px; }
.st-subtotal { margin: 2px 0 0; text-align: right; }
.st-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; flex: 0 0 auto; }
.st-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-hbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto 60px; column-gap: 10px; row-gap: 4px; align-items: baseline; }
.st-hb-n { overflow-wrap: anywhere; display: flex; align-items: baseline; }
.st-hb-p { text-align: right; color: var(--ink-2); font-size: 14px; }
.st-hb-bar { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--bg-2); overflow: hidden; }
.st-hb-bar i { display: block; height: 100%; background: var(--st-terra); border-radius: 5px; }
/* Lista ordenada sin barras (Productos con más ingreso, José 16/10): filas más juntas y numeradas. */
.st-hbars.st-plain { gap: 6px; }
.st-hbars.st-plain li { padding: 4px 0; border-bottom: 1px dotted var(--dots); }
.st-hbars.st-plain li:last-child { border-bottom: 0; }
.st-hb-i { color: var(--ink-2); min-width: 1.8em; }
/* Dona y leyenda (José, 14/10): si la tarjeta no da para las dos, la leyenda baja; nombre, importe y
   porcentaje en columnas propias que nunca se pisan. */
.st-donut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; }
.st-donut svg { width: 150px; height: 150px; flex: 0 0 auto; }
.st-donut-k { font-size: 11px; fill: var(--ink-2); }
.st-donut-v { font-size: 15px; font-weight: 600; fill: var(--ink); }
.st-legend { list-style: none; margin: 0; padding: 0; flex: 0 1 auto; display: grid; grid-template-columns: auto max-content max-content max-content;
  column-gap: 12px; row-gap: 8px; align-items: center; min-width: 0; }
.st-legend li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.st-legend li > span:last-child { text-align: right; font-size: 14px; }
.st-legend li.zero { display: block; color: var(--ink-2); }
.st-cols { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-colrow { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; height: 190px; align-items: stretch; }
.st-colc { display: grid; grid-template-rows: 20px minmax(0, 1fr) 20px; min-width: 0; text-align: center; }
.st-col-v { font-size: 12px; font-weight: 600; white-space: nowrap; align-self: end; overflow: visible; }
.st-col-b { display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line-2); }
.st-col-b i { display: block; width: min(100%, 44px); min-height: 0; background: var(--st-terra); border-radius: 3px 3px 0 0; }
.st-col-k { font-size: 12px; color: var(--ink-2); white-space: nowrap; align-self: center; }
.st-col-unit { margin: 0; }
.st-cols > .btn { align-self: flex-start; }
.st-table { width: 100%; border-collapse: collapse; margin: 4px 0; }
.st-table caption { text-align: left; color: var(--ink-2); padding: 4px 0; }
.st-table th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line-2); }
.st-table td { padding: 6px 8px 6px 0; border-bottom: 1px dotted var(--dots); }
.st-table th:not(:first-child), .st-table td.num { text-align: right; }
.st-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; }
.st-pager .seg button { min-height: 40px; padding: 0 12px; }
.st-pages { display: flex; align-items: center; gap: 8px; }
.st-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 16px; margin: 0; }
.st-kv dt { font-size: 13px; color: var(--ink-2); }
.st-kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.st-h3 { font-size: 14px; font-weight: 600; margin: 6px 0 0; }
.st-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-board li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 0; border-top: 1px dotted var(--dots); }
.st-board li:first-child { border-top: 0; }
.st-pos { width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; font-weight: 700; background: var(--bg-2); color: var(--ink); }
.st-pos.p1 { background: var(--dark); color: #fff; }
.st-pos.p2, .st-pos.p3 { background: var(--line-2); }
.st-bd { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.st-bd-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 16px; }
.st-total { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-2); padding-top: 10px; margin: 6px 0 0; }
.st-lead { margin: 0 0 6px; }
.st-by button { min-height: 44px; }
.st-res { display: flex; flex-direction: column; gap: 16px; }
.st-chart { padding-bottom: 12px; }
.st-chart > p { margin: 8px 0 0; }
.st-h-table { margin-top: 16px; }
/* Resumen en bento (v4): filas alineadas sin huecos. Las tarjetas de una misma fila se estiran a
   la misma altura; lo que crece (áreas desplegables) va solo en su fila, a todo el ancho. */
@media (min-width: 900px) {
  .st-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;
    grid-template-areas: "sum sum" "chart chart" "prod prod" "med med" "wait wait" "areas areas"; }
  .st-res > .empty { grid-column: 1 / -1; }
  .st-b-sum { grid-area: sum; } .st-b-chart { grid-area: chart; } .st-b-prod { grid-area: prod; }
  .st-b-med { grid-area: med; } .st-b-wait { grid-area: wait; } .st-b-areas { grid-area: areas; }
  .st-b-med { display: flex; flex-direction: column; justify-content: flex-start; }
  .st-b-wait .st-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
  .st-b-wait .st-top li, .st-b-wait .st-top li:first-child { border-top: 0; }
  .st-b-prod, .st-b-wait { display: flex; flex-direction: column; }
  .st-b-prod > .btn, .st-b-wait > .btn { align-self: flex-start; margin-top: auto; }
}
@media (min-width: 1200px) {
  .st-res { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "sum sum sum" "chart chart chart" "prod prod med" "wait wait wait" "areas areas areas"; }
}
.st-metrics { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); }
.st-metrics b { color: var(--ink); }

.st-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); justify-content: center; gap: 8px 24px; }
.st-rooms .st-plan { max-width: none; }
.st-heat-tools { justify-content: space-between; }
.st-heat-tools .st-legend-h { margin: 0; }
.st-time { background: var(--surface-hi); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; margin: 0 auto 12px; max-width: 760px; }
.st-time-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.st-slider { width: 100%; height: 44px; accent-color: var(--st-terra); margin: 4px 0 0; }
.st-time-k { display: flex; justify-content: space-between; }
.st-more summary { cursor: pointer; color: var(--ink-2); font-size: 14px; min-height: 36px; display: flex; align-items: center; }
/* Estadísticas v3 (14/10): paleta FANZINE, tops, áreas desplegables, documentos en tabla/tarjetas,
   mapa de calor de mesas y caja por bloques. El color acompaña a cifras escritas. */
/* Estaciones: terra = Crispetas (rojo); sage = Cocina (azul);
   plum = Heladería (verde petróleo); gold = Bebidas (violeta).
   Los cuatro colores sólidos admiten texto blanco con contraste AA. */
.st { --st-terra: #E4002B; --st-terra-soft: #FFD6DE; --st-sage: #005A9C; --st-sage-soft: #D8ECFA; --st-plum: #006B60;
  --st-gold: #7526A5; --st-slate: #525D67;
  --st-h1: #FFF2F5; --st-h2: #FFD6DE; --st-h3: #FFA3B5; --st-h4: #E4002B; --st-h5: #B00021; }
.st-top { list-style: none; margin: 0 0 10px; padding: 0; }
.st-top li { display: grid; grid-template-columns: 30px 48px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 9px 0; border-top: 1px dotted var(--dots); }
.st-top li:first-child { border-top: 0; }
.st-top li.no-q { grid-template-columns: 30px minmax(0, 1fr) auto; }
.st-rank { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--bg-2); }
.st-rank.p1 { background: var(--st-terra); color: #fff; }
.st-top-n { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; font-size: 16px; }
.st-top-v { display: flex; flex-direction: column; align-items: flex-end; }
.st-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.st-area { display: grid; grid-template-columns: minmax(0, 1fr) auto 60px 20px; column-gap: 10px; row-gap: 5px; align-items: baseline; width: 100%;
  min-height: 48px; padding: 8px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.st-area .st-hb-bar { grid-column: 1 / -1; }
.st-mtag { display: inline-flex; align-items: center; font-size: 13px; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--bg-2); white-space: nowrap; }
.st-mtag .st-sw { width: 8px; height: 8px; border-radius: 4px; margin-right: 5px; vertical-align: 0; }
.st-ctag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 1px 7px; border-radius: 6px; margin-left: 6px;
  background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.st-ctag.dine_in { background: #FFF2F5; color: #B00021; }
.st-ctag.counter { background: #E6E8EA; color: #34424F; }
.st-ctag.delivery { background: #E6E8EA; color: #34424F; }
.st-ctag.part { background: #E6E8EA; color: #34424F; }
.st-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.st-filter-k { color: var(--ink-2); margin-right: 4px; }
.st-chip { min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-hi); font: inherit; font-size: 14px;
  display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; cursor: pointer; }
.st-chip span { font-size: 12px; color: var(--ink-2); }
.st-chip.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.st-chip.on span { color: #ddd; }
/* Documentos: misma rejilla para encabezado y filas. */
.st-dt { display: flex; flex-direction: column; }
.st-dt-h, .st-dt-b { display: grid; grid-template-columns: 76px minmax(150px, 1.4fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(110px, 1.1fr) 120px 20px; column-gap: 14px; align-items: center; }
.st-dt-h { color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.st-dt-h .r, .st-tt .r, .st-mt .r { text-align: right; }
.st-dt-r { border-bottom: 1px solid var(--line); }
.st-dt-r.open { background: var(--surface-hi); }
.st-dt-b { width: 100%; min-height: 56px; padding: 8px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.st-dt-when { display: flex; flex-direction: column; line-height: 1.15; }
.st-dt-when b { font-size: 17px; }
.st-dt-when .small { color: var(--ink-2); }
.st-dt-doc { display: flex; flex-direction: column; min-width: 0; }
.st-dt-doc b { font-size: 16px; }
.st-place { font-size: 14px; color: var(--ink); }
.st-place .st-ctag:first-child { margin-left: 0; }
.st-dt-p { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.st-dt-k { display: none; }
.st-dt-m { display: flex; flex-wrap: wrap; gap: 4px; }
.st-dt-t { display: flex; flex-direction: column; align-items: flex-end; }
.st-dt-t b { font-size: 17px; }
.st-dt-t .small { color: var(--ink-2); }
.st-dt-r > .st-doc { margin: 0 0 10px; }
.st-dt-tot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 0 0; font-weight: 600; }
.st-dt-tot .small { grid-column: 1 / -1; text-align: right; font-weight: 400; }
@media (max-width: 899px) {
  .st-dt-h { display: none; }
  .st-dt-b { grid-template-columns: auto minmax(0, 1fr) auto 20px; grid-template-areas: "doc doc tot ic" "when m m m" "p1 p1 p1 p1" "p2 p2 p2 p2"; row-gap: 4px; column-gap: 10px; padding: 10px 0; }
  .st-dt-m { align-items: center; }
  .st-dt-doc { grid-area: doc; } .st-dt-t { grid-area: tot; } .st-dt-b > svg { grid-area: ic; align-self: start; }
  .st-dt-when { grid-area: when; flex-direction: row; gap: 8px; align-items: baseline; }
  .st-dt-when b { font-size: 15px; }
  .st-dt-m { grid-area: m; }
  .st-dt-p:nth-of-type(3) { grid-area: p1; } .st-dt-p:nth-of-type(4) { grid-area: p2; }
  .st-dt-k { display: inline; color: var(--ink-2); margin-right: 4px; }
}
/* Mesas: mapa de calor. */
.st-heat-k { margin: 0 0 6px; }
.st-legend-h { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-2); }
.st-legend-h li { display: inline-flex; align-items: center; gap: 6px; }
.st-hl { width: 16px; height: 16px; border-radius: 4px; display: inline-block; border: 1px solid var(--line-2); }
.st-hl.l0, .st-tile.l0 { background: var(--surface-hi); }
.st-hl.l1, .st-tile.l1 { background: var(--st-h1); } .st-hl.l2, .st-tile.l2 { background: var(--st-h2); }
.st-hl.l3, .st-tile.l3 { background: var(--st-h3); } .st-hl.l4, .st-tile.l4 { background: var(--st-h4); color: #fff; }
.st-hl.l5, .st-tile.l5 { background: var(--st-h5); color: #fff; }
.st-room { margin: 6px 0 14px; }
.st-plan { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.st-tile { min-height: 64px; border-radius: 12px; border: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font: inherit; color: var(--ink); cursor: pointer; padding: 4px; min-width: 0; }
.st-tile b { font-size: 17px; }
.st-tile span { font-size: 12px; font-weight: 600; white-space: nowrap; }
.st-tile.l0 span { color: var(--ink-3); font-weight: 400; }
.st-tile.on { outline: 3px solid var(--dark); outline-offset: 1px; }
.st-tt { display: flex; flex-direction: column; margin-bottom: 8px; }
.st-tt-h, .st-tt-r { display: grid; grid-template-columns: minmax(0, 1fr) 80px 90px 120px; column-gap: 10px; padding: 7px 0; align-items: center; }
.st-tt-h { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.st-tt-r { border-bottom: 1px dotted var(--dots); }
.st-tt-r.sub { background: var(--bg-2); padding-left: 8px; padding-right: 8px; font-weight: 500; border-radius: 6px; }
.st-tt-r.tot { border-top: 1px solid var(--line-2); font-weight: 600; }
.st-tt-room { padding: 10px 0 2px; color: var(--ink-2); letter-spacing: .04em; }
.st-short { display: none; }
@media (max-width: 600px) { .st-long { display: none; } .st-short { display: inline; } }
@media (max-width: 600px) { .st-tt-h, .st-tt-r { grid-template-columns: minmax(0, 1fr) 54px 44px 96px; column-gap: 6px; font-size: 14px; } }
/* Caja por bloques. */
.st-cajas { list-style: none; margin: 0; padding: 0; }
.st-cajas > li { border-bottom: 1px solid var(--line); }
.st-caja-h { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 20px; column-gap: 14px; align-items: center; width: 100%; min-height: 56px;
  padding: 8px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.st-caja-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-caja-id b { font-size: 17px; }
.st-caja-t { color: var(--ink-2); font-size: 14px; }
.st-caja-v { display: flex; flex-direction: column; align-items: flex-end; }
.st-caja-v b { font-size: 17px; }
.st-state { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.st-state.open, .st-state.ok { background: #E6E8EA; color: #34424F; }
.st-state.warn { background: #FFE6EB; color: #B00021; }
.st-state.amber { background: #E6E8EA; color: #34424F; }
.st-caja { padding: 4px 0 14px; display: flex; flex-direction: column; gap: 14px; }
.st-caja-meta { margin: 0; }
.st-block { display: flex; flex-direction: column; gap: 8px; }
.st-block .st-h3 { margin: 0; }
.st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.st-stats > div { background: var(--surface-hi); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.st-stats .k { font-size: 13px; color: var(--ink-2); }
.st-stats b { font-size: 20px; font-weight: 600; }
.st-stats .st-state { align-self: flex-start; margin-top: 2px; }
.st-mt { display: flex; flex-direction: column; }
.st-mt-h, .st-mt-r { display: grid; grid-template-columns: minmax(110px, 1fr) repeat(3, minmax(90px, 120px)); column-gap: 12px; padding: 8px 0; align-items: center; }
.st-mt-h.rep, .st-mt-r.rep { grid-template-columns: minmax(110px, 1fr) repeat(3, minmax(84px, 110px)) repeat(3, minmax(84px, 120px)); }
.st-mt-h { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.st-mt-r { border-bottom: 1px dotted var(--dots); }
.st-mt-r .st-state { margin-left: 4px; }
@media (max-width: 899px) {
  .st-mt-h { display: none; }
  .st-mt-r, .st-mt-r.rep { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; column-gap: 8px; padding: 10px 0; font-size: 14px; }
  .st-mt-r .st-state { margin-left: 0; white-space: normal; }
  .st-mt-r > span:first-child { grid-column: 1 / -1; }
  .st-mt-r > span[data-k] { text-align: left; }
  .st-mt-r > span[data-k]::before { content: attr(data-k); display: block; font-size: 12px; color: var(--ink-2); }
  .st-caja-h { grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "id v ic" "t v ic"; row-gap: 2px; }
  .st-caja-id { grid-area: id; } .st-caja-t { grid-area: t; } .st-caja-v { grid-area: v; } .st-caja-h > svg { grid-area: ic; }
}
@media (max-width: 600px) {
  .st-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .st-stats > div { padding: 8px; }
  .st-stats b { font-size: 15px; overflow-wrap: anywhere; }
  .st-stats .k { font-size: 12px; }
  .st-stats .small { font-size: 11px; line-height: 1.2; }
  .st-stats .st-state { white-space: normal; font-size: 11px; }
}
.st-secondary { border-top: 1px dotted var(--dots); padding-top: 10px; }
.st-secondary dd { font-weight: 400; }
/* Gestión · Inventarios (web/gestion/inventarios.js). Prefijo .gi- */
.gi { display: flex; flex-direction: column; gap: 14px; }
.gi-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.gi-flow ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.gi-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.gi-links .tag { height: auto; min-height: 24px; padding: 3px 9px; white-space: normal; }
.gi-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--surface-hi); border-radius: var(--r); padding: 4px; box-shadow: var(--sh-2); }
.gi-tab { flex: 1 1 auto; min-height: 44px; padding: 0 14px; border-radius: 9px; font-weight: 450; color: var(--ink-2); }
.gi-tab.on { background: var(--dark); color: #fff; }
.gi-sec { min-width: 0; }
.gi-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.gi-h h2 { margin: 0; font-size: 18px; font-weight: 500; }
.gi-total { margin: 0 0 4px; color: var(--ink-2); }
.gi-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.gi-row + .gi-row, .gi-mv + .gi-mv { border-top: 1px solid var(--line); }
.gi-main { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.gi-val { text-align: right; flex: 0 0 auto; max-width: 42%; overflow-wrap: anywhere; }
.gi-nocost { color: var(--ink-3); font-size: 13px; }
.gi-neg { color: var(--warn); }
.gi-warn { color: var(--warn); margin: 0; }
.gi-diff { margin: 0; color: var(--ink-2); }
.gi-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; margin-bottom: 8px; }
.gi-form .f, .gi-form select, .gi-form input { min-width: 0; width: 100%; }
.gi-form > p, .gi-form > .btn { grid-column: 1 / -1; }
.gi-form > .btn { justify-self: start; }
.gi-mv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; align-items: center; }
.gi-mv-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gi-q { text-align: right; }
.gi-mv-b { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.gi-why { flex: 1 1 100%; overflow-wrap: anywhere; }
.gi-embed { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.gi-embed .top { position: static; padding-left: 0; padding-right: 0; }
.gi-embed .content { padding-left: 0; padding-right: 0; }
@media (max-width: 640px) {
  .gi-flow, .gi-form { grid-template-columns: minmax(0, 1fr); }
  .gi-tab { padding: 0 8px; font-size: 14.5px; }
  .gi-row { flex-wrap: wrap; }
  .gi-val { max-width: none; }
}
/* Equipo y nómina (web/gestion/equipo.js). Sin desplazamiento horizontal a 390 px. */
.ge { display: flex; flex-direction: column; gap: 14px; }
.ge > * { min-width: 0; }
.ge-origin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg-2); }
.ge-origin ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.ge-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r); background: var(--surface-hi); box-shadow: var(--sh-2); }
.ge-tabs button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px; border-radius: 9px; font-weight: 450; color: var(--ink-2); }
.ge-tabs button.on { background: var(--dark); color: #fff; }
.ge-bar { gap: 8px; }
.ge-range { min-width: 0; text-align: center; white-space: nowrap; }
.ge-note { margin: 6px 2px; }
.ge-list { padding: 4px 16px; }
.ge-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ge-row:last-child { border-bottom: 0; }
.ge-main { min-width: 0; overflow-wrap: anywhere; }
.ge-person-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
@media (max-width: 600px) {
  .ge-row { flex-wrap: wrap; }
  .ge-main { flex-basis: calc(100% - 56px); }
  .ge-person-actions { margin-left: auto; }
}
.ge-av { width: 44px; height: 44px; font-size: 15px; flex: 0 0 auto; }
.ge-av.sm { width: 32px; height: 32px; font-size: 12px; }
.ge-void { text-decoration: line-through; color: var(--ink-3); }
.ge-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ge-fl { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ge-f input, .ge-f select { font-size: 16px; color: var(--ink); }
.ge-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ge-form { max-width: 720px; }
.ge-hist { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.ge-hist b { display: block; color: var(--ink); font-weight: 500; }
.ge-week { padding: 8px 12px; }
.ge-wh, .ge-wr { display: grid; grid-template-columns: minmax(120px, 1.3fr) repeat(7, minmax(0, 1fr)) 64px; gap: 6px; align-items: start; }
.ge-wh { padding: 6px 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ge-wh .today { color: var(--coral-ink); }
.ge-wr { padding: 8px 0; border-top: 1px solid var(--line); }
.ge-wn { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ge-wc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ge-wc.today { background: var(--peach-3); border-radius: var(--r-sm); }
.ge-shift { display: flex; flex-direction: column; align-items: flex-start; min-height: 40px; padding: 4px 6px; border-radius: 8px; background: var(--peach-2); color: var(--ink); font-size: 12.5px; line-height: 1.25; text-align: left; overflow-wrap: anywhere; }
.ge-shift i { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.ge-shift.off { background: var(--bg-2); color: var(--ink-3); text-decoration: line-through; }
.ge-add { min-height: 32px; border-radius: 8px; border: 1px dashed var(--line-2); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; }
.ge-add:hover { background: var(--bg-2); color: var(--ink); }
.ge-wt { text-align: right; font-weight: 500; padding-top: 8px; }
.ge-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ge-plan > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r); background: var(--bg-2); }
.ge-plan span { font-size: 14px; color: var(--ink-2); }
.ge-pay { padding: 8px 12px; }
.ge-ph, .ge-pr { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.ge-ph { padding: 6px 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ge-pr { padding: 10px 0; border-top: 1px solid var(--line); }
.ge-pr > * { min-width: 0; overflow-wrap: anywhere; }
.ge-pn { display: flex; flex-direction: column; }
.ge-pr .tag { margin: 0 4px 4px 0; height: auto; min-height: 24px; white-space: normal; }
@media (max-width: 760px) {
  .ge-origin, .ge-plan { grid-template-columns: minmax(0, 1fr); }
  .ge-two { grid-template-columns: minmax(0, 1fr); }
  .ge-range { flex: 1 1 100%; order: -1; white-space: normal; }
  .ge-wh, .ge-ph { display: none; }
  .ge-wr { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ge-wc { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 40px; padding: 2px 6px; }
  .ge-wc::before, .ge-wt::before { content: attr(data-day); flex: 0 0 64px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .ge-wt { display: flex; text-align: left; padding: 2px 6px; }
  .ge-add { flex: 0 0 40px; min-height: 36px; }
  .ge-pr { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ge-pr > [data-l] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .ge-pr > [data-l]::before { content: attr(data-l); flex: 0 0 140px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
}
/* Gestión: Compras y Gastos (web/gestion/compras.js y gastos.js). */
.gc { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gc-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gc-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gc-bar h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 500; display: flex; align-items: center; gap: 2px; }
.gc-tabs { max-width: 560px; }
.gc-tabs button { padding: 0 10px; font-size: 14px; }
.gc-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gc-card .form-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gc-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gc-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; min-height: 60px; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); min-width: 0; }
button.gc-item:hover { background: var(--surface-hi); }
.gc-item-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gc-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.gc-orig { font-weight: 500; letter-spacing: .01em; }
.gc-ok { color: var(--green); }
.gc-warn { color: var(--warn); }
.gc-void { opacity: .6; }
.gc-line { gap: 10px; }
.gc-line-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gc-line-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-more summary { cursor: pointer; font-size: 13px; color: var(--ink-2); min-height: 32px; display: flex; align-items: center; }
.gc-more[open] summary { margin-bottom: 8px; }
.gc-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between;
  padding: 10px 14px calc(10px + var(--safe-b)); background: var(--surface-hi); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.gc-foot-sum { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 14px; min-width: 0; }
.gc-actions > .btn { flex: 1 1 150px; }
.gc-scan { border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gc-scan p { margin: 0; color: var(--ink-2); }
.gc-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; min-height: 120px; resize: vertical; }
.gc-alert { background: var(--warn-soft); color: var(--warn); border-radius: var(--r); padding: 10px 14px; margin-bottom: 8px; }
.gc-alert ul, .gc-plain { margin: 6px 0 0; padding-left: 18px; }
.gc-plain { margin-bottom: 10px; font-size: 14px; }
.gc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gc-tot { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gc-tot li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.gc-tot li > span { min-width: 0; overflow-wrap: anywhere; }
.gc-origin { background: var(--bg-2); border-radius: var(--r-lg); padding: 14px 16px; margin-top: 8px; }
.gc-origin h2 { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.gc-origin-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; font-size: 14px; }
.gc-origin ul { margin: 4px 0 0; padding-left: 18px; }
.gc-origin li { margin-bottom: 4px; }
@media (max-width: 899px) {
  .gc-two, .gc-origin-cols { grid-template-columns: minmax(0, 1fr); }
  .gc-line-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gc-line-grid > label:last-child:nth-child(odd) { grid-column: 1 / -1; }
  main.gc { padding: 12px; }
}
.gc label.f { position: relative; }
.gc label.f > .concept { position: absolute; top: -9px; right: 0; }








/* Propinas (J, 30/09): pregunta al cobrar, bloque de servicio en Ventas, Mis ventas y Caja. */
.tp-ask { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.tp-q { font-size: 18px; font-weight: 500; }
.tp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-opt { min-height: 56px; border-radius: var(--r); background: var(--bg); font-size: 17px; font-weight: 450; border: 2px solid transparent; }
.tp-opt.on { background: var(--peach-3); border-color: var(--ink); font-weight: 600; }
.tp-hint { color: var(--coral-ink); }
.tp-sug { display: flex; align-items: center; gap: 2px; color: var(--ink-2); }
.tp-pencil { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -6px 0; border: 0; background: transparent; color: var(--ink-3); border-radius: 50%; opacity: .8; }
.tp-pencil:hover, .tp-pencil:focus-visible { opacity: 1; color: var(--ink-2); }
.field-btn:disabled { opacity: .45; }
.tp-general { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.tp-general b { font-size: 20px; white-space: nowrap; }
.tp-general small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.tp-mine { display: flex; flex-direction: column; gap: 6px; }
.tp-mine .tp-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tp-pay-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.tp-pay-row input { flex: 1; min-width: 0; }

/* ============ Cierre firmado: caja menor y firma de 6 dígitos (prefijo .cf-) ============ */
.cf { display: flex; flex-direction: column; gap: 16px; }
.cf h3 { margin: 0 0 6px; font-size: 17px; }
.cf-lead { margin: 0; font-size: 17px; line-height: 1.4; }
.cf-muted { color: var(--ink-2); font-size: 15px; }
.cf-warn { margin: 0; color: var(--warn); font-weight: 700; font-size: 16px; }
.cf-grow { flex: 1 1 auto; min-width: 0; }
.cf-stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cf-row { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; }
.cf-total { border-top: 1px dotted var(--dots); padding-top: 8px; margin-top: 4px; font-size: 20px; font-weight: 800; }
.cf-cuadre { border: 2px solid var(--line-2); border-radius: 14px; padding: 14px 16px; background: var(--surface); }
.cf-cuadre.ok { border-color: var(--green); background: var(--green-soft); }
.cf-cuadre.warn { border-color: var(--warn); background: var(--warn-soft); }
.cf-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cf-actions .btn { flex: 1 1 220px; }
.cf-block { display: flex; flex-direction: column; gap: 8px; }
.cf-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--dots); font-size: 16px; flex-wrap: wrap; }
.cf-item .cf-grow { display: flex; flex-direction: column; }
.cf-item.inv { flex-wrap: nowrap; }
.cf-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--bg-2); flex: none; }
.cf-thumb.none { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-2); }
.cf-statement { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; }
.cf-signed { display: flex; flex-direction: column; gap: 4px; border: 2px solid var(--green); background: var(--green-soft); border-radius: 14px; padding: 12px 14px; font-size: 16px; }
.cf-photo { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.cf-photo img { max-width: 100%; height: auto; max-height: 240px; border-radius: 12px; border: 1px solid var(--line-2); object-fit: contain; background: var(--bg-2); }
.cf-notice { margin: 0; font-size: 15px; padding: 8px 10px; border-radius: 10px; background: var(--amber-soft); }
.cf-notice.ok { background: var(--green-soft); }
.cf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cf-line { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.cf-val { flex: 0 0 150px; }
.cf-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; font-size: 17px; flex-wrap: wrap; }
.cf-sig { display: flex; flex-direction: column; gap: 2px; font-size: 14px; margin-top: 6px; }
.cf-sig img { max-width: 100%; height: auto; max-height: 280px; border-radius: 10px; border: 1px solid var(--line-2); object-fit: contain; }
@media (max-width: 600px) { .cf-val { flex: 1 1 120px; } .cf-actions .btn { flex-basis: 100%; } }


.ch-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ch-two>*{min-width:0}.ch-form input,.ch-form select{max-width:100%;box-sizing:border-box}.ch-summary{padding:16px;background:var(--surface,#fff);border:1px solid var(--line,#ddd);border-radius:12px}.ch-summary b{display:block}.ch-confirm{padding:12px;background:var(--soft,#F4F5F6);border-radius:10px}.ch-check{display:flex;align-items:center;gap:10px}.ch-check input{width:18px;height:18px}.ch-pending .row{flex-wrap:wrap}
@media(max-width:600px){.ch-two{grid-template-columns:1fr}.ch-form .big-total{font-size:36px}.ch-pending .kv{gap:8px}.ch-summary{padding:12px}}

.ch-history summary{cursor:pointer;font-weight:600}.ch-history .kv{gap:8px;flex-wrap:wrap}.ch-history .kv b{flex-shrink:0}

.cash-history-pager { flex-wrap: wrap; }
.cash-history-pager .btn { flex: 1 1 140px; min-width: 0; white-space: normal; }

/* Cobro y precuenta en un solo modal (tarjeta 38, 16/10): prefijo cb-.
   Revisión de José (16/10): el modal no hace scroll; total, propina, medios, efectivo y la acción
   principal caben en el viewport (1280×720, 1024×768, 390×844). Solo la lista de productos
   (.cb-scroll) se desplaza cuando la cuenta es larga: cadena flex con min-height: 0.
   Cobro v3 (16/10, UI-01/UI-10): en teléfono el modal mide lo que su contenido (sin hueco bajo un
   producto) y la lista conserva un alto mínimo de 3 renglones. El panel de la cuenta no puede
   aplastarla: su min-height es --cb-min = cabecera + --cb-list, con --cb-list = min(96px, contenido
   de la lista), que pay.js calcula con un ResizeObserver (en CSS puro el mínimo automático del
   panel sería toda la lista y nunca encogería; un mínimo fijo dejaría hueco bajo un solo producto).
   En combinado, el selector de medios se abre desde cada fila; se verifica también 375×667.
   Los medios de pago se parten en dos líneas en vez de recortarse. */
.sheet.cb-sheet { max-width: 1060px; }
@media (min-width: 900px) { .sheet.cb-sheet { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); } }
@media (max-width: 899px) { .sheet.cb-sheet { max-height: 100vh; max-height: 100dvh; border-radius: 0; } }
.cb-sheet .sheet-h { padding: 8px 10px 2px 16px; }
.cb-sheet .sheet-b { display: flex; flex-direction: column; min-height: 0; padding: 2px 16px 4px; }
.cb-sheet .sheet-b > * { flex: 0 0 auto; }
.cb-sheet .sheet-f { padding: 6px 16px calc(6px + var(--safe-b)); }
.cb-sim { flex: 0 0 auto; color: var(--ink-2); }
.cb-sim:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.cb-sheet { position: relative; }
.cb-sim-help { position: absolute; z-index: 3; top: 54px; right: 16px; width: min(360px, calc(100% - 32px)); box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); font-size: 14px; line-height: 1.4; }
.cb-sim-help[hidden] { display: none; }
.cb-notice { background: var(--green-soft); border-radius: var(--r); padding: 6px 12px; margin: 0 0 8px; font-size: 15px; line-height: 1.3; }
.cb-notice.warn { background: var(--amber-soft); font-weight: 500; }
.cb-sheet .sheet-b > .cb-layout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.cb-layout > .cb-account { flex: 1 1 auto; min-height: var(--cb-min, 0px); display: flex; flex-direction: column; padding: 6px 14px 8px; }
.cb-account > * { flex: 0 0 auto; }
.cb-layout > .cb-pay { flex: 0 0 auto; gap: 6px; }
.cb-scroll { flex: 1 1 auto; min-height: var(--cb-list, 0px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cb-account .pay-mode { margin: 0 0 6px; padding: 3px; }
.cb-account .pay-mode button { min-height: 40px; font-size: 15px; }
.cb-account .part-paid { margin: 0 0 8px; }
.cb-acc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 4px; border-bottom: 1px solid var(--line); }
.cb-acc-h .small { font-size: 12px; line-height: 1.15; }
.cb-acc-total { font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.cb-advance { margin: 0; padding: 4px 0 0; border-top: 0; }
.cb-advance .kv { padding: 4px 0; }
.cb-scroll .line { padding: 6px 0; gap: 8px; font-size: 15px; }
.cb-scroll .line .n .s { font-size: 13px; }
.cb-part-head { font-size: 16px; margin: 0 0 6px; }
.cb-part-sum { margin-top: 8px; padding-top: 8px; }
.cb-sum { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 0 12px; }
.cb-sum-row { display: flex; align-items: center; gap: 10px; min-height: 38px; font-size: 16px; }
.cb-sum-row > span:first-child, .cb-tip-l { flex: 1 1 auto; min-width: 0; }
.cb-sum-row { border-top: 1px solid var(--line); }
.cb-sum-row:first-child { border-top: 0; }
.cb-sum-row b { font-weight: 500; font-size: 18px; }
.cb-tip { min-height: 44px; }
.cb-tip-l { display: flex; flex-direction: column; line-height: 1.15; }
.cb-tip-l small { color: var(--ink-2); font-size: 13px; }
.cb-tip-v { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: var(--r); background: var(--bg); font-size: 18px; font-weight: 500; color: var(--ink); }
.cb-total { min-height: 46px; }
.cb-total > span:first-child { font-weight: 600; }
.cb-total b { font-size: 24px; font-weight: 600; }
.cb-block { display: flex; flex-direction: column; gap: 6px; }
.cb-h { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin: 0; line-height: 1.2; }
.cb-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
.cb-method { min-height: 44px; padding: 2px 4px; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); font-size: 16px; font-weight: 450; border: 2px solid transparent; color: var(--ink); white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.cb-method.cb-wide, .cb-method.cb-add { grid-column: span 2; }
.cb-method.on { background: var(--peach-3); border-color: var(--ink); font-weight: 600; }
.cb-method:disabled { opacity: .45; }
.cb-method.cb-add { border: 1px dashed var(--line-2); background: transparent; box-shadow: none; color: var(--ink-2); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 2px 3px; }
.cb-method.cb-add svg { color: currentColor; flex: 0 0 auto; }
.cb-rows { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-row { flex: 1 1 100%; min-width: 0; display: flex; align-items: stretch; gap: 4px; padding: 0 4px 0 0; background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); border: 2px solid transparent; }
.cb-row.on { border-color: var(--ink); background: var(--peach-3); }
.cb-row-h { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; min-height: 44px; padding: 2px 8px; background: none; color: var(--ink); line-height: 1.2; }
.cb-row-h b { font-size: 15px; font-weight: 600; max-width: 100%; white-space: normal; }
.cb-row-s { font-size: 12.5px; color: var(--ink-2); white-space: normal; max-width: 100%; }
.cb-row-v { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; align-self: center; min-height: 36px; padding: 0 7px; border-radius: 9px; background: var(--bg); color: var(--ink); line-height: 1.15; }
.cb-row-v small { font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cb-row-v b { font-size: 15px; font-weight: 500; }
.cb-row-x { flex: 0 0 auto; width: 36px; min-height: 0; align-self: center; }
.cb-bills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cb-bill { min-height: 42px; padding: 0 4px; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); font-size: 16px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.cb-bill:active { background: var(--peach-3); }
.cb-cash-row { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; }
.cb-received { flex: 1 1 110px; min-width: 0; min-height: 44px; }
.cb-received b { font-size: 18px; }
.cb-exact { flex: 0 0 auto; min-height: 44px; padding: 0 10px; }
.cb-change { flex: 1 1 0; display: flex; align-items: center; min-height: 40px; padding: 4px 10px; font-size: 17px; line-height: 1.15; }
.cb-short { flex: 1 1 0; display: flex; align-items: center; min-height: 40px; background: var(--peach-3); color: var(--coral-ink); border-radius: var(--r); padding: 4px 10px; font-weight: 500; font-size: 17px; line-height: 1.15; }
.cb-foot { display: flex; gap: 8px; align-items: stretch; }
.cb-foot .cb-main { flex: 1 1 auto; min-width: 0; min-height: 56px; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; }
.cb-to-settle { flex: 0 0 auto; min-height: 56px; padding: 0 12px; }
@media (max-width: 599px) { .cb-foot-sim .cb-main { font-size: 16px; } .cb-to-settle { font-size: 15px; padding: 0 10px; } }
/* Factura: interruptor con estado escrito, junto a Cobrar (José, 16/10). */
.cb-receipt { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 56px; padding: 2px 6px; border-radius: var(--r); background: transparent; color: var(--ink); font-size: 13px; line-height: 1.1; }
.cb-receipt .toggle { flex: 0 0 auto; width: 44px; height: 26px; background: #46515B; }
.cb-receipt .toggle::after { width: 20px; height: 20px; }
.cb-receipt.on .toggle { background: #B00021; }
.cb-receipt.on .toggle::after { left: 21px; }
.cb-receipt:disabled { opacity: .5; }
.cb-receipt-t { display: flex; flex-direction: column; gap: 2px; text-align: left; white-space: nowrap; }
.cb-receipt-t small { font-size: 12px; }
@media (max-width: 599px) { .cb-receipt { flex-direction: column; gap: 2px; min-width: 84px; font-size: 12px; } .cb-receipt .toggle { width: 40px; height: 22px; } .cb-receipt .toggle::after { width: 16px; height: 16px; } .cb-receipt-t { text-align: center; gap: 0; } }
.cb-done { padding: 20px 8px; }
@media (max-width: 999px) {
  .cb-dup { display: none; }
  .cb-dup + .cb-sum-row { border-top: 0; }
  .cb-row-h { min-height: 38px; }
  .cb-method { min-height: 40px; }
  .cb-bill { min-height: 40px; }
  .cb-tip { min-height: 42px; }
  .cb-total { min-height: 44px; }
}
@media (min-width: 1000px) {
  .cb-sheet .sheet-b > .cb-layout { flex-direction: row; align-items: stretch; gap: 14px; }
  .cb-layout > .cb-account, .cb-layout > .cb-pay { flex: 1 1 0; min-width: 0; }
  .cb-layout > .cb-pay { flex-grow: 1.15; min-height: 0; }
  .cb-bills { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cb-change, .cb-short { flex: 1 1 160px; }
  /* Una ficha por línea también en escritorio: a dos por línea el nombre del medio («Llaves»,
     «Medio 2») se recortaba junto a Consumo/Propina. El modal tiene alto de sobra desde 1000 px. */
}
/* Escritorio bajo (1280×720): la precuenta con tres medios y efectivo rozaba el límite (7 px). */
@media (min-width: 1000px) and (max-height: 760px) {
  .cb-layout > .cb-pay { gap: 4px; }
  .cb-sum-row { min-height: 36px; }
  .cb-tip { min-height: 40px; }
  .cb-total { min-height: 42px; }
}
/* Teléfono (≤ 599): filas y separaciones más compactas (objetivos táctiles ≥ 36 px) para que la
   lista conserve sus 3 renglones junto a los controles; va después del bloque ≤ 999 para ganarle. */
@media (max-width: 599px) {
  .cb-sheet .sheet-b > .cb-layout { gap: 6px; }
  .cb-layout > .cb-pay { gap: 4px; }
  .cb-block { gap: 4px; }
  .cb-account .pay-mode { margin-bottom: 4px; }
  .cb-account .pay-mode button { min-height: 36px; }
  .cb-row-h { min-height: 36px; }
  .cb-method, .cb-bill { min-height: 38px; }
  .cb-method { font-size: 15px; }
  .cb-method.cb-add { font-size: 14px; }
  .cb-tip { min-height: 40px; }
  .cb-total { min-height: 42px; }
}
/* Teléfono bajo (375×667): un poco más. */
@media (max-width: 599px) and (max-height: 720px) {
  .cb-sheet .sheet-h { padding-top: 6px; }
  .cb-notice { padding: 4px 10px; margin-bottom: 6px; font-size: 14px; }
  .cb-layout > .cb-account { padding: 4px 12px 6px; }
  .cb-sum-row { min-height: 36px; }
  .cb-tip { min-height: 38px; }
  .cb-total { min-height: 40px; }
  .cb-received, .cb-exact { min-height: 42px; }
  .cb-change, .cb-short { min-height: 38px; }
}

/* Pago combinado: los medios ya se nombran en sus filas; el selector se abre al tocar
   el nombre. Se conservan consumo/propina editables, los seis billetes y la lista mínima. */
.cb-row-add { flex: 0 0 36px; width: 36px; align-self: center; }
.cb-combined .cb-bills { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.cb-combined .cb-bill { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 2px; line-height: 1.05; }
.cb-combined .cb-bill small { font-size: 11px; }
.cb-picker .cb-method { min-height: 44px; }

/* Móvil bajo, combinado: compactar espacios, no ocultar controles ni reducir la lista. */
@media (max-width: 599px) and (max-height: 720px) {
  .cb-combined .sheet-h { padding-top: 0; padding-bottom: 0; }
  .cb-combined .sheet-f { padding-top: 4px; padding-bottom: calc(4px + var(--safe-b)); }
  .cb-combined .cb-layout > .cb-account { padding-bottom: 4px; }
  .cb-combined .cb-account .pay-mode { margin-bottom: 2px; padding: 2px; }
  .cb-combined .cb-layout > .cb-pay, .cb-combined .cb-block { gap: 2px; }
  .cb-combined .cb-rows { gap: 4px; }
  .cb-combined .cb-received { padding: 4px 8px; }
  .cb-combined .cb-tip, .cb-combined .cb-total { min-height: 36px; }
}

/* Contraste de Cobro y selector; conserva el switch gris/verde del padre. */
/* Productos (tarjeta 37, 16/10): filtro con los chips del editor de la carta (.cat-roots/.cat-subs/
   .cat-chip, sin desplazamiento lateral) y torta de unidades con la dona de Resumen. Nombre,
   unidades y porcentaje en columnas propias; los nombres largos bajan de línea, nunca se pisan. */
.st-cat-nav { margin: 4px 0 14px; }
.st-pie { justify-content: flex-start; margin-bottom: 4px; }
.st-pie .st-pie-legend { flex: 1 1 280px; max-width: 620px; grid-template-columns: auto minmax(0, 1fr) max-content max-content 18px; }
.st-pie-n { min-width: 0; overflow-wrap: anywhere; }
.st-pie-otros button { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; width: 100%; min-height: 44px;
  padding: 0; background: none; border: 0; border-top: 1px dotted var(--dots); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.st-pie-otros button > span:nth-child(4) { text-align: right; font-size: 14px; }
.st-pie-rest { flex: 1 1 100%; }
.st-pie-note { margin: 6px 0 4px; }
.st-pie-otros svg { width: 18px; height: 18px; }

/* Notas desde la cuenta (tarjeta 33, 16/10): las acciones del renglón pueden pasar a dos filas. */
.line-acts.notas-acts { flex-wrap: wrap; row-gap: 2px; }
.rline .r2.notas-r2 { flex-wrap: wrap; row-gap: 8px; }
.note-sheet-qty { margin: -4px 0 10px; }
/* Cuadre de caja (16/10; compactado en Cuadre v2): siete secciones, solo lectura, prefijo cq-. */
.cq { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.cq-pick { display: flex; flex-direction: column; gap: 10px; }
.cq-day { display: grid; grid-template-columns: auto minmax(150px, 220px) auto; justify-content: start; align-items: end; gap: 8px; }
.cq-date { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cq-date input { min-height: 48px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-hi); font-size: 16px; font-family: inherit; min-width: 0; }
.cq-turnos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.cq-turno { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 9px 12px; text-align: left;
  border-radius: var(--r); border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.cq-turno b { font-size: 16px; font-weight: 600; }
.cq-turno .small { color: var(--ink-2); }
.cq-turno.on { border-color: var(--dark); background: var(--surface-hi); }
.cq-turno:disabled { cursor: default; opacity: .7; border-style: dashed; }
.cq-none { margin: 0; }
.cq-sheet { background: var(--surface-hi); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Cabecera compacta: una línea con caja y horas, una línea de quién abrió y cerró, firmas plegadas. */
.cq-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 2px; }
.cq-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cq-h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.cq-who { margin: 0; color: var(--ink-2); line-height: 1.4; }
.cq-more > summary, .cq-help > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; color: var(--ink-2); }
.cq-more > summary:focus-visible, .cq-help > summary:focus-visible, .cq-jump:focus-visible, .cq-sec-h h2:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.cq-more-b { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 8px; }
/* Accesos a las siete secciones: chips pequeños que caben en dos filas en teléfono. */
.cq-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 4px; }
.cq-jump { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 11px; border-radius: 18px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.cq-jump b { font-weight: 700; color: var(--green); }
.cq-jump:hover { border-color: var(--dark); }
.cq-sec { border-top: 1px solid var(--line); padding: 14px 0 6px; scroll-margin-top: calc(var(--top-h) + 72px); min-width: 0; }
.cq-sec-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cq-sec-h h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.cq-h3 { font-size: 16px; margin: 12px 0 8px; }
.cq-t { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cq-tr { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(var(--cq-cols), minmax(0, 1fr)); gap: 8px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 16px; }
.cq-tr:last-child { border-bottom: 0; }
.cq-tr > span { min-width: 0; overflow-wrap: anywhere; }
.cq-tr > .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cq-th { background: var(--bg); font-size: 13px; font-weight: 600; color: var(--ink-2); padding-top: 8px; padding-bottom: 8px; }
.cq-th > span + span { text-align: right; }
.cq-tf { background: var(--green-soft); font-weight: 700; color: #B00021; }
.cq-neg { color: var(--warn); font-weight: 700; }
.cq-pos { color: var(--amber); font-weight: 700; }
.cq-kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 16px; }
.cq-note { margin: 8px 2px 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.cq-help { margin: 2px 2px 0; }
.cq-help > p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.cq-help b { color: var(--ink); }
.cq-empty { margin: 0; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.cq-empty b { color: var(--ink); }
.cq-sum { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cq-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 16px; }
.cq-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cq-row > b { white-space: nowrap; font-weight: 600; }
.cq-row.strong { background: var(--bg); }
.cq-row.strong > b { font-weight: 700; }
.cq-final { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px; background: var(--green-soft); font-size: 18px; font-weight: 700; }
.cq-final > span:first-child { flex: 1; }
.cq-final > b { font-size: 22px; }
.cq-sum .cq-note { padding: 0 14px 12px; }
a.cq-go { align-self: flex-start; }
/* Hasta 899 px el subencabezado de la mini app no es fijo: al saltar solo hay que librar la barra. */
@media (max-width: 899px) {
  .cq-sec { scroll-margin-top: calc(var(--top-h) + 12px); }
}
@media (max-width: 640px) {
  .cq-sheet { padding: 14px 12px 16px; }
  .cq-tr { grid-template-columns: minmax(60px, .9fr) repeat(var(--cq-cols), minmax(0, 1fr)); padding: 9px 10px; gap: 6px; font-size: 14px; }
  .cq-th { font-size: 12px; }
  .cq-kv { padding: 9px 10px; font-size: 15px; }
  .cq-row { padding: 9px 12px; font-size: 15px; }
  .cq-final > b { font-size: 20px; }
}
/* Teléfono: la jornada en su fila y «Anterior/Siguiente» debajo, a medias; en tablas de cuatro
   columnas el medio va en su propia línea y las cifras debajo. */
@media (max-width: 480px) {
  .cq-day { grid-template-columns: 1fr 1fr; grid-template-areas: "date date" "prev next"; }
  .cq-date { grid-area: date; }
  .cq-day > .btn:first-child { grid-area: prev; }
  .cq-day > .btn:last-child { grid-area: next; }
  .cq-wide .cq-tr { grid-template-columns: repeat(var(--cq-cols), minmax(0, 1fr)); row-gap: 4px; }
  .cq-wide .cq-tr > span:first-child { grid-column: 1 / -1; font-weight: 600; }
  .cq-wide .cq-th > span:first-child { display: none; }
}
/* Productos v2 (revisión de José, 16/10): un solo filtro con lo elegido escrito y sus totales; dos
   bloques del mismo conjunto (torta de unidades y lista de ingresos), lado a lado desde 900 px; el
   detalle exhaustivo plegado debajo. Prefijo .st-. */
.st-prod { display: flex; flex-direction: column; gap: 16px; }
.st-pfilter { padding-bottom: 12px; }
.st-pfilter .st-cat-nav { margin-bottom: 10px; }
.st-pfilter .st-tools { gap: 8px; }
.st-by-k { margin-right: 2px; }
.st-filt { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.st-filt-where { font-size: 17px; overflow-wrap: anywhere; }
.st-filt-tot { color: var(--ink-2); }
.st-filt-tot b { color: var(--ink); }
.st-two { display: flex; flex-direction: column; gap: 16px; }
.st-blk { display: flex; flex-direction: column; min-width: 0; }
.st-blk .st-pie-legend { flex-basis: 220px; }
.st-h-by { font-weight: 400; margin-left: 4px; }
.st-detail { padding-top: 4px; }
.st-detail-b { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; column-gap: 12px; width: 100%; min-height: 48px;
  padding: 4px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.st-detail-h { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.st-detail-h b { font-size: 16px; font-weight: 500; }
.st-detail-body { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line-2); }
@media (min-width: 900px) {
  .st-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
/* Entre 900 y 1199 px cada bloque es angosto: la leyenda de la torta baja a todo el ancho para que
   los nombres no se partan letra a letra. */
@media (min-width: 900px) and (max-width: 1199px) {
  .st-blk .st-pie { justify-content: center; }
  .st-blk .st-pie-legend { flex-basis: 100%; max-width: none; }
}
/* Resultado del cierre de caja (José, 16/10): tabla compacta de verificación rápida, prefijo cr-. */
.cr-report { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cr-who { margin: 0; }
.cr-t { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: 15px; max-width: 640px; }
.cr-tr { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.cr-tr:last-child { border-bottom: 0; }
.cr-tr > span { min-width: 0; overflow-wrap: anywhere; }
.cr-tr > .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-th { background: var(--bg); font-size: 13px; font-weight: 600; color: var(--ink-2); padding-top: 8px; padding-bottom: 8px; }
.cr-th > span + span { text-align: right; }
.cr-tf { background: var(--green-soft); font-weight: 700; }
.cr-tips { font-weight: 600; }
.cr-tips > .cr-span { grid-column: 2 / -1; }
.cr-sub { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); line-height: 1.2; }
.cr-neg { color: var(--warn); font-weight: 700; }
.cr-pos { color: var(--amber); font-weight: 700; }
.cr-line { margin: 0; line-height: 1.4; }
.cr-more { padding: 0; }
.cr-more > summary { cursor: pointer; font-size: 14px; color: var(--ink-2); padding: 4px 0; }
.cr-block { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 4px; }
.cr-kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 15px; }
.cr-kv-total { font-weight: 600; border-top: 1px solid var(--line); padding-top: 6px; }
@media (max-width: 480px) {
  .cr-t { font-size: 14px; }
  .cr-tr { gap: 4px; padding: 7px 8px; }
  .cr-th { font-size: 12px; }
}

/* ============ Navegación (16/10): franjas de estado compactas ============ */
/* Aviso de entorno, aviso de caja cerrada y franja del administrador de turno: una línea en
   escritorio y dos en el teléfono; el enlace va en línea con el texto y conserva 40 px de pulsación. */
.trial-banner { padding: 3px 12px; font-size: 12.5px; line-height: 1.3; }
.main > .banner { padding: 6px 12px; font-size: 15px; line-height: 1.3; }
.main > .cash-banner { display: block; }
.main > .cash-banner a { display: inline-block; min-height: 0; padding: 10px 8px; margin: -10px 0; line-height: 1.3; }
.main > .duty-strip { display: block; padding: 6px 12px; font-size: 14px; line-height: 1.3; }
.main > .duty-strip span { margin-right: 12px; }
.main > .duty-strip a { display: inline-block; min-height: 0; padding: 10px 6px; margin: -10px 0; font-weight: 600; }

/* Carta en cuenta (16/10): las secciones de la carta dentro de la cuenta usan los chips del editor
   (.cat-roots/.cat-chip) y envuelven en filas al ancho disponible: todas a la vista, sin desplazamiento
   lateral. La franja deja de ser fija (con 17 secciones taparía la carta) y pierde la banda con borde. */
.anchor-bar.cc-bar { position: static; margin: 0 0 12px; padding: 0; border-bottom: 0; background: transparent; }
.cc-bar .cc-roots { flex: 1 1 auto; min-width: 0; padding: 0; }
/* El rayo (modo rápido) abre la corriente de chips, a la altura de un chip. */
.cc-roots .cc-bolt { width: 48px; height: 44px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--surface); }
@media (min-width: 1000px) { .anchor-bar.cc-bar { margin: 0 0 12px; padding: 0; } }
/* Carta en cuenta (16/10, UI-13): un solo «Salir» en la cuenta. El botón de la línea de la cuenta
   existe para el celular, donde la barra general se oculta (< 900 px); desde 900 px la barra general
   ya trae «Salir» y este se retira. La regla `.order-session-exit { display: none }` de la cabecera
   perdía contra `.btn { display: inline-flex }`, declarada después con la misma especificidad. */
@media (min-width: 900px) { .top .order-session-exit { display: none; } }

/* Planeador y configuración: misma paleta del POS, operaciones de guardado separadas. */
/* Pasos dobles (16/10): cada celda son 2×2 pistas para admitir medias posiciones. El margen de cada
   pieza reemplaza el gap, así las celdas enteras miden y se separan igual que antes. */
.floor-grid {
  display: grid; grid-template-columns: repeat(var(--fg-cols2),minmax(22px,1fr));
  grid-template-rows: repeat(var(--fg-rows2),minmax(38px,1fr)); gap: 0; padding: 6px;
  background: radial-gradient(circle,var(--line) 1px,transparent 1px); background-size: 16px 16px; border-radius: 14px;
  min-width: calc(var(--fg-cols)*52px);
}
.floor-grid>* { margin: 4px; }
.fg-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;margin:12px 0}
.fg-cell {
  min-width: 0; min-height: 68px; padding: 8px 4px; border: 1px dashed var(--line); border-radius: 12px;
  background: transparent; color: var(--ink); display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 3px; font: inherit; cursor: pointer;
}
.fg-table{background:var(--surface-hi);border:1px solid var(--line);box-shadow:var(--sh-1)}
.fg-table b{font-size:20px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.fg-table small{font-size:11px;color:var(--ink-3)}
.fg-cell.selected { border: 2px solid var(--coral); background: var(--peach-3); }
.fg-target { border-color: var(--coral); background: var(--peach-3); }
.fg-empty:disabled { opacity: 1; cursor: default; }
.fg-table:disabled { opacity: 1; color: var(--ink); cursor: default; }
.layout-toolbar { gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.layout-toolbar .seg { flex-wrap: wrap; }
.layout-workspace { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(240px,1fr); gap: 16px; align-items: start; }
.layout-board, .layout-editor { padding: 18px; min-width: 0; }
.layout-workspace h2 { font-size: 18px; margin: 0 0 12px; }
.layout-table-list { display: flex; flex-wrap: wrap; gap: 8px; }
.layout-table-list .btn { gap: 8px; }
.event-plans { margin: 0 0 18px; }
.event-plans h3 { font-size: 17px; margin: 0; }
.event-plan-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); gap: 10px; margin-top: 10px; }
.event-plan-card {
  display: flex; flex-direction: column; gap: 7px; text-align: left; background: var(--surface-hi); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 13px; font: inherit; min-width: 0; cursor: pointer;
}
.event-plan-card .row { flex-wrap: wrap; gap: 6px; }
.event-planner .sheet-b { padding: 18px; }
.event-planner .sheet-h { gap: 10px; }
.event-data { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr .65fr; gap: 10px; margin-bottom: 16px; }
.event-data .f, .event-workspace .f { min-width: 0; }
.event-data input, .event-workspace input, .event-workspace select, .event-workspace textarea { min-width: 0; width: 100%; }
.event-workspace { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(250px,1fr); gap: 16px; align-items: start; }
.event-board { padding: 14px; min-width: 0; }
.event-board .row { flex-wrap: wrap; gap: 8px; }
.event-menu { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.event-menu h3 { font-size: 16px; margin: 0; }
.event-plan-summary { margin-top: 10px; }
.event-table-tray { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.event-board textarea, .event-menu textarea { min-height: 80px; resize: vertical; }
.event-results { display: flex; flex-direction: column; gap: 5px; max-height: 240px; overflow: auto; }
.event-results .btn { text-align: left; justify-content: space-between; }
.event-concepts { display: flex; flex-direction: column; gap: 12px; }
.event-concept { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.event-concept .row { gap: 8px; }
.event-concept .f { margin-bottom: 8px; }
.event-concept .grow { flex: 1; min-width: 0; }
.event-quote-total {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 0;
  border-top: 1px solid var(--line);
}
.event-quote-total .num { font-size: 22px; }
.event-quote .floor-grid { max-width: 580px; }
.event-quote-rows>div { display: flex; gap: 12px; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.event-quote-rows small { display: block; color: var(--ink-3); }
.event-notes { white-space: pre-wrap; }
@media (max-width: 899px) {
  .event-data { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .event-data>.f:nth-child(1), .event-data>.f:nth-child(2) { grid-column: span 1; }
  .event-workspace, .layout-workspace { grid-template-columns: minmax(0,1fr); }
  .event-menu { padding: 4px; }
  .event-planner .sheet-f .row { flex-wrap: wrap; gap: 8px; }
  .event-planner .sheet-f .btn { flex: 1; }
}
@media (max-width: 449px) {
  .event-data { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .event-data>.f:first-child { grid-column: 1/-1; }
  .event-planner .sheet-b { padding: 12px; }
  .event-board { padding: 10px; }
  .floor-grid { grid-template-rows: repeat(var(--fg-rows2),minmax(32.5px,1fr)); padding: 3.5px; min-width: calc(var(--fg-cols)*49px); }
  .floor-grid>* { margin: 2.5px; }
  .fg-cell { min-height: 60px; }
  .fg-table b { font-size: 17px; }
  .layout-toolbar .seg { min-width: 100%; flex-basis: 100%; }
}

/* La cuadrícula configurada manda también en el facturador; no se fija a cinco columnas. */
.room .physical-plan{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
/* Medias posiciones (16/10): pasos dobles con el mismo gap; una mesa entera ocupa 2×2 pistas y
   mide y se separa exactamente igual que en la rejilla simple. */
.room .physical-plan.half-grid{grid-template-columns:repeat(var(--cols2),minmax(0,1fr))}

.fg-table .fg-joined{color:var(--coral-ink);font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.event-planner .f,.layout-config .f,.fg-table small{color:var(--ink-2)}

/* Planeador: posiciones disponibles distintas de mesas ya añadidas. */
.event-planner .fg-available{border-style:dashed;border-color:var(--coral);color:var(--ink-2);background:var(--surface)}
.event-planner .fg-available b{font-size:18px}.event-planner .fg-available small{font-size:11px}
.event-planner .fg-empty:not(:disabled):hover{border-color:var(--coral);background:var(--peach-3)}

/* Salones y mesas (16/10): destinos táctiles en centros, mitades de lado e intersecciones.
   Cada destino ocupa una pista × una pista centrada en su punto: se reparten el plano sin
   montarse unos sobre otros, aunque el punto visible sea pequeño. */
.fg-halfsteps{grid-template-columns:repeat(var(--fg-cols2),minmax(34px,1fr));min-width:calc(var(--fg-cols2)*34px + 12px)}
.floor-grid .fg-table,.floor-grid .fg-available{position:relative;z-index:1}
.fg-guide{pointer-events:none}
.fg-choosing .fg-guide{border-color:var(--line-2)}
.fg-cell.fg-moving{opacity:.45;border-style:dashed}
.fg-preview{position:relative;z-index:2;pointer-events:none;border:2px solid var(--coral);background:var(--peach-3);color:var(--coral-ink);box-shadow:var(--sh-1)}
.fg-preview b{font-size:20px}.fg-preview small{font-size:11px;font-weight:600}
.floor-grid>.fg-dot {
  margin: 0; place-self: center; width: 50%; height: 50%; min-width: 0; min-height: 0; padding: 0; border: 0;
  border-radius: 50%; background: transparent; display: grid; place-items: center; position: relative; z-index: 3;
  cursor: pointer; font: inherit;
}
.fg-dot i{display:block;width:18px;height:18px;border-radius:50%;background:var(--surface-hi);border:2px solid var(--coral);box-shadow:0 1px 3px rgba(0,0,0,.12);transition:transform .08s}
.fg-dot-center i{width:24px;height:24px;background:var(--peach-3)}
.fg-dot:hover i,.fg-dot:focus-visible i{background:var(--coral);transform:scale(1.15)}
.fg-dot:focus-visible{outline:2px solid var(--coral);outline-offset:1px}
.layout-hint{margin:4px 0 0}.layout-where{display:block;font-size:17px;font-weight:600;color:var(--ink);margin:2px 0 8px}
.layout-nudge{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.layout-nudge .btn{min-height:44px;padding:0 6px}
.layout-order{font-size:13px}
.layout-table-list{display:flex;flex-direction:column;gap:6px}.layout-table-list .btn{justify-content:space-between;text-align:left;white-space:normal;min-height:48px}
.layout-table-list .btn{gap:12px}.layout-table-list .btn b{font-size:17px;font-weight:600;white-space:nowrap;flex:none}.layout-table-list .btn span{flex:1;min-width:0;text-align:right}
.layout-archived{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}.layout-archived summary{cursor:pointer;font-weight:550;min-height:44px;display:flex;align-items:center}
.layout-editor .btn.danger-soft{color:var(--coral-ink);background:var(--peach-3)}
@media (max-width: 449px) {
  .fg-halfsteps { grid-template-columns: repeat(var(--fg-cols2),minmax(30px,1fr)); min-width: calc(var(--fg-cols2)*30px + 7px); }
  .layout-board, .layout-editor { padding: 12px; }
  .fg-dot i { width: 16px; height: 16px; }
  .fg-dot-center i { width: 20px; height: 20px; }
}

/* ============ Roles y accesos (Gestión, 0505) ============
   Gris y coral, tarjetas suaves; interruptor coral en vez del verde; sin bordes oscuros. */
.roles-app { display: flex; flex-direction: column; gap: 14px; max-width: 1240px; }
.roles-app.with-strip { padding-bottom: calc(96px + var(--safe-b)); }
.roles-app .small.muted, .app-gate .small.muted { color: var(--ink-2); }
.roles-app .toggle.on, .roles-app .toggle.on:hover { background: var(--coral); }
.roles-app .toggle:focus-visible { outline: 2px solid var(--coral-ink); outline-offset: 2px; }

.roles-app .seg button.on, .seg.seg-soft button.on, .gi-tabs.seg-soft .gi-tab.on { background: var(--peach-2); color: var(--coral-ink); font-weight: 550; }
.roles-tabs { display: flex; width: 100%; max-width: 620px; }
.roles-tabs button { min-width: 0; white-space: normal; line-height: 1.15; padding: 4px 10px; }
.roles-note { margin: 0; max-width: 72ch; }
.roles-bar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.roles-pick { flex: 1 1 170px; max-width: 360px; }
.roles-chip { height: 20px; padding: 0 7px; font-size: 11px; vertical-align: 2px; }
.roles-perm { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.roles-perm-t { font-size: 16px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.roles-group-h { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; text-align: left; color: var(--ink); }
.roles-group-h b { font-size: 15px; font-weight: 600; }
.roles-group-h .small { margin-left: auto; }
.roles-group { padding: 6px 16px 8px; }
.roles-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); }
.roles-row .roles-perm { flex: 1; }
.roles-matrix-wrap { padding: 0; overflow-x: auto; }
.roles-matrix { border-collapse: separate; border-spacing: 0; width: 100%; }
.roles-matrix th, .roles-matrix td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.roles-matrix thead th { border-top: 0; position: sticky; top: 0; background: var(--surface); z-index: 1; font-weight: 500; }
.roles-matrix td { text-align: center; width: 120px; }
.roles-matrix th.roles-perm-col { text-align: left; min-width: 280px; font-weight: 400; }
.roles-matrix .sel { background: var(--peach-3); }
.roles-col-h { min-height: 40px; padding: 4px 6px; border-radius: 8px; font-weight: 550; color: var(--ink); line-height: 1.2; max-width: 140px; overflow-wrap: break-word; hyphens: manual; }
.roles-col-h:hover { background: var(--bg-2); }
.roles-group-row td { text-align: left; background: var(--bg); padding: 4px 12px; }
.roles-people { padding: 4px 8px; }
.roles-person { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 8px; text-align: left; border-top: 1px solid var(--line); border-radius: 0; }
.roles-person:first-child { border-top: 0; }
.roles-person .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.roles-person .avatar { width: 40px; height: 40px; font-size: 14px; flex: none; }
.roles-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.roles-tags .tag { white-space: normal; height: auto; min-height: 24px; padding: 3px 9px; line-height: 1.3; }
.roles-assign { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.roles-area { flex: 1 1 100%; }
.roles-policies { padding: 4px 16px; }
.roles-policy { display: grid; grid-template-columns: minmax(140px, 1fr) auto auto; align-items: center; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.roles-policy:first-child { border-top: 0; }
.roles-policy-t { font-size: 16px; font-weight: 500; }
.roles-seg button { padding: 0 12px; }
.roles-minutes { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); white-space: nowrap; }
.roles-minutes input { width: 84px; min-height: 44px; padding: 8px 10px; text-align: right; }
.roles-strip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + var(--safe-b)); z-index: 30;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: var(--r-lg);
  background: var(--surface-hi); box-shadow: var(--sh-pop); max-width: calc(100% - 24px); }
.roles-strip b { white-space: nowrap; }
.roles-review { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.roles-warn { background: var(--peach-3); color: var(--coral-ink); border-radius: var(--r); padding: 10px 14px; }
.roles-warn p { margin: 4px 0; }
.app-gate { max-width: 440px; margin: 24px auto; }
.app-gate-t { font-size: 18px; font-weight: 550; }
@media (max-width: 699px) {
  .roles-policy { grid-template-columns: 1fr; }
  .roles-policy .roles-seg { display: flex; width: 100%; }
  .roles-policy .roles-seg button { flex: 1; min-width: 0; padding: 0 6px; white-space: normal; line-height: 1.15; }
}
.staff-roles-link { margin-bottom: 16px; text-decoration: none; color: inherit; }
/* Planeador de eventos (auditoría 17/10): aviso de mesas depuradas y cancelar/reactivar, en gris y coral. */
.event-plan-fix { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r); background: var(--peach-3); color: var(--coral-ink); font-size: 14px; line-height: 1.4; }
.event-status-row { margin-top: 8px; align-items: center; gap: 8px; }
.event-planner .event-cancel { color: var(--ink-2); }
.event-cancel-confirm { background: var(--surface); color: var(--coral-ink); border: 1px solid var(--coral); }
.event-plan-card.cancelled { opacity: .62; }
.event-plan-card.cancelled b { text-decoration: line-through; text-decoration-color: var(--line-2); }
/* «Beta» (José, 17/10): el planeador de eventos sale como primer prototipo. Coral suave, sin verde ni rojo. */
.tag.beta {
  height: 20px; padding: 0 7px; background: var(--peach-3); color: var(--coral-ink);
  box-shadow: inset 0 0 0 1px var(--peach); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}
.event-planner .sheet-h h2 { flex: 0 1 auto; }
.event-planner .sheet-h .tag.beta { flex: none; margin-right: auto; }
/* (c) Planeador: Día y Hora con ancho suficiente para «01:00 p. m.». */
@media (min-width: 900px) { .event-data { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(150px, 1fr) minmax(140px, .9fr) minmax(90px, .65fr); } }
.event-data input[type="time"], .event-data input[type="date"] { min-width: 0; width: 100%; }
/* (d) Mesas del plano: «4 puestos» en una línea; si la mesa es angosta, «4 p.» (el nombre completo
   está en el aria-label de la mesa). */
.fg-table { container-type: inline-size; }
.fg-table .fg-seats { white-space: nowrap; max-width: 100%; }
.fg-table .fg-short { display: none; }
@container (max-width: 58px) { .fg-table .fg-long { display: none; } .fg-table .fg-short { display: inline; } }

/* Acciones de documentos (POS-0003): fuera del botón de fila, accesibles también en móvil. */
.cc-row-footer { padding: 8px 14px 14px; border-bottom: 1px solid var(--line); }
.cc-invoice-actions { display: grid; gap: 6px; margin-top: 8px; }
.cc-invoice-actions > .row { flex-wrap: wrap; gap: 8px; }
.invoice-edit-row { display: grid; grid-template-columns: minmax(0,1fr) 84px auto; gap: 10px; align-items: center; }
.invoice-edit-row > span { overflow-wrap: anywhere; }
.invoice-add > summary { padding: 10px 0; cursor: pointer; }
.invoice-add .stack { max-height: 230px; overflow-y: auto; }
.st-doc-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; grid-column: 1 / -1; }
@media(max-width:599px) { .navtabs.has-extra .navtab { font-size:14px; gap:4px; padding:0 5px; } .navtabs.has-extra .navtab svg { width:16px; } }

/* Recepción de solicitudes antes de asignar un domicilio. */
.delivery-inbox { margin:0 0 18px; padding:14px; border:1px solid var(--line,#D8DCDF); border-radius:14px; }
.delivery-inbox h3 { font-size:16px; margin:0; }
.delivery-inbox-card { width:100%; margin-top:10px; padding:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; text-align:left; border:1px solid var(--line,#D8DCDF); border-radius:10px; background:var(--surface,#fff); color:inherit; cursor:pointer; }
.delivery-inbox-card b { flex:1; }
.delivery-inbox-card .small { width:100%; }
.delivery-customer-list { display:flex; flex-direction:column; gap:8px; max-height:240px; overflow:auto; }
.delivery-customer-list .btn { justify-content:space-between; gap:12px; }
.delivery-customer-list .selected { outline:2px solid var(--accent,#E4002B); }
.delivery-customer-preview { padding:12px; border:1px solid var(--line,#D8DCDF); border-radius:10px; }
.delivery-request-lines { margin:0; padding:0; list-style:none; }
.delivery-request-lines li,.delivery-draft-line { display:flex; flex-direction:column; gap:5px; padding:10px 0; border-bottom:1px solid var(--line,#D8DCDF); }
.delivery-draft { grid-column:1/-1; margin:12px 0; min-width:0; }
.delivery-draft .gline { padding:14px; }
.delivery-draft .stack>p { margin:0; }
.delivery-inbox input,.delivery-draft input { max-width:100%; }
/* Los nombres de clientes pueden ser largos; el título conserva el ancho del teléfono. */
.delivery-order .crumbs h1 { flex-shrink:1; min-width:0; }
.delivery-history-row { display:flex; flex-wrap:wrap; gap:8px 12px; padding:10px 0; border-bottom:1px solid var(--line); }
.delivery-history-row a { width:100%; }
.delivery-draft-line-actions { display:grid; grid-template-columns:max-content repeat(2,minmax(0,1fr)); align-items:center; gap:10px; }
.delivery-draft-line-actions > .num { white-space:nowrap; }
.delivery-draft-line-actions > .btn { min-width:0; width:100%; padding-inline:8px; }
@media (max-width:600px) {
  .delivery-draft-line-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .delivery-draft-line-actions > .num { grid-column:1/-1; }
}

/* Mesas numeradas sin posiciones físicas. */
.mesas-lista { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; }
.mesas-lista .tbl { min-height:110px; position:relative; }
.mesas-counter { margin:16px; }

/* Configuración de mesas numeradas. */
.mesas-config-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mesas-config-workspace { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.mesas-config-workspace h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.mesas-config-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mesas-config-list .btn { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; min-height: 60px; padding: 10px 12px; gap: 2px; }
.mesas-config-list .btn.on { box-shadow: 0 0 0 2px var(--coral); }
.mesas-config-archived { margin-top: 14px; }
.mesas-config-archived summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink-2); }
@media (max-width: 899px) { .mesas-config-workspace { grid-template-columns: minmax(0, 1fr); } }
.mesas-config-workspace:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* Acceso plegable al planeador conservado. */
.counter-events { max-width: 1180px; margin: 16px auto 0; border-top: 1px solid var(--line); }
.counter-events > summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 4px; cursor: pointer; list-style: none; }
.counter-events > summary::-webkit-details-marker { display: none; }
.counter-events > summary h2 { margin: 0; font-size: 18px; font-weight: 600; }
.counter-events-count { color: var(--ink-2); font-size: 13px; }
.counter-events > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-lg); }
.counter-events[open] > summary > svg:last-child { transform: rotate(180deg); }
.counter-events #counter-events-content { padding: 0 0 14px; }
.counter-events-mode { gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.counter-events-mode .seg button { min-height: 44px; padding: 0 12px; white-space: nowrap; }

/* Mesas: reglas tomadas de la versión de Opus en la consolidación de la ola 2 (2026-11-02) */
.tbl {
  --tb: var(--surface); --ch: #E6E8EA; --tx: var(--ink);
  position: relative; width: 100%; aspect-ratio: 1; color: var(--tx); display: block;
}
.tbl .c { position: absolute; background: var(--ch); border-radius: 5px; }
.tbl .c.t, .tbl .c.b { left: 50%; transform: translateX(-50%); width: 40%; height: 9px; }
.tbl .c.t { top: 0; } .tbl .c.b { bottom: 0; }
.tbl .c.l, .tbl .c.r { top: 50%; transform: translateY(-50%); height: 40%; width: 9px; }
.tbl .c.l { left: 0; } .tbl .c.r { right: 0; }
.tbl .face {
  position: absolute; inset: 12px; border-radius: var(--r); background: var(--tb); box-shadow: var(--sh-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px;
  transition: transform .08s;
}
.tbl.round .face { border-radius: 50%; }
.tbl .lbl { font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.tbl .info.note { padding: 0 8px; background: var(--green-soft); color: var(--green); }
.tbl .info {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 4px; border-radius: 11px;
  font-size: 12.5px; font-weight: 500; background: rgba(255, 255, 255, .5); color: var(--coral-ink); white-space: nowrap;
}
.tbl .info .ic { width: 14px; height: 14px; border-radius: 7px; background: var(--coral-ink); color: #fff; display: grid; place-items: center; }
.tbl .mark { position: absolute; top: 18px; right: 18px; }
.tbl .who { position: absolute; top: 17px; left: 17px; }
.tbl.busy { --tb: var(--peach); --ch: var(--peach); --tx: var(--coral-ink); }
.tbl.mine { --tb: var(--coral); --ch: var(--coral); --tx: #fff; }
.tbl.mine .face { box-shadow: 0 0 0 6px rgba(228, 0, 43, .24); }
.tbl.mine .info { background: rgba(255, 255, 255, .22); color: #fff; }
.tbl.mine .info .ic { background: #fff; color: var(--coral); }
.tbl .info.late { background: var(--amber-soft); color: var(--amber); }
.tbl .info.late .ic { background: var(--amber); color: #fff; }
.tbl:active .face { transform: scale(.97); }
.tbl:disabled { opacity: .4; }
@media (max-width: 899px)  { .tbl .face { inset: 9px; gap: 3px; padding: 4px; } }
@media (max-width: 899px)  { .tbl .lbl { font-size: 26px; } }
@media (max-width: 899px)  { .tbl .info { font-size: 11px; height: 19px; padding: 0 6px 0 3px; } }
@media (max-width: 899px)  { .tbl .info .ic { width: 12px; height: 12px; } }
@media (max-width: 899px)  { .tbl .mark { top: 13px; right: 13px; } .tbl .who { display: none; } }
@media (max-width: 420px)  { .tbl .lbl { font-size: 24px; } }
@media (max-width: 420px)  { .tbl .info { font-size: 10.5px; height: 18px; padding: 0 5px 0 3px; gap: 3px; } }
@media (max-width: 420px)  { .tbl .mark { top: 10px; right: 10px; width: 16px; height: 16px; } }
.mesas-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.mesas-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mesas-legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--surface); box-shadow: var(--sh-1); }
.mesas-legend i.busy { background: var(--peach); } .mesas-legend i.mine { background: var(--coral); }
/* Espacios Domi 101 a 105 (14/10): accesos a los domicilios abiertos de Caja, debajo de las
   mesas y con el mismo tamaño de mesa; el borde punteado los separa de las mesas reales. */
.domi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 12px 10px; margin-top: 10px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.domi-row .tbl.domi { aspect-ratio: auto; min-height: 76px; }
.domi-row .tbl.domi .face { inset: 0; gap: 3px; padding: 4px 2px; border-radius: var(--r); }
.domi-row .tbl.domi.free { --tb: #EEF2F7; --tx: var(--c-navy); }
.domi-row .domi-name { font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1; }
.domi-row .tbl .lbl { font-size: 24px; }
.domi-row .tbl .info { font-size: 11px; height: 19px; padding: 0 6px 0 3px; gap: 3px; }
.domi-row .tbl .info .ic { width: 12px; height: 12px; }
.domi-more { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 899px)  { .domi-row { gap: 6px 4px; padding: 8px 5px; } }
@media (max-width: 899px)  { .domi-row .tbl.domi { min-height: 66px; } }
@media (max-width: 899px)  { .domi-row .tbl .lbl { font-size: 20px; } }
@media (max-width: 899px)  { .domi-row .tbl .info { font-size: 9px; height: 15px; padding: 0 2px; gap: 1px; } }
@media (max-width: 899px)  { .domi-row .tbl .info .ic { display: none; } }
@media (max-width: 899px)  { .domi-row .tbl .info.note { font-size: 8px; } }
.tbl { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tbl .info.time { background: var(--wait-bg, rgba(255, 255, 255, .5)); color: var(--wait-fg, var(--coral-ink)); font-weight: 600; }
.tbl .info.time .ic { background: var(--wait-fg, var(--coral-ink)); }
.tbl .info.time.late { font-weight: 800; }