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/07-COMPONENTES-REUTILIZABLES.md

@@ -0,0 +1,92 @@
+# 🧩 COMPONENTES REUTILIZABLES
+
+## ¿Qué es esto?
+
+Una **librería de 28 componentes HTML** listos para copiar y pegar, construidos con Bootstrap 5.3.2 y alineados al design system de APU.
+
+Cada componente incluye:
+- ✅ HTML completo y funcional
+- ✅ Múltiples ejemplos de uso
+- ✅ Comentarios explicativos inline
+- ✅ Fixes para conflictos con WordPress
+
+---
+
+## 📂 Documentación Completa
+
+**Ir a:** [`../componentes-html-bootstrap/README.md`](../componentes-html-bootstrap/README.md)
+
+Ahí encontrarás:
+- Índice completo de los 28 componentes
+- Categorías organizadas (formularios, botones, layouts, navegación, etc.)
+- Instrucciones de uso y personalización
+- Dependencias requeridas (CDN links)
+- Fixes CSS para WordPress
+- Componentes que requieren JavaScript
+
+---
+
+## 📋 Categorías de Componentes
+
+### 🎨 Layout y Estructura
+Headers con gradiente, Cards (estándar y vista previa), Grids especializados
+
+### 📝 Formularios
+Switches, Color pickers, Text inputs, Textareas, Selects, Radio buttons, Checkboxes, Range sliders, File uploads
+
+### 🔘 Botones
+Botones simples, Button groups (Desktop/Mobile), Botones con dropdowns
+
+### 🎯 Componentes Visuales
+Badges, Links externos, Progress bars, Alerts, Spinners, Dividers, Tooltips
+
+### 📱 Navegación y Organización
+Tabs, Accordions, Sortable lists
+
+### 💻 Desarrollo y Utilidades
+Image previews, Code blocks
+
+---
+
+## 🚀 Cómo Usar
+
+1. Abre el README de componentes: [`../componentes-html-bootstrap/README.md`](../componentes-html-bootstrap/README.md)
+2. Encuentra el componente que necesitas
+3. Abre el archivo HTML correspondiente (ej: `05-COLOR-PICKER.html`)
+4. Copia el HTML del ejemplo que te sirva
+5. Pega en tu proyecto y personaliza IDs/textos
+
+---
+
+## 🎨 Principios de Uso
+
+### Colores
+- **Iconos:** Siempre orange (`#FF8600`)
+- **Títulos de card:** Siempre navy (`#1e3a5f`)
+- **Border-left cards:** Navy para estándar, Orange para previews
+- **Botones primarios:** Orange
+
+### Tamaños
+- **Form controls:** Usar `.form-control-sm` (tamaño compacto)
+- **Botones en header:** Usar `.btn-sm`
+- **Labels:** Clase `.small` + `fw-semibold`
+
+### Patrones
+- **Header de tab:** Gradiente navy + border-left orange + botón reset derecha
+- **Vista previa:** Card con border-left orange + título "Vista Previa en Tiempo Real"
+- **Iconos en labels:** `<i class="bi bi-[icon] me-1" style="color: #FF8600;"></i>`
+
+---
+
+## 📝 Notas Importantes
+
+1. Los componentes HTML son la **fuente de verdad** - siempre usa el código de ahí
+2. Todos los componentes están probados en WordPress
+3. No mezclar inline styles con clases de Bootstrap (solo usa inline styles para colores de marca)
+4. Siempre mantener accesibilidad (ARIA attributes incluidos)
+
+---
+
+## Volver al Índice
+
+[← Volver al README](README.md)