/* A tela de candidaturas (spec 2026-09-23). Nenhuma cor nova: tudo sai das variáveis do
estilo.css. */
/* ⚠️ FOLHA PRÓPRIA, saída do `construtor.css` em 23/09/2026 junto com o `candidaturas.js`.
Ela NÃO é autossuficiente de propósito: a tabela reusa `.construtor-lista` (mesma tabela,
mesmo hover, mesmo foco) e o topo reusa `.construtor-topo` — duas tabelas parecidas no
mesmo painel divergem no primeiro ajuste de padding. As duas folhas carregam juntas no
`index.html`, então o reúso continua valendo.
⚠️ E O QUE NÃO VEIO JUNTO: `.selo-whatsapp-*`, `.pasta-vaga`, `.coluna-pasta`,
`.icone-botao` e a faixa `.desfazer` continuam no `construtor.css` porque a LISTA DE
VAGAS também as usa; `.candidaturas-cartao`, `.aba-candidaturas`,
`.candidatura-linha.qualificada` e `.ficha-veredito` ficaram lá porque moram em outras
seções daquela folha (a das abas e a da ficha de teste) — mudança de arquivo sem
necessidade é diff que esconde o que importa. As duas folhas carregam juntas. */
/* ─── as candidaturas: a lista ────────────────────────────────────────────────────────── */
/* O nome da vaga ao lado do título, e não no lugar dele: "Candidaturas" diz em que tela a
pessoa está, o apelido diz de qual vaga. `min-width: 0` + reticências para um título
longo não empurrar os botões do topo para fora da tela. */
.candidaturas-vaga {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* O "Exportar planilha" desabilitado — a vaga ainda não tem candidatura nenhuma.
⚠️ **`.pasta-vaga` SÓ APAGA O BOTÃO PELA CLASSE `.sem-pasta`**, que é do botão da pasta e
não deste. Sem esta regra, o botão desabilitado sairia com a cor da marca e o cursor de
mão — a tela convidaria um clique que não acontece, e a pessoa concluiria que a
exportação está quebrada. `cursor: default` e não `not-allowed` pelo mesmo motivo de lá:
não há nada de errado no clique, simplesmente não há o que exportar. Quem explica é o
`title`. */
.exportar-planilha:disabled {
color: var(--suave-texto);
cursor: default;
opacity: .6;
}
/* ─── a grade: todas as colunas, no formato da planilha (spec 2026-09-23 §4.2) ─────────── */
/* ⚠️ **A GRADE É A ÁREA DE ROLAGEM, NOS DOIS EIXOS, e o cabeçalho é `sticky` DENTRO dela.**
Um `position: sticky` só prende ao ancestral que ROLA; com `overflow-x: auto` aqui e a
PÁGINA rolando na vertical, o cabeçalho prenderia a esta caixa e sumiria junto com ela
— ou seja, não prenderia a nada de útil. Dar altura à caixa (o que sobra da janela
abaixo do topo fixo) é o que faz o cabeçalho ficar SEMPRE à vista, que é o pedido
("o header fique lá para ele ver quais as colunas").
Os 190px descontados são o topo da tela + as abas + a caixa de aviso; sobrando pouco,
a grade encolhe em vez de empurrar a página. */
.candidaturas-rolagem {
border: 1px solid var(--linha);
border-radius: 8px;
max-height: calc(100vh - var(--altura-topo) - 190px);
overflow: auto;
}
/* ⚠️ `separate` E NÃO `collapse` (que é o que `.construtor-lista` traz): com bordas
colapsadas o navegador NÃO pinta a borda de uma célula `sticky` — ela pertence à
tabela, não à célula, e some na rolagem. Daí também o `box-shadow: inset` no lugar de
`border` no cabeçalho e na coluna `#`.
`width: max-content` + `min-width: 100%`: 25 colunas não cabem em 100% sem espremer
cada uma a três letras; com poucas colunas a tabela ainda ocupa a largura toda. */
.candidaturas-grade { border-collapse: separate; border-spacing: 0;
min-width: 100%; width: max-content; }
/* ⚠️ **O CORTE COM RETICÊNCIAS É DO RÓTULO, NÃO DO `
`.** Enquanto o cabeçalho era só
texto, `overflow: hidden` no `
` bastava; com o `▾` do menu ao lado, o mesmo recorte
comia o BOTÃO — a coluna de rótulo comprido ficava sem como ser ordenada ou filtrada, e
nada na tela dizia por quê. Daí os dois nós (ver `cabecalho` no JS): o `` corta, o
botão fica inteiro.
⚠️ E O `
` CONTINUA `table-cell`. `display: flex` aqui alinharia os dois filhos com
uma linha de CSS — e quebraria a tabela: um filho de `table-row` que não é `table-cell`
é embrulhado numa célula anônima, e células anônimas CONSECUTIVAS viram UMA só. O
cabeçalho inteiro colapsaria numa coluna. `inline-block` nos dois filhos resolve o
alinhamento sem sair do modelo de tabela. */
.candidaturas-grade thead th {
background: #fff;
box-shadow: inset 0 -1px 0 var(--linha);
position: sticky;
top: 0;
white-space: nowrap;
z-index: 3;
}
.candidaturas-grade thead th .th-rotulo {
display: inline-block;
max-width: 28ch;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
/* A coluna `#` fica à esquerda ao rolar de lado: é por ela que se volta à linha certa
depois de percorrer 25 colunas. `z-index` maior no cabeçalho dela, que é sticky nos
DOIS eixos e passa por baixo das outras células se empatar. */
.candidaturas-grade th.coluna-id,
.candidaturas-grade td.coluna-id {
background: #fff;
box-shadow: inset -1px 0 0 var(--linha);
left: 0;
position: sticky;
z-index: 2;
}
.candidaturas-grade thead th.coluna-id { z-index: 4; }
/* ⚠️ **A CÉLULA GRUDADA PRECISA REPETIR A COR DA LINHA.** Ela tem fundo OPACO próprio (é o
que impede o texto das outras colunas de passar por baixo ao rolar), e um fundo opaco
não deixa passar o `background` do `
`: sem estas três regras, a coluna `#` fica
branca e morta enquanto a linha inteira acende no hover ou no azul do qualificado —
justamente na coluna por onde o olho segue a linha.
⚠️ E A ORDEM DELAS NÃO DECIDE NADA — o comentário que estava aqui dizia que sim. As
duas primeiras empatam em especificidade (0,3,3: `:hover` conta como classe, no mesmo
lugar de `.qualificada`), mas só se encontram no MESMO elemento quando a linha é
qualificada E está sob o cursor — e aí a terceira, que soma as duas (0,4,3), vence
ambas por especificidade, esteja ela escrita onde estiver. Trocá-las de lugar não muda
pixel nenhum; o que não se pode é apagar a TERCEIRA, o único desempate que existe. */
.candidaturas-grade tbody tr:hover td.coluna-id { background: var(--fundo); }
.candidaturas-grade tbody tr.qualificada td.coluna-id { background: var(--gelo-hex); }
.candidaturas-grade tbody tr.qualificada:hover td.coluna-id { background: var(--gelo-forte-hex); }
/* Uma linha por célula, cortada com reticências — é o que deixa 25 colunas caberem sem
que uma resposta de parágrafo estique a linha inteira. O texto completo fica no
`title` (ver `celula` no JS) e na ficha. */
.candidaturas-grade td {
max-width: 36ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.candidaturas-grade td.coluna-texto_longo { max-width: 48ch; }
/* A pergunta saiu do formulário, a coluna fica (D9). Em itálico apagado, e não escondida:
as respostas antigas continuam no banco e na planilha. */
.candidaturas-grade th.coluna-inativa .th-rotulo {
color: var(--suave-texto);
font-style: italic;
}
/* Um link por arquivo, empilhados: nome de anexo de candidato é comprido
("Certificado TBO - JOAO DA SILVA SOUZA 2024.pdf") e dois lado a lado quebram no meio
da palavra. Mesmo clipe da ficha, para o olho reconhecer a mesma coisa nas duas telas. */
.candidaturas-grade .anexo-link {
color: var(--marca);
display: block;
text-decoration: underline;
text-underline-offset: 2px;
}
.candidaturas-grade .anexo-link::before { content: "📎 "; text-decoration: none; }
/* O dropdown de Status. ⚠️ AS CORES SÃO AS DO PAINEL (`--ok`, `--perigo`, `--marca`), e
não um verde/vermelho novos: a área Vagas não tem paleta por ETAPA (só aceso/apagado
nos círculos), então o que mantém a linguagem visual única aqui são os tokens do
`estilo.css` — a mesma regra que o cabeçalho desta folha já declara. */
.status-candidatura {
background: #fff;
border: 1px solid var(--linha);
border-radius: 6px;
font: inherit;
padding: 3px 6px;
}
.status-candidatura.status-aprovado { border-color: var(--ok); color: var(--ok); }
.status-candidatura.status-reprovado,
.status-candidatura.status-desistiu { border-color: var(--perigo); color: var(--perigo); }
.status-candidatura.status-entrevistado,
.status-candidatura.status-encaminhado,
.status-candidatura.status-em_selecao { border-color: var(--marca); color: var(--marca); }
/* Verde-marca porque é a ação boa desta tela (levar o dado para a planilha), e um `` e
não um `