const Views = {
    // 0. Login
    Login: () => `
        <div class="h-full w-full flex flex-col items-center justify-center p-8 bg-[url('https://images.unsplash.com/photo-1518002171953-a080ee817e1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center before:content-[''] before:absolute before:inset-0 before:bg-sand-50/80 dark:before:bg-nocturn-900/90 before:backdrop-blur-sm">
            <div class="relative z-10 w-full max-w-sm flex flex-col items-center animate-slide-up">
                <div class="w-24 h-24 mb-6 shadow-[0_0_20px_rgba(232,165,152,0.3)] rounded-[1.5rem] overflow-hidden bg-white/50 dark:bg-nocturn-800 p-0.5 mx-auto animate-pulse-slow">
                    <img src="./icon.png" alt="Logotipo Sanar la Relación" class="w-full h-full object-cover rounded-[1.35rem]">
                </div>
                
                <p class="text-[10px] text-center text-peach-500 font-bold tracking-[0.2em] mb-1">MINI GUÍA</p>
                <h1 class="font-serif text-3xl leading-tight text-center text-sand-900 dark:text-sand-50 mb-2">SANAR LA RELACIÓN<br>CONTIGO MISMA</h1>
                <p class="text-sand-900/60 dark:text-sand-50/60 text-center text-xs mb-8 italic">Un espacio de autocompasión y reencuentro.</p>
                
                <form id="login-form" class="w-full space-y-4">
                    <div class="glass dark:bg-white/5 rounded-2xl p-2 flex items-center shadow-lg focus-within:ring-2 ring-peach-400/50 transition-all bg-white/40">
                        <i data-feather="user" class="w-5 h-5 text-sand-900/40 dark:text-sand-50/40 ml-3"></i>
                        <input type="email" id="email" required placeholder="Tu correo electrónico" class="w-full bg-transparent border-none p-3 outline-none text-sand-900 dark:text-sand-50 placeholder:text-sand-900/40 dark:placeholder:text-sand-50/40">
                    </div>
                    
                    <div class="glass dark:bg-white/5 rounded-2xl p-2 flex items-center shadow-lg focus-within:ring-2 ring-peach-400/50 transition-all bg-white/40">
                        <i data-feather="lock" class="w-5 h-5 text-sand-900/40 dark:text-sand-50/40 ml-3"></i>
                        <input type="password" id="pin" required placeholder="Ingresa tu PIN" pattern="[0-9]{4}" maxlength="4" class="w-full bg-transparent border-none p-3 outline-none text-sand-900 dark:text-sand-50 placeholder:text-sand-900/40 dark:placeholder:text-sand-50/40 text-center tracking-widest text-lg">
                    </div>

                    <p id="login-error" class="text-red-500 text-xs text-center hidden font-medium drop-shadow-sm bg-white/80 dark:bg-red-900/50 py-1 rounded-full"></p>

                    <button type="submit" id="btn-login" class="w-full btn-primary flex items-center justify-center mt-6 text-lg">
                        Iniciar Experiencia
                        <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
                    </button>
                    <p class="text-[10px] text-center text-sand-900/40 dark:text-sand-50/40 mt-6 uppercase tracking-widest font-bold leading-relaxed">
                        Solo para usuarias autorizadas<br/>
                        <a href="https://www.agradezcohoy.com" target="_blank" class="hover:text-peach-500 transition-colors">www.agradezcohoy.com</a>
                    </p>
                </form>
            </div>
        </div>
    `,

    // 1. Introducción
    Intro: () => `
        <div class="h-full flex flex-col p-8 pt-16 max-w-lg mx-auto w-full animate-fade-in relative">
            <div class="flex-1 flex flex-col justify-center">
                <span class="text-peach-500 text-xs font-bold uppercase tracking-widest mb-4 block">Bienvenida</span>
                <h2 class="font-serif text-4xl text-sand-900 dark:text-white mb-6 leading-tight">El primer paso para transformar tu relación interna es hacerla consciente.</h2>
                <div class="w-12 h-1 bg-peach-300 rounded-full mb-8"></div>
                <p class="text-sand-900/70 dark:text-sand-50/70 text-lg leading-relaxed mb-6">Muchas veces el diálogo interno ocurre de forma automática. No lo cuestionamos porque lo hemos normalizado.</p>
                <p class="text-sand-900/70 dark:text-sand-50/70 text-lg leading-relaxed font-serif italic text-peach-600 dark:text-peach-400">Hoy te invito a observar con honestidad. Sin juzgarte, solo a observar.</p>
            </div>
            
            <div class="pb-8 pt-4">
                <button id="btn-next" class="w-full btn-primary flex items-center justify-center text-lg">
                    Comenzar el Viaje
                    <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
                </button>
            </div>
        </div>
    `,

    Paso1: () => `
        <div class="h-full flex flex-col p-6 pt-12 max-w-lg mx-auto w-full animate-slide-up relative">
            <div class="flex items-center justify-between mb-8">
                <span class="text-sand-900/40 dark:text-sand-50/40 text-xs font-bold uppercase tracking-widest">Paso 1 de 5</span>
                <div class="flex gap-1.5"><div class="w-8 h-1.5 bg-peach-400 rounded-full"></div><div class="w-2 h-1.5 bg-peach-300/30 dark:bg-white/10 rounded-full"></div><div class="w-2 h-1.5 bg-peach-300/30 dark:bg-white/10 rounded-full"></div><div class="w-2 h-1.5 bg-peach-300/30 dark:bg-white/10 rounded-full"></div><div class="w-2 h-1.5 bg-peach-300/30 dark:bg-white/10 rounded-full"></div></div>
            </div>
            <div class="flex-1 flex flex-col overflow-y-auto custom-scrollbar pr-2 pb-4">
                <h2 class="font-serif text-3xl text-sand-900 dark:text-white mb-4">Reconocer cómo te hablas</h2>
                <p class="text-sand-900/70 dark:text-sand-50/70 text-sm mb-6 leading-relaxed">Escribe en tu diario u observa con sinceridad. No necesitas cambiar nada todavía.</p>
                <div class="space-y-4 mb-6">
                    <p class="font-serif italic text-peach-600 dark:text-peach-400">¿Cómo me hablo cuando cometo un error?</p>
                    <p class="font-serif italic text-peach-600 dark:text-peach-400">¿Qué palabras uso conmigo cuando algo no sale como esperaba?</p>
                </div>
                <textarea id="ans-paso1" class="input-area flex-1 min-h-[150px]" placeholder="Escribe aquí tus observaciones sin juzgarte...">${AppState.answers.paso1}</textarea>
            </div>
            <div class="pb-6 pt-4 flex gap-3">
                <button id="btn-prev" class="w-14 h-14 rounded-2xl glass flex items-center justify-center text-sand-900/60 dark:text-sand-50/60 hover:bg-white/50 dark:hover:bg-white/10 shrink-0"><i data-feather="arrow-left" class="w-5 h-5"></i></button>
                <button id="btn-next" class="flex-1 btn-primary flex items-center justify-center text-lg">Siguiente <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i></button>
            </div>
        </div>
    `,

    Paso2: () => `
        <div class="h-full flex flex-col p-6 pt-12 max-w-lg mx-auto w-full animate-slide-up relative">
            <div class="flex items-center justify-between mb-8">
                <span class="text-sand-900/40 dark:text-sand-50/40 text-xs font-bold uppercase tracking-widest">Paso 2 de 5</span>
                <div class="flex gap-1.5"><div class="w-2 h-1.5 bg-peach-400 rounded-full"></div><div class="w-8 h-1.5 bg-peach-400 rounded-full"></div><div class="w-2 h-1.5 bg-peach-300/30 dark:bg-white/10 rounded-full"></div><div class="w-2 h-1.5 bg-peach-300/30 dark:bg-white/10 rounded-full"></div><div class="w-2 h-1.5 bg-peach-300/30 dark:bg-white/10 rounded-full"></div></div>
            </div>
            <div class="flex-1 flex flex-col overflow-y-auto custom-scrollbar pr-2 pb-4">
                <h2 class="font-serif text-3xl text-sand-900 dark:text-white mb-4">Identificar autoexigencia</h2>
                <div class="bg-peach-300/20 dark:bg-white/5 p-5 rounded-2xl mb-6 border border-peach-400/20 dark:border-white/10 text-sm text-sand-900/80 dark:text-sand-50/80 leading-relaxed italic">
                    La autoexigencia suele aparecer con frases como: "Debería hacerlo mejor", "No es suficiente".
                </div>
                <p class="text-sand-900/80 dark:text-white font-bold mb-4">Reflexiona y responde:</p>
                <ul class="list-disc pl-5 text-sm text-sand-900/70 dark:text-sand-50/70 mb-6 space-y-2">
                    <li>¿En qué momentos soy más dura conmigo?</li>
                    <li>¿Qué situaciones activan más mi autoexigencia?</li>
                </ul>
                <textarea id="ans-paso2" class="input-area flex-1 min-h-[120px]" placeholder="Significa dejar de creer que la exigencia tiene la última palabra...">${AppState.answers.paso2}</textarea>
            </div>
            <div class="pb-6 pt-4 flex gap-3">
                <button id="btn-prev" class="w-14 h-14 rounded-2xl glass flex items-center justify-center text-sand-900/60 dark:text-sand-50/60 hover:bg-white/50 dark:hover:bg-white/10 shrink-0"><i data-feather="arrow-left" class="w-5 h-5"></i></button>
                <button id="btn-next" class="flex-1 btn-primary flex items-center justify-center text-lg">Siguiente <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i></button>
            </div>
        </div>
    `,

    Paso3: () => `
        <div class="h-full flex flex-col p-6 pt-12 max-w-lg mx-auto w-full animate-slide-up relative">
            <div class="flex items-center justify-between mb-8">
                <span class="text-sand-900/40 dark:text-sand-50/40 text-xs font-bold uppercase tracking-widest">Paso 3 de 5</span>
                <div class="flex gap-1.5"><div class="w-2 h-1.5 bg-peach-400 rounded-full"></div><div class="w-2 h-1.5 bg-peach-400 rounded-full"></div><div class="w-8 h-1.5 bg-peach-400 rounded-full"></div><div class="w-2 h-1.5 bg-peach-300/30 dark:bg-white/10 rounded-full"></div><div class="w-2 h-1.5 bg-peach-300/30 dark:bg-white/10 rounded-full"></div></div>
            </div>
            <div class="flex-1 flex flex-col overflow-y-auto custom-scrollbar pr-2 pb-4">
                <h2 class="font-serif text-3xl text-sand-900 dark:text-white mb-4">Transformar a compasión</h2>
                <div class="bg-white/40 dark:bg-white/5 p-5 rounded-2xl mb-6 shadow-sm relative overflow-hidden">
                    <p class="text-sm text-sand-900/90 dark:text-sand-50/90 italic relative z-10">Imagina que una amiga te dice: <strong>"Hoy siento que no hice suficiente."</strong> ¿Cómo le responderías? Seguramente con comprensión.</p>
                </div>
                <p class="font-bold text-sand-900 dark:text-white mb-2">Escribe tu frase compasiva:</p>
                <textarea id="ans-paso3" class="input-area flex-1 min-h-[100px] text-lg font-serif italic text-peach-600 dark:text-peach-400 text-center flex items-center p-6" placeholder="Ej: Mi valor no depende de hacerlo perfecto...">${AppState.answers.paso3}</textarea>
            </div>
            <div class="pb-6 pt-4 flex gap-3">
                <button id="btn-prev" class="w-14 h-14 rounded-2xl glass flex items-center justify-center text-sand-900/60 dark:text-sand-50/60 hover:bg-white/50 dark:hover:bg-white/10"><i data-feather="arrow-left" class="w-5 h-5"></i></button>
                <button id="btn-next" class="flex-1 btn-primary flex items-center justify-center text-lg">Siguiente <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i></button>
            </div>
        </div>
    `,

    Paso4: () => `
        <div class="h-full flex flex-col p-6 pt-12 max-w-lg mx-auto w-full animate-slide-up relative">
            <div class="flex items-center justify-between mb-8">
                <span class="text-sand-900/40 dark:text-sand-50/40 text-xs font-bold uppercase tracking-widest">Paso 4 de 5</span>
                <div class="flex gap-1.5"><div class="w-2 h-1.5 bg-peach-400 rounded-full"></div><div class="w-2 h-1.5 bg-peach-400 rounded-full"></div><div class="w-2 h-1.5 bg-peach-400 rounded-full"></div><div class="w-8 h-1.5 bg-peach-400 rounded-full"></div><div class="w-2 h-1.5 bg-peach-300/30 dark:bg-white/10 rounded-full"></div></div>
            </div>
            <div class="flex-1 flex flex-col overflow-y-auto custom-scrollbar pr-2 pb-4">
                <h2 class="font-serif text-3xl text-sand-900 dark:text-white mb-4">Practicar amabilidad</h2>
                <div class="grid grid-cols-2 gap-3 mb-8">
                    <div class="glass dark:bg-white/5 p-3 rounded-xl flex flex-col items-center justify-center text-center"><i data-feather="coffee" class="text-peach-500 mb-2"></i><span class="text-xs text-sand-900/80 dark:text-sand-50/80">Descansar sin culpa</span></div>
                    <div class="glass dark:bg-white/5 p-3 rounded-xl flex flex-col items-center justify-center text-center"><i data-feather="award" class="text-peach-500 mb-2"></i><span class="text-xs text-sand-900/80 dark:text-sand-50/80">Reconocer esfuerzo</span></div>
                </div>
                <p class="font-bold text-sand-900 dark:text-white mb-2">¿Qué gesto tendrás contigo esta semana?</p>
                <input type="text" id="ans-paso4" class="input-area py-4 px-5 text-lg" placeholder="Ej: Me prepararé un té especial..." value="${AppState.answers.paso4}">
            </div>
            <div class="pb-6 pt-4 flex gap-3">
                <button id="btn-prev" class="w-14 h-14 rounded-2xl glass flex items-center justify-center text-sand-900/60 dark:text-sand-50/60 hover:bg-white/50 dark:hover:bg-white/10"><i data-feather="arrow-left" class="w-5 h-5"></i></button>
                <button id="btn-next" class="flex-1 btn-primary flex items-center justify-center text-lg">Siguiente <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i></button>
            </div>
        </div>
    `,

    Paso5: () => `
        <div class="h-full flex flex-col p-6 pt-12 max-w-lg mx-auto w-full animate-slide-up relative">
            <div class="flex items-center justify-between mb-8">
                <span class="text-sand-900/40 dark:text-sand-50/40 text-xs font-bold uppercase tracking-widest">Paso 5 de 5</span>
                <div class="flex gap-1.5"><div class="w-2 h-1.5 bg-peach-400 rounded-full"></div><div class="w-2 h-1.5 bg-peach-400 rounded-full"></div><div class="w-2 h-1.5 bg-peach-400 rounded-full"></div><div class="w-2 h-1.5 bg-peach-400 rounded-full"></div><div class="w-8 h-1.5 bg-peach-500 rounded-full"></div></div>
            </div>
            <div class="flex-1 flex flex-col overflow-y-auto custom-scrollbar pr-2 pb-4">
                <h2 class="font-serif text-3xl text-sand-900 dark:text-white mb-4">Nuevo acuerdo</h2>
                <div class="glass p-6 dark:bg-white/5 rounded-3xl w-full mb-6">
                    <p class="font-serif text-lg dark:text-sand-50 mb-2">"Me comprometo a tratarme con..."</p>
                    <input type="text" id="ans-paso5-1" class="w-full bg-peach-300/10 dark:bg-transparent border-b-2 border-peach-400/50 outline-none p-2 mb-6 text-peach-600 dark:text-peach-400 font-bold font-serif italic text-lg" placeholder="paciencia / amor" value="${AppState.answers.paso5_1}">
                    <p class="font-serif text-lg dark:text-sand-50 mb-2">"...cuando..."</p>
                    <input type="text" id="ans-paso5-2" class="w-full bg-peach-300/10 dark:bg-transparent border-b-2 border-peach-400/50 outline-none p-2 text-peach-600 dark:text-peach-400 font-bold font-serif italic text-lg" placeholder="cometa un error" value="${AppState.answers.paso5_2}">
                </div>
            </div>
            <div class="pb-6 pt-4 flex gap-3">
                <button id="btn-prev" class="w-14 h-14 rounded-2xl glass flex items-center justify-center text-sand-900/60 dark:text-sand-50/60 hover:bg-white/50 dark:hover:bg-white/10"><i data-feather="arrow-left" class="w-5 h-5"></i></button>
                <button id="btn-next" class="flex-1 btn-primary flex items-center justify-center text-lg">Siguiente <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i></button>
            </div>
        </div>
    `,

    Cierre: () => `
        <div class="h-full w-full flex flex-col items-center justify-center p-8 bg-[url('https://images.unsplash.com/photo-1515595967223-f9fa59af5a3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center before:content-[''] before:absolute before:inset-0 before:bg-sand-50/85 dark:before:bg-nocturn-900/90 relative">
            <div class="relative z-10 w-full max-w-sm flex flex-col items-center animate-slide-up text-center">
                <div class="w-16 h-16 rounded-full glass flex items-center justify-center mb-6 animate-pulse-slow"><i data-feather="sun" class="w-8 h-8 text-peach-500"></i></div>
                <h1 class="font-serif text-3xl text-sand-900 dark:text-white mb-8 italic">Para llevar contigo</h1>
                <div class="space-y-6 w-full text-left glass dark:bg-white/5 p-6 rounded-3xl mb-10">
                    <p class="flex items-start"><i data-feather="check" class="w-4 h-4 text-peach-600 mt-1 mr-3 shrink-0"></i><span class="text-sm font-medium dark:text-sand-50/80">Me trato con respeto y paciencia.</span></p>
                    <p class="flex items-start"><i data-feather="check" class="w-4 h-4 text-peach-600 mt-1 mr-3 shrink-0"></i><span class="text-sm font-medium dark:text-sand-50/80">Mi proceso es válido y no necesito exigirme de más.</span></p>
                </div>
                <div class="w-full flex gap-3">
                    <button id="btn-prev" class="w-14 h-14 rounded-2xl glass flex items-center justify-center text-sand-900/60 dark:text-sand-50/60 hover:bg-white/50 dark:hover:bg-white/10"><i data-feather="arrow-left" class="w-5 h-5"></i></button>
                    <button id="btn-finish" class="w-full btn-primary flex flex-1 items-center justify-center mt-auto text-lg">Finalizar e Integrar<i data-feather="heart" class="w-5 h-5 ml-2 fill-current"></i></button>
                </div>
            </div>
        </div>
    `,

    Success: () => `
        <div class="h-full w-full flex flex-col items-center justify-center p-8 bg-peach-50 dark:bg-nocturn-800 relative">
            <div class="relative z-10 w-full max-w-sm flex flex-col items-center animate-slide-up text-center">
                <div class="w-24 h-24 rounded-full bg-peach-300/40 dark:bg-peach-500/20 flex items-center justify-center mb-8 border border-peach-400/20"><i data-feather="check" class="w-12 h-12 text-peach-600 dark:text-peach-400 stroke-[3]"></i></div>
                <h1 class="font-serif text-4xl text-sand-900 dark:text-white mb-4 italic">Guía Completada</h1>
                <p class="text-sand-900/70 dark:text-sand-50/70 text-lg mb-10 leading-relaxed">Tus reflexiones han sido guardadas con éxito.</p>
                <button id="btn-restart" class="w-full btn-primary py-4 flex items-center justify-center text-lg shadow-lg"><i data-feather="rotate-ccw" class="w-5 h-5 mr-2"></i> Repetir la Guía</button>
                <button id="btn-logout-final" class="w-full py-4 mt-2 rounded-xl bg-red-500/10 text-red-500 font-bold flex items-center justify-center"><i data-feather="log-out" class="w-4 h-4 mr-2"></i> Salir (Cerrar Sesión)</button>
            </div>
        </div>
    `,

    // Menú Inferior components
    BottomNav: () => `
        <div class="bg-white/80 dark:bg-nocturn-800/80 backdrop-blur-lg border-t border-peach-400/20 dark:border-white/10 px-6 py-3 flex justify-around items-center rounded-t-3xl shadow-[0_-4px_20px_rgba(0,0,0,0.05)] dark:shadow-none animate-slide-up-menu">
            <button id="nav-home" class="flex flex-col items-center gap-1 text-sand-900/50 dark:text-sand-50/50 hover:text-peach-600 dark:hover:text-peach-400 p-2 rounded-xl hover:bg-peach-50 dark:hover:bg-nocturn-700 transition w-full">
                <i data-feather="home" class="w-6 h-6"></i>
                <span class="text-[10px] font-bold">Inicio</span>
            </button>
            <button id="nav-diary" class="flex flex-col items-center gap-1 text-sand-900/50 dark:text-sand-50/50 hover:text-peach-600 dark:hover:text-peach-400 p-2 rounded-xl hover:bg-peach-50 dark:hover:bg-nocturn-700 transition w-full">
                <i data-feather="book-open" class="w-6 h-6"></i>
                <span class="text-[10px] font-bold">Diario</span>
            </button>
            <button id="nav-settings" class="flex flex-col items-center gap-1 text-sand-900/50 dark:text-sand-50/50 hover:text-peach-600 dark:hover:text-peach-400 p-2 rounded-xl hover:bg-peach-50 dark:hover:bg-nocturn-700 transition w-full">
                <i data-feather="settings" class="w-6 h-6"></i>
                <span class="text-[10px] font-bold">Ajustes</span>
            </button>
        </div>
    `,

    Diario: (entries = []) => `
        <div class="h-full flex flex-col p-6 pt-12 max-w-lg mx-auto w-full animate-fade-in relative pb-8">
            <h2 class="font-serif text-3xl text-sand-900 dark:text-white mb-2 text-center">Mi Diario</h2>
            <p class="text-sand-900/70 dark:text-sand-50/70 text-sm mb-6 text-center italic hover:text-peach-500 transition-colors">Tus reflexiones pasadas.</p>
            
            <div class="flex-1 overflow-y-auto custom-scrollbar pr-2 space-y-4">
                ${entries.length === 0 ? `
                    <div class="glass dark:bg-white/5 p-8 rounded-3xl text-center flex flex-col items-center justify-center min-h-[50vh] animate-fade-in border border-peach-400/20 shadow-lg relative overflow-hidden mt-4">
                        <div class="absolute inset-0 bg-gradient-to-br from-peach-300/10 to-transparent pointer-events-none"></div>
                        <div class="w-20 h-20 rounded-full bg-peach-100 dark:bg-peach-500/20 flex items-center justify-center mb-6 shadow-inner animate-pulse-slow relative z-10">
                            <i data-feather="edit-3" class="w-10 h-10 text-peach-500"></i>
                        </div>
                        <h3 class="font-serif text-2xl text-sand-900 dark:text-sand-50 mb-3 relative z-10">Tu lienzo está listo</h3>
                        <p class="text-sand-900/70 dark:text-sand-50/70 text-sm mb-8 leading-relaxed relative z-10">
                            Aún no hay reflexiones guardadas. ¡Anímate a dar el primer paso! Cada palabra que escribas aquí será un hermoso acto de paciencia y comprensión hacia ti misma.
                        </p>
                        <button id="btn-start-diary" class="w-full btn-primary flex items-center justify-center text-sm shadow-md hover:scale-[1.02] transition-transform relative z-10">
                            Comenzar mi recorrido <i data-feather="heart" class="w-4 h-4 ml-2 fill-current"></i>
                        </button>
                    </div>
                ` : entries.map(e => `
                    <div class="glass dark:bg-white/5 p-5 rounded-3xl border border-peach-400/20 dark:border-white/5 shadow-sm">
                        <div class="flex justify-between items-center mb-4 border-b border-peach-400/20 dark:border-white/10 pb-2">
                            <span class="text-xs font-bold text-peach-600 dark:text-peach-400 uppercase tracking-wider"><i data-feather="calendar" class="w-3 h-3 inline mr-1"></i> ${new Date(e.created_at).toLocaleDateString('es-ES', { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute:'2-digit' })}</span>
                        </div>
                        <div class="space-y-3 text-sm text-sand-900/80 dark:text-sand-50/80">
                            <p><strong>Paso 1:</strong> ${e.answers.paso1 || 'N/A'}</p>
                            <p><strong>Paso 2:</strong> ${e.answers.paso2 || 'N/A'}</p>
                            <p><strong>Frase Compasiva:</strong> <span class="italic font-serif text-peach-600 dark:text-peach-400">"${e.answers.paso3 || 'N/A'}"</span></p>
                            <p><strong>Gesto:</strong> ${e.answers.paso4 || 'N/A'}</p>
                            <p><strong>Acuerdo:</strong> "Me comprometo a tratarme con <em>${e.answers.paso5_1 || '...'}</em> cuando <em>${e.answers.paso5_2 || '...'}</em>"</p>
                        </div>
                    </div>
                `).join('')}
            </div>
        </div>
    `,

    Settings: () => `
        <div class="absolute inset-0 z-50 bg-sand-900/40 dark:bg-black/60 backdrop-blur-sm flex justify-center items-end animate-fade-in p-4">
            <div class="bg-white dark:bg-nocturn-800 w-full max-w-sm rounded-[30px] shadow-2xl animate-slide-up border border-peach-100 dark:border-white/5 mx-auto relative overflow-hidden flex flex-col" style="max-height: 90dvh;">
                <div class="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-peach-300 to-peach-500 shrink-0"></div>
                
                <div class="flex justify-between items-center p-6 pb-3 shrink-0">
                    <h2 class="font-serif text-2xl text-sand-900 dark:text-sand-50">Ajustes</h2>
                    <button id="btn-close-settings" class="p-2 bg-sand-50 dark:bg-nocturn-700 rounded-full text-sand-500 hover:text-sand-900 dark:hover:text-white transition-colors"><i data-feather="x" class="w-5 h-5"></i></button>
                </div>

                <div class="space-y-4 overflow-y-auto px-6 pb-6 custom-scrollbar flex-1">
                    <!-- Tema -->
                    <div class="flex justify-between items-center p-3 glass dark:bg-white/5 rounded-2xl">
                        <div class="flex items-center gap-3 text-sand-900 dark:text-sand-50">
                            <i data-feather="moon" class="w-5 h-5 text-peach-600 dark:text-peach-400"></i>
                            <span class="font-medium text-sm">Modo Oscuro</span>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="set-theme" ${AppState.theme === 'dark' ? 'checked' : ''}>
                            <span class="slider"></span>
                        </label>
                    </div>

                    <!-- Notificaciones -->
                    <div class="p-4 glass dark:bg-white/5 rounded-2xl space-y-4">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center gap-3 text-sand-900 dark:text-sand-50">
                                <i data-feather="bell" class="w-5 h-5 text-peach-600 dark:text-peach-400"></i>
                                <span class="font-medium text-sm">Recordatorios</span>
                            </div>
                            <label class="switch">
                                <input type="checkbox" id="set-notify" ${AppState.notificationsEnabled ? 'checked' : ''}>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div id="notify-config" class="pl-8 flex items-center justify-between ${AppState.notificationsEnabled ? '' : 'opacity-30 pointer-events-none'} transition-opacity">
                            <span class="text-xs text-sand-900/60 dark:text-sand-50/60 font-medium">Hora de aviso</span>
                            <input type="time" id="set-notify-time" value="${AppState.notificationTime}" class="bg-white/50 dark:bg-nocturn-900 text-sm font-bold text-peach-600 dark:text-peach-400 p-2 rounded-xl outline-none border border-peach-200 dark:border-white/10">
                        </div>
                    </div>

                    <!-- Seguridad -->
                    <div class="p-4 glass dark:bg-white/5 rounded-2xl space-y-4">
                        <div class="flex items-center gap-3 text-sand-900 dark:text-sand-50 mb-2">
                            <i data-feather="key" class="w-5 h-5 text-peach-600 dark:text-peach-400"></i>
                            <span class="font-medium text-sm">Contraseña Unificada</span>
                        </div>
                        <div class="flex flex-col gap-2">
                            <input type="password" id="new-pin" placeholder="Nuevo PIN numérico de 4 dígitos" pattern="[0-9]{4}" maxlength="4" class="bg-white/50 dark:bg-nocturn-900 text-sm font-bold text-sand-900 dark:text-sand-50 p-2 rounded-xl outline-none border border-peach-200 dark:border-white/10 text-center tracking-widest">
                            <button id="btn-change-pin" class="bg-peach-100 dark:bg-peach-500/20 text-peach-600 dark:text-peach-400 py-2 rounded-xl text-xs font-bold hover:bg-peach-200 dark:hover:bg-peach-500/30 transition">
                                Actualizar PIN
                            </button>
                            <p id="pin-msg" class="text-[10px] text-center hidden mt-1"></p>
                        </div>
                    </div>

                    <!-- Zona de Peligro / Reinicio -->
                    <div class="p-4 glass border border-red-500/20 dark:bg-red-500/5 rounded-2xl flex flex-col gap-2 relative">
                        <div class="flex items-center gap-3 text-red-500 mb-2">
                            <i data-feather="refresh-cw" class="w-5 h-5"></i>
                            <span class="font-medium text-sm">Reiniciar la Guía</span>
                        </div>
                        <p class="text-[10px] text-red-600/70 dark:text-red-400/80 mb-2 leading-relaxed">Atención: Volver a empezar vaciará las casillas de tu recorrido actual. Debes colocar tu PIN para autorizarlo.</p>
                        
                        <div id="restart-auth-area" class="hidden flex-col gap-2 transition-all">
                            <input type="password" id="restart-pin" placeholder="PIN de seguridad" pattern="[0-9]{4}" maxlength="4" class="bg-white/50 dark:bg-black/20 text-sm font-bold text-sand-900 dark:text-sand-50 p-2 rounded-xl outline-none border border-red-200 dark:border-red-500/20 text-center tracking-widest text-red-500">
                            <button id="btn-confirm-restart" class="bg-red-100 dark:bg-red-500/20 text-red-500 py-2 rounded-xl text-xs font-bold hover:bg-red-200 dark:hover:bg-red-500/30 transition">Confirmar Limpieza</button>
                            <p id="restart-msg" class="text-[10px] text-center text-red-500 hidden mt-1"></p>
                        </div>
                        <button id="btn-show-restart" class="bg-red-50 dark:bg-red-500/10 text-red-500 border border-red-200 dark:border-red-500/20 py-2 rounded-xl text-xs font-bold hover:bg-red-100 transition shadow-sm w-full relative z-10">Comenzar desde Cero</button>
                    </div>

                    <button id="btn-logout" class="w-full py-4 rounded-2xl bg-red-50 dark:bg-red-500/10 text-red-500 font-bold transition-all flex items-center justify-center hover:bg-red-100 dark:hover:bg-red-500/20 mt-2">
                        <i data-feather="log-out" class="w-4 h-4 mr-2"></i> Cerrar Sesión
                    </button>

                    <button id="btn-save-settings" class="w-full btn-primary flex justify-center text-sm shadow-none mt-4">
                        Guardar Cambios <i data-feather="check" class="w-4 h-4 ml-2"></i>
                    </button>
                    <p class="text-center text-[10px] text-sand-900/30 dark:text-sand-50/30 uppercase tracking-widest pt-2">v3.0 (Dark Mode)</p>
                </div>
            </div>
        </div>
    `
};