/*
* Central do RH — DESIGN TOKENS (fonte da verdade visual; ver docs/design-system.md e o handoff
* "design_handoff_central_rh"). Folha estática versionada, carregada ANTES das demais:
* - painéis Filament: registrada via FilamentAsset (AppServiceProvider);
* - páginas fora do Filament (auth/portal/landing): nos layouts.
* REGRA: componentes usam `var(--crh-*)` — nunca hex solto espalhado pelo código.
*
* O tema escuro redefine só o que muda (superfícies/texto/bordas); cores de marca e feedback são
* as mesmas nos dois temas. `.dark` no é a convenção do Filament e das páginas de auth.
*/
:root {
/* ── Marca / Ações ─────────────────────────────────────────────── */
--crh-primary: #2F6BD8; /* botões primários, links, item ativo */
--crh-primary-hover: #1F4FA8; /* hover/pressed do primário */
--crh-primary-disabled: #9DB8E7; /* primário desabilitado (ex.: "Entrando...") */
--crh-primary-soft: #EEF3FB; /* fundos suaves, tags, ícones de destaque */
--crh-primary-border: #D9E4F6; /* bordas de superfícies soft */
--crh-navy: #12203A; /* sidebar, topo, texto forte, card escuro */
--crh-blue-300: #8FB4EF; /* detalhes claros do logo, acentos */
--crh-blue-400: #6D9CEA; /* acentos do logo */
/* ── Neutros / Superfícies ─────────────────────────────────────── */
--crh-text-strong: #12203A;
--crh-text-muted: #55627A;
--crh-text-subtle: #8A97AD;
--crh-border: #E2E7EF;
--crh-border-light: #EEF1F5;
--crh-bg: #F5F7FA;
--crh-surface: #FFFFFF;
--crh-surface-raised: #FFFFFF; /* superfícies FLUTUANTES (menus/dropdowns): no claro = surface;
no escuro, um passo mais clara que o navy para não se fundir */
--crh-table-header-bg: #F0F4FA; /* regra de contraste: cabeçalho de tabela (texto --crh-text-muted) */
/* ── Feedback / Status (cor + fundo suave) ─────────────────────── */
--crh-success: #1F9D6B;
--crh-success-soft: #E2F4EC;
--crh-warning: #D9A327;
--crh-warning-soft: #FBF3DD;
--crh-danger: #D64545;
--crh-danger-soft: #FBE6E6;
--crh-info: #2F6BD8;
--crh-info-soft: #EEF3FB;
--crh-neutral: #55627A;
--crh-neutral-soft: #EEF1F5;
/* ── Funil de candidatos — tons decorativos das colunas (handoff design_handoff_funil) ──
* Cor por posição da etapa (faixa do topo + badge). Ciclo de 5: azul·roxo·âmbar·verde·cinza —
* casa com o funil default (Triagem·Teste·Entrevista·Aprovado·Base). O roxo não tem equivalente de
* marca, então é definido AQUI uma única vez (token), nunca hex solto na folha de componentes. */
--crh-funnel-0: var(--crh-primary); /* azul — 1ª etapa (Inicial) */
--crh-funnel-1: #7C5CD6; /* roxo — intermediária */
--crh-funnel-2: var(--crh-warning); /* âmbar — intermediária */
--crh-funnel-3: var(--crh-success); /* verde — Aprovado */
--crh-funnel-4: var(--crh-text-subtle); /* cinza — Base de talentos / demais */
/* ── Texto de apoio (helperText/hint) ──────────────────────────────
* PADRÃO ÚNICO do sistema (pedido 2026-08-14): a explicação abaixo/ao lado do campo é nota de
* rodapé — menor e mais discreta que o conteúdo, para não disputar com o rótulo e o valor.
* Antes cada tela decidia (ganchos `.crh-helper-sm`/`.crh-modal-helper-sm`, de 2026-07-30);
* agora é o default de TODO formulário e ficha (ver centralrh.css §"Texto de apoio").
*/
--crh-help-size: 12px;
--crh-help-line: 1.35;
/* ── Raios ─────────────────────────────────────────────────────── */
--crh-radius-sm: 8px; /* badges pequenos, botões small, itens de nav */
--crh-radius-md: 10px; /* inputs, botões */
--crh-radius-lg: 14px; /* cards de conteúdo */
--crh-radius-xl: 20px; /* painéis/containers principais, modais */
--crh-radius-2xl: 24px; /* card de auth (container fixo do split) */
--crh-radius-pill: 999px;
/* ── Vidro (repaginação v1.0) ──────────────────────────────────────
* Superfícies ELEVADAS (cards, topbar, modais, dropdowns, popovers) são translúcidas sobre o
* fundo em gradiente. `--crh-glass` = superfície principal; `--crh-glass-2` = recuo (inputs,
* painel de formulário); `--crh-hair*` = fios de separação (bordas internas, linhas de tabela).
* A sidebar NÃO é vidro — navy sólido nos dois temas (contraste e foco de navegação).
* Onde `backdrop-filter` não é suportado, cair para `--crh-surface` sólido (`@supports not`).
*/
--crh-glass: rgba(255, 255, 255, 0.72);
--crh-glass-2: rgba(255, 255, 255, 0.55);
--crh-glass-border: rgba(255, 255, 255, 0.70);
--crh-blur: 20px;
--crh-hair: rgba(18, 32, 58, 0.08);
--crh-hair-2: rgba(18, 32, 58, 0.05);
/* Fundo do app: gradiente + halos (nunca cor chapada). `--crh-bg` segue como fallback sólido. */
--crh-bg-a: #EAF0F8;
--crh-bg-b: #F6F8FC;
/* Halos do fundo: NÃO trocam no escuro (são a marca vazando pelo fundo) — quem troca é bg-a/bg-b.
* `--crh-app-bg` é o fundo COMPOSTO: um token único consumido pelo shell dos painéis e pelas
* páginas de auth/portal, para os dois não poderem divergir. Como `var()` resolve no contexto do
* elemento, o mesmo token já rende o gradiente escuro sob `.dark`. */
--crh-halo-a: rgba(47, 107, 216, 0.14);
--crh-halo-b: rgba(143, 180, 239, 0.18);
--crh-app-bg:
radial-gradient(1200px 600px at 12% -8%, var(--crh-halo-a), transparent 60%),
radial-gradient(1000px 700px at 108% 12%, var(--crh-halo-b), transparent 55%),
linear-gradient(160deg, var(--crh-bg-a), var(--crh-bg-b));
/* Auth: TAMANHO ÚNICO de todas as telas (login, recuperar, definir senha, enviado, ativação,
* termo, portal). É token para a regra "sem tilt" valer por construção — se uma tela inventar a
* própria medida, o salto volta. Ver centralrh-auth.css §.login. */
--crh-auth-card-w: 960px;
--crh-auth-card-h: 560px;
/* ── Sombras / Focus ───────────────────────────────────────────── */
--crh-shadow-card: 0 12px 40px -24px rgba(18, 32, 58, 0.35);
--crh-shadow-panel: 0 24px 60px -30px rgba(18, 32, 58, 0.45);
--crh-focus-ring: 0 0 0 4px rgba(47, 107, 216, 0.14);
--crh-focus-ring-danger: 0 0 0 4px rgba(214, 69, 69, 0.12);
/* ── Shell (sidebar Azul-noite — igual nos dois temas; specs do Turno 8b) ── */
--crh-sidebar-bg: #12203A;
--crh-sidebar-text: #C4CFE0; /* rótulo de item de TOPO inativo */
--crh-sidebar-subitem-text: #AEB9D0; /* rótulo de SUBITEM (grupo rotulado) inativo */
--crh-sidebar-group-label: #7F8DB0; /* rótulo do grupo (caps) e placeholders */
--crh-sidebar-icon: #8FB4EF; /* ícone de item de topo */
--crh-sidebar-subicon: #8593B0; /* ícone de subitem */
--crh-sidebar-accent: #7FA8EE; /* barra de acento do subitem ativo */
--crh-sidebar-active-sub-bg: rgba(127, 168, 238, 0.22); /* realce do subitem ativo (o 0.14 do proto some sobre o navy em tela real) */
--crh-sidebar-muted: #9FB6DD; /* textos de apoio sobre navy (login/cards) */
--crh-sidebar-hover: rgba(255, 255, 255, 0.06);
--crh-sidebar-border: rgba(255, 255, 255, 0.08);
--crh-logo-line: #CAD9F3; /* linhas do símbolo (fundo claro) */
--crh-logo-line-dark: #3A4D6E; /* linhas do símbolo (sobre navy) */
--crh-logo-node-dark: #7FA8EE; /* nós do símbolo (sobre navy) */
}
/*
* ── Logo "Central do RH" (componente COMPARTILHADO) ─────────────────────────────────────────────
* Vive aqui (e não no centralrh.css) porque esta folha carrega em TODAS as superfícies: painéis
* Filament (asset) e páginas de auth/portal/landing (layouts). Markup único em
* resources/views/components/brand-logo.blade.php; as cores por classe trocam a VARIANTE:
* - padrão: colorida (fundos claros) — linhas #CAD9F3, nós #8FB4EF/#6D9CEA, núcleo #2F6BD8;
* - sobre navy (`.crh-brand--on-navy`, sidebar do Filament ou tema escuro): linhas #3A4D6E,
* nós #7FA8EE, núcleo BRANCO, wordmark branca com acento #7FA8EE.
*/
.crh-brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.crh-brand__mark {
height: 100%;
width: auto;
flex: none;
}
.crh-brand__name {
font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
font-weight: 800;
font-size: 1.3rem;
letter-spacing: -0.015em;
white-space: nowrap;
color: var(--crh-text-strong);
}
.crh-brand__accent {
color: var(--crh-primary);
}
.crh-brand__line { stroke: var(--crh-logo-line); }
.crh-brand__node--ns { fill: var(--crh-blue-300); }
.crh-brand__node--ew { fill: var(--crh-blue-400); }
.crh-brand__core { fill: var(--crh-primary); }
.crh-brand--on-navy .crh-brand__line,
.fi-sidebar .crh-brand__line,
.dark .crh-brand__line { stroke: var(--crh-logo-line-dark); }
.crh-brand--on-navy .crh-brand__node--ns,
.crh-brand--on-navy .crh-brand__node--ew,
.fi-sidebar .crh-brand__node--ns,
.fi-sidebar .crh-brand__node--ew,
.dark .crh-brand__node--ns,
.dark .crh-brand__node--ew { fill: var(--crh-logo-node-dark); }
.crh-brand--on-navy .crh-brand__core,
.fi-sidebar .crh-brand__core,
.dark .crh-brand__core { fill: #ffffff; }
.crh-brand--on-navy .crh-brand__name,
.fi-sidebar .crh-brand__name,
.dark .crh-brand__name { color: #ffffff; }
.crh-brand--on-navy .crh-brand__accent,
.fi-sidebar .crh-brand__accent,
.dark .crh-brand__accent { color: var(--crh-logo-node-dark); }
/*
* ── Alternador de tema claro/escuro (componente COMPARTILHADO) ──────────────────────────────────
* Vive aqui (como o `.crh-brand`) porque esta folha carrega em TODAS as superfícies: painéis Filament
* (asset) e páginas de auth/portal/landing (). PADRONIZAÇÃO 2026-07-19: antes existiam três
* botões diferentes (`.crh-theme-toggle` 38px de traço no painel · `.portal-topbar__tema` 40px sólido
* no portal · `.theme-toggle` circular no auth) — agora é UM só, com markup único no componente Blade
* `resources/views/components/theme-toggle.blade.php`.
*
* Medidas: 40×40, raio `--crh-radius-md`, vidro de recuo + fio; ícone 19px em cinza utilitário. Hover
* azulado (borda + fundo soft do primário). No mobile vira alvo de toque de 44px.
*/
.crh-theme-toggle {
width: 40px;
height: 40px;
flex: none;
margin: 0;
padding: 0;
display: grid;
place-items: center;
border-radius: var(--crh-radius-md);
border: 1px solid var(--crh-hair);
background: var(--crh-glass-2);
color: var(--crh-text-subtle);
cursor: pointer;
line-height: 0;
transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.crh-theme-toggle:hover {
border-color: var(--crh-primary-border);
background: var(--crh-primary-soft);
color: var(--crh-text-strong);
}
.crh-theme-toggle:focus-visible {
outline: none;
box-shadow: var(--crh-focus-ring);
}
.crh-theme-toggle svg {
width: 19px;
height: 19px;
}
/* Variante FLUTUANTE (páginas de auth, que não têm topbar própria): canto superior direito. */
.crh-theme-toggle--fixed {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 60;
}
/* Mostra o tema-ALVO: lua no claro (clica → escuro), sol no escuro (clica → claro). */
.crh-theme-toggle .icon-sun { display: none; }
.crh-theme-toggle .icon-moon { display: block; }
.dark .crh-theme-toggle .icon-sun { display: block; }
.dark .crh-theme-toggle .icon-moon { display: none; }
@media (max-width: 640px) {
.crh-theme-toggle { width: 44px; height: 44px; }
}
.dark {
--crh-text-strong: #E6EDFA;
--crh-text-muted: #8FA5CC;
--crh-text-subtle: #6E82A8;
--crh-border: #24365C;
--crh-border-light: #1C2C4C;
--crh-bg: #0B1526; /* fallback sólido; o fundo real é o gradiente bg-a → bg-b */
--crh-surface: #12203A;
--crh-surface-raised: #17294A; /* menu/dropdown sobre topbar/página navy: tom elevado, senão some */
--crh-table-header-bg: rgba(255, 255, 255, 0.04);
--crh-primary-soft: rgba(47, 107, 216, 0.16);
--crh-primary-border: rgba(127, 168, 238, 0.22);
--crh-success-soft: #123528;
--crh-warning-soft: #392E12;
--crh-danger-soft: #3A1A1A;
--crh-info-soft: #16263F;
--crh-neutral-soft: #1C2C4C;
/* ── Vidro no escuro ───────────────────────────────────────────────
* As superfícies translúcidas escurecem (o vidro claro sobre o navy vira leitoso e mata o
* contraste do texto); marca e status NÃO trocam de hex — só neutros/superfície.
*/
--crh-bg-a: #0A1424;
--crh-bg-b: #0E1B30;
--crh-glass: rgba(20, 33, 58, 0.62);
--crh-glass-2: rgba(20, 33, 58, 0.42);
--crh-glass-border: rgba(255, 255, 255, 0.10);
--crh-hair: rgba(255, 255, 255, 0.09);
--crh-hair-2: rgba(255, 255, 255, 0.05);
--crh-shadow-card: 0 12px 40px -24px rgba(0, 0, 0, 0.6);
--crh-shadow-panel: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
}
/*
* ── Descritivo da vaga (componente COMPARTILHADO) ───────────────────────────────────────────────
* Markup único em resources/views/aprovacao/descritivo-vaga.blade.php, renderizado em DUAS
* superfícies: o modal "Ver descritivo" do painel Filament (asset) e a página PÚBLICA de decisão do
* aprovador ( no layout). Mora aqui — como o logo e o toggle de tema — porque esta é a única
* folha carregada nas duas (centralrh.css só existe no painel; centralrh-portal.css só no público).
*
* Sem fundo próprio: só fios de separação (`--crh-hair*`), para assentar tanto no branco do modal
* quanto no card de vidro da página pública, nos dois temas (os tokens já viram no `.dark`).
*/
.descritivo-vaga {
margin: 1rem 0 1.25rem;
border: 1px solid var(--crh-hair);
border-radius: var(--crh-radius-lg);
overflow: hidden; /* os fios das linhas respeitam o raio do card */
font-size: 0.875rem;
line-height: 1.5;
}
.descritivo-vaga__campo {
display: grid;
grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
gap: 0.15rem 1rem;
align-items: baseline;
padding: 0.6rem 0.9rem;
}
.descritivo-vaga__campo + .descritivo-vaga__campo {
border-top: 1px solid var(--crh-hair-2);
}
/* Campo LONGO (lista ou texto extenso): rótulo em cima, valor ocupando a linha inteira. */
.descritivo-vaga__campo--bloco {
grid-template-columns: minmax(0, 1fr);
gap: 0.3rem;
}
.descritivo-vaga dt {
margin: 0;
color: var(--crh-text-muted);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.descritivo-vaga dd {
margin: 0;
color: var(--crh-text-strong);
/* Texto colado sem espaços (ex.: "aaaa…" digitado no campo) não pode estourar a largura. */
overflow-wrap: anywhere;
}
/* Quebras de linha digitadas no textarea (descrição) são preservadas nos campos em bloco. */
.descritivo-vaga__campo--bloco dd {
white-space: pre-line;
}
/* 1º campo da constante = título da vaga: é o cabeçalho do descritivo. */
.descritivo-vaga__campo--destaque dd {
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
}
.descritivo-vaga__lista {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: 0.2rem;
list-style: disc;
}
.descritivo-vaga__lista li::marker {
color: var(--crh-primary);
}
.descritivo-vaga__vazio {
color: var(--crh-text-subtle);
}
/* "Exibir salário": Sim/Não como chip (o par de status já usado nos painéis). */
.descritivo-vaga__chip {
display: inline-flex;
align-items: center;
padding: 0.1rem 0.55rem;
border-radius: var(--crh-radius-pill);
font-size: 0.75rem;
font-weight: 600;
}
.descritivo-vaga__chip--sim {
background: var(--crh-success-soft);
color: var(--crh-success);
}
.descritivo-vaga__chip--nao {
background: var(--crh-neutral-soft);
color: var(--crh-neutral);
}
.dark .descritivo-vaga__chip--nao {
color: var(--crh-text-muted); /* o cinza do tema claro não tem contraste sobre o soft escuro */
}
/* iPhone / coluna estreita: rótulo em cima em TODOS os campos. */
@media (max-width: 480px) {
.descritivo-vaga__campo {
grid-template-columns: minmax(0, 1fr);
gap: 0.2rem;
}
}
/* ------------------------------------------------------------------------------------------------
* LOGO DA ORGANIZAÇÃO — variante clara × escura (pedido 2026-08-12)
*
* `` emite os DOIS quando a organização enviou as duas variantes; a escolha é
* aqui, por CSS, porque o tema mora na classe `.dark` do (aplicada antes da pintura) e o
* servidor não sabe qual é ao renderizar — escolher no PHP daria o logo errado a cada troca de tema
* (a troca não recarrega a página).
*
* As duas regras são MUTUAMENTE EXCLUSIVAS por tema e só ESCONDEM: a variante visível nunca é
* tocada, então cada superfície mantém o `display` da sua própria classe (`portal-topbar__logo` é
* bloco, `tp-brand__logo` é inline-block, …) — sem precisar readequar `display` aqui.
*
* Superfície de fundo FIXO escuro (o rodapé público, navy nos dois temas) NÃO passa por aqui: lá a
* escolha é do servidor, em portal-footer.blade.php, porque não depende do tema do usuário.
* ------------------------------------------------------------------------------------------------ */
html:not(.dark) .crh-logo--dark {
display: none !important;
}
html.dark .crh-logo--light {
display: none !important;
}