/*
 * BADGE (etiqueta de status)
 * Pequena etiqueta com fundo suave e texto forte da cor. Comunica
 * status (ativa, pago, atrasado...) de relance. Variantes semânticas:
 * success (verde), warning (âmbar), danger (vermelho), neutral (cinza).
 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

/* Ponto de status (mini indicador) na cor do próprio badge. */
.badge__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

.badge--success {
  color: var(--color-success);
  background-color: var(--color-success-soft);
}

.badge--warning {
  color: var(--color-warning);
  background-color: var(--color-warning-soft);
}

.badge--danger {
  color: var(--color-danger);
  background-color: var(--color-status-danger-soft);
}

.badge--neutral {
  color: var(--color-status-neutral);
  background-color: var(--color-status-neutral-soft);
}

/* Informativo (azul de ação): ex.: imóvel disponível. */
.badge--info {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
}