/* ============================================================
   iBooster ATS · estilos das telas
   Primitivas (btn, card, chip, grid) vem do design.css.
   Aqui vive o que e ESPECIFICO do ATS: shell com sidebar, kanban,
   drawer de candidatura, feed, scorecard, agenda, carreiras.
   ============================================================ */

/* ---------- shell: rail de comando + canvas ----------
   ASSINATURA DA PLATAFORMA: navegacao num rail de tinta escura (plano de
   comando), trabalho no canvas claro. O item ativo e um recorte luminoso com
   trilho da marca; icones em traco acendem junto. E o mesmo mundo visual do
   login, entao entrar na plataforma nao troca de produto no meio. */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{
  background:#141419;
  background-image:radial-gradient(120% 60% at 0% 0%,rgba(220,38,38,.10),transparent 55%);
  padding:var(--s5) var(--s3) var(--s4);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:var(--s2);
}
.side .logo{display:flex;align-items:center;gap:9px;padding:2px 10px 20px}
.side .logo img{height:22px;width:auto}
.side .logo .lnome{font-size:15px;font-weight:800;letter-spacing:var(--ls-tight);color:#fff}
.side .logo .prod{font-size:10px;font-weight:700;letter-spacing:.1em;color:#8B8B96;border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:1px 6px;margin-top:1px}
.side .navlabel{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5E5E68;padding:0 12px 7px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{
  position:relative;display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:9px;
  font-size:var(--fs-sm);font-weight:500;color:#A3A3AE;text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast);
}
.side nav a:hover{background:rgba(255,255,255,.06);color:#E9E9EE;text-decoration:none}
.side nav a.on{background:rgba(255,255,255,.09);color:#fff;font-weight:600}
.side nav a.on::before{content:'';position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-500)}
.side nav a.on .ic{color:var(--brand-500)}
.side nav a .ic{width:18px;height:18px;flex-shrink:0;color:#6C6C78;transition:color var(--t-fast)}
.side nav a:hover .ic{color:#A3A3AE}
.side nav a .rt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side nav a .bdg{margin-left:auto;background:var(--brand);color:#fff;font-size:var(--fs-micro);font-weight:700;border-radius:var(--r-pill);padding:1px 7px;font-variant-numeric:tabular-nums}
.side .rodape{margin-top:auto;padding:12px 4px 2px;border-top:1px solid rgba(255,255,255,.09)}
.side .userchip{display:flex;align-items:center;gap:10px;background:transparent;border:none;padding:4px 8px;border-radius:10px}
.side .userchip .av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-micro);flex-shrink:0}
.side .userchip .uinfo{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.side .userchip .nm{font-size:var(--fs-xs);font-weight:600;color:#E9E9EE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .userchip .pp{font-size:10px;color:#7A7A85}
.side .sairbt{margin-left:auto;background:none;border:none;color:#6C6C78;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;transition:background var(--t-fast),color var(--t-fast);flex-shrink:0}
.side .sairbt:hover{background:rgba(255,255,255,.08);color:#fff}
.main{padding:var(--s8) var(--s8) var(--s12);min-width:0}
.main .topo{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap}
.main .topo h1{font-size:26px;letter-spacing:var(--ls-tighter)}
.main .topo .sub{color:var(--mut);font-size:var(--fs-sm);margin-top:5px;max-width:64ch}
.main .topo .acoes{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:-260px;z-index:90;width:240px;transition:left var(--t-med);box-shadow:var(--shadow-pop)}
  .side.aberta{left:0}
  .main{padding:var(--s4)}
  .hamb{display:inline-flex}
}
.hamb{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 9px;cursor:pointer}

/* ---------- kpis ----------
   Numero grande e apertado, rotulo em caixa normal (caixa alta em serie inteira
   virava grito), e o rotulo vem ANTES do numero: o olho le "vagas abertas: 2",
   nao "2... de que?". Cor no numero so quando e estado (alerta/ok). */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:var(--s3)}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:var(--s4) var(--s5);box-shadow:var(--shadow)}
.kpi .l{font-size:var(--fs-xs);font-weight:500;color:var(--mut);line-height:1.35;text-transform:none;letter-spacing:0;margin-top:0}
.kpi .v{font-size:30px;font-weight:800;letter-spacing:var(--ls-tighter);line-height:1.1;font-variant-numeric:tabular-nums;margin-top:6px}
.kpi .v small{font-size:var(--fs-sm);font-weight:600;color:var(--mut2);letter-spacing:0}
.kpi.alerta .v{color:var(--warn-ink)}
.kpi.ok .v{color:var(--ok-ink)}

/* ---------- chips de status ---------- */
.st{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}
.st::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.st.draft{background:var(--card2);color:var(--mut)}
.st.open{background:var(--oksoft);color:var(--ok-ink)}
.st.closed,.st.archived{background:var(--card2);color:var(--mut)}
.st.awaiting{background:var(--warnsoft);color:var(--warn-ink)}
.st.approved{background:var(--oksoft);color:var(--ok-ink)}
.st.rejected{background:var(--dangersoft);color:var(--danger)}
.st.hired{background:var(--oksoft);color:var(--ok-ink)}
.st.active{background:var(--infosoft);color:var(--info-ink)}
.st.lead{background:var(--goldsoft);color:var(--gold-ink)}
.st.conf{background:var(--code-bg);color:#fff}

/* ---------- lista de vagas ---------- */
.vagalist{display:flex;flex-direction:column;gap:var(--s2)}
.vagacard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:var(--s4) var(--s5);display:flex;align-items:center;gap:var(--s4);cursor:pointer;box-shadow:var(--shadow);transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.vagacard:hover{border-color:var(--line2);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.vagacard .nome{font-weight:600;font-size:var(--fs-md);letter-spacing:var(--ls-tight)}
.vagacard .meta{color:var(--mut);font-size:var(--fs-sm);margin-top:3px;display:flex;gap:6px 12px;flex-wrap:wrap}
.vagacard .dir{margin-left:auto;display:flex;align-items:center;gap:var(--s4);flex-shrink:0}
.vagacard .qtd{font-size:var(--fs-micro);color:var(--mut2);text-align:right;line-height:1.3}
.vagacard .qtd b{display:block;font-size:var(--fs-lg);color:var(--txt);font-variant-numeric:tabular-nums;font-weight:700}

/* ---------- kanban ----------
   A tela que vende o produto, entao ela tem que parecer uma ferramenta de 2027:
   coluna e uma superficie recuada SEM borda (a borda dupla coluna+cartao fazia
   grade de planilha), cartao branco com fio de cabelo e sombra minima que LEVANTA
   no hover e no arrasto, avatar com cor estavel por pessoa (a cor segue a pessoa
   pelo funil inteiro), e "dias parado" so aparece quando vira sinal. */
.kanban{display:flex;gap:var(--s3);overflow-x:auto;padding:2px 2px var(--s4);align-items:flex-start;min-height:420px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.kanban::-webkit-scrollbar{height:8px}
.kanban::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.kanban::-webkit-scrollbar-track{background:transparent}
.kcol{background:var(--card2);border:none;border-radius:14px;min-width:272px;width:272px;flex-shrink:0;display:flex;flex-direction:column;max-height:calc(100vh - 250px)}
.kcol .khead{padding:11px var(--s4) 7px;display:flex;align-items:center;gap:8px}
.kcol .khead .knome{font-size:var(--fs-sm);font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcol .khead .kn{margin-left:auto;background:#fff;border-radius:var(--r-pill);font-size:var(--fs-micro);font-weight:600;color:var(--mut);padding:2px 8px;font-variant-numeric:tabular-nums;box-shadow:var(--shadow)}
.kcol .kbody{padding:6px 8px 10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:72px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.kcol .kbody::-webkit-scrollbar{width:6px}
.kcol .kbody::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.kcol.dragover{box-shadow:inset 0 0 0 2px var(--brand);background:var(--brandsoft)}
.kcol.final .khead .knome{color:var(--mut)}
.kvazio{border:1.5px dashed var(--line2);border-radius:10px;padding:18px 10px;text-align:center;font-size:var(--fs-micro);color:var(--mut2)}
.kcard{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 12px;cursor:grab;box-shadow:var(--shadow);transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.kcard:hover{border-color:var(--line2);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kcard:active{cursor:grabbing}
.kcard.arrastando{opacity:.45;transform:rotate(1.5deg)}
.kcard .krow{display:flex;align-items:center;gap:9px}
.kcard .knm{font-weight:600;font-size:var(--fs-sm);line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcard .kinfo{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.kcard .kinfo:empty{display:none}
.kcard .dias{font-size:var(--fs-micro);font-weight:600;border-radius:var(--r-pill);padding:1px 8px;background:var(--card2);color:var(--mut)}
.kcard .dias.warn{background:var(--warnsoft);color:var(--warn-ink)}
.kcard .dias.danger{background:var(--dangersoft);color:var(--danger)}
.kcard .ktag{font-size:var(--fs-micro);color:var(--mut2)}
/* avatar com cor ESTAVEL por pessoa (hash do nome -> 8 pasteis com tinta escura):
   a cor vira assinatura visual e o quadro deixa de ser uma parede de texto */
.kav{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;flex-shrink:0;letter-spacing:.02em}
.kav.c0,.avatarG.c0,.pav.c0{background:#FCE7E7;color:#8E1F1F}
.kav.c1,.avatarG.c1,.pav.c1{background:#FDEFDB;color:#7A5000}
.kav.c2,.avatarG.c2,.pav.c2{background:#E4F3E9;color:#0E5F30}
.kav.c3,.avatarG.c3,.pav.c3{background:#E2EFFA;color:#0B527F}
.kav.c4,.avatarG.c4,.pav.c4{background:#EDE8FA;color:#54399B}
.kav.c5,.avatarG.c5,.pav.c5{background:#E2F4F1;color:#0A6156}
.kav.c6,.avatarG.c6,.pav.c6{background:#FAE8F1;color:#8D2458}
.kav.c7,.avatarG.c7,.pav.c7{background:#ECECF0;color:#45454E}

/* ---------- drawer (candidatura / formularios grandes) ----------
   Flutua de verdade: canto arredondado no lado que encosta na tela, scrim com
   desfoque leve e a folha respirando 8px da borda. E um objeto sobre a mesa,
   nao uma parede que desliza. */
.drawer-scrim{position:fixed;inset:0;background:rgba(15,15,17,.42);backdrop-filter:blur(2px);z-index:100;opacity:0;pointer-events:none;transition:opacity var(--t-med)}
.drawer-scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:8px;bottom:8px;right:-720px;width:min(680px,calc(96vw - 8px));height:auto;background:var(--bg);z-index:101;transition:right var(--t-med) ease;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.drawer.on{right:8px}
.drawer .dhead{background:#fff;border-bottom:1px solid var(--line);padding:var(--s4) var(--s5);display:flex;align-items:center;gap:var(--s3);flex-shrink:0}
.drawer .dhead h2{font-size:var(--fs-lg);letter-spacing:var(--ls-tight)}
.drawer .dbody{overflow-y:auto;padding:var(--s5);flex:1;display:flex;flex-direction:column;gap:var(--s4);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.drawer .dbody::-webkit-scrollbar{width:8px}
.drawer .dbody::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.drawer .x{margin-left:auto;background:none;border:none;border-radius:var(--r-sm);width:32px;height:32px;cursor:pointer;font-size:16px;color:var(--mut2);display:grid;place-items:center;transition:background var(--t-fast),color var(--t-fast)}
.drawer .x:hover{color:var(--txt);background:var(--card2)}

/* ---------- perfil / feed ---------- */
.avatarG{width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--fs-md);flex-shrink:0}
.feed{display:flex;flex-direction:column;gap:0}
.fitem{display:flex;gap:12px;position:relative;padding-bottom:var(--s4)}
.fitem::before{content:'';position:absolute;left:13px;top:30px;bottom:0;width:2px;background:var(--line)}
.fitem:last-child::before{display:none}
.fitem .fic{width:28px;height:28px;border-radius:50%;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:13px;flex-shrink:0;z-index:1}
.fitem.tipo-hired .fic{background:var(--oksoft);border-color:var(--ok)}
.fitem.tipo-rejected .fic{background:var(--dangersoft);border-color:var(--danger)}
.fitem.tipo-scorecard .fic{background:var(--infosoft);border-color:var(--info)}
.fitem .fcorpo{flex:1;min-width:0}
.fitem .ftx{font-size:var(--fs-sm);line-height:1.5;word-wrap:break-word}
.fitem .fmeta{font-size:var(--fs-micro);color:var(--mut2);margin-top:2px}

/* ---------- scorecard ---------- */
.recom{display:flex;gap:6px;flex-wrap:wrap}
.recom button{font:inherit;font-size:var(--fs-sm);font-weight:600;border:1px solid var(--line2);background:#fff;border-radius:var(--r-pill);padding:7px 14px;cursor:pointer;color:var(--mut)}
.recom button.on{border-color:var(--brand);background:var(--brandsoft);color:var(--brand);font-weight:700}
.notasgrid{display:flex;flex-direction:column;gap:var(--s2)}
.notasgrid .atr{display:flex;align-items:center;gap:var(--s3);padding:8px 0;border-bottom:1px solid var(--line)}
.notasgrid .atr:last-child{border-bottom:none}
.notasgrid .atr .anome{font-size:var(--fs-sm);font-weight:600;flex:1}
.notasgrid .atr .escala{display:flex;gap:4px}
.notasgrid .escala button{width:32px;height:28px;border:1px solid var(--line2);background:#fff;border-radius:var(--r-sm);cursor:pointer;font-size:12px;color:var(--mut2)}
.notasgrid .escala button.on{border-color:var(--brand);background:var(--brandsoft);color:var(--brand);font-weight:700}
.scresumo{display:flex;align-items:center;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line)}
.scresumo:last-child{border-bottom:none}
.scresumo .quem{font-size:var(--fs-sm);font-weight:700;flex:1}
.scresumo .rec{font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-pill);padding:3px 10px}
.rec.strong_yes,.rec.yes{background:var(--oksoft);color:var(--ok-ink)}
.rec.mixed{background:var(--warnsoft);color:var(--warn-ink)}
.rec.no,.rec.definitely_not{background:var(--dangersoft);color:var(--danger)}

/* ---------- formularios ---------- */
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--s3)}
.fld label{font-size:var(--fs-xs);font-weight:700;color:var(--mut)}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:var(--fs-base);border:1px solid var(--line2);border-radius:var(--r-md);
  padding:9px 12px;background:#fff;color:var(--txt);width:100%;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--brandsoft2);border-color:var(--brand)}
.fld textarea{min-height:88px;resize:vertical}
.fld .dica{font-size:var(--fs-micro);color:var(--mut2)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:620px){.frow{grid-template-columns:1fr}}

/* busca com icone dentro do campo (padrao de toda lista grande) */
.buscawrap{position:relative;max-width:440px}
.buscawrap .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut2);pointer-events:none}
.buscawrap input{padding-left:38px;border-radius:10px}
/* cartao "flush": tabela colada nas bordas do cartao, sem padding duplo */
.card.flush{padding:0;overflow:hidden}
.card.flush table.t th:first-child,.card.flush table.t td:first-child{padding-left:var(--s5)}
.card.flush table.t th:last-child,.card.flush table.t td:last-child{padding-right:var(--s5)}
/* linha-alvo: a linha inteira e clicavel, com seta que acorda no hover */
table.t.click-rows tbody tr{cursor:pointer}
table.t.click-rows tbody tr:focus-visible{outline:2px solid var(--brand2);outline-offset:-2px}
.trow-p{display:inline-flex;align-items:center;gap:10px}
.trow-p .kav{width:28px;height:28px;font-size:10px}
td.tseta{width:34px;color:var(--mut2);opacity:0;transition:opacity var(--t-fast)}
table.t tbody tr:hover td.tseta{opacity:1;color:var(--brand)}

/* ---------- tabelas ---------- */
table.t{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.t th{text-align:left;font-size:11px;font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut2);padding:8px 12px;border-bottom:1px solid var(--line2);white-space:nowrap}
table.t td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tbody tr:last-child td{border-bottom:none}
table.t tr:hover td{background:var(--bg2)}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- funil (barras) ---------- */
.funil{display:flex;flex-direction:column;gap:var(--s2)}
.funil .fx{display:grid;grid-template-columns:170px 1fr 90px;gap:var(--s3);align-items:center}
.funil .fx .fl{font-size:var(--fs-sm);font-weight:600;text-align:right}
.funil .fx .fb{height:26px;background:var(--card2);border-radius:var(--r-sm);overflow:hidden}
.funil .fx .fb i{display:block;height:100%;background:var(--marca-grad);border-radius:var(--r-sm);min-width:2px;transition:width .4s ease}
.funil .fx .fn{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--mut)}

/* ---------- pipeline editor ---------- */
.estagio-item{display:flex;align-items:center;gap:var(--s3);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px}
.estagio-item .eordem{width:26px;height:26px;border-radius:50%;background:var(--brandsoft);color:var(--brand);font-weight:800;font-size:var(--fs-xs);display:grid;place-items:center;flex-shrink:0}
.estagio-item .enome{font-weight:700;font-size:var(--fs-sm)}
.estagio-item .etipo{font-size:var(--fs-micro);color:var(--mut2)}
.estagio-item .edir{margin-left:auto;display:flex;gap:6px}

/* ---------- aprovacao ---------- */
.aprcadeia{display:flex;flex-direction:column;gap:var(--s2)}
.apretapa{display:flex;align-items:center;gap:var(--s3);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px}
.apretapa.ok{border-left:3px solid var(--ok)}
.apretapa.pend{border-left:3px solid var(--warn)}
.apretapa.rej{border-left:3px solid var(--danger)}

/* ---------- agenda ---------- */
.agitem{display:flex;align-items:center;gap:var(--s4);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4)}
.agitem .quando{text-align:center;min-width:64px}
.agitem .quando .dia{font-size:var(--fs-lg);font-weight:800;line-height:1}
.agitem .quando .mes{font-size:var(--fs-micro);text-transform:uppercase;font-weight:700;color:var(--mut)}

/* ---------- carreiras (pagina publica) ----------
   E a vitrine do empregador: hero com mais ar, titulo maior, e a vaga como
   convite (meta em chips legiveis, seta que aparece no hover). */
.carr-hero{background:linear-gradient(180deg,var(--brandsoft) 0%,transparent 90%);padding:64px 0 40px;text-align:center}
.carr-hero h1{font-size:clamp(30px,4.5vw,40px);letter-spacing:var(--ls-tighter)}
.carr-hero p{color:var(--mut);max-width:520px;margin:var(--s3) auto 0;font-size:var(--fs-md);line-height:1.6}
.carr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s4);margin-top:var(--s6)}
.carr-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:var(--s5);cursor:pointer;box-shadow:var(--shadow);transition:box-shadow var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.carr-card:hover{box-shadow:var(--shadow-md);border-color:var(--line2);transform:translateY(-2px)}
.carr-card::after{content:'\2192';position:absolute;right:18px;top:18px;color:var(--brand);font-weight:700;opacity:0;transform:translateX(-4px);transition:opacity var(--t-fast),transform var(--t-fast)}
.carr-card:hover::after{opacity:1;transform:none}
.carr-card h3{font-size:var(--fs-md);letter-spacing:var(--ls-tight);padding-right:22px}
.carr-card .cmeta{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.carr-card .cmeta span{font-size:var(--fs-xs);font-weight:500;color:var(--mut);background:var(--card2);border-radius:var(--r-pill);padding:3px 10px}
.carr-form{max-width:660px;margin:0 auto}

/* ---------- devolutiva objetiva ----------
   Pagina publica do candidato: uma folha so, calma e digna - a pessoa esta
   lendo um nao (ou um sim). No painel, o card do dossie mostra o PREVIEW
   exatamente como o candidato vai ler, antes de liberar. */
.devpg{min-height:100vh;background:var(--bg);display:flex;align-items:flex-start;justify-content:center;padding:min(8vh,72px) var(--s4)}
.devcaixa{width:min(620px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:40px 42px;box-shadow:var(--shadow-lg)}
.devlogo{height:26px;margin-bottom:var(--s5)}
.devcaixa h1{font-size:24px;letter-spacing:var(--ls-tight)}
.devsec{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.devetapas{display:flex;flex-direction:column;gap:0}
.devetapa{display:flex;align-items:center;gap:11px;padding:6px 0;font-size:var(--fs-sm);color:var(--mut2);position:relative}
.devetapa .devdot{width:10px;height:10px;border-radius:50%;background:var(--card2);border:2px solid var(--line2);flex-shrink:0;z-index:1}
.devetapa:not(:last-child)::before{content:'';position:absolute;left:4px;top:22px;height:12px;width:2px;background:var(--line)}
.devetapa.ok{color:var(--txt);font-weight:500}
.devetapa.ok .devdot{background:var(--brand);border-color:var(--brand)}
.devbloco{margin-top:var(--s3)}
.devbloco b{font-size:var(--fs-sm)}
.devbloco.forte b{color:var(--ok-ink)}
.devbloco.desenv b{color:var(--warn-ink)}
.devitens{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.devitem{font-size:var(--fs-xs);font-weight:600;border-radius:var(--r-pill);padding:4px 12px}
.devbloco.forte .devitem{background:var(--oksoft);color:var(--ok-ink)}
.devbloco.desenv .devitem{background:var(--warnsoft);color:var(--warn-ink)}
.devbanco{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:var(--s4);border-top:1px solid var(--line);margin-top:var(--s6)}
.devlgpd{margin-top:var(--s6);font-size:var(--fs-micro);color:var(--mut2);line-height:1.6}
/* card no dossie (painel) */
.devcard .devprev{margin-top:var(--s3);display:flex;flex-direction:column;gap:5px}
.devcard .devlin{font-size:var(--fs-sm);line-height:1.5}
.devcard .devlin b{font-weight:600}

/* ---------- login ----------
   A porta de entrada e a primeira demo. Painel escuro com brilho da marca e um
   RECORTE DO PRODUTO em cartoes de vidro (o pipeline com a etapa iBooster acesa),
   formulario num cartao que flutua no canvas claro. Mesmo mundo visual do rail. */
.loginwrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(430px,1fr)}
.loginpitch{
  position:relative;background:#111116;color:#fff;overflow:hidden;
  padding:min(7vh,64px) min(5vw,72px);display:flex;
}
/* o conteudo do painel escuro e um BLOCO centrado com largura maxima: em tela
   larga ele flutua no centro, em vez de se amontoar a esquerda num mar de preto */
.lg-inner{width:min(660px,100%);margin:auto;display:flex;flex-direction:column;gap:var(--s6)}
.loginpitch::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 70% at 8% 0%,rgba(220,38,38,.16),transparent 55%),
    radial-gradient(70% 55% at 100% 100%,rgba(220,38,38,.07),transparent 60%)}
.loginpitch::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px}
.loginpitch>*{position:relative;z-index:1}
/* lockup da marca: raio + nome + chip, alinhados por CENTRO OPTICO (o raio e
   mais alto que a caixa-x do texto e descia torto quando alinhado por baseline) */
.lg-lock{display:inline-flex;align-items:center;gap:9px}
.lg-lock img{display:block;transform:translateY(-.5px)}
.lg-lock .lk-nm{font-size:18px;font-weight:800;letter-spacing:var(--ls-tight);line-height:1}
.lg-prod{font-size:10px;font-weight:700;letter-spacing:.1em;color:#9A9AA4;border:1px solid rgba(255,255,255,.16);border-radius:5px;padding:2.5px 7px;line-height:1}
.loginbox .lg-lock .lk-nm{color:var(--txt)}
.loginbox .lg-prod{color:var(--mut);border-color:var(--line2)}
.lg-lockbox{margin-bottom:var(--s5)}
/* janela do produto: chrome com pontos + titulo, o quadro dentro */
.lg-win{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.lg-winbar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.lg-dots{display:inline-flex;gap:5px}
.lg-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.lg-wint{font-size:11px;font-weight:600;color:#B7B7C1}
.lg-winr{margin-left:auto;font-size:10px;color:#7A7A85;font-variant-numeric:tabular-nums}
.loginpitch h2{font-size:clamp(26px,2.6vw,36px);line-height:1.12;letter-spacing:var(--ls-tighter);font-weight:800;max-width:520px}
.lg-sub{color:#A9A9B4;font-size:var(--fs-sm);line-height:1.65;max-width:480px}
.lg-sub b{color:#fff}
/* o recorte do produto: tres colunas de vidro, a do meio (iBooster) acesa */
.lg-quadro{display:flex;gap:10px;align-items:stretch;padding:12px}
.lgm-col{flex:1;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:9px;display:flex;flex-direction:column;gap:7px;backdrop-filter:blur(6px)}
.lgm-col.ia{background:rgba(220,38,38,.07);border-color:rgba(248,113,113,.28);box-shadow:0 18px 44px -22px rgba(220,38,38,.45)}
.lgm-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#C7C7D0;padding:1px 3px}
.lgm-col.ia .lgm-h{color:#FCA5A5}
.lgm-raio{display:grid;place-items:center;color:#F87171}
.lgm-n{margin-left:auto;font-size:10px;font-weight:700;color:#8B8B96;background:rgba(255,255,255,.08);border-radius:99px;padding:1px 7px;font-variant-numeric:tabular-nums}
.lgm-card{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:7px 9px}
.lgm-card .kav{width:22px;height:22px;font-size:9px}
.lgm-nm{font-size:11.5px;font-weight:600;color:#E7E7EC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lgm-card.destaque{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.18)}
.lgm-nota{margin-left:auto;font-size:12px;font-weight:800;color:#4ADE80;font-variant-numeric:tabular-nums}
.lgm-ev{font-size:10.5px;line-height:1.5;color:#B9B9C2;background:rgba(0,0,0,.25);border-left:2px solid #F87171;border-radius:0 7px 7px 0;padding:6px 9px}
.lgm-ev i{display:block;font-style:normal;font-size:9.5px;color:#8B8B96;margin-top:2px}
/* chip "Aceita" legivel no escuro (o st.hired do claro sumia aqui) */
.lgm-ok{margin-left:auto;font-size:10px;font-weight:700;color:#4ADE80;background:rgba(74,222,128,.14);border-radius:99px;padding:2px 8px}
.lgm-meta{font-size:10.5px;color:#8B8B96;padding:4px 3px 1px;display:flex;justify-content:space-between;gap:8px}
.lgm-meta b{color:#D8D8DF;font-variant-numeric:tabular-nums}
/* pilares com icone: substitui a lista torta de rotulo a direita */
.lg-pilares{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.lg-pilar{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-xs);color:#A9A9B4;line-height:1.55}
.lg-pilar b{color:#fff;font-weight:600}
.lg-pic{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);display:grid;place-items:center;color:#F87171;margin-top:1px}
/* coluna do formulario */
.logincol{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s6);background:var(--bg)}
.loginbox{width:min(392px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px 34px 30px;box-shadow:var(--shadow-lg)}
.loginbox h1{font-size:22px;letter-spacing:var(--ls-tight)}
.lg-boas{color:var(--mut);font-size:var(--fs-sm);margin:4px 0 var(--s4)}
.loginbox .fld input{padding:11px 13px;border-radius:10px}
.loginbox .btn.block{padding:12px;border-radius:10px;font-size:var(--fs-base);
  background:linear-gradient(180deg,var(--brand-500),var(--brand));box-shadow:0 6px 16px -6px rgba(220,38,38,.45)}
.loginbox .btn.block:hover{background:var(--brand2)}
.lg-aviso{line-height:1.6}
.lg-rodape{font-size:var(--fs-micro);color:var(--mut2);letter-spacing:.04em}
@media(max-width:980px){.loginwrap{grid-template-columns:1fr}.loginpitch{display:none}.logincol{min-height:100vh}}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--code-bg);color:#fff;border-radius:var(--r-md);padding:11px 20px;font-size:var(--fs-sm);font-weight:600;z-index:200;opacity:0;transition:all var(--t-med);box-shadow:var(--shadow-pop);max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.erro{background:var(--danger)}

/* ---------- diversos ---------- */
.emptybox{border:1px dashed var(--line2);border-radius:var(--r-lg);padding:var(--s8);text-align:center;color:var(--mut);font-size:var(--fs-sm);display:flex;flex-direction:column;align-items:center;gap:6px}
.emptybox .ebic{width:38px;height:38px;border-radius:50%;background:var(--card2);display:grid;place-items:center;color:var(--mut2);margin-bottom:2px}
.emptybox .ebt{font-weight:600;color:var(--txt);font-size:var(--fs-sm)}
.emptybox .ebs{font-size:var(--fs-xs);color:var(--mut2);max-width:40ch;line-height:1.55}
/* selo de vaga confidencial (substitui o emoji de cadeado) */
.conftag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-micro);font-weight:600;color:var(--mut);background:var(--card2);border-radius:var(--r-pill);padding:2px 9px;margin-left:8px;vertical-align:2px}
/* icones do feed em traco dentro do circulo */
.fitem .fic .ic{display:block;color:var(--mut)}
.fitem.tipo-hired .fic .ic{color:var(--ok-ink)}
.fitem.tipo-rejected .fic .ic{color:var(--danger)}
.fitem.tipo-scorecard .fic .ic{color:var(--info-ink)}
/* aba ativa e TINTA (nao vermelha): a marca fica no sublinhado. Scrollbar da
   barra escondida - no Windows ela desenhava setas soltas ao lado das abas. */
.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:var(--s5);overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--mut);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 13px;cursor:pointer;white-space:nowrap;transition:color var(--t-fast)}
.tabbar button:hover{color:var(--txt)}
.tabbar button.on{color:var(--txt);border-bottom-color:var(--brand);font-weight:600}
.pessoachip{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border-radius:var(--r-pill);padding:3px 10px 3px 4px;font-size:var(--fs-xs);font-weight:600}
.pessoachip .pav{width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800}
.skel{background:linear-gradient(90deg,var(--card2) 25%,var(--bg2) 50%,var(--card2) 75%);background-size:200% 100%;animation:skel 1.2s infinite;border-radius:var(--r-md)}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- configuracoes: paineis de lista ----------
   Origens, motivos, departamentos e unidades sao LISTAS GERENCIAVEIS, nao
   nuvens de selos: cada item e uma linha com nome em caixa normal, o tipo em
   subtexto e a acao de desativar aparecendo no hover. O .tag (caixa alta) e
   do banco de questoes e nunca entra aqui. */
.cfgpanel{background:var(--card2);border-radius:12px;padding:6px}
.cfgpanel .cfgtit{display:flex;align-items:baseline;gap:8px;padding:8px 12px 6px}
.cfgpanel .cfgtit b{font-size:var(--fs-sm);font-weight:600}
.cfgpanel .cfgtit .cfgn{font-size:var(--fs-micro);color:var(--mut2);font-variant-numeric:tabular-nums}
.cfgrows{display:flex;flex-direction:column;gap:2px}
.cfgrow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:9px;padding:8px 12px;box-shadow:var(--shadow)}
.cfgrow .cfgnm{font-size:var(--fs-sm);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfgrow .cfgtp{font-size:var(--fs-micro);color:var(--mut2);white-space:nowrap}
.cfgrow .cfgac{margin-left:auto;display:flex;align-items:center;gap:6px}
.cfgrow .cfgbt{font:inherit;font-size:var(--fs-micro);font-weight:600;color:var(--mut2);background:none;border:none;border-radius:6px;padding:3px 8px;cursor:pointer;opacity:0;transition:opacity var(--t-fast),color var(--t-fast),background var(--t-fast)}
.cfgrow:hover .cfgbt{opacity:1}
.cfgrow .cfgbt:hover{background:var(--card2);color:var(--txt)}
.cfgrow.inativa{opacity:.55}
.cfgrow.inativa .cfgnm{text-decoration:line-through;text-decoration-color:var(--mut2)}
.cfgrow.inativa .cfgbt{opacity:1}
.cfgoff{font-size:var(--fs-micro);font-weight:600;color:var(--mut2);background:var(--card2);border-radius:var(--r-pill);padding:2px 8px}
/* form de adicionar: vive DENTRO do painel, como ultima linha */
.cfgadd{display:flex;gap:6px;padding:6px 4px 2px;align-items:center}
.cfgadd input,.cfgadd select{font:inherit;font-size:var(--fs-sm);border:1px solid transparent;background:#fff;border-radius:9px;padding:7px 11px;box-shadow:var(--shadow);min-width:0}
.cfgadd input{flex:1}
.cfgadd input:focus,.cfgadd select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brandsoft2)}
.cfgadd .btn{flex-shrink:0}
@media(max-width:720px){.cfgadd{flex-wrap:wrap}}