Init: MVP de Gestión de Pagos (Stitch UI + SQLite/PHP)

docs/plan/00_PLAN.md

@@ -0,0 +1,48 @@
+# Plan de Desarrollo: Sistema de Gestión de Gastos y Pagos (rm-PAGOs)
+
+## Contexto y Arquitectura
+- **Frontend**: Diseños generados por Stitch (HTML, CSS Vainilla, JS). Diseño moderno "Quiet Wealth / Financial Sanctuary".
+- **Backend**: PHP 8.2 (procesamiento ligero, para máxima compatibilidad con el servidor de destino).
+- **Base de Datos**: SQLite3 (liviana, portátil y soportada nativamente por PHP, sin necesidad de un servidor de BD separado).
+- **Despliegue**: Servidor Proxmox LXC `srvv-nginx-rm` (Debian 12, NGINX 1.22.1, HTTPS activo).
+
+---
+
+## Fases de Ejecución
+
+### Fase 1: Estructuración y Maquetación (Frontend Static)
+**Objetivo:** Tener todo el diseño web unificado y navegable estáticamente.
+1. Crear la estructura de la aplicación DENTRO de la carpeta `pagos/` (que es la que se usará para el despliegue). `pagos/index.html`, `pagos/css/`, `pagos/api/`, `pagos/db/`.
+2. Exportar las pantallas generadas en Stitch (Dashboard, Nuevo Gasto, Historial) y acomodarlas como plantillas base (HTML).
+3. Configurar el archivo CSS general con las variables del sistema de diseño (Lumina Finance).
+4. Enlazar la navegación básica con Javascript o anclas entre pantallas.
+
+### Fase 2: Motor de Base de Datos y Backend (PHP/SQLite)
+**Objetivo:** Persistir la información y crear la lógica detrás de las pantallas.
+1. Diseñar el esquema de base de datos SQLite (tablas básicas como `movimientos` y `categorias`).
+2. Crear un archivo clase base en PHP (`db.php`) para conexión y operaciones CRUD.
+3. Crear los endpoints/controladores PHP (`api/movimientos.php`) que manejen operaciones GET, POST, PUT y DELETE.
+4. Ajustar los scripts de inicialización de la BD.
+
+### Fase 3: Integración Frontend ↔ Backend (Dinámica)
+**Objetivo:** Darle vida a las pantallas usando Javascript interactuando con PHP.
+1. **Nuevo Movimiento**: Enlazar el formulario "Agregar" usando Fetch/AJAX (Vanilla JS) para enviarle los datos al backend de forma transparente sin refrescar.
+2. **Dashboard**: 
+   - Calcular saldo dinámico, sumatorias de gastos del mes, etc., usando SQL.
+   - Enlazar librería de gráficos (por ejemplo Chart.js) para pintar la dona de categorías leyendo desde la base de datos.
+3. **Historial**: Renderizar la lista de últimos movimientos desde SQLite y añadir sistema de borrado.
+
+### Fase 4: Despliegue Configurado (Producción)
+**Objetivo:** Llevar el sistema al servidor `srvv-nginx-rm` para uso real.
+1. **Seguridad Básica:** Añadir una pantalla de Login o protección sencilla (ya que son datos financieros personales) utilizando las sesiones nativas de PHP o Basic Auth en NGINX.
+2. **Configuración del Servidor:** 
+   - Crear un subdirectorio o alias en NGINX (ejemplo `rmonla.duckdns.org/pagos`).
+   - Clonar o actualizar por deploy key en `/var/www/pagos`.
+   - Asegurar permisos de escritura a la carpeta `db/` para que PHP (usuario `www-data`) pueda modifciar el archivo `.sqlite`.
+3. Pruebas End-to-End directas desde el teléfono.
+
+---
+
+## Roadmap de Próximos Pasos (De Inmediato)
+1. Iniciar con la **Fase 1**, configurando estructura base (`index.html`, `style.css`) volcando el HTML de Stitch en un index.
+2. Crear un script rápido de inicialización de SQLite.