:root{--bg:#f4f5f7;--card:#fff;--tx:#1d2330;--mut:#6b7385;--bd:#e3e6ec;--pri:#ffd102;--pri2:#e6bc00;--pri-tx:#8a6d00;--on-pri:#111;
--side:#111111;--ok:#1f9d55;--err:#d64545;--warn:#f0a020;--blue:#2f6fd6}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--tx);font-size:14px}
a{color:var(--blue);text-decoration:none}
.app{display:flex;min-height:100vh}
.side{width:220px;background:var(--side);color:#cfd6e2;flex-shrink:0;position:sticky;top:0;height:100vh;overflow:auto}
.brand{padding:16px 16px 12px;border-bottom:1px solid #2a2a2a;text-align:center}
.brand img{display:block;width:130px;margin:0 auto 6px;border-radius:14px}
.brand b{display:block;color:#fff;font-size:20px;letter-spacing:.3px}
.brand b span{color:var(--pri)}
.brand small{color:#8a97ab;font-size:11px}
.side nav a{display:flex;align-items:center;gap:10px;color:#cfd6e2;padding:10px 16px;border-left:3px solid transparent}
.side nav a:hover{background:#1e2b3d}
.side nav a.on{background:#262626;border-left-color:var(--pri);color:#fff}
.side nav .grp{padding:14px 16px 4px;font-size:11px;text-transform:uppercase;color:#6f7d92;letter-spacing:.6px}
.badge{background:var(--err);color:#fff;border-radius:10px;padding:0 7px;font-size:11px;margin-left:auto}
.main{flex:1;min-width:0}
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;background:#fff;border-bottom:1px solid var(--bd)}
.top h1{font-size:18px;margin:0}
.top .u{color:var(--mut);font-size:13px}
.menu-btn{display:none;background:none;border:0;font-size:22px;cursor:pointer;margin-right:8px}
.wrap{padding:20px 22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:14px 16px}
.card .l{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.card .v{font-size:22px;font-weight:700;margin-top:4px}
.card .s{color:var(--mut);font-size:12px;margin-top:2px}
.card.pri{border-top:3px solid var(--pri)}.card.warn{border-top:3px solid var(--warn)}.card.ok{border-top:3px solid var(--ok)}
.card.err{border-top:3px solid var(--err)}.card.blue{border-top:3px solid var(--blue)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.badge.okb{background:var(--ok)}
p.sm,.sm{font-size:12px}
.top .u{display:flex;align-items:center;gap:6px}
.top .u .tag{font-size:12px}
/* PDV em lista */
.plist{background:#fff;border:1px solid var(--bd);border-radius:10px;max-height:calc(100vh - 230px);overflow:auto}
.plist table{font-size:14px}
.plist th{position:sticky;top:0;z-index:1}
.plist tr.sel td{background:#fff3e0}
.plist tr{cursor:pointer}
.plist tr:hover td{background:#fff8ef}
.plist .emb{font-size:12px;color:var(--pri-tx);font-weight:600}
.mrg{display:flex;gap:6px;align-items:center}
.embs td input{padding:6px 8px}
.box{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:16px;margin-bottom:16px}
.box h3{margin:0 0 12px;font-size:15px}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 10px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:middle}
th{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.3px;background:#fafbfc}
td.r,th.r{text-align:right}
tr:hover td{background:#fcfcfd}
.tbl{overflow-x:auto}
.btn{display:inline-block;border:0;border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer;background:#e9ecf1;color:var(--tx);font-family:inherit}
.btn.pri{background:var(--pri);color:var(--on-pri);font-weight:600}.btn.pri:hover{background:var(--pri2)}
.btn.ok{background:var(--ok);color:#fff}.btn.err{background:var(--err);color:#fff}
.btn.sm{padding:4px 10px;font-size:12px}
.btn.lg{padding:14px 20px;font-size:16px;font-weight:600}
input,select,textarea{font-family:inherit;font-size:14px;padding:8px 10px;border:1px solid #cfd4dc;border-radius:8px;width:100%;background:#fff}
label{display:block;font-size:12px;color:var(--mut);margin-bottom:4px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end}
.row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px}
.flash.ok{background:#e4f6ec;color:#17683a}.flash.erro{background:#fdeaea;color:#a12b2b}
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;background:#eef1f5;color:#4a5468}
.tag.low{background:#fdeaea;color:#a12b2b}.tag.ok{background:#e4f6ec;color:#17683a}.tag.warn{background:#fff3dc;color:#8a5a00}
.mut{color:var(--mut)}.pos{color:var(--ok)}.neg{color:var(--err)}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:6px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bars .b i{display:block;width:100%;background:linear-gradient(var(--pri2),#ffe680);border-radius:4px 4px 0 0;min-height:2px}
.bars .b small{font-size:10px;color:var(--mut);margin-top:4px}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs a{padding:7px 14px;border-radius:8px;background:#e9ecf1;color:var(--tx)}
.tabs a.on{background:var(--pri);color:var(--on-pri)}
/* PDV */
.pdv{display:grid;grid-template-columns:1fr 380px;gap:14px}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:calc(100vh - 230px);overflow:auto;padding:2px}
.prod{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:10px;cursor:pointer;user-select:none}
.prod:hover{border-color:var(--pri);box-shadow:0 2px 8px rgba(255,209,2,.3)}
.prod b{display:block;font-size:13px;line-height:1.25;min-height:32px}
.prod .p{color:var(--pri-tx);font-weight:700;font-size:15px;margin-top:6px}
.prod .e{font-size:11px;color:var(--mut)}
.cart{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:14px;display:flex;flex-direction:column;position:sticky;top:10px;max-height:calc(100vh - 110px)}
.cart .itens{flex:1;overflow:auto;min-height:120px}
.ci{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px dashed var(--bd)}
.ci .n{flex:1;font-size:13px}
.ci input{width:58px;padding:4px;text-align:center}
.ci .t{width:84px;text-align:right;font-weight:600}
.ci .x{cursor:pointer;color:var(--err);padding:0 4px}
.total{font-size:26px;font-weight:800;text-align:right;margin:10px 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chips button{flex:1;min-width:90px;padding:9px 6px;border:1px solid #cfd4dc;background:#fff;border-radius:8px;cursor:pointer;font-family:inherit}
.chips button.on{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#000,#1c1c1c)}
.login .logo{display:block;width:170px;margin:0 auto 8px;border-radius:16px}
.print-head{display:none}
.login .box{width:340px;padding:28px}
.login h2{margin:0 0 4px;font-size:26px}.login h2 span{color:var(--pri)}
@media(max-width:900px){
 .side{position:fixed;left:-240px;z-index:20;transition:left .2s}
 .side.open{left:0}
 .menu-btn{display:inline-block}
 .grid2,.grid3,.pdv{grid-template-columns:1fr}
 .plist{max-height:50vh}
 .prods{max-height:none}
 .cart{position:static;max-height:none}
 .wrap{padding:14px}
}
@media print{.side,.top,.noprint{display:none}.wrap{padding:0}
 .print-head{display:flex;align-items:center;gap:12px;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:14px;font-size:12px}
 .print-head img{width:60px;border-radius:8px}}