<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulador Fluido Holográfico</title>
    <style>
        /* --- Estilos Generales y Reset --- */
        :root {
            --glow-color-1: rgba(0, 255, 255, 0.8); /* Cyan brillante */
            --glow-color-2: rgba(255, 0, 255, 0.7); /* Magenta brillante */
            --glow-color-3: rgba(50, 255, 50, 0.6);  /* Verde brillante */
            --bg-color: #00051a; /* Azul muy oscuro, casi negro */
            --text-color: #e0e0e0;
            --control-bg: rgba(10, 20, 40, 0.7);
            --control-border: rgba(0, 255, 255, 0.5);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden; /* Evita barras de scroll */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            position: relative; /* Para pseudo-elementos */
        }

        /* --- Efecto Scanlines Holográfico (sutil) --- */
        body::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                rgba(10, 30, 50, 0) 50%,
                rgba(0, 255, 255, 0.03) 50%
            );
            background-size: 100% 4px;
            opacity: 0.6;
            pointer-events: none; /* Para no interferir con el canvas */
            z-index: 5; /* Por encima del canvas pero debajo de los controles */
            animation: scanlines 0.2s linear infinite;
        }

        @keyframes scanlines {
            0% { background-position: 0 0; }
            100% { background-position: 0 4px; }
        }

        /* --- Contenedor Principal --- */
        #simulation-container {
            position: relative;
            width: 95vw;
            max-width: 1200px; /* Límite de ancho */
            height: 85vh;
            border: 1px solid var(--control-border);
            border-radius: 10px;
            box-shadow: 0 0 25px rgba(0, 255, 255, 0.3), inset 0 0 15px rgba(0, 255, 255, 0.2);
            overflow: hidden; /* Asegura que el canvas no se salga */
            background: radial-gradient(ellipse at center, rgba(0, 10, 20, 0.1) 0%, rgba(0, 5, 10, 0.5) 100%);
        }

        /* --- Canvas de Simulación --- */
        #fluidCanvas {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            cursor: crosshair;
        }

        /* --- Panel de Controles --- */
        #controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--control-bg);
            padding: 15px 25px;
            border-radius: 8px;
            border: 1px solid var(--control-border);
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
            display: flex;
            gap: 25px;
            align-items: center;
            z-index: 10; /* Encima de todo */
            backdrop-filter: blur(5px); /* Efecto cristal esmerilado */
            flex-wrap: wrap; /* Para pantallas pequeñas */
            justify-content: center;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            transition: transform 0.2s ease-out;
        }
        .control-group:hover {
             transform: scale(1.05);
        }

        label {
            font-size: 0.9em;
            text-shadow: 0 0 5px var(--glow-color-1);
            display: flex;
            align-items: center;
            gap: 5px;
        }
         /* Iconos simples con CSS */
         label[for="viscosity"]::before { content: "💧"; }
         label[for="force"]::before { content: "💨"; }
         label[for="particles"]::before { content: "✨"; }

        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 150px;
            height: 8px;
            background: linear-gradient(90deg, var(--glow-color-2), var(--glow-color-1));
            border-radius: 5px;
            cursor: pointer;
            outline: none;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: box-shadow 0.2s ease;
        }
         input[type="range"]:hover {
             box-shadow: 0 0 10px var(--glow-color-1);
         }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: var(--text-color);
            border-radius: 50%;
            border: 2px solid var(--bg-color);
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
            cursor: grab;
            transition: background 0.2s ease, transform 0.1s ease;
        }
        input[type="range"]::-webkit-slider-thumb:active {
            background: var(--glow-color-1);
            transform: scale(1.2);
             cursor: grabbing;
        }

        input[type="range"]::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: var(--text-color);
            border-radius: 50%;
            border: 2px solid var(--bg-color);
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
            cursor: grab;
            transition: background 0.2s ease, transform 0.1s ease;
        }
         input[type="range"]::-moz-range-thumb:active {
            background: var(--glow-color-1);
            transform: scale(1.2);
            cursor: grabbing;
         }

        output {
            font-size: 0.8em;
            min-width: 30px;
            text-align: center;
            color: var(--glow-color-1);
            text-shadow: 0 0 3px var(--glow-color-1);
        }

        /* --- Botón Reset --- */
         #resetButton {
             padding: 8px 15px;
             background: transparent;
             border: 1px solid var(--control-border);
             color: var(--glow-color-1);
             border-radius: 5px;
             cursor: pointer;
             font-size: 0.9em;
             text-shadow: 0 0 5px var(--glow-color-1);
             transition: all 0.2s ease;
         }
         #resetButton:hover {
             background-color: rgba(0, 255, 255, 0.1);
             box-shadow: 0 0 10px var(--glow-color-1);
             transform: translateY(-2px);
         }
         #resetButton:active {
             transform: translateY(0);
             background-color: rgba(0, 255, 255, 0.2);
         }

         /* --- Efecto hover sutil en controles --- */
         #controls:hover {
             box-shadow: 0 0 25px var(--glow-color-1);
         }

         /* --- Mensaje de Carga / Instrucciones --- */
         #infoMessage {
             position: absolute;
             top: 20px;
             left: 50%;
             transform: translateX(-50%);
             background-color: var(--control-bg);
             padding: 10px 20px;
             border-radius: 5px;
             font-size: 0.9em;
             text-align: center;
             z-index: 10;
             border: 1px solid var(--control-border);
             box-shadow: 0 0 10px var(--glow-color-2);
             opacity: 1;
             transition: opacity 1s ease-out 3s; /* Desaparece después de 3s */
         }
         body.loaded #infoMessage {
            opacity: 0;
            pointer-events: none;
         }

    </style>
</head>
<body >

    <div id="simulation-container">
        <canvas id="fluidCanvas"></canvas>
    </div>

    <div id="infoMessage">
        Cargando Simulador Holográfico...<br>Haz clic y arrastra para interactuar.
    </div>

    <div id="controls">
        <div class="control-group">
            <label for="viscosity">Viscosidad:</label>
            <input type="range" id="viscosity" name="viscosity" min="0.9" max="0.999" step="0.001" value="0.98">
            <output for="viscosity" id="viscosityValue">0.980</output>
        </div>
        <div class="control-group">
            <label for="force">Fuerza Puntero:</label>
            <input type="range" id="force" name="force" min="10" max="150" step="5" value="70">
            <output for="force" id="forceValue">70</output>
        </div>
        <div class="control-group">
            <label for="particles">Partículas:</label>
            <input type="range" id="particles" name="particles" min="100" max="700" step="50" value="300">
            <output for="particles" id="particlesValue">300</output>
        </div>
        <button id="resetButton">Reiniciar</button>
    </div>

    <script>
        const canvas = document.getElementById('fluidCanvas');
        const ctx = canvas.getContext('2d');
        const container = document.getElementById('simulation-container');

        // Controles
        const viscositySlider = document.getElementById('viscosity');
        const forceSlider = document.getElementById('force');
        const particlesSlider = document.getElementById('particles');
        const resetButton = document.getElementById('resetButton');
        const viscosityValue = document.getElementById('viscosityValue');
        const forceValue = document.getElementById('forceValue');
        const particlesValue = document.getElementById('particlesValue');

        let particlesArray = [];
        let animationFrameId;
        let width, height;

        // Parámetros de Simulación (con valores iniciales)
        let config = {
            particleCount: parseInt(particlesSlider.value),
            viscosity: parseFloat(viscositySlider.value), // Damping factor (más cercano a 1 = menos viscoso)
            mouseForce: parseInt(forceSlider.value),
            baseRadius: 2,
            maxSpeed: 5,
            connectionDistance: 50, // Distancia para dibujar líneas "holográficas"
            glowColor1: 'rgba(0, 255, 255, 0.8)', // Cyan
            glowColor2: 'rgba(255, 0, 255, 0.7)', // Magenta
            lineColor: 'rgba(0, 255, 255, 0.1)', // Líneas tenues
            gravity: 0.02, // Pequeña gravedad hacia abajo
        };

        // Estado del ratón
        const mouse = {
            x: null,
            y: null,
            radius: 100, // Radio de influencia
            isDown: false
        };

        // --- Clase Partícula ---
        class Particle {
            constructor() {
                this.x = Math.random() * width;
                this.y = Math.random() * height;
                this.vx = (Math.random() - 0.5) * 2;
                this.vy = (Math.random() - 0.5) * 2;
                this.radius = config.baseRadius + Math.random() * 1.5;
                this.baseColor = Math.random() > 0.5 ? config.glowColor1 : config.glowColor2;
                 // Masa inversa para simplificar cálculos de fuerza (partículas más grandes son menos afectadas)
                this.invMass = 1 / (this.radius * 0.5);
            }

            // Actualizar posición y velocidad
            update() {
                // Aplicar viscosidad (damping)
                this.vx *= config.viscosity;
                this.vy *= config.viscosity;

                 // Aplicar gravedad sutil
                 this.vy += config.gravity;

                // Interacción con el ratón
                if (mouse.isDown && mouse.x !== null) {
                    const dx = this.x - mouse.x;
                    const dy = this.y - mouse.y;
                    const distSq = dx * dx + dy * dy; // Distancia al cuadrado (más eficiente)
                    const mouseInfluenceRadiusSq = mouse.radius * mouse.radius;

                    if (distSq < mouseInfluenceRadiusSq) {
                        const dist = Math.sqrt(distSq);
                        const forceDirectionX = dx / dist;
                        const forceDirectionY = dy / dist;
                        // La fuerza disminuye con la distancia
                        const forceMagnitude = (mouse.radius - dist) / mouse.radius * config.mouseForce * this.invMass;
                        this.vx += forceDirectionX * forceMagnitude;
                        this.vy += forceDirectionY * forceMagnitude;
                    }
                }

                // Limitar velocidad máxima
                const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
                if (speed > config.maxSpeed) {
                    const ratio = config.maxSpeed / speed;
                    this.vx *= ratio;
                    this.vy *= ratio;
                }

                // Actualizar posición
                this.x += this.vx;
                this.y += this.vy;

                // Colisiones con los bordes (con rebote y pérdida de energía)
                const energyLoss = 0.85;
                if (this.x < this.radius) {
                    this.x = this.radius;
                    this.vx *= -energyLoss;
                } else if (this.x > width - this.radius) {
                    this.x = width - this.radius;
                    this.vx *= -energyLoss;
                }
                if (this.y < this.radius) {
                    this.y = this.radius;
                    this.vy *= -energyLoss;
                } else if (this.y > height - this.radius) {
                    this.y = height - this.radius;
                    this.vy *= -energyLoss;
                }
            }

            // Dibujar la partícula
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);

                // Efecto Glow
                ctx.shadowBlur = 15 + Math.random() * 10; // Glow variable
                ctx.shadowColor = this.baseColor;

                // Color basado en velocidad (más rápido = más brillante/diferente?) - Sutil
                const speed = Math.sqrt(this.vx*this.vx + this.vy*this.vy);
                const alpha = Math.min(0.6 + speed * 0.1, 1.0); // Aumenta alpha con velocidad
                const colorParts = this.baseColor.match(/[\d.]+/g); // Extraer r, g, b, a
                if (colorParts && colorParts.length >= 3) {
                    ctx.fillStyle = `rgba(${colorParts[0]}, ${colorParts[1]}, ${colorParts[2]}, ${alpha})`;
                } else {
                    ctx.fillStyle = this.baseColor; // Fallback
                }


                ctx.fill();

                // Resetear sombra para no afectar otros dibujos
                ctx.shadowBlur = 0;
            }
        }

        // --- Funciones Auxiliares ---

        // Inicializar o reiniciar la simulación
        function init() {
            cancelAnimationFrame(animationFrameId); // Detener animación anterior si existe
            setCanvasSize();
            particlesArray = [];
            for (let i = 0; i < config.particleCount; i++) {
                particlesArray.push(new Particle());
            }
            // Reiniciar estado del ratón
            mouse.isDown = false;
            mouse.x = null;
            mouse.y = null;
            // Iniciar bucle de animación
            animate();
        }

        // Establecer tamaño del canvas
        function setCanvasSize() {
             // Usar las dimensiones del contenedor para el canvas lógico
            width = container.clientWidth;
            height = container.clientHeight;
            canvas.width = width;
            canvas.height = height;
        }

        // Bucle de Animación
        function animate() {
            // Efecto de Estela (Fading Trail)
            ctx.fillStyle = 'rgba(0, 5, 10, 0.1)'; // Fondo oscuro semi-transparente
            ctx.fillRect(0, 0, width, height);

            // Dibujar conexiones (holográficas) entre partículas cercanas
             ctx.lineWidth = 0.5;
             ctx.strokeStyle = config.lineColor;
             for (let i = 0; i < particlesArray.length; i++) {
                 for (let j = i + 1; j < particlesArray.length; j++) {
                     const dx = particlesArray[i].x - particlesArray[j].x;
                     const dy = particlesArray[i].y - particlesArray[j].y;
                     const distanceSq = dx * dx + dy * dy;

                     if (distanceSq < config.connectionDistance * config.connectionDistance) {
                         ctx.beginPath();
                         ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
                         ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
                         // Hacer la línea más tenue cuanto más lejos estén
                         const opacity = 1 - (Math.sqrt(distanceSq) / config.connectionDistance);
                         ctx.strokeStyle = `rgba(0, 255, 255, ${Math.max(0, opacity * 0.15)})`; // Muy tenue
                         ctx.stroke();
                     }
                 }
             }


            // Actualizar y dibujar cada partícula
            particlesArray.forEach(particle => {
                particle.update();
                particle.draw();
            });

            // Solicitar el siguiente frame
            animationFrameId = requestAnimationFrame(animate);
        }

        // --- Manejadores de Eventos ---

        // Redimensionar canvas si cambia el tamaño de la ventana
        window.addEventListener('resize', () => {
            init(); // Reiniciar la simulación con el nuevo tamaño
        });

        // Eventos del Ratón
        canvas.addEventListener('mousedown', (event) => {
            mouse.isDown = true;
            const rect = canvas.getBoundingClientRect();
            mouse.x = event.clientX - rect.left;
            mouse.y = event.clientY - rect.top;
        });

        canvas.addEventListener('mouseup', () => {
            mouse.isDown = false;
        });

        canvas.addEventListener('mouseleave', () => {
            // Opcional: podrías querer que la fuerza cese si el ratón sale
            // mouse.isDown = false;
        });

        canvas.addEventListener('mousemove', (event) => {
            if (mouse.isDown) {
                 const rect = canvas.getBoundingClientRect();
                 mouse.x = event.clientX - rect.left;
                 mouse.y = event.clientY - rect.top;
            }
        });

         // Eventos Táctiles (para móviles/tablets)
         canvas.addEventListener('touchstart', (event) => {
             event.preventDefault(); // Evita scroll/zoom
             if (event.touches.length > 0) {
                 mouse.isDown = true;
                 const rect = canvas.getBoundingClientRect();
                 mouse.x = event.touches[0].clientX - rect.left;
                 mouse.y = event.touches[0].clientY - rect.top;
             }
         }, { passive: false });

         canvas.addEventListener('touchend', (event) => {
              event.preventDefault();
              mouse.isDown = false;
         });
         canvas.addEventListener('touchcancel', (event) => {
              event.preventDefault();
              mouse.isDown = false;
         });

         canvas.addEventListener('touchmove', (event) => {
             event.preventDefault(); // Evita scroll/zoom
             if (mouse.isDown && event.touches.length > 0) {
                 const rect = canvas.getBoundingClientRect();
                 mouse.x = event.touches[0].clientX - rect.left;
                 mouse.y = event.touches[0].clientY - rect.top;
             }
         }, { passive: false });


        // Eventos de los Controles
        viscositySlider.addEventListener('input', (e) => {
            config.viscosity = parseFloat(e.target.value);
            viscosityValue.textContent = parseFloat(e.target.value).toFixed(3);
        });

        forceSlider.addEventListener('input', (e) => {
            config.mouseForce = parseInt(e.target.value);
            forceValue.textContent = e.target.value;
        });

        particlesSlider.addEventListener('input', (e) => {
            config.particleCount = parseInt(e.target.value);
            particlesValue.textContent = e.target.value;
            // Reiniciar la simulación para aplicar el nuevo número de partículas
            init();
        });

        resetButton.addEventListener('click', () => {
            // Resetear sliders a valores por defecto (opcional)
            // viscositySlider.value = 0.98;
            // forceSlider.value = 70;
            // particlesSlider.value = 300;
            // config.viscosity = 0.98;
            // config.mouseForce = 70;
            // config.particleCount = 300;
            // viscosityValue.textContent = "0.980";
            // forceValue.textContent = "70";
            // particlesValue.textContent = "300";

            // Reiniciar la simulación
            init();
        });

        // --- Inicio ---
         // Añadir clase 'loaded' al body después de un pequeño retraso para la animación del mensaje
         window.addEventListener('load', () => {
             init(); // Iniciar la simulación cuando todo esté cargado
             setTimeout(() => {
                document.body.classList.add('loaded');
             }, 500); // Un pequeño delay antes de empezar la animación de fade-out del mensaje
         });

    </script>

</body>
</html>