/* ============================================================
   IBooster · Carreiras · estilos por view
   ============================================================ */

/* ---------- PORTAL PUBLICO DE VAGAS (landing "/") ---------- */
/* a primeira tela que o candidato ve: topbar institucional clara e fixa, hero
   marinho com o brasao e a grade de vagas respirando sobre o fundo claro */
#portal{min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
#portal>main{flex:1}
#portal footer.app{margin-top:var(--s8)}
.pt-top{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);border-top:3px solid var(--accent)}
.pt-bar{display:flex;align-items:center;gap:var(--s4);padding:12px 0}
.pt-actions{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* "Abrir painel" so existe com sessao viva: [hidden] precisa vencer o display do .btn */
.pt-actions .btn[hidden]{display:none !important}
@media(max-width:680px){
  .pt-top .logo .prod{display:none}
  .pt-actions .btn{font-size:var(--fs-xs);padding:6px 10px}
}
/* celular: logo na primeira linha, botoes na segunda (a barra nunca estoura a tela) */
@media(max-width:520px){
  .pt-bar{flex-wrap:wrap;gap:var(--s2) var(--s3);padding:10px 0}
  .pt-actions{flex:1 0 100%;margin-left:0}
}
/* bloco de marca CHAPADO no vermelho oficial. O degrade que existia aqui vinha de uma
   paleta com dois matizes; num vermelho unico ele so suja a cor. Um bloco chapado e o
   que a comunicacao da IBooster faz, e e o que deixa a tela limpa. */
.pv-hero{position:relative;overflow:hidden;background:var(--marca);color:#fff}
.pv-hero::after{content:"";position:absolute;right:-110px;top:-110px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 68%);pointer-events:none}
.pv-hero-in{display:flex;gap:var(--s8);align-items:center;padding-top:var(--s12);padding-bottom:var(--s12)}
.pv-brasao{height:110px;width:auto;flex-shrink:0}
.pv-hero-txt{min-width:0}
.pv-hero-txt .eyebrow{color:rgba(255,255,255,.66)}
/* 700 e entressilha normal: os titulos do site sao 600/700 sem aperto nenhum */
.pv-hero h1{color:#fff;font-size:clamp(28px,4.2vw,40px);font-weight:700;letter-spacing:var(--ls-tight);line-height:var(--lh-display);margin-top:var(--s2)}
.pv-sub{color:rgba(255,255,255,.85);font-size:var(--fs-md);margin-top:var(--s3);max-width:560px;line-height:var(--lh-relaxed)}
.pv-live{display:flex;gap:var(--s5);align-items:baseline;flex-wrap:wrap;margin-top:var(--s5)}
.pv-count{font-size:var(--fs-base);font-weight:600;color:rgba(255,255,255,.88)}
.pv-count b{font-size:var(--fs-xl);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tighter)}
.pv-atual{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.pv-atual::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ADE80;animation:pvPulse 2.2s infinite}
@keyframes pvPulse{50%{opacity:.3}}
@media(max-width:640px){
  .pv-hero-in{gap:var(--s5);padding-top:var(--s8);padding-bottom:var(--s8)}
  .pv-brasao{height:72px}
}
@media(max-width:430px){.pv-brasao{display:none}}
.pv-tools{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;padding:var(--s6) 0 var(--s2)}
.pv-search{position:relative;display:block;flex:1;min-width:230px;max-width:380px}
.pv-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut2);pointer-events:none}
.pv-search input{padding-left:38px;background:#fff}
.pv-cats{display:flex;gap:6px;flex-wrap:wrap}
.pv-catbtn{font:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--mut);background:#fff;border:1px solid var(--line2);border-radius:var(--r-pill);padding:6px 13px;cursor:pointer;transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast)}
.pv-catbtn:hover{color:var(--brand);border-color:var(--brand2)}
.pv-catbtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pv-catbtn:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
.pv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);padding:var(--s4) 0 var(--s8)}
@media(max-width:1020px){.pv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pv-grid{grid-template-columns:1fr}}
.pv-span{grid-column:1/-1}
.pv-card{display:flex;flex-direction:column;gap:var(--s2);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow);color:var(--txt);transition:transform var(--t-med),border-color var(--t-med),box-shadow var(--t-med)}
.pv-card:hover{transform:translateY(-3px);border-color:var(--brand2);box-shadow:var(--shadow-lg);text-decoration:none}
.pv-card:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
.pv-topline{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:20px}
.pv-cargo{font-size:var(--fs-md);font-weight:800;letter-spacing:var(--ls-tight);line-height:var(--lh-heading);color:var(--brand-ink)}
.pv-emp{font-size:var(--fs-sm);font-weight:600;color:var(--mut)}
.pv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s1)}
.chip.pv{background:var(--bg);color:var(--mut);border:1px solid var(--line);font-size:var(--fs-micro);white-space:normal;line-height:1.4;height:auto}
.chip.pv.sal{background:var(--brandsoft);border-color:transparent;color:var(--brand);font-weight:700}
.pv-desc{font-size:var(--fs-sm);color:var(--mut);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pv-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:auto;padding-top:var(--s3)}
.pv-sine{font-size:var(--fs-micro);color:var(--mut2);font-variant-numeric:tabular-nums}
.pv-cta{pointer-events:none} /* o cartao inteiro e o link; o "botao" e so o convite visual */
.pv-card:hover .pv-cta{background:var(--brand2);border-color:var(--brand2)}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;z-index:100;background:radial-gradient(1000px 600px at 80% -10%, var(--brandsoft2), transparent 60%), var(--bg);display:flex;padding:var(--s6);overflow:auto}
/* volta do overlay de login para o portal publico de vagas */
.login-volta{position:absolute;top:var(--s5);left:var(--s6);display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--mut);background:transparent;border:none;cursor:pointer;z-index:2;padding:6px 8px;border-radius:var(--r-md)}
.login-volta:hover{color:var(--brand);background:var(--brandsoft)}
.login-volta:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
.loginSplit{display:grid;grid-template-columns:1fr 440px;gap:var(--s12);align-items:center;max-width:1020px;width:100%;margin:auto}
.loginPitch{animation:viewIn .4s ease}
.loginPitch .lp-logo{height:40px;width:auto;margin-bottom:var(--s6);display:block}
.loginPitch h2{font-size:var(--fs-display);font-weight:800;letter-spacing:var(--ls-tighter);line-height:var(--lh-display);max-width:420px}
.loginPitch .lp-sub{color:var(--mut);margin:var(--s4) 0 var(--s6);max-width:440px;line-height:1.65;font-size:var(--fs-base)}
.lp-item{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s3) 0;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--mut);line-height:1.5;max-width:460px}
.lp-item b{color:var(--txt);font-size:var(--fs-sm)}
.lp-item .lp-n{flex-shrink:0;min-width:64px;font-size:var(--fs-lg);font-weight:800;letter-spacing:var(--ls-tighter);color:var(--accent);line-height:1.2;font-variant-numeric:tabular-nums}
@media(max-width:920px){.loginSplit{grid-template-columns:1fr;gap:var(--s6);max-width:470px}.loginPitch{display:none}}
.loginCard{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s8);box-shadow:var(--shadow-lg)}
/* .lg-mark e o logotipo do card (nao confundir com .btn.lg, modificador de tamanho) */
.loginCard .lg-mark{display:flex;justify-content:center;margin-bottom:var(--s4)}
.loginCard .lg-mark img{height:36px;width:auto}
/* no desktop o pitch ja mostra o logotipo; o do card so aparece no mobile
   (regra depois da base p/ vencer a cascata em especificidade igual) */
@media(min-width:921px){.loginCard .lg-mark{display:none}}
.loginCard h1{font-size:var(--fs-lg);margin-bottom:6px}
.loginCard .sub{font-size:var(--fs-sm);color:var(--mut);margin-bottom:var(--s5);line-height:1.6}
.loginCard label.f{margin-top:var(--s4)}
.loginCard .btn{margin-top:var(--s5)}
.login-hint{font-size:var(--fs-xs);color:var(--mut2);margin-top:var(--s4);line-height:1.5}
.login-foot{text-align:center;font-size:var(--fs-micro);color:var(--mut2);margin-top:var(--s4);line-height:1.6}
/* alternancia entrar / cadastrar minha empresa */
.lg-toggle{display:block;width:100%;text-align:center;font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--brand2);background:transparent;border:none;border-top:1px solid var(--line);margin-top:var(--s5);padding:var(--s4) 0 0;cursor:pointer}
.lg-toggle:hover{color:var(--brand);text-decoration:underline}
.su-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:420px){.su-row{grid-template-columns:1fr}}
/* os dois cards (entrar / cadastrar) vivem na mesma coluna; o JS alterna */
.loginCol{width:100%;max-width:440px;justify-self:end}
@media(max-width:920px){.loginCol{justify-self:center}}
#signupCard[hidden]{display:none !important}

/* ---------- CABECALHO das views RH ---------- */
.pagehead{padding:var(--s8) 0 var(--s5)}
.pagehead h1{margin-top:6px}
.pagehead .lead{color:var(--mut);margin-top:var(--s2);max-width:760px}
.pagehead .actions{margin-top:var(--s4);display:flex;gap:var(--s3);flex-wrap:wrap}
.pagehead .btn+h1{margin-top:var(--s4)}
.pagehead.row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;padding:var(--s6) 0 var(--s4)}

/* ---------- BANCO DE QUESTOES ---------- */
.bk-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);cursor:pointer;transition:border-color var(--t-med),transform var(--t-med);display:flex;flex-direction:column;gap:var(--s3)}
.bk-card:hover{border-color:var(--brand2);transform:translateY(-2px)}
.bk-card .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bk-card .tot{font-size:var(--fs-xl);font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.bk-card .desc{font-size:var(--fs-xs);color:var(--mut);line-height:1.5;min-height:36px}
.bk-card .mix-lbl{margin-top:auto}
.bk-mix{display:flex;height:6px;border-radius:var(--r-pill);overflow:hidden;border:1px solid var(--line)}
.bk-mix i{display:block;height:100%}
.bk-mix .f{background:var(--brand-200)} .bk-mix .m{background:var(--brand-500)} .bk-mix .d{background:var(--brand)}
.bk-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:var(--s4) 0}
.bk-filters select{width:auto;min-width:150px}
.bk-filters input[type=text]{max-width:280px}
.q-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:var(--s2);overflow:hidden}
.q-item .qh{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);cursor:pointer;width:100%;text-align:left;background:none;border:none;font:inherit}
.q-item .qh:hover{background:var(--card2)}
.q-item .qh .qh-l{flex:1;min-width:0}
.qmeta{display:flex;gap:var(--s2);align-items:center;margin-bottom:6px;flex-wrap:wrap}
.qtopic{font-size:var(--fs-xs);color:var(--mut2);font-weight:600}
.qtext{font-size:var(--fs-base);font-weight:600;line-height:1.5;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.q-item .chev{flex-shrink:0;color:var(--mut2);transition:transform var(--t-med)}
.q-item.open .chev{transform:rotate(180deg)}
.q-item .qbody{display:none;border-top:1px solid var(--line);padding:var(--s4);background:var(--card2)}
.q-item.open .qbody{display:block}
.q-full{font-size:var(--fs-base);font-weight:600;line-height:1.65;white-space:pre-wrap}
.q-alt{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:6px;font-size:var(--fs-sm);background:#fff}
.q-alt .k{font-weight:700;color:var(--mut2);flex-shrink:0}
.q-alt.ok{border-color:var(--ok);background:var(--oksoft)}
.q-alt.ok .k{color:var(--ok-ink)}
.q-just{font-size:var(--fs-sm);color:var(--mut);border-left:3px solid var(--brand2);padding:var(--s2) var(--s3);background:var(--brandsoft);border-radius:0 var(--r-md) var(--r-md) 0;margin-top:var(--s3);line-height:1.6}
.q-rub{margin-top:var(--s3)}
.q-rub li{font-size:var(--fs-sm);color:var(--mut);margin-left:18px;padding:2px 0}
.q-ref{font-size:var(--fs-xs);color:var(--mut2);margin-top:var(--s3)}

/* ---------- BUILDER ---------- */
.bd-areas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s2)}
@media(max-width:900px){.bd-areas{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.bd-areas{grid-template-columns:1fr}}
.bd-area{border:1px solid var(--line2);border-radius:var(--r-md);background:#fff;padding:var(--s3) var(--s4);cursor:pointer;text-align:left;font:inherit;transition:border-color var(--t-fast),background var(--t-fast)}
.bd-area:hover{border-color:var(--brand2)}
.bd-area.on{border-color:var(--brand);background:var(--brandsoft)}
.bd-area b{display:block;font-size:var(--fs-sm)}
.bd-area span{font-size:var(--fs-micro);color:var(--mut);display:block;margin-top:3px;line-height:1.45}
.bd-area .meta{font-size:var(--fs-xs);font-weight:700;color:var(--brand);margin-top:var(--s1)}
.bd-matrix{width:100%;border-collapse:collapse}
.bd-matrix th{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut2);padding:var(--s2) var(--s3);text-align:center;border-bottom:1px solid var(--line)}
.bd-matrix th:first-child{text-align:left}
.bd-matrix td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);text-align:center}
.bd-matrix td:first-child{text-align:left;font-weight:700;font-size:var(--fs-sm)}
.bd-matrix tr:last-child td{border-bottom:none}
.bd-matrix .subtot{font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.bd-mini{width:auto;min-width:86px;padding:5px 8px;font-size:var(--fs-xs);border-radius:var(--r-sm)}
.bd-summary{position:sticky;top:calc(var(--header-h) + var(--s4))}
.bd-sum-row{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s2) 0;border-bottom:1px dashed var(--line);font-size:var(--fs-sm)}
.bd-sum-row:last-of-type{border-bottom:none}
.bd-sum-row b{font-size:var(--fs-md)}

/* ---------- MONTAR VAGA: sequencia de passos ----------
   A tela nao tinha ordem declarada e o bloco de salvar ficava numa coluna vertical na
   lateral direita, na altura do meio do formulario: nao existia "fim". O numero no
   eyebrow marca a sequencia, e o passo 5 e um bloco horizontal de largura cheia que
   fecha a pagina. */
.passo{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:10px;font-weight:800;letter-spacing:0;margin-right:6px;
  vertical-align:middle;position:relative;top:-1px}
/* resumo na horizontal: cada linha do resumo vira um bloco de rotulo em cima e valor
   embaixo, distribuidos na largura do card em vez de empilhados numa coluna estreita */
.bd-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 var(--s4);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s2) 0}
.bd-resumo .bd-sum-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  justify-content:flex-start;border-bottom:none;padding:var(--s3) 0}
.bd-resumo .bd-sum-row>span:first-child{font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut2);line-height:1.3}
.bd-resumo .bd-sum-row b{font-size:var(--fs-lg);line-height:1.1;font-variant-numeric:tabular-nums}
/* as observacoes em <p class="tiny"> do resumo atravessam a grade inteira */
.bd-resumo>p.tiny{grid-column:1/-1;margin:0 0 var(--s2)}
.bd-fechar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);
  flex-wrap:wrap;margin-top:var(--s4)}
.bd-opcoes{flex:1;min-width:280px}
.bd-acao{text-align:right;flex-shrink:0}
.bd-acao .btn{min-width:200px}
@media(max-width:700px){
  .bd-fechar{flex-direction:column;align-items:stretch}
  .bd-acao{text-align:left}
  .bd-acao .btn{width:100%}
}
.bd-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:var(--s3) 0;border-bottom:1px dashed var(--line)}
.bd-toggle:last-of-type{border-bottom:none}
.bd-toggle .lab b{display:block;font-size:var(--fs-sm)}
.bd-toggle .lab span{font-size:var(--fs-xs);color:var(--mut)}
.switch{position:relative;width:42px;height:24px;flex-shrink:0;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--line2);border-radius:var(--r-pill);transition:background var(--t-fast)}
.switch .sl::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform var(--t-fast);box-shadow:0 1px 3px rgba(12,17,51,.2)}
.switch input:checked + .sl{background:var(--brand)}
.switch input:checked + .sl::before{transform:translateX(18px)}

/* ---------- RESULTADOS ---------- */
.res-cand{display:flex;align-items:center;gap:10px}
.res-cand .av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-xs);flex-shrink:0}
.res-score{font-weight:700;font-size:var(--fs-md);font-variant-numeric:tabular-nums;color:var(--brand-ink)}
.rep-head{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.rep-head .who{flex:1;min-width:200px}
.rep-head .av{width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-lg)}
/* Faixa de indicadores. align-items:flex-start e o que mantem os numeros na MESMA
   linha: com center, o bloco da nota final (que carrega a linha "referencia 60")
   ficava mais alto que os outros e a faixa inteira parecia torta. O que sobra
   embaixo e so a referencia, que pode mesmo pender. */
.rep-scores{display:flex;align-items:flex-start;gap:var(--s6);flex-wrap:wrap}
.rep-big{font-size:var(--fs-display);font-weight:800;letter-spacing:var(--ls-tighter);line-height:40px;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.rep-bigwrap{text-align:center;min-width:92px}
.rep-chipslot{height:40px;display:flex;align-items:center;justify-content:center}
.rep-bigbar{width:30px;height:4px;border-radius:var(--r-pill);margin:var(--s2) auto;background:var(--line2)}
.rep-bigbar.g{background:var(--ok)} .rep-bigbar.a{background:var(--warn)} .rep-bigbar.e{background:var(--danger)}
.rep-biglabel{font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut2)}
/* barra de nota: o respiro separa as linhas. O tracejado que existia aqui caia logo
   abaixo da barra colorida e virava uma segunda linha paralela em cada item - dois
   riscos horizontais para dizer a mesma coisa. */
.rep-bank{padding:var(--s4) 0}
.rep-bank:first-child{padding-top:0}
.rep-bank:last-child{padding-bottom:0}
.rep-bank.click{cursor:pointer}
.rep-bank .nm{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s2)}
.rep-bank .nm .num{font-weight:800;color:var(--txt)}
.rep-difgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.rep-dif{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);text-align:center}
.rep-dif .v{font-weight:800;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.rep-dif .v .of{font-size:var(--fs-xs);color:var(--mut2);font-weight:600}
.rep-dif .l{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut2);margin-top:2px}
.rep-open{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;margin-bottom:var(--s3);overflow:hidden}
.rep-open .oh{padding:var(--s3) var(--s4);cursor:pointer;display:flex;gap:10px;align-items:center;flex-wrap:wrap;width:100%;text-align:left;background:none;border:none;font:inherit}
.rep-open .oh:hover{background:var(--card2)}
/* No cabecalho fechado a pergunta e um resumo de 2 linhas, cortado por CSS e nao no
   texto: assim a linha da lista nao cresce, e ao ABRIR a pergunta aparece inteira em
   .rep-pergunta. Antes o enunciado era truncado em 110 caracteres no JS e o texto
   completo nao existia em lugar nenhum da tela - pergunta longa era ilegivel. */
.rep-open .oh .en{flex:1;font-size:var(--fs-sm);font-weight:600;min-width:220px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.rep-pergunta{font-size:var(--fs-sm);background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r-md);padding:var(--s3);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--txt);margin-bottom:var(--s4)}
.rep-open .oh .sc{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rep-open .oh .sc.ok{color:var(--ok-ink)} .rep-open .oh .sc.warn{color:var(--warn-ink)} .rep-open .oh .sc.danger{color:var(--danger)}
.rep-open .ob{display:none;border-top:1px solid var(--line);padding:var(--s4);background:var(--card2)}
.rep-open.open .ob{display:block}
.rep-ans{font-size:var(--fs-sm);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);line-height:1.6;white-space:pre-wrap}
.rep-ai{margin-top:var(--s3);border-left:3px solid var(--gold);background:var(--goldsoft);border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s3);font-size:var(--fs-sm);line-height:1.6}
.rep-ai .sc{font-weight:700;color:var(--gold-ink)}
.rep-proctor-grid{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.rep-proctor-grid img{width:104px;height:78px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line2)}
.rep-flag{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);padding:6px 0}
.rep-flag .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rep-flag .dot.g{background:var(--ok)} .rep-flag .dot.a{background:var(--warn)} .rep-flag .dot.e{background:var(--danger)}
/* ---------- ENTREVISTA: blocos do relatorio ----------
   A conversa e a parte mais lida do relatorio e era a mais poluida: caixa dentro
   de caixa, quatro leituras empilhadas numa coluna so e um vazio do lado direito.
   Aqui cada coisa tem UMA forma: frase-sintese em destaque, notas em barra,
   momento-chave como citacao e as quatro leituras numa grade que ocupa a largura. */
.iv-lead{font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--txt);max-width:76ch}
/* momento-chave: e uma CITACAO, entao tem cara de citacao (filete + aspa), nao de caixa */
.iv-moment{position:relative;padding:var(--s4) var(--s5);border-left:3px solid var(--marca);
  background:var(--brandsoft);border-radius:0 var(--r-md) var(--r-md) 0;font-size:var(--fs-base);
  line-height:var(--lh-relaxed)}
.iv-moment::before{content:"\201C";position:absolute;left:10px;top:-2px;font-family:var(--display);
  font-size:34px;line-height:1;color:var(--marca);opacity:.32}
.iv-moment span{display:block;padding-left:var(--s4)}
/* leitura comportamental: 4 dimensoes fixas, grade de 2 - a evidencia fica junto da
   nota, sem accordion e sem caixa aninhada */
.beh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media(max-width:820px){.beh-grid{grid-template-columns:1fr}}
.beh{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);background:var(--card)}
.beh-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.beh-nm{font-size:var(--fs-sm);font-weight:700;color:var(--txt)}
.beh-sc{font-size:var(--fs-lg);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.beh-sc.ok{color:var(--ok-ink)} .beh-sc.warn{color:var(--warn-ink)} .beh-sc.danger{color:var(--danger)}
.beh-bar{height:5px;border-radius:var(--r-pill);background:var(--card2);margin:var(--s3) 0}
.beh-bar>i{display:block;height:100%;border-radius:var(--r-pill);transition:width .6s ease}
.beh-bar>i.g{background:var(--ok)} .beh-bar>i.a{background:var(--warn)} .beh-bar>i.e{background:var(--danger)}
.beh-ev{font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-body)}
/* rodape da conversa: integridade e confianca sao nota de rodape, nao secao */
.iv-foot{display:flex;gap:var(--s5);flex-wrap:wrap;align-items:flex-start;
  border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s6)}
.iv-foot>div{flex:1;min-width:240px}
/* ---------- INTEGRIDADE VISUAL: leitura da IMAGEM da chamada ----------
   Era uma linha perdida no rodape e por isso ninguem sabia que a feature existia.
   Aqui e SECAO, com a fonte declarada no topo (imagem, nao fala), a nota com a escala
   0-100 visivel, os cinco sinais e - quando aparece mais alguem em cena - um destaque
   que nao da para nao ver. Sem imagem o bloco continua na tela e explica o porque. */
.iv-vis{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);background:var(--card2)}
.iv-vis-head{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:flex-start;justify-content:space-between;margin-bottom:var(--s4)}
.iv-vis-head>div:first-child{min-width:240px;flex:1}
.iv-fonte{color:var(--mut);max-width:70ch;margin-top:2px}
.iv-fonte b{color:var(--txt);font-weight:700}
/* ausencia de leitura: caixa neutra e explicita, nunca um bloco escondido */
.iv-none{border:1px dashed var(--line2);border-radius:var(--r-md);background:var(--card);padding:var(--s4)}
.iv-none>b{font-size:var(--fs-sm);color:var(--txt)}
/* terceiro em cena: o achado mais forte que a leitura de imagem produz */
.iv-alert{display:flex;gap:var(--s3);align-items:flex-start;border:1px solid var(--danger);
  border-left-width:4px;border-radius:var(--r-md);background:var(--dangersoft);
  padding:var(--s4);margin-bottom:var(--s4)}
.iv-alert .ic{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--danger);color:#fff;
  font-weight:800;font-size:14px;line-height:22px;text-align:center}
.iv-alert b{color:var(--danger);font-size:var(--fs-base)}
/* nota de atencao COM a escala visivel: 88 sozinho nao diz de quanto e a regua */
.iv-aten{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s4)}
.iv-aten-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.iv-aten-top>span:first-child{font-size:var(--fs-sm);font-weight:700;color:var(--txt)}
.iv-aten-top small{display:block;font-weight:400;color:var(--mut);font-size:var(--fs-xs);margin-top:2px}
.iv-aten-n{font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.iv-aten-n.ok{color:var(--ok-ink)} .iv-aten-n.warn{color:var(--warn-ink)} .iv-aten-n.danger{color:var(--danger)}
.iv-aten-n small{font-size:var(--fs-sm);font-weight:600;color:var(--mut)}
.iv-aten-sc{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--mut2);font-variant-numeric:tabular-nums}
/* os cinco sinais: dois por linha, e o nao avaliado fica APAGADO mas visivel */
.iv-sig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(max-width:820px){.iv-sig-grid{grid-template-columns:1fr}}
.iv-sig{display:flex;gap:var(--s3);align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3)}
.iv-sig.off{background:transparent;border-style:dashed}
.iv-sig>div{min-width:0}
.iv-sig .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px}
.iv-sig .dot.g{background:var(--ok)} .iv-sig .dot.a{background:var(--warn)}
.iv-sig .dot.e{background:var(--danger)} .iv-sig .dot.n{background:var(--line2)}
.iv-sig-t{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:baseline}
.iv-sig-t b{font-size:var(--fs-sm);color:var(--txt)}
.iv-sig-st{font-size:var(--fs-xs);color:var(--mut2);text-transform:uppercase;letter-spacing:.04em}
.iv-sig-nota{font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-body);margin-top:2px;overflow-wrap:anywhere}
.iv-sig.off .iv-sig-nota{color:var(--mut2)}
/* ranking e comparativo: o achado de imagem nao pode viver so dentro do dossie */
.iv-rank{font-size:var(--fs-xs);font-weight:700;margin-top:2px;white-space:nowrap}
.iv-rank.danger{color:var(--danger)} .iv-rank.warn{color:var(--warn-ink)}
.iv-cmp-sub{display:block;font-weight:400;color:var(--mut2);font-size:var(--fs-xs)}
.rank-pos{font-weight:700;color:var(--mut2);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.rank-pos.top{color:var(--brand);font-weight:800}
.cv-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s2) var(--s3);padding:var(--s2) 0;border-bottom:1px dashed var(--line);font-size:var(--fs-sm)}
.cv-row:last-child{border-bottom:none}
.cv-row .who{min-width:0}
.cv-row .acts{display:flex;gap:6px;align-items:center;flex-shrink:0}

.rep-chat{display:flex;flex-direction:column;gap:var(--s3);max-height:320px;overflow-y:auto;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3)}

/* ---------- COMPARACAO DE CANDIDATOS ---------- */
.cmp-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s2)}
.cmp-op{display:flex;align-items:center;gap:var(--s3);border:1px solid var(--line2);border-radius:var(--r-md);background:#fff;padding:var(--s3);cursor:pointer;text-align:left;font:inherit;transition:border-color var(--t-fast),background var(--t-fast)}
.cmp-op:hover{border-color:var(--brand2)}
.cmp-op.on{border-color:var(--brand);background:var(--brandsoft)}
.cmp-op .av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-xs);flex-shrink:0}
/* .info, .nm e .sub sao <span>: sem display:block eles ficavam INLINE, entao o nome e a
   vaga saiam na mesma linha e a nota era desenhada por cima do texto
   ("Vincenzo RomitoAuxiliar de Pr27ucao"). O ellipsis tambem nao funciona em inline.
   E .sc precisa de flex-shrink:0, senao a nota e comprimida pelo nome comprido. */
.cmp-op .info{min-width:0;flex:1;display:block}
.cmp-op .nm{display:block;font-size:var(--fs-sm);font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-op .sub{display:block;font-size:var(--fs-micro);color:var(--mut2);line-height:1.35;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-op .sc{flex-shrink:0;font-weight:800;font-size:var(--fs-md);font-variant-numeric:tabular-nums;color:var(--brand-ink);line-height:1}
.cmp-op.on .sc{color:var(--brand)}
/* A tabela do comparativo usa table-layout FIXO de proposito. Com layout automatico,
   a coluna de um candidato de nome longo esticava e as outras encolhiam: as colunas
   ficavam de larguras diferentes e a leitura lado a lado, que e o proposito da tela,
   se perdia. Com layout fixo a primeira coluna tem largura declarada e o espaco que
   sobra e dividido em partes IGUAIS entre os candidatos, seja o nome curto ou longo. */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
table.cmp{width:100%;min-width:560px;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
table.cmp col.metrica{width:34%}
@media(min-width:900px){table.cmp col.metrica{width:26%}}
table.cmp th,table.cmp td{padding:var(--s3);border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
/* rotulo da metrica fica GRUDADO na esquerda: em 4 candidatos a tabela rola na
   horizontal, e sem isto o nome da linha saia da tela e a coluna de numeros
   ficava sem legenda */
table.cmp th:first-child,table.cmp td:first-child{position:sticky;left:0;z-index:2;text-align:left;font-weight:600;color:var(--mut);background:var(--card);
  box-shadow:1px 0 0 var(--line)}
table.cmp tbody tr:nth-child(even) td{background:var(--bg2)}
table.cmp tbody tr:hover td{background:var(--brandsoft)}
table.cmp thead th{background:var(--card);font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut2);vertical-align:bottom;padding-bottom:var(--s3)}
table.cmp thead th:first-child{z-index:3}
/* cabecalho do candidato: inicial + nome. O nome quebra em ate 2 linhas e ganha
   reticencias no que passar, entao um nome comprido nao muda a altura nem a largura
   da coluna - o titulo completo continua disponivel no title do elemento. */
.cmp-cand{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:64px;justify-content:flex-end}
.cmp-cand .av{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:var(--fs-xs);flex-shrink:0;letter-spacing:0;text-transform:none}
.cmp-cand .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--txt);font-size:var(--fs-sm);text-transform:none;letter-spacing:0;font-weight:700;line-height:1.25;
  overflow-wrap:anywhere;max-width:100%}
table.cmp tr.sec td{background:var(--card2);font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut2);text-align:left}
table.cmp tbody tr.sec:hover td{background:var(--card2)}
table.cmp td.num{font-variant-numeric:tabular-nums}
/* o melhor da linha vira pilula, e nao fundo da celula inteira: com zebra e hover
   no lugar, um fundo verde na celula competia com as duas outras camadas */
table.cmp td.top .v{display:inline-block;min-width:2.6em;padding:2px var(--s2);border-radius:var(--r-pill);
  background:var(--oksoft);color:var(--ok-ink);font-weight:800}
table.cmp tr.acoes td{border-bottom:none;padding-top:var(--s4)}
table.cmp tbody tr:last-child td{border-bottom:none}

/* ---------- QUESTAO PERSONALIZADA POR VAGA ---------- */
.nq-alts{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.nq-alt{display:flex;align-items:center;gap:var(--s2)}
.nq-alt input{flex:1;min-width:0}
/* o botao da letra E a marcacao da correta: sem radio solto, um clique resolve */
.nq-alt .mk{width:38px;height:38px;flex-shrink:0;border-radius:var(--r-md);cursor:pointer;
  border:1px solid var(--line2);background:#fff;color:var(--mut);font:inherit;font-weight:800;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.nq-alt .mk:hover{border-color:var(--brand2);color:var(--brand)}
.nq-alt.on .mk{background:var(--ok);border-color:var(--ok);color:#fff}
.nq-alt.on input{border-color:var(--ok)}
.nq-rub{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.nq-erros{background:var(--warnsoft);border:1px solid var(--warn);border-radius:var(--r-md);padding:var(--s3) var(--s4)}
.nq-erros b{display:block;font-size:var(--fs-sm);color:var(--warn-ink)}
.nq-erros ul{margin:var(--s2) 0 0;padding-left:18px}
.nq-erros li{font-size:var(--fs-sm);color:var(--warn-ink);line-height:var(--lh-body)}
.q-item .qh .acts{display:flex;gap:6px;align-items:center;flex-shrink:0}

/* ---------- REFERENCIAS ---------- */
.ref-bank h3{display:flex;align-items:center;gap:10px;margin-bottom:var(--s2);font-size:var(--fs-base)}
.ref-bank ul{margin:6px 0 0 18px}
.ref-bank li{font-size:var(--fs-sm);color:var(--mut);padding:3px 0;line-height:1.55}
.metho-step{display:flex;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px dashed var(--line)}
.metho-step:last-child{border-bottom:none}
.metho-step .n{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);flex-shrink:0}
.metho-step b{display:block;font-size:var(--fs-base)}
.metho-step p{font-size:var(--fs-sm);color:var(--mut);margin-top:3px;line-height:1.6}
.plist p{font-size:var(--fs-sm);color:var(--mut);padding:5px 0;line-height:1.6}

/* ---------- INTEGRACAO ---------- */
.api-ep{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;margin-bottom:var(--s3);overflow:hidden}
.api-ep .eh{display:flex;align-items:center;gap:10px;padding:var(--s3) var(--s4);flex-wrap:wrap}
.api-ep .method{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps);border-radius:var(--r-sm);padding:2px 8px}
.api-ep .method.post{background:var(--oksoft);color:var(--ok-ink)}
.api-ep .method.get{background:var(--brandsoft);color:var(--brand)}
.api-ep .method.hook{background:var(--brandsoft2);color:var(--brand)}
.api-ep code.path{font-size:var(--fs-sm);font-weight:600}
.api-ep .ed{font-size:var(--fs-xs);color:var(--mut);padding:0 var(--s4) var(--s3);line-height:1.6}
pre.code{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;background:var(--code-bg);color:var(--code-txt);border-radius:var(--r-md);padding:var(--s4);overflow-x:auto;margin:0}
.api-ep pre.code{margin:0 var(--s4) var(--s4)}
pre.code.scroll{max-height:340px;overflow:auto}

/* ---------- CANDIDATO / PLAYER ---------- */
#cand{position:fixed;inset:0;z-index:90;background:var(--bg);overflow:auto;display:none}
#cand.on{display:block}
.cd-shell{max-width:900px;margin:0 auto;padding:var(--s6) var(--gutter) var(--s12)}
.cd-topbar{position:sticky;top:0;z-index:5;background:var(--bg);padding:var(--s3) 0;display:flex;align-items:center;gap:var(--s4);border-bottom:1px solid var(--line);flex-wrap:wrap;min-height:56px}
.cd-topbar img{height:24px;width:auto}
.cd-toplabel{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut)}
.cd-topbar>.btn{margin-left:auto}
.cd-timer{margin-left:auto;font-weight:700;font-size:var(--fs-md);font-variant-numeric:tabular-nums;background:#fff;border:1px solid var(--line2);border-radius:var(--r-md);height:34px;display:inline-flex;align-items:center;padding:0 var(--s3)}
.cd-timer.low{color:var(--danger);border-color:var(--danger)}
.cd-prog{width:100%;height:5px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin-top:var(--s3)}
.cd-prog i{display:block;height:100%;background:var(--brand);border-radius:var(--r-pill);transition:width .3s}
.cd-meta{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin:var(--s4) 0 var(--s3)}
.cd-meta .pos{font-size:var(--fs-sm);font-weight:700;color:var(--brand)}
.cd-q{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--shadow);animation:viewIn var(--t-med) ease both}
.cd-q .en{font-size:var(--fs-md);font-weight:400;line-height:var(--lh-relaxed);white-space:pre-wrap}
.cd-alts{display:grid;gap:var(--s2);margin-top:var(--s5)}
.cd-alt{display:flex;gap:var(--s3);align-items:flex-start;border:1px solid var(--line2);border-radius:var(--r-md);background:#fff;padding:var(--s3) var(--s4);cursor:pointer;font:inherit;font-size:var(--fs-base);text-align:left;transition:border-color var(--t-fast),background var(--t-fast);line-height:1.55}
.cd-alt:hover{border-color:var(--brand2)}
.cd-alt.sel{border-color:var(--brand);background:var(--brandsoft)}
.cd-alt .k{font-weight:700;color:var(--mut2);flex-shrink:0}
.cd-alt.sel .k{color:var(--brand)}
.cd-nav{display:flex;gap:10px;margin-top:var(--s5);align-items:center;flex-wrap:wrap}
.cd-nav .sp{flex:1}
.cd-grid{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.cd-dot{width:32px;height:32px;border-radius:var(--r-md);border:1px solid var(--line2);background:#fff;font:inherit;font-size:var(--fs-xs);font-weight:700;color:var(--mut);cursor:pointer;font-variant-numeric:tabular-nums}
.cd-dot.done{background:var(--brandsoft);border-color:var(--brand2);color:var(--brand)}
.cd-dot.cur{background:var(--brand);border-color:var(--brand);color:#fff}
.cd-dot.mark{box-shadow:0 0 0 2px var(--warn)}
@media(pointer:coarse){.cd-dot{width:40px;height:40px}}
.cd-proctor{position:fixed;right:18px;bottom:18px;width:150px;border-radius:var(--r-md);overflow:hidden;border:2px solid var(--brand);background:var(--brand-ink);z-index:8;box-shadow:var(--shadow-pop)}
.cd-proctor video{display:block;width:100%;height:100%;transform:scaleX(-1)}
.cd-proctor .lbl{position:absolute;left:0;right:0;bottom:0;background:var(--scrim);color:#fff;font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;text-align:center;padding:4px}
.cd-proctor .rec{position:absolute;top:6px;left:6px;width:9px;height:9px;border-radius:50%;background:var(--danger);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.cd-consent li{margin:0 0 var(--s2) 18px;font-size:var(--fs-sm);color:var(--mut);line-height:1.6}
/* dois campos lado a lado (cidade/UF, pretensao/disponibilidade). No celular
   vira uma coluna: campo de 50% de 360px nao cabe rotulo nenhum. */
.cd-dupla{display:grid;grid-template-columns:1fr 100px;gap:var(--s3)}
.cd-dupla>div>label.f{margin-top:0}
@media(max-width:520px){.cd-dupla{grid-template-columns:1fr}}
/* anexo do curriculo: o input de arquivo nativo nao aceita o mesmo tratamento
   dos outros campos, entao ganha moldura tracejada em vez de fingir ser input */
input[type=file]{
  font:inherit;font-size:var(--fs-sm);color:var(--mut);width:100%;
  background:var(--card2);border:1px dashed var(--line2);border-radius:var(--r-md);padding:12px;cursor:pointer;
}
input[type=file]:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px var(--brandsoft)}
input[type=file]::file-selector-button{
  font:inherit;font-size:var(--fs-sm);font-weight:600;margin-right:var(--s3);cursor:pointer;
  background:var(--cta);color:var(--cta-ink);border:1px solid var(--cta);border-radius:var(--r-sm);padding:6px 12px;
}
.cd-cv-ok{font-size:var(--fs-sm);color:var(--ok-ink);background:var(--oksoft);border-radius:var(--r-md);padding:10px 12px}
.cd-camframe{width:100%;max-width:380px;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--brand-ink);border:1px solid var(--line2);margin:var(--s4) auto}
.cd-camframe video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cd-finish{max-width:560px;margin:var(--s12) auto;text-align:center}
.cd-finish .okc{width:64px;height:64px;border-radius:50%;background:var(--oksoft);display:grid;place-items:center;margin:0 auto var(--s4);color:var(--ok-ink)}
.cd-finish h1+p,.cd-stage h1+p{margin-top:10px;line-height:var(--lh-relaxed)}
.cd-finish>.btn,.cd-stage>.btn{margin-top:var(--s4)}
.cd-finish .tiny{margin-top:var(--s3)}
.cd-finish .spin{margin:0 auto var(--s4)}
.cd-stage{max-width:640px;margin:var(--s8) auto}
.cd-stage.narrow{max-width:560px;text-align:center}
.cd-openarea textarea{min-height:170px;margin-top:var(--s4);font-size:var(--fs-base)}
.cd-charcount{font-size:var(--fs-micro);color:var(--mut2);text-align:right;margin-top:var(--s1)}

/* ---------- entrevista em video (avatar) ---------- */
.cd-iv-check{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.cd-iv-check li{position:relative;padding-left:var(--s5);font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-body)}
.cd-iv-check li::before{content:"";position:absolute;left:6px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--brand)}
/* link da propria candidatura, mostrado ao liberar a entrevista: e o endereco de volta
   para quem precisar sair antes de falar com a entrevistadora */
.cd-iv-link{color:var(--brand);font-weight:600;word-break:break-all}
.cd-iframe{display:block;width:100%;height:620px;border:0;border-radius:var(--r-md);background:#000;margin-top:var(--s5)}
@media(max-width:720px){.cd-iframe{height:460px}}
.cd-stage .err{color:var(--danger);min-height:18px}
/* unidade discreta dentro do numerão do KPI (usado na aba da entrevistadora) */
.kpi .v .of{font-size:var(--fs-sm);color:var(--mut2);font-weight:600;margin-left:2px}

/* ---------- resposta falada (ingles) ---------- */
.cd-voz{margin-top:var(--s5);text-align:center}
.cd-voz-info{font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-body)}
.cd-rec-time{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);font-weight:700;color:var(--danger);font-variant-numeric:tabular-nums}
.cd-rec-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);animation:blink 1.4s infinite}
.cd-rec-play{display:block;width:100%;max-width:420px;margin:var(--s4) auto 0}
.cd-voz-status{font-size:var(--fs-sm);color:var(--mut);margin-top:var(--s3);min-height:20px}
/* o atributo hidden do HTML precisa vencer o display das regras acima (player, cronometro, acoes),
   senao a questao de voz abre com player vazio, cronometro piscando e botoes ja visiveis */
.cd-voz [hidden],.cd-proj [hidden]{display:none!important}

/* ---------- projeto de IA ao vivo (chat dentro da prova) ---------- */
.cd-proj{margin-top:var(--s5)}
.cd-chat{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card2);padding:var(--s4);max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s3)}
.cd-chat-vazio{font-size:var(--fs-sm);color:var(--mut2);text-align:center;padding:var(--s5) 0}
.cd-msg{display:flex;flex-direction:column;gap:2px;max-width:88%}
.cd-msg .who{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut2)}
.cd-msg .txt{font-size:var(--fs-sm);line-height:var(--lh-body);white-space:pre-wrap;border-radius:var(--r-md);padding:var(--s3)}
.cd-msg.user{align-self:flex-end;align-items:flex-end}
.cd-msg.user .txt{background:var(--brandsoft);color:var(--txt)}
.cd-msg.assistant .txt{background:#fff;border:1px solid var(--line)}
.cd-chat-in{display:flex;gap:var(--s2);align-items:flex-end;margin-top:var(--s3)}
.cd-chat-in textarea{min-height:0;font-size:var(--fs-sm)}
.cd-chat-in .btn{flex-shrink:0}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:var(--fs-sm);color:var(--mut);line-height:1.55;margin-top:var(--s4)}
.check input{margin-top:2px}

/* modais do player */
.cd-modal{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--s6)}
.cd-modal[hidden]{display:none}
.cd-modal.dim{background:var(--scrim-light)}
.cd-modal.global{z-index:150}
.cd-modal .box{background:#fff;border-radius:var(--r-lg);max-width:440px;width:100%;padding:var(--s8);text-align:center}
.cd-modal h2{font-size:var(--fs-md)}
.cd-modal .msg{margin-top:10px;font-size:var(--fs-base);line-height:1.6;color:var(--mut)}
.cd-modal .meta{margin-top:var(--s2);font-size:var(--fs-xs);color:var(--mut2);line-height:1.5}
.cd-modal .err{margin-top:var(--s2);font-size:var(--fs-xs);color:var(--danger)}
.cd-modal .btn{margin-top:var(--s4)}
.cd-modal .acts{display:flex;gap:10px;justify-content:center;margin-top:var(--s4);flex-wrap:wrap}
.cd-modal .acts .btn{margin-top:0}

/* ---------- PRINT (Exportar PDF do relatorio) ---------- */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  header.app,footer.app,.noprint,#cand,.cd-proctor{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;break-inside:avoid}
  .rep-open .ob{display:block !important}
  .rep-open .oh{cursor:default}
  /* no papel nao existe "abrir": o enunciado do cabecalho sai inteiro */
  .rep-open .oh .en{display:block !important;-webkit-line-clamp:none !important;overflow:visible !important}
  /* a conversa da entrevista fica escondida na tela (atras do botao) mas ENTRA no PDF:
     o relatorio impresso e o que fica arquivado, e sem o transcript ele perde a prova */
  [data-conversa][hidden]{display:block !important}
  .grid2{grid-template-columns:1fr !important}
  .beh,.rep-bank,.comp-row,.iv-moment{break-inside:avoid}
  .iv-vis,.iv-sig,.iv-alert,.iv-aten,.iv-none{break-inside:avoid}
  .iv-vis{background:#fff}
  /* comparativo no papel: sem rolagem e sem coluna grudada (nao existe scroll no PDF),
     e o nome do candidato sai INTEIRO - o PDF e o que vai para a conversa com o gestor */
  .cmp-wrap{overflow:visible !important;border:none !important}
  table.cmp{min-width:0 !important}
  table.cmp th:first-child,table.cmp td:first-child{position:static !important;box-shadow:none !important}
  .cmp-cand{min-height:0}
  .cmp-cand .nm{display:block !important;-webkit-line-clamp:none !important;overflow:visible !important}
  @page{margin:14mm}
}

/* ---------- calculadora de tempo do time (aba Seleção) ---------- */
.roi .roi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);margin-top:var(--s4)}
@media(max-width:1040px){.roi .roi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.roi .roi-grid{grid-template-columns:1fr 1fr}}
.roi-f{display:flex;flex-direction:column;gap:6px}
.roi-f>span:first-child{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut2);line-height:1.3;min-height:26px}
.roi-in{position:relative;display:block}
.roi-in input{width:100%;font:inherit;font-size:var(--fs-md);font-weight:700;font-variant-numeric:tabular-nums;color:var(--txt);
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r-md);padding:9px 34px 9px 11px}
.roi-in input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brandsoft2)}
.roi-in i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;font-size:var(--fs-xs);font-weight:600;color:var(--mut2);pointer-events:none}
.roi-out{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s5)}
@media(max-width:820px){.roi-out{grid-template-columns:1fr 1fr}}
.roi-kpi{background:var(--card2);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--r-md);padding:var(--s4)}
.roi-kpi .v{display:block;font-size:var(--fs-xl);font-weight:800;letter-spacing:var(--ls-tighter);line-height:1.1;font-variant-numeric:tabular-nums;color:var(--brand)}
.roi-kpi .l{display:block;font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut2);margin-top:6px;line-height:1.35}
.roi-kpi.hero{background:var(--brand);border-color:var(--brand);border-top-color:var(--accent)}
.roi-kpi.hero .v{color:#fff}
.roi-kpi.hero .l{color:rgba(255,255,255,.82)}

/* ============================================================
   BLOCOS DO FLUXO DE CANDIDATURA E PAPEIS DO PAINEL
   ============================================================ */

/* ---------- visibilidade por papel (admin = RH Corporativo) ---------- */
/* marcador de elementos exclusivos do login master; o JS controla o
   atributo hidden, o CSS so garante que hidden sempre vence */
.admin-only[hidden]{display:none !important}
/* Unidades e Contas sao abas de administrador, mas nao ganham marcacao propria: elas
   tinham cor e BORDA de destaque quando NAO selecionadas, e o quadrado em volta competia
   com a pilula laranja da aba realmente aberta - duas abas pareciam ativas ao mesmo tempo.
   Sem regra aqui, elas herdam exatamente o estado das demais (nav.tabs button e .on). */

/* badge da empresa logada no header */
#empresaBadge{max-width:200px;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:1.6}
@media(max-width:1040px){#empresaBadge{display:none}}

/* ---------- cartao publico da vaga (tela de entrada do candidato) ---------- */
/* superficie escura institucional: e a primeira tela que o candidato ve,
   entao ela carrega a identidade (marinho + filete do brasao) sozinha */
.vaga-hero{position:relative;overflow:hidden;background:var(--marca);border-radius:var(--r-lg);padding:var(--s8) var(--s6);color:#fff;box-shadow:var(--shadow-lg)}
.vaga-hero::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 68%);pointer-events:none}
.vaga-hero>img{display:block;height:52px;width:auto;margin-bottom:var(--s4);filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.vaga-hero .eyebrow{color:rgba(255,255,255,.72)}
.vaga-hero h1{color:#fff;font-size:var(--fs-display);letter-spacing:var(--ls-tighter);line-height:var(--lh-display);margin-top:var(--s2)}
.vaga-hero .vh-emp{font-size:var(--fs-md);font-weight:600;color:rgba(255,255,255,.88);margin-top:var(--s2)}
.vaga-hero p{color:rgba(255,255,255,.82);line-height:var(--lh-relaxed)}
.vaga-hero .desc{margin-top:var(--s4);max-width:640px;font-size:var(--fs-base)}
/* Beneficios e requisitos em bloco legivel, e nao em chip. Como chip o texto era cortado
   em 80 caracteres e o resto nao existia em nenhum lugar da tela: o candidato decide se
   vale a pena se candidatar justamente por essa informacao. */
.vaga-bloco{margin-top:var(--s5);max-width:640px;text-align:left;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);border-radius:var(--r-md);padding:var(--s4) var(--s5)}
.vaga-bloco .rot{display:block;font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:var(--s2)}
.vaga-bloco ul{margin:0;padding:0;list-style:none}
.vaga-bloco li{position:relative;padding-left:16px;margin-bottom:6px;font-size:var(--fs-sm);
  color:rgba(255,255,255,.94);line-height:var(--lh-body)}
.vaga-bloco li:last-child{margin-bottom:0}
/* amarelo, nao --accent: o hero e navy e --accent virou o MESMO navy quando a
   paleta passou a ser a do site - marcador navy sobre fundo navy nao existe */
.vaga-bloco li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--cta)}
.vaga-hero .vaga-bloco p{margin:0;font-size:var(--fs-sm);color:rgba(255,255,255,.94)}
/* o CTA sobre o hero navy e o amarelo da casa, igual ao site (nao o branco que
   estava aqui, que era a solucao generica de "botao sobre foto") */
.vaga-hero .btn{margin-top:var(--s6)}
.vaga-hero .tiny{color:rgba(255,255,255,.6)}
.vaga-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.vaga-hero .vaga-chips .chip,.vaga-chips .chip.vh{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.18);font-size:var(--fs-xs);padding:5px 12px;white-space:normal;max-width:100%;line-height:1.45;height:auto}
@media(max-width:620px){.vaga-hero{padding:var(--s6) var(--s5)}.vaga-hero h1{font-size:var(--fs-xl)}}

/* ---------- mock de WhatsApp (etapa de candidatura) ---------- */
/* um celular de verdade no meio da tela: moldura escura arredondada,
   cabecalho da conversa e bolhas. As cores do WhatsApp (#075E54 e
   #DCF8C6) existem SOMENTE dentro deste mock. */
.wa-phone{position:relative;width:100%;max-width:340px;margin:var(--s6) auto;background:var(--ink);border-radius:38px;padding:20px 10px 20px;box-shadow:var(--shadow-pop),inset 0 0 0 2px rgba(255,255,255,.06)}
.wa-phone::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.18)}
.wa-phone::after{content:"";position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:96px;height:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.22)}
.wa-scr{border-radius:24px;overflow:hidden;display:flex;flex-direction:column;background:#ECE5DD}
.wa-head{display:flex;align-items:center;gap:10px;background:#075E54;color:#fff;padding:10px 14px}
.wa-head img,.wa-head .wa-av{width:32px;height:32px;border-radius:50%;background:#fff;object-fit:contain;padding:3px;flex-shrink:0}
.wa-head .wa-quem{min-width:0;line-height:1.25}
.wa-head .wa-quem b{display:block;font-size:var(--fs-sm);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-head .wa-quem span{font-size:var(--fs-micro);color:rgba(255,255,255,.75)}
.wa-chat{display:flex;flex-direction:column;gap:8px;padding:14px 12px 16px;min-height:230px;background:#ECE5DD;background-image:radial-gradient(rgba(7,94,84,.045) 1px,transparent 1.5px);background-size:18px 18px}
.wa-dia{align-self:center;background:rgba(255,255,255,.85);color:#54656F;font-size:var(--fs-micro);font-weight:600;letter-spacing:.02em;padding:3px 10px;border-radius:7px;box-shadow:var(--shadow)}
.wa-bubble{position:relative;align-self:flex-start;max-width:88%;background:#fff;color:#111B21;border-radius:2px 10px 10px 10px;padding:8px 10px;font-size:var(--fs-sm);line-height:1.5;box-shadow:0 1px 1px rgba(11,20,26,.13)}
.wa-bubble.sent{align-self:flex-end;background:#DCF8C6;border-radius:10px 2px 10px 10px}
.wa-bubble b{font-weight:700}
.wa-bubble .wa-hora{display:block;font-size:10px;color:rgba(17,27,33,.45);text-align:right;margin-top:3px;font-variant-numeric:tabular-nums}
/* botao de acao dentro da bolha, como mensagem de template do WhatsApp */
.wa-bubble .btn{display:flex;width:100%;justify-content:center;margin-top:8px;background:#075E54;border-color:#075E54;color:#fff;font-size:var(--fs-sm);padding:9px 12px}
.wa-bubble .btn:hover{background:#0A7265;border-color:#0A7265}
/* microcopy fora do aparelho ("em producao este link chega no seu WhatsApp") */
.wa-nota{max-width:340px;margin:0 auto;text-align:center;font-size:var(--fs-xs);color:var(--mut2);line-height:1.6}

/* ---------- barras DISC (relatorio e comparacao) ---------- */
/* barra do candidato em marinho + marcador do alvo da vaga em vermelho
   do brasao: da p/ ler o encaixe fator a fator num relance */
.disc-row{display:grid;grid-template-columns:minmax(96px,132px) 1fr 42px;gap:var(--s3);align-items:center;padding:7px 0}
.disc-row .dl{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;min-width:0}
.disc-row .dl i{font-style:normal;width:24px;height:24px;border-radius:7px;background:var(--brandsoft);color:var(--brand);font-weight:800;font-size:var(--fs-xs);display:grid;place-items:center;flex-shrink:0}
.disc-row .track{position:relative;height:10px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--line)}
.disc-row .fill{position:absolute;top:0;bottom:0;left:0;border-radius:var(--r-pill);background:var(--brand);transition:width .5s ease}
.disc-row .val{font-weight:700;font-size:var(--fs-sm);text-align:right;font-variant-numeric:tabular-nums}
/* relatorio individual usa .rep-bank.disc-row (label em cima, barra embaixo):
   anula o grid de 3 colunas acima, que espremia o rotulo do fator */
.rep-bank.disc-row{display:block}
.rep-bank.disc-row .nm{gap:var(--s3)}
.disc-alvo{position:absolute;top:-4px;bottom:-4px;width:3px;border-radius:2px;background:var(--accent);transform:translateX(-50%);box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.disc-alvo::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--accent)}
.disc-leg{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--mut2);margin-top:var(--s2)}
.disc-leg i{font-style:normal;display:inline-block;width:3px;height:12px;border-radius:2px;background:var(--accent)}

/* ---------- ENTREVISTA POR VOZ: overlay em tela cheia com a orb ---------- */
/* superficie propria, sempre escura (e uma ligacao imersiva): o quase-preto NEUTRO da
   paleta (#0F0F11, a base do --scrim). Vermelho satura rapido, e qualquer temperatura
   no fundo faria a orb vibrar. Classes voz-* preservadas da engine portada da
   simulacao de atendimento por voz (voz-entrevista.js). */
#vozOverlay{position:fixed;inset:0;z-index:9999;background:#0F0F11;font-family:inherit}
#vozCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.voz-top{position:absolute;top:calc(env(safe-area-inset-top) + 26px);left:0;right:0;text-align:center;pointer-events:none}
.voz-eyebrow{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#9A9AA2}
.voz-nome{font-size:19px;font-weight:700;color:#F5F5F7;margin-top:6px}
.voz-sub{font-size:12.5px;color:#A8A8B0;margin-top:2px}
/* dica: so aparece quando algo precisa ser dito (erro/permissao). Numa ligacao nao ha legenda. */
/* rotulo da vez: fica logo acima da dica, discreto, e nunca some do lugar (min-height) para
   nao empurrar o resto quando troca de texto */
.voz-estado{position:absolute;left:8%;right:8%;bottom:calc(env(safe-area-inset-bottom) + 156px);text-align:center;
  font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#9A9AA2;min-height:15px;pointer-events:none}
.voz-dica{position:absolute;left:8%;right:8%;bottom:calc(env(safe-area-inset-bottom) + 120px);text-align:center;
  font-size:12.5px;color:#A8A8B0;letter-spacing:.3px;min-height:16px;line-height:1.5}
.voz-bottom{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 34px);
  display:flex;justify-content:center}
.voz-btn{width:64px;height:64px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s, background .2s}
.voz-btn:active{transform:scale(.94)}
.voz-btn svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2}
/* encerrar em vermelho de telefonia (nao e o vinho de reprovado: aqui significa "desligar") */
.voz-fim{background:rgba(255,90,110,.14);color:#FF8098}
/* feedback sutil de que o mic captou: o cabecalho recua enquanto o candidato fala */
#vozOverlay.falando .voz-top{opacity:.55;transition:opacity .2s}

/* ---------- tela de chamada recebida ----------
   Sem ela a entrevista arranca do nada, com uma voz saindo da tela. Com ela existe um
   instante de ligacao tocando, o candidato ATENDE e so entao a conversa comeca, que e o
   ritual que todo mundo ja conhece. O microfone e pedido durante o toque. */
.voz-chamada{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 26px;animation:vozEntra .28s ease-out}
@keyframes vozEntra{from{opacity:0}to{opacity:1}}
.voz-ch-eyebrow{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#9A9AA2}
.voz-ch-nome{font-size:27px;font-weight:700;color:#F5F5F7;margin-top:9px;letter-spacing:-.01em;font-family:var(--display)}
.voz-ch-sub{font-size:13.5px;color:#A8A8B0;margin-top:6px;max-width:340px;line-height:1.5}
.voz-ch-aviso{font-size:12.5px;color:#BDBDC5;margin-top:14px;min-height:16px;max-width:360px;line-height:1.5}
/* avatar com aneis que expandem: a leitura imediata de "esta tocando" */
.voz-ch-avatar{position:relative;width:132px;height:132px;margin:0 auto 34px}
/* quase-preto da marca com inicial vermelha e aneis vermelhos. E a PRIMEIRA tela
   da entrevista: se ela piscar na cor de outra empresa, a impressao inteira vai
   junto. Cor vem sempre do token, nunca de hex solto. */
.voz-ch-ini{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:38px;font-weight:700;color:var(--cta);background:var(--marca);border:1px solid rgba(220,38,38,.45);
  font-family:var(--display);animation:vozPulsa 2s ease-in-out infinite}
.voz-ch-anel{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(220,38,38,.55);animation:vozAnel 2s ease-out infinite}
.voz-ch-anel:nth-child(2){animation-delay:.66s} .voz-ch-anel:nth-child(3){animation-delay:1.32s}
@keyframes vozAnel{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.1);opacity:0}}
@keyframes vozPulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.voz-ch-acoes{display:flex;gap:56px;align-items:flex-start;justify-content:center;margin-top:42px}
.voz-ch-acao{display:flex;flex-direction:column;align-items:center;gap:9px}
.voz-ch-acao span{font-size:11.5px;color:#A8A8B0}
/* atender em verde de telefonia (o verde de aprovado nao cabe aqui: ninguem foi aprovado) */
.voz-atende{background:#1F7A44;color:#EAFFF2;animation:vozTremeAtende 2s ease-in-out infinite}
.voz-recusa{background:rgba(255,90,110,.16);color:#FF8098}
@keyframes vozTremeAtende{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* aviso dentro da ligacao: desligar nunca termina em silencio */
.voz-aviso{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(15,15,17,.85);z-index:4}
.voz-aviso-cx{max-width:420px;background:var(--card);border-radius:var(--r-lg);padding:var(--s6);
  box-shadow:var(--shadow-pop);text-align:left}
.voz-aviso-cx b{display:block;font-size:var(--fs-md);color:var(--txt);font-family:var(--display)}
.voz-aviso-cx p{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-body)}
.voz-aviso-bt{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
@media(max-width:520px){.voz-ch-acoes{gap:44px}.voz-ch-avatar{width:112px;height:112px;margin-bottom:26px}
  .voz-ch-ini{font-size:32px}}

/* ============================================================
   IBooster · administracao (Unidades e Contas) e leitura por competencia
   ============================================================ */

/* grade de checkbox para escolher unidades (contas e vagas) */
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s2);margin-top:var(--s2)}
.chk{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s3);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);font-size:var(--fs-sm);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.chk:hover{border-color:var(--brand-200);background:var(--brandsoft)}
.chk:has(input:checked){border-color:var(--brand);background:var(--brandsoft);font-weight:600;color:var(--brand)}
.chk input{margin:0;flex-shrink:0}

/* coluna de acoes de tabela: os botoes nao quebram linha */
td.acoes{white-space:nowrap;text-align:right}
td.acoes .btn{margin-left:var(--s1)}
@media(max-width:760px){td.acoes{white-space:normal;text-align:left}td.acoes .btn{margin:2px var(--s1) 2px 0}}

/* barra de desempenho por competencia: substitui as barras de perfil do
   modelo anterior. Mostra a nota da pessoa e, quando a vaga define, o
   marcador da nota minima de referencia sobre a mesma barra. */
.comp-row{display:grid;grid-template-columns:minmax(170px,230px) 1fr 52px;align-items:center;gap:var(--s4);margin-bottom:var(--s4)}
.comp-row:last-child{margin-bottom:0}
.comp-row .nm{font-size:var(--fs-sm);font-weight:600;color:var(--txt)}
.comp-row .nm small{display:block;font-weight:400;font-size:var(--fs-micro);color:var(--mut2)}
.comp-row .bar{position:relative;height:10px;border-radius:var(--r-pill);background:var(--card2);overflow:visible}
.comp-row .bar > i{display:block;height:100%;border-radius:var(--r-pill);transition:width .5s ease}
.comp-row .bar > i.g{background:var(--ok)}
.comp-row .bar > i.a{background:var(--warn)}
.comp-row .bar > i.e{background:var(--danger)}
.comp-row .val{font-size:var(--fs-md);font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
/* marcador da nota minima da vaga. O NUMERO aparece uma vez so, na primeira linha:
   repetido em todas as seis viravam seis "60" soltos no meio das barras, que e o
   tipo de repeticao que faz um grafico parecer sujo. O tracinho continua em todas. */
.comp-ref{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.45;border-radius:1px}
.comp-row:first-child .comp-ref::after{content:attr(data-r);position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:700;color:var(--mut);white-space:nowrap}
@media(max-width:600px){.comp-row{grid-template-columns:1fr 42px;row-gap:var(--s1)}.comp-row .bar{grid-column:1/-1}}

/* peso da competencia no builder: numero em percentual, com aviso de soma */
.peso-row{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line)}
.peso-row:last-child{border-bottom:none}
.peso-row .lbl{font-size:var(--fs-sm);font-weight:600}
.peso-row .lbl small{display:block;font-weight:400;font-size:var(--fs-micro);color:var(--mut2)}
.peso-soma{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s3);
  padding:10px var(--s3);border-radius:var(--r-md);background:var(--card2);font-size:var(--fs-sm);font-weight:600}
.peso-soma.ok{background:var(--oksoft);color:var(--ok-ink)}
.peso-soma.off{background:var(--warnsoft);color:var(--warn-ink)}

/* cartao de link por unidade na tela da vaga */
.link-uni{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:var(--s2);background:var(--card)}
.link-uni .nm{font-weight:600;font-size:var(--fs-sm)}
.link-uni .u{font-size:var(--fs-micro);color:var(--mut2);word-break:break-all}
.link-uni .acts{display:flex;gap:var(--s2);flex-shrink:0}

/* escolha de unidade pelo candidato (link geral, sem unidade definida) */
.uni-pick{display:grid;gap:var(--s2);margin:var(--s4) 0}
.uni-pick button{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;
  padding:var(--s4);border:2px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  font:inherit;font-size:var(--fs-md);font-weight:600;color:var(--txt);text-align:left;cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast)}
.uni-pick button:hover,.uni-pick button:focus-visible{border-color:var(--brand);background:var(--brandsoft);outline:none}
.uni-pick button small{display:block;font-weight:400;font-size:var(--fs-sm);color:var(--mut)}

/* distribuicao das notas em faixas de 20 (Visao geral) */
.dist-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);align-items:end;margin-top:var(--s3)}
.dist-col{display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
.dist-bar{width:100%;height:110px;display:flex;align-items:flex-end;background:var(--card2);border-radius:var(--r-sm);overflow:hidden}
.dist-bar i{display:block;width:100%;background:var(--marca-grad);border-radius:var(--r-sm) var(--r-sm) 0 0;transition:height .5s ease;min-height:2px}
.dist-n{font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums}
.dist-l{font-size:var(--fs-micro);color:var(--mut2);white-space:nowrap}

/* barra de filtros da tela de candidatos */
.filtros{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.filtros select{width:auto;min-width:150px;flex:0 1 auto;margin:0}
.filtros .fl-busca{flex:1 1 260px;min-width:220px}
@media(max-width:700px){.filtros select,.filtros .fl-busca{flex:1 1 100%;min-width:0}}

/* subtitulo do numerao do relatorio (referencia da vaga) */
.rep-bigsub{font-size:var(--fs-micro);font-weight:600;text-align:center;margin-top:2px}
.ok-txt{color:var(--ok-ink)}
.mb-2{margin-bottom:var(--s2)}

/* ============================================================
   Ajustes de leitura e de controles (feedback de uso)
   ============================================================ */

/* segundo paragrafo da abertura de cada aba: explica PARA QUE a aba serve.
   Fica um degrau abaixo do lead, sem virar bloco de texto pesado. */
.pagehead .lead-2{color:var(--mut);margin-top:var(--s3);max-width:820px;font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.pagehead .lead-2 b{color:var(--txt);font-weight:600}

/* O switch e um <label>, que e inline por padrao: dentro de celula de tabela a
   largura e a altura eram ignoradas e sobrava so a bolinha, sem o trilho. */
.switch{display:inline-block;vertical-align:middle}

/* Controles dentro da matriz (composicao da vaga e dimensoes da entrevista):
   sem largura minima o numero escolhido ficava cortado e a coluna parecia vazia. */
.bd-matrix select,.bd-matrix input[type=number]{
  width:auto;min-width:72px;margin:0;text-align:center;
  padding:6px var(--s2);font-size:var(--fs-sm);font-weight:600;
}
.bd-matrix td .switch{margin:0 auto}

/* "Dissertativas" e o numero colavam quando o rotulo ocupava a linha inteira */
.bd-sum-row{gap:var(--s3);flex-wrap:wrap}
.bd-sum-row > span:first-child{flex:1 1 auto;min-width:0}
.bd-sum-row .row{flex-wrap:wrap;justify-content:flex-end;gap:var(--s2);align-items:baseline}
.bd-sum-row .row .small{white-space:nowrap}

/* aviso explicativo com opcao de nao repetir (SA.avisoUmaVez) */
.cd-modal .box.aviso{max-width:560px;text-align:left}
.aviso-corpo{margin-top:var(--s3);font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--mut)}
.aviso-corpo p{margin-bottom:var(--s3)}
.aviso-corpo p:last-child{margin-bottom:0}
.aviso-corpo b{color:var(--txt);font-weight:600}
.aviso-nao{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--mut);cursor:pointer}
.aviso-nao input{margin:0}
.cd-modal .box.aviso .acts{margin-top:var(--s4);justify-content:flex-end}