/*
 * indicex — componentes (docs/engenharia-reversa/08 §10.6), prefixo .c-*.
 * As seções abaixo são preenchidas pelos prompts que criam cada componente.
 */

/* ---------- Texto corrido e páginas simples (P00) ---------- */
.texto { max-width: 72ch; }
.destaque__proposito { font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--text-muted); max-width: 72ch; }
.pendente {
  color: var(--warning);
  font-weight: var(--fw-semibold);
}
.pendente {
  padding: 0 var(--sp-1);
  border: 1px dashed currentColor;
  border-radius: var(--r-sm);
}

/* ---------- 1. Cabeçalho + menu (gaveta mobile) ---------- */
/* ---------- 2. Busca com autocomplete ---------- */

/* ---------- 3. Breadcrumb ---------- */
.c-trilha ol { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-4); padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-muted); }
.c-trilha li + li::before { content: "›"; margin-right: var(--sp-1); color: var(--border-strong); }
.c-trilha a { color: var(--text-muted); }
/* No celular, só o nível anterior e o atual */
@media (max-width: 767px) {
  .c-trilha li:not(:nth-last-child(-n+2)) { display: none; }
  .c-trilha li:nth-last-child(2)::before { content: none; }
}

/* ---------- 4. Card de indicador (.c-card) ---------- */
.c-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (min-width: 768px) { .c-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .c-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .c-cards--destaque { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.c-card {
  position: relative;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-painel);
  min-height: 7rem;
}
.c-card__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.c-card__sigla { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.c-card__valor { margin: var(--sp-1) 0; font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-bold); }
.c-card__valor--vazio { color: var(--text-muted); }
.c-card__nota, .c-card__mediana { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.c-card__selo { display: inline-block; margin: var(--sp-1) 0 0; padding: 0 var(--sp-1); font-size: var(--fs-xs); color: var(--warning); border: 1px solid currentColor; border-radius: var(--r-sm); }
.c-card--defasado { border-color: var(--warning); }
.c-card--bloqueado { background: var(--surface-2); }

/* ---------- 5. Popover de definição ---------- */
.c-ajuda {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; flex: none;
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--primary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  cursor: pointer;
}
.c-ajuda::after { content: ""; position: absolute; inset: -10px; } /* área de toque de 44 px */
.c-popover {
  position: absolute; z-index: 20; left: var(--sp-2); right: var(--sp-2); top: 2.5rem;
  min-width: 14rem;
  padding: var(--sp-3); background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.c-popover p { margin-bottom: var(--sp-2); }
@media (max-width: 479px) {
  .c-popover { position: fixed; left: 0; right: 0; top: auto; bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
}

/* ---------- 6. Badge de variação (.c-badge) ---------- */
.c-badge { display: inline-block; padding: 0 var(--sp-2); border-radius: var(--r-pill); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.c-badge--alta { color: var(--positive); background: var(--positive-bg); }
.c-badge--queda { color: var(--negative); background: var(--negative-bg); }
.c-badge--estavel { color: var(--text-muted); background: var(--surface-2); }

/* ---------- 7. Tabela de dados (.c-tabela) ---------- */
.c-tabela {
  overflow-x: auto; margin-bottom: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-painel);
  /* sombras indicando que há rolagem horizontal */
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.12), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.12), transparent) right / 0.75rem 100% no-repeat scroll;
  background-color: var(--surface);
}
.c-tabela table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.c-tabela caption { padding: var(--sp-3) var(--sp-4); text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); border-bottom: 1px solid var(--border); }
.c-tabela th, .c-tabela td { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); text-align: left; white-space: nowrap; }
.c-tabela thead th { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); font-weight: var(--fw-semibold); letter-spacing: 0.02em; vertical-align: middle; background: var(--surface-2); }
.c-tabela tbody th { font-weight: var(--fw-medium); background: var(--surface); }
.c-tabela th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.c-tabela thead th:first-child { background: var(--surface-2); }
.c-tabela .c-tabela__num { text-align: right; }
.c-tabela--estreita { max-width: 32rem; }
.c-tabela__ordenar {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; padding: 0;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.c-tabela [aria-sort] .c-tabela__ordenar { color: var(--text); font-weight: var(--fw-semibold); }
.c-tabela__seta { font-size: 0.7em; }
.c-paginacao ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; padding: 0; list-style: none; }
.c-paginacao a, .c-paginacao span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--sp-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
}
.c-paginacao [aria-current="page"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* ---------- 8. Seletor de período ---------- */

/* ---------- 9. Gráfico (altura reservada) ---------- */
.c-grafico { margin: 0 0 var(--sp-5); }
.c-grafico__titulo { margin-bottom: var(--sp-2); font-weight: var(--fw-semibold); }
.c-grafico__area { width: 100%; aspect-ratio: 640 / 260; }
.c-grafico__area:has(.g-svg--dist) { aspect-ratio: 640 / 72; }
.c-grafico__area--serie { aspect-ratio: auto; height: 240px; background: var(--surface-2); border-radius: var(--r-md); }
.c-grafico__area--serie.pronto { background: none; }
@media (min-width: 768px) { .c-grafico__area--serie { height: 280px; } }
.c-grafico__resumo { margin: var(--sp-2) 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); }
.c-grafico__dados summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primary); }
.c-grafico__dados .c-tabela { max-height: 20rem; overflow-y: auto; }
.g-svg { width: 100%; height: auto; overflow: visible; }
.g-grade line { stroke: var(--border); stroke-width: 1; }
.g-grade .g-grade--x { stroke-dasharray: 2 4; }
.g-rotulo { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.g-rotulo--y { text-anchor: end; }
.g-rotulo--x, .g-rotulo--mediana { text-anchor: middle; }
.g-rotulo--fim { text-anchor: end; }
.g-referencia { stroke: var(--border-strong); stroke-width: 1.5; }
.g-linha { fill: none; stroke-width: 2; stroke-linejoin: round; }
.g-s1 { stroke: var(--primary); }
.g-s2 { stroke: var(--positive); stroke-dasharray: 6 3; }
.g-s3 { stroke: var(--warning); stroke-dasharray: 2 3; }
.g-s4 { stroke: var(--text-muted); stroke-dasharray: 10 4; }
.g-s5 { stroke: var(--text); stroke-dasharray: 8 3 2 3; }
.g-barra { fill: var(--primary); }
.g-barra--destaque { fill: var(--positive); }
.g-eixo { stroke: var(--border-strong); stroke-width: 1; }
.g-ponto { fill: var(--primary); fill-opacity: 0.7; }
.g-ponto--fora { fill: var(--warning); }
.g-mediana { stroke: var(--text); stroke-width: 2; }
.g-legenda { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-2) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.g-legenda li::before { content: ""; display: inline-block; width: 1.5rem; height: 0; margin-right: var(--sp-2); vertical-align: middle; border-top: 2px solid; }
.g-legenda__s1::before { border-color: var(--primary); }
.g-legenda__s2::before { border-color: var(--positive); border-top-style: dashed; }
.g-legenda__s3::before { border-color: var(--warning); border-top-style: dotted; }
.g-legenda__s4::before { border-color: var(--text-muted); border-top-style: dashed; }
.g-legenda__s5::before { border-color: var(--text); border-top-style: double; border-top-width: 3px; }
/* uPlot (séries ODbL): cores pelos tokens */
.c-grafico .uplot { font-family: var(--font-sans); color: var(--text-muted); }

/* ---------- 10. Nav de âncoras do ativo ---------- */
.c-ancoras {
  position: sticky; top: 0; z-index: 10;
  margin: 0 0 var(--sp-4); padding: 0 var(--sp-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-painel);
  overflow-x: auto;
}
.c-ancoras ul { display: flex; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.c-ancoras a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3);
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
.c-ancoras a[aria-current="true"] { color: var(--primary); font-weight: var(--fw-semibold); box-shadow: inset 0 -2px 0 var(--primary); }

/* ---------- 11. Abas ---------- */

/* ---------- 12. Aviso de fonte e atualização ---------- */
.c-fonte { margin: 0 0 var(--sp-4); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.c-aviso {
  max-width: 72ch; margin: var(--sp-3) 0 var(--sp-4); padding: var(--sp-3);
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted);
  background: var(--surface); border-left: 3px solid var(--primary); border-radius: var(--r-md);
}

/* ---------- 13. CTA do plano pago ---------- */
/* ---------- 14. Formulários ---------- */
/* ---------- 15. Banner de consentimento ---------- */
/* ---------- 16. Rodapé (acordeão mobile) ---------- */

/* ---------- Páginas de ativo e setor (P06) ---------- */
.ativo__cabecalho h1 { margin-bottom: var(--sp-2); }
.ativo__classificacao { color: var(--text-muted); }
.ativo__secao { scroll-margin-top: 56px; }
.ativo__secao > h2:first-child { margin-top: var(--sp-5); }
.ativo__grupo h3 { margin-top: var(--sp-5); }
.ativo__intro { max-width: 72ch; color: var(--text-muted); }
@media (min-width: 1024px) {
  .ativo__graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}
.ativo__formulas { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .ativo__formulas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-formula { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.c-formula__premissas { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.c-formula__premissas dt { color: var(--text-muted); }
.c-formula__premissas dd { margin: 0; font-variant-numeric: tabular-nums; }
.c-formula__texto { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.lista-links { columns: 2 16rem; padding-left: var(--sp-5); }
.lista-links li { margin-bottom: var(--sp-2); }
.texto-suave { color: var(--text-muted); font-size: var(--fs-sm); }
.c-ficha { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--sp-2) var(--sp-4); max-width: 72ch; margin: 0 0 var(--sp-3); }
.c-ficha dt { color: var(--text-muted); }
.c-ficha dd { margin: 0; }

/* ---------- Tesouro e macro (P08) ---------- */
.c-filtros ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.c-filtros a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); text-decoration: none; color: var(--text);
}
.c-filtros a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.c-simulador { display: grid; gap: var(--sp-3); max-width: 40rem; margin-bottom: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); }
@media (min-width: 768px) { .c-simulador { grid-template-columns: 1fr 1fr auto; align-items: end; } .c-simulador > dl, .c-simulador > p { grid-column: 1 / -1; } }
.c-campo { display: grid; gap: var(--sp-1); }
.c-campo label { font-size: var(--fs-sm); color: var(--text-muted); }
.c-campo input {
  min-height: 44px; padding: 0 var(--sp-3); font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-variant-numeric: tabular-nums;
}
.c-botao {
  min-height: 44px; padding: 0 var(--sp-5); font: inherit; font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-primary); background: var(--primary); border: 0; border-radius: var(--r-md); text-decoration: none; cursor: pointer;
}
.c-simulador__erro { margin: 0; color: var(--negative); }
.c-simulador__liquido { font-size: var(--fs-lg); }
/* ---------- 2. Busca com autocomplete (P09) ---------- */
.c-busca { position: relative; flex: 1 1 14rem; max-width: 22rem; }
.c-busca input {
  width: 100%; min-height: 40px; padding: 0 var(--sp-3); font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-pill);
}
.c-busca__lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 20rem; overflow-y: auto;
  margin: 0; padding: var(--sp-1) 0; list-style: none; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.c-busca__lista li { padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: var(--fs-sm); }
.c-busca__lista li[aria-selected="true"], .c-busca__lista li:hover { background: var(--surface-2); }
.c-busca--pagina { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: end; max-width: 40rem; margin-bottom: var(--sp-4); }
.c-busca--pagina label { width: 100%; font-size: var(--fs-sm); color: var(--text-muted); }
.c-busca--pagina input { flex: 1; min-height: 44px; border-radius: var(--r-sm); }
.c-resultados li { margin-bottom: var(--sp-2); }

/* ---------- Glossário, metodologia, calculadoras e textos (P09) ---------- */
.conteudo h2 { margin-top: var(--sp-6); }
.c-formula--destaque { margin: var(--sp-4) 0; max-width: 72ch; background: var(--surface-2); }
.c-formula__catalogo { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-medium); }
.c-maiores { display: grid; gap: var(--sp-4); margin: var(--sp-4) 0; }
@media (min-width: 768px) { .c-maiores { grid-template-columns: 1fr 1fr; } }
.c-maiores ol { padding-left: var(--sp-5); }
.c-maiores li { margin-bottom: var(--sp-1); }
.c-metodologia dt { margin-top: var(--sp-3); font-weight: var(--fw-semibold); }
.c-metodologia dd { margin: var(--sp-1) 0 0; max-width: 80ch; }
.c-posicoes { padding-left: var(--sp-5); }
/* ---------- Filtro de ativos (P14) ---------- */
.c-filtro { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.c-filtro__grupo { margin: 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.c-filtro__grupo > legend { padding: 0 var(--sp-2); font-weight: var(--fw-semibold); }
.c-filtro__secao > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: var(--fw-semibold); color: var(--primary); }
.c-filtro__campo { margin: 0 0 var(--sp-3); padding: 0; border: 0; }
.c-filtro__campo > legend { margin-bottom: var(--sp-1); font-weight: var(--fw-semibold); }
.c-filtro__linha { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.c-filtro__linha .c-campo { flex: 1 1 9rem; max-width: 16rem; }
.c-filtro select { min-height: 44px; padding: 0 var(--sp-3); font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.c-filtro__faixas { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.c-filtro__faixas a { display: inline-flex; align-items: center; min-height: 32px; }
.c-filtro__colunas { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--sp-2); }
.c-filtro__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.c-filtro__acoes a.c-botao { display: inline-flex; align-items: center; text-decoration: none; }
.c-filtro__avisos ul { margin: 0; padding-left: var(--sp-5); }
/* ---------- Anúncios (P17): altura fixa por formato, rótulo fora da área, fundo neutro sem preenchimento ---------- */
.c-anuncio { margin: var(--sp-6, 2rem) 0; }
.c-anuncio__rotulo { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); color: var(--text-muted); text-align: center; letter-spacing: 0.02em; }
.c-anuncio__area { display: flex; align-items: center; justify-content: center; height: 250px; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); }
.c-anuncio--faixa .c-anuncio__area { height: 100px; }
@media (min-width: 768px) { .c-anuncio--faixa .c-anuncio__area { height: 90px; } }
.c-anuncio__area ins[data-ad-status="unfilled"] { display: none !important; }
.c-anuncio__teste { display: flex; align-items: center; justify-content: center; max-width: 100%; font-size: var(--fs-sm); color: var(--text-muted); border: 1px dashed var(--border-strong); }
/* ---------- Comunicados, agenda e moedas (P16) ---------- */
/* Agenda: cada dia é uma tabela; os dias fora da tela só são pintados quando chegam perto (LCP com 300+ linhas). */
.c-agenda__dia { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.c-comunicados { margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.c-comunicados__item { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.c-comunicados__item p { margin: 0 0 var(--sp-1); }
.c-comunicados__topo { font-size: var(--fs-sm); color: var(--text-muted); }
.c-comunicados__tipo { font-weight: var(--fw-semibold); color: var(--text); }
.c-comunicados__link { font-size: var(--fs-sm); }
/* ---------- Comparador (P15) ---------- */
.c-comparar__form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.c-comparar__form .c-campo { flex: 1 1 16rem; max-width: 28rem; }
.c-comparar__marca { display: inline-block; margin-left: var(--sp-1); padding: 0 var(--sp-1); font-size: var(--fs-xs, 0.75rem); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r-sm); }
.c-posicoes li { margin-bottom: var(--sp-1); }
.c-lista-cards { display: grid; gap: var(--sp-3); padding: 0; list-style: none; }
@media (min-width: 768px) { .c-lista-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-lista-cards__titulo { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.c-calculadora select { min-height: 44px; padding: 0 var(--sp-2); font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.c-campo--check { display: flex; align-items: center; gap: var(--sp-2); }
.c-campo--check input { width: 20px; height: 20px; }
@media (min-width: 768px) { .c-calculadora { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 56rem; } }
.c-aviso--minuta { border-left-color: var(--warning); color: var(--text); }

/* ---------- Relacionados (P10) ---------- */
.c-relacionados__grupos { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .c-relacionados__grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-relacionados h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.c-relacionados ul { margin: 0; padding-left: var(--sp-5); }
.c-relacionados li { margin-bottom: var(--sp-1); }

/* ---------- 15. Banner de consentimento (P11) ---------- */
.c-consentimento {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; max-height: 60vh; overflow-y: auto;
  padding: var(--sp-4) 0; background: var(--surface); color: var(--text);
  border-top: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
}
.c-consentimento__titulo { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.c-consentimento__texto { max-width: 72ch; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.c-consentimento__botoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.c-botao--igual { min-width: 10rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); }
.c-consentimento__opcoes { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.c-consentimento__opcoes label { display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; }
/* ---------- Proventos de ações (P19): histórico de meses de data-com ---------- */
.c-meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-1); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
@media (min-width: 768px) { .c-meses { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.c-meses__mes { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-1); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-xs); color: var(--text-muted); }
.c-meses__nome { font-weight: var(--fw-semibold); color: var(--text); text-transform: capitalize; }
.c-meses__n { font-variant-numeric: tabular-nums; }
.c-meses__mes--1, .c-meses__mes--2 { background: var(--surface-2); }
.c-meses__mes--3, .c-meses__mes--4 { background: var(--surface-2); border-color: var(--primary); }
.c-meses__mes--5 { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.c-meses__mes--5 .c-meses__nome { color: var(--on-primary); }
/* ---------- Contas (P20): formulários, favoritos e alertas ---------- */
.conta { max-width: 44rem; }
.c-form { display: grid; gap: var(--sp-3); max-width: 28rem; margin: var(--sp-4) 0; }
.c-form .c-campo input:not([type="checkbox"]) { width: 100%; }
.c-campo--check label { color: var(--text); font-size: var(--fs-md); }
.c-aviso--erro { border-left-color: var(--negative); color: var(--text); }
.c-aviso--erro ul { margin: 0; padding-left: var(--sp-4); }
.c-botao--link { display: inline-flex; align-items: center; text-decoration: none; }
.c-botao--perigo { background: var(--negative); color: var(--on-primary); }
.conta__menu li { margin-bottom: var(--sp-2); }
.conta__favorito { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.conta__favorito h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.conta__alertas { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.c-favorito { display: inline-flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.c-favorito .c-botao { min-height: 36px; padding: 0 var(--sp-4); }
.c-favorito__nota { font-size: var(--fs-sm); color: var(--text-muted); }
.cabecalho__conta { white-space: nowrap; font-size: var(--fs-sm); }
/* ---------- Carteira local (P21) ---------- */
.c-carteira__form { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: end; }
.c-carteira__dados { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }
.c-carteira__importar { display: inline-flex; align-items: center; cursor: pointer; }
.c-carteira__barras { width: 100%; max-width: 40rem; height: auto; font-size: 14px; fill: var(--text); }
.c-carteira__barra { fill: var(--primary); }
#carteira input[type="number"] { min-height: 36px; width: 7rem; font: inherit; }

/* =====================================================================================================
 * Redesenho de 2026-10-20 — painéis brancos sobre fundo neutro (padrão dos portais de mercado), home com
 * panorama, último pregão, agenda e comunicados; faixa de cotações no layout.css.
 * ===================================================================================================== */

/* Ajustes dos componentes existentes para o fundo cinza */
.c-aviso--leve { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-xs); border-left-width: 2px; }
.c-botao:hover { background: var(--primary-strong); }
.c-botao--contorno { min-height: 40px; padding: 0 var(--sp-4); color: var(--primary); background: var(--surface); border: 1px solid var(--primary); }
.c-botao--contorno:hover { color: var(--on-primary); background: var(--primary); }
.c-busca input:focus { background: var(--surface); border-color: var(--primary); }

/* Painel genérico (bloco branco) */
.c-painel {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-painel);
}
.c-painel > :last-child { margin-bottom: 0; }

/* Chip (atalhos) */
.c-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--primary);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.c-chip:hover { border-color: var(--primary); background: var(--surface-3); }

/* KPI do panorama */
.painel__indicadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.c-kpi__link {
  display: grid;
  gap: 2px;
  height: 100%;
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-painel);
}
.c-kpi__link:hover { border-color: var(--primary); }
.c-kpi__rotulo { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.c-kpi__valor { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-bold); }
.c-kpi__nota { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.c-kpi__data { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.c-kpi .c-badge { justify-self: start; font-size: var(--fs-xs); }

/* Tabela compacta dos painéis */
.c-mini { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.c-mini th, .c-mini td { padding: var(--sp-2) 0; border-top: 1px solid var(--border); text-align: left; vertical-align: middle; }
.c-mini thead th { padding-top: 0; border-top: 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.c-mini tbody th { font-weight: var(--fw-semibold); }
.c-mini tbody th a { text-decoration: none; }
.c-mini tbody th a:hover { text-decoration: underline; }
.c-mini__nome { display: block; max-width: 14rem; overflow: hidden; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.c-mini .c-mini__num { padding-left: var(--sp-3); text-align: right; white-space: nowrap; }

/* Agenda e comunicados (coluna lateral) */
.c-agenda { margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.c-agenda li { display: grid; grid-template-columns: 5.5rem auto 1fr auto; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.c-agenda li:first-child { border-top: 0; }
.c-agenda__data { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.c-agenda__ticker { font-weight: var(--fw-semibold); text-decoration: none; }
.c-agenda__tipo { color: var(--text-muted); font-size: var(--fs-xs); }
.c-agenda__valor { text-align: right; }
.c-noticias { margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.c-noticias li { padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.c-noticias li:first-child { border-top: 0; padding-top: 0; }
.c-noticias__topo { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.c-noticias__titulo { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* Seções (explore) */
.c-secoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.c-secao {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: "icone titulo" "icone texto";
  column-gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-4);
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-painel);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.c-secao:hover { border-color: var(--primary); box-shadow: var(--shadow-2); }
.c-secao__icone { grid-area: icone; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--primary); border-radius: var(--r-md); background: var(--surface-3); }
.c-secao__icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-secao__titulo { grid-area: titulo; font-weight: var(--fw-semibold); color: var(--primary); }
.c-secao__texto { grid-area: texto; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); }

/* ---------- Home ---------- */
main:has(> .home) { padding-top: 0; }
.home__topo { margin-bottom: var(--sp-5); color: var(--topo-texto); background: var(--topo); background-image: linear-gradient(135deg, #0E2A5C 0%, #1A4B9C 100%); }
.home__topo-conteudo { padding-block: var(--sp-6); }
.home__topo h1 { max-width: 30ch; margin-bottom: var(--sp-3); font-size: var(--fs-xl); line-height: var(--lh-xl); color: var(--topo-texto); }
.home__proposito { max-width: 70ch; color: var(--topo-suave); }
.home__busca { display: flex; gap: var(--sp-2); max-width: 44rem; margin-bottom: var(--sp-3); }
.home__busca input { min-height: 48px; padding-inline: var(--sp-4); font-size: var(--fs-md); background: var(--surface); border-color: transparent; }
.home__busca input:focus { border-color: var(--surface); }
.home__buscar { min-height: 48px; color: #FFFFFF; background: #2563EB; border-radius: var(--r-pill); } /* branco sobre #2563EB: 5,2:1, nos dois temas */
.home__buscar:hover { background: #1D4ED8; }
.home__atalhos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.home__topo .c-chip { color: var(--topo-texto); background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.28); }
.home__topo .c-chip:hover { background: rgb(255 255 255 / 0.18); border-color: var(--topo-texto); }
.home__topo :focus-visible { outline-color: var(--topo-texto); }
.home__secao { margin-bottom: var(--sp-5); }
.home__cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-3); }
.home__cabecalho h2 { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); }
.home__cabecalho .c-fonte { margin: 0; }
.home__secao > h2 { margin-top: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); }
.home__grade { display: grid; gap: 0 var(--sp-5); }
.home__mais { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.painel__colunas { display: grid; gap: var(--sp-4); }
.painel__titulo { margin: 0 0 var(--sp-2); font-size: var(--fs-md); line-height: var(--lh-md); }
.home__aprenda p { color: var(--text-muted); }

@media (min-width: 768px) {
  .painel__indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-secoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home__topo h1 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
  .home__topo-conteudo { padding-block: var(--sp-7); }
}
@media (min-width: 1024px) {
  .painel__indicadores { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home__grade { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .painel__colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .c-secoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .c-secoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.c-mini--cotacoes td .num { display: block; }
.c-mini--cotacoes td .c-badge { display: inline-block; margin-top: 2px; font-size: var(--fs-xs); }
@media (max-width: 767px) {
  .c-mini--cotacoes tbody tr:nth-child(n+5) { display: none; } /* celular: 4 por lista */
}
.home__grade > *, .painel__colunas > * { min-width: 0; } /* itens de grid não estouram a largura no celular */
.c-mini thead th.c-mini__num { white-space: normal; }
@media (max-width: 479px) { .c-mini__nome { max-width: 10rem; } }
.cabecalho .cabecalho__busca { max-width: none; }
@media (min-width: 768px) { .cabecalho .cabecalho__busca { max-width: 36rem; } }
/* Último pregão: o h3 de cada lista já diz o que é; o cabeçalho da tabela fica só para leitores de tela */
.c-mini--cotacoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-mini--cotacoes tbody tr:first-child th, .c-mini--cotacoes tbody tr:first-child td { border-top: 0; }
@media (min-width: 1024px) { .painel__colunas .c-mini__nome { max-width: 8.5rem; } }

/* ---------- Topo da página de ativo (redesenho, fase 2) ---------- */
.ativo-topo {
  display: grid;
  grid-template-areas: "id" "preco" "numeros" "fonte";
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.ativo-topo__id { grid-area: id; }
.ativo-topo__tipo { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.ativo-topo__nome { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); line-height: var(--lh-xl); }
.ativo-topo__ticker { display: inline-block; margin-left: var(--sp-1); padding: 0 var(--sp-2); font-size: var(--fs-md); line-height: 1.75rem; vertical-align: middle; color: var(--primary); background: var(--surface-3); border-radius: var(--r-md); }
.ativo-topo__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.c-chip--leve { min-height: 30px; font-size: var(--fs-xs); color: var(--text); background: var(--surface-2); }
a.c-chip--leve { color: var(--primary); }
.ativo-topo__favorito > * { margin: 0; }
.ativo-topo__preco { grid-area: preco; }
.ativo-topo__valor { margin: 0; font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-bold); }
.ativo-topo__variacoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: var(--sp-1) 0; font-size: var(--fs-sm); }
.ativo-topo__periodo { color: var(--text-muted); font-size: var(--fs-xs); margin-right: var(--sp-2); }
.ativo-topo__nota { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.ativo-topo__numeros { grid-area: numeros; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.ativo-topo__numeros dt { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); }
.ativo-topo__numeros dt a { color: inherit; }
.ativo-topo__numeros dd { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); }
.ativo-topo__fonte { grid-area: fonte; margin: 0; }
@media (min-width: 768px) {
  .ativo-topo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id preco" "numeros numeros" "fonte fonte"; padding: var(--sp-5); }
  .ativo-topo__preco { text-align: right; }
  .ativo-topo__variacoes { justify-content: flex-end; }
  .ativo-topo__nome { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
  .ativo-topo__numeros { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Abas da página fixas no topo, em painel branco de largura total */
.ativo__secao { scroll-margin-top: 64px; }
.ativo-topo .c-favorito { flex-wrap: wrap; }
.ativo-topo .c-favorito .c-botao { white-space: nowrap; color: var(--primary); background: var(--surface); border: 1px solid var(--primary); }
.ativo-topo .c-favorito .c-botao:hover { color: var(--on-primary); background: var(--primary); }
.ativo-topo .c-favorito__nota { font-size: var(--fs-xs); }

/* ---------- Listas e rankings (redesenho, fase 3) ---------- */
.c-tabela tbody tr:hover th, .c-tabela tbody tr:hover td { background: var(--surface-3); }
.c-tabela tbody th a { font-weight: var(--fw-semibold); text-decoration: none; }
.c-tabela tbody th a:hover { text-decoration: underline; }
.c-tabela__alta { color: var(--positive); }
.c-tabela__queda { color: var(--negative); }
.c-ranking__pos {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 1.5rem; margin-right: var(--sp-2); padding: 0 var(--sp-1);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--primary);
  font-variant-numeric: tabular-nums; background: var(--surface-3); border-radius: var(--r-pill);
}
/* Sem destaque de "pódio": a posição é só a ordem pelo critério, não um juízo sobre o ativo */
/* Topo das páginas de lista: título e introdução */
.conteiner > h1 + .destaque__proposito, .conteiner > h1 + p { font-size: var(--fs-md); line-height: var(--lh-md); color: var(--text-muted); max-width: 80ch; }
.c-consentimento [hidden], .c-consentimento[hidden] { display: none; } /* "Configurar" abre as opções; o display dos blocos não pode vencer o hidden */
/* Ficha (dt/dd): o valor pode quebrar linha, para não alargar a página no celular */
.c-ficha { grid-template-columns: fit-content(55%) minmax(0, 1fr); }
.c-ficha dd.num { white-space: normal; }
/* Celular: cartões e campos de formulário nunca alargam a página */
.c-card { min-width: 0; }
.c-campo { min-width: 0; }
.c-campo input, .c-campo select { min-width: 0; max-width: 100%; }
@media (max-width: 479px) { .c-card__valor { font-size: var(--fs-lg); line-height: var(--lh-lg); white-space: normal; overflow-wrap: anywhere; } }

/* ---------- Gráfico SVG interativo (grafico-svg.js) ---------- */
.c-grafico__area--interativa { position: relative; cursor: crosshair; touch-action: pan-y; }
.g-cursor { display: none; pointer-events: none; }
.g-cursor--ativo { display: inline; }
.g-guia { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.g-marca { fill: var(--surface); stroke-width: 2; }
.g-marca.g-s1 { stroke: var(--primary); }
.g-marca.g-s2 { stroke: var(--positive); }
.c-grafico__balao {
  position: absolute; top: 4px; z-index: 5; display: none; min-width: 9rem; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text); pointer-events: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  transform: translateX(12px);
}
.c-grafico__balao--ativo { display: grid; gap: 2px; }
.c-grafico__balao--esquerda { transform: translateX(calc(-100% - 12px)); }
.c-grafico__balao strong { font-size: var(--fs-sm); }
.c-grafico__balao-item { font-variant-numeric: tabular-nums; }
.c-grafico__balao-item--s1::before, .c-grafico__balao-item--s2::before { content: ""; display: inline-block; width: 10px; height: 2px; margin-right: 6px; vertical-align: middle; }
.c-grafico__balao-item--s1::before { background: var(--primary); }
.c-grafico__balao-item--s2::before { background: var(--positive); }
/* Gráfico em painel branco, como os demais blocos */
.c-grafico { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-painel); }