/* ===========================================================================
   POS Grupo ARPA - Laboratorio, Sprint 1
   Sin CDN, sin fuentes remotas, sin iconos externos: todo local.
   Objetivo: rapidez tactil. Ningun objetivo de toque por debajo de 44px.
   =========================================================================== */

:root {
  /* --- Superficies -------------------------------------------------------
     Tema claro. Se eligio asi porque el POS vive en la terraza: con sol de
     frente una pantalla oscura no se lee, y el mesero termina tapandola con
     la mano para ver los precios. */
  --bg:        #eef2f6;   /* fondo de la aplicacion */
  --panel:     #ffffff;   /* tarjetas y barras */
  --panel-2:   #f1f5f9;   /* campos, chips, superficies secundarias */
  --panel-3:   #e1e9f1;   /* hover y presionado */
  --line:      #d7e1ea;
  --text:      #14293a;   /* azul muy oscuro: menos duro que el negro puro */
  --muted:     #55697d;   /* oscurecido hasta pasar 4.5:1 sobre el fondo */

  /* --- Marca -------------------------------------------------------------
     Azul de banco: serio, alto contraste sobre blanco y distinto de los
     colores que ya significan algo (verde libre, ambar ocupada...). */
  --brand:     #0b5c8a;
  --brand-d:   #084a70;
  --brand-bg:  #e6f1f8;

  /* --- Semanticos --------------------------------------------------------
     Cada uno con tres tonos: el fuerte para rellenos y aros, el -bg para
     fondos suaves y el -fg para texto legible sobre ese fondo. Sin los tres,
     un aviso en ambar sobre blanco o no se ve o no se lee. */
  --accent:    #0f9d58;   /* libre / confirmar / dinero que entra */
  --accent-d:  #0b7c45;
  --accent-bg: #e6f6ed;
  --accent-fg: #0a5c33;

  --warn:      #bd7000;   /* ocupada / pendiente. Para aros y rellenos: para
                             TEXTO se usa --warn-fg, que si contrasta. */
  --warn-bg:   #fcebd2;
  --warn-fg:   #8a5200;

  --info:      #1567c8;   /* enviado a cocina */
  --info-bg:   #dbe9fc;
  --info-fg:   #0c4587;

  --cuenta:    #7b3fd4;   /* cuenta impresa, esperando pago */
  --cuenta-bg: #f0e2fb;
  --cuenta-fg: #4d1f96;

  --danger:    #d33a3a;
  --danger-bg: #fdeaea;
  --danger-fg: #94201f;

  /* Texto sobre un relleno de color saturado. */
  --sobre:     #ffffff;

  /* --- Forma -------------------------------------------------------------
     En claro, la profundidad la da la sombra, no el borde: un borde duro en
     cada tarjeta ensucia la pantalla. */
  --radius:    12px;
  --radius-s:  9px;
  --sombra:    0 1px 2px rgba(20, 41, 58, .06), 0 2px 8px rgba(20, 41, 58, .05);
  --sombra-md: 0 2px 6px rgba(20, 41, 58, .08), 0 8px 24px rgba(20, 41, 58, .08);
  --sombra-lg: 0 8px 20px rgba(20, 41, 58, .10), 0 24px 60px rgba(20, 41, 58, .16);
  --tap:       48px;      /* altura minima de cualquier control */
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

/* Nada de seleccion accidental de texto al arrastrar mesas con el dedo. */
body { user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* El atributo hidden pone display:none, pero CUALQUIER display del autor le
   gana. Con .field{display:flex} el indicador de disco se veia como una
   pildora ambar vacia junto al reloj, siempre. Esta regla lo zanja para todo
   el prototipo, no solo para el buscador donde ya habia pasado. */
[hidden] { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { opacity: .45; cursor: not-allowed; }

.app { display: flex; flex-direction: column; height: 100%; }

/* ---------- Banda de laboratorio (obligatoria en toda pantalla) ---------- */
.lab-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--danger-bg);
  border-bottom: 1px solid #f2c9c9;
  padding: 8px 16px; font-size: 12.5px; letter-spacing: .03em;
}
.lab-banner strong {
  color: var(--sobre); background: var(--danger); font-weight: 800;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .06em;
}
.lab-banner span { color: #9c3b39; font-weight: 600; }

/* ---------- Encabezado ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--panel);
  box-shadow: 0 1px 0 var(--line);
  position: relative; z-index: 5;
}
.brand { font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--brand); }
.brand em { color: var(--accent); font-style: normal; }
.sucursal { color: var(--muted); font-size: 13px; }
.topbar .spacer { flex: 1; }

.field { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
/* Reloj + turno. Se enciende cuando falta poco para el corte. */
#reloj { font-weight: 700; color: var(--text); white-space: nowrap; }
#reloj[data-alerta="si"] { color: var(--warn-fg); }

/* Pendientes de guardar en disco. Sólo aparece cuando hay algo pendiente:
   un indicador siempre encendido se vuelve invisible. */
#disco {
  font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 5px 10px; border-radius: 7px;
  background: var(--warn-bg); color: var(--warn-fg); box-shadow: inset 0 0 0 1px var(--warn);
}
#disco[data-alerta="si"] { background: var(--danger-bg); color: var(--danger-fg); box-shadow: inset 0 0 0 2px var(--danger); }

.field select, .field input {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; min-height: 42px; font-size: 15px;
}
.field select:focus, .field input:focus,
.prop input:focus, .prop select:focus, .modal-card textarea:focus,
.buscador input:focus, .bsc-in:focus, .filtros input:focus, .filtros select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}

/* ---------- Pestanas de vista ---------- */
/* La barra va HUNDIDA y la pestana activa es la hoja blanca que se conecta con
   el contenido de abajo. Es la metafora de pestana de toda la vida, y es lo que
   hace que se vea terminada en vez de seis palabras sueltas con una raya. */
.tabs {
  display: flex; gap: 2px; padding: 8px 20px 0;
  background: var(--panel-2);
  box-shadow: inset 0 -1px 0 var(--line);
  overflow-x: auto;
}
.tab {
  min-height: 44px; padding: 0 20px; border-radius: 11px 11px 0 0;
  background: transparent; color: var(--muted);
  font-weight: 700; font-size: 14.5px; white-space: nowrap;
  transition: background .12s, color .12s;
}
.tab:hover { background: rgba(255, 255, 255, .55); color: var(--text); }
.tab[aria-selected="true"] {
  background: var(--panel); color: var(--brand); font-weight: 800;
  /* La linea de color arriba la ancla; la de abajo la borra para que se una
     con la barra blanca de abajo y se vea como una sola superficie. */
  box-shadow: inset 0 3px 0 var(--brand), 0 -1px 3px rgba(20, 41, 58, .05);
}

/* ---------- Contenedor de vistas ---------- */
.views { flex: 1; min-height: 0; position: relative; background: var(--bg); }
.view { position: absolute; inset: 0; display: none; }
.view[data-active="true"] { display: flex; }

/* ---------- Plano ---------- */
.salon { flex-direction: column; width: 100%; min-height: 0; }
.salon-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 20px; background: var(--panel); box-shadow: 0 1px 0 var(--line);
}
/* Control segmentado: un solo grupo con una pastilla blanca que se mueve, no
   tres botones sueltos. Mas chico que las pestanas, porque esto es un filtro
   dentro de la pantalla, no un cambio de pantalla. */
.areas-grupo {
  display: inline-flex; gap: 2px; padding: 3px; flex-wrap: wrap;
  background: var(--panel-2); border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.area-tab {
  min-height: 36px; padding: 0 16px; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-weight: 700; font-size: 13.5px; white-space: nowrap;
  transition: background .12s, color .12s, box-shadow .12s;
}
.area-tab:hover { color: var(--text); }
.area-tab[aria-selected="true"] {
  background: var(--panel); color: var(--brand);
  box-shadow: var(--sombra);
}

.leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-left: auto; flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.i-libre { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.i-ocupada { background: var(--warn); }
.i-enviada { background: var(--info); }
.i-cuenta { background: var(--cuenta); }

.plano-wrap { flex: 1; min-height: 0; overflow: auto; padding: 16px; }

/* Vista "Todo el salón": las áreas en fila, cada una con su rótulo. */
.areas-lienzo { display: flex; gap: 18px; align-items: flex-start; justify-content: center; }
.area-col { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.area-rotulo {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--muted);
  text-transform: uppercase; padding-left: 2px;
}
/* La caja reserva el espacio del lienzo ya escalado: un transform no ocupa
   espacio de layout, así que sin esto las áreas se encimarían. */
.area-caja { position: relative; overflow: hidden; border-radius: 14px; }
.area-caja > .plano { position: absolute; left: 0; top: 0; }
.plano {
  position: relative; margin: 0 auto;
  background:
    repeating-linear-gradient(0deg, #eaf0f6 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, #eaf0f6 0 1px, transparent 1px 40px);
  background-color: var(--panel);
  border: 1px solid var(--line); border-radius: 14px;
  transform-origin: top left;
}

.decor {
  position: absolute; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .08em; color: var(--muted);
  border: 1px dashed var(--line); background: #f2f6fa;
  /* Un elemento angosto no debe derramar su etiqueta sobre las mesas de al lado. */
  overflow: hidden; text-align: center; padding: 2px;
}
.decor[data-tipo="jardinera"], .decor[data-tipo="vegetacion"] { background: #e9f5ed; border-color: #b5dbc3; color: #38795a; }
.decor[data-tipo="acceso"] { background: #edf0f8; border-color: #c4ccdf; color: #586590; }
.decor[data-tipo="mueble"] { background: #f6efe5; border-color: #dcc9ab; color: #856741; }
.decor[data-forma="redonda"] { border-radius: 50%; }

/* Maceta de concreto vista desde arriba: aro grueso de concreto y, dentro,
   la copa de un olivo. Todo con gradientes: ni una imagen, ni una petición de red. */
.decor[data-tipo="vegetacion"][data-forma="redonda"] {
  border: 9px solid #c2bfb3;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px #9d9a8f,               /* canto interior del concreto */
    inset 0 3px 9px rgba(20, 41, 58, .18),       /* profundidad de la maceta */
    0 2px 7px rgba(20, 41, 58, .14);              /* sombra sobre el piso */
  background:
    radial-gradient(circle at 50% 53%, #6d5136 0 7%,  transparent 8%),    /* tronco */
    radial-gradient(circle at 33% 31%, #7ba368 0 15%, transparent 16%),   /* copa: hojas claras */
    radial-gradient(circle at 67% 37%, #5d8450 0 13%, transparent 14%),
    radial-gradient(circle at 44% 68%, #749961 0 16%, transparent 17%),
    radial-gradient(circle at 66% 66%, #4f6f45 0 11%, transparent 12%),
    radial-gradient(circle at 26% 60%, #688c58 0 10%, transparent 11%),
    radial-gradient(circle at 50% 50%, #46603e 0 58%, #374d33 100%);      /* fondo de la copa */
  color: #eaf2e4;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .85);
  font-size: 9px;
  letter-spacing: .02em;
}

.mesa {
  position: absolute; border-radius: 10px;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--accent), 0 1px 3px rgba(20, 41, 58, .10);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px; text-align: center; overflow: hidden;
}
.mesa[data-forma="redonda"] { border-radius: 50%; }
/* Estados de la mesa, en orden de urgencia para el mesero:
   libre (verde) · por enviar (ámbar) · en cocina (azul) · cuenta impresa (violeta). */
.mesa[data-fase="abierta"],
.mesa[data-fase="pendiente"] { background: var(--warn-bg); box-shadow: inset 0 0 0 2px var(--warn), 0 1px 3px rgba(20, 41, 58, .10); }
.mesa[data-fase="cocina"]    { background: var(--info-bg); box-shadow: inset 0 0 0 2px var(--info), 0 1px 3px rgba(20, 41, 58, .10); }
.mesa[data-fase="cuenta"]    { background: var(--cuenta-bg); box-shadow: inset 0 0 0 3px var(--cuenta), 0 1px 3px rgba(20, 41, 58, .10); }
.mesa:active { filter: brightness(.96); }
.mesa .m-num { font-weight: 800; font-size: 20px; line-height: 1; }
.mesa .m-cap { font-size: 11px; color: var(--muted); }
.mesa .m-info { font-size: 11px; color: var(--warn-fg); line-height: 1.25; }
/* Quién trae la mesa; el "+N" son los meseros que apoyaron. */
.mesa .m-mesero {
  font-size: 10px; font-weight: 700; color: var(--info-fg); letter-spacing: .02em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Tiempo en mesa. Se enciende en ámbar a partir de hora y media. */
.mesa .m-tiempo { font-size: 11px; font-weight: 700; color: var(--muted); }
.mesa .m-tiempo[data-largo="si"] { color: var(--warn-fg); }
.mesa .m-total { font-size: 13px; font-weight: 800; }
.mesa[data-oculta="si"] { opacity: .3; box-shadow: inset 0 0 0 2px #b7c5d2; }

/* ---------- Pedido ---------- */
/* La hoja de pedido se abre ENCIMA del salon, dejando el plano visible atras.
   Que se siga viendo el salon no es adorno: el mesero no pierde de vista donde
   esta parado ni cuantas mesas trae encima mientras captura. Y tocar fuera
   regresa, que es el gesto que la gente intenta primero. */
.hoja-pedido {
  position: absolute; inset: 0; z-index: 40;
  display: none; padding: 26px 40px;
  background: rgba(20, 41, 58, .34);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.hoja-pedido[data-abierto="true"] { display: flex; animation: hoja-entra .16s ease-out; }

/* El panel es el que trae el fondo solido: si fuera transparente, el plano de
   atras se leeria por debajo de los precios. */
.hoja-panel {
  flex: 1; display: flex; min-width: 0; min-height: 0;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--sombra-lg);
  overflow: hidden;                 /* para que las esquinas redondas recorten */
}

@keyframes hoja-entra { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* En pantalla chica el margen se come el espacio util: casi pegado al borde. */
@media (max-width: 900px) {
  .hoja-pedido { padding: 6px; }
  .hoja-panel { border-radius: 10px; }
}

/* Se respeta a quien pidio no ver animaciones. */
@media (prefers-reduced-motion: reduce) {
  .hoja-pedido[data-abierto="true"] { animation: none; }
}

/* Dos columnas. Con 22 categorias en una sola columna la lista medi­a el doble
   de la pantalla y habia que perseguirla con el dedo a media comanda. En dos
   caben todas de un vistazo. */
.cats {
  width: 246px; flex: 0 0 246px; border-right: 1px solid var(--line);
  overflow-y: auto; padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start;
  background: var(--panel-2);
}
.cat {
  min-height: 50px; padding: 7px 9px; border-radius: var(--radius-s);
  background: var(--panel-2); text-align: left; font-weight: 700; font-size: 11px;
  display: flex; justify-content: space-between; align-items: center; gap: 5px;
  line-height: 1.15;
}
/* Los nombres largos parten entre PALABRAS, no a media palabra: con
   overflow-wrap:anywhere quedaba "BEBIDAS ALCOHOLICA / S", que se lee peor
   que si no cupiera. Solo se parte una palabra si por si sola no cabe. */
.cat b { flex: 1; font-weight: 800; overflow-wrap: break-word; hyphens: none; }
.cat small { color: var(--muted); font-weight: 700; font-size: 10px; flex: 0 0 auto; }
.cat { background: transparent; transition: background .12s; }
.cat:hover { background: var(--panel-3); }
.cat[aria-selected="true"] { background: var(--brand); color: var(--sobre); }
.cat[aria-selected="true"] small { color: var(--sobre); opacity: .75; }

.productos-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.buscador { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; background: var(--panel); }
.buscador input {
  flex: 1; min-height: var(--tap); padding: 0 14px; font-size: 16px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
}
.btn-limpiar { min-height: var(--tap); padding: 0 16px; border-radius: var(--radius); background: var(--panel-2); color: var(--muted); font-weight: 700; }

/* Las tarjetas son blancas: si el fondo tambien lo fuera, se perderian. Un gris
   claro atras las levanta sin necesidad de bordes gruesos. */
.productos { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 9px;
  background: var(--bg);
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  /* Alto fijo: todas las tarjetas iguales, con espacio para 3 renglones de
     nombre + categoría + precio. Así la cuadrícula no baila según el texto. */
  grid-auto-rows: 98px; align-content: start; }
.prod {
  height: 100%; border-radius: var(--radius-s); background: var(--panel);
  border: 1px solid var(--line); padding: 8px 9px; text-align: left;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden;
  box-shadow: var(--sombra);
  transition: box-shadow .12s, transform .12s, border-color .12s;
}
.prod:hover { border-color: var(--brand); box-shadow: var(--sombra-md); }
.prod:active { transform: translateY(1px); box-shadow: var(--sombra); background: var(--panel-2); }
.prod > span { display: block; width: 100%; }
.prod .p-cat {
  font-size: 9px; color: var(--muted); letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod .p-nom {
  font-size: 12px; font-weight: 700; line-height: 1.2; flex: 1; min-height: 0;
  /* Hasta 3 renglones; lo que no cabe se corta con puntos suspensivos y el
     nombre completo queda en el tooltip, no se pierde. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* margin-top:auto ancla el precio abajo aunque el nombre ocupe 1 renglón. */
.prod .p-pre { font-size: 15px; font-weight: 800; color: var(--text); margin-top: auto; }
.vacio { color: var(--muted); padding: 30px; text-align: center; grid-column: 1 / -1; }

/* ---------- Ticket (siempre visible) ---------- */
/* Una columna menos de productos, a cambio de que quepan mas platillos en el
   ticket. En una mesa de ocho, ver dos renglones no sirve de nada: hay que
   perseguir la lista con el dedo mientras el cliente sigue pidiendo. */
.ticket {
  width: 430px; flex: 0 0 430px; border-left: 1px solid var(--line);
  background: var(--panel); display: flex; flex-direction: column; min-height: 0;
}
/* El encabezado es informacion de contexto: se lee una vez y estorba el resto
   del turno. Se aprieta para dejarle el alto a los platillos. */
.ticket-head { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.ticket-head .t-mesa { font-size: 17px; font-weight: 800; }
.ticket-head .t-meta { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.ticket-lines {
  flex: 1; overflow-y: auto; padding: 7px; display: flex; flex-direction: column; gap: 5px;
  scroll-behavior: smooth;
}

.line {
  background: var(--panel); border-radius: var(--radius-s); padding: 7px 9px;
  border-left: 4px solid var(--warn); box-shadow: var(--sombra);
}
.line[data-enviado="si"] { border-left-color: var(--info); opacity: .85; }
.line-top { display: flex; align-items: center; gap: 8px; }
.line-nom { flex: 1; font-size: 13.5px; font-weight: 700; line-height: 1.18; }
.line-imp { font-weight: 800; font-size: 15px; }
.line-bot { display: flex; align-items: center; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button {
  width: 36px; height: 36px; border-radius: 8px; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 19px; font-weight: 800; color: var(--text);
}
.qty button:hover { background: var(--panel-3); }
.qty b { min-width: 28px; text-align: center; font-size: 16px; }
.line-bot .mini {
  min-height: 36px; padding: 0 10px; border-radius: 8px; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 700;
}
.line-bot .mini:hover { background: var(--panel-3); }
.line-bot .mini.del { color: var(--danger); }
.line-nota { margin-top: 6px; font-size: 12px; color: var(--warn-fg); font-style: italic; }
.line-quien { margin-top: 4px; font-size: 11px; color: var(--info-fg); }

/* Aviso de que se está capturando en la mesa de otro mesero. */
.t-aviso { display: none; margin-top: 8px; padding: 7px 10px; border-radius: 8px;
  background: var(--warn-bg); border-left: 3px solid var(--warn); color: var(--warn-fg);
  font-size: 12px; font-weight: 700; line-height: 1.35; }
.t-aviso[data-on="si"] { display: block; }

/* Flechas para recorrer el ticket. En una pantalla tactil, arrastrar una lista
   angosta con el dedo se lleva por delante el boton de "Cancelar" del renglon
   que ibas pasando; con flechas eso no pasa. Solo salen cuando hay que bajar. */
.ticket-nav {
  display: none; gap: 6px; padding: 0 7px 6px;
}
.ticket-nav[data-hay="si"] { display: flex; }
.ticket-nav button {
  flex: 1; min-height: 34px; border-radius: 8px;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 16px; font-weight: 800; color: var(--muted);
}
.ticket-nav button:hover { background: var(--panel-3); color: var(--text); }

.mini-link { margin-top: 8px; padding: 0; background: none; color: var(--info);
  font-size: 12px; font-weight: 700; text-decoration: underline; min-height: auto; }

/* Tablas de reporte dentro de un modal. */
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
  text-align: left; color: var(--muted); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 800; padding: 9px 10px;
  border-bottom: 2px solid var(--line); background: var(--panel-2);
}
.tabla td { padding: 10px; border-bottom: 1px solid var(--line); }
.tabla tbody tr:nth-child(even) td { background: #fafcfe; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.bitacora { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.7;
  max-height: 180px; overflow-y: auto; }
.line-enviado { margin-top: 6px; font-size: 11px; color: var(--info); font-weight: 700; letter-spacing: .04em; }

.ticket-foot {
  border-top: 1px solid var(--line); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 7px; background: var(--panel-2);
}
.total-row { display: flex; justify-content: space-between; align-items: baseline; }
.total-row span { color: var(--muted); font-size: 13px; }
.total-row b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* Los botones del pie mas bajos: 48 px cada uno por tres renglones se comian
   el alto que necesitan los platillos. 42 sigue siendo comodo con el dedo. */
.acciones .btn { min-height: 42px; font-size: 13px; padding: 0 10px; }
.btn {
  min-height: var(--tap); border-radius: var(--radius-s); font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px;
  background: var(--panel); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line), var(--sombra);
  transition: background .12s, box-shadow .12s, transform .08s;
}
.btn:hover { background: var(--panel-2); }
.btn:active { transform: translateY(1px); }
.btn-main   { background: var(--accent); color: var(--sobre); box-shadow: var(--sombra); }
.btn-main:hover { background: var(--accent-d); }
.btn-info   { background: var(--info); color: var(--sobre); box-shadow: var(--sombra); }
.btn-info:hover { background: var(--info-fg); }
.btn-cuenta { background: var(--cuenta); color: var(--sobre); box-shadow: var(--sombra); }
.btn-cuenta:hover { background: var(--cuenta-fg); }
/* Rojo de contorno, no de relleno: cobrar y cancelar no pueden verse igual de
   invitantes que enviar a cocina. */
.btn-danger { background: var(--danger-bg); color: var(--danger-fg);
  box-shadow: inset 0 0 0 1px #f0c4c4, var(--sombra); }
.btn-danger:hover { background: #fbdcdc; }
.btn-wide { grid-column: 1 / -1; }

/* ---------- Producto agotado (86) y con modificadores ---------- */
.prod[data-agotado="si"] { opacity: .4; }
.prod[data-agotado="si"]::after {
  content: "86 · AGOTADO"; position: absolute; inset: auto 0 0 0;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-align: center; padding: 2px 0;
}
.prod { position: relative; }
/* Un punto discreto avisa que ese producto va a preguntar opciones. */
.prod[data-mods="si"]::before {
  content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--info);
}

/* ---------- Partidas: modificadores, descuento, cancelada ---------- */
.line-mod { margin-top: 3px; font-size: 12px; color: var(--info-fg); }
.line-desc { margin-top: 4px; font-size: 12px; color: var(--cuenta); font-weight: 700; }
.line-cancelada { margin-top: 6px; font-size: 11px; color: var(--danger-fg); font-weight: 700; }
.line[data-cancelada="si"] { opacity: .55; border-left-color: var(--danger); }
.line[data-cancelada="si"] .line-nom,
.line[data-cancelada="si"] .line-imp { text-decoration: line-through; }

.total-row.sub b, .total-row.desc b { font-size: 15px; }
.total-row.desc b { color: var(--cuenta); }

/* ---------- Listas de selección en modales ---------- */
.lista-sel { max-height: 260px; overflow-y: auto; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 8px; }
.sel-fila { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.sel-fila:last-child { border-bottom: 0; }
.sel-fila:hover { background: var(--panel-2); }
.sel-fila span { flex: 1; }
.sel-fila input { width: 20px; height: 20px; min-height: auto; }
.sel-fila.agotado { color: var(--danger-fg); }
.acciones-lista { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Pedidos sin mesa ---------- */
.llevar-caja { margin-top: 18px; }
.llevar-lista { display: flex; gap: 10px; flex-wrap: wrap; }
.llevar-card { min-width: 150px; min-height: var(--tap); padding: 10px 14px;
  border-radius: var(--radius); background: var(--panel-2);
  box-shadow: inset 0 0 0 2px var(--warn); text-align: left;
  display: flex; flex-direction: column; gap: 2px; }
.llevar-card b { font-size: 15px; font-weight: 800; }
.llevar-card span { font-size: 11px; color: var(--muted); }
.llevar-card[data-fase="cocina"] { box-shadow: inset 0 0 0 2px var(--info); }
.llevar-card[data-fase="cuenta"] { box-shadow: inset 0 0 0 2px var(--cuenta); }

/* ---------- Buscador inteligente ---------- */
.bsc { position: relative; }
.bsc-in {
  width: 100%; min-height: 44px; padding: 0 10px; font-size: 15px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
}
.bsc-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  max-height: 260px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 22px rgba(20, 41, 58, .18);
}
.bsc-op {
  display: block; width: 100%; text-align: left; padding: 9px 11px;
  border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.3;
}
.bsc-op:last-child { border-bottom: 0; }
.bsc-op:hover, .bsc-op[data-marcado="si"] { background: var(--panel-3); }
.bsc-op small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.bsc-vacio { padding: 12px; color: var(--muted); font-size: 13px; }
/* El atributo hidden pone display:none desde el navegador, pero cualquier
   display del autor le gana. Sin esta regla, la etiqueta de "elegido" se ve
   vacía debajo de cada buscador. */
.bsc [hidden] { display: none !important; }

/* Lo elegido se ve como una etiqueta cerrada: deja claro que se escogió de la
   lista y no se tecleó a mano. */
.bsc-elegido {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 6px 0 11px; border-radius: 8px;
  background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--accent);
}
.bsc-elegido span { flex: 1; font-size: 14px; font-weight: 700; }
.bsc-x { width: 34px; height: 34px; border-radius: 7px; font-size: 20px; color: var(--muted); }
.bsc-x:hover { background: var(--panel-2); color: var(--text); }

/* ---------- Corte del día ---------- */
.corte { flex-direction: column; width: 100%; min-height: 0; }
.corte-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; box-shadow: 0 1px 0 var(--line); background: var(--panel); }
.corte-cuerpo { flex: 1; overflow-y: auto; padding: 20px; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-content: start; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--sombra);
}
.panel.ancho { grid-column: 1 / -1; }
/* En un monitor ancho el grid arma cuatro columnas por el panel que las cruza
   todas, y el arqueo se queda solo en una, angosto, con medio monitor vacio al
   lado. Se le dan dos columnas para que respire. */
@media (min-width: 1200px) {
  .corte-cuerpo > .panel:not(.ancho) { grid-column: span 2; }
}
.panel h3 {
  margin: 0 0 16px; font-size: 13px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); font-weight: 800;
}

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; margin-bottom: 14px; }
.kpi { background: var(--panel-2); border-radius: var(--radius-s); padding: 11px 13px; }
.kpi span { display: block; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.kpi b { display: block; font-size: 21px; font-weight: 800; margin-top: 3px; letter-spacing: -.02em; }

.arqueo { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.arq-fila { display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; font-size: 14px; }
.arq-fila span { color: var(--muted); }
.arq-fila.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.arq-fila.total b { font-size: 21px; color: var(--accent); }
/* El conteo no puede ir pegado al esperado: son dos cosas distintas y se
   confunden al leerlas de corrido. */
.arqueo .prop { margin-top: 16px; }

/* El resultado del arqueo se lee de un vistazo: verde cuadra, ámbar sobra, rojo falta. */
.arq-dif { margin: 10px 0; padding: 11px 13px; border-radius: 8px; font-weight: 800;
  font-size: 16px; text-align: center; letter-spacing: .03em; }
.arq-dif[data-estado="cuadra"]   { background: var(--accent-bg); color: var(--accent);  box-shadow: inset 0 0 0 2px var(--accent); }
.arq-dif[data-estado="sobrante"] { background: var(--warn-bg); color: var(--warn-fg); box-shadow: inset 0 0 0 2px var(--warn); }
.arq-dif[data-estado="faltante"] { background: var(--danger-bg); color: var(--danger-fg);        box-shadow: inset 0 0 0 2px var(--danger); }

.tabla tr.yo td { background: var(--info-bg); font-weight: 700; }
.tabla tr.cancelado td { opacity: .5; text-decoration: line-through; }
.tabla td small { font-size: 11px; }

/* Filtros de la pestaña de gastos e ingresos. */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros select, .filtros input[type="text"], .filtros input:not([type]) {
  min-height: 42px; padding: 0 10px; font-size: 14px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
}
.filtros input:not([type]) { flex: 1; min-width: 200px; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
/* Dinero que sale en rojo, dinero que entra en verde. */
.neg { color: var(--danger-fg); font-weight: 700; }
.pos { color: var(--accent); font-weight: 700; }

/* ---------- Editor de plano ---------- */
.editor { flex-direction: column; width: 100%; min-height: 0; }
.editor-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.editor-body { flex: 1; display: flex; min-height: 0; }
.editor-canvas { flex: 1; overflow: auto; padding: 16px; min-width: 0; }
/* En el editor, mesas y mobiliario fijo se arrastran igual. */
.editor .mesa, .editor .decor { cursor: move; touch-action: none; }
.editor .mesa[data-sel="si"], .editor .decor[data-sel="si"] { outline: 3px dashed var(--accent); outline-offset: 3px; }
.editor .decor { border-style: solid; }
.editor .decor:active { filter: brightness(1.35); }

/* Botón de alternar (Ver ocultas). */
.btn.tog[aria-selected="true"] { background: var(--accent); color: var(--sobre); }

/* Dos campos por renglón: ancho/alto, x/y. */
.prop.dos { display: flex; gap: 8px; }
.prop.dos > div { flex: 1; min-width: 0; }
.props { width: 300px; flex: 0 0 300px; border-left: 1px solid var(--line); background: var(--panel); padding: 14px; overflow-y: auto; }
.props h3 { margin: 0 0 12px; font-size: 15px; letter-spacing: .04em; }
.prop { margin-bottom: 12px; }
.prop label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.prop input, .prop select {
  width: 100%; min-height: 44px; padding: 0 10px; font-size: 15px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
}
.hint { color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(20, 41, 58, .42); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal[data-open="true"] { display: flex; }
.modal-card {
  background: var(--panel); border-radius: 16px; padding: 24px;
  width: 100%; max-width: 460px; box-shadow: var(--sombra-lg);
  max-height: 88vh; overflow-y: auto;
}
.modal-card h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.01em; }
.modal-card .sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.modal-card textarea {
  width: 100%; min-height: 90px; padding: 10px; font: inherit; font-size: 15px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; resize: vertical;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  min-width: 56px; min-height: var(--tap); padding: 0 16px; border-radius: var(--radius-s);
  background: var(--panel-2); font-weight: 700; font-size: 16px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .12s, box-shadow .12s;
}
.chip:hover { background: var(--panel-3); }
.chip[aria-selected="true"] {
  background: var(--brand); color: var(--sobre); box-shadow: none;
}
/* La botonera se queda pegada abajo aunque el contenido del modal sea largo.
   Sin esto, en el cobro los botones caian fuera de la pantalla y habia que
   adivinar que se podia hacer scroll: en un POS la accion principal nunca
   puede estar escondida. */
.modal-acciones {
  display: flex; gap: 8px; justify-content: flex-end;
  position: sticky; bottom: -24px; z-index: 2;
  margin: 18px -24px -24px; padding: 16px 24px;
  background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
}

/* ---------- Aviso flotante ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--text); border-left: 4px solid var(--accent);
  color: #fff; padding: 14px 20px; border-radius: var(--radius-s); font-weight: 700; font-size: 14px;
  box-shadow: var(--sombra-lg);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 90; max-width: 90vw;
}
.toast[data-show="true"] { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Impresión: comanda de 80 mm --------------------------------------
   El área de impresión vive fuera de la pantalla y sólo existe al imprimir.
   72 mm es el ancho imprimible real de una térmica de 80 mm (Bixolon SRP-350plusIII
   entre otras); los 4 mm de cada lado son el margen mecánico del papel. */
#print-area { position: absolute; left: -10000px; top: 0; }

@media print {
  /* Fuera todo menos la comanda. Los hermanos son hijos directos de <body>. */
  body > * { display: none !important; }
  body { background: #fff !important; height: auto; overflow: visible; }

  #print-area {
    display: block !important;
    position: static;
    width: 72mm;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
    /* Monoespaciada obligatoria: las columnas se alinean contando caracteres. */
    font-family: "Consolas", "Courier New", monospace;
    font-size: 10.5pt;
    line-height: 1.22;
    white-space: pre;
    letter-spacing: 0;
  }

  @page { size: 80mm auto; margin: 0; }
}

@media (max-width: 1100px) {
  .ticket { width: 300px; flex-basis: 300px; }
  .cats { width: 206px; flex-basis: 206px; padding: 8px; gap: 5px; }
  .cat { min-height: 46px; padding: 6px 7px; font-size: 10.5px; }
  .props { width: 250px; flex-basis: 250px; }
}

/* ---------- Cobro: pago mixto y cambio ---------- */
/* El total va grande y arriba de todo: es el numero que el mesero le dice al
   cliente, y el que mas se equivoca si hay que buscarlo entre otros. */
.cobro-total {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--panel-2); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 14px;
}
.cobro-total span { font-size: 14px; color: var(--muted); font-weight: 700; }
.cobro-total b { font-size: 30px; font-variant-numeric: tabular-nums; }

.cobro-lista { display: flex; flex-direction: column; gap: 6px; }
.cobro-fila {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border-radius: var(--radius); padding: 8px 8px 8px 14px;
}
.cobro-fila span { flex: 1; font-weight: 700; }
.cobro-fila b { font-variant-numeric: tabular-nums; font-size: 18px; }
.chip-x { min-width: 40px; padding: 0 10px; font-size: 20px; line-height: 1; color: var(--muted); }
.chip-x:hover { background: var(--danger); color: #fff; }
.chip-add { width: 100%; font-size: 15px; }

/* El cambio es lo unico que el mesero lee con las manos ocupadas: grande. */
.cobro-cambio {
  margin-top: 10px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--accent-bg); color: var(--accent); font-size: 20px; font-weight: 700;
}
.cobro-cambio b { font-size: 28px; font-variant-numeric: tabular-nums; }
.cobro-cambio.falta { background: var(--danger-bg); color: var(--danger-fg); }

.cobro-cubierto {
  padding: 14px 16px; border-radius: var(--radius); margin-bottom: 14px;
  background: var(--accent-bg); color: var(--accent); font-weight: 800;
}

/* ---------- Cuentas del dia ---------- */
/* La tabla de cuentas es ancha (9 columnas). En una pantalla chica tiene que
   correrse ella sola, no empujar la pagina entera de lado. */
.tabla-scroll { overflow-x: auto; }
.tabla-scroll .tabla { min-width: 720px; }

.tabla-click tbody tr { cursor: pointer; }
.tabla-click tbody tr:hover td { background: var(--panel-3); }
.tabla-click tbody tr:active td { background: var(--panel-2); }

/* Una partida cancelada sigue en la cuenta a proposito: tiene que verse que
   existio y que se cancelo, no desaparecer como si nunca hubiera pasado. */
.tabla tr.cancelada td { opacity: .55; }
.tabla tr.cancelada td:first-child,
.tabla tr.cancelada td:last-child { text-decoration: line-through; }


/* ---------- Comentario para cocina ---------- */
/* Los comentarios de siempre van mas chicos que un chip normal: son ocho y
   tienen que caber sin empujar el textarea fuera de la pantalla. */
#coment-rapidos .chip {
  min-width: 0; min-height: 40px; padding: 0 12px;
  font-size: 14px; font-weight: 700; color: var(--muted);
}
#coment-rapidos .chip:hover { background: var(--panel-3); color: var(--text); }

/* Una partida QUE YA TRAE comentario se distingue de un toque: si no, el mesero
   no sabe cual lleva "sin cebolla" sin abrirlas una por una. */
.mini[data-puesto="si"] {
  background: var(--warn-bg); color: var(--warn-fg);
  box-shadow: inset 0 0 0 1px var(--warn);
}

/* Rotulo girado: para jardineras altas y angostas, donde el nombre no cabe
   acostado pero si a lo largo. */
.decor[data-girado="si"] { writing-mode: vertical-rl; text-orientation: mixed; }

/* ---------- Candado de entrada (PIN) ---------- */
/* Tapa TODO. No es un modal: de un modal se sale con Escape, y de aqui no se
   puede salir sin identificarse. */
.candado {
  position: fixed; inset: 0; z-index: 120;
  display: none; align-items: center; justify-content: center; padding: 24px;
  background: linear-gradient(160deg, var(--brand) 0%, #063d5c 100%);
}
.candado[data-abierto="si"] { display: flex; }
.candado-caja {
  background: var(--panel); border-radius: 18px; box-shadow: var(--sombra-lg);
  padding: 28px; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  text-align: center;
}
.candado-marca { font-size: 22px; font-weight: 800; color: var(--brand); letter-spacing: -.01em; }
.candado-marca em { color: var(--accent); font-style: normal; }
.candado-sub { color: var(--muted); font-size: 14px; margin: 6px 0 20px; }

/* Los nombres, grandes: se toca el propio antes de teclear. */
.candado-meseros { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.candado-mesero {
  min-height: 62px; border-radius: var(--radius); background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 16px; font-weight: 800; color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.candado-mesero:hover { background: var(--panel-3); }
.candado-mesero small { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.candado-mesero[data-rol="encargado"] small { color: var(--brand); }
/* Sin PIN todavia no puede entrar: se ve, pero apagado. */
.candado-mesero[data-sinpin="si"] { opacity: .42; cursor: not-allowed; }

.candado-quien { font-size: 19px; font-weight: 800; margin-bottom: 14px; }

/* Cuatro puntos que se llenan. Es la unica pista de cuanto llevas tecleado:
   los digitos no se muestran, alguien puede estar viendo por encima. */
.pin-puntos { display: flex; gap: 14px; justify-content: center; margin-bottom: 16px; }
.pin-puntos i {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--line); background: transparent;
}
.pin-puntos i[data-lleno="si"] { background: var(--brand); box-shadow: none; }

.pin-error {
  background: var(--danger-bg); color: var(--danger-fg); font-weight: 700; font-size: 14px;
  padding: 10px 14px; border-radius: var(--radius-s); margin-bottom: 14px;
}

/* Teclas grandes: se teclea con el dedo, a veces con prisa. */
.pin-teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.pin-tecla {
  min-height: 64px; border-radius: var(--radius); background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 26px; font-weight: 800; color: var(--text);
}
.pin-tecla:hover { background: var(--panel-3); }
.pin-tecla:active { background: var(--brand); color: var(--sobre); }
.pin-tecla.borrar { font-size: 18px; font-weight: 700; color: var(--muted); }

/* ---------- Quien esta capturando, en la barra ---------- */
.sesion {
  display: flex; align-items: center; gap: 8px;
  background: var(--brand-bg); border-radius: 999px; padding: 5px 6px 5px 14px;
}
.sesion b { font-size: 14px; font-weight: 800; color: var(--brand); white-space: nowrap; }
.sesion small { font-size: 11px; color: var(--muted); font-weight: 700; }
/* "Cambiar de usuario" tiene que verse. Es lo que un mesero busca cuando llega
   a una terminal donde quedo la sesion de otro, y si no lo encuentra hace lo
   de siempre: capturar a nombre del que estaba. */
.sesion .btn-salir {
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--brand); color: var(--sobre); box-shadow: none;
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.sesion .btn-salir:hover { background: var(--brand-d); }

/* ---------- Firma del encargado ---------- */
.firma-aviso {
  background: var(--warn-bg); color: var(--warn-fg);
  border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 16px;
  font-size: 13px; font-weight: 700; line-height: 1.45;
}
.firma-aviso b { display: block; font-size: 15px; margin-bottom: 3px; }


/* ---------- Renglones plegados del ticket ----------
   Los botones de cada platillo se guardan hasta que se toca el renglon. Con
   ocho platillos en una mesa, tenerlos siempre afuera dejaba ver dos. */
.line-top { cursor: pointer; }
.line-abrir {
  flex: 0 0 auto; width: 20px; text-align: center;
  color: var(--muted); font-size: 17px; line-height: 1;
}
.line[data-abierta="si"] .line-abrir { color: var(--brand); }

/* Enviado a cocina: se pliega todo. Descuento y Cancelar se usan poco, y
   siempre despues de buscar el platillo con la vista. */
.line[data-enviado="si"][data-abierta="no"] .line-bot,
.line[data-enviado="si"][data-abierta="no"] .line-acc { display: none; }

/* Aun no enviado: las CANTIDADES se quedan afuera —se usan a cada rato
   mientras el cliente pide— y se pliegan solo los botones secundarios. */
.line[data-enviado="no"][data-abierta="no"] .line-bot .mini { display: none; }

/* Enviar a trabajar: arriba del total y separado de los botones de cobrar.
   Tomar el pedido y cobrarlo son dos momentos distintos; con la mesa enfrente,
   tocar el equivocado cuesta caro. */
.ticket-foot .btn-enviar {
  width: 100%; min-height: 50px; font-size: 15px;
  margin-bottom: 4px;
}
.ticket-foot .btn-enviar:disabled { opacity: .4; }

/* Lo que falta por cobrar, grande: es el numero que se persigue cuando la
   tarjeta no alcanzo y hay que completar con efectivo. */
.cobro-falta {
  margin-top: 10px; padding: 12px 16px; border-radius: var(--radius-s);
  background: var(--warn-bg); color: var(--warn-fg);
  font-size: 16px; font-weight: 700;
}
.cobro-falta b { font-size: 26px; font-variant-numeric: tabular-nums; }

/* Atajos de importe: mas chicos que un chip normal, y con su cifra debajo. */
#pago-atajos .chip { min-height: 42px; font-size: 14px; }
#pago-atajos .chip small { display: block; font-size: 11px; opacity: .75; font-weight: 700; }

/* Aviso de papel en la barra. Solo sale cuando hay algo que decir: un
   indicador siempre encendido se vuelve invisible y deja de servir. */
#papel {
  font-size: 12px; font-weight: 800; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; letter-spacing: .03em;
}
#papel[data-gravedad="aviso"] {
  background: var(--warn-bg); color: var(--warn-fg);
  box-shadow: inset 0 0 0 1px var(--warn);
}
/* Sin papel no es un aviso: es que las comandas no estan saliendo. */
#papel[data-gravedad="grave"] {
  background: var(--danger); color: var(--sobre);
  animation: papel-late 1.4s ease-in-out infinite;
}
@keyframes papel-late { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  #papel[data-gravedad="grave"] { animation: none; }
}

/* ============ Cabecera ============
   Tres naturalezas distintas, y antes las tres tenian el mismo peso:
   identidad (se lee una vez), estado (se mira de reojo todo el turno) y
   ajustes (se tocan una vez al mes). Ahora se ven distintas. */

.topbar { padding: 10px 20px; gap: 14px; align-items: center; }

/* Marca y sucursal apiladas: en un renglon se llevaban un tercio del ancho. */
.marca { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.marca .brand { font-size: 17px; line-height: 1.1; }
.marca .sucursal {
  font-size: 11.5px; line-height: 1.2; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}

/* Como va todo, en un solo bloque y con la misma forma. Sueltos y de distinto
   tamano se leian como cosas puestas ahi sin pensar. */
.estado {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel-2); border-radius: 999px; padding: 4px 5px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.reloj-caja {
  font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap;
  padding: 4px 12px; font-variant-numeric: tabular-nums;
}
.reloj-caja[data-alerta="si"] {
  background: var(--warn-bg); color: var(--warn-fg);
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--warn);
}

/* Los avisos dentro del bloque de estado: mismo alto, misma forma redonda. */
.estado #papel, .estado #disco { padding: 4px 11px; border-radius: 999px; }

/* El engrane: presente, pero sin pedir atencion. */
.btn-engrane {
  width: 40px; height: 40px; border-radius: 999px; flex: 0 0 auto;
  background: var(--panel-2); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 19px; line-height: 1;
}
.btn-engrane:hover { background: var(--panel-3); color: var(--text); }

/* ---------- Panel de ajustes ---------- */
.ajustes {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 74px 20px 20px;
  background: rgba(20, 41, 58, .34);
}
.ajustes-caja {
  background: var(--panel); border-radius: 16px; box-shadow: var(--sombra-lg);
  padding: 20px; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 10px;
}
.ajustes-caja h3 {
  margin: 0 0 4px; font-size: 13px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); font-weight: 800;
}
.ajuste-fila {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; border-radius: var(--radius-s);
  background: var(--panel-2); cursor: pointer;
}
.ajuste-fila input { width: 20px; height: 20px; min-height: auto; flex: 0 0 auto; margin-top: 1px; }
.ajuste-fila span { display: flex; flex-direction: column; gap: 2px; }
.ajuste-fila b { font-size: 14px; }
.ajuste-fila small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* ---------- Barra del salon ----------
   Navegacion a la izquierda, referencia al centro, la accion a la derecha. */
.salon-bar .leyenda {
  margin-left: auto; margin-right: 10px;
  gap: 12px; font-size: 11.5px;
}
.leyenda span { display: inline-flex; align-items: center; white-space: nowrap; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }

/* En pantalla angosta la leyenda es lo primero que sobra: los colores se
   aprenden en un dia y el nombre de la mesa no. */
@media (max-width: 1180px) {
  .salon-bar .leyenda { display: none; }
  .marca .sucursal { display: none; }
}

/* La botonera de ajustes NO es la de un modal largo: no necesita quedarse
   pegada abajo, y con los margenes negativos del modal se veia despegada. */
.ajustes-caja .modal-acciones {
  position: static; margin: 4px 0 0; padding: 0;
  background: none; border-top: 0; border-radius: 0;
}


/* En que modo esta la terminal. Solo se ve cuando hay algo que decir: estar
   conectada es el caso normal y no necesita ocupar espacio. */
#enlace {
  font-size: 12px; font-weight: 800; white-space: nowrap;
  padding: 4px 11px; border-radius: 999px; letter-spacing: .03em;
}
/* Sola: no esta mal, pero lo que se capture aqui no lo ven las demas. */
#enlace[data-modo="solo"] {
  background: var(--panel-3); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Se perdio el servidor a media operacion: eso si es grave. */
#enlace[data-modo="caido"] {
  background: var(--danger); color: var(--sobre);
  animation: papel-late 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #enlace[data-modo="caido"] { animation: none; }
}

/* ===================== INDICADORES (KPIs) =============================
   Los colores salen de los mismos tokens que el resto del POS: el rojo de
   alerta es el mismo rojo que ya significa "algo mal" en toda la pantalla,
   para que nadie tenga que aprender un codigo nuevo. */

/* Lo que todavia se puede arreglar va arriba y se distingue del resto. */
.kpi-panel-ahora { border-left: 4px solid var(--info); }

.kpi-alertas { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

.kpi-alerta {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-s);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
}
.kpi-alerta-txt { flex: 1; min-width: 0; }
.kpi-alerta-quien {
  font-weight: 800; font-size: 12px; white-space: nowrap;
  color: var(--muted); letter-spacing: .02em;
}
/* Grave: hay que ir a verlo. Media: revisarlo al cierre. */
.kpi-alerta.kpi-alta {
  background: var(--danger-bg);
  box-shadow: inset 0 0 0 1px var(--danger);
  color: var(--danger-fg);
}
.kpi-alerta.kpi-alta .kpi-alerta-quien { color: var(--danger-fg); }
.kpi-alerta.kpi-media {
  background: var(--warn-bg);
  box-shadow: inset 0 0 0 1px var(--warn);
  color: var(--warn-fg);
}
.kpi-alerta.kpi-media .kpi-alerta-quien { color: var(--warn-fg); }

/* Los cuatro tiempos del servicio. */
.kpi-tiempos {
  display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.kpi-tiempo {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: var(--radius-s);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.kpi-tiempo b { font-size: 26px; line-height: 1.1; color: var(--text); }
.kpi-tiempo-tit {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.kpi-tiempo-pie { font-size: 11px; color: var(--muted); }
/* Pasado el umbral: mismo rojo de siempre. */
.kpi-tiempo.kpi-mal {
  background: var(--danger-bg);
  box-shadow: inset 0 0 0 1px var(--danger);
}
.kpi-tiempo.kpi-mal b,
.kpi-tiempo.kpi-mal .kpi-tiempo-tit,
.kpi-tiempo.kpi-mal .kpi-tiempo-pie { color: var(--danger-fg); }

.kpi-celda-mal { color: var(--danger-fg); font-weight: 800; }

.kpi-pastilla {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.kpi-pastilla.kpi-alta { background: var(--danger-bg); color: var(--danger-fg); }

/* La barrita del mix: se lee de un vistazo sin tener que comparar numeros. */
.kpi-barra {
  display: inline-block; vertical-align: middle;
  width: 60px; height: 7px; border-radius: 999px;
  background: var(--panel-3); overflow: hidden;
}
.kpi-barra i { display: block; height: 100%; background: var(--brand); }

@media (max-width: 720px) {
  .kpi-tiempos { grid-template-columns: 1fr; }
  .kpi-alerta { flex-direction: column; align-items: flex-start; gap: 3px; }
}

/* ===================== INGENIERIA DE MENU ==============================
   La unica pantalla con costos. El color de cada cuadrante no es decorativo:
   dice que hacer. Verde lo que se cuida, ambar donde hay dinero por recoger,
   morado lo que hay que empujar, rojo lo que sobra. */

.ing-puerta { max-width: 420px; }

/* Cuando la muestra no alcanza, el aviso manda sobre todo lo demas. */
.ing-aviso {
  border-left: 4px solid var(--warn);
  background: var(--warn-bg);
}
.ing-aviso h3 { color: var(--warn-fg); }
.ing-aviso p { color: var(--warn-fg); margin: 6px 0 0; }
.ing-aviso .hint { color: var(--warn-fg); opacity: .85; }

.ing-cuadrantes {
  display: grid; gap: 10px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.ing-caja {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px; border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--line);
  border-top: 4px solid var(--line);
}
.ing-caja b { font-size: 30px; line-height: 1; }
.ing-caja-tit {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.ing-caja-q { font-size: 12px; color: var(--text); margin-top: 2px; }
.ing-caja-deja { font-size: 12px; font-weight: 800; color: var(--muted); }
.ing-caja-hacer {
  font-size: 11px; color: var(--muted); margin-top: 6px;
  padding-top: 6px; border-top: 1px dashed var(--line);
}

.ing-caja.ing-estrella { border-top-color: var(--accent); }
.ing-caja.ing-estrella b { color: var(--accent-fg); }
.ing-caja.ing-caballo  { border-top-color: var(--warn); }
.ing-caja.ing-caballo b { color: var(--warn-fg); }
.ing-caja.ing-enigma   { border-top-color: var(--cuenta); }
.ing-caja.ing-enigma b { color: var(--cuenta-fg); }
.ing-caja.ing-perro    { border-top-color: var(--danger); }
.ing-caja.ing-perro b  { color: var(--danger-fg); }

@media (max-width: 720px) {
  .ing-cuadrantes { grid-template-columns: 1fr; }
}

/* ===================== ADMINISTRACION ==================================
   Los candados del sistema. Cada uno con su explicacion al pie: si alguien
   tiene que preguntar que hace un interruptor, el interruptor esta mal puesto. */
.adm-candados {
  display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.adm-candado {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px; border-radius: var(--radius-s);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.adm-candado-tit { font-size: 13px; font-weight: 800; color: var(--text); }
.adm-candado-ayuda { font-size: 11px; color: var(--muted); line-height: 1.35; }
.adm-candado select,
.adm-candado input { max-width: 100%; }

.adm-si { color: var(--accent-fg); font-weight: 700; font-size: 12px; }
.adm-no {
  color: var(--danger-fg); font-weight: 800; font-size: 12px;
  background: var(--danger-bg); padding: 2px 8px; border-radius: 999px;
}

@media (max-width: 720px) {
  .adm-candados { grid-template-columns: 1fr; }
}

/* ---------- Fichas de usuario, estilo cuentas de banco ----------------------
   Una ficha por persona, con TODO lo que puede hacer a la vista. Un desplegable
   de roles no dice nada: hay que acordarse de que significa "encargado". */
.adm-fichas { display: block; }
.adm-ficha {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--line);
  overflow: hidden;
}
/* Sin acceso: la ficha entera se apaga, no solo una palabra. */
.adm-ficha-off { opacity: .62; background: var(--panel-2); }

.adm-ficha-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px;
  background: var(--brand-bg);
  border-bottom: 1px solid var(--line);
}
.adm-ficha-off .adm-ficha-top { background: var(--panel-3); }
.adm-ficha-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-ficha-quien b { font-size: 16px; color: var(--text); }
.adm-pin-ok { font-size: 11px; color: var(--muted); }

/* El interruptor dice COMO ESTA. El boton de antes decia "Activo" y al tocarlo
   desactivaba: no se sabia si era el estado o la accion. */
.adm-switch {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.adm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.adm-switch-palanca {
  position: relative; width: 42px; height: 24px; flex: none;
  border-radius: 999px; background: var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .15s ease;
}
.adm-switch-palanca::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sobre);
  box-shadow: 0 1px 3px rgba(20, 41, 58, .3);
  transition: transform .15s ease;
}
.adm-switch input:checked + .adm-switch-palanca { background: var(--accent); }
.adm-switch input:checked + .adm-switch-palanca::after { transform: translateX(18px); }
.adm-switch input:focus-visible + .adm-switch-palanca {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.adm-switch-txt { font-size: 11px; font-weight: 800; color: var(--muted); }
.adm-switch input:checked ~ .adm-switch-txt { color: var(--accent-fg); }

.adm-ficha-rol {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.adm-ficha-rol label {
  font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.adm-ficha-rol select { flex: 1; }

@media (max-width: 720px) {
  .adm-fichas { grid-template-columns: 1fr; }
}

/* ---------- Pestanas de personas ------------------------------------------
   Con doce personas, una ficha abajo de otra obliga a bajar mucho para llegar
   a la de hasta abajo. Se ve una a la vez y se cambia con su nombre. */
.adm-gente {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 2px solid var(--line);
}
.adm-gente button {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--muted);
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: inherit; line-height: 1;
}
.adm-gente button:hover { border-color: var(--brand); color: var(--text); }
.adm-gente button[aria-selected="true"] {
  /* El mismo azul de las pestanas de arriba: blanco encima da 7.2:1, mientras
     que el verde de acento se queda en 3.5:1 y a 13px no se lee bien. */
  background: var(--brand); border-color: var(--brand); color: #fff;
}
/* El punto dice de un vistazo quien esta apagado y quien tiene algo a mano,
   sin tener que entrar a su pestana. */
.adm-gente-punto { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: none; }
.adm-gente button[aria-selected="true"] .adm-gente-punto { background: #fff; }
.adm-gente-off .adm-gente-punto { background: var(--line); }
.adm-gente-off { opacity: .7; }
.adm-gente-mano .adm-gente-punto { background: var(--warn-fg); }

/* ---------- Permisos palomeables, agrupados ------------------------------- */
.adm-permisos {
  padding: 6px 16px 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 6px 22px; align-items: start;
}
.adm-grupo { display: flex; flex-direction: column; gap: 1px; }
.adm-grupo-tit {
  font-size: 10px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  padding: 6px 0 3px; border-bottom: 1px solid var(--line); margin-bottom: 3px;
}
.adm-permiso {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; line-height: 1.3; padding: 6px 7px;
  border-radius: 6px; cursor: pointer;
}
.adm-permiso:hover { background: var(--panel-2); }
.adm-permiso input { width: 16px; height: 16px; flex: none; accent-color: var(--accent); cursor: pointer; }
/* min-width:0 para que el texto pueda encoger dentro del flex en vez de
   empujar; sin esto el renglon se desborda en pantallas angostas. */
.adm-permiso-txt { flex: 1; min-width: 0; color: var(--muted); }
.adm-permiso input:checked ~ .adm-permiso-txt { color: var(--text); font-weight: 600; }

/* Lo cambiado a mano se marca: Direccion tiene que ver de un vistazo a quien se
   le movio algo respecto a su puesto. */
.adm-excepcion { background: var(--warn-bg); }
.adm-excepcion:hover { background: var(--warn-bg); }
.adm-marca {
  font-size: 9px; font-weight: 800; color: var(--warn-fg);
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--sobre); padding: 1px 6px; border-radius: 999px; flex: none;
}

/* ---------- Autorizar una terminal nueva ----------------------------------
   Se ve una sola vez por computadora, antes del candado del PIN. */
.autorizar {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px; max-width: 420px; margin: 0 auto;
  box-shadow: 0 2px 8px rgba(20, 41, 58, .08);
}
.autorizar h2 { margin: 0 0 6px; font-size: 21px; color: var(--text); }
.autorizar .hint { margin: 0 0 18px; }
.autorizar .prop { margin-bottom: 14px; }
.autorizar input, .autorizar select {
  width: 100%; padding: 13px; font-size: 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-family: inherit;
}
.autorizar button { margin-top: 8px; }

/* ---------- Aviso de conexion ---------------------------------------------
   Ocupa el ancho a proposito. La version chica de antes la ignoraban en pleno
   servicio, y unas terminales estuvieron capturando sin mandar nada al
   servidor sin que nadie lo notara. */
#enlace {
  display: block; width: 100%; padding: 10px 16px; text-align: center;
  border-radius: 0; font-size: 14px; line-height: 1.45;
}
#enlace b { display: block; font-size: 15px; letter-spacing: .02em; }
#enlace span { display: block; font-weight: 400; opacity: .92; font-size: 13px; }
#enlace[data-modo="caido"] { background: var(--mal-fg); color: #fff; }
#enlace[data-modo="solo"]  { background: var(--warn-fg); color: #fff; }