Files

FrankZamora 0f6387ab46 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

11 KiB

Raw Blame History

⚠️ 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:

/* WordPress Core CSS */
.card {
    max-width: 520px;
}

Bootstrap 5 usa .card como componente principal:

<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:

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...
Si cambias .card a .apus-card, pierdes TODOS los estilos de Bootstrap
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:

<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:

/* 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:

<div class="card shadow-sm" style="max-width: none;">
    <div class="card-body">
        <!-- Contenido -->
    </div>
</div>

Opción 3: CSS Global

<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

Pseudo-elemento ::before de WordPress: Muestra un SVG de checkmark (✓)
background-image de Bootstrap: Muestra el círculo del switch
background-size incorrecto: WordPress usa auto en lugar de contain

Resultado: Dos elementos visuales superpuestos en el switch.

✅ Solución Definitiva

/* 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:

Elimina ::before y ::after: Anula completamente los pseudo-elementos de WordPress
content: none !important: Elimina cualquier contenido SVG de WordPress
display: none !important: Oculta el pseudo-elemento aunque tenga contenido
background-size: contain: Asegura que el círculo de Bootstrap se escale correctamente
background-repeat: no-repeat: Previene que el círculo se duplique
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

WordPress aplica label { vertical-align: middle; } globalmente
Bootstrap usa display: block + float: left en .form-check
Conflicto de layout entre elementos flotantes y vertical-align

✅ Solución Definitiva

/* 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:

display: flex: Convierte el contenedor en flexbox
align-items: center: Alinea todos los hijos verticalmente por su centro
line-height: 16px: Coincide con la altura del switch para alineación perfecta
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:

<!-- ✅ 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:

.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:

/* 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

<!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

/* ✅ 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

/* ✅ 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

11 KiB Raw Blame History

⚠️ CONFLICTOS CON WORDPRESS

Conflicto 1: Bootstrap .card vs WordPress .card

El Problema

❌ SOLUCIÓN INCORRECTA

✅ SOLUCIÓN CORRECTA

Conflicto 2: Form Switches (CRÍTICO)

El Problema

Causa Raíz

✅ Solución Definitiva

Conflicto 3: Alineación Vertical de Switches (CRÍTICO)

El Problema

Causa Raíz

✅ Solución Definitiva

Conflicto 4: .button (Raro)

Conflicto 5: .row (Raro)

Conflicto 6: Colores de Links

Template Actualizado con Todos los Fixes

Checklist Anti-Conflictos WordPress

Verificación en DevTools

Verificar Fix de Cards

Verificar Fix de Switches

Volver al Índice

11 KiB

Raw Blame History

Conflicto 1: Bootstrap `.card` vs WordPress `.card`

Conflicto 4: `.button` (Raro)

Conflicto 5: `.row` (Raro)