diff --git a/.obsidian/app.json b/.obsidian/app.json
index 9e26dfe..d512ba0 100644
--- a/.obsidian/app.json
+++ b/.obsidian/app.json
@@ -1 +1,5 @@
-{}
\ No newline at end of file
+{
+  "showLineNumber": true,
+  "livePreview": false,
+  "strictLineBreaks": true
+}
\ No newline at end of file
diff --git a/.obsidian/workspace.json b/.obsidian/workspace.json
index b0d1d2c..1114bb8 100644
--- a/.obsidian/workspace.json
+++ b/.obsidian/workspace.json
@@ -4,24 +4,53 @@
     "type": "split",
     "children": [
       {
-        "id": "693f48ce70bbc27c",
+        "id": "5b54b35ff895e8e7",
         "type": "tabs",
         "children": [
           {
-            "id": "bf629ec7b999c3f6",
+            "id": "e2a22082e4a8b97c",
             "type": "leaf",
             "state": {
               "type": "markdown",
               "state": {
                 "file": "Instructivo Git Gitea.md",
                 "mode": "source",
-                "source": false
+                "source": true
+              },
+              "icon": "lucide-file",
+              "title": "Instructivo Git Gitea"
+            }
+          },
+          {
+            "id": "143638140cd15469",
+            "type": "leaf",
+            "state": {
+              "type": "markdown",
+              "state": {
+                "file": "Roadmap Next.js.md",
+                "mode": "preview",
+                "source": true
+              },
+              "icon": "lucide-file",
+              "title": "Roadmap Next.js"
+            }
+          },
+          {
+            "id": "101f09202d4d7f35",
+            "type": "leaf",
+            "state": {
+              "type": "markdown",
+              "state": {
+                "file": "Instructivo Git Gitea.md",
+                "mode": "preview",
+                "source": true
               },
               "icon": "lucide-file",
               "title": "Instructivo Git Gitea"
             }
           }
-        ]
+        ],
+        "currentTab": 2
       }
     ],
     "direction": "vertical"
@@ -183,9 +212,16 @@
       "bases:Create new base": false
     }
   },
-  "active": "8edcacadca4ed7a6",
+  "active": "101f09202d4d7f35",
   "lastOpenFiles": [
+    "Stack Tecnológico Recomendado.md",
+    "Untitled.canvas",
+    "Untitled.base",
+    "Roadmap Next.js.md",
+    "Roadmap-nextjs-erp.md",
     "Instructivo Git Gitea.md",
+    "roadmap_nextjs_erp.html",
+    "2026-05-18.md",
     "Welcome.md"
   ]
 }
\ No newline at end of file
diff --git a/Instructivo Git Gitea.md b/Instructivo Git Gitea.md
index 4e3d4ed..b8ba3fc 100644
--- a/Instructivo Git Gitea.md	
+++ b/Instructivo Git Gitea.md	
@@ -85,7 +85,9 @@ curl http://100.68.242.27:30000
 ```
 
 ## 14. Acceso a Gitea
-http://100.68.242.27:30000
+	
+	[URL de Gitea en NAS](http://100.68.242.27:30000)
+	
 
 ## 15. Flujo diario
 ```bash
diff --git a/Roadmap Next.js.md b/Roadmap Next.js.md
new file mode 100644
index 0000000..d59408f
--- /dev/null
+++ b/Roadmap Next.js.md	
@@ -0,0 +1,746 @@
+# Hoja de Ruta: Desarrollo de Aplicaciones Operacionales para SAP Business One con Next.js
+
+> Duración estimada: 4 a 5 meses  
+> Objetivo: Construir aplicaciones web operacionales simples, rápidas y mantenibles conectadas a SAP Business One mediante Service Layer.
+
+---
+
+# Objetivo real del proyecto
+
+El objetivo NO es crear un ERP completo como SAP Business One.
+
+El objetivo es desarrollar:
+
+- formularios operacionales específicos
+- módulos independientes
+- validaciones empresariales
+- procesos rápidos para usuarios internos
+
+Cada módulo tendrá:
+- una funcionalidad específica
+- su propia lógica
+- su propio formulario
+- integración con SAP Business One
+
+---
+
+# Filosofía del sistema
+
+SAP Business One seguirá siendo:
+
+```text
+Sistema maestro ERP
+```
+
+La aplicación web será:
+
+```text
+Frontend operacional especializado
+        ↓
+Validaciones empresariales
+        ↓
+Integración con SAP Service Layer
+```
+
+---
+
+# Ejemplos reales de módulos
+
+## Almacén
+- Recepción de Orden de Compra
+- Transferencias de almacén
+- Validación de lotes
+- Conteo de inventario
+
+---
+
+## Compras
+- Factura de gastos
+- Factura de productos
+- Distribución por centros de costo
+- Validación SUNAT
+
+---
+
+## Ventas
+- Validación de pedidos
+- Aprobaciones
+- Seguimiento comercial
+
+---
+
+# Arquitectura recomendada
+
+```text
+Frontend
+- Next.js
+- TypeScript
+- React Hook Form
+- TanStack Table
+
+Backend Integración
+- FastAPI
+
+ERP
+- SAP Business One Service Layer
+```
+
+---
+
+# Flujo típico de trabajo
+
+```text
+1. Consultar información desde SAP
+2. Mostrar información al usuario
+3. Validar reglas operacionales
+4. Permitir edición controlada
+5. Enviar información final a SAP
+```
+
+---
+
+# Principios de diseño UI
+
+## El sistema debe ser:
+
+- rápido
+- minimalista
+- estable
+- predecible
+- orientado a productividad
+
+---
+
+## Evitar
+
+- animaciones
+- dashboards innecesarios
+- exceso de colores
+- imágenes decorativas
+- diseño tipo startup
+
+---
+
+## Priorizar
+
+- velocidad
+- teclado
+- tabulación
+- búsqueda rápida
+- formularios densos
+- tablas operacionales
+
+---
+
+# Fase 1 — Fundamentos web modernos
+Duración: ~3 semanas
+
+---
+
+# JavaScript moderno
+
+## Aprender
+
+- let / const
+- funciones
+- arrays
+- objetos
+- async / await
+- fetch API
+- módulos
+
+---
+
+## Objetivo ERP
+
+Consumir APIs y transformar datos empresariales.
+
+Ejemplos:
+- obtener OC
+- obtener proveedores
+- listar artículos
+- validar estados
+
+---
+
+# HTML y CSS
+
+## Aprender
+
+- formularios
+- tablas
+- inputs
+- layouts
+- Flexbox
+- CSS Grid
+- responsive básico
+
+---
+
+## Objetivo ERP
+
+Construir:
+- formularios operacionales
+- tablas densas
+- layouts empresariales
+
+---
+
+# TypeScript
+
+## Aprender
+
+- interfaces
+- types
+- arrays tipados
+- objetos anidados
+- generics
+- Partial
+- Pick
+- Omit
+
+---
+
+## Objetivo ERP
+
+Modelar:
+- documentos
+- líneas
+- almacenes
+- lotes
+- centros de costo
+
+---
+
+# Fase 2 — React para sistemas empresariales
+Duración: ~3 semanas
+
+---
+
+# Componentes
+
+## Aprender
+
+- componentes reutilizables
+- props
+- composición
+
+---
+
+## Objetivo ERP
+
+Crear:
+- inputs
+- tablas
+- formularios
+- modales
+
+---
+
+# Hooks React
+
+## Aprender
+
+- useState
+- useEffect
+- useMemo
+- useCallback
+
+---
+
+## Objetivo ERP
+
+Controlar:
+- formularios
+- búsquedas
+- filtros
+- cálculos
+
+---
+
+# Formularios controlados
+
+## Aprender
+
+- eventos
+- validaciones
+- manejo errores
+
+---
+
+## Objetivo ERP
+
+Validar:
+- cantidades
+- RUC
+- fechas
+- almacenes
+- centros de costo
+
+---
+
+# Fase 3 — Formularios empresariales modernos
+Duración: ~2 semanas
+
+> Esta es una de las fases MÁS importantes.
+
+---
+
+# React Hook Form
+
+## Aprender
+
+- useForm
+- Controller
+- FormProvider
+- useFieldArray
+
+---
+
+## Objetivo ERP
+
+Manejar:
+- formularios grandes
+- líneas dinámicas
+- validaciones rápidas
+
+---
+
+# Zod
+
+## Aprender
+
+- schemas
+- validaciones
+- refinements
+
+---
+
+## Objetivo ERP
+
+Centralizar reglas empresariales.
+
+Ejemplos:
+- cantidad > 0
+- RUC válido
+- lote obligatorio
+- centro de costo requerido
+
+---
+
+# Fase 4 — Next.js moderno
+Duración: ~4 semanas
+
+---
+
+# App Router
+
+## Aprender
+
+- app/
+- layouts
+- rutas dinámicas
+
+---
+
+## Ejemplos
+
+```text
+/recepcion-oc
+/factura-gastos
+/factura-productos
+/transferencias
+```
+
+---
+
+# Server Components y Client Components
+
+## Aprender
+
+- use client
+- separación cliente/servidor
+
+---
+
+## Objetivo ERP
+
+Separar:
+- carga datos
+- UI
+- validaciones
+
+---
+
+# API Routes
+
+## Aprender
+
+- GET
+- POST
+- PATCH
+
+---
+
+## Objetivo ERP
+
+Comunicación:
+- frontend
+- FastAPI
+- SAP
+
+---
+
+# Autenticación
+
+## Aprender
+
+- sesiones
+- middleware
+- protección rutas
+
+---
+
+## Escenario real
+
+Usuario:
+- existe en OHEM
+- usa login corporativo
+- trabaja con usuario SAP indirecto
+
+---
+
+# Fase 5 — Estado servidor y tablas
+Duración: ~2 semanas
+
+---
+
+# TanStack Query
+
+## Aprender
+
+- fetching
+- cache
+- invalidaciones
+- mutations
+
+---
+
+## Objetivo ERP
+
+Optimizar:
+- búsquedas
+- consultas SAP
+- refresco de datos
+
+---
+
+# TanStack Table
+
+## Aprender
+
+- filtros
+- sorting
+- paginación
+- selección filas
+
+---
+
+## Objetivo ERP
+
+Construir:
+- líneas documento
+- búsquedas
+- listados operacionales
+
+---
+
+# Fase 6 — Componentes ERP reutilizables
+Duración: ~2 semanas
+
+> Esta fase define la calidad del sistema completo.
+
+---
+
+# Componentes clave
+
+## ERPDataTable
+
+Tabla reutilizable:
+- filtros
+- búsqueda
+- selección
+- teclado
+
+---
+
+# SearchModal
+
+Modal reutilizable para:
+- artículos
+- proveedores
+- clientes
+- órdenes
+- almacenes
+
+---
+
+# Inputs inteligentes
+
+Crear componentes:
+- InputRUC
+- InputCurrency
+- InputDate
+- InputQuantity
+- InputWarehouse
+
+---
+
+# Layouts reutilizables
+
+## Crear
+
+- FormLayout
+- FilterLayout
+- ModalLayout
+
+---
+
+# Fase 7 — Backend integración FastAPI
+Duración: ~2 semanas
+
+---
+
+# FastAPI
+
+## Aprender
+
+- endpoints
+- modelos Pydantic
+- autenticación
+- manejo errores
+
+---
+
+# Objetivo ERP
+
+Centralizar:
+- login SAP
+- sesión Service Layer
+- validaciones
+- logs
+- auditoría
+
+---
+
+# Arquitectura recomendada
+
+```text
+Next.js
+    ↓
+FastAPI
+    ↓
+SAP Service Layer
+```
+
+---
+
+# Fase 8 — Integración SAP Business One
+Duración: ~2 semanas
+
+---
+
+# Aprender
+
+- login Service Layer
+- cookies sesión
+- GET
+- POST
+- PATCH
+
+---
+
+# Escenarios reales
+
+## Recepción OC
+
+```text
+1. Buscar OC
+2. Mostrar pendientes
+3. Registrar cantidades
+4. Crear Entrada Mercancía
+```
+
+---
+
+## Factura proveedor
+
+```text
+1. Traer Entrada Mercancía
+2. Completar datos contables
+3. Distribuir gastos
+4. Crear Factura Proveedor
+```
+
+---
+
+# Validaciones reales
+
+## Manejar
+
+- sesión expirada
+- errores SAP
+- timeouts
+- validaciones SUNAT
+- concurrencia
+
+---
+
+# Fase 9 — Seguridad y despliegue
+Duración: ~1 semana
+
+---
+
+# Seguridad
+
+## Aprender
+
+- HTTPS
+- CORS
+- middleware
+- protección APIs
+
+---
+
+# Deploy
+
+## Aprender
+
+- Docker
+- Nginx
+- Linux
+- variables entorno
+
+---
+
+# Estructura recomendada
+
+```text
+/apps
+    /recepcion-oc
+    /factura-gastos
+    /factura-productos
+    /transferencias
+
+/shared-ui
+/shared-api
+/shared-types
+```
+
+---
+
+# Filosofía modular
+
+Cada módulo:
+- independiente
+- simple
+- mantenible
+- desplegable
+
+---
+
+# Proyecto inicial recomendado
+
+## Recepción de Orden de Compra
+
+Porque incluye:
+
+- filtros
+- tablas
+- modales
+- líneas
+- validaciones
+- SAP Service Layer
+
+---
+
+# Stack recomendado
+
+## Frontend
+
+- Next.js
+- TypeScript
+- Tailwind CSS
+- shadcn/ui
+
+---
+
+## Formularios
+
+- React Hook Form
+- Zod
+
+---
+
+## Tablas
+
+- TanStack Table
+
+---
+
+## Estado servidor
+
+- TanStack Query
+
+---
+
+## Backend
+
+- FastAPI
+
+---
+
+# Recursos recomendados
+
+| Tema | Recurso |
+|---|---|
+| JavaScript | https://javascript.info |
+| TypeScript | https://www.typescriptlang.org/docs |
+| React | https://react.dev |
+| Next.js | https://nextjs.org/learn |
+| Tailwind CSS | https://tailwindcss.com |
+| React Hook Form | https://react-hook-form.com |
+| Zod | https://zod.dev |
+| TanStack Query | https://tanstack.com/query |
+| TanStack Table | https://tanstack.com/table |
+| FastAPI | https://fastapi.tiangolo.com |
+
+---
+
+# Resumen total
+
+| Fase | Tema | Semanas |
+|---|---|---|
+| 1 | Fundamentos web | 3 |
+| 2 | React empresarial | 3 |
+| 3 | Formularios modernos | 2 |
+| 4 | Next.js | 4 |
+| 5 | Estado y tablas | 2 |
+| 6 | Componentes ERP reutilizables | 2 |
+| 7 | FastAPI integración | 2 |
+| 8 | SAP Business One | 2 |
+| 9 | Seguridad y deploy | 1 |
+| Total | | ~21 semanas |
+
+---
+
+# Meta final
+
+Construir aplicaciones operacionales empresariales:
+- rápidas
+- simples
+- mantenibles
+- desacopladas
+- conectadas a SAP Business One
+
+Sin intentar reinventar un ERP completo. La humanidad ya ha sufrido suficiente con eso.
\ No newline at end of file
diff --git a/Stack Tecnológico Recomendado.md b/Stack Tecnológico Recomendado.md
new file mode 100644
index 0000000..8b8135c
--- /dev/null
+++ b/Stack Tecnológico Recomendado.md	
@@ -0,0 +1,594 @@
+# Stack Tecnológico Recomendado
+## Aplicaciones Operacionales para SAP Business One
+
+> Objetivo: construir aplicaciones web empresariales simples, rápidas, mantenibles y desacopladas para procesos específicos conectados a SAP Business One mediante Service Layer.
+
+---
+
+# Filosofía tecnológica
+
+El objetivo NO es crear:
+- una plataforma compleja
+- microservicios innecesarios
+- interfaces visualmente exageradas
+
+El objetivo es construir:
+- formularios operacionales rápidos
+- tablas empresariales eficientes
+- validaciones sólidas
+- integración estable con SAP Business One
+
+---
+
+# Arquitectura general recomendada
+
+```text
+Frontend (Next.js)
+        ↓
+Backend Integración (FastAPI)
+        ↓
+SAP Business One Service Layer
+```
+
+---
+
+# Lenguajes recomendados
+
+# 1. TypeScript
+
+## Uso principal
+Frontend empresarial.
+
+---
+
+## Se utilizará en:
+- Next.js
+- React
+- Formularios
+- Tablas
+- Validaciones
+- Componentes reutilizables
+
+---
+
+## ¿Por qué usar TypeScript?
+
+Porque los sistemas ERP manejan:
+- muchos datos
+- documentos complejos
+- estructuras anidadas
+- validaciones empresariales
+
+TypeScript ayuda a:
+- reducir errores
+- mantener consistencia
+- mejorar mantenimiento
+- detectar problemas temprano
+
+---
+
+## Ejemplo típico ERP
+
+```ts
+interface PurchaseOrderLine {
+  itemCode: string
+  description: string
+  quantity: number
+  warehouseCode: string
+}
+```
+
+---
+
+# 2. Python
+
+## Uso principal
+Backend de integración.
+
+---
+
+## Se utilizará en:
+- FastAPI
+- integración SAP
+- validaciones empresariales
+- integración SUNAT
+- logs
+- auditoría
+- automatizaciones
+- procesos auxiliares
+
+---
+
+## ¿Por qué Python?
+
+Porque:
+- es rápido de desarrollar
+- excelente para APIs
+- ideal para integración empresarial
+- muy compatible con automatización
+- excelente ecosistema
+
+---
+
+# IDE recomendado
+
+# Antigravity
+
+## IDE principal
+
+Antigravity puede ser muy útil para este proyecto debido a:
+- generación acelerada de código
+- asistencia IA
+- productividad
+- soporte moderno TypeScript y React
+
+---
+
+# Uso recomendado de Antigravity
+
+## Excelente para generar:
+- formularios
+- CRUDs
+- tablas
+- hooks
+- componentes
+- validaciones
+- clientes API
+- schemas Zod
+
+---
+
+## NO depender completamente de IA para:
+- arquitectura
+- seguridad
+- lógica SAP
+- reglas contables
+- autorizaciones
+- estructura del sistema
+
+---
+
+# Filosofía correcta con IA
+
+```text
+Arquitectura y lógica:
+Manual
+
+Implementación repetitiva:
+Asistida por IA
+```
+
+---
+
+# Recomendación importante
+
+La IA debe:
+- acelerar desarrollo
+- reducir boilerplate
+- mejorar productividad
+
+La IA NO debe:
+- tomar decisiones arquitectónicas
+- definir reglas empresariales
+- controlar diseño de integración SAP
+
+---
+
+# VS Code como respaldo
+
+## Recomendado instalar también:
+Visual Studio Code.
+
+---
+
+## Motivos
+- estabilidad
+- debugging excelente
+- ecosistema enorme
+- respaldo confiable
+- herramientas empresariales
+
+---
+
+# Extensiones recomendadas
+
+## Frontend
+
+- ES7+ React snippets
+- Tailwind CSS IntelliSense
+- ESLint
+- Prettier
+- Error Lens
+
+---
+
+## Python
+
+- Python
+- Pylance
+- Ruff
+- Black Formatter
+
+---
+
+# Librerías Frontend
+
+# Next.js
+
+## Framework principal
+
+Se utilizará para:
+- páginas
+- layouts
+- formularios
+- módulos operacionales
+- autenticación
+- API routes
+
+---
+
+## ¿Por qué Next.js?
+
+Porque:
+- estructura moderna
+- excelente soporte TypeScript
+- arquitectura ordenada
+- ideal para aplicaciones empresariales
+
+---
+
+# React
+
+## Base UI
+
+React será utilizado para:
+- componentes
+- formularios
+- tablas
+- modales
+- interacción usuario
+
+---
+
+# Tailwind CSS
+
+## Framework CSS recomendado
+
+Ideal para:
+- sistemas empresariales
+- diseño minimalista
+- formularios densos
+- layouts rápidos
+
+---
+
+## Ventajas
+
+- rápido
+- consistente
+- fácil mantenimiento
+- poco CSS manual
+
+---
+
+# shadcn/ui
+
+## Librería UI recomendada
+
+Ideal para:
+- modales
+- dialogs
+- tablas
+- formularios
+- selects
+- popovers
+
+---
+
+## Ventaja principal
+
+Los componentes:
+- son modificables
+- quedan dentro del proyecto
+- no dependen de librerías cerradas
+
+---
+
+# Formularios
+
+# React Hook Form
+
+## Librería MÁS importante del frontend
+
+Se utilizará para:
+- formularios complejos
+- validaciones
+- líneas dinámicas
+- formularios ERP
+
+---
+
+## Casos reales
+
+- facturas
+- entradas mercancía
+- transferencias
+- gastos
+- validaciones tributarias
+
+---
+
+# Zod
+
+## Validaciones empresariales
+
+Se utilizará para:
+- validar formularios
+- validar payloads
+- centralizar reglas
+
+---
+
+## Ejemplos
+
+- RUC válido
+- cantidad > 0
+- centro costo obligatorio
+- lote requerido
+
+---
+
+# Manejo de datos
+
+# TanStack Query
+
+## Manejo de estado servidor
+
+Se utilizará para:
+- consultas SAP
+- cache
+- refresh
+- sincronización datos
+
+---
+
+## Ventajas
+
+- evita consultas repetidas
+- mejora performance
+- simplifica fetching
+
+---
+
+# Tablas ERP
+
+# TanStack Table
+
+## Librería crítica ERP
+
+Se utilizará para:
+- líneas documento
+- listados
+- filtros
+- selección
+- edición
+
+---
+
+## Funcionalidades importantes
+
+- filtros
+- sorting
+- búsqueda
+- navegación teclado
+- paginación
+
+---
+
+# Backend recomendado
+
+# FastAPI
+
+## Backend principal
+
+FastAPI será utilizado para:
+- integración SAP
+- autenticación
+- validaciones
+- logs
+- auditoría
+- APIs internas
+
+---
+
+# Arquitectura recomendada
+
+```text
+Next.js
+    ↓
+FastAPI
+    ↓
+SAP Service Layer
+```
+
+---
+
+# ¿Por qué usar FastAPI?
+
+Porque:
+- rápido
+- limpio
+- tipado
+- excelente documentación
+- ideal para APIs empresariales
+
+---
+
+# SAP Business One
+
+## SAP seguirá siendo:
+
+```text
+Sistema maestro ERP
+```
+
+La aplicación web:
+- NO reemplaza SAP
+- NO replica SAP completo
+
+La aplicación:
+- simplifica procesos específicos
+- mejora experiencia operacional
+- agrega validaciones
+- acelera tareas
+
+---
+
+# Herramientas adicionales
+
+# Postman o Insomnia
+
+## Para pruebas API
+
+Utilizados para probar:
+- SAP Service Layer
+- FastAPI
+- APIs SUNAT
+
+---
+
+# Obsidian
+
+## Documentación técnica
+
+Ideal para:
+- arquitectura
+- flujos
+- snippets
+- documentación SAP
+
+---
+
+# Git
+
+## Control versiones
+
+Recomendado:
+- Git
+- GitHub
+- Gitea
+
+---
+
+# Docker
+
+## Deploy empresarial
+
+Aprender:
+- Docker
+- Docker Compose
+- Nginx
+
+---
+
+# Organización recomendada
+
+```text
+/apps
+    /recepcion-oc
+    /factura-gastos
+    /factura-productos
+    /transferencias
+
+/shared-ui
+/shared-api
+/shared-types
+/shared-validations
+```
+
+---
+
+# Filosofía modular
+
+Cada módulo debe ser:
+- independiente
+- simple
+- mantenible
+- desacoplado
+
+---
+
+# Componentes reutilizables críticos
+
+## SearchModal
+
+Modal reutilizable para:
+- artículos
+- proveedores
+- clientes
+- órdenes compra
+
+---
+
+# ERPDataTable
+
+Tabla reutilizable:
+- filtros
+- búsqueda
+- selección
+- teclado
+
+---
+
+# Inputs inteligentes
+
+Crear:
+- InputRUC
+- InputCurrency
+- InputDate
+- InputQuantity
+- InputWarehouse
+
+---
+
+# Prioridades reales de aprendizaje
+
+# Prioridad máxima
+
+1. TypeScript
+2. React Hook Form
+3. TanStack Table
+4. FastAPI
+5. SAP Service Layer
+
+---
+
+# Prioridad media
+
+6. Next.js
+7. TanStack Query
+8. Zod
+9. Docker
+
+---
+
+# Prioridad baja
+
+- Redux
+- animaciones
+- dashboards complejos
+- SEO
+- diseño visual avanzado
+
+---
+
+# Objetivo final
+
+Construir aplicaciones empresariales:
+- rápidas
+- operacionales
+- mantenibles
+- desacopladas
+- integradas con SAP Business One
+
+Sin intentar reinventar un ERP completo. La industria ya tiene suficientes cicatrices por eso.
\ No newline at end of file
diff --git a/roadmap_nextjs_erp.html b/roadmap_nextjs_erp.html
new file mode 100644
index 0000000..2b76b80
--- /dev/null
+++ b/roadmap_nextjs_erp.html
@@ -0,0 +1,245 @@
+
+<style>
+  * { box-sizing: border-box; }
+  body { margin: 0; }
+  .roadmap { padding: 1.5rem 0; font-family: var(--font-sans); }
+  .phase-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
+  .phase-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
+  .phase-title { font-size: 16px; font-weight: 500; color: var(--color-text-primary); }
+  .phase-time { font-size: 12px; color: var(--color-text-secondary); margin-left: auto; white-space: nowrap; }
+  .phase-block { border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); padding: 1rem 1.25rem; margin-bottom: 1rem; background: var(--color-background-primary); }
+  .topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
+  .topic-card { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 10px 12px; border: 0.5px solid var(--color-border-tertiary); cursor: pointer; transition: border-color .2s; }
+  .topic-card:hover { border-color: var(--color-border-secondary); }
+  .topic-name { font-size: 13px; font-weight: 500; color: var(--color-text-primary); margin: 0 0 3px; }
+  .topic-desc { font-size: 12px; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
+  .topic-icon { font-size: 16px; margin-bottom: 5px; color: var(--color-text-secondary); }
+  .connector { text-align: center; margin: 4px 0; color: var(--color-text-tertiary); font-size: 18px; }
+  .erp-note { background: var(--color-background-info); border: 0.5px solid var(--color-border-info); border-radius: var(--border-radius-md); padding: 10px 14px; margin-top: 10px; font-size: 12px; color: var(--color-text-info); }
+  .total-bar { display: flex; align-items: center; gap: 12px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 12px 16px; margin-top: 4px; border: 0.5px solid var(--color-border-tertiary); }
+  .total-label { font-size: 13px; color: var(--color-text-secondary); }
+  .total-val { font-size: 18px; font-weight: 500; color: var(--color-text-primary); }
+  .progress-row { display: flex; gap: 4px; flex: 1; }
+  .prog-seg { height: 6px; border-radius: 3px; }
+
+  /* phase colors */
+  .p1 .phase-badge { background: #E6F1FB; color: #185FA5; }
+  .p1 .prog-seg { background: #378ADD; }
+  .p2 .phase-badge { background: #E1F5EE; color: #0F6E56; }
+  .p2 .prog-seg { background: #1D9E75; }
+  .p3 .phase-badge { background: #EEEDFE; color: #534AB7; }
+  .p3 .prog-seg { background: #7F77DD; }
+  .p4 .phase-badge { background: #FAEEDA; color: #854F0B; }
+  .p4 .prog-seg { background: #EF9F27; }
+  .p5 .phase-badge { background: #FAECE7; color: #993C1D; }
+  .p5 .prog-seg { background: #D85A30; }
+
+  .p1 .topic-card:hover { border-color: #378ADD; }
+  .p2 .topic-card:hover { border-color: #1D9E75; }
+  .p3 .topic-card:hover { border-color: #7F77DD; }
+  .p4 .topic-card:hover { border-color: #EF9F27; }
+  .p5 .topic-card:hover { border-color: #D85A30; }
+</style>
+
+<div class="roadmap">
+  <h2 class="sr-only">Hoja de ruta: Next.js para desarrollo ERP</h2>
+
+  <!-- FASE 1 -->
+  <div class="phase-block p1">
+    <div class="phase-header">
+      <span class="phase-badge">Fase 1</span>
+      <span class="phase-title">Fundamentos web modernos</span>
+      <span class="phase-time">~3 semanas</span>
+    </div>
+    <div class="topics-grid">
+      <div class="topic-card" onclick="sendPrompt('¿Cómo aprendo JavaScript moderno (ES6+) para Next.js? Explícame los conceptos clave.')">
+        <div class="topic-icon"><i class="ti ti-brand-javascript" aria-hidden="true"></i></div>
+        <p class="topic-name">JavaScript ES6+</p>
+        <p class="topic-desc">Arrow functions, destructuring, async/await, módulos, fetch API</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Qué necesito saber de HTML y CSS para formularios ERP? Cuéntame sobre flexbox, grid y formularios complejos.')">
+        <div class="topic-icon"><i class="ti ti-code" aria-hidden="true"></i></div>
+        <p class="topic-name">HTML & CSS</p>
+        <p class="topic-desc">Formularios avanzados, Flexbox, Grid, variables CSS</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Qué es TypeScript y por qué lo necesito para un ERP en Next.js? Muéstrame los conceptos básicos.')">
+        <div class="topic-icon"><i class="ti ti-brand-typescript" aria-hidden="true"></i></div>
+        <p class="topic-name">TypeScript básico</p>
+        <p class="topic-desc">Tipos, interfaces, generics — esencial para datos maestros ERP</p>
+      </div>
+    </div>
+    <div class="erp-note">
+      <i class="ti ti-info-circle" aria-hidden="true"></i>
+      <strong> Foco ERP:</strong> Practica con estructuras de datos tipo Socio de Negocios: objetos anidados, arrays de líneas, validaciones de campos requeridos.
+    </div>
+  </div>
+
+  <div class="connector">↓</div>
+
+  <!-- FASE 2 -->
+  <div class="phase-block p2">
+    <div class="phase-header">
+      <span class="phase-badge">Fase 2</span>
+      <span class="phase-title">React — base de Next.js</span>
+      <span class="phase-time">~3 semanas</span>
+    </div>
+    <div class="topics-grid">
+      <div class="topic-card" onclick="sendPrompt('Explícame los componentes y props de React con un ejemplo de formulario de datos maestros tipo Artículos de SAP.')">
+        <div class="topic-icon"><i class="ti ti-components" aria-hidden="true"></i></div>
+        <p class="topic-name">Componentes & props</p>
+        <p class="topic-desc">Componentes reutilizables: campos, tablas, cabeceras de documento</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Cómo uso useState y useEffect en React para formularios de documentos de marketing como facturas?')">
+        <div class="topic-icon"><i class="ti ti-bolt" aria-hidden="true"></i></div>
+        <p class="topic-name">Hooks: useState, useEffect</p>
+        <p class="topic-desc">Estado de formularios, carga de datos, efectos secundarios</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Cómo manejo formularios controlados en React? Necesito manejar cabeceras y líneas de documentos ERP.')">
+        <div class="topic-icon"><i class="ti ti-forms" aria-hidden="true"></i></div>
+        <p class="topic-name">Formularios controlados</p>
+        <p class="topic-desc">Controlled inputs, validación, submit — corazón del ERP</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Qué es Context API y cuándo usar Zustand o Redux para manejar estado global en un ERP con Next.js?')">
+        <div class="topic-icon"><i class="ti ti-share" aria-hidden="true"></i></div>
+        <p class="topic-name">Context & estado global</p>
+        <p class="topic-desc">Compartir datos entre formularios, sesión de usuario, carrito</p>
+      </div>
+    </div>
+    <div class="erp-note">
+      <i class="ti ti-info-circle" aria-hidden="true"></i>
+      <strong> Foco ERP:</strong> Crea un componente de grilla de líneas (ej. líneas de factura) donde puedas agregar, editar y eliminar filas dinámicamente.
+    </div>
+  </div>
+
+  <div class="connector">↓</div>
+
+  <!-- FASE 3 -->
+  <div class="phase-block p3">
+    <div class="phase-header">
+      <span class="phase-badge">Fase 3</span>
+      <span class="phase-title">Next.js — núcleo del proyecto</span>
+      <span class="phase-time">~4 semanas</span>
+    </div>
+    <div class="topics-grid">
+      <div class="topic-card" onclick="sendPrompt('Explícame el App Router de Next.js 14+ y cómo estructuro las rutas para un ERP: datos maestros, documentos, reportes.')">
+        <div class="topic-icon"><i class="ti ti-route" aria-hidden="true"></i></div>
+        <p class="topic-name">App Router & rutas</p>
+        <p class="topic-desc">Rutas dinámicas para /ventas/facturas/[id], layouts anidados</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Cuándo usar Server Components vs Client Components en Next.js para formularios de un ERP?')">
+        <div class="topic-icon"><i class="ti ti-server" aria-hidden="true"></i></div>
+        <p class="topic-name">Server vs Client components</p>
+        <p class="topic-desc">Qué renderiza el servidor y qué el cliente en formularios ERP</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Cómo creo API Routes en Next.js para conectarme a SAP Business One Service Layer o una base de datos?')">
+        <div class="topic-icon"><i class="ti ti-api" aria-hidden="true"></i></div>
+        <p class="topic-name">API Routes & Server Actions</p>
+        <p class="topic-desc">Endpoints para leer/escribir Socios, Artículos, Documentos</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('Explícame SSR, SSG y ISR en Next.js con ejemplos para listas de artículos y formularios de documentos ERP.')">
+        <div class="topic-icon"><i class="ti ti-refresh" aria-hidden="true"></i></div>
+        <p class="topic-name">SSR, SSG, ISR</p>
+        <p class="topic-desc">Estrategias de renderizado para datos maestros y transacciones</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Cómo implemento middleware y autenticación con NextAuth en Next.js para un ERP con roles de usuario?')">
+        <div class="topic-icon"><i class="ti ti-shield-lock" aria-hidden="true"></i></div>
+        <p class="topic-name">Middleware & autenticación</p>
+        <p class="topic-desc">Roles: vendedor, almacenista, contador — proteger rutas</p>
+      </div>
+    </div>
+    <div class="erp-note">
+      <i class="ti ti-info-circle" aria-hidden="true"></i>
+      <strong> Foco ERP:</strong> Conecta Next.js con SAP Business One Service Layer (REST API) usando API Routes. Crea un CRUD completo para Socios de Negocios.
+    </div>
+  </div>
+
+  <div class="connector">↓</div>
+
+  <!-- FASE 4 -->
+  <div class="phase-block p4">
+    <div class="phase-header">
+      <span class="phase-badge">Fase 4</span>
+      <span class="phase-title">Librerías clave para ERP</span>
+      <span class="phase-time">~3 semanas</span>
+    </div>
+    <div class="topics-grid">
+      <div class="topic-card" onclick="sendPrompt('¿Qué librería de UI es mejor para formularios ERP en Next.js: shadcn/ui, Ant Design o MUI? Compáralas.')">
+        <div class="topic-icon"><i class="ti ti-layout" aria-hidden="true"></i></div>
+        <p class="topic-name">UI: shadcn/ui o Ant Design</p>
+        <p class="topic-desc">Tablas, selects, datepickers, modales — componentes ERP listos</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Cómo uso React Hook Form con Zod para validar formularios complejos como una Factura de Ventas en Next.js?')">
+        <div class="topic-icon"><i class="ti ti-check" aria-hidden="true"></i></div>
+        <p class="topic-name">React Hook Form + Zod</p>
+        <p class="topic-desc">Validación de campos: RUC, cantidades, fechas, totales</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Cómo uso React Query (TanStack Query) para cargar y cachear datos de SAP Business One en Next.js?')">
+        <div class="topic-icon"><i class="ti ti-database" aria-hidden="true"></i></div>
+        <p class="topic-name">TanStack Query</p>
+        <p class="topic-desc">Cache, paginación, sincronización con el servidor SAP</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Cómo implemento TanStack Table para grillas de documentos ERP con filtros, ordenamiento y paginación en Next.js?')">
+        <div class="topic-icon"><i class="ti ti-table" aria-hidden="true"></i></div>
+        <p class="topic-name">TanStack Table</p>
+        <p class="topic-desc">Grillas de líneas, listados de facturas, movimientos de almacén</p>
+      </div>
+    </div>
+    <div class="erp-note">
+      <i class="ti ti-info-circle" aria-hidden="true"></i>
+      <strong> Foco ERP:</strong> Construye el formulario de Entrada de Mercancías: cabecera + grilla de líneas con artículos, lotes, almacén destino, cantidades y costos.
+    </div>
+  </div>
+
+  <div class="connector">↓</div>
+
+  <!-- FASE 5 -->
+  <div class="phase-block p5">
+    <div class="phase-header">
+      <span class="phase-badge">Fase 5</span>
+      <span class="phase-title">Proyecto ERP real</span>
+      <span class="phase-time">~4 semanas</span>
+    </div>
+    <div class="topics-grid">
+      <div class="topic-card" onclick="sendPrompt('Ayúdame a diseñar la arquitectura de carpetas en Next.js para un módulo de ventas ERP con facturas, socios y artículos.')">
+        <div class="topic-icon"><i class="ti ti-folder" aria-hidden="true"></i></div>
+        <p class="topic-name">Arquitectura de carpetas</p>
+        <p class="topic-desc">/ventas, /compras, /inventario, /contabilidad — módulos ERP</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Cómo conecto Next.js directamente con SAP Business One Service Layer para crear documentos de marketing?')">
+        <div class="topic-icon"><i class="ti ti-plug" aria-hidden="true"></i></div>
+        <p class="topic-name">Integración SAP B1</p>
+        <p class="topic-desc">Service Layer REST, sessions, POST/PATCH de documentos</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Qué necesito saber sobre Node.js para el backend de mi ERP en Next.js? ¿Necesito aprender Node.js por separado?')">
+        <div class="topic-icon"><i class="ti ti-brand-nodejs" aria-hidden="true"></i></div>
+        <p class="topic-name">Node.js (mínimo necesario)</p>
+        <p class="topic-desc">Next.js ya incluye Node — enfócate en módulos, fs, env vars</p>
+      </div>
+      <div class="topic-card" onclick="sendPrompt('¿Cómo hago deploy de un ERP en Next.js? Explícame Vercel, Docker y otras opciones para producción.')">
+        <div class="topic-icon"><i class="ti ti-rocket" aria-hidden="true"></i></div>
+        <p class="topic-name">Deploy & producción</p>
+        <p class="topic-desc">Vercel, Docker, variables de entorno, HTTPS, seguridad</p>
+      </div>
+    </div>
+    <div class="erp-note">
+      <i class="ti ti-info-circle" aria-hidden="true"></i>
+      <strong> Proyecto final:</strong> Módulo de ventas completo: Socio de Negocios → Artículo → Factura de Ventas → Asiento Contable automático, con roles de usuario.
+    </div>
+  </div>
+
+  <!-- RESUMEN TOTAL -->
+  <div class="total-bar">
+    <div>
+      <p class="total-label" style="margin:0 0 2px">Duración total estimada</p>
+      <p class="total-val" style="margin:0">~17 semanas <span style="font-size:13px;font-weight:400;color:var(--color-text-secondary)">/ 4 meses</span></p>
+    </div>
+    <div class="progress-row">
+      <div class="prog-seg p1" style="flex:3"></div>
+      <div class="prog-seg p2" style="flex:3"></div>
+      <div class="prog-seg p3" style="flex:4"></div>
+      <div class="prog-seg p4" style="flex:3"></div>
+      <div class="prog-seg p5" style="flex:4"></div>
+    </div>
+    <button onclick="sendPrompt('Dame un plan de estudio semanal detallado para las 17 semanas de la ruta Next.js ERP ↗')" style="white-space:nowrap;font-size:12px">Plan semanal ↗</button>
+  </div>
+</div>