/* ==========================================================================
   GRÁFICOS
   Estrutura dos contêineres. O desenho entra na Etapa 4.
   ========================================================================== */

.chart {
  position: relative;
  width: 100%;
}

.chart--sm { height: 170px; }
.chart--md { height: 250px; }
.chart--lg { height: 320px; }

@media (max-width: 900px) {
  .chart--md { height: 220px; }
  .chart--lg { height: 260px; }
}

.chart__canvas {
  width: 100%;
  height: 100%;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast);
}

.chart-legend__item:hover {
  color: var(--text-primary);
}

.chart-legend__item.is-muted {
  opacity: 0.4;
}

.chart-legend__swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

/* --- Cartão de gráfico ---------------------------------------------------- */

.card--chart .card__body {
  display: flex;
  flex-direction: column;
}

.card__heading { min-width: 0; }

.chart__canvas {
  display: block;
  /* Recorta o desenho na própria área: nenhum rótulo invade o cartão vizinho */
  overflow: hidden;
}

/* Entrada discreta: a linha se desenha, as barras crescem.

   Toda esta seção depende de `chart--animando`, posta quando o gráfico
   chega ao campo de visão. Antes ela valia sempre, e o resultado era que
   quase todo desenho se animava abaixo da dobra: ao rolar a página só se
   encontrava o gráfico pronto. Sem nenhuma das duas classes o gráfico fica
   no estado final, parado — é assim que ele precisa estar para virar PDF
   ou imagem. */

/* Esperando a vez: desenhado, porém ainda não revelado */
.chart--aguardando .chart__canvas { opacity: 0; }

/* O traço usa o comprimento normalizado do próprio caminho (pathLength=1),
   o que faz a linha se desenhar por inteiro qualquer que seja seu tamanho. */
.chart--animando .chart__line:not(.chart__line--dashed) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: line-draw 900ms var(--ease-out) forwards;
}

/* A linha de tendência mantém seu tracejado e apenas surge */
.chart--animando .chart__line--dashed {
  animation: fade-in var(--duration-slow) var(--ease-out);
}

/* O brilho que caminha pela linha.

   O halo é largo e quase transparente; o núcleo é fino e forte. Um sobre o
   outro, o que se vê é uma luz atravessando o traço — e não uma segunda
   linha por cima dele. Entra depois que a linha terminou de se desenhar,
   senão os dois efeitos disputariam o mesmo caminho. */
.chart__line-brilho {
  opacity: 0;
}

.chart--animando .chart__line-brilho {
  animation: linha-brilho 4.5s linear 900ms infinite;
}

.chart--animando .chart__line-brilho--halo   { opacity: 0.22; }
.chart--animando .chart__line-brilho--nucleo { opacity: 0.95; }

@keyframes linha-brilho {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Fim de semana, feriado, parada: trecho do eixo que não é dia de trabalho.
   Fica atrás do desenho e bem apagado — é referência, não informação. */
.chart__band {
  opacity: 0.12;
}

.chart--animando .chart__area {
  animation: fade-in var(--duration-slow) var(--ease-out);
}

.chart--animando .chart__point {
  animation: fade-in var(--duration-slow) var(--ease-out) backwards;
  animation-delay: 500ms;
}

/* As colunas sobem da base, uma logo depois da outra, da esquerda para a
   direita. O atraso por coluna é pequeno de propósito: o suficiente para o
   gráfico se montar em vez de aparecer pronto, sem virar espetáculo — quem
   filtra quer o número, não a animação. */
.chart--animando .chart__bar {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: bar-grow 520ms var(--ease-out) forwards;
  animation-delay: calc(var(--coluna, 0) * 22ms);
}

/* As deitadas descem na ordem do ranking, do primeiro colocado ao último.
   O passo é maior que o das colunas em pé porque são poucas e altas: com
   22ms a descida não se percebia. */
.chart--animando .chart__bar--horizontal {
  transform: scaleX(0);
  transform-origin: left;
  animation: bar-grow-x 520ms var(--ease-out) forwards;
  animation-delay: calc(var(--coluna, 0) * 38ms);
}

/* As fatias acendem na volta do anel, como se ele fosse percorrido */
.chart--animando .chart__slice {
  animation: fade-in 520ms var(--ease-out) backwards;
  animation-delay: calc(var(--fatia, 0) * 80ms);
}

.chart__slice {
  transition: opacity var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

/* O calendário se preenche na diagonal, no sentido da leitura */
.chart--animando .chart__cell {
  animation: fade-in 400ms var(--ease-out) backwards;
  animation-delay: calc(var(--celula, 0) * 9ms);
}

.chart__cell { cursor: pointer; }

.chart__hover-band { cursor: crosshair; }

.chart__focus { pointer-events: none; }

/* --- Dica ----------------------------------------------------------------- */

.chart-tooltip {
  position: fixed;
  z-index: var(--z-dropdown);
  min-width: 150px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  animation: fade-in var(--duration-fast) var(--ease-out);
}

.chart-tooltip__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.chart-tooltip__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.chart-tooltip__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-tooltip__label { flex: 1; }

.chart-tooltip__value {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.chart--xl { height: 420px; }

@media (max-width: 900px) {
  .chart--xl { height: 360px; }
}