:root{
  --bg:#0f1216; --bg2:#161b22; --bg3:#1d242e; --line:#2a323d;
  --txt:#e6edf3; --dim:#8b98a8; --amber:#f0a92c; --amber2:#c9871a;
  --green:#2ea043; --red:#da3633; --blue:#388bfd; --radio:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-size:15px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; width:100%; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--amber)}
label{display:block;font-size:12px;color:var(--dim);margin:0 0 4px;text-transform:uppercase;letter-spacing:.04em}
button{cursor:pointer}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;padding:0 16px;height:58px;
  background:var(--bg2);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.marca{font-weight:700;letter-spacing:.02em;white-space:nowrap;font-size:16px}
.marca .logo{color:var(--amber)}
.nav{display:flex;gap:2px;overflow-x:auto;flex:1}
.nav-item{
  display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:8px;
  color:var(--dim);font-size:14px;white-space:nowrap;
}
.nav-item:hover{background:var(--bg3);color:var(--txt);text-decoration:none}
.nav-item.on{background:var(--bg3);color:var(--amber);font-weight:600}
.nav-item .ic{font-size:15px;opacity:.9}
.usuario{display:flex;align-items:center;gap:10px;white-space:nowrap}
.pill{background:var(--bg3);border:1px solid var(--line);border-radius:99px;padding:4px 11px;font-size:12.5px;color:var(--dim)}
.salir{font-size:13px;color:var(--dim)}
.salir:hover{color:var(--red)}

.contenido{padding:18px;max-width:1500px;margin:0 auto}
.pie-app{padding:22px 18px 40px;text-align:center;color:#5c6878;font-size:12px}

/* ---------- cabeceras / tarjetas ---------- */
.cab{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
h1{font-size:21px;margin:0;font-weight:650;letter-spacing:-.01em}
h2{font-size:15px;margin:0 0 12px;font-weight:650;color:var(--txt)}
.sub{color:var(--dim);font-size:13px;margin-top:3px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radio);padding:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:9px 15px;font-size:14px;font-weight:550;color:var(--txt);
}
.btn:hover{background:#242d38;text-decoration:none}
.btn.primario{background:var(--amber);border-color:var(--amber);color:#1a1204;font-weight:700}
.btn.primario:hover{background:#ffbc42}
.btn.peligro{background:transparent;border-color:#5a2222;color:#ff8a85}
.btn.peligro:hover{background:#2a1414}
.btn.verde{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.btn.mini{padding:4px 9px;font-size:12.5px;border-radius:6px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--dim);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);
}
td{padding:10px;border-bottom:1px solid #1f262f;vertical-align:middle}
tr:hover td{background:#131922}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

/* ---------- badges ---------- */
.tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:600;border:1px solid transparent}
.tag.ok{background:#0f2a17;color:#5fd47a;border-color:#1c4a2a}
.tag.warn{background:#2c2109;color:#efb545;border-color:#4d3a12}
.tag.err{background:#2c1113;color:#ff7b72;border-color:#5a2225}
.tag.info{background:#0d2138;color:#79b8ff;border-color:#1c3f66}
.tag.mute{background:#1b222b;color:var(--dim);border-color:var(--line)}

/* ---------- formularios ---------- */
.fila{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.fila > *{flex:1;min-width:140px}
.fila .angosto{flex:0 0 120px;min-width:110px}
.acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}
details.panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radio);margin-bottom:16px}
details.panel > summary{padding:13px 16px;cursor:pointer;font-weight:600;font-size:14px;color:var(--amber);list-style:none}
details.panel > summary::-webkit-details-marker{display:none}
details.panel > summary::before{content:"+ ";color:var(--dim)}
details.panel[open] > summary::before{content:"− "}
details.panel .cuerpo{padding:0 16px 16px}

/* ---------- flash ---------- */
.flash{padding:11px 15px;border-radius:8px;margin-bottom:14px;font-size:14px;border:1px solid}
.flash.ok{background:#0f2a17;border-color:#1c4a2a;color:#8ee6a1}
.flash.error{background:#2c1113;border-color:#5a2225;color:#ff9a94}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{width:100%;max-width:370px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:28px}
.login h1{font-size:22px;margin-bottom:4px}
.login .pin{font-size:22px;letter-spacing:.35em;text-align:center;padding:12px;font-family:ui-monospace,monospace}
.login .err{color:#ff9a94;font-size:13.5px;margin:8px 0 0}

/* ---------- TPV ---------- */
.tpv{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:start}
@media (max-width:1050px){.tpv{grid-template-columns:1fr}}
.panel-mesas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mesa-btn{
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:8px 13px;font-size:13.5px;color:var(--dim);
}
.mesa-btn:hover{color:var(--txt);border-color:#3d4753}
.mesa-btn.on{background:var(--amber);color:#1a1204;border-color:var(--amber);font-weight:700}
.mesa-btn.ocupada{border-color:#7a5a12;color:#efb545}
.mesa-btn .t{display:block;font-size:11px;opacity:.8}
.cats{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.cat{background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:13.5px;color:var(--dim)}
.cat.on{background:#2a2210;border-color:var(--amber2);color:var(--amber);font-weight:600}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.prod{
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:12px 12px 11px;text-align:left;min-height:76px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.prod:hover{border-color:var(--amber2);background:#1a212a}
.prod:active{transform:scale(.98)}
.prod .n{font-size:13.5px;font-weight:550;line-height:1.25}
.prod .p{color:var(--amber);font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.prod .s{font-size:10.5px;color:var(--dim)}
.prod.agotado{opacity:.5}

.comanda{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radio);position:sticky;top:74px}
.comanda-cab{padding:13px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}
.comanda-cab .m{font-weight:650}
.comanda-lineas{max-height:45vh;overflow-y:auto}
.cl{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 15px;border-bottom:1px solid #1c232c;align-items:center}
.cl .nom{font-size:13.5px;line-height:1.25}
.cl .meta{font-size:11.5px;color:var(--dim);margin-top:2px}
.cl .imp{font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px;text-align:right}
.cl .ops{display:flex;gap:4px;align-items:center;margin-top:5px}
.qbtn{width:25px;height:25px;border-radius:6px;background:var(--bg3);border:1px solid var(--line);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.qbtn:hover{border-color:var(--amber2);color:var(--amber)}
.qval{min-width:26px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px}
.vacio{padding:26px 15px;text-align:center;color:var(--dim);font-size:13.5px}
.totales{padding:13px 15px;border-top:1px solid var(--line)}
.tot-linea{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);margin-bottom:5px}
.tot-linea.grande{font-size:19px;color:var(--txt);font-weight:750;margin:8px 0 2px}
.tot-linea .v{font-variant-numeric:tabular-nums}
.pagos{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:13px 15px;border-top:1px solid var(--line)}
.pago{padding:13px 8px;border-radius:8px;background:var(--bg3);border:1px solid var(--line);font-size:13.5px;font-weight:600}
.pago.on{border-color:var(--amber);background:#2a2210;color:var(--amber)}
.cobrar{width:calc(100% - 30px);margin:0 15px 15px;padding:15px;border-radius:9px;font-size:16px;font-weight:750;background:var(--green);border:1px solid var(--green);color:#fff}
.cobrar:hover{background:#3fb950}
.cobrar:disabled{background:var(--bg3);border-color:var(--line);color:var(--dim)}
.buscador{position:relative}
.buscador input{padding-left:34px}
.buscador .lupa{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:14px}

/* ---------- ticket modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.68);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal.on{display:flex}
.modal-caja{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:420px;width:100%}
.modal-caja h2{margin-bottom:6px}
.cambio{font-size:28px;font-weight:750;color:var(--green);font-variant-numeric:tabular-nums;margin:10px 0}
.aviso-stock{color:#efb545;font-size:12.5px;padding:8px 15px;background:#211908;border-top:1px solid #3d2f10}

/* ================= MÓVIL ================= */
@media (max-width: 760px){
  body{font-size:15px;-webkit-text-size-adjust:100%}
  .topbar{height:auto;flex-wrap:wrap;padding:8px 10px;gap:6px;position:sticky}
  .marca{font-size:15px}
  .nav{order:3;width:100%;gap:3px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;flex:0 0 100%}
  .nav-item{padding:8px 11px;font-size:13px;flex:0 0 auto}
  .usuario{margin-left:auto;gap:8px}
  .pill{font-size:11.5px;padding:3px 9px}
  .contenido{padding:12px 12px 0}
  h1{font-size:19px} h2{font-size:14px}
  .card{padding:12px}
  .cab{gap:10px}
  .cab > form, .cab .buscador{width:100%;flex:1 1 100% !important;min-width:0 !important}
  input,select,textarea{font-size:16px;padding:10px}      /* sin zoom automático en iOS */
  .grid.g4,.grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  table{font-size:13px}
  th,td{padding:7px 6px}
  .mesa-btn{padding:8px 10px;font-size:12.5px}
  .prods{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
  .prod{min-height:72px;padding:9px}
  .prod .n{font-size:12.5px}
  .prod .p{font-size:13.5px}

  /* TPV: carrito fijo abajo, siempre a la vista */
  .tpv{grid-template-columns:1fr;padding-bottom:66vh}
  .comanda{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:80;
    max-height:64vh;overflow-y:auto;
    border-radius:14px 14px 0 0;border-bottom:none;
    box-shadow:0 -10px 34px rgba(0,0,0,.6);
  }
  .comanda-lineas{max-height:26vh}
  .pagos{grid-template-columns:repeat(2,1fr);gap:6px;padding:10px 12px}
  .pago{padding:11px 6px;font-size:13px}
  .cobrar{margin:0 12px 12px;width:calc(100% - 24px);padding:14px;font-size:16px}
  .modal{padding:12px}
  .modal-caja{padding:18px}
  .pie-app{display:none}
}
@media (max-width: 420px){
  .grid.g4,.grid.g3{grid-template-columns:1fr}
  .nav-item{font-size:12.5px;padding:7px 9px}
}

/* TPV móvil: acciones principales arriba del panel fijo */
@media (max-width: 760px){
  .comanda{max-height:58vh;display:flex;flex-direction:column;overflow:hidden}
  .comanda-cab{order:1;flex:0 0 auto}
  .totales{order:2;flex:0 0 auto;padding:10px 14px}
  .comanda > .cobrar{order:3;flex:0 0 auto;margin:0 12px 10px}
  .comanda-lineas{order:4;flex:1 1 auto;max-height:none;min-height:44px;overflow-y:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .pagos{order:5;flex:0 0 auto}
  .zona-cliente{order:6;flex:0 0 auto;padding:8px 14px 6px !important}
  .zona-comanda-btn{order:7;flex:0 0 auto;padding:0 12px 10px !important}
  .zona-cliente label{font-size:10.5px;margin-bottom:2px}
  .zona-cliente select{padding:8px 10px;font-size:14px}
  .tot-linea.grande{font-size:17px;margin:4px 0 0}
}

@media (max-width: 760px){
  .zona-cliente{display:none !important}          /* facturar se hace desde el escritorio */
  .pagos{grid-template-columns:repeat(4,1fr) !important;gap:5px !important;padding:8px 10px !important}
  .pago{padding:9px 3px !important;font-size:11.5px !important;line-height:1.1}
  .comanda-lineas{min-height:120px !important}
  .zona-comanda-btn{padding:0 10px 8px !important}
  .zona-comanda-btn .btn{padding:9px;font-size:13px}
}

/* =====================================================================
   MODO TÁCTIL (pantalla 15,6" de mostrador)
   Objetivos >= 48 px, feedback al pulsar, sin depender del hover.
   Se activa solo con puntero grueso o a la fuerza desde Ajustes.
   ===================================================================== */
html.tactil, html.tactil body{font-size:16px}
html.tactil *{-webkit-tap-highlight-color:transparent}
html.tactil button,
html.tactil .prod,
html.tactil .mesa-btn,
html.tactil .cat,
html.tactil .pago,
html.tactil .nav-item,
html.tactil .rapido,
html.tactil .teclado button,
html.tactil .qbtn{touch-action:manipulation;user-select:none;-webkit-user-select:none}

/* barra superior */
html.tactil .topbar{height:66px;padding:0 14px;gap:14px}
html.tactil .marca{font-size:17px}
html.tactil .nav-item{padding:15px 16px;font-size:15px;border-radius:10px}
html.tactil .pill{font-size:13px;padding:6px 14px}
html.tactil .salir{font-size:14px;padding:10px 6px}

/* formularios grandes */
html.tactil input,
html.tactil select,
html.tactil textarea{min-height:52px;font-size:17px;padding:12px 14px;border-radius:10px}
html.tactil label{font-size:12.5px;letter-spacing:.06em}
html.tactil .btn{min-height:52px;padding:14px 22px;font-size:16px;border-radius:10px}
html.tactil .btn.mini{min-height:44px;padding:10px 16px;font-size:14.5px;border-radius:8px}
html.tactil .btn:active,
html.tactil .nav-item:active{transform:scale(.97)}
html.tactil .card{border-radius:12px}

/* tablas: filas altas y acciones cómodas */
html.tactil th{font-size:12px;padding:14px 12px}
html.tactil td{padding:16px 12px;font-size:15px}
html.tactil .tag{font-size:12.5px;padding:4px 10px}

/* cabecera del TPV */
html.tactil .cab-tpv h1{font-size:24px}
html.tactil .cab-tpv .buscador input{min-height:56px;padding-left:42px;font-size:17px}
html.tactil .cab-tpv .buscador .lupa{font-size:18px;left:14px}

/* mesas: fichas grandes, se pulsan sin mirar */
html.tactil .panel-mesas{gap:10px;margin-bottom:16px}
html.tactil .mesa-btn{min-height:62px;min-width:104px;padding:10px 18px;font-size:16px;border-radius:10px;text-align:left}
html.tactil .mesa-btn .t{font-size:12.5px;margin-top:3px}
html.tactil .mesa-btn.on{box-shadow:0 0 0 2px rgba(240,169,44,.35)}
html.tactil .mesa-btn:active{transform:scale(.96)}

/* rejilla de 3 columnas: categorías | productos | comanda */
html.tactil .tpv{grid-template-columns:200px minmax(0,1fr) 460px;gap:14px}
html.tactil .tpv > .cats{
  flex-direction:column;flex-wrap:nowrap;gap:8px;
  position:sticky;top:80px;margin:0;
}
html.tactil .cat{
  width:100%;min-height:64px;padding:12px 16px;font-size:16px;font-weight:600;
  border-radius:10px;text-align:left;display:flex;align-items:center;line-height:1.2;
}
html.tactil .cat.on{background:#2a2210;color:var(--amber);border-color:var(--amber)}
html.tactil .cat:active{transform:scale(.97)}

/* productos */
html.tactil .prods{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px}
html.tactil .prod{min-height:112px;padding:14px 14px 12px;border-radius:12px;justify-content:space-between}
html.tactil .prod .n{font-size:16px;font-weight:600;line-height:1.25}
html.tactil .prod .p{font-size:21px;font-weight:750}
html.tactil .prod .s{font-size:11.5px}
html.tactil .prod:active{transform:scale(.965);border-color:var(--amber);background:#241d10}
html.tactil .prod:hover{border-color:var(--line);background:var(--bg2)}
html.tactil .prod:active:hover{border-color:var(--amber);background:#241d10}

/* comanda */
html.tactil .comanda{width:auto;max-height:calc(100vh - 92px);display:flex;flex-direction:column}
html.tactil .comanda-cab{padding:14px 16px}
html.tactil .comanda-cab .m{font-size:17px}
html.tactil .comanda-lineas{flex:1 1 auto;max-height:none;min-height:120px;overflow-y:auto}
html.tactil .cl{padding:12px 16px;gap:10px}
html.tactil .cl .nom{font-size:15.5px}
html.tactil .cl .meta{font-size:12.5px}
html.tactil .cl .imp{font-size:16px}
html.tactil .cl .ops{margin-top:8px;gap:8px}
html.tactil .qbtn{width:48px;height:48px;font-size:22px;border-radius:10px}
html.tactil .qbtn:active{background:#33280f;color:var(--amber);transform:scale(.94)}
html.tactil .qval{min-width:44px;font-size:16px;font-weight:600}
html.tactil .totales{padding:14px 16px}
html.tactil .tot-linea{font-size:14px}
html.tactil .tot-linea.grande{font-size:26px}
html.tactil .zona-cliente{padding:0 16px 10px !important}
html.tactil .zona-comanda-btn{padding:0 16px 10px !important}
html.tactil .zona-comanda-btn .btn{min-height:50px}
html.tactil .pagos{grid-template-columns:repeat(2,1fr);gap:9px;padding:0 16px 12px}
html.tactil .pago{min-height:64px;font-size:17px;border-radius:10px}
html.tactil .pago:active{transform:scale(.97)}
html.tactil .pago.on{box-shadow:0 0 0 2px rgba(240,169,44,.3) inset}
html.tactil .cobrar{
  min-height:84px;font-size:24px;font-weight:800;letter-spacing:.01em;
  margin:0 16px 16px;width:calc(100% - 32px);border-radius:12px;
}
html.tactil .cobrar:active{transform:scale(.985);background:#39b64a}
html.tactil .cobrar:disabled{transform:none}

/* modal de cobro con teclado */
html.tactil .modal{padding:16px}
html.tactil .modal-pago{max-width:860px;padding:0;overflow:hidden}
html.tactil .mp-cab{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
html.tactil .mp-cab h2{margin:0;font-size:19px}
html.tactil .mp-cuerpo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0}
html.tactil .mp-izq{padding:16px 20px 20px;border-right:1px solid var(--line)}
html.tactil .mp-der{padding:16px 20px 20px;display:flex;flex-direction:column}
html.tactil .mp-display{
  font-size:34px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px;
}
html.tactil .rapidos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
html.tactil .rapido{min-height:52px;border-radius:9px;background:var(--bg3);border:1px solid var(--line);font-size:16px;font-weight:600}
html.tactil .rapido:active{background:#33280f;color:var(--amber)}
html.tactil .teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
html.tactil .teclado button{min-height:66px;font-size:24px;font-weight:600;border-radius:10px;background:var(--bg3);border:1px solid var(--line)}
html.tactil .teclado button:active{background:var(--amber);color:#1a1204;transform:scale(.97)}
html.tactil .mp-boton{min-height:56px;margin-bottom:9px;font-size:16.5px}
html.tactil .mp-der .cambio{font-size:32px;margin:6px 0 16px}
html.tactil .mp-der .verde{min-height:70px;font-size:19px;font-weight:800}

/* versión táctil en pantallas medianas: categorías arriba, sin carril */
@media (min-width:761px) and (max-width:1200px){
  html.tactil .tpv{grid-template-columns:minmax(0,1fr) 420px}
  html.tactil .tpv > .cats{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;position:static}
  html.tactil .cat{width:auto;min-height:52px;padding:10px 18px}
}
/* pantallas muy anchas (1920): carril algo más ancho y productos más grandes */
@media (min-width:1700px){
  html.tactil .tpv{grid-template-columns:220px minmax(0,1fr) 500px}
  html.tactil .prods{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
  html.tactil .cobrar{min-height:92px;font-size:26px}
}

/* login en táctil: PIN grande y teclado numérico del sistema */
html.tactil .login{max-width:460px;padding:34px 30px}
html.tactil .login h1{font-size:26px}
html.tactil .login .pin{font-size:34px;padding:18px;letter-spacing:.5em}
html.tactil .login select{min-height:58px;font-size:19px}
html.tactil .login .btn{min-height:64px;font-size:19px;margin-top:22px}

/* TPV táctil a pantalla completa: la página no scrollea, scrollea la rejilla */
@media (min-width:761px){
  html.tactil body.p-tpv{height:100vh;overflow:hidden}
  html.tactil body.p-tpv .contenido{
    height:calc(100vh - 66px);max-width:none;display:flex;flex-direction:column;min-height:0;padding:14px 16px 0;
  }
  html.tactil body.p-tpv .pie-app{display:none}
  html.tactil body.p-tpv .tpv{flex:1 1 auto;min-height:0}
  html.tactil body.p-tpv .zona-productos{
    min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-right:6px;padding-bottom:10px;
  }
  html.tactil body.p-tpv .comanda{max-height:100%;margin-bottom:14px}
}

/* ajuste fino: la fila del grid debe poder encogerse para que scrollee sólo la rejilla */
@media (min-width:761px){
  html.tactil body.p-tpv .tpv{
    flex:1 1 auto;min-height:0;align-items:stretch;
    grid-template-rows:minmax(0,1fr);
  }
  html.tactil body.p-tpv .tpv > .cats{max-height:100%;overflow-y:auto;padding-right:4px}
  html.tactil body.p-tpv .zona-productos{min-height:0;overflow-y:auto}
  html.tactil body.p-tpv .comanda{max-height:100%;overflow-y:auto;margin-bottom:14px}
}

/* fix: una mesa ocupada y seleccionada a la vez debe seguir siendo legible */
.mesa-btn.on, .mesa-btn.on.ocupada{
  background:var(--amber);color:#1a1204;border-color:var(--amber);font-weight:700;
}
.mesa-btn.on .t, .mesa-btn.on.ocupada .t{color:#3a2a05;opacity:.85}

/* =====================================================================
   Lista de pedido: tipografía compacta y scroll propio
   La comanda es una columna flex con zonas fijas (cabecera, totales,
   pagos y Cobrar) y sólo la lista de líneas scrollea.
   ===================================================================== */
html.tactil .comanda{overflow:hidden}
html.tactil .comanda-lineas{
  flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#39424f transparent;
}
html.tactil .comanda-lineas::-webkit-scrollbar{width:10px}
html.tactil .comanda-lineas::-webkit-scrollbar-thumb{background:#39424f;border-radius:6px}
html.tactil .comanda-lineas::-webkit-scrollbar-track{background:transparent}

html.tactil .cl{padding:9px 14px;gap:8px;align-items:start}
html.tactil .cl .nom{font-size:14px;line-height:1.2;font-weight:600}
html.tactil .cl .meta{font-size:11px;margin-top:1px}
html.tactil .cl .imp{font-size:14.5px}
html.tactil .cl .ops{margin-top:5px;gap:6px}
html.tactil .qbtn{width:40px;height:40px;font-size:18px;border-radius:8px}
html.tactil .qval{min-width:34px;font-size:14px}

/* también algo más compacto en escritorio con ratón */
.cl .nom{font-size:13px}
.cl .meta{font-size:11px}
.cl .imp{font-size:13px}

/* pantallas de 1366x768: se ocultan bloques secundarios para que Cobrar siempre se vea */
@media (min-width:761px) and (max-height:880px){
  html.tactil .zona-cliente{display:none !important}
  html.tactil .zona-comanda-btn{padding:0 16px 8px !important}
  html.tactil .pago{min-height:54px;font-size:15px}
  html.tactil .cobrar{min-height:66px;font-size:21px;margin-bottom:12px}
  html.tactil .tot-linea.grande{font-size:23px}
  html.tactil .totales{padding:10px 16px}
}

/* compactar los bloques fijos de la comanda para que la lista tenga más sitio */
html.tactil .comanda-cab{padding:10px 14px}
html.tactil .totales{padding:10px 14px}
html.tactil .tot-linea{margin-bottom:3px}
html.tactil .pagos{grid-template-columns:repeat(4,1fr) !important;gap:6px;padding:0 14px 10px !important}
html.tactil .pago{min-height:54px;font-size:14.5px;padding:6px 4px;line-height:1.15}
html.tactil .zona-cliente{display:none !important}          /* la factura se emite desde Ventas */
html.tactil .zona-comanda-btn{padding:0 14px 8px !important}
html.tactil .zona-comanda-btn .btn{min-height:44px;font-size:14.5px}
html.tactil .cobrar{min-height:76px;font-size:22px;margin:0 14px 12px;width:calc(100% - 28px)}

/* línea de pedido en una sola fila: nombre+precio | −/+ | importe | borrar */
.cl{grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center}
.cl-info{min-width:0}
.cl .nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-ops{display:flex;align-items:center;gap:5px}
.cl .imp{min-width:62px;text-align:right}
.qbtn.del{background:transparent;border-color:transparent;color:#7d8896;width:36px}
.qbtn.del:active{background:#3a1414;color:#ff8a85;border-color:#5a2225}
html.tactil .cl{padding:8px 12px;gap:8px}
html.tactil .cl .nom{font-size:13.5px}
html.tactil .cl .meta{font-size:10.5px}
html.tactil .cl .imp{font-size:14px;min-width:70px}
html.tactil .qbtn{width:40px;height:40px}
html.tactil .qbtn.del{width:36px}
html.tactil .qval{min-width:30px;font-size:13.5px}
@media (max-width:760px){
  .cl{grid-template-columns:minmax(0,1fr) auto auto auto;gap:6px}
  .cl .meta{display:none}
  .qbtn.del{width:30px}
}

/* mesas en una sola fila (17 fichas caben sin robar altura) */
html.tactil .panel-mesas{gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
html.tactil .mesa-btn{min-width:88px;padding:8px 12px;font-size:14.5px}
html.tactil .mesa-btn .t{font-size:11.5px;margin-top:2px}

/* =====================================================================
   Fila de mesas con altura fija: nada se desplaza de sitio.
   El desplazamiento ocurre sólo dentro de la banda, sin barra visible,
   y con flechas ‹ › para moverse sin arrastrar.
   ===================================================================== */
html.tactil .mesas-barra{display:flex;align-items:center;gap:8px;margin-bottom:12px}
html.tactil .mesas-barra .panel-mesas{
  flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  margin:0;padding:0;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
}
html.tactil .mesas-barra .panel-mesas::-webkit-scrollbar{display:none;height:0}
html.tactil .mesa-nav{
  flex:0 0 auto;width:46px;height:62px;border-radius:10px;
  background:var(--bg2);border:1px solid var(--line);color:var(--dim);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
}
html.tactil .mesa-nav:active{background:var(--bg3);color:var(--amber)}
html.tactil .mesa-nav[disabled]{opacity:.25;pointer-events:none}
html.tactil .mesas-barra .mesa-btn{min-width:96px;height:62px}

/* los avisos del TPV flotan: no empujan mesas ni productos */
html.tactil body.p-tpv #alertas{
  position:fixed;left:236px;bottom:18px;z-index:140;
  max-width:min(640px,52vw);pointer-events:none;margin:0;
}
html.tactil body.p-tpv #alertas .flash{
  pointer-events:auto;box-shadow:0 10px 28px rgba(0,0,0,.55);margin:0;
}

/* buscador de la página de productos */
.buscador-productos{
  display:grid;grid-template-columns:minmax(200px,1fr) 170px auto auto;
  gap:10px;align-items:end;flex:1 1 640px;max-width:880px;
}
.buscador-productos .bp-campo{min-width:0}
.buscador-productos .angosto{width:auto}
.buscador-productos .btn{white-space:nowrap}
.cab > div:first-child{min-width:0}
@media (max-width:900px){
  .buscador-productos{grid-template-columns:1fr 1fr;width:100%;max-width:none}
  .buscador-productos .bp-campo{grid-column:1/-1}
}
@media (max-width:520px){
  .buscador-productos{grid-template-columns:1fr}
  .buscador-productos .angosto{width:100%}
}

/* calculadora de copas por botella (escandallo) */
.calc-copas{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font-size:13.5px;color:var(--dim);margin-bottom:12px;
}
.calc-copas .calc-linea{color:var(--txt);font-size:15px;margin-bottom:8px}
.calc-copas .calc-linea strong{color:var(--amber);font-size:18px}
.calc-copas .refs{display:flex;flex-wrap:wrap;gap:6px}
.calc-copas .ref{
  background:var(--bg3);border:1px solid var(--line);border-radius:99px;
  padding:6px 12px;font-size:12.5px;color:var(--dim);
}
.calc-copas .ref:hover{border-color:var(--amber2);color:var(--amber)}
html.tactil .calc-copas{font-size:14px}
html.tactil .calc-copas .ref{min-height:42px;padding:10px 16px;font-size:13.5px}

/* buscador de escandallo */
.buscador-escandallo{
  display:grid;grid-template-columns:minmax(190px,1fr) minmax(220px,1.15fr) auto auto;
  gap:10px;align-items:end;flex:1 1 640px;max-width:960px;
}
.buscador-escandallo .bp-campo,
.buscador-escandallo .bp-sel{min-width:0}
.buscador-escandallo .btn{white-space:nowrap}
@media (max-width:980px){
  .buscador-escandallo{grid-template-columns:1fr 1fr;width:100%;max-width:none}
  .buscador-escandallo .bp-campo{grid-column:1/-1}
}
@media (max-width:520px){
  .buscador-escandallo{grid-template-columns:1fr}
}

/* aviso de stock: contador en la barra superior, no en el TPV */
.badge-alerta{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;margin-left:6px;
  border-radius:99px;background:var(--amber);color:#1a1204;
  font-size:11.5px;font-weight:800;line-height:1;
}
html.tactil .badge-alerta{min-width:24px;height:24px;font-size:13px}

/* mesa/barra seleccionada: se tiene que ver de un vistazo */
.mesa-btn.sel{
  box-shadow:0 0 0 2px var(--bg2), 0 0 0 4px var(--amber);
  font-weight:800;
}
.mesa-btn.sel .t{color:#3a2a05}
html.tactil .mesa-btn.sel{box-shadow:0 0 0 2px var(--bg2), 0 0 0 4px var(--amber)}
.mesa-btn[disabled]{opacity:.35;cursor:not-allowed}
.mesa-btn.ocupada[disabled]{text-decoration:line-through}

/* modal de cambio de mesa */
html.tactil .modal-mesas{max-width:760px;padding:0;overflow:hidden}
.mover-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;padding:14px 20px 18px;max-height:52vh;overflow-y:auto}
.mover-lista .mesa-btn{width:100%;height:56px;min-width:0;justify-content:center;text-align:center}
html.tactil .mover-lista .mesa-btn{height:64px;font-size:15px}

/* Anular venta: ocupa el hueco de Invitación, en tono de aviso */
html.tactil .pago.anular, .pago.anular{
  color:#ff9a94;border-color:#5a2225;background:transparent;font-weight:600;
}
.pago.anular:active{background:#2a1414}
html.tactil .pago.anular{font-size:14.5px}

/* =====================================================================
   MÓVIL: TPV usable con una mano
   Categorías en tira horizontal · comanda como bandeja plegable
   ===================================================================== */
.com-mini{display:none}

@media (max-width:760px){
  /* barra superior en una sola fila */
  html.tactil .topbar{padding:6px 8px;gap:6px}
  html.tactil .nav{flex-wrap:nowrap;overflow-x:auto;gap:2px;padding-bottom:0;scrollbar-width:none}
  html.tactil .nav::-webkit-scrollbar{display:none}
  html.tactil .nav-item{padding:9px 10px;font-size:12.5px;gap:5px;flex:0 0 auto}
  html.tactil .nav-item .ic{font-size:13px}
  html.tactil .marca{font-size:14px}
  html.tactil .pill{display:none}
  html.tactil .salir{font-size:13px;padding:8px 4px}

  /* categorías: tira horizontal en vez de columna de 640 px */
  html.tactil .tpv > .cats{
    flex-direction:row;flex-wrap:nowrap;position:static;overflow-x:auto;overflow-y:hidden;
    gap:6px;margin:0 0 10px;padding:0 0 4px;scrollbar-width:none;max-height:none;
  }
  html.tactil .tpv > .cats::-webkit-scrollbar{display:none}
  html.tactil .cat{
    width:auto;flex:0 0 auto;min-height:46px;padding:10px 15px;font-size:14px;white-space:nowrap;
  }

  /* rejilla de productos a dos columnas */
  html.tactil .tpv{padding-bottom:92px}
  html.tactil .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html.tactil .prod{min-height:94px;padding:11px}
  html.tactil .prod .n{font-size:13.5px}
  html.tactil .prod .p{font-size:17.5px}

  /* comanda = bandeja plegada abajo */
  html.tactil .comanda{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;
    max-height:74px;overflow:hidden;display:flex;flex-direction:column;
    border-radius:14px 14px 0 0;margin:0;border-bottom:none;
    box-shadow:0 -10px 30px rgba(0,0,0,.6);
    transition:max-height .18s ease;
  }
  html.tactil .comanda.abierta{max-height:78vh;overflow-y:auto}
  html.tactil .com-mini{display:flex;align-items:center;gap:8px;margin-left:auto}
  html.tactil .com-mini .tot{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
  html.tactil .com-mini .chev{font-size:16px;color:var(--dim);transition:transform .18s}
  html.tactil .comanda.abierta .com-mini .chev{transform:rotate(180deg)}
  html.tactil .comanda-cab{cursor:pointer;padding:12px 14px}
  html.tactil .comanda-cab .m{font-size:15px}
  html.tactil .comanda-cab .sub{font-size:11.5px}
  html.tactil .comanda-lineas{min-height:0}
  html.tactil .comanda.abierta .comanda-lineas{max-height:30vh}
  html.tactil .cobrar{min-height:64px;font-size:19px;margin:0 12px 12px;width:calc(100% - 24px)}
  html.tactil .pagado .pago{min-height:48px}
  html.tactil .pago{min-height:48px;font-size:13.5px}
  html.tactil .tot-linea.grande{font-size:21px}
}

@media (max-width:760px){
  /* el móvil vuelve a una sola columna (la regla táctil de escritorio ponía 3) */
  html.tactil .tpv{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  html.tactil .zona-productos{min-width:0}
  html.tactil .prods{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* =====================================================================
   MÓVIL: tablas legibles (se ocultan columnas secundarias)
   ===================================================================== */
@media (max-width:760px){
  html.tactil .card{max-width:100%}
  html.tactil .fila > *{min-width:0}
  html.tactil input, html.tactil select{max-width:100%}
  html.tactil table{font-size:13px}
  html.tactil th, html.tactil td{padding:9px 8px}
  html.tactil .btn.mini{min-height:38px;padding:8px 10px;font-size:13px}

  /* artículos: fuera categoría, sección, IVA, coste y margen */
  .tabla-articulos th:nth-child(2), .tabla-articulos td:nth-child(2),
  .tabla-articulos th:nth-child(3), .tabla-articulos td:nth-child(3),
  .tabla-articulos th:nth-child(5), .tabla-articulos td:nth-child(5),
  .tabla-articulos th:nth-child(6), .tabla-articulos td:nth-child(6),
  .tabla-articulos th:nth-child(7), .tabla-articulos td:nth-child(7){display:none}

  /* ventas: sólo ticket, total, estado y acciones */
  .tabla-ventas th:nth-child(2), .tabla-ventas td:nth-child(2),
  .tabla-ventas th:nth-child(3), .tabla-ventas td:nth-child(3),
  .tabla-ventas th:nth-child(4), .tabla-ventas td:nth-child(4),
  .tabla-ventas th:nth-child(5), .tabla-ventas td:nth-child(5),
  .tabla-ventas th:nth-child(7), .tabla-ventas td:nth-child(7){display:none}

  /* stock: producto, total, estado */
  .tabla-stock th:nth-child(2), .tabla-stock td:nth-child(2),
  .tabla-stock th:nth-child(3), .tabla-stock td:nth-child(3),
  .tabla-stock th:nth-child(4), .tabla-stock td:nth-child(4),
  .tabla-stock th:nth-child(6), .tabla-stock td:nth-child(6){display:none}

  /* movimientos: fecha, producto, tipo, cantidad */
  .tabla-movstock th:nth-child(4), .tabla-movstock td:nth-child(4),
  .tabla-movstock th:nth-child(6), .tabla-movstock td:nth-child(6),
  .tabla-movstock th:nth-child(7), .tabla-movstock td:nth-child(7),
  .tabla-movstock th:nth-child(8), .tabla-movstock td:nth-child(8){display:none}

  /* receta: insumo, cantidad, copas/envase y borrar */
  .tabla-receta th:nth-child(3), .tabla-receta td:nth-child(3),
  .tabla-receta th:nth-child(4), .tabla-receta td:nth-child(4),
  .tabla-receta th:nth-child(5), .tabla-receta td:nth-child(5),
  .tabla-receta th:nth-child(7), .tabla-receta td:nth-child(7){display:none}

  /* cobertura: fuera categoría y coste */
  .tabla-cobertura th:nth-child(2), .tabla-cobertura td:nth-child(2),
  .tabla-cobertura th:nth-child(4), .tabla-cobertura td:nth-child(4){display:none}

  /* ranking estadísticas: fuera nº, sección, coste y margen */
  .tabla-ranking th:nth-child(1), .tabla-ranking td:nth-child(1),
  .tabla-ranking th:nth-child(3), .tabla-ranking td:nth-child(3),
  .tabla-ranking th:nth-child(6), .tabla-ranking td:nth-child(6),
  .tabla-ranking th:nth-child(7), .tabla-ranking td:nth-child(7){display:none}

  /* clientes: fuera NIF, dirección y nº facturas */
  .tabla-clientes th:nth-child(2), .tabla-clientes td:nth-child(2),
  .tabla-clientes th:nth-child(4), .tabla-clientes td:nth-child(4),
  .tabla-clientes th:nth-child(5), .tabla-clientes td:nth-child(5){display:none}

  /* facturas: número, total y acciones */
  .tabla-facturas th:nth-child(3), .tabla-facturas td:nth-child(3),
  .tabla-facturas th:nth-child(4), .tabla-facturas td:nth-child(4),
  .tabla-facturas th:nth-child(5), .tabla-facturas td:nth-child(5),
  .tabla-facturas th:nth-child(7), .tabla-facturas td:nth-child(7){display:none}

  /* top productos de caja: fuera sección y % */
  .tabla-top th:nth-child(2), .tabla-top td:nth-child(2),
  .tabla-top th:nth-child(5), .tabla-top td:nth-child(5){display:none}
}

@media (max-width:760px){
  /* formularios apilados: evita desbordes y se rellenan mejor con el pulgar */
  html.tactil .fila{flex-direction:column;gap:10px}
  html.tactil .fila > *{width:100%;flex:1 1 auto !important;min-width:0}
  html.tactil .angosto{flex:0 0 auto !important}
  html.tactil .acciones{justify-content:stretch}
  html.tactil .acciones .btn{flex:1}
  html.tactil .cab{flex-direction:column;align-items:stretch}
  html.tactil .cab > form, html.tactil .buscador-productos, html.tactil .buscador-escandallo{width:100%;max-width:none;grid-template-columns:1fr}
  html.tactil .buscador-productos .bp-campo,
  html.tactil .buscador-productos .angosto,
  html.tactil .buscador-escandallo .bp-campo,
  html.tactil .buscador-escandallo .bp-sel{grid-column:auto;width:100%}
  /* artículos: fuera también el estado (se ve en el color/badge del stock) */
  .tabla-articulos th:nth-child(9), .tabla-articulos td:nth-child(9){display:none}
  /* la tabla se puede arrastrar si aún no cabe */
  .card table{min-width:0}
}

@media (max-width:760px){
  /* orden natural dentro de la bandeja: líneas → total → cobrar → pagos */
  html.tactil .comanda-lineas{order:2}
  html.tactil .totales{order:3}
  html.tactil .comanda > .cobrar{order:4}
  html.tactil .pagos{order:5}
  html.tactil .zona-comanda-btn{order:6}
  html.tactil .comanda.abierta .comanda-lineas{max-height:none;min-height:96px}
}

@media (max-width:760px){
  /* indicadores en dos columnas (no apilar 4 tarjetas) */
  html.tactil .grid.g4, html.tactil .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html.tactil .grid.g4 .card, html.tactil .grid.g3 .card{padding:10px 12px}
  html.tactil .grid.g4 .card [style*="font-size:24px"],
  html.tactil .grid.g4 .card [style*="font-size:26px"]{font-size:20px !important}
  html.tactil .nav-item{padding:8px 9px;font-size:12px}
  html.tactil .nav-item .ic{font-size:12px}
}
@media (max-width:380px){
  html.tactil .nav-item{font-size:11px;padding:7px 7px}
}

/* =====================================================================
   MÓVIL v2: cabecera mínima + selector de mesa siempre visible
   ===================================================================== */
.selector-mesa-movil{display:none}

@media (max-width:760px){
  /* fuera la banda de mesas: la sustituye el selector */
  html.tactil .mesas-barra{display:none}
  html.tactil .selector-mesa-movil{display:block;margin:0 0 10px}

  .btn-mesa-movil{
    width:100%;display:flex;align-items:center;gap:12px;
    padding:10px 16px;min-height:62px;
    background:var(--bg2);border:1px solid var(--line);border-radius:12px;
    color:var(--txt);text-align:left;
  }
  .btn-mesa-movil .ico{font-size:20px}
  .btn-mesa-movil .txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .btn-mesa-movil .txt small{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
  .btn-mesa-movil .txt strong{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .btn-mesa-movil .chev{margin-left:auto;color:var(--dim);font-size:16px}
  .btn-mesa-movil.ocupada{border-color:var(--amber);background:#241d10;box-shadow:inset 0 0 0 1px rgba(240,169,44,.35)}
  .btn-mesa-movil:active{background:var(--bg3)}

  /* cabecera del TPV: fuera título, sólo buscador */
  html.tactil .cab-tpv{flex-direction:row;align-items:center;gap:8px;margin-bottom:10px}
  html.tactil .cab-tpv > div:first-child{display:none}
  html.tactil .cab-tpv .buscador{flex:1 1 auto;min-width:0}
  html.tactil .cab-tpv .buscador input{min-height:48px;font-size:15px}

  /* el modal de mesas, como hoja inferior con rejilla de 3 */
  html.tactil #modal-mesas .modal-caja{
    align-self:flex-end;width:100%;max-width:none;max-height:82vh;
    border-radius:16px 16px 0 0;padding:0;
  }
  html.tactil #modal-mesas .mover-lista{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px;max-height:64vh;
  }
  html.tactil #modal-mesas .mesa-btn{height:58px;font-size:14px}
  html.tactil #modal-mesas .mesa-btn .t{font-size:11px}
}

@media (max-width:760px){
  html.tactil #modal-mesas{align-items:flex-end;justify-content:center;padding:0}
  html.tactil #modal-mesas .modal-caja{border-radius:16px 16px 0 0;margin:0}
}

/* =====================================================================
   MÓVIL v3: menú lateral y bandeja vacía compacta
   ===================================================================== */
.btn-menu{display:none}
.drawer,.drawer-fondo{display:none}

@media (max-width:760px){
  html.tactil .btn-menu{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:44px;height:44px;border-radius:10px;background:var(--bg2);
    border:1px solid var(--line);color:var(--txt);font-size:20px;line-height:1;
  }
  html.tactil .btn-menu:active{background:var(--bg3)}
  html.tactil .nav{display:none}
  html.tactil .marca{flex:1 1 auto;min-width:0;font-size:15px}

  .drawer-fondo{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.62);
    opacity:0;pointer-events:none;transition:opacity .18s;z-index:200;
  }
  .drawer-fondo.abierto{opacity:1;pointer-events:auto}
  .drawer{
    display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;
    width:84%;max-width:320px;background:var(--bg2);border-right:1px solid var(--line);
    z-index:201;transform:translateX(-102%);transition:transform .2s ease;
    padding-top:env(safe-area-inset-top);
  }
  .drawer.abierto{transform:none;box-shadow:22px 0 60px rgba(0,0,0,.55)}
  .drawer-cab{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px;font-weight:700;font-size:16px;border-bottom:1px solid var(--line);
  }
  .drawer-nav{display:flex;flex-direction:column;padding:8px;gap:2px;overflow-y:auto}
  .drawer-item{
    display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:10px;
    color:var(--txt);text-decoration:none;font-size:16px;
  }
  .drawer-item .ic{font-size:16px;width:24px;text-align:center;color:var(--dim)}
  .drawer-item:active{background:var(--bg3)}
  .drawer-item.on{background:var(--bg3);color:var(--amber);box-shadow:inset 3px 0 0 var(--amber)}
  .drawer-item.on .ic{color:var(--amber)}
  .salir-drawer{margin-top:auto;color:var(--red)}
  .salir-drawer .ic{color:var(--red)}

  /* bandeja sin comanda: sólo el aviso, 56 px */
  html.tactil .comanda.vacia{max-height:56px}
  html.tactil .comanda.vacia .com-mini,
  html.tactil .comanda.vacia #btn-cerrar{display:none}
  html.tactil .comanda.vacia .comanda-cab{padding:10px 14px}

  /* cabecera algo más baja */
  html.tactil .cab-tpv .buscador input{min-height:44px}
  html.tactil .cab-tpv{margin-bottom:8px}
  html.tactil .topbar{padding:6px 10px}
}

@media (max-width:760px){
  /* desvanecido a la derecha en la tira de categorías (se ve que hay más) */
  html.tactil .tpv > .cats{
    -webkit-mask-image:linear-gradient(to right,#000 86%,transparent 100%);
    mask-image:linear-gradient(to right,#000 86%,transparent 100%);
    padding-right:34px;
  }
  /* bandeja vacía: altura fija, sin recortes */
  html.tactil .comanda.vacia{max-height:none;height:58px}
  html.tactil .comanda.vacia .comanda-cab{padding:9px 14px;align-items:center}
  html.tactil .comanda.vacia .comanda-cab .m{font-size:14px}
  html.tactil .comanda.vacia .comanda-cab .sub{font-size:11px}
  html.tactil .zona-productos{padding-bottom:16px}
}

@media (max-width:760px){
  /* cobro en efectivo: hoja inferior, teclado grande y botones a lo ancho */
  html.tactil #modal-pago{align-items:flex-end;justify-content:center;padding:0}
  html.tactil #modal-pago .modal-caja{
    width:100%;max-width:none;max-height:94vh;overflow-y:auto;
    border-radius:16px 16px 0 0;padding:0;
  }
  html.tactil #modal-pago .mp-cab{padding:14px 16px 6px}
  html.tactil #modal-pago .mp-cuerpo{grid-template-columns:1fr;gap:10px;padding:0 14px 16px}
  html.tactil #modal-pago .mp-izq{gap:8px}
  html.tactil #modal-pago .mp-display{
    font-size:34px;white-space:nowrap;padding:6px 14px;text-align:right;
  }
  html.tactil #modal-pago .rapidos{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  html.tactil #modal-pago .rapido{min-height:44px;font-size:16px}
  html.tactil #modal-pago .teclado{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  html.tactil #modal-pago .teclado button{min-height:52px;font-size:21px}
  html.tactil #modal-pago .mp-der{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
  html.tactil #modal-pago .mp-der .sub,
  html.tactil #modal-pago .mp-der .cambio{grid-column:1 / -1;margin:0}
  html.tactil #modal-pago .mp-der .cambio{font-size:22px;padding:2px 0}
  html.tactil #modal-pago .mp-boton{min-height:50px;margin:0;font-size:15px}
  html.tactil #modal-pago #mp-ok{grid-column:1 / -1;min-height:58px;font-size:17px}
  html.tactil #modal-pago #mp-invitar{grid-column:1 / -1}
  html.tactil #modal-pago #mp-cancelar{font-size:14px}
}

@media (max-width:760px){
  html.tactil #modal-pago .mp-der .sub{order:1}
  html.tactil #modal-pago .mp-der .cambio{order:2}
  html.tactil #modal-pago #mp-ok{order:3}
  html.tactil #modal-pago #mp-exacto{order:4}
  html.tactil #modal-pago #mp-cancelar{order:5}
  html.tactil #modal-pago #mp-invitar{order:6}
}

@media (max-width:760px){
  /* nada puede ensanchar la página: las tarjetas con tabla scrollean por dentro */
  html.tactil .card{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  html.tactil .card > table{width:max-content;min-width:100%}
  html.tactil .btn, html.tactil a.btn{
    max-width:100%;min-width:0;white-space:normal;text-align:center;line-height:1.2;
  }
  html.tactil .cab{flex-wrap:wrap}
  html.tactil .cab .acciones{width:100%}
  html.tactil .cab .acciones .btn{flex:1 1 auto}
  html.tactil .kpi, html.tactil .grid > *{min-width:0}
  html.tactil img, html.tactil svg{max-width:100%;height:auto}
}

@media (max-width:760px){
  /* cobro en efectivo: todo visible sin scroll */
  html.tactil #modal-pago .modal-caja{max-height:100dvh;padding:0}
  html.tactil #modal-pago .mp-cab{padding:10px 14px 2px}
  html.tactil #modal-pago .mp-cab h2{font-size:17px}
  html.tactil #modal-pago .mp-cuerpo{gap:6px;padding:0 12px 10px}
  html.tactil #modal-pago .mp-izq{gap:6px}
  html.tactil #modal-pago .mp-display{
    font-size:30px;min-height:48px;display:flex;align-items:center;justify-content:flex-end;
    padding:2px 12px;
  }
  html.tactil #modal-pago .rapidos{gap:6px}
  html.tactil #modal-pago .rapido{min-height:38px;font-size:15px}
  html.tactil #modal-pago .teclado{gap:6px}
  html.tactil #modal-pago .teclado button{min-height:44px;font-size:19px}

  /* total y cambio en la misma fila; el rótulo "Cambio" sobra */
  html.tactil #modal-pago .mp-der{grid-template-columns:1fr 1fr;gap:6px;align-items:center}
  html.tactil #modal-pago .mp-der .sub:not(#mp-total){display:none}
  html.tactil #modal-pago .mp-der #mp-total{grid-column:1;grid-row:1;margin:0;font-size:13px}
  html.tactil #modal-pago .mp-der .cambio{
    grid-column:2;grid-row:1;margin:0;padding:0;font-size:19px;text-align:right;display:block;
  }
  html.tactil #modal-pago .mp-der .cambio::before{
    content:"Cambio ";font-size:11px;color:var(--dim);font-weight:400;
  }
  html.tactil #modal-pago #mp-ok{grid-column:1 / -1;grid-row:2;min-height:52px;font-size:16px}
  html.tactil #modal-pago #mp-exacto{grid-column:1;grid-row:3;min-height:44px;font-size:14px}
  html.tactil #modal-pago #mp-cancelar{grid-column:2;grid-row:3;min-height:44px;font-size:14px}
  html.tactil #modal-pago #mp-invitar{grid-column:1 / -1;grid-row:4;min-height:44px;font-size:14px}
}

/* aviso al añadir con la bandeja cerrada: un latido, no la abre */
@keyframes barerp-latido{
  0%,100%{box-shadow:0 -10px 30px rgba(0,0,0,.6)}
  40%{box-shadow:0 -10px 30px rgba(0,0,0,.6),0 0 0 3px rgba(240,169,44,.55)}
}
html.tactil .comanda.latido{animation:barerp-latido .7s ease 1}
html.tactil .comanda-cab{touch-action:manipulation}

@media (max-width:760px){
  /* en el móvil se navega por categorías: el buscador sobra y robaba 54 px */
  html.tactil .cab-tpv{display:none}
}

/* botón "Instalar app" del menú lateral (es un <button>, no un <a>) */
.drawer-item{
  width:100%;background:none;border:0;font:inherit;text-align:left;cursor:pointer;
}

/* ---------------------------------------------------- lista de la compra -- */
.kpi-link{text-decoration:none;color:inherit;display:block;transition:border-color .15s}
.kpi-link:hover{border-color:var(--amber)}

.compra-lista{display:flex;flex-direction:column}
.compra-item{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-top:1px solid var(--line);cursor:pointer;transition:opacity .18s,transform .18s;
}
.compra-item:first-child{border-top:none}
.compra-item:hover{background:var(--bg3)}
.compra-item:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.compra-item .ci-check{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;border:2px solid var(--line);
  color:transparent;font-weight:900;font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.compra-item:hover .ci-check,
.compra-item:focus-visible .ci-check{border-color:var(--green);color:var(--green);background:rgba(46,160,67,.12)}
.compra-item .ci-info{flex:1 1 auto;min-width:0}
.compra-item .ci-nom{font-weight:650;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compra-item .ci-coste{font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.compra-item.hecho{opacity:.35;transform:translateX(14px)}
html.tactil .compra-item{min-height:66px}
html.tactil .compra-item .ci-check{width:42px;height:42px;font-size:20px}

@media (max-width:760px){
  .compra-item{padding:12px 14px;gap:10px}
  .compra-item .ci-nom{white-space:normal;font-size:14.5px}
  .compra-item .ci-coste{font-size:13.5px}
  .tabla-compra th:nth-child(1), .tabla-compra td:nth-child(1),
  .tabla-compra th:nth-child(4), .tabla-compra td:nth-child(4){display:none}
}
.compra-item .ci-check{color:rgba(139,152,168,.45)}

/* barra de navegación: 11 apartados no caben en pantallas medianas */
@media (min-width:761px) and (max-width:1500px){
  .nav{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;gap:2px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav-item{padding:8px 9px;font-size:13px;gap:6px;flex:0 0 auto}
  .nav-item .ic{font-size:13px}
  .marca{font-size:15px}
}
@media (min-width:761px) and (max-width:1360px){
  .pill{display:none}
}
@media (min-width:761px) and (max-width:1360px){
  .nav-item .ic{display:none}
  .nav-item{padding:8px 11px}
}

/* botón de quitar de la lista de la compra */
.compra-item .ci-del{
  flex:0 0 auto;width:34px;height:34px;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--dim);
  font-size:15px;line-height:1;cursor:pointer;transition:.15s;
}
.compra-item .ci-del:hover{background:rgba(218,54,51,.14);border-color:rgba(218,54,51,.5);color:#ff7b72}
html.tactil .compra-item .ci-del{width:40px;height:40px;font-size:17px}
@media (max-width:760px){
  .compra-item .ci-del{width:38px;height:38px}
}