/* Para la versión de escritorio */
#userMenu {
  position: relative;
}

#userSubMenu {
  display: none;  /* El submenú está oculto por defecto */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;  /* Fondo blanco sin bordes ni sombras */
  padding: 10px 0;
  width: auto;  /* Ajustar al contenido */
  border-radius: 10px;  /* Bordes redondeados para un aspecto más suave */
  transition: opacity 0.3s ease, transform 0.3s ease;  /* Transición suave */
  opacity: 0;  /* Inicialmente invisible */
  transform: translateY(-20px); /* Para que el submenú comience un poco por encima */
}

#userMenu:hover #userSubMenu {
  display: block;
  opacity: 1;
  transform: translateY(0); /* El submenú se desplaza hacia abajo suavemente */
}

#userSubMenu a {
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  display: block;
  transition: background-color 0.3s ease;
}

/* Efecto hover en los enlaces del submenú */
#userSubMenu a:hover {
  background-color: #f0f0f0; /* Fondo suave en hover */
}


/* Para la versión móvil */
/* Submenú */
#userMobileSubMenu {
  display: none;  /* Ocultamos el submenú por defecto */
  background-color: white;  /* Fondo blanco */
  border-radius: 8px;  /* Bordes redondeados */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Sombra sutil */
  padding: 10px 0;
  width: 100%;  /* Ajustamos el ancho al 100% del contenedor */
  z-index: 10;
  position: absolute;
  top: 100%;  /* Lo posicionamos justo debajo del menú */
  margin-top: 0px;  /* Eliminamos cualquier margen para acercarlo más */
}

/* Estilos para los enlaces del submenú */
#userMobileSubMenu a {
  text-decoration: none;
  padding: 10px 20px;
  color: #333;
  display: block;
  font-weight: 500;
}

/* Efecto de hover para los enlaces */
#userMobileSubMenu a:hover {
  background-color: #f0f0f0;
}

/* Submenú visible */
#userMobileSubMenu.show {
  display: block;  /* Lo mostramos cuando tenga la clase 'show' */
}