[COMPONENTE 11] Implementar Sidebar TOC con ScrollSpy custom - Issue #121

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

wp-content/themes/apus-theme/template-parts/content-toc.php

@@ -0,0 +1,65 @@
+<?php
+/**
+ * Template Part: Table of Contents (TOC)
+ *
+ * Genera automáticamente TOC desde los H2 del post
+ * Usa JavaScript custom para ScrollSpy
+ *
+ * @package APUs_Theme
+ * @since 1.0.0
+ */
+
+// Solo mostrar TOC si estamos en single post
+if (!is_single()) {
+    return;
+}
+
+/**
+ * Función: Generar TOC desde el contenido del post
+ *
+ * Busca todos los H2 que tengan ID
+ * Retorna HTML de la tabla de contenidos
+ */
+function apu_generate_toc($content) {
+    // Buscar todos los H2 con ID en el contenido
+    // Regex: <h2[^>]*id=["']([^"']*) ["'][^>]*>(.*?)</h2>
+    preg_match_all('/<h2[^>]*id=["\']([^"\']*)["\'][^>]*>(.*?)<\/h2>/i', $content, $matches);
+
+    // Si no hay H2 con ID, no mostrar TOC
+    if (empty($matches[1])) {
+        return '';
+    }
+
+    // Iniciar construcción del TOC
+    $toc = '<div class="toc-container">';
+    $toc .= '<h4 class="toc-title">Tabla de Contenido</h4>';
+    $toc .= '<ol class="list-unstyled toc-list">';
+
+    // Iterar sobre cada H2 encontrado
+    foreach ($matches[1] as $index => $id) {
+        // Limpiar el título (eliminar tags HTML internos)
+        $title = strip_tags($matches[2][$index]);
+
+        // Crear el elemento de la lista
+        $toc .= sprintf(
+            '<li><a href="#%s" class="toc-link">%s</a></li>',
+            esc_attr($id),
+            esc_html($title)
+        );
+    }
+
+    $toc .= '</ol>';
+    $toc .= '</div>';
+
+    return $toc;
+}
+
+// Obtener el contenido del post actual
+global $post;
+$post_content = $post->post_content;
+
+// Aplicar filtros de WordPress al contenido (shortcodes, etc.)
+$post_content = apply_filters('the_content', $post_content);
+
+// Generar y mostrar el TOC
+echo apu_generate_toc($post_content);