/* ============================================================
   shell.css — a casca do software: tokens, topo, dock e o feel.
   As seções trazem o próprio CSS (leads.css, sections.css).
   ============================================================ */
:root{
  --ink:#0A0A0F; --card:#141420; --card2:#1A1A28; --border:#26263A;
  --txt:#F5F5FA; --mut:#9A9AAE; --dim:#6B6B80;
  --pur:#8B5CF6; --pur2:#7C3AED; --pur3:#C4A9FF; --acid:#C6FF00;
  --warn:#FFB020; --bad:#FF5C5C; --ok:#3BD671;
  --topbar-h:56px;
  --display:'Clash Display','Poppins',sans-serif;   /* títulos, números, nomes */
  --ui:'Inter',sans-serif;                           /* corpo, UI, texto denso */
  --mono:'Epilogue',sans-serif;                      /* rótulos, eyebrows, dados */
}
*{margin:0;padding:0;box-sizing:border-box;}

/* cara de app: nada de selecionar/copiar a interface nem arrastar imagem.
   Campos de texto voltam a ser livres logo abaixo. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{background:var(--ink);color:var(--txt);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;min-height:100vh;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:default;}
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text;cursor:auto;}
img,svg{-webkit-user-drag:none;user-drag:none;}
::selection{background:rgba(124,58,237,.35);}

/* scrollbars limpas em todo o app (página, listas, caixas, textareas) */
*{scrollbar-width:thin;scrollbar-color:#2E2E42 transparent;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#2C2C40;border-radius:9px;border:3px solid transparent;
  background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:#3B3B54;background-clip:padding-box;}
::-webkit-scrollbar-corner{background:transparent;}

/* ---------- topo fino ---------- */
.topbar{position:sticky;top:0;z-index:40;height:var(--topbar-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;
  background:rgba(10,10,15,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);}
.topbar .marca{display:flex;align-items:center;gap:10px;justify-self:start;}
.topbar .marca svg{width:24px;height:24px;flex:0 0 24px;
  filter:drop-shadow(0 0 7px rgba(124,58,237,.55)) drop-shadow(0 0 18px rgba(124,58,237,.28));}
.topbar .marca .nome{font-family:var(--display);font-weight:700;font-size:20px;
  letter-spacing:-1px;line-height:1;}
.secao-atual{justify-self:center;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mut);}

.conta{justify-self:end;display:flex;align-items:center;gap:12px;}
.conta .quem{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);text-align:right;line-height:1.5;}
.conta .quem b{display:block;color:var(--txt);font-weight:700;text-transform:none;
  letter-spacing:-.2px;font-size:12.5px;font-family:var(--ui);}
.conta .sair{background:transparent;border:1px solid var(--border);color:var(--mut);
  font-family:var(--ui);font-size:12.5px;font-weight:500;padding:6px 12px;
  border-radius:8px;cursor:pointer;transition:border-color 180ms,color 180ms;}
.conta .sair:hover{border-color:var(--bad);color:var(--bad);}

/* ---------- área de conteúdo (folga pro dock não cobrir) ---------- */
.conteudo{min-height:calc(100vh - var(--topbar-h));padding-bottom:104px;}
.painel-sec{animation:secaoEntra .34s cubic-bezier(.22,.9,.3,1);}
.painel-sec[hidden]{display:none;}
@keyframes secaoEntra{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* moldura padrão das seções que não são o Leads */
.sec-wrap{max-width:1180px;margin:0 auto;padding:30px 32px 20px;}
.sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--border);}
.sec-head h1{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-1.2px;}
.sec-head .explica{color:var(--mut);font-size:14px;margin-top:8px;max-width:620px;line-height:1.6;}

/* ---------- dock flutuante (o seletor de seções) ---------- */
.dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  display:flex;gap:2px;padding:6px;border-radius:18px;
  background:rgba(18,18,28,.72);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid var(--border);
  box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 34px rgba(124,58,237,.14);}
.dock button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:4px;width:74px;padding:9px 6px 7px;background:transparent;border:0;cursor:pointer;
  color:var(--dim);font-family:var(--ui);transition:color 220ms ease-out;}
.dock button:hover{color:var(--mut);}
.dock button.on{color:var(--pur3);}
.dock button .ic{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform 260ms cubic-bezier(.34,1.4,.5,1);}
.dock button:hover .ic{transform:translateY(-2px);}
.dock button.on .ic{transform:translateY(-2px);
  filter:drop-shadow(0 3px 8px rgba(124,58,237,.5));}
.dock button .rot{font-size:10.5px;font-weight:600;letter-spacing:-.1px;}
/* indicador que desliza atrás da seção ativa — roxo assina onde você está */
.dock-ind{position:absolute;top:6px;bottom:6px;left:6px;width:74px;border-radius:13px;
  background:rgba(124,58,237,.16);border:1px solid rgba(139,92,246,.45);
  box-shadow:0 0 18px rgba(124,58,237,.25) inset;
  transition:transform 380ms cubic-bezier(.5,1.25,.4,1);pointer-events:none;z-index:0;}

/* ---------- estado vazio das seções ainda não modeladas ---------- */
.futuro{max-width:560px;margin:0 auto;padding:90px 24px;text-align:center;}
.futuro .ic{width:46px;height:46px;stroke:var(--pur3);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px;opacity:.9;}
.futuro h2{font-family:var(--display);font-weight:700;font-size:30px;
  letter-spacing:-1px;margin-bottom:12px;}
.futuro p{color:var(--mut);font-size:15px;line-height:1.7;margin-bottom:8px;}
.futuro .marco{display:inline-block;margin-top:20px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acid);
  border:1px solid rgba(198,255,0,.35);background:rgba(198,255,0,.07);
  border-radius:8px;padding:8px 14px;}

/* ---------- banner de servidor offline (global) ---------- */
#offline{display:none;margin:16px 22px 0;background:rgba(255,92,92,.1);
  border:1px solid var(--bad);border-radius:12px;padding:16px 18px;font-size:14.5px;
  line-height:1.65;color:var(--txt);}
#offline.on{display:block;}
#offline code{font-family:var(--mono);font-size:13px;background:var(--ink);
  border:1px solid var(--border);border-radius:5px;padding:2px 7px;}
#offline .det{font-family:var(--mono);font-size:12px;color:var(--mut);}

/* ---------- tela de login ---------- */
.login-tela{display:none;position:fixed;inset:0;z-index:100;background:var(--ink);
  align-items:center;justify-content:center;padding:24px;}
.login-tela.on{display:flex;}
.login-caixa{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--border);border-radius:18px;padding:34px 30px;}
.login-caixa svg{width:44px;height:44px;
  filter:drop-shadow(0 0 8px rgba(124,58,237,.55)) drop-shadow(0 0 20px rgba(124,58,237,.3));}
.login-caixa h1{font-family:var(--display);font-weight:700;font-size:23px;
  letter-spacing:-.6px;text-align:center;}
.login-caixa .sub-login{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);text-align:center;margin-bottom:8px;}
.login-caixa input{background:var(--ink);border:1px solid var(--border);border-radius:10px;
  color:var(--txt);font-family:var(--ui);font-size:14.5px;padding:12px 14px;
  transition:border-color 180ms;}
.login-caixa input:focus{outline:none;border-color:var(--pur);}
.login-caixa input::placeholder{color:var(--dim);}
.login-btn{background:var(--acid);border:0;color:var(--ink);font-family:var(--ui);
  font-weight:600;font-size:14.5px;padding:12px;border-radius:10px;cursor:pointer;margin-top:4px;
  transition:background 180ms;}
.login-btn:hover{background:#D6FF33;}
.login-btn:disabled{opacity:.6;cursor:default;}
.login-erro{color:var(--bad);font-size:13px;line-height:1.5;display:none;}
.login-erro.on{display:block;}

/* ---------- confirmação nossa (no lugar do confirm() do navegador) ---------- */
.ui-confirm{max-width:400px;}
.ui-confirm h3{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.4px;
  margin-bottom:8px;}
.ui-confirm p{font-size:14px;color:var(--mut);line-height:1.6;margin-bottom:20px;}
.ui-acoes{display:flex;gap:9px;justify-content:flex-end;}
.b.perigo{border-color:var(--bad);color:var(--bad);}
.b.perigo:hover{background:var(--bad);border-color:var(--bad);color:var(--ink);}

/* ---------- toasts ---------- */
#toasts{position:fixed;right:20px;bottom:104px;z-index:90;display:flex;flex-direction:column;
  gap:10px;align-items:flex-end;pointer-events:none;}
.toast{background:var(--card2);border:1px solid var(--border);border-left:3px solid var(--ok);
  border-radius:11px;padding:12px 16px;font-size:13.5px;color:var(--txt);max-width:320px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;transform:translateY(10px);
  transition:opacity .3s ease-out,transform .3s cubic-bezier(.3,1,.4,1);}
.toast.on{opacity:1;transform:none;}
.toast.erro{border-left-color:var(--bad);}
.toast.neutro{border-left-color:var(--pur2);}

/* ---------- recepção (boas-vindas com energia) ---------- */
/* cobre a tela já no primeiro paint (classe "on" vem no HTML): sem ver o
   painel por baixo, sem fade-in. O único fade é o de SAÍDA (.saindo). */
.recepcao{display:none;position:fixed;inset:0;z-index:95;background:var(--ink);
  align-items:center;justify-content:center;overflow:hidden;cursor:pointer;}
.recepcao.on{display:flex;}
.recepcao.saindo{animation:recSai .45s ease-in forwards;}
@keyframes recSai{to{opacity:0;transform:scale(1.03)}}
.rec-orb{position:absolute;width:min(72vh,660px);height:min(72vh,660px);border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.32),transparent 66%);
  filter:blur(18px);pointer-events:none;animation:orbPulse 3.2s ease-in-out infinite;}
@keyframes orbPulse{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.08);opacity:1}}
.rec-simbolo{position:absolute;width:min(60vh,560px);height:min(60vh,560px);opacity:.14;
  pointer-events:none;animation:recGira 26s linear infinite;
  filter:drop-shadow(0 0 40px rgba(124,58,237,.6));}
@keyframes recGira{to{transform:rotate(360deg)}}
.rec-conteudo{position:relative;text-align:center;padding:24px;max-width:840px;}
.rec-saud{font-family:var(--display);font-weight:600;font-size:clamp(18px,3vw,26px);
  color:var(--mut);letter-spacing:-.3px;margin-bottom:14px;}
/* o nome do colaborador, só aqui: Clash Display bold no gradiente roxo do
   símbolo, maior e com glow — destaque sem brigar com o verde da frase. */
.rec-nome{font-family:var(--display);font-weight:700;font-size:1.55em;letter-spacing:-.5px;
  background:linear-gradient(92deg,#E9DDFF,#B79CFF 50%,#8B5CF6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(139,92,246,.4));}
.rec-frase{font-family:var(--display);font-weight:700;font-size:clamp(44px,8.2vw,88px);
  letter-spacing:-1.5px;line-height:1.12;}
.rec-frase .pw{display:inline-block;margin:0 .16em;opacity:0;transform:translateY(26px);
  animation:pwUp .8s cubic-bezier(.16,.75,.3,1) forwards;animation-delay:calc(var(--i)*.16s + .35s);}
.rec-frase .acc{color:var(--acid);}
@keyframes pwUp{to{opacity:1;transform:none}}
.rec-entrar{margin-top:38px;background:var(--acid);border:0;color:var(--ink);font-family:var(--ui);
  font-weight:600;font-size:15.5px;padding:14px 30px;border-radius:12px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;opacity:0;
  box-shadow:0 8px 30px rgba(198,255,0,.2);
  animation:recBtn .5s ease-out 1.05s forwards;transition:background .18s,transform .18s;}
.rec-entrar span{transition:transform .18s;}
.rec-entrar:hover{background:#D6FF33;transform:translateY(-2px);}
.rec-entrar:hover span{transform:translateX(4px);}
@keyframes recBtn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.recepcao.on .rec-saud{animation:recSobe .5s .05s both cubic-bezier(.2,.9,.3,1);}
@keyframes recSobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .painel-sec,.dock-ind,.dock button .ic,.toast,.rec-orb,.rec-simbolo,
  .recepcao.on .rec-saud{animation:none!important;transition:none!important;}
  .rec-frase .pw,.rec-entrar{opacity:1!important;transform:none!important;animation:none!important;}
}
@media(max-width:720px){
  .topbar{padding:0 12px;}
  .secao-atual{display:none;}
  .conta .quem{display:none;}
  .dock button{width:60px;}
  .dock-ind{width:60px;}
  .sec-wrap{padding:22px 16px 16px;}
}