app.js

/* ============================================
   VIBE CODING ACADEMY - MOTOR PRINCIPAL
   ============================================ */

// ==========================================
// ESTADO GLOBAL
// ==========================================
const state = {
    currentModule: 0,
    currentLesson: 0,
    mode: 'tutorial', // 'tutorial' o 'practice'
    completedModules: new Set(),
    completedLessons: new Set(),
    commandHistory: [],
    historyIndex: -1,
    fileSystem: {},
    currentPath: '~/proyecto',
    achievements: new Set(),
};

// Cargar progreso guardado
function loadProgress() {
    try {
        const saved = localStorage.getItem('vibeCodingProgress');
        if (saved) {
            const data = JSON.parse(saved);
            state.completedModules = new Set(data.completedModules || []);
            state.completedLessons = new Set(data.completedLessons || []);
            state.achievements = new Set(data.achievements || []);
            state.currentModule = data.currentModule || 0;
            state.currentLesson = data.currentLesson || 0;
        }
    } catch (e) { /* ignorar */ }
}

function saveProgress() {
    try {
        localStorage.setItem('vibeCodingProgress', JSON.stringify({
            completedModules: [...state.completedModules],
            completedLessons: [...state.completedLessons],
            achievements: [...state.achievements],
            currentModule: state.currentModule,
            currentLesson: state.currentLesson,
        }));
    } catch (e) { /* ignorar */ }
}

// ==========================================
// DATOS DE MÓDULOS Y LECCIONES
// ==========================================
const modules = [
    {
        id: 0,
        icon: '🖥️',
        name: '¿Qué es una Terminal?',
        lessons: [
            {
                title: 'La Terminal: Tu Nuevo Centro de Control',
                content: `
<h2>¿Qué es exactamente una Terminal?</h2>
<p>Imagina que tienes un asistente ultra-eficiente que hace exactamente lo que le pides, pero solo entiende instrucciones escritas. <strong>Eso es una terminal.</strong></p>

<div class="analogy">Piensa en tu empresa: tienes un ERP, un CRM, correo, etc. Cada uno tiene botones e interfaces gráficas. La terminal es como si le hablaras DIRECTAMENTE al sistema operativo de tu computadora, sin intermediarios gráficos. Es el "modo experto" de tu computadora.</div>

<h2>¿Por qué debería importarme como empresario?</h2>
<p>Porque el <strong>vibe coding</strong> (programar con ayuda de IA) se hace desde la terminal. Las herramientas más potentes que existen hoy viven aquí:</p>
<ul>
    <li><strong>Claude Code</strong> - Un programador IA que vive en tu terminal</li>
    <li><strong>Git</strong> - Control de versiones (como el "historial de cambios" de Word, pero para proyectos enteros)</li>
    <li><strong>npm/pip</strong> - Tiendas de herramientas gratuitas para programar</li>
    <li><strong>Cursor / VS Code</strong> - Editores de código inteligentes</li>
</ul>

<h2>Las 3 Terminales que Existen</h2>
<table class="command-table">
    <tr><th>Sistema</th><th>Terminal</th><th>Cómo abrirla</th></tr>
    <tr><td>🍎 Mac</td><td>Terminal / iTerm2</td><td>Cmd + Espacio → "Terminal"</td></tr>
    <tr><td>🪟 Windows</td><td>PowerShell / CMD</td><td>Buscar → "PowerShell"</td></tr>
    <tr><td>🐧 Linux</td><td>Terminal / Bash</td><td>Ctrl + Alt + T</td></tr>
</table>

<div class="try-it">Escribe <code>help</code> en la terminal de abajo para ver los comandos disponibles en este simulador.</div>
                `
            },
            {
                title: 'Anatomía de la Terminal',
                content: `
<h2>Las Partes de una Terminal</h2>
<p>Cuando abres una terminal, ves algo así:</p>
<pre><code>usuario@mi-computadora ~/proyecto $</code></pre>
<p>Vamos a desglosarlo:</p>

<table class="command-table">
    <tr><th>Parte</th><th>Significado</th><th>Analogía</th></tr>
    <tr><td><code>usuario</code></td><td>Tu nombre de usuario</td><td>Tu nombre en la puerta de tu oficina</td></tr>
    <tr><td><code>@mi-computadora</code></td><td>Nombre de tu máquina</td><td>El nombre de tu edificio</td></tr>
    <tr><td><code>~/proyecto</code></td><td>Dónde estás ahora (carpeta actual)</td><td>En qué piso/oficina estás</td></tr>
    <tr><td><code>$</code></td><td>Indica que puedes escribir</td><td>El "cursor" esperando tu orden</td></tr>
</table>

<div class="analogy">Es como el GPS de tu computadora: siempre te dice dónde estás antes de pedirte a dónde ir.</div>

<h2>El Símbolo ~ (Tilde)</h2>
<p>El símbolo <code>~</code> es un atajo que significa <strong>"mi carpeta personal"</strong>. Es tu "escritorio digital".</p>
<ul>
    <li>En Mac: <code>/Users/tu-nombre</code></li>
    <li>En Windows: <code>C:\\Users\\tu-nombre</code></li>
    <li>En Linux: <code>/home/tu-nombre</code></li>
</ul>

<div class="try-it">Escribe <code>pwd</code> para ver tu ubicación actual en la terminal simulada.</div>
                `
            }
        ]
    },
    {
        id: 1,
        icon: '📂',
        name: 'Comandos Esenciales',
        lessons: [
            {
                title: 'Navegación: Moverse entre Carpetas',
                content: `
<h2>Los Comandos de Navegación</h2>
<p>Lo primero que necesitas saber es <strong>moverte</strong> dentro de tu computadora usando la terminal.</p>

<div class="analogy">Imagina que tu computadora es un edificio de oficinas. Las carpetas son habitaciones, y los archivos son documentos dentro de esas habitaciones. Tú eres una persona moviéndose entre ellas.</div>

<table class="command-table">
    <tr><th>Comando</th><th>Qué hace</th><th>Ejemplo</th></tr>
    <tr><td><code>pwd</code></td><td>Muestra dónde estás</td><td>"¿En qué piso estoy?"</td></tr>
    <tr><td><code>ls</code></td><td>Lista archivos y carpetas</td><td>"¿Qué hay en esta habitación?"</td></tr>
    <tr><td><code>cd nombre</code></td><td>Entra a una carpeta</td><td>"Entra a la oficina de ventas"</td></tr>
    <tr><td><code>cd ..</code></td><td>Sube un nivel</td><td>"Vuelve al pasillo"</td></tr>
    <tr><td><code>cd ~</code></td><td>Vuelve a tu home</td><td>"Regresa a tu oficina personal"</td></tr>
</table>

<h2>Flags: Las Opciones de los Comandos</h2>
<p>Los comandos pueden tener <strong>opciones extra</strong> llamadas <strong>flags</strong> (banderas). Se ponen con un guión:</p>
<pre><code>ls -la</code></pre>
<ul>
    <li><code>-l</code> = formato largo (más detalles)</li>
    <li><code>-a</code> = mostrar archivos ocultos</li>
</ul>

<div class="try-it">Prueba estos comandos en la terminal:<br><code>pwd</code> → <code>ls</code> → <code>cd documentos</code> → <code>ls</code> → <code>cd ..</code></div>
                `
            },
            {
                title: 'Crear, Mover y Eliminar',
                content: `
<h2>Manipulación de Archivos y Carpetas</h2>
<p>Ahora que sabes moverte, aprende a <strong>crear y organizar</strong> tu espacio de trabajo.</p>

<table class="command-table">
    <tr><th>Comando</th><th>Qué hace</th><th>Ejemplo</th></tr>
    <tr><td><code>mkdir nombre</code></td><td>Crear carpeta</td><td><code>mkdir mi-proyecto</code></td></tr>
    <tr><td><code>touch nombre</code></td><td>Crear archivo vacío</td><td><code>touch index.html</code></td></tr>
    <tr><td><code>cp origen destino</code></td><td>Copiar archivo</td><td><code>cp nota.txt copia.txt</code></td></tr>
    <tr><td><code>mv origen destino</code></td><td>Mover o renombrar</td><td><code>mv viejo.txt nuevo.txt</code></td></tr>
    <tr><td><code>rm nombre</code></td><td>Eliminar archivo</td><td><code>rm basura.txt</code></td></tr>
    <tr><td><code>cat nombre</code></td><td>Ver contenido del archivo</td><td><code>cat notas.txt</code></td></tr>
</table>

<div class="warning">El comando <code>rm</code> elimina archivos SIN papelera de reciclaje. No hay "deshacer". Úsalo con cuidado.</div>

<div class="important"><code>mkdir -p</code> puede crear carpetas anidadas de golpe. Por ejemplo: <code>mkdir -p src/components/ui</code> crea las tres carpetas de una vez aunque no existieran.</div>

<div class="try-it">Crea tu primer proyecto:<br>
<code>mkdir mi-app</code> → <code>cd mi-app</code> → <code>touch index.html</code> → <code>ls</code></div>
                `
            },
            {
                title: 'Atajos que te Hacen Eficiente',
                content: `
<h2>Atajos de Terminal que Todo Pro Usa</h2>
<p>Estos atajos te harán <strong>10x más rápido</strong>:</p>

<table class="command-table">
    <tr><th>Atajo</th><th>Qué hace</th></tr>
    <tr><td><code>Tab</code></td><td>Autocompleta nombres de archivos/carpetas</td></tr>
    <tr><td><code>↑ / ↓</code></td><td>Navega por comandos anteriores</td></tr>
    <tr><td><code>Ctrl + C</code></td><td>Cancela el comando actual</td></tr>
    <tr><td><code>Ctrl + L</code></td><td>Limpia la pantalla (igual que <code>clear</code>)</td></tr>
    <tr><td><code>Ctrl + A</code></td><td>Ir al inicio de la línea</td></tr>
    <tr><td><code>Ctrl + E</code></td><td>Ir al final de la línea</td></tr>
</table>

<div class="analogy">Es como aprender los atajos de teclado en Excel. Al principio no parece necesario, pero cuando los dominas, trabajas a otra velocidad.</div>

<h2>El Operador Pipe: <code>|</code></h2>
<p>El <strong>pipe</strong> conecta la salida de un comando con la entrada de otro:</p>
<pre><code>ls | grep ".html"</code></pre>
<p>Esto lista archivos y FILTRA solo los que terminan en ".html".</p>

<div class="try-it">Prueba: <code>clear</code> para limpiar la terminal, y usa las flechas ↑↓ para navegar tu historial de comandos.</div>
                `
            }
        ]
    },
    {
        id: 2,
        icon: '🔧',
        name: 'Instalando Herramientas',
        lessons: [
            {
                title: 'Las Herramientas Fundamentales',
                content: `
<h2>Lo que Necesitas Instalar (El Kit Básico)</h2>
<p>Para hacer vibe coding necesitas <strong>4 herramientas esenciales</strong>. Piensa en ellas como las apps básicas de tu teléfono:</p>

<table class="command-table">
    <tr><th>Herramienta</th><th>¿Qué es?</th><th>Analogía</th></tr>
    <tr><td><strong>Node.js</strong></td><td>Motor para ejecutar JavaScript</td><td>El motor de tu carro</td></tr>
    <tr><td><strong>npm</strong></td><td>Tienda de paquetes/librerías</td><td>La App Store de herramientas</td></tr>
    <tr><td><strong>Git</strong></td><td>Control de versiones</td><td>Google Drive + Historial de cambios</td></tr>
    <tr><td><strong>Un editor</strong></td><td>Donde escribes código</td><td>Tu Word/Google Docs de código</td></tr>
</table>

<h2>¿Cómo se Instalan?</h2>
<h3>En Mac (con Homebrew)</h3>
<pre><code># Primero instala Homebrew (el instalador de Mac)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Luego instala todo
brew install node
brew install git</code></pre>

<h3>En Windows</h3>
<pre><code># Descarga e instala desde:
# Node.js → https://nodejs.org
# Git → https://git-scm.com
# O usa winget:
winget install OpenJS.NodeJS
winget install Git.Git</code></pre>

<div class="important">Después de instalar, cierra y vuelve a abrir la terminal para que reconozca los nuevos programas.</div>

<div class="try-it">Prueba verificar si tienes las herramientas:<br>
<code>node --version</code> → <code>npm --version</code> → <code>git --version</code></div>
                `
            },
            {
                title: 'npm: Tu App Store de Código',
                content: `
<h2>¿Qué es npm?</h2>
<p><strong>npm</strong> (Node Package Manager) es una "tienda" gratuita con <strong>más de 2 millones de herramientas</strong> listas para usar.</p>

<div class="analogy">Imagina que quieres construir una casa. No fabricas tus propios ladrillos, tubos y cables. Los compras hechos. npm es la ferretería donde encuentras todos los componentes que necesitas para construir tu aplicación.</div>

<h2>Comandos Esenciales de npm</h2>
<table class="command-table">
    <tr><th>Comando</th><th>Qué hace</th></tr>
    <tr><td><code>npm init -y</code></td><td>Crea un proyecto nuevo (genera package.json)</td></tr>
    <tr><td><code>npm install nombre</code></td><td>Instala una herramienta/librería</td></tr>
    <tr><td><code>npm install</code></td><td>Instala todo lo que el proyecto necesita</td></tr>
    <tr><td><code>npm run dev</code></td><td>Ejecuta el proyecto en modo desarrollo</td></tr>
    <tr><td><code>npx nombre</code></td><td>Ejecuta un paquete sin instalarlo permanentemente</td></tr>
</table>

<h2>El archivo package.json</h2>
<p>Es como la <strong>"receta"</strong> de tu proyecto. Dice qué ingredientes (dependencias) necesita:</p>
<pre><code>{
  "name": "mi-proyecto",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",    ← ingrediente 1
    "next": "^14.0.0"      ← ingrediente 2
  },
  "scripts": {
    "dev": "next dev",      ← cómo ejecutar
    "build": "next build"   ← cómo compilar
  }
}</code></pre>

<div class="try-it">Simula crear un proyecto:<br>
<code>mkdir mi-webapp</code> → <code>cd mi-webapp</code> → <code>npm init</code> → <code>cat package.json</code></div>
                `
            }
        ]
    },
    {
        id: 3,
        icon: '📝',
        name: 'Git: Tu Máquina del Tiempo',
        lessons: [
            {
                title: '¿Qué es Git y por qué es Obligatorio?',
                content: `
<h2>Git en una Frase</h2>
<p>Git es un <strong>sistema de control de versiones</strong>. Guarda "fotografías" de tu proyecto en diferentes momentos del tiempo.</p>

<div class="analogy">¿Has trabajado alguna vez en un documento de Word y creaste copias como "Propuesta_v1.docx", "Propuesta_v2_FINAL.docx", "Propuesta_v2_FINAL_DEFINITIVO.docx"? Git resuelve ese caos. Es un sistema automático que guarda cada versión, te permite volver a cualquier momento, y permite que varias personas trabajen en el mismo proyecto sin pisarse.</div>

<h2>Conceptos Clave de Git</h2>
<table class="command-table">
    <tr><th>Concepto</th><th>Qué es</th><th>Analogía</th></tr>
    <tr><td><strong>Repositorio (repo)</strong></td><td>Tu proyecto con su historial</td><td>Una carpeta con memoria perfecta</td></tr>
    <tr><td><strong>Commit</strong></td><td>Una "fotografía" guardada</td><td>"Guardar partida" en un videojuego</td></tr>
    <tr><td><strong>Branch (rama)</strong></td><td>Una línea de trabajo paralela</td><td>Un universo alternativo de tu proyecto</td></tr>
    <tr><td><strong>Merge</strong></td><td>Unir dos ramas</td><td>Combinar el trabajo de dos equipos</td></tr>
    <tr><td><strong>Push</strong></td><td>Subir cambios a la nube</td><td>Subir tu trabajo a Google Drive</td></tr>
    <tr><td><strong>Pull</strong></td><td>Bajar cambios de la nube</td><td>Descargar actualizaciones del equipo</td></tr>
</table>

<div class="try-it">Inicia tu primer repositorio:<br>
<code>mkdir mi-repo</code> → <code>cd mi-repo</code> → <code>git init</code> → <code>git status</code></div>
                `
            },
            {
                title: 'El Flujo Básico de Git',
                content: `
<h2>Los 4 Pasos del Flujo Git</h2>
<p>Cada vez que haces cambios en tu proyecto, sigues este ciclo:</p>

<pre><code>1. Trabajas en tus archivos          (editas código)
2. git add .                          (preparas los cambios)
3. git commit -m "descripción"        (guardas la fotografía)
4. git push                           (subes a la nube)</code></pre>

<h3>Paso a Paso:</h3>

<table class="command-table">
    <tr><th>Comando</th><th>Qué hace</th><th>Estado</th></tr>
    <tr><td><code>git status</code></td><td>Ver qué ha cambiado</td><td>📋 Revisando</td></tr>
    <tr><td><code>git add .</code></td><td>Preparar TODOS los cambios</td><td>📦 Empaquetando</td></tr>
    <tr><td><code>git add archivo.txt</code></td><td>Preparar UN archivo específico</td><td>📦 Empaquetando uno</td></tr>
    <tr><td><code>git commit -m "mensaje"</code></td><td>Guardar con descripción</td><td>💾 Guardado</td></tr>
    <tr><td><code>git log</code></td><td>Ver historial de commits</td><td>📜 Historial</td></tr>
</table>

<div class="important">El mensaje del commit debe describir QUÉ cambiaste. Buenos ejemplos: "añade formulario de contacto", "corrige error en login". Malos ejemplos: "cambios", "fix", "asdf".</div>

<h2>GitHub: La Nube de Git</h2>
<p><strong>GitHub</strong> es donde vive tu código en la nube. Es como Google Drive pero para código. Es gratuito y es donde vive el 90% del código del mundo.</p>

<div class="try-it">Simula el flujo completo:<br>
<code>git init</code> → <code>touch app.js</code> → <code>git add .</code> → <code>git commit -m "primer commit"</code> → <code>git log</code></div>
                `
            }
        ]
    },
    {
        id: 4,
        icon: '🤖',
        name: 'Vibe Coding con IA',
        lessons: [
            {
                title: '¿Qué es Vibe Coding?',
                content: `
<h2>La Revolución: Programar sin Saber Programar</h2>
<p><strong>Vibe coding</strong> es un término acuñado por Andrej Karpathy (ex-jefe de IA en Tesla) que significa: <strong>describir lo que quieres y dejar que la IA escriba el código por ti.</strong></p>

<div class="analogy">Es como tener un arquitecto experto a tu lado 24/7. Tú dices "quiero una casa con 3 habitaciones y piscina" y él dibuja los planos, calcula la estructura y te da el proyecto completo. Tú solo necesitas saber QUÉ quieres, no CÓMO construirlo.</div>

<h2>Las Herramientas de Vibe Coding (2025-2026)</h2>
<table class="command-table">
    <tr><th>Herramienta</th><th>Tipo</th><th>Ideal para</th></tr>
    <tr><td><strong>Claude Code</strong></td><td>IA en terminal</td><td>Proyectos completos desde cero</td></tr>
    <tr><td><strong>Cursor</strong></td><td>Editor con IA</td><td>Escribir y editar código con contexto</td></tr>
    <tr><td><strong>v0.dev</strong></td><td>Generador web</td><td>Crear interfaces/diseños rápidamente</td></tr>
    <tr><td><strong>GitHub Copilot</strong></td><td>Asistente en editor</td><td>Autocompletado inteligente de código</td></tr>
    <tr><td><strong>Bolt.new / Lovable</strong></td><td>Builders completos</td><td>Apps completas en el navegador</td></tr>
    <tr><td><strong>Replit Agent</strong></td><td>Entorno + IA</td><td>Prototipado rápido</td></tr>
</table>

<h2>¿Cómo Funciona en la Práctica?</h2>
<pre><code># Instalas Claude Code
npm install -g @anthropic-ai/claude-code

# Entras a tu proyecto
cd mi-proyecto

# Inicias Claude Code
claude

# Y le dices qué quieres:
> "Crea una landing page para mi restaurante
>  con menú, reservaciones y mapa de ubicación"

# Claude escribe TODO el código por ti 🤯</code></pre>

<div class="try-it">Simula instalar una herramienta de vibe coding:<br>
<code>npm install -g claude-code</code> → <code>claude --version</code></div>
                `
            },
            {
                title: 'El Arte de Dar Instrucciones a la IA',
                content: `
<h2>Prompting: La Habilidad Más Importante</h2>
<p>La calidad de lo que la IA produce depende de <strong>qué tan bien le expliques lo que quieres</strong>. Esto se llama <strong>"prompting"</strong>.</p>

<h3>❌ Prompt Malo:</h3>
<pre><code>"Hazme una app"</code></pre>

<h3>✅ Prompt Bueno:</h3>
<pre><code>"Crea una aplicación web para gestionar tareas con:
- Lista de tareas con checkbox para marcar completadas
- Botón para agregar nuevas tareas
- Filtros: todas, pendientes, completadas
- Diseño minimalista con colores oscuros
- Guarda las tareas en localStorage del navegador
- Usa HTML, CSS y JavaScript vanilla (sin frameworks)"</code></pre>

<h2>Fórmula para Buenos Prompts</h2>
<table class="command-table">
    <tr><th>Componente</th><th>Ejemplo</th></tr>
    <tr><td><strong>1. Contexto</strong></td><td>"Tengo una tienda de ropa online..."</td></tr>
    <tr><td><strong>2. Objetivo</strong></td><td>"Necesito una página de catálogo..."</td></tr>
    <tr><td><strong>3. Especificaciones</strong></td><td>"Con filtros por talla, precio y color..."</td></tr>
    <tr><td><strong>4. Restricciones</strong></td><td>"Usando React y Tailwind CSS..."</td></tr>
    <tr><td><strong>5. Estilo</strong></td><td>"Diseño moderno tipo Apple, fondo blanco..."</td></tr>
</table>

<div class="important">No necesitas saber programar para dar buenas instrucciones. Lo que necesitas es ser <strong>específico y claro</strong> sobre lo que quieres. Tu experiencia como empresario en definir requerimientos ES tu superpoder aquí.</div>

<h2>Iterando con la IA</h2>
<p>El vibe coding es <strong>conversacional</strong>. Si algo no te gusta, dices:</p>
<pre><code>> "Cambia el color del encabezado a azul oscuro"
> "Agrega un botón de WhatsApp flotante"
> "Haz que sea responsive para móviles"
> "El formulario debe validar el email antes de enviar"</code></pre>

<div class="try-it">Practica el flujo de vibe coding:<br>
<code>claude</code> → escribe una instrucción como <code>crea una landing page</code></div>
                `
            },
            {
                title: 'Flujo de Trabajo Completo',
                content: `
<h2>Tu Día a Día con Vibe Coding</h2>
<p>Así se ve un flujo de trabajo real:</p>

<pre><code># 1. Creas tu proyecto
mkdir mi-proyecto && cd mi-proyecto

# 2. Inicias Git
git init

# 3. Inicias la herramienta de IA
claude

# 4. Describes tu proyecto completo
> "Quiero una app de reservas para mi restaurante..."

# 5. La IA genera el código

# 6. Pruebas en el navegador
npm run dev

# 7. Si algo no funciona o quieres cambios, iteras
> "El botón de reservar no funciona en móvil, corrígelo"

# 8. Guardas tu progreso
git add .
git commit -m "landing page con sistema de reservas"

# 9. Subes a la nube
git push</code></pre>

<h2>¿Qué Revisar Cuando la IA Genera Código?</h2>
<table class="command-table">
    <tr><th>Aspecto</th><th>Qué verificar</th><th>Cómo</th></tr>
    <tr><td>🖥️ Visual</td><td>¿Se ve como lo pediste?</td><td>Abre en el navegador</td></tr>
    <tr><td>📱 Responsive</td><td>¿Funciona en móvil?</td><td>Redimensiona la ventana</td></tr>
    <tr><td>🔗 Links</td><td>¿Funcionan los botones/enlaces?</td><td>Haz clic en todo</td></tr>
    <tr><td>⚡ Rendimiento</td><td>¿Carga rápido?</td><td>Lighthouse en Chrome</td></tr>
    <tr><td>🔒 Seguridad</td><td>¿Expone datos sensibles?</td><td>Revisa el código por API keys</td></tr>
</table>

<div class="warning">Nunca subas a producción sin probar. La IA puede generar código que se ve bien pero tiene errores sutiles. Siempre prueba todo manualmente.</div>

<div class="try-it">Practica el flujo completo en la terminal simulada. ¡Intenta crear un proyecto desde cero!</div>
                `
            }
        ]
    },
    {
        id: 5,
        icon: '📖',
        name: 'Documentación: Tu Biblia',
        lessons: [
            {
                title: 'Cómo Leer Documentación Técnica',
                content: `
<h2>¿Qué es la Documentación?</h2>
<p>La <strong>documentación</strong> (o "docs") es el manual de instrucciones de cada herramienta. Es donde encuentras CÓMO usar algo.</p>

<div class="analogy">Es como el manual de tu carro. No lo lees completo de una vez, pero cuando necesitas saber cómo cambiar una llanta o conectar el Bluetooth, ahí está la respuesta exacta.</div>

<h2>Las Documentaciones que Más Usarás</h2>
<table class="command-table">
    <tr><th>Herramienta</th><th>URL de Docs</th><th>Para qué</th></tr>
    <tr><td>React</td><td>react.dev</td><td>Crear interfaces de usuario</td></tr>
    <tr><td>Next.js</td><td>nextjs.org/docs</td><td>Crear aplicaciones web completas</td></tr>
    <tr><td>Tailwind CSS</td><td>tailwindcss.com/docs</td><td>Estilos y diseño rápido</td></tr>
    <tr><td>Claude API</td><td>docs.anthropic.com</td><td>Integrar IA en tus proyectos</td></tr>
    <tr><td>Vercel</td><td>vercel.com/docs</td><td>Publicar tu app al mundo</td></tr>
    <tr><td>MDN Web Docs</td><td>developer.mozilla.org</td><td>Referencia de HTML/CSS/JS</td></tr>
</table>

<h2>Estructura Típica de una Documentación</h2>
<ol>
    <li><strong>Getting Started / Quick Start</strong> → Por dónde empezar (LEE ESTO PRIMERO)</li>
    <li><strong>Installation</strong> → Cómo instalar</li>
    <li><strong>Tutorial</strong> → Guía paso a paso</li>
    <li><strong>API Reference</strong> → Referencia técnica detallada (consulta cuando necesites)</li>
    <li><strong>Examples</strong> → Ejemplos de código listos para copiar</li>
    <li><strong>FAQ / Troubleshooting</strong> → Problemas comunes y soluciones</li>
</ol>

<div class="important">No intentes leer TODA la documentación. Empieza siempre por "Getting Started" y luego busca lo que necesites específicamente. La documentación es una referencia, no un libro.</div>

<div class="try-it">Escribe <code>docs react</code> o <code>docs git</code> para ver un resumen rápido de la documentación.</div>
                `
            }
        ]
    },
    {
        id: 6,
        icon: '🚀',
        name: 'Deploy: Publicar al Mundo',
        lessons: [
            {
                title: 'De tu Computadora al Mundo',
                content: `
<h2>¿Qué es Deploy?</h2>
<p><strong>Deploy</strong> (desplegar) significa publicar tu aplicación en internet para que cualquiera pueda usarla.</p>

<div class="analogy">Has construido tu tienda (la app). Ahora necesitas ponerla en un centro comercial (internet) donde la gente pueda visitarla. El deploy es el proceso de "abrir la tienda al público".</div>

<h2>Plataformas de Deploy (Gratis para Empezar)</h2>
<table class="command-table">
    <tr><th>Plataforma</th><th>Ideal para</th><th>Comando de Deploy</th></tr>
    <tr><td><strong>Vercel</strong></td><td>Apps web, Next.js</td><td><code>vercel</code></td></tr>
    <tr><td><strong>Netlify</strong></td><td>Sitios estáticos, landing pages</td><td><code>netlify deploy</code></td></tr>
    <tr><td><strong>Railway</strong></td><td>Backends, APIs, bases de datos</td><td><code>railway up</code></td></tr>
    <tr><td><strong>GitHub Pages</strong></td><td>Sitios simples, portafolios</td><td>Push a GitHub</td></tr>
    <tr><td><strong>Cloudflare Pages</strong></td><td>Sitios estáticos ultra-rápidos</td><td><code>wrangler pages deploy</code></td></tr>
</table>

<h2>Flujo de Deploy con Vercel (El Más Fácil)</h2>
<pre><code># 1. Instala Vercel CLI
npm install -g vercel

# 2. Desde tu proyecto
cd mi-proyecto

# 3. Ejecuta el deploy
vercel

# 4. Vercel te da una URL pública
# → https://mi-proyecto.vercel.app ✅

# ¡Tu app está en internet! 🎉</code></pre>

<h2>CI/CD: Deploy Automático</h2>
<p>Lo más profesional es configurar <strong>deploy automático</strong>: cada vez que haces push a GitHub, tu app se actualiza sola.</p>
<pre><code># Solo conectas tu repo de GitHub con Vercel
# Cada git push → deploy automático
git add .
git commit -m "nueva funcionalidad"
git push  # ← esto automáticamente actualiza tu app en vivo</code></pre>

<div class="try-it">Simula un deploy:<br>
<code>vercel</code> → observa cómo se "publica" tu proyecto.</div>
                `
            }
        ]
    },
    {
        id: 7,
        icon: '🎓',
        name: 'Tu Primer Proyecto Real',
        lessons: [
            {
                title: 'Armando Todo: Proyecto Completo',
                content: `
<h2>🏆 Proyecto Final: Landing Page de Negocio</h2>
<p>Vamos a simular la creación de una landing page profesional usando TODO lo que aprendiste.</p>

<h3>Paso 1: Crear el Proyecto</h3>
<pre><code>mkdir landing-negocio
cd landing-negocio
git init
npm init</code></pre>

<h3>Paso 2: Describir a la IA lo que Quieres</h3>
<pre><code>claude
> "Crea una landing page profesional para una consultoría
> de negocios con: header con logo y navegación, sección
> hero con llamado a acción, sección de servicios con
> iconos, testimonios de clientes, formulario de contacto,
> footer con redes sociales. Diseño moderno y oscuro."</code></pre>

<h3>Paso 3: Revisar y Probar</h3>
<pre><code>npm run dev
# Abre http://localhost:3000 en tu navegador</code></pre>

<h3>Paso 4: Iterar</h3>
<pre><code>> "Cambia el color principal a #58a6ff"
> "Agrega animaciones al scroll"
> "Hazlo responsive para móviles"</code></pre>

<h3>Paso 5: Guardar y Publicar</h3>
<pre><code>git add .
git commit -m "landing page consultoría completa"
git push
vercel</code></pre>

<div class="important">¡Felicidades! Si llegaste hasta aquí, ya tienes las bases para crear proyectos reales con vibe coding. La práctica constante es lo que te hará competente. Cada proyecto que hagas te dará más confianza y habilidad.</div>

<h2>📚 Recursos para Seguir Aprendiendo</h2>
<ul>
    <li><strong>freeCodeCamp.org</strong> - Cursos gratuitos de programación</li>
    <li><strong>YouTube: Fireship</strong> - Videos cortos sobre tecnología moderna</li>
    <li><strong>docs.anthropic.com</strong> - Documentación oficial de Claude</li>
    <li><strong>GitHub.com</strong> - Explora proyectos open source</li>
    <li><strong>Dev.to</strong> - Blog de la comunidad de desarrolladores</li>
</ul>

<div class="try-it">¡Intenta el flujo completo en la terminal simulada! Crea tu proyecto final paso a paso.</div>
                `
            }
        ]
    }
];

// ==========================================
// GLOSARIO
// ==========================================
const glossary = [
    { term: 'API', def: 'Application Programming Interface. Es como un mesero: tú pides (haces una solicitud) y él te trae lo que el chef (servidor) preparó. Permite que aplicaciones hablen entre sí.' },
    { term: 'Backend', def: 'La parte de una aplicación que NO ves. Es la cocina del restaurante: bases de datos, lógica, servidores.' },
    { term: 'Branch (Rama)', def: 'Una copia paralela de tu proyecto en Git donde puedes experimentar sin afectar la versión principal.' },
    { term: 'CLI', def: 'Command Line Interface. Programa que usas escribiendo comandos en la terminal en vez de haciendo clic.' },
    { term: 'Commit', def: 'Un "punto de guardado" en Git. Una fotografía de tu proyecto en un momento específico.' },
    { term: 'CSS', def: 'Cascading Style Sheets. El lenguaje que define cómo se VE una página web (colores, tamaños, layouts).' },
    { term: 'Deploy', def: 'Publicar tu aplicación en internet para que otros la puedan usar.' },
    { term: 'Dependencia', def: 'Código hecho por otros que tu proyecto necesita para funcionar. Se instalan con npm.' },
    { term: 'Framework', def: 'Un conjunto de herramientas y reglas pre-hechas para crear apps más rápido. Ejemplo: React, Next.js, Vue.' },
    { term: 'Frontend', def: 'La parte visible de una aplicación. Lo que el usuario ve y toca: botones, textos, imágenes.' },
    { term: 'Git', def: 'Sistema de control de versiones. Guarda el historial completo de cambios de tu proyecto.' },
    { term: 'GitHub', def: 'Plataforma en la nube donde se guardan proyectos Git. Es como Google Drive para código.' },
    { term: 'HTML', def: 'HyperText Markup Language. El esqueleto de las páginas web. Define la estructura del contenido.' },
    { term: 'IDE', def: 'Integrated Development Environment. Un editor de código con superpoderes (autocompletado, detección de errores, terminal integrada).' },
    { term: 'JavaScript (JS)', def: 'El lenguaje de programación de la web. Hace que las páginas sean interactivas.' },
    { term: 'JSON', def: 'JavaScript Object Notation. Formato para guardar datos estructurados. Es como una tabla de Excel pero en texto.' },
    { term: 'Localhost', def: 'Tu propia computadora actuando como servidor. Cuando pruebas tu app en http://localhost:3000' },
    { term: 'Merge', def: 'Unir dos ramas (branches) de Git. Combinar el trabajo de diferentes líneas de desarrollo.' },
    { term: 'Node.js', def: 'Permite ejecutar JavaScript fuera del navegador. Es el "motor" que necesitas para muchas herramientas modernas.' },
    { term: 'npm', def: 'Node Package Manager. La "App Store" de herramientas y librerías para JavaScript.' },
    { term: 'Open Source', def: 'Software cuyo código es público y cualquiera puede ver, usar y contribuir. La mayoría de herramientas de programación son open source.' },
    { term: 'Package.json', def: 'Archivo que describe tu proyecto: nombre, versión, dependencias, scripts de ejecución. La "receta" de tu app.' },
    { term: 'Prompt', def: 'La instrucción que le das a una IA. La calidad de tu prompt determina la calidad del resultado.' },
    { term: 'Pull Request (PR)', def: 'Solicitud para que tus cambios se incorporen al proyecto principal. Es un proceso de revisión.' },
    { term: 'Repository (Repo)', def: 'Un proyecto completo con todo su historial de Git. Tu carpeta de proyecto con superpoderes.' },
    { term: 'Responsive', def: 'Que una web se adapta a diferentes tamaños de pantalla (computadora, tablet, móvil).' },
    { term: 'Runtime', def: 'El ambiente donde se ejecuta tu código. Node.js es un runtime de JavaScript.' },
    { term: 'Script', def: 'Un conjunto de comandos automatizados. Los defines en package.json para ejecutar tareas comunes.' },
    { term: 'Terminal', def: 'Interfaz de texto para comunicarte directamente con tu computadora mediante comandos escritos.' },
    { term: 'TypeScript', def: 'JavaScript con "reglas" adicionales que evitan errores. Muy popular en proyectos profesionales.' },
    { term: 'URL', def: 'Uniform Resource Locator. La dirección de algo en internet (ejemplo: https://google.com).' },
    { term: 'Vibe Coding', def: 'Programar describiendo lo que quieres a una IA y dejando que ella escriba el código. No necesitas saber programar.' },
    { term: 'Version Control', def: 'Sistema para rastrear y gestionar cambios en archivos. Git es el más popular.' },
];

// ==========================================
// SISTEMA DE ARCHIVOS SIMULADO
// ==========================================
function initFileSystem() {
    state.fileSystem = {
        '~': {
            type: 'dir',
            children: {
                'proyecto': {
                    type: 'dir',
                    children: {
                        'documentos': {
                            type: 'dir',
                            children: {
                                'notas.txt': { type: 'file', content: 'Mis notas de aprendizaje de vibe coding.\nDía 1: Aprendí qué es una terminal.\nDía 2: Aprendí comandos básicos.' },
                                'ideas.txt': { type: 'file', content: 'Ideas para mi primer proyecto:\n- Landing page para mi negocio\n- Dashboard de ventas\n- App de inventario' },
                            }
                        },
                        'imagenes': {
                            type: 'dir',
                            children: {
                                'logo.png': { type: 'file', content: '[Archivo binario: logo.png - 45KB]' },
                            }
                        },
                        'README.md': { type: 'file', content: '# Mi Proyecto\n\nEste es mi primer proyecto de vibe coding.\n\n## Tecnologías\n- HTML\n- CSS\n- JavaScript' },
                    }
                },
                'descargas': {
                    type: 'dir',
                    children: {}
                }
            }
        }
    };
    state.currentPath = '~/proyecto';
}

function getNodeAtPath(path) {
    const parts = path.replace('~', '~').split('/').filter(Boolean);
    let node = state.fileSystem;
    for (const part of parts) {
        if (part === '~') {
            node = node['~'];
        } else if (node && node.children && node.children[part]) {
            node = node.children[part];
        } else {
            return null;
        }
    }
    return node;
}

function getParentAndName(path) {
    const parts = path.split('/').filter(Boolean);
    const name = parts.pop();
    const parentPath = parts.join('/') || '~';
    return { parent: getNodeAtPath(parentPath), name, parentPath };
}

function resolvePath(input) {
    if (input === '~' || input === '') return '~';
    if (input === '..') {
        const parts = state.currentPath.split('/').filter(Boolean);
        if (parts.length <= 1) return '~';
        parts.pop();
        return parts.join('/');
    }
    if (input.startsWith('~/')) return input;
    if (input.startsWith('/')) return '~' + input;
    return state.currentPath + '/' + input;
}

// ==========================================
// PROCESADOR DE COMANDOS
// ==========================================
function processCommand(cmd) {
    const trimmed = cmd.trim();
    if (!trimmed) return '';

    state.commandHistory.push(trimmed);
    state.historyIndex = state.commandHistory.length;

    const parts = trimmed.split(/\s+/);
    const command = parts[0].toLowerCase();
    const args = parts.slice(1);

    switch (command) {
        case 'help': return cmdHelp();
        case 'pwd': return cmdPwd();
        case 'ls': return cmdLs(args);
        case 'cd': return cmdCd(args);
        case 'mkdir': return cmdMkdir(args);
        case 'touch': return cmdTouch(args);
        case 'cat': return cmdCat(args);
        case 'rm': return cmdRm(args);
        case 'cp': return cmdCp(args);
        case 'mv': return cmdMv(args);
        case 'clear': return '__CLEAR__';
        case 'echo': return cmdEcho(args);
        case 'git': return cmdGit(args);
        case 'npm': return cmdNpm(args);
        case 'npx': return cmdNpx(args);
        case 'node': return cmdNode(args);
        case 'claude': return cmdClaude(args);
        case 'vercel': return cmdVercel(args);
        case 'docs': return cmdDocs(args);
        case 'whoami': return '<span class="success-text">vibe-coder-en-entrenamiento 🚀</span>';
        case 'date': return `<span class="info-text">${new Date().toLocaleString('es-ES')}</span>`;
        case 'historia': case 'history': return cmdHistory();
        case 'crea': case 'crear': return cmdCrea(args);
        default:
            return `<span class="error-text">Comando no encontrado: ${command}</span>\n<span class="info-text">Escribe <span class="success-text">help</span> para ver los comandos disponibles.</span>`;
    }
}

function cmdHelp() {
    return `<span class="highlight-text">╔══════════════════════════════════════════════════╗
║        📚 COMANDOS DISPONIBLES                   ║
╠══════════════════════════════════════════════════╣</span>
<span class="info-text">  NAVEGACIÓN:</span>
  <span class="success-text">pwd</span>              Muestra tu ubicación actual
  <span class="success-text">ls</span>               Lista archivos y carpetas
  <span class="success-text">ls -la</span>           Lista detallada con ocultos
  <span class="success-text">cd [carpeta]</span>     Entra a una carpeta
  <span class="success-text">cd ..</span>            Sube un nivel

<span class="info-text">  ARCHIVOS:</span>
  <span class="success-text">mkdir [nombre]</span>   Crea una carpeta
  <span class="success-text">touch [nombre]</span>   Crea un archivo
  <span class="success-text">cat [archivo]</span>    Ver contenido de archivo
  <span class="success-text">cp [orig] [dest]</span> Copia un archivo
  <span class="success-text">mv [orig] [dest]</span> Mueve o renombra
  <span class="success-text">rm [nombre]</span>      Elimina un archivo
  <span class="success-text">echo [texto]</span>     Muestra texto en pantalla

<span class="info-text">  HERRAMIENTAS:</span>
  <span class="success-text">git [comando]</span>    Control de versiones
  <span class="success-text">npm [comando]</span>    Gestor de paquetes
  <span class="success-text">node --version</span>   Ver versión de Node
  <span class="success-text">claude</span>           Iniciar asistente IA
  <span class="success-text">vercel</span>           Desplegar proyecto
  <span class="success-text">docs [tema]</span>      Ver documentación rápida

<span class="info-text">  UTILIDADES:</span>
  <span class="success-text">clear</span>            Limpia la terminal
  <span class="success-text">history</span>          Historial de comandos
  <span class="success-text">whoami</span>           ¿Quién eres?
  <span class="success-text">date</span>             Fecha y hora actual
  <span class="success-text">help</span>             Muestra esta ayuda
<span class="highlight-text">╚══════════════════════════════════════════════════╝</span>`;
}

function cmdPwd() {
    return `<span class="info-text">${state.currentPath}</span>`;
}

function cmdLs(args) {
    const node = getNodeAtPath(state.currentPath);
    if (!node || !node.children) return '<span class="error-text">No es un directorio</span>';

    const showAll = args.includes('-a') || args.includes('-la') || args.includes('-al');
    const longFormat = args.includes('-l') || args.includes('-la') || args.includes('-al');

    const entries = Object.entries(node.children);
    if (entries.length === 0) return '<span class="info-text">(carpeta vacía)</span>';

    if (longFormat) {
        let result = '<span class="info-text">total ' + entries.length + '</span>\n';
        if (showAll) {
            result += '<span class="output-text">drwxr-xr-x  .    </span>\n';
            result += '<span class="output-text">drwxr-xr-x  ..   </span>\n';
        }
        entries.forEach(([name, item]) => {
            const isDir = item.type === 'dir';
            const perms = isDir ? 'drwxr-xr-x' : '-rw-r--r--';
            const size = isDir ? '4096' : (item.content ? item.content.length.toString() : '0');
            const color = isDir ? 'info-text' : 'output-text';
            result += `<span class="output-text">${perms}  ${size.padStart(6)}  </span><span class="${color}">${name}${isDir ? '/' : ''}</span>\n`;
        });
        return result.trim();
    }

    return entries.map(([name, item]) => {
        const isDir = item.type === 'dir';
        return `<span class="${isDir ? 'info-text' : 'output-text'}">${name}${isDir ? '/' : ''}</span>`;
    }).join('  ');
}

function cmdCd(args) {
    if (args.length === 0 || args[0] === '~') {
        state.currentPath = '~/proyecto';
        return '';
    }

    const target = args[0];
    if (target === '..') {
        const parts = state.currentPath.split('/').filter(Boolean);
        if (parts.length <= 1) {
            state.currentPath = '~';
        } else {
            parts.pop();
            state.currentPath = parts.join('/');
        }
        return '';
    }

    const newPath = resolvePath(target);
    const node = getNodeAtPath(newPath);

    if (!node) {
        return `<span class="error-text">cd: no existe el directorio: ${target}</span>`;
    }
    if (node.type !== 'dir') {
        return `<span class="error-text">cd: no es un directorio: ${target}</span>`;
    }

    state.currentPath = newPath;
    return '';
}

function cmdMkdir(args) {
    if (args.length === 0) return '<span class="error-text">mkdir: falta el nombre del directorio</span>';

    const name = args[args.length === 1 ? 0 : (args[0] === '-p' ? 1 : 0)];
    const node = getNodeAtPath(state.currentPath);

    if (!node || !node.children) return '<span class="error-text">Error: directorio actual inválido</span>';

    if (node.children[name]) {
        return `<span class="error-text">mkdir: ya existe: ${name}</span>`;
    }

    node.children[name] = { type: 'dir', children: {} };
    checkAchievement('first_mkdir', '📁 Creador de Carpetas', '¡Creaste tu primera carpeta!');
    return `<span class="success-text">Directorio creado: ${name}/</span>`;
}

function cmdTouch(args) {
    if (args.length === 0) return '<span class="error-text">touch: falta el nombre del archivo</span>';

    const name = args[0];
    const node = getNodeAtPath(state.currentPath);

    if (!node || !node.children) return '<span class="error-text">Error: directorio actual inválido</span>';

    node.children[name] = { type: 'file', content: '' };
    checkAchievement('first_touch', '📄 Creador de Archivos', '¡Creaste tu primer archivo!');
    return `<span class="success-text">Archivo creado: ${name}</span>`;
}

function cmdCat(args) {
    if (args.length === 0) return '<span class="error-text">cat: falta el nombre del archivo</span>';

    const name = args[0];
    const node = getNodeAtPath(state.currentPath);

    if (!node || !node.children || !node.children[name]) {
        return `<span class="error-text">cat: no existe: ${name}</span>`;
    }

    if (node.children[name].type === 'dir') {
        return `<span class="error-text">cat: es un directorio: ${name}</span>`;
    }

    const content = node.children[name].content || '(archivo vacío)';
    return `<span class="output-text">${content}</span>`;
}

function cmdRm(args) {
    if (args.length === 0) return '<span class="error-text">rm: falta el nombre del archivo</span>';

    const name = args[args.length - 1];
    const node = getNodeAtPath(state.currentPath);

    if (!node || !node.children || !node.children[name]) {
        return `<span class="error-text">rm: no existe: ${name}</span>`;
    }

    delete node.children[name];
    return `<span class="warning-text">Eliminado: ${name}</span>`;
}

function cmdCp(args) {
    if (args.length < 2) return '<span class="error-text">cp: uso: cp origen destino</span>';

    const [src, dest] = args;
    const node = getNodeAtPath(state.currentPath);

    if (!node || !node.children || !node.children[src]) {
        return `<span class="error-text">cp: no existe: ${src}</span>`;
    }

    node.children[dest] = JSON.parse(JSON.stringify(node.children[src]));
    return `<span class="success-text">Copiado: ${src} → ${dest}</span>`;
}

function cmdMv(args) {
    if (args.length < 2) return '<span class="error-text">mv: uso: mv origen destino</span>';

    const [src, dest] = args;
    const node = getNodeAtPath(state.currentPath);

    if (!node || !node.children || !node.children[src]) {
        return `<span class="error-text">mv: no existe: ${src}</span>`;
    }

    node.children[dest] = node.children[src];
    delete node.children[src];
    return `<span class="success-text">Movido: ${src} → ${dest}</span>`;
}

function cmdEcho(args) {
    return `<span class="output-text">${args.join(' ')}</span>`;
}

function cmdHistory() {
    if (state.commandHistory.length === 0) return '<span class="info-text">(historial vacío)</span>';
    return state.commandHistory.map((cmd, i) =>
        `<span class="output-text">  ${(i + 1).toString().padStart(4)}  ${cmd}</span>`
    ).join('\n');
}

// ==========================================
// COMANDOS SIMULADOS DE HERRAMIENTAS
// ==========================================
function cmdGit(args) {
    if (args.length === 0) {
        return `<span class="info-text">uso: git [comando]
Comandos: init, status, add, commit, log, branch, push, pull</span>`;
    }

    const sub = args[0];
    switch (sub) {
        case 'init':
            checkAchievement('first_git', '🔧 Git Iniciado', '¡Creaste tu primer repositorio!');
            return `<span class="success-text">Initialized empty Git repository in ${state.currentPath}/.git/</span>\n<span class="info-text">✨ ¡Repositorio Git inicializado! Tu proyecto ahora tiene control de versiones.</span>`;

        case 'status':
            const node = getNodeAtPath(state.currentPath);
            const files = node && node.children ? Object.keys(node.children) : [];
            if (files.length === 0) {
                return `<span class="output-text">On branch main
nothing to commit, working tree clean</span>`;
            }
            return `<span class="output-text">On branch main

Untracked files:
  (use "git add <file>..." to include in what will be committed)

${files.map(f => '        <span class="error-text">' + f + '</span>').join('\n')}

nothing added to commit but untracked files present</span>`;

        case 'add':
            const addTarget = args[1] || '.';
            return `<span class="success-text">Archivos añadidos al staging area${addTarget === '.' ? ' (todos)' : ': ' + addTarget}</span>\n<span class="info-text">📦 Los cambios están preparados para el commit.</span>`;

        case 'commit':
            const msg = args.includes('-m') ? args.slice(args.indexOf('-m') + 1).join(' ').replace(/["']/g, '') : 'sin mensaje';
            checkAchievement('first_commit', '💾 Primer Commit', '¡Guardaste tu primer punto de control!');
            const hash = Math.random().toString(36).substring(2, 9);
            return `<span class="success-text">[main ${hash}] ${msg}
 3 files changed, 42 insertions(+)</span>\n<span class="info-text">💾 ¡Commit realizado! Tu progreso está guardado.</span>`;

        case 'log':
            return `<span class="warning-text">commit a1b2c3d</span> <span class="output-text">(HEAD -> main)</span>
<span class="output-text">Author: Tu Nombre <tu@email.com>
Date:   ${new Date().toLocaleDateString('es-ES')}

    primer commit - proyecto iniciado</span>`;

        case 'branch':
            return `<span class="success-text">* main</span>`;

        case 'push':
            return `<span class="success-text">Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Writing objects: 100% (5/5), 1.24 KiB | 1.24 MiB/s, done.
→ https://github.com/tu-usuario/tu-proyecto.git
   main → main</span>\n<span class="info-text">☁️ ¡Tu código está en la nube!</span>`;

        case 'pull':
            return `<span class="success-text">Already up to date.</span>`;

        default:
            return `<span class="error-text">git: '${sub}' no es un comando de git válido</span>`;
    }
}

function cmdNpm(args) {
    if (args.length === 0) {
        return `<span class="info-text">uso: npm [comando]
Comandos: init, install, run, --version</span>`;
    }

    const sub = args[0];
    switch (sub) {
        case 'init':
            const node = getNodeAtPath(state.currentPath);
            if (node && node.children) {
                node.children['package.json'] = {
                    type: 'file',
                    content: `{
  "name": "${state.currentPath.split('/').pop()}",
  "version": "1.0.0",
  "description": "Mi proyecto de vibe coding",
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {}
}`
                };
            }
            checkAchievement('first_npm', '📦 Proyecto npm', '¡Iniciaste tu primer proyecto npm!');
            return `<span class="success-text">Wrote to ${state.currentPath}/package.json</span>\n<span class="info-text">📦 ¡package.json creado! Tu proyecto está listo para instalar dependencias.</span>`;

        case 'install':
        case 'i':
            const pkg = args[1];
            if (args.includes('-g')) {
                return `<span class="success-text">+ ${pkg || 'paquete'}
added 1 package in 2.3s
Installed globally ✓</span>\n<span class="info-text">🌍 Paquete instalado globalmente. Disponible en cualquier proyecto.</span>`;
            }
            if (!pkg) {
                return `<span class="success-text">added 127 packages in 8.4s
23 packages are looking for funding
  run \`npm fund\` for details</span>\n<span class="info-text">✅ Todas las dependencias instaladas.</span>`;
            }
            return `<span class="success-text">+ ${pkg}@latest
added 1 package in 1.2s</span>\n<span class="info-text">✅ ${pkg} instalado correctamente.</span>`;

        case 'run':
            const script = args[1] || 'dev';
            return `<span class="success-text">> ${state.currentPath.split('/').pop()}@1.0.0 ${script}
> next ${script}

  ▲ Next.js 14.0.0
  - Local:   http://localhost:3000
  - Network: http://192.168.1.100:3000

 ✓ Ready in 2.1s</span>\n<span class="info-text">🚀 ¡Servidor de desarrollo corriendo! Abre http://localhost:3000 en tu navegador.</span>`;

        case '--version':
        case '-v':
            return '<span class="output-text">10.2.3</span>';

        default:
            return `<span class="error-text">npm: comando desconocido: ${sub}</span>`;
    }
}

function cmdNpx(args) {
    if (args.length === 0) return '<span class="error-text">npx: especifica un paquete para ejecutar</span>';

    const pkg = args[0];
    if (pkg === 'create-next-app') {
        return `<span class="success-text">Creating a new Next.js app...

✓ Would you like to use TypeScript? Yes
✓ Would you like to use ESLint? Yes
✓ Would you like to use Tailwind CSS? Yes
✓ Would you like to use src/ directory? Yes

Installing dependencies...
✓ Success! Created my-app

  cd my-app
  npm run dev</span>\n<span class="info-text">🎉 ¡Proyecto Next.js creado! Listo para empezar.</span>`;
    }

    return `<span class="success-text">Executing: ${pkg}
Done ✓</span>`;
}

function cmdNode(args) {
    if (args[0] === '--version' || args[0] === '-v') {
        return '<span class="output-text">v20.11.0</span>';
    }
    return '<span class="info-text">Node.js v20.11.0 - Escribe .exit para salir</span>';
}

function cmdClaude(args) {
    checkAchievement('first_claude', '🤖 Vibe Coder', '¡Iniciaste tu primera sesión de vibe coding!');

    if (args.length > 0) {
        const prompt = args.join(' ');
        return `<span class="highlight-text">╭─────────────────────────────────────╮
│  🤖 Claude Code v1.0               │
│  Asistente de Vibe Coding           │
╰─────────────────────────────────────╯</span>

<span class="info-text">Tu prompt:</span> <span class="output-text">"${prompt}"</span>

<span class="success-text">Analizando tu solicitud...</span>
<span class="success-text">Generando código...</span>

<span class="info-text">He creado los siguientes archivos:</span>
  <span class="success-text">✓</span> index.html   - Estructura de la página
  <span class="success-text">✓</span> styles.css   - Estilos y diseño
  <span class="success-text">✓</span> app.js       - Lógica interactiva

<span class="info-text">Para ver el resultado, ejecuta:</span> <span class="success-text">npm run dev</span>
<span class="info-text">Para hacer cambios, descríbemelos en lenguaje natural.</span>`;
    }

    return `<span class="highlight-text">╭─────────────────────────────────────╮
│  🤖 Claude Code v1.0               │
│  Asistente de Vibe Coding           │
╰─────────────────────────────────────╯</span>

<span class="info-text">¡Hola! Soy Claude Code, tu asistente de programación con IA.

Puedo ayudarte a:</span>
  <span class="success-text">•</span> Crear aplicaciones web completas
  <span class="success-text">•</span> Diseñar interfaces de usuario
  <span class="success-text">•</span> Resolver errores en tu código
  <span class="success-text">•</span> Explicarte cualquier concepto técnico

<span class="info-text">Ejemplo de uso:</span>
  <span class="output-text">claude crea una landing page para mi restaurante</span>
  <span class="output-text">claude agrega un formulario de contacto</span>

<span class="info-text">Describe lo que necesitas y yo escribo el código por ti. 🚀</span>`;
}

function cmdVercel(args) {
    checkAchievement('first_deploy', '🌍 Publicador', '¡Desplegaste tu primer proyecto!');

    return `<span class="highlight-text">▲ Vercel CLI 33.0.0</span>

<span class="output-text">? Set up and deploy "${state.currentPath.split('/').pop()}"?</span> <span class="success-text">Yes</span>
<span class="output-text">? Which scope?</span> <span class="success-text">tu-equipo</span>
<span class="output-text">? Link to existing project?</span> <span class="success-text">No</span>
<span class="output-text">? What's your project's name?</span> <span class="success-text">${state.currentPath.split('/').pop()}</span>

<span class="success-text">🔗 Linked to tu-equipo/${state.currentPath.split('/').pop()}</span>
<span class="output-text">🔍 Inspecting project settings...</span>
<span class="output-text">📦 Building...</span>
<span class="success-text">✅ Build completed!</span>
<span class="output-text">🔄 Deploying...</span>

<span class="success-text">✅ ¡Proyecto desplegado exitosamente!</span>

<span class="info-text">🌍 Producción:</span> <span class="highlight-text">https://${state.currentPath.split('/').pop()}.vercel.app</span>
<span class="info-text">📋 Dashboard:</span>  <span class="output-text">https://vercel.com/tu-equipo/${state.currentPath.split('/').pop()}</span>

<span class="info-text">Tu aplicación está en vivo en internet. 🎉</span>`;
}

function cmdDocs(args) {
    if (args.length === 0) {
        return `<span class="info-text">uso: docs [tema]
Temas disponibles: git, npm, react, nextjs, terminal, claude, vercel, html, css, javascript</span>`;
    }

    const docsMap = {
        'git': `<span class="highlight-text">📖 GIT - Resumen Rápido</span>
<span class="info-text">Documentación:</span> https://git-scm.com/doc

<span class="info-text">Comandos esenciales:</span>
  <span class="success-text">git init</span>          Crear repositorio
  <span class="success-text">git add .</span>         Preparar cambios
  <span class="success-text">git commit -m ""</span>  Guardar punto de control
  <span class="success-text">git push</span>          Subir a la nube
  <span class="success-text">git pull</span>          Bajar de la nube
  <span class="success-text">git status</span>        Ver estado actual
  <span class="success-text">git log</span>           Ver historial
  <span class="success-text">git branch</span>        Ver/crear ramas
  <span class="success-text">git checkout -b</span>   Crear y cambiar a nueva rama`,

        'npm': `<span class="highlight-text">📖 NPM - Resumen Rápido</span>
<span class="info-text">Documentación:</span> https://docs.npmjs.com

<span class="info-text">Comandos esenciales:</span>
  <span class="success-text">npm init -y</span>           Crear proyecto
  <span class="success-text">npm install pkg</span>       Instalar paquete
  <span class="success-text">npm install</span>           Instalar dependencias
  <span class="success-text">npm run dev</span>           Ejecutar en desarrollo
  <span class="success-text">npm run build</span>         Compilar para producción
  <span class="success-text">npx create-next-app</span>  Crear app Next.js`,

        'react': `<span class="highlight-text">📖 REACT - Resumen Rápido</span>
<span class="info-text">Documentación:</span> https://react.dev

<span class="info-text">¿Qué es?</span> Librería para crear interfaces de usuario.
<span class="info-text">Creado por:</span> Meta (Facebook)
<span class="info-text">Concepto clave:</span> Componentes - piezas reutilizables de UI

<span class="info-text">Ejemplo básico:</span>
  function MiBoton() {
    return <button>Haz clic</button>;
  }`,

        'terminal': `<span class="highlight-text">📖 TERMINAL - Resumen Rápido</span>

<span class="info-text">Navegación:</span>
  <span class="success-text">pwd</span>    Dónde estoy
  <span class="success-text">ls</span>     Qué hay aquí
  <span class="success-text">cd</span>     Ir a carpeta

<span class="info-text">Archivos:</span>
  <span class="success-text">mkdir</span>  Crear carpeta
  <span class="success-text">touch</span>  Crear archivo
  <span class="success-text">rm</span>     Eliminar
  <span class="success-text">cp</span>     Copiar
  <span class="success-text">mv</span>     Mover/renombrar

<span class="info-text">Atajos:</span>
  <span class="success-text">Tab</span>      Autocompletar
  <span class="success-text">↑↓</span>       Historial
  <span class="success-text">Ctrl+C</span>   Cancelar
  <span class="success-text">Ctrl+L</span>   Limpiar`,

        'claude': `<span class="highlight-text">📖 CLAUDE CODE - Resumen Rápido</span>
<span class="info-text">Documentación:</span> https://docs.anthropic.com

<span class="info-text">¿Qué es?</span> Asistente de programación IA en la terminal.

<span class="info-text">Instalación:</span>
  <span class="success-text">npm install -g @anthropic-ai/claude-code</span>

<span class="info-text">Uso:</span>
  <span class="success-text">claude</span>              Iniciar sesión interactiva
  <span class="success-text">claude "prompt"</span>     Ejecutar un prompt directo

<span class="info-text">Tips:</span>
  • Sé específico en tus instrucciones
  • Describe el resultado visual que esperas
  • Itera: pide cambios sobre lo generado
  • Revisa siempre el resultado antes de publicar`,
    };

    const topic = args[0].toLowerCase();
    return docsMap[topic] || `<span class="error-text">No hay docs para: ${topic}</span>\n<span class="info-text">Temas disponibles: git, npm, react, nextjs, terminal, claude, vercel</span>`;
}

function cmdCrea(args) {
    const descripcion = args.join(' ');
    return `<span class="info-text">💡 Para crear "${descripcion}", el flujo sería:</span>

  <span class="success-text">1.</span> <span class="output-text">mkdir ${descripcion.replace(/\s+/g, '-').toLowerCase()}</span>
  <span class="success-text">2.</span> <span class="output-text">cd ${descripcion.replace(/\s+/g, '-').toLowerCase()}</span>
  <span class="success-text">3.</span> <span class="output-text">git init</span>
  <span class="success-text">4.</span> <span class="output-text">npm init</span>
  <span class="success-text">5.</span> <span class="output-text">claude "${descripcion}"</span>
  <span class="success-text">6.</span> <span class="output-text">npm run dev</span>  (para probar)
  <span class="success-text">7.</span> <span class="output-text">git add . && git commit -m "proyecto inicial"</span>
  <span class="success-text">8.</span> <span class="output-text">vercel</span>  (para publicar)

<span class="info-text">¡Prueba ejecutar estos comandos uno por uno!</span>`;
}

// ==========================================
// LOGROS
// ==========================================
function checkAchievement(id, title, desc) {
    if (state.achievements.has(id)) return;
    state.achievements.add(id);
    saveProgress();

    const popup = document.getElementById('achievement-popup');
    document.getElementById('achievement-title').textContent = title;
    document.getElementById('achievement-desc').textContent = desc;
    popup.classList.remove('hidden');

    setTimeout(() => popup.classList.add('hidden'), 4000);
}

// ==========================================
// INTERFAZ DE TERMINAL
// ==========================================
function initTerminal() {
    const input = document.getElementById('terminal-input');
    const output = document.getElementById('terminal-output');

    // Mensaje de bienvenida
    appendOutput(`<span class="highlight-text">╔══════════════════════════════════════════════════╗
║  🚀 Vibe Coding Academy - Terminal Simulada      ║
║  Escribe 'help' para ver comandos disponibles     ║
╚══════════════════════════════════════════════════╝</span>
`);

    input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            const cmd = input.value;
            const prompt = document.getElementById('terminal-prompt').textContent;

            // Mostrar comando ejecutado
            appendOutput(`<span class="prompt-line">${prompt}</span> <span class="command-text">${cmd}</span>`);

            // Procesar
            const result = processCommand(cmd);
            if (result === '__CLEAR__') {
                output.innerHTML = '';
            } else if (result) {
                appendOutput(result);
            }

            // Actualizar prompt
            updatePrompt();

            input.value = '';
            scrollTerminal();
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            if (state.historyIndex > 0) {
                state.historyIndex--;
                input.value = state.commandHistory[state.historyIndex] || '';
            }
        } else if (e.key === 'ArrowDown') {
            e.preventDefault();
            if (state.historyIndex < state.commandHistory.length - 1) {
                state.historyIndex++;
                input.value = state.commandHistory[state.historyIndex] || '';
            } else {
                state.historyIndex = state.commandHistory.length;
                input.value = '';
            }
        } else if (e.key === 'Tab') {
            e.preventDefault();
            autocomplete(input);
        }
    });

    // Focus en la terminal al hacer clic
    document.getElementById('terminal-body').addEventListener('click', () => {
        input.focus();
    });
}

function appendOutput(html) {
    const output = document.getElementById('terminal-output');
    const line = document.createElement('div');
    line.className = 'output-line';
    line.innerHTML = html;
    output.appendChild(line);
}

function scrollTerminal() {
    const output = document.getElementById('terminal-output');
    output.scrollTop = output.scrollHeight;
}

function clearTerminal() {
    document.getElementById('terminal-output').innerHTML = '';
}

function showHelp() {
    const result = cmdHelp();
    appendOutput(result);
    scrollTerminal();
}

function updatePrompt() {
    const shortPath = state.currentPath.length > 30
        ? '...' + state.currentPath.slice(-27)
        : state.currentPath;
    document.getElementById('terminal-prompt').textContent = `${shortPath} $`;
}

function autocomplete(input) {
    const val = input.value;
    const parts = val.split(' ');
    const lastPart = parts[parts.length - 1];

    if (!lastPart) return;

    const node = getNodeAtPath(state.currentPath);
    if (!node || !node.children) return;

    const matches = Object.keys(node.children).filter(name =>
        name.toLowerCase().startsWith(lastPart.toLowerCase())
    );

    if (matches.length === 1) {
        parts[parts.length - 1] = matches[0];
        input.value = parts.join(' ');
    } else if (matches.length > 1) {
        appendOutput(`<span class="info-text">${matches.join('  ')}</span>`);
        scrollTerminal();
    }
}

// ==========================================
// INTERFAZ DE MÓDULOS Y LECCIONES
// ==========================================
function renderModuleList() {
    const list = document.getElementById('module-list');
    list.innerHTML = '';

    modules.forEach((mod, i) => {
        const isCompleted = state.completedModules.has(i);
        const isActive = i === state.currentModule;

        const li = document.createElement('li');
        li.className = `module-item${isActive ? ' active' : ''}${isCompleted ? ' completed' : ''}`;
        li.onclick = () => goToModule(i);

        li.innerHTML = `
            <span class="module-icon">${isCompleted ? '✅' : mod.icon}</span>
            <span class="module-name">${mod.name}</span>
            <span class="module-status">${isCompleted ? 'Listo' : `${mod.lessons.length} lec.`}</span>
        `;

        list.appendChild(li);
    });
}

function renderLesson() {
    const mod = modules[state.currentModule];
    const lesson = mod.lessons[state.currentLesson];

    document.getElementById('lesson-badge').textContent = `MÓDULO ${state.currentModule + 1} — Lección ${state.currentLesson + 1}`;
    document.getElementById('lesson-title').textContent = lesson.title;
    document.getElementById('lesson-body').innerHTML = lesson.content;
    document.getElementById('lesson-counter').textContent =
        `${state.currentLesson + 1} / ${mod.lessons.length}`;

    // Botones de navegación
    document.getElementById('prev-btn').disabled =
        (state.currentModule === 0 && state.currentLesson === 0);

    const isLastLesson = state.currentLesson === mod.lessons.length - 1;
    const isLastModule = state.currentModule === modules.length - 1;
    const nextBtn = document.getElementById('next-btn');

    if (isLastLesson && isLastModule) {
        nextBtn.textContent = '🏆 ¡Completar!';
    } else if (isLastLesson) {
        nextBtn.textContent = 'Siguiente Módulo →';
    } else {
        nextBtn.textContent = 'Siguiente →';
    }

    // Marcar lección como vista
    const lessonKey = `${state.currentModule}-${state.currentLesson}`;
    state.completedLessons.add(lessonKey);
    saveProgress();
    updateProgress();

    // Scroll arriba
    document.getElementById('lesson-body').scrollTop = 0;
}

function nextLesson() {
    const mod = modules[state.currentModule];

    if (state.currentLesson < mod.lessons.length - 1) {
        state.currentLesson++;
    } else if (state.currentModule < modules.length - 1) {
        // Completar módulo actual
        state.completedModules.add(state.currentModule);
        state.currentModule++;
        state.currentLesson = 0;
        checkAchievement(`module_${state.currentModule}`, `📚 Módulo Completado`, `¡Terminaste "${modules[state.currentModule - 1].name}"!`);
    } else {
        // Completar todo
        state.completedModules.add(state.currentModule);
        checkAchievement('all_complete', '🎓 Graduado Vibe Coding', '¡Completaste todos los módulos!');
    }

    saveProgress();
    renderModuleList();
    renderLesson();
}

function prevLesson() {
    if (state.currentLesson > 0) {
        state.currentLesson--;
    } else if (state.currentModule > 0) {
        state.currentModule--;
        state.currentLesson = modules[state.currentModule].lessons.length - 1;
    }

    saveProgress();
    renderModuleList();
    renderLesson();
}

function goToModule(index) {
    state.currentModule = index;
    state.currentLesson = 0;
    saveProgress();
    renderModuleList();
    renderLesson();
}

function updateProgress() {
    const totalLessons = modules.reduce((sum, m) => sum + m.lessons.length, 0);
    const completed = state.completedLessons.size;
    const pct = Math.round((completed / totalLessons) * 100);

    document.getElementById('global-progress').style.setProperty('--progress', pct + '%');
    document.getElementById('progress-text').textContent = `${pct}% completado (${completed}/${totalLessons})`;
}

// ==========================================
// MODO PRÁCTICA
// ==========================================
function toggleMode() {
    const btn = document.getElementById('mode-toggle');
    const lessonPanel = document.getElementById('lesson-panel');
    const terminal = document.getElementById('terminal-container');

    if (state.mode === 'tutorial') {
        state.mode = 'practice';
        btn.textContent = '📚 Cambiar a Modo Tutorial';
        lessonPanel.style.display = 'none';
        terminal.style.height = '100%';
        terminal.style.flex = '1';
    } else {
        state.mode = 'tutorial';
        btn.textContent = '🎯 Cambiar a Modo Práctica';
        lessonPanel.style.display = 'flex';
        terminal.style.height = '300px';
        terminal.style.flex = '';
    }
}

// ==========================================
// GLOSARIO
// ==========================================
function openGlossary() {
    document.getElementById('glossary-modal').classList.remove('hidden');
    renderGlossary();
    document.getElementById('glossary-search').focus();
}

function closeGlossary() {
    document.getElementById('glossary-modal').classList.add('hidden');
}

function renderGlossary(filter = '') {
    const list = document.getElementById('glossary-list');
    const filtered = glossary.filter(item =>
        item.term.toLowerCase().includes(filter.toLowerCase()) ||
        item.def.toLowerCase().includes(filter.toLowerCase())
    );

    list.innerHTML = filtered.map(item => `
        <div class="glossary-item">
            <div class="glossary-term">${item.term}</div>
            <div class="glossary-def">${item.def}</div>
        </div>
    `).join('');
}

function filterGlossary() {
    const query = document.getElementById('glossary-search').value;
    renderGlossary(query);
}

// ==========================================
// UTILIDADES
// ==========================================
function toggleSidebar() {
    document.getElementById('sidebar').classList.toggle('collapsed');
}

function resetProgress() {
    if (confirm('¿Seguro que quieres reiniciar todo tu progreso?')) {
        localStorage.removeItem('vibeCodingProgress');
        state.completedModules = new Set();
        state.completedLessons = new Set();
        state.achievements = new Set();
        state.currentModule = 0;
        state.currentLesson = 0;
        renderModuleList();
        renderLesson();
        updateProgress();
    }
}

// ==========================================
// INICIO DE LA APP
// ==========================================
function startApp() {
    document.getElementById('welcome-screen').classList.add('hidden');
    document.getElementById('main-app').classList.remove('hidden');

    loadProgress();
    initFileSystem();
    initTerminal();
    renderModuleList();
    renderLesson();
    updateProgress();

    // Focus en terminal
    setTimeout(() => {
        document.getElementById('terminal-input').focus();
    }, 100);
}

// Cerrar modal con Escape
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        closeGlossary();
    }
});