Calculadora de Precios Inteligente

# ROL
Actúa como Product Engineer Senior construyendo una calculadora de pricing profesional para lanzamientos de infoproductos y servicios high-ticket.

# APP: Smart Pricing Studio
Editor de oferta multi-componente con descuentos, planes de pago, bonos evaluados y simulador de escenarios de ingresos.

# MODELO DE DATOS
interface Componente { id: string; nombre: string; tipo: 'core'|'bono'|'upsell'|'downsell'; precioNormal: number; precioActual: number; descuentoMaximo: number; costoEntrega: number; scorecard: { complementa: 1|2|3|4|5; rompeObjecion: 1|2|3|4|5; valorPercibido: 1|2|3|4|5; bajoEsfuerzo: 1|2|3|4|5; }; }
interface PlanPago { id: string; nombrePlan: string; numeroCuotas: number; recargoPct: number; downpayment: number; }
interface Escenario { id: string; nombre: string; unidadesEsperadas: number; mixPlanes: Record<string, number>; }
interface State { componentes: Componente[]; planes: PlanPago[]; escenarios: Escenario[]; moneda: string; }

# LÓGICA ESPECÍFICA
- Total oferta = suma de precioActual de componentes; descuento sugerido calculado.
- Cada plan de pago muestra: total pagado por el cliente, ingreso mensual proyectado, y flag "riesgo default" si numeroCuotas>6 sin downpayment.
- Scorecard: total ponderado 1-20 por componente, ranking auto, top 3 con banda amarilla, bottom quartile con warning "considera eliminar".
- Simulador de escenarios: por cada escenario calcula ingreso bruto, margen, cash-flow mes a mes.

# INSIGHTS AUTOMÁTICOS
- "Descuento canibaliza margen" si descuento promedio >40% y margen resultante <25%.
- "Bono paja" para componentes con scorecard <8/20.
- "Ancla débil": si no hay componente con precioNormal >=2x el total.
- Sugerencia de plan óptimo según mix de escenarios.
# STACK OBLIGATORIO
React 18 + TypeScript estricto · Vite · Tailwind CSS · Zustand para estado global · @dnd-kit/core para drag & drop accesible · react-hook-form + zod para validación · html-to-image para PNG · jsPDF + jspdf-autotable para PDF ejecutivo · lucide-react para iconos. Persistencia en localStorage con clave "vn-{slug-de-la-app}" y estructura versionada { v: 1, updatedAt, data }. Nada de librerías de UI pesadas.

# ARQUITECTURA
- Un store Zustand por app con acciones puras y selectors memoizados.
- Historial undo/redo (últimas 30 acciones) atajos Cmd/Ctrl+Z y Cmd/Ctrl+Shift+Z.
- Auto-guardado con debounce 500 ms + toast "Guardado hace Xs".
- Import/export JSON con validación zod para evitar corromper estado.
- Enlace compartible: estado serializado + comprimido con lz-string, codificado base64 en query param ?s=. Al abrir con ?s= se hidrata el store y se muestra un banner "Estás viendo un snapshot compartido — duplicar para editar".

# EXPERIENCIA CORE (obligatoria en todas las apps)
- CRUD completo con confirm modal reusable para acciones destructivas.
- Drag & drop teclable (Space para tomar, flechas para mover, Enter para soltar, Escape para cancelar) con anuncios aria-live.
- Comando rápido Cmd/Ctrl+K: crear elemento, buscar, saltar a vista, resetear.
- Búsqueda instantánea + filtros combinables.
- Botón "Cargar datos de ejemplo" con un caso real de negocio precargado.
- Botón "Reset" con doble confirmación (texto "BORRAR" a mano).
- Empty states diseñados con CTA visible.
- Tour de onboarding de 3 pasos (usar driver.js o equivalente ligero) que solo se muestra la primera vez y se puede reactivar desde ajustes.

# EXPORTACIÓN (todas las apps deben ofrecer las 4)
1. PNG del canvas principal a 2x DPI con marca de agua discreta "vilmanunez.com" en la esquina.
2. PDF ejecutivo A4 con portada (título + fecha + branding), captura del canvas, tabla de datos y sección de "Insights automáticos". Footer en todas las páginas: "© Vilma Núñez, PhD — Todos los derechos reservados".
3. CSV con los datos brutos (una fila por elemento).
4. JSON completo re-importable + botón "Copiar enlace compartido".

# INSIGHTS AUTOMÁTICOS (motor de recomendación)
Panel lateral colapsable "Diagnóstico ejecutivo" que lee el estado y muestra entre 3 y 6 hallazgos accionables generados por reglas deterministas descritas en la sección específica de cada app. Cada hallazgo lleva: título, evidencia (qué datos lo disparan), y una acción sugerida en imperativo. Ordenados por impacto.

# ESTÉTICA (brutalismo editorial VN)
Fondo #FFFFFF, texto #000000, bordes negros de 2 px sin radios grandes (radius 0 a 4 px máximo). Acento amarillo #FFE600 para highlights y azul #0047FF puntual para enlaces/acciones primarias. Prohibido: sombras difusas, degradados, grises intermedios, glassmorphism, tipografías serif. Titulares en Space Grotesk 900, cuerpo en Inter 500. Focus ring negro sólido de 3 px con offset 2 px.

# RESPONSIVE
Mobile-first real. En <768 px: columnas apilan, drag & drop degrada a menú "Mover a…", toolbar principal colapsa en Sheet inferior. Los canvases visuales (hexágonos, órbitas, matrices) escalan con viewBox SVG y siguen siendo interactivos con touch (usar pointer events).

# CALIDAD
- Accesibilidad WCAG 2.1 AA verificable (roles ARIA correctos, aria-live para toasts, contraste ≥ 4.5:1, foco visible, todas las acciones accesibles por teclado).
- Error boundary global con opción de exportar el estado antes de recargar.
- Skeletons durante hidratación desde localStorage.
- Toasts con aria-live=polite; confirmaciones con aria-live=assertive.
- Tests de humo con Vitest para el store (add / update / remove / undo / redo / import / export).

# ENTREGA
No entregues un archivo estático. Entrega una app funcional donde yo pueda añadir datos reales, ver los insights actualizarse en vivo, exportar el PDF ejecutivo y compartir el enlace. Si algo del brief no está claro, decídelo con criterio de producto y déjalo documentado en un README corto dentro del proyecto.