/* Gráficos. Só tokens; nenhuma cor fixa. Animação: uma vez, < 1 s, só dentro de .animar.
   Uma codificação só: despesa em --negativo, sobra em --positivo. */

.grafico { margin: 0; }
.grafico .ponto {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--texto-suave);
}
.grafico .positivo { color: var(--positivo); fill: var(--positivo); }
.grafico .negativo { color: var(--negativo); fill: var(--negativo); }

/* ---- despesa + sobra por mês (barra inteira = renda) ---- */
.grafico-mensal svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-mensal .gm-chao { stroke: var(--borda); stroke-width: 1; }
.grafico-mensal .gm-pilha { transform-box: fill-box; transform-origin: 50% 100%; }
.grafico-mensal .gm-despesa { fill: var(--negativo); }
.grafico-mensal .gm-sobra { fill: var(--positivo); }
.grafico-mensal .gm-mes:not(.gm-atual) .gm-barra { opacity: .5; }
.grafico-mensal .gm-futuro .gm-barra { fill: none; stroke-width: 1.5; opacity: 1; }
.grafico-mensal .gm-futuro .gm-despesa { stroke: var(--negativo); }
.grafico-mensal .gm-futuro .gm-sobra { stroke: var(--positivo); }
.grafico-mensal text { font-family: var(--fonte-numero, var(--fonte)); font-variant-numeric: tabular-nums; }
.grafico-mensal .gm-valor { font-size: 12.5px; font-weight: 650; }
.grafico-mensal .gm-mes:not(.gm-atual) .gm-valor { fill: var(--texto-suave); font-weight: 500; }
/* previsão não é resultado: rótulo em cor neutra */
.grafico-mensal .gm-futuro .gm-valor { fill: var(--texto-suave); }
.grafico-mensal .gm-futuro.gm-atual .gm-valor { fill: var(--texto); }
.grafico-mensal .gm-rotulo { font-size: 12.5px; fill: var(--texto-suave); font-family: var(--fonte); }
.grafico-mensal .gm-atual .gm-rotulo { fill: var(--texto); font-weight: 650; }
.grafico-mensal .ponto.gm-despesa { background: var(--negativo); }
.grafico-mensal .ponto.gm-sobra { background: var(--positivo); }
.grafico-mensal .ponto.gm-contorno { background: none; border: 1.5px solid var(--texto-suave); }

.grafico-legenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  margin-top: 10px; font-size: .8125rem; color: var(--texto);
}
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }

.grafico-numeros { margin-top: 8px; border-top: 1px solid var(--borda); }
.grafico-numeros summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer;
  font-size: .875rem; color: var(--texto-suave); list-style: none;
}
.grafico-numeros summary::-webkit-details-marker { display: none; }
.grafico-numeros summary::after { content: '+'; margin-left: auto; font-size: 1.125rem; }
.grafico-numeros[open] summary::after { content: '−'; }
.grafico-numeros table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.grafico-numeros th, .grafico-numeros td { padding: 7px 0; text-align: right; font-weight: 400; }
.grafico-numeros th:first-child { text-align: left; }
.grafico-numeros thead th { color: var(--texto-suave); font-size: .75rem; }
.grafico-numeros tbody tr { border-top: 1px solid var(--borda); }

/* ---- barra dividida ---- */
.dividida-trilho {
  display: flex; gap: 2px; height: 12px; overflow: hidden;
  border-radius: 999px; background: var(--superficie-2);
}
.dividida-parte { flex: 0 1 0; min-width: 3px; background: var(--texto-suave); }
.dividida-legenda { display: grid; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; }
.dividida-legenda li { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: .9375rem; }
.dividida-rotulo { flex: 1; min-width: 0; color: var(--texto); }
/* coluna do percentual com a largura de 100%: a borda direita dos valores em R$ cai no mesmo x */
.dividida-fracao { flex: none; width: 4.5ch; text-align: right; color: var(--texto-suave); }
.dividida-legenda.em-linha .dividida-fracao { width: auto; }
.dividida-legenda.em-linha { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.dividida-legenda.em-linha li { font-size: .875rem; gap: 6px; }
.dividida-legenda.em-linha .dividida-rotulo { flex: none; color: var(--texto-suave); }

/* ---- ranking: a barra ocupa do trilho a mesma fatia que o item ocupa do total ---- */
.grafico-ranking { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ranking-item { display: flex; align-items: center; gap: 12px; --cor: var(--texto-suave); }
.ranking-icone {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent);
}
.ranking-icone .icone { width: 20px; height: 20px; }
.ranking-corpo { flex: 1; min-width: 0; }
.ranking-topo { display: flex; align-items: baseline; gap: 8px; font-size: .9375rem; }
.ranking-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.ranking-fracao { flex: none; width: 4.5ch; text-align: right; color: var(--texto-suave); font-size: .8125rem; }
.ranking-trilho { height: 6px; margin-top: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.ranking-barra { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: var(--cor); transform-origin: 0 50%; }

/* ---- movimento: parte do estado final, roda uma vez, explica a proporção ---- */
.animar .grafico-mensal .gm-pilha { animation: grafico-subir .6s cubic-bezier(.2, .7, .2, 1) both; }
.animar .dividida-trilho { animation: grafico-revelar .6s cubic-bezier(.2, .7, .2, 1) both; }
.animar .ranking-barra { animation: grafico-esticar .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes grafico-subir { from { transform: scaleY(0); } }
@keyframes grafico-revelar { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes grafico-esticar { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .animar .grafico-mensal .gm-pilha, .animar .dividida-trilho, .animar .ranking-barra { animation: none; }
}