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 (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:
- 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:
- 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>
Problema: Archivos CSS creados sin documentación causando sobrescrituras
Archivos eliminados:
- wp-content/themes/apus-theme/assets/css/footer.css (NO documentado)
- wp-content/themes/apus-theme/assets/css/footer-contact.css (NO documentado)
Funciones eliminadas de enqueue-scripts.php:
- apus_enqueue_footer_styles()
- apus_enqueue_footer_contact_assets()
Motivo: La documentación especifica que TODO el CSS del Footer Contact
Form debe estar en style.css, NO en archivos separados.
Ver: theme-documentation/16-componente-footer-contact-form/CSS-ESPECIFICO.md
REGLA: Si NO está documentado → NO debe existir
Issue: #128🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- social-share.css se estaba cargando con CSS adicional no documentado
- custom-style.css tenía reglas duplicadas
- Múltiples archivos CSS causaban conflictos
SOLUCIÓN:
- Deshabilitado enqueue de social-share.css en enqueue-scripts.php
- Eliminado CSS duplicado de custom-style.css
- Mantener SOLO las 2 reglas en style.css según documentación
Archivos modificados:
- inc/enqueue-scripts.php (deshabilitado líneas 398-416)
- assets/css/custom-style.css (eliminado líneas 659-666)
Según: theme-documentation/13-componente-share-buttons/CSS-ESPECIFICO.md
Solo debe haber 2 reglas CSS + Bootstrap outline classes
Fixes#124🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA RAÍZ IDENTIFICADO:
- WordPress 6.3+ agrega automáticamente defer a scripts en footer con dependencias
- wp_localize_script NO funciona con scripts diferidos
- apusTheme nunca se inyecta en HTML
- main.js usa ruta incorrecta para modal: fetch('modal-contact.html')
- WordPress devuelve página 404 completa
- Se inserta en modalContainer duplicando TODO el sitio
SOLUCIÓN:
1. Agregar filtro script_loader_tag con prioridad 20
2. Remover atributos defer y data-wp-strategy de apus-main-js
3. Esto permite que wp_localize_script inyecte apusTheme
4. main.js ahora puede usar apusTheme.themeUrl correctamente
ARCHIVOS:
- wp-content/themes/apus-theme/inc/enqueue-scripts.php:214-227 (nuevo filtro)
- wp-content/themes/apus-theme/inc/enqueue-scripts.php:197 (versión 1.0.3)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- wp_localize_script no genera variable apusTheme en HTML
- WordPress no puede inyectar scripts inline cuando se usa strategy => 'defer'
- Resultado: JavaScript no tiene acceso a apusTheme.themeUrl
- fetch() usa ruta incorrecta y carga página 404 en modalContainer
SOLUCIÓN:
- Quitar strategy => 'defer' de wp_enqueue_script
- Usar solo 'true' (in_footer => true) como 5to parámetro
- Incrementar versión a 1.0.2 para cache busting
- Ahora wp_localize_script SÍ inyecta apusTheme correctamente
REFERENCIA:
- https://developer.wordpress.org/reference/functions/wp_localize_script/
- wp_localize_script requiere que script NO use defer/async
ARCHIVO:
- wp-content/themes/apus-theme/inc/enqueue-scripts.php:193-199
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- Navegadores tienen main.js en caché con código viejo
- fetch('modal-contact.html') con ruta incorrecta sigue ejecutándose
- Página 404 se inserta en modalContainer duplicando todo el template
SOLUCIÓN:
- Cambiar versión de main.js de 1.0.0 a 1.0.1
- Fuerza recarga del JS con fix de modalUrl correcto
ARCHIVO:
- wp-content/themes/apus-theme/inc/enqueue-scripts.php:197
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- Footer se renderizaba duplicado con página 404 entre las duplicaciones
- main.js cargaba 'modal-contact.html' con ruta relativa incorrecta
- fetch('modal-contact.html') resolvía a URL base en vez de directorio del tema
- WordPress devolvía página 404 completa que se insertaba en #modalContainer
SOLUCIÓN:
1. Agregar wp_localize_script en enqueue-scripts.php para pasar themeUrl a JS
2. Corregir main.js para usar apusTheme.themeUrl + '/modal-contact.html'
3. Agregar fallback a '/wp-content/themes/apus-theme/modal-contact.html'
ARCHIVOS:
- wp-content/themes/apus-theme/inc/enqueue-scripts.php:204-212
- wp-content/themes/apus-theme/assets/js/main.js:59-62
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Servidor confirmado sirviendo CSS correcto con !important.
Perfmatters MU plugin desactivado.
Todos los caches limpiados.
CSS descargado directamente del servidor tiene !important correcto.
El problema es browser cache del usuario final.
Incrementando versión a 1.0.3 para forzar descarga.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Caches limpiados:
- W3 Total Cache (page cache + minify)
- Perfmatters cache
- PHP OPcache
- Browser cache (via version bump)
Esto forzará descarga del CSS con !important para botón naranja.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Se cambió el version number del enqueue de style.css de filemtime()
dinámico a '1.0.1' hardcoded para bypass-ear todos los caches
(Memcached, OPcache, browser) que están sirviendo CSS sin !important.
Esto fuerza a todos los navegadores a descargar el CSS actualizado
que tiene el !important necesario para el botón naranja.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
Código comentado es BASURA. No debe permanecer en archivos de producción.
Para eso existe Git - historial completo disponible si se necesita.
ARCHIVOS LIMPIADOS:
1. buttons.css:
- ANTES: 54 líneas (header + código comentado)
- AHORA: 9 líneas (solo header indicando deshabilitación)
- ELIMINADO: ~45 líneas de CSS comentado
2. custom-style.css:
- ELIMINADO: ~84 líneas de navbar comentado (líneas 86-166)
- ELIMINADO: ~23 líneas de botón comentado (líneas 168-190)
- REEMPLAZADO: con 1 línea de nota breve
- ANTES: 107 líneas de código basura comentado
- AHORA: 1 línea de referencia
3. enqueue-scripts.php:
- ELIMINADO: ~13 líneas de enqueue buttons.css comentado
- ELIMINADO: ~33 líneas de enqueue notification-bar comentado
- AHORA: Código limpio sin basura
TOTAL ELIMINADO: ~152 líneas de código comentado basura
PRINCIPIO:
- Código comentado = basura
- Git guarda historial completo
- Si se necesita algo, está en el commit anterior
- Archivos de producción deben estar limpios
REFERENCIAS:
- CSS correcto está en: assets/css/style.css
- Historial en Git si se necesita código anterior
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMAS CORREGIDOS:
1. CSS duplicado en custom-style.css y buttons.css
2. buttons.css tenía implementación INCORRECTA:
- Usaba gradiente en lugar de color sólido
- Agregaba efectos de transform/shadow no presentes en template
- Tenía media queries responsive no documentadas
3. CSS no estaba en ubicación documentada (style.css)
ANÁLISIS DE IMPLEMENTACIONES:
buttons.css (INCORRECTO - deshabilitado):
- ❌ background: linear-gradient() - Template usa color sólido
- ❌ transform: translateY(-2px) en hover - NO en template
- ❌ box-shadow con valores no documentados
- ❌ Estado :active no presente en template
- ❌ Media query responsive no en template
custom-style.css (CORRECTO pero ubicación incorrecta):
- ✅ background-color: var(--color-orange-primary) - Sólido
- ✅ Hover a var(--color-orange-hover)
- ✅ Sin transform ni shadow extra
- ✅ IDÉNTICO al template fuente
SOLUCIÓN IMPLEMENTADA:
1. style.css:
- Agregado CSS correcto al final (líneas 766-785)
- Comentario separador: /* === BOTÓN LET'S TALK === */
- CSS idéntico a template fuente
2. custom-style.css:
- Comentado CSS duplicado (líneas 168-190)
- Agregado nota de nueva ubicación
3. enqueue-scripts.php:
- Comentado enqueue de buttons.css (líneas 101-113)
- Agregado nota explicando por qué se deshabilitó
IMPLEMENTACIÓN COMPLETA:
✅ HTML: header.php (líneas 80-83) - SUPERIOR a template (i18n)
✅ CSS: assets/css/style.css (líneas 766-785) - IDÉNTICO a template
❌ buttons.css: DESHABILITADO (implementación incorrecta)
REFERENCIAS:
- Template HTML: apus-theme-template/index.html líneas 132-134
- Template CSS: apus-theme-template/css/style.css líneas 163-180
- Documentación: theme-documentation/07-componente-boton-lets-talk/
ISSUE: #101🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- Implementación previa NO coincidía con template fuente apus-theme-template/index.html
- HTML tenía estructura compleja con spans responsive e i18n
- CSS cargaba archivo separado notification-bar.css (253 líneas) con animaciones innecesarias
- Faltaban variables de color APU en style.css
SOLUCIÓN:
1. header.php (líneas 23-32):
- Reemplazado HTML complejo con estructura simple del template
- Eliminado texto responsive innecesario
- Cambiado de múltiples <span> a un solo <span><strong>Nuevo:</strong> texto</span>
- Agregado clases text-white y text-decoration-underline al enlace
2. assets/css/style.css:
- Agregadas variables de color APU (líneas 49-55):
--color-navy-dark, --color-navy-primary, --color-orange-primary, etc.
- Agregado CSS de Top Notification Bar (líneas 658-685)
- Solo 28 líneas de CSS limpio sin animaciones ni JavaScript
3. inc/enqueue-scripts.php:
- Comentada función apus_enqueue_notification_bar_assets()
- CSS ahora en style.css principal, no en archivo separado
- Componente no requiere JavaScript
FUENTE DE VERDAD:
- apus-theme-template/index.html (líneas 55-63)
- apus-theme-template/css/style.css (líneas 57-80)
ISSUE: #97🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Cambios realizados:
- NUEVO: Crear assets/css/style.css con CSS base del tema (650 líneas)
- MODIFICADO: style.css - Dejar solo header obligatorio de WordPress (~25 líneas)
- MODIFICADO: enqueue-scripts.php - Agregar carga de assets/css/style.css
Detalles:
- Mover todo el CSS de style.css (variables, reset, typography, layouts)
a assets/css/style.css para cumplir con arquitectura modular
- style.css ahora contiene SOLO el comentario header de WordPress
- Agregar función apus_enqueue_main_stylesheet() con filemtime()
para cache busting
- Orden de carga: Bootstrap → Variables → style.css → componentes
Validación FASE 1 completada:
✅ style.css con header WordPress
✅ functions.php completo
✅ index.php con The Loop
✅ assets/css/style.css creado
✅ assets/js/main.js existe
✅ Arquitectura modular respetada
Referencia: _planeacion/_desarrollo-tema-apus/theme-documentation/03-fase-1-cimiento/
Closes#95🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implementación de CIMIENTOS del tema según template index.html.
Sin estos cambios NO se puede avanzar a componentes visuales.
**Issue #47: Estructura HTML Base**
- single.php: Reemplazada estructura con Grid Bootstrap exacto del template
- Agregado: <div class="container"> → <div class="row">
- Columna principal: <div class="col-lg-9"> (línea 28)
- Columna sidebar: <div class="col-lg-3"> (línea 244)
- Eliminado: <div class="content-wrapper"> (obsoleto)
- Estructura ahora coincide 100% con template líneas 347-350
**Issue #48: Sistema de Variables CSS**
- Creado: assets/css/variables.css (180 líneas)
- 50+ variables CSS de colores paleta RDash
- Variables tipográficas (fonts, sizes, weights)
- Variables de espaciado y bordes
- Variables de sombras y transiciones
- Variables de gradientes del template
- Registrado en enqueue-scripts.php (línea 51-58)
- Dependencia: se carga DESPUÉS de Bootstrap
**Archivos Modificados:**
- wp-content/themes/apus-theme/single.php
- wp-content/themes/apus-theme/inc/enqueue-scripts.php
**Archivos Creados:**
- wp-content/themes/apus-theme/assets/css/variables.css
**Referencia Template:**
D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\_planeacion\theme-template\index.html
**Resultado:**
NIVEL 1 (CIMIENTOS) está completo. Ahora se puede avanzar a NIVEL 2 (Componentes Principales).
🤖 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>
- Eliminar archivos .md que faltaban en el commit anterior
- Actualizar referencias en single.php e index.php
🤖 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>
