/*
 * Identidade visual da Constroy, a mesma dos guias de boas-vindas que o morador
 * já recebe. Não é enfeite: a pessoa vai entregar CPF, holerite e extrato
 * bancário a partir de um link do WhatsApp. Uma página que se parece com o resto
 * da comunicação da empresa é parte do que a faz não parecer golpe.
 *
 * Fontes servidas do próprio domínio (assets/fontes). Página que manipula CPF
 * não faz requisição para terceiro — nem para CDN de script, nem para fonte.
 */
@import url('fontes/fontes.css');

:root{
  --cream:  #F5EDE0;
  --navy:   #1C2F52;
  --bronze: #7A5830;
  --body:   #2A1C0C;
  --sand:   #C8AA85;
  --branco: #FFFDF9;
  --erro:   #9B2C2C;
  --ok:     #2F6B4F;
  --linha:  rgba(122, 88, 48, .22);
  --raio:   14px;
  --sombra: 0 2px 10px rgba(28, 47, 82, .07);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.envoltorio{ max-width: 620px; margin: 0 auto; padding: 0 18px 64px; }

header.topo{
  background: var(--navy);
  color: var(--cream);
  padding: 22px 18px 18px;
  margin-bottom: 22px;
}
header.topo .envoltorio{ padding-bottom: 0; }
header.topo .marca{ font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
header.topo h1{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1.72rem;
  line-height: 1.2;
  margin: 6px 0 4px;
}
header.topo p{ margin: 0; font-size: .92rem; color: rgba(245, 237, 224, .82); }

h2{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 4px;
  color: var(--navy);
}
h3{ font-size: 1rem; font-weight: 600; margin: 0 0 6px; color: var(--navy); }
p{ margin: 0 0 12px; }
a{ color: var(--bronze); }

/* ---------------------------------------------------------------- cartões */
.cartao{
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.cartao > :last-child{ margin-bottom: 0; }

.dica{
  border-left: 3px solid var(--sand);
  background: rgba(200, 170, 133, .13);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  font-size: .92rem;
  margin: 0 0 14px;
}
.dica-alerta{ border-left-color: #C08A2E; background: rgba(192, 138, 46, .12); }
.dica strong{ display: block; margin-bottom: 2px; }

/* ----------------------------------------------------------------- passos */
.passos{ display: flex; gap: 6px; margin-bottom: 18px; }
.passos span{
  flex: 1; height: 4px; border-radius: 3px;
  background: rgba(28, 47, 82, .15);
}
.passos span.feito{ background: var(--bronze); }
.passos span.atual{ background: var(--navy); }

/* ---------------------------------------------------------------- campos  */
label{ display: block; font-size: .86rem; font-weight: 500; color: var(--navy); margin: 0 0 4px; }
.campo{ margin-bottom: 14px; }
.campo .auxilio{ font-size: .8rem; color: rgba(42, 28, 12, .68); margin: 4px 0 0; }

input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], select{
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: 1rem;   /* 16px evita o zoom automático do iOS ao focar o campo */
  color: var(--body);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 10px;
}
input:focus, select:focus{ outline: 2px solid var(--navy); outline-offset: 1px; }
input.invalido, select.invalido{ border-color: var(--erro); background: rgba(155, 44, 44, .04); }

.erro-campo{ color: var(--erro); font-size: .82rem; margin: 4px 0 0; }

.opcoes label{
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 400; font-size: .95rem; color: var(--body);
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--linha); border-radius: 10px;
  background: var(--branco); cursor: pointer;
}
.opcoes input{ margin: 3px 0 0; flex-shrink: 0; }
.opcoes label:has(input:checked){ border-color: var(--navy); background: rgba(28, 47, 82, .05); }
.opcoes .dica-opcao{ display: block; font-size: .8rem; color: rgba(42, 28, 12, .65); }

/* ---------------------------------------------------------------- botões  */
button{
  font: inherit; font-weight: 500; cursor: pointer;
  border-radius: 10px; padding: 13px 18px; border: 1px solid transparent;
}
.btn-principal{ background: var(--navy); color: var(--cream); width: 100%; }
.btn-principal:disabled{ opacity: .5; cursor: progress; }
.btn-secundario{ background: transparent; color: var(--navy); border-color: var(--linha); }
.btn-linha{ display: flex; gap: 10px; margin-top: 18px; }
.btn-linha .btn-principal{ flex: 2; }
.btn-linha .btn-secundario{ flex: 1; }
.btn-texto{ background: none; border: none; color: var(--bronze); padding: 4px 0; text-decoration: underline; }

/* -------------------------------------------------------------- pessoas   */
.pessoa{ border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; background: var(--branco); }
.pessoa.conjuge{ border-left: 4px solid var(--sand); background: rgba(200, 170, 133, .07); }
.pessoa .cabecalho{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pessoa .cabecalho h3{ margin: 0; }
.pessoa .selo{ font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bronze); }

/* -------------------------------------------------------------- protocolo */
.protocolo{
  text-align: center; background: var(--navy); color: var(--cream);
  border-radius: var(--raio); padding: 22px 18px; margin-bottom: 18px;
}
.protocolo .codigo{
  font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
  font-size: 1.6rem; letter-spacing: .08em; margin: 8px 0;
  word-break: break-all;
}
.protocolo small{ color: rgba(245, 237, 224, .8); }

.lista-doc{ list-style: none; padding: 0; margin: 0; }
.lista-doc li{ border-bottom: 1px solid var(--linha); padding: 12px 0; }
.lista-doc li:last-child{ border-bottom: none; }
.lista-doc .rotulo{ font-weight: 500; }
.lista-doc .qtd{ font-size: .8rem; color: var(--bronze); }
.lista-doc details{ margin-top: 6px; }
.lista-doc summary{ font-size: .85rem; color: var(--bronze); cursor: pointer; }
.lista-doc details p{ font-size: .88rem; margin: 8px 0 0; }

.resultado{ border-radius: var(--raio); padding: 18px; margin-bottom: 16px; }
.resultado.aprovado{ background: rgba(47, 107, 79, .1); border: 1px solid rgba(47, 107, 79, .35); }
.resultado.em_analise{ background: rgba(28, 47, 82, .07); border: 1px solid var(--linha); }
.resultado.pendente_documento{ background: rgba(192, 138, 46, .12); border: 1px solid rgba(192, 138, 46, .4); }
.resultado.nao_aprovado, .resultado.documentos_apagados{ background: var(--branco); border: 1px solid var(--linha); }
.resultado h2{ margin-bottom: 8px; }

.aviso-erro{ background: rgba(155, 44, 44, .08); border: 1px solid rgba(155, 44, 44, .35); color: var(--erro); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: .92rem; }

footer{ text-align: center; font-size: .8rem; color: rgba(42, 28, 12, .6); padding: 24px 18px 40px; }
footer a{ color: rgba(42, 28, 12, .75); }

.oculto{ display: none !important; }

@media (min-width: 560px){
  header.topo h1{ font-size: 2rem; }
  .duas{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
}

/* Turnstile.
   Fora de um desafio o contêiner não ocupa espaço nenhum: no modo Managed a
   maioria das pessoas nunca vê widget algum, e um bloco vazio entre o formulário
   e o rodapé só confundiria.
   Quando a Cloudflare pede um clique, `.exigindo` transforma o contêiner num
   cartão explicado — sem a frase, a pessoa vê um checkbox solto aparecer do nada
   depois de clicar em "Enviar" e não liga uma coisa à outra. */
#turnstile-alvo:not(.exigindo){ height:0; overflow:hidden }
#turnstile-alvo.exigindo{
  margin:20px auto 28px; padding:18px; max-width:340px;
  background:var(--branco); border:1px solid var(--sand); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
#turnstile-alvo.exigindo::before{
  content:'Confirme que você não é um robô para concluir o envio.';
  font-size:.9rem; line-height:1.45; color:var(--body); text-align:center;
}

/* Um campo por mês na tela de envio (envio.js → itemMensal). */
.competencia{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin-top:8px;padding:8px 10px;border:1px solid rgba(122,88,48,.22);border-radius:10px}
.competencia .mes{flex:1 1 100%;font-weight:600;font-size:.92rem}
.competencia input[type=file]{flex:1 1 100%;max-width:100%}
.competencia.feito{background:rgba(47,107,79,.07);border-color:rgba(47,107,79,.35)}
.arquivo-unico{margin-top:10px}