Tul xxx Tul

Viewing: login.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aircan — Terminal de Acceso</title>
    <link rel="icon" type="image/x-icon" href="images/ico.ico">
    <link rel="shortcut icon" type="image/x-icon" href="images/ico.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
    <style>
        /* Estilos base del sistema de login */
        :root {
            --primary: #1a2332;
            --secondary: #00e5ff;
            --accent: #ff6b35;
            --metallic: #c0c5ce;
            --metallic-dark: #8b95a1;
            --light: #f8f9fa;
            --dark: #0a0e1a;
            --white: #ffffff;
            --success: #27ae60;
            --warning: #f39c12;
            --neon: #00e5ff;
            --gradient-secondary: linear-gradient(135deg, #00e5ff 0%, #3498db 100%);
            --gradient-accent: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
            --grid: rgba(0, 229, 255, 0.12);
            --glow: rgba(0, 229, 255, 0.45);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #000000 0%, #000000 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--light);
            overflow: hidden;
            position: relative;
        }
        /* Matrix rain canvas and scanline overlay */
        #matrix {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            background: transparent;
        }
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background: repeating-linear-gradient(
                to bottom,
                rgba(255,255,255,0.02) 0px,
                rgba(255,255,255,0.02) 1px,
                transparent 2px,
                transparent 4px
            );
            pointer-events: none;
            z-index: 1;
            mix-blend-mode: overlay;
        }
        
        /* Efectos de partículas para fondo */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            overflow: hidden;
        }
        
        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            animation: float 15s infinite linear;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) translateX(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) translateX(100px) rotate(360deg);
                opacity: 0;
            }
        }
        
        /* Contenedor principal del login */
        .login-container {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 420px;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(14px);
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 24px var(--glow);
            border: 1px solid rgba(255, 255, 255, 0.05);
            animation: slideUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        @keyframes slideUp {
            from {
                transform: translateY(100px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        /* Encabezado del login */
        .login-header {
            text-align: center;
            padding: 30px 24px 22px;
            background: rgba(0,0,0,0.0);
            border-bottom: 1px solid var(--grid);
            position: relative;
            overflow: hidden;
        }
        
        .login-header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            z-index: 0;
        }
        
        .logo {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 18px;
        }
        
        .logo-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: clamp(220px, 58vw, 340px);
            height: auto;
            background: none;
            border-radius: 0;
            margin-right: 0;
            box-shadow: none;
            animation: none;
        }
        
        .logo-icon .logo-img {
            width: 100%;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 0 28px rgba(0,229,255,0.5));
        }
        
        .login-header h2 {
            font-size: 24px;
            font-weight: 600;
            margin-top: 10px;
            color: rgba(230, 255, 243, 0.9);
            position: relative;
            z-index: 2;
            text-shadow: 0 0 10px var(--glow);
        }
        /* Glitchy subtle animation */
        @keyframes glowFlicker {
            0%, 100% { text-shadow: 0 0 8px var(--glow), 0 0 2px var(--glow); opacity: 1; }
            92% { text-shadow: 0 0 4px var(--glow); opacity: 0.95; }
            95% { text-shadow: 0 0 16px var(--glow), 0 0 4px var(--glow); opacity: 1; }
            97% { opacity: 0.85; }
        }
        .login-header h2 { animation: glowFlicker 4.5s infinite; }
        
        /* Formulario de login */
        .login-form {
            padding: 24px 24px 26px;
        }
        
        .form-group {
            margin-bottom: 25px;
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
        }
        
        .input-with-icon {
            position: relative;
        }
        
        .input-with-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary);
            font-size: 18px;
            transition: color 0.3s;
        }
        
        .form-group input {
            width: 100%;
            padding: 15px 15px 15px 50px;
            border: none;
            background: rgba(6, 10, 14, 0.65);
            border-radius: 10px;
            font-size: 16px;
            color: white;
            transition: all 0.3s;
            border: 2px solid transparent;
            caret-color: var(--neon);
        }
        
        .form-group input:focus {
            outline: none;
            background: rgba(7, 12, 16, 0.85);
            border-color: var(--secondary);
            box-shadow: 0 0 18px var(--glow);
        }
        
        .form-group input:focus + i {
            color: var(--accent);
            animation: bounce 0.5s;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(-50%); }
            50% { transform: translateY(-60%); }
        }
        
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            font-size: 14px;
        }
        
        .remember-me {
            display: flex;
            align-items: center;
        }
        
        .remember-me input {
            margin-right: 8px;
            accent-color: var(--secondary);
        }
        
        .forgot-password {
            color: var(--secondary);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .forgot-password:hover {
            color: var(--accent);
            text-decoration: underline;
        }
        
        .btn-login {
            width: 100%;
            padding: 16px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: #ffffff;
            color: #000000;
            font-size: 18px;
            font-weight: 700;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
        }
        
        .btn-login::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
        }
        
        .btn-login:hover::before {
            left: 100%;
        }
        
        .btn-login:hover {
            transform: translateY(-3px);
            background: #f2f2f2 !important;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
            color: #000000;
        }
        
        .btn-login:active {
            transform: translateY(0);
        }
        
        /* Pie de página del login */
        .login-footer {
            text-align: center;
            padding: 25px 30px;
            background: rgba(0, 0, 0, 0.1);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .login-footer p {
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
        }
        
        .social-login {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .social-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            text-decoration: none;
            transition: all 0.3s;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }
        
        .social-btn:hover {
            transform: translateY(-5px) rotate(5deg);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
        }
        
        .btn-google {
            background: linear-gradient(135deg, #DB4437 0%, #EA4335 100%);
        }
        
        .btn-microsoft {
            background: linear-gradient(135deg, #00A4EF 0%, #0078D7 100%);
        }
        
        .btn-apple {
            background: linear-gradient(135deg, #000000 0%, #434343 100%);
        }
        
        /* Mensajes de retroalimentación */
        .message {
            padding: 15px;
            margin: 20px 0;
            border-radius: 10px;
            text-align: center;
            font-weight: 500;
            display: none;
            animation: fadeIn 0.5s;
        }
        
        .error-message {
            background: linear-gradient(180deg, rgba(231, 76, 60, 0.18) 0%, rgba(231, 76, 60, 0.12) 100%);
            border: 1px solid var(--accent);
            color: #ffb3a6;
            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.25);
            text-shadow: 0 0 6px rgba(255,107,53,0.3);
        }
        
        .success-message {
            background: rgba(39, 174, 96, 0.2);
            border: 1px solid var(--success);
            color: #a3ffc9;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* Shake animation for error feedback */
        .shake { animation: shakeX 0.42s cubic-bezier(.36,.07,.19,.97); }
        @keyframes shakeX {
            10%, 90% { transform: translateX(-2px); }
            20%, 80% { transform: translateX(4px); }
            30%, 50%, 70% { transform: translateX(-8px); }
            40%, 60% { transform: translateX(8px); }
        }
        
        /* Panel de bienvenida */
        .welcome-panel {
            display: none;
            padding: 40px;
            text-align: center;
            animation: scaleIn 0.5s;
        }
        
        @keyframes scaleIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        
        .welcome-icon {
            font-size: 80px;
            color: var(--success);
            margin-bottom: 20px;
            animation: bounceIn 1s;
        }
        
        @keyframes bounceIn {
            0% { transform: scale(0.5); opacity: 0; }
            60% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); }
        }
        
        .welcome-panel h2 {
            font-size: 32px;
            margin-bottom: 15px;
            color: white;
        }
        
        .welcome-panel p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 30px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
        }
        
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            font-size: 36px;
            color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .user-details h3 {
            font-size: 24px;
            margin-bottom: 5px;
            color: white;
        }
        
        .user-details p {
            color: var(--secondary);
            font-size: 16px;
            margin-bottom: 0;
        }
        
        .dashboard-btn {
            display: inline-block;
            padding: 15px 40px;
            background: linear-gradient(135deg, var(--success) 0%, #2ecc71 100%);
            color: white;
            text-decoration: none;
            font-size: 18px;
            font-weight: 700;
            border-radius: 10px;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .dashboard-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        .logout-link {
            display: inline-block;
            margin-top: 20px;
            color: var(--secondary);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }
        
        .logout-link:hover {
            color: var(--accent);
            text-decoration: underline;
        }
        
        /* Efecto de seguridad */
        .security-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(5, 10, 12, 0.92);
            border-top: 1px solid var(--grid);
            border-bottom: 1px solid var(--grid);
            box-shadow: inset 0 0 20px var(--glow);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
            display: none;
        }
        
        .security-icon {
            font-size: 60px;
            color: var(--success);
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }
        
        .security-text {
            font-size: 24px;
            font-weight: 700;
            color: white;
            text-align: center;
            max-width: 80%;
        }
        
        /* Responsive */
        @media (max-width: 600px) {
            html, body {
                height: 100%;
                min-height: 100vh;
                max-height: 100vh;
                overflow-y: auto;
            }
            body {
                min-height: 100vh;
                max-height: 100vh;
                overflow-y: auto;
                padding: 0;
            }
            .login-container {
                width: 98%;
                margin: 10px auto;
                max-width: 340px;
            }
            .logo-icon {
                width: clamp(180px, 70vw, 240px);
                margin-bottom: 8px;
            }
            .login-header {
                padding: 18px 10px 10px;
            }
            .login-header h2 {
                font-size: 18px;
                margin-top: 4px;
            }
            .login-form {
                padding: 12px 8px 8px 8px;
            }
            .form-group input {
                font-size: 14px;
                padding: 10px 10px 10px 38px;
                border-radius: 7px;
            }
            .toggle-password {
                font-size: 15px;
                right: 10px;
            }
            .btn-login {
                font-size: 15px;
                padding: 12px;
                border-radius: 7px;
            }
            .welcome-panel {
                padding: 18px 8px;
            }
            .welcome-icon {
                font-size: 48px;
                margin-bottom: 10px;
            }
            .user-avatar {
                width: 48px;
                height: 48px;
                font-size: 22px;
                margin-right: 10px;
            }
            .user-details h3 {
                font-size: 16px;
            }
            .user-details p {
                font-size: 13px;
            }
            .dashboard-btn {
                font-size: 15px;
                padding: 10px 20px;
                border-radius: 7px;
            }
            .logout-link {
                font-size: 12px;
            }
            .message {
                font-size: 13px;
                padding: 10px;
                margin: 10px 0;
            }
        }
        /* Animación sutil de fondo solo en móviles */
        @media (max-width: 600px) {
            .particles .particle {
                background: rgba(52,152,219,0.13);
                filter: blur(1.5px);
                animation: floatMobile 10s infinite linear;
            }
            @keyframes floatMobile {
                0% { transform: translateY(0) scale(1); opacity: 0.5; }
                50% { transform: translateY(-40vh) scale(1.2); opacity: 0.7; }
                100% { transform: translateY(-80vh) scale(1); opacity: 0.3; }
            }
        }
        .form-group input[type="password"],
        .form-group input[type="text"]#password {
            padding-right: 44px;
        }
        .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: var(--secondary);
            font-size: 20px;
            z-index: 3;
            background: rgba(0, 229, 255, 0.08);
            border-radius: 50%;
            padding: 4px;
            border: none;
            outline: none;
            height: 28px;
            width: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, color 0.2s, transform 0.15s;
        }
        .toggle-password:active {
            transform: translateY(-50%) scale(1.2);
            background: rgba(0, 229, 255, 0.18);
        }
        .toggle-password:hover {
            background: rgba(0, 229, 255, 0.18);
            color: var(--secondary);
        }
        .toggle-password.active {
            color: #e67e22;
        }
        /* Botón verde moderno para acceder */
        .btn-login {
            width: 100%;
            padding: 16px;
            border: none;
            background: #ffffff;
            color: #000000;
            font-size: 18px;
            font-weight: 700;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s, box-shadow 0.2s;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
            animation: pulseBtn 1.2s;
        }
        .btn-login::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
            transition: 0.5s;
        }
        .btn-login:hover::before {
            left: 100%;
        }
        .btn-login:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
            background: #f2f2f2;
            color: #000000;
        }
        .btn-login:active {
            transform: translateY(0) scale(0.98);
        }
        @keyframes pulseBtn {
            0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16); }
            70% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
        }
        /* Responsive: botón y ojo más pequeños */
        @media (max-width: 600px) {
            .toggle-password {
                font-size: 16px;
                height: 22px;
                width: 22px;
                padding: 2px;
            }
            .btn-login {
                font-size: 15px;
                padding: 12px;
                border-radius: 7px;
            }
        }
    </style>
</head>
<body>
    <!-- Fondo Matrix Rain -->
    <canvas id="matrix"></canvas>
    
    <!-- Contenedor principal -->
    <div class="login-container" id="loginContainer">
        <!-- Encabezado -->
        <div class="login-header">
            <div class="logo">
                <div class="logo-icon">
                    <img src="images/Logo.png" alt="Aircan" class="logo-img" />
                </div>
            </div>
            <h2>Terminal de Acceso</h2>
        </div>
        
        <!-- Mensajes de retroalimentación -->
        <div class="message error-message" id="errorMessage">
            Credenciales incorrectas. Por favor, intente de nuevo.
        </div>
        
        <!-- Formulario de login -->
        <form class="login-form" id="loginForm" method="POST" action="login.php" autocomplete="off">
            <div class="form-group">
                <label for="usuario">Correo o Usuario</label>
                <div class="input-with-icon">
                    <i class="fas fa-envelope"></i>
                    <input type="text" id="usuario" name="usuario" placeholder="Tu correo o usuario" autocomplete="off">
                </div>
            </div>
            
            <div class="form-group">
                <label for="password">Contraseña</label>
                <div class="input-with-icon" style="position:relative;">
                    <i class="fas fa-key"></i>
                    <input type="password" id="password" name="password" placeholder="••••••••" autocomplete="off">
                    <span class="toggle-password" id="togglePassword">
                        <i class="fas fa-eye"></i>
                    </span>
                </div>
            </div>
            
            <!-- <div class="remember-forgot">
                <div class="remember-me">
                    <input type="checkbox" id="remember">
                    <label for="remember">Recordarme</label>
                </div>
                <a href="#" class="forgot-password">¿Olvidaste tu contraseña?</a>
            </div> -->
            
            <button class="btn-login" id="loginBtn" type="submit">Acceder al Sistema</button> 
            <br>
            <br>
            <button type="button" class="btn-login" id="btnRegresar"><i class="fas fa-arrow-left"></i> Regresar</button>
        </form>
        
        <!-- Panel de bienvenida (oculto inicialmente) -->
        <div class="welcome-panel" id="welcomePanel">
            <div class="welcome-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <h2>¡Bienvenido de nuevo!</h2>
            <p>Acceso verificado correctamente al sistema seguro</p>
            
            <div class="user-info">
                <div class="user-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="user-details">
                    <h3>Aircan</h3>
                    <p>Cliente Premium</p>
                </div>
            </div>
            
            <a href="#" class="dashboard-btn">
                <i class="fas fa-chart-line"></i> Ir al Panel de Control
            </a>
            
            <a href="#" class="logout-link" id="logoutLink">Cerrar Sesión</a>
        </div>
        
        <!-- Pie de página -->
        <!-- <div class="login-footer">
            <p>Acceso seguro con encriptación de 256-bit</p>
            <div class="social-login">
                <a href="#" class="social-btn btn-google">
                    <i class="fab fa-google"></i>
                </a>
                <a href="#" class="social-btn btn-microsoft">
                    <i class="fab fa-microsoft"></i>
                </a>
                <a href="#" class="social-btn btn-apple">
                    <i class="fab fa-apple"></i>
                </a>
            </div>
        </div> -->
    </div>
    
    <!-- Overlay de seguridad -->
    <div class="security-overlay" id="securityOverlay">
        <div class="security-icon">
            <i class="fas fa-shield-alt"></i>
        </div>
        <div class="security-text">
            Verificando credenciales y estableciendo conexión segura...
        </div>
    </div>
    
    <script>
        // Matrix Rain background
        function startMatrix() {
            const canvas = document.getElementById('matrix');
            if (!canvas) return;
            const ctx = canvas.getContext('2d');
            let w, h, fontSize = 16, columns, drops = [];
            const glyphs = '01<>[]{}\\/|=+-_*#@$%&';
            function resize() {
                w = canvas.width = window.innerWidth;
                h = canvas.height = window.innerHeight;
                columns = Math.floor(w / fontSize);
                drops = new Array(columns).fill(1 + Math.random() * 20);
            }
            resize();
            window.addEventListener('resize', resize);
            function draw() {
                ctx.fillStyle = 'rgba(0,0,0,0.06)';
                ctx.fillRect(0, 0, w, h);
                ctx.fillStyle = '#00e5ff';
                ctx.shadowColor = 'rgba(0,229,255,0.6)';
                ctx.shadowBlur = 8;
                ctx.font = fontSize + "px 'Share Tech Mono', monospace";
                for (let i = 0; i < drops.length; i++) {
                    const char = glyphs[Math.floor(Math.random() * glyphs.length)];
                    const x = i * fontSize;
                    const y = drops[i] * fontSize;
                    ctx.fillText(char, x, y);
                    if (y > h && Math.random() > 0.975) drops[i] = 0;
                    drops[i]++;
                }
                ctx.shadowBlur = 0;
                requestAnimationFrame(draw);
            }
            draw();
        }
        
        // Validación del formulario
        function validateLogin() {
            const usuario = document.getElementById('usuario').value;
            const password = document.getElementById('password').value;
            const errorMessage = document.getElementById('errorMessage');
            
            if (!usuario || !password) {
                errorMessage.textContent = "Por favor, complete todos los campos";
                errorMessage.style.display = 'block';
                return false;
            }
            
            if (usuario.length < 3) {
                errorMessage.textContent = "Por favor, ingrese un usuario o correo válido";
                errorMessage.style.display = 'block';
                return false;
            }
            
            // Eliminada la restricción de longitud mínima de contraseña
            errorMessage.style.display = 'none';
            return true;
        }

        // Event listeners
        document.addEventListener('DOMContentLoaded', () => {
            // Iniciar Matrix Rain
            startMatrix();

            // Enviar con AJAX y mostrar alerta en la misma página
            const loginForm = document.getElementById('loginForm');
            const loginBtn = document.getElementById('loginBtn');
            const errorMessage = document.getElementById('errorMessage');
            const loginContainer = document.getElementById('loginContainer');

            loginForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                if (!validateLogin()) {
                    loginContainer.classList.add('shake');
                    if (navigator.vibrate) navigator.vibrate(120);
                    setTimeout(() => loginContainer.classList.remove('shake'), 420);
                    return;
                }
                try {
                    if (loginBtn) { loginBtn.disabled = true; loginBtn.textContent = 'Verificando...'; }
                    const formData = new FormData(loginForm);
                    const res = await fetch('login.php', {
                        method: 'POST',
                        body: formData,
                        headers: { 'Accept': 'application/json' }
                    });
                    let data = null;
                    try { data = await res.json(); } catch(_) {}
                    if (data && data.ok) {
                        errorMessage.style.display = 'none';
                        window.location.href = data.redirect || 'panel.php';
                    } else {
                        const msg = (data && data.error) ? data.error : 'Credenciales inválidas. Intenta nuevamente.';
                        errorMessage.textContent = msg;
                        errorMessage.style.display = 'block';
                        loginContainer.classList.add('shake');
                        if (navigator.vibrate) navigator.vibrate(150);
                        setTimeout(() => loginContainer.classList.remove('shake'), 420);
                    }
                } catch (err) {
                    errorMessage.textContent = 'No se pudo conectar. Verifica tu red e intenta de nuevo.';
                    errorMessage.style.display = 'block';
                    loginContainer.classList.add('shake');
                    setTimeout(() => loginContainer.classList.remove('shake'), 420);
                } finally {
                    if (loginBtn) { loginBtn.disabled = false; loginBtn.textContent = 'Acceder al Sistema'; }
                }
            });

            // Permitir login con Enter
            document.getElementById('password').addEventListener('keyup', (e) => {
                if (e.key === 'Enter') {
                    // No hace falta llamar a login(), el submit se encarga
                }
            });

            // Efecto al enfocar campos
                const inputs = document.querySelectorAll('input');
                inputs.forEach(input => {
                    input.addEventListener('focus', () => {
                        input.parentElement.querySelector('i').style.color = getComputedStyle(document.documentElement).getPropertyValue('--secondary').trim() || '#00e5ff';
                    });
                    
                    input.addEventListener('blur', () => {
                        input.parentElement.querySelector('i').style.color = getComputedStyle(document.documentElement).getPropertyValue('--secondary').trim() || '#00e5ff';
                    });
                });

            // Mostrar/ocultar contraseña
            const passwordInput = document.getElementById('password');
            const togglePassword = document.getElementById('togglePassword');
            if (togglePassword && passwordInput) {
                togglePassword.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    if (passwordInput.type === 'password') {
                        passwordInput.type = 'text';
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                        this.classList.add('active');
                    } else {
                        passwordInput.type = 'password';
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                        this.classList.remove('active');
                    }
                    // Efecto rebote
                    this.style.transform = 'translateY(-50%) scale(1.2)';
                    setTimeout(() => {
                        this.style.transform = 'translateY(-50%) scale(1)';
                    }, 180);
                });
            }

            // Botón Regresar
            const btnRegresar = document.getElementById('btnRegresar');
            if (btnRegresar) {
                btnRegresar.addEventListener('click', function() {
                    window.location.href = 'index.html';
                });
            }
        });
    </script>
</body>
</html>
User / IP	: 216.73.217.33
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64