:root{
  --bg:#eceefb; --panel:#ffffff; --ink:#141939; --muted:#5a6187; --line:#d6daee; --hover:#f1f2ff;
  --accent:#4f46e5; --accent-ink:#ffffff; --accent-soft:#e4e3ff;
  --topo1:#2e2a8a; --topo2:#7c2fd6;
  --ok-bg:#cdf3de; --ok-fg:#0b6a3a;   --bad-bg:#ffd9d6; --bad-fg:#b0221a;
  --warn-bg:#ffe9b8; --warn-fg:#855000; --info-bg:#d4e5ff; --info-fg:#1647a6;
  --mag-bg:#e6d6ff; --mag-fg:#5a2cb5;  --teal-bg:#c9f1ed; --teal-fg:#0b6762;
  --pink-bg:#ffd8ea; --pink-fg:#a01f5c; --gray-bg:#e3e6f2; --gray-fg:#454c70;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --shadow:0 1px 2px rgba(20,25,57,.07),0 6px 18px rgba(20,25,57,.06);
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1228; --panel:#1a1e40; --ink:#e9ebfa; --muted:#a0a7d0; --line:#2d3260; --hover:#222750;
  --accent:#8f94ff; --accent-ink:#0f1228; --accent-soft:#2a2f66;
  --ok-bg:#154a31; --ok-fg:#86e8b0; --bad-bg:#552220; --bad-fg:#ffa39b;
  --warn-bg:#503d10; --warn-fg:#f6cd72; --info-bg:#1d3667; --info-fg:#9cc2ff;
  --mag-bg:#3a2468; --mag-fg:#cdb0ff; --teal-bg:#124745; --teal-fg:#7ee6de;
  --pink-bg:#552038; --pink-fg:#ffa6cf; --gray-bg:#2b3060; --gray-fg:#bcc2e6;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --shadow:none; color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--body);font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* chips de cor (usados em abas, selects, tiles) */
.c-ok{background:var(--ok-bg)!important;color:var(--ok-fg)!important}
.c-bad{background:var(--bad-bg)!important;color:var(--bad-fg)!important}
.c-warn{background:var(--warn-bg)!important;color:var(--warn-fg)!important}
.c-info{background:var(--info-bg)!important;color:var(--info-fg)!important}
.c-mag{background:var(--mag-bg)!important;color:var(--mag-fg)!important}
.c-teal{background:var(--teal-bg)!important;color:var(--teal-fg)!important}
.c-pink{background:var(--pink-bg)!important;color:var(--pink-fg)!important}
.c-gray{background:var(--gray-bg)!important;color:var(--gray-fg)!important}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:linear-gradient(135deg,var(--topo1),var(--topo2))}
.login-card{width:min(400px,100%);background:var(--panel);border-radius:16px;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:6px}
.login-card h1{margin:0;font:700 30px/1.1 var(--display)}
.login-card .sub{margin:0 0 14px;color:var(--muted)}
.login-card label{font-weight:600;font-size:13px;margin-top:8px}
.login-card input,.login-card select{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.erro{color:var(--bad-fg);margin:6px 0 0;font-weight:500}
.btn.grande{margin-top:16px;padding:12px}

/* estrutura: topo + abas fixos, conteúdo ocupa o resto da tela */
#app{height:100dvh;display:flex;flex-direction:column}
.topo{flex:none;background:linear-gradient(90deg,var(--topo1),var(--topo2));color:#fff}
.topo-in{padding:10px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));display:flex;gap:8px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.marca{display:flex;align-items:baseline;gap:10px}
.marca-nome{font:700 24px/1 var(--display);letter-spacing:-.01em}
.marca-sub{opacity:.75;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.topo-acoes{display:flex;gap:8px;align-items:center}
.salvo{font-size:13px;color:#b9f5d2;min-width:92px;text-align:right;font-weight:600}
.salvo.pend{color:#ffe29a}.salvo.erro-s{color:#ffb3ad}
.btn.topo-btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.btn.topo-btn:hover:not(:disabled){background:rgba(255,255,255,.28);border-color:#fff}
.abas{display:flex;gap:6px;overflow-x:auto;padding:6px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));scrollbar-width:thin}
.tab{flex:none;border:2px solid transparent;border-radius:999px;padding:6px 14px;cursor:pointer;font-weight:600;white-space:nowrap;opacity:.88}
.tab:hover{opacity:1}
.tab[aria-current=page]{opacity:1;border-color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);transform:translateY(-1px)}
.aviso{flex:none;background:var(--bad-bg);color:var(--bad-fg);padding:12px 16px;font-weight:700;text-align:center}
.secoes{flex:1;min-height:0;overflow:auto;padding:14px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.pagina{display:flex;flex-direction:column;gap:12px;min-height:100%}
.pagina.cheia{height:100%;min-height:380px}
.pag-cab{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.pag-t{margin:0;font:700 26px/1.1 var(--display);letter-spacing:-.01em}
.pag-m{color:var(--muted);font-size:14px}
.pag-m b{color:var(--ink)}.pag-m .ruim{color:var(--bad-fg);font-weight:700}
.pag-corpo{display:flex;flex-direction:column;gap:14px}
.pag-corpo.cheio{flex:1;min-height:0}
.ajuda{color:var(--muted);font-size:14px}
.ajuda summary{cursor:pointer;display:inline-block;color:var(--accent);font-weight:600}
.ajuda p{margin:6px 0 0;max-width:90ch}
.dica{margin:0;color:var(--muted);font-size:14px;max-width:90ch}
.sub-t{margin:6px 0 0;font:700 17px var(--display)}

.btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 12px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn:hover:not(:disabled){background:var(--hover);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
.btn.primario{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primario:hover:not(:disabled){filter:brightness(1.1);background:var(--accent)}
.btn.perigo{background:#d93025;border-color:#d93025;color:#fff}
.btn.mini{padding:3px 9px;font-size:13px}

/* grade */
.grid{display:flex;flex-direction:column;gap:10px;min-width:0}
.grid.cheio{flex:1;min-height:0}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bar input[type=search],.bar select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);min-width:0}
.bar input[type=search]{width:min(260px,100%)}
.bar .esp{flex:1}
.bulk{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:9px 12px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px}
.bulk select,.bulk input{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);min-width:0;max-width:200px}
.bulk .sep{width:1px;height:22px;background:var(--accent);opacity:.35;margin:0 4px}
.scroll{overflow:auto;max-height:56vh;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);cursor:grab;overscroll-behavior:contain}
.grid.cheio .scroll{flex:1;min-height:0;max-height:none}
.scroll.pan{cursor:grabbing;user-select:none}
table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%}
th{position:sticky;top:0;z-index:3;background:var(--accent-soft);text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);padding:0;border-bottom:2px solid var(--accent);white-space:nowrap;user-select:none;height:38px}
th .th-t{display:block;padding:0 14px 0 8px;overflow:hidden;text-overflow:ellipsis;line-height:36px}
th.ord{cursor:pointer} th.ord:hover{background:var(--panel)}
th.asc .th-t::after{content:" ▲";font-size:9px} th.desc .th-t::after{content:" ▼";font-size:9px}
th .rz{position:absolute;top:0;right:-3px;width:9px;height:100%;cursor:col-resize;z-index:5;touch-action:none}
th .rz::after{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;background:var(--accent);opacity:.25;border-radius:2px}
th .rz:hover::after,th .rz.on::after{opacity:1}
td{padding:3px 4px;border-bottom:1px solid var(--line);background:var(--panel);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--panel) 94%,var(--accent))}
tbody tr:hover td{background:var(--hover)}
tbody tr.sel td{background:var(--accent-soft)}
tbody tr.saiu td{opacity:.45}
tbody tr.sem-vinculo td{background:var(--warn-bg)}
td.stk,th.stk{position:sticky;left:34px;z-index:2;box-shadow:1px 0 0 var(--line)}
th.stk{z-index:4}
td.chk,th.chk{position:sticky;left:0;z-index:2;text-align:center;padding:0}
th.chk{z-index:4}
td.fill,th.fill{padding:0}
td input:not([type=checkbox]),td select{width:100%;min-width:0;padding:6px 7px;border:1px solid transparent;border-radius:8px;background:transparent;cursor:text;text-overflow:ellipsis}
td select{cursor:pointer}
td input:not([type=checkbox]):hover,td select:hover{border-color:var(--line)}
td input:not([type=checkbox]):focus,td select:focus{border-color:var(--accent);background:var(--panel);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
td input[type=number]{text-align:right}
.moeda{display:flex;align-items:center;gap:2px}
.moeda .rs{flex:none;color:var(--muted,#6b6b80);font-size:.85em;font-weight:600;padding-left:6px}
.moeda input{flex:1}
td select.sel{font-weight:600;border-radius:999px;padding:5px 8px}
td select option{background:var(--panel);color:var(--ink)}
.der{padding:5px 8px;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px}
.der.c-ok,.der.c-bad,.der.c-warn,.der.c-info,.der.c-mag,.der.c-teal,.der.c-pink,.der.c-gray{font-weight:600}
tfoot td{position:sticky;bottom:0;z-index:3;background:var(--accent-soft);border-top:2px solid var(--accent);border-bottom:0;font-weight:700;padding:8px 10px;color:var(--ink)}
tfoot td.n{text-align:right}
tfoot td.chk,tfoot td.stk{z-index:4}
.arq{display:flex;gap:4px;align-items:center;white-space:nowrap}
.arq .nome{max-width:100%;overflow:hidden;text-overflow:ellipsis;background:var(--info-bg);color:var(--info-fg);border:0;padding:4px 10px;cursor:pointer;border-radius:999px;font-weight:600}
.arq .nome:hover{filter:brightness(.95)}
.arq .anexar{border-style:dashed}
td .nome{background:none;border:0;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:5px 6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ico{background:none;border:0;cursor:pointer;color:var(--muted);padding:3px 6px;border-radius:6px;font-size:13px;font-weight:600}
.ico:hover{background:var(--line);color:var(--ink)}
.foot{display:flex;gap:6px 18px;align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap}
.foot b{color:var(--ink)}
.vazio{padding:32px;text-align:center;color:var(--muted)}

/* painel */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.tile{border-radius:14px;padding:14px 16px}
.tile .k{font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;opacity:.85}
.tile .v{font:700 27px/1.2 var(--display);margin-top:2px}
.graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);min-width:0}
.card h3{margin:0;font:700 17px var(--display)}
.card .sub{margin:2px 0 10px;color:var(--muted);font-size:13px}
.leg{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 6px;font-size:13px;color:var(--muted)}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.svgc{width:100%;height:auto;display:block;overflow:visible}
.svgc text{fill:var(--muted);font:12px var(--body)}
.svgc .g{stroke:var(--line);stroke-width:1}
.svgc .vl{fill:var(--ink);font-weight:700}
.svgc .hit{fill:transparent;cursor:default}
.svgc .hit:hover{fill:color-mix(in srgb,var(--accent) 8%,transparent)}
.bh{display:flex;flex-direction:column;gap:10px}
.bh-l{display:grid;grid-template-columns:minmax(80px,28%) 1fr auto;gap:10px;align-items:center}
.bh-n{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-t{display:block;height:18px;border-radius:0 4px 4px 0}
.bh-b{display:block;height:100%;border-radius:0 4px 4px 0;min-width:0}
.bh-v{font-size:13px;font-weight:700;min-width:84px;text-align:right}
.tab-ro{width:100%;table-layout:auto}
.tab-ro td,.tab-ro th{padding:9px 12px;height:auto;white-space:nowrap}
.tab-ro th{line-height:1.2}
.tab-ro td.n,.tab-ro th.n{text-align:right}
.tab-ro tfoot td{position:static}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:2px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 16px;cursor:pointer;font-weight:600}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:18px}
.drop{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;border:2px dashed var(--accent);border-radius:14px;padding:18px;background:var(--accent-soft);cursor:pointer;font-weight:700;color:var(--accent)}
.drop.sobre{background:var(--ok-bg);border-color:var(--ok-fg);color:var(--ok-fg)}
.drop small{font-weight:500;color:var(--muted);flex-basis:100%}

/* diálogo, toast, dica de gráfico */
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:0;width:min(520px,calc(100% - 32px));box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(10,12,30,.55)}
dialog form{padding:22px;display:flex;flex-direction:column;gap:12px}
dialog h2{margin:0;font:700 20px var(--display)}
.dlg-b{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow:auto}
.dlg-b p{margin:0}.dlg-b ul{margin:0;padding-left:20px;color:var(--muted);font-size:14px}
.dlg-f{display:flex;gap:8px;justify-content:flex-end}
.toast{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:60;max-width:calc(100% - 32px);box-shadow:var(--shadow);font-weight:600}
.tip{position:fixed;z-index:70;pointer-events:none;background:var(--ink);color:var(--bg);padding:7px 10px;border-radius:8px;font-size:13px;line-height:1.35;box-shadow:var(--shadow);max-width:260px;white-space:pre-line}
@media (max-width:640px){.marca-nome{font-size:20px}.pag-t{font-size:22px}.bh-l{grid-template-columns:90px 1fr auto}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.tab[aria-current=page]{transform:none}}

.der.liq-desc{font-weight:700}

.notas-taxa{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.nota-taxa{padding:9px 12px;border-radius:10px;font-size:.88rem;line-height:1.4}