:root{
  color-scheme:light;
  --bg:#f5f6f8; --surface:#ffffff; --line:#e0e3e8; --grid:#eceef2;
  --ink:#10151c; --ink-2:#4b5563; --ink-3:#7a8390;
  --accent:#2a78d6; --accent-soft:#e3eefb;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --seq0:#eef3f9; --seq1:#cde2fb; --seq2:#86b6ef; --seq3:#3987e5; --seq4:#1c5cab; --seq5:#0d366b;
  --good:#1a7f4b; --crit:#c2352f; --good-bg:#e4f4ea; --crit-bg:#fbe6e4;
  --d:#2a78d6; --p:#8a5a00; --p-bg:#fbf0dc; --r:#6b3fa0; --r-bg:#efe7f8; --s4:#b9c3cf;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#121417; --surface:#1a1d21; --line:#2c3137; --grid:#24282d;
    --ink:#f2f4f6; --ink-2:#b8bfc8; --ink-3:#8a929c;
    --accent:#5a9ee9; --accent-soft:#1c2a3b;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70;
    --seq0:#1d2227; --seq1:#184f95; --seq2:#256abf; --seq3:#3987e5; --seq4:#86b6ef; --seq5:#cde2fb;
    --good:#5cc98c; --crit:#ef7a73; --good-bg:#16291f; --crit-bg:#321b1a;
    --d:#5a9ee9; --p:#e6a84a; --p-bg:#2d2415; --r:#b99ae6; --r-bg:#2a2236; --s4:#4a525c;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.5;padding-inline:16px;padding-block:24px 56px}
.wrap{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:28px;font-weight:700}
h2{font-size:19px;font-weight:650}
h3{font-size:14.5px;font-weight:600}
p{margin:0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.small{font-size:12.5px;color:var(--ink-3)}
.nota{font-size:12.5px;color:var(--ink-3)}
.r{text-align:right;font-variant-numeric:tabular-nums}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.frescor{font-size:12.5px;color:var(--ink-2);text-align:right;display:flex;flex-direction:column;gap:2px}
.frescor b{font-weight:600;color:var(--ink)}

.filtros{position:sticky;top:0;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;box-shadow:0 4px 14px -10px rgba(0,0,0,.25)}
.filtros .grupo{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mes{gap:6px}
.mes button{border:1px solid var(--line);background:var(--surface);border-radius:6px;width:32px;height:32px;font-size:18px;line-height:1;cursor:pointer}
.mes button:hover:not(:disabled){border-color:var(--accent)}
.mes button:disabled{opacity:.35;cursor:default}
.mes select{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:5px 10px;font-size:15px;font-weight:600;min-width:210px}
.presets{display:flex;flex-wrap:wrap;gap:4px}
.presets button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:13px;cursor:pointer}
.presets button:hover{border-color:var(--accent)}
.presets button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.datas{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--ink-3)}
.datas input,.selects select{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:4px 8px;font-size:13px}
.selects label{display:flex;flex-direction:column;font-size:11px;color:var(--ink-3);gap:2px;text-transform:uppercase;letter-spacing:.05em}
.selects select{min-width:140px;text-transform:none;letter-spacing:0;color:var(--ink)}
.aviso-filtro{flex-basis:100%;font-size:12.5px;color:var(--p);background:var(--p-bg);padding:6px 10px;border-radius:6px}

main{display:flex;flex-direction:column;gap:32px;transition:opacity .15s}
main[aria-busy="true"]{opacity:.45}
.secao{display:flex;flex-direction:column;gap:12px}
.cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.painel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.painel-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.grade3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}

.src{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:500;width:16px;height:16px;border-radius:4px;vertical-align:1px}
.src.d{background:var(--accent-soft);color:var(--d)}
.src.p{background:var(--p-bg);color:var(--p)}
.src.r{background:var(--r-bg);color:var(--r)}
.sim{color:var(--good);font-weight:600;white-space:nowrap}
.nao{color:var(--ink-3)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.kpi{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.kpi .rot{font-size:12.5px;color:var(--ink-2);display:flex;gap:6px;align-items:center}
.kpi .val{font-size:28px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.kpi .sub{font-size:12px;color:var(--ink-3)}
.delta{font-size:12px;font-weight:600;padding:1px 7px;border-radius:999px;align-self:flex-start;font-variant-numeric:tabular-nums}
.delta.up{background:var(--good-bg);color:var(--good)}
.delta.down{background:var(--crit-bg);color:var(--crit)}
.delta.eq{background:var(--grid);color:var(--ink-3)}

.funil{display:flex;flex-direction:column;gap:6px}
.etapa{display:grid;grid-template-columns:130px 1fr 150px;gap:12px;align-items:center;font-size:13.5px}
.etapa .barra{height:26px;background:var(--grid);border-radius:0 4px 4px 0;position:relative}
.etapa .barra div{height:100%;background:var(--s1);border-radius:0 4px 4px 0;min-width:2px}
.etapa .barra span{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-weight:600;font-variant-numeric:tabular-nums;font-size:13px}
.etapa .conv{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.etapa .conv b{color:var(--ink-2)}

.legenda{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--ink-2)}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.grafico svg{width:100%;height:auto;display:block}
.grafico text{fill:var(--ink-3);font-family:var(--sans);font-size:11px}
.grafico text.v{fill:var(--ink-2);font-weight:600}

.tabela-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{font-weight:600;text-align:left;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 9px;border-bottom:1px solid var(--grid);vertical-align:top}
tr:last-child td{border-bottom:0}
tfoot td{font-weight:600;border-top:1px solid var(--line)}
td .sub{font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
td a{color:var(--accent);text-decoration:none;white-space:nowrap}
td a:hover{text-decoration:underline}
.pill{font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px}
.pill.bom{background:var(--good-bg);color:var(--good)}
.pill.ruim{background:var(--crit-bg);color:var(--crit)}
.tag-ia{font-size:10.5px;font-family:var(--mono);color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:6px}
.vazio{color:var(--ink-3);font-size:13px;padding:10px 0}

.hbars{display:flex;flex-direction:column;gap:7px}
.hbar{display:grid;grid-template-columns:minmax(90px,150px) 1fr 50px;gap:10px;align-items:center;font-size:13px}
.hbar .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .trilho{height:10px;background:var(--grid);border-radius:0 4px 4px 0;overflow:hidden}
.hbar .trilho div{height:100%;background:var(--s1);border-radius:0 4px 4px 0}

.stats{gap:14px}
.stat .eyebrow{margin-bottom:2px}
.stat .n{font-size:24px;font-weight:650;font-variant-numeric:tabular-nums}

.calor{display:grid;grid-template-columns:54px repeat(7,1fr);gap:3px;font-size:12px}
.calor div{border-radius:3px;min-height:28px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;font-size:11.5px}
.calor .rl{justify-content:flex-start;color:var(--ink-3);font-family:var(--mono);font-size:10.5px}
.calor .cl{color:var(--ink-3);min-height:auto;padding-bottom:2px}
.calor .esc{color:#fff}

.tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12.5px;padding:8px 10px;border-radius:6px;line-height:1.45;z-index:9;max-width:280px;opacity:0;transition:opacity .08s}

.rodape{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-3);max-width:90ch}
.rodape b{color:var(--ink-2);font-weight:600}

@media (max-width:640px){
  .etapa{grid-template-columns:90px 1fr;}
  .etapa .conv{grid-column:2}
  .filtros{position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* login */
.tela-login{min-height:100vh;display:flex;align-items:center;justify-content:center}
.cartao-login{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px 26px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:22px}
.cartao-login form{display:flex;flex-direction:column;gap:6px}
.cartao-login label{font-size:12.5px;color:var(--ink-2);margin-top:8px}
.cartao-login input{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:9px 11px;font-size:15px}
.cartao-login button{margin-top:16px;border:0;background:var(--accent);color:#fff;border-radius:8px;padding:10px;font-size:15px;font-weight:600;cursor:pointer}
.cartao-login button:disabled{opacity:.6;cursor:default}
.erro-login{font-size:13px;color:var(--crit);background:var(--crit-bg);border-radius:6px;padding:7px 10px;margin-top:8px}

/* usuário logado */
.conta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
.conta b{color:var(--ink);font-weight:600}
.conta .papel{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--ink-3)}
.conta button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:3px 10px;font-size:12.5px;cursor:pointer}
.conta button:hover{border-color:var(--accent)}
.lado{display:flex;flex-direction:column;align-items:flex-end;gap:8px}