- Row 1: Activación + Contenido (col-md-6 cada uno)
- Row 2: Estilos + Vista Previa (col-md-6 cada uno)
- Añadido h-100 para altura uniforme entre cards
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Eliminar row g-4 y col-md-4 que causaban layout horizontal
- Cambiar a divs con mb-4 para espaciado vertical consistente
- Último elemento con mb-0 para evitar espacio extra
- Los 3 toggles ahora se apilan verticalmente como cards
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Funcionalidades JavaScript agregadas:
- Actualización de progress bar junto con contador de caracteres
- Progress bar cambia de color según proximidad al límite:
* Naranja: 0-200 caracteres
* Amarillo: 201-230 caracteres
* Rojo: 231-250 caracteres
- Vista previa en tiempo real del Top Bar (setupLivePreview)
- Actualización automática al modificar cualquier campo:
* Icono y visibilidad
* Texto destacado
* Mensaje principal
* Enlace y visibilidad
* Colores (fondo, texto, destacado)
* Tamaño de fuente
- Renderizado HTML dinámico en tiempo real
- Listeners optimizados con event delegation
La vista previa refleja exactamente cómo se verá en el frontend
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Mejoras CSS implementadas:
- Variables CSS con paleta APUs completa (Navy + Orange + Neutrales)
- Clases de utilidad para colores de marca
- Tab header con gradiente sutil y borde lateral naranja
- Section titles con iconos en gradiente
- Cards con hover effects y transiciones suaves
- Toggle containers con fondos y bordes
- Form switches grandes (3rem) con colores personalizados
- Input groups sin bordes intermedios
- Color pickers con hover effects y transform
- Alert personalizado con gradiente naranja
- Animación fadeInUp para vista previa
- Botones de marca Navy y Orange con hover effects
- Progress bar con transiciones suaves
- Badges y typography utilities
- Responsive design para móviles
Todo con transiciones fluidas y sistema de spacing consistente
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Mejoras implementadas:
- Header del tab con gradiente y botón de restaurar defaults
- Cards con sombras y bordes sutiles para las secciones
- Section titles con iconos destacados en gradiente naranja
- Toggle containers con fondo gris claro y bordes
- Input groups sin bordes intermedios (merge)
- Color pickers mejorados con preview de código hex
- Progress bar visual para contador de caracteres del mensaje
- Alert personalizado con tip de diseño
- Vista previa interactiva del Top Bar en tiempo real
- Badges para indicadores (Opcional, Requerido)
- Iconografía consistente con Bootstrap Icons
- Espaciado mejorado con sistema g-4
Diseño coherente con paleta APUs (Navy + Orange + Neutrales)
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Agregar require_once para admin-panel/init.php
- Inicializar módulo del Admin Panel (Phase 1-2: Base Structure)
- Permitir acceso a configuraciones de componentes del tema
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implementar setupCharacterCounter() en AdminPanel
- Agregar listener de evento 'input' para actualizar contador en tiempo real
- Cambiar color del contador según proximidad al límite (230: danger, 200: warning)
- Trigger automático del contador al cargar/renderizar configuración
- Integrar llamada a setupCharacterCounter() en bindEvents()
Basado en: 07-IMPLEMENTACION-ADMIN-JS.md
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Actualizar main.php con diseño completo del Tab Top Bar
- Agregar switches en lugar de checkboxes básicos
- Implementar layout responsive con grid Bootstrap
- Agregar textarea con contador de caracteres para mensaje
- Implementar color pickers para estilos personalizados
- Mejorar accesibilidad con labels y roles ARIA
- Agregar vista previa informativa
Basado en: 05-IMPLEMENTACION-ADMIN-INTERFAZ-TOP-BAR.md
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Dos fixes críticos para el admin panel del tema:
1. **Fix error de nonce en AJAX**
- Cambiar de wp_verify_nonce() a check_ajax_referer()
- check_ajax_referer() es el método recomendado por WordPress para AJAX
- Aplicado en ajax_get_settings() y ajax_save_settings()
- El nonce ahora se valida correctamente
2. **Fix validación de URLs relativas**
- Aceptar URLs relativas que empiezan con / (ej: /catalogo)
- filter_var() con FILTER_VALIDATE_URL rechazaba URLs relativas
- Agregada validación adicional con regex para paths relativos
- Mantiene validación para URLs completas
Archivos modificados:
- admin-panel/includes/class-settings-manager.php
- admin-panel/includes/class-validator.php
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implementación completa del componente Top Bar con 15 campos configurables desde el admin panel, siguiendo el algoritmo universal v2.0.
## Cambios Realizados
### Backend (PHP)
- Agregados defaults del Top Bar a class-settings-manager.php
- Implementada validación completa en class-validator.php (15 campos)
- Implementada sanitización con sanitize_text_field, esc_url_raw y sanitize_hex_color
- Modificado header.php con código 100% configurable usando wp_parse_args()
### Frontend (Admin Panel)
- Creado tab HTML completo con 3 secciones: Activación, Contenido y Estilos
- Implementado JavaScript para renderizado y recolección de datos
- 15 campos configurables: enabled, visibility, icon, content, link, custom styles
### Infraestructura
- Creado admin-panel/init.php para carga del módulo
- Creada class-admin-menu.php con enqueue de Bootstrap 5 y assets
- Creada estructura base CSS y JavaScript del admin
- Ya cargado en functions.php línea 276
## Características
- Responsive: Control independiente mobile/desktop
- Estilos personalizables: 4 colores + tamaño de fuente
- Validación robusta: Límites de caracteres, URLs, colores hex
- Defaults inteligentes: Valores seguros si no hay configuración
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Se movió el repositorio git desde la raíz de WordPress a la carpeta del tema.
Este commit limpia todos los archivos de WordPress del historial de tracking
y mantiene únicamente los archivos del tema apus-theme.
Cambios:
- Eliminado tracking de archivos de WordPress core
- Mantenido solo archivos del tema (97 archivos)
- Actualizado .gitignore para excluir carpetas de desarrollo
- Historial de commits anteriores se mantiene intacto
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- componente-footer-principal.css contenía 526 líneas de código de HEADER
- Estilos de footer estaban duplicados en componente-footer-contact-form.css
- Arquitectura modular no se cumplía
SOLUCIÓN:
1. Reemplazado componente-footer-principal.css con CSS correcto de footer (50 líneas)
- footer base con navy-dark background
- footer h5 títulos blancos
- footer a enlaces con hover naranja
- footer .btn-primary botón newsletter naranja
- Según documentación CSS-ESPECIFICO.md líneas 987-1021
2. Eliminado duplicación en componente-footer-contact-form.css
- Removidas líneas 64-88 (estilos de footer)
- Archivo ahora solo contiene estilos de contact form
3. Version bump a 1.0.19
ARCHIVOS MODIFICADOS:
- wp-content/themes/apus-theme/assets/css/componente-footer-principal.css (526→50 líneas)
- wp-content/themes/apus-theme/assets/css/componente-footer-contact-form.css (119→88 líneas)
- wp-content/themes/apus-theme/functions.php (v1.0.18→1.0.19)
VERIFICACIÓN:
- ✅ HTML en footer.php ya estaba correcto
- ✅ CSS ahora en archivo correcto según arquitectura modular
- ✅ Sin duplicación de estilos
- ✅ Código de header que estaba en footer-principal.css no se usaba
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- CSS usaba selectores .related-post-card que NO existen en HTML
- HTML usa .related-posts .card (Bootstrap estándar)
- Resultado: CERO estilos personalizados aplicados
CAMBIOS:
- Reescribir componente-related-posts.css con selectores correctos
- Cambiar de .related-post-card a .related-posts .card
- Aplicar CSS exacto de CSS-ESPECIFICO.md líneas 62-132
CSS APLICADO:
✅ cursor: pointer en cards
✅ border-left: 4px solid navy
✅ border-left-color: orange en hover
✅ box-shadow en hover
✅ card-title color navy
✅ card-title color orange en hover
ARCHIVOS:
- wp-content/themes/apus-theme/assets/css/componente-related-posts.css (REESCRITO)
- wp-content/themes/apus-theme/functions.php (v1.0.16 → v1.0.17)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA IDENTIFICADO:
- Dropdown "Buscador General de Precios Unitarios" (18 elementos) NO se despliega en hover
- Usuario reportó: "el submenu no se despliega" en staging
- Inspeccionado con Chrome DevTools MCP: dropdown permanece display:none en hover
DIAGNÓSTICO:
✅ HTML correcto: <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
✅ Bootstrap 5 cargado: window.bootstrap existe
✅ Walker genera data-bs-toggle="dropdown" correctamente
❌ Bootstrap 5 usa CLICK por defecto, NO hover
❌ No había CSS para activar dropdown en hover
❌ Template base tampoco tiene dropdown hover
CAUSA RAÍZ:
Bootstrap 5 NUNCA ha usado hover por defecto. Requiere CSS adicional.
SOLUCIÓN IMPLEMENTADA (CSS > JavaScript):
Agregar 4 líneas CSS para dropdown hover SOLO en desktop (min-width: 992px)
Archivo: componente-navbar.css (líneas 136-144)
@media (min-width: 992px) {
.nav-item:hover > .dropdown-menu {
display: block;
}
}
POR QUÉ CSS vs JavaScript:
✅ Super simple: 4 líneas vs 20-30 líneas JS
✅ Performance perfecto: Sin event listeners
✅ Híbrido perfecto: Hover desktop + Click móvil (Bootstrap)
✅ Compatible: Funciona aunque JS esté deshabilitado
✅ Menos bugs: Menos código = menos errores
ARCHIVOS MODIFICADOS:
- componente-navbar.css: +9 líneas (CSS dropdown hover)
- functions.php: Version 1.0.15 → 1.0.16
RESULTADO:
✅ Desktop (>992px): Dropdown se despliega en hover instantáneamente
✅ Móvil (<992px): Sigue usando click nativo de Bootstrap
✅ Compatible con los 18 elementos + scroll del Issue #103✅ Sin conflictos con JavaScript existente
TESTING PENDIENTE:
- Verificar en staging que dropdown funciona en hover
- Confirmar que NO interfiere con móvil (debe seguir usando click)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- Botón CTA mostraba underline en hover
- Estilo global a:hover { text-decoration: underline; } se aplicaba
- .cta-button:hover NO sobrescribía text-decoration
CAUSA RAÍZ:
- style.css línea 249: a:hover { text-decoration: underline; }
- .cta-button tiene text-decoration: none en estado normal
- .cta-button:hover NO tenía text-decoration: none
- Resultado: underline aparecía en hover
SOLUCIÓN:
- Agregar text-decoration: none a .cta-button:hover
- Sobrescribe estilo global de links
- Mantiene botón sin underline en hover
CAMBIOS:
- componente-cta-ab-testing.css línea 41: + text-decoration: none;
- Version 1.0.14 -> 1.0.15
RESULTADO:
- Botón CTA sin underline en normal y hover
- Color fondo cambia en hover (naranja claro -> oscuro)
- Color texto permanece blanco
Testing: Verificar hover sin underline en staging
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- Iconos 37% más grandes en staging (19.2px vs 14px template)
- CSS con 7 propiedades extra NO documentadas
- Archivo tenía 138 líneas vs 12 líneas en documentación
SOLUCIÓN:
- Reemplazar completamente componente-share-buttons.css
- Usar SOLO 2 reglas CSS según CSS-ESPECIFICO.md
- Eliminar font-size: 1.2rem y 6 propiedades extra
- Reducir archivo de 138 líneas a 23 líneas
CAMBIOS:
- ELIMINADO: font-size, padding, line-height, min-width, display, etc.
- ELIMINADO: Hover avanzado (transform, scale)
- ELIMINADO: Colores hover específicos por red social
- ELIMINADO: Media queries responsive custom
- MANTENIDO: Solo transition y border-width (según doc)
- Version 1.0.13 -> 1.0.14
RESULTADO:
- Iconos ahora usan tamaño default Bootstrap (14px)
- CSS minimalista: solo 2 reglas
- Bootstrap maneja colores y tamaños
Testing: Verificar iconos 14px en staging después de deploy
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- Los estilos del componente .post-content en staging no coincidían con el template base
- Container .post-content no tenía background, padding, border-radius ni box-shadow
- H2 border-bottom era 1px gris en lugar de 3px naranja
- H2 font-weight era 600 en lugar de 700
- Links eran color Bootstrap azul (#0d6efd) en lugar de naranja (--color-orange-primary)
- Márgenes y padding no coincidían con template
SOLUCIÓN:
- Reemplazado componente-post-content.css con estilos correctos del template
- Source: apus-theme-template/css/style.css líneas 245-298
- Container ahora tiene background blanco, padding 2rem, border-radius 12px, box-shadow
- H2 border-bottom cambiado a 3px solid var(--color-orange-primary)
- H2 font-weight cambiado a 700
- Links color cambiado a var(--color-orange-primary)
- Agregado responsive para .post-content container
ARCHIVOS:
- wp-content/themes/apus-theme/assets/css/componente-post-content.css
- wp-content/themes/apus-theme/functions.php (version 1.0.11 → 1.0.12)
Ref: #134🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA DETECTADO:
Duplicación de sistemas TOC:
- componente-sidebar-toc.css (✅ EN USO - TOC en sidebar)
- css-global-toc.css (❌ OBSOLETO - TOC en contenido, no usado)
ANÁLISIS:
- template-parts/content-toc.php usa clases .toc-container (sidebar)
- inc/toc.php genera TOC con funciones apus_generate_toc()
- sidebar.php llama a funciones de inc/toc.php
- css-global-toc.css tenía clases .apus-toc que NO se usan
- toc.js estaba enqueueado pero NO se usa
ELIMINACIONES:
❌ css-global-toc.css (369 líneas, clases .apus-toc no usadas)
❌ assets/js/toc.js (7583 bytes, no usado)
❌ Función apus_enqueue_toc_assets() en enqueue-scripts.php
MANTENER:
✅ componente-sidebar-toc.css (125 líneas, clases .toc-container)
✅ inc/toc.php (funciones usadas por sidebar.php)
✅ template-parts/content-toc.php (genera HTML del TOC)
RESULTADO:
- Sistema TOC unificado: solo sidebar TOC
- Sin duplicaciones
- Sin código obsoleto
- Reducción: 369 líneas CSS + 7583 bytes JS eliminados
Version: 1.0.10 → 1.0.11
Issue: #133 (seguimiento)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problema:
Después del commit ba5d7 (limpieza masiva), el Top Notification Bar dejó de verse porque:
1. Eliminé CSS simple del template de style.css (líneas 779-802)
2. notification-bar.css contenía CSS DIFERENTE del Issue #39 (versión avanzada)
3. HTML en header.php usa versión SIMPLE del template
4. CSS avanzado (position fixed, botón cerrar) NO coincidía con HTML simple
Análisis:
- HTML actual: Versión simple sin botón cerrar, sin position fixed
- CSS eliminado: background navy-dark, padding 0.5rem, text-align center
- CSS en archivo: background slate-gray, position fixed, height 40px (INCORRECTO)
- Resultado: Barra invisible por estilos incompatibles
Solución:
Sobrescrito notification-bar.css con CSS correcto del template según:
_planeacion/_desarrollo-tema-apus/theme-documentation/05-componente-top-bar/CSS-ESPECIFICO.md
Nuevo contenido:
- background-color: var(--color-navy-dark)
- color: #ffffff
- padding: 0.5rem 0
- font-size: 0.9rem
- text-align: center
- + estilos para strong, i, a, a:hover
Archivos modificados:
- assets/css/notification-bar.css - Sobrescrito con CSS simple correcto
- functions.php - Version bump 1.0.7 → 1.0.8
🎯 Resultado:
- Top Notification Bar visible con estilos correctos del template
- HTML y CSS alineados correctamente
- CSS ya registrado en enqueue-scripts.php línea 171
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Problema:
- style.css contenía CSS de MÚLTIPLES componentes mezclados
- Violaba principio de separación de responsabilidades
- Algunos componentes tenían archivos CSS pero estaban duplicados en style.css
Solución:
1. REACTIVADO buttons.css
- Era archivo deshabilitado (Issue #101 lo movió a style.css - INCORRECTO)
- Ahora contiene estilos del botón Let's Talk
- Registrado en enqueue-scripts.php línea 189
2. CREADO navbar.css
- Nuevo archivo para navegación principal
- Incluye: navbar, navbar-brand, nav-link, dropdown-menu, dropdown-item
- Registrado en enqueue-scripts.php línea 180
3. REGISTRADO notification-bar.css
- Archivo ya existía pero NO estaba registrado
- Ahora registrado en enqueue-scripts.php línea 171
4. LIMPIEZA MASIVA style.css
- Eliminadas 262 líneas de CSS de componentes
- Componentes movidos:
* TOP NOTIFICATION BAR → notification-bar.css
* NAVBAR → navbar.css
* BOTÓN LET'S TALK → buttons.css
* HERO SECTION → hero.css (ya existía)
* POST CONTENT → post-content.css (ya existía)
* FEATURED IMAGE → (comentado, pendiente crear si necesario)
Archivos modificados:
- assets/css/buttons.css - Reactivado con estilos Let's Talk
- assets/css/navbar.css (NUEVO) - Componente navegación
- assets/css/style.css - Eliminadas 262 líneas
- inc/enqueue-scripts.php - Nueva función apus_enqueue_global_components()
- functions.php - Version bump 1.0.6 → 1.0.7
🎯 Resultado:
- style.css ahora SOLO contiene estilos GLOBALES del tema
- TODOS los componentes en archivos individuales
- Arquitectura consistente y mantenible
- No más duplicaciones
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Problema:
- Los estilos del TOC Sidebar estaban mezclados en style.css
- Violaba el principio de separación de responsabilidades
- Inconsistente con otros componentes como cta-box-sidebar.css
Solución:
1. Creado nuevo archivo toc-sidebar.css (siguiente convención existente)
2. Movidos TODOS los estilos del TOC Sidebar (.toc-container, .sidebar-sticky, etc.)
3. Eliminados de style.css (líneas 956-1041)
4. Registrado en enqueue-scripts.php (prioridad 18, solo single posts)
Archivos modificados:
- assets/css/toc-sidebar.css (NUEVO) - Estilos del componente TOC Sidebar
- assets/css/style.css - Eliminados estilos del TOC (86 líneas)
- inc/enqueue-scripts.php - Registrado toc-sidebar.css
- functions.php - Version bump 1.0.5 → 1.0.6
🎯 Resultado:
- Arquitectura consistente (cada componente su propio CSS)
- style.css solo para estilos GLOBALES del tema
- Mantenibilidad mejorada
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
El archivo cta.css tenía sombras que NO están en el template original:
- text-shadow en .cta-section h3
- box-shadow en .cta-button (normal, hover, active)
CAMBIOS:
1. Eliminar text-shadow de .cta-section h3 (línea 47)
2. Eliminar box-shadow de .cta-button (línea 75)
3. Eliminar box-shadow de .cta-button:hover (línea 82)
4. Eliminar box-shadow de .cta-button:active (línea 84)
RESULTADO:
Estilos ahora coinciden exactamente con el template de referencia:
- index.html: Button boxShadow = "none", h3 textShadow = "none"
- cta.css: Sin box-shadow ni text-shadow
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA RAÍZ:
Había DOS sistemas de A/B testing en conflicto:
1. Sistema PHP completo en cta-ab-testing.php (NO usado)
2. Sistema HTML/JS en single.php + main.js (ambas variantes hardcodeadas con display:none)
El JavaScript no ejecutaba de forma confiable, causando que el CTA:
- A veces no apareciera (ambas variantes quedaban ocultas)
- A veces aparecieran ambas variantes simultáneamente
SOLUCIÓN:
Activar el sistema PHP que ya existía. Más robusto porque:
- Renderiza solo UNA variante server-side (sin timing issues)
- Usa cookies para persistencia de 30 días por usuario
- Elimina race conditions de JavaScript
CAMBIOS:
1. cta-ab-testing.php:
- Actualizar URLs de '#' a home_url('/catalogo') y home_url('/planes')
- Cambiar apus_render_cta() para usar .cta-section (no .apus-cta-wrapper)
- Eliminar atributo data-cta-action (innecesario)
2. single.php:
- ELIMINAR 29 líneas de HTML duplicado (variantes A y B hardcodeadas)
- REEMPLAZAR con: <?php apus_display_cta(); ?>
3. main.js:
- ELIMINAR 26 líneas de lógica A/B en JavaScript
- AGREGAR comentario: CTA manejado por PHP + cta-tracking.js
4. cta-tracking.js:
- Actualizar selectores: .apus-cta-wrapper → .cta-section (2 ocurrencias)
ARQUITECTURA FINAL:
- PHP: Selección de variante + renderizado server-side
- cta-tracking.js: Solo tracking de Analytics (clicks/impresiones)
- Cookies: Persistencia de variante asignada
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problema: Staging tiene CSS cacheado con selectores viejos (.apus-cta-wrapper)
- Commit 856bb cambió todos los selectores a .cta-section
- Pero staging sigue cargando cta.css?ver=1.0.0 (versión vieja)
- El archivo CSS en staging NO tiene .cta-section, tiene .apus-cta-wrapper
Solución: Incrementar APUS_VERSION de 1.0.0 → 1.0.1
- Esto fuerza que WordPress/navegadores recarguen TODOS los CSS/JS
- El nuevo archivo será cta.css?ver=1.0.1 con los selectores correctos
Issue #126🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problema diagnosticado:
- HTML en single.php usa clase .cta-section
- CSS en cta.css usaba clase .apus-cta-wrapper
- Los estilos NO se aplicaban (sin gradiente, sin box-shadow, botón blanco)
Cambios realizados en cta.css:
- Cambiar TODOS los selectores .apus-cta-wrapper → .cta-section
- Actualizar .cta-section para usar variables CSS (--color-orange-primary, --color-orange-light)
- Agregar color: #ffffff !important a h3
- Agregar color: rgba(255, 255, 255, 0.95) !important a p
- Cambiar botón de blanco a naranja (background: var(--color-orange-primary))
- Cambiar hover de botón a naranja-hover (background: var(--color-orange-hover))
- Aumentar border-radius de 0.5rem a 12px (según documentación)
- Aumentar padding de 0.75rem 1.5rem a 0.75rem 2rem en botón
- Actualizar border-radius botón de 0.375rem a 8px
Ahora los estilos coinciden con la documentación:
- Gradiente naranja de fondo
- Box shadow naranja pronunciada
- Textos blancos
- Botón naranja (no blanco)
Issue #126🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Agregar border-top-left-radius y border-top-right-radius a primera fila
- Ahora la tabla .analisis tiene esquinas redondeadas superiores como .desglose
- Issue #132🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA 1: Tabla .analisis sin estilos de header
- La tabla .analisis no tiene tag <thead>, solo <tbody>
- CSS buscaba .analisis table thead tr th
- Primera fila del tbody no se estilizaba como header
SOLUCIÓN 1:
- Nuevo selector: .analisis table tbody tr:first-child td
- Aplica gradiente navy, texto blanco, centrado
- Funciona para tablas sin <thead>
PROBLEMA 2: Fuente Courier New en .desglose
- Columnas numéricas de .desglose usaban Courier New
- Usuario NO quiere fuente monospace en .desglose
SOLUCIÓN 2:
- Separados selectores de columnas numéricas:
- .analisis: CON font-family Courier New (mantiene)
- .desglose: SIN font-family (usa fuente por defecto)
CAMBIOS CSS:
- +11 líneas: Nuevo selector para primera fila .analisis
- Refactor: Separar selectores .analisis y .desglose
- .analisis mantiene Courier New
- .desglose usa fuente estándar
Archivo modificado:
- wp-content/themes/apus-theme/assets/css/tables-apu.css
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA (Issue #132):
- Tablas .desglose no tienen clases en filas <tr>
- WordPress no preserva clases: section-header, subtotal-row, total-row
- Resultado: Todas las filas se ven iguales (sin estilos especiales)
SOLUCIÓN:
- Script JavaScript que detecta y agrega clases automáticamente
- Detecta por contenido de texto:
- "Material", "Mano de Obra", etc. → section-header
- "Suma de..." → subtotal-row
- "Costo Directo" → total-row
FUNCIONAMIENTO:
1. Script se ejecuta cuando DOM está listo
2. Busca tablas .desglose y .analisis
3. Lee 2da celda de cada fila <tr>
4. Agrega clase según el texto
5. CSS aplica estilos automáticamente
ARCHIVOS:
- NUEVO: assets/js/apu-tables-auto-class.js (99 líneas)
- Script con detección inteligente de filas
- Soporta mayúsculas/minúsculas
- Log para debugging
- MODIFICADO: inc/enqueue-scripts.php (+24 líneas)
- Nueva función: apus_enqueue_apu_tables_autoclass_script()
- Carga en footer con strategy defer
- Prioridad 15 (después de CSS)
BENEFICIOS:
✅ Funciona con contenido existente (no requiere edición manual)
✅ Automático para todos los posts nuevos
✅ Sin errores si clases ya existen
✅ Performance: solo procesa si hay tablas APU
Issue: #132🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- La tabla de desglose (6 columnas) usa clase .desglose
- El CSS solo tenía selectores para .analisis
- Resultado: Tabla desglose sin estilos aplicados
SOLUCIÓN:
- Todos los selectores CSS ahora soportan .analisis Y .desglose
- Cambio sistemático en todos los selectores del archivo
- Sin duplicación de código (selectores combinados)
ESTRUCTURA CORRECTA APU:
1. Tabla resumen (3 columnas): clase .analisis
2. Tabla desglose (6 columnas): clase .desglose
Archivo modificado:
- wp-content/themes/apus-theme/assets/css/tables-apu.css
- 104 adiciones, 50 eliminaciones
- Todos los selectores actualizados
Issue cerrado: #131🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problema:
- Documentación INCORRECTA indicaba que footer CSS debía estar en style.css
- Esto violaba arquitectura: TODOS los componentes deben tener CSS individual
- Footer Contact Form era la ÚNICA excepción documentada
Solución:
1. Creado footer-contact.css con TODO el CSS del footer (107 líneas)
2. Removido CSS de footer de style.css (86 líneas netas eliminadas)
3. Agregado enqueue en enqueue-scripts.php (líneas 499-517)
4. Actualizado comentarios en style.css para indicar footer-contact.css
Archivos Creados:
✅ wp-content/themes/apus-theme/assets/css/footer-contact.css (nuevo)
- Contact Form Styles (.form-control, botones submit)
- Footer Styles (footer, h5, links, buttons)
- Contact Info Styles (.contact-info i)
Archivos Modificados:
✅ wp-content/themes/apus-theme/inc/enqueue-scripts.php
- Agregado apus_enqueue_footer_contact_assets()
- Prioridad 18 (después de CTA box sidebar)
- Dependencia: apus-bootstrap
✅ wp-content/themes/apus-theme/assets/css/style.css
- Removido TODO el CSS del footer (86 líneas)
- Agregado warning comment apuntando a footer-contact.css
- Actualizado warning general: SIN EXCEPCIONES
Arquitectura Final:
✅ TODOS los componentes tienen su archivo CSS individual
✅ style.css solo contiene estilos GLOBALES del tema
✅ SIN EXCEPCIONES - Arquitectura 100% consistente
Relacionado: Commits 57136, 9ea4c (limpieza anterior de style.css)
NOTA: Documentación CSS-ESPECIFICO.md actualizada localmente (gitignored)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problema:
- social-share.css estaba comentado en enqueue-scripts.php
- Comentario antiguo decía que CSS debía estar en style.css
- Esto violaba la arquitectura: cada componente debe tener su archivo CSS
Solución:
1. Descomentado apus_enqueue_social_share_styles() en enqueue-scripts.php
2. Actualizado comentario para reflejar arquitectura correcta
3. Actualizado warning en style.css con líneas correctas de enqueue
Arquitectura Correcta:
✅ Cada componente tiene su archivo CSS individual
✅ social-share.css existe y ahora se carga correctamente
✅ Solo en posts individuales (is_single())
✅ Dependencia correcta: apus-bootstrap
Archivos Modificados:
- inc/enqueue-scripts.php (líneas 398-421)
- assets/css/style.css (warning comment actualizado)
Relacionado: Commit anterior 57136 (cleanup de style.css)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problema:
- style.css contenía CSS de 4 componentes que ya tienen archivos individuales
- Esto causaba duplicación y posibles conflictos con CSS específico de componentes
- Violaba la arquitectura de "cada componente en su propio archivo CSS"
Componentes Afectados:
1. Share Buttons (social-share.css existe)
2. CTA A/B Testing (cta.css existe)
3. Related Posts (related-posts.css existe)
4. Pagination (pagination.css existe)
Solución:
- Eliminado CSS duplicado de los 4 componentes (101 líneas netas removidas)
- Reemplazado cada sección con comentario de advertencia claro
- Cada comentario indica:
* Que NO se debe agregar CSS de ese componente en style.css
* La ruta del archivo CSS correcto del componente
* Referencia a línea en enqueue-scripts.php donde se carga
Excepción Documentada:
- Footer Contact Form CSS permanece en style.css (líneas 1074+)
- Según documentación CSS-ESPECIFICO.md debe estar en style.css
Resultado:
✅ style.css ahora solo contiene CSS GLOBAL del tema
✅ Arquitectura consistente: todos los componentes en archivos individuales
✅ Sin duplicación de CSS
✅ Comentarios claros previenen futuros errores
Relacionado: CSS-ESPECIFICO.md, Issue #125🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- Template usa Poppins (font-weight: 500 para h6)
- Staging usaba system fonts (Avenir, Montserrat)
- fonts.css sobrescribía Bootstrap con font-weight: 600
CAMBIOS:
1. Agregado Google Fonts Poppins en enqueue-scripts.php
2. Eliminados estilos globales h1-h6 de fonts.css
3. Actualizadas variables CSS a Poppins por defecto
4. Eliminados estilos h1-h6 de media queries
RESULTADO:
- Font-family ahora es Poppins, sans-serif
- Font-weight h6 usa Bootstrap default (500)
- 100% match con template
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
