@extends('layouts.panel-template', ['section' => 'projects'])

@php
    $items = [
        [
            'key' => 'general',
            'label' => 'General',
            'icon' => '',
        ],
        [
            'key' => 'avance',
            'label' => 'Avance',
            'icon' => '',
        ],
        [
            'key' => 'viviendas',
            'label' => 'Viviendas',
            'icon' => '',
        ],
        [
            'key' => 'presupuesto',
            'label' => 'Presupuesto',
            'icon' => '',
        ],
        [
            'key' => 'personal',
            'label' => 'Personal',
            'icon' => '',
        ],
        [
            'key' => 'destajos',
            'label' => 'Destajos',
            'icon' => '',
        ],
    ];
    $active = '';
@endphp

@section('main-content')
    <div x-data="{ activeTab: 'general' }" x-on:tds-tabs-changed.window="activeTab = $event.detail.key" id="project-tabs-wrapper"
        class="p-6 lg:p-10 space-y-8">
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
            <div>
                <nav class="flex items-center gap-2 text-xs font-medium text-on-surface-variant mb-2">
                    <span>OBRAS</span>
                    <span class="material-symbols-outlined text-[10px]">chevron_right</span>
                    <span class="text-primary font-bold uppercase tracking-wider">Residencial Altavista</span>
                </nav>
                <h1 class="text-4xl font-extrabold tracking-tight text-primary">Residencial Altavista</h1>
                <p class="text-on-surface-variant mt-1">Carretera Nacional Km 254, Monterrey, N.L.</p>
            </div>
            <div class="flex gap-3">
                <button
                    class="px-6 py-2.5 bg-surface-container-lowest text-primary ghost-border rounded-xl font-semibold flex items-center gap-2 hover:bg-surface-container-low transition-all">
                    <span class="material-symbols-outlined text-lg">file_download</span>
                    <span>Exportar Reporte</span>
                </button>
                <button
                    class="px-6 py-2.5 bg-primary text-white rounded-xl font-semibold flex items-center gap-2 shadow-lg shadow-primary/20">
                    <span class="material-symbols-outlined text-lg">add</span>
                    <span>Nueva Vivienda</span>
                </button>
            </div>
        </div>
        <livewire:tds::tabs :items="$items" active="general"></livewire:tds::tabs>

        <div class="space-y-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div
                    class="md:col-span-2 bg-primary text-white rounded-[2rem] p-8 relative overflow-hidden flex flex-col justify-between shadow-xl">
                    <div class="relative z-10">
                        <span class="text-slate-400 text-sm font-semibold uppercase tracking-widest">Avance Global</span>
                        <div class="flex items-baseline gap-4 mt-2">
                            <span class="text-6xl font-bold font-headline">64%</span>
                            <span class="text-emerald-400 flex items-center text-sm font-bold">
                                <span class="material-symbols-outlined text-sm mr-1">trending_up</span>
                                +4.2% este mes
                            </span>
                        </div>
                    </div>
                    <div class="mt-8 relative z-10">
                        <div class="w-full h-2.5 bg-white/10 rounded-full overflow-hidden">
                            <div class="h-full bg-white rounded-full" style="width: 64%"></div>
                        </div>
                        <div class="flex justify-between mt-3 text-xs text-slate-400">
                            <span>Iniciada: Oct 2023</span>
                            <span>Entrega: Dic 2024</span>
                        </div>
                    </div>
                    <div class="absolute top-0 right-0 w-48 h-48 bg-white/5 rounded-full -mr-24 -mt-24"></div>
                </div>
                <div
                    class="bg-surface-container-lowest rounded-[2rem] p-6 ghost-border flex flex-col justify-between shadow-sm">
                    <div class="flex justify-between items-start">
                        <div class="w-12 h-12 bg-tertiary-fixed rounded-xl flex items-center justify-center">
                            <span class="material-symbols-outlined text-on-tertiary-fixed">payments</span>
                        </div>
                        <span class="text-xs font-bold text-red-500 bg-red-50 px-2 py-1 rounded-md">-2.5% vs Plan</span>
                    </div>
                    <div class="mt-4">
                        <span class="text-on-surface-variant text-sm font-medium">Real vs Presupuesto</span>
                        <div class="text-2xl font-bold mt-1 text-primary">$42.8M <span
                                class="text-sm font-normal text-on-surface-variant">/ $120M</span></div>
                    </div>
                </div>
                <div
                    class="bg-surface-container-lowest rounded-[2rem] p-6 ghost-border flex flex-col justify-between shadow-sm">
                    <div class="flex justify-between items-start">
                        <div class="w-12 h-12 bg-secondary-fixed rounded-xl flex items-center justify-center">
                            <span class="material-symbols-outlined text-on-secondary-fixed">home_work</span>
                        </div>
                        <span class="text-xs font-bold text-primary bg-primary-fixed px-2 py-1 rounded-md">86
                            Unidades</span>
                    </div>
                    <div class="mt-4">
                        <span class="text-on-surface-variant text-sm font-medium">Viviendas Activas</span>
                        <div class="text-2xl font-bold mt-1 text-primary">42 <span
                                class="text-sm font-normal text-on-surface-variant">en Proceso</span></div>
                    </div>
                </div>
            </div>
            <section x-show="activeTab === 'general'" x-transition>

            </section>
            <section x-show="activeTab === 'avance'" x-transition>
                <div class="bg-surface-container-lowest rounded-[1.5rem] ghost-border overflow-hidden">
                    <div class="p-6 flex flex-wrap items-center justify-between gap-4 border-b border-outline-variant/10">
                        <div>
                            <h2 class="text-lg font-bold text-primary">Tabla de Avance por Fases</h2>
                            <p class="text-xs text-on-surface-variant">Seguimiento detallado de las etapas constructivas
                                globales</p>
                        </div>
                        <div class="flex gap-2">
                            <button
                                class="px-4 py-2 bg-surface-container-low text-primary text-sm font-semibold rounded-lg flex items-center gap-2 border border-outline-variant/20 hover:bg-surface-container-high transition-colors">
                                <span class="material-symbols-outlined text-lg">calendar_month</span>
                                Cronograma
                            </button>
                            <button
                                class="px-4 py-2 bg-primary text-white text-sm font-semibold rounded-lg flex items-center gap-2 shadow-sm">
                                <span class="material-symbols-outlined text-lg">update</span>
                                Actualizar Todo
                            </button>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead class="bg-surface-container-low/50">
                                <tr>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Fase de Construcción</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Estatus Operativo</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Progreso</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Hitos Clave</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-outline-variant/10">
                                <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                    <td class="px-6 py-6">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-10 h-10 rounded-lg bg-emerald-100 flex items-center justify-center text-emerald-700">
                                                <span class="material-symbols-outlined">foundation</span>
                                            </div>
                                            <div>
                                                <div class="font-bold text-primary">Cimentación</div>
                                                <div class="text-xs text-on-surface-variant">Losa, zapata y drenaje</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <span
                                            class="inline-flex items-center gap-1.5 px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs font-bold">
                                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-600"></span>
                                            Completado
                                        </span>
                                    </td>
                                    <td class="px-6 py-6 w-64">
                                        <div class="flex items-center gap-3">
                                            <div class="flex-1 h-2 bg-emerald-100 rounded-full">
                                                <div class="h-full bg-emerald-500 rounded-full" style="width: 100%"></div>
                                            </div>
                                            <span class="text-sm font-bold text-emerald-700">100%</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <div class="space-y-1">
                                            <div class="flex items-center gap-2 text-xs font-medium text-on-surface">
                                                <span
                                                    class="material-symbols-outlined text-emerald-500 text-sm">check_circle</span>
                                                Cierre: 12 Mar 2024
                                            </div>
                                            <div
                                                class="text-[10px] text-on-surface-variant bg-surface-container-low px-2 py-0.5 rounded w-fit italic">
                                                Sin retrasos registrados</div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <button class="p-2 hover:bg-primary-fixed rounded-lg transition-all text-primary">
                                            <span class="material-symbols-outlined">history</span>
                                        </button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                    <td class="px-6 py-6">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-700">
                                                <span class="material-symbols-outlined">apartment</span>
                                            </div>
                                            <div>
                                                <div class="font-bold text-primary">Estructura</div>
                                                <div class="text-xs text-on-surface-variant">Muros, columnas y losas de
                                                    entrepiso</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <span
                                            class="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold animate-pulse">
                                            <span class="w-1.5 h-1.5 rounded-full bg-blue-600"></span>
                                            En Ejecución
                                        </span>
                                    </td>
                                    <td class="px-6 py-6 w-64">
                                        <div class="flex items-center gap-3">
                                            <div class="flex-1 h-2 bg-slate-100 rounded-full">
                                                <div class="h-full bg-blue-600 rounded-full" style="width: 78%"></div>
                                            </div>
                                            <span class="text-sm font-bold text-primary">78%</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <div class="space-y-1">
                                            <div class="flex items-center gap-2 text-xs font-medium text-on-surface">
                                                <span
                                                    class="material-symbols-outlined text-blue-500 text-sm">schedule</span>
                                                Meta: 30 Jun 2024
                                            </div>
                                            <div
                                                class="text-[10px] text-blue-600 font-bold bg-blue-50 px-2 py-0.5 rounded w-fit">
                                                Vaciado de losa 4 en curso</div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <button class="p-2 hover:bg-primary-fixed rounded-lg transition-all text-primary">
                                            <span class="material-symbols-outlined">edit</span>
                                        </button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                    <td class="px-6 py-6">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-10 h-10 rounded-lg bg-orange-100 flex items-center justify-center text-orange-700">
                                                <span class="material-symbols-outlined">plumbing</span>
                                            </div>
                                            <div>
                                                <div class="font-bold text-primary">Instalaciones</div>
                                                <div class="text-xs text-on-surface-variant">Hidráulica, eléctrica y gas
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <span
                                            class="inline-flex items-center gap-1.5 px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-xs font-bold">
                                            <span class="w-1.5 h-1.5 rounded-full bg-orange-600"></span>
                                            En Pausa
                                        </span>
                                    </td>
                                    <td class="px-6 py-6 w-64">
                                        <div class="flex items-center gap-3">
                                            <div class="flex-1 h-2 bg-slate-100 rounded-full">
                                                <div class="h-full bg-orange-500 rounded-full" style="width: 34%"></div>
                                            </div>
                                            <span class="text-sm font-bold text-primary">34%</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <div class="space-y-1">
                                            <div class="flex items-center gap-2 text-xs font-medium text-error">
                                                <span class="material-symbols-outlined text-sm">warning</span>
                                                Retraso: 12 días
                                            </div>
                                            <div
                                                class="text-[10px] text-error font-bold bg-error-container/20 px-2 py-0.5 rounded w-fit uppercase">
                                                Falta suministro de tubería</div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <button class="p-2 hover:bg-primary-fixed rounded-lg transition-all text-primary">
                                            <span class="material-symbols-outlined">priority_high</span>
                                        </button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                    <td class="px-6 py-6">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-10 h-10 rounded-lg bg-slate-200 flex items-center justify-center text-slate-600">
                                                <span class="material-symbols-outlined">format_paint</span>
                                            </div>
                                            <div>
                                                <div class="font-bold text-primary">Acabados</div>
                                                <div class="text-xs text-on-surface-variant">Pintura, pisos y carpintería
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <span
                                            class="inline-flex items-center gap-1.5 px-3 py-1 bg-slate-100 text-slate-500 rounded-full text-xs font-bold">
                                            <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
                                            No Iniciado
                                        </span>
                                    </td>
                                    <td class="px-6 py-6 w-64">
                                        <div class="flex items-center gap-3">
                                            <div class="flex-1 h-2 bg-slate-100 rounded-full">
                                                <div class="h-full bg-slate-300 rounded-full" style="width: 0%"></div>
                                            </div>
                                            <span class="text-sm font-bold text-slate-400">0%</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <div class="space-y-1">
                                            <div
                                                class="flex items-center gap-2 text-xs font-medium text-on-surface-variant">
                                                <span class="material-symbols-outlined text-sm">event</span>
                                                Inicio estimado: 15 Ago
                                            </div>
                                            <div
                                                class="text-[10px] text-on-surface-variant bg-surface-container-low px-2 py-0.5 rounded w-fit">
                                                Esperando fin de obra negra</div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <button
                                            class="p-2 hover:bg-primary-fixed rounded-lg transition-all text-slate-300">
                                            <span class="material-symbols-outlined">lock</span>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div
                        class="px-6 py-4 bg-surface-container-low/30 border-t border-outline-variant/10 flex justify-between items-center">
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 rounded-full bg-blue-500"></div>
                            <span class="text-xs font-semibold text-primary">Actualizado hoy a las 09:42 AM</span>
                        </div>
                        <div class="flex gap-4">
                            <button class="text-sm font-bold text-primary hover:underline flex items-center gap-1">
                                <span class="material-symbols-outlined text-lg">file_download</span> Descargar Log
                            </button>
                            <button class="text-sm font-bold text-primary hover:underline flex items-center gap-1">
                                <span class="material-symbols-outlined text-lg">visibility</span> Detalle Técnico
                            </button>
                        </div>
                    </div>
                </div>
                <div class="bg-surface-container-lowest rounded-[1.5rem] ghost-border overflow-hidden">
                    <div class="p-6 flex flex-wrap items-center justify-between gap-4 border-b border-outline-variant/10">
                        <div>
                            <h2 class="text-lg font-bold text-primary">Línea de Tiempo del Proyecto</h2>
                            <p class="text-xs text-on-surface-variant">Visualización cronológica de fases y duración
                                planeada</p>
                        </div>
                        <div class="flex gap-2">
                            <button
                                class="px-4 py-2 bg-primary text-white text-sm font-semibold rounded-lg flex items-center gap-2 shadow-sm">
                                <span class="material-symbols-outlined text-lg">calendar_month</span>
                                Cronograma
                            </button>
                            <button
                                class="px-4 py-2 bg-surface-container-low text-primary text-sm font-semibold rounded-lg flex items-center gap-2 border border-outline-variant/20 hover:bg-surface-container-high transition-colors">
                                <span class="material-symbols-outlined text-lg">list_alt</span>
                                Vista de Tabla
                            </button>
                        </div>
                    </div>
                    <div class="p-8 overflow-x-auto min-h-[400px] relative">
                        <div class="min-w-[1000px] space-y-12 pb-10">
                            <div class="flex border-b border-outline-variant/10 pb-4 mb-8">
                                <div class="w-48 shrink-0"></div>
                                <div
                                    class="flex-1 grid grid-cols-12 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest text-center">
                                    <div>Ene</div>
                                    <div>Feb</div>
                                    <div>Mar</div>
                                    <div>Abr</div>
                                    <div>May</div>
                                    <div>Jun</div>
                                    <div>Jul</div>
                                    <div>Ago</div>
                                    <div>Sep</div>
                                    <div>Oct</div>
                                    <div>Nov</div>
                                    <div>Dic</div>
                                </div>
                            </div>
                            <div class="space-y-10 relative">
                                <div class="absolute left-48 top-0 bottom-0 w-[1px] bg-slate-200/50"></div>
                                <div
                                    class="absolute left-[calc(12rem+((100%-12rem)*0.45))] top-0 bottom-0 w-[2px] bg-red-400 z-10 flex flex-col items-center">
                                    <div class="bg-red-400 text-white text-[9px] font-bold px-1.5 py-0.5 rounded -mt-2">HOY
                                    </div>
                                </div>
                                <div class="flex items-center group">
                                    <div class="w-48 shrink-0 pr-6">
                                        <div class="font-bold text-sm text-primary">Cimentación</div>
                                        <div class="text-[10px] text-on-surface-variant">Oct 2023 - Mar 2024</div>
                                    </div>
                                    <div class="flex-1 relative h-6">
                                        <div
                                            class="absolute left-0 w-[30%] h-full bg-emerald-100 rounded-full border border-emerald-200/50 flex items-center px-4 overflow-hidden">
                                            <div class="absolute inset-0 bg-emerald-500 w-full"></div>
                                            <span class="relative z-10 text-[10px] font-bold text-white uppercase">100%
                                                Completado</span>
                                        </div>
                                        <div class="absolute left-[30%] -translate-x-1/2 top-1/2 -translate-y-1/2 z-20">
                                            <div
                                                class="w-6 h-6 bg-emerald-500 rounded-full border-2 border-white flex items-center justify-center shadow-md">
                                                <span class="material-symbols-outlined text-white text-xs"
                                                    style="font-variation-settings: 'FILL' 1;">check</span>
                                            </div>
                                            <div
                                                class="absolute top-full mt-2 left-1/2 -translate-x-1/2 whitespace-nowrap text-[9px] font-medium text-emerald-600">
                                                Finalizado 12 Mar</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center group">
                                    <div class="w-48 shrink-0 pr-6">
                                        <div class="font-bold text-sm text-primary">Estructura</div>
                                        <div class="text-[10px] text-on-surface-variant">Feb 2024 - Jul 2024</div>
                                    </div>
                                    <div class="flex-1 relative h-6">
                                        <div
                                            class="absolute left-[20%] w-[50%] h-full bg-blue-100 rounded-full border border-blue-200/50 flex items-center px-4 overflow-hidden">
                                            <div class="absolute inset-0 bg-blue-600" style="width: 78%"></div>
                                            <span
                                                class="relative z-10 text-[10px] font-bold text-blue-900 group-hover:text-white transition-colors uppercase">78%
                                                Progreso</span>
                                        </div>
                                        <div class="absolute left-[55%] -translate-x-1/2 top-1/2 -translate-y-1/2 z-20">
                                            <div
                                                class="w-6 h-6 bg-white rounded-full border-2 border-blue-600 flex items-center justify-center shadow-md">
                                                <span class="material-symbols-outlined text-blue-600 text-xs"
                                                    style="font-variation-settings: 'FILL' 1;">update</span>
                                            </div>
                                            <div
                                                class="absolute top-full mt-1 left-1/2 -translate-x-1/2 whitespace-nowrap text-[9px] font-medium text-blue-600">
                                                Meta: 30 Jun</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center group">
                                    <div class="w-48 shrink-0 pr-6">
                                        <div class="font-bold text-sm text-primary">Instalaciones</div>
                                        <div class="text-[10px] text-on-surface-variant">Abr 2024 - Sep 2024</div>
                                    </div>
                                    <div class="flex-1 relative h-6">
                                        <div
                                            class="absolute left-[35%] w-[35%] h-full bg-orange-100 rounded-full border border-orange-200/50 flex items-center px-4 overflow-hidden">
                                            <div class="absolute inset-0 bg-orange-500" style="width: 34%"></div>
                                            <span
                                                class="relative z-10 text-[10px] font-bold text-orange-900 group-hover:text-white transition-colors uppercase">34%
                                                Pausado</span>
                                        </div>
                                        <div class="absolute left-[70%] -translate-x-1/2 top-1/2 -translate-y-1/2 z-20">
                                            <div
                                                class="w-6 h-6 bg-red-100 rounded-full border-2 border-red-500 flex items-center justify-center shadow-md">
                                                <span class="material-symbols-outlined text-red-600 text-xs"
                                                    style="font-variation-settings: 'FILL' 1;">warning</span>
                                            </div>
                                            <div
                                                class="absolute top-full mt-1 left-1/2 -translate-x-1/2 whitespace-nowrap text-[9px] font-medium text-red-600">
                                                Retraso: 12 días</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center group">
                                    <div class="w-48 shrink-0 pr-6">
                                        <div class="font-bold text-sm text-primary">Acabados</div>
                                        <div class="text-[10px] text-on-surface-variant">Jul 2024 - Dic 2024</div>
                                    </div>
                                    <div class="flex-1 relative h-6">
                                        <div
                                            class="absolute left-[60%] w-[35%] h-full bg-slate-100 rounded-full border border-slate-200/50 flex items-center px-4 overflow-hidden">
                                            <div class="absolute inset-0 bg-slate-300" style="width: 0%"></div>
                                            <span class="relative z-10 text-[10px] font-bold text-slate-500 uppercase">No
                                                Iniciado</span>
                                        </div>
                                        <div class="absolute left-[95%] -translate-x-1/2 top-1/2 -translate-y-1/2 z-20">
                                            <div
                                                class="w-6 h-6 bg-white rounded-full border-2 border-slate-300 flex items-center justify-center shadow-md">
                                                <span class="material-symbols-outlined text-slate-400 text-xs">flag</span>
                                            </div>
                                            <div
                                                class="absolute top-full mt-1 left-1/2 -translate-x-1/2 whitespace-nowrap text-[9px] font-medium text-slate-500">
                                                Entrega: 15 Dic</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        class="px-6 py-4 bg-surface-container-low/30 border-t border-outline-variant/10 flex justify-between items-center">
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 rounded-full bg-blue-500"></div>
                            <span class="text-xs font-semibold text-primary">Actualizado hoy a las 09:42 AM</span>
                        </div>
                        <div class="flex gap-4">
                            <button class="text-sm font-bold text-primary hover:underline flex items-center gap-1">
                                <span class="material-symbols-outlined text-lg">file_download</span> Descargar Cronograma
                            </button>
                            <button class="text-sm font-bold text-primary hover:underline flex items-center gap-1">
                                <span class="material-symbols-outlined text-lg">settings_backup_restore</span> Simular
                                Avance
                            </button>
                        </div>
                    </div>
                </div>
            </section>
            <section x-show="activeTab === 'viviendas'" x-transition>
                <div class="bg-surface-container-lowest rounded-full ghost-border overflow-hidden">
                    <!-- Table Filters -->
                    <div class="p-6 flex flex-wrap items-center justify-between gap-4 border-b border-outline-variant/10">
                        <div class="flex gap-2">
                            <button
                                class="px-4 py-2 bg-surface-container-low text-primary text-sm font-semibold rounded-lg flex items-center gap-2">
                                <span class="material-symbols-outlined text-lg">filter_list</span>
                                Filtros
                            </button>
                            <div class="h-8 w-[1px] bg-outline-variant/30 mx-2"></div>
                            <span
                                class="bg-primary text-white px-3 py-1 rounded-md text-xs font-bold self-center">Todos</span>
                            <span
                                class="text-on-surface-variant px-3 py-1 text-xs font-medium self-center cursor-pointer hover:bg-slate-50 rounded-md">En
                                Cimentación</span>
                            <span
                                class="text-on-surface-variant px-3 py-1 text-xs font-medium self-center cursor-pointer hover:bg-slate-50 rounded-md">Obra
                                Negra</span>
                        </div>
                        <div class="text-sm text-on-surface-variant">Mostrando <span class="font-bold text-primary">12 de
                                86</span> unidades</div>
                    </div>
                    <!-- Table (Generous padding as per system) -->
                    <div class="overflow-x-auto">
                        <livewire:projects.details.units />

                    </div>
                    <!-- Pagination-style footer -->
                    <div
                        class="px-6 py-4 bg-surface-container-low/30 border-t border-outline-variant/10 flex justify-between items-center">
                        <button class="text-sm font-bold text-on-surface-variant hover:text-primary disabled:opacity-50"
                            disabled="">Anterior</button>
                        <div class="flex gap-2">
                            <span
                                class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center text-xs font-bold shadow-md">1</span>
                            <span
                                class="w-8 h-8 rounded-lg hover:bg-surface-container-high flex items-center justify-center text-xs font-bold cursor-pointer">2</span>
                            <span
                                class="w-8 h-8 rounded-lg hover:bg-surface-container-high flex items-center justify-center text-xs font-bold cursor-pointer">3</span>
                        </div>
                        <button class="text-sm font-bold text-primary hover:text-primary-container">Siguiente</button>
                    </div>
                </div>
            </section>
            <section x-show="activeTab === 'presupuesto'" x-transition>
                <div class="space-y-6">
                    <div class="bg-surface-container-lowest rounded-full ghost-border overflow-hidden">
                        <div
                            class="p-6 flex flex-wrap items-center justify-between gap-4 border-b border-outline-variant/10">
                            <div class="flex gap-2">
                                <button
                                    class="px-4 py-2 bg-surface-container-low text-primary text-sm font-semibold rounded-lg flex items-center gap-2">
                                    <span class="material-symbols-outlined text-lg">filter_list</span>
                                    Filtros
                                </button>
                                <div class="h-8 w-[1px] bg-outline-variant/30 mx-2"></div>
                                <span
                                    class="bg-primary text-white px-4 py-1.5 rounded-full text-xs font-bold self-center shadow-sm">Todos</span>
                                <span
                                    class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Materiales</span>
                                <span
                                    class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Mano
                                    de Obra</span>
                                <span
                                    class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Administración</span>
                            </div>
                            <div class="text-sm text-on-surface-variant">Mostrando <span class="font-bold text-primary">15
                                    de 350</span> conceptos</div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full text-left border-collapse">
                                <thead class="bg-surface-container-low/50">
                                    <tr>
                                        <th
                                            class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                            Concepto</th>
                                        <th
                                            class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                            Categoría</th>
                                        <th
                                            class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                            Presupuestado</th>
                                        <th
                                            class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                            Real</th>
                                        <th
                                            class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                            Diferencia</th>
                                        <th
                                            class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                            Estado</th>
                                        <th
                                            class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-outline-variant/10">
                                    <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                        <td class="px-6 py-6">
                                            <div class="font-bold text-primary">Cimentación y Estructura</div>
                                            <div class="text-xs text-on-surface-variant">Fase 1: Preparación de terreno
                                            </div>
                                        </td>
                                        <td class="px-6 py-6">
                                            <span
                                                class="px-3 py-1 bg-surface-container-high rounded-md text-xs font-semibold text-primary">Materiales</span>
                                        </td>
                                        <td class="px-6 py-6 font-medium text-primary">$12,450,000</td>
                                        <td class="px-6 py-6 font-medium text-primary">$12,580,000</td>
                                        <td class="px-6 py-6">
                                            <div class="flex items-center gap-1.5 text-error font-bold">
                                                <span class="material-symbols-outlined text-sm">trending_up</span>
                                                <span>+$130,000</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-6">
                                            <div class="flex items-center gap-2">
                                                <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
                                                <span class="text-sm font-medium">Completado</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-6 text-right">
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100">
                                                <span class="material-symbols-outlined text-primary">visibility</span>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                        <td class="px-6 py-6">
                                            <div class="font-bold text-primary">Suministro de Acero Reforzado</div>
                                            <div class="text-xs text-on-surface-variant">Varilla 3/8", 1/2" y Estribos
                                            </div>
                                        </td>
                                        <td class="px-6 py-6">
                                            <span
                                                class="px-3 py-1 bg-surface-container-high rounded-md text-xs font-semibold text-primary">Materiales</span>
                                        </td>
                                        <td class="px-6 py-6 font-medium text-primary">$4,200,000</td>
                                        <td class="px-6 py-6 font-medium text-primary">$3,850,000</td>
                                        <td class="px-6 py-6">
                                            <div class="flex items-center gap-1.5 text-green-600 font-bold">
                                                <span class="material-symbols-outlined text-sm">trending_down</span>
                                                <span>-$350,000</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-6">
                                            <div class="flex items-center gap-2">
                                                <div class="w-2 h-2 rounded-full bg-blue-500"></div>
                                                <span class="text-sm font-medium">En proceso</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-6 text-right">
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100">
                                                <span class="material-symbols-outlined text-primary">visibility</span>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                        <td class="px-6 py-6">
                                            <div class="font-bold text-primary">Cuadrilla de Albañilería Grado A</div>
                                            <div class="text-xs text-on-surface-variant">Contratista Especializado</div>
                                        </td>
                                        <td class="px-6 py-6">
                                            <span
                                                class="px-3 py-1 bg-secondary-fixed rounded-md text-xs font-semibold text-on-secondary-container">Mano
                                                de Obra</span>
                                        </td>
                                        <td class="px-6 py-6 font-medium text-primary">$8,900,000</td>
                                        <td class="px-6 py-6 font-medium text-primary">$9,050,000</td>
                                        <td class="px-6 py-6">
                                            <div class="flex items-center gap-1.5 text-error font-bold">
                                                <span class="material-symbols-outlined text-sm">trending_up</span>
                                                <span>+$150,000</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-6">
                                            <div class="flex items-center gap-2">
                                                <div class="w-2 h-2 rounded-full bg-orange-400"></div>
                                                <span class="text-sm font-medium">Revisión</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-6 text-right">
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100">
                                                <span class="material-symbols-outlined text-primary">visibility</span>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-surface-container-low/30 transition-colors group border-b-0">
                                        <td class="px-6 py-6">
                                            <div class="font-bold text-primary">Seguros e Impuestos de Obra</div>
                                            <div class="text-xs text-on-surface-variant">IMSS, INFONAVIT, RC</div>
                                        </td>
                                        <td class="px-6 py-6">
                                            <span
                                                class="px-3 py-1 bg-tertiary-fixed rounded-md text-xs font-semibold text-on-tertiary-fixed">Administración</span>
                                        </td>
                                        <td class="px-6 py-6 font-medium text-primary">$2,150,000</td>
                                        <td class="px-6 py-6 font-medium text-primary">$2,150,000</td>
                                        <td class="px-6 py-6 font-bold text-on-surface-variant">
                                            $0
                                        </td>
                                        <td class="px-6 py-6">
                                            <div class="flex items-center gap-2">
                                                <div class="w-2 h-2 rounded-full bg-slate-400"></div>
                                                <span class="text-sm font-medium">Al día</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-6 text-right">
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100">
                                                <span class="material-symbols-outlined text-primary">visibility</span>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div
                            class="px-6 py-4 bg-surface-container-low/30 border-t border-outline-variant/10 flex justify-between items-center">
                            <button
                                class="text-sm font-bold text-on-surface-variant hover:text-primary disabled:opacity-50"
                                disabled="">Anterior</button>
                            <div class="flex gap-2">
                                <span
                                    class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center text-xs font-bold shadow-md">1</span>
                                <span
                                    class="w-8 h-8 rounded-lg hover:bg-surface-container-high flex items-center justify-center text-xs font-bold cursor-pointer transition-colors">2</span>
                                <span
                                    class="w-8 h-8 rounded-lg hover:bg-surface-container-high flex items-center justify-center text-xs font-bold cursor-pointer transition-colors">3</span>
                                <span
                                    class="w-8 h-8 rounded-lg hover:bg-surface-container-high flex items-center justify-center text-xs font-bold cursor-pointer transition-colors">4</span>
                            </div>
                            <button
                                class="text-sm font-bold text-primary hover:text-primary-container transition-colors">Siguiente</button>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <div class="lg:col-span-2 bg-surface-container-lowest rounded-full ghost-border p-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="font-headline font-bold text-lg text-primary">Últimos Comprobantes de Pago</h3>
                                <button class="text-xs font-bold text-primary hover:underline transition-all">Ver Histórico
                                    de Pagos</button>
                            </div>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-4 bg-surface-container-low rounded-xl">
                                    <div class="flex items-center gap-4">
                                        <div class="w-10 h-10 bg-primary/5 rounded-lg flex items-center justify-center">
                                            <span class="material-symbols-outlined text-primary">description</span>
                                        </div>
                                        <div>
                                            <div class="text-sm font-bold text-primary">Factura FE-9082 - Cemento Holcim
                                            </div>
                                            <div class="text-xs text-on-surface-variant">Pagado el 12 Abr 2024</div>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-sm font-bold text-primary">$450,230.00</div>
                                        <div class="text-[10px] text-green-600 font-bold uppercase">Confirmado</div>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between p-4 bg-surface-container-low rounded-xl">
                                    <div class="flex items-center gap-4">
                                        <div class="w-10 h-10 bg-primary/5 rounded-lg flex items-center justify-center">
                                            <span class="material-symbols-outlined text-primary">description</span>
                                        </div>
                                        <div>
                                            <div class="text-sm font-bold text-primary">Nómina Semana 15 - Personal Directo
                                            </div>
                                            <div class="text-xs text-on-surface-variant">Pagado el 10 Abr 2024</div>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-sm font-bold text-primary">$1,280,450.00</div>
                                        <div class="text-[10px] text-green-600 font-bold uppercase">Confirmado</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-surface-container-lowest rounded-full ghost-border p-6 flex flex-col">
                            <h3 class="font-headline font-bold text-lg text-primary mb-4">Alertas de Presupuesto</h3>
                            <div class="flex-1 space-y-4">
                                <div class="p-4 bg-red-50 border border-red-100 rounded-xl flex gap-3">
                                    <span class="material-symbols-outlined text-red-600"
                                        style="font-variation-settings: 'FILL' 1;">warning</span>
                                    <div>
                                        <p class="text-sm font-bold text-red-900">Exceso en Material de Acabados</p>
                                        <p class="text-xs text-red-700 mt-1">El costo del mármol importado subió un 12%
                                            sobre lo proyectado en el contrato inicial.</p>
                                    </div>
                                </div>
                                <div class="p-4 bg-orange-50 border border-orange-100 rounded-xl flex gap-3">
                                    <span class="material-symbols-outlined text-orange-600"
                                        style="font-variation-settings: 'FILL' 1;">info</span>
                                    <div>
                                        <p class="text-sm font-bold text-orange-900">Ajuste de Nómina Próximo</p>
                                        <p class="text-xs text-orange-700 mt-1">Se requiere revisión de horas extras para
                                            la fase de instalaciones eléctricas.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 flex items-start gap-2">
                                <span class="material-symbols-outlined text-slate-400 text-sm">info</span>
                                <p class="text-xs text-on-surface-variant italic">Las alertas se basan en la comparativa
                                    real vs planeación en tiempo real.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section x-show="activeTab === 'personal'" x-transition>
                <div class="bg-surface-container-lowest rounded-3xl ghost-border overflow-hidden">
                    <div class="p-6 flex flex-wrap items-center justify-between gap-4 border-b border-outline-variant/10">
                        <div class="flex gap-2">
                            <button
                                class="px-4 py-2 bg-surface-container-low text-primary text-sm font-semibold rounded-lg flex items-center gap-2">
                                <span class="material-symbols-outlined text-lg">filter_list</span>
                                Filtros
                            </button>
                            <div class="h-8 w-[1px] bg-outline-variant/30 mx-2"></div>
                            <span
                                class="bg-primary text-white px-4 py-1.5 rounded-full text-xs font-bold self-center shadow-sm">Todos</span>
                            <span
                                class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Obreros</span>
                            <span
                                class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Supervisores</span>
                            <span
                                class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Administrativos</span>
                            <span
                                class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Subcontratistas</span>
                        </div>
                        <div class="text-sm text-on-surface-variant">Mostrando <span class="font-bold text-primary">8 de
                                84</span> empleados</div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead class="bg-surface-container-low/50">
                                <tr>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Nombre</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Puesto</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Contacto</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Estado</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-center">
                                        Horas Acumuladas</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-right">
                                        Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-outline-variant/10">
                                <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                    <td class="px-6 py-5">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-9 h-9 rounded-full bg-surface-container-high flex items-center justify-center text-primary font-bold text-sm">
                                                JS</div>
                                            <div>
                                                <div class="font-bold text-primary">Juan Santillán</div>
                                                <div class="text-[10px] text-on-surface-variant uppercase tracking-tight">
                                                    ID: EMP-042</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-5">
                                        <span
                                            class="px-3 py-1 bg-surface-container-high rounded-md text-xs font-semibold text-primary">Maestro
                                            Albañil</span>
                                    </td>
                                    <td class="px-6 py-5">
                                        <div class="text-sm text-primary">juan.s@constructora.com</div>
                                        <div class="text-xs text-on-surface-variant">+52 (81) 8234-9012</div>
                                    </td>
                                    <td class="px-6 py-5">
                                        <div
                                            class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-emerald-50 text-emerald-700 rounded-full text-xs font-bold">
                                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                            Activo
                                        </div>
                                    </td>
                                    <td class="px-6 py-5 text-center font-bold text-primary">168 hrs</td>
                                    <td class="px-6 py-5 text-right">
                                        <div class="flex justify-end gap-2">
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100 text-primary">
                                                <span class="material-symbols-outlined text-xl">edit_note</span>
                                            </button>
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100 text-primary">
                                                <span class="material-symbols-outlined text-xl">more_vert</span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                    <td class="px-6 py-5">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-800 font-bold text-sm">
                                                RG</div>
                                            <div>
                                                <div class="font-bold text-primary">Roberto García</div>
                                                <div class="text-[10px] text-on-surface-variant uppercase tracking-tight">
                                                    ID: EMP-089</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-5">
                                        <span
                                            class="px-3 py-1 bg-secondary-fixed rounded-md text-xs font-semibold text-on-secondary-container">Residente
                                            de Obra</span>
                                    </td>
                                    <td class="px-6 py-5">
                                        <div class="text-sm text-primary">r.garcia@constructora.com</div>
                                        <div class="text-xs text-on-surface-variant">+52 (81) 1928-3746</div>
                                    </td>
                                    <td class="px-6 py-5">
                                        <div
                                            class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-emerald-50 text-emerald-700 rounded-full text-xs font-bold">
                                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                            Activo
                                        </div>
                                    </td>
                                    <td class="px-6 py-5 text-center font-bold text-primary">172 hrs</td>
                                    <td class="px-6 py-5 text-right">
                                        <div class="flex justify-end gap-2">
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100 text-primary">
                                                <span class="material-symbols-outlined text-xl">edit_note</span>
                                            </button>
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100 text-primary">
                                                <span class="material-symbols-outlined text-xl">more_vert</span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                    <td class="px-6 py-5">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-9 h-9 rounded-full bg-tertiary-fixed flex items-center justify-center text-on-tertiary-fixed font-bold text-sm">
                                                MC</div>
                                            <div>
                                                <div class="font-bold text-primary">Marco Contreras</div>
                                                <div class="text-[10px] text-on-surface-variant uppercase tracking-tight">
                                                    ID: SUB-012</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-5">
                                        <span
                                            class="px-3 py-1 bg-tertiary-fixed rounded-md text-xs font-semibold text-on-tertiary-fixed">Electrotécnico</span>
                                    </td>
                                    <td class="px-6 py-5">
                                        <div class="text-sm text-primary">externo@servicios.mx</div>
                                        <div class="text-xs text-on-surface-variant">+52 (81) 5566-7788</div>
                                    </td>
                                    <td class="px-6 py-5">
                                        <div
                                            class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-orange-50 text-orange-700 rounded-full text-xs font-bold">
                                            <span class="w-1.5 h-1.5 rounded-full bg-orange-400"></span>
                                            En Espera
                                        </div>
                                    </td>
                                    <td class="px-6 py-5 text-center font-bold text-primary">45 hrs</td>
                                    <td class="px-6 py-5 text-right">
                                        <div class="flex justify-end gap-2">
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100 text-primary">
                                                <span class="material-symbols-outlined text-xl">edit_note</span>
                                            </button>
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100 text-primary">
                                                <span class="material-symbols-outlined text-xl">more_vert</span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/30 transition-colors group border-b-0">
                                    <td class="px-6 py-5">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-9 h-9 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-bold text-sm">
                                                LR</div>
                                            <div>
                                                <div class="font-bold text-primary">Laura Rodríguez</div>
                                                <div class="text-[10px] text-on-surface-variant uppercase tracking-tight">
                                                    ID: EMP-015</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-5">
                                        <span
                                            class="px-3 py-1 bg-surface-container-high rounded-md text-xs font-semibold text-primary">Administrador</span>
                                    </td>
                                    <td class="px-6 py-5">
                                        <div class="text-sm text-primary">laura.r@constructora.com</div>
                                        <div class="text-xs text-on-surface-variant">+52 (81) 4433-2211</div>
                                    </td>
                                    <td class="px-6 py-5">
                                        <div
                                            class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-slate-100 text-slate-500 rounded-full text-xs font-bold">
                                            <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
                                            Inactivo
                                        </div>
                                    </td>
                                    <td class="px-6 py-5 text-center font-bold text-primary">0 hrs</td>
                                    <td class="px-6 py-5 text-right">
                                        <div class="flex justify-end gap-2">
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100 text-primary">
                                                <span class="material-symbols-outlined text-xl">edit_note</span>
                                            </button>
                                            <button
                                                class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100 text-primary">
                                                <span class="material-symbols-outlined text-xl">more_vert</span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div
                        class="px-6 py-4 bg-surface-container-low/30 border-t border-outline-variant/10 flex justify-between items-center">
                        <button class="text-sm font-bold text-on-surface-variant hover:text-primary disabled:opacity-50"
                            disabled="">Anterior</button>
                        <div class="flex gap-2">
                            <span
                                class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center text-xs font-bold shadow-md">1</span>
                            <span
                                class="w-8 h-8 rounded-lg hover:bg-surface-container-high flex items-center justify-center text-xs font-bold cursor-pointer transition-colors text-on-surface-variant">2</span>
                            <span
                                class="w-8 h-8 rounded-lg hover:bg-surface-container-high flex items-center justify-center text-xs font-bold cursor-pointer transition-colors text-on-surface-variant">3</span>
                        </div>
                        <button
                            class="text-sm font-bold text-primary hover:text-primary-container transition-colors">Siguiente</button>
                    </div>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="lg:col-span-2 bg-surface-container-lowest rounded-3xl ghost-border p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-headline font-bold text-lg text-primary">Próximos Vencimientos de Documentación
                            </h3>
                            <button class="text-xs font-bold text-primary hover:underline transition-all">Ver
                                Todos</button>
                        </div>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between p-4 bg-surface-container-low rounded-xl">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                                        <span class="material-symbols-outlined text-red-600">contact_emergency</span>
                                    </div>
                                    <div>
                                        <div class="text-sm font-bold text-primary">Certificado DC-3 - Alturas</div>
                                        <div class="text-xs text-on-surface-variant">Vence en 3 días para 5 obreros</div>
                                    </div>
                                </div>
                                <button
                                    class="px-3 py-1.5 bg-primary text-white text-[10px] font-bold rounded-lg uppercase">Renovar</button>
                            </div>
                            <div class="flex items-center justify-between p-4 bg-surface-container-low rounded-xl">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                        <span class="material-symbols-outlined text-blue-600">assignment_ind</span>
                                    </div>
                                    <div>
                                        <div class="text-sm font-bold text-primary">Renovación de Contratos Temporales
                                        </div>
                                        <div class="text-xs text-on-surface-variant">12 registros por vencer esta semana
                                        </div>
                                    </div>
                                </div>
                                <button
                                    class="px-3 py-1.5 bg-primary text-white text-[10px] font-bold rounded-lg uppercase">Gestionar</button>
                            </div>
                        </div>
                    </div>
                    <div class="bg-surface-container-lowest rounded-3xl ghost-border p-6 flex flex-col">
                        <h3 class="font-headline font-bold text-lg text-primary mb-4">Resumen de Cuadrillas</h3>
                        <div class="flex-1 space-y-4">
                            <div class="flex justify-between items-center p-3 rounded-xl bg-surface-container-low">
                                <span class="text-sm font-medium text-on-surface-variant">Cuadrilla A (Estructura)</span>
                                <span class="text-sm font-bold text-primary">14 pers.</span>
                            </div>
                            <div class="flex justify-between items-center p-3 rounded-xl bg-surface-container-low">
                                <span class="text-sm font-medium text-on-surface-variant">Cuadrilla B (Acabados)</span>
                                <span class="text-sm font-bold text-primary">22 pers.</span>
                            </div>
                            <div class="flex justify-between items-center p-3 rounded-xl bg-surface-container-low">
                                <span class="text-sm font-medium text-on-surface-variant">Cuadrilla C
                                    (Instalaciones)</span>
                                <span class="text-sm font-bold text-primary">8 pers.</span>
                            </div>
                            <div class="flex justify-between items-center p-3 rounded-xl bg-surface-container-low">
                                <span class="text-sm font-medium text-on-surface-variant">Cuadrilla D (Exteriores)</span>
                                <span class="text-sm font-bold text-primary">12 pers.</span>
                            </div>
                        </div>
                        <div class="mt-4 flex items-start gap-2">
                            <span class="material-symbols-outlined text-slate-400 text-sm">info</span>
                            <p class="text-xs text-on-surface-variant italic">La asignación de personal impacta
                                directamente el avance semanal.</p>
                        </div>
                    </div>
                </div>
            </section>
            <section x-show="activeTab === 'destajos'" x-transition>
                <div class="bg-surface-container-lowest rounded-full ghost-border overflow-hidden">
                    <div class="p-6 flex flex-wrap items-center justify-between gap-4 border-b border-outline-variant/10">
                        <div class="flex gap-2">
                            <button
                                class="px-4 py-2 bg-surface-container-low text-primary text-sm font-semibold rounded-lg flex items-center gap-2">
                                <span class="material-symbols-outlined text-lg">filter_alt</span>
                                Filtros
                            </button>
                            <div class="h-8 w-[1px] bg-outline-variant/30 mx-2"></div>
                            <span
                                class="bg-primary text-white px-4 py-1.5 rounded-full text-xs font-bold self-center shadow-sm">Todos</span>
                            <span
                                class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Estructura</span>
                            <span
                                class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Acabados</span>
                            <span
                                class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Instalaciones</span>
                            <span
                                class="text-on-surface-variant px-4 py-1.5 text-xs font-semibold self-center cursor-pointer hover:bg-surface-container-low rounded-full transition-colors">Obra
                                Civil</span>
                        </div>
                        <div class="text-sm text-on-surface-variant">Mostrando <span class="font-bold text-primary">12 de
                                48</span> contratos de destajo</div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead class="bg-surface-container-low/50">
                                <tr>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Destajo</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Contratista</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Valor Acordado</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Avance (%)</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Pagos Realizados</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                        Estado</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-outline-variant/10">
                                <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                    <td class="px-6 py-6">
                                        <div class="font-bold text-primary">Muro de Block Perimetral</div>
                                        <div class="text-xs text-on-surface-variant">Manzana 4 - Lotes 12 al 18</div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <div class="flex items-center gap-2">
                                            <div
                                                class="w-7 h-7 rounded-full bg-slate-200 flex items-center justify-center text-[10px] font-bold">
                                                MA</div>
                                            <span class="text-sm font-medium">Miguel Ángel Ortiz</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6 font-medium text-primary">$450,000</td>
                                    <td class="px-6 py-6">
                                        <div class="flex flex-col gap-1.5">
                                            <div class="flex items-center justify-between text-[10px] font-bold">
                                                <span class="text-primary">85%</span>
                                            </div>
                                            <div class="w-24 h-1.5 bg-slate-200 rounded-full overflow-hidden">
                                                <div class="h-full bg-primary" style="width: 85%"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6 font-medium text-primary">$382,500</td>
                                    <td class="px-6 py-6">
                                        <span
                                            class="px-3 py-1 bg-blue-50 text-blue-700 rounded-md text-xs font-bold">Activo</span>
                                    </td>
                                    <td class="px-6 py-6 text-right">
                                        <button
                                            class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100">
                                            <span class="material-symbols-outlined text-primary">visibility</span>
                                        </button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                    <td class="px-6 py-6">
                                        <div class="font-bold text-primary">Instalación Hidráulica - Nivel 1</div>
                                        <div class="text-xs text-on-surface-variant">Torre A y Torre B</div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <div class="flex items-center gap-2">
                                            <div
                                                class="w-7 h-7 rounded-full bg-slate-200 flex items-center justify-center text-[10px] font-bold">
                                                CI</div>
                                            <span class="text-sm font-medium">Constructora Isma S.A.</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6 font-medium text-primary">$1,280,000</td>
                                    <td class="px-6 py-6">
                                        <div class="flex flex-col gap-1.5">
                                            <div class="flex items-center justify-between text-[10px] font-bold">
                                                <span class="text-primary">100%</span>
                                            </div>
                                            <div class="w-24 h-1.5 bg-slate-200 rounded-full overflow-hidden">
                                                <div class="h-full bg-emerald-500" style="width: 100%"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6 font-medium text-primary">$1,280,000</td>
                                    <td class="px-6 py-6">
                                        <span
                                            class="px-3 py-1 bg-emerald-50 text-emerald-700 rounded-md text-xs font-bold">Finalizado</span>
                                    </td>
                                    <td class="px-6 py-6 text-right">
                                        <button
                                            class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100">
                                            <span class="material-symbols-outlined text-primary">visibility</span>
                                        </button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/30 transition-colors group">
                                    <td class="px-6 py-6">
                                        <div class="font-bold text-primary">Yeso y Afinado de Interiores</div>
                                        <div class="text-xs text-on-surface-variant">Departamentos Tipo C (12 unidades)
                                        </div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <div class="flex items-center gap-2">
                                            <div
                                                class="w-7 h-7 rounded-full bg-slate-200 flex items-center justify-center text-[10px] font-bold">
                                                RP</div>
                                            <span class="text-sm font-medium">Ricardo Perea</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6 font-medium text-primary">$620,000</td>
                                    <td class="px-6 py-6">
                                        <div class="flex flex-col gap-1.5">
                                            <div class="flex items-center justify-between text-[10px] font-bold">
                                                <span class="text-primary">42%</span>
                                            </div>
                                            <div class="w-24 h-1.5 bg-slate-200 rounded-full overflow-hidden">
                                                <div class="h-full bg-orange-400" style="width: 42%"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6 font-medium text-primary">$260,400</td>
                                    <td class="px-6 py-6">
                                        <span
                                            class="px-3 py-1 bg-orange-50 text-orange-700 rounded-md text-xs font-bold">En
                                            Revisión</span>
                                    </td>
                                    <td class="px-6 py-6 text-right">
                                        <button
                                            class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100">
                                            <span class="material-symbols-outlined text-primary">visibility</span>
                                        </button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-surface-container-low/30 transition-colors group border-b-0">
                                    <td class="px-6 py-6">
                                        <div class="font-bold text-primary">Vaciado de Losas de Cimentación</div>
                                        <div class="text-xs text-on-surface-variant">Bloque Norte - Fases 2 y 3</div>
                                    </td>
                                    <td class="px-6 py-6">
                                        <div class="flex items-center gap-2">
                                            <div
                                                class="w-7 h-7 rounded-full bg-slate-200 flex items-center justify-center text-[10px] font-bold">
                                                EC</div>
                                            <span class="text-sm font-medium">Estructuras Civiles NL</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6 font-medium text-primary">$2,450,000</td>
                                    <td class="px-6 py-6">
                                        <div class="flex flex-col gap-1.5">
                                            <div class="flex items-center justify-between text-[10px] font-bold">
                                                <span class="text-primary">15%</span>
                                            </div>
                                            <div class="w-24 h-1.5 bg-slate-200 rounded-full overflow-hidden">
                                                <div class="h-full bg-primary" style="width: 15%"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-6 font-medium text-primary">$367,500</td>
                                    <td class="px-6 py-6">
                                        <span
                                            class="px-3 py-1 bg-blue-50 text-blue-700 rounded-md text-xs font-bold">Activo</span>
                                    </td>
                                    <td class="px-6 py-6 text-right">
                                        <button
                                            class="p-2 hover:bg-primary-fixed rounded-lg transition-all opacity-0 group-hover:opacity-100">
                                            <span class="material-symbols-outlined text-primary">visibility</span>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div
                        class="px-6 py-4 bg-surface-container-low/30 border-t border-outline-variant/10 flex justify-between items-center">
                        <button class="text-sm font-bold text-on-surface-variant hover:text-primary disabled:opacity-50"
                            disabled="">Anterior</button>
                        <div class="flex gap-2">
                            <span
                                class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center text-xs font-bold shadow-md">1</span>
                            <span
                                class="w-8 h-8 rounded-lg hover:bg-surface-container-high flex items-center justify-center text-xs font-bold cursor-pointer transition-colors">2</span>
                            <span
                                class="w-8 h-8 rounded-lg hover:bg-surface-container-high flex items-center justify-center text-xs font-bold cursor-pointer transition-colors">3</span>
                            <span
                                class="w-8 h-8 rounded-lg hover:bg-surface-container-high flex items-center justify-center text-xs font-bold cursor-pointer transition-colors">4</span>
                        </div>
                        <button
                            class="text-sm font-bold text-primary hover:text-primary-container transition-colors">Siguiente</button>
                    </div>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="lg:col-span-2 bg-surface-container-lowest rounded-full ghost-border p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-headline font-bold text-lg text-primary">Solicitudes de Estimación</h3>
                            <button class="text-xs font-bold text-primary hover:underline transition-all">Ver Todas las
                                Solicitudes</button>
                        </div>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between p-4 bg-surface-container-low rounded-xl">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 bg-primary/5 rounded-lg flex items-center justify-center">
                                        <span class="material-symbols-outlined text-primary">history_edu</span>
                                    </div>
                                    <div>
                                        <div class="text-sm font-bold text-primary">Estimación #04 - Muros Manzana 4</div>
                                        <div class="text-xs text-on-surface-variant">Recibida hace 2 horas - Miguel Ortiz
                                        </div>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="text-sm font-bold text-primary">$85,400.00</div>
                                    <div class="text-[10px] text-orange-600 font-bold uppercase">Pendiente Revisión</div>
                                </div>
                            </div>
                            <div class="flex items-center justify-between p-4 bg-surface-container-low rounded-xl">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 bg-primary/5 rounded-lg flex items-center justify-center">
                                        <span class="material-symbols-outlined text-primary">history_edu</span>
                                    </div>
                                    <div>
                                        <div class="text-sm font-bold text-primary">Estimación #01 - Yeso Interior Torre A
                                        </div>
                                        <div class="text-xs text-on-surface-variant">Recibida ayer - Ricardo Perea</div>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="text-sm font-bold text-primary">$112,000.00</div>
                                    <div class="text-[10px] text-green-600 font-bold uppercase">Aprobada</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-surface-container-lowest rounded-full ghost-border p-6 flex flex-col">
                        <h3 class="font-headline font-bold text-lg text-primary mb-4">Alertas de Contratista</h3>
                        <div class="flex-1 space-y-4">
                            <div class="p-4 bg-red-50 border border-red-100 rounded-xl flex gap-3">
                                <span class="material-symbols-outlined text-red-600"
                                    style="font-variation-settings: 'FILL' 1;">warning</span>
                                <div>
                                    <p class="text-sm font-bold text-red-900">Vencimiento de Seguro Social</p>
                                    <p class="text-xs text-red-700 mt-1">El contratista Miguel Ortiz tiene la póliza de RC
                                        vencida desde ayer.</p>
                                </div>
                            </div>
                            <div class="p-4 bg-orange-50 border border-orange-100 rounded-xl flex gap-3">
                                <span class="material-symbols-outlined text-orange-600"
                                    style="font-variation-settings: 'FILL' 1;">info</span>
                                <div>
                                    <p class="text-sm font-bold text-orange-900">Retraso en Suministro</p>
                                    <p class="text-xs text-orange-700 mt-1">Isma S.A. reporta 2 días de retraso por falta
                                        de material hidráulico en sitio.</p>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4 flex items-start gap-2">
                            <span class="material-symbols-outlined text-slate-400 text-sm">info</span>
                            <p class="text-xs text-on-surface-variant italic">Las alertas se actualizan según la bitácora
                                de obra diaria.</p>
                        </div>
                    </div>
                </div>
            </section>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2 bg-surface-container-lowest rounded-[2rem] ghost-border p-8 shadow-sm">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="font-headline font-bold text-xl text-primary">Registro Fotográfico Reciente</h3>
                        <button class="text-sm font-bold text-primary hover:underline flex items-center gap-1">
                            Ver Galería Completa
                            <span class="material-symbols-outlined text-sm">open_in_new</span>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div class="aspect-[4/3] rounded-2xl overflow-hidden relative group">
                            <img alt="Construction site"
                                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPNdZAzBcJAbnMYrAPfMnjSHlAtQG3a_7nUx_U746SSvlNBR2nARVHjK2UbI6hVgwzvNmzs8XS1LGtOVVe62i-thaeRf8gvSitWqkDsM-XVCIjom0vYa_mMD3CQkP5hVzQR8w-4wy46GOIrnfW9lHI6qefrilN0MURZxot8vKRnN9FTAYBjZHD_EBgPTTpqjC0F7ZTWo6X2pAI0EzG2Usqx001lxabB_drYaC7d06kpU7y5s_k-7KIkAM4ckZMYorZbOCAxJS7TlYq" />
                            <div
                                class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                <span class="material-symbols-outlined text-white text-3xl">zoom_in</span>
                            </div>
                        </div>
                        <div class="aspect-[4/3] rounded-2xl overflow-hidden relative group">
                            <img alt="Worker on site"
                                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXAFw5qzvZUCQ371Itu8mtDEc1bwTy8D01lce8pWOUERcLpTwl9JcCBSDZWkXz59ggFggRhnaBDpRABE-X8Uu__AkdAd5zrsQLKLzFSLyEzF4y_Q7YbNdwP3Aul4hzEpJYvVfA4KPgTeH76E9iGjtscaa28_tewjgHWEL5Iemjwd5EBWtfG6VTzbgDzPCuonFAIWHk2_WF2N_SIqutIkbwYL7DeOwypCLCv-z51FvNSlwLaCVKPlmc-qDiCHKq6jbWiKhvPmDppIE9" />
                            <div
                                class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                <span class="material-symbols-outlined text-white text-3xl">zoom_in</span>
                            </div>
                        </div>
                        <div class="aspect-[4/3] rounded-2xl overflow-hidden relative group">
                            <img alt="Interior framing"
                                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuC-PHFa048Ft-W3jq6FZqF36pRfPDIuvQDTHKpQPm1qBuQ4bjsTW2cBCcjbAnKXgjKWhoYIC1lzN4EvFuTmvGTqh6sPQPVIkS5aEODx1H7Fdp1imye7sGEZDcWvPPX57gAB3NFLfzZEuZHLui3a7_F0KPSlgbasiiIOf4nweslD4FmTuHkOMiRQcpERiN5v7Z2vexuKxXYWKAp4cNrlI8QIPBr0qzByRqV2agT30nLzd6PQmYyrda97hIkV8E7_o-5Vkt-vreQS8umB" />
                            <div
                                class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                <span class="material-symbols-outlined text-white text-3xl">zoom_in</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-surface-container-lowest rounded-[2rem] ghost-border p-8 flex flex-col shadow-sm">
                    <h3 class="font-headline font-bold text-xl text-primary mb-6">Ubicación del Proyecto</h3>
                    <div class="flex-1 rounded-2xl overflow-hidden bg-slate-200 relative min-h-[200px]">
                        <img class="w-full h-full object-cover opacity-60 grayscale"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMbQLHwp-pIlAPQXyhc-dq1o8ARTUymjVBqBFwocXVzOYRZAC759VsnicHoJDiM9AWG62SvC9iRviAjTlpQZa0t36rut4-0J_WJwoSTu3MhiZRxkCNkpUDH7zFzdi-ResdAolNEPRy4rNio5tkuUmT2ah4vbWLhHxEA96q7k8X4jKX8r195nM4K--fj8kB_-zbeID-7gqjPEU7GMJJkZK7KXivxS506IdMj4d-ihN2YEoViH-eH7ncbld7B4ZeIzzL0GnjjiolO3UG" />
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div
                                class="w-14 h-14 bg-primary rounded-full flex items-center justify-center shadow-2xl border-4 border-white animate-pulse">
                                <span class="material-symbols-outlined text-white text-3xl">location_on</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 flex items-start gap-3 bg-slate-50 p-3 rounded-xl border border-slate-100">
                        <span class="material-symbols-outlined text-primary text-xl">info</span>
                        <p class="text-xs text-on-surface-variant italic leading-relaxed">Actualizado cada 24h. Refleja los
                            límites geográficos autorizados de la zona de obra.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection