/* Spoter Design System — Component classes (piloto Conversaciones)
   Traducidos desde components/{forms/IconButton,data-display/Tag,data-display/Badge}.jsx.
   Solo referencian tokens de tokens.css (o, donde el propio .jsx usa paleta cruda
   para el hover de "primary", el token de paleta correspondiente). */

/* ── IconButton ───────────────────────────────────────── */
.sp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.sp-icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.sp-icon-btn.sp-icon-btn-round {
  border-radius: 50%;
}

.sp-icon-btn-sm {
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.sp-icon-btn-lg {
  width: 44px;
  height: 44px;
}

.sp-icon-btn-base {
  background: transparent;
  color: var(--text-secondary);
}

.sp-icon-btn-base:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.sp-icon-btn-primary {
  background: var(--indigo-900);
  color: #fff;
}

.sp-icon-btn-primary:hover:not(:disabled) {
  background: var(--indigo-800);
  color: #fff;
}

.sp-icon-btn-pink {
  background: var(--pink-500);
  color: #fff;
}

.sp-icon-btn-pink:hover:not(:disabled) {
  background: var(--pink-600);
  color: #fff;
}

.sp-icon-btn-white {
  background: #fff;
  color: var(--grey-700);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.sp-icon-btn-white:hover:not(:disabled) {
  background: var(--grey-25);
  color: var(--grey-900);
  box-shadow: none;
}

/* ── Tag ──────────────────────────────────────────────── */
.sp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: 500;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.sp-tag-indigo {
  background: var(--indigo-100);
  color: var(--indigo-900);
}

.sp-tag-pink {
  background: var(--pink-50);
  color: var(--pink-700);
}

.sp-tag-mint {
  background: #dcf7ee;
  color: #0f7a5c;
}

.sp-tag-grey {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.sp-tag-amber {
  background: var(--status-warning-bg);
  color: #8a6d00;
}

/* ── Badge ────────────────────────────────────────────── */
.sp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius-pill);
}

.sp-badge-neutral {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.sp-badge-primary {
  background: var(--indigo-900);
  color: #fff;
}

.sp-badge-pink {
  background: var(--pink-500);
  color: #fff;
}

.sp-badge-success {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.sp-badge-danger {
  background: var(--status-danger);
  color: #fff;
}

.sp-badge-warning {
  background: var(--status-warning-bg);
  color: #8a6d00;
}

.sp-badge-info {
  background: var(--status-info-bg);
  color: var(--status-info);
}