:root{--red:#C8102E;--red-d:#9E0C24;--ink:#15171A;--muted:#5B616A;--line:#E2E4E8;--bg:#F4F5F7;--side:#0E0F11;--ok:#157347;--ok-bg:#DDF3E6;--warn:#8A5A00;--warn-bg:#FFF0CC;--bad:#B00020;--bad-bg:#FDE1E5}
*{box-sizing:border-box}
body{margin:0;font-family:"Open Sans",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:Montserrat,Arial,sans-serif;margin:0;line-height:1.2}
:focus-visible{outline:3px solid #F5A400;outline-offset:2px}
[hidden]{display:none!important}
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font:700 14px Montserrat,sans-serif;cursor:pointer;text-decoration:none}
.b:hover{border-color:#B9BEC6}
.b-red{background:var(--red);border-color:var(--red);color:#fff}.b-red:hover{background:var(--red-d)}
.b-ghost{background:transparent;color:#D3D6DB;border-color:#33363C}
.b-sm{min-height:34px;padding:0 12px;font-size:13px}
.small{font-size:13px;color:var(--muted)}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--side);padding:24px}
.login-card{background:#fff;border-radius:16px;padding:36px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.login-card img{border-radius:10px}
.app{display:flex;min-height:100vh}
.side{width:240px;flex-shrink:0;background:var(--side);color:#fff;padding:18px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}
.side a{display:flex;align-items:center;min-height:42px;padding:0 12px;border-radius:8px;color:#D3D6DB;text-decoration:none;font:600 14px Montserrat,sans-serif}
.side a:hover{background:#1C1E22;color:#fff}
.side a[aria-current="page"]{background:var(--red);color:#fff}
.side-brand{gap:10px;margin-bottom:14px;color:#fff!important}
.side-brand img{border-radius:8px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:12px;color:#9AA0A8;padding:8px}
.main{flex:1;min-width:0;padding:28px clamp(16px,3vw,36px) 60px}
.loading{color:var(--muted)}
.head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.head h1{font-size:26px;font-weight:800}
.head p{margin:4px 0 0;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;color:inherit;display:block}
.kpi:hover{border-color:#B9BEC6}
.kpi small{display:block;color:var(--muted);font-size:13px}
.kpi b{font:800 30px Montserrat,sans-serif}
.kpi.bad b{color:var(--bad)}.kpi.warn b{color:var(--warn)}.kpi.ok b{color:var(--ok)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px}
.card h2{font-size:17px;margin-bottom:12px}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.tools input,.tools select{min-height:42px;border:1px solid #C9CDD3;border-radius:8px;padding:0 12px;font:14px "Open Sans",sans-serif;background:#fff}
.tools input[type=search]{flex:1 1 260px}
.tw{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:#FAFBFC;position:sticky;top:0}
td{padding:9px 12px;border-bottom:1px solid #EEF0F2;vertical-align:top}
tr:hover td{background:#FAFBFC}
td a{color:var(--red);font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.p-ok{background:var(--ok-bg);color:var(--ok)}.p-warn{background:var(--warn-bg);color:var(--warn)}.p-bad{background:var(--bad-bg);color:var(--bad)}.p-gray{background:#EEF0F2;color:#4A4F57}
.more{text-align:center;padding:12px}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 20px}
.info div small{display:block;color:var(--muted);font-size:12px}
dialog{border:0;border-radius:14px;padding:0;max-width:640px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.45)}
#dlgForm{padding:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
#dlgForm h2{grid-column:1/-1;font-size:20px}
#dlgForm label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#2B2F35}
#dlgForm input,#dlgForm select,#dlgForm textarea{min-height:42px;border:1px solid #C9CDD3;border-radius:8px;padding:0 10px;font:14px "Open Sans",sans-serif}
#dlgForm textarea{padding:10px;min-height:80px}
#dlgForm .full{grid-column:1/-1}
#dlgForm .acts{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
@media (max-width:820px){.app{flex-direction:column}.side{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;gap:4px}.side-brand{width:100%;margin-bottom:4px}.side-foot{flex-direction:row;width:100%;margin-top:6px;align-items:center}}

.side{overflow-y:auto}
.side-h{margin:12px 0 2px;padding:0 12px;font:700 11px Montserrat,sans-serif;color:#7C838C;letter-spacing:.04em}
.side a{min-height:36px;font-size:13.5px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.grid4 label,.mvf label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#2B2F35}
.grid4 input,.grid4 select,.grid4 textarea,.mvf .add input,.mvf select,.q,.tw td input,.tw td select{min-height:40px;border:1px solid #C9CDD3;border-radius:8px;padding:0 10px;font:14px "Open Sans",sans-serif;background:#fff;max-width:100%}
.grid4 textarea{padding:10px}.grid4 .wide{grid-column:1/-1}
.tw td input.q{width:80px}
.add{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.add input#addProd{flex:1 1 280px}.add input#addQtd{width:90px}.add input#addVal{width:120px}
.tot{display:flex;flex-wrap:wrap;gap:24px;margin-top:14px;justify-content:flex-end}.tot small{display:block;color:var(--muted)}.tot b{font:700 18px Montserrat,sans-serif}.tot .big{font-size:26px;color:var(--red)}
#dlgForm datalist{display:none}
dialog{max-height:92vh;overflow:auto}

.menu-btn{display:none}
@media (max-width:820px){.menu-btn{display:inline-flex;position:absolute;right:12px;top:14px}.side{position:relative;max-height:64px;overflow:hidden}.side.open{max-height:none;overflow:visible}.side-brand{margin-bottom:0}.side a:not(.side-brand),.side .side-h,.side .side-foot{display:none}.side.open a:not(.side-brand),.side.open .side-h{display:flex}.side.open .side-foot{display:flex}}