/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* RH: CANDIDATOS (tarefa r37, 26/09/2026): o que a tela assets/js/telas/candidatos.js desenha e o kit do
   painel ainda não tinha. Cores, raios e fontes vêm dos tokens do painel (assets/css/tokens.css), nos dois
   temas: nada de cor escrita à mão aqui. */

/* OS FILTROS: rótulo em cima de cada seletor, e a fileira quebra de linha no celular (nunca rola de lado) */
.rh-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}
/* no celular, uma grade de duas colunas: os filtros continuam descendo de linha (nunca rolam de lado), mas
   alinhados em colunas, e nao em linhas desiguais (2 + 2 + 2 + 1, MEDIDO a 390, 375 e 360, r38) */
@media (max-width: 639.98px) {
  .rh-filtros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rh-filtro {
    min-width: 0;
  }
}
.rh-filtro {
  display: grid;
  gap: 4px;
  min-width: 150px;
  flex: 1 1 150px;
  font-size: 13px;
  color: var(--muted-foreground);
}
.rh-filtro .seletor {
  width: 100%;
}

/* A FICHA DO CADASTRO: um bloco por etapa do formulário */
.rh-etapa + .rh-etapa {
  margin-top: 18px;
}
.rh-etapa h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.rh-item {
  margin: 12px 0 2px;
  font-size: 13px;
  color: var(--muted-foreground);
}
.rh-texto {
  white-space: pre-wrap;
}
.rh-situacao {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.rh-situacao textarea {
  width: 100%;
  resize: vertical;
}
.rh-situacao .btn {
  justify-self: start;
}
.rh-historico {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.rh-historico p {
  margin: 4px 0 0;
}
.rh-confirmar {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rh-confirmar p {
  flex: 1 1 100%;
  margin: 0;
}
/* O CADASTRO DO MODO DE DESENVOLVIMENTO (tarefa r51) e a candidatura PARA CONFERIR (r52): as marcas embaixo do nome, na
   lista, e a frase no alto da ficha. A linha do e-mail (.sub) já é bloco, então as marcas começam embaixo dela, lado a
   lado e descendo de linha quando não cabem; a margem de cima impede que encostem. */
.rh-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.rh-aviso-teste {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
}

/* AS TRÊS LISTAS DO FORMULÁRIO, lado a lado no computador e uma embaixo da outra no celular. O vão entre os
   cartões é o mesmo da grade do painel: cartão encostado em cartão é o defeito que o medidor de colisão
   existe para pegar. */
.rh-titulo-listas {
  margin: 8px 0 0;
  font-size: 18px;
}
.rh-listas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}
.rh-itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.rh-item-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--pontos);
}
.rh-item-lista input[type="text"] {
  flex: 1 1 100%;
  min-width: 0;
  /* 32 px no mouse: com 27 px o campo do nome ficava abaixo do piso de 28 px de alvo (r38) */
  min-height: 32px;
}
/* no celular, grade: o nome na linha inteira, as duas chaves lado a lado e o botao na linha inteira
   (com flex, 1 + 2 + 1 em linhas desiguais, r38) */
@media (max-width: 639.98px) {
  .rh-item-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rh-item-lista > :is(input[type="text"], :last-child) {
    grid-column: 1 / -1;
  }
}
.rh-item-lista.desligado input[type="text"] {
  color: var(--muted-foreground);
}
.rh-caixa {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}
.rh-novo {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.rh-novo input {
  flex: 1;
  min-width: 0;
}

/* As três listas são cartões SEPARADOS, com borda e canto do painel: cada uma é um assunto. É também o que
   deixa o medidor de colisão (scripts/testar-rh-tela.mjs, T7) enxergar cada cartão e conferir o vão entre eles:
   ele só conta como caixa o que tem canto arredondado. */
.rh-lista-cartao {
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* O TEMPO DE CARRO NA FICHA e OS NÚMEROS DO CONJUNTO (tarefa r51). Lista simples, com o vão da grade do painel entre
   um bloco e outro: caixa encostada é o defeito que o medidor de colisão existe para pegar. */
.rh-tempos {
  margin: 0 0 8px;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.rh-conjunto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.rh-conjunto-bloco h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.rh-conjunto-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.rh-conjunto-lista li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* A FAIXA DE ETAPAS (r52): um botão por etapa, com o número ao lado. No computador quebra de linha se faltar largura; no
   celular vira grade de duas colunas (6 etapas = 3 linhas), como os filtros: nunca rola de lado, e nenhum botão encosta
   no outro. A etapa escolhida (aria-pressed) ganha o fundo do painel, e não só a cor: quem não distingue cor lê o
   contorno grosso. */
.rh-etapas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rh-etapa-botao {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.rh-etapa-botao b {
  font-variant-numeric: tabular-nums;
}
.rh-etapa-botao:hover {
  background: var(--accent);
}
.rh-etapa-botao[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  font-weight: 600;
}
@media (max-width: 639.98px), (pointer: coarse) {
  .rh-etapa-botao {
    min-height: 44px;
  }
}
@media (max-width: 639.98px) {
  .rh-etapas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A FICHA (r52): passar de etapa, currículo mais novo e o que a pessoa fez na área. `.rh-passar` é uma caixa de verdade
   (borda e canto), e por isso o medidor de colisão a enxerga na ficha e confere o vão até o aviso de cima. */
.rh-passar {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.rh-passar textarea {
  width: 100%;
  resize: vertical;
}
.rh-passar .btn {
  justify-self: start;
}
.rh-outra-etapa {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.rh-outra-etapa label {
  display: grid;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
  font-size: 13px;
  color: var(--muted-foreground);
}
.rh-outra-etapa .seletor {
  width: 100%;
}
.rh-curriculo-novo {
  margin-top: 12px;
}
.rh-curriculo-novo p {
  margin: 0 0 8px;
}
.rh-registro {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 14px;
}
.rh-aviso-conferir {
  border-color: var(--alerta);
}

/* O CARTÃO DE VAGAS (r52). Cada vaga é uma linha com borda de pontos (como as listas do formulário) e não uma caixa
   dentro do cartão: caixa dentro de caixa é onde o vão zero aparece. Os botões descem de linha no celular. */
.rh-vagas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.rh-vaga {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px dotted var(--pontos);
}
.rh-vaga.fechada > .rh-vaga-topo b {
  color: var(--muted-foreground);
}
.rh-vaga p {
  margin: 0;
}
.rh-vaga .sub {
  color: var(--muted-foreground);
  font-size: 13px;
}
.rh-vaga-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.rh-vaga-empresa {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 14px;
}
.rh-vaga-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.rh-vaga-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.rh-vaga-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 13px;
  color: var(--muted-foreground);
}
.rh-vaga-form .rh-vaga-texto,
.rh-vaga-form .rh-vaga-botoes {
  grid-column: 1 / -1;
}
.rh-vaga-form input[type="text"],
.rh-vaga-form textarea,
.rh-vaga-form .seletor {
  width: 100%;
  min-width: 0;
}
.rh-vaga-form textarea {
  resize: vertical;
}
.rh-vaga-nova {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.rh-vaga-nova h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
@media (max-width: 639.98px) {
  .rh-vaga-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* O NOME DO ARQUIVO DO CURRÍCULO É COMPRIDO ("Baixar o currículo mais novo (curriculo-b.pdf)"), e o botão da casa não
   quebra linha: a 390 px empurrava a ficha 8 px de lado (medido pelo T7, r52). Dentro da ficha o botão quebra a linha. */
.rh-etapa .btn {
  max-width: 100%;
  height: auto;
  min-height: 36px;
  padding-block: 6px;
  white-space: normal;
  text-align: left;
}

/* OS DOCUMENTOS DA ADMISSÃO NA FICHA (r53). Cada documento é uma linha com borda de pontos, como as vagas e as listas do
   formulário, e NÃO uma caixa dentro da caixa da ficha: caixa dentro de caixa é onde o vão zero aparece. Só o pedido de
   "Mandar de novo" abre uma caixa (com borda), e ela nasce com o vão da grade em cima. Nomes de arquivo são compridos: quebram
   de linha em vez de empurrar a ficha para o lado (medido a 390 px). */
.rh-adm-resumo {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}
.rh-adm-docs {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.rh-adm-doc {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px dotted var(--pontos);
  min-width: 0;
}
.rh-adm-doc p {
  margin: 0;
}
.rh-adm-cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.rh-adm-cabeca b {
  overflow-wrap: anywhere;
  min-width: 0;
}
.rh-adm-cabeca .sub {
  font-size: 13px;
  color: var(--muted-foreground);
}
.rh-adm-arquivos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.rh-adm-arquivos li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  min-width: 0;
}
.rh-adm-arquivo-nome {
  overflow-wrap: anywhere;
  min-width: 0;
}
.rh-adm-arquivos .sub,
.rh-adm-doc > .sub {
  font-size: 13px;
  color: var(--muted-foreground);
}
.rh-adm-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rh-adm-pedido {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.rh-adm-pedido[hidden] {
  display: none;
}
.rh-adm-pedido label {
  font-size: 14px;
  font-weight: 600;
}
.rh-adm-pedido textarea {
  width: 100%;
  resize: vertical;
}
.rh-adm-pedido .sub {
  margin: 0;
  font-size: 13px;
  color: var(--muted-foreground);
}
.rh-adm-erro {
  font-size: 13px;
  font-weight: 600;
  color: var(--perigo);
}
.rh-adm-erro[hidden] {
  display: none;
}
.rh-passar-motivo {
  margin: 0;
  font-size: 13px;
  color: var(--muted-foreground);
}
.rh-passar-motivo[hidden] {
  display: none;
}
@media (max-width: 639.98px), (pointer: coarse) {
  .rh-adm-botoes .btn,
  .rh-adm-arquivos .btn {
    min-height: 44px;
  }
}

/* AS CHAVES DE INTEGRAÇÃO (tarefa rhapi-dados-zama, assets/js/telas/rh-chaves.js): a lista e o formulário reaproveitam os
   das vagas; aqui só o que é delas (as caixas dos escopos, o quadro da chave nova e a tabela das chamadas). */
.rh-chaves {
  margin-top: 8px;
}
.rh-chave-form input[type="date"] {
  width: 100%;
  min-width: 0;
}
.rh-chave-escopos {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.rh-chave-escopos legend {
  padding: 0 4px;
  font-size: 13px;
  color: var(--muted-foreground);
}
.rh-chave-form .rh-chave-escopo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--foreground);
}
.rh-chave-escopo input {
  margin-top: 3px;
  flex: none;
}
.rh-chave-escopo span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.rh-chave-nova {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
}
.rh-chave-valor {
  width: 100%;
  min-width: 0;
  font-family: var(--fonte-mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--foreground);
  resize: none;
  overflow: hidden;
  /* a chave não tem espaço: sem isto ela não quebra e passa da borda */
  overflow-wrap: anywhere;
  word-break: break-all;
}
.rh-chave-chamadas {
  overflow-x: auto;
}
.rh-chave-chamadas table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rh-chave-chamadas caption {
  text-align: left;
  padding-bottom: 6px;
  color: var(--muted-foreground);
}
.rh-chave-chamadas th,
.rh-chave-chamadas td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.rh-chave-chamadas td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}