/* ===== BADGES — ETAPA 13 ===== */

.badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-family: var(--font-body);
  border: 1px solid;
  transition: all 0.2s ease;
  cursor: default;
}

.badge-chip-active {
  background: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.25);
  color: var(--color-text-primary);
}

.badge-chip-locked {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--color-border-subtle);
  color: var(--color-text-muted);
  opacity: 0.5;
  filter: grayscale(1);
}

.badge-chip-icon { font-size: 1rem; line-height: 1; }
.badge-chip-title { font-weight: 500; }

/* Unlock animation */
@keyframes badgeUnlock {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1);   opacity: 1; }
}

.badge-chip-active {
  animation: badgeUnlock 0.4s ease both;
}