/* =====================================================================
   Fase 4: Análises (📊)
   Números com comparação, rankings em barras e os gráficos de colunas.
   Cores de ganhos/gastos vêm do JS (par validado para daltonismo).
   ===================================================================== */

/* Navegar entre meses: ‹ novembro de 2026 › */
.navegar-mes { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.navegar-mes__texto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.navegar-mes__texto strong { font-size: 1.1rem; }
.navegar-mes__texto .texto-suave { font-size: 0.8rem; }
.navegar-mes .botao-icone { font-size: 1.4rem; min-width: 44px; min-height: 44px; }
.navegar-mes .botao-icone:disabled { opacity: 0.3; cursor: default; }

/* Grade de números: 2 por linha no celular, até 4 no computador */
.grade-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .grade-numeros { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.numero-analise { gap: 4px; padding: 12px 14px; }
.numero-analise .numero__valor { font-size: 1.35rem; overflow-wrap: anywhere; }
.numero-analise .numero__rotulo { font-size: 0.8rem; }
.numero__detalhe { font-size: 0.78rem; }

/* ▲ 12% vs out: seta + texto (a cor reforça, não é a única pista) */
.comparacao { font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.comparacao .texto-suave { font-weight: 400; }
.comparacao--boa { color: var(--ok); }
.comparacao--ruim { color: #fb923c; }
.comparacao--neutra { color: var(--texto-suave); }

/* Ranking em barras horizontais */
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ranking__linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome valor" "trilho trilho";
  gap: 4px 12px; align-items: baseline;
}
.ranking__nome { grid-area: nome; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ranking__valor { grid-area: valor; font-size: 0.85rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; text-align: right; }
.ranking__trilho { grid-area: trilho; height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.ranking__barra { display: block; height: 100%; border-radius: 4px; }
.chip-area { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Colunas (uma série): destaque na semana atual / melhor dia */
.colunas .grafico__barra { background: #1d4ed8; }
.colunas .grafico__barra--destaque { background: var(--azul); }

/* Ganhos x gastos: 12 grupos de 2 barras */
.agrupado {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px;
  height: 170px; align-items: end; margin-top: 8px;
}
.agrupado__grupo { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.agrupado__barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.agrupado__barra { width: 42%; max-width: 14px; border-radius: 4px 4px 0 0; min-height: 0; }
.agrupado__rotulo { font-size: 0.68rem; color: var(--texto-suave); }
.agrupado__grupo--atual .agrupado__barra { opacity: 0.55; }   /* mês em andamento */
.agrupado__grupo--atual .agrupado__rotulo { color: var(--texto); font-weight: 700; }

.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; color: var(--texto-suave); }
.legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.legenda__marca { width: 12px; height: 12px; border-radius: 3px; }

/* Tabela (alternativa acessível ao gráfico) */
.tabela-dados summary { cursor: pointer; color: var(--texto-suave); font-size: 0.9rem; padding: 4px 0; }
.tabela-dados table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; margin-top: 8px; }
.tabela-dados th, .tabela-dados td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--borda); }
.tabela-dados th:first-child, .tabela-dados thead th:first-child { text-align: left; }
.tabela-dados thead th { color: var(--texto-suave); font-weight: 600; }

/* O que mais mudou */
.mudanca { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.mudanca:last-child { border-bottom: 0; }
.mudanca .texto-suave { grid-column: 2; font-size: 0.8rem; }