/* Valores de compatibilidad de las insignias existentes. */
:root {
  --badge-legacy-padding: 3px 10px;
  --badge-legacy-radius: 999px;
  --badge-legacy-font-size: 11.5px;
  --badge-legacy-gap: 6px;
}

/* ------------------ Chips / Badges ------------------------ */
@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 6px 11px;

    border-radius: var(--radius-full);
    border: 1px solid rgba(34, 199, 169, 0.25);

    background: var(--color-primary-soft);
    color: var(--color-primary-hover);

    font-size: 0.84rem;
    font-weight: 700;
  }
}

/* Variantes fuera de capas para conservar su prioridad durante la transición. */

.badge.pink {
  background: #fdf2f8;
  color: #be185d;
  border-color: #fbcfe8;
}

.badge.info {
  background: var(--color-info-soft);
  color: var(--color-info);
  border-color: #bfdbfe;
}

.badge.warn {
  background: var(--color-warning-soft);
  color: #b45309;
  border-color: #fde68a;
}

.badge.danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: #fecdd3;
}