/* Formulário público de solicitação de veículo.
   Ordem de carga: coopaq.css (tokens + fonte) → estilo.css (base) → este.

   É a única tela que o cooperado/colaborador vê, então é onde a marca aparece
   inteira: faixa de areia com o logotipo em cima, papel branco embaixo. */

.pagina-formulario { min-height: 100vh; background: var(--color-bg); }

/* ------------------------------------------------------------ faixa da marca */

/* Areia #FFD895 é a superfície-assinatura do design system. Fica só aqui: no
   painel, quem trabalha o dia inteiro precisa de papel neutro. */
.faixa-marca {
  position: relative;  /* âncora do botão de tema, que flutua no canto */
  background: linear-gradient(180deg, var(--color-bg-cream) 0%, var(--color-bg-cream-deep) 100%);
  border-bottom: 1px solid var(--color-border-on-cream);
  padding: 26px 24px;
}

/* O conjunto logotipo + divisor + texto é lido como uma coisa só, e uma coisa
   só encostada à esquerda de uma faixa que atravessa a tela inteira parecia
   desalinhada. A largura continua casada com a `.folha` (760px) para o eixo do
   conteúdo ser o mesmo do formulário; o `justify-content` é que centra o grupo
   dentro dela. */
.faixa-marca-conteudo {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Fora do `.faixa-marca-conteudo` de propósito: dentro dele o botão entraria na
   conta da centralização e empurraria o logotipo para a esquerda. */
.faixa-marca-tema {
  position: absolute;
  top: 14px;
  right: 16px;
}

.faixa-marca .marca-coopaq { height: 46px; }

.faixa-marca-texto {
  border-left: 1px solid var(--color-border-on-cream);
  padding-left: 18px;
  min-width: 0;
}

.faixa-marca h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-texto);
}

.faixa-marca p { margin: 2px 0 0; font-size: 0.875rem; color: var(--color-fg-on-cream); }

/* ------------------------------------------------------------------- folha */

.folha { max-width: 760px; margin: 0 auto; padding: 28px 24px 64px; }

.folha-topo { margin-bottom: 20px; }
.folha-topo h1 { font-size: 1.375rem; }

form,
.cartao-sucesso {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}

.campo.largo { grid-column: 1 / -1; }
.campo { margin-bottom: 16px; }
.campo label { margin-top: 0; }

/* O estilo.css cobre os inputs de texto; aqui entram os tipos do formulário. */
.campo input[type="tel"],
.campo input[type="datetime-local"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  background: var(--color-surface);
  color: var(--color-fg-1);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.campo textarea { resize: vertical; line-height: 1.6; }
.campo select { cursor: pointer; }

/* Campo reprovado na validação: borda vermelha E fundo lavado. Só a borda
   passava despercebida numa grade de doze campos. */
.campo.invalido input,
.campo.invalido select,
.campo.invalido textarea {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.campo.invalido input:focus,
.campo.invalido select:focus,
.campo.invalido textarea:focus {
  border-color: var(--color-danger);
  box-shadow: var(--ring-erro);
}

.erro-campo { margin: 6px 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-danger); }
.erro-campo[hidden] { display: none; }

.contador { margin: 6px 0 0; font-size: 0.75rem; color: var(--color-fg-3); text-align: right; }

/* Honeypot: fora da tela, mas não `display:none` — robô costuma ignorar os ocultos. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#botao-enviar { margin-top: 8px; padding: 13px 28px; font-size: 1rem; }

/* ----------------------------------------------------------------- sucesso */

.cartao-sucesso { text-align: center; }
.cartao-sucesso[hidden] { display: none; }
.cartao-sucesso h2 { font-size: 1.375rem; margin: 0 0 6px; color: var(--color-primary-texto); }
.cartao-sucesso button { width: auto; }

/* O protocolo é o que a pessoa vai anotar ou fotografar: fica na cor da marca,
   grande, tabular e destacável. */
.protocolo {
  margin: 20px 0;
  padding: 20px 16px;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-wash);
  color: var(--color-primary-texto);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

/* -------------------------------------------------------------- responsivo */

@media (max-width: 620px) {
  .grade { grid-template-columns: minmax(0, 1fr); }
  .folha { padding: 20px 16px 48px; }
  .faixa-marca { padding: 14px 16px 20px; }
  .faixa-marca-conteudo { gap: 14px; }

  /* No celular o botão flutuante passaria por cima do texto da marca: ele sai
     do canto e vira uma linha própria acima dela, à direita. */
  .faixa-marca-tema { position: static; text-align: right; margin-bottom: 6px; }
  .faixa-marca .marca-coopaq { height: 38px; }
  .faixa-marca-texto { padding-left: 14px; }
  .faixa-marca h1 { font-size: 1.0625rem; }
  form, .cartao-sucesso { padding: 20px; }
}