roi-theme/_planeacion/GAP-RESUMEN-VISUAL.md

GAP Analysis - Resumen Visual

Quick Reference Guide Fecha: 2025-11-04

---

Estado General: 70% Implementado ✅

████████████████████░░░░░░░░ 70%

Implementados correctamente: 9/18 componentes
Necesitan ajustes:           9/18 componentes

---

Matriz de Prioridades

Prioridad	Componente	Estado	Tiempo	Issue
🔴 CRÍTICO	TOC Sticky + ScrollSpy	❌ Falta	1d	#41
🔴 CRÍTICO	Navbar Underline Hover	❌ Falta	0.5d	#42
🔴 CRÍTICO	Notification Bar Colors	⚠️ Verificar	0.25d	#43
🟡 ALTO	Botón "Let's Talk" Header	❌ Falta	0.5d	#44
🟡 ALTO	Related Posts Grises	⚠️ Ajustar	0.5d	#45
🟢 MEDIO	Paginación Profesional	⚠️ Ajustar	0.5d	#46
🟢 MEDIO	Modal Contacto Refinado	⚠️ Ajustar	0.25d	#47
🔵 BAJO	Pulse Animation CTA	❌ Falta	0.25d	#48
🔵 BAJO	Hero Padding	⚠️ Ajustar	0.1d	#49

Estimación Total: ~3.85 días

---

Componentes por Estado

✅ Implementados Correctamente (9)

✅ Tablas APU              (Perfecto, sin cambios)
✅ Social Share Buttons    (Perfecto, sin cambios)
✅ Footer Contact Form     (Funcional)
✅ Bootstrap 5.3.8         (OK, template usa 5.3.2)
✅ Hero Section (base)     (Solo ajustar padding)
✅ CTA Box Sidebar (base)  (Solo agregar pulse)
✅ Modal Contacto (base)   (Solo refinamiento)
✅ Notification Bar (base) (Solo verificar colores)
✅ Related Posts (base)    (Solo cambiar fondo)

❌ Falta Implementar (3)

❌ TOC Sticky con ScrollSpy
   - Position sticky
   - IntersectionObserver para active link
   - Scrollbar personalizado

❌ Navbar Underline Hover Animado
   - ::after pseudo-elemento
   - Width transition
   - Background color hover

❌ Botón "Let's Talk" Header
   - Gradiente naranja #FF6B35 → #FF8C42
   - Transform + shadow hover
   - Posición: navbar right

⚠️ Necesita Ajustes (6)

⚠️ Notification Bar → Verificar colores exactos
⚠️ Related Posts → Fondo #f7fafc + borde lateral
⚠️ Paginación → Bordes 2px + gradiente current
⚠️ Modal → Border-radius 16px + sombras
⚠️ CTA Box → Animación pulse (opcional)
⚠️ Hero → Padding 3rem 1rem

---

Diferencias Visuales Críticas

Navbar Links

Elemento	Template RDash	Tema Actual	Fix
Hover color	#61c7cd	Variable	✅ Correcto
Background hover	rgba(97,199,205,0.1)	Ninguno	❌ Agregar
Underline	Animado ::after	Ninguno	❌ Agregar
Width transition	0.3s ease	N/A	❌ Agregar

/* AGREGAR */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #61c7cd;
    transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

Related Posts Cards

Elemento	Template RDash	Tema Actual	Fix
Background	#f7fafc (gris)	#ffffff (blanco)	❌ Cambiar
Hover transform	translateY(-8px)	translateY(-4px)	❌ Cambiar
Borde lateral	Gradiente animado	Ninguno	❌ Agregar
Shadow hover	0 12px 32px	0 8px 24px	❌ Cambiar

/* CAMBIAR */
.related-post-card {
    background: #f7fafc; /* Era #ffffff */
}

.related-post-card::before {
    /* Agregar pseudo-elemento para borde */
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #1e3a5f 0%, #1a73e8 100%);
    opacity: 0;
}

.related-post-card:hover {
    transform: translateY(-8px); /* Era -4px */
}

TOC (Table of Contents)

Elemento	Template RDash	Tema Actual	Fix
Position	sticky	static	❌ Cambiar
Top offset	5.5rem	N/A	❌ Agregar
ScrollSpy	IntersectionObserver	Ninguno	❌ Agregar
Active link	#1a73e8 bold	Básico	❌ Mejorar
Scrollbar	Personalizado	Default	❌ Agregar

/* AGREGAR */
.apus-toc {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 6rem);
}

.apus-toc::-webkit-scrollbar {
    width: 6px;
}

.apus-toc::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

---

Colores RDash - Guía de Referencia

Paleta Principal

Azul Oscuro Navbar:     #0E2337  ███████
Azul Hero Inicio:       #1e3a5f  ███████
Azul Hero Final:        #2c5282  ███████
Turquesa Hover:         #61c7cd  ███████
Turquesa Hover Oscuro:  #4fb3b9  ███████

Naranja CTA Inicio:     #FF6B35  ███████
Naranja CTA Final:      #FF8C42  ███████
Naranja Sidebar Inicio: #FF8600  ███████
Naranja Sidebar Final:  #FFB800  ███████

Gris Notification Bar:  #4C5C6B  ███████
Gris Cards:             #f7fafc  ███████
Gris Bordes:            #e2e8f0  ███████

Gradientes

/* Hero Section */
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);

/* Botón "Let's Talk" */
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);

/* CTA Box Sidebar */
background: linear-gradient(135deg, #FF8600 0%, #FFB800 100%);

/* Paginación Current */
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);

/* Related Posts Borde Lateral */
background: linear-gradient(180deg, #1e3a5f 0%, #1a73e8 100%);

---

Plan de Implementación - Timeline

DÍA 1 (Críticos)
├── AM: Issue #41 - TOC Sticky + ScrollSpy
│   └── Tiempo: 4h
└── PM: Issue #42 - Navbar Underline + Issue #43 - Audit Colors
    └── Tiempo: 4h

DÍA 2 (Altos)
├── AM: Issue #44 - Botón "Let's Talk"
│   └── Tiempo: 4h
└── PM: Issue #45 - Related Posts Grises
    └── Tiempo: 4h

DÍA 3 (Medios + Bajos)
├── AM: Issue #46 - Paginación + Issue #47 - Modal
│   └── Tiempo: 4h
└── PM: Issue #48 - Pulse + Issue #49 - Hero Padding
    └── Tiempo: 2h

---

Archivos a Modificar

Críticos (Día 1)

📂 wp-content/themes/apus-theme/
├── 📄 assets/css/toc.css              (Issue #41)
├── 📄 assets/js/toc.js                (Issue #41)
├── 📄 assets/css/header.css           (Issue #42)
└── 📄 assets/css/notification-bar.css (Issue #43)

Altos (Día 2)

📂 wp-content/themes/apus-theme/
├── 📄 header.php                      (Issue #44)
├── 📄 assets/css/header.css           (Issue #44)
└── 📄 assets/css/related-posts.css    (Issue #45)

Medios + Bajos (Día 3)

📂 wp-content/themes/apus-theme/
├── 📄 style.css                       (Issue #46)
├── 📄 assets/css/modal-contact.css    (Issue #47)
├── 📄 assets/css/cta-box-sidebar.css  (Issue #48)
└── 📄 assets/css/hero-section.css     (Issue #49)

---

Checklist de Verificación Post-Implementación

Funcionalidad

• TOC sticky funciona en scroll
• TOC scrollspy marca sección activa correctamente
• Navbar underline anima en hover
• Botón "Let's Talk" visible en desktop
• Related posts tienen hover effect correcto
• Paginación muestra gradiente en current
• Modal tiene border-radius 16px
• CTA box tiene animación pulse (opcional)
• Hero section tiene padding correcto

Visual

• Colores exactos RDash (#61c7cd, #0E2337, etc.)
• Gradientes correctos (135deg para horizontales)
• Sombras según spec (0 4px 12px, etc.)
• Border-radius según spec (8px, 12px, 16px)
• Transform values correctos (translateY)
• Transitions con timing correcto (0.3s ease)

Responsive

• TOC sticky funciona en mobile
• Navbar responsive OK
• Botón "Let's Talk" oculto en mobile (opcional)
• Related posts grid adapta en mobile
• Paginación responsive
• Modal responsive
• CTA box oculto < 991px

Performance

• IntersectionObserver no causa lag
• Animaciones respetan prefers-reduced-motion
• Hover effects performant (transform > position)
• No layout shifts en scroll
• Lighthouse score > 90

Accesibilidad

• TOC navegable por teclado
• Navbar links tienen focus visible
• Botón "Let's Talk" tiene aria-label
• Modal tiene aria-labelledby/describedby
• Contraste WCAG AA en todos los textos
• Screen reader puede navegar TOC

Cross-Browser

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile Safari (iOS)
• Chrome Mobile (Android)

---

Comandos Útiles

Testing Local

# Regenerar CSS si usas preprocessor
npm run build:css

# Watch mode para desarrollo
npm run watch

# Linter CSS
npm run lint:css

# Lighthouse CI
npm run lighthouse

Git Workflow

# Branch para cada issue
git checkout -b issue-41-toc-sticky
git add assets/css/toc.css assets/js/toc.js
git commit -m "Issue #41: Implementar TOC sticky con scrollspy"
git push origin issue-41-toc-sticky

# Crear PR
gh pr create --title "Issue #41: TOC Sticky con ScrollSpy" --body "Implementa..."

---

Recursos de Referencia

Template RDash Original

• Path: D:\_Desarrollo\02AnalisisDePreciosUnitarios\_TEMPLATE-REFERENCIA\
• CSS: 825 líneas
• JS: 366 líneas
• Bootstrap: 5.3.2

Tema Actual

• Path: D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\wp-content\themes\apus-theme\
• Version: 1.0.0
• Bootstrap: 5.3.8

Análisis Previos

• _planeacion/template-agent-analysis.md
• _planeacion/theme-agent-analysis.md
• _planeacion/ANALISIS-GAP-DETALLADO.md (este documento)

---

Notas Importantes

⚠️ Backup antes de modificar:

cd wp-content/themes/apus-theme
git stash push -m "Backup antes GAP implementation"

⚠️ Verificar compatibilidad Bootstrap:

• Template usa 5.3.2, tema usa 5.3.8
• No hay breaking changes entre estas versiones
• Todos los componentes son compatibles

⚠️ Performance considerations:

• IntersectionObserver es moderno (IE11+ no soportado)
• Usar will-change: transform solo en hover
• Debounce scroll events si es necesario
• Lazy load related posts images

⚠️ Accesibilidad:

• Todos los componentes deben ser keyboard navigable
• Focus states visibles (outline 2px)
• ARIA labels donde sea necesario
• Contraste mínimo 4.5:1 (WCAG AA)

---

Última actualización: 2025-11-04 Próximo paso: Crear issues #41-#49 en GitHub Tiempo estimado total: 3.85 días