/* ==========================================================================
   SyncSR Panel — DISEÑO CONEXASOFT v3
   Interfaz oscura profunda, sidebar agrupado, KPI con gradientes,
   barra superior con reloj. Adaptado del sistema de diseño ConexaSoft Hotel.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-app:        #080d18;
  --bg-deep:       #0c1322;
  --surface:       #131c2e;
  --surface-2:     #1a2438;
  --surface-3:     #232f47;
  --surface-4:     #2c3a55;

  --line:          #26334a;
  --line-soft:     #1e2a3e;
  --line-strong:   #37475f;

  --txt:           #eaeff8;
  --txt-soft:      #b9c6da;
  --txt-mute:      #8394ae;
  --txt-dim:       #5f7191;

  --accent:        #4f8ef7;
  --accent-2:      #7aacff;
  --accent-deep:   #2563eb;
  --accent-glow:   rgba(79,142,247,.40);

  --ok:            #34d17c;
  --ok-bg:         rgba(52,209,124,.13);
  --warn:          #f5a524;
  --warn-bg:       rgba(245,165,36,.13);
  --bad:           #f4544f;
  --bad-bg:        rgba(244,84,79,.13);
  --info:          #22c7dd;
  --info-bg:       rgba(34,199,221,.13);
  --purple:        #a877f7;

  --menu-w:        220px;
  --barra-h:       46px;

  --e1: 3px; --e2: 6px; --e3: 10px; --e4: 14px; --e5: 20px; --e6: 28px;
  --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-lg: 14px;
  --sh-1: 0 1px 2px rgba(0,0,0,.34);
  --sh-2: 0 4px 14px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.26);
  --sh-3: 0 14px 34px rgba(0,0,0,.44), 0 4px 12px rgba(0,0,0,.30);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'SFMono-Regular', Consolas, monospace;
  --trans: .2s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg-app);
  background-image:
    radial-gradient(1100px 620px at 8% -10%, rgba(79,142,247,.08), transparent 62%),
    radial-gradient(900px 520px at 96% 2%, rgba(168,119,247,.06), transparent 64%);
  background-attachment: fixed;
  color: var(--txt);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--menu-w);
  background: var(--bg-deep);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; z-index: 30;
  transition: transform .28s var(--trans);
}

.marca {
  display: flex; align-items: center; gap: 10px;
  height: var(--barra-h);
  padding: 0 16px; color: #fff;
  font-weight: 700; font-size: 14px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.marca-punto {
  width: 28px; height: 28px; border-radius: var(--r-xs);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; flex: none;
  box-shadow: 0 0 12px var(--accent-glow);
}

.menu {
  flex: 1; overflow-y: auto; padding: 8px 0 14px;
  /* Scrollbar invisible por defecto, aparece solo al pasar el mouse */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.menu:hover {
  scrollbar-color: var(--line-soft) transparent;
}
/* Webkit (Chrome, Safari, Edge) */
.menu::-webkit-scrollbar { width: 4px; }
.menu::-webkit-scrollbar-track { background: transparent; }
.menu::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.menu:hover::-webkit-scrollbar-thumb { background: var(--line-soft); }
.menu-seccion {
  padding: 12px 16px 3px; font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt-dim);
}
.menu-seccion:first-child { padding-top: 2px; }

.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; margin: 1px 6px; border-radius: var(--r-sm);
  color: var(--txt-mute); font-size: 12px; font-weight: 500;
  border-left: 3px solid transparent; transition: all .16s;
  position: relative;
}
.menu-item:hover { background: var(--surface); color: var(--txt-soft); text-decoration: none; }
.menu-item.activo {
  background: rgba(79,142,247,.10); color: #fff;
  border-left-color: var(--accent); font-weight: 600;
}
.menu-icono {
  width: 18px; height: 18px; flex: none; opacity: .85;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.menu-icono svg { width: 100%; height: 100%; display: block; }
.menu-item.activo .menu-icono { opacity: 1; color: var(--accent-2); }
.menu-desc {
  display: block; font-size: 9.5px; color: var(--txt-dim);
  font-weight: 400; margin-top: 0px;
}
.menu-item.activo .menu-desc { color: var(--txt-mute); }

.lateral-pie {
  border-top: 1px solid var(--line-soft);
  padding: 8px 14px 10px;
}
.usuario-mini {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.avatar {
  width: 26px; height: 26px; border-radius: var(--r-xs);
  background: linear-gradient(135deg, var(--accent), #6c63ff);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 11px; flex: none;
}
.usuario-datos { min-width: 0; }
.usuario-datos strong {
  display: block; font-size: 11.5px; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usuario-datos small {
  display: block; font-size: 10px; color: var(--txt-dim);
}
.salir {
  display: block; font-size: 11px; color: var(--txt-dim);
  padding: 4px 0; transition: color .15s;
}
.salir:hover { color: var(--bad); text-decoration: none; }

/* ==========================================================================
   BARRA SUPERIOR
   ========================================================================== */
.principal { margin-left: var(--menu-w); min-height: 100vh; display: flex; flex-direction: column; }

.superior {
  height: var(--barra-h);
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(12px);
}
.superior h1 { font-size: 14px; font-weight: 600; margin: 0; }
.menu-boton {
  display: none; background: none; border: 1px solid var(--line);
  color: var(--txt-soft); font-size: 18px; padding: 5px 9px;
  border-radius: var(--r-xs); cursor: pointer; margin-right: 12px;
}
.menu-boton:hover { background: var(--surface); color: var(--txt); }

.superior-derecha { display: flex; align-items: center; gap: 10px; }
.empresa-nombre {
  font-size: 12px; font-weight: 600; color: var(--txt-mute);
  background: var(--surface); padding: 5px 12px; border-radius: var(--r-xs);
  border: 1px solid var(--line);
}
.selector-empresa select {
  background: var(--surface); color: var(--txt-soft);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 5px 10px; font-size: 12px; font-family: var(--font); cursor: pointer;
}
.selector-empresa select:focus { outline: none; border-color: var(--accent); }

.reloj-barra {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--txt-dim);
  background: var(--surface); padding: 5px 12px; border-radius: var(--r-xs);
  border: 1px solid var(--line-soft);
}
.reloj-barra i { font-size: 13px; color: var(--accent); }

/* ==========================================================================
   CONTENIDO
   ========================================================================== */
.contenido { flex: 1; padding: 16px 20px 24px; }
.pie {
  padding: 12px 20px; font-size: 10px; color: var(--txt-dim);
  border-top: 1px solid var(--line-soft); text-align: center;
}
.pie-linea { margin: 2px 0; }
.pie-ip {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 4px; font-size: 11px;
}
.pie-ip strong { color: var(--txt-mute); }
.pie-ip-estado {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ok); font-size: 10px;
}

/* ==========================================================================
   TARJETAS
   ========================================================================== */
.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  margin-bottom: 14px;
  overflow: hidden;
}
.tarjeta-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.tarjeta-cab h2 { font-size: 13px; font-weight: 600; margin: 0; color: var(--txt); }
.tarjeta-cuerpo { padding: 14px 16px; }
.sin-relleno { padding: 0 !important; }
.tarjeta-extra { display: flex; gap: 8px; align-items: center; }

/* ==========================================================================
   KPI CARDS CON GRADIENTES (estilo ConexaSoft)
   ========================================================================== */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.kpi {
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 14px;
  transition: transform .18s, box-shadow .18s;
  border: none;
  background: var(--surface);
  border: 1px solid var(--line);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

.kpi-icono {
  width: 36px; height: 36px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex: none;
  background: rgba(255,255,255,.12); color: #fff;
}
.kpi-cuerpo { flex: 1; min-width: 0; }
.kpi-etiqueta {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; opacity: .8;
}
.kpi-valor {
  font-size: 18px; font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em;
}
.kpi-nota { font-size: 11px; opacity: .65; margin-top: 2px; }

/* Variantes con gradiente */
.kpi.verde   { background: linear-gradient(135deg,#065f46,#10b981); color:#fff; border-color: transparent; }
.kpi.azul    { background: linear-gradient(135deg,#1e3a5f,#2563eb); color:#fff; border-color: transparent; }
.kpi.rojo    { background: linear-gradient(135deg,#7f1d1d,#ef4444); color:#fff; border-color: transparent; }
.kpi.ambar   { background: linear-gradient(135deg,#78350f,#f59e0b); color:#fff; border-color: transparent; }
.kpi.morado  { background: linear-gradient(135deg,#3b0764,#7c3aed); color:#fff; border-color: transparent; }
.kpi.cyan    { background: linear-gradient(135deg,#164e63,#0891b2); color:#fff; border-color: transparent; }

/* ==========================================================================
   TABLAS
   ========================================================================== */
.tabla-scroll { overflow-x: auto; }
.tabla {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.tabla thead th {
  background: var(--surface-2); color: var(--txt-dim);
  padding: 7px 12px; text-align: left;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tabla td {
  padding: 7px 12px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle; color: var(--txt-soft);
}
.tabla tr:last-child td { border-bottom: none; }
.tabla tr:hover td { background: rgba(79,142,247,.04); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td strong { color: var(--txt); }

/* Barras de progreso inline */
.barra-fondo {
  height: 7px; border-radius: 99px; background: var(--line-soft);
  overflow: hidden;
}
.barra {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .4s;
}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.fila:last-child { margin-bottom: 0; }
.campo { flex: 1; min-width: 140px; position: relative; padding-bottom: 0; }
.campo label {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--txt-mute);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em;
  min-height: 16px;
}
.campo small {
  display: block; font-size: 10px; color: var(--txt-dim);
  margin-top: 2px; line-height: 1.3;
}
/* Cuando .fila tiene campos con <small> y sin <small>, 
   reservar espacio uniforme para que los inputs queden en linea */
.fila-con-nota .campo { margin-bottom: 18px; }
.fila-con-nota .campo small { position: absolute; bottom: 0; left: 0; }
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%; padding: 7px 11px;
  background: var(--surface-2); color: var(--txt);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  font-family: var(--font); font-size: 12.5px;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,142,247,.15);
}
textarea { min-height: 90px; resize: vertical; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.boton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border: none; border-radius: var(--r-xs);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .16s; text-decoration: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff; box-shadow: 0 2px 8px rgba(79,142,247,.25);
}
.boton:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(79,142,247,.35); color: #fff; text-decoration: none; }
.boton-suave {
  background: var(--surface-2); color: var(--txt-soft);
  box-shadow: none; border: 1px solid var(--line);
}
.boton-suave:hover { background: var(--surface-3); color: var(--txt); border-color: var(--accent); }
.boton-rojo { background: linear-gradient(135deg, var(--bad), #b91c1c); }
.boton-verde { background: linear-gradient(135deg, var(--ok), #15803d); }
.boton-chico { padding: 5px 12px; font-size: 12px; }
.boton-bloque { display: flex; justify-content: center; width: 100%; }

/* ==========================================================================
   CHIPS Y BADGES
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 600;
}
.chip-verde  { background: var(--ok-bg); color: var(--ok); }
.chip-ambar  { background: var(--warn-bg); color: var(--warn); }
.chip-rojo   { background: var(--bad-bg); color: var(--bad); }
.chip-info   { background: var(--info-bg); color: var(--info); }
.chip-gris   { background: var(--surface-3); color: var(--txt-mute); }
.chip-aviso  { background: var(--warn-bg); color: var(--warn); }

.punto-vivo {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(52,209,124,.25);
  animation: latido 2s infinite;
  margin-right: 10px;
}
@keyframes latido {
  0%,100% { box-shadow: 0 0 0 3px rgba(52,209,124,.25); }
  50%     { box-shadow: 0 0 0 6px rgba(52,209,124,.10); }
}

/* ==========================================================================
   ALERTAS
   ========================================================================== */
.alerta {
  padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 12px;
  font-size: 13px; border: 1px solid;
}
.alerta-verde { background: var(--ok-bg); color: var(--ok); border-color: rgba(52,209,124,.2); }
.alerta-roja  { background: var(--bad-bg); color: var(--bad); border-color: rgba(244,84,79,.2); }
.alerta-ambar { background: var(--warn-bg); color: var(--warn); border-color: rgba(245,165,36,.2); }
.alerta-info  { background: var(--info-bg); color: var(--info); border-color: rgba(34,199,221,.2); }

/* ==========================================================================
   VACÍO
   ========================================================================== */
.vacio {
  text-align: center; padding: 28px 14px; color: var(--txt-dim);
}
.vacio p { font-size: 15px; margin-bottom: 6px; }
.vacio small { font-size: 12px; color: var(--txt-dim); opacity: .7; }

/* ==========================================================================
   LOGIN
   ========================================================================== */
.login-fondo {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-app);
  background-image:
    radial-gradient(800px 400px at 50% 20%, rgba(79,142,247,.12), transparent 60%),
    radial-gradient(600px 300px at 70% 80%, rgba(168,119,247,.08), transparent 60%);
}
.login-caja {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 36px 32px;
  width: 100%; max-width: 400px;
  box-shadow: var(--sh-3);
}
.login-marca {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px; font-weight: 700; font-size: 18px; color: var(--accent-2);
}
.login-titulo { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.login-sub { color: var(--txt-dim); font-size: 13px; margin-bottom: 24px; }

/* ==========================================================================
   BLOQUEO
   ========================================================================== */
.bloqueado-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-app);
}
.bloqueado-caja {
  background: var(--surface); border: 1px solid var(--bad);
  border-radius: var(--r-lg); padding: 40px; text-align: center;
  max-width: 420px; box-shadow: var(--sh-3);
}

/* ==========================================================================
   API KEY BOX
   ========================================================================== */
.clave-caja {
  background: var(--bg-app); color: var(--ok);
  padding: 12px 16px; border-radius: var(--r-xs);
  font-family: var(--mono); font-size: 12px;
  word-break: break-all; user-select: all;
  border: 1px solid var(--line);
}

/* ==========================================================================
   PAGINADOR
   ========================================================================== */
.paginador {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
}
.paginador span { font-size: 12px; color: var(--txt-dim); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 992px) {
  .lateral { transform: translateX(-100%); }
  .lateral.abierta { transform: translateX(0); box-shadow: var(--sh-3); }
  .principal { margin-left: 0; }
  .menu-boton { display: block; }
  .contenido { padding: 12px 12px 20px; }
  .superior-derecha { gap: 8px; }
  .selector-empresa select { max-width: 140px; font-size: 12px; }
}

/* Celular */
@media (max-width: 640px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi-icono { width: 32px; height: 32px; font-size: 13px; }
  .kpi-valor { font-size: 16px; }
  .kpi-etiqueta { font-size: 9.5px; }
  .kpi-nota { font-size: 10px; }

  .fila { flex-direction: column; gap: 10px; }
  .campo { min-width: 100%; }

  .tarjeta { border-radius: 8px; }
  .tarjeta-cab { padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .tarjeta-cab h2 { font-size: 14px; }
  .tarjeta-cuerpo { padding: 12px 14px; }
  .tarjeta-cuerpo.sin-relleno { padding: 0; }

  .tabla { font-size: 11.5px; }
  .tabla thead th { padding: 8px 10px; font-size: 9.5px; }
  .tabla td { padding: 8px 10px; }

  .boton { padding: 8px 14px; font-size: 12px; }
  .boton-chico { padding: 4px 10px; font-size: 11px; }

  .chip { font-size: 10px; padding: 2px 8px; }

  .superior h1 { font-size: 14px; }
  .reloj-barra { font-size: 12px; }
  .empresa-nombre { font-size: 11px; }

  .alerta { padding: 10px 14px; font-size: 12px; }
  .vacio { padding: 28px 14px; }
  .vacio p { font-size: 13px; }

  .mesas { grid-template-columns: repeat(2, 1fr); }

  /* Tablas: hacer que se lean en celular */
  .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Celular chico */
@media (max-width: 380px) {
  .rejilla { grid-template-columns: 1fr; }
  .mesas { grid-template-columns: 1fr; }
  .contenido { padding: 12px 10px 20px; }
  .superior { padding: 8px 10px; }
}

/* ==========================================================================
   MESAS EN VIVO — profesional, espaciado, secciones separadas
   ========================================================================== */
/* Ancho FIJO de cada tarjeta, igual en cualquier pantalla: antes era
   minmax(280px, 1fr), que estiraba las tarjetas para llenar el espacio y
   las hacia mas anchas o angostas segun el monitor. Ahora en pantallas
   grandes simplemente caben mas tarjetas por fila, todas del mismo porte. */
.mesas {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.mesa {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  border-left: 4px solid var(--ok);
  box-shadow: var(--sh-1);
  transition: border-color .2s, box-shadow .2s, transform .2s;
  overflow: hidden;
}
.mesa:hover {
  border-color: var(--accent);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}

/* Cabecera de mesa */
.mesa-cab {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px 12px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--line-soft);
}
.mesa-nombre {
  font-weight: 700; font-size: 12.5px; color: var(--txt);
  /* Mismo motivo que en .mesa-meta: un nombre de mesa/pedido largo no debe
     partir la cabecera en dos lineas y desnivelar la tarjeta frente a las
     de Comedor. Si no entra, se trunca con "…" (incluye el folio, que es
     el dato menos importante de la linea). */
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mesa-folio {
  color: var(--txt-dim); font-weight: 500; font-size: 11px;
  margin-left: 8px; opacity: .6;
}
.mesa-total {
  font-weight: 800; font-size: 14px; color: var(--ok);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Info del mesero */
.mesa-meta {
  color: var(--txt-dim); font-size: 10.5px;
  padding: 6px 14px;
  line-height: 1.5;
  letter-spacing: .01em;
  /* "REPARTIDOR" pesa mas que "MESERO" y un nombre largo puede partir esta
     linea en dos, lo que hace mas alta la tarjeta de Domicilio/Rapido que
     la de Comedor. Una sola linea con elipsis mantiene TODAS las tarjetas
     con la misma altura, sea cual sea el canal o el texto. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lista de productos */
.mesa-lineas {
  font-size: 11px; color: var(--txt-mute);
  padding: 8px 14px 14px;
  border-top: 1px dashed var(--line-soft);
}
.mesa-lineas-scroll {
  /* 4 lineas exactas. Con box-sizing:border-box el max-height incluye el
     padding de .mesa-lineas (12px arriba) y el padding-bottom propio de
     aqui abajo (8px): 4*25.5 + 12 + 8 = 122px. Si cambia cualquiera de
     esos paddings, o el "> 4" de vivo.php, hay que volver a sacar la cuenta. */
  max-height: 102px;
  overflow-y: auto;
  /* Un padding-bottom aqui adentro se moveria CON el scroll (solo se ve al
     llegar al final). Para que la barra deje un aire fijo antes del borde
     de la tarjeta, ese espacio va como margin-bottom: queda FUERA del area
     que se desplaza, siempre visible, sin importar cuanto se haga scroll. */
  padding-bottom: 6px;
  margin-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.mesa-lineas-scroll::-webkit-scrollbar { width: 4px; }
.mesa-lineas-scroll::-webkit-scrollbar-track { background: transparent; }
.mesa-lineas-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.mesa-linea {
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px; padding: 2px 0;
  font-size: 11px; line-height: 1.35;
}
.mesa-linea span:first-child {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mesa-linea span:last-child {
  flex-shrink: 0; font-variant-numeric: tabular-nums;
  font-weight: 500; color: var(--txt-soft);
}
.mesa-linea-cancelada {
  color: var(--bad); text-decoration: line-through; opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════
   SECCIONES: Comedor, Domicilio, Rápido — bien separadas
   ═══════════════════════════════════════════════════════════════ */
.ns-section-title {
  font-weight: 700; font-size: 12px;
  margin: 0; padding: 10px 16px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px 16px;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--txt);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ns-section-title:not(:first-child) {
  margin-top: 28px;
}
.canal-montos {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-weight: 600; font-size: 11.5px;
  text-transform: none; letter-spacing: 0;
}
.canal-monto { color: var(--ok); }
.canal-monto-cancelado { color: var(--bad); }
.canal-monto-descuento { color: var(--warn); }

/* Espacio entre título de sección y las mesas */
.ns-section-title + .mesas { margin-top: 12px; }
.ns-section-title + div[style*="text-align"] { margin-top: 10px; }

/* Espacio DEBAJO de las mesas antes de la siguiente sección */
.mesas { margin-bottom: 14px; padding-bottom: 6px; }

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
#toast-container {
  position: fixed; top: 16px; right: 16px; z-index: 10000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; max-width: 340px;
}
@media (max-width: 640px) {
  #toast-container { left: 12px; right: 12px; max-width: none; }
}
.toast {
  padding: 10px 16px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.5; color: #fff;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0; transform: translateX(40px);
  transition: opacity .25s, transform .25s;
  pointer-events: auto;
}
.toast-visible { opacity: 1; transform: translateX(0); }
.toast-nueva  { border-left: 3px solid var(--ok); }
.toast-cambio { border-left: 3px solid var(--warn); }
.toast-cerrada { border-left: 3px solid var(--accent); }
.toast-cancelado { border-left: 3px solid var(--bad); }

/* ==========================================================================
   BARRA DE AUTO-REFRESCO
   ========================================================================== */
.refresh-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 4px; background: rgba(255,255,255,.06);
  z-index: 9999;
}
.refresh-fill {
  height: 100%; width: 0%;
  background: var(--ok);
  border-radius: 0 2px 2px 0;
  transition: background .3s;
  box-shadow: 0 0 8px currentColor;
}

/* ==========================================================================
   MODAL DE DETALLE COMPLETO — Mesas en vivo
   Se abre al hacer click en cualquier tarjeta de mesa/pedido/envio. Muestra
   TODOS los productos (sin el tope de 4 de la tarjeta chica) y una barra
   por producto proporcional al mas caro de la cuenta, como vista grafica
   complementaria al detalle escrito.
   ========================================================================== */
.ns-modal-fondo {
  position: fixed; inset: 0;
  background: rgba(5,8,15,.72);
  display: none; align-items: center; justify-content: center;
  z-index: 2000; padding: 20px;
}
.ns-modal-fondo.abierto { display: flex; }

.ns-modal {
  width: 100%; max-width: 460px; max-height: 86vh;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-2);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: ns-modal-in .16s ease-out;
}
@keyframes ns-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.ns-modal-cab {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 18px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--line-soft);
}
.ns-modal-titulo { font-weight: 700; font-size: 16px; color: var(--txt); flex: 1; min-width: 0; }
.ns-modal-folio  { color: var(--txt-dim); font-weight: 500; font-size: 11px; margin-left: 6px; opacity: .65; }
.ns-modal-total  { font-weight: 800; font-size: 18px; color: var(--ok); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ns-modal-cerrar {
  background: transparent; border: none; color: var(--txt-dim);
  font-size: 16px; line-height: 1; cursor: pointer;
  padding: 4px 7px; border-radius: 6px; flex-shrink: 0;
}
.ns-modal-cerrar:hover { background: rgba(255,255,255,.08); color: var(--txt); }

.ns-modal-meta {
  padding: 10px 18px;
  font-size: 12px; color: var(--txt-dim);
  border-bottom: 1px dashed var(--line-soft);
}

.ns-modal-cuerpo {
  padding: 10px 18px 18px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.ns-modal-cuerpo::-webkit-scrollbar { width: 5px; }
.ns-modal-cuerpo::-webkit-scrollbar-track { background: transparent; }
.ns-modal-cuerpo::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.ns-modal-linea { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.ns-modal-linea:last-child { border-bottom: none; }
.ns-modal-linea-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.ns-modal-linea-nombre { font-weight: 600; color: var(--txt); }
.ns-modal-linea-importe { font-weight: 600; color: var(--txt-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.ns-modal-linea-info {
  font-size: 11.5px; color: var(--txt-dim);
  margin-top: 5px; line-height: 1.5;
}
.ns-modal-linea-info strong { color: var(--txt-soft); font-weight: 600; }
.ns-modal-linea-cancelada .ns-modal-linea-info strong { color: var(--bad); }

.ns-modal-linea-cancelada .ns-modal-linea-nombre,
.ns-modal-linea-cancelada .ns-modal-linea-importe { color: var(--bad); text-decoration: line-through; opacity: .6; }

.ns-modal-resumen {
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  background: rgba(255,255,255,.02);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--txt-dim);
}

/* La tarjeta chica ahora es clickeable: se abre en modal al tocarla */
.mesa { cursor: pointer; }