/* Jano — o mesmo vocabulario visual da tela de entrada, estendido para o app.
   Tema escuro assumido de proposito: o produto vive de graficos e numeros. */

:root {
  color-scheme: dark;

  --bg: #070a0f;
  --bg-painel: rgba(16, 22, 32, 0.72);
  --bg-card: #0d1420;
  --fg: #edf0f4;
  --fg-dim: #8a93a2;
  --linha: #1c2431;
  --ouro: #d8a657;
  --alta: #4e9a6b;
  --baixa: #b4555f;

  --display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --ui: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --dados: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* sem isto, qualquer regra nossa com display vence o atributo hidden
   e o elemento escondido aparece assim mesmo */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.5;
}

a { color: inherit; }

.moeda {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background-image: url("img/moeda.png");
  background-size: 100%;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.55);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.marca .nome {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- tela de entrada */

.entrada {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-inline: clamp(16px, 4vw, 44px);
}

.entrada-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px 26px;
  flex-wrap: wrap;
  /* o mapa passa por tras: sem este degrade o texto briga com caixa clara */
  margin-inline: calc(-1 * clamp(16px, 4vw, 44px));
  padding-inline: clamp(16px, 4vw, 44px);
  background: linear-gradient(to bottom, rgba(7, 10, 15, 0.92), rgba(7, 10, 15, 0));
}

.aviso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dados);
  font-size: 11.5px;
  color: var(--fg-dim);
}

.ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 0 10px 1px rgba(216, 166, 87, 0.55);
}

.palco {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 4vw, 56px);
  min-height: 0;
}

.palavra {
  font-family: var(--display);
  font-size: clamp(2.6rem, 8.5vw, 7.5rem);
  line-height: 0.9;
  white-space: nowrap;
}

.cartao {
  justify-self: center;
  width: min(340px, 100%);
  background: var(--bg-painel);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 26px 24px 22px;
  backdrop-filter: blur(14px);
}

.cartao h1 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
}

.cartao .sub {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--fg-dim);
}

.campo { display: grid; gap: 6px; margin-bottom: 14px; }

.campo label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

input[type="text"], input[type="email"], input[type="password"] {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--fg);
  background: rgba(7, 10, 15, 0.6);
  border: 1px solid var(--linha);
  border-radius: 9px;
  padding: 10px 12px;
  width: 100%;
}

input:focus-visible {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(216, 166, 87, 0.16);
}

.botao {
  width: 100%;
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 600;
  color: #140f04;
  background: var(--ouro);
  border: 1px solid var(--ouro);
  border-radius: 9px;
  padding: 11px 14px;
  cursor: pointer;
}

.botao:hover { filter: brightness(1.08); }

.recado {
  margin: 14px 0 0;
  font-family: var(--dados);
  font-size: 11px;
  color: var(--ouro);
}

/* fita de cotacoes */

.fita {
  border-top: 1px solid var(--linha);
  padding-block: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: rgba(7, 10, 15, 0.88);
}

.fita-trilho {
  display: flex;
  width: max-content;
  gap: 34px;
  animation: correr var(--fita-duracao, 70s) linear infinite;
}

@keyframes correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cotacao {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--dados);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cotacao .sigla { color: var(--fg); }
.cotacao .preco { color: var(--fg-dim); }

.fita-nota {
  margin: 8px 0 0;
  font-family: var(--dados);
  font-size: 10.5px;
  color: #5c6574;
}

/* ------------------------------------------------------------- app logado */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--linha);
  flex-wrap: wrap;
}

.topo nav {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: var(--fg-dim);
}

.topo nav a { text-decoration: none; }
.topo nav a:hover { color: var(--fg); }

main {
  padding: clamp(20px, 4vw, 36px) clamp(16px, 4vw, 40px) 60px;
  max-width: 1180px;
  margin: 0 auto;
}

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 4px;
}

.linha-fina {
  color: var(--fg-dim);
  font-size: 13px;
  margin: 0 0 24px;
}

.secao { margin-bottom: 36px; }

.secao > h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 12px;
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}

.ladrilho {
  display: block;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 11px;
  padding: 13px 14px;
  transition: border-color 140ms ease, transform 140ms ease;
}

.ladrilho:hover { border-color: #2c394d; transform: translateY(-1px); }

.ladrilho .sigla {
  font-family: var(--dados);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.ladrilho .valor {
  font-family: var(--dados);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

.ladrilho .var {
  font-family: var(--dados);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ladrilho .nome {
  display: block;
  font-size: 11px;
  color: var(--fg-dim);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alta { color: var(--alta); }
.baixa { color: var(--baixa); }
.sem { color: var(--fg-dim); }

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 28px;
}

.numeros div {
  background: var(--bg-card);
  padding: 14px 16px;
}

.numeros dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 6px;
}

.numeros dd {
  margin: 0;
  font-family: var(--dados);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.grafico {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 11px;
  padding: 16px;
  margin-bottom: 28px;
  overflow-x: auto;
}

.grafico svg { display: block; width: 100%; height: auto; }

.vazio {
  border: 1px dashed var(--linha);
  border-radius: 11px;
  padding: 28px;
  color: var(--fg-dim);
  text-align: center;
}

.vazio code {
  font-family: var(--dados);
  color: var(--ouro);
}

.erro {
  background: rgba(180, 85, 95, 0.14);
  border: 1px solid rgba(180, 85, 95, 0.4);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

@media (max-width: 860px) {
  .palco {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-block: 36px 28px;
  }
  .palavra { font-size: clamp(2.4rem, 15vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .fita-trilho { animation: none; }
}

/* ------------------------------------------------- indicadores fundamentalistas */

.grupo-ind {
  border-left: 2px solid var(--ouro);
  padding-left: 14px;
  margin-bottom: 22px;
}

.grupo-ind > h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 10px;
  letter-spacing: 0;
  text-transform: none;
}

.ind-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 8px;
}

.ind {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ind-rotulo {
  font-size: 11px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ind-calc {
  color: var(--ouro);
  margin-left: 4px;
  cursor: help;
}

.ind-valor {
  font-family: var(--dados);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- seletor de periodo */

.periodos {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.periodo {
  font-family: var(--dados);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid transparent;
}

.periodo:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }

.periodo.ativo {
  color: var(--ouro);
  border-color: rgba(216, 166, 87, 0.42);
  background: rgba(216, 166, 87, 0.10);
}

.periodo-saldo {
  margin-left: auto;
  font-family: var(--dados);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ grafico */

.grafico .malha line {
  stroke: var(--linha);
  stroke-width: 1;
}

.grafico .referencia {
  stroke: var(--fg-dim);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  opacity: 0.65;
}

.grafico text.eixo {
  font-family: var(--dados);
  font-size: 11px;
  fill: var(--fg-dim);
}

.grafico .selo text {
  font-family: var(--dados);
  font-size: 11.5px;
  font-weight: 500;
  fill: #0b0f16;
}

.grafico .volume rect { opacity: 0.42; }

.grafico .datas text {
  font-family: var(--dados);
  font-size: 11px;
  fill: var(--fg-dim);
}

/* mapa do mercado no fundo da tela de entrada */

/* o mapa da tela de entrada e fundo: fixo e atras de tudo.
   O da aba Mapa e conteudo, e fica no fluxo, abaixo do cabecalho.
   Por isso a regra e por classe: o seletor de id venceria a classe
   e deixaria os dois fixos. */
.mapa-fundo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.entrada { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ tabelas */

.tabela-roda {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: 11px;
  margin-bottom: 20px;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabela th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 11px 10px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.tabela td {
  padding: 11px 10px;
  border-bottom: 1px solid rgba(28, 36, 49, 0.6);
  white-space: nowrap;
}

.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.tabela .num {
  text-align: right;
  font-family: var(--dados);
  font-variant-numeric: tabular-nums;
}

.tabela.compacta td, .tabela.compacta th { padding: 8px 14px; }

.cel-ticker {
  font-family: var(--dados);
  font-weight: 500;
  text-decoration: none;
}

.cel-ticker:hover { color: var(--ouro); }

.cel-nome {
  display: block;
  font-size: 11px;
  color: var(--fg-dim);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cel-pct {
  display: block;
  font-size: 11px;
  opacity: 0.8;
}

.peso-barra {
  display: inline-block;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: var(--linha);
  margin-right: 8px;
  vertical-align: middle;
  overflow: hidden;
}

.peso-barra > span {
  display: block;
  height: 100%;
  background: var(--ouro);
}

/* a tabela e larga: em tela estreita ela rola dentro do proprio quadro */
@media (max-width: 1000px) {
  .tabela { font-size: 12px; }
  .tabela td, .tabela th { padding: 10px 8px; }
  .cel-nome { max-width: 120px; }
  .peso-barra { display: none; }
}

/* ---------------------------------------------------------------- importar */

.importar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.importar input[type="file"] {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--fg-dim);
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 9px;
  padding: 9px 12px;
  max-width: 100%;
}

.importar input[type="file"]::file-selector-button {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--linha);
  border-radius: 7px;
  padding: 6px 12px;
  margin-right: 12px;
  cursor: pointer;
}

.botao-estreito { width: auto; padding: 10px 22px; }

.botao-perigo {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--baixa);
  background: none;
  border: 1px solid rgba(180, 85, 95, 0.45);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}

.botao-perigo:hover { background: rgba(180, 85, 95, 0.12); }

/* ------------------------------------------------------------- aba Mapa */

.corpo-mapa {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topo-mapa {
  flex: none;
  position: relative;
  z-index: 2;
  background: var(--bg);
}

.mapa-cheio {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: block;
}

.mapa-resumo {
  font-family: var(--dados);
  font-size: 11.5px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.mapa-resumo .separa { color: var(--linha); }

.topo nav a.aqui { color: var(--ouro); }

/* visivel so para teclado e leitor de tela */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.so-leitor a:focus {
  position: fixed;
  top: 70px;
  left: 16px;
  width: auto;
  height: auto;
  clip: auto;
  background: var(--bg-card);
  border: 1px solid var(--ouro);
  border-radius: 8px;
  padding: 8px 14px;
  z-index: 10;
}

/* --------------------------------------------------------------- escolher ativos */

.busca {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.busca input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--fg);
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 9px;
  padding: 10px 13px;
}

.busca select {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--fg);
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 9px;
  padding: 10px 12px;
}

.busca input:focus-visible, .busca select:focus-visible {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(216, 166, 87, 0.16);
}

.em-linha { display: inline; }

.botao-entra, .botao-saiu {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.botao-entra {
  color: var(--ouro);
  background: rgba(216, 166, 87, 0.10);
  border: 1px solid rgba(216, 166, 87, 0.42);
}

.botao-entra:hover { background: rgba(216, 166, 87, 0.2); }

.botao-saiu {
  color: var(--alta);
  background: rgba(78, 154, 107, 0.12);
  border: 1px solid rgba(78, 154, 107, 0.4);
}

.botao-saiu:hover {
  color: var(--baixa);
  background: rgba(180, 85, 95, 0.14);
  border-color: rgba(180, 85, 95, 0.45);
}

.etiqueta {
  font-size: 11px;
  color: var(--fg-dim);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

.cel-setor {
  font-size: 12px;
  color: var(--fg-dim);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

tr.desligado { opacity: 0.45; }

/* ------------------------------------------------------- seta de direcao */

/* Triangulo desenhado com bordas: nao depende de a fonte ter o glifo, e
   herda a cor do texto, entao acompanha o verde ou o vermelho sozinho. */
.seta {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 5px;
  vertical-align: 0.08em;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.seta-alta { border-bottom: 6px solid currentColor; }
.seta-baixa { border-top: 6px solid currentColor; }

.seta-igual {
  width: 8px;
  height: 2px;
  border: none;
  background: currentColor;
  vertical-align: 0.25em;
  opacity: 0.7;
}

/* ------------------------------------------------------- busca do cabecalho */

.busca-topo {
  position: relative;
  flex: 1 1 220px;
  max-width: 340px;
  min-width: 0;
}

#busca-campo {
  width: 100%;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--fg);
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 9px;
  padding: 8px 12px;
}

#busca-campo::placeholder { color: #566072; }

#busca-campo:focus-visible {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(216, 166, 87, 0.16);
}

.busca-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #0b1220;
  border: 1px solid var(--linha);
  border-radius: 11px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  max-height: 62vh;
  overflow-y: auto;
}

.busca-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "sigla marca" "nome nome";
  gap: 2px 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.busca-item:hover, .busca-item.sob { background: rgba(255, 255, 255, 0.06); }

.busca-sigla {
  grid-area: sigla;
  font-family: var(--dados);
  font-size: 13px;
  font-weight: 500;
}

.busca-sigla b, .busca-nome b {
  color: var(--ouro);
  font-weight: 600;
}

.busca-nome {
  grid-area: nome;
  font-size: 11.5px;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.busca-marca {
  grid-area: marca;
  justify-self: end;
  font-size: 10.5px;
  color: var(--fg-dim);
  white-space: nowrap;
}

.busca-marca .acompanha {
  color: var(--alta);
  font-style: normal;
}

.busca-vazio {
  padding: 12px 10px;
  font-size: 12.5px;
  color: var(--fg-dim);
}

/* ===================================================== carteira redesenhada */

.carteira-topo {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.carteira-topo h2 { margin: 0; }

.carteira-troca {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.aba-carteira {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  text-decoration: none;
  color: var(--fg-dim);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 5px 13px;
}

.aba-carteira:hover { color: var(--fg); }

.aba-carteira.ativa {
  color: var(--ouro);
  border-color: rgba(216, 166, 87, 0.45);
  background: rgba(216, 166, 87, 0.10);
}

.aba-conta {
  font-family: var(--dados);
  font-size: 10.5px;
  opacity: 0.65;
}

.aba-nova {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--fg-dim);
  background: none;
  border: 1px dashed var(--linha);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
}

.aba-nova:hover { color: var(--ouro); border-color: rgba(216, 166, 87, 0.45); }

.caixa-nova {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.caixa-nova input {
  flex: 1 1 280px;
  min-width: 0;
  font-family: var(--ui);
  font-size: 13.5px;
  color: var(--fg);
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 9px;
  padding: 10px 13px;
}

/* ---- cartões do topo ---- */

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.cartao {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cartao-rotulo {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.cartao-valor {
  font-family: var(--dados);
  font-size: clamp(14.5px, 1.75vw, 21px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cartao-pe {
  font-size: 11.5px;
  color: var(--fg-dim);
}

/* ---- quadros lado a lado ---- */

.duas-colunas {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  margin-bottom: 30px;
}

@media (max-width: 900px) {
  .duas-colunas { grid-template-columns: 1fr; }
}

.quadro {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 18px;
  min-width: 0;
}

.quadro > h3 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

.g-evolucao { width: 100%; height: auto; display: block; }
.g-evolucao .malha line { stroke: var(--linha); }
.g-evolucao text { font-family: var(--dados); font-size: 10.5px; fill: var(--fg-dim); }
.g-evolucao .barra-base { fill: var(--ouro); fill-opacity: 0.55; }
.g-evolucao .barra-ganho { fill: var(--alta); fill-opacity: 0.85; }
.g-evolucao .barra-perda { fill: var(--baixa); fill-opacity: 0.85; }

.legenda {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 11.5px;
  color: var(--fg-dim);
  margin: 10px 0 0;
}

.pastilha {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}

.pastilha-base { background: var(--ouro); opacity: 0.6; }
.pastilha-ganho { background: var(--alta); }
.pastilha-perda { background: var(--baixa); }

/* ---- rosca ---- */

.rosca-area {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.g-rosca { width: 150px; height: 150px; flex: none; }

.fatia-0, .fatia-cor-0 { stroke: #d8a657; background: #d8a657; }
.fatia-1, .fatia-cor-1 { stroke: #4e9a6b; background: #4e9a6b; }
.fatia-2, .fatia-cor-2 { stroke: #5a7fb8; background: #5a7fb8; }
.fatia-3, .fatia-cor-3 { stroke: #a86fa0; background: #a86fa0; }
.fatia-4, .fatia-cor-4 { stroke: #c0795a; background: #c0795a; }
.fatia-5, .fatia-cor-5 { stroke: #6fa8a0; background: #6fa8a0; }

.rosca-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 150px;
  min-width: 0;
  display: grid;
  gap: 7px;
}

.rosca-lista li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.rosca-nome {
  flex: 1;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rosca-peso {
  font-family: var(--dados);
  font-variant-numeric: tabular-nums;
}

/* ---- grupos de ativos ---- */

.titulo-secao {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 16px;
}

.grupo-classe {
  border: 1px solid var(--linha);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}

.grupo-cabeca {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--linha);
}

.grupo-nome { font-size: 13.5px; font-weight: 600; }
.grupo-conta { font-size: 11.5px; color: var(--fg-dim); }

.grupo-num {
  font-family: var(--dados);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.grupo-num + .grupo-num { margin-left: 0; }

.grupo-classe .tabela-roda {
  border: none;
  border-radius: 0;
  margin: 0;
}

/* ---- ações sobre a carteira ---- */

.cuidado { margin-top: 34px; }

.acoes-carteira {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.em-fila { display: flex; gap: 8px; }

.em-fila input {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--fg);
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 8px 12px;
}

.botao-suave {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--fg-dim);
  background: none;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}

.botao-suave:hover { color: var(--fg); border-color: #2c394d; }


/* ------------------------------------------------- carteira vazia */

.vazio-carteira {
  text-align: left;
  padding: 24px 26px;
  margin-bottom: 28px;
}

.vazio-titulo {
  font-size: 15px;
  color: var(--fg);
  margin: 0 0 8px;
}

.vazio-carteira > p { margin: 0 0 16px; max-width: 62ch; }

.vazio-acoes {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.vazio-ou { font-size: 12.5px; color: var(--fg-dim); }

/* ====================================================== pop-up de lançamento */

.botao-add {
  width: auto;
  padding: 9px 18px;
  margin-left: auto;
  flex: none;
}

.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 6vh, 70px) 16px;
  overflow-y: auto;
}

.modal {
  width: min(480px, 100%);
  background: #0b1220;
  border: 1px solid var(--linha);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.modal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--linha);
}

.modal-topo h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
}

.modal-fechar {
  font-size: 20px;
  line-height: 1;
  color: var(--fg-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}

.modal-fechar:hover { color: var(--fg); }

.modal-abas {
  display: flex;
  gap: 4px;
  padding: 12px 18px 0;
}

.modal-aba {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--fg-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  padding: 8px 14px;
  cursor: pointer;
}

.modal-aba:hover { color: var(--fg); }

.modal-aba.ativa {
  color: var(--ouro);
  border-color: var(--linha);
  border-bottom-color: transparent;
  background: rgba(216, 166, 87, 0.08);
}

.modal-corpo {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.modal-corpo .campo { margin-bottom: 0; }

.campo-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.campo-busca { position: relative; }

.campo-dica {
  font-size: 11.5px;
  color: var(--alta);
  min-height: 14px;
}

.modal-corpo select,
.modal-corpo input[type="date"] {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--fg);
  background: rgba(7, 10, 15, 0.6);
  border: 1px solid var(--linha);
  border-radius: 9px;
  padding: 10px 12px;
  width: 100%;
}

.modal-corpo input[type="file"] {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--fg-dim);
  background: rgba(7, 10, 15, 0.6);
  border: 1px solid var(--linha);
  border-radius: 9px;
  padding: 10px 12px;
}

.modal-corpo input[type="file"]::file-selector-button {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--linha);
  border-radius: 7px;
  padding: 6px 12px;
  margin-right: 12px;
  cursor: pointer;
}

.modal-total {
  margin: 0;
  font-family: var(--dados);
  font-size: 13px;
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
}

.modal-nota {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fg-dim);
}

.modal-nota code {
  font-family: var(--dados);
  font-size: 11px;
}

/* a lista de sugestão dentro do pop-up usa o mesmo desenho do cabeçalho */
.campo-busca .busca-lista { top: calc(100% - 12px); }

.botao-apagar {
  font-size: 15px;
  line-height: 1;
  color: var(--fg-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 7px;
  cursor: pointer;
}

.botao-apagar:hover {
  color: var(--baixa);
  border-color: rgba(180, 85, 95, 0.4);
}


/* ========================================================= feed de notícias */

.feed {
  margin-bottom: 26px;
}

.feed-banda {
  position: relative;
  display: block;
  min-height: 64px;
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 12px;
  overflow: hidden;
}

.feed-item {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms ease;
}

.feed-item.atual { opacity: 1; visibility: visible; }

.feed-banda:hover .feed-item.atual { background: rgba(255, 255, 255, 0.025); }

.feed-fonte {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ouro);
  border: 1px solid rgba(216, 166, 87, 0.35);
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}

.feed-titulo {
  font-size: 14px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.feed-quando {
  font-family: var(--dados);
  font-size: 11px;
  color: var(--fg-dim);
  white-space: nowrap;
}

.feed-abrir {
  font-size: 11.5px;
  color: var(--fg-dim);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease;
}

.feed-banda:hover .feed-abrir { opacity: 1; color: var(--ouro); }

.feed-pontos {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 9px;
}

.feed-pontos span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--linha);
  transition: background 300ms ease;
}

.feed-pontos span.atual { background: var(--ouro); }

@media (max-width: 700px) {
  .feed-item { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
  .feed-item { position: static; }
  .feed-item:not(.atual) { display: none; }
  .feed-titulo { white-space: normal; }
  .feed-abrir { display: none; }
}

/* ---- lista completa ---- */

.noticias-lista {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: 11px;
  overflow: hidden;
}

.noticias-lista a {
  display: grid;
  gap: 4px;
  padding: 13px 16px;
  text-decoration: none;
  background: var(--bg-card);
}

.noticias-lista a:hover { background: #111a28; }

.n-titulo { font-size: 13.5px; color: var(--fg); }

.n-resumo {
  font-size: 12px;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.n-pe {
  font-family: var(--dados);
  font-size: 10.5px;
  color: #5c6574;
}

.n-dono { opacity: 0.7; }

/* ------------------------------------------------------- cortar em cinco

   Uma regra para todas as listas longas do site. Quem marca `data-cortado` e
   o cortar.js, na hora que roda: sem ele a marca nunca aparece e a lista fica
   inteira, que e o estado certo para quem nao tem script. O seletor nao diz o
   que o filho e, so a posicao dele — por isso serve igual para <li> de
   noticia, <tr> de lancamento e cartao de ativo em grade. */
[data-cortado="sim"] > :nth-child(n+6) { display: none; }

/* Selo de quantos veiculos cobriram o mesmo assunto. Dourado porque e a cor
   do Jano falando, nao do veiculo: o numero e conta nossa, nao manchete. */
.n-eco {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgba(216, 166, 87, 0.35);
  border-radius: 999px;
  font-family: var(--dados);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ouro);
  vertical-align: 1px;
  white-space: nowrap;
}

/* O botao de abrir a lista. Largura cheia porque ele e a borda de baixo do
   bloco: o olho le "o conteudo continua aqui", e nao "ha um botao solto". */
.mostrar-mais {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid #1d2635;
  border-radius: 6px;
  background: transparent;
  font-family: var(--dados);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.mostrar-mais:hover {
  border-color: rgba(216, 166, 87, 0.4);
  color: var(--ouro);
}


/* ------------------------------------------- explicação do indicador */

.ind { position: relative; }

.ind-rotulo {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ind-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ind-ajuda {
  flex: none;
  width: 15px;
  height: 15px;
  margin-left: auto;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--fg-dim);
  background: none;
  border: 1px solid var(--linha);
  border-radius: 50%;
  cursor: help;
  padding: 0;
}

.ind-ajuda:hover,
.ind-ajuda[aria-expanded="true"] {
  color: var(--ouro);
  border-color: rgba(216, 166, 87, 0.5);
  background: rgba(216, 166, 87, 0.12);
}

.ind-balao {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  z-index: 50;
  width: max(240px, 100%);
  max-width: 300px;
  display: block;
  background: #0b1220;
  border: 1px solid var(--linha);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-dim);
  white-space: normal;
}

.ind-balao strong {
  display: block;
  color: var(--fg);
  font-size: 12.5px;
  margin-bottom: 5px;
}

.ind-balao em {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 11px;
  color: var(--ouro);
}

/* ------------------------------------------------------------------ plano */

.grafico-plano {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 14px 10px 6px;
  margin-top: 10px;
}

.g-curva { width: 100%; height: auto; display: block; }

.g-curva .malha line { stroke: var(--linha); }

.g-curva text {
  font-family: var(--dados);
  font-size: 10.5px;
  fill: var(--fg-dim);
}

/* As duas faixas: o aportado por baixo, o juro por cima. A ordem importa --
   o poligono do total e desenhado primeiro e o do aportado cobre a base. */
.g-curva .faixa-juros { fill: var(--alta); fill-opacity: 0.78; }
.g-curva .faixa-aportado { fill: var(--ouro); fill-opacity: 0.55; }

/* O respiro entre as faixas, na cor do fundo: a fronteira existe mesmo para
   quem nao separa as duas cores. */
.g-curva .respiro {
  fill: none;
  stroke: var(--bg-card);
  stroke-width: 2;
}

.g-curva .meta {
  stroke: var(--fg-dim);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.g-curva .meta-texto { fill: var(--fg-dim); }

.g-curva .cruzamento {
  fill: var(--fg);
  stroke: var(--bg-card);
  stroke-width: 2;
}

.g-curva .cruzamento-texto { fill: var(--fg); font-size: 11.5px; }
.g-curva .ponta { fill: var(--alta); }
.g-curva .ponta-aportado { fill: var(--ouro); }

/* ---- resultado: tres numeros, grafico de linhas e tabela mes a mes ---- */

.plano-cartoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 6px 0 14px;
}
.plano-cartao {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.plano-cartao span { font-size: 12px; color: var(--fg-dim); }
.plano-cartao strong { font-family: var(--dados); font-size: 17px; font-weight: 600; }
.plano-cartao-destaque { border-color: var(--ouro); background: rgba(216, 166, 87, 0.12); }
.plano-cartao-destaque strong { color: var(--ouro); }
@media (max-width: 560px) {
  .plano-cartoes { grid-template-columns: 1fr; gap: 8px; }
  .plano-cartao { flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left; }
}

.g-linhas { width: 100%; height: auto; display: block; }
/* no celular, 920 de largura viram 340 px e o texto some: o grafico ganha
   largura minima e rola de lado, como a tabela */
@media (max-width: 560px) {
  .grafico-plano:has(.g-linhas) { overflow-x: auto; }
  .g-linhas { min-width: 640px; }
  .g-linhas text { font-size: 13px; }
}
.g-linhas text { font-family: var(--dados); font-size: 10.5px; fill: var(--fg-dim); }
.g-linhas .malha line { stroke: var(--linha); }
.g-linhas polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-linhas .linha-total { stroke: var(--alta); }
.g-linhas .linha-investido { stroke: var(--ouro); }
/* bolinhas vazadas, com anel da cor do fundo por dentro: se separam da linha */
.g-linhas circle { fill: var(--bg-card); stroke-width: 2; }
.g-linhas .bola-total { stroke: var(--alta); }
.g-linhas .bola-investido { stroke: var(--ouro); }
.g-linhas .ponto { cursor: default; }
.g-linhas .ponto:hover .bola-total { fill: var(--alta); }
.g-linhas .ponto:hover .bola-investido { fill: var(--ouro); }
.g-linhas .meta { stroke: var(--fg-dim); stroke-width: 1; stroke-dasharray: 4 4; }
.g-linhas .cruzamento { fill: var(--fg); stroke: var(--bg-card); stroke-width: 2; }
.g-linhas .cruzamento-texto { fill: var(--fg); font-size: 11.5px; }
.g-linhas .ponta { fill: var(--alta); }
.g-linhas .ponta-investido { fill: var(--ouro); }

.tabela-rolagem {
  max-height: 380px;
  overflow: auto;
  border: 1px solid var(--linha);
  border-radius: 10px;
  margin-top: 10px;
}
.tabela-rolagem:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.tabela-meses { margin: 0; width: 100%; }
.tabela-meses th { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.tabela-meses td, .tabela-meses th { text-align: right; font-family: var(--dados); white-space: nowrap; }
.tabela-meses td:first-child, .tabela-meses th:first-child { text-align: center; }
.tabela-meses .virada-ano td {
  text-align: left;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ouro);
  background: rgba(216, 166, 87, 0.06);
}
.tabela-larga { overflow-x: auto; }
.tabela-larga .tabela td, .tabela-larga .tabela th { white-space: nowrap; }
.plano-falta { margin: 8px 0 0; }
.plano-falta strong { color: var(--ouro); }

/* ---- formularios do plano ---- */

.forma-plano,
.forma-conta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  margin-top: 12px;
}

.forma-plano label,
.forma-conta label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  color: var(--fg-dim);
  flex: 1 1 150px;
}

.forma-plano input,
.forma-plano select,
.forma-conta input,
.forma-conta select {
  font-family: var(--dados);
  font-size: 13.5px;
  color: var(--fg);
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 7px;
  padding: 9px 10px;
  min-width: 0;
}

.forma-plano label.caixa {
  flex-direction: row;
  align-items: center;
  flex-basis: 100%;
  gap: 8px;
}

.forma-plano .dica {
  color: var(--ouro);
  font-style: normal;
}

.forma-plano button,
.forma-conta button {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--bg);
  background: var(--ouro);
  border: 0;
  border-radius: 7px;
  padding: 10px 16px;
  cursor: pointer;
}

.tabela button.apagar {
  font-family: var(--ui);
  font-size: 11.5px;
  color: var(--fg-dim);
  background: none;
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
}

.tabela button.apagar:hover { color: var(--baixa); border-color: var(--baixa); }

/* Os ladrilhos do painel mostram nome de empresa, que cabe numa linha. Os do
   plano explicam uma conta, e cortar a frase com reticencias esconderia
   justamente a soma do retorno, que existe para ser lida inteira. */
.ladrilho-texto .nome {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45;
}

/* "Nao alocado" nao e um destino de dinheiro, e a falta de um -- e a paleta
   do projeto nao tem uma terceira cor que se separe de ouro e azul na
   medicao. Entao a fatia e vazada e tracejada: distincao por forma, que
   funciona para qualquer tipo de visao e tambem impressa em preto e branco. */
.fatia-vazia {
  stroke: var(--fg-dim);
  stroke-opacity: 0.45;
  stroke-dasharray: 3 4;
}

.pastilha-fatia-0 { background: #d8a657; }
.pastilha-fatia-2 { background: #5a7fb8; }

.pastilha-fatia-vazia {
  background: none;
  border: 1px dashed var(--fg-dim);
}

/* Subtitulo dentro de uma secao: mesma familia do h3, um tom menor, para a
   rosca da carteira nao competir com o titulo da secao que a contem. */
.secao h4 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 22px 0 10px;
}

/* A rosca nasceu dentro do quadro estreito da Carteira, onde a legenda
   esticar ate a borda e o certo. Numa secao de largura cheia, como as do
   plano, isso joga o valor para o canto e abre um vao no meio. Aqui o
   conjunto fica centrado e a legenda para de crescer. */
.rosca-centro { justify-content: center; }

.rosca-centro .rosca-lista {
  flex: 0 1 auto;
  min-width: 210px;
  max-width: 400px;
}

/* ---- barras dos marcos ---- */

.g-marcos { width: 100%; height: auto; display: block; }

.g-marcos .malha line { stroke: var(--linha); }

.g-marcos text {
  font-family: var(--dados);
  font-size: 10.5px;
  fill: var(--fg-dim);
}

/* Mesmo par da curva: dourado e o dinheiro do dono, verde e o que o juro fez.
   Repetir a cor entre os dois graficos e o que permite ler um depois do outro
   sem reaprender a legenda. */
.g-marcos .barra-aportado { fill: var(--ouro); fill-opacity: 0.55; }
.g-marcos .barra-juros { fill: var(--alta); fill-opacity: 0.78; }

.g-marcos .topo-barra { fill: var(--fg); font-size: 11px; }
.g-marcos .rotulo-barra { fill: var(--fg-dim); }

.link-convite code {
  display: block;
  font-family: var(--dados);
  font-size: 12.5px;
  color: var(--ouro);
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 7px;
  padding: 10px 12px;
  word-break: break-all;
}

/* ---- tela de convite ---- */

/* E publica e e a primeira coisa que a pessoa convidada ve do Jano: precisa
   parecer parte do produto, nao um formulario solto. */
.convite {
  max-width: 420px;
  margin: 14vh auto 0;
  padding: 28px 26px 30px;
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 14px;
}

.convite h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  margin: 0 0 8px;
}

.convite .linha-fina { margin: 0 0 22px; }
.convite .erro { margin-bottom: 16px; }

/* ======================================================= A Travessia */

/* Sub-abas do Plano. Barra fina abaixo do cabecalho principal: as duas telas
   sao o mesmo assunto visto de dois angulos, e abas dizem isso melhor que
   dois itens soltos no menu de cima. */
.sub-abas {
  display: flex;
  gap: 2px;
  margin: 0 0 18px;
  border-bottom: 1px solid #141c28;
}

.sub-abas a {
  padding: 9px 16px;
  border-bottom: 2px solid transparent;
  font-family: var(--dados);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  text-decoration: none;
}

.sub-abas a:hover { color: var(--fg); }

.sub-abas a.atual {
  border-bottom-color: var(--ouro);
  color: var(--ouro);
}

/* --- balanca: barras divergentes do alvo --- */

.g-balanca { width: 100%; height: auto; margin: 6px 0 18px; }

.bal-faixa { fill: rgba(216, 166, 87, 0.07); }
.bal-alvo { stroke: var(--ouro); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }

.bal-barra { opacity: 0.85; }
.bal-barra.abaixo  { fill: var(--baixa); }
.bal-barra.acima   { fill: var(--ouro); }
.bal-barra.no-alvo { fill: var(--alta); }

/* seta de corte: a barra encostou na borda e o desvio real e maior */
.bal-corte { fill: var(--fg-dim); font-size: 13px; }

.bal-nome  { fill: var(--fg); font-size: 12px; }
.bal-peso  { fill: var(--fg); font-family: var(--dados); font-size: 12px; }
.bal-falta { fill: var(--fg-dim); font-family: var(--dados); font-size: 10.5px; }
.bal-rotulo { fill: var(--ouro); font-family: var(--dados); font-size: 10px; }

/* --- rota: as quatro linhas convergindo --- */

.g-rota { width: 100%; height: auto; margin: 10px 0 14px; }

.rota-faixa { fill: rgba(78, 154, 107, 0.09); }
.rota-alvo  { stroke: var(--ouro); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.6; }
.rota-eixo  { stroke: #1d2635; stroke-width: 1; }
.rota-marca { stroke: var(--ouro); stroke-width: 1; opacity: 0.5; }
.rota-marca-txt { fill: var(--ouro); font-family: var(--dados); font-size: 10px; }
.rota-eixo-txt  { fill: #5c6574; font-family: var(--dados); font-size: 9.5px; }

.rota-linha { fill: none; stroke-width: 1.8; }
.rota-nome  { font-family: var(--dados); font-size: 10px; }

/* Cada quadrante com a sua cor, e o rotulo na ponta com a mesma cor da linha:
   assim nao e preciso casar legenda com tracado. */
.rota-acoes_br,     .rota-t-acoes_br     { stroke: #c98b4b; fill: #c98b4b; }
.rota-imoveis,      .rota-t-imoveis      { stroke: #4e9a6b; fill: #4e9a6b; }
.rota-caixa,        .rota-t-caixa        { stroke: #5b7fa8; fill: #5b7fa8; }
.rota-internacional,.rota-t-internacional{ stroke: #9c6fa8; fill: #9c6fa8; }

.resposta-grande {
  margin: 14px 0 10px;
  padding: 14px 16px;
  border: 1px solid rgba(216, 166, 87, 0.25);
  border-radius: 6px;
  background: rgba(216, 166, 87, 0.04);
  font-size: 14px;
  color: var(--fg);
}

.resposta-grande strong { color: var(--ouro); }

/* --- tabelas ricas --- */

.tabela-rica {
  width: 100%;
  margin: 10px 0 16px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.tabela-rica th {
  padding: 8px 10px;
  border-bottom: 1px solid #1d2635;
  font-family: var(--dados);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c6574;
  text-align: left;
}

.tabela-rica td {
  padding: 10px;
  border-bottom: 1px solid #111a28;
  vertical-align: top;
  color: var(--fg);
}

.tabela-rica .num { text-align: right; font-family: var(--dados); white-space: nowrap; }
.tabela-rica .celula-texto { color: var(--fg-dim); line-height: 1.5; max-width: 30em; }
.tabela-rica .celula-fina { font-size: 11px; color: #5c6574; }
.tabela-rica.compacta td, .tabela-rica.compacta th { padding: 6px 10px; }

.tabela-rica tr.q-abaixo td:first-child  { box-shadow: inset 2px 0 0 var(--baixa); }
.tabela-rica tr.q-acima td:first-child   { box-shadow: inset 2px 0 0 var(--ouro); }
.tabela-rica tr.q-no-alvo td:first-child { box-shadow: inset 2px 0 0 var(--alta); }

.q-letra {
  font-family: var(--serifa);
  font-size: 20px;
  color: var(--ouro);
  text-align: center;
  width: 2em;
}

h4.sub {
  margin: 18px 0 2px;
  font-family: var(--dados);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c6574;
}

/* --- mandamentos --- */

.mandamentos { margin: 8px 0 0; padding: 0; list-style: none; }

.mandamentos li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #111a28;
}

.man-marca { font-size: 15px; line-height: 1.2; }
.mandamentos li.feito .man-marca { color: var(--alta); }
.mandamentos li.pendente .man-marca { color: #3c4556; }

.man-corpo { display: flex; flex-direction: column; gap: 3px; }
.man-corpo strong { font-size: 13px; color: var(--fg); }
.man-detalhe { font-size: 12px; color: var(--fg-dim); line-height: 1.5; max-width: 54em; }

.man-nota {
  font-family: var(--dados);
  font-size: 10.5px;
  color: var(--ouro);
}

/* Compromisso que o Jano nao tem como conferir fica marcado. Um "cumprido"
   que o sistema aferiu e um que a pessoa declarou nao valem o mesmo, e
   apaga-los na mesma tinta seria o app se dando credito que nao tem. */
.man-selo {
  align-self: flex-start;
  padding: 1px 7px;
  border: 1px solid #2a3344;
  border-radius: 999px;
  font-family: var(--dados);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: #5c6574;
}

/* --- garimpo --- */

.garimpo-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }

.garimpo-abas a {
  padding: 6px 12px;
  border: 1px solid #1d2635;
  border-radius: 999px;
  font-family: var(--dados);
  font-size: 11px;
  color: var(--fg-dim);
  text-decoration: none;
}

.garimpo-abas a:hover { border-color: #2a3344; color: var(--fg); }

.garimpo-abas a.atual {
  border-color: rgba(216, 166, 87, 0.45);
  background: rgba(216, 166, 87, 0.08);
  color: var(--ouro);
}

.garimpo tr.sem-fund td { opacity: 0.6; }

.nota-sel {
  margin-left: 5px;
  padding: 1px 6px;
  border: 1px solid rgba(216, 166, 87, 0.3);
  border-radius: 999px;
  font-family: var(--dados);
  font-size: 9.5px;
  color: var(--ouro);
}

.garimpo .pro, .garimpo .con, .garimpo .sem-dado {
  display: block;
  font-size: 11px;
  line-height: 1.5;
}

.garimpo .pro { color: var(--alta); }
.garimpo .con { color: var(--baixa); }
.garimpo .sem-dado { color: #5c6574; font-style: italic; }

.setores { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; padding: 0; list-style: none; }

.setores li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 5px 11px;
  border: 1px solid #1d2635;
  border-radius: 4px;
}

.s-nome { font-size: 11.5px; color: var(--fg); }
.s-conta { font-family: var(--dados); font-size: 10px; color: var(--ouro); }

.form-linha { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.form-linha .campo { flex: 0 1 280px; }
.campo-marca { flex: 1 1 320px; }
.campo-marca label { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.campo-marca input { width: auto; }

/* O rotulo de um campo e uma etiqueta curta e vai em caixa alta; a frase ao
   lado de um checkbox e uma frase, e frase em caixa alta grita. */
.campo-marca label { text-transform: none; letter-spacing: 0; }

/* A epigrafe das Quatro Portas. Serifa e recuo: e a unica frase da tela que
   nao esta explicando um numero, e o olho precisa saber disso antes de ler. */
.epigrafe {
  margin: 14px 0 22px;
  padding-left: 16px;
  border-left: 2px solid rgba(216, 166, 87, 0.3);
  font-family: var(--serifa);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 46em;
}

/* =============================================== O cruzamento dos portões */

.portao {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04070c;
  animation: portao-surge 0.5s ease both;
}

@keyframes portao-surge { from { opacity: 0; } to { opacity: 1; } }

/* A perspectiva vive no palco, não nas folhas: é ela que faz as portas
   girarem para dentro da tela em vez de deslizarem de lado. */
/* Alto e estreito de proposito: portal imponente e mais alto que largo. Na
   primeira versao era quase quadrado e lia como porta de garagem. A largura
   tambem e o dobro exato da folha, para o viewBox de 300x700 de cada metade
   cair sem deformar cravo nem argola. */
.portao-cena {
  position: relative;
  width: min(86vw, 600px);
  /* A proporcao fica TRAVADA em 6:7, e nao solta em vh, porque dentro das
     folhas ha uma fotografia — a moeda de Jano. O SVG estica para preencher
     (preserveAspectRatio="none"), e com desenho puro ninguem nota; com foto,
     deforma o rosto. Travando a proporcao, o viewBox de 300x700 de cada metade
     sempre cai exato e nada estica. */
  aspect-ratio: 6 / 7;
  max-height: 90vh;
  perspective: 1500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A luz que vaza por trás, crescendo conforme as folhas abrem. */
.portao-luz {
  position: absolute;
  inset: 12% 16%;
  background: radial-gradient(ellipse at center,
              rgba(216, 166, 87, 0.30) 0%,
              rgba(216, 166, 87, 0.07) 45%,
              transparent 72%);
  opacity: 0;
  animation: portao-luz 3.4s 1.1s ease-out both;
}

@keyframes portao-luz {
  from { opacity: 0; transform: scale(0.65); }
  to   { opacity: 1; transform: scale(1); }
}

.portao-folha {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  backface-visibility: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.85);
}

.portao-folha svg { width: 100%; height: 100%; display: block; }

/* Cada folha gira na dobradiça de fora, como porta de verdade. A curva é
   lenta no começo e solta no fim: portão pesado não arranca, ele cede. */
.portao-folha.esquerda {
  left: 0;
  transform-origin: left center;
  animation: abre-esquerda 3.6s 0.7s cubic-bezier(0.62, 0.015, 0.55, 0.82) both;
}

.portao-folha.direita {
  right: 0;
  transform-origin: right center;
  animation: abre-direita 3.6s 0.7s cubic-bezier(0.62, 0.015, 0.55, 0.82) both;
}

@keyframes abre-esquerda {
  0%   { transform: rotateY(0deg); }
  7%   { transform: rotateY(1.4deg); }   /* o tranco antes de ceder */
  100% { transform: rotateY(-108deg); }
}

@keyframes abre-direita {
  0%   { transform: rotateY(0deg); }
  7%   { transform: rotateY(-1.4deg); }
  100% { transform: rotateY(108deg); }
}

/* A mensagem fica ATRAS das folhas, e nao na frente: o sentido da cena e que
   ela estava ali o tempo todo e as portas a revelam. Com z-index por cima, o
   texto aparecia escrito sobre o bronze enquanto as folhas ainda giravam, o
   que entrega o truque e estraga a revelacao. */
.portao-mensagem {
  position: relative;
  z-index: 0;
  max-width: 34em;
  padding: 0 24px;
  text-align: center;
  opacity: 0;
  animation: portao-texto 1.5s 3.3s ease-out both;
}

@keyframes portao-texto {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.portao-selo {
  margin: 0 0 10px;
  font-family: var(--dados);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ouro);
  opacity: 0.75;
}

.portao-mensagem h2 {
  margin: 0 0 18px;
  font-family: var(--serifa);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ouro);
}

.portao-corpo {
  margin: 0 0 13px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #c9d1dc;
}

.portao-corpo strong { color: var(--ouro); }

/* O último parágrafo é o aviso, não a comemoração: equilíbrio não é chegada,
   e a tela não pode deixar essa parte com a mesma voz do resto. */
.portao-aviso { color: var(--fg-dim); font-size: 13px; }

.portao-fechar {
  margin-top: 20px;
  padding: 11px 30px;
  border: 1px solid var(--ouro);
  border-radius: 4px;
  background: transparent;
  font-family: var(--dados);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ouro);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.portao-fechar:hover { background: var(--ouro); color: #0a0d13; }

/* Quem pediu menos movimento recebe a mesma mensagem, sem o giro. A conquista
   não pode depender da animação para existir. */
@media (prefers-reduced-motion: reduce) {
  .portao-folha { display: none; }
  .portao-luz, .portao-mensagem, .portao { animation-duration: 0.01s; animation-delay: 0s; }
}


/* A moldura: fica atras das folhas e nao gira. */
.portao-moldura {
  position: absolute;
  top: -7%;
  left: -6.7%;
  width: 113.4%;
  height: 107%;
  z-index: 0;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
}

/* As folhas por cima de tudo, e surdas ao clique: elas sao cenario, e depois
   de abertas nao podem ficar engolindo o botao com a area girada delas. */
.portao-folha { z-index: 2; pointer-events: none; }


/* Aviso de terreno: condicao do negocio, nao do preco da acao. Cor de atencao
   e nao de reprovacao — o papel continua na lista, e varios deles sao bons
   apesar do aviso. Vermelho aqui seria o Jano dizendo "nao compre", que nao e
   o que ele sabe. */
.terreno {
  display: inline-block;
  margin: 0 5px 4px 0;
  padding: 1px 8px;
  border: 1px solid rgba(216, 166, 87, 0.4);
  border-radius: 999px;
  font-family: var(--dados);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: var(--ouro);
  cursor: help;
  white-space: nowrap;
}


/* ====================== Cartoes de preco: Graham e Bazin ============ */

.cartao-preco {
  margin: 34px 0 10px;
  padding: 20px 22px;
  border: 1px solid #1d2635;
  border-radius: 8px;
  background: #0b1018;
}

.cartao-preco h3 {
  margin: 0 0 16px;
  font-family: var(--dados);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c6574;
}

.cp-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gn {
  flex: 1 1 150px;
  padding: 14px 16px;
  border: 1px solid #141c28;
  border-radius: 6px;
  background: #080c12;
}

/* O preco justo e o numero que a pessoa veio ver; os outros dois existem para
   dar sentido a ele. A moldura dourada diz qual e qual sem precisar de seta. */
.gn.destaque {
  border-color: rgba(216, 166, 87, 0.35);
  background: rgba(216, 166, 87, 0.05);
}

.gn-rotulo {
  display: block;
  margin-bottom: 6px;
  font-family: var(--dados);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c6574;
}

.gn-valor {
  display: block;
  font-family: var(--dados);
  font-size: 19px;
  color: var(--fg);
}

.gn.destaque .gn-valor { color: var(--ouro); }

/* A conta a vista. Formula escondida vira numero de oraculo, e o leitor fica
   sem como discordar — que e o contrario do que um indicador deve permitir. */
.cp-conta {
  margin: 14px 0 4px;
  font-family: var(--dados);
  font-size: 12px;
  color: var(--fg-dim);
}

.cp-legenda {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: #5c6574;
}


/* Comparacao com os pares. Numero de empresa diferente so quer dizer alguma
   coisa ao lado do numero da vizinha, e e para isso que esta tabela existe. */
.rolagem-lateral { overflow-x: auto; }

.comparacao { min-width: 680px; }

/* A linha do proprio papel fica marcada: numa tabela de oito linhas parecidas,
   achar a sua toda vez custa um segundo, e esse segundo se paga em toda
   leitura. */
.comparacao tr.eu td {
  background: rgba(216, 166, 87, 0.06);
}

.comparacao tr.eu td:first-child {
  box-shadow: inset 2px 0 0 var(--ouro);
}

.comparacao td a { color: var(--fg); text-decoration: none; }
.comparacao td a:hover { color: var(--ouro); }

/* Aviso de dado atrasado. Cor de atencao, nao de erro: dado velho nao e defeito
   do Jano, e uma condicao que a pessoa precisa saber para nao decidir em cima
   de um preco que nao e mais o preco. */
.atrasado {
  margin: 10px 0 18px;
  padding: 14px 18px;
  border: 1px solid rgba(216, 166, 87, 0.35);
  border-left-width: 3px;
  border-radius: 6px;
  background: rgba(216, 166, 87, 0.05);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-dim);
}

.atrasado strong { color: var(--ouro); }

/* Nome curto no meio da frase fica na linha; so o comando inteiro vira bloco.
   A primeira versao punha tudo em bloco e picava a frase em pedacos soltos. */
.atrasado code {
  padding: 1px 6px;
  border-radius: 3px;
  background: #080c12;
  font-size: 11.5px;
  color: var(--fg);
}

.atrasado code.comando {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #080c12;
  font-size: 11px;
  color: var(--fg);
  overflow-x: auto;
  white-space: pre;
}


/* ===================== Comparacao com as referencias ===================== */

.indices-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.janelas { display: flex; gap: 4px; }

.janelas a {
  padding: 5px 13px;
  border: 1px solid #1d2635;
  border-radius: 999px;
  font-family: var(--dados);
  font-size: 10.5px;
  color: var(--fg-dim);
  text-decoration: none;
}

.janelas a:hover { border-color: #2a3344; color: var(--fg); }

.janelas a.atual {
  border-color: rgba(216, 166, 87, 0.45);
  background: rgba(216, 166, 87, 0.08);
  color: var(--ouro);
}

.g-indices { width: 100%; height: auto; margin: 12px 0 8px; }

.gi-grade { stroke: #141c28; stroke-width: 1; }
.gi-zero  { stroke: #2a3344; stroke-width: 1; stroke-dasharray: 3 3; }
.gi-eixo  { fill: #5c6574; font-family: var(--dados); font-size: 9.5px; }
.gi-nome  { font-family: var(--dados); font-size: 10px; }

/* A simulacao fica numa linha so, lendo como frase: "se voce tivesse investido
   [R$ 1.000,00] ha 5 anos, hoje teria". O campo no meio do texto deixa claro
   que e ele que manda no resto. */
.simulacao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 10px;
  font-size: 13px;
  color: var(--fg-dim);
}

.simulacao input {
  width: 130px;
  padding: 7px 10px;
  border: 1px solid #1d2635;
  border-radius: 5px;
  background: #080c12;
  font-family: var(--dados);
  font-size: 13px;
  color: var(--fg);
}

.simulacao input:focus { outline: none; border-color: rgba(216, 166, 87, 0.5); }

.botao-fino {
  padding: 6px 14px;
  border: 1px solid #1d2635;
  border-radius: 5px;
  background: transparent;
  font-family: var(--dados);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  cursor: pointer;
}

.botao-fino:hover { border-color: rgba(216, 166, 87, 0.4); color: var(--ouro); }

.viram { margin: 6px 0 14px; padding: 0; list-style: none; }

.viram li {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 2px;
  border-bottom: 1px solid #111a28;
}

.viram-marca { width: 10px; height: 10px; border-radius: 2px; }
.viram-nome { font-size: 13px; color: var(--fg); }
.viram-valor { font-family: var(--dados); font-size: 14px; color: var(--fg); }
.viram-pct { font-family: var(--dados); font-size: 11px; min-width: 5.5em; text-align: right; }

/* ------------------------------------------------- o cabeçalho em tela de mão

   Em 375px os sete itens do menu não cabem em uma linha, e o último — "Sair" —
   ficava cortado pela borda. Deixar o nav rolar de lado esconderia o mesmo item
   atrás de um gesto que ninguém adivinha; então ele quebra em duas linhas e
   ocupa a largura toda, que é o que faz todos aparecerem de uma vez. */
@media (max-width: 560px) {
  .topo {
    padding: 14px 16px;
    gap: 10px;
  }

  .topo nav {
    flex-wrap: wrap;
    width: 100%;
    gap: 14px 18px;
    font-size: 13.5px;
  }

  /* alvo de toque: 13px de texto dá uma área pequena demais para o dedo */
  .topo nav a { padding: 3px 0; }
}


/* ============================================ Proventos recebidos ======= */

.g-proventos { width: 100%; height: auto; margin: 12px 0 6px; }

.pv-grade { stroke: #141c28; stroke-width: 1; }
.pv-eixo  { fill: #5c6574; font-family: var(--dados); font-size: 9.5px; }
.pv-barra { fill: var(--alta); opacity: 0.85; }

.proventos-lista { margin: 10px 0 14px; padding: 0; list-style: none; }

.proventos-lista li {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 2fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 11px 2px;
  border-bottom: 1px solid #111a28;
}

.pv-ativo { display: flex; flex-direction: column; gap: 2px; }
.pv-ativo a { color: var(--fg); text-decoration: none; }
.pv-ativo a:hover { color: var(--ouro); }

.pv-dito { font-size: 12.5px; color: var(--fg-dim); line-height: 1.5; }
.pv-valor { font-family: var(--dados); font-size: 14px; color: var(--alta); }

/* Quem ainda nao recebeu fica em tom de espera; quem nao distribui fica neutro.
   Nenhum dos dois em vermelho: nao receber dividendo de uma empresa que nao paga
   nao e erro nem prejuizo, e so o modelo dela. Pintar de vermelho sugeriria que
   algo deu errado. */
.pv-ainda_nao .pv-valor,
.pv-nao_verificado .pv-valor,
.pv-nao_distribui .pv-valor { color: #3c4556; }
.pv-nao_distribui .pv-dito { color: #5c6574; }
/* "Ainda nao busquei" e um estado do Jano, nao da empresa, e some sozinho na
   proxima coleta. Fica mais apagado que "nao distribui", que e um fato sobre
   o papel e nao vai mudar. */
.pv-nao_verificado .pv-dito { color: #4e5665; font-style: italic; }

@media (max-width: 620px) {
  .proventos-lista li { grid-template-columns: 1fr; gap: 4px; }
  .pv-valor { font-size: 15px; }
}


/* ===================================================== sobre a empresa,
   lista de estudo e conviccao
   ================================================================== */

.ativo-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -4px 0 20px;
}

.atalho-conviccao {
  font-family: var(--dados);
  font-size: 11.5px;
  color: var(--fg-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--linha);
}

.atalho-conviccao strong { color: var(--ouro); letter-spacing: 0.08em; }
.atalho-conviccao:hover { color: var(--ouro); }

/* ------------------------------------------------------- o coracao */

/* Desenhado em CSS e nao com o caractere de fonte: o glifo do coracao vem
   colorido por emoji em boa parte dos sistemas e ignora `color`, o que
   destruiria a diferenca entre marcado e nao marcado. */
.botao-favorito {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

/* Contorno quando nao marcado, preenchido quando marcado. A primeira versao
   desenhava o coracao com dois pseudo-elementos girados e eles nao se
   encontravam: saia como dois carocos do lado do outro. Dois arcos que
   precisam casar sao mais do que CSS de borda resolve bem. */
/* Em `em` e nao em pixel: icone ao lado de texto tem de acompanhar o texto.
   O numero nao e palpite — 1em de caixa, com o desenho ocupando tres quartos
   do viewBox, poe o coracao em 9px, que e exatamente a altura da maiuscula do
   rotulo ao lado. E ai que um icone inline parece do tamanho certo: ele mede o
   mesmo que a letra, e nao a linha inteira. A primeira versao usava 11px
   fixos, quase a altura da linha, e no celular isso virou um coracao enorme ao
   lado de uma palavra pequena. */
.coracao {
  width: 1em;
  height: 1em;
  flex: none;
}

.coracao path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.botao-favorito:hover {
  color: var(--ouro);
  border-color: rgba(216, 166, 87, 0.45);
}

.botao-favorito.marcado {
  color: var(--ouro);
  border-color: rgba(216, 166, 87, 0.5);
  background: rgba(216, 166, 87, 0.08);
}

.botao-favorito.marcado .coracao path { fill: currentColor; }

/* ------------------------------------------------- nota em estrelas

   Cheia e vazia em cores diferentes, e e o ponto todo: no mesmo elemento as
   duas herdariam o dourado e cinco simbolos dourados leem como cinco
   estrelas, mesmo quando dois sao ocos. O cabecalho chegou a dizer cinco para
   uma nota dois. */
.nota-estrelas { letter-spacing: 0.06em; white-space: nowrap; }
.nota-estrelas .cheias { color: var(--ouro); }
.nota-estrelas .vazias { color: #39425180; }

/* Na tabela do garimpo o botao e so o coracao: a coluna e estreita e a
   palavra repetida vinte vezes vira ruido. Esconder o rotulo, e nao zerar a
   fonte do botao: o icone mede o seu tamanho em `em`, e `font-size: 0` o
   faria sumir junto. Escondido assim, o leitor de tela continua lendo. */
/* Padding generoso e nao icone maior: no celular o alvo do dedo precisa de
   altura, mas o coracao tem de continuar do tamanho da letra. Sao duas coisas
   diferentes e so uma delas aparece. */
.tabela-rica .botao-favorito { gap: 0; padding: 10px 13px; }

.tabela-rica .rotulo-fav {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------- sobre a empresa */

.empresa-fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 20px;
  margin: 0 0 18px;
}

.empresa-fatos > div { min-width: 0; }
.empresa-fatos .largo { grid-column: 1 / -1; }

.empresa-fatos dt {
  font-family: var(--dados);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 3px;
}

.empresa-fatos dd {
  margin: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.empresa-fatos a { color: var(--ouro); text-decoration: none; }
.empresa-fatos a:hover { text-decoration: underline; }

/* A procedencia do texto. Discreta, mas nao escondida: e ela que impede a
   pessoa de achar que o Jano escreveu um paragrafo em ingles por descuido. */
.empresa-fonte {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg-dim);
  border-left: 2px solid rgba(216, 166, 87, 0.3);
  padding-left: 12px;
  margin: 0 0 14px;
  max-width: 68ch;
}

.empresa-texto p {
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #b7bfcc;
  max-width: 76ch;
}

.empresa .ressalva {
  font-style: italic;
  margin-top: 16px;
}

/* ---------------------------------------------------- a conviccao */

.estrelas-forma { margin: 0 0 16px; }

.estrelas {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}

/* Cada estrela e um <button type="submit"> com o seu proprio valor. Sem
   JavaScript a pessoa ainda marca a nota, porque o clique e um envio de
   formulario e nao um evento. Widget de estrela costuma ser <div> com
   onclick, e ai sem script nao se marca nada. */
.estrela {
  font-size: 23px;
  line-height: 1;
  padding: 2px 1px;
  color: #2a3342;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.12s, transform 0.12s;
}

.estrela.cheia { color: var(--ouro); }
.estrela:hover { transform: scale(1.14); }

/* Passar o mouse acende a estrela e todas a esquerda dela, que e como a
   pessoa le "vou dar tres". `:has` com o irmao seguinte faria isso sem
   script; aqui o sentido e o contrario, entao a regra olha para tras. */
.estrelas:hover .estrela { color: #2a3342; }
.estrelas .estrela:hover,
.estrelas .estrela:hover ~ .estrela { color: #2a3342; }
.estrelas:hover .estrela:has(~ .estrela:hover),
.estrelas .estrela:hover { color: rgba(216, 166, 87, 0.75); }

.estrelas-nota {
  font-family: var(--dados);
  font-size: 11.5px;
  color: var(--fg-dim);
  margin-left: 8px;
}

.porque { display: block; max-width: 62ch; }

.porque > span {
  display: block;
  font-size: 11.5px;
  color: var(--fg-dim);
  margin-bottom: 5px;
}

.porque em { opacity: 0.75; }

.porque input {
  width: 100%;
  font-size: 13px;
  padding: 8px 11px;
  border-radius: 7px;
}

.conviccao-agora {
  font-size: 13px;
  color: #b7bfcc;
  margin: 0 0 10px;
}

.conviccao-porque {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-left: 2px solid rgba(216, 166, 87, 0.35);
  background: rgba(216, 166, 87, 0.04);
  font-size: 13.5px;
  font-style: italic;
  color: #c3cad6;
  max-width: 68ch;
}

.conviccao-historico {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.conviccao-historico li {
  display: grid;
  grid-template-columns: 70px 92px 1fr 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 12.5px;
}

.conviccao-historico .h-porque {
  grid-column: 2 / -1;
  color: var(--fg-dim);
  font-style: italic;
}

.h-nota { color: var(--ouro); letter-spacing: 0.06em; white-space: nowrap; }
.h-quando, .h-preco, .h-desde { font-family: var(--dados); color: var(--fg-dim); }

@media (max-width: 640px) {
  .conviccao-historico li { grid-template-columns: 70px 1fr; }
  .conviccao-historico .h-porque { grid-column: 1 / -1; }
}


/* ============================================================== o mural

   A conversa do grupo, presa ao ativo. Mora abaixo da conviccao: a pessoa ve
   preco, grafico, Graham, Bazin, pares, a nota particular dela, e so entao o
   que o grupo disse. Opiniao depois do numero. */

.mural-novo { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }

.mural-novo textarea {
  flex: 1;
  min-height: 46px;
  resize: vertical;
  font-family: var(--ui);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: 8px;
}

.mural-novo button, .mural-responder button {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ouro);
  background: rgba(216, 166, 87, 0.10);
  border: 1px solid rgba(216, 166, 87, 0.42);
  border-radius: 7px;
  padding: 9px 15px;
  cursor: pointer;
  white-space: nowrap;
}

.mural-novo button:hover, .mural-responder button:hover {
  background: rgba(216, 166, 87, 0.2);
}

.mural-lista { list-style: none; margin: 0; padding: 0; }

.mural-item { padding: 12px 0; border-bottom: 1px solid var(--linha); }

/* A resposta anda para dentro, e so um nivel: nao ha terceiro, porque a
   gravacao nunca cria um. */
.mural-resposta {
  margin-left: 26px;
  padding-left: 14px;
  border-left: 2px solid var(--linha);
  border-bottom: 0;
}

.mural-cabeca {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 5px;
}

.mural-autor { font-size: 13px; }

.mural-quando, .mural-marca {
  font-family: var(--dados);
  font-size: 10.5px;
  color: var(--fg-dim);
}

.mural-marca { font-style: italic; }

/* `pre-wrap` e o que preserva a quebra de linha: sem ele, um comentario de
   tres paragrafos vira um bloco so, porque HTML colapsa espaco em branco.
   `anywhere` impede que uma URL longa estoure a largura no celular. */
.mural-texto {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #b7bfcc;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 76ch;
}

.mural-texto a { color: var(--ouro); }

.mural-sumiu { font-style: italic; color: #4e5665; }

.mural-pe { margin-top: 7px; }

.mural-responder { display: flex; gap: 8px; }

.mural-responder input {
  flex: 1;
  max-width: 46ch;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 6px;
}

/* A edicao fica a vista so dentro da janela de 15 minutos. E conveniencia:
   quem decide e a rota, e esconder o campo nao protege nada sozinho. */
.mural-editar { display: flex; gap: 8px; margin: 6px 0; }

.mural-editar input {
  flex: 1;
  max-width: 60ch;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}

.mural-editar button {
  font-family: var(--ui);
  font-size: 11.5px;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
}

.mural-editar button:hover { color: var(--ouro); border-color: rgba(216, 166, 87, 0.4); }

.mural-pe { display: flex; gap: 10px; align-items: center; }
.mural-pe .mural-responder { flex: 1; }

/* A barra de reacoes. Os seis ficam apagados ate alguem usar; quem tem
   contagem acende. A sua fica com a borda dourada — e assim que se sabe,
   olhando, que aquele numero inclui voce. */
.mural-reacoes { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }

.reacao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 1;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  opacity: 0.32;
  transition: opacity 0.12s, border-color 0.12s, background 0.12s;
}

.mural-item:hover .reacao { opacity: 0.6; }
.reacao:hover { opacity: 1; background: rgba(255, 255, 255, 0.05); }

/* Com contagem, deixa de ser oferta e passa a ser informacao. */
.reacao.tem {
  opacity: 1;
  border-color: var(--linha);
  background: rgba(255, 255, 255, 0.03);
}

.reacao.minha {
  opacity: 1;
  border-color: rgba(216, 166, 87, 0.5);
  background: rgba(216, 166, 87, 0.08);
}

.r-conta {
  font-family: var(--dados);
  font-size: 10.5px;
  color: var(--fg-dim);
}

.reacao.minha .r-conta { color: var(--ouro); }

/* Conversa nova, no painel. Fica acima das noticias de proposito: para quem
   abre o painel, o que o grupo falou vale mais que o que a imprensa falou. */
.cn-lista { list-style: none; margin: 0; padding: 0; }

.cn-lista a {
  display: grid;
  grid-template-columns: 90px 130px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
}

.cn-lista a:hover { background: rgba(255, 255, 255, 0.02); }

.cn-ticker { font-family: var(--dados); font-size: 12.5px; color: var(--ouro); }
.cn-quantos, .cn-quem { font-size: 12px; color: var(--fg-dim); }
.cn-quem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
  .cn-lista a { grid-template-columns: 1fr; gap: 2px; }
}

/* O contador no menu. Conta PAPEIS, nao comentarios: "3" querendo dizer tres
   lugares para visitar vale mais que "3" querendo dizer tres frases num lugar
   so. Fica no Painel porque e la que mora o bloco que explica o numero. */
.cn-conta {
  display: inline-block;
  min-width: 15px;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(216, 166, 87, 0.18);
  border: 1px solid rgba(216, 166, 87, 0.4);
  font-family: var(--dados);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--ouro);
  text-align: center;
  vertical-align: 1px;
}

/* Os campos de editar e responder sao <textarea> e nao <input> porque
   <input type=text> APAGA quebra de linha ao enviar — regra do HTML, nao do
   navegador. Com input, editar um comentario de tres paragrafos devolvia as
   palavras grudadas, e sem volta. Aqui eles so precisam PARECER uma linha. */
.mural-editar textarea,
.mural-responder textarea {
  flex: 1;
  min-height: 34px;
  resize: vertical;
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.5;
  padding: 7px 10px;
  border-radius: 6px;
}

.mural-responder textarea { max-width: 46ch; font-size: 12.5px; }
.mural-editar textarea { max-width: 60ch; }



/* ------------------------------------------------------------------ Lab
   No estilo dos prints que o inspiraram: título grosso com a conclusão, nome
   da empresa grande, barra grossa com o valor na ponta, número em destaque.
   Fundo escuro do Jano; verde para alta, vermelho para prejuízo e alerta,
   cinza-claro para o neutro — o branco-cinza dos prints. */

.lab-mural {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.lab-cartao {
  background: #0b0b0d;
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 22px 22px 18px;
  min-width: 0;
}

.lab-cheio { margin: 16px 0 24px; }

.lab-titulo { display: block; text-decoration: none; color: inherit; margin-bottom: 16px; }

.lab-titulo h3,
.lab-frase {
  font-family: var(--ui);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
}
.lab-titulo h3 { font-size: 24px; line-height: 1.18; margin: 6px 0 0; }
.lab-frase { font-size: 32px; line-height: 1.15; margin: 6px 0 16px; }
.lab-titulo:hover h3 { color: var(--ouro); }

.lab-tema {
  display: block;
  font-size: 13px;
  color: var(--fg-dim);
}

.lab-janelas { margin: 0 0 14px; }

.lab-sub {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-dim);
  margin: 18px 0 8px;
}

/* ranking: nome | barra grossa com o valor logo depois da ponta */
.lab-ranking { list-style: none; margin: 0; padding: 0; }

.lab-linha {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}

.lab-nome {
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  color: #e9e7e3;
  text-decoration: none;
  text-align: right;
}
.lab-nome:hover { color: var(--ouro); }
.lab-nome-ruim { color: #e7787c; }

.lab-pista { display: flex; align-items: center; gap: 10px; min-width: 0; }

.lab-barra {
  display: block;
  flex: 0 1 auto;
  height: 24px;
  border-radius: 0 4px 4px 0;
}
.lab-sobe   { background: #3fa772; }
.lab-cai    { background: #c9555b; }
.lab-mau    { color: #e7787c; }
.lab-barra.lab-mau { background: #c9555b; }
.lab-neutra { background: #d8d4cc; }

.lab-ponta {
  flex: 0 0 auto;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}

.lab-nota {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-dim);
  margin-top: 1px;
}

/* os dois destaques do print 17 */
.lab-destaques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lab-destaque,
.lab-quadro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #141416;
  border: 1px solid #1f1f23;
  border-radius: 12px;
  padding: 16px 16px 14px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.lab-destaque:hover { border-color: rgba(216, 166, 87, 0.5); }

.lab-destaque-nome {
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  color: #e9e7e3;
}

.lab-heroi {
  font-family: var(--ui);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.lab-heroi.lab-sobe { background: none; color: #4cbf84; }
.lab-heroi.lab-mau { color: #e7787c; }

.lab-destaque-bal {
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: #e9e7e3;
  margin-top: 6px;
}

/* a conta do print 15 */
.lab-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.lab-quadro-rot { font-size: 13px; color: var(--fg-dim); }
.lab-quadro .lab-heroi { margin: 6px 0 2px; }

/* colunas do print 11 */
.lab-colunas { display: block; width: 100%; height: auto; margin-top: 6px; }
.lab-colunas a:hover rect { opacity: 0.85; }
.lab-eixo { stroke: #2a2a2e; stroke-width: 1; }
.lab-col-mau { fill: #c9555b; }
.lab-col-neutra { fill: #d8d4cc; }
.lab-col-valor {
  fill: #fff; font-family: var(--ui); font-size: 17px; font-weight: 800; text-anchor: middle;
}
.lab-col-nome {
  fill: #e9e7e3; font-family: var(--ui); font-size: 14px; font-weight: 600; text-anchor: middle;
}
.lab-col-reg { fill: var(--fg-dim); font-family: var(--ui); font-size: 11px; text-anchor: middle; }

.lab-legenda {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-dim); margin: 10px 0 0;
}
.lab-chip { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lab-mau-fundo { background: #c9555b; }

.lab-conferir { color: var(--ouro); border-bottom: 1px dotted currentColor; cursor: help; }

.lab-mais {
  display: inline-block; margin-top: 12px; font-size: 13px;
  color: var(--fg-dim); text-decoration: none;
}
.lab-mais:hover { color: var(--ouro); }

.lab-como { max-width: 720px; font-size: 14px; line-height: 1.6; }
.lab-como h3 { font-size: 13px; font-weight: 600; color: var(--fg-dim); margin: 0 0 8px; }

.lab-volta { margin: 0 0 12px; font-size: 13px; }
.lab-volta a { color: var(--fg-dim); text-decoration: none; }
.lab-volta a:hover { color: var(--ouro); }

.lab-fonte { color: var(--fg-dim); font-size: 12px; margin: 8px 0 0; }

@media (max-width: 560px) {
  .lab-cartao { padding: 18px 14px 14px; }
  .lab-titulo h3 { font-size: 21px; }
  .lab-frase { font-size: 25px; }
  .lab-heroi { font-size: 34px; }
  .lab-destaque-bal { font-size: 14px; }
  .lab-linha { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
  .lab-nome, .lab-ponta { font-size: 13px; }
  .lab-barra { height: 20px; }
}

/* ------------------------------------------------------- Lab · busca avançada */

.bq-abas { display: flex; gap: 22px; border-bottom: 1px solid var(--linha); margin: 0 0 18px; }
.bq-aba {
  font-family: var(--ui); font-size: 17px; font-weight: 700; color: var(--fg-dim);
  text-decoration: none; padding: 8px 2px 10px; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.bq-aba:hover { color: var(--fg); }
.bq-aba.ativo { color: var(--ouro); border-bottom-color: var(--ouro); }

.bq-caixa {
  display: block;
  background: #0b0b0d; border: 1px solid var(--linha); border-radius: 14px;
  padding: 18px 20px 20px; margin: 0 0 16px;
}
.bq-titulo {
  font-family: var(--ui); font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg); margin: 0 0 14px;
  padding-bottom: 6px; border-bottom: 2px solid var(--ouro); display: inline-block;
}

.bq-salvos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bq-salvos-texto { margin: 0; flex: 1 1 220px; }
.bq-carregar select { min-width: 200px; }
.bq-copiado { font-size: 12px; color: var(--alta); margin: 10px 0 0; }

.bq-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; cursor: pointer; list-style: none;
  background: rgba(216, 166, 87, 0.12); color: var(--ouro); border: 1px solid rgba(216, 166, 87, 0.3);
  font-size: 16px;
}
.bq-icone::-webkit-details-marker { display: none; }
.bq-perigo { background: rgba(180, 85, 95, 0.18); color: #e7787c; border-color: rgba(180, 85, 95, 0.4); }
.bq-mais-acoes { position: relative; }
.bq-mais-acoes[open] .bq-em-linha {
  position: absolute; right: 0; top: 44px; z-index: 5; display: flex; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--linha); border-radius: 10px; padding: 8px;
}

.bq-setores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px; margin-bottom: 18px;
}
.bq-campo { display: grid; gap: 6px; }
.bq-campo > span, .bq-rotulo, .bq-selo legend {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim);
}
.bq-setores select, .bq-carregar select, .bq-acrescentar select,
.bq-numeros input, .bq-salvar input, .bq-em-linha input {
  background: var(--bg-card); color: var(--fg); border: 1px solid var(--linha);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; width: 100%;
}
.bq-setores select:disabled { opacity: 0.5; }

.bq-selo { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bq-selo legend { margin-bottom: 8px; }
.bq-pilula span {
  display: inline-block; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linha); font-size: 14px;
}
.bq-pilula input { position: absolute; opacity: 0; pointer-events: none; }
.bq-pilula input:checked + span { border-color: var(--ouro); color: var(--ouro); background: rgba(216, 166, 87, 0.1); }
.bq-pilula input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }
.bq-selo-nota { margin: 0 0 0 4px; }

.bq-ind-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bq-acrescentar select { width: auto; }

.bq-indicadores {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px;
}
.bq-ind { background: #141416; border: 1px solid #1f1f23; border-radius: 12px; padding: 14px 14px 10px; }
.bq-ind-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.bq-ind-nome { font-family: var(--ui); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.bq-info {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--fg-dim); color: var(--fg-dim);
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center; cursor: help;
}

/* duas alças num trilho só: os dois ranges sobrepostos, só a bolinha clica */
.bq-trilho { position: relative; height: 22px; margin: 0 4px 12px; }
.bq-trilho::before {
  content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 5px;
  border-radius: 3px; background: #2a2a2e;
}
.bq-cheio { position: absolute; top: 9px; height: 5px; border-radius: 3px; background: var(--ouro); }
.bq-trilho input[type="range"] {
  position: absolute; inset: 0; width: 100%; margin: 0; background: none;
  pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 2;
}
.bq-trilho input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #0b0b0d; border: 3px solid var(--ouro); cursor: grab;
}
.bq-trilho input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: #0b0b0d; border: 3px solid var(--ouro); cursor: grab;
}
.bq-trilho input[type="range"]::-webkit-slider-runnable-track { background: none; }
.bq-trilho input[type="range"]::-moz-range-track { background: none; }

.bq-numeros { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-dim); }
.bq-numeros input { text-align: center; padding: 6px; font-family: var(--dados); }
.bq-pontas { font-size: 11px; color: var(--fg-dim); margin: 8px 0 0; text-align: center; }

.bq-acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 18px; }
.bq-espaco { flex: 1; }
.bq-botao {
  display: inline-block; padding: 10px 18px; border-radius: 9px; cursor: pointer; list-style: none;
  border: 1px solid var(--linha); background: var(--bg-card); color: var(--fg);
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none;
}
.bq-botao::-webkit-details-marker { display: none; }
.bq-botao:hover { border-color: var(--ouro); }
.bq-principal { background: var(--ouro); color: #111; border-color: var(--ouro); }
.bq-salvar[open] summary { border-color: var(--ouro); }
.bq-salvar-campo { display: flex; gap: 6px; margin-top: 8px; }

.bq-resultado { margin-top: 8px; }
.lab-titulo-res { font-family: var(--ui); font-size: 26px; font-weight: 800; margin: 6px 0 6px; }
.bq-tabela th a { color: inherit; text-decoration: none; }
.bq-tabela th a:hover { color: var(--ouro); }
.bq-cel { white-space: nowrap; }
.bq-mini { display: block; height: 4px; margin-top: 4px; background: #2a2a2e; border-radius: 2px; overflow: hidden; }
.bq-mini > span { display: block; height: 100%; background: var(--ouro); }
.lab-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ logos
   Quadrados de cantos arredondados, como os da fonte. Contidos de propósito:
   no topo do ativo, grande demais empurrava o nome para baixo no celular. */
.logo {
  display: inline-block; flex: 0 0 auto; vertical-align: middle;
  border-radius: 6px; object-fit: cover; background: #1a1a1e;
}
.logo-p { width: 20px; height: 20px; border-radius: 5px; }
.logo-m { width: 34px; height: 34px; border-radius: 8px; }
.logo-g { width: 44px; height: 44px; border-radius: 10px; }
.logo-iniciais {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 800; color: var(--fg-dim);
  border: 1px solid var(--linha); letter-spacing: -0.02em;
}
.logo-p.logo-iniciais { font-size: 6px; }
.logo-m.logo-iniciais { font-size: 9px; }
.logo-g.logo-iniciais { font-size: 11px; }
@media (max-width: 560px) {
  .logo-m { width: 28px; height: 28px; }
  .logo-g { width: 38px; height: 38px; }
}
.sigla, .cel-ticker { display: inline-flex; align-items: center; gap: 6px; }
.ativo-titulo { display: flex; align-items: center; gap: 10px; }
.lab-nome { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.lab-linha { grid-template-columns: 96px minmax(0, 1fr); }
.lab-destaque-nome { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 560px) { .lab-linha { grid-template-columns: 84px minmax(0, 1fr); } }

/* ------------------------------------------------------------ Lab · galeria */
.gal-setores { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.gal-setores a {
  font-size: 13px; color: var(--fg); text-decoration: none; padding: 6px 12px;
  border: 1px solid var(--linha); border-radius: 999px;
}
.gal-setores a:hover { border-color: var(--ouro); color: var(--ouro); }
.gal-setores span { color: var(--fg-dim); margin-left: 4px; }
.gal-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
@media (max-width: 560px) { .gal-empresa { padding: 12px 10px; } .gal-cod { font-size: 14px; } }
.gal-empresa {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  background: #0b0b0d; border: 1px solid var(--linha); border-radius: 12px;
  padding: 14px; text-decoration: none; color: inherit;
}
.gal-empresa:hover { border-color: rgba(216, 166, 87, 0.5); }
.gal-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.gal-cod { font-family: var(--ui); font-size: 16px; font-weight: 800; }
.gal-nome { font-size: 13px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-seg { font-size: 12px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-preco { display: flex; justify-content: space-between; font-family: var(--dados); font-size: 12px; margin-top: 6px; }
.lab-atalhos { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------- o mural, comprimido
   Ações atrás de ícone; reações como no Instagram; meia tela com "mostrar
   mais"; fotos limpas pelo servidor. */

.mural-novo { flex-direction: column; align-items: stretch; }
.mural-novo-pe { display: flex; align-items: center; gap: 10px; }
.mural-novo-pe .mural-enviar { margin-left: auto; }

.mural-enviar {
  font-family: var(--ui); font-size: 12px; color: var(--ouro); cursor: pointer; white-space: nowrap;
  background: rgba(216, 166, 87, 0.10); border: 1px solid rgba(216, 166, 87, 0.42);
  border-radius: 7px; padding: 8px 14px;
}
.mural-enviar:hover { background: rgba(216, 166, 87, 0.2); }

.mural-icone {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 6px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--fg-dim);
  font-size: 16px; line-height: 1; list-style: none;
}
.mural-icone::-webkit-details-marker { display: none; }
.mural-icone:hover, details[open] > .mural-icone { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
.mural-icone.copiado { color: var(--alta); }
.mural-perigo:hover { color: var(--baixa); }
.mural-coracao { font-size: 18px; }
.mural-reagiu { font-size: 17px; }
.mural-foto input { display: none; }

/* O formulário de responder/editar abre embaixo da barra, na largura dela.
   `display: contents` no <details> resolveria sem posicionar, mas o Chrome
   não o aplica a <details> — o formulário saía espremido ao lado do ícone.
   A barra abre o espaço com :has() enquanto um deles está aberto. */
.mural-acoes {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 6px;
}
.mural-acoes:has(> .mural-det[open]) { padding-bottom: 96px; }
.mural-det { display: inline-flex; }
.mural-det[open] > .mural-form { position: absolute; left: 0; right: 0; top: 40px; }
.mural-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 6px 0 4px; }
.mural-form textarea {
  flex: 1 1 220px; min-height: 34px; resize: vertical; font-family: var(--ui);
  font-size: 13px; line-height: 1.5; padding: 7px 10px; border-radius: 6px;
}

/* reagir: um ícone, e os seis numa barrinha que flutua */
.mural-reagir { position: relative; display: inline-flex; }
.mural-menu-reacoes {
  position: absolute; bottom: calc(100% + 6px); left: -4px; z-index: 6;
  display: flex; gap: 2px; padding: 5px 6px; border-radius: 999px;
  background: #16161a; border: 1px solid #2a2a2e; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(4px) scale(0.96);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}
.mural-menu-reacoes button {
  font-size: 21px; line-height: 1; padding: 4px 5px; border-radius: 50%;
  background: none; border: 0; cursor: pointer; transition: transform 100ms ease;
}
.mural-menu-reacoes button:hover, .mural-menu-reacoes button:focus-visible { transform: scale(1.3); }
.mural-menu-reacoes button.minha { background: rgba(216, 166, 87, 0.18); }
@media (hover: hover) {
  .mural-reagir:hover .mural-menu-reacoes { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.mural-reagir:focus-within .mural-menu-reacoes,
.mural-reagir.aberto .mural-menu-reacoes { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.mural-contagem {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--dados); font-size: 12px; color: var(--fg-dim); cursor: default;
}
.mural-contagem-emojis { font-size: 14px; letter-spacing: -2px; }

/* fotos: até três por linha, quadradas no fio, inteiras ao abrir */
.mural-imagens { display: grid; gap: 4px; margin: 8px 0 2px; max-width: 520px; }
.mural-imagens-1 { grid-template-columns: minmax(0, 360px); }
.mural-imagens-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mural-imagens-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mural-imagens img {
  display: block; width: 100%; height: auto; border-radius: 8px; background: #141416;
}
.mural-imagens-2 img, .mural-imagens-3 img { aspect-ratio: 1; object-fit: cover; }
.mural-imagens-1 img { max-height: 420px; object-fit: contain; }

.mural-previa { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--fg-dim); }
.mural-previa img { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; }

/* o fio de respostas, recolhido em "ver N respostas" */
.mural-fio { margin: 4px 0 0 4px; }
.mural-fio > summary {
  font-size: 12px; color: var(--fg-dim); cursor: pointer; padding: 4px 0; list-style: none;
}
.mural-fio > summary::before { content: "── "; }
.mural-fio > summary::-webkit-details-marker { display: none; }
.mural-fio > summary:hover { color: var(--ouro); }
.mural-respostas .mural-item:last-child { padding-bottom: 4px; }

/* meia tela: a lista para na metade da altura, com um degradê que avisa
   que há mais embaixo */
.mural-corpo.mural-cortado {
  max-height: 50vh; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, #000 75%, transparent);
}

.mural-item:target { background: rgba(216, 166, 87, 0.06); border-radius: 8px; }

@media (max-width: 560px) {
  .mural-resposta { margin-left: 10px; padding-left: 10px; }
  .mural-icone { min-width: 36px; height: 36px; }      /* dedo, não cursor */
}

/* ------------------------------------------------------- voltar ao topo
   Só no celular: no computador a rolagem do mouse resolve, e um botão
   flutuante em tela larga cobriria número de tabela. */
.ao-topo {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgba(16, 16, 20, 0.92); color: var(--ouro);
  border: 1px solid rgba(216, 166, 87, 0.5); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  font-size: 20px; cursor: pointer;
}
.ao-topo:active { transform: scale(0.94); }
@media (max-width: 760px) {
  .ao-topo:not([hidden]) { display: inline-flex; }
}

/* ------------------------------------------------------- como funciona?
   A explicação de cada número fica recolhida: à vista, só o número, a conta e
   o veredito. Quem quer entender o porquê abre. */
.como-funciona { margin: 10px 0 0; }
.como-funciona > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--ouro); padding: 4px 0;
}
.como-funciona > summary::-webkit-details-marker { display: none; }
.como-funciona > summary::before {
  content: "›"; display: inline-block; font-size: 16px; line-height: 1;
  transition: transform 140ms ease;
}
.como-funciona[open] > summary::before { transform: rotate(90deg); }
.como-funciona > summary:hover { text-decoration: underline; }
.como-funciona[open] > summary { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .como-funciona > summary::before { transition: none; } }

/* --------------------------------------------------- resumo da manhã (IA) */
.resumo-dia {
  background: #0b0b0d; border: 1px solid var(--linha); border-left: 3px solid var(--ouro);
  border-radius: 12px; padding: 16px 18px 12px; margin: 0 0 18px;
}
.resumo-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.resumo-topo h3 { margin: 0; font-family: var(--ui); font-size: 16px; font-weight: 800; }
.resumo-ia {
  font-family: var(--dados); font-size: 10px; letter-spacing: 0.08em; color: var(--ouro);
  border: 1px solid rgba(216, 166, 87, 0.45); border-radius: 999px; padding: 1px 7px; cursor: help;
}
.resumo-lista { list-style: none; margin: 0; padding: 0; }
.resumo-lista li { padding: 7px 0; border-bottom: 1px solid var(--linha); }
.resumo-lista li:last-child { border-bottom: 0; }
.resumo-lista p { margin: 0 0 3px; font-size: 14.5px; line-height: 1.5; }
.resumo-fontes { font-size: 12px; color: var(--fg-dim); }
.resumo-fontes a { color: var(--fg-dim); }
.resumo-fontes a:hover { color: var(--ouro); }
.resumo-aviso { margin: 8px 0 0; font-size: 11.5px; color: var(--fg-dim); line-height: 1.5; }

/* notícias do dia, recolhidas: a faixa do topo e o resumo já mostram o dia */
.noticias-recolhidas > summary.noticias-abrir {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--ouro); padding: 6px 0;
}
.noticias-recolhidas > summary::-webkit-details-marker { display: none; }
.noticias-recolhidas > summary::before { content: "›"; font-size: 16px; transition: transform 140ms ease; }
.noticias-recolhidas[open] > summary::before { transform: rotate(90deg); }
.noticias-recolhidas[open] > summary { margin-bottom: 10px; }

/* -------------------------------------------------- menu ⋯ e meus dados */
.menu-conta { position: relative; display: inline-flex; }
.menu-conta-botao {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; border-radius: 8px; color: var(--fg-dim);
  font-size: 20px; line-height: 1; letter-spacing: 1px;
}
.menu-conta-botao::-webkit-details-marker { display: none; }
.menu-conta-botao:hover, .menu-conta[open] > .menu-conta-botao { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.menu-conta-painel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px;
  display: flex; flex-direction: column; padding: 6px;
  background: #121216; border: 1px solid #26262c; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.menu-conta-painel a {
  padding: 9px 12px; border-radius: 8px; color: var(--fg); text-decoration: none; font-size: 14px;
}
.menu-conta-painel a:hover { background: rgba(255, 255, 255, 0.06); }
.menu-conta-quem {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; margin-bottom: 4px;
  border-bottom: 1px solid #26262c;
}
.menu-conta-quem span { display: flex; flex-direction: column; min-width: 0; }
.menu-conta-quem strong { font-size: 14px; }
.menu-conta-quem small { font-size: 12px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-conta-sair { color: var(--fg-dim) !important; border-top: 1px solid #26262c; margin-top: 4px; border-radius: 0 0 8px 8px !important; }

.avatar { display: inline-block; flex: 0 0 auto; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.avatar-p { width: 22px; height: 22px; }
.avatar-m { width: 34px; height: 34px; }
.avatar-g { width: 64px; height: 64px; }
.avatar-iniciais {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(216, 166, 87, 0.16); color: var(--ouro); font-family: var(--ui); font-weight: 700;
}
.avatar-p.avatar-iniciais { font-size: 9px; }
.avatar-m.avatar-iniciais { font-size: 13px; }
.avatar-g.avatar-iniciais { font-size: 22px; }
.mural-cabeca { align-items: center; }

/* a janela */
.janela-dados {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  padding: 18px 20px 20px; border: 1px solid #26262c; border-radius: 16px;
  background: #0f0f12; color: var(--fg);
}
.janela-dados::backdrop { background: rgba(0, 0, 0, 0.62); }
.janela-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.janela-topo h3 { margin: 0; font-family: var(--ui); font-size: 18px; font-weight: 800; }
.janela-fechar {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); color: var(--fg-dim); font-size: 14px;
}
.janela-fechar:hover { color: var(--fg); }

.conta-pagina { max-width: 520px; }
.conta-aviso {
  margin: 4px 0 10px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
  background: rgba(216, 166, 87, 0.12); border: 1px solid rgba(216, 166, 87, 0.35);
}
.conta-bloco { padding: 14px 0; border-top: 1px solid #22222a; display: flex; flex-direction: column; gap: 10px; }
.conta-bloco:first-of-type { border-top: 0; }
.conta-bloco h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); }
.conta-bloco .bq-botao { align-self: flex-start; }
.conta-campo { display: grid; gap: 5px; font-size: 13px; color: var(--fg-dim); }
.conta-campo em { font-style: normal; opacity: 0.75; }
.conta-campo input {
  background: var(--bg-card); color: var(--fg); border: 1px solid var(--linha);
  border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px;
}
.conta-foto { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.conta-escolher { position: relative; }
.conta-link { background: none; border: 0; color: var(--fg-dim); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
.conta-nota { margin: 0; font-size: 12px; color: var(--fg-dim); }

@media (max-width: 560px) {
  .menu-conta-painel { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
}

/* --------------------------------------- a barra do topo e as abas da Carteira */
.topo nav a.ativo { color: var(--ouro); }
.nav-avatar { display: inline-flex; align-items: center; padding: 2px; border-radius: 50%; }
.nav-avatar .avatar-p { width: 28px; height: 28px; }
.nav-avatar .avatar-p.avatar-iniciais { font-size: 10px; }
.nav-avatar:hover .avatar { box-shadow: 0 0 0 2px rgba(216, 166, 87, 0.6); }

.abas-carteira {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 22px;
  border-bottom: 1px solid var(--linha);
}
.abas-carteira a {
  padding: 9px 14px 10px; font-family: var(--ui); font-size: 15px; font-weight: 700;
  color: var(--fg-dim); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas-carteira a:hover { color: var(--fg); }
.abas-carteira a.ativo { color: var(--ouro); border-bottom-color: var(--ouro); }
@media (max-width: 560px) { .abas-carteira a { padding: 8px 10px; font-size: 14px; } }

/* ------------------------------------------- o brilho de Jano, a assinatura
   Uma faixa de luz dourada que atravessa o gráfico uma vez, depois que ele se
   monta. Quem anima é o animar.js; aqui só a forma da luz. */
.jano-brilho {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2;
  border-radius: inherit;
}
.jano-brilho::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(216, 166, 87, 0) 20%,
              rgba(240, 200, 130, 0.16) 50%, rgba(216, 166, 87, 0) 80%, transparent 100%);
  mix-blend-mode: screen;
}

/* ------------------------------------------------- você tem certeza? */
.janela-certeza {
  width: min(400px, calc(100vw - 32px)); padding: 20px 22px 18px;
  border: 1px solid #2c2c33; border-radius: 16px; background: #111115; color: var(--fg);
}
.janela-certeza::backdrop { background: rgba(0, 0, 0, 0.62); }
.janela-certeza h3 { margin: 0 0 8px; font-family: var(--ui); font-size: 18px; font-weight: 800; }
.certeza-texto { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--fg); }
.certeza-botoes { display: flex; justify-content: flex-end; gap: 10px; }
.certeza-sim { background: #b4555f; border-color: #b4555f; color: #fff; }
.certeza-sim:hover { background: #c9606a; border-color: #c9606a; }

/* ------------------------------------------------- pílulas (abas.js) */
.pilulas {
  display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 14px; margin: 4px 0 18px;
  border-bottom: 1px solid var(--linha);
}
.pilula {
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid #34343c; background: transparent; color: var(--fg);
  font-family: var(--ui); font-size: 14px; font-weight: 600;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pilula:hover { border-color: #55555f; }
.pilula.ativa { background: var(--fg); color: #0b0b0d; border-color: var(--fg); }
.pilula:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
@media (max-width: 560px) {
  .pilulas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -4px; padding-left: 4px; }
  .pilulas::-webkit-scrollbar { display: none; }
  .pilula { flex: 0 0 auto; padding: 7px 15px; font-size: 13.5px; }
}

/* --------------------------------------------- editar carteira (janela) */
.botao-editar {
  margin-left: 10px; vertical-align: middle; cursor: pointer;
  font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--fg-dim);
  background: transparent; border: 1px solid var(--linha); border-radius: 8px; padding: 5px 10px;
}
.botao-editar:hover { color: var(--ouro); border-color: rgba(216, 166, 87, 0.5); }
.janela-dados .em-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.janela-dados .em-fila input[type="text"] {
  flex: 1 1 200px; background: var(--bg-card); color: var(--fg); border: 1px solid var(--linha);
  border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px;
}
.zona-perigo { border-top-color: rgba(180, 85, 95, 0.35); }
.zona-perigo h4 { color: #e7787c; }
.zona-perigo form { display: inline-block; margin-right: 8px; }

/* ------------------------------------------------- histórico de dividendos */

.dv-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dv-cabeca h3 { margin: 0; }
.dv-controles { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-grupo {
  display: inline-flex;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 2px;
  background: var(--bg-card);
}
.dv-botao {
  background: none;
  border: 0;
  color: var(--fg-dim);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.dv-botao:hover { color: var(--fg); }
.dv-botao.ativa { background: var(--fg); color: #0b0b0d; }
.dv-botao:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

.g-dividendos { width: 100%; height: auto; display: block; }
.g-dividendos text { font-family: var(--dados); font-size: 10.5px; fill: var(--fg-dim); }
.g-dividendos .malha line { stroke: var(--linha); }
.g-dividendos .barra { fill: var(--ouro); fill-opacity: 0.85; }
.g-dividendos .alvo { fill: transparent; }
.g-dividendos .dv-coluna:hover .barra { fill-opacity: 1; }
/* os últimos 12 meses não são um ano fechado: barra vazada */
.g-dividendos .corrente .barra { fill: var(--ouro); fill-opacity: 0.18; stroke: var(--ouro); stroke-width: 1.5; }
.g-dividendos .topo { fill: var(--fg); font-size: 10px; }
@media (max-width: 560px) {
  .dv-grafico:has(.g-dividendos) { overflow-x: auto; }
  .g-dividendos { min-width: 560px; }
}

.dv-cartoes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.dv-cartao {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dv-cartao span { font-size: 12px; color: var(--fg-dim); }
.dv-cartao strong { font-family: var(--dados); font-size: 18px; font-weight: 600; }
@media (max-width: 720px) { .dv-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dv-tabela td, .dv-tabela th { text-align: center; font-family: var(--dados); }
.dv-tabela td:first-child { font-family: var(--ui); }
.dv-anunciado td { color: var(--ouro); }

/* ------------------------------------------------------ funil Bazin + Graham */

.fn-funil { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; }
.fn-degrau { position: relative; min-height: 38px; display: flex; align-items: center; }
.fn-barra {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--fn-largura);
  background: var(--linha);
  border-radius: 8px;
}
.fn-barra.fn-bazin { background: rgba(216, 166, 87, 0.3); }
.fn-barra.fn-graham { background: rgba(216, 166, 87, 0.55); }
.fn-barra.fn-qualidade { background: rgba(216, 166, 87, 0.85); }
.fn-rotulo { position: relative; padding: 0 12px; font-size: 13.5px; }
.fn-rotulo strong { font-family: var(--dados); font-size: 16px; margin-right: 4px; }

.fn-ajustes { margin: 6px 0 18px; }
.fn-ajustes summary { cursor: pointer; color: var(--fg-dim); }
.fn-ajustes summary:hover { color: var(--fg); }
.fn-marca { font-size: 11px; color: var(--ouro); border: 1px solid var(--ouro); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.fn-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.fn-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--fg-dim); }
.fn-acoes { display: flex; gap: 8px; align-items: end; }

.fn-tabela td, .fn-tabela th { white-space: nowrap; font-family: var(--dados); }
.fn-tabela td:first-child { font-family: var(--ui); }
.fn-nome { display: block; font-size: 11px; color: var(--fg-dim); font-family: var(--ui); }
.fn-caidas { border-top: 1px solid var(--linha); padding: 8px 0; }
.fn-caidas summary { cursor: pointer; }
.fn-caidas ul { margin: 8px 0 4px; padding-left: 18px; color: var(--fg-dim); font-size: 13px; }
.fn-caidas li { margin: 3px 0; }

/* --------------------------------------------- garimpo no Lab / Travessia */

.gp-portas { margin: 14px 0 6px; }
.gp-portas .pilula { text-decoration: none; }
.tv-garimpar { font-size: 12px; color: var(--ouro); text-decoration: none; }
.tv-garimpar:hover { text-decoration: underline; }
.tv-declarado { margin-top: 8px; }

/* --------------------------------------------- evolução dos meus dividendos */

.quadro-largo { margin: 16px 0 28px; }
.mdv-total { font-size: 13px; color: var(--fg-dim); }
.mdv-total strong { font-family: var(--dados); color: var(--fg); font-size: 15px; }
.mdv-futuro { color: var(--ouro); }
.mdv-grafico { margin-top: 8px; }
.g-meus-dividendos { width: 100%; height: auto; display: block; }
.g-meus-dividendos text { font-family: var(--dados); font-size: 10.5px; fill: var(--fg-dim); }
.g-meus-dividendos .malha line { stroke: var(--linha); }
.g-meus-dividendos .malha .chao { stroke: #2a3444; }
.g-meus-dividendos .mdv-painel { font-family: var(--ui); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.mdv-area { fill: var(--alta); fill-opacity: 0.16; }
.mdv-linha { fill: none; stroke: var(--alta); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mdv-linha-futura { fill: none; stroke: var(--alta); stroke-width: 2; stroke-dasharray: 5 5; opacity: .7; }
.mdv-ponta { fill: var(--alta); stroke: var(--bg-card); stroke-width: 2.5; }
.mdv-ponta-futura { fill: var(--bg-card); stroke: var(--alta); stroke-width: 2; }
.g-meus-dividendos .mdv-ponta-texto { fill: var(--fg); font-size: 13px; font-weight: 600; }
.g-meus-dividendos .mdv-futuro-texto { fill: var(--ouro); font-size: 11.5px; }
.mdv-barra { fill: var(--ouro); fill-opacity: 0.85; }
.mdv-barra-futura { fill: var(--ouro); fill-opacity: 0.08; stroke: var(--ouro); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mdv-mes .alvo { fill: transparent; }
.mdv-mes:hover .alvo { fill: rgba(237, 240, 244, 0.035); }
.mdv-mes:hover .mdv-barra { fill-opacity: 1; }
.mdv-pastilha-futura { background: transparent; border: 1.5px dashed var(--ouro); }
@media (max-width: 560px) {
  .mdv-grafico { overflow-x: auto; }
  .g-meus-dividendos { min-width: 600px; }
}

.mdv-sub { margin: 22px 0 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); font-weight: 600; }

/* ------------------------------------ carteira performando em relação a */

.cmp { --cmp-renda_fixa: #6c9bd2; --cmp-inflacao: #c8775a; --cmp-bolsa: #59b3a0; }
.cmp-pergunta { margin-top: 2px; }
.cmp-controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 10px 0 4px; }
.cmp-resposta { margin: 10px 0 6px; }
.cmp-resposta strong { color: var(--ouro); }
.g-comparar { width: 100%; height: auto; display: block; }
.g-comparar text { font-family: var(--dados); font-size: 10.5px; fill: var(--fg-dim); }
.g-comparar .malha line { stroke: var(--linha); }
.cmp-linha { fill: none; stroke-width: 1.4; stroke-linejoin: round; opacity: .75; transition: opacity .15s, stroke-width .15s; }
.cmp-renda_fixa { stroke: var(--cmp-renda_fixa); }
.cmp-inflacao { stroke: var(--cmp-inflacao); }
.cmp-bolsa { stroke: var(--cmp-bolsa); }
.cmp-alvo { fill: none; stroke: transparent; stroke-width: 10; }
.cmp-ref:hover .cmp-linha { opacity: 1; stroke-width: 2.6; }
.cmp-carteira { fill: none; stroke: var(--ouro); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.cmp-ponta { fill: var(--ouro); stroke: var(--bg-card); stroke-width: 2; }
.g-comparar .cmp-rotulo { font-family: var(--ui); font-size: 11px; fill: var(--fg); }
.g-comparar .cmp-rotulo-carteira { font-family: var(--ui); font-size: 11.5px; font-weight: 600; fill: var(--ouro); }
.cmp-rotulos { display: none; }
.cmp-dica { color: var(--fg-dim); font-size: 11.5px; margin-left: 8px; }
.cmp-p-renda_fixa { background: var(--cmp-renda_fixa); }
.cmp-p-inflacao { background: var(--cmp-inflacao); }
.cmp-p-bolsa { background: var(--cmp-bolsa); }

/* um grupo escolhido: as linhas dos outros somem e os nomes aparecem na ponta */
.cmp:not([data-grupo="todas"]) .cmp-so-todas { display: none; }
.cmp[data-grupo="renda_fixa"] .cmp-ref:not([data-grupo="renda_fixa"]),
.cmp[data-grupo="inflacao"] .cmp-ref:not([data-grupo="inflacao"]),
.cmp[data-grupo="bolsa"] .cmp-ref:not([data-grupo="bolsa"]) { display: none; }
.cmp[data-grupo="renda_fixa"] .cmp-rotulos[data-grupo="renda_fixa"],
.cmp[data-grupo="inflacao"] .cmp-rotulos[data-grupo="inflacao"],
.cmp[data-grupo="bolsa"] .cmp-rotulos[data-grupo="bolsa"] { display: inline; }
.cmp[data-grupo="renda_fixa"] .cmp-item:not([data-grupo="renda_fixa"]):not(.cmp-eu),
.cmp[data-grupo="inflacao"] .cmp-item:not([data-grupo="inflacao"]):not(.cmp-eu),
.cmp[data-grupo="bolsa"] .cmp-item:not([data-grupo="bolsa"]):not(.cmp-eu) { display: none; }

/* o pódio: posição, nome, barra do ganho, valor e % */
.cmp-podio { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.cmp-item {
  display: grid; grid-template-columns: 34px minmax(110px, 1.3fr) 2fr auto 64px;
  gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 13px;
}
.cmp-item::before { content: none; }
.cmp-pos { font-family: var(--dados); color: var(--fg-dim); }
.cmp-nome { display: flex; align-items: center; gap: 8px; }
.cmp-nome::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--fg-dim); }
.cmp-g-renda_fixa .cmp-nome::before { background: var(--cmp-renda_fixa); }
.cmp-g-inflacao .cmp-nome::before { background: var(--cmp-inflacao); }
.cmp-g-bolsa .cmp-nome::before { background: var(--cmp-bolsa); }
.cmp-g-carteira .cmp-nome::before { background: var(--ouro); }
.cmp-barra-trilho { height: 8px; background: rgba(255, 255, 255, 0.04); border-radius: 4px; overflow: hidden; }
.cmp-barra { display: block; height: 100%; background: var(--alta); border-radius: 4px; opacity: .7; }
.cmp-barra.negativa { background: var(--baixa); }
.cmp-valor { font-family: var(--dados); text-align: right; }
.cmp-pct { font-family: var(--dados); text-align: right; font-size: 12px; }
.cmp-eu { background: rgba(216, 166, 87, 0.12); border: 1px solid rgba(216, 166, 87, 0.45); }
.cmp-eu .cmp-nome { color: var(--ouro); font-weight: 600; }
.cmp-eu .cmp-barra { background: var(--ouro); opacity: .9; }
@media (max-width: 560px) {
  .cmp-grafico { overflow-x: auto; }
  .g-comparar { min-width: 640px; }
  .cmp-item { grid-template-columns: 28px 1fr auto 56px; }
  .cmp-barra-trilho { display: none; }
}

/* ---------------------------------------------------------------- caixinhas */

.aba-caixinha { border-style: dashed; }
.cx-acoes { display: flex; gap: 8px; align-items: center; }
.cx-acoes .bq-botao[disabled] { opacity: .45; cursor: not-allowed; }
.cx-sobre { margin: 4px 0 14px; }
.cx-numeros { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 10px; margin-bottom: 16px; }
.cx-num {
  background: var(--bg-card); border: 1px solid var(--linha); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.cx-num > span:first-child { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); }
.cx-num strong { font-family: var(--dados); font-size: 20px; font-weight: 600; }
.cx-num em { font-style: normal; font-size: 12px; color: var(--fg-dim); }
.cx-num-destaque { border-color: rgba(216, 166, 87, 0.5); background: rgba(216, 166, 87, 0.08); }
.cx-num-destaque strong { color: var(--ouro); }
.cx-barra { display: block; height: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; overflow: hidden; margin: 4px 0 2px; }
.cx-barra > span { display: block; height: 100%; background: var(--alta); border-radius: 4px; }
@media (max-width: 720px) { .cx-numeros { grid-template-columns: 1fr 1fr; } }

.cx-resposta { margin: 6px 0 10px; }
.cx-resposta strong { color: var(--ouro); }
.g-caixinha { width: 100%; height: auto; display: block; }
.g-caixinha text { font-family: var(--dados); font-size: 10.5px; fill: var(--fg-dim); }
.g-caixinha .malha line { stroke: var(--linha); }
.g-caixinha .malha .chao { stroke: #2a3444; }
.cx-area { fill: var(--ouro); fill-opacity: 0.12; }
.cx-linha { fill: none; stroke: var(--ouro); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.cx-meta { stroke: var(--alta); stroke-width: 1.2; stroke-dasharray: 5 5; }
.g-caixinha .cx-meta-texto { fill: var(--alta); }
.cx-chegada { fill: var(--alta); stroke: var(--bg-card); stroke-width: 2.5; }
.g-caixinha .cx-chegada-texto { fill: var(--fg); font-size: 12px; font-weight: 600; }
.g-caixinha .cx-fim { fill: var(--fg); font-size: 12px; }
@media (max-width: 560px) { .g-caixinha { min-width: 600px; } }

.cx-podio { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 4px; }
.cx-podio li { display: grid; grid-template-columns: 30px minmax(150px, 1.2fr) 2fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.cx-pos { font-family: var(--dados); color: var(--fg-dim); }
.cx-trilho { height: 10px; background: rgba(255, 255, 255, 0.04); border-radius: 5px; overflow: hidden; }
.cx-trilho > span { display: block; height: 100%; background: #6c9bd2; opacity: .75; border-radius: 5px; }
.cx-op-valor { font-family: var(--dados); text-align: right; }
.cx-podio .cx-sua { background: rgba(216, 166, 87, 0.12); border: 1px solid rgba(216, 166, 87, 0.45); }
.cx-podio .cx-sua .cx-op-nome { color: var(--ouro); font-weight: 600; }
.cx-podio .cx-sua .cx-trilho > span { background: var(--ouro); }
@media (max-width: 560px) {
  .cx-podio li { grid-template-columns: 26px 1fr auto; }
  .cx-trilho { display: none; }
}
.cx-tabela th, .cx-tabela td { text-align: right; white-space: nowrap; font-family: var(--dados); font-size: 12.5px; }
.cx-tabela th:first-child, .cx-tabela td:first-child { text-align: left; font-family: var(--ui); }
.cx-tabela th { font-family: var(--ui); white-space: normal; min-width: 110px; }
.cx-tabela th.cx-sua { color: var(--ouro); }
.cx-tabela .cx-forte td { font-weight: 700; color: var(--fg); }

.cx-movs { list-style: none; margin: 0; padding: 0; }
.cx-movs li { display: grid; grid-template-columns: 100px 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.cx-mov-data { font-family: var(--dados); color: var(--fg-dim); font-size: 12.5px; }
.cx-mov-valor { font-family: var(--dados); }

.janela-caixinha { width: min(620px, calc(100vw - 32px)); }
.cx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 14px; }
.cx-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--fg-dim); min-width: 0; }
.cx-largo { grid-column: 1 / -1; }
.cx-campo input, .cx-campo select {
  background: var(--bg-card); color: var(--fg); border: 1px solid var(--linha);
  border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px;
}
.cx-modo { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px 12px; display: grid; gap: 8px; }
.cx-modo legend { padding: 0 6px; }
.cx-opcao { display: flex; gap: 8px; align-items: baseline; color: var(--fg); font-size: 13.5px; flex-wrap: wrap; }
.cx-modo:has(input[value="mensal"]:checked) .cx-so-cdi,
.cx-modo:has(input[value="cdi"]:checked) .cx-so-mensal { display: none; }
.cx-enviar { width: 100%; padding: 11px; }
@media (max-width: 560px) { .cx-form { grid-template-columns: 1fr; } }
.cx-rot .dica { margin-left: 6px; }

/* ----------------------------------------- Plano: configuração atrás da ⚙ */
.config-plano { border: 1px solid var(--linha); border-radius: 12px; margin: 18px 0 8px; background: var(--bg-card); }
.config-plano > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; flex-wrap: wrap;
}
.config-plano > summary::-webkit-details-marker { display: none; }
.config-icone { font-size: 18px; color: var(--fg-dim); transition: transform .3s ease, color .15s; }
.config-plano > summary:hover .config-icone { color: var(--ouro); }
.config-plano[open] .config-icone { transform: rotate(90deg); color: var(--ouro); }
.config-titulo { font-weight: 700; font-size: 14px; }
.config-resumo { font-size: 12.5px; color: var(--fg-dim); }
.config-plano[open] .config-resumo { display: none; }
.config-plano > .secao { padding: 0 16px 6px; margin-top: 4px; }

/* + e 🐷 da fila de carteiras: só o ícone, o nome fica no title */
.aba-icone { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; position: relative; }
.aba-mais { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 800; color: var(--ouro); }

/* o letreiro no topo de todas as telas: fino, rola junto com a página */
.fita-topo {
  padding: 6px 0; border-top: 0; border-bottom: 1px solid var(--linha);
  /* fica no alto mesmo rolando a página; fundo sem transparência para o
     conteúdo não aparecer por baixo das letras */
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: #070a0f;
  height: var(--fita-altura); box-sizing: border-box;
}
/* fixed, e não sticky: o body tem altura de 100% da janela, e um sticky só
   gruda dentro do pai — rolando muito, a faixa ia embora junto. Fixa, ela
   precisa do espaço dela reservado no alto da página. */
:root { --fita-altura: 31px; }
body:has(> .fita-topo) { padding-top: var(--fita-altura); }
/* com a faixa grudada no alto, quem pula para uma âncora (#comparar, #c-12)
   cairia embaixo dela: a rolagem para um pouco antes */
html:has(.fita-topo) { scroll-padding-top: calc(var(--fita-altura) + 10px); }
.fita-topo .cotacao { font-size: 11.5px; }
/* passar o mouse para ler: a faixa espera */
.fita:hover .fita-trilho { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fita-trilho { animation: none; }
  .fita { overflow-x: auto; }
}

/* recuperar senha */
.botao-recuperar { display: block; text-align: center; text-decoration: none; margin-top: 12px; }
.cartao .recado a { color: var(--ouro); }

/* ------------------------------------------- o quadro do pregão (plaquinhas) */

.quadro-pregao {
  --qp-letra: #f1ead8; --qp-ambar: #f4b740; --qp-p: 15px;
  background: linear-gradient(#101215, #08090b); border: 1px solid #23262c; border-radius: 12px;
  padding: 16px 20px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.qp-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.qp-titulo { font-family: var(--dados); letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--qp-ambar); }
.qp-hora { font-family: var(--dados); font-size: 12px; color: #7d8590; }
.qp-botoes { margin-left: auto; display: flex; gap: 6px; }
.qp-botao {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1;
  background: #15171b; color: var(--qp-letra); border: 1px solid #2a2d33;
}
.qp-botao:hover { border-color: var(--qp-ambar); }

/* As duas colunas lado a lado, cada uma do tamanho do que tem dentro: sigla,
   preço e variação encostados, como no quadro de verdade. O cabeçalho e as
   linhas dividem a MESMA grade (display: contents), então "Preço" e "Dia"
   ficam exatamente em cima dos números. */
.qp-colunas { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 44px; }
.qp-coluna { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 14px; row-gap: 4px; align-content: start; }
.qp-cabeca, .qp-lista, .qp-linha { display: contents; }
.qp-cabeca span {
  font-family: var(--dados); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #7d8590; padding-bottom: 4px;
}
.qp-altas .qp-cabeca span:first-child { color: #5fbf7d; }
.qp-baixas .qp-cabeca span:first-child { color: #e06a6f; }
.qp-cab-num { text-align: right; }
.qp-lista { list-style: none; }
.qp-campo { display: flex; gap: 2px; }
.qp-preco, .qp-var { justify-content: flex-end; }
/* a plaquinha: um bloco só, sem fresta, como no print */
.qp-p {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.55em; white-space: pre;
  font-family: var(--dados); font-weight: 500; font-size: var(--qp-p); color: var(--qp-letra);
  background: #1a1c20; border-radius: 3px; box-shadow: inset 0 0 0 1px #000;
  transform-origin: 50% 50%;
}
.qp-p.vira { animation: qp-vira 55ms linear; }
@keyframes qp-vira { 0% { transform: scaleY(1); } 50% { transform: scaleY(.15); filter: brightness(.6); } 100% { transform: scaleY(1); } }
.qp-linha.sobe .qp-var .qp-p { color: #6fd08c; }
.qp-linha.desce .qp-var .qp-p { color: #ef7b80; }
.qp-nota { margin: 12px 0 0; text-align: center; font-family: var(--dados); font-size: 10.5px; color: #59606b; }

/* A vista Quadro do Mapa: o mapa-múndi em cima, com ~65% da altura, e o
   quadro embaixo, no que sobra. As plaquinhas crescem com a altura da tela
   para as dez linhas caberem sem rolar. */
.mapa-quadro {
  flex: 1; min-height: 0; display: flex; flex-direction: column; background: #04080f;
  /* o `main` do site tem largura máxima e margem; aqui é a tela inteira */
  width: 100%; max-width: none; margin: 0; padding: 0;
}
/* o mundo fica com tudo o que o quadro não usa — uns 60% da tela */
.mapa-quadro .mundo-faixa { flex: 1 1 auto; min-height: 45vh; border-top: 0; border-bottom: 1px solid #12202f; }
.quadro-faixa { flex: 0 0 auto; display: flex; justify-content: center; padding: 8px 12px 10px; }
.mapa-quadro .quadro-pregao {
  --qp-p: clamp(9px, min(1.2vh, 1.1vw), 20px);
  width: max-content; max-width: 100%; padding: 8px 18px 6px; border-radius: 10px;
}
.mapa-quadro .qp-topo { margin-bottom: 6px; }
.mapa-quadro .qp-coluna { row-gap: 3px; }
.mapa-quadro .qp-nota { display: none; }
.mapa-vistas { display: inline-flex; border: 1px solid var(--linha); border-radius: 999px; padding: 2px; }
.mapa-vistas a { padding: 5px 14px; border-radius: 999px; font-size: 12.5px; color: var(--fg-dim); text-decoration: none; }
.mapa-vistas a.ativa { background: var(--fg); color: #0b0b0d; }

/* tela cheia: o quadro (ou o conjunto mundo + quadro) cobre a janela
   inteira, mesmo se o navegador não der a tela cheia de verdade */
.mapa-quadro.qp-cheia { position: fixed; inset: 0; z-index: 1000; }
.mapa-quadro.qp-cheia .quadro-pregao { --qp-p: clamp(9px, min(1.4vh, 1.3vw), 24px); }
.quadro-pregao.qp-cheia {
  position: fixed; inset: 0; z-index: 1000; border: 0; border-radius: 0; margin: 0;
  width: auto; max-width: none; display: flex; flex-direction: column; justify-content: center;
  padding: 3vh 3vw; --qp-p: min(2.9vh, 1.45vw);
}
.quadro-pregao.qp-cheia .qp-titulo, .quadro-pregao.qp-cheia .qp-hora { font-size: min(2vh, 1vw); }
.quadro-pregao.qp-cheia .qp-coluna { row-gap: .7vh; }
html.com-quadro-cheio, html.com-quadro-cheio body { overflow: hidden; }

@media (max-width: 760px) {
  .quadro-pregao { --qp-p: 12.5px; padding: 12px; }
  .qp-colunas { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .qp-p.vira { animation: none; } }

/* --------------------------------- as bolsas do mundo, embaixo do mapa de ações */
.mundo-faixa { position: relative; }
.mundo-tela { display: block; width: 100%; height: 100%; }
@media (max-width: 700px) { .mapa-quadro .mundo-faixa { min-height: 32vh; } }

/* embaixo do mundo: o quadro à esquerda e o gráfico das bolsas à direita,
   preenchendo a largura toda */
.quadro-faixa { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px; align-items: stretch; justify-content: stretch; }
.mundo-grafico {
  background: linear-gradient(#101215, #08090b); border: 1px solid #23262c; border-radius: 10px;
  padding: 8px 12px 4px; min-width: 0; display: flex; flex-direction: column;
}
.mg-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.mg-pilulas { margin: 0 0 0 auto; padding: 0; border: 0; gap: 4px; }
.mg-pilulas .pilula { padding: 3px 10px; font-size: 11.5px; }
@media (max-width: 900px) {
  .quadro-faixa { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- o mapa de calor */
.calor { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: none; margin: 0; padding: 0; background: #0b0d10; }
.calor-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 12px; border-bottom: 1px solid #1a1f27; }
.calor-rotulo { font-family: var(--dados); font-size: 11px; color: #6b7380; }
.calor-resumo { font-family: var(--dados); font-size: 11.5px; color: #8a93a2; }
.calor-botoes { margin-left: auto; display: flex; gap: 6px; }
.calor-palco { position: relative; flex: 1; min-height: 0; }
.calor-tela { display: block; width: 100%; height: 100%; }
.calor-dica {
  position: absolute; z-index: 5; pointer-events: none; min-width: 180px; max-width: 240px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px;
  background: rgba(10, 12, 15, 0.94); border: 1px solid #2a2f37; font-size: 12px; color: #c9d1db;
}
.calor-dica strong { font-size: 14px; color: #fff; }
.calor.calor-cheio { position: fixed; inset: 0; z-index: 1000; }
@media (max-width: 700px) { .calor-rotulo { display: none; } }

/* o gráfico das bolsas, desenhado em canvas no tamanho do espaço */
.mg-palco { flex: 1; min-height: 160px; position: relative; }
.mg-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mg-falta { margin: 4px 0 0; font-family: var(--dados); font-size: 10.5px; color: #6b7380; }
.mg-pilulas .pilula.ativa { background: var(--fg); color: #0b0b0d; border-color: var(--fg); }

/* tela cheia (⛶ ou F11): a barra do topo do site some */
html.em-tela-cheia .topo-mapa { display: none; }