/* ============================================================================
   ESTILOS DE NAVEGACIÓN - MENÚ SUPERIOR
   ============================================================================ */

/* Navegación principal más limpia */
nav {
  border-bottom: 1px solid #e5e7eb !important;
}

/* Mejoras para los dropdowns de navegación */
.dropdown-menu {
  width: 11rem !important;
  top: 100% !important;
  margin-top: 0.25rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  left: 0 !important;
  right: auto !important;
}

/* Asegurar que los dropdowns no se corten */
.group {
  position: relative !important;
}

/* Mejorar el espaciado de los elementos del menú */
.group .dropdown-menu a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.group .dropdown-menu a:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
  transform: translateX(2px) !important;
}

/* Hover effects mejorados */
.group:hover .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Transiciones más suaves */
.dropdown-menu {
  transition: all 0.2s ease-in-out !important;
  transform: translateY(-8px) !important;
  transform-origin: top !important;
}

/* Corregir z-index para asegurar que aparezcan encima */
.dropdown-menu {
  z-index: 1000 !important;
}

/* Asegurar que los botones del dropdown tengan el cursor pointer */
.dropdown-toggle {
  cursor: pointer !important;
  user-select: none !important;
}

/* Mejorar la apariencia de los iconos */
.dropdown-toggle i[class*="chevron"] {
  transition: transform 0.2s ease !important;
}

.group:hover .dropdown-toggle i[class*="chevron"] {
  transform: rotate(180deg) !important;
}

/* Espaciado consistente para elementos del menú principal */
.hidden.sm\:ml-6.sm\:flex.sm\:space-x-6 > * + * {
  margin-left: 1.5rem !important;
}

/* Mejorar la alineación vertical */
.hidden.sm\:ml-6.sm\:flex.sm\:space-x-6 {
  align-items: center !important;
  height: 4rem !important;
}

/* Botones del menú principal más uniformes */
.dropdown-toggle,
.hidden.sm\:ml-6.sm\:flex.sm\:space-x-6 > a {
  height: 2.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem !important;
  transition: all 0.15s ease !important;
}

.dropdown-toggle:hover,
.hidden.sm\:ml-6.sm\:flex.sm\:space-x-6 > a:hover {
  background-color: #f9fafb !important;
}

/* Iconos más consistentes */
.dropdown-menu i {
  width: 1rem !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* ============================================================================
   ESTILOS PARA MENÚ MOBILE
   ============================================================================ */

/* Botón hamburguesa */
.mobile-menu-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  border-radius: 0.375rem !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  transition: all 0.15s ease !important;
}

.mobile-menu-button:hover {
  color: #374151 !important;
  background-color: #f9fafb !important;
}

.mobile-menu-button:focus {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #6366f1 !important;
}

/* Menú mobile */
.mobile-menu {
  display: block !important;
  width: 100% !important;
  background-color: white !important;
  border-top: 1px solid #e5e7eb !important;
}

.mobile-menu.hidden {
  display: none !important;
}

/* Forzar visibilidad cuando no está hidden */
.mobile-menu:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dropdowns mobile */
.mobile-dropdown-toggle {
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem !important;
  border-left: 4px solid transparent !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  transition: all 0.15s ease !important;
}

.mobile-dropdown-toggle:hover {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.mobile-dropdown-content {
  background-color: #f9fafb !important;
}

.mobile-dropdown-content.hidden {
  display: none !important;
}

.mobile-dropdown-content a {
  display: block !important;
  padding: 0.5rem 2rem 0.5rem 2rem !important;
  font-size: 0.875rem !important;
  color: #374151 !important;
  transition: all 0.15s ease !important;
}

.mobile-dropdown-content a:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* Iconos en mobile */
.mobile-dropdown-toggle i,
.mobile-dropdown-content i {
  flex-shrink: 0 !important;
}

/* Responsive - solo mostrar en mobile */
@media (min-width: 640px) {
  .mobile-menu-button,
  .mobile-menu {
    display: none !important;
  }
}

/* Override específico para el menú mobile */
.mobile-menu {
  position: relative !important;
  z-index: 50 !important;
}

/* Override de Tailwind hidden class para mobile menu */
.mobile-menu.hidden {
  display: none !important;
}

.mobile-menu:not(.hidden) {
  display: block !important;
}

/* Asegurar que el contenido sea visible */
.mobile-menu > div {
  display: block !important;
  width: 100% !important;
}