/* ============================================================================
   SETOR 3 — Base visual da plataforma (vagas, área de talentos, admin)

   IDENTIDADE NOVA (manual de marca), a mesma do site institucional:
   terracota #903A27, café #432119, papel #FBF8F3, creme #E7DFCF, linho
   #B6A790; Fraunces (títulos), Red Hat Display (rótulos), Lato (corpo),
   IBM Plex Mono (números e códigos).

   SOBRE OS NOMES `--s3-vinho*`: são HISTÓRICOS. A plataforma nasceu na
   identidade antiga (vinho #823039 + DM Sans) e esses nomes ficaram
   espalhados por 15 telas. Trocar o VALOR e manter o NOME faz cada seletor
   virar terracota sozinho, sem risco de esquecer um — que é exatamente o
   que aconteceria numa renomeação manual em 15 arquivos. Quem ler "vinho"
   aqui deve entender "a cor da marca", que hoje é terracota.

   Os valores são COPIADOS de assets/css/tokens.css (o site), não escolhidos
   de novo: as duas metades do produto precisam ser a mesma marca, e valor
   ajustado a olho diverge na primeira revisão.
   ============================================================================ */

:root {
  /* a cor da marca (nome histórico) */
  --s3-vinho: #903A27;            /* TERRACOTA do manual */
  --s3-vinho-2: #903A27;
  --s3-vinho-hover: #7C3222;      /* terracota pressionada */
  --s3-vinho-profundo: #6E2B1D;   /* base do monograma */
  --s3-vinho-escuro: #4E1D13;

  --s3-carvao: #432119;           /* CAFÉ — era o carvão frio */
  --s3-texto: #432119;
  --s3-texto-suave: #5A3226;      /* café-suave, 10,3:1 no papel */
  --s3-texto-fraco: #7B6550;
  --s3-cinza-claro: #F2ECE4;      /* PAPEL do manual (o chão das telas) */
  --s3-cinza-card: #F7F3EC;       /* creme claro para blocos internos */
  --s3-borda: #D9CDBB;            /* line do manual */
  --s3-borda-input: #C9BAA4;
  --s3-branco: #FBF8F3;           /* branco-quente: branco puro brigava com o papel */
  --s3-branco-puro: #FFFFFF;      /* onde a folha precisa ser folha (impressão, tabela) */

  /* semânticas: mantidas legíveis, mas puxadas para o quente do manual */
  --s3-sucesso: #47603D;          /* sálvia escurecida, 5,6:1 no papel */
  --s3-sucesso-bg: #EAF0E6;
  --s3-erro: #A6432B;             /* TELHA — o vermelho da própria paleta */
  --s3-erro-bg: #F7E9E4;
  --s3-alerta: #8A6420;
  --s3-alerta-bg: #F6EEDD;
  --s3-info-bg: #EFE9E0;

  /* tipografia do manual, nas quatro funções */
  --s3-fonte: 'Lato', 'Segoe UI', system-ui, sans-serif;
  --s3-fonte-display: 'Fraunces', Georgia, serif;
  --s3-fonte-grotesca: 'Red Hat Display', system-ui, sans-serif;
  --s3-fonte-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --s3-radius: 12px;
  --s3-radius-botao: 18px;
  --s3-sombra: 0 2px 12px rgba(67, 33, 25, 0.09);
  --s3-sombra-forte: 0 8px 28px rgba(67, 33, 25, 0.16);
}

/* ---------------------------------------------------------- tipografia
   As quatro faces só valem se cada uma tiver função. Títulos em Fraunces
   (autoridade), rótulos e botões em Red Hat Display (ação), corpo em Lato
   (leitura longa), número e código em IBM Plex Mono (dado). */
body.s3-plataforma h1,
body.s3-plataforma h2,
body.s3-plataforma h3 {
  font-family: var(--s3-fonte-display);
  font-weight: 600;
  letter-spacing: -.01em;
}
body.s3-plataforma .s3-btn,
body.s3-plataforma label,
body.s3-plataforma th {
  font-family: var(--s3-fonte-grotesca);
}
/* dado tabular: e-mail, telefone, código, data e valor */
body.s3-plataforma .s3-mono,
body.s3-plataforma code,
body.s3-plataforma .s3-badge {
  font-family: var(--s3-fonte-mono);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.s3-plataforma {
  margin: 0;
  font-family: var(--s3-fonte);
  color: var(--s3-texto);
  /* PAPEL do manual (#FBF8F3), o mesmo chão do site. Antes usava o
     --s3-cinza-claro (#F2ECE4), que no manual é o tom de SEÇÃO — a área de
     talentos parecia mais rosada que o site porque era a cor certa aplicada
     no papel errado. */
  background: var(--s3-branco);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--s3-carvao); line-height: 1.3; margin: 0 0 0.5em; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--s3-vinho); }
img { max-width: 100%; }

/* ---------------------------------------------------------------- header */
.s3-topo {
  background: var(--s3-branco);
  border-bottom: 1px solid var(--s3-borda);
  position: sticky;
  top: 0;
  z-index: 50;
}
.s3-topo-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
/* o <img> saiu; o que fica é o componente vivo */
.s3-topo-logo .s3-logo,
.s3-topo-logo-area .s3-logo { text-decoration: none; }
.s3-topo-nav { display: flex; gap: 20px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.s3-topo-nav a {
  color: var(--s3-carvao);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.s3-topo-nav a:hover, .s3-topo-nav a.ativo { color: var(--s3-vinho); }
/* no celular, o link "Área de talentos" sai do topo das vagas: o botão
   "Minha candidatura" leva ao mesmo lugar, e os três não cabem numa linha */
@media (max-width: 480px) { .s3-topo-nav .s3-so-largo { display: none; } }

/* ---------------------------------------------------------------- footer */
.s3-rodape {
  background: var(--s3-carvao);
  color: rgba(251, 248, 243, .72);
  text-align: center;
  padding: 28px 20px;
  font-size: 12.5px;
  margin-top: 64px;
}
.s3-rodape a { color: rgba(251, 248, 243, .8); }

/* ---------------------------------------------------------------- layout */
.s3-container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.s3-container-estreito { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.s3-secao { padding: 40px 0; }

.s3-hero-interno {
  background: var(--s3-vinho);
  color: #fff;
  padding: 52px 20px;
  text-align: center;
}
.s3-hero-interno h1 { color: #fff; margin-bottom: 8px; }
.s3-hero-interno p { color: rgba(251, 248, 243, .88); max-width: 720px; margin: 0 auto; }
/* "Já se candidatou?" na abertura das vagas: a volta de quem já está no
   processo seletivo, sem disputar com a vaga (pedido do dono, 04/10/2026) */
.s3-hero-acompanhar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  margin-top: 22px; font-size: 15px; color: rgba(251, 248, 243, .88);
}

/* ---------------------------------------------------------------- cards */
.s3-card {
  background: var(--s3-branco);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-radius);
  box-shadow: var(--s3-sombra);
  padding: 28px;
  margin-bottom: 20px;
}
.s3-card h2:first-child, .s3-card h3:first-child { margin-top: 0; }
.s3-card-clicavel { transition: box-shadow 0.15s, transform 0.15s; cursor: pointer; text-decoration: none; color: inherit; display: block; }
.s3-card-clicavel:hover { box-shadow: var(--s3-sombra-forte); transform: translateY(-2px); }

/* ---------------------------------------------------------------- botões */
.s3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--s3-vinho);
  color: #fff !important;
  font-family: var(--s3-fonte);
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: var(--s3-radius-botao);
  min-height: 48px;
  padding: 12px 30px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.s3-btn:hover:not(:disabled) { background: var(--s3-vinho-hover); }
.s3-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.s3-btn-secundario {
  background: transparent;
  color: var(--s3-vinho) !important;
  border: 2px solid var(--s3-vinho);
}
.s3-btn-secundario:hover:not(:disabled) { background: var(--s3-vinho); color: #fff !important; }
.s3-btn-claro { background: #fff; color: var(--s3-vinho) !important; }
.s3-btn-claro:hover:not(:disabled) { background: var(--s3-laranja-clara, #F1E3DC); }
.s3-btn-perigo { background: var(--s3-erro); }
.s3-btn-perigo:hover:not(:disabled) { background: var(--s3-vinho-profundo); }
.s3-btn-sucesso { background: var(--s3-sucesso); }
.s3-btn-sucesso:hover:not(:disabled) { background: #3B5232; }
.s3-btn-pequeno { min-height: 36px; padding: 6px 18px; font-size: 13px; border-radius: 12px; }

/* ---------------------------------------------------------------- forms */
.s3-campo { margin-bottom: 18px; }
/* :not(.s3-opcao) — sem isso, esta regra vence a do cartao de opcao
   (especificidade .s3-campo label > .s3-opcao) e o cartao deixa de ser
   flexbox: o gap some e o texto fica em negrito. */
.s3-campo label:not(.s3-opcao) {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--s3-carvao);
  margin-bottom: 6px;
}
.s3-campo .s3-descricao { font-size: 12.5px; color: var(--s3-texto-suave); margin: -2px 0 8px; }
.s3-campo input[type="text"], .s3-campo input[type="email"], .s3-campo input[type="tel"],
.s3-campo input[type="password"], .s3-campo input[type="number"], .s3-campo input[type="url"],
.s3-campo input[type="time"], .s3-campo input[type="date"],
.s3-campo select, .s3-campo textarea {
  width: 100%;
  font-family: var(--s3-fonte);
  font-size: 15px;
  color: var(--s3-texto);
  background: #fff;
  border: 1px solid var(--s3-borda-input);
  border-radius: 8px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.s3-campo textarea { min-height: 120px; resize: vertical; }
.s3-campo input:focus, .s3-campo select:focus, .s3-campo textarea:focus {
  border-color: var(--s3-vinho);
  box-shadow: 0 0 0 3px rgba(130, 48, 57, 0.12);
}
.s3-campo .obrigatorio { color: var(--s3-vinho); }

/* opções tipo cartão (radio A/B/C/D — estilo do formulário atual) */
.s3-opcoes { display: flex; flex-direction: column; gap: 12px; }
/* Cartão de opção
   O controle é desenhado por nós (appearance:none): o rádio nativo tem tamanho
   e espaçamento diferentes em cada navegador/sistema, e era isso que deixava a
   bolinha colada no texto. Aqui o círculo, o vão e o alinhamento são exatos. */
.s3-opcao {
  --s3-controle: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #FAF6F0;
  border: 1.5px solid var(--s3-borda);
  border-radius: 12px;
  padding: 15px 18px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--s3-texto);
}
.s3-opcao:hover { border-color: var(--s3-borda-input); background: #F7EBE6; }

.s3-opcao input[type="radio"],
.s3-opcao input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: var(--s3-controle);
  height: var(--s3-controle);
  /* centraliza o círculo na PRIMEIRA linha do texto:
     (altura da linha 14.5px * 1.55 ≈ 22.5px  −  20px do círculo) / 2 ≈ 1px */
  margin: 1px 0 0;
  border: 2px solid var(--s3-borda-input);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.s3-opcao input[type="checkbox"] { border-radius: 6px; }

.s3-opcao:hover input { border-color: var(--s3-vinho); }

/* marcado: anel vinho, vão branco e ponto central — sem pseudo-elemento,
   para funcionar igual em todos os navegadores */
.s3-opcao input:checked {
  border-color: var(--s3-vinho);
  background-color: var(--s3-vinho);
  box-shadow: inset 0 0 0 4px #fff;
}
.s3-opcao input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(130, 48, 57, .18);
}
.s3-opcao input:checked:focus-visible {
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 4px rgba(130, 48, 57, .18);
}

.s3-opcao > span { flex: 1 1 auto; min-width: 0; padding-top: 0; }

.s3-opcao.selecionada {
  border-color: var(--s3-vinho);
  background: var(--s3-laranja-clara, #F1E3DC);
  box-shadow: 0 1px 3px rgba(130, 48, 57, .10);
}
.s3-opcao.selecionada > span { font-weight: 500; color: var(--s3-carvao); }
.s3-opcao:focus-within { border-color: var(--s3-vinho); }
.s3-opcao .s3-chave {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border: 1px solid var(--s3-borda-input);
  border-radius: 6px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--s3-carvao);
}
.s3-opcao.selecionada .s3-chave { background: var(--s3-vinho); border-color: var(--s3-vinho); color: #fff; }

/* upload */
.s3-upload {
  border: 2px dashed var(--s3-borda);
  border-radius: 10px;
  background: #FAF6F0;
  padding: 28px 20px;
  text-align: center;
  color: var(--s3-texto-suave);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.s3-upload:hover { border-color: var(--s3-vinho); }
.s3-upload input[type="file"] { display: none; }
.s3-arquivo-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--s3-cinza-card);
  border: 1px solid var(--s3-borda);
  border-radius: 8px;
  padding: 8px 14px;
  margin-top: 8px;
  font-size: 13px;
}
.s3-arquivo-item .remover { margin-left: auto; color: var(--s3-erro); cursor: pointer; background: none; border: none; font-size: 16px; }

/* ---------------------------------------------------------------- alerts */
.s3-alerta { border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; font-size: 14px; }
.s3-alerta-info { background: var(--s3-info-bg); color: #2C5566; border: 1px solid #D6E2E9; }
.s3-alerta-sucesso { background: var(--s3-sucesso-bg); color: var(--s3-sucesso); border: 1px solid #D3DFCB; }
.s3-alerta-erro { background: var(--s3-erro-bg); color: var(--s3-erro); border: 1px solid #EDD5CC; }
.s3-alerta-aviso { background: var(--s3-alerta-bg); color: var(--s3-alerta); border: 1px solid #E8D9B8; }

/* AÇÕES DENTRO DO ALERTA. Um erro que só descreve o problema deixa a pessoa
   parada — e na tela de entrar isso custa candidato, porque boa parte de quem
   erra ali ainda não tem conta e não sabe que devia criar uma.
   Os botões herdam a cor do alerta (`currentColor`) em vez de trazer a sua
   própria: assim servem ao alerta de erro, ao de aviso e ao de sucesso sem
   três variações, e nunca brigam com o fundo em que caíram. */
.s3-alerta__txt { margin: 0; }
.s3-alerta__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.s3-alerta__acao {
  font: inherit;
  font-weight: 700;
  color: currentColor;
  background: rgba(255, 255, 255, .55);
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.s3-alerta__acao:hover { background: #fff; }
.s3-alerta__acao:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .s3-alerta__acao { transition: none; } }

/* ---------------------------------------------------------------- badges */
.s3-badge {
  display: inline-block;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 12px;
  text-transform: uppercase;
}
.s3-badge-vinho { background: var(--s3-laranja-clara, #F1E3DC); color: var(--s3-vinho); }
.s3-badge-cinza { background: var(--s3-cinza-card); color: var(--s3-texto-suave); }
.s3-badge-sucesso { background: var(--s3-sucesso-bg); color: var(--s3-sucesso); }
.s3-badge-erro { background: var(--s3-erro-bg); color: var(--s3-erro); }
.s3-badge-alerta { background: var(--s3-alerta-bg); color: var(--s3-alerta); }
.s3-badge-info { background: var(--s3-info-bg); color: #2C5566; }

/* ------------------------------------------------- etapas (stepper/linha) */
.s3-etapas { display: flex; flex-direction: column; gap: 0; margin: 20px 0; }
.s3-etapa { display: flex; gap: 16px; position: relative; padding-bottom: 28px; }
.s3-etapa:last-child { padding-bottom: 0; }
.s3-etapa::before {
  content: '';
  position: absolute;
  left: 17px; top: 38px; bottom: 2px;
  width: 2px;
  background: var(--s3-borda);
}
.s3-etapa:last-child::before { display: none; }
.s3-etapa-icone {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--s3-cinza-card);
  color: var(--s3-texto-suave);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  z-index: 1;
}
.s3-etapa.em-andamento .s3-etapa-icone { background: var(--s3-vinho); color: #fff; box-shadow: 0 0 0 5px rgba(130,48,57,0.15); }
.s3-etapa.aprovada .s3-etapa-icone { background: var(--s3-sucesso); color: #fff; }
.s3-etapa.reprovada .s3-etapa-icone { background: var(--s3-erro); color: #fff; }
.s3-etapa-corpo h4 { margin: 6px 0 4px; }
.s3-etapa-corpo .s3-etapa-meta { font-size: 12.5px; color: var(--s3-texto-fraco); }

/* ---------------------------------------------------------------- tabela */
.s3-tabela-wrap { overflow-x: auto; }
.s3-tabela { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.s3-tabela th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--s3-texto-suave);
  border-bottom: 2px solid var(--s3-borda);
  padding: 10px 14px;
  white-space: nowrap;
}
.s3-tabela td { padding: 12px 14px; border-bottom: 1px solid var(--s3-borda); vertical-align: middle; }
.s3-tabela tr:hover td { background: #F7F3EC; }

/* ---------------------------------------------------------------- avatar */
.s3-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--s3-cinza-card);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--s3-texto-suave); font-weight: 700;
  overflow: hidden;
  flex: 0 0 auto;
}
.s3-avatar-grande { width: 96px; height: 96px; font-size: 28px; }

/* ---------------------------------------------------------------- modal */
.s3-modal-fundo {
  position: fixed; inset: 0;
  background: rgba(39, 42, 47, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 100;
}
.s3-modal {
  background: #fff;
  border-radius: var(--s3-radius);
  box-shadow: var(--s3-sombra-forte);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
}
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- misc */
.s3-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.s3-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s3-flex { display: flex; gap: 12px; align-items: center; }
.s3-flex-entre { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.s3-centro { text-align: center; }
.s3-mt-0 { margin-top: 0; } .s3-mt-16 { margin-top: 16px; } .s3-mt-24 { margin-top: 24px; } .s3-mt-32 { margin-top: 32px; }
.s3-texto-suave-c { color: var(--s3-texto-suave); }
.s3-texto-pequeno { font-size: 13px; }
.s3-progresso { height: 8px; background: var(--s3-borda); border-radius: 999px; overflow: hidden; }
.s3-progresso > span { display: block; height: 100%; background: var(--s3-vinho); border-radius: 999px; transition: width 0.3s; }

.s3-carregando { text-align: center; color: var(--s3-texto-fraco); padding: 48px 0; }
.s3-carregando::after { content: '…'; animation: s3pontos 1.2s infinite; }
@keyframes s3pontos { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }

/* timer do teste */
.s3-timer {
  position: sticky; top: 76px;
  z-index: 40;
  background: var(--s3-carvao);
  color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700;
  box-shadow: var(--s3-sombra);
}
.s3-timer.urgente { background: var(--s3-erro); }

@media (max-width: 720px) {
  .s3-grid-2, .s3-grid-3 { grid-template-columns: 1fr; }
  .s3-card { padding: 20px; }
  .s3-topo-inner { flex-wrap: wrap; gap: 10px; }
  .s3-topo-nav { gap: 14px; }
}

/* ---------------------------------------------- tela "confirme seu e-mail" */
.confirmar-icone {
  display: flex;
  justify-content: center;
  color: var(--s3-vinho);
  margin-bottom: 14px;
}
.confirmar-endereco {
  display: inline-block;
  margin-top: 6px;
  background: var(--s3-laranja-clara, #F1E3DC);
  color: var(--s3-vinho);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 15px;
  word-break: break-all;
}

/* -------------------------------------------- prazo do processo (dias úteis) */
.cand-prazo {
  background: #FAF6F0;
  border: 1px solid var(--s3-borda);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0 18px;
}
.prazo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.prazo-rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--s3-texto-suave);
}
.prazo-data { font-size: 14.5px; color: var(--s3-carvao); }
.prazo-barra {
  height: 6px;
  background: var(--s3-cinza-card);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.prazo-barra > span {
  display: block;
  height: 100%;
  background: var(--s3-vinho);
  border-radius: 999px;
  transition: width .4s ease;
}
.prazo-restante { font-size: 13.5px; color: var(--s3-texto); }
.prazo-calma { display: block; margin-top: 4px; font-size: 12.5px; color: var(--s3-texto-suave); }
.cand-prazo--atencao { background: var(--s3-alerta-bg); border-color: #E8D9B8; }
.cand-prazo--atencao .prazo-barra > span { background: var(--s3-alerta); }
.cand-prazo--fim { background: var(--s3-info-bg); border-color: #D6E2E9; }
.cand-prazo--fim .prazo-barra > span { background: #2C5566; }


/* ============================================================================
   IDENTIDADE DE CADA AMBIENTE
   O painel administrativo e a area de talentos usam a mesma base visual, e
   isso confundia. Agora o admin tem barra escura e etiqueta propria; a area
   de talentos, barra branca com etiqueta clara. Da para saber onde se esta
   sem ler nada.
   ========================================================================== */

/* ------------------------------------------------- painel administrativo */
.s3-topo--admin {
  background: var(--s3-carvao);
  border-bottom: 3px solid var(--s3-vinho);
}
.s3-topo--admin .s3-topo-nav a { color: rgba(251, 248, 243, .82); }
.s3-topo--admin .s3-topo-nav a:hover,
.s3-topo--admin .s3-topo-nav a.ativo { color: #fff; }
.s3-topo--admin .s3-topo-nav a.ativo { border-bottom: 2px solid var(--s3-vinho); padding-bottom: 2px; }
/* A barra do admin é café. O logo já tem variante negativa própria
   (.s3-logo--claro), então some o filtro que pintava o PNG de branco —
   filtro sobre imagem chapava o relevo do símbolo, que é parte da marca. */
.s3-topo--admin .s3-topo-logo-area { display: inline-flex; align-items: center; gap: 10px; }
.s3-topo--admin .s3-header-sair { color: rgba(251, 248, 243, .82); }
.s3-topo--admin .s3-header-sair:hover { color: #fff; }

.s3-topo-logo-area { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.s3-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--s3-vinho);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
}
.s3-admin-badge::before {
  content: '';
  width: 9px; height: 9px;
  background: currentColor;
  -webkit-mask: var(--icone-cadeado) center / contain no-repeat;
  mask: var(--icone-cadeado) center / contain no-repeat;
}

/* --------------------------------------------------- area de talentos */
.s3-talento-badge {
  display: inline-block;
  background: var(--s3-laranja-clara, #F1E3DC);
  color: var(--s3-vinho);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* ------------------------------------- acesso discreto ao painel (cadeado) */
:root {
  --icone-cadeado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0z'/%3E%3C/svg%3E");
}

.acesso-restrito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: currentColor;
  opacity: .28;
  transition: opacity .18s, background-color .18s;
  text-decoration: none;
}
.acesso-restrito::before {
  content: '';
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: var(--icone-cadeado) center / contain no-repeat;
  mask: var(--icone-cadeado) center / contain no-repeat;
}
.acesso-restrito:hover,
.acesso-restrito:focus-visible {
  opacity: .85;
  background: rgba(255, 255, 255, .08);
}
.acesso-restrito:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* Contador de pedidos de acesso aguardando decisao (menu do painel) */
.s3-nav-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--s3-vinho);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}



/* ------------------------------------------- cores literais, normalizadas
   A troca de paleta mexeu nos TOKENS; onde o CSS tinha hex CRU nada mudou, e
   eram esses que destoavam: lavagens do VINHO antigo (rosadas, de outro
   matiz), cinzas FRIOS contra o papel morno, e semânticas soltas que não
   usavam os tokens. Cada uma foi para o PAPEL equivalente do manual — não
   para "uma cor parecida", que foi justamente o que produziu a mistura. */

/* ================================= NAVEGAÇÃO DO ADMIN EM DOIS GRUPOS
   As classes existiam no admin.js e o estilo nunca foi escrito: os links
   ficavam colados ("PainelVagasChamadosEquipe") e os rótulos dos grupos não
   apareciam. O agrupamento É a informação — recrutamento e marketing são
   trabalhos distintos, feitos por pessoas distintas —, então cada grupo ganha
   rótulo e uma divisória. */
.s3-topo-nav--grupos {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px);
  flex-wrap: wrap;
}
.s3-nav-grupo {
  display: flex; align-items: center; gap: 3px;
  padding-left: clamp(12px, 1.6vw, 22px);
  border-left: 1px solid rgba(251, 248, 243, .18);
}
.s3-nav-grupo:first-child { padding-left: 0; border-left: none; }
.s3-nav-grupo__rot {
  font-family: var(--s3-fonte-mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251, 248, 243, .5);
  margin-right: 7px; white-space: nowrap;
}
.s3-topo-nav--grupos a {
  padding: 6px 9px; border-radius: 7px; white-space: nowrap;
  transition: background var(--s3-tempo, 200ms) ease;
}
.s3-topo-nav--grupos a:hover { background: rgba(251, 248, 243, .1); }

@media (max-width: 1100px) {
  /* o rótulo do grupo é o primeiro a ceder: os itens continuam agrupados
     pela divisória, que já diz onde um termina e o outro começa */
  .s3-nav-grupo__rot { display: none; }
}
@media (max-width: 860px) {
  .s3-topo-nav--grupos { gap: 10px; }
  .s3-nav-grupo { padding-left: 10px; }
  .s3-topo-nav--grupos a { padding: 5px 7px; font-size: 13px; }
}


/* ============================ CABEÇALHO DO ADMIN EM DUAS LINHAS
   Dez itens de menu, dois rótulos de grupo e o "Sair" não cabem numa fileira.
   A quebra já acontecia — só que por acidente, com o logo boiando no meio da
   altura. Aqui ela vira DESENHO, no mesmo padrão de duas linhas do cabeçalho
   do site: em cima a marca e a saída, embaixo a navegação. */
.s3-topo--admin .s3-topo-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "marca . sair" "nav nav nav";
  align-items: center;
  row-gap: 10px;
  padding-bottom: 10px;
}
.s3-topo--admin .s3-topo-logo-area { grid-area: marca; }
.s3-topo--admin .s3-topo-nav       { grid-area: nav; }
.s3-topo--admin .s3-header-sair    { grid-area: sair; }

/* a navegação ganha a linha inteira: some o empurrão para a direita e os
   grupos se distribuem a partir da esquerda, alinhados com a marca */
.s3-topo--admin .s3-topo-nav--grupos {
  /* zera o `margin-left: auto` do .s3-topo-nav: ele serve ao layout de UMA
     linha (marca à esquerda, menu à direita) e está certo lá, mas aqui a
     navegação ocupa a linha inteira e o auto a desalinhava da marca. */
  margin-left: 0;
  justify-content: flex-start;
  padding-top: 10px;
  border-top: 1px solid rgba(251, 248, 243, .12);
}
/* o "Sair" sai de dentro da navegação e vai para a primeira linha */
.s3-topo--admin .s3-topo-nav--grupos .s3-header-sair { display: none; }

@media (max-width: 640px) {
  .s3-topo--admin .s3-topo-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "marca sair" "nav nav";
  }
  .s3-topo--admin .s3-topo-nav--grupos { gap: 8px; }
}

/* ===========================================================================
   MOSTRAR SENHA (senha-olho.js)

   O invólucro é criado pelo JavaScript em volta de cada input[type=password];
   as páginas não têm marcação nova. Ele só existe para ancorar o botão, então
   não altera largura nem espaçamento: o campo continua ocupando a linha
   inteira e o .s3-campo continua sendo quem dá o espaço de baixo.

   O recuo à direita do campo é o que impede a senha de correr por baixo do
   olho — e é maior do que o botão porque senha longa com o cursor no fim
   encostaria nele.
   =========================================================================== */
.s3-senha { position: relative; display: block; }
.s3-senha input[type="password"],
.s3-senha input[type="text"] { padding-right: 46px; }

.s3-senha__olho {
  position: absolute; top: 0; right: 0;
  height: 100%; width: 42px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--s3-texto-suave);
  cursor: pointer;
  border-radius: 0 8px 8px 0;    /* acompanha o raio do campo */
  transition: color 0.15s;
}
.s3-senha__olho:hover { color: var(--s3-vinho); }
.s3-senha__olho[aria-pressed="true"] { color: var(--s3-vinho); }
.s3-senha__olho:focus-visible {
  outline: 2px solid var(--s3-vinho); outline-offset: -2px;
}
.s3-senha__olho svg { display: block; }

/* Alguns navegadores põem o próprio botão de revelar senha (Edge/IE) ou de
   limpar; com o nosso ao lado ficariam dois. */
.s3-senha input::-ms-reveal,
.s3-senha input::-ms-clear { display: none; }

/* ---------------------------------------------------------------- diálogo
   O cartão de confirmar/perguntar da plataforma (assets/js/dialogo.js), no
   lugar de window.confirm, prompt e alert — que são desenhados pelo
   navegador, com a tipografia e os botões DELE, e anunciados como
   "setor3contabilidade.pages.dev diz".

   Mesmas decisões do diálogo de exclusão do talento: o cartão recorta a
   rolagem (overflow hidden) para a barra não pintar por cima do canto
   arredondado, e quem rola é o corpo, não o <dialog>. */
.s3-dlg {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  padding: 0;
  border: 0;
  border-radius: var(--s3-radius);
  background: var(--s3-branco);
  color: var(--s3-texto);
  box-shadow: var(--s3-sombra-forte);
  overflow: hidden;
}
.s3-dlg::backdrop { background: rgba(67, 33, 25, .55); }
.s3-dlg__corpo {
  padding: 26px 28px 22px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--s3-texto-fraco) transparent;
}
.s3-dlg__corpo::-webkit-scrollbar { width: 11px; }
.s3-dlg__corpo::-webkit-scrollbar-track { background: transparent; }
.s3-dlg__corpo::-webkit-scrollbar-thumb {
  background: var(--s3-texto-fraco);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.s3-dlg__titulo {
  font-family: var(--s3-fonte-display);
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--s3-carvao);
}
.s3-dlg__texto p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--s3-texto-suave);
}
.s3-dlg__texto p:last-child { margin-bottom: 0; }
/* a linha que diz o que não volta: no vermelho da paleta, e só ela */
.s3-dlg__texto .s3-dlg__perigo { color: var(--s3-erro); font-weight: 700; }
.s3-dlg__campo { margin: 18px 0 0; }
.s3-dlg__dica { display: block; font-size: 12.5px; color: var(--s3-texto-suave); margin: -2px 0 8px; }
.s3-dlg__mono { font-family: var(--s3-fonte-mono); letter-spacing: .08em; }
.s3-dlg__erro { margin: 12px 0 0; font-size: 13px; color: var(--s3-erro); }
.s3-dlg__acoes {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  margin-top: 22px;
}
/* No celular os botões ocupam a linha inteira, na ordem em que se lê: a ação
   principal embaixo, ao alcance do polegar. */
@media (max-width: 480px) {
  .s3-dlg__corpo { padding: 22px 18px 18px; }
  .s3-dlg__acoes { flex-direction: column-reverse; }
  .s3-dlg__acoes .s3-btn { width: 100%; }
}

/* grupo de escolhas dentro do diálogo: "o que deve ser apagado" e afins.
   O <label> envolve a caixa e o texto, então a linha inteira é alvo de
   clique — alvo pequeno é o defeito mais comum de lista assim no celular. */
.s3-dlg__opcoes { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.s3-dlg__opcoes legend {
  padding: 0; margin-bottom: 6px;
  font-family: var(--s3-fonte-grotesca); font-size: 14px; font-weight: 700;
  color: var(--s3-carvao);
}
.s3-dlg__opcao {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent;
}
.s3-dlg__opcao:hover { background: var(--s3-cinza-card); }
.s3-dlg__opcao input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--s3-vinho); }
.s3-dlg__opcao strong { display: block; font-size: 14.5px; font-weight: 700; }
.s3-dlg__opcao-desc { display: block; font-size: 12.5px; color: var(--s3-texto-suave); margin-top: 2px; }

/* ------------------------------------------------ aviso de cota de e-mail
   Topo de toda tela do painel quando um limite do plano gratuito do Resend
   passa do ponto de alerta (admin.js + email-cota.js). Aviso = âmbar e pode
   ser dispensado na sessão; crítico = telha e não pode. */
.s3-cota-aviso {
  display: flex; gap: 18px; align-items: flex-start; justify-content: space-between;
  margin: 0 0 20px; padding: 14px 18px; border-radius: 10px;
  border: 1px solid #E8D9B8; border-left-width: 4px;
  background: var(--s3-alerta-bg); color: var(--s3-alerta);
}
.s3-cota-aviso--critico { background: var(--s3-erro-bg); color: var(--s3-erro); border-color: #EDD5CC; border-left-color: var(--s3-erro); }
.s3-cota-aviso--aviso { border-left-color: var(--s3-alerta); }
.s3-cota-aviso__tit { margin: 0 0 4px; font-weight: 700; font-size: 14.5px; }
.s3-cota-aviso__mais { font-weight: 400; font-size: 12.5px; opacity: .85; margin-left: 6px; }
.s3-cota-aviso__txt, .s3-cota-aviso__acao { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--s3-texto); }
.s3-cota-aviso__acao { margin-top: 6px; }
.s3-cota-aviso__lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.s3-cota-aviso__link { font-weight: 700; font-size: 13.5px; color: currentColor; white-space: nowrap; }
.s3-cota-aviso__fechar {
  font: inherit; font-size: 12.5px; background: none; border: 0; padding: 0;
  color: var(--s3-texto-fraco); cursor: pointer; text-decoration: underline;
}
@media (max-width: 720px) {
  .s3-cota-aviso { flex-direction: column; gap: 10px; }
  .s3-cota-aviso__lado { flex-direction: row; align-items: center; gap: 16px; }
}

/* ------------------------------------------------ a faixa "voltar ao site"
   Nas páginas de Vagas e da Área de talentos, que usam o cabeçalho da
   plataforma e não o do site: quem chegou pelo "Trabalhe conosco" ficava sem
   caminho de volta além do botão do navegador — o logo leva à página
   inicial, mas nada na tela dizia isso. A faixa diz. No celular, só a volta;
   os atalhos do site ficam para a tela larga. */
.s3-volta-site { background: var(--s3-carvao); color: #F4EFE8; }
.s3-volta-site__in {
  max-width: 1140px; margin: 0 auto; padding: 0 20px; min-height: 38px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--s3-fonte-grotesca); font-size: 13px;
}
.s3-volta-site a { color: inherit; text-decoration: none; }
.s3-volta-site__voltar { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-height: 38px; }
.s3-volta-site__voltar svg { flex: 0 0 auto; }
.s3-volta-site a:hover { text-decoration: underline; text-underline-offset: 3px; }
.s3-volta-site a:focus-visible { outline: 2px solid #F4EFE8; outline-offset: 2px; border-radius: 3px; }
.s3-volta-site__links { display: flex; align-items: center; gap: 20px; }
.s3-volta-site__links a { opacity: .85; }
/* o WhatsApp é o canal da casa: aparece inteiro, e fica também no celular */
.s3-volta-site__links a.s3-volta-site__zap { opacity: 1; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
@media (max-width: 640px) { .s3-volta-site__links a:not(.s3-volta-site__zap) { display: none; } }

/* ------------------------------------------------------ a pasta da vaga
   Cabeçalho comum às quatro abas da vaga (admin.js, pastaVaga): dados e
   publicação, roteiro da entrevista, agenda de entrevistas e candidaturas.
   Abas são links de página, não um widget: cada aba tem endereço próprio, o
   voltar do navegador funciona e o leitor de tela anuncia "página atual". */
.s3-pasta { margin-bottom: 22px; }
.s3-pasta__volta { margin: 0 0 10px; font-size: 14px; }
.s3-pasta__volta a { color: var(--s3-vinho); }
.s3-pasta__cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap; margin-bottom: 16px;
}
.s3-pasta__titulo h1 { margin: 0 0 8px; font-size: 27px; overflow-wrap: anywhere; }
.s3-pasta__selos { display: flex; gap: 8px; flex-wrap: wrap; }
.s3-abas-trilho { position: relative; }
.s3-abas-trilho::before, .s3-abas-trilho::after {
  content: ''; position: absolute; top: 0; bottom: 1.5px; width: 28px;
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.s3-abas-trilho::before { left: 0; background: linear-gradient(to right, var(--s3-branco), transparent); }
.s3-abas-trilho::after { right: 0; background: linear-gradient(to left, var(--s3-branco), transparent); }
.s3-abas-trilho--mais-esq::before, .s3-abas-trilho--mais-dir::after { opacity: 1; }
.s3-abas {
  display: flex; gap: 4px; border-bottom: 1.5px solid var(--s3-borda);
  overflow-x: auto; scrollbar-width: none;
}
.s3-abas::-webkit-scrollbar { display: none; }
.s3-abas__item {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; margin-bottom: -1.5px;
  font-family: var(--s3-fonte-grotesca); font-size: 14.5px; font-weight: 600;
  color: var(--s3-texto-suave); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.s3-abas__item:hover { color: var(--s3-vinho); }
.s3-abas__item[aria-current="page"] { color: var(--s3-vinho); border-bottom-color: var(--s3-vinho); }
.s3-abas__item[aria-disabled="true"] { color: var(--s3-texto-tenue, #B6A790); cursor: not-allowed; }
.s3-abas__item:focus-visible { outline: 2px solid var(--s3-vinho); outline-offset: -2px; border-radius: 6px; }

/* ------------------------------------------------ grade de horários
   A mesma peça para o talento escolher o horário e para a equipe marcar em
   nome dele: primeiro o dia, depois a hora. Horários sempre no fuso de
   Brasília, e a tela diz isso. */
.s3-horarios { display: grid; gap: 14px; }
.s3-horarios__dias {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr);
  gap: 8px; overflow-x: auto; padding-bottom: 4px;
}
.s3-horarios__dia, .s3-horarios__hora {
  font-family: var(--s3-fonte-grotesca); cursor: pointer;
  background: var(--s3-branco); border: 1.5px solid var(--s3-borda);
  border-radius: 12px; color: var(--s3-carvao);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.s3-horarios__dia {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 72px; padding: 8px 6px;
}
.s3-horarios__sem { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s3-texto-suave); }
.s3-horarios__num { font-size: 22px; font-weight: 700; line-height: 1.1; }
.s3-horarios__mes { font-size: 11.5px; color: var(--s3-texto-suave); }
.s3-horarios__qtd { font-size: 11px; color: var(--s3-texto-suave); }
.s3-horarios__horas { display: flex; flex-wrap: wrap; gap: 8px; }
.s3-horarios__hora { min-height: 44px; min-width: 84px; padding: 0 14px; font-size: 15px; font-weight: 600; }
.s3-horarios__dia:hover, .s3-horarios__hora:hover { border-color: var(--s3-vinho); }
.s3-horarios__dia[aria-pressed="true"], .s3-horarios__hora[aria-pressed="true"] {
  background: var(--s3-vinho); border-color: var(--s3-vinho); color: #fff;
}
.s3-horarios__dia[aria-pressed="true"] .s3-horarios__sem,
.s3-horarios__dia[aria-pressed="true"] .s3-horarios__mes,
.s3-horarios__dia[aria-pressed="true"] .s3-horarios__qtd { color: #fff; }
.s3-horarios__dia:focus-visible, .s3-horarios__hora:focus-visible { outline: 2px solid var(--s3-vinho); outline-offset: 2px; }
.s3-horarios__nota { font-size: 13px; color: var(--s3-texto-suave); margin: 0; }

/* O cartão do horário marcado: data grande, link e as ações ao lado. */
.s3-marcado {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  background: var(--s3-sucesso-bg); border: 1px solid rgba(0,0,0,.04); border-radius: 12px; padding: 14px 16px;
}
.s3-marcado__quando { font-family: var(--s3-fonte-grotesca); font-size: 17px; font-weight: 700; color: var(--s3-carvao); }
.s3-marcado__nota { font-size: 13px; color: var(--s3-texto-suave); margin-top: 2px; }
.s3-marcado__acoes { display: flex; flex-wrap: wrap; gap: 8px; }