/* painel/vagas.css — a área Vagas (spec 2026-09-10). Usa os tokens de `estilo.css`
   (--marca, --acento, --ok, --alerta, --perigo, --linha, --fundo, --suave-texto): a mesma
   paleta do resto do painel, para "verde" querer dizer a mesma coisa em toda tela. */

.vagas-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.vagas-topo h2 { margin: 0 12px 0 0; }
.vagas-numero { color: var(--suave-texto); font-size: 13px; white-space: nowrap; }
.vagas-numero b { font-size: 20px; color: var(--tinta); margin-right: 4px; }
.vagas-filtros { display: inline-flex; border: 1px solid var(--linha); border-radius: 999px; overflow: hidden; }
.vagas-filtros .filtro { border: 0; background: #fff; padding: 6px 14px; cursor: pointer; font: inherit; }
.vagas-filtros .filtro.ativo { background: var(--marca); color: #fff; }
.vagas-topo input.vagas-busca { width: 240px; flex: none; }
/* O painel dá `width: 100%` a select/input; aqui eles são controles de UMA linha. */
.vagas-topo select.vagas-ordem { width: auto; flex: none; }

.vagas-erro { min-height: 1.2em; }
.vagas-lista { display: flex; flex-direction: column; gap: 12px; }

/* o cartão */
/* O quadro da vaga como no Selecty (print do usuário, 10/09/2026): borda azul-clara, fundo
   que vai do branco a um azul bem leve, sombra suave. */
.vaga-cartao { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center;
  background: linear-gradient(90deg, #ffffff 0%, var(--gelo-hex) 100%); border: 1px solid rgba(0, 80, 144, .22);
  border-radius: var(--raio); padding: 16px 20px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 45, 95, .06); transition: border-color .15s ease, box-shadow .15s ease; }
.vaga-cartao:hover, .vaga-cartao:focus { border-color: var(--marca); box-shadow: 0 4px 16px rgba(0, 45, 95, .10); outline: none; }
.vaga-cartao.estado-concluida, .vaga-cartao.estado-cancelada,
.vaga-cartao.estado-parcialmente_fechada { opacity: .75; }
.vaga-cartao { grid-template-areas: "info etapas anel"; }
.vaga-esq { grid-area: info; min-width: 0; }
.vaga-etapas { grid-area: etapas; }
.vaga-anel { grid-area: anel; }
.vaga-cartao h3 { margin: 0; font-size: 18px; color: var(--marca); display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap; line-height: 1.3; }
/* O "Nº 12" ao lado do título vira o eyebrow do /cliente ("CADASTRO DE EMPRESA" sobre o
   título): dourado-texto, espaçado, caixa alta. Mesmas propriedades de .eyebrow em
   estilo.css — repetidas aqui porque o HTML não ganha classe nesta rodada. */
.vaga-cartao h3 .numero { font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--dourado-texto); }
.vaga-subtitulo { margin: 2px 0 10px; font-size: 16px; color: var(--suave-texto); line-height: 1.4; }
.vaga-quem { display: flex; gap: 14px; align-items: center; font-size: 18px; margin-bottom: 10px; flex-wrap: wrap;
  row-gap: 8px; line-height: 1.35; }
.vaga-quem small { color: var(--suave-texto); white-space: nowrap; }
/* Abaixo de 1280 px o texto não cabe ao lado das seis etapas + anel: etapas e anel descem para
   uma segunda linha em vez de esmagar a coluna da esquerda (medido em 1100 px). */
@media (max-width: 1280px) {
  .vaga-cartao { grid-template-columns: 1fr auto; grid-template-areas: "info info" "etapas anel"; row-gap: 14px; }
  .vaga-etapas { justify-self: start; }
  .vaga-anel { justify-self: end; }
}
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--marca); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.vaga-pedido { border-left: 1px solid var(--linha); padding-left: 14px; }
.selo-vaga-aberta { background: #ecfdf5; color: var(--ok); border-color: #a7f3d0; }
.selo-vaga-concluida { background: var(--gelo); color: var(--marca); }
.selo-vaga-cancelada { background: #fef2f2; color: var(--perigo); }
/* 02/10/2026: a pausa e o fechamento parcial. Aguardando é amarelo-pastel (como o selo
   "amarelo" dos blocos); a espera VENCIDA vira vermelho-pastel, a cor de "precisa de ação". */
.selo-vaga-aguardando { background: #fefce8; border-color: #fde68a; color: var(--alerta); }
.selo-vaga-aguardando.vencida { background: #fef2f2; border-color: #fecaca; color: var(--perigo); }
.selo-vaga-parcialmente_fechada { background: var(--gelo); color: var(--marca); }
.selo-confidencial { background: #fff7ed; border-color: #fed7aa; color: var(--alerta); margin-left: 6px; }
/* O tipo de requisição (D6): azul-pastel da marca — vermelho já é o Confidencial. */
.selo-requisicao { background: var(--gelo-forte-hex); border-color: var(--gelo-forte-hex); color: var(--marca); margin-left: 6px; }
.vaga-cartao .aviso { display: block; margin-top: 6px; font-size: 13px; }

/* as sete etapas — o ícone vive num CÍRCULO (pedido do usuário, 10/09/2026); o rótulo
   (data ou contagem) fica embaixo, fora dele. Aceso: círculo verde-pastel com borda e
   ícone verde-ESCURO (7,5:1). Apagado: círculo cinza-claro, ícone cinza. */
.vaga-etapas { display: flex; gap: 8px; align-items: flex-start; }
.vaga-etapas .etapa { border: 0; background: none; display: flex; flex-direction: column; align-items: center;
  gap: 4px; width: 64px; padding: 2px 0; cursor: default; font: inherit; color: var(--suave-texto); }
.vaga-etapas .etapa .glifo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fundo); border: 1.5px solid var(--linha); color: var(--suave); line-height: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.vaga-etapas .etapa .glifo svg { display: block; width: 24px; height: 24px; }
.vaga-etapas .etapa.acesa .glifo { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.vaga-etapas .etapa.acesa .glifo svg { stroke-width: 2.75; }
.vaga-etapas .etapa small { font-size: 14px; min-height: 14px; color: var(--suave-texto); line-height: 1.1; text-align: center; }
.vaga-etapas .etapa.acesa small { color: #065f46; font-weight: 600; }
/* 02/10/2026 (D2): os ícones não se clicam mais — sem cursor de mão nem realce no hover.
   As cores de "acesa" acima continuam valendo no cartão da lista e no topo da vaga. */

/* anel + prazo */
.vaga-anel { display: flex; align-items: center; gap: 10px; }
/* 01/10/2026 (pedido do usuário): anel 80px e texto 15px; o miolo branco cresceu na mesma
   proporção (50/64) e herda o tamanho — com 13px próprio, o 15px do .anel não apareceria. */
.anel { width: 80px; height: 80px; font-size: 15px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--marca) calc(var(--pct) * 1%), var(--linha) 0); }
.anel b { width: 62px; height: 62px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.prazo { font-size: 15px; font-weight: 600; max-width: 80px; line-height: 1.2; }
.prazo.verde { color: var(--ok); }
.prazo.ambar { color: var(--alerta); }
.prazo.vermelho { color: var(--perigo); }

/* a tela da vaga e o abrir vaga */
.vagas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 16px; }
.vagas-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.vagas-campo textarea { min-height: 70px; }
.vagas-participantes { list-style: none; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.vagas-confirma { margin-top: 8px; }
.vagas-inclusao:empty { display: none; }
#painel-vagas .cartao.largo { margin-bottom: 12px; }
@media (max-width: 900px) {
  .vaga-cartao { grid-template-columns: 1fr; grid-template-areas: "info" "etapas" "anel"; }
  .vaga-anel { justify-self: start; }
  .vaga-etapas { flex-wrap: wrap; }
}

/* ── a tela da vaga: blocos com estado, campos com estado (10/09/2026) ─────────────────
   Cores pastel semânticas. Nunca só a cor: o selo do cabeçalho e o check do campo dizem
   o que a cor quer dizer. */
#painel-vagas { --verde-pastel: #ecfdf5; --verde-borda: #a7f3d0; --amarelo-pastel: #fefce8;
  --amarelo-borda: #fde68a; }
#painel-vagas .bloco-vaga { padding: 18px 22px; transition: background-color .2s ease, border-color .2s ease; }
/* O card NÃO é pintado (pedido do usuário, 10/09/2026): a cor vai só no selo com o check e
   nos elementos preenchidos — assim o olho acha o que está feito, não um bloco inteiro. */
#painel-vagas .bloco-verde, #painel-vagas .bloco-amarelo { background: #fff; border-color: var(--linha); }
.bloco-cabecalho { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bloco-cabecalho h3 { margin: 0; font-size: 17px; }
.bloco-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.bloco-selo.verde { background: var(--verde-pastel); color: var(--ok); border-color: var(--verde-borda); }
.bloco-selo.amarelo { background: var(--amarelo-pastel); color: var(--alerta); border-color: var(--amarelo-borda); }
/* listas: o item que existe é o elemento preenchido — leva a cor do selo do bloco */
#painel-vagas .bloco-amarelo .vagas-participantes li { background: var(--amarelo-pastel); border-color: var(--amarelo-borda); }
.bloco-selo .check svg, .vagas-campo .check svg { width: 14px; height: 14px; stroke-width: 3; display: block; }
.bloco-acoes { margin: 0 0 10px; }

/* campos: fundo branco dentro do bloco colorido; preenchido = verde + check no rótulo */
.vagas-campo { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-controle); padding: 8px 10px;
  transition: background-color .2s ease, border-color .2s ease; }
.vagas-campo .rotulo { display: inline-flex; align-items: center; gap: 6px; color: var(--suave-texto); font-weight: 700; }
.vagas-campo .check { color: var(--ok); }
.vagas-campo.preenchido { background: var(--verde-pastel); border-color: var(--verde-borda); }
.vagas-campo.preenchido .rotulo { color: var(--ok); }
/* dentro do campo o controle não repete borda nem margem: a caixa é o `label` */
.vagas-campo input, .vagas-campo select, .vagas-campo textarea { margin: 0; width: 100%; border-radius: var(--raio-controle); }

/* textarea: estilo base em estilo.css desde 30/09/2026. */
#painel-vagas input, #painel-vagas select { min-height: 40px; }
#painel-vagas .vagas-grade { gap: 12px 14px; }

/* (02/10/2026) a tabela de candidatos e o seletor de etapa saíram: os candidatos vivem nas
   abas do modal da vaga (cartões, mais abaixo). */
button.reativar { background: #fff; border-color: var(--verde-borda); color: var(--ok); padding: 6px 12px; }
button.reativar:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
.vagas-inclusao .linha-form { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-controle);
  padding: 10px 12px; margin-bottom: 10px; }
.vagas-inclusao .linha-form input { margin: 0; }
#painel-vagas .discreto { border: 0; background: none; color: var(--marca); text-decoration: underline; padding: 6px 8px; }
#painel-vagas .vagas-participantes li { background: #fff; border: 1px solid var(--linha); border-radius: 999px;
  padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) { #painel-vagas * { transition: none !important; } }
/* selects que são UM controle da linha, não o campo inteiro */
.vagas-bloco-status select, .vagas-bloco-participantes select { width: auto; min-width: 240px; margin: 0; }
.vagas-bloco-status .linha-form input { flex: 1; min-width: 200px; margin: 0; }
.vagas-bloco-status .linha-form input[type="date"] { flex: none; min-width: 170px; width: auto; }
.vagas-bloco-status .linha-form { gap: 10px; }
.vagas-atualiza-status { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.vagas-pausa { margin: 0 0 12px; color: var(--alerta); }
.vagas-pausa.vencida { color: var(--perigo); }
/* O `hidden` dos campos que dependem da opção ("Atualizar status") vale mesmo quando uma
   regra do painel dá `display` ao controle. */
#painel-vagas [hidden] { display: none !important; }
.vaga-modal-finalizar select, .vaga-modal-finalizar textarea { width: 100%; margin: 0 0 10px; }

/* 01/10/2026 (pedido do usuário): tamanhos da área Vagas — subtítulo 16px, "quem" 18px,
   número das etapas 14px.
   ⚠️ `.meta` é regra GLOBAL do painel (`estilo.css`, 12.5px, usada em todas as abas e na
   barra do topo): o 15px vale SÓ dentro de #painel-vagas. */
#painel-vagas .meta { font-size: 18px; }   /* 02/10/2026, pedido do usuário (era 15px) */

/* ── o MODAL da vaga (spec 2026-10-02-vagas-modal-de-visualizacao) ──────────────────────
   Abrir a vaga é VER: um <dialog> por cima da lista, que continua desenhada atrás.
   ⚠️ O desfoque é `backdrop-filter` NO VÉU (`::backdrop`), nunca `filter` no conteúdo de
   baixo — a mesma regra (e o mesmo véu navy) do `.fundo-modal` do estilo.css. Paleta da
   Betel, pelos tokens; `--dourado` só como superfície (filete, barra, ícone), nunca texto. */
.vaga-ficha { padding: 0; border: 0; margin: auto; width: min(1400px, calc(100vw - 48px)); max-width: none;
  height: calc(100vh - 48px); max-height: calc(100vh - 48px); border-radius: var(--raio); overflow: hidden;
  background: var(--fundo); color: var(--tinta); box-shadow: 0 24px 60px rgba(10, 40, 80, .28); }
.vaga-ficha::backdrop { background: rgba(10, 30, 55, .42);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vaga-ficha::backdrop { background: rgba(10, 30, 55, .86); }
}
/* Entrada de 200ms (fade + leve subida) e troca de aba com fade de 150ms — só com
   movimento permitido (revisão visual de 02/10/2026). */
@media (prefers-reduced-motion: no-preference) {
  .vaga-ficha[open] { animation: ficha-entra .2s ease-out; }
  .vaga-ficha-corpo.entra { animation: ficha-aba .15s ease-out; }
}
@keyframes ficha-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ficha-aba { from { opacity: 0; } to { opacity: 1; } }
/* A página de trás não rola enquanto o modal está aberto. */
body:has(dialog.vaga-ficha[open]) { overflow: hidden; }
/* Cabeçalho e abas FIXOS no topo do modal; só o corpo rola. */
.vaga-ficha-caixa { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vaga-ficha-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 30px; overscroll-behavior: contain; }
.vaga-ficha .vagas-erro:empty { display: none; }
.vaga-ficha .rotulo-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }

.vaga-ficha-cabecalho { display: flex; align-items: center; gap: 14px; padding: 16px 20px 14px 26px; background: #fff;
  flex-wrap: wrap; }
.vaga-ficha-icone { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--gelo-forte-hex); color: var(--marca); }
.vaga-ficha-titulo { margin: 0; flex: 1 1 320px; min-width: 0; font-size: 22px; line-height: 1.3; color: var(--marca); }
.vaga-ficha-titulo .numero { font-size: 18px; font-weight: 700; color: var(--suave-texto); margin-right: 2px;
  font-variant-numeric: tabular-nums; }
/* O foco entra no título ao abrir (tabindex=-1): sem anel — ele não é controle. */
.vaga-ficha-titulo:focus { outline: none; }
.vaga-ficha-sub { color: var(--suave-texto); font-weight: 600; font-size: 18px; }
.vaga-ficha-selos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vaga-ficha-selos .selo { margin-left: 0; }
.vaga-ficha-fechar { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  flex: none; background: #fef2f2; border-color: #fecaca; color: var(--perigo); }
.vaga-ficha-fechar:hover { background: var(--perigo); border-color: var(--perigo); color: #fff; }
#painel-vagas .vaga-ficha-fechar:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }
.vaga-ficha-cabecalho .vaga-acoes { flex: none; }

/* as abas: azul; a ativa sublinhada em dourado (superfície) com o texto na cor da marca */
.vaga-ficha-abas { display: flex; align-items: center; gap: 2px; padding: 0 20px; background: #fff;
  border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: thin; }
#painel-vagas .vaga-ficha-aba { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none;
  padding: 13px 10px 11px; min-height: 48px; color: var(--marca-clara); font-weight: 700; font-size: 16px;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; box-shadow: none; }
#painel-vagas .vaga-ficha-aba:hover { color: var(--marca); border-bottom-color: var(--gelo-forte-hex); }
#painel-vagas .vaga-ficha-aba.ativa { color: var(--marca); border-bottom-color: var(--dourado); }
/* Anel por DENTRO: a barra rola de lado (overflow), e o anel de fora era cortado em cima e
   embaixo, sobrando duas riscas verticais (revisão visual de 02/10/2026). */
#painel-vagas .vaga-ficha-aba:focus-visible { outline: 2px solid var(--marca); outline-offset: -4px;
  border-radius: var(--raio-mini); }
.aba-numero { min-width: 26px; padding: 1px 8px; border-radius: 999px; font-size: 13px; text-align: center;
  background: var(--gelo-forte-hex); color: var(--marca); }
.vaga-ficha-aba.ativa .aba-numero { background: var(--marca); color: #fff; }
/* As abas de etapa em DUAS linhas (06/10/2026): nome em cima; embaixo o total de quem passou
   (desde 09/10/2026 só esse número). O número fica CENTRALIZADO sob o nome (27/10/2026,
   pedido do usuário: alinhado à esquerda parecia solto do nome da etapa). */
#painel-vagas .vaga-ficha-aba.aba-etapa { flex-direction: column; align-items: center; gap: 4px; padding-top: 9px; padding-bottom: 8px; }
.aba-numeros { display: inline-flex; gap: 4px; }
.aba-seta { color: var(--suave); line-height: 0; flex: none; }

/* Informações gerais: a faixa de dados (três colunas com ícone) e o botão Ações */
.vaga-ficha-aviso { margin: 0 0 12px; color: var(--alerta); }
.vaga-faixa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px 24px; box-shadow: 0 2px 10px rgba(0, 45, 95, .06); }
.faixa-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
.faixa-coluna { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.faixa-icone { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--gelo-forte-hex); color: var(--marca); }
.faixa-coluna dl { margin: 0; display: grid; gap: 10px; min-width: 0; }
/* O NOME do campo pesa mais que o valor (02/10/2026, pedido do usuário: "Responsável" tem de se
   destacar de "Ferramenta"): 15px negrito na cor da marca, sem caixa alta; o valor fica regular. */
.faixa-par dt { font-size: 15px; font-weight: 800; color: var(--marca); }
.faixa-par dd { margin: 2px 0 0; font-size: 17px; font-weight: 400; color: var(--tinta); overflow-wrap: anywhere; }
.vaga-acoes { position: relative; }
.vaga-acoes-botao { display: inline-flex; align-items: center; gap: 6px; }
.vaga-acoes-botao span { line-height: 0; }
.vaga-acoes-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 3; min-width: 250px; padding: 6px;
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linha);
  border-radius: var(--raio-controle); box-shadow: 0 12px 30px rgba(10, 40, 80, .18); }
#painel-vagas .vaga-acoes-menu button { border: 0; background: none; text-align: left; padding: 11px 12px;
  border-radius: var(--raio-mini); font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 10px; }
.menu-icone { line-height: 0; color: var(--marca); flex: none; }
.vaga-acoes-menu .separado { margin-top: 7px; position: relative; }
.vaga-acoes-menu .separado::before { content: ""; position: absolute; left: 6px; right: 6px; top: -4px;
  border-top: 1px solid var(--linha); }
#painel-vagas .vaga-acoes-menu button:hover, #painel-vagas .vaga-acoes-menu button:focus-visible {
  background: var(--gelo); color: var(--marca); }

/* os sete painéis: ícone grande sobre o gelo em cima, número + rótulo embaixo */
.vaga-paineis { display: grid; grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.vaga-painel { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: 0 2px 10px rgba(0, 45, 95, .06); }
.painel-icone { display: grid; place-items: center; padding: 20px 0; background: var(--gelo-forte-hex); color: var(--marca); }
.painel-icone svg { display: block; stroke-width: 1.6; }
.painel-numero { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 14px; text-align: center; }
.painel-numero b { font-size: 28px; line-height: 1.15; color: var(--tinta); font-variant-numeric: tabular-nums; }
/* A abertura é dado da VAGA, não do funil: fundo branco inteiro e um respiro a mais. */
.vaga-painel.painel-meta { margin-right: 10px; }
.painel-meta .painel-icone { background: #fff; border-bottom: 1px solid var(--linha); }
.painel-meta .painel-numero b { font-size: 22px; padding: 3px 0; }
.painel-numero span { font-size: 14px; font-weight: 600; color: var(--suave-texto); }

/* os dois mini gráficos (SVG à mão, `vaga_modal.js`). A cor de cada etapa é a MESMA nos dois
   e vem sempre com o rótulo escrito (legenda, pílula). Vermelho (--perigo) só para quem saiu. */
.vaga-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vaga-grafico { min-width: 0; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 18px 20px 20px; box-shadow: 0 2px 10px rgba(0, 45, 95, .06); }
.vaga-grafico h3 { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--dourado-texto); }
.faixa-em_selecao { --cor: var(--marca-clara); }
.faixa-entrevistado { --cor: var(--marca-clara); }
.faixa-encaminhado { --cor: var(--marca); }
.faixa-aprovado { --cor: var(--dourado); }
.faixa-contratado { --cor: var(--marinho); }
/* A atividade em TRÊS grupos, três cores que não se confundem (revisão visual de 02/10/2026). */
.serie-avancaram { --cor: var(--marca-clara); }
.serie-aprovados { --cor: var(--dourado); }
.serie-sairam { --cor: var(--perigo); }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: -4px 0 10px; }
#painel-vagas .legenda-item { border: 0; background: none; padding: 6px 2px; min-height: 32px; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); box-shadow: none; }
#painel-vagas .legenda-item.oculta { text-decoration: line-through; color: var(--suave-texto); }
.legenda-cor { width: 12px; height: 12px; border-radius: 3px; background: var(--cor); flex: none; }
.legenda-item.oculta .legenda-cor { opacity: .25; }
.grafico-corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.grafico-eixo-y { display: flex; flex-direction: column; justify-content: space-between; height: 180px;
  padding-top: 20px; box-sizing: border-box; font-size: 12px; line-height: 1; color: var(--suave-texto);
  text-align: right; font-variant-numeric: tabular-nums; }
.grafico-plano { position: relative; min-width: 0; }
/* Linhas de grade no topo útil, no meio e no chão (as barras começam 20px abaixo do topo,
   onde mora o número do dia). */
.grafico-barras { height: 180px; padding-top: 20px; box-sizing: border-box; border-bottom: 1px solid var(--suave);
  background: linear-gradient(var(--linha), var(--linha)) 0 20px / 100% 1px no-repeat,
              linear-gradient(var(--linha), var(--linha)) 0 calc(20px + (100% - 20px) / 2) / 100% 1px no-repeat; }
.grafico-area { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); height: calc(100% + 20px); margin-top: -20px; }
.grafico-coluna { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.grafico-valor { font-size: 12px; font-weight: 700; line-height: 20px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.grafico-pilha { width: min(70%, 30px); display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0;
  overflow: hidden; }
.grafico-pilha .barra { background: var(--cor); min-height: 3px; }
.grafico-pilha .barra + .barra { border-bottom: 1px solid #fff; }
.grafico-vazio-sobre { position: absolute; top: 72px; left: 0; right: 0; margin: 0; text-align: center; }
.grafico-vazio-sobre:empty { display: none; }
.grafico-eixo-x { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); margin-top: 6px; font-size: 11px;
  color: var(--suave-texto); text-align: center; font-variant-numeric: tabular-nums; }
/* O funil: centrado na vertical do cartão (que acompanha a altura do da atividade). */
.vaga-grafico-funil { display: flex; flex-direction: column; }
.vaga-grafico-funil .funil { margin: auto 0; }
.funil { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; margin-top: 6px; }
.funil-rotulos { display: flex; flex-direction: column; }
.funil-linha { height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.funil-linha b { min-width: 2ch; font-size: 19px; text-align: right; font-variant-numeric: tabular-nums; }
.pilula { padding: 4px 12px 4px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; background: var(--gelo-forte-hex); color: var(--marca); }
.pilula-cor { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); flex: none; }
.funil-taxas { display: flex; flex-direction: column; }
.funil-taxa { height: 40px; display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--suave-texto);
  font-variant-numeric: tabular-nums; }
/* A taxa de passagem cai ENTRE duas faixas: meio passo acima da linha a que se refere. */
.funil-taxa:not(:empty) { transform: translateY(-20px); }
.funil-taxa:not(:empty)::before { content: "↓"; margin-right: 4px; color: var(--suave); }
.funil-faixas svg { display: block; width: 100%; height: 200px; }
.funil-faixas .faixa { fill: var(--cor); }
.funil-faixas .faixa-em_selecao { fill: var(--marca-clara); fill-opacity: .45; }

/* as abas das etapas: "Total: N", "+ Incluir candidato" e os cartões (molde do Selecty) */
.vaga-aba-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; }
.vaga-aba-total { margin: 0; font-size: 17px; color: var(--suave-texto); }
.vaga-aba-total b { color: var(--tinta); }
.candidatos-divisor { margin: 10px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--suave-texto); display: flex; align-items: center; gap: 10px; }
.candidatos-divisor::after { content: ""; flex: 1; border-top: 1px dashed var(--linha); }
.candidatos-lista { display: flex; flex-direction: column; gap: 12px; }
.candidato-cartao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  background: #fff; border: 1px solid rgba(0, 80, 144, .22); border-radius: var(--raio); padding: 16px 20px;
  box-shadow: 0 2px 10px rgba(0, 45, 95, .06); }
.candidato-cartao .avatar { width: 54px; height: 54px; font-size: 18px; background: var(--gelo-forte-hex); color: var(--marca); }
.candidato-dados { min-width: 0; }
.candidato-cabeca { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.candidato-nome { font-size: 19px; font-weight: 800; color: var(--marca); overflow-wrap: anywhere; }
.candidato-cabeca .selo { margin-left: 0; }
.selo-origem { background: var(--gelo-forte-hex); border-color: transparent; color: var(--marca); }
.candidato-linha { margin: 4px 0 0; font-size: 15px; color: var(--suave-texto); }
.candidato-linha + .candidato-linha { margin-top: 2px; }
.candidato-motivo { margin: 4px 0 0; font-size: 15px; color: var(--tinta); }
.candidato-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.candidato-acoes button { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.candidato-acoes button span { line-height: 0; }
/* Avançar é SECUNDÁRIO: contorno na cor da marca (o primário da aba é o "+ Incluir"). */
#painel-vagas .candidato-avancar { border-color: var(--marca); color: var(--marca); background: #fff; }
#painel-vagas .candidato-avancar:hover { background: var(--gelo-forte-hex); }
/* Apagado SEM `opacity` (que baixaria o contraste do texto): fundo gelo, borda tracejada,
   nome e avatar em cinza — e o selo escreve o que aconteceu. */
.candidato-cartao.apagado { background: var(--gelo-hex); border-style: dashed; box-shadow: none; }
.candidato-cartao.apagado .candidato-nome { color: var(--suave-texto); }
.candidato-cartao.apagado .avatar { background: var(--linha); color: var(--suave-texto); }
.selo-candidato-reprovado, .selo-candidato-desistiu { background: #fef2f2; border-color: #fecaca; color: var(--perigo); }
/* a estrela (D5): contorno → amarelo. O dourado aqui é cor de ÍCONE, nunca de texto. */
.candidato-estrela { color: var(--suave); line-height: 0; }
#painel-vagas .candidato-estrela.redondo { width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; background: #fff; }
#painel-vagas .candidato-estrela.redondo:hover { border-color: var(--dourado); color: var(--dourado-texto); }
.candidato-estrela.marcada { color: var(--dourado); }
.candidato-estrela.marcada svg { fill: var(--dourado); }
#painel-vagas .candidato-estrela.marcada.redondo { border-color: var(--dourado); }
.candidato-reprovar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px dashed var(--linha); }
#painel-vagas .candidato-reprovar input { flex: 1 1 220px; width: auto; margin: 0; }
.escolha-reprovar { display: inline-flex; border: 1px solid var(--linha); border-radius: 999px; overflow: hidden; }
#painel-vagas .escolha-reprovar button { border: 0; border-radius: 0; min-height: 40px; padding: 6px 14px; background: #fff; }
#painel-vagas .escolha-reprovar button.ativo { background: var(--marca); color: #fff; }
.candidato-reprovar .erro { flex-basis: 100%; margin: 0; }
.candidato-reprovar .erro:empty { display: none; }

/* Ações → Editar e o "Alterar status" */
.vaga-ficha-voltar { margin: -6px 0 10px; }
.vaga-ficha .vagas-bloco-dados, .vaga-ficha .bloco-vaga { margin-bottom: 14px; }
.vaga-status-dialogo { width: 100%; max-width: min(780px, calc(100vw - 32px)); }
.vaga-status-dialogo::backdrop { background: rgba(10, 30, 55, .35); }
.vaga-status-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.vaga-status-topo h3 { margin: 0; }
#painel-vagas .vaga-status-dialogo .bloco-vaga { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
/* O título do diálogo já diz "Alterar status da vaga": o do bloco repetiria. O selo fica. */
.vaga-status-dialogo .bloco-cabecalho h3 { display: none; }
.vaga-status-dialogo .bloco-cabecalho:not(:has(.bloco-selo)) { display: none; }

@media (max-width: 1180px) {
  .vaga-paineis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vaga-painel.painel-meta { margin-right: 0; }
}
@media (max-width: 900px) {
  .vaga-faixa { grid-template-columns: 1fr; }
  .faixa-colunas { grid-template-columns: 1fr; }
  .vaga-graficos { grid-template-columns: 1fr; }
}
/* Celular: o modal é a tela inteira. */
@media (max-width: 640px) {
  .vaga-ficha { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .vaga-ficha-cabecalho { padding: 10px 10px 8px 16px; gap: 6px 8px; }
  .vaga-ficha-icone { display: none; }
  .vaga-ficha-titulo { font-size: 17px; flex-basis: 0; flex-grow: 1; }
  .vaga-ficha-titulo .numero { font-size: 15px; }
  .vaga-ficha-sub { font-size: 14px; display: block; }
  .vaga-ficha-sub .sep { display: none; }
  .vaga-ficha-selos { order: 4; flex-basis: 100%; }
  .vaga-ficha-selos .selo { font-size: 11px; }
  .vaga-ficha-cabecalho .vaga-acoes { order: 2; }
  .vaga-ficha-fechar { order: 3; }
  .vaga-acoes-botao { min-height: 44px; padding: 8px 12px; }
  .vaga-ficha-cabecalho .vaga-acoes-menu { right: -52px; left: auto; }
  .vaga-ficha-abas { padding: 0 8px; }
  #painel-vagas .vaga-ficha-aba { padding: 9px 8px 7px; min-height: 44px; font-size: 15px; }
  .vaga-ficha-corpo { padding: 16px; }
  .vaga-faixa { padding: 18px 16px; }
  /* Painéis compactos e horizontais no celular: ícone pequeno à esquerda, número à direita
     (eram 320px de altura cada, duas telas de rolagem). */
  .vaga-paineis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vaga-painel { flex-direction: row; align-items: stretch; }
  .vaga-painel.painel-meta { grid-column: 1 / -1; margin-right: 0; }
  .painel-icone { padding: 0 12px; }
  .painel-icone svg { width: 26px; height: 26px; }
  .painel-meta .painel-icone { border-bottom: 0; border-right: 1px solid var(--linha); }
  .painel-numero { align-items: flex-start; justify-content: center; padding: 10px 12px; text-align: left; }
  .painel-numero b { font-size: 22px; }
  .painel-meta .painel-numero b { font-size: 19px; padding: 0; }
  .painel-numero span { font-size: 13px; }
  .vaga-grafico { padding: 16px 14px; }
  .grafico-eixo-x span:nth-child(even) { visibility: hidden; }
  .candidato-cartao { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .candidato-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* O LOG da vaga (02/10/2026): botão discreto no cartão da lista e o diálogo cronológico. */
#painel-vagas .vaga-log-botao { align-self: flex-start; margin-top: 6px; padding: 4px 10px; min-height: 32px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--suave-texto); background: none; }
#painel-vagas .vaga-log-botao:hover { color: var(--marca); border-color: var(--marca); }
.vaga-log { width: 100%; max-width: min(820px, calc(100vw - 32px)); }
.vaga-log-corpo { max-height: min(70vh, 640px); overflow-y: auto; }
.vaga-log-lista { list-style: none; margin: 0; padding: 0; }
.vaga-log-lista li { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.vaga-log-lista li:last-child { border-bottom: 0; }
.vaga-log-cabeca { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 16px; }
.vaga-log-cabeca time { color: var(--suave-texto); font-variant-numeric: tabular-nums; }
.vaga-log-cabeca b { color: var(--marca); }
.vaga-log-detalhe { margin: 4px 0 0; font-size: 16px; color: var(--tinta); overflow-wrap: anywhere; }
.vaga-log-campo { font-weight: 700; }
.vaga-log-detalhe s { color: var(--suave-texto); }
/* A busca do LOG (05/10/2026): caixa + "N de M registros" numa linha; o <li> que não casa some. */
.vaga-log-filtro { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
#painel-vagas .vaga-log-filtro input { flex: 1 1 240px; width: auto; margin: 0; }
.vaga-log-filtro .vaga-log-meta { margin: 0; white-space: nowrap; }
.vaga-log-vazio { margin: 8px 0; }
.vaga-log-lista li[hidden] { display: none; }

/* O WhatsApp da aba "Em seleção" (02/10/2026). */
.vaga-aba-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
#painel-vagas .vaga-whatsapp-botao { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  border-color: var(--marca); color: var(--marca); background: #fff; }
#painel-vagas .vaga-whatsapp-botao span { line-height: 0; }
.vaga-disparo { width: 100%; max-width: min(640px, calc(100vw - 32px)); }
.vaga-disparo-resumo { margin: 4px 0 12px; padding-left: 20px; font-size: 16px; }
.vaga-disparo-resumo li + li { margin-top: 4px; }
.vaga-disparo .exemplo { white-space: pre-wrap; background: var(--gelo-hex); border-radius: var(--raio-mini);
  padding: 12px 14px; font: inherit; font-size: 15px; max-height: 220px; overflow-y: auto; }
.vaga-disparo .numeros-whatsapp { list-style: none; padding: 0; margin: 0 0 8px; }
.vaga-disparo .numeros-whatsapp li { padding: 6px 0; }
.vaga-log h3:focus, .vaga-disparo h3:focus { outline: none; }
#painel-vagas .vaga-disparo .numeros-whatsapp label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
#painel-vagas .vaga-disparo .numeros-whatsapp input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; }
.vaga-disparo .vaga-modal-escolha { flex-direction: row-reverse; justify-content: flex-start; }
#painel-vagas .vaga-whatsapp-botao[disabled] { border-color: var(--linha); color: var(--suave-texto); cursor: not-allowed; }
.vaga-sem-formulario { margin: -4px 0 12px; }

/* As confirmações do vínculo do formulário (05/10/2026): vincular, criar, desvincular. */
.vaga-confirma { width: 100%; max-width: min(560px, calc(100vw - 32px)); }
.vaga-confirma h3:focus { outline: none; }
.vaga-confirma-corpo { font-size: 17px; line-height: 1.5; margin: 0 0 12px; }
.vaga-confirma .erro:empty { display: none; }
.vaga-confirma .vaga-modal-escolha { flex-direction: row-reverse; justify-content: flex-start; }
.vaga-so-coordenacao { margin: 6px 0 0; }

/* "Informações da vaga" (05/10/2026): a ficha só-leitura dentro do modal. Mesma roupa da faixa
   de dados (cartão branco, borda --linha, nome do campo na cor da marca). */
.vaga-info-titulo { margin: 0 0 14px; font-size: 20px; color: var(--marca); }
.vaga-info { display: grid; gap: 14px; }
.vaga-info-bloco { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 22px;
  box-shadow: 0 2px 10px rgba(0, 45, 95, .06); }
.vaga-info-bloco h4 { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--marca); }
.vaga-info-bloco dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; }
.vaga-info-par dt { font-size: 15px; font-weight: 800; color: var(--marca); }
.vaga-info-par dd { margin: 2px 0 0; font-size: 17px; color: var(--tinta); overflow-wrap: anywhere; }
.vaga-info-par dd.vaga-info-texto { white-space: pre-wrap; }
/* Texto longo ocupa a linha inteira da grade. */
.vaga-info-par:has(dd.vaga-info-texto) { grid-column: 1 / -1; }
.vaga-info-lista { margin: 0; padding-left: 18px; }
.vaga-info-rodape { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

/* Imprimir SÓ a ficha de informações (05/10/2026): tudo do painel e o cromo do modal somem;
   fundo branco, texto --tinta, sem sombra, bloco não quebra no meio da página. */
@media print {
  body:has(.vaga-ficha[open] .vaga-info) { overflow: visible !important; background: #fff; }
  body:has(.vaga-ficha[open] .vaga-info) * { visibility: hidden; }
  body:has(.vaga-ficha[open] .vaga-info) .vaga-info,
  body:has(.vaga-ficha[open] .vaga-info) .vaga-info * { visibility: visible; }
  body:has(.vaga-ficha[open] .vaga-info) #painel-vagas .vagas-lista,
  body:has(.vaga-ficha[open] .vaga-info) #painel-vagas .vagas-topo { display: none; }
  body:has(.vaga-ficha[open] .vaga-info) .vaga-ficha { position: absolute; inset: 0 auto auto 0; width: 100%;
    height: auto; max-height: none; margin: 0; border-radius: 0; box-shadow: none; overflow: visible; background: #fff; }
  body:has(.vaga-ficha[open] .vaga-info) .vaga-ficha::backdrop { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body:has(.vaga-ficha[open] .vaga-info) .vaga-ficha-caixa,
  body:has(.vaga-ficha[open] .vaga-info) .vaga-ficha-corpo { display: block; height: auto; overflow: visible; padding: 0; }
  body:has(.vaga-ficha[open] .vaga-info) .vaga-ficha-cabecalho,
  body:has(.vaga-ficha[open] .vaga-info) .vaga-ficha-abas,
  body:has(.vaga-ficha[open] .vaga-info) .vaga-ficha-voltar,
  body:has(.vaga-ficha[open] .vaga-info) .vaga-info-rodape { display: none; }
  .vaga-info { color: var(--tinta); }
  .vaga-info-bloco { break-inside: avoid; box-shadow: none; }
}

/* ── a ficha do candidato (spec 2026-10-06) ─────────────────────────────────────────── */
.candidato-cartao.clicavel { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.candidato-cartao.clicavel:hover { border-color: var(--marca-clara); box-shadow: 0 4px 16px rgba(0, 45, 95, .12); }
#painel-vagas .candidato-nome-botao { background: none; border: 0; padding: 0; min-height: 0; margin: 0;
  font: inherit; font-size: 19px; font-weight: 800; color: var(--marca); text-align: left; cursor: pointer; }
#painel-vagas .candidato-nome-botao:hover { text-decoration: underline; }
#painel-vagas .candidato-nome-botao:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }
.candidato-cartao.apagado .candidato-nome-botao { color: var(--suave-texto); }
/* 09/10/2026 (pedido do usuário): a ficha era estreita (900 px) perto do modal da vaga
   (1400 px). Agora vai a 1200 px e, a partir de 1000 px, o Currículo vira duas colunas —
   Contato | Endereço e PCD | Currículo lado a lado; o resto (`bloco-largo`) ocupa a linha.
   ⚠️ `.vaga-modal.candidato-ficha`, NÃO só `.candidato-ficha`: o `vaga_form.css` carrega
   DEPOIS e tem `.vaga-modal { max-width: 560px }` com a mesma especificidade — ela vencia, e a
   ficha sempre saiu com 560 px (o 900 daqui nunca valeu). Medido no Chrome em 09/10/2026. */
.vaga-modal.candidato-ficha { width: 100%; max-width: min(1200px, calc(100vw - 32px)); }
.candidato-ficha-corpo { max-height: min(80vh, 860px); overflow-y: auto; }
@media (min-width: 1000px) {
  /* `dense`: o Currículo (depois de Experiências, que é largo) sobe para o lado do PCD em vez
     de deixar um buraco à direita dele. */
  .candidato-ficha-conteudo { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; align-items: stretch; }
  .candidato-ficha-conteudo > .candidato-ficha-cabeca, .candidato-ficha-conteudo > .bloco-largo,
  .candidato-ficha-conteudo > .candidato-obs-cartao { grid-column: 1 / -1; }
}
.candidato-ficha-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 16px; color: var(--tinta); }
.candidato-ficha-cabeca .selo { margin-left: 0; }
.candidato-ficha-bloco-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.candidato-ficha-bloco-topo h4 { margin-bottom: 12px; }
.candidato-ficha-quando { font-size: 14px; }
.candidato-ficha-anexo { margin: 8px 0 0; font-size: 17px; overflow-wrap: anywhere; }
.candidato-ficha-anexo a { color: var(--marca); font-weight: 700; }

/* ── quem AVANÇOU desta etapa (06/10/2026): verde-claro, só leitura ────────────────── */
.candidato-cartao.avancou { background: #ecfdf5; border-color: #a7f3d0; box-shadow: none; }
.candidato-cartao.avancou .avatar { background: #d1fae5; color: var(--ok); }
.selo.selo-avancou { background: #fff; border-color: #a7f3d0; color: var(--ok); }
.candidatos-divisor.divisor-avancaram { color: var(--ok); }

/* ── a ficha do candidato: Currículo | Histórico, observações (spec 2026-10-06-ficha-historico) ── */
.candidato-ficha-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  margin: 8px 0 14px; padding: 10px 12px; background: var(--gelo-hex); border-radius: var(--raio-controle); }
.candidato-ficha-modos { display: inline-flex; border: 1px solid var(--marca); border-radius: 999px; overflow: hidden; }
#painel-vagas .candidato-ficha-modo { border: 0; border-radius: 0; background: #fff; color: var(--marca); font-weight: 700;
  padding: 8px 18px; min-height: 40px; box-shadow: none; }
#painel-vagas .candidato-ficha-modo.ativo { background: var(--marca); color: #fff; }
#painel-vagas .candidato-obs-cartao { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  background: #fff; border: 2px dashed var(--marca-clara); border-radius: var(--raio); padding: 18px 22px; min-height: 0;
  box-shadow: none; color: var(--tinta); font-weight: 400; cursor: pointer; }
#painel-vagas .candidato-obs-cartao:hover { background: var(--gelo-hex); }
#painel-vagas .candidato-obs-cartao:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.candidato-obs-icone { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px dashed var(--marca-clara);
  display: inline-flex; align-items: center; justify-content: center; color: var(--marca-clara); }
.candidato-obs-conteudo { display: grid; gap: 4px; min-width: 0; }
.candidato-obs-titulo { color: var(--marca); font-size: 18px; font-weight: 700; }
.candidato-obs-previa { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; }
.candidato-historico-abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 16px; }
#painel-vagas .candidato-historico-aba { border: 1.5px solid var(--marca); border-radius: 999px; background: #fff;
  color: var(--marca); font-weight: 700; padding: 8px 22px; min-height: 42px; box-shadow: none; }
#painel-vagas .candidato-historico-aba.ativa { background: var(--marca); color: #fff; }
.historico-topo { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.historico-vazio { text-align: center; color: var(--marca); font-size: 18px; margin: 32px 0; }
.linha-do-tempo { list-style: none; margin: 0; padding: 0; }
.atividade { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding-bottom: 18px; position: relative; }
.atividade::before { content: ""; position: absolute; left: 160px; top: 8px; bottom: 0; border-left: 2px solid var(--linha); }
.atividade-quando { display: grid; gap: 2px; text-align: right; font-size: 15px; color: var(--tinta); }
.atividade-corpo { position: relative; padding-left: 22px; }
.atividade-corpo::before { content: ""; position: absolute; left: -3px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--marca-clara); }
.atividade-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.atividade-cabeca .atividade-apagar { margin-left: auto; }
.atividade-texto { margin: 0; padding: 14px 16px; background: var(--gelo-hex); border-radius: var(--raio-controle);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; color: var(--tinta); }
.selo.selo-marcador { background: #fff; border-color: var(--dourado); color: var(--dourado-texto); margin-left: 0; }
.marcador-tira { border: 0; background: none; padding: 0 0 0 6px; min-height: 0; color: inherit; cursor: pointer; }
.marcadores-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.campo-modal { display: grid; gap: 6px; margin: 0 0 14px; font-weight: 700; color: var(--marca); }
.campo-modal input, .campo-modal textarea, .candidato-obs-texto { width: 100%; box-sizing: border-box; font-weight: 400; }
/* ⚠️ `.vaga-modal.` na frente pelo mesmo motivo da ficha: sem ele o `.vaga-modal` do
   vaga_form.css (560 px) vencia, e os 640 daqui nunca valeram (medido em 09/10/2026). */
.vaga-modal.candidato-atividade, .vaga-modal.candidato-obs { width: 100%; max-width: min(640px, calc(100vw - 32px)); }

/* ── "Enviar para processo seletivo" (spec 2026-10-09, C) ───────────────────────────── */
#painel-vagas .candidato-enviar-botao { border-color: var(--marca); color: var(--marca); background: #fff; }
#painel-vagas .candidato-enviar-botao:hover { background: var(--gelo-forte-hex); }
.candidato-enviado { color: var(--ok); font-weight: 700; }
.vaga-modal.candidato-enviar { width: 100%; max-width: min(900px, calc(100vw - 32px)); }
.candidato-enviar-filtro { width: 100%; box-sizing: border-box; margin: 4px 0 12px; }
.candidato-enviar-caixa { max-height: min(50vh, 460px); overflow: auto; }
.candidato-enviar-tabela td:first-child { width: 44px; text-align: center; }
.candidato-enviar-tabela input[type="radio"] { width: 20px; height: 20px; cursor: pointer; }
.candidato-enviar-tabela tbody tr:not(.desabilitada) { cursor: pointer; }
.candidato-enviar-tabela tbody tr:not(.desabilitada):hover { background: var(--gelo-forte-hex); }
.candidato-enviar-tabela tr.desabilitada td { color: var(--suave-texto); }
.candidato-enviar-tabela tr.desabilitada input { cursor: not-allowed; }
.historico-tabela-caixa { overflow-x: auto; }
.historico-tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.historico-tabela th { text-align: left; color: var(--marca); padding: 8px 10px; border-bottom: 2px solid var(--linha); }
.historico-tabela td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.historico-tabela tbody tr:nth-child(odd) { background: var(--gelo-hex); }
.historico-tabela a { color: var(--marca); font-weight: 700; }
.selo.selo-processo { margin-left: 0; font-weight: 800; text-transform: uppercase; font-size: 12px; }
.selo-processo-ok { background: #ecfdf5; border-color: #a7f3d0; color: var(--ok); }
.selo-processo-perigo { background: #fef2f2; border-color: #fecaca; color: var(--perigo); }
.selo-processo-andamento { background: var(--gelo-forte-hex); border-color: transparent; color: var(--marca); }
@media (max-width: 640px) {
  .atividade { grid-template-columns: 1fr; gap: 6px; }
  .atividade::before { display: none; }
  .atividade-quando { text-align: left; grid-auto-flow: column; justify-content: start; gap: 8px; }
}
.candidato-atividade .vaga-modal-botoes, .candidato-obs .vaga-modal-botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
/* "Nova Ocorrência" no desenho do print do usuário (06/10/2026): linha sob o título e sobre
   os botões, campos arredondados, Fechar em contorno e Salvar amarelo (`button.dourado`). */
.candidato-atividade { padding: 0; }
.candidato-atividade .vaga-status-topo { padding: 18px 24px; margin: 0; border-bottom: 1px solid var(--linha); }
.candidato-atividade .vaga-status-topo h3 { font-weight: 500; color: var(--tinta); }
.candidato-atividade .campo-modal { margin: 18px 24px 0; color: var(--tinta); }
.candidato-atividade .campo-modal input { border-radius: 999px; padding: 10px 18px; }
.candidato-atividade .campo-modal textarea { border-radius: 20px; padding: 12px 16px; min-height: 180px; }
.candidato-atividade .vagas-erro { margin: 8px 24px 0; }
.candidato-atividade .vaga-modal-botoes { margin: 18px 0 0; padding: 16px 24px; border-top: 1px solid var(--linha); }
#painel-vagas .candidato-atividade .vaga-modal-botoes .discreto { border: 1.5px solid var(--marca-clara); border-radius: 999px;
  color: var(--marca); background: #fff; padding: 8px 22px; }
#painel-vagas .candidato-atividade .vaga-modal-botoes .dourado { border-radius: 999px; padding: 8px 24px; }
/* O título e o Fechar como no print: sem caixa alta herdada e sem sublinhado de link. */
#painel-vagas .candidato-atividade .vaga-status-topo h3 { text-transform: none; letter-spacing: normal; font-size: 20px; }
#painel-vagas .candidato-atividade .vaga-modal-botoes .discreto { text-decoration: none; }
/* Quando ocorreu: Dia / Mês / Ano às Hora : Minuto (o controle de data do formulário público). */
.data-hora-partes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 400; }
.data-hora-partes select { width: auto; min-width: 0; border-radius: 999px; padding: 8px 12px; }
.data-hora-sep { color: var(--suave-texto); }
.data-invalida select { border-color: var(--perigo); }
.data-aviso { color: var(--perigo); display: block; font-weight: 600; margin-top: 6px; }
.data-aviso[hidden] { display: none; }

/* A captura pela extensão Conecta Capta (spec 2026-10-16). Leitura em andamento = gelo da
   marca; falha e "confira" = amarelo-pastel semântico (o mesmo do Aguardando). */
.captura-faixa { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--raio-controle); background: var(--gelo); }
.captura-faixa-falha { background: #fefce8; border: 1px solid #fde68a; }
.captura-faixa-falha summary { cursor: pointer; color: var(--alerta); font-weight: 600; }
.captura-faixa-falha li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.captura-conferir { margin: 8px 0; padding: 10px 14px; border-radius: var(--raio-controle); background: #fefce8; border: 1px solid #fde68a; }
.captura-conferir-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.captura-resumo { white-space: pre-line; }
.captura-lista { margin: 4px 0 8px 18px; }
.selo-conferir { background: #fefce8; border-color: #fde68a; color: var(--alerta); }

/* "Buscar candidato" no modal da vaga (16/10/2026): procura em todas as etapas. */
.vaga-busca { padding: 0 24px 8px; }
.vaga-busca-campo { width: 100%; max-width: 520px; }
.vaga-busca-resultados { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-width: 520px; }
.vaga-busca-resultado { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio-mini); background: #fff;
  color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.vaga-busca-resultado:hover, .vaga-busca-resultado:focus-visible { background: var(--gelo); }
.vaga-busca-nome { font-weight: 600; }
@media (max-width: 600px) { .vaga-busca { padding: 0 16px 8px; } }
/* Quem recebe o disparo (27/10/2026): uma caixa por candidato, lista com rolagem própria. */
.vaga-disparo-quem { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vaga-disparo-todos { display: inline-flex; gap: 4px; }
.vaga-disparo .vaga-disparo-candidatos { list-style: none; padding: 4px 10px; margin: 0 0 12px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--linha); border-radius: var(--raio-mini); }
#painel-vagas .vaga-disparo .vaga-disparo-candidatos label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
#painel-vagas .vaga-disparo .vaga-disparo-candidatos input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; }
.vaga-disparo .vaga-disparo-candidatos li.inelegivel label { color: var(--suave); cursor: default; }
/* O envio do currículo na inclusão (27/10/2026): segunda linha, abaixo do nome/CPF/telefone. */
.vagas-inclusao .linha-curriculo { margin-top: 8px; flex-wrap: wrap; align-items: center; }
.vagas-inclusao .linha-curriculo input[type="file"] { flex: 1; min-width: 220px; }
/* A mensagem do disparo dos incluídos à mão e pelo Capty (29/10/2026). */
.vaga-disparo-texto { display: block; margin: 8px 0; }
.vaga-disparo-texto .meta { display: block; margin-bottom: 4px; }
.vaga-disparo .vaga-disparo-mensagem { width: 100%; box-sizing: border-box; }