/* =====================================================================
   Fase 2, Etapa 8: Finanças.
   Arquivo próprio da etapa (não altera base.css nem componentes.css).
   ===================================================================== */
.fin-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Cores de valores */
.valor--positivo { color: var(--ok); }
.valor--negativo { color: var(--erro); }
.valor-grande { font-size: 2rem; font-weight: 700; line-height: 1.1; }

/* Seletor de mês */
.seletor-mes { display: flex; align-items: center; justify-content: center; gap: 12px; }
.seletor-mes__nome { min-width: 11ch; text-align: center; font-weight: 600; }
.seletor-mes .semana__seta { width: 40px; height: 40px; }

/* Saldo por conta */
.lista-contas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-contas li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Barras de gastos por categoria */
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.barras__linha { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nome valor" "trilho trilho"; gap: 4px 8px; }
.barras__nome { grid-area: nome; font-size: 0.9rem; }
.barras__valor { grid-area: valor; font-size: 0.85rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.barras__trilho { grid-area: trilho; height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.barras__preenchido { display: block; height: 100%; border-radius: 4px; }

/* Faturas */
.lista-faturas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fatura {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-pequeno);
}
.fatura--vencida { border-color: rgba(248, 113, 113, 0.6); }
.fatura__valor { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-variant-numeric: tabular-nums; }
.selo-fatura { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--superficie-2); }
.selo-fatura--aberta  { color: var(--azul); }
.selo-fatura--fechada { color: #fbbf24; }
.selo-fatura--vencida { color: var(--erro); background: var(--erro-fundo); }
.selo-fatura--parcial { color: #fbbf24; }
.selo-fatura--paga    { color: var(--ok); background: var(--ok-fundo); }

/* Lista de lançamentos */
.dia-fin { display: flex; flex-direction: column; gap: 6px; }
.lista-lanc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lanc {
  width: 100%; display: flex; align-items: center; gap: 12px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-pequeno);
}
.lanc:hover { border-color: var(--azul); }
.lanc__icone { font-size: 1.3rem; width: 1.6em; text-align: center; flex: none; }
.lanc__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lanc__corpo .item__meta { font-size: 0.8rem; }
.lanc__valor { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cadastros (contas, cartões) */
.lista-cadastro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cadastro {
  width: 100%; display: flex; align-items: center; gap: 12px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  padding: 10px 12px; background: none; border: 1px solid var(--borda); border-radius: var(--raio-pequeno);
}
.cadastro__marca { display: inline-block; width: 10px; height: 28px; border-radius: 4px; flex: none; vertical-align: middle; }
.cartao-credito .cadastro__marca { height: 14px; width: 14px; border-radius: 4px; }
.cadastro__corpo { flex: 1; display: flex; flex-direction: column; }
.cartao-credito { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); }
.limite { display: block; height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.limite__usado { display: block; height: 100%; background: linear-gradient(90deg, var(--azul), #a78bfa); }

/* Categorias */
.chips-cat { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-cat {
  font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--texto);
  padding: 6px 12px; border-radius: 999px; background: var(--superficie-2);
  border: 1px solid var(--cor-area, var(--borda));
}
.chip-cat--arquivada { opacity: 0.45; text-decoration: line-through; }

/* Formulários */
.campo__valor { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.campo__icone { text-align: center; font-size: 1.3rem; }
.linha-campos--icone { grid-template-columns: 5em 1fr !important; }
.previa-fatura { color: var(--azul); font-weight: 600; }
.previa-fatura:empty { display: none; }
.cores { display: flex; flex-wrap: wrap; gap: 8px; }
.cor {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  background: var(--cor); border: 2px solid transparent;
}
.cor[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--cor); }
details summary { cursor: pointer; padding: 4px 0; }

/* =====================================================================
   Etapa 9: recorrentes
   ===================================================================== */
/* 4 abas em Finanças: texto menor para caber no celular */
.abas--quatro { grid-template-columns: repeat(4, 1fr); }
.abas--quatro .aba { font-size: 0.85rem; padding: 0 2px; }
.numeros--dois { grid-template-columns: 1fr 1fr !important; }
.numeros--dois .numero__valor { font-size: 1.3rem; }

/* Bloco "A confirmar" */
.pendencias { padding: 14px; border-radius: var(--raio); border: 1px solid rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.06); }
.pendencia { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "corpo valor" "acoes acoes"; gap: 10px; padding: 12px 14px; }
.pendencia__corpo { grid-area: corpo; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pendencia__valor { grid-area: valor; font-weight: 700; font-variant-numeric: tabular-nums; align-self: center; }
.pendencia__acoes { grid-area: acoes; display: flex; gap: 8px; }
.pendencia__acoes .botao { min-height: 38px; }

/* Selo de situação da recorrência no mês */
.selo-rec { font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--superficie-2); }
.selo-rec--lancada { color: var(--ok); background: var(--ok-fundo); }
.selo-rec--a_confirmar { color: #fbbf24; }
.selo-rec--prevista { color: var(--azul); }
.selo-rec--pulada, .selo-rec--pausada, .selo-rec--fora { color: var(--texto-suave); }
.fixas__titulo { text-transform: none; }

/* =====================================================================
   Etapa 10: orçamento, metas, fiado
   ===================================================================== */
.orc--ok { background: var(--ok); }
.orc--atencao { background: #fbbf24; }
.orc--estourado { background: var(--erro); }
.orc-texto--atencao { color: #fbbf24; }
.orc-texto--estourado { color: var(--erro); }
.barras__linha--botao {
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 6px 0;
}

.lista-metas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.meta { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--superficie); }
.meta--concluida { opacity: 0.6; }
.meta__corpo { display: flex; flex-direction: column; gap: 6px; font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.meta__pct { font-weight: 700; color: var(--azul); }
.meta__barra { background: linear-gradient(90deg, var(--ok), var(--azul)); }
.meta__texto { font-size: 0.85rem; }
.meta > .botao { align-self: flex-start; }

.fiado-resumo {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
}
.fiado-resumo > span:first-child { font-weight: 700; }
.barras__linha--orc { grid-template-areas: "nome valor" "trilho trilho" "detalhe detalhe"; }
.orc__detalhe { grid-area: detalhe; font-size: 0.8rem; color: var(--texto-suave); }