<!--
═══════════════════════════════════════════════════════════════════════════════
███████╗██╗   ██╗██╗  ██╗ ██████╗ ███╗   ███╗███████╗██████╗  ██████╗██╗ ██████╗ 
╚══██╔══╝██║   ██║██║ ██╔╝██╔═══██╗████╗ ████║██╔════╝██╔══██╗██╔════╝██║██╔═══██╗
   ██║   ██║   ██║█████╔╝ ██║   ██║██╔████╔██║█████╗  ██████╔╝██║     ██║██║   ██║
   ██║   ██║   ██║██╔═██╗ ██║   ██║██║╚██╔╝██║██╔══╝  ██╔══██╗██║     ██║██║   ██║
   ██║   ╚██████╔╝██║  ██╗╚██████╔╝██║ ╚═╝ ██║███████╗██║  ██║╚██████╗██║╚██████╔╝
   ╚═╝    ╚═════╝ ╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝╚═╝  ╚═╝ ╚═════╝╚═╝ ╚═════╝ 
═══════════════════════════════════════════════════════════════════════════════

TUKOMERCIO - Plataforma de Comercio Electrónico, Gamificación y Gestión Empresarial
Anteriormente conocido como: Trayectoria / BizFlow Studio

═══════════════════════════════════════════════════════════════════════════════
AVISO DE PROPIEDAD INTELECTUAL Y DERECHOS DE AUTOR
═══════════════════════════════════════════════════════════════════════════════

© 2024-2026 Carlos Eduardo Huérfano Bermúdez. Todos los derechos reservados.

TITULAR DE DERECHOS:
  Nombre:     Carlos Eduardo Huérfano Bermúdez
  C.C.:       1.064.986.917 (Cereté, Córdoba, Colombia)
  Contacto:   carlos-5100@hotmail.com | +57 322 818 8375
  Ubicación:  Bogotá D.C., Colombia

INFORMACIÓN DEL PROYECTO:
  Nombre:     TuKomercio
  Inicio:     Julio 24, 2024
  Repositorio: github.com/routeres (routeres@gmail.com)

═══════════════════════════════════════════════════════════════════════════════
TÉRMINOS DE USO Y RESTRICCIONES
═══════════════════════════════════════════════════════════════════════════════

Este código fuente es CONFIDENCIAL y constituye un SECRETO COMERCIAL.

QUEDA ESTRICTAMENTE PROHIBIDO sin autorización ESCRITA del titular:

  1. Copiar, reproducir o duplicar este código, total o parcialmente
  2. Modificar, adaptar o crear obras derivadas
  3. Distribuir, publicar, sublicenciar o transferir a terceros
  4. Usar para desarrollo de productos competidores
  5. Realizar ingeniería inversa, descompilar o desensamblar
  6. Remover o alterar este aviso de propiedad intelectual

El acceso a este código NO otorga ninguna licencia implícita o explícita.

═══════════════════════════════════════════════════════════════════════════════
PROTECCIÓN LEGAL
═══════════════════════════════════════════════════════════════════════════════

Este software está protegido por:

  • Ley 23 de 1982 - Derechos de Autor (Colombia)
  • Ley 1915 de 2018 - Modernización Derechos de Autor (Colombia)
  • Decisión Andina 351 de 1993 - Régimen Común sobre Derecho de Autor
  • Convenio de Berna para la Protección de Obras Literarias y Artísticas
  • Tratado OMPI sobre Derecho de Autor (WCT)
  • Acuerdo ADPIC/TRIPS - Organización Mundial del Comercio

SANCIONES POR INFRACCIÓN:
  • Civiles: Indemnización por daños y perjuicios (Art. 57, Ley 23/1982)
  • Penales: Prisión de 4 a 8 años y multa (Art. 271, Código Penal Colombiano)

═══════════════════════════════════════════════════════════════════════════════
JURISDICCIÓN
═══════════════════════════════════════════════════════════════════════════════

Cualquier disputa será resuelta exclusivamente por los tribunales de
Bogotá D.C., Colombia, bajo las leyes de la República de Colombia.

═══════════════════════════════════════════════════════════════════════════════

Para solicitar autorización de uso: carlos-5100@hotmail.com

═══════════════════════════════════════════════════════════════════════════════
-->


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tukomercio Suite | Acceso Premium</title>
    
    <script src="config.js"></script>
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --glass-bg: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.2);
            --glow-purple: rgba(118, 75, 162, 0.5);
            --glow-blue: rgba(102, 126, 234, 0.5);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            min-height: 100vh;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }

        body {
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
        }

        /* ==========================================
           FONDO ANIMADO CON PARTÍCULAS
           ========================================== */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }

        .bg-animation .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.5;
            animation: float 20s ease-in-out infinite;
        }

        .bg-animation .orb:nth-child(1) {
            width: 600px;
            height: 600px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            top: -200px;
            left: -200px;
            animation-delay: 0s;
        }

        .bg-animation .orb:nth-child(2) {
            width: 400px;
            height: 400px;
            background: linear-gradient(135deg, #f093fb, #f5576c);
            bottom: -100px;
            right: -100px;
            animation-delay: -5s;
        }

        .bg-animation .orb:nth-child(3) {
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation-delay: -10s;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(50px, -50px) scale(1.1); }
            50% { transform: translate(-30px, 30px) scale(0.9); }
            75% { transform: translate(30px, 50px) scale(1.05); }
        }

        /* Partículas flotantes */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            animation: rise 10s ease-in infinite;
        }

        @keyframes rise {
            0% {
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) scale(1);
                opacity: 0;
            }
        }

        /* ==========================================
           PANTALLA DE CARGA PREMIUM
           ========================================== */
        #loadingScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        #loadingScreen.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .loader-logo {
            width: 120px;
            height: 120px;
            object-fit: contain;
            animation: logoFloat 2s ease-in-out infinite, logoPulse 2s ease-in-out infinite;
            filter: drop-shadow(0 0 30px rgba(102, 126, 234, 0.8));
        }

        @keyframes logoFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        @keyframes logoPulse {
            0%, 100% { filter: drop-shadow(0 0 30px rgba(102, 126, 234, 0.8)); }
            50% { filter: drop-shadow(0 0 50px rgba(118, 75, 162, 1)); }
        }

        .loader-text {
            margin-top: 30px;
            font-family: 'Orbitron', sans-serif;
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
            background-size: 300% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientMove 3s ease infinite;
        }

        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .loader-subtitle {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
            margin-top: 10px;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .loader-progress {
            width: 200px;
            height: 3px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            margin-top: 30px;
            overflow: hidden;
        }

        .loader-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 10px;
            animation: loading 2s ease-in-out infinite;
        }

        @keyframes loading {
            0% { width: 0%; margin-left: 0; }
            50% { width: 70%; margin-left: 0; }
            100% { width: 0%; margin-left: 100%; }
        }

        /* ==========================================
           CONTENEDOR PRINCIPAL
           ========================================== */
        .login-container {
            display: flex;
            width: 100%;
            max-width: 1100px;
            min-height: 600px;
            position: relative;
            z-index: 2;
        }

        /* ==========================================
           PANEL IZQUIERDO - BRANDING
           ========================================== */
        .brand-panel {
            flex: 1;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 30px 0 0 30px;
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .brand-panel::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
            animation: rotateBg 20s linear infinite;
        }

        @keyframes rotateBg {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .brand-logo {
            width: 130px;
            height: 130px;
            object-fit: contain;
            animation: logoFloat 3s ease-in-out infinite;
            filter: drop-shadow(0 0 40px rgba(102, 126, 234, 0.6));
            position: relative;
            z-index: 1;
        }

        .brand-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: white;
            margin-top: 30px;
            text-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
            position: relative;
            z-index: 1;
        }

        .brand-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem;
            margin-top: 10px;
            letter-spacing: 4px;
            text-transform: uppercase;
            position: relative;
            z-index: 1;
        }

        .brand-features {
            margin-top: 40px;
            position: relative;
            z-index: 1;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 15px;
            color: rgba(255, 255, 255, 0.8);
            margin: 15px 0;
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

        .feature-item:hover {
            color: white;
            transform: translateX(10px);
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        /* ==========================================
           PANEL DERECHO - FORMULARIO
           ========================================== */
        .form-panel {
            flex: 1;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 0 30px 30px 0;
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
        }

        .form-header {
            text-align: center;
            margin-bottom: 35px;
        }

        .form-header h2 {
            font-size: 1.8rem;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 8px;
        }

        .form-header p {
            color: #666;
            font-size: 0.95rem;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }

        .input-wrapper {
            position: relative;
        }

        .input-wrapper i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: #764ba2;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }

        .form-input {
            width: 100%;
            padding: 16px 20px 16px 50px;
            border: 2px solid #e0e0e0;
            border-radius: 15px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: #fafafa;
        }

        .form-input:focus {
            outline: none;
            border-color: #764ba2;
            background: white;
            box-shadow: 0 0 0 4px rgba(118, 75, 162, 0.1);
        }

        .form-input:focus + i,
        .form-input:focus ~ i {
            color: #667eea;
        }

        .btn-login {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 15px;
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            margin-top: 10px;
        }

        .btn-login::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
        }

        .btn-login:hover::before {
            left: 100%;
        }

        .btn-login:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
        }

        .btn-login:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        .btn-login.success {
            background: linear-gradient(135deg, #00b09b, #96c93d);
        }

        /* Links */
        .form-links {
            text-align: center;
            margin-top: 30px;
        }

        .form-links a {
            color: #764ba2;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .form-links a:hover {
            color: #667eea;
        }

        .divider {
            display: flex;
            align-items: center;
            margin: 25px 0;
        }

        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e0e0e0;
        }

        .divider span {
            padding: 0 15px;
            color: #999;
            font-size: 0.85rem;
        }

        .btn-register {
            display: block;
            width: 100%;
            padding: 16px;
            background: transparent;
            border: 2px solid #764ba2;
            border-radius: 15px;
            color: #764ba2;
            font-size: 1rem;
            font-weight: 600;
            text-align: center;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .btn-register:hover {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: transparent;
            color: white;
            transform: translateY(-2px);
        }

        /* Mensajes */
        #loginMessage {
            padding: 15px;
            border-radius: 12px;
            margin-top: 20px;
            display: none;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
        }

        #loginMessage.error {
            display: flex;
            background: #fee2e2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }

        #loginMessage.success {
            display: flex;
            background: #dcfce7;
            color: #16a34a;
            border: 1px solid #bbf7d0;
        }

        /* ==========================================
           RESPONSIVE
           ========================================== */
        @media (max-width: 900px) {
            .login-container {
                flex-direction: column;
                max-width: 500px;
            }

            .brand-panel {
                border-radius: 30px 30px 0 0;
                padding: 40px 30px;
            }

            .brand-logo {
                width: 100px;
                height: 100px;
                object-fit: contain;
            }

            .brand-title {
                font-size: 1.8rem;
            }

            .brand-features {
                display: none;
            }

            .form-panel {
                border-radius: 0 0 30px 30px;
                padding: 40px 30px;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            .brand-panel {
                padding: 30px 20px;
            }

            .brand-logo {
                width: 80px;
                height: 80px;
                object-fit: contain;
            }

            .brand-title {
                font-size: 1.5rem;
            }

            .form-panel {
                padding: 30px 20px;
            }

            .form-input {
                font-size: 16px;
                padding: 14px 18px 14px 45px;
            }

            .btn-login, .btn-register {
                padding: 14px;
            }
        }

        /* ==========================================
           VERSIÓN INFO
           ========================================== */
        .version-badge {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 8px 16px;
            border-radius: 20px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.75rem;
            z-index: 3;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>

<body>
    <!-- Fondo animado -->
    <div class="bg-animation">
        <div class="orb"></div>
        <div class="orb"></div>
        <div class="orb"></div>
    </div>

    <!-- Partículas -->
    <div class="particles" id="particles"></div>

    <!-- Pantalla de carga Premium -->
    <div id="loadingScreen">
        <img src="assets/img/bizflow-sphere.gif" alt="TuKomercio" class="loader-logo">
        <div class="loader-text">TuKomercio</div>
        <div class="loader-subtitle">Suite Premium</div>
        <div class="loader-progress">
            <div class="loader-progress-bar"></div>
        </div>
    </div>

    <!-- Contenedor principal -->
    <div class="login-container">
        <!-- Panel izquierdo - Branding -->
        <div class="brand-panel">
            <img src="assets/img/bizflow-sphere.gif" alt="BizFlow Logo" class="brand-logo">
            <h1 class="brand-title">TuKomercio</h1>
            <p class="brand-subtitle">Business Suite</p>
            
            <div class="brand-features">
                <div class="feature-item">
                    <div class="feature-icon"><i class="bi bi-shop"></i></div>
                    <span>Crea y explora tiendas online</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon"><i class="bi bi-globe"></i></div>
                    <span>Creación de páginas web</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon"><i class="bi bi-box-seam"></i></div>
                    <span>Gestión de inventario</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon"><i class="bi bi-stars"></i></div>
                    <span>Dora IA - Tu asistente inteligente</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon"><i class="bi bi-grid-3x3-gap"></i></div>
                    <span>Apps, widgets y complementos</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon"><i class="bi bi-graph-up"></i></div>
                    <span>Analíticas y reportes</span>
                </div>
            </div>
        </div>

        <!-- Panel derecho - Formulario -->
        <div class="form-panel">
            <div class="form-header">
                <h2>Bienvenido de nuevo</h2>
                <p>Ingresa a tu cuenta para continuar</p>
            </div>

            <form id="loginForm">
                <div class="form-group">
                    <label class="form-label">Correo electrónico</label>
                    <div class="input-wrapper">
                        <input type="email" class="form-input" id="correo" placeholder="tu@correo.com" required autocomplete="email">
                        <i class="bi bi-envelope"></i>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Contraseña</label>
                    <div class="input-wrapper">
                        <input type="password" class="form-input" id="contrasenia" placeholder="••••••••" required autocomplete="current-password">
                        <i class="bi bi-lock"></i>
                    </div>
                </div>

                <button type="submit" class="btn-login" id="btnLogin">
                    <i class="bi bi-box-arrow-in-right me-2"></i>Iniciar Sesión
                </button>
            </form>

            <div id="loginMessage">
                <i class="bi bi-info-circle"></i>
                <span id="loginMessageText"></span>
            </div>

            <div class="form-links">
                <a href="recuperar_password.html">
                    <i class="bi bi-key me-1"></i>¿Olvidaste tu contraseña?
                </a>
            </div>

            <div class="divider">
                <span>¿Nuevo en Tukomercio?</span>
            </div>

            <a href="register.html" class="btn-register">
                <i class="bi bi-person-plus me-2"></i>Crear cuenta gratis
            </a>
        </div>
    </div>

    <!-- Badge versión -->
    <div class="version-badge">
        <i class="bi bi-gem me-1"></i> Tukomercio Suite v2.0
    </div>

    <!-- Librería de Confeti -->
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
    
    <!-- AuthClient -->
    <script src="assets/js/AuthClient.js"></script>

    <script>
        // ==========================================
        // SISTEMA DE SONIDOS
        // ==========================================
        const SoundFX = {
            enabled: true,
            
            // Crear contexto de audio
            context: null,
            
            init() {
                this.context = new (window.AudioContext || window.webkitAudioContext)();
            },
            
            // Sonido de click/tap
            click() {
                if (!this.enabled) return;
                this.playTone(800, 0.05, 'sine');
            },
            
            // Sonido de hover
            hover() {
                if (!this.enabled) return;
                this.playTone(600, 0.03, 'sine');
            },
            
            // Sonido de éxito
            success() {
                if (!this.enabled) return;
                // Acorde mayor ascendente
                this.playTone(523.25, 0.15, 'sine'); // C5
                setTimeout(() => this.playTone(659.25, 0.15, 'sine'), 100); // E5
                setTimeout(() => this.playTone(783.99, 0.2, 'sine'), 200); // G5
                setTimeout(() => this.playTone(1046.50, 0.3, 'sine'), 300); // C6
            },
            
            // Sonido de error
            error() {
                if (!this.enabled) return;
                this.playTone(200, 0.2, 'sawtooth');
                setTimeout(() => this.playTone(150, 0.3, 'sawtooth'), 100);
            },
            
            // Sonido de escritura
            type() {
                if (!this.enabled) return;
                this.playTone(1200 + Math.random() * 200, 0.02, 'sine');
            },
            
            // Sonido de whoosh (para transiciones)
            whoosh() {
    if (!this.enabled || !this.context) return;
    const osc = this.context.createOscillator();
                const gain = this.context.createGain();
                
                osc.connect(gain);
                gain.connect(this.context.destination);
                
                osc.frequency.setValueAtTime(400, this.context.currentTime);
                osc.frequency.exponentialRampToValueAtTime(100, this.context.currentTime + 0.3);
                
                gain.gain.setValueAtTime(0.1, this.context.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.01, this.context.currentTime + 0.3);
                
                osc.start(this.context.currentTime);
                osc.stop(this.context.currentTime + 0.3);
            },
            
            // Helper para crear tonos
            playTone(frequency, duration, type = 'sine') {
                if (!this.context) this.init();
                
                const osc = this.context.createOscillator();
                const gain = this.context.createGain();
                
                osc.connect(gain);
                gain.connect(this.context.destination);
                
                osc.frequency.value = frequency;
                osc.type = type;
                
                gain.gain.setValueAtTime(0.1, this.context.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.01, this.context.currentTime + duration);
                
                osc.start(this.context.currentTime);
                osc.stop(this.context.currentTime + duration);
            }
        };

        // ==========================================
        // SISTEMA DE CONFETI
        // ==========================================
        const ConfettiFX = {
            // Explosión de éxito
            success() {
                // Primera explosión
                confetti({
                    particleCount: 100,
                    spread: 70,
                    origin: { y: 0.6 },
                    colors: ['#667eea', '#764ba2', '#f093fb', '#00f2fe', '#ffffff']
                });
                
                // Segunda explosión lateral izquierda
                setTimeout(() => {
                    confetti({
                        particleCount: 50,
                        angle: 60,
                        spread: 55,
                        origin: { x: 0 },
                        colors: ['#667eea', '#764ba2', '#f093fb']
                    });
                }, 200);
                
                // Tercera explosión lateral derecha
                setTimeout(() => {
                    confetti({
                        particleCount: 50,
                        angle: 120,
                        spread: 55,
                        origin: { x: 1 },
                        colors: ['#667eea', '#764ba2', '#f093fb']
                    });
                }, 400);
            },
            
            // Lluvia continua
            rain(duration = 3000) {
                const end = Date.now() + duration;
                
                const frame = () => {
                    confetti({
                        particleCount: 2,
                        angle: 60,
                        spread: 55,
                        origin: { x: 0, y: 0 },
                        colors: ['#667eea', '#764ba2', '#f093fb']
                    });
                    confetti({
                        particleCount: 2,
                        angle: 120,
                        spread: 55,
                        origin: { x: 1, y: 0 },
                        colors: ['#667eea', '#764ba2', '#f093fb']
                    });
                    
                    if (Date.now() < end) {
                        requestAnimationFrame(frame);
                    }
                };
                
                frame();
            },
            
            // Estrellas
            stars() {
                const defaults = {
                    spread: 360,
                    ticks: 100,
                    gravity: 0,
                    decay: 0.94,
                    startVelocity: 30,
                    shapes: ['star'],
                    colors: ['#FFE400', '#FFBD00', '#E89400', '#FFCA6C', '#FDFFB8']
                };
                
                confetti({
                    ...defaults,
                    particleCount: 40,
                    scalar: 1.2,
                    origin: { y: 0.5, x: 0.5 }
                });
                
                confetti({
                    ...defaults,
                    particleCount: 20,
                    scalar: 0.75,
                    origin: { y: 0.5, x: 0.5 }
                });
            }
        };

        // ==========================================
        // CREAR PARTÍCULAS
        // ==========================================
        function createParticles() {
            const container = document.getElementById('particles');
            const particleCount = 50;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDuration = (Math.random() * 10 + 5) + 's';
                particle.style.animationDelay = Math.random() * 10 + 's';
                particle.style.opacity = Math.random() * 0.5 + 0.2;
                container.appendChild(particle);
            }
        }

        // ==========================================
        // INICIALIZACIÓN
        // ==========================================
        window.addEventListener('load', () => {
            createParticles();
            
            // Inicializar sonidos al primer click (requerido por navegadores)
            document.body.addEventListener('click', () => {
                if (!SoundFX.context) SoundFX.init();
            }, { once: true });

            // Ocultar loading con sonido whoosh
            setTimeout(() => {
                document.getElementById('loadingScreen').classList.add('hidden');
                setTimeout(() => SoundFX.whoosh(), 300);
            }, 2000);

            // Verificar parámetros URL
            const params = new URLSearchParams(window.location.search);
            if (params.get('registered') === 'true') {
                showMessage('¡Cuenta creada exitosamente! Ahora puedes iniciar sesión.', 'success');
                // Celebrar registro exitoso
                setTimeout(() => {
                    ConfettiFX.success();
                    SoundFX.success();
                }, 500);
            }
            if (params.get('reset') === 'true') {
                showMessage('Contraseña actualizada correctamente.', 'success');
            }
            
            // Agregar sonidos a inputs
            document.querySelectorAll('.form-input').forEach(input => {
                input.addEventListener('keydown', () => SoundFX.type());
                input.addEventListener('focus', () => SoundFX.click());
            });
            
            // Agregar sonidos a botones y links
            document.querySelectorAll('button, a').forEach(el => {
                el.addEventListener('mouseenter', () => SoundFX.hover());
                el.addEventListener('click', () => SoundFX.click());
            });
        });

        // ==========================================
        // MOSTRAR MENSAJES
        // ==========================================
        function showMessage(msg, type = 'error') {
            const container = document.getElementById('loginMessage');
            const text = document.getElementById('loginMessageText');
            container.className = type;
            text.textContent = msg;
            container.querySelector('i').className = type === 'success' ? 'bi bi-check-circle' : 'bi bi-exclamation-circle';
        }

        function hideMessage() {
            document.getElementById('loginMessage').className = '';
            document.getElementById('loginMessage').style.display = 'none';
        }

        // ==========================================
        // MANEJO DEL FORMULARIO
        // ==========================================
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            hideMessage();

            const btn = document.getElementById('btnLogin');
            const correo = document.getElementById('correo').value.trim();
            const contrasenia = document.getElementById('contrasenia').value;

            if (!correo || !contrasenia) {
                showMessage('Por favor completa todos los campos', 'error');
                return;
            }

            if (!window.authClient) {
                showMessage('Error del sistema. Recarga la página.', 'error');
                return;
            }

            try {
                btn.disabled = true;
                btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Verificando...';

                const result = await window.authClient.login(correo, contrasenia);

                if (result.success) {
                    btn.classList.add('success');
                    btn.innerHTML = '<i class="bi bi-check-circle me-2"></i>¡Bienvenido!';
                    
                    // 🎊 CELEBRACIÓN ÉPICA
                    SoundFX.success();
                    ConfettiFX.success();
                    
                    // Lluvia de confeti mientras redirige
                    setTimeout(() => ConfettiFX.rain(2000), 500);
                    
                    setTimeout(() => {
                        SoundFX.whoosh();
                        window.location.replace('TuKomercio.html');
                    }, 2000);
                } else {
                    let errorMsg = result.error;
                    switch(result.error) {
                        case 'too_many_attempts':
                            errorMsg = 'Demasiados intentos. Espera 15 minutos.';
                            break;
                        case 'account_inactive':
                            errorMsg = 'Cuenta desactivada. Contacta soporte.';
                            break;
                        case 'Credenciales incorrectas':
                            errorMsg = 'Correo o contraseña incorrectos';
                            break;
                    }
                    showMessage(errorMsg, 'error');
                    SoundFX.error();
                    btn.disabled = false;
                    btn.innerHTML = '<i class="bi bi-box-arrow-in-right me-2"></i>Reintentar';
                    document.getElementById('contrasenia').value = '';
                }

            } catch (error) {
                console.error('Error:', error);
                showMessage('Error de conexión. Verifica tu internet.', 'error');
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-box-arrow-in-right me-2"></i>Reintentar';
            }
        });

        // ==========================================
        // VERIFICAR SESIÓN EXISTENTE
        // ==========================================
        if (window.authClient && window.authClient.isLoggedIn()) {
            window.authClient.verifySession().then(result => {
                if (result.valid) {
                    window.location.replace('TuKomercio.html');
                }
            });
        }
    </script>
</body>
</html>