/* ======================================================================
   POS · VARIABLES (tokens de color, tamaños, sombras, radios, z-index)
   ====================================================================== */
:root{
  /* Base */
  --bg:#0f1320;
  --panel:#ffffff;
  --ink:#12131a;
  --muted:#8a8fa3;
  --border:#e7e8ee;

  /* Marca */
  --primary:#6d6cff;
  --accent:#5cc9a7;
  --warning:#ffcd4c;
  --danger:#ff7a7a;

  /* Semánticos extendidos (para clases que ya usas en CSS) */
  --secondary-200:#e7e9f7;

  --success-50:#ecfdf5;
  --success-600:#10b981;

  --danger-50:#fef2f2;
  --danger-600:#ef4444;

  --warning-50:#fffbeb;
  --warning-600:#f59e0b;

  --info-50:#eff6ff;
  --info-500:#3b82f6;
  --info-600:#2563eb;

  /* Inputs (modal abrir orden) */
  --input-form:#f8fafc;
  --input-form-light:#e2e8f0;

  /* Layout */
  --pos-footer-h:60px;

  /* Bordes / radios / sombras */
  --radius-sm:.375rem;     /* 6px */
  --radius-md:.5rem;       /* 8px */
  --radius-lg:.75rem;      /* 12px */
  --shadow-tiny:0 1px 2px rgba(88,102,126,.12),0 4px 24px rgba(88,102,126,.08);
}

/* ======================================================================
   RESETEO & TIPOGRAFÍA BASE
   ====================================================================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:#f6f7fb;
  color:#111;
  font-family:Inter, system-ui, Segoe UI, Roboto, Arial !important;
}

/* ======================================================================
   BOTONES BÁSICOS (tema)
   ====================================================================== */
.primary,.secondary{
  border:0;
  border-radius:10px;
  padding:12px 14px;
  cursor:pointer;
}
.primary{ background:var(--primary); color:#fff; }
.secondary{ background:#f0f3ff; color:#2a2f6d; }

/* ======================================================================
   SHELL POS (estructura general)
   ====================================================================== */
.pos-container{ height:100%; display:flex; flex-direction:column; }
.pos-content{ flex:1; overflow:hidden; }

/* Área principal con espacio para footer fijo */
.pos-main{
  min-height:calc(100vh - var(--pos-footer-h));
  padding-bottom:var(--pos-footer-h);
  margin-inline-start:0 !important;
  display:flex; flex-direction:column;
  transition:none; /* rendimiento */
}
.pos-main-body{
  flex:1; overflow-y:auto;
  padding:.5rem .5rem var(--pos-footer-h);
  gap:6px;
}
@media (min-width:1400px){ .pos-main-body{ padding:.5rem; } }

/* ======================================================================
   LAYOUT (grid productos / orden)
   ====================================================================== */
.layout{
  display:grid; gap:8px; padding:8px;
  grid-template-columns:1fr;
  grid-template-areas: "order" "products";
}
.order-panel{ grid-area:order;   min-height:0; }
.products-wrap{ grid-area:products; min-height:0; }

/* Grid tarjetas de productos */
.grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); }

/* Breakpoints */
@media (min-width:768px){
  .layout{
    grid-template-columns:1fr 350px;
    grid-template-areas:"products order";
  }
}
@media (min-width:1200px){ .layout{ grid-template-columns:1fr 400px; } }
@media (min-width:1400px){ .layout{ grid-template-columns:1fr 450px; } }

/* ======================================================================
   FOOTER POS (fijo)
   ====================================================================== */
.pos-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; justify-content:space-between; align-items:center;
  height:60px; padding:.5rem 1rem;
  background:var(--panel);
  border-top:1px solid var(--border);
  box-shadow:0 -6px 18px rgba(17,24,39,.06);
  backdrop-filter:saturate(120%) blur(6px);
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0));
}
.pos-footer-info{ font-size:.95rem; font-weight:500; color:var(--ink); }
.pos-footer-info .sep{ margin:0 .5rem; color:#a1a1aa; }
.pos-footer-info .order-status{ font-weight:600; }
.pos-footer-actions{ display:flex; gap:.5rem; }
.pos-footer button{ min-width:140px; justify-content:center; }
@media (max-width:768px){
  .pos-footer{ padding:.5rem 1rem; }
  .pos-footer p{ font-size:.875rem; }
}

/* ======================================================================
   PANEL DE ORDEN (carrito)
   ====================================================================== */
.order{
  background:#fff;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
  display:flex; flex-direction:column; min-height:0;
}

/* Encabezado */
.order-head{ display:flex; justify-content:space-between; margin-bottom:8px; }
.order-head .lbl{ color:var(--muted); font-size:12px; }
.order-head .val{ font-weight:700; }

/* Notas cocina */
.notes{ margin:10px 0 0; }
.notes textarea{
  width:100%; height:48px; padding:8px;
  border:1px solid var(--border); border-radius: var(--radius-sm);
  font-family:monospace !important;
}
.notes #kitchenNotes::placeholder{
  color:#94a3b8; font-size:.9em !important; font-weight:300; opacity:1; font-family:monospace !important;
}
.notes #kitchenNotes:focus::placeholder{ color:#a5b4fc; transform:translateX(4px); transition:.2s; }

/* Ítems con scrollbar sutil */
.order-items{
  flex:1; min-height:270px; max-height:270px;
  border:1px dashed var(--border);
  overflow-y:auto; border-radius:var(--radius-sm);

  scrollbar-width:thin;
  scrollbar-color:rgba(71,85,105,.35) transparent;
  scrollbar-gutter:stable both-edges;
  -webkit-overflow-scrolling:touch;
}
.order-items::-webkit-scrollbar{ width:8px; }
.order-items::-webkit-scrollbar-track{ background:transparent; }
.order-items::-webkit-scrollbar-thumb{
  background-color:rgba(71,85,105,.35);
  border-radius:999px; border:2px solid transparent; background-clip:padding-box;
}
.order-items:hover::-webkit-scrollbar-thumb{ background-color:rgba(71,85,105,.55); }

/* Fila */
.order-item{
  display:flex; align-items:center; gap:10px;
  padding:6px 0; border-bottom:1px solid #f0f0f0;
}
/* Microfeedback al agregar */
.order-item.added{ animation:flash 450ms ease; }
@keyframes flash{ from{ background:rgba(109,108,255,.12);} to{ background:transparent;} }

/* Cantidad / edición */
.item-qty{
  background:var(--primary); color:#fff;
  border-radius:6px; padding:4px 8px; font-weight:700; min-width:35px; text-align:center;
}
input.qty-edit{ border:0; max-width:20px; text-align:center; padding:0 !important; }

/* Info */
.item-info{ flex:1; }
.item-name{ font-weight:500; margin-bottom:2px; }
.item-notes{ font-size:12px; color:#666; }
.item-price{ font-weight:500; color:#2d3436; }

/* Controles */
.item-controls{ display:flex; gap:5px; }
.qty-btn, #guests .qty-btn{
  width:32px; height:32px; font-size:14px;
  border:0; border-radius:4px; background:#e0e6ed;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.qty-btn:hover, #guests .qty-btn:hover{ background:var(--primary); color:#fff !important; }
.qty-btn.del:hover{ background:#dc2626; color:#fff; }

/* Number sin spinners (añade .no-spinner a tus inputs) */
.no-spinner::-webkit-outer-spin-button,.no-spinner::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.no-spinner[type="number"]{ -moz-appearance:textfield; appearance:textfield; }

/* Totales */
.totals{ border-top:1px solid var(--border); padding-top:8px; margin-top:8px; }
.totals input{ width:120px; border:1px solid var(--border); padding:6px 8px; text-align:right; }

@keyframes pulseTotal {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.15); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}

.total-pulse {
  animation: pulseTotal 0.4s ease-in-out;
}

/* ======================================================================
   GRILLA DE PRODUCTOS
   ====================================================================== */
.products{
  background:#fff;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  padding:12px; overflow:auto;
}
/* Tabs categorías */
.categories{
  display:flex; gap:12px; padding:0 8px;
  border-bottom:2px solid var(--border);
}
.cat{
  border:0; background:none; padding:8px 4px;
  font:500 15px/1 system-ui; color:var(--muted);
  cursor:pointer; position:relative; transition:color .2s ease, transform .15s ease;
}
.cat:hover{ color:var(--ink); }
.cat:focus-visible {
  outline: 2px solid var(--primary); 
  outline-offset: 2px; border-radius: 6px;
}
.cat.active{ color:var(--ink); transform:scale(1.05); }
.cat.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:4px; background:var(--warning);
  border-radius: 2px;
}
/* Badge de conteo en tabs */
.cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cat .cat-count {
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--border);
  color: var(--ink);
  font: 600 12px/20px system-ui;
  text-align: center;
}
.cat.active .cat-count {
  background: var(--warning);
  color: #111;
}
/* Card producto */
.products .card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; color:#111827;
  border:1px solid var(--border); border-radius:12px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.products .card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.products .card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-tiny); /*0 4px 12px rgba(0,0,0,.08); */
  border-color:var(--primary);
}
.products .card img{ width:100%; height:100px; object-fit:cover; }
.products .card .info{ padding:10px; }
.products .card .name{ font-size:14px; margin-bottom:4px; }
.products .card .price{ font-weight:600; }

/* ======================================================================
   BARRA DE BÚSQUEDA (productos)
   ====================================================================== */
.grid-toolbar{ display:flex; flex-direction:column; gap:1rem; margin:.25rem 0 1rem; }
.searchbox{
  position:relative; width:100%; display:flex; align-items:center;
  padding:.25rem; border:1px solid var(--secondary-200);
  border-radius:var(--radius-sm); transition:.3s cubic-bezier(.4,0,.2,1);
}
.searchbox:focus-within{
  border-color:var(--primary); background:rgba(59,130,246,.1);
  box-shadow:0 0 0 4px rgba(59,130,246,.1); transform:translateY(-1px);
}
.search-icon{ color:#8b9cc8; margin-right:.375rem; font-size:1.2rem; transition:color .2s; }
.searchbox:focus-within .search-icon{ color:var(--primary); }
.searchbox input{
  flex:1; background:transparent; border:0; outline:0; color:var(--ink);
  font-size:.95rem; line-height:1.2; padding:.25rem; font-weight:500;
}
.searchbox input::placeholder{ color:#8b9cc8; font-weight:400; }
.keyboard-shortcut{
  background:var(--secondary-200); color:var(--ink);
  padding:.25rem .5rem; border-radius:6px; font-size:.75rem; font-weight:600; margin:0 .5rem; transition:.2s;
}
.searchbox:focus-within .keyboard-shortcut{ opacity:0; transform:scale(.8); }

/* Accesibilidad utilitaria */
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; border:0 !important;
}
mark.match{ background:rgba(255,221,87,.35); color:inherit; padding:0 .08em; border-radius:3px; }

/* ======================================================================
   BOTONES SEGMENTADOS (tipo de orden)
   ====================================================================== */
.order-type{
  display:flex; align-items:center;
  padding:.35rem; border-radius:var(--radius-sm);
  background:var(--panel); border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(17,17,17,.02) inset;
  user-select:none;
}
.order-type .seg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:130px; gap:.5rem; height:36px;
  padding:.45rem .75rem; border-radius:var(--radius-sm);
  border:1px solid transparent; background:transparent;
  color:var(--muted); line-height:1; cursor:pointer; transition:.15s; outline:none;
}
.order-type .seg-btn:hover{ background:rgba(109,108,255,.08); color:var(--ink); }
.order-type .seg-btn:focus-visible{ box-shadow:0 0 0 3px rgba(109,108,255,.2); }
.order-type .seg-btn.is-active{
  background:linear-gradient(180deg, rgba(109,108,255,.18), rgba(109,108,255,.10));
  border-color:rgba(109,108,255,.45);
  color:#111;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 2px rgba(109,108,255,.06);
}
@media (max-width:480px){
  .order-type .seg-lbl{ display:none; }
  .order-type .seg-btn{ padding:.45rem; height:36px; min-width:auto; }
}
.order-mode-extras{ margin:.5rem 0 .25rem; }
.mode-fields[hidden]{ display:none !important; }

/* ======================================================================
   FAVORITOS (badge corazón)
   ====================================================================== */
.card .badge-fav{
  position:absolute; top:8px; right:8px;
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:999px;
  background:rgba(0,0,0,.35); color:#fff; opacity:.95;
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
  cursor:pointer; transition:.12s;
}
.card .badge-fav:hover{ transform:scale(1.05); background:rgba(0,0,0,.45); }
.card .badge-fav:focus-visible{ outline:2px solid #6aa7ff; outline-offset:2px; }
.card.is-fav .badge-fav,
.card .badge-fav.active{
  background:linear-gradient(180deg, rgba(255,85,140,.88), rgba(255,85,140,.72));
  box-shadow:0 0 0 1px rgba(255,255,255,.5) inset, 0 4px 16px rgba(255,85,140,.25);
}
@keyframes favPulse{ 0%{transform:scale(1);} 50%{transform:scale(1.02);} 100%{transform:scale(1);} }
.card.fav-pulse{ animation:favPulse .45s ease; }
#grid .empty-favs{ padding:16px; text-align:center; opacity:.8; font-size:.875rem; }

/* ======================================================================
   TABLAS/ZONAS · LAYOUT 3 COLUMNAS + OVERLAY
   ====================================================================== */
.tables-layout{
  display:grid; gap:8px; max-width:1600px; margin:0 auto; position:relative;
  grid-template-columns:340px 1fr 280px; align-items:start;
}
.tables-layout.is-dimmed::after{
  content:""; position:absolute; inset:0;
  background:rgba(17,24,39,.35); backdrop-filter:grayscale(100%);
  z-index:1; pointer-events:auto; transition:.3s;
}

/* Bloques base */
.card.block{
  background:#fff; border:1px dashed var(--border); border-radius:var(--radius-sm);
  padding:12px; position:relative; overflow:hidden;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03);
  transition:.3s cubic-bezier(.4,0,.2,1);
}
.card.block::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; opacity:0; transition:.3s; }

/* Headers de bloque */
.block-h{
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #f1f5f9;
}
.block-h .actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }

/* Botones menores */
.icon-btn{
  width:32px; height:32px; border-radius:8px;
  background:#f8fafc; color:#64748b; border:1px solid #e2e8f0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
}
.icon-btn:hover{ background:#3b82f6; color:#fff; border-color:#3b82f6; transform:scale(1.05); }
.link{
  background:transparent; border:0; color:#3b82f6; cursor:pointer;
  padding:6px 12px; border-radius:8px; font:.9rem/1.2 system-ui 500; transition:.2s;
}
.link:hover{ background:#eff6ff; color:#1d4ed8; }
.block-f{ margin-top:16px; padding-top:16px; border-top:1px solid #f1f5f9; display:flex; gap:12px; flex-wrap:wrap; }
.hint{ margin-top:12px; font-size:.85rem; color:#64748b; background:#f8fafc; padding:12px; border-radius:8px; border-left:4px solid #3b82f6; }

/* ZONAS */
.zones-list{ display:flex; flex-direction:column; gap:10px; }
.zone-card{
  background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius-sm);
  padding:14px; cursor:pointer; position:relative; overflow:hidden;
}
.zone-card.active{ border-color:#3b82f6; }
.zone-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.zone-name{ color:var(--ink); }
.zone-name.active{ color:#3b82f6; }
.zone-badge{
  margin-left:auto; background:#f1f5f9; color:#64748b; padding:2px 8px;
  border-radius:12px; font-size:.75rem; font-weight:500;
}
.zone-stats{ display:flex; gap:16px; justify-content:space-between; font-size:.9rem; }
.z-ok{ color:var(--success-600); } .z-busy{ color:var(--danger-600); } .z-reserved{ color:var(--warning-600); }
.progress{ height:6px; background:#f1f5f9; border-radius:999px; overflow:hidden; margin-top:8px; }
.progress>div{ height:100%; background:var(--primary); }

/* MESEROS */
.waiters-list{ display:flex; flex-direction:column; gap:12px; max-width:400px; }
.waiter{
  background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius-sm);
  padding:16px; position:relative; overflow:hidden; cursor:pointer; transition:.3s cubic-bezier(.4,0,.2,1);
}
.waiter-top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.avatar{
  width:48px; height:48px; border-radius:50%; border:3px solid #fff;
  background:#3b82f6; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1rem; box-shadow:0 4px 12px rgba(59,130,246,.25); flex-shrink:0; transition:.3s;
}
.waiter-info{ flex:1; min-width:0; }
.w-name{ display:block; font-weight:600; color:#1e293b; font-size:1rem; line-height:1.3; margin-bottom:2px; }
.w-status{ display:block; font-size:.8rem; color:#64748b; font-weight:500; }
.w-status.active{ color:#10b981; } .w-status.break{ color:#f59e0b; } .w-status.offline{ color:#ef4444; }
.waiter-stats{ text-align:right; flex-shrink:0; }
.kpi-number{ display:block; font-weight:700; color:#10b981; font-size:1rem; line-height:1.2; margin-bottom:2px; }
.kpi-label{ display:block; font-size:.75rem; color:#64748b; font-weight:500; }
.waiter-tables{ display:flex; gap:16px; justify-content:space-between; padding-top:12px; border-top:1px solid #f1f5f9; }
.table-stat{ font-size:.8rem; font-weight:600; display:flex; align-items:center; gap:4px; }
.table-stat::before{ content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.stat-available{ color:#10b981; } .stat-available::before{ background:#10b981; }
.stat-occupied{ color:#ef4444; } .stat-occupied::before{ background:#ef4444; }
.stat-reserved{ color:#f59e0b; } .stat-reserved::before{ background:#f59e0b; }
.stat-pax{ color:var(--primary); } .stat-pax::before{ background:var(--primary); }

/* PLANO DE MESAS */
.floor-canvas{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.res-table{
  min-height:120px; padding:14px; border-radius:var(--radius-sm);
  color:#64748b; background:#f8fafc; position:relative; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:.3s cubic-bezier(.4,0,.2,1); overflow:hidden;
}
.res-table::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,0));
  opacity:0; transition:opacity .3s;
}
.res-table:hover::before{ opacity:1; }
.res-table:hover{ color:var(--ink); box-shadow:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); }
.res-table .num{ display:flex; align-items:center; gap:4px; font-size:1.3rem; font-weight:700; margin-bottom:4px; }
.table-meta{
  display:flex; align-items:center; justify-content:space-between; gap:8px; line-height:1.4; font-size:.85rem;
}
.res-table .cap{
  display:flex; align-items:center; gap:4px; margin:0; opacity:.9; white-space:nowrap; font-variant-numeric:tabular-nums; font-size:.85rem;
}
.res-table .badge{
  position:absolute; top:8px; right:8px; padding:4px 8px; font-weight:600;
  font-size:.7rem; border-radius:12px; background:rgba(0,0,0,.3); color:#fff; backdrop-filter:blur(4px);
}
.res-table .mini{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 0; font-size:1rem; opacity:.95; }

/* Estados de mesa */
.t-ok{   border:1px solid var(--success-600); border-left:4px solid var(--success-600); background:var(--success-50); }
.t-busy{ border:1px solid var(--danger-600);  border-left:4px solid var(--danger-600);  background:var(--danger-50); }
.t-resv{ border:1px solid var(--warning-600); border-left:4px solid var(--warning-600); background:var(--warning-50); }
.t-clean{border:1px solid var(--info-500);    border-left:4px solid var(--info-500);    background:var(--info-50); }

.res-table.joining{ border-color:#fbbf24; animation:pulse-join 2s infinite; }
@keyframes pulse-join{
  0%,100%{ border-color:#fbbf24; box-shadow:0 0 0 0 rgba(251,191,36,.4); }
  50%{    border-color:#f59e0b; box-shadow:0 0 0 8px rgba(251,191,36,0); }
}

/* Leyenda */
.legend{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:#64748b; font-size:.85rem; }
.legend .dot{ width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px; box-shadow:0 2px 4px rgba(0,0,0,.1); }
.dot-ok{ background:var(--success-600); } .dot-busy{ background:var(--danger-600); } .dot-resv{ background:var(--warning-600); } .dot-clean{ background:var(--info-500); }

/* Toggle unir mesas */
.toggle{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.9rem; color:#64748b; }
.toggle input[type="checkbox"]{
  appearance:none; width:44px; height:24px; background:#e2e8f0; border-radius:12px; position:relative; cursor:pointer; transition:.3s;
}
.toggle input[type="checkbox"]:checked{ background:#3b82f6; }
.toggle input[type="checkbox"]::before{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff;
  transition:.3s cubic-bezier(.4,0,.2,1); box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.toggle input[type="checkbox"]:checked::before{ transform:translateX(20px); }

/* ======================================================================
   MÉTRICAS
   ====================================================================== */
.metrics-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr); margin-bottom:20px; }
.metric{
  background:linear-gradient(135deg,#fff,#f8fafc);
  border:1px solid #e2e8f0; border-radius:12px; padding:16px; text-align:center; transition:.3s;
}
.metric .k{ font-size:1.5rem; font-weight:700; color:#1e293b; margin-bottom:4px; }
.metric .l{ font-size:.8rem; color:#64748b; font-weight:500; }
.kpi{ margin-top:20px; padding:16px; background:linear-gradient(135deg,#f8fafc,#f1f5f9); border:1px solid #e2e8f0; border-radius:12px; }
.kpi-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.kpi-row span{ color:#64748b; font-weight:500; }
.kpi-row strong{ color:#1e293b; font-weight:700; }
.bar{ height:10px; background:#e2e8f0; border-radius:5px; overflow:hidden; }
.bar-fill{ height:100%; width:0%; border-radius:5px; transition:width .5s cubic-bezier(.4,0,.2,1); background:linear-gradient(90deg, var(--success-600), var(--info-500)); }
.kpi-list{ list-style:none; margin:16px 0 0; padding:0; }
.kpi-list li{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px solid #f1f5f9; }
.kpi-list li span{ color:#64748b; font-weight:500; }
.kpi-list li strong{ color:#1e293b; font-weight:700; }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1200px){
  .tables-layout{ grid-template-columns:320px 1fr; gap:16px; }
  .tl-right{ grid-column:1 / -1; }
}
@media (max-width:800px){
  .tables-layout{ grid-template-columns:1fr; gap:16px; padding:12px; }
  .floor-canvas{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:12px; }
  .legend{ flex-direction:column; align-items:flex-start; gap:8px; }
  .metrics-grid{ grid-template-columns:1fr; }
  .block-h{ flex-wrap:wrap; gap:8px; }
  .block-h .actions{ margin-left:0; width:100%; justify-content:flex-start; }
}
@media (max-width:480px){
  .tables-layout{ padding:8px; }
  .card.block{ padding:16px; border-radius:12px; }
  .floor-canvas{ grid-template-columns:repeat(auto-fill, minmax(90px,1fr)); gap:8px; padding:12px; }
}

/* ======================================================================
   SKELETON LOADER · Grilla de productos y Panel de Orden
   ====================================================================== */

/* Pieza básica con shimmer */
.skel{
  position:relative; display:block; overflow:hidden;
  background: var(--neutral-200, #e5e7eb);
  border-radius: var(--radius-sm);
}
.skel::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: skel-shimmer 1.1s infinite;
}
@keyframes skel-shimmer{ 100%{ transform:translateX(100%);} }
@media (prefers-reduced-motion: reduce){ .skel::after{ animation:none; } }

/* ---------- Grilla de productos ---------- */
.grid .skel-card{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow: 0 1px 0 rgba(17,17,17,.02) inset;
}
.grid .skel-img{ height:100px; background: var(--neutral-200, #e5e7eb); }
.grid .skel-body{ padding:10px; }
.grid .skel-line{ height:12px; border-radius:6px; }
.grid .skel-line + .skel-line{ margin-top:8px; }

/* Anchos utilitarios para líneas */
.grid .skel-w-40{ width:40%; }
.grid .skel-w-60{ width:60%; }
.grid .skel-w-80{ width:80%; }

/* ---------- Panel de orden (filas) ---------- */
.order-items .skel-row{
  display:grid; grid-template-columns:36px 1fr 72px 72px;
  align-items:center; gap:10px; padding:6px 0;
  border-bottom:1px solid #f0f0f0;
}
.order-items .skel-qty{ width:36px; height:24px; border-radius:6px; }
.order-items .skel-name{ height:12px; border-radius:6px; }
.order-items .skel-note{ height:10px; border-radius:6px; opacity:.7; }
.order-items .skel-price{ width:60px; height:14px; border-radius:6px; }
.order-items .skel-ctrls{ display:flex; gap:6px; }
.order-items .skel-ctrls .skel{ width:24px; height:24px; border-radius:4px; }

/* ======================================================================
   ANIMACIONES & EFECTOS
   ====================================================================== */
@keyframes fadeIn{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }
.card.block{ animation:fadeIn .6s cubic-bezier(.4,0,.2,1) backwards; }
.card.block:nth-child(1){ animation-delay:.1s; }
.card.block:nth-child(2){ animation-delay:.2s; }
.card.block:nth-child(3){ animation-delay:.3s; }

/* Shimmer genérico */
.loading-shimmer{
  background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%); background-size:200% 100%;
  animation:shimmer 2s infinite;
}
@keyframes shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }

/* Indicador autosave (footer) */
.autosave-indicator{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; border:1px solid rgba(255,255,255,.08); color:var(--info-500); }
.autosave-indicator .spin{
  width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#6aa7ff;
  animation:as-rot .75s linear infinite; opacity:0; transform:scale(.6); transition:.15s;
}
@keyframes as-rot{ to{ transform:rotate(360deg);} }
.autosave-indicator.is-saving .spin{ opacity:1; transform:scale(1); }
.autosave-indicator.is-saved .spin{ opacity:0; }
.autosave-indicator.is-saved #saveStateText{ color:var(--success-600); }
.autosave-indicator.is-error .spin{ opacity:0; }
.autosave-indicator.is-error #saveStateText{ color:var(--danger-600); }

/* Efecto dot estado caja (sutil) */
.soft-dot{ position:relative; display:inline-block; padding-left:.8rem; }
.soft-dot::before{
  content:""; position:absolute; inset:0; top:50%; transform:translateY(-50%);
  width:.35rem; height:.35rem; border-radius:50%; background:var(--success-600);
  animation:dotPulse 1.8s ease-out infinite; box-shadow:0 0 0 0 rgba(22,163,74,.45);
}
@keyframes dotPulse{
  0%{   transform:translateY(-50%) scale(1);   box-shadow:0 0 0 0 rgba(22,163,74,.28); }
  50%{  transform:translateY(-50%) scale(1.15); box-shadow:0 0 6px 4px rgba(22,163,74,.08); }
  100%{ transform:translateY(-50%) scale(1);   box-shadow:0 0 0 0 rgba(22,163,74,0); }
}

/* ======================================================================
   MODALES
   ====================================================================== */
/* Modal “Abrir orden” (huéspedes) */
#guests{
  background:var(--input-form); border:1px solid var(--input-form-light);
  border-radius:var(--radius-sm); padding:.5rem;
}
#guests .qty-btn{ width:32px; height:32px; font-size:16px; font-weight:800; cursor:pointer; }

/* Modal OTP (PIN meseros) */
.pin-input{
  width:56px; height:56px; border-radius:0.375rem;
  font-size:1.25rem; font-weight:700; text-align:center;
  border:1px solid var(--border); box-shadow:0 1px 0 rgba(17,17,17,.02) inset;
}
.pin-input:focus{ outline:0; border-color:rgba(109,108,255,.55); box-shadow:0 0 0 3px rgba(109,108,255,.20); }
/* Estados */
.pin-input.is-error{ border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }
/* Shake de error */
.pin-shake{ animation:pin-shake .28s ease; }
@keyframes pin-shake{
  10%,90%{ transform:translateX(-1px);}
  20%,80%{ transform:translateX( 2px);}
  30%,50%,70%{ transform:translateX(-3px);}
  40%,60%{ transform:translateX( 3px);}
}
@media (max-width:420px){ .pin-input{ width:48px; height:52px; } }

/* ======================================================================
   UTILIDADES
   ====================================================================== */
.hidden{ display:none !important; }

/* ======================================================================
   COUNTING TOOL
   ====================================================================== */

/* El body del modal sirve de "lienzo" del drawer */
.modal-body { position: relative; }

/* Contenedor base (tu row) con altura mínima para el drawer */
#closeLayout { position: relative; min-height: 50vh; }

/* Drawer (side panel) dentro del modal */
#countingPane.drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 96vw);          /* ancho flexible / móvil */
  max-height: 100%;
  background: var(--bs-body-bg, #fff);
  border-left: 1px solid rgba(0,0,0,.08);
  border-radius: 0.375rem 0 0 0.375rem;
  box-shadow: -16px 0 28px rgba(0,0,0,.15);
  transform: translateX(100%);      /* oculto por defecto */
  transition: transform 220ms ease, box-shadow 220ms ease;
  padding: 16px;
  overflow: auto;
  z-index: 2;                        /* sobre contenido de la modal */
}

/* Estado abierto */
#countingPane.drawer.is-open {
  transform: translateX(0);
}

/* Scrim (capa semitransparente sobre el contenido de la modal) */
#countingScrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 1;
}
#countingScrim.show {
  opacity: 1;
  pointer-events: auto;
}

/* Compactación del drawer */