/* ============================================================================================
   TRABALHE CONOSCO: GRUPO JAP (tarefa r37, 26/09/2026)
   ------------------------------------------------------------------------------------------
   Página pública de candidatura, sem login. Fundo escuro da marca com cartões brancos por cima
   (desenho da Denise, RH da Ceasa: scratchpad/rh-denise/telas-transcritas.md). Celular primeiro:
   todo bloco nasce em UMA coluna e só vira duas a partir de 640px, onde o desenho pareia campo
   curto com campo curto (ver o comentário de .campos-grade mais abaixo).

   Cor, fonte e espaçamento medidos do site publicado do Grupo JAP (grupojap.vercel.app):
   tokens.css copiado em scratchpad/grupojap/tokens.css. Não é cor chutada.
   ============================================================================================ */

/* ---------- FONTE DA MARCA (Fontshare, licença livre) ----------
   Só o arquivo variável: cobre o peso 200 a 700 num arquivo só. Quem não entende fonte variável
   (navegador antigo) cai no system-ui da pilha abaixo, nunca em Times/serifada. */
@font-face {
  font-family: "Chillax";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("fontes/Chillax-Variable.woff2") format("woff2-variations");
}

:root {
  /* ---------- CORES DA MARCA (medidas em tokens.css, 26/09/2026) ---------- */
  --verde: #0c6c32; /* verde da marca: passa como texto e como fundo de botão com letra branca */
  --verde-vivo: #00a020; /* NÃO serve pra texto nem botão com letra branca (contraste baixo); só detalhe grande */
  --amarelo: #ffd71b;
  --laranja: #f9791d;
  --vermelho: #e92b3b; /* só pra detalhe gráfico grande (o asterisco obrigatório, por exemplo) */
  /* O vermelho da marca mede 4,31:1 sobre branco (abaixo do mínimo de 4,5:1 pra texto corrido).
     Escurecido pra #d42535 mede 5,10:1 sobre branco (conferido com a fórmula de contraste do
     WCAG em 26/09/2026, scripts/… não existe ainda pra isso, conta feita à mão nesta sessão).
     Esse tom escurecido é o único usado em TEXTO de erro; o --vermelho da marca continua livre
     pra asterisco e ícone, que são elementos gráficos, não frase pra ler. */
  --vermelho-texto: #d42535;
  --tinta-fundo: #0a1f14; /* fundo da página inteira */
  --tinta-fundo-2: #0e2a1b; /* um degrau acima, pro aviso verde-claro sobre o fundo escuro */
  --creme: #fbf7ef;
  --creme-2: #f3eeE2;
  --tinta: #16241a; /* texto sobre branco/creme: 15,10:1 */
  --tinta-2: #46554b; /* texto de apoio sobre branco: 7,26:1 */
  --tinta-3: #5e6d63; /* texto mínimo sobre branco: 4,90:1: nunca mais escuro que isso pra corpo de texto */
  --claro: #f3f8f4; /* texto sobre o fundo escuro: 15,8:1 */
  --claro-2: #c4d3c8; /* texto de apoio sobre o fundo escuro: 9,3:1 */
  --claro-3: #93a698; /* texto mínimo sobre o fundo escuro: 4,9:1 */
  --branco: #ffffff;

  --fonte: "Chillax", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raio-cartao: 14px;
  --raio-campo: 10px;
  --raio-pilula: 999px;

  --sombra-cartao: 0 20px 45px -28px rgba(4, 16, 10, 0.45);

  --curva: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;

  /* Largura de leitura do cartão de formulário: bastante estreita pra não esticar demais no
     computador (o desenho da Denise é sempre um cartão vertical, mesmo largo). */
  --largura-form: 46rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

/* @media (prefers-reduced-motion: reduce) trocando TODA animação e rolagem suave por instantânea.
   Vem antes do reset pra sempre vencer qualquer transition declarada depois. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--tinta-fundo);
  color: var(--claro);
  /* 16px de base: abaixo disso o iPhone dá zoom sozinho ao focar um campo, e a régua da tarefa
     proíbe isso. Todo campo de texto herda este tamanho. */
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
button {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
h4,
p,
ul {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
svg {
  flex-shrink: 0;
}

/* ---------- FOCO VISÍVEL EM TUDO ----------
   Um anel só, que funciona tanto sobre o fundo escuro quanto sobre o cartão branco: o amarelo da
   marca passa nos dois (11,6:1 no escuro, contraste de borda não precisa dos 4,5:1 de texto, mas
   ele salta aos olhos nos dois fundos, que é o que importa aqui). */
:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- LINK DE PULAR ---------- */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amarelo);
  color: var(--tinta);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.pular:focus {
  left: 0;
}

/* ---------- TEXTO SÓ PRA LEITOR DE TELA ---------- */
.somente-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================================
   CABEÇALHO
   ============================================================================================ */
.cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem var(--gutter) 1rem;
  text-align: center;
}
/* AS QUATRO MARCAS (tarefa r51): cada uma com a SUA largura, e a altura sai da proporção da logo. O manual da Del
   Costa dá a largura mínima em tela, medida do começo ao fim do desenho: Nova Ceasa sem o "PIAUÍ", 80 px; AgroJap
   sem o descritor, 64 px. As larguras abaixo são da imagem inteira, que tem uma folga em volta do desenho (o desenho
   é 95% da largura na Nova Ceasa e 93% na AgroJap): 88 px dão 84 de desenho, 70 px dão 65. No celular as quatro
   cabem numa fileira a partir de 360 px (58 + 70 + 84 + 88 + 3 vãos de 8 = 324 px, dos 328 úteis); mais estreito
   que isso, a fileira quebra, e nunca rola de lado. A largura é da IMAGEM, e não da caixa em volta: até o crítico da
   r51 a caixa tinha a largura e a imagem só "cabia dentro", e a lista encolhia até o tamanho do conteúdo, com as
   quatro caindo para 34 px no celular e 51 no computador (a conferência está no P17 de
   scripts/testar-rh-pagina.mjs). A do Grupo JAP
   tem 180 px no arquivo: 58 px no celular (3 pontos por pixel) e 88 no computador (2) ainda saem nítidos. */
.cabecalho-marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cabecalho-marcas li {
  flex: none;
  display: flex;
}
.cabecalho-marcas img {
  display: block;
  width: var(--largura-da-marca);
  height: auto;
}
.cabecalho-marcas [data-marca="grupo-jap"] {
  --largura-da-marca: 58px;
}
.cabecalho-marcas [data-marca="agrojap"] {
  --largura-da-marca: 70px;
}
.cabecalho-marcas [data-marca="tempero-da-vovo"] {
  --largura-da-marca: 84px;
}
.cabecalho-marcas [data-marca="nova-ceasa"] {
  --largura-da-marca: 88px;
}
@media (min-width: 768px) {
  .cabecalho-marcas {
    gap: 28px;
  }
  .cabecalho-marcas [data-marca="grupo-jap"] {
    --largura-da-marca: 88px;
  }
  .cabecalho-marcas [data-marca="agrojap"] {
    --largura-da-marca: 96px;
  }
  .cabecalho-marcas [data-marca="tempero-da-vovo"] {
    --largura-da-marca: 120px;
  }
  .cabecalho-marcas [data-marca="nova-ceasa"] {
    --largura-da-marca: 150px;
  }
}
.cabecalho-processo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.cabecalho-sobretitulo {
  font-size: 0.85rem;
  color: var(--claro-2);
}
.cabecalho-titulo {
  font-weight: 700;
  font-size: 1rem;
  color: var(--amarelo);
}
.cabecalho-equipe {
  font-size: 0.85rem;
  color: var(--claro-2);
}

.conteudo {
  padding: 0 var(--gutter) 3rem;
  max-width: calc(var(--largura-form) + var(--gutter) * 2);
  margin: 0 auto;
}

/* ============================================================================================
   CARTÃO DE CARREGAMENTO / ERRO GERAL
   ============================================================================================ */
.cartao-estado {
  background: var(--branco);
  color: var(--tinta);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.cartao-estado p {
  color: var(--tinta-2);
  max-width: 34ch;
}
.espirais {
  width: 32px;
  height: 32px;
  border: 3px solid var(--claro-3);
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: girar 900ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .espirais {
    animation: none;
    border-top-color: var(--claro-3);
  }
}
@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================================================
   BOAS-VINDAS (só etapa 1)
   ============================================================================================ */
.boas-vindas {
  color: var(--claro);
  margin-bottom: 1.5rem;
}
.boas-vindas-titulo {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.boas-vindas p {
  color: var(--claro-2);
  margin-bottom: 0.6rem;
}
.boas-vindas p:last-child {
  margin-bottom: 0;
}

/* ============================================================================================
   RASCUNHO ENCONTRADO
   ============================================================================================ */
.cartao-rascunho {
  background: var(--tinta-fundo-2);
  border: 1px solid var(--claro-3);
  border-radius: var(--raio-cartao);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--claro);
}
.cartao-rascunho p {
  margin-bottom: 1rem;
  color: var(--claro-2);
}
.cartao-rascunho-acoes {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ============================================================================================
   BARRA DE PROGRESSO
   ============================================================================================ */
.progresso {
  margin-bottom: 1.5rem;
}

/* --- celular (< 768px): texto + barra de segmentos --- */
.progresso-mobile {
  display: block;
}
.progresso-mobile-texto {
  color: var(--claro);
  font-weight: 600;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}
.progresso-segmentos {
  display: flex;
  gap: 4px;
}
.progresso-segmento {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(243, 248, 244, 0.18);
}
.progresso-segmento.feito {
  background: var(--verde-vivo);
}

/* --- computador (>= 768px): círculos numerados com nome embaixo --- */
.progresso-desktop {
  display: none;
}
@media (min-width: 768px) {
  .progresso-mobile {
    display: none;
  }
  .progresso-desktop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem;
  }
}
.progresso-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  position: relative;
}
/* o traço que liga um círculo ao próximo: fica atrás dos círculos, por isso z-index e o
   pseudo-elemento cobrindo a metade direita do item (a metade esquerda vem do item anterior) */
.progresso-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(243, 248, 244, 0.18);
  z-index: 0;
}
.progresso-item.feito:not(:last-child)::after {
  background: var(--verde-vivo);
}
.progresso-bolha {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgba(243, 248, 244, 0.12);
  color: var(--claro-2);
  border: 2px solid rgba(243, 248, 244, 0.18);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.progresso-item.feito .progresso-bolha {
  background: var(--verde-vivo);
  border-color: var(--verde-vivo);
  color: var(--tinta-fundo);
}
.progresso-item.atual .progresso-bolha {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--tinta);
}
.progresso-nome {
  font-size: 0.75rem;
  text-align: center;
  color: var(--claro-3);
  max-width: 6.5rem;
}
.progresso-item.atual .progresso-nome {
  color: var(--claro);
  font-weight: 600;
}

/* ============================================================================================
   AVISO VERDE-CLARO DA ETAPA
   ============================================================================================ */
.aviso-etapa {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: var(--tinta-fundo-2);
  border: 1px solid rgba(0, 160, 32, 0.4);
  color: var(--claro);
  border-radius: var(--raio-campo);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.aviso-etapa svg {
  color: var(--verde-vivo);
  margin-top: 0.1rem;
}

/* ============================================================================================
   CARTÃO DE BLOCO (um por bloco do campos.json)
   ============================================================================================ */
.cartao-bloco {
  background: var(--branco);
  color: var(--tinta);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.bloco-cabeca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.bloco-numero {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.bloco-titulo-linha {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
}
.bloco-titulo {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tinta);
}
/* o "traço verde fino ao lado do título" do desenho da Denise */
.bloco-titulo-linha::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--verde);
  opacity: 0.25;
  border-radius: 2px;
}
.bloco-texto {
  color: var(--tinta-2);
  font-size: 0.9rem;
  margin: 0.5rem 0 1.1rem;
}
/* A FRASE DE CONSENTIMENTO DESTACADA (tarefa r51): LGPD, art. 11, I, o dado sensível só com consentimento "de forma
   específica e destacada". Caixa com borda verde e o escudo, separada do texto comum do cartão. A margem de cima é de
   12 px: com 4, ela ficava a 6 px do número do cartão, abaixo do piso de 8 da casa (a auditoria de tela pegou, r51). */
.bloco-destaque {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.75rem 0 1.25rem;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--verde);
  border-radius: var(--raio-campo);
  background: var(--creme);
  color: var(--tinta);
  font-size: 0.9rem;
  line-height: 1.45;
}
.bloco-destaque svg {
  flex: none;
  margin-top: 0.1rem;
  color: var(--verde);
}

/* ---------- A GRADE DE CAMPOS ----------
   Celular: uma coluna sempre. A partir de 640px, dois campos por linha em ordem de leitura ,
   é assim que o desenho B pareia Logradouro/Número, Bairro/Complemento, Cidade/Estado: cada um
   ocupa 1 coluna e o fluxo natural do grid já forma o par certo. Só os campos "largos" (texto
   longo, arquivo, grupo repetível, marcar, escolha e caixa, e o CEP, que dispara o preenchimento
   automático dos campos abaixo dele) ocupam a linha inteira, senão a grade quebraria a leitura. */
.campos-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: start;
}
@media (min-width: 640px) {
  .campos-grade {
    grid-template-columns: 1fr 1fr;
  }
  .campo-largo {
    grid-column: 1 / -1;
  }
}

/* ---------- SUBSEÇÃO (o "Remuneração e benefícios (opcional)" verde-claro dentro do cartão) ---------- */
.subsecao {
  grid-column: 1 / -1;
  background: rgba(12, 108, 50, 0.06);
  border: 1px solid rgba(12, 108, 50, 0.18);
  border-radius: var(--raio-campo);
  padding: 1rem;
  margin-top: 0.25rem;
}
.subsecao-titulo {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--verde);
  margin-bottom: 0.9rem;
}
.subsecao .campos-grade {
  gap: 1rem;
}

/* ============================================================================================
   UM CAMPO
   ============================================================================================ */
.campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
/* título curto por cima da pergunta inteira (as 7 perguntas da etapa "Seu jeito de trabalhar";
   campos.json chama de "tema"). Fica ACIMA do rótulo, nunca no lugar dele. */
.campo-tema {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--verde);
  margin-bottom: 0.15rem;
}
.campo-rotulo {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tinta);
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
/* o asterisco é TEXTO (por menor que seja), não um detalhe gráfico grande: segue a mesma régua
   de contraste de qualquer texto. --vermelho (a cor viva da marca) mede 4,31:1 sobre branco,
   abaixo do mínimo de 4,5:1 (achado pela régua, scripts/testar-rh-pagina.mjs P12); por isso usa
   --vermelho-texto (5,10:1), a mesma cor da mensagem de erro. */
.campo-obrigatorio {
  color: var(--vermelho-texto);
}
/* O ÍCONE FICA FORA DA CAIXA, À ESQUERDA, COM UMA FOLGA (tarefa r51, pedido do Carvalho, 28/09/2026: "coloque uma
   folga nesses icones até o campo pra preencher"). Até aqui o vão era ZERO: este arquivo tinha regras para um
   `.campo-icone` DENTRO da caixa, mas formulario.js nunca pôs essa classe, e o ícone ficava encostado na borda do
   campo (medido nas cinco larguras). As regras mortas saíram, e a folga é uma só para todo campo com ícone:
   12 px, acima do piso de 8 px entre dois objetos (r38), e a bateria da página a mede em cada campo com ícone,
   nas cinco larguras (scripts/testar-rh-pagina.mjs, P15). `flex: none` segura o ícone no tamanho dele: sem
   isso, num celular estreito o campo espremia o desenho. */
.campo-controle {
  --folga-icone: 12px;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--folga-icone);
}
.campo-controle > svg {
  flex: none;
}
.campo-input,
.campo select,
.campo textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem; /* nunca abaixo de 16px: campo de texto que dá zoom no iPhone é o erro medido na régua */
  color: var(--tinta);
  background: var(--branco);
  border: 1.5px solid #d8ddd9;
  border-radius: var(--raio-campo);
  padding: 0.7rem 0.9rem;
  /* alvo de toque de 44px: a régua da tarefa mede a altura mínima, então o padding garante isso
     mesmo em fonte pequena */
  min-height: 44px;
  transition: border-color var(--dur) var(--curva);
}
.campo-input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--verde);
}
.campo-input::placeholder,
.campo textarea::placeholder {
  /* a régua da tarefa pede 4,5:1 mesmo no texto de exemplo. #767f78 (a primeira cor usada aqui)
     media 4,14:1 sobre branco, abaixo do mínimo: contado com a fórmula do WCAG nesta sessão,
     26/09/2026. --tinta-3 mede 5,46:1 sobre branco, e já é um token usado no resto da página. */
  color: var(--tinta-3);
}
.campo textarea {
  min-height: 6.5rem;
  resize: vertical;
}
.campo select {
  appearance: auto;
  cursor: pointer;
}
.campo-ajuda {
  /* 13 px no piso: a 0,8rem (12,8 px) a dica do campo ficava abaixo do texto corrido minimo do computador (r38) */
  font-size: max(13px, 0.8rem);
  color: var(--tinta-3);
}
.campo-contador {
  font-size: 0.78rem;
  color: var(--tinta-3);
  text-align: right;
}
.campo-contador.perto-do-limite {
  color: var(--vermelho-texto);
}
.campo-msg-erro {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--vermelho-texto);
  font-weight: 600;
}
/* o parágrafo de erro do arquivo nasce sempre no DOM (só alterna o atributo `hidden`, formulario.js);
   sem isso aqui, "display:flex" acima vence o `[hidden]{display:none}` do navegador (mesma
   especificidade, e o CSS do autor vem depois), e a mensagem ficava visível sempre, vazia */
.campo-msg-erro[hidden] {
  display: none;
}
.campo.com-erro .campo-input,
.campo.com-erro select,
.campo.com-erro textarea {
  border-color: var(--vermelho-texto);
}
.campo[hidden] {
  display: none;
}
/* escolha/marcar são um <fieldset>, sem um único input pra pintar de vermelho: a marca de erro
   vai na borda de cada pílula/cartão do grupo inteiro */
fieldset.campo.com-erro .pilula,
fieldset.campo.com-erro .cartao-escolha {
  border-color: var(--vermelho-texto);
}
.campo.com-erro .arquivo-campo {
  border-color: var(--vermelho-texto);
}

/* botão de limpar (x) dentro do campo: só LinkedIn/Instagram/Facebook, "limpar":true no JSON.
   `top:0;bottom:0` (não 2px de inset, que media 40px de altura, abaixo do alvo de 44px da régua). */
.campo-limpar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--raio-campo);
  color: var(--tinta-3);
  cursor: pointer;
}
.campo-limpar:hover {
  color: var(--tinta);
  background: rgba(0, 0, 0, 0.04);
}
.campo-controle:has(.campo-limpar) .campo-input {
  padding-right: 2.75rem;
}

/* ============================================================================================
   ESCOLHA (rádio nativo desenhado como pílula) E MARCAR (caixa nativa desenhada como pílula)
   ============================================================================================ */
fieldset.campo {
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
}
/* O BOTÃO "i" (tarefa r51): ao lado da pergunta, no canto direito da primeira linha. A pergunta ocupa a largura MENOS
   o espaço do botão (e 8 px de folga, o piso da casa entre dois objetos), e a linha dela tem a altura do botão: assim
   o botão nunca fica por cima do texto nem da primeira fileira de opções. O `top` é NEGATIVO de propósito: num
   fieldset, o Chromium conta o `top: 0` de um filho absoluto a partir do FIM da legenda (medido na r51: o botão caía
   em cima da primeira opção, e o clique ia para ela); -44 px o põe de volta na linha da pergunta. 44 px de área no celular; 32 no computador
   com mouse (a régua da casa, r32). O painel que ele abre fica logo abaixo da pergunta, antes das opções. */
fieldset.campo:has(> .campo-explicar) > .campo-legenda {
  width: calc(100% - 52px);
  min-height: 44px;
  align-items: center;
}
.campo-explicar {
  position: absolute;
  top: -44px;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--verde);
  cursor: pointer;
}
.campo-explicar[aria-expanded="true"] {
  background: var(--creme-2);
}
.campo-explicar:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 1px;
}
/* 32 px só com mouse E tela larga: no celular de 390 px o alvo é sempre 44, mesmo sem toque (a régua da página mede
   o alvo a 390 px, P12 de scripts/testar-rh-pagina.mjs) */
@media (pointer: fine) and (min-width: 768px) {
  fieldset.campo:has(> .campo-explicar) > .campo-legenda {
    width: calc(100% - 40px);
    min-height: 32px;
  }
  .campo-explicar {
    top: -32px;
    width: 32px;
    height: 32px;
  }
}
.campo-explicacao {
  margin: 0.5rem 0 0.75rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--raio-campo);
  border-left: 4px solid var(--verde);
  background: var(--creme);
  color: var(--tinta);
  font-size: 0.9rem;
  line-height: 1.45;
}
.campo-explicacao-texto {
  margin: 0 0 0.6rem;
}
.campo-explicacao-lista {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}
.campo-explicacao-lista dt {
  font-weight: 700;
}
.campo-explicacao-lista dd {
  margin: 0;
  color: var(--tinta-2);
}
.campo-legenda {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tinta);
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
/* NO CELULAR, grupo de três opções ou mais vira GRADE de duas colunas (tarefa r51): em fileira solta, as perguntas
   de diversidade quebravam em linhas desiguais (3 + 2 + 1, 1 + 2 + 2 + 2 + 2 a 390 px), o defeito que a régua da casa
   reprova ("fileira", r38, scripts/medir-layout-comum.mjs). Na grade as opções ficam em colunas alinhadas. */
@media (max-width: 639.98px) {
  .pilulas:has(> :nth-child(3)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* rádio/caixa nativos, sobre a pílula toda: clicar em qualquer ponto do rótulo marca o input,
   e Tab/Espaço/setas continuam funcionando porque o input é o elemento real, só escondido
   visualmente (não com display:none, que tiraria do foco por Tab). */
.pilula {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: var(--raio-pilula);
  border: 1.5px solid #d8ddd9;
  background: var(--branco);
  color: var(--tinta);
  cursor: pointer;
  font-size: 0.92rem;
  transition:
    border-color var(--dur) var(--curva),
    background var(--dur) var(--curva);
}
.pilula input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  cursor: pointer;
}
.pilula:has(input:checked) {
  border-color: var(--verde);
  background: rgba(12, 108, 50, 0.08);
  font-weight: 600;
}
.pilula:has(input:focus-visible) {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}
.pilula:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* escolha com "cartoes":true: cartão grande, um embaixo do outro no celular */
.cartoes-escolha {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
@media (min-width: 640px) {
  .cartoes-escolha {
    flex-direction: row;
  }
}
.cartao-escolha {
  position: relative;
  flex: 1;
  border: 1.5px solid #d8ddd9;
  border-radius: var(--raio-campo);
  padding: 1rem;
  background: var(--branco);
  cursor: pointer;
}
.cartao-escolha input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  cursor: pointer;
}
.cartao-escolha:has(input:checked) {
  border-color: var(--verde);
  background: rgba(12, 108, 50, 0.06);
}
.cartao-escolha:has(input:focus-visible) {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}
.cartao-escolha:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}
.cartao-escolha-rotulo {
  font-weight: 700;
  display: block;
  margin-bottom: 0.3rem;
}
.cartao-escolha-texto {
  font-size: 0.85rem;
  color: var(--tinta-2);
  display: block;
}

/* caixa (checkbox único, tipo "caixa") */
.campo-caixa {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 44px;
  cursor: pointer;
}
.campo-caixa input {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  accent-color: var(--verde);
  cursor: pointer;
}
.campo-caixa span {
  font-size: 0.92rem;
  color: var(--tinta);
}

/* ============================================================================================
   ARQUIVO (currículo)
   ============================================================================================ */
.arquivo-campo {
  border: 1.5px dashed #b9c2bc;
  border-radius: var(--raio-campo);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.arquivo-campo input[type="file"] {
  display: none;
}
.arquivo-escolher {
  align-self: flex-start;
}
.arquivo-escolhido {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  color: var(--tinta-2);
  font-size: 0.9rem;
}
.arquivo-escolhido strong {
  color: var(--tinta);
}
.arquivo-acoes {
  display: flex;
  gap: 0.5rem;
}

/* ============================================================================================
   GRUPO REPETÍVEL (formação, experiência, referência)
   ============================================================================================ */
.grupo-campo {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* achado na revisão de código (antes do medidor de colisão confirmar): o `gap` acima só separa
   os filhos DIRETOS de .grupo-campo (o rótulo, a lista de cartões, o vazio, o botão de
   adicionar), não os cartões UNS DOS OUTROS dentro da lista. Duas "Formação" cadastradas
   ficavam coladas, sem nenhum vão entre elas. */
.grupo-cartoes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.grupo-cartao {
  border: 1.5px solid #e2e6e3;
  border-radius: var(--raio-campo);
  padding: 1.1rem;
  background: #fcfdfc;
}
.grupo-cartao-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
/* o título do cartão recolhível é um botão nativo de verdade (não uma div com role=button):
   Espaço e Enter já funcionam sozinhos, e o leitor de tela já entende "expandido/recolhido"
   pelo aria-expanded sem eu precisar anunciar nada na mão */
.grupo-cartao-alternar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  background: none;
  border: none;
  padding: 0.3rem 0;
  min-height: 44px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--tinta);
  cursor: pointer;
}
.grupo-cartao-alternar svg {
  color: var(--tinta-3);
  transition: transform var(--dur) var(--curva);
  flex-shrink: 0;
}
.grupo-cartao-alternar[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.grupo-cartao-resumo {
  font-weight: 400;
  color: var(--tinta-3);
  font-size: 0.88rem;
}
.grupo-cartao-corpo[hidden] {
  display: none;
}
.grupo-cartao-corpo .campos-grade {
  margin-top: 0.2rem;
}
.grupo-cartao-remover {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: none;
  background: none;
  color: var(--vermelho-texto);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--raio-campo);
  flex-shrink: 0;
}
.grupo-cartao-remover:hover {
  background: rgba(212, 37, 53, 0.08);
}
.grupo-vazio {
  color: var(--tinta-3);
  font-size: 0.9rem;
  font-style: italic;
}
.grupo-botao-add {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: 1.5px dashed var(--verde);
  border-radius: var(--raio-campo);
  background: none;
  color: var(--verde);
  font-weight: 600;
  cursor: pointer;
}
.grupo-botao-add:hover {
  background: rgba(12, 108, 50, 0.06);
}

/* ============================================================================================
   RESUMO DE ERROS (role="alert" no topo da etapa)
   ============================================================================================ */
.resumo-erros {
  background: #fdf0f1;
  border: 1.5px solid var(--vermelho-texto);
  border-radius: var(--raio-campo);
  padding: 1.1rem;
  margin-bottom: 1.25rem;
  color: var(--tinta);
}
.resumo-erros-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--vermelho-texto);
  margin-bottom: 0.6rem;
}
.resumo-erros ul {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
/* 44 px de altura (tarefa r38): cada linha da lista leva ao campo com erro, e no celular ela é
   tocada com o dedo. Com só a altura do texto, media 28 px a 390 (scripts/testar-rh-pagina.mjs, P12,
   com a lista aberta). O texto continua alinhado à esquerda e no meio da altura. */
.resumo-erros button {
  min-height: 44px;
  background: none;
  border: none;
  padding: 0.2rem 0;
  text-align: left;
  color: var(--tinta);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
}
.resumo-erros button:hover {
  color: var(--vermelho-texto);
}

/* ============================================================================================
   RODAPÉ DE CADA ETAPA (botões)
   ============================================================================================ */
.rodape-etapa {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}
.rodape-etapa-botoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .rodape-etapa-botoes {
    flex-direction: row;
    justify-content: flex-end;
  }
}
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--raio-pilula);
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: filter var(--dur) var(--curva);
  width: 100%;
}
@media (min-width: 640px) {
  .botao {
    width: auto;
  }
}
.botao:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.botao-primario {
  background: var(--verde);
  color: var(--branco);
}
.botao-primario:hover:not(:disabled) {
  filter: brightness(1.08);
}
.botao-secundario {
  background: var(--claro);
  color: var(--tinta);
}
.botao-secundario:hover:not(:disabled) {
  filter: brightness(0.96);
}
.botao-link {
  background: none;
  border: none;
  color: var(--claro-2);
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  padding: 0.3rem 0;
  align-self: flex-start;
}
.botao-link:hover {
  color: var(--claro);
}
.status-salvo {
  font-size: 0.85rem;
  color: var(--claro-3);
}

/* ============================================================================================
   REVISÃO
   ============================================================================================ */
.revisao-privacidade {
  color: var(--tinta-2);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
}
.revisao-cartao {
  background: var(--branco);
  color: var(--tinta);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.revisao-cartao-topo {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.revisao-cartao-icone {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(12, 108, 50, 0.1);
  color: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.revisao-cartao-corpo {
  flex: 1;
  min-width: 0;
}
.revisao-cartao-titulo {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}
.revisao-resumo-linha {
  color: var(--tinta-2);
  font-size: 0.9rem;
  margin: 0.1rem 0;
  overflow-wrap: break-word;
}
.revisao-resumo-vazio {
  color: var(--tinta-3);
  font-size: 0.9rem;
  font-style: italic;
}
.revisao-cartao-acoes {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.revisao-editar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1.5px solid #d8ddd9;
  border-radius: var(--raio-pilula);
  background: none;
  color: var(--tinta);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.revisao-editar:hover {
  background: rgba(0, 0, 0, 0.04);
}
.revisao-ver-tudo {
  margin-top: 0.75rem;
}
.revisao-ver-tudo summary {
  cursor: pointer;
  color: var(--verde);
  font-weight: 600;
  font-size: 0.88rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}
.revisao-ver-tudo summary::-webkit-details-marker {
  display: none;
}
.revisao-ver-tudo-lista {
  margin-top: 0.6rem;
  border-top: 1px solid #ececec;
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.revisao-ver-tudo-item {
  font-size: 0.88rem;
  color: var(--tinta-2);
}
.revisao-ver-tudo-item strong {
  color: var(--tinta);
}
.revisao-rodape-texto {
  color: var(--claro-2);
  font-size: 0.9rem;
  margin: 1rem 0;
}

/* ============================================================================================
   TELA FINAL
   ============================================================================================ */
.tela-final {
  background: var(--branco);
  color: var(--tinta);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 2.5rem 1.75rem;
  text-align: center;
}
.tela-final-visto {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(12, 108, 50, 0.12);
  color: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.tela-final-titulo {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.tela-final p {
  color: var(--tinta-2);
  margin-bottom: 0.6rem;
}
.tela-final-lista {
  text-align: left;
  max-width: 26rem;
  margin: 1.25rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tela-final-lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--tinta);
}
.tela-final-lista svg {
  color: var(--verde);
  margin-top: 0.15rem;
}
.tela-final-faixa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(12, 108, 50, 0.08);
  color: var(--verde);
  border-radius: var(--raio-campo);
  padding: 0.85rem;
  margin: 1.25rem 0;
  font-weight: 600;
}
.tela-final .botao-primario {
  margin-top: 0.5rem;
}

/* ============================================================================================
   ISCA CONTRA ROBÔ (honeypot): invisível de verdade, mas presente no DOM.
   `hidden`/display:none tira do fluxo, mas alguns leitores de robô ignoram isso; posicionar fora
   da tela (em vez de opacity:0 ou display:none) engana o rastreador sem sumir de quem usa
   ferramenta de acessibilidade que ignora display. */
.isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================================================
   RODAPÉ DA PÁGINA (faixa de segurança + crédito)
   ============================================================================================ */
.rodape-pagina {
  text-align: center;
  padding: 1.5rem var(--gutter) 2.5rem;
  color: var(--claro-3);
}
.rodape-seguranca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.rodape-icone-escudo {
  color: var(--claro-3);
  display: inline-flex;
}
.rodape-credito a {
  color: var(--claro-3);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* achado na régua (scripts/testar-rh-pagina.mjs, P12): sem isso o alvo de toque do link do
     rodapé media só a altura da linha de texto, uns 17px */
}
.rodape-credito a:hover {
  color: var(--claro);
}

/* ============================================================================================
   LARGURAS MAIORES: nada de rolagem de lado em 390/320, e o cartão nunca esparrama demais no
   computador (o desenho da Denise é sempre uma coluna vertical, mesmo em tela grande).
   ============================================================================================ */
@media (min-width: 1024px) {
  .conteudo {
    padding-top: 0.5rem;
  }
}

/* ============================================================================================
   O MODO DE ATUALIZAR (tarefa r52, formulario.js: montarRespostaGuardada). A resposta que não volta aparece com um
   aviso e a caixa "Quero responder de novo"; sem a caixa (.campo-mantido), os controles da pergunta somem e só ficam o
   rótulo e o aviso. O aviso usa as mesmas cores do texto de apoio (contraste medido no alto deste arquivo).
   ============================================================================================ */
.campo-guardado {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--tinta-3);
  border-radius: var(--raio-campo);
  background: var(--creme);
}
.campo-guardado-texto {
  font-size: max(13px, 0.82rem);
  color: var(--tinta-2);
}
.campo-guardado-escolha {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinta);
}
.campo-guardado-escolha input {
  width: 20px;
  height: 20px;
  min-width: 20px;
  accent-color: var(--verde);
  cursor: pointer;
}
.campo-mantido > :not(legend):not(.campo-rotulo):not(.campo-tema):not(.campo-guardado) {
  display: none !important;
}
.tela-final-area {
  color: var(--tinta-2);
}

/* ============================================================================================
   A ÁREA DA PESSOA E AS VAGAS ABERTAS (tarefa r52, area.js). Os cartões são brancos sobre o fundo escuro da página,
   como o resto: texto em --tinta e --tinta-2 (15,10:1 e 7,26:1 sobre branco), destaque em --verde (letra branca sobre
   ele passa; ver o alto deste arquivo). Nada anima. Todo alvo de toque tem 44 px ou mais (.botao já tem 48).
   ============================================================================================ */
#area-pessoa {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* o display do id vence o [hidden] do navegador (mesma armadilha do .campo-msg-erro acima): sem esta linha, "hidden" na
   área não a escondia e ela ficava por cima do formulário de atualizar (achado por P21) */
#area-pessoa[hidden] {
  display: none;
}
/* sem conteúdo (antes do area.js montar), o vazio não abre um vão acima do formulário */
#area-pessoa:not(:empty) {
  margin: 1.5rem 0;
}
.area-cartao {
  background: var(--branco);
  color: var(--tinta);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}
.area-cartao-titulo {
  font-size: 1.15rem;
  font-weight: 700;
}
.area-apoio {
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}
.area-lista {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.area-vaga {
  border: 1.5px solid #d8ddd9;
  border-radius: var(--raio-campo);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}
.area-vaga-titulo {
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.area-vaga-empresa {
  font-weight: 600;
  color: var(--verde);
}
.area-vaga-texto {
  color: var(--tinta-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.area-ja-candidatou {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--verde);
}
.area-slot:empty {
  display: none;
}
/* o aviso tem ícone e texto (nunca só cor): verde para o que deu certo, vermelho-texto (5,10:1) para o que falhou */
.area-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--raio-campo);
  background: var(--creme);
  color: var(--tinta);
  border: 1.5px solid var(--verde);
  font-weight: 600;
}
.area-aviso svg {
  flex: none;
  margin-top: 0.15rem;
}
.area-aviso-ok svg {
  color: var(--verde);
}
.area-aviso-erro {
  border-color: var(--vermelho-texto);
}
.area-aviso-erro svg {
  color: var(--vermelho-texto);
}
.area-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.area-acoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .area-acoes {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
/* "Voltar", "Sair" e "Cancelar" dentro do cartão branco: o fundo claro do botão secundário some no branco, então
   ele ganha um contorno (a borda tem contraste de 4,9:1 com o cartão) */
.area-cartao .botao-secundario,
.area-topo .botao-secundario {
  border: 1.5px solid var(--tinta-3);
}
.area-topo .botao-secundario {
  background: var(--claro);
}
.botao-perigo {
  background: var(--vermelho-texto);
  color: var(--branco);
}
.botao-perigo:hover:not(:disabled) {
  filter: brightness(1.08);
}
.botao-perigo-contorno {
  background: var(--branco);
  color: var(--vermelho-texto);
  border: 2px solid var(--vermelho-texto);
}
.botao-perigo-contorno[hidden] {
  display: none;
}
.area-confirmacao {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 2px solid var(--vermelho-texto);
  border-radius: var(--raio-campo);
}
/* a área aberta: título e frase da entrada sobre o fundo escuro, o botão Sair ao lado */
.area-topo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--claro);
}
.area-topo-texto {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.area-titulo {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
}
.area-sessao {
  color: var(--claro-2);
}
@media (min-width: 640px) {
  .area-topo {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.area-etapas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.area-etapa {
  border: 1.5px solid #d8ddd9;
  border-radius: var(--raio-campo);
  padding: 0 1rem;
}
.area-etapa summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  cursor: pointer;
}
/* o flex do summary apaga o triângulo do navegador: a seta é desenhada aqui, e gira quando abre (sem animação) */
.area-etapa summary::-webkit-details-marker {
  display: none;
}
.area-etapa summary::before {
  content: "\25B8";
  margin-right: 0.6rem;
  color: var(--tinta-2);
}
.area-etapa[open] > summary::before {
  transform: rotate(90deg);
}
.area-etapa[open] {
  padding-bottom: 0.75rem;
}
.area-linhas {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--tinta-2);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.area-linha-rotulo {
  font-weight: 600;
  color: var(--tinta);
}
.area-linha-titulo {
  font-weight: 700;
  color: var(--tinta);
  margin-top: 0.4rem;
}
.area-curriculo-nome {
  overflow-wrap: anywhere;
}
/* o campo de arquivo herda os 44 px de .campo-input; o botão nativo dele ganha uma folga da palavra que vem depois */
#area-curriculo::file-selector-button {
  margin-right: 0.75rem;
  min-height: 32px;
  border-radius: var(--raio-pilula);
  border: 1.5px solid var(--tinta-3);
  background: var(--claro);
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  padding: 0 0.9rem;
  cursor: pointer;
}

/* ============================================================================================
   A ADMISSÃO NA ÁREA (tarefa r53, area.js): o cartão "Documentos da admissão" e a lista dos documentos. Celular primeiro:
   a pessoa fotografa o documento e manda dali mesmo, então tudo nasce em UMA coluna, todo alvo de toque tem 44 px ou mais
   (o campo de arquivo herda os 44 de .campo-input, o "Tirar" tem 44 de altura mínima) e nenhum estado depende só de cor: cada
   situação tem ícone e palavra. Os tons são os mesmos do resto da página, sobre branco: --verde (conferido), --vermelho-texto
   (mandar de novo, 5,10:1) e --tinta-2 (falta e esperando, 7,26:1). Nada anima.
   ============================================================================================ */
.adm-bloco {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.adm-bloco:empty {
  display: none;
}
.adm-resumo {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--tinta);
}
.adm-resumo svg {
  flex: none;
  margin-top: 0.15rem;
}
.adm-resumo-ok {
  color: var(--verde);
}
.adm-docs {
  gap: 1rem;
}
.adm-doc {
  align-items: stretch;
}
.adm-doc-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}
.adm-doc-nome {
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  min-width: 0;
}
.adm-doc-tag {
  font-size: max(13px, 0.8rem);
  font-weight: 600;
  color: var(--tinta-2);
}
.adm-estado {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  min-height: 32px;
  padding: 0.2rem 0.75rem;
  border-radius: var(--raio-pilula);
  border: 1.5px solid currentColor;
  background: var(--branco);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--tinta-2);
}
.adm-estado-conferido {
  color: var(--verde);
}
.adm-estado-refazer {
  color: var(--vermelho-texto);
}
.adm-motivo {
  padding: 0.6rem 0.8rem;
  border-radius: var(--raio-campo);
  background: var(--creme);
  border: 1.5px solid var(--vermelho-texto);
  color: var(--tinta);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.adm-arquivos {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.adm-arquivo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--raio-campo);
  background: var(--creme);
  min-width: 0;
}
.adm-arquivo-nome {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.adm-arquivo-info {
  font-size: max(13px, 0.8rem);
  color: var(--tinta-2);
}
.adm-tirar {
  min-height: 44px;
  margin-top: 0.4rem;
}
.adm-mandando {
  font-weight: 600;
  color: var(--tinta-2);
}
.adm-mandando:empty {
  display: none;
}
.adm-input::file-selector-button {
  margin-right: 0.75rem;
  min-height: 32px;
  border-radius: var(--raio-pilula);
  border: 1.5px solid var(--tinta-3);
  background: var(--claro);
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  padding: 0 0.9rem;
  cursor: pointer;
}