From 63b45a353d93898e84587255dcc202d0a56ea83b Mon Sep 17 00:00:00 2001
From: fenix <fenix@librebits.info>
Date: Mon, 2 Feb 2026 11:29:24 +0100
Subject: [PATCH] =?UTF-8?q?nueva=20versi=C3=B3n=20,=20con=20el=20Canvas=20?=
 =?UTF-8?q?en=20particular=20y=20JS=20/=20CSS=20depurados=20para=20que=20n?=
 =?UTF-8?q?o=20consuman=20tantos=20recursos=20de=20la=20gr=C3=A1fica=20...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 754 ++++++++---------------------------------------------
 1 file changed, 109 insertions(+), 645 deletions(-)
diff --git a/index.html b/index.html
index 154a645..73ead08 100644
--- a/index.html
+++ b/index.html
@@ -3,31 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Visor y Editor Markdown - Futurista</title>
+    <title>Visor Markdown - Versión Optimizada</title>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
 
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: #0a0e27;
+            /* Optimizamos el fondo: degradado fijo en CSS en lugar de Canvas */
+            background: radial-gradient(circle at center, #0a0e27 0%, #050810 100%);
             min-height: 100vh;
             padding: 20px;
             overflow-x: hidden;
-            position: relative;
+            color: #e2e8f0;
         }
 
-        /* Fondo de estrellas animadas */
         #stars-canvas {
             position: fixed;
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
             z-index: 0;
             pointer-events: none;
         }
@@ -35,450 +29,73 @@
         .container {
             max-width: 1400px;
             margin: 0 auto;
-            background: rgba(15, 23, 42, 0.85);
+            background: rgba(15, 23, 42, 0.9);
             border-radius: 20px;
-            box-shadow: 0 0 60px rgba(59, 130, 246, 0.3), 0 0 100px rgba(139, 92, 246, 0.2);
+            /* Reducimos el radio de las sombras para mejorar el rendimiento */
+            box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
             overflow: hidden;
-            backdrop-filter: blur(10px);
             border: 1px solid rgba(59, 130, 246, 0.2);
             position: relative;
             z-index: 1;
         }
 
+        /* Estilos de Header y Botones (Mantenemos tu estética) */
         .header {
             background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #db2777 100%);
-            color: white;
             padding: 40px 30px;
             text-align: center;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .header::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
-            background-size: 50px 50px;
-            animation: moveGrid 20s linear infinite;
-        }
-
-        @keyframes moveGrid {
-            0% { transform: translate(0, 0); }
-            100% { transform: translate(50px, 50px); }
-        }
-
-        .header h1 {
-            font-size: 2.8em;
-            margin-bottom: 10px;
-            font-weight: 700;
-            position: relative;
-            z-index: 1;
-            text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
-        }
-
-        .header p {
-            opacity: 0.95;
-            font-size: 1.2em;
-            position: relative;
-            z-index: 1;
         }
 
         .controls {
             display: flex;
             gap: 12px;
-            padding: 25px;
+            padding: 20px;
             background: rgba(15, 23, 42, 0.95);
-            border-bottom: 2px solid rgba(59, 130, 246, 0.3);
+            border-bottom: 1px solid rgba(59, 130, 246, 0.2);
             flex-wrap: wrap;
-            align-items: center;
         }
 
         .btn {
-            padding: 12px 24px;
-            border: 2px solid transparent;
-            border-radius: 10px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .btn::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.2);
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
-        }
-
-        .btn:hover::before {
-            width: 300px;
-            height: 300px;
-        }
-
-        .btn span {
-            position: relative;
-            z-index: 1;
-        }
-
-        .btn-primary {
-            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-            color: white;
-            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
-        }
-
-        .btn-primary:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 25px rgba(59, 130, 246, 0.6);
-            border-color: rgba(59, 130, 246, 0.5);
-        }
-
-        .btn-secondary {
-            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-            color: white;
-            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
-        }
-
-        .btn-secondary:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 25px rgba(99, 102, 241, 0.6);
-            border-color: rgba(99, 102, 241, 0.5);
-        }
-
-        .btn-success {
-            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-            color: white;
-            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
-        }
-
-        .btn-success:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 25px rgba(16, 185, 129, 0.6);
-            border-color: rgba(16, 185, 129, 0.5);
-        }
-
-        .file-input-wrapper {
-            position: relative;
-            overflow: hidden;
-            display: inline-block;
-        }
-
-        .file-input-wrapper input[type=file] {
-            position: absolute;
-            left: -9999px;
-        }
-
-        .mode-toggle {
-            margin-left: auto;
-            display: flex;
-            gap: 8px;
-            background: rgba(30, 41, 59, 0.8);
-            padding: 6px;
-            border-radius: 12px;
-            border: 1px solid rgba(59, 130, 246, 0.3);
-        }
-
-        .mode-btn {
             padding: 10px 20px;
-            border: none;
-            background: transparent;
-            cursor: pointer;
             border-radius: 8px;
+            border: none;
+            cursor: pointer;
             font-weight: 600;
-            transition: all 0.3s ease;
-            color: #94a3b8;
+            transition: transform 0.2s;
+            color: white;
         }
 
-        .mode-btn.active {
-            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-            color: white;
-            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
-        }
+        .btn-primary { background: #3b82f6; }
+        .btn-secondary { background: #6366f1; }
+        .btn-success { background: #10b981; }
+        .btn:hover { transform: translateY(-2px); }
 
         .workspace {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 0;
             min-height: 600px;
         }
 
-        .workspace.preview-only {
-            grid-template-columns: 1fr;
-        }
+        .workspace.preview-only { grid-template-columns: 1fr; }
 
-        .editor-panel, .preview-panel {
-            padding: 30px;
-            overflow-y: auto;
-            max-height: 700px;
-        }
-
-        .editor-panel {
-            background: rgba(15, 23, 42, 0.95);
-            border-right: 2px solid rgba(59, 130, 246, 0.3);
-        }
-
-        .workspace.preview-only .editor-panel {
-            display: none;
-        }
-
-        .editor-panel h3, .preview-panel h3 {
-            margin-bottom: 20px;
-            color: #60a5fa;
-            font-size: 1.3em;
-            text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .editor-panel h3::before {
-            content: '⚡';
-            font-size: 1.2em;
-        }
-
-        .preview-panel h3::before {
-            content: '👁️';
-            font-size: 1.2em;
-        }
+        .editor-panel, .preview-panel { padding: 30px; overflow-y: auto; max-height: 750px; }
+        .editor-panel { border-right: 1px solid rgba(59, 130, 246, 0.2); }
 
         textarea {
             width: 100%;
             min-height: 550px;
-            padding: 20px;
-            border: 2px solid rgba(59, 130, 246, 0.3);
-            border-radius: 12px;
-            font-family: 'Courier New', monospace;
-            font-size: 14px;
-            line-height: 1.8;
-            resize: vertical;
-            transition: all 0.3s ease;
-            background: rgba(30, 41, 59, 0.8);
-            color: #e2e8f0;
-        }
-
-        textarea:focus {
-            outline: none;
-            border-color: #3b82f6;
-            box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
-        }
-
-        textarea::placeholder {
-            color: #64748b;
-        }
-
-        .preview-panel {
-            background: rgba(15, 23, 42, 0.95);
-        }
-
-        #content {
-            line-height: 1.8;
-            color: #e2e8f0;
-        }
-
-        #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
-            margin-top: 24px;
-            margin-bottom: 16px;
-            font-weight: 600;
-            line-height: 1.25;
-            color: #60a5fa;
-            text-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
-        }
-
-        #content h1 {
-            font-size: 2.2em;
-            border-bottom: 2px solid rgba(59, 130, 246, 0.4);
-            padding-bottom: 12px;
-            background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        #content h2 {
-            font-size: 1.7em;
-            border-bottom: 1px solid rgba(59, 130, 246, 0.3);
-            padding-bottom: 10px;
-        }
-
-        #content h3 { font-size: 1.4em; }
-        #content h4 { font-size: 1.1em; }
-
-        #content p {
-            margin-bottom: 16px;
-            color: #cbd5e1;
-        }
-
-        #content a {
-            color: #60a5fa;
-            text-decoration: none;
-            font-weight: 500;
-            position: relative;
-            transition: all 0.3s ease;
-        }
-
-        #content a:hover {
-            color: #93c5fd;
-            text-shadow: 0 0 10px rgba(96, 165, 250, 0.6);
-        }
-
-        #content img {
-            max-width: 100%;
-            border-radius: 12px;
-            margin: 20px 0;
-            box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
-            border: 1px solid rgba(59, 130, 246, 0.3);
-        }
-
-        #content pre {
-            background: rgba(15, 23, 42, 0.95);
-            color: #e2e8f0;
-            padding: 20px;
-            border-radius: 12px;
-            overflow-x: auto;
-            margin: 20px 0;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(59, 130, 246, 0.3);
-        }
-
-        #content code {
-            background: rgba(30, 41, 59, 0.8);
-            padding: 3px 8px;
-            border-radius: 6px;
-            font-family: 'Courier New', monospace;
-            font-size: 0.9em;
-            color: #fbbf24;
-            border: 1px solid rgba(251, 191, 36, 0.3);
-        }
-
-        #content pre code {
-            background: transparent;
-            padding: 0;
-            color: #a5f3fc;
-            border: none;
-        }
-
-        #content blockquote {
-            border-left: 4px solid #3b82f6;
-            padding-left: 20px;
-            margin: 20px 0;
-            color: #94a3b8;
-            font-style: italic;
-            background: rgba(59, 130, 246, 0.1);
-            padding: 15px 20px;
-            border-radius: 0 8px 8px 0;
-        }
-
-        #content ul, #content ol {
-            margin: 16px 0;
-            padding-left: 30px;
-            color: #cbd5e1;
-        }
-
-        #content li {
-            margin: 10px 0;
-        }
-
-        #content table {
-            border-collapse: collapse;
-            width: 100%;
-            margin: 20px 0;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-            border-radius: 12px;
-            overflow: hidden;
-        }
-
-        #content table th, #content table td {
-            border: 1px solid rgba(59, 130, 246, 0.3);
-            padding: 14px;
-            text-align: left;
-        }
-
-        #content table th {
-            background: rgba(59, 130, 246, 0.2);
-            font-weight: 600;
-            color: #60a5fa;
-        }
-
-        #content table td {
+            padding: 15px;
             background: rgba(30, 41, 59, 0.5);
-            color: #cbd5e1;
+            color: #fff;
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            border-radius: 8px;
+            font-family: 'Courier New', monospace;
+            resize: none;
         }
 
-        #content table tr:hover td {
-            background: rgba(59, 130, 246, 0.15);
-        }
-
-        #content hr {
-            border: none;
-            border-top: 2px solid rgba(59, 130, 246, 0.3);
-            margin: 30px 0;
-            box-shadow: 0 1px 10px rgba(59, 130, 246, 0.3);
-        }
-
-        .placeholder {
-            color: #64748b;
-            font-style: italic;
-            text-align: center;
-            padding: 80px 20px;
-            font-size: 1.1em;
-        }
-
-        /* Scrollbar personalizado */
-        ::-webkit-scrollbar {
-            width: 10px;
-            height: 10px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: rgba(15, 23, 42, 0.5);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-            border-radius: 10px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-        }
-
-        @media (max-width: 768px) {
-            .workspace {
-                grid-template-columns: 1fr;
-            }
-
-            .editor-panel {
-                border-right: none;
-                border-bottom: 2px solid rgba(59, 130, 246, 0.3);
-            }
-
-            .controls {
-                flex-direction: column;
-            }
-
-            .mode-toggle {
-                margin-left: 0;
-                width: 100%;
-            }
-
-            .header h1 {
-                font-size: 2em;
-            }
-        }
+        /* Markdown Preview Styles */
+        #content h1 { color: #60a5fa; border-bottom: 1px solid #3b82f6; padding-bottom: 10px; margin-bottom: 20px; }
+        #content code { background: #1e293b; color: #fbbf24; padding: 2px 6px; border-radius: 4px; }
     </style>
 </head>
 <body>
@@ -486,262 +103,109 @@
 
     <div class="container">
         <div class="header">
-            <h1>🚀 Visor y Editor Markdown</h1>
-            <p>Editor futurista con vista previa en tiempo real</p>
+            <h1>🚀 Visor Markdown Pro</h1>
+            <p>Optimizado para alto rendimiento</p>
         </div>
 
         <div class="controls">
-            <div class="file-input-wrapper">
-                <label for="file-upload" class="btn btn-primary">
-                    <span>📁 Cargar archivo .md</span>
-                </label>
-                <input type="file" id="file-upload" accept=".md,.markdown,.txt">
-            </div>
-            
-            <button id="clear-btn" class="btn btn-secondary">
-                <span>🗑️ Limpiar</span>
-            </button>
-            <button id="download-btn" class="btn btn-success">
-                <span>💾 Descargar .md</span>
-            </button>
-            
-            <div class="mode-toggle">
-                <button class="mode-btn active" data-mode="split">✂️ Dividido</button>
-                <button class="mode-btn" data-mode="preview">👁️ Vista previa</button>
-            </div>
+            <input type="file" id="file-upload" hidden>
+            <button onclick="document.getElementById('file-upload').click()" class="btn btn-primary">📁 Cargar</button>
+            <button id="clear-btn" class="btn btn-secondary">🗑️ Limpiar</button>
+            <button id="download-btn" class="btn btn-success">💾 Descargar</button>
         </div>
 
         <div class="workspace" id="workspace">
             <div class="editor-panel">
-                <h3>Editor Markdown</h3>
-                <textarea id="markdown-input" placeholder="# Escribe tu Markdown aquí...
-
-## Ejemplo de uso
-
-Puedes usar **negrita**, *cursiva*, y más.
-
-### Lista de características:
-- Editor en tiempo real
-- Vista previa instantánea
-- Descarga como archivo .md
-- Diseño futurista oscuro
-- Fondo con partículas de estrellas
-
-```javascript
-console.log('¡Hola Mundo!');
-```
-
-> Esto es una cita inspiradora
-
-[Enlace de ejemplo](https://example.com)
-
----
-
-| Característica | Estado |
-|---------------|---------|
-| Editor | ✅ Activo |
-| Preview | ✅ Activo |
-| Descarga | ✅ Activo |"></textarea>
+                <textarea id="markdown-input" placeholder="# Empieza a escribir..."></textarea>
             </div>
-
             <div class="preview-panel">
-                <h3>Vista Previa</h3>
-                <div id="content" class="placeholder">
-                    <p>✨ Carga un archivo .md o escribe en el editor para ver la vista previa aquí ✨</p>
-                </div>
+                <div id="content"></div>
             </div>
         </div>
     </div>
 
     <script>
-        // Configuración de partículas de estrellas
-        const canvas = document.getElementById('stars-canvas');
-        const ctx = canvas.getContext('2d');
-        
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
+     // --- OPTIMIZACIÓN DE CANVAS (Estrellas) ---
+     const canvas = document.getElementById('stars-canvas');
+     const ctx = canvas.getContext('2d');
+     const offscreenCanvas = document.createElement('canvas');
+     const offCtx = offscreenCanvas.getContext('2d');
 
-        let stars = [];
-        const numStars = 200;
+     canvas.width = window.innerWidth;
+     canvas.height = window.innerHeight;
 
-        class Star {
-            constructor() {
-                this.x = Math.random() * canvas.width;
-                this.y = Math.random() * canvas.height;
-                this.size = Math.random() * 2;
-                this.speedX = (Math.random() - 0.5) * 0.5;
-                this.speedY = (Math.random() - 0.5) * 0.5;
-                this.opacity = Math.random();
-                this.fadeSpeed = (Math.random() - 0.5) * 0.02;
-            }
+     // Pre-renderizamos una estrella una sola vez
+     offscreenCanvas.width = 10;
+     offscreenCanvas.height = 10;
+     const grad = offCtx.createRadialGradient(5, 5, 0, 5, 5, 5);
+     grad.addColorStop(0, 'rgba(139, 92, 246, 1)');
+     grad.addColorStop(1, 'rgba(139, 92, 246, 0)');
+     offCtx.fillStyle = grad;
+     offCtx.fillRect(0, 0, 10, 10);
 
-            update() {
-                this.x += this.speedX;
-                this.y += this.speedY;
-                this.opacity += this.fadeSpeed;
+     let stars = [];
+     for (let i = 0; i < 150; i++) {
+         stars.push({
+             x: Math.random() * canvas.width,
+             y: Math.random() * canvas.height,
+             s: Math.random() * 0.5 + 0.2,
+             vx: (Math.random() - 0.5) * 0.3,
+             vy: (Math.random() - 0.5) * 0.3
+         });
+     }
 
-                if (this.opacity <= 0 || this.opacity >= 1) {
-                    this.fadeSpeed *= -1;
-                }
+     function animate() {
+         ctx.clearRect(0, 0, canvas.width, canvas.height);
+         stars.forEach(s => {
+             s.x = (s.x + s.vx + canvas.width) % canvas.width;
+             s.y = (s.y + s.vy + canvas.height) % canvas.height;
+             // Usamos drawImage en lugar de crear gradientes cada vez
+             ctx.drawImage(offscreenCanvas, s.x, s.y, 10 * s.s, 10 * s.s);
+         });
+         requestAnimationFrame(animate);
+     }
+     animate();
 
-                if (this.x < 0) this.x = canvas.width;
-                if (this.x > canvas.width) this.x = 0;
-                if (this.y < 0) this.y = canvas.height;
-                if (this.y > canvas.height) this.y = 0;
-            }
+     // --- OPTIMIZACIÓN DE EDITOR (Debounce) ---
+     const input = document.getElementById('markdown-input');
+     const content = document.getElementById('content');
 
-            draw() {
-                ctx.fillStyle = `rgba(96, 165, 250, ${this.opacity})`;
-                ctx.beginPath();
-                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-                ctx.fill();
+     function debounce(func, wait) {
+         let timeout;
+         return (...args) => {
+             clearTimeout(timeout);
+             timeout = setTimeout(() => func.apply(this, args), wait);
+         };
+     }
 
-                // Efecto de brillo
-                const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size * 3);
-                gradient.addColorStop(0, `rgba(139, 92, 246, ${this.opacity * 0.5})`);
-                gradient.addColorStop(1, 'rgba(139, 92, 246, 0)');
-                ctx.fillStyle = gradient;
-                ctx.fill();
-            }
-        }
+     const updatePreview = debounce(() => {
+         content.innerHTML = marked.parse(input.value || '*Vista previa vacía*');
+     }, 300); // 300ms de espera
 
-        function initStars() {
-            stars = [];
-            for (let i = 0; i < numStars; i++) {
-                stars.push(new Star());
-            }
-        }
+     input.addEventListener('input', updatePreview);
 
-        function animateStars() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            
-            // Fondo con gradiente
-            const gradient = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width);
-            gradient.addColorStop(0, '#0a0e27');
-            gradient.addColorStop(1, '#050810');
-            ctx.fillStyle = gradient;
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
+     // Funciones básicas de botones
+     document.getElementById('clear-btn').onclick = () => {
+         if(confirm('¿Limpiar?')) { input.value = ''; updatePreview(); }
+     };
 
-            stars.forEach(star => {
-                star.update();
-                star.draw();
-            });
+     document.getElementById('download-btn').onclick = () => {
+         const blob = new Blob([input.value], {type: 'text/markdown'});
+         const a = document.createElement('a');
+         a.href = URL.createObjectURL(blob);
+         a.download = 'nota.md';
+         a.click();
+     };
 
-            requestAnimationFrame(animateStars);
-        }
+     // Cargar archivo
+     document.getElementById('file-upload').onchange = (e) => {
+         const reader = new FileReader();
+         reader.onload = (ev) => { input.value = ev.target.result; updatePreview(); };
+         reader.readAsText(e.target.files[0]);
+     };
 
-        window.addEventListener('resize', () => {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-            initStars();
-        });
-
-        initStars();
-        animateStars();
-
-        // Funcionalidad del editor
-        const markdownInput = document.getElementById('markdown-input');
-        const contentDiv = document.getElementById('content');
-        const fileUpload = document.getElementById('file-upload');
-        const clearBtn = document.getElementById('clear-btn');
-        const downloadBtn = document.getElementById('download-btn');
-        const workspace = document.getElementById('workspace');
-        const modeBtns = document.querySelectorAll('.mode-btn');
-
-        // Configurar marked
-        marked.setOptions({
-            breaks: true,
-            gfm: true
-        });
-
-        // Actualizar vista previa en tiempo real
-        function updatePreview() {
-            const markdown = markdownInput.value;
-            if (markdown.trim() === '') {
-                contentDiv.innerHTML = '<p class="placeholder">✨ Carga un archivo .md o escribe en el editor para ver la vista previa aquí ✨</p>';
-            } else {
-                contentDiv.innerHTML = marked.parse(markdown);
-            }
-        }
-
-        markdownInput.addEventListener('input', updatePreview);
-
-        // Cargar archivo
-        fileUpload.addEventListener('change', function(e) {
-            const file = e.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    markdownInput.value = e.target.result;
-                    updatePreview();
-                };
-                reader.readAsText(file);
-            }
-        });
-
-        // Limpiar editor
-        clearBtn.addEventListener('click', function() {
-            if (confirm('¿Estás seguro de que quieres limpiar el contenido?')) {
-                markdownInput.value = '';
-                updatePreview();
-            }
-        });
-
-        // Descargar como archivo .md
-        downloadBtn.addEventListener('click', function() {
-            const markdownContent = markdownInput.value;
-            
-            if (markdownContent.trim() === '') {
-                alert('No hay contenido para descargar. Escribe algo primero.');
-                return;
-            }
-
-            const blob = new Blob([markdownContent], { type: 'text/markdown' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'documento.md';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-        });
-
-        // Cambiar modo de visualización
-        modeBtns.forEach(btn => {
-            btn.addEventListener('click', function() {
-                modeBtns.forEach(b => b.classList.remove('active'));
-                this.classList.add('active');
-                
-                const mode = this.dataset.mode;
-                if (mode === 'preview') {
-                    workspace.classList.add('preview-only');
-                } else {
-                    workspace.classList.remove('preview-only');
-                }
-            });
-        });
-
-        // Compatibilidad con URL (versión anterior)
-        const urlParams = new URLSearchParams(window.location.search);
-        const file = urlParams.get('file');
-        if (file) {
-            fetch(file)
-                .then(response => {
-                    if (!response.ok) throw new Error("No se encontró el archivo.");
-                    return response.text();
-                })
-                .then(text => {
-                    markdownInput.value = text;
-                    updatePreview();
-                })
-                .catch(err => {
-                    contentDiv.innerHTML = `<p style="color: #ef4444;">❌ Error: ${err.message}</p>`;
-                });
-        }
-
-        // Inicializar
-        updatePreview();
+     // Carga inicial
+     updatePreview();
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
-- 
2.39.5

