feat(dashboard): cards colapsables en Analytics Dashboard

- Convertir 9 cards a estructura colapsable con Bootstrap 5 Collapse
- Headers fuera de cards como botones clickeables
- Cards contraídos por defecto para reducir scroll
- Añadir animación de rotación del chevron (180°)
- Ajustar selector JS de loading overlay a .collapsible-section
- CSS para estados hover, focus y bordes redondeados

Cards modificados:
1. CTR 0% (collapse-ctr-zero)
2. Quick Wins (collapse-quick-wins)
3. Contenido Decadencia (collapse-decay)
4. Contenido Estrella (collapse-star)
5. Infraposicionados (collapse-infrapos)
6. Click Distribution (collapse-click-dist)
7. Top Búsquedas (collapse-top-searches)
8. Top Clicks (collapse-top-clicks)
9. Sin Resultados (collapse-zero-results)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

admin/assets/dashboard.css

@@ -212,6 +212,89 @@ body .card {
     font-size: 0.875rem;
 }
 
+/* =================================================================
+   Collapsible Cards
+   ================================================================= */
+
+.dashboard-analytics-wrap .collapsible-section {
+    margin-bottom: 1rem;
+}
+
+.dashboard-analytics-wrap .collapsible-header {
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: left;
+    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.dashboard-analytics-wrap .collapsible-header:hover {
+    filter: brightness(1.1);
+}
+
+.dashboard-analytics-wrap .collapsible-header:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(255, 134, 0, 0.5);
+}
+
+/* Chevron rotation */
+.dashboard-analytics-wrap .collapse-chevron {
+    transition: transform 0.3s ease;
+    font-size: 1rem;
+}
+
+.dashboard-analytics-wrap .collapsible-header:not(.collapsed) .collapse-chevron {
+    transform: rotate(180deg);
+}
+
+/* Header bordes */
+.dashboard-analytics-wrap .collapsible-header {
+    border-radius: 0.375rem;
+}
+
+.dashboard-analytics-wrap .collapsible-header:not(.collapsed) {
+    border-radius: 0.375rem 0.375rem 0 0;
+}
+
+/* Card sin borde superior cuando está expandido */
+.dashboard-analytics-wrap .collapsible-section .card {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: none;
+}
+
+/* Loading en collapsible section */
+.dashboard-analytics-wrap .collapsible-section.is-loading-table {
+    position: relative;
+    pointer-events: none;
+}
+
+.dashboard-analytics-wrap .collapsible-section.is-loading-table::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.7);
+    z-index: 10;
+    border-radius: 0.375rem;
+}
+
+.dashboard-analytics-wrap .collapsible-section.is-loading-table::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 24px;
+    height: 24px;
+    margin: -12px 0 0 -12px;
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #FF8600;
+    border-radius: 50%;
+    z-index: 11;
+    animation: spin 0.8s linear infinite;
+}
+
 /* =================================================================
    Responsive
    ================================================================= */

admin/assets/dashboard.js

@@ -99,10 +99,10 @@
             return;
         }
 
-        // Find the card container and add loading state (keeps size, shows overlay)
+        // Find the collapsible section container and add loading state (keeps size, shows overlay)
-        var card = tbody.closest('.card');
+        var section = tbody.closest('.collapsible-section');
-        if (card) {
+        if (section) {
-            card.classList.add('is-loading-table');
+            section.classList.add('is-loading-table');
         }
 
         // Build form data
@@ -157,8 +157,8 @@
                 tbody.innerHTML = html;
 
                 // Remove loading state
-                if (card) {
+                if (section) {
-                    card.classList.remove('is-loading-table');
+                    section.classList.remove('is-loading-table');
                 }
 
                 // Update pagination
@@ -167,16 +167,16 @@
                     bindPaginationEvents(paginationDiv, tableId);
                 }
             } else {
-                if (card) {
+                if (section) {
-                    card.classList.remove('is-loading-table');
+                    section.classList.remove('is-loading-table');
                 }
                 showErrorMessage('Error al cargar datos');
                 console.error('AJAX error:', result);
             }
         })
         .catch(function(error) {
-            if (card) {
+            if (section) {
-                card.classList.remove('is-loading-table');
+                section.classList.remove('is-loading-table');
             }
             console.error('Fetch error:', error);
             showErrorMessage('Error de conexión');

admin/class-analytics-dashboard.php

@@ -480,14 +480,25 @@ final class ROI_APU_Analytics_Dashboard
 
                     <!-- 🟡 REVISAR: Títulos con CTR 0% -->
                     <?php if (!empty($ctr_zero)) : ?>
-                    <div class="card mb-4 shadow-sm" style="border-left: 4px solid #f59e0b;">
+                    <div class="collapsible-section">
-                        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #f59e0b; color: white;">
+                        <button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
-                            <h6 class="mb-0 d-flex align-items-center gap-2">
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse-ctr-zero"
+                                aria-expanded="false"
+                                aria-controls="collapse-ctr-zero"
+                                style="background-color: #f59e0b; color: white;">
+                            <span class="d-flex align-items-center gap-2">
                                 <i class="bi bi-pencil-square"></i>
-                                <?php esc_html_e('REVISAR: Títulos con CTR 0%', 'roi-apu-search'); ?>
+                                <strong><?php esc_html_e('REVISAR: Títulos con CTR 0%', 'roi-apu-search'); ?></strong>
-                            </h6>
+                            </span>
+                            <span class="d-flex align-items-center gap-2">
                                 <span class="badge bg-light text-dark"><?php echo count($ctr_zero); ?></span>
-                        </div>
+                                <i class="bi bi-chevron-down collapse-chevron"></i>
+                            </span>
+                        </button>
+                        <div class="collapse" id="collapse-ctr-zero">
+                            <div class="card shadow-sm" style="border-left: 4px solid #f59e0b;">
                                 <div class="card-body p-0">
                                     <p class="small text-muted px-3 pt-3 mb-2">
                                         <?php esc_html_e('Estos términos tienen resultados pero nadie hace click. Mejora títulos y descripciones.', 'roi-apu-search'); ?>
@@ -520,18 +531,31 @@ final class ROI_APU_Analytics_Dashboard
                                     </div>
                                 </div>
                             </div>
+                        </div>
+                    </div>
                     <?php endif; ?>
 
                     <!-- 🎯 QUICK WINS: Oportunidades Fáciles -->
                     <?php if (!empty($quick_wins)) : ?>
-                    <div class="card mb-4 shadow-sm" style="border-left: 4px solid #0284c7;">
+                    <div class="collapsible-section">
-                        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #0284c7; color: white;">
+                        <button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
-                            <h6 class="mb-0 d-flex align-items-center gap-2">
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse-quick-wins"
+                                aria-expanded="false"
+                                aria-controls="collapse-quick-wins"
+                                style="background-color: #0284c7; color: white;">
+                            <span class="d-flex align-items-center gap-2">
                                 <i class="bi bi-bullseye"></i>
-                                <?php esc_html_e('QUICK WINS: Oportunidades Fáciles', 'roi-apu-search'); ?>
+                                <strong><?php esc_html_e('QUICK WINS: Oportunidades Fáciles', 'roi-apu-search'); ?></strong>
-                            </h6>
+                            </span>
+                            <span class="d-flex align-items-center gap-2">
                                 <span class="badge bg-light text-dark"><?php echo count($quick_wins); ?></span>
-                        </div>
+                                <i class="bi bi-chevron-down collapse-chevron"></i>
+                            </span>
+                        </button>
+                        <div class="collapse" id="collapse-quick-wins">
+                            <div class="card shadow-sm" style="border-left: 4px solid #0284c7;">
                                 <div class="card-body p-0">
                                     <p class="small text-muted px-3 pt-3 mb-2">
                                         <?php esc_html_e('Términos con clicks que no están en top 1. Una pequeña mejora = más visibilidad.', 'roi-apu-search'); ?>
@@ -562,18 +586,31 @@ final class ROI_APU_Analytics_Dashboard
                                     </div>
                                 </div>
                             </div>
+                        </div>
+                    </div>
                     <?php endif; ?>
 
                     <!-- 📉 ATENCIÓN: Contenido en Decadencia -->
                     <?php if (!empty($decay_content)) : ?>
-                    <div class="card mb-4 shadow-sm" style="border-left: 4px solid #6b7280;">
+                    <div class="collapsible-section">
-                        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #6b7280; color: white;">
+                        <button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
-                            <h6 class="mb-0 d-flex align-items-center gap-2">
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse-decay"
+                                aria-expanded="false"
+                                aria-controls="collapse-decay"
+                                style="background-color: #6b7280; color: white;">
+                            <span class="d-flex align-items-center gap-2">
                                 <i class="bi bi-graph-down"></i>
-                                <?php esc_html_e('ATENCIÓN: Contenido en Decadencia', 'roi-apu-search'); ?>
+                                <strong><?php esc_html_e('ATENCIÓN: Contenido en Decadencia', 'roi-apu-search'); ?></strong>
-                            </h6>
+                            </span>
+                            <span class="d-flex align-items-center gap-2">
                                 <span class="badge bg-light text-dark"><?php echo count($decay_content); ?></span>
-                        </div>
+                                <i class="bi bi-chevron-down collapse-chevron"></i>
+                            </span>
+                        </button>
+                        <div class="collapse" id="collapse-decay">
+                            <div class="card shadow-sm" style="border-left: 4px solid #6b7280;">
                                 <div class="card-body p-0">
                                     <p class="small text-muted px-3 pt-3 mb-2">
                                         <?php esc_html_e('Posts que perdieron >20% clicks vs período anterior. Revisa si están desactualizados.', 'roi-apu-search'); ?>
@@ -617,18 +654,31 @@ final class ROI_APU_Analytics_Dashboard
                                     </div>
                                 </div>
                             </div>
+                        </div>
+                    </div>
                     <?php endif; ?>
 
                     <!-- 🟢 MANTENER: Tu Contenido Estrella -->
                     <?php if (!empty($contenido_estrella)) : ?>
-                    <div class="card mb-4 shadow-sm" style="border-left: 4px solid #22c55e;">
+                    <div class="collapsible-section">
-                        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #22c55e; color: white;">
+                        <button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
-                            <h6 class="mb-0 d-flex align-items-center gap-2">
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse-star"
+                                aria-expanded="false"
+                                aria-controls="collapse-star"
+                                style="background-color: #22c55e; color: white;">
+                            <span class="d-flex align-items-center gap-2">
                                 <i class="bi bi-star-fill"></i>
-                                <?php esc_html_e('MANTENER: Tu Contenido Estrella', 'roi-apu-search'); ?>
+                                <strong><?php esc_html_e('MANTENER: Tu Contenido Estrella', 'roi-apu-search'); ?></strong>
-                            </h6>
+                            </span>
+                            <span class="d-flex align-items-center gap-2">
                                 <span class="badge bg-light text-dark"><?php echo count($contenido_estrella); ?></span>
-                        </div>
+                                <i class="bi bi-chevron-down collapse-chevron"></i>
+                            </span>
+                        </button>
+                        <div class="collapse" id="collapse-star">
+                            <div class="card shadow-sm" style="border-left: 4px solid #22c55e;">
                                 <div class="card-body p-0">
                                     <p class="small text-muted px-3 pt-3 mb-2">
                                         <?php esc_html_e('Posts con más clicks. Mantén este contenido actualizado y optimizado.', 'roi-apu-search'); ?>
@@ -670,18 +720,31 @@ final class ROI_APU_Analytics_Dashboard
                                     </div>
                                 </div>
                             </div>
+                        </div>
+                    </div>
                     <?php endif; ?>
 
                     <!-- Posts infraposicionados -->
                     <?php if (!empty($infraposicionados)) : ?>
-                    <div class="card mb-4 shadow-sm" style="border-left: 4px solid #f59e0b;">
+                    <div class="collapsible-section">
-                        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #f59e0b; color: white;">
+                        <button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
-                            <h6 class="mb-0 d-flex align-items-center gap-2">
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse-infrapos"
+                                aria-expanded="false"
+                                aria-controls="collapse-infrapos"
+                                style="background-color: #f59e0b; color: white;">
+                            <span class="d-flex align-items-center gap-2">
                                 <i class="bi bi-arrow-up-circle"></i>
-                                <?php esc_html_e('OPORTUNIDAD: Posts Infraposicionados', 'roi-apu-search'); ?>
+                                <strong><?php esc_html_e('OPORTUNIDAD: Posts Infraposicionados', 'roi-apu-search'); ?></strong>
-                            </h6>
+                            </span>
+                            <span class="d-flex align-items-center gap-2">
                                 <span class="badge bg-light text-dark"><?php echo count($infraposicionados); ?></span>
-                        </div>
+                                <i class="bi bi-chevron-down collapse-chevron"></i>
+                            </span>
+                        </button>
+                        <div class="collapse" id="collapse-infrapos">
+                            <div class="card shadow-sm" style="border-left: 4px solid #f59e0b;">
                                 <div class="card-body p-0">
                                     <p class="small text-muted px-3 pt-3 mb-2">
                                         <?php esc_html_e('Estos posts reciben clicks pero aparecen muy abajo. Considera mejorar su scoring.', 'roi-apu-search'); ?>
@@ -725,6 +788,8 @@ final class ROI_APU_Analytics_Dashboard
                                     </div>
                                 </div>
                             </div>
+                        </div>
+                    </div>
                     <?php endif; ?>
 
                     <!-- ═══════════════ DATOS DETALLADOS ═══════════════ -->
@@ -738,14 +803,25 @@ final class ROI_APU_Analytics_Dashboard
 
                     <!-- 📊 Click Distribution -->
                     <?php if (!empty($click_distribution)) : ?>
-                    <div class="card mb-4 shadow-sm">
+                    <div class="collapsible-section">
-                        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #0E2337; color: white;">
+                        <button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
-                            <h6 class="mb-0 d-flex align-items-center gap-2">
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse-click-dist"
+                                aria-expanded="false"
+                                aria-controls="collapse-click-dist"
+                                style="background-color: #0E2337; color: white;">
+                            <span class="d-flex align-items-center gap-2">
                                 <i class="bi bi-bar-chart-fill"></i>
-                                <?php esc_html_e('Distribución de Clicks por Posición', 'roi-apu-search'); ?>
+                                <strong><?php esc_html_e('Distribución de Clicks por Posición', 'roi-apu-search'); ?></strong>
-                            </h6>
+                            </span>
+                            <span class="d-flex align-items-center gap-2">
                                 <span class="badge bg-light text-dark"><?php echo esc_html(array_sum(array_column($click_distribution, 'clicks'))); ?> <?php esc_html_e('clicks totales', 'roi-apu-search'); ?></span>
-                        </div>
+                                <i class="bi bi-chevron-down collapse-chevron"></i>
+                            </span>
+                        </button>
+                        <div class="collapse" id="collapse-click-dist">
+                            <div class="card shadow-sm">
                                 <div class="card-body p-0">
                                     <div class="table-responsive">
                                         <table class="table table-striped table-hover mb-0">
@@ -800,17 +876,30 @@ final class ROI_APU_Analytics_Dashboard
                                     </div>
                                 </div>
                             </div>
+                        </div>
+                    </div>
                     <?php endif; ?>
 
                     <!-- 📊 Top Búsquedas Table -->
-                    <div class="card mb-4 shadow-sm">
+                    <div class="collapsible-section" id="section-top-searches">
-                        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #1e3a5f; color: white;">
+                        <button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
-                            <h6 class="mb-0 d-flex align-items-center gap-2">
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse-top-searches"
+                                aria-expanded="false"
+                                aria-controls="collapse-top-searches"
+                                style="background-color: #1e3a5f; color: white;">
+                            <span class="d-flex align-items-center gap-2">
                                 <i class="bi bi-search"></i>
-                                <?php esc_html_e('Top Búsquedas', 'roi-apu-search'); ?>
+                                <strong><?php esc_html_e('Top Búsquedas', 'roi-apu-search'); ?></strong>
-                            </h6>
+                            </span>
+                            <span class="d-flex align-items-center gap-2">
                                 <span class="badge bg-light text-dark"><?php echo esc_html($total_counts['total_searches']); ?> <?php esc_html_e('términos', 'roi-apu-search'); ?></span>
-                        </div>
+                                <i class="bi bi-chevron-down collapse-chevron"></i>
+                            </span>
+                        </button>
+                        <div class="collapse" id="collapse-top-searches">
+                            <div class="card shadow-sm">
                                 <div class="card-body p-0">
                                     <div class="table-responsive">
                                         <table class="table table-striped table-hover mb-0">
@@ -850,16 +939,29 @@ final class ROI_APU_Analytics_Dashboard
                                 </div>
                                 <?php endif; ?>
                             </div>
+                        </div>
+                    </div>
 
                     <!-- 📄 Top Posts Clickeados Table -->
-                    <div class="card mb-4 shadow-sm">
+                    <div class="collapsible-section" id="section-top-clicks">
-                        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #FF8600; color: white;">
+                        <button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
-                            <h6 class="mb-0 d-flex align-items-center gap-2">
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse-top-clicks"
+                                aria-expanded="false"
+                                aria-controls="collapse-top-clicks"
+                                style="background-color: #FF8600; color: white;">
+                            <span class="d-flex align-items-center gap-2">
                                 <i class="bi bi-file-earmark-text"></i>
-                                <?php esc_html_e('Top Posts Clickeados', 'roi-apu-search'); ?>
+                                <strong><?php esc_html_e('Top Posts Clickeados', 'roi-apu-search'); ?></strong>
-                            </h6>
+                            </span>
+                            <span class="d-flex align-items-center gap-2">
                                 <span class="badge bg-light text-dark"><?php echo esc_html($total_counts['total_clicks']); ?> <?php esc_html_e('posts', 'roi-apu-search'); ?></span>
-                        </div>
+                                <i class="bi bi-chevron-down collapse-chevron"></i>
+                            </span>
+                        </button>
+                        <div class="collapse" id="collapse-top-clicks">
+                            <div class="card shadow-sm">
                                 <div class="card-body p-0">
                                     <div class="table-responsive">
                                         <table class="table table-striped table-hover mb-0">
@@ -908,17 +1010,30 @@ final class ROI_APU_Analytics_Dashboard
                                 </div>
                                 <?php endif; ?>
                             </div>
+                        </div>
+                    </div>
 
                     <!-- ❌ Búsquedas Sin Resultados Table -->
                     <?php if (!empty($all_zero_results)) : ?>
-                    <div class="card mb-4 shadow-sm">
+                    <div class="collapsible-section" id="section-zero-results">
-                        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #ef4444; color: white;">
+                        <button class="collapsible-header d-flex justify-content-between align-items-center w-100 p-3 border-0 shadow-sm collapsed"
-                            <h6 class="mb-0 d-flex align-items-center gap-2">
+                                type="button"
+                                data-bs-toggle="collapse"
+                                data-bs-target="#collapse-zero-results"
+                                aria-expanded="false"
+                                aria-controls="collapse-zero-results"
+                                style="background-color: #ef4444; color: white;">
+                            <span class="d-flex align-items-center gap-2">
                                 <i class="bi bi-x-circle"></i>
-                                <?php esc_html_e('Búsquedas Sin Resultados', 'roi-apu-search'); ?>
+                                <strong><?php esc_html_e('Búsquedas Sin Resultados', 'roi-apu-search'); ?></strong>
-                            </h6>
+                            </span>
+                            <span class="d-flex align-items-center gap-2">
                                 <span class="badge bg-light text-dark"><?php echo esc_html($total_counts['total_zero_results']); ?> <?php esc_html_e('términos', 'roi-apu-search'); ?></span>
-                        </div>
+                                <i class="bi bi-chevron-down collapse-chevron"></i>
+                            </span>
+                        </button>
+                        <div class="collapse" id="collapse-zero-results">
+                            <div class="card shadow-sm" style="border-left: 4px solid #ef4444;">
                                 <div class="card-body p-0">
                                     <p class="small text-muted px-3 pt-3 mb-2">
                                         <?php esc_html_e('Los usuarios buscan esto pero NO encuentran nada. ¡Crea este contenido!', 'roi-apu-search'); ?>
@@ -957,6 +1072,8 @@ final class ROI_APU_Analytics_Dashboard
                                 </div>
                                 <?php endif; ?>
                             </div>
+                        </div>
+                    </div>
                     <?php endif; ?>
 
                     <!-- Export Card -->