.participants-avatars-stack {
  display: flex; /* Para alinear los círculos horizontalmente */
  flex-direction: row; /* Por defecto, pero explícito */
  align-items: center; /* Centrar verticalmente los círculos */
}


.avatar-circle {
  width: 45px; /* Tamaño fijo para el círculo */
  height: 45px;
  border-radius: 50%; /* Hacerlo un círculo */
  overflow: hidden; /* Recortar las imágenes que se salgan */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-grey-light); /* Fondo por defecto */
  border: 2px solid white; /* Borde blanco para el efecto de separación */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra sutil para darle profundidad */

  /* Solapamiento: cada círculo excepto el primero se mueve hacia la izquierda */
  &:not(:first-child) {
    margin-left: -15px; /* Ajusta este valor para el grado de solapamiento */
  }
}

/* Estilo para la imagen del avatar */
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1; /* Asegura que la imagen cubra todo el círculo */
  display: block; /* Elimina espacios extra de imagen */
}

/* Estilo para las iniciales si no hay imagen */
.avatar-initials {
  font-size: 1.2rem; /* Tamaño de fuente para las iniciales */
  font-weight: var(--font-weight-medium);
  color: var(--color-grey-dark);
}

/* Estilo específico para el círculo del contador */
.avatar-counter {
  background-color: var(--color-light-grey); /* Fondo distinto para el contador */
  border: 2px solid var(--color-grey); /* Borde para diferenciar */
  cursor: pointer; /* Indica que es clickeable */
  transition: background-color 0.2s ease-out; /* Transición para el hover */

  &:hover {
    background-color: var(--color-grey-lighter); /* Cambio de color al pasar el mouse */
  }
}

/* Estilo para el texto del contador */
.counter-text {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-grey-dark);
}