/*
 * 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); }
.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: 9px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 160ms ease, transform 120ms ease, background 160ms ease, border-color 160ms ease;
}

/* Variante SÓLIDA (ação principal). */
.portal-vaga__cta,
.portal-vaga-card__cta,
.portal-candidatura__enviar {
    background: var(--primary);
    color: var(--primary-text);
    border: 1px solid rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 10px rgba(0, 0, 0, 0.12);
}
.portal-vaga__cta:hover,
.portal-vaga-card__cta:hover,
.portal-candidatura__enviar:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 18px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

/* 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). */
.portal-shell {
    align-self: start;
    justify-self: stretch;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}
.portal-jobs { width: min(100%, 1080px); }

.portal-jobs__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Reserva o canto superior direito para o botão fixo de tema (evita sobrepor o "Cadastrar CV"). */
    padding-right: 3.25rem;
    margin-bottom: 1.25rem;
}
.portal-jobs__brand { display: flex; align-items: center; gap: .9rem; }
/* Logo REAL (img): só altura fixa + object-fit; largura natural (aspecto do arquivo), sem caixa,
 * borda, fundo ou cantos arredondados — o logo aparece "solto" no cabeçalho. */
.portal-jobs__logo {
    height: 56px;
    width: auto;
    object-fit: cover;
}
/* Placeholder (sem logo): mantém o quadrado 56×56 arredondado com a inicial da empresa. As props de
 * caixa (largura/borda/cantos/flex) vivem aqui — a base ficou enxuta para o img real. */
.portal-jobs__logo--ph {
    width: 56px;
    flex: none;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, var(--card-bg));
}
.portal-jobs__empresa { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
.portal-jobs__sub { margin: 1.5rem 0 0; color: var(--muted); font-size: .85rem; }

/* Botão "Fazer Login" — OUTLINE: fundo branco, borda + texto azul-escuro (ícone herda a cor). */
.portal-jobs__cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.15rem;
    border-radius: 9px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    background: #ffffff;
    color: #1e3a8a;
    border: 1px solid #1e3a8a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.portal-jobs__cta-icon { width: 1.05rem; height: 1.05rem; flex: none; }

/* ── 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;
    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__cta:hover {
    background: color-mix(in srgb, #1e3a8a 8%, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.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; }
    .portal-jobs__header { flex-wrap: wrap; }
    .portal-jobs__cta { margin-left: 0; }
}

/* ── 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);
}
.portal-vaga__bloco { margin-top: 1.6rem; }
.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.6; white-space: pre-line; }
.portal-vaga__cta { margin-top: 1.9rem; }

/* ── 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, #3b82f6 28%, 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;
}
.portal-home__acao--primario {
    color: var(--primary-text);
    background: var(--primary);
    border-color: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 10px rgba(0, 0, 0, 0.12);
}
.portal-home__acao--primario:hover {
    color: var(--primary-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 18px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

/* ── 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; }

/* ── Editor de currículo — cena "vidro" (glassmorphism) em tela única ───────────────────────────
 * Full-bleed com fundo em gradiente por trás dos cards translúcidos (profundidade). `.portal-cv` é a
 * raiz do componente (item do grid do body): sobrepomos o centramento com justify/align-self stretch. */
.portal-cv {
    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, #3b82f6 28%, transparent), transparent 55%),
        var(--bg);
}
.portal-cv__inner { width: min(100%, 960px); }

/* Embutido na home: sem cena/gradiente/altura própria — herda o fundo do hub. */
.portal-cv--embutido {
    justify-self: auto;
    align-self: auto;
    width: 100%;
    min-height: 0;
    padding: 0;
    background: none;
    display: block;
}
.portal-cv--embutido .portal-cv__inner { width: 100%; }

/* Cabeçalho: voltar + título à esquerda, "Sair" à direita. */
.portal-cv__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.portal-cv__sair-form { margin: 0; }
.portal-cv__sair {
    width: auto;
    margin: 0;
    padding: .5rem 1rem;
    border-radius: 9px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text);
    background: color-mix(in srgb, var(--card-bg) 55%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    transition: border-color 150ms ease, color 150ms ease;
}
.portal-cv__sair:hover { color: var(--err); border-color: var(--err); }
/* Idem: vence o button[type=submit] global (senão o texto do "Sair" fica branco sobre o vidro claro). */
.portal-cv__sair[type="submit"] {
    color: var(--text);
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.portal-cv__sair[type="submit"]:hover {
    color: var(--err);
    border-color: var(--err);
    box-shadow: none;
    transform: none;
}

/* Grade de seções: duas colunas (tela mais curta); os campos empilham por dentro conforme a largura. */
.portal-cv__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: start;
    margin-top: 1.25rem;
}

/* Progresso de preenchimento: rótulo + barra nativa <progress> (valor por atributo, não por style
 * inline — respeita CLAUDE.md §7). */
.portal-cv__completo {
    margin: .85rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
}
.portal-cv__barra {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 18%, var(--card-bg));
    overflow: hidden;
}
.portal-cv__barra::-webkit-progress-bar { background: color-mix(in srgb, var(--muted) 18%, var(--card-bg)); border-radius: 999px; }
.portal-cv__barra::-webkit-progress-value { background: var(--primary); border-radius: 999px; transition: width 200ms ease; }
.portal-cv__barra::-moz-progress-bar { background: var(--primary); border-radius: 999px; }

/* Card de seção — VIDRO: translúcido + desfoque + sombra profunda sobre o gradiente da cena. */
.portal-cv__bloco {
    margin: 0;
    padding: 1.25rem 1.35rem;
    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);
}
/* Seção que ocupa a linha inteira (Dados básicos), mesmo dentro do grid. */
.portal-cv__bloco--full { grid-column: 1 / -1; margin-top: 1.25rem; }
.portal-cv__bloco h2 {
    margin: 0 0 .85rem;
    font-size: 1rem;
    font-weight: 600;
}
.portal-cv__ok { margin: 0 0 .6rem; color: var(--primary); font-size: .85rem; font-weight: 600; }

/* Lista de itens já cadastrados (autosave). Cada linha: texto + botão "Remover" discreto. */
.portal-cv__bloco ul {
    list-style: none;
    margin: 0 0 .85rem;
    padding: 0;
    display: grid;
    gap: .4rem;
}
.portal-cv__bloco li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .75rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--muted) 6%, var(--card-bg));
    font-size: .88rem;
}
/* Estado vazio da seção: linha discreta, sem moldura. */
.portal-cv__vazio {
    border: 0;
    background: transparent;
    padding: .25rem 0;
    color: var(--muted);
    font-size: .85rem;
    font-style: italic;
}

/* Painel "adicionar item": os campos e o botão ficam no MESMO contêiner, então o botão alinha com a
 * largura dos campos (borda a borda). */
.portal-cv__form {
    display: grid;
    gap: .7rem;
    padding: 1rem;
    border: 1px dashed color-mix(in srgb, var(--border) 60%, var(--primary));
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-bg) 35%, transparent);
}
.portal-cv__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
}
.portal-cv__campos input { margin: 0; }

/* Campo rotulado (Dados básicos): rótulo em cima, input embaixo. Neutraliza o `label` global. */
.portal-cv__campo {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    font-size: inherit;
    color: var(--text);
}
.portal-cv__campo > span { font-size: .78rem; color: var(--muted); }
.portal-cv__dica { color: var(--primary); font-style: normal; font-weight: 600; }
/* Indicador de campo OBRIGATÓRIO: asterisco vermelho ao lado do rótulo (portal é Blade puro, sem o
 * asterisco automático do Filament). A legenda explica o símbolo uma vez por seção. */
.portal-cv__obrigatorio { color: var(--err); font-weight: 700; margin-left: .15rem; }
.portal-cv__legenda { margin: .1rem 0 .9rem; font-size: .78rem; color: var(--muted); }
.portal-cv__campo--full { grid-column: 1 / -1; }
.portal-cv__campo--2 { grid-column: span 2; }

.portal-cv__add-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.portal-cv__add-row .portal-cv__add { flex: 1 1 12rem; }

/* Botão "Adicionar/Enviar/Anexar": largura total do painel (alinhado aos campos), tinta primária. */
.portal-cv__bloco .portal-cv__add {
    width: 100%;
    margin: 0;
    padding: .6rem 1rem;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.portal-cv__bloco .portal-cv__add:hover {
    color: var(--primary-text);
    background: var(--primary);
    border-color: var(--primary);
}
.portal-cv__bloco .portal-cv__add--sec {
    color: var(--text);
    background: transparent;
    border-color: var(--input-border);
}
.portal-cv__bloco .portal-cv__add--sec:hover { color: var(--primary); background: transparent; border-color: var(--primary); }
/* Sem arquivo escolhido: botão de upload desabilitado (não dá o "obrigatório" espúrio ao clicar). */
.portal-cv__bloco .portal-cv__add:disabled {
    opacity: .5;
    cursor: not-allowed;
    color: var(--muted);
    background: transparent;
    border-color: var(--input-border);
}

/* Botão "Remover" (na linha do item): discreto/perigo. */
.portal-cv__bloco li button {
    width: auto;
    margin: 0;
    padding: .25rem .6rem;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--err);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--err) 40%, var(--border));
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.portal-cv__bloco li button:hover {
    color: #fff;
    background: var(--err);
    border-color: var(--err);
}

/* ── Responsivo ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .portal-cv__grid { grid-template-columns: 1fr; }
}
@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; }
    .portal-cv__campo--2 { grid-column: auto; }

    /* 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%; }
    .portal-cv__bloco { padding: 1.1rem; }
}