@extends('layouts.app')

@section('title', 'Centro de Despacho')

@section('content')
@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    .leaflet-container { font-family: inherit; }
    .custom-marker-icon { display: flex; align-items: center; justify-content: center; }
</style>
@endpush
<div x-data="dispatchManager()" class="space-y-6">
    <!-- Encabezado -->
    <div class="flex flex-col lg:flex-row justify-between items-end gap-6 mb-2">
        <div>
            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight">Centro de <span class="bg-clip-text text-transparent bg-gradient-to-r from-brand-orange to-brand-wine">Despacho</span></h1>
            <p class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mt-1">Asignación Automática y Equitativa de Rutas</p>
            
            <!-- Reloj Digital en Tiempo Real -->
            <div x-data="{ 
                time: '',
                date: '',
                updateTime() {
                    const now = new Date();
                    this.time = now.toLocaleTimeString('es-CO', { hour12: true, hour: '2-digit', minute: '2-digit', second: '2-digit' });
                    this.date = now.toLocaleDateString('es-CO', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
                }
            }" x-init="updateTime(); setInterval(() => updateTime(), 1000)" class="mt-4 flex items-center gap-4 group">
                <div class="flex items-center gap-3 px-4 py-2 bg-white dark:bg-slate-800 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm transition-all hover:shadow-md hover:border-brand-orange/20">
                    <div class="flex h-2.5 w-2.5 relative">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-orange opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-brand-orange"></span>
                    </div>
                    <span class="text-xl font-black text-slate-800 dark:text-white font-mono tracking-tighter" x-text="time"></span>
                </div>
                <div class="flex flex-col">
                    <span class="text-[8px] font-black text-brand-orange uppercase tracking-widest leading-none mb-1">Hora Local Bogotá, CO</span>
                    <span class="text-[10px] font-bold text-slate-500 dark:text-slate-400 capitalize tracking-tight" x-text="date"></span>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <!-- Selector de Dirección de Bodega -->
            <div class="relative group" x-data="{ warehouseQuery: '', searching: false }">
                <input type="text" x-model="warehouseQuery" @keyup.enter="searchWarehouseAddress()"
                       placeholder="Buscar dirección de bodega..."
                       class="bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 rounded-xl px-4 py-2 text-xs font-bold text-slate-700 dark:text-white shadow-sm focus:ring-brand-orange focus:border-brand-orange pr-10 w-64">
                <button @click="searchWarehouseAddress()" 
                        class="absolute right-2 top-1.5 p-1 text-slate-400 hover:text-brand-orange transition-colors"
                        :class="searching ? 'animate-spin' : ''">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                </button>
            </div>

            <!-- Filtro de Estado para Auto-Distribuir -->
            <div class="flex bg-slate-100 dark:bg-slate-900 p-1 rounded-xl border border-slate-200 dark:border-slate-700 mr-2">
                <button @click="distributionFilter = 'confirmado'" 
                        :class="distributionFilter === 'confirmado' ? 'bg-white dark:bg-slate-800 text-brand-orange shadow-sm' : 'text-slate-400 hover:text-slate-600'"
                        class="px-3 py-1.5 text-[9px] font-black uppercase tracking-tighter rounded-lg transition-all">
                    Solo Confirmados
                </button>
                <button @click="distributionFilter = 'all'" 
                        :class="distributionFilter === 'all' ? 'bg-white dark:bg-slate-800 text-brand-orange shadow-sm' : 'text-slate-400 hover:text-slate-600'"
                        class="px-3 py-1.5 text-[9px] font-black uppercase tracking-tighter rounded-lg transition-all">
                    Todos
                </button>
            </div>
            
            <input type="date" x-model="selectedDate" @change="reloadPage()" class="bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 rounded-xl px-4 py-2 text-xs font-bold text-slate-700 dark:text-white shadow-sm focus:ring-brand-orange focus:border-brand-orange">
            
            <div class="h-8 w-px bg-slate-200 dark:bg-slate-700 mx-1"></div>

            <div class="flex bg-slate-100 dark:bg-slate-900 p-1 rounded-xl border border-slate-200 dark:border-slate-700">
                <button @click="domiciliarios.forEach(d => d.selected = true)" 
                        class="px-3 py-1.5 text-[9px] font-black uppercase tracking-tighter hover:bg-white dark:hover:bg-slate-800 rounded-lg transition-all text-slate-600 dark:text-slate-400">
                    Todos
                </button>
                <button @click="domiciliarios.forEach(d => d.selected = false)" 
                        class="px-3 py-1.5 text-[9px] font-black uppercase tracking-tighter hover:bg-white dark:hover:bg-slate-800 rounded-lg transition-all text-slate-600 dark:text-slate-400">
                    Ninguno
                </button>
            </div>

            <button @click="clearAllAssignments()" 
                    class="bg-rose-50 text-rose-600 hover:bg-rose-600 hover:text-white border border-rose-100 px-4 py-2.5 rounded-xl font-black uppercase tracking-widest text-[9px] transition-all flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                Limpiar Todo
            </button>

            <button @click="autoDistribute()" 
                    :disabled="domiciliarios.filter(d => d.selected).length === 0"
                    class="bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed text-white px-6 py-2.5 rounded-xl font-black uppercase tracking-widest text-[10px] shadow-lg shadow-indigo-200 transition-all flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                Auto-Distribuir
            </button>
        </div>
    </div>

    <!-- KPIs Prominentes -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- KPI: Planificadas -->
        <div @click="activeTab = 'dispatch'" 
             class="bg-white dark:bg-slate-800 p-5 rounded-3xl border border-slate-100 dark:border-slate-700 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md hover:border-indigo-200 transition-all group">
            <div class="w-12 h-12 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center group-hover:scale-110 transition-transform">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
            </div>
            <div>
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Planificadas</p>
                <h4 class="text-xl font-black text-slate-800 dark:text-white" x-text="pedidos.filter(p => p.assigned && p.estado !== 'entregado').length"></h4>
            </div>
        </div>

        <!-- KPI: En Empaque -->
        <div @click="activeTab = 'packing'" 
             class="bg-white dark:bg-slate-800 p-5 rounded-3xl border border-slate-100 dark:border-slate-700 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md hover:border-brand-orange/30 transition-all group">
            <div class="w-12 h-12 rounded-2xl bg-brand-orange/10 text-brand-orange flex items-center justify-center group-hover:scale-110 transition-transform">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
            </div>
            <div>
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none">En Empaque</p>
                <p class="text-[7px] text-slate-400 font-bold uppercase mt-1 opacity-60">Seguimiento</p>
            </div>
        </div>

        <!-- KPI: En Ruta -->
        <div @click="activeTab = 'on_route'" 
             class="bg-white dark:bg-slate-800 p-5 rounded-3xl border border-slate-100 dark:border-slate-700 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md hover:border-brand-wine/30 transition-all group">
            <div class="w-12 h-12 rounded-2xl bg-brand-wine/10 text-brand-wine flex items-center justify-center group-hover:scale-110 transition-transform">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
            </div>
            <div>
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">En Ruta</p>
                <h4 class="text-xl font-black text-brand-wine" x-text="totalOnRouteOrders"></h4>
            </div>
        </div>

        <!-- KPI: Finalizados -->
        <div @click="activeTab = 'finalized'" 
             class="bg-white dark:bg-slate-800 p-5 rounded-3xl border border-slate-100 dark:border-slate-700 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md hover:border-emerald-300 transition-all group">
            <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center group-hover:scale-110 transition-transform">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
            <div>
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Finalizados</p>
                <h4 class="text-xl font-black text-emerald-600" x-text="totalFinalizedOrders"></h4>
            </div>
        </div>
    </div>

    <!-- Tabs / Navigation Interna -->
    <div class="flex items-center gap-6 border-b border-slate-200 dark:border-slate-800 mb-8 overflow-x-auto custom-scrollbar whitespace-nowrap">
        <button @click="activeTab = 'dispatch'" 
                :class="activeTab === 'dispatch' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-400 hover:text-slate-600'"
                class="pb-4 border-b-2 font-black uppercase tracking-widest text-[10px] transition-all flex items-center gap-2 shrink-0">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
            1. Asignación
            <span class="px-2 py-0.5 rounded-full text-[9px] bg-slate-100 text-slate-500" x-text="totalPlanningRoutes"></span>
        </button>
        <button @click="activeTab = 'approved'" 
                :class="activeTab === 'approved' ? 'border-amber-500 text-amber-500' : 'border-transparent text-slate-400 hover:text-slate-600'"
                class="pb-4 border-b-2 font-black uppercase tracking-widest text-[10px] transition-all flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            2. Aprobadas
            <span class="px-2 py-0.5 rounded-full text-[9px]" :class="activeTab === 'approved' ? 'bg-amber-500 text-white' : 'bg-slate-100 text-slate-500'" x-text="totalApprovedRoutes"></span>
        </button>
        <button @click="activeTab = 'packing'" 
                :class="activeTab === 'packing' ? 'border-brand-orange text-brand-orange' : 'border-transparent text-slate-400 hover:text-slate-600'"
                class="pb-4 border-b-2 font-black uppercase tracking-widest text-[10px] transition-all flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
            3. Empaque
            <span class="px-2 py-0.5 rounded-full text-[9px]" :class="activeTab === 'packing' ? 'bg-brand-orange text-white' : 'bg-slate-100 text-slate-500'" x-text="totalPackingOrders"></span>
        </button>
        <button @click="activeTab = 'on_route'" 
                :class="activeTab === 'on_route' ? 'border-brand-wine text-brand-wine' : 'border-transparent text-slate-400 hover:text-slate-600'"
                class="pb-4 border-b-2 font-black uppercase tracking-widest text-[10px] transition-all flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
            4. En Ruta
            <span class="px-2 py-0.5 rounded-full text-[9px]" :class="activeTab === 'on_route' ? 'bg-brand-wine text-white' : 'bg-slate-100 text-slate-500'" x-text="totalOnRouteOrders"></span>
        </button>
        <button @click="activeTab = 'finalized'" 
                :class="activeTab === 'finalized' ? 'border-emerald-500 text-emerald-500' : 'border-transparent text-slate-400 hover:text-slate-600'"
                class="pb-4 border-b-2 font-black uppercase tracking-widest text-[10px] transition-all flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            4. Finalizados
            <span class="px-2 py-0.5 rounded-full text-[9px]" :class="activeTab === 'finalized' ? 'bg-emerald-500 text-white' : 'bg-slate-100 text-slate-500'" x-text="totalFinalizedOrders"></span>
        </button>
        <button @click="activeTab = 'cancelled'" 
                :class="activeTab === 'cancelled' ? 'border-berry-red text-berry-red' : 'border-transparent text-slate-400 hover:text-slate-600'"
                class="pb-4 border-b-2 font-black uppercase tracking-widest text-[10px] transition-all flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            5. Cancelados
            <span class="px-2 py-0.5 rounded-full text-[9px]" :class="activeTab === 'cancelled' ? 'bg-berry-red text-white' : 'bg-slate-100 text-slate-500'" x-text="totalCancelledOrders"></span>
        </button>
        <button @click="activeTab = 'map'" 
                :class="activeTab === 'map' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-400 hover:text-slate-600'"
                class="pb-4 border-b-2 font-black uppercase tracking-widest text-[10px] transition-all flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A2 2 0 013 15.487V6.587a2 2 0 011.128-1.796L9 2.5l5 2.5 5.447-2.724A2 2 0 0121 4.513v8.9a2 2 0 01-1.128 1.796L15 17.5l-6 3z"></path></svg>
            Mapa Global
        </button>
    </div>

    <!-- Panel de Control -->
    <div x-show="activeTab === 'dispatch'" class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
        
        <!-- Columna 1: Pedidos por Confirmar/Asignar -->
        <div class="lg:col-span-1 space-y-4">
            <div class="bg-white dark:bg-slate-800 rounded-[2rem] border border-slate-100 dark:border-slate-700 shadow-sm overflow-hidden">
                <!-- Header y Acciones Masivas -->
                <div class="p-6 border-b border-slate-50 dark:border-slate-700/50 flex justify-between items-center bg-slate-50/50 dark:bg-slate-800/50">
                    <div class="flex items-center gap-3">
                        <div class="p-2.5 bg-brand-orange/10 rounded-2xl">
                            <svg class="w-5 h-5 text-brand-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                        </div>
                        <div>
                            <h3 class="text-sm font-black text-slate-800 dark:text-white uppercase tracking-tight">Pedidos <span class="text-brand-orange">Pendientes</span></h3>
                            <p class="text-[9px] text-slate-400 font-bold uppercase tracking-tighter mt-0.5" x-text="`Total: ${pedidos.filter(p => !p.assigned).length} por asignar`"></p>
                        </div>
                    </div>

                    <!-- Acciones Masivas -->
                    <div class="flex items-center gap-2">
                        <!-- Filtro de Orden -->
                        <select x-model="pendingSort" 
                                class="bg-white dark:bg-slate-700 border-none text-[8px] font-black uppercase tracking-widest rounded-lg px-2 py-1 shadow-sm focus:ring-1 focus:ring-brand-orange cursor-pointer">
                            <option value="default">Orden Inteligente</option>
                            <option value="alphabetical">A - Z (Nombre)</option>
                        </select>

                        <button @click="depurarDuplicados()" 
                                class="p-1.5 bg-slate-100 text-slate-500 rounded-lg hover:bg-indigo-600 hover:text-white transition-all shadow-sm"
                                title="Depurar Pedidos Duplicados">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                        </button>

                        <div x-show="selectedPendingIds.length > 0" class="flex items-center gap-2 animate-bounce-in" x-cloak>
                            <select @change="bulkAssignToDom($event.target.value); $event.target.value = ''" 
                                    class="bg-indigo-50 text-indigo-600 border-none text-[8px] font-black uppercase tracking-widest rounded-lg px-2 py-1 shadow-sm focus:ring-1 focus:ring-indigo-500 cursor-pointer">
                                <option value="">Asignar a...</option>
                                <template x-for="dom in domiciliarios.filter(d => d.selected)" :key="dom.id">
                                    <option :value="dom.id" x-text="dom.nombre"></option>
                                </template>
                            </select>

                            <button @click="bulkResetStatus()" 
                                    class="p-1.5 bg-rose-50 text-rose-600 rounded-lg hover:bg-rose-600 hover:text-white transition-all shadow-sm"
                                    title="Resetear Estado">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="p-4 max-h-[600px] overflow-y-auto custom-scrollbar">
                    <!-- Sección: Con Horario Específico -->
                    <template x-if="pedidos.filter(p => !p.assigned && p.hora_preferente_entrega).length > 0">
                        <div class="mb-6">
                            <h4 class="text-[10px] font-black text-rose-500 uppercase tracking-widest mb-3 flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full bg-rose-500 animate-ping"></span>
                                Prioridad: Con Horario
                            </h4>
                            <template x-for="pedido in visiblePendingPedidos.filter(p => p.hora_preferente_entrega)" :key="pedido.id">
                                <div class="flex items-center gap-3 bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-4 rounded-[1.5rem] shadow-sm hover:shadow-md transition-all group relative overflow-hidden mb-3"
                                     draggable="true" @dragstart="dragPedido($event, pedido, null)">
                                    <div class="shrink-0 flex items-center">
                                        <input type="checkbox" :value="pedido.id" x-model="selectedPendingIds" 
                                               class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500 cursor-pointer">
                                    </div>
                                    <div class="absolute top-0 right-0 px-3 py-1 bg-rose-500 text-white text-[9px] font-black rounded-bl-xl" x-text="pedido.hora_preferente_entrega.substring(0,5)"></div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex justify-between items-start mb-2">
                                            <div class="flex items-center gap-2">
                                                <span class="text-[10px] font-black text-slate-800 dark:text-white" x-text="`#${pedido.codigo_seguimiento}`"></span>
                                                
                                                <!-- Quick View Tooltip -->
                                                <div x-data="{ tooltipOpen: false }" @mouseenter="tooltipOpen = true" @mouseleave="tooltipOpen = false" class="relative inline-flex items-center">
                                                    <button type="button" class="text-indigo-400 hover:text-indigo-600 transition-colors">
                                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                                                    </button>
                                                    
                                                    <div x-show="tooltipOpen" 
                                                         x-transition.opacity
                                                         class="absolute z-[200] top-full left-0 mt-2 w-48 p-3 bg-slate-800 text-white rounded-xl shadow-2xl border border-slate-700 pointer-events-none"
                                                         x-cloak>
                                                        <div class="text-[8px] font-black uppercase text-brand-orange mb-2 border-b border-slate-700 pb-1">Contenido</div>
                                                        <div class="space-y-1">
                                                            <template x-for="det in pedido.detalles" :key="det.id">
                                                                <div class="flex justify-between gap-2 text-[9px]">
                                                                    <span class="truncate flex-1" x-text="det.producto?.nombre"></span>
                                                                    <span class="font-black text-brand-orange" x-text="'x' + det.cantidad"></span>
                                                                </div>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center gap-2 mr-12">
                                                <span class="px-2 py-0.5 bg-orange-50 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400 text-[9px] font-black rounded-md uppercase" x-text="pedido.direccion?.zona?.nombre_zona || 'ZONA N/A'"></span>
                                            </div>
                                        </div>
                                        <div class="flex flex-col gap-0.5">
                                            <span class="text-xs font-black text-slate-700 dark:text-slate-200" x-text="pedido.cliente?.nombre_completo"></span>
                                            <div class="flex items-center gap-1 text-[10px] text-slate-400 font-medium">
                                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                                                <span class="truncate" x-text="pedido.direccion?.direccion + (pedido.direccion?.detalles ? ' (' + pedido.direccion.detalles + ')' : '')"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Botones de Acción -->
                                    <div class="flex flex-col gap-1 shrink-0 ml-2">
                                        <button @click.stop="resendConfirmation(pedido)" 
                                                class="p-1.5 bg-emerald-50 text-emerald-600 rounded-lg hover:bg-emerald-600 hover:text-white transition-all"
                                                title="WhatsApp">
                                            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.246 2.248 3.484 5.232 3.483 8.412-.003 6.557-5.338 11.892-11.893 11.892-1.997-.001-3.951-.5-5.688-1.448l-6.308 1.656zm6.29-4.139c1.52.907 3.013 1.385 4.62 1.386 5.405.003 9.803-4.395 9.805-9.802.002-2.618-1.017-5.078-2.871-6.932-1.854-1.853-4.312-2.871-6.931-2.872-5.405 0-9.803 4.398-9.806 9.806-.001 1.673.447 3.307 1.293 4.747l-.815 2.979 3.04-.797zm10.37-6.498c-.281-.141-1.662-.821-1.919-.914-.258-.093-.446-.14-.634.141-.188.281-.727.914-.891 1.101-.164.188-.328.211-.609.07-.281-.141-1.189-.439-2.264-1.401-.837-.746-1.401-1.668-1.565-1.949-.164-.281-.017-.433.123-.573.126-.126.281-.328.422-.492.141-.164.188-.281.281-.469.093-.188.047-.352-.023-.492-.07-.141-.634-1.526-.867-2.09-.227-.546-.458-.472-.634-.48-.163-.008-.352-.01-.54-.01s-.492.07-.75.352c-.258.281-.984.961-.984 2.344 0 1.383 1.007 2.719 1.147 2.907.141.188 1.984 3.029 4.808 4.246.671.29 1.196.463 1.604.593.673.214 1.286.184 1.77.112.54-.081 1.662-.68 1.897-1.336.234-.656.234-1.219.164-1.336-.07-.117-.258-.188-.54-.329z"/></svg>
                                        </button>
                                        <button @click.stop="copyPedidoInfo(pedido)" 
                                                class="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-600 hover:text-white transition-all"
                                                title="Copiar Información">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
                                        </button>
                                        
                                        <div class="relative shrink-0">
                                            <select @change="assignPedido(pedido, $event.target.value); $event.target.value = ''" 
                                                    class="absolute inset-0 opacity-0 cursor-pointer w-full h-full z-10"
                                                    title="Asignar a...">
                                                <option value="">Asignar...</option>
                                                <template x-for="d in domiciliarios.filter(dom => dom.selected)" :key="d.id">
                                                    <option :value="d.id" x-text="d.nombre"></option>
                                                </template>
                                            </select>
                                            <button class="p-1.5 bg-indigo-50 text-indigo-600 rounded-lg hover:bg-indigo-600 hover:text-white transition-all">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>

                    <!-- Sección: Pedidos Sin Horario Específico -->
                    <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3" x-show="visiblePendingPedidos.filter(p => !p.hora_preferente_entrega).length > 0">Distribución General</h4>
                    <template x-for="pedido in visiblePendingPedidos.filter(p => !p.hora_preferente_entrega)" :key="pedido.id">
                        <div class="flex items-center gap-3 bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-4 rounded-[1.5rem] shadow-sm hover:shadow-md transition-all group relative overflow-hidden mb-3"
                             draggable="true" @dragstart="dragPedido($event, pedido, null)">
                            <div class="shrink-0 flex items-center">
                                <input type="checkbox" :value="pedido.id" x-model="selectedPendingIds" 
                                       class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500 cursor-pointer">
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center gap-2">
                                        <span class="text-[10px] font-black text-slate-800 dark:text-white" x-text="`#${pedido.codigo_seguimiento}`"></span>
                                        
                                        <!-- Quick View Tooltip -->
                                        <div x-data="{ tooltipOpen: false }" @mouseenter="tooltipOpen = true" @mouseleave="tooltipOpen = false" class="relative inline-flex items-center">
                                            <button type="button" class="text-indigo-400 hover:text-indigo-600 transition-colors">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                                            </button>
                                            
                                            <div x-show="tooltipOpen" 
                                                 x-transition.opacity
                                                 class="absolute z-[200] top-full left-0 mt-2 w-48 p-3 bg-slate-800 text-white rounded-xl shadow-2xl border border-slate-700 pointer-events-none"
                                                 x-cloak>
                                                <div class="text-[8px] font-black uppercase text-brand-orange mb-2 border-b border-slate-700 pb-1">Contenido</div>
                                                <div class="space-y-1">
                                                    <template x-for="det in pedido.detalles" :key="det.id">
                                                        <div class="flex justify-between gap-2 text-[9px]">
                                                            <span class="truncate flex-1" x-text="det.producto?.nombre"></span>
                                                            <span class="font-black text-brand-orange" x-text="'x' + det.cantidad"></span>
                                                        </div>
                                                    </template>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <span class="px-2 py-0.5 bg-orange-50 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400 text-[9px] font-black rounded-md uppercase" x-text="pedido.direccion?.zona?.nombre_zona || 'ZONA N/A'"></span>
                                    </div>
                                </div>
                                <div class="flex flex-col gap-0.5">
                                    <span class="text-xs font-black text-slate-700 dark:text-slate-200" x-text="pedido.cliente?.nombre_completo"></span>
                                    <div class="flex items-center gap-1 text-[10px] text-slate-400 font-medium">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                                        <span class="truncate" x-text="pedido.direccion?.direccion + (pedido.direccion?.detalles ? ' (' + pedido.direccion.detalles + ')' : '')"></span>
                                    </div>
                                </div>
                            </div>

                            <!-- Botones de Acción -->
                            <div class="flex flex-col gap-1 shrink-0 ml-2">
                                <button @click.stop="resendConfirmation(pedido)" 
                                        class="p-1.5 bg-emerald-50 text-emerald-600 rounded-lg hover:bg-emerald-600 hover:text-white transition-all"
                                        title="WhatsApp">
                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.246 2.248 3.484 5.232 3.483 8.412-.003 6.557-5.338 11.892-11.893 11.892-1.997-.001-3.951-.5-5.688-1.448l-6.308 1.656zm6.29-4.139c1.52.907 3.013 1.385 4.62 1.386 5.405.003 9.803-4.395 9.805-9.802.002-2.618-1.017-5.078-2.871-6.932-1.854-1.853-4.312-2.871-6.931-2.872-5.405 0-9.803 4.398-9.806 9.806-.001 1.673.447 3.307 1.293 4.747l-.815 2.979 3.04-.797zm10.37-6.498c-.281-.141-1.662-.821-1.919-.914-.258-.093-.446-.14-.634.141-.188.281-.727.914-.891 1.101-.164.188-.328.211-.609.07-.281-.141-1.189-.439-2.264-1.401-.837-.746-1.401-1.668-1.565-1.949-.164-.281-.017-.433.123-.573.126-.126.281-.328.422-.492.141-.164.188-.281.281-.469.093-.188.047-.352-.023-.492-.07-.141-.634-1.526-.867-2.09-.227-.546-.458-.472-.634-.48-.163-.008-.352-.01-.54-.01s-.492.07-.75.352c-.258.281-.984.961-.984 2.344 0 1.383 1.007 2.719 1.147 2.907.141.188 1.984 3.029 4.808 4.246.671.29 1.196.463 1.604.593.673.214 1.286.184 1.77.112.54-.081 1.662-.68 1.897-1.336.234-.656.234-1.219.164-1.336-.07-.117-.258-.188-.54-.329z"/></svg>
                                </button>
                                <button @click.stop="copyPedidoInfo(pedido)" 
                                        class="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-600 hover:text-white transition-all"
                                        title="Copiar Información">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
                                </button>
                            </div>
                        </div>
                    </template>

                    <template x-if="visiblePendingPedidos.length === 0">
                        <div class="py-12 text-center">
                            <svg class="w-12 h-12 text-slate-200 dark:text-slate-700 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">No hay pedidos confirmados para hoy</p>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <!-- Columna 2 & 3: Asignación a Domiciliarios -->
        <div class="lg:col-span-2 space-y-6">
            <div class="flex justify-between items-center mb-2 px-2">
                <h3 class="text-sm font-black text-slate-800 dark:text-white uppercase tracking-tight">Rutas de Despacho</h3>
                <button @click="showEnRuta = !showEnRuta" 
                        :class="showEnRuta ? 'bg-emerald-600 text-white shadow-emerald-200' : 'bg-white text-emerald-600 border-emerald-100'"
                        class="px-4 py-2 rounded-2xl border font-black uppercase tracking-widest text-[9px] transition-all flex items-center gap-2 shadow-lg hover:scale-105 active:scale-95">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                    <span x-text="showEnRuta ? 'Ocultar Despachadas' : 'Ver Despachadas'"></span>
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Separador de deshabilitados -->
                <div x-show="domiciliarios.some(d => !d.selected)" 
                     class="col-span-1 md:col-span-2 my-2 border-t border-dashed border-slate-200 dark:border-slate-700 pt-4"
                     style="order: 500"
                     x-cloak>
                    <h4 class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest px-2">Domiciliarios Deshabilitados</h4>
                </div>

                <template x-for="dom in sortedDoms" :key="dom.id">
                    <div class="bg-white dark:bg-slate-800 rounded-[2rem] border border-slate-100 dark:border-slate-700 shadow-sm overflow-hidden flex flex-col transition-all"
                         :style="{ order: dom.selected ? 10 : 1000 }"
                         :class="dragOverDom === dom.id ? 'ring-2 ring-indigo-500 bg-indigo-50/10' : ''"
                         @dragover.prevent="dragOverDom = dom.id"
                         @dragleave="dragOverDom = null"
                         @drop="dropPedido(dom)">
                        
                        <!-- Overlay de Carga Sincrónico -->
                        <div x-show="dom.saving" 
                             x-transition:enter="transition ease-out duration-300"
                             x-transition:enter-start="opacity-0"
                             x-transition:enter-end="opacity-100"
                             class="absolute inset-0 bg-white/80 dark:bg-slate-800/80 z-[100] flex flex-col items-center justify-center backdrop-blur-[2px]">
                            <div class="w-10 h-10 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mb-2"></div>
                            <span class="text-[10px] font-black uppercase text-indigo-600 tracking-widest">Sincronizando...</span>
                        </div>
                        
                        <div class="p-4 border-b border-slate-100 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-900/50 flex flex-wrap items-center justify-between gap-4 transition-colors"
                             :class="dom.selected ? '' : 'grayscale opacity-60'">
                            <div class="flex items-center gap-3 min-w-0">
                                <label class="relative inline-flex items-center cursor-pointer" @click.stop>
                                    <input type="checkbox" x-model="dom.selected" class="sr-only peer">
                                    <div class="w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-slate-600 peer-checked:bg-indigo-600 shadow-inner"></div>
                                </label>
                                <div class="relative shrink-0">
                                    <div class="w-10 h-10 rounded-2xl bg-indigo-600 text-white flex items-center justify-center font-black text-sm shadow-lg shadow-indigo-200/50" x-text="dom.nombre.substring(0,2).toUpperCase()"></div>
                                    <div class="absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full border-2 border-white dark:border-slate-800 shadow-sm"
                                         :class="dom.activo ? 'bg-emerald-500' : 'bg-slate-400'"></div>
                                </div>
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2">
                                        <h4 class="text-xs font-black text-slate-800 dark:text-white uppercase truncate" x-text="dom.nombre"></h4>
                                        <div class="flex items-center gap-1">
                                            <input type="checkbox" x-model="dom.disponible" 
                                                   class="w-3 h-3 text-brand-orange border-slate-300 rounded focus:ring-brand-orange cursor-pointer">
                                            <span class="text-[8px] font-black uppercase text-slate-400">Disponible</span>
                                                                       <div class="flex items-center gap-1 ml-1">
                                            <!-- Estado de la Ruta en Planificación (Borrador) -->
                                            <template x-if="dom.saved && dom.planningRouteStatus === 'planificacion'">
                                                <span class="px-1.5 py-0.5 rounded-md bg-slate-100 text-slate-500 text-[8px] font-black uppercase tracking-tighter border border-slate-200">
                                                    Borrador
                                                </span>
                                            </template>
                                            
                                            <!-- Indicador de Ruta Activa (Para saber si ya está trabajando) -->
                                            <template x-if="dom.activeRouteId && dom.activeRouteStatus === 'en_curso'">
                                                <span class="px-1.5 py-0.5 rounded-md bg-emerald-100 text-emerald-600 text-[8px] font-black uppercase tracking-tighter border border-emerald-200">
                                                    En Empaque
                                                </span>
                                            </template>
                                            <template x-if="dom.activeRouteId && dom.activeRouteStatus === 'en_ruta'">
                                                <span class="px-1.5 py-0.5 rounded-md bg-indigo-100 text-indigo-600 text-[8px] font-black uppercase tracking-tighter border border-indigo-200">
                                                    En Ruta
                                                </span>
                                            </template>
                                        </div>
          </div>
                                    </div>
                                    <p class="text-[8px] text-slate-400 font-bold uppercase tracking-tighter" x-text="dom.placa ? `Placa: ${dom.placa}` : 'Sin Vehículo'"></p>
                                </div>
                            </div>
                            <div class="flex flex-wrap items-center gap-4 ml-auto">
                                <div class="text-right shrink-0">
                                    <div class="flex items-baseline justify-end gap-1">
                                        <span class="text-xl font-black text-indigo-600" x-text="dom.assignedOrders.length"></span>
                                        <span class="text-[8px] text-slate-400 font-black uppercase tracking-widest">Ped.</span>
                                    </div>
                                    <div class="flex items-center justify-end gap-1 -mt-1">
                                        <span class="text-[10px] font-black transition-colors" 
                                              :class="dom.assignedOrders.reduce((sum, p) => sum + p.total_cajas, 0) > 40 ? 'text-rose-600 animate-pulse' : 'text-emerald-600'"
                                              x-text="dom.assignedOrders.reduce((sum, p) => sum + p.total_cajas, 0)"></span>
                                        <span class="text-[7px] font-bold uppercase text-slate-400">Caj.</span>
                                    </div>
                                </div>
                                <div class="flex items-center gap-1.5">
                                    <button @click.stop="initiateSwap(dom)" 
                                            class="w-8 h-8 rounded-lg transition-all flex items-center justify-center border"
                                            :class="swappingDomId === dom.id ? 'bg-amber-500 text-white border-amber-600 animate-pulse' : 'bg-slate-50 text-slate-400 border-slate-100 hover:bg-slate-800 hover:text-white'"
                                            title="Intercambiar">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
                                    </button>
                                    <button @click.stop="openIndividualMap(dom)" 
                                            class="w-8 h-8 rounded-lg bg-indigo-50 text-indigo-600 hover:bg-indigo-600 hover:text-white transition-all flex items-center justify-center"
                                            title="Ver Mapa">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A2 2 0 013 15.487V6.587a2 2 0 011.128-1.796L9 2.5l5 2.5 5.447-2.724A2 2 0 0121 4.513v8.9a2 2 0 01-1.128 1.796L15 17.5l-6 3z"></path></svg>
                                    </button>
                                    <button @click.stop="clearDomAssignments(dom)" x-show="dom.assignedOrders.length > 0"
                                            class="w-8 h-8 rounded-lg bg-rose-50 text-rose-500 hover:bg-rose-500 hover:text-white transition-all flex items-center justify-center"
                                            title="Limpiar">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="p-4 flex-1 min-h-[150px] space-y-2 bg-slate-50/10 dark:bg-slate-900/10">
                            <div class="space-y-3">
                                <template x-for="(p, index) in dom.assignedOrders" :key="p.id">
                                    <div class="flex items-center gap-2 group/item">
                                        <!-- Controles de Reordenamiento Manual -->
                                        <div class="flex flex-col gap-0.5 shrink-0" x-show="!dom.saved || dom.routeStatus === 'planificacion'">
                                            <button @click="moveOrder(dom, index, -1)" 
                                                    :disabled="index === 0"
                                                    class="p-0.5 hover:bg-indigo-50 rounded text-slate-300 hover:text-indigo-600 disabled:opacity-0 transition-all">
                                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 15l7-7 7 7"></path></svg>
                                            </button>
                                            <button @click="moveOrder(dom, index, 1)" 
                                                    :disabled="index === dom.assignedOrders.length - 1"
                                                    class="p-0.5 hover:bg-indigo-50 rounded text-slate-300 hover:text-indigo-600 disabled:opacity-0 transition-all">
                                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"></path></svg>
                                            </button>
                                        </div>

                                        <div class="flex-1 bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-2.5 rounded-xl shadow-sm flex flex-col gap-1 cursor-move hover:border-indigo-200 transition-all"
                                             draggable="true" @dragstart="dragPedido($event, p, dom)">
                                            <div class="flex justify-between items-start gap-2">
                                                <div class="flex items-center gap-2 min-w-0">
                                                    <span class="w-4 h-4 rounded-full bg-slate-100 text-[8px] font-black flex items-center justify-center text-slate-500 shrink-0" x-text="index + 1"></span>
                                                    <h5 class="text-[9px] font-black text-slate-700 dark:text-white uppercase truncate" x-text="p.cliente?.nombre_completo"></h5>
                                                    
                                                    <!-- Quick View Tooltip -->
                                                    <div x-data="{ tooltipOpen: false }" @mouseenter="tooltipOpen = true" @mouseleave="tooltipOpen = false" class="relative inline-flex items-center">
                                                        <button type="button" class="text-indigo-400 hover:text-indigo-600 transition-colors">
                                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                                                        </button>
                                                        
                                                        <div x-show="tooltipOpen" 
                                                             x-transition.opacity
                                                             class="absolute z-[200] top-full left-0 mt-2 w-48 p-3 bg-slate-800 text-white rounded-xl shadow-2xl border border-slate-700 pointer-events-none"
                                                             x-cloak>
                                                            <div class="text-[8px] font-black uppercase text-brand-orange mb-2 border-b border-slate-700 pb-1">Contenido</div>
                                                            <div class="space-y-1">
                                                                <template x-for="det in p.detalles" :key="det.id">
                                                                    <div class="flex justify-between gap-2 text-[9px]">
                                                                        <span class="truncate flex-1" x-text="det.producto?.nombre"></span>
                                                                        <span class="font-black text-brand-orange" x-text="'x' + det.cantidad"></span>
                                                                    </div>
                                                                </template>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <template x-if="p.hora_preferente_entrega">
                                                        <span class="px-1 py-0.5 bg-rose-500 text-white text-[7px] font-black rounded shrink-0 uppercase" x-text="p.hora_preferente_entrega.substring(0,5)"></span>
                                                    </template>
                                                </div>
                                                <button @click="unassignPedido(p, dom)" 
                                                        x-show="!dom.saved || dom.routeStatus === 'planificacion'"
                                                        class="text-slate-300 hover:text-rose-500 transition-colors shrink-0">
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                                                </button>
                                                                               <div class="flex justify-between items-center mt-2 pt-2 border-t border-slate-50 dark:border-slate-700/50">
                                                <p class="text-[8px] text-slate-400 font-bold uppercase truncate flex-1" x-text="p.direccion?.direccion + (p.direccion?.detalles ? ' (' + p.direccion.detalles + ')' : '')"></p>
                                                
                                                <div class="relative shrink-0 ml-2" x-show="!dom.saved || dom.routeStatus === 'planificacion'">
                                                    <div class="flex items-center gap-1.5 px-2 py-1 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-100 dark:border-slate-700 hover:border-indigo-300 transition-colors cursor-pointer group">
                                                        <svg class="w-3 h-3 text-slate-400 group-hover:text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
                                                        <span class="text-[7px] font-black text-slate-500 uppercase">Mover</span>
                                                        <select @change="movePedidoToDom(p, dom, $event.target.value); $event.target.value = ''" 
                                                                class="absolute inset-0 opacity-0 cursor-pointer w-full h-full z-10"
                                                                title="Mover a otro domiciliario">
                                                            <option value="">A...</option>
                                                            <template x-for="d in sortedDoms.filter(other => other.id !== dom.id && other.selected)" :key="d.id">
                                                                <option :value="d.id" x-text="d.nombre"></option>
                                                            </template>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
          </div>
                                        </div>
                                    </div>
                                </template>
                            </div>

                            <template x-if="dom.assignedOrders.length === 0">
                                <div class="h-full flex flex-col items-center justify-center py-8 opacity-30">
                                    <svg class="w-8 h-8 text-slate-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                                    <p class="text-[9px] font-black uppercase tracking-widest text-center">Arrastra pedidos aquí</p>
                                </div>
                            </template>
                        </div>

                        <!-- Botones Operativos (WhatsApp / Copiar / Acciones de Estado) -->
                        <div class="p-4 bg-slate-50/50 dark:bg-slate-800/50 border-t border-slate-100 dark:border-slate-700 flex flex-col gap-4">
                            <div class="flex gap-2">
                                <button @click="notifyDomiciliario(dom)" class="p-2 bg-emerald-50 text-emerald-600 border border-emerald-100 rounded-xl hover:bg-emerald-600 hover:text-white transition-all shadow-sm" title="WhatsApp">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.246 2.248 3.484 5.232 3.483 8.412-.003 6.557-5.338 11.892-11.893 11.892-1.997-.001-3.951-.5-5.688-1.448l-6.308 1.656zm6.29-4.139c1.52.907 3.013 1.385 4.62 1.386 5.405.003 9.803-4.395 9.805-9.802.002-2.618-1.017-5.078-2.871-6.932-1.854-1.853-4.312-2.871-6.931-2.872-5.405 0-9.803 4.398-9.806 9.806-.001 1.673.447 3.307 1.293 4.747l-.815 2.979 3.04-.797zm10.37-6.498c-.281-.141-1.662-.821-1.919-.914-.258-.093-.446-.14-.634.141-.188.281-.727.914-.891 1.101-.164.188-.328.211-.609.07-.281-.141-1.189-.439-2.264-1.401-.837-.746-1.401-1.668-1.565-1.949-.164-.281-.017-.433.123-.573.126-.126.281-.328.422-.492.141-.164.188-.281.281-.469.093-.188.047-.352-.023-.492-.07-.141-.634-1.526-.867-2.09-.227-.546-.458-.472-.634-.48-.163-.008-.352-.01-.54-.01s-.492.07-.75.352c-.258.281-.984.961-.984 2.344 0 1.383 1.007 2.719 1.147 2.907.141.188 1.984 3.029 4.808 4.246.671.29 1.196.463 1.604.593.673.214 1.286.184 1.77.112.54-.081 1.662-.68 1.897-1.336.234-.656.234-1.219.164-1.336-.07-.117-.258-.188-.54-.329z"/></svg>
                                </button>
                                <button @click="copyRouteMessage(dom)" class="p-2 bg-blue-50 text-blue-600 border border-blue-100 rounded-xl hover:bg-blue-600 hover:text-white transition-all shadow-sm" title="Copiar">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
                                </button>

                                <div class="flex-1 flex gap-2">
                                    <!-- Espacio para futuros botones de acción masiva -->
                                </div>
                            </div>

                            <div class="flex flex-col gap-3">
                                <!-- CASO 1: Nuevas asignaciones sin guardar -->
                                <template x-if="!dom.saved && dom.assignedOrders.length > 0">
                                    <div class="flex gap-2 w-full">
                                        <button @click="saveRoute(dom, 'planificacion')" class="flex-1 py-2.5 bg-slate-100 text-slate-600 border border-slate-200 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-200 transition-all shadow-sm flex items-center justify-center gap-2">
                                            <span x-text="dom.saving ? '...' : 'Guardar Borrador'"></span>
                                        </button>
                                        <button @click="saveRoute(dom, 'aprobada')" class="flex-1 py-2.5 bg-brand-orange text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-2">
                                            <span x-text="dom.saving ? '...' : 'Aprobar Ruta'"></span>
                                        </button>
                                    </div>
                                </template>

                                <!-- CASO 1.5: Ruta en base de datos vacía (0 pedidos atrapada) -->
                                <template x-if="!dom.saved && dom.routeId && dom.assignedOrders.length === 0">
                                    <div class="flex gap-2 w-full">
                                        <div class="px-4 py-2 bg-rose-50 text-rose-600 rounded-xl text-[9px] font-black uppercase flex items-center gap-1 border border-rose-200 shadow-inner">
                                            <div class="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse"></div>
                                            Ruta Vacía (Atrapada)
                                        </div>
                                        <button @click="deleteRoute(dom)" class="flex-1 py-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-md flex items-center justify-center gap-2" title="Eliminar Ruta Vacía">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                            <span x-text="dom.saving ? '...' : 'Eliminar Ruta Vacía'"></span>
                                        </button>
                                    </div>
                                </template>

                                <!-- CASO 2: Borrador Guardado -->
                                <template x-if="dom.saved && dom.routeStatus === 'planificacion'">
                                    <div class="flex gap-2 w-full">
                                        <div class="px-4 py-2 bg-slate-100 text-slate-500 rounded-xl text-[9px] font-black uppercase flex items-center gap-1 border border-slate-200 shadow-inner">
                                            <div class="w-1.5 h-1.5 rounded-full bg-slate-400 animate-pulse"></div>
                                            Borrador
                                        </div>
                                        <button @click="saveRoute(dom, 'aprobada')" class="flex-1 py-2.5 bg-brand-orange text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md hover:scale-[1.02] transition-all flex items-center justify-center gap-2">
                                            <span x-text="dom.saving ? '...' : 'Aprobar Borrador'"></span>
                                        </button>
                                        <button @click="deleteRoute(dom)" class="p-2.5 bg-rose-50 text-rose-500 border border-rose-100 rounded-xl hover:bg-rose-600 hover:text-white transition-all" title="Eliminar Borrador">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                        </button>
                                    </div>
                                </template>

                                <!-- CASO 3: Ruta Aprobada (Esperando Empaque) -->
                                <template x-if="dom.saved && dom.routeStatus === 'aprobada'">
                                    <div class="flex flex-col gap-2 w-full">
                                        <div class="flex gap-2">
                                            <div class="flex-1 px-4 py-2 bg-indigo-50 text-indigo-600 rounded-xl text-[9px] font-black uppercase flex items-center justify-center gap-2 border border-indigo-100 shadow-inner">
                                                <div class="w-1.5 h-1.5 rounded-full bg-indigo-500"></div>
                                                Ruta Aprobada
                                            </div>
                                            <button @click="saveRoute(dom, 'planificacion')" class="p-2.5 bg-white text-slate-400 rounded-xl border border-slate-200 hover:bg-slate-50 transition-all" title="Regresar a Borrador">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                                            </button>
                                        </div>
                                        <button @click="saveRoute(dom, 'en_curso')" class="w-full py-2.5 bg-emerald-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md hover:bg-emerald-700 transition-all flex items-center justify-center gap-2">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                                            Enviar a Empaque (Manual)
                                        </button>
                                    </div>
                                </template>

                                <!-- CASO 4: En Empaque -->
                                <template x-if="dom.saved && dom.routeStatus === 'en_curso'">
                                    <div class="flex flex-col gap-2 w-full">
                                        <div class="flex gap-2">
                                            <div class="flex-1 px-4 py-2 bg-amber-50 text-amber-600 rounded-xl text-[9px] font-black uppercase flex items-center justify-center gap-2 border border-amber-100 shadow-inner">
                                                <div class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></div>
                                                En Empaque
                                            </div>
                                            <button @click="saveRoute(dom, 'aprobada')" class="p-2.5 bg-white text-slate-400 rounded-xl border border-slate-200 hover:bg-slate-50 transition-all" title="Regresar a Ruta Aprobada">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                                            </button>
                                        </div>
                                        <button @click="saveRoute(dom, 'en_ruta')" class="flex-1 py-2.5 bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md hover:bg-indigo-700 transition-all flex items-center justify-center gap-2">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                                            <span x-text="dom.saving ? '...' : 'Despachar a Ruta'"></span>
                                        </button>
                                    </div>
                                </template>

                                <!-- CASO 5: En Ruta -->
                                <template x-if="dom.saved && dom.routeStatus === 'en_ruta'">
                                    <div class="flex gap-2 w-full">
                                        <div class="flex-1 py-2.5 bg-indigo-50 text-indigo-600 border border-indigo-100 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-2 italic">
                                            <div class="w-1.5 h-1.5 rounded-full bg-indigo-500"></div>
                                            En Ruta
                                        </div>
                                        <button @click="saveRoute(dom, 'en_curso')" class="p-2.5 bg-white text-slate-400 rounded-xl border border-slate-200 hover:bg-slate-50 transition-all" title="Regresar a Empaque">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z"></path></svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <!-- Panel de Control Superadmin (Siempre visible si hay ruta) -->
                        <template x-if="dom.saved">
                            <div class="p-4 bg-rose-50/30 dark:bg-rose-900/10 border-t-2 border-rose-100 dark:border-rose-900/20">
                                <div class="flex items-center gap-2 mb-3">
                                    <div class="w-1 h-3 bg-rose-500 rounded-full"></div>
                                    <span class="text-[9px] font-black text-rose-600 uppercase tracking-widest">Panel de Emergencia Superadmin</span>
                                </div>
                                <div class="grid grid-cols-1 gap-3">
                                    <template x-if="dom.routeStatus === 'en_ruta' || dom.routeStatus === 'en_empaque' || dom.routeStatus === 'entregado'">
                                        <div class="space-y-3">
                                            <div class="flex items-center gap-2 bg-white dark:bg-slate-800 p-2 rounded-xl border border-rose-100 dark:border-rose-900/30">
                                                <span class="text-[8px] font-black text-slate-400 uppercase ml-2">Fecha Entrega:</span>
                                                <input type="date" x-model="dom.manualFinishDate" 
                                                       class="flex-1 bg-transparent border-0 text-[10px] font-bold text-slate-700 dark:text-white focus:ring-0 p-0">
                                            </div>
                                            <div class="grid grid-cols-2 gap-3">
                                                <button @click="forceCompleteRoute(dom, dom.manualFinishDate)" 
                                                        class="py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-[9px] font-black uppercase tracking-widest transition-all shadow-lg shadow-emerald-100 flex items-center justify-center gap-2">
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                                    Finalizar con Fecha Seleccionada
                                                </button>
                                                <button @click="forceCompleteRoute(dom, getLocalISODate(-1))" 
                                                        class="py-2.5 bg-brand-wine hover:bg-brand-wine/90 text-white rounded-xl text-[9px] font-black uppercase tracking-widest transition-all shadow-lg shadow-rose-100 flex items-center justify-center gap-2"
                                                        title="Forzar ayer rápidamente">
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                    Ayer
                                                </button>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="grid grid-cols-2 gap-3">
                                        <button @click="saveRoute(dom, 'en_curso')" 
                                                class="py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-indigo-100">
                                            Revertir a Empaque
                                        </button>
                                        <button @click="deleteRoute(dom, dom.routeStatus !== 'planificacion')" 
                                                class="py-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-rose-100">
                                            Eliminar Definitivamente
                                        </button>
                                    </div>
                                </div>
                                <p class="text-[7px] text-rose-400 font-bold uppercase text-center mt-2 tracking-tighter">Normalización: Usa 'Finalizar (Ayer)' para pedidos que ya se entregaron pero no se registraron.</p>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Vista de Rutas Aprobadas (Etapa 1.5) -->
    <div x-show="activeTab === 'approved'" class="animate-fade-in" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-[2.5rem] border border-slate-100 dark:border-slate-700 shadow-xl overflow-hidden">
            <div class="p-8 border-b border-slate-50 dark:border-slate-700/50 bg-amber-500/5">
                <h3 class="text-xl font-black text-slate-800 dark:text-white uppercase tracking-tight">Etapa 2: <span class="text-amber-500">Rutas Aprobadas</span></h3>
                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mt-1">Rutas confirmadas listas para enviar a empaque</p>
            </div>
            
            <div class="p-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <template x-for="dom in approvedDoms" :key="dom.id">
                        <div class="bg-white dark:bg-slate-800 border border-amber-200 dark:border-amber-900/30 p-6 rounded-[2rem] shadow-sm relative overflow-hidden group">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-10 h-10 rounded-2xl bg-amber-500/10 text-amber-500 flex items-center justify-center font-black">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                </div>
                                <div>
                                    <h4 class="text-sm font-black text-slate-800 dark:text-white uppercase" x-text="dom.nombre"></h4>
                                    <p class="text-[10px] font-bold text-amber-500 uppercase" x-text="`${(dom.activeOrders || []).length} Pedidos Aprobados`"></p>
                                </div>
                            </div>

                            <!-- Lista de Pedidos en la Ruta -->
                            <div class="space-y-2 mb-6 bg-slate-50 dark:bg-slate-900 p-4 rounded-2xl max-h-[200px] overflow-y-auto custom-scrollbar">
                                <template x-for="p in dom.activeOrders" :key="p.id">
                                    <div class="flex justify-between items-center text-[9px] font-bold uppercase text-slate-500 py-1 border-b border-slate-100 dark:border-slate-800 last:border-0">
                                        <span x-text="p.cliente?.nombre_completo"></span>
                                        <span class="text-amber-500 text-[8px]" x-text="'#' + p.codigo_seguimiento"></span>
                                    </div>
                                </template>
                            </div>

                            <div class="grid grid-cols-1 gap-2">
                                <template x-if="(dom.activeOrders || []).length === 0">
                                    <button @click="deleteRoute(dom, true)" 
                                            class="w-full py-3 bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg shadow-rose-100 flex items-center justify-center gap-2">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                        Eliminar Ruta Aprobada Vacía
                                    </button>
                                </template>
                                <template x-if="(dom.activeOrders || []).length > 0">
                                    <button @click="saveRoute(dom, 'en_curso')" 
                                            class="w-full py-3 bg-brand-orange text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg shadow-orange-100 flex items-center justify-center gap-2">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                                        Pasar a Empaque
                                    </button>
                                </template>
                                <button @click="copyRouteMessage(dom)" 
                                        class="w-full py-3 bg-blue-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg shadow-blue-100 flex items-center justify-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
                                    Copiar Ruta (WhatsApp)
                                </button>
                                <button @click="saveRoute(dom, 'planificacion')" 
                                        class="w-full py-3 bg-slate-100 text-slate-500 rounded-xl text-[10px] font-black uppercase tracking-widest border border-slate-200">
                                    Regresar a Borrador
                                </button>
                            </div>
                        </div>
                    </template>

                    <template x-if="approvedDoms.length === 0">
                        <div class="col-span-full py-20 text-center">
                            <p class="text-xs font-black text-slate-400 uppercase tracking-widest">No hay rutas aprobadas esperando empaque</p>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- Vista de Empaque (Etapa 2) -->
    <div x-show="activeTab === 'packing'" class="animate-fade-in" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-[2.5rem] border border-slate-100 dark:border-slate-700 shadow-xl overflow-hidden">
            <div class="p-8 border-b border-slate-50 dark:border-slate-700/50 bg-brand-orange/5">
                <h3 class="text-xl font-black text-slate-800 dark:text-white uppercase tracking-tight">Etapa 2: <span class="text-brand-orange">Empaque y Preparación</span></h3>
                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mt-1">Gestión de rutas en proceso de alistamiento</p>
            </div>
            
            <div class="p-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <template x-for="dom in packingDoms" :key="dom.id">
                        <div class="bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-6 rounded-[2rem] shadow-sm relative overflow-hidden group">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-10 h-10 rounded-2xl bg-brand-orange/10 text-brand-orange flex items-center justify-center font-black">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                                </div>
                                <div>
                                    <h4 class="text-sm font-black text-slate-800 dark:text-white uppercase" x-text="dom.nombre"></h4>
                                    <p class="text-[10px] font-bold text-brand-orange uppercase" x-text="`${(dom.activeOrders || []).length} Pedidos en preparación`"></p>
                                </div>
                            </div>

                            <!-- Lista de Pedidos en la Ruta -->
                            <div class="space-y-2 mb-6 bg-slate-50 dark:bg-slate-900 p-4 rounded-2xl max-h-[200px] overflow-y-auto custom-scrollbar">
                                <template x-for="p in dom.activeOrders" :key="p.id">
                                    <div class="flex justify-between items-center text-[9px] font-bold uppercase text-slate-500 py-1 border-b border-slate-100 dark:border-slate-800 last:border-0">
                                        <span x-text="p.cliente?.nombre_completo"></span>
                                        <button @click="unassignPedido(p, dom, true)" class="text-rose-500 hover:text-rose-700">Remover</button>
                                    </div>
                                </template>
                            </div>

                            <div class="grid grid-cols-1 gap-2">
                                <button @click="saveRoute(dom, 'en_ruta')" 
                                        class="w-full py-3 bg-brand-wine text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg shadow-rose-100 flex items-center justify-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                                    Despachar En Ruta
                                </button>
                                <button @click="saveRoute(dom, 'aprobada')" 
                                        class="w-full py-3 bg-slate-100 text-slate-500 rounded-xl text-[10px] font-black uppercase tracking-widest border border-slate-200">
                                    Regresar a Ruta Aprobada
                                </button>
                            </div>
                        </div>
                    </template>

                    <template x-if="packingDoms.length === 0">
                        <div class="col-span-full py-20 text-center">
                            <p class="text-xs font-black text-slate-400 uppercase tracking-widest">No hay rutas en preparación actualmente</p>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- Vista de En Ruta (Etapa 3) -->
    <div x-show="activeTab === 'on_route'" class="animate-fade-in" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-[2.5rem] border border-slate-100 dark:border-slate-700 shadow-xl overflow-hidden">
            <div class="p-8 border-b border-slate-50 dark:border-slate-700/50 bg-brand-wine/5">
                <h3 class="text-xl font-black text-slate-800 dark:text-white uppercase tracking-tight">Etapa 3: <span class="text-brand-wine">En Ruta</span></h3>
                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mt-1">Seguimiento de entregas en curso</p>
            </div>
            
            <div class="p-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <template x-for="dom in onRouteDoms" :key="dom.id">
                        <div class="bg-white dark:bg-slate-800 border border-brand-wine/20 p-6 rounded-[2rem] shadow-sm relative overflow-hidden group">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-10 h-10 rounded-2xl bg-brand-wine/10 text-brand-wine flex items-center justify-center font-black">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                                </div>
                                <div>
                                    <h4 class="text-sm font-black text-slate-800 dark:text-white uppercase" x-text="dom.nombre"></h4>
                                    <p class="text-[10px] font-bold text-brand-wine uppercase" x-text="`${(dom.activeOrders || []).length} Paradas en calle`"></p>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 gap-3 pt-4 border-t border-slate-100 dark:border-slate-700">
                                <div class="space-y-3">
                                    <div class="flex items-center gap-2 bg-slate-50 dark:bg-slate-900/50 p-2 rounded-xl border border-slate-100 dark:border-slate-700">
                                        <span class="text-[8px] font-black text-slate-400 uppercase ml-2">Fecha Entrega:</span>
                                        <input type="date" x-model="dom.manualFinishDate" 
                                               class="flex-1 bg-transparent border-0 text-[10px] font-bold text-slate-700 dark:text-white focus:ring-0 p-0">
                                    </div>
                                    <div class="grid grid-cols-2 gap-3">
                                        <button @click="forceCompleteRoute(dom, dom.manualFinishDate)" 
                                                class="py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-[9px] font-black uppercase tracking-widest shadow-lg shadow-emerald-100 flex items-center justify-center gap-2">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                            Finalizar
                                        </button>
                                        <button @click="forceCompleteRoute(dom, getLocalISODate(-1))" 
                                                class="py-3 bg-brand-wine text-white rounded-xl text-[9px] font-black uppercase tracking-widest shadow-lg shadow-rose-100 flex items-center justify-center gap-2">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                            Ayer
                                        </button>
                                    </div>
                                </div>
                                <button @click="saveRoute(dom, 'en_curso')" 
                                        class="w-full py-3 bg-slate-100 text-slate-500 rounded-xl text-[10px] font-black uppercase tracking-widest">
                                    Regresar a Empaque
                                </button>
                            </div>
                        </div>
                    </template>
                    
                    <template x-if="onRouteDoms.length === 0">
                        <div class="col-span-full py-20 text-center">
                            <p class="text-xs font-black text-slate-400 uppercase tracking-widest">No hay rutas activas en calle actualmente</p>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- Vista de Finalizados (Etapa 4) -->
    <div x-show="activeTab === 'finalized'" class="animate-fade-in" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-[2.5rem] border border-slate-100 dark:border-slate-700 shadow-xl overflow-hidden">
            <div class="p-8 border-b border-slate-50 dark:border-slate-700/50 bg-emerald-50/30 dark:bg-emerald-900/10">
                <h3 class="text-xl font-black text-slate-800 dark:text-white uppercase tracking-tight">Etapa 4: <span class="text-emerald-600">Finalizados</span></h3>
                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mt-1">Historial de rutas cerradas hoy</p>
            </div>
            
            <div class="p-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <template x-for="dom in finalizedRoutes" :key="'route-' + dom.routeId">
                        <div class="bg-white dark:bg-slate-800 border border-emerald-100 p-6 rounded-[2rem] shadow-sm relative overflow-hidden group opacity-75 hover:opacity-100 transition-opacity">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-10 h-10 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center font-black">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                </div>
                                <div>
                                    <h4 class="text-sm font-black text-slate-800 dark:text-white uppercase" x-text="dom.nombre"></h4>
                                    <p class="text-[10px] font-bold text-emerald-600 uppercase" x-text="`${dom.assignedOrders.length} Pedidos entregados`"></p>
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-2 mt-2">
                                <button @click="openIndividualMap(dom, 'map')" 
                                        class="py-2 bg-emerald-50 text-emerald-600 border border-emerald-100 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-emerald-600 hover:text-white transition-all shadow-sm flex items-center justify-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A2 2 0 013 15.487V6.587a2 2 0 011.128-1.796L9 2.5l5 2.5 5.447-2.724A2 2 0 0121 4.513v8.9a2 2 0 01-1.128 1.796L15 17.5l-6 3z"></path></svg>
                                    Mapa
                                </button>
                                <button @click="openIndividualMap(dom, 'list')" 
                                        class="py-2 bg-slate-50 text-slate-600 border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-800 hover:text-white transition-all shadow-sm flex items-center justify-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
                                    Listado
                                </button>
                            </div>
                        </div>
                    </template>
                    
                    <template x-if="finalizedRoutes.length === 0">
                        <div class="col-span-full py-20 text-center">
                            <p class="text-xs font-black text-slate-400 uppercase tracking-widest">No hay rutas finalizadas hoy</p>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- Vista de Cancelados -->
    <div x-show="activeTab === 'cancelled'" class="animate-fade-in" x-cloak>
        <div class="bg-white rounded-[2.5rem] shadow-xl border border-slate-100 overflow-hidden">
            <div class="p-8 bg-slate-50 border-b border-slate-100 flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-black text-slate-800 uppercase tracking-tight">Novedades y Cancelaciones</h2>
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">Entregas no realizadas reportadas por domiciliarios</p>
                </div>
            </div>
            
            <div class="p-8">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
                                <th class="pb-4 text-left px-4">Pedido</th>
                                <th class="pb-4 text-left px-4">Cliente</th>
                                <th class="pb-4 text-left px-4">Domiciliario</th>
                                <th class="pb-4 text-left px-4">Motivo</th>
                                <th class="pb-4 text-left px-4">Observaciones</th>
                                <th class="pb-4 text-right px-4">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            <template x-for="p in cancelledOrders" :key="p.id">
                                <tr class="hover:bg-slate-50 transition-colors group">
                                    <td class="py-4 px-4">
                                        <span class="text-xs font-black text-slate-800" x-text="'#' + p.codigo_seguimiento"></span>
                                    </td>
                                    <td class="py-4 px-4">
                                        <div class="flex flex-col">
                                            <span class="text-xs font-black text-slate-800 uppercase" x-text="p.cliente?.nombre_completo"></span>
                                            <span class="text-[9px] font-bold text-slate-400 uppercase" x-text="p.direccion?.direccion + (p.direccion?.detalles ? ' (' + p.direccion.detalles + ')' : '')"></span>
                                        </div>
                                    </td>
                                    <td class="py-4 px-4">
                                        <div class="flex items-center gap-2">
                                            <div class="w-6 h-6 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center text-[10px] font-black" x-text="p.dom_nombre.substring(0,2).toUpperCase()"></div>
                                            <span class="text-[10px] font-black text-slate-600 uppercase" x-text="p.dom_nombre"></span>
                                        </div>
                                    </td>
                                    <td class="py-4 px-4">
                                        <span class="px-2 py-1 rounded-lg text-[9px] font-black uppercase tracking-tighter border"
                                              :class="p.estado === 'atencion_requerida' ? 'bg-amber-50 text-amber-700 border-amber-100' : 'bg-red-50 text-berry-red border-red-100'"
                                              x-text="p.estado === 'atencion_requerida' ? 'Devolución' : (p.motivo_cancelacion?.replace(/_/g, ' ') || 'Cancelado')"></span>
                                    </td>
                                    <td class="py-4 px-4">
                                        <p class="text-[10px] font-medium text-slate-500 italic" x-text="p.observacion_entrega?.replace('[CANCELADO] ', '')?.replace('[DEVUELTO / ATENCIÓN] ', '')"></p>
                                    </td>
                                    <td class="py-4 px-4 text-right">
                                        <button @click="bulkResetStatus([p.id])" class="px-3 py-1.5 bg-white text-indigo-600 border border-indigo-100 rounded-xl text-[9px] font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all shadow-sm">
                                            Re-programar
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>

                <template x-if="cancelledOrders.length === 0">
                    <div class="py-20 text-center">
                        <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-slate-100">
                            <svg class="w-8 h-8 text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <p class="text-xs font-black text-slate-400 uppercase tracking-widest">No hay cancelaciones reportadas hoy</p>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Vista de Mapa Global -->
    <div x-show="activeTab === 'map'" class="animate-fade-in" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-[2.5rem] border border-slate-100 dark:border-slate-700 shadow-xl overflow-hidden">
            <div class="p-8 border-b border-slate-50 dark:border-slate-700/50 bg-blue-50/30 dark:bg-blue-900/10 flex justify-between items-center">
                <div>
                    <h3 class="text-xl font-black text-slate-800 dark:text-white uppercase tracking-tight">Mapa <span class="text-blue-600">Global de Entregas</span></h3>
                    <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mt-1">Visualización geográfica de todas las rutas activas</p>
                </div>
                <div class="flex gap-2">
                    <select x-model="mapFilter" class="text-[10px] font-black uppercase bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl px-4 py-2 focus:ring-1 focus:ring-blue-500">
                        <option value="all">Ver Todos</option>
                        <template x-for="dom in domiciliarios.filter(d => d.assignedOrders.length > 0)" :key="dom.id">
                            <option :value="dom.id" x-text="dom.nombre"></option>
                        </template>
                    </select>
                </div>
            </div>
            <div class="relative h-[600px] w-full bg-slate-100">
                <div id="dispatchMap" class="absolute inset-0 z-10"></div>
                <!-- Leyenda Flotante -->
                <div class="absolute bottom-6 right-6 z-[400] bg-white/90 dark:bg-slate-800/90 backdrop-blur-md p-6 rounded-[2rem] shadow-2xl border border-white/20 w-64">
                    <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Estado de Domiciliarios</h4>
                    <div class="space-y-3">
                        <template x-for="dom in domiciliarios.filter(d => d.assignedOrders.length > 0)" :key="dom.id">
                            <div class="flex items-center justify-between group cursor-pointer" @click="mapFilter = dom.id">
                                <div class="flex items-center gap-3">
                                    <div class="w-3 h-3 rounded-full shadow-inner" :style="`background-color: ${getZoneColor(dom.id)}`"></div>
                                    <span class="text-[10px] font-bold text-slate-600 dark:text-slate-300 uppercase truncate w-32" x-text="dom.nombre"></span>
                                </div>
                                <span class="text-[9px] font-black text-slate-400 group-hover:text-blue-500" x-text="dom.assignedOrders.length"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Mapa Individual -->
    <template x-teleport="body">
        <div x-show="individualMapOpen" 
             x-cloak 
             x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
             class="fixed inset-0 z-[1000] flex items-center justify-center bg-slate-900/80 backdrop-blur-sm p-4">
            
            <div class="bg-white dark:bg-slate-800 rounded-[2.5rem] shadow-2xl w-full max-w-6xl max-h-[90vh] flex flex-col overflow-hidden border border-slate-100 dark:border-slate-700 transform transition-all"
                 @click.away="individualMapOpen = false">
                
                <!-- Cabecera Premium -->
                <div class="p-8 flex justify-between items-center relative overflow-hidden shrink-0 bg-indigo-600">
                    <div class="absolute top-0 right-0 p-4 opacity-10 pointer-events-none">
                        <svg class="w-32 h-32 transform rotate-12 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 20l-5.447-2.724A2 2 0 013 15.487V6.587a2 2 0 011.128-1.796L9 2.5l5 2.5 5.447-2.724A2 2 0 0121 4.513v8.9a2 2 0 01-1.128 1.796L15 17.5l-6 3z" />
                        </svg>
                    </div>
                    <div class="flex items-center gap-5 relative z-10">
                        <div class="w-16 h-16 rounded-2xl bg-white/20 text-white flex items-center justify-center font-black text-2xl shadow-inner border border-white/10" x-text="selectedDomForMap?.nombre.substring(0,2).toUpperCase()"></div>
                        <div class="text-white text-left">
                            <h3 class="text-3xl font-black uppercase tracking-tight leading-none" x-text="`Ruta: ${selectedDomForMap?.nombre}`"></h3>
                            <div class="flex items-center gap-4 mt-2">
                                <div class="flex bg-white/10 p-1 rounded-xl border border-white/20">
                                    <button @click="individualModalView = 'map'" 
                                            class="px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all"
                                            :class="individualModalView === 'map' ? 'bg-white text-indigo-600 shadow-lg' : 'text-white/60 hover:text-white'">
                                        Mapa
                                    </button>
                                    <button @click="individualModalView = 'list'" 
                                            class="px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all"
                                            :class="individualModalView === 'list' ? 'bg-white text-indigo-600 shadow-lg' : 'text-white/60 hover:text-white'">
                                        Listado
                                    </button>
                                </div>
                                <span class="px-2 py-0.5 bg-emerald-500 rounded-lg text-[9px] font-black uppercase tracking-widest text-white shadow-lg shadow-emerald-500/20">Optimizado</span>
                            </div>
                        </div>
                    </div>
                    <button @click="individualMapOpen = false" class="p-3 bg-white/10 hover:bg-white/20 rounded-2xl text-white transition-all shadow-lg border border-white/10">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>

                <!-- Cuerpo con Mapa y Lista -->
                <div x-show="individualModalView === 'map'" class="flex-1 flex flex-col lg:flex-row overflow-hidden bg-slate-100 dark:bg-slate-900">
                    <!-- Contenedor del Mapa (Altura Garantizada) -->
                    <div class="w-full lg:flex-1 h-[450px] lg:h-auto relative bg-slate-200 dark:bg-slate-800 border-b lg:border-b-0 lg:border-r border-slate-200 dark:border-slate-700 shrink-0">
                        <div id="individualRouteMap" class="w-full h-full" style="min-height: 450px;"></div>
                        <div class="absolute bottom-4 left-4 z-[400] flex gap-2">
                            <div class="px-3 py-2 bg-white/90 dark:bg-slate-800/90 backdrop-blur rounded-xl shadow-lg border border-white/20 flex items-center gap-2">
                                <span class="w-3 h-3 rounded-full bg-blue-600 animate-pulse"></span>
                                <span class="text-[9px] font-black text-slate-600 dark:text-slate-300 uppercase tracking-tighter">Punto de Partida</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Lista de Paradas Lateral -->
                    <div class="w-full lg:w-96 bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700 flex flex-col shadow-2xl">
                        <div class="p-6 border-b border-slate-50 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-900/50">
                            <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-3">Zonas Cubiertas</h4>
                            <div class="flex flex-wrap gap-2 mb-5">
                                <template x-for="z in getUniqueZones(selectedDomForMap)" :key="z.id">
                                    <div class="px-3 py-1.5 rounded-xl flex items-center gap-2 border border-slate-100 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-sm transition-all hover:shadow-md">
                                        <div class="w-2.5 h-2.5 rounded-full shadow-inner" :style="`background-color: ${getZoneColor(z.id)}`"></div>
                                        <span class="text-[9px] font-black text-slate-700 dark:text-slate-200 uppercase tracking-tight" x-text="z.nombre_zona"></span>
                                    </div>
                                </template>
                            </div>
                            <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1">Secuencia Logística</h4>
                            <p class="text-[9px] text-slate-500 font-bold">Orden de entrega basado en proximidad</p>
                        </div>
                        <div class="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-3">
                            <template x-for="(p, pIndex) in selectedDomForMap?.assignedOrders" :key="p.id">
                                <div class="group p-4 bg-slate-50 dark:bg-slate-900/50 rounded-2xl border border-slate-100 dark:border-slate-800 hover:border-indigo-300 hover:bg-white dark:hover:bg-slate-800 transition-all flex gap-4 items-start shadow-sm hover:shadow-md cursor-default"
                                     :class="['entregado', 'cancelado', 'atencion_requerida'].includes(p.estado) ? 'opacity-60 bg-slate-100 dark:bg-slate-900/80' : ''">
                                    <div class="w-8 h-8 rounded-xl bg-white dark:bg-slate-800 text-indigo-600 border border-indigo-100 dark:border-indigo-900 flex items-center justify-center text-xs font-black shrink-0 shadow-sm group-hover:bg-indigo-600 group-hover:text-white transition-colors" x-text="pIndex + 1"></div>
                                    <div class="min-w-0 flex-1">
                                        <div class="flex items-center justify-between gap-2">
                                            <p class="text-[11px] font-black text-slate-800 dark:text-white uppercase truncate tracking-tight" x-text="p.cliente?.nombre_completo"></p>
                                            
                                            <!-- Badge de estado compacto -->
                                            <template x-if="p.estado === 'entregado'">
                                                <span class="px-1.5 py-0.5 bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400 text-[8px] font-black uppercase rounded border border-emerald-100/50 shrink-0">Entregado</span>
                                            </template>
                                            <template x-if="p.estado === 'cancelado'">
                                                <span class="px-1.5 py-0.5 bg-rose-50 dark:bg-rose-950/20 text-rose-600 dark:text-rose-400 text-[8px] font-black uppercase rounded border border-rose-100/50 shrink-0">Cancelado</span>
                                            </template>
                                            <template x-if="p.estado === 'atencion_requerida'">
                                                <span class="px-1.5 py-0.5 bg-amber-50 dark:bg-amber-950/20 text-amber-600 dark:text-amber-400 text-[8px] font-black uppercase rounded border border-amber-100/50 shrink-0">Novedad</span>
                                            </template>
                                            <template x-if="['pendiente', 'confirmado', 'en_empaque', 'en_ruta'].includes(p.estado)">
                                                <span class="px-1.5 py-0.5 bg-blue-50 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 text-[8px] font-black uppercase rounded border border-blue-100/50 shrink-0">En Ruta</span>
                                            </template>
                                        </div>
                                        <div class="flex items-center justify-between mt-1">
                                            <p class="text-[9px] text-indigo-600 font-bold uppercase flex items-center gap-1">
                                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                                <span x-text="p.direccion?.barrio"></span>
                                            </p>
                                            <!-- Hora de entrega si existe -->
                                            <template x-if="p.hora_llegada">
                                                <span class="text-[9px] font-black text-slate-500 bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded flex items-center gap-1" title="Hora de llegada o entrega">
                                                    <svg class="w-2.5 h-2.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                    <span x-text="formatDeliveryTime(p.hora_llegada)"></span>
                                                </span>
                                            </template>
                                        </div>
                                        <p class="text-[10px] text-slate-400 mt-1 leading-tight" x-text="p.direccion?.direccion + (p.direccion?.detalles ? ' (' + p.direccion.detalles + ')' : '')"></p>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>

                <!-- Cuerpo con Listado Detallado (Full Table) -->
                <div x-show="individualModalView === 'list'" class="flex-1 overflow-hidden bg-white dark:bg-slate-900 flex flex-col p-8">
                    <!-- Barra de Ordenamiento y Controles -->
                    <div class="flex items-center justify-between pb-4 mb-2">
                        <div class="flex items-center gap-2">
                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Ordenar por:</span>
                            <div class="flex bg-slate-100 dark:bg-slate-800 p-1 rounded-xl border border-slate-200 dark:border-slate-700">
                                <button @click="modalOrderSort = 'secuencia'" 
                                        class="px-3 py-1 rounded-lg text-[9px] font-black uppercase tracking-wider transition-all"
                                        :class="modalOrderSort === 'secuencia' ? 'bg-white dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 shadow-sm' : 'text-slate-500 hover:text-slate-800 dark:hover:text-white'">
                                    # Secuencia
                                </button>
                                <button @click="modalOrderSort = 'hora_asc'" 
                                        class="px-3 py-1 rounded-lg text-[9px] font-black uppercase tracking-wider transition-all flex items-center gap-1"
                                        :class="modalOrderSort === 'hora_asc' ? 'bg-white dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 shadow-sm' : 'text-slate-500 hover:text-slate-800 dark:hover:text-white'">
                                    <span>Hora</span> &uarr; (Más temprano)
                                </button>
                                <button @click="modalOrderSort = 'hora_desc'" 
                                        class="px-3 py-1 rounded-lg text-[9px] font-black uppercase tracking-wider transition-all flex items-center gap-1"
                                        :class="modalOrderSort === 'hora_desc' ? 'bg-white dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 shadow-sm' : 'text-slate-500 hover:text-slate-800 dark:hover:text-white'">
                                    <span>Hora</span> &darr; (Más tarde)
                                </button>
                            </div>
                        </div>

                        <span class="text-[10px] font-black text-slate-400 uppercase" x-text="`${sortedModalOrders.length} Paradas`"></span>
                    </div>

                    <div class="flex-1 overflow-y-auto custom-scrollbar border border-slate-100 dark:border-slate-800 rounded-3xl">
                        <table class="w-full text-left border-collapse">
                            <thead>
                                <tr class="bg-slate-50 dark:bg-slate-800/50">
                                    <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800"># Orden</th>
                                    <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800">Código</th>
                                    <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800">Cliente</th>
                                    <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800">Dirección y Barrio</th>
                                    <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">Productos</th>
                                    <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 cursor-pointer select-none group"
                                        @click="modalOrderSort = (modalOrderSort === 'hora_asc' ? 'hora_desc' : (modalOrderSort === 'hora_desc' ? 'secuencia' : 'hora_asc'))"
                                        title="Click para alternar orden por hora">
                                        <div class="inline-flex items-center gap-1.5 group-hover:text-indigo-600 transition-colors">
                                            <span>Hora Entrega</span>
                                            <template x-if="modalOrderSort === 'hora_asc'">
                                                <span class="text-indigo-600 font-bold">&uarr;</span>
                                            </template>
                                            <template x-if="modalOrderSort === 'hora_desc'">
                                                <span class="text-indigo-600 font-bold">&darr;</span>
                                            </template>
                                            <template x-if="modalOrderSort === 'secuencia'">
                                                <svg class="w-3 h-3 text-slate-300 group-hover:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path></svg>
                                            </template>
                                        </div>
                                    </th>
                                    <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800">Total</th>
                                    <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">Evidencia</th>
                                    <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800">Estado</th>
                                    <th class="p-4 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 text-center">Devolución</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="(p, pIndex) in sortedModalOrders" :key="p.id">
                                    <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors">
                                        <td class="p-4">
                                            <span class="w-6 h-6 rounded-lg bg-indigo-50 dark:bg-indigo-950/40 text-indigo-600 dark:text-indigo-400 font-black text-xs inline-flex items-center justify-center" x-text="p.orden_entrega || (pIndex + 1)"></span>
                                        </td>
                                        <td class="p-4 text-[10px] font-black text-indigo-600 uppercase tracking-tighter" x-text="p.codigo_seguimiento"></td>
                                        <td class="p-4">
                                            <p class="text-xs font-black text-slate-800 dark:text-white uppercase" x-text="p.cliente?.nombre_completo"></p>
                                            <p class="text-[9px] text-slate-400 font-bold uppercase" x-text="p.cliente?.telefono ? '📞 ' + p.cliente.telefono : 'S.T'"></p>
                                        </td>
                                        <td class="p-4">
                                            <p class="text-[11px] font-bold text-slate-600 dark:text-slate-300" x-text="p.direccion?.direccion + (p.direccion?.detalles ? ' (' + p.direccion.detalles + ')' : '')"></p>
                                            <span class="inline-block mt-1 px-2 py-0.5 bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 text-[8px] font-black uppercase rounded border border-indigo-100/50" x-text="p.direccion?.barrio"></span>
                                        </td>
                                        <td class="p-4 text-center">
                                            <span class="px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-lg text-xs font-black" 
                                                  :title="(p.detalles || []).map(d => `${d.cantidad}x ${d.producto?.nombre || 'Producto'}`).join('\n')"
                                                  x-text="`${p.total_cajas || (p.detalles?.reduce((s, d) => s + (parseInt(d.cantidad) || 0), 0) || 0)} cajas`">
                                            </span>
                                        </td>
                                        <td class="p-4">
                                            <template x-if="p.hora_llegada">
                                                <div class="flex items-center gap-1.5 text-xs font-black text-slate-700 dark:text-slate-200">
                                                    <svg class="w-3.5 h-3.5 text-emerald-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                    <span x-text="formatDeliveryTime(p.hora_llegada)"></span>
                                                </div>
                                            </template>
                                            <template x-if="!p.hora_llegada">
                                                <span class="text-[10px] text-slate-400 italic">--:--</span>
                                            </template>
                                        </td>
                                        <td class="p-4 text-xs font-black text-slate-800 dark:text-white" x-text="'$' + new Intl.NumberFormat('es-CO').format(p.total_pagar)"></td>
                                        <td class="p-4 text-center">
                                            <template x-if="p.evidencia_foto_url">
                                                <div class="relative inline-block group" x-data="{ fullUrl: p.evidencia_foto_url.startsWith('http') ? p.evidencia_foto_url : (baseUrl + '/' + p.evidencia_foto_url.replace(/^\//, '')) }">
                                                    <!-- Botón de Vista -->
                                                    <button @click.stop="previewPhoto = fullUrl" 
                                                            class="p-1.5 bg-indigo-50 text-indigo-600 hover:bg-indigo-600 hover:text-white rounded-xl transition-all shadow-sm flex items-center gap-1"
                                                            title="Clic para ampliar foto de entrega">
                                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                                    </button>
                                                    <!-- Miniatura emergente en Hover / Tooltip flotante -->
                                                    <div class="absolute right-full mr-2 top-1/2 -translate-y-1/2 hidden group-hover:block z-50 pointer-events-none transition-all duration-200">
                                                        <div class="p-1 bg-white dark:bg-slate-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 w-44 overflow-hidden">
                                                            <img :src="fullUrl" alt="Miniatura entrega" class="w-full h-32 object-cover rounded-xl">
                                                            <p class="text-[8px] font-black text-center text-slate-500 uppercase mt-1">Clic para ampliar</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </template>
                                            <template x-if="!p.evidencia_foto_url">
                                                <span class="text-[10px] text-slate-300 font-bold uppercase tracking-tight">Sin foto</span>
                                            </template>
                                        </td>
                                        <td class="p-4">
                                            <template x-if="p.estado === 'entregado'">
                                                <span class="px-2 py-1 bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400 text-[9px] font-black uppercase rounded-lg border border-emerald-100/50">Entregado</span>
                                            </template>
                                            <template x-if="p.estado === 'cancelado'">
                                                <span class="px-2 py-1 bg-rose-50 dark:bg-rose-950/20 text-rose-600 dark:text-rose-400 text-[9px] font-black uppercase rounded-lg border border-rose-100/50">Cancelado</span>
                                            </template>
                                            <template x-if="p.estado === 'atencion_requerida'">
                                                <span class="px-2 py-1 bg-amber-50 dark:bg-amber-950/20 text-amber-600 dark:text-amber-400 text-[9px] font-black uppercase rounded-lg border border-amber-100/50">Novedad / Devuelto</span>
                                            </template>
                                            <template x-if="['pendiente', 'confirmado', 'en_empaque', 'en_ruta'].includes(p.estado)">
                                                <span class="px-2 py-1 bg-blue-50 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 text-[9px] font-black uppercase rounded-lg border border-blue-100/50" x-text="p.estado === 'en_ruta' ? 'En Ruta' : p.estado"></span>
                                            </template>
                                        </td>
                                        <td class="p-4 text-center">
                                            <button type="button" @click.stop="openDevolucionAdminModal(p)"
                                                    class="px-2.5 py-1.5 rounded-xl text-[9px] font-black uppercase tracking-wider transition-all flex items-center justify-center gap-1 mx-auto shadow-xs border"
                                                    :class="(p.observacion_entrega && p.observacion_entrega.includes('[DEV.')) ? 'bg-amber-500 text-white border-amber-600 animate-pulse hover:bg-amber-600' : 'bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:bg-amber-50 hover:text-amber-700 hover:border-amber-200'"
                                                    title="Gestionar Devolución / Dictaminar Inventario">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M16 15v-1a4 4 0 00-4-4H4m0 0l3-3m-3 3l3 3m5 4v1a3 3 0 003 3h4"></path></svg>
                                                <span>Devolución</span>
                                            </button>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="p-6 bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-700 flex justify-between items-center shrink-0">
                    <div class="flex items-center gap-6">
                        <div class="flex flex-col">
                            <span class="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Volumen de Carga</span>
                            <div class="flex items-center gap-2">
                                <div class="w-32 h-1.5 bg-slate-200 dark:bg-slate-800 rounded-full overflow-hidden">
                                    <div class="h-full bg-indigo-500" :style="`width: ${Math.min((selectedDomForMap?.assignedOrders.reduce((sum, p) => sum + p.total_cajas, 0) / 40) * 100, 100)}%`"></div>
                                </div>
                                <span class="text-[10px] font-black text-slate-700 dark:text-white" x-text="`${selectedDomForMap?.assignedOrders.reduce((sum, p) => sum + p.total_cajas, 0)}/40 Cajas`"></span>
                            </div>
                        </div>
                    </div>
                    <div class="flex gap-3">
                        <button @click="individualMapOpen = false" 
                                class="px-8 py-3 bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-700 rounded-xl font-black uppercase tracking-widest text-[10px] shadow-sm hover:bg-slate-50 transition-all">
                            Regresar
                        </button>
                        <button @click="individualMapOpen = false" 
                                class="px-10 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-black uppercase tracking-widest text-[10px] shadow-xl shadow-indigo-500/20 transition-all transform active:scale-95 flex items-center gap-2">
                            Aceptar
                        </button>
                </div>
            </div>
        </div>
    </template>

    <!-- Modal Zoom Foto Evidencia (Independiente al body con z-[2000] para estar siempre por encima de cualquier modal o cabecera) -->
    <template x-teleport="body">
        <div x-show="previewPhoto" 
             x-cloak 
             class="fixed inset-0 z-[2000] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md"
             @click="previewPhoto = null">
            <div class="relative max-w-3xl w-full bg-slate-900 rounded-3xl overflow-hidden shadow-2xl p-4 border border-white/10" @click.stop>
                <div class="flex justify-between items-center pb-3 border-b border-white/10 text-white">
                    <span class="text-xs font-black uppercase tracking-widest flex items-center gap-2">
                        <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        Foto de Evidencia de Entrega
                    </span>
                    <button @click="previewPhoto = null" class="p-1.5 hover:bg-white/10 rounded-xl text-white transition-all">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
                <div class="my-4 max-h-[70vh] flex items-center justify-center bg-black/40 rounded-2xl overflow-hidden p-2">
                    <img :src="previewPhoto" alt="Evidencia de Entrega" class="max-h-[65vh] w-auto max-w-full rounded-xl object-contain shadow-2xl">
                </div>
                <div class="pt-2 text-center flex items-center justify-between">
                    <button @click="previewPhoto = null" class="px-5 py-2 bg-slate-800 text-slate-300 hover:text-white rounded-xl text-xs font-bold uppercase tracking-wider">
                        Cerrar Visor
                    </button>
                    <a :href="previewPhoto" target="_blank" class="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-black uppercase tracking-wider flex items-center gap-1.5 shadow-lg shadow-indigo-600/30">
                        <span>Abrir en Pestaña Completa</span>
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </template>

    <!-- Modal Administrativo de Gestión / Dictamen de Devoluciones (Ecosistema Saluz / JoinTrust) -->
    <template x-teleport="body">
        <div x-show="showDevolucionModal" 
             x-cloak 
             class="fixed inset-0 z-[2500] flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md"
             @click="closeDevolucionModal()">
            <div class="relative max-w-2xl w-full bg-white dark:bg-slate-900 rounded-[2.5rem] overflow-hidden shadow-2xl border border-slate-200 dark:border-slate-800 flex flex-col max-h-[90vh]" @click.stop>
                
                <!-- Encabezado Modal -->
                <div class="bg-amber-500 p-6 text-white flex justify-between items-center shrink-0">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-2xl bg-white/20 flex items-center justify-center shadow-inner">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 15v-1a4 4 0 00-4-4H4m0 0l3-3m-3 3l3 3m5 4v1a3 3 0 003 3h4"></path></svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-black uppercase tracking-tight">Gestión de Devoluciones</h3>
                            <p class="text-[10px] text-amber-100 font-bold uppercase tracking-widest mt-0.5" x-text="'Pedido #' + (selectedOrderForDevolucion?.codigo_seguimiento || '') + ' • ' + (selectedOrderForDevolucion?.cliente?.nombre_completo || '')"></p>
                        </div>
                    </div>
                    <button @click="closeDevolucionModal()" class="p-2 hover:bg-white/20 rounded-xl transition-all">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>

                <!-- Contenido con Scroll -->
                <div class="p-6 overflow-y-auto space-y-6 flex-1 bg-slate-50/50 dark:bg-slate-900/50">
                    <!-- Resumen del Estado -->
                    <div class="p-4 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-900/40 rounded-2xl flex items-center gap-3">
                        <svg class="w-5 h-5 text-amber-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <p class="text-[11px] font-bold text-amber-900 dark:text-amber-200 leading-relaxed">
                            Inspecciona físicamente el producto devuelto. Si está intacto, puedes <b>reingresarlo al stock</b> vendible. Si está dañado o magullado, dictamina <b>darlo de baja / merma</b> para asentar la auditoría contable.
                        </p>
                    </div>

                    <!-- Indicador de Carga -->
                    <div x-show="loadingDevoluciones" class="py-12 flex flex-col items-center justify-center">
                        <div class="w-10 h-10 border-4 border-amber-500 border-t-transparent rounded-full animate-spin mb-3"></div>
                        <span class="text-xs font-black uppercase tracking-widest text-slate-400">Consultando Devoluciones...</span>
                    </div>

                    <!-- Listado de Devoluciones Existentes -->
                    <div x-show="!loadingDevoluciones && devolucionesList.length > 0" class="space-y-4">
                        <h4 class="text-[10px] font-black uppercase tracking-wider text-slate-400">Ítems Reportados por el Domiciliario:</h4>
                        
                        <template x-for="dev in devolucionesList" :key="dev.id">
                            <div class="p-5 bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 shadow-sm space-y-4">
                                <div class="flex items-start justify-between gap-3">
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <span class="px-2 py-0.5 bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300 rounded-lg text-xs font-black" x-text="dev.cantidad + 'x'"></span>
                                            <h5 class="text-sm font-black uppercase text-slate-800 dark:text-white" x-text="dev.producto?.nombre || 'Producto'"></h5>
                                        </div>
                                        <p class="text-[10px] font-bold text-slate-400 mt-1">
                                            Valor: $<span x-text="new Intl.NumberFormat('es-CO').format(dev.monto_total)"></span> • Motivo: <span class="text-slate-600 dark:text-slate-300 font-extrabold uppercase" x-text="dev.motivo"></span>
                                        </p>
                                        <template x-if="dev.observaciones">
                                            <p class="text-[10px] text-slate-500 italic mt-1 bg-slate-50 dark:bg-slate-900/50 p-2 rounded-xl" x-text="'Notas: ' + dev.observaciones"></p>
                                        </template>
                                    </div>
                                    <div class="shrink-0 text-right">
                                        <template x-if="dev.estado_gestion === 'pendiente_inspeccion'">
                                            <span class="px-2.5 py-1 bg-amber-50 text-amber-600 border border-amber-200 rounded-xl text-[9px] font-black uppercase">Pendiente</span>
                                        </template>
                                        <template x-if="dev.estado_gestion === 'reingresado_stock'">
                                            <span class="px-2.5 py-1 bg-emerald-50 text-emerald-600 border border-emerald-200 rounded-xl text-[9px] font-black uppercase">Reingresado a Stock</span>
                                        </template>
                                        <template x-if="dev.estado_gestion === 'merma_desechado'">
                                            <span class="px-2.5 py-1 bg-rose-50 text-rose-600 border border-rose-200 rounded-xl text-[9px] font-black uppercase">Baja / Merma</span>
                                        </template>
                                    </div>
                                </div>

                                <!-- Botones de Dictamen (Solo si está pendiente_inspeccion) -->
                                <template x-if="dev.estado_gestion === 'pendiente_inspeccion'">
                                    <div class="pt-3 border-t border-slate-100 dark:border-slate-700/60 flex flex-wrap gap-2 justify-end">
                                        <button type="button" @click="dictaminarDevolucion(dev.id, 'reingresar_stock')"
                                                :disabled="dictaminando"
                                                class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-[10px] font-black uppercase tracking-wider flex items-center gap-1.5 shadow-sm active:scale-95 transition-all disabled:opacity-50">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
                                            Reingresar a Stock
                                        </button>
                                        <button type="button" @click="dictaminarDevolucion(dev.id, 'merma_desechado')"
                                                :disabled="dictaminando"
                                                class="px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-[10px] font-black uppercase tracking-wider flex items-center gap-1.5 shadow-sm active:scale-95 transition-all disabled:opacity-50">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                            Desechar / Dar de Baja (Merma)
                                        </button>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>

                    <!-- Si no hay devoluciones registradas -->
                    <div x-show="!loadingDevoluciones && devolucionesList.length === 0" class="py-8 text-center bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 p-6">
                        <svg class="w-12 h-12 text-slate-300 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <h4 class="text-sm font-black uppercase text-slate-700 dark:text-white">Sin Devoluciones Registradas</h4>
                        <p class="text-xs text-slate-400 mt-1">Este pedido no tiene registros de productos devueltos en ruta.</p>
                    </div>
                </div>

                <!-- Footer Modal -->
                <div class="p-5 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 flex justify-end shrink-0">
                    <button type="button" @click="closeDevolucionModal()" class="px-6 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl text-xs font-black uppercase tracking-wider">
                        Cerrar
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    function dispatchManager() {
        const getLocalISODate = (offsetDays = 0) => {
            const now = new Date();
            const d = new Date(now.getTime() - (now.getTimezoneOffset() * 60000));
            d.setDate(d.getDate() + offsetDays);
            return d.toISOString().split('T')[0];
        };

        return {
            getLocalISODate,
            selectedDate: '{{ $fecha }}',
            pedidos: @js($pedidos).map(p => {
                const totalCajas = p.detalles?.reduce((sum, d) => sum + (parseInt(d.cantidad) || 0), 0) || 0;
                return { ...p, assigned: false, total_cajas: totalCajas };
            }),
            domiciliarios: @js($domiciliarios).map(d => {
                const routes = d.rutas || [];
                // Buscamos la ruta que está en fase de planificación
                const planningRoute = routes.find(r => r.estado === 'planificacion' || r.estado === 'nuevo');
                // Buscamos la ruta que está activa (empaque o en ruta)
                const activeRoute = routes.find(r => r.estado === 'en_curso' || r.estado === 'en_empaque' || r.estado === 'en_ruta' || r.estado === 'aprobada');
                
                const processOrders = (orders) => {
                    const mapped = (orders || []).map(p => {
                        const totalCajas = p.detalles?.reduce((sum, det) => sum + (parseInt(det.cantidad) || 0), 0) || 0;
                        const ordenEntrega = p.pivot?.orden_entrega ?? 999;
                        const horaLlegada = p.pivot?.hora_llegada ?? p.updated_at ?? null;
                        const estadoEntrega = p.pivot?.estado_entrega ?? null;
                        const obs = p.pivot?.observaciones ?? null;
                        return { 
                            ...p, 
                            assigned: true, 
                            total_cajas: totalCajas,
                            orden_entrega: ordenEntrega,
                            hora_llegada: horaLlegada,
                            estado_entrega: estadoEntrega,
                            pivot_observaciones: obs
                        };
                    });
                    return mapped.sort((a, b) => (a.orden_entrega || 999) - (b.orden_entrega || 999));
                };

                const planningOrders = processOrders(planningRoute?.pedidos);
                const activeOrders = processOrders(activeRoute?.pedidos);

                // Determinar el estado principal para la interfaz
                const currentStatus = activeRoute ? activeRoute.estado : (planningRoute ? planningRoute.estado : 'nuevo');

                return { 
                    ...d, 
                    // Siempre incluimos ambos para que los contadores y mensajes sean consistentes
                    assignedOrders: [...planningOrders, ...activeOrders].sort((a, b) => (a.orden_entrega || 999) - (b.orden_entrega || 999)), 
                    activeOrders: activeOrders,     
                    saving: false, 
                    saved: planningOrders.length > 0 || activeOrders.length > 0,
                    routeId: planningRoute?.id || activeRoute?.id || null,
                    activeRouteId: activeRoute?.id || null,
                    activeRouteDate: activeRoute?.fecha_programada || null,
                    routeStatus: currentStatus,
                    activeRouteStatus: activeRoute?.estado || 'nuevo',
                    planningRouteStatus: planningRoute?.estado || 'nuevo',
                    selected: d.disponible || planningOrders.length > 0 || activeOrders.length > 0 || d.activo,
                    activo: d.activo,
                    // Inicializar fecha de finalización manual
                    manualFinishDate: activeRoute?.fecha_programada || getLocalISODate(0)
                };
            }),
            zonas: @js($zonas),
            draggedPedido: null,
            sourceDom: null,
            dragOverDom: null,
            baseUrl: '{{ url("/") }}',
            waTemplates: { confirmacion_cliente: '', asignacion_ruta: '' },
            souvenirs: @js(\App\Models\Souvenir::all()),
            activeTab: 'dispatch',
            individualMapOpen: false,
            individualModalView: 'map',
            distributionFilter: 'confirmado',
            showEnRuta: false,
            selectedPendingIds: [],
            pendingSort: 'default',
            isReloading: false,

            get packingOrders() {
                let orders = [];
                this.domiciliarios.forEach(d => {
                    if (d.activeRouteStatus === 'en_curso' && d.activeOrders) {
                        d.activeOrders.forEach(p => {
                            orders.push({ ...p, dom_nombre: d.nombre, dom_id: d.id });
                        });
                    }
                });
                return orders;
            },

            get cancelledOrders() {
                let orders = [];
                this.domiciliarios.forEach(d => {
                    // Buscar en rutas históricas y activas
                    (d.rutas || []).forEach(r => {
                        (r.pedidos || []).forEach(p => {
                            if (p.estado === 'cancelado' || p.estado === 'atencion_requerida') {
                                orders.push({ ...p, dom_nombre: d.nombre, dom_id: d.id, fecha_ruta: r.fecha_programada });
                            }
                        });
                    });
                    // También buscar en pedidos activos/rutas si por alguna razón no están en el historial aún
                    (d.rutas || []).forEach(r => {
                        (r.pedidos || []).forEach(p => {
                            if ((p.estado === 'cancelado' || p.estado === 'atencion_requerida') && !orders.find(o => o.id === p.id)) {
                                orders.push({ ...p, dom_nombre: d.nombre, dom_id: d.id, fecha_ruta: r.fecha_programada });
                            }
                        });
                    });
                });
                return orders.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
            },

            get finalizedRoutes() {
                // Para el historial buscamos en todos los domiciliarios las rutas cerradas
                const allFinalized = [];
                this.domiciliarios.forEach(d => {
                    const finalized = d.rutas?.filter(r => r.estado === 'finalizada' || r.estado === 'cerrada') || [];
                    finalized.forEach(r => {
                        const orders = (r.pedidos || []).map(p => {
                            const ordenEntrega = p.pivot?.orden_entrega ?? 999;
                            const horaLlegada = p.pivot?.hora_llegada ?? p.updated_at ?? null;
                            const estadoEntrega = p.pivot?.estado_entrega ?? null;
                            const obs = p.pivot?.observaciones ?? null;
                            return {
                                ...p, 
                                assigned: true, 
                                total_cajas: p.detalles?.reduce((sum, det) => sum + (parseInt(det.cantidad) || 0), 0) || 0,
                                orden_entrega: ordenEntrega,
                                hora_llegada: horaLlegada,
                                estado_entrega: estadoEntrega,
                                pivot_observaciones: obs
                            };
                        }).sort((a, b) => (a.orden_entrega || 999) - (b.orden_entrega || 999));
                        allFinalized.push({ ...d, assignedOrders: orders, routeId: r.id, routeStatus: r.estado });
                    });
                });
                return allFinalized;
            },

            formatFriendlyDate(dateStr) {
                if (!dateStr) return '';
                const onlyDate = dateStr.split(' ')[0];
                const parts = onlyDate.split('-');
                if (parts.length !== 3) return dateStr;
                const date = new Date(parts[0], parts[1] - 1, parts[2]);
                if (isNaN(date.getTime())) return dateStr;
                const days = ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'];
                const months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
                return `${days[date.getDay()]} ${String(date.getDate()).padStart(2, '0')}/${months[date.getMonth()]}/${date.getFullYear()}`;
            },
            formatDeliveryTime(dateTimeStr) {
                if (!dateTimeStr) return null;
                try {
                    // Si ya viene como HH:MM AM/PM
                    if (/^\d{1,2}:\d{2}\s*(AM|PM|am|pm)$/i.test(dateTimeStr.trim())) return dateTimeStr.trim();
                    // Si viene como HH:MM:SS
                    if (/^\d{2}:\d{2}(:\d{2})?$/.test(dateTimeStr.trim())) {
                        const parts = dateTimeStr.trim().split(':');
                        let hour = parseInt(parts[0], 10);
                        const min = parts[1];
                        const ampm = hour >= 12 ? 'PM' : 'AM';
                        hour = hour % 12 || 12;
                        return `${hour}:${min} ${ampm}`;
                    }
                    const d = new Date(dateTimeStr);
                    if (isNaN(d.getTime())) return dateTimeStr;
                    return d.toLocaleTimeString('es-CO', { hour: 'numeric', minute: '2-digit', hour12: true });
                } catch (e) {
                    return dateTimeStr;
                }
            },
            get visiblePendingPedidos() {
                let filtered = [];
                if (this.distributionFilter === 'confirmado') {
                    filtered = this.pedidos.filter(p => !p.assigned && p.estado === 'confirmado');
                } else {
                    filtered = this.pedidos.filter(p => !p.assigned);
                }

                if (this.pendingSort === 'alphabetical') {
                    return filtered.sort((a, b) => (a.cliente?.nombre_completo || '').localeCompare(b.cliente?.nombre_completo || ''));
                }
                
                return filtered;
            },
            swappingDomId: null,
            selectedDomForMap: null,
            mapFilter: 'all',
            mapLoaded: false,
            map: null,
            markers: [],
            userLocation: null,
            individualMap: null,
            individualMarkers: [],
            previewPhoto: null,
            modalOrderSort: 'secuencia', // 'secuencia', 'hora_asc', 'hora_desc'

            // Devoluciones en Despacho
            showDevolucionModal: false,
            selectedOrderForDevolucion: null,
            devolucionesList: [],
            loadingDevoluciones: false,
            dictaminando: false,

            async openDevolucionAdminModal(pedido) {
                this.selectedOrderForDevolucion = pedido;
                this.showDevolucionModal = true;
                this.loadingDevoluciones = true;
                this.devolucionesList = [];
                try {
                    const res = await fetch(`${this.baseUrl}/pedidos/${pedido.id}/devoluciones`);
                    const data = await res.json();
                    if (data.success) {
                        this.devolucionesList = data.devoluciones || [];
                    }
                } catch (e) {
                    console.error("Error al cargar devoluciones:", e);
                } finally {
                    this.loadingDevoluciones = false;
                }
            },

            closeDevolucionModal() {
                this.showDevolucionModal = false;
                this.selectedOrderForDevolucion = null;
                this.devolucionesList = [];
            },

            async dictaminarDevolucion(devolucionId, accion) {
                if (this.dictaminando) return;
                this.dictaminando = true;
                try {
                    const res = await fetch(`${this.baseUrl}/devoluciones/${devolucionId}/dictaminar`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                        },
                        body: JSON.stringify({ accion: accion })
                    });
                    const data = await res.json();
                    if (data.success) {
                        // Actualizar estado en la lista local
                        const found = this.devolucionesList.find(d => d.id === devolucionId);
                        if (found) {
                            found.estado_gestion = accion;
                        }
                        window.dispatchEvent(new CustomEvent('notify', {
                            detail: { title: 'Dictamen Registrado', message: data.message, type: 'success' }
                        }));
                    } else {
                        alert(data.message || 'Error al procesar el dictamen.');
                    }
                } catch (e) {
                    alert('Error de conexión al dictaminar devolución.');
                } finally {
                    this.dictaminando = false;
                }
            },

            get sortedModalOrders() {
                const orders = [...(this.selectedDomForMap?.assignedOrders || [])];
                if (this.modalOrderSort === 'hora_asc') {
                    return orders.sort((a, b) => {
                        const timeA = a.hora_llegada || '99:99';
                        const timeB = b.hora_llegada || '99:99';
                        return timeA.localeCompare(timeB);
                    });
                } else if (this.modalOrderSort === 'hora_desc') {
                    return orders.sort((a, b) => {
                        const timeA = a.hora_llegada || '00:00';
                        const timeB = b.hora_llegada || '00:00';
                        return timeB.localeCompare(timeA);
                    });
                }
                // Secuencia por defecto (orden_entrega)
                return orders.sort((a, b) => (a.orden_entrega || 999) - (b.orden_entrega || 999));
            },

            get packingDoms() {
                return this.domiciliarios.filter(d => d.activeRouteStatus === 'en_curso' || d.activeRouteStatus === 'en_empaque');
            },

            get onRouteDoms() {
                return this.domiciliarios.filter(d => d.activeRouteStatus === 'en_ruta' && d.activeOrders?.length > 0);
            },

            get totalPackingOrders() {
                return this.domiciliarios
                    .filter(d => d.activeRouteStatus === 'en_curso' || d.activeRouteStatus === 'en_empaque')
                    .reduce((sum, d) => sum + (d.activeOrders?.length || 0), 0);
            },

            get totalOnRouteOrders() {
                return this.domiciliarios
                    .filter(d => d.activeRouteStatus === 'en_ruta')
                    .reduce((sum, d) => sum + (d.activeOrders?.length || 0), 0);
            },

            get totalFinalizedOrders() {
                let count = 0;
                this.domiciliarios.forEach(d => {
                    count += d.rutas?.filter(r => r.estado === 'finalizada' || r.estado === 'cerrada').length || 0;
                });
                return count;
            },

            get totalCancelledOrders() {
                return this.cancelledOrders.length;
            },

            get isDirty() {
                return this.domiciliarios.some(d => !d.saved && d.assignedOrders.length > 0);
            },

            get approvedDoms() {
                return this.domiciliarios.filter(d => d.routeStatus === 'aprobada');
            },

            get totalPlanningRoutes() {
                return this.domiciliarios.filter(d => d.routeStatus === 'planificacion' || d.assignedOrders.length > 0).length;
            },

            get totalApprovedRoutes() {
                return this.approvedDoms.length;
            },

            get sortedDoms() {
                // En Despacho/Planificación solo mostramos: 
                // 1. Domiciliarios disponibles sin ruta
                // 2. Domiciliarios con rutas en planificación (borradores)
                return this.domiciliarios.filter(d => 
                    (d.disponible && d.routeStatus === 'nuevo') || 
                    d.routeStatus === 'planificacion' ||
                    (!d.saved && d.assignedOrders.length > 0)
                ).sort((a, b) => {
                    // 1. Habilitados (selected = true) primero, deshabilitados (selected = false) al final
                    if (a.selected && !b.selected) return -1;
                    if (!a.selected && b.selected) return 1;

                    // 2. Con pedidos asignados primero
                    if (a.assignedOrders.length > 0 && b.assignedOrders.length === 0) return -1;
                    if (a.assignedOrders.length === 0 && b.assignedOrders.length > 0) return 1;

                    // 3. Orden alfabético
                    return (a.nombre || '').localeCompare(b.nombre || '');
                });
            },

            async init() {
                // Interceptor de enlaces internos para cambios sin guardar
                document.addEventListener('click', (e) => {
                    const link = e.target.closest('a');
                    if (link && link.href && link.href.startsWith(window.location.origin) && !link.href.includes('#')) {
                        if (this.isDirty) {
                            e.preventDefault();
                            window.dispatchEvent(new CustomEvent('open-confirm', {
                                detail: {
                                    title: 'CAMBIOS SIN GUARDAR',
                                    message: 'Tienes asignaciones que no han sido guardadas. Si sales de esta pantalla, perderás el progreso. ¿Deseas continuar?',
                                    callback: () => { window.location.href = link.href; }
                                }
                            }));
                        }
                    }
                });

                // Detector de cambios sin guardar (Navegador - Solo para cierre de pestaña/recarga externa)
                window.addEventListener('beforeunload', (e) => {
                    if (this.isDirty && !this.isReloading) {
                        e.preventDefault();
                        e.returnValue = 'Tienes cambios sin guardar.';
                    }
                });

                try {
                    const res = await fetch(`${this.baseUrl}/settings/whatsapp-templates`);
                    this.waTemplates = await res.json();
                } catch (e) {
                    console.error("Error loading WA templates:", e);
                }

                // Limpieza automática de pedidos duplicados al iniciar
                const assignedIds = new Set();
                this.domiciliarios.forEach(d => {
                    (d.assignedOrders || []).forEach(p => assignedIds.add(p.id));
                    (d.activeOrders || []).forEach(p => assignedIds.add(p.id));
                });
                this.pedidos = this.pedidos.filter(p => !assignedIds.has(p.id));

                this.$watch('activeTab', value => {
                    if (value === 'map') {
                        this.$nextTick(() => {
                            const delays = [300, 800, 1500];
                            delays.forEach(delay => {
                                setTimeout(() => {
                                    if (!this.mapLoaded) {
                                        this.initMap();
                                    } else if (this.map) {
                                        this.map.invalidateSize();
                                        this.updateMapMarkers();
                                    }
                                }, delay);
                            });
                        });
                    }
                });

                this.$watch('individualModalView', value => {
                    if (value === 'map' && this.individualMapOpen && this.selectedDomForMap) {
                        this.$nextTick(() => {
                            this.initIndividualRouteMap(this.selectedDomForMap);
                        });
                    }
                });

                this.$watch('individualMapOpen', value => {
                    if (value && this.individualModalView === 'map' && this.selectedDomForMap) {
                        this.$nextTick(() => {
                            this.initIndividualRouteMap(this.selectedDomForMap);
                        });
                    } else if (!value && this.individualMap) {
                        this.individualMap.remove();
                        this.individualMap = null;
                    }
                });
            },

            initMap() {
                if (this.map || this.mapLoaded) return;
                
                const mapEl = document.getElementById('dispatchMap');
                if (!mapEl) return;

                try {
                    this.map = L.map('dispatchMap', {
                        zoomControl: false,
                        scrollWheelZoom: true,
                        worldCopyJump: true
                    }).setView([4.6097, -74.0817], 12);
                    
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; OSM',
                        maxZoom: 19
                    }).addTo(this.map);

                    L.control.zoom({ position: 'bottomright' }).addTo(this.map);
                    this.mapLoaded = true;
                    
                    [100, 500, 1000].forEach(delay => {
                        setTimeout(() => {
                            this.map.invalidateSize();
                            this.updateMapMarkers();
                        }, delay);
                    });

                    // Inicializar Punto de Partida (Bodega)
                    const savedLocation = localStorage.getItem('jointrust_bodega_location');
                    if (savedLocation) {
                        this.userLocation = JSON.parse(savedLocation);
                    } else if (!this.userLocation) {
                        this.userLocation = [4.6097, -74.0817]; // Centro de Bogotá por defecto
                    }

                    if (this.map) {
                        const startIcon = L.divIcon({
                            className: 'custom-marker-icon',
                            html: '<div class="w-8 h-8 bg-brand-orange rounded-full border-4 border-white shadow-lg flex items-center justify-center text-white cursor-move hover:scale-110 transition-transform" title="Arrastrar para cambiar punto de partida"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg></div>'
                        });

                        this.startMarker = L.marker(this.userLocation, {
                            draggable: true,
                            icon: startIcon
                        }).addTo(this.map).bindPopup("<b>Bodega / Punto de Partida</b><br><span class='text-xs text-slate-500'>Arrastra este marcador para establecer de dónde salen los domiciliarios.</span>").openPopup();

                        this.startMarker.on('dragend', (e) => {
                            const position = e.target.getLatLng();
                            this.userLocation = [position.lat, position.lng];
                            localStorage.setItem('jointrust_bodega_location', JSON.stringify(this.userLocation));
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Punto de Partida', message: 'Ubicación de la bodega actualizada.', type: 'success' } }));
                            
                            // Re-calcular la distancia de las rutas si ya hay pedidos asignados
                            this.domiciliarios.forEach(dom => {
                                if (dom.assignedOrders && dom.assignedOrders.length > 0) {
                                    this.reorderRouteByDistance(dom);
                                }
                            });
                            this.updateMapMarkers();
                        });
                    }
                } catch (e) {
                    console.error("Error initMap:", e);
                }
            },

            updateMapMarkers() {
                if (!this.map) return;
                this.markers.forEach(m => this.map.removeLayer(m));
                this.markers = [];
                const colors = ['#4F46E5', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];
                
                this.domiciliarios.forEach((dom, index) => {
                    if (this.mapFilter !== 'all' && this.mapFilter !== dom.id) return;
                    if (!dom.selected || dom.assignedOrders.length === 0) return;
                    
                    const color = colors[index % colors.length];
                    const points = [];
                    if (this.userLocation) points.push(this.userLocation);
                    
                    dom.assignedOrders.forEach((p, pIndex) => {
                        const lat = parseFloat(p.direccion?.lat || p.direccion?.latitud);
                        const lng = parseFloat(p.direccion?.lng || p.direccion?.longitud);
                        if (!isNaN(lat) && !isNaN(lng)) {
                            const marker = L.marker([lat, lng], {
                                icon: L.divIcon({
                                    className: 'custom-marker-icon',
                                    html: `<div class="w-8 h-8 rounded-full border-4 border-white shadow-lg flex items-center justify-center text-[11px] font-black text-white" style="background-color: ${color}">${pIndex + 1}</div>`
                                })
                            }).addTo(this.map).bindPopup(`<b>${p.cliente?.nombre_completo}</b><br>${p.direccion?.direccion}${p.direccion?.detalles ? ' (' + p.direccion.detalles + ')' : ''}`);
                            this.markers.push(marker);
                            points.push([lat, lng]);
                        }
                    });
                    
                    if (points.length > 1) {
                        const polyline = L.polyline(points, { color: color, weight: 4, opacity: 0.5, dashArray: '10, 10' }).addTo(this.map);
                        this.markers.push(polyline);
                    }
                });

                if (this.markers.length > 0) {
                    const group = new L.featureGroup(this.markers.filter(m => m instanceof L.Marker));
                    if (group.getBounds().isValid()) this.map.fitBounds(group.getBounds(), { padding: [50, 50] });
                }
            },

            openIndividualMap(dom, view = 'map') {
                if (dom.assignedOrders.length === 0) return;
                this.selectedDomForMap = dom;
                this.individualModalView = view;
                this.modalOrderSort = 'secuencia';
                this.individualMapOpen = true;
                
                if (view === 'map') {
                    this.$nextTick(() => {
                        this.initIndividualRouteMap(dom);
                    });
                }
            },

            initIndividualRouteMap(dom) {
                if (!dom) return;
                
                setTimeout(() => {
                    const mapEl = document.getElementById('individualRouteMap');
                    if (!mapEl) return;

                    if (this.individualMap) { this.individualMap.remove(); this.individualMap = null; }
                    this.individualMap = L.map('individualRouteMap', { zoomControl: false }).setView([4.6097, -74.0817], 12);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; OSM' }).addTo(this.individualMap);
                    L.control.zoom({ position: 'bottomright' }).addTo(this.individualMap);
                    
                    const points = [];
                    if (this.userLocation) points.push(this.userLocation);
                    
                    dom.assignedOrders.forEach((p, pIndex) => {
                        const lat = parseFloat(p.direccion?.lat || p.direccion?.latitud);
                        const lng = parseFloat(p.direccion?.lng || p.direccion?.longitud);
                        if (!isNaN(lat) && !isNaN(lng)) {
                            L.marker([lat, lng], {
                                icon: L.divIcon({
                                    className: 'custom-marker-icon',
                                    html: `<div class="w-10 h-10 rounded-2xl border-4 border-white shadow-xl bg-indigo-600 flex items-center justify-center text-xs font-black text-white">${pIndex + 1}</div>`
                                })
                            }).addTo(this.individualMap);
                            points.push([lat, lng]);
                        }
                    });
                    
                    if (points.length > 1) {
                        L.polyline(points, { color: '#4F46E5', weight: 5, opacity: 0.5, dashArray: '10, 15' }).addTo(this.individualMap);
                        this.individualMap.fitBounds(L.polyline(points).getBounds(), { padding: [80, 80] });
                    }

                    this.getUniqueZones(dom).forEach(z => {
                        if (z.polygon_coords) L.polygon(z.polygon_coords, { color: this.getZoneColor(z.id), fillOpacity: 0.25 }).addTo(this.individualMap);
                    });
                    
                    setTimeout(() => this.individualMap.invalidateSize(), 200);
                }, 450);
            },

            reloadPage() {
                const url = `{{ route('rutas.despacho') }}?fecha=${this.selectedDate}`;
                if (this.isDirty) {
                    window.dispatchEvent(new CustomEvent('open-confirm', {
                        detail: {
                            title: 'CAMBIOS SIN GUARDAR',
                            message: 'Tienes asignaciones que no han sido guardadas como borrador. Si cambias de fecha, perderás este trabajo. ¿Deseas continuar?',
                            callback: () => { window.location.href = url; }
                        }
                    }));
                } else {
                    window.location.href = url;
                }
            },

            dragPedido(e, pedido, sourceDom = null) {
                this.draggedPedido = pedido;
                this.sourceDom = sourceDom;
            },

            dropPedido(dom) {
                if (!this.draggedPedido) return;
                
                // Si viene de otro domiciliario, quitarlo de allá primero
                if (this.sourceDom) {
                    this.sourceDom.assignedOrders = this.sourceDom.assignedOrders.filter(p => p.id !== this.draggedPedido.id);
                    if (this.sourceDom.id === dom.id) {
                        // Si es el mismo domiciliario (reordenar), simplemente lo movemos al final
                    }
                }

                dom.assignedOrders = [...dom.assignedOrders, this.draggedPedido];
                this.draggedPedido.assigned = true;
                dom.saved = false; // Reset saved state on change
                
                this.draggedPedido = null;
                this.sourceDom = null;
                this.dragOverDom = null;
            },

            assignPedido(pedido, domId) {
                if (!domId) return;
                const dom = this.domiciliarios.find(d => d.id == domId);
                if (!dom) return;
                
                pedido.assigned = true;
                dom.assignedOrders = [...dom.assignedOrders, pedido];
                dom.saved = false;
                
                if (this.activeTab === 'map') this.updateMapMarkers();
                
                window.dispatchEvent(new CustomEvent('notify', { 
                    detail: { title: 'Pedido Asignado', message: `Pedido #${pedido.codigo_seguimiento} asignado a ${dom.nombre}.`, type: 'success' } 
                }));
            },

            unassignPedido(pedido, dom, isFromActive = false) {
                if (isFromActive) {
                    dom.activeOrders = dom.activeOrders.filter(p => p.id !== pedido.id);
                } else {
                    dom.assignedOrders = dom.assignedOrders.filter(p => p.id !== pedido.id);
                }
                const original = this.pedidos.find(p => p.id === pedido.id);
                if (original) original.assigned = false;
                dom.saved = false; // Reset saved state on change
            },

            clearDomAssignments(dom) {
                dom.assignedOrders.forEach(p => {
                    const original = this.pedidos.find(op => op.id === p.id);
                    if (original) original.assigned = false;
                });
                dom.assignedOrders = [];
                dom.saved = false; // Reset saved state on change
            },

            clearAllAssignments() {
                this.domiciliarios.forEach(d => this.clearDomAssignments(d));
            },

            reorderRouteByDistance(dom) {
                if (dom.assignedOrders.length <= 1) return;
                // El punto de partida es siempre la ubicación de la bodega establecida
                let currentPos = this.userLocation || [4.6097, -74.0817];
                let unvisited = [...dom.assignedOrders];
                let sorted = [];
                
                while (unvisited.length > 0) {
                    let nearestIdx = -1;
                    let minDistance = Infinity;
                    
                    unvisited.forEach((p, idx) => {
                        const lat = parseFloat(p.direccion?.lat || p.direccion?.latitud);
                        const lng = parseFloat(p.direccion?.lng || p.direccion?.longitud);
                        
                        if (!isNaN(lat) && !isNaN(lng)) {
                            // Cálculo de distancia euclidiana básica
                            let dist = Math.sqrt(Math.pow(lat - currentPos[0], 2) + Math.pow(lng - currentPos[1], 2));
                            
                            // Lógica de Prioridad: Los pedidos con horario preferente tienen un "descuento" de distancia virtual
                            // para atraer el algoritmo hacia ellos más temprano en la ruta (Símil a Spoke)
                            if (p.hora_preferente_entrega) {
                                dist = dist * 0.5; // Los hace parecer el doble de cercanos para el algoritmo
                            }
                            
                            if (dist < minDistance) {
                                minDistance = dist;
                                nearestIdx = idx;
                            }
                        }
                    });
                    
                    if (nearestIdx === -1) {
                        sorted.push(unvisited.splice(0, 1)[0]);
                    } else {
                        const next = unvisited.splice(nearestIdx, 1)[0];
                        sorted.push(next);
                        // Actualizar posición actual para el siguiente salto
                        currentPos = [parseFloat(next.direccion?.lat || next.direccion?.latitud), parseFloat(next.direccion?.lng || next.direccion?.longitud)];
                    }
                }
                dom.assignedOrders = sorted;
            },

            async searchWarehouseAddress() {
                const query = this.warehouseQuery;
                if (!query || query.length < 5) return;
                
                this.searching = true;
                try {
                    // Usamos Nominatim (OpenStreetMap) para geocodificar la dirección de la bodega
                    const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query + ', Colombia')}`);
                    const data = await response.json();
                    
                    if (data && data.length > 0) {
                        const result = data[0];
                        this.userLocation = [parseFloat(result.lat), parseFloat(result.lon)];
                        
                        // Persistir ubicación
                        localStorage.setItem('jointrust_bodega_location', JSON.stringify(this.userLocation));
                        
                        // Actualizar mapa
                        if (this.startMarker) {
                            this.startMarker.setLatLng(this.userLocation);
                            this.map.setView(this.userLocation, 15);
                            this.startMarker.openPopup();
                        }
                        
                        window.dispatchEvent(new CustomEvent('notify', { 
                            detail: { title: 'Bodega Actualizada', message: `Ubicación establecida en: ${result.display_name}`, type: 'success' } 
                        }));
                        
                        // Re-ordenar rutas existentes si las hay, desde el nuevo punto de partida
                        this.domiciliarios.forEach(dom => {
                            if (dom.assignedOrders.length > 0) this.reorderRouteByDistance(dom);
                        });
                        this.updateMapMarkers();
                    } else {
                        throw new Error('No se encontró la dirección especificada.');
                    }
                } catch (e) {
                    window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error de Geocodificación', message: e.message, type: 'error' } }));
                } finally {
                    this.searching = false;
                }
            },

            autoDistribute() {
                const activeDoms = this.domiciliarios.filter(d => d.selected);
                let pending = [...this.visiblePendingPedidos];

                if (pending.length === 0 || activeDoms.length === 0) {
                    window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Atención', message: 'No hay pedidos o domiciliarios activos para distribuir.', type: 'warning' } }));
                    return;
                }

                // Limpiar asignaciones previas para una distribución limpia
                activeDoms.forEach(d => d.assignedOrders = []);
                pending.forEach(p => p.assigned = false);

                const targetQuotaOrders = Math.ceil(pending.length / activeDoms.length);
                const MAX_CAJAS = 40;

                // 1. Agrupar por Zonas
                const ordersByZone = {};
                pending.forEach(p => {
                    const zoneId = p.direccion?.zona?.id || p.direccion?.tarifa_zona_id || 0;
                    if (!ordersByZone[zoneId]) ordersByZone[zoneId] = [];
                    ordersByZone[zoneId].push(p);
                });

                // 2. Ordenar Zonas por Prioridad (Lejanía/Volumen)
                const sortedZones = [...this.zonas].sort((a, b) => b.orden_prioridad - a.orden_prioridad);
                const zonesToProcess = [...sortedZones, { id: 0, nombre_zona: 'SIN ZONA' }];

                // 3. Lógica de Conglomerados (Clustering al estilo Spoke): 
                // Intentamos asignar zonas COMPLETAS a cada domiciliario para evitar que se crucen en las mismas calles.
                let currentDomIdx = 0;
                
                zonesToProcess.forEach(zone => {
                    let zoneOrders = ordersByZone[zone.id] || [];
                    if (zoneOrders.length === 0) return;

                    // Priorizar internamente pedidos con horario dentro de la zona
                    zoneOrders.sort((a, b) => (a.hora_preferente_entrega ? -1 : 1));

                    zoneOrders.forEach(p => {
                        let assigned = false;
                        let initialDomIdx = currentDomIdx;
                        
                        // Intentamos asignar al domiciliario actual (para mantener la zona unida)
                        do {
                            const dom = activeDoms[currentDomIdx];
                            const currentCajas = dom.assignedOrders.reduce((s, op) => s + op.total_cajas, 0);
                            
                            // Criterio Spoke: Llenar hasta capacidad física, pero rotar si ya superó su cuota ideal significativamente
                            if ((currentCajas + p.total_cajas) <= MAX_CAJAS && dom.assignedOrders.length < (targetQuotaOrders * 1.25)) {
                                dom.assignedOrders.push(p);
                                p.assigned = true;
                                assigned = true;
                                break;
                            }
                            
                            // Si el domiciliario actual está lleno, pasamos al siguiente y ese será el nuevo "foco" de zona
                            currentDomIdx = (currentDomIdx + 1) % activeDoms.length;
                        } while (currentDomIdx !== initialDomIdx);

                        // Fallback de seguridad: Si no se pudo por cuota suave, asignar al que tenga espacio físico real
                        if (!assigned) {
                            for (let i = 0; i < activeDoms.length; i++) {
                                const dom = activeDoms[i];
                                const currentCajas = dom.assignedOrders.reduce((s, op) => s + op.total_cajas, 0);
                                if ((currentCajas + p.total_cajas) <= MAX_CAJAS) {
                                    dom.assignedOrders.push(p);
                                    p.assigned = true;
                                    assigned = true;
                                    break;
                                }
                            }
                        }
                    });
                });

                // 4. Secuenciación Final: Optimizar el orden de entrega dentro de cada ruta generada
                activeDoms.forEach(dom => this.reorderRouteByDistance(dom));
                
                if (this.activeTab === 'map') this.updateMapMarkers();
                
                const leftOut = pending.filter(p => !p.assigned).length;
                window.dispatchEvent(new CustomEvent('notify', {
                    detail: { 
                        title: 'Distribución Inteligente', 
                        message: `Rutas optimizadas por conglomerado. ${leftOut > 0 ? leftOut + ' pedidos quedaron sin asignar.' : ''}`, 
                        type: 'success' 
                    }
                }));
            },

            async saveRoute(dom, status = 'planificacion') {
                // Determinar qué ruta estamos guardando/actualizando
                let routeIdToSave = dom.routeId;
                let ordersToSave = dom.assignedOrders;

                // Si estamos en las etapas de Aprobado, Empaque o En Ruta, operamos sobre la ruta activa
                if (this.activeTab === 'approved' || this.activeTab === 'packing' || this.activeTab === 'on_route' || status === 'en_ruta' || status === 'en_curso') {
                    routeIdToSave = dom.activeRouteId;
                    ordersToSave = dom.activeOrders;
                }

                if (!ordersToSave || (ordersToSave.length === 0 && status !== 'finalizada')) return;
                dom.saving = true;
                try {
                    const response = await fetch(`${this.baseUrl}/rutas`, {
                        method: 'POST',
                        headers: { 
                            'Content-Type': 'application/json', 
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                        },
                        body: JSON.stringify({ 
                            id: routeIdToSave,
                            domiciliario_id: dom.id, 
                            fecha_programada: this.selectedDate, 
                            pedidos: ordersToSave.map(p => p.id),
                            estado: status
                        })
                    });
                    
                    let data;
                    try {
                        data = await response.json();
                    } catch (err) {
                        throw new Error('Error de conexión o respuesta no válida del servidor.');
                    }
                    
                    if (!response.ok) {
                        if (response.status === 422 && data.errors) {
                            const firstError = Object.values(data.errors)[0][0];
                            throw new Error(firstError);
                        }
                        throw new Error(data.message || 'Error al guardar la ruta');
                    }
                    
                    if (data.success || response.ok) {
                        const newRouteId = data.ruta_id;
                        
                        // Actualizar estados locales de forma reactiva
                        if (status === 'en_curso' || status === 'en_ruta' || status === 'aprobada') {
                            dom.activeRouteId = newRouteId;
                            dom.activeRouteStatus = status;
                            dom.routeStatus = status;
                            dom.routeId = null;
                            dom.planningRouteStatus = 'nuevo';
                            
                            // Si pasamos a empaque o ruta, movemos los pedidos a activeOrders
                            if (status === 'en_curso' || status === 'en_ruta') {
                                dom.activeOrders = [...ordersToSave];
                                dom.assignedOrders = [];
                            } else if (status === 'aprobada') {
                                // Si solo aprobamos, movemos a activeOrders pero mantenemos visibilidad si es necesario
                                dom.activeOrders = [...ordersToSave];
                                dom.assignedOrders = []; // Se limpia de planificación
                            }
                        } else if (status === 'planificacion') {
                            dom.routeId = newRouteId;
                            dom.routeStatus = 'planificacion';
                            dom.planningRouteStatus = 'planificacion';
                            dom.assignedOrders = [...ordersToSave];
                            dom.activeOrders = [];
                            dom.activeRouteId = null;
                            dom.activeRouteStatus = 'nuevo';
                        } else if (status === 'finalizada') {
                            dom.routeStatus = 'finalizada';
                            dom.activeOrders = [];
                            dom.activeRouteId = null;
                            dom.activeRouteStatus = 'nuevo';
                            dom.routeId = null;
                            dom.planningRouteStatus = 'nuevo';
                        }

                        dom.saved = (status !== 'planificacion' || ordersToSave.length > 0);
                        
                        if (status === 'en_ruta') {
                            dom.selected = false;
                            window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Ruta Iniciada', message: `La ruta de ${dom.nombre} ahora está en curso y se ocultó del despacho.`, type: 'success' } }));
                        }
                        
                        // Si era una ruta nueva (no borrador), limpiar de la lista global
                        const assignedIds = ordersToSave.map(p => p.id);
                        this.pedidos = this.pedidos.filter(p => !assignedIds.includes(p.id));
                        
                        window.dispatchEvent(new CustomEvent('notify', { 
                            detail: { title: 'Éxito', message: 'Estado actualizado correctamente.', type: 'success' } 
                        }));
                    }
                } catch (e) {
                    window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: e.message, type: 'error' } }));
                } finally {
                    dom.saving = false;
                }
            },

            async deleteRoute(dom, isForActiveRoute = false) {
                const routeId = isForActiveRoute ? dom.activeRouteId : dom.routeId;
                const ordersToLiberate = isForActiveRoute ? (dom.activeOrders || []) : (dom.assignedOrders || []);

                if (!routeId) return;

                window.dispatchEvent(new CustomEvent('open-confirm', {
                    detail: {
                        title: 'ELIMINAR RUTA',
                        message: '¿Estás seguro de eliminar esta ruta? Los pedidos volverán a estar pendientes en la lista global.',
                        callback: async () => {
                            dom.saving = true;
                            try {
                                const response = await fetch(`${this.baseUrl}/rutas/${routeId}`, {
                                    method: 'DELETE',
                                    headers: { 
                                        'Accept': 'application/json',
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                                    }
                                });
                                
                                const data = await response.json();
                                
                                if (data.success) {
                                    if (isForActiveRoute) {
                                        dom.activeRouteId = null;
                                        dom.activeRouteStatus = 'nuevo';
                                        dom.routeStatus = 'nuevo';
                                        dom.activeOrders = [];
                                        dom.planningRouteStatus = 'nuevo';
                                        dom.routeId = null;
                                    } else {
                                        dom.saved = false;
                                        dom.routeId = null;
                                        dom.routeStatus = 'nuevo';
                                        dom.planningRouteStatus = 'nuevo';
                                        dom.assignedOrders = [];
                                        dom.activeRouteStatus = 'nuevo';
                                        dom.activeRouteId = null;
                                        dom.activeOrders = [];
                                    }
                                    
                                    ordersToLiberate.forEach(p => {
                                        if (!this.pedidos.find(op => op.id === p.id)) {
                                            this.pedidos.push({ ...p, assigned: false });
                                        }
                                    });
                                    
                                    window.dispatchEvent(new CustomEvent('notify', { 
                                        detail: { title: 'Ruta Eliminada', message: 'Los pedidos han sido liberados correctamente.', type: 'info' } 
                                    }));
                                } else {
                                    throw new Error(data.message || 'Error al eliminar la ruta');
                                }
                            } catch (e) {
                                window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: e.message, type: 'error' } }));
                            } finally {
                                dom.saving = false;
                            }
                        }
                    }
                }));
            },

            depurarDuplicados() {
                const assignedIds = new Set();
                this.domiciliarios.forEach(d => {
                    (d.assignedOrders || []).forEach(p => assignedIds.add(p.id));
                    (d.activeOrders || []).forEach(p => assignedIds.add(p.id));
                });
                
                const initialCount = this.pedidos.length;
                this.pedidos = this.pedidos.filter(p => !assignedIds.has(p.id));
                const cleanedCount = initialCount - this.pedidos.length;
                
                window.dispatchEvent(new CustomEvent('notify', { 
                    detail: { 
                        title: 'Depuración Completada', 
                        message: cleanedCount > 0 ? `Se eliminaron ${cleanedCount} pedidos duplicados de la lista de pendientes.` : 'No se encontraron pedidos duplicados.', 
                        type: 'success' 
                    } 
                }));
            },

            movePedidoToDom(pedido, sourceDom, targetDomId) {
                const targetDom = this.domiciliarios.find(d => d.id == targetDomId);
                if (!targetDom) return;
                
                // Remover del origen
                sourceDom.assignedOrders = sourceDom.assignedOrders.filter(p => p.id !== pedido.id);
                
                // Agregar al destino
                if (!targetDom.assignedOrders) targetDom.assignedOrders = [];
                targetDom.assignedOrders.push(pedido);
                
                window.dispatchEvent(new CustomEvent('notify', { 
                    detail: { title: 'Pedido Movido', message: `Pedido reasignado a ${targetDom.nombre}.`, type: 'success' } 
                }));
            },

            getAbbreviation(name) {
                if (!name) return '??';
                const n = name.toLowerCase();
                if (n.includes('tipo 1')) return 'T1';
                if (n.includes('tipo 2')) return 'T2';
                if (n.includes('tipo 3')) return 'T3';
                if (n.includes('frambuesa')) return 'FbR';
                if (n.includes('manzana royal')) return 'Mr';
                if (n.includes('manzana verde')) return 'Mv';
                if (n.includes('naranja')) return 'Nrnj';
                if (n.includes('arándano')) return 'Arnd';
                if (n.includes('fresa')) return 'Frs';
                if (n.includes('mora')) return 'Mra';
                
                // Fallback: Tomar iniciales de palabras significativas
                return name.split(' ')
                    .filter(w => w.length > 2)
                    .map(w => w[0].toUpperCase())
                    .join('') || name.substring(0, 3).toUpperCase();
            },

            getRouteMessage(dom) {
                // Obtener todos los pedidos únicos asignados o activos de la ruta para el conductor preservando su orden
                const uniqueOrders = [];
                const seenIds = new Set();
                [...(dom.assignedOrders || []), ...(dom.activeOrders || [])].forEach(p => {
                    if (p && p.id && !seenIds.has(p.id)) {
                        seenIds.add(p.id);
                        uniqueOrders.push(p);
                    }
                });
                const orders = uniqueOrders;

                // 1. Calcular Resumen de Productos (Cajas)
                const productSummary = {};
                orders.forEach(p => {
                    p.detalles?.forEach(d => {
                        const name = d.producto?.nombre || d.producto?.nombre_producto || 'Producto';
                        const label = d.producto?.codigo || this.getAbbreviation(name);
                        productSummary[label] = (productSummary[label] || 0) + (parseInt(d.cantidad) || 0);
                    });
                });
                
                const summaryText = Object.entries(productSummary)
                    .map(([abbr, qty]) => `${qty} (${abbr})`)
                    .join(', ') + '.';

                const totalCajas = orders.reduce((sum, p) => sum + (parseInt(p.total_cajas) || 0), 0);

                // 2. Construir Detalles de Pedidos
                let detailsText = '';
                orders.forEach((p, index) => {
                    const totalPagar = `$${new Intl.NumberFormat('es-CO', { maximumFractionDigits: 0 }).format(p.total_pagar)}`;
                    const dcto = p.descuento ? `\n Dcto.: -${p.descuento}` : '';
                    const obs = p.observaciones || p.observacion_entrega ? `\n*NOTA: ${p.observaciones || p.observacion_entrega}*` : '';
                    
                    // Incluir nombre de quien recibe si es diferente al cliente o es regalo
                    let recipient = '';
                    const esRegalo = p.es_regalo === true || p.es_regalo === 1 || p.es_regalo === '1' || String(p.es_regalo).toLowerCase() === 'true';
                    const destNombre = p.destinatario_final_nombre || p.destinatario_nombre || '';
                    const clienteNombre = p.cliente?.nombre_completo || '';
                    
                    if (esRegalo) {
                        recipient = `\n *🎁 REGALO PARA: ${(destNombre || clienteNombre || 'ALGUIEN ESPECIAL').toUpperCase()}*`;
                        if (p.destinatario_final_telefono || p.destinatario_telefono) {
                            recipient += ` (${p.destinatario_final_telefono || p.destinatario_telefono})`;
                        }
                        if (p.requiere_bolsa_regalo === true || p.requiere_bolsa_regalo === 1 || p.requiere_bolsa_regalo === '1' || String(p.requiere_bolsa_regalo).toLowerCase() === 'true') {
                            recipient += `\n *🛍️ EMPAQUE:* BOLSA DE REGALO`;
                        }
                        let souvenirsList = [];
                        let pSouvenirs = p.souvenirs;
                        if (typeof pSouvenirs === 'string') {
                            try { pSouvenirs = JSON.parse(pSouvenirs); } catch(e) { pSouvenirs = []; }
                        }
                        if (Array.isArray(pSouvenirs) && pSouvenirs.length > 0) {
                            pSouvenirs.forEach(sid => {
                                const found = this.souvenirs.find(s => s.id == sid);
                                if (found) souvenirsList.push(found.nombre.toUpperCase());
                            });
                        }
                        if (souvenirsList.length > 0) {
                            recipient += `\n *✨ ADICIONALES:* ${souvenirsList.join(', ')}`;
                        }
                        if (p.mensaje_regalo && p.mensaje_regalo.trim()) {
                            recipient += `\n *💌 MENSAJE:* "${p.mensaje_regalo.trim()}"`;
                        }
                    } else if (destNombre && destNombre.trim().toUpperCase() !== clienteNombre.trim().toUpperCase()) {
                        recipient = `\n *ENTREGAR A: ${destNombre.toUpperCase()}*`;
                        if (p.destinatario_final_telefono || p.destinatario_telefono) {
                            recipient += ` (Tel: ${p.destinatario_final_telefono || p.destinatario_telefono})`;
                        }
                    }
                    
                    const address = p.direccion?.direccion || 'Sin Dirección';
                    const apto = p.direccion?.detalles ? ` (${p.direccion.detalles})` : '';
                    detailsText += `\n*${p.cliente?.nombre_completo} (${address}${apto})*${recipient}: \n`;
                    p.detalles?.forEach(d => {
                        const prodName = d.producto?.nombre || d.producto?.nombre_producto || 'Producto';
                        const isObsequio = parseFloat(d.precio_unitario_venta || 0) === 0;
                        detailsText += `\n ${d.cantidad} ${prodName}${isObsequio ? ' (Obsequio)' : ''}`;
                    });
                    const payMethod = p.metodo_pago ? ` (${p.metodo_pago.toUpperCase()})` : '';
                    detailsText += `\n Domicilio${dcto}\n *Total a Pagar: ${totalPagar}*${payMethod}\n${obs}\n ------------------------------------------------------`;
                });

                let message = (this.waTemplates.asignacion_ruta || "Hola {domiciliario}, esta es la ruta asignada con un total de {total_cajas},\n{resumen_productos}\n Repartidas de la siguiente forma:\n{detalles_pedidos}\n\n{url_ruta}")
                    .replace(/{domiciliario}/g, dom.nombre)
                    .replace(/{fecha}/g, this.formatFriendlyDate(this.selectedDate))
                    .replace(/{cantidad_pedidos}/g, orders.length || 0)
                    .replace(/{total_cajas}/g, `${totalCajas} Cajas`)
                    .replace(/{resumen_productos}/g, summaryText)
                    .replace(/{detalles_pedidos}/g, detailsText)
                    .replace(/{url_ruta}/g, `${this.baseUrl}/app/domiciliario/${dom.id}`);
                
                return message;
            },

            notifyDomiciliario(dom) {
                if (!dom.telefono) return;
                const message = this.getRouteMessage(dom);
                window.open(`https://api.whatsapp.com/send?phone=57${dom.telefono.replace(/\D/g, '')}&text=${encodeURIComponent(message)}`, '_blank');
            },

            async copyRouteMessage(dom) {
                const message = this.getRouteMessage(dom);
                try {
                    await navigator.clipboard.writeText(message);
                    window.dispatchEvent(new CustomEvent('notify', { 
                        detail: { title: 'Ruta Copiada', message: 'La ruta ha sido copiada al portapapeles.', type: 'success' } 
                    }));
                } catch (err) {
                    console.error('Error al copiar:', err);
                    window.dispatchEvent(new CustomEvent('notify', { 
                        detail: { title: 'Error', message: 'No se pudo copiar la ruta.', type: 'error' } 
                    }));
                }
            },

            resendConfirmation(pedido) {
                window.dispatchEvent(new CustomEvent('open-confirm', {
                    detail: {
                        title: 'REENVIAR',
                        message: '¿Seguro que desea reenviar la confirmación por WhatsApp?',
                        callback: () => {
                            let recipientLine = '';
                            const esRegalo = pedido.es_regalo === true || pedido.es_regalo === 1 || pedido.es_regalo === '1' || String(pedido.es_regalo).toLowerCase() === 'true';
                            const destNombre = pedido.destinatario_final_nombre || pedido.destinatario_nombre || '';
                            const clienteNombre = pedido.cliente?.nombre_completo || '';

                            if (esRegalo) {
                                recipientLine = `\n🎁 *Regalo para:* ${destNombre || clienteNombre}`;
                                const destPhone = pedido.destinatario_final_telefono || pedido.destinatario_telefono || '';
                                if (destPhone) {
                                    recipientLine += ` (${destPhone})`;
                                }
                                if (pedido.requiere_bolsa_regalo === true || pedido.requiere_bolsa_regalo === 1 || pedido.requiere_bolsa_regalo === '1' || String(pedido.requiere_bolsa_regalo).toLowerCase() === 'true') {
                                    recipientLine += `\n🛍️ *Empaque:* Bolsa de regalo`;
                                }
                                let souvenirsList = [];
                                let pSouvenirs = pedido.souvenirs;
                                if (typeof pSouvenirs === 'string') {
                                    try { pSouvenirs = JSON.parse(pSouvenirs); } catch(e) { pSouvenirs = []; }
                                }
                                if (Array.isArray(pSouvenirs) && pSouvenirs.length > 0) {
                                    pSouvenirs.forEach(sid => {
                                        const found = this.souvenirs.find(s => s.id == sid);
                                        if (found) souvenirsList.push(found.nombre);
                                    });
                                }
                                if (souvenirsList.length > 0) {
                                    recipientLine += `\n✨ *Adicionales:* ${souvenirsList.join(', ')}`;
                                }
                                if (pedido.mensaje_regalo && pedido.mensaje_regalo.trim()) {
                                    recipientLine += `\n💌 *Mensaje:* "${pedido.mensaje_regalo.trim()}"`;
                                }
                            } else if (destNombre && destNombre.trim().toLowerCase() !== clienteNombre.trim().toLowerCase()) {
                                recipientLine = `\n👤 *Recibe:* ${destNombre}`;
                                const destPhone = pedido.destinatario_final_telefono || pedido.destinatario_telefono || '';
                                if (destPhone) {
                                    recipientLine += ` (${destPhone})`;
                                }
                            }

                            const address = pedido.direccion?.direccion || '';
                            const apto = pedido.direccion?.detalles ? ` (${pedido.direccion.detalles})` : '';

                            let message = (this.waTemplates.confirmacion_cliente || "Hola {cliente}, pedido #{orden}")
                                .replace(/{cliente}/g, pedido.cliente?.nombre_completo || '')
                                .replace(/{orden}/g, pedido.codigo_seguimiento || '')
                                .replace(/{fecha}/g, this.formatFriendlyDate(pedido.fecha_entrega_programada))
                                .replace(/{total}/g, '$' + new Intl.NumberFormat('es-CO').format(pedido.total_pagar))
                                .replace(/{costo_domicilio}/g, '$' + new Intl.NumberFormat('es-CO').format(pedido.costo_domicilio))
                                .replace(/{direccion}/g, `${address}${apto}${recipientLine}`)
                                .replace(/{detalles}/g, pedido.detalles?.map(d => {
                                    const isObsequio = parseFloat(d.precio_unitario_venta || 0) === 0;
                                    const name = d.producto?.nombre || d.producto?.nombre_producto || '';
                                    return `- ${d.cantidad}x ${name}${isObsequio ? ' (Obsequio)' : ''}`;
                                }).join('\n') || '');
                            const phone = pedido.cliente?.telefono?.replace(/\D/g, '');
                            if (phone) window.open(`https://api.whatsapp.com/send?phone=57${phone}&text=${encodeURIComponent(message)}`, '_blank');
                        }
                    }
                }));
            },

            getUniqueZones(dom) {
                if (!dom) return [];
                const zoneIds = [...new Set(dom.assignedOrders.map(p => p.direccion?.zona?.id || p.direccion?.tarifa_zona_id).filter(id => id))];
                return this.zonas.filter(z => zoneIds.includes(z.id));
            },

            getZoneColor(id) {
                const colors = ['#6366F1', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316', '#14B8A6', '#D946EF', '#84CC16', '#3B82F6'];
                return colors[id % colors.length];
            },

            initiateSwap(dom) {
                if (this.swappingDomId === null) {
                    this.swappingDomId = dom.id;
                    window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Intercambio', message: `Selecciona otro para intercambiar con ${dom.nombre}`, type: 'info' } }));
                } else if (this.swappingDomId === dom.id) {
                    this.swappingDomId = null;
                } else {
                    const domA = this.domiciliarios.find(d => d.id === this.swappingDomId);
                    if (domA) {
                        const temp = [...domA.assignedOrders];
                        domA.assignedOrders = [...dom.assignedOrders];
                        dom.assignedOrders = temp;
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Cruce Exitoso', message: 'Rutas intercambiadas.', type: 'success' } }));
                        if (this.activeTab === 'map') this.updateMapMarkers();
                    }
                    this.swappingDomId = null;
                }
            },

            async bulkResetStatus(customIds = null) {
                const ids = customIds || this.selectedPendingIds;
                if (ids.length === 0) return;
                
                const callback = async () => {
                    try {
                        const response = await fetch(`${this.baseUrl}/pedidos/bulk-status`, {
                            method: 'POST',
                            headers: { 
                                'Content-Type': 'application/json', 
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                            },
                            body: JSON.stringify({ 
                                ids: ids, 
                                estado: 'confirmado'
                            })
                        });
                        
                        const data = await response.json();
                        if (data.success || response.ok) {
                            // Actualizar localmente los pedidos que volvieron a confirmado
                            ids.forEach(id => {
                                // Buscar en domiciliarios y remover
                                this.domiciliarios.forEach(d => {
                                    d.assignedOrders = (d.assignedOrders || []).filter(p => p.id != id);
                                    d.activeOrders = (d.activeOrders || []).filter(p => p.id != id);
                                    if (d.assignedOrders.length === 0 && d.activeOrders.length === 0) {
                                        d.saved = false;
                                        d.routeId = null;
                                        d.activeRouteId = null;
                                        d.routeStatus = 'nuevo';
                                    }
                                });
                                // Asegurar que vuelvan a estar en la lista de pedidos pendientes si no están
                                if (!this.pedidos.find(p => p.id == id)) {
                                    const p = this.pedidos.find(p => p.id == id);
                                    if (p) p.assigned = false;
                                }
                            });

                            window.dispatchEvent(new CustomEvent('notify', { 
                                detail: { title: 'Éxito', message: 'Pedidos actualizados correctamente.', type: 'success' } 
                            }));
                        } else {
                            throw new Error(data.message || 'Error al actualizar');
                        }
                    } catch (e) {
                        window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: e.message, type: 'error' } }));
                    }
                };

                if (customIds) {
                    await callback();
                } else {
                    window.dispatchEvent(new CustomEvent('open-confirm', {
                        detail: {
                            title: 'RESETEAR ESTADO',
                            message: `¿Estás seguro de resetear ${ids.length} pedidos a estado CONFIRMADO? Se eliminarán de cualquier ruta asignada.`,
                            callback: callback
                        }
                    }));
                }
            },

            revertToConfirmed(p) {
                window.dispatchEvent(new CustomEvent('open-confirm', {
                    detail: {
                        title: 'REGRESAR A PENDIENTES',
                        message: `¿Seguro que desea retirar el pedido #${p.codigo_seguimiento} de la ruta de ${p.dom_nombre}? Volverá a estar disponible para nueva asignación.`,
                        callback: () => this.bulkResetStatus([p.id])
                    }
                }));
            },

            async forceCompleteRoute(dom, normalizationDate = null) {
                let targetDate = normalizationDate || this.getLocalISODate(0);
                // Limpiar si viene con hora (espacio o T)
                targetDate = targetDate.split('T')[0].split(' ')[0];
                
                const dateParts = targetDate.split('-');
                const months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
                const formattedDate = dateParts.length === 3 
                    ? `${dateParts[2]}/${months[parseInt(dateParts[1])-1]}/${dateParts[0]}`
                    : targetDate;

                const title = normalizationDate ? 'NORMALIZACIÓN (FECHA ANTERIOR)' : 'FINALIZAR RUTA';
                const message = `¿Confirmas que la ruta de ${dom.nombre} se entregó el día ${formattedDate}? Se actualizarán todos los pedidos con esa fecha.`;

                window.dispatchEvent(new CustomEvent('open-confirm', {
                    detail: {
                        title: title,
                        message: message,
                        callback: async () => {
                            try {
                                dom.saving = true;
                                const routeId = dom.activeRouteId || dom.routeId;
                                if (!routeId) throw new Error('No se encontró el ID de la ruta para finalizar.');

                                const response = await fetch(`${this.baseUrl}/rutas/${routeId}/finalizar`, {
                                    method: 'POST',
                                    headers: { 
                                        'Content-Type': 'application/json', 
                                        'Accept': 'application/json', 
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}' 
                                    },
                                    body: JSON.stringify({ fecha: normalizationDate })
                                });
                                
                                if (response.ok) {
                                    const completedRouteId = dom.activeRouteId || dom.routeId;
                                    if (completedRouteId) {
                                        if (!dom.rutas) dom.rutas = [];
                                        const routeIndex = dom.rutas.findIndex(r => r.id == completedRouteId);
                                        if (routeIndex !== -1) {
                                            dom.rutas[routeIndex].estado = 'finalizada';
                                            dom.rutas[routeIndex].pedidos = dom.activeOrders.map(p => ({ ...p, estado: 'entregado' }));
                                        } else {
                                            dom.rutas.push({
                                                id: completedRouteId,
                                                estado: 'finalizada',
                                                fecha_programada: normalizationDate || this.selectedDate,
                                                pedidos: dom.activeOrders.map(p => ({ ...p, estado: 'entregado' }))
                                            });
                                        }
                                    }

                                    dom.routeStatus = 'nuevo';
                                    dom.activeRouteStatus = 'nuevo';
                                    dom.planningRouteStatus = 'nuevo';
                                    dom.activeOrders = [];
                                    dom.assignedOrders = [];
                                    dom.activeRouteId = null;
                                    dom.routeId = null;
                                    dom.saved = false;

                                    window.dispatchEvent(new CustomEvent('notify', { 
                                        detail: { title: 'Éxito', message: 'Ruta y pedidos finalizados correctamente.', type: 'success' } 
                                    }));
                                } else {
                                    throw new Error('Error al finalizar ruta');
                                }
                            } catch (e) {
                                window.dispatchEvent(new CustomEvent('notify', { detail: { title: 'Error', message: e.message, type: 'error' } }));
                            } finally { dom.saving = false; }
                        }
                    }
                }));
            },

            bulkAssignToDom(domId) {
                if (!domId) return;
                const dom = this.domiciliarios.find(d => d.id == domId);
                if (!dom) return;

                const idsToAssign = [...this.selectedPendingIds];
                const ordersToAssign = [];
                
                idsToAssign.forEach(id => {
                    // Usar == para evitar problemas de tipo string vs int
                    const p = this.pedidos.find(pedido => pedido.id == id);
                    if (p) {
                        p.assigned = true;
                        ordersToAssign.push(p);
                    }
                });
                
                if (ordersToAssign.length > 0) {
                    // Reasignar para disparar reactividad
                    dom.assignedOrders = [...dom.assignedOrders, ...ordersToAssign];
                    dom.saved = false;
                    
                    // Forzar actualización global de domiciliarios por si acaso
                    this.domiciliarios = [...this.domiciliarios];
                    
                    this.selectedPendingIds = [];
                    if (this.activeTab === 'map') this.updateMapMarkers();
                    
                    window.dispatchEvent(new CustomEvent('notify', { 
                        detail: { 
                            title: 'Asignación Masiva', 
                            message: `${ordersToAssign.length} pedidos asignados correctamente a ${dom.nombre}.`, 
                            type: 'success' 
                        } 
                    }));
                }
            },

            reassignPedido(pedido, fromDom, targetDomId) {
                if (!targetDomId) return;
                const targetDom = this.domiciliarios.find(d => d.id == targetDomId);
                if (!targetDom) return;
                
                fromDom.assignedOrders = fromDom.assignedOrders.filter(p => p.id !== pedido.id);
                targetDom.assignedOrders = [...targetDom.assignedOrders, pedido];
                targetDom.saved = false;
                fromDom.saved = false;
                
                window.dispatchEvent(new CustomEvent('notify', { 
                    detail: { title: 'Pedido Movido', message: `Pedido #${pedido.codigo_seguimiento} movido a ${targetDom.nombre}.`, type: 'info' } 
                }));
                
                if (this.activeTab === 'map') this.updateMapMarkers();
            },

            moveOrder(dom, index, direction) {
                const newIndex = index + direction;
                if (newIndex < 0 || newIndex >= dom.assignedOrders.length) return;
                const orders = [...dom.assignedOrders];
                const temp = orders[index];
                orders.splice(index, 1);
                orders.splice(newIndex, 0, temp);
                dom.assignedOrders = orders;
                dom.saved = false;
            },

            copyPedidoInfo(pedido) {
                const text = `*PEDIDO #${pedido.codigo_seguimiento}*\n` +
                             `*Cliente:* ${pedido.cliente?.nombre_completo}\n` +
                             `*Dirección:* ${pedido.direccion?.direccion}${pedido.direccion?.detalles ? ' (' + pedido.direccion.detalles + ')' : ''}\n` +
                             `*Barrio:* ${pedido.direccion?.barrio}\n` +
                             `*Total:* $${new Intl.NumberFormat('es-CO').format(pedido.total_pagar)}`;
                
                navigator.clipboard.writeText(text).then(() => {
                    window.dispatchEvent(new CustomEvent('notify', { 
                        detail: { title: 'Copiado', message: 'Información del pedido copiada al portapapeles.', type: 'info' } 
                    }));
                });
            }
        };
    }
</script>
@endpush
@endsection