/* =========================================================================
   Escala de Valores — Design System
   Tokens conforme references/design-system.md
   Princípios: densidade sem ruído · verde e vermelho só para variação de
   preço · legibilidade numérica acima de tudo.
   ========================================================================= */

:root {
  /* Marca */
  --brand-900:#062B23; --brand-800:#0A4034; --brand-700:#0D5544;
  --brand-600:#0F6B55; --brand-500:#12866A; --brand-400:#2AA487;
  --brand-300:#6FC7B2; --brand-100:#D6F0E8;

  /* Acento */
  --accent-600:#B8860B; --accent-500:#D4A017; --accent-100:#FBF1D6;

  /* Semânticos de mercado — reservados, nunca decorativos */
  --up:#0E9F6E; --up-bg:#E7F7F0;
  --down:#E02424; --down-bg:#FDECEC;
  --flat:#6B7280;

  /* Neutros */
  --ink-900:#0B1215; --ink-700:#243036; --ink-500:#5A6870;
  --ink-300:#9AA6AE; --ink-100:#E4E9EC;
  --surface:#FFFFFF; --bg:#F7F9FA;

  /* Estado */
  --info:#2563EB; --warn:#D97706; --danger:#DC2626; --success:#059669;

  /* Espaço */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px;

  /* Raio e sombra */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-full:9999px;
  --sh-sm:0 1px 2px rgba(11,18,21,.06);
  --sh-md:0 4px 12px rgba(11,18,21,.08);
  --sh-lg:0 12px 32px rgba(11,18,21,.12);
}

[data-theme="dark"] {
  --surface:#111A1E; --bg:#0B1215;
  --ink-900:#F2F5F6; --ink-700:#C4CED3; --ink-500:#8E9BA3; --ink-100:#223036;
  --ink-300:#6B7A83;
  --up:#34D399; --up-bg:#0E2A22; --down:#F87171; --down-bg:#2E1414;
  --brand-100:#0E2A22;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-900);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

/* ---------------- tipografia ---------------- */
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--s3); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; margin-top: var(--s8); }
h3 { font-size: 1.125rem; margin-top: var(--s6); }
p { margin: 0 0 var(--s4); }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .peq { font-size: .8125rem; }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.silenciado { color: var(--ink-500); }
.forte { font-weight: 600; }

/* ---------------- layout ---------------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 1024px) { .container { padding: 0 var(--s6); } }

.grade { display: grid; gap: var(--s4); }
.g2 { grid-template-columns: 1fr; }
.g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: repeat(2, 1fr); }
.g6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(4, 1fr); }
  .g6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) { .g6 { grid-template-columns: repeat(6, 1fr); } }

.lado-a-lado { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .lado-a-lado { grid-template-columns: 340px 1fr; } }

.pilha > * + * { margin-top: var(--s4); }
.linha { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* ---------------- cabeçalho ---------------- */
.topo {
  background: var(--surface);
  border-bottom: 1px solid var(--ink-100);
  position: sticky; top: 0; z-index: 40;
}
.topo-interno { display: flex; align-items: center; gap: var(--s4); height: 62px; }

.marca { display: flex; align-items: center; gap: var(--s2); font-weight: 600;
         color: var(--ink-900); white-space: nowrap; }
.marca:hover { text-decoration: none; }
.marca svg { display: block; }
.marca-nome { font-size: 1.0625rem; letter-spacing: -.01em; }
.marca-nome span { font-weight: 400; color: var(--ink-500); }

/* A arte da marca vem sobre uma placa metálica escura, sem transparência.
   O raio e a borda transformam esse fundo em um selo intencional, em vez de
   um retângulo solto sobre o branco do cabeçalho. */
.marca-simbolo {
  display: block; border-radius: var(--r-md); object-fit: cover;
  box-shadow: var(--sh-sm); background: var(--ink-900);
}
.marca-completa {
  display: block; border-radius: var(--r-md); height: auto; max-width: 100%;
  box-shadow: var(--sh-sm);
}
@media (max-width: 420px) {
  .marca-nome { font-size: .9375rem; }
}

/* A barra do desktop só aparece a partir de 1120px, porque abaixo disso os
   nove itens não caberiam ao lado da logo e da busca. Entre 900 e 1120px
   quem cuida da navegação é a tira rolável, que já traz tudo. */
.menu { display: none; gap: 2px; margin-left: var(--s3); }
@media (min-width: 1120px) { .menu { display: flex; } }
.menu a {
  color: var(--ink-700); padding: var(--s2) 10px;
  border-radius: var(--r-md); font-size: .875rem; font-weight: 500;
  white-space: nowrap;
}
.menu a:hover { background: var(--bg); text-decoration: none; color: var(--brand-600); }
.menu a[aria-current="page"] { color: var(--brand-600); background: var(--brand-100); }

.topo-acoes { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }

.menu-mobile { display: flex; gap: var(--s1); overflow-x: auto; padding: var(--s2) 0;
               border-bottom: 1px solid var(--ink-100); background: var(--surface); }
@media (min-width: 1120px) { .menu-mobile { display: none; } }
.menu-mobile a { white-space: nowrap; padding: var(--s2) var(--s3); font-size: .875rem;
                 color: var(--ink-700); border-radius: var(--r-md); }
.menu-mobile a[aria-current="page"] { background: var(--brand-100); color: var(--brand-600); }

/* ---------------- componentes ---------------- */
.cartao {
  background: var(--surface); border: 1px solid var(--ink-100);
  border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--sh-sm);
}
.cartao h3 { margin-top: 0; }

.rotulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
          color: var(--ink-500); font-weight: 600; }

.metrica { display: flex; flex-direction: column; gap: 2px; }
.metrica .valor { font-size: 1.25rem; font-weight: 600; }
.metrica .valor.grande { font-size: 1.875rem; }
.metrica .sub { font-size: .8125rem; color: var(--ink-500); }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }
.pilula { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--s2);
          border-radius: var(--r-full); font-size: .8125rem; font-weight: 600; }
.pilula.up { background: var(--up-bg); }
.pilula.down { background: var(--down-bg); }
.pilula.flat { background: var(--ink-100); }

.etiqueta { display: inline-block; padding: 2px var(--s2); border-radius: var(--r-sm);
            font-size: .75rem; font-weight: 600; background: var(--ink-100); color: var(--ink-700); }
.etiqueta.marca { background: var(--brand-100); color: var(--brand-700); }
.etiqueta.aviso { background: var(--accent-100); color: var(--accent-600); }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: .9375rem; font-weight: 600; cursor: pointer;
  font-family: inherit; background: var(--brand-500); color: #fff;
}
.btn:hover { background: var(--brand-600); text-decoration: none; }
.btn.secundario { background: var(--surface); color: var(--ink-900); border-color: var(--ink-100); }
.btn.secundario:hover { background: var(--bg); }
.btn.fantasma { background: transparent; color: var(--ink-700); }
.btn.fantasma:hover { background: var(--bg); }
.btn.peq { min-height: 34px; padding: 0 var(--s3); font-size: .8125rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* formulários */
label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: var(--s1);
        color: var(--ink-700); }
input, select, textarea {
  width: 100%; min-height: 44px; padding: var(--s2) var(--s3);
  border: 1px solid var(--ink-100); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-900);
  font-family: inherit; font-size: .9375rem; font-variant-numeric: tabular-nums;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand-500); outline-offset: 2px;
}
.campo { margin-bottom: var(--s3); }
.campo .dica { font-size: .75rem; color: var(--ink-500); margin-top: 2px; }

.busca { position: relative; flex: 1; max-width: 420px; min-width: 150px; }
@media (min-width: 1120px) { .busca { max-width: 250px; } }
.busca input { padding-left: 38px; }
.busca::before {
  content: "⌕"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-500); font-size: 1.25rem; pointer-events: none;
}
.sugestoes {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--ink-100);
  border-radius: var(--r-md); box-shadow: var(--sh-md); max-height: 320px; overflow: auto;
}
.sugestoes button {
  display: block; width: 100%; text-align: left; padding: var(--s2) var(--s3);
  background: none; border: 0; cursor: pointer; font-family: inherit; font-size: .9375rem;
  color: var(--ink-900);
}
.sugestoes button:hover, .sugestoes button:focus { background: var(--bg); }

/* tabelas */
.tabela-envolve { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
caption { text-align: left; font-size: .8125rem; color: var(--ink-500);
          padding-bottom: var(--s2); }
th, td { padding: var(--s2) var(--s3); text-align: right; white-space: nowrap;
         border-bottom: 1px solid var(--ink-100); }
th:first-child, td:first-child { text-align: left; }
thead th {
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-500); font-weight: 600;
}
tbody tr:hover { background: var(--bg); }
th[data-ordenavel] { cursor: pointer; user-select: none; }
th[data-ordenavel]:hover { color: var(--brand-600); }

/* avisos */
.aviso {
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  font-size: .875rem; border: 1px solid; display: flex; gap: var(--s3);
  align-items: flex-start;
}
.aviso.info { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; }
.aviso.atencao { background: var(--accent-100); border-color: #F3D98A; color: #7C5A06; }
.aviso.erro { background: var(--down-bg); border-color: #F5B5B5; color: #8C1616; }
[data-theme="dark"] .aviso.info { background: #16243B; border-color: #1E3A8A; color: #BFDBFE; }
[data-theme="dark"] .aviso.atencao { background: #2E2409; border-color: #7C5A06; color: #F3D98A; }
[data-theme="dark"] .aviso.erro { background: #2E1414; border-color: #8C1616; color: #F5B5B5; }

/* tooltip de indicador */
.explica { position: relative; display: inline-block; }
.explica > button {
  width: 20px; height: 20px; min-height: 20px; padding: 0; border-radius: var(--r-full);
  border: 1px solid var(--ink-100); background: var(--surface); color: var(--ink-500);
  font-size: .75rem; font-weight: 700; cursor: pointer; line-height: 1;
}
.explica > button:hover { border-color: var(--brand-500); color: var(--brand-600); }
.explica-caixa {
  display: none; position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: min(340px, 78vw); background: var(--surface); color: var(--ink-900);
  border: 1px solid var(--ink-100); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding: var(--s3); font-size: .8125rem;
  text-align: left; white-space: normal; font-weight: 400;
}
.explica.aberto .explica-caixa { display: block; }
.explica-caixa dt { font-weight: 600; margin-top: var(--s2); font-size: .75rem;
                    text-transform: uppercase; letter-spacing: .03em; color: var(--ink-500); }
.explica-caixa dt:first-child { margin-top: 0; }
.explica-caixa dd { margin: 2px 0 0; }

/* skeleton */
.esqueleto { background: linear-gradient(90deg, var(--ink-100), var(--bg), var(--ink-100));
             background-size: 200% 100%; animation: brilho 1.4s infinite;
             border-radius: var(--r-sm); color: transparent; }
@keyframes brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* rodapé */
.rodape { background: var(--surface); border-top: 1px solid var(--ink-100);
          margin-top: var(--s16); padding: var(--s8) 0 var(--s6); }
.rodape h4 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em;
             color: var(--ink-500); margin-bottom: var(--s2); }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: var(--s1); }
.rodape a { color: var(--ink-700); font-size: .875rem; }
.disclaimer { margin-top: var(--s6); padding-top: var(--s4);
              border-top: 1px solid var(--ink-100); font-size: .8125rem;
              color: var(--ink-500); }

/* fonte do dado */
.fonte-dado { font-size: .75rem; color: var(--ink-500); margin-top: var(--s2); }
.fonte-dado strong { color: var(--ink-700); font-weight: 600; }

/* cartões de destaque da home (Ibovespa e dólar) — versão compacta */
.destaque-compacto { padding: var(--s3) var(--s4); }
.destaque-compacto .rotulo { font-size: .6875rem; }
.destaque-grafico { margin-top: var(--s2); opacity: .9; }
/* O gráfico é decorativo aqui: a leitura fica no valor e na variação.
   A legenda continua no HTML, para leitor de tela, mas fica oculta. */
.destaque-grafico figcaption { position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.destaque-rodape .fonte-dado { margin-top: var(--s2); font-size: .6875rem; }

/* faixa de índices */
.faixa-indices { display: flex; gap: var(--s6); overflow-x: auto; padding: var(--s3) 0;
                 border-bottom: 1px solid var(--ink-100); background: var(--surface); }
.faixa-indices .item { white-space: nowrap; display: flex; flex-direction: column; }
.faixa-indices .item .rotulo { font-size: .6875rem; }
.faixa-indices .item .valor { font-weight: 600; font-size: .9375rem; }

/* barra de progresso da cota */
.barra { height: 6px; background: var(--ink-100); border-radius: var(--r-full); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--brand-500); }
.barra.alerta > span { background: var(--warn); }

/* matriz de sensibilidade */
.matriz td { text-align: center; font-size: .8125rem; }
.matriz .central { background: var(--brand-100); font-weight: 700; }

/* utilidades */
.oculto { display: none !important; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.centro { text-align: center; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }

/* impressão */
@media print {
  .topo, .menu-mobile, .rodape, .btn { display: none !important; }
  body { background: #fff; }
}