/* =====================================================================
   topo.css — canto direito do header (Fable 5): bandeiras REAIS (flag-icons),
   menu de perfil com foto + moldura animada e dropdown de opções (estilo YouTube).
   Arquivo separado do bt.css de propósito (não colide com o resto do time).
   ===================================================================== */

/* ---------- bandeiras de verdade (flag-icons) ---------- */
.bt-flag{
  display:inline-block; width:1.35em; height:1.01em; border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 2px 5px rgba(0,0,0,.5);
  vertical-align:-2px; background-size:cover; background-position:center;
}
.bt-flag-emoji{ font-size:1.05em; line-height:1; }
.bt-lang-bandeira{ display:inline-flex; align-items:center; }

/* ---------- sino de notificações ---------- */
.bt-sino{ position:relative; }
.bt-sino-n{
  position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:linear-gradient(180deg,#FF3B63,#D50E36); color:#fff;
  font-size:10.5px; font-weight:900; display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(213,14,54,.55); border:1.5px solid #12060a;
}

/* ============ MENU DE PERFIL ============ */
.bt-eu{ position:relative; }

/* botão (foto + nome + seta) */
.bt-eu-bt{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:3px 10px 3px 4px; border-radius:999px;
  background:linear-gradient(180deg,rgba(60,10,22,.55),rgba(30,6,12,.55));
  border:1px solid rgba(255,60,99,.35); color:#fff;
  font:inherit; font-weight:800; line-height:1;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.bt-eu-bt:hover{ border-color:rgba(255,80,120,.75); box-shadow:0 0 16px rgba(255,23,68,.35); }
.bt-eu[aria-owns], .bt-eu.aberto .bt-eu-bt{ border-color:#FF3B63; box-shadow:0 0 20px rgba(255,23,68,.5); }
.bt-eu-nome{ max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
.bt-eu-emb{ font-size:.92em; }
.bt-eu-seta{ opacity:.8; transition:transform .2s; }
.bt-eu.aberto .bt-eu-seta{ transform:rotate(180deg); }

/* avatar com moldura girando (o --anel vem inline do PHP) */
.bt-eu-av{ position:relative; width:34px; height:34px; border-radius:50%; flex:0 0 auto; }
.bt-eu-av::before{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  background:var(--anel, conic-gradient(from 0deg,#FFD23D,#FF1744,#FFD23D));
  animation:bt-eu-gira 7s linear infinite; z-index:0;
}
.bt-eu-av.vip::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  box-shadow:0 0 12px 2px rgba(255,180,0,.55); z-index:0; pointer-events:none;
}
.bt-eu-foto{
  position:relative; z-index:1; display:grid; place-items:center;
  width:100%; height:100%; border-radius:50%;
  background:#1a0a10 center/cover no-repeat; color:#fff; font-size:17px;
  box-shadow:inset 0 0 0 2px #12060a;
}
.bt-eu-foto.tem{ font-size:0; }
.bt-eu-coroa{
  position:absolute; z-index:2; right:-3px; bottom:-3px; font-size:11px; line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));
}
@keyframes bt-eu-gira{ to{ transform:rotate(360deg); } }

/* dropdown */
.bt-eu-menu{
  position:absolute; top:calc(100% + 10px); right:0; width:290px; max-width:86vw;
  background:linear-gradient(180deg,#1b0810,#120509); color:#fff;
  border:1px solid rgba(255,60,99,.4); border-radius:16px; z-index:120;
  box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 22px rgba(255,23,68,.22);
  padding:8px; opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease; overflow:hidden;
}
.bt-eu.aberto .bt-eu-menu{ opacity:1; transform:none; pointer-events:auto; }
.bt-eu-menu::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,#FFD23D,#FF1744,#FF6584,#FFD23D);
}

/* cabeçalho do menu (avatar grande + nome + cargo) */
.bt-eu-cab{
  display:flex; align-items:center; gap:12px; padding:12px 12px 12px 10px;
  border-radius:12px; text-decoration:none; color:#fff;
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,23,68,.16),transparent 60%);
  transition:background .18s;
}
.bt-eu-cab:hover{ background:rgba(255,23,68,.14); }
.bt-eu-av.grande{ width:52px; height:52px; }
.bt-eu-av.grande .bt-eu-foto{ font-size:26px; }
.bt-eu-cab-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bt-eu-cab-txt b{ font-size:15px; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt-eu-cargo{ font-size:11.5px; color:#ffb9c6; font-weight:700; }
.bt-eu-vipt{ color:#FFD23D; }
.bt-eu-ver{ font-size:11.5px; color:#7fe3ff; font-weight:800; margin-top:2px; }

/* grupos de itens */
.bt-eu-itens{ padding:6px 2px; border-top:1px solid rgba(255,255,255,.08); margin-top:6px; }
.bt-eu-itens:first-of-type{ }
.bt-eu-itens a{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px;
  color:#f2e9ec; text-decoration:none; font-size:13.5px; font-weight:700;
  transition:background .14s, color .14s, padding-left .14s;
}
.bt-eu-itens a:hover{ background:rgba(255,23,68,.16); color:#fff; padding-left:16px; }
.bt-eu-itens a .i{ width:22px; text-align:center; font-size:15px; flex:0 0 auto; }
.bt-eu-sair{ color:#ff8ba1 !important; }
.bt-eu-sair:hover{ background:rgba(255,23,68,.24) !important; }

/* ---------- mobile: no estreito só a foto (sem nome), menu vira quase full ---------- */
@media (max-width:720px){
  .bt-eu-bt{ padding:3px; gap:0; }
  .bt-eu-nome{ display:none; }
  .bt-eu-seta{ display:none; }
  .bt-eu-menu{ position:fixed; top:64px; right:8px; left:8px; width:auto; max-width:none; }
}

/* ---------- header CABE no celular (sem overflow horizontal — Braga: "tá feio pra celular") ---------- */
@media (max-width:640px){
  .topo{ gap:8px; padding-left:12px; padding-right:12px; }
  .marca > span:last-child{ display:none; }   /* só o quadradinho "BT" no celular */
  .topo-dir{ gap:5px; }
  .busca{ min-width:0; flex:1 1 auto; }
}
@media (max-width:400px){
  .topo{ gap:6px; }
  .bt-lang .rot{ display:none; }              /* seletor de idioma vira só a bandeira */
  .bt-lang-seta{ display:none; }
}