@extends('layouts.dashboard.construction')

@section('main-header')
    <header
        class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md shadow-sm flex items-center justify-between px-8 z-40 border-b border-slate-100 dark:border-slate-800">
        <div class="flex items-center space-x-6">
            <div class="flex items-center space-x-2 text-slate-900 dark:text-white font-['Manrope'] text-sm font-semibold">
                <span class="material-symbols-outlined text-primary">apartment</span>
                <span>Residencial Altavista</span>
                <span class="material-symbols-outlined text-xs">expand_more</span>
            </div>
            <div class="h-4 w-px bg-slate-200"></div>
            <div class="relative">
                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-400">
                    <span class="material-symbols-outlined text-sm">search</span>
                </span>
                <input
                    class="bg-surface-container-low border-none rounded-full pl-10 pr-4 py-1.5 text-sm focus:ring-2 focus:ring-primary/20 w-64 transition-all duration-300"
                    placeholder="Buscar unidad o residente..." type="text" />
            </div>
        </div>
        <div class="flex items-center space-x-4">
            <button class="p-2 text-slate-500 hover:text-slate-900 transition-all duration-300 relative">
                <span class="material-symbols-outlined">notifications</span>
                <span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full border-2 border-white"></span>
            </button>
            <button class="p-2 text-slate-500 hover:text-slate-900 transition-all duration-300">
                <span class="material-symbols-outlined">apps</span>
            </button>
        </div>
    </header>
@endsection

@section('main-content')
    <div class="p-8 max-w-7xl mx-auto space-y-8">
        <!-- Page Header & View Toggle -->
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div>
                <h2 class="font-headline text-3xl font-bold text-on-surface tracking-tight">Avance de Obra</h2>
                <p class="text-on-surface-variant font-body mt-1">Seguimiento detallado por unidad y frente de
                    trabajo</p>
            </div>
            <div class="flex items-center bg-surface-container-low p-1 rounded-xl">
                <button
                    class="flex items-center px-4 py-2 bg-white shadow-sm rounded-lg text-sm font-semibold text-primary transition-all">
                    <span class="material-symbols-outlined mr-2 text-sm">grid_view</span> Matriz
                </button>
                <button
                    class="flex items-center px-4 py-2 text-sm font-medium text-on-surface-variant hover:text-primary transition-all">
                    <span class="material-symbols-outlined mr-2 text-sm">format_list_bulleted</span> Tabla
                </button>
                <button
                    class="flex items-center px-4 py-2 text-sm font-medium text-on-surface-variant hover:text-primary transition-all">
                    <span class="material-symbols-outlined mr-2 text-sm">view_module</span> Tarjetas
                </button>
            </div>
        </div>
        <!-- Bento Summary Grid -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div
                class="md:col-span-2 bg-gradient-to-br from-primary to-primary-container p-6 rounded-full text-white shadow-lg overflow-hidden relative group">
                <div class="absolute top-0 right-0 p-8 opacity-10 group-hover:scale-110 transition-transform duration-500">
                    <span class="material-symbols-outlined text-9xl">analytics</span>
                </div>
                <p class="text-primary-fixed/80 text-sm font-semibold uppercase tracking-wider">Avance Global</p>
                <div class="mt-2 flex items-baseline space-x-2">
                    <span class="text-5xl font-bold font-headline">64.2%</span>
                    <span class="text-green-400 flex items-center text-sm font-medium">
                        <span class="material-symbols-outlined text-xs mr-1">trending_up</span> +2.4% esta semana
                    </span>
                </div>
                <div class="mt-6 w-full bg-white/10 h-3 rounded-full overflow-hidden">
                    <div class="bg-white h-full rounded-full" style="width: 64.2%"></div>
                </div>
                <div class="mt-4 flex justify-between text-xs text-primary-fixed/70 font-medium">
                    <span>42 Unidades Terminadas</span>
                    <span>128 en Proceso</span>
                </div>
            </div>
            <div
                class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex flex-col justify-between border border-outline-variant/10">
                <div>
                    <div class="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center text-orange-600 mb-4">
                        <span class="material-symbols-outlined">warning</span>
                    </div>
                    <p class="text-on-surface-variant text-sm font-medium">Unidades con Retraso</p>
                    <p class="text-3xl font-bold font-headline mt-1 text-on-surface">12</p>
                </div>
                <p class="text-xs text-error font-medium flex items-center">
                    Requiere atención inmediata
                </p>
            </div>
            <div
                class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex flex-col justify-between border border-outline-variant/10">
                <div>
                    <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center text-blue-600 mb-4">
                        <span class="material-symbols-outlined">home</span>
                    </div>
                    <p class="text-on-surface-variant text-sm font-medium">Entregas Próximas</p>
                    <p class="text-3xl font-bold font-headline mt-1 text-on-surface">08</p>
                </div>
                <p class="text-xs text-on-surface-variant font-medium">Para el cierre de mes</p>
            </div>
        </div>

        <div class="bg-surface-container-lowest rounded-3xl shadow-sm border border-outline-variant/10 p-6 space-y-6">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-6">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 rounded-2xl bg-primary/5 flex items-center justify-center text-primary">
                        <span class="material-symbols-outlined text-2xl">event_upcoming</span>
                    </div>
                    <div>
                        <h3 class="font-headline text-xl font-bold">Cronograma de Hitos del Proyecto</h3>
                        <p class="text-xs text-on-surface-variant font-medium">Visualización diaria granular por etapa
                            constructiva</p>
                    </div>
                </div>
                <div class="flex items-center bg-slate-100 p-1 rounded-xl">
                    <button
                        class="px-4 py-1.5 text-xs font-bold bg-white text-primary rounded-lg shadow-sm border border-slate-200">Vista
                        Semanal</button>
                    <button
                        class="px-4 py-1.5 text-xs font-semibold text-slate-500 hover:text-primary transition-all">Quincenal</button>
                    <button
                        class="px-4 py-1.5 text-xs font-semibold text-slate-500 hover:text-primary transition-all">Mensual</button>
                </div>
            </div>
            <div class="overflow-x-auto no-scrollbar rounded-2xl border border-outline-variant/10 bg-white">
                <div class="min-w-[1200px]">
                    <div class="gantt-container bg-surface-container-low/30 border-b border-outline-variant/10">
                        <div
                            class="p-6 border-r border-outline-variant/10 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest flex items-center">
                            Actividad / Etapa
                        </div>
                        <div class="gantt-days-grid text-center">
                            <div class="border-r border-outline-variant/10 py-4">
                                <span class="text-[10px] font-bold text-primary block">SEMANA 32</span>
                                <div class="grid grid-cols-7 mt-2 px-2 text-[9px] font-medium text-slate-400">
                                    <span>L</span><span>M</span><span>M</span><span>J</span><span>V</span><span>S</span><span>D</span>
                                </div>
                            </div>
                            <div class="border-r border-outline-variant/10 py-4">
                                <span class="text-[10px] font-bold text-primary block">SEMANA 33</span>
                                <div class="grid grid-cols-7 mt-2 px-2 text-[9px] font-medium text-slate-400">
                                    <span>L</span><span>M</span><span>M</span><span>J</span><span>V</span><span>S</span><span>D</span>
                                </div>
                            </div>
                            <div class="border-r border-outline-variant/10 py-4">
                                <span class="text-[10px] font-bold text-primary block">SEMANA 34</span>
                                <div class="grid grid-cols-7 mt-2 px-2 text-[9px] font-medium text-slate-400">
                                    <span>L</span><span>M</span><span>M</span><span>J</span><span>V</span><span>S</span><span>D</span>
                                </div>
                            </div>
                            <div class="border-r border-outline-variant/10 py-4 bg-primary/5">
                                <span class="text-[10px] font-bold text-primary block">HOY (SEM 35)</span>
                                <div class="grid grid-cols-7 mt-2 px-2 text-[9px] font-bold text-primary">
                                    <span>L</span><span>M</span><span
                                        class="text-white bg-primary rounded-full w-4 h-4 flex items-center justify-center mx-auto">M</span><span>J</span><span>V</span><span>S</span><span>D</span>
                                </div>
                            </div>
                            <div class="border-r border-outline-variant/10 py-4">
                                <span class="text-[10px] font-bold text-slate-400 block">SEMANA 36</span>
                                <div class="grid grid-cols-7 mt-2 px-2 text-[9px] font-medium text-slate-400">
                                    <span>L</span><span>M</span><span>M</span><span>J</span><span>V</span><span>S</span><span>D</span>
                                </div>
                            </div>
                            <div class="border-r border-outline-variant/10 py-4">
                                <span class="text-[10px] font-bold text-slate-400 block">SEMANA 37</span>
                                <div class="grid grid-cols-7 mt-2 px-2 text-[9px] font-medium text-slate-400">
                                    <span>L</span><span>M</span><span>M</span><span>J</span><span>V</span><span>S</span><span>D</span>
                                </div>
                            </div>
                            <div class="py-4">
                                <span class="text-[10px] font-bold text-slate-400 block">SEMANA 38</span>
                                <div class="grid grid-cols-7 mt-2 px-2 text-[9px] font-medium text-slate-400">
                                    <span>L</span><span>M</span><span>M</span><span>J</span><span>V</span><span>S</span><span>D</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="divide-y divide-outline-variant/5">
                        <div class="gantt-container hover:bg-slate-50 transition-colors group">
                            <div class="p-6 border-r border-outline-variant/10">
                                <h4 class="text-xs font-bold text-primary">Cimentación</h4>
                                <p class="text-[10px] text-slate-500 mt-0.5">Viena Elite - Grupo 1</p>
                            </div>
                            <div class="relative flex items-center px-4 overflow-hidden">
                                <div
                                    class="absolute inset-0 grid grid-cols-[repeat(49,minmax(0,1fr))] pointer-events-none opacity-20">
                                    <div class="border-r  border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-600 h-full opacity-40"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-600 h-full opacity-40"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-600 h-full opacity-40"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-600 h-full opacity-40"></div>
                                </div>
                                <div class="task-bar p-1 w-[25%] bg-green-500 text-white shadow-lg" style="left: 2%;">
                                    <div class="daily-fill bg-green-600/30" style="width: 100%"></div>
                                    <span class="text-[9px] font-bold z-10 flex items-center"><span
                                            class="material-symbols-outlined text-[12px] mr-1">check_circle</span> 100%
                                        Completado</span>
                                </div>
                            </div>
                        </div>
                        <div class="gantt-container hover:bg-slate-50 transition-colors group">
                            <div class="p-6 border-r border-outline-variant/10">
                                <h4 class="text-xs font-bold text-primary">Estructura</h4>
                                <p class="text-[10px] text-slate-500 mt-0.5">Viena Elite - Grupo 1</p>
                            </div>
                            <div class="relative flex items-center px-4 overflow-hidden">
                                <div
                                    class="absolute inset-0 grid grid-cols-[repeat(49,minmax(0,1fr))] pointer-events-none opacity-20">
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-300 h-full"></div>
                                    <div class="border-r border-slate-600 h-full opacity-40"></div>
                                </div>
                                <div class="task-bar w-[40%] bg-primary text-white shadow-lg" style="left: 27%;">
                                    <div class="daily-fill bg-primary-container" style="width: 85%"></div>
                                    <span class="text-[9px] font-bold z-10">85% Progreso Diario • Est. Terminación
                                        Viernes</span>
                                </div>
                                <div
                                    class="absolute left-[47.5%] top-0 bottom-0 w-px border-l-2 border-dashed border-primary/40 z-0">
                                </div>
                            </div>
                        </div>
                        <div class="gantt-container hover:bg-slate-50 transition-colors group">
                            <div class="p-6 border-r border-outline-variant/10">
                                <h4 class="text-xs font-bold text-primary">Cimentación</h4>
                                <p class="text-[10px] text-slate-500 mt-0.5">Praga Plus - Grupo 2</p>
                            </div>
                            <div class="relative flex items-center px-4 overflow-hidden">
                                <div class="task-bar w-[35%] bg-error text-white shadow-lg" style="left: 15%;">
                                    <div class="daily-fill bg-error-container" style="width: 60%"></div>
                                    <span class="text-[9px] font-bold z-10 flex items-center"><span
                                            class="material-symbols-outlined text-[12px] mr-1">warning</span> 60% • Retraso
                                        en Excavación</span>
                                </div>
                            </div>
                        </div>
                        <div class="gantt-container hover:bg-slate-50 transition-colors group">
                            <div class="p-6 border-r border-outline-variant/10">
                                <h4 class="text-xs font-bold text-primary">Acabados</h4>
                                <p class="text-[10px] text-slate-500 mt-0.5">Viena Elite - Grupo 1</p>
                            </div>
                            <div class="relative flex items-center px-4 overflow-hidden">
                                <div class="task-bar w-[20%] bg-slate-100 text-slate-400 border border-slate-200"
                                    style="left: 70%;">
                                    <span class="text-[9px] font-bold z-10 uppercase tracking-tighter">Planificado
                                        Octubre</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap items-center justify-between gap-4 pt-4 border-t border-outline-variant/10">
                <div class="flex items-center gap-6">
                    <div class="flex items-center space-x-2 text-[10px] font-semibold">
                        <span class="w-2.5 h-2.5 rounded-full bg-green-500"></span>
                        <span class="text-on-surface-variant">Ejecutado</span>
                    </div>
                    <div class="flex items-center space-x-2 text-[10px] font-semibold">
                        <div class="w-8 h-2.5 rounded-full bg-primary overflow-hidden">
                            <div class="bg-primary-container h-full w-[60%]"></div>
                        </div>
                        <span class="text-on-surface-variant">Progreso Real vs Estimado</span>
                    </div>
                    <div class="flex items-center space-x-2 text-[10px] font-semibold text-error">
                        <span class="material-symbols-outlined text-xs">warning</span>
                        <span>Desviación &gt; 3 días</span>
                    </div>
                </div>
                <div class="text-[10px] text-on-surface-variant font-medium">
                    Última actualización: Hoy, 10:45 AM
                </div>
            </div>
        </div>
        <!-- Main Content Area: Visual Matrix -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
            <!-- Left: Matrix View -->
            <div class="lg:col-span-2 space-y-6">
                <div class="flex items-center justify-between">
                    <h3 class="font-headline text-lg font-bold">Distribución por Lote</h3>
                    <div class="flex space-x-2">
                        <div class="flex items-center space-x-2 text-xs text-on-surface-variant">
                            <span class="w-3 h-3 rounded-sm bg-slate-200"></span> <span>Pendiente</span>
                        </div>
                        <div class="flex items-center space-x-2 text-xs text-on-surface-variant">
                            <span class="w-3 h-3 rounded-sm bg-primary/40"></span> <span>En proceso</span>
                        </div>
                        <div class="flex items-center space-x-2 text-xs text-on-surface-variant">
                            <span class="w-3 h-3 rounded-sm bg-primary"></span> <span>Terminado</span>
                        </div>
                    </div>
                </div>
                <!-- Visual Matrix Grid -->
                <div class="grid grid-cols-5 sm:grid-cols-10 gap-2">
                    <!-- Repeated items for visualization -->
                    <!-- Row 1 -->
                    <div
                        class="aspect-square bg-primary rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:ring-2 ring-primary/30 transition-all shadow-sm">
                        101</div>
                    <div
                        class="aspect-square bg-primary rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:ring-2 ring-primary/30 transition-all shadow-sm">
                        102</div>
                    <div
                        class="aspect-square bg-primary rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:ring-2 ring-primary/30 transition-all shadow-sm">
                        103</div>
                    <div
                        class="aspect-square bg-primary/80 rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:ring-2 ring-primary/30 transition-all shadow-sm">
                        104</div>
                    <div
                        class="aspect-square bg-primary/70 rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:ring-2 ring-primary/30 transition-all shadow-sm">
                        105</div>
                    <div
                        class="aspect-square bg-primary/60 rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:ring-2 ring-primary/30 transition-all shadow-sm">
                        106</div>
                    <div
                        class="aspect-square bg-error/80 rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:ring-2 ring-error/30 transition-all shadow-sm">
                        107</div>
                    <div
                        class="aspect-square bg-primary/40 rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:ring-2 ring-primary/30 transition-all shadow-sm">
                        108</div>
                    <div
                        class="aspect-square bg-primary/40 rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:ring-2 ring-primary/30 transition-all shadow-sm">
                        109</div>
                    <div
                        class="aspect-square bg-primary/30 rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer hover:ring-2 ring-primary/30 transition-all shadow-sm">
                        110</div>
                    <!-- Row 2 -->
                    <div
                        class="aspect-square bg-slate-200 rounded-xl flex items-center justify-center text-[10px] font-bold text-slate-500 cursor-pointer">
                        201</div>
                    <div
                        class="aspect-square bg-slate-200 rounded-xl flex items-center justify-center text-[10px] font-bold text-slate-500 cursor-pointer">
                        202</div>
                    <div
                        class="aspect-square bg-primary/90 border-2 border-primary-container ring-4 ring-primary-fixed rounded-xl flex items-center justify-center text-[10px] font-bold text-white cursor-pointer transition-all shadow-md">
                        203</div>
                    <div
                        class="aspect-square bg-slate-200 rounded-xl flex items-center justify-center text-[10px] font-bold text-slate-500 cursor-pointer">
                        204</div>
                    <div
                        class="aspect-square bg-slate-200 rounded-xl flex items-center justify-center text-[10px] font-bold text-slate-500 cursor-pointer">
                        205</div>
                    <div
                        class="aspect-square bg-slate-200 rounded-xl flex items-center justify-center text-[10px] font-bold text-slate-500 cursor-pointer">
                        206</div>
                    <div
                        class="aspect-square bg-slate-200 rounded-xl flex items-center justify-center text-[10px] font-bold text-slate-500 cursor-pointer">
                        207</div>
                    <div
                        class="aspect-square bg-slate-200 rounded-xl flex items-center justify-center text-[10px] font-bold text-slate-500 cursor-pointer">
                        208</div>
                    <div
                        class="aspect-square bg-slate-200 rounded-xl flex items-center justify-center text-[10px] font-bold text-slate-500 cursor-pointer">
                        209</div>
                    <div
                        class="aspect-square bg-slate-200 rounded-xl flex items-center justify-center text-[10px] font-bold text-slate-500 cursor-pointer">
                        210</div>
                    <!-- More rows... -->
                </div>
                <!-- Unit Data Table (Simplified) -->
                <div
                    class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden border border-outline-variant/10">
                    <table class="w-full text-left">
                        <thead>
                            <tr
                                class="bg-surface-container-low text-[11px] font-bold text-on-surface-variant uppercase tracking-widest">
                                <th class="px-6 py-4">Lote / Unidad</th>
                                <th class="px-6 py-4">Prototipo</th>
                                <th class="px-6 py-4">Etapa Actual</th>
                                <th class="px-6 py-4">Progreso</th>
                                <th class="px-6 py-4">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-outline-variant/10 text-sm">
                            <tr class="hover:bg-surface-container-low/50 transition-colors cursor-pointer group">
                                <td class="px-6 py-5 font-bold text-primary">Lote 101</td>
                                <td class="px-6 py-5 text-on-surface-variant">Viena Elite</td>
                                <td class="px-6 py-5 font-medium">Acabados Interiores</td>
                                <td class="px-6 py-5">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-16 h-1.5 bg-slate-100 rounded-full">
                                            <div class="h-full bg-primary rounded-full" style="width: 100%"></div>
                                        </div>
                                        <span class="font-bold text-xs">100%</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-green-50 text-green-700">Terminado</span>
                                </td>
                            </tr>
                            <tr
                                class="hover:bg-surface-container-low/50 transition-colors cursor-pointer group bg-primary-fixed/10">
                                <td class="px-6 py-5 font-bold text-primary">Lote 203</td>
                                <td class="px-6 py-5 text-on-surface-variant">Praga Plus</td>
                                <td class="px-6 py-5 font-medium">Cimentación</td>
                                <td class="px-6 py-5">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-16 h-1.5 bg-slate-100 rounded-full">
                                            <div class="h-full bg-primary rounded-full" style="width: 85%"></div>
                                        </div>
                                        <span class="font-bold text-xs">85%</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-50 text-blue-700">En
                                        Proceso</span>
                                </td>
                            </tr>
                            <tr class="hover:bg-surface-container-low/50 transition-colors cursor-pointer group">
                                <td class="px-6 py-5 font-bold text-primary">Lote 107</td>
                                <td class="px-6 py-5 text-on-surface-variant">Viena Elite</td>
                                <td class="px-6 py-5 font-medium">Instalaciones</td>
                                <td class="px-6 py-5">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-16 h-1.5 bg-slate-100 rounded-full">
                                            <div class="h-full bg-error rounded-full" style="width: 42%"></div>
                                        </div>
                                        <span class="font-bold text-xs">42%</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-red-50 text-red-700">Con
                                        Retraso</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- Right: Detailed Unit View Panel -->
            <div
                class="bg-surface-container-lowest rounded-full shadow-lg border border-outline-variant/20 overflow-hidden flex flex-col h-full sticky top-24">
                <div class="p-6 bg-surface-container-low border-b border-outline-variant/10">
                    <div class="flex justify-between items-start">
                        <div>
                            <div class="flex items-center space-x-2">
                                <h4 class="text-2xl font-bold font-headline text-primary">Lote 203</h4>
                                <span
                                    class="text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 bg-primary text-white rounded-md">Venta</span>
                            </div>
                            <p class="text-sm font-medium text-on-surface-variant mt-1">Prototipo Praga Plus • Mza
                                4</p>
                        </div>
                        <button class="text-on-surface-variant hover:text-primary">
                            <span class="material-symbols-outlined">close</span>
                        </button>
                    </div>
                </div>
                <div class="p-6 space-y-8 overflow-y-auto max-h-[600px] no-scrollbar">
                    <!-- Progress Summary -->
                    <div class="space-y-4">
                        <div class="flex justify-between text-sm font-bold">
                            <span>Avance General</span>
                            <span class="text-primary">85%</span>
                        </div>
                        <div class="h-3 bg-slate-100 rounded-full overflow-hidden">
                            <div class="h-full bg-gradient-to-r from-primary to-primary-container rounded-full"
                                style="width: 85%"></div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-surface-container-low p-3 rounded-xl">
                                <p class="text-[10px] font-bold text-on-surface-variant uppercase">Est. Entrega</p>
                                <p class="text-sm font-bold mt-1">15 Oct 2023</p>
                            </div>
                            <div class="bg-surface-container-low p-3 rounded-xl">
                                <p class="text-[10px] font-bold text-on-surface-variant uppercase">Responsable</p>
                                <p class="text-sm font-bold mt-1">Ing. García</p>
                            </div>
                        </div>
                    </div>
                    <!-- Task Families Checklist -->
                    <div class="space-y-4">
                        <h5 class="text-xs font-bold text-on-surface-variant uppercase tracking-widest">Progreso
                            por Etapa</h5>
                        <!-- Family: Cimentación (Active) -->
                        <div class="space-y-3">
                            <div class="flex items-center justify-between group cursor-pointer">
                                <div class="flex items-center space-x-3">
                                    <span class="material-symbols-outlined text-primary text-lg"
                                        style="font-variation-settings: 'FILL' 1;">check_circle</span>
                                    <span class="text-sm font-bold">Cimentación</span>
                                </div>
                                <span class="text-xs font-medium text-on-surface-variant">95%</span>
                            </div>
                            <div class="ml-8 space-y-2 border-l-2 border-outline-variant/30 pl-4 py-1">
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-on-surface">Excavación y relleno</span>
                                    <span class="material-symbols-outlined text-green-600 text-sm">done</span>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-on-surface">Cimentación profunda</span>
                                    <span class="material-symbols-outlined text-green-600 text-sm">done</span>
                                </div>
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-on-surface-variant italic font-medium">Vaciado de losa</span>
                                    <span class="text-[10px] font-bold text-primary">En curso</span>
                                </div>
                            </div>
                        </div>
                        <!-- Family: Estructura -->
                        <div class="flex items-center justify-between opacity-50">
                            <div class="flex items-center space-x-3">
                                <span class="material-symbols-outlined text-outline-variant text-lg">circle</span>
                                <span class="text-sm font-medium">Muros y Cerramientos</span>
                            </div>
                            <span class="text-xs font-medium">0%</span>
                        </div>
                        <!-- Family: Instalaciones -->
                        <div class="flex items-center justify-between opacity-50">
                            <div class="flex items-center space-x-3">
                                <span class="material-symbols-outlined text-outline-variant text-lg">circle</span>
                                <span class="text-sm font-medium">Instalaciones</span>
                            </div>
                            <span class="text-xs font-medium">0%</span>
                        </div>
                    </div>
                    <!-- Photo Evidence -->
                    <div class="space-y-4">
                        <div class="flex justify-between items-center">
                            <h5 class="text-xs font-bold text-on-surface-variant uppercase tracking-widest">
                                Evidencia Fotográfica</h5>
                            <button class="text-primary text-xs font-bold flex items-center">
                                <span class="material-symbols-outlined text-sm mr-1">add_a_photo</span> Subir
                            </button>
                        </div>
                        <div class="grid grid-cols-2 gap-2">
                            <div class="relative rounded-xl overflow-hidden aspect-video group shadow-sm">
                                <img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                                    data-alt="close-up of fresh concrete foundation being poured at a construction site with sunlight"
                                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuBaNka_Ei82vZ6d2bGpY9_iDUTdJUigGej5lqUgLOxW1v6btQ-ChViW9CTvIGcqK3qAHBzguwXVwNyUu5rMJ6hjatVvaQEcj-FPRV9uemrLstsbkX_pX_s5nCgwfUH8G8c54O9iZw6K1QbJBnMe7BQFJ69dHu4tVM4PXkDyXvHD7b8wQlz4vKOB6VMMicUVAQgDVLp2Hj6HTJnCaJ6ED_xJKAQVvT1bC2Awch3qvwibIsjW3TwJ7w4orHxfWsAxLarKDj72yHY4OMAZ" />
                                <div class="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-all">
                                </div>
                            </div>
                            <div class="relative rounded-xl overflow-hidden aspect-video group shadow-sm">
                                <img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                                    data-alt="construction site overview with scaffolding and structural steel beams under a bright clear sky"
                                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuB0Q08OT5rUy_cd3pJfxqum5HOrTzZHGoJvFvqeNhiV-S5LJZspIIrGmEkKOuR98bsL8lTOqbzC0cDAn0yTC_C0XWO5vf9pX09HEjSXHz-4DAtkOpYGtJeJ8HXAnDJ3_hnQtbtn3inlgRrZZmMo-OnP_lcfUL8AY9AyEVvMIsd-I7I5b7erpMwEtWTndge0MykeQ7HpBdFRf7IjBT69twcYpv1XO1BMP0Tv8yTGvyVWY_oRjhJh7unme9LsHSaJ3A9UtAXTOlbmnO6p" />
                                <div class="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-all">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-6 border-t border-outline-variant/10 bg-white">
                    <button
                        class="w-full py-3 bg-primary text-white rounded-xl font-bold text-sm shadow-md hover:shadow-lg transition-all active:scale-95">
                        Guardar Reporte de Avance
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection