.wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

.dotActive {
  background-color: #22c55e; /* verde */
}

.dotInactive {
  background-color: #ef4444; /* rojo */
}

.ping {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: rgba(34, 197, 94, 0.45);
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  75% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.label {
  font-size: 0.85rem;
  color: #ddd;
}