` de Bootstrap dentro del admin de WordPress, WordPress aplica automáticamente `max-width: 520px`, limitando el ancho de tus cards.
+
+---
+
+### ❌ SOLUCIÓN INCORRECTA
+
+**NO cambies `.card` por `.apus-card` o cualquier otra clase custom.**
+
+**Razones:**
+
+1. Bootstrap `.card` es un **sistema completo** con múltiples clases relacionadas:
+ - `.card-body`
+ - `.card-header`
+ - `.card-footer`
+ - `.card-title`
+ - `.card-text`
+ - `.card-img-top`
+ - Y muchas más...
+
+2. Si cambias `.card` a `.apus-card`, pierdes **TODOS** los estilos de Bootstrap
+
+3. Tendrías que recrear manualmente TODO el sistema de cards
+
+---
+
+### ✅ SOLUCIÓN CORRECTA
+
+**Opción 1: Wrapper con Mayor Especificidad (RECOMENDADA)**
+
+Agregar una clase wrapper en el `` y sobreescribir el CSS de WordPress:
+
+```html
+
+
+
+```
+
+**CSS:**
+```css
+/* Sobreescribir el max-width de WordPress */
+.apus-admin .card {
+ max-width: none !important;
+}
+
+/* Asegurar que funcione en todos los contextos */
+body.apus-admin .card,
+#apusAdminPanel .card {
+ max-width: none !important;
+}
+```
+
+**Opción 2: Inline Style (Rápido)**
+
+Si solo tienes unos pocos cards:
+
+```html
+
+```
+
+**Opción 3: CSS Global**
+
+```html
+
+```
+
+---
+
+## Conflicto 2: Form Switches (CRÍTICO)
+
+### El Problema
+
+Los switches de Bootstrap muestran **dos círculos** en lugar de un círculo que se desliza.
+
+### Causa Raíz
+
+1. **Pseudo-elemento `::before` de WordPress**: Muestra un SVG de checkmark (✓)
+2. **`background-image` de Bootstrap**: Muestra el círculo del switch
+3. **`background-size` incorrecto**: WordPress usa `auto` en lugar de `contain`
+
+**Resultado**: Dos elementos visuales superpuestos en el switch.
+
+---
+
+### ✅ Solución Definitiva
+
+```css
+/* Eliminar completamente pseudo-elementos de WordPress */
+body .form-switch .form-check-input[type="checkbox"]::before,
+body .form-switch .form-check-input[type="checkbox"]::after,
+.apus-admin .form-switch .form-check-input[type="checkbox"]::before,
+.apus-admin .form-switch .form-check-input[type="checkbox"]::after {
+ content: none !important;
+ display: none !important;
+ background-image: none !important;
+ width: 0 !important;
+ height: 0 !important;
+}
+
+/* Configurar correctamente el background-size y repeat */
+body .form-switch .form-check-input[type="checkbox"],
+.apus-admin .form-switch .form-check-input[type="checkbox"] {
+ background-size: contain !important;
+ background-repeat: no-repeat !important;
+ background-position: left center !important;
+}
+
+body .form-switch .form-check-input[type="checkbox"]:checked,
+.apus-admin .form-switch .form-check-input[type="checkbox"]:checked {
+ background-size: contain !important;
+ background-repeat: no-repeat !important;
+ background-position: right center !important;
+}
+```
+
+**Qué hace cada parte:**
+
+1. **Elimina `::before` y `::after`**: Anula completamente los pseudo-elementos de WordPress
+2. **`content: none !important`**: Elimina cualquier contenido SVG de WordPress
+3. **`display: none !important`**: Oculta el pseudo-elemento aunque tenga contenido
+4. **`background-size: contain`**: Asegura que el círculo de Bootstrap se escale correctamente
+5. **`background-repeat: no-repeat`**: Previene que el círculo se duplique
+6. **`background-position`**: Controla la posición del círculo (left cuando OFF, right cuando ON)
+
+---
+
+## Conflicto 3: Alineación Vertical de Switches (CRÍTICO)
+
+### El Problema
+
+Los labels de los switches aparecen **desalineados verticalmente** con los switches, con una diferencia de aproximadamente **10.5px**.
+
+### Causa Raíz
+
+1. WordPress aplica `label { vertical-align: middle; }` globalmente
+2. Bootstrap usa `display: block` + `float: left` en `.form-check`
+3. Conflicto de layout entre elementos flotantes y `vertical-align`
+
+---
+
+### ✅ Solución Definitiva
+
+```css
+/* Fix alineación vertical de labels en switches */
+#topBarTab .form-check.form-switch {
+ display: flex !important;
+ align-items: center !important;
+}
+
+#topBarTab .form-switch .form-check-input {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+}
+
+#topBarTab .form-switch .form-check-label,
+.form-switch .form-check-label.small {
+ line-height: 16px !important;
+ padding-top: 0 !important;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+}
+```
+
+**Qué hace cada parte:**
+
+1. **`display: flex`**: Convierte el contenedor en flexbox
+2. **`align-items: center`**: Alinea todos los hijos verticalmente por su centro
+3. **`line-height: 16px`**: Coincide con la altura del switch para alineación perfecta
+4. **Márgenes en 0**: Elimina espacios verticales no deseados
+
+**Resultado**: Diferencia de **0px** entre el centro del switch y el centro del label.
+
+---
+
+## Conflicto 4: `.button` (Raro)
+
+WordPress también estiliza `.button`. **Solución**: Siempre usa `.btn` de Bootstrap:
+
+```html
+
+
+
+
+
+```
+
+---
+
+## Conflicto 5: `.row` (Raro)
+
+Algunos temas de WordPress pueden estilizar `.row`. Si tienes problemas:
+
+```css
+.apus-admin .row {
+ /* Reset de cualquier estilo de WordPress */
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: calc(var(--bs-gutter-x) * -0.5);
+ margin-left: calc(var(--bs-gutter-x) * -0.5);
+}
+```
+
+---
+
+## Conflicto 6: Colores de Links
+
+WordPress usa colores específicos. Asegúrate de que tu CSS tenga mayor especificidad:
+
+```css
+/* WordPress puede tener reglas globales */
+a { color: #0073aa; }
+
+/* Tu CSS debe ser más específico */
+.apus-admin a { color: #FF8600; }
+.apus-admin .card a { color: #FF8600; }
+```
+
+---
+
+## Template Actualizado con Todos los Fixes
+
+```html
+
+
+
+
+
+
Admin: [Component Name]
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Checklist Anti-Conflictos WordPress
+
+Antes de implementar un componente, verificar:
+
+- [ ] Agregar clase `.apus-admin` al ``
+- [ ] **CRÍTICO**: Sobreescribir `.card { max-width: none !important; }`
+- [ ] **CRÍTICO**: Eliminar pseudo-elementos `::before` y `::after` de switches
+- [ ] **CRÍTICO**: Configurar `background-size: contain` en switches
+- [ ] **CRÍTICO**: Configurar `background-repeat: no-repeat` en switches
+- [ ] **CRÍTICO**: Configurar `background-position: left/right center` en switches
+- [ ] **CRÍTICO**: Implementar `display: flex` + `align-items: center` en `.form-check.form-switch`
+- [ ] **CRÍTICO**: Configurar `line-height: 16px` en labels de switches
+- [ ] Usar `.btn` en lugar de `.button`
+- [ ] Verificar que colores custom tengan `!important` si es necesario
+- [ ] Usar DevTools para verificar que estilos de WordPress estén overridden
+- [ ] **Probar switches**: deben mostrar UN solo círculo que se desliza
+- [ ] **Probar alineación**: labels deben estar perfectamente alineados con switches (0px diferencia)
+- [ ] Probar en un admin de WordPress real (si aplica)
+
+---
+
+## Verificación en DevTools
+
+### Verificar Fix de Cards
+
+```css
+/* ✅ CORRECTO - Deberías ver: */
+.apus-admin .card {
+ max-width: none !important; /* ✅ Tu CSS */
+}
+
+/* Y esto debería estar tachado/overridden: */
+.card {
+ max-width: 520px; /* ❌ WordPress (overridden) */
+}
+```
+
+### Verificar Fix de Switches
+
+```css
+/* ✅ CORRECTO - Deberías ver: */
+.form-switch .form-check-input[type="checkbox"]::before {
+ content: none !important; /* ✅ Sin checkmark */
+ display: none !important; /* ✅ Oculto */
+}
+
+.form-switch .form-check-input[type="checkbox"] {
+ background-size: contain !important; /* ✅ Círculo escalado */
+ background-repeat: no-repeat !important; /* ✅ Sin duplicar */
+}
+```
+
+---
+
+## Volver al Índice
+
+[← Volver al README](README.md)
diff --git a/_planificacion/01-design-system/15-EJEMPLOS-COMPLETOS.md b/_planificacion/01-design-system/15-EJEMPLOS-COMPLETOS.md
new file mode 100644
index 00000000..23fce22d
--- /dev/null
+++ b/_planificacion/01-design-system/15-EJEMPLOS-COMPLETOS.md
@@ -0,0 +1,420 @@
+# 📦 EJEMPLOS COMPLETOS Y RECURSOS
+
+## Ejemplo 1: Campo de Color con Valor Hex
+
+```html
+
+
+
+ #0E2337
+
+
+
+```
+
+---
+
+## Ejemplo 2: Campo de Texto con Icono de Bootstrap
+
+```html
+
+```
+
+---
+
+## Ejemplo 3: Textarea con Contador y Progress Bar
+
+```html
+
+
+
+
+
+
+
+```
+
+---
+
+## Template Básico Completo
+
+```html
+
+
+
+
+
+
Admin: [Component Name]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Configuración de [Component]
+
+
+ [Descripción del componente]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sección 1
+
+
+
+
+
+
+
+
+
+
+
+
+ Sección 2
+
+
+
+
+
+
+
+
+
+
+
+
+ Vista Previa en Tiempo Real
+
+
+
+
+
+
+
+
+
+ Los cambios se reflejan en tiempo real
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Checklist de Implementación
+
+### Antes de Empezar
+
+- [ ] Leer este manual completo
+- [ ] Revisar la librería de componentes HTML (`../componentes-html-bootstrap/`)
+- [ ] Identificar qué campos necesita el componente
+- [ ] Determinar si necesita vista previa en tiempo real
+
+### Estructura HTML
+
+- [ ] Crear el header del tab con gradiente navy + border orange
+- [ ] Incluir botón "Restaurar valores por defecto"
+- [ ] Organizar campos en grid de 2 columnas (`col-lg-6`)
+- [ ] Agrupar campos relacionados en cards con border-left navy
+- [ ] Agregar card de vista previa con border-left orange
+
+### Formularios
+
+- [ ] Todos los labels tienen icono orange
+- [ ] Labels importantes tienen `fw-semibold`
+- [ ] Campos requeridos tienen `
*`
+- [ ] Color pickers muestran valor hex debajo
+- [ ] Textareas tienen contador de caracteres + progress bar
+- [ ] Selects usan `.form-select-sm`
+- [ ] Inputs usan `.form-control-sm`
+- [ ] Switches tienen icono + strong en label
+
+### Vista Previa
+
+- [ ] HTML de preview es IDÉNTICO al del front-end
+- [ ] Se usa clase real del componente (ej: `.top-notification-bar`)
+- [ ] NO hay inline styles que sobreescriban el CSS real
+- [ ] Se cargan los mismos archivos CSS que el front-end
+- [ ] Botones Desktop/Mobile funcionales
+
+### JavaScript
+
+- [ ] Función `updatePreview()` implementada
+- [ ] Función `saveConfig()` guarda en localStorage/JSON
+- [ ] Función `loadConfig()` carga al iniciar
+- [ ] Función `resetToDefaults()` restaura valores
+- [ ] Event listeners en todos los campos
+- [ ] Color pickers actualizan el valor hex
+- [ ] Textareas actualizan contador + progress bar
+
+### CSS
+
+- [ ] Fix WordPress `.card { max-width: none !important; }`
+- [ ] Fix WordPress switches (pseudo-elementos)
+- [ ] Fix alineación vertical switches
+- [ ] Responsive breakpoints configurados
+
+---
+
+## Troubleshooting
+
+### La vista previa no se ve igual al front-end
+
+**Causa:** Inline styles sobreescribiendo el CSS real
+
+**Solución:**
+1. Verificar que NO haya inline styles en el HTML del preview
+2. Verificar que se carga `../../Css/style.css`
+3. Usar solo la clase del componente real
+4. Si es necesario, agregar CSS con `!important` SOLO para el border
+
+### Los colores no coinciden
+
+**Causa:** No se están usando los valores correctos
+
+**Solución:**
+1. Usar valores hex exactos: `#0E2337`, `#FF8600`, etc.
+2. Verificar que `style.css` define las variables `:root`
+
+### El contador de caracteres no funciona
+
+**Causa:** Event listener no conectado
+
+**Solución:**
+```javascript
+textarea.addEventListener('input', function() {
+ counter.textContent = this.value.length;
+});
+```
+
+### El responsive no funciona
+
+**Causa:** Falta el viewport meta tag
+
+**Solución:**
+```html
+
+```
+
+---
+
+## Recursos
+
+### Bootstrap 5.3.2
+- Documentación: https://getbootstrap.com/docs/5.3/
+- Components: https://getbootstrap.com/docs/5.3/components/
+
+### Bootstrap Icons
+- Catálogo: https://icons.getbootstrap.com/
+- Búsqueda: Usar el buscador para encontrar iconos
+
+### Google Fonts - Poppins
+- Pesos usados: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold)
+
+---
+
+## Volver al Índice
+
+[← Volver al README](README.md)
diff --git a/_planificacion/01-design-system/README.md b/_planificacion/01-design-system/README.md
new file mode 100644
index 00000000..bafd7402
--- /dev/null
+++ b/_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
diff --git a/_planificacion/01-design-system/design-tokens-apus-admin.scss b/_planificacion/01-design-system/design-tokens-apus-admin.scss
new file mode 100644
index 00000000..67a57d4d
--- /dev/null
+++ b/_planificacion/01-design-system/design-tokens-apus-admin.scss
@@ -0,0 +1,358 @@
+// =============================================================================
+// APUS ADMIN PANEL - DESIGN TOKENS
+// =============================================================================
+// Este archivo contiene todas las variables de diseño del sistema de
+// administración de APU México.
+//
+// Uso:
+// @import 'design-tokens-apus-admin';
+// =============================================================================
+
+// =============================================================================
+// COLORES
+// =============================================================================
+
+// Navy Brand Colors
+// -----------------------------------------------------------------------------
+$color-navy-dark: #0E2337; // Fondo principal, headers
+$color-navy-primary: #1e3a5f; // Títulos, bordes importantes
+$color-navy-light: #2c5282; // Variaciones secundarias
+
+// Orange Accent Colors
+// -----------------------------------------------------------------------------
+$color-orange-primary: #FF8600; // Acción primaria, iconos destacados
+$color-orange-hover: #FF6B35; // Hover states
+$color-orange-light: #FFB800; // Badges, alerts suaves
+
+// Neutral Colors
+// -----------------------------------------------------------------------------
+$color-neutral-50: #f8f9fa; // Fondo general del body
+$color-neutral-100: #e9ecef; // Bordes, separadores
+$color-neutral-200: #dee2e6; // Bordes sutiles
+$color-neutral-600: #495057; // Texto principal
+$color-neutral-700: #6c757d; // Texto secundario
+$color-neutral-900: #212529; // Texto muy oscuro
+
+// Semantic Colors
+// -----------------------------------------------------------------------------
+$color-success: #28a745; // Acciones exitosas
+$color-danger: #dc3545; // Errores, acciones destructivas
+$color-warning: #ffc107; // Advertencias
+$color-info: #17a2b8; // Información
+
+// Background Colors
+// -----------------------------------------------------------------------------
+$bg-body: $color-neutral-50;
+$bg-card: #ffffff;
+$bg-header: linear-gradient(135deg, $color-navy-dark 0%, $color-navy-primary 100%);
+
+// =============================================================================
+// TIPOGRAFÍA
+// =============================================================================
+
+// Font Family
+// -----------------------------------------------------------------------------
+$font-family-base: 'Poppins', sans-serif;
+
+// Font Sizes
+// -----------------------------------------------------------------------------
+$font-size-base: 1rem; // 16px
+$font-size-sm: 0.875rem; // 14px (labels, small text)
+$font-size-xs: 0.75rem; // 12px (hints, badges)
+
+$font-size-h1: 2rem; // 32px
+$font-size-h2: 1.75rem; // 28px
+$font-size-h3: 1.5rem; // 24px (título principal del tab)
+$font-size-h4: 1.25rem; // 20px (subtítulos grandes)
+$font-size-h5: 1rem; // 16px (títulos de cards)
+$font-size-h6: 0.875rem; // 14px
+
+// Font Weights
+// -----------------------------------------------------------------------------
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+// Line Heights
+// -----------------------------------------------------------------------------
+$line-height-base: 1.5;
+$line-height-tight: 1.2; // Para títulos
+$line-height-relaxed: 1.6;
+
+// =============================================================================
+// ESPACIADO
+// =============================================================================
+
+// Spacing Scale (rem)
+// -----------------------------------------------------------------------------
+$spacing-0: 0;
+$spacing-1: 0.25rem; // 4px
+$spacing-2: 0.5rem; // 8px
+$spacing-3: 1rem; // 16px
+$spacing-4: 1.5rem; // 24px
+$spacing-5: 3rem; // 48px
+
+// Specific Usage
+// -----------------------------------------------------------------------------
+$spacing-field-margin: $spacing-2; // mb-2 en campos
+$spacing-card-margin: $spacing-3; // mb-3 en cards
+$spacing-header-margin: $spacing-4; // mb-4 en headers
+$spacing-icon-margin: $spacing-2; // me-2 en iconos grandes
+$spacing-icon-small-margin: $spacing-1; // me-1 en iconos pequeños
+$spacing-card-padding: $spacing-3; // p-3 en card-body
+$spacing-container-padding: $spacing-4; // py-4 en container
+
+// =============================================================================
+// LAYOUT
+// =============================================================================
+
+// Container
+// -----------------------------------------------------------------------------
+$container-max-width: 1400px;
+$container-padding-x: 0.75rem;
+
+// Grid
+// -----------------------------------------------------------------------------
+$grid-gutter-width: 1.5rem;
+$grid-gutter-sm: 1rem; // g-3
+$grid-gutter-xs: 0.5rem; // g-2
+
+// Breakpoints
+// -----------------------------------------------------------------------------
+$breakpoint-xs: 0;
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px; // Punto de quiebre principal
+$breakpoint-xl: 1200px;
+$breakpoint-xxl: 1400px;
+
+// =============================================================================
+// BORDES
+// =============================================================================
+
+// Border Width
+// -----------------------------------------------------------------------------
+$border-width-thin: 1px;
+$border-width-thick: 4px;
+
+// Border Radius
+// -----------------------------------------------------------------------------
+$border-radius-sm: 0.25rem; // 4px
+$border-radius: 0.375rem; // 6px (default Bootstrap)
+$border-radius-lg: 0.5rem; // 8px
+
+// Border Colors
+// -----------------------------------------------------------------------------
+$border-color: $color-neutral-200;
+$border-color-card: $color-navy-primary;
+$border-color-preview: $color-orange-primary;
+
+// =============================================================================
+// SOMBRAS
+// =============================================================================
+
+$shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+$shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+$shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+
+// =============================================================================
+// COMPONENTES
+// =============================================================================
+
+// Cards
+// -----------------------------------------------------------------------------
+$card-border-width: 0;
+$card-border-left-width: $border-width-thick;
+$card-border-radius: $border-radius;
+$card-shadow: $shadow-sm;
+$card-padding: $spacing-card-padding;
+$card-margin: $spacing-card-margin;
+
+// Buttons
+// -----------------------------------------------------------------------------
+$btn-border-radius: $border-radius;
+$btn-padding-y: 0.375rem;
+$btn-padding-x: 0.75rem;
+$btn-padding-y-sm: 0.25rem;
+$btn-padding-x-sm: 0.5rem;
+
+// Inputs
+// -----------------------------------------------------------------------------
+$input-border-radius: $border-radius;
+$input-border-color: $color-neutral-300;
+$input-focus-border-color: $color-orange-primary;
+$input-padding-y: 0.375rem;
+$input-padding-x: 0.75rem;
+$input-padding-y-sm: 0.25rem;
+$input-padding-x-sm: 0.5rem;
+
+// Badges
+// -----------------------------------------------------------------------------
+$badge-font-size: 0.65rem;
+$badge-padding-y: 0.25rem;
+$badge-padding-x: 0.5rem;
+
+// Progress Bar
+// -----------------------------------------------------------------------------
+$progress-height: 3px;
+$progress-bar-bg: $color-orange-primary;
+$progress-bar-warning: $color-warning;
+$progress-bar-danger: $color-danger;
+
+// =============================================================================
+// TRANSICIONES
+// =============================================================================
+
+$transition-base: all 0.3s ease-in-out;
+$transition-fast: all 0.15s ease-in-out;
+$transition-slow: all 0.5s ease-in-out;
+
+// =============================================================================
+// Z-INDEX
+// =============================================================================
+
+$z-index-notification: 9999;
+$z-index-modal: 1050;
+$z-index-dropdown: 1000;
+$z-index-sticky: 1020;
+
+// =============================================================================
+// MIXINS
+// =============================================================================
+
+// Media Query Mixins
+// -----------------------------------------------------------------------------
+@mixin media-xs {
+ @media (max-width: #{$breakpoint-sm - 1px}) {
+ @content;
+ }
+}
+
+@mixin media-sm {
+ @media (min-width: $breakpoint-sm) {
+ @content;
+ }
+}
+
+@mixin media-md {
+ @media (min-width: $breakpoint-md) {
+ @content;
+ }
+}
+
+@mixin media-lg {
+ @media (min-width: $breakpoint-lg) {
+ @content;
+ }
+}
+
+@mixin media-xl {
+ @media (min-width: $breakpoint-xl) {
+ @content;
+ }
+}
+
+@mixin media-xxl {
+ @media (min-width: $breakpoint-xxl) {
+ @content;
+ }
+}
+
+// Component Mixins
+// -----------------------------------------------------------------------------
+@mixin card-base {
+ border: $card-border-width;
+ border-radius: $card-border-radius;
+ box-shadow: $card-shadow;
+ background-color: $bg-card;
+ margin-bottom: $card-margin;
+}
+
+@mixin card-border-left($color: $border-color-card) {
+ border-left: $border-width-thick solid $color;
+}
+
+@mixin text-truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+@mixin center-flex {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+// =============================================================================
+// UTILITY CLASSES (Opcional - si no usas Bootstrap utilities)
+// =============================================================================
+
+// Solo descomentar si necesitas clases que no están en Bootstrap
+
+/*
+.text-navy {
+ color: $color-navy-primary;
+}
+
+.text-orange {
+ color: $color-orange-primary;
+}
+
+.bg-navy {
+ background-color: $color-navy-primary;
+}
+
+.bg-orange {
+ background-color: $color-orange-primary;
+}
+
+.border-navy {
+ border-color: $color-navy-primary !important;
+}
+
+.border-orange {
+ border-color: $color-orange-primary !important;
+}
+*/
+
+// =============================================================================
+// EJEMPLO DE USO
+// =============================================================================
+
+/*
+// En tu archivo SCSS:
+@import 'design-tokens-apus-admin';
+
+.custom-header {
+ background: $bg-header;
+ color: white;
+ padding: $spacing-card-padding;
+ border-left: $border-width-thick solid $color-orange-primary;
+
+ h1 {
+ font-size: $font-size-h3;
+ font-weight: $font-weight-bold;
+ margin-bottom: $spacing-1;
+ }
+}
+
+.custom-card {
+ @include card-base;
+ @include card-border-left($color-navy-primary);
+
+ &.preview {
+ @include card-border-left($color-orange-primary);
+ }
+}
+
+.responsive-text {
+ font-size: $font-size-sm;
+
+ @include media-lg {
+ font-size: $font-size-base;
+ }
+}
+*/
diff --git a/_planificacion/analisis-spam-formularios.md b/_planificacion/analisis-spam-formularios.md
new file mode 100644
index 00000000..b18d6970
--- /dev/null
+++ b/_planificacion/analisis-spam-formularios.md
@@ -0,0 +1,341 @@
+# Análisis de Spam en Formularios - ROI Theme
+
+**Fecha de análisis:** 2026-01-08
+**Problema:** Recepción de spam con datos aleatorios en formularios
+
+## Características del Spam Detectado
+
+- **Nombres:** Cadenas aleatorias (ej: `kxUcwkDPHRAnUbdRWnDx`, `SOTbwKzTcZhJfTRBYSTV`)
+- **WhatsApp:** Cadenas aleatorias en lugar de números
+- **Emails:** Emails reales (posiblemente robados de bases de datos)
+- **Patrón:** Bots automatizados que llenan campos sin validación
+- **Fuente identificada:** `newsletter-footer`
+
+## Módulos de Formularios Identificados
+
+### Formulario 1: Newsletter Footer
+- **Handler**: `Public/Footer/Infrastructure/Api/WordPress/NewsletterAjaxHandler.php`
+- **Renderer**: `Public/Footer/Infrastructure/Ui/FooterRenderer.php`
+- **Acción AJAX**: `roi_newsletter_subscribe`
+- **Source en payload**: `newsletter-footer`
+
+### Formulario 2: Contact Form (Sección + Modal)
+- **Handler**: `Public/ContactForm/Infrastructure/Api/WordPress/ContactFormAjaxHandler.php`
+- **Renderer**: `Public/ContactForm/Infrastructure/Ui/ContactFormRenderer.php`
+- **Acción AJAX**: `roi_contact_form_submit`
+- **Source en payload**: `contact-form`
+
+---
+
+## Hallazgos Durante la Revisión
+
+### Archivos Identificados
+
+**Schemas:**
+- `Schemas/contact-form.json`
+
+**JavaScript (Frontend):**
+- `Assets/Js/footer-contact.js`
+- `Assets/Js/modal-contact.js`
+
+**PHP Backend - Newsletter (FUENTE DEL SPAM):**
+- `Public/Footer/Infrastructure/Api/WordPress/NewsletterAjaxHandler.php`
+- `Public/Footer/Infrastructure/Ui/FooterRenderer.php`
+
+---
+
+## Análisis del Formulario Newsletter (PRINCIPAL AFECTADO)
+
+### Ubicación
+- **Handler AJAX**: `Public/Footer/Infrastructure/Api/WordPress/NewsletterAjaxHandler.php`
+- **Renderer HTML/JS**: `Public/Footer/Infrastructure/Ui/FooterRenderer.php`
+- **Fuente en payload**: `newsletter-footer` ✓ (coincide con spam reportado)
+
+### Medidas de Seguridad EXISTENTES ✅
+
+| Medida | Estado | Archivo | Línea |
+|--------|--------|---------|-------|
+| Nonce WordPress | ✅ Implementado | NewsletterAjaxHandler.php | 46 |
+| Rate Limiting (60s por IP) | ✅ Implementado | NewsletterAjaxHandler.php | 54-59 |
+| Sanitización de inputs | ✅ Implementado | NewsletterAjaxHandler.php | 62-64 |
+| Validación de email | ✅ Implementado | NewsletterAjaxHandler.php | 66 |
+| Webhook URL oculta | ✅ Implementado | Nunca expuesta al cliente |
+
+### VULNERABILIDADES CRÍTICAS ❌
+
+| Vulnerabilidad | Impacto | Prioridad |
+|----------------|---------|-----------|
+| **NO hay honeypot** | Bots pasan sin detección | 🔴 ALTA |
+| **NO hay CAPTCHA** | Sin verificación humana | 🔴 ALTA |
+| **NO hay validación de nombre** | Acepta `kxUcwkDPHRAnUbdRWnDx` | 🔴 ALTA |
+| **NO hay validación de WhatsApp** | Acepta `OGkrLENXqiQAaIYvCV` | 🔴 ALTA |
+| **Rate limiting débil** | 60s es poco, bots rotan IPs | 🟡 MEDIA |
+| **NO hay tiempo mínimo de envío** | Bots envían instantáneamente | 🟡 MEDIA |
+
+### Campos del Formulario (FooterRenderer.php:336-343)
+
+```html
+
+```
+
+### Patrón del Spam Detectado
+
+Los datos de spam muestran:
+- **Nombres**: Cadenas alfanuméricas aleatorias (20+ caracteres)
+- **WhatsApp**: Cadenas alfanuméricas aleatorias (NO son números)
+- **Emails**: Emails reales (posiblemente de bases de datos filtradas)
+
+Esto indica **bots automatizados** que:
+1. Bypassean la validación HTML5 (trivial)
+2. Ignoran el rate limiting rotando IPs
+3. Generan valores aleatorios para campos de texto
+4. Usan emails reales para parecer legítimos
+
+---
+
+## Análisis del Formulario Contact Form (SEGUNDO FORMULARIO)
+
+### Ubicación
+- **Handler AJAX**: `Public/ContactForm/Infrastructure/Api/WordPress/ContactFormAjaxHandler.php`
+- **Renderer**: `Public/ContactForm/Infrastructure/Ui/ContactFormRenderer.php`
+- **Schema**: `Schemas/contact-form.json`
+- **Fuente en payload**: `contact-form`
+
+### Estado: ✅ ACTIVO (Clean Architecture)
+
+Este formulario está implementado correctamente con Clean Architecture:
+- Renderer genera HTML/CSS/JS dinámicamente
+- Handler AJAX procesa envíos server-side
+- Webhook URL guardada en BD (nunca expuesta al cliente)
+
+### Medidas de Seguridad EXISTENTES ✅
+
+| Medida | Estado | Archivo | Línea |
+|--------|--------|---------|-------|
+| Nonce WordPress | ✅ Implementado | ContactFormAjaxHandler.php | 47-48 |
+| Rate Limiting (30s por IP) | ✅ Implementado | ContactFormAjaxHandler.php | 55-61 |
+| Sanitización de inputs | ✅ Implementado | ContactFormAjaxHandler.php | 122-130 |
+| Validación de email | ✅ Implementado | ContactFormAjaxHandler.php | 151-155 |
+| Webhook URL oculta | ✅ Implementado | ContactFormAjaxHandler.php | 86 |
+
+### VULNERABILIDADES CRÍTICAS ❌
+
+| Vulnerabilidad | Impacto | Prioridad |
+|----------------|---------|-----------|
+| **NO hay honeypot** | Bots pasan sin detección | 🔴 ALTA |
+| **NO hay CAPTCHA** | Sin verificación humana | 🔴 ALTA |
+| **NO hay validación de nombre** | Acepta `kxUcwkDPHRAnUbdRWnDx` | 🔴 ALTA |
+| **NO hay validación de WhatsApp** | Acepta `OGkrLENXqiQAaIYvCV` | 🔴 ALTA |
+| **Rate limiting muy débil** | Solo 30s, bots rotan IPs | 🟡 MEDIA |
+| **NO hay tiempo mínimo de envío** | Bots envían instantáneamente | 🟡 MEDIA |
+
+### Campos del Formulario (ContactFormRenderer.php:278-320)
+
+```html
+
+```
+
+### Nota sobre archivo Legacy (footer-contact.js)
+
+El archivo `Assets/Js/footer-contact.js` es **código legacy NO utilizado**:
+- NO está encolado en `Inc/enqueue-scripts.php`
+- Tiene webhook URL hardcodeada (mala práctica)
+- Fue reemplazado por el sistema Clean Architecture actual
+
+---
+
+## Resumen Comparativo de Ambos Formularios
+
+| Característica | Newsletter Footer | Contact Form |
+|----------------|-------------------|--------------|
+| **Estado** | ✅ ACTIVO | ✅ ACTIVO |
+| **Backend** | PHP AJAX | PHP AJAX |
+| **Nonce** | ✅ Sí | ✅ Sí |
+| **Rate Limit** | ✅ 60s | ✅ 30s |
+| **Sanitización** | ✅ Sí | ✅ Sí |
+| **Validación email** | ✅ is_email() | ✅ is_email() |
+| **Validación nombre** | ❌ Ninguna | ❌ Solo required |
+| **Validación WhatsApp** | ❌ Ninguna | ❌ Solo required |
+| **Honeypot** | ❌ NO | ❌ NO |
+| **CAPTCHA** | ❌ NO | ❌ NO |
+| **Tiempo mínimo** | ❌ NO | ❌ NO |
+
+### Conclusión: AMBOS formularios comparten las MISMAS vulnerabilidades críticas
+
+---
+
+## Soluciones Anti-Spam Propuestas
+
+### PRIORIDAD 1: Newsletter Footer (Urgente)
+
+#### 1.1 Honeypot Field (Implementación rápida, efectiva)
+```html
+
+
+```
+
+Backend (`NewsletterAjaxHandler.php`):
+```php
+// Verificar honeypot
+$honeypot = sanitize_text_field($_POST['website_url'] ?? '');
+if (!empty($honeypot)) {
+ // Es bot - responder éxito falso para no alertar
+ wp_send_json_success(['message' => $successMsg]);
+ return;
+}
+```
+
+#### 1.2 Validación de Contenido (Anti-gibberish)
+```php
+// Validar nombre: solo letras, espacios, acentos
+$name = sanitize_text_field($_POST['name'] ?? '');
+if (!empty($name) && !preg_match('/^[\p{L}\s\'-]{2,50}$/u', $name)) {
+ wp_send_json_error(['message' => 'Nombre inválido'], 422);
+ return;
+}
+
+// Validar WhatsApp: solo números, +, -, espacios
+$whatsapp = sanitize_text_field($_POST['whatsapp'] ?? '');
+if (!empty($whatsapp) && !preg_match('/^[\d\s\+\-\(\)]{10,20}$/', $whatsapp)) {
+ wp_send_json_error(['message' => 'Número de WhatsApp inválido'], 422);
+ return;
+}
+```
+
+#### 1.3 Tiempo Mínimo de Envío
+```php
+// En el formulario HTML agregar:
+
+
+// En el handler:
+$timestamp = (int) ($_POST['form_timestamp'] ?? 0);
+$minTime = 3; // segundos mínimos
+if (time() - $timestamp < $minTime) {
+ // Envío demasiado rápido = bot
+ wp_send_json_success(['message' => $successMsg]); // Falso éxito
+ return;
+}
+```
+
+#### 1.4 Rate Limiting Mejorado
+```php
+// Aumentar de 60s a 300s (5 minutos)
+// Y agregar límite diario por IP
+private function checkRateLimit(): bool
+{
+ $ip = $this->getClientIP();
+
+ // Límite corto (5 minutos)
+ $shortKey = 'roi_newsletter_short_' . md5($ip);
+ if (get_transient($shortKey) !== false) {
+ return false;
+ }
+ set_transient($shortKey, time(), 300);
+
+ // Límite diario (máximo 5 por día)
+ $dailyKey = 'roi_newsletter_daily_' . md5($ip);
+ $dailyCount = (int) get_transient($dailyKey);
+ if ($dailyCount >= 5) {
+ return false;
+ }
+ set_transient($dailyKey, $dailyCount + 1, DAY_IN_SECONDS);
+
+ return true;
+}
+```
+
+### PRIORIDAD 2: Opciones Adicionales
+
+#### 2.1 Google reCAPTCHA v3 (Invisible)
+- Sin fricción para usuarios
+- Score basado en comportamiento
+- Requiere cuenta Google reCAPTCHA
+
+#### 2.2 Cloudflare Turnstile (Recomendado)
+- Gratuito
+- Sin tracking de Google
+- Más privado que reCAPTCHA
+
+#### 2.3 hCaptcha
+- Alternativa a reCAPTCHA
+- Mejor privacidad
+- Versión gratuita disponible
+
+---
+
+## Plan de Implementación
+
+### Fase 1: Crear Servicio Anti-Spam Compartido
+1. Crear `Shared/Infrastructure/Services/AntiSpamValidator.php`
+2. Implementar validaciones reutilizables:
+ - `validateHoneypot(string $value): bool`
+ - `validateMinimumTime(int $timestamp, int $minSeconds = 3): bool`
+ - `validateNameFormat(string $name): bool` (regex letras/espacios)
+ - `validateWhatsAppFormat(string $phone): bool` (regex números)
+ - `checkEnhancedRateLimit(string $ip, int $shortLimit, int $dailyLimit): bool`
+
+### Fase 2: Aplicar a Newsletter Footer
+1. Agregar honeypot + timestamp en `FooterRenderer.php`
+2. Integrar AntiSpamValidator en `NewsletterAjaxHandler.php`
+3. Probar que spam es rechazado
+
+### Fase 3: Aplicar a Contact Form
+1. Agregar honeypot + timestamp en `ContactFormRenderer.php`
+2. Integrar AntiSpamValidator en `ContactFormAjaxHandler.php`
+3. Probar que spam es rechazado
+
+### Fase 4: Monitoreo y Mejoras (Opcional)
+1. Agregar logging de intentos sospechosos
+2. Evaluar CAPTCHA invisible si spam persiste
+3. Dashboard de estadísticas anti-spam
+
+---
+
+## Archivos a Modificar
+
+### Newsletter Footer
+| Archivo | Cambio |
+|---------|--------|
+| `Public/Footer/Infrastructure/Ui/FooterRenderer.php` | Agregar honeypot + timestamp oculto |
+| `Public/Footer/Infrastructure/Api/WordPress/NewsletterAjaxHandler.php` | Validaciones formato + honeypot check + rate limiting mejorado |
+
+### Contact Form
+| Archivo | Cambio |
+|---------|--------|
+| `Public/ContactForm/Infrastructure/Ui/ContactFormRenderer.php` | Agregar honeypot + timestamp oculto |
+| `Public/ContactForm/Infrastructure/Api/WordPress/ContactFormAjaxHandler.php` | Validaciones formato + honeypot check + rate limiting mejorado |
+
+### Código Reutilizable (Recomendado)
+Crear un trait o clase helper compartida para evitar duplicación:
+```
+Shared/Infrastructure/Services/AntiSpamValidator.php
+```
+- Validación de honeypot
+- Validación de tiempo mínimo
+- Validación de formato nombre (regex)
+- Validación de formato WhatsApp (regex)
+- Rate limiting mejorado
+
+---
+
+## Referencias Serena
+
+Las memorias existentes en `.serena/Memories/` documentan:
+- `diagnostico-estructura-carpetas-admin.md` - Estructura de carpetas Admin
+- `migracion-theme-options-tabla-personalizada.md` - Sistema de settings
+- `ROI_THEME_CSS_LOADING_ANALYSIS.md` - Análisis de carga CSS
+
+Esta memoria debe guardarse como referencia para implementación futura.
+
diff --git a/_planificacion/plan-mejora-especificaciones-openspec.md b/_planificacion/plan-mejora-especificaciones-openspec.md
new file mode 100644
index 00000000..822de3f4
--- /dev/null
+++ b/_planificacion/plan-mejora-especificaciones-openspec.md
@@ -0,0 +1,366 @@
+# Plan de Mejora de Especificaciones OpenSpec - ROI Theme
+
+**Fecha:** 2026-01-08
+**Referencia:** Modelo de especificaciones de Aditec (`D:\_Desarrollo\100Aditec\_openspec`)
+
+---
+
+## INSTRUCCIONES DE RECUPERACIÓN (LEER PRIMERO)
+
+> **Si la conversación se compactó, se fue el internet o se apagó la computadora:**
+
+1. **Estado actual:** Ver sección "ESTADO ACTUAL" abajo
+2. **Buscar primer `[ ]`:** Ir a la tarea sin marcar
+3. **Continuar desde ahí:** No repetir tareas marcadas `[x]`
+4. **Marcar `[x]` al completar:** Guardar después de cada cambio
+
+### ESTADO ACTUAL
+
+| Campo | Valor |
+|-------|-------|
+| **Última actualización** | 2026-01-08 |
+| **Última tarea completada** | FASE 3 - Referencias y verificación COMPLETADO |
+| **Próxima tarea** | CASO PILOTO P.1 - Crear spec para AntiSpamValidator |
+| **Progreso total** | 66/75 tareas |
+
+### Archivos de contexto a leer si es necesario:
+- `_planificacion/analisis-spam-formularios.md` - Análisis de spam
+- `_planificacion/validacion-specs-vs-codigo-actual.md` - Validación código vs specs
+- `_openspec/specs/` - Specs base del proyecto (3 archivos)
+- `_openspec/changes/` - Specs de features específicos
+- `D:\_Desarrollo\100Aditec\_openspec\` - Referencia de Aditec
+
+---
+
+## CHECKLIST MAESTRO DE PROGRESO
+
+### Estado General
+- [x] Análisis de especificaciones Aditec completado
+- [x] Comparación ROI Theme vs Aditec completado
+- [x] Validación código actual vs especificaciones propuestas
+- [x] **FASE 1: Crear archivos faltantes** (COMPLETADO)
+- [x] **FASE 2: Expandir archivos existentes** (COMPLETADO)
+- [x] **FASE 3: Actualizar referencias** (COMPLETADO)
+- [ ] **CASO PILOTO: Implementar anti-spam con nuevo sistema**
+
+---
+
+## FASE 1: CREAR ARCHIVOS FALTANTES
+
+### 1.1 WORKFLOW-ROI-THEME.md (~300 líneas)
+**Ubicación:** `_openspec/WORKFLOW-ROI-THEME.md`
+**Estado:** [x] NO INICIADO | [x] EN PROGRESO | [x] COMPLETADO
+
+#### Secciones a crear:
+- [x] **1.1.1** Encabezado y metadata (version, fecha)
+- [x] **1.1.2** Regla de Oro del proyecto
+ - [x] "SI NO EXISTE spec.md → NO SE TOCA CÓDIGO"
+ - [x] Explicación de por qué esta regla
+- [x] **1.1.3** Flujo de 3 fases obligatorio
+ - [x] Fase 1: Proponer (qué archivos se crean)
+ - [x] Fase 2: Especificar (qué archivos se crean)
+ - [x] Fase 3: Implementar (qué archivos se crean)
+- [x] **1.1.4** Flujo de 5 fases para componentes ROI Theme
+ - [x] Fase 1: Schema JSON (ubicación, formato, campos obligatorios)
+ - [x] Fase 2: Sincronización BD (comando WP-CLI)
+ - [x] Fase 3: Renderer (ubicación, patrones, DI)
+ - [x] Fase 4: FormBuilder (ubicación, patrones, Design System)
+ - [x] Fase 5: Validación (script, qué valida)
+- [x] **1.1.5** Agentes disponibles y cuándo usarlos
+ - [x] roi-schema-architect
+ - [x] roi-renderer-builder
+ - [x] roi-form-builder
+- [x] **1.1.6** Comandos WP-CLI disponibles
+ - [x] sync-component
+ - [x] sync-all-components
+ - [x] Ejemplos de uso
+- [x] **1.1.7** Reglas de Clean Architecture resumidas
+ - [x] Qué puede y no puede hacer Domain
+ - [x] Qué puede y no puede hacer Application
+ - [x] Qué puede y no puede hacer Infrastructure
+- [x] **1.1.8** Sección de Lecciones Aprendidas
+ - [x] Errores comunes y cómo evitarlos
+ - [x] Patrones que funcionan
+
+---
+
+### 1.2 nomenclatura.md (~600 líneas)
+**Ubicación:** `_openspec/specs/nomenclatura.md`
+**Estado:** [x] NO INICIADO | [x] EN PROGRESO | [x] COMPLETADO
+
+#### Pre-requisitos:
+- [x] **1.2.0** Archivo plano en `_openspec/specs/` (sin carpeta anidada)
+
+#### Secciones a crear:
+- [x] **1.2.1** Encabezado y Feature principal
+- [x] **1.2.2** Tabla resumen de TODAS las nomenclaturas (vista rápida)
+- [x] **1.2.3** Nomenclatura de Carpetas
+ - [x] Carpetas principales (Admin/, Public/, Shared/)
+ - [x] Carpetas de módulo (PascalCase)
+ - [x] Carpetas auxiliares (_planificacion, _arquitectura)
+ - [x] Carpetas de capas (Domain/, Application/, Infrastructure/)
+ - [x] Ejemplos correctos e incorrectos
+- [x] **1.2.4** Nomenclatura de Archivos PHP
+ - [x] Archivos de clase (PascalCase.php)
+ - [x] Archivos de interface (PascalCaseInterface.php)
+ - [x] Archivos de trait (PascalCaseTrait.php)
+ - [x] Ejemplos correctos e incorrectos
+- [x] **1.2.5** Nomenclatura de Archivos JSON (Schemas)
+ - [x] Nombres en kebab-case
+ - [x] Extensión .json
+ - [x] Ejemplos correctos e incorrectos
+- [x] **1.2.6** Nomenclatura de Namespaces
+ - [x] Patrón: ROITheme\[Context]\[Component]\[Layer]
+ - [x] Context: Admin, Public, Shared
+ - [x] Layer: Domain, Application, Infrastructure
+ - [x] Subcapas: Ui, Api, Persistence, Services
+ - [x] Ejemplos completos
+- [x] **1.2.7** Nomenclatura de Clases
+ - [x] Clases regulares (PascalCase)
+ - [x] Renderers ([Component]Renderer)
+ - [x] FormBuilders ([Component]FormBuilder)
+ - [x] UseCases ([Action][Entity]UseCase)
+ - [x] Services ([Entity]Service)
+ - [x] Repositories ([Entity]Repository)
+ - [x] Handlers ([Action]Handler)
+ - [x] Ejemplos correctos e incorrectos
+- [x] **1.2.8** Nomenclatura de Interfaces
+ - [x] Sufijo Interface o Contract
+ - [x] Ubicación en Domain/Contracts/
+ - [x] Ejemplos correctos e incorrectos
+- [x] **1.2.9** Nomenclatura de Métodos
+ - [x] Métodos públicos (camelCase)
+ - [x] Métodos privados (camelCase)
+ - [x] Métodos booleanos (is*, has*, can*, should*)
+ - [x] Getters/Setters (get*, set*)
+ - [x] Ejemplos correctos e incorrectos
+- [x] **1.2.10** Nomenclatura de Propiedades
+ - [x] Propiedades (camelCase)
+ - [x] Propiedades booleanas (is*, has*)
+ - [x] Visibilidad (private por defecto)
+ - [x] Ejemplos correctos e incorrectos
+- [x] **1.2.11** Nomenclatura de Variables
+ - [x] Variables locales ($camelCase)
+ - [x] Parámetros ($camelCase)
+ - [x] Variables de iteración ($item, $key, $i)
+ - [x] Ejemplos correctos e incorrectos
+- [x] **1.2.12** Nomenclatura de Constantes
+ - [x] Constantes de clase (UPPER_SNAKE_CASE)
+ - [x] Constantes globales (ROI_THEME_*)
+ - [x] Ejemplos correctos e incorrectos
+- [x] **1.2.13** Nomenclatura de component_name
+ - [x] Formato kebab-case en JSON
+ - [x] Formato kebab-case en BD
+ - [x] Conversión kebab-case ↔ PascalCase
+ - [x] Ejemplos de conversión
+- [x] **1.2.14** Nomenclatura de Hooks WordPress
+ - [x] Actions (roi_theme_*)
+ - [x] Filters (roi_theme_filter_*)
+ - [x] Ejemplos correctos e incorrectos
+- [x] **1.2.15** Validación Pre-commit
+ - [x] Checklist de nomenclatura
+ - [x] Errores comunes a evitar
+
+---
+
+## FASE 2: EXPANDIR ARCHIVOS EXISTENTES
+
+### 2.1 arquitectura-limpia.md (+485 líneas)
+**Ubicación:** `_openspec/specs/arquitectura-limpia.md`
+**Estado:** [x] NO INICIADO | [x] EN PROGRESO | [x] COMPLETADO
+
+#### Secciones a agregar:
+- [x] **2.1.1** Diagrama ASCII de las 3 capas
+ - [x] Domain (centro, sin dependencias)
+ - [x] Application (usa Domain)
+ - [x] Infrastructure (usa Application y Domain)
+ - [x] Flechas de dependencia
+- [x] **2.1.2** Estructura completa de carpetas del tema
+ - [x] Árbol completo roi-theme/
+ - [x] Explicación de cada carpeta
+ - [x] Cuándo crear nuevas carpetas
+- [x] **2.1.3** Reglas de anidamiento
+ - [x] Profundidad máxima: 4 niveles
+ - [x] Regla de 3 archivos para subcarpetas
+ - [x] Ejemplos de estructuras válidas e inválidas
+- [x] **2.1.4** Diferencia entre niveles de Shared
+ - [x] Shared/ (raíz) - código global
+ - [x] Admin/Shared/ - compartido solo en Admin
+ - [x] Public/Shared/ - compartido solo en Public
+ - [x] Cuándo usar cada uno
+- [x] **2.1.5** Ejemplos de código PHP por capa
+ - [x] Domain: Entidad correcta vs incorrecta
+ - [x] Domain: Interface correcta vs incorrecta
+ - [x] Application: UseCase correcto vs incorrecto
+ - [x] Infrastructure: Repository correcto vs incorrecto
+ - [x] Infrastructure: Renderer correcto vs incorrecto
+- [x] **2.1.6** Patrones de herencia
+ - [x] Herencia para Renderers (si aplica)
+ - [x] Herencia para FormBuilders (si aplica)
+ - [x] Composición vs Herencia
+ - [x] Profundidad máxima de herencia
+- [x] **2.1.7** Mapeo de terminología
+ - [x] Tabla: Clean Architecture estándar → ROI Theme
+ - [x] Entity → Component/Entity
+ - [x] UseCase → UseCase
+ - [x] Gateway → Repository
+ - [x] Presenter → Renderer
+- [x] **2.1.8** Validación de arquitectura
+ - [x] Script validate-architecture.php
+ - [x] Qué valida
+ - [x] Cómo ejecutarlo
+ - [x] Cómo interpretar errores
+
+---
+
+### 2.2 estandares-codigo.md (+877 líneas)
+**Ubicación:** `_openspec/specs/estandares-codigo.md`
+**Estado:** [x] NO INICIADO | [x] EN PROGRESO | [x] COMPLETADO
+
+#### Secciones a agregar:
+- [x] **2.2.1** Ejemplos de código PHP para SOLID
+ - [x] SRP: Ejemplo correcto vs incorrecto
+ - [x] OCP: Ejemplo correcto vs incorrecto
+ - [x] LSP: Ejemplo correcto vs incorrecto
+ - [x] ISP: Ejemplo correcto vs incorrecto
+ - [x] DIP: Ejemplo correcto vs incorrecto
+- [x] **2.2.2** Manejo de errores WordPress
+ - [x] Cuándo usar wp_die()
+ - [x] Cuándo usar WP_Error
+ - [x] Cuándo usar excepciones
+ - [x] Ejemplos de cada caso
+- [x] **2.2.3** Sanitización y validación
+ - [x] sanitize_text_field()
+ - [x] sanitize_email()
+ - [x] absint()
+ - [x] wp_kses()
+ - [x] Tabla de funciones por tipo de dato
+- [x] **2.2.4** Escaping para output
+ - [x] esc_html()
+ - [x] esc_attr()
+ - [x] esc_url()
+ - [x] esc_textarea()
+ - [x] wp_kses_post()
+ - [x] Tabla de funciones por contexto
+- [x] **2.2.5** Hooks WordPress
+ - [x] add_action() - cuándo y cómo
+ - [x] add_filter() - cuándo y cómo
+ - [x] Prioridades
+ - [x] Número de argumentos
+ - [x] Ejemplos correctos
+- [x] **2.2.6** Recursos y cleanup
+ - [x] Transients (set, get, delete)
+ - [x] Object cache
+ - [x] Cuándo limpiar recursos
+ - [x] Ejemplos
+- [x] **2.2.7** Checklist pre-commit detallado
+ - [x] Verificaciones de sintaxis
+ - [x] Verificaciones de estilo
+ - [x] Verificaciones de seguridad
+ - [x] Verificaciones de arquitectura
+ - [x] Verificaciones de nomenclatura
+
+---
+
+## FASE 3: ACTUALIZAR REFERENCIAS
+
+### 3.1 Actualizar project.md
+**Ubicación:** `_openspec/project.md`
+**Estado:** [x] NO INICIADO | [x] EN PROGRESO | [x] COMPLETADO
+
+- [x] **3.1.1** Agregar referencia a WORKFLOW-ROI-THEME.md
+- [x] **3.1.2** Agregar referencia a nomenclatura/spec.md
+- [x] **3.1.3** Actualizar índice de specs
+- [x] **3.1.4** Verificar que links funcionan
+
+### 3.2 Cross-references entre specs
+**Estado:** [x] NO INICIADO | [x] EN PROGRESO | [x] COMPLETADO
+
+- [x] **3.2.1** arquitectura-limpia → nomenclatura (referencias a nombres)
+- [x] **3.2.2** estandares-codigo → arquitectura-limpia (referencias a capas)
+- [x] **3.2.3** nomenclatura → estandares-codigo (referencias a convenciones)
+- [x] **3.2.4** WORKFLOW → todas las specs (referencias a cada fase)
+
+### 3.3 Verificación final
+**Estado:** [x] NO INICIADO | [x] EN PROGRESO | [x] COMPLETADO
+
+- [x] **3.3.1** Consistencia de ejemplos entre archivos
+- [x] **3.3.2** Todos los links funcionan
+- [x] **3.3.3** No hay contradicciones entre specs
+- [x] **3.3.4** Todos los archivos tienen fecha de actualización
+
+---
+
+## CASO PILOTO: ANTI-SPAM
+
+### Implementación usando nuevo sistema de specs
+**Estado:** [ ] NO INICIADO | [ ] EN PROGRESO | [ ] COMPLETADO
+
+- [ ] **P.1** Crear spec para AntiSpamValidator siguiendo WORKFLOW
+- [ ] **P.2** Validar que spec cumple nomenclatura
+- [ ] **P.3** Validar que spec cumple arquitectura-limpia
+- [ ] **P.4** Validar que spec cumple estandares-codigo
+- [ ] **P.5** Implementar AntiSpamValidator
+- [ ] **P.6** Aplicar a Newsletter Footer
+- [ ] **P.7** Aplicar a Contact Form
+- [ ] **P.8** Probar que spam es rechazado
+- [ ] **P.9** Documentar lecciones aprendidas en WORKFLOW
+
+---
+
+## RESUMEN DE ARCHIVOS A CREAR/MODIFICAR
+
+| # | Archivo | Acción | Líneas | Estado |
+|---|---------|--------|--------|--------|
+| 1 | `_openspec/WORKFLOW-ROI-THEME.md` | CREAR | ~438 | [x] COMPLETADO |
+| 2 | `_openspec/specs/nomenclatura.md` | CREAR | ~687 | [x] COMPLETADO |
+| 3 | `_openspec/specs/arquitectura-limpia.md` | EXPANDIR | ~770 | [x] COMPLETADO |
+| 4 | `_openspec/specs/estandares-codigo.md` | EXPANDIR | ~1228 | [x] COMPLETADO |
+| 5 | `_openspec/project.md` | ACTUALIZAR | ~107 | [x] COMPLETADO |
+
+### Estructura Final
+```
+_openspec/
+├── AGENTS.md
+├── WORKFLOW-ROI-THEME.md
+├── project.md
+├── specs/ # Solo specs BASE
+│ ├── arquitectura-limpia.md
+│ ├── estandares-codigo.md
+│ └── nomenclatura.md
+└── changes/ # Features/cambios específicos
+ ├── add-advanced-incontent-ads/
+ ├── adsense-auto-ads-toggle/
+ ├── adsense-cache-unified-visibility/
+ ├── adsense-javascript-first/
+ ├── cache-first-architecture/
+ ├── flujo-componentes/
+ ├── patrones-wordpress/
+ ├── post-grid-shortcode/
+ ├── refactor-adsense-lazy-loading/
+ └── templates-unificados/
+```
+
+---
+
+## MÉTRICAS DE PROGRESO
+
+### Contadores actuales:
+- **Tareas FASE 1:** 32/32 completadas
+- **Tareas FASE 2:** 23/23 completadas
+- **Tareas FASE 3:** 11/11 completadas
+- **Tareas PILOTO:** 0/9 completadas
+- **TOTAL:** 66/75 tareas completadas
+
+### Al completar:
+| Métrica | Antes | Después |
+|---------|-------|---------|
+| Total líneas specs | ~1021 | ~2200 |
+| Archivos fundamentales | 3/5 | 5/5 |
+| Diagramas ASCII | 0 | 3+ |
+| Ejemplos código | ~5 | ~30 |
+| Checklists | 1 parcial | 3 completos |
+
+---
+
+**Fin del documento**
diff --git a/_planificacion/roi-theme-template/css/style.css b/_planificacion/roi-theme-template/css/style.css
new file mode 100644
index 00000000..93bb4c88
--- /dev/null
+++ b/_planificacion/roi-theme-template/css/style.css
@@ -0,0 +1,1121 @@
+/* ========================================
+ APU MÉXICO - OPTIMIZED COLOR PALETTE
+ ========================================
+
+ PRIMARY COLORS (Navy Brand):
+ - Navy Dark: #0E2337
+ - Navy Primary: #1e3a5f
+ - Navy Light: #2c5282
+
+ ACCENT COLORS (Orange Action):
+ - Orange Primary: #FF8600
+ - Orange Hover: #FF6B35
+ - Orange Light: #FFB800
+
+ NEUTRAL COLORS:
+ - White: #ffffff
+ - Neutral 50: #f8f9fa
+ - Neutral 100: #e9ecef
+ - Neutral 600: #495057
+ - Neutral 700: #6c757d
+======================================== */
+
+/* ========================================
+ GLOBAL STYLES
+======================================== */
+
+:root {
+ --color-navy-dark: #0E2337;
+ --color-navy-primary: #1e3a5f;
+ --color-navy-light: #2c5282;
+ --color-orange-primary: #FF8600;
+ --color-orange-hover: #FF6B35;
+ --color-orange-light: #FFB800;
+ --color-neutral-50: #f8f9fa;
+ --color-neutral-100: #e9ecef;
+ --color-neutral-600: #495057;
+ --color-neutral-700: #6c757d;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Poppins', sans-serif;
+ color: var(--color-neutral-600);
+ background-color: var(--color-neutral-50);
+ line-height: 1.6;
+}
+
+/* ========================================
+ TOP NOTIFICATION BAR
+======================================== */
+
+.top-notification-bar {
+ background-color: var(--color-navy-dark);
+ color: #ffffff;
+ padding: 0.5rem 0;
+ font-size: 0.9rem;
+ text-align: center;
+}
+
+.top-notification-bar strong {
+ color: var(--color-orange-primary);
+}
+
+.top-notification-bar i {
+ color: var(--color-orange-primary);
+}
+
+.top-notification-bar a {
+ color: #ffffff;
+ transition: color 0.3s ease;
+}
+
+.top-notification-bar a:hover {
+ color: var(--color-orange-primary);
+}
+
+/* ========================================
+ NAVBAR
+======================================== */
+
+.navbar {
+ position: sticky;
+ top: 0;
+ z-index: 1030;
+ background-color: var(--color-navy-primary) !important;
+ box-shadow: 0 4px 12px rgba(30, 58, 95, 0.15);
+ padding: 0.75rem 0;
+ transition: all 0.3s ease;
+}
+
+.navbar.scrolled {
+ box-shadow: 0 6px 20px rgba(30, 58, 95, 0.25);
+}
+
+.navbar-brand {
+ color: #ffffff !important;
+ font-weight: 700;
+ font-size: 1.5rem;
+ transition: color 0.3s ease;
+}
+
+.navbar-brand:hover {
+ color: var(--color-orange-primary) !important;
+}
+
+.nav-link {
+ color: rgba(255, 255, 255, 0.9) !important;
+ font-weight: 500;
+ position: relative;
+ padding: 0.5rem 0.65rem !important;
+ transition: all 0.3s ease;
+ font-size: 0.9rem;
+ white-space: nowrap;
+}
+
+.nav-link::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%) scaleX(0);
+ width: 80%;
+ height: 2px;
+ background: var(--color-orange-primary);
+ transition: transform 0.3s ease;
+}
+
+.nav-link:hover {
+ color: var(--color-orange-primary) !important;
+ background-color: rgba(255, 133, 0, 0.1);
+ border-radius: 4px;
+}
+
+.nav-link:hover::after {
+ transform: translateX(-50%) scaleX(1);
+}
+
+.dropdown-menu {
+ background: #ffffff;
+ border: none;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ border-radius: 8px;
+ padding: 0.5rem 0;
+}
+
+.dropdown-item {
+ color: var(--color-neutral-600);
+ padding: 0.625rem 1.25rem;
+ transition: all 0.3s ease;
+ font-weight: 500;
+}
+
+.dropdown-item:hover {
+ background-color: rgba(255, 133, 0, 0.1);
+ color: var(--color-orange-primary);
+}
+
+.btn-lets-talk {
+ background-color: var(--color-orange-primary);
+ color: #ffffff;
+ font-weight: 600;
+ padding: 0.5rem 1.5rem;
+ border: none;
+ border-radius: 6px;
+ transition: all 0.3s ease;
+}
+
+.btn-lets-talk:hover {
+ background-color: var(--color-orange-hover);
+ color: #ffffff;
+}
+
+.btn-lets-talk i {
+ color: #ffffff;
+}
+
+/* ========================================
+ HERO SECTION
+======================================== */
+
+.hero-title {
+ background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%);
+ box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25);
+ padding: 3rem 0;
+}
+
+.hero-title h1 {
+ color: #ffffff !important;
+ font-weight: 700;
+ line-height: 1.4;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+ margin-bottom: 0;
+}
+
+.category-badge {
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ color: rgba(255, 255, 255, 0.95);
+ padding: 0.375rem 0.875rem;
+ border-radius: 20px;
+ font-size: 0.813rem;
+ font-weight: 500;
+ text-decoration: none;
+ display: inline-block;
+ transition: all 0.3s ease;
+}
+
+.category-badge:hover {
+ background: rgba(255, 133, 0, 0.2);
+ border-color: rgba(255, 133, 0, 0.4);
+ color: #ffffff;
+}
+
+.category-badge i {
+ color: var(--color-orange-light);
+}
+
+/* ========================================
+ FEATURED IMAGE
+======================================== */
+
+.featured-image-container {
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+ margin: 2rem 0;
+}
+
+.featured-image-container img {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+/* ========================================
+ POST CONTENT
+======================================== */
+
+.post-content {
+ background: #ffffff;
+ padding: 2rem;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.post-content h2 {
+ color: var(--color-navy-primary);
+ font-weight: 700;
+ margin-top: 2.5rem;
+ margin-bottom: 1.25rem;
+ padding-bottom: 0.75rem;
+ border-bottom: 3px solid var(--color-orange-primary);
+}
+
+.post-content h3 {
+ color: var(--color-navy-light);
+ font-weight: 600;
+ margin-top: 2rem;
+ margin-bottom: 1rem;
+}
+
+.post-content p {
+ color: var(--color-neutral-600);
+ line-height: 1.8;
+ margin-bottom: 1.25rem;
+}
+
+.post-content ul,
+.post-content ol {
+ margin-bottom: 1.5rem;
+ padding-left: 2rem;
+}
+
+.post-content li {
+ margin-bottom: 0.5rem;
+ color: var(--color-neutral-600);
+}
+
+.post-content strong {
+ color: var(--color-navy-primary);
+ font-weight: 600;
+}
+
+.post-content a {
+ color: var(--color-orange-primary);
+ text-decoration: underline;
+ transition: color 0.3s ease;
+}
+
+.post-content a:hover {
+ color: var(--color-orange-hover);
+}
+
+/* ========================================
+ PRICING TABLES (APU)
+======================================== */
+
+.analisis {
+ margin: 2rem 0;
+ overflow-x: auto;
+}
+
+.analisis table {
+ width: 100%;
+ border-collapse: collapse;
+ background: #ffffff;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+ border-radius: 8px;
+ overflow: hidden;
+ border: none;
+ border-spacing: 0;
+}
+
+.analisis table td,
+.analisis table tbody,
+.analisis table tr {
+ border: none !important;
+}
+
+.analisis table td:nth-child(1) { width: 150px; }
+.analisis table td:nth-child(2) { width: auto; min-width: 300px; }
+.analisis table td:nth-child(3) { width: 80px; }
+.analisis table td:nth-child(4) { width: 110px; }
+.analisis table td:nth-child(5) { width: 120px; }
+.analisis table td:nth-child(6) { width: 120px; }
+
+.analisis table thead tr th {
+ background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%);
+ color: #ffffff;
+ font-weight: 600;
+ text-align: center !important;
+ padding: 1rem;
+ border: none !important;
+}
+
+.analisis table tbody td {
+ padding: 0.75rem 1rem;
+ border: none !important;
+ color: var(--color-neutral-600);
+}
+
+.analisis table tbody tr:nth-child(even):not(.section-header):not(.subtotal-row):not(.total-row) {
+ background-color: var(--color-neutral-50);
+}
+
+.analisis table tbody tr:nth-child(odd):not(.section-header):not(.subtotal-row):not(.total-row) {
+ background-color: #ffffff;
+}
+
+.analisis table td:nth-child(1),
+.analisis table td:nth-child(2) {
+ text-align: left;
+}
+
+.analisis table td:nth-child(3),
+.analisis table td.c3 {
+ text-align: center !important;
+ color: var(--color-neutral-700);
+}
+
+.analisis table td:nth-child(4),
+.analisis table td.c4,
+.analisis table td:nth-child(5),
+.analisis table td.c5,
+.analisis table td:nth-child(6),
+.analisis table td.c6 {
+ text-align: right !important;
+ font-family: 'Courier New', monospace;
+ font-weight: 500;
+ color: var(--color-navy-primary);
+}
+
+.analisis table tr.section-header {
+ background-color: var(--color-neutral-100) !important;
+}
+
+.analisis table tr.section-header td {
+ font-weight: 600;
+ color: var(--color-navy-primary);
+ padding: 0.75rem 1rem;
+ border: none !important;
+}
+
+.analisis table tr.subtotal-row {
+ background-color: rgba(255, 133, 0, 0.1) !important;
+}
+
+.analisis table tr.subtotal-row td {
+ font-weight: 700;
+ color: var(--color-orange-primary);
+ padding: 0.875rem 1rem;
+ border: none !important;
+}
+
+.analisis table tr.subtotal-row td.c6 {
+ font-size: 1.05rem;
+ color: var(--color-orange-primary);
+}
+
+.analisis table tr.total-row {
+ background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%) !important;
+}
+
+.analisis table tr.total-row td {
+ color: #ffffff !important;
+ font-weight: 700;
+ font-size: 1.1rem;
+ padding: 1.125rem 1rem !important;
+ border: none !important;
+}
+
+.analisis table tr.total-row td.c6 {
+ font-size: 1.25rem;
+ letter-spacing: 0.5px;
+ color: #ffffff !important;
+}
+
+/* ========================================
+ GENERIC TABLES - 10 DIFFERENT STYLES
+======================================== */
+
+/* Base styles for all generic tables */
+.post-content table:not(.analisis table) {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 2rem auto;
+ font-size: 0.95rem;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+/* Header styles - VERY OBVIOUS */
+.post-content table:not(.analisis table) thead tr:first-child th,
+.post-content table:not(.analisis table) tbody tr:first-child td,
+.post-content table:not(.analisis table) tr:first-child td {
+ font-weight: 700;
+ text-align: center;
+ padding: 1.25rem 1rem;
+ font-size: 1.05rem;
+ letter-spacing: 0.5px;
+}
+
+/* Body cells */
+.post-content table:not(.analisis table) tbody tr:not(:first-child) td {
+ padding: 0.875rem 1rem;
+ border: 1px solid var(--color-neutral-100);
+ text-align: left;
+}
+
+/* STYLE 1: Navy Header with Orange Accent */
+.post-content table:not(.analisis table):nth-of-type(2) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(2) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(2) tr:first-child td {
+ background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%);
+ color: #ffffff !important;
+ border: none !important;
+ box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3);
+}
+
+.post-content table:not(.analisis table):nth-of-type(2) tbody tr:nth-child(even) {
+ background-color: var(--color-neutral-50);
+}
+
+.post-content table:not(.analisis table):nth-of-type(2) tbody tr:hover {
+ background-color: rgba(255, 133, 0, 0.05);
+}
+
+/* STYLE 2: Orange Header with Light Background */
+.post-content table:not(.analisis table):nth-of-type(3) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(3) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(3) tr:first-child td {
+ background: var(--color-orange-primary);
+ color: #ffffff !important;
+ border: none !important;
+ box-shadow: 0 2px 8px rgba(255, 133, 0, 0.3);
+}
+
+.post-content table:not(.analisis table):nth-of-type(3) tbody tr:nth-child(odd) {
+ background-color: rgba(255, 133, 0, 0.05);
+}
+
+.post-content table:not(.analisis table):nth-of-type(3) tbody tr:hover {
+ background-color: rgba(255, 133, 0, 0.1);
+}
+
+/* STYLE 3: Minimal with Left Orange Border */
+.post-content table:not(.analisis table):nth-of-type(4) {
+ border-left: 5px solid var(--color-orange-primary);
+}
+
+.post-content table:not(.analisis table):nth-of-type(4) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(4) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(4) tr:first-child td {
+ background: var(--color-navy-primary);
+ color: #ffffff !important;
+ border: none !important;
+ border-bottom: 3px solid var(--color-orange-primary) !important;
+}
+
+.post-content table:not(.analisis table):nth-of-type(4) tbody tr:hover {
+ background-color: var(--color-neutral-50);
+}
+
+/* STYLE 4: Dark Navy with Striped Rows */
+.post-content table:not(.analisis table):nth-of-type(5) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(5) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(5) tr:first-child td {
+ background: var(--color-navy-dark);
+ color: #ffffff !important;
+ border: none !important;
+ box-shadow: 0 2px 8px rgba(14, 35, 55, 0.4);
+}
+
+.post-content table:not(.analisis table):nth-of-type(5) tbody tr:nth-child(even) {
+ background-color: rgba(30, 58, 95, 0.05);
+}
+
+.post-content table:not(.analisis table):nth-of-type(5) tbody tr:hover {
+ background-color: rgba(30, 58, 95, 0.1);
+}
+
+/* STYLE 5: Orange Gradient Header */
+.post-content table:not(.analisis table):nth-of-type(6) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(6) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(6) tr:first-child td {
+ background: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%);
+ color: #ffffff !important;
+ border: none !important;
+ box-shadow: 0 2px 8px rgba(255, 133, 0, 0.35);
+}
+
+.post-content table:not(.analisis table):nth-of-type(6) tbody tr {
+ background-color: #ffffff;
+}
+
+.post-content table:not(.analisis table):nth-of-type(6) tbody tr:hover {
+ background-color: rgba(255, 133, 0, 0.08);
+}
+
+/* STYLE 6: Bordered with Navy Accents */
+.post-content table:not(.analisis table):nth-of-type(7) {
+ border: 3px solid var(--color-navy-primary);
+}
+
+.post-content table:not(.analisis table):nth-of-type(7) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(7) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(7) tr:first-child td {
+ background: var(--color-navy-primary);
+ color: #ffffff !important;
+ border: none !important;
+ border-bottom: 4px solid var(--color-orange-primary) !important;
+}
+
+.post-content table:not(.analisis table):nth-of-type(7) tbody tr:nth-child(odd) {
+ background-color: rgba(30, 58, 95, 0.03);
+}
+
+/* STYLE 7: Light Orange Background */
+.post-content table:not(.analisis table):nth-of-type(8) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(8) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(8) tr:first-child td {
+ background: var(--color-orange-primary);
+ color: #ffffff !important;
+ border: none !important;
+ border-bottom: 3px solid var(--color-navy-primary) !important;
+}
+
+.post-content table:not(.analisis table):nth-of-type(8) tbody tr:nth-child(even) {
+ background-color: rgba(255, 133, 0, 0.03);
+}
+
+.post-content table:not(.analisis table):nth-of-type(8) tbody tr:hover {
+ background-color: rgba(255, 133, 0, 0.08);
+}
+
+/* STYLE 8: Modern Flat with Top Border */
+.post-content table:not(.analisis table):nth-of-type(9) {
+ border-top: 6px solid var(--color-orange-primary);
+}
+
+.post-content table:not(.analisis table):nth-of-type(9) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(9) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(9) tr:first-child td {
+ background: var(--color-navy-light);
+ color: #ffffff !important;
+ border: none !important;
+ box-shadow: 0 2px 6px rgba(44, 82, 130, 0.3);
+}
+
+.post-content table:not(.analisis table):nth-of-type(9) tbody tr {
+ background-color: #ffffff;
+}
+
+.post-content table:not(.analisis table):nth-of-type(9) tbody tr:hover {
+ background-color: var(--color-neutral-50);
+}
+
+/* STYLE 9: Compact with Subtle Colors */
+.post-content table:not(.analisis table):nth-of-type(10) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(10) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(10) tr:first-child td {
+ background: var(--color-navy-dark);
+ color: #ffffff !important;
+ border: none !important;
+ border-left: 5px solid var(--color-orange-primary) !important;
+}
+
+.post-content table:not(.analisis table):nth-of-type(10) tbody tr:nth-child(odd) {
+ background-color: var(--color-neutral-50);
+}
+
+.post-content table:not(.analisis table):nth-of-type(10) tbody tr:hover {
+ background-color: rgba(255, 133, 0, 0.05);
+}
+
+/* STYLE 10: Bold Orange Border */
+.post-content table:not(.analisis table):nth-of-type(11) {
+ border: 4px solid var(--color-orange-primary);
+}
+
+.post-content table:not(.analisis table):nth-of-type(11) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(11) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(11) tr:first-child td {
+ background: linear-gradient(135deg, var(--color-orange-hover) 0%, var(--color-orange-primary) 100%);
+ color: #ffffff !important;
+ border: none !important;
+ box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
+}
+
+.post-content table:not(.analisis table):nth-of-type(11) tbody tr:nth-child(even) {
+ background-color: rgba(255, 133, 0, 0.05);
+}
+
+.post-content table:not(.analisis table):nth-of-type(11) tbody tr:hover {
+ background-color: rgba(255, 133, 0, 0.12);
+}
+
+/* STYLE 11+: Cycle back to Style 1 (repeat pattern) */
+.post-content table:not(.analisis table):nth-of-type(n+12) thead tr:first-child th,
+.post-content table:not(.analisis table):nth-of-type(n+12) tbody tr:first-child td,
+.post-content table:not(.analisis table):nth-of-type(n+12) tr:first-child td {
+ background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%);
+ color: #ffffff !important;
+ border: none !important;
+ box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3);
+}
+
+.post-content table:not(.analisis table):nth-of-type(n+12) tbody tr:nth-child(even) {
+ background-color: var(--color-neutral-50);
+}
+
+/* ========================================
+ TABLE OF CONTENTS (TOC)
+======================================== */
+
+.sidebar-sticky {
+ position: sticky;
+ top: 85px;
+ display: flex;
+ flex-direction: column;
+}
+
+.toc-container {
+ margin-bottom: 13px;
+ background: #ffffff;
+ border: 1px solid var(--color-neutral-100);
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ padding: 12px 16px;
+ max-height: calc(100vh - 71px - 10px - 250px - 15px - 15px);
+ display: flex;
+ flex-direction: column;
+}
+
+.toc-container h4 {
+ color: var(--color-navy-primary);
+ padding-bottom: 8px;
+ border-bottom: 2px solid var(--color-neutral-100);
+ margin-bottom: 0.75rem;
+ font-weight: 600;
+ text-align: left;
+ font-size: 1rem;
+ font-style: normal;
+}
+
+.toc-list {
+ overflow-y: auto;
+ padding-right: 0.5rem;
+ list-style: none;
+ flex: 1;
+ min-height: 0;
+}
+
+.toc-container li {
+ margin-bottom: 0.15rem;
+}
+
+.toc-container a {
+ display: block;
+ padding: 0.3rem 0.85rem;
+ color: var(--color-neutral-600);
+ text-decoration: none;
+ border-left: 3px solid transparent;
+ transition: all 0.3s ease;
+ border-radius: 4px;
+ font-size: 0.9rem;
+ line-height: 1.3;
+}
+
+.toc-container a:hover {
+ background: var(--color-neutral-50);
+ border-left-color: var(--color-navy-primary);
+ color: var(--color-navy-primary);
+}
+
+.toc-container a.active {
+ background: var(--color-neutral-50);
+ border-left-color: var(--color-navy-primary);
+ color: var(--color-navy-primary);
+ font-weight: 600;
+}
+
+.toc-list::-webkit-scrollbar {
+ width: 6px;
+}
+
+.toc-list::-webkit-scrollbar-track {
+ background: var(--color-neutral-50);
+ border-radius: 3px;
+}
+
+.toc-list::-webkit-scrollbar-thumb {
+ background: var(--color-neutral-600);
+ border-radius: 3px;
+}
+
+.toc-list::-webkit-scrollbar-thumb:hover {
+ background: var(--color-neutral-700);
+}
+
+/* ========================================
+ CTA BOX (SIDEBAR)
+======================================== */
+
+.cta-box-sidebar {
+ background: var(--color-orange-primary);
+ border-radius: 8px;
+ padding: 24px;
+ text-align: center;
+ margin-top: 0;
+ margin-bottom: 15px;
+ height: 250px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0 4px 12px rgba(255, 133, 0, 0.2);
+}
+
+.cta-box-title {
+ color: #ffffff;
+ font-weight: 700;
+ font-size: 1.25rem;
+ margin-bottom: 1rem;
+}
+
+.cta-box-text {
+ color: rgba(255, 255, 255, 0.95);
+ font-size: 0.9rem;
+ margin-bottom: 1rem;
+}
+
+.btn-cta-box {
+ background-color: #ffffff;
+ color: var(--color-orange-primary);
+ font-weight: 700;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+}
+
+.btn-cta-box:hover {
+ background-color: var(--color-navy-primary);
+ color: #ffffff;
+}
+
+/* ========================================
+ SHARE BUTTONS
+======================================== */
+
+.share-buttons .btn {
+ transition: all 0.3s ease;
+ border-width: 2px;
+}
+
+.share-buttons .btn:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* ========================================
+ VIDEO IFRAME STYLING
+======================================== */
+
+.video-wrapper {
+ position: relative;
+ margin: 2rem auto;
+ max-width: 850px;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+ padding: 8px;
+}
+
+.video-wrapper iframe {
+ display: block;
+ width: 100%;
+ height: 478px;
+ border: none;
+ border-radius: 8px;
+}
+
+/* ========================================
+ CTA SECTIONS
+======================================== */
+
+.cta-section {
+ background: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%);
+ box-shadow: 0 8px 24px rgba(255, 133, 0, 0.3);
+ border-radius: 12px;
+ padding: 2rem;
+}
+
+.cta-section h3 {
+ color: #ffffff !important;
+}
+
+.cta-section p {
+ color: rgba(255, 255, 255, 0.95) !important;
+}
+
+.cta-button {
+ background-color: var(--color-orange-primary);
+ color: #ffffff;
+ font-weight: 600;
+ padding: 0.75rem 2rem;
+ border: none;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ text-decoration: none;
+ display: inline-block;
+}
+
+.cta-button:hover {
+ background-color: var(--color-orange-hover);
+ color: #ffffff;
+}
+
+/* ========================================
+ RELATED POSTS
+======================================== */
+
+.related-posts {
+ margin: 3rem 0;
+}
+
+.related-posts h2 {
+ color: var(--color-navy-primary);
+ font-weight: 700;
+ margin-bottom: 2rem;
+}
+
+.related-posts .card {
+ cursor: pointer;
+ background: #ffffff !important;
+ border: 1px solid var(--color-neutral-100) !important;
+ border-left: 4px solid var(--color-neutral-600) !important;
+ transition: all 0.3s ease;
+ height: 100%;
+}
+
+.related-posts .card:hover {
+ background: var(--color-neutral-50) !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+ border-left-color: var(--color-orange-primary) !important;
+}
+
+.related-posts .card-body {
+ padding: 1.5rem !important;
+}
+
+.related-posts .card-title {
+ color: var(--color-navy-primary) !important;
+ font-weight: 600;
+ font-size: 0.95rem;
+ line-height: 1.4;
+}
+
+.related-posts a {
+ text-decoration: none;
+}
+
+.related-posts a:hover .card-title {
+ color: var(--color-orange-primary) !important;
+}
+
+/* ========================================
+ PAGINATION
+======================================== */
+
+.pagination .page-link {
+ color: var(--color-neutral-600);
+ border: 1px solid var(--color-neutral-100);
+ padding: 0.5rem 1rem;
+ margin: 0 0.25rem;
+ border-radius: 4px;
+ font-weight: 500;
+ transition: all 0.3s ease;
+}
+
+.pagination .page-link:hover {
+ background-color: rgba(255, 133, 0, 0.1);
+ border-color: var(--color-orange-primary);
+ color: var(--color-orange-primary);
+}
+
+.pagination .page-item.active .page-link {
+ background-color: var(--color-orange-primary);
+ border-color: var(--color-orange-primary);
+ color: #ffffff;
+}
+
+/* ========================================
+ CONTACT FORM
+======================================== */
+
+.form-control {
+ border: 2px solid var(--color-neutral-100);
+ border-radius: 6px;
+ padding: 0.625rem 1rem;
+ transition: all 0.3s ease;
+}
+
+.form-control:focus {
+ border-color: var(--color-orange-primary);
+ outline: none;
+}
+
+.btn-contact-submit {
+ background-color: var(--color-orange-primary);
+ color: #ffffff;
+ font-weight: 600;
+ padding: 0.75rem 2rem;
+ border: none;
+ border-radius: 6px;
+ transition: all 0.3s ease;
+}
+
+.btn-contact-submit:hover {
+ background-color: var(--color-orange-hover);
+ color: #ffffff;
+}
+
+.btn-submit-form {
+ background-color: var(--color-orange-primary);
+ color: #ffffff;
+ font-weight: 600;
+ padding: 0.75rem;
+ border: none;
+ border-radius: 6px;
+ transition: all 0.3s ease;
+}
+
+.btn-submit-form:hover {
+ background-color: var(--color-orange-hover);
+ color: #ffffff;
+}
+
+/* ========================================
+ FOOTER
+======================================== */
+
+footer {
+ background-color: var(--color-navy-dark);
+ color: rgba(255, 255, 255, 0.8);
+ padding: 3rem 0;
+}
+
+footer h5 {
+ color: #ffffff;
+ font-weight: 600;
+ margin-bottom: 1rem;
+}
+
+footer a {
+ color: rgba(255, 255, 255, 0.8);
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+footer a:hover {
+ color: var(--color-orange-primary);
+}
+
+footer .btn-primary {
+ background-color: var(--color-orange-primary);
+ border-color: var(--color-orange-primary);
+}
+
+footer .btn-primary:hover {
+ background-color: var(--color-orange-hover);
+ border-color: var(--color-orange-hover);
+}
+
+.contact-info i {
+ color: var(--color-orange-primary);
+}
+
+/* ========================================
+ RESPONSIVE DESIGN
+======================================== */
+
+@media (max-width: 991px) {
+ .hero-title {
+ padding: 2rem 0;
+ }
+
+ .hero-title h1 {
+ font-size: 1.75rem;
+ }
+
+ .post-content {
+ padding: 1.5rem;
+ }
+
+ .toc-container {
+ position: relative;
+ top: 0;
+ margin-bottom: 2rem;
+ }
+
+ .toc-list {
+ max-height: 300px;
+ }
+
+ .sidebar-sticky {
+ position: relative !important;
+ }
+}
+
+@media (max-width: 768px) {
+ .analisis {
+ font-size: 0.85rem;
+ }
+
+ .analisis table td {
+ padding: 0.5rem !important;
+ }
+
+ .analisis table tr.total-row td {
+ font-size: 1rem !important;
+ }
+
+ .btn-lets-talk {
+ width: 100%;
+ margin-top: 1rem;
+ }
+
+ .post-content h2 {
+ font-size: 1.5rem;
+ }
+
+ .post-content h3 {
+ font-size: 1.25rem;
+ }
+
+ .cta-section {
+ padding: 1.5rem;
+ }
+
+ .cta-button {
+ width: 100%;
+ margin-top: 1rem;
+ }
+}
+
+/* ========================================
+ UTILITIES
+======================================== */
+
+.text-navy {
+ color: var(--color-navy-primary) !important;
+}
+
+.text-orange {
+ color: var(--color-orange-primary) !important;
+}
+
+.bg-navy {
+ background-color: var(--color-navy-primary) !important;
+}
+
+.bg-orange {
+ background-color: var(--color-orange-primary) !important;
+}
+
+.border-orange {
+ border-color: var(--color-orange-primary) !important;
+}
+
+.border-navy {
+ border-color: var(--color-navy-primary) !important;
+}
diff --git a/_planificacion/roi-theme-template/img/featured-image.png b/_planificacion/roi-theme-template/img/featured-image.png
new file mode 100644
index 00000000..dcf03f05
Binary files /dev/null and b/_planificacion/roi-theme-template/img/featured-image.png differ
diff --git a/_planificacion/roi-theme-template/index.html b/_planificacion/roi-theme-template/index.html
new file mode 100644
index 00000000..d9734f1b
--- /dev/null
+++ b/_planificacion/roi-theme-template/index.html
@@ -0,0 +1,1159 @@
+
+
+
+
+
+
Análisis de Precio Unitario: Concreto F'C=250 kg/cm² en Obra | APU México 2025
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Nuevo: Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.
+
Ver Catálogo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
SIG_R10_IdentificadorPeatonalColgante – Equipo Multidiciplinario Suministro y colocación de colgante peatonal: Estructura a: 75 Cm ancho x 12.50 Cm alto lámina de acrilico 3mm color negro mate. Estructura b: 80 Cm ancho x 12.50 Cm alto. Lámina de mdf hidrófugo de 18 mm de espesor enchapado con textura de madera en los laterales y enchapado color negro en los bordes. Gráficos: Textos y gráficos en vinil de corte color blanco mate. Instalado a 220 cm del suelo. Estructura centra y anclada a puerta.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+| Clave |
+Descripción del Análisis de Precio Unitario |
+Unidad |
+
+
+
+
+| 030504 |
+Concreto hecho en obra en cimentación F'C=250 kg/cm2 con agregado de 19 mm (3/4") Incluye: cemento, arena, grava, agua, mano de obra para la fabricación de concreto con revolvedora de 1 saco . |
+m3 |
+
+
+
+
+
+
+
+| Clave |
+Descripción |
+Unidad |
+Cantidad |
+Costo |
+Importe |
+
+
+
+
+
+| AGRE-016 |
+Agua potable |
+m3 |
+0.237500 |
+$19.14 |
+$4.55 |
+
+
+| AGRE-001 |
+Arena en camión de 6 m3 |
+m3 |
+0.541500 |
+$1,750.00 |
+$947.63 |
+
+
+| CMC-39530 |
+Cemento gris contenido 50 kg. x saco,(En la compra mínima de 5 ton) marca Cruz Azul |
+ton |
+0.420000 |
+$1,926.74 |
+$809.23 |
+
+
+| AGRE-002 |
+Grava de 3/4" (19 mm) en camión de 6 m3 |
+m3 |
+0.646000 |
+$1,850.00 |
+$1,195.10 |
+
+
+ |
+Suma de Material |
+ |
+ |
+ |
+$2,956.51 |
+
+
+
+| MOCU-027 |
+Cuadrilla No 27 (1 Albañil + 5 Peones) |
+jor |
+0.100000 |
+$2,257.04 |
+$225.70 |
+
+
+ |
+Suma de Mano de Obra |
+ |
+ |
+ |
+$225.70 |
+
+
+
+| FACHEME |
+Herramienta menor |
+(%)mo |
+0.030000 |
+$225.70 |
+$6.77 |
+
+
+| HESEG-001 |
+Porcentaje de equipo de seguridad |
+(%)mo |
+0.020000 |
+$225.70 |
+$4.51 |
+
+
+ |
+Suma de Herramienta |
+ |
+ |
+ |
+$11.28 |
+
+
+
+| AMALI-017 |
+Vibrador de gasolina marca Felsa modelo vibromax cap. 12000 VPM, con manguera de 4.00 mts, y cabezal de por 38 mm ( 1 1/2"), con motor de gasolina de 4 H. P. |
+hora |
+0.500000 |
+$80.44 |
+$40.22 |
+
+
+| AMAIN-001 |
+Revolvedora para concreto marca Cipsa modelo R10 de un saco tipo trompo, cap. 5 m3/hr, motor a gasolina marca Kohler de 8 HP, con reductor, montada sobre ruedas tipo B78X-13, peso de la máquina con motor 363 kg. |
+hora |
+0.670000 |
+$74.35 |
+$49.81 |
+
+
+ |
+Suma de Equipo |
+ |
+ |
+ |
+$90.03 |
+
+
+ |
+Costo Directo |
+ |
+ |
+ |
+$3,283.52 |
+
+
+
+
Introducción: La Receta Maestra para Cimientos Sólidos
+
El concreto hecho en obra con una resistencia a la compresión de f′c=250 kg/cm2 es uno de los materiales más importantes y versátiles en la construcción estructural en México. Pensemos en su dosificación como la receta de un pastel: si se alteran las proporciones de los ingredientes, el resultado final no tendrá la consistencia ni la resistencia esperada. De manera similar, alcanzar la resistencia de 250 kilogramos de fuerza por cada centímetro cuadrado depende de una mezcla precisa de cemento, arena, grava y agua. Esta guía completa está diseñada para desglosar cada aspecto del
+
precio unitario concreto hecho en obra 250, desde la dosificación exacta y el análisis de costos detallado para 2025, hasta el proceso de elaboración, los usos principales y el cumplimiento normativo. La decisión de fabricar el concreto en el sitio (hecho en obra) ofrece un mayor control sobre el presupuesto, pero exige una disciplina rigurosa en el proceso para garantizar la calidad y seguridad de la estructura. A lo largo de este documento, se proporcionarán las herramientas necesarias para equilibrar costo y calidad, asegurando que su proyecto tenga cimientos verdaderamente sólidos.
+
Opciones y Alternativas al Concreto Hecho en Obra
+
Aunque el concreto hecho en obra es una solución común, especialmente en proyectos de menor escala, existen alternativas en el mercado mexicano que ofrecen diferentes balances entre costo, calidad y logística. Conocerlas permite tomar una decisión informada y adecuada para las necesidades específicas de cada proyecto.
+
Concreto Premezclado de f'c=250 kg/cm²: Calidad Garantizada vs. Costo
+
El concreto premezclado es aquel que se fabrica en una planta industrial bajo procesos estandarizados y se transporta a la obra en camiones revolvedores. Su principal ventaja es el riguroso control de calidad. La dosificación es automatizada y precisa, lo que garantiza que la resistencia especificada de f′c=250 kg/cm2 se cumpla consistentemente. Esto reduce drásticamente los errores humanos, el desperdicio de material en obra y asegura una mezcla homogénea.
+
Sin embargo, sus desventajas son principalmente logísticas y de costo. El precio por metro cúbico del concreto premezclado es, por lo general, más alto que el costo de los materiales para hacerlo en obra. Además, requiere una planificación cuidadosa, ya que se debe tener todo listo para recibir y colar el volumen completo solicitado en un tiempo limitado. Para obras muy pequeñas (menos de 3 m³) o en ubicaciones de difícil acceso, la logística puede complicarse y encarecer el servicio.
+
Concretos de Diferente Resistencia: ¿Cuándo Usar f'c=200 o f'c=150 kg/cm²?
+
No todos los elementos de una construcción requieren la alta capacidad de carga de un concreto de 250 kg/cm2. Utilizar una resistencia menor donde es apropiado es una forma inteligente de optimizar el presupuesto.
+
+ - Concreto f′c=200 kg/cm2: Es adecuado para elementos estructurales de exigencia moderada, como losas de entrepiso y azotea en viviendas, zapatas y trabes de dimensiones estándar. Su costo es menor debido a que requiere una menor cantidad de cemento por metro cúbico.
+ - Concreto f′c=150 kg/cm2: Se reserva para elementos con una función estructural secundaria o nula. Es ideal para la construcción de banquetas, firmes (pisos de concreto sobre el terreno), plantillas de cimentación, dalas de desplante y castillos que principalmente confinan muros de mampostería.
+
+
Optar por una resistencia menor para ahorrar en un elemento estructural crítico, como una columna principal, es un error grave. El aparente ahorro inicial se convierte en un riesgo estructural inaceptable, cuyo costo de reparación o falla sería infinitamente mayor. La clave es usar la resistencia adecuada para cada aplicación específica.
+
El Poder de los Aditivos: Modificando el Concreto a tu Medida
+
Los aditivos son productos químicos que se añaden a la mezcla en pequeñas cantidades para modificar las propiedades del concreto fresco o endurecido. Su uso puede representar un costo adicional, pero los beneficios en rendimiento y durabilidad a largo plazo suelen justificar la inversión. En México, los más comunes son:
+
+ - Plastificantes y Superplastificantes: Aumentan la fluidez (trabajabilidad) de la mezcla sin necesidad de añadir más agua. Esto es crucial, ya que el exceso de agua es el principal enemigo de la resistencia del concreto.
+ - Acelerantes de Fraguado: Reducen el tiempo que tarda el concreto en endurecer. Son útiles en climas fríos o cuando se necesita habilitar una estructura rápidamente. Sus precios varían, con presentaciones de 4 litros costando alrededor de 375 MXN.
+ - Retardantes de Fraguado: Aumentan el tiempo de fraguado, lo que es ideal en climas muy cálidos para evitar que el concreto se endurezca antes de poder colocarlo y acabarlo correctamente.
+ - Impermeabilizantes Integrales: Reducen la permeabilidad del concreto, haciéndolo más resistente al paso del agua. Son indispensables en la construcción de cisternas, albercas, cimentaciones en zonas húmedas y muros de contención.
+ - Adhesivos: Se utilizan para mejorar la adherencia entre concreto nuevo y concreto ya endurecido, siendo fundamentales en reparaciones y ampliaciones. Los precios de adhesivos en presentaciones de 4 litros rondan los 420 MXN.
+
+
Proceso de Elaboración Paso a Paso
+
Fabricar concreto en obra es un proceso que requiere método y atención al detalle. Seguir estos pasos garantiza una mezcla de calidad que alcanzará la resistencia proyectada.
+
1. Preparación y Limpieza de Agregados
+
La calidad de los agregados es tan importante como la del cemento. La arena y la grava deben estar limpias, libres de tierra, arcilla, hojas, basura u otros contaminantes orgánicos. Estas impurezas impiden una buena adherencia con la pasta de cemento y pueden debilitar significativamente el concreto final. Si los materiales están sucios, deben lavarse y dejarse secar antes de su uso.
+
2. Dosificación Precisa de Materiales
+
Este es el corazón del proceso. Para una revolvedora estándar de un saco, la medición se realiza comúnmente por volumen utilizando botes de 19 litros. Es fundamental que cada "bachada" (carga de la revolvedora) tenga exactamente las mismas proporciones para asegurar la uniformidad del concreto en toda la estructura.
+
3. Proceso de Mezclado en Revolvedora
+
El orden de los ingredientes importa para lograr una mezcla homogénea. Un método recomendado es:
+
+ - Verter aproximadamente la mitad del agua requerida y una parte de la grava.
+ - Añadir el saco completo de cemento y toda la arena.
+ - Agregar el resto de la grava y, gradualmente, el agua restante hasta obtener la consistencia deseada.
+El tiempo de mezclado debe ser de entre 3 y 5 minutos después de que todos los materiales estén dentro de la revolvedora. Un tiempo menor puede resultar en una mezcla no uniforme.16
+
+
4. Transporte y Vaciado (Colado)
+
El concreto fresco tiene una vida útil limitada. Debe ser transportado desde la revolvedora (generalmente en carretillas) y vaciado en la cimbra en un lapso no mayor a 30-60 minutos después de su preparación. Para evitar la segregación (separación de la grava del resto de la mezcla), no se debe dejar caer el concreto desde una altura superior a 1.5 metros.
+
5. Vibrado para Eliminar Aire Atrapado
+
Una vez vaciado, el concreto contiene aire atrapado que forma burbujas y huecos (conocidos como "nidos de abeja" o "panales"). El uso de un vibrador de inmersión es indispensable para compactar la mezcla, eliminar estas burbujas y asegurar que el concreto llene todos los espacios de la cimbra y rodee completamente el acero de refuerzo.
+
6. Acabado y Curado del Concreto
+
El acabado se refiere a dar la textura final a la superficie (floteado, allanado, etc.). Inmediatamente después, comienza el paso más crítico y a menudo más descuidado: el curado. El curado consiste en mantener la superficie del concreto húmeda durante al menos los primeros 7 días. Esto se puede lograr con riegos constantes de agua, cubriendo la superficie con lonas plásticas o aplicando membranas de curado. Un curado adecuado es esencial para que la reacción química de hidratación del cemento se complete y el concreto alcance su máxima resistencia y durabilidad.
+
Listado de Materiales, Herramientas y Equipo
+
Para llevar a cabo la fabricación de concreto en obra de manera eficiente y segura, es necesario contar con un inventario completo de materiales, herramientas y equipo. La siguiente tabla sirve como una lista de verificación práctica.
+
+
+ | Componente |
+ Descripción de Uso |
+ Unidad de Medida Común |
+
+
+ | Materiales |
+ |
+ |
+
+
+ | Cemento Portland Compuesto (CPC 30R) |
+ Aglomerante principal que da resistencia a la mezcla. |
+ Saco (50 kg) |
+
+
+ | Arena |
+ Agregado fino que rellena los huecos entre la grava. |
+ Metro cúbico (m³) |
+
+
+ | Grava de 3/4" |
+ Agregado grueso que forma el esqueleto resistente del concreto. |
+ Metro cúbico (m³) |
+
+
+ | Agua |
+ Componente esencial para la reacción química (hidratación) del cemento. |
+ Litro (L) |
+
+
+ | Herramienta y Equipo |
+ |
+ |
+
+
+ | Revolvedora de 1 saco |
+ Equipo para mezclar los componentes de forma mecánica y homogénea. |
+ Renta por día/semana |
+
+
+ | Palas |
+ Para cargar los agregados y el cemento en la revolvedora. |
+ Pieza |
+
+
+ | Carretillas |
+ Para transportar el concreto fresco desde la revolvedora hasta el punto de colado. |
+ Pieza |
+
+
+ | Vibrador de concreto (de aguja) |
+ Equipo para compactar el concreto y eliminar el aire atrapado. |
+ Renta por día |
+
+
+ | Botes o cubetas de 19 L |
+ Recipientes estandarizados para la dosificación volumétrica de los materiales. |
+ Pieza |
+
+
+ | Manguera con pistola de riego |
+ Para añadir agua a la mezcla y para el proceso de curado. |
+ Pieza |
+
+
+ | Lona plástica o membrana de curado |
+ Para cubrir el concreto y mantener la humedad durante el curado. |
+ Rollo o cubeta |
+
+
+
+
Dosificación y Cantidades para 1 m³ de Concreto f'c=250 kg/cm²
+
Esta sección presenta la "receta" detallada para preparar un metro cúbico de concreto con la resistencia especificada. Si bien la medición en obra se realiza comúnmente con botes de 19 litros, es una práctica que introduce variabilidad. El volumen real de agregado en un bote puede cambiar según su humedad y grado de compactación. Por ello, es crucial ser consistente en la forma de llenado (siempre a ras, sin copete) para minimizar errores.
+
La siguiente tabla consolida varias fuentes y recomendaciones de fabricantes en México para ofrecer una dosificación confiable.
+
+
+ | Material |
+ Cantidad por m³ |
+ Unidad |
+ Proporción Común (por saco de cemento de 50 kg) |
+
+
+ | Cemento Portland Compuesto (CPC 30R) |
+ 8 |
+ Sacos |
+ 1 Saco |
+
+
+ | Arena |
+ 0.53 |
+ m³ |
+ 3.5 botes (aprox. 66.5 L) |
+
+
+ | Grava de 3/4" |
+ 0.68 |
+ m³ |
+ 4.5 botes (aprox. 85.5 L) |
+
+
+ | Agua |
+ 228 |
+ Litros |
+ 1.5 botes (aprox. 28.5 L) |
+
+
+
+
Nota Importante: Estas cantidades son una estimación y pueden requerir ajustes. Las características específicas de los agregados locales (su absorción, densidad y forma) influyen en las proporciones finales. Se recomienda realizar una prueba de revenimiento para verificar la consistencia de la primera mezcla.
+
Análisis de Precio Unitario (APU) para 1 m³ - Ejemplo Detallado
+
El Análisis de Precio Unitario (APU) es la herramienta estándar para calcular el costo real de un metro cúbico de concreto. A continuación, se presenta un ejemplo detallado con costos proyectados para 2025.
+
Advertencia Crítica: Los costos aquí presentados son una estimación o proyección para 2025, basados en datos de finales de 2024. Son aproximados y están sujetos a inflación, tipo de cambio y, sobre todo, a variaciones regionales significativas dentro de México. Se recomienda siempre cotizar los materiales y la mano de obra en su localidad.
+
+
+ | Concepto |
+ Unidad |
+ Cantidad |
+ Costo Unitario (MXN) |
+ Importe (MXN) |
+
+
+ | 1. Materiales |
+ |
+ |
+ |
+ |
+
+
+ | Cemento CPC 30R |
+ Saco |
+ 8.00 |
+ $280.00 |
+ $2,240.00 |
+
+
+ | Arena |
+ m³ |
+ 0.53 |
+ $450.00 |
+ $238.50 |
+
+
+ | Grava 3/4" |
+ m³ |
+ 0.68 |
+ $600.00 |
+ $408.00 |
+
+
+ | Agua |
+ m³ |
+ 0.23 |
+ $40.00 |
+ $9.20 |
+
+
+ | Subtotal Materiales |
+ |
+ |
+ |
+ $2,895.70 |
+
+
+ | 2. Mano de Obra |
+ |
+ |
+ |
+ |
+
+
+ | Cuadrilla (1 Oficial Albañil + 1 Peón) |
+ Jornada |
+ 0.25 |
+ $1,000.00 |
+ $250.00 |
+
+
+ | Subtotal Mano de Obra |
+ |
+ |
+ |
+ $250.00 |
+
+
+ | 3. Herramienta y Equipo |
+ |
+ |
+ |
+ |
+
+
+ | Herramienta menor (% de Mano de Obra) |
+ % |
+ 3.00 |
+ $250.00 |
+ $7.50 |
+
+
+ | Renta de Revolvedora de 1 saco |
+ Día |
+ 0.25 |
+ $450.00 |
+ $112.50 |
+
+
+ | Renta de Vibrador para concreto |
+ Día |
+ 0.25 |
+ $500.00 |
+ $125.00 |
+
+
+ | Subtotal Herramienta y Equipo |
+ |
+ |
+ |
+ $245.00 |
+
+
+ | COSTO DIRECTO TOTAL POR m³ |
+ |
+ |
+ |
+ $3,390.70 |
+
+
+
+
Fuentes de costos base:. La jornada de la cuadrilla se estima en $1,000.00 MXN (aprox. $600 Oficial + $400 Peón) y se considera un rendimiento de 4 m³ por jornada.
+
Normativa, Permisos y Seguridad: Construye con Confianza
+
La construcción en México está regulada para garantizar la seguridad y calidad de las edificaciones. Ignorar estos aspectos puede resultar en sanciones, clausuras y, lo más grave, fallas estructurales.
+
Normas Mexicanas (NMX) Aplicables
+
Las Normas Mexicanas (NMX), emitidas por el Organismo Nacional de Normalización y Certificación de la Construcción y Edificación (ONNCCE), establecen los estándares de calidad para materiales y procesos. Las más relevantes para el concreto son:
+
+ - NMX-C-414-ONNCCE: Especifica los requisitos de calidad para los diferentes tipos de Cemento Portland que se comercializan en México. Asegura que el aglomerante principal de su mezcla cumple con los estándares de resistencia y composición química.
+ - NMX-C-111-ONNCCE: Define las características que deben cumplir los agregados (arena y grava), como su limpieza, tamaño (granulometría) y forma. Su cumplimiento es vital para evitar el uso de materiales contaminados que puedan afectar negativamente la resistencia del concreto.
+ - NMX-C-083-ONNCCE: Establece el método estandarizado para realizar la prueba de resistencia a la compresión en cilindros de concreto. Este ensayo es la forma oficial de verificar que el concreto ha alcanzado la resistencia de diseño, en este caso, 250 kg/cm2.
+
+
¿Necesito un Permiso de Construcción?
+
Sí. Aunque la fabricación del concreto en sí misma no requiere un permiso, el elemento estructural que se va a construir con él (una cimentación, una columna, una losa) sí lo necesita. Prácticamente cualquier obra nueva, ampliación o modificación estructural requiere una Licencia de Construcción o Manifestación de Construcción ante el municipio o alcaldía correspondiente.
+
Para la mayoría de las obras estructurales, es obligatoria la figura del Director Responsable de Obra (DRO). El DRO es un arquitecto o ingeniero civil con registro oficial, quien es el responsable legal ante las autoridades de que la construcción se ejecute de acuerdo con el reglamento y las normas de seguridad aplicables. En la Ciudad de México, por ejemplo, su participación es mandatoria para construcciones de más de 60 m².
+
Seguridad en el Sitio de Trabajo (Equipo de Protección Personal - EPP)
+
El cemento y el concreto fresco son materiales alcalinos y abrasivos que pueden causar quemaduras químicas, dermatitis y lesiones. El manejo de equipo pesado también presenta riesgos. Por ello, el uso de Equipo de Protección Personal (EPP) es indispensable para todos los trabajadores involucrados :
+
+ - Casco de seguridad: Protege contra la caída de objetos.
+ - Gafas de seguridad: Evitan salpicaduras de la mezcla en los ojos, especialmente durante el vibrado.
+ - Guantes de hule o nitrilo: Protegen la piel del contacto directo con el concreto fresco.
+ - Botas de seguridad impermeables con casquillo: Protegen los pies de aplastamientos y del contacto con la mezcla.
+ - Mascarilla contra polvo (cubrebocas): Esencial al manipular sacos de cemento para evitar la inhalación de partículas.
+
+
Costos Promedio por Región de México (Proyección 2025)
+
El precio unitario del concreto hecho en obra no es uniforme en todo el país. La principal causa de esta variación es el costo de los agregados pétreos (arena y grava). La distancia desde los bancos de materiales hasta el punto de venta o la obra impacta directamente en el precio final debido a los costos de transporte. Regiones con abundancia de canteras cercanas tendrán costos más bajos que aquellas que deben importar los agregados desde lejos.
+
+
+ | Región |
+ Costo Promedio por m³ (MXN) - Proyección 2025 |
+ Factores de Variación |
+
+
+ | Norte (Ej. Monterrey) |
+ $3,200 - $3,500 |
+ Costo de agregados moderado, mano de obra competitiva. |
+
+
+ | Occidente (Ej. Guadalajara) |
+ $3,100 - $3,400 |
+ Buena disponibilidad de bancos de materiales, costos competitivos. |
+
+
+ | Centro (Ej. CDMX y Edo. de México) |
+ $3,300 - $3,600 |
+ Alta demanda, costos logísticos y de transporte elevados en la zona metropolitana. |
+
+
+ | Sur-Sureste (Ej. Mérida, Cancún) |
+ $3,500 - $3,900 |
+ El costo de los agregados tiende a ser más alto debido a la geología de la península y la necesidad de transportarlos. |
+
+
+
+
Usos Comunes en la Construcción
+
Un concreto con una resistencia de f′c=250 kg/cm2 es considerado de uso estructural por excelencia. Su capacidad para soportar cargas de compresión lo hace ideal para los elementos más críticos de una edificación.
+
Cimentaciones (Zapatas y Losas)
+
Es la elección predilecta para cimentaciones de edificios de varios niveles, naves industriales o cualquier estructura que deba transmitir cargas pesadas al suelo. Su resistencia garantiza una base sólida y duradera, capaz de soportar el peso de toda la construcción.
+
Columnas y Castillos
+
Como elementos verticales de soporte, las columnas son las encargadas de transmitir las cargas de las losas y trabes hacia la cimentación. Un concreto de 250 kg/cm² proporciona la robustez necesaria para resistir estas cargas de compresión y asegurar la estabilidad de la estructura.
+
Trabes y Vigas
+
Estos elementos horizontales soportan el peso de los pisos y techos, y lo distribuyen hacia las columnas. La resistencia de 250 kg/cm² es fundamental para permitir claros (distancias entre apoyos) más grandes y soportar cargas vivas y muertas significativas sin deformaciones excesivas.
+
Losas de Entrepiso y Azotea
+
Aunque en viviendas unifamiliares a veces se utiliza f'c=200 kg/cm², el concreto de 250 kg/cm² es indispensable para losas que soportarán cargas pesadas (como estacionamientos, bodegas o áreas con maquinaria), o en losas con diseños estructurales complejos y claros amplios.
+
Errores Frecuentes y Cómo Evitarlos
+
La promesa de ahorro del concreto hecho en obra se desvanece si no se evitan ciertos errores críticos que comprometen la calidad y seguridad del resultado final.
+
Dosificación Incorrecta ('a ojo')
+
El error más básico es no medir los materiales. Usar "paladas" en lugar de botes estandarizados lleva a proporciones inconsistentes entre una bachada y otra, resultando en un concreto de resistencia variable y poco confiable. La solución es simple: usar siempre un bote medidor y seguir la dosificación al pie de la letra.
+
Relación Agua/Cemento Alterada (exceso de agua)
+
Es la falla más común y peligrosa. Los trabajadores a menudo agregan más agua de la necesaria para que la mezcla sea más "manejable" o fluida. Sin embargo, cada gota de agua extra reduce la resistencia final del concreto. Un concreto con exceso de agua puede perder hasta un 50% de su resistencia diseñada, además de ser más propenso a fisuras y a la permeabilidad. Para mejorar la trabajabilidad, la solución correcta es usar un aditivo plastificante, no más agua.
+
Mezclado Insuficiente
+
Apagar la revolvedora antes de tiempo para acelerar el proceso es contraproducente. Un mezclado de menos de 3 minutos no garantiza que la pasta de cemento cubra uniformemente cada partícula de arena y grava. Esto crea una mezcla no homogénea con puntos débiles que pueden fallar bajo carga.
+
Falta de un Buen Curado
+
Muchos consideran el trabajo terminado una vez que el concreto está colocado y con el acabado listo. Sin embargo, sin un curado adecuado, el agua de la mezcla se evapora demasiado rápido, deteniendo la reacción de hidratación del cemento. Un concreto que no se cura correctamente nunca alcanzará su resistencia de diseño de 250 kg/cm2, sin importar cuán bien se haya dosificado y mezclado.
+
Checklist de Control de Calidad
+
Utilice esta lista de verificación rápida en cada etapa del proceso para asegurar un resultado de alta calidad.
+
+ - Antes de mezclar:
+
+ - Verificar que la arena y la grava estén limpias, sin tierra ni basura.
+ - Revisar que los sacos de cemento estén secos y el polvo suelto, sin grumos duros que indiquen hidratación prematura.
+ - Asegurarse de tener todos los materiales y herramientas a la mano.
+
+ - Durante el mezclado:
+
+ - Usar botes para medir las proporciones exactas en cada carga de la revolvedora.
+ - Respetar el tiempo de mezclado de 3 a 5 minutos.
+ - Controlar la cantidad de agua; la mezcla debe ser plástica, no líquida.
+
+ - Después del vaciado:
+
+ - Asegurar un vibrado completo y sistemático para eliminar todo el aire atrapado.
+ - Comenzar el curado (mantener la superficie húmeda) tan pronto como sea posible sin dañar el acabado.
+ - Mantener el curado de forma continua por un mínimo de 7 días.
+
+
Mantenimiento y Vida Útil: Protege tu Inversión
+
Una vez que el concreto ha sido colocado y curado, el trabajo no termina. Un mantenimiento adecuado y la inspección periódica son clave para proteger la inversión y asegurar que la estructura alcance su máxima vida útil.
+
Inspección de Elementos de Concreto
+
Es recomendable realizar inspecciones visuales periódicas (al menos una vez al año) en los elementos de concreto. Se debe buscar:
+
+ - Fisuras y grietas: Diferenciar entre microfisuras superficiales (comunes por contracción) y grietas estructurales más anchas o que atraviesan el elemento.
+ - Desprendimientos o "desconchones": Zonas donde el concreto se ha caído, a menudo exponiendo el acero de refuerzo.
+ - Manchas de humedad o eflorescencia: Depósitos de sales blancas que indican que el agua se está filtrando a través del concreto.
+ - Manchas de óxido: Indican que la humedad ha llegado al acero de refuerzo y ha comenzado el proceso de corrosión, lo cual es un signo de alerta grave.
+
+
Durabilidad y Vida Útil Esperada en México
+
Una estructura de concreto bien diseñada, ejecutada con materiales de calidad y con un curado correcto, puede tener una vida útil superior a los 50 años, e incluso superar los 100 años con un mantenimiento adecuado. Sin embargo, ciertos factores pueden acortar drásticamente esta durabilidad. El más significativo en México es la exposición a ambientes agresivos. En zonas costeras, el ataque de cloruros (salitre) acelera la corrosión del acero de refuerzo. En zonas industriales, la exposición a sulfatos u otros químicos puede deteriorar el concreto mismo. En estos casos, se requieren diseños de mezcla especiales y recubrimientos protectores.
+
Sostenibilidad e Impacto Ambiental
+
La producción de cemento es una de las industrias con mayor huella de carbono a nivel mundial, siendo responsable de aproximadamente el 7% de las emisiones de CO2. La calcinación de la piedra caliza, proceso fundamental para crear el clínker (componente principal del cemento), libera grandes cantidades de este gas de efecto invernadero. En México, empresas líderes como Cemex y Holcim están invirtiendo en alternativas más sostenibles, como los cementos de bajo carbono (líneas Vertua y ECOPact), que utilizan adiciones minerales para reducir la cantidad de clínker necesario, disminuyendo así las emisiones de CO2 asociadas a su producción. Otra vía de sostenibilidad es el uso de agregados reciclados, provenientes de la demolición de otras estructuras de concreto, lo que reduce la explotación de recursos naturales.
+
Preguntas Frecuentes (FAQ)
+
¿Qué significa f'c=250 kg/cm²?
+
El término f′c se refiere a la "resistencia especificada a la compresión" del concreto. Significa que una muestra cilíndrica estandarizada de ese concreto, después de 28 días de curado, debe ser capaz de soportar una carga de compresión de al menos 250 kilogramos por cada centímetro cuadrado de su superficie antes de fallar.
+
¿Cuántos botes de arena y grava necesito para un saco de cemento para concreto 250?
+
La proporción más común y recomendada en México es de 1 saco de cemento (50 kg), 3.5 botes de arena, 4.5 botes de grava y 1.5 botes de agua. Se utilizan botes de 19 litros como medida estándar.
+
¿Es más barato hacer el concreto en obra o comprarlo premezclado?
+
Generalmente, el costo directo de los materiales para hacer 1 m³ de concreto en obra es menor que el precio de 1 m³ de concreto premezclado. Sin embargo, para proyectos de mediana a gran escala, el premezclado puede ser más rentable al considerar el ahorro en mano de obra, la rapidez del colado, la eliminación de desperdicios y la garantía de calidad.
+
¿Cuánto tiempo debo curar el concreto?
+
El curado es un proceso indispensable y debe durar un mínimo de 7 días consecutivos. Durante este tiempo, la superficie del concreto debe mantenerse constantemente húmeda para asegurar que alcance la resistencia de diseño.
+
¿Puedo agregar más agua a la mezcla si está muy dura?
+
No, bajo ninguna circunstancia. Agregar agua extra a una mezcla ya preparada es el error más común y perjudicial. Diluye la pasta de cemento y reduce drásticamente la resistencia y durabilidad del concreto. Si se necesita una mezcla más fluida, la solución correcta es utilizar un aditivo plastificante.
+
¿Cuántos sacos de cemento se necesitan para 1 m³ de concreto 250?
+
Se requieren aproximadamente 8 sacos de cemento de 50 kg para producir un metro cúbico de concreto con una resistencia de f′c=250 kg/cm2.
+
¿Qué tipo de cemento debo usar?
+
Para la mayoría de las aplicaciones estructurales en México, el Cemento Portland Compuesto de clase resistente 30 con Resistencia Rápida (designado como CPC 30 R) es la opción estándar y adecuada para fabricar un concreto de 250 kg/cm².
+
Videos Relacionados y Útiles
+
Para complementar la información de esta guía, se recomiendan los siguientes videos que muestran de forma práctica el proceso de dosificación y mezclado en obra, utilizando las herramientas y técnicas comunes en México.
+
Video del canal ARTOSKETCH que explica los diferentes tipos de concreto, sus resistencias, dosificaciones y cómo calcular la cantidad de materiales necesarios.
+
Video del canal ARTOSKETCH que explica los diferentes tipos de concreto, sus resistencias, dosificaciones y cómo calcular la cantidad de materiales necesarios.
+
+
+
+
+
Un tutorial práctico que detalla la cantidad de botes de arena, grava y agua necesarios por cada saco de cemento para lograr una resistencia de 250 kg/cm².
+
Un tutorial práctico que detalla la cantidad de botes de arena, grava y agua necesarios por cada saco de cemento para lograr una resistencia de 250 kg/cm².
+
+
+
+
+
El canal "construcciones sergero" muestra el proceso paso a paso de cómo cargar y mezclar los materiales en una revolvedora (trompo) para un concreto estructural.
+
El canal "construcciones sergero" muestra el proceso paso a paso de cómo cargar y mezclar los materiales en una revolvedora (trompo) para un concreto estructural.
+
+
+
+
+
Conclusión
+
Dominar la preparación y el costo del concreto estructural es fundamental para el éxito de cualquier proyecto de construcción. Como hemos visto, la clave para alcanzar una resistencia de 250 kg/cm2 no reside en un solo factor, sino en la suma de un proceso bien ejecutado: una dosificación precisa, el uso de materiales limpios, un mezclado homogéneo, un vibrado correcto y, sobre todo, un curado diligente. El análisis de costos demuestra que, si bien los materiales son el componente principal del precio, la eficiencia de la mano de obra y el uso adecuado del equipo son cruciales para mantener el presupuesto bajo control. Entender a fondo el precio unitario concreto hecho en obra 250 implica reconocer que cada paso, desde la selección de la arena hasta el último día de curado, es una inversión directa en la seguridad, durabilidad y valor de la edificación.
+
Glosario de Términos
+
+ - f'c (Resistencia a la Compresión): Esfuerzo máximo de compresión que un concreto puede soportar antes de fallar. Se mide en kg/cm² a los 28 días de edad.
+ - Dosificación: La proporción o "receta" específica de los componentes (cemento, arena, grava y agua) para elaborar una mezcla de concreto con características definidas.
+ - Agregado Pétreo: Materiales inertes y granulares que forman el esqueleto del concreto. Se dividen en agregado fino (arena) y agregado grueso (grava).
+ - Revenimiento: Medida de la consistencia o fluidez del concreto fresco. Se determina mediante el ensayo del "Cono de Abrams".
+ - Curado: Proceso de control de la humedad y temperatura del concreto recién colocado para asegurar la hidratación completa del cemento y el desarrollo de la resistencia.
+ - Aditivo: Sustancia química que se añade a la mezcla de concreto para modificar sus propiedades, como el tiempo de fraguado, la trabajabilidad o la permeabilidad.
+ - Concreto Premezclado: Concreto que se dosifica y mezcla en una planta central y se entrega en la obra listo para ser utilizado.
+
+
+
+
+
+
+
+
+
+
+
+
Accede a 200,000+ Análisis de Precios Unitarios
+
Consulta estructuras completas, insumos y dosificaciones de los APUs más utilizados en construcción en México.
+
+
+
+
+
+
+
+
+
+
¿Necesitas Consultar Más APUs?
+
Accede a nuestra biblioteca de 200,000 análisis de precios unitarios con estructuras detalladas y listados de insumos.
+
+
+
+
+
+
+
+
Descubre Más Contenido
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
¿Tienes alguna pregunta?
+
Completa el formulario y nuestro equipo te responderá en menos de 24 horas.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/_planificacion/roi-theme-template/js/main.js b/_planificacion/roi-theme-template/js/main.js
new file mode 100644
index 00000000..9faf49f2
--- /dev/null
+++ b/_planificacion/roi-theme-template/js/main.js
@@ -0,0 +1,317 @@
+/**
+ * APU MÉXICO - MAIN JAVASCRIPT
+ */
+
+// Navbar scroll effect
+window.addEventListener('scroll', function() {
+ const navbar = document.querySelector('.navbar');
+ if (navbar) {
+ if (window.scrollY > 50) {
+ navbar.classList.add('scrolled');
+ } else {
+ navbar.classList.remove('scrolled');
+ }
+ }
+});
+
+// Table of Contents - ScrollSpy
+function updateActiveSection() {
+ const tocLinks = document.querySelectorAll('.toc-container a');
+ if (!tocLinks.length) return;
+
+ const navbar = document.querySelector('.navbar');
+ const navbarHeight = navbar ? navbar.offsetHeight : 0;
+
+ const sectionIds = Array.from(tocLinks).map(link => {
+ const href = link.getAttribute('href');
+ return href ? href.substring(1) : null;
+ }).filter(id => id !== null);
+
+ const sections = sectionIds.map(id => document.getElementById(id)).filter(el => el !== null);
+ const scrollPosition = window.scrollY + navbarHeight + 100;
+
+ let activeSection = null;
+
+ for (let i = 0; i < sections.length; i++) {
+ const section = sections[i];
+ const sectionTop = section.offsetTop;
+
+ if (scrollPosition >= sectionTop) {
+ activeSection = section.getAttribute('id');
+ } else {
+ break;
+ }
+ }
+
+ tocLinks.forEach(link => {
+ link.classList.remove('active');
+ const href = link.getAttribute('href');
+ if (href === '#' + activeSection) {
+ link.classList.add('active');
+ }
+ });
+}
+
+// Smooth scroll for TOC links
+document.addEventListener('DOMContentLoaded', function() {
+ document.querySelectorAll('.toc-container a').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const targetId = this.getAttribute('href');
+ const targetElement = document.querySelector(targetId);
+
+ if (targetElement) {
+ const navbar = document.querySelector('.navbar');
+ const navbarHeight = navbar ? navbar.offsetHeight : 0;
+ const offsetTop = targetElement.offsetTop - navbarHeight - 40;
+
+ window.scrollTo({
+ top: offsetTop,
+ behavior: 'smooth'
+ });
+ }
+ });
+ });
+
+ updateActiveSection();
+});
+
+window.addEventListener('scroll', updateActiveSection);
+
+// A/B Testing for CTA sections
+document.addEventListener('DOMContentLoaded', function() {
+ const ctaVariant = Math.random() < 0.5 ? 'A' : 'B';
+
+ if (ctaVariant === 'A') {
+ const variantA = document.querySelector('.cta-variant-a');
+ if (variantA) variantA.style.display = 'block';
+ } else {
+ const variantB = document.querySelector('.cta-variant-b');
+ if (variantB) variantB.style.display = 'block';
+ }
+
+ document.querySelectorAll('.cta-button').forEach(button => {
+ button.addEventListener('click', function() {
+ const variant = this.getAttribute('data-cta-variant');
+ console.log('CTA clicked - Variant: ' + variant);
+
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'cta_click', {
+ 'event_category': 'CTA',
+ 'event_label': 'Variant_' + variant,
+ 'value': variant
+ });
+ }
+ });
+ });
+});
+
+// Contact Modal - Dynamic Loading
+function loadContactModal() {
+ const modalContainer = document.getElementById('modalContainer');
+ if (!modalContainer) return;
+
+ fetch('modal-contact.html')
+ .then(response => response.text())
+ .then(html => {
+ modalContainer.innerHTML = html;
+ initContactForm();
+ })
+ .catch(error => {
+ console.error('Error loading modal:', error);
+ });
+}
+
+document.addEventListener('DOMContentLoaded', loadContactModal);
+
+// Contact Form - Webhook Submission
+function initContactForm() {
+ const form = document.getElementById('contactForm');
+ if (!form) return;
+
+ form.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ const WEBHOOK_URL = 'https://tu-webhook.com/contacto';
+
+ const formData = {
+ fullName: document.getElementById('fullName').value,
+ company: document.getElementById('company').value,
+ whatsapp: document.getElementById('whatsapp').value,
+ email: document.getElementById('email').value,
+ comments: document.getElementById('comments').value,
+ timestamp: new Date().toISOString(),
+ source: 'APU Website - Modal'
+ };
+
+ if (!formData.fullName || !formData.whatsapp || !formData.email) {
+ showFormMessage('Por favor completa todos los campos requeridos', 'danger');
+ return;
+ }
+
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!emailRegex.test(formData.email)) {
+ showFormMessage('Por favor ingresa un correo electrónico válido', 'danger');
+ return;
+ }
+
+ const submitButton = form.querySelector('button[type="submit"]');
+ const originalText = submitButton.innerHTML;
+ submitButton.disabled = true;
+ submitButton.innerHTML = '
Enviando...';
+
+ fetch(WEBHOOK_URL, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(formData)
+ })
+ .then(response => {
+ if (!response.ok) throw new Error('Error en el envío');
+ return response.json();
+ })
+ .then(data => {
+ showFormMessage('¡Mensaje enviado exitosamente!', 'success');
+ form.reset();
+
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'form_submission', {
+ 'event_category': 'Contact Form',
+ 'event_label': 'Form Submitted'
+ });
+ }
+
+ setTimeout(() => {
+ const modal = bootstrap.Modal.getInstance(document.getElementById('contactModal'));
+ if (modal) modal.hide();
+ }, 2000);
+ })
+ .catch(error => {
+ showFormMessage('Error al enviar el mensaje', 'danger');
+ })
+ .finally(() => {
+ submitButton.disabled = false;
+ submitButton.innerHTML = originalText;
+ });
+ });
+}
+
+function showFormMessage(message, type) {
+ const messageDiv = document.getElementById('formMessage');
+ if (!messageDiv) return;
+
+ messageDiv.textContent = message;
+ messageDiv.className = `mt-3 alert alert-${type}`;
+ messageDiv.style.display = 'block';
+
+ setTimeout(() => {
+ messageDiv.style.display = 'none';
+ }, 5000);
+}
+
+// Footer Contact Form
+document.addEventListener('DOMContentLoaded', function() {
+ const footerForm = document.getElementById('footerContactForm');
+ if (!footerForm) return;
+
+ footerForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ const WEBHOOK_URL = 'https://tu-webhook.com/contacto';
+
+ const formData = {
+ fullName: document.getElementById('footerFullName').value,
+ company: document.getElementById('footerCompany').value,
+ whatsapp: document.getElementById('footerWhatsapp').value,
+ email: document.getElementById('footerEmail').value,
+ comments: document.getElementById('footerComments').value,
+ timestamp: new Date().toISOString(),
+ source: 'APU Website - Footer'
+ };
+
+ if (!formData.fullName || !formData.whatsapp || !formData.email) {
+ showFooterFormMessage('Por favor completa todos los campos requeridos', 'danger');
+ return;
+ }
+
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!emailRegex.test(formData.email)) {
+ showFooterFormMessage('Por favor ingresa un correo válido', 'danger');
+ return;
+ }
+
+ const submitButton = footerForm.querySelector('button[type="submit"]');
+ const originalText = submitButton.innerHTML;
+ submitButton.disabled = true;
+ submitButton.innerHTML = '
Enviando...';
+
+ fetch(WEBHOOK_URL, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(formData)
+ })
+ .then(response => {
+ if (!response.ok) throw new Error('Error en el envío');
+ return response.json();
+ })
+ .then(data => {
+ showFooterFormMessage('¡Mensaje enviado exitosamente!', 'success');
+ footerForm.reset();
+
+ if (typeof gtag !== 'undefined') {
+ gtag('event', 'form_submission', {
+ 'event_category': 'Footer Form',
+ 'event_label': 'Form Submitted'
+ });
+ }
+ })
+ .catch(error => {
+ showFooterFormMessage('Error al enviar el mensaje', 'danger');
+ })
+ .finally(() => {
+ submitButton.disabled = false;
+ submitButton.innerHTML = originalText;
+ });
+ });
+});
+
+function showFooterFormMessage(message, type) {
+ const messageDiv = document.getElementById('footerFormMessage');
+ if (!messageDiv) return;
+
+ messageDiv.textContent = message;
+ messageDiv.className = `col-12 mt-2 alert alert-${type}`;
+ messageDiv.style.display = 'block';
+
+ setTimeout(() => {
+ messageDiv.style.display = 'none';
+ }, 5000);
+}
+
+// Smooth scroll for all anchor links
+document.addEventListener('DOMContentLoaded', function() {
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ const href = this.getAttribute('href');
+
+ if (href === '#' || this.getAttribute('data-bs-toggle') === 'modal') {
+ return;
+ }
+
+ const targetElement = document.querySelector(href);
+ if (!targetElement) return;
+
+ e.preventDefault();
+
+ const navbar = document.querySelector('.navbar');
+ const navbarHeight = navbar ? navbar.offsetHeight : 0;
+ const offsetTop = targetElement.offsetTop - navbarHeight - 20;
+
+ window.scrollTo({
+ top: offsetTop,
+ behavior: 'smooth'
+ });
+ });
+ });
+});
+
+console.log('%c APU México ', 'background: #1e3a5f; color: #FF8600; font-size: 16px; font-weight: bold; padding: 10px;');
diff --git a/_planificacion/roi-theme-template/modal-contact.html b/_planificacion/roi-theme-template/modal-contact.html
new file mode 100644
index 00000000..f0b1d3b6
--- /dev/null
+++ b/_planificacion/roi-theme-template/modal-contact.html
@@ -0,0 +1,42 @@
+
+
diff --git a/_planificacion/validacion-specs-vs-codigo-actual.md b/_planificacion/validacion-specs-vs-codigo-actual.md
new file mode 100644
index 00000000..f504964c
--- /dev/null
+++ b/_planificacion/validacion-specs-vs-codigo-actual.md
@@ -0,0 +1,335 @@
+# Validación: Especificaciones vs Código Actual
+
+**Fecha:** 2026-01-08
+**Objetivo:** Verificar que las especificaciones reflejan el código existente
+
+---
+
+## Resumen Ejecutivo
+
+**CONCLUSIÓN: El código actual YA cumple con las especificaciones propuestas.**
+
+Las mejoras a las especificaciones son documentación/clarificación de patrones existentes, NO nuevas invenciones.
+
+---
+
+## 1. Arquitectura Clean Architecture
+
+### Verificación de Estructura de Capas
+
+| Capa | Ubicación Esperada | Estado |
+|------|-------------------|--------|
+| Domain | `*/Domain/` | ✅ Existe |
+| Application | `*/Application/` | ✅ Existe |
+| Infrastructure | `*/Infrastructure/` | ✅ Existe |
+
+### Evidencia: Estructura de Carpetas
+
+```
+Shared/
+├── Domain/
+│ └── Contracts/ # 23 interfaces
+├── Application/
+│ └── UseCases/ # Casos de uso
+└── Infrastructure/
+ └── Services/ # Implementaciones
+```
+
+### Evidencia: Contratos en Domain (23 interfaces)
+
+```
+Shared/Domain/Contracts/
+├── AjaxControllerInterface.php
+├── CSSGeneratorInterface.php
+├── ComponentRepositoryInterface.php
+├── RendererInterface.php
+├── SchemaSyncServiceInterface.php
+└── ... (18 más)
+```
+
+**VEREDICTO:** ✅ Clean Architecture implementada correctamente
+
+---
+
+## 2. Nomenclatura
+
+### Convención: Carpetas en PascalCase
+
+| Módulo | Carpeta Public | Carpeta Admin | Estado |
+|--------|---------------|---------------|--------|
+| ContactForm | `Public/ContactForm/` | `Admin/ContactForm/` | ✅ |
+| FeaturedImage | `Public/FeaturedImage/` | `Admin/FeaturedImage/` | ✅ |
+| Footer | `Public/Footer/` | `Admin/Footer/` | ✅ |
+| TopNotificationBar | `Public/TopNotificationBar/` | `Admin/TopNotificationBar/` | ✅ |
+
+**Módulos verificados:** 17 en Public/, 17 en Admin/
+
+### Convención: Schemas en kebab-case
+
+| Schema | Nombre Archivo | component_name | Estado |
+|--------|---------------|----------------|--------|
+| Contact Form | `contact-form.json` | `"contact-form"` | ✅ |
+| Featured Image | `featured-image.json` | `"featured-image"` | ✅ |
+| Top Notification Bar | `top-notification-bar.json` | `"top-notification-bar"` | ✅ |
+| CTA Box Sidebar | `cta-box-sidebar.json` | `"cta-box-sidebar"` | ✅ |
+
+**Schemas verificados:** 17 archivos JSON
+
+### Convención: Clases en PascalCase
+
+| Tipo | Patrón | Ejemplo Real | Estado |
+|------|--------|--------------|--------|
+| Renderer | `[Component]Renderer` | `ContactFormRenderer` | ✅ |
+| FormBuilder | `[Component]FormBuilder` | `ContactFormFormBuilder` | ✅ |
+| Handler | `[Component]AjaxHandler` | `NewsletterAjaxHandler` | ✅ |
+
+### Convención: Namespaces
+
+**Patrón:** `ROITheme\[Context]\[Component]\[Layer]`
+
+**Evidencia:**
+```php
+// ContactFormRenderer.php
+namespace ROITheme\Public\ContactForm\Infrastructure\Ui;
+
+// ContactFormFormBuilder.php
+namespace ROITheme\Admin\ContactForm\Infrastructure\Ui;
+
+// NewsletterAjaxHandler.php
+namespace ROITheme\Public\Footer\Infrastructure\Api\WordPress;
+```
+
+**VEREDICTO:** ✅ Nomenclatura consistente en todo el tema
+
+---
+
+## 3. Estándares de Código PHP
+
+### strict_types
+
+**Comando verificación:** `grep "declare(strict_types=1)" Public/ -r`
+**Resultado:** 43 archivos con strict_types
+
+| Ubicación | Archivos con strict_types | Total |
+|-----------|--------------------------|-------|
+| Public/ | 43 | 43 |
+| Admin/ (muestra) | ✅ Verificado | - |
+| Shared/ (muestra) | ✅ Verificado | - |
+
+### Clases final
+
+**Resultado:** 39 archivos usan `final class`
+
+**Evidencia:**
+```php
+// ContactFormRenderer.php:24
+final class ContactFormRenderer implements RendererInterface
+
+// ContactFormFormBuilder.php:19
+final class ContactFormFormBuilder
+
+// NewsletterAjaxHandler.php
+final class NewsletterAjaxHandler
+```
+
+### Inyección de Dependencias via Constructor
+
+**Patrón esperado:** Interfaces inyectadas, no clases concretas
+
+**Evidencia:**
+```php
+// ContactFormRenderer.php:28-30
+public function __construct(
+ private CSSGeneratorInterface $cssGenerator // ✅ Interface
+) {}
+
+// ContactFormFormBuilder.php:21-23
+public function __construct(
+ private AdminDashboardRenderer $renderer // ✅ DI via constructor
+) {}
+```
+
+**VEREDICTO:** ✅ Estándares PHP cumplidos
+
+---
+
+## 4. Patrones de Renderer
+
+### Patrón: supports() retorna kebab-case
+
+**Evidencia ContactFormRenderer.php:71-74:**
+```php
+private const COMPONENT_NAME = 'contact-form'; // ✅ kebab-case
+
+public function supports(string $componentType): bool
+{
+ return $componentType === self::COMPONENT_NAME; // ✅
+}
+```
+
+### Patrón: Validación de Visibilidad (3 campos)
+
+**Evidencia ContactFormRenderer.php:76-99:**
+```php
+private function isEnabled(array $data): bool
+{
+ $value = $data['visibility']['is_enabled'] ?? false; // ✅
+ return $value === true || $value === '1' || $value === 1;
+}
+
+private function getVisibilityClass(array $data): ?string
+{
+ $showDesktop = $data['visibility']['show_on_desktop'] ?? true; // ✅
+ $showMobile = $data['visibility']['show_on_mobile'] ?? true; // ✅
+ // ...
+}
+```
+
+### Patrón: CSS via Generator (no hardcodeado)
+
+**Evidencia ContactFormRenderer.php:49:**
+```php
+$css = $this->generateCSS($data); // ✅ Usa CSSGenerator inyectado
+```
+
+**VEREDICTO:** ✅ Patrones de Renderer cumplidos
+
+---
+
+## 5. Patrones de FormBuilder
+
+### Patrón: Design System Consistente
+
+**Colores esperados:** `#0E2337`, `#1e3a5f`, `#FF8600`
+
+**Evidencia ContactFormFormBuilder.php:57-58:**
+```php
+$html .= 'style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">';
+```
+
+### Patrón: data-component en kebab-case
+
+**Evidencia ContactFormFormBuilder.php:69:**
+```php
+$html .= '... data-component="contact-form">'; // ✅ kebab-case
+```
+
+### Patrón: Bootstrap 5
+
+**Evidencia ContactFormFormBuilder.php:31:**
+```php
+$html .= '
'; // ✅ Bootstrap 5 grid
+```
+
+**VEREDICTO:** ✅ Patrones de FormBuilder cumplidos
+
+---
+
+## 6. Patrones de Schema JSON
+
+### Campos Obligatorios de Visibilidad
+
+**Evidencia contact-form.json:6-31:**
+```json
+"visibility": {
+ "label": "Visibilidad",
+ "priority": 10,
+ "fields": {
+ "is_enabled": { ... }, // ✅ Obligatorio
+ "show_on_desktop": { ... }, // ✅ Obligatorio
+ "show_on_mobile": { ... } // ✅ Obligatorio
+ }
+}
+```
+
+### Estructura de Grupos
+
+**Evidencia contact-form.json:**
+```json
+{
+ "component_name": "contact-form", // ✅ kebab-case
+ "version": "1.0.0", // ✅ Versionado
+ "description": "...", // ✅ Documentado
+ "groups": {
+ "visibility": { "priority": 10 },
+ "content": { "priority": 20 },
+ // ...
+ }
+}
+```
+
+**VEREDICTO:** ✅ Patrones de Schema cumplidos
+
+---
+
+## 7. Estructura OpenSpec Actual
+
+### Archivos Existentes
+
+```
+openspec/
+├── AGENTS.md ✅ (456 líneas)
+├── project.md ✅ (contiene convenciones)
+├── specs/
+│ ├── 00arquitectura-limpia/spec.md ✅ (215 líneas)
+│ ├── 00estandares-codigo/spec.md ✅ (350 líneas)
+│ └── ...
+└── changes/ ✅ (registro de cambios)
+```
+
+### Archivos Faltantes (para mejorar)
+
+| Archivo | Estado | Acción |
+|---------|--------|--------|
+| WORKFLOW-ROI-THEME.md | ❌ No existe | CREAR |
+| nomenclatura/spec.md | ❌ No existe | CREAR |
+
+**NOTA:** Los archivos faltantes son DOCUMENTACIÓN de patrones que YA existen en el código.
+
+---
+
+## 8. Tabla Resumen de Validación
+
+| Especificación | Código Actual | Estado |
+|----------------|---------------|--------|
+| Clean Architecture (3 capas) | Shared/Domain, /Application, /Infrastructure | ✅ CUMPLE |
+| Carpetas PascalCase | ContactForm/, FeaturedImage/, etc. | ✅ CUMPLE |
+| Schemas kebab-case | contact-form.json, featured-image.json | ✅ CUMPLE |
+| component_name kebab-case | "contact-form", "featured-image" | ✅ CUMPLE |
+| strict_types=1 | 43+ archivos verificados | ✅ CUMPLE |
+| final class | 39+ clases verificadas | ✅ CUMPLE |
+| DI via constructor | CSSGeneratorInterface, etc. | ✅ CUMPLE |
+| supports() kebab-case | return 'contact-form' | ✅ CUMPLE |
+| 3 campos visibilidad | is_enabled, show_on_desktop, show_on_mobile | ✅ CUMPLE |
+| Design System colores | #0E2337, #1e3a5f, #FF8600 | ✅ CUMPLE |
+| Namespaces ROITheme\... | ROITheme\Public\ContactForm\... | ✅ CUMPLE |
+
+---
+
+## 9. Conclusión
+
+### El código existente YA implementa:
+
+1. **Clean Architecture** - Capas Domain/Application/Infrastructure
+2. **Convenciones de Nomenclatura** - PascalCase, kebab-case según contexto
+3. **Estándares PHP** - strict_types, final class, DI
+4. **Patrones de Componentes** - Renderer, FormBuilder, Schema
+5. **Design System** - Colores consistentes
+
+### Las especificaciones mejoradas serán:
+
+1. **DOCUMENTACIÓN** de patrones existentes (no invenciones)
+2. **CLARIFICACIÓN** de reglas implícitas
+3. **EJEMPLOS** de código correcto vs incorrecto
+4. **WORKFLOW** formalizado (que ya se sigue informalmente)
+
+### Beneficio de las mejoras:
+
+- Mayor claridad para nuevos desarrolladores
+- Referencia rápida de patrones
+- Validación automatizable
+- Onboarding más rápido
+
+---
+
+**Última actualización:** 2026-01-08
diff --git a/openspec/specs/00arquitectura-limpia/spec.md b/openspec/specs/00arquitectura-limpia/spec.md
deleted file mode 100644
index 8281911f..00000000
--- a/openspec/specs/00arquitectura-limpia/spec.md
+++ /dev/null
@@ -1,215 +0,0 @@
-# Especificacion de Arquitectura Limpia
-
-## Purpose
-
-Define la implementacion de Clean Architecture para ROITheme, un tema WordPress que sigue principios de Domain-Driven Design con separacion fisica de contextos delimitados (Admin, Public, Shared).
-
-## Requirements
-
-### Requirement: Separacion Fisica de Contextos
-
-The system MUST organize code into three physically delimited contexts: Admin/, Public/, and Shared/.
-
-#### Scenario: Codigo pertenece al contexto de administracion
-- **WHEN** el codigo maneja operaciones CRUD, configuracion o funcionalidad del panel admin
-- **THEN** el codigo DEBE colocarse en el directorio `Admin/`
-- **AND** el codigo NO DEBE importar del directorio `Public/`
-
-#### Scenario: Codigo pertenece al contexto publico/frontend
-- **WHEN** el codigo maneja renderizado, visualizacion o presentacion frontend
-- **THEN** el codigo DEBE colocarse en el directorio `Public/`
-- **AND** el codigo NO DEBE importar del directorio `Admin/`
-
-#### Scenario: Codigo es compartido entre contextos
-- **WHEN** el codigo es usado por AMBOS contextos Admin/ y Public/
-- **THEN** el codigo DEBE colocarse en el directorio `Shared/` raiz
-- **AND** tanto Admin/ como Public/ PUEDEN importar de Shared/
-
----
-
-### Requirement: Organizacion Granular de Codigo Compartido
-
-The system MUST implement three levels of shared code to avoid mixing context-specific shared code.
-
-#### Scenario: Codigo compartido solo dentro del contexto Admin
-- **WHEN** el codigo es reutilizado por multiples modulos Admin pero NO por Public
-- **THEN** el codigo DEBE colocarse en el directorio `Admin/Shared/`
-- **AND** los modulos de Public/ NO DEBEN importar de `Admin/Shared/`
-
-#### Scenario: Codigo compartido solo dentro del contexto Public
-- **WHEN** el codigo es reutilizado por multiples modulos Public pero NO por Admin
-- **THEN** el codigo DEBE colocarse en el directorio `Public/Shared/`
-- **AND** los modulos de Admin/ NO DEBEN importar de `Public/Shared/`
-
-#### Scenario: Codigo compartido entre ambos contextos
-- **WHEN** el codigo es reutilizado por AMBOS modulos Admin/ y Public/
-- **THEN** el codigo DEBE colocarse en el directorio `Shared/` raiz
-- **AND** esto incluye ValueObjects, Exceptions y Contracts base
-
----
-
-### Requirement: Cada Contexto Sigue las Capas de Clean Architecture
-
-Each context (Admin/, Public/, Shared/) MUST internally implement the three Clean Architecture layers: Domain, Application, Infrastructure.
-
-#### Scenario: Estructura de modulo dentro del contexto Admin
-- **GIVEN** un componente llamado "Navbar" en el contexto Admin
-- **WHEN** el modulo es creado
-- **THEN** la estructura DEBE ser: Admin/Navbar/ con subcarpetas Domain/, Application/, Infrastructure/
-
-#### Scenario: Estructura de modulo dentro del contexto Public
-- **GIVEN** un componente llamado "Navbar" en el contexto Public
-- **WHEN** el modulo es creado
-- **THEN** la estructura DEBE ser: Public/Navbar/ con subcarpetas Domain/, Application/, Infrastructure/
-
----
-
-### Requirement: Cumplimiento de Direccion de Dependencias
-
-The system MUST enforce that dependencies flow ONLY from outer layers to inner layers.
-
-#### Scenario: Infrastructure depende de Application y Domain
-- **WHEN** el codigo esta en la capa Infrastructure
-- **THEN** PUEDE importar de la capa Application
-- **AND** PUEDE importar de la capa Domain
-
-#### Scenario: Application depende solo de Domain
-- **WHEN** el codigo esta en la capa Application
-- **THEN** PUEDE importar de la capa Domain
-- **AND** NO DEBE importar de la capa Infrastructure
-
-#### Scenario: Domain no tiene dependencias externas
-- **WHEN** el codigo esta en la capa Domain
-- **THEN** NO DEBE importar de la capa Application
-- **AND** NO DEBE importar de la capa Infrastructure
-- **AND** NO DEBE importar funciones o globales de WordPress
-
----
-
-### Requirement: La Capa Domain Contiene Solo Logica de Negocio Pura
-
-The Domain layer MUST contain only pure business logic without framework dependencies.
-
-#### Scenario: Validacion de contenido de capa Domain
-- **WHEN** el codigo se coloca en la capa Domain
-- **THEN** PUEDE contener Entities, Value Objects, Domain Services, Interfaces, Exceptions
-- **AND** NO DEBE contener global $wpdb, $_POST, $_GET, $_SESSION, add_action, add_filter, HTML, CSS, JavaScript
-
-#### Scenario: Implementacion de entidad Domain
-- **GIVEN** una entidad Domain como NavbarConfiguration
-- **WHEN** la entidad es implementada
-- **THEN** DEBE contener reglas de negocio y validacion
-- **AND** NO DEBE contener logica de persistencia
-- **AND** NO DEBE referenciar APIs de WordPress
-
----
-
-### Requirement: La Capa Application Orquesta Domain
-
-The Application layer MUST orchestrate domain entities without containing business logic.
-
-#### Scenario: Implementacion de Use Case
-- **WHEN** un Use Case es implementado
-- **THEN** DEBE coordinar entidades y servicios de domain
-- **AND** DEBE depender de interfaces, NO de implementaciones concretas
-- **AND** NO DEBE contener reglas de validacion de negocio
-
-#### Scenario: Uso de DTOs para transferencia de datos
-- **WHEN** los datos cruzan limites entre capas
-- **THEN** se DEBEN usar DTOs (Data Transfer Objects)
-- **AND** los DTOs DEBEN ser contenedores de datos simples sin logica de negocio
-
----
-
-### Requirement: Infrastructure Implementa Interfaces
-
-The Infrastructure layer MUST implement interfaces defined in Domain/Application layers.
-
-#### Scenario: Implementacion de Repository
-- **GIVEN** una RepositoryInterface definida en Domain
-- **WHEN** el repository es implementado
-- **THEN** DEBE colocarse en Infrastructure/Persistence/
-- **AND** DEBE implementar la interface de Domain
-- **AND** PUEDE usar global $wpdb o APIs de WordPress
-
-#### Scenario: Integracion con WordPress
-- **WHEN** se necesita codigo especifico de WordPress
-- **THEN** DEBE colocarse en la capa Infrastructure
-- **AND** NO DEBE filtrarse a las capas Domain o Application
-
----
-
-### Requirement: Los Modulos Son Autocontenidos e Independientes
-
-Each module (Navbar, Footer, Toolbar, etc.) MUST be self-contained and independent from other modules.
-
-#### Scenario: Aislamiento de modulos
-- **WHEN** un modulo como Admin/Navbar/ es implementado
-- **THEN** NO DEBE importar de Admin/Footer/
-- **AND** NO DEBE importar de Admin/Toolbar/
-- **AND** SOLO PUEDE importar de Shared/
-
-#### Scenario: Eliminacion de modulos
-- **WHEN** un modulo necesita ser eliminado
-- **THEN** borrar la carpeta del modulo NO DEBE romper otros modulos
-- **AND** no se DEBERIAN requerir cambios de codigo en otros modulos
-
----
-
-### Requirement: Admin y Public Son Bounded Contexts Separados
-
-Admin/ and Public/ MUST be treated as separate bounded contexts because they have different responsibilities.
-
-#### Scenario: Responsabilidad del contexto Admin
-- **WHEN** el codigo maneja administracion de componentes
-- **THEN** la entidad Domain se enfoca en configuracion, validacion, estados draft/published
-- **AND** los Use Cases se enfocan en operaciones Save, Update, Delete, Get
-
-#### Scenario: Responsabilidad del contexto Public
-- **WHEN** el codigo maneja renderizado de componentes
-- **THEN** la entidad Domain se enfoca en estado activo, caching, filtrado por permisos
-- **AND** los Use Cases se enfocan en operaciones GetActive, Render, Cache
-
-#### Scenario: No hay duplicacion de domain
-- **WHEN** Admin/Navbar/Domain/ y Public/Navbar/Domain/ ambos existen
-- **THEN** NO son duplicados sino bounded contexts especializados
-- **AND** Admin se enfoca en configuracion/gestion
-- **AND** Public se enfoca en renderizado/visualizacion
-
----
-
-### Requirement: Validacion de Arquitectura Antes de Commit
-
-The system MUST validate architectural compliance before committing code.
-
-#### Scenario: Validacion de capa Domain
-- **WHEN** se valida codigo de la capa Domain
-- **THEN** grep por global $wpdb DEBE retornar vacio
-- **AND** grep por add_action DEBE retornar vacio
-- **AND** grep por $_POST DEBE retornar vacio
-
-#### Scenario: Validacion de dependencias de modulos
-- **WHEN** se validan dependencias entre modulos
-- **THEN** imports de Admin/Navbar/ desde Admin/Footer/ NO DEBEN existir
-- **AND** imports de Public/Navbar/ desde Public/Footer/ NO DEBEN existir
-
----
-
-### Requirement: Realizacion de Beneficios de la Arquitectura
-
-The architecture MUST provide measurable benefits.
-
-#### Scenario: Asignacion granular de trabajo
-- **WHEN** un desarrollador es asignado a trabajar en Admin/Navbar/
-- **THEN** puede acceder SOLO a esa carpeta
-- **AND** no puede ver ni modificar Public/ u otros modulos de Admin/
-
-#### Scenario: Eliminacion facil de modulos
-- **WHEN** un componente ya no es necesario
-- **THEN** eliminarlo requiere solo borrar la carpeta
-- **AND** no se necesitan otras modificaciones de codigo
-
-#### Scenario: Codigo compartido consistente
-- **WHEN** se encuentra un bug en un ValueObject compartido
-- **THEN** arreglarlo en Shared/Domain/ValueObjects/ lo arregla para TODOS los modulos
-- **AND** no se necesita actualizar codigo duplicado
diff --git a/openspec/specs/00estandares-codigo/spec.md b/openspec/specs/00estandares-codigo/spec.md
deleted file mode 100644
index 8383e40b..00000000
--- a/openspec/specs/00estandares-codigo/spec.md
+++ /dev/null
@@ -1,350 +0,0 @@
-# Especificacion de Estandares de Codigo
-
-## Purpose
-
-Define los principios SOLID, estandares de POO (Programacion Orientada a Objetos) y estandares generales de codigo que DEBEN seguirse en el desarrollo de ROITheme.
-
-## Requirements
-
-### Requirement: Principio de Responsabilidad Unica (SRP)
-
-Each class MUST have exactly one reason to change and one responsibility.
-
-#### Scenario: Responsabilidad de clase Use Case
-- **WHEN** se crea una clase Use Case
-- **THEN** DEBE manejar exactamente UNA operacion (Save, Get, Delete, etc.)
-- **AND** NO DEBE combinar multiples operaciones en una clase
-
-#### Scenario: Validacion de tamano de clase
-- **WHEN** se crea un archivo de clase
-- **THEN** DEBERIA tener menos de 300 lineas
-- **AND** DEBERIA tener maximo 3-5 metodos privados
-- **AND** el nombre de la clase DEBE describir su unica responsabilidad
-
-#### Scenario: Violacion de SRP
-- **WHEN** una clase contiene save(), get(), delete(), validate(), sendEmail()
-- **THEN** DEBE dividirse en clases Use Case separadas
-- **AND** cada clase maneja solo una operacion
-
----
-
-### Requirement: Principio Abierto/Cerrado (OCP)
-
-Classes MUST be open for extension but closed for modification.
-
-#### Scenario: Agregar nuevo tipo de componente
-- **WHEN** se necesita un nuevo tipo de componente
-- **THEN** se DEBE crear una nueva subclase
-- **AND** la clase BaseComponent existente NO DEBE modificarse
-- **AND** NO se DEBERIAN agregar cadenas if/elseif para nuevos tipos
-
-#### Scenario: Extender funcionalidad base
-- **GIVEN** que existe una clase abstracta BaseComponent
-- **WHEN** se necesita comportamiento especializado
-- **THEN** se DEBE usar herencia para extender
-- **AND** la clase base DEBE permanecer sin cambios
-
----
-
-### Requirement: Principio de Sustitucion de Liskov (LSP)
-
-Subclasses MUST be substitutable for their base classes without breaking functionality.
-
-#### Scenario: Uso polimorfico
-- **GIVEN** una funcion que acepta parametro BaseComponent
-- **WHEN** cualquier subclase es pasada
-- **THEN** la funcion DEBE funcionar correctamente
-- **AND** NO se DEBERIAN lanzar excepciones inesperadas
-
-#### Scenario: Cumplimiento de contrato
-- **WHEN** una subclase sobrescribe un metodo padre
-- **THEN** DEBE respetar el contrato del metodo original
-- **AND** las precondiciones NO DEBEN ser mas restrictivas
-- **AND** las postcondiciones NO DEBEN ser mas permisivas
-
----
-
-### Requirement: Principio de Segregacion de Interfaces (ISP)
-
-Interfaces MUST be small and specific, not large and general.
-
-#### Scenario: Validacion de tamano de interface
-- **WHEN** se define una interface
-- **THEN** DEBE tener maximo 3-5 metodos
-- **AND** cada metodo DEBE relacionarse con la misma capacidad
-
-#### Scenario: Evitar interfaces gordas
-- **WHEN** existen multiples capacidades no relacionadas
-- **THEN** se DEBEN crear interfaces separadas
-- **AND** las clases implementan solo las interfaces que usan
-- **AND** NO se permiten metodos dummy "No implementado"
-
-#### Scenario: Diseno correcto de interface
-- **WHEN** se necesita funcionalidad de cache
-- **THEN** se DEBE usar CacheInterface con get(), set(), delete()
-- **AND** ValidatorInterface con validate() es separada
-
----
-
-### Requirement: Principio de Inversion de Dependencias (DIP)
-
-High-level modules MUST depend on abstractions, not concrete implementations.
-
-#### Scenario: Inyeccion por constructor con interfaces
-- **WHEN** una clase necesita dependencias
-- **THEN** el constructor DEBE recibir interfaces, NO clases concretas
-- **AND** NO debe haber new ClaseConcreta() dentro del cuerpo de la clase
-
-#### Scenario: Cableado del Contenedor DI
-- **WHEN** se necesitan implementaciones concretas
-- **THEN** el DIContainer DEBE manejar el cableado
-- **AND** las clases permanecen desacopladas de las implementaciones
-
-#### Scenario: Dependencia incorrecta
-- **WHEN** el constructor hace this->repo = new WordPressNavbarRepository()
-- **THEN** esto DEBE refactorizarse para recibir NavbarRepositoryInterface
-- **AND** el DIContainer proporciona la implementacion concreta
-
----
-
-### Requirement: Encapsulacion de Propiedades
-
-Class properties MUST be encapsulated with controlled access.
-
-#### Scenario: Visibilidad de propiedades
-- **WHEN** se define una propiedad de clase
-- **THEN** DEBE ser private o protected
-- **AND** el acceso DEBE ser via metodos getter
-- **AND** la mutacion DEBE ser via metodos setter o metodos de negocio
-
-#### Scenario: Encapsulacion de Value Object
-- **GIVEN** un ValueObject como ComponentName
-- **WHEN** es construido
-- **THEN** la validacion DEBE ocurrir en el constructor
-- **AND** el valor DEBE ser inmutable despues de la construccion
-- **AND** los detalles internos NO DEBEN exponerse
-
----
-
-### Requirement: Guias de Herencia
-
-Inheritance MUST be used appropriately with limited depth.
-
-#### Scenario: Limite de profundidad de herencia
-- **WHEN** se usa herencia
-- **THEN** la profundidad maxima DEBE ser 2-3 niveles
-- **AND** las cadenas de herencia profundas DEBEN evitarse
-
-#### Scenario: Comportamiento comun en clase base
-- **WHEN** multiples clases comparten comportamiento comun
-- **THEN** se DEBERIA crear una clase base abstracta
-- **AND** las subclases especializan con comportamiento adicional
-
----
-
-### Requirement: Polimorfismo Correcto
-
-Methods MUST accept base types or interfaces to enable polymorphism.
-
-#### Scenario: Tipos de parametros de metodo
-- **WHEN** un metodo acepta parametro de componente
-- **THEN** el type hint DEBERIA ser BaseComponent o ComponentInterface
-- **AND** cualquier subclase/implementacion DEBE funcionar correctamente
-
-#### Scenario: Polimorfismo de repository
-- **WHEN** un Use Case usa un repository
-- **THEN** DEBE aceptar RepositoryInterface
-- **AND** WordPressRepository y MockRepository funcionan transparentemente
-
----
-
-### Requirement: Estandares PHP Estrictos
-
-All PHP code MUST follow strict type safety and naming conventions.
-
-#### Scenario: Declaracion de tipos estrictos
-- **WHEN** se crea un archivo PHP
-- **THEN** DEBE comenzar con declare(strict_types=1)
-- **AND** los tipos de retorno DEBEN declararse
-- **AND** los tipos de parametros DEBEN declararse
-
-#### Scenario: Convencion de namespace
-- **WHEN** se crea una clase
-- **THEN** el namespace DEBE seguir ROITheme\[Contexto]\[Componente]\[Capa]
-- **AND** DEBE soportar autoloading PSR-4
-
-#### Scenario: Declaracion de clase
-- **WHEN** se crea una clase
-- **THEN** DEBERIA ser final por defecto
-- **AND** solo hacerla no-final cuando se pretende herencia
-- **AND** el nombre de clase DEBE ser PascalCase
-
----
-
-### Requirement: Modularidad del Codigo
-
-Code MUST be organized into independent and cohesive modules.
-
-#### Scenario: Independencia de modulos
-- **WHEN** se crea un modulo
-- **THEN** DEBE ser autocontenido
-- **AND** NO DEBE depender de otros modulos (solo de Shared/)
-- **AND** eliminarlo NO DEBE romper otros modulos
-
-#### Scenario: Alta cohesion
-- **WHEN** el codigo se coloca en un modulo
-- **THEN** todo el codigo DEBE relacionarse con el proposito de ese modulo
-- **AND** el codigo no relacionado DEBE estar en Shared/ u otro modulo
-
-#### Scenario: Bajo acoplamiento
-- **WHEN** los modulos interactuan
-- **THEN** DEBEN comunicarse a traves de interfaces de Shared/
-- **AND** las dependencias directas entre modulos estan prohibidas
-
----
-
-### Requirement: DRY - No Te Repitas
-
-Code duplication MUST be eliminated through appropriate abstraction.
-
-#### Scenario: Ubicacion de codigo compartido
-- **WHEN** el codigo es usado por multiples modulos
-- **THEN** DEBE moverse al nivel apropiado de Shared/
-- **AND** los modulos DEBEN importar de Shared/
-
-#### Scenario: Deteccion de duplicacion
-- **WHEN** existe codigo similar en 2+ lugares
-- **THEN** DEBE refactorizarse a Shared/
-- **AND** las ubicaciones originales importan de Shared/
-
----
-
-### Requirement: KISS - Mantenlo Simple
-
-Solutions MUST be simple and avoid over-engineering.
-
-#### Scenario: Uso de patrones
-- **WHEN** se considera un patron de diseno
-- **THEN** DEBE resolver un problema real
-- **AND** se DEBEN preferir soluciones mas simples
-- **AND** la abstraccion excesiva DEBE evitarse
-
-#### Scenario: Claridad del codigo
-- **WHEN** se escribe codigo
-- **THEN** DEBERIA ser auto-documentado
-- **AND** los comentarios DEBERIAN ser innecesarios para entender
-- **AND** la logica compleja DEBERIA extraerse a metodos bien nombrados
-
----
-
-### Requirement: Separacion de Responsabilidades por Capa
-
-Each layer MUST have distinct responsibilities.
-
-#### Scenario: Responsabilidades por capa
-- **WHEN** se escribe codigo
-- **THEN** Domain contiene logica de negocio
-- **AND** Application contiene orquestacion
-- **AND** Infrastructure contiene implementacion tecnica
-- **AND** UI contiene solo presentacion
-
-#### Scenario: Validacion de responsabilidades cruzadas
-- **WHEN** se valida ubicacion de codigo
-- **THEN** SQL NO DEBE estar en Domain/Application
-- **AND** HTML NO DEBE estar en Domain/Application
-- **AND** logica de negocio NO DEBE estar en Infrastructure
-
----
-
-### Requirement: Limites de Tamano de Archivo
-
-Files MUST be kept small and focused.
-
-#### Scenario: Tamano de archivo de clase
-- **WHEN** se crea un archivo de clase
-- **THEN** DEBERIA tener menos de 300 lineas
-- **AND** si es mas grande, DEBERIA dividirse en clases mas pequenas
-
-#### Scenario: Tamano de metodo
-- **WHEN** se escribe un metodo
-- **THEN** DEBERIA tener menos de 30 lineas
-- **AND** metodos complejos DEBERIAN extraerse a metodos auxiliares
-
----
-
-### Requirement: Convenciones de Nomenclatura
-
-Names MUST be clear, descriptive, and follow conventions.
-
-#### Scenario: Nomenclatura de clases
-- **WHEN** se nombra una clase
-- **THEN** el nombre DEBE describir su unica responsabilidad
-- **AND** las clases Use Case DEBEN nombrarse [Accion][Entidad]UseCase
-- **AND** las clases Repository DEBEN nombrarse [Implementacion][Entidad]Repository
-
-#### Scenario: Nomenclatura de metodos
-- **WHEN** se nombra un metodo
-- **THEN** DEBE describir lo que hace el metodo
-- **AND** DEBERIA comenzar con un verbo
-- **AND** metodos booleanos DEBERIAN comenzar con is/has/can
-
-#### Scenario: Nomenclatura de variables
-- **WHEN** se nombra una variable
-- **THEN** DEBE ser descriptiva
-- **AND** las abreviaturas DEBEN evitarse
-- **AND** nombres de una letra solo para contadores de bucle
-
----
-
-### Requirement: Validacion Pre-Commit
-
-Code MUST pass validation before commit.
-
-#### Scenario: Verificacion de cumplimiento SOLID
-- **WHEN** el codigo esta listo para commit
-- **THEN** SRP cada clase tiene una responsabilidad
-- **AND** OCP nuevas caracteristicas via extension, no modificacion
-- **AND** LSP las subclases son sustituibles
-- **AND** ISP las interfaces son pequenas 3-5 metodos
-- **AND** DIP el constructor recibe interfaces
-
-#### Scenario: Verificacion de cumplimiento POO
-- **WHEN** el codigo esta listo para commit
-- **THEN** las propiedades son private/protected
-- **AND** la profundidad de herencia es max 2-3 niveles
-- **AND** el polimorfismo esta implementado correctamente
-- **AND** la abstraccion oculta complejidad
-
-#### Scenario: Verificacion de calidad
-- **WHEN** el codigo esta listo para commit
-- **THEN** los archivos tienen menos de 300 lineas
-- **AND** los nombres son claros y descriptivos
-- **AND** no existe duplicacion de codigo
-- **AND** no hay sobre-ingenieria presente
-
----
-
-### Requirement: Escaping Obligatorio en Output HTML
-
-All HTML output MUST use WordPress escaping functions for security.
-
-#### Scenario: Escaping de textos
-- **WHEN** se genera output de texto en HTML
-- **THEN** DEBE usar esc_html() para contenido de texto
-
-#### Scenario: Escaping de atributos
-- **WHEN** se genera un atributo HTML
-- **THEN** DEBE usar esc_attr() para valores de atributos
-
-#### Scenario: Escaping de URLs
-- **WHEN** se genera una URL en href o src
-- **THEN** DEBE usar esc_url() para URLs
-
-#### Scenario: Escaping de textareas
-- **WHEN** se genera contenido para textarea
-- **THEN** DEBE usar esc_textarea() para el valor
-
-#### Scenario: Prohibicion de output sin escaping
-- **WHEN** se revisa codigo de Renderer o FormBuilder
-- **THEN** NO DEBE existir echo o print de variables sin escaping
-- **AND** NO DEBE existir interpolacion directa de variables en HTML
diff --git a/openspec/specs/adsense-javascript-first/test-plan.md b/openspec/specs/adsense-javascript-first/test-plan.md
deleted file mode 100644
index f1f3c68a..00000000
--- a/openspec/specs/adsense-javascript-first/test-plan.md
+++ /dev/null
@@ -1,602 +0,0 @@
-# Plan de Pruebas: AdSense JavaScript-First Architecture
-
-> **NOTA IMPORTANTE - PROTOCOLO DE PRUEBAS**
->
-> Las pruebas se ejecutan en el servidor de PRODUCCION.
-> Si hay algo que corregir, se modifica en LOCAL y luego se despliega.
->
-> **PROHIBIDO**: Modificar codigo directamente en produccion.
-> **PERMITIDO**: Solo ejecutar pruebas y verificaciones en produccion.
->
-> Flujo correcto:
-> 1. Ejecutar prueba en produccion
-> 2. Si falla, corregir en local
-> 3. Desplegar cambios a produccion
-> 4. Re-ejecutar prueba
-
----
-
-## Informacion del Servidor de Produccion
-
-| Campo | Valor |
-|-------|-------|
-| **Host SSH** | `VPSContabo` (alias en ~/.ssh/config) |
-| **IP** | `5.189.136.96` |
-| **Usuario** | `root` |
-| **Ruta del tema** | `/var/www/preciosunitarios/public_html/wp-content/themes/roi-theme` |
-| **URL produccion** | `https://analisisdepreciosunitarios.com` |
-| **PHP Version** | 8.2 (php8.2-fpm) |
-
-### Comandos de Deploy
-
-```bash
-# 1. Push desde local (sube a GitHub + Gitea automaticamente)
-git push origin main
-
-# 2. Pull en produccion
-ssh VPSContabo "cd /var/www/preciosunitarios/public_html/wp-content/themes/roi-theme && git pull origin main"
-
-# 3. Limpiar cache de OPcache (IMPORTANTE despues de deploy)
-ssh VPSContabo "systemctl restart php8.2-fpm"
-```
-
----
-
-## Resumen de Pruebas
-
-| ID | Categoria | Descripcion | Criterio de Aceptacion |
-|----|-----------|-------------|------------------------|
-| T01 | Endpoint REST | Endpoint registrado y accesible | HTTP 200 con JSON valido |
-| T02 | Endpoint REST | Headers anti-cache presentes | Cache-Control, Pragma, Expires |
-| T03 | Endpoint REST | Parametro post_id requerido | HTTP 400 sin post_id |
-| T04 | Endpoint REST | post_id=0 valido (archivos/home) | HTTP 200 con post_id=0 |
-| T05 | Visibilidad | Componente deshabilitado | show_ads=false, reason=component_disabled |
-| T06 | Visibilidad | Usuario anonimo sin exclusiones | show_ads=true, reasons=[] |
-| T07 | Visibilidad | Usuario logueado excluido | show_ads=false, reason=logged_in_excluded |
-| T08 | Visibilidad | Rol excluido | show_ads=false, reason=role_excluded |
-| T09 | Visibilidad | Post excluido | show_ads=false, reason=post_excluded |
-| T10 | JavaScript | Script cargado en frontend | roiAdsenseConfig definido |
-| T11 | JavaScript | Cache localStorage funciona | Datos guardados correctamente |
-| T12 | JavaScript | Fallback cuando error | Ads se muestran en error |
-| T13 | Feature Flag | Modo deshabilitado = legacy | No llama endpoint |
-| T14 | Feature Flag | Modo habilitado = JS-First | Llama endpoint |
-| T15 | Clean Arch | Value Objects inmutables | No WordPress en Domain |
-| T16 | Clean Arch | Interface en Domain | AdsenseVisibilityCheckerInterface existe |
-
----
-
-## Pruebas Detalladas
-
-### T01: Endpoint REST Registrado y Accesible
-
-**Categoria**: Endpoint REST
-**Prioridad**: CRITICA
-**Spec Reference**: Requirement: Endpoint REST Visibility
-
-**Pasos**:
-1. Abrir navegador o usar curl
-2. Acceder a: `https://analisisdepreciosunitarios.com/wp-json/roi-theme/v1/adsense-placement/visibility?post_id=1`
-
-**Resultado Esperado**:
-- HTTP Status: 200
-- Content-Type: application/json
-- Body contiene: `show_ads`, `reasons`, `cache_seconds`, `timestamp`
-
-**Comando de Prueba**:
-```bash
-curl -i "https://analisisdepreciosunitarios.com/wp-json/roi-theme/v1/adsense-placement/visibility?post_id=1"
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T02: Headers Anti-Cache Presentes
-
-**Categoria**: Endpoint REST
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Headers anti-cache obligatorios
-
-**Pasos**:
-1. Hacer request al endpoint
-2. Verificar headers de respuesta
-
-**Resultado Esperado**:
-- `Cache-Control: no-store, no-cache, must-revalidate, max-age=0`
-- `Pragma: no-cache`
-- `Expires: Thu, 01 Jan 1970 00:00:00 GMT` o `0`
-- `Vary: Cookie`
-
-**Comando de Prueba**:
-```bash
-curl -I "https://analisisdepreciosunitarios.com/wp-json/roi-theme/v1/adsense-placement/visibility?post_id=1"
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T03: Parametro post_id Requerido
-
-**Categoria**: Endpoint REST
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Parametros del endpoint
-
-**Pasos**:
-1. Hacer request SIN post_id
-2. Verificar respuesta de error
-
-**Resultado Esperado**:
-- HTTP Status: 400 (Bad Request)
-- Body contiene mensaje de error indicando que post_id es requerido
-
-**Comando de Prueba**:
-```bash
-curl -i "https://analisisdepreciosunitarios.com/wp-json/roi-theme/v1/adsense-placement/visibility"
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T04: post_id=0 Valido para Paginas de Archivo
-
-**Categoria**: Endpoint REST
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Parametros del endpoint (validate_callback >= 0)
-
-**Pasos**:
-1. Hacer request con post_id=0
-2. Verificar que responde correctamente
-
-**Resultado Esperado**:
-- HTTP Status: 200
-- Body contiene decision de visibilidad valida
-
-**Comando de Prueba**:
-```bash
-curl -i "https://analisisdepreciosunitarios.com/wp-json/roi-theme/v1/adsense-placement/visibility?post_id=0"
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T05: Componente Deshabilitado Retorna False
-
-**Categoria**: Visibilidad
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Componente deshabilitado
-
-**Pre-condicion**:
-- Deshabilitar componente en admin (is_enabled = false)
-
-**Pasos**:
-1. Deshabilitar adsense-placement en admin
-2. Hacer request al endpoint
-3. Verificar respuesta
-
-**Resultado Esperado**:
-```json
-{
- "show_ads": false,
- "reasons": ["component_disabled"],
- "cache_seconds": 3600
-}
-```
-
-**Comando de Prueba**:
-```bash
-curl "https://analisisdepreciosunitarios.com/wp-json/roi-theme/v1/adsense-placement/visibility?post_id=1"
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T06: Usuario Anonimo Sin Exclusiones Ve Ads
-
-**Categoria**: Visibilidad
-**Prioridad**: CRITICA
-**Spec Reference**: Scenario: Usuario anonimo sin exclusiones
-
-**Pre-condicion**:
-- Componente habilitado
-- javascript_first_mode habilitado
-- Sin exclusiones configuradas
-- No estar logueado
-
-**Pasos**:
-1. Abrir navegador en modo incognito
-2. Acceder a un post del sitio
-3. Verificar respuesta del endpoint
-
-**Resultado Esperado**:
-```json
-{
- "show_ads": true,
- "reasons": [],
- "cache_seconds": 60
-}
-```
-
-**Comando de Prueba**:
-```bash
-curl "https://analisisdepreciosunitarios.com/wp-json/roi-theme/v1/adsense-placement/visibility?post_id=1"
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T07: Usuario Logueado Excluido
-
-**Categoria**: Visibilidad
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Usuario logueado excluido
-
-**Pre-condicion**:
-- Activar "Ocultar para usuarios logueados" en admin
-
-**Pasos**:
-1. Loguearse en WordPress
-2. Copiar cookies de sesion
-3. Hacer request con cookies
-
-**Resultado Esperado**:
-```json
-{
- "show_ads": false,
- "reasons": ["logged_in_excluded"],
- "cache_seconds": 300
-}
-```
-
-**Verificacion Manual**:
-1. Loguearse en wp-admin
-2. Visitar un post en el frontend
-3. Abrir DevTools > Network
-4. Buscar request a `/visibility`
-5. Verificar respuesta
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T08: Rol Excluido
-
-**Categoria**: Visibilidad
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Rol de usuario excluido
-
-**Pre-condicion**:
-- Agregar "administrator" a roles excluidos en admin
-
-**Pasos**:
-1. Loguearse como administrator
-2. Visitar un post
-3. Verificar respuesta del endpoint
-
-**Resultado Esperado**:
-```json
-{
- "show_ads": false,
- "reasons": ["role_excluded"],
- "cache_seconds": 300
-}
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T09: Post Excluido por ID
-
-**Categoria**: Visibilidad
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Post excluido por ID
-
-**Pre-condicion**:
-- Agregar un ID de post a "IDs de posts excluidos" en admin
-
-**Pasos**:
-1. Anotar el ID del post excluido (ej: 123)
-2. Hacer request con ese post_id
-3. Verificar respuesta
-
-**Resultado Esperado**:
-```json
-{
- "show_ads": false,
- "reasons": ["post_excluded"],
- "cache_seconds": 60
-}
-```
-
-**Comando de Prueba**:
-```bash
-curl "https://analisisdepreciosunitarios.com/wp-json/roi-theme/v1/adsense-placement/visibility?post_id=123"
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T10: Script JavaScript Cargado
-
-**Categoria**: JavaScript
-**Prioridad**: CRITICA
-**Spec Reference**: Scenario: Configuracion via wp_localize_script
-
-**Pre-condicion**:
-- javascript_first_mode habilitado
-
-**Pasos**:
-1. Visitar un post en el frontend
-2. Abrir DevTools > Console
-3. Escribir: `window.roiAdsenseConfig`
-
-**Resultado Esperado**:
-- Objeto definido con propiedades:
- - `endpoint`: URL del endpoint REST
- - `postId`: ID del post actual
- - `nonce`: String no vacio
- - `featureEnabled`: true
- - `debug`: boolean
-
-**Verificacion Alternativa**:
-```javascript
-// En consola del navegador
-console.log(window.roiAdsenseConfig);
-console.log(typeof window.roiAdsenseVisibility);
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T11: Cache localStorage Funciona
-
-**Categoria**: JavaScript
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Cache en localStorage
-
-**Pasos**:
-1. Visitar un post (primera vez)
-2. Abrir DevTools > Application > Local Storage
-3. Buscar key `roi_adsense_visibility`
-4. Recargar pagina
-5. Verificar en Network que NO hay nueva llamada al endpoint
-
-**Resultado Esperado**:
-- localStorage contiene:
- ```json
- {
- "show_ads": true,
- "reasons": [],
- "timestamp": 1733900000,
- "cache_seconds": 60
- }
- ```
-- Segunda carga NO hace request al endpoint (usa cache)
-
-**Verificacion en Consola**:
-```javascript
-localStorage.getItem('roi_adsense_visibility');
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T12: Fallback en Error de Red
-
-**Categoria**: JavaScript
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Fallback strategy cached-or-show
-
-**Pasos**:
-1. Limpiar localStorage
-2. Abrir DevTools > Network
-3. Habilitar "Offline" mode
-4. Visitar un post
-5. Verificar comportamiento
-
-**Resultado Esperado**:
-- Los ads se muestran (fallback = show)
-- No hay error en consola (error manejado gracefully)
-
-**Verificacion Alternativa**:
-```javascript
-// Limpiar cache
-window.roiAdsenseVisibility.clearCache();
-// Recargar con network offline
-```
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T13: Feature Flag Deshabilitado = Modo Legacy
-
-**Categoria**: Feature Flag
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Feature flag deshabilitado
-
-**Pre-condicion**:
-- Deshabilitar javascript_first_mode en admin
-
-**Pasos**:
-1. Deshabilitar javascript_first_mode
-2. Visitar un post
-3. Verificar en Network que NO hay llamada al endpoint
-
-**Resultado Esperado**:
-- `roiAdsenseConfig.featureEnabled` = false
-- No hay request a `/visibility` endpoint
-- Ads se muestran inmediatamente (modo legacy)
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T14: Feature Flag Habilitado = JS-First
-
-**Categoria**: Feature Flag
-**Prioridad**: ALTA
-**Spec Reference**: Scenario: Feature flag habilitado
-
-**Pre-condicion**:
-- Habilitar javascript_first_mode en admin
-
-**Pasos**:
-1. Habilitar javascript_first_mode
-2. Limpiar cache (localStorage y pagina)
-3. Visitar un post
-4. Verificar en Network que SI hay llamada al endpoint
-
-**Resultado Esperado**:
-- `roiAdsenseConfig.featureEnabled` = true
-- Request a `/visibility` endpoint presente
-- Ads se muestran/ocultan segun respuesta
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T15: Value Objects Sin Dependencias WordPress
-
-**Categoria**: Clean Architecture
-**Prioridad**: MEDIA
-**Spec Reference**: Scenario: Value Object VisibilityDecision en Domain
-
-**Verificacion**:
-Revisar que los archivos NO contengan funciones de WordPress:
-
-**Archivos a verificar**:
-- `Domain/ValueObjects/UserContext.php`
-- `Domain/ValueObjects/VisibilityDecision.php`
-- `Domain/ValueObjects/AdsenseSettings.php`
-- `Domain/Contracts/AdsenseVisibilityCheckerInterface.php`
-- `Application/UseCases/CheckAdsenseVisibilityUseCase.php`
-
-**Resultado Esperado**:
-- Sin `get_`, `wp_`, `is_user_logged_in`, `WP_*` classes
-- Solo PHP puro y tipos del proyecto
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-### T16: Interface en Domain
-
-**Categoria**: Clean Architecture
-**Prioridad**: MEDIA
-**Spec Reference**: Scenario: Interface en Domain
-
-**Verificacion**:
-El archivo `Domain/Contracts/AdsenseVisibilityCheckerInterface.php` debe:
-- Existir en la ruta correcta
-- Definir metodo `check(int $postId, UserContext $userContext): VisibilityDecision`
-- NO referenciar WordPress
-
-**Estado**: [ ] Pendiente
-**Resultado**:
-**Notas**:
-
----
-
-## Checklist de Despliegue Pre-Pruebas
-
-Antes de ejecutar las pruebas, verificar:
-
-- [ ] Codigo desplegado a produccion via FTP/SSH
-- [ ] Cache de pagina limpiado
-- [ ] javascript_first_mode habilitado en admin
-- [ ] Componente adsense-placement habilitado
-- [ ] Schema sincronizado en BD (campo javascript_first_mode existe)
-
----
-
-## Registro de Ejecucion
-
-| Fecha | Tester | Pruebas Ejecutadas | Pasadas | Fallidas | Notas |
-|-------|--------|-------------------|---------|----------|-------|
-| 2025-12-11 | Claude | T01-T04, T13, T15-T16 | 7 | 0 | javascript_first_mode deshabilitado, pruebas T05-T12,T14 requieren habilitarlo |
-
----
-
-## Resultados de Pruebas (2025-12-11)
-
-### Pruebas Ejecutadas
-
-| ID | Resultado | Evidencia |
-|----|-----------|-----------|
-| T01 | ✅ PASA | HTTP 200, JSON: `{"show_ads":false,"reasons":["javascript_first_disabled"],"cache_seconds":600,"timestamp":...}` |
-| T02 | ✅ PASA | Headers: `Cache-Control: no-store, no-cache, must-revalidate, max-age=0`, `pragma: no-cache`, `expires: Thu, 01 Jan 1970 00:00:00 GMT` |
-| T03 | ✅ PASA | HTTP 400: `{"code":"rest_missing_callback_param","message":"Parametro(s) que falta(n): post_id"}` |
-| T04 | ✅ PASA | HTTP 200 con post_id=0 |
-| T13 | ✅ PASA | Modo legacy activo - roiAdsenseConfig tiene formato antiguo (lazyEnabled, rootMargin) sin endpoint/postId |
-| T15 | ✅ PASA | grep en Domain/ no encuentra wp_, get_, is_user, WP_ |
-| T16 | ✅ PASA | AdsenseVisibilityCheckerInterface.php existe en Domain/Contracts/ |
-
-### Pruebas Pendientes (requieren javascript_first_mode = true)
-
-| ID | Razon Pendiente |
-|----|-----------------|
-| T05 | Requiere deshabilitar componente completo |
-| T06 | Requiere javascript_first_mode habilitado |
-| T07 | Requiere javascript_first_mode + hide_for_logged_in |
-| T08 | Requiere javascript_first_mode + roles excluidos |
-| T09 | Requiere javascript_first_mode + post excluido |
-| T10 | Requiere javascript_first_mode habilitado |
-| T11 | Requiere javascript_first_mode habilitado |
-| T12 | Requiere javascript_first_mode habilitado |
-| T14 | Requiere javascript_first_mode habilitado |
-
----
-
-## Defectos Encontrados
-
-| ID | Prueba | Descripcion | Severidad | Estado | Correccion |
-|----|--------|-------------|-----------|--------|------------|
-| - | - | Sin defectos encontrados | - | - | - |
-
----
-
-## Historial de Versiones
-
-| Version | Fecha | Cambios |
-|---------|-------|---------|
-| 1.0 | 2025-12-11 | Plan inicial basado en spec v1.5 |
-| 1.1 | 2025-12-11 | Agregada info servidor produccion, resultados primera ronda de pruebas |