/* ==========================================================================
   BADGE — pastillas de estado (en línea, buscando, conectado...)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--color-bg-elevated-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.badge--online {
  color: var(--color-online);
  border-color: var(--color-online);
}

.badge--searching {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.badge--searching .badge__dot {
  animation: badge-pulse 1.1s ease-in-out infinite;
}

.badge--connected {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.badge--danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

@keyframes badge-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }
}