Resumen de lo entregado

src/features/admin/RoleBadge.tsx

@@ -0,0 +1,38 @@
+// Badges de rol con colores por spec: platform_admin naranja, member slate,
+// client_editor azul, client_viewer verde, guest gris/suspendido
+const ROLE_STYLES: Record<string, { label: string; className: string }> = {
+  platform_admin: {
+    label: 'Platform Admin',
+    className: 'bg-orange-100 text-orange-700 border-orange-200',
+  },
+  member: {
+    label: 'Member',
+    className: 'bg-slate-100 text-slate-700 border-slate-200',
+  },
+  client_editor: {
+    label: 'Client Editor',
+    className: 'bg-blue-100 text-blue-700 border-blue-200',
+  },
+  client_viewer: {
+    label: 'Client Viewer',
+    className: 'bg-emerald-100 text-emerald-700 border-emerald-200',
+  },
+  guest: {
+    label: 'Suspendido',
+    className: 'bg-gray-100 text-gray-500 border-gray-200',
+  },
+}
+
+export function RoleBadge({ role }: { role: string }) {
+  const style = ROLE_STYLES[role] ?? {
+    label: role,
+    className: 'bg-gray-100 text-gray-500 border-gray-200',
+  }
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium border ${style.className}`}
+    >
+      {style.label}
+    </span>
+  )
+}