/* dash-frete-v1 — aba Análise de frete.
   Paleta validada (validate_palette.js, superfície #ffffff): azul #2a78d6 e
   laranja #eb6834 passam banda de luminosidade, croma, separação para
   daltonismo (ΔE 24,7 protan) e contraste. Tokens por papel, não hex solto.
   Sem bloco dark: o app inteiro é claro — uma media query de dark aqui deixaria
   só esta aba escura no sistema em modo noturno. Quando o app ganhar tema,
   é redefinir estes tokens num escopo só. */
.panel#tab-analise {
  --viz-surface:   #ffffff;
  --viz-plane:     #F2F8F7;
  --viz-ink:       #0b0b0b;
  --viz-ink-2:     #52514e;
  --viz-muted:     #898781;
  --viz-grid:      #e1e0d9;
  --viz-axis:      #c3c2b7;
  --viz-ring:      rgba(11,11,11,.10);
  --viz-neg:       #2a78d6;   /* negociado */
  --viz-cte:       #eb6834;   /* CT-e real */
  --viz-good:      #0ca30c;
  --viz-crit:      #d03b3b;
  --viz-warn:      #c98500;
}

/* ---- filtros: uma linha acima dos gráficos ---- */
.dash-filtros { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  padding:12px; background:var(--viz-plane); border:1px solid var(--viz-ring);
  border-radius:10px; margin:12px 0 16px; }
.dash-filtros label { display:flex; flex-direction:column; gap:4px;
  font-size:11.5px; color:var(--viz-ink-2); }
.dash-filtros select, .dash-filtros input { padding:6px 8px; font-size:13px;
  border:1px solid #D2CECB; border-radius:7px; background:#fff; min-width:130px; }
.dash-filtros .dash-busca input { min-width:190px; }
.dash-filtros button { align-self:flex-end; }
#dfResumo { margin-left:auto; align-self:flex-end; font-size:12px; }

/* ---- KPIs ---- */
.dash-kpis { display:grid; gap:12px; margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.kpi { background:var(--viz-surface); border:1px solid var(--viz-ring);
  border-radius:10px; padding:14px 16px; }
.kpi .rot { font-size:11.5px; color:var(--viz-muted); text-transform:uppercase;
  letter-spacing:.03em; }
.kpi .val { font-size:26px; font-weight:700; color:var(--viz-ink);
  margin-top:4px; line-height:1.1; }
.kpi .sub { font-size:12px; color:var(--viz-ink-2); margin-top:4px; }
.kpi.neg .val { color:var(--viz-neg); }
.kpi.cte .val { color:var(--viz-cte); }
.kpi.alerta .val { color:var(--viz-crit); }

/* ---- cartões de gráfico ---- */
.dash-card { background:var(--viz-surface); border:1px solid var(--viz-ring);
  border-radius:10px; padding:14px 16px; margin-bottom:16px; }
.dash-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:10px; }
.dash-head h3 { margin:0; font-size:15px; }
.dash-btns { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.dash-btns button { padding:5px 11px; font-size:12px; border-radius:7px;
  border:1px solid #D2CECB; background:#fff; color:var(--viz-ink-2);
  cursor:pointer; }
.dash-btns button.on { background:var(--viz-neg); border-color:var(--viz-neg);
  color:#fff; font-weight:600; }

/* ---- barras (SVG) ---- */
.viz text { font-family:inherit; }
.viz .gl { stroke:var(--viz-grid); stroke-width:1; }
.viz .ax { stroke:var(--viz-axis); stroke-width:1; }
.viz .tk { fill:var(--viz-muted); font-size:11px; }
.viz .lb { fill:var(--viz-ink-2); font-size:12px; }
.viz .vl { fill:var(--viz-ink); font-size:11.5px; font-weight:600; }
.viz .barra { cursor:default; }
.viz .barra:hover rect { stroke:var(--viz-ink); stroke-width:1.5; }

/* legenda: sempre presente com 2+ séries */
.viz-leg { display:flex; gap:16px; font-size:12px; color:var(--viz-ink-2);
  margin:2px 0 8px; }
.viz-leg i { width:10px; height:10px; border-radius:3px; display:inline-block;
  margin-right:6px; vertical-align:-1px; }

/* ---- tabela ---- */
.tabela-rolagem { overflow:auto; max-height:460px; }
table.dash-tab { width:100%; border-collapse:collapse; font-size:12.5px; }
table.dash-tab th { position:sticky; top:0; background:var(--viz-plane);
  text-align:left; padding:7px 9px; font-size:11.5px; color:var(--viz-ink-2);
  border-bottom:1px solid var(--viz-axis); cursor:pointer; white-space:nowrap; }
table.dash-tab th.num, table.dash-tab td.num { text-align:right;
  font-variant-numeric:tabular-nums; }
table.dash-tab td { padding:6px 9px; border-bottom:1px solid var(--viz-grid); }
table.dash-tab tr:hover td { background:#ffffff; }
table.dash-tab .up { color:var(--viz-crit); font-weight:600; }
table.dash-tab .dn { color:var(--viz-warn); }
table.dash-tab .eq { color:var(--viz-good); }

/* alternador de base de comparacao */
.dash-conc { margin-left:auto; padding:5px 11px; font-size:12px; border-radius:7px;
  border:1px dashed var(--viz-crit); background:#fff; color:var(--viz-crit);
  cursor:pointer; font-weight:600; }
.dash-conc.on { border-style:solid; border-color:var(--viz-axis);
  color:var(--viz-ink-2); font-weight:500; }
.dash-head .dash-btns { margin-left:10px; }

/* nota explicativa da cobertura de CT-e */
.dash-nota { margin:-6px 0 16px; padding:10px 13px; font-size:12.5px; line-height:1.55;
  color:var(--viz-ink-2); background:#fffdf5; border:1px solid #f0e2bd;
  border-left:3px solid var(--viz-warn); border-radius:8px; }
.dash-nota b { color:var(--viz-ink); }

.dash-nota .alerta-nota { color:var(--viz-crit); font-weight:700; }

/* contexto por grupo: cliente, valor da NF e % liquido */
.viz .sublb { fill:var(--viz-muted); font-size:10.5px; }
.viz .ctx   { fill:var(--viz-muted); font-size:11px; }