:root {
  --bg: #f6f4ee;
  --card: #ffffff;
  --texto: #25302a;
  --suave: #6b766f;
  --borda: #e3dfd2;
  --verde: #2f7d4f;
  --verde-claro: #dff1e5;
  --amarelo: #b7860b;
  --amarelo-claro: #fbf0cc;
  --vermelho: #b3392f;
  --vermelho-claro: #f8dcd8;
  --cinza-claro: #ebebe6;
  --acento: #2f7d4f;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--texto); line-height: 1.45; }
a { color: var(--acento); }
h1 { font-size: 1.6rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; }
h3 { font-size: 1.02rem; margin: 0; }
.pagina { max-width: 880px; margin: 0 auto; padding: 1rem 16px 3rem; }
.suave { color: var(--suave); }

.barra { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 16px; background: var(--card); border-bottom: 1px solid var(--borda); }
.barra .marca { font-weight: 700; text-decoration: none; color: var(--acento); }
.barra nav { display: flex; gap: 1rem; flex: 1; }
.barra nav a { text-decoration: none; color: var(--texto); }
.sair { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--suave); }

.cartao { background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: 1rem; margin: 0 0 0.9rem; }
.cartao.destaque { background: var(--amarelo-claro); border-color: #ecd98e; }
.cartao.login { max-width: 380px; margin: 12vh auto 0; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; margin-bottom: 0.6rem; }
.numero { text-align: center; margin: 0; }
.numero span { display: block; font-size: 1.7rem; font-weight: 700; color: var(--acento); }
.numero small { color: var(--suave); }
.linha { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.7rem 0; border-top: 1px solid var(--borda); }
.item:first-of-type { border-top: 0; }
.acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }

form label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.7rem; }
input, textarea, select { display: block; width: 100%; margin-top: 0.25rem; padding: 0.6rem 0.7rem; font: inherit; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
input:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
button { font: inherit; font-weight: 600; padding: 0.6rem 1rem; border: 0; border-radius: 8px; background: var(--acento); color: #fff; cursor: pointer; }
button.secundario { background: var(--cinza-claro); color: var(--texto); }
button.link { background: none; color: var(--acento); padding: 0; text-decoration: underline; }
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 0.9rem; align-items: end; }
.form-grade .larga { grid-column: 1 / -1; }
.em-linha { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.em-linha input { flex: 1; min-width: 150px; margin: 0; }

.aviso { padding: 0.7rem 0.9rem; border-radius: 8px; }
.aviso.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.aviso.ok { background: var(--verde-claro); color: var(--verde); }

.selo { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--cinza-claro); color: var(--suave); }
.selo.verde, .selo.status-concluida { background: var(--verde-claro); color: var(--verde); }
.selo.amarelo, .selo.status-em_revisao { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.status-em_andamento { background: #dbe9f7; color: #245a8d; }

.financas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.7rem; }
.financas small { display: block; color: var(--suave); }
.saude { height: 10px; background: var(--cinza-claro); border-radius: 999px; overflow: hidden; margin-bottom: 0.4rem; }
.saude-barra { height: 100%; border-radius: 999px; background: var(--verde); }
.saude-barra.amarelo { background: var(--amarelo); }
.saude-barra.vermelho { background: var(--vermelho); }

.progresso { margin-top: 0.7rem; }
.progresso-trilha { position: relative; height: 16px; background: var(--cinza-claro); border-radius: 999px; overflow: hidden; }
.progresso-barra { height: 100%; background: linear-gradient(90deg, #4fa56f, var(--verde)); border-radius: 999px; transition: width 0.5s ease; }
.marco { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.85); }
.progresso-texto { margin-top: 0.3rem; font-size: 0.9rem; color: var(--suave); }
.progresso-texto strong { color: var(--texto); }

.etapas { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.etapas li { padding: 0.4rem 0; border-top: 1px solid var(--borda); }
.etapas li.feita { color: var(--suave); text-decoration: line-through; }

@media (max-width: 520px) {
  .financas { grid-template-columns: 1fr; }
  .barra nav { order: 3; flex-basis: 100%; }
}