/* Barra lateral tem 300px, mas os itens ocupavam so 129px.
   Agora preenchem a largura, com area de toque maior. */
@media (max-width: 900px) {
  body.menu-aberto #menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
  }
  body.menu-aberto .menu-btn {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    gap: 12px !important;
  }
  body.menu-aberto .menu-btn > span {
    font-size: 18px !important;
  }
}

/* ---------------------------------------------------------------
   O BOTAO SAIR PARAVA DE APARECER.

   .sidebar tem height:100vh e nenhuma rolagem; .profile-card usa
   margin-top:auto para descer. Enquanto os itens de menu couberam na
   altura da tela funcionou. Com Checklists e Adesao a soma passou de
   100vh e o Sair saiu da area visivel -- sem barra de rolagem para
   alcancar.

   A correcao e estrutural, nao de altura: o menu vira a parte elastica,
   com rolagem propria, e perfil e Sair ficam presos embaixo. Assim
   acrescentar item novo amanha nao quebra de novo. Ajustar uma altura
   fixa resolveria hoje e voltaria no proximo item.
   --------------------------------------------------------------- */
@media (min-width: 821px) {
  .sidebar { overflow: hidden; }

  .sidebar #menu {
    flex: 1 1 auto;
    min-height: 0;          /* sem isto o flex nao deixa encolher e a rolagem nunca aparece */
    overflow-y: auto;
    padding-right: 4px;
  }
  .sidebar #menu::-webkit-scrollbar { width: 6px; }
  .sidebar #menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14); border-radius: 3px;
  }
  .sidebar #menu { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }

  .sidebar .profile-card {
    margin-top: 14px !important;   /* deixa de ser 'auto': quem estica agora e o menu */
    flex: 0 0 auto;
  }
  .sidebar #btnSair { flex: 0 0 auto; }
}

/* Icones de traco: acompanham a cor do item (inclusive o vermelho do ativo),
   tamanho fixo em qualquer aparelho, e opacidade menor quando inativo para
   o rotulo continuar sendo o que se le primeiro. */
.menu-btn .menu-ico {
  width: 20px; height: 20px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .62; transition: opacity .18s ease;
}
.menu-btn .menu-ico svg { width: 20px; height: 20px; display: block; }
.menu-btn:hover .menu-ico { opacity: .9; }
.menu-btn.active .menu-ico { opacity: 1; }
.menu-btn .menu-ico--emoji { font-size: 16px; line-height: 1; opacity: .8; }

/* 800 era peso de titulo num item de menu -- parte da sensacao de "amador".
   650 mantem a hierarquia e para de competir com o conteudo. */
.sidebar .menu-btn { font-weight: 650; font-size: 14.5px; letter-spacing: .1px; }
.sidebar .menu-btn .menu-rotulo { min-width: 0; }

/* ESPACO E ALINHAMENTO DO ICONE -- SEM DEPENDER DE LARGURA NEM DE FLEX.

   A medicao no navegador mostrou o problema real: numa janela de 828px o
   .menu-btn esta com display:block. Ou seja, o gap:12px nao existe (gap so
   vale em flex/grid) e o icone assenta pela LINHA DE BASE do texto --
   0px de espaco e 2,8px fora da reta.

   Eu vinha tentando resolver com @media (max-width:820px), que naquela
   largura nem chega a valer. Corte de largura era a ferramenta errada.

   Agora o espaco vem de margin-right (funciona em block E em flex) e o
   alinhamento de vertical-align:middle (funciona em block; em flex quem
   manda e o align-items:center, que ja existe). O gap e zerado para nao
   somar com a margem no computador.
   --------------------------------------------------------------- */
.sidebar .menu-btn,
#menu .menu-btn { gap: 0 !important; }

.menu-btn .menu-ico {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  margin-right: 13px !important;
}
.menu-btn .menu-ico svg { display: block !important; }
.menu-btn .menu-rotulo { vertical-align: middle !important; }