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>

_planificacion/01-design-system/README.md

@@ -0,0 +1,136 @@
+# 🎨 ADMIN COMPONENTS - DESIGN SYSTEM (MODULARIZADO)
+
+**Manual de Diseño para Componentes de Administración**
+Versión 1.0 | APU México
+
+---
+
+## 📑 ÍNDICE DE DOCUMENTACIÓN
+
+Este design system ha sido modularizado en archivos independientes para facilitar su consulta y mantenimiento.
+
+### 📐 FUNDAMENTOS DEL SISTEMA
+
+- [**01-ESPECIFICACIONES-DEL-SISTEMA.md**](01-ESPECIFICACIONES-DEL-SISTEMA.md)
+  - Requerimientos generales
+  - Stack tecnológico
+  - Estructura de archivos
+
+- [**02-FILOSOFIA-DE-DISENO.md**](02-FILOSOFIA-DE-DISENO.md)
+  - Principios clave
+  - Características comunes
+
+### 🎨 SISTEMA DE DISEÑO VISUAL
+
+- [**03-PALETA-DE-COLORES.md**](03-PALETA-DE-COLORES.md)
+  - Colores principales (Navy, Orange, Neutral)
+  - Uso de colores por elemento
+
+- [**04-TIPOGRAFIA.md**](04-TIPOGRAFIA.md)
+  - Font stack (Poppins)
+  - Pesos y tamaños
+  - Jerarquía visual
+
+- [**05-SISTEMA-GRID-ESPACIADO.md**](05-SISTEMA-GRID-ESPACIADO.md)
+  - Grid de Bootstrap
+  - Breakpoints responsive
+  - Sistema de espaciado (margin/padding)
+
+### 🏗️ ESTRUCTURA Y COMPONENTES
+
+- [**06-ESTRUCTURA-LAYOUT.md**](06-ESTRUCTURA-LAYOUT.md)
+  - Container principal
+  - Header del tab (obligatorio)
+  - Sistema de grid 2 columnas
+
+- [**07-COMPONENTES-REUTILIZABLES.md**](07-COMPONENTES-REUTILIZABLES.md)
+  - Botones (primario, secundario, reset)
+  - Inputs (text, color, textarea, select)
+  - Cards (estándar, vista previa)
+
+- [**08-PATRONES-FORMULARIOS.md**](08-PATRONES-FORMULARIOS.md)
+  - Form switches
+  - Color pickers
+  - Text inputs con contador
+  - Badges y links de ayuda
+
+### 🔄 FUNCIONALIDAD Y COMPORTAMIENTO
+
+- [**09-VISTA-PREVIA-TIEMPO-REAL.md**](09-VISTA-PREVIA-TIEMPO-REAL.md)
+  - Estructura HTML del preview
+  - Reglas críticas
+  - CSS para vista previa
+
+- [**10-RESPONSIVE-DESIGN.md**](10-RESPONSIVE-DESIGN.md)
+  - Breakpoints
+  - Patrones responsive
+  - Media queries
+
+- [**11-JAVASCRIPT-PATTERNS.md**](11-JAVASCRIPT-PATTERNS.md)
+  - Inicialización
+  - Event listeners
+  - updatePreview()
+  - Guardar/cargar configuración
+
+- [**12-PERSISTENCIA-JSON.md**](12-PERSISTENCIA-JSON.md)
+  - Estructura del config.json
+  - Funciones de persistencia
+  - Sistema de notificaciones
+
+### 🎛️ PANEL Y ADMINISTRACIÓN
+
+- [**13-PANEL-ADMINISTRACION.md**](13-PANEL-ADMINISTRACION.md)
+  - Estructura del panel principal
+  - Grid de componentes
+  - Patrón para nuevos componentes
+
+- [**14-CONFLICTOS-WORDPRESS.md**](14-CONFLICTOS-WORDPRESS.md)
+  - Conflicto con .card
+  - Conflicto con form switches
+  - Conflicto con alineación vertical
+  - Checklist anti-conflictos
+
+### 📚 RECURSOS Y EJEMPLOS
+
+- [**15-EJEMPLOS-COMPLETOS.md**](15-EJEMPLOS-COMPLETOS.md)
+  - Ejemplos de campos completos
+  - Template básico
+  - Checklist de implementación
+  - Troubleshooting
+
+### 🎨 TOKENS DE DISEÑO
+
+- [**design-tokens-apus-admin.scss**](design-tokens-apus-admin.scss)
+  - Variables SCSS para colores
+  - Espaciado
+  - Tipografía
+  - Sombras y bordes
+
+---
+
+## 🚀 QUICK START
+
+1. **Lee primero:** [01-ESPECIFICACIONES-DEL-SISTEMA.md](01-ESPECIFICACIONES-DEL-SISTEMA.md)
+2. **Consulta el diseño:** [03-PALETA-DE-COLORES.md](03-PALETA-DE-COLORES.md) y [04-TIPOGRAFIA.md](04-TIPOGRAFIA.md)
+3. **Usa los componentes:** [07-COMPONENTES-REUTILIZABLES.md](07-COMPONENTES-REUTILIZABLES.md)
+4. **Implementa JavaScript:** [11-JAVASCRIPT-PATTERNS.md](11-JAVASCRIPT-PATTERNS.md)
+5. **Resuelve conflictos WP:** [14-CONFLICTOS-WORDPRESS.md](14-CONFLICTOS-WORDPRESS.md)
+
+---
+
+## 📝 NOTAS IMPORTANTES
+
+1. ✅ **Usar la librería de componentes HTML como referencia** (`../componentes-html-bootstrap/`)
+2. ❌ **NUNCA modificar el HTML del front-end desde el admin panel**
+3. ✅ **La vista previa debe ser 100% idéntica al componente real**
+4. ✅ **Guardar configuración en archivos JSON (NO localStorage)**
+5. ✅ **Responsive es obligatorio, no opcional**
+6. ✅ **Todos los iconos deben ser orange (#FF8600)**
+7. ✅ **Todos los títulos de card deben ser navy (#1e3a5f)**
+
+---
+
+**Documento creado:** 2025
+**Versión:** 1.0
+**Proyecto:** APU México - Sistema de Administración
+**Autor:** Design System Team