<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>U-site — Acceso</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js" defer></script>
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        body { font-family: 'Inter', system-ui, sans-serif; }
        [x-cloak] { display: none !important; }
    </style>
</head>

<body class="min-h-screen flex" style="background-color:#f1f5f9">

    <!-- Left panel: brand -->
    <div class="hidden lg:flex lg:w-1/2 xl:w-2/5 flex-col justify-between p-12"
         style="background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%)">
        <!-- Top: logo -->
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
                 style="background-color:#8eb02f">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253M3 12c0 .778.099 1.533.284 2.253"/>
                </svg>
            </div>
            <span class="text-white font-bold text-xl tracking-tight">U-site</span>
        </div>

        <!-- Middle: tagline -->
        <div>
            <h2 class="text-white text-3xl font-bold leading-snug mb-4">
                Gestiona tu plataforma<br>
                <span style="color:#8eb02f">con total control</span>
            </h2>
            <p class="text-slate-400 text-sm leading-relaxed max-w-xs">
                Panel de administración seguro, rápido e intuitivo para gestionar usuarios, servidores, módulos y más.
            </p>

            <!-- Feature bullets -->
            <ul class="mt-8 space-y-3">
                <li class="flex items-center gap-3 text-sm text-slate-400">
                    <div class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0" style="background-color:rgba(142,176,47,.2)">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" style="color:#8eb02f" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                        </svg>
                    </div>
                    Control de roles y permisos
                </li>
                <li class="flex items-center gap-3 text-sm text-slate-400">
                    <div class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0" style="background-color:rgba(142,176,47,.2)">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" style="color:#8eb02f" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                        </svg>
                    </div>
                    Gestión de servidores y conexiones
                </li>
                <li class="flex items-center gap-3 text-sm text-slate-400">
                    <div class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0" style="background-color:rgba(142,176,47,.2)">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" style="color:#8eb02f" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                        </svg>
                    </div>
                    Sesiones seguras con tiempo de expiración
                </li>
            </ul>
        </div>

        <!-- Bottom: copyright -->
        <p class="text-slate-600 text-xs">© 2025 U-site. Todos los derechos reservados.</p>
    </div>

    <!-- Right panel: form -->
    <div class="flex-1 flex items-center justify-center p-6 sm:p-10">
        {{embed}}
    </div>

</body>

</html>