@font-face{font-family:"Bricolage";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{
  --paper:#f3eadb; --card:#fffbf2; --ink:#241a12; --mute:#7c6b5b; --line:#e2d3bc; --line2:#cdb99c; --sand:#efe3cf;
  --taco:#c2531a; --kilo:#8b2a1f; --pieza:#3a6b55; --ok:#2e6b49; --bad:#b3261e; --gold:#e8a93a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;display:flex;flex-direction:column;height:100dvh;background:var(--paper);color:var(--ink);
  font:18px/1.25 "Bricolage",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-optical-sizing:auto;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior:none;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation;background:none}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.ic{flex:none;display:block}

/* Encabezado */
header{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1.5px solid var(--line);background:var(--paper);min-height:64px}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:42px;height:42px;display:grid;place-items:center}.mark img{display:block}
.brand b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.spacer{flex:1}
#clock{color:var(--mute);font-weight:500;font-variant-numeric:tabular-nums}
.hbtn{display:flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:13px;background:var(--card);border:1.5px solid var(--line2);font-weight:600}
.hbtn:active{background:var(--sand)}
.lic{background:var(--gold);color:var(--ink);font-weight:700;border-radius:20px;padding:6px 14px;font-size:15px}
.lic.urgent{background:var(--bad);color:#fff}

main{flex:1;display:grid;grid-template-columns:1fr 430px;min-height:0}

/* Productos */
#grid{overflow:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px;align-content:start}
.tile{
  --c:var(--pieza);position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;
  min-height:140px;padding:14px;border-radius:20px;background:var(--card);border:1.5px solid var(--line);text-align:left;
  box-shadow:0 3px 0 var(--line);transition:transform .06s,box-shadow .06s,border-color .1s;
}
.tile.taco{--c:var(--taco)} .tile.kilo{--c:var(--kilo)} .tile.pieza{--c:var(--pieza)}
.tile:active{transform:translateY(3px);box-shadow:0 0 0 var(--line);background:#fff3dc}
.tile.on{border-color:var(--c);box-shadow:0 3px 0 var(--c)}
.tile.on:active{box-shadow:0 0 0 var(--c)}
.ico{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff4e0;background:var(--c)}
.nm{font-size:21px;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.pr{color:var(--mute);font-size:16px;margin-top:3px}
.pr b{color:var(--ink);font-size:19px;font-weight:700;margin-right:4px}
.bd{position:absolute;top:12px;right:12px;min-width:34px;height:34px;padding:0 10px;border-radius:17px;background:var(--ink);color:var(--paper);font-weight:800;font-size:17px;display:grid;place-items:center}
.empty-grid{grid-column:1/-1;text-align:center;color:var(--mute);padding:40px}

/* Venta actual: estilo recibo */
#ticket{display:flex;flex-direction:column;background:var(--card);border-left:1.5px solid var(--line);min-height:0}
.tk-h{padding:14px 18px 10px;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:19px}
.tk-h .n{background:var(--sand);color:var(--mute);border-radius:12px;padding:2px 10px;font-size:15px;margin-left:8px;font-weight:600}
.tk-h button{color:var(--bad);font-weight:600;padding:8px 4px;min-height:40px}
.tk-list{flex:1;overflow:auto;padding:0 18px;border-top:1.5px dashed var(--line2)}
.tk-empty{color:var(--mute);text-align:center;padding:48px 10px;line-height:1.4}
.ln{display:grid;grid-template-columns:1fr auto 66px 38px;gap:6px;align-items:center;padding:11px 0;border-bottom:1.5px dashed var(--line)}
.ln .t{font-weight:700;font-size:18px;line-height:1.1}
.ln .s{font-size:14px;color:var(--mute);margin-top:2px}
.ln .amt{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;font-size:19px;grid-column:3}
.ln .x{width:38px;height:38px;border-radius:10px;color:var(--mute);display:grid;place-items:center;grid-column:4}
.ln .x:active{background:var(--sand)}
.qty{display:flex;align-items:center;grid-column:2}
.qty button{width:42px;height:42px;border-radius:12px;background:var(--sand);display:grid;place-items:center}
.qty button:active{background:var(--line)}
.qty b{min-width:30px;text-align:center;font-size:19px;font-variant-numeric:tabular-nums}
.ln.kg .amt{grid-column:3}
.tk-f{padding:14px 18px 18px;border-top:1.5px solid var(--ink);background:var(--card)}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.tot span{color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.tot b{font-size:46px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cobrar{width:100%;min-height:76px;border-radius:18px;background:var(--ok);color:#fff;font-size:27px;font-weight:800;letter-spacing:.01em;box-shadow:0 4px 0 #1f4a33}
.cobrar:active{transform:translateY(4px);box-shadow:none}
.cobrar:disabled{background:#cbbfae;box-shadow:0 4px 0 #b3a591;color:#f3eadb}

/* Modales */
#modal{position:fixed;inset:0;background:rgba(36,26,18,.6);display:flex;align-items:center;justify-content:center;padding:12px;z-index:10}
.sheet{background:var(--card);border-radius:26px;padding:22px;width:100%;max-width:520px;max-height:96dvh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.sheet.wide{max-width:780px}
.sh-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:23px;font-weight:800;letter-spacing:-.01em;gap:10px}
.ttl{display:flex;align-items:center;gap:10px}
.cl{width:48px;height:48px;border-radius:14px;background:var(--sand);display:grid;place-items:center;flex:none}
.big{font-size:46px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin:6px 0}
.sub{text-align:center;color:var(--mute);min-height:24px}
.row{display:grid;gap:8px;margin:10px 0}
.c3{grid-template-columns:repeat(3,1fr)} .c2{grid-template-columns:repeat(2,1fr)} .c4{grid-template-columns:repeat(4,1fr)}
.opt{min-height:62px;border-radius:15px;background:var(--sand);border:1.5px solid var(--line);font-weight:700;font-size:20px}
.opt.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt:active{filter:brightness(.93)}
.key{min-height:64px;border-radius:15px;background:var(--card);border:1.5px solid var(--line2);font-size:26px;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.key:active{background:var(--sand)}
.primary{width:100%;min-height:68px;border-radius:17px;background:var(--ok);color:#fff;font-size:24px;font-weight:800;margin-top:6px;box-shadow:0 4px 0 #1f4a33}
.primary:active{transform:translateY(3px);box-shadow:none}
.primary:disabled{background:#cbbfae;box-shadow:0 4px 0 #b3a591;color:#f3eadb}
.danger{background:var(--bad)!important;box-shadow:0 4px 0 #7f1a14!important;color:#fff}
.ghost{width:100%;min-height:56px;border-radius:15px;background:var(--sand);border:1.5px solid var(--line);font-weight:700;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px}
.bigic{width:88px;height:88px;border-radius:50%;margin:2px auto 12px;display:grid;place-items:center;background:var(--taco);color:#fff4e0}
.bigic.ok{background:var(--ok)} .bigic.lock{background:var(--kilo)} .bigic.clock{background:var(--ink)}
.change{font-size:68px;font-weight:800;text-align:center;color:var(--ok);letter-spacing:-.03em}
.err{color:var(--bad);text-align:center;min-height:24px;font-weight:700}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.split .big{margin-top:0}
.opt.tall{min-height:84px;font-size:25px}
@media (max-width:700px){.split{grid-template-columns:1fr}.opt.tall{min-height:62px}}
@media (max-height:700px){.key{min-height:54px}.primary{min-height:60px}.big{font-size:38px}}

/* Licencia */
body.locked header,body.locked main{visibility:hidden}
#gate{position:fixed;inset:0;z-index:30;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:16px}
.gate-box{background:var(--card);border-radius:28px;padding:30px;width:100%;max-width:500px;text-align:center;max-height:96dvh;overflow:auto}
.gate-box h2{margin:4px 0 8px;font-size:30px;font-weight:800;letter-spacing:-.02em}.gate-box p{color:var(--mute);margin:0 0 16px;line-height:1.4}
.devid{background:var(--sand);border-radius:16px;padding:12px;margin-bottom:12px;color:var(--mute);font-size:14px}
.devid b{display:block;font-size:28px;color:var(--ink);letter-spacing:.08em;font-variant-numeric:tabular-nums;user-select:all;-webkit-user-select:all}
textarea{width:100%;border:1.5px solid var(--line2);border-radius:12px;padding:12px;font:inherit;font-size:16px;resize:none;-webkit-user-select:text;user-select:text;word-break:break-all;background:#fff}
a.link{text-decoration:none;color:var(--ink);padding:16px}

/* Báscula */
.scale{display:grid;grid-template-columns:1fr 1fr auto;gap:12px 16px;align-items:center;background:var(--ink);color:var(--paper);border-radius:20px;padding:14px 18px;margin-bottom:14px}
.sw{display:flex;align-items:baseline;gap:8px}
.sw b{font-size:54px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.sw small{font-size:20px;color:#cdb99c}
.sdot{width:14px;height:14px;border-radius:50%;background:#7c6b5b;align-self:center;flex:none}
.sdot.ok{background:#4cc27b}.sdot.wait{background:var(--gold)}
.spr{display:flex;flex-direction:column}.spr span{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}.spr small{color:#cdb99c;min-height:20px}
.sbtns{display:flex;gap:10px}
.sbtns .opt{min-height:64px;min-width:90px;color:var(--ink)}
.sbtns .primary{margin:0;width:auto;padding:0 24px;min-height:64px;font-size:21px}
.sim{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:14px;color:#cdb99c}
.sim button{background:#3b2d22;color:var(--paper);border-radius:10px;padding:9px 14px;font-weight:600}
@media (max-width:700px){.scale{grid-template-columns:1fr}}

/* Corte */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.card{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px}
.card span{display:block;color:var(--mute);font-size:14px;font-weight:600}
.card b{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card.main{background:var(--ink);border-color:var(--ink)}.card.main span{color:#cdb99c}.card.main b{color:var(--paper)}
.tbl{width:100%;border-collapse:collapse;margin:6px 0 12px}
.tbl td,.tbl th{padding:9px 4px;border-bottom:1.5px dashed var(--line);text-align:left}
.tbl td:last-child,.tbl th:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.sale{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:11px 4px;border-bottom:1.5px dashed var(--line)}
.sale.void{opacity:.45;text-decoration:line-through}
.sale small{display:block;color:var(--mute)}
.sale button{min-height:42px;padding:0 14px;border-radius:11px;background:#f6dcd7;color:var(--bad);font-weight:700}
h3{margin:18px 0 6px;font-size:14px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
input[type=date],input[type=text],input[type=number],input[type=tel],select{
  -webkit-user-select:text;user-select:text;border:1.5px solid var(--line2);border-radius:12px;padding:10px 12px;background:#fff;min-height:48px;width:100%}
.prow{display:grid;grid-template-columns:46px 1fr 116px 96px;gap:8px;align-items:center;margin:10px 0;padding-bottom:12px;border-bottom:1.5px dashed var(--line)}
.pico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff4e0;background:var(--pieza)}
.pico.taco{background:var(--taco)} .pico.kilo{background:var(--kilo)}
.prow .acts{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.prow .acts select{width:auto;min-width:130px;min-height:44px}
.prow .acts button{min-height:44px;min-width:44px;padding:0 14px;border-radius:12px;background:var(--sand);font-weight:700;display:grid;place-items:center}
.prow .acts button:disabled{opacity:.35}
.prow .acts label{display:flex;align-items:center;gap:8px;margin-right:auto}
.prow input[type=checkbox]{width:24px;height:24px;min-height:0;accent-color:var(--ok)}
.lbl{display:block;margin:14px 0 5px;color:var(--mute);font-size:14px;font-weight:600}

#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:13px 24px;border-radius:15px;z-index:40;font-weight:700;pointer-events:none}

/* Vertical / pantallas angostas: la venta va abajo */
@media (orientation:portrait),(max-width:860px){
  main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,48%)}
  #ticket{border-left:0;border-top:1.5px solid var(--line2)}
  #grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .tile{min-height:112px;gap:8px}
  .brand b{font-size:22px}
  #clock{display:none}
}
@media print{body *{display:none}}