@extends('layouts.app')

@section('title', 'Dashboard Gerencial')

@section('contenido')

{{-- ═══════════════════════════════════════════════════════════ --}}
{{-- ENCABEZADO --}}
{{-- ═══════════════════════════════════════════════════════════ --}}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">Dashboard Gerencial</h1>
    <p class="text-sm text-gray-500 mt-1">Actualizado al {{ now()->locale('es')->isoFormat('dddd D [de] MMMM [de] YYYY, h:mm a') }}</p>
</div>

{{-- ═══════════════════════════════════════════════════════════ --}}
{{-- BARRA DE FILTROS --}}
{{-- ═══════════════════════════════════════════════════════════ --}}
<form method="GET" action="{{ route('dashboard') }}" id="form-filtros">
<div class="bg-white rounded-xl shadow p-4 mb-6 border border-gray-100">

    {{-- Fila 1: Períodos rápidos --}}
    <div class="flex items-center gap-2 mb-3 flex-wrap">
        <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide mr-1">Período:</span>
        @foreach(['todo'=>'Todo','mes'=>'Este mes','trimestre'=>'Trimestre','anio'=>'Este año'] as $val => $label)
        <a href="{{ route('dashboard', array_merge(request()->except('periodo','fecha_desde','fecha_hasta'), ['periodo'=>$val])) }}"
           class="px-3 py-1 rounded-full text-xs font-semibold transition
           {{ ($filtroPeriodo ?? 'todo') === $val
               ? 'bg-[#064e3b] text-white'
               : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            {{ $label }}
        </a>
        @endforeach

        {{-- Badge filtros activos --}}
        @if(count($filtrosActivos ?? []) > 0)
        <span class="ml-auto flex items-center gap-1 bg-amber-100 text-amber-700 text-xs font-semibold px-3 py-1 rounded-full">
            ⚡ {{ count($filtrosActivos) }} filtro(s) activo(s)
        </span>
        <a href="{{ route('dashboard') }}"
           class="text-xs text-red-500 hover:text-red-700 font-semibold flex items-center gap-1">
            ✕ Limpiar filtros
        </a>
        @endif
    </div>

    {{-- Fila 2: Filtros selectores --}}
    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-3">

        {{-- Entidad --}}
        <div>
            <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wide">Entidad</label>
            <select name="entidad_id" onchange="this.form.submit()"
                    class="w-full text-xs border border-gray-200 rounded-lg px-2 py-2 focus:outline-none focus:ring-2 focus:ring-[#064e3b] bg-gray-50">
                <option value="">Todas</option>
                @foreach($entidades as $e)
                <option value="{{ $e->id }}" {{ ($filtroEntidad ?? '') == $e->id ? 'selected' : '' }}>
                    {{ $e->nombre }}
                </option>
                @endforeach
            </select>
        </div>

        {{-- Tipo proceso --}}
        <div>
            <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wide">Tipo</label>
            <select name="tipo_subproceso" onchange="this.form.submit()"
                    class="w-full text-xs border border-gray-200 rounded-lg px-2 py-2 focus:outline-none focus:ring-2 focus:ring-[#064e3b] bg-gray-50">
                <option value="">Todos</option>
                <option value="PREJUDICIAL" {{ ($filtroTipo ?? '') === 'PREJUDICIAL' ? 'selected' : '' }}>Prejurídico</option>
                <option value="JURIDICO"    {{ ($filtroTipo ?? '') === 'JURIDICO'    ? 'selected' : '' }}>Jurídico</option>
            </select>
        </div>

        {{-- Asesor --}}
        <div>
            <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wide">Asesor</label>
            <select name="asesor_id" onchange="this.form.submit()"
                    class="w-full text-xs border border-gray-200 rounded-lg px-2 py-2 focus:outline-none focus:ring-2 focus:ring-[#064e3b] bg-gray-50">
                <option value="">Todos</option>
                @foreach($asesores as $a)
                <option value="{{ $a->id }}" {{ ($filtroAsesor ?? '') == $a->id ? 'selected' : '' }}>
                    {{ $a->name }}
                </option>
                @endforeach
            </select>
        </div>

        {{-- Estado --}}
        <div>
            <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wide">Estado</label>
            <select name="estado" onchange="this.form.submit()"
                    class="w-full text-xs border border-gray-200 rounded-lg px-2 py-2 focus:outline-none focus:ring-2 focus:ring-[#064e3b] bg-gray-50">
                <option value="">Todos</option>
                <optgroup label="── Prejurídico ──">
                    @foreach($estadosPrej as $val => $label)
                    <option value="{{ $val }}" {{ ($filtroEstado ?? '') === $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </optgroup>
                <optgroup label="── Jurídico ──">
                    @foreach($estadosJur as $val => $label)
                    <option value="{{ $val }}" {{ ($filtroEstado ?? '') === $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </optgroup>
            </select>
        </div>

        {{-- Fecha desde --}}
        <div>
            <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wide">Desde</label>
            <input type="date" name="fecha_desde"
                   value="{{ $filtroDesde ?? '' }}"
                   onchange="this.form.submit()"
                   class="w-full text-xs border border-gray-200 rounded-lg px-2 py-2 focus:outline-none focus:ring-2 focus:ring-[#064e3b] bg-gray-50">
        </div>

        {{-- Fecha hasta --}}
        <div>
            <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wide">Hasta</label>
            <input type="date" name="fecha_hasta"
                   value="{{ $filtroHasta ?? '' }}"
                   onchange="this.form.submit()"
                   class="w-full text-xs border border-gray-200 rounded-lg px-2 py-2 focus:outline-none focus:ring-2 focus:ring-[#064e3b] bg-gray-50">
        </div>

    </div>

    {{-- Preservar período si está activo --}}
    @if(($filtroPeriodo ?? 'todo') !== 'todo')
    <input type="hidden" name="periodo" value="{{ $filtroPeriodo }}">
    @endif

</div>
</form>

{{-- ═══════════════════════════════════════════════════════════ --}}
{{-- SECCIÓN 1 — TARJETAS DE MÉTRICAS RÁPIDAS --}}
{{-- ═══════════════════════════════════════════════════════════ --}}
<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4 mb-8">

    {{-- Activos --}}
    <div class="bg-white rounded-xl shadow p-4 border-l-4 border-blue-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Procesos activos</p>
        <p class="text-3xl font-bold text-blue-600 mt-1">{{ $totalActivos }}</p>
    </div>

    {{-- Recuperados --}}
    <div class="bg-white rounded-xl shadow p-4 border-l-4 border-green-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Recuperados</p>
        <p class="text-3xl font-bold text-green-600 mt-1">{{ $totalRecuperados }}</p>
        <p class="text-xs text-gray-400 mt-1">Tasa: {{ $tasaRecuperacion }}%</p>
    </div>

    {{-- Escalados este mes --}}
    <div class="bg-white rounded-xl shadow p-4 border-l-4 border-red-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Escalados jur. este mes</p>
        <p class="text-3xl font-bold text-red-600 mt-1">{{ $escaladosEsteMes }}</p>
    </div>

    {{-- Acuerdos activos --}}
    <div class="bg-white rounded-xl shadow p-4 border-l-4 border-purple-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Acuerdos activos</p>
        <p class="text-3xl font-bold text-purple-600 mt-1">{{ $acuerdosActivos }}</p>
    </div>

    {{-- Gestiones hoy --}}
    <div class="bg-white rounded-xl shadow p-4 border-l-4 border-yellow-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Gestiones hoy</p>
        <p class="text-3xl font-bold text-yellow-600 mt-1">{{ $gestionesHoy }}</p>
    </div>

    {{-- Sin gestión 7 días --}}
    <div class="bg-white rounded-xl shadow p-4 border-l-4 border-orange-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Sin gestión &gt;7 días</p>
        <p class="text-3xl font-bold text-orange-600 mt-1">{{ $sinGestion7dias }}</p>
        <p class="text-xs text-gray-400 mt-1">⚠ Requieren atención</p>
    </div>

    {{-- Acuerdos incumplidos --}}
    <div class="bg-white rounded-xl shadow p-4 border-l-4 border-pink-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Acuerdos incumplidos</p>
        <p class="text-3xl font-bold text-pink-600 mt-1">{{ $acuerdosIncumplidos }}</p>
        <p class="text-xs text-gray-400 mt-1">Este mes</p>
    </div>

    {{-- Nuevos este mes --}}
    <div class="bg-white rounded-xl shadow p-4 border-l-4 border-indigo-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Nuevos este mes</p>
        <p class="text-3xl font-bold text-indigo-600 mt-1">{{ $procesosNuevosMes }}</p>
    </div>

    {{-- Tasa recuperación grande --}}
    <div class="bg-gradient-to-br from-green-500 to-green-700 rounded-xl shadow p-4 col-span-2 md:col-span-1 flex items-center justify-between">
        <div>
            <p class="text-xs text-green-100 uppercase tracking-wide">Tasa recuperación</p>
            <p class="text-4xl font-bold text-white mt-1">{{ $tasaRecuperacion }}%</p>
        </div>
        <svg class="w-12 h-12 text-green-300 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
        </svg>
    </div>

</div>

{{-- ═══════════════════════════════════════════════════════════ --}}
{{-- SECCIÓN 2 — GRÁFICAS PRINCIPALES --}}
{{-- ═══════════════════════════════════════════════════════════ --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">

    {{-- Donut: Procesos por entidad --}}
    <div class="bg-white rounded-xl shadow p-5">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">Procesos por entidad</h3>
        <canvas id="chartEntidad" height="220"></canvas>
    </div>

    {{-- Barras: Etapas Prejurídico --}}
    <div class="bg-white rounded-xl shadow p-5">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">Etapas — Gestión Prejurídica</h3>
        <canvas id="chartEtapasPrej" height="220"></canvas>
    </div>

    {{-- Barras: Etapas Jurídico --}}
    <div class="bg-white rounded-xl shadow p-5">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">Etapas — Proceso Jurídico</h3>
        <canvas id="chartEtapasJur" height="220"></canvas>
    </div>

</div>

{{-- ═══════════════════════════════════════════════════════════ --}}
{{-- SECCIÓN 3 — GRÁFICAS OPERATIVAS --}}
{{-- ═══════════════════════════════════════════════════════════ --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">

    {{-- Línea: Evolución mensual --}}
    <div class="bg-white rounded-xl shadow p-5 lg:col-span-2">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">Evolución mensual — últimos 6 meses</h3>
        <canvas id="chartEvolucion" height="140"></canvas>
    </div>

    {{-- Donut: Acuerdos de pago --}}
    <div class="bg-white rounded-xl shadow p-5">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">Acuerdos de pago por estado</h3>
        <canvas id="chartAcuerdos" height="220"></canvas>
    </div>

</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">

    {{-- Barras horizontales: Actividad por asesor --}}
    <div class="bg-white rounded-xl shadow p-5 lg:col-span-2">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">Actividad por asesor — últimos 30 días</h3>
        <canvas id="chartAsesores" height="180"></canvas>
    </div>

    {{-- Donut: Canales de contacto --}}
    <div class="bg-white rounded-xl shadow p-5">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">Canales de contacto — últimos 30 días</h3>
        <canvas id="chartCanales" height="220"></canvas>
    </div>

</div>

{{-- ═══════════════════════════════════════════════════════════ --}}
{{-- SECCIÓN 4 — EMBUDO + TABLA --}}
{{-- ═══════════════════════════════════════════════════════════ --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">

    {{-- Embudo Prejurídico → Jurídico --}}
    <div class="bg-white rounded-xl shadow p-5">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">Embudo de procesos</h3>
        <canvas id="chartEmbudo" height="220"></canvas>
        <div class="mt-3 text-xs text-gray-500 space-y-1">
            <div class="flex justify-between"><span>📋 Total prejurídicos:</span><strong>{{ $totalPrejudicial }}</strong></div>
            <div class="flex justify-between"><span>⚖️ Total jurídicos:</span><strong>{{ $totalJuridico }}</strong></div>
            <div class="flex justify-between"><span>✅ Recuperados prej.:</span><strong>{{ $recuperadosPrej }}</strong></div>
            <div class="flex justify-between"><span>✅ Recuperados jur.:</span><strong>{{ $recuperadosJur }}</strong></div>
        </div>
    </div>

    {{-- Tabla: Top 10 sin gestión reciente --}}
    <div class="bg-white rounded-xl shadow p-5 lg:col-span-2">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">⚠️ Top 10 procesos sin gestión reciente</h3>
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr class="bg-gray-50 text-gray-600 uppercase tracking-wide">
                        <th class="px-3 py-2 text-left">Radicado</th>
                        <th class="px-3 py-2 text-left">Entidad</th>
                        <th class="px-3 py-2 text-left">Tipo</th>
                        <th class="px-3 py-2 text-left">Última gestión</th>
                        <th class="px-3 py-2 text-center">Días sin gestión</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($topSinGestion as $p)
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2 font-mono font-semibold text-blue-700">{{ $p->radicado }}</td>
                        <td class="px-3 py-2 text-gray-700">{{ $p->entidad }}</td>
                        <td class="px-3 py-2">
                            @if($p->tipo === 'juridico')
                                <span class="px-2 py-0.5 bg-red-100 text-red-700 rounded-full text-xs">Jurídico</span>
                            @else
                                <span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded-full text-xs">Prejurídico</span>
                            @endif
                        </td>
                        <td class="px-3 py-2 text-gray-500">{{ $p->ultima_gestion }}</td>
                        <td class="px-3 py-2 text-center">
                            @php $dias = $p->dias_sin_gestion; @endphp
                            <span class="px-2 py-0.5 rounded-full font-bold
                                {{ $dias >= 999 ? 'bg-gray-200 text-gray-600' :
                                  ($dias > 14 ? 'bg-red-100 text-red-700' :
                                  ($dias > 7  ? 'bg-orange-100 text-orange-700' :
                                               'bg-yellow-100 text-yellow-700')) }}">
                                {{ $dias >= 999 ? '—' : $dias . ' días' }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="px-3 py-4 text-center text-gray-400">Todos los procesos tienen gestiones recientes ✅</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

{{-- ═══════════════════════════════════════════════════════════ --}}
{{-- SCRIPTS — Chart.js --}}
{{-- ═══════════════════════════════════════════════════════════ --}}
{{-- scripts inline --}}
<div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
// Datos desde PHP → JavaScript
const dataEntidad     = @json($procesosPorEntidad);
const dataEtapasPrej  = @json($procesosPorEtapaPrej);
const dataEtapasJur   = @json($procesosPorEtapaJur);
const dataEvolucion   = @json($evolucionMensual);
const dataAcuerdos    = @json($acuerdosPorEstado);
const dataAsesores    = @json($actividadAsesores);
const dataCanales     = @json($canalesContacto);
const dataPrej        = {{ $totalPrejudicial }};
const dataJur         = {{ $totalJuridico }};
const dataRecPrej     = {{ $recuperadosPrej }};
const dataRecJur      = {{ $recuperadosJur }};

const COLORES = ['#3B82F6','#EF4444','#8B5CF6','#F59E0B','#10B981','#EC4899','#6366F1','#14B8A6'];

// ── Gráfica 1: Donut Entidades ──────────────────────────────
new Chart(document.getElementById('chartEntidad'), {
    type: 'doughnut',
    data: {
        labels: dataEntidad.map(d => d.nombre),
        datasets: [{
            data: dataEntidad.map(d => d.total),
            backgroundColor: COLORES,
            borderWidth: 2,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } }
    }
});

// ── Gráfica 2: Barras Etapas Prejurídico ────────────────────
new Chart(document.getElementById('chartEtapasPrej'), {
    type: 'bar',
    data: {
        labels: dataEtapasPrej.map(d => d.etapa),
        datasets: [{
            label: 'Procesos',
            data: dataEtapasPrej.map(d => d.total),
            backgroundColor: '#F59E0B',
            borderRadius: 6,
        }]
    },
    options: {
        responsive: true,
        indexAxis: 'y',
        plugins: { legend: { display: false } },
        scales: { x: { beginAtZero: true, ticks: { stepSize: 1 } } }
    }
});

// ── Gráfica 3: Barras Etapas Jurídico ───────────────────────
new Chart(document.getElementById('chartEtapasJur'), {
    type: 'bar',
    data: {
        labels: dataEtapasJur.map(d => d.etapa),
        datasets: [{
            label: 'Procesos',
            data: dataEtapasJur.map(d => d.total),
            backgroundColor: '#EF4444',
            borderRadius: 6,
        }]
    },
    options: {
        responsive: true,
        indexAxis: 'y',
        plugins: { legend: { display: false } },
        scales: { x: { beginAtZero: true, ticks: { stepSize: 1 } } }
    }
});

// ── Gráfica 4: Línea Evolución mensual ──────────────────────
new Chart(document.getElementById('chartEvolucion'), {
    type: 'line',
    data: {
        labels: dataEvolucion.map(d => d.mes),
        datasets: [
            {
                label: 'Gestión Prejurídica',
                data: dataEvolucion.map(d => d.prejudicial),
                borderColor: '#F59E0B',
                backgroundColor: 'rgba(245,158,11,0.1)',
                tension: 0.4, fill: true, pointRadius: 5,
            },
            {
                label: 'Proceso Jurídico',
                data: dataEvolucion.map(d => d.juridico),
                borderColor: '#EF4444',
                backgroundColor: 'rgba(239,68,68,0.1)',
                tension: 0.4, fill: true, pointRadius: 5,
            }
        ]
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'bottom' } },
        scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
    }
});

// ── Gráfica 5: Donut Acuerdos de pago ───────────────────────
new Chart(document.getElementById('chartAcuerdos'), {
    type: 'doughnut',
    data: {
        labels: dataAcuerdos.map(d => d.estado ?? 'Sin estado'),
        datasets: [{
            data: dataAcuerdos.map(d => d.total),
            backgroundColor: ['#10B981','#EF4444','#F59E0B','#6B7280'],
            borderWidth: 2,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } }
    }
});

// ── Gráfica 6: Barras horizontales Asesores ─────────────────
new Chart(document.getElementById('chartAsesores'), {
    type: 'bar',
    data: {
        labels: dataAsesores.map(d => d.name),
        datasets: [{
            label: 'Gestiones',
            data: dataAsesores.map(d => d.total),
            backgroundColor: dataAsesores.map((_, i) => {
                const verdes = [
                    '#064e3b','#065f46','#047857',
                    '#059669','#10b981','#34d399','#6ee7b7','#a7f3d0'
                ];
                return verdes[i % verdes.length];
            }),
            borderRadius: 8,
        }]
    },
    options: {
        responsive: true,
        indexAxis: 'y',
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: ctx => ` ${ctx.raw} gestiones`
                }
            }
        },
        scales: {
            x: { beginAtZero: true, ticks: { stepSize: 1 } },
            y: { ticks: { font: { weight: '600' } } }
        }
    }
});

// ── Gráfica 7: Donut Canales ────────────────────────────────
new Chart(document.getElementById('chartCanales'), {
    type: 'doughnut',
    data: {
        labels: dataCanales.map(d => d.tipo_canal ?? 'Otro'),
        datasets: [{
            data: dataCanales.map(d => d.total),
            backgroundColor: ['#3B82F6','#10B981','#F59E0B','#EC4899','#8B5CF6'],
            borderWidth: 2,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } }
    }
});

// ── Gráfica 8: Embudo ───────────────────────────────────────
new Chart(document.getElementById('chartEmbudo'), {
    type: 'bar',
    data: {
        labels: ['Prejurídicos','Jurídicos','Recup. Prej.','Recup. Jur.'],
        datasets: [{
            label: 'Procesos',
            data: [dataPrej, dataJur, dataRecPrej, dataRecJur],
            backgroundColor: ['#F59E0B','#EF4444','#10B981','#10B981'],
            borderRadius: 6,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
    }
});
</script>
</div>

{{-- ═══════════════════════════════════════════════════════════ --}}
{{-- SECCIÓN 5 — ALERTAS Y SEMÁFOROS --}}
{{-- ═══════════════════════════════════════════════════════════ --}}

{{-- Título sección --}}
<div class="mb-4 mt-2">
    <h2 class="text-xl font-bold text-gray-800">🚦 Alertas y Semáforos</h2>
    <p class="text-sm text-gray-500">Monitoreo en tiempo real del estado de los procesos</p>
</div>

{{-- Resumen de semáforos --}}
<div class="grid grid-cols-3 gap-4 mb-6">
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-4">
        <span class="text-4xl">🔴</span>
        <div>
            <p class="text-2xl font-bold text-red-600">{{ $resumenAlertas['rojo'] }}</p>
            <p class="text-xs text-red-500 font-semibold uppercase">Fuera de tiempo</p>
        </div>
    </div>
    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 flex items-center gap-4">
        <span class="text-4xl">🟡</span>
        <div>
            <p class="text-2xl font-bold text-yellow-600">{{ $resumenAlertas['amarillo'] }}</p>
            <p class="text-xs text-yellow-500 font-semibold uppercase">Próximo a vencer</p>
        </div>
    </div>
    <div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-center gap-4">
        <span class="text-4xl">🟢</span>
        <div>
            <p class="text-2xl font-bold text-green-600">{{ $resumenAlertas['verde'] }}</p>
            <p class="text-xs text-green-500 font-semibold uppercase">En tiempos</p>
        </div>
    </div>
</div>

{{-- Tabla 1: Procesos sin gestión --}}
<div class="bg-white rounded-xl shadow p-5 mb-6">
    <h3 class="text-sm font-semibold text-gray-700 mb-4">📵 Semáforo — Procesos sin gestión</h3>
    <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <thead>
                <tr class="bg-gray-50 text-gray-600 uppercase tracking-wide">
                    <th class="px-3 py-2 text-left">Estado</th>
                    <th class="px-3 py-2 text-left">Radicado</th>
                    <th class="px-3 py-2 text-left">Entidad</th>
                    <th class="px-3 py-2 text-left">Tipo</th>
                    <th class="px-3 py-2 text-center">Días sin gestión</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($alertasSinGestion as $a)
                <tr class="hover:bg-gray-50">
                    <td class="px-3 py-2 text-center text-lg">
                        @if($a->semaforo === 'rojo') 🔴
                        @elseif($a->semaforo === 'amarillo') 🟡
                        @else 🟢 @endif
                    </td>
                    <td class="px-3 py-2 font-mono font-semibold text-blue-700">{{ $a->radicado }}</td>
                    <td class="px-3 py-2 text-gray-700">{{ $a->entidad }}</td>
                    <td class="px-3 py-2">
                        @if($a->tipo === 'JURIDICO')
                            <span class="px-2 py-0.5 bg-red-100 text-red-700 rounded-full">Jurídico</span>
                        @else
                            <span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded-full">Prejurídico</span>
                        @endif
                    </td>
                    <td class="px-3 py-2 text-center font-bold
                        {{ $a->semaforo === 'rojo' ? 'text-red-600' : ($a->semaforo === 'amarillo' ? 'text-yellow-600' : 'text-green-600') }}">
                        {{ $a->dias_sin_gestion >= 999 ? 'Sin gestiones' : $a->dias_sin_gestion . ' días' }}
                    </td>
                </tr>
                @empty
                <tr><td colspan="5" class="px-3 py-4 text-center text-gray-400">✅ Todos los procesos tienen gestiones recientes</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Tabla 2: Cuotas de acuerdos --}}
<div class="bg-white rounded-xl shadow p-5 mb-6">
    <h3 class="text-sm font-semibold text-gray-700 mb-4">💰 Semáforo — Cuotas de acuerdos de pago</h3>
    <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <thead>
                <tr class="bg-gray-50 text-gray-600 uppercase tracking-wide">
                    <th class="px-3 py-2 text-left">Estado</th>
                    <th class="px-3 py-2 text-left">Radicado</th>
                    <th class="px-3 py-2 text-left">Entidad</th>
                    <th class="px-3 py-2 text-center">Cuota #</th>
                    <th class="px-3 py-2 text-right">Monto</th>
                    <th class="px-3 py-2 text-center">Vencimiento</th>
                    <th class="px-3 py-2 text-center">Días</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($alertasAcuerdos as $a)
                <tr class="hover:bg-gray-50">
                    <td class="px-3 py-2 text-center text-lg">
                        @if($a->semaforo === 'rojo') 🔴
                        @elseif($a->semaforo === 'amarillo') 🟡
                        @else 🟢 @endif
                    </td>
                    <td class="px-3 py-2 font-mono font-semibold text-blue-700">{{ $a->radicado }}</td>
                    <td class="px-3 py-2 text-gray-700">{{ $a->entidad }}</td>
                    <td class="px-3 py-2 text-center">{{ $a->numero_cuota }}</td>
                    <td class="px-3 py-2 text-right font-semibold">
                        ${{ number_format($a->monto_cuota, 0, ',', '.') }}
                    </td>
                    <td class="px-3 py-2 text-center text-gray-600">
                        {{ \Carbon\Carbon::parse($a->fecha_vencimiento)->format('d/m/Y') }}
                    </td>
                    <td class="px-3 py-2 text-center font-bold
                        {{ $a->semaforo === 'rojo' ? 'text-red-600' : ($a->semaforo === 'amarillo' ? 'text-yellow-600' : 'text-green-600') }}">
                        @if($a->semaforo === 'rojo')
                            @if($a->estado_cuota === 'VENCIDA') VENCIDA @else {{ abs($a->dias_para_vencer) }} días atrás @endif
                        @else
                            {{ $a->dias_para_vencer }} días
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="px-3 py-4 text-center text-gray-400">✅ No hay cuotas pendientes o vencidas</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Tabla 3: Procesos estancados --}}
<div class="bg-white rounded-xl shadow p-5 mb-6">
    <h3 class="text-sm font-semibold text-gray-700 mb-4">⏸️ Semáforo — Procesos estancados en la misma etapa</h3>
    <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <thead>
                <tr class="bg-gray-50 text-gray-600 uppercase tracking-wide">
                    <th class="px-3 py-2 text-left">Estado</th>
                    <th class="px-3 py-2 text-left">Radicado</th>
                    <th class="px-3 py-2 text-left">Entidad</th>
                    <th class="px-3 py-2 text-left">Etapa actual</th>
                    <th class="px-3 py-2 text-center">Días en esta etapa</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($alertasEstancados as $a)
                <tr class="hover:bg-gray-50">
                    <td class="px-3 py-2 text-center text-lg">
                        @if($a->semaforo === 'rojo') 🔴
                        @elseif($a->semaforo === 'amarillo') 🟡
                        @else 🟢 @endif
                    </td>
                    <td class="px-3 py-2 font-mono font-semibold text-blue-700">{{ $a->radicado }}</td>
                    <td class="px-3 py-2 text-gray-700">{{ $a->entidad }}</td>
                    <td class="px-3 py-2">
                        <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full capitalize">
                            {{ str_replace('_', ' ', $a->etapa ?? 'Sin etapa') }}
                        </span>
                    </td>
                    <td class="px-3 py-2 text-center font-bold
                        {{ $a->semaforo === 'rojo' ? 'text-red-600' : ($a->semaforo === 'amarillo' ? 'text-yellow-600' : 'text-green-600') }}">
                        {{ $a->dias_en_etapa }} días
                    </td>
                </tr>
                @empty
                <tr><td colspan="5" class="px-3 py-4 text-center text-gray-400">✅ Todos los procesos están avanzando normalmente</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection