<!-- Container Principal -->
<div x-data="modals" @keydown.escape="closeModal" class="bg-white rounded-lg shadow">
    <div class="container mx-auto p-6 w-full ">
        <h1 class="text-2xl font-bold mb-4">Oficina Virtual</h1>
        <div class="justify-between w-full  md:flex">
            <p class="mb-4 text-sm">Bienvenido a la oficina virtual de Usite</p>
            <a href="/"><button type="submit" class="bg-[#8eb02f] text-white px-4 py-2 rounded flex space-x-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                    </svg>
                    <p> Volver a la pagina principal </p>
                </button>
            </a>
            <!-- Agregar el GIF de carga -->
            <div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center">
                <img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
            </div>
        </div>
    </div>
</div>