:root{--bg:#f4f6f5;--card:#fff;--tx:#17211c;--mut:#6b7872;--ac:#0f7a4d;--ac2:#d9f2e5;--bd:#dde3df;--rd:#c0392b;--am:#b7791f;--sh:0 1px 3px rgba(0,0,0,.08)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;font:15px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--tx)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--bd);border-radius:8px;background:#fff;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ac2);border-color:var(--ac)}
button{border:0;border-radius:8px;padding:9px 14px;background:var(--ac);color:#fff;cursor:pointer;font-weight:600}
button:active{filter:brightness(.92)}button:disabled{opacity:.45;cursor:not-allowed}
button.s{background:#e9eeeb;color:var(--tx)}button.r{background:var(--rd)}button.sm{padding:5px 9px;font-size:13px}
label{display:block;font-size:12px;color:var(--mut);margin:8px 0 3px}
.mut{color:var(--mut)}.sm{font-size:13px}.b{font-weight:700}.right{text-align:right}.c{text-align:center}
.row{display:flex;gap:8px;align-items:center}.row.w{flex-wrap:wrap}.grow{flex:1;min-width:0}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;box-shadow:var(--sh);padding:12px;margin-bottom:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
h2{font-size:17px;margin:4px 0 10px}h3{font-size:15px;margin:0 0 8px}

/* layout */
#app{display:flex;flex-direction:column;height:100%}
.top{display:flex;align-items:center;gap:10px;background:var(--ac);color:#fff;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}
.top .nm{font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .tasa{background:rgba(255,255,255,.18);padding:5px 10px;border-radius:99px;font-size:13px;cursor:pointer;white-space:nowrap}
.top .tasa.warn{background:#fff;color:var(--rd)}
.st{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;background:#7CFFB2}.dot.pe{background:#ffd166}.dot.of{background:#ff6b6b}
.ban{background:#fdf0d5;color:#7a4e07;padding:7px 12px;font-size:13px;display:flex;gap:10px;align-items:center}
.ban.rd{background:#fde4e1;color:#8c2a1e}.ban button{padding:3px 9px;font-size:12px}
main{flex:1;overflow:auto;padding:12px;-webkit-overflow-scrolling:touch}
nav{display:flex;background:#fff;border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;background:none;color:var(--mut);border-radius:0;padding:9px 2px;font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px}
nav button .ic{font-size:19px;line-height:1}nav button.on{color:var(--ac);box-shadow:inset 0 -3px 0 var(--ac)}

/* vender */
.vend{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.vend{grid-template-columns:1fr 400px;height:100%}.vend .izq,.vend .der{overflow:auto;max-height:100%}}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{background:#e9eeeb;color:var(--tx);border-radius:99px;padding:5px 12px;font-size:13px;white-space:nowrap;font-weight:600}.chip.on{background:var(--ac);color:#fff}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.p{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:9px;text-align:left;color:var(--tx);font-weight:400;display:flex;flex-direction:column;gap:3px;min-height:84px}
.p:active{background:var(--ac2)}.p .n{font-weight:600;font-size:14px;line-height:1.2}.p .pr{color:var(--ac);font-weight:700}
.p .sk{font-size:12px;color:var(--mut)}.p .sk.lo{color:var(--rd);font-weight:700}
.ln{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--bd)}
.ln .t{flex:1;min-width:0}.ln .t b{display:block;font-size:14px;line-height:1.2}
.qt{display:flex;align-items:center;gap:4px}.qt button{padding:0;width:30px;height:30px;background:#e9eeeb;color:var(--tx);font-size:18px}
.qt input{width:60px;text-align:center;padding:6px 2px}
.tot{display:flex;justify-content:space-between;padding:3px 0}
.big{font-size:26px;font-weight:800;color:var(--ac)}
.cobrar{width:100%;padding:15px;font-size:18px;margin-top:8px}

/* tablas */
table{width:100%;border-collapse:collapse}th,td{padding:7px 6px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--mut);font-weight:600}td.r,th.r{text-align:right}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:10px}
.kpi{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:10px}.kpi .v{font-size:20px;font-weight:800}.kpi .l{font-size:12px;color:var(--mut)}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--ac2);color:#0b5b39;font-weight:700}.tag.rd{background:#fde4e1;color:#8c2a1e}.tag.am{background:#fdf0d5;color:#7a4e07}

/* modal */
#modal{position:fixed;inset:0;display:none;background:rgba(10,20,15,.55);z-index:50;align-items:flex-end;justify-content:center}
#modal.on{display:flex}
.mb{background:#fff;width:100%;max-width:560px;max-height:94vh;overflow:auto;border-radius:16px 16px 0 0;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
@media(min-width:700px){#modal{align-items:center}.mb{border-radius:16px}}
.mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.mh h2{margin:0}
.x{background:none;color:var(--mut);font-size:24px;padding:0 6px}
.pay{display:grid;grid-template-columns:130px 1fr 36px 30px;gap:6px;align-items:center;margin-bottom:6px}
.pay .eq{grid-column:1/-1;font-size:12px;color:var(--mut);margin-top:-3px}
.mets{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.res{background:#f4f6f5;border-radius:10px;padding:10px;margin-top:8px}
.ok{color:var(--ac)}.bad{color:var(--rd)}

/* login */
.login{max-width:380px;margin:8vh auto;padding:20px}
.login h1{margin:0 0 4px;color:var(--ac)}
.pin{font-size:24px;letter-spacing:8px;text-align:center}

#toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:#17211c;color:#fff;padding:10px 16px;border-radius:8px;display:none;z-index:99;max-width:90vw}
video{width:100%;border-radius:10px;background:#000}

/* ticket */
#ticket{display:none}
@media print{
  body>*:not(#ticket){display:none!important}
  #ticket{display:block!important;width:72mm;font:12px/1.3 ui-monospace,Menlo,Consolas,monospace;color:#000}
  #ticket table{width:100%}#ticket th,#ticket td{border:0;padding:1px 0}
  #ticket hr{border:0;border-top:1px dashed #000;margin:5px 0}
  @page{margin:2mm}
}