/* ============================================================
   Fiflouu Design System · Etiquetas, insignias, chips
   ============================================================ */

/* ---------- BADGE (estado / contador / etiqueta) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
  color: var(--fg-2);
  line-height: 1.35;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.badge--sm { font-size: 11px; padding: 2px 8px; }
.badge--lg { font-size: var(--fs-sm); padding: 5px 12px; }

/* punto delante (estado en vivo) */
.badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: currentColor;
  flex-shrink: 0;
}
.badge--dot-pulse::before { animation: badge-pulse 1.6s var(--ease-standard) infinite; }
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

/* variantes semánticas */
.badge--success { background: var(--success-50); color: var(--success-700); }
.badge--error { background: var(--error-50); color: var(--error-700); }
.badge--warning { background: var(--warning-50); color: var(--warning-700); }
.badge--info { background: var(--info-50); color: var(--info-700); }
.badge--brand { background: var(--purple-50); color: var(--purple-700); }
.badge--accent { background: var(--green-50); color: var(--green-700); }
.badge--neutral { background: var(--gray-100); color: var(--fg-2); }

/* variantes sólidas (énfasis alto, usar con moderación) */
.badge--solid-brand { background: var(--purple-600); color: var(--fg-inverse); }
.badge--solid-accent { background: var(--green-500); color: var(--fg-inverse); }
.badge--solid-error { background: var(--error-500); color: var(--fg-inverse); }
.badge--solid-warning { background: var(--warning-500); color: #3B2305; }

/* con borde (estilo outline) */
.badge--outline {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--fg-2);
}
.badge--outline.badge--brand { border-color: var(--purple-300); color: var(--purple-700); }
.badge--outline.badge--success { border-color: rgba(3,170,111,0.4); color: var(--success-700); }

/* ---------- CHIP (filtro / selección removible) ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
  font-family: inherit;
  line-height: 1;
}
.chip:hover { background: var(--bg-sunken); border-color: var(--border-strong); }
.chip.is-active {
  background: var(--purple-50);
  border-color: var(--purple-500);
  color: var(--purple-700);
  font-weight: var(--fw-semibold);
}
.chip.is-active:hover { background: var(--purple-100); }
.chip svg { width: 14px; height: 14px; }
.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  cursor: pointer;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  margin-right: -4px;
  border: none;
  background: none;
  padding: 0;
}
.chip__remove:hover { color: var(--fg-1); background: var(--gray-200); }
.chip__remove svg { width: 12px; height: 12px; stroke-width: 2.5; }

/* ---------- BADGE CONTADOR (notificaciones) ---------- */

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--error-500);
  color: var(--fg-inverse);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.count-badge--sm { min-width: 14px; height: 14px; font-size: 10px; padding: 0 4px; }
.count-badge--dot { min-width: 8px; height: 8px; padding: 0; border: 2px solid var(--bg-surface); }

/* posicionado sobre un elemento */
.has-badge { position: relative; display: inline-flex; }
.has-badge .count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* ---------- AVATAR ---------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: var(--purple-100);
  color: var(--purple-700);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--xs { width: 20px; height: 20px; font-size: 10px; }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--lg { width: 44px; height: 44px; font-size: var(--fs-md); }
.avatar--xl { width: 56px; height: 56px; font-size: var(--fs-lg); }

/* colores alternativos para "generar" avatares a partir de iniciales */
.avatar--green { background: var(--green-50); color: var(--green-700); }
.avatar--warning { background: var(--warning-50); color: var(--warning-700); }
.avatar--info { background: var(--info-50); color: var(--info-700); }
.avatar--neutral { background: var(--gray-200); color: var(--fg-1); }

/* grupo apilado */
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { border: 2px solid var(--bg-surface); margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }