/* O formulário da vaga (spec 2026-09-29, §8) — `vaga_form.js`.
 *
 * ⚠️ A CAIXA ALTA MORA AQUI (D7, §8.5), e só aqui: título, rótulo, cabeçalho de tabela e
 * botão. O JS escreve os rótulos em caixa mista; o que a pessoa digita e os placeholders
 * ficam como estão. */
.vaga-form h3, .vaga-form h4, .vaga-form .rotulo, .vaga-form th, .vaga-form button {
  text-transform: uppercase;
}

.vaga-form { display: flex; flex-direction: column; gap: 14px; }
/* Os sete títulos (CLIENTE, VAGA, …) já são caixa alta (D7); ganham o eyebrow do /cliente
   (dourado-texto, 12px, espaçado) e o quadro leva um filete dourado à esquerda, como o
   cartão-prévia de empresa lá (.empresa). Filete é superfície: --dourado pode. */
.vaga-form .vaga-quadro { border-left: 4px solid var(--dourado); }
/* 01/10/2026 (pedido do usuário): o título do quadro em 18px — com os rótulos em 18px, o
   eyebrow de 12px ficava menor que os campos que ele intitula. */
.vaga-form .vaga-quadro h3 { margin: 0 0 16px; font-size: 22px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--dourado-texto); }
/* 01/10/2026: a HIERARQUIA (pedido do usuário) — título do quadro 22px > subtítulo (Requisitante)
   17px > texto digitado 17px > nome do campo 15px. O nome do campo era 18px, maior que o que se
   digita nele; em caixa alta e negrito, 15px já lê do tamanho do valor. */
.vaga-form h4 { margin: 22px 0 2px; font-size: 17px; font-weight: 800; letter-spacing: .04em; color: var(--tinta); }
/* Espaço vertical (01/10/2026): 18px entre todas as linhas da grade, e as linhas com toggle na
   frente da pergunta têm a mesma altura mínima das de campo de texto — o ritmo era irregular. */
.vaga-form .vaga-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.vaga-form .vaga-grade > .largo { grid-column: 1 / -1; }
.vaga-form .vaga-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
@media (max-width: 720px) { .vaga-form .vaga-grade, .vaga-form .vaga-dupla { grid-template-columns: 1fr; } }

.vaga-form .vaga-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.vaga-form .vaga-campo[hidden] { display: none; }
.vaga-form .vaga-campo .rotulo { color: var(--suave-texto); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
/* O asterisco dos obrigatórios (01/10/2026): vermelho (--perigo, 6,5:1 no branco). */
.vaga-form .obrigatorio { color: var(--perigo); font-weight: 800; }
/* Rótulo que só o leitor de tela lê (o "Cliente" que repetia o título do quadro). */
.vaga-form .rotulo-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.vaga-form .vaga-campo input, .vaga-form .vaga-campo select, .vaga-form .vaga-campo textarea { margin: 0; width: 100%; }
.vaga-form textarea { min-height: 84px; }
.vaga-form .vaga-cliente-resumo { margin: 6px 0 0; }
.vaga-form .vaga-cliente-trava { margin: 6px 0 0; padding: 8px 12px; border-radius: var(--raio-mini);
  background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid var(--alerta); color: var(--alerta); font-weight: 600; }
.vaga-form .vaga-cliente-trava[hidden] { display: none; }

/* 01/10/2026 (pedido do usuário): rótulo 18px (regra acima) e o texto digitado
   proporcional, nos dois modos — só no formulário da vaga. */
.vaga-form input, .vaga-form select, .vaga-form textarea { font-size: 17px; }
.vaga-form .vaga-aberta-em { margin: 0 0 12px; font-size: 14px; }
/* A taxa de cancelamento (só leitura): pastéis SEMÂNTICOS literais, os mesmos do resto do
   painel — nenhum token novo no :root. */
.vaga-form .vaga-taxa { margin-top: 10px; }
.vaga-taxa-item { border: 1px solid; border-radius: var(--raio-controle); padding: 10px 12px; }
.vaga-taxa-item .valor { font-size: 17px; }
.vaga-taxa-item.com-valor { background: #ecfdf5; border-color: #a7f3d0; color: var(--ok); }
.vaga-taxa-item.indisponivel { background: #fef2f2; border-color: #fecaca; color: var(--perigo); }
/* Cliente do GINFOR (spec 2026-10-20): sem cadastro no Conecta — neutro, não é pendência. */
.vaga-taxa-item.neutro { background: var(--gelo-hex); border-color: var(--linha); color: var(--suave-texto); }
.vaga-form .vaga-taxa-item .rotulo { color: inherit; }

/* 01/10/2026 (pedido do usuário): pergunta e toggle NA MESMA LINHA, num padrão só — o toggle
   logo NA FRENTE da pergunta, a 20px dela (perto, sem encostar). Antes ficava na borda direita
   da coluna, alinhado com os vizinhos, e o usuário achou o toggle "afastado" demais da
   pergunta. A pergunta pode quebrar linha (`minmax(0, max-content)`); o toggle nunca é
   espremido (`nowrap`). Ficam de fora, de propósito, "Vaga confidencial" (colado em Posições,
   rótulo em cima como ela) e o Fixo/Faixa da linha do salário. */
.vaga-form .vaga-campo.em-linha { display: grid; grid-template-columns: minmax(0, max-content) max-content;
  justify-content: start; align-items: center; column-gap: 20px; min-height: 44px; }
.vaga-form .vaga-campo.em-linha > .toggle { justify-self: start; flex-wrap: nowrap; }
/* O `.rotulo` global tem margin-top 10px (rótulo EM CIMA do campo); em linha ele desalinharia
   a pergunta do centro do toggle. */
.vaga-form .vaga-campo.em-linha > .rotulo { margin: 0; }
/* ⚠️ QUANDO NÃO CABE, VOLTA PARA PERGUNTA EM CIMA — e quem decide é a largura DA GRADE, não da
   janela (container query): o painel tem margens e a grade não é a tela. Medido em 01/10/2026:
   "Modalidade de contrato" pede 258px + 20 + 332 do toggle de três opções = 610px por coluna,
   então os campos de MEIA largura só ficam em linha com a grade a partir de ~1240px; abaixo
   disso a pergunta quebrava em três linhas espremida pelo toggle. Os de largura inteira têm o
   dobro do espaço e só voltam para cima abaixo de 560px. */
.vaga-form .vaga-grade { container-type: inline-size; }
@container (max-width: 1240px) {
  .vaga-form .vaga-campo.em-linha:not(.largo) { display: flex; align-items: flex-start; min-height: 0; }
  .vaga-form .vaga-campo.em-linha:not(.largo) > .rotulo { margin: 10px 0 0; }
}
@container (max-width: 560px) {
  .vaga-form .vaga-campo.em-linha { display: flex; align-items: flex-start; min-height: 0; }
  .vaga-form .vaga-campo.em-linha > .rotulo { margin: 10px 0 0; }
  .vaga-form .vaga-campo.em-linha > .toggle { flex-wrap: wrap; }
}
/* 01/10: as linhas que subdividem os quadros da vaga — 2px, azul-marinho (pedido do usuário). */
.vaga-form .vaga-grade > .vaga-divisoria { grid-column: 1 / -1; width: 100%; border: 0;
  border-top: 2px solid var(--marinho); margin: 10px 0; }
/* 02/10: a mesma linha direto no quadro (Escolaridade: idiomas | cursos), fora de uma grade. */
.vaga-form .vaga-quadro > .vaga-divisoria { width: 100%; border: 0;
  border-top: 2px solid var(--marinho); margin: 22px 0 18px; }
/* 01/10: Posições e "Vaga confidencial" lado a lado na célula ao lado do Título. */
.vaga-form .vaga-posicoes-confidencial { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.vaga-form .vaga-posicoes-confidencial > .vaga-campo { flex: 1 1 0; min-width: 140px; }
/* 30/09: Posições em destaque, logo depois do Título */
.vaga-form .vaga-campo.destaque .rotulo { color: var(--marca); }
.vaga-form .vaga-campo.destaque input { border: 2px solid var(--marca); font-size: 18px; font-weight: 700;
  max-width: 140px; }
/* 30/09: a linha do salário — toggle e campos curtos lado a lado */
.vaga-form .vaga-salario { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.vaga-form .vaga-salario .vaga-campo { width: auto; }
.vaga-form .vaga-salario input.curto { width: 140px; }
.vaga-form .vaga-salario .vaga-campo.vaga-jornada { flex: 1 1 280px; }
.vaga-form .vaga-salario input.jornada { width: 100%; }
.vaga-form .vaga-salario .aviso-faixa { align-self: center; }
/* 30/09: o responsável na criação é texto */
.vaga-form .vaga-texto-fixo { padding: 8px 0; font-size: 17px; }
/* 01/10/2026: na edição o responsável é texto + "Transferir vaga" (modal próprio) */
.vaga-form .vaga-responsavel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vaga-form .vaga-transferir { margin: 0; font-size: 14px; }
.vaga-transferir-dialogo { border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px;
  min-width: min(420px, calc(100vw - 32px)); max-width: min(560px, calc(100vw - 32px)); box-shadow: var(--sombra); }
.vaga-transferir-dialogo h3 { margin-top: 0; }
.vaga-transferir-dialogo .vaga-campo select { width: 100%; }
.vaga-transferir-dialogo .linha-form { gap: 8px; margin-top: 12px; }
/* 30/09: o dropdown de pessoas e o "+" */
.vaga-form .vaga-pessoa-nova { align-items: center; }
.vaga-form .vaga-pessoa-nova select { flex: 1; margin: 0; }
.vaga-form .linha-form { display: flex; justify-content: flex-end; }
/* A barra do "Abrir vaga" (02/10/2026, pedido do usuário): GRUDADA no pé da tela enquanto o
   formulário rola — ele tem ~3.600px e o botão só aparecia no fim. O botão é o maior alvo da
   tela (52px, acima dos 44px dos toggles), não o mais discreto. */
.vaga-form .vaga-acoes { position: sticky; bottom: 0; z-index: 4; justify-content: space-between;
  align-items: center; gap: 12px; padding: 12px 20px; margin: 0 -2px; background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 -6px 18px rgba(0, 45, 95, .10); }
.vaga-form .vaga-acoes .meta { margin: 0; font-size: 15px; }
.vaga-form .vaga-acoes button.primario { min-height: 52px; padding: 0 36px; font-size: 18px; letter-spacing: .04em; }
@media (max-width: 720px) {
  .vaga-form .vaga-acoes { padding: 10px 12px; }
  .vaga-form .vaga-acoes .meta { display: none; }
  .vaga-form .vaga-acoes button.primario { width: 100%; }
}
/* O campo que a janela do que falta apontou (02/10/2026): borda vermelha e a frase embaixo,
   até a pessoa mexer nele (`ctx.marcaErro`/`ctx.limpaErro`). */
.vaga-form .vaga-campo.com-erro .rotulo { color: var(--perigo); }
.vaga-form .vaga-campo.com-erro input, .vaga-form .vaga-campo.com-erro select,
.vaga-form .vaga-campo.com-erro textarea { border-color: var(--perigo); box-shadow: 0 0 0 3px rgba(185, 28, 28, .14); }
.vaga-form .vaga-campo-erro { color: var(--perigo); font-size: 15px; font-weight: 700; }

/* seletor com filtro: a lista flutua sob o input */
.seletor-filtro { position: relative; }
.seletor-filtro input { width: 100%; margin: 0; }
.seletor-lista { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); max-height: 260px;
  overflow-y: auto; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-controle);
  box-shadow: 0 6px 18px rgba(0, 45, 95, .14); }
.seletor-lista[hidden] { display: none; }
.seletor-item { padding: 8px 10px; cursor: pointer; font-size: 14px; }
.seletor-item:hover, .seletor-item.ativo { background: var(--fundo); }
/* Cliente travado (Aprovações pendentes): à vista, com o motivo, mas não se escolhe. */
.seletor-item.desabilitado, .seletor-item.desabilitado:hover { cursor: not-allowed; background: var(--gelo-hex);
  color: var(--suave-texto); }
.seletor-item-motivo { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--alerta); }

/* toggle: botões segmentados */
.toggle { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--linha); border-radius: var(--raio-controle);
  overflow: hidden; width: fit-content; max-width: 100%; }
.toggle button { margin: 0; border: 0; border-radius: 0; background: #fff; color: var(--tinta);
  padding: 8px 14px; font-size: 12px; font-weight: 600; min-height: 38px; cursor: pointer; }
.toggle button + button { border-left: 1px solid var(--linha); }
/* 01/10/2026 (D5): no formulário da vaga os toggles acompanham os outros controles (17px),
   inclusive importância e nível dentro das tabelas. Fora de `.vaga-form` seguem em 12px. */
.vaga-form .toggle button { font-size: 16px; min-height: 44px; }
.toggle button[aria-pressed="true"] { background: var(--marca); color: #fff; }
/* 01/10/2026 (aprovado pelo usuário): a importância no MESMO estilo da situação e do nível —
   pastel + contorno. Obrigatório azul (tokens da marca), desejável cinza (tokens neutros). */
.toggle.importancia button[aria-pressed="true"][data-valor="obrigatorio"] { background: var(--gelo-forte-hex); color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.toggle.importancia button[aria-pressed="true"][data-valor="desejavel"] { background: var(--gelo-hex); color: var(--suave-texto); box-shadow: inset 0 0 0 1px var(--suave); }
/* 01/10/2026: a situação da formação — o escolhido pinta o botão com os pastéis
   SEMÂNTICOS literais (verde concluído, laranja cursando, vermelho suspenso), nenhum token
   novo. Mesma especificidade da importância acima, para vencer o azul do `aria-pressed`. */
.toggle.situacao button[data-valor="concluido"][aria-pressed="true"] { background: #ecfdf5; color: var(--ok); box-shadow: inset 0 0 0 1px #a7f3d0; }
.toggle.situacao button[data-valor="cursando"][aria-pressed="true"] { background: #fff7ed; color: var(--alerta); box-shadow: inset 0 0 0 1px #fed7aa; }
.toggle.situacao button[data-valor="suspenso"][aria-pressed="true"] { background: #fef2f2; color: var(--perigo); box-shadow: inset 0 0 0 1px #fecaca; }
/* 01/10/2026 (pedido do usuário): o nível do idioma no MESMO estilo da situação da formação —
   fundo pastel + contorno fino colorido. Básico CINZA (tokens neutros), intermediário AMARELO
   (o pastel semântico de aviso #fefce8/#fde68a, texto --dourado-texto para ler), avançado VERDE
   (o pastel semântico do "Concluído", #ecfdf5/#a7f3d0, texto --ok). */
.toggle.nivel button[data-valor="basico"][aria-pressed="true"] { background: var(--gelo-hex); color: var(--suave-texto); box-shadow: inset 0 0 0 1px var(--suave); }
.toggle.nivel button[data-valor="intermediario"][aria-pressed="true"] { background: #fefce8; color: var(--dourado-texto); box-shadow: inset 0 0 0 1px #fde68a; }
.toggle.nivel button[data-valor="avancado"][aria-pressed="true"] { background: #ecfdf5; color: var(--ok); box-shadow: inset 0 0 0 1px #a7f3d0; }
.vaga-form .vaga-idiomas-linha { margin-top: 16px; }
/* 01/10/2026 (pedido do usuário): situação da formação e nível do idioma SEM espaço entre os
   botões — as cores encostam umas nas outras e na borda. ⚠️ A classe `nivel` casa com a
   `.nivel` GLOBAL de estilo.css (a fileira de nível da tela de Células: gap 6px, padding-left
   10px, margin-left auto); aqui ela é anulada, senão o toggle do idioma ganharia folga. */
.vaga-form .toggle.nivel, .vaga-form .toggle.situacao { gap: 0; padding-left: 0; margin-left: 0; }
.toggle button:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

/* IA: borda destacada, fundo claro */
.vaga-form .vaga-com-ia { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.vaga-form .melhorar-ia { align-self: flex-start; margin: 0; border: 2px solid var(--acento); background: var(--gelo);
  color: var(--marca); border-radius: var(--raio-mini); padding: 8px 14px; font-weight: 700; font-size: 15px;
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
/* O ícone (01/10/2026: era o emoji "✨"): SVG de brilho como MÁSCARA sobre `currentColor`, então
   segue a cor do botão (e a do disabled) sem arquivo novo nem JS. */
.vaga-form .melhorar-ia::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 5.4L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.6zM19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6-2.6-.9 2.6-.9zM5 15l.7 1.8 1.8.7-1.8.7L5 20l-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 5.4L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.6zM19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6-2.6-.9 2.6-.9zM5 15l.7 1.8 1.8.7-1.8.7L5 20l-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.vaga-form .melhorar-ia:disabled { opacity: .6; cursor: default; }
.vaga-form .vaga-ia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vaga-form .desfazer-ia { margin: 0; font-size: 15px; min-height: 44px; }
.vaga-form .desfazer-ia[hidden] { display: none; }
.vaga-form .aviso-ia, .vaga-form .aviso-faixa { color: var(--perigo); font-size: 12px; }

/* tabelas de formações e envolvidos */
.vaga-form .vaga-tabela { width: 100%; border-collapse: collapse; background: #fff; margin-top: 10px; }
.vaga-form .vaga-tabela th, .vaga-form .vaga-tabela td { text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--linha); font-size: 16px; vertical-align: middle; }
/* 01/10/2026 (pedido do usuário): células e cabeçalho em 16px — o `th` deixou de ter tamanho
   próprio (era 12px e venceria a regra de cima). */
.vaga-form .vaga-tabela th { color: var(--suave-texto); }
.vaga-form .vaga-tabela[hidden] { display: none; }
/* As tabelas da ESCOLARIDADE organizadas (01/10/2026): largura do conteúdo, não da tela — a
   Importância encosta na Situação em vez de ir para o meio do quadro —, a 1ª coluna com a mesma
   largura nas duas (Formação e Idioma alinham) e o ✕ logo depois. No celular, rola SÓ a tabela. */
.vaga-form .vaga-tabela-rolagem { max-width: 100%; overflow-x: auto; }
.vaga-form .vaga-formacoes, .vaga-form .vaga-idiomas { width: auto; }
.vaga-form .vaga-formacoes th, .vaga-form .vaga-formacoes td,
.vaga-form .vaga-idiomas th, .vaga-form .vaga-idiomas td { padding: 8px 24px 8px 8px; white-space: nowrap; }
.vaga-form .vaga-formacoes td:first-child, .vaga-form .vaga-formacoes th:first-child,
.vaga-form .vaga-idiomas td:first-child, .vaga-form .vaga-idiomas th:first-child { width: 200px; min-width: 200px; }
.vaga-form .vaga-formacoes td:last-child, .vaga-form .vaga-idiomas td:last-child { padding-right: 8px; }
/* 02/10 (D7): a tabela de cursos só tem o título e o ✕ — o título quebra linha (é texto livre,
   até 200 caracteres) e o ✕ fica logo depois, sem esticar a tabela até a borda. */
.vaga-form .vaga-cursos { width: auto; max-width: 100%; }
.vaga-form .vaga-cursos td:first-child, .vaga-form .vaga-cursos th:first-child { min-width: 200px; padding-right: 24px; }
.vaga-form .vaga-cursos td:last-child { padding-right: 8px; width: 44px; }
.vaga-form .vaga-cursos-linha { margin-top: 16px; }
.vaga-form .vaga-formacoes .toggle, .vaga-form .vaga-idiomas .toggle { flex-wrap: nowrap; }
.vaga-form .vaga-tabela select { margin: 0; width: auto; }
.vaga-form .vaga-linha { display: flex; align-items: flex-end; gap: 8px; }
.vaga-form .vaga-linha .vaga-campo { flex: 1; }
/* 01/10/2026 (pedido do usuário): os dropdowns de Formação acadêmica, Idioma e Pessoas envolvidas ocupam METADE da
   largura — exatamente a 1ª coluna da grade (50% menos metade do gap de 14px), então o "+"
   termina alinhado com os campos de meia largura. No celular, a linha toda. */
.vaga-form .vaga-linha-metade { max-width: calc(50% - 7px); }
@media (max-width: 720px) { .vaga-form .vaga-linha-metade { max-width: none; } }
/* O "+" PADRONIZADO (01/10/2026): formação, idioma e pessoas — o do idioma não tinha estilo e
   saía menor. Alvo de 44×44px. */
.vaga-form .vaga-formacao-add, .vaga-form .vaga-idioma-add, .vaga-form .vaga-curso-add, .vaga-form .adiciona { margin: 0; width: 44px; height: 44px;
  min-width: 44px; padding: 0; font-size: 22px; font-weight: 700; line-height: 1; border-radius: var(--raio-controle);
  border: 1px solid var(--linha); background: #fff; color: var(--marca); cursor: pointer; }
.vaga-form .vaga-formacao-add:disabled, .vaga-form .vaga-idioma-add:disabled, .vaga-form .vaga-curso-add:disabled, .vaga-form .adiciona:disabled { color: var(--suave); cursor: default; }
.vaga-form .remover { margin: 0; background: transparent; border: 0; color: var(--perigo); font-size: 18px;
  cursor: pointer; width: 44px; height: 44px; padding: 0; border-radius: var(--raio-mini); }
.vaga-form .remover:hover { background: #fef2f2; }

/* Criada a vaga, o formulário fica inerte (`raiz.inert`) até a tela da vaga abrir —
   inclusive se abrir falhar: um segundo "Abrir vaga" criaria outra. */
.vaga-form.criada { opacity: .6; }

/* O modal "Abrir vaga" (`vagas.js:modalDeAbertura`): em branco ou cópia. */
.vaga-modal { border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; min-width: 320px; max-width: min(560px, calc(100vw - 32px)); }
.vaga-modal h3 { text-transform: uppercase; margin-top: 0; }
.vaga-modal-escolha { display: grid; grid-template-columns: 1fr; gap: 10px; }
.vaga-modal .seletor-filtro { margin-bottom: 12px; }

/* A janela "Faltam campos obrigatórios" (01/10/2026, pedido do usuário: popup com a lista, no
   lugar da frase no topo). */
.vaga-faltando { border: none; border-radius: var(--raio); padding: 24px 28px; max-width: min(460px, 92vw);
  box-shadow: var(--sombra); color: var(--tinta); }
.vaga-faltando::backdrop { background: rgba(5, 38, 91, .45); }
.vaga-faltando h3 { margin: 0 0 8px; font-size: 20px; color: var(--perigo); }
.vaga-faltando p { margin: 0 0 8px; }
.vaga-faltando ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.vaga-faltando li { margin: 4px 0; font-size: 16px; }
.vaga-faltando .linha-form { display: flex; justify-content: flex-end; }

/* O rótulo do PCD com o ícone da cadeira de rodas à esquerda (02/10/2026). */
.vaga-form .rotulo-com-icone { display: inline-flex; align-items: center; gap: 8px; }
.vaga-form .icone-pcd { line-height: 0; color: var(--marca); flex: none; }