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: 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 RAÍZ:
El sistema tenía DOS funciones cargando style.css:
1. inc/enqueue-scripts.php → apus_enqueue_main_stylesheet() (prioridad 5) ✓
2. functions.php → apus_enqueue_scripts() (prioridad 10) ✗ DUPLICADO
Además, footer.css contenía estilos para un footer tradicional de
WordPress con widgets, NO los estilos del template RDash.
SOLUCIÓN APLICADA:
1. functions.php:
- ELIMINADA función duplicada apus_enqueue_scripts()
- Dejado solo el sistema modular de inc/enqueue-scripts.php
- Documentado por qué se eliminó
2. footer.css:
- REEMPLAZADO completamente con estilos del template RDash
- footer { background-color: var(--color-navy-dark); }
- footer h5, footer a, footer .btn-primary con colores correctos
- .contact-info h6 { font-weight: 400; } para labels normales
- .contact-info i con color naranja
3. style.css:
- Agregados estilos .contact-info (líneas 1267-1275)
- Reforzados por footer.css para garantizar aplicación
RESULTADO:
- Footer con fondo negro oscuro correcto (no gris claro)
- Labels de contacto con peso normal (no bold)
- Iconos de contacto con color naranja
- Un solo archivo style.css cargado (no duplicado)
Referencia: Template líneas 1093-1151 (footer + contact section)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
El CSS del tema NO se estaba cargando porque functions.php apuntaba
al style.css raíz (que solo tiene headers de WordPress) en vez del
archivo real en assets/css/style.css.
Cambios realizados:
1. functions.php: Cambiar get_stylesheet_uri() a ruta correcta
- Ahora carga assets/css/style.css con todos los estilos del tema
- Esto activa los estilos de footer (bg-dark override, colores, etc)
2. style.css: Agregar estilos faltantes de .contact-info
- .contact-info i { color: var(--color-orange-primary); }
- .contact-info h6 { font-weight: 400; } para labels normales
Esto corrige:
- Footer con fondo gris claro → Ahora fondo negro oscuro correcto
- Labels de contacto en bold → Ahora peso normal como template
- Icons de contacto sin color → Ahora color naranja correcto
Referencia: Template líneas 991-1025 (footer y contact-info CSS)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Eliminado inc/schema-org.php completamente
- Eliminada referencia en functions.php
- Rank Math maneja 100% de los schemas
- El tema NO debe tocar nada de schemas
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implementación completa de navbar sticky con menú hamburguesa responsive según especificaciones del template del cliente:
**Archivos Modificados:**
- header.php: Reescritura completa con navbar Bootstrap 5, sticky positioning, y responsive hamburger menu
- functions.php: Agregado require para nav-walker.php
- inc/enqueue-scripts.php: Agregado enqueue de custom-style.css y main.js
**Archivos Creados:**
- assets/css/custom-style.css: Estilos navbar con animaciones (gradient underline, dropdown slideDown, etc.)
- assets/js/main.js: JavaScript para scroll effect, active menu highlight, y mobile auto-close
- inc/nav-walker.php: Bootstrap 5 Nav Walker para dropdowns WordPress
**Características:**
✅ Navbar sticky con transición de sombra al hacer scroll
✅ Gradient underline animation en hover de nav-links
✅ Dropdown menus con animación slideDown
✅ Menú hamburguesa responsive (< 991px)
✅ Auto-close mobile menu al hacer click en enlaces
✅ Active menu item highlighting
✅ Smooth scroll para anchor links
✅ Skip link para accesibilidad
✅ Compatible con WordPress menu system
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Se implementa tema WordPress personalizado para Análisis de Precios Unitarios con funcionalidades avanzadas:
- Sistema de templates (front-page, single, archive, page, 404, search)
- Integración de Bootstrap 5.3.8 con estructura modular de assets
- Panel de opciones del tema con Customizer API
- Optimizaciones de rendimiento (Critical CSS, Image Optimization, Performance)
- Funcionalidades SEO y compatibilidad con Rank Math
- Sistema de posts relacionados y tabla de contenidos
- Badge de categorías y manejo de AdSense diferido
- Tipografías Google Fonts configurables
- Documentación completa del tema y guías de uso
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Verificado: add_theme_support('title-tag') está activo en functions.php (línea 30)
- Verificado: header.php está limpio sin meta tags duplicados (solo charset, viewport, X-UA-Compatible)
- Creado: inc/seo.php con optimizaciones SEO no conflictivas con Rank Math
- Función apus_remove_generator() para eliminar versión de WordPress
- Eliminación de headers innecesarios (RSD, WLW Manifest, REST API link)
- Prefetch hints para Google Fonts
- Fallback schema.org que se desactiva si Rank Math está activo
- Security headers (X-Content-Type-Options, X-Frame-Options, X-XSS-Protection)
- Optimización de robots.txt cache headers
- Actualizado: functions.php para incluir inc/seo.php en el flujo de carga
- Creado: SEO-COMPATIBILITY.md con documentación completa
- Explicación de features SEO del tema
- Qué hace Rank Math
- Cómo trabajan juntos sin conflictos
- Configuración recomendada de Rank Math
- Checklist de verificación
- Troubleshooting
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
