:root{
  /* Elegant dark theme (inspired by modern food/checkout UIs) */
  --bg:#0b0c10;
  --bg-2:#0f172a;
  --card:rgba(255,255,255,.06);
  --card-2:rgba(255,255,255,.08);
  --text:#e5e7eb;
  --muted:rgba(226,232,240,.72);
  --border:rgba(255,255,255,.10);
  --shadow:0 18px 45px rgba(0,0,0,.35);
  --radius:16px;

  /* Accents */
  --accent:#ff4d2d;
  --accent-2:#ff9a1f;
  --accent-soft:rgba(255,77,45,.18);

  /* Premium gold (used in Caja, now also in Ventas) */
  --gold:#f5c542;
  --gold-soft:rgba(245,197,66,.18);
  --gold-border:rgba(245,197,66,.22);

  --danger:#ef4444;
  --warning:#f59e0b;
  --success:#22c55e;
  --info:#3b82f6;
  --primary:#111827;

  /* Sticky topbar height (used to position overlay modals below the photo strip) */
  --topbar-h:64px;
}

/* Version badge inside sidebar title */
.sb-ver{font-size:12px;font-weight:800;letter-spacing:.2px;padding:.15rem .45rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);margin-left:.35rem;opacity:.95}

/* Hero / Module header */
.hero{margin:8px 0 14px}
.hero-card{
  display:flex;gap:14px;align-items:stretch;justify-content:space-between;
  padding:14px 14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);
}
.hero-left{min-width:240px}
.hero-kicker{font-size:12px;font-weight:800;letter-spacing:.2px;display:flex;gap:8px;align-items:center}
.hero-title{font-size:20px;font-weight:900;letter-spacing:-.2px;margin-top:4px}
.hero-sub{font-size:13px;margin-top:4px;max-width:520px}
.hero-illu{flex:1;display:flex;justify-content:flex-end;align-items:center}
.hero-illu .illu{width:320px;max-width:100%;height:auto;opacity:.92}
.hero-illu .s{fill:transparent;stroke:rgba(17,24,39,.35);stroke-width:3}
.hero-illu .f{fill:rgba(17,24,39,.06);stroke:rgba(17,24,39,.18);stroke-width:2}
.hero-illu .d{fill:none;stroke:rgba(17,24,39,.28);stroke-width:3;stroke-linecap:round}
.hero-illu .o{fill:none;stroke:rgba(17,24,39,.14);stroke-width:6}

@media (max-width: 900px){
  .hero-card{flex-direction:column}
  .hero-illu{justify-content:flex-start}
  .hero-illu .illu{width:360px}
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(255,77,45,.16), transparent 55%),
    radial-gradient(900px 520px at 80% 30%, rgba(59,130,246,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:16px}

/*
  Dashboard (Inicio) necesita más ancho en pantallas grandes.
  El max-width 1100px se veía "chiquito" y dejaba mucho vacío.
  Solo ampliamos el contenedor para el blueprint 'main' (dashboard).
*/
/*
  Ajuste fino solicitado:
  - Evitar que el dashboard se vea "chiquito" (1100px)
  - Sin irse al extremo de pantallas ultrawide (tarjetas gigantes)

  Regla: dar un poco más de ancho, pero con límite moderado.
*/
/*
  Dashboard (Inicio): ancho cómodo, sin “tarjetas gigantes”.
  Mantiene un look parecido al que mostraste (centrado, con margen).
*/
/*
  Dashboard (Inicio): ancho cómodo, similar al look original.
  (Evita tarjetas gigantes en pantallas grandes.)
*/
body.main .app-content .container{max-width:1180px}
@media (min-width: 1650px){
  body.main .app-content .container{max-width:1280px}
}
.navbar{position:sticky;top:0;background:#111827;color:#fff;z-index:5}
.navbar .inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px}
.navbar a{color:#fff;text-decoration:none}
.navbar .links{display:flex;flex-wrap:wrap;gap:10px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.12)}
.badge.success{background:var(--success)}
.badge.warning{background:var(--warning)}
.badge.danger{background:var(--danger)}
.badge.info{background:var(--info)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:#fff;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.15px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03);box-shadow:0 18px 40px rgba(0,0,0,.30)}
.btn:active{transform:translateY(0);filter:brightness(.98)}
.btn.sm{padding:6px 10px;border-radius:10px;font-size:13px}
/* Evitar auto-zoom (iOS/Android) al enfocar inputs con font-size < 16px */
input.sm, textarea.sm, select.sm, .input.sm{font-size:16px}

.btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.18);box-shadow:none}
.btn.accent{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-color:rgba(255,255,255,.08)}
.btn.accent:hover{filter:brightness(1.02)}
.btn.success{background:var(--success)}

/* Warm premium accent for key actions (e.g., Enviar / Pagar) */
.btn.warm{
  /* Brighter warm gradient so it pops on dark backgrounds (like your reference) */
  background:linear-gradient(90deg,#ff6a00 0%, #ff3b00 55%, #ff1a2d 100%);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.98);
  text-shadow:0 1px 0 rgba(0,0,0,.30);
  /* Outer glow + subtle inner highlight */
  box-shadow:
    0 16px 34px rgba(255,59,0,.30),
    0 10px 22px rgba(255,106,0,.22),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -10px 18px rgba(0,0,0,.18);
  border-radius:18px;
}
.btn.warm:hover{filter:brightness(1.06)}
.btn.warm:active{transform:translateY(1px);filter:brightness(.98)}
.btn.gold{
  background:linear-gradient(180deg,var(--gold), rgba(245,197,66,.55));
  border-color:rgba(245,197,66,.45);
  color:#111827;
  text-shadow:none;
  box-shadow:
    0 18px 42px rgba(245,197,66,.18),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 18px rgba(0,0,0,.12);
}
.btn.gold:hover{filter:brightness(1.04)}
.btn.gold:active{transform:translateY(1px);filter:brightness(.98)}
.btn.xs{padding:4px 8px;border-radius:10px;font-size:12px;box-shadow:none}
.btn.danger{background:var(--danger)}
.btn.info{background:var(--info)}
.btn.dark{background:#111827}
.btn:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter: blur(10px)}
.card .body{padding:14px}
h1,h2,h3{margin:0 0 10px 0}

/* =========================
   Ventas (Salón): borde dorado + botones premium
   Se activa automáticamente porque <body> lleva class="salon".
   ========================= */
body.salon .card{
  position:relative;
  overflow:hidden;
  border-color:var(--gold-border);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.08);
}
body.salon .card::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:2px;
  background:linear-gradient(90deg, rgba(245,197,66,0), rgba(245,197,66,.70), rgba(245,197,66,0));
  opacity:.85;
  pointer-events:none;
}

/* Botones: dorado sutil (sin romper success/danger/warm) */
body.salon .btn.outline{
  border-color:rgba(245,197,66,.38);
  background:rgba(245,197,66,.06);
}
body.salon .btn.outline:hover{background:rgba(245,197,66,.10)}
body.salon .btn.dark{
  border-color:rgba(245,197,66,.22);
}
body.salon .btn.dark:hover{filter:brightness(1.04)}

/* En el mapa general de mesas NO aplicamos el borde dorado (pedido del usuario).
   Se controla con el wrapper .salon-map-page dentro de salon/index.html */
body.salon .salon-map-page .card{
  border-color:var(--border);
  box-shadow:var(--shadow);
}
body.salon .salon-map-page .card::before{display:none}
body.salon .salon-map-page .btn.outline{
  border-color:rgba(255,255,255,.18);
  background:transparent;
}
body.salon .salon-map-page .btn.outline:hover{background:rgba(255,255,255,.06)}
body.salon .salon-map-page .btn.dark{border-color:rgba(255,255,255,.12)}
.muted{color:var(--muted)}
.grid{display:flex;flex-wrap:wrap;gap:12px}
.col-12{flex:0 0 100%}
.col-6{flex:0 0 calc(50% - 6px)}
/* md >= 768 */
@media (min-width:768px){
  .col-md-6{flex:0 0 calc(50% - 6px)}
  .col-md-4{flex:0 0 calc(33.333% - 8px)}
  .col-md-3{flex:0 0 calc(25% - 9px)}
  .col-md-2{flex:0 0 calc(16.666% - 10px)}
}
/* lg >= 992 */
@media (min-width:992px){
  .col-lg-6{flex:0 0 calc(50% - 6px)}
  .col-lg-4{flex:0 0 calc(33.333% - 8px)}
  .col-lg-3{flex:0 0 calc(25% - 9px)}
}

/* ----- Cocina/Bar (Cola): layout pro -----
   - Móvil vertical: 2 por fila (usa col-6)
   - Móvil horizontal: 3 por fila (aunque sea <768px)
   - Escritorio: 4 por fila (usa col-lg-3) */
.prod-queue .qitem-title{font-weight:900;line-height:1.15;word-break:break-word}
.prod-queue .qitem-qty{font-weight:800;opacity:.92;margin-top:2px}

/* Filos dorados premium + estilo elegante (solo Bar/Cocina) */
.prod-queue .card{
  position:relative;
  overflow:hidden;
  border-color:var(--gold-border);
  box-shadow:
    var(--shadow),
    0 18px 50px rgba(245,197,66,.07),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.prod-queue .card::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:2px;
  background:linear-gradient(90deg,
    rgba(245,197,66,0),
    rgba(245,197,66,.70),
    rgba(245,197,66,0));
  opacity:.92;
  pointer-events:none;
}
.prod-queue .card::after{
  content:"";
  position:absolute;
  top:10px;
  bottom:10px;
  left:0;
  width:3px;
  background:linear-gradient(180deg, rgba(245,197,66,.65), rgba(245,197,66,.10));
  border-radius:999px;
  opacity:.55;
  pointer-events:none;
}

/* Tablas de detalle (modal Listos): líneas más finas y doradas */
.prod-queue .table th,
.prod-queue .table td{border-bottom:1px solid rgba(245,197,66,.16)}
.prod-queue .table thead th{color:rgba(226,232,240,.86);font-weight:900;background:rgba(245,197,66,.05)}

/* Modal de detalle (Listos): mismo borde dorado premium */
.prod-queue .modal-card{border-color:var(--gold-border)}
.prod-queue .modal-head{border-bottom-color:rgba(245,197,66,.18)}
.prod-queue .modal .btn.outline{border-color:rgba(245,197,66,.38);background:rgba(245,197,66,.06)}
.prod-queue .modal .btn.outline:hover{background:rgba(245,197,66,.10)}

/* Cocina/Bar: tipografía simétrica como Caja (evitar diferencias entre botones/inputs/selector).
   Nota: mantenemos 16px en móvil para evitar el zoom automático al enfocar inputs. */
@media (min-width: 900px){
  body.prod .prod-queue .btn,
  body.prod .prod-queue .btn.sm{font-size:14px}

  body.prod .prod-queue .input,
  body.prod .prod-queue .input.sm,
  body.prod .prod-queue select,
  body.prod .prod-queue select.sm,
  body.prod .prod-queue select.input.sm,
  body.prod .prod-queue input.input.sm{font-size:14px}
}

/* Cocina/Bar: desplegable (pm-select) sin barra de desplazamiento ni quiebres feos en palabras largas */
@media (min-width: 900px){
  body.prod .pm-select-menu{
    font-size:14px;
    padding:6px;
    overflow-x:hidden;
    min-width:220px;
    max-width:min(320px, calc(100vw - 24px));
  }
  body.prod .pm-option{
    padding:8px 10px;
    border-radius:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

body.prod .pm-select-menu::-webkit-scrollbar{height:0;width:0}

/* Cronómetro: sin círculo, con ícono antes del tiempo */
.prod-queue .qtime{display:inline-flex;align-items:center;gap:6px;font-weight:900;letter-spacing:.2px;background:transparent;border:0;padding:0;box-shadow:none;white-space:nowrap}
.prod-queue .qtime-ico{opacity:.85}
.prod-queue .qtime-val{font-variant-numeric:tabular-nums;min-width:54px;text-align:right}
@media (max-width: 480px){
  .prod-queue .qtime-val{min-width:46px;font-size:12px}
}
@media (max-width: 767px) and (orientation: landscape){
  .prod-queue .qcol{flex:0 0 calc(33.333% - 8px)}
}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.table.small th,.table.small td{padding:8px}
.table.striped tbody tr:nth-child(odd){background:rgba(255,255,255,.04)}
.form-row{display:flex;flex-wrap:wrap;gap:10px}
.input,select,textarea{width:100%;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06);color:#fff}
.input::placeholder,textarea::placeholder{color:rgba(226,232,240,.55)}
label{font-size:13px;color:rgba(226,232,240,.82)}
.alert{padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.06)}
.alert.success{border-color:rgba(34,197,94,.35)}
.alert.danger{border-color:rgba(239,68,68,.35)}
.alert.warning{border-color:rgba(245,158,11,.35)}
.kpi{display:flex;gap:12px;flex-wrap:wrap}
.kpi .item{flex:1;min-width:180px}
.sticky-actions{position:sticky;bottom:0;background:rgba(11,12,16,.82);backdrop-filter: blur(10px);padding:12px;border-top:1px solid var(--border)}

/* ---------- Modals (simple, reusable) ---------- */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:80;padding:16px}
.modal.open{display:flex}
.modal::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}
.modal-card{position:relative;z-index:1;width:100%;max-width:560px;max-height:86vh;overflow:auto;background:rgba(17,24,39,.78);backdrop-filter: blur(16px);border-radius:20px;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 14px 10px 14px;border-bottom:1px solid var(--border)}
.modal-title{font-weight:900}
.modal-card form{padding:14px}
.modal .icon-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.modal .icon-btn:hover{background:rgba(255,255,255,.12)}
@media (max-width: 480px){
  .modal{padding:10px}
  .modal-card{max-width:100%}
}



/* ---------- App shell (Sidebar layout) ---------- */
.app-shell{display:flex;min-height:100vh;background:transparent}
.sidebar{
  width:280px;flex:0 0 280px;
  background:linear-gradient(180deg, rgba(11,12,16,.96), rgba(15,23,42,.92));
  color:#e5eef3;
  border-right:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;height:100vh;overflow:auto;
}
.sb-brand{padding:14px 14px 10px 14px}
.sb-brand-link{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.sb-brand-link--logo{flex-direction:column;align-items:flex-start;gap:8px}
.sb-brand-logo{display:flex;flex-direction:column;gap:6px}
.sb-logo{width:210px;max-width:100%;height:auto;display:block;border-radius:14px}
.sb-ver-small{font-size:11px;opacity:.75;letter-spacing:.2px;line-height:1.1}
.sb-mark{
  width:46px;height:46px;border-radius:14px;
  display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);
  font-weight:900;letter-spacing:.5px;
}
.sb-app{font-weight:800}
.sb-sub{font-size:12px;opacity:.9;margin-top:2px}
.sb-user{padding:8px 14px 14px 14px}
.sb-user-card{
  display:flex;gap:12px;align-items:center;
  padding:12px;border-radius:16px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.10);
}
.sb-avatar{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);
  font-weight:900;
}
.sb-username{font-weight:800;line-height:1.1}
.sb-role{font-size:12px}

.sb-nav{padding:0 10px 10px 10px;display:flex;flex-direction:column;gap:6px}
.sb-item{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:14px;
  text-decoration:none;color:inherit;
  border:1px solid transparent;
}
.sb-item:hover{background:rgba(255,255,255,.08)}
.sb-item.active{
  background:linear-gradient(90deg, rgba(255,77,45,.22), rgba(255,154,31,.10));
  border-color:rgba(255,255,255,.18);
}
.sb-ico{width:22px;display:inline-flex;justify-content:center;opacity:.95}

.sb-footer{margin-top:auto;padding:10px 10px 14px 10px}
.sb-item.logout{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.18)}
.sb-item.logout:hover{background:rgba(239,68,68,.22)}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 16px;
  background-image:url("header_bg.png");
    /* "Cinta" (marquee): se va desplazando para que se vean todas las imágenes.
       No tocamos altura, solo se mueve en X. */
    --tb-y:center;
    background-size:auto 100%;
    background-position:0 var(--tb-y);
    background-repeat:repeat-x;
    animation:topbarMarquee 22s linear infinite;
  background-color:#0b0c10;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Marquee keyframes (global): también aplica en escritorio */
@keyframes topbarMarquee{
  from{background-position:0 var(--tb-y, center)}
  to{background-position:-1920px var(--tb-y, center)}
}

/* Desktop only: slightly taller header so the background photo isn't cut as much */
@media (min-width: 901px){
  :root{ --topbar-h:92px; }
  .topbar{
    /* small increase (less than the previous attempt) */
    min-height:92px;
    padding-top:12px;
    padding-bottom:22px;
    /* a tiny nudge downward to show a bit more of the lower part of the image */
    --tb-y:45%;
  }

  /* Desktop: el botón ☰ no es necesario (evita las "líneas" sobre la foto) */
  .topbar .icon-btn{display:none}
}
.icon-btn{
  width:42px;height:42px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;font-size:20px;cursor:pointer;
  transition:filter 120ms ease, transform 120ms ease, background 120ms ease;
}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.topbar-title{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 2px 6px rgba(0,0,0,.85);
  /* Pedido: ocultar títulos en la franja superior (Ventas/Caja/Mesa/etc.). */
  display:none !important;
}
.topbar-right{display:flex;align-items:center;gap:10px}

.app-content{flex:1;padding:10px 0}

/* Responsive: sidebar off-canvas */
@media (max-width: 900px){
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:50;
    transform:translateX(-102%);
    transition:transform .18s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  body.sb-open .sidebar{transform:translateX(0)}
  body.sb-open::before{
    content:"";position:fixed;inset:0;z-index:40;
    background:rgba(0,0,0,.35);
  }
  /* En móvil dejamos el título visible (se recorta con ellipsis si es largo) */

  /* Celular/Tablet: la foto NO debe tapar el área del menú.
     Mantén la altura igual: solo "encoge" la imagen por los lados. */
  .topbar{
    /* Quitamos el background aquí para controlarlo con el pseudo-elemento */
    background-image:none;
    position:sticky; /* ya lo es, pero lo dejamos explícito */
    overflow:hidden;
  }
  .topbar::before{
    content:"";
    position:absolute;
    top:0;bottom:0;
    /* deja libre el lado izquierdo (botón ☰) y un poquito a la derecha */
    left:72px;
    right:12px;
    background-image:url("header_bg.png");
    /* "Cinta" (marquee): se va desplazando para que se vean todas las imágenes.
       No tocamos altura, solo se mueve en X. */
    background-size:auto 100%;
    background-position:0 var(--tb-y);
    background-repeat:repeat-x;
    animation:topbarMarquee 22s linear infinite;
    pointer-events:none;
    z-index:0;
  }
  .topbar > *{position:relative;z-index:1}
}

/* Keep legacy navbar styles available, but not used in sidebar layout */


/* ---------- Dashboard (Inicio) ---------- */
.dash-canvas{min-height:420px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.07);}

.dash{display:flex;flex-direction:column;gap:14px}
.dash-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.dash-title{font-size:22px;letter-spacing:-.2px;margin:0}
.dash-sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dash-cta{display:flex;gap:8px;flex-wrap:wrap}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (min-width: 768px){
  .kpi-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (min-width: 1100px){
  .kpi-grid{grid-template-columns:repeat(5, minmax(0,1fr))}
}

.kpi{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:12px;
  display:flex;gap:12px;align-items:center;
}
.kpi-ico{
  width:42px;height:42px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:#f3f4f6;
  font-size:18px;
}
.kpi-label{font-size:12px;color:var(--muted)}
.kpi-value{font-size:18px;font-weight:900;line-height:1.15}

.dash-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 1000px){
  .dash-grid{grid-template-columns:1fr 1fr}
}

.dash-card .card-h{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:14px 14px 0 14px;
}
.card-title{font-weight:900}
.link{color:#2563eb;text-decoration:none;font-weight:700;font-size:13px}
.link:hover{text-decoration:underline}

.quick-grid{display:grid;grid-template-columns:1fr;gap:8px;padding:14px}
@media (min-width: 700px){
  .quick-grid{grid-template-columns:1fr 1fr}
}
.quick{
  text-decoration:none;
  display:flex;gap:12px;align-items:center;
  padding:12px;border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  transition:transform .08s ease, box-shadow .08s ease;
}
.quick:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.quick-ico{
  width:44px;height:44px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:#f3f4f6;
  font-size:18px;
}
.quick-title{font-weight:900}

.mini-table{padding:12px 14px 14px 14px}
.mini-row{display:grid;grid-template-columns:1.1fr .8fr .6fr .7fr .9fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);align-items:center}
.mini-row:last-child{border-bottom:0}
.mini-head{font-size:12px;color:var(--muted);font-weight:800}

.list{padding:10px 14px 14px 14px;display:flex;flex-direction:column;gap:10px}
.list-item{padding:10px;border-radius:16px;border:1px solid var(--border);background:#fff}
.li-title{font-weight:900}

.empty{padding:14px;color:var(--muted)}


/* ===== Dashboard/Pages polish (v7) ===== */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:6px 0 16px}
.kicker{font-weight:800;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;font-size:12px}
.h1{margin:2px 0 6px;font-size:22px;line-height:1.2}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:10px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;min-height:170px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.tile:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.08);border-color:rgba(31,107,255,.25)}
.tile:active{transform:translateY(0px)}
.tile-ic{width:44px;height:44px;border-radius:14px;background:rgba(31,107,255,.10);display:flex;align-items:center;justify-content:center}
.tile-ic svg{width:26px;height:26px}
.tile-title{font-weight:900;font-size:16px;margin-top:2px}
.tile-sub{color:var(--muted);font-size:13px;line-height:1.35;margin-top:-4px}


/* Dashboard refinado (solo Inicio) */
.dash-header{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.dash-title-wrap{display:flex;flex-direction:column;gap:6px}
.dash-badges{display:flex;gap:8px;flex-wrap:wrap}
/* Badges de dashboard (no afectan a los badges globales del sistema) */
.dash-badges .badge{font-weight:900}
.dash .badge-outline{
  background:rgba(255,255,255,.06) !important;
  color:var(--text) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.dash .badge-soft{
  background:rgba(255,255,255,.05) !important;
  color:var(--text) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}

/* Lista de cajas habilitadas (texto, sin apariencia de botón) */
.dash-cash-access{margin-top:6px;font-size:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dash-cash-list{display:inline-flex;flex-wrap:wrap;gap:0;align-items:center}
.dash-cash-item{color:var(--text);opacity:.92}
.dash-cash-item.main{font-weight:900;opacity:1}

.dash-grid-2{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width: 980px){
  .dash-grid-2{grid-template-columns:1.5fr 1fr}
}

.state-list{display:flex;flex-direction:column;gap:8px;padding:12px 14px 6px 14px}
.state-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}
.state-label{font-weight:900}
.state-value{font-weight:900;font-size:16px}
.hint{
  margin:0 14px 14px 14px;
  padding:10px 12px;
  border-radius:14px;
  background:#f9fafb;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
}



/* ---------- Mesa (Mozo): Workbench Pedido / Pago ---------- */
.wb-head{display:flex;gap:12px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.wb-h1{font-size:18px;font-weight:900;letter-spacing:-.2px}
.wb-meta{font-size:13px}

.wb-tabs{
  display:flex;gap:8px;
  background:rgba(17,24,39,.04);
  border:1px solid var(--border);
  border-radius:16px;
  padding:6px;
  margin:8px 0 12px;
}
.wb-tab{
  flex:1;
  border:1px solid transparent;
  background:transparent;
  color:#111827;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}
.wb-tab.active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}

.wb-grid{display:grid;grid-template-columns:1fr;gap:12px}
.wb-panel{display:none}
.wb-panel.active{display:block}

@media (min-width: 992px){
  .wb-tabs{display:none}
  .wb-grid{grid-template-columns:1.35fr .85fr}
  .wb-panel{display:block !important}
}

.wb-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.wb-panel-title{font-size:15px;font-weight:900;letter-spacing:-.2px}
.wb-total{min-width:140px;text-align:right}
.wb-total-amt{font-weight:900;font-size:18px;letter-spacing:-.2px}

.wb-actions{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  margin:10px 0 12px;
}
@media (max-width: 420px){
  .wb-actions{grid-template-columns:repeat(2, minmax(0,1fr))}
}

.qbtn{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
  padding:10px;
  font-weight:800;
}
.qbtn:disabled{opacity:.55;cursor:not-allowed}
.qbtn-ico{font-size:22px;line-height:1}
.qbtn-txt{font-size:12px;color:#111827}
.qbtn.warn{border-color:rgba(245,158,11,.35)}
.qbtn.ok{border-color:rgba(34,197,94,.35)}
.qbtn:hover{transform:translateY(-1px)}
.qbtn:active{transform:translateY(0)}

.wb-kpis{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px;margin:12px 0}
@media (max-width: 520px){
  .wb-kpis{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
.wb-kpi{
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  background:#fff;
  box-shadow:var(--shadow);
}
.wb-kpi-val{font-weight:900;font-size:16px;margin-top:2px}

.wb-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px}

/* Pago panel */
.pay-kpis{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;margin:10px 0 12px}
.pay-kpi{border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow);padding:10px 12px}
.pay-kpi-val{font-weight:900;font-size:18px;letter-spacing:-.2px;margin-top:2px}

.pay-methods{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pay-method{
  border:1px solid var(--border);
  background:#fff;
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}
.pay-method.active{
  border-color:#111827;
  background:#111827;
  color:#fff;
}

.pay-row{display:grid;grid-template-columns:1fr;gap:8px;align-items:end}
@media (min-width: 520px){
  .pay-row{grid-template-columns:1fr 160px}
}
.pay-amount-input{font-size:20px;font-weight:900}
.pay-quick{margin-top:8px;display:flex;gap:8px}

.pay-btn{
  width:100%;
  height:100%;
  min-height:64px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(90deg, rgba(255,77,45,.85), rgba(255,154,31,.75));
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.pay-btn:hover{filter:brightness(1.03)}
.pay-btn:active{transform:translateY(1px)}


/* Products (Carta) – desktop polish */
.products-page h1{letter-spacing:.2px;color:#fff}
.products-page .muted{color:rgba(226,232,240,.72)}

/* Header layout: keep actions (Buscar / +Nuevo / Volver) on one line in desktop */
.products-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:10px}
.products-left{min-width:0}
.products-title{margin:0;font-size:18px}
.products-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.products-actions #p-search{width:260px;max-width:260px}
.products-actions .btn-back{display:inline-flex}

@media (max-width: 900px){
  .products-head{grid-template-columns:1fr}
  .products-actions{justify-content:stretch;flex-wrap:wrap}
  .products-actions #p-search{width:100%;max-width:100%;flex:1 1 100%}
  /* En móvil ocultamos “Volver” (el menú lateral ya cubre navegación) */
  .products-actions .btn-back{display:none}
}
/* Keep CTAs “premium” (gold), not feria-green */
.products-page .btn.success{
  background:rgba(245,197,66,.10);
  border:1px solid rgba(245,197,66,.32);
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.products-page .btn.success:hover{background:rgba(245,197,66,.14)}
.products-page .input#p-search{background:rgba(255,255,255,.06); border-color:rgba(245,197,66,.18); color:#fff}
.products-page .input#p-search:focus{box-shadow:0 0 0 3px rgba(245,197,66,.14); border-color:rgba(245,197,66,.40)}
.products-page .card{border:1px solid var(--gold-border)}
.products-page table thead th{background:rgba(245,197,66,.10)}
.products-page table tbody tr{cursor:pointer}
.products-page table tbody tr:hover{background:rgba(245,197,66,.06)}

.products-modal .modal-card{border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 60px rgba(0,0,0,.55)}
.products-modal-card{border-top:4px solid var(--gold)}
.products-modal .modal-head{
  background:linear-gradient(90deg, rgba(245,197,66,.16), rgba(255,255,255,.06), rgba(245,197,66,.10));
}
.products-modal .modal-title{font-size:15px}
.products-modal .modal-title::before{
  content:"";
  display:inline-block;
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(180deg,var(--gold), rgba(245,197,66,.55));
  margin-right:8px;
  vertical-align:middle;
}

/* Botón "Receta" en verde cuando Auto precio está encendido */
.products-page #pe-recipe-btn.auto-on{
  background:rgba(34,197,94,.18);
  border:1px solid rgba(34,197,94,.55);
  color:#fff;
}
.products-page #pe-recipe-btn.auto-on:hover{
  background:rgba(34,197,94,.24);
}
.products-modal .modal-card form{padding:14px 16px 16px 16px}
.products-modal label{font-size:12px;color:rgba(226,232,240,.82)}
.products-modal .input, .products-modal select{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}

/* ------------------------------------------------------------
   Delivery: modal de configuración (tapers + zonas) compacto y alineado
   ------------------------------------------------------------ */
body.delivery #m-dlv-settings{padding:26px 18px}

/* Card premium (dorado + líneas sutiles) */
body.delivery #m-dlv-settings .modal-card{
  width:fit-content;
  min-width:460px;
  max-width:min(92vw,560px);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(245,197,66,.26);
  border-top:4px solid rgba(245,197,66,.80);
  background:linear-gradient(180deg, rgba(10,14,22,.96), rgba(8,12,18,.92));
  box-shadow:0 30px 80px rgba(0,0,0,.62);
}
body.delivery #m-dlv-settings .modal-head{
  padding:14px 16px;
  background:linear-gradient(90deg, rgba(245,197,66,.18), rgba(255,255,255,.05), rgba(245,197,66,.10));
  border-bottom:1px solid rgba(245,197,66,.18);
}
body.delivery #m-dlv-settings .modal-title{font-size:15px;font-weight:700;letter-spacing:.2px}
body.delivery #m-dlv-settings .modal-title::before{
  content:"";
  display:inline-block;
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(180deg, rgba(245,197,66,.95), rgba(245,197,66,.55));
  box-shadow:0 0 0 2px rgba(245,197,66,.14);
  margin-right:8px;
  vertical-align:middle;
}
body.delivery #m-dlv-settings .icon-btn{
  width:38px;height:38px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
body.delivery #m-dlv-settings .icon-btn:hover{background:rgba(245,197,66,.08);border-color:rgba(245,197,66,.22)}

body.delivery #m-dlv-settings .modal-body{padding:14px 16px 10px 16px}
body.delivery #m-dlv-settings label{font-size:12px;color:rgba(226,232,240,.82)}

/* Inputs del modal: misma paleta que el sistema */
body.delivery #m-dlv-settings .input{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}
body.delivery #m-dlv-settings .input:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(245,197,66,.18);
  border-color:rgba(245,197,66,.55);
}

/* Modal "Nuevo delivery": selects (Tipo/Zona) en paleta oscura (evita desplegable blanco) */
body.delivery #m-dlv-create select.input{
  color-scheme: dark;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}
body.delivery #m-dlv-create select.input option{
  background:#111827; /* slate-900 */
  color:#fff;
}

/* Layout interno: compacto pero respirado */
body.delivery #m-dlv-settings .grid{display:flex;flex-direction:column;gap:14px}
body.delivery #m-dlv-settings .grid > div{width:100%}
body.delivery #m-dlv-settings #dlvCfgTaperUnit{width:12ch;min-width:12ch}

/* Bloque Zonas: caja con líneas sutiles y grilla alineada */
body.delivery .dlvCfgZones{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
  /* Center the whole zones block inside the modal and give it more air */
  margin-left:auto;
  margin-right:auto;
  padding:20px 22px;
  border-radius:14px;
  border:1px solid rgba(245,197,66,.16);
  background:rgba(255,255,255,.03);
  width:fit-content;
  max-width:100%;
}
body.delivery .dlvCfgZonesHead,
body.delivery .dlvCfgZoneRow{
  display:grid;
  /*
    Keep header perfectly aligned with rows even when zone-name inputs are wider
    than the word "Zona". JS sets --dlvZoneNameW to the max rendered width of
    the zone-name inputs.
  */
  grid-template-columns:var(--dlvZoneNameW, 160px) 96px 34px;
  gap:12px;
  align-items:center;
}
body.delivery .dlvCfgZonesHead{
  padding:0 4px 8px 4px;
  color:rgba(226,232,240,.62);
  font-size:11px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Header labels should align consistently with the columns below */
body.delivery .dlvCfgZonesHead > div{
  text-align:center;
  justify-self:center;
}
/* Filas sin "cajitas" individuales: solo separadores sutiles dentro del contenedor general */
body.delivery .dlvCfgZonesRows{
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:stretch;
  width:100%;
}

body.delivery .dlvCfgZoneRow{
  padding:10px 4px;
  border:none;
  background:transparent;
  border-radius:0;
  width:100%;
}
body.delivery .dlvCfgZonesRows .dlvCfgZoneRow:not(:last-child){
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Ensure zone names never look clipped inside small auto-sized inputs */
body.delivery .dlvCfgZoneRow .dlvCfgZoneName{padding:8px 12px; min-width:10ch}
body.delivery .dlvCfgZoneRow:hover{background:rgba(245,197,66,.06)}

body.delivery .dlvCfgZoneRow .dlvCfgZoneFee{text-align:center}

/* Make the fee input fill its grid column for perfect alignment */
body.delivery .dlvCfgZoneRow .dlvCfgZoneFee{width:100%}

body.delivery .dlvCfgZoneDel{
  width:34px;min-width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:rgba(255,77,79,.08);
  border:1px solid rgba(255,77,79,.22);
  color:rgba(255,190,190,.92);
}
body.delivery .dlvCfgZoneDel:hover{background:rgba(255,77,79,.14);border-color:rgba(255,77,79,.35)}

/* Botones del modal */
body.delivery #m-dlv-settings .modal-foot{padding:10px 16px 16px 16px;border-top:1px solid rgba(255,255,255,.08)}

/* Guardar debe ser verde (consistente con el sistema). */
body.delivery #m-dlv-settings #dlvCfgSave{
  background:var(--success);
  border:1px solid rgba(0,0,0,.18);
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
body.delivery #m-dlv-settings #dlvCfgSave:hover{filter:brightness(1.06)}
body.delivery #m-dlv-settings .btn.outline{
  border-color:rgba(245,197,66,.28);
  background:rgba(245,197,66,.06);
}
body.delivery #m-dlv-settings .btn.outline:hover{background:rgba(245,197,66,.10)}

@media (max-width:560px){
  body.delivery #m-dlv-settings{padding:22px 12px}
  body.delivery #m-dlv-settings .modal-card{min-width:0;width:min(92vw,520px)}
  body.delivery .dlvCfgZonesHead{display:none}
  body.delivery .dlvCfgZoneRow{grid-template-columns:1fr 86px 34px}
  body.delivery .dlvCfgZoneRow{width:100%}
  body.delivery .dlvCfgZoneRow .dlvCfgZoneName{width:100% !important;max-width:none !important}
}
.products-modal .input:focus, .products-modal select:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(245,197,66,.18);
  border-color:rgba(245,197,66,.55);
}
.products-modal .btn{border-radius:12px}
.products-modal .btn.ghost{background:rgba(255,255,255,.06)}


/* Users – premium palette + wider desktop */
.users-page{max-width:none;margin:0;padding:0}
.users-page .page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px;max-width:none;margin-left:auto;margin-right:auto}
.users-page .page-title{font-size:18px;letter-spacing:.2px;color:rgba(241,245,249,.96)}
.users-page .users-list{max-width:none;margin-left:auto;margin-right:auto}

/* CTA: premium gold, not green */
.users-page .btn.success{
  background:rgba(245,197,66,.10);
  border:1px solid rgba(245,197,66,.32);
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.users-page .btn.success:hover{background:rgba(245,197,66,.14)}

/* Outline buttons in Users: keep the same premium language */
.users-page .btn.outline{
  border-color:rgba(245,197,66,.28);
  background:rgba(245,197,66,.06);
}
.users-page .btn.outline:hover{background:rgba(245,197,66,.10)}

.users-page .card{border:1px solid var(--gold-border)}
.users-page .users-table thead th{background:rgba(245,197,66,.10)}
.users-page .users-table tbody tr{cursor:pointer}
.users-page .users-table tbody tr:hover{background:rgba(245,197,66,.06)}

.user-cell{display:flex;align-items:center;gap:10px}
.users-page .avatar{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;
  background:linear-gradient(180deg, rgba(245,197,66,.22), rgba(255,255,255,.06));
  border:1px solid var(--gold-border);
  color:#0b1220;
}
.user-name{font-weight:900;line-height:1.1}
.user-sub{font-size:12px}

.users-create-check{display:flex;align-items:center;gap:8px}

/* Badges: premium */
.users-page .badge.success{
  background:rgba(245,197,66,.14);
  border:1px solid rgba(245,197,66,.32);
  color:rgba(241,245,249,.98);
}
.users-page .badge.badge-soft{
  background:rgba(245,197,66,.06);
  border:1px solid rgba(245,197,66,.22);
  color:rgba(241,245,249,.90);
}

/* Users table labels (no pill / no "button" look) */
.users-page .u-label{
  display:inline;
  padding:0;
  border:0;
  background:transparent;
  border-radius:0;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(241,245,249,.92);
}
.users-page .u-label.dim{font-weight:800;color:rgba(241,245,249,.86)}
.users-page .u-label.yes{color:rgba(245,197,66,.96)}
.users-page .u-label.no{color:rgba(241,245,249,.86)}
.users-page .role-label{text-transform:none}

/* Role badge: unify colors (no feria) */
.users-page .role-badge{font-weight:900;border-color:var(--gold-border)!important;background:rgba(245,197,66,.10)!important;color:rgba(241,245,249,.95)!important}

/* Users table: column sizing */
.users-table th:last-child, .users-table td:last-child{width:120px;white-space:nowrap}
.users-table th:nth-child(1){width:260px}
.users-table th:nth-child(2){width:120px}
.users-table th:nth-child(3){width:90px}
.users-table th:nth-child(4){width:110px}
.users-table th:nth-child(5){width:190px}


/* Product badges – premium palette (gold + dark glass) */
.cat-badge,.dest-badge{
  font-weight:900;
  border-color:var(--gold-border) !important;
  background:rgba(245,197,66,.10) !important;
  color:rgba(241,245,249,.96) !important;
}
/* “GENERAL” stays neutral but still premium */
.cat-badge[data-cat="GENERAL"],
.dest-badge[data-dest="GENERAL"]{
  border-color:rgba(148,163,184,.22) !important;
  background:rgba(148,163,184,.10) !important;
  color:rgba(241,245,249,.92) !important;
}

/* Users table: reduce “empty right side” on wide screens */
.users-table th:last-child, .users-table td:last-child{width:120px;white-space:nowrap}
.users-table th:nth-child(1){width:260px}
.users-table th:nth-child(2){width:120px}
.users-table th:nth-child(3){width:90px}
.users-table th:nth-child(4){width:110px}
.users-table th:nth-child(5){width:190px}

.user-actions{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;align-items:start}
.user-actions form{margin:0}
.user-actions .btn{width:100%;justify-content:center}
.user-actions .input{width:100%;padding:8px 10px;border-radius:12px}
.user-actions .user-role{display:grid;grid-template-columns:1fr 76px;gap:8px}
.user-actions .user-pass{display:grid;grid-template-columns:1fr 76px;gap:8px}
@media (max-width: 900px){
  .user-actions{grid-template-columns:1fr}
}




/* ===== Reports ===== */
.reports-page .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:8px 0 14px;}
.reports-page .page-title{margin:0;font-size:22px;letter-spacing:-.02em;}
.reports-page .filters{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}
.reports-page .filters .f{display:flex;flex-direction:column;gap:6px;}
.reports-page .filters label{font-size:12px;color:#6b7280;}
.reports-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.rep-card{border:1px solid rgba(15,23,42,.08);}
.rep-card .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px;}
.rep-card .card-title{font-weight:800;font-size:14px;margin:0;}
.rep-card .table-wrap{border-radius:12px;border:1px solid rgba(15,23,42,.08);overflow:hidden;background:#fff;}
.rep-card .table.small thead th{background:rgba(2,6,23,.04);}
.rep-card.rep-span{grid-column:1 / -1;}
.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media (max-width: 1100px){
  .reports-grid{grid-template-columns:1fr;}
  .ops-grid{grid-template-columns:1fr;}
}
/* Palette accents like Users */
.rep-blue{background:rgba(59,130,246,.06);}
.rep-violet{background:rgba(99,102,241,.06);}
.rep-amber{background:rgba(245,158,11,.06);}
.rep-green{background:rgba(16,185,129,.06);}
.rep-red{background:rgba(239,68,68,.06);}


/* --- Reports: unified single view + same palette as users --- */
.reports-page{max-width:none;margin:0;padding:0}
.reports-page .page-head{gap:14px}
.reports-page .reports-filters{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.reports-page .reports-filters .f label{display:block;font-size:12px;color:rgba(226,232,240,.72);margin:0 0 6px}
.reports-page .reports-filters .f{min-width:150px}
.reports-page .reports-filters .f-rep{min-width:240px;flex:1 1 260px}

/* Reports: premium dropdown (no typing) */
.reports-page .reports-filters .select-wrap{position:relative;width:100%}
.reports-page .reports-filters .select-wrap select{width:100%;padding-right:42px;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}
.reports-page .reports-filters .select-wrap:after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:16px;color:var(--gold);opacity:.95;text-shadow:0 0 10px rgba(245,197,66,.18)}

/* Reports select: force premium dark palette on desktop (Chrome/Edge honors option colors) */
.reports-page .reports-filters .rep-select{color-scheme:dark;background:rgba(255,255,255,.06);border:1px solid rgba(245,197,66,.28);color:rgba(241,245,249,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.reports-page .reports-filters .rep-select:focus{outline:none;border-color:rgba(245,197,66,.55);box-shadow:0 0 0 3px rgba(245,197,66,.12), inset 0 1px 0 rgba(255,255,255,.06)}
.reports-page .reports-filters .rep-select option{background:#0b1220 !important;color:rgba(241,245,249,.95) !important}

/* Reports select: force dark + premium colors (desktop dropdown was showing white) */
.reports-page .reports-filters .rep-select{color-scheme:dark;background:rgba(2,6,23,.35);border:1px solid var(--gold-border);color:rgba(241,245,249,.96)}
.reports-page .reports-filters .rep-select:focus{outline:none;border-color:rgba(245,197,66,.55);box-shadow:0 0 0 3px rgba(245,197,66,.12)}
.reports-page .reports-filters .rep-select option{background:#0b1220 !important;color:rgba(241,245,249,.96) !important}
.reports-page .reports-filters .rep-select option:checked{background:#0b1220 !important;color:rgba(226,232,240,.96) !important}

/* Desktop dropdown list was showing white (browser native). Force dark scheme + premium colors. */
.reports-page .reports-filters select.rep-select{color-scheme:dark;background:rgba(255,255,255,.05);border:1px solid var(--gold-border);color:rgba(241,245,249,.96)}
.reports-page .reports-filters select.rep-select:focus{outline:none;box-shadow:0 0 0 3px rgba(245,197,66,.14)}
.reports-page .reports-filters select.rep-select option{background:#0b1220 !important;color:rgba(241,245,249,.96) !important}

/* Date inputs: colored calendar icon (desktop + mobile)
   Use the .date-wrap wrapper anywhere you want a visible calendar icon on dark UI. */
.date-wrap{position:relative}
/* Icono propio (por encima del input) para que se vea en tema oscuro */
.date-wrap .cal-ico{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:1;pointer-events:auto;z-index:3;cursor:pointer}
.date-wrap .date-input{padding-right:42px;position:relative;z-index:1}
/* Hide native icon so it doesn't overlap our colored icon */
.date-wrap input[type="date"]{-webkit-appearance:none;appearance:none}
/* Oculta el icono nativo (negro) y deja el nuestro */
.date-wrap input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;display:none;background:transparent;color:transparent;width:0;height:0}
.date-wrap input[type="date"]::-moz-calendar-picker-indicator{opacity:0;display:none}
.date-wrap input[type="date"]::-ms-clear{display:none}
.date-wrap input[type="date"]::-webkit-inner-spin-button{display:none}
.date-wrap input[type="date"]::-webkit-clear-button{display:none}

/* Reportes (escritorio): filtros siempre en una sola línea */
@media (min-width: 961px){
  .reports-page .reports-filters{flex-wrap:nowrap}
  .reports-page .reports-filters .f{min-width:0}
  .reports-page .reports-filters .f-date{flex:0 0 140px}
  .reports-page .reports-filters .f-rep{min-width:180px;flex:1 1 240px}
}

/* Mobile/tablet: stack header + grid filters (portrait + landscape) */
@media (max-width: 960px){
  .reports-page .page-head{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .reports-page .page-head > div{width:100%}
  .reports-page .reports-filters{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:end}
  .reports-page .reports-filters .f{min-width:0}
  .reports-page .reports-filters .input{width:100%}
  .reports-page .reports-filters .f-rep{grid-column:1 / -1}
  .reports-page .reports-filters .btn-filter{grid-column:1 / -1;width:100%;justify-content:center}
}

/* Phone portrait: keep Desde/Hasta side-by-side like landscape, but tighten spacing */
@media (max-width: 600px){
  .reports-page .reports-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .reports-page .reports-filters .f label{margin:0 0 4px}
  .reports-page .date-wrap .cal-ico{right:10px}
  .reports-page .date-wrap .date-input{padding-right:38px}
}
.reports-page .rep-single{margin-top:14px}
.reports-page .rep-single .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(245,197,66,.18);background:linear-gradient(90deg, rgba(245,197,66,.14), rgba(255,255,255,.04));}
.reports-page .rep-single .card-title{font-size:16px;font-weight:900;letter-spacing:.2px}
.reports-page .rep-single .card-actions{display:flex;gap:8px;align-items:center}
.reports-page .rep-single .table-wrap{padding:12px 16px}
.reports-page .rep-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width: 960px){.reports-page .rep-split{grid-template-columns:1fr}}
.reports-page .table.small th{background:rgba(245,197,66,.06)}



/* Inventario */
.inv-page .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:8px 0 14px;flex-wrap:wrap;max-width:none;margin-left:0;margin-right:0}
.inv-page .page-title{margin:0;font-size:22px;letter-spacing:-.02em;}
.inv-page .actions{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end}
.inv-search{display:flex;flex-direction:column;gap:6px;min-width:260px}
.inv-search label{font-size:12px;color:rgba(226,232,240,.72)}
.inv-page .inv-card{max-width:none;margin-left:0;margin-right:0;border:1px solid var(--gold-border)}
.inv-table thead th{background:rgba(245,197,66,.06)}
.inv-table tbody tr:hover{background:rgba(245,197,66,.05)}
/* Inventario (Stock): distribuir mejor el ancho de columnas.
   La columna 'Stock' no debe ocupar “todo lo que sobra”, porque se ve como un
   hueco grande entre 'Control stock' y 'Stock'. */
.inv-table{table-layout:fixed;width:100%}
.inv-table th:nth-child(1), .inv-table td:nth-child(1){width:150px}
.inv-table th:nth-child(3), .inv-table td:nth-child(3){width:90px}
.inv-table th:nth-child(4), .inv-table td:nth-child(4){width:150px}
.inv-table th:nth-child(5), .inv-table td:nth-child(5){width:140px}
.inv-table td:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stock-pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-weight:900;border:1px solid rgba(15,23,42,.10);min-width:86px}
.stock-pill.success{background:rgba(34,197,94,.10);color:#166534;border-color:rgba(34,197,94,.25)}
.stock-pill.warning{background:rgba(245,158,11,.10);color:#92400e;border-color:rgba(245,158,11,.25)}
.stock-pill.danger{background:rgba(239,68,68,.10);color:#991b1b;border-color:rgba(239,68,68,.25)}

/* =========================
   Inventario + Reportes: look premium (mismo lenguaje que Ventas/Caja)
   ========================= */
body.inv .card,
body.reports .card{
  position:relative;
  overflow:hidden;
  border-color:var(--gold-border);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.08);
}
body.inv .card::before,
body.reports .card::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:2px;
  background:linear-gradient(90deg, rgba(245,197,66,0), rgba(245,197,66,.70), rgba(245,197,66,0));
  opacity:.85;
  pointer-events:none;
}

/* Botones: dorado sutil (evitar look “feria”) */
body.inv .btn.outline,
body.reports .btn.outline{
  border-color:rgba(245,197,66,.38);
  background:rgba(245,197,66,.06);
}
body.inv .btn.outline:hover,
body.reports .btn.outline:hover{background:rgba(245,197,66,.10)}
body.inv .btn.dark,
body.reports .btn.dark{
  border-color:rgba(245,197,66,.22);
  background:linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.72));
}
body.inv .btn.dark:hover,
body.reports .btn.dark:hover{filter:brightness(1.04)}

/* En inventario, el “Sí” (control stock) se ve premium, no verde chillón */
body.inv .inv-table .badge{
  background:rgba(255,255,255,.06);
  border-color:rgba(245,197,66,.14);
  color:rgba(226,232,240,.92);
}
body.inv .inv-table .badge.success{
  background:rgba(245,197,66,.14);
  border-color:rgba(245,197,66,.30);
  color:rgba(255,255,255,.95);
}

/* En inventario, los “pills” de stock no deben verse como semáforo (premium) */
body.inv .stock-pill{
  background:rgba(255,255,255,.04);
  border-color:rgba(245,197,66,.20);
  color:rgba(226,232,240,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
body.inv .stock-pill.success{
  background:rgba(245,197,66,.12);
  border-color:rgba(245,197,66,.34);
  color:rgba(255,255,255,.96);
}
body.inv .stock-pill.warning{
  background:rgba(255,255,255,.03);
  border-color:rgba(245,197,66,.16);
  color:rgba(226,232,240,.86);
}
body.inv .stock-pill.danger{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.22);
  color:rgba(254,226,226,.95);
}

/* Kardex (movimientos): el desplegable nativo de <select> se veía blanco.
   Forzamos esquema oscuro + acentos dorados (como Ventas/Caja). */
/* Inventario: selects con paleta oscura (incluye el desplegable) */
body.inv select.input{color-scheme:dark;}
body.inv select.input option{background:#0b1220 !important;color:rgba(226,232,240,.96) !important;}
body.inv select.input option:checked{background:#0b1220 !important;color:rgba(226,232,240,.96) !important;}

/* Focus premium (inputs + selects en inventario) */
body.inv .inv-page .input:focus,
body.inv .inv-page select.input:focus{
  outline:none;
  border-color:rgba(245,197,66,.45);
  box-shadow:0 0 0 3px rgba(245,197,66,.12);
}

/* Config (Cajas / Usuarios): los desplegables nativos (<select>) se veían blancos.
   Forzamos esquema oscuro y acento premium dorado, especialmente en modales. */
body.config select.input{color-scheme:dark;}
body.config select.input option{background:#0b1220 !important;color:rgba(226,232,240,.96) !important;}
body.config select.input option:checked{background:#0b1220 !important;color:rgba(226,232,240,.96) !important;}

/* Producción (Cocina / Bar): el desplegable de estación nativo (<select>) se veía blanco.
   Forzamos esquema oscuro y eliminamos fondos amarillos fuertes en la opción seleccionada. */
body.prod select.input{color-scheme:dark;}
body.prod select.input option{background:#0b1220 !important;color:rgba(226,232,240,.96) !important;}
body.prod select.input option:checked{background:#0b1220 !important;color:rgba(245,197,66,.95) !important;}

/* Delivery / Clientes: mantener paleta oscura en listas desplegables */
body.delivery select.input,
body.clientes select.input{
  color-scheme: dark;
}
body.delivery select.input option,
body.clientes select.input option{
  background:#0b1220 !important;
  color:rgba(226,232,240,.96) !important;
}
body.delivery select.input option:checked,
body.clientes select.input option:checked{
  background:#0b1220 !important;
  color:rgba(245,197,66,.95) !important;
}

/* Ventas (Saln): selector de ambiente (piso) desplegable nativo se vea blanco.
   Forzamos esquema oscuro + acento dorado. */
body.salon select.input{
  color-scheme: dark;
}
body.salon select.input option{
  background:#0b1220 !important;
  color:rgba(226,232,240,.96) !important;
}
body.salon select.input option:checked{
  background:#0b1220 !important;
  color:rgba(245,197,66,.95) !important;
}

/* Caja: selector de ambiente y otros <select> nativos se vean blancos.
   Forzamos esquema oscuro + acento dorado para que calce con la paleta. */
body.caja select,
body.caja select.input{
  color-scheme: dark;
}
body.caja select option{
  background:#0b1220 !important;
  color:rgba(226,232,240,.96) !important;
}
body.caja select option:checked{
  background:#0b1220 !important;
  color:rgba(245,197,66,.95) !important;
}


/* Modales de Config: borde premium + foco dorado en campos */
body.config .modal-card{
  border:1px solid rgba(245,197,66,.24);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
/* En el modal de editar usuario hay varios formularios internos: quitamos el padding global */
body.config .modal[data-modal="m-user-edit"] .modal-card form{padding:0}
body.config .modal-head{
  border-bottom:1px solid rgba(245,197,66,.12);
}
body.config .modal-head-actions{display:flex;align-items:center;gap:10px}
body.config .modal-head-actions .yn-form{margin:0}
body.config .modal-head-actions .yn-group{transform:translateY(0)}
@media (max-width:520px){
  body.config .modal-head-actions{gap:8px}
  body.config .modal-head-actions .yn-btn{padding:6px 12px}
}

body.config .ue-divider{height:1px;background:rgba(245,197,66,.10);margin:14px 0}

/* Users modal: fila superior (Rol a la izquierda / Contraseña a la derecha) */
body.config .ue-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
body.config .ue-section-title{font-weight:900;margin-bottom:8px}
body.config .ue-inline-form{display:flex;gap:10px;align-items:center}
body.config .ue-inline-form .input{flex:1;min-width:0}
body.config .ue-inline-form .btn{flex:0 0 auto;min-width:140px}
@media (max-width:760px){
  body.config .ue-top-grid{grid-template-columns:1fr}
  body.config .ue-inline-form .btn{min-width:120px}
}

body.config .modal-foot{
  border-top:1px solid rgba(245,197,66,.10);
}
body.config .modal-card .input,
body.config .modal-card select.input{
  border-color:rgba(245,197,66,.20);
}
body.config .modal-card .input:focus,
body.config .modal-card select.input:focus{
  outline:none;
  border-color:rgba(245,197,66,.45);
  box-shadow:0 0 0 3px rgba(245,197,66,.12);
}
body.config .modal-card .card{
  border-color:rgba(245,197,66,.14);
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body.config .modal-card .icon-btn{
  border:1px solid rgba(245,197,66,.22);
}
body.config .modal-card .icon-btn:hover{filter:brightness(1.08)}

/* Config/Usuarios: switches premium (Sí/No) para Caja, Cocina y Bar */
body.config .ue-perms{
  display:flex;
  flex-direction:column;
  gap:8px;
}
body.config .ue-perms-list{
  border:1px solid rgba(245,197,66,.12);
  border-radius:16px;
  padding:10px 12px;
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body.config .ue-perm-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.config .ue-perm-name{font-weight:850;color:rgba(226,232,240,.95)}
body.config .ue-perms-actions{display:flex;justify-content:flex-end}
body.config .ue-perms-actions .btn{min-width:160px}

/* Yes/No premium buttons (used in Users modal for Caja/Cocina/Bar/Estado) */
body.config .ue-right-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
body.config .yn-form{display:flex;justify-content:flex-end}

/* Users modal: header row per segmento (Permiso + botones Sí/No en esquina superior derecha) */
body.config .seg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
body.config .seg-title{font-weight:900}
body.config .seg-perm{display:flex;align-items:center;gap:10px;padding-top:0}
body.config .seg-perm-label{font-size:12px;white-space:nowrap;line-height:1}
@media (max-width:520px){
  body.config .seg-head{flex-direction:column;align-items:flex-start}
  body.config .seg-perm{width:100%;justify-content:flex-end}
}
body.config .yn-group{
  display:inline-flex;
  border:1px solid rgba(245,197,66,.38);
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
body.config .yn-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(148,163,184,.95);
  font-weight:900;
  font-size:12px;
  padding:7px 14px;
  cursor:pointer;
  transition:filter .18s ease, background .18s ease, color .18s ease;
}

/* Users modal: when a permiso is "No" we lock the section in real time (but still submits the default value) */
body.config .seg-content.is-locked{
  opacity:.45;
  filter:saturate(.85);
  pointer-events:none;
}
body.config .yn-btn + .yn-btn{border-left:1px solid rgba(245,197,66,.22)}
body.config .yn-btn:hover{filter:brightness(1.10)}
body.config .yn-btn.is-active{
  background:rgba(245,197,66,.14);
  color:rgba(245,197,66,.95);
}

.sw-premium{position:relative;display:inline-flex;align-items:center;cursor:pointer;user-select:none}
.sw-premium input{position:absolute;opacity:0;width:0;height:0}
.sw-premium-track{
  position:relative;
  display:inline-block;
  width:88px;
  height:32px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(245,197,66,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:filter .18s ease, background .18s ease, border-color .18s ease;
}
.sw-premium-track::before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:26px;
  height:26px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  box-shadow:0 10px 24px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .18s ease, background .18s ease;
}
.sw-premium-track::after{
  content:attr(data-off);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:12px;
  color:rgba(148,163,184,.95);
  letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.sw-premium input:checked + .sw-premium-track{
  background:rgba(34,197,94,.16);
  border-color:rgba(245,197,66,.48);
}
.sw-premium input:checked + .sw-premium-track::before{
  transform:translateX(56px);
  background:rgba(34,197,94,.30);
}
.sw-premium input:checked + .sw-premium-track::after{
  content:attr(data-on);
  color:rgba(34,197,94,.95);
}
.sw-premium input:focus + .sw-premium-track{
  outline:none;
  box-shadow:0 0 0 3px rgba(245,197,66,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.sw-premium:hover .sw-premium-track{filter:brightness(1.05)}

/* Desktop: aprovechar el ancho real sin “aires” laterales extra */
@media (min-width: 901px){
  :root{ --topbar-h:92px; }
  body.inv .inv-page,
  body.reports .reports-page{width:100%}
}



/* ---------- Desktop-only symmetry tweaks (Dashboard KPIs + canvas) ---------- */
@media (min-width: 901px){
  :root{ --topbar-h:92px; }
  /* Aprovechar el ancho en escritorio (menos “aire” a los costados) */
  .container{
    max-width:1520px;
    padding-left:24px;
    padding-right:24px;
  }

  /* KPI cards: true grid layout for perfect symmetry */
  .kpi-grid{ gap:14px; }

  .kpi{
    padding:14px 16px;
    height:86px;                 /* fixed height so none “jump” */
    display:grid;
    grid-template-columns:56px 1fr;
    grid-template-rows:auto auto;
    column-gap:14px;
    align-items:center;
  }

  .kpi-ico{
    width:46px;height:46px;
    border-radius:16px;
    background:rgba(255,255,255,.88);
    color:#0b1220;
    font-size:20px;
    line-height:1;
    display:grid;
    place-items:center;
    grid-row:1 / span 2;
    justify-self:center;
    align-self:center;
    transform:none;
  }

  .kpi-body{
    display:grid;
    grid-template-rows:auto auto;
    align-content:center;
    gap:3px;
    min-width:0;
  }

  .kpi-label{
    line-height:1.1;
    /* No cortar palabras: que se muestre completo */
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    letter-spacing:.15px;
  }

  .kpi-value{
    line-height:1.05;
    white-space:nowrap;
  }

  /* Optical alignment: tiny per-icon nudges (emojis have different baselines) */
  .kpi:nth-child(1) .kpi-ico{ transform:translateY(2px); } /* 🪑 */
  .kpi:nth-child(2) .kpi-ico{ transform:translateY(1px); } /* 👥 */
  .kpi:nth-child(3) .kpi-ico{ transform:translateY(1px); } /* 🍳 */
  .kpi:nth-child(4) .kpi-ico{ transform:translateY(1px); } /* 🍸 */
  .kpi:nth-child(5) .kpi-ico{ transform:translateY(1px); } /* 💰 */
  .kpi:nth-child(6) .kpi-ico{ transform:translateY(1px); } /* 🧾 */

  /* Dashboard large canvas: avoid bright white block on dark theme */
  .dash-canvas{
    background:rgba(255,255,255,.07) !important;
    border-color:rgba(255,255,255,.14) !important;
  }
}

/* Helpers: contenido distinto por viewport
   (para cambios SOLO en escritorio sin tocar móvil/tablet) */
.mobile-only{display:inline;}
.desktop-only{display:none;}
@media (min-width: 901px){
  :root{ --topbar-h:92px; }
  .desktop-only{display:inline;}
  .mobile-only{display:none;}
}

/* KPI values sometimes are wrapped in .mobile-only/.desktop-only spans.
   Force them to inherit the same typography as the KPI value so numbers
   like "0" don't look smaller than the rest. */
.kpi-value .mobile-only,
.kpi-value .desktop-only{
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
}

/* =========================
   Mobile polish (Celular)
   Mantiene la misma paleta (oscuro + cálido + dorado) y ordena layouts.
   ========================= */
@media (max-width: 540px){
  /* Tap targets y espaciado general */
  .container{padding:12px}
  .app-content{padding:8px 0}
  .btn{padding:12px 12px;border-radius:16px}
  .btn.sm{padding:8px 10px;border-radius:14px}
  .icon-btn{width:44px;height:44px}

  /* Caja (mapa): 1 tarjeta por fila en pantallas chicas */
  body.caja .grid .col-6{flex:0 0 100%}

  /* Cabecera del mapa de mesas: apilar bonito */
  body.salon .salon-map-page > div:first-child{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  body.salon .salon-map-page > div:first-child > div{
    justify-content:stretch;
  }
  body.salon .salon-map-page .btn{width:auto}
  body.salon .salon-map-page select.input{width:100%}

  /* Mapa de mesas (2 columnas):
     En móvil, antes apilábamos el input + botón y las mesas LIBRES quedaban
     mucho más altas que las OCUPADAS. Aquí lo compactamos y dejamos ambos
     tamaños parejos.
  */

  /* Igualar alturas por fila */
  body.salon .salon-map-page .col-6{display:flex}
  body.salon .salon-map-page .col-6 > .card{flex:1}

  /* Alinear contenido interno: cuando en una fila hay LIBRE + OCUPADA,
     la libre tiene más UI (input+botón) y la ocupada quedaba "más arriba".
     Hacemos que ambos usen el mismo flujo vertical: header con altura mínima
     y acción pegada al fondo. */
  body.salon .salon-map-page .card{display:flex;flex-direction:column}
  /* Un pequeño espacio entre bloques internos para que
     Cap/Pax no quede pegado a los botones (Ver mesa / Ocupar). */
  body.salon .salon-map-page .card .body{display:flex;flex-direction:column;flex:1;gap:8px}
  body.salon .salon-map-page .card .body > div:first-child{min-height:52px}

  /* Cap/Pax un poquito más arriba (sin pegarse al título) */
  body.salon .salon-map-page .cap-pax{margin-top:0 !important}

  /* En mesas LIBRES: mostrar el estado arriba y el botón Reservar abajo,
     sin aumentar la altura de la tarjeta (evita “saltos” por fila). */
  body.salon .salon-map-page .table-state[data-state="LIBRE"]{
    display:flex !important;
    flex-direction:column-reverse;
    align-items:flex-end;
    justify-content:flex-start;
    gap:8px;
    width:94px;
    min-height:52px;
    padding:0;
  }
  body.salon .salon-map-page .table-state[data-state="LIBRE"] .state-badge{margin:0}
  body.salon .salon-map-page .table-state[data-state="LIBRE"] .btn-reserve{margin:0}

  body.salon .salon-map-page .card .body > form,
  body.salon .salon-map-page .card .body > a.btn{margin-top:auto !important}

  
  body.salon .salon-map-page .card .body > a.btn{
    height:44px;
    padding:0 12px;
  }
/* Form "Ocupar": mantener en una sola fila y compacto */
  body.salon .salon-map-page .card form[method="post"] > div{
    flex-direction:row;
    align-items:center;
  }
  body.salon .salon-map-page .card form[method="post"] input[name="pax"]{
    flex:0 0 62px;
    padding:0 10px;
    height:44px;
    text-align:center;
  }
  body.salon .salon-map-page .card form[method="post"] button.btn{
    flex:1;
    min-width:0;
  
    height:44px;
    padding:0 12px;
}

  /* Caja (mapa): topbar y selector de salón en columna */
  body.caja .caja-topbar{flex-direction:column;align-items:stretch;gap:10px}
  body.caja .caja-controls{justify-content:stretch}
  body.caja .caja-controls form{width:100%}
  body.caja .caja-controls select.input{width:100%}

  /* Tablas pequeñas: más compactas en celular */
  .table th,.table td{padding:8px}
}

/* Salon (mapa de mesas): mantener 2 por fila en móvil normal.
   Solo en pantallas muy angostas (teléfonos pequeños) baja a 1 por fila. */
@media (max-width: 360px){
  body.salon .salon-map-page .col-6{flex:0 0 100%}
}

/* Seguridad UI: el botón de Config de Delivery solo debe verse en la pantalla Delivery */
/* Delivery global config button lives only in delivery/index.html */
#dlvGlobalCfgBtn{ display:inline-flex; }

/* Ventas (Salón): el selector de ambiente (piso) desplegable nativo se veía blanco.
   Forzamos esquema oscuro + acento dorado para que siga la paleta del sistema. */
body.salon select.input{
  color-scheme: dark;
}
body.salon select.input option{
  background:#0b1220 !important;
  color:rgba(226,232,240,.96) !important;
}
body.salon select.input option:checked{
  background:#0b1220 !important;
  color:rgba(245,197,66,.95) !important;
}

/* ----------------------
   Config > SUNAT (guía de flujo)
   ---------------------- */
body.config .sunat-grid{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start}
@media (max-width: 980px){
  body.config .sunat-grid{grid-template-columns:1fr}
}

body.config .sunat-card{
  background:rgba(2,6,23,.35);
  border:1px solid var(--gold-border);
  border-radius:18px;
  padding:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
body.config .sunat-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
body.config .sunat-card-title{font-weight:950;letter-spacing:.2px}

body.config .sunat-checks{display:flex;flex-direction:column;gap:10px}
body.config .sunat-check{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(245,197,66,.18);
  background:rgba(255,255,255,.04);
}
body.config .sunat-check-k{font-weight:900;color:rgba(226,232,240,.95);font-size:12px;letter-spacing:.2px}
body.config .sunat-check-v{font-weight:800;color:rgba(241,245,249,.95);text-align:right;max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.config .sunat-check.is-ok{border-color:rgba(245,197,66,.30);background:rgba(245,197,66,.08)}
body.config .sunat-check.is-miss{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.08)}
body.config .sunat-mini-note{margin-top:12px;border-top:1px solid rgba(245,197,66,.10);padding-top:12px}

body.config .sunat-steps{display:flex;flex-direction:column;gap:12px}
body.config .sunat-step{
  background:rgba(2,6,23,.35);
  border:1px solid var(--gold-border);
  border-radius:18px;
  padding:14px;
  position:relative;
  overflow:hidden;
}
body.config .sunat-step:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--gold), rgba(245,197,66,.28));
  opacity:.95;
}
body.config .sunat-step-head{display:flex;align-items:flex-start;gap:12px}
body.config .sunat-step-num{
  width:34px;height:34px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;
  color:rgba(241,245,249,.98);
  border:1px solid rgba(245,197,66,.30);
  background:rgba(245,197,66,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  flex:0 0 auto;
}
body.config .sunat-step-title{font-weight:950;letter-spacing:.2px}
body.config .sunat-step-sub{color:rgba(226,232,240,.82);font-size:12px;margin-top:2px}
body.config .sunat-step-body{margin-top:10px}
body.config .sunat-step-actions{margin-top:10px;display:flex;justify-content:flex-end}

body.config .sunat-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 780px){
  body.config .sunat-split{grid-template-columns:1fr}
}
body.config .sunat-mini-card{
  border:1px solid rgba(245,197,66,.18);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:12px;
}
body.config .sunat-mini-title{font-weight:900;margin-bottom:6px}
body.config .sunat-ul{margin:0;padding-left:18px;color:rgba(226,232,240,.88);font-size:12px;line-height:1.35}
body.config .sunat-ul li{margin:6px 0}

body.config .sunat-pill-row{display:flex;flex-wrap:wrap;gap:8px}
body.config .sunat-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(245,197,66,.22);
  background:rgba(245,197,66,.08);
  color:rgba(241,245,249,.96);
  font-size:12px;
  font-weight:850;
}
body.config .sunat-footer-note{margin-top:10px}

/* SUNAT panel (envío real) */
body.config .sunat-right{display:flex;flex-direction:column;gap:16px}
body.config .sunat-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:900px){
  body.config .sunat-form-grid{grid-template-columns:1fr}
}
body.config .sunat-table-wrap{overflow:auto;border:1px solid rgba(245,197,66,.16);border-radius:16px;background:rgba(2,6,23,.30)}
body.config .sunat-table{width:100%;border-collapse:separate;border-spacing:0}
body.config .sunat-table thead th{position:sticky;top:0;background:rgba(2,6,23,.60);backdrop-filter:blur(10px);color:rgba(226,232,240,.92);font-size:12px;text-align:left;padding:10px 12px;border-bottom:1px solid rgba(245,197,66,.14)}
body.config .sunat-table tbody td{padding:10px 12px;border-bottom:1px solid rgba(245,197,66,.08);vertical-align:top}
body.config .sunat-table tbody tr:hover{background:rgba(245,197,66,.06)}
body.config .sunat-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
body.config .sunat-actions form{display:inline}
.sunat-batch-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}

body.config .sunat-batch-panel{
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.config .sunat-batch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
body.config .sunat-batch-title{font-weight:950;color:rgba(241,245,249,.96);font-size:13px;letter-spacing:.2px}
body.config .sunat-batch-meta{font-weight:850;color:rgba(203,213,225,.92);font-size:12px}
body.config .sunat-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
body.config .sunat-progress>div{height:100%;width:0%;background:linear-gradient(90deg, rgba(245,197,66,.35), rgba(245,197,66,.15));transition:width .2s ease}
body.config .sunat-batch-log{margin-top:10px;max-height:160px;overflow:auto;font-size:12px;line-height:1.35;color:rgba(226,232,240,.92);padding-right:4px}
body.config .sunat-batch-log .item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);margin-bottom:6px}
body.config .sunat-batch-log .item .left{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
body.config .sunat-batch-log .item .doc{font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.config .sunat-batch-log .item .msg{color:rgba(203,213,225,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.config .sunat-batch-log .item .tag{font-weight:950;font-size:11px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
body.config .sunat-batch-log .item.ok .tag{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.10);color:rgba(187,247,208,.92)}
body.config .sunat-batch-log .item.warn .tag{border-color:rgba(245,197,66,.22);background:rgba(245,197,66,.08);color:rgba(254,243,199,.92)}
body.config .sunat-batch-log .item.bad .tag{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.10);color:rgba(254,202,202,.92)}
body.config .sunat-links{margin-top:6px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
body.config .sunat-links a{font-size:12px;text-decoration:none;color:rgba(241,245,249,.92)}
body.config .sunat-links a:hover{color:var(--gold)}
body.config .sunat-status{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(245,197,66,.18);background:rgba(245,197,66,.08);color:rgba(241,245,249,.92)}
body.config .sunat-status.aceptado{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)}
body.config .sunat-status.rechazado{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
body.config .sunat-status.observado{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10)}
body.config .sunat-status.error_ws, body.config .sunat-status.error{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
body.config .sunat-status.pendiente_cdr{border-color:rgba(148,163,184,.30);background:rgba(148,163,184,.10)}

/* ------------------------------------------------------------
   Visor PDF embebido (modal global)
   - Historial y otros módulos pueden abrir el PDF sin cargar mesa2.css.
   - Definimos aquí el modal para que SIEMPRE se centre y no "aparezca abajo".
------------------------------------------------------------ */

body.mesa2-modal-open{ overflow:hidden; }

.mesa2-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(2,6,23,.68);
  backdrop-filter: blur(4px);
}
.mesa2-modal[hidden]{ display:none !important; }

.mesa2-modal-card{
  width:min(980px, 100%);
  max-height:88vh;
  border-radius:16px;
  border:1px solid rgba(245,197,66,.35);
  background:rgba(10,14,26,.97);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  overflow:hidden;
}

.mesa2-pdf-card{ width:min(1100px, 100%); }

.mesa2-modal-head{
  padding:12px 14px;
  border-bottom:1px solid rgba(245,197,66,.18);
  background:linear-gradient(180deg, rgba(18,24,41,.92), rgba(11,15,26,.92));
}

.mesa2-modal-title{
  font-weight:950;
  letter-spacing:-.2px;
  color:rgba(245,197,66,.95);
}

.mesa2-modal-body{ padding:0; }
.mesa2-pdf-body{ background:#0b1020; }

@media (max-width: 560px){
  .mesa2-modal{ padding:10px; }
  .mesa2-modal-card{ max-height:92vh; border-radius:14px; }
}

/* ---------------------------
   Mobile UX: prevent focus-zoom
   (iOS Safari auto-zooms inputs < 16px)
   and keep text sizing stable.
   --------------------------- */
html{ -webkit-text-size-adjust:100%; }

@supports (-webkit-touch-callout: none){
  /* iOS-specific: keep form controls at >= 16px to avoid "zoom on focus" */
  input:not(.pay-amount-input),
  textarea,
  select,
  .input:not(.pay-amount-input){
    font-size:16px;
  }
}

/* ---------- Dashboard Pro (Inicio) ---------- */
.dash-pro-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 980px){
  .dash-pro-grid{grid-template-columns:1.45fr 1fr}
}
@media (min-width: 1300px){
  .dash-pro-grid{grid-template-columns:1.45fr 1fr 1fr}
}
.dash-pro-grid .span-2{grid-column:1/-1}
@media (min-width: 1300px){
  .dash-pro-grid .span-2{grid-column:span 2}
}

.dash-controls{
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.dash-control{display:flex;flex-direction:column;gap:6px;min-width:140px}
.dash-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--card-2);
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  color:var(--text);
  outline:none;
}
.dash-select:focus{box-shadow:0 0 0 3px rgba(245,197,66,.18);border-color:rgba(245,197,66,.35)}

.dash-chart-wrap{padding:14px}
.dash-chart{width:100%;display:block}

/* Compact dashboard (Inicio) */
@media (min-width: 980px) and (max-height: 860px){
  .dash{gap:10px}
  .dash-header{gap:10px}
  .kpi-grid{gap:10px}
  .kpi{padding:10px;border-radius:16px}
  .kpi-ico{width:38px;height:38px;border-radius:14px;font-size:17px}
  .kpi-value{font-size:16px}
  .dash-card .card-h{padding:12px 12px 0 12px}
  .dash-chart-wrap{padding:10px}
  .dash .dash-legend{margin-top:8px}
  .dash .dash-proy-big{margin-bottom:6px}
  .dash .dash-proy-value{font-size:20px}
  .dash .dl-item{padding:8px 10px;border-radius:12px}
  .dash .status-row{padding:8px 10px;border-radius:12px}
}

/* Mobile: prevent overly tall charts/lists */
@media (max-width: 560px){
  .dash{gap:12px}
  .kpi-grid{gap:10px}
  .kpi{padding:10px}
  .kpi-ico{width:36px;height:36px;border-radius:14px}
  .kpi-value{font-size:16px}
  .dash-chart-wrap{padding:10px}
  .dash .dash-list{max-height:220px;overflow:auto}
  .dash .dash-status{max-height:220px;overflow:auto}
  .dash .dash-table{max-height:260px;overflow:auto}
}

.dash-legend{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}
.dash-legend .lg{display:flex;gap:6px;align-items:center}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot-ventas{background:#16a34a}
.dot-desc{background:#f59e0b}
.dot-proj{background:#60a5fa}

.dash-proy-big{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.dash-proy-value{font-weight:900;font-size:22px;letter-spacing:-.3px}

.dash-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.dl-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);background:var(--card-2);border-radius:14px}
.dl-l{font-weight:900}
.dl-r{font-weight:900;color:var(--muted)}

.dash-table{margin-top:10px}
.dash-table .thead,.dash-table .trow{display:grid;grid-template-columns:1.4fr .5fr .7fr;gap:10px;align-items:center}
.dash-table .thead{font-size:12px;color:var(--muted);font-weight:900;padding:8px 2px}
.dash-table .trow{padding:10px 2px;border-top:1px solid var(--border)}
.dash-table .r{text-align:right}
.dash-table .p{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dash-split{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px}
@media (min-width: 520px){
  .dash-split{grid-template-columns:1fr 1fr}
}
.dash-status{display:flex;flex-direction:column;gap:8px}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid var(--border);background:var(--card-2);border-radius:14px}
.status-row .s{font-weight:900}
.status-row .n{font-weight:900;color:var(--muted)}

.dash-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;gap:6px;align-items:center;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card-2);font-size:12px}

.dash-prod{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width: 900px){
  .dash-prod{grid-template-columns:1fr 1fr}
}
.prod-title{font-weight:900;margin-bottom:8px}

/* Tooltip simple (canvas) */
.dash-tip,
.dash-tooltip{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  background:rgba(17,24,39,.92);
  color:#fff;
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.25);
  transform:translate(-50%, -120%);
  opacity:0;
  transition:opacity .08s ease;
  max-width:280px;
}
.dash-tip.show,
.dash-tooltip.show{opacity:1}