/* ============================================================
   EQUIPE COM LOGIN PRÓPRIO (Módulo 7)
   ============================================================
   O crachá é a peça desta entrega: identifica a pessoa da equipe no
   menu dela, no convite que o Master gera e na página que o convidado
   abre. A cor da faixa é a do papel: ciano para Gestor, lilás para
   Colaborador. O resto segue os blocos e os tokens do sistema.

   Carregado pelo index.html e pelo convite.html; as cores saem de
   var(token, reserva) porque o convite não tem o :root do sistema.
   ============================================================ */

.cracha{
  --faixa:var(--cyan,#4dc9f6); --faixa-txt:var(--cyan-text,#4dc9f6);
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  width:220px;max-width:100%;padding:30px 20px 0;border-radius:18px;overflow:hidden;
  background:var(--panel-2,#121a2e);border:1px solid var(--line-2,rgba(255,255,255,.14));
  box-shadow:0 26px 50px -30px rgba(0,0,0,.9);color:var(--txt,#f2f5fb)
}
.cracha.p-colaborador{--faixa:#a78bfa;--faixa-txt:#b9a3ff}
/* o furo do cordão: é o que faz o retângulo virar crachá */
.cracha-furo{position:absolute;top:11px;left:50%;width:46px;height:9px;margin-left:-23px;border-radius:9px;
  background:var(--bg,#06070d);box-shadow:inset 0 1px 2px rgba(0,0,0,.6);border:1px solid var(--line-2,rgba(255,255,255,.14))}
.cracha-loja{max-width:100%;font-weight:600;font-size:11.5px;line-height:1.35;color:var(--muted,#9aa7c2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cracha-ini{display:grid;place-items:center;width:74px;height:74px;margin:16px 0 14px;border-radius:50%;
  font-weight:800;font-size:25px;letter-spacing:.02em;color:var(--txt,#f2f5fb);
  background:var(--panel-3,#172238);box-shadow:0 0 0 3px var(--panel-2,#121a2e),0 0 0 5px var(--faixa)}
.cracha-nome{display:block;max-width:100%;font-weight:800;font-size:18px;line-height:1.2;letter-spacing:-.015em;
  color:var(--ink,#fff);overflow-wrap:anywhere}
.cracha-papel{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:6px;
  font-weight:700;font-size:12.5px;color:var(--faixa-txt)}
.cracha-papel i{font-style:normal;font-weight:500;font-size:12px;color:var(--muted,#9aa7c2)}
/* a faixa de cor embaixo, como a dos crachás de loja */
.cracha::after{content:"";display:block;align-self:stretch;height:12px;margin:22px -20px 0;background:var(--faixa)}
.cracha.vazio .cracha-nome{color:var(--muted-2,#757f9b);font-weight:600}
.cracha.vazio .cracha-ini{color:var(--muted-2,#757f9b)}
.cracha.desligado{filter:grayscale(1);opacity:.75}
.cracha.desligado::after{background:var(--muted-2,#757f9b)}

/* no menu lateral e na folha do celular: deitado, faixa à esquerda */
.cracha.mini{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;width:auto;
  column-gap:11px;row-gap:0;padding:12px 12px 12px 18px;margin:2px 0 12px;border-radius:14px;box-shadow:none}
.cracha.mini::after{position:absolute;left:0;top:0;bottom:0;width:5px;height:auto;margin:0}
.cracha.mini .cracha-furo{display:none}
.cracha.mini .cracha-ini{grid-row:span 3;width:38px;height:38px;margin:0;font-size:14px;
  box-shadow:0 0 0 2px var(--panel-2,#121a2e),0 0 0 3.5px var(--faixa)}
.cracha.mini{display:grid;grid-template-columns:auto minmax(0,1fr)}
.cracha.mini .cracha-loja{grid-column:2;order:3;font-size:11px}
.cracha.mini .cracha-nome{grid-column:2;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cracha.mini .cracha-papel{grid-column:2;flex-direction:row;gap:6px;margin:1px 0 0;font-size:11.5px}
.cracha.mini .cracha-papel i{font-size:11.5px}
.cracha.mini .cracha-ini{grid-column:1;grid-row:1 / span 3}

/* ============================================================
   CRM › Equipe e acessos
   ============================================================ */
.eq-tela{display:flex;flex-direction:column;gap:16px}
.eq-convite{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.eq-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.eq-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.eq-papeis{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.eq-papeis legend{padding:0;margin-bottom:7px;font-weight:600;font-size:12px;color:var(--muted,#9aa7c2)}
.eq-papel{position:relative;display:flex;flex-direction:column;gap:4px;padding:13px 14px 13px 40px;border-radius:13px;
  cursor:pointer;border:1px solid var(--line-2,rgba(255,255,255,.14));background:var(--surface,rgba(255,255,255,.04));
  transition:border-color .16s,background .16s}
.eq-papel input{position:absolute;left:14px;top:15px;width:16px;height:16px;margin:0;accent-color:var(--cyan,#4dc9f6)}
.eq-papel.p-colaborador input{accent-color:#a78bfa}
.eq-papel b{font-weight:700;font-size:13.5px;color:var(--ink,#fff)}
.eq-papel span{font-weight:500;font-size:12px;line-height:1.45;color:var(--muted,#9aa7c2)}
.eq-papel.on.p-gestor{border-color:rgba(77,201,246,.55);background:rgba(77,201,246,.07)}
.eq-papel.on.p-colaborador{border-color:rgba(167,139,250,.55);background:rgba(167,139,250,.08)}
.eq-papel:focus-within{outline:2px solid var(--cyan,#4dc9f6);outline-offset:2px}
.eq-funcao{max-width:320px}
.eq-funcao span i{font-style:normal;font-weight:500;color:var(--muted-2,#757f9b)}
.eq-form-pe{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.eq-form-pe .ex-msg{flex:1 1 220px;font-size:12.5px;color:var(--muted,#9aa7c2)}
.eq-form-pe .ex-msg.err{color:var(--danger,#ff7a7a)}

.eq-previa{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.eq-previa-nota{max-width:260px;margin:0;text-align:center;font-size:12px;line-height:1.5;color:var(--muted,#9aa7c2)}

/* o convite gerado: o crachá, o link e os três jeitos de mandar */
.eq-pronto{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;
  animation:eqChega .28s ease-out}
@keyframes eqChega{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.eq-pronto .cracha{width:190px;padding-top:26px}
.eq-pronto .cracha-ini{width:58px;height:58px;font-size:20px;margin:12px 0 10px}
.eq-pronto-txt{display:flex;flex-direction:column;gap:3px;text-align:center}
.eq-pronto-txt b{font-weight:800;font-size:15px;color:var(--ok,#37d99a)}
.eq-pronto-txt span{font-size:12px;line-height:1.5;color:var(--muted,#9aa7c2)}
.eq-link{display:block;width:100%}
.eq-link input{width:100%;padding:10px 12px;border-radius:10px;font-family:inherit;font-size:12px;
  color:var(--txt,#f2f5fb);background:var(--bg-1,#0a0d18);border:1px solid var(--line-2,rgba(255,255,255,.14))}
.eq-mandar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.eq-mandar .ex-btn{flex:1 1 100%}
.eq-mandar .ex-mini{flex:1 1 0;justify-content:center;text-decoration:none}
.eq-mandar .eq-wa{color:#25d366;border-color:rgba(37,211,102,.45)}
.eq-pronto-pe{margin:0;font-size:11.5px;color:var(--muted-2,#757f9b);text-align:center}
.eq-txt-b{padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--cyan-text,#4dc9f6);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* a lista da equipe: linhas, não cartões */
.eq-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.eq-pessoa{display:grid;grid-template-columns:40px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.3fr) auto;
  align-items:center;gap:14px;padding:14px 4px;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.eq-pessoa:first-child{border-top:0}
.eq-ini{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-weight:800;font-size:13px;
  color:var(--txt,#f2f5fb);background:var(--panel-3,#172238);box-shadow:0 0 0 2px var(--cyan,#4dc9f6)}
.eq-ini.p-colaborador{box-shadow:0 0 0 2px #a78bfa}
.eq-pessoa.s-desligado .eq-ini{box-shadow:0 0 0 2px var(--muted-2,#757f9b);color:var(--muted-2,#757f9b)}
.eq-quem{display:flex;flex-direction:column;gap:2px;min-width:0}
.eq-quem b{font-weight:700;font-size:13.5px;color:var(--ink,#fff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-quem span{font-size:12px;color:var(--muted,#9aa7c2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-papel-l{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.eq-selo{display:inline-block;padding:3px 9px;border-radius:999px;font-weight:700;font-size:11.5px;
  color:var(--cyan-text,#4dc9f6);background:rgba(77,201,246,.12)}
.eq-selo.p-colaborador{color:#b9a3ff;background:rgba(167,139,250,.14)}
.eq-funcao-l{font-size:12px;color:var(--muted,#9aa7c2)}
.eq-sit{display:flex;flex-direction:column;gap:2px;min-width:0}
.eq-sit-t{font-weight:600;font-size:12.5px;color:var(--txt,#f2f5fb)}
.eq-pessoa.s-ativo .eq-sit-t{color:var(--ok,#37d99a)}
.eq-pessoa.s-enviado .eq-sit-t{color:var(--warn-text,#ffb454)}
.eq-pessoa.s-vencido .eq-sit-t,.eq-pessoa.s-desligado .eq-sit-t{color:var(--muted-2,#757f9b)}
.eq-acesso{font-size:11.5px;color:var(--muted,#9aa7c2)}
.eq-acoes{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.eq-acoes .ex-mini{white-space:nowrap}
.eq-acoes .ex-mini svg{width:13px;height:13px}
.eq-perigo{color:var(--danger,#ff7a7a)!important}
.eq-edita{display:flex;gap:8px;min-width:0;grid-column:3 / span 2}
.eq-edita select,.eq-edita input{min-width:0;padding:8px 10px;border-radius:9px;font-family:inherit;font-size:12.5px;
  color:var(--txt,#f2f5fb);background:var(--bg-1,#0a0d18);border:1px solid var(--line-2,rgba(255,255,255,.14))}
.eq-edita input{flex:1 1 auto}
.eq-pessoa:has(.eq-edita) .eq-sit{display:none}

@media (max-width:980px){
  .eq-convite{grid-template-columns:1fr}
  .eq-previa{order:-1}
  .eq-pessoa{grid-template-columns:40px minmax(0,1fr) auto;row-gap:8px}
  .eq-papel-l{grid-column:2}
  .eq-sit{grid-column:2}
  .eq-acoes{grid-column:1 / -1;justify-content:flex-start;padding-left:54px}
  .eq-edita{grid-column:2 / -1}
}
@media (max-width:620px){
  .eq-campos,.eq-papeis{grid-template-columns:1fr}
  .eq-funcao{max-width:none}
  .eq-form-pe .ex-btn{width:100%}
  .eq-acoes{padding-left:0}
}

/* ============================================================
   O sistema para quem é da equipe
   ============================================================ */
/* o que é do Master não aparece: implantação, arquivos da mentoria,
   dúvidas, chat da mentoria, avisos do admin e os termos do Master */
body.modo-equipe .overall,
body.modo-equipe #docsBtn,
body.modo-equipe #helpBtn,
body.modo-equipe #adminLink,
body.modo-equipe #topAdmin,
body.modo-equipe #karolBtn,
body.modo-equipe #avisoBar,
body.modo-equipe .af-prog,
body.modo-equipe #termosBtn,
body.modo-equipe .user-pencil,
/* o crachá no alto do menu já diz quem é: o cartão de baixo repetiria */
body.modo-equipe .sb-user{display:none!important}
body.modo-equipe .sb-nav .cracha.mini{margin:4px 2px 14px}
/* menu recolhido: o crachá vira só as iniciais */
.app.menu-rail .sb-nav .cracha.mini{padding:8px;justify-content:center;grid-template-columns:auto}
.app.menu-rail .sb-nav .cracha.mini > :not(.cracha-ini){display:none}
.fo-cracha{padding:4px 2px 10px}
.fo-cracha .cracha.mini{margin:0}

/* acesso desligado: nada da loja por trás, só o recado */
.eq-desligada{position:fixed;inset:0;z-index:9000;display:none;place-items:center;padding:24px 16px;
  background:var(--bg,#06070d)}
.eq-desligada.show{display:grid}
.eq-desl-card{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:420px;text-align:center}
.eq-desl-card h2{margin-top:10px;font-weight:800;font-size:21px;line-height:1.25;letter-spacing:-.015em;color:var(--ink,#fff)}
.eq-desl-card p{margin:0;font-size:14px;line-height:1.6;color:var(--muted,#9aa7c2)}
.eq-desl-card .ex-btn{margin-top:8px;min-width:160px}

/* modo claro */
body.light .cracha{box-shadow:0 22px 40px -28px rgba(20,45,100,.45)}
body.light .cracha.p-colaborador,body.light .eq-selo.p-colaborador{--faixa-txt:#6d4fd8}
body.light .eq-selo{color:var(--cyan-text,#15698f);background:rgba(21,105,143,.1)}
body.light .eq-selo.p-colaborador{color:#6d4fd8;background:rgba(109,79,216,.1)}
body.light .eq-papel.on.p-gestor{border-color:rgba(21,105,143,.55);background:rgba(21,105,143,.06)}
body.light .eq-papel.on.p-colaborador{border-color:rgba(109,79,216,.5);background:rgba(109,79,216,.06)}
body.light .eq-mandar .eq-wa{color:#13795b;border-color:rgba(19,121,91,.45)}
body.light .eq-pronto-txt b,body.light .eq-pessoa.s-ativo .eq-sit-t{color:#13795b}

@media (prefers-reduced-motion:reduce){ .eq-pronto{animation:none} }