/* Solar Soluções: barra de marca com abas; páginas de trabalho com indicadores, filtros e tabelas */
:root{
  --bg:#f3f6f9; --surface:#ffffff; --sunk:#e8eef4; --line:#d3dde7; --ink:#12283a; --muted:#566a7c;
  --brand:#155078; --brand-ink:#ffffff; --accent:#f46b23; --accent-ink:#6b2a05; --accent-soft:#fff2cf;
  --leaf:#1f7a5a; --leaf-soft:#dff1e9; --danger:#b23a2e; --danger-soft:#fbe6e3; --logo-claro:block; --logo-escuro:none;
  --f-display:"Sora",ui-sans-serif,system-ui,sans-serif; --f-body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0d1620; --surface:#14212d; --sunk:#1a2a38; --line:#2a3d4e; --ink:#e4edf5; --muted:#98abbc;
  --brand:#5aa7da; --brand-ink:#08131c; --accent:#ff8a4a; --accent-ink:#ffd9b8; --accent-soft:#3a2a0e;
  --leaf:#4cc193; --leaf-soft:#153329; --danger:#f0786b; --danger-soft:#3b1d19; --logo-claro:none; --logo-escuro:block; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;padding-inline:16px;padding-block:0 48px}
a{color:var(--brand)}
.wrap{max-width:1240px;margin:0 auto}
header.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:16px;border-bottom:1px solid var(--line);margin-bottom:24px;flex-wrap:wrap}
.logo{display:flex;line-height:0}.logo img{height:48px;width:auto;max-width:100%}
.lg-claro{display:var(--logo-claro)}.lg-escuro{display:var(--logo-escuro)}
nav.tabs{display:flex;gap:4px;background:var(--sunk);padding:4px;border-radius:9px;flex-wrap:wrap}
nav.tabs a{padding:7px 16px;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:500;font-size:14px}
nav.tabs a:hover{color:var(--ink)}
nav.tabs a.on{background:var(--surface);color:var(--brand);box-shadow:0 1px 2px rgb(0 0 0 / .08)}
h1{color:var(--brand);font-family:var(--f-display);font-size:26px;line-height:1.2;margin:0 0 4px;text-wrap:balance;letter-spacing:-.02em}
h2{font-family:var(--f-display);font-size:16px;font-weight:600;margin:0}
.lead{color:var(--muted);margin:0 0 20px;max-width:70ch}
.eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.head .lead{margin:0}
.flashes{display:grid;gap:6px;margin-bottom:14px}
.flash{padding:8px 12px;border-radius:8px;font-size:14px}
.flash.ok{background:var(--leaf-soft);color:var(--leaf)}
.flash.erro{background:var(--danger-soft);color:var(--danger)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--sunk);color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--leaf-soft);color:var(--leaf)}.pill.warn{background:var(--accent-soft);color:var(--accent-ink)}.pill.err{background:var(--danger-soft);color:var(--danger)}
.pill b{color:var(--ink);font-weight:600}
.st{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.st-analise,.st-rascunho{background:var(--accent-soft);color:var(--accent-ink)}
.st-ativo,.st-paga{background:var(--leaf-soft);color:var(--leaf)}
.st-emitida{background:color-mix(in srgb,var(--brand) 14%,var(--surface));color:var(--brand)}
.st-inativo,.st-cancelada{background:var(--sunk);color:var(--muted)}

/* formulários */
form.grid{display:grid;gap:22px}
fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
.fs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.row{display:grid;gap:12px;grid-template-columns:repeat(12,minmax(0,1fr))}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c6{grid-column:span 6}.c4{grid-column:span 4}.c3{grid-column:span 3}.c2{grid-column:span 2}
@media (max-width:620px){.c8,.c6,.c4,.c3{grid-column:span 12}.c2{grid-column:span 6}}
label.f{display:grid;gap:4px;min-width:0}
label.f>span{font-size:12px;color:var(--muted);font-weight:500}
.req::after{content:" *";color:var(--accent)}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=search],input[type=password],select{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:9px 11px;min-width:0;height:41px}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input.filled{background:var(--accent-soft);border-color:#e9c96a}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.suffix{position:relative}.suffix input{padding-right:48px}.suffix i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-size:13px;font-family:var(--f-mono)}
.inline-btn{display:flex;gap:8px}.inline-btn input{flex:1}
button,.btn{font:inherit;cursor:pointer;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 14px;font-weight:500;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:41px}
button:hover,.btn:hover{border-color:var(--ink)}
.primary{background:var(--brand)!important;color:var(--brand-ink)!important;border-color:var(--brand)!important}
.primary:hover{opacity:.9}
.ghost{border-color:transparent!important;background:transparent!important;color:var(--muted)!important}
.ghost:hover{color:var(--ink)!important;background:var(--sunk)!important}
.danger{color:var(--danger)!important;border-color:transparent!important;background:transparent!important}
.danger:hover{background:var(--danger-soft)!important}
.small{padding:4px 10px;font-size:13px;min-height:32px}
button:disabled{opacity:.5;cursor:not-allowed}
.check{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);cursor:pointer}
.check input{accent-color:var(--leaf);width:16px;height:16px}
.hint{font-size:12px;color:var(--muted)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
.drop{display:flex;gap:16px;align-items:center;border:1.5px dashed var(--line);border-radius:10px;padding:16px;background:var(--surface);cursor:pointer}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop .ic{width:44px;height:52px;flex:none;border-radius:6px;background:var(--sunk);display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;color:var(--muted);border:1px solid var(--line)}
.drop strong{display:block}.drop small{color:var(--muted)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.status{margin-top:10px;font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cad{max-width:860px}

/* histórico de consumo */
.hist{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px}
.hist-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.avg{font-family:var(--f-mono);font-size:22px;font-weight:500}.avg small{font-size:13px;color:var(--muted)}
.bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;align-items:end;height:110px;overflow-x:auto}
.bar{display:grid;grid-template-rows:1fr auto auto;height:100%;min-width:22px;text-align:center;gap:2px}
.bar .col{align-self:end;background:var(--brand);border-radius:3px 3px 0 0;min-height:2px}
.bar.out .col{background:var(--line)}
.bar .v{font-family:var(--f-mono);font-size:10px;color:var(--muted)}.bar .m{font-size:10px;color:var(--muted)}
.meta{display:flex;gap:8px;flex-wrap:wrap}

/* painéis */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:18px}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpis div{background:var(--surface);padding:14px 16px;min-width:0}
.kpis b{display:block;font-family:var(--f-mono);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.2;overflow-wrap:anywhere}
.kpis span{font-size:12px;color:var(--muted)}
.kpis .warn b{color:var(--accent)}
.filters{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end;margin-bottom:12px}
@media (max-width:960px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.filters .fsearch{grid-column:1/-1}}
.shown{font-size:13px;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
table.wide{min-width:960px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--sunk);white-space:nowrap}
th button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
th .arr{opacity:.35;font-size:10px}th[aria-sort] .arr{opacity:1;color:var(--brand)}
th.num,td.num{text-align:right}td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.mono{font-family:var(--f-mono);font-size:13px;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tr.click{cursor:pointer}tr.click:hover td{background:var(--sunk)}
td .nm{font-weight:600;display:block}td .sub{font-size:12px;color:var(--muted);display:block}
.miss{color:var(--danger);font-size:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px}
.two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px}
dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
dl.kv .tot{font-weight:600;color:var(--ink);border-top:1px solid var(--line);padding-top:6px}
.alertas{display:grid;gap:6px}
.alerta{background:var(--accent-soft);color:var(--accent-ink);border-radius:8px;padding:8px 12px;font-size:14px}
.stack{display:grid;gap:16px}
details summary{cursor:pointer;color:var(--muted);font-size:13px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}