refactor: reorganizar openspec y planificacion con spec recaptcha

- renombrar openspec/ a _openspec/ (carpeta auxiliar) - mover specs de features a changes/ - crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura - migrar _planificacion/ con design-system y roi-theme-template - agregar especificacion recaptcha anti-spam (proposal, tasks, spec) - corregir rutas y referencias en todas las specs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-08 15:30:45 -06:00
parent 0d6b6db108
commit 0f6387ab46
58 changed files with 15364 additions and 1171 deletions
--- a/_planificacion/01-design-system/14-CONFLICTOS-WORDPRESS.md
+++ b/_planificacion/01-design-system/14-CONFLICTOS-WORDPRESS.md
@@ -0,0 +1,395 @@
+# ⚠️ CONFLICTOS CON WORDPRESS
+
+## Conflicto 1: Bootstrap `.card` vs WordPress `.card`
+
+### El Problema
+
+WordPress Core tiene esta regla CSS que limita el ancho de las cards:
+
+```css
+/* WordPress Core CSS */
+.card {
+    max-width: 520px;
+}
+```
+
+Bootstrap 5 usa `.card` como componente principal:
+
+```html
+<div class="card">
+    <div class="card-body">...</div>
+</div>
+```
+
+**CONFLICTO**: Cuando usas `<div class="card">` 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 `<body>` y sobreescribir el CSS de WordPress:
+
+```html
+<body class="apus-admin" style="font-family: 'Poppins', sans-serif; background-color: #f8f9fa;">
+    <div class="container-fluid py-4" style="max-width: 1400px;">
+        <!-- Todos tus cards de Bootstrap funcionan normalmente -->
+        <div class="card shadow-sm">
+            <div class="card-body">
+                <!-- Contenido -->
+            </div>
+        </div>
+    </div>
+</body>
+```
+
+**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
+<div class="card shadow-sm" style="max-width: none;">
+    <div class="card-body">
+        <!-- Contenido -->
+    </div>
+</div>
+```
+
+**Opción 3: CSS Global**
+
+```html
+<style>
+/* Sobreescribir WordPress max-width en todos los cards del admin */
+body .card {
+    max-width: none !important;
+}
+</style>
+```
+
+---
+
+## 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
+<!-- ✅ Seguro -->
+<button class="btn btn-primary">OK</button>
+
+<!-- ❌ Conflicto con WP -->
+<button class="button">OK</button>
+```
+
+---
+
+## 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
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin: [Component Name]</title>
+
+    <!-- Bootstrap 5.3.2 -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/Css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/Font/bootstrap-icons.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="../../Css/style.css">
+
+    <style>
+    body {
+        font-family: 'Poppins', sans-serif;
+        background-color: #f8f9fa;
+    }
+
+    /* FIX 1: Sobreescribir max-width de WordPress en Bootstrap cards */
+    body .card,
+    .apus-admin .card {
+        max-width: none !important;
+    }
+
+    /* FIX 2: Eliminar pseudo-elementos de WordPress en switches */
+    body .form-switch .form-check-input[type="checkbox"]::before,
+    body .form-switch .form-check-input[type="checkbox"]::after {
+        content: none !important;
+        display: none !important;
+        background-image: none !important;
+        width: 0 !important;
+        height: 0 !important;
+    }
+
+    /* FIX 3: Configurar background correctamente en switches */
+    body .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 {
+        background-position: right center !important;
+    }
+
+    /* FIX 4: Alineación vertical de labels en switches */
+    .form-check.form-switch {
+        display: flex !important;
+        align-items: center !important;
+    }
+
+    .form-switch .form-check-input {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
+    .form-switch .form-check-label {
+        line-height: 16px !important;
+        padding-top: 0 !important;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
+    /* Responsive */
+    @media (max-width: 991px) {
+        .tab-header { padding: 0.75rem; }
+    }
+    </style>
+</head>
+<body class="apus-admin">
+    <!-- Contenido del admin panel -->
+</body>
+</html>
+```
+
+---
+
+## Checklist Anti-Conflictos WordPress
+
+Antes de implementar un componente, verificar:
+
+- [ ] Agregar clase `.apus-admin` al `<body>`
+- [ ] **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)