<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

        <title><?php echo e(config('app.name', 'Laravel')); ?></title>

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

        <style>
            *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

            :root {
                --cyan: #00f5ff;
                --blue: #0066ff;
                --dark: #020510;
                --dark2: #050c1a;
                --dark3: #071225;
                --text: #e8f4ff;
                --muted: #5a7a9a;
            }

            body {
                font-family: 'Syne', sans-serif;
                background: var(--dark);
                color: var(--text);
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow-x: hidden;
            }

            .bg-grid {
                position: fixed;
                inset: 0;
                background-image:
                    linear-gradient(rgba(0,102,255,0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,102,255,0.06) 1px, transparent 1px);
                background-size: 60px 60px;
                pointer-events: none;
                z-index: 0;
            }

            .bg-glow-1 {
                position: fixed;
                top: -20%;
                right: -10%;
                width: 600px;
                height: 600px;
                background: radial-gradient(circle, rgba(0,102,255,0.15) 0%, transparent 70%);
                pointer-events: none;
                z-index: 0;
                animation: pulseGlow 6s ease-in-out infinite;
            }

            .bg-glow-2 {
                position: fixed;
                bottom: -20%;
                left: -10%;
                width: 600px;
                height: 600px;
                background: radial-gradient(circle, rgba(0,245,255,0.08) 0%, transparent 65%);
                pointer-events: none;
                z-index: 0;
                animation: pulseGlow 8s ease-in-out infinite reverse;
            }

            @keyframes pulseGlow {
                0%, 100% { opacity: 0.8; transform: scale(1); }
                50% { opacity: 1; transform: scale(1.08); }
            }

            .auth-wrapper {
                position: relative;
                z-index: 1;
                width: 100%;
                max-width: 460px;
                padding: 24px;
            }

            .auth-logo {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
                text-decoration: none;
                margin-bottom: 36px;
            }

            .logo-icon {
                width: 40px;
                height: 40px;
                background: linear-gradient(135deg, var(--blue), var(--cyan));
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: 'Space Mono', monospace;
                font-weight: 700;
                font-size: 16px;
                color: #000;
                box-shadow: 0 0 24px rgba(0,245,255,0.35);
            }

            .logo-text {
                font-size: 20px;
                font-weight: 700;
                color: var(--text);
                letter-spacing: 0.04em;
            }

            .auth-card {
                background: var(--dark2);
                border: 1px solid rgba(0,245,255,0.12);
                border-radius: 20px;
                padding: 44px 40px;
                box-shadow: 0 0 80px rgba(0,0,0,0.5), 0 0 40px rgba(0,245,255,0.04);
                animation: fadeSlideUp 0.5s ease both;
                position: relative;
                overflow: hidden;
            }

            .auth-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 20%;
                right: 20%;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(0,245,255,0.5), transparent);
            }

            @keyframes fadeSlideUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
        </style>
    </head>
    <body>
        <div class="bg-grid"></div>
        <div class="bg-glow-1"></div>
        <div class="bg-glow-2"></div>

        <div class="auth-wrapper">
            <a href="/" class="auth-logo">
                <div class="logo-icon"><?php echo e(substr(config('app.name', 'L'), 0, 1)); ?></div>
                <span class="logo-text"><?php echo e(config('app.name', 'Laravel')); ?></span>
            </a>

            <div class="auth-card">
                <?php echo e($slot); ?>

            </div>
        </div>
    </body>
</html><?php /**PATH C:\Users\hp\sistema_pago\resources\views/layouts/guest.blade.php ENDPATH**/ ?>