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>
Problema:
Las variables CSS --color-neutral-* estaban siendo usadas en los estilos
de formularios y otros componentes, pero no estaban definidas en :root,
causando que los estilos no se aplicaran correctamente.
Solución:
Agregadas 4 variables CSS neutrales al :root en style.css:
- --color-neutral-50: #f9fafb (backgrounds claros)
- --color-neutral-100: #e9ecef (borders de form-control)
- --color-neutral-600: #6c757d (textos secundarios)
- --color-neutral-700: #495057 (textos/backgrounds oscuros)
Estas variables son necesarias para que los estilos del componente
Footer Contact Form se rendericen correctamente según la documentación.
Archivos modificados:
- wp-content/themes/apus-theme/assets/css/style.css (líneas 57-61)
Related to #128🤖 Generated with Claude Code
- Eliminar pre-footer complejo que no existe en template
- Eliminar WordPress dynamic sidebars
- Agregar 3 columnas de navegación estáticas (Recursos, Soporte, Empresa)
- Agregar formulario de newsletter con 5 campos en columna offset
- Mantener copyright con año dinámico y redes sociales
- Agregar CSS para footer en style.css (líneas 1181-1259)
- Estructura replica template líneas 1093-1151
Refs: #128🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA DIAGNOSTICADO:
- Botones de paginación se veían azules en staging
- Agregué CSS a style.css pero existe pagination.css separado
- pagination.css se carga DESPUÉS y sobreescribía con colores Bootstrap azules
SOLUCIÓN IMPLEMENTADA:
- Editar pagination.css directamente (archivo específico de paginación)
- Reemplazar TODOS los #0d6efd (azul Bootstrap) con var(--color-orange-primary)
- Actualizar gradientes azules a naranja sólido
- Actualizar rgba de box-shadows (de azul a naranja)
- Incluye estilos para hover, focus, active y dark mode
ARCHIVOS MODIFICADOS:
- wp-content/themes/apus-theme/assets/css/pagination.css
* Línea 37: color hover naranja
* Línea 38-39: background y border hover naranja
* Línea 41: box-shadow naranja
* Línea 46-48: focus naranja
* Línea 50: box-shadow focus naranja
* Línea 56-57: active background naranja (sin gradiente)
* Línea 59: box-shadow active naranja
* Línea 64: active hover background light orange
* Línea 66: box-shadow active hover naranja
* Línea 185: dark mode border naranja
* Línea 189: dark mode active naranja
VALIDACIÓN:
- ✅ Diagnosticado con Playwright (network requests)
- ✅ Identificado orden de carga: style.css → pagination.css
- ✅ Documentado en Issue #127
Referencias: Issue #127🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Agregar estilos de paginación (líneas 1157-1179)
- Botones normales: gris oscuro
- Botones hover: naranja con fondo transparente 10%
- Botón activo: naranja sólido
- Problema identificado con MCP Playwright
- Causa raíz: Documentación incompleta (faltaba CSS del template original)
- CSS verificado con MCP Serena en línea 1157
Referencias: Issue #127🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implementar estilos completos en style.css (líneas 1111-1155)
- Border izquierdo visual indicator (gris → naranja hover)
- Cards altura uniforme con height 100%
- Uso estratégico de !important para override de Bootstrap
- Cursor pointer y transiciones suaves
- HTML ya existía en single.php (sin cambios)
Referencias: Issue #127🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA ROOT CAUSE FINAL:
theme.css tenía MÚLTIPLES reglas sobrescribiendo Bootstrap:
- .btn y button (background-color global)
- .btn:focus, button:focus (box-shadow)
- .btn:disabled, button:disabled (opacity)
- .btn-secondary, .btn-success, .btn-danger, etc. (colores)
- .btn-sm, .btn-lg (tamaños)
TODAS estas reglas sobrescribían btn-outline de Bootstrap
SOLUCIÓN DEFINITIVA:
- ELIMINADAS todas las reglas globales .btn y button
- ELIMINADAS todas las variantes .btn-*
- ELIMINADOS tamaños .btn-sm y .btn-lg
- Mantener SOLO estilos para inputs SIN clases btn
- Bootstrap maneja TODO lo relacionado con botones
Archivos modificados:
- assets/css/theme.css (eliminadas ~80 líneas de CSS)
RESULTADO:
Bootstrap btn-outline-* funciona SIN interferencia
Fixes#124🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA ROOT CAUSE:
theme.css aplicaba background-color a TODOS los .btn (línea 335)
Esto sobrescribía btn-outline-* de Bootstrap
ANÁLISIS:
- Template original NO tiene theme.css
- theme.css es archivo adicional con reglas conflictivas
- Reglas globales .btn y button sobrescriben Bootstrap
SOLUCIÓN:
- Eliminar selectores button y .btn de theme.css
- Mantener SOLO estilos para inputs SIN clases Bootstrap
- Usar :not([class*="btn"]) para excluir elementos con clases btn
RESULTADO:
- Bootstrap maneja btn-outline correctamente
- Sin conflictos de especificidad CSS
- Inputs sin clases mantienen estilos por defecto
Archivo modificado:
- assets/css/theme.css (líneas 316-348)
Fixes#124🤖 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:
- Los botones de compartir se mostraban con fondo azul sólido en lugar de outline
- theme.css aplicaba background-color: var(--primary-color) a TODOS los .btn
SOLUCIÓN:
- Modificar selector en theme.css para excluir botones con "outline" en clase
- Usar :not([class*="outline"]) para preservar estilos Bootstrap outline
Fixes#124🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
CAMBIOS EN HTML (single.php):
- Remover botón de Email (no en documentación)
- Remover texto de botones (solo iconos)
- Agregar aria-label a todos los botones para accesibilidad
- Cambiar Instagram a onclick alert en vez de link directo
- Cambiar WhatsApp URL a api.whatsapp.com/send
- Actualizar rel de "noopener" a "noopener noreferrer"
- Agregar comentarios HTML para cada botón
CAMBIOS EN CSS (style.css):
- Agregar reglas específicas para .share-buttons .btn
- border-width: 2px (más grueso que Bootstrap default)
- transition: all 0.3s ease
- box-shadow en hover para efecto de elevación
Archivos modificados:
- wp-content/themes/apus-theme/single.php (líneas 72-120)
- wp-content/themes/apus-theme/assets/css/style.css (líneas 1054-1063)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- get_template_part no cargaba el archivo content-cta-box.php
SOLUCIÓN TEMPORAL:
- HTML del CTA Box colocado directamente en single.php
- Eliminado get_template_part para debugging
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
- CTA Box no aparecía en el sidebar debajo del TOC
- El archivo content-cta-box.php tenía condición if (!is_single()) return
- Esta condición impedía el renderizado del CTA Box
SOLUCIÓN:
- Eliminada la condición is_single() del archivo
- El CTA Box ahora se renderiza correctamente
- Ya que se llama desde single.php, no necesita validación adicional
ARCHIVO MODIFICADO:
- template-parts/content-cta-box.php (eliminadas líneas 12-15)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- CREAR: template-parts/content-toc.php
* Función PHP apu_generate_toc() para generar TOC automáticamente
* Regex para buscar H2 con atributo ID
* Solo se muestra en is_single()
- MODIFICAR: single.php (sidebar)
* Agregar div.sidebar-sticky wrapper
* Integrar get_template_part('template-parts/content', 'toc')
* Preparar espacio para CTA Box (componente 12)
- MODIFICAR: style.css (+87 líneas)
* 9 selectores CSS + 4 pseudo-elementos scrollbar
* Sticky positioning (top: 85px)
* Max-height calculado con calc()
* Scroll interno con overflow-y: auto
* Min-height: 0 (crítico para scroll en flexbox)
* Border-left indicator (navy, NO naranja)
* Scrollbar personalizado 6px (solo Webkit)
- MODIFICAR: main.js (+66 líneas)
* Función updateActiveSection() para ScrollSpy
* Algoritmo SIMPLE: verifica si pasaste el top
* Offset scroll: navbarHeight + 100
* Smooth scroll: navbarHeight + 40
* Selector .toc-container a (NO .toc-link)
* NO tiene auto-scroll del TOC
* NO actualiza URL con history.pushState()
Características:
✅ Generación automática desde H2 con ID
✅ ScrollSpy custom (JavaScript vanilla, NO Bootstrap)
✅ Sticky positioning con flexbox
✅ Scroll interno solo en lista
✅ Border-left indicator activo
✅ Scrollbar delgado personalizado
Selectores REALES usados:
- .toc-container a (NO .toc-link)
- .toc-container h4 (NO .toc-title)
- .toc-container li (NO .toc-list li)
🎨 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Cambiar <div> a <article> para mejor semántica HTML
- Agregar CSS completo con 9 selectores:
* .post-content: Contenedor con fondo, padding, shadow
* .post-content h2: Border-bottom naranja 3px
* .post-content h3: Color navy light para jerarquía
* .post-content p: Line-height 1.8 para legibilidad
* .post-content ul/ol: Listas estilizadas
* .post-content li: Items con espaciado
* .post-content strong: Color navy para destacar
* .post-content a: Enlaces naranjas con underline
* .post-content a:hover: Hover naranja oscuro
Archivos modificados:
- wp-content/themes/apus-theme/single.php (líneas 61, 70)
- wp-content/themes/apus-theme/assets/css/style.css (líneas 865-921)
🎨 Generated with 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>
PROBLEMA:
- hero.css y badges.css tenían estilos de .category-badge-hero que NO existen en template
- Estos archivos sobrescribían los estilos correctos de style.css
- Template original SOLO tiene .category-badge en style.css, NO tiene clase -hero
ARCHIVOS AFECTADOS:
1. badges.css - VACIADO COMPLETO:
- Eliminado .category-badge (líneas 15-38) - duplicado, NO en template
- Eliminado .category-badge-hero (líneas 41-56) - NO existe en template
- Eliminado responsive (líneas 59-68) - duplicado
- Total: 58 líneas eliminadas
2. hero.css - VACIADO COMPLETO:
- Eliminado .category-badge-hero (líneas 16-31) - NO existe en template
- Eliminado hover (líneas 33-38) - NO en template
- Eliminado i (líneas 40-42) - NO en template
- Eliminado responsive (líneas 45-50) - NO en template
- Total: 40 líneas eliminadas
ESTILOS CORRECTOS:
Todos los estilos del hero section y badges están en style.css líneas 812-848
según template original apus-theme-template/css/style.css líneas 186-222
TEMPLATE ORIGINAL SOLO TIENE:
- .hero-title
- .hero-title h1
- .category-badge
- .category-badge:hover
- .category-badge i
NO TIENE clase .category-badge-hero específica.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA CRÍTICO ENCONTRADO:
El archivo hero-section.css (Issue #40, prioridad 20) tenía OTRA definición
de .hero-title con margin: 1rem 0; que causaba 16px de espacio entre navbar y hero.
Como se cargaba DESPUÉS de style.css (prioridad 5), sobrescribía los estilos
y agregaba el margin no deseado.
CAMBIOS:
- Eliminado .hero-title completo (líneas 30-37) incluyendo margin: 1rem 0
- Eliminado .hero-title del @media responsive (líneas 57-59)
- Mantenido solo .hero-meta, .hero-category-badge, etc.
RESUMEN DE DUPLICACIONES ELIMINADAS:
1. hero.css - .hero-title eliminado ✓
2. custom-style.css - .hero-title eliminado ✓
3. hero-section.css - .hero-title eliminado ✓
AHORA .hero-title solo existe UNA VEZ en style.css como debe ser.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA RAÍZ:
- .hero-title estaba definido en 4 archivos diferentes (style.css, hero.css, custom-style.css)
- Había propiedades incorrectas agregadas (margin-bottom: 0 en .navbar, margin-top: 0 en .hero-title)
- Estas propiedades NO existen en el template original
CAMBIOS REALIZADOS:
1. hero.css:
- Eliminado .hero-title completo (líneas 15-24)
- Eliminado .hero-title del media query responsive (líneas 57-64)
- Mantenido solo .category-badge-hero y su responsive
2. custom-style.css:
- Eliminado .hero-title completo (líneas 88-92)
- Eliminado .hero-title h1 (líneas 94-100)
- Eliminado .category-badge (líneas 102-124)
- Dejado comentario indicando que CSS está en style.css
3. style.css:
- Eliminado margin-bottom: 0 de .navbar (línea 696)
- Eliminado margin-top: 0 de .hero-title (línea 817)
RESULTADO:
- .hero-title ahora solo está definido UNA VEZ en style.css
- CSS coincide EXACTAMENTE con el template original
- Sin propiedades extras que no existen en template
- Sin duplicaciones de código
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
CAMBIOS IMPLEMENTADOS:
1. HTML en single.php (líneas 53-58):
- Cambiar contenedor de 'mb-4' a 'featured-image-container my-4'
- Cambiar tamaño de imagen de 'large' a 'full' (calidad completa)
- Simplificar clases de imagen: solo 'img-fluid' (sin w-100 ni rounded)
- Agregar atributo 'loading' => 'lazy' para lazy loading nativo
2. CSS en style.css (líneas 852-865):
- Agregar estilos completos del componente Featured Image
- Border radius: 12px en contenedor
- Box shadow: 0 8px 24px rgba(0, 0, 0, 0.1)
- Overflow hidden: CRÍTICO para que border-radius funcione
- Display block en img: elimina espacio extra de 4px
- Margin: 2rem vertical para separación
ESPECIFICACIONES TÉCNICAS:
- CSS aplicado en contenedor (más eficiente que en img)
- Overflow hidden asegura que border-radius funcione correctamente
- Display block elimina espacio inline predeterminado del navegador
- Lazy loading mejora performance (carga solo al hacer scroll)
- Tamaño 'full' muestra imagen en calidad original
DOCUMENTACIÓN SEGUIDA:
- theme-documentation/09-componente-featured-image/COMPONENTE-FEATURED-IMAGE.md
- theme-documentation/09-componente-featured-image/CSS-ESPECIFICO.md
Fixes#110🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
Existía un gap/espacio visible entre el navbar y el hero section.
CAMBIOS:
1. header.php (línea 88):
- Eliminada línea en blanco después de </nav>
- HTML ahora termina directamente sin saltos extra
2. style.css - .navbar (línea 696):
- Agregado margin-bottom: 0
- Asegura que navbar no tenga margen inferior
3. style.css - .hero-title (línea 816):
- Agregado margin-top: 0
- Asegura que hero no tenga margen superior
RESULTADO:
✓ Navbar y hero section pegados sin espacio
✓ Diseño limpio y continuo
✓ Sticky navbar sigue funcionando
Fixes#108🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA:
Submenu "Buscador General de Precios Unitarios" tiene 18 elementos
y se oculta fuera de la pantalla, haciendo inaccesibles los últimos.
CAMBIOS:
1. Reducir padding vertical de .dropdown-item (0.625rem → 0.5rem)
- Ahorra ~64px total con 18 elementos
- Elementos más compactos visualmente
2. Agregar max-height: 70vh a .dropdown-menu
- Permite ver ~10-12 elementos simultáneamente
- Todos los 18 elementos accesibles mediante scroll
3. Activar overflow-y: auto
- Scroll vertical aparece automáticamente si necesario
- Solo cuando contenido excede 70vh
4. Mejorar UX del scroll
- scroll-behavior: smooth (scroll suave)
- Scrollbar personalizado (6px, color gris)
- scrollbar-width: thin (Firefox)
- Custom webkit scrollbar (Chrome, Safari, Edge)
RESULTADO:
✅ Todos los 18 elementos del submenu son accesibles
✅ Scroll vertical suave y con estilo personalizado
✅ Elementos más compactos pero legibles
✅ Funciona en todos los navegadores modernos
Fixes#103🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
RAZÓN:
La función apus_remove_query_strings_from_static_resources()
es una práctica obsoleta de hace 10+ años que causaba más
problemas que beneficios.
PROBLEMAS QUE CAUSABA:
- Impedía cache busting de WordPress (filemtime(), versiones)
- Usuarios quedaban con CSS/JS desactualizado después de updates
- Causó que el botón Let's Talk se viera azul en lugar de naranja
POR QUÉ ES OBSOLETA:
- CDNs modernos (Cloudflare, AWS, Fastly) cachean con query strings
- WordPress depende de query strings para versionado correcto
- Google PageSpeed ya no lo recomienda desde hace años
- HTTP/2 hace irrelevante esta "optimización"
RESULTADO:
Ahora WordPress puede usar query strings correctamente para
asegurar que usuarios descarguen versiones actualizadas de CSS/JS.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
PROBLEMA RAÍZ ENCONTRADO:
La función apus_remove_query_strings_from_static_resources()
estaba eliminando TODOS los query strings (?ver=X.X.X) de los CSS,
incluyendo el style.css principal.
Esto impedía que los navegadores descargaran nuevas versiones del CSS
cuando se hacían cambios, causando que el botón Let's Talk siguiera
mostrándose azul en lugar de naranja.
SOLUCIÓN:
Modificar la función para que NO elimine el query string del
/assets/css/style.css, permitiendo cache busting cuando se actualiza.
Los demás archivos CSS siguen sin query string para mejor cache.
🤖 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>
PROBLEMA IDENTIFICADO:
- En commit anterior (41b12) solo comenté el ENQUEUE de buttons.css
- El archivo buttons.css TODAVÍA contenía CSS ACTIVO (sin comentar)
- Este CSS con gradiente incorrecto podía seguir aplicándose por:
* Cache de WordPress/navegador
* Referencias directas al archivo
* Plugins que cargan todos los CSS de la carpeta
SÍNTOMAS:
- Botón Let's Talk mostraba gradiente en lugar de color sólido
- No coincidía con template fuente apus-theme-template/css/style.css
ANÁLISIS CSS:
buttons.css tenía (INCORRECTO):
- background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%)
- transform: translateY(-2px) en hover
- box-shadow no presente en template
- Media query responsive no documentada
Template fuente tiene (CORRECTO):
- background-color: var(--color-orange-primary) - Color SÓLIDO
- Sin transform
- Sin box-shadow extra
- Sin media queries
SOLUCIÓN:
- Comentado TODO el contenido CSS de buttons.css
- Archivo ahora solo contiene comentarios
- CSS correcto permanece en assets/css/style.css (líneas 766-785)
- Eliminada cualquier posibilidad de conflicto
ARCHIVOS MODIFICADOS:
- wp-content/themes/apus-theme/assets/css/buttons.css
* TODO el CSS convertido a comentarios
* Agregado header explicando el problema
* Referencia a ubicación correcta del CSS
VERIFICACIÓN:
✅ style.css tiene CSS correcto (idéntico a template fuente)
✅ custom-style.css tiene CSS comentado (sin conflicto)
✅ enqueue-scripts.php tiene enqueue comentado (sin carga)
✅ buttons.css ahora completamente deshabilitado (sin CSS activo)
REFERENCIAS:
- Template CSS: apus-theme-template/css/style.css líneas 163-180
- Issue: #101🤖 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>
- Eliminados 14 archivos .md basura del repositorio
- Configurado .claude/settings.local.json con instrucciones claras:
* NUNCA crear archivos .md para issues/reportes
* Documentación solo en GitHub issues/comments
* No usar --body-file, solo --body inline
- Limpieza completa del repo
Los archivos .md eran basura temporal que no deben estar en el código.
Toda la documentación ya está en GitHub issues.
