/* Fluxo B3 — a tela de dados do Terminal ACTA.
   Especificação: docs/design/fluxo-acta.md
   Depende de css/site.css: daqui não sai nenhum valor de cor bruto, só tokens.

   A tela veio do Insights de Mercado, onde foi desenhada como produto de
   assinatura — dourado sobre quase-preto, glow neon, blur de paywall. Aqui ela
   é ferramenta de mesa: papel, tinta, âmbar de destaque e nenhuma cor que não
   signifique alguma coisa. */

:root {
  /* ── As cinco categorias de investidor ────────────────────────────────
     Matizes distintos com a MESMA luminosidade: nenhuma linha pode parecer
     mais importante que a outra sem que o dado diga isso. O estrangeiro é o
     âmbar da casa — é a série que a mesa procura primeiro. */
  --fx-estrangeiro: oklch(.58 .14 60);
  --fx-institucional: oklch(.52 .12 250);
  --fx-pessoa-fisica: oklch(.50 .11 150);
  --fx-financeira: oklch(.50 .14 310);
  --fx-outros: oklch(.55 .02 260);

  /* ── Sinal: verde de alta, vermelho de baixa ──────────────────────────
     Estes DESCOLARAM de --verde/--coral do portal (2026-08-31). O verde do
     "ANÁLISE" e o coral do "ALERTA" são cores editoriais, calibradas para
     conviver com texto corrido; alta e baixa na bolsa são convenção de
     mercado e precisam da energia que a convenção tem. O portal continua com
     as dele — a mudança para aqui e não vaza para o feed.

     Dois tokens por lado, pelo mesmo motivo que --ambar-sup e --ambar-tinta
     são dois: o teto de saturação de uma BARRA e o de um NÚMERO são
     diferentes. Objeto gráfico precisa de 3:1 (WCAG 1.4.11); texto pequeno
     precisa de 4,5:1. Um token só obrigaria a barra a viver no teto do texto
     — que é exatamente por que esta tela estava apagada.

     Medido contra o fundo do CARTÃO (--fundo-2), não o da página: é o caso
     mais apertado, porque é onde quase todo número desta tela é escrito.
     Todos os valores estão no limite do gamut sRGB, sem clipe do navegador.
     A tabela com as medidas está em docs/design/fluxo-acta.md §5. */
  --fx-positivo: oklch(.57 .162 148);         /* #0A903A — barra, faixa, selo */
  --fx-negativo: oklch(.57 .228 27);          /* #DE0D1C */
  --fx-positivo-tinta: oklch(.50 .144 148);   /* #02782E — número, 4,55:1 */
  --fx-negativo-tinta: oklch(.53 .215 27);    /* #CB0316 — número, 4,76:1 */
  /* Preenchimento das barras largas (disputa, semanal, acumulado): a barra é
     borda cheia + lavagem por dentro. Nas barras finas do gráfico diário a
     borda ocupa quase tudo e a lavagem nem aparece; numa barra de 400px ela é
     a cor toda — e a 55% sobre papel a cor sumia. Subiu para 72%, e o âmbar
     junto, porque ele e o vermelho dividem o gráfico de acumulado: mexer só
     em um lado inclinaria a leitura daquele gráfico. */
  --fx-positivo-fraco: color-mix(in srgb, var(--fx-positivo) 72%, transparent);
  --fx-negativo-fraco: color-mix(in srgb, var(--fx-negativo) 72%, transparent);
  --fx-destaque-fraco: color-mix(in srgb, var(--ambar-sup) 62%, transparent);

  /* O índice é contexto, não uma sexta categoria: entra como linha neutra. */
  --fx-ibov: var(--tinta-2);
  --fx-media: oklch(.52 .12 250);

  /* Extremos do acumulado. Precisam se separar das barras comuns — por isso
     não reutilizam --fx-positivo/--fx-negativo direto. No claro isso é ir
     MAIS FUNDO que a barra comum: sobre papel, profundidade lê como ênfase. */
  --fx-pico: oklch(.47 .135 148);             /* #026E2A */
  --fx-vale: oklch(.47 .191 27);              /* #AD0111 */

  /* Grade e preenchimento. A grade do gráfico é a MESMA linha do portal. */
  --fx-grade: var(--linha);
  --fx-preenchimento: color-mix(in srgb, var(--tinta) 6%, transparent);

  /* Heatmap: duas rampas, uma por lado do zero. Cheia acima de R$ 1 bilhão. */
  --fx-compra-forte: var(--fx-positivo);
  --fx-compra: color-mix(in srgb, var(--fx-positivo) 38%, var(--fundo-2));
  --fx-venda: color-mix(in srgb, var(--fx-negativo) 38%, var(--fundo-2));
  --fx-venda-forte: var(--fx-negativo);

  /* O raio (--fx-raio, --fx-raio-vidro) e o material de vidro (--fx-vidro*,
     --fx-luz-*, --fx-desfoque, --fx-filtro-vidro) moraram aqui até 2026-08-31.
     Foram para css/vidro.css quando a landing /a-acta passou a usar a mesma
     lâmina: dois arquivos com os mesmos valores garantem que um dos dois fique
     para trás na próxima afinação. O raciocínio do material está documentado
     lá e em docs/design/fluxo-acta.md §12. Esta folha CONSOME esses tokens e
     carrega apenas o que é desta tela. */
}

[data-tema="noite"] {
  --fx-estrangeiro: oklch(.82 .14 70);
  --fx-institucional: oklch(.78 .11 250);
  --fx-pessoa-fisica: oklch(.82 .11 155);
  --fx-financeira: oklch(.78 .12 310);
  --fx-outros: oklch(.72 .02 260);
  --fx-media: oklch(.78 .11 250);

  /* Sinal no escuro. O verde tem gamut de sobra e sobe junto com a
     luminosidade; o VERMELHO não: acima de L .68 o croma despenca e a cor
     vira salmão — é exatamente o que o --coral do portal é, e por isso ele
     não servia aqui. O ponto de croma máximo (L .65) cai a 4,69:1 sobre o
     cartão, ou seja, o teto de saturação e o piso de AA se encontram quase
     no mesmo lugar: por isso os dois vermelhos do escuro são quase o mesmo
     valor, enquanto no claro se separam. */
  --fx-positivo: oklch(.79 .215 148);         /* #2EDE63 */
  --fx-negativo: oklch(.65 .230 27);          /* #FD3A37 */
  --fx-positivo-tinta: oklch(.82 .215 148);   /* #3EE86D — 10,4:1 */
  --fx-negativo-tinta: oklch(.66 .222 27);    /* #FD443F — 4,88:1 */
  --fx-pico: oklch(.86 .245 148);             /* #18FA69 */
  --fx-vale: oklch(.62 .250 27);              /* #F90A1F */
  --fx-preenchimento: color-mix(in srgb, var(--tinta) 8%, transparent);

  /* Mais noturno no noturno: a página desce de #0B0B0C para quase o preto
     absoluto, e a única cor da tela passa a vir do banho de luz. O preto
     continua NEUTRO: o site.css já tinha decidido que o escuro do portal não é
     azul, e o vidro não é motivo para reabrir isso. O frio vem da luz, não do
     fundo. Este override vale só para ESTA tela — a landing /a-acta segue no
     #0B0B0C do portal, porque lá o vidro é uma seção e não a página inteira. */
  --fundo: #050506;
}

/* ── Página ─────────────────────────────────────────────────────────────── */

.fluxo-pagina {
  font-family: Archivo, Helvetica, sans-serif;
  color: var(--tinta);
  min-height: 100vh;

  /* O banho vai no background da PÁGINA, em camadas, e não num pseudo-elemento
     com z-index negativo: assim não há disputa de empilhamento com os cartões
     e o `backdrop-filter` enxerga o que precisa enxergar.
     `fixed` prende a luz à janela — a página desliza por baixo dela. */
  background-color: var(--fundo);
  background-image:
    radial-gradient(52% 40% at  6% -4%, var(--fx-luz-a), transparent 60%),
    radial-gradient(46% 34% at 97% 14%, var(--fx-luz-b), transparent 60%),
    radial-gradient(40% 30% at 48% 38%, var(--fx-luz-b), transparent 64%),
    radial-gradient(54% 40% at 22% 66%, var(--fx-luz-c), transparent 62%),
    radial-gradient(46% 36% at 88% 92%, var(--fx-luz-a), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.page-wrap {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 30px var(--gutter) 72px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Números em toda a tela: mono e tabular. Sem `tabular-nums` a coluna dança
   quando o valor muda de casa, e a tabela inteira parece tremer a cada filtro. */
.value, .invtable, .period-table__table, .flow-window-seg__value,
.ytd-record__value, .peak-trough-badge__value, .zero-cross-card__value,
.weekly-summary-card__value, .heatmap-stat__value, .ibov-focus__ibov {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Divisa e assinatura ────────────────────────────────────────────────────
   A primeira versão punha a marca ENTRE os cartões, como faz o Insights. Não
   servia ao que ela existia para servir: quem recorta só o cartão para postar
   deixava a marca de fora, porque ela estava do lado de fora. E as três
   folgas empilhadas — o gap da coluna, mais 40px acima da régua, mais 20px
   abaixo — abriam 146px de vazio entre uma caixa e a seguinte, 1.680px na
   página inteira.

   Agora são duas peças com um trabalho cada:

   .fx-divisa      a linha que SETORIZA a página. Só a linha.
   .fx-assinatura  a marca, DENTRO da caixa, abrindo o cartão. */

.fx-divisa {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--linha);
}

/* Divisa órfã: "IBOV em foco" some quando não há série do índice, e a linha
   dele sumiria junto — senão sobram duas divisas coladas. */
.fx-divisa:has(+ [hidden]) { display: none; }

/* A assinatura é a primeira linha de dentro do cartão. Alinhada à esquerda,
   com um fio por baixo: é cabeçalho de caixa, não faixa decorativa — por isso
   perdeu as réguas laterais que tinha quando morava no vão.

   Emblema menor que antes (26px contra 34px): aqui ele divide a linha com o
   título do cartão logo abaixo, e no tamanho anterior competia com ele. */
.fx-assinatura {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--linha);
  user-select: none;
}

/* O anel de 1px existe por causa do tema noite: o fundo do emblema é
   EXATAMENTE o preto da página (#0B0B0C), então sem ele o disco não tem
   contorno nenhum. */
.fx-assinatura__emblema {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--linha);
}

.fx-assinatura__marca {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--tinta);
}
.fx-assinatura__aba { color: var(--ambar-tinta); }

@media (max-width: 640px) {
  .fx-assinatura { gap: 8px; margin: 0 0 12px; padding-bottom: 9px; }
  .fx-assinatura__emblema { width: 22px; height: 22px; }
  .fx-assinatura__marca { font-size: 9px; letter-spacing: .16em; }
}

/* ── Aviso de falha ─────────────────────────────────────────────────────── */
/* Quando a busca quebra, a tela precisa DIZER. A versão original escrevia o
   erro num elemento que já não existia e o resultado era uma página de traços. */
.fx-aviso {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--coral);
  border-left-width: 3px;
  border-radius: var(--fx-raio);
  background: color-mix(in srgb, var(--coral) 8%, var(--fundo));
  font-size: 14px;
  line-height: 1.5;
}

/* ── Abertura ───────────────────────────────────────────────────────────── */

.tool-intro { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }

.tool-intro__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--ambar-tinta);
}

.tool-intro__title {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: pretty;
}

.tool-intro__dynamic { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tool-intro__dynamic-prefix { color: var(--tinta-3); }
.tool-intro__dynamic-label { color: var(--ambar-tinta); font-weight: 500; transition: opacity .2s ease; }
.tool-intro__dynamic-label--pulse { opacity: .35; }

.tool-intro__promise {
  margin: 0;
  font-family: Newsreader, Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 62ch;
}

.tool-intro__meta {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--tinta-3);
}


/* ── Barra de filtros ───────────────────────────────────────────────────── */

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
}
.toolbar label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.toolbar .spacer { flex: 0 0 8px; }

.toolbar select,
.custom-range input[type="date"] {
  font: inherit;
  font-size: 13.5px;
  color: var(--tinta);
  background: var(--fx-vidro-interno);
  border: 1px solid var(--linha-forte);
  border-radius: var(--fx-raio);
  padding: 8px 11px;
}
/* A lista suspensa do campo é desenhada pelo sistema e não aceita superfície
   translúcida: aqui entra a cor resolvida da lâmina. */
.toolbar select option { background: var(--fx-vidro-solido); color: var(--tinta); }
.toolbar select:focus-visible,
.custom-range input:focus-visible,
.toolbar button:focus-visible,
.custom-range__apply:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 2px; }

.toolbar button, .custom-range__apply {
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  color: var(--tinta-2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--fx-raio);
  padding: 8px 14px;
  margin-left: auto;
  transition: border-color .18s ease, color .18s ease;
}
.toolbar button:hover, .custom-range__apply:hover { border-color: var(--ambar-sup); color: var(--tinta); }

.custom-range {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--fx-vidro-interno);
  border: 1px solid var(--fx-vidro-linha);
  border-radius: var(--fx-raio);
}
.custom-range__field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-3); }
.custom-range__apply { margin-left: 0; }
.custom-range__hint { font-size: 12.5px; color: var(--coral); }

/* ── Uma linha por fronteira ────────────────────────────────────────────────
   No topo da página havia NOVE fios de 1px em `--linha`, todos iguais, cinco
   deles em 123px: base dos indicadores, topo do expansor, base do expansor,
   divisa, topo do cartão. Linha idêntica repetida não constrói hierarquia —
   listra a página, e o olho para de ver qualquer uma delas.

   A regra a partir daqui: um fio ou FECHA uma caixa (`.toolbar`, `.stat-row`,
   `.chart-card`) ou SEPARA seções (`.fx-divisa`). Nunca os dois na mesma
   fronteira, e nunca dois fios soltos com só uma linha de texto no meio.

   Por isso a barra "VOCÊ ESTÁ VENDO" perdeu o fio de baixo: é TEXTO entre duas
   caixas, e a caixa de cima já fecha enquanto a de baixo já abre. O expansor
   "Como ler este gráfico", que ficava aqui com fio em cima e embaixo, saiu
   inteiro — a legenda logo abaixo do gráfico já dizia o que ele dizia. */
.filter-context {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--tinta-3);
  padding-bottom: 4px;
}
.filter-context__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.filter-context__label { color: var(--tinta); font-weight: 600; }
.filter-context__sep { opacity: .5; }

/* Rótulo de contexto que o script pendura em cada bloco — é o que faz um
   recorte de tela continuar dizendo de que filtro ele é. */
.context-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 2px 0 12px;
}

/* ── Indicadores ────────────────────────────────────────────────────────── */

.stat-row {
  display: grid;
  gap: 1px;
  background-color: var(--fx-vidro);
  background-image: var(--fx-vidro-brilho);
  border: 1px solid var(--fx-vidro-contorno);
  border-radius: var(--fx-raio-vidro);
  overflow: hidden;
  backdrop-filter: var(--fx-filtro-vidro);
  -webkit-backdrop-filter: var(--fx-filtro-vidro);
  box-shadow:
    inset 0 1px 0 var(--fx-vidro-especular),
    inset 0 0 0 1px var(--fx-vidro-rim),
    inset 0 -1px 0 var(--fx-vidro-base),
    var(--fx-vidro-sombra);
}
/* A célula não pinta: quem pinta é a lâmina. O `gap: 1px` continua desenhando
   as divisórias, agora com o contorno do vidro em vez da linha da página. */
.stat-row { gap: 0; }
.stat + .stat { border-left: 1px solid var(--fx-vidro-linha); }
.stat-row--five { grid-template-columns: repeat(5, 1fr); }

.stat {
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.stat .label { font-size: 12.5px; color: var(--tinta-3); letter-spacing: .01em; }
.stat .value { font-size: clamp(17px, 1.7vw, 22px); font-weight: 600; letter-spacing: -.01em; }
.stat .value.pos { color: var(--fx-positivo-tinta); }
.stat .value.neg { color: var(--fx-negativo-tinta); }
.stat__sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--tinta-3); }

/* ── Cartões de gráfico ─────────────────────────────────────────────────── */

.chart-card, .panel-card, .period-table, .ytd-records, .ibov-focus,
.seasonality-card, .heatmap-section, .faq-section, .toolbar {
  background-color: var(--fx-vidro);
  background-image: var(--fx-vidro-brilho);
  border: 1px solid var(--fx-vidro-contorno);
  border-radius: var(--fx-raio-vidro);
  backdrop-filter: var(--fx-filtro-vidro);
  -webkit-backdrop-filter: var(--fx-filtro-vidro);
  /* A aresta, em quatro traços: fio de luz no topo (a lâmina pegando a luz de
     frente), rim claro dando a volta (o corte do material), sombra interna na
     base (a espessura) e a sombra externa longa (o vão até a página). */
  box-shadow:
    inset 0 1px 0 var(--fx-vidro-especular),
    inset 0 0 0 1px var(--fx-vidro-rim),
    inset 0 -1px 0 var(--fx-vidro-base),
    var(--fx-vidro-sombra);
}

.chart-card, .panel-card, .period-table, .ytd-records, .ibov-focus,
.seasonality-card, .heatmap-section, .faq-section {
  padding: 22px 22px 24px;
}

.cum-chart-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.cum-chart-title {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 0;
}
.cum-chart-subtitle { font-size: 12.5px; color: var(--tinta-3); }
.ytd-records__type { color: var(--tinta-3); font-size: 16px; }

.chart-toggles-hint, .chart-hint {
  font-size: 11.5px;
  color: var(--tinta-3);
  letter-spacing: .02em;
  margin: 2px 0 8px;
}
.chart-toggles-hint { text-align: right; }

/* Altura fixa por classe: o Chart.js precisa de um contêiner com altura, e é
   aqui que ela mora — nunca no atributo do canvas, que o próprio Chart.js
   reescreve a cada resize. */
.chart-wrap { position: relative; height: 420px; }
.chart-wrap--secondary { height: 320px; }
.chart-wrap--cum { height: 380px; }
.chart-wrap--disputa { height: 240px; }
.chart-wrap--season-weekday { height: 260px; }

.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 12.5px; color: var(--tinta-2); }
.legend > span { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.chart-insight {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinta-2);
}
.chart-insight .gold, .gold { color: var(--ambar-tinta); }
.muted { color: var(--tinta-3); }
.pos { color: var(--fx-positivo-tinta); }
.neg { color: var(--fx-negativo-tinta); }

.cum-chart-meta { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--tinta-3); }
.cum-chart-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); animation: actaPulse 2.2s ease-in-out infinite; }

/* Popover "Como funciona" — vive no <body>, posicionado pelo script. */
.cum-info-wrap { position: relative; }
.cum-info {
  font: inherit;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--tinta-3);
}
.cum-info:hover { border-color: var(--ambar-sup); color: var(--tinta); }
.cum-info-popover {
  position: fixed;
  z-index: 90;
  max-width: 340px;
  background: var(--inverso-fundo);
  color: var(--inverso-tinta);
  border: 1px solid var(--linha-forte);
  border-radius: var(--fx-raio);
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 18px 40px rgba(0, 0, 17, .28);
}
.cum-info-popover p { margin: 8px 0 0; }
.cum-info-popover__title { display: block; font-size: 13.5px; }
.cum-info-popover__hint { color: color-mix(in srgb, var(--inverso-tinta) 70%, transparent); }

/* ── Tabela do mercado à vista ──────────────────────────────────────────── */

.invtable-wrap { position: relative; overflow-x: auto; padding: 6px 0 2px; }
.invtable { width: 100%; min-width: 560px; border-collapse: collapse; }
.invtable__th {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--linha-forte);
  white-space: nowrap;
}
.invtable__th--type { text-align: left; }
.invtable td { padding: 13px 16px; font-size: 14px; white-space: nowrap; border-bottom: 1px solid var(--linha); }
.invtable tbody tr:last-child td { border-bottom: none; }
.invtable tbody tr:hover { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.invtable__type { text-align: left; font-weight: 600; font-family: Archivo, sans-serif; }
.invtable__type-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: middle; }
.invtable__num { text-align: right; font-weight: 500; }
.invtable__num--day { font-weight: 700; }
.invtable__pos { color: var(--fx-positivo-tinta); }
.invtable__neg { color: var(--fx-negativo-tinta); }
.invtable__redacted { color: var(--tinta-3); letter-spacing: .12em; }

/* ── Quem está contra quem ──────────────────────────────────────────────── */

.disputa-layout { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: center; }
/* Item de grid nasce com `min-width: auto` — não encolhe abaixo do conteúdo. Com
   um canvas dentro isso vira impasse: a coluna não encolhe porque o canvas está
   largo, e o Chart.js não estreita o canvas porque a coluna não encolheu. Carrega
   certo e QUEBRA ao girar o celular, arrastando a página inteira na horizontal. */
.disputa-layout > * { min-width: 0; }
.disputa-layout__stats { display: flex; flex-direction: column; gap: 14px; }

.heatmap-stat { border-left: 2px solid var(--linha-forte); padding-left: 12px; }
.heatmap-stat__label { font-size: 11.5px; color: var(--tinta-3); letter-spacing: .02em; }
.heatmap-stat__value { font-size: 17px; font-weight: 600; margin-top: 3px; }
.heatmap-stat__value--pos { color: var(--fx-positivo-tinta); }
.heatmap-stat__value--neg { color: var(--fx-negativo-tinta); }
.heatmap-stat__value--destaque { color: var(--ambar-tinta); }

/* ── Faixas de cartões (pico/vale, cruzamento do zero, semana) ──────────── */

/* Estas faixas eram uma grade de fios: fundo na cor da linha e `gap: 1px`
   deixando o fundo aparecer entre as células. O truque exige célula OPACA —
   e célula opaca dentro de uma lâmina de vidro é o que estava matando o
   efeito, porque cada faixa virava um tijolo chapado no meio do cartão.

   Trocado por rebaixo: a célula não é uma superfície nova, é a mesma lâmina
   um pouco mais funda, com vão de verdade entre uma e outra. Some o fio,
   some a listra, e a faixa reflui sozinha em qualquer número de colunas —
   o esquema de fio precisaria de uma regra de nth-child por quebra. */
.peak-trough-strip, .zero-cross-strip, .weekly-summary-strip {
  display: grid;
  gap: 10px;
  overflow: visible;
}
.peak-trough-strip { grid-template-columns: repeat(3, 1fr); }
.zero-cross-strip, .weekly-summary-strip { grid-template-columns: repeat(2, 1fr); margin-top: 18px; }

.peak-trough-badge, .zero-cross-card, .weekly-summary-card {
  position: relative;
  background: var(--fx-vidro-interno);
  border: 1px solid var(--fx-vidro-linha);
  border-radius: var(--fx-raio);
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.zero-cross-card, .weekly-summary-card { background: var(--fx-vidro-interno); }
.peak-trough-badge__indicator, .zero-cross-card__indicator, .weekly-summary-card__indicator { font-size: 12px; line-height: 1.6; }
.peak-trough-badge--peak .peak-trough-badge__indicator,
.zero-cross-card--above .zero-cross-card__indicator,
.weekly-summary-card--best .weekly-summary-card__indicator { color: var(--fx-positivo-tinta); }
.peak-trough-badge--trough .peak-trough-badge__indicator,
.zero-cross-card--below .zero-cross-card__indicator,
.weekly-summary-card--worst .weekly-summary-card__indicator { color: var(--fx-negativo-tinta); }
.peak-trough-badge--distance .peak-trough-badge__indicator { color: var(--tinta-3); }

.peak-trough-badge__content, .zero-cross-card__content, .weekly-summary-card__content { display: flex; flex-direction: column; gap: 3px; }
.peak-trough-badge__label-row, .zero-cross-card__label-row { display: flex; align-items: center; gap: 7px; }
.peak-trough-badge__label, .zero-cross-card__label, .weekly-summary-card__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.peak-trough-badge__value, .zero-cross-card__value, .weekly-summary-card__value { font-size: 18px; font-weight: 600; }
.peak-trough-badge__date, .zero-cross-card__sub, .weekly-summary-card__sub { font-size: 12px; color: var(--tinta-3); }
.zero-cross-card__total { font-size: 11.5px; color: var(--tinta-3); opacity: .85; }
.zero-cross-card.is-inactive { opacity: .55; }

/* Botão (?) e o balão que ele abre. */
.peak-trough-badge__info {
  font: inherit;
  font-size: 10px;
  line-height: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  background: transparent;
  color: var(--tinta-3);
  cursor: pointer;
}
.peak-trough-badge__info:hover { border-color: var(--ambar-sup); color: var(--tinta); }
.peak-trough-badge__tooltip {
  position: absolute;
  top: calc(100% - 6px);
  left: 14px;
  right: 14px;
  z-index: 60;
  background: var(--inverso-fundo);
  color: var(--inverso-tinta);
  border: 1px solid var(--linha-forte);
  border-radius: var(--fx-raio);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 16px 34px rgba(0, 0, 17, .3);
}
.has-open-tooltip { z-index: 61; }
.has-open-tooltip-inside { overflow: visible; }

/* ── Tabelas do período ─────────────────────────────────────────────────── */

.period-table__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.period-table__title { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 21px; margin: 0; }
.period-table__hint { font-size: 11.5px; color: var(--tinta-3); }
.period-table__scroll { max-height: 420px; overflow: auto; margin-top: 12px; }
.period-table__table { width: 100%; border-collapse: collapse; }
.period-table__th {
  position: sticky;
  top: 0;
  background: var(--fx-vidro-solido);
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--linha-forte);
}
.period-table__th--date { text-align: left; }
.period-table__table td { padding: 9px 12px; font-size: 13.5px; border-bottom: 1px solid var(--linha); }
.period-table__date { font-family: 'JetBrains Mono', monospace; color: var(--tinta-2); }
.period-table__ibov { text-align: right; font-family: 'JetBrains Mono', monospace; }
.period-table__acc { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.period-table__empty { text-align: center; color: var(--tinta-3); padding: 22px 0; }
/* A barra proporcional ao |saldo do dia| divide a célula com o número: a barra
   dá a comparação entre linhas, o número dá o valor. */
.period-table__bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.period-table__bar-track { flex: 1 1 auto; max-width: 300px; height: 5px; background: var(--linha); border-radius: 2px; overflow: hidden; }
.period-table__bar-fill { height: 100%; border-radius: 2px; }
.period-table__bar-fill.pos { background: var(--fx-positivo); }
.period-table__bar-fill.neg { background: var(--fx-negativo); }
.period-table__bar-value { min-width: 104px; text-align: right; font-weight: 500; }

/* ── Semana ─────────────────────────────────────────────────────────────── */

.ibov-week-strip { margin-top: 16px; }
.ibov-week-strip__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ibov-week-strip__title { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.ibov-week-strip__legend { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--tinta-3); }
.ibov-week-strip__sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ibov-week-strip__sw--up { background: var(--fx-positivo); }
.ibov-week-strip__sw--down { background: var(--fx-negativo); }
.ibov-week-strip__grid { display: flex; gap: 4px; flex-wrap: wrap; }
.ibov-week-cell {
  flex: 1 1 46px;
  min-width: 46px;
  border-radius: var(--fx-raio);
  border: 1px solid var(--fx-vidro-linha);
  padding: 6px 4px;
  text-align: center;
  background: var(--fx-vidro-interno);
}
.ibov-week-cell__pct { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; }
.ibov-week-cell__date { display: block; font-size: 9.5px; color: var(--tinta-3); margin-top: 2px; }
.ibov-week-cell--up { background: color-mix(in srgb, var(--fx-positivo) 14%, transparent); }
.ibov-week-cell--up-strong { background: color-mix(in srgb, var(--fx-positivo) 30%, transparent); border-color: var(--fx-positivo); }
.ibov-week-cell--down { background: color-mix(in srgb, var(--fx-negativo) 14%, transparent); }
.ibov-week-cell--down-strong { background: color-mix(in srgb, var(--fx-negativo) 30%, transparent); border-color: var(--fx-negativo); }
.ibov-week-cell--empty, .ibov-week-cell--flat { opacity: .6; }

/* ── Recordes e sequências ──────────────────────────────────────────────── */

.ytd-records__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ytd-records__title { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 22px; margin: 0; }
.ytd-records__year { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--tinta-3); }
.ytd-records__grid { display: grid; gap: 10px; margin-top: 16px; }
.ytd-records__grid--2x2 { grid-template-columns: repeat(2, 1fr); }

.ytd-record {
  background: var(--fx-vidro-interno);
  border: 1px solid var(--fx-vidro-linha);
  border-left-width: 2px;
  border-radius: var(--fx-raio);
  padding: 18px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.ytd-record--buy { border-left-color: var(--fx-positivo); }
.ytd-record--sell { border-left-color: var(--fx-negativo); }
.ytd-record__label { font-size: 12.5px; color: var(--tinta-3); }
.ytd-record__value { font-size: 21px; font-weight: 600; }
.ytd-record--buy .ytd-record__value { color: var(--fx-positivo-tinta); }
.ytd-record--sell .ytd-record__value { color: var(--fx-negativo-tinta); }
.ytd-record__date { font-size: 12px; color: var(--tinta-3); }
.ytd-record--empty .ytd-record__value { color: var(--tinta-3); font-size: 15px; }

/* ── IBOV em foco ───────────────────────────────────────────────────────── */

.ibov-focus__header { display: flex; flex-direction: column; gap: 4px; }
.ibov-focus__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.ibov-focus__card { border: 1px solid var(--fx-vidro-linha); border-radius: var(--fx-raio); padding: 16px; background: var(--fx-vidro-interno); }
.ibov-focus__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ibov-focus__kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.ibov-focus__ibov { font-size: 15px; font-weight: 600; }
.ibov-focus__ibov--up { color: var(--fx-positivo-tinta); }
.ibov-focus__ibov--down { color: var(--fx-negativo-tinta); }
.ibov-focus__date { font-size: 12px; color: var(--tinta-3); margin-top: 4px; }
.ibov-focus__rank { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ibov-focus__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding-bottom: 5px; border-bottom: 1px solid var(--linha); }
.ibov-focus__row:last-child { border-bottom: none; }
/* O ranking marca comprador e vendedor pelo valor, não pelo nome. */
.ibov-focus__row.is-buy .ibov-focus__val { color: var(--fx-positivo-tinta); }
.ibov-focus__row.is-sell .ibov-focus__val { color: var(--fx-negativo-tinta); }
.ibov-focus__name { color: var(--tinta-2); }
.ibov-focus__val { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* ── Período analisado, composição e janelas ────────────────────────────── */

.period-analysis { display: flex; flex-direction: column; gap: 18px; }
.period-analysis__row--main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pa-card { display: flex; flex-direction: column; }
.panel-card__title { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; color: var(--tinta-3); margin: 0 0 14px; }

.period-stats { display: flex; flex-direction: column; }
.period-stats__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.period-stats__row:last-child { border-bottom: none; }
.period-stats__row span { color: var(--tinta-3); }
.period-stats__row b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 600; }

.composition-card__body { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.composition-card__chart-wrap { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
/* O anel é um conic-gradient governado por --pos-pct, que o script escreve.
   Sem biblioteca: são duas cores e um ângulo. */
.composition-card__chart {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(var(--fx-positivo) 0 var(--pos-pct, 50%), var(--fx-negativo) var(--pos-pct, 50%) 100%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
  mask: radial-gradient(circle, transparent 58%, #000 59%);
}
.composition-card__center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.composition-card__center-pct { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 600; }
.composition-card__story { flex: 1 1 200px; }
.composition-card__lead { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.composition-card__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.composition-card__legend-item { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.composition-card__sw { width: 10px; height: 10px; border-radius: 2px; }
.composition-card__legend-item--pos .composition-card__sw { background: var(--fx-positivo); }
.composition-card__legend-item--neg .composition-card__sw { background: var(--fx-negativo); }
.composition-card__legend-label { color: var(--tinta-2); }
.composition-card__legend-count { margin-left: auto; font-family: 'JetBrains Mono', monospace; }
.composition-card__legend-pct { color: var(--tinta-3); font-family: 'JetBrains Mono', monospace; }

.flow-windows-strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.flow-windows-strip__title { margin: 0; }
.flow-windows-strip__hint { font-size: 11.5px; color: var(--tinta-3); }
.flow-windows-strip__body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 14px; }
.flow-window-seg { padding: 0 20px; border-left: 1px solid var(--linha); }
.flow-window-seg:first-child { padding-left: 0; border-left: none; }
.flow-window-seg__head { display: flex; align-items: baseline; gap: 9px; }
.flow-window-seg__tag { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ambar-tinta); }
.flow-window-seg__sub { font-size: 11.5px; color: var(--tinta-3); }
.flow-window-seg__metrics { display: flex; gap: 26px; margin: 12px 0 0; }
.flow-window-seg__metric dt { font-size: 11.5px; color: var(--tinta-3); }
.flow-window-seg__value { margin: 4px 0 0; font-size: 17px; font-weight: 600; }
.flow-window-seg__value--small { font-size: 14px; font-weight: 500; color: var(--tinta-2); }

/* ── Sazonalidade ───────────────────────────────────────────────────────── */

.seasonality-section { display: flex; flex-direction: column; gap: 18px; }

/* ── Heatmap ────────────────────────────────────────────────────────────── */

.heatmap-layout { display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: start; margin-top: 8px; }
/* A grade do ano tem uma coluna por semana e largura FIXA — ~890px de janeiro a
   dezembro. Sem `min-width: 0` a coluna `1fr` cresce até caber a grade inteira
   (item de grid tem `min-width: auto`), a seção estoura a tela no celular e é a
   PÁGINA que passa a rolar na horizontal. O ano rola dentro do próprio bloco:
   os meses, os rótulos e as células andam juntos e a grade não desalinha. */
.heatmap-layout__map { min-width: 0; overflow-x: auto; }
.heatmap-legend { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 11px; color: var(--tinta-3); }
.heatmap-legend__cell { width: 13px; height: 13px; border-radius: 2px; display: inline-block; }
.heatmap-months { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 5px; }
.heatmap-grid-wrap { display: flex; gap: 4px; }
.heatmap-day-labels { display: grid; grid-template-rows: repeat(5, var(--hm-cell, 14px)); font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--tinta-3); width: 30px; }
.heatmap-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, var(--hm-cell, 14px)); gap: var(--hm-gap, 3px); }
.heatmap-cell { width: var(--hm-cell, 14px); height: var(--hm-cell, 14px); border-radius: 2px; }
.heatmap-cell--empty { border: 1px solid var(--linha); }
/* Dia acima de R$ 1 bilhão: contorno, não brilho. */
.heatmap-cell--forte { box-shadow: 0 0 0 1px var(--tinta); }
.heatmap-layout__stats { display: flex; flex-direction: column; gap: 15px; }

.hm-info-btn { margin-left: 8px; vertical-align: middle; }
.hm-info-tip { width: min(420px, 86vw); left: auto; right: 0; }
.hm-info-tip__title { display: block; margin-bottom: 8px; }
.hm-info-tip p { margin: 8px 0; }
.hm-info-tip__foot { color: color-mix(in srgb, var(--inverso-tinta) 70%, transparent); }
.hm-info-row { display: flex; align-items: flex-start; gap: 9px; margin: 6px 0; }
.hm-chip { width: 12px; height: 12px; border-radius: 2px; flex: 0 0 auto; margin-top: 3px; display: inline-block; }
.hm-chip--compra-forte, .heatmap-legend__cell.hm-chip--compra-forte { background: var(--fx-compra-forte); }
.hm-chip--compra, .heatmap-legend__cell.hm-chip--compra { background: var(--fx-compra); }
.hm-chip--venda, .heatmap-legend__cell.hm-chip--venda { background: var(--fx-venda); }
.hm-chip--venda-forte, .heatmap-legend__cell.hm-chip--venda-forte { background: var(--fx-venda-forte); }

/* A dica do heatmap fica dentro de um bloco de texto — precisa de âncora. */
.chart-hint { position: relative; }

/* ── Perguntas frequentes ───────────────────────────────────────────────── */

.faq-section__title { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 26px; margin: 0 0 6px; }
.faq-item { border-bottom: 1px solid var(--linha); padding: 14px 0; }
.faq-item summary { cursor: pointer; font-size: 15px; font-weight: 500; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+'; font-family: 'JetBrains Mono', monospace; color: var(--ambar-tinta); }
.faq-item[open] summary::before { content: '−'; }
.faq-item p { margin: 10px 0 0; color: var(--tinta-2); font-size: 14.5px; line-height: 1.65; max-width: 78ch; }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */

.fx-rodape {
  background: var(--inverso-fundo);
  color: var(--inverso-tinta);
  padding: 34px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.fx-rodape__marca { display: flex; align-items: center; gap: 11px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .22em; }
.fx-rodape__marca img { border-radius: 50%; }
.fx-rodape__fonte { font-size: 13px; opacity: .78; }

/* ── Responsivo ─────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .stat-row--five { grid-template-columns: repeat(3, 1fr); }
  .disputa-layout, .heatmap-layout { grid-template-columns: 1fr; }
  .heatmap-layout__stats { flex-direction: row; flex-wrap: wrap; gap: 22px; }
}

@media (max-width: 900px) {
  .period-analysis__row--main, .ibov-focus__grid { grid-template-columns: 1fr; }
  .flow-windows-strip__body { grid-template-columns: 1fr; gap: 18px; }
  .flow-window-seg { padding: 0 0 0 14px; border-left: 2px solid var(--linha); }
  .flow-window-seg:first-child { padding-left: 14px; border-left: 2px solid var(--linha); }
  .peak-trough-strip { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .stat-row--five { grid-template-columns: repeat(2, 1fr); }
  .ytd-records__grid--2x2, .zero-cross-strip, .weekly-summary-strip { grid-template-columns: 1fr; }
  .chart-wrap { height: 300px; }
  .chart-wrap--secondary, .chart-wrap--cum { height: 260px; }
  .chart-card, .panel-card, .period-table, .ytd-records, .ibov-focus,
  .seasonality-card, .heatmap-section, .faq-section { padding: 16px 14px 18px; }
  .toolbar button { margin-left: 0; }
  /* O filtro da lâmina sai no celular. Aqui um cartão ocupa a largura
     inteira, quase não sobra página ao redor para o olho comparar dentro e
     fora — o efeito some — e é justo onde uma camada de composição por cartão
     pesa mais. O material continua inteiro: superfície, brilho e aresta. */
  .chart-card, .panel-card, .period-table, .ytd-records, .ibov-focus,
  .seasonality-card, .heatmap-section, .faq-section, .toolbar, .stat-row {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .invtable td, .invtable__th { padding-left: 11px; padding-right: 11px; font-size: 13px; }
}