/* =====================================================================
   Dashboard ("Início") e gráficos
   Fonte: /mockup/css/style.css (seção 15). Views: app/views/dashboard
   ===================================================================== */
.saudacao h2 { font-size: var(--tamanho-3xl); font-weight: var(--peso-bold); }
.grafico-area { position: relative; height: 260px; }
.grafico-area.baixo { height: 220px; }
.grafico-area canvas { max-width: 100%; }
/* rosca: legenda ao lado quando o card é largo, abaixo quando é estreito */
.card:has(> .rosca-layout) { container-type: inline-size; }
.rosca-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); align-items: center; }
.rosca-layout .grafico-area { height: 190px; max-width: 220px; width: 100%; margin: 0 auto; }
@container (min-width: 600px) {
  .rosca-layout { grid-template-columns: 200px minmax(0, 1fr); gap: var(--espaco-6); }
  .rosca-layout .grafico-area { height: 200px; margin: 0; }
}
.legenda-lista > li { display: flex; align-items: center; gap: var(--espaco-2-5); padding: var(--espaco-1-5) 0; font-size: var(--tamanho-md); }
.legenda-lista > li + li { border-top: 1px solid var(--borda); }
.legenda-lista .valor { font-variant-numeric: tabular-nums; font-weight: var(--peso-semibold); white-space: nowrap; }
.legenda-lista .pct { color: var(--texto-3); font-size: 12.5px; width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

.insights > li { display: flex; gap: var(--espaco-3); align-items: flex-start; padding: var(--espaco-2-5) 0; font-size: 14.5px; }
.insights > li + li { border-top: 1px solid var(--borda); }
.insight-icone { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: var(--tamanho-lg); background: var(--superficie-3); }
.insight-icone.bom { background: var(--receita-suave); }
.insight-icone.ruim { background: var(--despesa-suave); }
.insight-icone.alerta { background: var(--alerta-suave); }

.resp-lista > li + li { margin-top: var(--espaco-3-5); }
.resp-linha { display: flex; align-items: center; gap: var(--espaco-2-5); margin-bottom: var(--espaco-1-5); font-size: var(--tamanho-md); }
/* No mockup estes três vinham como style="" nos elementos */
.resp-titulo { margin-bottom: var(--espaco-2-5); }
.resp-pct { width: 40px; text-align: right; }
.card-sem-padding > .card-cabecalho { padding: var(--espaco-5) var(--espaco-5) 0; }
.card-sem-padding > .card-vazio { padding: 0 var(--espaco-5) var(--espaco-5); }