/* Asegurarse de que los enlaces dentro del menú tengan el mismo tamaño y color de fuente */
#user-menu {
  position: absolute;
  right: 0;
  top: 100%; /* Ajuste la posición para que esté un poco más abajo */
  margin-top: 4px; /* Ajuste de espacio entre el usuario y el menú */
  width: 100px; /* Ajusta el tamaño según lo necesario */
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Agrega sombra si es necesario */
  z-index: 50; /* Asegura que el menú esté por encima de otros elementos */
  font-size: 12px;
}

/* Enlaces dentro del menú - color por defecto */
#user-menu a {
  color: #4B5563; /* Color gris oscuro por defecto */
  text-decoration: none; /* Elimina subrayado si es necesario */
}

/* Cambiar el color de texto en modo oscuro */
#user-menu a.dark\:text-gray-200 {
  color: #E5E7EB; /* Color gris claro en modo oscuro */
}

/* Hover en los enlaces */
#user-menu a:hover {
  background-color: #f0f0f0; /* Fondo gris claro */
  color: #161414; /* Color de texto oscuro al hacer hover */
}

/* Ajustar el botón de Cerrar sesión */
#user-menu button {
  background: none;
  border: none;
  color: #4B5563; /* Color de texto para el botón */
  font-size: 12px;
  cursor: pointer;
}

/* Hover en el botón de Cerrar sesión */
#user-menu button:hover {
  background-color: #f0f0f0;
  color: #161414;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  #user-menu {
      width: 100%; /* Menú ocupa todo el ancho en móvil */
      left: 0;
     
  }

  .user-menu-item {
      text-align: left;
  }
}