<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ?? 'Lauck Dashboard' }}</title>
    
    <!-- Fuentes -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap" rel="stylesheet">
    
    <!-- Tailwind y Config -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Montserrat', 'sans-serif'],
                    },
                    colors: {
                        'neon-lime': '#ccff00',
                        'dark-bg': '#1a1a1a',
                        'panel-bg': '#242424',
                    }
                }
            }
        }
    </script>
    <style>
        .bg-grid-pattern {
            background-image: linear-gradient(to right, #333 1px, transparent 1px),
            linear-gradient(to bottom, #333 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: center;
        }
    </style>
</head>

<body class="bg-dark-bg text-gray-300 font-sans antialiased min-h-screen flex flex-col relative overflow-x-hidden">

    <!-- Fondo grilla global -->
    <div class="absolute inset-0 bg-grid-pattern opacity-[0.07] z-0 pointer-events-none fixed"></div>

    <!-- Navbar Component -->
    <x-navbar />

    <!-- Contenido Principal -->
    <main class="flex-grow flex flex-col items-center justify-start pt-10 pb-20 px-4 w-full max-w-7xl mx-auto z-10">
        {{ $slot }}
    </main>

    <!-- Footer Component -->
    <x-footer />

    <!-- Scripts globales -->
    <script>
        // Lógica del menú móvil
        const btn = document.querySelector('[data-collapse-toggle="navbar-default"]');
        const menu = document.getElementById('navbar-default');
        if(btn && menu) {
            btn.addEventListener('click', () => menu.classList.toggle('hidden'));
        }
    </script>
</body>
</html>