@php
    // Variables no usadas pero mantenidas para compatibilidad
@endphp

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Resumen Diagnóstica - Compromiso 3 - DIAGNOSTIKA</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=roboto:400,500,700&display=swap" rel="stylesheet" />

        <!-- Tailwind CSS -->
        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.js'])
        @else
            <script src="https://cdn.tailwindcss.com"></script>
        @endif

        <!-- Chart.js -->
        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>
        <!-- Chart.js Data Labels Plugin -->
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

        <style>
            .summary-card {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border-radius: 12px;
                padding: 1.25rem;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            }

            @media (min-width: 640px) {
                .summary-card {
                    padding: 2rem;
                }
            }

            .summary-card .text-sm {
                font-size: 0.75rem;
            }

            @media (min-width: 640px) {
                .summary-card .text-sm {
                    font-size: 0.875rem;
                }
            }

            .summary-card .text-5xl {
                font-size: 2rem;
            }

            @media (min-width: 640px) {
                .summary-card .text-5xl {
                    font-size: 3rem;
                }
            }

            .weakness-item {
                background-color: #fff5f5;
                border-left: 4px solid #ef4444;
                padding: 1rem;
                margin-bottom: 1rem;
                border-radius: 6px;
            }

            .in-progress-item {
                background-color: #fff7ed;
                border-left: 4px solid #f97316;
                padding: 1rem;
                margin-bottom: 1rem;
                border-radius: 6px;
            }

            .strength-item {
                background-color: #f0fdf4;
                border-left: 4px solid #10b981;
                padding: 1rem;
                margin-bottom: 1rem;
                border-radius: 6px;
            }

            .chart-container {
                position: relative;
                height: 500px;
                background: white;
                border-radius: 12px;
                padding: 1rem;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            }

            @media (min-width: 640px) {
                .chart-container {
                    height: 400px;
                    padding: 1.5rem;
                }
            }

            @media (min-width: 1024px) {
                .chart-container {
                    height: 500px;
                }
            }

            .section-indicator {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1rem;
                background: white;
                border-radius: 8px;
                margin-bottom: 1rem;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                border-left: 4px solid #3b82f6;
            }

            .weakness-badge {
                background-color: #fee2e2;
                color: #991b1b;
                padding: 0.25rem 0.75rem;
                border-radius: 999px;
                font-size: 0.875rem;
                font-weight: 600;
            }

            .strength-badge {
                background-color: #dcfce7;
                color: #166534;
                padding: 0.25rem 0.75rem;
                border-radius: 999px;
                font-size: 0.875rem;
                font-weight: 600;
            }

            .in-progress-badge {
                background-color: #fed7aa;
                color: #92400e;
                padding: 0.25rem 0.75rem;
                border-radius: 999px;
                font-size: 0.875rem;
                font-weight: 600;
            }

            .no-weakness {
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                color: white;
                padding: 2rem;
                border-radius: 12px;
                text-align: center;
            }

            .stat-row {
                display: flex;
                gap: 2rem;
                margin-top: 0.5rem;
            }

            .stat {
                flex: 1;
                padding: 0.75rem;
                background: #f3f4f6;
                border-radius: 6px;
                text-center;
            }

            .stat-label {
                font-size: 0.75rem;
                color: #6b7280;
                text-transform: uppercase;
                font-weight: 600;
            }

            .stat-value {
                font-size: 1.5rem;
                font-weight: bold;
                color: #1f2937;
            }

            /* Estilos para tablas compactas - RESPONSIVE */
            .compact-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 0.8rem;
            }

            @media (min-width: 640px) {
                .compact-table {
                    font-size: 0.9rem;
                }
            }

            /* En móviles: ocultar thead y mostrar como tarjetas */
            @media (max-width: 639px) {
                .compact-table thead {
                    display: none;
                }

                .compact-table tbody tr {
                    display: block;
                    background: white;
                    border: 1px solid #e5e7eb;
                    border-radius: 8px;
                    padding: 1rem;
                    margin-bottom: 1rem;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                }

                .compact-table tbody tr:last-child {
                    margin-bottom: 0;
                }

                .compact-table td {
                    display: block;
                    padding: 0.75rem 0;
                    border: none;
                    border-bottom: 1px solid #f3f4f6;
                    margin-bottom: 0.75rem;
                }

                .compact-table td:last-child {
                    border-bottom: none;
                    margin-bottom: 0;
                    padding-bottom: 0;
                }

                .compact-table td::before {
                    content: attr(data-label);
                    font-weight: 700;
                    color: #1f2937;
                    display: block;
                    font-size: 0.75rem;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    margin-bottom: 0.3rem;
                    opacity: 0.7;
                }
            }

            /* En desktop: mostrar como tabla normal */
            .compact-table thead {
                background-color: #f3f4f6;
                border-bottom: 2px solid #d1d5db;
            }

            .compact-table th {
                padding: 0.5rem 0.5rem;
                text-align: left;
                font-weight: 600;
                color: #1f2937;
                border-right: 1px solid #e5e7eb;
                font-size: 0.75rem;
            }

            @media (min-width: 640px) {
                .compact-table th {
                    padding: 0.75rem;
                    font-size: 0.875rem;
                }
            }

            .compact-table th:last-child {
                border-right: none;
            }

            .compact-table td {
                padding: 0.5rem;
                border-bottom: 1px solid #e5e7eb;
                color: #374151;
                font-size: 0.75rem;
            }

            @media (min-width: 640px) {
                .compact-table td {
                    padding: 0.65rem 0.75rem;
                    font-size: 0.875rem;
                }
            }

            .compact-table tbody tr:hover {
                background-color: #f9fafb;
            }

            .compact-table tbody tr:last-child td {
                border-bottom: none;
            }

            .cell-pregunta {
                font-weight: 600;
                color: #1f2937;
                min-width: 50px;
            }

            @media (min-width: 640px) {
                .cell-pregunta {
                    min-width: 70px;
                }
            }

            .cell-valor {
                background-color: #fef2f2;
                color: #991b1b;
                font-weight: 600;
                padding: 0.25rem 0.5rem;
                border-radius: 4px;
                text-align: center;
                min-width: 80px;
            }

            @media (max-width: 639px) {
                .cell-valor {
                    background-color: #fef2f2;
                    color: #991b1b;
                    padding: 0.5rem 0.75rem;
                    border-radius: 6px;
                    text-align: left;
                    font-size: 0.875rem;
                }
            }

            @media (min-width: 640px) {
                .cell-valor {
                    padding: 0.35rem 0.75rem;
                    min-width: 120px;
                }
            }

            .cell-valor.fortaleza {
                background-color: #f0fdf4;
                color: #166534;
            }

            .cell-seccion {
                font-weight: 600;
                color: #374151;
                min-width: 150px;
                word-wrap: break-word;
                white-space: normal;
                word-break: break-word;
            }

            @media (max-width: 639px) {
                .cell-seccion {
                    font-weight: 500;
                    font-size: 0.9rem;
                    color: #1f2937;
                    padding: 0;
                }
            }

            @media (min-width: 640px) {
                .cell-seccion {
                    min-width: 200px;
                }
            }

            .cell-descripcion {
                word-wrap: break-word;
                white-space: normal;
                word-break: break-word;
                min-width: 200px;
                line-height: 1.5;
            }

            @media (max-width: 639px) {
                .cell-descripcion {
                    font-size: 0.875rem;
                    color: #4b5563;
                    padding: 0;
                    line-height: 1.6;
                }
            }

            @media (min-width: 640px) {
                .cell-descripcion {
                    min-width: 300px;
                }
            }
        </style>
    </head>
    <body class="min-h-screen bg-gray-50 font-sans">
        <!-- Header -->
        <header class="bg-blue-950 px-3 sm:px-6 py-3 sm:py-4 shadow-lg">
            <div class="max-w-7xl mx-auto flex justify-between items-center">
                <!-- Logo -->
                <div class="flex items-center">
                    <img src="{{ asset('images/logo.gif') }}" alt="DIAGNOSTIKA Logo" class="h-10 sm:h-16" />
                </div>

                <!-- Navigation -->
                <nav class="flex items-center gap-2 sm:space-x-4">
                    @auth
                        <div class="flex items-center gap-2 sm:space-x-3">
                            <span class="text-white font-semibold text-xs sm:text-base hidden sm:inline">{{ Auth::user()->name ?? 'Usuario' }}</span>
                            <form method="POST" action="{{ route('logout') }}" style="display:inline;">
                                @csrf
                                <button type="submit" class="text-white border border-white px-2 sm:px-4 py-1 sm:py-2 rounded text-xs sm:text-base hover:bg-red-600 hover:border-red-600 transition">
                                    Salir
                                </button>
                            </form>
                        </div>
                    @endauth
                </nav>
            </div>
        </header>

        <!-- Main Content -->
        <main class="max-w-7xl mx-auto px-3 sm:px-6 py-6 sm:py-12">
            <!-- Page Title -->
            <div class="text-center mb-6 sm:mb-8">
                <h1 class="text-xl sm:text-3xl font-bold text-gray-800 mb-2">Resumen Ficha Diagnóstica - Instituciones Educativas</h1>
            </div>

            <!-- White Container for Form -->
            <div class="bg-white rounded-lg shadow-xl p-4 sm:p-8 mb-6 sm:mb-8">
                <!-- Subtitles -->
                <div class="mb-6 sm:mb-8">
                    <h2 class="text-lg sm:text-2xl font-bold text-blue-900 mb-2 sm:mb-4">COMPROMISO DE GESTIÓN 3 - GESTIÓN DE LAS CONDICIONES OPERATIVAS</h2>
                </div>
            </div>

            <!-- Summary Cards -->
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2 sm:gap-4 md:gap-6 mb-6 sm:mb-8">
                <!-- Total Debilidades -->
                <div class="summary-card">
                    <div class="text-sm font-semibold opacity-90 mb-2">🔴 DEBILIDADES</div>
                    <div class="text-5xl font-bold mb-2">{{ $total_debilidades }}</div>
                    @php
                        $porcentajeDebilidades = ($total_debilidades / 25) * 100;
                    @endphp
                    <div class="text-sm opacity-90">{{ round($porcentajeDebilidades, 0) }}%</div>
                    <div class="text-xs opacity-75 mt-1">Nunca (1) / Rara vez (2)</div>
                </div>

                <!-- Total En Proceso -->
                <div class="summary-card">
                    <div class="text-sm font-semibold opacity-90 mb-2">🟠 EN PROCESO</div>
                    <div class="text-5xl font-bold mb-2">{{ $total_en_proceso }}</div>
                    @php
                        $porcentajeEnProceso = ($total_en_proceso / 25) * 100;
                    @endphp
                    <div class="text-sm opacity-90">{{ round($porcentajeEnProceso, 0) }}%</div>
                    <div class="text-xs opacity-75 mt-1">A veces (3)</div>
                </div>

                <!-- Total Fortalezas -->
                <div class="summary-card">
                    <div class="text-sm font-semibold opacity-90 mb-2">🟢 FORTALEZAS</div>
                    <div class="text-5xl font-bold mb-2">{{ $total_fortalezas }}</div>
                    @php
                        $porcentajeFortalezas = ($total_fortalezas / 25) * 100;
                    @endphp
                    <div class="text-sm opacity-90">{{ round($porcentajeFortalezas, 0) }}%</div>
                    <div class="text-xs opacity-75 mt-1">Casi siempre (4) / Siempre (5)</div>
                </div>

                <!-- Secciones con más debilidades -->
                <div class="summary-card">
                    <div class="text-sm font-semibold opacity-90 mb-2">⚠️ CRÍTICAS</div>
                    <div class="space-y-2">
                        @php
                            $seccionesConDebilidades = collect($analisis)->filter(fn($s) => $s['debilidades'] > 0)->sortByDesc('debilidades');
                        @endphp
                        @forelse($seccionesConDebilidades as $seccion)
                            <div class="text-sm">
                                    <p class="font-semibold">{{ $loop->index + 1 }}. {{ mb_substr($seccion['nombre'], 0, 20) }}</p>
                                <p class="text-xs opacity-90">{{ $seccion['debilidades'] }} crítica(s)</p>
                            </div>
                        @empty
                            <p class="text-sm opacity-90">✓ Sin críticas</p>
                        @endforelse
                    </div>
                </div>

                <!-- Diagnóstico General -->
                <div class="summary-card">
                    <div class="text-sm font-semibold opacity-90 mb-2">📊 ESTADO</div>
                    @php
                        $tasaDebilidades = ($total_debilidades / 25) * 100;
                        if ($tasaDebilidades >= 40) {
                            $estado = 'Crítico';
                            $emoji = '⛔';
                        } elseif ($tasaDebilidades >= 20) {
                            $estado = 'Requiere Mejora';
                            $emoji = '⚠️';
                        } else {
                            $estado = 'Aceptable';
                            $emoji = '✅';
                        }
                    @endphp
                    <div class="text-3xl font-bold mb-2">{{ round($tasaDebilidades, 0) }}%</div>
                    <div class="text-sm opacity-90">{{ $emoji }} {{ $estado }}</div>
                </div>
            </div>

            <!-- Charts Section -->
            <div class="mb-6 sm:mb-8">
                <!-- Chart 1: Debilidades, En Proceso y Fortalezas por Sección -->
                <div class="chart-container">
                    <canvas id="debilidadesFortalezasChart"></canvas>
                </div>
            </div>

            <!-- Secciones Detalladas (OCULTO) -->
            <div class="mb-8" style="display: none;">
                <h2 class="text-2xl font-bold text-gray-800 mb-4">📋 Análisis por Sección</h2>
                <div class="space-y-3">
                    @foreach($analisis as $seccion)
                        <div class="section-indicator">
                            <div class="flex-1">
                                <p class="font-semibold text-gray-800 mb-2">{{ $seccion['nombre'] }}</p>
                                <div class="stat-row">
                                    <div class="stat">
                                        <div class="stat-label">Debilidades (1-2)</div>
                                        <div class="stat-value text-red-600">{{ $seccion['debilidades'] }} ({{ $seccion['porcentaje_debilidades'] }}%)</div>
                                    </div>
                                    <div class="stat">
                                        <div class="stat-label">En Proceso (3)</div>
                                        <div class="stat-value text-orange-600">{{ $seccion['en_proceso'] }} ({{ $seccion['porcentaje_en_proceso'] }}%)</div>
                                    </div>
                                    <div class="stat">
                                        <div class="stat-label">Fortalezas (4-5)</div>
                                        <div class="stat-value text-green-600">{{ $seccion['fortalezas'] }} ({{ $seccion['porcentaje_fortalezas'] }}%)</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Debilidades Detalladas -->
            <div class="mb-6 sm:mb-8">
                <h2 class="text-lg sm:text-2xl font-bold text-gray-800 mb-3 sm:mb-4">🔴 Debilidades Identificadas (1-Nunca / 2-Rara vez)</h2>
                
                @if($total_debilidades > 0)
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <table class="compact-table">
                            <thead>
                                <tr>
                                    <th style="width: 80px;">Pregunta</th>
                                    <th style="width: 120px;">Nivel</th>
                                    <th>Sección</th>
                                    <th>Descripción</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($debilidades as $debilidad)
                                    <tr>
                                        <td class="cell-pregunta" data-label="Pregunta">#{{ $debilidad['pregunta_id'] }}</td>
                                        <td class="cell-valor" data-label="Nivel">
                                            @if($debilidad['valor'] == 1) Nunca @elseif($debilidad['valor'] == 2) Rara vez @endif
                                        </td>
                                        <td class="cell-seccion" data-label="Sección">{{ $debilidad['seccion'] }}</td>
                                        <td class="cell-descripcion" data-label="Descripción">{{ $debilidad['descripcion'] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="bg-red-50 rounded-lg shadow-md p-6 border-l-4 border-red-500">
                        <p class="text-red-700 font-semibold">✓ No se detectaron debilidades críticas en esta evaluación.</p>
                    </div>
                @endif
            </div>

            <!-- En Proceso Detallado (OCULTO) -->
            <div class="mb-8" style="display: none;">
                <h2 class="text-2xl font-bold text-gray-800 mb-4">🟠 Aspectos En Proceso (3-A veces)</h2>
                
                @if($total_en_proceso > 0)
                    <div class="bg-white rounded-lg shadow-md p-6">
                        @php
                            $enProcesoPorSeccion = collect($en_proceso)->groupBy('seccion');
                        @endphp
                        
                        @foreach($enProcesoPorSeccion as $seccion => $items)
                            <div class="mb-6 last:mb-0">
                                <h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center">
                                    <span class="inline-block w-3 h-3 bg-orange-500 rounded-full mr-2"></span>
                                    {{ $seccion }}
                                </h3>
                                <div class="space-y-2 ml-5">
                                    @foreach($items as $item)
                                        <div class="in-progress-item">
                                            <p><strong>Pregunta {{ $item['pregunta_id'] }}:</strong> (A veces)</p>
                                            <p class="mt-1 text-gray-700">{{ $item['descripcion'] }}</p>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="bg-orange-50 rounded-lg shadow-md p-6 border-l-4 border-orange-500">
                        <p class="text-orange-700 font-semibold">✓ No hay aspectos en proceso, excelente desempeño.</p>
                    </div>
                @endif
            </div>

            <!-- Fortalezas Detalladas -->
            <div class="mb-6 sm:mb-8">
                <h2 class="text-lg sm:text-2xl font-bold text-gray-800 mb-3 sm:mb-4">🟢 Fortalezas Identificadas (4-Casi siempre / 5-Siempre)</h2>
                
                @if($total_fortalezas > 0)
                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
                        <table class="compact-table">
                            <thead>
                                <tr>
                                    <th style="width: 80px;">Pregunta</th>
                                    <th style="width: 120px;">Nivel</th>
                                    <th>Sección</th>
                                    <th>Descripción</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($fortalezas as $fortaleza)
                                    <tr>
                                        <td class="cell-pregunta" data-label="Pregunta">#{{ $fortaleza['pregunta_id'] }}</td>
                                        <td class="cell-valor fortaleza" data-label="Nivel">
                                            @if($fortaleza['valor'] == 4) Casi siempre @elseif($fortaleza['valor'] == 5) Siempre @endif
                                        </td>
                                        <td class="cell-seccion" data-label="Sección">{{ $fortaleza['seccion'] }}</td>
                                        <td class="cell-descripcion" data-label="Descripción">{{ $fortaleza['descripcion'] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="bg-green-50 rounded-lg shadow-md p-6 border-l-4 border-green-500">
                        <p class="text-green-700 font-semibold">⚠️ No hay fortalezas identificadas. Se requiere mejora en todas las áreas.</p>
                    </div>
                @endif
            </div>

            <!-- Acciones -->
            <div class="flex justify-between gap-4 pt-8 border-t border-gray-300">
                <a href="{{ route('compromiso1') }}" class="px-8 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-100 transition">
                    Atras
                </a>
                @auth
                    <a href="{{ route('compromiso2') }}" class="px-8 py-3 bg-blue-900 text-white rounded-lg font-semibold hover:bg-blue-800 transition">
                        Guardar y Continuar
                    </a>
                @else
                    <button onclick="document.getElementById('modalRegistro').classList.remove('hidden')" class="px-8 py-3 bg-blue-900 text-white rounded-lg font-semibold hover:bg-blue-800 transition">
                        Continuar
                    </button>
                @endauth
            </div>
        </main>

        <!-- Modal de Registro Requerido -->
        <div id="modalRegistro" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 overflow-hidden transform transition-all">
                <div class="p-6 text-center">
                    <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-10 h-10 text-blue-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">¡Excelente avance!</h3>
                    <p class="text-gray-600 mb-8 px-2">
                        Has completado con éxito el primer compromiso. Para guardar tu progreso y continuar con los siguientes niveles del diagnóstico, es necesario que te registres en nuestra plataforma.
                    </p>
                    <div class="flex flex-col gap-3">
                        <a href="{{ route('register') }}" class="w-full bg-blue-900 text-white px-6 py-3 rounded-lg font-bold hover:bg-blue-800 transition shadow-lg text-center">
                            Registrarme ahora
                        </a>
                        <button onclick="document.getElementById('modalRegistro').classList.add('hidden')" class="w-full text-gray-500 text-sm font-semibold hover:text-gray-700 py-2 transition">
                            Volver al resumen
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="bg-blue-950 text-blue-100 py-6 mt-12">
            <div class="max-w-7xl mx-auto px-6 text-center">
                <p>&copy; 2026 DIAGNOSTIKA. Herramienta de Evaluación Educativa</p>
            </div>
        </footer>

        <script>
            // Registrar el plugin datalabels
            Chart.register(ChartDataLabels);
            
            // Preparar datos para gráficos
            const secciones = {!! json_encode(array_values($analisis)) !!};

            // Detectar si es dispositivo móvil
            const isMobile = window.innerWidth < 768;
            
            // Gráfico 1: Debilidades, En Proceso y Fortalezas por Sección (Barras Agrupadas)
            const ctx1 = document.getElementById('debilidadesFortalezasChart').getContext('2d');
            new Chart(ctx1, {
                type: 'bar',
                data: {
                    labels: secciones.map(s => s.nombre),
                    datasets: [
                        {
                            label: 'Debilidades (1-2)',
                            data: secciones.map(s => s.debilidades),
                            backgroundColor: '#ef4444',
                            borderColor: '#dc2626',
                            borderWidth: 2,
                            borderRadius: 6
                        },
                        {
                            label: 'En Proceso (3)',
                            data: secciones.map(s => s.en_proceso),
                            backgroundColor: '#f97316',
                            borderColor: '#ea580c',
                            borderWidth: 2,
                            borderRadius: 6
                        },
                        {
                            label: 'Fortalezas (4-5)',
                            data: secciones.map(s => s.fortalezas),
                            backgroundColor: '#10b981',
                            borderColor: '#059669',
                            borderWidth: 2,
                            borderRadius: 6
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    indexAxis: isMobile ? 'y' : 'x',
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { 
                                font: { size: isMobile ? 11 : 13 },
                                usePointStyle: true,
                                padding: isMobile ? 12 : 20
                            }
                        },
                        title: {
                            display: true,
                            text: 'Evaluación por Categoría - Por Sección',
                            font: { size: isMobile ? 14 : 17, weight: 'bold' }
                        },
                        datalabels: {
                            anchor: 'center',
                            align: 'center',
                            color: '#fff',
                            font: {
                                weight: 'bold',
                                size: isMobile ? 10 : 13
                            },
                            formatter: function(value, context) {
                                const datasetIndex = context.datasetIndex;
                                const dataIndex = context.dataIndex;
                                let percent = 0;
                                
                                if (datasetIndex === 0) {
                                    percent = secciones[dataIndex].porcentaje_debilidades;
                                } else if (datasetIndex === 1) {
                                    percent = secciones[dataIndex].porcentaje_en_proceso;
                                } else if (datasetIndex === 2) {
                                    percent = secciones[dataIndex].porcentaje_fortalezas;
                                }
                                
                                return percent.toFixed(0) + '%';
                            }
                        },
                        tooltip: {
                            callbacks: {
                                title: function(context) {
                                    const dataIndex = context[0].dataIndex;
                                    return secciones[dataIndex].nombre;
                                },
                                label: function(context) {
                                    const label = context.dataset.label || '';
                                    const value = context.parsed[isMobile ? 'x' : 'y'];
                                    let percent = 0;
                                    
                                    if (context.datasetIndex === 0) {
                                        percent = secciones[context.dataIndex].porcentaje_debilidades;
                                    } else if (context.datasetIndex === 1) {
                                        percent = secciones[context.dataIndex].porcentaje_en_proceso;
                                    } else if (context.datasetIndex === 2) {
                                        percent = secciones[context.dataIndex].porcentaje_fortalezas;
                                    }
                                    
                                    return label + ': ' + value + ' (' + percent.toFixed(0) + '%)';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 5,
                            ticks: { 
                                stepSize: 1,
                                font: { size: isMobile ? 10 : 12 }
                            },
                            title: {
                                display: !isMobile,
                                text: 'Cantidad de respuestas',
                                font: { size: 12 }
                            }
                        },
                        x: {
                            ticks: {
                                font: { size: isMobile ? 8 : 10 },
                                maxRotation: 45,
                                minRotation: 45,
                                padding: isMobile ? 8 : 10,
                                callback: function(value, index) {
                                    const label = this.getLabelForValue(value);
                                    if (label.length > 30) {
                                        return label.substring(0, 27) + '...';
                                    }
                                    return label;
                                }
                            },
                            title: {
                                display: isMobile,
                                text: 'Secciones',
                                font: { size: 12 }
                            }
                        }
                    }
                }
            });

            // Gráfico 2: Porcentajes (OCULTO)
            // Este gráfico ha sido desactivado
        </script>
    </body>
</html>
