/*
 * GALAPPXY — Badges & Avatars
 */

/* ─── BADGE ──────────────────────────────────────────────── */
.gx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--gx-sp-2);
  font-size: var(--gx-text-xs);
  font-weight: var(--gx-weight-semibold);
  line-height: 1;
  border-radius: var(--gx-radius-full);
  white-space: nowrap;
}

.gx-badge--primary   { background: rgba(var(--gx-primary-rgb), 0.1); color: var(--gx-primary); }
.gx-badge--secondary { background: rgba(var(--gx-secondary-rgb), 0.1); color: var(--gx-secondary); }
.gx-badge--success   { background: var(--gx-success-light); color: var(--gx-success); }
.gx-badge--danger    { background: var(--gx-danger-light); color: var(--gx-danger); }
.gx-badge--warning   { background: var(--gx-warning-light); color: var(--gx-warning); }
.gx-badge--info      { background: var(--gx-info-light); color: var(--gx-info); }
.gx-badge--neutral   { background: var(--gx-bg-surface-alt); color: var(--gx-text-secondary); }

/* Solid variants */
.gx-badge--solid { color: #FFFFFF; }
.gx-badge--solid.gx-badge--primary { background: var(--gx-primary); }
.gx-badge--solid.gx-badge--success { background: var(--gx-success); }
.gx-badge--solid.gx-badge--danger  { background: var(--gx-danger); }

/* Dot badge (notification indicator) */
.gx-dot {
  display: inline-block;
  width: var(--gx-badge-size);
  height: var(--gx-badge-size);
  border-radius: 50%;
  background: var(--gx-danger);
  flex-shrink: 0;
}

.gx-dot--primary { background: var(--gx-primary); }
.gx-dot--success { background: var(--gx-success); }
.gx-dot--warning { background: var(--gx-warning); }

/* Dot con animación de pulsación */
.gx-dot--pulse {
  position: relative;
}

.gx-dot--pulse::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
  animation: gx-pulse 2s ease-out infinite;
}

@keyframes gx-pulse {
  0% { opacity: 0.6; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* Count badge (número) */
.gx-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: var(--gx-weight-bold);
  color: #FFFFFF;
  background: var(--gx-danger);
  border-radius: var(--gx-radius-full);
  line-height: 1;
}

/* Posicionar badge sobre un ícono */
.gx-badge-wrapper {
  position: relative;
  display: inline-flex;
}

.gx-badge-wrapper .gx-dot,
.gx-badge-wrapper .gx-count-badge {
  position: absolute;
  top: -2px;
  right: -2px;
}


/* ─── AVATAR ─────────────────────────────────────────────── */
.gx-avatar {
  width: var(--gx-avatar-size);
  height: var(--gx-avatar-size);
  border-radius: var(--gx-radius-full);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gx-bg-surface-alt);
  color: var(--gx-text-muted);
  font-weight: var(--gx-weight-semibold);
  font-size: var(--gx-text-sm);
}

.gx-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-avatar--sm { width: var(--gx-avatar-size-sm); height: var(--gx-avatar-size-sm); font-size: var(--gx-text-xs); }
.gx-avatar--lg { width: var(--gx-avatar-size-lg); height: var(--gx-avatar-size-lg); font-size: var(--gx-text-md); }
.gx-avatar--xl { width: var(--gx-avatar-size-xl); height: var(--gx-avatar-size-xl); font-size: var(--gx-text-xl); }

/* Avatar con status (online indicator) */
.gx-avatar--status::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gx-success);
  border: 2px solid var(--gx-bg-surface);
}

.gx-avatar--offline::after { background: var(--gx-text-muted); }
.gx-avatar--busy::after { background: var(--gx-danger); }

/* Avatar group */
.gx-avatar-group {
  display: flex;
}
.gx-avatar-group .gx-avatar {
  border: 2px solid var(--gx-bg-surface);
  margin-left: -8px;
}
.gx-avatar-group .gx-avatar:first-child { margin-left: 0; }