@decido/shell 1.0.0

package/src/components/playground/demos/KiaPBIFunnelNode.tsx

@@ -0,0 +1,184 @@
+import React, { useState } from 'react';
+import { BaseNode } from '@decido/macia-core';
+import {
+    Filter, TrendingUp, Users, Target, CalendarCheck,
+    Car, Eye, FileText, BarChart3, ChevronDown
+} from 'lucide-react';
+
+/* ═══════════════════════════════════════════════════════════════
+   KIA PBI FUNNEL NODE — Mirror de PowerBI "KIA Funnel" 
+   Datos REALES Grecco Motors · Febrero 2026 · Cúcuta
+   ═══════════════════════════════════════════════════════════════ */
+
+const FUNNEL_STAGES = [
+    { stage: 'Oportunidades', total: 437, digital: 321, walkin: 116, target: null, compliance: null, color: '#3b82f6' },
+    { stage: 'Citas', total: 26, digital: 32, walkin: null, target: 40, compliance: 65, color: '#8b5cf6' },
+    { stage: 'Show Up', total: 46, digital: 16, walkin: null, target: 50, compliance: 93, color: '#a855f7' },
+    { stage: 'Tráfico', total: 35, digital: null, walkin: null, target: 60, compliance: 59, color: '#f59e0b' },
+    { stage: 'Cotizaciones', total: 71, digital: 6, walkin: null, target: 80, compliance: 89, color: '#22c55e' },
+    { stage: 'Test Drive', total: 52, digital: 9, walkin: null, target: 40, compliance: 129, color: '#06b6d4' },
+    { stage: 'Conversión', total: 25, digital: null, walkin: null, target: 15, compliance: 168, color: '#10b981' },
+];
+
+const RESULTS = [
+    { label: 'Pedidos', value: 53, icon: '📋' },
+    { label: 'Facturación', value: 15, icon: '💰' },
+    { label: 'RUNT', value: 39, icon: '🚗' },
+    { label: 'Entregas', value: 30, icon: '🤝' },
+];
+
+const PRODUCTS = [
+    { model: 'Picanto', opps: 212, pct: 48.5, color: '#ef4444' },
+    { model: 'K3 Sedan', opps: 69, pct: 15.8, color: '#f59e0b' },
+    { model: 'K3 Cross', opps: 41, pct: 9.4, color: '#22c55e' },
+    { model: 'Soluto', opps: 35, pct: 8.0, color: '#3b82f6' },
+    { model: 'Stonic', opps: 17, pct: 3.9, color: '#8b5cf6' },
+    { model: 'Sportage', opps: 12, pct: 2.7, color: '#06b6d4' },
+];
+
+const LEAD_SOURCES = [
+    { source: 'Showroom', unique: 226, sales: 82, conv: 36.3 },
+    { source: 'BTL', unique: 19, sales: 2, conv: 10.5 },
+    { source: 'Redes Sociales', unique: 489, sales: 3, conv: 0.6 },
+];
+
+const CONVERSION_BY = [
+    { label: 'Walk-in', value: 31.0, sales: 84, color: '#22c55e' },
+    { label: 'Digital', value: 7.7, sales: 8, color: '#3b82f6' },
+];
+
+export const KiaPBIFunnelNode = (props: any) => {
+    const [tab, setTab] = useState<'funnel' | 'products' | 'sources'>('funnel');
+
+    return (
+        <BaseNode {...props} title="KIA Funnel — PBI" width={520} height={640}>
+            <div className="flex flex-col h-full bg-[#1a1a2e] text-white overflow-hidden">
+
+                {/* Header — PowerBI style */}
+                <div className="flex items-center gap-3 p-3 bg-[#16213e] border-b border-blue-900/40">
+                    <div className="w-9 h-9 rounded bg-blue-600/20 flex items-center justify-center">
+                        <Filter size={16} className="text-blue-400" />
+                    </div>
+                    <div className="flex-1">
+                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
+                            KPI FUNNEL CRM
+                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded">FEB 2026</span>
+                            <span className="text-[8px] px-1.5 py-0.5 bg-blue-500/20 text-blue-400 rounded">POWER BI</span>
+                        </div>
+                        <div className="text-[10px] text-slate-400">Grecco Motors · Cúcuta / Bucaramanga · Cumplimiento: 100%</div>
+                    </div>
+                </div>
+
+                {/* Tabs */}
+                <div className="flex gap-1 p-2 bg-[#16213e]/50 border-b border-blue-900/30">
+                    {([
+                        { key: 'funnel' as const, label: '📊 Funnel' },
+                        { key: 'products' as const, label: '🚗 Producto' },
+                        { key: 'sources' as const, label: '📈 Origen' },
+                    ]).map(t => (
+                        <button key={t.key} onClick={() => setTab(t.key)}
+                            className={`flex-1 py-1.5 rounded text-[9px] font-bold transition-all ${tab === t.key ? 'bg-blue-600/30 text-blue-300 border border-blue-500/30' : 'text-slate-500'
+                                }`}>
+                            {t.label}
+                        </button>
+                    ))}
+                </div>
+
+                {/* Results row */}
+                <div className="flex gap-1 px-3 py-2 border-b border-blue-900/20">
+                    {RESULTS.map(r => (
+                        <div key={r.label} className="flex-1 text-center bg-[#16213e]/50 rounded p-1.5">
+                            <div className="text-[10px]">{r.icon}</div>
+                            <div className="text-sm font-bold text-white">{r.value}</div>
+                            <div className="text-[7px] text-slate-500">{r.label}</div>
+                        </div>
+                    ))}
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
+
+                    {tab === 'funnel' && FUNNEL_STAGES.map(s => (
+                        <div key={s.stage} className="bg-[#16213e]/40 rounded-lg p-2.5 border border-blue-900/20">
+                            <div className="flex items-center justify-between mb-1">
+                                <span className="text-[10px] font-bold">{s.stage}</span>
+                                <div className="flex items-center gap-2">
+                                    <span className="text-sm font-black" style={{ color: s.color }}>{s.total}%</span>
+                                    {s.compliance !== null && (
+                                        <span className={`text-[8px] px-1.5 py-0.5 rounded font-bold ${s.compliance >= 100 ? 'bg-green-500/20 text-green-400' :
+                                                s.compliance >= 80 ? 'bg-yellow-500/20 text-yellow-400' : 'bg-red-500/20 text-red-400'
+                                            }`}>{s.compliance}%</span>
+                                    )}
+                                </div>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <div className="flex-1 h-2 bg-[#0a0f1a] rounded-full">
+                                    <div className="h-full rounded-full transition-all" style={{ width: `${Math.min(100, s.total)}%`, background: s.color }} />
+                                </div>
+                                {s.target && <span className="text-[8px] text-slate-500">Meta: {s.target}%</span>}
+                            </div>
+                            {s.stage === 'Oportunidades' && (
+                                <div className="flex gap-2 mt-1 text-[8px]">
+                                    <span className="text-blue-400">Digital: {s.digital}</span>
+                                    <span className="text-green-400">Walk-in: {s.walkin}</span>
+                                </div>
+                            )}
+                        </div>
+                    ))}
+
+                    {tab === 'products' && (
+                        <>
+                            <div className="flex gap-1 mb-2">
+                                {CONVERSION_BY.map(c => (
+                                    <div key={c.label} className="flex-1 bg-[#16213e]/50 rounded p-2 text-center border border-blue-900/20">
+                                        <div className="text-lg font-black" style={{ color: c.color }}>{c.value}%</div>
+                                        <div className="text-[9px] text-slate-400">{c.label} · {c.sales} ventas</div>
+                                    </div>
+                                ))}
+                            </div>
+                            {PRODUCTS.map(p => (
+                                <div key={p.model} className="bg-[#16213e]/40 rounded-lg p-2 border border-blue-900/20"
+                                    style={{ borderLeftWidth: '3px', borderLeftColor: p.color }}>
+                                    <div className="flex items-center justify-between">
+                                        <span className="text-[10px] font-bold">{p.model}</span>
+                                        <span className="text-[10px] font-bold" style={{ color: p.color }}>{p.opps} opps</span>
+                                    </div>
+                                    <div className="flex items-center gap-2 mt-0.5">
+                                        <div className="flex-1 h-1.5 bg-[#0a0f1a] rounded-full">
+                                            <div className="h-full rounded-full" style={{ width: `${p.pct * 2}%`, background: p.color }} />
+                                        </div>
+                                        <span className="text-[8px] text-slate-500">{p.pct}%</span>
+                                    </div>
+                                </div>
+                            ))}
+                        </>
+                    )}
+
+                    {tab === 'sources' && (
+                        <>
+                            {LEAD_SOURCES.map(s => (
+                                <div key={s.source} className="bg-[#16213e]/40 rounded-lg p-3 border border-blue-900/20">
+                                    <div className="flex items-center justify-between mb-1">
+                                        <span className="text-[11px] font-bold">{s.source}</span>
+                                        <span className={`text-sm font-black ${s.conv > 10 ? 'text-green-400' : s.conv > 5 ? 'text-yellow-400' : 'text-red-400'}`}>{s.conv}%</span>
+                                    </div>
+                                    <div className="flex gap-3 text-[9px]">
+                                        <span className="text-slate-400">Únicos: <span className="font-bold text-white">{s.unique}</span></span>
+                                        <span className="text-slate-400">Ventas: <span className="font-bold text-green-400">{s.sales}</span></span>
+                                    </div>
+                                    <div className="flex items-center gap-2 mt-1">
+                                        <div className="flex-1 h-1.5 bg-[#0a0f1a] rounded-full">
+                                            <div className="h-full rounded-full bg-blue-500" style={{ width: `${s.conv}%` }} />
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                            <div className="bg-red-500/10 rounded-lg p-2.5 border border-red-500/20 text-[9px] text-red-400">
+                                ⚠️ Redes Sociales: 489 leads pero solo 0.6% conversión. Requiere estrategia de calificación profunda.
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        </BaseNode>
+    );
+};

package/src/components/playground/demos/KiaPBIOwnershipNode.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { BaseNode } from '@decido/macia-core';
+import {
+    LayoutDashboard, Users, DollarSign, Wrench, TrendingUp,
+    AlertTriangle, Shield, BarChart3, ChevronRight
+} from 'lucide-react';
+
+/* ═══════════════════════════════════════════════════════════════
+   KIA PBI OWNERSHIP NODE — Mirror de PowerBI "KPI Financiero"
+   Ownership Management · 16 Dashboards · Grecco Motors
+   ═══════════════════════════════════════════════════════════════ */
+
+const VISION360 = [
+    { kpi: 'ONE PAGE REPORT', status: 'active', color: '#22c55e' },
+    { kpi: 'RESUMEN INDICADORES', status: 'active', color: '#22c55e' },
+];
+
+const CLIENTE = [
+    { kpi: 'CLIENTE RESUMEN', desc: 'Overview satisfacción & retención', status: 'active', value: '95.3 NPS', color: '#3b82f6' },
+    { kpi: 'CAUSA RAÍZ', desc: 'Análisis root-cause insatisfacción', status: 'active', value: '3 issues', color: '#3b82f6' },
+    { kpi: 'IVUO', desc: 'Índice Venta Unidades Ocasión', status: 'active', value: '12%', color: '#3b82f6' },
+];
+
+const FINANCIERO = [
+    { kpi: 'FINANCIERO RESUMEN', desc: 'P&L, márgenes, ingresos', status: 'active', value: '$2.4B', color: '#f59e0b' },
+    { kpi: 'RETENCIÓN', desc: 'Clientes que regresan a servicio', status: 'active', value: '78%', color: '#f59e0b' },
+    { kpi: 'PRODUCTIVIDAD', desc: 'Horas facturadas / disponibles', status: 'active', value: '92%', color: '#f59e0b' },
+];
+
+const OPERATIVO = [
+    { kpi: 'CAPACIDAD INSTALADA', desc: 'Bahías activas vs total', status: 'active', value: '85%', color: '#ef4444' },
+    { kpi: 'VARADOS', desc: 'Vehículos inmovilizados', status: 'warning', value: '4 uds', color: '#ef4444' },
+    { kpi: 'GARANTÍAS', desc: 'Reclamaciones en proceso', status: 'active', value: '12 activas', color: '#ef4444' },
+    { kpi: 'CAMPAÑAS', desc: 'Recalls & campañas activas', status: 'active', value: '2 activas', color: '#ef4444' },
+    { kpi: 'RECUPERACIÓN GARANTÍAS', desc: 'Monto recuperado vs reclamado', status: 'active', value: '94%', color: '#ef4444' },
+    { kpi: 'PRESUPUESTO GARANTÍAS', desc: 'Budget vs ejecutado', status: 'active', value: '88%', color: '#ef4444' },
+];
+
+const SECTIONS = [
+    { title: '🔭 Visión 360', items: VISION360, colorLabel: 'text-green-400' },
+    { title: '👤 Cliente', items: CLIENTE, colorLabel: 'text-blue-400' },
+    { title: '💰 Financiero', items: FINANCIERO, colorLabel: 'text-yellow-400' },
+    { title: '⚙️ Operativo', items: OPERATIVO, colorLabel: 'text-red-400' },
+];
+
+export const KiaPBIOwnershipNode = (props: any) => {
+    const [expanded, setExpanded] = useState<string | null>('⚙️ Operativo');
+
+    return (
+        <BaseNode {...props} title="Ownership Mgmt — PBI" width={500} height={640}>
+            <div className="flex flex-col h-full bg-[#1a1a2e] text-white overflow-hidden">
+
+                {/* Header */}
+                <div className="flex items-center gap-3 p-3 bg-[#16213e] border-b border-slate-700">
+                    <div className="w-9 h-9 rounded bg-slate-600/20 flex items-center justify-center">
+                        <LayoutDashboard size={16} className="text-slate-300" />
+                    </div>
+                    <div className="flex-1">
+                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
+                            OWNERSHIP MANAGEMENT
+                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded">16 DASHBOARDS</span>
+                            <span className="text-[8px] px-1.5 py-0.5 bg-slate-500/20 text-slate-300 rounded">POWER BI</span>
+                        </div>
+                        <div className="text-[10px] text-slate-400">Grecco Motors · KIA EV3 GT-line · "Movement that inspires"</div>
+                    </div>
+                </div>
+
+                {/* Summary */}
+                <div className="flex gap-1 px-3 py-2 border-b border-slate-800">
+                    {[
+                        { label: 'Visión 360', val: '2', color: 'text-green-400', icon: '🔭' },
+                        { label: 'Cliente', val: '3', color: 'text-blue-400', icon: '👤' },
+                        { label: 'Financiero', val: '3', color: 'text-yellow-400', icon: '💰' },
+                        { label: 'Operativo', val: '6', color: 'text-red-400', icon: '⚙️' },
+                    ].map(s => (
+                        <div key={s.label} className="flex-1 text-center bg-[#16213e]/50 rounded p-1.5 border border-slate-800/50">
+                            <div className="text-[10px]">{s.icon}</div>
+                            <div className={`text-sm font-bold ${s.color}`}>{s.val}</div>
+                            <div className="text-[7px] text-slate-500">{s.label}</div>
+                        </div>
+                    ))}
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-3 space-y-2">
+                    {SECTIONS.map(section => (
+                        <div key={section.title}>
+                            <button onClick={() => setExpanded(expanded === section.title ? null : section.title)}
+                                className="w-full flex items-center justify-between bg-[#16213e]/60 rounded p-2 border border-slate-800/30 mb-1">
+                                <span className={`text-[10px] font-bold ${section.colorLabel}`}>{section.title}</span>
+                                <div className="flex items-center gap-1">
+                                    <span className="text-[8px] text-slate-500">{section.items.length} tabs</span>
+                                    <ChevronRight size={10} className={`text-slate-500 transition-transform ${expanded === section.title ? 'rotate-90' : ''}`} />
+                                </div>
+                            </button>
+                            {expanded === section.title && section.items.map((item: any) => (
+                                <div key={item.kpi} className="bg-[#16213e]/30 rounded p-2 ml-2 mb-1 border border-slate-800/20 flex items-center gap-2">
+                                    <div className={`w-1.5 h-8 rounded-full ${item.status === 'warning' ? 'bg-yellow-500 animate-pulse' : 'bg-green-500'}`} />
+                                    <div className="flex-1">
+                                        <div className="text-[9px] font-bold">{item.kpi}</div>
+                                        {item.desc && <div className="text-[8px] text-slate-500">{item.desc}</div>}
+                                    </div>
+                                    {item.value && (
+                                        <span className="text-[9px] font-bold" style={{ color: item.color }}>{item.value}</span>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </BaseNode>
+    );
+};

package/src/components/playground/demos/KiaPBIPartnerNode.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { BaseNode } from '@decido/macia-core';
+import {
+    Award, Star, TrendingUp, Users, Wrench,
+    Megaphone, ShoppingBag, Monitor, BarChart3
+} from 'lucide-react';
+
+/* ═══════════════════════════════════════════════════════════════
+   KIA PBI PARTNER NODE — Mirror de PowerBI "Informe Partner Program"
+   Datos REALES Grecco Motors · Enero 2026 · Clasificación S
+   ═══════════════════════════════════════════════════════════════ */
+
+const AREAS = [
+    {
+        name: 'Customer Experience', score: 100.00, weight: 15, icon: '😊', color: '#22c55e',
+        items: ['NPS Ventas: 95.3%', 'NPS Posventa: 99.4%', 'Mystery Shopper: ✓', 'Índice Satisfacción: ✓']
+    },
+    {
+        name: 'Transf. Digital', score: 100.00, weight: 10, icon: '💻', color: '#3b82f6',
+        items: ['ERP Integración: 100%', 'Activación: 100%', 'Uso herramientas: ✓']
+    },
+    {
+        name: 'Servicio', score: 100.63, weight: 20, icon: '🔧', color: '#8b5cf6',
+        items: ['Gestión Financiera: ✓', 'Proyectos: ✓', 'Garantías: ✓', 'Soporte Técnico: 83.3%', 'Campañas: 87.5%']
+    },
+    {
+        name: 'Business Mgmt', score: 99.96, weight: 15, icon: '📊', color: '#06b6d4',
+        items: ['Reportes financieros: ✓', 'Gestión gastos: ✓', 'Márgenes brutos: ✓']
+    },
+    {
+        name: 'Marketing', score: 99.29, weight: 10, icon: '📢', color: '#f59e0b',
+        items: ['Brand Alignment: ✓', 'Lead Quality: ✓', 'Tiempo respuesta: 96.5%']
+    },
+    {
+        name: 'Comercial', score: 95.01, weight: 20, icon: '🤝', color: '#ef4444',
+        items: ['RUNT Target: ✓', 'Wholesale: ✓', 'Conversión: 75% ⚠️', 'Cotización: 50% ⚠️']
+    },
+    {
+        name: 'Repuestos', score: 91.76, weight: 10, icon: '📦', color: '#f97316',
+        items: ['Compras importador: ✓', 'Accesorios/Vehículo: 69.2% ⚠️']
+    },
+];
+
+const HISTORY = [
+    { month: 'Nov 2025', score: 98.2 },
+    { month: 'Dic 2025', score: 99.4 },
+    { month: 'Ene 2026', score: 97.43 },
+];
+
+export const KiaPBIPartnerNode = (props: any) => {
+    const [tab, setTab] = useState<'overview' | 'detail'>('overview');
+    const avgScore = 97.43;
+
+    return (
+        <BaseNode {...props} title="Partner Program — PBI" width={520} height={640}>
+            <div className="flex flex-col h-full bg-[#1a1a2e] text-white overflow-hidden">
+
+                {/* Header */}
+                <div className="flex items-center gap-3 p-3 bg-[#16213e] border-b border-yellow-900/40">
+                    <div className="w-9 h-9 rounded bg-yellow-600/20 flex items-center justify-center">
+                        <Award size={16} className="text-yellow-400" />
+                    </div>
+                    <div className="flex-1">
+                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
+                            PARTNER PROGRAM
+                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded font-black">PLATINUM</span>
+                            <span className="text-[8px] px-1.5 py-0.5 bg-indigo-500/20 text-indigo-400 rounded">POWER BI</span>
+                        </div>
+                        <div className="text-[10px] text-slate-400">Grecco Motors · Ene 2026 · Promedio 3M: 98.56%</div>
+                    </div>
+                </div>
+
+                {/* Score Header */}
+                <div className="flex items-center gap-3 px-3 py-2 border-b border-yellow-900/20">
+                    <div className="flex-1 text-center bg-[#16213e]/50 rounded-lg p-2 border border-yellow-900/20">
+                        <div className="text-3xl font-black text-yellow-400">S</div>
+                        <div className="text-[8px] text-slate-500">Clasificación</div>
+                    </div>
+                    <div className="flex-1 text-center bg-[#16213e]/50 rounded-lg p-2 border border-yellow-900/20">
+                        <div className="text-xl font-black text-green-400">{avgScore}%</div>
+                        <div className="text-[8px] text-slate-500">Resultado Enero</div>
+                    </div>
+                    <div className="flex-1 text-center bg-[#16213e]/50 rounded-lg p-2 border border-yellow-900/20">
+                        <div className="text-xl font-black text-blue-400">98.56%</div>
+                        <div className="text-[8px] text-slate-500">Promedio 3M</div>
+                    </div>
+                </div>
+
+                {/* Tabs */}
+                <div className="flex gap-1 p-2 bg-[#16213e]/30 border-b border-yellow-900/20">
+                    {([
+                        { key: 'overview' as const, label: '📊 Áreas' },
+                        { key: 'detail' as const, label: '📋 Detalle' },
+                    ]).map(t => (
+                        <button key={t.key} onClick={() => setTab(t.key)}
+                            className={`flex-1 py-1.5 rounded text-[9px] font-bold transition-all ${tab === t.key ? 'bg-yellow-600/20 text-yellow-300 border border-yellow-500/30' : 'text-slate-500'
+                                }`}>
+                            {t.label}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
+
+                    {tab === 'overview' && AREAS.map(a => (
+                        <div key={a.name} className="bg-[#16213e]/40 rounded-lg p-2 border border-yellow-900/10"
+                            style={{ borderLeftWidth: '3px', borderLeftColor: a.color }}>
+                            <div className="flex items-center justify-between mb-1">
+                                <span className="text-[10px] font-bold">{a.icon} {a.name}</span>
+                                <div className="flex items-center gap-2">
+                                    <span className="text-[8px] text-slate-500">Peso: {a.weight}%</span>
+                                    <span className={`text-[11px] font-black ${a.score >= 100 ? 'text-green-400' : a.score >= 95 ? 'text-yellow-400' : 'text-red-400'}`}>
+                                        {a.score.toFixed(2)}%
+                                    </span>
+                                </div>
+                            </div>
+                            <div className="h-1.5 bg-[#0a0f1a] rounded-full">
+                                <div className="h-full rounded-full" style={{ width: `${Math.min(100, a.score)}%`, background: a.color }} />
+                            </div>
+                        </div>
+                    ))}
+
+                    {tab === 'detail' && AREAS.map(a => (
+                        <div key={a.name} className="bg-[#16213e]/40 rounded-lg p-2.5 border border-yellow-900/10">
+                            <div className="flex items-center justify-between mb-1.5">
+                                <span className="text-[10px] font-bold">{a.icon} {a.name}</span>
+                                <span className="text-[10px] font-black" style={{ color: a.color }}>{a.score.toFixed(2)}%</span>
+                            </div>
+                            <div className="space-y-0.5">
+                                {a.items.map(item => (
+                                    <div key={item} className={`text-[8px] flex items-center gap-1 ${item.includes('⚠️') ? 'text-yellow-400' : 'text-slate-400'}`}>
+                                        <span>{item.includes('⚠️') ? '⚠️' : '✅'}</span>
+                                        <span>{item.replace(' ⚠️', '')}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </BaseNode>
+    );
+};

package/src/components/playground/demos/KiaPBIPreciosNode.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { BaseNode } from '@decido/macia-core';
+import {
+    DollarSign, Car, TrendingUp, Zap, BarChart3
+} from 'lucide-react';
+
+/* ═══════════════════════════════════════════════════════════════
+   KIA PBI PRECIOS NODE — Mirror de PowerBI "PRECIOS - KIA Colombia"
+   Datos REALES · Febrero 2026 · Industria: 1,125 units RUNT
+   ═══════════════════════════════════════════════════════════════ */
+
+const LINEUP = [
+    { model: 'Picanto', segment: 'A-Bajo', type: 'ICE', priceMin: 58, priceMax: 70, runt: 400, ms: 83.5, color: '#ef4444' },
+    { model: 'Soluto', segment: 'A-Medio', type: 'ICE', priceMin: 69.9, priceMax: 74.8, runt: 45, ms: null, color: '#f97316' },
+    { model: 'K3 Sedan', segment: 'B-Sedan', type: 'ICE', priceMin: 84, priceMax: 92.7, runt: 60, ms: null, color: '#f59e0b' },
+    { model: 'K4', segment: 'C-Sedan', type: 'ICE', priceMin: 120, priceMax: 137, runt: 18, ms: null, color: '#eab308' },
+    { model: 'K3 Cross', segment: 'B-Cross', type: 'ICE', priceMin: 88, priceMax: 94, runt: 52, ms: null, color: '#22c55e' },
+    { model: 'Sonet', segment: 'B-SUV', type: 'ICE', priceMin: 92, priceMax: 101.2, runt: 35, ms: null, color: '#10b981' },
+    { model: 'Stonic', segment: 'B-SUV', type: 'ICE', priceMin: 100, priceMax: 110.2, runt: 42, ms: null, color: '#06b6d4' },
+    { model: 'Seltos', segment: 'C-SUV', type: 'ICE', priceMin: 115, priceMax: 128.3, runt: 38, ms: null, color: '#3b82f6' },
+    { model: 'Sportage', segment: 'C-SUV', type: 'ICE', priceMin: 130, priceMax: 180, runt: 55, ms: null, color: '#6366f1' },
+    { model: 'Niro Híbrido', segment: 'C-SUV', type: 'HEV', priceMin: 129, priceMax: 156, runt: 20, ms: null, color: '#8b5cf6' },
+    { model: 'EV3', segment: 'C-EV', type: 'EV', priceMin: 143, priceMax: 163, runt: 15, ms: null, color: '#a855f7' },
+    { model: 'EV5', segment: 'D-EV', type: 'EV', priceMin: 156, priceMax: 196, runt: 8, ms: null, color: '#d946ef' },
+    { model: 'Tasman', segment: 'Pickup', type: 'ICE', priceMin: 190, priceMax: 261, runt: 12, ms: null, color: '#ec4899' },
+    { model: 'EV9', segment: 'E-EV', type: 'EV', priceMin: 340, priceMax: 360, runt: 3, ms: null, color: '#f43f5e' },
+];
+
+const fmtP = (n: number) => `$${n}M`;
+
+export const KiaPBIPreciosNode = (props: any) => {
+    const [filter, setFilter] = useState<'all' | 'ice' | 'ev'>('all');
+
+    const filtered = filter === 'all' ? LINEUP : LINEUP.filter(l => filter === 'ev' ? (l.type === 'EV' || l.type === 'HEV') : l.type === 'ICE');
+    const totalRunt = LINEUP.reduce((s, l) => s + l.runt, 0);
+
+    return (
+        <BaseNode {...props} title="Precios KIA — PBI" width={520} height={640}>
+            <div className="flex flex-col h-full bg-[#1a1a2e] text-white overflow-hidden">
+
+                {/* Header */}
+                <div className="flex items-center gap-3 p-3 bg-[#16213e] border-b border-emerald-900/40">
+                    <div className="w-9 h-9 rounded bg-emerald-600/20 flex items-center justify-center">
+                        <DollarSign size={16} className="text-emerald-400" />
+                    </div>
+                    <div className="flex-1">
+                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
+                            PRECIOS — KIA COLOMBIA
+                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded">FEB 2026</span>
+                            <span className="text-[8px] px-1.5 py-0.5 bg-emerald-500/20 text-emerald-400 rounded">POWER BI</span>
+                        </div>
+                        <div className="text-[10px] text-slate-400">Industria: 1,125 RUNT (+207% vs Ene) · 617 Auto + 500 SUV</div>
+                    </div>
+                </div>
+
+                {/* Summary KPIs */}
+                <div className="flex gap-1 px-3 py-2 border-b border-emerald-900/20">
+                    {[
+                        { label: 'RUNT Total', val: '1,125', color: 'text-emerald-400' },
+                        { label: 'Modelos', val: '14+', color: 'text-blue-400' },
+                        { label: 'Rango', val: '$58M-$360M', color: 'text-yellow-400' },
+                        { label: 'vs Ene', val: '+207%', color: 'text-green-400' },
+                    ].map(k => (
+                        <div key={k.label} className="flex-1 text-center bg-[#16213e]/50 rounded p-1.5 border border-emerald-900/10">
+                            <div className={`text-[10px] font-bold ${k.color}`}>{k.val}</div>
+                            <div className="text-[7px] text-slate-500">{k.label}</div>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Filter */}
+                <div className="flex gap-1 p-2 bg-[#16213e]/30 border-b border-emerald-900/20">
+                    {([
+                        { key: 'all' as const, label: '🚗 Todos' },
+                        { key: 'ice' as const, label: '⛽ ICE' },
+                        { key: 'ev' as const, label: '⚡ EV/HEV' },
+                    ]).map(t => (
+                        <button key={t.key} onClick={() => setFilter(t.key)}
+                            className={`flex-1 py-1.5 rounded text-[9px] font-bold transition-all ${filter === t.key ? 'bg-emerald-600/20 text-emerald-300 border border-emerald-500/30' : 'text-slate-500'
+                                }`}>
+                            {t.label}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-3 space-y-1">
+                    {filtered.map(l => (
+                        <div key={l.model} className="bg-[#16213e]/40 rounded-lg p-2 border border-emerald-900/10"
+                            style={{ borderLeftWidth: '3px', borderLeftColor: l.color }}>
+                            <div className="flex items-center justify-between mb-0.5">
+                                <div className="flex items-center gap-1.5">
+                                    <span className="text-[10px] font-bold">{l.model}</span>
+                                    <span className={`text-[7px] px-1 py-0.5 rounded ${l.type === 'EV' ? 'bg-green-500/20 text-green-400' :
+                                        l.type === 'HEV' ? 'bg-cyan-500/20 text-cyan-400' : 'bg-slate-700 text-slate-400'
+                                        }`}>{l.type}</span>
+                                    <span className="text-[7px] text-slate-600">{l.segment}</span>
+                                </div>
+                                <span className="text-[9px] text-slate-400">{l.runt} RUNT</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <div className="flex-1">
+                                    <div className="flex items-center justify-between text-[9px]">
+                                        <span className="text-emerald-400 font-bold">{fmtP(l.priceMin)}</span>
+                                        <span className="text-[7px] text-slate-600">—</span>
+                                        <span className="text-yellow-400 font-bold">{fmtP(l.priceMax)}</span>
+                                    </div>
+                                    <div className="h-1 bg-[#0a0f1a] rounded-full mt-0.5 relative">
+                                        <div className="absolute h-full rounded-full bg-linear-to-r from-emerald-500 to-yellow-500"
+                                            style={{ left: `${(l.priceMin / 360) * 100}%`, width: `${((l.priceMax - l.priceMin) / 360) * 100}%` }} />
+                                    </div>
+                                </div>
+                                {l.ms && <span className="text-[8px] font-bold text-red-400 ml-1">{l.ms}% MS</span>}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </BaseNode>
+    );
+};