.elementor-10 .elementor-element.elementor-element-77d5c65{--display:flex;}/* Start custom CSS */<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🍕 SaaS Restaurante - Sistema Multi-Segmento</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <style>
        .hidden { display: none; }
    </style>
</head>
<body class="bg-gray-50">
    <!-- PÁGINA DE LOGIN -->
    <div id="loginPage" class="min-h-screen flex items-center justify-center">
        <div class="max-w-md w-full bg-white p-8 rounded-lg shadow-md">
            <h1 class="text-3xl font-bold text-center mb-6">🍕 SaaS Restaurante</h1>
            <p class="text-center text-gray-600 mb-6">Sistema Multi-Segmento para Restaurantes</p>
            
            <!-- FORMULÁRIO DE LOGIN -->
            <form id="loginForm" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" id="email" required 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="seu@email.com">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Senha</label>
                    <input type="password" id="password" required 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Sua senha">
                </div>
                <button type="submit" 
                        class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition duration-200">
                    Entrar
                </button>
            </form>
            
            <div class="mt-4 text-center">
                <button id="showSignup" class="text-blue-600 hover:text-blue-800 text-sm">
                    Não tem conta? Cadastre-se
                </button>
            </div>
            
            <!-- FORMULÁRIO DE CADASTRO -->
            <form id="signupForm" class="space-y-4 hidden">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nome do Restaurante</label>
                    <input type="text" id="restaurantName" required 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Nome do seu restaurante">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" id="signupEmail" required 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="seu@email.com">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Senha</label>
                    <input type="password" id="signupPassword" required 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Mínimo 6 caracteres">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Negócio</label>
                    <select id="businessType" required 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Selecione o tipo</option>
                        <option value="pizzaria">🍕 Pizzaria</option>
                        <option value="marmitex">🍱 Marmitex</option>
                        <option value="lanchonete">🍔 Lanchonete</option>
                        <option value="multiplo">🍽️ Múltiplos Segmentos</option>
                    </select>
                </div>
                <button type="submit" 
                        class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-200">
                    Criar Conta
                </button>
            </form>
            
            <div class="mt-4 text-center">
                <button id="showLogin" class="text-green-600 hover:text-green-800 text-sm hidden">
                    Já tem conta? Faça login
                </button>
            </div>
        </div>
    </div>

    <!-- DASHBOARD -->
    <div id="dashboard" class="hidden min-h-screen">
        <!-- HEADER -->
        <header class="bg-white shadow-sm border-b">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between items-center py-4">
                    <div class="flex items-center">
                        <h1 class="text-2xl font-bold text-gray-900">🍕 SaaS Restaurante</h1>
                        <span id="restaurantNameDisplay" class="ml-4 text-lg text-gray-600"></span>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span id="userEmail" class="text-gray-600"></span>
                        <button id="logoutBtn" 
                                class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition duration-200">
                            Sair
                        </button>
                    </div>
                </div>
            </div>
        </header>

        <!-- CONTEÚDO PRINCIPAL -->
        <main class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
            <!-- CARDS DE BOAS-VINDAS -->
            <div class="bg-white overflow-hidden shadow rounded-lg mb-6">
                <div class="px-4 py-5 sm:p-6">
                    <h2 class="text-lg font-medium text-gray-900 mb-2">Bem-vindo ao seu Dashboard!</h2>
                    <p class="text-gray-600">Gerencie todos os aspectos do seu restaurante em um só lugar.</p>
                </div>
            </div>

            <!-- GRID DE MÓDULOS -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- MÓDULO PIZZARIA -->
                <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition duration-200 cursor-pointer" onclick="openModule('pizzaria')">
                    <div class="px-4 py-5 sm:p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="text-4xl">🍕</div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Pizzaria</dt>
                                    <dd class="text-lg font-medium text-gray-900">Cardápio & Pedidos</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="mt-4">
                            <p class="text-sm text-gray-600">Gerencie pizzas, sabores, preços e pedidos</p>
                        </div>
                    </div>
                </div>

                <!-- MÓDULO MARMITEX -->
                <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition duration-200 cursor-pointer" onclick="openModule('marmitex')">
                    <div class="px-4 py-5 sm:p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="text-4xl">🍱</div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Marmitex</dt>
                                    <dd class="text-lg font-medium text-gray-900">Controle de Marmitas</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="mt-4">
                            <p class="text-sm text-gray-600">Gerencie cardápio diário, entregas e clientes</p>
                        </div>
                    </div>
                </div>

                <!-- MÓDULO LANCHONETE -->
                <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition duration-200 cursor-pointer" onclick="openModule('lanchonete')">
                    <div class="px-4 py-5 sm:p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="text-4xl">🍔</div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Lanchonete</dt>
                                    <dd class="text-lg font-medium text-gray-900">Lanches & Bebidas</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="mt-4">
                            <p class="text-sm text-gray-600">Controle lanches, bebidas e combos</p>
                        </div>
                    </div>
                </div>

                <!-- MÓDULO FINANCEIRO -->
                <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition duration-200 cursor-pointer" onclick="openModule('financeiro')">
                    <div class="px-4 py-5 sm:p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="text-4xl">💰</div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Financeiro</dt>
                                    <dd class="text-lg font-medium text-gray-900">Relatórios & Vendas</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="mt-4">
                            <p class="text-sm text-gray-600">Controle vendas, gastos e lucros</p>
                        </div>
                    </div>
                </div>

                <!-- MÓDULO CLIENTES -->
                <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition duration-200 cursor-pointer" onclick="openModule('clientes')">
                    <div class="px-4 py-5 sm:p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="text-4xl">👥</div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Clientes</dt>
                                    <dd class="text-lg font-medium text-gray-900">Base de Clientes</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="mt-4">
                            <p class="text-sm text-gray-600">Gerencie clientes, histórico e fidelidade</p>
                        </div>
                    </div>
                </div>

                <!-- MÓDULO CONFIGURAÇÕES -->
                <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition duration-200 cursor-pointer" onclick="openModule('config')">
                    <div class="px-4 py-5 sm:p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="text-4xl">⚙️</div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Configurações</dt>
                                    <dd class="text-lg font-medium text-gray-900">Sistema & Perfil</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="mt-4">
                            <p class="text-sm text-gray-600">Configure sistema, usuários e integrações</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ESTATÍSTICAS RÁPIDAS -->
            <div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="text-2xl">📊</div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Vendas Hoje</dt>
                                    <dd class="text-lg font-medium text-gray-900">R$ 1.250,00</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="text-2xl">🛒</div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Pedidos</dt>
                                    <dd class="text-lg font-medium text-gray-900">23 hoje</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="text-2xl">👥</div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Clientes</dt>
                                    <dd class="text-lg font-medium text-gray-900">156 total</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="text-2xl">⭐</div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 truncate">Avaliação</dt>
                                    <dd class="text-lg font-medium text-gray-900">4.8/5.0</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- SCRIPTS -->
    <script>
        // VARIÁVEIS GLOBAIS
        let currentUser = null;
        
        // ELEMENTOS DOM
        const loginPage = document.getElementById('loginPage');
        const dashboard = document.getElementById('dashboard');
        const loginForm = document.getElementById('loginForm');
        const signupForm = document.getElementById('signupForm');
        const showSignupBtn = document.getElementById('showSignup');
        const showLoginBtn = document.getElementById('showLogin');
        const logoutBtn = document.getElementById('logoutBtn');
        const userEmail = document.getElementById('userEmail');
        const restaurantNameDisplay = document.getElementById('restaurantNameDisplay');

        // INICIALIZAÇÃO
        document.addEventListener('DOMContentLoaded', function() {
            checkAuth();
            setupEventListeners();
        });

        // CONFIGURAR EVENT LISTENERS
        function setupEventListeners() {
            // Alternar entre login e cadastro
            showSignupBtn.addEventListener('click', function() {
                loginForm.classList.add('hidden');
                signupForm.classList.remove('hidden');
                showSignupBtn.classList.add('hidden');
                showLoginBtn.classList.remove('hidden');
            });

            showLoginBtn.addEventListener('click', function() {
                signupForm.classList.add('hidden');
                loginForm.classList.remove('hidden');
                showLoginBtn.classList.add('hidden');
                showSignupBtn.classList.remove('hidden');
            });

            // Formulários
            loginForm.addEventListener('submit', handleLogin);
            signupForm.addEventListener('submit', handleSignup);
            logoutBtn.addEventListener('click', handleLogout);
        }

        // VERIFICAR AUTENTICAÇÃO
        function checkAuth() {
            const user = localStorage.getItem('currentUser');
            if (user) {
                currentUser = JSON.parse(user);
                showDashboard();
            } else {
                showLogin();
            }
        }

        // HANDLE LOGIN
        function handleLogin(e) {
            e.preventDefault();
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;

            // Simulação de login (substitua pela integração real do Supabase)
            if (email && password) {
                const userData = {
                    email: email,
                    restaurantName: 'Meu Restaurante',
                    businessType: 'multiplo'
                };
                
                localStorage.setItem('currentUser', JSON.stringify(userData));
                currentUser = userData;
                showDashboard();
                showNotification('Login realizado com sucesso!', 'success');
            } else {
                showNotification('Por favor, preencha todos os campos', 'error');
            }
        }

        // HANDLE SIGNUP
        function handleSignup(e) {
            e.preventDefault();
            const restaurantName = document.getElementById('restaurantName').value;
            const email = document.getElementById('signupEmail').value;
            const password = document.getElementById('signupPassword').value;
            const businessType = document.getElementById('businessType').value;

            if (restaurantName && email && password && businessType) {
                const userData = {
                    email: email,
                    restaurantName: restaurantName,
                    businessType: businessType
                };
                
                localStorage.setItem('currentUser', JSON.stringify(userData));
                currentUser = userData;
                showDashboard();
                showNotification('Conta criada com sucesso!', 'success');
            } else {
                showNotification('Por favor, preencha todos os campos', 'error');
            }
        }

        // HANDLE LOGOUT
        function handleLogout() {
            localStorage.removeItem('currentUser');
            currentUser = null;
            showLogin();
            showNotification('Logout realizado com sucesso!', 'success');
        }

        // MOSTRAR LOGIN
        function showLogin() {
            loginPage.classList.remove('hidden');
            dashboard.classList.add('hidden');
        }

        // MOSTRAR DASHBOARD
        function showDashboard() {
            loginPage.classList.add('hidden');
            dashboard.classList.remove('hidden');
            
            if (currentUser) {
                userEmail.textContent = currentUser.email;
                restaurantNameDisplay.textContent = currentUser.restaurantName;
            }
        }

        // ABRIR MÓDULO
        function openModule(moduleType) {
            const modules = {
                'pizzaria': '🍕 Módulo Pizzaria - Gerencie seu cardápio de pizzas, sabores e pedidos',
                'marmitex': '🍱 Módulo Marmitex - Controle cardápio diário e entregas',
                'lanchonete': '🍔 Módulo Lanchonete - Gerencie lanches, bebidas e combos',
                'financeiro': '💰 Módulo Financeiro - Relatórios de vendas e controle financeiro',
                'clientes': '👥 Módulo Clientes - Base de clientes e histórico',
                'config': '⚙️ Configurações - Sistema e perfil do usuário'
            };
            
            showNotification(modules[moduleType] || 'Módulo em desenvolvimento', 'info');
        }

        // MOSTRAR NOTIFICAÇÃO
        function showNotification(message, type = 'info') {
            const colors = {
                'success': 'bg-green-100 border-green-500 text-green-700',
                'error': 'bg-red-100 border-red-500 text-red-700',
                'info': 'bg-blue-100 border-blue-500 text-blue-700'
            };
            
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 p-4 border-l-4 rounded shadow-lg z-50 ${colors[type]}`;
            notification.textContent = message;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
    </script>
</body>
</html>/* End custom CSS */