:root{--bg:#f4f6f8;--panel:#fff;--ink:#1c2430;--muted:#6b7684;--line:#e2e6eb;--pri:#0f6cbd;--pri-ink:#fff;--ok:#1a7f45;--warn:#b25e00;--bad:#c42b1c;--soft:#eef4fb}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
button,input,select{font:inherit}
header{display:flex;align-items:center;gap:16px;background:#12263f;color:#fff;padding:0 16px;height:52px}
header .logo{font-weight:700;font-size:18px;letter-spacing:.3px}
header .logo span{color:#6cb8ff}
nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{white-space:nowrap;background:transparent;border:0;color:#c9d6e6;padding:8px 14px;border-radius:6px;cursor:pointer}
nav button.on,nav button:hover{background:#23405f;color:#fff}
.cashbadge{font-size:13px;padding:4px 10px;border-radius:12px;background:#3a2020;color:#ffb4a8}
.cashbadge.open{background:#173a28;color:#8fe3b0}
main{padding:16px;height:calc(100% - 52px);overflow:auto}
.view{display:none}.view.on{display:block}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.grid-sale{display:grid;grid-template-columns:1fr 360px;gap:16px;height:calc(100vh - 84px)}
.grid-sale .card{display:flex;flex-direction:column;min-height:0}
.search{display:flex;gap:8px;margin-bottom:10px}
.search input{flex:1;padding:12px 14px;font-size:18px;border:2px solid var(--pri);border-radius:8px}
.qty{width:80px!important;flex:0 0 80px!important;border-color:var(--line)!important}
.suggest{border:1px solid var(--line);border-radius:8px;max-height:220px;overflow:auto;margin-bottom:10px;display:none}
.suggest div{padding:8px 12px;cursor:pointer;display:flex;justify-content:space-between}
.suggest div:hover,.suggest div.sel{background:var(--soft)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.cart{flex:1;overflow:auto}
.total-box{background:#12263f;color:#fff;border-radius:10px;padding:16px;margin-bottom:12px}
.total-box .lbl{font-size:13px;color:#9fb3c8}
.total-box .val{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums}
.row{display:flex;justify-content:space-between;padding:4px 0;font-variant-numeric:tabular-nums}
.btn{border:1px solid var(--line);background:#fff;padding:9px 14px;border-radius:8px;cursor:pointer}
.btn:hover{background:#f0f2f5}
.btn.pri{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn.bad{color:var(--bad)}
.btn.big{padding:16px;font-size:18px;font-weight:600;width:100%}
.btn.sm{padding:4px 9px;font-size:13px}
.keys{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.7}
kbd{background:#eef0f3;border:1px solid #d5d9df;border-radius:4px;padding:0 5px;font-size:11px;color:#3a4552}
header kbd,.btn.ok kbd,.btn.pri kbd{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:inherit}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.low{color:var(--bad);font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.kpi .val{font-size:26px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
h2{font-size:17px;margin:0 0 12px}
.muted{color:var(--muted)}
.bar{height:8px;background:var(--pri);border-radius:4px}
dialog{border:0;border-radius:12px;padding:0;width:min(520px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,20,35,.45)}
.dlg-h{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;font-size:16px}
.dlg-b{padding:18px}
.dlg-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label{font-size:13px;color:var(--muted)}
.field input,.field select{padding:9px 10px;border:1px solid var(--line);border-radius:8px}
.fields2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.pays{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.pays button{padding:12px 4px;border:2px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-weight:600}
.pays button.on{border-color:var(--pri);background:var(--soft);color:var(--pri)}
.paylist div{display:flex;justify-content:space-between;padding:4px 0}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:min(560px,92vw);text-align:center;background:#12263f;color:#fff;padding:10px 18px;border-radius:8px;opacity:0;transition:.25s;pointer-events:none;z-index:99}
.toast.on{opacity:1}
.demo{background:#fff6e0;border:1px solid #f1d69a;color:#6d4d00;padding:8px 12px;border-radius:8px;font-size:13px;margin-bottom:12px}
#receipt{display:none}
#guide{position:fixed;right:16px;bottom:16px;width:340px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(18,38,63,.22);z-index:50;overflow:hidden}
body:not(.hosted) #guide{display:none}
.g-head{width:100%;display:flex;justify-content:space-between;align-items:center;background:#12263f;color:#fff;border:0;padding:12px 16px;font-size:15px;cursor:pointer}
.g-body{padding:12px 16px 14px;max-height:min(60vh,520px);overflow:auto}
#guide.min .g-body{display:none}
.g-intro,.g-foot{font-size:13px;color:var(--muted);margin:0 0 10px}
.g-foot{margin:10px 0 0}
#gSteps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
#gSteps li{display:grid;grid-template-columns:24px 1fr;gap:8px;font-size:13.5px;line-height:1.45}
#gSteps .ck{width:22px;height:22px;border-radius:50%;border:2px solid #c5ced8;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted)}
#gSteps li.done .ck{background:var(--ok);border-color:var(--ok);color:#fff}
#gSteps li.done .tx{color:var(--muted)}
#gSteps li.cur .ck{border-color:var(--pri);color:var(--pri)}
#gSteps li.cur .tx b{color:var(--pri)}
#gSteps code{background:#eef0f3;border-radius:4px;padding:0 4px;font-size:12.5px}
.linkbtn{background:none;border:0;color:var(--pri);text-decoration:underline;cursor:pointer;padding:0;font-size:inherit}
.g-done{background:#e7f5ec;color:#1a7f45;border-radius:8px;padding:8px 10px;font-size:13px;margin-top:10px}
body.hosted main{padding-bottom:120px}
@media (min-width:1100px){
  body.hosted main{padding-right:372px;padding-bottom:16px}
  #guide{top:68px;bottom:16px;width:340px;display:flex;flex-direction:column}
  body:not(.hosted) #guide{display:none}
  #guide .g-body{max-height:none;flex:1}
  #guide.min{bottom:auto}
}
@media (max-width:700px){.g-body{max-height:45vh}.cashbadge{display:none}}
.rcpt{font-family:"Courier New",monospace;font-size:12px;background:#fffef8;border:1px solid var(--line);padding:14px;max-width:320px;margin:0 auto}
.rcpt .c{text-align:center}.rcpt hr{border:0;border-top:1px dashed #000}.rcpt td{padding:1px 0;border:0;font-size:12px}
.hosted-only{display:none}body.hosted .hosted-only{display:block}body.hosted .local-only{display:none!important}
@media print{
  body *{visibility:hidden}
  #receipt,#receipt *{visibility:visible}
  #receipt{display:block;position:absolute;left:0;top:0;width:72mm;font-family:"Courier New",monospace;font-size:11px;color:#000}
  @page{size:80mm auto;margin:4mm}
}
#receipt .c{text-align:center}#receipt hr{border:0;border-top:1px dashed #000}
#receipt table td{padding:1px 0;border:0;font-size:11px}
@media (max-width:900px){.grid-sale{grid-template-columns:1fr;height:auto}.kpis{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}}
.app-only{display:none}body.app .app-only{display:inline-flex}body.app p.app-only{display:block}
body.app .no-app{display:none}
.onboard{text-align:center;padding:32px 16px}.onboard h2{margin-bottom:6px}.onboard p{max-width:520px;margin:0 auto 16px}

/* importação */
dialog.wide{width:min(1060px,96vw)}
dialog.wide .dlg-b{max-height:72vh;overflow:auto}
.imp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px 0 16px;flex-wrap:wrap}
.imp-tabs button{border:0;background:none;padding:10px 14px;cursor:pointer;color:var(--muted);border-bottom:3px solid transparent;font-weight:600}
.imp-tabs button.on{color:var(--pri);border-bottom-color:var(--pri)}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px dashed #c5ced8;border-radius:10px;padding:34px 16px;cursor:pointer;text-align:center;background:#fafbfc}
.dropzone:hover,.dropzone.over{border-color:var(--pri);background:var(--soft)}
#impPaste{width:100%;font:13px/1.5 ui-monospace,Consolas,monospace;border:1px solid var(--line);border-radius:8px;padding:10px}
.imp-grid{display:grid;grid-template-columns:260px 1fr;gap:20px}
.imp-grid .field{margin-bottom:10px}
.imp-sum{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pill{display:inline-block;border-radius:10px;padding:1px 9px;font-size:12px;font-weight:600;background:#eef0f3;color:#5a6573;white-space:nowrap}
.pill.ok{background:#e7f5ec;color:#1a7f45}.pill.info{background:#e6f0fb;color:#0f5aa0}.pill.bad{background:#fdecea;color:#b3261e}
.imp-table{overflow:auto;max-height:52vh;border:1px solid var(--line);border-radius:8px}
.imp-table table{font-size:13px}.imp-table th{position:sticky;top:0;background:#f7f8fa;z-index:1}
.imp-table td,.imp-table th{padding:6px 8px}
.imp-note{font-size:11.5px;color:var(--muted);margin-top:2px}
tr.st-erro td{background:#fff8f7}tr.st-ignorado td{opacity:.6}
@media (max-width:760px){.imp-grid{grid-template-columns:1fr}}

#updateBar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#e6f0fb;color:#0f3b66;padding:8px 16px;font-size:14px;border-bottom:1px solid #c7dcf3}
#updateBar[hidden]{display:none}#updateBar span{flex:1;min-width:200px}

#demoBar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff3cc;color:#6d4d00;padding:8px 16px;font-size:14px;border-bottom:1px solid #f1d69a}
#demoBar[hidden]{display:none}#demoBar span{flex:1;min-width:200px}
.app-block{display:none}body.app .app-block{display:block}