:root{
  --bg:#0f1115;--panel:#181b22;--panel2:#20242d;--line:#2c313c;--text:#e8eaf0;--muted:#8b93a5;
  --pri:#f97316;--pri2:#ea580c;--ok:#22c55e;--warn:#eab308;--err:#ef4444;--info:#3b82f6;--bar:#8b5cf6;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex}
a{color:var(--pri)}
h1,h2,h3{margin:0 0 .5em;font-weight:650}
h1{font-size:1.3rem}
.muted{color:var(--muted)}
small{color:var(--muted)}

/* Sidebar */
.sidebar{width:230px;flex:0 0 230px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow:auto}
.brand{padding:18px 16px;font-weight:700;font-size:1.05rem;border-bottom:1px solid var(--line)}
.sidebar nav{flex:1;padding:8px}
.sidebar nav a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;color:var(--text);text-decoration:none;margin-bottom:2px}
.sidebar nav a:hover{background:var(--panel2)}
.sidebar nav a.active{background:var(--pri);color:#fff}
.sidebar nav a span{width:22px;text-align:center}
.me{padding:12px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.me a{margin-top:6px}

.main{flex:1;min-width:0;padding:16px 20px;height:100vh;overflow:auto}
body.full .main{padding:0}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.topbar h1{margin:0;flex:1}
.clock{color:var(--muted);font-variant-numeric:tabular-nums}
.btn.menu-btn{display:none}

/* Elementos */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.mt{margin-top:12px}.mb{margin-bottom:12px}
.flex1{flex:1}
.right{text-align:right}

label{display:block;margin-bottom:10px;color:var(--muted);font-size:.88rem}
label.check{display:flex;gap:8px;align-items:center;color:var(--text)}
input,select,textarea{width:100%;margin-top:4px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit}
input[type=checkbox],input[type=radio]{width:auto;margin:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri);border-color:transparent}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#06210f}
.btn.err{background:var(--err);border-color:var(--err);color:#fff}
.btn.info{background:var(--info);border-color:var(--info);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 9px;font-size:.85rem}
.btn.lg{padding:14px 18px;font-size:1.05rem}
.btn.block{width:100%}

.alert{padding:10px 14px;border-radius:8px;margin-bottom:12px;border:1px solid}
.alert.ok{background:#14532d55;border-color:var(--ok)}
.alert.err{background:#7f1d1d55;border-color:var(--err)}
.alert.warn{background:#713f1255;border-color:var(--warn)}

.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.75rem;font-weight:700;background:var(--panel2);border:1px solid var(--line)}
.badge.ok{background:var(--ok);color:#06210f;border:0}
.badge.err{background:var(--err);color:#fff;border:0}
.badge.warn{background:var(--warn);color:#2a1d00;border:0}
.badge.info{background:var(--info);color:#fff;border:0}
.badge.cocina{background:var(--pri);color:#fff;border:0}
.badge.bar{background:var(--bar);color:#fff;border:0}

table{width:100%;border-collapse:collapse}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{color:var(--muted);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
tr:hover td{background:#ffffff05}
.table-wrap{overflow:auto}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

.stat{display:flex;flex-direction:column;gap:4px}
.stat b{font-size:1.6rem}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;width:100%}
.login{width:100%;max-width:380px;text-align:center}
.login form,.login label{text-align:left}
.login-logo{font-size:3rem}

/* Tabs */
.tabs{display:flex;gap:6px;overflow:auto;padding-bottom:4px;margin-bottom:12px}
.tabs button{flex:0 0 auto}
.tabs .active{background:var(--pri);border-color:var(--pri);color:#fff}

/* Mesas */
.mesas{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.mesa{position:relative;background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:14px 10px;min-height:110px;text-align:center;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:4px;transition:.15s}
.mesa:hover{border-color:var(--pri)}
.mesa .n{font-size:1.5rem;font-weight:800}
.mesa.ocupada{background:#7c2d1233;border-color:var(--pri)}
.mesa.listo{animation:pulse 1.2s infinite;border-color:var(--ok)}
.mesa .tag{position:absolute;top:6px;right:6px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #22c55e88}50%{box-shadow:0 0 0 8px #22c55e00}}
.legend{display:flex;gap:14px;color:var(--muted);font-size:.85rem}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}

/* POS */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;height:calc(100vh - 80px)}
body.full .pos{height:100vh;padding:12px}
.pos-left{display:flex;flex-direction:column;min-height:0}
.pos-right{display:flex;flex-direction:column;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.cats{display:flex;gap:6px;overflow:auto;padding-bottom:6px;margin-bottom:8px;flex:0 0 auto}
.cats button{flex:0 0 auto}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;overflow:auto;align-content:start;flex:1;padding-right:4px}
.prod{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--c,var(--pri));border-radius:10px;padding:12px;cursor:pointer;min-height:86px;display:flex;flex-direction:column;justify-content:space-between;user-select:none}
.prod:hover{background:var(--panel2)}
.prod:active{transform:scale(.97)}
.prod b{font-size:.95rem}
.prod .p{color:var(--pri);font-weight:800}
.prod .s{font-size:.75rem;color:var(--muted)}
.prod.agotado{opacity:.4}
.cart-head{padding:12px 14px;border-bottom:1px solid var(--line)}
.cart{flex:1;overflow:auto;padding:6px 10px}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:8px 4px;border-bottom:1px dashed var(--line)}
.cart-item .qty{display:flex;gap:4px;align-items:center}
.cart-item .qty button{width:30px;height:30px;padding:0}
.cart-item .nota{grid-column:1/-1;font-size:.8rem;color:var(--warn)}
.cart-item.sent{opacity:.85}
.cart-foot{padding:12px 14px;border-top:1px solid var(--line)}
.total{display:flex;justify-content:space-between;font-size:1.4rem;font-weight:800;margin-bottom:10px}
.search{margin:0 0 8px}

/* KDS */
.kds-top{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.kds-top h1{margin:0;flex:1;font-size:1.4rem}
.kds{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;padding:16px;align-items:start}
.ticket{background:var(--panel);border:2px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.ticket .th{padding:10px 12px;background:var(--panel2);display:flex;justify-content:space-between;align-items:center;gap:8px}
.ticket .th b{font-size:1.25rem}
.ticket.nuevo{border-color:var(--info);animation:flash 1s 6}
.ticket.t1 .th{background:#713f12}
.ticket.t2 .th{background:#7f1d1d}
@keyframes flash{50%{border-color:var(--warn);box-shadow:0 0 18px var(--warn)}}
.ticket ul{list-style:none;margin:0;padding:6px 0}
.ticket li{padding:8px 12px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;border-bottom:1px solid var(--line);font-size:1.1rem}
.ticket li:last-child{border-bottom:0}
.ticket li .q{font-weight:800;min-width:34px;font-size:1.25rem}
.ticket li .nota{display:block;color:var(--warn);font-size:.9rem}
.ticket li.preparando{background:#1e3a8a44}
.ticket li.preparando .q::after{content:" 🔥"}
.ticket .tf{padding:8px;display:flex;gap:8px}
.ticket .tf .btn{flex:1}
.ticket .meta{padding:4px 12px;font-size:.85rem;color:var(--muted)}
.kds-empty{padding:80px 20px;text-align:center;color:var(--muted);font-size:1.3rem}
.hechos{padding:0 16px 16px;color:var(--muted);font-size:.9rem}
.unlock{position:fixed;inset:0;background:#000c;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center;padding:20px}

/* Listos para servir (mozos) */
.listos{background:#14532d44;border:1px solid var(--ok);border-radius:var(--r);padding:10px 14px;margin-bottom:14px}
.listos .it{display:inline-flex;gap:6px;align-items:center;background:var(--panel);border-radius:8px;padding:6px 10px;margin:4px 6px 0 0}

/* Modal */
.modal-bg{position:fixed;inset:0;background:#000a;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;width:100%;max-width:520px;max-height:92vh;overflow:auto}
.modal.wide{max-width:760px}
.paybtns{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.paybtns .active,.seg .active{background:var(--pri);border-color:var(--pri);color:#fff}
.seg{display:flex;gap:6px}
.seg .btn{flex:1}

#toasts{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 16px;border-radius:10px;background:var(--panel2);border-left:5px solid var(--ok);box-shadow:0 6px 20px #0008;max-width:360px}
.toast.err{border-color:var(--err)}
.toast.warn{border-color:var(--warn)}

/* Componentes añadidos */
.brand{display:flex;align-items:center;gap:8px}
.brand img{max-height:34px;max-width:60px;border-radius:6px;background:#fff;padding:2px}
.input-btn{display:flex;gap:6px;margin-top:4px}
.input-btn input{margin-top:0;flex:1;min-width:0}
.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.modal-head h3{margin:0;flex:1}
.big-total{font-size:1.4rem;color:var(--pri)}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.cart-toggle{display:none}
#menuBackdrop{display:none}
.hint{font-size:.85rem;color:var(--muted)}
.preview-frame{width:100%;height:560px;border:1px solid var(--line);border-radius:10px;background:#fff}
.logo-prev{max-height:80px;max-width:200px;background:#fff;padding:6px;border-radius:8px;display:block;margin:6px 0}
.card > table,.card > .table-wrap{margin:0}
.filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.filters label{margin:0;flex:1 1 140px}
.filters .btn{flex:0 0 auto}
.pos-left,.pos-right,.card,.modal{min-width:0}
img{max-width:100%}

/* ===================== TABLET (≤ 1100px) ===================== */
@media (max-width:1100px){
  .sidebar{width:200px;flex-basis:200px}
  .pos{grid-template-columns:minmax(0,1fr) 330px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kds{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}

/* ============ TABLET VERTICAL / CELULAR (≤ 900px) ============ */
@media (max-width:900px){
  body{display:block}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:35;width:260px;transform:translateX(-105%);transition:transform .22s ease;box-shadow:none}
  .sidebar.open{transform:none;box-shadow:0 0 40px #000}
  body.menu-open #menuBackdrop{display:block;position:fixed;inset:0;background:#0009;z-index:34}
  body.menu-open,body.modal-open{overflow:hidden}
  .btn.menu-btn{display:inline-flex;font-size:1.3rem;padding:6px 12px}
  .main{height:auto;min-height:100vh;min-height:100dvh;overflow:visible;padding:0 12px 16px}
  .topbar{position:sticky;top:0;z-index:20;background:var(--bg);margin:0 -12px 12px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .topbar h1{font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .g3{grid-template-columns:1fr}
  .g3.keep{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* POS en tablet vertical: productos + pedido al costado */
  .pos{grid-template-columns:minmax(0,1fr) 300px;height:auto;align-items:start}
  .pos-left{min-height:calc(100dvh - 76px)}
  .prods{overflow:visible}
  .pos-right{position:sticky;top:64px;height:calc(100dvh - 76px)}
  .cart-item{grid-template-columns:1fr auto}

  /* Tablas anchas: desplazamiento horizontal dentro de la tarjeta */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card table.stack{min-width:560px}

  .g3.keep{grid-template-columns:repeat(3,minmax(0,1fr))}
  .modal-bg{align-items:flex-end;padding:0}
  .modal{max-width:none;width:100%;border-radius:18px 18px 0 0;max-height:94dvh;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .modal.wide{max-width:none}
  .modal-foot{position:sticky;bottom:-16px;background:var(--panel);margin:14px -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .modal-foot .btn{flex:1}

  .kds-top{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .kds-top h1{flex:1 1 100%;font-size:1.15rem}
  .kds-top .btn{padding:7px 10px;font-size:.85rem}
  .kds{padding:10px;gap:10px}
}

/* ========= CELULAR Y TABLET PEQUEÑA (≤ 767px): pedido en hoja inferior ========= */
@media (max-width:767px){
  .pos,body.full .pos{display:block;height:auto;padding:0}
  .pos-left{padding-bottom:84px}
  .prods{overflow:visible;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .cats{position:sticky;top:57px;z-index:10;background:var(--bg);padding:6px 0;margin:0 0 8px}
  .search{position:relative}
  .pos-right{position:fixed;left:0;right:0;bottom:0;z-index:25;border-radius:16px 16px 0 0;border-bottom:0;
    max-height:calc(100dvh - 40px);height:64px;overflow:hidden;transition:height .25s ease;box-shadow:0 -8px 30px #0009;
    padding-bottom:env(safe-area-inset-bottom)}
  .pos-right.open{height:calc(100dvh - 40px)}
  .cart-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:64px;padding:10px 16px;background:var(--pri);color:#fff;border:0;font:inherit;font-weight:700;cursor:pointer;flex:0 0 auto}
  .cart-toggle .ct-n{background:#fff;color:var(--pri2);border-radius:99px;min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
  .cart-toggle .ct-l{flex:1;text-align:left}
  .cart-toggle .ct-t{font-size:1.2rem}
  .cart-toggle .ct-a{transition:transform .2s}
  .pos-right.open .ct-a{transform:rotate(180deg)}
  .cart-toggle.bump{animation:bump .3s}
  @keyframes bump{50%{transform:scale(1.03)}}
  .cart{flex:1;min-height:0}
  .cart-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .pos-left{min-height:0}
}

/* ======================= CELULAR (≤ 600px) ======================= */
@media (max-width:600px){
  body{font-size:15px}
  input,select,textarea{font-size:16px} /* evita el zoom automático en iPhone */
  .g2,.g4{grid-template-columns:1fr}
  .g4.stats,.grid.g4.mb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2.keep{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3.keep{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.keep .btn{padding:10px 6px;font-size:.85rem;white-space:normal;text-align:center}
  .card{padding:12px}
  .stat b{font-size:1.25rem}
  .btn{padding:10px 12px}
  .btn.lg{padding:14px 14px}
  .row.between{align-items:stretch}
  .row.between > *{flex:1 1 auto}
  .tabs{margin-bottom:8px}
  .legend{flex-wrap:wrap;gap:8px}
  .mesas{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .mesa{min-height:92px;padding:10px 6px}
  .mesa .n{font-size:1.25rem}
  .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .prod{min-height:78px;padding:10px}
  .paybtns{grid-template-columns:repeat(3,1fr)}
  .seg{flex-wrap:wrap}
  .seg .btn{flex:1 1 30%;padding:10px 6px}
  .total{font-size:1.2rem}
  .kds{grid-template-columns:1fr}
  .ticket li{font-size:1.05rem}
  .listos .it{display:flex;flex-wrap:wrap;margin-right:0}
  .filters label{flex:1 1 45%}
  .preview-frame{height:480px}
  #toasts{left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{max-width:none}
  .login{padding:20px}
  h3{font-size:1.05rem}
  .grid .btn.lg{white-space:normal;text-align:center;line-height:1.2}

  /* Tablas como tarjetas apiladas */
  .card{overflow-x:visible}
  .card table.stack{min-width:0}
  table.stack,table.stack tbody,table.stack tr,table.stack td,table.stack th{display:block;width:100%}
  table.stack tr.thead{display:none}
  table.stack tr{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin-bottom:8px}
  table.stack tr:hover td{background:none}
  table.stack td,table.stack th{border:0;padding:4px 0;display:flex;justify-content:flex-end;flex-wrap:wrap;align-items:center;gap:4px 8px;text-align:right;white-space:normal!important}
  table.stack td::before,table.stack th[data-label]::before{content:attr(data-label);color:var(--muted);font-size:.78rem;font-weight:600;text-transform:uppercase;text-align:left;flex:0 0 auto;max-width:45%;margin-right:auto}
  table.stack td:not([data-label])::before{content:none}
  table.stack td.vacio{display:none}
  table.stack td.right,table.stack td:last-child{justify-content:flex-end;flex-wrap:wrap}
  table.stack td:last-child::before{content:none}
  table.stack td > br{display:none}
  table.stack td small{display:block}
  table.stack input,table.stack select{margin-top:0;max-width:62%}
}

/* Barras de desplazamiento discretas */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:8px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

/* Buscador de clientes */
.doc-tipo{gap:4px}
.doc-tipo .btn{padding:4px 12px;flex:0 0 auto}
.doc-tipo .active{background:var(--info);border-color:var(--info);color:#fff}
.ac-wrap{position:relative;margin-top:4px}
.ac-wrap input{margin-top:0}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--panel2);border:1px solid var(--line);border-radius:0 0 10px 10px;max-height:240px;overflow:auto;box-shadow:0 10px 24px #0008}
.ac-item{display:block;width:100%;text-align:left;padding:10px 12px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer}
.ac-item:hover,.ac-item:focus{background:var(--pri);color:#fff}
.ac-item b{margin-right:6px}
.nuevo-cli{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:8px;padding:10px;border:1px dashed var(--info);border-radius:10px;background:#1e3a8a33}
.nuevo-cli[hidden],.ac-list[hidden]{display:none}
.danger-zone{border-color:var(--err)}
.danger-zone h3{color:var(--err)}