/* ============================================================
   ÁTOMO — Badges / Tags
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-brand   { background-color: var(--color-primary-soft);  color: var(--color-primary-active); border-color: rgba(62, 95, 230, 0.25); }
.badge-success { background-color: var(--color-success-soft);  color: #1F7A58;                     border-color: rgba(63, 182, 139, 0.25); }
.badge-warning { background-color: var(--color-warning-soft);  color: #8A5A00;                     border-color: rgba(230, 162, 60, 0.25); }
.badge-error   { background-color: var(--color-error-soft);    color: var(--color-error);          border-color: rgba(217, 83, 79, 0.25); }
.badge-accent  { background-color: var(--color-accent-soft);   color: var(--color-accent-strong);  border-color: rgba(242, 167, 160, 0.30); }
.badge-neutral { background-color: var(--color-surface);       color: var(--color-text-muted);     border-color: var(--color-border); }
.badge-info    { background-color: var(--color-info-soft);     color: #2B6F92;                     border-color: rgba(95, 168, 211, 0.25); }

[data-theme="dark"] .badge-success { color: var(--color-success); }
[data-theme="dark"] .badge-warning { color: var(--color-warning); }
[data-theme="dark"] .badge-info    { color: var(--color-info); }

/* ── Tamaños ── */
.badge-sm { font-size: 0.65rem; padding: 0 var(--space-1-5); }

/* ── Dot indicator ── */
.badge.badge-dot::before {
  display: block;
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}