/* app.css -- sistema de design do Travas B3.
 *
 * Identidade herdada do dashboard do repo `options` (terminal escuro, âmbar,
 * mono em todo número), com tema claro derivado porque um PWA precisa dos
 * dois. A versão anterior era um azul genérico com tipografia do sistema em
 * tamanhos quase iguais — parecia protótipo, e nada ligava o app ao produto
 * que gera os dados.
 *
 * Três regras estruturais:
 *   1. Todo número usa a fonte mono com tabular-nums. Coluna de dígitos que
 *      não alinha é o cheiro clássico de app financeiro amador.
 *   2. Candidato barrado é esmaecido e em itálico, nunca escondido — mesma
 *      convenção de tr.nao-monta do dashboard.
 *   3. Escala tipográfica e de espaçamento em variáveis; nenhum rem mágico.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light dark;

  /* Tema claro (derivado). */
  --bg: #f2f4f8;
  --painel: #ffffff;
  --painel2: #e9edf3;
  --borda: #d5dbe4;
  --borda-forte: #b9c2cf;
  --texto: #3c4551;
  --brilho: #10151d;
  --mudo: #6b7684;

  --ambar: #a26a00;
  --verde: #0a7a3d;
  --vermelho: #c0271c;
  --azul: #1a5fc4;

  --ambar-fraco: #fdf3dd;
  --verde-fraco: #e2f4e9;
  --vermelho-fraco: #fbe6e4;
  --azul-fraco: #e3edfb;

  --sombra: 0 1px 2px rgb(16 21 29 / 6%), 0 4px 12px rgb(16 21 29 / 4%);

  /* Tipografia. */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", "Roboto Mono",
          Menlo, Consolas, "Liberation Mono", monospace;

  --t-xs: 0.6875rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-lg: 1.125rem;
  --t-xl: 1.5rem;
  --t-2xl: 2rem;

  /* Espaçamento. */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2.5rem;

  --raio: 10px;
  --raio-sm: 6px;
  --largura-max: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0e14;
    --painel: #131a24;
    --painel2: #192231;
    --borda: #1e2a3a;
    --borda-forte: #2c3b50;
    --texto: #c5cdd8;
    --brilho: #e8edf3;
    --mudo: #5a6a7a;

    --ambar: #f0b400;
    --verde: #00c853;
    --vermelho: #ff3d3d;
    --azul: #4da6ff;

    --ambar-fraco: rgb(240 180 0 / 14%);
    --verde-fraco: rgb(0 200 83 / 14%);
    --vermelho-fraco: rgb(255 61 61 / 14%);
    --azul-fraco: rgb(77 166 255 / 14%);

    --sombra: none;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: 1.5;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 { color: var(--brilho); line-height: 1.25; margin: 0; }
h1 { font-size: var(--t-lg); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p { margin: 0; }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Números sempre em mono com largura fixa: o alinhamento vertical de
   dígitos é o que separa uma tela financeira de uma planilha torta. */
.num, input[type="number"], table {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ----------------------------------------------------------------- casca */

.topo {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borda);
  background: var(--painel);
}
.topo h1 { font-size: var(--t-lg); letter-spacing: -0.01em; }
.subtitulo { color: var(--mudo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; }

/* O app e uma coluna flex para a barra de abas poder subir para o topo no
   desktop sem mudar a ordem do DOM (no celular ela e fixa embaixo). */
#app { display: flex; flex-direction: column; min-height: 60vh; }

#conteudo {
  order: 3;
  /* Em coluna flex, `margin: 0 auto` impede o stretch e encolhe o item ate
     o tamanho do conteudo -- centralizar aqui e trabalho de align-self. */
  width: 100%;
  align-self: center;
  max-width: var(--largura-max);
  padding: var(--e-4) var(--e-4) var(--e-6);
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}
#conteudo:focus { outline: none; }

.aviso-legal {
  order: 4;
  width: 100%;
  align-self: center;
  max-width: var(--largura-max);
  padding: var(--e-4) var(--e-4) calc(var(--e-6) + 3.5rem);
  border-top: 1px solid var(--borda);
  color: var(--mudo);
  font-size: var(--t-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  justify-content: space-between;
}

/* Abas: barra inferior no celular, faixa no topo do conteúdo no desktop. */
.abas {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  background: var(--painel);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
}
.aba {
  flex: 1;
  text-align: center;
  padding: var(--e-3) var(--e-2);
  min-height: 44px;
  color: var(--mudo);
  font-size: var(--t-sm);
  border-top: 2px solid transparent;
  margin-top: -1px;
}
.aba:hover { text-decoration: none; color: var(--texto); }
.aba-ativa { color: var(--brilho); border-top-color: var(--ambar); font-weight: 600; }

@media (min-width: 720px) {
  .abas {
    position: static;
    width: 100%;
    align-self: center;
    max-width: var(--largura-max);
    border-top: none;
    border-bottom: 1px solid var(--borda);
    background: transparent;
    order: 1;
    padding: 0 var(--e-4);
  }
  .aba { flex: 0 0 auto; border-top: none; border-bottom: 2px solid transparent; margin-top: 0; }
  .aba-ativa { border-bottom-color: var(--ambar); }
  .aviso-legal { padding-bottom: var(--e-5); }
}

/* -------------------------------------------------------------- orçamento */

.faixa-orcamento {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  /* Fundo sangra ate as bordas da janela, conteudo alinhado a mesma coluna
     do resto do app. */
  padding: var(--e-3) max(var(--e-4), calc((100% - var(--largura-max)) / 2));
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-sm);
}
.faixa-item { display: flex; align-items: baseline; gap: var(--e-2); }
.faixa-medidor { flex: 1 1 200px; max-width: 340px; display: block; }
.faixa-rotulo { color: var(--mudo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.faixa-item strong { color: var(--brilho); font-size: var(--t-md); }
.faixa-alerta {
  color: var(--vermelho);
  font-size: var(--t-xs);
  font-weight: 600;
  flex-basis: 100%;
}
.faixa-indisponivel { color: var(--ambar); gap: var(--e-2); }

.medidor { display: flex; flex-direction: column; gap: var(--e-1); }
.medidor-topo { display: flex; justify-content: space-between; gap: var(--e-2); align-items: baseline; }
.medidor-rotulo { color: var(--mudo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.medidor-numeros { font-size: var(--t-xs); color: var(--texto); }
.medidor-trilho {
  height: 6px;
  background: var(--painel2);
  border-radius: 999px;
  overflow: hidden;
}
.medidor-preenchido { height: 100%; background: var(--verde); transition: width 200ms ease; }
.medidor-quente .medidor-preenchido { background: var(--ambar); }
.medidor-cheio .medidor-preenchido { background: var(--vermelho); }
.medidor-quente .medidor-numeros,
.medidor-cheio .medidor-numeros { color: var(--vermelho); font-weight: 600; }

.painel-orcamento { display: flex; flex-direction: column; gap: var(--e-3); }
.subtitulo-painel { font-size: var(--t-sm); color: var(--mudo); text-transform: uppercase; letter-spacing: 0.06em; }

/* ----------------------------------------------------------- tipos de peça */

.secao { display: flex; flex-direction: column; gap: var(--e-3); }
.secao-cabecalho { display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; }
.secao-cabecalho h2 { font-size: var(--t-lg); }
.secao-badge {
  font-size: var(--t-xs);
  color: var(--mudo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 2px var(--e-2);
}
.secao-nota { color: var(--mudo); font-size: var(--t-sm); }

.tela-cabecalho { display: flex; flex-direction: column; gap: var(--e-1); }
.tela-sub { color: var(--mudo); font-size: var(--t-sm); max-width: 62ch; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--painel);
  color: var(--texto);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--painel2); text-decoration: none; }
.btn-primario { background: var(--ambar); border-color: var(--ambar); color: #10151d; }
.btn-primario:hover { filter: brightness(1.08); background: var(--ambar); }
.btn-secundario { background: transparent; }
.btn-perigo { color: var(--vermelho); border-color: var(--borda); }
.btn-perigo-ativo { background: var(--vermelho-fraco); border-color: var(--vermelho); }
.linha-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.chip {
  min-height: 36px;
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--painel);
  color: var(--mudo);
  font-family: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}
.chip-ativo { background: var(--ambar); border-color: var(--ambar); color: #10151d; font-weight: 600; }

.link-voltar { font-size: var(--t-sm); color: var(--mudo); }
.link-voltar:hover { color: var(--texto); }

/* Pílulas. Estados bons invertem (fundo saturado, texto escuro); estados
   ruins usam fundo tingido — mesma convenção do dashboard. */
.pilula {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px var(--e-2);
  border-radius: var(--raio-sm);
  background: var(--painel2);
  color: var(--mudo);
  white-space: nowrap;
}
.sinal-bom { background: var(--verde); color: #08130c; }
.sinal-favoravel { background: transparent; color: var(--verde); border: 1px solid var(--verde); }
.sinal-atencao { background: var(--ambar); color: #191203; }
.sinal-ruim { background: var(--vermelho-fraco); color: var(--vermelho); }

.pilula-barrado { background: var(--vermelho-fraco); color: var(--vermelho); }
.pilula-orcamento { background: var(--ambar-fraco); color: var(--ambar); }
/* Ausência de dado é azul, nunca vermelha: falha de coleta não pode parecer
   reprovação do motor de risco. */
.pilula-sem-dado { background: var(--azul-fraco); color: var(--azul); }
.pilula-suspeita {
  background: var(--vermelho-fraco);
  color: var(--vermelho);
  border: 1px solid var(--vermelho);
  align-self: flex-start;
}
.pilula-tendencia { text-transform: none; letter-spacing: 0; font-weight: 600; }
.tend-alta { color: var(--verde); background: var(--verde-fraco); }
.tend-baixa { color: var(--vermelho); background: var(--vermelho-fraco); }
.tend-neutra { color: var(--mudo); background: var(--painel2); }
.pilula-situacao.val-boa { background: var(--verde-fraco); color: var(--verde); }
.pilula-situacao.val-atencao { background: var(--ambar-fraco); color: var(--ambar); }
.pilula-situacao.val-ruim { background: var(--vermelho); color: #1a0605; }

[data-termo] { cursor: help; }
[data-termo]:hover { text-decoration: underline dotted; text-underline-offset: 3px; }

.val-boa { color: var(--verde); }
.val-atencao { color: var(--ambar); }
.val-ruim { color: var(--vermelho); }
.esmaecido { opacity: 0.6; }

.metrica { display: flex; flex-direction: column; gap: 1px; }
.metrica-valor { font-size: var(--t-lg); color: var(--brilho); line-height: 1.15; }
.metrica-rotulo { font-size: var(--t-xs); color: var(--mudo); text-transform: uppercase; letter-spacing: 0.06em; }
.metrica-sub { font-size: var(--t-xs); color: var(--mudo); }
.metrica-grande .metrica-valor { font-size: var(--t-2xl); letter-spacing: -0.02em; }

.detalhe-linha {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-1) 0;
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-sm);
}
.detalhe-linha:last-child { border-bottom: none; }
.detalhe-rotulo { color: var(--mudo); }
.detalhe-valor { color: var(--texto); }

.aviso {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: baseline;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-sm);
  border-left: 3px solid;
  font-size: var(--t-sm);
}
.aviso-atencao { background: var(--ambar-fraco); border-color: var(--ambar); color: var(--ambar); }
.aviso-erro { background: var(--vermelho-fraco); border-color: var(--vermelho); color: var(--vermelho); }
.aviso-neutro { background: var(--painel2); border-color: var(--borda-forte); color: var(--mudo); }
.aviso a { color: inherit; text-decoration: underline; }

.aviso-risco {
  font-size: var(--t-sm);
  color: var(--mudo);
  border-top: 1px solid var(--borda);
  padding-top: var(--e-3);
}

.estado-vazio {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--ambar);
  border-radius: var(--raio);
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  max-width: 68ch;
}
.estado-vazio h2 { font-size: var(--t-lg); }
.estado-detalhes { margin: 0; padding-left: var(--e-4); color: var(--mudo); font-size: var(--t-sm); }
.estado-detalhes li { margin: var(--e-1) 0; }
.estado-vazio .btn { align-self: flex-start; }

.regiao-viva { font-size: var(--t-sm); color: var(--mudo); min-height: 1.2em; }

.esqueleto-card {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.esqueleto-linha { height: 12px; border-radius: 999px; background: var(--painel2); animation: pulsar 1.4s ease-in-out infinite; }
.esqueleto-linha.larga { width: 70%; height: 18px; }
.esqueleto-linha.curta { width: 40%; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* --------------------------------------------------------------- mercado */

.mercado-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.mercado-meta { color: var(--mudo); font-size: var(--t-sm); }
.meta-alerta { color: var(--ambar); font-weight: 600; }

.grade-ativos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--e-3);
}

.card-ativo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
  color: inherit;
  box-shadow: var(--sombra);
  transition: border-color 120ms ease, transform 120ms ease;
}
.card-ativo:hover { text-decoration: none; border-color: var(--borda-forte); transform: translateY(-1px); }
.card-ativo-vazio { opacity: 0.72; }
.card-ativo-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-2); }
.card-ativo-cabecalho h3 { font-size: var(--t-lg); letter-spacing: -0.01em; }
.card-ativo-spot { display: block; color: var(--mudo); font-size: var(--t-sm); }
.card-ativo-faixa { color: var(--mudo); font-size: var(--t-xs); }
.card-ativo-cta { color: var(--azul); font-size: var(--t-sm); margin-top: auto; }

.ativo-contagem { font-size: var(--t-sm); }
.ativo-contagem strong { color: var(--brilho); font-size: var(--t-lg); }
.ativo-contagem-vazia { color: var(--mudo); }
.ativo-contagem-alerta { color: var(--vermelho); }

.ativo-melhor {
  border-top: 1px solid var(--borda);
  padding-top: var(--e-2);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.ativo-melhor-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); }
.ativo-melhor-rotulo { font-size: var(--t-xs); color: var(--mudo); text-transform: uppercase; letter-spacing: 0.06em; }
.ativo-strikes { font-size: var(--t-sm); color: var(--brilho); }
.ativo-numeros { font-size: var(--t-sm); }
.ativo-numeros strong { font-size: var(--t-md); }
.ativo-numeros-rotulo, .ativo-numeros-extra { color: var(--mudo); font-size: var(--t-xs); }

/* ----------------------------------------------------------------- ativo */

.ativo-cabecalho { display: flex; flex-direction: column; gap: var(--e-2); }
.ativo-titulo { display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; }
.ativo-titulo h2 { font-size: var(--t-2xl); letter-spacing: -0.02em; }
.ativo-spot { font-size: var(--t-lg); color: var(--texto); }
.ativo-meta { color: var(--mudo); font-size: var(--t-sm); }

.barra-controles {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  padding: var(--e-2) 0;
  border-block: 1px solid var(--borda);
}
.rotulo-controle { font-size: var(--t-xs); color: var(--mudo); text-transform: uppercase; letter-spacing: 0.06em; }
.controle-nota { font-size: var(--t-xs); color: var(--mudo); margin-left: auto; }
select, input {
  min-height: 40px;
  padding: var(--e-1) var(--e-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel);
  color: var(--texto);
  font-family: inherit;
  font-size: var(--t-sm);
}

.painel-payoff {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.painel-payoff-legenda { display: flex; gap: var(--e-3); align-items: baseline; flex-wrap: wrap; }
.payoff-titulo { font-family: var(--mono); font-size: var(--t-lg); color: var(--brilho); }
.payoff-tese { font-size: var(--t-sm); color: var(--mudo); }
.payoff-grande svg { width: 100%; height: auto; display: block; max-height: 320px; }
.payoff-nota { font-size: var(--t-xs); color: var(--mudo); }
.sem-payoff { color: var(--mudo); font-size: var(--t-sm); }

.lista-resultado { margin: 0; padding-left: var(--e-4); font-size: var(--t-sm); display: flex; flex-direction: column; gap: var(--e-1); }

/* Payoff SVG */
.payoff-lucro { fill: var(--verde); fill-opacity: 0.16; }
.payoff-prejuizo { fill: var(--vermelho); fill-opacity: 0.16; }
.payoff-curva { fill: none; stroke: var(--brilho); stroke-width: 2; }
.payoff-zero { stroke: var(--borda-forte); stroke-width: 1; }
.payoff-breakeven { stroke: var(--ambar); stroke-width: 1; stroke-dasharray: 3 3; }
.payoff-spot { stroke: var(--azul); stroke-width: 1; stroke-dasharray: 2 3; }
.payoff-spot-marcador { fill: var(--azul); }
.payoff-tick { stroke: var(--mudo); stroke-width: 1; }
.payoff-rotulo { font-family: var(--mono); font-size: 11px; fill: var(--mudo); }
.payoff-eixo { font-family: var(--mono); font-size: 10px; fill: var(--borda-forte); }
.payoff-rotulo-ganho { fill: var(--verde); font-weight: 700; }
.payoff-rotulo-perda { fill: var(--vermelho); font-weight: 700; }
.payoff-rotulo-spot { fill: var(--azul); }
.payoff-rotulo-be { fill: var(--ambar); }

/* -------------------------------------------------------------- cadeia */

.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); }
.tabela-cadeia { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela-cadeia th {
  text-align: left;
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--borda-forte);
  color: var(--mudo);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.th-termo { cursor: help; }
.tabela-cadeia td { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela-cadeia tr:last-child td { border-bottom: none; }
.tabela-cadeia small { display: block; color: var(--mudo); font-size: var(--t-xs); }
.col-num { text-align: right; }
.col-num small { text-align: right; }
.col-cabe strong { color: var(--brilho); }

.linha-cadeia { cursor: pointer; }
.linha-cadeia:hover { background: var(--painel2); }
.link-strike { color: var(--brilho); font-weight: 600; }

/* Barrada continua visível, de segunda classe — mesma convenção do
   dashboard (tr.nao-monta). Esconder apagaria a evidência de que um teto
   está apertado demais. */
.linha-barrada { opacity: 0.55; }
.linha-barrada td { font-style: italic; }
.linha-suspeita { background: var(--vermelho-fraco); }

@media (max-width: 719px) {
  .tabela-rolagem { border: none; background: transparent; }
  .tabela-cadeia thead { display: none; }
  .tabela-cadeia, .tabela-cadeia tbody, .tabela-cadeia tr, .tabela-cadeia td { display: block; width: 100%; }
  .tabela-cadeia tr {
    background: var(--painel);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e-3);
    margin-bottom: var(--e-2);
  }
  .tabela-cadeia td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-3);
    border-bottom: 1px solid var(--borda);
    padding: var(--e-1) 0;
    text-align: left;
  }
  .tabela-cadeia td::before {
    content: attr(data-rotulo);
    color: var(--mudo);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex: 0 0 auto;
  }
  .col-num small, .tabela-cadeia small { text-align: right; }
}

/* ----------------------------------------------------------------- trava */

.trava-cabecalho { display: flex; flex-direction: column; gap: var(--e-2); }
.trava-titulo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.trava-titulo h2 { font-size: var(--t-2xl); letter-spacing: -0.02em; }
.trava-meta { color: var(--mudo); font-size: var(--t-sm); }

.blocos-dinheiro, .grade-metricas {
  display: grid;
  gap: var(--e-4);
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
}
.blocos-dinheiro { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grade-metricas { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.boleta {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.boleta-qtd { font-size: var(--t-sm); color: var(--mudo); }
.boleta-qtd strong { color: var(--brilho); font-size: var(--t-lg); }
.perna {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto auto;
  gap: var(--e-2);
  align-items: baseline;
  padding: var(--e-2);
  border-radius: var(--raio-sm);
  background: var(--painel2);
  font-size: var(--t-sm);
}
.perna-acao { font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.06em; }
.perna-venda .perna-acao { color: var(--vermelho); }
.perna-compra .perna-acao { color: var(--verde); }
.perna-ticker { color: var(--brilho); font-weight: 600; }
.perna-strike { color: var(--mudo); font-size: var(--t-xs); }
.perna-preco { color: var(--brilho); }
.boleta-nota { font-size: var(--t-xs); color: var(--mudo); }
.boleta-texto {
  font-family: var(--mono);
  font-size: var(--t-xs);
  background: var(--painel2);
  padding: var(--e-3);
  border-radius: var(--raio-sm);
  overflow-x: auto;
  white-space: pre;
}

@media (max-width: 519px) {
  .perna { grid-template-columns: 1fr auto; }
  .perna-strike { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------- posições */

.grade-posicoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--e-3); }
.card-posicao {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  box-shadow: var(--sombra);
}
.card-posicao-alerta { border-left: 3px solid var(--vermelho); }
.card-posicao-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-2); }
.card-posicao-estrategia { display: block; color: var(--mudo); font-size: var(--t-xs); }
.card-posicao-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--e-3); }
.card-posicao-detalhes { display: flex; flex-direction: column; }

/* ------------------------------------------------------------ formulários */

.campo { display: flex; flex-direction: column; gap: var(--e-1); }
.campo input, .campo select { max-width: 22rem; }
.campo-linha input { max-width: 6rem; }
.campo label { font-size: var(--t-xs); color: var(--mudo); text-transform: uppercase; letter-spacing: 0.06em; }
.campo small { font-size: var(--t-xs); color: var(--mudo); }
.campo-linha { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.campo-linha input { width: 6rem; }
.campo-sufixo { font-size: var(--t-sm); color: var(--mudo); }
.campo-previa { color: var(--brilho); font-size: var(--t-sm); white-space: nowrap; }

.form-posicao, .grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-3);
}
.form-acoes { grid-column: 1 / -1; }

/* --------------------------------------------------------------- aprender */

.onboarding {
  max-width: 62ch;
  margin: var(--e-5) auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.onboarding h2 { font-size: var(--t-xl); }
.onboarding-progresso { font-size: var(--t-xs); color: var(--mudo); text-transform: uppercase; letter-spacing: 0.08em; }
.onboarding-previa { color: var(--brilho); font-size: var(--t-sm); }

.lista-marcada { margin: 0; padding-left: var(--e-4); display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-sm); }
.lista-marcada li::marker { color: var(--verde); }
.lista-negativa li::marker { color: var(--vermelho); }

.glossario-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-3); }
.verbete {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.verbete h3 { font-size: var(--t-md); }
.verbete p { font-size: var(--t-sm); color: var(--mudo); }

dialog.glossario {
  max-width: 44ch;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--painel);
  color: var(--texto);
  padding: var(--e-4);
  box-shadow: 0 12px 40px rgb(0 0 0 / 35%);
}
dialog.glossario::backdrop { background: rgb(0 0 0 / 45%); }
dialog.glossario h3 { margin-bottom: var(--e-2); }
dialog.glossario p { font-size: var(--t-sm); margin-bottom: var(--e-4); }