/**
 * Menu Responsivo Aprimorado
 * Implementação seguindo diretrizes de UX/UI com abordagem mobile-first
 * Data: 12/04/2025
 */

:root {
  /* Cores do sistema */
  --roxo: #6f42c1;
  --roxo-claro: #8c68d6;
  --roxo-escuro: #5a36a0;
  --laranja: #fd7e14;
  --laranja-claro: #ff9642;
  --laranja-escuro: #e06000;
  
  /* Cores neutras */
  --branco: #ffffff;
  --cinza-100: #f8f9fa;
  --cinza-200: #e9ecef;
  --cinza-300: #dee2e6;
  --cinza-400: #ced4da;
  --cinza-500: #adb5bd;
  --cinza-600: #6c757d;
  --cinza-700: #495057;
  --cinza-800: #343a40;
  --cinza-900: #212529;
  
  /* Espaçamentos */
  --espacamento-1: 0.25rem;
  --espacamento-2: 0.5rem;
  --espacamento-3: 1rem;
  --espacamento-4: 1.5rem;
  
  /* Transições */
  --transicao-rapida: 150ms;
  --transicao-normal: 300ms;
  
  /* Z-index */
  --z-menu: 1000;
  --z-menu-overlay: 999;
}

/* ====== MENU DROPDOWN (DESKTOP) ====== */

.menu-usuario {
  position: relative;
  font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
}

.menu-usuario-toggle {
  display: flex;
  align-items: center;
  gap: var(--espacamento-2);
  padding: var(--espacamento-2) var(--espacamento-3);
  background-color: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transicao-rapida) ease;
  min-height: 44px;
  font-weight: 600;
  color: var(--cinza-800);
}

.menu-usuario-toggle:hover {
  background-color: var(--cinza-100);
}

.menu-usuario-toggle i {
  color: var(--roxo);
  font-size: 1.25rem;
}

.menu-usuario-toggle .seta {
  margin-left: auto;
  transition: transform var(--transicao-rapida) ease;
}

.menu-usuario-toggle.ativo .seta {
  transform: rotate(180deg);
}

.menu-usuario-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 250px;
  background-color: var(--branco);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: var(--z-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transicao-normal) ease;
}

.menu-usuario-dropdown.ativo {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Grupos de menu */
.menu-grupo {
  padding: var(--espacamento-2) 0;
  border-bottom: 1px solid var(--cinza-200);
}

.menu-grupo:last-child {
  border-bottom: none;
}

/* Título de seção expansível */
.menu-secao-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espacamento-2) var(--espacamento-3);
  font-weight: 600;
  color: var(--cinza-800);
  cursor: pointer;
  transition: all var(--transicao-rapida) ease;
}

.menu-secao-titulo:hover {
  background-color: var(--cinza-100);
  color: var(--roxo);
}

.menu-secao-titulo i.seta {
  transition: transform var(--transicao-rapida) ease;
}

.menu-secao-titulo.ativo i.seta {
  transform: rotate(180deg);
}

/* Conteúdo da seção expansível */
.menu-secao-conteudo {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transicao-normal) ease;
}

.menu-secao-conteudo.ativo {
  max-height: 500px; /* Altura máxima suficiente para o conteúdo */
  overflow-y: auto;
}

/* Itens do menu */
.menu-item {
  display: flex;
  align-items: center;
  padding: var(--espacamento-2) var(--espacamento-3);
  color: var(--cinza-800);
  text-decoration: none;
  transition: all var(--transicao-rapida) ease;
  position: relative;
  min-height: 44px;
}

.menu-item:hover {
  background-color: var(--cinza-100);
  color: var(--roxo);
}

.menu-item i {
  width: 24px;
  margin-right: var(--espacamento-2);
  font-size: 1.1rem;
  color: var(--roxo);
  text-align: center;
}

.menu-item.destaque {
  background-color: var(--roxo-claro);
  color: var(--branco);
  margin: var(--espacamento-2) var(--espacamento-3);
  border-radius: 4px;
  padding: var(--espacamento-2) var(--espacamento-3);
}

.menu-item.destaque i {
  color: var(--branco);
}

.menu-item.destaque:hover {
  background-color: var(--roxo);
  color: var(--branco);
}

/* Contador de notificações */
.contador-notificacoes {
  position: absolute;
  right: var(--espacamento-3);
  background-color: var(--laranja);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--espacamento-1);
}

/* Cabeçalho do usuário */
.menu-usuario-header {
  padding: var(--espacamento-3);
  background-color: var(--roxo-claro);
  color: var(--branco);
  display: flex;
  align-items: center;
  gap: var(--espacamento-2);
}

.menu-usuario-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--roxo-escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.menu-usuario-info {
  flex: 1;
}

.menu-usuario-nome {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 2px;
}

.menu-usuario-email {
  font-size: 0.75rem;
  opacity: 0.9;
}

/* ====== MENU MOBILE ====== */

/* Menu hamburger */
.menu-mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: none;
  color: var(--roxo);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Menu lateral mobile */
.menu-mobile-sidebar {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  background-color: var(--branco);
  z-index: var(--z-menu);
  overflow-y: auto;
  transition: left var(--transicao-normal) ease;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}

.menu-mobile-sidebar.ativo {
  left: 0;
}

.menu-mobile-header {
  padding: var(--espacamento-3);
  background-color: var(--roxo);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-mobile-close {
  background: none;
  border: none;
  color: var(--branco);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Overlay para o menu mobile */
.menu-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-menu-overlay);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transicao-normal) ease;
}

.menu-mobile-overlay.ativo {
  opacity: 1;
  visibility: visible;
}

/* Menu inferior fixo para mobile */
.menu-inferior {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--branco);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: var(--z-menu);
  padding: var(--espacamento-1) 0;
}

.menu-inferior-itens {
  display: flex;
  justify-content: space-around;
}

.menu-inferior-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--espacamento-1);
  color: var(--cinza-700);
  text-decoration: none;
  font-size: 0.75rem;
  position: relative;
  flex: 1;
  text-align: center;
}

.menu-inferior-item i {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.menu-inferior-item.ativo {
  color: var(--roxo);
}

.menu-inferior-item .contador-notificacoes {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(8px);
}

/* Botão de ação flutuante para mobile */
.botao-acao-flutuante {
  display: none;
  position: fixed;
  bottom: 70px;
  right: var(--espacamento-3);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--laranja);
  color: var(--branco);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: var(--z-menu);
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  text-decoration: none;
  transition: all var(--transicao-rapida) ease;
}

.botao-acao-flutuante:hover {
  background-color: var(--laranja-escuro);
  transform: scale(1.05);
}

/* ====== RESPONSIVIDADE ====== */

/* Tablets (768px e acima) */
@media (max-width: 991px) {
  .menu-usuario-dropdown {
    width: 280px;
  }
  
  /* Menu colapsável para tablets */
  .menu-colapsado .menu-item span {
    display: none;
  }
  
  .menu-colapsado .menu-item i {
    margin-right: 0;
    font-size: 1.25rem;
  }
  
  .menu-colapsado {
    width: 60px;
  }
  
  .menu-colapsado .menu-item {
    justify-content: center;
    padding: var(--espacamento-2);
  }
  
  .menu-colapsado .contador-notificacoes {
    top: 5px;
    right: 5px;
  }
}

/* Mobile (767px e abaixo) */
@media (max-width: 767px) {
  /* Mostrar menu mobile */
  .menu-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .menu-inferior {
    display: block;
  }
  
  .botao-acao-flutuante {
    display: flex;
  }
  
  /* Ajustar padding do body para o menu inferior */
  body {
    padding-bottom: 60px;
  }
}

/* Mobile pequeno (375px e abaixo) */
@media (max-width: 375px) {
  .menu-inferior-item span {
    font-size: 0.7rem;
  }
}