/* =====================================================================
Portal ME — design system do painel (herdado do Destaque RH)
Extraído dos prints de referência. Sem framework, sem build.
===================================================================== */
:root {
/* cor */
--c-primaria: #2264D1;
--c-primaria-escura: #1A4FA8;
--c-primaria-clara: #E3ECFB;
--c-primaria-fraca: #F2F6FD;
/* topo escuro da paleta (Configurações → Cores e marca; ver app/Nucleo/Paleta.php) */
--c-topo: #0F2747;
--c-topo-2: #1B3A63;
/* Contraste conferido sobre branco e sobre --c-fundo. O cinza fraco antigo
(#8A93A2) ficava em 3.1:1, abaixo do mínimo de 4.5:1 para texto. */
--c-texto: #151A24; /* 17.4:1 no branco */
--c-texto-medio:#444E5F; /* 8.4:1 no branco */
--c-texto-fraco:#646E7E; /* 5.2:1 no branco */
--c-borda: #DDE1E7;
--c-borda-forte:#C6CCD6;
--c-fundo: #F5F6F8; /* caixinhas e realces dentro dos cartões */
--c-pagina: #E9EAED; /* fundo da página (atrás dos cartões) */
--c-superficie: #FFFFFF;
--c-sucesso:#256B42; --c-sucesso-bg:#E7F4EC;
--c-atencao:#8F5500; --c-atencao-bg:#FDF0E0;
--c-erro: #C53434; --c-erro-bg: #FBE9E9;
--c-neutro: #5A6474; --c-neutro-bg: #EEF0F3;
--c-info: #1D4ED8; --c-info-bg: #EAF1FE;
/* DISC — mantém a identidade atual */
--disc-aguia: #14B8A6;
--disc-lobo: #6366F1;
--disc-golfinho:#F49821;
--disc-tubarao: #EB5757;
/* forma */
--r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
--sombra-1:0 1px 2px rgba(16,24,40,.05);
--sombra-2:0 2px 8px rgba(16,24,40,.07);
--sombra-3:0 12px 32px rgba(16,24,40,.14);
--rail: 56px; /* largura recolhida */
--rail-aberto: 236px; /* largura expandida */
--topbar: 60px;
}
*,*::before,*::after { box-sizing:border-box; }
/* Nenhuma animação enquanto a página carrega: a classe sai no primeiro
quadro depois do load, então só as interações do usuário animam. */
.sem-transicao * { transition:none !important; animation:none !important; }
/* O [hidden] do navegador é `display:none` na folha do UA, e qualquer regra
nossa com `display` (ex.: .campo{display:block}) a vence. Sem isto, esconder
um elemento com o atributo hidden simplesmente não funciona. */
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
margin:0;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
font-size:14px; line-height:1.5;
color:var(--c-texto); background:var(--c-pagina);
-webkit-font-smoothing:antialiased;
}
a { color:var(--c-primaria); text-decoration:none; }
a:hover { text-decoration:underline; }
/* ---------------------------------------------------------- ícones */
.ico { width:20px; height:20px; flex:none; stroke-width:1.75; vertical-align:-4px; }
.ico-sm { width:16px; height:16px; vertical-align:-3px; }
.ico-lg { width:24px; height:24px; vertical-align:-5px; }
/* ---------------------------------------------------------- estrutura */
.app { min-height:100vh; }
.topbar {
position:fixed; inset:0 0 auto 0; height:var(--topbar); z-index:40;
display:flex; align-items:center; gap:var(--s-5);
padding:0 var(--s-5);
background:var(--c-topo); color:#fff;
}
/* Aba da marca: o canto do menu e do logotipo é mais alto que a barra e volta
para ela numa curva suave (uma curva invertida no encontro com a linha da barra). */
.topbar__aba {
--aba-extra:14px; /* quanto desce abaixo da barra */
--aba-curva:8px; /* raio da curva invertida que encaixa na linha */
--aba-canto:8px; /* raio do canto de baixo (≤ extra − curva + 2, para a curva encontrar a borda reta) */
position:relative; z-index:1; flex:none; align-self:flex-start;
display:flex; align-items:center; gap:6px;
height:calc(var(--topbar) + var(--aba-extra));
/* o botão (40px) fica centrado na coluna dos ícones do menu (56px): 8px da borda */
margin-left:calc(-1 * var(--s-5)); padding:0 var(--s-4) 0 calc((var(--rail) - 40px) / 2);
background:var(--c-topo);
border-bottom-right-radius:var(--aba-canto);
box-shadow:0 12px 22px -14px rgba(16,24,40,.55);
}
/* a curva invertida: preenche o canto entre a aba e a linha de baixo da barra */
.topbar__aba::after {
content:""; position:absolute; left:100%; top:calc(var(--topbar) - 1px);
width:var(--aba-curva); height:var(--aba-curva); pointer-events:none;
background:radial-gradient(circle at 100% 100%, transparent calc(var(--aba-curva) - .5px), var(--c-topo) var(--aba-curva));
}
.topbar .rail__alternar--topo, .topbar .rail__alternar--topo .ico { border-color:rgba(255,255,255,.22); background:transparent; color:#fff; flex:none; }
.rail__alternar--topo:hover { background:rgba(255,255,255,.12); }
/* itens do topo sobre o fundo escuro */
.topbar .btn--contorno { background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.topbar .btn--contorno:hover { background:rgba(255,255,255,.12); }
.topbar .btn:focus-visible, .topbar .sino__botao:focus-visible, .topbar a:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.topbar .sino__botao { background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.topbar .sino__botao:hover { background:rgba(255,255,255,.12); }
.topbar .avatar { background:#fff; color:var(--c-topo); }
/* botões redondos do topo: um padrão só (sino, configurações, avatar) */
.topbar .sino__botao, .topbar .topbar__fim > .btn--icone, .topbar .topbar__fim .btn--icone, .topbar .avatar { width:40px; height:40px; flex:none; }
.topbar .topbar__fim > .btn--icone, .topbar .topbar__fim .btn--icone { border-color:rgba(255,255,255,.28); }
.topbar .avatar { font-size:13px; }
.topbar .sino__badge { top:-5px; right:-5px; min-width:20px; height:20px; box-shadow:0 0 0 2px var(--c-topo); }
.topbar__perfil { color:rgba(255,255,255,.88) !important; }
.topbar .busca .ico { color:rgba(255,255,255,.8); }
.topbar .busca-global .entrada { background:var(--c-topo-2); border-color:rgba(255,255,255,.2); color:#fff; }
.topbar .busca-global .entrada::placeholder { color:rgba(255,255,255,.78); }
.topbar .busca-global .entrada:focus { background:#fff; color:var(--c-texto); border-color:#fff; }
.topbar .busca-global .entrada:focus::placeholder { color:var(--c-texto-fraco); }
.topbar .busca-global:focus-within .ico { color:var(--c-texto-fraco); }
.topbar .busca__atalho { background:transparent; border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.85); }
/* sem logo branco enviado: o logo principal vira branco (silhueta) */
.topbar__logo--auto { filter:brightness(0) invert(1); }
.topbar__marca {
display:flex; align-items:center; justify-content:flex-start; flex:none;
gap:var(--s-2); font-weight:700; letter-spacing:-.02em; overflow:hidden;
/* acompanha a largura do menu para o logotipo alinhar com a coluna */
width:calc(var(--rail) - var(--s-2)); transition:width .18s ease;
}
[data-rail="aberto"] .topbar__marca { width:calc(var(--rail-aberto) - var(--s-2)); }
/* nunca deforma: mantém a proporção e, se não couber na largura, diminui por inteiro */
.topbar__marca img { height:auto; width:auto; max-height:46px; max-width:100%; object-fit:contain; object-position:left center; flex:none; }
/* Menu fechado: só o ícone. Menu aberto: o logotipo por extenso. */
.topbar__icone { display:block; }
.topbar__logo { display:none; max-width:100%; }
.topbar__logo--texto { font-size:16px; white-space:nowrap; color:var(--c-texto); }
[data-rail="aberto"] .topbar__icone { display:none; }
[data-rail="aberto"] .topbar__logo { display:block; }
.topbar__nav { display:flex; gap:var(--s-1); margin-left:var(--s-4); }
.topbar__nav a {
padding:7px 14px; border-radius:var(--r-full);
color:var(--c-texto-medio); font-size:13.5px; font-weight:500; white-space:nowrap;
}
.topbar__nav a:hover { background:var(--c-fundo); text-decoration:none; }
.topbar__nav a[aria-current] { background:var(--c-primaria-clara); color:var(--c-primaria-escura); font-weight:600; }
.topbar__fim { margin-left:auto; display:flex; align-items:center; gap:var(--s-3); flex:none; }
.rail {
position:fixed; top:var(--topbar); bottom:0; left:0; width:var(--rail); z-index:30;
display:flex; flex-direction:column; align-items:center; gap:var(--s-1);
padding:var(--s-3) var(--s-2);
background:var(--c-superficie); border-right:1px solid var(--c-borda);
overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
transition:width .18s ease;
}
/* ----- estado expandido ----- */
[data-rail="aberto"] .rail { width:var(--rail-aberto); align-items:stretch; }
/* a aba da marca desce 22px abaixo da barra: o menu começa depois dela (fica aqui, depois do .rail, para não ser sobrescrito) */
@media (min-width:861px) { .rail { padding-top:calc(var(--s-3) + 14px); } }
[data-rail="aberto"] .conteudo { padding-left:var(--rail-aberto); }
.conteudo { transition:padding-left .18s ease; }
[data-rail="aberto"] .rail__item { width:auto; justify-content:flex-start; gap:var(--s-3); padding:0 var(--s-3); }
[data-rail="aberto"] .rail__item .rail__texto { display:inline; }
[data-rail="aberto"] .rail__sep { width:auto; margin:var(--s-2) var(--s-3); }
[data-rail="aberto"] .rail__grupo { display:block; }
.rail__texto { display:none; font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* título de grupo, só aparece com o menu aberto */
.rail__grupo {
display:none; padding:var(--s-4) var(--s-3) var(--s-1);
font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--c-texto-fraco);
}
.rail__alternar { border:0; background:none; cursor:pointer; font:inherit; color:var(--c-texto-medio); }
#alternarMenuRodape { margin-top:auto; }
#alternarMenuRodape:hover { background:var(--c-fundo); color:var(--c-texto); }
#alternarMenuRodape .ico { transition:transform .18s ease; }
[data-rail="aberto"] #alternarMenuRodape .ico { transform:rotate(180deg); }
.rail::-webkit-scrollbar { display:none; }
.rail__item {
position:relative; width:40px; height:40px; border-radius:var(--r-md); flex:none;
display:flex; align-items:center; justify-content:center; color:var(--c-texto-medio);
}
.rail__item:hover { background:var(--c-fundo); color:var(--c-texto); text-decoration:none; }
.rail__item[aria-current] { background:var(--c-primaria-clara); color:var(--c-primaria-escura); }
.rail__item[aria-current]::before {
content:''; position:absolute; left:-8px; top:9px; width:3px; height:22px;
border-radius:0 3px 3px 0; background:var(--c-primaria);
}
/* rótulo que aparece no hover */
/* Tooltip do menu recolhido.
Vive no , não dentro do .rail — o rail tem overflow para rolar a lista,
e qualquer balão posicionado dentro dele seria recortado. */
.dica {
position:fixed; z-index:100; pointer-events:none;
padding:7px 11px; border-radius:var(--r-sm);
background:#1A1F2B; color:#fff; font-size:12.5px; font-weight:500; line-height:1.3;
white-space:nowrap; box-shadow:var(--sombra-2);
opacity:0; transform:translateX(-6px); transition:opacity .14s ease, transform .14s ease;
}
.dica[data-visivel="1"] { opacity:1; transform:translateX(0); }
.dica::before {
content:''; position:absolute; right:100%; top:50%; margin-top:-5px;
border:5px solid transparent; border-right-color:#1A1F2B;
}
.dica__atalho {
margin-left:8px; padding:1px 5px; border-radius:4px;
background:rgba(255,255,255,.16); font-size:11px; font-weight:600;
}
.rail__sep { width:24px; height:1px; background:var(--c-borda); margin:var(--s-2) 0; }
.conteudo {
padding-top:var(--topbar); padding-left:var(--rail);
min-height:100vh;
}
.container { width:100%; padding:var(--s-5) 20px; } /* lateral um pouco menor: mais espaço útil em todas as telas */
/* Quando uma tela específica precisar de leitura confortável (texto corrido,
formulário longo), use .container--estreito. O padrão é a tela cheia. */
.container--estreito { max-width:1100px; margin-inline:auto; }
/* ---------------------------------------------------------- cabeçalho de página */
/* O "Voltar" fica na própria linha do título: ocupava uma linha inteira só
para si e empurrava todo o conteúdo para baixo. */
.pagina__topo { display:flex; align-items:flex-start; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-3); }
.pagina__identidade { min-width:0; flex:1 1 auto; }
.pagina__voltar {
flex:none; border:1px solid var(--c-borda); background:var(--c-superficie);
/* alinha o centro do botão com a primeira linha do título */
margin-top:3px;
}
.pagina__voltar:hover { background:var(--c-fundo); border-color:var(--c-borda-forte, var(--c-borda)); }
/* compatibilidade: telas que ainda tenham o link antigo continuam legíveis */
.voltar { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; margin-bottom:var(--s-3); }
.pagina__titulo { margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em; }
.pagina__imagem { flex:none; width:128px; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--c-borda); background:var(--c-fundo); box-shadow:var(--sombra-1); }
.pagina__imagem img { width:100%; height:100%; object-fit:cover; display:block; }
.pagina__imagem-vazia { display:grid; place-items:center; width:100%; height:100%; background:color-mix(in srgb, var(--cc) 10%, #fff); color:var(--cc); }
@media (max-width: 600px) { .pagina__imagem { width:88px; } }
.pagina__sub { margin:4px 0 0; color:var(--c-texto-medio); font-size:13.5px; }
.pagina__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); margin-top:var(--s-2); font-size:13px; color:var(--c-texto-medio); }
.pagina__meta span { display:inline-flex; align-items:center; gap:6px; }
.pagina__acoes { margin-left:auto; display:flex; gap:var(--s-2); flex-wrap:wrap; }
.pagina__acoes--abaixo { margin:var(--s-3) 0 0; }
/* meta e ações de baixo: largura toda, desde a borda (sob a seta de voltar) */
.pagina__linha { flex:1 1 100%; min-width:0; margin-top:calc(-1 * var(--s-1)); }
.pagina__linha > .pagina__meta { margin-top:0; }
.pagina__linha > .pagina__acoes--abaixo:first-child { margin-top:0; }
/* ---------------------------------------------------------- superfícies */
.card {
background:var(--c-superficie); border:1px solid var(--c-borda);
border-radius:var(--r-lg); box-shadow:var(--sombra-1);
}
.card__corpo { padding:var(--s-5) var(--s-5) var(--s-4); } /* embaixo um pouco menos: ganha espaço sem apertar o texto */
.card__cabecalho {
padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--c-borda);
display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
}
.card__titulo { margin:0; font-size:16px; font-weight:600; }
.secao__titulo { margin:var(--s-6) 0 var(--s-1); font-size:20px; font-weight:700; }
.secao__sub { margin:0 0 var(--s-4); color:var(--c-texto-medio); font-size:13.5px; }
/* ---------------------------------------------------------- KPI */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s-4); }
/* linhas com cinco indicadores: com 230px de mínimo o quinto caía sozinho na linha de baixo */
.kpis--cinco { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.kpi { background:var(--c-superficie); border:1px solid var(--c-borda); border-radius:var(--r-lg); padding:var(--s-4) var(--s-5); box-shadow:var(--sombra-1); }
.kpi__rotulo { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--c-texto-medio); }
.kpi__valor { margin-top:var(--s-2); font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.kpi__sub { margin-top:2px; font-size:12.5px; color:var(--c-texto-fraco); }
.kpi__rodape { margin-top:var(--s-3); font-size:13px; }
.kpi--sucesso .kpi__valor { color:var(--c-sucesso); }
.kpi--erro .kpi__valor { color:var(--c-erro); }
.kpi--atencao .kpi__valor { color:var(--c-atencao); }
/* ---------------------------------------------------------- botões */
.btn {
display:inline-flex; align-items:center; justify-content:center; gap:7px;
min-height:38px; padding:0 16px; border-radius:var(--r-full);
border:1px solid transparent; background:transparent;
font:inherit; font-size:13.5px; font-weight:600; color:var(--c-texto);
cursor:pointer; white-space:nowrap; transition:background .12s,border-color .12s,color .12s;
}
.btn:hover { text-decoration:none; }
.btn:focus-visible { outline:2px solid var(--c-primaria); outline-offset:2px; }
.btn[disabled],.btn[aria-disabled=true] { opacity:.5; cursor:not-allowed; }
.btn--primario { background:var(--c-primaria); color:#fff; }
.btn--primario:hover { background:var(--c-primaria-escura); }
.btn--contorno { border-color:var(--c-borda-forte); background:var(--c-superficie); }
.btn--contorno:hover { background:var(--c-fundo); }
.btn--escuro { background:#22293A; color:#fff; }
.btn--escuro:hover { background:#161C29; }
.btn--texto { color:var(--c-primaria); padding:0 10px; }
.btn--texto:hover { background:var(--c-primaria-fraca); }
.btn--perigo { border-color:#E7A7A7; color:var(--c-erro); background:var(--c-superficie); }
.btn--perigo:hover { background:var(--c-erro-bg); }
.btn--sm { min-height:32px; padding:0 12px; font-size:12.5px; }
.btn--icone { width:38px; padding:0; border-radius:var(--r-full); }
.btn-grupo { display:flex; gap:var(--s-2); flex-wrap:wrap; }
/* legenda da tabela de produção por colaborador */
.legenda-ind {
padding:var(--s-3) var(--s-5) var(--s-4); border-bottom:1px solid var(--c-borda);
background:#FAFBFC; font-size:12.5px; line-height:1.55; color:var(--c-texto-medio);
}
.legenda-ind p { margin:0 0 4px; }
.legenda-ind p:last-child { margin-bottom:0; }
.legenda-ind__dica { display:flex; gap:6px; align-items:flex-start; margin-top:6px !important; color:var(--c-texto); }
.legenda-ind__dica .ico { color:var(--c-info); flex:none; margin-top:2px; }
/* ------------------------------------------------- resultado da triagem por IA */
.triagem__topo {
display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--c-borda);
background:linear-gradient(90deg, var(--ia-bg), transparent 75%);
}
.triagem__titulo { margin:0; font-size:15px; font-weight:700; }
.triagem__meta { margin:2px 0 0; font-size:12.5px; color:var(--c-texto-medio); }
.triagem__acoes { margin-left:auto; display:flex; gap:var(--s-2); flex-wrap:wrap; }
.triagem__resumo { padding:var(--s-4) var(--s-5); font-size:13.5px; line-height:1.6; color:var(--c-texto-medio); border-bottom:1px solid var(--c-borda); }
.cands { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); padding:var(--s-5); }
.modal__corpo .cands { padding:var(--s-4) 0 0; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.modal__corpo .triagem__topo { margin:calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; border-radius:0; }
.modal__corpo .triagem__resumo { margin:0 calc(-1 * var(--s-5)); }
.cand {
border:1px solid var(--c-borda); border-radius:var(--r-lg); background:var(--c-superficie);
display:flex; flex-direction:column; overflow:hidden;
}
.cand--forte { border-color:var(--ia-2); box-shadow:0 0 0 1px var(--ia-2); }
.cand__topo { display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-4); }
.cand__nota {
width:46px; height:46px; flex:none; border-radius:var(--r-md);
display:grid; place-items:center; font-size:17px; font-weight:800;
background:var(--c-neutro-bg); color:var(--c-texto-medio);
}
.cand--forte .cand__nota { background:linear-gradient(135deg, var(--ia-1), var(--ia-2)); color:#fff; }
.cand--possivel .cand__nota { background:var(--c-atencao-bg); color:var(--c-atencao); }
.cand__nome { margin:0; font-size:14.5px; font-weight:700; line-height:1.3; }
.cand__nome a { color:inherit; }
.cand__sub { margin:3px 0 0; font-size:12px; color:var(--c-texto-medio); }
.cand__selos { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.cand__resumo { padding:0 var(--s-4) var(--s-3); margin:0; font-size:13px; line-height:1.55; color:var(--c-texto-medio); }
.cand__pontos { padding:0 var(--s-4) var(--s-3); margin:0; list-style:none; font-size:12.5px; }
.cand__pontos li { display:flex; gap:7px; align-items:flex-start; margin-bottom:4px; line-height:1.45; }
.cand__pontos li::before { content:"+"; font-weight:800; color:var(--c-sucesso); flex:none; }
.cand__pontos--atencao li::before { content:"!"; color:var(--c-atencao); }
.cand__rodape {
margin-top:auto; padding:var(--s-3) var(--s-4);
border-top:1px solid var(--c-borda); background:#FAFBFC;
display:flex; gap:var(--s-2); justify-content:flex-end; flex-wrap:wrap;
}
/* chamada do módulo não contratado */
.ia-venda { padding:var(--s-6) var(--s-5); text-align:center; }
.ia-venda__marca {
width:64px; height:64px; margin:0 auto var(--s-4); border-radius:50%; overflow:hidden;
background:linear-gradient(135deg, var(--ia-1), var(--ia-2));
}
.ia-venda__marca img { width:100%; height:100%; object-fit:cover; display:block; }
.ia-venda__titulo { margin:0 0 var(--s-2); font-size:17px; font-weight:700; }
.ia-venda__texto { margin:0 auto var(--s-4); max-width:460px; font-size:13.5px; line-height:1.6; color:var(--c-texto-medio); }
.ia-venda__lista { list-style:none; margin:0 auto var(--s-5); padding:0; max-width:420px; text-align:left; font-size:13px; }
.ia-venda__lista li { display:flex; gap:8px; align-items:flex-start; margin-bottom:7px; line-height:1.5; color:var(--c-texto-medio); }
.ia-venda__lista .ico { color:var(--ia-1); flex:none; margin-top:2px; }
/* ------------------------------------------------- ciclo de vida das vagas */
/* abas de situação (filtradas no servidor) */
.abas-situacao {
display:flex; gap:2px; overflow-x:auto; padding:0 var(--s-4);
border-bottom:1px solid var(--c-borda); scrollbar-width:none;
}
.abas-situacao::-webkit-scrollbar { display:none; }
.abas-situacao a {
padding:12px var(--s-4); white-space:nowrap; font-size:13.5px; font-weight:500;
color:var(--c-texto-medio); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.abas-situacao a:hover { color:var(--c-texto); text-decoration:none; }
.abas-situacao a[aria-current="page"] { color:var(--c-primaria); border-bottom-color:var(--c-primaria); font-weight:600; }
.estrela { color:#F5A524; display:inline-flex; vertical-align:-2px; }
.estrela .ico { fill:currentColor; }
/* dias em aberto: verde, perto do prazo, em atraso */
.dias { font-weight:600; }
.dias--ok { color:var(--c-texto); }
.dias--perto { color:var(--c-atencao); }
.dias--atraso { color:var(--c-erro); }
/* menu ⋯ (um só, reposicionado a cada clique) */
.menu-vaga {
position:fixed; z-index:80; min-width:230px; padding:6px;
background:var(--c-superficie); border:1px solid var(--c-borda);
border-radius:var(--r-md); box-shadow:var(--sombra-3);
}
.menu-vaga button {
display:flex; align-items:center; gap:10px; width:100%;
padding:8px 10px; border:0; background:none; border-radius:var(--r-sm);
font:inherit; font-size:13.5px; color:var(--c-texto); text-align:left; cursor:pointer;
}
.menu-vaga button:hover, .menu-vaga button:focus-visible { background:var(--c-fundo); outline:none; }
.menu-vaga__ico { width:18px; display:inline-flex; justify-content:center; color:var(--c-texto-medio); }
.menu-vaga__perigo, .menu-vaga__perigo .menu-vaga__ico { color:var(--c-erro); }
.menu-vaga__sep { height:1px; background:var(--c-borda); margin:5px 2px; }
/* histórico da vaga */
.hist__kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); margin-bottom:var(--s-4); }
.hist__kpis > div {
border:1px solid var(--c-borda); border-radius:var(--r-md); padding:10px 12px; text-align:center;
}
.hist__kpis span { display:block; font-size:11.5px; color:var(--c-texto-medio); margin-bottom:3px; }
.hist__kpis strong { font-size:17px; }
.hist__titulo { margin:0 0 var(--s-3); font-size:14px; }
.hist { list-style:none; margin:0; padding:0; position:relative; }
.hist::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--c-borda); }
.hist__item { position:relative; display:flex; gap:var(--s-3); padding:0 0 var(--s-4); font-size:13.5px; }
.hist__ponto {
width:14px; height:14px; flex:none; border-radius:50%; margin-top:3px; position:relative; z-index:1;
background:var(--c-superficie); border:3px solid var(--c-texto-fraco);
}
.hist__item--abertura .hist__ponto, .hist__item--reabertura .hist__ponto, .hist__item--retomada .hist__ponto { border-color:var(--c-sucesso); }
.hist__item--pausa .hist__ponto { border-color:var(--c-atencao); }
.hist__item--fechamento .hist__ponto { border-color:var(--c-info); }
.hist__item--encerramento .hist__ponto { border-color:var(--c-erro); }
.hist__motivo { margin-top:3px; padding:6px 10px; background:var(--c-fundo); border-radius:var(--r-sm); }
@media (max-width:600px) { .hist__kpis { grid-template-columns:1fr; } }
.ciclo-form { margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px dashed var(--c-borda); }
.ciclo-form__situacao { margin:0 0 var(--s-3); font-size:13.5px; }
/* ------------------------------------------------- agenda de pré-entrevistas */
.agenda-barra {
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
gap:var(--s-3); padding:var(--s-3) var(--s-4); margin-bottom:var(--s-3);
}
.agenda-nav { display:flex; align-items:center; gap:var(--s-2); }
.agenda-nav__periodo { min-width:150px; text-align:center; font-size:15px; }
.agenda-filtros { display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
.agenda-resumo { display:flex; flex-wrap:wrap; gap:6px var(--s-2); margin-bottom:var(--s-3); }
.agenda-resumo:empty { display:none; }
.agenda-resumo__item {
font-size:12.5px; color:var(--c-texto-medio); padding:4px 10px;
background:var(--c-superficie); border:1px solid var(--c-borda); border-radius:var(--r-full);
}
.agenda-resumo__item strong { color:var(--c-texto); }
.agenda-resumo__item--sucesso strong { color:var(--c-sucesso); }
.agenda-resumo__item--erro strong { color:var(--c-erro); }
.agenda-resumo__item--atencao strong { color:var(--c-atencao); }
.agenda-resumo__item--info strong { color:var(--c-info); }
/* semana e dia: colunas */
.ag-colunas { display:grid; gap:var(--s-2); }
.ag-colunas--semana { grid-template-columns:repeat(7, minmax(0, 1fr)); }
.ag-colunas--dia { grid-template-columns:minmax(0, 640px); }
.ag-col {
background:var(--c-superficie); border:1px solid var(--c-borda); border-radius:var(--r-lg);
display:flex; flex-direction:column; min-height:220px; min-width:0;
container-type:inline-size;
}
/* coluna estreita (semana no desktop): sem ícone nos botões, senão o texto
de "Realizada" e "Não real." se atropelava */
@container (max-width: 175px) {
.ag-card__acoes .ico { display:none; }
.ag-card__acoes button { padding:4px 2px; letter-spacing:-.01em; }
}
.ag-col--hoje { border-color:var(--c-primaria); box-shadow:0 0 0 1px var(--c-primaria); }
.ag-col__cab {
display:flex; align-items:baseline; gap:6px; padding:10px 10px 8px;
border-bottom:1px solid var(--c-borda); font-size:12px; color:var(--c-texto-medio);
}
.ag-col__cab strong { color:var(--c-texto); font-size:13.5px; }
.ag-col--hoje .ag-col__cab strong { color:var(--c-primaria); }
.ag-col__novo {
margin-left:auto; width:24px; height:24px; border-radius:50%; border:1px solid var(--c-borda);
background:var(--c-superficie); color:var(--c-texto-medio); font-size:16px; line-height:1; cursor:pointer;
}
.ag-col__novo:hover { background:var(--c-primaria-fraca); color:var(--c-primaria); border-color:var(--c-primaria); }
.ag-col__itens { padding:8px; display:flex; flex-direction:column; gap:8px; }
.ag-col__vazio { margin:6px 0; text-align:center; color:var(--c-texto-fraco); }
/* cartão */
.ag-card {
border:1px solid color-mix(in srgb, var(--cor, #64748B) 40%, #fff);
border-radius:var(--r-md); background:color-mix(in srgb, var(--cor, #64748B) 6%, #fff); overflow:hidden;
}
.ag-card--realizada { background:#F0FAF4; }
.ag-card--nao_realizada { background:#FFF7ED; }
.ag-card--remarcada { background:#F6F7F9; opacity:.75; }
.ag-card__abrir {
display:flex; flex-direction:column; gap:3px; width:100%; padding:8px 9px 6px;
border:0; background:none; text-align:left; font:inherit; cursor:pointer; color:inherit;
}
.ag-card__abrir:hover { background:rgba(0,0,0,.025); }
.ag-card__topo { font-size:12.5px; line-height:1.35; }
.ag-card__linha {
display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--c-texto-medio);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ag-card__linha .ico { width:12px; height:12px; flex:none; }
.ag-card__ponto { width:8px; height:8px; border-radius:50%; background:var(--cor, #64748B); flex:none; display:inline-block; }
.ag-card__tipo { color:var(--c-primaria); }
.ag-card__selos { display:flex; gap:4px; flex-wrap:wrap; margin-top:3px; }
.ag-card__selos .badge { font-size:10.5px; padding:1px 7px; }
.ag-card__selos .badge .ico { width:11px; height:11px; }
.ag-card__motivo { font-size:11px; color:var(--c-texto-medio); font-style:italic; }
.ag-card__nc { font-size:10px; color:var(--c-atencao); font-weight:600; }
.ag-card__acoes { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:0 8px 8px; }
.ag-card__acoes button {
display:inline-flex; align-items:center; justify-content:center; gap:3px; padding:4px 5px; font:inherit; font-size:11px; white-space:nowrap; min-width:0;
border:1px solid var(--c-borda); border-radius:var(--r-full); background:var(--c-superficie);
color:var(--c-texto); cursor:pointer;
}
.ag-card__acoes button .ico { width:11px; height:11px; }
.ag-card__acoes button:hover:not(:disabled) { border-color:var(--c-primaria); color:var(--c-primaria); }
.ag-card__acoes button:disabled { opacity:.45; cursor:not-allowed; }
.ag-card__acoes .ag-card__largo { grid-column:1 / -1; }
.ag-card__acoes button[data-acao="reprovado"]:hover:not(:disabled) { border-color:var(--c-erro); color:var(--c-erro); }
/* mês */
.ag-mes__cab { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; font-size:11.5px; color:var(--c-texto-medio); text-align:center; }
.ag-mes { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.ag-mes__dia {
min-height:104px; padding:4px; background:var(--c-superficie);
border:1px solid var(--c-borda); border-radius:var(--r-md); display:flex; flex-direction:column; gap:3px; min-width:0;
}
.ag-mes__dia--fora { background:#FAFBFC; opacity:.55; }
.ag-mes__dia--hoje { border-color:var(--c-primaria); }
.ag-mes__num { align-self:flex-start; border:0; background:none; font:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:1px 4px; border-radius:4px; color:var(--c-texto); }
.ag-mes__dia--hoje .ag-mes__num { background:var(--c-primaria); color:#fff; }
.ag-mini {
display:block; width:100%; text-align:left; font:inherit; font-size:11px; padding:2px 5px;
border:0; border-radius:4px; background:color-mix(in srgb, var(--cor,#64748B) 14%, #fff);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; color:var(--c-texto);
}
.ag-mini--realizada { background:#F0FAF4; }
.ag-mini--nao_realizada { background:#FFF7ED; }
.ag-mini--remarcada { opacity:.55; text-decoration:line-through; }
.ag-mini__hora { font-weight:600; }
.ag-mes__mais { border:0; background:none; font:inherit; font-size:11px; color:var(--c-primaria); cursor:pointer; text-align:left; padding:0 4px; }
/* detalhe */
.ag-det { display:grid; grid-template-columns:110px 1fr; gap:8px var(--s-3); margin:0; font-size:13.5px; }
.ag-det dt { color:var(--c-texto-medio); }
.ag-det dd { margin:0; }
/* escolha do candidato */
.ag-cand { position:relative; }
.ag-cand__lista {
margin-top:4px; border:1px solid var(--c-borda); border-radius:var(--r-md);
max-height:220px; overflow-y:auto; background:var(--c-superficie);
}
.ag-cand__lista button {
display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%;
padding:8px 12px; border:0; border-bottom:1px solid #F2F4F7; background:none; font:inherit; font-size:13px; text-align:left; cursor:pointer;
}
.ag-cand__lista button:hover { background:var(--c-primaria-fraca); }
.ag-cand__escolhido {
padding:9px 12px; border:1px solid var(--c-primaria); border-radius:var(--r-md);
background:var(--c-primaria-fraca); font-size:13.5px;
}
/* recrutadoras */
.ag-rec { display:flex; align-items:center; gap:var(--s-3); padding:10px 0; border-bottom:1px solid var(--c-borda); flex-wrap:wrap; }
.ag-rec:last-child { border-bottom:0; }
.ag-rec__nome { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-rec__cores { display:flex; gap:4px; }
.ag-rec__cor {
width:20px; height:20px; border-radius:50%; border:2px solid transparent; background:var(--cor);
cursor:pointer; box-shadow:inset 0 0 0 2px #fff;
}
.ag-rec__cor[aria-pressed="true"] { border-color:var(--c-texto); }
.ag-rec__meta { display:flex; align-items:center; gap:4px; }
.ag-rec__meta .entrada { width:64px; min-height:30px; padding:4px 8px; }
/* celular: a semana rola de lado, um dia por vez */
@media (max-width:900px) {
.ag-colunas--semana {
grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%;
overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
}
.ag-colunas--semana .ag-col { scroll-snap-align:start; }
.ag-colunas--dia { grid-template-columns:minmax(0,1fr); }
.ag-mes__dia { min-height:64px; }
.ag-mini__hora { display:none; }
.agenda-barra { flex-direction:column; align-items:stretch; }
.agenda-nav { justify-content:space-between; }
}
.pre-ent { border-color:color-mix(in srgb, var(--cor) 45%, var(--c-borda)); margin-bottom:var(--s-3); }
.pre-ent__notas {
margin-top:var(--s-3); padding:10px 12px; background:var(--c-fundo); border-radius:var(--r-md);
font-size:13.5px; line-height:1.6; white-space:normal;
}
/* ------------------------------------------------- módulos contratáveis */
.mods { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); }
.mod {
background:var(--c-superficie); border:1px solid var(--c-borda);
border-radius:var(--r-lg); box-shadow:var(--sombra-1);
display:flex; flex-direction:column;
}
.mod--ativo { border-color:var(--c-primaria); box-shadow:0 0 0 1px var(--c-primaria), var(--sombra-1); }
.mod__topo { display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-5); flex:1; }
.mod__icone {
width:40px; height:40px; flex:none; display:grid; place-items:center;
border-radius:var(--r-md); background:var(--c-primaria-fraca); color:var(--c-primaria);
}
.mod--ativo .mod__icone { background:linear-gradient(135deg, var(--c-primaria), #7C5CE0); color:#fff; }
.mod__nome { margin:0 0 3px; font-size:15px; font-weight:700; }
.mod__resumo { margin:0; font-size:13px; color:var(--c-texto-medio); line-height:1.5; }
.mod__rodape {
display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
padding:var(--s-3) var(--s-5); border-top:1px solid var(--c-borda); background:#FAFBFC;
border-radius:0 0 var(--r-lg) var(--r-lg); flex-wrap:wrap;
}
.mod__estado { display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
/* interruptor */
.chave { flex:none; cursor:pointer; display:inline-flex; }
.chave__campo { position:absolute; opacity:0; width:0; height:0; }
.chave__trilho {
width:42px; height:24px; border-radius:var(--r-full); background:#CBD2DC;
display:block; padding:3px; transition:background .16s ease;
}
.chave__bola {
width:18px; height:18px; border-radius:50%; background:#fff; display:block;
box-shadow:var(--sombra-1); transition:transform .16s ease;
}
.chave__campo:checked + .chave__trilho { background:var(--c-primaria); }
.chave__campo:checked + .chave__trilho .chave__bola { transform:translateX(18px); }
.chave__campo:focus-visible + .chave__trilho { outline:2px solid var(--c-primaria); outline-offset:2px; }
.chave__campo:disabled + .chave__trilho { opacity:.6; }
.prov { border:0; padding:0; margin:var(--s-4) 0 0; }
/* ------------------------------------------------- select com busca */
.selb { position:relative; display:inline-block; width:100%; }
/* o select original fica no DOM (e no formulário), só sai da vista */
.selb__nativo {
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.selb__botao {
display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
width:100%; text-align:left; cursor:pointer; background:var(--c-superficie);
}
.selb__rotulo { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selb__rotulo--vazio { color:var(--c-texto-fraco); }
.selb__seta {
flex:none; width:0; height:0; border-left:4px solid transparent;
border-right:4px solid transparent; border-top:5px solid var(--c-texto-medio);
}
.selb__painel {
position:absolute; z-index:60; left:0; right:0; top:calc(100% + 4px);
min-width:220px; max-width:min(420px, 90vw);
background:var(--c-superficie); border:1px solid var(--c-borda);
border-radius:var(--r-md); box-shadow:var(--sombra-3); overflow:hidden;
}
.selb__painel--acima { top:auto; bottom:calc(100% + 4px); }
.selb__buscaCaixa { padding:var(--s-2); border-bottom:1px solid var(--c-borda); background:#FAFBFC; }
.selb__busca { min-height:34px; padding:6px 10px; font-size:13px; }
.selb__lista { max-height:240px; overflow-y:auto; }
.selb__opcao {
padding:8px var(--s-4); font-size:13.5px; cursor:pointer;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.selb__opcao:hover, .selb__opcao[data-ativo] { background:var(--c-primaria-fraca); }
.selb__opcao[aria-selected="true"] { font-weight:600; background:var(--c-primaria-fraca); color:var(--c-primaria-escura, var(--c-primaria)); }
.selb__opcao[data-off] { opacity:.5; cursor:not-allowed; }
.selb__vazio { margin:0; padding:var(--s-5); text-align:center; font-size:13px; color:var(--c-texto-medio); }
.selb__painel { z-index:9500; } /* acima das janelas (modais, inclusive a da Ouvidoria) */
.selb__botao--erro { border-color:var(--c-erro) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c-erro) 20%, transparent); }
/* Em telas estreitas o painel vira uma folha ancorada, para não sair da tela. */
@media (max-width:600px) {
.selb__painel { position:fixed; left:var(--s-3); right:var(--s-3); max-width:none; }
.selb__lista { max-height:45vh; }
}
/* ------------------------------------------------- identidade da IA
Roxo/lilás em tudo que envolve IA, para a funcionalidade ser reconhecível
à primeira vista, esteja ela contratada ou não. */
:root {
--ia-1:#7C3AED; /* roxo */
--ia-2:#A78BFA; /* lilás */
--ia-bg:#F5F1FE;
--ia-borda:#DDD2FB;
}
.selo-ia {
display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
padding:4px 12px; border-radius:var(--r-full);
font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
line-height:1.4; white-space:nowrap;
color:var(--ia-1); background:var(--ia-bg); border:1px solid var(--ia-borda);
}
.selo-ia--sm { padding:2px 8px; font-size:10px; gap:4px; }
.selo-ia--lg { padding:7px 16px; font-size:12.5px; gap:8px; }
/* versão sólida, para cabeçalho colorido */
.selo-ia--solido {
color:#fff; border-color:transparent;
background:linear-gradient(135deg, var(--ia-1), var(--ia-2));
}
/* O GIF anima e pesa ~140KB: vale nos blocos grandes, não num selo de 16px
nem repetido em 500 linhas de tabela. Nesses casos usamos o ícone estático,
que tem o mesmo desenho e custo zero. */
.ico-ia { color:var(--ia-1); }
/* o GIF entra recortado num círculo */
.ia-gif {
display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
width:20px; height:20px; border-radius:50%; overflow:hidden;
background:var(--ia-bg);
}
.ia-gif img { width:100%; height:100%; object-fit:cover; display:block; }
.ia-gif--sm { width:16px; height:16px; }
.ia-gif--lg { width:30px; height:30px; }
.ia-gif--xl { width:44px; height:44px; }
/* botão de ação com IA */
.btn--ia {
color:var(--ia-1); background:var(--ia-bg); border:1px solid var(--ia-borda);
}
.btn--ia:hover { background:#EDE6FD; border-color:var(--ia-2); }
.btn--ia .ico { color:currentColor; }
.btn--ia-solido {
color:#fff; border:0;
background:linear-gradient(135deg, var(--ia-1), var(--ia-2));
}
.btn--ia-solido:hover { filter:brightness(1.07); }
/* ------------------------------------------------- bloco de análise por IA */
.analise {
background:var(--c-superficie); border:1px solid var(--c-borda);
border-radius:var(--r-lg); box-shadow:var(--sombra-1); overflow:hidden;
margin-bottom:var(--s-5);
}
.analise__topo {
display:flex; align-items:center; gap:var(--s-3);
padding:var(--s-4) var(--s-5);
border-bottom:1px solid var(--c-borda);
background:linear-gradient(90deg, var(--ia-bg), transparent 70%);
}
.analise__marca {
width:38px; height:38px; flex:none; display:grid; place-items:center;
border-radius:50%; overflow:hidden;
background:linear-gradient(135deg, var(--ia-1), var(--ia-2));
}
.analise__marca img { width:100%; height:100%; object-fit:cover; display:block; }
.analise__titulo { margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em; }
.analise__sub { margin:2px 0 0; font-size:12.5px; color:var(--c-texto-medio); }
.analise__lista { list-style:none; margin:0; padding:0; }
.analise__item {
display:flex; gap:var(--s-3); align-items:flex-start;
padding:var(--s-4) var(--s-5); border-bottom:1px solid #F2F4F7;
}
.analise__item:last-child { border-bottom:0; }
.analise__ico {
width:26px; height:26px; flex:none; display:grid; place-items:center;
border-radius:var(--r-sm); background:var(--c-neutro-bg); color:var(--c-texto-medio);
}
.analise__item--sucesso .analise__ico { background:var(--c-sucesso-bg); color:var(--c-sucesso); }
.analise__item--atencao .analise__ico { background:var(--c-atencao-bg); color:var(--c-atencao); }
.analise__item--info .analise__ico { background:var(--c-info-bg); color:var(--c-info); }
.analise__item-titulo { display:block; font-size:13.5px; margin-bottom:2px; }
.analise__texto { margin:0; font-size:13px; color:var(--c-texto-medio); line-height:1.55; }
.analise__texto code {
font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px;
background:var(--c-neutro-bg); padding:1px 5px; border-radius:4px; color:var(--c-texto);
}
@media (max-width:600px) {
.analise__topo, .analise__item { padding:var(--s-3) var(--s-4); }
}
/* Barra de ações em lote — aparece ao selecionar linhas de uma tabela. */
.lote {
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
gap:var(--s-3); padding:var(--s-3) var(--s-5);
background:var(--c-primaria-fraca); border-bottom:1px solid var(--c-borda);
}
.lote__contagem { font-size:13.5px; font-weight:600; color:var(--c-primaria); }
@media (max-width:600px) { .lote { align-items:stretch; flex-direction:column; } }
/* ---------------------------------------------------------- badges e chips */
.badge {
display:inline-flex; align-items:center; gap:5px;
padding:3px 10px; border-radius:var(--r-full);
font-size:12px; font-weight:600; line-height:1.5;
background:var(--c-neutro-bg); color:var(--c-neutro);
}
.badge--sucesso { background:var(--c-sucesso-bg); color:var(--c-sucesso); }
.badge--atencao { background:var(--c-atencao-bg); color:var(--c-atencao); }
.badge--erro { background:var(--c-erro-bg); color:var(--c-erro); }
.badge--info { background:var(--c-info-bg); color:var(--c-info); }
.badge--contorno{ background:transparent; border:1px solid currentColor; }
.chip {
display:inline-flex; align-items:center; gap:6px;
padding:4px 6px 4px 12px; border-radius:var(--r-full);
border:1px solid var(--c-primaria); color:var(--c-primaria);
background:var(--c-superficie); font-size:12.5px; font-weight:500;
}
.chip button { border:0; background:none; padding:2px; cursor:pointer; color:inherit; display:grid; place-items:center; border-radius:var(--r-full); }
.chip button:hover { background:var(--c-primaria-clara); }
.chips { display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; }
/* ---------------------------------------------------------- formulário */
.campo { display:block; margin-bottom:var(--s-4); }
.campo__rotulo { display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--c-texto-medio); }
.entrada, select.entrada, textarea.entrada {
width:100%; min-height:38px; padding:8px 12px;
border:1px solid var(--c-borda-forte); border-radius:var(--r-md);
background:var(--c-superficie); color:var(--c-texto);
font:inherit; font-size:14px;
}
.entrada:focus { outline:none; border-color:var(--c-primaria); box-shadow:0 0 0 3px var(--c-primaria-fraca); }
.entrada::placeholder { color:var(--c-texto-fraco); }
.busca { position:relative; flex:1; min-width:200px; }
.busca .ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--c-texto-fraco); }
.busca .entrada { padding-left:38px; }
/* segmented control */
.segmentado { display:inline-flex; padding:3px; gap:2px; background:var(--c-neutro-bg); border-radius:var(--r-full); }
.segmentado button {
border:0; background:none; padding:6px 14px; border-radius:var(--r-full);
font:inherit; font-size:12.5px; font-weight:600; color:var(--c-texto-medio); cursor:pointer;
}
.segmentado button[aria-pressed=true] { background:var(--c-superficie); color:var(--c-texto); box-shadow:var(--sombra-1); }
/* ---------------------------------------------------------- abas */
.abas { display:flex; gap:var(--s-5); border-bottom:1px solid var(--c-borda); overflow-x:auto; scrollbar-width:none; }
.abas::-webkit-scrollbar { display:none; }
/* abas encostadas na borda do cartão: mesmo respiro lateral do conteúdo do cartão (24px; 16px no celular) */
.card > .abas, .card > .abas-etapa, .card > .abas-situacao { padding-left:var(--s-5); padding-right:var(--s-5); }
@media (max-width:640px) { .card > .abas, .card > .abas-etapa, .card > .abas-situacao { padding-left:var(--s-4); padding-right:var(--s-4); } }
.abas a, .abas button {
display:inline-flex; align-items:center; gap:7px;
padding:12px 2px; border:0; background:none; cursor:pointer;
font:inherit; font-size:14px; font-weight:500; color:var(--c-texto-medio);
border-bottom:2px solid transparent; white-space:nowrap;
}
.abas a:hover, .abas button:hover { color:var(--c-texto); text-decoration:none; }
.abas [aria-current], .abas [aria-selected=true] { color:var(--c-primaria); border-bottom-color:var(--c-primaria); font-weight:600; }
.abas .conta { color:var(--c-texto-fraco); font-weight:400; }
/* ------------------------------------------------- abas de etapa (funil) */
.abas-etapa { display:flex; align-items:stretch; gap:var(--s-1); border-bottom:1px solid var(--c-borda); }
.abas-etapa__trilho {
display:flex; gap:var(--s-5); overflow-x:auto; scroll-behavior:smooth;
scrollbar-width:none; flex:1; padding:0 var(--s-1);
}
.abas-etapa__trilho::-webkit-scrollbar { display:none; }
.abas-etapa__trilho button {
display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
padding:13px 2px; border:0; background:none; cursor:pointer;
font:inherit; font-size:13.5px; font-weight:500; color:var(--c-texto-medio);
border-bottom:2px solid transparent;
}
.abas-etapa__trilho button:hover { color:var(--c-texto); }
.abas-etapa__trilho button[aria-selected="true"] {
color:var(--cor-etapa, var(--c-primaria));
border-bottom-color:var(--cor-etapa, var(--c-primaria));
font-weight:700;
}
.abas-etapa__trilho .conta {
font-size:12px; font-weight:600; color:var(--c-texto-fraco);
background:var(--c-neutro-bg); padding:1px 7px; border-radius:var(--r-full);
}
.abas-etapa__trilho button[aria-selected="true"] .conta {
color:#fff; background:var(--cor-etapa, var(--c-primaria));
}
.abas-etapa__seta {
border:0; background:none; cursor:pointer; color:var(--c-texto-medio);
padding:0 var(--s-2); display:grid; place-items:center; flex:none;
}
.abas-etapa__seta:hover { color:var(--c-texto); background:var(--c-fundo); }
/* cartão de destaque (top vagas) */
.destaques { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s-4); }
.destaque {
display:flex; align-items:center; gap:var(--s-3);
background:var(--c-superficie); border:1px solid var(--c-borda);
border-radius:var(--r-lg); padding:var(--s-3) var(--s-4); box-shadow:var(--sombra-1);
}
.destaque:hover { border-color:var(--c-primaria); text-decoration:none; }
.destaque__icone {
width:38px; height:38px; border-radius:var(--r-md); flex:none;
display:grid; place-items:center;
background:var(--c-primaria-clara); color:var(--c-primaria-escura);
}
.destaque > span:not([class]) { flex:1; min-width:0; }
.destaque__titulo { display:block; font-weight:600; font-size:13.5px; color:var(--c-texto);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.destaque__sub { display:block; font-size:12px; color:var(--c-texto-fraco);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.destaque__valor { margin-left:auto; font-size:18px; font-weight:700; flex:none; }
/* ---------------------------------------------------------- tabela */
.tabela-rolagem { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabela { width:100%; border-collapse:collapse; font-size:13.5px; }
.tabela th {
padding:11px var(--s-4); text-align:left; white-space:nowrap;
font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
color:var(--c-texto-medio); background:#FAFBFC; border-bottom:1px solid var(--c-borda);
}
.tabela td { padding:13px var(--s-4); border-bottom:1px solid #EFF1F4; vertical-align:middle; }
.tabela tbody tr:hover { background:var(--c-primaria-fraca); }
.tabela .num { text-align:right; font-variant-numeric:tabular-nums; }
.tabela .centro { text-align:center; }
.avatar {
width:34px; height:34px; border-radius:var(--r-full); flex:none;
display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700;
background:var(--c-primaria); object-fit:cover;
}
.pessoa { display:flex; align-items:center; gap:var(--s-3); min-width:0; }
.pessoa > span:last-child { min-width:0; }
/* nome e subtítulo empilhados, como nos prints de referência */
.pessoa__nome { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.pessoa__sub { display:block; font-size:12px; color:var(--c-texto-fraco); margin-top:1px;
overflow:hidden; text-overflow:ellipsis; }
/* barra de progresso / aderência */
.barra { height:6px; border-radius:var(--r-full); background:#EAEDF1; overflow:hidden; }
.barra > i { display:block; height:100%; border-radius:var(--r-full); background:var(--c-primaria); }
.barra--sucesso > i { background:var(--c-sucesso); }
.barra--atencao > i { background:var(--c-atencao); }
.barra--erro > i { background:var(--c-erro); }
/* ---------------------------------------------------------- modal */
.modal { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:var(--s-4); }
.modal[hidden] { display:none; }
.modal__fundo { position:absolute; inset:0; background:rgba(16,24,40,.55); animation:modalFundo .15s ease; }
.modal__caixa {
position:relative; width:100%; max-width:560px; max-height:calc(100vh - 2*var(--s-4));
display:flex; flex-direction:column;
background:var(--c-superficie); border-radius:var(--r-lg); box-shadow:var(--sombra-3);
animation:modalCaixa .18s ease;
}
@keyframes modalFundo { from { opacity:0 } }
@keyframes modalCaixa { from { opacity:0; transform:translateY(12px) } }
.modal__cabecalho {
flex:none;
display:flex; align-items:center; gap:var(--s-3);
padding:var(--s-4) var(--s-5); background:var(--c-topo); color:#fff; /* mesma cor da barra do topo (segue a paleta da instituição) */
border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.modal__titulo { margin:0; font-size:16px; font-weight:600; flex:1; }
.modal__fechar {
border:0; background:none; color:#fff; cursor:pointer; padding:6px;
border-radius:var(--r-sm); display:grid; place-items:center;
}
.modal__fechar:hover { background:rgba(255,255,255,.14); }
/* min-height:0 é o que permite encolher dentro da coluna flex; sem isso o
corpo cresce até o tamanho do conteúdo, o overflow nunca entra em ação e o
conteúdo passa por cima do cabeçalho e do rodapé. */
.modal__corpo { padding:var(--s-5); overflow-y:auto; min-height:0; flex:1 1 auto; }
.modal__rodape {
flex:none;
display:flex; align-items:center; justify-content:flex-end; gap:var(--s-3);
padding:var(--s-4) var(--s-5); border-top:1px solid var(--c-borda);
}
.modal__rodape .esquerda { margin-right:auto; }
/* lista com rolagem dentro do modal (ex.: escolher vagas) */
.lista-caixa {
border:1px solid var(--c-borda); border-radius:var(--r-md);
max-height:300px; overflow-y:auto; background:#FAFBFC;
}
.lista-caixa label {
display:flex; align-items:center; gap:var(--s-3);
padding:9px var(--s-4); cursor:pointer; border-bottom:1px solid #EFF1F4;
}
.lista-caixa label:last-child { border-bottom:0; }
.lista-caixa label:hover { background:var(--c-primaria-fraca); }
/* itens do modal "Inscrever em uma vaga" */
.vg-item { justify-content:space-between; }
.vg-item:last-of-type { border-bottom:0; }
.vg-item__texto { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.vg-item__titulo { font-size:14px; font-weight:600; color:var(--c-texto); }
.vg-item__meta { display:flex; flex-wrap:wrap; gap:4px var(--s-3); font-size:12.5px; color:var(--c-texto-medio); }
.vg-item__local { display:inline-flex; align-items:center; gap:4px; }
.vg-item__local .ico { color:var(--c-texto-fraco); }
.vg-item__local--sem { color:var(--c-texto-fraco); font-style:italic; }
.vg-item .btn { flex:none; }
.vg-vazio { margin:0; padding:var(--s-6) var(--s-4); text-align:center; font-size:13px; color:var(--c-texto-medio); }
.lista-caixa input[type=checkbox] { width:16px; height:16px; accent-color:var(--c-primaria); flex:none; }
@media (max-width:640px) {
.modal { padding:0; align-items:flex-end; }
.modal__caixa { max-width:none; max-height:92vh; border-radius:var(--r-lg) var(--r-lg) 0 0; }
.modal__rodape { flex-wrap:wrap; }
.modal__rodape .btn { flex:1; }
}
/* -------------------------------------------------- lista de dados (dl) */
.dados { margin:0; display:grid; grid-template-columns:auto 1fr; gap:var(--s-2) var(--s-4); font-size:13.5px; }
.dados dt { color:var(--c-texto-medio); font-weight:600; white-space:nowrap; }
.dados dd { margin:0; word-break:break-word; }
/* texto vindo do banco (descrição de vaga etc.) */
.texto-rico { font-size:14px; line-height:1.65; }
.texto-rico :first-child { margin-top:0; }
.texto-rico :last-child { margin-bottom:0; }
/* autocomplete */
.sugestoes {
position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
max-height:260px; overflow-y:auto;
background:var(--c-superficie); border:1px solid var(--c-borda);
border-radius:var(--r-md); box-shadow:var(--sombra-2);
}
.sugestoes button {
display:flex; width:100%; align-items:center; gap:var(--s-2);
padding:8px var(--s-3); border:0; background:none; cursor:pointer;
font:inherit; font-size:13.5px; text-align:left;
}
.sugestoes button:hover, .sugestoes button:focus { background:var(--c-primaria-fraca); }
/* chip colorido (tag) */
.chip--cor { border-color:transparent; color:#fff; }
.chip--cor button:hover { background:rgba(255,255,255,.22); }
/* ------------------------------------------------- ficha do candidato */
/* Coluna esquerda fixa + conteúdo à direita, como no print 057. */
.ficha { display:grid; grid-template-columns:340px 1fr; gap:var(--s-4); align-items:start; }
.ficha__lado { position:sticky; top:calc(var(--topbar) + var(--s-4)); }
.ficha__principal { min-width:0; }
.ficha__foto {
width:120px; height:120px; border-radius:var(--r-full);
object-fit:cover; object-position:center; display:block; margin:0 auto;
border:3px solid var(--c-superficie); box-shadow:var(--sombra-2);
}
.ficha__foto--ini {
display:grid; place-items:center;
background:var(--c-primaria); color:#fff; font-size:34px; font-weight:700;
}
.obs-recrutador {
display:flex; gap:var(--s-2); align-items:flex-start;
margin-top:var(--s-3); padding:var(--s-2) var(--s-3);
background:var(--c-fundo); border:1px solid var(--c-borda);
border-radius:var(--r-md);
font-size:12.5px; color:var(--c-texto-medio);
}
/* DISC */
/* 4 em linha só com espaço de verdade (≥1800px); abaixo disso 2×2 — com
auto-fit, a 1600px com o menu aberto saíam 3 + 1, ou 4 espremidos. */
.disc { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); }
@media (min-width:1800px) { .disc { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:560px) { .disc { grid-template-columns:1fr; } }
.disc__item {
display:flex; gap:var(--s-3); align-items:center;
padding:var(--s-3); border:1px solid var(--c-borda); border-radius:var(--r-md);
}
.disc__item--forte { border-color:var(--c-primaria); background:var(--c-primaria-fraca); }
.disc__img { width:42px; height:42px; object-fit:contain; flex:none; }
.disc__resumo {
margin-top:var(--s-5); padding:0;
background:var(--c-fundo); border-radius:var(--r-md); font-size:13.5px;
}
/* começa fechado: só o nome do perfil; a descrição abre no clique */
.disc__resumo-topo { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:12px var(--s-4); cursor:pointer; border-radius:var(--r-md); }
.disc__resumo-topo::-webkit-details-marker { display:none; }
.disc__resumo-topo:hover { background:color-mix(in srgb, var(--c-fundo) 70%, var(--c-borda)); }
.disc__resumo-topo:focus-visible { outline:3px solid var(--c-primaria); outline-offset:2px; }
.disc__resumo-acao { flex:none; display:inline-flex; align-items:center; gap:4px; font-weight:600; color:var(--c-primaria); font-size:13px; }
.disc__resumo-acao .ico { transition:transform .2s; }
.disc__fechar { display:none; }
.disc__resumo[open] .disc__ver { display:none; }
.disc__resumo[open] .disc__fechar { display:inline; }
.disc__resumo[open] .disc__resumo-acao .ico { transform:rotate(180deg); }
.disc__resumo > :not(summary) { margin-left:var(--s-4); margin-right:var(--s-4); }
.disc__resumo > :last-child { margin-bottom:var(--s-4); }
@media (max-width:1024px) {
.ficha { grid-template-columns:1fr; }
.ficha__lado { position:static; }
}
/* ------------------------------------------------------------- funil */
.funil { display:flex; align-items:center; gap:var(--s-3); color:inherit; }
.funil:hover { text-decoration:none; }
.funil:hover .funil__rotulo { color:var(--c-primaria); }
.funil__rotulo { width:140px; flex:none; font-size:13px; color:var(--c-texto-medio); }
.funil__valor { width:64px; flex:none; text-align:right; font-weight:700; font-size:13.5px; }
@media (max-width:560px) {
.funil__rotulo { width:100px; font-size:12px; }
.funil__valor { width:52px; font-size:12.5px; }
}
/* ------------------------------------------------------------ wizard */
/* Print 016: navegação por seções à esquerda, formulário à direita. */
.wizard { display:grid; grid-template-columns:260px 1fr; gap:var(--s-4); align-items:start; }
.wizard__nav {
position:sticky; top:calc(var(--topbar) + var(--s-4));
display:flex; flex-direction:column; gap:2px;
background:var(--c-superficie); border:1px solid var(--c-borda);
border-radius:var(--r-lg); padding:var(--s-3); box-shadow:var(--sombra-1);
}
.wizard__grupo {
padding:var(--s-3) var(--s-3) var(--s-1);
font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--c-texto-fraco);
}
.wizard__grupo:first-child { padding-top:var(--s-1); }
.wizard__nav button[data-secao] {
text-align:left; border:0; background:none; cursor:pointer; font:inherit;
padding:9px var(--s-3); border-radius:var(--r-md);
font-size:13.5px; color:var(--c-texto-medio);
}
.wizard__nav button[data-secao]:hover { background:var(--c-fundo); color:var(--c-texto); }
.wizard__nav button[aria-current="true"] {
background:var(--c-primaria-clara); color:var(--c-primaria-escura); font-weight:600;
}
.wizard__rodape { margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--c-borda); }
.wizard__corpo { min-width:0; }
/* grade de checkboxes de exibição */
.exibicao { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-2); }
.exibicao__item {
display:flex; align-items:center; gap:var(--s-3);
padding:10px var(--s-3); border:1px solid var(--c-borda); border-radius:var(--r-md);
cursor:pointer; font-size:13.5px;
}
.exibicao__item:hover { background:var(--c-primaria-fraca); border-color:var(--c-borda-forte); }
.exibicao__item input { width:16px; height:16px; accent-color:var(--c-primaria); flex:none; }
@media (max-width:900px) {
.wizard { grid-template-columns:1fr; }
.wizard__nav { position:static; flex-direction:row; flex-wrap:wrap; }
.wizard__grupo { display:none; }
.wizard__nav button[data-secao] { flex:1 1 auto; text-align:center; }
.wizard__rodape { width:100%; margin-top:var(--s-2); }
}
/* -------------------------------------------------------- comparador */
.comp__topo, .comp__linha { display:grid; grid-template-columns:200px 1fr 1fr; gap:var(--s-4); align-items:center; }
.comp__topo { padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--c-borda); background:#FAFBFC; }
.comp__linha { padding:11px var(--s-5); border-bottom:1px solid #EFF1F4; font-size:13.5px; }
.comp__linha:hover { background:var(--c-primaria-fraca); }
.comp__linha--dif { background:#FFFDF5; }
.comp__linha--dif:hover { background:#FFF8E8; }
.comp__rotulo { font-size:12px; font-weight:600; color:var(--c-texto-medio); }
.comp__valor { min-width:0; }
.comp__pessoa { display:flex; align-items:center; gap:var(--s-3); min-width:0; }
.comp__secao {
padding:var(--s-3) var(--s-5); background:var(--c-fundo);
font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
color:var(--c-texto-medio); border-bottom:1px solid var(--c-borda);
}
@media (max-width:820px) {
.comp__topo, .comp__linha { grid-template-columns:1fr 1fr; gap:var(--s-3); padding:var(--s-3) var(--s-4); }
.comp__rotulo { grid-column:1 / -1; padding-top:var(--s-2); }
.comp__topo .comp__rotulo { display:none; }
}
/* ---------------------------------------------- construtor de questões */
.questao { margin-bottom:var(--s-3); }
.questao__num { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--c-texto-medio); }
.alts { display:flex; flex-direction:column; gap:var(--s-2); }
.alt { display:flex; align-items:center; gap:var(--s-3); }
.alt__ok { width:18px; height:18px; accent-color:var(--c-sucesso); flex:none; cursor:pointer; }
.alt__letra {
width:26px; height:26px; flex:none; display:grid; place-items:center;
border-radius:var(--r-sm); background:var(--c-neutro-bg);
font-size:12px; font-weight:700; color:var(--c-texto-medio);
}
.alt:has(.alt__ok:checked) .alt__letra { background:var(--c-sucesso-bg); color:var(--c-sucesso); }
.alt:has(.alt__ok:checked) .entrada { border-color:var(--c-sucesso); }
/* --------------------------------------------------- busca global (topo) */
.busca-global { position:relative; flex:1 1 auto; min-width:0; max-width:560px; }
/* o .busca genérico tem min-width de 200px (pensado para as barras de
filtro); no topo ele transbordava 37px por cima do botão de
configurações no celular */
.busca-global .busca { min-width:0; width:100%; }
.busca-global .entrada { padding-right:70px; background:var(--c-fundo); }
.busca-global .entrada:focus { background:var(--c-superficie); }
.busca__atalho {
position:absolute; right:10px; top:50%; transform:translateY(-50%);
padding:2px 6px; border-radius:var(--r-sm);
border:1px solid var(--c-borda); background:var(--c-superficie);
font:inherit; font-size:10.5px; font-weight:600; color:var(--c-texto-fraco);
pointer-events:none;
}
.busca-global__painel {
position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:80;
max-height:70vh; overflow-y:auto;
background:var(--c-superficie); border:1px solid var(--c-borda);
border-radius:var(--r-lg); box-shadow:var(--sombra-3);
}
.bg__grupo {
padding:9px var(--s-4) 5px;
font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
color:var(--c-texto-fraco); background:#FAFBFC; border-bottom:1px solid var(--c-borda);
}
.bg__item {
display:flex; align-items:center; gap:var(--s-3);
padding:9px var(--s-4); border-bottom:1px solid #F2F4F7;
color:inherit; cursor:pointer;
}
.bg__item:last-child { border-bottom:0; }
.bg__item:hover, .bg__item[data-ativo] { background:var(--c-primaria-fraca); text-decoration:none; }
.bg__item[data-ativo] { background:var(--c-primaria-fraca); }
.bg__icone {
width:30px; height:30px; flex:none; display:grid; place-items:center;
border-radius:var(--r-sm); background:var(--c-neutro-bg); color:var(--c-texto-medio);
}
.bg__texto { min-width:0; flex:1; }
.bg__titulo { display:block; font-size:13.5px; font-weight:600; color:var(--c-texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* o painel fica dentro da barra do topo (texto branco): volta às cores normais */
.busca-global__painel { color:var(--c-texto); }
.bg__sub { display:block; font-size:12px; color:var(--c-texto-fraco); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bg__vazio, .bg__dica { padding:var(--s-5) var(--s-4); text-align:center; color:var(--c-texto-medio); font-size:13px; }
@media (max-width:860px) {
.topbar { gap:var(--s-3); padding:0 var(--s-3); }
.topbar__aba { --aba-extra:10px; --aba-curva:6px; --aba-canto:6px; gap:var(--s-2); margin-left:calc(-1 * var(--s-3)); padding:0 var(--s-3); }
.topbar__marca img { max-height:40px; }
.conteudo { padding-top:calc(var(--topbar) + 4px); }
.busca-global { max-width:none; }
.busca-global .entrada { padding-right:var(--s-3); }
.busca__atalho { display:none; }
.busca-global__painel { position:fixed; left:var(--s-2); right:var(--s-2); top:calc(var(--topbar) + 4px); }
/* a marca cede espaço primeiro: é o único item dispensável aqui */
.topbar__marca { width:auto; flex:0 1 auto; min-width:0; }
[data-rail="aberto"] .topbar__marca { width:auto; }
.topbar__logo { max-width:100px !important; }
.topbar__fim { gap:var(--s-2); }
}
/* Telas estreitas: o logotipo sai e fica só o ícone, senão não sobra
largura para a busca e para os botões da direita ao mesmo tempo. */
@media (max-width:460px) {
.topbar__logo { display:none; }
[data-rail="aberto"] .topbar__logo { display:none; }
.topbar__icone { display:block; }
[data-rail="aberto"] .topbar__icone { display:block; }
}
/* ---------------------------------------------------------- avisos */
.aviso {
display:flex; gap:var(--s-3); align-items:flex-start;
padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
background:var(--c-info-bg); color:#1E3A6E; font-size:13.5px;
border:1px solid #CFE0FB;
}
.aviso--atencao { background:var(--c-atencao-bg); color:#6D5433; border-color:#F3DCBB; }
.aviso--erro { background:var(--c-erro-bg); color:#7A2323; border-color:#F0C4C4; }
.aviso--sucesso { background:var(--c-sucesso-bg); color:#1E5637; border-color:#BFE3CD; }
.aviso .ico { color:currentColor; margin-top:1px; }
/* estado vazio */
.vazio { text-align:center; padding:var(--s-7) var(--s-4); color:var(--c-texto-medio); }
.vazio__titulo { font-size:16px; font-weight:600; color:var(--c-texto); margin-bottom:6px; }
/* ---------------------------------------------------------- utilidades */
.linha { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.linha--fim { justify-content:flex-end; }
.entre { justify-content:space-between; }
.cresce { flex:1; }
.pilha > * + * { margin-top:var(--s-4); }
.mudo { color:var(--c-texto-fraco); }
.pequeno { font-size:12.5px; }
.forte { font-weight:600; }
.nowrap { white-space:nowrap; }
.so-leitor { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
/* ============================================================ RESPONSIVO */
@media (max-width:1100px) {
.topbar__nav { display:none; }
}
@media (max-width:860px) {
:root { --topbar:56px; }
.container { padding:var(--s-4) var(--s-3); }
.pagina__titulo { font-size:21px; }
.pagina__acoes { margin-left:0; width:100%; }
.kpi__valor { font-size:25px; }
/* rail vira barra inferior */
.conteudo { padding-left:0; padding-bottom:64px; }
.rail {
top:auto; bottom:0; left:0; right:0; width:auto; height:60px;
flex-direction:row; justify-content:space-around; align-items:center;
padding:0 var(--s-2); gap:0;
border-right:0; border-top:1px solid var(--c-borda);
box-shadow:0 -2px 10px rgba(16,24,40,.06);
}
.rail__sep, .rail__grupo, #alternarMenuRodape, .rail__alternar--topo { display:none !important; }
.rail__texto { display:none !important; }
[data-rail="aberto"] .rail { width:auto; align-items:center; }
[data-rail="aberto"] .conteudo { padding-left:0; }
[data-rail="aberto"] .rail__item { width:40px; justify-content:center; padding:0; }
.rail__item[aria-current]::before { left:50%; top:-1px; transform:translateX(-50%); width:22px; height:3px; border-radius:0 0 3px 3px; }
.rail__item::after { display:none; }
/* no celular só os 5 primeiros; o resto vai para o menu */
.rail__item:nth-child(n+6):not(.rail__item--sempre) { display:none; }
/* tabela vira cartões */
.tabela--cartoes thead { display:none; }
.tabela--cartoes, .tabela--cartoes tbody, .tabela--cartoes tr, .tabela--cartoes td { display:block; width:100%; }
.tabela--cartoes tr {
border:1px solid var(--c-borda); border-radius:var(--r-md);
margin-bottom:var(--s-3); padding:var(--s-3); background:var(--c-superficie);
}
.tabela--cartoes td { border:0; padding:5px 0; display:flex; justify-content:space-between; gap:var(--s-3); text-align:right; }
.tabela--cartoes td::before {
content:attr(data-rotulo); text-align:left; flex:none;
font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--c-texto-medio);
}
.tabela--cartoes td[data-rotulo=""] { display:block; text-align:left; }
/* a 1ª célula vira o cabeçalho do cartão: sem rótulo, alinhada à esquerda */
.tabela--cartoes td:first-child {
display:block; text-align:left;
padding:0 0 var(--s-3); margin-bottom:var(--s-2);
border-bottom:1px solid var(--c-borda);
}
.tabela--cartoes td:first-child::before { display:none; }
}
@media (max-width:480px) {
.kpis { grid-template-columns:1fr 1fr; gap:var(--s-3); }
.kpi { padding:var(--s-3); }
.kpi__valor { font-size:22px; }
.btn { padding:0 13px; }
}
.lgpd-inv { background:var(--c-neutro-bg); border-radius:var(--r-md); padding:var(--s-3) var(--s-4); font-size:13.5px; }
.lgpd-inv p { margin:0 0 6px; }
.lgpd-inv p:last-child { margin-bottom:0; }
/* ---------------------------------------------------------- créditos das empresas */
.selo-credito .ico { width:12px; height:12px; vertical-align:-2px; }
.cred-topo { display:flex; gap:var(--s-4); align-items:center; padding:var(--s-3) var(--s-4);
background:var(--c-atencao-bg); border-radius:var(--r-md); margin-bottom:var(--s-4); }
.cred-topo > div { flex:none; display:flex; flex-direction:column; }
.cred-saldo { font-size:22px; color:var(--c-atencao); white-space:nowrap; }
.cred-ajuste { display:flex; flex-direction:column; gap:6px; }
.cred-ajuste__linha { display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; }
.cred-ajuste__linha .cresce { min-width:180px; }
.cred-extrato { max-height:320px; overflow:auto; border:1px solid var(--c-borda); border-radius:var(--r-md); margin-top:6px; }
.cred-extrato > p { padding:var(--s-4); margin:0; }
.cred-linhas { list-style:none; margin:0; padding:0; }
.cred-linhas li { display:flex; gap:var(--s-3); align-items:flex-start; padding:10px var(--s-4); border-bottom:1px solid #EFF1F4; }
.cred-linhas li:last-child { border-bottom:0; }
.cred-q { flex:none; min-width:34px; text-align:center; font-weight:700; border-radius:var(--r-full); padding:2px 8px; font-size:13px; }
.cred-q--mais { background:var(--c-sucesso-bg); color:var(--c-sucesso); }
.cred-q--menos { background:var(--c-erro-bg); color:var(--c-erro); }
.cred-desc { flex:1; min-width:0; font-size:13.5px; }
.cred-desc .mudo { display:block; font-size:12.5px; }
.cred-quando { flex:none; text-align:right; }
@media (max-width:560px) { .cred-topo { flex-direction:column; align-items:flex-start; } }
.acao-credito { padding:var(--s-3) var(--s-4); border:1px solid var(--c-borda); border-radius:var(--r-md);
background:var(--c-atencao-bg); margin-bottom:var(--s-4); display:flex; flex-direction:column; gap:4px; }
.acao-contratados { margin-bottom:var(--s-4); }
.contratado { display:grid; grid-template-columns:minmax(0,1fr) 150px 32px; gap:var(--s-2); align-items:end; margin-top:6px; }
.contratado [data-c=nome] { grid-column:1; }
.contratado__data { display:flex; flex-direction:column; gap:2px; grid-row:1; grid-column:2; }
.contratado [data-c=cand] { grid-row:1; grid-column:1; }
.contratado [data-c=tirar] { grid-row:1; grid-column:3; font-size:20px; }
@media (max-width:480px) {
.contratado { grid-template-columns:minmax(0,1fr) 32px; }
.contratado__data { grid-row:auto; grid-column:1; }
}
.rel-metas { display:grid; gap:6px; }
.rel-metas__linha { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); font-size:14px; }
.rel-metas__linha .entrada { width:90px; flex:none; }
/* ---------------------------------------------------------- relatório interno de recrutamento (agenda) */
.rr-topo { display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-3); }
.rr-bloco { border:1px solid var(--c-borda); border-radius:var(--r-md); margin-bottom:var(--s-3); }
.rr-tabela th, .rr-tabela td, .rr-det th, .rr-det td { padding:8px 10px; }
.rr-tabela th { text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--c-texto); }
.rr-env { color:var(--c-sucesso) !important; font-weight:700; }
.rr-desc { font-style:italic; font-size:12.5px; color:var(--c-texto-fraco); margin:var(--s-2) 0 6px; }
.rr-titulo { font-size:14px; margin:var(--s-4) 0 2px; }
.rr-det td { vertical-align:top; font-size:13px; }
.rr-det textarea { min-width:180px; font-size:13px; padding:6px 8px; resize:vertical; }
.rr-sit-enviado { color:var(--c-sucesso); }
.rr-sit-reprovado { color:var(--c-erro); }
.rr-obs--salvando { border-color:var(--c-atencao); }
.rr-obs--salvo { border-color:var(--c-sucesso); box-shadow:0 0 0 2px var(--c-sucesso-bg); }
/* ---------------------------------------------------------- kanban de prioridades */
.kb { display:flex; gap:var(--s-4); align-items:flex-start; overflow-x:auto; padding-bottom:var(--s-4);
scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; position:relative; }
.kb__carregando { padding:var(--s-6); }
.kb-dica { position:absolute; left:0; right:0; top:-4px; margin:0; font-size:13px; }
.kb-dica + .kb-coluna { margin-top:26px; }
.kb-dica ~ .kb-coluna { margin-top:26px; }
.kb-coluna { flex:0 0 300px; max-width:86vw; background:var(--c-neutro-bg); border-radius:var(--r-lg);
display:flex; flex-direction:column; max-height:calc(100vh - 220px); scroll-snap-align:start; }
.kb-coluna__topo { display:flex; align-items:center; gap:var(--s-2); padding:12px 12px 8px 14px; }
.kb-coluna__nome { flex:1; margin:0; font-size:14px; font-weight:700; line-height:1.3; }
.kb-conta { display:inline-block; min-width:22px; padding:0 7px; border-radius:var(--r-full); background:var(--c-superficie);
font-size:12px; font-weight:600; color:var(--c-texto-medio); text-align:center; }
.kb-coluna__lista { padding:4px 10px 12px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; min-height:80px; }
.kb-solte { border:1.5px dashed #C9CFD8; border-radius:var(--r-md); padding:14px; text-align:center;
font-size:12.5px; color:var(--c-texto-fraco); }
.kb-cartao + .kb-solte, .kb-marcador + .kb-solte { display:none; }
.kb-cartao { position:relative; display:flex; gap:4px; background:var(--c-superficie); border:1px solid var(--c-borda);
border-radius:var(--r-md); padding:10px 6px 10px 4px; box-shadow:var(--sombra-1); cursor:grab; user-select:none; }
.kb-cartao:hover { border-color:#C5CEDB; }
.kb-cartao--pausada { background:#FAFBFC; }
.kb-cartao--pausada .kb-cartao__titulo { color:var(--c-texto-medio); }
.kb-cartao--pousou { animation:kbPousou .6s ease; }
@keyframes kbPousou { from { box-shadow:0 0 0 3px var(--c-primaria-clara); } to { box-shadow:var(--sombra-1); } }
.kb-alca { flex:none; width:22px; border:0; background:none; padding:2px 0; color:#A6AEBB; cursor:grab;
touch-action:none; display:flex; justify-content:center; align-self:flex-start; border-radius:4px; }
.kb-alca:hover { color:var(--c-texto-medio); background:var(--c-neutro-bg); }
.kb-cartao__corpo { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.kb-cartao__titulo { font-weight:600; font-size:13.5px; color:var(--c-texto); line-height:1.3; }
.kb-cartao__titulo:hover { color:var(--c-primaria); text-decoration:none; }
.kb-estrela { color:#F59E0B; margin-right:5px; }
.kb-estrela .ico { width:13px; height:13px; fill:currentColor; vertical-align:-1px; }
.kb-cartao__sub { font-size:12px; color:var(--c-texto-fraco); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kb-selos { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.kb-selo { font-size:11px; font-weight:600; padding:1px 7px; border-radius:var(--r-full); background:var(--c-neutro-bg); color:var(--c-texto-medio); white-space:nowrap; }
.kb-selo--atraso { background:var(--c-erro); color:#fff; }
.kb-selo--vence { background:var(--c-atencao-bg); color:var(--c-atencao); }
.kb-selo--claro { background:var(--c-superficie); border:1px solid var(--c-borda); }
.kb-selo--pausa { background:#E9ECF1; color:var(--c-texto-medio); }
.kb-selo--fila { background:var(--c-primaria-clara); color:var(--c-primaria-escura); }
.kb-selo--fila:hover { text-decoration:none; background:var(--c-primaria); color:#fff; }
.kb-mais { align-self:flex-start; flex:none; }
.kb-fantasma { position:fixed; left:0; top:0; z-index:1000; pointer-events:none; opacity:.95;
box-shadow:0 12px 28px rgba(16,24,40,.18); cursor:grabbing; }
.kb-marcador { border-radius:var(--r-md); background:var(--c-primaria-fraca); border:1.5px dashed var(--c-primaria); }
body.kb-arrastando, body.kb-arrastando * { cursor:grabbing !important; user-select:none; }
.kb-menu__titulo { padding:6px 10px 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--c-texto-fraco); }
.kb-menu button[disabled] { opacity:.45; cursor:default; }
@media (max-width:640px) {
.kb-coluna { flex-basis:82vw; max-height:none; }
}
@media print {
.kb { overflow:visible; flex-wrap:wrap; }
.kb-coluna { max-height:none; flex:0 0 31%; break-inside:avoid; background:none; border:1px solid #ccc; }
.kb-alca, .kb-mais, .kb-solte { display:none !important; }
.kb-cartao { box-shadow:none; break-inside:avoid; }
}
/* ---------------------------------------------------------- bonificação */
.bon-pendentes { align-items:flex-start; }
.bon-pendentes__lista { list-style:none; margin:var(--s-3) 0 0; padding:0; display:grid; gap:6px; }
.bon-pendentes__lista li { display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); flex-wrap:wrap;
padding:6px 0; border-top:1px solid rgba(178,106,0,.15); }
.bon-acoes { gap:6px; justify-content:flex-end; flex-wrap:nowrap; }
.bon-tabela .badge .ico { width:12px; height:12px; vertical-align:-2px; }
.bon-vagas { max-height:240px; overflow:auto; margin-top:6px; }
.bon-vaga { display:block; width:100%; text-align:left; padding:9px var(--s-3); border:0; border-bottom:1px solid #EFF1F4;
background:none; font:inherit; font-size:13.5px; cursor:pointer; }
.bon-vaga:hover, .bon-vaga:focus-visible { background:var(--c-primaria-fraca); }
@media print { .nao-imprimir, .bon-pendentes { display:none !important; } }
/* ---------------------------------------------------------- dashboard: prazos das vagas */
.prazos__corpo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-5); }
.prazos__titulo { margin:0 0 var(--s-3); font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.prazos__lista { list-style:none; margin:0 0 var(--s-2); padding:0; }
.prazos__lista li { display:flex; align-items:center; gap:var(--s-3); padding:8px 0; border-bottom:1px solid #EFF1F4; }
.prazos__lista li:last-child { border-bottom:0; }
.prazos__vaga { flex:1; min-width:0; color:inherit; }
.prazos__vaga:hover { text-decoration:none; }
.prazos__vaga:hover .prazos__nome { color:var(--c-primaria); }
.prazos__nome, .prazos__sub { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prazos__nome { font-weight:600; font-size:13.5px; }
.prazos__sub { font-size:12px; color:var(--c-texto-fraco); }
.prazos__dias { flex:none; font-size:12.5px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.prazos__dias small { display:block; font-weight:500; font-size:11px; color:var(--c-texto-fraco); }
.prazos__dias--erro { color:var(--c-erro); }
.prazos__dias--atencao { color:var(--c-atencao); }
.prazos__nota { grid-column:1 / -1; margin:0; }
.prazos__nota .ico { vertical-align:-2px; }
.cidade__nome { width:170px; max-width:45%; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:760px) { .prazos__corpo { grid-template-columns:minmax(0,1fr); } }
/* ---------------------------------------------------------- relatórios (quadro semanal / mensal) */
.abas--pagina { margin-bottom:var(--s-4); }
.rel-barra { flex-wrap:wrap; gap:var(--s-3); }
.rel-nav { display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
.rel-nav__data .entrada { width:auto; min-width:150px; }
.segmentado a {
padding:6px 14px; border-radius:var(--r-full); font-size:12.5px; font-weight:600;
color:var(--c-texto-medio); white-space:nowrap;
}
.segmentado a:hover { color:var(--c-texto); text-decoration:none; }
.segmentado a[aria-current] { background:var(--c-superficie); color:var(--c-texto); box-shadow:var(--sombra-1); }
.rel-classes { max-width:100%; overflow-x:auto; scrollbar-width:none; }
.rel-tabela { font-variant-numeric:tabular-nums; }
.rel-tabela th, .rel-tabela td { padding:9px 10px; }
.rel-tabela thead th { text-transform:none; letter-spacing:0; font-size:12px; line-height:1.25; }
.rel-dia { display:block; font-weight:700; color:var(--c-texto); }
.rel-data { display:block; font-weight:500; color:var(--c-texto-fraco); }
/* primeira coluna fixa: no celular a semana rola por baixo dela */
.rel-tabela__rotulo {
position:sticky; left:0; z-index:1; background:var(--c-superficie);
min-width:190px; text-align:left; font-weight:600; font-size:13px;
text-transform:none !important; letter-spacing:0 !important; color:var(--c-texto) !important;
box-shadow:1px 0 0 var(--c-borda); white-space:normal !important;
}
thead .rel-tabela__rotulo { background:#FAFBFC; z-index:2; }
.rel-dica { display:block; font-weight:400; font-size:11.5px; color:var(--c-texto-fraco); line-height:1.3; margin-top:1px; }
.rel-grupo th {
background:var(--c-neutro-bg) !important; color:var(--c-texto) !important; font-size:12px;
text-align:left; padding:8px 10px !important; position:sticky; left:0;
}
.rel-grupo th .ico { vertical-align:-2px; margin-right:4px; color:var(--c-primaria); }
.rel-sub .rel-tabela__rotulo { padding-left:26px; font-weight:500; color:var(--c-texto-medio) !important; }
.rel-sub td { font-size:12.5px; }
.rel-tabela tbody tr:hover { background:transparent; }
.rel-tabela tbody tr:hover td { background:var(--c-primaria-fraca); }
.rel-hoje { background:var(--c-primaria-fraca); }
thead .rel-hoje { box-shadow:inset 0 -2px 0 var(--c-primaria); }
thead .rel-hoje .rel-dia { color:var(--c-primaria); }
.rel-fds .rel-zero, .rel-fds .rel-vazio { opacity:.6; }
.rel-total { background:#FAFBFC; font-weight:700; border-left:1px solid var(--c-borda); }
.rel-zero, .rel-vazio { color:#B4BBC6; }
.rel-num {
min-width:34px; height:28px; padding:0 8px; border:0; border-radius:var(--r-full); cursor:pointer;
background:var(--c-primaria-clara); color:var(--c-primaria-escura); font:inherit; font-weight:700;
}
.rel-num:hover { background:var(--c-primaria); color:#fff; }
.rel-num:focus-visible { outline:2px solid var(--c-primaria); outline-offset:2px; }
.rel-notas { font-size:13px; color:var(--c-texto-medio); border-top:1px solid var(--c-borda); }
.rel-notas p { margin:0 0 6px; }
.rel-notas p:last-child { margin-bottom:0; }
.rel-notas .ico { vertical-align:-2px; color:var(--c-primaria); }
.rel-grafico-wrap { padding-bottom:0; }
.rel-grafico { min-height:280px; }
.rel-mensal th, .rel-mensal td, .rel-mov th, .rel-mov td { font-variant-numeric:tabular-nums; }
.rel-mensal tbody th, .rel-mensal tfoot th, .rel-mov tbody th, .rel-mov tfoot th {
text-transform:none; letter-spacing:0; font-size:13.5px; color:var(--c-texto); background:none;
border-bottom-color:#EFF1F4;
}
.rel-mensal tfoot th, .rel-mensal tfoot td, .rel-mov tfoot th, .rel-mov tfoot td {
background:#FAFBFC; font-weight:700; border-top:1px solid var(--c-borda);
}
.rel-uteis { display:block; font-size:10.5px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--c-texto-fraco); }
.rel-cor { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:0; }
.rel-mensal__ating { min-width:170px; }
.rel-ating { display:flex; align-items:center; gap:var(--s-2); }
.rel-ating .barra { flex:1; min-width:70px; }
.rel-ating__pct { min-width:42px; text-align:right; }
.rel-ating__pct--sucesso { color:var(--c-sucesso); }
.rel-ating__pct--atencao { color:var(--c-atencao); }
.rel-ating__pct--erro { color:var(--c-erro); }
.rel-duas { align-items:stretch; gap:var(--s-4); }
.rel-duas > .cresce { min-width:0; flex-basis:520px; }
.rel-ent { flex:0 1 300px; min-width:260px; }
.rel-lista { margin:0; display:grid; gap:var(--s-2); }
.rel-lista div { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #EFF1F4; }
.rel-lista div:last-child { border-bottom:0; }
.rel-lista dt { color:var(--c-texto-medio); }
.rel-lista dd { margin:0; font-weight:700; font-variant-numeric:tabular-nums; }
@media (max-width:640px) {
.rel-tabela__rotulo { min-width:132px; max-width:150px; }
.rel-dica { display:none; }
.rel-nav { width:100%; }
.rel-nav__data { flex:1; }
.rel-nav__data .entrada { width:100%; min-width:0; }
.rel-ent { flex-basis:100%; }
/* no celular o nome fica parado e as semanas rolam por baixo */
.rel-mensal th:first-child, .rel-mov th:first-child {
position:sticky; left:0; z-index:1; background:var(--c-superficie); box-shadow:1px 0 0 var(--c-borda);
}
.rel-mensal thead th:first-child, .rel-mov thead th:first-child,
.rel-mensal tfoot th:first-child, .rel-mov tfoot th:first-child { background:#FAFBFC; }
}
@media print {
.topbar,.rail,.pagina__acoes,.btn { display:none !important; }
.conteudo { padding:0; }
.card { break-inside:avoid; box-shadow:none; }
/* relatórios: sai o que é navegação, fica o número */
.abas--pagina, .rel-barra, .rel-barra-card, .rel-classes { display:none !important; }
.rel-num { background:none; color:inherit; padding:0; min-width:0; height:auto; }
.rel-tabela__rotulo { position:static; box-shadow:none; }
.rel-tabela, .rel-mensal { font-size:11px; }
.rel-quadro .card__corpo.rel-notas .ico { display:none; }
.tabela-rolagem { overflow:visible; }
}
/* link no menu de seções de um wizard que leva a outra página */
.wizard__link { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:var(--r-md);
font-size:13.5px; color:var(--c-texto-medio); text-decoration:none; }
.wizard__link:hover { background:var(--c-fundo); color:var(--c-texto); }
/* ---------------------------------------------------------- vagas (Fase 2) */
/* selo do tipo de contratação: a cor vem da tabela tipos_contratacao (--selo) */
.selo-tipo {
display:inline-flex; align-items:center; padding:2px 10px; border-radius:var(--r-full);
font-size:12px; font-weight:600; line-height:1.5; white-space:nowrap;
color:color-mix(in srgb, var(--selo, #64748B) 72%, #000);
background:color-mix(in srgb, var(--selo, #64748B) 13%, #fff);
border:1px solid color-mix(in srgb, var(--selo, #64748B) 30%, #fff);
}
.selo-tipo--sm { padding:0 8px; font-size:11px; margin-right:4px; }
.tabela .direita, .direita { text-align:right; }
.campo__erro { display:block; margin-top:4px; color:var(--c-erro); font-size:12.5px; font-weight:500; }
.campo__erro:empty { display:none; }
.campo--erro .entrada, .campo--erro .tox-tinymce { border-color:var(--c-erro) !important; box-shadow:0 0 0 3px var(--c-erro-bg); }
/* opções em "pílula" (prazos rápidos, tipos de contratação) */
.chip-opcao {
border:1px solid var(--c-borda-forte); background:var(--c-superficie); color:var(--c-texto-medio);
padding:6px 14px; border-radius:var(--r-full); font:inherit; font-size:13px; font-weight:500; cursor:pointer;
min-height:36px;
}
.chip-opcao:hover { border-color:var(--c-primaria); color:var(--c-primaria); }
.chip-opcao[aria-pressed="true"] { background:var(--c-primaria-clara); border-color:var(--c-primaria); color:var(--c-primaria-escura); font-weight:600; }
.renovar__atalhos { display:flex; flex-wrap:wrap; gap:var(--s-2); }
/* linha do tempo do histórico */
.linha-tempo { list-style:none; margin:0; padding:0; }
.linha-tempo__item { position:relative; display:flex; gap:var(--s-3); padding-bottom:var(--s-4); }
.linha-tempo__item:not(:last-child)::before {
content:''; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--c-borda);
}
.linha-tempo__icone {
flex:0 0 32px; height:32px; border-radius:50%; display:grid; place-items:center;
background:var(--c-neutro-bg); color:var(--c-neutro);
}
.linha-tempo__item--sucesso .linha-tempo__icone { background:var(--c-sucesso-bg); color:var(--c-sucesso); }
.linha-tempo__item--atencao .linha-tempo__icone { background:var(--c-atencao-bg); color:var(--c-atencao); }
.linha-tempo__item--erro .linha-tempo__icone { background:var(--c-erro-bg); color:var(--c-erro); }
.linha-tempo__item--info .linha-tempo__icone { background:var(--c-info-bg); color:var(--c-info); }
.linha-tempo__texto { padding-top:5px; min-width:0; }
.linha-tempo__texto strong { font-size:14px; }
.linha-tempo__texto > .mudo { display:block; margin-top:2px; }
.linha-tempo__texto p { margin:2px 0 4px; color:var(--c-texto-medio); font-size:13.5px; line-height:1.5; overflow-wrap:anywhere; }
/* desempenho da vaga */
.desempenho__totais { display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-left:auto; font-size:13px; color:var(--c-texto-medio); }
.desempenho__totais strong { color:var(--c-texto); font-size:15px; }
.desempenho__tabela { border-top:1px solid var(--c-borda); }
.desempenho__tabela summary { padding:var(--s-3) var(--s-5); cursor:pointer; font-size:13.5px; font-weight:600; color:var(--c-primaria); display:flex; align-items:center; gap:6px; }
.desempenho__tabela .tabela-rolagem { max-height:360px; overflow:auto; }
.desempenho__tabela thead th { position:sticky; top:0; background:var(--c-superficie); }
.card__rodape { padding:var(--s-3) var(--s-5); border-top:1px solid var(--c-borda); }
.opcao-linha { display:flex; gap:var(--s-5); align-items:flex-start; justify-content:space-between;
padding:var(--s-4); border:1px solid var(--c-borda); border-radius:var(--r-md); max-width:860px; }
@media (max-width:600px) { .opcao-linha { flex-direction:column; gap:var(--s-3); } }
/* candidaturas filtradas por uma vaga: cartão "vaga em foco" */
.foco-vaga {
display:flex; align-items:center; gap:var(--s-4); margin-bottom:var(--s-4);
padding:var(--s-4) var(--s-5); background:var(--c-primaria-fraca);
border:1px solid var(--c-primaria-clara); border-radius:var(--r-lg);
}
.foco-vaga__icone { flex:0 0 44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--c-primaria); color:#fff; }
.foco-vaga__texto { flex:1; min-width:0; }
.foco-vaga__rotulo { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--c-primaria-escura); }
.foco-vaga__titulo { margin:2px 0 6px; font-size:19px; line-height:1.3; overflow-wrap:anywhere; }
.foco-vaga__meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:13px; color:var(--c-texto-medio); }
.foco-vaga__meta span:empty { display:none; }
.foco-vaga__acoes { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
@media (max-width:760px) {
.foco-vaga { flex-wrap:wrap; padding:var(--s-4); }
.foco-vaga__acoes { flex-direction:row; flex-wrap:wrap; align-items:center; width:100%; }
}
.tabela--sem-vaga th:nth-child(2), .tabela--sem-vaga td:nth-child(2) { display:none; }
.selo-grupo { gap:4px; }
.selo-grupo .ico { width:12px; height:12px; }
.caixa-marcar { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; min-height:32px; }
.caixa-marcar input { width:18px; height:18px; margin:0; accent-color:var(--c-primaria); }
.grupos-lista { display:grid; gap:var(--s-2); }
.grupo-opcao {
display:flex; gap:10px; align-items:flex-start; cursor:pointer; padding:10px 12px;
border:1px solid color-mix(in srgb, var(--selo, var(--c-borda-forte)) 55%, var(--c-borda-forte)); border-radius:var(--r-md);
}
.grupo-opcao input { margin:3px 0 0; width:17px; height:17px; flex:none; accent-color:var(--selo); }
.grupo-opcao > span { display:flex; flex-direction:column; gap:2px; font-size:14px; }
.grupo-opcao:has(input:checked) { background:color-mix(in srgb, var(--selo) 7%, #fff); }
.grupo-detalhe { margin:0 0 var(--s-2) 30px; max-width:300px; }
/* ---------------------------------------------------------- acessibilidade (WCAG 2.1 AA, Fase 4) */
/* iniciais brancas sobre a cor do status: escurece o fundo para chegar a 4,5:1 */
/* avatar com iniciais: cor de fundo já escurecida no servidor (StatusCandidatura::corAvatar) */
/* link no meio do texto precisa de algo além da cor (1.4.1) */
p a:not(.btn), .texto-rico a, .aviso a:not(.btn), dd a:not(.btn), .campo__ajuda a, .secao__sub a { text-decoration:underline; text-underline-offset:2px; }
/* foco sempre visível no teclado (2.4.7) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline:2px solid var(--c-primaria); outline-offset:2px; }
.entrada:focus-visible { outline:2px solid var(--c-primaria); outline-offset:1px; }
/* "Pular para o conteúdo" (2.4.1): aparece só ao receber foco */
.pular-conteudo {
position:absolute; left:12px; top:-60px; z-index:200; padding:10px 16px; border-radius:var(--r-md);
background:var(--c-primaria); color:#fff; font-weight:600; text-decoration:none;
}
.pular-conteudo:focus { top:12px; }
.so-leitor { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
/* ficha: perfil "Sobre você" (6 dimensões) */
.perfil6 { display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:var(--s-4); align-items:center; }
.perfil6__dims { grid-template-columns:auto 1fr; }
.perfil6__prefs { display:flex; flex-wrap:wrap; gap:6px; }
@media (max-width:900px) { .perfil6 { grid-template-columns:1fr; } }
.obs-recrutador--publica { background:var(--c-sucesso-bg); color:var(--c-texto); }
.cand-hist { margin-top:var(--s-3); }
.cand-hist summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--c-primaria); display:inline-flex; align-items:center; gap:6px; }
.compat-fatores { list-style:none; margin:var(--s-2) 0 0; padding:0; display:grid; gap:4px; font-size:13px; }
.compat-fatores li { display:flex; gap:6px; }
.compat-fatores li.ok > span:first-child { color:var(--c-sucesso); font-weight:700; }
.compat-fatores li.nao > span:first-child { color:var(--c-erro); font-weight:700; }
.compat-fatores li.neutro > span:first-child { color:var(--c-texto-medio); }
.st-presets { margin:4px 0 8px; }
.rail__item { position:relative; }
.rail__badge { position:absolute; top:4px; left:28px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#B91C1C; color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; line-height:1; }
[data-rail="aberto"] .rail__badge { position:static; margin-left:auto; }
/* Mensagens (caixa de conversas) */
.caixa-msg { display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:var(--s-4); align-items:start; }
.caixa-msg__itens { list-style:none; margin:0; padding:0; max-height:70vh; overflow:auto; }
.caixa-msg__item { display:flex; flex-direction:column; gap:2px; padding:12px 16px; border-bottom:1px solid var(--c-borda); color:var(--c-texto); text-decoration:none !important; }
.caixa-msg__item:hover { background:var(--c-fundo); }
.caixa-msg__item[aria-current] { background:var(--c-primaria-fraca); }
.caixa-msg__previa { color:var(--c-texto-medio); }
@media (max-width:900px) { .caixa-msg { grid-template-columns:1fr; } .caixa-msg__itens { max-height:40vh; } }
/* ------------------------------------------------ banco de talentos (Fase 10) */
.opcao-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--c-borda-forte); border-radius:999px; cursor:pointer; font-size:14px; }
.opcao-chip:has(input:checked) { border-color:var(--c-primaria); background:var(--c-primaria-fraca); font-weight:600; }
.talentos-filtros { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--s-3); align-items:end; }
.talentos-filtros .campo { margin:0; }
.talentos-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--s-3); }
.talento { display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-4); border:1px solid var(--c-borda); border-radius:var(--r-lg); background:var(--c-superficie); }
.talento__topo { display:flex; gap:var(--s-3); align-items:flex-start; }
.talento__nome { font-weight:700; color:var(--c-texto); font-size:16px; }
.talento__sub { color:var(--c-texto-medio); font-size:13px; }
.talento__linha { font-size:13px; color:var(--c-texto); line-height:1.5; margin:0; }
.talento__linha strong { font-weight:600; }
.talento__acoes { display:flex; gap:var(--s-2); flex-wrap:wrap; margin-top:auto; padding-top:var(--s-2); }
.talento__estado { font-size:13px; }
/* ------------------------------------------------ cursos (Fase 11) */
.grade-campos { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0 var(--s-3); }
.grade-campos--2 { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.curso-form .secao__titulo { margin-top:var(--s-5); }
.aulas-lista { list-style:none; margin:0; padding:0; }
/* módulo do curso: cabeçalho abre/fecha */
.modulo__titulo { flex:1; min-width:0; margin:0; }
.modulo__abrir { display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.modulo__abrir:focus-visible { outline:2px solid var(--c-primaria); outline-offset:4px; border-radius:4px; }
.modulo__seta { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--c-fundo); flex:none; transition:transform .15s; }
.modulo__abrir[aria-expanded="false"] .modulo__seta { transform:rotate(-90deg); }
.modulo__resumo { font-weight:400; font-size:13px; }
.modulo:has(.modulo__abrir[aria-expanded="false"]) > .card__cabecalho { border-bottom:0; }
.aula-item { display:flex; align-items:center; gap:var(--s-3); padding:10px var(--s-4); border-top:1px solid var(--c-borda); }
.aula-item__icone { width:32px; height:32px; border-radius:8px; background:var(--c-primaria-fraca); color:var(--c-primaria); display:flex; align-items:center; justify-content:center; flex:none; }
.aula-item__titulo { flex:1; min-width:0; display:flex; flex-direction:column; }
.btn--link { background:none; border:0; padding:0; text-align:left; color:var(--c-primaria); font-weight:600; cursor:pointer; text-decoration:underline; font-size:inherit; }
.materiais-lista, .questoes-lista, .docs-lista { list-style:none; margin:0 0 var(--s-3); padding:0; display:grid; gap:6px; }
.questoes-lista li { border:1px solid var(--c-borda); border-radius:var(--r-md); padding:8px 10px; }
.questao-form { background:var(--c-fundo); border-radius:var(--r-md); padding:var(--s-3); }
.envio-video { margin-top:6px; display:grid; gap:4px; }
.duvida__resposta { margin:var(--s-2) 0 0 var(--s-4); padding:8px 12px; border:1px solid var(--c-borda); border-radius:var(--r-md); background:var(--c-fundo); border-radius:0 8px 8px 0; }
.duvida__resposta--equipe { border-color:color-mix(in srgb, var(--c-sucesso) 35%, #fff); background:var(--c-sucesso-bg); }
.duvida__form { margin-top:var(--s-3); }
.modelo-grade { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:var(--s-4); align-items:start; }
@media (max-width: 1100px) { .modelo-grade { grid-template-columns:1fr; } }
.modelo-previa { position:sticky; top:calc(var(--topbar) + var(--s-4)); }
.modelo-previa canvas { width:100%; height:auto; aspect-ratio:297/210; border:1px solid var(--c-borda); border-radius:var(--r-md); background:#fff; display:block; }
/* banco de talentos: o que a pessoa já preencheu (6 dimensões e DISC são questionários diferentes) */
.talento__perfis { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.talento__perfil { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; line-height:1.3; padding:3px 9px; border-radius:99px; border:1px dashed var(--c-borda-forte, #94A3B8); color:var(--c-texto-medio); }
.talento__perfil strong { font-weight:600; }
.talento__perfil.feito { border:1px solid #86EFAC; background:#F0FDF4; color:#14532D; }
.talento__perfil.feito svg { color:#15803D; }
/* detalhe do talento: perfil comportamental em abas (DISC | 6 dimensões) */
.perfil-abas > .abas { padding:0 var(--s-5, 24px); border-bottom:1px solid var(--c-borda); }
.perfil-resumo { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:var(--s-4, 16px) var(--s-5, 24px) 0; font-size:14px; }
@media (max-width:640px) { .perfil-abas > .abas, .perfil-resumo { padding-left:var(--s-4, 16px); padding-right:var(--s-4, 16px); } }
/* o trilho das abas de etapa já tem 4px próprios: desconta para alinhar com as demais */
.card > .abas-etapa { padding-left:calc(var(--s-5) - var(--s-1)); }
@media (max-width:640px) { .card > .abas-etapa { padding-left:calc(var(--s-4) - var(--s-1)); } }
/* dashboard: perfil comportamental da base (aba 6 dimensões) */
.dash6__radar { margin:-8px 0 0; min-height:260px; }
.dash6__medias { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0 0 var(--s-4); align-items:center; font-size:13px; }
.dash6__medias dt { font-weight:600; color:var(--c-texto); }
.dash6__medias dd { margin:0; display:flex; align-items:center; gap:8px; }
.dash6__medias .barra { flex:1; }
.dash6__sub { font-size:13.5px; margin:0 0 var(--s-2); }
/* modal em tela cheia (ex.: editar aula) */
.modal--cheio .modal__caixa { max-width:none; width:calc(100vw - 32px); height:calc(100vh - 32px); max-height:none; display:flex; flex-direction:column; }
.modal--cheio .modal__corpo { flex:1; min-height:0; overflow:hidden; padding:0; }
@media (max-width: 700px) { .modal--cheio .modal__caixa { width:100vw; height:100vh; border-radius:0; } }
/* editor da aula: dados à esquerda, vídeo à direita */
.aula-editor { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); height:100%; }
.aula-editor:has(> .aula-editor__video[hidden]) { grid-template-columns:minmax(0, 1fr); }
.aula-editor__form { overflow:auto; padding:var(--s-4) var(--s-5); }
.aula-editor__video { border-left:1px solid var(--c-borda); background:var(--c-fundo); padding:var(--s-4) var(--s-5); overflow:auto; }
.aula-editor__tela { aspect-ratio:16/9; background:#0f172a; border-radius:var(--r-md); overflow:hidden; display:grid; place-items:center; text-align:center; }
.aula-editor__tela p { color:#cbd5e1 !important; padding:var(--s-4); }
.aula-editor__tela video, .aula-editor__tela iframe { width:100%; height:100%; border:0; display:block; background:#000; }
.aula-editor__tempo { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-3); font-size:14px; }
@media (max-width: 960px) {
.aula-editor { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); overflow:auto; }
.aula-editor__video { order:-1; border-left:0; border-bottom:1px solid var(--c-borda); overflow:visible; }
.aula-editor__form { overflow:visible; }
}
/* dados pessoais mascarados (LGPD): valor + olho */
.sensivel { display:inline-flex; align-items:center; gap:4px; max-width:100%; vertical-align:middle; }
.sensivel__valor { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.sensivel__olho { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:50%;
background:transparent; color:var(--c-texto-medio); cursor:pointer; }
.sensivel__olho:hover { background:var(--c-fundo); color:var(--c-primaria); }
.sensivel__olho:focus-visible { outline:3px solid var(--c-primaria); outline-offset:1px; }
.sensivel__olho[disabled] { opacity:.5; cursor:wait; }
.sensivel.aberto .sensivel__olho { color:var(--c-primaria); }
/* e-mail mascarado fora do link da pessoa (o olho não pode ficar dentro de um link) */
.pessoa__sub--fora { margin-left:calc(34px + var(--s-3)); }
/* Banco de talentos: busca compacta numa linha + filtros avançados recolhidos */
.tal-busca { margin-bottom:var(--s-4); padding:var(--s-4) var(--s-5); }
.tal-busca__linha { display:grid; grid-template-columns:minmax(220px, 1.6fr) minmax(200px, 1.4fr) minmax(150px, 1fr) auto; gap:var(--s-3); align-items:end; }
.tal-busca .campo { margin:0; }
.tal-busca__campo { position:relative; display:block; }
.tal-busca__campo > .ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--c-texto-medio); pointer-events:none; }
.tal-busca__campo .entrada { padding-left:36px; }
.tal-busca__botoes { display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; }
.tal-busca__avancado { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-3); margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px dashed var(--c-borda); }
.tal-busca__nota { grid-column:1 / -1; margin:0; display:flex; gap:6px; align-items:center; }
.tal-conta { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-full);
background:var(--c-primaria); color:#fff; font-size:11px; font-weight:700; line-height:1; }
@media (max-width: 1200px) {
.tal-busca__linha { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.tal-busca__botoes { grid-column:1 / -1; }
}
@media (max-width: 700px) {
.tal-busca { padding:var(--s-4); }
.tal-busca__linha, .tal-busca__avancado { grid-template-columns:1fr; }
.tal-busca__botoes .btn--primario { flex:1; justify-content:center; }
}
/* texto fraco direto no fundo cinza da página (fora dos cartões): um tom mais escuro para manter 4,5:1 */
.container > .mudo, .secao__titulo .mudo, .previa-vaga__nota { color:#5A6372; }
.container > .mudo a, .secao__titulo .mudo a { color:var(--c-primaria-escura); text-decoration:underline; }
/* menu lateral mais compacto no computador: itens de 34px, 2px entre eles (alvo de clique segue acima dos 24px da WCAG) */
@media (min-width:861px) {
.rail { gap:2px; }
.rail__item { height:34px; }
.rail__grupo { padding:var(--s-3) var(--s-3) 2px; }
.rail__sep, [data-rail="aberto"] .rail__sep { margin-top:6px; margin-bottom:6px; }
.rail__badge { top:1px; }
}
/* títulos de grupo (menu lateral e Configurações) na cor do tema, com um traço curto antes:
a separação entre os grupos fica visível de longe */
.rail__grupo, .wizard__grupo { color:var(--c-primaria-escura); }
[data-rail="aberto"] .rail__grupo, .wizard__grupo { display:flex; align-items:center; gap:8px; }
.rail__grupo::before, .wizard__grupo::before { content:''; flex:none; width:14px; height:2px; border-radius:2px; background:var(--c-primaria); }
@media (max-width:900px) { .wizard__grupo { display:none; } }
.wizard__link[aria-current="page"] { background:var(--c-primaria-clara); color:var(--c-primaria-escura); font-weight:600; }
.wizard__link--secao { padding-left:12px; }
/* visualizador de materiais dos cursos (material_ver.js) */
.mat-ver__caixa { max-width:min(1100px, calc(100vw - 32px)); width:100%; }
.mat-ver__corpo { padding:0; display:flex; align-items:center; justify-content:center; background:var(--c-fundo); min-height:240px; }
.mat-ver__corpo img { display:block; max-width:100%; max-height:calc(100vh - 220px); object-fit:contain; }
.mat-ver__corpo video { display:block; width:100%; max-height:calc(100vh - 220px); background:#000; }
.mat-ver__corpo iframe { display:block; width:100%; height:calc(100vh - 220px); border:0; background:#fff; }
.mat-ver__sem { text-align:center; padding:var(--s-6) var(--s-5); }
.mat-ver__sem .ico { width:44px; height:44px; color:var(--c-primaria); }
.modal__rodape .mat-ver__nome { margin-right:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ---------------------------------------------------------- abas de pasta
A aba ativa vira uma "pasta" branca encaixada no conteúdo, sobre uma faixa cinza.
Assim ela não se confunde com os filtros em pílula (período em cima, recortes dentro
da aba) e fica claro onde a pessoa está. Vale para .abas, .abas-situacao e .abas-etapa. */
.abas, .abas-situacao, .abas-etapa {
background:var(--c-fundo); gap:4px; padding-top:8px;
}
.abas-etapa__trilho { gap:4px; }
.card > .abas:first-child, .card > .abas-situacao:first-child, .card > .abas-etapa:first-child,
.card > .perfil-abas:first-child > .abas { border-radius:var(--r-lg) var(--r-lg) 0 0; }
.abas a, .abas button, .abas-situacao a, .abas-etapa__trilho button {
padding:9px 14px; margin-bottom:-1px;
border:1px solid transparent; border-bottom:0; border-radius:10px 10px 0 0;
color:var(--c-texto-medio); transition:background .12s, color .12s;
}
.abas a:hover, .abas button:hover, .abas-situacao a:hover, .abas-etapa__trilho button:hover {
background:color-mix(in srgb, var(--c-texto) 5%, transparent); color:var(--c-texto);
}
.abas [aria-current], .abas [aria-selected=true], .abas-situacao a[aria-current="page"], .abas-etapa__trilho button[aria-selected="true"] {
background:var(--c-superficie); border-color:var(--c-borda);
box-shadow:0 -2px 6px rgba(15,23,42,.05);
position:relative; font-weight:700;
}
.abas [aria-current], .abas [aria-selected=true], .abas-situacao a[aria-current="page"] { color:var(--c-primaria); }
.abas [aria-current]:hover, .abas [aria-selected=true]:hover, .abas-situacao a[aria-current="page"]:hover { background:var(--c-superficie); color:var(--c-primaria); }
.abas-etapa__trilho button[aria-selected="true"]:hover { background:var(--c-superficie); color:var(--cor-etapa, var(--c-primaria)); }
/* a aba ativa "fura" a linha de baixo e se liga ao conteúdo */
.abas [aria-current]::after, .abas [aria-selected=true]::after, .abas-situacao a[aria-current="page"]::after, .abas-etapa__trilho button[aria-selected="true"]::after {
content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--c-superficie);
}
.abas [aria-current] .ico, .abas [aria-selected=true] .ico { color:currentColor; }
.abas-etapa__seta { align-self:center; }
/* abas logo abaixo do título de um cartão: sem a faixa cinza (que grudava na linha do
cabeçalho); o título perde a linha de baixo e as abas sentam sob ele com respiro */
.card__cabecalho:has(+ .abas), .card__cabecalho:has(+ .abas-situacao), .card__cabecalho:has(+ .abas-etapa) { border-bottom:0; padding-bottom:var(--s-2); }
.card__cabecalho + .abas, .card__cabecalho + .abas-situacao, .card__cabecalho + .abas-etapa { background:transparent; padding-top:0; }
.card__cabecalho + .abas [aria-current], .card__cabecalho + .abas [aria-selected=true],
.card__cabecalho + .abas-situacao a[aria-current="page"], .card__cabecalho + .abas-etapa .abas-etapa__trilho button[aria-selected="true"] { box-shadow:none; background:color-mix(in srgb, var(--c-primaria) 7%, var(--c-superficie)); }
.card__cabecalho + .abas a:not([aria-current]):hover, .card__cabecalho + .abas button[aria-selected=false]:hover { background:var(--c-fundo); }
/* seletor de visualização com texto (Lista | Kanban) */
.seletor-visao { display:inline-flex; border:1px solid var(--c-borda); border-radius:var(--r-full); padding:3px; background:var(--c-superficie); gap:2px; }
.seletor-visao button { display:inline-flex; align-items:center; gap:6px; border:0; background:none; border-radius:var(--r-full); padding:7px 14px; font:inherit; font-size:13.5px; font-weight:600; color:var(--c-texto-medio); cursor:pointer; }
.seletor-visao button:hover { color:var(--c-texto); }
.seletor-visao button[aria-pressed="true"] { background:var(--c-primaria); color:#fff; }
#topVagas[hidden] { display:none; }
/* Vagas em destaque (janela da tela de Candidaturas) */
.top-vagas__lista { display:flex; flex-direction:column; gap:8px; }
.top-vagas__item { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--c-borda); border-radius:var(--r-md); color:var(--c-texto); min-width:0; }
.top-vagas__item:hover { border-color:var(--c-primaria); background:var(--c-fundo); text-decoration:none; }
.top-vagas__pos { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--c-primaria-clara); color:var(--c-primaria); font-weight:700; font-size:12.5px; }
.top-vagas__nome { flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-vagas__nome small { display:block; font-size:12px; font-weight:400; color:var(--c-texto-fraco); }
.top-vagas__valor { flex:none; color:var(--c-primaria); font-size:16px; }
.top-vagas__valor small { font-size:12px; font-weight:500; color:var(--c-texto-medio); }
/* Relatórios (janela de cada tela e menu Relatórios) */
.rel-central__periodo { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:var(--s-2); }
.rel-central__atalhos { display:flex; flex-wrap:wrap; gap:6px; }
.rel-central__datas { display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.rel-central__datas .entrada { width:auto; min-height:36px; }
@media (max-width:640px) { .rel-central__datas { margin-left:0; } }
.rel-central__filtros { margin:0 0 var(--s-3); }
.rel-central__grupo { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--c-primaria-escura); margin:var(--s-4) 0 var(--s-2); }
.rel-central__grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--s-3); margin-top:var(--s-3); }
.rel-cartao { display:flex; gap:12px; padding:var(--s-4); border:1px solid var(--c-borda); border-radius:var(--r-md); background:var(--c-superficie); }
.rel-cartao__icone { flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--c-primaria-clara); color:var(--c-primaria); }
.rel-cartao__texto { min-width:0; display:flex; flex-direction:column; }
.rel-cartao__titulo { margin:0; font-size:15px; }
.rel-cartao__desc { margin:4px 0 var(--s-3); font-size:13px; color:var(--c-texto-medio); line-height:1.45; flex:1; }
.rel-cartao__acoes { display:flex; gap:8px; flex-wrap:wrap; }
/* abas como seletor em pílula no cabeçalho de um cartão (ex.: ficha do candidato,
Perfil comportamental): mesmo desenho do "Lista | Kanban"; a troca é a das abas */
.card__cabecalho:has(> .abas--seletor) { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; }
.abas.abas--seletor { display:inline-flex; flex:none; max-width:100%; gap:2px; padding:3px; background:var(--c-superficie); border:1px solid var(--c-borda); border-radius:var(--r-full); overflow-x:auto; }
.abas.abas--seletor [role=tab], .abas.abas--seletor button {
margin:0; padding:6px 14px; border:0; border-radius:var(--r-full); background:none; box-shadow:none;
font-size:13.5px; font-weight:600; color:var(--c-texto-medio); white-space:nowrap;
}
.abas.abas--seletor [role=tab]:hover { background:var(--c-fundo); color:var(--c-texto); }
.abas.abas--seletor [aria-selected=true], .abas.abas--seletor [aria-selected=true]:hover { background:var(--c-primaria); color:#fff; box-shadow:none; }
.abas.abas--seletor [aria-selected=true]::after { content:none; }
.abas.abas--seletor .conta { color:inherit; opacity:.8; font-weight:500; }
.abas.abas--seletor .ico { color:currentColor; }
/* ---------------------------------------------------------- abas em cima do cartão
Abas no topo de um cartão não viram "cabeçalho cinza": ficam sobre o fundo da
página, e só a aba ativa (branca) se encaixa no cartão, como uma pasta. */
.card:has(> .abas:first-child), .card:has(> .abas-situacao:first-child), .card:has(> .abas-etapa:first-child) {
border-top-color:transparent; border-top-left-radius:0; border-top-right-radius:0; box-shadow:none;
}
.card > .abas:first-child, .card > .abas-situacao:first-child, .card > .abas-etapa:first-child {
background:var(--c-pagina); margin:-1px -1px 0; border-radius:0; padding-top:0;
padding-left:calc(var(--s-5) + 1px); padding-right:calc(var(--s-5) + 1px);
}
@media (max-width:640px) {
.card > .abas:first-child, .card > .abas-situacao:first-child, .card > .abas-etapa:first-child { padding-left:calc(var(--s-4) + 1px); padding-right:calc(var(--s-4) + 1px); }
}
/* nas abas sobre o fundo da página, as não ativas ficam discretas e a ativa é o "papel" do cartão */
.card > .abas:first-child a:hover, .card > .abas:first-child button:hover,
.card > .abas-situacao:first-child a:hover, .card > .abas-etapa:first-child .abas-etapa__trilho button:hover { background:color-mix(in srgb, var(--c-texto) 6%, transparent); }
.card > .abas:first-child [aria-current], .card > .abas:first-child [aria-selected=true],
.card > .abas-situacao:first-child a[aria-current="page"], .card > .abas-etapa:first-child .abas-etapa__trilho button[aria-selected="true"] { box-shadow:none; }
/* cartão que é só a faixa de abas (o conteúdo vem em cartões abaixo): sobra só a linha */
.card:has(> .abas:only-child) { background:transparent; border-color:transparent; }
.card:has(> .abas:only-child) > .abas { border-bottom-color:var(--c-borda); }
/* Candidaturas: as abas de etapa vêm dentro de um invólucro (some no Kanban) */
.card:has(> [data-cand-so-lista]:first-child:not([hidden]) > .abas-etapa) { border-top-color:transparent; border-top-left-radius:0; border-top-right-radius:0; box-shadow:none; }
.card > [data-cand-so-lista]:first-child > .abas-etapa { background:var(--c-pagina); margin:-1px -1px 0; border-radius:0; padding-top:0; padding-left:calc(var(--s-5) - var(--s-1) + 1px); }
.card > [data-cand-so-lista]:first-child > .abas-etapa .abas-etapa__trilho button[aria-selected="true"] { box-shadow:none; }
.card > [data-cand-so-lista]:first-child[hidden] + * { border-top:0; }
/* abas em cima do cartão: a primeira encosta no canto (a borda dela continua a lateral do cartão) */
.card > .abas:first-child, .card > .abas-situacao:first-child, .card > .abas-etapa:first-child,
.card > [data-cand-so-lista]:first-child > .abas-etapa { padding-left:0 !important; }
.card > .abas:first-child > :first-child, .card > .abas-situacao:first-child > :first-child { border-top-left-radius:var(--r-lg); }
.card > .abas-etapa:first-child .abas-etapa__trilho, .card > [data-cand-so-lista]:first-child > .abas-etapa .abas-etapa__trilho { padding-left:0; }
.card > .abas-etapa:first-child .abas-etapa__trilho > :first-child, .card > [data-cand-so-lista]:first-child > .abas-etapa .abas-etapa__trilho > :first-child { border-top-left-radius:var(--r-lg); }
/* abas em cima do cartão: as não ativas com um cinza bem claro (o hover fica um tom acima) */
.card > .abas:first-child > a:not([aria-current]), .card > .abas:first-child > button[aria-selected=false],
.card > .abas-situacao:first-child > a:not([aria-current]),
.card > .abas-etapa:first-child .abas-etapa__trilho button[aria-selected=false],
.card > [data-cand-so-lista]:first-child > .abas-etapa .abas-etapa__trilho button[aria-selected=false] { background:color-mix(in srgb, var(--c-texto) 5%, transparent); }
.card > .abas:first-child > a:not([aria-current]):hover, .card > .abas:first-child > button[aria-selected=false]:hover,
.card > .abas-situacao:first-child > a:not([aria-current]):hover,
.card > .abas-etapa:first-child .abas-etapa__trilho button[aria-selected=false]:hover,
.card > [data-cand-so-lista]:first-child > .abas-etapa .abas-etapa__trilho button[aria-selected=false]:hover { background:color-mix(in srgb, var(--c-texto) 10%, transparent); color:var(--c-texto); }
/* Perfil comportamental recolhido: mostra o começo e uma faixa embaçada (sem degradê) com a seta para abrir */
.perfil-dobra { position:relative; max-height:260px; overflow:hidden; }
.perfil-dobra.aberta, .perfil-dobra.perfil-dobra--curto { max-height:none; overflow:visible; }
.perfil-dobra__veu { position:absolute; left:0; right:0; bottom:0; height:96px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:var(--s-3);
background:color-mix(in srgb, var(--c-superficie) 72%, transparent); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border-radius:0 0 var(--r-lg) var(--r-lg); }
.perfil-dobra.aberta .perfil-dobra__veu { position:static; height:auto; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0 0 var(--s-4); }
.perfil-dobra--curto .perfil-dobra__veu { display:none; }
.perfil-dobra__botao { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--c-borda); background:var(--c-superficie); border-radius:var(--r-full);
padding:7px 16px; font:inherit; font-size:13px; font-weight:600; color:var(--c-primaria); cursor:pointer; box-shadow:var(--sombra-1); }
.perfil-dobra__botao:hover { border-color:var(--c-primaria); }
.perfil-dobra__botao .ico { transition:transform .15s; }
.perfil-dobra__botao[aria-expanded="true"] .ico { transform:rotate(180deg); }
/* Mensagens no computador: encaixa na altura da janela; lista e histórico rolam por dentro,
e a caixa de escrever fica sempre embaixo (o topo vem do JS: --caixa-topo) */
@media (min-width:901px) {
.caixa-msg { align-items:stretch; height:calc(100dvh - var(--caixa-topo, 210px) - 24px); min-height:420px; }
.caixa-msg__lista, .caixa-msg__conversa { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.caixa-msg__itens { flex:1 1 auto; max-height:none; min-height:0; }
.caixa-msg__conversa > .card__corpo { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.caixa-msg [data-chat] { flex:1 1 auto; min-height:0; }
.caixa-msg .chat__lista { flex:1 1 auto; min-height:0; max-height:none; }
.caixa-msg .chat__texto { resize:none; }
/* o Enviar fica fora do botão flutuante do assistente (canto inferior direito) */
.caixa-msg .chat__acoes { padding-right:64px; }
}
/* Mensagens: filtro de empresa no topo (equipe) e aviso de "mais conversas" */
.caixa-msg__filtro { min-width:min(320px, 100%); }
.caixa-msg__mais { margin:0; padding:10px 16px; border-top:1px solid var(--c-borda); background:var(--c-fundo); }
/* cartão só de abas seguido do cartão de conteúdo: os dois se encostam e a aba ativa
"abre" o conteúdo logo abaixo (telas de Cursos, detalhe da vaga, editor do curso…) */
.card:has(> .abas:only-child) { margin-bottom:0 !important; }
/* o primeiro cartão depois das abas (pode haver /