ARQUITECTURA: Crear toc-sidebar.css separado de style.css - Issue #121

Problema:
- Los estilos del TOC Sidebar estaban mezclados en style.css
- Violaba el principio de separación de responsabilidades
- Inconsistente con otros componentes como cta-box-sidebar.css

Solución:
1. Creado nuevo archivo toc-sidebar.css (siguiente convención existente)
2. Movidos TODOS los estilos del TOC Sidebar (.toc-container, .sidebar-sticky, etc.)
3. Eliminados de style.css (líneas 956-1041)
4. Registrado en enqueue-scripts.php (prioridad 18, solo single posts)

Archivos modificados:
- assets/css/toc-sidebar.css (NUEVO) - Estilos del componente TOC Sidebar
- assets/css/style.css - Eliminados estilos del TOC (86 líneas)
- inc/enqueue-scripts.php - Registrado toc-sidebar.css
- functions.php - Version bump 1.0.5 → 1.0.6

🎯 Resultado:
- Arquitectura consistente (cada componente su propio CSS)
- style.css solo para estilos GLOBALES del tema
- Mantenibilidad mejorada

🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>

wp-content/themes/apus-theme/assets/css/style.css

@@ -953,93 +953,6 @@ img {
     color: var(--color-orange-hover);
 }
 
-/* === SIDEBAR TOC === */
-
-.sidebar-sticky {
-    position: sticky;
-    top: 85px;
-    display: flex;
-    flex-direction: column;
-}
-
-.toc-container {
-    margin-bottom: 13px;
-    background: #ffffff;
-    border: 1px solid var(--color-neutral-100);
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    padding: 12px 16px;
-    max-height: calc(100vh - 71px - 10px - 250px - 15px - 15px);
-    display: flex;
-    flex-direction: column;
-}
-
-.toc-container h4 {
-    color: var(--color-navy-primary);
-    padding-bottom: 8px;
-    border-bottom: 2px solid var(--color-neutral-100);
-    margin-bottom: 0.75rem;
-    font-weight: 600;
-    text-align: left;
-    font-size: 1rem;
-    font-style: normal;
-}
-
-.toc-list {
-    overflow-y: auto;
-    padding-right: 0.5rem;
-    list-style: none;
-    flex: 1;
-    min-height: 0;
-}
-
-.toc-container li {
-    margin-bottom: 0.15rem;
-}
-
-.toc-container a {
-    display: block;
-    padding: 0.3rem 0.85rem;
-    color: var(--color-neutral-600);
-    text-decoration: none;
-    border-left: 3px solid transparent;
-    transition: all 0.3s ease;
-    border-radius: 4px;
-    font-size: 0.9rem;
-    line-height: 1.3;
-}
-
-.toc-container a:hover {
-    background: var(--color-neutral-50);
-    border-left-color: var(--color-navy-primary);
-    color: var(--color-navy-primary);
-}
-
-.toc-container a.active {
-    background: var(--color-neutral-50);
-    border-left-color: var(--color-navy-primary);
-    color: var(--color-navy-primary);
-    font-weight: 600;
-}
-
-.toc-list::-webkit-scrollbar {
-    width: 6px;
-}
-
-.toc-list::-webkit-scrollbar-track {
-    background: var(--color-neutral-50);
-    border-radius: 3px;
-}
-
-.toc-list::-webkit-scrollbar-thumb {
-    background: var(--color-neutral-600);
-    border-radius: 3px;
-}
-
-.toc-list::-webkit-scrollbar-thumb:hover {
-    background: var(--color-neutral-700);
-}
-
 /* ========================================
    ❌ NO AGREGAR CSS DE COMPONENTES AQUÍ
    ========================================

wp-content/themes/apus-theme/assets/css/toc-sidebar.css

@@ -0,0 +1,124 @@
+/**
+ * Sidebar TOC (Table of Contents) Styles
+ *
+ * RESPONSABILIDAD: Estilos del componente TOC Sidebar
+ * - Contenedor sticky (.sidebar-sticky)
+ * - Contenedor TOC (.toc-container)
+ * - Título del TOC (.toc-container h4)
+ * - Lista de enlaces (.toc-list)
+ * - Items y enlaces del TOC
+ * - Scrollbar personalizado
+ *
+ * @package Apus_Theme
+ * @since 1.0.5
+ * @source apus-theme-template/css/style.css líneas 663-746
+ */
+
+/* ========================================
+   Contenedor Sticky del Sidebar
+   ======================================== */
+
+.sidebar-sticky {
+    position: sticky;
+    top: 85px;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ========================================
+   Contenedor del TOC
+   ======================================== */
+
+.toc-container {
+    margin-bottom: 13px;
+    background: #ffffff;
+    border: 1px solid var(--color-neutral-100);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    padding: 12px 16px;
+    max-height: calc(100vh - 71px - 10px - 250px - 15px - 15px);
+    display: flex;
+    flex-direction: column;
+}
+
+/* ========================================
+   Título del TOC
+   ======================================== */
+
+.toc-container h4 {
+    color: var(--color-navy-primary);
+    padding-bottom: 8px;
+    border-bottom: 2px solid var(--color-neutral-100);
+    margin-bottom: 0.75rem;
+    font-weight: 600;
+    text-align: left;
+    font-size: 1rem;
+    font-style: normal;
+}
+
+/* ========================================
+   Lista de Enlaces del TOC
+   ======================================== */
+
+.toc-list {
+    overflow-y: auto;
+    padding-right: 0.5rem;
+    list-style: none;
+    flex: 1;
+    min-height: 0;
+}
+
+.toc-container li {
+    margin-bottom: 0.15rem;
+}
+
+/* ========================================
+   Enlaces del TOC
+   ======================================== */
+
+.toc-container a {
+    display: block;
+    padding: 0.3rem 0.85rem;
+    color: var(--color-neutral-600);
+    text-decoration: none;
+    border-left: 3px solid transparent;
+    transition: all 0.3s ease;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    line-height: 1.3;
+}
+
+.toc-container a:hover {
+    background: var(--color-neutral-50);
+    border-left-color: var(--color-navy-primary);
+    color: var(--color-navy-primary);
+}
+
+.toc-container a.active {
+    background: var(--color-neutral-50);
+    border-left-color: var(--color-navy-primary);
+    color: var(--color-navy-primary);
+    font-weight: 600;
+}
+
+/* ========================================
+   Scrollbar Personalizado (Webkit)
+   ======================================== */
+
+.toc-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.toc-list::-webkit-scrollbar-track {
+    background: var(--color-neutral-50);
+    border-radius: 3px;
+}
+
+.toc-list::-webkit-scrollbar-thumb {
+    background: var(--color-neutral-600);
+    border-radius: 3px;
+}
+
+.toc-list::-webkit-scrollbar-thumb:hover {
+    background: var(--color-neutral-700);
+}

wp-content/themes/apus-theme/functions.php

@@ -14,7 +14,7 @@ if (!defined('ABSPATH')) {
 /**
  * Theme Version
  */
-define('APUS_VERSION', '1.0.5');
+define('APUS_VERSION', '1.0.6');
 
 /**
  * Theme Setup

wp-content/themes/apus-theme/inc/enqueue-scripts.php

@@ -563,6 +563,32 @@ function apus_enqueue_cta_box_sidebar_assets() {
 
 add_action('wp_enqueue_scripts', 'apus_enqueue_cta_box_sidebar_assets', 17);
 
+/**
+ * Enqueue TOC Sidebar styles (only on single posts)
+ *
+ * ARQUITECTURA: Cada componente debe tener su propio archivo CSS
+ * Issue #121 - Separación de responsabilidades CSS
+ *
+ * @since 1.0.5
+ */
+function apus_enqueue_toc_sidebar_assets() {
+    // Only load on single posts
+    if (!is_single()) {
+        return;
+    }
+
+    // TOC Sidebar CSS
+    wp_enqueue_style(
+        'apus-toc-sidebar',
+        get_template_directory_uri() . '/assets/css/toc-sidebar.css',
+        array('apus-bootstrap'),
+        filemtime(get_template_directory() . '/assets/css/toc-sidebar.css'),
+        'all'
+    );
+}
+
+add_action('wp_enqueue_scripts', 'apus_enqueue_toc_sidebar_assets', 18);
+
 /**
  * Enqueue Footer Contact Form styles
  *