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>
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: 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>
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>
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>
