/* ============================================================
   LA QUEMA DE'O · hoja de estilo (móvil primero)
   Paleta sacada del logo: negro humo, crema, rojo, oro, hoja.
   Escala de espacio 4/8 px · cuerpo 16 px · botones >= 44 px.
   ============================================================ */
:root{
  --noche:#15110d; --noche2:#221a14; --noche3:#2f261e;
  --crema:#f4e7c9; --crema2:#e9d9b4;
  --fondo:#f6efe1; --papel:#fffaf0;
  --tinta:#1f1812; --suave:#6b5e52; --tenue:#9c8f82;
  --linea:#e4d8c3; --linea2:#efe6d4;
  --rojo:#b8241c; --rojo-osc:#8f1a13; --rojo-luz:#fbeae8;
  --oro:#e0a52b; --oro-osc:#b07d14; --oro-luz:#fbf1d6;
  --hoja:#55702a; --hoja-luz:#e9efdc;
  --ok:#2f7d4f; --ok-luz:#e3f1e8; --ambar:#9a6508; --ambar-luz:#fdf2d9;
  --r:14px; --r2:10px;
  --display:"Alfa Slab One",Georgia,serif;
  --texto:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--fondo); color:var(--tinta); font:16px/1.5 var(--texto); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
button{font:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--oro); outline-offset:2px; border-radius:6px}
.oculto{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- tipografía ---------- */
.display{font-family:var(--display); font-weight:400; letter-spacing:-.01em; line-height:1.05}
h1,h2,h3{margin:0; line-height:1.15}
h1{font-size:28px} h2{font-size:20px} h3{font-size:17px}
.bajada{color:var(--suave); margin:4px 0 0; font-size:15px}
.precio{font-weight:800; font-variant-numeric:tabular-nums}
.chico{font-size:13px; color:var(--suave)}
.mayus{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--suave)}

/* ---------- barra superior ---------- */
.barra{background:var(--noche); color:var(--crema); position:sticky; top:0; z-index:40; border-bottom:3px solid var(--oro)}
.barra .fila{max-width:1100px; margin:0 auto; padding:0 16px; height:60px; display:flex; align-items:center; gap:12px}
.barra img{width:44px; height:44px; border-radius:50%}
.barra .nombre{font-family:var(--display); font-size:16px; line-height:1; white-space:nowrap}
.barra .nombre small{display:block; font-family:var(--texto); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--oro); margin-top:3px; font-weight:800}
.barra .der{margin-left:auto; display:flex; align-items:center; gap:8px}
.estado{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; font-size:12.5px; font-weight:800; white-space:nowrap}
.estado::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.estado.abierto{background:rgba(47,125,79,.25); color:#9fe0b6}
.estado.cerrado{background:rgba(184,36,28,.25); color:#ffb3ad}
.estado.pausa{background:rgba(224,165,43,.22); color:#ffd77a}

/* ---------- contenedor ---------- */
.cont{max-width:1100px; margin:0 auto; padding:0 16px}
main.cont{padding-bottom:110px}
section{margin:28px 0}
.enc{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}

/* ---------- hero tienda ---------- */
.hero{margin:0; background:var(--noche) radial-gradient(ellipse at 20% 0%,rgba(224,165,43,.18),transparent 55%); color:var(--crema); padding:36px 0 32px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; inset:auto -10% -40% -10%; height:80px; background:var(--fondo); border-radius:50% 50% 0 0}
.hero .cont{display:grid; gap:20px; align-items:center; position:relative; z-index:1}
.hero img{width:160px; height:160px; justify-self:center; filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.hero h1{font-family:var(--display); font-size:34px; line-height:1.05; letter-spacing:-.01em}
.hero h1 em{font-style:normal; color:var(--oro)}
.hero p{font-size:17px; color:rgba(244,231,201,.85); margin:10px 0 0; max-width:48ch}
.hero .datos{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:14px; color:rgba(244,231,201,.8)}
.hero .datos b{color:var(--crema)}
.hero .acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
@media(min-width:760px){
  .hero{padding:48px 0 60px}
  .hero .cont{grid-template-columns:1fr 240px}
  .hero img{width:220px; height:220px; order:2}
  .hero h1{font-size:46px}
}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px; border-radius:12px; border:none; cursor:pointer;
  font-weight:800; font-size:16px; text-decoration:none; background:var(--rojo); color:#fff; transition:background .15s, transform .05s; white-space:nowrap}
.btn:hover{background:var(--rojo-osc)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.oro{background:var(--oro); color:var(--noche)} .btn.oro:hover{background:#f0b63a}
.btn.fino{background:transparent; color:var(--tinta); border:2px solid var(--linea)} .btn.fino:hover{background:var(--papel); border-color:var(--tenue)}
.btn.claro{background:rgba(244,231,201,.12); color:var(--crema); border:2px solid rgba(244,231,201,.35)} .btn.claro:hover{background:rgba(244,231,201,.2)}
.btn.ancho{width:100%}
.btn.chico{min-height:40px; padding:0 14px; font-size:14px; border-radius:10px}
.btn.ok{background:var(--ok)} .btn.ok:hover{background:#25663f}
.btn.hoja{background:var(--hoja)} .btn.hoja:hover{background:#45601f}
.btn.gris{background:var(--linea2); color:var(--tinta)} .btn.gris:hover{background:var(--linea)}

/* ---------- promo ---------- */
.promo{background:var(--oro); color:var(--noche); border-radius:var(--r); padding:14px 16px; display:flex; gap:12px 14px; align-items:center; flex-wrap:wrap; box-shadow:0 6px 20px rgba(224,165,43,.3)}
.promo .ico{font-size:34px; line-height:1}
.promo b{display:block; font-family:var(--display); font-weight:400; font-size:18px}
.promo small{font-size:13px; font-weight:700; opacity:.85}
.promo .btn{margin-left:auto; background:var(--noche); color:var(--crema)}
.promo > div:not(.ico){flex:1; min-width:0}
@media(max-width:480px){.promo .btn{width:100%; margin-left:0}}

/* ---------- chips de categoría ---------- */
.chips{position:sticky; top:60px; z-index:30; background:var(--fondo); padding:10px 16px; margin:0 -16px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--linea)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; border:2px solid var(--linea); background:var(--papel); color:var(--tinta); padding:9px 14px; border-radius:99px; font-weight:800; font-size:14px; cursor:pointer; min-height:40px}
.chip.on{background:var(--noche); color:var(--crema); border-color:var(--noche)}

/* ---------- tarjetas de producto ---------- */
.grilla{display:grid; gap:12px}
@media(min-width:620px){.grilla{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grilla{grid-template-columns:repeat(3,1fr)}}
.prod{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; display:grid; grid-template-columns:112px 1fr; box-shadow:0 1px 2px rgba(31,24,18,.05); position:relative}
.prod .foto{aspect-ratio:1; background:var(--crema2); display:grid; place-items:center; font-size:48px; position:relative}
.prod .foto span{position:absolute; bottom:6px; left:6px; right:6px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(31,24,18,.45); text-align:center}
.prod .cuerpo{padding:12px 12px 12px 14px; display:flex; flex-direction:column; gap:4px; min-width:0}
.prod h3{font-size:16px; font-weight:800}
.prod .desc{font-size:13.5px; color:var(--suave); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.prod .pie{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px}
.prod .precio{font-size:18px}
.prod .precio small{font-weight:700; font-size:12px; color:var(--suave); margin-left:4px}
.prod .btn{min-height:40px; padding:0 14px; font-size:14px; border-radius:10px}
.prod.agotado .foto,.prod.agotado .cuerpo{opacity:.5}
.prod .etq{position:absolute; top:8px; left:8px; background:var(--noche); color:var(--crema); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:6px}
.prod .etq.poco{background:var(--ambar)} .prod .etq.agot{background:var(--rojo)}
.prod .enCarro{position:absolute; top:8px; right:8px; background:var(--ok); color:#fff; font-size:12px; font-weight:800; min-width:24px; height:24px; border-radius:99px; display:grid; place-items:center; padding:0 7px}

/* ---------- barra flotante del carrito ---------- */
.flota{position:fixed; left:0; right:0; bottom:0; z-index:45; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,var(--fondo) 30%)}
.flota .btn{width:100%; max-width:560px; margin:0 auto; display:flex; justify-content:space-between; min-height:56px; font-size:17px; box-shadow:0 10px 30px rgba(31,24,18,.25)}
.flota .n{background:rgba(255,255,255,.22); border-radius:8px; padding:2px 9px; font-size:14px}

/* ---------- hojas (modal desde abajo) ---------- */
.velo{position:fixed; inset:0; background:rgba(21,17,13,.55); z-index:50; display:flex; align-items:flex-end; justify-content:center; animation:fade .15s}
@keyframes fade{from{opacity:0}}
@keyframes sube{from{transform:translateY(40px)}}
.hoja{background:var(--fondo); width:100%; max-width:600px; max-height:92dvh; border-radius:20px 20px 0 0; display:flex; flex-direction:column; animation:sube .2s ease-out}
.hoja header{padding:14px 16px 10px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--linea); position:relative}
.hoja header::before{content:""; position:absolute; top:6px; left:50%; width:44px; height:4px; margin-left:-22px; border-radius:99px; background:var(--linea)}
.hoja header h2{font-size:19px; flex:1; margin-top:6px}
.hoja header .cerrar{margin-top:6px; width:40px; height:40px; border-radius:50%; border:none; background:var(--linea2); font-size:20px; cursor:pointer}
.hoja .cuerpoH{overflow:auto; padding:16px; flex:1}
.hoja footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--linea); background:var(--papel); display:flex; gap:10px; align-items:center}
.hoja footer .btn{min-width:0; padding-left:14px; padding-right:14px}
@media(min-width:700px){.velo{align-items:center} .hoja{border-radius:20px; max-height:88vh}}

/* pasos del configurador */
.paso{margin-bottom:18px}
.paso .tit{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.paso .tit b{font-size:15px}
.paso .tit small{font-size:12px; font-weight:800; padding:2px 8px; border-radius:99px; background:var(--linea2); color:var(--suave)}
.paso .tit small.oblig{background:var(--rojo-luz); color:var(--rojo)}
.paso .tit small.listo{background:var(--ok-luz); color:var(--ok)}
.ops{display:grid; gap:6px}
@media(min-width:460px){.ops.dos{grid-template-columns:1fr 1fr}}
.op{display:flex; align-items:center; gap:10px; padding:11px 12px; border:2px solid var(--linea); border-radius:var(--r2); background:var(--papel); cursor:pointer; min-height:46px; font-size:15px; text-align:left; width:100%}
.op .marca{width:22px; height:22px; border-radius:50%; border:2px solid var(--tenue); flex:none; display:grid; place-items:center; font-size:13px; color:#fff}
.op.cuadro .marca{border-radius:6px}
.op.on{border-color:var(--rojo); background:var(--rojo-luz)}
.op.on .marca{background:var(--rojo); border-color:var(--rojo)}
.op .mas{margin-left:auto; font-size:13px; font-weight:800; color:var(--suave)}
.op:disabled{opacity:.45; cursor:not-allowed}

/* cantidad */
.cant{display:inline-flex; align-items:center; border:2px solid var(--linea); border-radius:12px; background:var(--papel); overflow:hidden}
.cant button{width:46px; height:46px; border:none; background:none; font-size:22px; cursor:pointer; color:var(--tinta)}
.cant button:disabled{opacity:.3}
.cant b{min-width:34px; text-align:center; font-size:17px}
.cant.chica button{width:36px; height:36px; font-size:18px} .cant.chica b{min-width:26px; font-size:15px}

/* formularios */
label{display:block; font-size:14px; font-weight:800; margin:14px 0 6px}
label span{font-weight:600; color:var(--suave)}
input,select,textarea{font:inherit; width:100%; padding:13px 14px; border:2px solid var(--linea); border-radius:12px; background:var(--papel); color:var(--tinta); min-height:48px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--oro)}
textarea{min-height:80px; resize:vertical}
.error{color:var(--rojo); font-size:14px; font-weight:700; margin-top:8px}
.aviso{border-radius:12px; padding:12px 14px; font-size:14px; margin:12px 0}
.aviso.ok{background:var(--ok-luz); color:var(--ok)} .aviso.ambar{background:var(--ambar-luz); color:var(--ambar)} .aviso.rojo{background:var(--rojo-luz); color:var(--rojo)} .aviso.info{background:var(--hoja-luz); color:var(--hoja)}

/* líneas del carrito */
.linea{display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--linea2)}
.linea:last-child{border-bottom:none}
.linea b{font-size:15px}
.linea .det{font-size:13px; color:var(--suave); grid-column:1}
.linea .acc{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; margin-top:4px}
.linea .quitar{background:none; border:none; color:var(--rojo); font-weight:800; font-size:13px; cursor:pointer; padding:6px 0}
.totales{margin-top:12px; border-top:2px dashed var(--linea); padding-top:10px}
.totales div{display:flex; justify-content:space-between; padding:4px 0; font-size:15px}
.totales .tot{font-size:20px; font-weight:800; padding-top:8px}
.totales .dcto{color:var(--ok)}

/* bloques de retiro */
.bloques{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
@media(min-width:460px){.bloques{grid-template-columns:repeat(4,1fr)}}
.bloque{border:2px solid var(--linea); background:var(--papel); border-radius:12px; padding:10px 6px; text-align:center; cursor:pointer; min-height:62px}
.bloque b{display:block; font-size:16px}
.bloque small{font-size:11.5px; color:var(--suave); font-weight:700}
.bloque.on{border-color:var(--rojo); background:var(--rojo-luz)}
.bloque.on small{color:var(--rojo)}
.bloque:disabled{opacity:.4; cursor:not-allowed; text-decoration:line-through}
.bloque.poco small{color:var(--ambar)}

/* indicador de pasos del checkout */
.pasosNav{display:flex; gap:6px; margin-bottom:14px}
.pasosNav span{flex:1; height:5px; border-radius:99px; background:var(--linea)}
.pasosNav span.on{background:var(--rojo)}

/* segmentado */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--linea2); padding:4px; border-radius:12px}
.seg.tres{grid-template-columns:1fr 1fr 1fr}
.seg button{border:none; background:none; padding:10px; border-radius:9px; font-weight:800; font-size:14.5px; cursor:pointer; color:var(--suave); min-height:44px}
.seg button.on{background:var(--papel); color:var(--tinta); box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* confirmación / seguimiento */
.ticket{background:var(--papel); border:1px solid var(--linea); border-radius:18px; padding:22px 18px; text-align:center; position:relative; overflow:hidden}
.ticket::before{content:""; position:absolute; left:0; right:0; top:0; height:8px; background:repeating-linear-gradient(90deg,var(--rojo) 0 14px,var(--oro) 14px 28px)}
.ticket .num{font-family:var(--display); font-size:44px; line-height:1; margin:10px 0 2px}
.ticket .grande{font-size:28px; font-weight:800}
.pill{display:inline-flex; gap:6px; align-items:center; padding:7px 14px; border-radius:99px; font-weight:800; font-size:14px; white-space:nowrap}
.pill.recibido{background:var(--linea2); color:var(--suave)} .pill.confirmado{background:var(--hoja-luz); color:var(--hoja)}
.pill.preparando{background:var(--ambar-luz); color:var(--ambar)} .pill.listo{background:var(--ok-luz); color:var(--ok)}
.pill.entregado{background:var(--noche); color:var(--crema)} .pill.cancelado{background:var(--rojo-luz); color:var(--rojo)} .pill.no_retirado{background:var(--ambar-luz); color:var(--ambar)}
.cmd.no_retirado{opacity:.6}
.pill.pagado{background:var(--ok-luz); color:var(--ok)} .pill.pendiente{background:var(--ambar-luz); color:var(--ambar)} .pill.fallido{background:var(--rojo-luz); color:var(--rojo)} .pill.reembolsado{background:var(--linea2); color:var(--suave)}
.pill.web{background:var(--rojo-luz); color:var(--rojo)} .pill.presencial{background:var(--oro-luz); color:var(--oro-osc)}
.tiempo{display:grid; gap:0; text-align:left; margin:18px 0}
.tiempo .h{display:grid; grid-template-columns:28px 1fr; gap:10px; min-height:52px}
.tiempo .h .pto{width:28px; display:flex; flex-direction:column; align-items:center}
.tiempo .h .pto i{width:16px; height:16px; border-radius:50%; border:3px solid var(--linea); background:var(--papel); flex:none}
.tiempo .h .pto::after{content:""; flex:1; width:3px; background:var(--linea)}
.tiempo .h:last-child .pto::after{display:none}
.tiempo .h.hecho .pto i{background:var(--ok); border-color:var(--ok)} .tiempo .h.hecho .pto::after{background:var(--ok)}
.tiempo .h.ahora .pto i{background:var(--oro); border-color:var(--oro); box-shadow:0 0 0 5px var(--oro-luz)}
.tiempo .h b{display:block; font-size:15px} .tiempo .h small{color:var(--suave); font-size:13px}
.tiempo .h.futuro{opacity:.5}

/* pie */
footer.pie{background:var(--noche); color:rgba(244,231,201,.8); margin-top:40px; padding:32px 0 calc(100px + env(safe-area-inset-bottom)); font-size:14px}
footer.pie .cont{display:grid; gap:16px}
footer.pie b{color:var(--crema)}
footer.pie a{color:var(--oro)}
@media(min-width:700px){footer.pie .cont{grid-template-columns:1fr 1fr 1fr}}

/* ============================================================
   PANEL ADMIN (denso, rápido) y COCINA (oscuro, grande)
   ============================================================ */
.appBarra{background:var(--noche); color:var(--crema); border-bottom:3px solid var(--oro); position:sticky; top:0; z-index:40}
.appBarra .fila{height:56px; display:flex; align-items:center; gap:10px; padding:0 14px; max-width:1400px; margin:0 auto}
.appBarra img{width:36px; height:36px; border-radius:50%}
.appBarra .nombre{font-family:var(--display); font-size:16px; white-space:nowrap}
.appBarra .nombre small{display:block; font-family:var(--texto); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--oro); font-weight:800}
.appBarra .der{margin-left:auto; display:flex; gap:8px; align-items:center; font-size:13px}
.appBarra .quien{color:rgba(244,231,201,.7); white-space:nowrap}
@media(max-width:520px){.appBarra .quien{display:none}}
.appBarra button.salir{background:none; border:1px solid rgba(244,231,201,.3); color:var(--crema); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:13px; min-height:36px}

.app{display:grid; max-width:1400px; margin:0 auto; min-height:calc(100dvh - 56px)}
.app > *{min-width:0}
.app{align-content:start}
@media(min-width:900px){.app{align-content:stretch}}
.nav{display:flex; gap:4px; overflow-x:auto; padding:8px 12px; background:var(--papel); border-bottom:1px solid var(--linea); scrollbar-width:none; position:sticky; top:56px; z-index:30}
.nav::-webkit-scrollbar{display:none}
.nav button{flex:none; border:none; background:none; padding:9px 12px; border-radius:9px; font-weight:800; font-size:14px; color:var(--suave); cursor:pointer; min-height:40px; white-space:nowrap}
.nav button.on{background:var(--noche); color:var(--crema)}
.nav .grupo{display:none}
.nav button + .grupo, .nav .grupo:first-child{}
.nav button .n{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; margin-left:6px; border-radius:99px; background:var(--rojo); color:#fff; font-size:11.5px}
.vista{padding:16px 14px 60px}
@media(min-width:900px){
  .app{grid-template-columns:220px 1fr}
  .nav{flex-direction:column; position:sticky; top:56px; height:calc(100dvh - 56px); border-right:1px solid var(--linea); border-bottom:none; padding:14px 10px; overflow:auto}
  .nav button{text-align:left; padding:10px 12px; font-size:14.5px}
  .nav .grupo{display:block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--tenue); padding:14px 12px 4px}
  .nav .grupo:first-child{padding-top:2px}
  .cocina .nav .grupo{display:none}
  .vista{padding:22px 26px 60px}
}
.vista h1{font-size:24px; margin-bottom:4px}
.vista h2{font-size:17px; margin:22px 0 10px}
.tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:16px; box-shadow:0 1px 2px rgba(31,24,18,.04)}
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(min-width:760px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:14px}
.kpi .v{font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.1}
.kpi .e{font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--suave); margin-bottom:4px}
.kpi .s{font-size:13px; color:var(--suave); margin-top:4px}
.kpi.alerta{border-color:var(--ambar); background:var(--ambar-luz)}

.tabla{width:100%; border-collapse:collapse; font-size:14px; background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden}
.tabla th,.tabla td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--linea2); vertical-align:middle}
.tabla th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--suave); background:var(--linea2)}
.tabla tr:last-child td{border-bottom:none}
.tabla td.num,.tabla th.num{text-align:right; font-variant-numeric:tabular-nums}
.tabla .mini{font-size:12.5px; color:var(--suave)}
.scrollX{overflow-x:auto; -webkit-overflow-scrolling:touch}
.herr{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 12px}
.herr input,.herr select{width:auto; min-width:160px; min-height:42px; padding:9px 12px}
.herr .btn{min-height:42px}

/* interruptor */
.sw{position:relative; width:46px; height:26px; border-radius:99px; background:var(--linea); border:none; cursor:pointer; flex:none; transition:.15s}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw.on{background:var(--ok)} .sw.on::after{left:23px}

/* fila de producto en carta admin */
.fProd{display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--linea2)}
.fProd:last-child{border-bottom:none}
.fProd .ico{width:44px; height:44px; border-radius:10px; background:var(--crema2); display:grid; place-items:center; font-size:22px}
.fProd b{font-size:15px; display:block}
.fProd small{color:var(--suave); font-size:12.5px}
.fProd .ctrl{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.fProd input.p{width:92px; text-align:right; min-height:38px; padding:6px 8px; font-weight:800}
.fProd .stockN{font-weight:800; min-width:34px; text-align:center}
.fProd .stockN.cero{color:var(--rojo)} .fProd .stockN.poco{color:var(--ambar)}

/* barras de reporte */
.barras{display:flex; align-items:flex-end; gap:6px; height:140px; padding:8px 0 0}
.barras div{flex:1; background:var(--rojo); border-radius:5px 5px 0 0; position:relative; min-height:3px}
.barras div.web{background:var(--rojo)} .barras div.pres{background:var(--oro)}
.barras div span{position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:11px; color:var(--suave); font-weight:700}
.barras div i{position:absolute; top:-18px; left:0; right:0; text-align:center; font-size:10.5px; font-style:normal; font-weight:800; color:var(--suave)}
.leyenda{display:flex; gap:14px; font-size:12.5px; color:var(--suave); margin-top:28px}
.leyenda i{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:5px}

/* POS venta presencial */
.pos{display:grid; gap:14px}
.pos > *{min-width:0}
@media(min-width:900px){.pos{grid-template-columns:1fr 360px}}
.catTiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px}
.catTile{border:1px solid var(--linea); border-left:6px solid var(--c, var(--tenue)); background:var(--papel); border-radius:8px; min-height:52px; padding:8px 10px; font-weight:800; font-size:14.5px; cursor:pointer; color:var(--tinta)}
.catTile:hover{border-color:var(--tenue); border-left-color:var(--c)}
.catTile.on{background:var(--rojo-luz); border-color:var(--rojo); border-left-color:var(--c)}
.catTile.mas{border-left-width:1px; background:none; font-size:13px; color:var(--suave)}
.posGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.posBtn{border:1px solid var(--linea); border-left:4px solid var(--c, var(--linea)); background:var(--papel); border-radius:8px; padding:10px 34px 10px 12px; text-align:left; cursor:pointer; min-height:76px; display:flex; flex-direction:column; gap:4px; position:relative; user-select:none}
.posBtn:hover{border-color:var(--tenue); border-left-color:var(--c)}
.posBtn:active{transform:scale(.98)}
.posBtn b{font-size:14px; line-height:1.2}
.posBtn span{font-size:14px; font-weight:800; color:var(--rojo)}
.posBtn span small{color:var(--suave); font-weight:700}
.posBtn em{font-style:normal; font-size:11.5px; font-weight:700; color:var(--suave); background:var(--linea2); border-radius:99px; padding:1px 8px; align-self:flex-start}
.posBtn.agot{opacity:.45}
.posBtn .fav{position:absolute; top:4px; right:4px; width:30px; height:30px; border:none; background:none; font-size:17px; color:var(--oro-osc); cursor:pointer; border-radius:8px; line-height:1}
.posBtn .fav:hover{background:var(--oro-luz)}
.posBtn .cnt{position:absolute; top:-7px; left:-7px; background:var(--ok); color:#fff; border-radius:99px; min-width:22px; height:22px; display:grid; place-items:center; font-size:12px; font-weight:800}

/* ---------- COCINA (pantalla oscura) ---------- */
body.cocina{background:var(--noche); color:var(--crema)}
.cocina .appBarra{border-bottom-color:var(--rojo)}
.kds{padding:14px; display:grid; gap:12px; max-width:1600px; margin:0 auto}
@media(min-width:720px){.kds{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.kds{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1500px){.kds{grid-template-columns:repeat(4,1fr)}}
.cmd{background:var(--noche2); border:2px solid var(--noche3); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; animation:fade .2s}
.cmd.nuevo{animation:parpadea 1s ease-in-out 4}
@keyframes parpadea{50%{box-shadow:0 0 0 6px var(--oro); border-color:var(--oro)}}
.cmd .cab{display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--noche3)}
.cmd .cab .num{font-family:var(--display); font-size:26px; line-height:1; white-space:nowrap}
.cmd .cab{flex-wrap:wrap; row-gap:6px}
.cmd .cab .pill{order:5; flex-basis:auto}
.cmd .cab .hora{font-size:22px; font-weight:800; margin-left:auto; font-variant-numeric:tabular-nums}
.cmd .cab .imp{background:rgba(255,255,255,.12);border:none;color:inherit;border-radius:10px;width:40px;height:40px;font-size:18px;cursor:pointer;flex:none}
.cmd .cab .hora small{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--oro); text-align:right}
.cmd.urgente .cab{background:var(--rojo)} .cmd.urgente .cab .hora small{color:#fff}
.cmd.preparando{border-color:var(--oro)}
.cmd.listo{border-color:var(--ok)} .cmd.listo .cab{background:var(--ok)}
.cmd .items{padding:12px 14px; flex:1}
.cmd .it{display:grid; grid-template-columns:40px 1fr; gap:8px; padding:8px 0; border-bottom:1px dashed rgba(244,231,201,.15); font-size:17px}
.cmd .it:last-child{border-bottom:none}
.cmd .it .q{font-size:22px; font-weight:800; color:var(--oro); line-height:1.1}
.cmd .it b{font-size:18px; line-height:1.2; display:block}
.cmd .it small{display:block; color:rgba(244,231,201,.75); font-size:14.5px; margin-top:3px; line-height:1.35}
.cmd .nota{margin:8px 14px 0; background:rgba(224,165,43,.15); border-left:4px solid var(--oro); padding:8px 10px; font-size:15px; border-radius:6px}
.cmd .meta{display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; font-size:13px; color:rgba(244,231,201,.75); align-items:center}
.cmd .meta .pill{font-size:12px; padding:4px 10px}
.cmd .acc{display:grid; grid-template-columns:1fr; gap:8px; padding:10px 14px 14px}
.cmd .acc.dos{grid-template-columns:1fr 1fr}
.cmd .acc .btn{min-height:58px; font-size:18px; border-radius:12px; padding:0 10px; white-space:normal; line-height:1.15}
@media(max-width:420px){.cmd .acc.dos{grid-template-columns:1fr}}
.cocina .nav{background:var(--noche2); border-color:var(--noche3)}
@media(min-width:900px){.cocina .nav{flex-direction:row; height:auto; border-right:none; border-bottom:1px solid var(--noche3); padding:8px 12px} .cocina .nav button{text-align:center; padding:9px 12px; font-size:14px}}
.cocina .nav button{color:rgba(244,231,201,.65)} .cocina .nav button.on{background:var(--crema); color:var(--noche)}
.vacio{padding:40px 20px; text-align:center; color:rgba(244,231,201,.5); grid-column:1/-1; font-size:17px}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--noche); color:var(--crema); padding:12px 18px; border-radius:12px; font-weight:800; font-size:15px; z-index:90; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:fade .2s; max-width:92vw; text-align:center}
.toast.ok{background:var(--ok); color:#fff} .toast.rojo{background:var(--rojo); color:#fff}

/* ---------- mesas ---------- */
.mesasGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:10px}
.mesa{border:2px solid var(--linea); background:var(--papel); border-radius:14px; min-height:104px; padding:12px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:3px; font:inherit; color:var(--tinta)}
.mesa b{font-size:17px}
.mesa span{font-size:13px; color:var(--suave); font-weight:700}
.mesa.libre{border-style:dashed; background:var(--fondo)}
.mesa.libre:hover{border-color:var(--ok); border-style:solid}
.mesa.ocupada{border-color:var(--oro); background:var(--oro-luz)}
.mesa.ocupada strong{font-size:20px; font-weight:800}
.mesa.ocupada.larga{border-color:var(--rojo)}
.mesa em{font-style:normal; font-size:12px; font-weight:800; color:#fff; background:var(--rojo); border-radius:99px; padding:2px 8px; align-self:flex-start}
.mesa:disabled{opacity:.5; cursor:default}
@media(max-width:899px){ .barraMesa{position:sticky; bottom:0; background:var(--papel); padding:10px 0 6px; z-index:5} }