/* Estilo para el contenedor del perfil */
/* Perfil de usuario */
.user-profile {
  position: fixed;
  top: 340px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  padding: 17px 20px 17px 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid #00000015;
  width: 240px;
  height: 60px;
  user-select: none;
  flex-direction: row;
}

/* Estilo para la foto de perfil */
.profile-photo {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  border: 2px solid #00000015;
  user-select: none;
}
/* Contenedor de la foto de perfil */
.profile-photo-container {
  position: relative;
}
/* Información del perfil (nombre y estado) */
.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 8px;
}
/* Sticker desconectado */
.sticker {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 17px;
  height: 17px;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  margin-bottom: 7px;
  margin-right: 19px;
}
.profile-photo img {
  width: 50px;
  height: 50px;
}

/* Estilo para el nombre de usuario */
.username {
  font-size: 1.5rem;
  color: #ffffff;
  margin: 0;
  margin-bottom: 22px;
}

/* Contenedor de medallas */
.medals {
  display: flex;
  align-items: center;
}

/* Estilo individual para cada medalla */
.medal {
  width: 17px; /* Tamaño de las medallas */
  height: 17px;
  object-fit: cover;
  border-radius: 50%; /* Forma circular */
  user-select: none;
  pointer-events: none; /* Desactiva interacciones */
  -webkit-user-drag: none; /* Evita el arrastre */
  margin-bottom: 16px;
}