/* ===== Vars (fallbacks caso a página não declare) ===== */
:root{
  --nav-w:240px; --nav-w-mini:72px;
  --surface:#fff; --bg:#f6f7fb; --line:#eceef6;
  --shadow:0 10px 30px rgba(34,37,44,.06);
  --purple:#6f4ef6; --purple-700:#5b3fd9;
  --text:#2b2f3b; --muted:#6d7390;
}

/* =======================================================
   TOP BAR (usa <header id="topbar"> criado via topbar.js)
   ======================================================= */
.topbar{
  position:sticky; top:0; z-index:30;
  height:60px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
  padding-left:max(12px, env(safe-area-inset-left));
  padding-right:max(12px, env(safe-area-inset-right));
}
.tb-left{ display:flex; align-items:center; gap:10px }
.tb-title{ font-weight:800; color:var(--text) }
.tb-right{ margin-left:auto; display:flex; align-items:center; gap:8px }
.hamburger{
  border:1px solid var(--line); background:#fff; border-radius:10px;
  height:34px; width:34px; display:grid; place-items:center; cursor:pointer;
}
.user{ display:flex; align-items:center; gap:6px }
.avatar{
  width:28px; height:28px; border-radius:50%;
  background:var(--purple); color:#fff; display:grid; place-items:center; font-weight:700;
}

/* Botões básicos (apenas se a página não tiver) */
.btn{
  height:32px; border-radius:10px; border:1px solid var(--line);
  background:#fff; font-weight:600; padding:0 12px; cursor:pointer;
}
.btn.primary{ background:var(--purple); border-color:var(--purple); color:#fff }
.btn.ghost{ background:#fff }
.btn[disabled]{ opacity:.6; cursor:not-allowed }

/* Oculta hambúrguer no desktop */
@media (min-width:1025px){ .hamburger{ display:none !important } }

/* Empurra conteúdo quando sidebar fixa existir (opcional) */
.has-left-sidebar .topbar{ left:var(--nav-w) }
.has-left-sidebar.nav-mini .topbar{ left:var(--nav-w-mini) }

/* =======================================================
   BOTTOM NAV (mobile) (usa <nav id="bottomNav">)
   ======================================================= */
.bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 65px;
      background: #fff;
      border-radius: 35px 35px 0 0;
      border-top: 1px solid var(--line);
      display: grid;                               /* FIX: grid real */
      grid-template-columns: repeat(5, 1fr);
      align-items: center;
      z-index: 45;
      padding-bottom: max(env(safe-area-inset-bottom), 0px);
      box-shadow: 0 -6px 24px rgb(14 75 217 / 24%);
      contain: layout paint;                       /* isola paint/overflow */
    }
.bottom-nav a, .bottom-nav button{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; height:100%; min-width:0;
  text-decoration:none; color:#3f3b77; font-size:12px; font-weight:700;
}
.bottom-nav .ico{ font-size:22px; line-height:1 }
.bottom-nav a[aria-current="page"]{ color:#4b2bb5 }

/* Botão central “plus” */
  .bottom-nav .plus {
    position: absolute;
    left: 43%;
    transform: translate(-50%, -18px);
    width: 0;
    height: 0;
    display: grid
;
    place-items: center;
    border-radius: 999px;
    font-size: 40px;
    line-height: 1;
    pointer-events: auto;
}

/* Mostrar só no mobile */
@media (min-width:1025px){ .bottom-nav{ display:none !important } }

/* Espaço extra no conteúdo para não ficar sob a bottom-nav */
.has-bottom-nav-padding{ padding-bottom:120px }