/* Componentes de formulário: seção em cartão, subseções, grade de campos, listas suspensas e verificação. */
.secao-cartao { margin: 0 auto 1.1rem; padding: 1.15rem 1.4rem 1.3rem; background: var(--superficie); border: 1px solid var(--line); border-radius: var(--raio-painel); }
.secao-cartao-titulo { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; color: var(--azul-texto); font-family: var(--fonte-titulos); font-size: .81rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.formulario { width: min(1180px, 100%); margin-inline: auto; }
.subsecao { margin: 0 0 1.1rem; padding: 0; border: 0; }
.subsecao:last-child { margin-bottom: 0; }
.subsecao > legend { float: left; width: 100%; margin: 0 0 .55rem; padding: 0 0 .35rem; color: var(--titulo); font-family: var(--fonte-titulos); font-size: 1.02rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.subsecao > legend + * { clear: both; }
.grade-campos { display: grid; grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); gap: .6rem .9rem; }
.grade-campos[data-colunas="2"] { --colunas: 2; }
.grade-campos[data-colunas="3"] { --colunas: 3; }
.grade-campos[data-colunas="4"] { --colunas: 4; }
.grade-campos[data-colunas="5"] { --colunas: 5; }
.campo { display: grid; align-content: start; gap: .25rem; min-width: 0; }
.campo[data-span="2"] { grid-column: span 2; }
.campo[data-span="3"] { grid-column: span 3; }
.campo[data-span="4"] { grid-column: 1 / -1; }
.campo > label { color: var(--campo-nome); font-size: .78rem; font-weight: 700; }
.campo .obrigatorio { color: var(--erro); }
/* Três papéis de cor: nome do campo (rótulo), valor do campo e valor validado. Todos os controles usam o mesmo tamanho de fonte. */
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"], .campo input[type="date"], .campo input[type="number"], .campo select, .campo textarea {
  width: 100%; min-height: 38px; padding: .45rem .65rem; color: var(--campo-valor); background-color: var(--campo-fundo); border: 1px solid var(--campo-borda); border-radius: var(--raio-controle); font: 400 .92rem/1.35 var(--fonte-corpo); transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; }
.campo textarea { min-height: 76px; resize: vertical; }
.campo select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%2359677a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right .7rem center; cursor: pointer; }
.campo select option { color: var(--campo-valor); background-color: var(--campo-fundo); font: inherit; }
/* Placeholder neutro das listas suspensas: mais transparente que os valores. */
.campo select.sem-valor { color: var(--campo-placeholder); }
.campo select:disabled { background-color: var(--paper); cursor: not-allowed; }
/* Escolha exclusiva de seção (ex.: RG ou CIN): opções em linha e seção não escolhida esmaecida e indisponível. */
.opcoes-escolha { display: flex; flex-wrap: wrap; gap: .6rem; }
.opcao-escolha { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; color: var(--campo-nome); background: var(--campo-fundo); border: 1px solid var(--campo-borda); border-radius: var(--raio-controle); font-size: .88rem; font-weight: 700; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.opcao-escolha input { width: 16px; height: 16px; margin: 0; accent-color: var(--azul-texto); cursor: pointer; }
.opcao-escolha:has(input:checked) { background: var(--selecionada); border-color: var(--azul-texto); }
.opcao-escolha:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.subsecao:disabled .grade-campos { opacity: .45; }
.subsecao:disabled > legend { color: var(--muted); }
.subsecao:disabled input, .subsecao:disabled select, .subsecao:disabled textarea { background-color: var(--paper); cursor: not-allowed; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--cyan); outline-offset: 0; border-color: var(--cyan); }
/* Validação visual: valor validado em verde; valor inválido em vermelho; vazio permanece neutro. */
.campo[data-estado="valido"] input, .campo[data-estado="valido"] select:not(.sem-valor), .campo[data-estado="valido"] textarea {
  color: var(--campo-valido); font-weight: 700; background-color: var(--campo-valido-fundo); border-color: var(--campo-valido-borda); }
.campo[data-estado="valido"] select option { font-weight: 400; }
.campo[data-estado="invalido"] input, .campo[data-estado="invalido"] select, .campo[data-estado="invalido"] textarea {
  color: var(--erro); background-color: var(--erro-fundo); border-color: var(--erro); }
.campo[data-estado="invalido"] select.sem-valor { color: var(--campo-placeholder); }
.campo .erro-campo { color: var(--erro); font-size: .76rem; }
.campo .ajuda { color: var(--muted); font-size: .74rem; }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.verificacao { display: grid; gap: .9rem; }
.termos { max-height: 9.5rem; overflow: auto; padding: .75rem .9rem; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: var(--raio-controle); font-size: .86rem; line-height: 1.55; text-align: justify; hyphens: auto; }
.termos p { margin: 0 0 .5rem; }
.termos p:last-child { margin: 0; }
.aceite { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.aceite input { margin-top: .25rem; width: 17px; height: 17px; accent-color: var(--blue); }
.desafio { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.desafio-pergunta { color: var(--titulo); font-weight: 700; }
.desafio input { width: 7rem; min-height: 38px; padding: .45rem .65rem; color: var(--campo-valor); background: var(--campo-fundo); border: 1px solid var(--campo-borda); border-radius: var(--raio-controle); font: inherit; }
.botoes-formulario { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: .4rem; }
.mensagem-formulario { margin-bottom: 1rem; }
.mensagem-formulario[hidden] { display: none; }

@media (max-width: 1024px) {
  .grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo[data-span="3"], .campo[data-span="4"] { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .grade-campos { grid-template-columns: minmax(0, 1fr); }
  .campo[data-span="2"], .campo[data-span="3"], .campo[data-span="4"] { grid-column: auto; }
  .secao-cartao { padding: 1rem; }
}