/* ==========================================================================
 * SIR · Clube de Investidores — src/styles/base.css
 * --------------------------------------------------------------------------
 * Reset, tipografia, utilitários de texto e grades. Depende de tokens.css.
 * Nada aqui declara cor literal.
 * ======================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: var(--entrelinha);
  background: var(--fundo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  text-align: inherit;
}
button:disabled { cursor: not-allowed; }

input, select, textarea { font: inherit; color: var(--tinta); }

a {
  color: var(--primaria);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover { border-bottom-color: currentColor; }

ul, ol { list-style: none; }

hr {
  border: none;
  border-top: 1px solid var(--linha);
  margin: var(--e-5) 0;
}

fieldset { border: none; }
legend { padding: 0; }

/* --- Tipografia ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-weight: var(--peso-forte); line-height: var(--entrelinha-curta); }

h1 {
  /* O título da tela segue o eixo `tituloPagina` do tema; a marca continua com
     a serifa da identidade, independentemente desta escolha. */
  font-family: var(--fonte-titulo-pagina, var(--serif));
  font-size: var(--t-gg);
  font-weight: var(--peso-forte);
  letter-spacing: var(--rastreio-titulo, -.012em);
}
h2 {
  font-family: var(--serif);
  font-size: var(--t-g);
  font-weight: var(--peso-medio);
  letter-spacing: -.008em;
}
h3 { font-size: var(--t-m); }
h4 { font-size: var(--t-base); }
h5, h6 { font-size: var(--t-s); }

p { max-width: 78ch; }

code, kbd, samp, pre { font-family: var(--mono); font-size: .88em; }

strong, b { font-weight: var(--peso-forte); }

abbr[title] { text-decoration: underline dotted; cursor: help; }

/* --- Utilitários de texto -------------------------------------------------- */
.serif { font-family: var(--serif); font-weight: var(--peso-medio); letter-spacing: -.01em; }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }

.kicker {
  display: block;
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--rastreio-kicker);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.muted { color: var(--tinta-2); }
.fraco { color: var(--tinta-3); }
.pequeno { font-size: var(--t-p); }
.medio { font-size: var(--t-s); }
.forte { font-weight: var(--peso-forte); }
.latao { color: var(--latao-forte); font-weight: var(--peso-forte); }
.negativo { color: var(--st-rejeitado); }
.positivo { color: var(--st-aprovado); }

.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quebrar { overflow-wrap: anywhere; }
.centro { text-align: center; }
.direita { text-align: right; }

.hide { display: none !important; }

/* Visível apenas para leitor de tela — usado em rótulos de tabela e ARIA. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Pula direto ao conteúdo — primeiro item tabulável do documento. */
.pular-para-conteudo {
  position: absolute;
  left: var(--e-3);
  top: -60px;
  z-index: var(--z-toast);
  background: var(--primaria);
  color: var(--sobre-primaria);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r);
  font-size: var(--t-s);
  font-weight: var(--peso-forte);
  transition: top var(--transicao);
}
.pular-para-conteudo:focus { top: var(--e-3); }

/* --- Grades --------------------------------------------------------------- */
/* Cada classe de grade é auto-suficiente: declara o display e o espaçamento
   além das colunas. Antes, a coluna só valia quando o módulo escrevia
   `class="grid g4"`, e 51 das 59 grades do sistema escreviam apenas
   `class="g-4"`, `class="g2"` ou `class="g-3"` — sem `display:grid`, a
   `grid-template-columns` não faz nada e os blocos empilham em coluna única de
   largura total. Consertar aqui reorganiza 23 telas sem tocar em módulo algum.

   As duas convenções de nome (com e sem hífen) convivem porque ambas estão na
   marcação; manter as duas custa uma linha e evita reescrever 51 pontos. */
.grid,
.g2, .g3, .g4,
.g-2, .g-3, .g-4,
.g-2-1, .g-1-2, .g-3-2 {
  display: grid;
  gap: var(--e-4);
  /* Cada célula tem a própria altura. Sem isto, a grade estica todas à altura
     da mais alta: abrir "Como calculamos" num indicador criava um vazio de
     quatrocentos pixels dentro dos outros três, que continuavam com uma linha
     de conteúdo. O alinhamento pelo topo é o que faz o conteúdo mandar na
     caixa, e não o contrário. */
  align-items: start;
}

/* A razão do `start` acima desaparece quando a grade compara cartões irmãos:
   o cartão sem legenda, lista ou gráfico complementar ficava menor e deixava
   a base da fileira torta. É contrato da grade — não exceção de cada tela —
   que cartões diretos da mesma fileira compartilhem a altura da maior célula.
   Grids de campos, chips e conteúdo solto continuam em `start`. */
.grid:has(> .cartao), .g2:has(> .cartao), .g3:has(> .cartao), .g4:has(> .cartao),
.g-2:has(> .cartao), .g-3:has(> .cartao), .g-4:has(> .cartao),
.g-2-1:has(> .cartao), .g-1-2:has(> .cartao), .g-3-2:has(> .cartao) { align-items: stretch; }
.kpi { display: flex; flex-direction: column; }
.kpi .kpi-sub { margin-top: auto; }

/* Cinco indicadores numa grade de quatro colunas deixam o quinto sozinho numa
   segunda linha, ao lado de três células vazias. O número de colunas passa a
   sair da largura disponível, não de uma contagem escrita à mão: com espaço,
   os cinco cabem na mesma linha; sem espaço, quebram em duas linhas cheias. */
.grid:has(> .kpi), .g3:has(> .kpi), .g4:has(> .kpi), .g-3:has(> .kpi), .g-4:has(> .kpi) {
  grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr));
  /* `stretch` iguala as células de uma linha; entre linhas, não. Com oito
     indicadores em seis mais dois, a segunda fileira ficava mais alta que a
     primeira. Linhas de altura idêntica resolvem o desencontro que sobra. */
  grid-auto-rows: 1fr;
}

.g2, .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3, .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4, .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 2fr minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) 2fr; }
.g-3-2 { grid-template-columns: 3fr minmax(0, 2fr); }

/* No painel, veículos são comparados lado a lado. A grade mantém a base dos
   cartões da mesma fileira alinhada mesmo quando um rótulo de apoio ocupa uma
   linha a mais. */
.grade-veiculos { align-items: stretch; }

/* Faixa de chips de filtro: rola no eixo x em telas estreitas em vez de
   empurrar o layout da página. Usada por nove módulos. */
.linha-chips {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  min-width: 0;
}
@media (max-width: 640px) {
  .linha-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: var(--e-1, 4px);
  }
  .linha-chips > * { flex: 0 0 auto; }
}

.linha-flex { display: flex; align-items: center; gap: var(--e-3); }
.linha-flex.entre { justify-content: space-between; }
.linha-flex.fim { justify-content: flex-end; }
.linha-flex.quebra { flex-wrap: wrap; }
.espacador { flex: 1 1 auto; }

.pilha > * + * { margin-top: var(--e-4); }
.pilha-curta > * + * { margin-top: var(--e-2); }

@media (max-width: 1100px) {
  .g4, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Uma grade DENTRO de um cartão já parte de uma largura reduzida: duas colunas
   ali, abaixo de 1000 px, espremem o valor a ponto de "R$ 5.462.822,83" ser
   cortado nos centavos. Ela empilha antes que a grade de página. */
@media (max-width: 1000px) {
  .cartao .g2, .cartao .g-2, .cartao .grid.g2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .g4, .g-4, .g3, .g-3, .g2, .g-2, .g-2-1, .g-1-2, .g-3-2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Foco, seleção e movimento -------------------------------------------- */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
  border-radius: var(--r-p);
}

/* Superfícies que o navegador desenha e que não pertencem a design system
   nenhum: a seleção, o cursor de texto e o sublinhado do link. Deixá-las no
   padrão é o sinal mais barato de que a página foi montada, não construída. */
::selection { background: var(--primaria-suave); color: var(--tinta); }
input, textarea, [contenteditable] { caret-color: var(--primaria); }
a { text-underline-offset: .18em; text-decoration-thickness: from-font; }

::placeholder { color: var(--tinta-3); opacity: 1; }

/* Barra de rolagem discreta, coerente com o tema. A largura é permanente para
   que o conteúdo não salte; em ponteiro fino só o polegar se revela. */
* { scrollbar-color: var(--linha-2) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--linha-2); border-radius: var(--r-pilula); border: 2px solid transparent; background-clip: content-box; }

@media (hover: hover) {
  * { scrollbar-color: transparent transparent; }
  *:hover,
  *:focus,
  *:focus-within { scrollbar-color: var(--linha-2) transparent; }

  *::-webkit-scrollbar-thumb {
    background: transparent;
    transition: background-color var(--transicao-rapida);
  }
  *:hover::-webkit-scrollbar-thumb,
  *:focus::-webkit-scrollbar-thumb,
  *:focus-within::-webkit-scrollbar-thumb { background: var(--linha-2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  *::-webkit-scrollbar-thumb { transition: none !important; }
}

/* --- Alvo de toque mínimo (WCAG 2.1 AA · 44px) ---------------------------- */
/* Alvo de toque no dedo. A lista anterior cobria botão, checkbox e radio, e
   deixava de fora justamente o que mais se erra no celular: o seletor, o campo
   de texto e o campo de data — que ficavam em 41px — e a paginação, cujo
   `min-width: 30px` local vencia a regra por vir depois na cascata.
   Os seletores abaixo são específicos o bastante para ganhar dela. */
@media (pointer: coarse) {
  button,
  [role="button"],
  a.acao,
  input[type="checkbox"],
  input[type="radio"] { min-height: var(--alvo-toque); min-width: var(--alvo-toque); }

  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
    min-height: var(--alvo-toque);
  }

  .paginacao button,
  .abas button,
  .linha-chips button,
  .periodo-chip,
  .periodo button { min-height: var(--alvo-toque); min-width: var(--alvo-toque); height: auto; }

  /* Link solto dentro de texto corrido não vira bloco de 44px — isso quebraria
     o parágrafo. Ele ganha área clicável por espaçamento vertical. */
  p a, td a, li a { padding-block: 6px; }
}


/* --- Afastamento vertical -------------------------------------------------
 * Oitenta e quatro pontos do sistema escreviam `style="margin-top:var(--e-4)"`
 * dentro do JavaScript. O valor estava certo; o lugar, não — espaçamento
 * escrito caso a caso é o que faz dois blocos vizinhos se encostarem numa tela
 * e se afastarem em outra, sem ninguém conseguir dizer por quê.
 * ---------------------------------------------------------------------- */
.acima { margin-top: var(--e-4); }
.acima-g { margin-top: var(--e-5); }
.abaixo { margin-bottom: var(--e-4); }
.abaixo-g { margin-bottom: var(--e-5); }