/* ============================================================
   HUB Ecossistema Unificado v1.17 — Shared Brand & Transitions
   Aplicado em todos os apps. Brand-dot é usado apenas em
   Financeiro e Folha. Tráfego não usa.
   ============================================================ */

/* ── PAGE FADE TRANSITIONS ── */
body{animation:hubPageEnter .38s cubic-bezier(.4,0,.2,1)}
body.page-exit{animation:hubPageExit .22s cubic-bezier(.4,0,.2,1) forwards}
@keyframes hubPageEnter{
  from{opacity:0;transform:translateY(4px);filter:blur(2px)}
  to  {opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes hubPageExit{
  to{opacity:0;transform:translateY(-3px);filter:blur(2px)}
}

/* ── BRAND DOT (Financeiro + Folha) ── */
.brand-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;
  background:conic-gradient(#96B81A 0deg,#3B82F6 120deg,#D97706 240deg,#96B81A 360deg);
  animation:hubBrandSpin 6s linear infinite;
}
@keyframes hubBrandSpin{to{transform:rotate(360deg)}}

/* ── HUB BACK BUTTON (botão pra voltar ao portal) ── */
.hub-back{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  color:var(--t3,#7A7570);background:transparent;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.hub-back:hover{
  color:var(--ac-val,var(--ac2,currentColor));
  background:var(--sf,rgba(0,0,0,.04));
  border-color:var(--bd,rgba(0,0,0,.1));
}
.hub-back svg{display:block}

/* ====================================================================
   USER CHIP + DROPDOWN — Compartilhado entre portal e apps (Fase 2)
   Inserido via HubAuth.mountUserChip(container, user, opts)
   ==================================================================== */
.user-chip{position:relative;display:inline-flex}
.user-chip-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 12px 5px 5px;
  background:var(--sf,#1E1D18);
  border:1px solid var(--bd2,var(--bd,rgba(255,255,255,.12)));
  border-radius:999px;
  cursor:pointer;
  color:var(--txt,#F4EDE0);
  font-family:inherit;
  transition:background .25s,border-color .25s,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.user-chip-btn:hover{
  border-color:rgba(99,102,241,.30);
  transform:translateY(-1px);
}
.user-chip-btn:active{transform:translateY(0) scale(.97);transition:transform .12s}
.user-chip-avatar{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,#96B81A,#3B82F6);
  display:inline-flex;align-items:center;justify-content:center;
  color:white;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:-.01em;flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.user-chip-avatar.admin{background:linear-gradient(135deg,#FBBF24,#D97706)}
.user-chip-name{
  font-size:13px;font-weight:500;
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.005em;color:var(--txt,#F4EDE0);
}
.user-chip-caret{
  color:var(--t3,#7A7570);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.user-chip.open .user-chip-caret{transform:rotate(180deg)}

.user-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:240px;
  background:var(--sf,#1E1D18);
  border:1px solid var(--bd2,var(--bd,rgba(255,255,255,.12)));
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.30),0 4px 12px rgba(0,0,0,.18);
  padding:12px;
  opacity:0;visibility:hidden;
  transform:translateY(-6px) scale(.97);
  transform-origin:top right;
  transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .2s;
  z-index:5000;
}
.user-chip.open .user-menu{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .25s,transform .3s cubic-bezier(.34,1.56,.64,1),visibility 0s;
}
.user-menu-info{padding:6px 8px 10px}
.user-menu-name{
  font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:600;
  color:var(--txt,#F4EDE0);letter-spacing:-.01em;margin-bottom:2px;
}
.user-menu-email{
  font-size:11.5px;color:var(--t2,#B0A898);font-family:'JetBrains Mono',monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.user-menu-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.user-menu-badge{
  font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  display:inline-flex;align-items:center;gap:4px;
  border:1px solid transparent;
}
.user-menu-badge::before{
  content:'';width:5px;height:5px;border-radius:50%;background:currentColor;
}
.user-menu-badge.admin{background:rgba(251,191,36,.10);color:#FCD34D;border-color:rgba(251,191,36,.30)}
.user-menu-badge.active{background:rgba(34,197,94,.10);color:#86EFAC;border-color:rgba(34,197,94,.28)}
html.light .user-menu-badge.admin,html:not(.dark) .user-menu-badge.admin{color:#92400E}
html.light .user-menu-badge.active,html:not(.dark) .user-menu-badge.active{color:#166534}

.user-menu-divider{
  height:1px;background:var(--bd,rgba(0,0,0,.1));margin:6px -12px;
}
.user-menu-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:9px 10px;border-radius:9px;
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:500;
  color:var(--txt,#F4EDE0);
  transition:background .2s,color .2s,transform .2s;
}
.user-menu-item:hover{background:var(--sf2,rgba(255,255,255,.05));transform:translateX(2px)}
.user-menu-item svg{color:var(--t3,#7A7570);flex-shrink:0;transition:color .2s,transform .25s}
.user-menu-item:hover svg{color:var(--txt,#F4EDE0);transform:translateX(2px)}
.user-menu-logout:hover{color:#FCA5A5}
.user-menu-logout:hover svg{color:#EF4444}
html.light .user-menu-logout:hover,html:not(.dark) .user-menu-logout:hover{color:#B91C1C}

@media(max-width:640px){
  .user-chip-name{display:none}
  .user-chip-caret{display:none}
  .user-chip-btn{padding:5px}
}