/* ============================================================
   COMPONENTE COMPARTILHADO · Topbar e botão hambúrguer
   ------------------------------------------------------------
   Usado pelo Portal do Parceiro (portal-v2) e pelo Admin (admin-v2).

   Existe para que os dois produtos não tenham duas cópias do mesmo
   componente. A origem é o Portal: estas regras foram extraídas de
   portal-v2/css/style.css sem alteração, para que a aparência não mude
   em lugar nenhum.

   SÓ APARÊNCIA. Deliberadamente NÃO contém:
     * media queries — cada aplicação revela a topbar no seu próprio
       ponto de quebra (Portal 820px, Admin 900px), porque a largura em
       que a lateral deixa de caber depende do número de itens do menu;
     * comportamento — abrir e fechar é responsabilidade de cada shell
       (portal-v2/js/shell.js e admin-v2/js/layout.js).

   `.topbar` nasce com `display: none`. Quem a exibe é a media query de
   cada aplicação.

   As variáveis usadas (--navy, --border) têm os MESMOS valores nos dois
   produtos, conferido antes da extração:
     --navy   #1a3a7c
     --border rgba(26,58,124,0.10)
   O `rgba(247,246,242,0.97)` do fundo é o --cream (#f7f6f2) a 97%.
   ============================================================ */

/* ── Topbar (só mobile) ── */
.topbar {
  display: none;
  position: sticky; top: 0; z-index: 100;
  align-items: center; justify-content: space-between;
  padding: 0 18px; height: 62px;
  background: rgba(247,246,242,0.97); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-marca { display: flex; align-items: center; gap: 9px; }
.topbar-marca img { height: 32px; width: auto; }
.topbar-marca .marca-nome {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 18px; color: var(--navy);
}
.hamburguer {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.hamburguer span {
  display: block; width: 22px; height: 2px;
  background: var(--navy); border-radius: 2px; transition: .2s;
}

/* ── Painel do menu (só mobile) ──
   Painel de tela cheia abaixo da topbar, com fundo translúcido. Não existe
   overlay separado: o próprio painel cobre a tela, e é isso que faz o papel
   de scrim.

   `inset: 62px` deixa a topbar visível e o hambúrguer clicável com o menu
   aberto. `z-index: 190` fica acima da topbar (100) para que o painel cubra
   qualquer conteúdo fixo da página.

   A classe de estado é `.aberto`, aplicada ao próprio painel — os dois
   produtos usam o mesmo nome. */
.menu-mobile {
  display: none;
  position: fixed; inset: 62px 0 0 0; z-index: 190;
  flex-direction: column; gap: 4px;
  padding: 20px 20px 40px;
  background: rgba(247,246,242,0.98); backdrop-filter: blur(10px);
  overflow-y: auto;
}
.menu-mobile.aberto { display: flex; }
.menu-mobile a {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  font-size: 16px; font-weight: 400; color: var(--text);
  text-decoration: none; border-radius: 10px;
  border-bottom: 1px solid var(--border);
}
.menu-mobile a .ico { font-size: 18px; width: 24px; text-align: center; }
.menu-mobile a:last-of-type { border-bottom: 0; }
.menu-mobile a:hover, .menu-mobile a.ativo { background: var(--soft2); color: var(--navy); }
.menu-mobile a.ativo { font-weight: 500; }
.menu-mobile .btn-sair-mobile {
  margin-top: 18px; justify-content: center;
  background: var(--soft2); color: var(--red);
  border-radius: 100px; padding: 15px; font-weight: 500;
  border: 0; cursor: pointer; font-family: inherit; font-size: 15px;
}