/*
 * Portal PÚBLICO de vagas + área do candidato (portal-vagas-publico) — Blade/Livewire puro, FORA do
 * Filament, servido pelo layout `components.layouts.app`. FOLHA ESTÁTICA VERSIONADA (sem CSS inline em
 * view — CLAUDE.md §7; sem NPM/Vite — §4). Reusa as custom properties de tema (claro/escuro) definidas
 * em `centralrh-auth.css`, que é carregada ANTES desta no layout.
 *
 * Cobre as telas: listagem de vagas (.portal-vagas / .portal-vaga-card), detalhe (.portal-vaga), estado
 * (.portal-estado), auth do candidato (.portal-auth), landing (.portal-home), envio de candidatura
 * (.portal-candidatura) e editor de currículo (.portal-cv).
 *
 * O layout aplica `body { display:grid; place-items:center }` (herdado do auth): telas curtas
 * (auth/estado) ficam centradas; telas longas (listagem/detalhe/cv) fixam no topo via `align-self:start`.
 */

/* ── Sombra reutilizável dos cartões ─────────────────────────────────────────────────────────── */
:root {
    --portal-shadow: 0 6px 22px rgba(2, 6, 23, .08);
    /* Ícone de "check" (heroicon mini) como máscara SVG — pinta-se com background-color (verde de
     * sucesso). Data-URI: sem arquivo externo, sem NPM (CLAUDE.md §4). */
    --portal-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.dark { --portal-shadow: 0 8px 26px rgba(0, 0, 0, .35); }

/* ── Contêineres de página ───────────────────────────────────────────────────────────────────── */

/* Telas LARGAS: fixam no topo (conteúdo alto não pode ficar centrado e cortar o cabeçalho). */
.portal-vagas,
.portal-vaga,
.portal-candidatura,
.portal-home {
    width: min(94vw, 720px);
    align-self: start;
    margin-block: 2.5rem;
}

/* Telas CURTAS (login/cadastro/estado): cartão centrado, no espírito da tela de login. */
.portal-auth,
.portal-estado {
    width: min(92vw, 400px);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.9rem;
    box-shadow: var(--portal-shadow);
}

/* ── Elementos de texto compartilhados ───────────────────────────────────────────────────────── */
.portal-vagas__titulo,
.portal-vaga__titulo,
.portal-cv__titulo,
.portal-candidatura__titulo,
.portal-home__titulo,
.portal-auth__titulo,
.portal-estado__titulo {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Link "Voltar" (obrigatório em toda página — UX iOS, CLAUDE.md §7). */
.portal-vaga__voltar,
.portal-cv__voltar,
.portal-candidatura__voltar {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
}
.portal-vaga__voltar:hover,
.portal-cv__voltar:hover,
.portal-candidatura__voltar:hover { color: var(--primary); }
/* "Voltar" da candidatura embutida é <button> (dispara evento): neutraliza o `button` global. */
button.portal-candidatura__voltar {
    width: auto;
    margin: 0 0 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    box-shadow: none;
}

/* Mensagens de erro de campo (pt-BR, CLAUDE.md §7). */
.portal-auth__erro,
.portal-candidatura__erro,
.portal-cv__erro {
    display: block;
    margin-top: .35rem;
    color: var(--err);
    font-size: .8rem;
    font-style: normal;
}

/* Botão/link com aparência primária (verde do design system). */
.portal-vaga__cta,
.portal-vaga-card__cta,
.portal-candidatura__cv,
.portal-candidatura__enviar {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: .6rem 1.15rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Variante SÓLIDA (ação principal). */
/* Primário CHAPADO — padrão do site todo (mesmo desenho do "Salvar dados"/.portal-cv__cta): azul
 * sólido, sem borda/brilho/relevo; hover só escurece a tinta (pedido 2026-07-19). */
.portal-vaga__cta,
.portal-vaga-card__cta,
.portal-candidatura__enviar {
    background: var(--crh-primary);
    color: #fff;
    border: none;
    box-shadow: none;
}
.portal-vaga__cta:hover,
.portal-vaga-card__cta:hover,
.portal-candidatura__enviar:hover {
    background: var(--crh-primary-hover);
}
.portal-vaga__cta:focus-visible,
.portal-vaga-card__cta:focus-visible,
.portal-candidatura__enviar:focus-visible {
    outline: none;
    box-shadow: var(--crh-focus-ring);
}

/* "Candidatura realizada" (vaga da candidatura ATIVA — só existe 1 por vez): botão desabilitado em
 * verde de sucesso, com o check à esquerda. Sem hover/clique. */
.portal-vaga__cta--feita,
.portal-vaga__cta--feita:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--crh-success-soft);
    color: var(--crh-success);
    border: 1px solid var(--crh-success);
    box-shadow: none;
    transform: none;
    cursor: default;
}
.portal-vaga__cta--feita svg { width: 16px; height: 16px; flex: none; }

/* Variante CONTORNO (ação secundária). */
.portal-candidatura__cv {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--input-border);
}
.portal-candidatura__cv:hover { border-color: var(--primary); color: var(--primary); }

/* Listas de metadados como "chips" (local · modalidade · contrato · salário). */
.portal-vaga__meta,
.portal-vaga-card__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    margin: .85rem 0 0;
    padding: 0;
}
.portal-vaga__meta li,
.portal-vaga-card__meta li {
    padding: .2rem .6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    color: var(--text);
    font-size: .78rem;
    font-weight: 500;
}

/* ── Listagem de vagas ───────────────────────────────────────────────────────────────────────── */
.portal-vagas__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.portal-vagas__busca {
    width: min(100%, 260px);
    margin: 0;
}

/* Card da vaga: é um <button> (seleciona no painel de detalhe). Neutraliza o `button` global do auth
 * (largura/fundo/cor/margem/alinhamento) para se comportar como um cartão clicável. */
.portal-vaga-card {
    display: block;
    width: 100%;
    margin: 0;
    padding: 1.1rem 1.2rem;
    text-align: left;
    font: inherit;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    cursor: pointer;
    transition: box-shadow 160ms ease, transform 120ms ease, border-color 160ms ease;
}
.portal-vaga-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 12px 30px rgba(2, 6, 23, .14);
}
/* Vaga aberta no detalhe: borda/anel na cor primária. */
.portal-vaga-card.is-ativa {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent);
}
.portal-vaga-card__titulo { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.portal-vaga-card__empresa { margin: .3rem 0 0; color: var(--muted); font-size: .85rem; }

.portal-vagas__vazio {
    margin: 2rem 0;
    text-align: center;
    color: var(--muted);
}

/* ── Layout master-detail (job board) ───────────────────────────────────────────────────────────
 * Casca full-width fixada no topo (o body é grid centralizado — sobrepomos via justify-self/align-self).
 * Em COLUNA e sem padding próprio: o header público (.portal-topbar) estica de borda a borda e gruda
 * no topo (sticky); o miolo (.portal-jobs) e a página de estado ganham o respiro por margem própria. */
.portal-shell {
    align-self: start;
    justify-self: stretch;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}
.portal-jobs { width: min(100%, 1080px); }
.portal-shell > .portal-jobs { width: min(calc(100% - 2rem), 1080px); margin-block: 2rem; }
.portal-shell > .portal-estado { margin: 2.5rem 1rem; }

/* ── Header público do portal (handoff design_handoff_portal_header v1.0) ───────────────────────
 * Barra de VIDRO sticky full-width: marca à esquerda (logo + empresa/"Vagas abertas"), toggle de
 * tema + "Fazer Login" primário sólido à direita. Tokens --crh-* (centralrh-tokens.css); fallback
 * sólido onde não há backdrop-filter. */
.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background: var(--crh-glass);
    -webkit-backdrop-filter: blur(var(--crh-blur));
    backdrop-filter: blur(var(--crh-blur));
    border-bottom: 1px solid var(--crh-hair);
}
@supports not (backdrop-filter: blur(1px)) {
    .portal-topbar { background: var(--crh-surface); }
}
/* O header traz o próprio toggle de tema — o flutuante do layout sai para não duplicar. */
body:has(.portal-topbar) > .crh-theme-toggle--fixed { display: none; }

.portal-topbar__inner {
    max-width: 1200px;
    min-height: 64px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.portal-topbar__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* Logo REAL da empresa (img): 44px (revisão 2026-07-18 — sem o nome do cliente em texto ao lado, o
 * logo cresce e identifica a empresa sozinho; cabe com folga nos 64px do miolo), largura natural.
 * Cantos ARREDONDADOS (pedido 2026-08-12): o arquivo do cliente costuma vir com fundo branco sólido,
 * e o retângulo de quina viva destoava de tudo que vem abaixo na página (busca, cards e botões usam
 * `--crh-radius-md`). Mesmo raio deles; o `border-radius` já recorta a imagem, sem wrapper. */
.portal-topbar__logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    border-radius: var(--crh-radius-md);
}
/* Símbolo "Convergência" (fallback sem logo): versão COLORIDA nos DOIS temas — a marca não troca de
 * hex entre claro/escuro (handoff §Comportamento); pina as cores que o `.dark` global inverteria. */
.portal-topbar__mark { width: 40px; height: 40px; flex: none; }
.dark .portal-topbar .crh-brand__line { stroke: var(--crh-logo-line); }
.dark .portal-topbar .crh-brand__node--ns { fill: var(--crh-blue-300); }
.dark .portal-topbar .crh-brand__node--ew { fill: var(--crh-blue-400); }
.dark .portal-topbar .crh-brand__core { fill: var(--crh-primary); }

/* Rótulo da página ao lado do logo (o nome do cliente em TEXTO saiu — revisão 2026-07-18). */
.portal-topbar__sub { font-weight: 500; font-size: 12.5px; color: var(--crh-text-subtle); }

.portal-topbar__acoes { display: flex; align-items: center; gap: 12px; }

/* Toggle de tema: estilo do componente COMPARTILHADO `.crh-theme-toggle` (centralrh-tokens.css), o
 * MESMO botão do painel e das páginas de auth (padronização 2026-07-19). Nada a redefinir aqui — o
 * reset do `button` global do auth (largura/margem/padding) já vive no componente. */

/* "Fazer Login" — primário SÓLIDO (nunca tint claro — handoff §Aceite). */
.portal-topbar__login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--crh-primary);
    color: var(--primary-text);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms ease;
}
.portal-topbar__login:hover { background: var(--crh-primary-hover); }
.portal-topbar__login:focus-visible { outline: none; box-shadow: var(--crh-focus-ring); }
.portal-topbar__login-icon { width: 16px; height: 16px; flex: none; }

/* Ações-pílula da nav (área do candidato): "Meu currículo"/"Ver vagas" (soft = seção ativa) e "Sair"
 * (ghost). TODOS os seletores levam o prefixo `.portal-topbar` (0,2,0) para VENCER o `button[type="submit"]`
 * global (0,1,1) — senão o "Sair" (submit) herdava texto branco e sumia. Altura fixa (40px) igual ao toggle
 * de tema, para os botões ficarem do MESMO tamanho. */
.portal-topbar .portal-topbar__acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.portal-topbar .portal-topbar__acao svg { width: 16px; height: 16px; flex: none; }
.portal-topbar .portal-topbar__acao--soft {
    color: var(--crh-primary);
    background: var(--crh-primary-soft);
    border-color: var(--crh-primary-border);
}
.portal-topbar .portal-topbar__acao--soft:hover { background: color-mix(in srgb, var(--crh-primary) 16%, transparent); }
.portal-topbar .portal-topbar__acao--ghost {
    color: var(--crh-text-muted);
    background: var(--crh-glass-2);
    border-color: var(--crh-hair);
}
/* Nav ghost inativa ("Ver vagas"/"Meu currículo"): hover NEUTRO do sistema (mesmo tom do toggle de
 * tema) — NUNCA vermelho. O vermelho (perigo) fica só no "Sair" via `--danger`. */
.portal-topbar .portal-topbar__acao--ghost:hover {
    color: var(--crh-text-strong);
    border-color: var(--crh-primary-border);
    background: var(--crh-primary-soft);
}
/* "Sair" (logout): única ação com hover em tom de PERIGO — afordância de saída. Definido DEPOIS do
 * `--ghost:hover` (mesma especificidade) para vencer por ordem de origem. */
.portal-topbar .portal-topbar__acao--danger:hover {
    color: var(--crh-danger);
    border-color: var(--crh-danger);
    background: var(--crh-danger-soft);
}
.portal-topbar .portal-topbar__acao:focus-visible { outline: none; box-shadow: var(--crh-focus-ring); }

/* Responsivo (≤640px, handoff): some "Vagas abertas" e o texto do login (só ícone); toque ≥44px. */
@media (max-width: 640px) {
    .portal-topbar__inner { padding: 0 16px; }
    .portal-topbar__sub { display: none; }
    /* O alvo de toque de 44px do toggle vem do componente compartilhado (centralrh-tokens.css). */
    .portal-topbar__login { min-width: 44px; min-height: 44px; padding: 10px 12px; }
    .portal-topbar__login-texto { display: none; }
    .portal-topbar__acao { min-height: 44px; padding: 10px 12px; }
}

/* ── Modal de candidatura ───────────────────────────────────────────────────────────────────────
 * Overlay escurece o fundo e centraliza o card; o card usa as custom properties de tema (claro/escuro,
 * definidas em centralrh-auth.css). Controle por estado Livewire (sem <dialog>), só CSS versionado. */
.portal-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.portal-modal {
    position: relative;
    width: min(94vw, 440px);
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.6rem 1.5rem 1.4rem;
    box-shadow: 0 20px 50px rgba(2, 6, 23, .3);
}
.portal-modal__fechar {
    position: absolute;
    top: .6rem;
    right: .7rem;
    width: 2rem;
    height: 2rem;
    /* Reseta o `button` global do auth (margin-top 1.1rem + padding .65rem): como o botão é ancorado
       por `top`, a margem o empurrava 1.1rem abaixo do canto e o "×" saía do centro. */
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.portal-modal__fechar:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.portal-modal__titulo { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 700; }
.portal-modal__texto { margin: 0 0 1.1rem; color: var(--muted); font-size: .9rem; }
.portal-modal__erro {
    margin: 0 0 1rem;
    padding: .6rem .75rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--err) 12%, var(--card-bg));
    color: var(--err);
    font-size: .85rem;
}
.portal-modal__acoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.portal-modal__btn {
    flex: 1 1 auto;
    padding: .65rem 1rem;
    border-radius: 9px;
    border: 1px solid var(--input-border);
    background: var(--card-bg);
    color: var(--text);
    font-family: inherit;
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}
.portal-modal__btn:hover { background: color-mix(in srgb, var(--primary) 8%, var(--card-bg)); transform: translateY(-1px); }
.portal-modal__btn--primary {
    background: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary);
}
.portal-modal__btn--primary:hover { background: color-mix(in srgb, var(--primary) 88%, #000); }

.portal-jobs__busca { width: 100%; margin: 0 0 1.1rem; }

.portal-jobs__grid {
    display: grid;
    grid-template-columns: minmax(300px, 360px) 1fr;
    gap: 1rem;
    align-items: start;
}
/* A lista flui naturalmente (a página rola); o detalhe fica fixo (sticky). Sem `overflow` na lista para
 * não clipar o anel/sombra do card ativo — `overflow-y:auto` também recorta na horizontal. */
.portal-jobs__lista { display: grid; gap: .75rem; }
.portal-jobs__detalhe {
    position: sticky;
    top: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow: var(--portal-shadow);
}
/* Topo do detalhe: título à esquerda e "Candidatar-se" no canto oposto (mesma linha). */
.portal-jobs__detalhe-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.portal-jobs__detalhe-topo .portal-vaga__titulo { margin: 0; }
.portal-jobs__detalhe-topo .portal-vaga__cta { margin-top: 0; flex: none; white-space: nowrap; }
@media (max-width: 480px) {
    .portal-jobs__detalhe-topo { flex-wrap: wrap; }
}

@media (max-width: 820px) {
    .portal-jobs__grid { grid-template-columns: 1fr; }
    .portal-jobs__detalhe { position: static; }
}

/* ── Detalhe da vaga ─────────────────────────────────────────────────────────────────────────── */
.portal-vaga {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.9rem;
    box-shadow: var(--portal-shadow);
}
/* Cada seção (Descrição, Atividades, Requisitos, Benefícios) separada por divisória fina. */
.portal-vaga__bloco {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.portal-vaga__bloco:first-of-type { border-top: 0; padding-top: 0; }
.portal-vaga__bloco h2,
.portal-vaga__bloco h3 {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.portal-vaga__bloco p { margin: 0; line-height: 1.65; white-space: pre-line; text-wrap: pretty; }

/* Rótulo "overline" da seção: uppercase, cor primária, com dot à esquerda (handoff). Seletor com o
 * bloco para vencer a especificidade da regra `.portal-vaga__bloco h3` (que pinta h3 de muted). */
.portal-vaga__bloco .portal-vaga__overline {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .7rem;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--primary);
}
.portal-vaga__overline::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 999px;
    background: var(--primary);
    flex: none;
}

/* Chip de salário em VERDE (token de sucesso, tema-aware). */
.portal-vaga__meta--salario {
    background: var(--crh-success-soft) !important;
    border-color: color-mix(in srgb, var(--crh-success) 40%, transparent) !important;
    color: var(--crh-success) !important;
    font-weight: 600;
}

/* Principais atividades: lista em 2 colunas com bullet. */
.portal-vaga__atividades {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1.5rem;
}
.portal-vaga__atividades li {
    position: relative;
    padding-left: 1.1rem;
    line-height: 1.55;
    color: var(--text);
}
.portal-vaga__atividades li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .38rem;
    height: .38rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 55%, transparent);
}

/* Requisitos: 2 colunas (Obrigatórios ✓ verde / Desejáveis em bullets). */
.portal-vaga__requisitos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
}
.portal-vaga__requisitos-titulo {
    margin: 0 0 .55rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
}
.portal-vaga__req-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.portal-vaga__req-lista li {
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.55;
    color: var(--text);
}
/* Obrigatórios: check verde (SVG inline como data-URI — sem dependência de fonte/ícone). */
.portal-vaga__req-lista--check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    width: 1.05rem;
    height: 1.05rem;
    background-color: var(--crh-success);
    -webkit-mask: var(--portal-check-icon) center / contain no-repeat;
    mask: var(--portal-check-icon) center / contain no-repeat;
}
/* Desejáveis: bullet neutro. */
.portal-vaga__req-lista--bullet li::before {
    content: "";
    position: absolute;
    left: .25rem;
    top: .6em;
    width: .38rem;
    height: .38rem;
    border-radius: 999px;
    background: var(--muted);
}

/* Benefícios: chips soft na cor primária. */
.portal-vaga__beneficios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .5rem;
}
.portal-vaga__beneficios li {
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--crh-primary-soft);
    border: 1px solid var(--crh-primary-border);
    color: var(--primary);
    font-size: .82rem;
    font-weight: 500;
}

.portal-vaga__cta { margin-top: 1.9rem; }

/* Empilha as grades de 2 colunas (atividades/requisitos) no mobile. */
@media (max-width: 560px) {
    .portal-vaga__atividades,
    .portal-vaga__requisitos { grid-template-columns: 1fr; }
}

/* ── Página de estado (indisponível/desativado) ─────────────────────────────────────────────── */
.portal-estado { text-align: center; }
.portal-estado__titulo { font-size: 1.25rem; }
.portal-estado__mensagem { margin: .85rem 0 0; color: var(--muted); line-height: 1.6; }
.portal-estado__acao {
    display: inline-block;
    margin-top: 1.25rem;
    color: var(--primary);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}
.portal-estado__acao:hover { text-decoration: underline; }

/* ── Auth do candidato (login / cadastro) ────────────────────────────────────────────────────── */
.portal-auth__form { margin-top: 1.4rem; }

/* Cada campo é um <label> com <span> rótulo + <input>. Neutraliza o label global (que vira "muted"). */
.portal-auth__campo {
    display: block;
    margin: 0 0 .9rem;
    color: var(--text);
    font-size: inherit;
}
.portal-auth__campo > span {
    display: block;
    margin-bottom: .3rem;
    font-size: .85rem;
    color: var(--muted);
}

/* Aceite dos termos: checkbox + texto lado a lado. */
.portal-auth__aceite {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 1rem 0 .25rem;
    color: var(--text);
    font-size: .85rem;
    line-height: 1.45;
}
.portal-auth__aceite input { width: auto; margin-top: .15rem; }

.portal-auth__botao { margin-top: 1.3rem; }

.portal-auth__link {
    margin: .85rem 0 0;
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
}
.portal-auth__link a { color: var(--primary); font-weight: 500; text-decoration: none; }
.portal-auth__link a:hover { text-decoration: underline; }

/* ── Landing autenticada ─────────────────────────────────────────────────────────────────────── */
.portal-home {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.9rem;
    box-shadow: var(--portal-shadow);
}
.portal-home p { margin: .85rem 0 0; color: var(--muted); line-height: 1.6; }

/* Hub do candidato: cena "vidro" full-bleed com saudação + editor embutido numa página só. */
.portal-hub {
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
    background:
        radial-gradient(1100px 550px at 8% -10%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 60%),
        radial-gradient(900px 480px at 108% 6%, color-mix(in srgb, #8FB4EF 34%, transparent), transparent 55%),
        var(--bg);
}
.portal-hub__inner { width: min(100%, 960px); display: flex; flex-direction: column; gap: 1.25rem; }
.portal-hub__saudacao {
    padding: 1.9rem;
    background: color-mix(in srgb, var(--card-bg) 62%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(2, 6, 23, .22);
}
/* Topo da saudação: nome à esquerda, "Sair" no canto oposto (mesma linha). */
.portal-hub__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.portal-hub__topo .portal-home__titulo { margin: 0; }
.portal-hub__saudacao p { margin: .85rem 0 0; color: var(--muted); line-height: 1.6; }

.portal-home__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
}
.portal-home__sair-form { margin: 0; }
/* `.portal-home__acao` também estiliza <button> (toggle/Sair): neutraliza o `button` global (largura/margem). */
.portal-home__acao {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: .6rem 1.15rem;
    border-radius: 9px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--input-border);
    transition: box-shadow 160ms ease, transform 120ms ease, border-color 160ms ease, color 160ms ease;
}
.portal-home__acao:hover { border-color: var(--primary); color: var(--primary); }
.portal-home__acao--sair:hover { border-color: var(--err); color: var(--err); }
/* "Sair" é <button type=submit>: o estilo primário global (button[type=submit], no auth) sobrepunha por
 * especificidade e deixava o texto BRANCO/invisível. `[type=submit]` reafirma o contorno + texto legível. */
.portal-home__acao--sair[type="submit"] {
    color: var(--text);
    background: transparent;
    border: 1px solid var(--input-border);
    box-shadow: none;
}
.portal-home__acao--sair[type="submit"]:hover {
    color: var(--err);
    border-color: var(--err);
    box-shadow: none;
    transform: none;
}
/* Primário CHAPADO — padrão do site todo (sem verniz/relevo; hover só escurece). */
.portal-home__acao--primario {
    color: #fff;
    background: var(--crh-primary);
    border-color: transparent;
    box-shadow: none;
}
.portal-home__acao--primario:hover {
    color: #fff;
    background: var(--crh-primary-hover);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

/* ── Envio de candidatura ────────────────────────────────────────────────────────────────────── */
.portal-candidatura {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.9rem;
    box-shadow: var(--portal-shadow);
}
.portal-candidatura p { margin: .85rem 0 0; color: var(--muted); line-height: 1.6; }
.portal-candidatura__cv,
.portal-candidatura__enviar { margin-top: 1.5rem; }
.portal-candidatura__cv { margin-right: .6rem; }

/* ── Área do candidato — editor de currículo repaginado (handoff design_handoff_candidato v1.0) ────
 * Nav de topo de vidro (.portal-topbar, acima) + layout de 2 COLUNAS: coluna-resumo STICKY (avatar,
 * completude, menu, CTA) + coluna de formulário em CARDS de vidro (Dados básicos em grid de 6 colunas
 * com "Salvar dados" PRIMÁRIO SÓLIDO, Foto com dropzone, seções em cards de item). Tokens --crh-*
 * (centralrh-tokens.css). O modo `embutido` (dentro do hub) neutraliza a cena/2-colunas: renderiza só
 * as seções em largura total, herdando o fundo do hub. */
.portal-cv {
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: none;
}
.portal-cv--embutido {
    justify-self: auto;
    align-self: auto;
    min-height: 0;
    display: block;
}

/* Container alargado (1160px) em 2 colunas (resumo 320px + formulário). */
.portal-cv__area {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 32px 40px 56px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}
/* Embutido no HUB: o container mantém as 2 colunas (o hub só troca a nav de topo por uma compartilhada).
 * As seções sem coluna-resumo (vagas/candidatura, dentro do hub) usam a variante `--simples` (1 coluna). */
.portal-cv__area--simples {
    display: block;
    max-width: 1080px;
}

/* Coluna-resumo (sticky). */
.portal-cv__resumo {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.portal-cv__sair-form { margin: 0; }

/* Cards de vidro (perfil, menu, seção, saudação) — fallback sólido sem backdrop-filter. */
.portal-cv__perfil,
.portal-cv__menu,
.portal-cv__card,
.portal-cv__saudacao {
    background: var(--crh-glass);
    backdrop-filter: blur(var(--crh-blur));
    -webkit-backdrop-filter: blur(var(--crh-blur));
    border: 1px solid var(--crh-glass-border);
    border-radius: 16px;
    box-shadow: var(--crh-shadow-card);
}
@supports not (backdrop-filter: blur(1px)) {
    .portal-cv__perfil,
    .portal-cv__menu,
    .portal-cv__card,
    .portal-cv__saudacao { background: var(--crh-surface); }
}

/* Card de perfil: avatar + nome + e-mail + completude. */
.portal-cv__perfil { padding: 22px 20px; text-align: center; }
.portal-cv__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--crh-primary), #8FB4EF);
    color: #fff;
    font-family: 'Archivo', 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 32px;
}
/* Com foto: a imagem preenche o círculo (object-fit) — sem "vazar"/tortar o avatar. */
.portal-cv__avatar img { width: 100%; height: 100%; object-fit: cover; }
.portal-cv__perfil-nome { font-family: 'Archivo', 'Manrope', sans-serif; font-weight: 800; font-size: 19px; color: var(--crh-text-strong); }
.portal-cv__perfil-email { margin-top: 4px; font-size: 13px; color: var(--crh-text-muted); word-break: break-word; }

/* Completude: rótulo + % + barra <progress> (valor por atributo — sem style inline, CLAUDE.md §7). */
.portal-cv__completo { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.portal-cv__completo-topo { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--crh-text-muted); }
.portal-cv__completo-pct { color: var(--crh-primary); font-weight: 800; }
.portal-cv__barra {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 7px;
    border: 0;
    border-radius: 999px;
    background: var(--crh-hair);
    overflow: hidden;
}
.portal-cv__barra::-webkit-progress-bar { background: var(--crh-hair); border-radius: 999px; }
.portal-cv__barra::-webkit-progress-value { background: linear-gradient(90deg, var(--crh-primary), var(--crh-success)); border-radius: 999px; transition: width 200ms ease; }
.portal-cv__barra::-moz-progress-bar { background: linear-gradient(90deg, var(--crh-primary), var(--crh-success)); border-radius: 999px; }

/* Menu de âncoras das seções (ativo = tinta primária). Itens com ÍCONE à esquerda (mockup
   2026-07-18) — heroicons mini renderizados no servidor (blade-heroicons). */
.portal-cv__menu { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.portal-cv__menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--crh-text-muted);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.portal-cv__menu-link svg { width: 16px; height: 16px; flex: none; opacity: .8; transition: color 150ms ease, opacity 150ms ease; }
/* Hover: fundo SÓLIDO suave (o antigo --crh-glass-2 é translúcido e ficava manchado/apagado sobre o
 * card de vidro), leve deslize à direita e o ícone acende na tinta primária. */
.portal-cv__menu-link:hover { background: var(--crh-neutral-soft); color: var(--crh-text-strong); transform: translateX(2px); }
.portal-cv__menu-link:hover svg { opacity: 1; color: var(--crh-primary); }
.portal-cv__menu-link--ativo { background: var(--crh-primary-soft); color: var(--crh-primary); }
.portal-cv__menu-link--ativo svg { opacity: 1; }
/* O item ATIVO não muda de cara no hover (nem desliza) — já está selecionado. */
.portal-cv__menu-link--ativo:hover { background: var(--crh-primary-soft); color: var(--crh-primary); transform: none; }

/* Marca em PILHA no topbar da área (sem logo próprio): nome da empresa + rótulo (mockup 2026-07-18). */
.portal-cv__marca { display: flex; flex-direction: column; line-height: 1.15; }
.portal-cv__marca-nome {
    font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--crh-text-strong);
}

/* CTA de candidatura — primário sólido, largura total. Serve como <a> (standalone) e <button> (embutido):
 * reset local vence o `button` global (largura/margem/sombra/borda). */
.portal-cv__cta {
    display: block;
    width: 100%;
    margin: 0;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: var(--crh-primary);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background 150ms ease;
}
.portal-cv__cta:hover { background: var(--crh-primary-hover); }
.portal-cv__cta:focus-visible { outline: none; box-shadow: var(--crh-focus-ring); }

/* Coluna do formulário. */
.portal-cv__form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Header de boas-vindas com badge de estado. */
.portal-cv__saudacao {
    padding: 22px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, color-mix(in srgb, var(--crh-primary) 10%, transparent), var(--crh-glass));
}
.portal-cv__saudacao-titulo { margin: 0; font-family: 'Archivo', 'Manrope', sans-serif; font-weight: 800; font-size: 24px; color: var(--crh-text-strong); }
.portal-cv__saudacao-sub { margin: 8px 0 0; font-size: 14px; color: var(--crh-text-muted); max-width: 460px; }
.portal-cv__status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.portal-cv__status-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.portal-cv__status--ok { color: var(--crh-success); background: var(--crh-success-soft); }
.portal-cv__status--rascunho { color: #B26B00; background: color-mix(in srgb, #E7A83E 22%, transparent); }
.dark .portal-cv__status--rascunho { color: #F0C778; }

/* Card de seção. */
/* `scroll-margin-top` para os cliques no menu (âncoras #cv-*) pararem ABAIXO da nav de topo sticky
 * (~72px) em vez de a seção sumir atrás dela. */
.portal-cv__card { padding: 24px 26px; scroll-margin-top: 88px; }
.portal-cv__card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.portal-cv__card-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-family: 'Archivo', 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--crh-text-strong);
}
.portal-cv__card-head .portal-cv__card-titulo { margin: 0; }
.portal-cv__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--crh-primary); flex: none; }

/* Legenda de obrigatórios / feedback / erro (pt-BR, 12px). */
.portal-cv__legenda { font-size: 12px; color: var(--crh-text-subtle); }
.portal-cv__obrigatorio { color: var(--crh-danger); font-weight: 700; margin-left: .1rem; }
.portal-cv__ok { margin: 0 0 12px; color: var(--crh-success); font-size: 13px; font-weight: 600; }
.portal-cv__erro { display: block; margin-top: 6px; color: var(--crh-danger); font-size: 12px; font-style: normal; }

/* Grid de campos (Dados básicos: 6 colunas com spans). */
.portal-cv__grid { display: grid; gap: 14px 16px; }
.portal-cv__grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.portal-cv__span-2 { grid-column: span 2; }
.portal-cv__span-3 { grid-column: span 3; }
.portal-cv__span-4 { grid-column: span 4; }
.portal-cv__span-full { grid-column: 1 / -1; }

/* Campo rotulado. */
.portal-cv__campo { display: flex; flex-direction: column; gap: .35rem; margin: 0; min-width: 0; color: var(--crh-text-strong); }
.portal-cv__campo > span { font-size: 13px; font-weight: 700; color: var(--crh-text-strong); }
.portal-cv__dica { color: var(--crh-primary); font-style: normal; font-weight: 600; font-size: 12px; }

/* Inputs em vidro de recuo (borda 1.5px --crh-hair, raio 10, padding 12×14) com foco primário. */
.portal-cv input[type="text"],
.portal-cv input[type="email"],
.portal-cv input[type="date"],
.portal-cv input[type="number"],
.portal-cv input[type="file"],
.portal-cv input:not([type]),
.portal-cv select,
.portal-cv textarea {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--crh-hair);
    border-radius: 10px;
    background: var(--crh-glass-2);
    color: var(--crh-text-strong);
    font-size: 14px;
    font-family: inherit;
}
.portal-cv textarea { min-height: 68px; resize: vertical; }
.portal-cv input:focus,
.portal-cv select:focus,
.portal-cv textarea:focus { outline: none; border-color: var(--crh-primary); box-shadow: var(--crh-focus-ring); }

/* Checkbox no PADRÃO do design system (mesma caixa do `.login__remember`/admissão): 18px, marcado = primário
 * com "check" branco desenhado por borda. Usado no "trabalho atual" das experiências. */
.portal-cv input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    flex: none;
    display: inline-grid;
    place-items: center;
    border: 1.5px solid var(--crh-hair);
    border-radius: 5px;
    background: var(--crh-glass-2);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}
.portal-cv input[type="checkbox"]:checked { background: var(--crh-primary); border-color: var(--crh-primary); }
.portal-cv input[type="checkbox"]:checked::after {
    content: '';
    width: 9px;
    height: 5px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg) translateY(-1px);
}
.portal-cv input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--crh-focus-ring); }
.portal-cv__check { display: inline-flex; align-items: center; gap: .5rem; font-size: 13px; font-weight: 600; color: var(--crh-text-muted); cursor: pointer; }

/* Rodapé de ação (Salvar dados) alinhado à direita. */
.portal-cv__acao-rodape { display: flex; justify-content: flex-end; margin-top: 20px; }

/* Botão PRIMÁRIO SÓLIDO — "Salvar dados"/"Enviar foto" (fim do botão lavanda apagado do print). */
.portal-cv__salvar {
    width: auto;
    margin: 0;
    padding: 12px 22px;
    border-radius: 10px;
    border: none;
    background: var(--crh-primary);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: none;
    transition: background 150ms ease;
}
.portal-cv__salvar:hover { background: var(--crh-primary-hover); }
.portal-cv__salvar:focus-visible { outline: none; box-shadow: var(--crh-focus-ring); }
.portal-cv__salvar:disabled { background: var(--crh-primary-disabled); cursor: not-allowed; }

/* Botão ghost — "Remover" (foto). */
.portal-cv__ghost {
    width: auto;
    margin: 0;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--crh-glass-2);
    border: 1px solid var(--crh-hair);
    color: var(--crh-text-muted);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: none;
    transition: color 150ms ease, border-color 150ms ease;
}
.portal-cv__ghost:hover { color: var(--crh-danger); border-color: var(--crh-danger); }

/* Foto de perfil: só dropzone + ações — o thumb/preview ao lado saiu (pedido 2026-07-19; o avatar da
 * coluna-resumo já mostra a foto). */
.portal-cv__foto { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.portal-cv__foto-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Dropzone: input file cobrindo a área tracejada (clique/arraste), ícone à esquerda. */
.portal-cv__dropzone {
    position: relative;
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 16px 18px 16px 46px;
    border: 1.5px dashed var(--crh-primary-border);
    border-radius: 12px;
    background: var(--crh-primary-soft);
    cursor: pointer;
}
.portal-cv__dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}
.portal-cv__dropzone-icone { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--crh-primary); }
.portal-cv__dropzone-cta { font-weight: 700; font-size: 14px; color: var(--crh-text-strong); overflow-wrap: anywhere; }
.portal-cv__dropzone-hint { font-size: 12px; color: var(--crh-text-subtle); }

/* Spinner (círculo girando) do estado "enviando" — foto e anexos, durante o upload. */
.portal-cv__spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: none;
    border: 2.5px solid var(--crh-primary-border);
    border-top-color: var(--crh-primary);
    border-radius: 50%;
    animation: crh-spin .7s linear infinite;
}
@keyframes crh-spin { to { transform: rotate(360deg); } }

/* Variante MINI do spinner para rótulo de campo (ex.: busca do CEP no ViaCEP — substitui o "buscando…"). */
.portal-cv__spinner--campo { width: 13px; height: 13px; border-width: 2px; vertical-align: -2px; margin-left: 6px; }

/* Toast de confirmação (ex.: "Dados salvos com sucesso."): fixo no TOPO À DIREITA (mesmo canto das
 * notificações do painel Filament — padrão do sistema), verde de sucesso. O Alpine (x-show) controla a
 * exibição; `x-cloak` evita o flash antes de o Alpine montar. */
.portal-cv__toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(92vw, 420px);
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid var(--crh-success);
    background: var(--crh-surface);
    color: var(--crh-success);
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 12px 30px rgb(0 0 0 / .18);
}
.portal-cv__toast[x-cloak] { display: none !important; }
.portal-cv__toast svg { width: 18px; height: 18px; flex: none; }

/* Arquivo enviado: confirma em VERDE (igual aos documentos da admissão) — borda sólida + fundo de sucesso. */
.portal-cv__dropzone--enviado {
    border-style: solid;
    border-color: var(--crh-success);
    background: var(--crh-success-soft);
}
.portal-cv__dropzone--enviado .portal-cv__dropzone-icone,
.portal-cv__dropzone--enviado .portal-cv__dropzone-cta { color: var(--crh-success); }

/* Anexos: DOIS campos lado a lado (currículo | certificados), cada um com sua lista + dropzone (empilha
 * ≤560px). O dropzone aqui é vertical, então neutraliza o `flex:1` da variante em linha da foto. */
.portal-cv__anexos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.portal-cv__anexo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.portal-cv__anexo-titulo { font-size: 13px; font-weight: 700; color: var(--crh-text-strong); }
@media (max-width: 560px) { .portal-cv__anexos { grid-template-columns: 1fr; } }

/* Dropzone dos anexos: quadrado CENTRADO com os 3 estados no MESMO espaço (padrão da admissão) —
 * antes / enviando (overlay) / depois. O ícone deixa de ser absoluto-à-esquerda (layout da foto) e
 * empilha centralizado; o miolo é neutro (não muda de altura entre estados → sem "tilt"). */
.portal-cv__anexo .portal-cv__dropzone {
    flex: none;
    min-width: 0;
    padding: 22px 16px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.portal-cv__dropzone-conteudo { display: grid; place-items: center; gap: 4px; }
.portal-cv__anexo .portal-cv__dropzone-icone { position: static; left: auto; top: auto; transform: none; width: 22px; height: 22px; }
/* Foto: MESMO quadrado centrado do anexo (ícone em cima, texto empilhado, 3 estados) — pedido
 * 2026-07-19. Mantém `flex:1` (base) para preencher a linha ao lado do thumb; só troca o layout
 * horizontal (ícone absoluto à esquerda) pelo centrado. */
.portal-cv__foto .portal-cv__dropzone {
    padding: 22px 16px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.portal-cv__foto .portal-cv__dropzone-icone { position: static; left: auto; top: auto; transform: none; width: 22px; height: 22px; }
/* Estado ENVIANDO: overlay que cobre o quadrado (verde de sucesso, igual à foto de referência). Nasce
 * oculto (display:none); o `wire:loading.flex` do Livewire o revela como flex durante o upload — dizer o
 * display evita o `inline-block` padrão que o Livewire injetaria e desmancharia a centralização. */
.portal-cv__dropzone-enviando {
    display: none;
    position: absolute;
    /* Cobre também a BORDA do label (recuo negativo = largura da borda) → durante o envio o quadrado
     * fica com borda verde SÓLIDA, sem a tracejada aparecer por baixo. */
    inset: -1.5px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    border: 1.5px solid var(--crh-success);
    background: var(--crh-success-soft);
}
.portal-cv__dropzone-enviando .portal-cv__dropzone-cta { color: var(--crh-success); }
.portal-cv__dropzone-enviando .portal-cv__spinner {
    width: 26px;
    height: 26px;
    border-width: 3px;
    border-color: var(--crh-hair);
    border-top-color: var(--crh-success);
}

/* Itens de seção (experiências, formação, cursos…) como cards; estado vazio tracejado. */
.portal-cv__itens { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.portal-cv__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--crh-hair);
    border-radius: 12px;
    background: var(--crh-glass-2);
}
.portal-cv__item-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    background: var(--crh-primary-soft);
    color: var(--crh-primary);
}
.portal-cv__item-icone svg { width: 18px; height: 18px; }
.portal-cv__item-corpo { flex: 1; min-width: 0; }
.portal-cv__item-titulo { font-weight: 700; font-size: 15px; color: var(--crh-text-strong); overflow-wrap: anywhere; }
.portal-cv__item-sub { margin-top: 2px; font-size: 13px; color: var(--crh-text-muted); overflow-wrap: anywhere; }
.portal-cv__item-remover {
    width: auto;
    margin: 0;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--crh-danger);
    background: transparent;
    border: 1px solid var(--crh-danger-soft);
    box-shadow: none;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.portal-cv__item-remover:hover { color: #fff; background: var(--crh-danger); border-color: var(--crh-danger); }
.portal-cv__vazio { margin: 0 0 16px; padding: 14px 16px; border: 1px dashed var(--crh-hair); border-radius: 12px; color: var(--crh-text-subtle); font-size: 14px; }

/* Formulário "adicionar item": campos + botão soft (+ Adicionar / Anexar). */
.portal-cv__add-form { display: flex; flex-direction: column; gap: 10px; }
.portal-cv__add-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.portal-cv__add-row { display: flex; flex-wrap: wrap; gap: 10px; }
.portal-cv__add-row .portal-cv__add-btn { flex: 1 1 12rem; }
.portal-cv__add-btn {
    width: 100%;
    margin: 0;
    padding: 11px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    color: var(--crh-primary);
    background: var(--crh-primary-soft);
    border: 1px solid var(--crh-primary-border);
    box-shadow: none;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.portal-cv__add-btn:hover { color: #fff; background: var(--crh-primary); border-color: var(--crh-primary); }
.portal-cv__add-btn--sec { color: var(--crh-text-muted); background: var(--crh-glass-2); border-color: var(--crh-hair); }
.portal-cv__add-btn--sec:hover { color: var(--crh-primary); background: transparent; border-color: var(--crh-primary); }
.portal-cv__add-btn:disabled { opacity: .5; cursor: not-allowed; color: var(--crh-text-subtle); background: var(--crh-glass-2); border-color: var(--crh-hair); }

/* ── Responsivo (≤900px): empilha em 1 coluna, resumo deixa de ser sticky, grid de 6 vira 1. ─────── */
@media (max-width: 900px) {
    .portal-cv__area { grid-template-columns: 1fr; padding: 24px 20px 40px; }
    .portal-cv__resumo { position: static; top: auto; }
    .portal-cv__grid--6 { grid-template-columns: 1fr; }
    .portal-cv__span-2,
    .portal-cv__span-3,
    .portal-cv__span-4,
    .portal-cv__span-full { grid-column: auto; }
}
@media (max-width: 520px) {
    .portal-vagas__cabecalho { flex-direction: column; align-items: stretch; }
    .portal-vagas__busca { width: 100%; }
    .portal-vaga,
    .portal-home,
    .portal-candidatura { padding: 1.4rem; }
    .portal-candidatura__cv,
    .portal-candidatura__enviar { display: block; width: 100%; margin-right: 0; }
    .portal-candidatura__cv { margin-bottom: .6rem; }

    /* Hub em telas pequenas: menos respiro, título compacto, botões de ação em largura total (toque). */
    .portal-hub { padding: 1.5rem .8rem; }
    .portal-hub__saudacao { padding: 1.4rem; }
    .portal-hub__topo .portal-home__titulo { font-size: 1.3rem; }
    .portal-home__acoes .portal-home__acao { flex: 1 1 100%; }

    /* Área do candidato: cards com menos respiro; topbar e resumo empilham (toque ≥44px). */
    .portal-cv__area { padding: 20px 14px 36px; }
    .portal-cv__card,
    .portal-cv__saudacao { padding: 18px 18px; }
    .portal-cv__foto { gap: 12px; }
    .portal-cv__foto-acoes { width: 100%; }
}

/* ── Footer das páginas públicas (design_handoff_footer v1.0) ───────────────────────────────────
 * Portal de vagas, área do candidato e ficha de admissão — nunca no painel logado. Fundo NAVY FIXO
 * nos dois temas (não usa --surface/glass — consistente sem tratamento de dark mode); dados do
 * tenant, crédito discreto do fornecedor na barra inferior. Tokens locais do footer: */
.portal-footer {
    --crh-footer-bg: #12203A;
    --crh-footer-text: #C6D3EA;
    --crh-footer-muted: #8FA5CC;
    --crh-footer-accent: #7FA8EE;
    width: 100%;
    margin-top: auto; /* cola no rodapé dos wrappers flex-column (min-height:100vh) */
    background: var(--crh-footer-bg);
    color: var(--crh-footer-text);
    font-size: 13px;
}

/* Os shells das páginas públicas viram coluna de altura cheia quando têm footer (sticky footer). */
.portal-shell:has(.portal-footer) { min-height: 100vh; }
.admissao-shell:has(.portal-footer) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Faixa principal: grid de 3 colunas (marca larga + contato + acesso rápido). */
.portal-footer__main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 46px 40px 26px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
}
.portal-footer__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.portal-footer__mark { width: 30px; height: 30px; flex: none; }
/* Com logo, ele identifica a empresa sozinho (sem nome/razão ao lado) — um pouco maior por isso.
 * A PLACA CLARA por baixo garante contraste para QUALQUER logo (um logo escuro sumia no navy):
 * fundo quase-branco fixo (o footer não troca de tema), cantos suaves e um respiro interno. */
.portal-footer__logo-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: #F5F7FA;
    border-radius: 12px;
}
/* ALTURA DEFINIDA (não max-height): SVG sem width/height intrínsecos (só viewBox) colapsa a ~0 com
 * só max-* — mesma razão do height fixo no .portal-topbar__logo, que renderiza qualquer formato. */
.portal-footer__logo { height: 44px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.portal-footer__nome { display: flex; flex-direction: column; line-height: 1.15; }
.portal-footer__nome strong {
    font-family: 'Archivo', 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #fff;
}
.portal-footer__nome span { font-size: 12px; color: var(--crh-footer-muted); }
.portal-footer__descricao {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--crh-footer-muted);
    max-width: 290px;
}
.portal-footer__overline {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--crh-footer-accent);
    margin-bottom: 14px;
}
.portal-footer__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.portal-footer__lista li { display: flex; align-items: center; gap: 9px; }
.portal-footer__lista svg { width: 15px; height: 15px; flex: none; color: var(--crh-footer-accent); }
.portal-footer__lista--links a { color: var(--crh-footer-text); text-decoration: none; width: fit-content; }
.portal-footer__lista--links a:hover { color: #fff; }

/* Barra inferior: copyright do tenant + crédito discreto do fornecedor. */
.portal-footer__bar { border-top: 1px solid rgba(255, 255, 255, .08); }
.portal-footer__bar-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 17px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--crh-footer-muted);
}
.portal-footer__credito { display: flex; align-items: center; gap: 6px; }
.portal-footer__credito strong { color: var(--crh-footer-text); font-weight: 700; }

/* Responsivo (≤720px): colunas empilham; barra quebra em 2 linhas; padding lateral menor. */
@media (max-width: 720px) {
    .portal-footer__main { grid-template-columns: 1fr; gap: 28px; padding: 34px 22px 22px; }
    .portal-footer__bar-inner { flex-direction: column; align-items: flex-start; padding: 15px 22px; }
}