/* =============================================================================
   components.css — os pedaços reutilizáveis.
   ============================================================================= */

/* --- tipografia de seção ------------------------------------------------------ */

.secao { margin: 26px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.secao h2 { font-size: 13px; font-weight: 680; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }

/* O alvo de toque tem 44px de altura; o texto continua com 13,5px.
   Medido em 375px: sem o padding, este link ficava com 20px de altura — metade
   do mínimo confortável para o polegar, e é justamente o atalho mais usado da
   dashboard. A margem negativa devolve o espaço para o layout não abrir buraco. */
.secao .secao-acao {
  margin-left: auto;
  margin-block: -12px;
  padding: 12px 4px;
  font-size: 13.5px;
  font-weight: 580;
  color: var(--marca);
  background: 0;
  border: 0;
}

.legenda { font-size: 13px; color: var(--tinta-2); line-height: 1.45; }
.tenue   { color: var(--tenue); }
.num     { font-family: var(--numeros); font-variant-numeric: tabular-nums; }

/* --- cartão ------------------------------------------------------------------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
}
.cartao + .cartao { margin-top: 12px; }

/* --- o número herói ----------------------------------------------------------- */

.heroi {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 20px 18px 18px;
}
.heroi-rotulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 580; color: var(--tinta-2);
}
.heroi-valor {
  margin-top: 4px;
  font-family: var(--numeros);
  font-variant-numeric: tabular-nums;
  font-size: 38px;
  font-weight: 760;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.heroi-valor.positivo { color: var(--ok); }
.heroi-valor.negativo { color: var(--crit); }
.heroi-nota { margin-top: 8px; font-size: 13.5px; color: var(--tinta-2); line-height: 1.45; }

.heroi-linha { display: flex; gap: 10px; margin-top: 16px; }
.heroi-linha > * { flex: 1; }

.mini {
  padding: 10px 12px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  border: 1px solid var(--linha);
}
.mini-rotulo { font-size: 11.5px; font-weight: 580; color: var(--tenue); }
.mini-valor  { font-family: var(--numeros); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 1px; }

/* --- barra do orçamento (necessidade / desejo / futuro) ------------------------ */

.barra-grupos {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--linha);
}
.barra-grupos > span { display: block; height: 100%; }
.faixa-necessidade { background: var(--g-necessidade); }
.faixa-desejo      { background: var(--g-desejo); }
.faixa-futuro      { background: var(--g-futuro); }

.grupos-legenda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.grupo-item { display: grid; gap: 1px; }
.grupo-topo { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 580; color: var(--tinta-2); }
.grupo-ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.grupo-valor { font-family: var(--numeros); font-variant-numeric: tabular-nums; font-size: 15.5px; font-weight: 700; }
.grupo-alvo  { font-size: 11.5px; color: var(--tenue); }
.grupo-alvo.acima { color: var(--warn); font-weight: 600; }

/* --- barra simples de progresso ------------------------------------------------ */

.trilho {
  height: 8px;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
}
.trilho > span { display: block; height: 100%; border-radius: 999px; background: var(--marca); transition: width .35s ease; }
.trilho.ok   > span { background: var(--ok); }
.trilho.warn > span { background: var(--warn); }
.trilho.crit > span { background: var(--crit); }

/* --- carta do coach ------------------------------------------------------------
   A hierarquia visual É a mensagem: o FATO vem grande, a explicação em corpo
   normal, a pergunta destacada no fim. Se a pergunta virar rodapé cinza, o
   produto vira app de despesas com texto de enfeite. */

.coach {
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: var(--superficie);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.coach + .coach { margin-top: 12px; }

.coach-topo {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  font-size: 11.5px; font-weight: 680;
  letter-spacing: .05em; text-transform: uppercase;
}
.coach-corpo { padding: 2px 16px 16px; }

.coach-fato {
  font-size: 17.5px;
  font-weight: 680;
  letter-spacing: -.015em;
  line-height: 1.32;
}
.coach-porque { margin-top: 8px; font-size: 14px; color: var(--tinta-2); line-height: 1.5; }

.coach-passo {
  display: flex; gap: 9px;
  margin-top: 13px;
  padding: 11px 12px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.42;
}
.coach-passo .ico { color: var(--marca); margin-top: 2px; }

.coach-pergunta {
  margin-top: 13px;
  padding-left: 13px;
  border-left: 3px solid var(--marca);
  font-size: 14.5px;
  font-style: italic;
  color: var(--tinta);
  line-height: 1.5;
}

.coach-acoes { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.coach.tom-crit  .coach-topo { background: var(--crit-fundo); color: var(--crit); }
.coach.tom-warn  .coach-topo { background: var(--warn-fundo); color: var(--warn); }
.coach.tom-ok    .coach-topo { background: var(--ok-fundo);   color: var(--ok); }
.coach.tom-marca .coach-topo { background: var(--marca-fraca); color: var(--marca-forte); }

/* --- lista de lançamentos ------------------------------------------------------ */

.lista { border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); background: var(--superficie); }
.lista-dia { padding: 9px 14px; background: var(--superficie-2); font-size: 12px; font-weight: 620; color: var(--tinta-2); border-bottom: 1px solid var(--linha); }

.item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--superficie);
  border: 0;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}
.item:last-child { border-bottom: 0; }
.item:active { background: var(--superficie-2); }

.item-ico {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  background: var(--marca-fraca);
  color: var(--marca-forte);
}
.item-ico.g-necessidade { background: var(--g-necessidade-fraca); color: var(--g-necessidade); }
.item-ico.g-desejo      { background: var(--g-desejo-fraca);      color: var(--g-desejo); }
.item-ico.g-futuro      { background: var(--g-futuro-fraca);      color: var(--g-futuro); }
.item-ico.g-receita     { background: var(--marca-fraca);         color: var(--g-receita); }

.item-meio  { flex: 1; min-width: 0; }
.item-titulo { font-size: 15px; font-weight: 580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub    { font-size: 12.5px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.item-valor {
  font-family: var(--numeros); font-variant-numeric: tabular-nums;
  font-size: 15.5px; font-weight: 660; letter-spacing: -.01em;
  white-space: nowrap;
}
/* Receita ganha cor; despesa fica na tinta normal. Ver comentário no base.css. */
.item-valor.entrada { color: var(--ok); }

/* --- botões -------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  font-size: 15px;
  font-weight: 620;
  transition: transform .1s ease, background .15s ease;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn-primario { background: var(--marca); color: var(--marca-tinta); }
.btn-fantasma { background: transparent; color: var(--tinta-2); border-color: var(--linha-forte); }
.btn-suave    { background: var(--marca-fraca); color: var(--marca-forte); }
.btn-crit     { background: var(--crit); color: #fff; }
.btn-bloco    { width: 100%; }
.btn-p        { min-height: 36px; padding: 0 13px; font-size: 13.5px; border-radius: 9px; }

/* --- pastilhas / seletor de trilha --------------------------------------------- */

.pastilhas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pastilhas::-webkit-scrollbar { display: none; }

.pastilha {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  color: var(--tinta-2);
  font-size: 13.5px;
  font-weight: 580;
  white-space: nowrap;
}
.pastilha[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-tinta); }

/* --- teclado de valor ----------------------------------------------------------
   Teclado próprio, não o nativo: ver ARQUITETURA.md §5. */

.valor-mostra {
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  padding: 22px 0 6px;
  font-family: var(--numeros); font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.valor-moeda { font-size: 22px; font-weight: 620; color: var(--tenue); }
.valor-digitos { font-size: 46px; font-weight: 760; }
.valor-digitos.zerado { color: var(--tenue); }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.tecla {
  height: 58px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--superficie);
  font-family: var(--numeros);
  font-size: 23px;
  font-weight: 620;
}
.tecla:active { background: var(--marca-fraca); }
.tecla-acao { color: var(--tinta-2); display: grid; place-items: center; }

/* --- grade de categorias -------------------------------------------------------- */

.grade-cat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 480px) { .grade-cat { grid-template-columns: repeat(5, 1fr); } }

.cat-btn {
  display: grid; justify-items: center; gap: 5px;
  padding: 11px 4px 9px;
  border: 1px solid var(--linha);
  border-radius: 13px;
  background: var(--superficie);
  font-size: 11px;
  font-weight: 560;
  color: var(--tinta-2);
  line-height: 1.2;
  text-align: center;
}
.cat-btn[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-fraca); color: var(--marca-forte); }
.cat-btn .ico { color: var(--tinta-2); }
.cat-btn[aria-pressed="true"] .ico { color: var(--marca-forte); }

/* --- atalhos aprendidos ---------------------------------------------------------- */

.atalhos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.atalhos::-webkit-scrollbar { display: none; }
.atalho {
  flex: none;
  display: grid; gap: 1px;
  padding: 9px 13px;
  border-radius: 12px;
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  text-align: left;
}
.atalho-nome  { font-size: 13px; font-weight: 580; }
.atalho-valor { font-family: var(--numeros); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--tenue); }

/* --- campos ---------------------------------------------------------------------- */

.campo { display: grid; gap: 6px; margin-top: 14px; }
.campo > label { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  background: var(--superficie);
  outline: 0;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-fraca);
}
.campo-dica { font-size: 12px; color: var(--tenue); }
.campo-erro { font-size: 12.5px; color: var(--crit); font-weight: 560; }

/* --- avisos ----------------------------------------------------------------------- */

.aviso {
  display: grid; gap: 7px;
  padding: 14px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: var(--superficie-2);
  font-size: 14px;
  line-height: 1.5;
}
.aviso-tag { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 680; letter-spacing: .04em; text-transform: uppercase; }
.aviso-ok   { background: var(--ok-fundo);   border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.aviso-ok   .aviso-tag { color: var(--ok); }
.aviso-warn { background: var(--warn-fundo); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.aviso-warn .aviso-tag { color: var(--warn); }
.aviso-crit { background: var(--crit-fundo); border-color: color-mix(in srgb, var(--crit) 25%, transparent); }
.aviso-crit .aviso-tag { color: var(--crit); }

/* --- vazio ------------------------------------------------------------------------ */

.vazio { display: grid; justify-items: center; gap: 10px; padding: 42px 20px; text-align: center; }
.vazio .ico { color: var(--tenue); }
.vazio h3 { font-size: 16.5px; font-weight: 660; }
.vazio p  { font-size: 14px; color: var(--tinta-2); max-width: 34ch; line-height: 1.5; }

/* --- toast ------------------------------------------------------------------------ */

#toast {
  position: fixed;
  left: 50%; bottom: calc(var(--nav-altura) + var(--seguro-baixo) + 84px);
  z-index: 90;
  transform: translate(-50%, 12px);
  max-width: min(88vw, 400px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--fundo);
  font-size: 14px;
  font-weight: 560;
  text-align: center;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
#toast.toast-visivel { opacity: 1; transform: translate(-50%, 0); }

/* --- folha (modal de baixo para cima) --------------------------------------------- */

#folha { position: fixed; inset: 0; z-index: 100; }
.folha-fundo { position: absolute; inset: 0; background: rgba(4, 12, 11, .48); opacity: 0; transition: opacity .22s ease; }
.folha-aberta .folha-fundo { opacity: 1; }

.folha-painel {
  position: absolute;
  left: 50%; bottom: 0;
  width: min(100%, 480px);
  transform: translate(-50%, 100%);
  padding: 22px 20px calc(22px + var(--seguro-baixo));
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  background: var(--superficie);
  box-shadow: var(--sombra-alta);
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
  max-height: 86dvh;
  overflow-y: auto;
}
.folha-aberta .folha-painel { transform: translate(-50%, 0); }
.folha-painel h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.folha-painel p  { margin-top: 7px; font-size: 14.5px; color: var(--tinta-2); line-height: 1.5; }
.folha-acoes { display: flex; gap: 10px; margin-top: 20px; }
.folha-acoes .btn { flex: 1; }

@media (min-width: 900px) {
  .folha-painel {
    bottom: auto; top: 50%;
    transform: translate(-50%, -46%);
    border-radius: var(--raio-g);
    opacity: 0;
  }
  .folha-aberta .folha-painel { transform: translate(-50%, -50%); opacity: 1; }
}

/* --- diagnóstico / perguntas ------------------------------------------------------ */

.opcao {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%;
  padding: 14px;
  margin-top: 9px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  text-align: left;
}
.opcao[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-fraca); }
.opcao-marca {
  width: 21px; height: 21px; flex: none; margin-top: 1px;
  border: 2px solid var(--linha-forte);
  border-radius: 50%;
}
.opcao[aria-pressed="true"] .opcao-marca { border-color: var(--marca); background: var(--marca); box-shadow: inset 0 0 0 3.5px var(--superficie); }
.opcao-titulo { font-size: 15px; font-weight: 620; }
.opcao-texto  { font-size: 13px; color: var(--tinta-2); margin-top: 2px; line-height: 1.45; }

/* --- passos (dívida, metas) -------------------------------------------------------- */

.passo { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--linha); }
.passo:last-child { border-bottom: 0; }
.passo-ordem {
  display: grid; place-items: center;
  width: 27px; height: 27px; flex: none;
  border-radius: 50%;
  background: var(--marca-fraca);
  color: var(--marca-forte);
  font-family: var(--numeros);
  font-size: 13px; font-weight: 700;
}
.passo-ordem.alvo { background: var(--marca); color: var(--marca-tinta); }
.passo-corpo { flex: 1; min-width: 0; }
.passo-titulo { font-size: 15px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.passo-titulo .num { margin-left: auto; font-weight: 680; }
.passo-sub { font-size: 12.5px; color: var(--tenue); margin-top: 2px; }

/* --- tabela de comparação (bola de neve x avalanche) -------------------------------- */

.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.comparar-col { padding: 13px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--superficie-2); }
.comparar-col.vence { border-color: var(--marca); background: var(--marca-fraca); }
.comparar-nome { font-size: 12.5px; font-weight: 640; color: var(--tinta-2); }
.comparar-valor { font-family: var(--numeros); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 740; letter-spacing: -.02em; margin-top: 3px; }
.comparar-sub { font-size: 11.5px; color: var(--tenue); margin-top: 2px; }

/* --- potes ------------------------------------------------------------------------- */

.potes { display: grid; gap: 10px; }
.pote { padding: 13px 14px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.pote-topo { display: flex; align-items: baseline; gap: 8px; }
.pote-nome { font-size: 14.5px; font-weight: 620; }
.pote-saldo { margin-left: auto; font-family: var(--numeros); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; }
.pote-saldo.estourou { color: var(--crit); }
.pote .trilho { margin-top: 9px; }
.pote-sub { font-size: 12px; color: var(--tenue); margin-top: 6px; }

/* --- crenças ------------------------------------------------------------------------ */

.crenca {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--linha);
  border-bottom: 0;
  background: var(--superficie);
  text-align: left;
  font-size: 14.5px;
  line-height: 1.4;
}
.crenca:first-child { border-radius: var(--raio) var(--raio) 0 0; }
.crenca:last-child  { border-bottom: 1px solid var(--linha); border-radius: 0 0 var(--raio) var(--raio); }
.crenca[aria-pressed="true"] { background: var(--marca-fraca); color: var(--marca-forte); font-weight: 560; }
.crenca-caixa {
  width: 21px; height: 21px; flex: none;
  border: 2px solid var(--linha-forte);
  border-radius: 7px;
}
.crenca[aria-pressed="true"] .crenca-caixa { border-color: var(--marca); background: var(--marca); }

/* --- sinais em grade ----------------------------------------------------------------- */

.sinais { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sinal { padding: 13px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--superficie); }
.sinal-rotulo { font-size: 11.5px; font-weight: 600; color: var(--tenue); }
.sinal-valor { font-family: var(--numeros); font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 740; letter-spacing: -.025em; margin-top: 2px; }
.sinal-valor.ok { color: var(--ok); } .sinal-valor.warn { color: var(--warn); } .sinal-valor.crit { color: var(--crit); }
.sinal-sub { font-size: 11.5px; color: var(--tenue); margin-top: 2px; line-height: 1.35; }

/* --- detalhe recolhível ---------------------------------------------------------------- */

details.recolhe { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); overflow: hidden; }
details.recolhe > summary {
  padding: 13px 15px;
  font-size: 14px; font-weight: 580; color: var(--tinta-2);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
details.recolhe > summary::-webkit-details-marker { display: none; }
details.recolhe > summary::after { content: "＋"; margin-left: auto; color: var(--tenue); }
details.recolhe[open] > summary::after { content: "－"; }
details.recolhe > .recolhe-corpo { padding: 0 15px 15px; }