/* Gráficos e indicadores. Paleta categórica e rampa sequencial validadas (ver docs/visualizacao-de-dados.md); texto nunca usa a cor da série. */
:root {
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --q1: #cde2fb; --q2: #9ec5f4; --q3: #6da7ec; --q4: #3987e5; --q5: #256abf; --q6: #184f95; --q7: #0d366b;
  --cell-empty: #eef2f8; --grid: #dfe5f0; --muted-ink: #8a96ad; --good: #0ca30c; --warn: #fab219; --bad: #d03b3b;
}
:root[data-theme="dark"] { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --cell-empty: #172236; --grid: #243350; --muted-ink: #7f8cab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --cell-empty: #172236; --grid: #243350; --muted-ink: #7f8cab; } }

.graf-nav { position: sticky; top: 60px; z-index: 20; display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0; margin: 0 0 12px; background: linear-gradient(var(--paper) 70%, transparent); }
.graf-nav a { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .86rem; }
.graf-nav a:hover { border-color: var(--sea); color: var(--sea-ink); }
.graf-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 16px; }
.graf-filter .chip-btn { display: inline-flex; align-items: center; gap: 7px; }
.graf-filter .viz-key { width: 10px; height: 10px; }
.graf-sec { margin: 30px 0 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.graf-sec h2 { font-size: 1.28rem; letter-spacing: -.02em; } .graf-sec p { margin: 0; color: var(--muted); font-size: .9rem; max-width: 70ch; }
.graf-sec .num { font-size: .78rem; font-weight: 800; letter-spacing: .1em; color: var(--sea); }
.viz-grid-cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.viz-card { grid-column: span 6; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px 14px; box-shadow: var(--shadow); min-width: 0; }
.viz-card.wide { grid-column: span 12; } .viz-card.third { grid-column: span 4; } .viz-card.sm { grid-column: span 4; }
@media (max-width: 1100px) { .viz-card, .viz-card.third, .viz-card.sm { grid-column: span 12; } }
.viz-card header h3 { font-size: 1rem; } .viz-card header p { margin: 2px 0 12px; color: var(--muted); font-size: .82rem; }
.viz-read { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .85rem; color: var(--ink-2); }
.viz-read b { color: var(--ink); }
.viz { width: 100%; height: auto; display: block; overflow: visible; }
.viz text { font-family: var(--sans); fill: var(--ink-2); font-size: 11.5px; }
.viz .viz-axis { fill: var(--muted); } .viz .viz-axis.end { text-anchor: end; } .viz .viz-axis.mid { text-anchor: middle; } .viz .viz-axis.rot { text-anchor: start; }
.viz .viz-val { fill: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.viz .viz-cell { text-anchor: middle; font-weight: 700; font-size: 11px; pointer-events: none; } .viz .viz-cell.left { text-anchor: start; } .viz .viz-cell.sub { font-weight: 500; opacity: .85; }
.viz .viz-cell.on-dark { fill: #fff; } .viz .viz-cell.on-light { fill: #0d366b; }
.viz .viz-grid { stroke: var(--grid); stroke-width: 1; fill: none; } .viz .viz-now { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 3 3; }
.viz .viz-hit { fill: transparent; } .viz .viz-mark { cursor: default; outline: none; transition: opacity .15s; } .viz .viz-mark:hover, .viz .viz-mark:focus-visible { opacity: .82; }
.viz .viz-mark:focus-visible { filter: drop-shadow(0 0 0 2px var(--sea)); } .viz .viz-flow { opacity: .35; } .viz .viz-flow:hover { opacity: .9; }
.viz .donut-v { text-anchor: middle; font-size: 24px; font-weight: 800; fill: var(--ink); } .viz .donut-l { text-anchor: middle; fill: var(--muted); }
.viz .empty { stroke: var(--grid); stroke-width: 1; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 8px 0 0; padding: 0; font-size: .8rem; color: var(--ink-2); }
.viz-legend li { display: inline-flex; align-items: center; gap: 6px; } .viz-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.viz-tip { position: fixed; z-index: 90; max-width: 280px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: .8rem; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.viz-tip[hidden] { display: none; } .viz-tip strong { display: block; margin-bottom: 3px; } .viz-tip-row { display: flex; justify-content: space-between; gap: 14px; } .viz-tip-row b { font-variant-numeric: tabular-nums; }
.viz-table { margin-top: 10px; font-size: .8rem; } .viz-table summary { cursor: pointer; color: var(--muted); } .viz-table table { width: 100%; border-collapse: collapse; margin-top: 6px; } .viz-table th, .viz-table td { padding: 3px 8px; border-bottom: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; }
.viz-actions { display: flex; gap: 8px; margin-top: 8px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kpi { display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.kpi-l { font-size: .78rem; color: var(--muted); font-weight: 600; } .kpi-v { font-size: 1.9rem; letter-spacing: -.03em; line-height: 1.1; } .kpi-s { font-size: .78rem; color: var(--muted); }
.kpi.hero { grid-column: span 2; background: linear-gradient(135deg, var(--sea), var(--horizon)); color: #fff; border: 0; } .kpi.hero .kpi-l, .kpi.hero .kpi-s { color: rgba(255,255,255,.85); } .kpi.hero .kpi-v { font-size: 3.2rem; }
.spark { width: 110px; height: 26px; margin-top: 4px; } .spark-line { fill: none; stroke: var(--muted-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .spark-dot { fill: var(--sea); stroke: var(--surface); stroke-width: 2; }
.meter { height: 8px; border-radius: 99px; background: var(--cell-empty); overflow: hidden; } .meter i { display: block; height: 100%; border-radius: 99px; background: var(--sea); }
.meter-row { display: grid; grid-template-columns: 190px 1fr 70px; gap: 10px; align-items: center; margin: 8px 0; font-size: .86rem; } .meter-row b { text-align: right; font-variant-numeric: tabular-nums; }
.viz-empty { padding: 26px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 14px; font-size: .9rem; }
.donut-row { display: grid; grid-template-columns: 200px 1fr; gap: 10px 18px; align-items: center; } .donut-row .viz-table { grid-column: 1 / -1; } .donut-row .viz { max-width: 200px; }
.viz-card .viz-table { margin-top: 12px; }
.viz { max-width: 780px; } .viz.donut { max-width: 200px; } .viz.radar { max-width: 360px; }