/* Gráficos. Poucas cores, todas semânticas. */

.chart-wrap { width: 100%; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }

/*
 * EM TELA ESTREITA O GRÁFICO ROLA, EM VEZ DE ENCOLHER — 08/09/2026.
 *
 * O SVG tem `viewBox` fixo e se ajusta ao contêiner. A 390px isso dava uma
 * escala de 0,36: medido, o rótulo do eixo saía com **5px de altura e 11px de
 * largura**. A curva continuava legível e as datas não, e um gráfico de caixa
 * sem as datas é um desenho bonito.
 *
 * Rolar horizontalmente preserva o tamanho do texto. A faixa de leitura logo
 * abaixo já rolava assim desde que foi criada; agora as duas se comportam
 * igual, e quem arrasta uma entende a outra.
 *
 * O CORTE É UMA RAZÃO, E NÃO UM NÚMERO SOLTO — corrigido em 13/09/2026.
 *
 * A regra vale enquanto a escala ficar acima de 0,7; abaixo disso o rótulo cai
 * para menos de 7px. O valor 620 tinha sido calculado para a moldura de 900
 * (620/900 = 0,69) e virou número mágico: quando o combo passou a ser autorado
 * em 1160, a mesma linha de CSS produziu escala de 0,53, e medido a 390px o
 * rótulo de valor saiu com **7px de altura e 5px de corpo efetivo** — ilegível,
 * exatamente o defeito que este bloco existe para impedir.
 *
 * Agora o mínimo acompanha a moldura mais larga em uso (1160 × 0,7 = 812), e
 * quem mudar o `viewBox` de novo tem a conta escrita aqui para refazer.
 */
@media (max-width: 812px) {
  .chart-wrap { overflow-x: auto; }
  .chart-wrap > .chart { min-width: 812px; }
}

.grid-line { stroke: var(--grid); stroke-width: 1; }
.axis-zero { stroke: var(--line-2); stroke-width: 1.2; }
.axis-label { font-size: 9.5px; fill: var(--ink-faint); font-family: var(--font); font-variant-numeric: tabular-nums; }

.bar { transition: opacity .12s; }
.bar-in  { fill: var(--series-in); }
.bar-out { fill: var(--series-out); }
.bar.is-partial { opacity: .45; }
.hit { fill: transparent; cursor: crosshair; }

.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-acc  { stroke: var(--series-acc); stroke-width: 2.2; }
.line-real { stroke: var(--series-in); }
.line-proj { stroke: var(--series-proj); stroke-dasharray: 5 4; }
.line-cost { stroke: var(--series-out); }
.line-rev  { stroke: var(--series-in); }

.area { stroke: none; }
.area-real { fill: rgba(22, 93, 144, .09); }

.dot { stroke: var(--paper); stroke-width: 1.6; }
.dot-acc { fill: var(--series-acc); }
.dot-real { fill: var(--series-in); }
.dot-proj { fill: var(--series-proj); }
.dot-manual { fill: var(--gold); stroke: var(--navy); stroke-width: 2; }
.dot-be { fill: var(--navy); }

.zone-loss   { fill: rgba(184, 50, 63, .10); }
.zone-profit { fill: rgba(20, 107, 79, .11); }

.marker { stroke-width: 1.2; stroke-dasharray: 3 3; }
.marker-be { stroke: var(--navy); }
.marker-now { stroke: var(--gold-2); }
.marker-label { font-size: 9.5px; fill: var(--navy); font-weight: 700; font-family: var(--font); }
.marker-label.now { fill: var(--gold-2); }

.wf-pos { fill: var(--series-in); }
.wf-neg { fill: var(--series-out); }
.wf-total { fill: var(--navy); }
.wf-connector { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 2; }
.wf-value { font-size: 9.5px; fill: var(--ink-soft); font-weight: 650; font-family: var(--font); font-variant-numeric: tabular-nums; }

/* legendas */
.legend-swatch.sw-in    { background: var(--series-in); }
.legend-swatch.sw-out   { background: var(--series-out); }
.legend-swatch.sw-acc   { background: var(--series-acc); }
.legend-swatch.sw-real  { background: var(--series-in); }
.legend-swatch.sw-proj  { color: var(--series-proj); background: repeating-linear-gradient(90deg, var(--series-proj) 0 4px, transparent 4px 7px); }
.legend-swatch.sw-rev   { background: var(--series-in); }
.legend-swatch.sw-cost  { background: var(--series-out); }
.legend-swatch.sw-zone-loss   { background: rgba(184, 50, 63, .22); height: 9px; border-radius: 2px; }
.legend-swatch.sw-zone-profit { background: rgba(20, 107, 79, .22); height: 9px; border-radius: 2px; }

/* tooltip */
.chart-tip {
  position: absolute; display: none; z-index: var(--z-tooltip);
  background: var(--navy); color: #e7eef7;
  border-radius: var(--rad-s); padding: 8px 10px;
  font-size: var(--fs-xs); line-height: 1.6; pointer-events: none;
  box-shadow: var(--sh-2); min-width: 150px;
}
.chart-tip b { display: block; color: #fff; font-size: var(--fs-sm); margin-bottom: 3px; }
.chart-tip span { display: flex; align-items: center; gap: 6px; color: #b7c8dd; }
.chart-tip em { margin-left: auto; font-style: normal; font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; }
.chart-tip .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chart-tip .sw.in { background: var(--steel-2); }
.chart-tip .sw.out { background: #e07c86; }
.chart-tip .sw.acc { background: var(--gold-3); }
.chart-tip .tip-note { display: block; margin-top: 4px; color: var(--gold-3); font-size: var(--fs-micro); }

/* ranking */
.rank { display: flex; flex-direction: column; }
.rank-row {
  display: grid; grid-template-columns: minmax(120px, 1.5fr) minmax(60px, 2fr) 100px;
  align-items: center; gap: 12px; padding: 6px 0; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--paper-3);
}
.rank-row:last-child { border-bottom: none; }
.rank-row.clickable { cursor: pointer; }
.rank-row.clickable:hover { background: var(--paper-2); }
.rank-label { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); }
.rank-track { height: 8px; background: var(--paper-3); border-radius: 4px; overflow: hidden; }
.rank-fill { height: 100%; border-radius: 4px; background: var(--steel); }
.rank-fill.neg { background: var(--neg-2); }
.rank-fill.gold { background: var(--gold); }
.rank-fill.pos { background: var(--pos-2); }
.rank-value { text-align: right; font-weight: 620; font-variant-numeric: tabular-nums; }
.rank-value.neg { color: var(--neg); }
.rank-meta { grid-column: 1 / -1; font-size: var(--fs-micro); color: var(--ink-mute); margin-top: -2px; }

/* composição */
.composition-track { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--paper-3); }
.composition-seg { height: 100%; }
.composition-seg.c1 { background: var(--navy-2); }
.composition-seg.c2 { background: var(--steel); }
.composition-seg.c3 { background: var(--steel-2); }
.composition-seg.c4 { background: var(--gold-2); }
.composition-seg.c5 { background: var(--gold); }
.composition-seg.c6 { background: var(--steel-3); }
.composition-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-soft); }
.composition-legend .legend-item { gap: 6px; }
.composition-legend .num { margin-left: 2px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.legend-dot.c1 { background: var(--navy-2); }
.legend-dot.c2 { background: var(--steel); }
.legend-dot.c3 { background: var(--steel-2); }
.legend-dot.c4 { background: var(--gold-2); }
.legend-dot.c5 { background: var(--gold); }
.legend-dot.c6 { background: var(--steel-3); }

/* sparkline */
.spark { width: 74px; height: 20px; display: inline-block; vertical-align: middle; }
.spark path { fill: none; stroke: var(--steel-2); stroke-width: 1.6; }
.spark path.neg { stroke: var(--neg-2); }

/* ================================================= LINGUAGEM DOS GRÁFICOS = */

.grid-line { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 4; }
.axis-zero { stroke: rgba(3, 21, 49, .28); stroke-width: 1.4; stroke-dasharray: none; }
.axis-rail { stroke: var(--line); stroke-width: 1.5; }

.axis-label {
  font-size: 10px; fill: var(--ink-faint); font-family: var(--font);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.axis-label.is-focus { fill: var(--navy); font-weight: 700; }

.point-label {
  font-size: 10.5px; font-weight: 750; fill: var(--gold-2);
  font-family: var(--font); font-variant-numeric: tabular-nums;
}

/* colunas: o mês em foco fica sólido, os outros recuam */
.bar { transition: opacity .14s; }
.bar.is-back { opacity: .52; }
.bar.is-focus { opacity: 1; }
.bar.is-partial { opacity: .3; }
.focus-band { fill: rgba(3, 21, 49, .045); }

/* ---------------------------------------------------------------------------
   O VALOR ESCRITO NA BARRA, E O REALCE QUE MOSTRA QUE O GRÁFICO RESPONDE
   13/09/2026.

   Antes o número só existia no tooltip: quem não passava o mouse não lia valor
   nenhum, e quem passava não sabia que também podia clicar. Duas adições
   pequenas resolvem as duas coisas — o rótulo permanente e a faixa que acende.

   `pointer-events: none` nos dois: eles são leitura, não alvo. Sem isso o
   rótulo roubaria o `mousemove` da faixa de captura e o tooltip piscaria ao
   passar por cima do próprio número.
   --------------------------------------------------------------------------- */

.bar-valor {
  font-size: 10px; font-weight: 700;
  font-family: var(--font); font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.bar-valor.in  { fill: var(--navy-2, #0f3460); }
.bar-valor.out { fill: var(--neg-2, #8e1f2b); }

/* Mês parcial ou projetado: o rótulo recua junto com a barra, senão o número
   de um mês que ainda não fechou fica com o mesmo peso de um fechado. */
.bar-valor.is-partial { opacity: .55; font-style: italic; }

.hover-band {
  fill: transparent;
  transition: fill .12s;
  pointer-events: none;
}
.hover-band.is-hover { fill: rgba(3, 21, 49, .075); }
.hover-band.focus-band.is-hover { fill: rgba(3, 21, 49, .1); }

/* A faixa de captura é quem recebe o clique — e agora diz isso. */
.hit.is-clicavel { cursor: pointer; }

/* acumulado com halo, para não competir com as colunas */
.line-acc { stroke: var(--gold-2); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.line-acc-halo { stroke: var(--gold-3); stroke-width: 7; fill: none; opacity: .35; stroke-linecap: round; }
.dot-acc { fill: var(--gold-2); stroke: #fff; stroke-width: 1.8; }

/* fronteira realizado / projetado */
.future-band { fill: rgba(107, 163, 208, .07); }
.boundary { stroke: var(--steel-2); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .7; }
.boundary-label {
  font-size: 9.5px; font-weight: 750; fill: var(--steel); font-family: var(--font);
  letter-spacing: .08em; text-transform: uppercase;
}

.line-real { stroke: var(--steel); stroke-width: 2.4; }
.line-proj { stroke: var(--steel-3); stroke-width: 2.2; stroke-dasharray: 6 4; }
.dot-real { fill: var(--steel); stroke: #fff; stroke-width: 1.8; }
.dot-proj { fill: #fff; stroke: var(--steel-3); stroke-width: 2; }
.dot-manual { fill: var(--gold); stroke: var(--navy); stroke-width: 2; }

/* cascata */
.wf-connector { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.wf-value { font-size: 10px; fill: var(--ink-soft); font-weight: 650; font-family: var(--font); font-variant-numeric: tabular-nums; }
.wf-value.is-total { fill: var(--navy); font-weight: 800; }

/* ranking com índice */
.rank-row {
  grid-template-columns: 22px minmax(110px, 1.4fr) minmax(60px, 2fr) 104px;
  padding: 7px 0; gap: 10px;
}
.rank-index {
  font-size: var(--fs-micro); font-weight: 700; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.rank-row:hover .rank-index { color: var(--gold-2); }

/* ---------------------------------------------------------------------------
   A BARRA GANHOU CORPO — 13/09/2026.

   Medido na tela: trilho de 9px de altura numa linha de 53px. O peso visual
   ficava todo no texto, e os dois rankings — «Onde o capital está parado» e
   «Composição do estoque em poder da Amazon» — liam-se como tabela com um
   enfeite, não como gráfico. Era a leitura de «gráfico pequeno».

   16px é a altura em que a barra passa a ser o elemento dominante da linha sem
   empurrar o rótulo nem a meta: a linha continua com a mesma altura, porque o
   que crescia era o vazio em volta do trilho.
   --------------------------------------------------------------------------- */
.rank-track { height: 16px; border-radius: 8px; background: var(--paper-3); }
.rank-fill {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--steel-2), var(--navy-3));
  transition: filter .12s;
}

/* A barra da linha sob o ponteiro acende junto com o fundo: sem isso o realce
   acontece no fundo da linha e a barra — que é o que se está lendo — não
   acompanha. */
.rank-row.clickable:hover .rank-fill { filter: brightness(1.18) saturate(1.1); }
.rank-fill.pos { background: linear-gradient(90deg, #1d8a66, #0e5540); }
.rank-fill.neg { background: linear-gradient(90deg, #c95a63, #8e1f2b); }
.rank-fill.gold { background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); }
.rank-meta { grid-column: 2 / -1; }

/* legenda e tooltip */
.legend { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.legend-swatch { height: 4px; border-radius: 2px; }
.legend-swatch.sw-in { background: linear-gradient(90deg, #2e7cb8, #0f3460); }
.legend-swatch.sw-out { background: linear-gradient(90deg, #c95a63, #8e1f2b); }
.legend-swatch.sw-acc { background: var(--gold-2); }
.legend-swatch.sw-manual { background: var(--gold); height: 8px; width: 8px; border-radius: 50%; }
.chart-tip { border: 1px solid rgba(255,255,255,.12); border-radius: var(--rad); padding: 9px 11px; }

/* Faixa de leitura sob o gráfico: cada série com seu valor por período. */
.readout { margin-top: 10px; overflow-x: auto; }
.readout-table { width: 100%; font-size: var(--fs-xs); border-collapse: collapse; }
.readout-table th, .readout-table td { padding: 5px 8px; white-space: nowrap; }
/* ---------------------------------------------------------------------------
   O MÊS E O SEU VALOR NA MESMA PRUMADA — 13/09/2026.

   O cabeçalho e as células estavam alinhados à direita. Com «set/26» ocupando
   menos espaço que «R$ 140.765,57», o rótulo do mês e os números da coluna
   encostavam em bordas diferentes, e a coluna deixava de ser uma coluna: para
   saber de que mês era um valor, era preciso contar posições.

   Centralizar resolve porque a largura da coluna passa a ser governada pelo
   número — que é sempre o item mais largo — e o mês fica na prumada dele.
   A primeira coluna, que traz o nome da série, continua à esquerda.
   --------------------------------------------------------------------------- */
.readout-table thead th { color: var(--ink-faint); font-weight: 600; text-align: center; border-bottom: 1px solid var(--line); }
.readout-table thead th:first-child { text-align: left; }
.readout-table tbody td { text-align: center; }
.readout-table thead th.is-focus { color: var(--navy); font-weight: 750; }
.readout-table tbody th {
  text-align: left; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; gap: 7px;
}
.readout-table tbody tr { border-bottom: 1px solid var(--paper-3); }
.readout-table tbody tr:last-child { border-bottom: none; }
.readout-table tbody tr.is-acc th, .readout-table tbody tr.is-acc td { color: var(--gold-2); font-weight: 650; }
.readout-table td.neg { color: var(--neg); }
.readout-table .sw { width: 9px; height: 3px; border-radius: 2px; flex: none; }
.readout-table .sw.in { background: linear-gradient(90deg, #2e7cb8, #0f3460); }
.readout-table .sw.out { background: linear-gradient(90deg, #c95a63, #8e1f2b); }
.readout-table .sw.acc { background: var(--gold-2); }
.readout-table .sw.real { background: linear-gradient(90deg, #2e7cb8, #165d90); }
.readout-table td.is-proj { color: var(--ink-mute); font-style: italic; }

/* ---------------------------------------------------------------------------
   O TOTAL NA LINHA DO EFEITO — 13/09/2026.

   Ele passou a trazer valor no lugar do travessão, e precisa se distinguir dos
   efeitos ao lado: é o RESULTADO deles, e não mais um deles. Mesmo destaque do
   cabeçalho do degrau final, que já marca a mesma coluna.
--------------------------------------------------------------------------- */
.readout-table td.is-total { color: var(--navy); font-weight: 750; }

/* ---------------------------------------------------------------------------
   LEITURA EM TEXTO SOB O GRÁFICO

   Um número que só existe sob o cursor não entra em relatório nem em reunião —
   e não existe para quem navega por teclado. O gráfico dá a forma; estas
   células dão as medidas que ele responde, escritas.
   --------------------------------------------------------------------------- */
.chart-readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--paper-3);
}
.readout-cell { min-width: 0; }
.readout-label {
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.readout-value {
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--ink);
  margin-top: var(--sp-1);
}
.readout-value.pos { color: var(--pos); }
.readout-value.neg { color: var(--neg); }

/* A faixa de leitura do ponto de equilíbrio cobre a área útil: as duas curvas
   são contínuas, e exigir acerto de pixel num ponto seria pedir pontaria para
   ler um número. */
.hit-band { cursor: crosshair; }
.marker-cursor { stroke: var(--ink-mute); stroke-width: 1; stroke-dasharray: 2 3; }


/* --------------------------------------------------------------------------
   COMO O MÊS DEVE FECHAR

   A barra do mês em curso tem duas partes: sólido é fato, hachurado é
   estimativa. Hachura e não cor mais clara — cor sozinha some em escala de
   cinza e para quem não distingue azuis.
   -------------------------------------------------------------------------- */
.chart.fechamento .bar-real { }
.chart.fechamento .bar-proj { opacity: .95; }
.chart.fechamento .point-label { font-size: 10.5px; font-weight: 700; fill: var(--navy-2); font-family: var(--font); }
.chart.fechamento .point-label.is-proj { fill: var(--steel); font-style: italic; }

/* Mês sem dado é uma interrupção, não uma barra de altura zero — que se leria
   como "vendeu nada". */
.chart.fechamento .sem-dado { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 3 3; }


/* Hover le, clique investiga. O cursor precisa dizer qual dos dois esta
   disponivel: uma area clicavel que parece so um alvo de hover nao e
   descoberta por ninguem. */
.hit.is-clicavel { cursor: pointer; }