/*
  Charts / styles / charts.css
  Marcas finas, grade recessiva, rótulo seletivo — as regras de
  dataviz/references/marks-and-anatomy.md em CSS. Tudo por var(...), então
  o toggle de tema já re-pinta qualquer gráfico renderizado sem re-render.
*/

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Prompt 14, seções 35-36: cards de gráfico mais robustos — mais padding,
   sombra um pouco mais perceptível, título maior (era 14px/space-6). */
.chart{
  background:var(--chart-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-7); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:var(--space-5);
  font-family:var(--font-ui); min-width:0; transition:box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast);
}
.chart--list{ gap:var(--space-3); }
/* Prompt 14, seção 56: hover discreto — nunca zoom/animação chamativa, só sombra e borda um degrau mais fortes. */
@media (hover: hover){
  .chart:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-md); }
}

.chart-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.chart-headings{ min-width:0; }
.chart-title{ font-size:15px; font-weight:600; color:var(--chart-ink); margin:0; }
.chart-subtitle{ font-size:12.5px; color:var(--chart-ink-secondary); margin:2px 0 0; }
.chart-subtitle[hidden]{ display:none; }

.chart-table-toggle{
  flex:none; height:28px; padding:0 var(--space-3); border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--chart-surface); color:var(--chart-ink-secondary); font-size:12px; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast);
}
.chart-table-toggle:hover{ background:var(--chart-surface-sunken); color:var(--chart-ink); }
.chart-table-toggle[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }

.chart-body{ position:relative; min-width:0; }
.chart-plot{ width:100%; }
.chart-svg{ width:100%; height:auto; display:block; overflow:visible; }
.chart-table-view{ overflow-x:auto; }

/* ---------- overlay: carregando / vazio / erro ---------- */
.chart-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--chart-surface); z-index:5;
}
.chart-overlay[hidden]{ display:none; } /* [hidden] sozinho perde pra .chart-overlay{display:flex} por ordem de fonte */
.chart-skeleton{
  width:92%; height:70%; border-radius:var(--radius-md);
  background:linear-gradient(100deg, var(--chart-surface-sunken) 30%, var(--border) 45%, var(--chart-surface-sunken) 60%);
  background-size:200% 100%; animation:chart-shimmer 1.6s ease-in-out infinite;
}
@keyframes chart-shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.chart-empty, .chart-error{ text-align:center; padding:var(--space-6); }
.chart-empty p, .chart-error p{ font-size:13px; color:var(--chart-muted); margin:0; max-width:32ch; }
.chart-error p{ color:var(--chart-critical); }

/* ---------- legenda ---------- */
.chart-legend-list{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); list-style:none; padding:0; margin:0; }
.chart-legend-item{
  display:inline-flex; align-items:center; gap:var(--space-2); background:none; border:none; cursor:pointer;
  padding:2px 4px; border-radius:var(--radius-xs); font-size:12px; color:var(--chart-ink-secondary);
}
.chart-legend-item:hover{ color:var(--chart-ink); }
.chart-legend-item.is-off{ opacity:.4; }
.chart-legend-swatch{ display:inline-block; flex:none; background:var(--legend-color); }
.chart-legend-swatch--rect{ width:10px; height:10px; border-radius:2px; }
.chart-legend-swatch--line{ width:14px; height:2px; border-radius:1px; }
.chart-legend-swatch--dot{ width:8px; height:8px; border-radius:50%; }
.chart-legend-label{ color:inherit; }
.chart-legend-meta{ color:var(--chart-ink-secondary); font-variant-numeric:tabular-nums; font-size:11.5px; }

/* ---------- donut/pizza — legenda lateral, seções 37-38/40 ----------
   CSS Grid só reposiciona os mesmos três filhos que `chart-shell.js` já
   monta pra QUALQUER gráfico (header/body/legend) — nenhum DOM novo,
   nenhuma mudança em chart-shell.js (usado pelos outros 26 componentes).
   `.chart-body`/`.chart-legend` viram vizinhos lado a lado só quando
   `data-chart-type="donut"` E o card é largo o bastante pra caber os
   dois (abaixo de 460px cai pro empilhado vertical de sempre). Os nós
   `.sr-only` (descrição/live region) são `position:absolute`, então o
   Grid já os ignora automaticamente — não participam do posicionamento. */
@media (min-width: 460px){
  .chart[data-chart-type="donut"]{
    display:grid;
    grid-template-columns:minmax(140px, 1.1fr) minmax(160px, 1fr);
    column-gap:var(--space-6);
    row-gap:var(--space-4);
  }
  .chart[data-chart-type="donut"] .chart-header{ grid-column:1 / -1; }
  .chart[data-chart-type="donut"] .chart-body{ grid-column:1; align-self:center; }
  .chart[data-chart-type="donut"] .chart-legend{ grid-column:2; align-self:center; }
  .chart[data-chart-type="donut"] .chart-legend-list{ flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:var(--space-3); }
  .chart[data-chart-type="donut"] .chart-legend-item{ width:100%; padding:4px 6px; }
}

/* ---------- tooltip ---------- */
.chart-tooltip{
  position:absolute; z-index:20; pointer-events:none; background:var(--n-900); color:#fff;
  border-radius:var(--radius-sm); padding:var(--space-3); box-shadow:var(--shadow-md); font-size:12px; min-width:120px;
}
:root[data-theme="dark"] .chart-tooltip{ background:var(--n-100); color:var(--n-900); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .chart-tooltip{ background:var(--n-100); color:var(--n-900); } }
.chart-tooltip-title{ font-weight:600; margin-bottom:4px; }
.chart-tooltip-row{ display:flex; align-items:center; gap:6px; padding:2px 0; white-space:nowrap; }
.chart-tooltip-key{ display:inline-block; width:10px; height:2px; background:var(--tooltip-key-color); flex:none; }
.chart-tooltip-label{ color:inherit; opacity:.75; flex:1; }
.chart-tooltip-value{ font-family:var(--chart-tick-font); font-variant-numeric:tabular-nums; }

/* ---------- eixos e grade ---------- */
.chart-gridline{ stroke:var(--chart-grid); stroke-width:1; }
.chart-baseline, .chart-axis line:not(.chart-gridline){ stroke:var(--chart-axis); stroke-width:1; }
.chart-tick-label{ fill:var(--chart-muted); font-size:10.5px; font-family:var(--chart-tick-font); }
.chart-crosshair{ stroke:var(--chart-axis); stroke-width:1; opacity:0; pointer-events:none; transition:opacity var(--dur-fast); }

/* ---------- marcas cartesianas ---------- */
.chart-line{ stroke-linecap:round; stroke-linejoin:round; }
.chart-area-fill{ opacity:.1; }
.chart-marker{ stroke:none; }
.chart-marker-ring{ fill:var(--chart-surface); }
.chart-hit-column{ fill:transparent; cursor:pointer; }
.chart-hit-column:focus-visible{ fill:var(--chart-surface-sunken); outline:none; }

.chart-bar{ cursor:pointer; transition:opacity var(--dur-fast); }
.chart-bar:hover, .chart-bar:focus-visible{ opacity:.85; outline:none; }
.chart-bar:focus-visible{ stroke:var(--accent); stroke-width:2; }

.chart-scatter-hit{ fill:transparent; cursor:pointer; }
.chart-scatter-dot{ transition:r var(--dur-fast); }
.chart-scatter-hit:hover ~ .chart-scatter-dot, .chart-scatter-hit:focus-visible ~ .chart-scatter-dot{ r:8; }
.chart-scatter-hit:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* ---------- arcos (pie/donut) ---------- */
.chart-arc-slice{ cursor:pointer; stroke:var(--chart-surface); stroke-width:2; transition:opacity var(--dur-fast); }
.chart-arc-slice:hover, .chart-arc-slice:focus-visible{ opacity:.85; outline:none; }
.chart-arc-slice:focus-visible{ stroke:var(--accent); stroke-width:3; }
.chart-arc-label{ fill:#fff; font-size:11px; font-weight:600; pointer-events:none; }
.chart-arc-center-value{ fill:var(--chart-ink); font-size:22px; font-weight:600; font-family:var(--font-ui); }
.chart-arc-center-label{ fill:var(--chart-muted); font-size:11px; }

/* ---------- radar ---------- */
.chart-radar-grid polygon{ fill:none; }

/* ---------- gauge ---------- */
.chart-gauge-track{ stroke:var(--chart-surface-sunken); stroke-linecap:round; }
.chart-gauge-band{ stroke-linecap:butt; }
.chart-gauge-value{ stroke:var(--accent); stroke-linecap:round; }
.chart-gauge-needle{ stroke:var(--chart-ink); stroke-width:2; stroke-linecap:round; }
.chart-gauge-hub{ fill:var(--chart-ink); }
.chart-gauge-target{ stroke:var(--chart-critical); stroke-width:2; }
.chart-gauge-value-label{ fill:var(--chart-ink); font-size:26px; font-weight:600; text-anchor:middle; font-family:var(--font-ui); }

/* ---------- funil ---------- */
.chart-funnel-segment{ cursor:pointer; stroke:var(--chart-surface); stroke-width:1; transition:opacity var(--dur-fast); }
.chart-funnel-segment:hover, .chart-funnel-segment:focus-visible{ opacity:.9; outline:none; }
.chart-funnel-segment:focus-visible{ stroke:var(--accent); stroke-width:2; }
.chart-funnel-label{ font-size:12px; font-weight:600; pointer-events:none; }
.chart-funnel-value{ font-size:11px; font-family:var(--chart-tick-font); pointer-events:none; opacity:.9; }

/* ---------- treemap ---------- */
.chart-treemap-tile{ cursor:pointer; stroke:var(--chart-surface); stroke-width:2; transition:opacity var(--dur-fast); }
.chart-treemap-tile:hover, .chart-treemap-tile:focus-visible{ opacity:.85; outline:none; }
.chart-treemap-tile:focus-visible{ stroke:var(--accent); stroke-width:3; }
.chart-treemap-label{ fill:#fff; font-size:11.5px; font-weight:600; pointer-events:none; }
.chart-treemap-value{ fill:#fff; font-size:11px; opacity:.85; pointer-events:none; font-family:var(--chart-tick-font); }

/* ---------- heatmap ---------- */
.chart-heatmap-cell{ cursor:pointer; }
.chart-heatmap-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* ---------- timeline ---------- */
.chart-timeline-bar, .chart-timeline-milestone{ cursor:pointer; transition:opacity var(--dur-fast); }
.chart-timeline-bar:hover, .chart-timeline-milestone:hover,
.chart-timeline-bar:focus-visible, .chart-timeline-milestone:focus-visible{ opacity:.85; outline:none; }
.chart-timeline-bar:focus-visible, .chart-timeline-milestone:focus-visible{ stroke:var(--accent); stroke-width:2; }

/* ---------- mapa ---------- */
.chart-map-frame{ stroke:var(--chart-grid); }
.chart-map-point, .chart-map-region{ cursor:pointer; transition:opacity var(--dur-fast); }
.chart-map-point:hover, .chart-map-region:hover,
.chart-map-point:focus-visible, .chart-map-region:focus-visible{ opacity:.85; outline:none; }
.chart-map-region{ stroke:var(--chart-surface); stroke-width:1; }
.chart-map-point:focus-visible, .chart-map-region:focus-visible{ stroke:var(--accent); stroke-width:2; }

/* ---------- ranking (HTML) ---------- */
.chart-ranking-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-4); }
.chart-ranking-item{ display:flex; align-items:center; gap:var(--space-4); }
.chart-ranking-rank{
  flex:none; width:22px; height:22px; border-radius:50%; background:var(--chart-surface-sunken); color:var(--chart-muted);
  font-family:var(--chart-tick-font); font-size:11px; display:flex; align-items:center; justify-content:center;
}
.chart-ranking-item:nth-child(1) .chart-ranking-rank{ background:var(--accent-subtle); color:var(--accent); font-weight:600; }
.chart-ranking-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.chart-ranking-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); }
.chart-ranking-label{ font-size:13px; color:var(--chart-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chart-ranking-value{ font-family:var(--chart-tick-font); font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--chart-ink-secondary); flex:none; }
/* Prompt 14, seção 39: barras mais espessas (eram 6px) — mais presença visual sem perder a leitura fina de valores próximos. */
.chart-ranking-track{ height:10px; border-radius:var(--radius-full); background:var(--chart-surface-sunken); overflow:hidden; }
.chart-ranking-bar{ height:100%; border-radius:var(--radius-full); }
.chart-ranking-delta{ flex:none; font-size:11.5px; font-family:var(--chart-tick-font); padding:2px 6px; border-radius:var(--radius-full); }
.chart-ranking-delta.is-good{ color:var(--chart-good); background:var(--success-bg); }
.chart-ranking-delta.is-bad{ color:var(--chart-critical); background:var(--danger-bg); }
.chart-ranking-item:focus-visible, .chart-ranking-list :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- smart table — Prompt 14, seção 44 ---------- */
.chart-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); }
table.chart-smart-table{ width:100%; border-collapse:collapse; font-size:13px; }
/* cabeçalho com leve tingimento de marca (não cinza neutro puro) + tipografia mais forte, mais contraste que o rótulo cinza-claro de antes */
table.chart-smart-table thead th{
  position:sticky; top:0; background:color-mix(in oklch, var(--accent) 6%, var(--chart-surface-sunken)); text-align:left; padding:var(--space-4);
  border-bottom:2px solid var(--border-strong); white-space:nowrap;
}
.chart-table-sort-btn{
  background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  font:inherit; font-family:var(--chart-tick-font); font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--chart-ink-secondary); padding:0;
}
table.chart-smart-table th[aria-sort="ascending"] .chart-table-sort-btn,
table.chart-smart-table th[aria-sort="descending"] .chart-table-sort-btn{ color:var(--accent); }
.chart-table-sort-icon{ flex:none; }
/* Ícone "ocioso" (coluna ordenável, mas não é a que está ordenando agora)
   — bem apagado, só pra sinalizar "isto é clicável" sem competir
   visualmente com o ícone ativo (accent) da coluna realmente ordenada;
   aparece um pouco mais forte no hover do botão (descoberta, seção de
   acessibilidade — não depende só de passar o mouse pra existir). */
.chart-table-sort-icon--idle{ opacity:.35; transition:opacity var(--dur-fast) var(--ease-standard); }
.chart-table-sort-btn:hover .chart-table-sort-icon--idle{ opacity:.75; }
/* padding vertical deliberadamente < a folga de `ROW_HEIGHT` 44px
   (analytical-table.js) — precisa sobrar espaço pro conteúdo nunca
   ultrapassar a altura fixa da linha, senão desalinha a matemática de
   rolagem virtualizada (linha real mais alta que a reservada). */
table.chart-smart-table td, table.chart-smart-table th[scope="row"]{
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); color:var(--chart-ink-secondary);
}
table.chart-smart-table th[scope="row"]{ color:var(--chart-ink); font-weight:600; }
table.chart-smart-table tbody tr:hover{ background:color-mix(in oklch, var(--accent) 4%, var(--chart-surface-sunken)); }
table.chart-smart-table tbody tr:last-child td, table.chart-smart-table tbody tr:last-child th{ border-bottom:none; }
.chart-table-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-3); font-size:11.5px; color:var(--chart-muted); }
.chart-table-pager{ display:flex; gap:var(--space-2); }
.chart-table-pager button{
  height:26px; padding:0 var(--space-3); border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--chart-surface); color:var(--chart-ink-secondary); font-size:12px; cursor:pointer;
}
.chart-table-pager button:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- kpi card ---------- */
/* Prompt 14, seções 30-32: presença maior + identidade cromática discreta.
   `--kpi-tone` (setado por instância via JS, `applyTone()` em kpi-card.js)
   é uma expressão de cor já pronta (normalmente `seriesColor(i)`) — nunca
   um hex novo aqui. Borda superior fina em vez de preenchimento grande:
   cor identifica a categoria sem competir com o número (seção 34, "cor
   não deve tingir tudo"). Sem `--kpi-tone`, cai em `--border` (mesmo card
   neutro de sempre) — 100% aditivo, nenhum KPI existente muda visual
   sem passar `tone`. */
.chart--kpi{ gap:var(--space-3); border-top:3px solid var(--kpi-tone, var(--border)); }
/* `align-items` fica no default (stretch) de propósito: `.kpi-context`
   (ex.: a barra de ocupação, `width:100%`) precisa de uma largura real do
   pai pra resolver — com `flex-start` o item encolhe pro conteúdo e o
   100% vira ~0 (bug real visto ao vivo). `.kpi-icon-chip` não é afetado:
   tem `width` explícita, que sempre vence sobre o stretch do eixo cruzado. */
.kpi-card-body{ display:flex; flex-direction:column; gap:var(--space-2); }
.kpi-icon-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-md); flex:none;
  background:color-mix(in oklch, var(--kpi-tone, var(--chart-accent)) 16%, var(--chart-surface));
  color:var(--kpi-tone, var(--chart-accent));
}
.kpi-icon-chip svg{ width:18px; height:18px; }
.kpi-context{ font-size:12.5px; color:var(--chart-ink-secondary); }
.kpi-value-row{ display:flex; align-items:baseline; gap:var(--space-2); }
.kpi-value{ font-size:32px; font-weight:700; letter-spacing:-.01em; color:var(--chart-ink); }
.kpi-delta-row{ display:flex; align-items:center; gap:var(--space-2); margin-top:2px; }
.kpi-delta{ font-size:12px; font-weight:600; font-family:var(--chart-tick-font); }
.kpi-delta.is-good{ color:var(--chart-good); }
.kpi-delta.is-bad{ color:var(--chart-critical); }
.kpi-delta--flat{ color:var(--chart-muted); }
.kpi-delta-label{ font-size:12px; color:var(--chart-muted); }
.kpi-trend-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); }
.kpi-sparkline{ flex:none; width:96px; height:28px; overflow:visible; }
.kpi-sparkline-muted{ stroke:var(--chart-muted); opacity:.5; }
.kpi-sparkline-accent{ stroke:var(--accent); }
.kpi-sparkline-dot{ fill:var(--accent); }

/* ---------- status visual ---------- */
.status-single{ display:flex; align-items:flex-start; gap:var(--space-3); }
.status-icon svg{ width:100%; height:100%; }
.status-label{ font-size:14px; font-weight:600; color:var(--chart-ink); }
.status-description{ font-size:12.5px; color:var(--chart-ink-secondary); margin-top:2px; }
.status-breakdown{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.status-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--radius-full);
  background:var(--chart-surface-sunken); font-size:12.5px;
}
.status-chip-value{ font-family:var(--chart-tick-font); font-weight:600; color:var(--chart-ink); }
.status-chip-label{ color:var(--chart-ink-secondary); }

/* ---------- distribuição percentual ---------- */
.dist-track{ display:flex; height:28px; border-radius:var(--radius-sm); overflow:hidden; background:var(--chart-surface-sunken); }
.dist-segment{
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:600;
  cursor:pointer; transition:opacity var(--dur-fast); min-width:2px;
}
.dist-segment:hover, .dist-segment:focus-visible{ opacity:.85; outline:none; }
.dist-segment:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent); }
.dist-legend{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); list-style:none; padding:0; margin:var(--space-3) 0 0; font-size:12px; color:var(--chart-ink-secondary); }
.dist-legend-item{ display:inline-flex; align-items:center; gap:6px; }
.dist-legend-swatch{ width:8px; height:8px; border-radius:50%; flex:none; }

/* ---------- analytical table & matrix ---------- */
.atable-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); flex-wrap:wrap; }
.atable-search{ max-width:240px; }
.atable-toolbar-right{ display:flex; gap:var(--space-2); position:relative; }
.atable-toolbar-btn{
  height:32px; padding:0 var(--space-4); border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--chart-surface); color:var(--chart-ink-secondary); font-size:12.5px; cursor:pointer;
}
.atable-toolbar-btn:hover{ background:var(--chart-surface-sunken); }
.atable-column-menu{
  position:absolute; top:calc(100% + 6px); right:0; background:var(--chart-surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:var(--space-3); z-index:30; min-width:180px;
}
.atable-column-menu-item{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) 0; font-size:12.5px; color:var(--chart-ink-secondary); cursor:pointer; }
.atable-scrollbox{ overflow-y:auto; }
.atable-filter-row td{ padding:var(--space-2) var(--space-4); background:var(--chart-surface); }
.atable-filter-input{
  width:100%; height:26px; padding:0 var(--space-2); border-radius:var(--radius-xs); border:1px solid var(--border);
  background:var(--chart-surface-sunken); color:var(--chart-ink); font-size:11.5px;
}
.atable-expand-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-right:6px;
  border-radius:3px; border:1px solid var(--border-strong); background:var(--chart-surface); color:var(--chart-ink-secondary);
  font-size:11px; line-height:1; cursor:pointer; vertical-align:middle;
}
.atable-group-row{ background:var(--chart-surface-sunken); font-weight:600; }
.atable-group-row td{ color:var(--chart-ink); }
.atable-group-subtotal{ float:right; font-weight:400; color:var(--chart-ink-secondary); font-family:var(--chart-tick-font); font-size:11.5px; }
.atable-totals-row{ font-weight:700; background:color-mix(in oklch, var(--accent) 5%, var(--chart-surface-sunken)); }
.atable-totals-row th, .atable-totals-row td{ border-top:2px solid var(--border-strong); color:var(--chart-ink); }
table.chart-smart-table tbody tr.is-clickable{ cursor:pointer; }
table.chart-smart-table tbody tr.is-clickable:hover{ background:var(--accent-subtle); }
table.chart-smart-table tbody tr.is-clickable:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
table.amatrix-table th[scope="row"]{ white-space:nowrap; }

/* ---------- responsivo ---------- */
@media (max-width:520px){
  .chart{ padding:var(--space-4); }
  .chart-header{ flex-direction:column; align-items:stretch; }
  .chart-table-toggle{ align-self:flex-start; }
}