*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --blue:#F56820;--blue-l:rgba(245,104,32,0.10);--blue-m:rgba(245,104,32,0.20);--blue-d:#D4530F;
  --green:#16a34a;--orange:#ea580c;--red:#dc2626;--red-l:#fef2f2;
  --g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;--g300:#d1d5db;
  --g400:#9ca3af;--g500:#6b7280;--g600:#4b5563;--g700:#374151;
  --g800:#1f2937;--g900:#111827;
  --hdr:52px;--bar:68px;
  /* tema claro (por defecto) */
  --bg-app:white;--bg-panel:#f1f5f9;--bg-card:white;--bg-input:white;
  --border-c:var(--g200);--text-main:var(--g900);--text-sub:var(--g500);
}
/* ══════════════════════════════════════════════
   MODO OSCURO — ARIPOS
   Paleta: Slate oscuro + azul marca #F56820
══════════════════════════════════════════════ */
body.dark{
  /* Grises redefinidos como slate */
  --g50:#0f172a;--g100:#1e293b;--g200:#334155;--g300:#475569;
  --g400:#64748b;--g500:#94a3b8;--g600:#cbd5e1;--g700:#e2e8f0;
  --g800:#f1f5f9;--g900:#f8fafc;
  /* Azul marca — un poco más brillante en oscuro */
  --blue:#3b82f6;--blue-l:#1e3a5f;--blue-m:#D4530F;--blue-d:#60a5fa;
  --orange:#f97316;
  --red-l:#450a0a;
}
/* Base */
body.dark{background:#0f172a;color:#f1f5f9;}
body.dark #loading{background:#0f172a;}
body.dark .logo span{color:#334155;}

/* Header */
body.dark .hdr{background:#1e293b;border-color:#334155;box-shadow:0 1px 0 #334155;}
body.dark .stab{border-color:#334155;color:#94a3b8;}
body.dark .stab.on{background:var(--blue);border-color:var(--blue);color:white;}
body.dark .stab-add{border-color:#334155;color:#64748b;}
body.dark .hdr-btn,body.dark .hdr-btns button{background:#263045;border-color:#334155;color:#f1f5f9;}

/* Plano de mesas */
body.dark .plano,body.dark #pg-plano{background:#0f172a;}
body.dark .mnom{color:#94a3b8;}
body.dark .mw.ocu .mnom{color:#fb923c;}
/* Disable text selection globally (APK) */
*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text;}
body.dark .mitems-badge{background:#334155;}

/* Página pedido */
body.dark #pg-ped{background:#0f172a;}
body.dark .ped-top{background:#1e293b;border-color:#334155;}
body.dark .ped-title{color:#f1f5f9;}
body.dark .ped-sala{color:#94a3b8;}
body.dark .total-amt-top{color:#f1f5f9;}
body.dark .btn-back{background:#263045;border-color:#334155;color:#cbd5e1;}
body.dark .btn-top-sub{background:#334155 !important;border-color:#475569 !important;color:#f1f5f9 !important;}

/* Barra categorías */
body.dark .cats-bar{background:#1e293b;border-color:#334155;}
/* cat-btn colores manejados por renderCats() dinámicamente */

/* Grid productos */
body.dark .col-prods,body.dark .prods-grid{background:#0f172a;}
body.dark .prod-btn{background:#1e293b;border-color:#334155;}
body.dark .prod-btn.fav{background:#1a2535;border-color:#334155;}
body.dark .prod-btn.in-order{border-color:#475569 !important;box-shadow:0 0 0 1.5px #475569;}
body.dark .prod-btn.in-order .prod-nom-wrap{background:rgba(71,85,105,.25);}
/* Modo claro */
.prod-btn.in-order{border-color:var(--g300) !important;box-shadow:0 0 0 1.5px var(--g300);}
body.dark .prod-img{background:#263045;}
body.dark .prod-nom-wrap{background:rgba(15,23,42,.92);border-color:#334155;}
body.dark .prod-nom{color:#f1f5f9;}

/* Columna pedido */
body.dark .col-ped{background:#0f172a;border-color:#334155;}
body.dark .col-ped-top{background:#1e293b;border-color:#334155;}
body.dark .col-ped-label{color:#64748b;}
body.dark .col-ped-count{color:#94a3b8;}
body.dark .ped-empty{color:#94a3b8;}
body.dark .lineas-list,body.dark .ped-area{background:#0f172a;}
body.dark .ped-line{background:#1e293b;border-color:#334155;color:#f1f5f9;}
body.dark .ped-line.sel{background:#1e3a5f;border-color:#3b82f6;}
body.dark .ped-line-nom{color:#f1f5f9;}
body.dark .ped-line-pre{color:#94a3b8;}
body.dark .lnom{color:#f1f5f9;}
body.dark .lpre{color:#94a3b8;}
body.dark .lqty{background:#334155;color:#f1f5f9;}
body.dark .ltag{background:#334155;color:#94a3b8;}
body.dark .ltag.comp{background:#1e3a5f;color:#60a5fa;}
body.dark .ldel{background:#450a0a;color:#f87171;border:none;}
body.dark .ldel:active{background:#7f1d1d;}
body.dark .col-ped-top{background:#1e293b;border-color:#334155;}
body.dark .ped-total,body.dark .total-row{background:#1e293b;border-color:#334155;color:#f1f5f9;}
body.dark .total-amt{color:#f1f5f9;}
body.dark .npb{background:#263045;border-color:#334155;color:#f1f5f9;}
body.dark .npb.del{background:#450a0a;border-color:#7f1d1d;color:#f87171;}
body.dark .np-hint{background:#0f172a;border-color:#334155;color:#64748b;}
body.dark .np-hint.on{background:#1e3a5f;border-color:#3b82f6;color:#93c5fd;}
body.dark .qty-del{background:#450a0a;border-color:#7f1d1d;color:#f87171;}
body.dark .ped-total,body.dark .total-row{background:#1e293b;border-color:#334155;color:#f1f5f9;}
body.dark .total-amt{color:#f1f5f9;}

/* Teclado numérico */
body.dark .np-wrap{background:#1e293b;border-color:#334155;}
body.dark .np-hint{background:#0f172a;border-color:#334155;color:#64748b;}
body.dark .np-hint.on{background:#1e3a5f;border-color:#3b82f6;color:#60a5fa;}
body.dark .btn-np{background:#263045;color:#f1f5f9;border-color:#334155;}
body.dark .btn-np:active{background:#334155;}

/* Pie pedido */
body.dark .ped-foot{border-color:#334155;}
body.dark .btn-sub{background:#334155;}



/* Móvil — barra total */
body.dark .mob-bar{background:#1e293b;border-color:#334155;}
body.dark .mob-bar-inner{background:#1e293b;}
body.dark .mob-total-lbl{color:#64748b;}
body.dark .mob-total-amt{color:#f1f5f9;}
body.dark .mob-ped-content{background:#1e293b;}
body.dark .mob-ped-handle{background:#334155;}
body.dark .mob-ped-header{background:#1e293b;border-color:#334155;}
body.dark .mob-ped-title{color:#f1f5f9;}
body.dark .mob-ped-count{color:#94a3b8;}
body.dark .mob-ped-close{background:#263045;color:#94a3b8;}
body.dark .mob-ped-foot{background:#1e293b;border-color:#334155;}

/* Modales */


/* Inputs, selects, textarea globales */
body.dark input,body.dark select,body.dark textarea{
  background:#263045 !important;color:#f1f5f9 !important;border-color:#334155 !important;
}
body.dark input::placeholder,body.dark textarea::placeholder{color:#475569 !important;}
body.dark label{color:#94a3b8;}

/* Línea modal — bottom sheet */


.btn-vf{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:5px 10px;cursor:pointer;font-size:.78rem;font-weight:700;color:#64748b;}
.btn-vf.on{background:#F56820;border-color:#F56820;color:white;}

/* Artículos — páginas */
body.dark .art-page{background:#0f172a;}
body.dark .art-page-head{background:#1e293b;border-color:#334155;}
body.dark .art-page-head h2{color:#f1f5f9;}
body.dark .back-btn{background:#263045 !important;color:#f1f5f9 !important;border:none;}
body.dark .art-cat-lbl{color:#64748b;}
body.dark .art-row{background:#1e293b;border-color:#334155;}
body.dark .art-row:active{background:#263045;}
body.dark .art-nom{color:#f1f5f9;}
body.dark .art-meta{color:#64748b;}
body.dark .art-pre{color:#60a5fa;}
body.dark .art-section{background:transparent;}
body.dark .art-section-lbl{color:#64748b;}
body.dark .alg-btn{background:#1e293b;border-color:#334155;color:#f1f5f9;}
body.dark .alg-btn.on{background:#431407;border-color:#ea580c;color:#f97316;}
body.dark .zona-chip{background:#1e293b;border-color:#334155;color:#f1f5f9;}
body.dark .zona-chip.on{background:#1e3a5f;border-color:#3b82f6;color:#60a5fa;}
body.dark .fz-row{background:#1e293b;border-color:#334155;}
body.dark .fz-nom{color:#f1f5f9;}
body.dark .fz-sub{color:#64748b;}

/* Pantalla de activación */
body.dark #pg-activacion{background:#0f172a;}
body.dark .act-card{background:#1e293b;border-color:#334155;}

/* Botones ficha artículo — siempre legibles */
.ae-btn-cancel{background:#f1f5f9;color:#374151;border:2px solid #e2e8f0;}
.ae-btn-save{background:#F56820;color:white;}
.ae-btn-secondary{background:#f1f5f9;color:#374151;border:1.5px solid #e2e8f0;}
.ae-btn-internet{background:rgba(245,104,32,0.08);color:#F56820;border:1.5px solid rgba(245,104,32,0.25);}
body.dark .ae-btn-cancel{background:#263045 !important;color:#f1f5f9 !important;border-color:#334155 !important;}
body.dark .ae-btn-secondary{background:#263045 !important;color:#f1f5f9 !important;border-color:#334155 !important;}
body.dark .ae-btn-internet{background:#1e3a5f !important;color:#93c5fd !important;border-color:#D4530F !important;}
/* Art page search bar */
body.dark #pg-articulos>div:nth-child(2){background:#1e293b !important;border-color:#334155 !important;}
body.dark #pg-articulos #art-search{background:#263045;color:#f1f5f9;border-color:#334155;}
body.dark #ae-zonas-wrap,body.dark #ae-alg-grid,
body.dark #ae-fmts-wrap,body.dark #ae-mods-wrap,body.dark #ae-coms-wrap{color:#f1f5f9;}
body.dark #ae-img-preview{background:#263045;border-color:#334155;}

/* Franja inferior nombre en prod-btn modo oscuro ya definida arriba */

body.dark #pc-filtros{background:#1e293b !important;border-color:#334155 !important;box-shadow:none !important;}
body.dark .pcfbtn{background:#263045 !important;border-color:#334155 !important;color:#94a3b8 !important;}
body.dark .pcfbtn.on-ocu{background:#431407 !important;border-color:#ea580c !important;color:#f97316 !important;}
body.dark .pcfbtn.on-lib{background:#14532d !important;border-color:#16a34a !important;color:#4ade80 !important;}
body.dark .pcfbtn.on-todas{background:#1e3a5f !important;border-color:#3b82f6 !important;color:#60a5fa !important;}

/* ── MÓVIL: lista de mesas ── */
body.dark #mob-toolbar{background:#1e293b !important;border-color:#334155 !important;}
body.dark .mpbtn{background:#263045 !important;border-color:#334155 !important;color:#94a3b8 !important;}
body.dark .mpbtn.ocu{background:#431407 !important;border-color:#c2410c !important;color:#f97316 !important;}
body.dark #mob-mesas{background:#0f172a;}
body.dark .mob-card{background:#1e293b !important;border-color:#334155 !important;box-shadow:none !important;}
body.dark .mob-card.ocu{background:#1c1008 !important;border-color:#c2410c !important;}
body.dark .mob-card-nom{color:#f1f5f9 !important;}
body.dark .mob-card.ocu .mob-card-nom{color:#fb923c !important;}
body.dark .mob-card-sub{color:#64748b !important;}
body.dark .mob-card.ocu .mob-card-sub{color:#f97316 !important;}
body.dark .mob-card-total{color:#f97316 !important;}
body.dark .mob-card-libre{color:#334155 !important;}

/* ── MÓVIL: columna pedido ── */
body.dark .col-ped{background:#0f172a !important;border-color:#334155 !important;}
body.dark .col-ped-top{background:#1e293b !important;border-color:#334155 !important;}
body.dark .col-ped-total-mob{background:#1e293b !important;border-color:#334155 !important;color:#f1f5f9 !important;}
body.dark .col-ped-top-row{background:#1e293b !important;border-color:#334155 !important;}
body.dark .col-ped-mob-btns{background:#1e293b !important;border-color:#334155 !important;}
body.dark .col-ped-count{color:#94a3b8 !important;}
body.dark .col-ped-label{color:#64748b !important;}
body.dark .lineas-list{background:#0f172a;}
body.dark .linea{background:transparent;}
body.dark .linea:active{background:#1e293b !important;}
body.dark .linea.sel{background:#1e3a5f !important;border-color:#3b82f6 !important;}
body.dark .lnom{color:#f1f5f9 !important;}
body.dark .lpre{color:#60a5fa !important;}
body.dark .lqty{background:#3b82f6 !important;}
body.dark .ped-empty{color:#94a3b8 !important;}
body.dark .ped-empty span{opacity:1;font-size:2rem;}body.dark .ped-empty p{color:#94a3b8;}

/* ── MÓVIL: pie pedido + total ── */
body.dark .ped-foot{background:#0f172a;border-color:#334155 !important;}
body.dark .total-line{color:#f1f5f9;}
body.dark .total-lbl{color:#64748b !important;}
body.dark .total-amt{color:#f1f5f9 !important;}
body.dark .btn-sub{background:#334155 !important;}
body.dark .np-wrap{background:#1e293b !important;border-color:#334155 !important;}
body.dark .npb{background:#263045 !important;border-color:#334155 !important;color:#f1f5f9 !important;}
body.dark .npb:active{background:#334155 !important;}
body.dark .npb.del{background:#450a0a !important;border-color:#7f1d1d !important;color:#f87171 !important;}
body.dark .qty-del{background:#450a0a !important;border-color:#7f1d1d !important;color:#f87171 !important;}

/* ── Salas tabs en móvil ── */
body.dark #mob-salas-row .stab{background:#263045;border-color:#334155;color:#94a3b8;}
body.dark #mob-salas-row .stab.on{background:var(--blue);border-color:var(--blue);color:white;}

/* ── Pg-plano fondo ── */
body.dark #pg-plano{background:#0f172a !important;}
body.dark html,body.dark body{background:#0f172a !important;}
/* Scrollbar modo oscuro */
body.dark ::-webkit-scrollbar{width:4px;height:4px;}
body.dark ::-webkit-scrollbar-track{background:#0f172a;}
body.dark ::-webkit-scrollbar-thumb{background:#334155;border-radius:4px;}
body.dark ::-webkit-scrollbar-thumb:hover{background:#475569;}
/* Info producto */
body.dark #m-prod-info>div{background:#1e293b !important;}
body.dark #m-prod-info #pinfo-nom{color:#f1f5f9 !important;}
body.dark #m-prod-info #pinfo-pre{color:#60a5fa !important;}
body.dark #m-prod-info #pinfo-desc{color:#94a3b8 !important;}
body.dark #m-prod-info>div>div:first-child{background:#334155 !important;}
body.dark #m-prod-info button{background:#263045 !important;color:#94a3b8 !important;}
/* Buscar imagen modal */
body.dark #img-instruc{background:#1e3a5f !important;border-color:#D4530F !important;color:#93c5fd !important;}
body.dark #m-img-search input{background:#263045 !important;color:#f1f5f9 !important;border-color:#334155 !important;}
/* Input ae-ico — siempre legible */
#ae-ico{background:white !important;color:#111 !important;}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Figtree','Inter',sans-serif;background:#FAF7F2;}

/* LOADING */
#loading{position:fixed;inset:0;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:9999;}
.logo{font-size:2rem;font-weight:900;color:#F56820;letter-spacing:-1px;font-family:"Syne","Inter",sans-serif;}
.logo span{color:var(--g300);}
.spin{width:36px;height:36px;border:3px solid var(--g200);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* HEADER */
.hdr{
  position:fixed;top:0;left:0;right:0;height:var(--hdr);
  background:#FFFDF9;border-bottom:1px solid rgba(120,80,40,0.10);
  display:flex;align-items:center;padding:0 10px;gap:6px;
  z-index:100;box-shadow:0 1px 0 rgba(120,80,40,0.06);
}
.hdr-logo{font-size:.88rem;font-weight:900;color:#F56820;flex-shrink:0;font-family:"Syne","Inter",sans-serif;}
.hdr-salas{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:5px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:4px 0;
}
.hdr-salas::-webkit-scrollbar{display:none;}
.stab{
  flex-shrink:0;padding:10px 16px;
  border:1.5px solid var(--g200);border-radius:10px;
  font-size:.82rem;font-weight:700;color:var(--g500);
  background:transparent;cursor:pointer;white-space:nowrap;
  font-family:'Inter',sans-serif;
}
.stab.on{background:var(--blue);border-color:var(--blue);color:white;}
.stab-add{
  flex-shrink:0;padding:5px 8px;
  border:1.5px dashed var(--g300);border-radius:8px;
  font-size:.68rem;font-weight:600;color:var(--g400);
  background:transparent;cursor:pointer;white-space:nowrap;
  font-family:'Inter',sans-serif;
}
.hdr-btns{display:flex;gap:4px;flex-shrink:0;}
.hbtn{
  width:32px;height:32px;border-radius:8px;
  border:1.5px solid var(--g200);background:var(--g100);
  color:var(--g600);font-size:.88rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.hbtn.red{background:#fef2f2;border-color:#fecaca;color:var(--red);}

/* PLANO DE MESAS */
#pg-plano{
  position:fixed;top:var(--hdr);left:0;right:0;bottom:0;
  overflow:hidden;touch-action:none;
  background:radial-gradient(ellipse at 20% 20%,rgba(219,234,254,.6) 0%,transparent 50%),
    linear-gradient(145deg,#edf0f8,#e4e9f4);
}
#pg-plano::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(150,170,200,.08) 59px,rgba(150,170,200,.08) 60px),
    repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(150,170,200,.07) 59px,rgba(150,170,200,.07) 60px);
}
#canvas{position:absolute;top:0;left:0;width:3000px;height:2500px;transform-origin:0 0;}
.edit-tip{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:var(--blue);color:white;border-radius:20px;
  padding:5px 14px;font-size:.7rem;font-weight:600;
  z-index:10;display:none;pointer-events:none;white-space:nowrap;
}
.edit-tip.on{display:block;}
.mw .mrot{
  position:absolute;bottom:-14px;right:-14px;
  width:26px;height:26px;border-radius:50%;
  background:var(--blue);color:white;border:2px solid white;
  font-size:.8rem;cursor:pointer;display:none;
  align-items:center;justify-content:center;
  z-index:6;box-shadow:0 2px 6px rgba(0,0,0,.3);
  font-weight:700;
}
.mw.em .mrot{display:flex;}

/* MESA */
.mw{position:absolute;display:flex;flex-direction:column;align-items:center;cursor:pointer;user-select:none;overflow:visible;z-index:2;}
.mw.em{cursor:grab;}
.mw.drag{z-index:100;cursor:grabbing!important;}
.msvg{position:relative;overflow:visible;transition:transform .15s,filter .15s;}
.mw:not(.ocu):hover .msvg{transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 6px 14px rgba(37,99,235,.3));}
.mw.ocu .msvg{filter:drop-shadow(0 4px 12px rgba(234,88,12,.4));animation:pulse 2.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{filter:drop-shadow(0 4px 12px rgba(234,88,12,.4));}50%{filter:drop-shadow(0 8px 24px rgba(234,88,12,.7));}}
.mw.ocu:hover .msvg{animation:none;transform:translateY(-2px) scale(1.04);}
.mbadge{position:absolute;top:-10px;right:-10px;background:linear-gradient(135deg,#ea580c,#c2410c);color:white;border-radius:12px;padding:3px 8px;font-size:.62rem;font-weight:800;white-space:nowrap;z-index:5;box-shadow:0 2px 8px rgba(234,88,12,.4);}
.mitems-badge{position:absolute;top:-10px;left:-10px;background:var(--g700);color:white;border-radius:12px;padding:3px 7px;font-size:.62rem;font-weight:800;white-space:nowrap;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.25);}
.cst-badge{position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);border-radius:10px;padding:2px 8px;font-size:.58rem;font-weight:800;white-space:nowrap;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.3);letter-spacing:.3px;}
.cst-badge.cst1{background:#ea580c;color:white;animation:cstPulse 1.8s ease-in-out infinite;}
.cst-badge.cst2{background:#16a34a;color:white;}
@keyframes cstPulse{0%,100%{opacity:1;}50%{opacity:.6;}}
.mdel{position:absolute;top:-8px;left:-8px;background:var(--red);color:white;border:2px solid white;border-radius:50%;width:22px;height:22px;font-size:.7rem;cursor:pointer;display:none;align-items:center;justify-content:center;font-weight:700;z-index:5;}
.showdel .mdel{display:flex;}
.minfo{margin-top:10px;text-align:center;pointer-events:none;}
.mnom{font-size:.7rem;font-weight:800;color:var(--g700);}
.mw.ocu .mnom{color:#92400e;}
.mitems{font-size:.6rem;font-weight:700;color:var(--orange);display:none;}
.mw.ocu .mitems{display:block;}
.deco{position:absolute;font-size:2rem;user-select:none;z-index:1;}
.deco.em{cursor:grab;}

/* PÁGINA PEDIDO */
#pg-ped{
  position:fixed;top:0;left:0;right:0;bottom:0;
  display:none;
  flex-direction:column;
  background:var(--g50);
}
/* En escritorio, el ped-body ocupa todo el espacio restante sin gap */
@media(min-width:768px){
  /* col-ped ocupa toda la altura: ped-body tiene overflow visible hacia arriba */
  .ped-body{align-items:stretch;}
  .col-ped{align-self:stretch;}
}

/* TOP BAR pedido */
.ped-top{
  background:white;border-bottom:2px solid var(--g300);
  padding:6px 10px;display:flex;align-items:center;gap:6px;
  flex-shrink:0;
}
.ped-top-btns{display:flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0;}
.total-amt-top{font-size:1rem;font-weight:900;color:var(--g900);min-width:70px;text-align:right;}
.btn-top-sub{padding:9px 16px;border:1.5px solid var(--g300);border-radius:9px;background:var(--g800);color:white;font-size:.84rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;}
.btn-top-coc{padding:9px 18px;border:none;border-radius:9px;background:var(--orange);color:white;font-size:.84rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;}
.btn-top-cob{padding:9px 18px;border:none;border-radius:9px;background:var(--blue);color:white;font-size:.84rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;}
@media(max-width:767px){
  .total-amt-top{display:none;}
  .btn-top-sub{display:none;}
  .btn-top-coc{display:none;}
  .btn-top-cob{display:none;}
}
/* Modo directo: forzar botones visibles en cualquier pantalla */
body.modo-directo .btn-top-coc,
body.modo-directo .btn-top-cob{display:inline-block !important;}
body.modo-directo .btn-top-sub{display:inline-block !important;}
body.modo-directo .total-amt-top{display:inline-block !important;}
.btn-back{
  padding:6px 10px;border:1.5px solid var(--g200);border-radius:8px;
  background:var(--g100);color:var(--g600);
  font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;cursor:pointer;
  white-space:nowrap;flex-shrink:0;
}
.ped-title{font-size:.9rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ped-sala{font-size:.7rem;color:var(--g400);flex-shrink:0;}

/* CATEGORÍAS */
.cats-bar{
  background:white;border-bottom:2px solid var(--g300);
  padding:6px 10px;flex-shrink:0;
  /* Scroll nativo iOS — truco definitivo */
  display:block;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
  scrollbar-width:none;
}
.cats-bar::-webkit-scrollbar{display:none;}
.cat-btn{
  display:inline-flex;flex-direction:column;align-items:center;
  gap:5px;padding:11px 18px;min-width:82px;
  border:2px solid var(--g300);border-radius:14px;
  background:white;color:var(--g700);
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:700;
  cursor:pointer;white-space:nowrap;vertical-align:top;
  margin-right:7px;-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.cat-btn:last-child{margin-right:0;}
.cat-btn.on{color:white!important;border-color:transparent!important;}
.cat-ico{font-size:1.8rem;line-height:1.2;}
.cat-img-sm{width:32px;height:32px;border-radius:7px;object-fit:cover;}

/* LAYOUT PRINCIPAL */
.ped-main{
  flex:1;display:flex;min-height:0;overflow:hidden;
}
.ped-left{
  flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;
}
.ped-body{
  flex:1;display:flex;min-height:0;overflow:hidden;
}
/* COLUMNA PRODUCTOS */
.col-prods{
  flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;
}
.prods-grid{
  flex:1;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:8px;
  align-content:start;
}
/* Wrapper para el badge overflow */
.prod-wrap{position:relative;aspect-ratio:1;}
.prod-btn{
  background:white;border:2px solid var(--g300);border-radius:12px;
  display:flex;flex-direction:column;align-items:stretch;
  cursor:pointer;text-align:center;position:relative;
  width:100%;height:100%;
  min-width:0;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  transition:transform .1s,box-shadow .1s;
}
.prod-btn:active{transform:scale(.96);box-shadow:0 0 0 2.5px var(--g300);border-color:var(--g400);}
/* Badge cantidad — fuera del botón, no se corta */
.prod-badge{
  position:absolute;top:-7px;left:-7px;
  background:var(--blue);color:white;
  border-radius:10px;padding:2px 8px;
  font-size:.65rem;font-weight:800;
  display:none;z-index:20;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  border:2px solid white;
  pointer-events:none;
}
.prod-badge.v{display:block;}
/* Botón info */
.prod-info-btn{
  position:absolute;bottom:28px;right:4px;
  width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.45);color:white;
  border:1.5px solid rgba(255,255,255,.4);
  font-size:.65rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:15;
  backdrop-filter:blur(4px);
  transition:background .15s;
  pointer-events:all;
  line-height:1;font-style:italic;font-family:'Inter',sans-serif;
}
.prod-info-btn:active{background:rgba(37,99,235,.8);}
/* Botones artículo edit form */
.ae-btn-cancel{background:#f1f5f9;color:#374151;border:2px solid #e2e8f0;border-radius:10px;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:700;cursor:pointer;}
.ae-btn-save{background:#F56820;color:white;border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:800;cursor:pointer;box-shadow:0 2px 8px rgba(37,99,235,.3);}
body.dark .ae-btn-cancel{background:#263045 !important;color:#f1f5f9 !important;border-color:#475569 !important;}
.ae-img-gal-btn{background:#e2e8f0;border:1.5px solid #d1d5db;border-radius:9px;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;color:#374151;}
.ae-img-net-btn{background:rgba(245,104,32,0.08);border:1.5px solid rgba(245,104,32,0.25);border-radius:9px;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:700;color:#F56820;cursor:pointer;}
body.dark .ae-img-gal-btn{background:#334155 !important;border-color:#475569 !important;color:#f1f5f9 !important;}
body.dark .ae-img-net-btn{background:#1e3a5f !important;border-color:#D4530F !important;color:#93c5fd !important;}
.prod-img{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--g50);
}
.prod-img img{width:100%;height:100%;object-fit:cover;image-rendering:auto;}
.prod-img-ico{font-size:2.4rem;line-height:1;}
/* Nombre en franja inferior */
.prod-nom-wrap{
  background:white;
  padding:4px 6px 5px;border-top:2px solid var(--g200);
  flex-shrink:0;
}
body.dark .prod-nom-wrap{background:rgba(30,41,59,.95);border-color:var(--border-c);}
.prod-nom{font-size:.72rem;font-weight:700;color:var(--g800);line-height:1.2;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Badge precio — arriba derecha */
.prod-pre-badge{
  position:absolute;top:6px;right:6px;
  background:rgba(255,255,255,.85);color:#D4530F;
  border-radius:6px;padding:2px 6px;
  font-size:.72rem;font-weight:800;
  pointer-events:none;
}
.prod-pre-orig{
  position:absolute;top:6px;left:6px;
  background:var(--blue);color:white;
  border-radius:6px;padding:2px 6px;
  font-size:.62rem;font-weight:800;
  pointer-events:none;text-decoration:line-through;opacity:.85;
}
/* Franja inferior nombre en prod-btn modo oscuro ya definida arriba */

/* COLUMNA PEDIDO — escritorio */
.col-ped{
  width:280px;flex-shrink:0;
  background:white;border-left:2px solid var(--g300);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.col-ped-top{
  padding:6px 12px 4px;border-bottom:2px solid var(--g200);
  display:flex;justify-content:space-between;align-items:center;
  flex-shrink:0;background:var(--g50);
}
@media(max-width:767px){
  .col-ped-top{
    flex-direction:column;align-items:stretch;padding:0;gap:0;
  }
  .col-ped-total-mob{
    display:flex;justify-content:space-between;align-items:center;
    padding:6px 12px 4px;background:white;border-bottom:1px solid var(--g100);
  }
  .col-ped-top-row{
    display:flex;flex-direction:column;align-items:stretch;
    padding:8px 14px;background:var(--g50);gap:2px;
  }
  @media(min-width:768px){.col-ped-total-mob{display:none;}}
}
@media(min-width:768px){
  .col-ped-total-mob{display:none;}
  .col-ped-mob-btns{display:none;}
}
@media(max-width:767px){
  .col-ped-mob-btns{
    display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;
    border-bottom:1px solid var(--g100);
    background:white;
  }
  .col-ped-mob-btns .mob-btn-coc,
  .col-ped-mob-btns .mob-btn-cob,
  .col-ped-mob-btns .mob-btn-aripay-top{
    flex:1;padding:10px;border-radius:9px;font-size:.84rem;
    font-family:'Inter',sans-serif;font-weight:700;border:none;color:white;cursor:pointer;
  }
  .col-ped-mob-btns .mob-btn-coc{background:var(--orange);}
  .col-ped-mob-btns .mob-btn-aripay-top{background:rgba(245,104,32,0.10);border:1.5px solid rgba(245,104,32,0.30);color:#D4530F;}
  .col-ped-mob-btns .mob-btn-cob{background:var(--blue);}
}
.col-ped-label{font-size:.68rem;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.5px;}
.col-ped-count{font-size:.68rem;font-weight:700;color:var(--g700);}
.lineas-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 6px;}
.linea{
  display:flex;align-items:center;gap:6px;
  padding:7px 8px;border-radius:8px;cursor:pointer;
  border:1.5px solid var(--g100);margin-bottom:2px;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.linea:active{background:var(--g50);}
.linea.sel{background:var(--blue-l);border-color:var(--blue-m);}
.lqty{background:var(--blue);color:white;border-radius:5px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex-shrink:0;}
.lnom{flex:1;font-size:.78rem;font-weight:600;color:var(--g800);}
.lpre{font-size:.76rem;font-weight:700;color:var(--blue);}
.ldel{background:var(--red-l);border:none;color:var(--red);border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem;font-weight:700;flex-shrink:0;touch-action:manipulation;}
.ltag{border-radius:4px;padding:1px 5px;font-size:.6rem;font-weight:800;flex-shrink:0;}
.ltag.comp{background:#7c3aed;color:white;}
.ltag.ord{background:#ea580c;color:white;}
.ped-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--g400);}
.ped-empty span{font-size:1.8rem;}
.ped-empty p{font-size:.74rem;}
/* NUMPAD escritorio */
.np-wrap{padding:7px;border-top:1px solid var(--g100);flex-shrink:0;}
.np-hint{background:var(--g50);border:1.5px solid var(--g200);border-radius:7px;padding:5px 8px;font-size:.68rem;font-weight:600;color:var(--g400);text-align:center;margin-bottom:5px;}
.np-hint.on{background:var(--blue-l);border-color:var(--blue);color:var(--blue);}
.np-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:5px;}
.npb{background:var(--g50);border:1.5px solid var(--g200);border-radius:7px;padding:7px;font-family:'Inter',sans-serif;font-weight:700;font-size:.86rem;cursor:pointer;text-align:center;color:var(--g700);}
.npb:active{background:var(--g200);}
.npb.w2{grid-column:span 2;}
.npb.del{background:#fef2f2;border-color:#fecaca;color:var(--red);}
/* TOTAL + BOTONES escritorio */
.ped-foot{padding:7px;border-top:1px solid var(--g200);flex-shrink:0;padding-bottom:52px;}
.total-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.total-lbl{font-size:.68rem;font-weight:700;color:var(--g400);text-transform:uppercase;}
.total-amt{font-size:1.3rem;font-weight:900;color:var(--g900);}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.btn-sub{grid-column:span 2;background:var(--g800);border:none;color:white;border-radius:8px;padding:9px;font-family:'Inter',sans-serif;font-weight:700;font-size:.76rem;cursor:pointer;}
.btn-coc{background:var(--orange);border:none;color:white;border-radius:8px;padding:9px;font-family:'Inter',sans-serif;font-weight:700;font-size:.76rem;cursor:pointer;}
.btn-cob{background:var(--blue);border:none;color:white;border-radius:8px;padding:9px;font-family:'Inter',sans-serif;font-weight:700;font-size:.76rem;cursor:pointer;}

/* ═══ MÓVIL ═══ */
@media(max-width:767px){
  .ped-main{flex-direction:column !important;overflow:hidden;}
  .ped-body{flex-direction:column !important;overflow:hidden;}
  .ped-left{flex:0 0 55%;overflow:hidden;width:100%;}
  .col-prods{flex:1;overflow:hidden;width:100%;}
  .col-ped{
    display:flex !important;
    flex:0 0 45%;
    min-height:0;
    border-left:none !important;
    border-top:2px solid var(--g200);
    overflow:hidden;
    width:100%;
  }
  .col-ped .lineas-list{
    flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .np-wrap{display:none !important;}
  .btn-sub{display:none !important;}
  .foot-grid{grid-template-columns:1fr 1fr !important;}
  .btn-coc,.btn-cob{padding:12px 8px;font-size:.84rem;}
  .total-amt{font-size:1.2rem;}
  .prods-grid{grid-template-columns:repeat(3,1fr) !important;padding:6px !important;gap:5px !important;}
  .prod-ico{font-size:1.7rem;}
  .prod-nom{font-size:.68rem;}
  .prod-pre{font-size:.76rem;}
}

/* BARRA INFERIOR HIOPOS STYLE */
.hios-bar{
  position:fixed;bottom:0;left:0;right:282px;
  height:56px;
  background:#1e293b;
  border-top:2px solid #334155;
  display:none;
  align-items:center;
  padding:0 8px;
  gap:6px;
  z-index:150;
  padding-bottom:env(safe-area-inset-bottom);
}
.hios-bar.on{display:flex;}
@media(max-width:767px){.hios-bar{right:0;}}
.hios-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:6px 10px;border-radius:8px;
  border:none;cursor:pointer;
  font-family:'Inter',sans-serif;
  min-width:52px;height:42px;
  background:#334155;color:#cbd5e1;
  font-size:.6rem;font-weight:700;
  flex-shrink:0;
}
.hios-btn:active{background:#475569;}
.hios-btn .hios-ico{font-size:1.1rem;line-height:1;}
.hios-btn.activo{background:#F56820;color:white;}
.hios-sep{width:1px;height:36px;background:#334155;flex-shrink:0;}
.hios-orden-wrap{display:flex;gap:4px;align-items:center;}
.hios-orden-lbl{font-size:.6rem;color:#ffffff;font-weight:700;margin-right:2px;}
.hios-orden-num{
  width:32px;height:32px;border-radius:6px;
  border:1.5px solid #334155;background:#1e293b;
  color:#ffffff;font-size:.78rem;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;
}
.hios-orden-num.on{background:#ea580c;border-color:#ea580c;color:white;}
.hios-spacer{flex:1;}
.hios-btn-mesas svg{flex-shrink:0;}
@media(max-width:767px){
  .hios-btn-mesas{display:none !important;}
  #hios-cajon{display:none !important;}
  #hios-sep-cajon{display:none !important;}
  #hios-buscar{display:none !important;}
  #btn-monei-qr-top{display:none !important;}
  #hios-cfg{display:none !important;}
  #hios-cerrar{display:none !important;}
  #btn-back{display:inline-flex !important;}
}
@media(min-width:768px){
  #btn-back{display:none;}
  #pg-ped .ped-top{height:var(--hdr);}
  #pg-ped{top:0 !important;}
}
.ped-top-logo{font-size:.92rem;font-weight:900;color:#F56820;flex-shrink:0;letter-spacing:-.5px;}
.ped-top-logo span{color:#334155;}
body.dark .ped-top-logo{color:#3b82f6;}
body.dark .ped-top-logo span{color:#475569;}
.hios-btn-cerrar{background:#dc2626 !important;color:white !important;}
.hios-btn-cerrar:active{background:#b91c1c !important;}

/* BARRA INFERIOR MÓVIL — oculta en móvil, ya tenemos botones en col-ped */
.mob-bar{
  display:none !important;
  position:fixed;bottom:0;left:0;right:0;
  height:var(--bar);
  padding-bottom:env(safe-area-inset-bottom);
  background:white;border-top:2px solid var(--g200);
  z-index:200;
}
.mob-bar-inner{
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  height:var(--bar);/* altura fija sin el safe area */
}
.mob-total{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 12px;border-right:1px solid var(--g200);
  min-width:100px;cursor:pointer;
}
.mob-total-lbl{font-size:.6rem;color:var(--g400);font-weight:500;}
.mob-total-amt{font-size:1rem;font-weight:900;color:var(--g900);}
.mob-btn-coc{
  background:var(--orange);border:none;color:white;
  font-family:'Inter',sans-serif;font-weight:800;font-size:.88rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
  border-right:1px solid rgba(0,0,0,.1);
}
.mob-btn-cob{
  background:var(--blue);border:none;color:white;
  font-family:'Inter',sans-serif;font-weight:800;font-size:.88rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
}
.mob-btn-aripay-top{
  background:var(--orange);border:none;color:white;
  font-family:'Inter',sans-serif;font-weight:700;font-size:.84rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;
  padding:10px;border-radius:9px;
}
.mob-btn-aripay{
  background:rgba(245,104,32,0.12);border:none;color:#F56820;
  font-family:'Inter',sans-serif;font-weight:800;font-size:1.1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-right:1px solid rgba(0,0,0,.1);
  min-width:48px;
}


/* PANEL PEDIDO MÓVIL (bottom sheet) */
#mob-ped-sheet{
  position:fixed;inset:0;z-index:500;display:none;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);
  align-items:flex-end;
}
#mob-ped-sheet.on{display:flex;}
.mob-ped-content{
  background:white;border-radius:20px 20px 0 0;
  width:100%;max-height:80vh;
  display:flex;flex-direction:column;
  animation:sUp .25s ease;
}
@keyframes sUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mob-ped-handle{width:40px;height:4px;background:var(--g200);border-radius:2px;margin:10px auto 4px;}
.mob-ped-header{
  padding:8px 16px 10px;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--g100);flex-shrink:0;
}
.mob-ped-title{font-size:.88rem;font-weight:800;}
.mob-ped-count{font-size:.78rem;color:var(--g400);font-weight:600;}
.mob-ped-close{background:var(--g100);border:none;border-radius:50%;width:28px;height:28px;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--g600);}
.mob-lineas{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 10px;}
.mob-ped-foot{
  padding:10px 14px;border-top:1px solid var(--g100);
  flex-shrink:0;
}
.mob-total-big{font-size:1.5rem;font-weight:900;text-align:center;margin-bottom:10px;}
.mob-foot-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mob-btn-coc2{background:var(--orange);border:none;color:white;border-radius:10px;padding:13px;font-family:'Inter',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;}
.mob-btn-cob2{background:var(--blue);border:none;color:white;border-radius:10px;padding:13px;font-family:'Inter',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;}
.mob-btn-sub{grid-column:span 2;background:var(--g800);border:none;color:white;border-radius:10px;padding:11px;font-family:'Inter',sans-serif;font-weight:700;font-size:.82rem;cursor:pointer;margin-bottom:6px;}
body.dark .mob-btn-sub{background:#334155;color:#f1f5f9;}

/* POPUP QTY */
#qty-pop{position:fixed;inset:0;z-index:600;display:none;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);align-items:flex-end;justify-content:center;}
#qty-pop.on{display:flex;}
.qty-sheet{background:white;border-radius:20px 20px 0 0;width:100%;max-width:400px;padding:20px 22px 28px;animation:sUp .2s ease;}
.qty-nom{font-size:.95rem;font-weight:800;text-align:center;margin-bottom:2px;}
.qty-ud{font-size:.8rem;color:var(--g400);text-align:center;margin-bottom:16px;}
.qty-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:14px;}
.qty-btn{width:50px;height:50px;border-radius:50%;border:2px solid var(--g200);background:white;font-size:1.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--g700);}
.qty-btn:active{background:var(--g100);}
.qty-num{font-size:2.4rem;font-weight:900;min-width:56px;text-align:center;}
.qty-tot{text-align:center;font-size:.86rem;color:var(--g500);margin-bottom:14px;}
.qty-tot strong{color:var(--blue);}
.qty-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.qty-del{background:#fef2f2;border:1.5px solid #fecaca;color:var(--red);border-radius:8px;padding:12px;font-family:'Inter',sans-serif;font-weight:700;font-size:.84rem;cursor:pointer;}
.qty-ok{background:var(--blue);border:none;color:white;border-radius:8px;padding:12px;font-family:'Inter',sans-serif;font-weight:700;font-size:.84rem;cursor:pointer;}

/* MENÚ MESA */
#menu-mesa{position:fixed;inset:0;z-index:300;display:none;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);align-items:flex-end;justify-content:center;}
#menu-mesa.on{display:flex;}
.menu-sheet{background:white;border-radius:20px 20px 0 0;width:100%;max-width:480px;padding:6px 0 24px;animation:sUp .22s ease;}
.mhandle{width:38px;height:4px;background:var(--g200);border-radius:2px;margin:8px auto 14px;}
.mtitle{font-size:1.05rem;font-weight:900;text-align:center;margin-bottom:2px;}
.msub{font-size:.78rem;color:var(--g400);text-align:center;margin-bottom:10px;}
.mdiv{height:1px;background:var(--g100);margin:3px 14px;}
.mbtn{display:flex;align-items:center;gap:12px;padding:12px 20px;font-size:.88rem;font-weight:600;color:var(--g800);border:none;background:transparent;width:100%;font-family:'Inter',sans-serif;cursor:pointer;}
.mbtn:active{background:var(--g50);}
.mbtn-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.mbtn-sub{font-size:.7rem;color:var(--g400);margin-top:1px;}
.mcancel{margin:6px 14px 0;background:var(--g100);border:none;border-radius:10px;padding:13px;font-family:'Inter',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;color:var(--g600);width:calc(100% - 28px);}

/* CTX EDICIÓN */
#ctx-edit{position:fixed;background:#131210;border:1px solid rgba(255,200,140,0.10);border-radius:12px;padding:6px;z-index:400;min-width:180px;box-shadow:0 12px 40px rgba(0,0,0,.5);display:none;}
.ci{padding:10px 14px;border-radius:8px;cursor:pointer;font-size:.82rem;font-weight:700;color:#F3EDE4;display:flex;align-items:center;gap:8px;}
.ci:active{background:rgba(245,104,32,0.12);}
.ci.red{color:#dc2626;}
.cdiv{height:1px;background:rgba(255,200,140,0.06);margin:3px 0;}
.cnom{padding:8px 14px 3px;font-size:.7rem;font-weight:800;color:#F56820;text-transform:uppercase;letter-spacing:.5px;}

/* MODALES */
.mov{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:700;backdrop-filter:blur(3px);}
.mov.on{display:flex;}
.modal{background:white;border-radius:18px;padding:20px;width:440px;max-width:calc(100vw - 20px);max-height:calc(100vh - 30px);overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 20px 50px rgba(0,0,0,.2);}
/* Patch B.3: m-tel (cliente+hora) mas grande en todos los tamanos */
#m-tel>.modal{max-height:95vh !important;width:560px !important;}
#m-tel .modal-body{max-height:calc(95vh - 80px) !important;}

.modal h3{font-size:.95rem;font-weight:800;margin-bottom:4px;}
.modal-sub{font-size:.74rem;color:var(--g400);margin-bottom:14px;}
.mi{width:100%;background:var(--g50);border:1.5px solid var(--g200);border-radius:8px;padding:9px 11px;font-family:'Inter',sans-serif;font-size:.86rem;color:var(--g900);margin-bottom:9px;}
.mi:focus{outline:none;border-color:var(--blue);background:white;}
.ml{font-size:.7rem;color:var(--g500);font-weight:600;margin-bottom:4px;display:block;}
.mbtns{display:flex;gap:7px;margin-top:4px;}
.btn-cancel{background:var(--g100);border:1.5px solid var(--g200);color:var(--g600);border-radius:8px;padding:10px 14px;font-family:'Inter',sans-serif;font-weight:600;font-size:.8rem;cursor:pointer;}
.btn-ok{flex:1;background:var(--blue);border:none;color:white;border-radius:8px;padding:10px;font-family:'Inter',sans-serif;font-weight:700;font-size:.8rem;cursor:pointer;}
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:11px;}
.fp{background:var(--g50);border:2px solid var(--g200);border-radius:10px;padding:11px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;}
.fp:active,.fp.on{border-color:var(--blue);background:var(--blue-l);}
.fp.on{box-shadow:0 0 0 3px var(--blue-m);}
.fp-ico{font-size:1.4rem;}
.fp-nom{font-size:.74rem;font-weight:700;color:var(--g700);}
.fp.on .fp-nom{color:var(--blue);}
.cambio{background:var(--g50);border:1.5px solid var(--g200);border-radius:8px;padding:9px 11px;margin-bottom:11px;display:none;}
.cambio.on{display:block;}
.cambio label{font-size:.7rem;color:var(--g500);font-weight:600;display:block;margin-bottom:4px;}
.cambio input{width:100%;background:transparent;border:none;font-family:'Inter',sans-serif;font-size:1.2rem;font-weight:800;outline:none;color:var(--g900);}
.cambio-res{margin-top:5px;font-size:.74rem;color:var(--g500);}
.cambio-res strong{color:var(--green);font-weight:800;}
.total-pago{font-size:1.8rem;font-weight:900;margin-bottom:13px;}
.total-pago span{font-size:.86rem;color:var(--g400);margin-right:5px;}
.divider{height:1px;background:var(--g100);margin:11px 0;}
/* Formas mesa */
.forma-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:13px;}
.forma-opt{background:var(--g50);border:2px solid var(--g200);border-radius:8px;padding:9px 5px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;}
.forma-opt.on{border-color:var(--blue);background:var(--blue-l);}
.forma-opt span{font-size:.62rem;font-weight:700;color:var(--g600);}
.forma-opt.on span{color:var(--blue);}
.icos-grid{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px;}
.ico-b{width:34px;height:34px;font-size:1.05rem;background:var(--g50);border:1.5px solid var(--g200);border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ico-b.on{border-color:var(--blue);background:var(--blue-l);}
/* Tarifa list */
.tlist{display:flex;flex-direction:column;gap:5px;margin-bottom:13px;}
.titem{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1.5px solid var(--g200);border-radius:8px;background:var(--g50);cursor:pointer;}
.titem:active,.titem.on{border-color:var(--blue);background:var(--blue-l);}
.titem.on{box-shadow:0 0 0 3px var(--blue-m);}
.tnom{flex:1;font-size:.82rem;font-weight:700;}
.tdesc{font-size:.7rem;color:var(--g400);}
.tcheck{width:18px;height:18px;border-radius:50%;border:2px solid var(--g300);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.65rem;}
.titem.on .tcheck{background:var(--blue);border-color:var(--blue);color:white;}
/* Tabla precios */
.tbl{width:100%;border-collapse:collapse;margin-bottom:13px;}
.tbl th{font-size:.68rem;font-weight:700;color:var(--g500);text-transform:uppercase;padding:5px 7px;border-bottom:1px solid var(--g200);text-align:left;}
.tbl td{padding:6px 7px;border-bottom:1px solid var(--g100);font-size:.78rem;}
.tbl td input{width:75px;background:var(--g50);border:1.5px solid var(--g200);border-radius:6px;padding:4px 7px;font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;text-align:right;color:var(--g900);}
.tbl td input:focus{outline:none;border-color:var(--blue);}
/* Colores */
.colors{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px;}
.csw{width:28px;height:28px;border-radius:7px;cursor:pointer;border:3px solid transparent;}
.csw.on{border-color:var(--g900);transform:scale(1.1);}
.upload-area{border:2px dashed var(--g300);border-radius:8px;padding:13px;text-align:center;cursor:pointer;margin-bottom:11px;}
.upload-area:active{border-color:var(--blue);background:var(--blue-l);}
.upload-prev{width:50px;height:50px;border-radius:8px;object-fit:cover;margin:0 auto 5px;display:block;}
/* Cfg menu — Ember 2.0 (21-abr-2026) */
.cfg-sec-row{display:flex;align-items:center;gap:12px;margin:22px 0 14px;padding-left:2px;}
.cfg-sec-row:first-child{margin-top:4px;}
.cfg-sec-ico{width:28px;height:28px;border-radius:6px;background:var(--ember-config-accent-bg);border:0.5px solid var(--ember-config-border-hi);display:flex;align-items:center;justify-content:center;color:var(--ember-config-accent);flex-shrink:0;}
.cfg-sec-ico svg{width:14px;height:14px;}
.cfg-sec-lbl{font-family:'Syne','Figtree',sans-serif;font-size:.7rem;font-weight:700;color:var(--ember-config-accent);letter-spacing:.28em;text-transform:uppercase;flex-shrink:0;}
.cfg-sec-line{flex:1;height:1px;background:var(--ember-config-section-line);}
.cfg-sec-count{font-family:'Syne','Figtree',sans-serif;font-size:.6rem;font-weight:500;color:var(--ember-config-text-sub);letter-spacing:.1em;text-transform:uppercase;flex-shrink:0;}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:10px;margin-bottom:4px;}
.cfg-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 6px 12px;border-radius:10px;cursor:pointer;border:0.5px solid var(--ember-config-border);background:var(--ember-config-surface);text-align:center;transition:all .16s ease;position:relative;min-height:78px;color:var(--ember-config-accent-muted);}
.cfg-tile:hover{border-color:var(--ember-config-border-hi);transform:translateY(-1px);box-shadow:0 0 0 1px var(--ember-config-accent-bg);color:var(--ember-config-accent);}
.cfg-tile:active{transform:translateY(0) scale(.97);}
.cfg-tile-ico{width:22px;height:22px;display:flex;align-items:center;justify-content:center;line-height:1;color:inherit;}
.cfg-tile-ico svg{width:22px;height:22px;stroke:currentColor;}
.cfg-tile-nom{font-size:.66rem;font-weight:500;color:var(--ember-config-text-main);line-height:1.25;}
.cfg-tile:hover .cfg-tile-nom{color:var(--ember-config-accent);}
.cfg-tile.cfg-soon{opacity:.42;cursor:not-allowed;}
.cfg-tile.cfg-soon:hover{border-color:var(--ember-config-border);transform:none;box-shadow:none;color:var(--ember-config-text-sub);}
.cfg-tile.cfg-soon:hover .cfg-tile-nom{color:var(--ember-config-text-sub);}
.cfg-tile.cfg-soon:active{transform:none;}
.cfg-prox{position:absolute;top:6px;right:6px;font-family:'Syne',sans-serif;font-size:.48rem;font-weight:500;background:var(--ember-config-border);color:var(--ember-config-text-sub);padding:2px 5px;border-radius:3px;letter-spacing:.15em;text-transform:uppercase;}
/* ── GESTIÓN ARTÍCULOS ── */
.art-page{position:fixed;inset:0;background:#f1f5f9;z-index:1100;display:flex;flex-direction:column;overflow:hidden;}
.art-page-head{background:white;border-bottom:1px solid var(--g200);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.art-page-head h2{font-size:1rem;font-weight:800;flex:1;}
.art-page-head .back-btn{background:var(--g100);border:none;border-radius:8px;padding:7px 12px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;color:var(--g700);}
.art-page-body{flex:1;overflow-y:auto;padding:12px;}
.art-cat-group{margin-bottom:16px;}
.art-cat-lbl{font-size:.68rem;font-weight:800;color:var(--g500);text-transform:uppercase;letter-spacing:.5px;padding:6px 10px;}
.art-row{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--g200);border-radius:10px;padding:10px 12px;margin-bottom:6px;cursor:pointer;}
.art-row:active{background:var(--blue-l);}
.art-ico{font-size:1.4rem;flex-shrink:0;width:32px;text-align:center;}
.art-info{flex:1;min-width:0;}
.art-nom{font-size:.86rem;font-weight:700;color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.art-meta{font-size:.7rem;color:var(--g400);margin-top:1px;}
.art-pre{font-size:.9rem;font-weight:800;color:var(--blue);flex-shrink:0;}
.art-inactive{opacity:.45;}
/* Ficha artículo */
.art-section{margin-bottom:16px;}
.art-section-lbl{font-size:.68rem;font-weight:800;color:var(--g500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.alg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.alg-btn{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1.5px solid var(--g200);border-radius:8px;background:white;cursor:pointer;font-size:.76rem;font-weight:600;color:var(--g700);font-family:'Inter',sans-serif;text-align:left;}
.alg-btn.on{border-color:var(--orange);background:#fff7ed;color:var(--orange);}
.alg-ico{font-size:1rem;flex-shrink:0;}
.zona-chip,.fmt-chip,.com-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1.5px solid var(--g200);border-radius:20px;background:white;cursor:pointer;font-size:.76rem;font-weight:600;color:var(--g700);margin:3px;}
.zona-chip.on{border-color:var(--blue);background:var(--blue-l);color:var(--blue);}
.com-chip{cursor:default;background:var(--g100);}
.com-chip .del{cursor:pointer;color:var(--g400);font-size:.8rem;margin-left:2px;}
.com-chip .del:hover{color:var(--red);}
.add-fmt-row,.add-com-row{display:flex;gap:6px;margin-top:8px;}
.add-fmt-row input,.add-com-row input{flex:1;padding:8px 10px;border:1.5px solid var(--g200);border-radius:8px;font-family:'Inter',sans-serif;font-size:.82rem;outline:none;}
.add-fmt-row input:focus,.add-com-row input:focus{border-color:var(--blue);}
/* Formatos/Zonas list */
.fz-row{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--g200);border-radius:10px;padding:10px 12px;margin-bottom:6px;}
.fz-nom{flex:1;font-size:.86rem;font-weight:700;}
.fz-sub{font-size:.72rem;color:var(--g400);}
.fz-del{background:none;border:none;font-size:1rem;cursor:pointer;color:var(--g400);padding:4px;}
/* legacy — keep for any remaining references */
.cfg-item{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1.5px solid var(--g200);border-radius:11px;margin-bottom:7px;cursor:pointer;}
.cfg-item:active{border-color:var(--blue);background:var(--blue-l);}
.cfg-ico{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.cfg-txt{flex:1;}
.cfg-tnom{font-size:.86rem;font-weight:700;}
.cfg-tdesc{font-size:.7rem;color:var(--g400);margin-top:1px;}
/* Frac */
.frac-tabs{display:flex;gap:5px;margin-bottom:13px;}
.ftab{flex:1;padding:8px;border:2px solid var(--g200);border-radius:9px;text-align:center;cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;font-size:.78rem;color:var(--g600);}
.ftab.on{background:var(--blue);border-color:var(--blue);color:white;}
.ftab-ico{font-size:1rem;display:block;margin-bottom:2px;}
.fpanel{display:none;}
.fpanel.on{display:block;}
.fbox{background:var(--g50);border-radius:9px;padding:13px;margin-bottom:13px;}
.fhint{text-align:center;font-size:.74rem;color:var(--g500);margin-bottom:7px;}
.fnum-row{display:flex;align-items:center;gap:14px;justify-content:center;padding:7px 0;}
.fnbtn{width:42px;height:42px;border-radius:50%;border:2px solid var(--g200);background:white;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--g700);}
.fnval{font-size:2rem;font-weight:900;min-width:46px;text-align:center;}
.fpp{text-align:center;font-size:.95rem;font-weight:800;color:var(--blue);margin-top:5px;}
.fresumen-item{display:flex;justify-content:space-between;padding:4px 0;font-size:.78rem;border-bottom:1px solid var(--g100);}
.fsubt{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;background:var(--blue-l);border-radius:8px;margin-bottom:13px;border:1px solid var(--blue-m);}
.flinea{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1.5px solid var(--g200);border-radius:8px;margin-bottom:5px;background:white;}
.flinea-nom{flex:1;font-size:.8rem;font-weight:600;}
.flinea-pre{font-size:.78rem;font-weight:700;color:var(--blue);min-width:48px;text-align:right;}
.fqctrl{display:flex;align-items:center;gap:7px;}
.fqbtn{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--g200);background:white;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--g700);}
.fqval{min-width:20px;text-align:center;font-size:.84rem;font-weight:800;}
/* -- Modal fraccionar -- overrides Ember Dark -- */
body.dark .flinea{background:var(--g100);border-color:var(--g300);}
body.dark .flinea-nom{color:var(--text,#F3EDE4);}
body.dark .flinea-pre{color:var(--orange);}
body.dark .fqbtn{background:var(--g100);border-color:var(--g300);color:var(--text,#F3EDE4);}
body.dark .fqbtn:active{background:var(--g200);}
body.dark .fqval{color:var(--text,#F3EDE4);}
body.dark .fresumen-item{border-bottom-color:var(--g300);color:var(--text,#F3EDE4);}
/* Buscar */
.buscar-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1.5px solid var(--g200);border-radius:8px;cursor:pointer;margin-bottom:4px;}
.buscar-item:active{background:var(--g50);}
/* Favoritos */
.fav-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1.5px solid var(--g200);border-radius:8px;cursor:pointer;margin-bottom:5px;}
.fav-item.on{border-color:var(--blue);background:var(--blue-l);}

#toast{
  position:fixed;bottom:calc(56px + env(safe-area-inset-bottom) + 12px);left:50%;
  transform:translateX(-50%) translateY(100px);
  background:#0f172a;color:#f1f5f9;border-radius:18px;
  padding:10px 20px;font-size:.82rem;font-weight:700;
  transition:transform .35s ease,opacity .35s ease,visibility .35s ease;
  z-index:99999;white-space:nowrap;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
  border:1.5px solid #334155;
  opacity:0;visibility:hidden;pointer-events:none;
}
#toast.on{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;}
@media(min-width:768px){#toast{bottom:140px;}}
.hidden{display:none!important;}

/* ── PANTALLA BARRA 9 TICKETS ── */
#pg-barra{
  position:fixed;top:var(--hdr);left:0;right:0;bottom:0;
  display:none;flex-direction:column;background:var(--g50);
}
.barra-top{
  background:white;border-bottom:1px solid var(--g200);
  padding:8px 12px;display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.barra-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;padding:10px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  max-height:calc(100vh - 120px);
}
.barra-ticket{
  background:white;border:2px solid var(--g200);border-radius:14px;
  display:flex;flex-direction:column;min-height:120px;cursor:pointer;
  overflow:hidden;transition:border-color .15s;
}
.barra-ticket.ocu{border-color:var(--orange);background:#fff7ed;}
.barra-ticket.sel{border-color:var(--blue);background:var(--blue-l);}
.bt-head{
  padding:8px 10px 4px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--g100);
}
.bt-num{font-size:.78rem;font-weight:800;color:var(--g700);}
.barra-ticket.ocu .bt-num{color:#92400e;}
.barra-ticket.sel .bt-num{color:var(--blue);}
.bt-total{font-size:.78rem;font-weight:800;color:var(--orange);}
.bt-lineas{flex:1;padding:6px 10px;font-size:.68rem;color:var(--g600);line-height:1.5;}
.bt-linea{display:flex;justify-content:space-between;gap:4px;}
.barra-foot{
  background:white;border-top:1px solid var(--g200);
  padding:8px 12px;display:flex;gap:6px;flex-shrink:0;
}
.barra-foot button{
  flex:1;padding:10px;border:none;border-radius:9px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:.8rem;cursor:pointer;
}
.bf-coc{background:var(--orange);color:white;}
.bf-cob{background:var(--blue);color:white;}
.bf-back{background:var(--g100);color:var(--g600);border:1.5px solid var(--g200);}


@media(max-width:767px){
  /* Ocultar canvas en móvil */
  #canvas{display:none !important;}
  #pg-plano{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;}

  /* Toolbar fijo dentro del plano */
  #mob-toolbar{
    position:sticky;top:0;z-index:20;
    background:white;border-bottom:1px solid var(--g200);
    padding:8px 10px 6px;
    box-shadow:0 2px 6px rgba(0,0,0,.07);
  }
  #mob-salas-row{
    display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;
  }
  #mob-salas-row .stab{
    padding:10px 16px;font-size:.82rem;font-weight:700;border-radius:10px;
  }
  #mob-salas-row::-webkit-scrollbar{display:none;}
  #mob-btns-row{display:flex;gap:6px;margin-top:6px;}
  .mpbtn{
    flex:1;padding:9px 6px;border-radius:9px;
    border:1.5px solid var(--g200);background:var(--g100);
    font-family:'Inter',sans-serif;font-size:.74rem;font-weight:700;
    color:var(--g600);cursor:pointer;
  }
  .mpbtn.ocu{background:#fff7ed;border-color:#fed7aa;color:var(--orange);}

  /* Lista de mesas */
  #mob-mesas{padding:10px 10px 80px;}
  .mob-card{
    display:flex;align-items:center;gap:12px;
    background:white;border:1.5px solid var(--g200);border-radius:14px;
    padding:14px 16px;margin-bottom:8px;cursor:pointer;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
  }
  .mob-card.ocu{border-color:#fed7aa;background:#fff7ed;}
  .mob-card-nom{font-size:.92rem;font-weight:800;color:var(--g800);flex:1;}
  .mob-card.ocu .mob-card-nom{color:#92400e;}
  .mob-card-sub{font-size:.72rem;color:var(--g400);}
  .mob-card.ocu .mob-card-sub{color:var(--orange);font-weight:600;}
  .mob-card-total{font-size:1rem;font-weight:900;color:var(--orange);}
  .mob-card-libre{font-size:.72rem;color:var(--g300);font-weight:600;}
}
@media(min-width:768px){
  #mob-toolbar{display:none;}
  #mob-mesas{display:none;}
  /* Barra filtros PC — debajo del header, encima del plano */
  #pc-filtros{
    position:fixed;top:var(--hdr);left:0;right:0;z-index:50;
    background:white;border-bottom:1px solid var(--g200);
    padding:6px 12px;display:flex;align-items:center;gap:6px;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
  }
  #pg-plano{top:calc(var(--hdr) + 41px);}
  .pcfbtn{
    padding:6px 13px;border-radius:8px;
    border:1.5px solid var(--g200);background:var(--g100);
    font-family:'Inter',sans-serif;font-size:.74rem;font-weight:700;
    color:var(--g600);cursor:pointer;white-space:nowrap;
  }
  .pcfbtn.on-ocu{background:#fff7ed;border-color:#fed7aa;color:var(--orange);}
  .pcfbtn.on-lib{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a;}
  .pcfbtn.on-todas{background:var(--blue-l);border-color:var(--blue-m);color:var(--blue);}
  .pcfbtn.guardar{background:var(--green);border-color:var(--green);color:white;display:none;}
  .pcfbtn.guardar.on{display:block;}
  #pc-filtros-sep{flex:1;}
}
@media(max-width:767px){
  #pc-filtros{display:none;}
}
@media(max-width:767px){
  .hdr-salas{display:none !important;}
  .hdr{display:none !important;}
  #pg-plano{top:0 !important;}
}

/* Modal numpad mesa */
#m-num-mesa{z-index:800;}
#num-mesa-display{
  background:var(--g50);border:2px solid var(--g200);border-radius:12px;
  padding:12px;text-align:center;font-size:2.2rem;font-weight:900;
  color:var(--g900);margin-bottom:12px;min-height:58px;letter-spacing:3px;
}
#num-mesa-display.vacio{color:var(--g300);font-size:.9rem;font-weight:600;padding-top:18px;}

/* MODAL LINEA ARTICULO */
.linea-modal-overlay{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:flex-end;padding-right:20px;background:rgba(0,0,0,.45);}
.linea-modal-overlay.on{display:flex;}
.linea-modal{width:260px;max-width:90vw;border-radius:16px;border:1.5px solid #334155;background:#1e293b;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.lm-handle{display:none;}
.lm-head{padding:14px 16px 10px;border-bottom:1px solid #334155;}
.lm-nom{font-size:.95rem;font-weight:800;color:#f1f5f9;}
.lm-pre{font-size:.84rem;color:#60a5fa;font-weight:700;}
.lm-qty-row{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 16px;}
.lm-qty-btn{width:38px;height:38px;border-radius:50%;border:2px solid #334155;background:#263045;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;color:#f1f5f9;}
.lm-qty-btn.red{border-color:var(--red);color:var(--red);}
.lm-qty-val{font-size:1.5rem;font-weight:900;min-width:40px;text-align:center;color:#f1f5f9;}
.lm-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px 12px;}
.lm-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:10px;border:1.5px solid #334155;background:#263045;cursor:pointer;font-family:'Inter',sans-serif;}
.lm-btn-ico{font-size:1.2rem;}
.lm-btn-lbl{font-size:.65rem;font-weight:700;color:#94a3b8;}
.lm-btn.blue{border-color:#3b82f6;background:#1e3a5f;}
.lm-btn.blue .lm-btn-lbl{color:#60a5fa;}
.lm-btn.red{border-color:#dc2626;background:#450a0a;}
.lm-btn.red .lm-btn-lbl{color:#f87171;}
.lm-btn.orange{border-color:#ea580c;background:#431407;}
.lm-btn.orange .lm-btn-lbl{color:#f97316;}
.lm-btn.purple{border-color:#7c3aed;background:#2e1065;}
.lm-btn.purple .lm-btn-lbl{color:#c084fc;}
.lm-input-row{padding:0 12px 10px;display:none;}
.lm-input-row.on{display:block;}
.lm-input-row input{width:100%;padding:9px 10px;border:1.5px solid #334155;border-radius:8px;font-size:.88rem;font-family:'Inter',sans-serif;outline:none;background:#263045;color:#f1f5f9;}
.lm-input-row label{font-size:.7rem;font-weight:700;color:#94a3b8;margin-bottom:4px;display:block;}
.lm-close-btn{width:100%;padding:11px;border:none;background:#334155;color:#cbd5e1;font-family:'Inter',sans-serif;font-weight:700;font-size:.84rem;cursor:pointer;}

/* ── SELECTOR FORMATO ── */
.fmt-sel-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72px;border-radius:12px;border:2px solid #334155;background:#263045;cursor:pointer;padding:12px 8px;font-family:'Inter',sans-serif;transition:all .12s;}
.fmt-sel-btn:active{background:#334155;transform:scale(.96);}
.fmt-sel-nom{font-size:.92rem;font-weight:800;color:#f1f5f9;}
.fmt-sel-precio{font-size:.82rem;color:#60a5fa;font-weight:700;margin-top:3px;}
/* Tabla formatos en ficha articulo */
.ae-fmt-tbl{width:100%;border-collapse:collapse;font-size:.78rem;}
.ae-fmt-tbl th{font-size:.62rem;font-weight:700;color:var(--g400);text-transform:uppercase;padding:6px 4px;border-bottom:1.5px solid var(--g200);text-align:center;}
.ae-fmt-tbl th:first-child{text-align:left;}
.ae-fmt-tbl td{padding:5px 3px;border-bottom:1px solid var(--g100);text-align:center;}
.ae-fmt-tbl td:first-child{text-align:left;font-weight:700;color:var(--g800);}
.ae-fmt-tbl input[type=number]{width:68px;padding:6px 4px;border:1.5px solid var(--g200);border-radius:6px;font-family:Inter,sans-serif;font-size:.8rem;text-align:center;outline:none;background:var(--bg-input,white);color:var(--g900);}
.ae-fmt-tbl input:focus{border-color:var(--blue);}
.ae-fmt-del{width:26px;height:26px;border-radius:6px;border:none;background:var(--red-l,#fef2f2);color:var(--red);cursor:pointer;font-size:.78rem;font-weight:700;}
body.dark .ae-fmt-tbl th{color:#64748b;border-color:#334155;}
body.dark .ae-fmt-tbl td{border-color:#334155;}
body.dark .ae-fmt-tbl td:first-child{color:#f1f5f9;}
body.dark .ae-fmt-tbl input[type=number]{background:#263045;color:#f1f5f9;border-color:#334155;}
body.dark .ae-fmt-del{background:#450a0a;color:#f87171;}

/* ── FORMATOS LISTA ── */
.fmt-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--g200);border-radius:10px;margin-bottom:6px;background:var(--g50);}
.fmt-ord{width:46px;padding:6px 4px;border:1.5px solid var(--g200);border-radius:6px;font-family:Inter,sans-serif;font-size:.8rem;font-weight:700;text-align:center;outline:none;background:white;color:var(--g900);}
.fmt-nom{flex:1;font-size:.92rem;font-weight:700;color:var(--g800);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fmt-nom-edit{flex:1;padding:6px 10px;border:2px solid var(--blue);border-radius:7px;font-family:Inter,sans-serif;font-size:.92rem;font-weight:700;outline:none;background:white;color:var(--g900);min-width:0;}
.fmt-toggle-wrap{position:relative;width:42px;height:22px;cursor:pointer;flex-shrink:0;display:block;}
.fmt-toggle-wrap input{display:none;}
.fmt-toggle-sld{position:absolute;inset:0;border-radius:11px;transition:.2s;}
.fmt-toggle-dot{position:absolute;width:16px;height:16px;background:white;border-radius:50%;top:3px;transition:.2s;}
.fmt-btn-edit{background:var(--g100);border:1.5px solid var(--g200);border-radius:7px;padding:5px 10px;cursor:pointer;font-size:.82rem;color:var(--g700);font-family:Inter,sans-serif;}
.fmt-btn-del{background:transparent;border:none;color:#ef4444;font-size:1.1rem;cursor:pointer;padding:4px 8px;font-weight:700;}
body.dark .fmt-row{background:#1e293b;border-color:#334155;}
body.dark .fmt-ord{background:#263045;color:#f1f5f9;border-color:#334155;}
body.dark .fmt-nom{color:#f1f5f9;}
body.dark .fmt-nom-edit{background:#263045;color:#f1f5f9;border-color:#3b82f6;}
body.dark .fmt-btn-edit{background:#263045;border-color:#334155;color:#cbd5e1;}
body.dark .fmt-btn-del{color:#f87171;}

@media(min-width:768px){.col-ped-top-row .col-ped-label span{display:none !important;}}

/* DINERO RAPIDO */


/* Menu mesa dark */
/* ── EMBER: Menu mesa (long-press) ── */
body.dark .menu-sheet{background:#131210;border-top:1px solid rgba(255,200,140,0.10);}
body.dark .mhandle{background:#3A342A;}
body.dark .mtitle{color:#F3EDE4;}
body.dark .msub{color:#8A7F6E;}
body.dark .mbtn{color:#F3EDE4;}
body.dark .mbtn:active{background:rgba(245,104,32,0.10);}
body.dark .mbtn-ico{background:rgba(255,200,140,0.06) !important;}
body.dark .mbtn-sub{color:#8A7F6E;}
body.dark .mdiv{background:rgba(255,200,140,0.08);}
body.dark .mcancel{background:#1A1814;color:#8A7F6E;border:1px solid rgba(255,200,140,0.10);}
/* ── EMBER: Menu mesa light ── */
body:not(.dark) .menu-sheet{background:#FFFDF9;border-top:1px solid rgba(120,80,40,0.10);}
body:not(.dark) .mhandle{background:rgba(120,80,40,0.15);}
body:not(.dark) .mtitle{color:#1A1410;}
body:not(.dark) .msub{color:#8A7060;}
body:not(.dark) .mbtn{color:#1A1410;}
body:not(.dark) .mbtn:active{background:rgba(245,104,32,0.08);}
body:not(.dark) .mbtn-ico{background:rgba(120,80,40,0.06) !important;}
body:not(.dark) .mbtn-sub{color:#8A7060;}
body:not(.dark) .mdiv{background:rgba(120,80,40,0.08);}
body:not(.dark) .mcancel{background:#F0EBE3;color:#6B5444;border:1px solid rgba(120,80,40,0.12);}
body.dark .mhandle{background:#334155;}



/* ── Modales con inputs: fix teclado virtual Android ── */
@media(max-width:1024px){
  #m-tel.mov,#m-cli-cobro.mov,#m-pedidos-tel.mov,#m-cli-tpv.mov{
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding:0 !important;
  }
  #m-tel>.modal,#m-cli-cobro>.modal,#m-pedidos-tel>.modal,#m-cli-tpv>.modal{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;
    max-height:95vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    border-radius:0 0 12px 12px !important;
    transform:none !important;
    margin:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  #m-tel .modal-body,#m-cli-cobro .modal-body,#m-pedidos-tel .modal-body,#m-cli-tpv .modal-body{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    max-height:calc(95vh - 60px);
    padding:10px 12px !important;
  }
  #m-tel .modal-head,#m-cli-cobro .modal-head,#m-pedidos-tel .modal-head,#m-cli-tpv .modal-head{
    padding:8px 14px !important;
    position:sticky;top:0;z-index:1;
  }
}

/* ======================================================
   EMBER DARK — Aripos 2.0
   Paleta: carbón cálido + brasa naranja #F56820
   Para revertir: cp tpv.css.bak_ember tpv.css
   ====================================================== */

/* ── Tipografía global ── */
body, button, input, select, textarea {
  font-family: 'Figtree', 'Inter', sans-serif;
}
.hdr-logo, .ped-top-logo, .logo {
  font-family: 'Syne', 'Inter', sans-serif;
  letter-spacing: -0.5px;
}
.total-amt, .total-amt-top, .mob-total-amt {
  font-family: 'Syne', 'Inter', sans-serif;
  font-weight: 900;
}

/* ── Tokens de color ── */
body.dark {
  --g50:    #0D0C0A;
  --g100:   #131210;
  --g200:   #1A1814;
  --g300:   #232018;
  --g400:   #4A4438;
  --g500:   #6B6055;
  --g600:   #8A7F6E;
  --g700:   #B8AD9E;
  --g800:   #D4C9BA;
  --g900:   #F3EDE4;
  --blue:   #F56820;
  --blue-l: rgba(245,104,32,0.12);
  --blue-m: rgba(245,104,32,0.25);
  --blue-d: #FF9248;
  --orange: #F56820;
  --red-l:  #2A0A0A;
  --bg-app:    #0D0C0A;
  --bg-panel:  #131210;
  --bg-card:   #1A1814;
  --bg-input:  #1A1814;
  --border-c:  rgba(255,200,140,0.10);
  --text-main: #F3EDE4;
  --text-sub:  #8A7F6E;
}

/* ── Base ── */
body.dark { background: #0D0C0A !important; color: #F3EDE4; }
body.dark #loading { background: #0D0C0A; }
body.dark .logo { color: #F56820 !important; }
body.dark .logo span { color: #232018; }

/* ── Header ── */
body.dark .hdr {
  background: #131210;
  border-color: rgba(255,200,140,0.08);
  box-shadow: 0 1px 0 rgba(255,200,140,0.05);
}
body.dark .hdr-logo { color: #F3EDE4 !important; }
body.dark .stab { border-color: rgba(255,200,140,0.10); color: #6B6055; background: transparent; }
body.dark .stab.on { background: #F56820 !important; border-color: #F56820 !important; color: white !important; }
body.dark .stab-add { border-color: rgba(255,200,140,0.08); color: #4A4438; }
body.dark .hdr-btn,
body.dark .hdr-btns button { background: #1A1814; border-color: rgba(255,200,140,0.10); color: #F3EDE4; }

/* ── Plano de mesas ── */
body.dark #pg-plano { background: #0D0C0A !important; }
body.dark #pg-plano::before { display: none; }
body.dark .mnom { color: #4A4438; }
body.dark .mw.ocu .mnom { color: rgba(255,150,80,0.85); }
body.dark .mw.ocu .msvg {
  filter: drop-shadow(0 4px 16px rgba(245,104,32,0.50));
  animation: pulseEmber 2.5s ease-in-out infinite;
}
@keyframes pulseEmber {
  0%,100% { filter: drop-shadow(0 4px 12px rgba(245,104,32,0.45)); }
  50%      { filter: drop-shadow(0 8px 28px rgba(245,104,32,0.75)); }
}
body.dark .mw:not(.ocu):hover .msvg {
  filter: drop-shadow(0 6px 14px rgba(245,104,32,0.20));
  transform: translateY(-2px) scale(1.04);
}
body.dark .mbadge {
  background: linear-gradient(135deg, #F56820, #C2410C);
  box-shadow: 0 2px 8px rgba(245,104,32,0.45);
}
body.dark .mitems-badge { background: #232018; color: #8A7F6E; }
body.dark .cst-badge.cst1 { background: #F56820; }
body.dark .cst-badge.cst2 { background: #16a34a; }

/* ── Filtros PC ── */
body.dark #pc-filtros { background: #131210 !important; border-color: rgba(255,200,140,0.08) !important; box-shadow: none !important; }
body.dark .pcfbtn { background: #1A1814 !important; border-color: rgba(255,200,140,0.10) !important; color: #6B6055 !important; }
body.dark .pcfbtn.on-ocu   { background: rgba(245,104,32,0.15) !important; border-color: rgba(245,104,32,0.40) !important; color: #F56820 !important; }
body.dark .pcfbtn.on-lib   { background: rgba(22,163,74,0.12)  !important; border-color: rgba(22,163,74,0.35)  !important; color: #4ade80 !important; }
body.dark .pcfbtn.on-todas { background: rgba(245,104,32,0.10) !important; border-color: rgba(245,104,32,0.25) !important; color: #F56820 !important; }

/* ── Página pedido ── */
body.dark #pg-ped { background: #0D0C0A; }
body.dark .ped-top { background: #131210; border-color: rgba(255,200,140,0.10); }
body.dark .ped-title { color: #F3EDE4; }
body.dark .ped-sala { color: #6B6055; }
body.dark .ped-top-logo { color: #F3EDE4 !important; }
body.dark .ped-top-logo span { color: #4A4438; }
body.dark .total-amt-top { color: #F3EDE4; }
body.dark .btn-back { background: #1A1814; border-color: rgba(255,200,140,0.10); color: #B8AD9E; }
body.dark .btn-top-sub { background: #232018 !important; border-color: rgba(255,200,140,0.12) !important; color: #F3EDE4 !important; }
body.dark .btn-top-coc { background: #F56820 !important; }
body.dark .btn-top-cob { background: #F56820 !important; border-color: #F56820 !important; }

/* ── Categorías ── */
body.dark .cats-bar { background: #131210; border-color: rgba(255,200,140,0.10); }
body.dark .cat-btn {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.12) !important;
  color: #8A7F6E !important;
  box-shadow: none !important;
}
body.dark .cat-btn.on {
  background: rgba(245,104,32,0.18) !important;
  border-color: rgba(245,104,32,0.55) !important;
  color: #F56820 !important;
}

/* ── Grid productos ── */
body.dark .col-prods, body.dark .prods-grid { background: #0D0C0A; }
body.dark .prod-btn { background: #1A1814; border-color: rgba(255,200,140,0.08); }
body.dark .prod-btn:active { border-color: rgba(245,104,32,0.40); }
body.dark .prod-btn.fav { background: #160E08; border-color: rgba(255,200,140,0.08); }
body.dark .prod-btn.in-order { border-color: rgba(245,104,32,0.40) !important; box-shadow: 0 0 0 1.5px rgba(245,104,32,0.25); }
body.dark .prod-img { background: #131210; }
body.dark .prod-nom-wrap { background: rgba(13,12,10,0.94); border-color: rgba(255,200,140,0.08); }
body.dark .prod-nom { color: #F3EDE4; }
body.dark .prod-badge { background: #F56820 !important; }

/* ── Columna pedido ── */
body.dark .col-ped { background: #0D0C0A !important; border-color: rgba(255,200,140,0.08) !important; }
body.dark .col-ped-top { background: #131210 !important; border-color: rgba(255,200,140,0.08) !important; }
body.dark .col-ped-label { color: #4A4438 !important; }
body.dark .col-ped-count { color: #8A7F6E !important; }
body.dark .ped-empty { color: #4A4438 !important; }
body.dark .lineas-list { background: #0D0C0A; }
body.dark .linea { background: transparent; border-color: rgba(255,200,140,0.07); }
body.dark .linea:active { background: #131210 !important; }
body.dark .linea.sel { background: rgba(245,104,32,0.10) !important; border-color: rgba(245,104,32,0.35) !important; }
body.dark .lnom { color: #F3EDE4 !important; }
body.dark .lpre { color: #F56820 !important; }
body.dark .lqty { background: #F56820 !important; }
body.dark .ltag { background: #232018; color: #8A7F6E; }
body.dark .ltag.comp { background: rgba(245,104,32,0.15); color: #F56820; }
body.dark .ldel { background: #2A0A0A; color: #f87171; border: none; }

/* ── Total + numpad ── */
body.dark .ped-foot { border-color: rgba(255,200,140,0.08); }
body.dark .total-line { color: #F3EDE4; }
body.dark .total-lbl { color: #4A4438 !important; }
body.dark .total-amt { color: #F3EDE4 !important; }
body.dark .btn-sub { background: #232018 !important; }
body.dark .btn-coc { background: #F56820 !important; }
body.dark .btn-cob { background: #F56820 !important; }
body.dark .np-wrap { background: #131210 !important; border-color: rgba(255,200,140,0.08) !important; }
body.dark .np-hint { background: #0D0C0A; border-color: rgba(255,200,140,0.08); color: #4A4438; }
body.dark .np-hint.on { background: rgba(245,104,32,0.10); border-color: rgba(245,104,32,0.35); color: #F56820; }
body.dark .npb { background: #1A1814 !important; border-color: rgba(255,200,140,0.08) !important; color: #F3EDE4 !important; }
body.dark .npb:active { background: #232018 !important; }
body.dark .npb.del { background: #2A0A0A !important; border-color: rgba(220,38,38,0.30) !important; color: #f87171 !important; }
body.dark .qty-del { background: #2A0A0A !important; border-color: rgba(220,38,38,0.30) !important; color: #f87171 !important; }
body.dark .qty-ok { background: #F56820 !important; }

/* ── Hios bar ── */
body.dark .hios-btn { background: #1A1814; color: #6B6055; }
body.dark .hios-btn:active { background: #232018; }
body.dark .hios-btn.activo { background: #F56820; color: white; }
body.dark .hios-sep { background: rgba(255,200,140,0.06); }
body.dark .hios-orden-num { background: #131210; border-color: rgba(255,200,140,0.10); color: #F3EDE4; }
body.dark .hios-orden-num.on { background: #F56820; border-color: #F56820; color: white; }

body.dark .hios-btn-cerrar { background: #dc2626 !important; }

/* ── Modales ── */
body.dark .mov { background: rgba(0,0,0,0.75); }
body.dark .modal { background: #131210; border: 1px solid rgba(255,200,140,0.10); }
body.dark .modal h3 { color: #F3EDE4; }
body.dark .modal-sub { color: #6B6055; }
body.dark .modal-close { background: #1A1814; color: #8A7F6E; border: none; }
body.dark .btn-cancel { background: #1A1814; border-color: rgba(255,200,140,0.10); color: #B8AD9E; }
body.dark .btn-ok { background: #F56820 !important; }
body.dark .mi { background: #1A1814; border-color: rgba(255,200,140,0.10); color: #F3EDE4; }
body.dark .mi:focus { background: #1A1814; border-color: #F56820; }
body.dark .ml { color: #8A7F6E; }
body.dark select.mi { background: #1A1814; color: #F3EDE4; }

/* ── Formas de pago ── */
body.dark .fp { background: #1A1814; border-color: rgba(255,200,140,0.10); }
body.dark .fp.on { border-color: #F56820; background: rgba(245,104,32,0.12); box-shadow: 0 0 0 3px rgba(245,104,32,0.20); }
body.dark .fp-nom { color: #B8AD9E; }
body.dark .fp.on .fp-nom { color: #F56820; }

/* ── Menú mesa ── */
body.dark .menu-sheet { background: #131210; }
body.dark .mtitle { color: #F3EDE4; }
body.dark .msub { color: #6B6055; }
body.dark .mbtn { color: #F3EDE4; border: none; background: transparent; }
body.dark .mbtn:active { background: #1A1814; }
body.dark .mbtn-sub { color: #6B6055; }
body.dark .mdiv { background: rgba(255,200,140,0.06); }
body.dark .mhandle { background: rgba(255,200,140,0.10); }
body.dark .mcancel { background: #1A1814; color: #8A7F6E; border: none; }

/* ── Inputs globales ── */
body.dark input,
body.dark select,
body.dark textarea {
  background: #1A1814 !important;
  color: #F3EDE4 !important;
  border-color: rgba(255,200,140,0.12) !important;
}
body.dark input::placeholder,
body.dark textarea::placeholder { color: #4A4438 !important; }
body.dark label { color: #8A7F6E; }

/* ── Móvil ── */
body.dark #mob-toolbar { background: #131210 !important; border-color: rgba(255,200,140,0.08) !important; }
body.dark .mpbtn { background: #1A1814 !important; border-color: rgba(255,200,140,0.08) !important; color: #6B6055 !important; }
body.dark .mpbtn.ocu { background: rgba(245,104,32,0.12) !important; border-color: rgba(245,104,32,0.35) !important; color: #F56820 !important; }
body.dark #mob-mesas { background: #0D0C0A; }
body.dark .mob-card { background: #131210 !important; border-color: rgba(255,200,140,0.08) !important; box-shadow: none !important; }
body.dark .mob-card.ocu { background: rgba(245,104,32,0.08) !important; border-color: rgba(245,104,32,0.35) !important; }
body.dark .mob-card-nom { color: #F3EDE4 !important; }
body.dark .mob-card.ocu .mob-card-nom { color: rgba(255,150,80,0.90) !important; }
body.dark .mob-card-sub { color: #4A4438 !important; }
body.dark .mob-card.ocu .mob-card-sub { color: #F56820 !important; }
body.dark .mob-card-total { color: #F56820 !important; }
body.dark .mob-card-libre { color: #232018 !important; }
body.dark .mob-btn-cob, body.dark .mob-btn-cob2 { background: linear-gradient(145deg, #F56820, #FF9248) !important; color: white !important; border: none !important; }
body.dark .mob-btn-coc, body.dark .mob-btn-coc2,
body.dark .mob-btn-aripay-top, body.dark .mob-btn-qr2, body.dark .mob-btn-aripay {
  background: rgba(245,104,32,0.12) !important;
  border: 1.5px solid rgba(245,104,32,0.30) !important;
  color: #F56820 !important;
}
body.dark .mob-ped-content { background: #131210; }
body.dark .mob-ped-handle { background: rgba(255,200,140,0.10); }
body.dark .mob-ped-header { background: #131210; border-color: rgba(255,200,140,0.08); }
body.dark .mob-ped-title { color: #F3EDE4; }
body.dark .mob-ped-count { color: #6B6055; }
body.dark .mob-ped-close { background: #1A1814; color: #8A7F6E; }
body.dark .mob-ped-foot { background: #131210; border-color: rgba(255,200,140,0.08); }
body.dark .col-ped-total-mob { background: #131210 !important; border-color: rgba(255,200,140,0.08) !important; color: #F3EDE4 !important; }
body.dark .col-ped-top-row { background: #131210 !important; border-color: rgba(255,200,140,0.08) !important; }
body.dark .col-ped-mob-btns { background: #131210 !important; border-color: rgba(255,200,140,0.08) !important; }
body.dark #mob-salas-row .stab { background: #1A1814; border-color: rgba(255,200,140,0.10); color: #6B6055; }
body.dark #mob-salas-row .stab.on { background: #F56820 !important; border-color: #F56820 !important; color: white !important; }

/* ── Configuración ── */
/* Overrides de Ember dark para #m-cfg ahora viven en los tokens --ember-config-*.
   Solo conservamos overrides !important para reglas inline legacy del header. */
body.dark #m-cfg { background: var(--ember-config-bg) !important; }
body.dark #m-cfg > div { background: var(--ember-config-bg) !important; }
body.dark #m-cfg > div > div:first-child { background: var(--ember-config-surface) !important; border-color: var(--ember-config-border) !important; }
body.dark #m-cfg #cfg-close { background: var(--ember-config-surface) !important; border-color: var(--ember-config-border) !important; color: var(--ember-config-text-main) !important; }
body.dark #m-cfg > div > div:last-child { background: var(--ember-config-bg) !important; }

/* ── Artículos ── */
body.dark .art-page { background: #0D0C0A; }
body.dark .art-page-head { background: #131210; border-color: rgba(255,200,140,0.08); }
body.dark .art-page-head h2 { color: #F3EDE4; }
body.dark .back-btn { background: #1A1814 !important; color: #F3EDE4 !important; border: none; }
body.dark .art-cat-lbl { color: #4A4438; }
body.dark .art-row { background: #131210; border-color: rgba(255,200,140,0.08); }
body.dark .art-nom { color: #F3EDE4; }
body.dark .art-meta { color: #4A4438; }
body.dark .art-pre { color: #F56820; }

/* ── Modal info producto ── */
body.dark #m-prod-info > div { background: #131210 !important; }
body.dark #pinfo-nom { color: #F3EDE4 !important; }
body.dark #pinfo-pre { color: #F56820 !important; }
body.dark #pinfo-desc { color: #8A7F6E !important; }
body.dark #m-prod-info > div > div:first-child { background: #1A1814 !important; }
body.dark #m-prod-info button { background: #1A1814 !important; color: #8A7F6E !important; }

/* ── Modal línea artículo ── */
body.dark .linea-modal { background: #131210; }
body.dark .lm-handle { background: rgba(255,200,140,0.10); }
body.dark .lm-head { border-color: rgba(255,200,140,0.08); }
body.dark .lm-nom { color: #F3EDE4; }
body.dark .lm-pre { color: #F56820; }
body.dark .lm-qty-btn { background: #1A1814; border-color: rgba(255,200,140,0.12); color: #F3EDE4; }
body.dark .lm-qty-val { color: #F3EDE4; }
body.dark .lm-btn { background: #1A1814; border-color: rgba(255,200,140,0.10); }
body.dark .lm-btn.blue { background: rgba(245,104,32,0.12) !important; border-color: rgba(245,104,32,0.35) !important; }
body.dark .lm-btn.blue .lm-btn-lbl { color: #F56820 !important; }
body.dark .lm-close-btn { background: #1A1814; color: #8A7F6E; }

/* ── Fraccionar ── */
body.dark .ftab.on { background: #F56820 !important; border-color: #F56820 !important; }

/* ── Toast ── */
body.dark #toast { background: #131210; border-color: rgba(255,200,140,0.12); color: #F3EDE4; }

/* ── Activación ── */
body.dark #pg-activacion { background: #0D0C0A; }
body.dark .act-card { background: #131210; border-color: rgba(255,200,140,0.10); }

/* ── Scrollbar ── */
body.dark ::-webkit-scrollbar { width: 3px; height: 3px; }
body.dark ::-webkit-scrollbar-track { background: transparent; }
body.dark ::-webkit-scrollbar-thumb { background: #232018; border-radius: 2px; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #4A4438; }

/* ── EMBER: Cobrar dominante ── */

body.dark .foot-grid {
  grid-template-columns: 1fr !important;
}
body.dark .btn-coc {
  background: rgba(245,104,32,0.15) !important;
  border: 1.5px solid rgba(245,104,32,0.35) !important;
  color: #F56820 !important;
  border-radius: 10px;
}
body.dark .btn-cob {
  background: linear-gradient(145deg, #F56820, #FF9248) !important;
  border: none !important;
  color: white !important;
  height: 52px !important;
  border-radius: 12px !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
  font-family: 'Syne', 'Inter', sans-serif !important;
  box-shadow: 0 4px 20px rgba(245,104,32,0.45), 0 0 0 1px rgba(245,104,32,0.25) !important;
  animation: cobrarGlow 3s ease-in-out infinite !important;
  letter-spacing: 0.3px;
}
body.dark .btn-cob:active {
  transform: scale(0.98) !important;
  box-shadow: 0 2px 10px rgba(245,104,32,0.35) !important;
  animation: none !important;
}
@keyframes cobrarGlow {
  0%,100% { box-shadow: 0 4px 20px rgba(245,104,32,0.42), 0 0 0 1px rgba(245,104,32,0.22); }
  50%      { box-shadow: 0 6px 28px rgba(245,104,32,0.62), 0 0 0 1px rgba(245,104,32,0.38); }
}

body.dark .btn-top-cob {
  background: linear-gradient(145deg, #F56820, #FF9248) !important;
  border: none !important;
  color: white !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 12px rgba(245,104,32,0.40) !important;
}

body.dark .mw:not(.ocu) .msvg svg rect,
body.dark .mw:not(.ocu) .msvg svg circle {
  filter: none;
}

/* ── EMBER: Panel pedido — carbón cálido, no negro ── */
body.dark .col-ped        { background: #131210 !important; }
body.dark .lineas-list    { background: #131210 !important; }
body.dark .ped-foot       { background: #131210 !important; }
body.dark .np-wrap        { background: #0D0C0A !important; }
body.dark #pg-ped         { background: #0D0C0A !important; }
body.dark .ped-main       { background: #0D0C0A !important; }
body.dark .col-prods,
body.dark .prods-grid     { background: #0D0C0A !important; }
/* ── EMBER: Hios-bar carbón cálido + Cobrar dominante ── */
body.dark .hios-bar {
  background: #131210 !important;
  border-color: rgba(255,200,140,0.08) !important;
}
body.dark .hios-btn {
  background: #1A1814 !important;
  border: 1px solid rgba(255,200,140,0.08) !important;
  color: #8A7F6E !important;
  border-radius: 9px !important;
}
body.dark .hios-btn:active { background: #232018 !important; }
body.dark .hios-btn.activo { background: rgba(245,104,32,0.20) !important; color: #F56820 !important; border-color: rgba(245,104,32,0.35) !important; }
body.dark .hios-sep { background: rgba(255,200,140,0.06) !important; }
body.dark .hios-orden-num { background: #1A1814 !important; border-color: rgba(255,200,140,0.10) !important; color: #8A7F6E !important; }
body.dark .hios-orden-num.on { background: rgba(245,104,32,0.20) !important; border-color: rgba(245,104,32,0.40) !important; color: #F56820 !important; }

body.dark .btn-top-cob {
  background: linear-gradient(145deg, #F56820, #FF9248) !important;
  border: none !important;
  color: white !important;
  font-weight: 800 !important;
  font-family: 'Syne', 'Inter', sans-serif !important;
  padding: 9px 22px !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 16px rgba(245,104,32,0.45), 0 0 0 1px rgba(245,104,32,0.22) !important;
  animation: cobrarGlow 3s ease-in-out infinite !important;
}
body.dark .btn-top-coc {
  background: rgba(245,104,32,0.12) !important;
  border: 1.5px solid rgba(245,104,32,0.30) !important;
  color: #F56820 !important;
}
/* ── EMBER: Total prominente + AriPay naranja ── */
body.dark .np-wrap > div:nth-child(2) {
  border-bottom: 1px solid rgba(255,200,140,0.08) !important;
  padding: 10px 4px 12px !important;
  margin-bottom: 8px !important;
}
body.dark .np-wrap > div:nth-child(2) > span:first-child {
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  color: #4A4438 !important;
  text-transform: uppercase !important;
}
body.dark #total-amt {
  font-family: 'Syne', 'Inter', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: #F3EDE4 !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
}
body.dark #btn-monei-qr {
  background: rgba(245,104,32,0.18) !important;
  color: #F56820 !important;
  border: 1.5px solid rgba(245,104,32,0.40) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: .75rem !important;
  padding: 5px 11px !important;
}

/* ── EMBER: Total fix + layout panel derecho ── */
body.dark #total-amt {
  font-size: 1.6rem !important;
  letter-spacing: -1px !important;
}
body.dark #btn-monei-qr {
  display: none !important;
}
body.dark .ped-foot { padding-bottom: 8px !important; }
body.dark .foot-grid {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}
body.dark .btn-cob {
  grid-column: 1 !important;
  height: 54px !important;
  border-radius: 13px !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  font-family: 'Syne','Inter',sans-serif !important;
  letter-spacing: .3px !important;
  background: linear-gradient(145deg,#F56820,#FF9248) !important;
  box-shadow: 0 4px 20px rgba(245,104,32,.45), 0 0 0 1px rgba(245,104,32,.22) !important;
  animation: cobrarGlow 3s ease-in-out infinite !important;
}
body.dark .btn-coc {
  background: rgba(245,104,32,.12) !important;
  border: 1.5px solid rgba(245,104,32,.30) !important;
  color: #F56820 !important;
  height: 38px !important;
  border-radius: 10px !important;
}
body.dark #btn-monei-qr-top {
  background: rgba(245,104,32,.15) !important;
  border: 1.5px solid rgba(245,104,32,.35) !important;
  color: #F56820 !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
}
/* ── EMBER: Cobrar abajo + fondo cálido panel ── */

/* Ocultar Cobrar del top bar en dark — lo tenemos abajo */
body.dark #btn-cob-top { display: none !important; }

/* Panel pedido — carbón cálido, no negro */
body.dark .col-ped,
body.dark .lineas-list,
body.dark .np-wrap,
body.dark .ped-foot { background: #131210 !important; }

/* Asegurar que ped-foot y foot-grid son siempre visibles */
body.dark .ped-foot {
  display: block !important;
  padding: 8px 10px 12px !important;
  border-top: 1px solid rgba(255,200,140,0.08) !important;
}
body.dark .foot-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}
body.dark .btn-sub { display: none !important; }
body.dark .btn-cob {
  display: block !important;
  width: 100% !important;
  height: 54px !important;
  border-radius: 13px !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  font-family: 'Syne','Inter',sans-serif !important;
  background: linear-gradient(145deg,#F56820,#FF9248) !important;
  border: none !important;
  color: white !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(245,104,32,.45), 0 0 0 1px rgba(245,104,32,.22) !important;
  animation: cobrarGlow 3s ease-in-out infinite !important;
}
body.dark .btn-coc {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(245,104,32,.12) !important;
  border: 1.5px solid rgba(245,104,32,.30) !important;
  color: #F56820 !important;
  cursor: pointer !important;
}
/* ── EMBER: Restaurar Cobrar top bar ── */
body.dark #btn-cob-top {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 24px !important;
  height: 40px !important;
  background: linear-gradient(145deg, #F56820, #FF9248) !important;
  border: none !important;
  border-radius: 11px !important;
  color: white !important;
  font-weight: 800 !important;
  font-family: 'Syne','Inter',sans-serif !important;
  font-size: .88rem !important;
  letter-spacing: .3px !important;
  box-shadow: 0 3px 16px rgba(245,104,32,.45), 0 0 0 1px rgba(245,104,32,.22) !important;
  animation: cobrarGlow 3s ease-in-out infinite !important;
  cursor: pointer !important;
}
/* ── EMBER: Solo Cobrar abajo, Cocina solo arriba ── */
body.dark #ped-foot-desk .btn-coc { display: none !important; }
body.dark #ped-foot-desk .btn-sub { display: none !important; }
body.dark #ped-foot-desk { padding: 6px 10px 10px !important; }
body.dark #ped-foot-desk .foot-grid { grid-template-columns: 1fr !important; }
body.dark #btn-cob-top { display: none !important; }
/* ── Cobrar — dentro np-wrap, mismo recuadro ── */
body.dark #btn-cob-desk {
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  border-radius: 11px !important;
  border: none !important;
  background: linear-gradient(145deg, #F56820, #FF9248) !important;
  color: white !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  font-family: 'Syne','Inter',sans-serif !important;
  letter-spacing: .3px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(245,104,32,.45), 0 0 0 1px rgba(245,104,32,.22) !important;
  animation: cobrarGlow 3s ease-in-out infinite !important;
}
/* ── Cobrar desk: oculto en móvil ── */
@media(max-width:767px){
  #btn-cob-desk { display: none !important; }
}
/* ── EMBER: Tarjetas artículo — foto grande + i ── */
body.dark .prod-wrap {
  aspect-ratio: unset !important;
  height: auto !important;
}
body.dark .prod-btn {
  background: #1A1814 !important;
  border: 1px solid rgba(255,200,140,0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.30) !important;
  transition: transform 0.14s, box-shadow 0.14s !important;
}
body.dark .prod-btn:active {
  transform: scale(0.96) !important;
  border-color: rgba(245,104,32,0.40) !important;
  box-shadow: 0 0 0 2px rgba(245,104,32,0.30) !important;
}
body.dark .prod-btn.in-order {
  border-color: rgba(245,104,32,0.45) !important;
  box-shadow: 0 0 0 1.5px rgba(245,104,32,0.28) !important;
}
body.dark .prod-img {
  width: 100% !important;
  height: 96px !important;
  flex-shrink: 0 !important;
  background: #131210 !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.dark .prod-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* prod-img gradient removed */
body.dark .prod-img-ico {
  font-size: 2.4rem !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}
body.dark .prod-pre-badge {
  position: absolute !important;
  bottom: 7px !important;
  right: 7px !important;
  top: unset !important;
  left: unset !important;
  background: rgba(13,12,10,0.45) !important;
  color: #F56820 !important;
  border-radius: 7px !important;
  padding: 3px 8px !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  
  border: 1px solid rgba(255,255,255,0.08) !important;
  z-index: 2 !important;
}
body.dark .prod-pre-orig {
  top: 6px !important;
  left: 6px !important;
  background: rgba(245,104,32,0.20) !important;
  color: #F56820 !important;
  border-radius: 6px !important;
  font-size: .62rem !important;
  z-index: 2 !important;
}
body.dark .prod-nom-wrap {
  padding: 8px 10px 9px !important;
  background: transparent !important;
  border-top: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}
body.dark .prod-nom {
  font-size: .75rem !important;
  font-weight: 500 !important;
  color: #F3EDE4 !important;
  line-height: 1.3 !important;
  flex: 1 !important;
  text-align: left !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.dark .prod-info-btn {
  position: static !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  background: rgba(245,104,32,0.15) !important;
  border: 1px solid rgba(245,104,32,0.25) !important;
  color: #F56820 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  font-family: Georgia, serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  backdrop-filter: none !important;
  bottom: unset !important;
  right: unset !important;
}
body.dark .prod-badge {
  background: #F56820 !important;
  border: 2px solid #0D0C0A !important;
  top: -6px !important;
  left: -6px !important;
  z-index: 20 !important;
}
/* ── EMBER: Tarjetas fix definitivo ── */
body.dark .prods-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
}
body.dark .prod-wrap {
  position: relative !important;
  aspect-ratio: unset !important;
  width: 100% !important;
}
body.dark .prod-btn {
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #1A1814 !important;
  border: 1px solid rgba(255,200,140,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  cursor: pointer !important;
  padding: 0 !important;
}
body.dark .prod-img {
  width: 100% !important;
  height: 90px !important;
  min-height: 90px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 60%, rgba(245,104,32,0.13) 0%, #131210 70%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.dark .prod-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* prod-img gradient removed */
body.dark .prod-img-ico {
  font-size: 2.6rem !important;
  line-height: 1 !important;
  z-index: 1 !important;
  position: relative !important;
}
body.dark .prod-pre-badge {
  position: absolute !important;
  bottom: 6px !important;
  right: 6px !important;
  top: unset !important;
  left: unset !important;
  z-index: 3 !important;
  background: rgba(13,12,10,0.85) !important;
  color: #F56820 !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  padding: 3px 7px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  
}
body.dark .prod-nom-wrap {
  padding: 7px 8px 8px !important;
  background: transparent !important;
  border-top: none !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  min-height: 36px !important;
}
body.dark .prod-nom {
  font-size: .72rem !important;
  font-weight: 500 !important;
  color: #F3EDE4 !important;
  line-height: 1.3 !important;
  flex: 1 !important;
  text-align: left !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
/* i — dentro del nom-wrap, no flotante */
body.dark .prod-info-btn {
  position: static !important;
  bottom: unset !important;
  right: unset !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 6px !important;
  background: rgba(245,104,32,0.15) !important;
  border: 1px solid rgba(245,104,32,0.30) !important;
  color: #F56820 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  font-family: Georgia, serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  backdrop-filter: none !important;
  cursor: pointer !important;
  z-index: 5 !important;
}
body.dark .prod-badge {
  top: -6px !important;
  left: -6px !important;
  background: #F56820 !important;
  border: 2px solid #0D0C0A !important;
  z-index: 10 !important;
}
/* ── EMBER: Tarjetas definitivas v3 ── */
body.dark .prods-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
  align-content: start !important;
}
body.dark .prod-wrap {
  position: relative !important;
  aspect-ratio: unset !important;
  width: 100% !important;
  height: auto !important;
}
body.dark .prod-btn {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 130px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #1A1814 !important;
  border: 1px solid rgba(255,200,140,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  cursor: pointer !important;
  padding: 0 !important;
  text-align: left !important;
}
body.dark .prod-img {
  width: 100% !important;
  height: 96px !important;
  min-height: 96px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 60%, rgba(245,104,32,0.15) 0%, #131210 70%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.dark .prod-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
}
/* prod-img gradient removed */
body.dark .prod-img-ico {
  font-size: 2.8rem !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}
body.dark .prod-pre-badge {
  position: absolute !important;
  top: unset !important;
  left: unset !important;
  bottom: 38px !important;
  right: 7px !important;
  z-index: 3 !important;
  background: rgba(13,12,10,0.85) !important;
  color: #F56820 !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  
}
body.dark .prod-nom-wrap {
  padding: 7px 28px 8px 9px !important;
  background: transparent !important;
  border-top: none !important;
  flex-shrink: 0 !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
}
body.dark .prod-nom {
  font-size: .73rem !important;
  font-weight: 500 !important;
  color: #F3EDE4 !important;
  line-height: 1.3 !important;
  width: 100% !important;
  text-align: left !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
body.dark .prod-info-btn {
  position: absolute !important;
  bottom: 8px !important;
  right: 6px !important;
  top: unset !important;
  left: unset !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 6px !important;
  background: rgba(245,104,32,0.18) !important;
  border: 1px solid rgba(245,104,32,0.35) !important;
  color: #F56820 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  font-family: Georgia, serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: none !important;
  cursor: pointer !important;
  z-index: 10 !important;
}
body.dark .prod-badge {
  top: -6px !important;
  left: -6px !important;
  background: #F56820 !important;
  border: 2px solid #0D0C0A !important;
  z-index: 10 !important;
}
/* ── EMBER: Tarjetas altura fija uniforme ── */
body.dark .prods-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
}
body.dark .prod-wrap {
  height: 160px !important;
}
body.dark .prod-btn {
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
}
body.dark .prod-img {
  height: 110px !important;
  min-height: 110px !important;
  max-height: 110px !important;
  flex: 0 0 110px !important;
}
body.dark .prod-nom-wrap {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  flex: 0 0 50px !important;
  padding: 6px 28px 6px 9px !important;
  align-items: flex-start !important;
}
body.dark .prod-info-btn {
  bottom: 14px !important;
}
/* ── EMBER: Formatos + modificadores — sin azul ── */
body.dark .fmt-sel-btn {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.12) !important;
  color: #F3EDE4 !important;
}
body.dark .fmt-sel-btn:active { background: rgba(245,104,32,0.15) !important; border-color: rgba(245,104,32,0.40) !important; }
body.dark .fmt-sel-nom { color: #F3EDE4 !important; }
body.dark .fmt-sel-precio { color: #F56820 !important; }

/* Modal selector genérico (formatos, extras) */
body.dark .sel-modal { background: #131210 !important; border: 1px solid rgba(255,200,140,0.10) !important; }
body.dark .sel-head { color: #F3EDE4 !important; border-color: rgba(255,200,140,0.08) !important; }
body.dark .sel-btn { background: #1A1814 !important; border-color: rgba(255,200,140,0.10) !important; color: #F3EDE4 !important; }
body.dark .sel-btn.on { background: rgba(245,104,32,0.18) !important; border-color: rgba(245,104,32,0.50) !important; color: #F56820 !important; }
body.dark .sel-ok { background: #F56820 !important; border: none !important; color: white !important; }
body.dark .sel-cancel { background: #1A1814 !important; border-color: rgba(255,200,140,0.10) !important; color: #8A7F6E !important; }
body.dark .sel-precio { color: #F56820 !important; }
body.dark .sel-overlay { background: rgba(0,0,0,0.75) !important; }
body.dark .sel-foot { border-color: rgba(255,200,140,0.08) !important; background: #131210 !important; }

/* Modal info producto */
body.dark #m-prod-info .mov { background: rgba(0,0,0,0.75) !important; }
body.dark #m-prod-info > div { background: #131210 !important; border-radius: 18px !important; }
body.dark #pinfo-pre { color: #F56820 !important; }
body.dark #pinfo-add { background: linear-gradient(145deg,#F56820,#FF9248) !important; border: none !important; color: white !important; box-shadow: 0 4px 16px rgba(245,104,32,0.40) !important; }
/* ── EMBER: Modal info producto — fondo sólido ── */
body.dark #m-prod-info {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(8px) !important;
}
body.dark #m-prod-info > div {
  background: #131210 !important;
  border: 1px solid rgba(255,200,140,0.10) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
body.dark #m-prod-info > div > div:first-child {
  background: #1A1814 !important;
}
/* ── EMBER: Overlay imagen — menos oscuro en móvil ── */
@media(max-width:767px){
  /* prod-img gradient removed */
  body.dark .prod-pre-badge {
    bottom: 42px !important;
  }
}
/* ── EMBER: Móvil — 3 artículos por fila ── */
@media(max-width:767px){
  body.dark .prods-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  body.dark .prod-wrap { height: 130px !important; }
  body.dark .prod-btn  { height: 130px !important; min-height: 130px !important; max-height: 130px !important; }
  body.dark .prod-img  { height: 88px !important; min-height: 88px !important; max-height: 88px !important; flex: 0 0 88px !important; }
  body.dark .prod-nom-wrap { height: 42px !important; min-height: 42px !important; max-height: 42px !important; flex: 0 0 42px !important; padding: 5px 22px 5px 7px !important; }
  body.dark .prod-nom  { font-size: .65rem !important; }
  body.dark .prod-pre-badge { font-size: .65rem !important; padding: 2px 5px !important; bottom: 36px !important; }
  body.dark .prod-info-btn { width: 17px !important; height: 17px !important; font-size: 9px !important; bottom: 11px !important; right: 4px !important; }
}
/* ── EMBER: Ventas + pantallas fondo claro → dark ── */
body.dark #pg-ventas {
  background: #0D0C0A !important;
}
body.dark #pg-ventas > div:first-child {
  background: #131210 !important;
  border-color: rgba(255,200,140,0.08) !important;
}
body.dark #pg-ventas > div:first-child div[style*="color:#0f172a"] {
  color: #F3EDE4 !important;
}
body.dark #pg-ventas > div:nth-child(2) {
  background: #131210 !important;
  border-color: rgba(255,200,140,0.08) !important;
}
body.dark #pg-ventas > div:nth-child(2) input {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.10) !important;
  color: #F3EDE4 !important;
  color-scheme: dark !important;
}
body.dark #pg-ventas button[onclick*="cerrarVentas"] {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.10) !important;
  color: #8A7F6E !important;
}
body.dark #ventas-list { background: #0D0C0A !important; }
body.dark #ventas-resumen { color: #8A7F6E !important; }
body.dark #ventas-filtros-activos { color: #F56820 !important; }

/* ── EMBER: Modal filtros ventas ── */
body.dark #m-filtros-ventas > div { background: #131210 !important; border-color: rgba(255,200,140,0.10) !important; }
body.dark #m-filtros-ventas > div > div:first-child { border-color: rgba(255,200,140,0.08) !important; }
body.dark #m-filtros-ventas > div > div:first-child > div { color: #F3EDE4 !important; }
body.dark #m-filtros-ventas > div > div:first-child > button { background: #1A1814 !important; border-color: rgba(255,200,140,0.10) !important; color: #8A7F6E !important; }
body.dark #m-filtros-ventas label { color: #8A7F6E !important; }
body.dark #m-filtros-ventas input { background: #1A1814 !important; border-color: rgba(255,200,140,0.10) !important; color: #F3EDE4 !important; }
body.dark #m-filtros-ventas input::placeholder { color: #5A5347 !important; }
body:not(.dark) #m-filtros-ventas > div { background: #FFFDF9 !important; }
body:not(.dark) #m-filtros-ventas label { color: #8A7060 !important; }
body:not(.dark) #m-filtros-ventas input { background: #F0EBE3 !important; border-color: rgba(120,80,40,0.12) !important; color: #1A1410 !important; }

/* ── Ticket config modal ── */
body.dark #m-ticket-cfg {
  background: #0D0C0A !important;
}
body.dark #m-ticket-cfg > div > div:first-child {
  background: #131210 !important;
  border-color: rgba(255,200,140,0.08) !important;
}
body.dark #m-ticket-cfg label span,
body.dark #m-ticket-cfg h4 {
  color: #F3EDE4 !important;
}
body.dark #m-ticket-cfg textarea,
body.dark #m-ticket-cfg input[type="text"],
body.dark #m-ticket-cfg input[type="email"] {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.10) !important;
  color: #F3EDE4 !important;
}
body.dark #m-ticket-cfg button[onclick="cerrarDisenoTicket()"] {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.10) !important;
  color: #8A7F6E !important;
}
body.dark #m-ticket-cfg div[style*="background:white"] {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.10) !important;
}
body.dark #m-ticket-cfg div[style*="overflow-y:auto"] {
  background: #0D0C0A !important;
}

/* ── art-page contenidos internos ── */
body.dark .art-page { background: #0D0C0A !important; color: #F3EDE4 !important; }
body.dark .art-page-body { background: #0D0C0A !important; }
body.dark .art-page input, body.dark .art-page select, body.dark .art-page textarea {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.10) !important;
  color: #F3EDE4 !important;
}
body.dark .art-page label { color: #B8AD9E !important; }
body.dark .art-page h3, body.dark .art-page h4 { color: #F3EDE4 !important; }
body.dark .art-page .card, body.dark .art-page [style*="background:white"],
body.dark .art-page [style*="background:#f"] {
  background: #1A1814!important;
  border-color: rgba(255,200,140,0.08) !important;
}
/* ── EMBER: Tickets dentro ventas-list ── */
body.dark #ventas-list > div {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.10) !important;
  color: #F3EDE4 !important;
}
body.dark #ventas-list * { color: #F3EDE4 !important; }
body.dark #ventas-list [style*="color:#F56820"],
body.dark #ventas-list [style*="color:#D4530F"] { color: #F56820 !important; }
body.dark #ventas-list [style*="color:#64748b"],
body.dark #ventas-list [style*="color:#94a3b8"] { color: #8A7F6E !important; }
body.dark #ventas-list button {
  background: #232018 !important;
  border-color: rgba(255,200,140,0.12) !important;
  color: #B8AD9E !important;
}
body.dark #ventas-list button[style*="rgba(245,104,32,0.08)"] {
  background: rgba(245,104,32,0.12) !important;
  border-color: rgba(245,104,32,0.30) !important;
  color: #F56820 !important;
}
body.dark #ventas-list button[style*="#fef2f2"],
body.dark #ventas-list button[style*="#dc2626"] {
  background: rgba(224,72,72,0.12) !important;
  border-color: rgba(224,72,72,0.30) !important;
  color: #E04848 !important;
}
/* ── EMBER LIGHT — Aripos 2.0 ── */

body:not(.dark) {
  --blue:   #F56820;
  --blue-l: rgba(245,104,32,0.10);
  --blue-m: rgba(245,104,32,0.20);
  --blue-d: #D4530F;
  --orange: #F56820;
  --g50:    #FAF7F2;
  --g100:   #F0EBE3;
  --g200:   #E3D9CC;
  --g300:   #C8B9A8;
  --g400:   #A89078;
  --g500:   #8A7060;
  --g600:   #6B5444;
  --g700:   #4A3828;
  --g800:   #2C1F12;
  --g900:   #1A1410;
  --bg-app:   #FAF7F2;
  --bg-panel: #F0EBE3;
  --bg-card:  #FFFDF9;
  --bg-input: #FFFDF9;
  --border-c: rgba(120,80,40,0.12);
  --text-main: #1A1410;
  --text-sub:  #8A7060;
}

body:not(.dark) { background: #FAF7F2 !important; color: #1A1410; }
body:not(.dark) .hdr { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.10) !important; box-shadow: 0 1px 0 rgba(120,80,40,0.06) !important; }
body:not(.dark) .logo { color: #F56820 !important; }
body:not(.dark) .logo span { color: #E3D9CC !important; }
body:not(.dark) .hdr-logo { color: #F56820 !important; }
body:not(.dark) .stab { border-color: rgba(120,80,40,0.15) !important; color: #8A7060 !important; }
body:not(.dark) .stab.on { background: #F56820 !important; border-color: #F56820 !important; color: white !important; }
body:not(.dark) .stab-add { border-color: rgba(120,80,40,0.15) !important; color: #A89078 !important; }
body:not(.dark) .hdr-btn, body:not(.dark) .hdr-btns button { background: #F0EBE3 !important; border-color: rgba(120,80,40,0.15) !important; color: #4A3828 !important; }
body:not(.dark) .btn-top-coc { background: rgba(245,104,32,0.10) !important; border: 1.5px solid rgba(245,104,32,0.30) !important; color: #D4530F !important; }
body:not(.dark) #btn-cob-top { display: none !important; }
body:not(.dark) #btn-monei-qr-top { background: rgba(245,104,32,0.10) !important; border: 1.5px solid rgba(245,104,32,0.30) !important; color: #D4530F !important; border-radius: 9px !important; font-weight: 700 !important; }
body:not(.dark) #btn-cob-desk { display: block !important; background: linear-gradient(145deg, #F56820, #FF9248) !important; box-shadow: 0 3px 14px rgba(245,104,32,0.35) !important; }
body:not(.dark) .col-ped { background: #FFFDF9 !important; }
body:not(.dark) .lineas-list { background: #FFFDF9 !important; }
body:not(.dark) .np-wrap { background: #FFFDF9 !important; }
body:not(.dark) #total-amt { font-family: 'Syne', 'Inter', sans-serif !important; font-size: 1.6rem !important; font-weight: 900 !important; color: #1A1410 !important; letter-spacing: -1px !important; }
body:not(.dark) .linea { border-color: rgba(120,80,40,0.08) !important; }
body:not(.dark) .linea.sel { background: rgba(245,104,32,0.08) !important; border-color: rgba(245,104,32,0.30) !important; }
body:not(.dark) .lqty { background: #F56820 !important; color: white !important; }
body:not(.dark) .lpre { color: #D4530F !important; }
body:not(.dark) .ldel { color: #A89078 !important; }
body:not(.dark) #ped-count { color: #A89078 !important; }
body:not(.dark) #btn-monei-qr { background: rgba(245,104,32,0.10) !important; color: #D4530F !important; border: 1.5px solid rgba(245,104,32,0.35) !important; border-radius: 8px !important; }
body:not(.dark) .npb { background: #F0EBE3 !important; border-color: rgba(120,80,40,0.12) !important; color: #4A3828 !important; }
body:not(.dark) .npb:active { background: #E3D9CC !important; }
body:not(.dark) .npb.del { background: rgba(220,80,60,0.10) !important; color: #C04030 !important; }
body:not(.dark) .cats-bar { background: #FAF7F2 !important; border-color: rgba(120,80,40,0.10) !important; }
body:not(.dark) .prod-btn { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.10) !important; box-shadow: 0 1px 4px rgba(80,40,10,0.07) !important; }
body:not(.dark) .prod-img { background: linear-gradient(135deg, #F5ECD9 0%, #EDE0CA 100%) !important; }
body:not(.dark) .prod-pre-badge { background: rgba(250,247,242,0.92) !important; color: #D4530F !important; border-color: rgba(212,83,15,0.20) !important; }
body:not(.dark) .prod-nom { color: #2C1F12 !important; }
body:not(.dark) .prod-info-btn { background: rgba(245,104,32,0.10) !important; border-color: rgba(245,104,32,0.25) !important; color: #D4530F !important; }
body:not(.dark) .prod-badge { background: #F56820 !important; border-color: #FAF7F2 !important; }
body:not(.dark) .hios-btn { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.10) !important; color: #8A7060 !important; }
body:not(.dark) .hios-btn.activo { background: rgba(245,104,32,0.12) !important; color: #D4530F !important; border-color: rgba(245,104,32,0.30) !important; }

body:not(.dark) .hios-orden-num.on { background: rgba(245,104,32,0.12) !important; border-color: rgba(245,104,32,0.30) !important; color: #D4530F !important; }
body:not(.dark) .mov { background: rgba(80,40,10,0.45) !important; }
body:not(.dark) .modal { background: #FFFDF9 !important; border: 1px solid rgba(120,80,40,0.10) !important; }
body:not(.dark) .modal h3 { color: #1A1410 !important; }
body:not(.dark) .btn-ok { background: #F56820 !important; border: none !important; }
body:not(.dark) .btn-cancel { background: #F0EBE3 !important; border-color: rgba(120,80,40,0.15) !important; color: #6B5444 !important; }
body:not(.dark) .linea-modal { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.10) !important; }
body:not(.dark) .lm-head { border-color: rgba(120,80,40,0.10) !important; }
body:not(.dark) .lm-nom { color: #1A1410 !important; }
body:not(.dark) .lm-pre { color: #D4530F !important; }
body:not(.dark) .lm-btn { background: #F0EBE3 !important; border-color: rgba(120,80,40,0.12) !important; color: #4A3828 !important; }
body:not(.dark) .lm-btn.blue { background: rgba(245,104,32,0.10) !important; border-color: rgba(245,104,32,0.30) !important; }
body:not(.dark) .lm-btn.blue .lm-btn-lbl { color: #D4530F !important; }
body:not(.dark) #pg-plano { background: #FAF7F2 !important; }
body:not(.dark) .mnom { color: #8A7060 !important; }
/* body:not(.dark) .cfg-* overrides removed — tokens handle light mode via :root */
body:not(.dark) .fp { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.12) !important; }
body:not(.dark) .fp.on { border-color: #F56820 !important; background: rgba(245,104,32,0.08) !important; box-shadow: 0 0 0 3px rgba(245,104,32,0.15) !important; }
body:not(.dark) .fp-nom { color: #6B5444 !important; }
body:not(.dark) .fp.on .fp-nom { color: #D4530F !important; }
body:not(.dark) .menu-sheet { background: #FFFDF9 !important; }
body:not(.dark) .mcancel { background: #F0EBE3 !important; color: #8A7060 !important; }
body:not(.dark) #toast { background: #2C1F12 !important; border-color: rgba(120,80,40,0.20) !important; color: #F3EDE4 !important; }
/* ── EMBER LIGHT: Cobrar correcciones definitivas ── */
body:not(.dark) #btn-cob-top { display: none !important; }
body:not(.dark) #btn-cob-desk {
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  border-radius: 11px !important;
  border: none !important;
  background: linear-gradient(145deg, #F56820, #FF9248) !important;
  color: white !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  font-family: 'Syne','Inter',sans-serif !important;
  letter-spacing: .3px !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  box-shadow: 0 3px 14px rgba(245,104,32,0.35), 0 0 0 1px rgba(245,104,32,0.18) !important;
  animation: cobrarGlow 3s ease-in-out infinite !important;
}
/* AriPay top — controlado por JS, no CSS */
body:not(.dark) .btn-top-coc {
  background: rgba(245,104,32,0.10) !important;
  border: 1.5px solid rgba(245,104,32,0.30) !important;
  color: #D4530F !important;
  font-weight: 700 !important;
}
body:not(.dark) #btn-monei-qr {
  display: none !important;
}
/* ── EMBER LIGHT: fixes completos ── */

body:not(.dark) .logo { color: #F56820 !important; }
body:not(.dark) .hdr-logo { color: #F56820 !important; font-family: 'Syne','Inter',sans-serif !important; }
body:not(.dark) .logo span { color: #E3D9CC !important; }

body:not(.dark) .hios-bar { background: #F0EBE3 !important; border-top: 1px solid rgba(120,80,40,0.10) !important; }
body:not(.dark) .hios-btn { background: #FFFDF9 !important; border: 1px solid rgba(120,80,40,0.10) !important; color: #6B5444 !important; border-radius: 9px !important; }
body:not(.dark) .hios-btn:active { background: #E3D9CC !important; }
body:not(.dark) .hios-btn.activo { background: rgba(245,104,32,0.12) !important; color: #D4530F !important; border-color: rgba(245,104,32,0.30) !important; }
body:not(.dark) .hios-btn .hios-lbl { color: #6B5444 !important; }
body:not(.dark) .hios-btn.activo .hios-lbl { color: #D4530F !important; }
body:not(.dark) .hios-sep { background: rgba(120,80,40,0.10) !important; }
body:not(.dark) .hios-orden-num { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.12) !important; color: #6B5444 !important; }
body:not(.dark) .hios-orden-num.on { background: rgba(245,104,32,0.12) !important; border-color: rgba(245,104,32,0.35) !important; color: #D4530F !important; }

body:not(.dark) .hios-total-wrap { color: #4A3828 !important; }
body:not(.dark) #hios-total { color: #D4530F !important; font-weight: 900 !important; }

body:not(.dark) .ord-badge { background: #F0EBE3 !important; color: #6B5444 !important; border-color: rgba(120,80,40,0.12) !important; }

body:not(.dark) #pg-ventas { background: #FAF7F2 !important; }
body:not(.dark) #pg-ventas > div:first-child { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.10) !important; }
body:not(.dark) #pg-ventas > div:first-child div { color: #1A1410 !important; }
body:not(.dark) #pg-ventas > div:nth-child(2) { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.08) !important; }
body:not(.dark) #pg-ventas > div:nth-child(2) input { background: #F0EBE3 !important; border-color: rgba(120,80,40,0.12) !important; color: #1A1410 !important; }
body:not(.dark) #ventas-list { background: #FAF7F2 !important; }
body:not(.dark) #ventas-list > div { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.10) !important; box-shadow: 0 1px 4px rgba(80,40,10,0.06) !important; }
body:not(.dark) #ventas-list * { color: #1A1410 !important; }
body:not(.dark) #ventas-list [style*="color:#F56820"] { color: #D4530F !important; }
body:not(.dark) #ventas-list [style*="color:#64748b"] { color: #8A7060 !important; }
body:not(.dark) #ventas-list button { background: #F0EBE3 !important; border-color: rgba(120,80,40,0.12) !important; color: #4A3828 !important; }
body:not(.dark) #ventas-list button[style*="rgba(245,104,32,0.08)"] { background: rgba(245,104,32,0.10) !important; border-color: rgba(245,104,32,0.25) !important; color: #D4530F !important; }
body:not(.dark) #ventas-list button[style*="#fef2f2"] { background: rgba(220,60,60,0.08) !important; border-color: rgba(220,60,60,0.20) !important; color: #B03030 !important; }
body:not(.dark) #ventas-resumen { color: #8A7060 !important; }
body:not(.dark) #pg-ventas button[onclick*="cerrarVentas"] { background: #F0EBE3 !important; border-color: rgba(120,80,40,0.12) !important; color: #6B5444 !important; }

body:not(.dark) .art-page { background: #FAF7F2 !important; color: #1A1410 !important; }
body:not(.dark) .art-page-head { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.10) !important; }
body:not(.dark) .art-page-head h2 { color: #1A1410 !important; }
body:not(.dark) .art-page-body { background: #FAF7F2 !important; }
body:not(.dark) .art-page input, body:not(.dark) .art-page select, body:not(.dark) .art-page textarea { background: #FFFDF9 !important; border-color: rgba(120,80,40,0.12) !important; color: #1A1410 !important; }
body:not(.dark) .back-btn { background: #F0EBE3 !important; color: #4A3828 !important; border: none !important; }
/* ── AriPay top — mismo tamaño que Cobrar ── */
body:not(.dark) #btn-monei-qr-top,
body.dark #btn-monei-qr-top {
  padding: 9px 18px !important;
  height: 40px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
/* ── Orden cocina numeros — legibles en claro ── */
body:not(.dark) .hios-orden-num { color: #4A3828 !important; background: #F0EBE3 !important; border-color: rgba(120,80,40,0.15) !important; }
body:not(.dark) .hios-orden-num.on { color: #D4530F !important; background: rgba(245,104,32,0.12) !important; }
/* ── Orden cocina label — legible en claro ── */
body:not(.dark) .hios-orden-lbl { color: #4A3828 !important; }
body:not(.dark) .hios-orden-num { color: #4A3828 !important; background: #F0EBE3 !important; border-color: rgba(120,80,40,0.15) !important; }

/* EMBER 2.0 — Loading + Reservas btn | v20260418a */
#loading { background: #FAF7F2 !important; }
body.dark #loading { background: #0D0C0A !important; }
body:not(.dark) #lmsg { color: #8A7060 !important; }
body.dark #lmsg { color: #8A7F6E !important; }
body.dark .logo { color: #F56820 !important; font-family: 'Syne','Inter',sans-serif !important; }
body.dark .logo span { color: #3A342A !important; }
body:not(.dark) .spin { border-color: rgba(120,80,40,0.12) !important; border-top-color: #F56820 !important; }
body.dark .spin { border-color: rgba(255,200,140,0.08) !important; border-top-color: #F56820 !important; }
body:not(.dark) #btn-reservas { background: rgba(245,104,32,0.10) !important; border-color: rgba(245,104,32,0.30) !important; color: #D4530F !important; }
body.dark #btn-reservas { background: rgba(245,104,32,0.12) !important; border-color: rgba(245,104,32,0.35) !important; color: #F56820 !important; }
body:not(.dark) #mob-btn-reservas { background: rgba(245,104,32,0.10) !important; border-color: rgba(245,104,32,0.30) !important; color: #D4530F !important; }
body.dark #mob-btn-reservas { background: rgba(245,104,32,0.12) !important; border-color: rgba(245,104,32,0.35) !important; color: #F56820 !important; }

/* AriPay QR modal — dark mode */
body.dark #monei-total-display { color: #F3EDE4 !important; }
body.dark #monei-mesa-nom { color: #8A7F6E !important; }
body.dark #monei-qr-img { border-color: rgba(255,200,140,0.15) !important; }


.mob-btn-qr2{background:rgba(245,104,32,0.10);border:1.5px solid rgba(245,104,32,0.30);color:#D4530F;border-radius:10px;padding:13px;font-family:'Inter',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;}

/* ══════════════════════════════════════════════════════════════════════ */
/* ═══  INICIO EMBER DARK 2.0 — logo, mesas, renderer                      */
/* ═══  Añadido el 20-abr-2026 · rollback: localizar y borrar este bloque  */
/* ══════════════════════════════════════════════════════════════════════ */

/* ── Logo: de brasa a blanco cálido en modo oscuro ──────────────────── */
body.dark .hdr-logo,
body.dark .logo {
  color: #F5F1E8 !important;
}
/* El punto separador en brasa como acento (solo afecta al .logo con span) */
body.dark .logo span {
  color: #F56820 !important;
}

/* ── Render de PNG dentro de .msvg ──────────────────────────────────── */
.mw .msvg .m-png {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ── Dark mode: mesas libres desaturadas + hover suave ───────────────── */
body.dark .mw:not(.ocu) .msvg {
  filter: saturate(0.45) brightness(0.85);
  transition: filter 0.2s ease, transform 0.2s ease;
}
body.dark .mw:not(.ocu):hover .msvg {
  filter: saturate(0.75) brightness(0.95);
  /* Sin scale/translateY del tema light — aquí queremos más sobrio */
  transform: none;
}

/* ── Dark mode: ocupadas con glow brasa en vez del azul del tema light ─ */
body.dark .mw.ocu .msvg {
  filter: drop-shadow(0 2px 10px rgba(245, 104, 32, 0.18));
}
body.dark .mw.ocu:hover .msvg {
  filter: drop-shadow(0 2px 14px rgba(245, 104, 32, 0.35)) brightness(1.05);
  transform: none;
}

/* ── Fallback SVGs: asegurar que los <rect>/<circle> respetan el fill    */
/*    declarado en el JS (no heredan filters del tema light)            ─ */
body.dark .mw .msvg svg rect,
body.dark .mw .msvg svg circle {
  filter: none;
}

/* ══════════════════════════════════════════════════════════════════════ */
/* ═══  FIN EMBER DARK 2.0 — logo, mesas, renderer                        */
/* ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════ */
/* ═══  INICIO EMBER DARK 2.0 v3 — mnom (número mesa)                      */
/* ═══  Añadido 20-abr-2026 · rollback: borrar este bloque                 */
/* ══════════════════════════════════════════════════════════════════════ */

/* Badge número de mesa — arriba-izquierda del wrap .mw
   Sobrescribe el .mnom heredado (que estaba pensado para light mode). */
body.dark .mw .mnom {
  position: absolute;
  top: -10px;
  left: -10px;
  background: #0D0C0A;
  border: 1px solid rgba(245,104,32,0.4);
  border-radius: 8px;
  padding: 4px 10px;
  font-family: 'Syne', 'Futura', 'Avenir Next', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #F56820;
  z-index: 5;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  min-width: 24px;
  text-align: center;
}
/* Mesa libre → número blanco sobre fondo oscuro */
body.dark .mw:not(.ocu) .mnom {
  color: #F5F1E8;
  border-color: rgba(245,241,232,0.15);
  background: rgba(26,24,21,0.9);
}
/* Mesa ocupada → badge invertido brasa sólido */
body.dark .mw.ocu .mnom {
  background: #F56820;
  color: #0D0C0A;
  border-color: #F56820;
}

/* ══════════════════════════════════════════════════════════════════════ */
/* ═══  FIN EMBER DARK 2.0 v3                                              */
/* ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════ */
/* ═══  INICIO EMBER DARK 2.0 v4 — reposición de badges                    */
/* ═══  Añadido 20-abr-2026 · rollback: borrar este bloque                 */
/* ══════════════════════════════════════════════════════════════════════ */

/* Layout final por esquinas:
   ┌───────────────────────┐
   │ [mnom]      [campana] │
   │                       │
   │       <img mesa>      │
   │                       │
   │ [mitems]    [mbadge]  │
   └───────────────────────┘
*/

/* ─── mitems-badge: contador de artículos · abajo-izquierda · estilo mnom ─── */
body.dark .mw .mitems-badge {
  position: absolute !important;
  top: auto !important;
  bottom: -8px !important;
  left: -8px !important;
  right: auto !important;
  background: #0D0C0A !important;
  border: 1px solid rgba(245,241,232,0.15) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-family: 'Syne', 'Futura', 'Avenir Next', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #F5F1E8 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  min-width: 24px !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
  z-index: 4;
  background-image: none !important;
  /* Pequeño prefijo "×" para que quede claro que es cantidad */
}
body.dark .mw .mitems-badge::before {
  content: '×';
  color: #8A827A;
  margin-right: 3px;
  font-weight: 500;
}

/* ─── mbadge: importe · abajo-derecha · estilo mnom ─── */
body.dark .mw .mbadge {
  position: absolute !important;
  top: auto !important;
  bottom: -8px !important;
  right: -8px !important;
  left: auto !important;
  background: #0D0C0A !important;
  border: 1px solid rgba(245,104,32,0.4) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-family: 'Syne', 'Futura', 'Avenir Next', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #F56820 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
  z-index: 4;
  background-image: none !important;
  white-space: nowrap;
}

/* ─── Campana aviso: arriba-derecha, no toca al mnom ni al importe ─── */
body.dark .mw .campana-badge {
  position: absolute !important;
  top: -12px !important;
  right: -10px !important;
  left: auto !important;
  z-index: 6;
  font-size: 18px !important;
  filter: drop-shadow(0 0 8px rgba(245,104,32,0.6)) !important;
  animation: campanaTilt 0.6s ease-in-out infinite alternate;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════ */
/* ═══  FIN EMBER DARK 2.0 v4                                              */
/* ══════════════════════════════════════════════════════════════════════ */





/* ══════════════════════════════════════════════════════════════════════ */
/* ═══  INICIO EMBER DARK 2.0 v6 — editor nueva mesa rediseñado            */
/* ══════════════════════════════════════════════════════════════════════ */

/* ─── Grid de formas con miniaturas PNG ─── */
body.dark .forma-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

body.dark .forma-opt-v6 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  padding: 8px 4px !important;
  background: #1A1815 !important;
  border: 1.5px solid rgba(245,241,232,0.08) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  min-height: 88px !important;
  background-image: none !important;
}

body.dark .forma-opt-v6:hover {
  border-color: rgba(245,104,32,0.3) !important;
  background: rgba(245,104,32,0.04) !important;
}

body.dark .forma-opt-v6.on {
  border-color: #F56820 !important;
  background: rgba(245,104,32,0.1) !important;
  box-shadow: 0 0 0 1px #F56820;
}

body.dark .forma-opt-v6 .forma-thumb {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.dark .forma-opt-v6 .forma-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: saturate(0.85);
}
body.dark .forma-opt-v6.on .forma-thumb img {
  filter: saturate(1) brightness(1.05);
}

body.dark .forma-opt-v6 span {
  font-family: 'Figtree', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #8A827A !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}
body.dark .forma-opt-v6.on span {
  color: #F56820 !important;
}

/* ─── Selector de capacidad ─── */
body.dark #cap-wrap {
  margin-bottom: 12px;
}

body.dark .cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

body.dark .cap-opt {
  background: #1A1815;
  border: 1.5px solid rgba(245,241,232,0.08);
  border-radius: 10px;
  padding: 12px 0;
  font-family: 'Syne', 'Futura', 'Avenir Next', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #F5F1E8;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}

body.dark .cap-opt:hover {
  border-color: rgba(245,104,32,0.3);
  background: rgba(245,104,32,0.04);
}

body.dark .cap-opt.on {
  border-color: #F56820;
  background: #F56820;
  color: #0D0C0A;
}

/* ══════════════════════════════════════════════════════════════════════ */
/* ═══  FIN EMBER DARK 2.0 v6                                              */
/* ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════ */
/* Fondo del canvas: tile pequeño + overlay suave + fallback carbón
   background-size 480×400 = tamaño nativo del tile (rombos ~porcelánicos de ~80px)
   El tile se repite con background-repeat:repeat (default) para cubrir los 3000×2500 */
/* ── HALO ROTACION — solo decoraciones ── */
.rw-halo {
  display: none;
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-radius: 50%;
  border: 3px solid rgba(245, 104, 32, 0.6);
  box-shadow: 0 0 18px rgba(245, 104, 32, 0.45);
  pointer-events: none;
  cursor: grab;
  touch-action: none;
  z-index: 50;
  background: transparent;
}
.deco-selected .rw-halo {
  display: block;
  pointer-events: auto;
}
.deco-selected .rw-halo:active {
  cursor: grabbing;
  border-color: rgba(245, 104, 32, 0.9);
  box-shadow: 0 0 26px rgba(245, 104, 32, 0.7);
}

/* ── EMBER DARK: Barra tickets ── */
body.dark #pg-barra { background: #0D0C0A !important; }
body.dark .barra-top { background: #131210 !important; border-color: rgba(255,200,140,0.12) !important; }
body.dark .barra-top .ped-title,
body.dark .barra-top #barra-title { color: #F3EDE4 !important; }
body.dark .barra-top .ped-sala,
body.dark .barra-top #barra-sala { color: #8A7F6E !important; }
body.dark .barra-top .btn-back { background: #1A1814 !important; border-color: rgba(255,200,140,0.10) !important; color: #B8AD9E !important; }
body.dark .barra-ticket { background: #1A1814 !important; border-color: rgba(255,200,140,0.15) !important; }
body.dark .barra-ticket.ocu { background: rgba(245,104,32,0.08) !important; border-color: #F56820 !important; }
body.dark .barra-ticket.ocu .bt-num { color: #F56820 !important; }
body.dark .bt-head { border-color: rgba(255,200,140,0.12) !important; }
body.dark .bt-num { color: #B8AD9E !important; }
body.dark .bt-total { color: #F56820 !important; }
body.dark .bt-lineas { color: #8A7F6E !important; }

/* ── EMBER DARK: Ficha articulo - seccion imagen ── */
body.dark #ae-img-preview {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.15) !important;
}
body.dark #pg-art-edit button[onclick*="ae-img-file"] {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.10) !important;
  color: #B8AD9E !important;
}
body.dark #ae-ico {
  background: #1A1814 !important;
  border-color: rgba(255,200,140,0.10) !important;
  color: #F3EDE4 !important;
}


/* ==========================================================
   EMBER CONFIG PANEL TOKENS — 21-abr-2026
   Tokens para #m-cfg (home). Sub-pantallas en Sprint 2.
   Alineados con EMBER_DESIGN_SYSTEM_v2.md.
   ========================================================== */
:root {
  --ember-config-bg: #FAF7F2;
  --ember-config-surface: #FFFDF9;
  --ember-config-surface-hover: #F0EBE3;
  --ember-config-border: rgba(120,80,40,0.10);
  --ember-config-border-hi: rgba(245,104,32,0.35);
  --ember-config-text-main: #1A1410;
  --ember-config-text-sub: #8A7060;
  --ember-config-accent: #D4530F;
  --ember-config-accent-muted: rgba(212,83,15,0.85);
  --ember-config-accent-bg: rgba(245,104,32,0.08);
  --ember-config-section-line: linear-gradient(90deg, rgba(212,83,15,0.30) 0%, rgba(212,83,15,0) 100%);
}
body.dark {
  --ember-config-bg: #0D0C0A;
  --ember-config-surface: #1A1814;
  --ember-config-surface-hover: #232018;
  --ember-config-border: rgba(255,200,140,0.08);
  --ember-config-border-hi: rgba(245,104,32,0.35);
  --ember-config-text-main: #F3EDE4;
  --ember-config-text-sub: #8A7F6E;
  --ember-config-accent: #F56820;
  --ember-config-accent-muted: rgba(245,104,32,0.75);
  --ember-config-accent-bg: rgba(245,104,32,0.08);
  --ember-config-section-line: linear-gradient(90deg, rgba(245,104,32,0.35) 0%, rgba(245,104,32,0) 100%);
}


/* Botón Mesas/Envío comanda — consolidado 22-abr-2026 */
.hios-btn-mesas {
  min-width: 145px !important;
  height: 42px !important;
  padding: 6px 16px !important;
  flex-direction: row !important;
  gap: 8px !important;
  border-radius: 9px !important;
  transition: all .15s ease;
}
.hios-btn-mesas .hbm-txt {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
}
.hios-btn-mesas .hbm-l1 {
  font-family: 'Syne','Figtree',sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: 0.04em;
}
.hios-btn-mesas .hbm-l2 {
  font-size: .58rem; font-weight: 500; opacity: 0.82; letter-spacing: 0.02em;
}
body.dark .hios-btn-mesas {
  background: rgba(245,104,32,0.12) !important;
  border: 1px solid rgba(245,104,32,0.35) !important;
  color: #F56820 !important;
}
body.dark .hios-btn-mesas:hover {
  background: rgba(245,104,32,0.18) !important;
  border-color: rgba(245,104,32,0.50) !important;
}
body.dark .hios-btn-mesas:active {
  background: rgba(245,104,32,0.25) !important;
  transform: scale(0.97);
}
body:not(.dark) .hios-btn-mesas {
  background: rgba(245,104,32,0.10) !important;
  border: 1px solid rgba(245,104,32,0.32) !important;
  color: #D4530F !important;
}
body:not(.dark) .hios-btn-mesas:hover {
  background: rgba(245,104,32,0.16) !important;
  border-color: rgba(245,104,32,0.48) !important;
}
body:not(.dark) .hios-btn-mesas:active {
  background: rgba(245,104,32,0.22) !important;
  transform: scale(0.97);
}


/* ═══ Fase C: estados QR de mesas (23-abr-2026) ═══ */
.mw .msvg { transition: opacity 300ms ease; }

/* Defaults: badges ocultos en estados libre/ocupada */
.badge-qr-check, .badge-qr-tag { display: none; }

/* Mesa con pago QR parcial — pagado algo, queda pendiente */
.mw[data-estado="parcial_qr"] .msvg::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px dashed #BA7517;
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.mw[data-estado="parcial_qr"] .badge-qr-tag {
  display: flex;
  position: absolute;
  top: 4px; right: 4px;
  background: #BA7517; color: #fff;
  font-size: 8px; font-weight: 500; letter-spacing: .5px;
  padding: 3px 5px; border-radius: 3px; z-index: 3;
}

/* Mesa pagada QR — saldada, esperando liberación manual */
.mw[data-estado="pagada_qr"] .msvg { opacity: 0.72; }
.mw[data-estado="pagada_qr"] .msvg::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px solid #2C6E63;
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.mw[data-estado="pagada_qr"] .badge-qr-check {
  display: flex;
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: #2C6E63; color: #fff;
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; z-index: 3;
}
.mw[data-estado="pagada_qr"] .badge-qr-tag {
  display: flex;
  position: absolute;
  bottom: 4px; left: 4px;
  background: #2C6E63; color: #fff;
  font-size: 8px; font-weight: 500; letter-spacing: .5px;
  padding: 3px 5px; border-radius: 3px; z-index: 3;
}
.mw[data-estado="pagada_qr"] .mbadge { display: none; }


/* ══════════════════════════════════════════════════════════════
   CFG TILE · estado (feature propinas QR 23-abr-2026)
   ══════════════════════════════════════════════════════════════ */
.cfg-tile-estado {
  font-size: 10px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--ember-config-text-sub);
}
.cfg-tile-estado.activo {
  color: var(--ember-config-accent);
}


/* ══════════════════════════════════════════════════════════════
   INFORME PROPINAS (feature propinas QR 23-abr-2026)
   ══════════════════════════════════════════════════════════════ */
.propina-filtros { display:flex; gap:8px; margin-bottom:16px; }
.propina-filtros .pill {
  padding:8px 16px;
  border-radius:20px;
  background: transparent;
  border:1px solid var(--ember-config-border);
  color: var(--ember-config-text-sub);
  cursor:pointer;
  font-size:14px;
  font-family: inherit;
}
.propina-filtros .pill.activa {
  background: var(--ember-config-accent);
  color: #0D0C0A;
  border-color: var(--ember-config-accent);
}
.propinas-tbl {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.propinas-tbl th {
  text-align:left;
  padding:10px 8px;
  color: var(--ember-config-text-sub);
  font-weight:500;
  border-bottom:1px solid var(--ember-config-border);
}
.propinas-tbl th.num, .propinas-tbl td.num { text-align:right; font-feature-settings:"tnum"; }
.propinas-tbl td {
  padding:10px 8px;
  border-bottom:1px solid var(--ember-config-border);
}
.propinas-tbl td.brasa { color: var(--ember-config-accent); font-weight:600; }
.propinas-empty { padding:32px; text-align:center; color: var(--ember-config-text-sub); }
.propinas-total {
  margin-top:20px;
  padding-top:16px;
  border-top:2px solid var(--ember-config-accent-bg);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.propinas-sum-lbl { color: var(--ember-config-text-sub); font-size:13px; }
.propinas-sum-val {
  font-family: 'Syne', sans-serif;
  font-weight:700;
  font-size:24px;
  color: var(--ember-config-accent);
}