/* Usado por Components/UI/Spark.razor (sparkline em colunas CSS). Positivo usa --ok (verde) em
   vez de --accent de propósito — achado real 08/08/2026: no tema Arquitetura (default),
   --accent (#A9502F, terracota) e --bad (#AE3E2B, vermelho) são quase a mesma cor lado a lado
   numa barra fina, ficava impossível diferenciar positivo/negativo. --ok/--bad já são fixos
   (não variam por tema, ao contrário de --accent) e é o mesmo par usado em .delta.up/.delta.down
   — reaproveita convenção já existente em vez de inventar uma cor nova. */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.spark i { flex: 1; background: var(--ok-bg); border-top: 2px solid var(--ok); min-width: 6px; position: relative; }
.spark i.neg { background: var(--bad-bg); border-top-color: var(--bad); }

/* Usado por Components/UI/DualSpark.razor — barras pareadas receita/custo por mês. Custo usa
   --cost (azul) em vez de --bad (vermelho/terracota) de propósito — ver comentário em
   global.css :root sobre por quê --bad ficava indistinguível de --accent lado a lado. */
.spark.dual { height: 110px; gap: 8px; }
.spark.dual .dual-col { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 100%; min-width: 14px; }
.spark.dual .dual-col i { flex: 1; min-width: 5px; }
.spark.dual i.revenue { background: var(--accent-soft); border-top: 2px solid var(--accent); }
.spark.dual i.cost { background: var(--cost-bg); border-top: 2px solid var(--cost); }
.spark-labels { display: flex; gap: 8px; margin-top: 6px; }
.spark-labels span { flex: 1; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }

/* Valor exato de cada barra — achado real 08/08/2026: o gráfico não tinha número nenhum de
   referência, só altura relativa. Revelado só na impressão/PDF, onde não existe hover — sem
   essa distinção o relatório exportado ficava sem nenhum número atrelado às barras. Na tela,
   revelado também no hover, sem depender do `title` nativo (achado de usuário real 26/08/2026:
   o tooltip do navegador só aparece depois de alguns segundos parado — `:hover` aqui mostra na
   hora, o `title` continua no markup só como reforço de acessibilidade). Barra .neg (valor
   negativo) mostra o rótulo ABAIXO em vez de acima — todas as barras crescem do mesmo piso pra
   cima (a altura é sempre a magnitude absoluta, só a cor marca o sinal, não é um gráfico
   divergente com linha de zero no meio), então sem essa distinção o número de um valor negativo
   apareceria na mesma posição visual de um positivo, sem nada reforçando que é uma leitura
   diferente. */
.spark-value {
  display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 7px; white-space: nowrap; color: var(--ink-2);
  margin-bottom: 2px; background: var(--surface); padding: 1px 4px; border-radius: var(--r);
  border: 1px solid var(--line); pointer-events: none;
}
.spark i.neg .spark-value { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 2px; }
.spark i:hover .spark-value { display: block; }
@media print {
  .spark-value { display: block; background: none; padding: 0; border: none; }
}

/* Dica de que dá pra passar o mouse — achado real 08/08/2026: o valor só aparece via tooltip
   nativo (title) na tela, sem nenhuma pista visual de que essa interação existe. Escondida na
   impressão (.print-hide já cobre isso via layout.css) — não faz sentido instruir "passe o
   mouse" num PDF estático. */
.spark-hint { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 6px; }