/* Família Reveno: primitivas de dado (opcional). Prefixo rvd- nas classes e
   --rv-data-* nos tokens. CSS puro. Depende de tokens.css e não redefine
   nenhum token existente.

   Princípios (FRONTS_REFERENCIA.md da TECH-050, seção 2.4)
   - Todo número tem legenda e fonte. Gráfico sem nota de fonte não sai.
   - Cinza para contexto, uma cor para a história (--rv-data-context e
     --rv-data-focus). No máximo 6 categorias; acima disso, agrupar em Outros.
   - Cor nunca é o único sinal: variação tem seta e sinal no texto, série tem
     forma na legenda e rótulo direto, estado da evidência tem marca e palavra.
   - Toda marca gráfica com 3:1 ou mais contra o fundo (WCAG 2.2, 1.4.11).
     Rótulo em texto usa a cor de texto, não a da série.

   Tema: escuro por padrão (como a família). Os tokens --rv-data-* viram os do
   claro sob data-rv-theme, data-theme ou .rv-theme-light, dentro de
   .rvf-section--paper, ou com data-rv-surface="light" no próprio bloco
   (data-rv-surface="dark" volta ao escuro).

   Razão de contraste conferida (recalculada em test/familia-nova.test.mjs)
   Fundos escuros: canvas #0b1120, surface #111827, raised #151f31.
   Fundos claros: canvas #f8fafc, surface #ffffff, raised #f1f5f9,
   paper #f6f5f1 (institucional), evid. #f6f7f3 (Evidence).

   cat    escuro  canvas  surface raised | claro   canvas  surface raised  paper   evid.
   cat-1  #f97316   6.72    6.33    5.89 | #c2410c   4.95    5.18    4.73    4.75    4.81
   cat-2  #5b9cf5   6.74    6.35    5.91 | #2f6bd6   4.78    5.01    4.57    4.59    4.65
   cat-3  #e8c3ae  11.52   10.85   10.10 | #0f5f52   7.22    7.56    6.90    6.93    7.02
   cat-4  #8b5cf6   4.45    4.19    3.90 | #d9668f   3.21    3.36    3.07    3.08    3.12
   cat-5  #a0612e   3.81    3.59    3.34 | #6a3d9a   7.31    7.64    6.98    7.01    7.11
   cat-6  #b7d36e  11.26   10.61    9.87 | #5b6573   5.65    5.91    5.39    5.42    5.49
   ctx    #9aa6b6   7.63    7.18    6.68 | #5b6573   5.65    5.91    5.39    5.42    5.49

   Menor distância CIELAB entre pares (delta E 1976; simulação de Machado
   2009, severidade total): escuro 42.1 sem simulação, 26.1 protanopia, 20.5
   deuteranopia, 26.4 tritanopia; claro 28.4, 10.2, 11.3, 19.7.

   Divergente (desvio em torno de zero). Polos cobre e verde petróleo: não lê
   como bom e ruim nem como partido. Texto impresso na célula sobre o próprio
   preenchimento (4.5:1 ou mais) e preenchimento contra o fundo.
   div    escuro: cor, texto, fundo canvas    | claro: cor, texto, fundo surface
   div-n3  #d9a35b texto 8.37 fundo 8.37      | #7a4a12 texto 7.46 fundo 7.46
   div-n2  #b78340 texto 5.68 fundo 5.68      | #b07a2a texto 4.81 fundo 3.71
   div-n1  #6e5a3c texto 6.29 fundo 2.86      | #dcc49a texto 10.55 fundo 1.69
   div-0   #3a4150 texto 9.78 fundo 1.84      | #e7e5df texto 14.17 fundo 1.26
   div-p1  #2f6f68 texto 5.58 fundo 3.22      | #9fcfc6 texto 10.38 fundo 1.72
   div-p2  #3fa596 texto 6.31 fundo 6.31      | #3f978a texto 5.10 fundo 3.50
   div-p3  #7fd7c8 texto 11.17 fundo 11.17    | #0f5f56 texto 7.52 fundo 7.52
   Passos 1 e 0 ficam abaixo de 3:1 contra o fundo por desenho: a célula
   sempre imprime o valor com sinal e ganha contorno.

   Sequencial (intensidade: frescor, cobertura). Verde do Evidence no claro,
   laranja na tela escura; texto sobre cada passo com 4.5:1 ou mais.
   seq    escuro: cor, texto                  | claro: cor, texto
   seq-1   #2a1a12 texto 15.99                | #e7eee8 texto 15.13
   seq-2   #5a2d12 texto 11.04                | #c2d8ca texto 11.88
   seq-3   #9a4310 texto 6.30                 | #87b39c texto 7.62
   seq-4   #d65a0f texto 4.78                 | #4f8a6f texto 4.66
   seq-5   #f97316 texto 6.72                 | #28654f texto 6.85
   seq-6   #fdba8c texto 11.28                | #174a39 texto 10.12

   Foco (--rv-data-focus): a referência pede var(--rv-semantic-action), que
   cai abaixo de 3:1 em dois casos (#f97316 no papel, 2.57; #315c4e do
   Evidence na tela escura, 2.49). Por isso resolve por tema: #f97316 ou
   #34d399 (Evidence) no escuro, #c2410c ou #28654f (Evidence) no claro.

   Variação de métrica: bom #34d399 no escuro e #047857 no claro, ruim
   #f87171 e #b91c1c, 4.5:1 ou mais nos fundos do tema. Neutro usa o texto. */

:root {
  --rv-data-cat-1-on-dark: #f97316;
  --rv-data-cat-2-on-dark: #5b9cf5;
  --rv-data-cat-3-on-dark: #e8c3ae;
  --rv-data-cat-4-on-dark: #8b5cf6;
  --rv-data-cat-5-on-dark: #a0612e;
  --rv-data-cat-6-on-dark: #b7d36e;
  --rv-data-cat-1-on-light: #c2410c;
  --rv-data-cat-2-on-light: #2f6bd6;
  --rv-data-cat-3-on-light: #0f5f52;
  --rv-data-cat-4-on-light: #d9668f;
  --rv-data-cat-5-on-light: #6a3d9a;
  --rv-data-cat-6-on-light: #5b6573;
  --rv-data-context-on-dark: #9aa6b6;
  --rv-data-context-on-light: #5b6573;

  --rv-data-div-n3-on-dark: #d9a35b; --rv-data-div-n3-ink-on-dark: #0b1120;
  --rv-data-div-n2-on-dark: #b78340; --rv-data-div-n2-ink-on-dark: #0b1120;
  --rv-data-div-n1-on-dark: #6e5a3c; --rv-data-div-n1-ink-on-dark: #f8fafc;
  --rv-data-div-0-on-dark: #3a4150; --rv-data-div-0-ink-on-dark: #f8fafc;
  --rv-data-div-p1-on-dark: #2f6f68; --rv-data-div-p1-ink-on-dark: #f8fafc;
  --rv-data-div-p2-on-dark: #3fa596; --rv-data-div-p2-ink-on-dark: #0b1120;
  --rv-data-div-p3-on-dark: #7fd7c8; --rv-data-div-p3-ink-on-dark: #0b1120;
  --rv-data-div-n3-on-light: #7a4a12; --rv-data-div-n3-ink-on-light: #ffffff;
  --rv-data-div-n2-on-light: #b07a2a; --rv-data-div-n2-ink-on-light: #0f172a;
  --rv-data-div-n1-on-light: #dcc49a; --rv-data-div-n1-ink-on-light: #0f172a;
  --rv-data-div-0-on-light: #e7e5df; --rv-data-div-0-ink-on-light: #0f172a;
  --rv-data-div-p1-on-light: #9fcfc6; --rv-data-div-p1-ink-on-light: #0f172a;
  --rv-data-div-p2-on-light: #3f978a; --rv-data-div-p2-ink-on-light: #0f172a;
  --rv-data-div-p3-on-light: #0f5f56; --rv-data-div-p3-ink-on-light: #ffffff;

  --rv-data-seq-1-on-dark: #2a1a12; --rv-data-seq-1-ink-on-dark: #f8fafc;
  --rv-data-seq-2-on-dark: #5a2d12; --rv-data-seq-2-ink-on-dark: #f8fafc;
  --rv-data-seq-3-on-dark: #9a4310; --rv-data-seq-3-ink-on-dark: #f8fafc;
  --rv-data-seq-4-on-dark: #d65a0f; --rv-data-seq-4-ink-on-dark: #0b1120;
  --rv-data-seq-5-on-dark: #f97316; --rv-data-seq-5-ink-on-dark: #0b1120;
  --rv-data-seq-6-on-dark: #fdba8c; --rv-data-seq-6-ink-on-dark: #0b1120;
  --rv-data-seq-1-on-light: #e7eee8; --rv-data-seq-1-ink-on-light: #0f172a;
  --rv-data-seq-2-on-light: #c2d8ca; --rv-data-seq-2-ink-on-light: #0f172a;
  --rv-data-seq-3-on-light: #87b39c; --rv-data-seq-3-ink-on-light: #0f172a;
  --rv-data-seq-4-on-light: #4f8a6f; --rv-data-seq-4-ink-on-light: #0b1120;
  --rv-data-seq-5-on-light: #28654f; --rv-data-seq-5-ink-on-light: #ffffff;
  --rv-data-seq-6-on-light: #174a39; --rv-data-seq-6-ink-on-light: #ffffff;

  --rv-data-good-on-dark: #34d399;
  --rv-data-bad-on-dark: #f87171;
  --rv-data-good-on-light: #047857;
  --rv-data-bad-on-light: #b91c1c;

  --rv-data-stat-size: var(--rv-type-stat, clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem));
  --rv-data-table-max: 26rem;
}

/* ---------- Tema: tokens resolvidos, herdados pelo bloco ---------- */
:root, [data-rv-theme="dark"], [data-theme="dark"], .rv-theme-dark, [data-rv-surface="dark"] {
  --rv-data-cat-1: var(--rv-data-cat-1-on-dark); --rv-data-cat-2: var(--rv-data-cat-2-on-dark); --rv-data-cat-3: var(--rv-data-cat-3-on-dark);
  --rv-data-cat-4: var(--rv-data-cat-4-on-dark); --rv-data-cat-5: var(--rv-data-cat-5-on-dark); --rv-data-cat-6: var(--rv-data-cat-6-on-dark);
  --rv-data-context: var(--rv-data-context-on-dark);
  --rv-data-focus: var(--rv-color-brand);
  --rv-data-div-n3: var(--rv-data-div-n3-on-dark); --rv-data-div-n3-ink: var(--rv-data-div-n3-ink-on-dark);
  --rv-data-div-n2: var(--rv-data-div-n2-on-dark); --rv-data-div-n2-ink: var(--rv-data-div-n2-ink-on-dark);
  --rv-data-div-n1: var(--rv-data-div-n1-on-dark); --rv-data-div-n1-ink: var(--rv-data-div-n1-ink-on-dark);
  --rv-data-div-0: var(--rv-data-div-0-on-dark); --rv-data-div-0-ink: var(--rv-data-div-0-ink-on-dark);
  --rv-data-div-p1: var(--rv-data-div-p1-on-dark); --rv-data-div-p1-ink: var(--rv-data-div-p1-ink-on-dark);
  --rv-data-div-p2: var(--rv-data-div-p2-on-dark); --rv-data-div-p2-ink: var(--rv-data-div-p2-ink-on-dark);
  --rv-data-div-p3: var(--rv-data-div-p3-on-dark); --rv-data-div-p3-ink: var(--rv-data-div-p3-ink-on-dark);
  --rv-data-seq-1: var(--rv-data-seq-1-on-dark); --rv-data-seq-1-ink: var(--rv-data-seq-1-ink-on-dark);
  --rv-data-seq-2: var(--rv-data-seq-2-on-dark); --rv-data-seq-2-ink: var(--rv-data-seq-2-ink-on-dark);
  --rv-data-seq-3: var(--rv-data-seq-3-on-dark); --rv-data-seq-3-ink: var(--rv-data-seq-3-ink-on-dark);
  --rv-data-seq-4: var(--rv-data-seq-4-on-dark); --rv-data-seq-4-ink: var(--rv-data-seq-4-ink-on-dark);
  --rv-data-seq-5: var(--rv-data-seq-5-on-dark); --rv-data-seq-5-ink: var(--rv-data-seq-5-ink-on-dark);
  --rv-data-seq-6: var(--rv-data-seq-6-on-dark); --rv-data-seq-6-ink: var(--rv-data-seq-6-ink-on-dark);
  --rv-data-good: var(--rv-data-good-on-dark);
  --rv-data-bad: var(--rv-data-bad-on-dark);
  --rvd-text: var(--rv-color-dark-text);
  --rvd-text-2: var(--rv-color-dark-text-secondary);
  --rvd-text-3: var(--rv-color-dark-text-tertiary);
  --rvd-line: var(--rv-color-dark-border);
  --rvd-line-strong: var(--rv-color-dark-text-tertiary);
  --rvd-head: var(--rv-color-dark-surface);
  --rvd-zebra: color-mix(in srgb, var(--rv-color-dark-text) 4%, transparent);
  --rvd-track: color-mix(in srgb, var(--rv-color-dark-text) 10%, transparent);
}
[data-rv-theme="light"], [data-theme="light"], .rv-theme-light, .rvf-section--paper, [data-rv-surface="light"] {
  --rv-data-cat-1: var(--rv-data-cat-1-on-light); --rv-data-cat-2: var(--rv-data-cat-2-on-light); --rv-data-cat-3: var(--rv-data-cat-3-on-light);
  --rv-data-cat-4: var(--rv-data-cat-4-on-light); --rv-data-cat-5: var(--rv-data-cat-5-on-light); --rv-data-cat-6: var(--rv-data-cat-6-on-light);
  --rv-data-context: var(--rv-data-context-on-light);
  --rv-data-focus: var(--rv-color-brand-dark);
  --rv-data-div-n3: var(--rv-data-div-n3-on-light); --rv-data-div-n3-ink: var(--rv-data-div-n3-ink-on-light);
  --rv-data-div-n2: var(--rv-data-div-n2-on-light); --rv-data-div-n2-ink: var(--rv-data-div-n2-ink-on-light);
  --rv-data-div-n1: var(--rv-data-div-n1-on-light); --rv-data-div-n1-ink: var(--rv-data-div-n1-ink-on-light);
  --rv-data-div-0: var(--rv-data-div-0-on-light); --rv-data-div-0-ink: var(--rv-data-div-0-ink-on-light);
  --rv-data-div-p1: var(--rv-data-div-p1-on-light); --rv-data-div-p1-ink: var(--rv-data-div-p1-ink-on-light);
  --rv-data-div-p2: var(--rv-data-div-p2-on-light); --rv-data-div-p2-ink: var(--rv-data-div-p2-ink-on-light);
  --rv-data-div-p3: var(--rv-data-div-p3-on-light); --rv-data-div-p3-ink: var(--rv-data-div-p3-ink-on-light);
  --rv-data-seq-1: var(--rv-data-seq-1-on-light); --rv-data-seq-1-ink: var(--rv-data-seq-1-ink-on-light);
  --rv-data-seq-2: var(--rv-data-seq-2-on-light); --rv-data-seq-2-ink: var(--rv-data-seq-2-ink-on-light);
  --rv-data-seq-3: var(--rv-data-seq-3-on-light); --rv-data-seq-3-ink: var(--rv-data-seq-3-ink-on-light);
  --rv-data-seq-4: var(--rv-data-seq-4-on-light); --rv-data-seq-4-ink: var(--rv-data-seq-4-ink-on-light);
  --rv-data-seq-5: var(--rv-data-seq-5-on-light); --rv-data-seq-5-ink: var(--rv-data-seq-5-ink-on-light);
  --rv-data-seq-6: var(--rv-data-seq-6-on-light); --rv-data-seq-6-ink: var(--rv-data-seq-6-ink-on-light);
  --rv-data-good: var(--rv-data-good-on-light);
  --rv-data-bad: var(--rv-data-bad-on-light);
  --rvd-text: var(--rv-color-light-text);
  --rvd-text-2: var(--rv-color-light-text-secondary);
  --rvd-text-3: var(--rv-color-light-text-tertiary);
  --rvd-line: var(--rv-color-light-border);
  --rvd-line-strong: var(--rv-color-light-text-tertiary);
  --rvd-head: var(--rv-color-light-surface);
  --rvd-zebra: color-mix(in srgb, var(--rv-color-light-text) 4%, transparent);
  --rvd-track: color-mix(in srgb, var(--rv-color-light-text) 9%, transparent);
}
/* Evidence: o foco é o verde do produto, legível no fundo do tema. */
[data-rv-product="evidence"], [data-rv-product="evidence"] [data-rv-surface="dark"] { --rv-data-focus: var(--rv-profile-evidence-signal-on-dark); }
[data-rv-product="evidence"][data-rv-theme="light"], [data-rv-product="evidence"] [data-rv-theme="light"],
[data-rv-product="evidence"] .rvf-section--paper, [data-rv-product="evidence"] [data-rv-surface="light"] { --rv-data-focus: var(--rv-profile-evidence-signal); }

/* Série categórica: data-rvd-cat="1" a "6" em barra, sparkline, chave e amostra.
   data-rvd-cat="context" pinta de contexto; data-rvd-emphasis pinta de foco. */
[data-rvd-cat="1"] { --rvd-c: var(--rv-data-cat-1); }
[data-rvd-cat="2"] { --rvd-c: var(--rv-data-cat-2); }
[data-rvd-cat="3"] { --rvd-c: var(--rv-data-cat-3); }
[data-rvd-cat="4"] { --rvd-c: var(--rv-data-cat-4); }
[data-rvd-cat="5"] { --rvd-c: var(--rv-data-cat-5); }
[data-rvd-cat="6"] { --rvd-c: var(--rv-data-cat-6); }
[data-rvd-cat="context"] { --rvd-c: var(--rv-data-context); }
[data-rvd-emphasis] { --rvd-c: var(--rv-data-focus); }

/* ---------- Número grande com legenda e fonte ---------- */
.rvd-stat { display: grid; gap: var(--rv-space-2); margin: 0; color: var(--rvd-text); }
.rvd-stat-value { margin: 0; font: 600 var(--rv-data-stat-size)/1 var(--rv-font-sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums; }
.rvd-stat-unit { margin-inline-start: .08em; color: var(--rvd-text-2); font-size: calc(var(--rv-data-stat-size) * .5); font-weight: 500; letter-spacing: -.02em; }
.rvd-stat-label { max-inline-size: 28ch; margin: 0; color: var(--rvd-text-2); font-size: var(--rv-size-md); line-height: 1.5; }

/* Nota de fonte: vale para qualquer bloco de dado. */
.rvd-source { margin: var(--rv-space-2) 0 0; color: var(--rvd-text-3); font: 500 var(--rv-size-xs)/1.6 var(--rv-font-mono); letter-spacing: .02em; }
.rvd-source a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.rvd-note { margin: var(--rv-space-2) 0 0; color: var(--rvd-text-3); font-size: var(--rv-size-sm); line-height: 1.6; }

/* ---------- Cartão de métrica com variação ----------
   data-rvd-trend diz a direção (seta), data-rvd-tone diz se é bom ou ruim
   (cor). São independentes: custo que cai é down + good. O texto da variação
   sempre leva sinal e período ("+4 p.p. em 30 dias"); a seta é decorativa. */
.rvd-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--rv-space-6); margin: 0; padding: 0; list-style: none; }
.rvd-metric { display: grid; align-content: start; gap: var(--rv-space-2); padding-block-start: var(--rv-space-4); border-block-start: 1px solid var(--rvd-line); color: var(--rvd-text); }
.rvd-metric-label { margin: 0; color: var(--rvd-text-3); font: 600 var(--rv-size-xs)/1.5 var(--rv-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.rvd-metric-value { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; }
.rvd-delta { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: var(--rvd-text-2); font: 600 var(--rv-size-sm)/1.4 var(--rv-font-sans); font-variant-numeric: tabular-nums; }
.rvd-delta::before { flex: none; inline-size: .7rem; block-size: .7rem; background: currentColor; content: ""; }
.rvd-delta[data-rvd-trend="up"]::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rvd-delta[data-rvd-trend="down"]::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.rvd-delta[data-rvd-trend="flat"]::before { block-size: .2rem; border-radius: 1px; }
.rvd-delta[data-rvd-tone="good"] { color: var(--rv-data-good); }
.rvd-delta[data-rvd-tone="bad"] { color: var(--rv-data-bad); }
.rvd-delta[data-rvd-tone="neutral"] { color: var(--rvd-text-2); }

/* ---------- Barra horizontal com valor ----------
   data-rvd-pct="0" a "100" (inteiro, já relativo ao máximo da escala) define o
   comprimento; o valor exato vai impresso em .rvd-bar-value. Sem cor
   definida, a barra é de contexto (cinza); data-rvd-emphasis pinta a da
   história com a cor de foco, data-rvd-cat usa a série. */
.rvd-bars { display: grid; gap: var(--rv-space-3); margin: 0; padding: 0; list-style: none; }
.rvd-bar { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) minmax(3.5rem, auto); align-items: center; gap: var(--rv-space-3); color: var(--rvd-text); font-size: var(--rv-size-sm); }
.rvd-bar-label { color: var(--rvd-text-2); line-height: 1.35; }
.rvd-bar-track { position: relative; display: block; block-size: .75rem; border-radius: 2px; background: var(--rvd-track); }
.rvd-bar-fill { display: block; block-size: 100%; inline-size: var(--rvd-pct, 0%); border-radius: 2px; background: var(--rvd-c, var(--rv-data-context)); }
.rvd-bar-value { color: var(--rvd-text); font: 600 var(--rv-size-sm)/1 var(--rv-font-mono); text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) {
  .rvd-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--rv-space-1); }
  .rvd-bar-label { grid-column: 1 / -1; }
}

/* ---------- Sparkline ----------
   1) CSS puro, colunas: <span class="rvd-spark" role="img" aria-label="...">
      com um <i data-rvd-pct="N"></i> por ponto (N de 0 a 100). O último ponto
      ganha o destaque. Bom para até 24 pontos.
   2) SVG inline gerado no build, linha: sparklineSvg(valores, opções) em
      demo/sparkline.mjs devolve <svg class="rvd-spark-line" viewBox ...> com
      <path class="rvd-spark-path"> e <circle class="rvd-spark-dot"> no último
      ponto. Sem atributo style: a cor vem de data-rvd-cat ou do texto.
   Nos dois casos o valor atual vai impresso ao lado e a fonte embaixo. */
.rvd-spark { display: inline-flex; align-items: flex-end; gap: 2px; block-size: 2rem; inline-size: 7.5rem; vertical-align: middle; }
.rvd-spark > i { flex: 1 1 0; min-block-size: 2px; block-size: var(--rvd-pct, 0%); border-radius: 1px 1px 0 0; background: color-mix(in srgb, var(--rvd-c, var(--rv-data-context)) 55%, transparent); }
.rvd-spark > i:last-child { background: var(--rvd-c, var(--rv-data-focus)); }
.rvd-spark-line { display: inline-block; inline-size: 7.5rem; block-size: 2rem; overflow: visible; color: var(--rvd-c, var(--rv-data-focus)); vertical-align: middle; }
.rvd-spark-path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rvd-spark-base { fill: none; stroke: var(--rvd-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rvd-spark-dot { fill: currentColor; }
.rvd-spark-row { display: inline-flex; align-items: center; gap: var(--rv-space-3); color: var(--rvd-text); font: 600 var(--rv-size-sm)/1 var(--rv-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Tabela de dados ----------
   <div class="rvd-table-wrap" role="region" aria-labelledby="id-da-legenda" tabindex="0">
   rola com teclado; o cabeçalho fica fixo. data-rvd-zebra na tabela liga a
   zebra. Coluna numérica: class="rvd-num" no th e nos td (alinha à direita,
   algarismos tabulares). */
.rvd-table-wrap { max-block-size: var(--rv-data-table-max); overflow: auto; border-block: 1px solid var(--rvd-line); overscroll-behavior: contain; }
.rvd-table-wrap:focus-visible { outline: 2px solid var(--rv-data-focus); outline-offset: 2px; }
.rvd-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; color: var(--rvd-text); font-size: var(--rv-size-sm); line-height: 1.45; font-variant-numeric: tabular-nums; }
.rvd-table caption { padding: var(--rv-space-3) 0; color: var(--rvd-text-2); font-size: var(--rv-size-sm); font-weight: 600; text-align: start; caption-side: top; }
.rvd-table th, .rvd-table td { padding: .6rem .75rem; border-block-end: 1px solid var(--rvd-line); text-align: start; vertical-align: baseline; }
.rvd-table thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--rvd-head); color: var(--rvd-text-3); font: 600 var(--rv-size-xs)/1.4 var(--rv-font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--rvd-line-strong); }
.rvd-table tbody th { color: var(--rvd-text); font-weight: 600; }
.rvd-table[data-rvd-zebra] tbody tr:nth-child(even) > * { background: var(--rvd-zebra); }
.rvd-table .rvd-num { text-align: end; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.rvd-table tfoot td, .rvd-table tfoot th { border-block-end: 0; color: var(--rvd-text-2); font-weight: 600; }

/* ---------- Estado da evidência ----------
   Chip: class="rvd-state" data-rvd-state="observed|imported|derived|inferred|synthetic|unknown"
   com a palavra dentro (Observado, Importado, Derivado, Inferido, Sintético,
   Desconhecido). Marca solta para legenda ou gráfico: <i class="rvd-mark"
   data-rvd-state="..."></i> ao lado do rótulo. Forma primeiro, cor depois:
   observado cheio; derivado cheio com contorno; importado cheio com ponto;
   inferido só contorno; sintético hachura diagonal; desconhecido tracejado
   sem valor. A cor é a mesma para todos. */
.rvd-states { display: flex; flex-wrap: wrap; gap: var(--rv-space-2); margin: 0; padding: 0; list-style: none; }
.rvd-state { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 1.75rem; padding: .15rem .65rem; border: 1px solid var(--rvd-line-strong); border-radius: var(--rv-radius-pill); color: var(--rvd-text); font: 600 var(--rv-size-xs)/1.4 var(--rv-font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rvd-state::before { content: ""; }
.rvd-state::before, .rvd-mark { display: inline-block; flex: none; box-sizing: border-box; inline-size: .75rem; block-size: .75rem; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; vertical-align: middle; }
.rvd-state[data-rvd-state="observed"]::before, .rvd-mark[data-rvd-state="observed"] { background: currentColor; }
.rvd-state[data-rvd-state="derived"]::before, .rvd-mark[data-rvd-state="derived"] { background: currentColor; outline: 1.5px solid currentColor; outline-offset: 1.5px; }
.rvd-state[data-rvd-state="imported"]::before, .rvd-mark[data-rvd-state="imported"] { background: radial-gradient(circle, var(--rvd-head) 0 22%, currentColor 26%); }
.rvd-state[data-rvd-state="synthetic"]::before, .rvd-mark[data-rvd-state="synthetic"] { background: repeating-linear-gradient(45deg, currentColor 0 1.5px, transparent 1.5px 3.5px); }
.rvd-state[data-rvd-state="unknown"]::before, .rvd-mark[data-rvd-state="unknown"] { border-style: dashed; }
.rvd-state[data-rvd-state="synthetic"] { border-style: dashed; }
.rvd-state[data-rvd-state="unknown"] { color: var(--rvd-text-2); }

/* ---------- Legenda categórica: uma forma por série ---------- */
.rvd-legend { display: flex; flex-wrap: wrap; gap: var(--rv-space-2) var(--rv-space-6); margin: 0; padding: 0; color: var(--rvd-text-2); font-size: var(--rv-size-sm); list-style: none; }
.rvd-legend li { display: inline-flex; align-items: center; gap: .5rem; }
.rvd-key { display: inline-block; flex: none; inline-size: .8rem; block-size: .8rem; background: var(--rvd-c, var(--rvd-text-3)); }
.rvd-key[data-rvd-cat="1"] { border-radius: 50%; }
.rvd-key[data-rvd-cat="3"] { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rvd-key[data-rvd-cat="4"] { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rvd-key[data-rvd-cat="5"] { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.rvd-key[data-rvd-cat="6"] { clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.rvd-swatch { display: block; inline-size: 100%; block-size: 2.5rem; border-radius: var(--rv-radius-sm); background: var(--rvd-c, var(--rvd-text-3)); }

/* ---------- Escala divergente de 7 passos e sequencial de 6 ----------
   data-rvd-step="-3" a "3" numa célula .rvd-div, ou "1" a "6" numa .rvd-seq. A célula imprime o valor
   com sinal; o contorno separa os passos centrais do fundo. */
.rvd-div { background: var(--rvd-div-bg); color: var(--rvd-div-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rvd-line-strong) 45%, transparent); font-variant-numeric: tabular-nums; }
.rvd-div[data-rvd-step="-3"] { --rvd-div-bg: var(--rv-data-div-n3); --rvd-div-ink: var(--rv-data-div-n3-ink); }
.rvd-div[data-rvd-step="-2"] { --rvd-div-bg: var(--rv-data-div-n2); --rvd-div-ink: var(--rv-data-div-n2-ink); }
.rvd-div[data-rvd-step="-1"] { --rvd-div-bg: var(--rv-data-div-n1); --rvd-div-ink: var(--rv-data-div-n1-ink); }
.rvd-div[data-rvd-step="0"] { --rvd-div-bg: var(--rv-data-div-0); --rvd-div-ink: var(--rv-data-div-0-ink); }
.rvd-div[data-rvd-step="1"] { --rvd-div-bg: var(--rv-data-div-p1); --rvd-div-ink: var(--rv-data-div-p1-ink); }
.rvd-div[data-rvd-step="2"] { --rvd-div-bg: var(--rv-data-div-p2); --rvd-div-ink: var(--rv-data-div-p2-ink); }
.rvd-div[data-rvd-step="3"] { --rvd-div-bg: var(--rv-data-div-p3); --rvd-div-ink: var(--rv-data-div-p3-ink); }
.rvd-seq { background: var(--rvd-seq-bg); color: var(--rvd-seq-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rvd-line-strong) 45%, transparent); font-variant-numeric: tabular-nums; }
.rvd-seq[data-rvd-step="1"] { --rvd-seq-bg: var(--rv-data-seq-1); --rvd-seq-ink: var(--rv-data-seq-1-ink); }
.rvd-seq[data-rvd-step="2"] { --rvd-seq-bg: var(--rv-data-seq-2); --rvd-seq-ink: var(--rv-data-seq-2-ink); }
.rvd-seq[data-rvd-step="3"] { --rvd-seq-bg: var(--rv-data-seq-3); --rvd-seq-ink: var(--rv-data-seq-3-ink); }
.rvd-seq[data-rvd-step="4"] { --rvd-seq-bg: var(--rv-data-seq-4); --rvd-seq-ink: var(--rv-data-seq-4-ink); }
.rvd-seq[data-rvd-step="5"] { --rvd-seq-bg: var(--rv-data-seq-5); --rvd-seq-ink: var(--rv-data-seq-5-ink); }
.rvd-seq[data-rvd-step="6"] { --rvd-seq-bg: var(--rv-data-seq-6); --rvd-seq-ink: var(--rv-data-seq-6-ink); }
.rvd-div-scale { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.rvd-div-scale > li { display: grid; place-items: center; min-block-size: 2.25rem; padding: .25rem; font: 600 var(--rv-size-xs)/1.2 var(--rv-font-mono); text-align: center; }
.rvd-div-ends { display: flex; justify-content: space-between; gap: var(--rv-space-4); margin: var(--rv-space-2) 0 0; color: var(--rvd-text-2); font-size: var(--rv-size-xs); }

/* ---------- Escala de comprimento (data-rvd-pct, 0 a 100) ---------- */
[data-rvd-pct="0"]{--rvd-pct:0%}[data-rvd-pct="1"]{--rvd-pct:1%}[data-rvd-pct="2"]{--rvd-pct:2%}[data-rvd-pct="3"]{--rvd-pct:3%}[data-rvd-pct="4"]{--rvd-pct:4%}
[data-rvd-pct="5"]{--rvd-pct:5%}[data-rvd-pct="6"]{--rvd-pct:6%}[data-rvd-pct="7"]{--rvd-pct:7%}[data-rvd-pct="8"]{--rvd-pct:8%}[data-rvd-pct="9"]{--rvd-pct:9%}
[data-rvd-pct="10"]{--rvd-pct:10%}[data-rvd-pct="11"]{--rvd-pct:11%}[data-rvd-pct="12"]{--rvd-pct:12%}[data-rvd-pct="13"]{--rvd-pct:13%}[data-rvd-pct="14"]{--rvd-pct:14%}
[data-rvd-pct="15"]{--rvd-pct:15%}[data-rvd-pct="16"]{--rvd-pct:16%}[data-rvd-pct="17"]{--rvd-pct:17%}[data-rvd-pct="18"]{--rvd-pct:18%}[data-rvd-pct="19"]{--rvd-pct:19%}
[data-rvd-pct="20"]{--rvd-pct:20%}[data-rvd-pct="21"]{--rvd-pct:21%}[data-rvd-pct="22"]{--rvd-pct:22%}[data-rvd-pct="23"]{--rvd-pct:23%}[data-rvd-pct="24"]{--rvd-pct:24%}
[data-rvd-pct="25"]{--rvd-pct:25%}[data-rvd-pct="26"]{--rvd-pct:26%}[data-rvd-pct="27"]{--rvd-pct:27%}[data-rvd-pct="28"]{--rvd-pct:28%}[data-rvd-pct="29"]{--rvd-pct:29%}
[data-rvd-pct="30"]{--rvd-pct:30%}[data-rvd-pct="31"]{--rvd-pct:31%}[data-rvd-pct="32"]{--rvd-pct:32%}[data-rvd-pct="33"]{--rvd-pct:33%}[data-rvd-pct="34"]{--rvd-pct:34%}
[data-rvd-pct="35"]{--rvd-pct:35%}[data-rvd-pct="36"]{--rvd-pct:36%}[data-rvd-pct="37"]{--rvd-pct:37%}[data-rvd-pct="38"]{--rvd-pct:38%}[data-rvd-pct="39"]{--rvd-pct:39%}
[data-rvd-pct="40"]{--rvd-pct:40%}[data-rvd-pct="41"]{--rvd-pct:41%}[data-rvd-pct="42"]{--rvd-pct:42%}[data-rvd-pct="43"]{--rvd-pct:43%}[data-rvd-pct="44"]{--rvd-pct:44%}
[data-rvd-pct="45"]{--rvd-pct:45%}[data-rvd-pct="46"]{--rvd-pct:46%}[data-rvd-pct="47"]{--rvd-pct:47%}[data-rvd-pct="48"]{--rvd-pct:48%}[data-rvd-pct="49"]{--rvd-pct:49%}
[data-rvd-pct="50"]{--rvd-pct:50%}[data-rvd-pct="51"]{--rvd-pct:51%}[data-rvd-pct="52"]{--rvd-pct:52%}[data-rvd-pct="53"]{--rvd-pct:53%}[data-rvd-pct="54"]{--rvd-pct:54%}
[data-rvd-pct="55"]{--rvd-pct:55%}[data-rvd-pct="56"]{--rvd-pct:56%}[data-rvd-pct="57"]{--rvd-pct:57%}[data-rvd-pct="58"]{--rvd-pct:58%}[data-rvd-pct="59"]{--rvd-pct:59%}
[data-rvd-pct="60"]{--rvd-pct:60%}[data-rvd-pct="61"]{--rvd-pct:61%}[data-rvd-pct="62"]{--rvd-pct:62%}[data-rvd-pct="63"]{--rvd-pct:63%}[data-rvd-pct="64"]{--rvd-pct:64%}
[data-rvd-pct="65"]{--rvd-pct:65%}[data-rvd-pct="66"]{--rvd-pct:66%}[data-rvd-pct="67"]{--rvd-pct:67%}[data-rvd-pct="68"]{--rvd-pct:68%}[data-rvd-pct="69"]{--rvd-pct:69%}
[data-rvd-pct="70"]{--rvd-pct:70%}[data-rvd-pct="71"]{--rvd-pct:71%}[data-rvd-pct="72"]{--rvd-pct:72%}[data-rvd-pct="73"]{--rvd-pct:73%}[data-rvd-pct="74"]{--rvd-pct:74%}
[data-rvd-pct="75"]{--rvd-pct:75%}[data-rvd-pct="76"]{--rvd-pct:76%}[data-rvd-pct="77"]{--rvd-pct:77%}[data-rvd-pct="78"]{--rvd-pct:78%}[data-rvd-pct="79"]{--rvd-pct:79%}
[data-rvd-pct="80"]{--rvd-pct:80%}[data-rvd-pct="81"]{--rvd-pct:81%}[data-rvd-pct="82"]{--rvd-pct:82%}[data-rvd-pct="83"]{--rvd-pct:83%}[data-rvd-pct="84"]{--rvd-pct:84%}
[data-rvd-pct="85"]{--rvd-pct:85%}[data-rvd-pct="86"]{--rvd-pct:86%}[data-rvd-pct="87"]{--rvd-pct:87%}[data-rvd-pct="88"]{--rvd-pct:88%}[data-rvd-pct="89"]{--rvd-pct:89%}
[data-rvd-pct="90"]{--rvd-pct:90%}[data-rvd-pct="91"]{--rvd-pct:91%}[data-rvd-pct="92"]{--rvd-pct:92%}[data-rvd-pct="93"]{--rvd-pct:93%}[data-rvd-pct="94"]{--rvd-pct:94%}
[data-rvd-pct="95"]{--rvd-pct:95%}[data-rvd-pct="96"]{--rvd-pct:96%}[data-rvd-pct="97"]{--rvd-pct:97%}[data-rvd-pct="98"]{--rvd-pct:98%}[data-rvd-pct="99"]{--rvd-pct:99%}
[data-rvd-pct="100"]{--rvd-pct:100%}