/* =====================================================================
   RECRUTAMENTO E SELEÇÃO — folha do portal PÚBLICO (/processo-seletivo)

   Carregada pelo `header-assets` como as demais folhas custom. As
   páginas públicas usam o tema Phoenix (é o "padrão visual da
   plataforma" pedido) com a paleta da tela de login; esta folha só
   acrescenta o que o tema não tem. Classes prefixadas `sel-` para não
   colidir com nada.
===================================================================== */

/* ⚠️ NÃO DECLARAR `padding-top` EM `.sel-publico`. O `.content` do tema
   já recua o conteúdo pela altura da barra superior fixa
   (`--phoenix-navbar-top-height` + 2rem); sobrescrever o recuo fez o
   título das páginas nascer ESCONDIDO atrás da barra.

   ⚠️ O Phoenix dá `padding` de 2.5rem (mais em telas grandes) a TODA
   `<section>` — é regra de landing page. Nas páginas do portal isso abria
   buracos entre os blocos; o espaçamento aqui é o das margens utilitárias. */
.sel-publico section { padding-top: 0; padding-bottom: 0; }

.sel-capa h1 { font-weight: 700; line-height: 1.15; }

/* Coluna única e centrada (Banco de Talentos).

   ⚠️ O TETO DE LARGURA É DO FORMULÁRIO, não estético: linha de campo que
   atravessa um monitor largo faz o olho perder a associação entre o rótulo
   e o que vem depois, e os campos curtos (UF, CPF) ficam absurdos. Aqui o
   valor acompanha o `col-md-*` do formulário — abaixo disso os pares
   Nome/CPF e E-mail/Telefone deixariam de caber lado a lado. */
.sel-coluna { max-width: 920px; margin-inline: auto; }
.sel-capa-texto { max-width: 640px; }

/* honeypot: fora da tela, nunca `display:none` (bot que confere
   visibilidade o ignoraria) */
.sel-hp {
    position: absolute !important;
    left: -5000px !important; top: -5000px !important;
    height: 0; width: 0; overflow: hidden;
}

/* cartão de um processo aberto */
.sel-processo-card {
    border-radius: 18px;
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
}
.sel-processo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
}
.sel-processo-card .sel-prazo { font-size: .8rem; }
.sel-processo-card .sel-prazo strong { font-weight: 700; }

/* convite ao banco de talentos */
.sel-banco-card { border-radius: 18px; border: 1px solid var(--phoenix-border-color); }
.sel-banco-icone {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--phoenix-primary-bg-subtle);
    color: var(--phoenix-primary); font-size: 1.3rem;
}

/* Compromisso de inclusão (topo do Banco de Talentos).

   ⚠️ DESTAQUE MODERADO POR CONSTRUÇÃO: filete de acento à esquerda e
   fundo suave, nunca faixa de cor cheia. A peça mais chamativa da página
   tem de continuar sendo o FORMULÁRIO — é ele que faz a inclusão
   acontecer; um banner que o ofusque transforma a declaração em cartaz. */
.sel-inclusao {
    border-radius: 14px;
    padding: 1rem 1.15rem;
    border: 1px solid var(--phoenix-border-color);
    border-left: 4px solid var(--phoenix-primary);
    background: var(--phoenix-primary-bg-subtle);
}
.sel-inclusao-icone {
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--phoenix-primary);
    flex: 0 0 auto;
}

/* AS DUAS PORTAS do Banco de Talentos.

   ⚠️ SÃO `<button class="card">`: o fundo e a borda vêm do TEMA, então
   claro e escuro saem certos sem uma segunda paleta aqui. Esta folha só
   acrescenta o que o tema não tem — layout, cursor e o realce de foco.

   ⚠️ OS DOIS CARDS SÃO IDÊNTICOS. Não há `.sel-porta--reserva` com cor ou
   tamanho próprios, e não deve haver: um card maior ou colorido ao lado
   de outro neutro lê como "marcado", que é o oposto de valorizado. O que
   distingue é o ícone e o texto; o que valoriza é vir PRIMEIRO. */
.sel-porta {
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    border-radius: 18px;
    transition: border-color .15s, box-shadow .15s;
}
.sel-porta:hover { border-color: var(--phoenix-primary); }
/* ⚠️ `:focus-visible` com realce próprio: o tema não estiliza foco em
   `.card`, e sem isto quem navega por teclado não vê onde está — nesta
   página, mais do que em qualquer outra. */
.sel-porta:focus-visible {
    outline: none;
    border-color: var(--phoenix-primary);
    box-shadow: 0 0 0 .2rem var(--phoenix-primary-bg-subtle);
}
.sel-porta-icone {
    font-size: 1.6rem;
    color: var(--phoenix-primary);
    line-height: 1;
    margin-bottom: .75rem;
}
.sel-porta-titulo { font-weight: 700; font-size: 1.05rem; line-height: 1.25; margin-bottom: .35rem; }
.sel-porta-texto {
    font-size: .8rem;
    color: var(--phoenix-secondary-color, var(--phoenix-body-secondary-color));
    /* empurra a ação para a base: com textos de alturas diferentes, os
       dois botões terminam alinhados */
    flex: 1 1 auto;
    margin-bottom: .9rem;
}
.sel-porta-acao { font-weight: 600; font-size: .85rem; color: var(--phoenix-primary); }

/* Reserva de vagas — o bloco dentro do formulário.

   ⚠️ SEM COR DE ALERTA. Verde diria "parabéns", âmbar diria "atenção" e
   vermelho diria "problema" — os três leem a declaração como exceção. O
   bloco é neutro, como qualquer outro campo do formulário. */
.sel-reserva {
    border-radius: 14px;
    padding: 1rem 1.15rem;
    border: 1px solid var(--phoenix-border-color);
    background: var(--phoenix-body-highlight-bg);
}
.sel-reserva-detalhe {
    border-top: 1px dashed var(--phoenix-border-color);
    padding-top: 1rem;
}

/* Cartão do quadro que ABRE UM FILTRO (área do RH). O cursor e o realce
   são o que distingue "número" de "atalho" — sem eles ninguém descobre
   que o cartão é clicável, e a separação que a gestão pediu fica atrás de
   um seletor que também ninguém procura. */
.sel-cartao-acao { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sel-cartao-acao:hover,
.sel-cartao-acao:focus-visible {
    border-color: var(--phoenix-warning);
    box-shadow: 0 0 0 .15rem var(--phoenix-warning-bg-subtle);
}

/* cartões de apoio (banco de talentos) */
.sel-modulo {
    border-radius: 14px; padding: 1rem;
    border: 1px solid var(--phoenix-border-color);
    background: var(--phoenix-body-highlight-bg);
}

/* o formulário */
.sel-form-card { border-radius: 18px; }
.sel-form-card .form-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04rem; }
.sel-form-card .form-control, .sel-form-card .form-select { min-height: 44px; border-radius: 12px; }
.sel-form-card textarea.form-control { min-height: auto; }
.sel-form-card .btn-primary { min-height: 48px; border-radius: 12px; font-weight: 600; }

.sel-texto { white-space: pre-line; line-height: 1.7; }

/* confirmação */
.sel-selo {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--phoenix-success-bg-subtle); color: var(--phoenix-success); font-size: 1.6rem;
}

@media (max-width: 991px) {
    .sel-form-card.sticky-top { position: static !important; }
}