/* ===========================================================================
   Identidade visual do site institucional — enerwatt.com.br
   ---------------------------------------------------------------------------
   Cores e tipografia amostradas do site em 17/08/2026, com o navegador aberto
   nele: não é aproximação de memória nem paleta "parecida". As duas famílias
   são as mesmas que o site carrega (Poppins nos títulos, Roboto no corpo).

   As fontes ficam AQUI DENTRO, e não no Google Fonts, por três razões: a área
   do RH roda em rede interna e pode não ter saída para a internet; fonte que
   não carrega derruba a hierarquia da página inteira para o fallback; e um
   `link` para CDN de terceiro numa tela que exibe documento pessoal é uma
   requisição a mais contando quem abriu a página e quando.
   =========================================================================== */

@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fontes/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fontes/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fontes/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fontes/roboto-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fontes/roboto-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fontes/roboto-700.woff2') format('woff2');
}

:root {
  /* Fundo e superfícies — do site: #f8fafc no corpo, branco nos blocos. */
  --bg: #f8fafc;
  --card: #ffffff;

  /* Texto. O site usa #333 no corpo e #324059 (azul-ardósia) nos títulos. Esse
     azul é o que dá a cara institucional: cinza puro no lugar dele faz a página
     parecer um formulário genérico. */
  --texto: #333333;
  --titulo: #324059;
  --suave: #61728c;
  --borda: #e3e8ef;

  /* AÇÃO. O site usa o laranja claro (#ff7f41) nos botões e o laranja forte
     (#fd5200) na marca e nos rótulos de seção. São duas laranjas de propósito:
     mantém "confirmar" e "logotipo" distinguíveis, que era o motivo de o verde
     existir aqui antes — a separação continua, agora com as cores da casa. */
  --acento: #cc4a06;
  --acento-escuro: #a83c05;
  /* O laranja EXATO do site, para superfície e não para texto: preenchimento
     de barra, borda de destaque, faixa. Em botão com rótulo branco ele dá
     2,51:1 e reprova em WCAG AA — e este formulário é onde alguém confirma o
     próprio CPF. A família é a mesma; o que muda é o tom que carrega texto. */
  --acento-site: #ff7f41;
  --acento-claro: #fff1e9;

  /* MARCA. Régua do cabeçalho e superfícies — é a cor do logotipo e não muda.
     Régua de 3px é decoração: regra de contraste não se aplica a ela. */
  --marca: #fd5200;
  /* A mesma marca quando CARREGA TEXTO. #fd5200 sobre branco dá 3,29:1 e
     reprova em AA nos tamanhos que usamos (rótulo de 12px, pílula de 11,5px —
     negrito pequeno não conta como texto grande). Um passo mais fechado, 5,30:1. */
  --marca-texto: #c23d00;

  /* Teal secundário do site — usado com parcimônia, em selo de estado positivo. */
  --apoio: #005e63;
  --apoio-claro: #e4f1f1;

  --erro: #a12c2c;
  --erro-claro: #fbecec;
  --alerta: #8a5a00;
  --alerta-claro: #fdf4e2;

  --display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corpo: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --raio: 10px;
  --raio-botao: 5px;          /* o site usa 5px nos botões */
  --sombra: 0 1px 2px rgba(50, 64, 89, .05), 0 10px 28px -18px rgba(50, 64, 89, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font: 16px/1.6 var(--corpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, legend {
  font-family: var(--display);
  color: var(--titulo);
  letter-spacing: -.01em;
}

/* Pular para o conteúdo (WCAG 2.4.1).
   Fora da tela até receber foco — e não `display:none`, que o tiraria da ordem
   de tabulação e o tornaria inútil. Aparece no primeiro Tab da página. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--card);
  color: var(--marca-texto);
  border: 2px solid var(--acento);
  border-radius: 0 0 var(--raio-botao) 0;
  font: 600 15px/1.4 var(--corpo);
  text-decoration: none;
}
.pular:focus { left: 0; }

/* O alvo do salto recebe foco por script (`tabindex="-1"`), e o navegador
   desenha o anel nele. Sem isto o `<main>` inteiro ganharia contorno a cada
   pulo, que é ruído — o que importa é o foco ter ido para lá. */
main:focus { outline: none; }

/* Foco visível em tudo que recebe teclado (WCAG 2.4.7). O padrão do navegador
   some sobre superfície clara em alguns temas; este não some. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* Rótulo de seção do site: laranja, maiúsculas, Poppins 700, pequeno. Vem ANTES
   do título e é o que dá o ritmo editorial das páginas da Enerwatt. */
.rotulo-secao {
  display: block;
  font: 700 12px/1.4 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marca-texto);
  margin-bottom: 6px;
}

/* Cabeçalho branco: a logomarca é laranja sobre transparente e não sobrevive a
   um fundo colorido. A régua inferior traz a cor da marca sem disputar com ela. */
.cabecalho {
  background: #fff;
  color: var(--texto);
  border-bottom: 3px solid var(--marca);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 1px 0 rgba(50, 64, 89, .04);
}
.cabecalho .logo {
  height: 42px;
  width: auto;
  display: block;
  flex: none;
}
.cabecalho .titulos { min-width: 0; }
.cabecalho h1 {
  margin: 0;
  font: 600 17px/1.3 var(--display);
  color: var(--titulo);
  letter-spacing: -.005em;
}
.cabecalho p  { margin: 2px 0 0; font-size: 13px; color: var(--suave); }
.cabecalho .etapa {
  margin-left: auto;
  font: 700 11.5px/1.6 var(--display);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--marca-texto);
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: 3px 12px;
  white-space: nowrap;
}


main { max-width: 760px; margin: 28px auto 64px; padding: 0 20px; }

.cartao {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
  margin-bottom: 20px;
}
.cartao h2 { margin: 0 0 4px; font-size: 18px; }
.cartao .sub { margin: 0 0 20px; color: var(--suave); font-size: 14px; }

.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.campo .dica { display: block; font-weight: 400; color: var(--suave); font-size: 12.5px; margin-top: 3px; }

/* A lista é por TIPO, e por isso ela erra calada: um tipo que falte aqui não
   quebra nada — o campo simplesmente sai com o desenho de fábrica do navegador,
   mais estreito, com outra borda e outra fonte, ao lado dos campos certos.
   Foi o que aconteceu com a senha do login do RH (`type=password`) e com as
   duas datas do ASO (`type=date`): estavam fora da lista aqui embaixo e
   DENTRO da regra de celular lá no fim do arquivo, que já as citava.
   Ao acrescentar um tipo novo numa tela, acrescente nos dois lugares. */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: inherit;
}
/* Altura IGUAL para todo controle de uma linha.
   Sem isto, `input[type=date]` sai 2px mais alto que os vizinhos: o Chrome
   desenha o botão do calendário DENTRO do campo, e a caixa cresce para caber.
   Dois pixels não se notam num campo sozinho — notam-se no ASO, onde "Data do
   exame" e "Clínica" dividem a mesma linha da grade e ficam desalinhados.
   `1.5em` acompanha o corpo do texto (no celular a fonte sobe para 16px), e os
   22px são os 10+10 de recuo mais as duas bordas. `textarea` fica de fora de
   propósito: ela cresce com o conteúdo. */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], select {
  line-height: 1.5;
  height: calc(1.5em + 22px);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}
input[readonly] { background: #f2f4f7; color: var(--suave); }

input[type=file] {
  width: 100%;
  padding: 9px;
  border: 1px dashed var(--borda);
  border-radius: 8px;
  background: #fbfcfd;
  font-size: 14px;
}

/* Botão do site: laranja, cantos de 5px, rótulo pesado. O tom é um passo mais
   fechado que o do site — ver a nota em `--acento-site`. */
button {
  background: var(--acento);
  color: #fff;
  border: 0;
  border-radius: var(--raio-botao);
  padding: 12px 22px;
  font: 700 15px/1.4 var(--corpo);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .15s ease;
}
button:hover:not(:disabled) { background: var(--acento-escuro); }
button:disabled { opacity: .55; cursor: progress; }
button.secundario { background: #fff; color: var(--acento); border: 1px solid var(--acento); }

.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.aviso { padding: 12px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 18px; }
.aviso.ok    { background: var(--acento-claro); border: 1px solid #f6cdb6; color: var(--acento-escuro); }
.aviso.erro  { background: var(--erro-claro);   border: 1px solid #eec7c7; color: var(--erro); }
.aviso.alerta{ background: var(--alerta-claro); border: 1px solid #e8d3a3; color: var(--alerta); }
.aviso ul { margin: 6px 0 0 18px; padding: 0; }
/* O paragrafo que segue o titulo do aviso. Existia como `style="margin:8px 0 0"`
   repetido em quatro telas -- e atributo `style=` e o que obrigava a CSP a
   manter `'unsafe-inline'` em `style-src`. Aqui ele acompanha o `.aviso ul`
   acima, que ja era a regra da casa para o mesmo espacamento. */
.aviso p { margin: 6px 0 0; }

.grupo-complementar {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: 8px;
  padding: 16px 18px;
  margin-top: 20px;
  background: #fbfcfd;
}
.grupo-complementar h3 { margin: 0 0 4px; font-size: 15px; }
.grupo-complementar p  { margin: 0 0 14px; font-size: 13px; color: var(--suave); }

.tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--acento-claro);
  /* `--acento` sobre `--acento-claro` dá 4,18:1 e REPROVA em AA — e isto tem
     11,5px, que não é texto grande em regra nenhuma. Um passo mais fechado
     (o mesmo tom que `.aviso.ok` já usava sobre esta superfície): 5,74:1.
     Achado por `node web/confere-contraste.js`, não a olho. */
  color: var(--acento-escuro);
  margin-left: 6px;
}
.tag.baixa { background: var(--alerta-claro); color: var(--alerta); }

/* Escolha entre arquivo único e frente/verso, e o par de campos que ela revela. */
.faces { display: flex; gap: 16px; flex-wrap: wrap; margin: 2px 0 8px; }
.faces label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 400; color: var(--suave); cursor: pointer;
}
.par-faces { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.par-faces .dica { margin: 0 0 4px; }

/* Documento que aceita vários arquivos continua com o campo aberto depois de já
   ter recebido algum. Sem destaque, o campo vazio parece que o envio anterior se
   perdeu — e o candidato reenvia tudo por dúvida. */
.campo .ja-recebidos {
  margin: 2px 0 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--acento);
  background: var(--acento-claro);
  /* Mesmo par de `.tag`, mesma correção: 4,18:1 -> 5,74:1. */
  color: var(--acento-escuro);
  border-radius: 0 6px 6px 0;
}

.campo label.checkbox {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 400; cursor: pointer;
}
.campo label.checkbox input { margin-top: 3px; flex: none; }

a.etapa { text-decoration: none; }
a.etapa:hover { background: var(--marca); color: #fff; }

/* Painel: cartões de indicador e tabela de admissões. */
.indicadores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.indicador {
  background: var(--card);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--marca);
  border-radius: var(--raio);
  padding: 14px 16px;
}
.indicador .valor { font-size: 30px; font-weight: 700; line-height: 1.1; }
.indicador .rotulo { font-size: 12.5px; color: var(--suave); margin-top: 4px; }
.indicador .apoio { font-size: 12px; color: var(--suave); margin-top: 6px; }

table.dados { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dados th, table.dados td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda);
}
table.dados th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); }
table.dados td.num, table.dados th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rolagem { overflow-x: auto; }

/* A margem estava em `style="margin-top:..."` em cinco lugares, com 12, 14 e
   16px -- variacao de ajuste manual, nao de desenho. Uma so aqui, e o atributo
   inline some das telas. */
.rodape-nota { font-size: 12.5px; color: var(--suave); margin-top: 14px; }
.rodape-nota code { background: #eceff3; padding: 1px 5px; border-radius: 4px; }

/* Dica que se cola no bloco de cima, em vez de flutuar entre os dois. Era
   `nota.style.marginTop = '-6px'` no JS: a CSP nao bloqueia CSSOM, entao isto
   e arrumacao, nao seguranca -- mas espacamento em JavaScript e espacamento que
   ninguem encontra ao mexer no CSS. */
.dica.colada { margin-top: -6px; }

.oculto { display: none !important; }

fieldset { border: 0; padding: 0; margin: 0 0 8px; }
fieldset legend {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--suave);
  padding: 0; margin: 22px 0 12px; width: 100%;
  border-bottom: 1px solid var(--borda); padding-bottom: 6px;
}

/* Achados da conferência cruzada (nome do cadastro × documento, datas).
   Bloqueio e observação são coisas diferentes e precisam parecer diferentes:
   um impede a candidatura de seguir, o outro só pede atenção do conferente. */
.achados { margin-bottom: 18px; }
.achados ul { margin: 6px 0 0 18px; padding: 0; }
.achados li { margin-bottom: 4px; }
.achados .doc { font-weight: 600; }

/* Termo de tratamento de dados (LGPD). Texto corrido e legível, não caixa de
   letra miúda: um termo que ninguém lê não informa ninguém, e informar é a
   obrigação. O detalhamento fica atrás de um <details> para não empurrar os
   anexos para fora da tela. */
.termo { font-size: 14px; line-height: 1.55; margin-bottom: 12px; }
.termo p { margin: 0 0 10px; }
.termo-detalhe { margin-bottom: 14px; font-size: 13.5px; }
.termo-detalhe summary { cursor: pointer; color: var(--suave); }
.termo-detalhe h4 { margin: 12px 0 4px; font-size: 13.5px; }
.termo-detalhe ul { margin: 0 0 8px 18px; padding: 0; }
.termo-detalhe li { margin-bottom: 3px; }

/* Faixa "quem está logado", no cabeçalho das telas do RH. Discreta de
   propósito: é contexto, não comando. A tag aparece porque é ela que o RH
   procura na caixa de entrada depois. */
.sessao {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--suave); margin-left: 12px;
}
.sessao .sessao-nome { font-weight: 600; color: var(--texto); }
.sessao .sessao-tag {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  background: var(--fundo-suave, #eef1f4); border: 1px solid var(--borda);
  border-radius: 4px; padding: 1px 6px;
}
.sessao .sessao-sair {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--suave); text-decoration: underline; font-size: 13px;
}
.sessao .sessao-sair:hover { color: var(--texto); }

/* Quem assina a admissão. Substitui o dropdown de recrutador: informação,
   não escolha. */
.responsavel { margin: 4px 0 2px; }
.responsavel code {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  background: var(--fundo-suave, #eef1f4); border: 1px solid var(--borda);
  border-radius: 4px; padding: 1px 6px;
}

/* ===========================================================================
   TRILHA DO CANDIDATO — onde ele está no processo
   ---------------------------------------------------------------------------
   Os passos vêm de config/fluxo.json, servido em /api/fluxo. O CSS não sabe
   quantos são: `grid-auto-columns` divide o espaço por quantos vierem, para
   acrescentar uma etapa ao fluxo não exigir mexer em largura aqui.
   =========================================================================== */
.trilha {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
}
.trilha-passo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  position: relative;
  padding-top: 4px;
}
/* A régua que liga um passo ao seguinte. Desenhada com `::before` e não com
   borda do item: assim ela não aparece antes do primeiro nem depois do último,
   que é onde uma linha solta faz o passo parecer inacabado. */
.trilha-passo::before {
  content: "";
  position: absolute;
  top: 17px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--borda);
  z-index: 0;
}
.trilha-passo:first-child::before { display: none; }
.trilha-passo.concluido::before,
.trilha-passo.atual::before { background: var(--acento-site); }

.trilha-marca {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 13px/1 var(--display);
  background: var(--card);
  border: 2px solid var(--borda);
  color: var(--suave);
}
.trilha-passo.concluido .trilha-marca {
  background: var(--acento-escuro);
  border-color: var(--acento-escuro);
  color: #fff;
}
.trilha-passo.atual .trilha-marca {
  border-color: var(--acento);
  color: var(--acento-escuro);
  box-shadow: 0 0 0 4px var(--acento-claro);
}
.trilha-label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--suave);
  max-width: 12ch;
}
.trilha-passo.atual .trilha-label { color: var(--titulo); font-weight: 600; }

/* O cartão "o que se espera agora".
   Duas caras, e a diferença é a informação: quando depende do candidato ele
   precisa ser chamado à ação; quando não depende, precisa ser tranquilizado.
   Um estilo só para os dois casos transformaria "está tudo certo, aguarde" num
   alerta — e é justamente aí que a pessoa liga para o RH. */
.situacao {
  border-radius: var(--raio);
  padding: 18px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda);
  background: var(--card);
}
.situacao h2 { margin: 8px 0 6px; font-size: 17px; }
.situacao p  { margin: 0; font-size: 14px; color: var(--texto); }
.situacao-tag {
  display: inline-block;
  font: 700 11px/1.5 var(--display);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 2px 9px;
  border-radius: 20px;
}
.situacao.sua-vez { border-left-color: var(--acento-site); background: var(--acento-claro); }
.situacao.sua-vez .situacao-tag { background: var(--acento-escuro); color: #fff; }
.situacao.aguardando { border-left-color: var(--apoio); }
.situacao.aguardando .situacao-tag { background: var(--apoio-claro); color: var(--apoio); }

/* ===========================================================================
   ANEXOS — seletor de arquivo, câmera e o "+" de documento adicional
   =========================================================================== */

/* O par "escolher arquivo" + "usar a câmera". Em coluna no celular, porque é lá
   que os dois são usados de verdade e um botão de 44px de altura ao lado de um
   seletor de arquivo espremido não é alvo de toque, é sorteio. */
.entrada-arquivo {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  /* Âncora do input da câmera aqui embaixo. Sem ela, o `position:absolute` dele
     se prende ao canto da PÁGINA. */
  position: relative;
}
.entrada-arquivo input[type=file] { flex: 1 1 220px; min-width: 0; }
/* O input da câmera é acionado pelo botão ao lado; ele não aparece. Fora da
   tela em vez de `display:none` para o navegador ainda o considerar acionável —
   alguns ignoram `.click()` em campo com display nenhum.

   O SELETOR PRECISA SER ESTE, longo e feio, e a razão é medida.
   Escrito só como `.entrada-camera` (0,1,0), ele perdia `width` e `padding`
   para `input[type=file]` (0,1,1) lá em cima — que manda `width:100%` e
   `padding:9px`. O campo continuava invisível, porque `clip-path` recorta, e
   ocupava 1425x20 px ancorados no canto da página: em
   `documentos.html?token=…` de um cargo com quatro documentos de arquivo
   único, a largura de rolagem do documento ia a 1823 px numa janela de 1440 e
   a TELA INTEIRA do candidato rolava para o lado. Invisível não é o mesmo que
   sem tamanho. */
.entrada-arquivo input[type=file].entrada-camera {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.botao-camera {
  flex: none;
  background: #fff;
  color: var(--acento-escuro);
  border: 1px solid var(--acento);
  border-radius: var(--raio-botao);
  padding: 10px 14px;
  font: 600 14px/1.2 var(--corpo);
  min-height: 44px;               /* alvo de toque (WCAG 2.5.5) */
  white-space: nowrap;
}
.botao-camera:hover:not(:disabled) { background: var(--acento-claro); }
.arquivo-escolhido { flex-basis: 100%; margin-top: 2px; color: var(--apoio); }

/* "+ Acrescente mais um documento".
   Aparece depois de o primeiro arquivo ser escolhido: oferecido antes, ele é
   uma pergunta sobre algo que a pessoa ainda não fez. */
.mais-um {
  background: none;
  border: 1px dashed var(--acento);
  color: var(--acento-escuro);
  border-radius: var(--raio-botao);
  padding: 8px 14px;
  font: 600 13.5px/1.2 var(--corpo);
  min-height: 40px;
  margin-top: 6px;
}
.mais-um:hover:not(:disabled) { background: var(--acento-claro); }
.mais-um .ajuda-mais {
  font-weight: 400;
  color: var(--acento-escuro);
  margin-left: 6px;
}
.entrada-extra { margin-top: 10px; }
.entrada-extra .remover-extra {
  background: none;
  border: 0;
  color: var(--suave);
  text-decoration: underline;
  padding: 4px 0;
  font-size: 13px;
  min-height: 32px;
}

/* ===========================================================================
   PAINEL POR ESTÁGIOS — o que substituiu os e-mails internos
   =========================================================================== */
.estagios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
/* Cada cartão é um BOTÃO, não uma div clicável: teclado, leitor de tela e
   Enter funcionam de graça. Cartão clicável feito com div é a forma mais comum
   de uma tela inteira ficar inacessível sem ninguém notar. */
.estagio-cartao {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.estagio-cartao:hover { border-color: var(--acento); box-shadow: var(--sombra); }
.estagio-cartao[aria-pressed="true"] {
  border-top-color: var(--marca);
  border-color: var(--acento);
  background: var(--acento-claro);
}
.estagio-cartao .valor { font: 700 28px/1.1 var(--corpo); color: var(--titulo); }
.estagio-cartao .rotulo { font-size: 13px; margin-top: 4px; font-weight: 600; color: var(--texto); }
.estagio-cartao .apoio  { font-size: 12px; color: var(--suave); margin-top: 6px; }
/* De quem é a vez, em uma palavra. É o que separa "parado comigo" de "parado
   com o candidato" sem obrigar ninguém a decorar a ordem das etapas. */
.estagio-cartao .dono {
  display: inline-block;
  font: 700 10.5px/1.6 var(--display);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 1px 8px;
  border-radius: 20px;
  background: #eef1f4;
  /* `--suave` sobre este cinza dá 4,31:1 e REPROVA em AA — e a pílula tem
     10,5px, que não é texto grande em regra nenhuma. `--titulo` no mesmo lugar
     dá 8,29:1. Achado por `node web/confere-contraste.js`, não a olho. */
  color: var(--titulo);
  margin-bottom: 8px;
}
.estagio-cartao .dono.candidato { background: var(--alerta-claro); color: var(--alerta); }
.estagio-cartao .dono.recrutador { background: var(--acento-claro); color: var(--acento-escuro); }
.estagio-cartao .dono.sst { background: var(--apoio-claro); color: var(--apoio); }

/* Filtros do gerente. Grade fluida: quatro campos no monitor, um no celular,
   sem nenhum ponto de quebra escrito para isto. */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}
.filtros .campo { margin-bottom: 0; }

/* Barra de ação em lote: some quando nada está selecionado. */
.lote-barra {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--acento);
  background: var(--acento-claro);
  border-radius: 8px;
  margin-bottom: 14px;
}
.lote-barra .contagem { font-weight: 600; color: var(--acento-escuro); }
.lote-barra select { max-width: 260px; }

/* Selo de resultado do ASO. Três estados, três leituras — apto com restrição
   não pode parecer apto, porque a restrição decide alocação e EPI. */
.selo { display: inline-block; font: 600 12px/1.6 var(--corpo); padding: 1px 9px; border-radius: 20px; }
.selo.apto      { background: var(--apoio-claro); color: var(--apoio); }
.selo.restricao { background: var(--alerta-claro); color: var(--alerta); }
.selo.inapto    { background: var(--erro-claro);   color: var(--erro); }

/* Dias parados. Só ganha cor quando passa a merecer atenção: número colorido
   em tudo vira decoração, e ninguém procura o vermelho no meio de vermelhos. */
.dias { font-variant-numeric: tabular-nums; }
.dias.atencao { color: var(--alerta); font-weight: 600; }
.dias.critico { color: var(--erro);   font-weight: 700; }

/* ===========================================================================
   RESPONSIVO — computador, tablet e celular
   ---------------------------------------------------------------------------
   O projeto tinha um ponto de quebra só, em 560px, e nada entre ele e o
   monitor: no tablet, o painel do RH mostrava tabelas de nove colunas dentro de
   uma coluna de 760px, e a leitura acontecia por rolagem lateral. As telas do
   RH e as do candidato têm necessidades opostas de largura, e agora isso está
   escrito: `main.largo` (painéis) usa a tela toda; o formulário do candidato
   continua estreito, porque linha longa demais é ruim de ler em qualquer
   dispositivo.
   =========================================================================== */

/* Painéis: largura de trabalho, não de leitura. */
main.largo { max-width: 1280px; }

/* Tabela larga rola SOZINHA, dentro do próprio quadro, e nunca empurra a
   página. O -webkit-overflow-scrolling mantém o gesto natural no iOS. */
.rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  main.largo { max-width: 100%; }
}

/* --- TABLET ------------------------------------------------------------- */
@media (max-width: 900px) {
  .cabecalho { padding: 12px 18px; gap: 14px; }
  .cabecalho .etapa { margin-left: auto; }
  main { margin-top: 20px; }
  .indicadores { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .trilha-label { max-width: 10ch; }
}

/* --- CELULAR ------------------------------------------------------------ */
@media (max-width: 640px) {
  /* 16px é o mínimo que impede o iOS de dar zoom ao focar um campo — e o zoom
     automático desloca a página inteira, o que faz a pessoa perder o campo que
     acabou de tocar. */
  input[type=text], input[type=email], input[type=tel], input[type=date],
  input[type=password], select, textarea { font-size: 16px; }

  main { padding: 0 14px; margin: 18px auto 48px; }
  .cartao { padding: 18px 16px; }

  .cabecalho { padding: 12px 14px; gap: 10px; }
  .cabecalho .logo { height: 32px; }
  .cabecalho h1 { font-size: 16px; }
  .cabecalho .etapa { margin-left: 0; order: 3; width: 100%; text-align: center; }
  .sessao { order: 4; width: 100%; justify-content: center; margin-left: 0; }

  /* Alvos de toque (WCAG 2.5.5). Botão de 12px de altura funciona no mouse e
     falha no polegar — e este fluxo é usado no celular por quem está com o
     documento na mão. */
  button { min-height: 44px; padding: 12px 18px; width: 100%; }
  .acoes { flex-direction: column; }
  .acoes button { width: 100%; }
  .sessao .sessao-sair { min-height: 0; width: auto; padding: 0; }
  .estagio-cartao { width: 100%; }

  .par-faces { grid-template-columns: 1fr; }
  .entrada-arquivo { flex-direction: column; align-items: stretch; }
  .botao-camera { width: 100%; }

  .indicadores { grid-template-columns: 1fr 1fr; gap: 10px; }
  .indicador .valor { font-size: 24px; }
  .estagios { grid-template-columns: 1fr 1fr; }
  .estagio-cartao .valor { font-size: 24px; }

  /* A trilha vira lista vertical: quatro rótulos lado a lado em 360px cabem
     em duas letras cada, e passo cujo nome não se lê não situa ninguém. */
  .trilha { grid-auto-flow: row; gap: 10px; }
  .trilha-passo { flex-direction: row; align-items: center; gap: 10px; text-align: left; }
  .trilha-passo::before {
    left: 17px; top: -10px; width: 2px; height: 10px;
  }
  .trilha-label { max-width: none; }

  table.dados { font-size: 13px; }
  table.dados th, table.dados td { padding: 8px 8px; }
}

/* --- LINK EM DESTAQUE ---------------------------------------------------
   Os dois links que movem o processo — envio de documentos e conferência da
   ficha — moravam num rodapé cinza e numa navegação silenciosa. Aqui eles
   ganham a moldura de um cartão dentro do cartão: tarja, título, o ENDEREÇO
   POR EXTENSO e dois botões.

   O endereço fica visível de propósito. Link de acesso aos documentos de uma
   pessoa é credencial: quem repassa merece ver para onde aponta, e quem
   confere um ambiente precisa ler o host sem abrir o alvo. */
.link-destaque {
  border: 1px solid var(--acento);
  border-left: 4px solid var(--acento);
  border-radius: var(--raio);
  background: var(--acento-claro);
  padding: 16px 18px;
  margin: 18px 0 4px;
}
.link-destaque .rotulo-secao { color: var(--acento-escuro); }
.link-destaque .link-titulo {
  margin: 4px 0 2px;
  font: 700 16px/1.3 var(--display);
  color: var(--titulo);
}
.link-destaque .link-sub { margin: 0 0 12px; font-size: 13.5px; color: var(--texto); }

/* `break-all` e não `anywhere`: o token do link não tem separador nenhum, e
   sem isto ele estoura a largura do cartão no celular — a tela ganha rolagem
   horizontal e o botão "Copiar" sai de vista. */
.link-destaque .link-url {
  display: block;
  background: #fff;
  border: 1px solid #f6cdb6;
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 12px;
  font: 13px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color: var(--acento-escuro);
  word-break: break-all;
}
.link-destaque .acoes { margin-top: 0; }

/* Um `<a>` que precisa parecer botão. Existe porque "Abrir" é navegação de
   verdade — com Ctrl+clique, "abrir em nova aba" e endereço no rodapé do
   navegador —, e um `<button>` com `location.href` dentro perde as três. */
.botao-link {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  border-radius: var(--raio-botao);
  padding: 12px 22px;
  font: 700 15px/1.4 var(--corpo);
  text-decoration: none;
}
.botao-link:hover { background: var(--acento-escuro); text-decoration: none; }

/* --- AÇÕES DENTRO DA TABELA ---------------------------------------------
   A coluna "Ação" passou de um botão para até três (conferir, ficha em PDF,
   enviar ao ASO). Em tamanho normal eles empurrariam a tabela para a rolagem
   horizontal em qualquer tela. */
.acao-linha { display: flex; gap: 6px; flex-wrap: wrap; }
.acao-linha button, .acao-linha .botao-link {
  padding: 6px 10px;
  font: 600 12.5px/1.4 var(--corpo);
  border-radius: 4px;
}
.acao-linha .botao-link {
  background: #fff;
  color: var(--acento-escuro);
  border: 1px solid var(--acento);
}
.acao-linha .botao-link:hover { background: var(--acento-claro); }

/* --- FAIXA DE INTEGRAÇÃO PARADA -----------------------------------------
   Vermelha, no topo do painel, e larga: é a única coisa desta tela que fala
   sobre TODAS as admissões ao mesmo tempo.

   O que ela evita: uma admissão conferida, com ASO lançado e marcada como
   concluída que o RM nunca recebeu. Sem a faixa, o sintoma só aparecia na
   conferência da folha do mês — quando o prazo já passou.

   Não é `.aviso.erro` porque não é um erro DESTA tela: é um estado do sistema
   que persiste entre carregamentos, e por isso tem borda esquerda grossa (a
   mesma gramática de `.situacao`) em vez da caixa de mensagem. */
.faixa-parada {
  border: 1px solid #eec7c7;
  border-left: 5px solid var(--erro);
  border-radius: var(--raio);
  background: var(--erro-claro);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.faixa-parada .faixa-titulo {
  margin: 0 0 4px;
  font: 700 15px/1.35 var(--display);
  color: var(--erro);
}
.faixa-parada p { margin: 0; font-size: 13.5px; color: var(--erro); }
.faixa-parada ul { margin: 8px 0 0 18px; padding: 0; font-size: 13.5px; color: var(--erro); }
.faixa-parada li { margin-bottom: 3px; }

/* --- CELULAR ESTREITO --------------------------------------------------- */
@media (max-width: 400px) {
  .indicadores, .estagios { grid-template-columns: 1fr; }
}

/* Quem pediu menos movimento não recebe transição nenhuma (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Impressão: a ficha e o painel saem sem cabeçalho de navegação nem botões —
   é papel, e ali eles não fazem nada. */
@media print {
  .cabecalho .etapa, .sessao, .acoes, .pular, .lote-barra, button { display: none !important; }
  main { max-width: 100%; padding: 0; }
  .cartao { border: 0; padding: 0; }
}