refactor: reorganizar openspec y planificacion con spec recaptcha

- renombrar openspec/ a _openspec/ (carpeta auxiliar) - mover specs de features a changes/ - crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura - migrar _planificacion/ con design-system y roi-theme-template - agregar especificacion recaptcha anti-spam (proposal, tasks, spec) - corregir rutas y referencias en todas las specs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-08 15:30:45 -06:00
parent 0d6b6db108
commit 0f6387ab46
58 changed files with 15364 additions and 1171 deletions
--- a/_planificacion/01-design-system/01-ESPECIFICACIONES-DEL-SISTEMA.md
+++ b/_planificacion/01-design-system/01-ESPECIFICACIONES-DEL-SISTEMA.md
@@ -0,0 +1,177 @@
+# ⚙️ ESPECIFICACIONES DEL SISTEMA
+
+## Requerimientos Generales
+
+- **Persistencia de Datos**: Archivos JSON (NO localStorage, NO base de datos)
+- **Vista Previa**: TODAS las pestañas DEBEN tener vista previa en tiempo real
+- **Panel Principal**: Existe un panel de administración que lista todas las pestañas disponibles
+- **Arquitectura**: Componentes independientes pero con diseño consistente
+- **Navegación**: Sistema de pestañas/tabs para alternar entre componentes
+
+---
+
+## Stack Tecnológico
+
+### CDN y Librerías
+
+```html
+<!-- Bootstrap 5.3.2 -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/Css/bootstrap.min.css" rel="stylesheet">
+
+<!-- Bootstrap Icons 1.11.3 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/Font/bootstrap-icons.min.css">
+
+<!-- Google Fonts: Poppins -->
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+<!-- CSS del proyecto -->
+<link rel="stylesheet" href="../../Css/style.css">
+```
+
+### JavaScript
+
+```html
+<!-- Bootstrap JS Bundle -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/Js/bootstrap.bundle.min.js"></script>
+```
+
+---
+
+## Estructura de Archivos
+
+**Arquitectura modular:** Cada componente tiene sus propios archivos separados (PHP, CSS, JS).
+
+```
+wp-content/themes/apus-theme/
+└── admin-panel/
+    └── Admin/
+        ├── Components/
+        │   ├── component-[name].php
+        │   ├── component-[name]-2.php
+        │   └── component-[name]-3.php
+        ├── Assets/
+        │   ├── Css/
+        │   │   ├── component-[name].css
+        │   │   ├── component-[name]-2.css
+        │   │   └── component-[name]-3.css
+        │   └── Js/
+        │       ├── component-[name].js
+        │       ├── component-[name]-2.js
+        │       └── component-[name]-3.js
+        └── Config/
+            ├── [name]-config.json
+            ├── [name]-2-config.json
+            └── [name]-3-config.json
+```
+
+**Ejemplo con un componente específico:**
+```
+admin-panel/Admin/
+├── Components/
+│   └── component-notification-bar.php
+├── Assets/
+│   ├── Css/
+│   │   └── component-notification-bar.css
+│   └── Js/
+│       └── component-notification-bar.js
+└── Config/
+    └── notification-bar-config.json
+```
+
+---
+
+## Convenciones de Nombrado
+
+### Archivos PHP (Componentes)
+
+- Patrón: `component-[nombre].php`
+- Ubicación: `admin-panel/Admin/Components/`
+- Ejemplo: `component-notification-bar.php`, `component-site-footer.php`
+
+### Archivos CSS
+
+- Patrón: `component-[nombre].css`
+- Ubicación: `admin-panel/Admin/Assets/Css/`
+- Mismo nombre base que el componente PHP correspondiente
+
+### Archivos JavaScript
+
+- Patrón: `component-[nombre].js`
+- Ubicación: `admin-panel/Admin/Assets/Js/`
+- Mismo nombre base que el componente PHP correspondiente
+
+### Archivos de Configuración JSON
+
+- Patrón: `[nombre]-config.json`
+- Ubicación: `admin-panel/Admin/Config/`
+- Ejemplo: `notification-bar-config.json`
+
+---
+
+## Dependencias del Proyecto
+
+| Dependencia | Versión | Propósito |
+|-------------|---------|-----------|
+| Bootstrap | 5.3.2 | Framework CSS y componentes UI |
+| Bootstrap Icons | 1.11.3 | Sistema de iconos |
+| Poppins Font | Google Fonts | Tipografía principal |
+| style.css | Custom | Estilos específicos del proyecto |
+
+---
+
+## Requerimientos del Navegador
+
+- **Navegadores modernos**: Chrome, Firefox, Safari, Edge (últimas 2 versiones)
+- **JavaScript**: Habilitado
+- **CSS Grid**: Soporte requerido
+- **Flexbox**: Soporte requerido
+- **CSS Custom Properties**: Soporte requerido
+
+---
+
+## Estructura de un Componente
+
+Cada componente debe tener:
+
+1. ✅ **Archivo PHP** (`component-[name].php`)
+   - Formulario de configuración
+   - Vista previa en tiempo real
+   - Integración con WordPress
+
+2. ✅ **Archivo CSS** (`component-[name].css`)
+   - Estilos específicos del componente admin
+   - Estilos para vista previa
+
+3. ✅ **Archivo JavaScript** (`component-[name].js`)
+   - Funcionalidad del componente
+   - Event listeners
+   - Funciones de actualización de preview
+   - Persistencia de configuración
+
+4. ✅ **Configuración JSON** (`[name]-config.json`)
+   - Valores por defecto
+   - Metadata del componente
+   - Timestamp de última modificación
+
+---
+
+## Reglas de Integración
+
+### ❌ NO Permitido
+
+- localStorage para persistencia (usar config.json)
+- Base de datos directa
+- Inline styles que sobreescriban CSS del front-end
+- Modificar HTML del front-end desde admin
+
+### ✅ Permitido
+
+- Archivos JSON para configuración
+- Inline styles SOLO en el admin panel (si no afecta preview)
+- CSS con `!important` SOLO si es necesario para override de WordPress
+
+---
+
+## Volver al Índice
+
+[← Volver al README](README.md)