/* ---------- Relatórios ---------- */
:root{--chart:#00A39A;--chart-fraco:#B9DDD8;--pos:#0B7366;--grade:#E4F2EF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--chart-fraco:#24585C;--pos:#7BE3D4;--grade:#17494D}}
:root[data-theme="dark"]{--chart-fraco:#24585C;--pos:#7BE3D4;--grade:#17494D}
.rel-filtros{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-bottom:18px}
.rel-filtros .seg button{min-height:40px}
.rel-filtros .datas{display:flex;gap:8px;align-items:flex-end}
.rel-filtros label{font-size:12.5px}
.rel-filtros input,.rel-filtros select{min-height:40px;padding:7px 10px;width:auto}
.rel-corpo{display:flex;flex-direction:column;gap:20px;transition:opacity .15s}
.rel-corpo.carregando{opacity:.5}
@media (prefers-reduced-motion:reduce){.rel-corpo{transition:none}}
.seg button[aria-pressed="true"]{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--bg)}
.periodo-txt{color:var(--muted);font-size:13px;margin:-6px 0 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{padding:16px 18px}
.kpi .rot{font-size:13px;color:var(--muted);font-weight:700}
.kpi .val{font-family:var(--body);font-weight:700;font-size:26px;line-height:1.15;margin:4px 0 2px;letter-spacing:-.01em}
.kpi.hero .val{font-size:44px}
@media (max-width:560px){.kpi.hero .val{font-size:36px}}
.delta{font-size:12.5px;font-weight:700;color:var(--muted)}
.delta.up{color:var(--pos)}
.delta.down{color:var(--red)}
.destaques{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.destaque{padding:18px;display:flex;gap:14px;align-items:center}
.destaque .medalha{flex:none;width:46px;height:46px;border-radius:50%;background:var(--butter);color:#0D3B3F;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:20px}
.destaque .rot{font-size:12.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.destaque b{display:block;font-family:var(--head);font-size:20px}
.destaque small{color:var(--muted)}
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.rank li{display:grid;grid-template-columns:34px minmax(110px,220px) 1fr;gap:6px 12px;align-items:center}
.rank .pos{font-family:var(--head);font-weight:700;font-size:18px;color:var(--muted);text-align:right}
.rank li:first-child .pos{color:var(--ink)}
.rank .nome b{display:block;line-height:1.2;word-break:break-word}
.rank .nome small{color:var(--muted);font-size:12.5px}
.rank .barra{display:flex;align-items:center;gap:8px;min-width:0}
.rank .trilho{flex:1;min-width:0}
.rank .preenche{height:14px;background:var(--chart);border-radius:0 4px 4px 0;min-width:2px}
.rank .valor{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px}
@media (max-width:560px){.rank li{grid-template-columns:28px 1fr}.rank .barra{grid-column:2}}
.tbl.num td.n,.tbl.num th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.card-head .sec{margin-bottom:0}
.grafico{position:relative}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}
.grafico .eixo{fill:var(--muted);font-size:11px;font-family:var(--body)}
.grafico .grade{stroke:var(--grade);stroke-width:1}
.grafico .col{fill:var(--chart)}
.grafico .alvo{fill:transparent;cursor:pointer;outline:none}
.grafico .alvo:hover+.col,.grafico .alvo:focus+.col{fill:var(--brand-deep)}
.tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:8px 12px;font-size:13px;white-space:nowrap;z-index:5;transform:translate(-50%,-100%);margin-top:-8px}
.tip b{display:block;font-size:16px}
.tip span{color:var(--muted)}
.vazio-rel{padding:28px 22px;text-align:center;color:var(--muted)}
.vazio-rel b{display:block;color:var(--ink);font-family:var(--head);font-size:18px;margin-bottom:6px}
.posicoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.posicoes .kpi .val{font-size:34px}
@media (min-width:720px){.kpi.hero{grid-column:span 2}}
.kpi .val{overflow-wrap:anywhere}
.rel-filtros label{display:flex;flex-direction:column;gap:4px}
.rel-filtros label > input,.rel-filtros label > select{margin-top:0}