<?php
require_once("config/conexion.php");
if(isset($_POST["enviar"]) and $_POST["enviar"]=="si"){
    require_once("models/Usuario.php");
    $usuario = new Usuario();
    $usuario->login();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>HelpDesk JR.</title>

    <link rel="apple-touch-icon" sizes="144x144" href="img/favicon.144x144.png">
    <link rel="icon" href="img/favicon.png" type="image/png">

    <link rel="stylesheet" href="public/css/separate/pages/login.min.css">
    <link rel="stylesheet" href="public/css/lib/font-awesome/font-awesome.min.css">
    <link rel="stylesheet" href="public/css/lib/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="public/css/main.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            position: relative;
        }
        
        .page-center {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            position: relative;
        }
        
        .login-bg {
            position: fixed;
            width: 100%;
            height: 100%;
            background-image: url('public/img/1PuebloSibate.jpg');
            background-size: cover;
            background-position: center;
            z-index: -1;
        }
        
        .login-bg::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(2px);
        }
        
        .sign-box {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(20px);
            padding: 0;
            border-radius: 25px;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
            width: 100%;
            max-width: 950px;
            min-height: 550px;
            display: flex;
            overflow: hidden;
            position: relative;
            animation: slideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(50px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        /* Panel izquierdo - Información del tipo de usuario */
        .login-info-panel {
            flex: 1;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            padding: 60px 40px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .login-info-panel.soporte-mode {
            background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
        }
        
        .login-info-panel::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            top: -100px;
            right: -100px;
            animation: float 6s ease-in-out infinite;
        }
        
        .login-info-panel::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 50%;
            bottom: -50px;
            left: -50px;
            animation: float 8s ease-in-out infinite reverse;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        /* Robot animado */
        .robot-container {
            width: 150px;
            height: 150px;
            margin: 0 auto 20px;
            position: relative;
            z-index: 1;
        }
        
        .robot {
            width: 100%;
            height: 100%;
            position: relative;
            transition: transform 0.1s ease-out;
        }
        
        .robot-head {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .robot-antenna {
            width: 4px;
            height: 20px;
            background: rgba(255, 255, 255, 0.8);
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }
        
        .robot-antenna::after {
            content: '';
            width: 12px;
            height: 12px;
            background: #3498db;
            border-radius: 50%;
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            animation: blink 2s ease-in-out infinite;
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; box-shadow: 0 0 10px #3498db; }
            50% { opacity: 0.3; box-shadow: 0 0 5px #3498db; }
        }
        
        .robot-eyes {
            display: flex;
            justify-content: space-around;
            padding: 20px 15px;
        }
        
        .robot-eye {
            width: 20px;
            height: 20px;
            background: #2c3e50;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
        }
        
        .robot-pupil {
            width: 10px;
            height: 10px;
            background: #3498db;
            border-radius: 50%;
            position: absolute;
            top: 5px;
            left: 5px;
            transition: all 0.1s ease-out;
        }
        
        .robot-mouth {
            width: 40px;
            height: 20px;
            border: 3px solid #2c3e50;
            border-top: none;
            border-radius: 0 0 20px 20px;
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            transition: all 0.3s ease;
        }
        
        .robot-body {
            width: 90px;
            height: 60px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            position: absolute;
            top: 85px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }
        
        .robot-body::before {
            content: '';
            width: 30px;
            height: 30px;
            background: #3498db;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: heartbeat 1.5s ease-in-out infinite;
        }
        
        @keyframes heartbeat {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.1); }
        }
        
        .robot-arm {
            width: 15px;
            height: 50px;
            background: rgba(255, 255, 255, 0.85);
            border-radius: 10px;
            position: absolute;
            top: 90px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .robot-arm.left {
            left: 15px;
            animation: wave-left 2s ease-in-out infinite;
        }
        
        .robot-arm.right {
            right: 15px;
            animation: wave-right 2s ease-in-out infinite;
        }
        
        @keyframes wave-left {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(-15deg); }
        }
        
        @keyframes wave-right {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(15deg); }
        }
        
        .robot:hover .robot-mouth {
            border-radius: 0 0 30px 30px;
            height: 25px;
        }
        
        .info-icon {
            width: 120px;
            height: 120px;
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
            animation: iconPulse 3s ease-in-out infinite;
        }
        
        @keyframes iconPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        .info-icon i {
            font-size: 80px;
            color: white;
            text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .info-title {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .info-description {
            font-size: 1rem;
            line-height: 1.6;
            opacity: 0.95;
            max-width: 350px;
            position: relative;
            z-index: 1;
            margin-bottom: 30px;
        }
        
        .info-features {
            list-style: none;
            text-align: left;
            position: relative;
            z-index: 1;
        }
        
        .info-features li {
            padding: 10px 0;
            font-size: 0.95rem;
            opacity: 0.9;
        }
        
        .info-features li i {
            margin-right: 10px;
            color: rgba(255, 255, 255, 0.8);
        }
        
        /* Panel derecho - Formulario */
        .login-form-panel {
            flex: 1;
            padding: 60px 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
        }
        
        .form-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .form-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #f0f0f0;
            transition: all 0.3s ease;
        }
        
        .form-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.3s ease;
        }
        
        .form-logo:hover {
            transform: rotate(360deg);
            border-color: #1e3c72;
        }
        
        .form-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .form-subtitle {
            font-size: 0.95rem;
            color: #7f8c8d;
        }
        
        .form-group {
            margin-bottom: 25px;
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #2c3e50;
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .input-wrapper {
            position: relative;
        }
        
        .input-wrapper i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: #95a5a6;
            font-size: 18px;
            transition: all 0.3s ease;
        }
        
        .form-control {
            width: 100%;
            padding: 15px 20px 15px 50px;
            border: 2px solid #ecf0f1;
            border-radius: 12px;
            font-size: 15px;
            transition: all 0.3s ease;
            background: #f8f9fa;
            color: #2c3e50;
        }
        
        .form-control:focus {
            border-color: #3498db;
            outline: none;
            background: white;
            box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
        }
        
        .form-control:focus + i {
            color: #3498db;
        }
        
        .form-control::placeholder {
            color: #bdc3c7;
        }
        
        .btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 10px;
            box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(52, 152, 219, 0.4);
        }
        
        .btn:active {
            transform: translateY(-1px);
        }
        
        .switch-mode {
            text-align: center;
            margin-top: 25px;
            padding-top: 25px;
            border-top: 1px solid #ecf0f1;
        }
        
        .switch-mode p {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        
        .switch-mode a {
            color: #3498db;
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            padding: 8px 20px;
            border-radius: 8px;
        }
        
        .switch-mode a:hover {
            background: rgba(52, 152, 219, 0.1);
            gap: 12px;
        }
        
        .alert {
            margin-bottom: 20px;
            padding: 15px 20px;
            border-radius: 12px;
            animation: shake 0.5s ease;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }
        
        .alert-warning {
            background: #fff3cd;
            color: #856404;
            border-left: 4px solid #ffc107;
        }
        
        .alert .close {
            margin-left: auto;
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: inherit;
            opacity: 0.6;
            transition: opacity 0.3s;
        }
        
        .alert .close:hover {
            opacity: 1;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .sign-box {
                flex-direction: column;
                max-width: 95%;
                margin: 20px;
            }
            
            .login-info-panel {
                padding: 40px 30px;
                min-height: 300px;
            }
            
            .login-form-panel {
                padding: 40px 30px;
            }
            
            .info-title {
                font-size: 1.8rem;
            }
            
            .form-title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="login-bg"></div>
    <div class="page-center">
        <div class="page-center-in">
            <div class="container-fluid">
                <div class="sign-box">
                    <!-- Panel Izquierdo - Información -->
                    <div class="login-info-panel" id="infoPanel">
                        <!-- Robot Animado -->
                        <div class="robot-container">
                            <div class="robot" id="robot">
                                <div class="robot-head">
                                    <div class="robot-antenna"></div>
                                    <div class="robot-eyes">
                                        <div class="robot-eye">
                                            <div class="robot-pupil" id="pupilLeft"></div>
                                        </div>
                                        <div class="robot-eye">
                                            <div class="robot-pupil" id="pupilRight"></div>
                                        </div>
                                    </div>
                                    <div class="robot-mouth"></div>
                                </div>
                                <div class="robot-body"></div>
                                <div class="robot-arm left"></div>
                                <div class="robot-arm right"></div>
                            </div>
                        </div>
                        <h2 class="info-title" id="tituloTipo">Portal de Usuario</h2>
                        <p class="info-description" id="descripcionTipo">
                            Accede a tu cuenta para gestionar tus tickets de soporte y consultar el estado de tus solicitudes.
                        </p>
                        <ul class="info-features" id="featuresList">
                            <li><i class="fa fa-check-circle"></i> Crear nuevos tickets</li>
                            <li><i class="fa fa-check-circle"></i> Consultar estado de solicitudes</li>
                            <li><i class="fa fa-check-circle"></i> Historial de tickets</li>
                            <li><i class="fa fa-check-circle"></i> Soporte 24/7</li>
                        </ul>
                    </div>

                    <!-- Panel Derecho - Formulario -->
                    <div class="login-form-panel">
                        <form action="" method="post" id="login_form">
                            <input type="hidden" id="rol_id" name="rol_id" value="1">
                            
                            <div class="form-header">
                                <div class="form-logo">
                                    <img src="public/1.jpg" alt="" id="imgtipo">
                                </div>
                                <h1 class="form-title" id="lbltitulo">Iniciar Sesión</h1>
                                <p class="form-subtitle">Ingresa tus credenciales para continuar</p>
                            </div>

                            <?php
                                if (isset($_GET["m"])){
                                    switch($_GET["m"]){
                                        case "1":
                                            echo '<div class="alert alert-warning" role="alert">
                                                    <i class="fa fa-exclamation-triangle"></i>
                                                    <span>El Usuario y/o Contraseña son incorrectos.</span>
                                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                  </div>';
                                        break;

                                        case "2":
                                            echo '<div class="alert alert-warning" role="alert">
                                                    <i class="fa fa-exclamation-triangle"></i>
                                                    <span>Por favor completa todos los campos.</span>
                                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                  </div>';
                                        break;
                                    }
                                }
                            ?>

                            <div class="form-group">
                                <label for="usu_correo">Correo Electrónico</label>
                                <div class="input-wrapper">
                                    <input type="text" id="usu_correo" name="usu_correo" class="form-control" placeholder="ejemplo@correo.com" required />
                                    <i class="fa fa-envelope"></i>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="usu_pass">Contraseña</label>
                                <div class="input-wrapper">
                                    <input type="password" id="usu_pass" name="usu_pass" class="form-control" placeholder="Ingresa tu contraseña" required />
                                    <i class="fa fa-lock"></i>
                                </div>
                            </div>

                            <input type="hidden" name="enviar" class="form-control" value="si">
                            <button type="submit" class="btn btn-rounded">
                                <i class="fa fa-sign-in"></i> Acceder
                            </button>

                            <div class="switch-mode">
                                <p>¿Eres personal de soporte?</p>
                                <a href="#" id="btnsoporte">
                                    <i class="fa fa-exchange"></i>
                                    <span id="textoSwitch">Cambiar a Acceso Soporte</span>
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="public/js/lib/jquery/jquery.min.js"></script>
    <script src="public/js/lib/tether/tether.min.js"></script>
    <script src="public/js/lib/bootstrap/bootstrap.min.js"></script>
    <script src="public/js/plugins.js"></script>
    <script src="public/js/lib/match-height/jquery.matchHeight.min.js"></script>
    <script>
        $(function() {
            $('.page-center').matchHeight({
                target: $('html')
            });
            $(window).resize(function(){
                setTimeout(function(){
                    $('.page-center').matchHeight({ remove: true });
                    $('.page-center').matchHeight({
                        target: $('html')
                    });
                },100);
            });
        });
    </script>
    <script src="public/js/app.js"></script>
    <script>
        // Configuración de contenido para cada modo
        const modoConfig = {
            usuario: {
                rol_id: 1,
                imagen: 'public/1.jpg',
                titulo: 'Iniciar Sesión',
                panelTitulo: 'Portal de Usuario',
                panelDescripcion: 'Accede a tu cuenta para gestionar tus tickets de soporte y consultar el estado de tus solicitudes.',
                panelIcono: 'fa-user-circle',
                panelClase: '',
                features: [
                    '<i class="fa fa-check-circle"></i> Crear nuevos tickets',
                    '<i class="fa fa-check-circle"></i> Consultar estado de solicitudes',
                    '<i class="fa fa-check-circle"></i> Historial de tickets',
                    '<i class="fa fa-check-circle"></i> Soporte 24/7'
                ],
                switchTexto: 'Cambiar a Acceso Soporte',
                switchPregunta: '¿Eres personal de soporte?'
            },
            soporte: {
                rol_id: 2,
                imagen: 'public/2.jpg',
                titulo: 'Acceso Soporte',
                panelTitulo: 'Portal de Soporte',
                panelDescripcion: 'Panel administrativo para gestionar tickets, asignar tareas y brindar soporte técnico a los usuarios.',
                panelIcono: 'fa-headphones',
                panelClase: 'soporte-mode',
                features: [
                    '<i class="fa fa-check-circle"></i> Gestionar todos los tickets',
                    '<i class="fa fa-check-circle"></i> Asignar solicitudes',
                    '<i class="fa fa-check-circle"></i> Panel administrativo',
                    '<i class="fa fa-check-circle"></i> Reportes y estadísticas'
                ],
                switchTexto: 'Cambiar a Acceso Usuario',
                switchPregunta: '¿Eres un usuario regular?'
            }
        };

        let modoActual = 'usuario';

        function cambiarModo(nuevoModo) {
            const config = modoConfig[nuevoModo];
            
            // Actualizar valores del formulario
            $('#rol_id').val(config.rol_id);
            
            // Animar cambios con transiciones suaves
            $('#imgtipo').fadeOut(200, function() {
                $(this).attr('src', config.imagen).fadeIn(200);
            });
            
            $('#lbltitulo').fadeOut(200, function() {
                $(this).text(config.titulo).fadeIn(200);
            });
            
            // Actualizar panel informativo con animación
            $('#iconoTipo').fadeOut(200, function() {
                $(this).removeClass().addClass('fa ' + config.panelIcono).fadeIn(200);
            });
            
            $('#tituloTipo').fadeOut(200, function() {
                $(this).text(config.panelTitulo).fadeIn(200);
            });
            
            $('#descripcionTipo').fadeOut(200, function() {
                $(this).text(config.panelDescripcion).fadeIn(200);
            });
            
            // Actualizar features con animación escalonada
            const $features = $('#featuresList');
            $features.fadeOut(300, function() {
                $features.empty();
                config.features.forEach(function(feature, index) {
                    const $li = $('<li>').html(feature).css('opacity', 0);
                    $features.append($li);
                    setTimeout(function() {
                        $li.animate({ opacity: 1 }, 300);
                    }, index * 100);
                });
                $features.fadeIn(300);
            });
            
            // Actualizar clase del panel con transición
            const $panel = $('#infoPanel');
            if (nuevoModo === 'soporte') {
                $panel.addClass('soporte-mode');
            } else {
                $panel.removeClass('soporte-mode');
            }
            
            // Actualizar texto del switch
            $('.switch-mode p').fadeOut(200, function() {
                $(this).text(config.switchPregunta).fadeIn(200);
            });
            
            $('#textoSwitch').fadeOut(200, function() {
                $(this).text(config.switchTexto).fadeIn(200);
            });
            
            modoActual = nuevoModo;
        }

        // Evento click para cambiar modo
        $(document).on("click", "#btnsoporte", function(e) {
            e.preventDefault();
            
            // Agregar efecto de escala al hacer clic
            $(this).css('transform', 'scale(0.95)');
            setTimeout(() => {
                $(this).css('transform', 'scale(1)');
            }, 100);
            
            // Cambiar entre modos
            if (modoActual === 'usuario') {
                cambiarModo('soporte');
            } else {
                cambiarModo('usuario');
            }
        });

        // Animación de entrada inicial
        $(document).ready(function() {
            $('.sign-box').css('opacity', 0).animate({ opacity: 1 }, 600);
            
            // Animar features iniciales
            $('#featuresList li').each(function(index) {
                $(this).css('opacity', 0).delay(index * 100).animate({ opacity: 1 }, 300);
            });
        });

        // Efecto hover en inputs
        $('.form-control').on('focus', function() {
            $(this).parent().find('i').css('color', '#3498db');
        }).on('blur', function() {
            $(this).parent().find('i').css('color', '#95a5a6');
        });

        // ===================================
        // ROBOT QUE SIGUE EL MOUSE
        // ===================================
        const robot = document.getElementById('robot');
        const pupilLeft = document.getElementById('pupilLeft');
        const pupilRight = document.getElementById('pupilRight');
        const infoPanel = document.getElementById('infoPanel');

        // Función para mover las pupilas del robot
        function moveRobotEyes(e) {
            if (!robot || !pupilLeft || !pupilRight || !infoPanel) return;

            // Obtener posición del panel
            const panelRect = infoPanel.getBoundingClientRect();
            
            // Calcular posición del mouse relativa al panel
            const mouseX = e.clientX - panelRect.left;
            const mouseY = e.clientY - panelRect.top;
            
            // Obtener centro del robot
            const robotRect = robot.getBoundingClientRect();
            const robotCenterX = robotRect.left + robotRect.width / 2 - panelRect.left;
            const robotCenterY = robotRect.top + robotRect.height / 2 - panelRect.top;
            
            // Calcular ángulo y distancia
            const deltaX = mouseX - robotCenterX;
            const deltaY = mouseY - robotCenterY;
            const angle = Math.atan2(deltaY, deltaX);
            
            // Limitar el movimiento de las pupilas
            const maxDistance = 5; // píxeles máximos de movimiento
            const distance = Math.min(maxDistance, Math.sqrt(deltaX * deltaX + deltaY * deltaY) / 20);
            
            // Calcular nueva posición de las pupilas
            const pupilX = Math.cos(angle) * distance;
            const pupilY = Math.sin(angle) * distance;
            
            // Aplicar movimiento a las pupilas
            pupilLeft.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
            pupilRight.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
            
            // Inclinar ligeramente el robot hacia el mouse
            const tiltX = (deltaX / panelRect.width) * 5; // máximo 5 grados
            const tiltY = (deltaY / panelRect.height) * 5;
            robot.style.transform = `rotate(${tiltX}deg) rotateX(${-tiltY}deg)`;
        }

        // Evento de movimiento del mouse en todo el documento
        document.addEventListener('mousemove', moveRobotEyes);

        // Resetear posición cuando el mouse sale del panel
        if (infoPanel) {
            infoPanel.addEventListener('mouseleave', function() {
                if (pupilLeft && pupilRight && robot) {
                    pupilLeft.style.transform = 'translate(0, 0)';
                    pupilRight.style.transform = 'translate(0, 0)';
                    robot.style.transform = 'rotate(0deg) rotateX(0deg)';
                }
            });
        }

        // Efecto de parpadeo aleatorio
        function randomBlink() {
            const eyes = document.querySelectorAll('.robot-eye');
            eyes.forEach(eye => {
                eye.style.transform = 'scaleY(0.1)';
                setTimeout(() => {
                    eye.style.transform = 'scaleY(1)';
                }, 150);
            });
        }

        // Parpadear cada 3-5 segundos
        setInterval(() => {
            if (Math.random() > 0.5) {
                randomBlink();
            }
        }, 3000);

        // Agregar transición a los ojos
        document.querySelectorAll('.robot-eye').forEach(eye => {
            eye.style.transition = 'transform 0.15s ease';
        });
    </script>
</body>
</html>
