/* Drawer (hambúrguer) — mobile = off-canvas; desktop = sidebar normal */
:root{
  --drawer-w: 84vw;     /* largura no mobile */
  --drawer-max: 360px;  /* largura máxima no mobile */
  --drawer-shadow: 0 18px 50px rgba(0,0,0,.25);
}

/* BACKDROP */
#drawer-scrim{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  z-index: 1001;
}

/* SIDEBAR padrão (desktop) — mantêm seu estilo atual */
#sidebar{
  /* nada aqui: no desktop continua do jeito que já está */
}

/* MOBILE: vira off-canvas */
@media (max-width: 900px){
  #sidebar{
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(var(--drawer-w), var(--drawer-max));
    max-width: 100%;
    background: #fff;
    z-index: 1002;
    box-shadow: var(--drawer-shadow);
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow: auto;
  }
  #sidebar.open{ transform: translateX(0); }

  /* quando aberto, habilita o scrim */
  #drawer-scrim.open{ opacity: 1; pointer-events: auto; }
}

/* Botão do menu (padrão) */
.btn-menu{
  display: inline-flex; align-items: center; gap: .5rem;
  border: 0; background: #0b7285; color: #fff;
  padding: .45rem .65rem; border-radius: .75rem; cursor: pointer;
}
.btn-menu i{ font-size: 1rem; }

/* Evitar scroll de fundo no mobile quando menu aberto */
@media (max-width: 900px){
  body.drawer-open{ overflow: hidden; }
}