/* ============================================================================
   LINHA · gráficos (desenhados por ds-charts.js em qualquer painel)
   Grade e eixos recessivos, texto em tinta de texto, dica no hover.
   ============================================================================ */
.lg{ position:relative; width:100%; font-family:var(--l-fonte) }
.lg svg{ display:block; width:100%; height:auto; overflow:visible }
.lg-vazio{ display:grid; place-items:center; min-height:160px; color:var(--l-texto-3); font-size:var(--l-t-peq) }

.lg-grade{ stroke:var(--l-fio); stroke-width:1 }
.lg-base{ stroke:var(--l-borda-forte); stroke-width:1 }
.lg-eixo{ fill:var(--l-texto-3); font-size:11px; font-variant-numeric:tabular-nums }
.lg-valor{ fill:var(--l-texto); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums }
.lg-alvo{ fill:transparent; cursor:crosshair }

/* barras */
.lg-barra{ transition:opacity var(--l-rapido) }
.lg-foco .lg-barra:not(.on){ opacity:.35 }

/* linha */
.lg-traco{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.lg-area{ opacity:.10 }
.lg-ponto{ stroke:var(--l-sup); stroke-width:2 }
.lg-mira{ stroke:var(--l-borda-forte); stroke-width:1; stroke-dasharray:3 3; opacity:0 }
.lg-ponto-mira{ opacity:0 }
.lg-mirando .lg-mira, .lg-mirando .lg-ponto-mira{ opacity:1 }

/* legenda (duas séries ou mais) */
.lg-legenda{ display:flex; flex-wrap:wrap; gap:6px var(--l-e4); margin-bottom:var(--l-e3); font-size:var(--l-t-peq); color:var(--l-texto-2) }
.lg-legenda span{ display:inline-flex; align-items:center; gap:6px }
.lg-legenda i{ width:10px; height:3px; border-radius:2px }

/* dica */
.lg-dica{
  position:absolute; z-index:5; pointer-events:none; min-width:120px; padding:8px 10px;
  background:var(--l-texto); color:var(--l-sup); border-radius:var(--l-raio-2); box-shadow:var(--l-sombra-flutua);
  font-size:var(--l-t-peq); line-height:1.4; opacity:0; transform:translateY(4px); transition:opacity var(--l-rapido), transform var(--l-rapido);
}
body.theme-dark .lg-dica{ background:var(--l-sup-3); color:var(--l-texto); border:1px solid var(--l-borda) }
.lg-dica.on{ opacity:1; transform:none }
.lg-dica > b{ display:block; font-weight:600; margin-bottom:2px }
.lg-dica span{ display:flex; align-items:center; gap:6px; white-space:nowrap }
.lg-dica span b{ font-variant-numeric:tabular-nums }
.lg-dica i{ width:8px; height:8px; border-radius:2px }

/* anel: figura + lista com valor e percentual */
.lg-anel{ display:flex; align-items:center; gap:var(--l-e6); flex-wrap:wrap; justify-content:center; min-height:170px }
.lg-anel-fig{ position:relative; width:136px; height:136px; flex:none }
.lg-anel-fig svg{ width:100%; height:100% }
.lg-trilho{ stroke:var(--l-fio) }
.lg-fatia{ transition:opacity var(--l-rapido), stroke-width var(--l-rapido) }
.lg-anel.lg-foco .lg-fatia:not(.on){ opacity:.3 }
.lg-anel-centro{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none }
.lg-anel-centro b{ font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums }
.lg-anel-centro span{ margin-top:4px; font-size:11px; color:var(--l-texto-3) }
/* texto longo no centro (ex.: "R$ 61 mil") cabe dentro do anel */
.lg-anel-centro.is-longo b{ font-size:16px; letter-spacing:-.01em }
.lg-anel-lista{ flex:1; min-width:160px; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px }
.lg-anel-lista li{ display:grid; grid-template-columns:10px minmax(0,1fr) auto 40px; align-items:center; gap:10px; padding:5px 8px; border-radius:var(--l-raio-1); font-size:var(--l-t-peq); color:var(--l-texto-2); cursor:default }
.lg-anel-lista li.on{ background:var(--l-sup-3); color:var(--l-texto) }
.lg-anel-lista i{ width:10px; height:10px; border-radius:3px }
.lg-anel-lista span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lg-anel-lista b{ color:var(--l-texto); font-weight:600; font-variant-numeric:tabular-nums }
.lg-anel-lista em{ font-style:normal; text-align:right; color:var(--l-texto-3); font-variant-numeric:tabular-nums }

/* ranking */
.lg-rank{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--l-e3) }
.lg-rank li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px var(--l-e3); font-size:var(--l-t-peq) }
.lg-rank-rot{ color:var(--l-texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lg-rank b{ color:var(--l-texto); font-weight:600; font-variant-numeric:tabular-nums }
.lg-rank-trilho{ grid-column:1 / -1; height:6px; border-radius:3px; background:var(--l-fio); overflow:hidden }
.lg-rank-trilho i{ display:block; height:100%; border-radius:3px }

/* o gráfico se adapta ao bloco onde está, não à tela */
.l-grafico, .lg-host{ container-type:inline-size }
@container (max-width:460px){
  .lg-anel{ flex-direction:column; align-items:stretch; gap:var(--l-e4) }
  .lg-anel-fig{ align-self:center }
}

/* partes do todo */
.lg-partes{ display:flex; flex-direction:column; gap:var(--l-e2) }
.lg-partes h4{ font-size:var(--l-t-corpo); font-weight:600 }
.lg-partes-sub, .lg-partes-vazio{ font-size:var(--l-t-peq); color:var(--l-texto-3) }
.lg-partes-barra{ display:flex; gap:2px; height:10px; border-radius:5px; overflow:hidden; background:var(--l-fio) }
.lg-partes-barra span{ min-width:3px }
.lg-partes-leg{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px var(--l-e5); font-size:var(--l-t-peq); color:var(--l-texto-2) }
.lg-partes-leg li{ display:flex; align-items:center; gap:6px }
.lg-partes-leg i{ width:8px; height:8px; border-radius:2px }
.lg-partes-leg b{ color:var(--l-texto); font-weight:600; font-variant-numeric:tabular-nums }
.lg-partes-leg em{ font-style:normal; color:var(--l-texto-3) }