/* ============================================================
   Tela 1 — Visão Geral (estilos específicos)
   ============================================================ */

.vg-lower {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.ratio-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px; }
.ratio-card { padding:16px 18px; border:1px solid var(--cinza-borda); border-radius:var(--raio-sm); background:#fff; }
.ratio-card > div:first-child { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.ratio-card span { color:var(--cinza-texto); font-size:.75rem; }
.ratio-card strong { color:var(--azul-marinho); font-size:1.05rem; white-space:nowrap; }
.ratio-track { height:6px; margin-top:12px; overflow:hidden; border-radius:999px; background:#edf0f7; }
.ratio-track span { display:block; height:100%; border-radius:inherit; background:var(--azul-info); }
.ratio-track.church span { background:var(--dourado); }
.ratio-track.expense span { background:var(--vermelho); }
.ratio-track.margin span { background:var(--verde); }
.method-note { display:flex; gap:9px; align-items:flex-start; margin-top:18px; padding:13px 15px; border-radius:9px; background:#f5f3ed; color:var(--cinza-texto); font-size:.74rem; }
.method-note i { margin-top:2px; color:var(--dourado); }

/* Gráfico de barras (Resumo Financeiro do Mês) */
.vg-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 18px;
  height: 240px;
  padding: 10px 6px 0;
  border-left: 2px solid var(--cinza-borda);
  border-bottom: 2px solid var(--cinza-borda);
  position: relative;
}
.vg-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; height: 100%; justify-content: flex-end; }
.vg-bar {
  width: 58%;
  max-width: 74px;
  border-radius: 8px 8px 0 0;
  transition: height 1s cubic-bezier(.2,.8,.2,1);
  height: 0;
  position: relative;
}
.vg-bar.verde { background: linear-gradient(180deg, #37b56b, var(--verde)); }
.vg-bar.vermelho { background: linear-gradient(180deg, #e56767, var(--vermelho)); }
.vg-bar.azul { background: linear-gradient(180deg, #4a86e0, var(--azul-info)); }
.vg-bar .bar-val {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; font-weight: 700; white-space: nowrap; color: var(--texto);
}
.vg-bar-label { font-size: 0.75rem; color: var(--cinza-texto); text-align: center; }

/* Resumo Executivo */
.vg-exec-list { display: flex; flex-direction: column; gap: 12px; }
.vg-exec-item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.86rem; color: var(--cinza-texto);
}
.vg-exec-item i { color: var(--dourado); margin-top: 3px; }
.vg-exec-item strong { color: var(--texto); }

@media (max-width: 720px) {
  .vg-lower { grid-template-columns: 1fr; }
  .ratio-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 460px) { .ratio-grid { grid-template-columns:1fr; } }