:root{
  --bg:#f2f4ef; --surface:#ffffff; --ink:#1b231e; --muted:#5d6a61; --line:#d6ddd5;
  --band:#173b2a; --band-ink:#eef5f0; --band-muted:#a9c2b3;
  --accent:#1f6b47; --accent-ink:#ffffff; --accent-soft:#e1eee6;
  --hot:#c2410c; --hot-soft:#fde9de; --warn:#a66a10; --warn-soft:#fbf0d9;
  --ticket:#fffdf5;
  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Nunito Sans",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#111613; --surface:#19201b; --ink:#e7ede8; --muted:#97a59b; --line:#2b3530;
  --band:#0b120e; --band-ink:#e7ede8; --band-muted:#86a191;
  --accent:#4cb07e; --accent-ink:#0b1a12; --accent-soft:#1c3427;
  --hot:#f08552; --hot-soft:#3a2117; --warn:#e2b154; --warn-soft:#33291a;
  --ticket:#1e2620; color-scheme:dark }}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--band)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* Pantallas de acceso */
.auth{min-height:100vh;display:grid;place-items:center;background:var(--band);
  padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.auth-card{width:100%;max-width:380px;background:var(--surface);border-radius:18px;padding:26px 22px;display:grid;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.brand-lg{font-family:var(--f-display);font-weight:700;font-size:34px;text-transform:uppercase;line-height:1;color:var(--accent)}
.auth-card p{margin:0;color:var(--muted);font-size:14px}
.auth-card label,.form label{display:grid;gap:5px;font-size:13px;font-weight:700}
.auth-card input,.form input,.form select{height:48px;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:0 12px;font-size:16px;font-weight:400;width:100%}
.pw{display:flex;gap:6px}
.pw button{flex:none;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:0 12px;font-weight:700;font-size:13px}
.err{background:var(--hot-soft);color:var(--hot);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:700}
.loading{min-height:100vh;display:grid;place-items:center;font-family:var(--f-display);font-size:24px;text-transform:uppercase;color:var(--muted)}

/* Banda superior */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--band);color:var(--band-ink);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding-block:10px 0}
.brand{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.5px;text-transform:uppercase;margin-right:auto;line-height:1}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--band-muted)}
.who b{color:var(--band-ink)}
.who button{border:1px solid var(--band-muted);background:none;color:var(--band-ink);border-radius:8px;padding:5px 10px;font-weight:700;font-size:13px}
.tabs{display:flex;gap:4px;width:100%}
.tab{flex:1;background:none;border:0;color:var(--band-muted);font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:10px 6px 11px;border-bottom:4px solid transparent;display:flex;align-items:center;justify-content:center;gap:6px}
.tab.on{color:var(--band-ink);border-bottom-color:var(--accent)}
.badge{font-family:var(--f-mono);font-size:12px;background:var(--hot);color:#fff;border-radius:999px;padding:1px 7px;line-height:1.4}
@media (min-width:760px){ .tabs{width:auto;order:2} .tab{flex:none;padding-inline:18px} .who{order:3} }

.wrap{max-width:1320px;margin:0 auto;padding-block:16px 130px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lbl{display:block;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.stack{display:grid;gap:16px}

.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 15px;min-height:40px;font-weight:700;font-size:14px}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* Mis órdenes (mesero) */
.mine{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.mine::-webkit-scrollbar{display:none}
.mo{flex:none;border-radius:10px;padding:7px 12px;font-size:13px;font-weight:800;border:1px solid var(--line);background:var(--surface)}
.mo.nueva{border-color:var(--hot);color:var(--hot)}
.mo.preparando{border-color:var(--warn);color:var(--warn)}
.mo.lista{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.65}}

.mesas{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.mesa{height:46px;border:1px solid var(--line);background:var(--surface);border-radius:10px;font-family:var(--f-display);font-size:22px;font-weight:600;position:relative}
.mesa.busy::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--hot)}
.mesa.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.hint{font-size:12px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--hot);display:inline-block}
.search{width:100%;height:48px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:0 14px;font-size:16px}

.dishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dish{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;min-height:96px;display:flex;flex-direction:column;gap:4px;position:relative;transition:transform .12s}
.dish:active{transform:scale(.97)}
.dish .dn{font-family:var(--f-display);font-size:20px;font-weight:600;line-height:1.05}
.dish .dp{font-family:var(--f-mono);font-size:13px;color:var(--accent);font-weight:700}
.dish .di{font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dish .cnt{position:absolute;top:8px;right:8px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-mono);font-size:12px;font-weight:700;border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;padding:0 6px}
.empty{color:var(--muted);padding:18px;text-align:center;border:1px dashed var(--line);border-radius:12px}

.m-layout{display:grid;gap:20px}
.m-layout > *{min-width:0}
.order{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:12px;align-content:start}
.order h2{margin:0;font-family:var(--f-display);font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.line{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:8px}
.line-head{display:flex;align-items:center;gap:10px}
.line-head b{font-family:var(--f-display);font-size:20px;font-weight:600;flex:1;line-height:1.1;min-width:0}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none}
.qty button{width:38px;height:38px;border:0;background:var(--bg);font-size:20px;font-weight:700}
.qty span{min-width:28px;text-align:center;font-family:var(--f-mono);font-weight:700}
.lp{font-family:var(--f-mono);font-size:14px;font-weight:700}
.ings{display:flex;flex-wrap:wrap;gap:6px}
.ing{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600}
.ing.off{background:var(--hot-soft);border-color:var(--hot);color:var(--hot);text-decoration:line-through}
.qtags{display:flex;flex-wrap:wrap;gap:6px}
.qtag{border:1px dashed var(--line);background:none;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:700;color:var(--muted)}
.qtag.on{border-style:solid;border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.note{width:100%;height:44px;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:0 12px;font-size:16px}
.tip{font-size:12px;color:var(--muted)}

.sendbar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);
  padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sendbar-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:12px}
.sum{flex:1;min-width:0;line-height:1.2}
.sum strong{font-family:var(--f-mono);font-size:20px;display:block}
.sum small{color:var(--muted);font-size:13px}
.btn{border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:0 22px;height:52px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.btn.sm{height:42px;font-size:16px;padding:0 14px;border-radius:10px}

@media (min-width:900px){
  .m-layout{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);align-items:start}
  .order{position:sticky;top:76px;max-height:calc(100vh - 180px);overflow:auto}
}

/* Cocina */
.k-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.k-title{font-family:var(--f-display);font-size:30px;font-weight:700;text-transform:uppercase;margin:0;line-height:1}
.k-title small{display:block;font-family:var(--f-body);font-size:13px;font-weight:600;color:var(--muted);text-transform:none;margin-top:4px}
.rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;align-items:start}
.ticket{background:var(--ticket);border:1px solid var(--line);border-top:7px solid var(--accent);border-radius:6px;box-shadow:0 2px 0 var(--line);display:grid}
.ticket.s-nueva{border-top-color:var(--hot)}
.ticket.s-preparando{border-top-color:var(--warn)}
.t-head{padding:12px 14px;border-bottom:2px dashed var(--line);display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
.t-mesa{font-family:var(--f-display);font-size:32px;font-weight:700;line-height:1;text-transform:uppercase}
.t-age{font-family:var(--f-mono);font-weight:700;font-size:15px;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.t-age.warn{background:var(--warn-soft);color:var(--warn)}
.t-age.late{background:var(--hot);color:#fff}
.t-meta{font-size:13px;color:var(--muted);grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.t-status{font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:11px}
.t-items{list-style:none;margin:0;padding:6px 14px;display:grid}
.t-items li{padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
.t-items li:last-child{border-bottom:0}
.t-items li.done .kn,.t-items li.done .kq{text-decoration:line-through;opacity:.45}
.kq{font-family:var(--f-mono);font-weight:700;font-size:17px;margin-right:4px}
.kn{font-family:var(--f-display);font-size:22px;font-weight:600}
.sin{color:var(--hot);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.ktags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.ktags span{background:var(--warn-soft);color:var(--warn);border-radius:6px;padding:2px 7px;font-size:12px;font-weight:800}
.knote{font-style:italic;font-size:14px;margin-top:4px;padding:4px 8px;border-left:3px solid var(--warn);background:var(--warn-soft);border-radius:0 6px 6px 0}
.t-foot{padding:10px 14px 14px}
.t-foot .btn{width:100%}
.t-foot .btn.s-nueva{background:var(--hot);color:#fff}
.t-foot .btn.s-preparando{background:var(--warn);color:#fff}
@media (min-width:1200px){ .rail{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .kn{font-size:24px} }

/* Admin */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.panel h3{margin:0 0 12px;font-family:var(--f-display);font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.a-grid{display:grid;gap:16px}
@media (min-width:980px){ .a-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);align-items:start} }
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:800;padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
td.num,th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td .dn{font-family:var(--f-display);font-size:19px;font-weight:600;line-height:1.1}
td .ings .ing{font-size:12px;padding:2px 7px}
.cat{font-size:12px;color:var(--muted);font-weight:700}
.row-act{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.lnk{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:5px 10px;font-size:13px;font-weight:700;white-space:nowrap}
.lnk.danger{color:var(--hot);border-color:var(--hot)}
.form{display:grid;gap:12px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:760px){ .kpis{grid-template-columns:repeat(4,1fr)} }
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.kpi b{display:block;font-family:var(--f-mono);font-size:24px;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.bar{height:8px;border-radius:4px;background:var(--accent);min-width:3px}
.barcell{width:38%}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:800;background:var(--accent-soft);color:var(--accent)}
.pill.off{background:var(--hot-soft);color:var(--hot)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;font-weight:700;max-width:calc(100% - 32px);box-shadow:0 6px 20px rgba(0,0,0,.2)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* Mensaje informativo en pantallas de acceso */
.info{background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:700}

/* ===== Menú agrupado por familias (Admin) ===== */
.mtool{display:grid;gap:10px;margin-bottom:14px}
.mtool-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mtool-head h3{margin:0}
.mtool-head .lnk{margin-left:auto}
.mgroup{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mgroup + .mgroup{margin-top:10px}
.mg-head{display:flex;align-items:center;gap:8px;background:var(--bg);padding:6px 10px 6px 4px}
.mg-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:none;text-align:left;padding:6px;font-family:var(--f-display);font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.mg-name{min-width:0;overflow-wrap:anywhere}
.caret{width:14px;flex:none;color:var(--muted);font-size:14px}
.mg-n{flex:none;font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:0;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;border-top:1px solid var(--line)}
.mrow.editing{background:var(--accent-soft)}
.mrow-main{min-width:0}
.mrow .dn{font-family:var(--f-display);font-size:20px;font-weight:600;line-height:1.1;margin-bottom:6px}
.mrow .ing{font-size:12px;padding:2px 7px}
.mrow-side{display:grid;justify-items:end;align-content:start;gap:8px}
.mprice{font-weight:700;font-size:15px}
@media (max-width:520px){
  .mrow{grid-template-columns:1fr}
  .mrow-side{grid-auto-flow:column;justify-content:space-between;align-items:center;justify-items:start}
}
mark{background:var(--warn-soft);color:inherit;border-radius:3px;box-shadow:0 0 0 1px var(--warn)}
.cat-pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.cat-pick button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700}
.cat-pick button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.preview{font-size:13px;padding:9px 11px;border-radius:8px;background:var(--bg);border:1px dashed var(--line)}
@media (min-width:980px){ .a-side{position:sticky;top:76px} }

/* ===== Familias en mesero y cocina ===== */
.dgroup{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:6px;font-family:var(--f-display);font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.dgroup:first-child{margin-top:0}
.dgroup::after{content:"";flex:1;height:1px;background:var(--line)}
.dish .dc{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.line-cat{display:block;font-family:var(--f-body);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.kc{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-right:5px}

/* ===== Comer aquí / Para llevar ===== */
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{height:46px;border:0;background:var(--bg);font-family:var(--f-display);font-size:18px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.seg button + button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
.seg button.on.llevar{background:var(--hot);color:#fff}
.t-dest{grid-column:1/-1;justify-self:start;margin-top:4px;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.t-dest.llevar{background:var(--hot);border-color:var(--hot);color:#fff;font-size:15px;padding:4px 10px}

/* ===== Orden: colores alternados por platillo ===== */
:root{ --org:#c46a12; --org-soft:#fdecd8; }
@media (prefers-color-scheme: dark){ :root{ --org:#f0a04b; --org-soft:#35281a; } }
.line{border-top:0;padding:12px;border-radius:12px;border-left:6px solid transparent}
.line.alt-a{background:var(--accent-soft);border-left-color:var(--accent)}
.line.alt-b{background:var(--org-soft);border-left-color:var(--org)}
.line .ing:not(.off),.line .note,.line .qty button,.line .qty{background:var(--surface)}
.line-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;font-weight:700;color:#fff}
.alt-a .line-n{background:var(--accent);color:var(--accent-ink)}
.alt-b .line-n{background:var(--org)}

/* ===== Botón "Ver orden" junto a las familias ===== */
.m-layout .stack > *{min-width:0}
.cats-row{display:flex;gap:8px;align-items:center}
.cats-row .chips{flex:1;min-width:0}
.vieworder{flex:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--accent);background:var(--surface);color:var(--accent);font-weight:800;font-size:14px}
.vieworder.has{background:var(--accent);color:var(--accent-ink)}
.sum{border:0;background:none;text-align:left;padding:0;cursor:pointer}
.sum-see{color:var(--accent);font-weight:800}
.seg.small button{height:38px;font-size:15px}
.cartmode{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;font-weight:700;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px}
.cartmode .seg{flex:1;min-width:210px}
.toast{z-index:60}

/* En computadora la orden ya está a un lado: no hacen falta estos controles */
@media (min-width:900px){
  .vieworder,.sheet-bar,.cartmode,.sum-see{display:none!important}
  .sum{cursor:default}
}

/* ===== Teléfono: la orden en ventana aparte ===== */
@media (max-width:899px){
  .mode-ventana #m-cart:not(.open){display:none}
  #m-cart:not(.open) .sheet-bar{display:none}
  #m-cart.open{position:fixed;inset:0;z-index:35;grid-auto-rows:max-content;align-content:start;border:0;border-radius:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:calc(110px + env(safe-area-inset-bottom,0px));
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px))}
  .sheet-bar{position:sticky;top:0;z-index:2;background:var(--surface);padding-block:10px;border-bottom:1px solid var(--line);margin:0 -16px;padding-inline:16px}
  body.sheet-open{overflow:hidden}
  body.sheet-open .sendbar{z-index:45}
}

/* ===== Personas en la orden ===== */
.personas-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--top-h,60px));z-index:15;background:var(--bg);padding-block:8px;margin-block:-8px;border-bottom:1px solid var(--line)}
.personas-bar .lbl{margin-bottom:4px}
.pchip{flex:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:800;font-size:14px}
.pchip.on{background:var(--org);border-color:var(--org);color:#fff}
.pchip.shared.on{background:var(--warn);border-color:var(--warn)}
.pchip.add{border-style:dashed;color:var(--accent);border-color:var(--accent)}
.pn{font-family:var(--f-mono);font-size:12px;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:0 7px;line-height:1.6}
.pchip.on .pn{background:rgba(255,255,255,.25);color:#fff}
.phead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px;padding-bottom:4px;border-bottom:2px solid var(--ink)}
.phead span{font-family:var(--f-display);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.phead .lnk{font-size:12px}
.t-items li.kp{cursor:default;padding:8px 0 4px;border-bottom:2px solid var(--ink);font-family:var(--f-display);font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--org)}
.t-items li.kp.shared{color:var(--warn)}
@media (min-width:900px){ .personas-bar{position:static;margin-block:0;padding-block:0;border-bottom:0} }

/* ===== Mesa: en teléfono solo un botón; la cuadrícula completa en computadora ===== */
.pb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.pb-head .lbl{margin:0}
.mesa-chip{flex:none;border:1px dashed var(--hot);color:var(--hot);background:var(--surface);border-radius:999px;padding:5px 12px;font-weight:800;font-size:13px}
.mesa-chip.on{border-style:solid;border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
@media (max-width:899px){ .mesa-full{display:none} }
@media (min-width:900px){ .mesa-chip{display:none} }

.modal{position:fixed;inset:0;z-index:55;background:rgba(10,20,14,.55);display:grid;place-items:end center;
  padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.modal-card{width:100%;max-width:440px;background:var(--surface);border-radius:18px;padding:18px;display:grid;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.modal-card h3{margin:0;font-family:var(--f-display);font-size:24px;font-weight:700;text-transform:uppercase}
.modal-card .mesas{grid-template-columns:repeat(4,1fr);gap:8px}
.modal-card .mesa{height:56px;font-size:26px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.modal-actions .btn{flex:1;white-space:nowrap}
.modal-actions .btn.ghost{flex:none}
.modal-actions .btn:not(.ghost){font-size:18px;height:48px}
body.modal-open{overflow:hidden}

/* ===== Platillos con opciones (Lata / Botella, Chico / Mediano / Grande) ===== */
.dish.has-opts{cursor:default}
.dish.has-opts:active{transform:none}
.optbtns{display:flex;flex-wrap:wrap;gap:6px;margin-block:4px}
.optbtns button{position:relative;flex:1 1 60px;min-height:46px;display:grid;justify-items:center;align-content:center;gap:1px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--ink);border-radius:10px;padding:4px 6px;font-weight:800;font-size:13px}
.optbtns button b{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.optbtns button em{position:absolute;top:-7px;right:-5px;font-style:normal;font-family:var(--f-mono);font-size:11px;background:var(--accent);color:var(--accent-ink);border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px}
.optbtns button:active{transform:scale(.96)}
.line-opt{font-family:var(--f-body);font-size:13px;font-weight:800;background:var(--surface);border-radius:6px;padding:1px 7px;vertical-align:middle}
.lopts{display:flex;flex-wrap:wrap;gap:6px}
.lopts button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 10px;font-size:13px;font-weight:700}
.lopts button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.kopt{display:inline-block;margin-left:6px;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;background:var(--ink);color:var(--bg);border-radius:6px;padding:1px 8px;vertical-align:middle}

/* Admin: editor de opciones */
.optbox{display:grid;gap:8px;border:1px dashed var(--line);border-radius:12px;padding:12px}
.optbox-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.optrows{display:grid;gap:6px}
.optrows:empty{display:none}
.optrow{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:6px;align-items:center}
.optrow input{height:42px;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:0 10px;font-size:15px;width:100%;min-width:0}
.optbtns-admin{display:flex;flex-wrap:wrap;gap:6px}
.mopts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.mopts span{font-size:13px;font-weight:700;border:1px solid var(--accent);background:var(--accent-soft);border-radius:8px;padding:2px 8px}
.form input:disabled{opacity:.55}

/* ===== Teléfono: sin el nombre de la app para ganar espacio ===== */
@media (max-width:899px){
  .top .brand{display:none}
  .top-in{padding-top:4px}
  .who{margin-left:auto}
}

/* ===== Renglón de la orden: nombre grande en una sola línea ===== */
.line-head{align-items:flex-start}
.line-head .lname{flex:1;min-width:0;font-family:var(--f-display);font-size:24px;font-weight:700;line-height:1.1}
.lname .line-cat{display:inline;font-family:var(--f-display);font-size:24px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--accent)}
.alt-b .lname .line-cat{color:var(--org)}
.line-head .lp{padding-top:4px}
.line-head .line-n{margin-top:1px}
.line-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* Encabezado de persona y selector "Toda la mesa / Persona" */
.phead span em{font-style:normal;font-size:15px;color:var(--muted);margin-left:6px}
.phead-act{display:flex;gap:6px}
.cfilter{padding-bottom:2px}
.pb-tip{font-size:11px;color:var(--muted);margin-top:4px}

/* ===== Cocina: bebidas ===== */
.t-items li.nok{opacity:.7}
.nok-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);border:1px dashed var(--muted);border-radius:6px;padding:0 6px;margin-bottom:3px}
.famk{flex:none;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent)}
.famk.off{border-style:dashed;border-color:var(--muted);background:var(--surface);color:var(--muted)}
@media (max-width:520px){ .mg-head{flex-wrap:wrap} }
.kc{font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:.3px;color:var(--org);margin-right:6px}
.t-foot .btn{font-size:18px;white-space:nowrap}

/* ===== Mesas: tuya / de otro mesero ===== */
.mesa{display:grid;place-items:center;align-content:center;line-height:1;height:54px}
.mesa small{font-family:var(--f-body);font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:none;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.mesa.mine{border:2px solid var(--accent);color:var(--accent)}
.mesa.mine.on{color:var(--accent-ink)}
.mesa.taken{background:var(--hot-soft);border-color:var(--hot);color:var(--hot);opacity:.85}
.mesa.busy::after,.mesa.taken::after,.mesa.mine::after{content:none}
.modal-card .mesa{height:60px}
.hint .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-left:6px}
.hint .sw:first-child{margin-left:0}
.sw.mine{border:2px solid var(--accent)}
.sw.taken{background:var(--hot-soft);border:1px solid var(--hot)}
.mo{cursor:pointer;font-family:inherit}
.mo.abierta{border-color:var(--accent);color:var(--accent)}
.mo.sel{outline:2px solid var(--ink);outline-offset:1px}

/* ===== Orden: cantidad al principio, sin número ni precio ===== */
.line-head{align-items:center;gap:10px}
.line-head .qty button{width:34px;height:34px}
.line-head .lname{font-size:22px}
.line-head .lname .line-cat{font-size:22px}

/* Lo que ya se pidió en esta mesa */
.sent-lbl{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:2px}
.sent-lbl.new{color:var(--accent)}
.sentlist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sentlist li{display:flex;align-items:baseline;gap:8px;padding:7px 10px;border-radius:10px;background:var(--bg);border:1px dashed var(--line)}
.sentlist .sq{font-family:var(--f-mono);font-weight:700;flex:none}
.sentlist .sn{flex:1;min-width:0;font-family:var(--f-display);font-size:19px;font-weight:600;line-height:1.15}
.sentlist .sn .line-cat{font-size:19px;color:var(--muted)}
.sentlist .ss{font-family:var(--f-body);font-style:normal;font-size:12px;font-weight:800;color:var(--hot);text-transform:uppercase}
.sst{flex:none;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;border-radius:999px;padding:2px 8px;background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.sst.new{color:var(--hot);border-color:var(--hot)}
.sst.prep{color:var(--warn);border-color:var(--warn)}
.sst.ready{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.freebox{display:grid;gap:8px;border-top:1px dashed var(--line);padding-top:12px}
.btn.danger{color:var(--hot);border-color:var(--hot)}
.t-ronda{font-weight:800;color:var(--org)}

/* ===== Cuenta (recibo) de la mesa ===== */
.modal-card.cuenta{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);grid-template-rows:auto minmax(0,1fr) auto auto auto;overflow:hidden}
.rc-head .tip{margin-top:4px}
.rc-body{overflow-y:auto;overscroll-behavior:contain;display:grid;gap:6px;align-content:start;border-block:1px dashed var(--line);padding-block:8px}
.rc-p{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-display);font-size:18px;font-weight:700;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-top:6px}
.rc-p .mono{font-size:14px}
.rc-t{width:100%;border-collapse:collapse;font-size:14px}
.rc-t td{padding:5px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.rc-t td.cq{width:28px;font-family:var(--f-mono);font-weight:700}
.rc-t .line-cat{font-size:14px;font-family:var(--f-display);font-weight:700;color:var(--muted)}
.rc-t .line-opt{font-size:11px;background:var(--bg)}
.rc-t .ss{font-style:normal;font-size:11px;font-weight:800;color:var(--hot);text-transform:uppercase}
.rc-total{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-display);font-size:28px;font-weight:700;text-transform:uppercase}
.btn.warn{background:var(--hot);color:#fff}

/* ===== Pestaña Bebidas ===== */
.ticket.drink{border-top-color:var(--org)}
.ticket.drink .t-foot .btn{background:var(--org);color:#fff}
.sentlist .line-cat,.rc-t .line-cat{display:inline}

/* ===== Orden: nombres más grandes y botón para quitar ===== */
.line-head .lname,.line-head .lname .line-cat{font-size:24px}
.ldel{flex:none;align-self:flex-start;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:14px;font-weight:800;display:grid;place-items:center}
.ldel:hover,.ldel:focus-visible{color:var(--hot);border-color:var(--hot)}
.sentlist .sn,.sentlist .sn .line-cat{font-size:21px}
.sentlist .sq{font-size:17px}
button.sst{cursor:pointer;font-family:inherit}
button.sst.ready{animation:pulse 1.6s infinite}

/* Cocina: lista, esperando al mesero */
.t-wait{text-align:center;font-weight:800;font-size:14px;color:var(--accent);background:var(--accent-soft);border-radius:10px;padding:12px}

/* ===== Recibo: subtotal y tax ===== */
.rc-sums{display:grid;gap:2px;font-size:14px;color:var(--muted)}
.rc-sums div{display:flex;justify-content:space-between}
.modal-card.cuenta{grid-template-rows:auto minmax(0,1fr) auto auto auto auto}

/* ===== Ventas: una línea por orden ===== */
.sales{display:grid;gap:6px}
.sale{display:grid;grid-template-columns:70px 160px minmax(0,1fr) 60px 90px;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;font-size:14px}
.sale:hover{border-color:var(--accent);background:var(--accent-soft)}
.s-num{font-weight:700}
.s-when{color:var(--muted);font-size:13px;white-space:nowrap}
.s-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.s-n{color:var(--muted);font-size:13px;text-align:right}
.s-total{text-align:right;font-weight:700;font-size:15px}
@media (max-width:640px){
  .sale{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"num who total" "when when n";row-gap:2px}
  .s-num{grid-area:num}.s-who{grid-area:who}.s-total{grid-area:total}.s-when{grid-area:when}.s-n{grid-area:n}
}

/* Configuración */
.pct{display:flex;align-items:center;gap:8px;max-width:200px}
.pct span{font-weight:800;font-size:18px}

/* ===== Temas que se escogen en "Tema" (cada aparato recuerda el suyo) ===== */
/* Claro: el de la computadora */
:root[data-tema="claro"]{
  --bg:#f2f4ef; --surface:#ffffff; --ink:#1b231e; --muted:#5d6a61; --line:#d6ddd5;
  --band:#173b2a; --band-ink:#eef5f0; --band-muted:#a9c2b3;
  --accent:#1f6b47; --accent-ink:#ffffff; --accent-soft:#e1eee6;
  --hot:#c2410c; --hot-soft:#fde9de; --warn:#a66a10; --warn-soft:#fbf0d9;
  --ticket:#fffdf5; --org:#c46a12; --org-soft:#fdecd8; color-scheme:light }
/* Verde oscuro: el del teléfono */
:root[data-tema="oscuro"]{
  --bg:#111613; --surface:#19201b; --ink:#e7ede8; --muted:#97a59b; --line:#2b3530;
  --band:#0b120e; --band-ink:#e7ede8; --band-muted:#86a191;
  --accent:#4cb07e; --accent-ink:#0b1a12; --accent-soft:#1c3427;
  --hot:#f08552; --hot-soft:#3a2117; --warn:#e2b154; --warn-soft:#33291a;
  --ticket:#1e2620; --org:#f0a04b; --org-soft:#35281a; color-scheme:dark }
/* Pizarra: gris carbón con ámbar, mucho contraste para leer de lejos */
:root[data-tema="pizarra"]{
  --bg:#1c1e21; --surface:#26292d; --ink:#f4f6f7; --muted:#a7adb4; --line:#3a3f45;
  --band:#121416; --band-ink:#f4f6f7; --band-muted:#9aa1a8;
  --accent:#f2a93b; --accent-ink:#1a1206; --accent-soft:#3b2f1a;
  --hot:#ff6b5b; --hot-soft:#40221f; --warn:#ffd166; --warn-soft:#3a3320;
  --ticket:#2a2d31; --org:#5ec4e6; --org-soft:#1c3641; color-scheme:dark }
:root[data-tema="pizarra"] .ticket{border-width:1px 1px 1px 1px;border-top-width:8px}
:root[data-tema="pizarra"] .kn,:root[data-tema="pizarra"] .lname{letter-spacing:.2px}

/* Botones de Tema e Idioma */
.prefbtn{border:1px solid var(--band-muted);background:none;color:var(--band-ink);border-radius:8px;padding:5px 9px;font-weight:800;font-size:12px;letter-spacing:.5px}
.auth-prefs{display:flex;gap:8px;justify-content:center}
.auth-prefs .prefbtn{border-color:var(--line);color:var(--muted)}
.who{flex-wrap:wrap;justify-content:flex-end}

/* Ventana de Pantalla */
.temas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tema{display:grid;gap:4px;text-align:left;border:2px solid var(--line);background:var(--bg);border-radius:12px;padding:10px}
.tema.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.tsw{display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.tsw i{flex:1}
.tname{font-family:var(--f-display);font-size:18px;font-weight:700;text-transform:uppercase}
.tdesc{font-size:12px;color:var(--muted);line-height:1.3}

/* Teléfono: pestañas que quepan y encabezado de familia en Admin */
@media (max-width:759px){
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{font-size:16px;padding-inline:4px;flex:1 0 auto}
}
@media (max-width:520px){
  .mg-head{flex-wrap:wrap}
  .mg-toggle{flex:1 1 100%}
}

/* ===== Temas nuevos ===== */
/* Azul marino: azul noche con coral */
:root[data-tema="marino"]{
  --bg:#0e1622; --surface:#16212f; --ink:#eef3f9; --muted:#9aa9bb; --line:#26344a;
  --band:#0a111b; --band-ink:#eef3f9; --band-muted:#8797ab;
  --accent:#ff8a5c; --accent-ink:#2a0f05; --accent-soft:#3a2219;
  --hot:#ff5d73; --hot-soft:#3c1a22; --warn:#ffd166; --warn-soft:#3a321c;
  --ticket:#172333; --org:#5cc8ff; --org-soft:#163348; color-scheme:dark }
/* Vino: vino y dorado */
:root[data-tema="vino"]{
  --bg:#1b1214; --surface:#26191c; --ink:#f6eef0; --muted:#b9a3a8; --line:#3d2a2f;
  --band:#3a1420; --band-ink:#f8eef1; --band-muted:#d29aa9;
  --accent:#e6b54a; --accent-ink:#241805; --accent-soft:#3b2d16;
  --hot:#ff7a6b; --hot-soft:#40211e; --warn:#ffcf70; --warn-soft:#3a301c;
  --ticket:#2a1c20; --org:#e78aa0; --org-soft:#3c2129; color-scheme:dark }
/* Turquesa claro: claro y fresco */
:root[data-tema="turquesa"]{
  --bg:#eaf4f3; --surface:#ffffff; --ink:#10302c; --muted:#4f6d69; --line:#c9dfdc;
  --band:#0d4f49; --band-ink:#effaf8; --band-muted:#9fd1ca;
  --accent:#0d7c72; --accent-ink:#ffffff; --accent-soft:#d6efec;
  --hot:#d1462f; --hot-soft:#fbe4df; --warn:#a2650b; --warn-soft:#fbefd9;
  --ticket:#fbfefd; --org:#c2571a; --org-soft:#fbe8da; color-scheme:light }

/* Pedido de otro mesero: solo se ve */
.t-wait.other{color:var(--muted);background:var(--bg);border:1px dashed var(--line)}
.t-items li.ro{cursor:default}
.temas{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
#prefs-modal .modal-card{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto}

/* ===== Bebidas: divisor Aguas frescas / Sodas ===== */
.dsub{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:4px;font-family:var(--f-display);font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent)}
.dsub::before,.dsub::after{content:"";flex:1;height:2px;background:var(--accent);opacity:.45;border-radius:2px}

/* ===== Al girar el teléfono las tarjetas no se enciman ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.dishes{grid-auto-rows:auto;align-items:start}
.dish{height:auto;min-width:0;overflow:hidden}
.dish.has-opts{overflow:visible}
.dish .di{display:block;white-space:normal;max-height:2.9em;overflow:hidden}
/* Salto de renglón dentro del menú (bebidas de un solo precio en su propia línea) */
.drow{grid-column:1/-1;height:0;margin:-5px 0}
/* Segundo nivel de división (ej. "Chilaquiles rojos" dentro de CHILAQUILES) */
.dsub2{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:2px;font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:.4px;color:var(--org)}
.dsub2::after{content:"";flex:1;height:1px;border-top:1px dashed var(--org);opacity:.6}
/* Bebidas: nombre y datos centrados en la tarjeta */
.dish.drink{text-align:center;align-items:center}
.dish.drink .dn,.dish.drink .dp,.dish.drink .di{text-align:center;width:100%}
.dish.drink .optbtns{width:100%}

/* ===== Brillo ===== */
#brillo-capa{position:fixed;inset:0;z-index:9999;pointer-events:none}
.brillo{display:flex;align-items:center;gap:10px}
.brillo input{flex:1;min-width:0;accent-color:var(--accent);height:28px}
.brillo span{font-size:18px;color:var(--muted)}
.brillo b{min-width:46px;text-align:right}