Problema: style.css tenía estilos globales h1-h6 (líneas 110-123) con
font-weight: 600 que sobrescribían Bootstrap y NO están en el template.
Solución: ELIMINAR completamente estos estilos globales.
Template RDash usa SOLO estilos Bootstrap default para headings.
NO tiene custom CSS para h1-h6 globales.
Esto restaura el comportamiento correcto de Bootstrap:
- h6 font-weight: 500 (no 600)
- Usa font-family de Bootstrap (no custom)
Issue: #128🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Problema: Los estilos globales h1-h6 (líneas 110-123) sobrescribían
Bootstrap, causando que .contact-info h6 tuviera font-weight: 600 en
lugar de 500 (Bootstrap default).
Solución: Agregar reglas específicas para .contact-info h6 y .text-muted
que restauren los valores de Bootstrap usando !important para override.
Valores Bootstrap restaurados:
- h6: font-weight: 500, line-height: 1.2, inherit font-family
- .text-muted: inherit font-size
Issue: #128🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Eliminados todos los overrides de .contact-info h6 y .text-muted para
usar SOLO estilos default de Bootstrap 5, tal como lo hace el template.
Archivos modificados:
- footer-contact.css: Eliminado font-weight: 600 y font-size de h6
- footer.css: Eliminado font-weight: 400 de h6
- style.css: Eliminado font-weight: 400 de h6
Motivo: Template usa Bootstrap puro sin custom CSS para estos elementos.
Issue: #128🤖 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>
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>
- 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>
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>
- 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:
- .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>
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>
