/* Dashboard Setorial - Financials Brasil
   Tokens: pagina fria (leve tom azulado), chrome em navy institucional,
   paleta categorica por banco = paleta validada do skill de dataviz
   (ordem fixa, nunca reciclada por filtro). */

:root {
  color-scheme: light;
  --page-bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --ink: #12151c;
  --ink-secondary: #4b515c;
  --muted: #868c99;
  --border: rgba(18, 21, 28, 0.09);
  --border-strong: rgba(18, 21, 28, 0.16);
  --accent: #17325c;
  --accent-ink: #ffffff;
  --accent-soft: #e7ecf5;
  --accent-soft-ink: #17325c;
  --good: #0ca30c;
  --critical: #d03b3b;
  /* Variantes "vivas" - uso restrito as celulas de Δ QoQ/Δ YoY da tabela
     comparativa (item 4.2, ciclo 2026-07); --good/--critical acima seguem
     usadas em todo o resto do dashboard (stat-delta, DRE etc), sem mudanca.
     --good-strong ajustado (item 2, ciclo 2026-07-2): o verde original
     (#0c8f37, L~30% OKLCH) lia "muito escuro" contra o fundo branco da
     tabela. Novo tom sobe L pra ~35% e mantem croma alta (mais vivido),
     contraste 3.65:1 vs --surface / 3.43:1 vs --surface-2 (abaixo do 4.5:1
     de texto normal AA, mas o pedido era so "razoavel" pra texto em negrito
     - trade-off deliberado: mais claro/vivido custa um pouco de contraste
     bruto contra branco, e o negrito da celula compensa parte disso).
     --critical-strong nao mudou: ja tem contraste alto (5.6:1) e o par
     nao ficou desbalanceado (vermelho denso vs verde vivido e uma
     assimetria normal de luminancia entre matizes quente/frio, nao uma
     falha de vivacidade). */
  --good-strong: #189a4a;
  --critical-strong: #cc1636;
  --grid: #e1e0d9;
  --axis: #c3c2b7;

  /* Paleta categorica por banco (item 8, ciclo 2026-07; revisada item 6,
     ciclo 2026-07-2) - cores de marca, validada com scripts/validate_palette.js
     do skill dataviz (light, surface #ffffff): todos os checks PASS (2 WARN
     de contraste, legais porque toda serie ja tem legenda com rotulo direto
     + par tabela). Mudancas do ciclo 2026-07-2:
       - Banco do Brasil (--series-3): amarelo puxado mais pro dourado/hue
         ~100° OKLab (era ~92°) e mais claro, pra ficar visivelmente mais
         "amarelo vivo" e menos parecido com o laranja do Itau. ΔE normal
         (nao-adjacente, so calculo direto - nao e o par exigido pelo
         validador) Itau↔BB sobe de 7.5 para 10.2; sob simulacao de
         deuteranopia esse par especifico continua baixo (~3), mas Itau e BB
         NAO sao adjacentes em ORDEM_BANCOS (Bradesco fica entre eles), entao
         nao entram no check de pares adjacentes que o skill de fato exige
         pra grafico de linha/barra - reportado no handoff como nuance de
         design, nao como falha do validador.
       - Bradesco (--series-2) e Banco Inter (--series-7) trocaram de cor
         entre si: Bradesco assume o rosa/magenta que era do Inter (mais
         distinto do vinho do Santander); Inter assume o vermelho-claro que
         era do Bradesco (ja desenhado pra ser distinto do Santander, serve
         igualmente bem aqui). Decisao da Persona 3 - o pedido do usuario so
         cobria o destino do Bradesco. */
  --series-1: #e89440; /* Itau Unibanco - laranja */
  --series-2: #d6538a; /* Bradesco - rosa/magenta (trocou com o Inter) */
  --series-3: #f4d700; /* Banco do Brasil - amarelo/dourado vivo */
  --series-4: #8f1e3d; /* Santander Brasil - vermelho vinho (escuro/saturado) */
  --series-5: #4a93d6; /* BTG Pactual - azul claro */
  --series-6: #8a3fd1; /* Nubank (Nu Pagamentos) - roxo */
  --series-7: #c9424c; /* SEM USO - era o Banco Inter, removido do dataset em
                           2026-07-27. Mantida sem reatribuir (nao pedido) -
                           ver bankColorVar em app.js: o mapeamento agora e
                           NOME->slot fixo, nao mais indice no array BANKS,
                           entao nenhum banco herda essa cor silenciosamente
                           se a lista mudar de novo no futuro. */
  --series-8: #2b5aa0; /* Caixa Economica Federal - azul escuro (fixo por
                           nome - nao se desloca mesmo com a saida do Inter) */

  /* Rampa SEQUENCIAL para o recorte "Por porte prudencial (S1-S5)" da aba
     SCR (item 3 do spec-dashboard.md, ciclo 2026-07-27) - pedido explicito
     da Persona 2: hue UNICO, ordinal, S1 (maior porte/mais "forte") na ponta
     mais saturada/escura, S5 (menor porte) na ponta mais clara. Nao reusa
     --series-N: essas variaveis agora sao semanticamente "cor do banco X"
     (mapeamento fixo por nome, ver app.js) - misturar as duas rampas na
     mesma legenda confundiria "identidade de banco" com "magnitude de
     porte". Hue navy proprio (~211-213deg), na familia do --accent
     institucional, distinto o bastante do azul-claro do BTG (--series-5) e
     do azul-escuro da Caixa (--series-8) para nao ler como "esse e o BTG/a
     Caixa" num grafico que nao e sobre bancos individuais.
     Contraste vs. superficie (regra "ordinal" do skill dataviz - a ponta
     mais clara/fraca ainda precisa >= 2:1 pra ficar visivel como linha):
     light S1 13.3:1 -> S5 2.06:1 (exatamente no piso, step mais claro
     ainda legivel); dark S1 3.0:1 -> S5 9.1:1 (invertido de proposito - no
     fundo escuro a ponta "forte" precisa de luminancia MAIOR pra continuar
     se destacando, nao menor). */
  --seq-porte-1: #123054; /* S1 - maior porte, mais saturado/escuro */
  --seq-porte-2: #214e83;
  --seq-porte-3: #3571b1;
  --seq-porte-4: #6094c7;
  --seq-porte-5: #98b8d7; /* S5 - menor porte, mais claro/fraco */

  /* ================================================================
     Aba "Dados Credito (SFN)" (ciclo 2026-09-03) - tokens PROPRIOS.
     Nao reusa --series-N: aquelas variaveis sao identidade de BANCO
     (mapeamento fixo por nome, ver bankColorVar em app.js) e esta aba
     nao tem uma unica serie por banco - e sistemica. Pintar uma
     modalidade de credito com a cor do Itau faria o leitor ler
     "essa linha e o Itau" num grafico que nao e sobre bancos.

     (a) --cred-1..5: paleta CATEGORICA (dimensoes NOMINais: recorte
     agregado, linha de credito, modalidade). Cinco slots, nao oito, de
     proposito: nenhum grafico da aba mostra mais de 5 series ao mesmo
     tempo - os recortes com mais linhas (13 no livre PF, 10 no livre PJ,
     12 nas concessoes PF) foram quebrados em grupos por pill em vez de
     virar um 6o/7o hue gerado, que e o que a regra da paleta proibe.
     Validada com scripts/validate_palette.js do skill dataviz nos DOIS
     modos, pairlist "adjacent" (a lista certa para linha/barra):
       light (surface #ffffff): TODOS PASS - pior par adjacente CVD
         deltaE 12.7 (protan), visao normal 23.6, contraste >= 3:1.
       dark  (surface #15181e): TODOS PASS - pior par adjacente CVD
         deltaE 12.7 (deutan), visao normal 24.3, contraste >= 3:1.
     Sob --pairs all (5 series simultaneas) o par teal<->magenta cai
     para deltaE 2.2 em deuteranopia - limitacao que a propria paleta de
     referencia do skill declara (nenhuma ordenacao de 5 slots passa
     all-pairs). A codificacao secundaria exigida existe em toda a aba:
     legenda sempre presente com rotulo, spotlight de isolamento por
     clique, e par tabela em todo card (botao "Ver tabela").
     Hues escolhidos fora do centro da paleta de bancos (laranja/rosa/
     amarelo/vinho/azul/roxo): verde-azulado, terracota, indigo, oliva e
     magenta escuro - familia visivelmente mais terrosa/fria.

     (b) Aliases semanticos do recorte agregado. Total/PF/PJ/livre/
     direcionado aparecem em 4 paineis diferentes (P1, P2, P6, P7) e
     precisam da MESMA cor em todos - por isso alias fixo, nao "slot i
     do laco". Aliases resolvem em tempo de uso, entao acompanham
     sozinhos a redefinicao de --cred-N no dark.

     (c) --cred-ctrl-*: controle de capital (publica / privada nacional /
     estrangeira). Token dedicado, e nao um slot da paleta categorica,
     porque a dimensao reaparece em 4 cards do painel 5 (crescimento,
     inadimplencia, market share, provisao) - e identidade recorrente,
     como o banco e nas outras abas. Validada com --pairs all (so 3
     series): light TODOS PASS (pior par CVD 8.3 deutan, visao normal
     17.2); dark TODOS PASS (pior par CVD 9.5 protan, visao normal 17.9).

     (d) --seq-porte-emp-*: porte da EMPRESA TOMADORA (MPMe / Grande),
     rampa ORDINAL de 2 passos num hue proprio (bronze). Nao reusa
     --seq-porte-* (que e porte PRUDENCIAL da instituicao, S1-S5, na aba
     SCR): sao duas dimensoes diferentes que por acaso se chamam "porte",
     e hue distinto e o que impede o leitor de ler uma como a outra.
     Direcao da rampa igual a do precedente - indice 1 = MAIOR porte =
     mais escuro no light - justamente para as duas rampas de "porte" do
     dashboard nao apontarem para lados opostos. Validada com --ordinal:
     light TODOS PASS (ponta clara #d9a441 em 2.25:1, acima do piso 2:1
     do skill); dark TODOS PASS (ponta fraca #8a5c14 em 3.07:1). A
     inversao de qual ponta e a "forte" entre light e dark e deliberada,
     mesma logica ja documentada em --seq-porte-*.

     (e) --cred-ref: cinza-ardosia NEUTRO para marcas de REFERENCIA, que
     nao sao uma categoria (media historica do mes no painel de
     sazonalidade, serie descontinuada, agregado do sistema). Neutro de
     proposito: dar hue a uma referencia a promove a categoria e ela
     passa a competir com o dado. Contraste 3.71:1 no light / 6.84:1 no
     dark - recessivo, mas nunca invisivel. */
  --cred-1: #00897b; /* verde-azulado */
  --cred-2: #bf5520; /* terracota */
  --cred-3: #4f3bb0; /* indigo */
  --cred-4: #7c8f00; /* oliva */
  --cred-5: #b23a72; /* magenta escuro */
  --cred-total: var(--cred-1);
  --cred-pf: var(--cred-2);
  --cred-pj: var(--cred-3);
  --cred-livre: var(--cred-4);
  --cred-direc: var(--cred-5);
  --cred-ctrl-pub: #2b6fb0;  /* instituicoes publicas */
  --cred-ctrl-priv: #a85a10; /* privadas nacionais */
  --cred-ctrl-estr: #0e8a5f; /* estrangeiras */
  --seq-porte-emp-1: #7a4e08; /* Grande - maior porte, mais escuro */
  --seq-porte-emp-2: #d9a441; /* MPMe - menor porte, mais claro */
  --cred-ref: #7e8593;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page-bg: #0c0e12;
    --surface: #15181e;
    --surface-2: #1b1f27;
    --ink: #f2f3f5;
    --ink-secondary: #c3c2b7;
    --muted: #898f9c;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --accent: #24406e;
    --accent-ink: #ffffff;
    --accent-soft: #1e2a3f;
    --accent-soft-ink: #9fb6db;
    --good: #0ca30c;
    --critical: #e66767;
    --good-strong: #2fd06a;
    --critical-strong: #ff6b6b;
    --grid: #2c2c2a;
    --axis: #383835;

    /* Mesma paleta de marca do light, reajustada pro banda OKLCH de dark
       (L 0.48-0.67) e validada de novo contra a surface escura (#15181e) -
       todos os checks PASS (2 WARN de contraste, mesma justificativa).
       BB mais dourado/vivo e troca Bradesco<->Inter: mesma logica do bloco
       light acima (item 6, ciclo 2026-07-2). */
    --series-1: #d17c26; /* Itau Unibanco - laranja */
    --series-2: #d6538a; /* Bradesco - rosa/magenta (trocou com o Inter) */
    --series-3: #decc02; /* Banco do Brasil - amarelo/dourado vivo */
    --series-4: #a52a45; /* Santander Brasil - vermelho vinho */
    --series-5: #4a93d6; /* BTG Pactual - azul claro */
    --series-6: #9550dd; /* Nubank (Nu Pagamentos) - roxo */
    --series-7: #bf3542; /* SEM USO - era o Banco Inter (ver nota no bloco :root) */
    --series-8: #255fb0; /* Caixa Economica Federal - azul escuro (fixo por nome) */

    --seq-porte-1: #2264b4; /* S1 */
    --seq-porte-2: #2e7ad1;
    --seq-porte-3: #5692d2;
    --seq-porte-4: #7ba8d5;
    --seq-porte-5: #9ebddb; /* S5 */

    /* Aba "Dados Credito (SFN)" - mesmos hues do light, re-passo para a
       banda OKLCH de dark (L 0.48-0.67) e revalidados contra #15181e.
       Ver o bloco :root para os numeros de cada check. */
    --cred-1: #17a695;
    --cred-2: #d97036;
    --cred-3: #8b7ae8;
    --cred-4: #879b0d;
    --cred-5: #d45a90;
    --cred-ctrl-pub: #4a94d8;
    --cred-ctrl-priv: #c58324;
    --cred-ctrl-estr: #1aa876;
    --seq-porte-emp-1: #8a5c14; /* Grande */
    --seq-porte-emp-2: #e0a951; /* MPMe */
    --cred-ref: #9aa1ae;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #0c0e12;
  --surface: #15181e;
  --surface-2: #1b1f27;
  --ink: #f2f3f5;
  --ink-secondary: #c3c2b7;
  --muted: #898f9c;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --accent: #24406e;
  --accent-ink: #ffffff;
  --accent-soft: #1e2a3f;
  --accent-soft-ink: #9fb6db;
  --good: #0ca30c;
  --critical: #e66767;
  --good-strong: #2fd06a;
  --critical-strong: #ff6b6b;
  --grid: #2c2c2a;
  --axis: #383835;

  --series-1: #d17c26;
  --series-2: #d6538a;
  --series-3: #a49600;
  --series-4: #a52a45;
  --series-5: #4a93d6;
  --series-6: #9550dd;
  --series-7: #bf3542;
  --series-8: #255fb0;

  --seq-porte-1: #2264b4;
  --seq-porte-2: #2e7ad1;
  --seq-porte-3: #5692d2;
  --seq-porte-4: #7ba8d5;
  --seq-porte-5: #9ebddb;

  /* Aba "Dados Credito (SFN)" - ver bloco :root e o @media acima. */
  --cred-1: #17a695;
  --cred-2: #d97036;
  --cred-3: #8b7ae8;
  --cred-4: #879b0d;
  --cred-5: #d45a90;
  --cred-ctrl-pub: #4a94d8;
  --cred-ctrl-priv: #c58324;
  --cred-ctrl-estr: #1aa876;
  --seq-porte-emp-1: #8a5c14;
  --seq-porte-emp-2: #e0a951;
  --cred-ref: #9aa1ae;
}
:root[data-theme="light"] {
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Header ---------- */
.topbar {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 14px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-title { display: flex; align-items: baseline; gap: 10px; }
.topbar-title h1 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: 0.01em; }
.topbar-title span { font-size: 12px; color: rgba(255,255,255,0.68); }
.topbar-meta { font-size: 12px; color: rgba(255,255,255,0.78); display: flex; gap: 14px; align-items: center; }
.badge {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 26px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 13px 2px;
  cursor: pointer;
}
.tab-btn:hover { color: var(--ink-secondary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
:root[data-theme="dark"] .tab-btn.active,
@media (prefers-color-scheme: dark) { .tab-btn.active { color: #7fa6de; border-bottom-color: #7fa6de; } }

/* ---------- Layout ---------- */
.view { display: none; padding: 18px 24px 40px; max-width: 1440px; margin: 0 auto; width: 100%; }
.view.active { display: block; }

.controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.controls-row .field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 100px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.pill:hover { border-color: var(--accent); }
.pill.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Filtro de bancos (item 7, ciclo 2026-07; modelo invertido no item 4,
   ciclo 2026-07-2) - "isolamento aditivo": selecao vazia = TODOS aparecem
   (estado default, nenhum chip clicado); clicar isola so aquele banco
   (acumula em cliques seguintes); declicar o ultimo volta pra selecao
   vazia = todos de novo. "off" = fora da selecao ATIVA (so existe quando a
   selecao nao esta vazia - com selecao vazia nenhum chip fica "off").
   "picked" = chip clicado dentro de uma selecao ativa (destaque, pra
   diferenciar "isolado explicitamente" de "aparecendo por default"). */
.bank-chip {
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 100px;
  padding: 6px 12px 6px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.bank-chip:hover { border-color: var(--accent); }
.bank-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bank-chip.off { opacity: 0.42; }
.bank-chip.off .bank-chip-dot { opacity: 0.6; }
.bank-chip.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); background: var(--accent-soft); }

/* Botao "Limpar selecao" (item 5, ciclo 2026-07-2) - discreto, ao lado dos
   chips; desabilitado quando ja nao ha nada pra limpar (selecao vazia). */
.bank-filter-clear {
  appearance: none;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 4px 2px;
  white-space: nowrap;
}
.bank-filter-clear:hover:not(:disabled) { color: var(--accent); }
.bank-filter-clear:disabled { opacity: 0.4; cursor: default; text-decoration: none; }

.select {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23868c99'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 7px 30px 7px 12px;
  cursor: pointer;
  min-width: 200px;
}

.spacer { flex: 1 1 auto; }

/* ---------- Cards & grid ---------- */
.section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 22px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-strong);
}
:root[data-theme="dark"] .section-title { color: #7fa6de; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .section-title { color: #7fa6de; } }

/* Graficos: exatamente 2 por linha em telas largas (mais area por grafico,
   melhor leitura), 1 por linha quando estreito (regra no @media abaixo). */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 12px;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 8px;
}
.card-title { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.card-sub { font-size: 11px; color: var(--muted); margin-top: -2px; margin-bottom: 8px; }
.table-toggle {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
}
.table-toggle:hover { color: var(--ink-secondary); border-color: var(--accent); }

/* ---------- Stat tiles ---------- */
.stat-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-delta { font-size: 12px; font-weight: 600; margin-top: 3px; }
.stat-delta.up { color: var(--good); }
.stat-delta.down { color: var(--critical); }
.stat-delta.flat { color: var(--muted); }
/* Badge "i" - so aparece quando o tile tem PTAX/USD ou observacoes pra
   mostrar no hover (camada reportada, spec painel 6); invisivel nos demais
   tiles pra nao sugerir uma affordance que nao existe. */
.stat-tile.has-note { cursor: help; }
.stat-tile.has-note::after {
  content: "i";
  position: absolute; top: 10px; right: 12px;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 10px; font-weight: 700; font-style: italic; font-family: Georgia, "Times New Roman", serif;
  display: flex; align-items: center; justify-content: center;
}
/* Mensagem no lugar dos 3 tiles reportados quando o banco nao tem camada
   reportada (Caixa) - nunca um espaco vazio ou celula zerada (spec Caixa). */
.reportado-ausente {
  grid-column: 1 / -1;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Aba "Dados Credito (SFN)" ---------- */
/* Chip de proveniencia no cabecalho da aba. A aba SCR e esta tem, as duas,
   "inadimplencia por modalidade" com metodologias diferentes (trimestral
   SCR.data por porte prudencial vs. mensal sistemica do SGS) - a diferenca
   precisa ser obvia na primeira olhada, nao so no rodape. */
.source-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: var(--accent-soft-ink);
  border-radius: 100px; padding: 5px 12px;
  font-size: 11.5px; font-weight: 600;
}
/* Marca de mes PRELIMINAR. O BCB revisa a ultima competencia
   materialmente (a Itau BBA mostra o "+30 bps do mes" virando +20 bps
   depois de junho ser revisado 10 bps para baixo). A marca fica NO
   painel - tag ao lado do titulo/valor, ponto vazado e ultimo segmento
   tracejado no grafico, e nota no tooltip daquele mes. */
.prelim-tag {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px dashed var(--border-strong); border-radius: 100px;
  padding: 1px 8px; margin-left: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-secondary); white-space: nowrap; cursor: help;
  vertical-align: middle;
}
.prelim-tag::before { content: "*"; font-size: 13px; line-height: 0.6; }
/* Controles dentro do card (janela da serie longa, seletor de grupo de
   modalidades) - moram no card e nao na controls-row da aba porque so
   valem para aquele card. Ficam em LINHA PROPRIA, abaixo do subtitulo e
   acima do grafico, e nao no .card-head: alguns cards tem 5 pills, e no
   head elas disputariam largura com o titulo em maiuscula e com o botao
   "Ver tabela" num card de meia tela. */
.card-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0 0 10px; }
.pill-mini {
  appearance: none;
  border: 1px solid var(--border-strong); background: none;
  color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 100px; padding: 3px 9px; cursor: pointer; white-space: nowrap;
}
.pill-mini:hover { color: var(--ink-secondary); border-color: var(--accent); }
.pill-mini.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* Nota metodologica do card (efeito de denominador do rotativo, BNDES
   dentro do bloco publico, serie derivada, vintage defasado...). Sempre
   VISIVEL, nunca so no tooltip - sao ressalvas que mudam a leitura do
   numero, e o leitor tem de ve-las sem passar o mouse. */
.card-note {
  font-size: 10.5px; line-height: 1.5; color: var(--muted);
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.card-note strong { color: var(--ink-secondary); }
/* KPI tile com DOIS deltas (MoM e YoY), a convencao das 5 Casas que
   publicam a tabela do mes. O .stat-delta original mostra um so. */
.stat-deltas { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; }
.stat-deltas .stat-delta { margin-top: 0; display: flex; align-items: baseline; gap: 4px; }
.stat-deltas .delta-when {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--muted);
}
/* Cabecalho de grupo do scorecard (saldo / inadimplencia / spread) -
   segunda linha de thead, tom mais escuro pra separar do cabecalho de
   coluna sem virar mais uma cor. */
table.data-table thead th.group-head {
  background: var(--accent); border-left: 2px solid var(--surface);
  text-align: center;
}
table.data-table td.group-start, table.data-table thead th.group-start { border-left: 2px solid var(--border-strong); }

/* ---------- Legend ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-secondary); cursor: pointer;
  padding: 2px 4px; border-radius: 4px; user-select: none;
}
.legend-item:hover { background: var(--surface-2); }
/* Spotlight (item 6, ciclo 2026-07): .dim = item fora de foco (opacidade
   reduzida, NUNCA display:none - a linha/barra correspondente tambem so
   perde opacidade, continua no DOM). .focused = item clicado, sem opacidade
   reduzida + leve realce pra confirmar o que esta em destaque. */
.legend-item.dim { opacity: 0.35; }
.legend-item.focused { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.legend-swatch { width: 12px; height: 2.5px; border-radius: 2px; flex: none; }
.legend-swatch-line { flex: none; display: block; }
/* Legenda "sem dado" (ex: Caixa na lente Reportado / overlay reportado) -
   caixa tracejada esmaecida em vez de linha solida, pra nunca ler como uma
   serie normal escondida; hover explica o motivo via tooltip. */
.legend-swatch-muted {
  width: 12px; height: 8px; border-radius: 2px; flex: none;
  border: 1.5px dashed currentColor; opacity: 0.7;
}
.legend-item.muted { opacity: 0.6; cursor: help; }
.legend-item.muted:hover { opacity: 0.85; }

/* ---------- SVG chart chrome ---------- */
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axis-line { stroke: var(--axis); stroke-width: 1; }
.chart-svg .tick-label { fill: var(--muted); font-size: 10.5px; font-family: inherit; }
.chart-svg .series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .series-area { opacity: 0.10; }
.chart-svg .end-label { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-svg .marker { stroke: var(--surface); stroke-width: 2; }
.chart-svg .crosshair { stroke: var(--border-strong); stroke-width: 1; pointer-events: none; }
.chart-svg > g { transition: opacity 0.12s ease; }
/* Regua vertical de QUEBRA METODOLOGICA (opcao vRules do renderLineChart,
   ciclo 2026-09-03). Usada onde duas series medem a mesma ideia com
   definicoes diferentes e por isso NAO podem virar uma linha continua -
   hoje 2770x (metodologia anterior) vs 2958x (Res. 4.966) em jan/2025.
   Tracejada e em --axis de proposito: e cromo de eixo, nao dado. */
.chart-svg .break-rule { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.chart-svg .break-label { fill: var(--muted); font-size: 9.5px; font-weight: 700; font-family: inherit; }

.chart-hit { fill: transparent; cursor: crosshair; }

.tooltip {
  /* fixed (nao absolute): as coords do mouse (clientX/clientY) sao
     relativas a viewport; com absolute + pagina rolada o tooltip ia
     parar la em cima. fixed casa com o sistema de coords do mouse. */
  position: fixed;
  pointer-events: none;
  background: var(--ink);
  color: var(--page-bg);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  z-index: 20;
  opacity: 0;
  transition: opacity 0.08s ease;
  min-width: 130px;
}
:root[data-theme="dark"] .tooltip { background: #f2f3f5; color: #12151c; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .tooltip { background: #f2f3f5; color: #12151c; } }
.tooltip.show { opacity: 1; }
.tooltip-date { font-weight: 700; margin-bottom: 4px; opacity: 0.85; }
.tooltip-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tooltip-row + .tooltip-row { margin-top: 2px; }
.tooltip-key { display: flex; align-items: center; gap: 5px; opacity: 0.9; }
.tooltip-line { width: 10px; height: 2px; border-radius: 2px; flex: none; }
.tooltip-val { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 10px; }
/* Linhas extra da camada reportada: valor original em USD + PTAX (factual,
   opacidade reduzida) e observacoes (proveniencia do ponto, em italico) -
   spec painel 6. */
.tooltip-extra { font-size: 10.5px; opacity: 0.75; margin-top: 3px; }
.tooltip-note { font-size: 10.5px; font-style: italic; opacity: 0.75; margin-top: 3px; max-width: 240px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.data-table th, table.data-table td {
  padding: 8px 12px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
}
table.data-table th:first-child, table.data-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface);
  font-variant-numeric: normal;
}
table.data-table thead th {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: none;
}
table.data-table thead th:first-child { background: var(--accent); }
table.data-table tbody tr:hover td { background: var(--surface-2); }
table.data-table td.bank-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
table.data-table .val-pos { color: var(--good); }
table.data-table .val-neg { color: var(--critical); }
/* Celula "-" com motivo explicito no title (hover nativo) - camada
   reportada indisponivel para a Caixa na tabela comparativa (spec Caixa). */
table.data-table .cell-note { text-decoration: underline dotted var(--muted); cursor: help; }
/* Δ QoQ / Δ YoY (item 4.2, ciclo 2026-07): negrito + variante "viva" de
   --good/--critical - as cores padrao liam "apagadas" nessas duas colunas
   especificamente; o resto da tabela (val-pos/val-neg) nao muda. */
table.data-table .delta-cell { font-weight: 700; }
table.data-table .delta-cell.val-pos { color: var(--good-strong); }
table.data-table .delta-cell.val-neg { color: var(--critical-strong); }

.hidden { display: none !important; }

/* ---------- KPI row on individual view ---------- */
.company-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.company-header .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.company-header h2 { font-size: 18px; margin: 0; }
.company-header .cod { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.footnote { font-size: 11px; color: var(--muted); margin-top: 18px; line-height: 1.6; padding-top: 12px; border-top: 1px solid var(--border); }
.footnote strong { color: var(--ink-secondary); }

/* Estado de erro do carregamento de data.json (ciclo 2026-09-03). Usa
   --critical, ja definido nos dois temas - nao introduz token novo. */
.data-error {
  margin: 18px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--critical);
  border-left: 4px solid var(--critical);
  border-radius: 10px;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.data-error strong { color: var(--critical); display: block; margin-bottom: 6px; font-size: 14px; }
.data-error p { margin: 6px 0 0; }
.data-error code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}
.data-error-hint { color: var(--muted); font-size: 12px; }

/* Graficos empilham (1 coluna) antes de ficarem estreitos demais */
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
  .topbar { padding: 12px 16px; }
  .view { padding: 14px 12px 32px; }
}