/* =====================================================================
   Finanças simples: o "caderninho do mês".
   Reaproveita do financas.css: .lanc, .lista-lanc, .valor--positivo/negativo
   e do analises.css: .navegar-mes, .ranking.
   ===================================================================== */

/* ---- Resumo do mês ---- */
.caderno__resumo { display: flex; flex-direction: column; gap: 12px; }
.caderno__sobra { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.caderno__sobra-rotulo { font-size: 0.9rem; color: var(--texto-suave); }
.caderno__sobra-valor { font-size: 2.1rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.caderno__ate-hoje { font-size: 0.85rem; }

.caderno__linha {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "rotulo valor" "avir avir";
  align-items: baseline; gap: 0 12px;
}
.caderno__rotulo { grid-area: rotulo; }
.caderno__valor { grid-area: valor; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.caderno__avir { grid-area: avir; font-size: 0.8rem; color: #fbbf24; }

/* Etiquetas: Cartão R$ X · Pix R$ Y */
.chips-forma { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-forma {
  font-size: 0.8rem; padding: 3px 10px; border-radius: 999px;
  background: var(--superficie-2); color: var(--texto-suave); font-variant-numeric: tabular-nums;
}

/* ---- Botões grandes: − Gasto  + Ganho ---- */
.caderno__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botao--gasto, .botao--ganho {
  min-height: 56px; font-size: 1.1rem; font-weight: 800; border: 0; color: #fff; border-radius: var(--raio);
}
.botao--gasto { background: #c2410c; }
.botao--gasto:hover { background: #ea580c; }
.botao--ganho { background: #15803d; }
.botao--ganho:hover { background: #16a34a; }

.botao--pequeno { min-height: 36px; padding: 0 12px; font-size: 0.9rem; }
.link-botao { background: none; border: 0; padding: 2px; color: var(--azul); font: inherit; font-size: 0.85rem; cursor: pointer; }

/* Barras de categoria na cor de gasto (laranja validado para daltonismo) */
.ranking__barra--gasto { background: #e8590c; }

/* ---- Lista ---- */
/* Títulos dos dias: a primeira letra já vem maiúscula do JS ("Seg., 2 de nov.") */
.caderno .dia__titulo { text-transform: none; }
.dia__titulo--futuro { color: #fbbf24; }
.lanc--futuro { border-style: dashed; }
.lanc--futuro .lanc__valor { opacity: 0.75; }
.lanc--pausada { opacity: 0.55; }

.fiado-linha {
  width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  background: none; border: 0; border-bottom: 1px solid var(--borda); color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.fiado-linha:hover { color: var(--azul); }
li:last-child > .fiado-linha { border-bottom: 0; }

/* ---- Formulário ---- */
.valor-grande-campo { font-size: 1.8rem !important; text-align: center; min-height: 60px; }
.form-gasto .valor-grande-campo { color: #fb923c; }
.form-ganho .valor-grande-campo { color: var(--ok); }

/* Categorias para tocar */
.chips-escolha { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-escolha {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie-2);
  color: var(--texto); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.chip-escolha:hover { border-color: var(--azul); }
.chip-escolha[aria-checked="true"] { background: var(--azul-forte); border-color: var(--azul-forte); color: #fff; }
.chip-escolha--arquivada { opacity: 0.45; text-decoration: line-through; }
.chip-escolha--nova { border-style: dashed; color: var(--azul); }

/* Escolha única em linha: Cartão | Pix | Dinheiro */
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--raio-pequeno); background: var(--superficie-2); }
.segmentado__opcao {
  min-height: 42px; border: 0; border-radius: 8px; background: transparent;
  color: var(--texto-suave); font: inherit; font-weight: 600; cursor: pointer;
  white-space: nowrap; font-size: 0.92rem; padding: 0 6px;
}
.segmentado__opcao[aria-checked="true"] { background: var(--superficie); color: var(--texto); box-shadow: 0 0 0 1px var(--azul) inset; }