<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulador de Sistemas Planetarios y Órbitas</title>
    <!-- Font Awesome CDN para iconos -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <style>
        /* --- Estilos Generales y Reset --- */
        :root {
            --bg-color: #0a0a1a;
            --primary-text: #e0e0ff;
            --secondary-text: #a0a0cc;
            --accent-color: #ff6600;
            --glow-color: rgba(255, 165, 0, 0.5);
            --controls-bg: rgba(30, 30, 60, 0.85);
            --button-bg: #444;
            --button-hover-bg: #666;
            --star-color: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--primary-text);
            overflow: hidden; /* Evita barras de scroll */
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
        }

        /* --- Layout Principal --- */
        .container {
            display: flex;
            flex-grow: 1;
            position: relative;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }

        /* --- Área de Simulación --- */
        #simulationCanvas {
            display: block;
            background-color: var(--bg-color);
            cursor: crosshair;
            flex: 1;
            height: 100%;
        }

        /* --- Paneles Laterales (Controles y Estadísticas) --- */
        .panel {
            background-color: var(--controls-bg);
            backdrop-filter: blur(5px);
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
            height: 100vh;
            width: 280px;
            flex-shrink: 0;
            z-index: 10;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
        }

        .panel h2 {
            color: var(--accent-color);
            text-align: center;
            margin-bottom: 10px;
            border-bottom: 1px solid var(--accent-color);
            padding-bottom: 5px;
        }

        /* --- Controles --- */
        .controls .control-group {
            background: rgba(0, 0, 0, 0.2);
            padding: 10px;
            border-radius: 5px;
        }

        .controls label {
            display: block;
            margin-bottom: 5px;
            font-size: 0.9em;
            color: var(--secondary-text);
        }

        .controls input[type="range"],
        .controls input[type="number"],
        .controls select {
            width: 100%;
            padding: 5px;
            background: #333;
            border: 1px solid #555;
            color: var(--primary-text);
            border-radius: 3px;
        }
         .controls input[type="number"] {
             -moz-appearance: textfield; /* Firefox */
         }
        .controls input::-webkit-outer-spin-button, /* Chrome, Safari, Edge */
        .controls input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }


        .controls .button-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 10px;
        }

        .controls button {
            background-color: var(--button-bg);
            color: var(--primary-text);
            border: none;
            padding: 10px 12px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.1s ease;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .controls button:hover {
            background-color: var(--button-hover-bg);
        }

        .controls button:active {
            transform: scale(0.95);
        }

        .controls button.active {
             background-color: var(--accent-color);
             color: white;
        }

        /* --- Estadísticas --- */
        .stats {
           border-left: none; /* El panel ya tiene borde */
           border-right: 1px solid rgba(255, 255, 255, 0.1);
           box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
        }

        .stats .stat-item {
            background: rgba(0, 0, 0, 0.2);
            padding: 8px 12px;
            border-radius: 5px;
            font-size: 0.9em;
            color: var(--secondary-text);
            transition: background-color 0.3s ease;
        }
        .stats .stat-item strong {
            color: var(--primary-text);
            margin-right: 5px;
            display: inline-block;
            min-width: 70px; /* Alineación */
        }
        .stats .stat-item.highlight {
             background-color: rgba(255, 102, 0, 0.2);
             border: 1px solid var(--accent-color);
        }

        #selectedBodyStats {
            border-top: 1px dashed var(--secondary-text);
            padding-top: 15px;
            margin-top: 15px;
        }

        #selectedBodyStats h3 {
             color: var(--primary-text);
             margin-bottom: 10px;
             font-size: 1em;
        }

        /* --- Indicador de Añadir Cuerpo --- */
        .add-indicator {
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 102, 0, 0.8);
            color: white;
            padding: 5px 15px;
            border-radius: 15px;
            font-size: 0.9em;
            z-index: 20;
            pointer-events: none; /* No interfiere con el click */
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .add-indicator.visible {
            opacity: 1;
        }

         /* --- Efectos Visuales Sutiles --- */
         @keyframes subtlePulse {
             0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); }
             50% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); }
             100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); }
         }
         .panel {
             /* animation: subtlePulse 5s infinite ease-in-out; */ /* Opcional: pulso sutil */
         }

         /* --- Media Queries para Responsividad (Básico) --- */
         @media (max-width: 1200px) {
             .panel {
                 width: 250px;
             }
         }

         @media (max-width: 900px) {
             .container {
                 flex-direction: column;
                 height: 100vh;
             }
             .panel {
                 width: 100%;
                 height: auto;
                 max-height: 200px;
                 flex-direction: row;
                 flex-wrap: wrap;
             }
             #simulationCanvas {
                 height: calc(100vh - 400px);
             }
         }
         @media (max-width: 600px) {
             .panel {
                 max-height: 50vh; /* Más espacio vertical */
                 flex-direction: column; /* Volver a columna en muy pequeño */
             }
             .controls, .stats {
                 flex-basis: auto;
                 width: 100%;
             }
             #simulationCanvas {
                  height: 50vh;
             }
             .controls .button-group {
                grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
             }
             .controls button {
                 padding: 8px;
                 font-size: 0.8em;
             }
         }

    </style>
</head>
<body>

    <div class="container">
        <!-- Panel de Estadísticas (Izquierda) -->
        <div class="panel stats">
            <h2><i class="fas fa-chart-line"></i> Estadísticas</h2>

            <div class="stat-item">
                <strong>Cuerpos:</strong> <span id="bodyCount">0</span>
            </div>
            <div class="stat-item">
                <strong>Tiempo Sim:</strong> <span id="simTime">0.0</span> s
            </div>
             <div class="stat-item">
                <strong>Escala T:</strong> <span id="timeScaleDisplay">1</span>x
            </div>
            <div class="stat-item">
                <strong>Zoom:</strong> <span id="zoomLevelDisplay">1.0</span>x
            </div>

            <div id="selectedBodyStats">
                <h3><i class="fas fa-crosshairs"></i> Cuerpo Seleccionado</h3>
                <div class="stat-item highlight" id="selectedInfo" style="display: none;">
                    <strong>Nombre:</strong> <span id="selectedName">-</span><br>
                    <strong>Masa:</strong> <span id="selectedMass">-</span> kg<br>
                    <strong>Pos (x):</strong> <span id="selectedPosX">-</span> m<br>
                    <strong>Pos (y):</strong> <span id="selectedPosY">-</span> m<br>
                    <strong>Vel (x):</strong> <span id="selectedVelX">-</span> m/s<br>
                    <strong>Vel (y):</strong> <span id="selectedVelY">-</span> m/s<br>
                    <strong>Vel (Mag):</strong> <span id="selectedVelMag">-</span> m/s<br>
                    <strong>Dist. Centro:</strong> <span id="selectedDistCenter">-</span> m<br>
                    <strong>Período Aprox:</strong> <span id="selectedPeriod">-</span> s
                </div>
                 <div class="stat-item" id="noSelection" >
                     <span>Selecciona un cuerpo para ver detalles.</span>
                 </div>
            </div>
        </div>

        <!-- Área Central de Simulación -->
        <canvas id="simulationCanvas"></canvas>
        <div id="addIndicator" class="add-indicator">Modo Añadir: Haz clic y arrastra para velocidad inicial</div>

        <!-- Panel de Controles (Derecha) -->
        <div class="panel controls">
            <h2><i class="fas fa-sliders-h"></i> Controles</h2>

            <div class="control-group button-group">
                <button id="playPauseBtn" title="Reproducir/Pausar"><i class="fas fa-play"></i> <span id="playPauseText">Play</span></button>
                <button id="resetBtn" title="Reiniciar Simulación"><i class="fas fa-redo"></i> Reset</button>
                 <button id="clearBtn" title="Limpiar Todos los Cuerpos"><i class="fas fa-trash"></i> Limpiar</button>
                <button id="addBodyModeBtn" title="Activar/Desactivar Modo Añadir Cuerpo"><i class="fas fa-plus-circle"></i> Añadir</button>
                 <button id="centerViewBtn" title="Centrar Vista en Origen"><i class="fas fa-compress-arrows-alt"></i> Centrar</button>
            </div>

            <div class="control-group">
                <label for="timeScale">Velocidad del Tiempo (<span id="timeScaleValue">1</span>x):</label>
                <input type="range" id="timeScale" min="0.1" max="10" step="0.1" value="1">
            </div>

             <div class="control-group">
                <label for="gravityConstant">Constante Gravitacional (G x 10^-11):</label>
                <input type="range" id="gravityConstant" min="0.1" max="20" step="0.1" value="6.674">
                 <output id="gravityConstantValue" for="gravityConstant">6.674</output> x 10<sup>-11</sup>
            </div>

            <div class="control-group">
                <label for="trailLength">Longitud de la Traza:</label>
                <input type="range" id="trailLength" min="0" max="500" step="10" value="150">
                <output id="trailLengthValue" for="trailLength">150</output> puntos
            </div>

             <div class="control-group">
                 <label for="newBodyMass">Masa Nuevo Cuerpo (x 10^<span id="newBodyMassExponent">24</span> kg):</label>
                 <input type="number" id="newBodyMassValue" value="5.97" step="0.1">
                 <input type="range" id="newBodyMassExponentSlider" min="18" max="30" step="1" value="24">
             </div>

             <div class="control-group">
                 <label for="minBodyRadius">Radio Mínimo (visual):</label>
                 <input type="range" id="minBodyRadius" min="1" max="10" step="0.5" value="2">
                  <output id="minBodyRadiusValue" for="minBodyRadius">2</output> px
             </div>
             <div class="control-group">
                 <label for="maxBodyRadius">Radio Máximo (visual):</label>
                 <input type="range" id="maxBodyRadius" min="5" max="30" step="1" value="15">
                  <output id="maxBodyRadiusValue" for="maxBodyRadius">15</output> px
             </div>

        </div>
    </div>

    <script>
        const canvas = document.getElementById('simulationCanvas');
        const ctx = canvas.getContext('2d');

        // --- Elementos de la UI ---
        const playPauseBtn = document.getElementById('playPauseBtn');
        const playPauseText = document.getElementById('playPauseText');
        const playPauseIcon = playPauseBtn.querySelector('i');
        const resetBtn = document.getElementById('resetBtn');
        const clearBtn = document.getElementById('clearBtn');
        const addBodyModeBtn = document.getElementById('addBodyModeBtn');
        const centerViewBtn = document.getElementById('centerViewBtn');
        const timeScaleSlider = document.getElementById('timeScale');
        const timeScaleValueSpan = document.getElementById('timeScaleValue');
        const timeScaleDisplay = document.getElementById('timeScaleDisplay');
        const gravitySlider = document.getElementById('gravityConstant');
        const gravityValueSpan = document.getElementById('gravityConstantValue');
        const trailLengthSlider = document.getElementById('trailLength');
        const trailLengthValueSpan = document.getElementById('trailLengthValue');
        const newBodyMassValueInput = document.getElementById('newBodyMassValue');
        const newBodyMassExponentSpan = document.getElementById('newBodyMassExponent');
        const newBodyMassExponentSlider = document.getElementById('newBodyMassExponentSlider');
        const minRadiusSlider = document.getElementById('minBodyRadius');
        const minRadiusValueSpan = document.getElementById('minBodyRadiusValue');
        const maxRadiusSlider = document.getElementById('maxBodyRadius');
        const maxRadiusValueSpan = document.getElementById('maxBodyRadiusValue');
        const addIndicator = document.getElementById('addIndicator');

        // --- Estadísticas ---
        const bodyCountSpan = document.getElementById('bodyCount');
        const simTimeSpan = document.getElementById('simTime');
        const zoomLevelDisplay = document.getElementById('zoomLevelDisplay');
        const selectedInfoDiv = document.getElementById('selectedInfo');
        const noSelectionDiv = document.getElementById('noSelection');
        const selectedNameSpan = document.getElementById('selectedName');
        const selectedMassSpan = document.getElementById('selectedMass');
        const selectedPosXSpan = document.getElementById('selectedPosX');
        const selectedPosYSpan = document.getElementById('selectedPosY');
        const selectedVelXSpan = document.getElementById('selectedVelX');
        const selectedVelYSpan = document.getElementById('selectedVelY');
        const selectedVelMagSpan = document.getElementById('selectedVelMag');
        const selectedDistCenterSpan = document.getElementById('selectedDistCenter');
        const selectedPeriodSpan = document.getElementById('selectedPeriod');

        // --- Estado de la Simulación ---
        let bodies = [];
        let isRunning = false;
        let isAddingBodyMode = false;
        let addBodyStartPos = null; // { x, y } en coordenadas del canvas
        let mousePos = { x: 0, y: 0 }; // Posición actual del ratón en coordenadas del canvas
        let G = 6.674e-11; // Constante Gravitacional
        let timeScale = 1;
        let simulationTime = 0;
        let trailLength = 150;
        let selectedBodyIndex = -1;
        let lastTimestamp = 0;
        let baseDt = 1 / 60; // Delta de tiempo base (asumiendo 60 FPS) - ajustado por timeScale
        let physicsSubSteps = 5; // Más pasos para estabilidad a alta velocidad

        // --- Visualización ---
        let zoom = 1.0;
        let panX = 0;
        let panY = 0;
        let isPanning = false;
        let lastPanX = 0;
        let lastPanY = 0;
        const STAR_COUNT = 300;
        let stars = [];
        let minVisualRadius = 2;
        let maxVisualRadius = 15;
        let massToRadiusScale = 5e-25; // Ajustar para radios visuales razonables

        // --- Clase Cuerpo Celestial ---
        class CelestialBody {
            constructor(x, y, vx, vy, mass, name = "Cuerpo", color = null, isStatic = false) {
                this.x = x;
                this.y = y;
                this.vx = vx;
                this.vy = vy;
                this.mass = mass;
                this.name = name;
                this.isStatic = isStatic; // Cuerpos estáticos no se mueven (ej. estrella central muy masiva)
                this.color = color || getRandomColor();
                this.trail = []; // Array de {x, y}

                // Calcula el radio visual basado en la masa (logarítmico para mejor escala)
                const logMass = Math.max(1, Math.log10(mass / 1e18)); // Escala base para evitar log negativos
                const normalizedLogMass = (logMass - 1) / (30 - 1); // Normaliza entre ~1e18 y 1e30
                this.radius = minVisualRadius + (maxVisualRadius - minVisualRadius) * Math.pow(normalizedLogMass, 0.5); // Raíz cuadrada para menos diferencia
                this.radius = Math.max(minVisualRadius, Math.min(maxVisualRadius, this.radius)); // Clamping
            }

            updatePosition(dt) {
                if (!this.isStatic) {
                    this.x += this.vx * dt;
                    this.y += this.vy * dt;

                    // Añadir punto a la traza
                    this.trail.push({ x: this.x, y: this.y });
                    if (this.trail.length > trailLength) {
                        this.trail.shift(); // Elimina el punto más antiguo
                    }
                }
            }

            resetForces() {
                this.fx = 0;
                this.fy = 0;
            }

            addForce(fx, fy) {
                this.fx += fx;
                this.fy += fy;
            }

            updateVelocity(dt) {
                if (!this.isStatic && this.mass > 0) {
                    const ax = this.fx / this.mass;
                    const ay = this.fy / this.mass;
                    this.vx += ax * dt;
                    this.vy += ay * dt;
                }
            }

            draw(ctx, viewX, viewY, currentZoom) {
                 const screenX = (this.x - viewX) * currentZoom + canvas.width / 2;
                 const screenY = (this.y - viewY) * currentZoom + canvas.height / 2;
                 const screenRadius = this.radius * currentZoom; // Escala el radio visual con el zoom

                // Solo dibuja si está aproximadamente dentro de la vista
                 if (screenX + screenRadius < 0 || screenX - screenRadius > canvas.width ||
                     screenY + screenRadius < 0 || screenY - screenRadius > canvas.height) {
                     return; // Optimización: No dibujar si está completamente fuera
                 }

                 // Dibujar traza
                 if (this.trail.length > 1 && trailLength > 0) {
                     ctx.beginPath();
                     ctx.strokeStyle = this.color + '80'; // Color semitransparente
                     ctx.lineWidth = Math.max(1, 1 * currentZoom); // Ancho de línea delgado, escalado

                     const firstTrailPoint = this.trail[0];
                     ctx.moveTo(
                        (firstTrailPoint.x - viewX) * currentZoom + canvas.width / 2,
                        (firstTrailPoint.y - viewY) * currentZoom + canvas.height / 2
                     );

                     for (let i = 1; i < this.trail.length; i++) {
                         const point = this.trail[i];
                         ctx.lineTo(
                             (point.x - viewX) * currentZoom + canvas.width / 2,
                             (point.y - viewY) * currentZoom + canvas.height / 2
                         );
                     }
                     ctx.stroke();
                 }

                 // Dibujar cuerpo
                 ctx.beginPath();
                 ctx.arc(screenX, screenY, Math.max(1, screenRadius), 0, Math.PI * 2); // Asegura radio mínimo visible
                 ctx.fillStyle = this.color;

                 // Efecto de brillo sutil (opcional)
                 ctx.shadowColor = this.color;
                 ctx.shadowBlur = screenRadius > 2 ? 10 : 5; // Más brillo para cuerpos grandes

                 ctx.fill();

                 // Resetear sombra para otros elementos
                 ctx.shadowColor = 'transparent';
                 ctx.shadowBlur = 0;

                 // Dibujar nombre (si el zoom es suficiente)
                 if (currentZoom > 0.1 && screenRadius > 5) { // Solo si es suficientemente grande en pantalla
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
                    ctx.font = `${Math.max(8, 10 * currentZoom)}px Arial`;
                    ctx.textAlign = 'center';
                    ctx.fillText(this.name, screenX, screenY - screenRadius - 5); // Encima del cuerpo
                 }
            }

            // Comprueba si un punto (en coordenadas de canvas) está dentro del cuerpo
            isPointInside(canvasX, canvasY, viewX, viewY, currentZoom) {
                 const screenX = (this.x - viewX) * currentZoom + canvas.width / 2;
                 const screenY = (this.y - viewY) * currentZoom + canvas.height / 2;
                 const screenRadius = Math.max(minVisualRadius, this.radius * currentZoom); // Usa el radio visual escalado

                 const dx = canvasX - screenX;
                 const dy = canvasY - screenY;
                 return dx * dx + dy * dy <= screenRadius * screenRadius;
            }
        }

        // --- Funciones Auxiliares ---
        function getRandomColor() {
            const letters = '89ABCDEF'; // Colores más brillantes
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * letters.length)];
            }
            return color;
        }

        function formatNumber(num) {
            if (Math.abs(num) < 1e-9) return "0.00"; // Evita notación científica para cero
            if (Math.abs(num) > 1e5 || Math.abs(num) < 1e-2) {
                return num.toExponential(2);
            }
            return num.toFixed(2);
        }

        // Convertir coordenadas de Canvas a Mundo
        function canvasToWorld(canvasX, canvasY) {
             const worldX = (canvasX - canvas.width / 2) / zoom + panX;
             const worldY = (canvasY - canvas.height / 2) / zoom + panY;
             return { x: worldX, y: worldY };
        }

        // Convertir coordenadas de Mundo a Canvas
        function worldToCanvas(worldX, worldY) {
            const canvasX = (worldX - panX) * zoom + canvas.width / 2;
            const canvasY = (worldY - panY) * zoom + canvas.height / 2;
            return { x: canvasX, y: canvasY };
        }

        function calculateDistance(body1, body2) {
             const dx = body2.x - body1.x;
             const dy = body2.y - body1.y;
             return Math.sqrt(dx*dx + dy*dy);
        }

        // Calcula periodo orbital aproximado usando Ley de Kepler (simplificada para órbita circular alrededor del cuerpo 0)
        function calculateApproximatePeriod(body, centralBody) {
            if (!centralBody || centralBody.mass === 0 || body === centralBody) return Infinity;
            const dist = calculateDistance(body, centralBody);
            if (dist === 0) return Infinity;
            // T^2 = (4 * pi^2 * r^3) / (G * M_central)
            const periodSquared = (4 * Math.PI * Math.PI * Math.pow(dist, 3)) / (G * centralBody.mass);
            return Math.sqrt(periodSquared);
        }

         // Generar estrellas para el fondo
        function createStars() {
            stars = [];
            for (let i = 0; i < STAR_COUNT; i++) {
                stars.push({
                    x: Math.random() * 2 - 1, // Posición normalizada (-1 a 1)
                    y: Math.random() * 2 - 1,
                    brightness: Math.random() * 0.8 + 0.2, // Brillo variable
                    size: Math.random() * 1.5 + 0.5 // Tamaño variable
                });
            }
        }

        // Dibujar el fondo estrellado (paralaje simple)
        function drawBackground(ctx, viewX, viewY, currentZoom) {
            ctx.fillStyle = '#0a0a1a';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            const parallaxFactor = 0.1;
            const starBrightness = Math.min(1, Math.sqrt(currentZoom));

            stars.forEach(star => {
                let screenX = star.x * canvas.width * 0.7;
                let screenY = star.y * canvas.height * 0.7;

                screenX -= viewX * parallaxFactor * currentZoom * star.brightness;
                screenY -= viewY * parallaxFactor * currentZoom * star.brightness;

                screenX += canvas.width / 2;
                screenY += canvas.height / 2;

                if (screenX > 0 && screenX < canvas.width && screenY > 0 && screenY < canvas.height) {
                    ctx.fillStyle = `rgba(255, 255, 255, ${star.brightness * starBrightness})`;
                    ctx.beginPath();
                    ctx.arc(screenX, screenY, star.size, 0, Math.PI * 2);
                    ctx.fill();
                }
            });
        }


        // --- Lógica de Física ---
        function calculateForces() {
            // Resetear fuerzas en todos los cuerpos
            bodies.forEach(body => body.resetForces());

            // Calcular fuerzas gravitacionales N-cuerpos
            for (let i = 0; i < bodies.length; i++) {
                for (let j = i + 1; j < bodies.length; j++) {
                    const bodyA = bodies[i];
                    const bodyB = bodies[j];

                    const dx = bodyB.x - bodyA.x;
                    const dy = bodyB.y - bodyA.y;
                    const distSq = dx * dx + dy * dy;

                    // Evitar división por cero y fuerzas enormes a corta distancia (softening)
                    const softeningFactor = 1e6; // Ajustar si es necesario
                    const dist = Math.sqrt(distSq + softeningFactor);

                    if (dist > 0) { // Asegurarse de que la distancia no sea cero
                        const forceMag = (G * bodyA.mass * bodyB.mass) / (dist * dist); // F = G*m1*m2 / r^2

                        // Calcular componentes de la fuerza
                        const forceX = (forceMag * dx) / dist;
                        const forceY = (forceMag * dy) / dist;

                        // Aplicar fuerzas (acción-reacción)
                        if (!bodyA.isStatic) {
                            bodyA.addForce(forceX, forceY);
                        }
                        if (!bodyB.isStatic) {
                            bodyB.addForce(-forceX, -forceY);
                        }
                    }
                }
            }
        }

        // --- Bucle de Simulación y Renderizado ---
        function updateSimulation(dt) {
            if (!isRunning) return;

            const adjustedDt = dt * timeScale;
            const subDt = adjustedDt / physicsSubSteps; // Dividir el paso de tiempo

             simulationTime += adjustedDt;

            // Realizar múltiples sub-pasos de física para mayor precisión/estabilidad
            for (let step = 0; step < physicsSubSteps; step++) {
                calculateForces();
                bodies.forEach(body => {
                     if (!body.isStatic) {
                         body.updateVelocity(subDt);
                     }
                 });
                bodies.forEach(body => {
                     body.updatePosition(subDt); // Actualiza posición después de que todas las velocidades se calcularon
                 });
            }
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Fondo negro sólido
            ctx.fillStyle = '#000000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Dibujar estrellas de fondo
            stars.forEach(star => {
                ctx.fillStyle = `rgba(255, 255, 255, ${star.brightness})`;
                ctx.beginPath();
                ctx.arc(
                    star.x * canvas.width,
                    star.y * canvas.height,
                    star.size,
                    0,
                    Math.PI * 2
                );
                ctx.fill();
            });

            // Dibujar las trazas
            bodies.forEach(body => {
                if (body.trail.length > 1) {
                    ctx.beginPath();
                    ctx.strokeStyle = body.color;
                    ctx.lineWidth = 2;
                    
                    const firstPoint = worldToCanvas(body.trail[0].x, body.trail[0].y);
                    ctx.moveTo(firstPoint.x, firstPoint.y);

                    for (let i = 1; i < body.trail.length; i++) {
                        const point = worldToCanvas(body.trail[i].x, body.trail[i].y);
                        ctx.lineTo(point.x, point.y);
                    }
                    ctx.stroke();
                }
            });

            // Dibujar los cuerpos celestes
            bodies.forEach(body => {
                const pos = worldToCanvas(body.x, body.y);
                
                // Asegurar un tamaño mínimo visible
                const minSize = 5;
                const maxSize = 20;
                const size = Math.max(minSize, Math.min(maxSize, body.radius * zoom * 1e9));

                // Dibujar el cuerpo
                ctx.beginPath();
                ctx.arc(pos.x, pos.y, size, 0, Math.PI * 2);
                ctx.fillStyle = body.color;
                ctx.fill();

                // Añadir brillo
                ctx.beginPath();
                ctx.arc(pos.x, pos.y, size + 2, 0, Math.PI * 2);
                ctx.strokeStyle = body.color;
                ctx.lineWidth = 2;
                ctx.stroke();

                // Dibujar nombre con fondo
                const name = body.name;
                ctx.font = '12px Arial';
                const textWidth = ctx.measureText(name).width;
                
                // Fondo del nombre
                ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
                ctx.fillRect(
                    pos.x - textWidth/2 - 4,
                    pos.y - size - 20,
                    textWidth + 8,
                    16
                );

                // Texto del nombre
                ctx.fillStyle = 'white';
                ctx.textAlign = 'center';
                ctx.fillText(name, pos.x, pos.y - size - 8);
            });

            updateStatsUI();
        }

        function animationLoop(timestamp) {
            const deltaTime = (timestamp - lastTimestamp) / 1000 || baseDt; // Tiempo en segundos desde el último frame
            lastTimestamp = timestamp;

            // Controlar DT máximo para evitar saltos si la pestaña estuvo inactiva
            const cappedDt = Math.min(deltaTime, 0.1); // Máximo 0.1s por frame

            updateSimulation(cappedDt);
            draw();

            requestAnimationFrame(animationLoop); // Solicitar el siguiente frame
        }

        // --- Actualización de UI de Estadísticas ---
        function updateStatsUI() {
            bodyCountSpan.textContent = bodies.length;
            simTimeSpan.textContent = formatNumber(simulationTime);
            timeScaleDisplay.textContent = timeScale.toFixed(1);
            zoomLevelDisplay.textContent = zoom.toFixed(2);

            if (selectedBodyIndex !== -1 && bodies[selectedBodyIndex]) {
                const body = bodies[selectedBodyIndex];
                selectedInfoDiv.style.display = 'block';
                noSelectionDiv.style.display = 'none';

                selectedNameSpan.textContent = body.name;
                selectedMassSpan.textContent = formatNumber(body.mass);
                selectedPosXSpan.textContent = formatNumber(body.x);
                selectedPosYSpan.textContent = formatNumber(body.y);
                selectedVelXSpan.textContent = formatNumber(body.vx);
                selectedVelYSpan.textContent = formatNumber(body.vy);
                const velMag = Math.sqrt(body.vx*body.vx + body.vy*body.vy);
                selectedVelMagSpan.textContent = formatNumber(velMag);

                let distCenter = 0;
                let period = Infinity;
                if (bodies.length > 0 && bodies[0] !== body) { // Asume el cuerpo 0 como central
                     distCenter = calculateDistance(body, bodies[0]);
                     period = calculateApproximatePeriod(body, bodies[0]);
                }
                selectedDistCenterSpan.textContent = formatNumber(distCenter);
                selectedPeriodSpan.textContent = period === Infinity ? 'N/A' : formatNumber(period);

            } else {
                selectedInfoDiv.style.display = 'none';
                noSelectionDiv.style.display = 'block';
            }
        }


        // --- Inicialización ---
        function resizeCanvas() {
            const totalPanelsWidth = 560; // Ancho total de ambos paneles (280px cada uno)
            canvas.width = window.innerWidth - totalPanelsWidth;
            canvas.height = window.innerHeight;
            createStars();
            draw();
        }

        function resetSimulation(addDefaultBodies = true) {
            bodies = [];
            simulationTime = 0;
            selectedBodyIndex = -1;
            panX = 0;
            panY = 0;
            zoom = 1e-9; // Ajustamos el zoom inicial
            addBodyStartPos = null;

            if (addDefaultBodies) {
                const sunMass = 1.989e30;
                bodies.push(new CelestialBody(0, 0, 0, 0, sunMass, "Sol", "#FFD700", true));

                const distScale = 0.5;
                const planetData = [
                    { name: "Mercurio", mass: 3.285e23, dist: 5.79e10, color: "#A0522D" },
                    { name: "Venus", mass: 4.867e24, dist: 1.082e11, color: "#DEB887" },
                    { name: "Tierra", mass: 5.972e24, dist: 1.496e11, color: "#4682B4" },
                    { name: "Marte", mass: 6.39e23, dist: 2.279e11, color: "#FF6347" },
                    { name: "Júpiter", mass: 1.898e27, dist: 7.786e11, color: "#DAA520" },
                    { name: "Saturno", mass: 5.683e26, dist: 1.4335e12, color: "#FFA500" },
                    { name: "Urano", mass: 8.681e25, dist: 2.8725e12, color: "#87CEEB" },
                    { name: "Neptuno", mass: 1.024e26, dist: 4.4951e12, color: "#1E90FF" }
                ];

                planetData.forEach((planet, index) => {
                    const dist = planet.dist * distScale;
                    const angle = (index * Math.PI / 4);
                    const vel = Math.sqrt(G * sunMass / dist);
                    
                    bodies.push(new CelestialBody(
                        dist * Math.cos(angle),
                        dist * Math.sin(angle),
                        -vel * Math.sin(angle),
                        vel * Math.cos(angle),
                        planet.mass,
                        planet.name,
                        planet.color
                    ));
                });
            }

            updateVisualRadii();
            if (!isRunning) draw();
            updateStatsUI();
        }

         function clearSimulation() {
             resetSimulation(false); // Llama a reset sin añadir cuerpos por defecto
         }

         // Ajusta el radio visual de todos los cuerpos existentes
         function updateVisualRadii() {
             minVisualRadius = parseFloat(minRadiusSlider.value);
             maxVisualRadius = parseFloat(maxRadiusSlider.value);
             minRadiusValueSpan.textContent = minVisualRadius.toFixed(1);
             maxRadiusValueSpan.textContent = maxVisualRadius.toFixed(1);

             bodies.forEach(body => {
                 // Recalcula radio visual (misma lógica que en el constructor)
                const logMass = Math.max(1, Math.log10(body.mass / 1e18));
                const normalizedLogMass = (logMass - 1) / (30 - 1);
                body.radius = minVisualRadius + (maxVisualRadius - minVisualRadius) * Math.pow(normalizedLogMass, 0.5);
                body.radius = Math.max(minVisualRadius, Math.min(maxVisualRadius, body.radius));
             });
              if (!isRunning) draw(); // Redibujar si está pausado
         }


        // --- Manejadores de Eventos ---
        playPauseBtn.addEventListener('click', () => {
            isRunning = !isRunning;
            if (isRunning) {
                playPauseText.textContent = 'Pause';
                playPauseIcon.classList.remove('fa-play');
                playPauseIcon.classList.add('fa-pause');
                playPauseBtn.classList.add('active');
                lastTimestamp = performance.now(); // Resetea timestamp para evitar saltos
            } else {
                playPauseText.textContent = 'Play';
                playPauseIcon.classList.remove('fa-pause');
                playPauseIcon.classList.add('fa-play');
                playPauseBtn.classList.remove('active');
            }
        });

        resetBtn.addEventListener('click', () => resetSimulation());
        clearBtn.addEventListener('click', () => clearSimulation());

        addBodyModeBtn.addEventListener('click', () => {
            isAddingBodyMode = !isAddingBodyMode;
            addBodyStartPos = null; // Resetear al cambiar de modo
            if (isAddingBodyMode) {
                addBodyModeBtn.classList.add('active');
                addIndicator.classList.add('visible');
                canvas.style.cursor = 'crosshair';
            } else {
                addBodyModeBtn.classList.remove('active');
                addIndicator.classList.remove('visible');
                canvas.style.cursor = 'grab'; // O 'default'
            }
        });

        centerViewBtn.addEventListener('click', () => {
             panX = 0;
             panY = 0;
             // Opcional: centrar en el cuerpo más masivo si existe
             /* if (bodies.length > 0) {
                  let mostMassive = bodies[0];
                  for(let i = 1; i < bodies.length; i++) {
                      if (bodies[i].mass > mostMassive.mass) mostMassive = bodies[i];
                  }
                  panX = mostMassive.x;
                  panY = mostMassive.y;
             } */
             if (!isRunning) draw();
        });

        timeScaleSlider.addEventListener('input', (e) => {
            timeScale = parseFloat(e.target.value);
            timeScaleValueSpan.textContent = timeScale.toFixed(1);
        });

        gravitySlider.addEventListener('input', (e) => {
             const sliderValue = parseFloat(e.target.value);
             G = sliderValue * 1e-11;
             gravityValueSpan.textContent = sliderValue.toFixed(3);
        });

        trailLengthSlider.addEventListener('input', (e) => {
            trailLength = parseInt(e.target.value, 10);
            trailLengthValueSpan.textContent = trailLength;
            // Opcional: Recortar trazas existentes inmediatamente
            // bodies.forEach(body => {
            //     if (body.trail.length > trailLength) {
            //         body.trail = body.trail.slice(body.trail.length - trailLength);
            //     }
            // });
        });

        // Actualizar masa y exponente del nuevo cuerpo
         function updateNewBodyMassDisplay() {
             const exponent = parseInt(newBodyMassExponentSlider.value, 10);
             newBodyMassExponentSpan.textContent = exponent;
         }
        newBodyMassExponentSlider.addEventListener('input', updateNewBodyMassDisplay);
        updateNewBodyMassDisplay(); // Llamada inicial


         // Listeners para radios visuales
         minRadiusSlider.addEventListener('input', updateVisualRadii);
         maxRadiusSlider.addEventListener('input', updateVisualRadii);


        // --- Eventos del Canvas (Mouse) ---
        canvas.addEventListener('mousedown', (e) => {
            const rect = canvas.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const clickY = e.clientY - rect.top;

            if (isAddingBodyMode) {
                addBodyStartPos = { x: clickX, y: clickY };
                canvas.style.cursor = 'grabbing';
            } else {
                 // Intentar seleccionar un cuerpo
                 let clickedBodyIndex = -1;
                 // Iterar en orden inverso para seleccionar cuerpos encima de otros
                 for (let i = bodies.length - 1; i >= 0; i--) {
                    if (bodies[i].isPointInside(clickX, clickY, panX, panY, zoom)) {
                        clickedBodyIndex = i;
                        break;
                    }
                 }

                 if (clickedBodyIndex !== -1) {
                     selectedBodyIndex = clickedBodyIndex;
                 } else {
                     // Si no se hizo clic en un cuerpo, iniciar paneo
                     isPanning = true;
                     lastPanX = e.clientX;
                     lastPanY = e.clientY;
                     canvas.style.cursor = 'grabbing';
                     selectedBodyIndex = -1; // Deseleccionar al iniciar paneo
                 }
                 if (!isRunning) draw(); // Actualizar selección visual si está pausado
            }
             updateStatsUI(); // Actualizar UI de selección
        });

        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            mousePos.x = e.clientX - rect.left;
            mousePos.y = e.clientY - rect.top;

            if (isPanning) {
                const dx = e.clientX - lastPanX;
                const dy = e.clientY - lastPanY;
                // Mover la vista (panX, panY) en la dirección opuesta al arrastre
                panX -= dx / zoom;
                panY -= dy / zoom;
                lastPanX = e.clientX;
                lastPanY = e.clientY;
                 if (!isRunning) draw(); // Redibujar si está pausado
            } else if (isAddingBodyMode && addBodyStartPos) {
                 if (!isRunning) draw(); // Redibujar para mostrar la línea de velocidad
            } else if (!isAddingBodyMode) {
                 // Cambiar cursor si está sobre un cuerpo (modo selección)
                 let hoverBody = false;
                 for (let i = bodies.length - 1; i >= 0; i--) {
                    if (bodies[i].isPointInside(mousePos.x, mousePos.y, panX, panY, zoom)) {
                        hoverBody = true;
                        break;
                    }
                 }
                 canvas.style.cursor = hoverBody ? 'pointer' : 'grab';
            }
        });

        canvas.addEventListener('mouseup', (e) => {
            if (isAddingBodyMode && addBodyStartPos) {
                 const endX = mousePos.x;
                 const endY = mousePos.y;

                 const startWorld = canvasToWorld(addBodyStartPos.x, addBodyStartPos.y);
                 const endWorld = canvasToWorld(endX, endY);

                 const velScale = 0.1 / zoom; // Escala para la velocidad inicial (ajustar según sea necesario)
                 const vx = (endWorld.x - startWorld.x) * velScale;
                 const vy = (endWorld.y - startWorld.y) * velScale;

                 const massValue = parseFloat(newBodyMassValueInput.value);
                 const massExponent = parseInt(newBodyMassExponentSlider.value, 10);
                 const newMass = massValue * Math.pow(10, massExponent);

                 const newName = `Cuerpo ${bodies.length + 1}`;
                 bodies.push(new CelestialBody(startWorld.x, startWorld.y, vx, vy, newMass, newName));

                 updateVisualRadii(); // Asegura que el nuevo cuerpo tenga el radio correcto
                 addBodyStartPos = null;
                 canvas.style.cursor = 'crosshair'; // Volver al cursor de añadir
                 if (!isRunning) draw(); // Dibujar el nuevo cuerpo si está pausado
            }

             if (isPanning) {
                isPanning = false;
                canvas.style.cursor = 'grab';
             }
        });

        canvas.addEventListener('mouseleave', () => {
            // Si sale del canvas mientras arrastra, cancela la acción
             if (isPanning) {
                 isPanning = false;
                 canvas.style.cursor = 'grab';
             }
             if (isAddingBodyMode && addBodyStartPos) {
                 addBodyStartPos = null; // Cancela añadir cuerpo
                 canvas.style.cursor = 'crosshair';
                 if (!isRunning) draw(); // Borrar línea de velocidad si estaba pausado
             }
        });

        // Evento de Rueda del Ratón para Zoom
        canvas.addEventListener('wheel', (e) => {
            e.preventDefault();

            const rect = canvas.getBoundingClientRect();
            const mouseCanvasX = e.clientX - rect.left;
            const mouseCanvasY = e.clientY - rect.top;

            const worldBeforeZoom = canvasToWorld(mouseCanvasX, mouseCanvasY);

            const zoomFactor = e.deltaY < 0 ? 1.1 : 0.9;
            zoom = zoom * zoomFactor;
            
            // Limitar el zoom a un rango razonable
            zoom = Math.max(1e-10, Math.min(zoom, 1e-7));

            const worldAfterZoom = canvasToWorld(mouseCanvasX, mouseCanvasY);

            panX += worldBeforeZoom.x - worldAfterZoom.x;
            panY += worldBeforeZoom.y - worldAfterZoom.y;

            if (!isRunning) draw();
        });


        // --- Inicio ---
        window.addEventListener('resize', resizeCanvas); // Ajustar tamaño al cambiar ventana
        document.addEventListener('DOMContentLoaded', () => {
             resizeCanvas(); // Ajustar tamaño inicial
             resetSimulation(); // Configurar escena inicial
             createStars(); // Crear estrellas iniciales
             updateVisualRadii(); // Configurar valores iniciales de radio
             animationLoop(0); // Iniciar el bucle de animación
        });

    </script>

</body>
</html>