/* tpv23 — Caja táctil · temas claro (default) y oscuro con un clic */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Tema claro (por defecto) */
  --bg: #eef1f6; --panel: #ffffff; --panel2: #e9edf3; --line: #d5dbe5;
  --text: #1b2230; --muted: #5a6474; --accent: #22d3ee; --green: #059669;
  --red: #dc2626; --amber: #b45309;
  --radius: 12px;
  /* Apoyo semántico (cambian con el tema) */
  --accent-ink: #0e7490;  /* cyan legible como TEXTO sobre fondos claros */
  --text-soft: #5f6a7d;   /* textos secundarios */
  --text-faint: #8b94a7;  /* textos tenues / totales vacíos */
  --line-strong: #c4ccd9; /* bordes de estado (ocupada, dots libres) */
  --sel-ring: #1b2230;    /* anillo de selección sobre la paleta */
  --red-soft: #fdeaea;    /* fondo de chips de anulado */
  --amber-soft: #fdf3d7;  /* fondo de chips de pendiente */
  --dot-brd: rgba(0, 0, 0, .3);
  --danger-brd: rgba(220, 38, 38, .4);
}
[data-theme="dark"] {
  --bg: #0f0f13; --panel: #17171e; --panel2: #1f1f28; --line: #2a2a35;
  --text: #e4e4e7; --muted: #9a9aa5; --accent: #22d3ee; --green: #34d399;
  --red: #f87171; --amber: #fbbf24;
  --accent-ink: #22d3ee; --text-soft: var(--text-soft); --text-faint: var(--text-faint);
  --line-strong: var(--line-strong); --sel-ring: #ffffff;
  --red-soft: var(--red-soft); --amber-soft: var(--amber-soft);
  --dot-brd: rgba(255, 255, 255, .25);
  --danger-brd: rgba(248, 113, 113, .4);
}
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; border: 0; border-radius: var(--radius); }
input, select { font: inherit; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; }
label { display: block; color: var(--muted); font-size: 13px; margin: 12px 0 4px; }
h2 { font-size: 22px; margin-bottom: 4px; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.primary { background: var(--accent); color: #062a33; font-weight: 700; padding: 12px 20px; }
.primary:disabled { opacity: .4; cursor: not-allowed; }
.primary.big { width: 100%; padding: 16px; font-size: 18px; margin-top: 12px; }
.ghost { background: var(--panel2); color: var(--text); padding: 8px 14px; border: 1px solid var(--line); }
.danger { color: var(--red); }
.error { color: var(--red); margin-top: 8px; font-size: 13px; }
.badge { background: var(--green); color: #052e1f; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
/* Badge de turno: es un BOTÓN (abre/cierra turno). Verde con turno abierto,
   gris cuando está cerrado, y con feedback al pasar/pulsar para que se note
   que se puede tocar (antes era un <span> decorativo y parecía pulsable). */
.badge-turno { border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; transition: transform .12s ease, filter .12s ease; }
.badge-turno:hover { filter: brightness(1.12); }
.badge-turno:active { transform: scale(.96); }
.badge-turno-on { background: var(--green); color: #052e1f; }
.badge-turno-off { background: var(--panel2); color: var(--text-soft); border-color: var(--line); }
.badge-turno-off:hover { border-color: var(--accent); color: var(--text); }
.caja-turno { display: none; } /* indicador de turno: en móvil vive junto al nombre (chip); en escritorio se usa el badge del header */
.empty { color: var(--muted); text-align: center; margin: 40px 0; }

/* Vistas de auth */
.view { height: 100vh; }
.view.center { display: flex; align-items: center; justify-content: center; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 32px; width: 420px; max-width: 92vw; }
.login-card { text-align: center; }
.logo, .brand { font-weight: 800; }
.logo { font-size: 34px; }
.logo span, .brand span { color: var(--accent-ink); }
.sub { color: var(--muted); margin: 8px 0 20px; font-size: 14px; }
#googleBtn { display: flex; justify-content: center; margin-top: 16px; }

/* Topbar */
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); height: 56px; }
.brand { font-size: 18px; }
/* ── Logo del negocio (cabecera de la app + editor en Datos del negocio) ── */
.brand-logo { height: 28px; width: auto; max-width: 150px; object-fit: contain; display: block; border-radius: 6px; }
.logo-edit { display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid rgba(128,128,128,.22); margin-top: 14px; padding-top: 12px; }
.logo-caja { flex: 0 0 auto; }
.logo-prev { width: 68px; height: 68px; object-fit: contain; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; padding: 5px; }
.logo-prev.vacio { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); border-style: dashed; background: transparent; }
.logo-botones { display: flex; gap: 8px; }
.logo-nota { margin: 6px 0 0; font-size: 11.5px; }
.local-info { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.local-info strong { font-size: 15px; }
.local-info span { color: var(--muted); font-size: 12px; }
.local-info.con-logo strong { display: none; } /* con logo arriba basta el logo: sin nombre repetido */
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.top-actions::-webkit-scrollbar { display: none; }
.top-actions > * { flex: 0 0 auto; }
.top-actions .ghost { white-space: nowrap; }

/* Layout caja */
.caja-layout { display: grid; grid-template-columns: var(--w-mesas) 1fr var(--w-comanda); gap: 10px; padding: 10px; height: calc(100vh - 56px); --w-mesas: 260px; --w-comanda: 420px; position: relative; }
.mesas-panel { background: var(--panel); border-radius: var(--radius); padding: 12px; overflow-y: auto; }
.comanda-panel { background: var(--panel); border-radius: var(--radius); padding: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1500px) { .caja-layout { --w-mesas: 240px; --w-comanda: 400px; } }
@media (max-width: 1360px) { .caja-layout { --w-mesas: 220px; --w-comanda: 370px; } }
@media (max-width: 1150px) { .caja-layout { --w-mesas: 200px; --w-comanda: 330px; } }

/* ── Columnas expandibles (PC/tablet): colapsar paneles y trabajar con 2 de 3 ── */
.caja-col-carta { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 20px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.caja-col-carta:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.caja-col-carta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .caja-layout.no-mesas { grid-template-columns: 1fr var(--w-comanda); }
  .caja-layout.no-comanda { grid-template-columns: var(--w-mesas) 1fr; }
  .caja-layout.no-carta { grid-template-columns: 1fr 1fr; }
  .caja-layout.no-mesas.no-comanda, .caja-layout.no-mesas.no-carta, .caja-layout.no-carta.no-comanda { grid-template-columns: 1fr; }
  .caja-layout .panel.colapsado { display: none; }
  /* Panel único centrado con ancho cómodo (la carta sí ocupa todo) */
  .caja-layout.uno .mesas-panel:not(.colapsado), .caja-layout.uno .comanda-panel:not(.colapsado) { justify-self: center; width: 100%; max-width: 720px; }
  /* Botones de colapso en los gutters entre columnas */
  .caja-col { position: absolute; top: 50%; transform: translateY(-50%); z-index: 35; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); color: var(--text-soft); cursor: pointer; padding: 0; box-shadow: 0 2px 10px rgba(2, 15, 20, .22); }
  .caja-col:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
  .caja-col svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .caja-col .ic-exp { display: none; }
  /* mesas: en el gutter derecho de su columna; al colapsarse, pegado al borde izquierdo */
  .caja-col[data-caja="mesas"] { left: calc(var(--w-mesas) + 4px); }
  .caja-layout.no-mesas .caja-col[data-caja="mesas"] { left: 4px; }
  /* comanda: espejo en el gutter izquierdo; al colapsarse, borde derecho */
  .caja-col[data-caja="comanda"] { right: calc(var(--w-comanda) + 4px); }
  .caja-layout.no-comanda .caja-col[data-caja="comanda"] { right: 4px; }
  /* carta: solo botón de restaurar (cuando está colapsada), centrado en el gutter central */
  .caja-col[data-caja="carta"] { display: none; left: calc(50% - 13px); }
  .caja-layout.no-carta .caja-col[data-caja="carta"] { display: flex; }
  /* con la carta oculta, mesas y comanda crecen: sus colapsadores (anclados al ancho fijo)
     quedarían dentro del panel → se ocultan; el restaurador central manda */
  .caja-layout.no-carta .caja-col[data-caja="mesas"],
  .caja-layout.no-carta .caja-col[data-caja="comanda"] { display: none; }
  /* con dos paneles colapsados, los restauradores se apilan en el borde */
  .caja-layout.no-carta.no-mesas .caja-col[data-caja="carta"] { left: 4px; top: calc(50% + 32px); }
  .caja-layout.no-carta.no-comanda .caja-col[data-caja="carta"] { left: auto; right: 4px; top: calc(50% + 32px); }
  /* iconos según el estado de cada panel */
  .caja-layout.no-mesas .caja-col[data-caja="mesas"] .ic-col { display: none; }
  .caja-layout.no-mesas .caja-col[data-caja="mesas"] .ic-exp { display: block; }
  .caja-layout.no-comanda .caja-col[data-caja="comanda"] .ic-col { display: none; }
  .caja-layout.no-comanda .caja-col[data-caja="comanda"] .ic-exp { display: block; }
  .caja-col[data-caja="carta"] .ic-col { display: none; }
  /* Handles de arrastre: redimensionar mesas/comanda manteniendo las 3 columnas */
  .caja-drag { position: absolute; top: 0; bottom: 0; width: 16px; z-index: 34; cursor: col-resize; touch-action: none; -webkit-user-select: none; user-select: none; }
  .caja-drag::after { content: ''; position: absolute; top: 14%; bottom: 14%; left: 50%; width: 3px; transform: translateX(-50%); border-radius: 3px; background: var(--line); opacity: .6; }
  .caja-drag:hover::after, .caja-drag.arrastrando::after { background: var(--accent-ink); opacity: .85; }
  .caja-drag[data-drag="mesas"] { left: calc(var(--w-mesas) - 3px); }
  .caja-drag[data-drag="comanda"] { right: calc(var(--w-comanda) - 3px); }
  /* solo con las 3 (o carta+comanda / mesas+carta) visibles; nunca si su columna o la carta falta */
  .caja-layout.no-mesas .caja-drag[data-drag="mesas"], .caja-layout.no-carta .caja-drag[data-drag="mesas"],
  .caja-layout.no-comanda .caja-drag[data-drag="comanda"], .caja-layout.no-carta .caja-drag[data-drag="comanda"] { display: none; }
}
@media (max-width: 899px) { .caja-col, .caja-col-carta, .caja-drag { display: none !important; } }
/* Sala = plano compacto por zonas (el mapa ES la vista de mesas) */
.mesas-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.plano-llv { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 7px 10px; font-weight: 700; font-size: 13px; cursor: pointer; background: var(--panel2); width: 100%; color: var(--text); }
.plano-llv .estado-llv { margin-left: auto; font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.plano-llv .estado-llv b { color: var(--accent-ink); }
.plano-llv.ocupada { border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel2)); }
.plano-llv.cobrar { border: 1.5px solid var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--panel2)); }
.llv-stack { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; container-type: inline-size; }
.llv-stack > * { flex: 1 1 100%; min-width: 0; }
/* Cuando la COLUMNA da de sí (container query: ancho real, no el del dispositivo),
   "Nuevo para llevar" y "Mostrador" comparten fila con la etiqueta completa (Gon 23-sep). */
@container (min-width: 300px) {
  .llv-stack > [data-llv-nuevo], .llv-stack > [data-llv-fast] { flex: 1 1 auto; width: auto; white-space: nowrap; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {
    .llv-stack > [data-llv-nuevo], .llv-stack > [data-llv-fast] { flex: 1 1 auto; width: auto; white-space: nowrap; }
  }
}
.plano-llv.nuevo { border-style: dashed; opacity: .92; }
.plano-llv.activa { box-shadow: inset 0 0 0 2px var(--accent-ink); }
.alerg-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.alerg-chip { border: 1px solid var(--linea); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; background: var(--panel); color: var(--muted); cursor: pointer; }
.alerg-chip.on { background: color-mix(in srgb, var(--amber) 25%, var(--panel)); border-color: var(--amber); color: var(--text); }
.plano-zona-mini h4 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 6px; display: flex; align-items: center; gap: 4px; }
.plano-zona-mini h4:first-child { margin-top: 0; }
/* Vista plano embebida en la sala (toggle ☰/🗺): mismo layout de filas que el editor */
.mesas-plano-view .plano-llv, .mesas-plano-view .ocup-ahora { width: 100%; box-sizing: border-box; }
.mesas-plano-view .plano-suelo { min-height: 72px; }
/* Cabecera de espacio clicable en la vista plano (minimizar) */
.pz-plano { background: none; border: 0; border-radius: 0; padding: 2px 2px 6px; margin-top: 0; font-size: 13.5px; justify-content: flex-start; }
.pz-plano .pz-meta { margin-left: auto; }
.mesas-plano-view .pm-ver { cursor: pointer; }
.mesas-plano-view .pm-ver:hover .pm-circulo { transform: scale(1.04); }
.vista-mesas { margin-left: auto; }
.vista-mesas .seg-btn { padding: 4px 9px; font-size: 13px; line-height: 1; }
#vistaMesasSeg { margin-bottom: 0; }
.plano-grid-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* Cabecera de espacio colapsable en la sala */
.pz-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; margin-top: 10px; font-size: 12.5px; font-weight: 800; color: var(--text); }
.pz-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }
.pz-flecha { font-size: 9px; color: var(--muted); }
.plano-zona-mini .plano-grid-mini.cerrada { display: none; }
.plano-zona-mini:first-of-type .pz-head { margin-top: 0; }
.plano-mesa-mini { border: 2px solid var(--line); background: var(--panel2); border-radius: 12px; padding: 8px 7px 7px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; transition: border-color .15s; }
.plano-mesa-mini .pmm-nombre { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding-right: 12px; }
.plano-mesa-mini .pmm-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; font-weight: 600; flex-wrap: wrap; row-gap: 2px; }
.plano-mesa-mini .pmm-meta b { color: var(--accent-ink); font-size: 12px; margin-left: auto; }
.plano-mesa-mini .pmm-plazas { color: var(--muted); font-weight: 600; font-size: 10.5px; opacity: .85; }
.plano-mesa-mini .pmm-meta.libre { color: var(--muted); opacity: .8; gap: 6px; }
.plano-mesa-mini .pmm-libre-txt { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
/* LED de estado (esquina): gris=libre · cian=ocupada · ámbar=por cobrar */
.pmm-led { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.plano-mesa-mini.ocupada { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--panel2)); }
.plano-mesa-mini.ocupada .pmm-led { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.plano-mesa-mini.ocupada .pmm-plazas { color: var(--accent-ink); opacity: 1; }
.plano-mesa-mini.cobrar { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--panel2)); }
.plano-mesa-mini.cobrar .pmm-led { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.plano-mesa-mini.cobrar .pmm-plazas { color: #8a5a00; opacity: 1; }
.plano-mesa-mini.sel { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.plano-mesa-mini.fav .pmm-nombre::before { content: '⭐'; margin-right: 2px; font-size: 10px; }
/* Bullets de líneas: azul = pendientes de servir · ámbar = servido esperando cobro */
.mdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mdot-pend { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
.mdot-cob { background: var(--amber); box-shadow: 0 0 5px var(--amber); }
.ocup-ahora { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ocup-ahora b { color: var(--text); margin-left: auto; }
.ocup-ahora .ocup-llv { font-size: 11px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 2px 7px; }
/* ── Panel BI ── */
.bi-contenido { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 14px; }
.bi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.bi-kpi { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--panel); }
.bi-kpi span { font-size: 12px; color: var(--muted); display: block; }
.bi-kpi b { font-size: 24px; color: var(--accent-ink); }
.bi-kpi small { color: var(--muted); font-size: 11.5px; }
.bi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bi-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--panel); }
.bi-card h3 { font-size: 14px; margin: 0 0 10px; }
.bi-wide { grid-column: 1 / -1; }
.bi-barra { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 7px; }
.bi-barra .b-nombre { width: 110px; flex: none; color: var(--muted); }
.bi-barra .b-track { flex: 1; height: 10px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.bi-barra .b-fill { display: block; height: 100%; background: var(--accent); border-radius: 6px; min-width: 2px; }
.fill-efectivo { background: var(--green) !important; }
.fill-tarjeta { background: var(--accent) !important; }
.fill-z-terraza { background: #ff9f43 !important; }
.fill-z-barra { background: #8b5cf6 !important; }
.fill-z-parallevar { background: #94a3b8 !important; }
.fill-z-otras { background: #94a3b8 !important; }
.bi-barra .b-val { width: 92px; text-align: right; font-weight: 700; }
.bi-top { display: flex; flex-direction: column; gap: 6px; }
.bi-top-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.bi-top-item .pos { width: 22px; height: 22px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none; }
.bi-top-item:nth-child(1) .pos { background: var(--amber); color: #1a1206; border-color: var(--amber); }
.bi-top-item .t-nombre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-top-item .t-cant { color: var(--muted); font-size: 12px; }
.bi-top-item .t-imp { font-weight: 700; }
@media (max-width: 700px) {
  .bi-grid { grid-template-columns: 1fr; }
  .bi-kpis { grid-template-columns: 1fr 1fr; }
}
.productos-panel { display: flex; flex-direction: column; overflow: hidden; }
.cat-tabs { display: none; } /* las pestañas quedan sustituidas por el desplegable en todos los tamaños */
/* ── Herramientas de carta: buscador + desplegable de categorías (todos los tamaños) ── */
.carta-tools { display: flex; gap: 8px; align-items: center; padding: 2px 10px 8px; }
@media (min-width: 768px) {
  .carta-tools { padding: 2px 0 8px; }
}
.buscador-wrap { position: relative; flex: 1; min-width: 180px; max-width: 420px; }
#buscaProd { width: 100%; padding: 9px 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 14px; outline: none; }
#buscaProd:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.busca-sugs { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.22); z-index: 60; overflow: hidden; max-height: min(46vh, 380px); overflow-y: auto; }
.busca-sug { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px; text-align: left; color: var(--text); border-bottom: 1px solid var(--line); }
.busca-sug:last-child { border-bottom: 0; }
.busca-sug:hover, .busca-sug:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.busca-sug img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.busca-sug .bs-nom { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-sug .bs-cat { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.busca-sug .bs-precio { font-weight: 800; font-size: 13.5px; color: var(--accent-ink); flex: 0 0 auto; }
.cat-drop-wrap { position: relative; flex: 0 0 auto; }
.cat-drop-btn { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 22px; white-space: nowrap; }
.cat-drop-btn .cat-sec-flecha { font-size: 9px; transition: transform .15s; }
.cat-drop-btn.open .cat-sec-flecha { transform: rotate(180deg); }
.cat-drop { position: absolute; top: calc(100% + 6px); right: 0; width: min(300px, 80vw); background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.22); z-index: 60; max-height: min(55vh, 420px); overflow-y: auto; padding: 6px; }
.cat-drop-fila { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; color: var(--text); }
.cat-drop-fila:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.cat-drop-fila .cd-check { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.cat-drop-fila .cd-nombre { flex: 1; text-align: left; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.cat-drop-fila.oculta .cd-nombre { opacity: .45; text-decoration: line-through; }
.cat-drop-fila .cd-n { font-size: 11px; color: var(--muted); background: var(--panel); border-radius: 20px; padding: 1px 7px; }
.cat-drop-fila.todas { border-bottom: 1px solid var(--line); border-radius: 0; padding-bottom: 9px; margin-bottom: 4px; }
.cat-drop-fila.todas:hover { background: transparent; }
.cat-drop-fila.todas .cd-nombre { font-weight: 800; }
.cat-drop-fila.activa { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cat-drop-vacio { padding: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.busca-sug .bs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.busca-sug .bs-foto-vacia { width: 34px; flex: 0 0 auto; }
/* En pantallas anchas el panel de sugerencias de la CARTA se ensancha (no solo el ancho
   del campo): ocupa una región grande de la pantalla. JS lo encaja dentro del viewport. */
@media (min-width: 1024px) {
  #cartaTools .busca-sugs { left: auto; right: auto; width: min(680px, calc(100vw - 24px)); max-height: min(60vh, 480px); }
}
.cat-tab { background: var(--panel2); color: var(--muted); padding: 8px 16px; border-radius: 20px; white-space: nowrap; }
.cat-tab.sel { background: var(--accent); color: #062a33; font-weight: 700; }
.productos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); grid-auto-rows: max-content; gap: 8px; overflow-y: auto; padding-bottom: 8px; }
/* Carta por secciones de categoría (colapsables) */
.productos-grid.con-secciones { display: block; }
.cat-seccion { margin-bottom: 10px; }
.cat-sec-head { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; color: var(--text); font-weight: 800; font-size: 14px; }
.cat-sec-head:active { transform: scale(.995); }
.cat-sec-nombre { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-sec-n { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); border-radius: 20px; font-size: 11px; font-weight: 800; padding: 1px 8px; }
.cat-sec-flecha { font-size: 10px; color: var(--muted); }
.cat-sec-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.cat-sec-body.cerrada { display: none; }
.prod-btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 8px; font-size: 14px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text); position: relative; }
.prod-btn .precio { color: var(--accent-ink); font-weight: 700; font-size: 13px; }
.prod-btn.agotado { opacity: .35; text-decoration: line-through; }
.prod-btn .cat-dot { position: absolute; top: 6px; left: 7px; width: 8px; height: 8px; border-radius: 50%; }
.cat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cat-tab { display: inline-flex; align-items: center; gap: 6px; }

/* Comanda */
.comanda-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.comanda-head h3 { margin: 0; }
.comanda-ops { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.comanda-ops .mini { font-size: 11.5px; padding: 5px 8px; }
.comanda-cobrado { font-size: 11.5px; color: var(--muted); background: var(--panel2); border-radius: 8px; padding: 5px 10px; margin-top: 6px; }
.comanda-cobrado b { color: var(--green); }
.partes-bar { display: flex; align-items: center; gap: 6px; margin-top: 6px; background: var(--panel2); border-radius: 10px; padding: 5px 8px; font-size: 12.5px; font-weight: 700; }
.partes-bar .mini { font-size: 11px; padding: 3px 7px; }
.partes-bar span { flex: 1; text-align: center; }
.split-modos { display: flex; gap: 8px; margin: 10px 0; }
.split-modos .seg-btn { flex: 1; border: 1.5px solid var(--line); background: none; border-radius: 12px; padding: 10px; font-weight: 700; cursor: pointer; color: var(--text); }
.split-modos .seg-btn.sel { border-color: var(--accent); background: rgba(34, 211, 238, .12); }
.split-panel { margin-top: 4px; }
.split-tips { margin: 8px 0 0; padding-left: 18px; color: var(--text); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.split-fila { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper b { font-size: 18px; min-width: 22px; text-align: center; }
.mover-destinos { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 46vh; overflow-y: auto; }
.mover-mesa { display: flex; align-items: center; gap: 8px; width: 100%; border: 1.5px solid var(--line); background: var(--panel2); border-radius: 12px; padding: 11px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.mover-mesa:hover { border-color: var(--accent); }
.mover-mesa .oc { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.mover-mesa.ocupada { opacity: .75; }
.comanda-lines { flex: 1; overflow-y: auto; overflow-x: hidden; }
.comanda-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); border-radius: 8px; flex-wrap: wrap; row-gap: 4px; }
.comanda-line .cant { background: var(--panel2); border-radius: 8px; padding: 2px 8px; font-weight: 700; color: var(--accent-ink); min-width: 32px; text-align: center; }
.comanda-line .nombre { flex: 1; font-size: 14px; min-width: min(45%, 130px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comanda-line .nombre .ln-mod { font-size: 11px; color: var(--muted); font-weight: 600; }.comanda-line .imp { font-weight: 600; }
.comanda-line .acc-line { background: none; border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.comanda-line .acc-line.servir { color: var(--green); }
/* Fondo de la línea en consonancia con su estado (servir / en cocina / servido) */
.comanda-line.servida, .comanda-line.lista, .comanda-line.en-cocina {
  padding: 6px 8px; border-bottom-color: transparent; margin: 3px 0;
  transition: background .25s ease, border-color .25s ease;
}
.comanda-line.en-cocina { background: color-mix(in srgb, var(--amber) 9%, transparent); }
.comanda-line.servida { opacity: 1; background: color-mix(in srgb, var(--green) 13%, transparent); }
.comanda-line.servida .nombre::after { content: ' ✓'; color: var(--green); font-weight: 700; }
/* Quitar línea: sutil y solo tiene sentido antes de servirla (si está servida → Deshacer) */
.comanda-line .acc-line.quitar { opacity: .38; padding: 2px 7px; border-color: transparent; background: transparent; }
.comanda-line .acc-line.quitar:hover { opacity: 1; color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); }
.comanda-line input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent-ink); }
.comanda-resumen { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; padding: 4px 0; }
.comanda-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 2px solid var(--line); margin-top: 6px; font-size: 14px; color: var(--muted); }
.comanda-total strong { font-size: 22px; color: var(--text); }

/* Modales */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 70; } /* por encima de la nav móvil (60) */
/* Modales que se abren DESDE otro modal (devolución y movimiento de efectivo
   salen de la caja). Con el mismo z-index ganaba el orden del DOM y el modal
   de la caja —que va después en el HTML— los tapaba. Los subimos por encima. */
.modal.modal-supra { z-index: 80; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; width: 420px; max-width: 94vw; max-height: 88vh; overflow-y: auto; }
.modal-box.small { width: 380px; padding: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.primary.danger-solid { background: #e5484d; color: #fff; }
.primary.danger-solid:hover { background: #d1363b; }
.modal-box.wide { width: 640px; }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
/* Descuentos en el cobro */
.cobro-desc { border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 10px; margin: 10px 0 4px; display: flex; flex-direction: column; gap: 6px; background: var(--panel); }
.cobro-desc-head { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cobro-desc-line { display: flex; align-items: center; gap: 8px; }
.cobro-desc-line .cd-nombre { flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobro-desc-line .cd-pct { width: 62px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--text); font-size: 13px; text-align: right; }
.cobro-desc-line .cd-imp { font-weight: 700; font-size: 12.5px; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.cobro-desc-line .cd-cort { font-size: 13px; padding: 3px 7px; }
.cobro-desc-total { border-top: 1px dashed var(--line); padding-top: 5px; font-size: 12px; color: var(--muted); text-align: right; }
.cobro-desc-total b { color: var(--green); }
/* Alertas */
.alert-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 800; margin-left: 5px; padding: 0 4px; vertical-align: top; }
.alertas-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.alerta-item { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); }
.alerta-item.nueva { border-color: var(--accent); background: rgba(34, 211, 238, .07); }
.alerta-ico { font-size: 20px; }
.alerta-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alerta-cuerpo small { color: var(--muted); font-size: 12px; }
.alerta-meta { font-size: 11px !important; }
/* Permisos de descuento en la fila de equipo */
.eq-permisos { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.eq-perm-desc { width: 52px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel2); color: var(--text); font-size: 12px; text-align: right; }
.eq-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ticket-desc { font-size: 12px; color: var(--green); font-weight: 700; margin: 0 0 4px; text-align: center; }
.pay-btn { background: var(--panel2); border: 1px solid var(--line); padding: 18px; font-size: 16px; border-radius: 12px; }
.pay-btn:hover { border-color: var(--accent-ink); }
.pay-btn.full { grid-column: 1 / -1; }
/* SumUp · estados de espera del datáfono en el cobro */
.sumup-espera { text-align: center; padding: 22px 10px 6px; }
.sumup-espera .se-ico { font-size: 42px; line-height: 1; }
.sumup-espera .se-titulo { font-size: 17px; font-weight: 700; margin: 10px 0 4px; }
.sumup-espera .se-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; min-height: 18px; }
.sumup-espera .ghost { font-size: 14px; }
.sumup-espera .se-ico .sync-ind { width: 26px; height: 26px; border-width: 3px; }
/* Cobro en emisión: la zona de descuentos queda bloqueada (anti doble-cobro) */
#modalCobro.cobro-busy #cobroDesc { pointer-events: none; opacity: .45; }
.ticket-result { text-align: center; margin-top: 12px; padding-top: 16px; border-top: 1px dashed var(--line); }
#qrCanvas { display: flex; justify-content: center; margin: 8px 0; }
#qrCanvas svg, #qrCanvas img { width: 180px; height: 180px; background: #fff; padding: 6px; border-radius: 8px; }
.ticket-num { font-weight: 800; font-size: 18px; }
.ticket-huella { color: var(--muted); font-size: 11px; word-break: break-all; font-family: monospace; margin: 6px 0 12px; }
.ticket-actions { display: flex; gap: 8px; justify-content: center; }
.ticket-actions .danger { padding: 12px 20px; border: 1px solid var(--danger-brd); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); font-weight: 700; }
.ticket-actions .danger:hover { border-color: var(--red); }

/* Catálogo modal */
.cat-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 8px; margin-bottom: 14px; }
.cat-form input, .cat-form select { width: auto; }
.prod-list { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.prod-list th, .prod-list td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.prod-list .acc { cursor: pointer; font-size: 12px; }
.acc { display: inline-block; border: 1px solid var(--line); background: none; color: var(--text); border-radius: 14px; padding: 5px 12px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.acc.danger { border-color: var(--danger-brd); color: #f87171; }
.chip-ok { color: var(--green); font-size: 12px; }
.chip-ago { color: #fbbf24; font-size: 12px; }
.chip-ocu { color: var(--muted); font-size: 12px; }
.fila-oculta td { opacity: .55; }
.prod-scroll { flex: 1; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; min-height: 0; }
/* Catálogo a pantalla completa */
.modal.full { padding: 0; }
.modal.full .modal-box { width: 100vw; max-width: none; height: 100dvh; border-radius: 0; max-height: none; display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cat-head h2 { font-size: 22px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cat-head h2 .sub { font-size: 13px; font-weight: 400; }
.cat-head-acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cat-head-acc .primary { font-size: 15px; padding: 10px 18px; }
.cat-head-acc .ghost { font-size: 14px; padding: 10px 16px; border-radius: 10px; }
.cat-head-acc .icon-close { width: 42px; height: 42px; font-size: 16px; }
#modalCatalogo .prod-list { min-width: 720px; }
#modalCatalogo .prod-list td { font-size: 15px; padding: 10px 12px; }
#modalCatalogo .prod-list th { padding: 10px 12px; position: sticky; top: 0; background: var(--panel); z-index: 1; }
#modalCatalogo .prod-scroll { max-height: none; }
/* Modal artículo (añadir/editar) */
.art-box { width: 540px; }
.art-form { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.art-form .campo label { margin: 8px 0 4px; font-size: 13px; }
.art-form input, .art-form select { font-size: 19px; padding: 12px 14px; }
.art-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.art-actions { display: flex; gap: 10px; margin-top: 18px; }
.art-actions .primary { flex: 1.4; font-size: 17px; padding: 14px; }
.art-actions .ghost { flex: 1; font-size: 16px; padding: 14px; }
.big { font-size: 16px; }
#prodCatDot { width: 44px; height: 44px; }
/* Modal caja / arqueo */
.caja-box { width: 440px; }
.caja-info { color: var(--muted); font-size: 14px; margin-top: 4px; }
.caja-campos { margin-top: 14px; }
.caja-campos label { font-size: 13px; display: block; margin-bottom: 6px; }
.caja-campos input { font-size: 34px; font-weight: 800; text-align: center; padding: 14px; letter-spacing: .04em; width: 100%; }
.caja-preview { text-align: center; font-size: 14px; margin-top: 8px; min-height: 20px; }
.caja-preview.ok { color: var(--green); }
.caja-preview.ko { color: var(--red); }
.caja-resultado { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 12px; background: var(--panel2); }
.caja-res-linea { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.caja-res-linea.total { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 8px; font-weight: 800; font-size: 16px; }
.caja-res-linea.total b { color: var(--accent-ink); }
/* ── Efectivo del cajón (módulo de efectivo) ── */
.caja-efectivo { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 2px 0 10px; background: var(--panel2); }
.ce-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ce-top span { font-size: 12.5px; color: var(--muted); }
.ce-top b { font-size: 20px; color: var(--accent-ink); white-space: nowrap; }
.ce-detalle { margin-top: 2px; font-size: 12px; }
.ce-cambio { margin-top: 6px; font-size: 13px; color: var(--amber); }
.ce-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ce-botones button { padding: 6px 10px; font-size: 13px; }
.ce-movs { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 148px; overflow: auto; }
.ce-mov { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ce-mov-m { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-mov-m small { display: block; color: var(--muted); font-size: 11px; }
.ce-mov b.ok { color: var(--green); }
.ce-mov b.ko { color: var(--red); }
.contador-box { width: min(430px, 94vw); }
.cont-filas { max-height: 52vh; overflow: auto; margin: 10px 0; display: flex; flex-direction: column; gap: 5px; }
.cont-fila { display: flex; align-items: center; gap: 8px; }
.cont-etq { width: 58px; font-size: 13.5px; }
.cont-btn { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.cont-btn:active { transform: scale(.94); }
.cont-num { width: 58px; text-align: center; font-size: 15px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.cont-sub { margin-left: auto; font-size: 13px; color: var(--muted); min-width: 66px; text-align: right; }
.cont-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); padding-top: 8px; }
.cont-total span { color: var(--muted); font-size: 13px; }
.cont-total b { font-size: 22px; color: var(--accent-ink); }
.mov-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
.mov-chip { padding: 6px 10px; font-size: 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; }
.mov-chip.sel { border-color: var(--accent); color: var(--accent-ink); }
/* Barra inferior del móvil: sección de personalización */
.tb-cfg-sep { margin: 14px 0 2px; font-size: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.tb-cfg-fila.fijo { opacity: .8; }
.tb-cfg-fila.fijo em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12px; }
.tb-cfg-fila.bloqueada { opacity: .45; }
/* Informes · actividad por mesa: barra de proporción bajo el nombre */
.mesas-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 4px; max-width: 150px; }
.mesas-bar i { display: block; height: 100%; background: var(--accent); }
/* Indicador de carga de las pestañas de Informes (spinner grande y centrado) */
.inf-cargando { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 12px; color: var(--muted); font-size: 13.5px; }
.inf-cargando .sync-ind { width: 22px; height: 22px; border-width: 3px; margin: 0; }
/* Devolución (rectificativa R5) */
.dev-lista { display: flex; flex-direction: column; gap: 6px; max-height: 54vh; overflow: auto; }
.dev-fila { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); cursor: pointer; }
.dev-fila:active { transform: scale(.99); }
.dev-fila b { font-size: 14.5px; }
.dev-fila small { display: block; color: var(--muted); font-size: 11.5px; }
.dev-fila .imp { margin-left: auto; font-weight: 800; }
.dev-caret { color: var(--muted); font-size: 20px; line-height: 1; }
.dev-ok { text-align: center; padding: 10px 4px 14px; }
.dev-ok-ico { font-size: 42px; line-height: 1; }
.dev-ok h3 { margin: 8px 0 4px; }
.dev-msg { color: var(--red); font-size: 13px; margin: 8px 2px 0; min-height: 0; }
/* Modal Equipo a pantalla completa */
.eq-layout { display: grid; grid-template-columns: 400px 1fr; gap: 18px; flex: 1; min-height: 0; }
.eq-col-left { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; padding-right: 4px; }
.eq-col-list { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.eq-col-list h3 { margin-bottom: 10px; }
.eq-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--panel); }
.eq-card h3 { font-size: 15px; margin-bottom: 8px; }
.eq-hint { color: var(--muted); font-size: 13px; margin-bottom: 10px; line-height: 1.5; }
.eq-code-big { display: flex; align-items: center; gap: 12px; background: var(--panel2); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 12px 16px; margin-bottom: 6px; }
.eq-code-big b { font-size: 30px; letter-spacing: .28em; color: var(--accent-ink); }
.eq-code-big .ghost { font-size: 14px; }
.eq-form { display: flex; flex-direction: column; gap: 10px; }
.eq-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.eq-form input, .eq-form select { font-size: 17px; padding: 10px 12px; color: var(--text); }
.eq-lista { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; min-height: 0; }
.eq-fila { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; column-gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--panel); }
.eq-fila.inactivo { opacity: .55; }
.eq-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #062a33; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.eq-nom { flex: 1 1 150px; min-width: 0; }
.eq-nom b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-nom small { color: var(--muted); font-size: 12px; }
.eq-fila select { padding: 6px 8px; font-size: 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); flex-shrink: 0; }
.chip-rol { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); white-space: nowrap; }
.eq-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.eq-switch input { opacity: 0; width: 0; height: 0; }
.eq-switch span { position: absolute; inset: 0; background: var(--text-faint); border-radius: 20px; transition: .2s; cursor: pointer; }
.eq-switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.eq-switch input:checked + span { background: var(--green); }
/* Switch de acceso a caja con su icono FUERA del switch (el label .eq-switch es una caja fija 40×22 y taparía el emoji) */
.eq-caja { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.eq-caja-ico { font-size: 15px; line-height: 1; }
/* 📣 Avisos de sala (pedidos QR + «atiéndeme» + delegación) */
.av-badge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; text-align: center; padding: 0 4px; margin-left: 2px; }
.av-banner { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 65; width: min(560px, calc(100vw - 16px)); display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--panel); border: 1.5px solid var(--accent); border-radius: 12px; padding: 8px 12px; box-shadow: 0 8px 26px rgba(0, 0, 0, .22); }
.av-banner.hidden { display: none; }
.avb-txt { font-size: 13.5px; min-width: 0; }
.avb-btns { display: flex; gap: 6px; flex-shrink: 0; }
.avb-btns button { font-size: 12.5px; padding: 6px 10px; border-radius: 9px; }
.av-wrap { flex: 1; overflow-y: auto; padding: 4px 2px 20px; }
.av-h { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 6px; }
.av-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); margin-bottom: 8px; }
.av-ico { font-size: 20px; flex-shrink: 0; }
.av-info { flex: 1 1 160px; min-width: 0; }
.av-info b { font-size: 15px; }
.av-info small { color: var(--muted); font-size: 12px; }
.av-det { display: block; }
.av-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.av-btns button { font-size: 12.5px; padding: 6px 10px; border-radius: 9px; }
.av-btns select { padding: 5px 6px; font-size: 12.5px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.qmod { display: block; color: var(--muted); font-size: 12px; font-style: italic; margin-top: 2px; }
/* Orden de categorías en la carta (▲▼ en QRs de carta) */
.cat-orden { background: transparent; border: 1px solid var(--line); border-radius: 7px; padding: 2px 7px; font-size: 11px; color: var(--muted); cursor: pointer; }
.cat-orden:disabled { opacity: .35; cursor: default; }
/* ⭐ Valoraciones (pestaña en Informes) */
.inf-val-top { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.inf-val-top > div { flex: 1 1 130px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; text-align: center; }
.inf-val-top small { display: block; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.inf-val-top span { font-size: 15px; color: #f59e0b; letter-spacing: 2px; }
.inf-val-top b { font-size: 19px; }
.inf-val-tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.inf-val-tabla th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.inf-val-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.inf-vals-ulti { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.inf-val { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); }
.inf-val .iv { color: #f59e0b; letter-spacing: 2px; }
.inf-val small { color: var(--muted); font-size: 12px; }
.inf-val p { margin: 6px 0 0; font-size: 14px; }
/* Avatar de usuario + menú (patrón FichaYa) */
.user-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #062a33; font-weight: 800; font-size: 16px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.user-avatar:hover { filter: brightness(1.08); }
.user-menu { position: absolute; top: 58px; right: 14px; width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.35); z-index: 90; overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.um-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; background: var(--panel); }
.um-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #062a33; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.um-head b { display: block; font-size: 15px; }
.um-head small { color: var(--muted); font-size: 12px; word-break: break-all; }
.um-body { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.um-fila { padding: 2px 8px; }
.um-body .ghost { justify-content: flex-start; font-size: 14px; padding: 10px 12px; border-radius: 10px; }
.um-fichaje { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 10px; background: var(--panel2); }
.um-fy-linea { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.um-fy-estado { font-weight: 700; }
.um-fy-estado.in { color: var(--green); }
.um-fy-estado.out { color: var(--muted); }
.um-fy-botones { display: flex; gap: 8px; margin-top: 8px; }
.um-fy-botones .primary { flex: 1; font-size: 15px; padding: 10px; }
.um-fy-orgs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.um-fy-orgs .ghost { font-size: 13px; padding: 8px 10px; }
.topbar { position: relative; }
/* Modal datos del negocio */
.modal-box.caja-box .two-cols label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.modal-box.caja-box .two-cols select { font-size: 15px; padding: 9px 10px; color: var(--text); }
@media (max-width: 600px) {
  .user-menu { position: fixed; top: 52px; right: 8px; left: 8px; width: auto; }
}
@media (max-width: 900px) {
  .eq-layout { grid-template-columns: 1fr; overflow-y: auto; }
  .eq-col-list { overflow: visible; }
}
#modalCatalogo .prod-list td, #modalCatalogo .prod-list th { padding: 8px 10px; }
#modalCatalogo .col-acc { white-space: nowrap; width: 1%; text-align: right; }
#modalCatalogo .prod-list small { color: var(--muted); font-size: 11px; }
.acc:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.agotado-chip { color: var(--amber); font-size: 12px; }

/* ── Barra de destino (evitar ventas en mesa equivocada) ── */
.destino-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.destino-bar .mini { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 20px; padding: 3px 10px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.destino-bar .mini:hover { color: var(--red); border-color: var(--red); }
/* 19-sep-2026 (reporte de Gonzalo): en pantallas pequeñas/horizontal «Retener» y «📌» se
   montaban uno sobre otro y los botones se partían en 2 líneas al comprimirse la columna.
   Los controles de la barra NUNCA se encogen (flex: none) y la barra puede pasar a 2 filas. */
.destino-bar > * { flex: 0 0 auto; }
.destino-bar .mini { white-space: nowrap; }

/* ── Toast de confirmación (click accidental) ── */
.toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); background: #062a33; color: var(--accent); border: 1px solid var(--accent); padding: 10px 18px; border-radius: 24px; font-weight: 700; font-size: 15px; z-index: 90; box-shadow: 0 6px 20px rgba(0,0,0,.5); animation: toastIn .18s ease-out; }
@media (min-width: 900px) { .toast { bottom: 24px; } }
/* Acciones de línea de comanda agrupadas (chips cocina + servir + ✕). Si no caben
   en la fila, bajan a una segunda línea alineadas a la derecha (el nombre manda). */
.comanda-line .accs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
/* En pantallas reducidas: la línea se parte en DOS filas — info arriba (nombre SIN
   truncar: el extra fluye o se toca para verlo) y acciones debajo a la derecha */
@media (max-width: 700px) {
  .comanda-line { flex-wrap: wrap; row-gap: 4px; }
  .comanda-line .nombre { white-space: normal; line-height: 1.3; }
  .comanda-line .nombre .ln-mod { white-space: normal; }
  .comanda-line .accs { flex-basis: 100%; justify-content: flex-end; }
  .comanda-line .accs .acc-line { padding: 4px 12px; }
}
/* Modal detalle de línea (popup al tocar el nombre) */
.ln-box { width: min(92vw, 380px); }
.ln-mod-full { font-size: 13px; color: var(--muted); font-weight: 600; margin: 2px 0 8px; white-space: normal; }
.ln-info { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.ln-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; border-bottom: 1px dashed var(--line); padding: 5px 0; }
.ln-fila span { color: var(--muted); }
.ln-fila b { display: inline-flex; align-items: center; gap: 6px; text-align: right; }
/* Modal ＋ añadir mesa/silla desde el plano */
.add-mesa-box { width: min(94vw, 420px); }
.pa-label { display: block; font-size: 11px; color: var(--muted); font-weight: 800; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.pa-tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pa-tipos button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 9px 2px 7px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel2); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color .12s, background .12s; }
.pa-tipos button span { font-size: 10px; font-weight: 800; color: var(--muted); }
.pa-tipos button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); box-shadow: 0 0 0 1px var(--accent); }
.pa-tipos button.on span { color: var(--accent-ink); }
.cfg-input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--text); padding: 8px 10px; font-size: 14px; }
.pa-acciones { display: flex; gap: 8px; margin-top: 16px; }
.pa-acciones button { flex: 1; }
/* Cabecera de espacio editable (editor del plano): título + ▲▼ para reordenar */
.pz-head-editable { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 2px 0 5px; font-size: 13px; }
.pz-head-editable .pz-titulo { display: inline-flex; align-items: center; gap: 4px; }
.pz-ordena { display: inline-flex; gap: 3px; }
.pz-ord { width: 24px; height: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); color: var(--muted); font-size: 10px; line-height: 1; cursor: pointer; padding: 0; }
.pz-ord:hover { color: var(--accent-ink); border-color: var(--accent); }
/* Panel de error interno (instrumentación): visible hasta recargar */
#errPanel { display: none; position: fixed; left: 10px; right: 10px; bottom: 90px; z-index: 96; background: #5c0e0e; color: #fff; border: 1px solid #ff8a8a; border-radius: 12px; padding: 10px 12px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.55); gap: 6px; flex-direction: column; align-items: flex-start; }
#errPanel.visible { display: flex; }
#errPanel b { color: #ffd0d0; font-size: 13px; }
#errPanel span { word-break: break-word; font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.4; max-height: 120px; overflow: auto; }
#errPanel .err-btn { background: #fff; color: #5c0e0e; border: 0; border-radius: 8px; padding: 7px 14px; font-weight: 800; font-size: 13px; cursor: pointer; }
@media (min-width: 900px) { #errPanel { left: auto; right: 16px; bottom: 70px; width: 380px; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
/* ── Login PIN / setup seg / Equipo ── */
.sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--muted); font-size: 12px; }
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg { display: flex; background: var(--panel2); border-radius: 22px; padding: 3px; margin-bottom: 14px; }
.seg .seg-btn { flex: 1; background: none; border: 0; color: var(--muted); border-radius: 20px; padding: 8px; font-weight: 600; cursor: pointer; }
.seg .seg-btn.sel { background: var(--accent); color: #062a33; }
.eq-msg { font-size: 12px; color: var(--green); }
.login-card { width: 400px; position: relative; }
#btnPinLogin { margin-top: 10px; }
.datos-box { max-height: 88vh; overflow-y: auto; }
/* Modal de cantidad */
.cant-box { width: 300px; text-align: center; }
.cant-box h3 { margin-bottom: 2px; }
.cant-stepper { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 14px 0 16px; font-size: 26px; font-weight: 800; }
.cant-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel2); color: var(--accent-ink); font-size: 22px; cursor: pointer; }
.cant-btn:active { transform: scale(.94); }
#cantOk { width: 100%; margin-bottom: 8px; }
/* Categoría como etiqueta con color */
.cat-input-row { display: flex; align-items: center; gap: 8px; }
.cat-input-row input { flex: 1; }
#prodCatDot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--dot-brd); background: #22d3ee; flex: none; cursor: pointer; transition: transform .1s; }
#prodCatDot:active { transform: scale(.9); }
.cat-paleta { display: none; flex-wrap: wrap; gap: 8px; padding: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.cat-paleta.visible { display: flex; }
.cat-paleta .col { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.cat-paleta .col.sel { border-color: var(--sel-ring); }

.datos-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding-bottom: 8px; }
@media (max-width: 899px) {
  .datos-box { width: 100%; max-width: none; max-height: calc(100vh - 70px); border-radius: 0; }
  .datos-mesas { grid-template-columns: repeat(2, 1fr); }
  .datos-head { flex-wrap: wrap; }
}

/* ── Informes (Z imprimible · CSV · rankings) ── */
.inf-cuerpo { flex: 1; overflow-y: auto; min-height: 0; padding: 4px 2px 18px; }
.inf-tab { display: none; }
.inf-tab.on { display: flex; flex-direction: column; gap: 12px; }
.inf-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inf-acciones .inp { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--text); font-size: 13px; }
.rank-acciones { justify-content: space-between; }
.cat-head .seg { margin-bottom: 0; }
.rank-acciones .seg { flex: 1; min-width: 210px; margin-bottom: 0; }
.rank-acciones .seg-btn { font-size: 12.5px; }
#infTabs { flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
#infTabs .seg-btn { font-size: 13px; white-space: nowrap; padding: 7px 10px; flex: 1 1 auto; }
#btnInformesClose { flex: 0 0 auto; }
.inf-host { display: flex; flex-direction: column; gap: 10px; }
.inf-csv-box { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 16px; max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.inf-csv-box h3 { margin: 0; }
/* Papel A4 (en pantalla se previsualiza; en print es lo único visible) */
.z-paper { background: #fff; color: #10242b; border-radius: 6px; box-shadow: 0 6px 24px rgba(2, 20, 26, .18); max-width: 760px; width: 100%; margin: 0 auto; padding: 30px 36px; font-size: 13px; line-height: 1.45; }
.z-paper h1 { font-size: 17px; margin: 0 0 2px; color: #0b3b46; text-transform: uppercase; letter-spacing: .06em; }
.z-paper .z-local { font-size: 15px; font-weight: 800; }
.z-paper .z-sub { color: #5b6f76; font-size: 12px; }
.z-paper .z-cab { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #0b3b46; padding-bottom: 10px; margin-bottom: 14px; gap: 12px; }
.z-paper h2 { font-size: 11px; color: #5b6f76; text-transform: uppercase; letter-spacing: .09em; margin: 18px 0 6px; border-bottom: 1px solid #dbe4e7; padding-bottom: 3px; }
.z-paper table { width: 100%; border-collapse: collapse; }
.z-paper td { padding: 2.5px 4px; }
.z-paper td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.z-paper tr.tot td { border-top: 1.5px solid #0b3b46; font-weight: 800; padding-top: 6px; }
.z-paper .big { font-size: 17px; font-weight: 800; color: #0b3b46; }
.z-paper .z-fila { display: flex; justify-content: space-between; padding: 2.5px 0; }
.z-paper .z-fila b { font-variant-numeric: tabular-nums; }
.z-paper .z-neta { font-weight: 800; font-size: 14px; }
.z-paper .z-metodo { display: inline-block; padding: 3px 12px; border-radius: 14px; font-weight: 700; font-size: 12px; margin: 6px 8px 0 0; }
.z-paper .z-top li { margin-bottom: 3px; }
.z-paper .z-pie { margin-top: 18px; border-top: 1px solid #dbe4e7; padding-top: 8px; font-size: 10.5px; color: #5b6f76; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.z-paper .mono { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; word-break: break-all; }
/* rankings en papel */
.rank-paper td.rank-n { font-weight: 800; }
.rank-paper .medalla { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.rank-paper .m1 { background: #fbbf24; color: #1a1206; }
.rank-paper .m2 { background: #cbd5e1; color: #0f172a; }
.rank-paper .m3 { background: #f59e0b; color: #1a1206; }
.rank-barra { height: 7px; border-radius: 4px; background: #e2ebee; overflow: hidden; min-width: 60px; }
.rank-barra i { display: block; height: 100%; background: #0e7490; border-radius: 4px; }
/* Impresión: solo se imprime el papel clonado en #printRoot; @page margin 0
   evita la URL/fecha que el navegador añade en cabecera y pie del PDF */
#printRoot { display: none; }
@page { size: A4; margin: 0; }
@media print {
  body > :not(#printRoot) { display: none !important; }
  #printRoot { display: block; }
  #printRoot .z-paper { box-shadow: none; border-radius: 0; max-width: none; width: 100%; margin: 0; padding: 16mm 16mm 10mm; }
  #printRoot .z-paper h2, #printRoot .z-paper tr, #printRoot .z-fila, #printRoot .z-top li, #printRoot .z-metodo { page-break-inside: avoid; }
  /* Hoja de QRs de carta: 3 por fila, sin bordes de app */
  #printRoot .qr-paper { padding: 8mm; }
  #printRoot .qr-paper h2 { text-align: center; font-size: 16pt; margin: 0 0 6mm; }
  #printRoot .qr-paper .qr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; }
  #printRoot .qr-tarjeta { border: 1px solid #bbb; border-radius: 4mm; padding: 4mm; text-align: center; page-break-inside: avoid; }
  #printRoot .qr-tarjeta b { display: block; font-size: 12pt; margin-bottom: 2mm; }
  #printRoot .qr-tarjeta svg { width: 42mm; height: 42mm; }
  #printRoot .qr-tarjeta small { display: block; margin-top: 1.5mm; font-size: 7pt; color: #444; word-break: break-all; }
}
/* ── Papel: ticket suelto y hoja de tickets del día (solo visible al imprimir) ── */
.tk-cab { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #0b3b46; padding-bottom: 8px; margin-bottom: 10px; gap: 12px; }
.tk-cab h1 { font-size: 17px; margin: 0 0 2px; color: #0b3b46; text-transform: uppercase; letter-spacing: .06em; }
.tk-anulada { background: #fdeaea; color: #a11; border: 2px solid #c33; border-radius: 6px; text-align: center; font-weight: 800; font-size: 15px; padding: 6px; margin-bottom: 8px; }
.tk-leyenda { text-align: center; font-weight: 800; font-size: 10px; letter-spacing: .12em; color: #0b3b46; }
.tk-pie { margin-top: 14px; border-top: 1px solid #dbe4e7; padding-top: 6px; font-size: 10px; color: #5b6f76; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qr-tarjeta.anul { border-color: #e0a3a3; }
.qr-tarjeta.anul b { color: #a33; }
.tk-day .tk-cab { margin-bottom: 14px; }
.ticket-desc.anulado-badge { color: var(--red); font-weight: 800; }
.inf-ok { background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-size: 14px; color: var(--text); margin-top: 10px; }
.inf-ok b { color: var(--accent-ink); }
/* Al imprimir, el papel siempre en tinta oscura sobre blanco (aunque la app esté en tema oscuro) */
@media print {
  #printRoot .z-paper { color: #10242b; }
  #printRoot .qr-paper .qr-tarjeta, #printRoot .qr-paper .qr-tarjeta b,
  #printRoot .qr-paper .qr-tarjeta small, #printRoot .qr-paper .qr-tarjeta div { color: #10242b; }
  #printRoot .qr-paper .qr-tarjeta { background: #fff; }
  #printRoot .qr-paper .qr-tarjeta.anul b { color: #a33; }
  #printRoot .tk-paper { max-width: 80mm; margin: 0 auto; padding: 8mm; }
  #printRoot .tk-paper .tk-cab { border-bottom-width: 1px; }
}
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 4px 0 8px; }
.qr-tarjeta { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; text-align: center; }
.qr-tarjeta b { display: block; font-size: 13px; margin-bottom: 4px; color: var(--text); }
.qr-tarjeta svg { width: 100%; height: auto; border-radius: 6px; }
.qr-tarjeta small { display: block; margin-top: 4px; font-size: 9.5px; color: var(--muted); word-break: break-all; line-height: 1.3; }
.mesas-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mesas-head h3 { margin: 0; }
.mesas-acc { display: flex; gap: 6px; }
.mesas-acc .mini { font-size: 15px; padding: 4px 8px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); cursor: pointer; }
.mesas-acc .mini:hover { border-color: var(--accent-ink); }
.plano-zonas { flex: 1; overflow-y: auto; padding: 6px 2px 16px; display: flex; flex-direction: column; gap: 18px; }
/* ── Plano por FILAS: cada fila = N zonas (columnas iguales) con UNA altura compartida.
     Sin espacio para varias cajas (lateral estrecho / móvil) → cada zona a su línea. ── */
#planoZonas, .mesas-plano-view { display: flex; flex-direction: column; gap: 16px; }
#planoZonas { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; container-type: inline-size; }
.mesas-plano-view { flex: 1; overflow-y: auto; padding-bottom: 10px; container-type: inline-size; }
.plano-fila { display: flex; flex-direction: column; gap: 3px; position: relative; }
.plano-fila-bar { display: flex; align-items: center; gap: 8px; padding: 1px 2px; font-size: 12px; color: var(--muted); min-width: 0; }
.plano-fila-bar .pf-titulo { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plano-fila-bar .pa-sel { margin-left: auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 12px; color: var(--text); flex: none; }
.plano-fila-grid { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 12px; align-items: stretch; min-height: var(--fila-h, 220px); }
.plano-cell { display: flex; min-width: 0; }
/* Responsivo: si el contenedor no da para varias cajas → cada zona a su propia línea */
@container (max-width: 560px) {
  .plano-fila-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Tarjeta de zona: llena su celda (altura = la de su fila, --fila-h) */
.plano-area { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px 14px; display: flex; flex-direction: column; box-sizing: border-box; flex: 1; width: 100%; min-width: 0; min-height: var(--fila-h, 220px); }
.plano-area h3 { font-size: 14px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.plano-area h3 .sub { flex: 1; text-align: right; }
.plano-area .plano-suelo { flex: 1; }
.plano-suelo { position: relative; border: 1.5px dashed var(--line); border-radius: 12px; background:
  radial-gradient(var(--line-strong) 1px, transparent 1px) 0 0 / 22px 22px; min-height: 72px; padding: 6px; touch-action: none; user-select: none; }
/* Tirador de ALTURA de la fila (solo edición): franja bajo la fila */
.plano-fila { padding-bottom: 2px; }
#planoZonas .plano-fila { padding-bottom: 14px; }
.plano-resize { position: absolute; left: 4%; right: 4%; bottom: 0; height: 14px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; letter-spacing: 3px; cursor: ns-resize; user-select: none; touch-action: none; z-index: 3; }
.plano-resize::before { content: ''; position: absolute; inset: 6px 0; border-top: 2px dashed var(--line-strong); }
.plano-resize:hover { color: var(--accent-ink); }
.plano-resize.hidden { display: none; }
/* Mesas: % del ancho del suelo con TOPE absoluto (nunca enormes); el nombre lo escala reUbicarPlano */
.pm-drag { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: grab; z-index: 1; width: min(calc(14% * var(--esc, 1)), calc(120px * var(--esc, 1))); min-width: 44px; }
.pm-drag.s { width: min(calc(11% * var(--esc, 1)), calc(96px * var(--esc, 1))); }
.pm-drag.l { width: min(calc(17% * var(--esc, 1)), calc(150px * var(--esc, 1))); }
.pm-drag.dragging { cursor: grabbing; z-index: 5; opacity: .9; }
/* El círculo escala con el suelo (width %) */
.pm-drag .pm-circulo { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid var(--line-strong); background: var(--cm, var(--panel2)); color: var(--text); font-weight: 800; text-align: center; padding: 0 3px; transition: border-color .15s, box-shadow .15s, transform .1s; position: relative; width: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; word-break: break-word; overflow: hidden; font-size: 13px; }
/* Mesa con color personalizado: el fondo es SU color y el texto va en blanco con sombra */
.pm-drag.con-color .pm-circulo { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.pm-drag .pm-circulo i { font-style: normal; }
/* Formas de mesa */
.pm-drag.forma-cuadrada .pm-circulo { border-radius: 24%; }
.pm-drag.forma-rectangular { width: min(calc(22% * var(--esc, 1)), calc(180px * var(--esc, 1))); min-width: 56px; }
.pm-drag.forma-rectangular.s { width: min(calc(18% * var(--esc, 1)), calc(140px * var(--esc, 1))); }
.pm-drag.forma-rectangular.l { width: min(calc(27% * var(--esc, 1)), calc(220px * var(--esc, 1))); }
.pm-drag.forma-rectangular .pm-circulo { aspect-ratio: 2.1 / 1; border-radius: 30%; font-size: 12px; }
/* Forma silla (taburete: barra, rincones, terraza): taburete con 💺 y nombre pequeño */
/* Silla: silueta de silla vista desde arriba — píldora estrecha (asiento + respaldo curvo)
 * con el nombre FUERA (etiqueta sobre la silla: dentro de la silueta no cabe). */
.pm-drag.forma-silla .pm-circulo { width: 58%; aspect-ratio: 1 / 1.5; border-radius: 50%; font-size: 9px; }
.pm-drag.forma-silla.s .pm-circulo { width: 62%; }
.pm-drag.forma-silla .pm-nom { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 800; color: var(--text); opacity: .88; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; text-shadow: 0 1px 2px var(--panel), 0 0 5px var(--panel); }
.pm-drag.forma-silla.con-color .pm-nom { opacity: 1; }
.pm-drag.forma-silla .pm-importe { margin-top: 1px; }
/* ── Sillas de la mesa (plano): puntitos alrededor según las plazas ──
   El tamaño de la silla va en --cs y las posiciones (left/top con calc) las emite
   posSillas() en app.js — redonda en círculo, cuadrada/rectangular por lados. */
.pm-drag { --cs: clamp(6px, 10%, 10px); }
.pm-drag.s { --cs: clamp(5px, 10%, 8px); }
.pm-sillas { position: absolute; inset: 0; pointer-events: none; }
.pm-sillas i { position: absolute; width: var(--cs); height: var(--cs); border-radius: 50%; background: var(--line-strong); transform: translate(-50%, -50%); transition: background .15s; }
.pm-drag.ocupada .pm-sillas i { background: var(--accent); }
.pm-drag.cobrar .pm-sillas i { background: var(--amber); }
.pm-drag.sel .pm-sillas i { background: #ff7a1a; }
/* Con sillas: la píldora del importe baja un poco para no pisar los puntitos de abajo */
.pm-drag.con-sillas.imp-abajo .pm-importe { top: calc(100% + 7px); }
.pm-drag.con-sillas.imp-arriba .pm-importe { bottom: calc(100% + 7px); }
.pm-drag:hover .pm-circulo { transform: scale(1.04); }
.pm-drag.ocupada .pm-circulo { border-color: var(--accent); background: var(--cm, color-mix(in srgb, var(--accent) 12%, var(--panel2))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pm-drag.cobrar .pm-circulo { border-color: var(--amber); background: var(--cm, color-mix(in srgb, var(--amber) 14%, var(--panel2))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); }
/* ── MESA ACTIVA (seleccionada): anillo NARANJA + escala + pin — contrasta con el
   cian de 'ocupada', el ámbar de 'cobrar' y el gris de 'libre' ── */
.pm-drag.sel { z-index: 4; }
.pm-drag.sel .pm-circulo { outline: 3px solid #ff7a1a; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(255, 122, 26, .28), 0 0 20px rgba(255, 122, 26, .45), 0 8px 18px rgba(0, 0, 0, .35); transform: scale(1.06); }
#mesasPlanoView .pm-drag.sel::before { content: '📍'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 14px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); z-index: 6; pointer-events: none; }
.plano-mesa-mini.sel { outline: 3px solid #ff7a1a; outline-offset: 1px; box-shadow: 0 0 0 6px rgba(255, 122, 26, .22), 0 6px 14px rgba(0, 0, 0, .35); }
/* Tarjeta mini con color de mesa: franja izquierda del color */
.plano-mesa-mini.con-color { border-left: 5px solid var(--cm); }
/* Popover de tamaño de mesa en el editor del plano (−/+ %; solo la mesa, el texto no escala) */
.plano-pop { position: absolute; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; gap: 3px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; padding: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); white-space: nowrap; }
.plano-pop button { min-width: 27px; height: 27px; border: 0; border-radius: 8px; background: var(--panel2); color: var(--text); font-size: 14px; font-weight: 800; cursor: pointer; }
.plano-pop button:hover { background: color-mix(in srgb, var(--accent) 30%, var(--panel2)); }
.pp-colores, .pp-escala { display: flex; align-items: center; gap: 2px; }
.pp-colores { padding-bottom: 3px; border-bottom: 1px dashed var(--line); margin-bottom: 1px; }
.pp-colores .pp-c { min-width: 0; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .18); }
.pp-colores .pp-c.on { border-color: #fff; box-shadow: 0 0 0 2px var(--text); }
.pp-colores .pp-c-none { background: var(--panel2); color: var(--muted); font-size: 11px; border: 1px dashed var(--line-strong); display: inline-flex; align-items: center; justify-content: center; }
.plano-pop .pp-pct { min-width: 46px; text-align: center; font-size: 12px; font-weight: 800; color: var(--accent-ink); }
.plano-pop .pp-x { background: none; color: var(--muted); font-size: 11px; }
.pm-importe { position: absolute; font-size: 11px; font-weight: 800; color: var(--accent-ink); background: var(--panel); border: 1px solid var(--line); padding: 1px 8px; border-radius: 10px; white-space: nowrap; z-index: 2; }
/* Colocación del importe por mesa (la decide ajustarImportes(): arriba por defecto;
   si choca con mesa/importe vecino → abajo → a los lados. Así nunca se tapan. */
.pm-drag.imp-arriba .pm-importe { left: 50%; transform: translateX(-50%); bottom: calc(100% + 4px); }
.pm-drag.imp-abajo .pm-importe { left: 50%; transform: translateX(-50%); top: calc(100% + 4px); }
.pm-drag.imp-der .pm-importe { left: calc(100% + 4px); top: 50%; transform: translateY(-50%); }
.pm-drag.imp-izq .pm-importe { right: calc(100% + 4px); top: 50%; transform: translateY(-50%); }
.pm-drag.cobrar .pm-importe { color: #8a5a00; border-color: var(--amber); }
.pm-badge { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; border-radius: 10px; font-size: 10.5px; font-style: normal; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; color: #fff; }
.pm-badge.pend { background: var(--accent); }
.pm-badge.serv { background: var(--amber); color: #1a1206; }
/* 📌 Reserva de mesa: badge en el plano + toggle ⏸ retener en la barra de destino */
.pm-resv { position: absolute; top: -7px; left: -7px; background: #f59e0b; color: #fff; border-radius: 10px; font-size: 10px; font-weight: 800; padding: 1px 5px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); z-index: 2; }
.plano-mesa-mini.reservada .pmm-nombre { color: #b45309; }
:root[data-theme="dark"] .plano-mesa-mini.reservada .pmm-nombre { color: #fbbf24; }
.ret-lbl { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
/* 19-sep-2026 v2 (Gonzalo): grupo compacto de acciones de mesa — [⏸ Retener · 🖥 Marchar · 📌]
   viajan JUNTOS como una unidad alineada a la derecha; antes el 📌 quedaba huérfano en 2ª fila. */
.destino-acc { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.destino-acc .ret-lbl { border: 1px solid var(--line); border-radius: 20px; padding: 4px 10px; min-height: 28px; flex: 0 0 auto; }
.destino-acc .ret-lbl:hover { border-color: var(--line-strong); color: var(--text); }
.destino-acc .ret-lbl:has(input:checked) { border-color: var(--accent-ink); color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.destino-acc .mini { min-height: 28px; }
@media (max-width: 899px) {
  .destino-acc { gap: 6px; }
  .destino-acc .mini, .destino-acc .ret-lbl { min-height: 30px; }
  .destino-bar { justify-content: flex-start; gap: 8px; padding: 8px 10px; }
}
/* 🌐 Pedido del cliente por QR (directo): badge en plano + chip en comanda + selector en modal Cartas QR */
.pm-qr { position: absolute; top: -7px; right: -7px; background: #0ea5e9; color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); z-index: 2; }
/* Si la mesa también tiene badge de unidades (pendientes/servidas), el 🌐 se aparta a su izquierda */
.pm-drag:has(.pm-badge) .pm-qr { right: 15px; }
.chip.qr-cli { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; font-weight: 700; }
.mdot.mdot-qr { background: #0ea5e9; }
[data-theme="dark"] .chip.qr-cli { background: #082f49; color: #7dd3fc; border-color: #0c4a6e; }
.qm-box { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.qm-box > b { display: block; margin-bottom: 6px; font-size: 14px; }
.qm-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.qm-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; cursor: pointer; padding: 3px 2px; min-width: 0; width: 100%; }
.qm-opt > span { min-width: 0; flex: 1 1 0%; overflow-wrap: anywhere; }
.qm-opt input { margin-top: 3px; accent-color: var(--accent); flex: 0 0 auto; width: auto; }
.qm-opt b { display: block; font-weight: 700; overflow-wrap: anywhere; }
.qm-opt small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ret-lbl input { accent-color: var(--accent); cursor: pointer; }
/* Zona cerrada en la sala: colapsa a su cabecera (no ocupa la altura de la fila) */
.mesas-plano-view .plano-cell:has(.plano-area.cerrada) { align-self: start; }
.mesas-plano-view .plano-area.cerrada { flex: 0 0 auto; min-height: 0; padding-bottom: 8px; }
.mesas-plano-view .plano-area.cerrada .plano-suelo { display: none; }
/* Las mesas del plano escalan con su suelo (width %) → sin tamaños fijos en px por debajo */
.cfg-mesas { flex: 1; overflow-y: auto; padding: 4px 2px; }
.cfg-lista { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.cfg-fila { display: grid; grid-template-columns: minmax(120px, 1fr) 64px 130px 118px 44px 44px; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--panel); }
.cfg-fila .cfg-btns { display: flex; gap: 6px; align-items: center; justify-content: flex-end; grid-column: span 2; }
.cfg-fila input, .cfg-fila select { font-size: 15px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); min-width: 0; }
.cfg-fila .cfg-forma { font-size: 13px; }
/* Modal de Espacios (zonas dinámicas) */
.zonas-cfg { display: flex; flex-direction: column; gap: 10px; }
.zonas-lista { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.zona-fila { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.zona-fila.inactiva { opacity: .75; background: color-mix(in srgb, var(--muted) 6%, var(--panel2)); }
.zona-fila.inactiva .zona-nombre-edit { color: var(--muted); text-decoration: line-through; }
.zona-ver { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 2px 5px; font-size: 13px; cursor: pointer; }
.zona-ops { display: flex; gap: 4px; align-items: center; }
.cfg-fila.z-inactiva .cfg-aviso { grid-column: 1 / -1; font-size: 10.5px; color: var(--muted); text-align: right; }
.cfg-fila.z-inactiva { opacity: .8; }
.zona-icono-edit, .zona-icono { width: 44px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 15px; padding: 5px 2px; }
.zona-nombre-edit { border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font-size: 13.5px; font-weight: 700; padding: 6px 8px; }
.zona-nombre-edit:focus { border-color: var(--accent); background: var(--panel); outline: none; }
.zona-ops { display: flex; gap: 4px; }
.zona-ops button { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 5px 7px; font-size: 12px; color: var(--text); }
.zona-ops button:disabled { opacity: .35; }
.zona-del { color: #e5484d !important; }
.zonas-add { display: grid; grid-template-columns: 1fr 52px auto; gap: 8px; }
.zonas-add input { border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--text); font-size: 13px; padding: 8px; }
.cfg-fav { font-size: 20px; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 4px 0; cursor: pointer; }
.cfg-fav.on { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.cfg-del { font-size: 16px; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 4px 0; cursor: pointer; }
.cfg-del:hover { border-color: var(--red); }
.cfg-pie { padding: 12px 0 4px; display: flex; justify-content: flex-end; }
.cfg-pie .primary { min-width: 220px; }
@media (max-width: 640px) {
  .cfg-fila { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  .cfg-fila input, .cfg-fila select { font-size: 13px; padding: 7px 6px; }
  .zona-fila { grid-template-columns: 38px 1fr auto; }
  .cfg-fila .cfg-nombre { grid-column: 1 / -1; }
  .cfg-fila .cfg-btns { grid-column: auto; }
  .plano-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (max-width: 400px) {
  /* Móvil estrecho: nombre arriba, sillas·espacio·forma en fila, botones debajo a la derecha */
  .cfg-fila { grid-template-columns: 1fr 1.3fr 1fr; }
  .cfg-fila .cfg-btns { grid-column: 1 / -1; justify-content: flex-end; }
  .modal.full .modal-box { padding: 12px; gap: 8px; }
  .cat-head h2 { font-size: 18px; }
  #infTabs .seg-btn { font-size: 12px; padding: 6px 8px; }
}
/* ── Vista resumen ── */
.resumen { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
.resumen-box { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; width: 460px; max-width: 94vw; max-height: 86vh; overflow-y: auto; }
.resumen-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.resumen-head h2 { font-size: 18px; margin: 0; }
.resumen-head h2 span { color: var(--accent-ink); }
.turnos-list { margin-top: 4px; }
.turnos-list h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; }
.turno-item { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.turno-item .ti-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.turno-item .ti-rango { font-size: 13px; font-weight: 700; }
.turno-item .ti-dev { font-size: 11px; color: var(--muted); }
.turno-item .ti-diff { font-size: 15px; font-weight: 800; }
.turno-item .ti-diff.pos { color: var(--green); }
.turno-item .ti-diff.neg { color: var(--red); }
.turno-item .ti-diff.zero { color: var(--muted); }
.turno-item .ti-meta { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-soft); margin-top: 4px; flex-wrap: wrap; }
.turno-item.abierto { border-color: var(--accent-ink); }
.chip-curso { display: inline-block; background: rgba(34, 211, 238, .15); color: var(--accent-ink); border-radius: 10px; padding: 0 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
/* Gráfica de actividad por horas/días */
.grafica-card { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 6px; background: var(--panel2); }
.grafica-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.grafica-head .sub { font-size: 11px; font-weight: 400; }
.grafica-bars { display: flex; align-items: stretch; gap: 2px; height: 110px; }
.gb { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gb-track { flex: 1; display: flex; align-items: flex-end; }
.gb-fill { width: 100%; border-radius: 3px 3px 0 0; background: var(--line); }
.gb-fill.on { background: linear-gradient(180deg, var(--accent), rgba(34, 211, 238, .45)); }
.gb-fill.zero { background: transparent; border-bottom: 1px dashed var(--line); }
.gb-lbl { font-size: 8px; color: var(--muted); text-align: center; margin-top: 2px; font-variant-numeric: tabular-nums; }
.gb-lbl.hid { visibility: hidden; }
.stat { background: var(--panel2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; }
.stat .num { font-size: 24px; font-weight: 800; }
.stat.accent .num { color: var(--accent-ink); }
.stat .lbl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.turno-card { background: var(--panel2); border-radius: 12px; padding: 12px; margin-bottom: 14px; font-size: 14px; }
.turno-card .on { color: var(--green); font-weight: 700; }
.turno-card .off { color: var(--muted); }
.turno-card button { margin-top: 8px; width: 100%; }

/* ── Menú hamburguesa — SIEMPRE visible (23-sep: Gon pidió forzarlo en todos los modos) ── */
#btnMenu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; flex: none; }
#btnMenu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* La barra superior queda SOLO con operativa diaria (menú · escanear · avisos · cuenta).
   Gestión (Equipo/Hoy/Datos/Cocina/Informes/Catálogo/Alertas/Tema/Ayuda) → menú hamburguesa. */
.topbar .btn-theme, .topbar #btnEquipo, .topbar #btnResumen, .topbar #btnDatos,
.topbar #btnKds, .topbar #btnInformes, .topbar #btnCatalogo, .topbar #btnAlertas,
.topbar #btnImpresora, .topbar #btnAyuda { display: none !important; }
/* Personalizar barra (23-sep-2026): por dispositivo (localStorage t23-topbar).
   tb-b = botón personalizable; sin tb-on se oculta bajo body.tb-custom. */
body.tb-custom .topbar .tb-b:not(.tb-on):not(.badge-turno) { display: none !important; }
/* El badge de turno tiene su PROPIO interruptor (t23-turno-badge): no se rige
   por la lista de tb-on. Si no se excluye aquí, personalizar la barra lo hacía
   desaparecer aunque estuviera activado. */
body.tb-custom .topbar .badge-turno:not(.hidden) { display: inline-flex !important; }
body.tb-custom .topbar #btnTemaTop.tb-on,
body.tb-custom .topbar #btnEquipo.tb-on, body.tb-custom .topbar #btnResumen.tb-on,
body.tb-custom .topbar #btnDatos.tb-on, body.tb-custom .topbar #btnKds.tb-on,
body.tb-custom .topbar #btnInformes.tb-on, body.tb-custom .topbar #btnCatalogo.tb-on,
body.tb-custom .topbar #btnAlertas.tb-on, body.tb-custom .topbar #btnImpresora.tb-on,
body.tb-custom .topbar #btnAyuda.tb-on { display: inline-flex !important; }
.tb-cfg-lista { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.tb-cfg-fila { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 14px; }
.tb-cfg-fila:hover { border-color: var(--accent-ink); }
.tb-cfg-fila input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.tb-cfg-fila .ico { width: 18px; height: 18px; flex: none; }
/* Cierres de caja (histórico por meses) */
.cierre-mes-nav { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.cierre-mes-nav b { font-size: 15px; text-transform: capitalize; min-width: 96px; text-align: center; }
.cierre-lista { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; min-height: 120px; }
.cierre-anterior { margin-top: 8px; font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 7px; }
.cierre-anterior b { color: var(--text); }
/* Alineación de los botones mostrados por la personalización: el icono quedaba
   alto y pegado al texto (Gon 23-sep) — centrado + hueco como los nativos. */
body.tb-custom .topbar .tb-b.tb-on { align-items: center !important; gap: 6px !important; }
/* Indicador de carga (cierres de caja y similares) */
.carga-spin { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 16px 6px; }
.carga-spin .sync-ind { opacity: 1; }
#cierreLista.cargando { opacity: .4; pointer-events: none; }
/* Actividad: acciones (PDF/CSV/PNG) + versión imprimible */
.act-acciones { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 2px 10px; }
.act-acciones button { padding: 6px 12px; font-size: 13px; }
#printAct { display: none; }
@media print {
  body.print-act > :not(#printAct) { display: none !important; }
  body.print-act { background: #fff; }
  body.print-act #printAct { display: block !important; padding: 16px; color: #111; background: #fff; }
  #printAct h1 { font-size: 20px; margin: 0 0 2px; }
  #printAct .p-sub { color: #555; font-size: 12px; margin-bottom: 10px; }
  #printAct svg { width: 100%; height: auto; }
  #printAct table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 10px; }
  #printAct th, #printAct td { border-bottom: 1px solid #ddd; padding: 3px 6px; text-align: left; }
  #printAct td.v, #printAct th.v { text-align: right; }
  #printAct .p-tot td { font-weight: 700; border-top: 2px solid #333; }
}
.menu-backdrop { position: fixed; inset: 0; background: rgba(2, 15, 20, .5); z-index: 74; }
.drawer-menu { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 88vw); background: var(--panel); z-index: 75; display: flex; flex-direction: column; box-shadow: 10px 0 34px rgba(2, 15, 20, .25); border-radius: 0 18px 18px 0; padding: 14px; }
.drawer-menu.hidden, .menu-backdrop.hidden { display: none; }
.drawer-menu .dr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.drawer-menu .dr-user { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.drawer-menu .dr-user b { display: block; font-size: 14px; }
.drawer-menu .dr-user small { color: var(--muted); }
.drawer-menu .dr-body { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
.drawer-menu .dr-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 13px 10px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.drawer-menu .dr-item:hover { background: var(--panel2); }
.drawer-menu .dr-item.danger { color: var(--rojo, #e5484d); }
.drawer-menu .dr-item svg { width: 18px; height: 18px; flex: none; }
.drawer-menu .dr-foot { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.drawer-menu .dr-foot small { padding: 0 10px; font-size: 11px; }
@media (max-width: 899px) {
  #btnMenu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; flex: none; }
  #btnMenu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  /* En móvil la barra es estrecha: el turno vive SOLO en el chip junto al
     nombre del local (#cajaTurno). El badge del header se oculta para no
     duplicar el botón (salían dos "abrir turno" seguidos). */
  .topbar .btn-theme, .topbar #btnEquipo, .topbar #btnResumen, .topbar #btnInformes, .topbar #btnCatalogo, .topbar #btnUser, .topbar #btnAlertas, .topbar #turnoBadge { display: none !important; }
}
.mobile-nav { display: none; }
@media (max-width: 899px) {
  body { overflow: hidden; }
  .topbar { padding: 8px 12px; height: auto; min-height: 52px; gap: 10px; }
  /* El nombre del local absorbe el encogido (ellipsis) para que los botones
     del header NUNCA se salgan por el borde derecho en móviles estrechos */
  .local-info { flex: 0 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: 6px; }
  .local-info strong { font-size: 14px; max-width: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .caja-turno { display: inline-flex; align-items: center; background: var(--green); color: #052e1f; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex: none; border: 1px solid transparent; font-family: inherit; cursor: pointer; }
  .caja-turno:active { transform: scale(.96); }
  /* Chip con el turno CERRADO: apagado, invita a abrirlo */
  .caja-turno.caja-turno-off { background: var(--panel2); color: var(--text-soft); border-color: var(--line); }
  .caja-turno:active { transform: scale(.96); }
  .top-actions .ghost { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  /* Fix 18-sep (Gonzalo: «se cortan los botones»): el carril de acciones se vuelve
     scrollable si no cabe — el min-content del topbar expandía el viewport de layout
     (468 en un móvil de 390) y arrastraba a TODOS los modales. El nombre del local
     conserva su sitio (mín. 96px) y las acciones se desplazan en horizontal. */
  .local-info { flex: 1 1 auto; min-width: 96px; }
  .top-actions { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .top-actions::-webkit-scrollbar { display: none; }
  .top-actions > * { flex: 0 0 auto; }
  #btnResumen { display: none; } /* el acceso a Hoy está en la nav inferior */
  .caja-layout { display: block; padding: 0; height: auto; }
  .panel { display: none; position: fixed; inset: 52px 0 62px 0; padding: 10px; border-radius: 0; }
  .panel.on { display: flex; flex-direction: column; }
  .mesas-panel.on { display: block; }
  .productos-panel.on { display: flex; }
  .comanda-panel.on { display: flex; }
  .comanda-panel.on .comanda-lines { flex: 1; }
  .mesas-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .productos-grid { grid-template-columns: repeat(3, 1fr); }
  .productos-grid.con-secciones { display: block; }
  .cat-sec-body { grid-template-columns: repeat(3, 1fr); }
  .cat-sec-head { padding: 8px 10px; font-size: 13px; }
  .mobile-nav {
    display: grid; grid-template-columns: 1fr 1fr 1.35fr 1fr 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: var(--panel); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  /* El aviso de suscripción, por encima de la barra móvil (no la pisa) */
  .susc-aviso { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .mobile-nav button {
    background: none; color: var(--muted); display: flex; flex-direction: column;
    align-items: center; gap: 2px; padding: 4px 2px; position: relative;
  }
  .mobile-nav button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav button span { font-size: 12px; font-weight: 600; }
  .mobile-nav button.on { color: var(--accent-ink); }
  /* Pill central de la comanda: misma altura que los iconos, importe en UNA línea */
  .mobile-nav button .nc-pill {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--accent); color: #062a33;
    font-size: 12px; font-weight: 800; line-height: 1;
    border-radius: 20px; padding: 5px 9px 5px 7px;
    white-space: nowrap; max-width: 100%;
    box-shadow: 0 1px 5px rgba(13, 110, 130, .3);
  }
  .mobile-nav button .nc-pill svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .mobile-nav button .nc-pill i {
    font-style: normal; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 20px; background: #062a33; color: #67e8f9;
    font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  }
  .resumen { position: fixed; inset: 0; z-index: 70; align-items: stretch; }
  .resumen-box { width: 100%; max-width: none; max-height: none; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
  #btnResumenClose { width: 100%; }
  /* Datos del local: pantalla completa en móvil (sin franja entre modal y nav) */
  #modalDatos { align-items: stretch; }
  #modalDatos .modal-box { width: 100%; max-width: none; max-height: none; border-radius: 0; border: 0; display: flex; flex-direction: column; }
  #modalDatos #datosResumen, #modalDatos #datosDetalle { flex: 1; overflow-y: auto; }
  .cat-tabs { padding: 6px 10px; }
  /* Herramientas de carta en móvil: más área táctil y dropdown a la derecha del buscador */
  .carta-tools { padding: 6px 10px 8px; }
  #buscaProd { padding: 11px 14px; font-size: 15px; }
  .cat-drop-btn { padding: 10px 12px; max-width: 46vw; }
  #catDropTxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cat-drop { width: min(320px, 86vw); }
  .cat-drop-fila { padding: 10px 10px; }
  .busca-sugs { max-height: 42vh; }
  .top-actions { gap: 6px; }
  #btnCatalogo { display: inline-block; } /* el catálogo debe ser accesible en móvil */
  #btnDatos { display: none; }     /* Datos vive en la nav inferior en móvil */
  /* Móviles muy estrechos: compactar para que el header quede blanco completo */
  @media (max-width: 479px) {
    .topbar { gap: 6px; padding: 8px 8px; }
    .brand { font-size: 15px; }
    .top-actions .ghost { padding: 6px 8px; font-size: 14px; min-height: 34px; }
    .top-actions .tlbl { display: none; } /* icono solo: los botones caben completos en pantalla estrecha */
    .top-actions { gap: 4px; flex: 0 0 auto; margin-left: auto; } /* el carril nunca se encoge: si no cabe, encoge el nombre */
    .local-info { flex: 0 1 auto; min-width: 84px; }
    .brand-logo { height: 24px; max-width: 64px; } /* en pantalla estrecha el logo cede espacio al carril */
    #btnMenu { width: 36px; height: 36px; }
  }
  .modal-box { width: 100%; max-width: none; max-height: calc(100vh - 70px); border-radius: 0; padding: 16px; }
  .cat-form { grid-template-columns: 1fr 1fr; }
  #prodList { display: block; overflow-x: auto; white-space: nowrap; font-size: 12px; }
  #prodList td, #prodList th { padding: 6px 6px; }
  .acc { padding: 6px 10px; font-size: 12px; }
  @media (max-width: 599px) {
    .datos-mesas { grid-template-columns: 1fr 1fr; gap: 8px; }
    .datos-mesa { padding: 10px 12px; }
    .datos-mesa .barra { display: none; }
    .dm-total { font-size: 17px; }
    .datos-head { flex-wrap: wrap; }
  }
}

/* ── Modal Datos (historial por mesa) ── */
.datos-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.datos-head h2 { flex: 1; font-size: 18px; }
.ventana-filtro { display: flex; gap: 2px; background: var(--panel2); border: 1px solid var(--line); border-radius: 22px; padding: 3px; }
.ventana-filtro .vf { background: none; border: 0; color: var(--text-soft); border-radius: 18px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ventana-filtro .vf:hover { color: var(--text); }
.ventana-filtro .vf.sel { background: var(--accent); color: #062a33; }
.icon-close { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 15px; cursor: pointer; }
.icon-close:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* ── Iconos SVG unificados (.ico — sprite #icoSprite del app.html) ── */
.ico { width: 1.08em; height: 1.08em; flex: none; display: inline-block; vertical-align: -.18em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.lg { width: 1.5em; height: 1.5em; vertical-align: -.3em; }
.zi-pick { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.zi-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); cursor: pointer; font-size: 16px; }
.zi-btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.zi-btn.on { border-color: var(--accent-ink); color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.zonas-add .zona-icono { width: 84px; flex: none; }
.datos-resumen-linea { font-size: 13px; color: var(--text-soft); margin: 0 0 12px; }
.datos-resumen-linea b { color: var(--text); }
.datos-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.datos-mesa { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; text-align: left; cursor: pointer; min-width: 0; }
.datos-mesa:hover { border-color: var(--accent-ink); }
.datos-mesa.vacia { opacity: .5; }
.dm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dm-nombre { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; }
.dm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dm-dot.st-vendido { background: var(--green); box-shadow: 0 0 5px rgba(74, 222, 128, .6); }
.dm-dot.st-pend { background: var(--amber); box-shadow: 0 0 5px rgba(251, 191, 36, .6); }
.dm-dot.st-libre { background: var(--line-strong); }
.dm-total { font-size: 20px; font-weight: 800; color: var(--accent-ink); white-space: nowrap; }
.dm-total.vacio { color: var(--text-faint); }
.dm-fila { font-size: 11.5px; color: var(--text-soft); line-height: 1.6; margin-top: 2px; }
.dm-fila.pend { color: var(--amber); font-weight: 600; }
.dm-fila.anul { color: var(--red); font-weight: 600; }
.datos-mesa .barra { height: 3px; border-radius: 2px; background: var(--line); margin-top: 8px; overflow: hidden; }
.datos-mesa .barra i { display: block; height: 100%; background: var(--accent); }
.detalle-tickets, .detalle-lineas { margin-top: 14px; }
.detalle-tickets h4, .detalle-lineas h4 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.tabla-mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-mini th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; }
.tabla-mini td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.chip { display: inline-block; border-radius: 12px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.chip.ok { background: #0d2b1e; color: var(--green); }
.chip.anulado { background: var(--red-soft); color: var(--red); }
.chip.pend { background: var(--amber-soft); color: var(--amber); }


/* ── Botón de tema claro/oscuro ── */
.btn-theme { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.btn-theme svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.theme-float { position: absolute; top: 12px; right: 12px; }
html { transition: background .25s ease; }

/* ── Login: tarjeta + acceso docs + footer legal (patrón FichaYa) ── */
/* El body de la app no scrollea (overflow hidden): la vista debe tener altura
   constreñida y scrollear por DENTRO; el centrado con márgenes auto nunca corta el inicio */
#view-login, #view-setup { flex-direction: column; gap: 14px; padding: 26px 14px; overflow-y: auto; justify-content: flex-start; height: 100vh; height: 100dvh; }
.login-stack { width: 100%; max-width: 400px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
#view-setup > .card { margin: auto; }
.t23-mas { width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.t23-masinfo { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--accent-ink); font: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.t23-masinfo:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); text-decoration: none; }
/* 19-sep-2026: entrada DEMO (botón discreto en login + pantalla de perfiles) */
.t23-demo { display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; border: 1px solid #b7e6cf; border-radius: var(--radius); background: #eafaf1; color: #0b7a4b; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.t23-demo:hover { border-color: var(--green); background: #dcf5e8; }
:root[data-theme="dark"] .t23-demo { background: #102a1c; border-color: #1f5c3d; color: #4ade80; }
.demo-perfiles { display: grid; gap: 8px; margin: 8px 0 4px; }
.demo-perfil { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--text); }
.demo-perfil:hover { border-color: var(--green); }
.demo-perfil:disabled { opacity: .55; cursor: wait; }
.demo-perfil .dp-ic { font-size: 26px; line-height: 1; }
.demo-perfil .dp-tx { display: flex; flex-direction: column; gap: 2px; }
.demo-perfil .dp-tx b { font-size: 15px; }
.demo-perfil .dp-tx small { color: var(--muted); font-size: 12.5px; }
.demo-nota { font-size: 12px; line-height: 1.5; margin-top: 10px; }
/* menú de perfil: cambiar de local (multi-local) */
.um-locales { display: grid; gap: 6px; border-top: 1px solid var(--line); margin-top: 8px; padding: 10px 2px 2px; }
.um-sec { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 0 6px; }
.um-local { text-align: left; font-size: 13.5px; }
.um-local small { color: var(--muted); }
.um-local.on { border-color: var(--accent-ink); color: var(--accent-ink); }
.t23-legal { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--muted); }
.t23-legal a { color: var(--muted); text-decoration: none; }
.t23-legal a:hover { color: var(--accent-ink); text-decoration: underline; }

/* ── Extras / suplementos (editor de artículo + selector al añadir) ── */
.extras-lista { display: flex; flex-direction: column; gap: 6px; }
.ex-fila { display: grid; grid-template-columns: 1fr 110px 34px; gap: 6px; align-items: center; }
.ex-fila input { font-size: 14px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); min-width: 0; box-sizing: border-box; width: 100%; }
.ex-del { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; color: var(--red, #e5484d); font-size: 13px; height: 34px; cursor: pointer; }
.cant-extras { display: flex; flex-direction: column; gap: 3px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 2px 0 8px; }
.ex-titulo { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.ex-check { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 2px; cursor: pointer; }
.ex-check input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; flex: none; }
.ex-check b { margin-left: auto; font-size: 13px; color: var(--accent-ink); white-space: nowrap; }
.cant-nota { width: 100%; box-sizing: border-box; margin: 0 0 8px; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.ln-mod { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.detalle-lineas td .ln-mod { display: block; white-space: normal; }
#btnAddExtra { border: 1px dashed var(--line-strong); background: transparent; color: var(--accent-ink); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
#btnAddExtra:hover { border-style: solid; border-color: var(--accent); }

/* ── KDS: chips de estado en la comanda + fila lista ── */
.kds-ico { font-style: normal; font-size: .82em; opacity: .9; }
.comanda-line .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.chip.kds-cola { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.chip.kds-fuego { background: color-mix(in srgb, var(--amber) 15%, transparent); color: #8a5a00; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); }
[data-theme="dark"] .chip.kds-fuego { color: var(--amber); }
.chip.kds-listo { background: color-mix(in srgb, var(--green) 12%, transparent); color: #14532d; border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
[data-theme="dark"] .chip.kds-listo { color: var(--green); }
.comanda-line.lista { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 5%, transparent); }
.acc-line.servir-ya { opacity: .85; }
/* ── Config KDS: categorías con switch ── */
.kds-cfg-lista { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; }
.kds-cfg-fila { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 700; color: var(--text); }
.kds-cfg-fila .cat-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.kds-cfg-fila > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kds-switch { margin-left: auto; width: 46px; height: 26px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); position: relative; cursor: pointer; flex: none; padding: 0; }
.kds-switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: left .15s ease, background .15s ease; }
.kds-switch.on { background: color-mix(in srgb, var(--green) 16%, var(--panel2)); border-color: var(--green); }
.kds-switch.on i { left: 22px; background: var(--green); }
/* ── Pantalla de cocina (KDS) ── */
.kds-full { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; }
.kds-scr { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kds-head { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kds-titulo { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.kds-logo { font-size: 20px; }
.kds-resumen { display: flex; gap: 6px; margin-left: auto; }
.kds-n { font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 20px; }
.kds-n-nuevos { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.kds-n-fuego { background: color-mix(in srgb, var(--amber) 14%, transparent); color: #8a5a00; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
[data-theme="dark"] .kds-n-fuego { color: var(--amber); }
.kds-n-listo { background: color-mix(in srgb, var(--green) 12%, transparent); color: #14532d; border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
[data-theme="dark"] .kds-n-listo { color: var(--green); }
.kds-head-acc { display: flex; align-items: center; gap: 10px; }
.kds-red { color: var(--green); font-size: 13px; }
.kds-red.off { color: var(--red); }
.kds-cola { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.kds-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.kds-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kds-mesa { display: flex; align-items: center; gap: 8px; font-size: 15px; min-width: 0; }
.kds-counts { display: inline-flex; gap: 4px; }
.kds-counts i { font-style: normal; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.c-nuevos { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-ink); }
.c-fuego { background: color-mix(in srgb, var(--amber) 22%, transparent); color: #8a5a00; }
[data-theme="dark"] .c-fuego { color: var(--amber); }
.c-listo { background: color-mix(in srgb, var(--green) 20%, transparent); color: #14532d; }
[data-theme="dark"] .c-listo { color: var(--green); }
.kds-bulk { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.kds-btn { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; }
.kds-btn:disabled { opacity: .45; cursor: default; }
.kds-btn-listo { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--panel)); color: #14532d; }
[data-theme="dark"] .kds-btn-listo { color: var(--green); }
.kds-btn-ghost { opacity: .7; }
.kds-lineas { list-style: none; margin: 0; padding: 6px 10px; display: flex; flex-direction: column; }
.kds-linea { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 14.5px; flex-wrap: wrap; row-gap: 4px; }
.kds-linea:last-child { border-bottom: 0; }
.kds-linea.e-listo { background: color-mix(in srgb, var(--green) 6%, transparent); border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.kds-linea.viejo2 .kds-edad { color: var(--amber); font-weight: 800; }
.kds-linea.viejo3 .kds-edad { color: var(--red); font-weight: 800; }
.kds-cant { font-weight: 800; font-size: 16px; min-width: 34px; text-align: center; background: var(--panel2); border-radius: 8px; padding: 2px 4px; }
.kds-nombre { flex: 1; min-width: min(46%, 170px); font-weight: 700; }
.kds-mod { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.kds-edad { font-size: 11px; color: var(--muted); white-space: nowrap; }
.kds-acc { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.kds-listo-tag { font-size: 12.5px; font-weight: 700; color: #14532d; background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 42%, transparent); border-radius: 8px; padding: 6px 10px; white-space: nowrap; display: inline-flex; align-items: center; }
[data-theme="dark"] .kds-listo-tag { color: var(--green); }
.kds-vacio { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 60px 20px; font-size: 16px; font-weight: 700; }
.kds-vacio small { font-weight: 400; }

/* ── KDS: zonas por estado (nuevos / preparando / listos) ── */
.kds-zona { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.kds-zona-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; font-weight: 800; position: sticky; top: -1px; z-index: 2; background: var(--panel2); border-bottom: 1px solid var(--line); }
.kds-zona-head b { margin-left: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; font-size: 11.5px; padding: 1px 9px; }
.kds-zona-pendiente .kds-zona-head { color: var(--accent-ink); }
.kds-zona-preparando .kds-zona-head { color: #8a5a00; }
[data-theme="dark"] .kds-zona-preparando .kds-zona-head { color: var(--amber); }
.kds-zona-listo .kds-zona-head { color: #14532d; }
[data-theme="dark"] .kds-zona-listo .kds-zona-head { color: var(--green); }
.kds-zona-body { padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.kds-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.kds-card-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--panel2); border-bottom: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.kds-tiempo { font-size: 11px; color: var(--muted); white-space: nowrap; }
.kds-card.flash { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); animation: kdsFlashPulse 1.1s ease-in-out 3; }
@keyframes kdsFlashPulse { 0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 1px var(--accent), 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent); } }
.kds-linea.nuevo { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 8px; }
.kds-listo-tag.ok { background: transparent; color: var(--muted); font-weight: 700; border: 1px dashed var(--line-strong); }
.kds-zona-listo .kds-card { opacity: .92; }
button.ghost.off { opacity: .55; }

/* ── Sincronización: spinner + skeleton de sala (primera carga tras login) ── */
.sync-ind { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; opacity: 0; vertical-align: -1px; transition: opacity .2s; margin-left: 6px; }
.sync-ind.on { opacity: 1; animation: syncSpin .7s linear infinite; }
@keyframes syncSpin { to { transform: rotate(360deg); } }
.sala-sync { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 26px 10px 14px; color: var(--muted); font-size: 13px; }
.sala-sync .sync-ind { width: 18px; height: 18px; border-width: 3px; margin: 0 0 4px; }
.sala-sync small { font-weight: 400; font-size: 11.5px; }
.skel-mesa { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.skel-mesa i { width: 8px; height: 8px; border-radius: 50%; }
.skel-mesa b { height: 12px; width: 55%; border-radius: 6px; }
.skel-mesa em { height: 9px; width: 38%; border-radius: 5px; }
.skel, .skel-mesa i, .skel-mesa b, .skel-mesa em { background: linear-gradient(100deg, var(--panel2) 30%, var(--line-strong) 50%, var(--panel2) 70%); background-size: 200% 100%; animation: skelShine 1.15s infinite linear; }
.plano-llv.skel { height: 44px; border-radius: 12px; border: 0; }
@keyframes skelShine { from { background-position: 120% 0; } to { background-position: -80% 0; } }

/* ── Selector de local (multi-local) ── */
#localPicker { margin-top: 10px; }
#localPicker .sep { margin: 0 0 6px; }
#localPicker .picker-local { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; font-size: 14px; }
#localPicker .picker-local small { opacity: .65; }

/* ── Equipo: botón regenerar PIN ── */
.eq-btn-pin { padding: 4px 10px; font-size: 12px; border-radius: 8px; flex: 0 0 auto; }

/* ── Borrado lógico: modal de borrado con reasignación + papelera ── */
.btn-peligro { background: #c0392b; color: #fff; border: 0; border-radius: 22px; padding: 12px 20px; font-weight: 800; font-size: 14px; cursor: pointer; }
.btn-peligro:active { transform: scale(.98); }
.borrar-body { padding: 2px 6px 6px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.borrar-nombre { font-size: 16px; font-weight: 800; margin: 0; }
.borrar-aviso { background: color-mix(in srgb, #c0392b 9%, transparent); border: 1px solid color-mix(in srgb, #c0392b 35%, transparent); border-radius: 10px; padding: 10px 12px; margin: 0; font-size: 13px; line-height: 1.45; }
.borrar-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.reasig-sel { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 9px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; margin: 0; }
.papelera-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.papelera-head h3 { margin: 0; flex: 1; }
.papelera-fila { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.papelera-fila .pf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.papelera-fila .pf-info small { opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#papeleraLista .acc { flex: 0 0 auto; }

/* ── Vincular Google desde perfil ── */
.link-google-body { padding: 4px 6px 8px; font-size: 14px; color: var(--text); display: flex; flex-direction: column; gap: 10px; }
.link-google-body ul { margin: 0 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.google-link-wrap { display: flex; justify-content: center; margin: 6px 0 2px; min-height: 44px; }
.foto-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; vertical-align: middle; }.prod-btn .prod-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; margin: 0 auto 4px; display: block; border: 1px solid var(--line); }
.foto-art-row { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.foto-prev { width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; flex: 0 0 auto; }
.foto-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-art-acc { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* Botones de foto con el mismo estilo que "＋ Añadir extra" (borde discontinuo + texto) */
#btnProdFoto, #btnProdFotoDel { border: 1px dashed var(--line-strong); background: transparent; color: var(--accent-ink); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
#btnProdFoto:hover, #btnProdFotoDel:hover { border-style: solid; border-color: var(--accent); }
#btnProdFotoDel { color: #c0392b; border-color: rgba(192, 57, 43, .5); }

/* ── E2bis fixes UX (2026-09-10): z-order modales stock + catálogo móvil usable ── */
#modalStock, #modalStockAsk { z-index: 80; } /* por encima del modal catálogo (70) */
/* ── E5 · Vista Almacén (existencias + entradas/salidas) ── */
#modalAlmacen { z-index: 78; } /* sobre el catálogo (70), bajo el modal de existencias (80) que se abre desde aquí */
.alm-box { width: min(880px, 94vw); display: flex; flex-direction: column; gap: 10px; }
.alm-kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.alm-kpi { flex: 1 1 110px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 104px; }
.alm-kpi b { font-size: 19px; font-weight: 800; color: var(--text); }
.alm-kpi span { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.alm-kpi.k-bad b { color: #dc2626; }
.alm-kpi.k-warn b { color: #b45309; }
:root[data-theme="dark"] .alm-kpi.k-bad b { color: #f87171; }
:root[data-theme="dark"] .alm-kpi.k-warn b { color: #fbbf24; }
.alm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.alm-tabs button { border: 0; background: none; color: var(--muted); font-weight: 800; font-size: 14px; padding: 8px 12px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; font-family: inherit; }
.alm-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.alm-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 8px; }
.alm-tools input[type="search"] { flex: 1 1 180px; min-width: 140px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; color: var(--text); font-size: 14px; }
.alm-tools select { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--text); font-size: 14px; }
.alm-lista { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: min(46vh, 420px); padding-right: 2px; }
.alm-fila { display: grid; grid-template-columns: 10px minmax(0, 1.4fr) minmax(0, 1.1fr) auto auto auto auto; gap: 8px; align-items: center; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--text); font-size: 13.5px; cursor: pointer; font-family: inherit; }
.alm-fila:hover { border-color: var(--accent); }
.alm-fila.sin { grid-template-columns: 10px minmax(0, 1.5fr) minmax(0, 1.1fr) auto; }
.alm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.alm-dot.ok { background: #22c55e; }
.alm-dot.warn { background: #f59e0b; }
.alm-dot.bad { background: #ef4444; }
.alm-dot.off { background: var(--muted); opacity: .45; }
.af-nom { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-cat { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-qty { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-qty.bad { color: #dc2626; }
.af-qty.warn { color: #b45309; }
:root[data-theme="dark"] .af-qty.bad { color: #f87171; }
:root[data-theme="dark"] .af-qty.warn { color: #fbbf24; }
.af-min { color: var(--muted); font-size: 12px; white-space: nowrap; }
.af-modo { font-size: 14px; }
.af-valor { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-cta { color: var(--accent-ink); font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.alm-empty { color: var(--muted); padding: 16px; text-align: center; font-size: 14px; }
.alm-movs { overflow-y: auto; max-height: min(46vh, 420px); }
.alm-dia { position: sticky; top: 0; z-index: 1; background: var(--panel); padding: 7px 2px 4px; font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.alm-mov { display: grid; grid-template-columns: 46px 58px minmax(0, 1.4fr) auto; gap: 8px; align-items: center; padding: 6px 4px; font-size: 13.5px; border-bottom: 1px dashed var(--line); }
.alm-mov .am-hora { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.alm-mov .am-delta { font-weight: 800; font-variant-numeric: tabular-nums; }
.alm-mov .am-delta.pos { color: #059669; }
.alm-mov .am-delta.neg { color: #dc2626; }
:root[data-theme="dark"] .alm-mov .am-delta.pos { color: #34d399; }
:root[data-theme="dark"] .alm-mov .am-delta.neg { color: #f87171; }
.alm-mov .am-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alm-mov .am-reason { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
/* ── E5.1 · Lista de pedido (proveedor) + reimpresión de tickets ── */
.alm-ped-box { width: min(560px, 94vw); }
#modalAlmPedido { z-index: 82; } /* se abre DESDE el Almacén (78): siempre por encima */
#modalRapido { z-index: 80; } /* ⚡ se abre DESDE el catálogo (70): por encima (igual que Stock) */
#modalNudge  { z-index: 80; } /* post-cierre de caja: que nunca quede tras el catálogo */
#modalCambio { z-index: 84; } /* se abre DESDE el cobro: por encima de todo */
#modalNumpad { z-index: 84; } /* ⚠️ se abre también DESDE el modal de cantidad (que va DESPUÉS en el DOM): sin esto quedaba DETRÁS */
.alm-ped-txt { width: 100%; min-height: 180px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 13.5px; line-height: 1.55; padding: 10px 12px; resize: vertical; }
.tk-lista { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tk-fila { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-size: 13.5px; }
.tk-fila.anul { opacity: .6; }
.tk-f-hora { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; }
.tk-f-num { font-weight: 700; }
.tk-f-imp { font-weight: 800; margin-left: auto; font-variant-numeric: tabular-nums; }
.tk-f-b { padding: 4px 9px; font-size: 12.5px; }
@media (max-width: 700px) {
  .tk-fila { flex-wrap: wrap; }
  .tk-f-b { margin-left: auto; }
}
@media (max-width: 700px) {
  .alm-box { width: 100%; max-width: none; }
  .alm-kpi { flex: 1 1 44%; }
  .alm-fila { grid-template-columns: 10px minmax(0, 1fr) auto auto; }
  .alm-fila .af-cat, .alm-fila .af-modo, .alm-fila .af-valor { display: none; }
  .alm-fila.sin { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .alm-fila.sin .af-cat { display: none; }
  .alm-mov { grid-template-columns: 42px 52px minmax(0, 1fr); }
  .alm-mov .am-reason { grid-column: 3; }
}

.cat-tools { display: flex; gap: 8px; padding: 10px 14px 2px; flex-wrap: wrap; }
.cat-tools input[type="search"] { flex: 1 1 200px; min-width: 140px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 14px; }
.cat-tools select { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; color: var(--text); font-size: 14px; max-width: 220px; }

/* Móvil: cada artículo en DOS filas (info arriba, botones abajo) — sin scroll horizontal */
@media (max-width: 700px) {
  #modalCatalogo .prod-list { min-width: 0; }
  #modalCatalogo .prod-list thead { display: none; }
  #modalCatalogo .prod-list, #modalCatalogo .prod-list tbody { display: block; }
  #modalCatalogo .prod-list tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
  #modalCatalogo .prod-list td { display: block; padding: 0 !important; border: none; }
  #modalCatalogo .prod-list td:nth-child(1) { display: none; }
  #modalCatalogo .prod-list td:nth-child(2) { flex: 1 1 55%; min-width: 0; }
  #modalCatalogo .prod-list td:nth-child(3) { flex: 0 0 auto; font-weight: 700; }
  #modalCatalogo .prod-list td:nth-child(4) { display: none; }
  #modalCatalogo .prod-list td:nth-child(5) { flex: 0 0 auto; }
  #modalCatalogo .prod-list td.col-acc { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px !important; width: auto; text-align: left; white-space: normal; }
  #modalCatalogo .prod-list td.col-acc .acc { padding: 6px 10px; font-size: 12px; }
}

/* Modo rápido ⚡ — lista de candidatos con casillas (2026-09-11) */
.rapido-lista{max-height:46vh;overflow:auto;border:1px solid rgba(128,128,128,.3);border-radius:10px;margin:0 0 14px}
.rapido-fila{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid rgba(128,128,128,.22);cursor:pointer;font-size:.95rem}
.rapido-fila:last-child{border-bottom:0}
.rapido-fila input{width:18px;height:18px;accent-color:#1d9bf0}
.rapido-nom{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rapido-cat{font-size:.78rem;opacity:.6;white-space:nowrap}
.rapido-uds{font-variant-numeric:tabular-nums;font-weight:700;opacity:.75;min-width:2.5ch;text-align:right}
.rapido-fila:not(:has(input:checked)) .rapido-nom{opacity:.5;font-weight:500}
/* ── Pulido táctil 16-sep-2026 (informe 21 · T1): objetivos ≥34-40px para dedo en TPV/tablet ── */
.caja-col { width: 34px; height: 34px; }
.seg-btn { min-width: 38px; min-height: 34px; }
.caja-col-carta { min-height: 30px; }
#btnBI, #btnPlanoFull, #btnMesasCfg { min-width: 38px; min-height: 34px; }
#btnDividir, #btnMoverMesa { min-height: 32px; }
.plano-llv { min-height: 40px; }
.pz-head { min-height: 40px; }
.comanda-line .acc-line { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; }
.comanda-line .acc-line.quitar { min-width: 34px; justify-content: center; opacity: .55; }
.ghost:disabled { opacity: .4; cursor: not-allowed; }

/* ── Suscripción (Cadences Pay) — piloto 21-sep-2026 ── */
.susc-aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 90;
  border: 1px solid #f59e0b; background: color-mix(in srgb, #f59e0b 16%, var(--panel)); color: var(--text);
  font: inherit; font-size: 13px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.susc-aviso.grave { border-color: #ef4444; background: color-mix(in srgb, #ef4444 16%, var(--panel)); }
.susc-fila { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0;
  border-bottom: 1px dashed var(--line); font-size: 13px; }
.susc-fila span { color: var(--muted); }
.susc-ok { font-weight: 700; margin: 4px 0 10px; }
.susc-inp { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel2); color: var(--text); font-size: 14px; margin: 4px 0 8px; }
.susc-acc { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
#suscCuerpo p { margin: 6px 0; }
#suscCuerpo .sub { color: var(--muted); font-size: 12.5px; }