/* Beggar's Inn POS — hoja de estilos
 * Marca: dorado #D29F2A / negro (antes navy). Bar nocturno de Paceville.
 * Sin dependencias externas. Optimizada para tablet/teléfono.
 */
:root{
  /* --navy / --navy-2 son el color primario en toda la app; en negro para Beggar's Inn */
  --gold:#D29F2A; --gold-dark:#b5851c; --navy:#111111; --navy-2:#2a2a2a;
  --bg:#f4f5f8; --panel:#ffffff; --ink:#1b2233; --muted:#6b7280;
  --line:#e5e7eb; --ok:#1f9d55; --danger:#d64545; --danger-bg:#fdecec;
  --radius:14px; --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
  --tap:48px;
}
*{box-sizing:border-box}
html,body{height:100%}
/* iOS (app guardada en la pantalla de inicio): sin zoom por doble toque ni rebote que descuadre los toques.
 * La barra de estado va en "default" (index.html): con "black-translucent", iOS 26 dibuja la app desde arriba
 * pero con menos alto del real, y lo que se ve deja de coincidir con donde se pulsa. */
html{background:#0B0B0B; -webkit-text-size-adjust:100%}
html,body{overflow:hidden; overscroll-behavior:none; touch-action:manipulation}
button,a,label,select{touch-action:manipulation}
/* iOS hace zoom al enfocar un campo de menos de 16px: por eso todos van a 16px. */
input,select,textarea{font-size:16px !important}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",Roboto,sans-serif}
button,input,select,textarea{font-family:inherit}
#ggpos{
  position:fixed; inset:0; background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; overflow:hidden; -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
.hidden{display:none !important}

/* ---------- utilidades ---------- */
.btn{min-height:var(--tap); padding:0 18px; border-radius:12px; font-weight:700; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .04s, filter .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--navy); color:#fff}
/* CTA principal: negro con texto dorado (marca) — no un bloque dorado. */
.btn.gold{background:var(--navy); color:var(--gold); border:1px solid rgba(210,159,42,.5)}
.btn.ghost{background:#eef0f4; color:var(--navy)}
.btn.danger{background:var(--danger-bg); color:var(--danger)}
.btn.block{width:100%}
.btn:disabled{opacity:.4; pointer-events:none}
.pill{font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px}

/* ---------- login ---------- */
.login{flex:1; display:flex; align-items:center; justify-content:center; background:
  radial-gradient(1200px 600px at 50% -10%, #2c2c2c 0%, #0c0c0c 62%)}
.login-card{background:var(--panel); border-radius:22px; padding:28px; width:360px; box-shadow:var(--shadow); text-align:center}
.brand{font-weight:800; font-size:22px; color:var(--navy); letter-spacing:.3px}
.brand .g{color:var(--gold)}
.brand-sub{color:var(--muted); font-size:12px; margin-top:2px; margin-bottom:18px}
.user-list{display:flex; flex-direction:column; gap:10px; margin:10px 0}
.user-list button{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line);
  border-radius:12px; background:#fff; font-weight:700; text-align:left}
.user-list button .avatar{width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px}
.user-list button .role{margin-left:auto; font-size:11px; color:var(--muted); font-weight:600}
.pinpad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.pinpad button{height:58px; border-radius:12px; background:#eef0f4; font-size:22px; font-weight:700; color:var(--navy)}
.pin-dots{display:flex; gap:12px; justify-content:center; margin:14px 0}
.pin-dots span{width:14px; height:14px; border-radius:50%; background:var(--line)}
.pin-dots span.on{background:var(--gold)}
.pin-error{color:var(--danger); font-size:13px; min-height:18px; margin-top:6px}

/* ---------- topbar ---------- */
.topbar{height:56px; background:var(--navy); color:#fff; display:flex; align-items:center; gap:14px;
  padding:0 14px; flex:0 0 auto}
.topbar .brand{color:#fff; font-size:17px}
.topbar .brand .g{color:var(--gold)}
.topbar .spacer{flex:1}
/* Nombre de quien está usando la POS, siempre visible junto a la luz de conexión. */
.topbar .who{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.topbar .who b{font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .who small{font-size:10px; opacity:.7; text-transform:uppercase; letter-spacing:.06em}
.icon-btn{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.12); color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center}
.conn{font-size:11px; font-weight:800; padding:5px 10px; border-radius:999px; white-space:nowrap}
.conn.on{background:rgba(31,157,85,.25); color:#8ef0b8}
.conn.pend{background:rgba(210,159,42,.28); color:#ffd980}
.conn.off{background:rgba(214,69,69,.3); color:#ffb3b3}

/* nav badge + pill mini */
.nav button .ic{position:relative}
.nav-badge{position:absolute; top:-6px; right:-12px; background:var(--danger); color:#fff; font-size:10px;
  font-weight:800; min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px}
.pill.mini{background:#f3ead4; color:#6b520c; font-size:10px; padding:2px 7px}

/* tarjetas de cocina */
.order-card{padding:14px; margin:10px 0; border-left:5px solid var(--line)}
.order-card.st-new{border-left-color:var(--danger)}
.order-card.st-preparing{border-left-color:var(--gold)}
.order-card.st-ready{border-left-color:var(--ok)}
.order-card.st-served{border-left-color:var(--muted)}
.ord-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.ord-no{font-weight:800; font-size:16px}
.ord-status{background:var(--navy); color:#fff}
.ord-tbl{margin-left:auto; font-size:12px; color:var(--muted)}
.ord-by{font-weight:700; color:var(--ink)} /* quién cobró el ticket */
.ord-items{display:flex; flex-direction:column; gap:3px; margin:6px 0}
.ord-item{font-size:14px; font-weight:600}
.ord-top{font-size:12px; color:var(--muted); font-weight:500}
.ord-foot{display:flex; justify-content:flex-end; font-weight:800; color:var(--navy); margin-top:4px}
.ord-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.ord-actions .btn{flex:1; min-width:90px}

/* tablero de mesas (cocina): rojo=ocupada · gris=cobrada · claro=libre */
.tables-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; margin:4px 0 16px}
.table-tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:74px;
  border-radius:14px; font-weight:800; box-shadow:var(--shadow); border:2px solid transparent; transition:transform .06s}
.table-tile:active{transform:scale(.97)}
.table-tile .tt-n{font-size:22px; line-height:1}
.table-tile .tt-s{font-size:12px; font-weight:700; opacity:.9}
.table-tile.free{background:#fff; color:var(--navy); border-color:var(--line)}
.table-tile.occ{background:#fdecec; color:var(--danger); border-color:#e88}

/* cronómetro del pedido en cocina */
.ord-elapsed{font-weight:800; font-size:13px; padding:2px 8px; border-radius:999px; white-space:nowrap}
.ord-elapsed.el-ok{background:#e7f6ee; color:var(--ok)}
.ord-elapsed.el-amber{background:#fbf0d5; color:#a9791a}
.ord-elapsed.el-red{background:#fdecec; color:var(--danger)}

/* producto agotado */
.card .thumb{position:relative}
.soldout-badge{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(27,34,51,.58); color:#fff; font-weight:800; font-size:13px; letter-spacing:.04em}
.card.soldout .price{color:var(--muted)}
.stock-n{font-size:11px; color:var(--muted); font-weight:700}

/* mesa que pidió la cuenta */

/* ---------- layout POS ---------- */
.stage{flex:1; display:flex; min-height:0}
.catalog{flex:1; display:flex; flex-direction:column; min-width:0}
.cats{display:flex; gap:8px; padding:12px 14px 6px; overflow-x:auto; flex:0 0 auto}
.cats button{white-space:nowrap; padding:9px 16px; border-radius:999px; background:#eef0f4; color:var(--navy);
  font-weight:700; font-size:14px}
.cats button.on{background:var(--navy); color:#fff}
.grid{flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px; padding:12px 14px 20px; align-content:start}
.card{background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column; min-height:118px; text-align:left; transition:transform .05s}
.card:active{transform:scale(.98)}
.card .thumb{height:66px; display:flex; align-items:center; justify-content:center; font-size:34px;
  background:linear-gradient(135deg,#fef6e0,#f7ead0); overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.card .meta{padding:8px 10px; display:flex; flex-direction:column; gap:2px}
.card .name{font-weight:700; font-size:13px; line-height:1.25}
.card .price{font-weight:800; color:var(--navy); font-size:14px}
.card.soldout{opacity:.45}
.card .badge{position:absolute}

/* ---------- carrito ---------- */
.cart{width:360px; flex:0 0 360px; background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column}
.cart-head{padding:12px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.cart-head .title{font-weight:800}
.cart-head .tbl{margin-left:auto; font-size:12px}
.cart-items{flex:1; overflow-y:auto; padding:6px 0}
.cart-empty{color:var(--muted); text-align:center; padding:40px 20px; font-size:14px}
.line{display:flex; gap:10px; padding:10px 14px; align-items:flex-start}
.line + .line{border-top:1px solid #f1f2f5}
.line .l-main{flex:1; min-width:0}
.line .l-name{font-weight:700; font-size:14px}
.line .l-sub{font-size:12px; color:var(--muted); margin-top:2px}
.line .l-price{font-weight:700; font-size:14px; white-space:nowrap}
.qty{display:flex; align-items:center; gap:8px; margin-top:8px}
.qty button{width:30px; height:30px; border-radius:8px; background:#eef0f4; color:var(--navy); font-size:18px; font-weight:800}
.qty span{min-width:22px; text-align:center; font-weight:700}
.cart-foot{border-top:1px solid var(--line); padding:12px 14px}
.sumrow{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin:3px 0}
.sumrow.total{color:var(--ink); font-size:22px; font-weight:800; margin-top:8px}
.cart-actions{display:flex; gap:8px; margin-top:12px}

/* ---------- bottom nav ---------- */
.nav{height:58px; background:#fff; border-top:1px solid var(--line); display:flex; flex:0 0 auto}
.nav button{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--muted); font-size:11px; font-weight:700}
.nav button .ic{font-size:18px}
.nav button.on{color:var(--navy)}
.nav button.on .ic{transform:translateY(-1px)}

/* ---------- modales ---------- */
.scrim{position:fixed; inset:0; background:rgba(15,20,35,.5); display:flex; align-items:center;
  justify-content:center; padding:20px; z-index:50}
.modal{background:#fff; border-radius:18px; width:100%; max-width:420px; max-height:92vh; overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal.wide{max-width:640px}
.modal-head{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center}
.modal-head .h{font-weight:800; font-size:17px}
.modal-head .x{margin-left:auto; width:36px; height:36px; border-radius:9px; background:#eef0f4; font-size:18px}
.modal-body{padding:16px 18px}
.modal-foot{padding:14px 18px; border-top:1px solid var(--line); display:flex; gap:10px}

/* topping picker */
.topping{display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px}
.topping.on{border-color:var(--gold); background:#fdf7e8}
.topping .t-name{font-weight:700}
.topping .t-price{margin-left:auto; color:var(--navy); font-weight:700}
.topping .check{width:24px; height:24px; border-radius:6px; border:2px solid var(--line); display:flex; align-items:center; justify-content:center}
.topping.on .check{background:var(--gold); border-color:var(--gold); color:#3a2c05}

/* pago */
.pay-methods{display:flex; gap:10px; margin-bottom:14px}
.pay-methods button{flex:1; padding:14px; border-radius:12px; border:2px solid var(--line); font-weight:700}
.pay-methods button.on{border-color:var(--navy); background:#f2f0ea; color:var(--navy)}
.pay-total{text-align:center; margin:8px 0 14px}
.pay-total .lbl{color:var(--muted); font-size:13px}
.pay-total .amt{font-size:32px; font-weight:800; color:var(--navy)}
.tendered{background:#f7f8fb; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:right;
  font-size:26px; font-weight:800; min-height:56px}
.tendered.short{color:var(--danger)}
.change{text-align:center; font-size:15px; margin-top:8px}
.change b{font-size:20px; color:var(--ok)}
.numpad{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px}
.numpad button{height:54px; border-radius:12px; background:#eef0f4; font-size:20px; font-weight:800; color:var(--navy)}
.quickcash{display:flex; gap:8px; margin-top:10px}
.quickcash button{flex:1; height:44px; border-radius:10px; background:#f3ead4; color:#6b520c; font-weight:800}

/* recibo */
.receipt{font-family:"Courier New",monospace; background:#fff; color:#000; width:300px; margin:0 auto;
  padding:14px 16px; font-size:12px; line-height:1.5}
.receipt.w58{width:230px; font-size:11px}
.receipt .r-center{text-align:center}
.receipt .r-title{font-weight:800; font-size:15px}
.receipt hr{border:none; border-top:1px dashed #000; margin:8px 0}
.receipt .r-row{display:flex; justify-content:space-between}
.receipt .r-big{font-size:16px; font-weight:800}

/* listas admin/historial */
.list{display:flex; flex-direction:column}
.list .item{display:flex; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); background:#fff}
.list .item .i-main{flex:1; min-width:0}
.list .item .i-title{font-weight:700}
.list .item .i-sub{font-size:12px; color:var(--muted); margin-top:2px}
.list .item .i-amt{font-weight:800; color:var(--navy)}
.list .item.void{opacity:.6}
.list .item.void .i-amt{text-decoration:line-through}
.screen{flex:1; overflow-y:auto; background:var(--bg)}
.screen-head{padding:14px 16px; display:flex; align-items:center; gap:10px}
.screen-head .h{font-weight:800; font-size:20px}
.screen-pad{padding:0 16px 24px}
.zcard{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin:8px 0}
.zrow{display:flex; justify-content:space-between; padding:6px 0; font-size:14px}
.zrow.head{font-weight:800; color:var(--navy); border-bottom:1px solid var(--line); margin-bottom:4px}
.field{margin-bottom:12px}
.field label{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px}
.field input, .field select{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-size:15px; background:#fff}
/* fotos / avatares en admin */
.thumb-mini{width:40px; height:40px; border-radius:9px; overflow:hidden; background:linear-gradient(135deg,#fef6e0,#f7ead0);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto}
.thumb-mini img{width:100%; height:100%; object-fit:cover}
.avatar-sm{width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 auto}
.photo-box{margin-bottom:14px}
.photo-preview{width:100%; height:150px; object-fit:cover; border-radius:12px; border:1px solid var(--line);
  margin-bottom:10px; display:block}
.photo-preview.empty{display:flex; align-items:center; justify-content:center; font-size:52px;
  background:linear-gradient(135deg,#fef6e0,#f7ead0)}

.toast{position:fixed; left:50%; bottom:78px; transform:translateX(-50%); background:var(--navy); color:#fff;
  padding:12px 20px; border-radius:12px; font-weight:700; z-index:80; box-shadow:var(--shadow); font-size:14px}

/* ---------- microinteracciones / transiciones ---------- */
@keyframes ggFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ggScaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes ggScrim{from{opacity:0}to{opacity:1}}
@keyframes ggPop{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: no-preference){
  .stage-anim{animation:ggFadeUp .22s ease both}
  .scrim{animation:ggScrim .14s ease both}
  .modal{animation:ggScaleIn .2s cubic-bezier(.22,.61,.36,1) both}
  .card{transition:transform .06s, box-shadow .15s}
  .card:active{transform:scale(.97)}
  .cats button,.nav button,.btn,.pinpad button{transition:background .15s, color .15s, transform .06s}
}
/* barra inferior: estado activo más claro */
.nav button{position:relative}
.nav button.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.nav button.on .ic{transform:none}
/* tarjetas de producto un poco más definidas */
.card{border:1px solid rgba(31,46,94,.05)}
.card .name{color:var(--ink)}
/* topbar robusto en anchos chicos */
.topbar .who{max-width:150px}
.topbar .brand{white-space:nowrap}
@media (max-width:640px){
  .topbar{gap:6px; padding:0 8px}
  .topbar .who{max-width:96px}
  .topbar .who small{display:none} /* en móvil solo el nombre */
  .topbar .brand{font-size:15px}
  .conn{padding:6px 8px; font-size:13px}
}
/* botón de cobro con un poco más de presencia */
.cart-actions .btn.gold{box-shadow:0 2px 8px rgba(210,159,42,.35)}

/* ---------- POS responsive (móvil / iPhone) ---------- */
@keyframes ggSheetUp{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:759px){
  .stage{flex-direction:column}
  .catalog{width:100%; min-width:0}
  .cart{display:none}                 /* se oculta la columna lateral */
  .grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); padding-bottom:96px}
  .grid .card{min-height:104px}
  .card .thumb{height:56px; font-size:30px}
  /* barra flotante de carrito */
  .pos-cartbar{position:fixed; left:0; right:0; bottom:66px; z-index:35; margin:10px;
    background:var(--navy); color:#fff; border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.28); animation:ggFadeUp .2s ease both}
  .pos-cartbar .count{background:var(--gold); color:#3a2c05; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px}
  .pos-cartbar .lbl{font-weight:800}
  .pos-cartbar .amt{margin-left:auto; font-weight:800; font-size:18px}
  /* hoja del carrito por encima de todo */
  .cart-overlay{position:fixed; inset:0; z-index:45; background:rgba(15,20,35,.5); display:flex; align-items:flex-end}
  .cart-overlay .cart.as-sheet{display:flex; width:100%; flex:none; max-height:86vh; border-left:none;
    border-radius:20px 20px 0 0; animation:ggSheetUp .26s cubic-bezier(.22,.61,.36,1) both}
  .sheet-close{width:100%; padding:14px; font-weight:800; color:var(--navy); background:#fff;
    border-radius:20px 20px 0 0; border-bottom:1px solid var(--line)}
}

@media print{
  body *{visibility:hidden}
  #print-area, #print-area *{visibility:visible}
  #print-area{position:absolute; left:0; top:0; width:100%}
}

/* ---------- Beggar's Inn · branding (wordmark PACEVILLE / BEGGAR'S INN / EST. 1989) ---------- */
.bi-logo{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.bi-logo .bi-name{ font-family:"Anton","Oswald","Arial Narrow",Impact,system-ui,sans-serif;
  font-weight:400; text-transform:uppercase; letter-spacing:.005em; white-space:nowrap; }
.bi-logo .bi-sup,.bi-logo .bi-sub,.bi-logo .bi-est{
  font-family:"Oswald","Arial Narrow",system-ui,sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.34em; }
.bi-logo.on-dark{ color:#fff; }
.bi-logo.on-light{ color:#0b0b0b; }
/* login (grande, sobre tarjeta blanca) */
.login-card .bi-logo .bi-name{ font-size:46px; }
.login-card .bi-logo .bi-sup{ font-size:12px; margin-bottom:7px; }
.login-card .bi-logo .bi-sub{ font-size:11px; margin-top:7px; }
/* topbar: badge esquina superior derecha (barra negra, texto blanco) */
/* topbar ya es negro: el badge lleva un borde sutil para leerse como placa */
.bi-badge{ background:#000; border:1px solid rgba(212,159,42,.5); border-radius:10px; padding:6px 13px; display:flex; align-items:center; }
.bi-badge .bi-logo .bi-name{ font-size:18px; }
.bi-badge .bi-logo .bi-est{ font-size:8px; letter-spacing:.28em; margin-top:2px; opacity:.85; }
@media (max-width:760px){ .bi-badge{ padding:4px 10px; } .bi-badge .bi-logo .bi-name{ font-size:15px; }
  .bi-badge .bi-logo .bi-est{ display:none; } }
/* easter egg (login) + credito (settings) */
.dev-egg{ text-align:center; margin-top:16px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); opacity:.65; }
/* La bandera va debajo, a tamaño legible y sin atenuar (el resto del guiño sí lo está). */
.dev-egg .egg-flag{ display:block; margin-top:6px; font-size:18px; letter-spacing:0; opacity:1; }
.dev-credit{ text-align:center; margin-top:14px; font-size:11px; color:var(--muted); }
/* ticket de barra: sello PAID */
.paid-badge{ background:var(--ok); color:#fff; font-weight:800; font-size:10px; padding:2px 7px; border-radius:6px; letter-spacing:.06em; }
/* factura: logo negro sobre blanco (inverso al de la app) */
.r-logo{ text-align:center; margin-bottom:4px; }
.r-logo .bi-logo .bi-name{ font-size:26px; }
.r-logo .bi-logo .bi-sup{ font-size:8px; margin-bottom:3px; }
.r-logo .bi-logo .bi-sub{ font-size:8px; margin-top:3px; }
.receipt .r-sub{ font-size:11px; margin-bottom:2px; }

/* ---------- mesas por zona (picker + admin) ---------- */
.area-head{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); margin:6px 2px 6px; }
.tbl-chip{ display:inline-flex; align-items:center; gap:6px; background:#f2f0ea; color:var(--navy);
  border:1px solid var(--line); border-radius:999px; padding:6px 6px 6px 12px; font-weight:700; }
.tbl-chip .tbl-x{ width:22px; height:22px; border:none; border-radius:50%; background:#e2e0d8; color:var(--danger);
  font-weight:800; cursor:pointer; line-height:1; }
.tbl-chip .tbl-x:hover{ background:var(--danger-bg); }
#tb-area{ min-height:var(--tap); border:1px solid var(--line); border-radius:10px; padding:0 10px; background:#fff; font-weight:600; }

/* ---------- Waiter: hints, recogida ---------- */
.sub-hint{ font-size:12px; color:var(--muted); font-weight:400; margin-left:10px; }
.role-hint{ font-size:12px; color:var(--muted); margin:-2px 0 8px; line-height:1.4; }
.order-card.ready-pick{ box-shadow:0 0 0 2px rgba(210,159,42,.45), var(--shadow); }
.order-card.ready-pick .ord-status{ background:var(--gold); color:#2a2000; }

/* ---------- iOS: áreas seguras (notch + barra de inicio) — arregla el "responsive roto" en iPhone ----------
 * index.html usa viewport-fit=cover; sin estos insets el topbar queda bajo el notch y la nav bajo la
 * barra de inicio. box-sizing:border-box (global) mantiene la altura de contenido y añade el inset. */
.topbar{
  height:calc(56px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  padding-left:max(14px, env(safe-area-inset-left));
  padding-right:max(14px, env(safe-area-inset-right));
}
.nav{
  height:calc(58px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
@media (max-width:759px){
  /* la barra flotante del carrito se sitúa por encima de la nav + área segura */
  .pos-cartbar{ bottom:calc(66px + env(safe-area-inset-bottom)); }
  /* el grid deja hueco para nav + barra flotante + área segura (no tapa el último producto) */
  .grid{ padding-bottom:calc(150px + env(safe-area-inset-bottom)); }
  /* hojas inferiores (carrito) respetan la barra de inicio */
  .cart-overlay .cart.as-sheet{ padding-bottom:env(safe-area-inset-bottom); }
}
/* el login también respeta el notch en pantallas altas */
.login{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }

/* ---------- v8: carrito sin re-animar, botón de sonido ---------- */
.no-anim, .cart-overlay .cart.as-sheet.no-anim{animation:none !important}
.sound-btn{font-size:12px; padding:6px 10px}

/* ---------- zonas seguras del iPhone/iPad y tamaños táctiles ---------- */
#ggpos{
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.modal{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)}
.pinpad button, .numpad button{min-height:58px}
.quickcash button, .pay-methods button{min-height:44px}
.btn.mini, .pill button{min-height:36px}
@media (max-height:480px) and (orientation:landscape){ /* móvil tumbado: teclados más bajos para que quepa todo */
  .pinpad button, .numpad button{min-height:44px; font-size:18px}
  .login-card{padding:14px 16px}
}
@media (max-width:380px){ .quickcash{flex-wrap:wrap} .quickcash button{flex:1 1 calc(50% - 8px)} }

/* ---------- arqueo inteligente (movimientos + asistente de cierre) ---------- */
.zrow.sub{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; padding-top:8px}
.zrow.mv{font-size:13px; color:var(--ink)}
.zrow.mv small{color:var(--muted); font-weight:600; margin-left:4px}
.mv-x{color:var(--muted); font-size:12px; padding:2px 6px; min-height:28px}
.cash-btns{display:flex; gap:8px; margin-top:10px}
.cash-btns .btn{flex:1; min-height:44px; font-size:14px}
.close-wiz .cw-h{font-weight:800; margin:14px 0 6px}
.close-wiz .cw-warn{background:#fff6e5; color:#7a4300; border-radius:10px; padding:8px 12px; font-size:13px; font-weight:700; margin-bottom:10px}
.denoms{display:grid; gap:6px}
.den{display:grid; grid-template-columns:72px 40px 1fr 40px 78px; align-items:center; gap:6px}
.den .den-l{font-weight:700; font-size:13px}
.den button{background:#eef0f4; border-radius:8px; min-height:40px; font-size:18px; font-weight:800; color:var(--navy)}
.den input{width:100%; min-height:40px; text-align:center; border:1px solid var(--line); border-radius:8px; padding:0 6px}
.den .den-s{text-align:right; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.den.has .den-s{color:var(--ink); font-weight:700}
.close-wiz .field label.req::after{content:" *"; color:var(--danger)}
.cw-sum{margin-top:12px; border-top:1px solid var(--line); padding-top:8px}
.cw-sum .cw-exp{font-weight:800}
.cw-result{margin-top:8px; text-align:center}
.cw-badge{display:inline-block; font-weight:800; font-size:14px; padding:6px 14px; border-radius:999px}
.cw-badge.ok{background:#e6f5ec; color:var(--ok)}
.cw-badge.bad{background:var(--danger-bg); color:var(--danger)}
.cw-badge.wait{background:#eef0f4; color:var(--muted)}
.pin-entry.busy{opacity:.6; pointer-events:none}

/* ---------- pedido rápido (buscar · repetir ronda · más vendidos) ---------- */
.quickbar{display:flex; gap:8px; align-items:center; padding:10px 12px 0}
.qsearch{flex:1; min-height:44px; border:1px solid var(--line); border-radius:12px; padding:0 14px; background:#fff; color:var(--ink)}
.qsearch::placeholder{color:var(--muted)}
.btn.mini{min-height:44px; padding:0 14px; font-size:13px; white-space:nowrap}
.grid-h{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:12px 12px 0}
.grid.tops{padding-bottom:0}

/* ---------- velocidad del servicio ---------- */
.late-chip{margin-left:10px; background:var(--danger-bg); color:var(--danger); font-weight:800; font-size:12px; padding:3px 10px; border-radius:999px}
.speed-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:6px 0 4px}
.speed-tile{background:#f7f8fb; border-radius:12px; padding:10px 12px}
.speed-tile .st-l{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700}
.speed-tile .st-v{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px}
.speed-tile .st-s{font-size:11px; color:var(--muted)}
.bars{display:grid; gap:6px; margin-top:6px}
.bar-row{display:grid; grid-template-columns:96px 1fr 62px; align-items:center; gap:8px; font-size:13px}
.bar-row .bar-t{height:8px; border-radius:999px; background:#e9ecf2; overflow:hidden}
.bar-row .bar-f{height:100%; background:var(--gold)}
.bar-row .bar-v{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted)}