/* OS GRÁFICOS DO PAINEL                                        (14/09/2026)

   Folha própria porque o desenho pertence a graficos.js (área e linha) e ao
   macro _barras.html (barras): tudo que é traço, eixo, dica e entrada mora
   aqui, e só aqui. O painel.css não conhece nenhuma destas classes.

   A entrada é o @keyframes risca do site aplicado ao dado de verdade: a linha
   é traçada da esquerda para a direita (a ordem do desenho é a ordem do
   tempo) e a área sobe atrás. Funciona sem saber o comprimento porque
   graficos.js escreve pathLength="1" no <path>: dasharray 1, dashoffset de
   1 a 0. A tinta das barras (#tintaDaBarra) está no base.html. */

.grafico { position: relative; }
.grafico-area { position: relative; min-height: 120px; }
.grafico-area .vazio { padding: 32px 0; }
.grafico-de-area, .grafico-de-barras { width: 100%; height: auto; display: block; overflow: visible; }

/* traço de espessura constante, mesmo com o SVG esticado */
.grafico-de-area :is(.linha-serie, .linha-segunda, .linha-da-mira, .linha-da-grade, .linha-de-base, .ponto-de-hoje, .ponto-da-mira) { vector-effect: non-scaling-stroke; }
.grafico-de-area .linha-da-grade, .grafico-de-barras .linha-da-grade { stroke: var(--linha); stroke-width: 1; }
.grafico-de-area .linha-de-base, .grafico-de-barras .linha-de-base { stroke: var(--linha-viva); stroke-width: 1; }
.grafico-de-area .marca-do-eixo, .grafico-de-barras .marca-do-eixo { fill: var(--fraco); font: 500 11px var(--fonte-texto); text-anchor: end; font-variant-numeric: tabular-nums; }
.grafico-de-area .rotulo-do-eixo, .grafico-de-barras .rotulo-do-eixo { fill: var(--fraco); font: 500 11px var(--fonte-texto); text-anchor: middle; }
.grafico-de-area .rotulo-do-eixo.no-canto, .grafico-de-barras .rotulo-do-eixo.no-canto { text-anchor: start; }
.grafico-de-area .rotulo-do-eixo.de-hoje, .grafico-de-barras .coluna-de-hoje .rotulo-do-eixo { fill: var(--texto); font-weight: 700; }
.grafico-de-area .rotulo-do-eixo.de-hoje { text-anchor: end; }
/* no celular graficos.js desenha num viewBox mais estreito; a letra sobe
   para continuar legível depois de escalada */
.grafico-de-area.estreito :is(.marca-do-eixo, .rotulo-do-eixo) { font-size: 13px; }

.grafico-de-area .linha-serie { fill: none; stroke: var(--vermelho); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.grafico-de-area .linha-segunda { fill: none; stroke: var(--linha-viva); stroke-width: 1.25; stroke-dasharray: 4 4; stroke-linejoin: round; }
.grafico-de-area .ponto-de-hoje { fill: var(--fundo); stroke: var(--vermelho); stroke-width: 2; }
.grafico-de-area .linha-da-mira { stroke: var(--linha-viva); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico-de-area .ponto-da-mira { fill: var(--vermelho); stroke: var(--fundo); stroke-width: 2; }

.grafico-de-barras .area-de-toque { fill: transparent; }
.grafico-de-barras .barra-cheia { fill: url(#tintaDaBarra); }
.grafico-de-barras .barra-vazia { fill: var(--painel-3); }
.grafico-de-barras .coluna { transition: opacity .18s var(--curva); }
.grafico-de-barras:hover .coluna { opacity: .45; }
.grafico-de-barras .coluna:hover { opacity: 1; }

/* a dica em HTML, posicionada por transform (graficos.js) */
.dica-do-grafico {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  display: grid; gap: 2px; padding: 8px 11px;
  border-radius: 8px; border: 1px solid var(--linha-viva); background: var(--painel-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  font-size: 12px; color: var(--texto); white-space: nowrap;
  opacity: 0; transition: opacity .15s;
}
.dica-do-grafico.a-vista { opacity: 1; }
.dica-do-grafico small { color: var(--fraco); font-size: 11px; }
.dica-do-grafico b { font: 700 14px/1.2 var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.dica-do-grafico b + span, .dica-do-grafico i { color: var(--fraco); font-style: normal; }

/* ---- a entrada: a linha se desenha, a área sobe atrás, o ponto acende ---- */
.grafico-de-area .desenho.entrando { opacity: 0; }
.grafico-de-area .desenho.riscando :is(.linha-serie, .linha-segunda) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: risca-a-serie .78s var(--curva-2) forwards; }
.grafico-de-area .desenho.riscando .linha-segunda { animation-delay: .08s; }
.grafico-de-area .desenho.riscando .area-serie { transform-box: fill-box; transform-origin: center bottom; animation: sobe-a-area .5s var(--curva-2) .18s backwards; }
.grafico-de-area .desenho.riscando .ponto-de-hoje { transform-box: fill-box; transform-origin: center; animation: acende-o-ponto .32s var(--curva-2) .62s backwards; }
@keyframes risca-a-serie { to { stroke-dashoffset: 0; } }
@keyframes sobe-a-area { from { opacity: 0; transform: scaleY(.7); } }
@keyframes acende-o-ponto { from { opacity: 0; transform: scale(.2); } }

@media (prefers-reduced-motion: reduce) {
  .grafico-de-area .desenho.entrando { opacity: 1; }
  .grafico-de-area .desenho.riscando :is(.linha-serie, .linha-segunda, .area-serie, .ponto-de-hoje) { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* a linha da meta (graficos.js): tracejada, ambar, com o valor em cima */
.grafico-de-area .linha-da-meta { stroke: #f5b83d; stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .85; }
.grafico-de-area .rotulo-da-meta { fill: #f5b83d; font: 700 10px "Chakra Petch", sans-serif; letter-spacing: .12em; }