*{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* Identidade Docato (a mesma do site e do Portal do Colaborador, 18/08):
     azul #0057FF, texto #0F1729, DM Sans. Os NOMES dos tokens são os legados
     (--p, --dk...) de propósito — as ~centenas de usos espalhados herdam a
     identidade nova sem tocar em cada tela. */
  --p:#0057FF;--dk:#0F1729;--gr:#334155;--lt:#F8FAFC;--wh:#FFFFFF;
  --p10:rgba(0,87,255,.08);--p20:rgba(0,87,255,.18);--p40:rgba(0,87,255,.4);
  --ok:#1DB97B;--err:#E84040;--warn:#F59E0B;--ln:#E2E8F0;
  --fn:'DM Sans','Inter',system-ui,-apple-system,sans-serif;
  --rp:9999px;--rc:14px;--sh:0 1px 2px rgba(15,23,41,.04),0 8px 24px -8px rgba(15,23,41,.08);
}
body{font-family:var(--fn);background:var(--lt);color:var(--gr);min-height:100vh;-webkit-font-smoothing:antialiased;}
/* Foco visível na cor da marca — teclado navega o app inteiro */
:focus-visible{outline:2px solid var(--p);outline-offset:2px;}

/* A assinatura do redesign: UMA animação orquestrada — o conteúdo da página
   entra com fade + subida curta quando se troca de aba (curva do portal).
   O render() só marca .pg-entra quando o ST.nav MUDA, então digitar, salvar
   e abrir modal não re-animam nada. */
@keyframes pgEntra{from{opacity:0;transform:translateY(7px);}}
.pg-entra{animation:pgEntra .32s cubic-bezier(.22,.9,.35,1) both;}
@media (prefers-reduced-motion: reduce){.pg-entra{animation:none;}}

/* ── INTRO SPLIT WIPE ── */
.dc-intro-overlay{
  position:fixed;inset:0;z-index:9999;display:flex;pointer-events:none;
  animation:dcIntroFadeOut .5s ease 2.3s forwards;
}
.dc-intro-left{
  flex:1;background:#ffffff;border-right:1px solid #E5E9F2;
  display:flex;align-items:center;justify-content:flex-end;padding-right:10%;
  animation:dcIntroWipeLeft .8s cubic-bezier(.76,0,.24,1) 1.5s forwards;
}
.dc-intro-right{
  flex:1;background:#F4F6FB;
  display:flex;align-items:center;justify-content:flex-start;padding-left:10%;
  animation:dcIntroWipeRight .8s cubic-bezier(.76,0,.24,1) 1.5s forwards;
}
.dc-intro-left-content{opacity:0;animation:dcFadeIn .45s ease .2s forwards;}
.dc-intro-right-content{opacity:0;animation:dcFadeIn .45s ease .45s forwards;display:flex;flex-direction:column;align-items:center;gap:10px;}
.dc-intro-logo{font-size:52px;font-weight:900;letter-spacing:-2px;color:#04122A;line-height:1;}
.dc-intro-blue{color:#0057FF;}
.dc-intro-tag{font-size:10px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:#bbb;margin-top:8px;}
.dc-intro-vline{width:1px;height:64px;background:linear-gradient(to bottom,transparent,rgba(0,87,255,.3),transparent);}
.dc-intro-subtitle{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#ccc;}
.dc-intro-icon{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10000;
  width:72px;height:72px;border-radius:18px;
  background:#fff;border:1.5px solid #E5E9F2;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 32px rgba(4,18,42,.12);
  overflow:hidden;
  animation:dcIconPop .5s cubic-bezier(.34,1.56,.64,1) .3s both,
            dcIconOut .3s ease 1.4s forwards;
}
.dc-intro-icon img{width:52px;height:52px;object-fit:contain;}
@keyframes dcIntroWipeLeft{to{transform:translateX(-100%);}}
@keyframes dcIntroWipeRight{to{transform:translateX(100%);}}
@keyframes dcIntroFadeOut{to{opacity:0;pointer-events:none;display:none;}}
@keyframes dcFadeIn{to{opacity:1;}}
@keyframes dcIconPop{from{opacity:0;transform:translate(-50%,-50%) scale(.4);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes dcIconOut{to{opacity:0;transform:translate(-50%,-50%) scale(.7);}}

/* ── SIDEBAR GRUPOS COLAPSÁVEIS ── */
.lv-sb-group-toggle{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;background:none;border:none;cursor:pointer;
  font-size:10px;font-weight:600;color:rgba(255,255,255,.3);
  letter-spacing:.8px;text-transform:uppercase;
  padding:16px 12px 6px;font-family:var(--fn);
  transition:color .15s;
}
.lv-sb-group-toggle:hover{color:rgba(255,255,255,.65);}
.lv-sb-arrow{transition:transform .2s;flex-shrink:0;stroke:currentColor;}
.lv-sb-arrow.collapsed{transform:rotate(-90deg);}
/* IMPORTANTE: vem depois de .lv-sb-list para sobrescrever display:flex */
.lv-sb-list.lv-sb-list-hidden{display:none!important;}

/* --- SHELL --- */
.shell{display:flex;flex-direction:column;min-height:100vh;}
.shell > div:last-child{display:flex;flex:1;min-height:0;}
.sb{width:252px;background:var(--dk);display:flex;flex-direction:column;flex-shrink:0;}
.sb-top{padding:26px 22px 18px;border-bottom:1px solid rgba(255,255,255,.08);}
.sb-logo{display:flex;align-items:center;gap:12px;}
.sb-icon{width:38px;height:38px;background:var(--p);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;font-family:var(--fn);flex-shrink:0;letter-spacing:-.5px;}
.sb-brand{font-size:20px;font-weight:700;color:#fff;line-height:1;}
.sb-tagline{font-size:10px;color:rgba(255,255,255,.38);margin-top:3px;font-weight:400;}
.sb-user{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.08);}
.sb-avatar{width:32px;height:32px;border-radius:50%;background:var(--p20);color:var(--p);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-uname{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;}
.sb-role{font-size:10px;color:rgba(255,255,255,.4);margin-top:1px;}
.sb-nav{flex:1;padding:14px 12px;}
.sb-sec{font-size:10px;font-weight:600;color:rgba(255,255,255,.28);letter-spacing:.8px;text-transform:uppercase;padding:14px 12px 6px;}
.ni{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.55);font-size:14px;font-weight:500;transition:all .15s;margin-bottom:2px;}
.ni:hover{background:rgba(255,255,255,.07);color:#fff;}
.ni.on{background:var(--p20);color:#fff;}
.ni .ic{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.sb-foot{padding:14px 12px;border-top:1px solid rgba(255,255,255,.08);}
.sb-out{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.38);font-size:13px;width:100%;background:none;border:none;font-family:var(--fn);transition:all .15s;}
.sb-out:hover{color:rgba(255,255,255,.75);background:rgba(255,255,255,.06);}
.main{flex:1;overflow-y:auto;}
.ph{padding:32px 36px 0;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.pt{font-size:26px;font-weight:700;color:var(--dk);}
.ps{font-size:14px;color:#888;margin-top:4px;}
.pb{padding:24px 36px 48px;}
/* --- BUTTONS --- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:var(--rp);font-family:var(--fn);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s;white-space:nowrap;}
.bp{background:var(--p);color:#fff;}.bp:hover{background:#0048d4;}
.bs{background:transparent;color:var(--p);border:1.5px solid var(--p);}.bs:hover{background:var(--p10);}
.bd{background:var(--dk);color:#fff;}.bd:hover{background:#0a1f3d;}
.bg{background:transparent;color:#888;border:1.5px solid #E0E0E0;}.bg:hover{border-color:#bbb;color:var(--gr);}
.be{background:transparent;color:var(--err);border:1.5px solid var(--err);}.be:hover{background:rgba(232,64,64,.07);}
.bsm{padding:7px 14px;font-size:13px;} .bxs{padding:5px 10px;font-size:12px;}
/* --- MENU DE EXPORTAÇÃO (Resultados) --- */
.exp-wrap{position:relative;display:inline-block;}
.exp-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:var(--wh);border:1px solid #E6E9F2;border-radius:12px;box-shadow:var(--sh);padding:6px;min-width:236px;}
.exp-menu[hidden]{display:none;}
.exp-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;border-radius:9px;padding:9px 10px;cursor:pointer;font-family:var(--fn);transition:background .12s;}
.exp-item:hover{background:var(--lt);}
.exp-item>span{font-size:18px;width:22px;text-align:center;flex-shrink:0;}
.exp-item .exp-t{font-size:13px;font-weight:700;color:var(--dk);}
.exp-item .exp-s{font-size:11px;color:#8A90A3;margin-top:1px;}
/* --- CARDS --- */
.card{background:var(--wh);border-radius:var(--rc);padding:22px;box-shadow:var(--sh);}
.stats{display:grid;gap:14px;margin-bottom:22px;}
.sc{background:var(--wh);border-radius:var(--rc);padding:18px 22px;box-shadow:var(--sh);position:relative;overflow:hidden;}
.sc::after{content:'';position:absolute;top:-24px;right:-14px;width:68px;height:68px;background:var(--p10);border-radius:50%;}
.sn{font-size:32px;font-weight:700;color:var(--dk);line-height:1;}
.sl{font-size:13px;color:#888;margin-top:4px;}
.chip{display:inline-block;font-size:11px;padding:3px 10px;border-radius:var(--rp);font-weight:600;margin-top:8px;}
.cb{background:var(--p10);color:var(--p);} .cg{background:rgba(29,185,123,.1);color:var(--ok);}
.cy{background:rgba(245,158,11,.1);color:var(--warn);} .cr{background:rgba(232,64,64,.1);color:var(--err);}
.clt{background:var(--lt);color:#888;}
/* --- SURVEY LIST --- */
.sl-list{display:flex;flex-direction:column;gap:10px;}
.sli{background:var(--wh);border-radius:var(--rc);padding:16px 20px;box-shadow:var(--sh);display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .15s;border:1.5px solid transparent;}
.sli:hover{border-color:var(--p20);transform:translateY(-1px);}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.da{background:var(--ok);}.dd{background:#ccc;}.dc{background:var(--err);}.ds{background:#8B5CF6;}
.sin{flex:1;min-width:0;}
.sn2{font-size:15px;font-weight:600;color:var(--dk);}
.sm{font-size:12px;color:#888;margin-top:3px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.sac{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--rp);}
/* --- FORM --- */
.fg{margin-bottom:16px;}
.fl{font-size:13px;font-weight:600;color:var(--dk);margin-bottom:5px;display:block;}
.fi{width:100%;padding:10px 14px;border:1.5px solid #E0E0E0;border-radius:8px;font-family:var(--fn);font-size:14px;color:var(--gr);background:var(--wh);transition:border .15s;outline:none;}
.fi:focus{border-color:var(--p);}
.fta{min-height:80px;resize:vertical;}
.fh{font-size:12px;color:#aaa;margin-top:4px;}
.tw{display:flex;align-items:center;gap:10px;}
.tog{position:relative;width:40px;height:22px;flex-shrink:0;}
.tog input{opacity:0;width:0;height:0;position:absolute;}
.ts{position:absolute;inset:0;background:#ccc;border-radius:11px;cursor:pointer;transition:.2s;}
.ts::before{content:'';position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.tog input:checked+.ts{background:var(--p);}
.tog input:checked+.ts::before{transform:translateX(18px);}
.tc{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* --- QUESTIONS --- */
.qc{background:var(--wh);border:1.5px solid #E8E8E8;border-radius:var(--rc);padding:16px;margin-bottom:10px;}
.qc:hover{border-color:var(--p20);}
.qn{width:24px;height:24px;border-radius:50%;background:var(--p10);color:var(--p);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qt{font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--rp);background:var(--lt);color:#888;}
.aqs{border:2px dashed #E0E0E0;border-radius:var(--rc);padding:12px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.aqb{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:var(--rp);background:var(--wh);border:1.5px solid #E0E0E0;color:var(--gr);font-family:var(--fn);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;}
.aqb:hover{border-color:var(--p);color:var(--p);background:var(--p10);}
.opl{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.or{display:flex;gap:7px;align-items:center;}
.rb{background:none;border:none;color:#ccc;font-size:20px;cursor:pointer;padding:0 3px;transition:color .15s;line-height:1;min-width:24px;min-height:24px;border-radius:6px;}
.rb:hover{color:var(--err);}
.ao{background:none;border:1.5px dashed #D8D8D8;color:#999;font-family:var(--fn);font-size:13px;padding:7px 12px;border-radius:8px;cursor:pointer;width:100%;margin-top:7px;transition:all .15s;}
.ao:hover{border-color:var(--p);color:var(--p);}
/* --- RESULTS --- */
.rg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.rcd{background:var(--wh);border-radius:var(--rc);padding:20px;box-shadow:var(--sh);}
.rq{font-size:14px;font-weight:600;color:var(--dk);margin-bottom:14px;}
.chw{position:relative;height:190px;}
/* Caixa de respostas abertas. Antes era um max-height fixo de 190px: com uma
   resposta longa cabia UMA e a rolagem era quase invisível. Agora a caixa é
   mais alta, a barra de rolagem aparece sempre e o botão "Ver todas" abre. */
.tl{display:flex;flex-direction:column;gap:7px;overflow-y:auto;scrollbar-gutter:stable;}
.tl-cut{max-height:320px;
  /* desfoque no rodapé sinaliza que tem mais conteúdo abaixo */
  mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent 100%);}
.tl-full{max-height:none;overflow-y:visible;}
.tl::-webkit-scrollbar{width:9px;}
.tl::-webkit-scrollbar-track{background:var(--lt);border-radius:6px;}
.tl::-webkit-scrollbar-thumb{background:#c9d2e0;border-radius:6px;}
.tl::-webkit-scrollbar-thumb:hover{background:#a9b6c9;}
.tl-mais{margin-top:9px;width:100%;}
.ti{background:var(--lt);border-radius:8px;padding:9px 12px;font-size:13px;white-space:pre-wrap;word-break:break-word;}
.ti strong{color:var(--p);font-size:11px;display:block;margin-bottom:2px;}
.sb2{display:flex;align-items:center;gap:9px;margin-bottom:6px;}
.sl2{font-size:13px;color:#888;width:16px;text-align:center;flex-shrink:0;}
.str{flex:1;background:var(--lt);border-radius:4px;height:7px;overflow:hidden;}
.stf{height:100%;background:var(--p);border-radius:4px;}
.sct{font-size:12px;color:#888;width:28px;text-align:right;flex-shrink:0;}
.avg{display:inline-flex;align-items:center;gap:6px;background:var(--p10);color:var(--p);border-radius:var(--rp);padding:4px 12px;font-size:13px;font-weight:600;margin-top:8px;}
/* --- TABLE --- */
.tw2{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:14px;}
thead th{text-align:left;font-size:12px;font-weight:600;color:#888;padding:9px 12px;border-bottom:1px solid #F0F0F0;white-space:nowrap;}
tbody td{padding:11px 12px;border-bottom:1px solid #F9F9F9;vertical-align:middle;}
tbody tr:hover td{background:#FAFAFA;}
.cpfm{font-family:monospace;font-size:13px;color:#888;}
.sdot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px;}
/* --- MODAL --- */
.ov{position:fixed;inset:0;background:rgba(4,18,42,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.mo{position:relative;background:var(--wh);border-radius:16px;padding:30px;width:100%;max-width:480px;box-shadow:0 8px 40px rgba(0,0,0,.18);max-height:90vh;overflow-y:auto;}
.mo-lg{max-width:620px;}
/* Detalhes do dashboard (tabelas de turnover, headcount, listas por área)
   viviam espremidos nos 620px — agora respiram (26/08). */
.mo-xl{max-width:min(1060px,94vw);}
.mt{font-size:18px;font-weight:700;color:var(--dk);margin-bottom:3px;padding-right:34px;}
.ms{font-size:13px;color:#888;margin-bottom:20px;}
/* Cabeçalho de modal com título + botão fechar */
.mh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;}
.mh .mt,.mh .ms{padding-right:0;margin:0;}
.mh .ms{margin-top:3px;}
/* Botão fechar (X) — redondo, fixo no canto superior direito de qualquer modal */
.mxb{position:absolute;top:16px;right:16px;width:30px;height:30px;flex-shrink:0;border:none;border-radius:50%;background:var(--lt);color:#64748B;font-size:18px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s,color .15s;z-index:3;}
.mxb:hover{background:rgba(232,64,64,.12);color:#E84040;}
/* --- LANDING --- */
.land{min-height:100vh;background:var(--wh);display:flex;flex-direction:column;}
.land-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 48px;border-bottom:1px solid #F0F0F0;}
.logo-wrap{display:flex;align-items:center;gap:12px;}
.logo-ico{width:40px;height:40px;background:var(--p);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;font-family:var(--fn);}
.logo-name{font-size:22px;font-weight:700;color:var(--dk);letter-spacing:-.5px;}
.logo-name span{color:var(--p);}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 48px 48px;text-align:center;}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:var(--p10);color:var(--p);border-radius:var(--rp);padding:6px 16px;font-size:13px;font-weight:600;margin-bottom:28px;}
.hero-h{font-size:52px;font-weight:700;color:var(--dk);line-height:1.1;max-width:700px;letter-spacing:-1.5px;}
.hero-h span{color:var(--p);}
.hero-sub{font-size:18px;color:#888;margin-top:16px;max-width:520px;line-height:1.6;}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:820px;width:100%;margin:52px auto 0;}
.feat{background:var(--lt);border-radius:16px;padding:24px;text-align:left;}
.feat-ic{font-size:28px;margin-bottom:12px;}
.feat-t{font-size:16px;font-weight:700;color:var(--dk);margin-bottom:6px;}
.feat-s{font-size:14px;color:#888;line-height:1.5;}
.land-footer{padding:24px 48px;border-top:1px solid #F0F0F0;display:flex;align-items:center;justify-content:space-between;}
.lf-left{font-size:13px;color:#aaa;}
.lf-right{font-size:13px;color:#aaa;}
/* --- AUTH --- */
.auth-page{min-height:100vh;background:var(--lt);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;}
.gcard{background:var(--wh);border-radius:16px;padding:36px;width:100%;max-width:400px;box-shadow:var(--sh);text-align:center;}
.g-logo{display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:24px;}
.g-dot{width:14px;height:14px;border-radius:50%;}
.fa-inp{width:100%;padding:13px 16px;border:1.5px solid #E0E0E0;border-radius:10px;font-family:var(--fn);font-size:15px;color:var(--dk);outline:none;transition:border .15s;margin-bottom:14px;text-align:center;}
.fa-inp:focus{border-color:var(--p);}
.otp-wrap{display:flex;gap:10px;justify-content:center;margin-bottom:20px;}
.otp-d{width:48px;height:56px;border:2px solid #E0E0E0;border-radius:10px;font-size:24px;font-weight:700;color:var(--dk);text-align:center;font-family:var(--fn);outline:none;transition:border .15s;}
.otp-d:focus{border-color:var(--p);}
.tfa-sent{background:var(--p10);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--p);margin-bottom:20px;font-weight:500;}
/* --- RESPOND --- */
.rs{min-height:100vh;display:flex;flex-direction:column;background:var(--lt);}
.rh{background:var(--wh);border-bottom:1px solid #EBEBEB;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;}
.rl{font-size:18px;font-weight:700;color:var(--dk);}
.rl span{color:var(--p);}
.rb2{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;}
.rcard{background:var(--wh);border-radius:16px;padding:34px;width:100%;max-width:560px;box-shadow:var(--sh);}
.prog{height:4px;background:#E8E8E8;border-radius:2px;overflow:hidden;margin-bottom:26px;}
.pf{height:100%;background:var(--p);border-radius:2px;transition:width .3s;}
.qt2{font-size:20px;font-weight:700;color:var(--dk);margin-bottom:22px;line-height:1.4;}
.ch{display:flex;flex-direction:column;gap:9px;}
.cho{background:var(--lt);border:2px solid transparent;border-radius:10px;padding:13px 16px;cursor:pointer;font-size:15px;color:var(--gr);transition:all .15s;font-family:var(--fn);text-align:left;}
.cho:hover{border-color:var(--p20);background:var(--p10);}
.cho.sel{border-color:var(--p);background:var(--p10);color:var(--p);font-weight:600;}
.sco{display:flex;gap:8px;flex-wrap:wrap;}
.so{width:50px;height:50px;border-radius:10px;border:2px solid #E0E0E0;background:var(--wh);font-size:18px;font-weight:700;color:#aaa;cursor:pointer;transition:all .15s;font-family:var(--fn);}
.so:hover{border-color:var(--p);color:var(--p);}
.so.sel{background:var(--p);border-color:var(--p);color:#fff;}
.sla{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:#bbb;}
.ota{width:100%;min-height:110px;padding:12px 14px;border:2px solid #E0E0E0;border-radius:10px;font-family:var(--fn);font-size:15px;color:var(--gr);resize:vertical;outline:none;transition:border .15s;}
.ota:focus{border-color:var(--p);}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.yno{border:2px solid #E0E0E0;border-radius:12px;padding:16px;cursor:pointer;font-size:16px;font-weight:700;text-align:center;transition:all .15s;font-family:var(--fn);}
.yy{color:var(--ok);}.yn2{color:var(--err);}
.yno.sel.yy{background:rgba(29,185,123,.1);border-color:var(--ok);}
.yno.sel.yn2{background:rgba(232,64,64,.1);border-color:var(--err);}
.yno:hover{transform:translateY(-2px);}
.nb{display:flex;justify-content:space-between;margin-top:26px;gap:10px;}
.cpf-i{width:100%;text-align:center;font-size:20px;font-weight:700;letter-spacing:4px;padding:13px;border:2px solid #E0E0E0;border-radius:12px;font-family:monospace;color:var(--dk);outline:none;transition:border .15s;margin-bottom:14px;}
.cpf-i:focus{border-color:var(--p);}
/* --- MISC --- */
.nic{display:inline-flex;align-items:center;gap:5px;background:rgba(29,185,123,.1);color:var(--ok);border-radius:var(--rp);padding:4px 12px;font-size:12px;font-weight:600;}
.iic{display:inline-flex;align-items:center;gap:5px;background:var(--p10);color:var(--p);border-radius:var(--rp);padding:4px 12px;font-size:12px;font-weight:600;}
.notif{position:fixed;top:18px;right:18px;z-index:2000;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:0 4px 24px rgba(0,0,0,.18);color:#fff;animation:fin .2s ease;}
@keyframes fin{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.gtw{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.gtag{display:inline-flex;align-items:center;gap:4px;background:var(--p10);color:var(--p);border-radius:var(--rp);padding:4px 10px;font-size:12px;font-weight:600;}
.gtag button{background:none;border:none;cursor:pointer;color:var(--p);font-size:14px;line-height:1;padding:0;min-width:24px;min-height:24px;border-radius:6px;}
.divider{height:1px;background:#EBEBEB;margin:16px 0;}
.empty{text-align:center;padding:48px 24px;}
.ei{font-size:44px;margin-bottom:14px;color:#B9C7E2;}
.ei .lv-sb-ic{width:40px;height:40px;stroke-width:1.4;}
.et{font-size:17px;font-weight:700;color:var(--dk);margin-bottom:6px;}
.es{font-size:14px;color:#888;}
.code-box{background:var(--dk);color:#fff;font-size:26px;font-weight:700;letter-spacing:6px;border-radius:12px;padding:14px 22px;text-align:center;font-family:monospace;margin:12px 0;}
.dlist{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto;margin:12px 0;}
.di{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--lt);border-radius:8px;font-size:13px;}
.di input[type=checkbox]{accent-color:var(--p);width:15px;height:15px;flex-shrink:0;cursor:pointer;}
.dav{width:28px;height:28px;border-radius:50%;background:var(--p10);color:var(--p);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* Quando há foto do Workspace o avatar vira <img> com a mesma classe. */
img.dav{object-fit:cover;background:var(--lt);}
.dn{font-weight:600;color:var(--dk);}
.de2{font-size:12px;color:#888;}
.drop-zone{border:2px dashed #D0D0D0;border-radius:var(--rc);padding:32px;text-align:center;cursor:pointer;transition:all .2s;}
.drop-zone:hover,.drop-zone.drag{border-color:var(--p);background:var(--p10);}
.drop-zone .dz-icon{font-size:36px;margin-bottom:10px;}
.drop-zone .dz-title{font-size:15px;font-weight:600;color:var(--dk);margin-bottom:4px;}
.drop-zone .dz-sub{font-size:13px;color:#888;}
.import-preview{overflow-x:auto;max-height:280px;overflow-y:auto;margin:14px 0;}
.ab{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.rol-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--rp);}
.r-sa{background:rgba(0,87,255,.12);color:var(--p);}
.r-ad{background:rgba(29,185,123,.1);color:var(--ok);}
.r-vi{background:var(--lt);color:#888;}
.info-box{background:var(--p10);border:1px solid var(--p20);border-radius:var(--rc);padding:14px 16px;font-size:13px;color:var(--p);line-height:1.6;}
.ep{background:var(--lt);border-radius:10px;padding:14px;font-size:13px;color:var(--gr);line-height:1.7;border:1px solid #E8E8E8;margin:10px 0;}
.ep .epl{color:var(--p);font-weight:600;text-decoration:underline;cursor:pointer;background:none;border:0;padding:2px 0;font:inherit;min-height:24px;}
@keyframes spin{to{transform:rotate(360deg);}}
.spinner{width:22px;height:22px;border:3px solid rgba(0,87,255,.2);border-top-color:var(--p);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}
.email-body{background:#FAFAFA;border:1px solid #E8E8E8;border-radius:10px;padding:18px 20px;font-size:13px;color:var(--gr);line-height:1.8;white-space:pre-wrap;max-height:320px;overflow-y:auto;font-family:var(--fn);}
.email-subject{font-size:13px;font-weight:600;color:var(--dk);padding:10px 14px;background:var(--p10);border-radius:8px;margin-bottom:12px;border-left:3px solid var(--p);}
.copy-flash{color:var(--ok);font-size:12px;font-weight:600;margin-left:8px;opacity:0;transition:opacity .3s;}
.copy-flash.show{opacity:1;}
.zb-section{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
@media(max-width:720px){.zb-section,.tc,.feats,.stats{grid-template-columns:1fr;}}
/* --- LOGO --- */
.logo-img{width:38px;height:38px;border-radius:10px;object-fit:contain;flex-shrink:0;}
.logo-img-sm{width:36px;height:36px;border-radius:6px;object-fit:contain;}
/* --- TEMPLATES --- */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:24px;}
.tpl-card{background:var(--wh);border:1.5px solid #E8E8E8;border-radius:var(--rc);padding:18px;cursor:pointer;transition:all .15s;position:relative;}
.tpl-card:hover{border-color:var(--p);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,87,255,.1);}
.tpl-star{position:absolute;top:12px;right:12px;background:none;border:none;font-size:18px;cursor:pointer;padding:2px;line-height:1;transition:transform .15s;}
.tpl-star:hover{transform:scale(1.2);}
.tpl-name{font-size:14px;font-weight:700;color:var(--dk);margin-bottom:4px;padding-right:28px;}
.tpl-meta{font-size:12px;color:#888;margin-bottom:12px;}
.tpl-use-btn{width:100%;padding:8px;border-radius:var(--rp);background:var(--p);color:#fff;font-family:var(--fn);font-size:13px;font-weight:600;border:none;cursor:pointer;transition:background .15s;}
.tpl-use-btn:hover{background:#0048d4;}
.tpl-empty{text-align:center;padding:40px 20px;color:#aaa;font-size:14px;}
/* --- SYNC STATUS --- */
.sync-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--rp);}
.sync-ok{background:rgba(29,185,123,.1);color:var(--ok);}
.sync-warn{background:rgba(245,158,11,.1);color:var(--warn);}

/* ── RESPOND INTRO ANIMATIONS ── */
@keyframes logoIntro {
  0%   { transform:scale(0.3); opacity:0; }
  35%  { transform:scale(1.18); opacity:1; }
  60%  { transform:scale(0.95); }
  80%  { transform:scale(1); }
  100% { transform:scale(1); opacity:1; }
}
@keyframes formFadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes overlayOut {
  0%,70% { opacity:1; }
  100%   { opacity:0; pointer-events:none; visibility:hidden; }
}
.intro-overlay {
  position:fixed; inset:0; z-index:999;
  background:var(--dk);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:14px;
  animation:overlayOut 2.4s cubic-bezier(.4,0,.6,1) forwards;
  pointer-events:none;
}
.intro-logo {
  animation:logoIntro 2.4s cubic-bezier(.4,0,.2,1) forwards;
  transform-origin:center;
}
.intro-tagline {
  color:rgba(255,255,255,.5); font-size:12px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  opacity:0; animation:formFadeUp .5s ease .7s forwards;
}
.form-appear  { animation:formFadeUp .55s ease 2.5s both; }
.rcard-anim   { animation:formFadeUp .6s  ease 2.6s both; }
/* Answer hover micro-interactions */
.cho:hover:not(.sel){ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,87,255,.1); }
.so:hover:not(.sel) { transform:scale(1.1); }
.yno:hover          { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.08); }
/* Progress bar shine on advance */
.pf::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);
  animation:shine .8s ease forwards;
}
@keyframes shine { from{transform:translateX(-100%)} to{transform:translateX(200%)} }
.pf { position:relative; overflow:hidden; }
/* Done celebration pulse */
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.done-icon-anim { animation:pulse 1s ease .4s 2; }
/* P2.4 — Print CSS para exportar resultados em PDF (via window.print).
   Esconde sidebar, botões e headers; maximiza área de conteúdo. */
@media print {
  body { background:#fff !important; }
  .sb, .ab, .notif, .ov, #see-all-btn, #rmd-btn, #exp-btn, #pdf-btn, #gs-btn,
  .dp2-btn, .sac, #back-r-btn, .sb-foot, .sb-top, .sb-user, .sb-nav { display:none !important; }
  .shell, .shell > div { display:block !important; }
  .main { padding:0 !important; background:#fff !important; }
  .rcd, .card { box-shadow:none !important; border:1px solid #ddd !important; page-break-inside:avoid; }
  .rg { display:block !important; }
  .chw { height:220px !important; }
  .pt { font-size:22px !important; }
  /* Na impressão a caixa de respostas não pode ficar cortada nem rolando —
     ou sai tudo (PDF completo) ou nada (PDF resumo, regra abaixo). */
  .tl { max-height:none !important; overflow:visible !important;
        mask-image:none !important; -webkit-mask-image:none !important; }
  .tl-mais { display:none !important; }
  /* PDF resumo: gráficos e consolidado, SEM listar cada resposta.
     A reclamação era o PDF sair com todas as respostas, uma por uma. */
  body.res-print-resumo .tl,
  body.res-print-resumo .res-raw,
  body.res-print-resumo #resp-list { display:none !important; }
}

/* P3.4 — Modal de busca global */
.search-modal { max-width:620px; }
.search-modal .fi { font-size:16px; padding:14px 18px; }
.search-result {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:10px; cursor:pointer; transition:background .1s;
}
.search-result:hover { background:var(--p10); }
.search-result-icon { font-size:20px; width:36px; text-align:center; }
.search-result-title { font-weight:600; font-size:14px; color:var(--dk); }
.search-result-sub { font-size:12px; color:#888; }

/* Word cloud */
.word-cloud { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:12px; }
.wc-term {
  padding:4px 10px; border-radius:14px; background:var(--p10); color:var(--p);
  font-weight:600; transition:transform .15s;
}
.wc-term:hover { transform:scale(1.08); }

/* ════════════════════════════════════════════════════════════════════════
   LOVABLE DESIGN SYSTEM (Single Source of Truth — Fase 6)
   Atualizado pra refletir EXATAMENTE o design validado no Lovable:
     • Paleta: electric blue 230 100% 60% (primary), violet 260, cyan 200
     • Fonte: Inter (carregada no index.html)
     • Glass: white 60% bg + blur 24px saturate 180%
     • Radius: 0.875rem (14px) base, 1rem (16px) em cards grandes
   Tokens com prefixo --dc-* e classes .dc-*. Não conflita com admin antigo.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  /* Brand — o azul da Docato (#0057FF em HSL), alinhado ao site e ao portal */
  --dc-primary:219 100% 50%;
  --dc-primary-glow:217 100% 62%;
  --dc-primary-deep:222 90% 34%;
  --dc-primary-soft:219 100% 96%;
  /* Acento secundário (violeta) e tércio (cyan) — usados nos gradientes */
  --dc-violet:260 90% 65%;
  --dc-cyan:200 100% 55%;
  /* Aliases legados pra compat com classes existentes */
  --dc-blue:219 100% 50%;
  --dc-blue-light:217 100% 62%;
  --dc-royal:235 85% 35%;
  --dc-indigo:260 90% 65%;
  --dc-sky:205 100% 88%;
  --dc-ice:200 100% 96%;
  /* Neutros */
  --dc-bg:0 0% 100%;
  --dc-fg:222 47% 8%;
  --dc-muted:220 10% 45%;
  --dc-muted-soft:220 20% 96%;
  --dc-border:220 20% 92%;
  --dc-card-bg:0 0% 100%;
  /* Estados */
  --dc-warning:32 95% 50%;
  --dc-success:152 76% 42%;
  /* Geometria */
  --dc-radius:0.875rem;
  --dc-radius-lg:1.25rem;
  /* Gradientes (mesh + brand) — derivados das HSL acima */
  --dc-grad-mesh:
    radial-gradient(at 20% 30%, hsl(var(--dc-primary)/.35) 0px, transparent 50%),
    radial-gradient(at 80% 20%, hsl(var(--dc-violet)/.30) 0px, transparent 50%),
    radial-gradient(at 70% 80%, hsl(var(--dc-cyan)/.25) 0px, transparent 50%),
    radial-gradient(at 20% 90%, hsl(var(--dc-primary-deep)/.20) 0px, transparent 50%);
  --dc-grad-brand:linear-gradient(135deg,hsl(var(--dc-primary)) 0%,hsl(var(--dc-violet)) 50%,hsl(var(--dc-cyan)) 100%);
  /* Sombras — soft pra cards padrão, glow pra CTAs e elementos hover */
  --dc-shadow-soft:0 1px 2px hsl(222 47% 8%/.04),0 8px 24px -8px hsl(222 47% 8%/.08);
  --dc-shadow-card:var(--dc-shadow-soft);
  --dc-shadow-glow:0 20px 60px -20px hsl(var(--dc-primary)/.45);
  --dc-shadow-elevated:0 24px 64px -16px hsl(var(--dc-primary)/.18);
  --dc-ease:cubic-bezier(.32,.72,0,1);
}

/* Backgrounds */
.dc-page{
  min-height:100vh;position:relative;overflow:hidden;
  background:hsl(var(--dc-bg));
  color:hsl(var(--dc-fg));
  font-family:var(--fn);
}
.dc-bg-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.dc-bg-mesh{position:absolute;inset:0;background:var(--dc-grad-mesh);opacity:.9;}
.dc-bg-grid{
  position:absolute;inset:0;opacity:.6;
  background-image:
    linear-gradient(hsl(var(--dc-blue)/.08) 1px,transparent 1px),
    linear-gradient(90deg,hsl(var(--dc-blue)/.08) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
}
.dc-blob{position:absolute;border-radius:50%;filter:blur(48px);}
.dc-blob-a{top:-128px;left:-96px;width:420px;height:420px;background:linear-gradient(135deg,hsl(var(--dc-cyan)/.40),hsl(var(--dc-blue)/.20));animation:dcBlob 18s ease-in-out infinite;}
.dc-blob-b{top:33%;right:-128px;width:460px;height:460px;background:linear-gradient(135deg,hsl(var(--dc-blue)/.30),hsl(var(--dc-indigo)/.20));animation:dcBlob 26s ease-in-out infinite;}
.dc-blob-c{bottom:-128px;left:33%;width:380px;height:380px;background:linear-gradient(135deg,hsl(var(--dc-sky)/.50),hsl(var(--dc-cyan)/.30));animation:dcBlob 18s ease-in-out infinite -8s;}
.dc-dot{position:absolute;border-radius:50%;animation:dcFloat 6s ease-in-out infinite;}
.dc-dot-a{top:96px;right:25%;width:8px;height:8px;background:hsl(var(--dc-cyan));}
.dc-dot-b{top:50%;left:64px;width:6px;height:6px;background:hsl(var(--dc-blue));animation-duration:9s;}
.dc-dot-c{bottom:96px;right:33%;width:8px;height:8px;background:hsl(var(--dc-indigo)/.7);animation-delay:-3s;}

/* Glass */
.dc-glass{
  background:hsla(0,0%,100%,.65);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
          backdrop-filter:blur(20px) saturate(180%);
  border:1px solid hsla(0,0%,100%,.6);
}
.dc-glass-strong{
  background:hsla(0,0%,100%,.85);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
          backdrop-filter:blur(24px) saturate(180%);
  border:1px solid hsla(0,0%,100%,.7);
}

/* Texto e botões com gradient brand */
.dc-text-grad{
  background:var(--dc-grad-brand);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:200% 200%;animation:dcGradientX 8s ease infinite;
}
.dc-btn-brand{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--dc-grad-brand);color:#fff;border:none;cursor:pointer;
  border-radius:9999px;font-weight:700;font-family:var(--fn);
  padding:14px 28px;font-size:15px;
  box-shadow:var(--dc-shadow-glow);
  transition:transform .15s,opacity .15s;
}
.dc-btn-brand:hover{opacity:.95;transform:translateY(-1px);}
.dc-btn-brand:disabled{opacity:.4;box-shadow:none;cursor:not-allowed;transform:none;}
.dc-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:hsl(var(--dc-muted));
  border:none;cursor:pointer;border-radius:9999px;
  font-weight:600;font-family:var(--fn);padding:11px 20px;font-size:14px;
}
.dc-btn-ghost:hover{color:hsl(var(--dc-fg));background:hsla(0,0%,0%,.04);}

/* Pulse ring (botão com aura) */
.dc-pulse-wrap{position:relative;display:inline-block;}
.dc-pulse-ring{
  position:absolute;inset:0;border-radius:9999px;
  pointer-events:none; /* não bloqueia o clique no botão */
  animation:dcPulseRing 2.4s cubic-bezier(.4,0,.6,1) infinite;
}

/* Cartão central das telas Auth/2FA */
.dc-card{
  border-radius:24px;padding:32px;
  box-shadow:var(--dc-shadow-elevated);
}
.dc-input{
  width:100%;height:48px;padding:0 16px;
  border:2px solid hsl(var(--dc-border));
  border-radius:12px;
  background:hsla(0,0%,100%,.8);
  font-family:var(--fn);font-size:15px;color:hsl(var(--dc-fg));
  transition:border-color .15s,box-shadow .15s;
}
.dc-input:focus{outline:none;border-color:hsl(var(--dc-blue));box-shadow:var(--dc-shadow-glow);}
.dc-otp{
  width:48px;height:56px;border-radius:12px;
  border:2px solid hsl(var(--dc-border));
  background:hsla(0,0%,100%,.8);
  font-family:var(--fn);font-size:24px;font-weight:700;text-align:center;
  color:hsl(var(--dc-fg));transition:all .15s;
}
.dc-otp:focus{outline:none;border-color:hsl(var(--dc-blue));}
.dc-otp.filled{border-color:hsl(var(--dc-blue));color:hsl(var(--dc-blue));box-shadow:var(--dc-shadow-glow);transform:scale(1.05);}

/* Pílula de etapa / categoria no topo */
.dc-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:9999px;
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:hsl(var(--dc-blue));
}

/* Animações */
@keyframes dcFloat {
  0%,100%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-18px) translateX(8px);}
}
@keyframes dcBlob {
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(30px,-20px) scale(1.08);}
  66%{transform:translate(-20px,20px) scale(.95);}
}
@keyframes dcPulseRing {
  0%{box-shadow:0 0 0 0 hsl(var(--dc-blue)/.45);}
  70%{box-shadow:0 0 0 18px hsl(var(--dc-blue)/0);}
  100%{box-shadow:0 0 0 0 hsl(var(--dc-blue)/0);}
}
@keyframes dcGradientX {
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
@keyframes dcFadeUp {
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes dcScaleIn {
  from{opacity:0;transform:scale(.95);}
  to{opacity:1;transform:scale(1);}
}
.dc-fade-up{animation:dcFadeUp .6s ease both;}
.dc-fade-up-d1{animation:dcFadeUp .6s ease .1s both;}
.dc-fade-up-d2{animation:dcFadeUp .6s ease .2s both;}
.dc-fade-up-d3{animation:dcFadeUp .6s ease .35s both;}
.dc-fade-up-d4{animation:dcFadeUp .6s ease .5s both;}
.dc-scale-in{animation:dcScaleIn .5s ease both;}

/* ════════════════════════════════════════════════════════════════════════
   TIMELINE (Fase 2) — eventos da jornada do colaborador
   ════════════════════════════════════════════════════════════════════════ */
.tl-line { position:relative; padding-left:30px; }
.tl-line::before {
  content:''; position:absolute; left:13px; top:0; bottom:0;
  width:2px; background:linear-gradient(180deg, var(--p20), transparent);
}
.tl-event { position:relative; margin-bottom:18px; }
.tl-event:last-child { margin-bottom:0; }
.tl-dot {
  position:absolute; left:-30px; top:8px;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:3px solid var(--p);
  box-shadow:0 1px 6px rgba(0,0,0,.08); z-index:1;
}
.tl-card {
  background:#fff; border-radius:12px; padding:14px 16px;
  border-left:4px solid var(--p);
  box-shadow:0 1px 8px rgba(4,18,42,.06);
  transition:box-shadow .15s, transform .15s;
}
.tl-card:hover { box-shadow:0 3px 14px rgba(4,18,42,.10); }

/* Card de colaborador na lista */
.tl-card-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(4,18,42,.10);
  border-color:var(--p20);
}


/* ════════════════════════════════════════════════════════════════════════
   KANBAN (Fase 3) — funil de candidatos arrastável
   ════════════════════════════════════════════════════════════════════════ */
/* Colunas geradas conforme as etapas (padrão + criadas pelo People) — não fixa em 7 */
.kanban {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(215px, 1fr);
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
}
.kb-col {
  background:rgba(0,0,0,.02);
  border-radius:12px;
  padding:6px;
  display:flex; flex-direction:column;
  min-height:280px;
}
.kb-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  background:#fff;
  border-radius:10px;
  border-top:3px solid var(--p);
  margin-bottom:8px;
  box-shadow:0 1px 4px rgba(4,18,42,.06);
}
.kb-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 8px;
  border-radius:9999px;
  font-size:11px; font-weight:700;
}
.kb-list {
  display:flex; flex-direction:column; gap:8px;
  flex:1;
  padding:4px;
  border-radius:8px;
  transition:background .15s;
  min-height:60px;
  /* lista longa rola dentro da coluna, em vez de esticar a página */
  max-height:min(62vh, 620px);
  overflow-y:auto;
}
.kb-list::-webkit-scrollbar{width:8px;}
.kb-list::-webkit-scrollbar-thumb{background:rgba(4,18,42,.14);border-radius:99px;}
.kb-head{gap:8px;}
/* "Ver mais N" / "Mostrar menos" no fim da coluna */
.kb-more{
  border:1px dashed hsl(var(--dc-border),#dde3f0); background:#fff; color:var(--p,#0057FF);
  font-family:inherit; font-size:11.5px; font-weight:650; padding:7px; border-radius:9px; cursor:pointer;
}
.kb-more:hover{background:rgba(0,87,255,.06);}
/* Remover coluna criada pelo People */
.kb-colx{border:none;background:none;color:#aaa;font-size:17px;line-height:1;cursor:pointer;padding:0 2px;}
.kb-colx:hover{color:#E84040;}
/* Coluna final: criar nova etapa */
.kb-addcol{background:none;border:1.5px dashed rgba(4,18,42,.14);align-items:center;justify-content:center;text-align:center;gap:6px;}
.kb-addbtn{
  border:none;background:var(--p,#0057FF);color:#fff;font-family:inherit;font-weight:700;font-size:12.5px;
  padding:9px 14px;border-radius:9999px;cursor:pointer;
}
.kb-addcol p{margin:0;font-size:11px;color:#8b93a7;padding:0 10px;}
.kb-list.drag-over {
  background:rgba(0,87,255,.06);
  outline:2px dashed var(--p);
  outline-offset:-4px;
}
.kb-empty {
  text-align:center; color:#bbb; font-size:11px; font-style:italic;
  padding:18px 4px;
}
/* ── Scroll-reveal dos cards do portal (fase 2 do alinhamento com o site) ──
   O card entra como no docato.com.br: sobe 14px e revela. As classes são
   postas por JS (ppReveals) — sem JS nada fica oculto — e o card que renasce
   num re-render já COM as duas classes pinta direto no estado final (transição
   só anima mudança de estado, não estado inicial): é o que impede o pisca. */
.pp-reveal { opacity:0; transform:translateY(14px); }
.pp-reveal.pp-revelado {
  opacity:1; transform:none;
  transition:opacity .55s ease var(--pp-rv-d,0s),
             transform .6s cubic-bezier(.22,.9,.35,1) var(--pp-rv-d,0s);
}
@media (prefers-reduced-motion: reduce) {
  .pp-reveal { opacity:1; transform:none; }
  .pp-reveal.pp-revelado { transition:none; }
}

/* ── Docato Hub (iframe do catálogo de apps no portal) ─────────────────────
   Vive AQUI, e não no <style> do portal em app.js, de propósito: o shell fica
   fora do #app (o render() destruiria um iframe lá dentro), então o CSS dele
   também precisa sobreviver ao render — o style.css é carregado uma vez só. */
#pp-hub-shell {
  /* Tela INTEIRA: a barra do portal ficava espremendo o hub e o usuário não
     gostou da "faixa". O caminho de volta é o botão ← dentro do próprio hub
     (ele manda postMessage 'hub-fechar' e o portal fecha o shell). */
  position:fixed; inset:0;
  z-index:35;              /* cobre a barra do portal (30); modais do portal não abrem com o hub na frente */
  display:none; background:#F8FAFC;
  /* Transição suave portal → hub: fade + um zoom quase imperceptível.
     Só opacity e transform — os dois rodam na GPU, sem repintura. */
  opacity:0; transform:scale(1.02);
  transition:opacity .28s ease, transform .34s cubic-bezier(.22,.9,.35,1);
}
#pp-hub-shell.armado { display:block; }                 /* fase 1: entra no DOM */
#pp-hub-shell.on { opacity:1; transform:none; }         /* fase 2: anima */
#pp-hub-shell:not(.on) { pointer-events:none; }         /* durante o fade-out, o clique atravessa */
body.pp-hub-on { overflow:hidden; }   /* o portal atrás para de rolar */

/* Véu da primeira abertura: o hub tem ~530 KB de JS; sem isto a pessoa via
   um iframe branco mudo. Some (em fade) quando o iframe termina de carregar. */
#pp-hub-shell .pp-hub-veu {
  position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  background:#F8FAFC; transition:opacity .3s ease;
}
#pp-hub-shell.carregado .pp-hub-veu { opacity:0; pointer-events:none; }
#pp-hub-shell .pp-hub-veu .m { display:grid; place-items:center; gap:12px; color:#8A93A6; font-size:13px; }
#pp-hub-shell .pp-hub-veu .sp {
  width:26px; height:26px; border-radius:50%;
  border:2.5px solid #E2E8F0; border-top-color:#0057FF;
  animation:pp-hub-gira .8s linear infinite;
}
@keyframes pp-hub-gira { to { transform:rotate(360deg); } }
#pp-hub-frame { opacity:0; transition:opacity .3s ease; }
#pp-hub-shell.carregado #pp-hub-frame { opacity:1; }

@media (prefers-reduced-motion: reduce) {
  #pp-hub-shell, #pp-hub-frame, #pp-hub-shell .pp-hub-veu { transition:none; }
  #pp-hub-shell .pp-hub-veu .sp { animation:none; }
}

/* ── Organograma (tela nativa do portal) ───────────────────────────────────
   Mesma razão do hub para viver aqui: o shell fica fora do #app e precisa de
   CSS que sobreviva ao render(). Identidade estrita do portal: DM Sans e
   #0057FF. A árvore é flex aninhado com conectores desenhados em CSS
   (::before/::after) — nenhuma biblioteca. */
#pp-org-shell {
  position:fixed; inset:0; z-index:35;
  display:none; background:#F8FAFC;
  font-family:'DM Sans', 'Inter', system-ui, sans-serif;
  opacity:0; transform:scale(1.02);
  transition:opacity .28s ease, transform .34s cubic-bezier(.22,.9,.35,1);
}
#pp-org-shell.armado { display:flex; flex-direction:column; }
#pp-org-shell.on { opacity:1; transform:none; }
#pp-org-shell:not(.on) { pointer-events:none; }

/* Barra de cima: voltar · título · busca · zoom */
#pp-org-shell .og-top {
  display:flex; align-items:center; gap:12px;
  padding:10px 18px; background:#fff;
  border-bottom:1px solid #E2E8F0; flex-shrink:0; z-index:3;
}
#pp-org-shell .og-voltar {
  width:34px; height:34px; border-radius:10px; border:1px solid #E2E8F0;
  background:#fff; color:#0F1729; font-size:16px; cursor:pointer;
  display:grid; place-items:center;
  transition:border-color .15s, color .15s, background .15s;
}
#pp-org-shell .og-voltar:hover { border-color:#0057FF; color:#0057FF; background:#F0F5FF; }
#pp-org-shell .og-titulo { display:flex; align-items:baseline; gap:8px; min-width:0; }
#pp-org-shell .og-titulo b { font-size:15.5px; font-weight:700; color:#0F1729; letter-spacing:-.01em; }
#pp-org-shell .og-titulo span { font-size:12px; color:#65758B; white-space:nowrap; }
#pp-org-shell #og-busca {
  margin-left:auto; width:min(240px, 32vw);
  padding:7px 12px; border:1px solid #E2E8F0; border-radius:10px;
  font:inherit; font-size:13px; color:#0F1729; background:#F8FAFC; outline:none;
  transition:border-color .15s, background .15s;
}
#pp-org-shell #og-busca:focus { border-color:#0057FF; background:#fff; }
#pp-org-shell .og-acoes { display:flex; gap:6px; }
#pp-org-shell .og-acoes button {
  height:30px; padding:0 13px; border-radius:9999px;
  border:1px solid #E2E8F0; background:#fff;
  font:inherit; font-size:12px; font-weight:600; color:#465569;
  cursor:pointer; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
#pp-org-shell .og-acoes button:hover { border-color:#0057FF; color:#0057FF; background:#F0F5FF; }
#pp-org-shell .og-zoom { display:flex; gap:4px; }
#pp-org-shell .og-zoom button {
  width:30px; height:30px; border-radius:8px; border:1px solid #E2E8F0;
  background:#fff; color:#465569; font-size:14px; cursor:pointer;
  display:grid; place-items:center;
  transition:border-color .15s, color .15s, background .15s;
}
#pp-org-shell .og-zoom button:hover { border-color:#0057FF; color:#0057FF; }

/* O palco (25/08): rolagem NATIVA nos dois eixos — as barras são o controle
   de navegação. A árvore fica ancorada no TOPO e centralizada quando cabe
   (margin:0 auto); quando cresce, as barras aparecem e o zoom não se mexe. */
#og-viewport {
  flex:1; overflow:auto; position:relative;
  /* pontos discretos de fundo ("mapa") + um glow azul no topo que dá o clima
     de palco na tela de apresentação, sem pesar */
  background-image:
    radial-gradient(920px 340px at 50% -120px, rgba(0,87,255,.08), transparent 70%),
    radial-gradient(#DBE3EE 1px, transparent 1.5px);
  background-size:auto, 26px 26px;
  overscroll-behavior:contain;   /* a rolagem morre aqui, não vaza pro fundo */
  scrollbar-width:auto; scrollbar-color:#94A3B8 #EDF2F9;   /* Firefox */
}
#og-viewport::-webkit-scrollbar { width:13px; height:13px; }
#og-viewport::-webkit-scrollbar-track { background:#EDF2F9; }
#og-viewport::-webkit-scrollbar-thumb {
  background:#94A3B8; border-radius:9999px;
  border:3px solid #EDF2F9;   /* respiro: o polegar flutua no trilho */
}
#og-viewport::-webkit-scrollbar-thumb:hover { background:#64748B; }
#og-viewport::-webkit-scrollbar-corner { background:#EDF2F9; }
#og-mundo {
  width:max-content;
  margin:0 auto;              /* cabe na tela → centralizado; não cabe → barras */
  padding:24px 60px 80px;
}

/* ── A árvore: conectores em CSS ──────────────────────────────────────────
   Estrutura da referência do usuário (organograma clássico): card vertical
   com a foto saltando do topo, barra de cor da área, chevron circular
   embaixo do card sentado no conector.
   .og-no    = card + (opcional) .og-baixo com a fileira de filhos
   .og-baixo = desce do card pai; .og-ul = fileira; cada .og-li sobe um
   "pezinho" e o trilho horizontal liga os irmãos via ::after nos li */
.og-no { display:flex; flex-direction:column; align-items:center; }
.og-no.com-filhos > .og-card::after {
  content:''; position:absolute; left:50%; top:100%; width:1.5px; height:26px;
  background:#C7D2E1; transform:translateX(-50%);
  /* o conector do pai se DESENHA de cima pra baixo quando o time abre */
  transform-origin:top center;
  animation:og-traco .3s cubic-bezier(.22,.9,.35,1) both;
}
@keyframes og-traco { from { transform:translateX(-50%) scaleY(0); } }
@keyframes og-fade { from { opacity:0; } }
.og-baixo {
  padding-top:26px;
  transform-origin:top center;
  transition:opacity .18s ease, transform .18s ease;
}
/* fechamento fluido: o JS marca .og-fechando, espera a transição e só então
   re-renderiza (o corte acontece com a fileira já invisível) */
.og-baixo.og-fechando { opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none; }
.og-ul { display:flex; align-items:flex-start; }
.og-li {
  display:flex; flex-direction:column; align-items:center; position:relative; padding:14px 12px 0;
  /* cascata: cada irmão entra 40ms depois do anterior (teto de 10 pra fileira longa) */
  animation:og-desce .32s cubic-bezier(.22,.9,.35,1) both;
  animation-delay:calc(min(var(--i, 0), 10) * 40ms);
}
@keyframes og-desce { from { opacity:0; transform:translateY(-10px); } }
.og-li::before {
  content:''; position:absolute; top:0; left:50%; width:1.5px; height:14px;
  background:#C7D2E1; transform:translateX(-50%);
  /* cada pezinho se desenha no compasso da cascata do próprio card */
  transform-origin:top center;
  animation:og-traco .3s cubic-bezier(.22,.9,.35,1) both;
  animation-delay:calc(min(var(--i, 0), 10) * 40ms);
}
/* trilho horizontal ligando os irmãos */
.og-li::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:#C7D2E1;
  animation:og-fade .26s ease both;
  animation-delay:calc(min(var(--i, 0), 10) * 40ms);
}
.og-li:first-child::after { left:50%; }
.og-li:last-child::after { right:50%; }
.og-li:only-child::after { display:none; }
.og-li.og-raiz { padding-top:0; }
.og-li.og-raiz::before, .og-li.og-raiz::after { display:none; }

/* ── Por SOLUÇÃO (Vicente, 22/09) ─────────────────────────────────────────
   Os ramos do 1º nível ficam em três blocos: Contas Judiciais à esquerda,
   soluções gerais (Finance · People · Growth) no centro, Fluxo de Defesa à
   direita — cada um com um selo e a fileira de líderes embaixo. O trilho que
   sai do Vicente passa pelo topo dos blocos (mesmo desenho dos irmãos). */
#pp-org-shell .og-sols-sel { display:flex; gap:2px; padding:2px; border:1px solid #E2E8F0; border-radius:9999px; background:#F8FAFC; }
#pp-org-shell .og-sols-sel button {
  height:26px; padding:0 12px; border:0; border-radius:9999px; background:transparent;
  font:inherit; font-size:12px; font-weight:600; color:#465569; cursor:pointer; white-space:nowrap;
  transition:background .15s, color .15s;
}
#pp-org-shell .og-sols-sel button:hover { color:#0057FF; }
#pp-org-shell .og-sols-sel button.on { background:#0057FF; color:#fff; }
.og-sols { display:flex; align-items:flex-start; justify-content:center; padding-top:14px; }
.og-sol {
  position:relative; display:flex; flex-direction:column; align-items:center;
  /* sem moldura (Leonardo, 22/09): o selo em cima e o trilho já separam os blocos */
  margin:0 14px; padding:12px 10px 14px;
  animation:og-desce .32s cubic-bezier(.22,.9,.35,1) both; animation-delay:calc(var(--i, 0) * 60ms);
}
/* pezinho do trilho até o bloco + trilho horizontal entre os blocos (cobre a margem) */
.og-sol::before { content:''; position:absolute; top:-14px; left:50%; width:1.5px; height:14px; background:#C7D2E1; transform:translateX(-50%); }
.og-sol::after { content:''; position:absolute; top:-14px; left:-14px; right:-14px; height:1.5px; background:#C7D2E1; }
.og-sol:first-child::after { left:50%; }
.og-sol:last-child::after { right:50%; }
.og-sol:only-child::after { display:none; }
.og-sol-tit { display:flex; flex-direction:column; align-items:center; margin-bottom:4px; }
.og-sol-tit b { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#0057FF; background:rgba(0,87,255,.10); padding:4px 12px; border-radius:9999px; }
.og-sol-tit i { font-style:normal; font-size:10.5px; color:#65758B; margin-top:5px; }
.og-sol-tit span { font-size:10.5px; color:#8A93A6; margin-top:2px; }
.og-sol-contas .og-sol-tit b { color:#12784A; background:rgba(18,165,106,.12); }
.og-sol-geral .og-sol-tit b { color:#475569; background:#EEF2F7; }
@media (max-width:720px) { .og-sols { flex-direction:column; align-items:center; gap:18px; } .og-sol { margin:0; } .og-sol::before, .og-sol::after { display:none; } }
/* Celular (23/09): a barra do organograma espremia o "Voltar" pra 18px de largura. O botão
   não encolhe e a barra quebra em linhas: busca em largura total, seletor e ações embaixo. */
#pp-org-shell .og-voltar { flex-shrink:0; }
@media (max-width:720px) {
  #pp-org-shell .og-top { flex-wrap:wrap; row-gap:8px; padding:10px 12px; }
  /* sem "order": a quebra natural segue o HTML, então a ordem visual = a ordem do Tab */
  #pp-org-shell .og-top { gap:8px; }
  #pp-org-shell .og-titulo { flex:1 1 auto; min-width:0; }
  #pp-org-shell #og-busca { flex:1 1 100%; width:auto; margin-left:0; }
  #pp-org-shell .og-sols-sel, #pp-org-shell .og-acoes, #pp-org-shell .og-zoom { flex-shrink:0; }
}
@media (prefers-reduced-motion: reduce) { .og-sol { animation:none; } }

/* ── Time grande = LISTA vertical (25/08) ─────────────────────────────────
   Quem ramifica continua na fileira horizontal (é estrutura). Um time de
   gente sem equipe própria é um ROSTER — e roster se lê na vertical: o
   trilho desce e cada pessoa se pendura nele por um gancho. */
.og-baixo { display:flex; flex-direction:column; align-items:center; }
.og-espinha {
  position:relative;
  /* DUAS COLUNAS centradas no tronco (01/09): 296px = largura do card da
     lista (regra .og-espinha .og-ramo .og-card); 64px de vão = um gancho
     de 32px de cada lado até o tronco central. */
  display:grid; grid-template-columns:296px 296px; column-gap:64px; row-gap:8px;
  justify-content:center;
}
/* fileira de líderes seguida da lista: a linha central desce do trilho dos
   irmãos, passa ENTRE os cards (fica atrás de card que caia no meio) e
   emenda na lista pelo tronco do vão — a ligação contínua gestor→time. */
.og-ul-tronco { position:relative; }
.og-ul-tronco::after {
  content:''; position:absolute; left:50%; top:0; bottom:0; width:1.5px;
  background:#C7D2E1; transform:translateX(-50%);
  animation:og-fade .26s ease both;
}
.og-tronco {
  display:block; width:1.5px; height:22px; background:#C7D2E1; flex-shrink:0;
  transform-origin:top center;
  animation:og-cresce .3s cubic-bezier(.22,.9,.35,1) both;
}
/* TRONCO central — desce reto do conector do gestor e para no centro da
   última fileira de cards (31px = metade dos ~62px do card) */
.og-espinha::before {
  content:''; position:absolute; top:0; left:50%; bottom:31px; width:1.5px;
  background:#C7D2E1;
  /* `translate` é propriedade independente: não briga com o scaleY da
     animação (og-cresce também anima o .og-tronco, que não desloca) */
  translate:-50% 0;
  transform-origin:top center;
  animation:og-cresce .34s cubic-bezier(.22,.9,.35,1) .1s both;
}
.og-ramo {
  position:relative;
  animation:og-entra-lista .32s cubic-bezier(.22,.9,.35,1) both;
  animation-delay:calc(min(var(--i, 0), 12) * 45ms);
}
/* gancho: do tronco central até o card — cada lado no seu sentido */
.og-ramo::before {
  content:''; position:absolute; top:50%; width:32px; height:1.5px;
  background:#C7D2E1;
  animation:og-estica .3s cubic-bezier(.22,.9,.35,1) both;
  animation-delay:calc(min(var(--i, 0), 12) * 45ms);
}
.og-ramo.og-esq { grid-column:1; }
.og-ramo.og-dir { grid-column:2; animation-name:og-entra-lista-dir; }
.og-ramo.og-esq::before { right:-32px; transform-origin:right center; }
.og-ramo.og-dir::before { left:-32px; transform-origin:left center; }
@keyframes og-cresce { from { transform:scaleY(0); } }
@keyframes og-estica { from { transform:scaleX(0); } }
@keyframes og-entra-lista { from { opacity:0; transform:translateX(-14px); } }
@keyframes og-entra-lista-dir { from { opacity:0; transform:translateX(14px); } }

/* rótulo da área dentro da lista — pill centrado SOBRE o tronco (as duas
   colunas passam por ele; o fundo mascara a linha atrás do texto) */
.og-grupo {
  grid-column:1 / -1; justify-self:center;
  display:flex; align-items:center; gap:7px;
  margin:14px 0 0; white-space:nowrap;
  padding:3px 12px; background:#fff; border:1px solid #E4E9F2; border-radius:999px;
  font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#65758B; position:relative;
  animation:og-fade .3s ease both;
  animation-delay:calc(min(var(--i, 0), 12) * 45ms);
}
.og-grupo:first-child { margin-top:0; }
.og-grupo i { width:7px; height:7px; border-radius:50%; background:var(--og-cor, #0057FF); flex-shrink:0; }
.og-grupo b { color:#94A3B8; font-weight:700; }

/* O card vira LINHA: foto à esquerda, nome e cargo empilhados à direita.
   Especificidade 0,0,3,0 de propósito — precisa vencer .og-card.og-n1/.og-n3 */
.og-espinha .og-ramo .og-card {
  display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center;
  gap:0 11px;
  width:296px; margin-top:0;
  padding:9px 14px 9px 12px;
  border-radius:12px; text-align:left;
}
/* a barra de cor da área desce do topo pra lateral esquerda */
.og-espinha .og-ramo .og-card::before {
  top:-1px; bottom:-1px; left:-1px; right:auto;
  width:4px; height:auto; border-radius:12px 0 0 12px;
}
/* `.og-card` entra na cadeia de propósito: sem ele estas regras EMPATAM com
   as do nível (.og-card.og-n3 .og-foto-anel) e perdem por ordem no arquivo */
.og-espinha .og-ramo .og-card .og-foto-anel {
  position:static; transform:none; grid-row:1 / span 2;
  width:42px; height:42px; border-width:2.5px; padding:1.5px;
}
.og-espinha .og-ramo .og-card .og-foto.og-ini { font-size:12.5px; }
.og-espinha .og-ramo .og-card .og-nome { grid-column:2; justify-content:flex-start; font-size:12.5px; }
.og-espinha .og-ramo .og-card .og-cargo { grid-column:2; margin-top:2px; max-width:none; font-size:8.5px; }
/* na lista o hover desliza em direção ao tronco, não pra cima */
.og-espinha .og-ramo .og-card:hover { transform:translateX(4px); }
.og-espinha .og-ramo.og-dir .og-card:hover { transform:translateX(-4px); }
.og-espinha .og-ramo .og-card:hover .og-foto-anel { transform:scale(1.06); }

/* ── O card ──
   A hierarquia visual vem do NÍVEL (og-n0 CEO · og-n1 diretoria · og-n2
   gerência · og-n3+ operação): tamanho do card e da foto descem degrau a
   degrau, e o CEO ganha o navy da marca — quem olha a tela de longe já lê
   quem manda em quê. og-n2 é o tamanho de referência (o desenho original). */
.og-card {
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid #E2E8F0; border-radius:16px;
  width:176px; margin-top:28px;              /* 28px = metade da foto pra fora */
  padding:36px 12px 16px;
  scroll-margin:90px 60px;                   /* scrollIntoView deixa respiro em volta */
  box-shadow:0 1px 3px rgba(15,23,41,.05);
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  animation:og-surge .3s cubic-bezier(.22,.9,.35,1) both;
}
/* barra de cor da ÁREA no topo — é ela (junto com o anel da foto) que faz a
   separação visual por departamento, como na referência */
.og-card::before {
  content:''; position:absolute; top:-1px; left:-1px; right:-1px; height:4px;
  background:var(--og-cor, #0057FF); border-radius:16px 16px 0 0;
}
.og-card:hover {
  border-color:var(--og-cor, #0057FF);
  /* a sombra respira na COR DA ÁREA do card — micro-interação com identidade */
  box-shadow:0 12px 28px color-mix(in srgb, var(--og-cor, #0057FF) 22%, transparent), 0 2px 6px rgba(15,23,41,.06);
  transform:translateY(-3px);
}
.og-card:hover .og-foto-anel { transform:translateX(-50%) scale(1.07); }

/* nível 0 — CEO: o navy da Docato, foto grande, sem barra (o card É a marca) */
.og-card.og-n0 {
  width:228px; margin-top:38px; padding:50px 18px 20px;
  background:linear-gradient(168deg, #0C1F4B 0%, #10357F 78%, #1345A8 100%);
  border-color:#10357F; border-radius:18px;
  box-shadow:0 14px 34px rgba(12,31,75,.28);
}
/* no CEO a barra de cor sai de cena e o ::before vira o GLOW ambiente: uma
   sombra navy fixa cuja opacidade respira em ciclo lento (compositor-only) */
.og-card.og-n0::before {
  content:''; position:absolute; inset:0; height:auto; border-radius:18px;
  background:none; box-shadow:0 18px 52px rgba(19,69,168,.5);
  opacity:0; pointer-events:none; z-index:-1;
  animation:og-respira 5s ease-in-out 1.2s infinite alternate;
}
@keyframes og-respira { to { opacity:1; } }
.og-card.og-n0 .og-nome { color:#fff; font-size:15.5px; }
.og-card.og-n0 .og-cargo { color:#9DB8E8; font-size:10px; }
.og-card.og-n0 .og-foto-anel { width:76px; height:76px; top:-38px; border-color:#fff; box-shadow:0 6px 18px rgba(12,31,75,.30); }
.og-card.og-n0 .og-foto.og-ini { font-size:22px; }
.og-card.og-n0 .og-lid { color:#FFD98A; background:rgba(255,255,255,.10); border-color:rgba(255,217,138,.35); }
.og-card.og-n0:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(12,31,75,.36); border-color:#1345A8; }

/* nível 1 — diretoria: um degrau acima da referência */
.og-card.og-n1 {
  width:198px; margin-top:32px; padding:42px 14px 18px;
  border-color:#D4E0F5; box-shadow:0 3px 10px rgba(15,23,41,.07);
}
.og-card.og-n1 .og-nome { font-size:14px; }
.og-card.og-n1 .og-foto-anel { width:64px; height:64px; top:-32px; }
.og-card.og-n1 .og-foto.og-ini { font-size:18px; }

/* nível 3+ — operação: compacto, a fileira longa respira */
.og-card.og-n3 {
  width:156px; margin-top:23px; padding:29px 10px 13px;
  border-radius:13px;
}
.og-card.og-n3::before { border-radius:13px 13px 0 0; }
.og-card.og-n3 .og-nome { font-size:12px; }
.og-card.og-n3 .og-cargo { font-size:8.5px; max-width:136px; }
.og-card.og-n3 .og-foto-anel { width:46px; height:46px; top:-23px; padding:1.5px; border-width:2.5px; }
.og-card.og-n3 .og-foto.og-ini { font-size:13px; }
.og-card.virtual { border-style:dashed; background:#F8FAFC; box-shadow:none; padding-top:16px; }
/* card de TIME (sub-grupo virtual, ex.: Time Flow Managers do Wada): a
   referência mostra um card azulado, sem foto, com o nome do time em azul */
.og-card.og-time {
  border-style:solid; border-color:#C7DAFF; background:#EEF4FF;
  padding-top:18px; padding-bottom:18px;
  /* sem foto não há o que preencher os 28px do vão da foto — sem isso o
     pezinho do conector ficava SOLTO acima do card (print de 01/09) */
  margin-top:0;
}
.og-card.og-time .og-nome { color:#0057FF; font-size:13.5px; }
.og-card.og-time .og-cargo { color:#5B7BB5; }
.og-card.og-time:hover { border-color:#0057FF; box-shadow:0 8px 22px rgba(0,87,255,.13); }
/* achado na busca: dois pulsos de radar chamam o olho, depois fica o anel */
.og-card.achado {
  border-color:#0057FF; box-shadow:0 0 0 3px rgba(0,87,255,.18);
  animation:og-radar 1.4s ease-out 2;
}
@keyframes og-radar {
  from { box-shadow:0 0 0 3px rgba(0,87,255,.38); }
  to   { box-shadow:0 0 0 26px rgba(0,87,255,0); }
}
@keyframes og-surge { from { opacity:0; transform:translateY(8px); } }

/* View Transitions (Chrome): o morph do expandir/recolher — cada card tem um
   view-transition-name e desliza da posição velha pra nova */
::view-transition-group(*) {
  animation-duration:.4s;
  animation-timing-function:cubic-bezier(.22,.9,.35,1);
}

/* foto em círculo, meio pra fora do card, com anel na cor da área */
.og-foto-anel {
  position:absolute; top:-28px; left:50%; transform:translateX(-50%);
  width:56px; height:56px; border-radius:50%; z-index:2;
  border:3px solid var(--og-cor, #0057FF); background:#fff; padding:2px;
  box-shadow:0 2px 8px rgba(15,23,41,.10);
  transition:transform .2s cubic-bezier(.22,.9,.35,1);
}
.og-foto {
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  background:#EEF2F7;
}
.og-foto.og-ini {
  display:grid; place-items:center; color:#fff;
  font-size:16px; font-weight:700; letter-spacing:.02em;
}
.og-nome {
  font-size:13px; font-weight:700; color:#0F1729; line-height:1.3;
  display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap;
}
.og-cargo {
  font-size:9.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:#65758B; line-height:1.45; margin-top:3px; max-width:150px;
}
.og-lid {
  display:inline-flex; align-items:center; gap:3px; margin-top:8px;
  font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#92600A; background:#FDF3DE; border:1px solid #F3DFB6;
  border-radius:9999px; padding:2px 9px;
}
.og-ag {
  font-size:9.5px; font-weight:700; color:#B45309; background:#FEF3C7;
  border-radius:9999px; padding:1px 7px; white-space:nowrap; cursor:help;
}
/* chevron circular embaixo do card, sentado na linha do conector */
.og-tog {
  position:absolute; bottom:-13px; left:50%; transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  height:26px; min-width:26px; padding:0 7px; border-radius:9999px;
  border:1px solid #CBD5E1; background:#fff; color:#0057FF;
  font:inherit; cursor:pointer;
  box-shadow:0 1px 3px rgba(15,23,41,.08);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.og-tog svg { width:13px; height:13px; transition:transform .25s cubic-bezier(.22,.9,.35,1); }
.og-tog[aria-expanded="true"] svg { transform:rotate(180deg); }
.og-tog span { font-size:9.5px; font-weight:700; color:#94A3B8; }
.og-tog:hover { border-color:#0057FF; background:#F0F5FF; box-shadow:0 2px 8px rgba(0,87,255,.18); }
.og-tog:hover span { color:#0057FF; }

/* Véu de carregamento (o mesmo desenho do hub) */
#pp-org-shell .og-veu {
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  background:#F8FAFC; transition:opacity .3s ease;
}
#pp-org-shell.carregado .og-veu { opacity:0; pointer-events:none; }
#pp-org-shell .og-veu .m { display:grid; place-items:center; gap:12px; color:#65758B; font-size:13px; text-align:center; padding:0 24px; }
#pp-org-shell .og-veu .sp {
  width:26px; height:26px; border-radius:50%;
  border:2.5px solid #E2E8F0; border-top-color:#0057FF;
  animation:pp-hub-gira .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  #pp-org-shell, #pp-org-shell .og-veu { transition:none; }
  .og-card { animation:none; transition:none; }
  .og-li { animation:none; }
  .og-li::before, .og-li::after { animation:none; }
  .og-no.com-filhos > .og-card::after { animation:none; }
  .og-ramo, .og-ramo.og-dir, .og-ramo::before, .og-grupo { animation:none; }
  .og-espinha::before, .og-espinha::after { animation:none; }
  .og-tronco, .og-ul-tronco::after { animation:none; }
  .og-card.og-n0::before { animation:none; opacity:0; }
  .og-card.achado { animation:none; }
  .og-baixo { transition:none; }
  .og-foto-anel { transition:none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
  #pp-org-shell .og-veu .sp { animation:none; }
}

/* Selo do parecer no card do funil — a comparação entre candidatos acontece
   aqui, olhando a coluna inteira, não dentro do modal de um deles.
   (O CSS completo do parecer fica no overlay do modal; só o selo vive fora.) */
.pr-selo {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; font-weight:800; line-height:1.5;
  border:1.5px solid; border-radius:9999px; padding:1px 6px;
  white-space:nowrap; flex-shrink:0;
}
/* Selo da CARTA PROPOSTA no cartao do funil (17/09). Mesmas metricas do
   .pr-selo, mas PREENCHIDO em vez de contornado: os dois selos convivem no
   mesmo cartao e precisam ser distinguiveis de relance. As cores vem inline,
   de CARTA_STATUS no app.js. Mora aqui, e nao no <style> do modal, porque
   aquele so existe enquanto um modal esta aberto — no kanban nao pintaria. */
.ct-selo {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; font-weight:800; line-height:1.5;
  border:none; border-radius:9999px; padding:2px 7px;
  white-space:nowrap; flex-shrink:0;
}
.kb-card {
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 1px 4px rgba(4,18,42,.07);
  cursor:grab;
  transition:transform .15s, box-shadow .15s;
  border:1px solid transparent;
}
.kb-card:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(4,18,42,.10);
  border-color:var(--p20);
}
.kb-card.dragging {
  opacity:.5;
  cursor:grabbing;
}
.kb-card[draggable="false"] { cursor:default; }
/* botão de abrir a ficha do candidato (o lápis sumiu na limpeza dos emojis) */
.kb-edit-btn .lv-sb-ic { width:14px; height:14px; }
/* 23/09: alvo mínimo de 24px (WCAG 2.5.8) sem mudar o ícone */
.kb-edit-btn { min-width:24px; min-height:24px; border-radius:6px; }
.req-toggle.btn { min-height:24px; }
.kb-edit-btn:hover { color:#0057FF !important; }

/* Turnover — gráfico de saídas por mês (voluntária × involuntária), meses
   clicáveis pra detalhar quem saiu (01/09) */
.tv-graf{display:flex;gap:6px;align-items:flex-end;margin:4px 0 8px;padding:10px 8px 6px;background:#FAFBFE;border:1px solid #EAEDF6;border-radius:12px;overflow-x:auto;}
.tv-col{flex:1 0 44px;display:flex;flex-direction:column;align-items:center;gap:5px;border:none;background:none;cursor:pointer;padding:4px 2px;border-radius:10px;font:inherit;}
.tv-col:hover{background:#F0F4FD;}
.tv-col.sel{background:#E9F0FF;box-shadow:inset 0 0 0 1.5px #9DB9FF;}
.tv-col .pilha{display:flex;flex-direction:column-reverse;justify-content:flex-start;height:88px;width:20px;}
.tv-col .pilha i{display:block;width:100%;min-height:4px;}
.tv-col .pilha i.i{background:#E84040;border-radius:0 0 4px 4px;}
.tv-col .pilha i.v{background:#F59E0B;}
.tv-col .pilha i.s{background:#B9C3D6;}
.tv-col .pilha i:last-child{border-radius:4px 4px 0 0;}
.tv-col .pilha i.zero{background:#E6EAF3;min-height:2px;height:2px;border-radius:2px;}
.tv-col .cap{font-size:10px;color:#6B7488;}
.tv-col .n{font-size:11px;font-weight:800;color:#0F1729;}
.tv-col.sel .cap{color:#0057FF;font-weight:700;}
.tv-leg{display:flex;gap:14px;font-size:11px;color:#6B7488;margin-bottom:14px;}
.tv-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px;}
.kb-card[draggable="false"]:hover { transform:none; }


/* ════════════════════════════════════════════════════════════════════════
   PRINT — Timeline exportada como PDF (Fase 2.5)
   Usuário clica "📄 Exportar PDF" → window.print() → "Salvar como PDF".
   Esconde sidebar, header da landing, botões, modais. Mostra só a área
   da timeline com cabeçalho da Docato adicionado pra impressão.
   ════════════════════════════════════════════════════════════════════════ */
@media print {
  body { background:#fff !important; }

  /* Esconde tudo que não faz parte do "documento" */
  .sb, .ph .ab, .tl-print-hide, .ov, .notif, #kpi-refresh-btn,
  button:not(.tl-print-keep), .sb-foot, .tl-chip,
  [class*="dc-bg-"], .dc-blob, .dc-dot {
    display:none !important;
  }

  /* Layout livre pro conteúdo principal */
  .shell, .shell > div, .main, .pb, .ph {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  /* Cabeçalho da Docato no PDF (gerado via ::before na area printable) */
  .tl-printable::before {
    content: 'Docato — Timeline do Colaborador: ' attr(data-collab-name);
    display:block;
    font-size:18px;
    font-weight:800;
    color:#04122A;
    border-bottom:2px solid #0057FF;
    padding:0 0 12px;
    margin:0 0 16px;
    letter-spacing:-.3px;
  }

  /* Cards da timeline ficam quietos, sem sombras pesadas */
  .tl-card {
    box-shadow:none !important;
    border:1px solid #ddd !important;
    page-break-inside:avoid;
  }
  .tl-line::before {
    background:#0057FF !important;
  }
  .tl-event { margin-bottom:14px !important; }

  /* Cards de stats: simplifica visual */
  .stats { break-inside:avoid; }
  .sc {
    box-shadow:none !important;
    border:1px solid #eee !important;
  }

  /* Margem da página */
  @page { margin: 16mm 14mm; size: A4; }
}

/* Estilo dos auto-events na tela (não-print) */
.tl-event-auto .tl-card {
  position:relative;
}

/* ════════════════════════════════════════════════════════════════════════
   POLIMENTO VISUAL GLOBAL — cards, sidebar, headers, transições
   Mantém a identidade Docato (azul + futurista) com mais respiro e hover.
   ════════════════════════════════════════════════════════════════════════ */

/* Cards globais ganham hover-lift + transition + borda sutil */
.card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
  border:1px solid transparent;
  background:#fff;
  border-radius:14px;
}
.card:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 36px -10px rgba(4,18,42,.12);
}

/* Cards grandes interativos (clicáveis tipo lista de pesquisa, colaborador) */
.card.clickable {
  cursor:pointer;
}
.card.clickable:hover {
  border-color:rgba(0,87,255,.18);
}

/* Stats Cards (.sc) — modernizados com gradient sutil + hover */
.sc {
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,87,255,.06);
  border-radius:16px;
  padding:18px 20px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.sc::before {
  content:'';
  position:absolute;
  top:-40%; right:-20%;
  width:200px; height:200px;
  background:radial-gradient(circle, rgba(0,87,255,.08) 0%, transparent 70%);
  pointer-events:none;
  transition:transform .6s ease;
}
.sc:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 40px -12px rgba(0,87,255,.18);
  border-color:rgba(0,87,255,.18);
}
.sc:hover::before {
  transform:scale(1.4);
}

/* Sidebar item ativo com gradiente brand + glow */
.sb .ni {
  position:relative;
  transition:background .2s, color .2s, transform .15s;
}
.sb .ni:hover {
  background:rgba(0,87,255,.06);
  transform:translateX(2px);
}
.sb .ni.on {
  background:linear-gradient(135deg, #0057FF 0%, #5645D8 100%) !important;
  color:#fff !important;
  box-shadow:0 4px 14px -4px rgba(0,87,255,.45);
}
.sb .ni.on .ic { filter:brightness(1.2); }
.sb .ni.on::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:#fff;
  border-radius:0 2px 2px 0;
  opacity:.85;
}

/* Section divider — usar pra separar blocos no admin */
.section-divider {
  display:flex;
  align-items:center;
  gap:14px;
  margin:16px 0 10px;
}
.section-divider::after {
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--ln), transparent);
}
.section-divider .sd-icon {
  width:32px; height:32px;
  border-radius:10px;
  background:linear-gradient(135deg, #0057FF 0%, #5645D8 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px;
  box-shadow:0 4px 14px -4px rgba(0,87,255,.45);
  flex-shrink:0;
}
.section-divider .sd-title {
  font-size:13px;
  font-weight:800;
  color:var(--dk);
  letter-spacing:-.2px;
}
.section-divider .sd-sub {
  font-size:11px;
  color:#888;
  margin-top:2px;
  font-weight:500;
}

/* Page Header (.ph) com brand gradient sutil no título */
.ph {
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--ln);
}
.ph .pt {
  background:linear-gradient(135deg, #04122A 0%, #0057FF 60%, #5645D8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  font-weight:800;
  letter-spacing:-.5px;
}

/* Animação de entrada quando troca de aba — aplica no .main */
@keyframes dcPageIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.main {
  animation: dcPageIn .35s ease both;
}

/* Cards "feature" da landing (interativos + hover gradient) */
.feat-modern {
  position:relative;
  overflow:hidden;
  border-radius:20px;
  padding:26px 22px;
  background:hsla(0,0%,100%,.65);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
          backdrop-filter:blur(20px) saturate(180%);
  border:1px solid hsla(0,0%,100%,.6);
  transition:transform .35s ease, box-shadow .35s ease, border-color .25s;
}
.feat-modern::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(66,181,245,.10) 0%, transparent 60%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.feat-modern:hover {
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 20px 50px -12px rgba(0,87,255,.25);
  border-color:rgba(0,87,255,.20);
}
.feat-modern:hover::before { opacity:1; }
.feat-modern .feat-ic-modern {
  width:54px; height:54px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  background:linear-gradient(135deg, #42B5F5 0%, #2A8FFF 50%, #5645D8 100%);
  color:#fff;
  box-shadow:0 12px 28px -8px rgba(42,143,255,.45);
  margin-bottom:14px;
}

/* Feature mini (card secundário menor) */
.feat-mini {
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:14px;
  background:hsla(0,0%,100%,.55);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  border:1px solid hsla(0,0%,100%,.5);
  transition:transform .25s, border-color .2s, box-shadow .25s;
}
.feat-mini:hover {
  transform:translateY(-2px);
  border-color:rgba(0,87,255,.18);
  box-shadow:0 10px 24px -10px rgba(0,87,255,.15);
}
.feat-mini .feat-mini-ic {
  font-size:22px;
  flex-shrink:0;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,87,255,.08);
  border-radius:10px;
}


/* ════════════════════════════════════════════════════════════════════════
   LOVABLE COMPONENTS (Fase 6) — replicam exatamente o design validado
   no Lovable. Substituem o visual antigo da Login (.dc-login-*),
   da Sidebar (.lv-sb-*) e dos cards do Dashboard (.lv-stat, .lv-insight).
   ════════════════════════════════════════════════════════════════════════ */

/* ── LOGIN (Lovable) ───────────────────────────────────────────────── */
.lv-login-wrap{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;font-family:var(--fn);
  color:hsl(var(--dc-fg));overflow:hidden;
}
.lv-login-bg{position:absolute;inset:0;overflow:hidden;z-index:-1;}
.lv-login-bg::before{content:'';position:absolute;inset:0;background:hsl(var(--dc-bg));}
.lv-blob-x,.lv-blob-y,.lv-blob-z{position:absolute;border-radius:50%;filter:blur(64px);will-change:transform;}
.lv-blob-x{
  top:-25%;left:-25%;width:80vw;height:80vw;opacity:.5;
  background:radial-gradient(circle,hsl(var(--dc-primary)/.4),transparent 70%);
  animation:lvBlobX 18s ease-in-out infinite;
}
.lv-blob-y{
  bottom:-25%;right:-25%;width:70vw;height:70vw;opacity:.4;
  background:radial-gradient(circle,hsl(var(--dc-violet)/.45),transparent 70%);
  animation:lvBlobY 22s ease-in-out infinite;
}
.lv-blob-z{
  top:33%;right:25%;width:50vw;height:50vw;opacity:.3;
  background:radial-gradient(circle,hsl(var(--dc-cyan)/.4),transparent 70%);
  animation:lvBlobZ 25s ease-in-out infinite;
}
.lv-login-grid{
  position:absolute;inset:0;opacity:.025;
  background-image:
    linear-gradient(hsl(var(--dc-fg)) 1px,transparent 1px),
    linear-gradient(90deg,hsl(var(--dc-fg)) 1px,transparent 1px);
  background-size:48px 48px;
}
@keyframes lvBlobX{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(60px,40px) scale(1.1);}
}
@keyframes lvBlobY{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-50px,-30px) scale(1.15);}
}
@keyframes lvBlobZ{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(40px,-40px) scale(.9);}
  66%{transform:translate(-20px,20px) scale(1.1);}
}

.lv-login-card{
  position:relative;width:100%;max-width:440px;
  background:hsl(0 0% 100%/.6);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
          backdrop-filter:blur(24px) saturate(180%);
  border:1px solid hsl(0 0% 100%/.4);
  border-radius:24px;
  padding:40px;
  box-shadow:var(--dc-shadow-glow);
  animation:lvCardIn .9s var(--dc-ease) both;
}
@keyframes lvCardIn{
  from{opacity:0;transform:translateY(28px) scale(.985);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.lv-login-logo{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:32px;
  animation:lvFadeUp .7s var(--dc-ease) .15s both;
}
.lv-login-icon{
  width:36px;height:36px;border-radius:12px;
  background:hsl(var(--dc-primary)/.10);
  color:hsl(var(--dc-primary));
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px hsl(var(--dc-primary)/.15);
  animation:lvFloat 4s ease-in-out infinite;
}
@keyframes lvFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}
.lv-login-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:hsl(var(--dc-primary-soft));
  color:hsl(var(--dc-primary-deep));
  padding:4px 12px;border-radius:9999px;
  font-size:12px;font-weight:500;
  margin-bottom:20px;
  animation:lvFadeUp .7s var(--dc-ease) .24s both;
}
.lv-login-pill::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:hsl(var(--dc-primary));
  animation:lvPulseDot 2s ease-in-out infinite;
}
@keyframes lvPulseDot{
  0%,100%{opacity:1;}
  50%{opacity:.5;}
}
.lv-login-title{
  font-size:30px;font-weight:700;letter-spacing:-.5px;
  text-align:center;margin-bottom:12px;
  animation:lvFadeUp .7s var(--dc-ease) .33s both;
}
.lv-login-sub{
  font-size:14px;color:hsl(var(--dc-muted));
  text-align:center;line-height:1.6;max-width:20rem;margin:0 auto 8px;
  animation:lvFadeUp .7s var(--dc-ease) .42s both;
}
.lv-login-italic{
  font-size:13px;font-style:italic;font-weight:300;
  color:hsl(var(--dc-muted)/.8);
  text-align:center;line-height:1.6;max-width:20rem;margin:0 auto 32px;
  animation:lvFadeUp .7s var(--dc-ease) .51s both;
}
.lv-login-btn{
  position:relative;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:hsl(var(--dc-fg));color:hsl(var(--dc-bg));
  padding:14px 20px;border-radius:12px;
  font-family:var(--fn);font-size:15px;font-weight:500;
  border:none;cursor:pointer;
  box-shadow:var(--dc-shadow-soft);
  transition:all .5s var(--dc-ease);
  animation:lvFadeUp .7s var(--dc-ease) .60s both;
}
.lv-login-btn:hover{
  background:hsl(var(--dc-fg)/.9);
  box-shadow:0 12px 40px -12px hsl(var(--dc-primary)/.45);
  transform:translateY(-1px) scale(1.015);
}
.lv-login-btn:active{transform:translateY(0) scale(.985);}
.lv-login-btn:disabled{opacity:.9;cursor:wait;}
/* Botão preto — estilo interno limpo */
.lv-login-btn-dark{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#04122A;color:#fff;
  padding:14px 20px;border-radius:12px;
  font-family:var(--fn);font-size:15px;font-weight:600;
  border:none;cursor:pointer;
  box-shadow:0 4px 20px rgba(4,18,42,.18);
  transition:all .2s ease;
  animation:lvFadeUp .6s ease .4s both;
}
.lv-login-btn-dark:hover{background:#0f2060;transform:translateY(-1px);box-shadow:0 8px 28px rgba(4,18,42,.25);}
.lv-login-btn-dark:active{transform:translateY(0);}
.lv-google-square{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;background:#fff;border-radius:6px;flex-shrink:0;
}
.lv-login-foot{
  font-size:12px;color:hsl(var(--dc-muted));
  text-align:center;margin-top:24px;
  animation:lvFadeUp .7s var(--dc-ease) .69s both;
}
.lv-login-foot strong{font-weight:500;color:hsl(var(--dc-fg));}
.lv-login-copy{
  position:absolute;bottom:24px;left:0;right:0;
  text-align:center;font-size:12px;color:hsl(var(--dc-muted));
  animation:lvFadeUp 1s var(--dc-ease) .9s both;
}
@keyframes lvFadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

/* ── SIDEBAR (Lovable) ─────────────────────────────────────────────── */
.lv-sb{
  display:flex;flex-direction:column;
  width:264px;flex-shrink:0;height:100vh;
  position:sticky;top:0;
  border-right:1px solid rgba(255,255,255,.06);
  background:#04122A;
  font-family:var(--fn);
}
.lv-sb-logo{padding:28px 24px 20px;}
.lv-sb-nav{flex:1;padding:4px 14px;overflow-y:auto;}
.lv-sb-nav::-webkit-scrollbar{width:4px;}
.lv-sb-nav::-webkit-scrollbar-thumb{background:hsl(var(--dc-border));border-radius:2px;}
.lv-sb-section{
  padding:18px 12px 8px;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:1.4px;
  color:hsl(var(--dc-muted));
}
.lv-sb-section:first-child{padding-top:8px;}
.lv-sb-list{list-style:none;display:flex;flex-direction:column;gap:3px;margin:0;padding:0;}
.lv-sb-item{
  position:relative;width:100%;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:10px;
  font-size:14px;font-weight:500;line-height:1.2;
  color:rgba(255,255,255,.55);
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;text-align:left;
  transition:color .15s,background-color .15s;
}
.lv-sb-item:hover{
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.07);
}
.lv-sb-item.active{
  color:#fff;
  background:rgba(0,87,255,.28);
  font-weight:600;
}
.lv-sb-item.active::after{
  content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;
  background:#0057FF;
}
/* Ícone SVG — herda cor do texto (currentColor). */
.lv-sb-item .lv-sb-ic{
  flex-shrink:0;width:18px;height:18px;
  stroke:currentColor;opacity:1;
  transition:opacity .2s var(--dc-ease);
}
.lv-sb-item:hover .lv-sb-ic,
.lv-sb-item.active .lv-sb-ic{opacity:1;}
.lv-sb-item > span{flex:1;min-width:0;}
.lv-sb-foot{padding:16px;border-top:1px solid rgba(255,255,255,.07);}
.lv-sb-user{
  display:flex;align-items:center;gap:12px;
  padding:8px;margin-bottom:8px;
}
.lv-sb-user-avatar{
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,87,255,.35);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:600;flex-shrink:0;
  border:1.5px solid rgba(0,87,255,.5);
}
.lv-sb-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.lv-sb-user-info{flex:1;min-width:0;}
.lv-sb-user-name{
  font-size:14px;font-weight:500;color:rgba(255,255,255,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lv-sb-user-role{
  font-size:11px;color:rgba(255,255,255,.35);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lv-sb-logout{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:8px;
  font-size:12px;color:rgba(255,255,255,.35);
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;transition:color .15s,background .15s;
}
.lv-sb-logout:hover{color:rgba(255,255,255,.75);background:rgba(255,255,255,.06);}

/* Main area (lovable) — leve ajuste, mantém .ph/.pb existentes funcionais */
.lv-main{flex:1;padding:32px 40px;overflow-x:hidden;background:hsl(var(--dc-muted-soft)/.3);min-height:100vh;}
/* Anula padding original do .ph/.pb dentro do .lv-main pra não duplicar */
.lv-main > .ph{padding:0;margin-bottom:24px;}
.lv-main > .pb{padding:0;}
.lv-main .pt{font-size:32px;font-weight:700;letter-spacing:-.5px;color:hsl(var(--dc-fg));}
.lv-main .ps{font-size:14px;color:hsl(var(--dc-muted));margin-top:6px;}
@media (max-width:768px){
  .lv-main{padding:20px;}
  .lv-main .pt{font-size:24px;}
}

/* ══════════ REDESIGN CLEAN — barra de navegação horizontal flutuante ══════════ */
.dc-shell{display:flex;flex-direction:column;min-height:100vh;background:hsl(var(--dc-muted-soft)/.45);}
.dc-topbar{position:sticky;top:0;z-index:40;padding:14px 24px 6px;
  background:linear-gradient(hsl(var(--dc-muted-soft)/.92) 68%,transparent);}
.dc-topbar-in{display:flex;align-items:center;gap:14px;max-width:1360px;margin:0 auto;
  background:hsl(var(--dc-bg));border:1px solid hsl(var(--dc-border));border-radius:9999px;
  padding:8px 14px;box-shadow:0 12px 40px -14px hsl(var(--dc-fg)/.18),0 2px 6px hsl(var(--dc-fg)/.05);}
.dc-brand{display:flex;align-items:center;flex-shrink:0;padding-right:4px;padding-left:6px;}
.dc-brand img{height:30px!important;width:auto;max-width:170px;object-fit:contain;display:block;}
.dc-nav{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;}
.dc-navi{position:relative;flex-shrink:0;}
.dc-gicon{width:44px;height:44px;border-radius:13px;border:none;background:none;color:hsl(var(--dc-muted));
  display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s;position:relative;}
.dc-gicon .lv-sb-ic{width:22px;height:22px;}
/* Contador de pendências no ícone do menu (Inbox). Elemento próprio — nunca HTML no label. */
.dc-navbadge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:#EF4444;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px hsl(var(--dc-bg));pointer-events:none;}
.dc-fly-item{position:relative;}
.dc-fly-item .dc-navbadge{position:static;margin-left:auto;box-shadow:none;}
.dc-navi:hover>.dc-gicon{background:hsl(var(--dc-muted-soft));color:hsl(var(--dc-fg));}
.dc-navi.active>.dc-gicon{background:hsl(var(--dc-primary)/.12);color:hsl(var(--dc-primary));}
/* tooltip simples (grupos de 1 item, ex: Dashboard) */
.dc-tip{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(-3px);
  background:hsl(var(--dc-fg));color:hsl(var(--dc-bg));font-size:11.5px;font-weight:600;white-space:nowrap;
  padding:5px 9px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:5;}
.dc-navi.dc-solo:hover .dc-tip,.dc-navi.dc-solo:has(.dc-gicon:focus-visible) .dc-tip{opacity:1;transform:translateX(-50%);}
/* submenu vertical (flyout) */
.dc-flyout{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);padding-top:12px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,transform .16s;z-index:50;}
.dc-navi:hover .dc-flyout,.dc-navi.aberto .dc-flyout,.dc-navi.teclado .dc-flyout{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%);}
/* 23/09: .teclado = o foco entrou no grupo pelo teclado (marcado no JS, sobrevive à
   passagem do ícone pro 1º item — com :has(:focus-visible) o menu sumia nesse instante e
   o navegador descartava o foco). Esc fecha o menu mesmo com o foco no grupo. */
.dc-navi.fechado .dc-flyout{opacity:0;visibility:hidden;pointer-events:none;}
.dc-flyout-in{background:hsl(var(--dc-bg));border:1px solid hsl(var(--dc-border));border-radius:16px;
  box-shadow:0 18px 48px -14px hsl(var(--dc-fg)/.28);padding:8px;min-width:238px;}
.dc-fly-h{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:hsl(var(--dc-muted));padding:8px 11px 7px;}
.dc-fly-item{display:flex;align-items:center;gap:12px;width:100%;border:none;background:none;border-radius:11px;
  padding:10px 11px;cursor:pointer;color:hsl(var(--dc-muted));font-size:13.5px;font-weight:500;
  text-align:left;font-family:inherit;transition:background .13s,color .13s;}
.dc-fly-item .lv-sb-ic{width:19px;height:19px;flex-shrink:0;}
.dc-fly-item:hover{background:hsl(var(--dc-muted-soft));color:hsl(var(--dc-fg));}
.dc-fly-item.active{background:hsl(var(--dc-primary)/.12);color:hsl(var(--dc-primary));font-weight:600;}
.dc-fly-item>span{flex:1;min-width:0;}
/* lado direito: usuário + sair */
.dc-tb-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.dc-tb-user{display:flex;align-items:center;gap:9px;padding:3px 4px;border-radius:9999px;}
.dc-tb-avatar{width:34px;height:34px;border-radius:50%;background:hsl(var(--dc-primary)/.15);
  color:hsl(var(--dc-primary));display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0;overflow:hidden;}
.dc-tb-avatar img{width:100%;height:100%;object-fit:cover;}
.dc-tb-userinfo{line-height:1.2;}
.dc-tb-userinfo b{display:block;font-size:13px;font-weight:650;color:hsl(var(--dc-fg));}
.dc-tb-userinfo span{display:block;font-size:11px;color:hsl(var(--dc-muted));}
.dc-tb-ib{width:38px;height:38px;border-radius:11px;border:1px solid hsl(var(--dc-border));background:hsl(var(--dc-bg));
  color:hsl(var(--dc-muted));display:grid;place-items:center;cursor:pointer;transition:color .15s,border-color .15s;}
.dc-tb-ib:hover{color:hsl(var(--dc-fg));border-color:hsl(var(--dc-primary));}
/* área principal centralizada e mais arejada */
.dc-main{flex:1;max-width:1360px;width:100%;margin:0 auto;padding:22px 32px 90px;min-height:0;background:transparent;}
@media (max-width:900px){.dc-tb-userinfo{display:none;} .dc-nav{gap:2px;} .dc-main{padding:16px 16px 70px;}}
@media (max-width:640px){.dc-flyout-in{min-width:200px;}}
/* Celular (23/09): em 375px os ícones Admin, Portal e Recrutamento ficavam FORA da tela
   (a barra rolava de lado). O menu desce pra uma 2ª linha de largura total dentro da mesma
   cápsula, e o submenu abre na largura dessa linha — centrado no ícone ele estourava a tela. */
@media (max-width:640px){
  .dc-topbar{padding:10px 10px 6px;}
  .dc-topbar-in{flex-wrap:wrap;row-gap:4px;border-radius:22px;padding:8px 10px;}
  .dc-topbar-in .dc-nav{order:3;flex:1 0 100%;justify-content:space-between;gap:0;position:relative;}
  .dc-topbar-in .dc-tb-right{margin-left:auto;}
  .dc-nav .dc-navi{position:static;}
  .dc-nav .dc-navi .dc-flyout{left:0;right:0;transform:none;}
  .dc-nav .dc-navi .dc-flyout-in{min-width:0;}
}
/* acento de IA (painel de resumo em Resultados) */
.dc-ai{background:linear-gradient(180deg,hsl(265 90% 60%/.06),transparent 42%),hsl(var(--dc-bg));border-color:hsl(265 60% 60%/.25);}
.dc-ai-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:hsl(265 70% 55%);background:hsl(265 90% 60%/.12);padding:5px 11px;border-radius:9999px;}
.dc-ai-out{margin-top:14px;font-size:13.5px;line-height:1.62;color:hsl(var(--dc-fg));}
.dc-ai-out strong{font-weight:650;}
/* ── Drop 2: polimento clean (cards + tabelas) escopado na área nova ── */
.dc-main .card{border:1px solid hsl(var(--dc-border));border-radius:18px;padding:26px;
  box-shadow:0 1px 3px hsl(var(--dc-fg)/.05),0 12px 30px -18px hsl(var(--dc-fg)/.16);}
.dc-main .card.dc-ai{border-color:hsl(265 60% 60%/.28);}
.dc-main .tw2 thead th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:hsl(var(--dc-muted));padding:10px 14px 12px;border-bottom:1px solid hsl(var(--dc-border));}
.dc-main .tw2 tbody td{padding:14px 14px;border-bottom:1px solid hsl(var(--dc-border)/.55);}
.dc-main .tw2 tbody tr:last-child td{border-bottom:none;}
.dc-main .tw2 tbody tr{transition:background .12s;}
.dc-main .tw2 tbody tr:hover td{background:hsl(var(--dc-muted-soft)/.65);}
/* ── cabeçalho de página (padrão redesign) ── */
.num{font-variant-numeric:tabular-nums;}
.dc-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:hsl(var(--dc-primary));margin-bottom:6px;}
.dc-h1{font-size:30px;font-weight:780;letter-spacing:-.03em;color:hsl(var(--dc-fg));margin:0;}
.dc-sub{color:hsl(var(--dc-muted));margin-top:6px;font-size:14px;}
/* ── KPI cards clean ── */
.dc-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:24px;}
.dc-kpi{background:hsl(var(--dc-bg));border:1px solid hsl(var(--dc-border));border-radius:18px;padding:22px 22px 18px;
  box-shadow:0 1px 3px hsl(var(--dc-fg)/.05),0 12px 30px -18px hsl(var(--dc-fg)/.16);
  display:flex;flex-direction:column;gap:9px;transition:transform .2s,box-shadow .2s;}
.dc-kpi.clickable{cursor:pointer;}
.dc-kpi.clickable:hover{transform:translateY(-2px);box-shadow:0 1px 3px hsl(var(--dc-fg)/.06),0 18px 42px -18px hsl(var(--dc-fg)/.26);}
.dc-kpi .k-l{display:flex;align-items:center;gap:8px;font-size:12.5px;color:hsl(var(--dc-muted));font-weight:550;}
.dc-kpi .k-l svg{width:16px;height:16px;stroke-width:2;color:hsl(var(--dc-primary));flex-shrink:0;}
.dc-kpi .k-v{font-size:34px;font-weight:780;letter-spacing:-.035em;line-height:1;color:hsl(var(--dc-fg));}
.dc-kpi .k-c{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:650;padding:3px 10px;border-radius:9999px;width:fit-content;}
.dc-kpi .k-c.up{background:hsl(152 55% 45%/.13);color:hsl(152 52% 36%);}
.dc-kpi .k-c.flat{background:hsl(var(--dc-muted-soft));color:hsl(var(--dc-muted));}
/* ── alinhar KPIs do Pipeline (.lv-stat) e divisores ao visual clean ── */
.dc-main .lv-stat{border-radius:18px;box-shadow:0 1px 3px hsl(var(--dc-fg)/.05),0 12px 30px -18px hsl(var(--dc-fg)/.16);}
.dc-main .lv-stat-value{font-size:30px;font-weight:780;letter-spacing:-.03em;}
.dc-main .lv-stat-sm .lv-stat-value{font-size:26px;}
.dc-main .lv-stat-icon{background:hsl(var(--dc-primary)/.10);border-radius:11px;}
.dc-main .section-divider{margin:28px 0 14px;}
.dc-main .section-divider .sd-icon{width:26px;height:26px;border-radius:8px;background:hsl(var(--dc-primary)/.12);color:hsl(var(--dc-primary));box-shadow:none;font-size:13px;}
.dc-main .section-divider .sd-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:hsl(var(--dc-muted));}
.dc-main .section-divider .sd-sub{color:hsl(var(--dc-muted)/.75);}
/* ── aniversariantes (estilo mockup) ── */
.dc-card-h{font-size:14px;font-weight:700;color:hsl(var(--dc-fg));margin-bottom:14px;}
.bday-list{display:flex;flex-direction:column;gap:10px;}
.bday-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid hsl(var(--dc-border));border-radius:12px;background:hsl(var(--dc-bg));}
.bday-av{width:38px;height:38px;border-radius:10px;background:hsl(var(--dc-primary)/.12);color:hsl(var(--dc-primary));display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0;}
.bday-info{flex:1;min-width:0;}
.bday-name{font-size:14px;font-weight:650;color:hsl(var(--dc-fg));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bday-area{font-size:12px;color:hsl(var(--dc-muted));}
.bday-pill{font-size:12px;font-weight:600;color:hsl(var(--dc-primary));background:hsl(var(--dc-primary)/.10);padding:5px 11px;border-radius:9999px;white-space:nowrap;flex-shrink:0;}
.bday-empty{color:hsl(var(--dc-muted));font-size:13px;text-align:center;padding:14px;}
.bday-more{text-align:center;font-size:11px;color:hsl(var(--dc-muted));margin-top:10px;}
/* ── sininho de notificações ── */
.dc-bell-wrap{position:relative;}
.dc-bell-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9999px;background:hsl(0 75% 55%);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid hsl(var(--dc-bg));}
.dc-bell-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:320px;max-width:calc(100vw - 32px);background:hsl(var(--dc-bg));border:1px solid hsl(var(--dc-border));border-radius:16px;box-shadow:0 18px 48px -14px hsl(var(--dc-fg)/.28);padding:8px;}
.dc-bell-menu[hidden]{display:none;}
.dc-bell-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--dc-muted));padding:8px 10px 6px;}
.dc-bell-empty{padding:22px;text-align:center;color:hsl(var(--dc-muted));font-size:13px;}
.dc-bell-item{display:flex;gap:11px;padding:10px;border-radius:11px;}
.dc-bell-item:hover{background:hsl(var(--dc-muted-soft));}
.dc-bell-ic{width:30px;height:30px;flex-shrink:0;border-radius:9px;background:hsl(var(--dc-primary)/.12);color:hsl(var(--dc-primary));display:grid;place-items:center;}
.dc-bell-ic svg{width:16px;height:16px;}
.dc-bell-t{font-size:13px;font-weight:650;color:hsl(var(--dc-fg));}
.dc-bell-d{font-size:11.5px;color:hsl(var(--dc-muted));margin-top:1px;}

/* ── DASHBOARD CARDS (Lovable) ─────────────────────────────────────── */
.lv-stat{
  position:relative;overflow:hidden;
  background:hsl(var(--dc-bg));
  border:1px solid hsl(var(--dc-border));
  border-radius:16px;padding:20px;
  box-shadow:var(--dc-shadow-soft);
  transition:transform .25s var(--dc-ease),box-shadow .25s var(--dc-ease);
}
/* Variante compacta — usada nos 4 stat cards do topo do Dashboard */
.lv-stat-sm{padding:16px 16px 14px;}
.lv-stat:hover{transform:translateY(-3px);box-shadow:var(--dc-shadow-glow);}
/* ── Cards clicáveis (todos os tipos: .lv-stat, .card e .sc) ────────────
   Usamos ::before pra NÃO conflitar com ::after (já usado por .sc pro
   blob decorativo top-right e por .lv-stat pra linha gradiente bottom).
   O indicador "↗ Ver detalhes" fica sempre visível em opacidade baixa
   e ganha destaque no hover — afordância clara pro usuário. */
.lv-stat[data-detail],.card[data-detail],.sc[data-detail]{
  cursor:pointer;position:relative;
  transition:transform .25s var(--dc-ease),box-shadow .25s var(--dc-ease),border-color .25s var(--dc-ease);
}
.card[data-detail]:hover,.sc[data-detail]:hover{transform:translateY(-2px);box-shadow:var(--dc-shadow-glow);}
.lv-stat[data-detail]:hover .lv-stat-icon{background:hsl(var(--dc-primary)/.18);}

/* Indicador "↗ Ver detalhes" — sempre visível no canto inferior direito */
.lv-stat[data-detail]::before,
.card[data-detail]::before,
.sc[data-detail]::before{
  content:'Ver detalhes →';
  position:absolute;
  bottom:12px;right:14px;
  font-size:10px;font-weight:600;
  letter-spacing:.3px;
  color:hsl(var(--dc-primary));
  background:hsl(var(--dc-primary-soft));
  padding:4px 10px;border-radius:9999px;
  opacity:.55;
  transition:opacity .2s var(--dc-ease),transform .2s var(--dc-ease),background .2s var(--dc-ease);
  pointer-events:none;z-index:2;
}
.lv-stat[data-detail]:hover::before,
.card[data-detail]:hover::before,
.sc[data-detail]:hover::before{
  opacity:1;
  background:hsl(var(--dc-primary));
  color:#fff;
  transform:translateX(-2px);
}
/* Espaço pro pill "Ver detalhes →" não colidir com chips/labels */
.lv-stat[data-detail]{padding-bottom:36px;}
.lv-stat-sm[data-detail]{padding-bottom:30px;}
.sc[data-detail]{padding-bottom:46px;}
.sc[data-detail] .chip{margin-bottom:4px;}
/* Detail modal — tabelas e seções padronizadas */
.dd-table{width:100%;border-collapse:collapse;}
.dd-table th{text-align:left;font-size:11px;font-weight:700;color:hsl(var(--dc-muted));text-transform:uppercase;letter-spacing:.5px;padding:10px 14px;border-bottom:2px solid hsl(var(--dc-border));position:sticky;top:0;background:var(--wh);z-index:1;}
.dd-table td{font-size:13px;padding:12px 14px;border-bottom:1px solid hsl(var(--dc-border));color:hsl(var(--dc-fg));vertical-align:top;}
.dd-table tr:hover td{background:hsl(var(--dc-primary-soft)/.4);}
.dd-section{font-size:12px;font-weight:700;color:hsl(var(--dc-muted));text-transform:uppercase;letter-spacing:1px;margin:18px 0 10px;display:flex;align-items:center;gap:8px;}
.dd-empty{text-align:center;padding:24px;color:hsl(var(--dc-muted));font-size:13px;}

/* ── Dashboard: barras por área + card de gênero (26/08) ──────────────────
   Barras horizontais com número ao lado — o donut de 20 fatias sem rótulo
   "não especificava nada". Cada barra entra em cascata (--i). */
.dash-bars{display:flex;flex-direction:column;justify-content:center;gap:8px;}
.dash-bar{display:grid;grid-template-columns:minmax(90px,150px) 1fr 64px;align-items:center;gap:10px;
  animation:dash-bar-in .4s cubic-bezier(.22,.9,.35,1) both;animation-delay:calc(var(--i,0)*45ms);}
.dash-bar-nome{font-size:12px;font-weight:600;color:#465569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-bar-trilho{height:9px;background:var(--lt);border-radius:99px;overflow:hidden;}
.dash-bar-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--p),#5645D8);
  transform-origin:left center;animation:dash-fill-in .55s cubic-bezier(.22,.9,.35,1) both;animation-delay:calc(var(--i,0)*45ms + 80ms);}
.dash-bar-fill.agregada{background:#C3CCDA;}
.dash-bar-num{font-size:12.5px;font-weight:700;color:var(--dk);text-align:right;white-space:nowrap;}
.dash-bar-num em{font-style:normal;font-weight:500;color:#98A3B5;margin-left:5px;font-size:11px;}
@keyframes dash-bar-in{from{opacity:0;transform:translateX(-6px);}}
@keyframes dash-fill-in{from{transform:scaleX(0);}}

.dash-gen-nums{display:flex;gap:22px;margin-bottom:14px;}
.dash-gen-num b{display:block;font-size:26px;font-weight:800;color:var(--dk);line-height:1.1;}
.dash-gen-num span{font-size:11.5px;color:#8A94A6;}
.dash-gen-num.sem b{color:#98A3B5;}
.dash-gen-barra{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:2px;margin-bottom:12px;}
.dash-gen-seg{display:block;height:100%;transform-origin:left center;animation:dash-fill-in .55s cubic-bezier(.22,.9,.35,1) both;}
.dash-gen-seg.fem{background:#9333EA;}
.dash-gen-seg.masc{background:var(--p);}
.dash-gen-seg.sem{background:#D3DBE6;}
.dash-gen-taxas{font-size:12px;color:#667389;}
.dash-gen-taxas b{color:var(--dk);}

/* ── Animações da casa (as mesmas do portal): a página entra suave, os cards
   do dashboard sobem em cascata, e card clicável responde ao passar o mouse */
.pb{animation:dc-page-in .35s ease both;}
@keyframes dc-page-in{from{opacity:0;transform:translateY(8px);}}
.lv-grid .card, .lv-stat{animation:dc-card-in .4s cubic-bezier(.22,.9,.35,1) both;}
.lv-grid .card:nth-child(1),.lv-stat:nth-child(1){animation-delay:.02s}
.lv-grid .card:nth-child(2),.lv-stat:nth-child(2){animation-delay:.06s}
.lv-grid .card:nth-child(3),.lv-stat:nth-child(3){animation-delay:.10s}
.lv-grid .card:nth-child(4),.lv-stat:nth-child(4){animation-delay:.14s}
.lv-grid .card:nth-child(5),.lv-stat:nth-child(5){animation-delay:.18s}
.lv-grid .card:nth-child(6),.lv-stat:nth-child(6){animation-delay:.22s}
@keyframes dc-card-in{from{opacity:0;transform:translateY(10px);}}
.card[data-detail]{cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.card[data-detail]:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,87,255,.10);border-color:rgba(0,87,255,.25);}
.btn:focus-visible{outline:2px solid var(--p);outline-offset:2px;}
/* empty states com ícone de verdade (adeus emojis, 26/08) */
.empty-lvic{display:flex;justify-content:center;color:#B9C4D4;}
.empty-lvic svg{width:44px;height:44px;stroke-width:1.4;}
/* pontinho de tipo/status — substituiu os emojis nos chips de filtro */
.tl-mini-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;}
@media (prefers-reduced-motion: reduce){
  .pb,.lv-grid .card,.lv-stat,.dash-bar,.dash-bar-fill,.dash-gen-seg{animation:none;}
  .card[data-detail]{transition:none;}
}
.dd-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:9999px;background:hsl(var(--dc-primary-soft));color:hsl(var(--dc-primary-deep));}
.lv-stat::after{
  content:'';position:absolute;bottom:-1px;left:20px;right:20px;height:1px;
  background:linear-gradient(to right,transparent,hsl(var(--dc-primary)/.4),transparent);
  opacity:0;transition:opacity .25s;
}
.lv-stat:hover::after{opacity:1;}
.lv-stat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.lv-stat-sm .lv-stat-head{margin-bottom:10px;}
.lv-stat-icon{
  width:36px;height:36px;border-radius:10px;
  background:hsl(var(--dc-primary-soft));
  color:hsl(var(--dc-primary-deep));
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.lv-stat-delta{
  font-size:11px;font-weight:600;
  background:hsl(152 76% 42%/.10);color:hsl(152 76% 32%);
  padding:3px 9px;border-radius:9999px;
  align-self:flex-start;
}
.lv-stat-delta.down{background:hsl(0 84% 60%/.10);color:hsl(0 84% 50%);}
/* Variantes de cor para o chip de status */
.lv-stat-delta-neutral{background:hsl(var(--dc-border));color:hsl(var(--dc-muted));}
.lv-stat-delta-muted{background:hsl(var(--dc-muted-soft));color:hsl(var(--dc-muted));font-style:italic;}
.lv-stat-value{font-size:26px;font-weight:700;letter-spacing:-.5px;color:hsl(var(--dc-fg));line-height:1;}
.lv-stat-sm .lv-stat-value{font-size:24px;}
.lv-stat-label{font-size:13px;color:hsl(var(--dc-muted));margin-top:5px;}

.lv-insight-card{
  position:relative;overflow:hidden;
  background:var(--dc-grad-brand);
  border-radius:16px;padding:24px;color:#fff;
  box-shadow:var(--dc-shadow-glow);
}
.lv-insight-card::before{
  content:'';position:absolute;inset:0;background:var(--dc-grad-mesh);opacity:.3;
  animation:lvMeshShift 18s ease-in-out infinite;
}
@keyframes lvMeshShift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(-3%,2%) scale(1.05);}
  66%{transform:translate(3%,-2%) scale(.97);}
}
.lv-insight-card > *{position:relative;}
.lv-insight-tag{
  font-size:11px;text-transform:uppercase;letter-spacing:1.2px;font-weight:600;
  opacity:.8;margin-bottom:12px;
}
.lv-insight-title{font-size:20px;font-weight:600;line-height:1.35;margin-bottom:16px;}
.lv-insight-sub{font-size:14px;opacity:.9;line-height:1.6;margin-bottom:24px;}
.lv-insight-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:hsl(0 0% 100%/.15);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:none;color:#fff;font-family:inherit;
  padding:8px 12px;border-radius:8px;
  font-size:13px;font-weight:500;cursor:pointer;
  transition:background .2s;
}
.lv-insight-btn:hover{background:hsl(0 0% 100%/.25);}

/* Team distribution row */
.lv-team-row{margin-bottom:12px;}
.lv-team-row-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-bottom:6px;}
.lv-team-name{font-weight:500;color:hsl(var(--dc-fg));}
.lv-team-meta{color:hsl(var(--dc-muted));font-variant-numeric:tabular-nums;}
.lv-team-growth{color:hsl(152 76% 32%);margin-left:6px;}
.lv-team-bar{height:6px;border-radius:9999px;background:hsl(var(--dc-muted-soft));overflow:hidden;}
.lv-team-bar-fill{
  height:100%;border-radius:9999px;background:var(--dc-grad-brand);
  animation:lvBarGrow 1s var(--dc-ease) both;
}
@keyframes lvBarGrow{from{width:0;}}

/* Mobile fallback — sidebar vira topbar */
@media (max-width:768px){
  .lv-sb{display:none;}
  .lv-main{padding:16px;}
}

/* ══════════════════════════════════════════════════════════════════════
   SKELETON LOADERS — tela de carregamento antes do loadAll() terminar
══════════════════════════════════════════════════════════════════════ */
@keyframes skShimmer{
  0%{background-position:-600px 0;}
  100%{background-position:600px 0;}
}
.sk-line,.sk-card{
  border-radius:8px;
  background:linear-gradient(90deg,
    hsl(220 20% 92%) 25%,
    hsl(220 20% 96%) 50%,
    hsl(220 20% 92%) 75%
  );
  background-size:1200px 100%;
  animation:skShimmer 1.6s ease-in-out infinite;
  display:block;
}
.sk-card{border-radius:14px;}
.skeleton-shimmer{
  border-radius:8px;
  background:linear-gradient(90deg,
    hsl(220 20% 92%) 25%,
    hsl(220 20% 96%) 50%,
    hsl(220 20% 92%) 75%
  );
  background-size:1200px 100%;
  animation:skShimmer 1.6s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════
   PDI / Certificações / Competências / Performance — feature styles
   ════════════════════════════════════════════════════════════════════ */

/* PDI ação row */
.pdi-acao-row{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;
  padding:8px;background:hsl(var(--dc-muted-soft)/.4);
  border-radius:8px;align-items:center;
}

/* Progress bar shared */
.dc-progress-bar{
  height:6px;border-radius:9999px;
  background:hsl(var(--dc-border));overflow:hidden;
}
.dc-progress-fill{
  height:100%;border-radius:9999px;
  background:hsl(var(--dc-primary));
  transition:width .4s ease;
}
.dc-progress-fill.complete{ background:#1DB97B; }

/* Skill level dots */
.skill-dot{
  display:inline-block;width:22px;height:22px;border-radius:50%;
  cursor:pointer;margin:2px;transition:transform .1s ease, opacity .15s ease;
  border:2px solid transparent;
}
.skill-dot:hover{ transform:scale(1.15); }

/* Star rating */
.star-row{ display:inline-flex;gap:2px; }
.star-row .s-on { color:#F59E0B; font-size:16px; }
.star-row .s-off{ color:#E2E8F0; font-size:16px; }

/* Perf dimension score row */
.perf-dim-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 0;border-bottom:1px solid hsl(var(--dc-border));
}
.perf-dim-row:last-child{ border-bottom:none; }

/* Category badge (reusable) */
.dc-badge{
  display:inline-block;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:20px;line-height:1.4;
}

/* Modal mb scroll on tall modals */
.mo.mo-lg .mb{
  max-height:60vh;overflow-y:auto;
  padding-right:4px;
}

/* Certif validity chips */
.certif-expired{ color:#E84040!important;background:rgba(232,64,64,.08)!important; }
.certif-expiring{ color:#F59E0B!important;background:rgba(245,158,11,.08)!important; }

/* ── Perfil 360° ─────────────────────────────────────────────────────── */
.p360-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.p360-section { margin-bottom: 18px; }
.p360-section-title { font-size: 12px; font-weight: 700; color: hsl(var(--dc-muted)); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.p360-metric-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.p360-metric-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; font-size: 12px; font-weight: 600; background: hsl(var(--dc-primary-soft)); color: hsl(var(--dc-primary-deep)); }

/* Os estilos do painel "Marcos do Mês" saíram junto com o painel: os
   aniversários de empresa agora entram sozinhos na Timeline. */

/* ── Movimentações · cartão por pessoa ───────────────────────────────────
   A trilha é uma régua do tempo: um nó por período, e a barra à esquerda
   proporcional à duração. Dá pra ver quem se moveu rápido e quem ficou
   parado sem ler uma data. */
.mvc { background:#fff; border:1px solid var(--ln); border-radius:16px; overflow:hidden;
  transition:border-color .15s, box-shadow .15s; }
.mvc:hover { border-color:#D6DCEA; box-shadow:0 2px 16px -8px rgba(4,18,42,.14); }
.mvc-grid { display:grid; grid-template-columns:minmax(0,1fr) 216px; }
@media (max-width:900px) { .mvc-grid { grid-template-columns:1fr; } .mvc-side { border-left:0 !important; border-top:1px solid var(--ln); } }

.mvc-main { padding:18px 20px; min-width:0; }
.mvc-id { display:flex; align-items:center; gap:12px; }
.mvc-av { width:42px; height:42px; border-radius:13px; background:var(--p10); color:var(--p);
  display:grid; place-items:center; font-size:13px; font-weight:800; letter-spacing:.5px; flex-shrink:0; }
.mvc-nome { font-size:14.5px; font-weight:600; color:var(--dk); letter-spacing:0; line-height:1.3; }
.mvc-meta { font-size:11.5px; color:#95A0B5; margin-top:2px; }
.mvc-pill { flex-shrink:0; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; }
.mvc-pill.on { background:rgba(29,185,123,.12); color:#0F8F5C; }
.mvc-pill.off { background:#F1F2F6; color:#8A94A6; }

/* Cargo atual — o único bloco com peso tipográfico no cartão fechado. */
.mvc-now { margin-top:16px; padding-left:14px; border-left:3px solid var(--p); }
.mvc-eyebrow { font-size:9.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#AAB3C4; }
.mvc-cargo { font-size:15px; font-weight:600; color:var(--dk); letter-spacing:0; line-height:1.35; margin-top:3px; }
.mvc-area { font-size:13px; color:#6B7689; margin-top:1px; }
.mvc-desde { font-size:11.5px; color:#95A0B5; margin-top:5px; }

/* Régua do tempo */
.mvc-trail { margin-top:18px; padding-top:14px; border-top:1px solid var(--ln); }
.mvc-per { display:grid; grid-template-columns:34px minmax(0,1fr); }
.mvc-rail { position:relative; }
.mvc-rail::before { content:''; position:absolute; left:9px; top:0; bottom:0; width:2px; background:var(--ln); }
.mvc-per:first-child .mvc-rail::before { top:14px; }
/* O último nó fecha a linha: sem isso ela seguia até o fim da célula e
   passava por cima do botão "Nova movimentação". */
.mvc-per:last-child .mvc-rail::before { bottom:auto; height:15px; }
.mvc-node { position:absolute; left:4px; top:9px; width:12px; height:12px; border-radius:50%;
  background:#fff; border:2px solid #C9D2E2; }
.mvc-per.atual .mvc-node { border-color:var(--p); background:var(--p); box-shadow:0 0 0 4px var(--p10); }
/* A duração é o ESPAÇO entre os nós, não uma barra por cima: uma barra com
   altura própria estourava a linha e invadia o botão logo abaixo. */

.mvc-row { width:100%; display:flex; align-items:baseline; gap:10px; padding:7px 10px 7px 2px;
  background:none; border:0; text-align:left; font:inherit; color:inherit; cursor:pointer; border-radius:9px; }
.mvc-row:hover { background:var(--lt); }
.mvc-row:focus-visible { outline:2px solid var(--p); outline-offset:-2px; }
/* 23/09 — elementos com role="button" que não são <button>: mesmo foco dos botões,
   por dentro do cartão (o outline de fora encostava no vizinho e sumia na grade) */
.inbox-row:focus-visible,.tl-card-btn:focus-visible,.sli[role="button"]:focus-visible,.dc-kpi.clickable:focus-visible,.drop-zone:focus-visible,tr.tv-mes-btn:focus-visible{outline:2px solid var(--p);outline-offset:-2px;}
.collab-off:focus-visible,.collab-hist:focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:4px;}
/* nome clicável na tabela: 24px de alvo (WCAG 2.5.8) com o mesmo desenho — o respiro é transparente */
.collab-off[role="button"],.collab-hist[role="button"]{display:inline-block;padding:4px 0;}
/* ícones dentro dos botões pequenos de ação (os que eram vazios) no tamanho do texto */
.btn.bxs .lv-sb-ic,.prem-del .lv-sb-ic{width:14px;height:14px;}
.mvc-row-t { flex:1; min-width:0; font-size:13.5px; font-weight:650; color:var(--dk);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mvc-row-d { flex-shrink:0; font-size:11px; color:#95A0B5; font-variant-numeric:tabular-nums; }
.mvc-per.atual .mvc-row-t { color:var(--p); }

.mvc-det { padding:2px 10px 14px 2px; }
.mvc-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:12px 16px;
  padding:12px 14px; background:var(--lt); border-radius:11px; }
.mvc-f-l { font-size:9.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#AAB3C4; }
.mvc-f-v { font-size:12.5px; color:var(--dk); margin-top:2px; word-break:break-word; }
.mvc-f-v.vazio { color:#C8CEDB; }

.mvc-side { padding:18px 16px; background:#FBFCFE; border-left:1px solid var(--ln); }
.mvc-gest { display:flex; align-items:center; gap:10px; margin-top:9px; }
.mvc-gest-av { width:34px; height:34px; border-radius:11px; background:#fff; border:1px solid var(--ln);
  color:var(--p); display:grid; place-items:center; font-size:11px; font-weight:800; flex-shrink:0; }
.mvc-side-fields { margin-top:16px; padding-top:14px; border-top:1px solid var(--ln); display:grid; gap:12px; }

.mvc-warn { margin-top:14px; display:flex; gap:8px; align-items:flex-start; padding:10px 12px;
  background:#FFF8EC; border:1px solid #F3D9A4; border-radius:11px; font-size:11.5px; color:#8A5A00; line-height:1.5; }

/* Cabeçalho de seção da lista (Ativos / Desligados) */
.mvc-sec { display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.mvc-sec-t { font-size:10px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--p); }
.mvc-sec-n { font-size:12px; color:#95A0B5; }
.mvc-sec-line { flex:1; height:1px; background:var(--ln); }

@media (prefers-reduced-motion:reduce) { .mvc { transition:none; } }

/* ── Exit Risk ───────────────────────────────────────────────────────── */
.risk-badge-baixo { background: rgba(29,185,123,.1); color: #0a7c47; }
.risk-badge-medio { background: rgba(245,158,11,.1); color: #a16207; }
.risk-badge-alto { background: rgba(232,64,64,.12); color: #b91c1c; }
.risk-badge-critico { background: rgba(232,64,64,.18); color: #7f1d1d; font-weight: 800; }

/* ── Performance mini bars ───────────────────────────────────────────── */
.perf-dim-bar { height: 6px; border-radius: 3px; background: var(--ln); margin-top: 3px; }
.perf-dim-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }

/* ── Tabela de Movimentações — leitura mais fácil (zebra + hover + divisórias) ── */
.mov-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.mov-table td { background: #fff; border-right: 1px solid #E3E8F2; border-bottom: 1px solid #F0F2F5; }
/* Listras verticais: colunas pares com azul Docato bem sutil (só o suficiente pra separar) */
.mov-table tbody td:nth-child(even) { background: rgba(0,87,255,.045); }
.mov-table tbody tr:hover td { background: rgba(0,87,255,.10); }
.mov-table th { border-right: 1px solid rgba(255,255,255,.25); }
.mov-table input::placeholder { color: #bbb; }

/* ── Transição suave ao recolher/expandir a sidebar ── */
.lv-sb { transition: width .38s ease, min-width .38s ease, padding .38s ease; overflow: hidden; }
.lv-sb.lv-sb-collapsed { width: 0 !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; border-right: none !important; }

/* ═══ FICHA DO COLABORADOR EM SEÇÕES (14/09/2026) ═══
   Cabeçalho com avatar, blocos com ícone + "preenchidos/total", grade com
   respiro fixo (12px entre linhas, 14px entre colunas), entrada em cascata. */
.cf-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.cf-head .dav{width:46px;height:46px;font-size:15px;flex-shrink:0;}
.cf-head .mt{margin-bottom:2px;}
.cf-head .ms{margin:0;}
.cf-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:9999px;background:rgba(29,185,123,.12);color:#158F5F;margin-top:6px;max-width:100%;}
.cf-chip svg{width:12px;height:12px;flex-shrink:0;}
.cf-body{max-height:calc(90vh - 210px);min-height:160px;overflow-y:auto;padding:2px 8px 4px 2px;margin:0 -8px 14px 0;scrollbar-width:thin;}
.cf-sec{margin:0 0 18px;animation:cfSecIn .38s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*55ms);}
.cf-sec:last-child{margin-bottom:4px;}
.cf-sec-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--ln);}
.cf-sec-ic{width:26px;height:26px;border-radius:8px;background:var(--p10);color:var(--p);display:grid;place-items:center;flex-shrink:0;}
.cf-sec-ic svg{width:14px;height:14px;}
.cf-sec-t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6B7488;}
.cf-sec-n{margin-left:auto;font-size:11px;font-weight:600;color:#9AA3B5;font-variant-numeric:tabular-nums;}
.cf-sec-lock{color:var(--p);}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;}
.cf-grid .fg{margin:0;min-width:0;}
.cf-grid .fg.w2{grid-column:1/-1;}
.cf-grid .fl{margin-bottom:6px;}
.cf-grid .fi{transition:border-color .15s ease,box-shadow .15s ease;}
.cf-grid .fi:hover{border-color:#C9D2E3;}
.cf-grid .fi:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p20);}
.cf-foot{display:flex;gap:10px;flex-wrap:wrap;}
.cf-foot .btn{justify-content:center;gap:6px;}
.cf-foot .btn svg{width:15px;height:15px;}
@keyframes cfSecIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media(max-width:560px){.cf-grid{grid-template-columns:1fr;} .cf-foot .btn{flex:1 1 100% !important;}}
@media(prefers-reduced-motion:reduce){.cf-sec{animation:none;} .cf-grid .fi{transition:none;}}

/* ═══ Tela "em manutenção" do app (16/09) — PDI e o que vier a ser remontado ═══ */
.manut-card{display:flex;gap:18px;align-items:flex-start;padding:26px 28px;max-width:720px;}
.manut-ic{width:48px;height:48px;border-radius:14px;background:var(--p10);color:var(--p);display:grid;place-items:center;flex-shrink:0;}
.manut-ic svg{width:22px;height:22px;}
.manut-t{font-size:16px;font-weight:700;color:var(--dk);margin-bottom:6px;}
.manut-p{margin:0;font-size:13.5px;line-height:1.6;color:#555;}

/* ═══ Papel Financeiro + ficha em modo leitura (16/09/2026) ═══ */
.r-fi{background:#E9F9F0;color:#12784A;}
.cf-body-view{max-height:none;overflow:visible;margin:0 0 14px;padding:0;}
.cf-view{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;}
.cf-view>div{min-width:0;}
.cf-view .w2{grid-column:1/-1;}
.cf-view .k{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A93A6;margin-bottom:2px;}
.cf-view .v{font-size:13.5px;color:var(--dk);font-weight:600;overflow-wrap:anywhere;line-height:1.4;}
.cf-view .v.vazio{color:#C4CAD6;font-weight:500;}
@media(max-width:560px){.cf-view{grid-template-columns:1fr;}}


/* Análise de vagas (23/09): impressão só com o conteúdo — sem menu nem controles */
@media print {
  body.va-printing .dc-topbar, body.va-printing .dc-nav, body.va-printing header, body.va-printing .va-ctrl, body.va-printing .va-notas-btn, body.va-printing .notif { display:none !important; }
  body.va-printing .va-vaga { page-break-inside:auto; }
  body.va-printing .va-vaga h3 { page-break-after:avoid; }
}


/* Análise de vagas (23/09): grade dos gráficos (2 colunas fixas — sem buraco) e leitura de candidatos e notas */
.va-graficos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px;}
@media (max-width:900px){.va-graficos{grid-template-columns:1fr;}}
.va-grupo{margin-top:16px;}
.va-grupo-t{font-size:12px;font-weight:700;color:var(--dk);display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.va-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:10px;align-items:start;}
.va-cand{border:1px solid var(--ln);border-radius:12px;padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:8px;min-width:0;}
.va-cand-topo{display:flex;align-items:flex-start;gap:10px;}
.va-cand-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;}
.va-cand-nome{font-weight:700;color:var(--dk);font-size:13.5px;line-height:1.3;overflow-wrap:anywhere;}
.va-cand-meta{font-size:11px;color:#8A93A6;margin-top:2px;}
.va-etapa{flex-shrink:0;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.va-ultima{margin:0;padding:8px 12px;border-left:3px solid var(--p20);background:#F7F9FE;border-radius:0 8px 8px 0;}
.va-ultima-meta{font-size:11px;color:#8A93A6;margin-bottom:3px;}
.va-ultima-txt{font-size:12.5px;line-height:1.55;color:var(--dk);white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.va-sem-nota{font-size:12px;color:#9AA3B5;}
.va-cand .va-notas-btn{align-self:flex-start;}
.va-hist{list-style:none;margin:2px 0 0 16px;padding:0 0 0 16px;border-left:2px solid var(--ln);display:flex;flex-direction:column;gap:12px;}
.va-hist-item{display:flex;gap:10px;}
.va-hist-av{width:26px;height:26px;border-radius:50%;background:var(--p10);color:var(--p);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:-30px;border:2px solid #fff;}
.va-hist-meta{font-size:11px;color:#8A93A6;}
.va-hist-txt{font-size:12.5px;line-height:1.6;color:var(--dk);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px;}
.va-nova{font-size:10px;font-weight:700;color:var(--p);background:var(--p10);border-radius:9999px;padding:1px 7px;}
/* a barra de filtros fica ACIMA dos cartões de números (a lista de vagas abria por trás deles:
   o transform do .card:hover criava uma camada própria e prendia o painel dentro dela) */
.va-barra{position:relative;z-index:40;}
.va-barra:hover{transform:none;}
.va-comp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;}
.va-comp-t{font-size:11px;font-weight:700;color:var(--gr);text-transform:uppercase;letter-spacing:.6px;margin-right:4px;}
.va-comp-tag{font-size:12px;font-weight:600;color:var(--dk);background:#F2F5FB;border:1px solid var(--ln);border-radius:9999px;padding:3px 10px;}
.va-filtro{position:relative;}
.va-filtro > summary{list-style:none;cursor:pointer;}
.va-filtro > summary::-webkit-details-marker{display:none;}
.va-filtro-painel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:min(380px,86vw);background:#fff;border:1px solid var(--ln);border-radius:12px;box-shadow:var(--sh);padding:12px;}
.va-filtro-lista{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:2px;}
.va-filtro-op{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dk);padding:6px;border-radius:8px;cursor:pointer;min-height:32px;}
.va-filtro-op:hover{background:#F2F5FB;}
@media print{ body.va-printing .va-ultima-txt{-webkit-line-clamp:unset;display:block;} body.va-printing .va-cands{grid-template-columns:1fr;} }
/* ═══ DASHBOARD — cara nova (24/09): visão rápida + visão relacional + recorte ═══ */
.pd-ph{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 0 18px;}
.pd-vivo{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:hsl(var(--dc-muted));background:hsl(var(--dc-bg));border:1px solid hsl(var(--dc-border));border-radius:9999px;padding:7px 14px;}
.pd-vivo i{width:8px;height:8px;border-radius:50%;background:hsl(var(--dc-success));box-shadow:0 0 0 0 hsl(var(--dc-success)/.5);animation:pd-pulso 2.4s ease-out infinite;}
@keyframes pd-pulso{0%{box-shadow:0 0 0 0 hsl(var(--dc-success)/.45);}70%{box-shadow:0 0 0 7px hsl(var(--dc-success)/0);}100%{box-shadow:0 0 0 0 hsl(var(--dc-success)/0);}}
.pd-recorte{position:relative;background:hsl(var(--dc-bg));border:1px solid hsl(var(--dc-border));border-radius:16px;padding:12px 14px;margin-bottom:22px;display:grid;gap:8px;box-shadow:var(--dc-shadow-soft);}
.pd-filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.pd-f{display:grid;gap:3px;flex:1 1 180px;max-width:280px;}
.pd-f span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--dc-muted));}
.pd-f select{height:36px;padding:0 10px;font-size:13.5px;}
.pd-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:26px;}
.pd-chip{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--fn,inherit);background:hsl(var(--dc-primary-soft));color:hsl(var(--dc-primary-deep));border:0;border-radius:9999px;padding:5px 6px 5px 11px;cursor:pointer;}
.pd-chip span{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:hsl(var(--dc-bg));font-size:12px;}
.pd-chip:hover{background:hsl(var(--dc-primary)/.16);}
.pd-link{font:600 12.5px var(--fn,inherit);color:hsl(var(--dc-primary-deep));background:none;border:0;padding:3px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.pd-sem-filtro,.pd-dica{font-size:12.5px;color:hsl(var(--dc-muted));}
.pd-nivel{display:grid;gap:14px;margin-bottom:30px;}
.pd-nivel-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.pd-nivel-h h2{margin:0;font-size:17px;font-weight:780;letter-spacing:-.01em;color:hsl(var(--dc-fg));}
.pd-nivel-h p{margin:0;font-size:12.5px;color:hsl(var(--dc-muted));}
.pd-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.pd-tile{display:grid;gap:5px;align-content:start;text-align:left;font:inherit;color:inherit;background:hsl(var(--dc-bg));border:1px solid hsl(var(--dc-border));border-radius:18px;padding:18px 18px 12px;cursor:pointer;transition:transform .18s var(--dc-ease),box-shadow .18s var(--dc-ease),border-color .18s;}
.pd-tile:hover{transform:translateY(-2px);border-color:hsl(var(--dc-primary)/.45);box-shadow:0 18px 42px -20px hsl(var(--dc-fg)/.28);}
.pd-tile:focus-visible{outline:2px solid hsl(var(--dc-primary));outline-offset:2px;}
.pd-tile-l{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:hsl(var(--dc-muted));}
.pd-tile-l svg{width:16px;height:16px;color:hsl(var(--dc-primary));flex-shrink:0;}
.pd-tile-v{font-size:34px;font-weight:780;letter-spacing:-.035em;line-height:1.05;color:hsl(var(--dc-fg));font-variant-numeric:tabular-nums;}
.pd-tile-v small{font-size:15px;font-weight:650;color:hsl(var(--dc-muted));margin-left:3px;letter-spacing:0;}
.pd-tile-d{font-size:12.5px;color:hsl(var(--dc-muted));font-variant-numeric:tabular-nums;min-height:18px;}
.pd-pill{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:9999px;padding:3px 10px;}
.pd-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;}
.pd-pill.bom{background:hsl(152 55% 45%/.13);color:hsl(152 52% 30%);}
.pd-pill.atencao{background:hsl(38 95% 50%/.15);color:hsl(32 90% 32%);}
.pd-pill.critico{background:hsl(0 80% 58%/.13);color:hsl(0 70% 42%);}
.pd-pill.vazio{padding:0;min-height:21px;background:none;}
.pd-spark-w{display:grid;gap:4px;margin-top:4px;}
.pd-spark-cv{position:relative;display:block;height:40px;margin-right:4px;}
.pd-spark{width:100%;height:40px;display:block;overflow:visible;}
.pd-spark-dot{position:absolute;right:-4px;width:8px;height:8px;margin-top:-4px;border-radius:50%;box-shadow:0 0 0 2px hsl(var(--dc-bg));}
.pd-spark-ref{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:hsl(var(--dc-muted));font-variant-numeric:tabular-nums;}
.pd-box{display:grid;gap:10px;align-content:start;min-width:0;padding:16px 18px;}
.pd-box-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.pd-box-h h3{margin:0;font-size:14px;font-weight:700;color:hsl(var(--dc-fg));}
.pd-tabela{overflow:auto;max-height:430px;border:1px solid hsl(var(--dc-border));border-radius:12px;}
.pd-matriz{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;}
.pd-matriz th{position:sticky;top:0;background:hsl(var(--dc-muted-soft));font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:hsl(var(--dc-muted));text-align:left;padding:9px 12px;white-space:nowrap;z-index:1;}
.pd-matriz td{padding:8px 12px;border-top:1px solid hsl(var(--dc-border));white-space:nowrap;}
.pd-matriz .n{text-align:right;}
.pd-matriz tbody tr:hover{background:hsl(var(--dc-muted-soft)/.6);}
.pd-matriz tbody tr.sel,.pd-matriz tbody tr.sel:hover{background:hsl(var(--dc-primary-soft));}
.pd-matriz tbody tr.vazio td{color:hsl(var(--dc-muted));}
.pd-matriz tbody tr.vazio .pd-area{color:hsl(var(--dc-muted));font-weight:500;}
.pd-fora{font-size:12.5px;line-height:1.5;color:hsl(32 90% 30%);background:hsl(38 95% 50%/.10);border-radius:10px;padding:8px 12px;}
.pd-area{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--fn,inherit);color:hsl(var(--dc-fg));background:none;border:0;padding:0;cursor:pointer;text-align:left;}
.pd-area:hover{color:hsl(var(--dc-primary-deep));text-decoration:underline;text-underline-offset:3px;}
.pd-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;}
.pd-gestor{color:hsl(var(--dc-muted));max-width:200px;overflow:hidden;text-overflow:ellipsis;}
.pd-heat{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;}
.pd-heat b{display:inline-block;height:8px;border-radius:4px;background:hsl(var(--dc-primary));}
.pd-alto{color:hsl(0 70% 42%);font-weight:700;}
.pd-sobe{color:hsl(152 52% 32%);} .pd-desce{color:hsl(0 70% 45%);}
.pd-dem{font-size:11px;font-weight:700;color:hsl(32 90% 32%);background:hsl(38 95% 50%/.15);border-radius:9999px;padding:1px 7px;margin-left:4px;}
.pd-rel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;}
.pd-cv{position:relative;height:230px;}
.pd-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:hsl(var(--dc-muted));}
.pd-leg-b{display:inline-flex;align-items:center;gap:6px;font:inherit;color:hsl(var(--dc-fg));background:none;border:0;padding:2px 4px;border-radius:6px;cursor:pointer;}
.pd-leg-b i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.pd-leg-b.fraco{opacity:.45;}
.pd-leg-b.linha{cursor:default;color:hsl(var(--dc-muted));}
.pd-leg-b.linha i{height:2px;width:14px;border-radius:2px;background:#4A5670;}
.pd-leituras{display:grid;gap:8px;}
.pd-leitura{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:start;background:hsl(var(--dc-muted-soft)/.7);border-radius:12px;padding:10px 12px;}
.pd-leitura-k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:hsl(var(--dc-muted));padding-top:2px;}
.pd-leitura p{margin:0 0 2px;font-size:13.5px;line-height:1.45;color:hsl(var(--dc-fg));}
.pd-comp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.pd-grande{font-size:26px;font-weight:780;letter-spacing:-.02em;color:hsl(var(--dc-fg));}
.pd-grande small{font-size:12.5px;font-weight:500;color:hsl(var(--dc-muted));letter-spacing:0;}
.pd-barra{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;font-size:12.5px;}
.pd-barra-r{color:hsl(var(--dc-muted));font-weight:600;}
.pd-barra-t{height:7px;background:hsl(var(--dc-muted-soft));border-radius:99px;overflow:hidden;}
.pd-barra-t span{display:block;height:100%;background:hsl(var(--dc-primary));border-radius:99px;}
.pd-barra-n{font-variant-numeric:tabular-nums;color:hsl(var(--dc-fg));white-space:nowrap;}
.pd-barra-n em{font-style:normal;color:hsl(var(--dc-muted));margin-left:6px;}
.pd-colunas{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;align-items:end;padding-top:4px;}
.pd-col{display:grid;justify-items:center;gap:4px;text-align:center;}
.pd-col-n{font-size:14px;font-weight:750;color:hsl(var(--dc-fg));font-variant-numeric:tabular-nums;}
.pd-col-t{display:flex;align-items:flex-end;width:100%;max-width:46px;height:110px;background:hsl(var(--dc-muted-soft));border-radius:8px;overflow:hidden;}
.pd-col-t span{display:block;width:100%;background:linear-gradient(180deg,hsl(var(--dc-primary-glow)),hsl(var(--dc-primary)));border-radius:8px 8px 0 0;}
.pd-col-r{font-size:12px;font-weight:650;color:hsl(var(--dc-fg));}
.pd-col-p{font-size:11.5px;color:hsl(var(--dc-muted));font-variant-numeric:tabular-nums;}
.pd-col-s{font-size:11px;font-weight:600;color:hsl(0 70% 42%);min-height:14px;}
.pd-lista{display:grid;gap:8px;}
.pd-li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;padding-bottom:8px;border-bottom:1px dashed hsl(var(--dc-border));}
.pd-li:last-child{border-bottom:0;padding-bottom:0;}
.pd-li-s{color:hsl(var(--dc-muted));}
.pd-ok{font-size:13px;color:hsl(152 52% 30%);}
.pd-mini{position:fixed;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:calc(100% - 32px);font-size:13px;color:hsl(var(--dc-fg));background:hsl(var(--dc-bg));border:1px solid hsl(var(--dc-border));border-radius:9999px;padding:7px 16px;box-shadow:0 12px 32px -12px hsl(var(--dc-fg)/.25);}
.pd-mini[hidden]{display:none;}
.pd-mini-t{color:hsl(var(--dc-muted));}
@media (max-width:1400px){ .pd-tiles{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:1100px){ .pd-tiles{grid-template-columns:repeat(2,minmax(0,1fr));} .pd-rel,.pd-comp{grid-template-columns:1fr;} }
@media (max-width:560px){ .pd-tiles{grid-template-columns:1fr;} .pd-f{max-width:none;} }
@media (prefers-reduced-motion:reduce){ .pd-vivo i{animation:none;} .pd-tile{transition:none;} .pd-tile:hover{transform:none;} }