/*
  DDSYS — Componente: Badge
  Dos variantes, reutilizables en cualquier sección futura.
*/

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
}

/* Certificación / logro — primer uso del acento ámbar en el
   recorrido del sitio, a propósito reservado para este tipo de
   momento (ver Design System 1.3). */
.badge--accent {
  background-color: var(--color-accent-bg);
  color: var(--color-accent-text);
}

.badge--neutral {
  background-color: var(--blue-100);
  color: var(--blue-700);
}