/* O construtor de formulários: três colunas, arrasta-e-solta.
 *
 *   ┌──────────────┬─────────────────────────────┬──────────────┐
 *   │ .paleta      │ .tela                       │ .propriedades│
 *   │ 220px        │ 1fr (papel, centrado)       │ 300px        │
 *   └──────────────┴─────────────────────────────┴──────────────┘
 *
 * ⚠️ NÃO REDEFINE A PALETA. Toda cor sai das variáveis de `estilo.css` (`--tinta --linha
 * --fundo --marca --acento --perigo --ok --suave-texto --sombra`). Uma segunda paleta aqui
 * divergiria da primeira no próximo ajuste de tom, e o painel ficaria com duas identidades
 * — uma por aba. A única cor nova é `--cor-vaga`, a de destaque do formulário aberto, que
 * o `construtor.js` escreve na raiz e sempre cai em `--marca` quando não há escolha.
 *
 * ⚠️ E NÃO REDEFINE `.campo`. O meio da tela é desenhado por `campos.js`/`campos.css`, que
 * são COMPARTILHADOS com a página do candidato — é o que faz "como vai ficar" ser a
 * verdade. Estilizar `.campo` daqui recriaria a divergência que o compartilhamento existe
 * para impedir.
 *
 * Contrastes medidos (WCAG AA pede 4.5:1 para texto):
 *   --suave-texto sobre branco ......... 7.58:1
 *   --suave-texto sobre --fundo ........ 6.92:1
 *   --tinta sobre --fundo .............. 16.3:1
 *   --marca sobre branco ............... 13.63:1
 *   --perigo sobre branco .............. 6.47:1
 *   --ok sobre #ecfdf5 (selo aberto) ... 5.21:1
 *   --perigo sobre #fef2f2 (fechado) ... 5.91:1
 */

/* ─── o topo da tela (vale para a lista e para o construtor) ─────────────────────────── */

.construtor-topo {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.construtor-topo h2 { margin: 0; }
.construtor-topo .cresce { flex: 1; }
/* A busca da lista (01/10/2026). Inválida = borda de alerta + `title`, e busca como texto. */
.construtor-topo .form-busca { min-width: 360px; }
.construtor-topo .form-busca.invalida { border-color: var(--alerta); }

.construtor-topo .voltar {
  background: none;
  border: 0;
  color: var(--marca);
  cursor: pointer;
  font-weight: 600;
  padding: 8px 2px;
}
.construtor-topo .voltar:focus-visible {
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--acento);
  outline: 0;
}

/* Vazia ela desaparece — caixa de erro vazia com borda é ruído permanente na tela. */
.construtor-erro:empty { display: none; }

/* ─── os selos de estado ──────────────────────────────────────────────────────────────── */

/* A cor diz a MESMA coisa que o texto, nunca outra: quem não distingue verde de cinza
   continua lendo "Aberto" e "Rascunho" por extenso. */
.selo {
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  padding: 3px 10px;
  white-space: nowrap;
}
.selo-rascunho { background: var(--fundo); color: var(--suave-texto); }
.selo-aberto   { background: #ecfdf5; color: var(--ok); }
/* Aguardando aprovação: amarelo de espera, não verde de no ar nem cinza de
   rascunho. A vaga está pronta e parada — é um terceiro estado, e o selo tem de
   dizer isso sem que ninguém abra a vaga para descobrir. */
.selo-aguardando_aprovacao { background: #fefce8; color: #854d0e; }
.selo-fechado  { background: #fef2f2; color: var(--perigo); }

/* ─── a lista de formulários ──────────────────────────────────────────────────────────── */

.construtor-lista { background: #fff; border-collapse: collapse; width: 100%; }
.construtor-lista th,
.construtor-lista td {
  border-bottom: 1px solid var(--linha);
  padding: 11px 12px;
  text-align: left;
}
.construtor-lista th {
  color: var(--suave-texto);
  font-size: .85rem;
  font-weight: 600;
}
.construtor-lista tbody tr { cursor: pointer; }
.construtor-lista tbody tr:hover { background: var(--fundo); }
/* Teclado: a linha é `tabIndex=0` no JS, e sem foco visível quem não usa mouse não sabe
   onde está. Arrastar nunca é o único caminho, e clicar também não. */
.construtor-lista tbody tr:focus-visible {
  box-shadow: inset 0 0 0 2px var(--acento);
  outline: 0;
}
.form-endereco { color: var(--suave-texto); font-family: ui-monospace, monospace; }
.form-autor { color: var(--suave-texto); }
/* O nome interno é o destaque; o título que o candidato lê fica embaixo, menor e apagado.
   A hierarquia é a da tela de quem TRABALHA: quem varre a lista procura "Manaus — 3ª
   leva", não "Auxiliar de Produção", que se repete em dez vagas. */
.form-titulo-publico { color: var(--suave-texto); font-size: .86em; margin-top: .15rem; }
.form-desde { color: var(--suave-texto); white-space: nowrap; }
/* A régua de qualificação (17/09/2026): a frase da regra, no vocabulário do construtor.
   Cabe em ~28 caracteres com reticências; o texto inteiro está no `title`. Com mais de
   uma condição, a seta "▸ +N" abre as outras EMBAIXO, na mesma célula. */
.form-regua { color: var(--suave-texto); font-size: .9em; max-width: 28ch; }
.form-regua-primeira,
.form-regua-resto li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-regua-resto { margin: .2rem 0 0; padding-left: 1rem; }
.form-regua-mais {
  background: none; border: 0; padding: 0 2px; margin-top: .15rem;
  color: var(--marca); cursor: pointer; font: inherit; font-weight: 700;
}
.form-regua-mais:hover { text-decoration: underline; }
.form-regua-mais:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

/* A vaga arquivada, quando o filtro a traz de volta: esmaecida E na aba "Arquivados",
   nunca só a opacidade. */
.form-linha.arquivada { opacity: .6; }

/* O pino (05/10/2026): fixar no topo, por pessoa. Apagado até o hover/foco da linha quando
   NÃO está fixado; sempre à vista quando está. Cor pelo token, como tudo aqui. */
.coluna-pino { width: 36px; }
.form-pino {
  align-items: center; background: none; border: 1px solid transparent;
  border-radius: var(--raio-mini); color: var(--suave-texto); cursor: pointer;
  display: inline-flex; height: 32px; justify-content: center; opacity: 0; padding: 0;
  transition: opacity .12s; width: 32px;
}
.form-pino.fixado, .form-linha:hover .form-pino, .form-linha:focus-within .form-pino { opacity: 1; }
@media (hover: none) { .form-pino { opacity: 1; } }
.form-pino:hover { background: var(--fundo); border-color: var(--linha); color: var(--marca); }
.form-pino.fixado { color: var(--marca); }
/* O desenho do pino: a forma é a máscara, a cor é `currentColor` (logo, o token do botão). */
.form-pino-icone {
  background: currentColor; display: block; height: 16px; width: 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 3a1 1 0 0 1 1 1v1l-1 1v5l3 3v2h-6v6l-1 1-1-1v-6H5v-2l3-3V6L7 5V4a1 1 0 0 1 1-1h8z'/%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='M16 3a1 1 0 0 1 1 1v1l-1 1v5l3 3v2h-6v6l-1 1-1-1v-6H5v-2l3-3V6L7 5V4a1 1 0 0 1 1-1h8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-pino:focus-visible { box-shadow: 0 0 0 2px var(--acento); outline: 0; }
/* A linha fixada: borda esquerda na marca e fundo gelo (spec A). */
.form-linha.fixada { background: var(--gelo); box-shadow: inset 3px 0 0 var(--marca); }
.form-bloco-titulo th { background: none; border: 0; padding: 14px 0 6px; text-align: left; }
.form-bloco-titulo h3 { color: var(--marca); font-size: .8rem; letter-spacing: .06em; margin: 0; text-transform: uppercase; }

.linha-acoes { text-align: right; white-space: nowrap; }
/* ⚠️ SÓ NO HOVER/FOCO DA LINHA. Arquivar e apagar são ações de arrumar a casa, não o que
   se faz ao abrir a lista — permanentes, elas competiriam com o título da vaga, que é o
   que a pessoa veio ler. Mesmo critério do "Apagar grupo". */
.linha-acoes button { opacity: 0; transition: opacity .12s; }
.form-linha:hover .linha-acoes button,
.form-linha:focus-within .linha-acoes button { opacity: 1; }
@media (hover: none) { .linha-acoes button { opacity: 1; } }
.linha-acoes button {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--suave-texto);
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  min-height: 34px;
  padding: 6px 10px;
}
.linha-acoes button:hover { background: var(--fundo); border-color: var(--linha); }
.linha-acoes button:focus-visible { box-shadow: 0 0 0 2px var(--acento); outline: 0; }
.linha-acoes .apaga:hover { background: #fef2f2; border-color: var(--perigo); }

.ver-arquivados {
  background: none;
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--suave-texto);
  cursor: pointer;
  font: inherit;
  min-height: 40px;
  padding: 8px 14px;
}
.ver-arquivados:hover { border-color: var(--marca); color: var(--marca); }
.ver-arquivados:focus-visible { box-shadow: 0 0 0 2px var(--acento); outline: 0; }

.novo-formulario { display: flex; gap: 8px; margin-bottom: 14px; }
.novo-titulo {
  border: 1px solid var(--linha);
  border-radius: 8px;
  flex: 1;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
}

/* ─── o grid de três colunas ──────────────────────────────────────────────────────────── */

.construtor {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
}

/* ─── coluna 1: a paleta ──────────────────────────────────────────────────────────────── */

.paleta {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 14px;
  /* Acompanha a rolagem: num formulário de 32 perguntas, a paleta rolar para fora da tela
     obrigaria a subir até o topo para acrescentar a 33ª. */
  position: sticky;
  top: calc(var(--altura-topo) + 12px);
}
.paleta h3 { margin: 0 0 4px; }
.paleta > .meta { margin: 0 0 10px; }

.paleta-item {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--tinta);
  cursor: grab;
  display: block;
  font: inherit;
  margin-bottom: 6px;
  min-height: 40px;
  padding: 9px 12px;
  text-align: left;
  width: 100%;
}
.paleta-item:hover { background: #fff; border-color: var(--marca); }
.paleta-item:active { cursor: grabbing; }
.paleta-item:focus-visible {
  box-shadow: 0 0 0 2px var(--acento);
  outline: 0;
}
/* A alça de arrastar, por `::before`: ela é decoração e não pode ser lida pelo leitor de
   tela como parte do nome do tipo. */
.paleta-item::before {
  color: var(--suave-texto);
  content: "⠿ ";
}
.paleta-secao {
  background: #fff;
  border-style: dashed;
  cursor: pointer;
  margin-top: 12px;
}
.paleta-secao::before { content: none; }

/* ─── a fila de grupos ────────────────────────────────────────────────────────────────── */

/* ⚠️ A ORDEM DOS CHIPS É A ORDEM DOS PASSOS DO CANDIDATO. Não existe uma segunda tela
   onde ordenar passos, de propósito: duas telas para a mesma ordem divergiriam, e a que
   ficaria para trás é a que a pessoa usa menos. */
.fila {
  align-items: stretch;
  display: flex;
  gap: 8px;
  margin: 0 auto 14px;
  max-width: 720px;
  overflow-x: auto;
  padding-bottom: 4px;
  /* A fila acompanha a rolagem: num grupo de 12 perguntas, ela sairia da tela e trocar de
     passo exigiria subir até o topo. */
  position: sticky;
  top: calc(var(--altura-topo) + 8px);
  z-index: 5;
}

.fila-chip {
  align-items: center;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--suave-texto);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px 6px 6px;
  white-space: nowrap;
}
.fila-chip:hover { border-color: var(--cor-vaga, var(--marca)); }
.fila-chip:focus-visible { box-shadow: 0 0 0 2px var(--acento); outline: 0; }

/* O passo em que a pessoa está. Cor E peso de fonte — nunca só a cor. */
.fila-chip.ativo {
  border-color: var(--cor-vaga, var(--marca));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-vaga, var(--marca)) 20%, transparent);
  color: var(--tinta);
  font-weight: 600;
}

.fila-numero {
  align-items: center;
  background: var(--fundo);
  border-radius: 50%;
  display: flex;
  flex: none;
  font-size: .78rem;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.fila-chip.ativo .fila-numero {
  background: var(--cor-vaga, var(--marca));
  color: #fff;
}
/* Quantas perguntas o grupo tem. É o que responde "onde foi parar aquela pergunta?" sem
   trocar de passo — a pergunta mais comum de quem arrasta entre grupos. */
.fila-conta {
  color: var(--suave-texto);
  font-size: .78rem;
  font-weight: 400;
}

/* "Sem grupo" existe só quando há pergunta solta (o servidor as deixa assim ao apagar um
   grupo). Tracejado porque não é um passo que alguém criou — é o resto. */
.fila-chip.sem-grupo { border-style: dashed; }

/* O chip iluminado durante o arrasto: é para onde a pergunta vai. Sem isto, soltar num
   chip é aposta — o mesmo motivo do `.solta-aqui` lá embaixo. */
.fila-chip.alvo {
  background: color-mix(in srgb, var(--cor-vaga, var(--marca)) 12%, #fff);
  border-color: var(--cor-vaga, var(--marca));
  border-style: solid;
}
.fila-chip.arrastando { opacity: .4; }

.fila-mais {
  background: #fff;
  border: 1px dashed var(--linha);
  border-radius: 999px;
  color: var(--suave-texto);
  cursor: pointer;
  flex: none;
  font-size: 1.05rem;
  min-height: 40px;
  width: 44px;
}
.fila-mais:hover { border-color: var(--marca); color: var(--marca); }
.fila-mais:focus-visible { box-shadow: 0 0 0 2px var(--acento); outline: 0; }

/* Os botões do rodapé do passo. `disabled` de propósito: eles estão ali porque o candidato
   vai vê-los, e clicá-los no construtor não significa nada — navegar entre passos é a
   fila, que é a ferramenta de quem MONTA. */
.passos-rodape {
  border-top: 1px solid var(--linha);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 16px;
}
.passos-rodape button { opacity: .5; }

/* ─── coluna 2: a tela ────────────────────────────────────────────────────────────────── */

.tela {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: var(--sombra);
  /* O `--cor-vaga` pinta uma faixa no alto: é o lembrete de que o candidato vai ver esta
     cor, sem tingir o texto e estragar o contraste medido. */
  border-top: 4px solid var(--cor-vaga, var(--marca));
  margin: 0 auto;
  max-width: 720px;
  padding: 24px 28px 28px;
  width: 100%;
}

.tela-cabecalho {
  border-bottom: 1px solid var(--linha);
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.tela-cabecalho h1 { font-size: 1.5rem; margin: 0 0 8px; }
.tela-descricao {
  color: var(--suave-texto);
  line-height: 1.5;
  /* `pre-wrap` porque a descrição da vaga tem linhas soltas ("Salário: …", "Benefícios: …")
     e a quebra que a pessoa digitou É a formatação. */
  white-space: pre-wrap;
}

/* Editável no lugar: sem caixa, sem borda, só o fundo no hover dizendo que dá para clicar.
   Uma caixa permanente faria a tela deixar de mostrar como o candidato vai ver. */
.editavel {
  border-radius: 6px;
  outline: 0;
  padding: 2px 4px;
}
.editavel:hover { background: var(--fundo); }
.editavel:focus-visible { box-shadow: 0 0 0 2px var(--cor-vaga, var(--marca)); }
.editavel:empty::before {
  color: var(--suave-texto);
  content: attr(data-exemplo);
  font-weight: 400;
}

.secao-bloco { margin-bottom: 26px; }
/* ⚠️ `column` E NÃO `row`: a cabeça do grupo passou a ter DUAS linhas (título e
   descrição) em 07/09/2026. Em linha, o texto de consentimento da LGPD — 1.588
   caracteres — ficaria espremido ao lado do título numa coluna de 40 px. */
.secao-cabeca { display: flex; flex-direction: column; gap: 2px; }
.secao-titulo { font-size: 1.05rem; margin: 0 0 4px; }

/* ⚠️ `pre-line` IGUAL AO DA PÁGINA DO CANDIDATO (`formulario.css`). O texto tem parágrafos
   separados por linha em branco, e sem isto o construtor mostraria tudo grudado — ou seja,
   mostraria uma coisa diferente da que o candidato lê, que é exatamente o que este
   construtor existe para não fazer. */
.secao-cabeca .secao-descricao {
  color: var(--suave-texto);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px;
  white-space: pre-line;
}

/* ⚠️ "Apagar seção" SÓ APARECE NO HOVER/FOCO DA SEÇÃO. Visto na tela montada (02/09/2026),
   ele era a coisa de MAIOR destaque ao lado de cada título — vermelho vivo, repetido por
   seção, competindo com o conteúdo que a tela existe para mostrar. Destaque permanente
   para a ação mais destrutiva é o contrário do que se quer.

   `:focus-within` junto do `:hover`, e não só ele: quem chega de teclado precisa alcançar
   o botão, e um controle que só existe no hover é um controle que o teclado não tem. */
.secao-cabeca .apaga {
  font-size: .85rem;
  opacity: 0;
  transition: opacity .12s;
}
.secao-bloco:hover .secao-cabeca .apaga,
.secao-bloco:focus-within .secao-cabeca .apaga { opacity: 1; }
/* Sem hover (celular, ou quem navega só com teclado): ele fica sempre visível, porque
   `:hover` ali nunca acontece e o botão sumiria para sempre. */
@media (hover: none) {
  .secao-cabeca .apaga { opacity: 1; }
}

.secao-perguntas { min-height: 44px; }

/* O convite: aparece na seção vazia E na tela sem nada. Sem ele, "arraste para cá" é
   conhecimento que só quem já usou tem. */
.secao-vazia {
  border: 1px dashed var(--linha);
  border-radius: 10px;
  color: var(--suave-texto);
  margin: 0;
  padding: 18px;
  text-align: center;
}

/* ⚠️ O INDICADOR DE ONDE VAI CAIR. Ele é o único retorno que a pessoa tem durante o
   arrasto — sem ele, soltar é aposta. A bolinha na ponta existe porque uma linha de 2px
   sozinha se confunde com a borda de um campo. */
.solta-aqui {
  background: var(--cor-vaga, var(--marca));
  border-radius: 2px;
  height: 3px;
  margin: 6px 0;
  position: relative;
}
.solta-aqui::before {
  background: var(--cor-vaga, var(--marca));
  border-radius: 50%;
  content: "";
  height: 9px;
  left: -4px;
  position: absolute;
  top: -3px;
  width: 9px;
}

/* ─── as ações no próprio cartão da pergunta ──────────────────────────────────────────── */

/* ⚠️ ELAS EXISTEM PORQUE ALGUÉM NÃO ACHOU O BOTÃO. Apagar uma pergunta só existia no
   painel da direita, depois de selecionar o campo; quem foi usar procurou NO CAMPO, não
   encontrou, e perguntou como se faz. O painel continua tendo o botão — este é o caminho
   de quem está olhando a pergunta, aquele é o de quem está mexendo nas propriedades. */
.tela .campo { position: relative; }

.campo-acoes {
  align-items: center;
  display: flex;
  gap: 2px;
  opacity: 0;
  position: absolute;
  right: 6px;
  top: 6px;
  transition: opacity .12s;
}
/* `:focus-within` junto do `:hover`: um controle que só existe no hover é um controle que
   o teclado não tem — e o cartão é `tabIndex=0`, então ele recebe foco. */
.campo:hover .campo-acoes,
.campo:focus-within .campo-acoes,
.campo.selecionado .campo-acoes { opacity: 1; }

/* Sem hover (celular): sempre visíveis, senão sumiriam para sempre. */
@media (hover: none) {
  .campo-acoes { opacity: 1; }
}

.campo-alca {
  color: var(--suave-texto);
  cursor: grab;
  font-size: 1.05rem;
  line-height: 1;
  padding: 6px 4px;
}
.campo:active .campo-alca { cursor: grabbing; }

/* O cadeado do campo de endereço fixo: ocupa o lugar do ✕, com o mesmo tamanho, para o
   canto do cartão não pular de posição entre um campo e outro. */
.campo-fixo {
  font-size: .85rem;
  line-height: 1;
  min-height: 28px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}

.campo-apaga {
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--suave-texto);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  /* 28px e não 44px: é uma ação secundária dentro de um cartão, e o alvo de 44px cobriria
     o canto do campo que a pessoa está lendo. O caminho de toque confortável é o botão do
     painel da direita, que tem os 44px. */
  min-height: 28px;
  min-width: 28px;
}
.campo-apaga:hover { background: #fef2f2; color: var(--perigo); }
.campo-apaga:focus-visible { box-shadow: 0 0 0 2px var(--perigo); outline: 0; }

/* ─── coluna 3: propriedades ──────────────────────────────────────────────────────────── */

.propriedades {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 16px;
  position: sticky;
  top: calc(var(--altura-topo) + 12px);
}
.propriedades h3 { margin: 0 0 14px; }
.propriedades-vazio { color: var(--suave-texto); margin: 0; }

.construtor-campo { display: block; margin-bottom: 15px; }
.construtor-campo > span { display: block; font-weight: 700; margin-bottom: 4px; }
.construtor-campo input,
.construtor-campo textarea,
.construtor-campo select {
  border: 1px solid var(--linha);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  min-height: 40px;
  padding: 8px 10px;
  width: 100%;
}
.construtor-campo input:focus-visible,
.construtor-campo textarea:focus-visible,
.construtor-campo select:focus-visible {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent);
  outline: 0;
}
.construtor-campo small { display: block; line-height: 1.4; margin-top: 4px; }
.construtor-campo.em-linha {
  align-items: center;
  display: flex;
  gap: 8px;
}
.construtor-campo.em-linha input { min-height: 22px; width: 22px; }
.construtor-campo.em-linha > span { margin: 0; }
.construtor-campo code {
  background: var(--fundo);
  border-radius: 6px;
  display: inline-block;
  padding: 5px 8px;
}

/* Campo travado depois da publicação. O cinza sozinho não explica nada — quem explica é a
   frase abaixo do campo (`propriedadesDoFormulario`); isto só evita que pareça editável. */
.construtor-campo input:disabled,
.endereco-linha input:disabled {
  background: var(--fundo);
  color: var(--suave-texto);
}

.endereco-linha { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; }
.endereco-linha code { color: var(--suave-texto); font-size: .8rem; }
.endereco-linha input { flex: 1; min-width: 10ch; }

.grupo-condicional {
  background: var(--fundo);
  border-radius: 10px;
  margin-bottom: 15px;
  padding: 12px 12px 1px;
}

/* A faixa que substituiu o `confirm()` da troca de tipo. Âmbar e não vermelho: não é erro,
   é consequência — e vermelho aqui faria a pessoa achar que quebrou alguma coisa. */
.aviso-tipo {
  background: #fffbeb;
  border-left: 3px solid var(--alerta);
  border-radius: 0 8px 8px 0;
  color: var(--tinta);
  font-size: .88rem;
  line-height: 1.45;
  margin: 0 0 15px;
  padding: 10px 12px;
}

.apaga {
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--perigo);
  cursor: pointer;
  font: inherit;
  min-height: 40px;
  padding: 8px 4px;
}
.apaga:hover { background: #fef2f2; }
.apaga:focus-visible { box-shadow: 0 0 0 2px var(--perigo); outline: 0; }

/* ─── o selo de salvamento ────────────────────────────────────────────────────────────── */

/* ⚠️ DISCRETO DE PROPÓSITO. O salvamento é automático (600ms parado); um aviso chamativo a
   cada tecla treinaria a pessoa a ignorá-lo, e aí ele não serviria para o momento em que
   importa — quando FALHA. A falha aparece na `.construtor-erro`, que é vermelha. */
/* ⚠️ POR EXTENSO E LEGÍVEL (09/09/2026, pedido do usuário). Era 0.8rem cinza, dizendo
   "salvo" e sumindo em 2 s — ninguém lia. Houve um terceiro estado, `.pendente`, entre 09
   e 18/09/2026: a vaga publicada represava as edições e o selo contava a fila. A Parte A
   acabou com o represamento — a publicada não se edita, e a cópia grava sozinha. */
.selo-salvando {
  color: var(--suave-texto);
  font-size: .9rem;
  font-weight: 600;
  min-width: 6ch;
  text-align: right;
  transition: opacity .3s;
  white-space: nowrap;
}
.selo-salvando.salvando { opacity: 1; }
.selo-salvando.salvo {
  animation: some-devagar 4s forwards;
  color: var(--ok);
}
@keyframes some-devagar {
  0%, 55% { opacity: 1; }
  100%    { opacity: 0; }
}
/* Quem pediu menos movimento não recebe a animação — o selo só some. */
@media (prefers-reduced-motion: reduce) {
  .selo-salvando.salvo { animation: none; opacity: .7; }
}

/* ─── a faixa de desfazer ─────────────────────────────────────────────────────────────── */

/* ⚠️ ELA SUBSTITUIU O `confirm()` DE APAGAR, e a posição é parte da decisão: fixa embaixo,
   sobre o conteúdo, porque a pessoa acabou de clicar em algo que sumiu da tela e precisa
   ver a saída sem procurar. 8 segundos (`SEGUNDOS_DE_DESFAZER` no JS) é o que cabe numa
   hesitação sem virar mobília. */
.desfazer {
  align-items: center;
  background: var(--tinta);
  border-radius: 10px;
  bottom: 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
  color: #fff;
  display: flex;
  gap: 14px;
  left: 50%;
  padding: 12px 16px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 20;
}
.desfazer button {
  background: none;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  min-height: 40px;
  padding: 8px 14px;
}
.desfazer button:hover { background: rgba(255, 255, 255, .14); }
.desfazer button:focus-visible { box-shadow: 0 0 0 2px #fff; outline: 0; }

/* ─── o botão "Ver candidaturas" (a TELA mora em `candidaturas.css`) ──────────────────── */

/* ⚠️ A TELA DE CANDIDATURAS SAIU DAQUI em 23/09/2026, com o `candidaturas.js`. O que ficou
   é o botão do topo da vaga — ele é do construtor, não da tela. Nenhuma cor nova aqui:
   tudo sai das variáveis do `estilo.css`, como manda o topo deste arquivo. */

/* ⚠️ `.testar-formulario` (o botão do topo da vaga) e `.testar-de-novo` (o botão da ficha
   de teste, 18/09/2026) reusam ESTA regra — sem ela ficavam com o estilo cru do navegador
   ao lado dos irmãos estilizados, porque `.construtor-topo button` só dá o layout flex do
   ícone+rótulo (ver mais abaixo), não a caixa branca com borda. */
.construtor-topo .ver-candidaturas,
.construtor-topo .testar-formulario,
.construtor-topo .testar-de-novo {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  cursor: pointer;
  padding: 7px 12px;
}
.construtor-topo .ver-candidaturas:hover,
.construtor-topo .testar-formulario:hover,
.construtor-topo .testar-de-novo:hover { border-color: var(--marca); color: var(--marca); }
.construtor-topo .ver-candidaturas:focus-visible,
.construtor-topo .testar-formulario:focus-visible,
.construtor-topo .testar-de-novo:focus-visible { box-shadow: 0 0 0 2px var(--acento); outline: 0; }

/* ─── a faixa da vaga (D13) e a pasta no OneDrive ─────────────────────────────────────── */

/* `aspect-ratio` fixo e `object-fit: cover`: a faixa é um recorte, não a foto inteira.
   Sem isto, uma imagem de celular em pé (3:4) empurraria o título da vaga para baixo da
   dobra — o candidato abriria o link e veria uma parede de imagem, sem saber que é uma
   vaga. Recortar é o erro barato; um título invisível não é. */
.vaga-capa {
  aspect-ratio: 4 / 1;
  border-radius: 10px;
  display: block;
  margin-bottom: 14px;
  object-fit: cover;
  width: 100%;
}

.campo-capa { display: flex; flex-direction: column; gap: 8px; }
.capa-previa {
  aspect-ratio: 4 / 1;
  border: 1px solid var(--linha);
  border-radius: 8px;
  object-fit: cover;
  width: 100%;
}
.campo-capa input[type="file"] { font-size: 12px; }

/* Discreto porque é uma ação destrutiva pequena: tirar a faixa não perde nada além da
   faixa. Em `--perigo` cheio ele competiria com "Apagar formulário", que perde tudo. */
.apaga-discreto {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--perigo, #b91c1c);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}

/* O botão da pasta. Como link ele é `<a>`, como estado vazio é `<button disabled>` — os
   dois precisam sair iguais, senão a tela pareceria ter dois controles diferentes. */
.pasta-vaga {
  align-items: center;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--marca);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  padding: 8px 13px;
  text-decoration: none;
  white-space: nowrap;
}
.pasta-vaga:hover:not(:disabled) { border-color: var(--marca); }
.pasta-vaga:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ⚠️ `cursor: default` e não `not-allowed`: não há nada de errado no clique da pessoa — a
   pasta simplesmente ainda não existe. O `not-allowed` acusa quem clicou; o `title`
   explica. */
.pasta-vaga.sem-pasta {
  color: var(--suave-texto);
  cursor: default;
  opacity: .6;
}
.pasta-vaga.discreto { font-size: 12px; padding: 5px 10px; }
.coluna-pasta { white-space: nowrap; width: 1%; }

/* "Duplicar". Neutro de propósito: na lista ele fica ao lado de "Apagar", e um botão
   chamativo convidaria o clique errado — duplicar é barato, apagar não é. */
.duplicar {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--tinta);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  white-space: nowrap;
}
.duplicar:hover { border-color: var(--marca); color: var(--marca); }
.duplicar:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.construtor-topo .duplicar { font-size: 13px; padding: 8px 13px; }

/* O seletor de célula dona, ao lado do título da vaga nova. */
.novo-dono {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  max-width: 280px;
  padding: 9px 11px;
}
/* Em âmbar e não em vermelho: a vaga vai nascer e funcionar — o que falta é o acesso da
   célula, que se resolve em outra tela. Vermelho diria "isto falhou", e não falhou. */
.novo-aviso:not(:empty) {
  background: #fffbeb;
  border-left: 3px solid var(--alerta, #b45309);
  border-radius: 0 6px 6px 0;
  color: var(--alerta, #b45309);
  font-size: 12.5px;
  margin: 0 0 10px;
  padding: 8px 11px;
}

/* ─── grupos prontos na paleta ────────────────────────────────────────────────────────── */

/* Espaço acima e um traço: a paleta passa a ter DUAS listas, e sem separação a primeira
   opção de grupo pronto pareceria mais um tipo de pergunta. */
.paleta-titulo-2 {
  border-top: 1px solid var(--linha);
  margin-top: 18px;
  padding-top: 16px;
}

/* Verde-acinzentado no lugar do azul dos tipos, e alinhado com a contagem à direita:
   são botões que fazem uma coisa DIFERENTE (criam seis campos, não um), e parecer igual
   seria convidar o clique distraído. */
.paleta-pronto {
  align-items: center;
  background: #f6faf8;
  border-color: #d6e6de;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  text-align: left;
}
.paleta-pronto:hover { background: #eef6f2; border-color: #9ec9b5; }

/* ── o grupo que JÁ está na vaga ─────────────────────────────────────────────────────── */

/* ⚠️ VERDE PASTEL **CLARO**, e o limite é o texto em cima. #dcf3e5 com a tinta #12283f dá
   contraste ~14:1 — muito acima dos 4,5 exigidos. Um verde saturado forçaria texto branco
   e faria o botão parecer DESABILITADO, que é o oposto do que ele é: continua clicável, e
   clicar acrescenta outra cópia.
 *
 * ⚠️ E O ESTADO NÃO É SÓ A COR: o `✓` vem como texto no botão (ver `paleta-check` no
 * `construtor.js`). Quem não distingue este verde do cinza do botão vizinho ainda vê o
 * visto — é a mesma regra que os `.selo` desta folha seguem. */
.paleta-pronto-dentro {
  background: #dcf3e5;
  border-color: #a7d9bd;
}
.paleta-pronto-dentro:hover { background: #cfeeda; border-color: #7cc4a0; }
.paleta-pronto-dentro .paleta-quantas { background: #fff; border-color: #a7d9bd; }

/* ⚠️ LARGURA FIXA MESMO VAZIO (`min-width` + `flex: none`), e é o ponto desta regra: sem
   ela, o título de um grupo inserido escorrega dois caracteres para a direita em relação
   ao de um não inserido, e a coluna de oito botões fica desalinhada — o visto passaria a
   mexer no layout em vez de só marcar. */
.paleta-check {
  color: #157347;
  flex: none;
  font-weight: 700;
  min-width: .9em;
  text-align: center;
}

/* A contagem de perguntas. É o que impede o botão de ser caixa-preta — "Dados pessoais"
   pode ser duas perguntas ou seis, e desfazer seis é seis exclusões. */
.paleta-quantas {
  background: #fff;
  border: 1px solid #d6e6de;
  border-radius: 999px;
  color: var(--suave-texto);
  flex: none;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  padding: 1px 6px;
  text-align: center;
}

/* ─── o endereço da vaga, as regras e a triagem ───────────────────────────────────────── */

/* A linha do endereço: URL inteira + copiar + abrir. `min-width: 0` no input é o que o
   impede de empurrar os dois botões para fora do painel — sem isso o flex usa a largura do
   CONTEÚDO como piso, e uma URL comprida some com o "copiar". */
.endereco-linha { display: flex; flex-direction: column; gap: 6px; }
.endereco-acoes { display: flex; gap: 6px; }
/* A caixa que PARECE um campo só: a borda é dela, e as duas peças de dentro não têm
   nenhuma. Sem isto o domínio e o path pareceriam dois controles — que foi exatamente a
   queixa que originou esta linha. */
/* ⚠️ **DUAS LINHAS, E FOI MEDIDO NA TELA.** A primeira versão punha domínio e path lado a
   lado; o painel da direita tem ~250 px úteis e o domínio sozinho ocupa ~230 px em
   monoespaçada de 12 px — o path ficava com zero e sumia da caixa. Empilhados, o link
   continua legível por extenso E o campo continua utilizável. A borda é da CAIXA, então
   as duas linhas ainda leem como um controle só, que é a queixa que originou tudo. */
.endereco-caixa {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  display: flex;
  flex: 1;
  flex-direction: column;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  min-width: 0;
  padding: 6px 9px;
}
.endereco-caixa:focus-within { border-color: var(--marca);
                               box-shadow: 0 0 0 2px rgba(0, 45, 95, .12); }
/* Publicado: o endereço não muda mais, e a caixa inteira fica com cara de travada. */
.endereco-caixa.travada { background: var(--fundo); }

/* ⚠️ O domínio é TEXTO, não campo: `user-select: none` para o duplo-clique selecionar só
   o path, e `flex: none` para ele nunca encolher — encolhido, o link exibido mentiria
   sobre para onde aponta. Quem quer o endereço inteiro usa o botão de copiar. */
.endereco-dominio {
  color: var(--suave-texto);
  font-size: 11px;
  /* Encolhe pelo FIM, se precisar: o começo (`candidato.`) é o que distingue este
     endereço do `conecta.` e do `lab.`. Sem o `https://` ele cabe inteiro no painel. */
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  white-space: nowrap;
}
/* O path é a linha que se edita: fonte um pouco maior e cor cheia, para ficar claro qual
   das duas aceita digitação. */
.endereco-path {
  background: none;
  border: 0;
  color: var(--tinta);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  min-width: 0;
  outline: none;
  padding: 1px 0 2px;
  width: 100%;
}
.endereco-path:read-only { color: var(--suave-texto); }
.endereco-botao {
  align-items: center;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--marca);
  cursor: pointer;
  display: inline-flex;
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
  justify-content: center;
  padding: 7px 8px;
  text-decoration: none;
  white-space: nowrap;
}
.endereco-botao:hover:not(:disabled) { border-color: var(--marca); }
.endereco-botao:disabled { color: var(--suave-texto); cursor: default; opacity: .5; }
.endereco-botao:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* Verde e mais largo enquanto diz "copiado!" — copiar não tem retorno nenhum no
   navegador, e sem a confirmação a pessoa clica de novo. */
.endereco-botao.copiou {
  background: #f0fdf4; border-color: #86efac; color: #15803d;
  font-size: 11px; font-weight: 700; padding: 0 8px;
}

/* (A regra "operador + valor lado a lado" saiu em 17/09/2026 — ver "as linhas de regra",
   mais abaixo: hoje o valor tem a linha inteira para ele.) */

/* A triagem, destacada do resto do painel da pergunta: ela não muda o que o candidato vê
   — muda em que aba da planilha ele cai. Confundir as duas é o erro caro aqui. */
.grupo-criterio {
  background: #f6faf8;
  border: 1px solid #d6e6de;
  border-radius: 10px;
  margin-top: 12px;
  padding: 10px 12px;
}
.grupo-criterio .meta { margin-bottom: 0; }

/* ─── as duas listas de candidatura, e o destaque do qualificado ──────────────────────── */

/* ⚠️ O CARTÃO É A CORREÇÃO DE CONTRASTE (07/09/2026, pedido do usuário), e as abas só
   ganharam peso DEPOIS dele. O problema não era a cor do texto: era não haver fundo
   nenhum atrás dele — a tela desenhava sobre o `plano-de-fundo.png` do painel, e o nome
   da aba caía sobre a marca-d'água BETEL. Escurecer a fonte sobre imagem não resolve
   contraste; tirar a imagem de trás resolve. */
.candidaturas-cartao { padding: 22px 24px 24px; }

.abas-candidaturas {
  border-bottom: 1px solid var(--linha);
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.aba-candidaturas {
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  color: var(--suave-texto);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  /* 15px e 700: os dois nomes são o filtro mais importante desta tela, e em 13px/600 eles
     tinham menos presença do que o cabeçalho da tabela logo abaixo — que é decoração. */
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
  margin-bottom: -1px;
  padding: 10px 16px;
  transition: background-color .12s, color .12s;
}
.aba-candidaturas:hover { background: var(--fundo); color: var(--tinta); }

/* ⚠️ FUNDO **E** SUBLINHADO NA ATIVA, não só a cor da fonte. Antes a única diferença
   entre ativa e inativa era o tom do texto (marca vs. cinza), e sobre a imagem de fundo
   os dois liam igual. Com fundo próprio a aba selecionada é uma FORMA, que se distingue
   sem depender de enxergar a diferença entre dois azuis. */
.aba-candidaturas.ativa {
  background: color-mix(in srgb, var(--marca) 8%, #fff);
  border-bottom-color: var(--marca);
  color: var(--marca);
}
.aba-candidaturas:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

.aba-conta {
  background: var(--fundo);
  border-radius: 999px;
  /* 12.5px e 700 acompanham os 15px do rótulo da aba (07/09/2026): em 11px a pastilha
     ficava um detalhe cinza ao lado de um nome em negrito, e a contagem é justamente o
     que a pessoa compara entre as duas abas. */
  font-size: 12.5px;
  font-weight: 700;
  min-width: 22px;
  padding: 1px 8px;
  text-align: center;
}
.aba-candidaturas.ativa .aba-conta { background: var(--gelo); color: var(--marca); }

/* ⚠️ AZUL PASTEL, e claro de propósito: a linha continua legível com texto escuro em cima
   (medido: --gelo (#f0f4f8) com --tinta (#12283f) dá 13,6:1, muito acima dos 4,5 exigidos).
   Um azul saturado forçaria texto branco e faria a linha destacada parecer SELECIONADA,
   que é outra coisa. */
.candidatura-linha.qualificada { background: var(--gelo-hex); }
.candidatura-linha.qualificada:hover { background: var(--gelo-forte-hex); }
/* A faixa na borda esquerda: é o que sobrevive ao daltonismo e à impressão em preto e
   branco, onde o fundo azul claro vira quase o mesmo cinza do branco. */
.candidatura-linha.qualificada td:first-child {
  box-shadow: inset 3px 0 0 var(--marca);
}

/* ─── sanfonas nas duas colunas laterais ──────────────────────────────────────────────── */

.sanfona { border-top: 1px solid var(--linha); }
.sanfona:first-of-type { border-top: 0; }

.sanfona-cabeca {
  align-items: center;
  background: none;
  border: 0;
  color: var(--tinta);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
  padding: 11px 2px;
  text-align: left;
  width: 100%;
}
.sanfona-cabeca:hover { color: var(--marca); }
.sanfona-cabeca:focus-visible { border-radius: 6px; outline: 2px solid var(--marca);
                                outline-offset: -2px; }
/* ⚠️ **O CHEVRON É DESENHADO, NÃO ESCRITO** (07/09/2026). Era o caractere `▸` — U+25B8,
   cujo nome oficial começa com "small" —, e em 13 px ele virava três pixels acinzentados:
   não dava para ver se a sanfona estava aberta ou fechada.

   Duas bordas rotacionadas dão um chevron com espessura PRÓPRIA (2 px, que não depende da
   fonte) e tamanho em `em`, que acompanha o título como o usuário pediu. A cor é a do
   texto (`currentColor`), então ela escurece junto no `:hover` sem uma segunda regra.

   Gira em vez de trocar de desenho: dois glifos diferentes mudariam de largura e o título
   dançaria um pixel a cada clique. */
.sanfona-seta {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  color: var(--suave-texto);
  display: inline-block;
  flex: none;
  height: .58em;
  /* Empurra 1px para baixo: o chevron rotacionado tem o centro óptico acima do centro
     geométrico, e sem isto ele fica visivelmente alto em relação ao texto. */
  margin: -1px 2px 0 1px;
  transform: rotate(-45deg);
  transition: transform .14s ease;
  width: .58em;
}
/* Aberta: aponta para baixo, e ganha a cor da marca — o estado aberto é o que a pessoa
   precisa distinguir de relance numa coluna com cinco sanfonas. */
.sanfona-cabeca.aberta .sanfona-seta {
  color: var(--marca);
  transform: rotate(45deg) translate(-2px, -2px);
}
.sanfona-cabeca:hover .sanfona-seta { color: var(--marca); }
.sanfona-corpo { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
/* ⚠️ `[hidden]` explícito: o `display: flex` acima ganha do `display: none` que o
   navegador aplica ao atributo, e sem esta linha a sanfona "fechada" continuaria à
   vista — com o `aria-expanded` dizendo o contrário. */
.sanfona-corpo[hidden] { display: none; }

/* O botão que traz a configuração da vaga de volta, no topo do construtor. */
.config-vaga {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--tinta);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 13px;
  white-space: nowrap;
}
.config-vaga:hover { border-color: var(--marca); color: var(--marca); }
/* Aceso quando a configuração já está à vista — sem isso o clique parece não ter feito
   nada quando ela já estava aberta. */
.config-vaga.ativo { background: var(--gelo); border-color: var(--marca); color: var(--marca); }
.config-vaga:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* A contagem de respostas como botão, na lista de formulários. Discreto: ele divide a
   linha com "Pasta", "Duplicar" e "Apagar", e mais um botão chamativo faria a linha
   inteira parecer uma barra de ações. */
.ver-respostas {
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--marca);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 3px 8px;
}
.ver-respostas:hover { background: var(--gelo); border-color: var(--linha); }
.ver-respostas:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

/* ─── a triagem da vaga, o salvar e a trava ───────────────────────────────────────────── */

.triagem-vaga { display: flex; flex-direction: column; gap: 4px; }
/* Cada pergunta é uma faixa: sem a separação, trinta caixas de seleção viram uma parede e
   não dá para ver quais estão ligadas. */
.triagem-linha { border-radius: 8px; padding: 7px 8px; }
.triagem-linha.ligada { background: #f6faf8; border: 1px solid #d6e6de; }
.triagem-linha .regra-linha { margin-top: 7px; }
.triagem-linha .campo-dica { margin: 5px 0 0; }
.triagem-nome {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-size: 12.5px;
  gap: 8px;
  line-height: 1.35;
}
/* ⚠️ `width: auto` EXPLÍCITO. O painel tem uma regra larga que dá `width: 100%` a todo
   campo, e o checkbox herdava os 250 px da coluna: o rótulo da pergunta era empurrado
   para fora da caixa, ilegível na borda direita. `flex: none` sozinho não resolve —
   ele preserva a largura BASE, que era justamente a errada. Visto no retrato. */
.triagem-nome input[type="checkbox"] {
  flex: none;
  margin-top: 2px;
  width: auto;
}
/* `min-width: 0` + quebra: rótulo de pergunta é frase inteira ("POSSUI CURSO DE TBO
   (TREINAMENTO BÁSICO OPERACIONAL)…") e sem isto ele estoura a coluna em vez de quebrar. */
.triagem-nome span { min-width: 0; overflow-wrap: anywhere; }

/* (`.salvar-vaga` e `.descartar-vaga` saíram em 18/09/2026 com o represamento da vaga
   publicada — ver o bloco "Parte A" no fim do arquivo.) */

.selo-travado {
  background: var(--fundo);
  border: 1px solid var(--linha);
  color: var(--suave-texto);
}
/* A trava fica destacada do resto da configuração: ela muda QUEM edita, não o quê. */
.trava-vaga { font-weight: 600; margin-top: 4px; }

/* ─── os ícones dos botões do topo ────────────────────────────────────────────────────── */

/* ⚠️ **MAIOR QUE O TEXTO, DE PROPÓSITO** (07/09/2026, pedido do usuário). Os glifos
   estavam no `textContent` do botão e herdavam os 13 px dele — a engrenagem virava uma
   bolinha sem detalhe nenhum. 16 px é o ponto em que ela mostra os dentes e ainda não
   desalinha a linha do botão.

   `line-height: 1` para o ícone não esticar a altura do botão, e `flex: none` para ele
   nunca encolher quando o rótulo é comprido ("Ver candidaturas (128)"). */
.icone-botao {
  flex: none;
  font-size: 16px;
  line-height: 1;
  /* Sobe 1px: emoji tem a base de desenho um pouco abaixo da linha do texto, e sem isto
     o par ícone+rótulo fica visivelmente desalinhado. */
  transform: translateY(-1px);
}

/* Os quatro botões do topo compartilham a caixa: sem isto, o ícone e o rótulo ficariam
   colados e cada botão alinharia de um jeito diferente conforme o glifo. */
.construtor-topo button,
.construtor-topo a.pasta-vaga {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}
/* O "← Formulários" e o selo de estado não são botões de ação — ficam de fora da regra
   acima para não ganharem o espaçamento de ícone que não têm. */
.construtor-topo .voltar { gap: 4px; }

/* ─── responsivo ──────────────────────────────────────────────────────────────────────── */

/* Entre 700 e 1100: a paleta vira faixa horizontal no topo (com rolagem lateral) e as
   propriedades passam para baixo da tela. Duas colunas em 900px daria 300px de tela útil,
   que é estreito demais para mostrar "como o candidato vê" — o ponto inteiro desta tela. */
@media (max-width: 1100px) {
  .construtor { grid-template-columns: minmax(0, 1fr); }
  .paleta, .propriedades { position: static; }
  .paleta {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px;
  }
  .paleta h3, .paleta > .meta { display: none; }
  .paleta-item { margin: 0; white-space: nowrap; width: auto; }
}

/* Abaixo de 700: continua funcionando. Um aviso, nunca uma tranca — quem precisa corrigir
   um rótulo do celular tem de conseguir. */
@media (max-width: 700px) {
  .construtor::before {
    background: #fffbeb;
    border-left: 3px solid var(--alerta);
    border-radius: 0 8px 8px 0;
    content: "Esta tela foi feita para monitor. No celular dá para corrigir textos, mas arrastar é difícil.";
    display: block;
    font-size: .85rem;
    line-height: 1.4;
    padding: 10px 12px;
  }
  .tela { padding: 16px 14px 20px; }
}


/* ── as linhas de regra (11/09/2026; duas linhas desde 17/09/2026, pedido do usuário) ──
   Uma regra ocupa DUAS linhas: em cima o(s) seletor(es) — o campo-gatilho, quando a regra
   é condição, e o operador ("é igual a", "é maior que") — com o `✕` colado à direita; em
   baixo o VALOR com a largura inteira. Antes operador e valor dividiam uma linha e o valor
   sobrava com dois ou três caracteres à vista ("aperto de informação"); o `max-width: 46%`
   do seletor era o que apertava. As áreas nomeadas fazem o mesmo desenho servir à triagem
   (2 peças) e à condicional (3 peças); no estreito, cada seletor ganha a sua linha. */
.bloco-de-regras { display: flex; flex-direction: column; gap: .6rem; }
.bloco-regra { border-left: 2px solid var(--linha); padding-left: .6rem; }
.regra-linha { display: grid; gap: .45rem .5rem; align-items: center;
               grid-template-columns: minmax(0, 1fr) auto;
               grid-template-areas: "operador tira" "valor valor"; }
.grupo-condicional .regra-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
                                  grid-template-areas: "gatilho operador tira" "valor valor valor"; }
.regra-linha .regra-gatilho { grid-area: gatilho; }
.regra-linha .regra-operador { grid-area: operador; }
.regra-linha .regra-valor { grid-area: valor; }
.regra-linha .tira-regra { grid-area: tira; align-self: center; }
.regra-linha select, .regra-linha input { width: 100%; min-width: 0; max-width: none;
                                          min-height: 40px; }
@media (max-width: 640px) {
  .regra-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .grupo-condicional .regra-linha { grid-template-columns: minmax(0, 1fr) auto;
                                    grid-template-areas: "gatilho tira" "operador operador" "valor valor"; }
}
.juncao-linha { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
                font-size: .9em; color: var(--suave-texto); }
/* ⚠️ DISCRETO. O `✕` remove uma condição; competir visualmente com "+ acrescentar"
   convidaria ao clique errado, e desfazer exige redigitar o valor. */
button.tira-regra { background: none; border-color: transparent; padding: .2rem .45rem;
                    color: var(--suave-texto); line-height: 1; }
button.tira-regra:hover { background: #fef2f2; border-color: #fecaca;
                          color: var(--perigo); }
button.acrescenta-regra { align-self: flex-start; background: none;
                          border-style: dashed; font-size: .9em; }


/* ── a fila de aprovação (11/09/2026) ───────────────────────────────────────────────── */
/* A faixa da devolução: cor de aviso, não de erro. Não houve falha — houve um pedido de
   correção, e quem lê precisa agir, não se assustar. */
.faixa-devolvida { background: #fefce8; border: 1px solid #fde68a; border-radius: .5rem;
                   padding: .7rem .9rem; margin: .6rem 0; }
.faixa-devolvida strong { display: block; margin-bottom: .35rem; }
.faixa-devolvida p { margin: .2rem 0; white-space: pre-wrap; }
.acoes-da-fila { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Quem não aprova lê uma frase, não um botão desabilitado: botão apagado convida ao
   clique e não explica por que não responde. */
.aguardando { max-width: 34ch; text-align: right; }


/* O recado de SUCESSO reusa a caixa de erro desta tela (é a única). A cor é o que separa
   os dois — ver `avisa`, que tira esta classe ao mostrar um erro. */
.construtor-erro.ok { color: var(--ok); }


/* ── a página de teste (18/09/2026) ─────────────────────────────────────────────────── */
/* A faixa amarela: cor de aviso, não de erro — não há nada errado, é o lembrete de que
   nada ali será gravado. `position: sticky` porque a tela pública pode ser mais alta que
   a janela, e o aviso não pode rolar para fora de vista bem quando alguém aperta enviar. */
.faixa-de-teste { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column;
                 gap: 6px; padding: 10px 14px; background: #fff7d6;
                 border-bottom: 2px solid #e6b800; }
.faixa-de-teste-linha { display: flex; gap: 10px; align-items: center; }
/* (A faixa teve uma segunda linha de aviso ("N alterações não salvas") entre a manhã e a
   tarde de 18/09/2026, enquanto a vaga publicada represava as edições. A Parte A acabou
   com o represamento e o aviso não tinha mais o que avisar; a classe saiu junto.) */
.palco-de-teste { padding: 16px 0; }
.ficha-veredito { font-weight: 600; padding: 10px 12px; border-radius: 8px; }
.ficha-veredito.ok { background: #f0fdf4; color: #15803d; }
.ficha-veredito.nao { background: #fef2f2; color: #b91c1c; }
.ficha-veredito.neutro { background: var(--fundo); color: var(--suave-texto); }

/* ─── Parte A — a versão pendente (18/09/2026) ────────────────────────────────────────
   A vaga publicada é somente leitura: o editor continua à vista (é o que o candidato vê),
   mas nada nele responde. Quem quer mudar clica em "Alterar" e edita a CÓPIA. */
.construtor.leitura .tela, .construtor.leitura .propriedades { opacity: .92; }
/* ⚠️ `not-allowed` E FUNDO CHAPADO: sem eles um campo desabilitado parece um campo comum
   que "não está pegando a digitação" — e a pessoa procura o defeito em vez de ler a
   explicação que está na coluna da esquerda. */
.construtor.leitura .propriedades input:disabled, .construtor.leitura .propriedades textarea:disabled,
.construtor.leitura .propriedades select:disabled { cursor: not-allowed; background: var(--fundo); }
.paleta-leitura h3 { margin: 0 0 .5rem; }
.endereco-path-fixo { font-family: ui-monospace, monospace; font-size: 13px; }
.faixa-alteracao { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--gelo); border: 1px solid rgba(0, 80, 144, .22); border-radius: .5rem; padding: .6rem .9rem; margin: .6rem 0; }
.faixa-alteracao .cresce { flex: 1; }
.descartar-alteracao { font-size: 13px; }
/* O segundo clique muda de COR e de TEXTO ("Confirmar descarte"): só o texto faria a
   confirmação passar despercebida no mesmo botão cinza. */
.descartar-alteracao.confirmando { background: var(--perigo); color: #fff; border-color: var(--perigo); }
.selo-alteracao { margin-left: .35rem; font-size: 11px; }
.selo-alteracao-rascunho { background: var(--fundo); color: var(--suave-texto); }
.selo-alteracao-aguardando_aprovacao { background: #fefce8; color: #854d0e; }

/* "Melhorar com IA" (25/09/2026) */
.descricao-com-ia { display: flex; flex-direction: column; gap: .4rem; }
.melhorar-ia { align-self: flex-start; font-size: 13px; }
.faixa-ia { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border-radius: .5rem; padding: .5rem .8rem; font-size: 13px; }
.faixa-ia .cresce { flex: 1; }
.faixa-ia-andamento { background: var(--gelo); border: 1px solid rgba(0, 80, 144, .22); }
.faixa-ia-ok { background: #ecfdf5; border: 1px solid #a7f3d0; }
.faixa-ia-erro { background: #fef2f2; border: 1px solid #fecaca; color: var(--perigo); }
.desfazer-ia { font-size: 13px; }

/* ─── Task 9 — o indicador 📱 e o selo por candidatura (21/09/2026) ─────────────────────
   O diálogo de disparo mudou para `candidaturas.css` em 23/09/2026, junto com o disparo. */

.coluna-whatsapp { white-space: nowrap; width: 1%; }
/* ⚠️ TEXTO, NÃO BOTÃO (23/09/2026): o disparo mudou para a tela de candidaturas, e aqui
   sobrou a contagem. Sem cor de estado de propósito — ele informa, não convida ao clique. */
.whatsapp-indicador { white-space: nowrap; color: var(--suave-texto); font-size: 12px; }
/* As cores repetem o vocabulário dos outros selos deste arquivo (`.selo-aberto`,
   `.selo-fechado`): verde é "chegou", amarelo é "esperando", vermelho é "não deu certo" —
   ninguém aprende um código de cor novo para esta coluna. */
.selo-whatsapp-enviado { background: #ecfdf5; color: var(--ok); }
.selo-whatsapp-nao_contatado { background: var(--fundo); color: var(--suave-texto); }
.selo-whatsapp-na_fila { background: var(--gelo); color: var(--marca); }
.selo-whatsapp-sem_whatsapp { background: #fefce8; color: #854d0e; }
.selo-whatsapp-falhou, .selo-whatsapp-cancelado { background: #fef2f2; color: var(--perigo); }
/* A RESPOSTA (adendo §8, 22/09/2026): cor forte, de propósito — decisão do usuário. É o
   selo mais importante da coluna (é o que a Seleção olha primeiro), então não usa o mesmo
   tom pastel do "enviado"/"na fila". */
.selo-whatsapp-interessado { background: #16a34a; color: #fff; }
.selo-whatsapp-sem_interesse { background: var(--perigo); color: #fff; }


/* "Publicando…" e o resultado da revisão ortográfica (25/09/2026). ⚠️ A falha é AMARELA,
   não vermelha: a revisão falhar não impede a publicação — a vaga está no ar. */
.faixa-publicando, .faixa-publicacao-ok, .faixa-publicacao-falhou {
  border-radius: .5rem; padding: .5rem .8rem; font-size: 13px; margin-bottom: .6rem; }
.faixa-publicando { background: #fefce8; border: 1px solid #fde68a; color: #854d0e; }
.faixa-publicando::before { content: "⏳ "; }
.faixa-publicacao-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.faixa-publicacao-falhou { background: #fefce8; border: 1px solid #fde68a; color: #854d0e; }

/* ── Transferir formulários (23/10/2026) — `transferencia_formularios.js` ─────────────────
   Dois seletores lado a lado (um embaixo do outro no celular), a lista com um interruptor
   por linha e o rodapé com a contagem e o botão. Cores só por token. */
.transf-seletores { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 16px; }
@media (max-width: 720px) { .transf-seletores { grid-template-columns: 1fr; } }
.transf-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.transf-campo select { width: 100%; font-weight: 400; }
.transf-recado { color: var(--ok); font-weight: 600; }
.transf-lista .transf-coluna-chave { width: 64px; text-align: center; }
.transf-lista .transf-respostas { text-align: right; }
.transf-linha.marcada td { background: var(--gelo-hex); }
.transf-arquivado { margin-left: 6px; background: var(--gelo-forte-hex); color: var(--suave-texto); }
.transf-chave { position: relative; width: 42px; height: 24px; margin: 0; padding: 0; border: 0;
  border-radius: 999px; background: var(--linha); cursor: pointer; transition: background .15s; }
.transf-chave .transf-chave-bolinha { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.transf-chave.ligada { background: var(--marca); }
.transf-chave.ligada .transf-chave-bolinha { left: 21px; }
.transf-chave:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.transf-rodape { display: flex; align-items: center; gap: 12px; margin-top: 16px; }