<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale-1.0">
    <title>Portal de Miembros VIP | Iglesia [Nombre]</title>
    
    <link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/512/2663/2663067.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Barlow:wght@400;500;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&display=swap" rel="stylesheet">
    
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdn.tailwindcss.com"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            primary: '#0f172a',
                            secondary: '#fbbf24', // Dorado
                            dark: '#020617',
                            light: '#f8fafc',
                        }
                    },
                    fontFamily: {
                        sans: ['Barlow', 'sans-serif'],
                        display: ['Inter', 'sans-serif'],
                        serif: ['Merriweather', 'serif'], // Para lectura bíblica
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Barlow', sans-serif; background-color: #f8fafc; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        /* Estilo para el input de archivo oculto */
        input[type="file"] { display: none; }
    </style>
</head>
<body class="text-slate-800 h-screen overflow-hidden flex flex-col bg-slate-50">

    <div id="loginScreen" class="fixed inset-0 z-[100] bg-brand-primary flex items-center justify-center px-4 transition-opacity duration-500">
        <div class="bg-white w-full max-w-md p-8 rounded-3xl shadow-2xl relative z-10 text-center border-t-4 border-brand-secondary">
            <div class="bg-brand-primary w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6 text-brand-secondary shadow-lg ring-4 ring-brand-secondary/20">
                <i data-lucide="crown" class="w-10 h-10"></i>
            </div>
            <h1 class="font-black text-3xl text-brand-primary mb-1 uppercase tracking-tight">Portal de Liderazgo</h1>
            <p class="text-slate-500 text-sm mb-8">Acceso exclusivo para servidores</p>
            
            <form onsubmit="event.preventDefault(); login();" class="space-y-5">
                <div class="relative group">
                    <i data-lucide="lock" class="absolute left-4 top-4 w-5 h-5 text-slate-300 group-focus-within:text-brand-secondary transition-colors"></i>
                    <input type="password" id="accessCode" placeholder="CÓDIGO" class="w-full pl-12 pr-4 py-4 rounded-xl bg-slate-50 border border-slate-200 focus:border-brand-secondary focus:ring-2 focus:ring-brand-secondary/20 text-center tracking-[0.5em] font-bold text-xl outline-none transition-all" required>
                </div>
                <button type="submit" class="w-full py-4 bg-brand-primary text-brand-secondary font-black rounded-xl hover:shadow-xl hover:scale-[1.02] transition-all uppercase tracking-wider">
                    Ingresar al Portal
                </button>
            </form>
            <p class="text-xs text-slate-400 mt-6">Sistema Privado de Gestión Eclesiástica</p>
        </div>
    </div>

    <div id="mainDashboard" class="hidden flex-1 flex h-screen overflow-hidden animate-fade-in">
        
        <aside class="w-20 lg:w-64 bg-brand-primary text-white flex-col hidden md:flex border-r border-white/5 shadow-2xl z-20 relative">
            <div class="h-24 flex items-center justify-center lg:justify-start lg:px-6 border-b border-white/10 gap-3 bg-brand-dark/50">
                <div class="bg-brand-secondary p-1.5 rounded text-brand-primary">
                    <i data-lucide="church" class="w-6 h-6"></i>
                </div>
                <span class="font-black text-lg tracking-tight hidden lg:block text-white">MI IGLESIA</span>
            </div>

            <nav class="flex-1 py-8 space-y-2 px-3 overflow-y-auto">
                <p class="hidden lg:block px-3 text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Menú Principal</p>
                
                <a href="#" onclick="switchTab('dashboard', this)" class="nav-item active flex items-center lg:justify-start justify-center gap-3 px-3 py-3.5 rounded-xl bg-brand-secondary text-brand-primary font-bold transition-all shadow-lg shadow-brand-secondary/10">
                    <i data-lucide="layout-dashboard" class="w-5 h-5"></i> <span class="hidden lg:block">Resumen</span>
                </a>
                <a href="#" onclick="switchTab('biblia', this)" class="nav-item flex items-center lg:justify-start justify-center gap-3 px-3 py-3.5 rounded-xl text-slate-400 hover:text-white hover:bg-white/10 transition-all">
                    <i data-lucide="book-open" class="w-5 h-5"></i> <span class="hidden lg:block">Biblia & Devocional</span>
                </a>
                <a href="#" onclick="switchTab('trabajo', this)" class="nav-item flex items-center lg:justify-start justify-center gap-3 px-3 py-3.5 rounded-xl text-slate-400 hover:text-white hover:bg-white/10 transition-all">
                    <i data-lucide="clipboard-list" class="w-5 h-5"></i> <span class="hidden lg:block">Plan de Trabajo</span>
                </a>
                <a href="#" onclick="switchTab('oracion', this)" class="nav-item flex items-center lg:justify-start justify-center gap-3 px-3 py-3.5 rounded-xl text-slate-400 hover:text-white hover:bg-white/10 transition-all">
                    <i data-lucide="heart-handshake" class="w-5 h-5"></i> <span class="hidden lg:block">Oraciones</span>
                </a>
            </nav>

            <div class="p-4 border-t border-white/10 bg-brand-dark/30">
                <button onclick="logout()" class="w-full flex items-center justify-center gap-2 py-3 rounded-lg text-xs font-bold text-slate-400 hover:text-white hover:bg-red-500/20 transition-all group">
                    <i data-lucide="log-out" class="w-4 h-4 group-hover:text-red-400"></i> <span class="hidden lg:block">Cerrar Sesión</span>
                </button>
            </div>
        </aside>

        <main class="flex-1 flex flex-col h-full overflow-hidden bg-[#f0f4f8] relative">
            
            <header class="bg-white h-24 border-b border-slate-200 flex items-center justify-between px-6 lg:px-10 shadow-sm z-10 shrink-0">
                
                <div>
                    <h2 class="text-2xl lg:text-3xl font-black text-brand-primary tracking-tight">Hola, <span id="headerName" class="text-transparent bg-clip-text bg-gradient-to-r from-brand-primary to-blue-600">Carlos</span> 👋</h2>
                    <p class="text-xs lg:text-sm text-slate-500 font-medium mt-1">Panel de Liderazgo • Noviembre 2024</p>
                </div>

                <div class="flex items-center gap-6">
                    <div class="text-right hidden md:block">
                        <p class="text-base font-bold text-brand-primary leading-tight" id="profileNameDisplay">Carlos R.</p>
                        <p class="text-xs text-brand-secondary font-black uppercase tracking-wider mt-0.5">Músico Principal</p>
                    </div>
                    
                    <div class="relative group cursor-pointer" onclick="document.getElementById('photoInput').click()" title="Cambiar foto de perfil">
                        <div class="w-16 h-16 rounded-full p-1 border-2 border-brand-secondary border-dashed group-hover:border-solid transition-all">
                            <img id="userAvatar" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=200&h=200&fit=crop" 
                                 class="w-full h-full rounded-full object-cover shadow-md group-hover:brightness-75 transition duration-300">
                        </div>
                        
                        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                            <div class="bg-black/50 text-white p-1.5 rounded-full opacity-0 group-hover:opacity-100 transform scale-75 group-hover:scale-100 transition-all duration-300">
                                <i data-lucide="camera" class="w-4 h-4"></i>
                            </div>
                        </div>
                        
                        <div class="absolute bottom-1 right-1 w-4 h-4 bg-green-500 border-2 border-white rounded-full shadow-sm"></div>
                    </div>
                    
                    <input type="file" id="photoInput" accept="image/*" onchange="updateProfileImage(this)">
                </div>
            </header>

            <div class="flex-1 overflow-y-auto p-6 lg:p-10 scroll-smooth">
                <div class="max-w-7xl mx-auto space-y-8 pb-10">

                    <div class="bg-brand-primary rounded-[2rem] p-1 text-white shadow-2xl relative overflow-hidden group animate-fade-in-up">
                        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
                        <div class="absolute right-0 top-0 w-[500px] h-[500px] bg-brand-secondary/10 rounded-full blur-3xl -mr-32 -mt-32 pointer-events-none"></div>
                        
                        <div class="bg-gradient-to-r from-slate-900/90 to-brand-primary/90 backdrop-blur-sm rounded-[1.8rem] p-8 lg:p-10 relative z-10 border border-white/5">
                            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-8">
                                <div class="space-y-6 flex-1 max-w-3xl">
                                    <div>
                                        <span class="bg-brand-secondary text-brand-primary text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-wider shadow-lg shadow-brand-secondary/20">Versículo Semanal</span>
                                        <h3 class="text-2xl lg:text-4xl font-serif italic mt-4 leading-tight text-white/95">
                                            "Todo lo que hagáis, hacedlo de corazón, como para el Señor y no para los hombres."
                                        </h3>
                                        <p class="text-brand-secondary font-bold text-sm mt-3 flex items-center gap-2">
                                            <span class="w-8 h-[1px] bg-brand-secondary"></span> Colosenses 3:23
                                        </p>
                                    </div>
                                    
                                    <div class="flex flex-wrap gap-4 pt-2">
                                        <button onclick="openBibleModal()" class="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-all text-sm font-bold group">
                                            <div class="bg-white/10 p-1 rounded group-hover:bg-white/20 transition"><i data-lucide="book-open" class="w-4 h-4 text-brand-secondary"></i></div>
                                            Leer Biblia Hoy
                                        </button>
                                        <button onclick="expandDevotional()" class="flex items-center gap-2 px-6 py-3 bg-brand-secondary text-brand-primary hover:brightness-110 rounded-xl transition-all text-sm font-black shadow-xl shadow-brand-secondary/20 hover:translate-y-[-2px]">
                                            <i data-lucide="flame" class="w-4 h-4"></i> Ver Devocional
                                        </button>
                                    </div>
                                </div>

                                <div class="bg-white/5 backdrop-blur-md border border-white/10 p-6 rounded-2xl min-w-[220px] w-full lg:w-auto text-center shadow-xl">
                                    <p class="text-[10px] text-slate-400 uppercase tracking-[0.2em] mb-2 font-bold">TU PRÓXIMA ASIGNACIÓN</p>
                                    <div class="text-4xl font-black text-white mb-1">DOMINGO</div>
                                    <div class="text-brand-secondary font-bold text-xl mb-4">10:00 AM</div>
                                    <div class="bg-brand-secondary text-brand-primary px-4 py-1.5 rounded-lg text-xs font-black inline-block mx-auto uppercase tracking-wide shadow-lg">
                                        Teclado Principal
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        
                        <div class="lg:col-span-2 space-y-8">
                            
                            <div id="devotionalCard" class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden transition-all duration-500 group">
                                <div class="h-56 bg-slate-800 relative flex items-end p-8 cursor-pointer overflow-hidden" onclick="expandDevotional()">
                                    <img src="https://images.unsplash.com/photo-1504052434569-70ad5836ab65?q=80&w=1000" class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:scale-105 transition duration-700 ease-out">
                                    <div class="absolute inset-0 bg-gradient-to-t from-brand-primary/90 via-brand-primary/40 to-transparent"></div>
                                    
                                    <div class="relative z-10 w-full flex justify-between items-end">
                                        <div>
                                            <span class="text-brand-secondary text-xs font-bold uppercase tracking-wider mb-2 block">Lectura del Mes</span>
                                            <h3 class="text-3xl font-black text-white tracking-tight mb-1">Raíces Profundas</h3>
                                            <p class="text-slate-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-2 group-hover:translate-y-0">Clic para leer la reflexión completa</p>
                                        </div>
                                        <div class="bg-white/20 hover:bg-white/30 text-white w-10 h-10 rounded-full backdrop-blur-sm flex items-center justify-center transition-transform duration-300" id="devChevronBox">
                                            <i data-lucide="chevron-down" class="w-6 h-6" id="devChevron"></i>
                                        </div>
                                    </div>
                                </div>
                                
                                <div id="devotionalContent" class="hidden px-8 py-10 bg-white prose prose-slate max-w-none border-t border-slate-100">
                                    <p class="font-serif text-xl leading-loose text-slate-700 first-letter:text-6xl first-letter:font-black first-letter:text-brand-primary first-letter:mr-3 first-letter:float-left">
                                        Este mes estaremos explorando lo que significa tener raíces profundas en tiempos de sequía. Como servidores, a menudo nos enfocamos en el fruto visible: la música que suena bien, la clase bien enseñada, la bienvenida calurosa. Pero Jesús nos recuerda en Juan 15 que sin permanecer en Él, nada podemos hacer.
                                    </p>
                                    <p class="font-serif text-xl leading-loose text-slate-700">
                                        Tu servicio este domingo no comienza cuando llegas a la iglesia, comienza en tu lugar secreto de oración hoy. Te animo a que tomes 5 minutos antes de ensayar o prepararte, para simplemente estar en silencio ante Dios.
                                    </p>
                                    <div class="bg-brand-light p-6 rounded-2xl border-l-4 border-brand-secondary mt-8">
                                        <strong class="block text-brand-primary mb-2 font-bold text-lg">Oración de Activación:</strong>
                                        <span class="text-slate-600 italic text-lg font-serif">"Señor, que mi servicio público sea solo el desborde de mi vida secreta contigo. Lléname para poder dar a otros. Amén."</span>
                                    </div>
                                    <div class="mt-8 pt-8 border-t border-slate-100 text-center">
                                        <button onclick="expandDevotional()" class="text-sm text-slate-400 hover:text-brand-primary font-bold uppercase tracking-wider flex items-center justify-center gap-2 mx-auto group">
                                            Cerrar lectura <i data-lucide="chevron-up" class="w-4 h-4 group-hover:-translate-y-1 transition-transform"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
                                <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
                                    <div>
                                        <h3 class="font-bold text-brand-primary flex items-center gap-2 text-lg">
                                            <i data-lucide="headphones" class="w-5 h-5 text-brand-secondary"></i> Ponte al día
                                        </h3>
                                        <p class="text-xs text-slate-500 mt-0.5">¿Estabas sirviendo? Escucha el mensaje aquí.</p>
                                    </div>
                                    <button class="text-xs font-bold text-brand-primary hover:text-brand-secondary transition-colors">Archivo completo</button>
                                </div>

                                <div class="bg-brand-primary p-6 lg:p-8 flex flex-col md:flex-row items-center gap-8 relative overflow-hidden">
                                    <div class="absolute top-0 right-0 w-64 h-64 bg-brand-secondary/5 rounded-full blur-3xl -mr-10 -mt-10 pointer-events-none"></div>
                                    
                                    <div class="relative w-32 h-32 md:w-40 md:h-40 flex-shrink-0 shadow-2xl rounded-2xl overflow-hidden group">
                                        <img id="playerImage" src="https://images.unsplash.com/photo-1478737270239-2f02b77ac6d5?q=80&w=600" class="w-full h-full object-cover opacity-90 transition group-hover:scale-110 duration-700">
                                        <div class="absolute inset-0 bg-black/20 flex items-center justify-center">
                                            <div class="w-12 h-12 bg-brand-secondary text-brand-primary rounded-full flex items-center justify-center shadow-lg animate-pulse">
                                                <i class="w-5 h-5 ml-1 fill-current" data-lucide="play"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="flex-1 w-full z-10">
                                        <div class="mb-6 text-center md:text-left">
                                            <span class="text-[10px] font-black text-brand-secondary uppercase tracking-widest mb-2 block bg-white/10 inline-block px-2 py-0.5 rounded">Reproduciendo Ahora</span>
                                            <h3 id="playerTitle" class="text-2xl font-bold text-white leading-tight mb-1">Venciendo el Temor</h3>
                                            <p id="playerSpeaker" class="text-sm text-slate-400 font-medium">Pastor Juan Pérez • 19 Noviembre</p>
                                        </div>

                                        <div class="w-full bg-white/10 h-1.5 rounded-full mb-2 overflow-hidden cursor-pointer group">
                                            <div class="bg-brand-secondary w-1/3 h-full rounded-full relative group-hover:bg-white transition-colors"></div>
                                        </div>
                                        <div class="flex justify-between text-[10px] text-slate-500 font-mono mb-5">
                                            <span>12:45</span>
                                            <span>45:20</span>
                                        </div>

                                        <div class="flex items-center justify-center md:justify-start gap-6">
                                            <button class="text-slate-400 hover:text-white transition transform hover:scale-110"><i data-lucide="skip-back" class="w-6 h-6"></i></button>
                                            <button class="w-12 h-12 bg-white text-brand-primary rounded-full flex items-center justify-center hover:scale-105 transition shadow-lg shadow-white/10">
                                                <i data-lucide="pause" class="w-5 h-5 fill-current"></i>
                                            </button>
                                            <button class="text-slate-400 hover:text-white transition transform hover:scale-110"><i data-lucide="skip-forward" class="w-6 h-6"></i></button>
                                            
                                            <button class="ml-auto text-slate-400 hover:text-brand-secondary flex items-center gap-2 text-xs font-bold border border-white/10 hover:border-brand-secondary px-4 py-2 rounded-lg transition-all">
                                                <i data-lucide="download" class="w-4 h-4"></i> <span class="hidden sm:inline">Descargar MP3</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-slate-50 max-h-60 overflow-y-auto divide-y divide-slate-100">
                                    <div class="p-4 flex items-center gap-4 bg-white border-l-4 border-brand-secondary shadow-sm">
                                        <div class="text-brand-secondary animate-bounce"><i data-lucide="bar-chart-2" class="w-5 h-5"></i></div>
                                        <div class="flex-1">
                                            <h4 class="font-bold text-brand-primary text-sm">Venciendo el Temor</h4>
                                            <p class="text-xs text-slate-500">19 Nov • Pastor Juan Pérez</p>
                                        </div>
                                        <span class="text-xs font-mono text-slate-400 bg-slate-100 px-2 py-1 rounded">45:20</span>
                                    </div>

                                    <div class="p-4 flex items-center gap-4 hover:bg-white cursor-pointer border-l-4 border-transparent hover:border-slate-300 transition-all group" onclick="changeTrack('Fe Inquebrantable', 'Pastor Juan Pérez')">
                                        <div class="text-slate-300 group-hover:text-brand-primary transition-colors"><i data-lucide="play-circle" class="w-5 h-5"></i></div>
                                        <div class="flex-1">
                                            <h4 class="font-bold text-slate-600 group-hover:text-brand-primary text-sm transition-colors">Fe Inquebrantable</h4>
                                            <p class="text-xs text-slate-400">12 Nov • Pastor Juan Pérez</p>
                                        </div>
                                        <span class="text-xs font-mono text-slate-400 bg-slate-100 px-2 py-1 rounded">38:15</span>
                                    </div>

                                    <div class="p-4 flex items-center gap-4 hover:bg-white cursor-pointer border-l-4 border-transparent hover:border-slate-300 transition-all group" onclick="changeTrack('Identidad Real', 'Pastora María')">
                                        <div class="text-slate-300 group-hover:text-brand-primary transition-colors"><i data-lucide="play-circle" class="w-5 h-5"></i></div>
                                        <div class="flex-1">
                                            <h4 class="font-bold text-slate-600 group-hover:text-brand-primary text-sm transition-colors">Identidad Real</h4>
                                            <p class="text-xs text-slate-400">05 Nov • Pastora María</p>
                                        </div>
                                        <span class="text-xs font-mono text-slate-400 bg-slate-100 px-2 py-1 rounded">41:00</span>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="space-y-8">
                            
                            <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-8 relative overflow-hidden text-center group hover:shadow-md transition-shadow">
                                <div class="absolute top-0 right-0 w-32 h-32 bg-brand-secondary/5 rounded-full -mr-16 -mt-16 transition-transform group-hover:scale-110"></div>
                                
                                <h3 class="font-bold text-slate-800 mb-1 flex items-center justify-center gap-2">
                                    <i data-lucide="bookmark" class="w-4 h-4 text-brand-secondary"></i> Lectura de Hoy
                                </h3>
                                <p class="text-xs text-slate-400 mb-6 font-medium">Plan Anual • Día 305</p>
                                
                                <div class="bg-brand-light rounded-2xl p-6 border border-slate-200 mb-6 relative">
                                    <span class="text-brand-secondary text-[10px] font-black uppercase tracking-widest block mb-2">LIBRO DE</span>
                                    <span class="text-4xl font-black text-brand-primary block mb-1">Salmos</span>
                                    <span class="text-2xl font-bold text-slate-600 block mb-2">119</span>
                                    <span class="bg-white px-3 py-1 rounded-full text-xs font-bold text-slate-500 shadow-sm border border-slate-100">Versículos 1-40</span>
                                </div>

                                <button onclick="openBibleModal()" class="w-full py-4 bg-brand-primary text-white rounded-xl font-bold text-sm hover:bg-brand-secondary hover:text-brand-primary transition-all shadow-xl shadow-brand-primary/20 transform active:scale-95 uppercase tracking-wide">
                                    Leer Aquí Mismo
                                </button>
                            </div>

                            <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-6">
                                <div class="flex justify-between items-center mb-6 border-b border-slate-100 pb-4">
                                    <h3 class="font-bold text-slate-800">Muro de Oración</h3>
                                    <span class="bg-red-50 text-red-500 text-xs font-black px-2 py-1 rounded-md border border-red-100">2 ACTIVAS</span>
                                </div>
                                <div class="space-y-4">
                                    <label class="flex items-start gap-3 p-3 rounded-xl hover:bg-slate-50 border border-slate-100 hover:border-brand-secondary/50 transition cursor-pointer group select-none">
                                        <div class="relative flex items-center">
                                            <input type="checkbox" class="peer h-5 w-5 cursor-pointer appearance-none rounded border border-slate-300 bg-white checked:border-brand-secondary checked:bg-brand-secondary transition-all">
                                            <i data-lucide="check" class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white opacity-0 peer-checked:opacity-100"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-bold text-slate-700 group-hover:text-brand-primary transition-colors">Salud Familia López</p>
                                            <p class="text-xs text-slate-400 mt-0.5">Cirugía programada martes 8am.</p>
                                        </div>
                                    </label>
                                    
                                    <label class="flex items-start gap-3 p-3 rounded-xl hover:bg-slate-50 border border-slate-100 hover:border-brand-secondary/50 transition cursor-pointer group select-none">
                                        <div class="relative flex items-center">
                                            <input type="checkbox" class="peer h-5 w-5 cursor-pointer appearance-none rounded border border-slate-300 bg-white checked:border-brand-secondary checked:bg-brand-secondary transition-all">
                                            <i data-lucide="check" class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white opacity-0 peer-checked:opacity-100"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-bold text-slate-700 group-hover:text-brand-primary transition-colors">Provisión Iglesia</p>
                                            <p class="text-xs text-slate-400 mt-0.5">Recursos para evento de niños.</p>
                                        </div>
                                    </label>
                                </div>
                                <button class="w-full mt-4 text-xs font-bold text-slate-400 hover:text-brand-primary py-2 text-center border-t border-slate-100 transition-colors">
                                    Ver lista completa de intercesión
                                </button>
                            </div>

                            <div class="bg-white rounded-3xl shadow-sm border border-slate-200 p-6">
                                <h3 class="font-bold text-slate-800 mb-4 flex items-center gap-2">
                                    <i data-lucide="calendar-check" class="w-4 h-4 text-brand-secondary"></i> Tu Agenda
                                </h3>
                                <div class="relative border-l-2 border-slate-100 pl-6 ml-2 space-y-8 py-2">
                                    <div class="relative">
                                        <div class="absolute -left-[31px] top-1 w-4 h-4 rounded-full bg-green-500 border-[3px] border-white shadow-sm"></div>
                                        <p class="text-[10px] text-green-600 font-black mb-1 tracking-wide">DOM 19 NOV</p>
                                        <p class="text-sm font-bold text-slate-800">Culto General</p>
                                        <p class="text-xs text-slate-500">Teclado Principal</p>
                                        <span class="inline-block mt-2 text-[10px] bg-green-50 border border-green-100 text-green-700 px-2 py-1 rounded font-bold">
                                            <i data-lucide="check-circle" class="w-3 h-3 inline mr-1 align-text-bottom"></i> CONFIRMADO
                                        </span>
                                    </div>
                                    
                                    <div class="relative">
                                        <div class="absolute -left-[31px] top-1 w-4 h-4 rounded-full bg-yellow-400 border-[3px] border-white shadow-sm"></div>
                                        <p class="text-[10px] text-yellow-600 font-black mb-1 tracking-wide">JUE 23 NOV</p>
                                        <p class="text-sm font-bold text-slate-800">Ensayo Alabanza</p>
                                        <p class="text-xs text-slate-500 mb-2">Instrumentista</p>
                                        <div class="flex gap-2">
                                            <button class="text-[10px] bg-slate-100 hover:bg-green-500 hover:text-white text-slate-600 px-3 py-1.5 rounded-md font-bold transition-colors shadow-sm">Confirmar</button>
                                            <button class="text-[10px] bg-slate-100 hover:bg-red-500 hover:text-white text-slate-600 px-3 py-1.5 rounded-md font-bold transition-colors shadow-sm">Declinar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </main>
    </div>

    <div id="bibleModal" class="fixed inset-0 z-[200] bg-brand-primary/80 backdrop-blur-md hidden flex items-center justify-center p-4 transition-all duration-300 opacity-0 pointer-events-none" style="transition: opacity 0.3s ease;">
        <div class="bg-[#faf9f6] w-full max-w-3xl h-[85vh] rounded-[2rem] shadow-2xl flex flex-col overflow-hidden transform scale-95 transition-transform duration-300" id="bibleModalContent">
            <div class="bg-white px-6 py-4 border-b border-slate-200 flex justify-between items-center shadow-sm z-10">
                <div>
                    <h3 class="font-black text-2xl text-brand-primary tracking-tight">Salmos 119</h3>
                    <p class="text-xs text-slate-500 font-bold uppercase tracking-wider">Reina Valera 1960</p>
                </div>
                <button onclick="closeBibleModal()" class="w-10 h-10 bg-slate-100 hover:bg-slate-200 rounded-full flex items-center justify-center text-slate-600 transition-colors">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>
            
            <div class="flex-1 overflow-y-auto p-8 md:p-12 scroll-smooth">
                <div class="prose prose-xl max-w-none font-serif text-slate-800 leading-loose">
                    <h4 class="text-center text-slate-400 text-sm font-sans font-bold uppercase tracking-widest mb-8 border-b border-slate-200 pb-4 mx-auto w-1/2">Excelencias de la ley de Dios</h4>
                    
                    <p><sup class="text-sm font-bold text-brand-secondary mr-1 select-none">1</sup> Bienaventurados los perfectos de camino, <br>Los que andan en la ley de Jehová.</p>
                    <p><sup class="text-sm font-bold text-brand-secondary mr-1 select-none">2</sup> Bienaventurados los que guardan sus testimonios, <br>Y con todo el corazón le buscan;</p>
                    <p><sup class="text-sm font-bold text-brand-secondary mr-1 select-none">3</sup> Pues no hacen iniquidad <br>Los que andan en sus caminos.</p>
                    <p><sup class="text-sm font-bold text-brand-secondary mr-1 select-none">4</sup> Tú encargaste <br>Que sean muy guardados tus mandamientos.</p>
                    <p><sup class="text-sm font-bold text-brand-secondary mr-1 select-none">5</sup> ¡Ojalá fuesen ordenados mis caminos <br>Para guardar tus estatutos!</p>
                    <p><sup class="text-sm font-bold text-brand-secondary mr-1 select-none">6</sup> Entonces no sería yo avergonzado, <br>Cuando atendiese a todos tus mandamientos.</p>
                    <p><sup class="text-sm font-bold text-brand-secondary mr-1 select-none">7</sup> Te alabaré con rectitud de corazón <br>Cuando aprendiere tus justos juicios.</p>
                    
                    <div class="text-center my-10">
                        <span class="inline-block w-16 h-1 bg-brand-secondary/30 rounded-full"></span>
                    </div>
                    <p class="text-center text-slate-400 text-sm italic font-sans">Fin de la lectura asignada</p>
                </div>
            </div>
            
            <div class="p-6 border-t border-slate-200 bg-white flex justify-between items-center z-10">
                <span class="text-xs text-slate-400 font-bold hidden sm:block">Tu progreso: 65%</span>
                <button onclick="closeBibleModal()" class="px-8 py-3 bg-brand-primary text-white font-bold rounded-xl hover:bg-brand-secondary hover:text-brand-primary transition-all shadow-lg transform active:scale-95">
                    Completar Lectura
                </button>
            </div>
        </div>
    </div>

    <script>
        // Inicializar iconos de Lucide
        lucide.createIcons();

        // --- LOGIN ---
        function login() {
            const code = document.getElementById('accessCode').value;
            if(code) {
                const loginScreen = document.getElementById('loginScreen');
                loginScreen.style.opacity = '0';
                setTimeout(() => {
                    loginScreen.classList.add('hidden');
                    document.getElementById('mainDashboard').classList.remove('hidden');
                }, 500);
            } else { alert("Por favor ingresa tu código de acceso."); }
        }

        // --- LOGOUT ---
        function logout() {
            if(confirm("¿Deseas cerrar sesión?")) {
                document.getElementById('mainDashboard').classList.add('hidden');
                const loginScreen = document.getElementById('loginScreen');
                loginScreen.classList.remove('hidden');
                setTimeout(() => loginScreen.style.opacity = '1', 10);
                document.getElementById('accessCode').value = '';
            }
        }

        // --- PERSONALIZACIÓN DE FOTO ---
        function updateProfileImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById('userAvatar').src = e.target.result;
                    // Aquí se simula la subida al servidor
                    const btn = document.querySelector('.group[onclick*="photoInput"]');
                    // Pequeña animación de éxito
                    btn.classList.add('ring-4', 'ring-green-500');
                    setTimeout(() => btn.classList.remove('ring-4', 'ring-green-500'), 1000);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        // --- DEVOCIONAL EXPANDIBLE ---
        function expandDevotional() {
            const content = document.getElementById('devotionalContent');
            const chevronBox = document.getElementById('devChevronBox');
            const chevron = document.getElementById('devChevron');
            
            if (content.classList.contains('hidden')) {
                // Abrir
                content.classList.remove('hidden');
                content.style.opacity = 0;
                setTimeout(() => content.style.opacity = 1, 10); // Fade in
                
                chevron.style.transform = 'rotate(180deg)';
                chevronBox.classList.add('bg-white', 'text-brand-primary');
                chevronBox.classList.remove('bg-white/20', 'text-white');
                
                // Scroll suave
                setTimeout(() => content.scrollIntoView({behavior: "smooth", block: "center"}), 100);
            } else {
                // Cerrar
                content.classList.add('hidden');
                chevron.style.transform = 'rotate(0deg)';
                chevronBox.classList.remove('bg-white', 'text-brand-primary');
                chevronBox.classList.add('bg-white/20', 'text-white');
            }
        }

        // --- MODAL BIBLIA ---
        function openBibleModal() {
            const modal = document.getElementById('bibleModal');
            const content = document.getElementById('bibleModalContent');
            
            modal.classList.remove('hidden');
            // Necesario pequeño delay para que la transición CSS funcione
            setTimeout(() => {
                modal.style.opacity = '1';
                modal.style.pointerEvents = 'auto';
                content.classList.remove('scale-95');
                content.classList.add('scale-100');
            }, 10);
        }

        function closeBibleModal() {
            const modal = document.getElementById('bibleModal');
            const content = document.getElementById('bibleModalContent');
            
            modal.style.opacity = '0';
            modal.style.pointerEvents = 'none';
            content.classList.remove('scale-100');
            content.classList.add('scale-95');
            
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300); // Esperar a que termine la transición
        }

        // --- SIMULACIÓN AUDIO PLAYER ---
        function changeTrack(title, speaker) {
            // Efecto visual simple
            const titleEl = document.getElementById('playerTitle');
            titleEl.style.opacity = 0;
            
            setTimeout(() => {
                titleEl.innerText = title;
                document.getElementById('playerSpeaker').innerText = speaker + " • Archivo";
                titleEl.style.opacity = 1;
            }, 200);
        }

        // --- NAVEGACIÓN SIDEBAR (Visual) ---
        function switchTab(tab, el) {
            // Remover clase activa de todos
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('bg-brand-secondary', 'text-brand-primary', 'shadow-lg');
                item.classList.add('text-slate-400', 'hover:text-white');
            });
            
            // Agregar clase activa al clickeado
            el.classList.remove('text-slate-400', 'hover:text-white');
            el.classList.add('bg-brand-secondary', 'text-brand-primary', 'shadow-lg');
        }
    </script>
</body>
</html>