/* A MOLDURA da página do candidato: fundo, marca, cartão, progresso, botões e recados.
 *
 * ⚠️ ESTE ARQUIVO NÃO ESTILIZA CAMPO. Quem desenha rótulo, entrada, alternativa, dica e
 * erro é `campos.css` — o MESMO arquivo que o construtor do painel carrega, e é ele que
 * garante que "como vai ficar" seja a verdade. Se uma regra daqui alcançar `.campo`,
 * `.campo-controle` ou `input`, o construtor passa a mentir. Tudo aqui é escrito em
 * classes próprias, de propósito.
 *
 * ⚠️ A PALETA É A DO PAINEL, valor por valor (`painel/estilo.css`). É a mesma marca; dois
 * conjuntos de azuis seriam duas Betéis. `campos.css` CONSOME estas variáveis e não as
 * define — é por isso que elas precisam estar aqui, e é por isso que faltar uma deixa o
 * campo sem cor em vez de dar erro.
 *
 * ⚠️ PRIMEIRO O CELULAR, e não é slogan: o candidato abre isto na rua, com uma mão, em
 * rede de operadora. O padrão deste arquivo é a tela estreita — o cartão nasce colado nas
 * bordas, e é a `@media (min-width: 640px)` que acrescenta margem e sombra, nunca o
 * contrário. `campos.css` já garante o toque de 44px e o `font-size: 16px` que impede o
 * iOS de dar zoom sozinho ao focar um campo; nada aqui pode desfazer isso.
 */

:root {
  /* Os mesmos valores de `painel/estilo.css` — inclusive `--suave-texto`, que existe lá
     porque `--suave` reprova em contraste sobre `--fundo`. */
  --tinta: #0f172a;
  --suave: #64748b;
  --suave-texto: #475569;
  --linha: #e2e8f0;
  --fundo: #f1f5f9;
  --marca: #002d5f;
  --acento: #0ea5e9;
  --alerta: #b45309;
  --perigo: #b91c1c;
  --ok: #047857;
  --papel: #fff;
  --sombra: 0 6px 28px rgba(0, 45, 95, .10);

  /* ⚠️ `--cor-vaga` É ESCRITA PELO JAVASCRIPT (`aplicaCor`), e pode não vir: vaga sem cor
     escolhida, ou cor recusada por não ser hexadecimal. Por isso todo uso é
     `var(--cor-vaga, var(--marca))` — o azul da Betel é o padrão, e nenhuma tela fica sem
     cor. É a mesma reserva que `campos.css` usa no `--anel`. */
  --destaque: var(--cor-vaga, var(--marca));
  /* A tinta que se lê SOBRE o destaque, calculada em `aplicaCor` pela luminância da cor
     escolhida — ver o comentário lá. Branco é o padrão porque o padrão é `--marca`. */
  --tinta-sobre-destaque: #fff;
}

*, *::before, *::after { box-sizing: border-box; }

/* O fundo é gradiente e não imagem: os únicos arquivos servidos neste host são os quatro
   de código (ver `ESTATICOS` em `formulario_web.py`), então não há PNG de marca d'água
   para buscar — e num 3G de operadora isso é uma requisição a menos antes de a primeira
   pergunta aparecer. */
html {
  background:
    radial-gradient(1100px 520px at 50% -10%,
                    rgba(0, 45, 95, .10), rgba(0, 45, 95, 0) 70%),
    var(--fundo);
  background-attachment: fixed;
  min-height: 100%;
}

body {
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  /* Espaço para o rodapé grudado não terminar em cima da última pergunta em tela curta. */
  padding-bottom: 8px;
}

/* ── a marca ─────────────────────────────────────────────────────────────────────────── */

/* ⚠️ ELA FICA FORA DO `#app` (ver `index.html`) e por isso sobrevive a toda tela — o 404,
   a vaga fechada, a falha de rede. Uma página que diz "não disponível" sem dizer de quem
   é não tranquiliza ninguém que clicou num link de grupo de WhatsApp. */
.marca-topo {
  align-items: center;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  display: flex;
  gap: 10px;
  padding: 12px 16px;
}
.marca-nome {
  color: var(--marca);
  font-size: 17px;
  letter-spacing: .2px;
}
/* A marca fica em `--marca` SEMPRE, e não na cor da vaga: a cor da vaga é o destaque de
   UMA vaga; a marca é de quem contrata. Trocá-la faria a Betel mudar de cor por vaga. */
.marca-nome b { font-weight: 800; }

/* ── o cartão ────────────────────────────────────────────────────────────────────────── */

#app { display: block; }

.cartao {
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  margin: 0 auto;
  max-width: 660px;
  padding: 20px 16px 0;
}

@media (min-width: 640px) {
  .cartao {
    border: 1px solid var(--linha);
    border-radius: 16px;
    box-shadow: var(--sombra);
    margin: 24px auto 40px;
    padding: 28px 28px 0;
  }
}

.carregando {
  color: var(--suave-texto);
  padding: 28px 16px;
  text-align: center;
}

/* ── o cabeçalho da vaga ─────────────────────────────────────────────────────────────── */

/* ⚠️ SÓ NA PRIMEIRA TELA — quem decide é o `formulario.js`, e é o que o construtor faz.
   O filete na cor da vaga é o único lugar em que a cor escolhida aparece grande: é o que
   dá cara à vaga sem obrigar ninguém a acertar contraste de texto. */
.vaga-cabecalho {
  border-left: 4px solid var(--destaque);
  margin-bottom: 22px;
  padding-left: 14px;
}
.vaga-titulo {
  color: var(--marca);
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px;
  /* Nome de vaga vem em CAIXA ALTA e sem espaço ("AUXILIAR DE PRODUÇÃO - MANAUS"): sem
     isto, numa tela de 320px ele estoura a largura e o cartão ganha rolagem horizontal. */
  overflow-wrap: anywhere;
}
/* ⚠️ `pre-line` E NÃO `innerHTML`. O cabeçalho da vaga é digitado num `<textarea>` do
   construtor (salário, benefícios, horário, requisitos, uma linha cada) e chega com `\n`.
   O CSS é o que devolve as quebras sem que uma vaga possa escrever marcação na página. */
.vaga-descricao,
.secao-descricao,
.recado-texto {
  white-space: pre-line;
}
.vaga-descricao {
  color: var(--suave-texto);
  font-size: 15px;
}

/* ── a barra de progresso ────────────────────────────────────────────────────────────── */

.progresso { margin-bottom: 20px; }

.progresso-trilho {
  background: var(--fundo);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.progresso-barra {
  background: var(--destaque);
  border-radius: 999px;
  height: 100%;
  transition: width .2s ease-out;
}
/* ⚠️ NUNCA SÓ A BARRA. "Passo 2 de 4" é o que quem não enxerga a barra — e quem só quer
   saber quanto falta antes de entrar no ônibus — de fato lê. */
.progresso-texto {
  color: var(--suave-texto);
  font-size: 13px;
  margin: 6px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .progresso-barra { transition: none; }
}

/* ── as seções ───────────────────────────────────────────────────────────────────────── */

.secao { margin-bottom: 8px; }

.secao-titulo {
  color: var(--marca);
  font-size: 18px;
  margin: 0 0 4px;
  /* Recebe o foco na troca de passo, para o leitor de tela anunciar onde a pessoa chegou.
     Sem isto o navegador desenharia um anel em volta de um título que ninguém clicou. */
  outline: 0;
}
.secao-descricao {
  color: var(--suave-texto);
  font-size: 14.5px;
  margin: 0 0 14px;
}

/* ── a faixa de aviso ────────────────────────────────────────────────────────────────── */

/* O recado do servidor que não é de um campo: vaga encerrada, CPF já inscrito, muitos
   envios deste local, rede caída. Fundo de papel e filete — cor de "leia isto", não de
   erro fatal, porque em três dos quatro casos ainda há o que fazer. */
.faixa {
  background: #fef2f2;
  border-left: 3px solid var(--perigo);
  border-radius: 0 8px 8px 0;
  color: var(--tinta);
  font-size: 14.5px;
  margin: 0 0 18px;
  padding: 10px 12px;
}

/* ── o rodapé com os botões ──────────────────────────────────────────────────────────── */

/* ⚠️ GRUDADO NO PÉ DA TELA, e é a decisão mais "celular" deste arquivo: num passo com
   oito perguntas, o Continuar fica abaixo da dobra, e quem preenche com uma mão no ônibus
   rola até o fim procurando um botão que já poderia estar embaixo do polegar.
   `position: sticky` (e não `fixed`) porque ele ocupa lugar no fluxo — assim ele nunca
   cobre a última pergunta, que é o defeito clássico do rodapé fixo. */
.rodape {
  background: var(--papel);
  border-top: 1px solid var(--linha);
  bottom: 0;
  display: flex;
  gap: 10px;
  margin: 14px -16px 0;
  /* A faixa do iPhone come a parte de baixo da tela; sem isto o botão fica meio escondido
     atrás dela justamente no aparelho em que ele é mais usado. */
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  position: sticky;
}
@media (min-width: 640px) {
  .rodape {
    border-radius: 0 0 16px 16px;
    margin: 18px -28px 0;
    padding: 16px 28px;
  }
}

.botao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  color: var(--tinta);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  /* 48px: o toque confortável de `campos.css` mais uma folga, porque este é o alvo que a
     pessoa procura com o polegar sem olhar. */
  min-height: 48px;
  padding: 12px 18px;
}
.botao:hover { background: var(--fundo); }

/* O principal cresce e o Voltar fica do tamanho do texto: numa tela de 320px, dois botões
   iguais lado a lado deixam o Continuar estreito demais para o que ele significa. */
.botao-principal {
  background: var(--destaque);
  border-color: var(--destaque);
  color: var(--tinta-sobre-destaque);
  flex: 1;
}
.botao-principal:hover { filter: brightness(.94); background: var(--destaque); }

.botao:focus-visible {
  /* O anel é `--marca` e não a cor da vaga: uma vaga de cor clara deixaria o foco
     invisível justo para quem navega tabulando, que é quem depende dele. */
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}
.botao:disabled { cursor: progress; opacity: .7; }

/* ── as telas de recado ──────────────────────────────────────────────────────────────── */

/* O 404, a vaga fechada, a falha de rede e o obrigado. Mesma moldura das perguntas de
   propósito: quem chega aqui tem de sentir que está no mesmo lugar. */
.tela-recado { padding-bottom: 26px; text-align: center; }

.recado-titulo {
  color: var(--marca);
  font-size: 21px;
  line-height: 1.3;
  margin: 8px 0 10px;
  overflow-wrap: anywhere;
}
.recado-texto {
  color: var(--suave-texto);
  margin: 0 auto;
  max-width: 46ch;
}

/* ── o campo-armadilha ───────────────────────────────────────────────────────────────── */

/* ⚠️ NÃO É `display: none`, E A DIFERENÇA É O PONTO. Robô de formulário pula campo com
   `display:none` há vinte anos; ele preenche o que existe na árvore. Isto some da tela
   sem sair do documento — e as outras duas camadas (`tabindex="-1"` e `aria-hidden`, em
   `formulario.js`) são o que impede uma PESSOA de cair na armadilha tabulando ou com
   leitor de tela. Cair nela é ser descartado em silêncio: as três camadas são obrigatórias. */
.armadilha {
  border: 0;
  height: 1px;
  left: -9999px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: auto;
  width: 1px;
}