/* Golden Gyoza POS Web — hoja de estilos
 * Marca: dorado #D29F2A / navy #1F2E5E
 * Sin dependencias externas. Optimizada para tablet horizontal.
 */
:root{
  --gold:#D29F2A; --gold-dark:#b5851c; --navy:#1F2E5E; --navy-2:#2b3d73;
  --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%}
#ggpos, #ggpos *{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",Roboto,sans-serif}
#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}
.btn.gold{background:var(--gold); color:#3a2c05}
.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%, #26386f 0%, var(--navy) 60%)}
.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:calc(56px + env(safe-area-inset-top)); background:var(--navy); color:#fff; display:flex; align-items:center; gap:14px;
  padding:env(safe-area-inset-top) calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left)); flex:0 0 auto}
.topbar .brand{color:#fff; font-size:17px}
.topbar .brand .g{color:var(--gold)}
.topbar .spacer{flex:1}
.topbar .who{font-size:13px; opacity:.85}
.mode-toggle{display:flex; background:rgba(255,255,255,.12); border-radius:10px; padding:3px}
.mode-toggle button{padding:8px 14px; border-radius:8px; font-weight:700; font-size:13px; color:#cfd6ea}
.mode-toggle button.on{background:var(--gold); color:#3a2c05}
.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-accepted{border-left-color:var(--gold)}
.order-card.st-preparing{border-left-color:#3b82f6}
.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-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}
.table-tile.paid{background:#eef0f4; color:var(--muted)}

/* 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 */
.table-tile.bill{border-color:var(--gold); box-shadow:0 0 0 2px rgba(210,159,42,.4), var(--shadow)}
.tt-bill{font-size:10px; font-weight:800; color:#6b520c; background:#f7ead0; border-radius:999px; padding:1px 7px; margin-top:3px}

/* ---------- 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:calc(58px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); 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:#eef1f8; 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{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px}
.topbar .brand{white-space:nowrap}
.mode-toggle button{white-space:nowrap}
@media (max-width:640px){
  .topbar{gap:6px; padding:0 8px}
  .topbar .who{display:none}
  .topbar .brand{font-size:15px}
  .mode-toggle{padding:2px}
  .mode-toggle button{padding:8px 10px; font-size:12px}
  .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:calc(96px + env(safe-area-inset-bottom))}
  .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:calc(66px + env(safe-area-inset-bottom)); 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%}
}