@extends('layouts.dashboardnew')

@section('content')

{{--
================================================================================
  Networker Pro — Vista principal del usuario
================================================================================
  Este archivo es el resultado del PORT del prototipo HTML standalone
  (snippets/prototipo-referencia.html) hacia Laravel, aplicando los 10
  reemplazos sistemáticos documentados en el ROADMAP del paquete.

  - localStorage  →  AJAX a /admin/networker-pro/*
  - state local   →  state sincronizado con servidor en cada acción
  - QUOTES[]      →  state.quotes (resuelto del lado servidor)
  - PODCASTS_DB   →  carga bajo demanda vía apiGet(ROUTES.podcasts)
  - ONBOARDING_CTAS → state.ctas (editable desde panel admin)
================================================================================
--}}

<div class="max-w-[1100px] mx-auto md:p-6" id="app">
    <div class="text-center py-20">
        <div class="inline-block animate-spin h-10 w-10 border-4 border-brand-500 border-t-transparent rounded-full"></div>
        <p class="text-slate-500 mt-4">Cargando tu tablero...</p>
    </div>
</div>

{{-- Overlays modales --}}
<div id="ob-overlay" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden items-center justify-center p-2 py-4 overflow-y-auto">
    <div class="bg-white rounded-2xl w-full max-w-xl p-6 md:p-8 shadow-2xl" id="ob-content"></div>
</div>

<div id="addtask-overlay" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 hidden items-center justify-center p-4 overflow-y-auto">
    <div class="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl" id="addtask-content"></div>
</div>

<div id="summary-overlay" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden items-center justify-center p-4 overflow-y-auto">
    <div class="bg-white rounded-2xl w-full max-w-lg p-6 md:p-8 shadow-2xl" id="summary-content"></div>
</div>

@endsection


<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config={theme:{extend:{colors:{
    brand:{50:'#EEEDFE',100:'#D8D6FD',500:'#534AB7',600:'#3C3489',700:'#2D2766'},
    ocean:{50:'#E6F1FB',100:'#C5DEF5',500:'#378ADD',600:'#185FA5'},
    mint:{50:'#E1F5EE',100:'#B3E6D4',500:'#1D9E75',600:'#0F6E56'},
    fire:{50:'#FAECE7',100:'#F3C9BA',500:'#D85A30',600:'#993C1D'},
    amber:{50:'#FAEEDA',100:'#F3D89E',500:'#EF9F27',600:'#C47E0F'},
    danger:{50:'#FCEBEB',500:'#E24B4A'},
    slate:{850:'#1a1a2e',900:'#16213e',950:'#0f3460'}
}}}}
</script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body{font-family:'Plus Jakarta Sans',sans-serif}
.task-card{cursor:grab;user-select:none;transition:all .2s}
.task-card:active{cursor:grabbing}
.task-card.dragging{opacity:.4;transform:rotate(2deg) scale(1.03)}
.drag-over{background-color:#EEEDFE!important;border:2px dashed #534AB7!important}
.fade-in{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.progress-bar{transition:width .5s ease}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}
/* hidden con flex no se lleva bien; usamos display:none directo */
#ob-overlay.hidden,#addtask-overlay.hidden,#summary-overlay.hidden{display:none!important}
#ob-overlay:not(.hidden),#addtask-overlay:not(.hidden),#summary-overlay:not(.hidden){display:flex!important}

</style>


@push('script')

{{-- Rutas inyectadas desde Blade --}}
<script>
    window.NP_ROUTES = {
        config:      "{{ route('networker-pro.config') }}",
        saveConfig:  "{{ route('networker-pro.save-config') }}",
        move:        "{{ route('networker-pro.move') }}",
        progress:    "{{ route('networker-pro.progress') }}",
        addTask:     "{{ route('networker-pro.add-task') }}",
        removeTask:  "{{ route('networker-pro.remove-task', ['id' => ':id']) }}",
        updateTask:  "{{ route('networker-pro.update-task', ['id' => ':id']) }}",
        podcasts:    "{{ route('networker-pro.podcasts') }}",
    };

    // URLs externas (blog y academia) - ajustar según instalación del cliente
    window.NP_RESOURCES = {
        BLOG_URL: "{{ url('admin/archivo/blog/show') }}",
        ACADEMIA_URL: "{{ url('academia/home') }}",
        CAT_TO_BLOG: {
            red: 'red-y-afiliados',
            ventas: 'ventas',
            contenido: 'contenido-y-redes',
            lectura: 'crecimiento-personal',
            bienestar: 'bienestar-fisico'
        }
    };
</script>

<script>
/*
============================================================================
NETWORKER PRO — JavaScript principal (port completo del prototipo)
============================================================================
*/

const ROUTES = window.NP_ROUTES;
const RECURSOS_CONFIG = window.NP_RESOURCES;
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content || '';

// Estado en memoria (espejo del servidor)
let state = null;
let dragData = null;
let podcastFiltro = 'todos';
let obStep = 0;
let obD = {
    years: 2, income: 0,
    red: {afiliados: 10, conocer: 10, seguimientos: 8, presentaciones: 12, f: {afiliados:'semanal', conocer:'semanal', seguimientos:'semanal', presentaciones:'mensual'}},
    ventas: {nuevas: 5, reactivar: 3, f: {nuevas:'semanal', reactivar:'semanal'}},
    contenido: {networks: ['Instagram'], posts: 15, freq: 'mensual'},
    lectura: {capitulos: 10, freq: 'mensual'},
    bienestar: {sport: 'Caminar'}
};

// Constantes UI
const FREQS = ['diario','semanal','quincenal','mensual'];
const SPORTS = [{id:'Gimnasio',icon:'🏋️'},{id:'Caminar',icon:'🚶'},{id:'Correr',icon:'🏃'},{id:'Ciclismo',icon:'🚴'},{id:'Natación',icon:'🏊'},{id:'Yoga',icon:'🧘'},{id:'Otro',icon:'⚡'}];
const NETWORKS = ['Instagram','TikTok','Facebook','YouTube','LinkedIn'];
const CAT_META = {
    red: {name:'Red y Afiliados', icon:'🤝', colorKey:'brand'},
    ventas: {name:'Ventas', icon:'💰', colorKey:'mint'},
    contenido: {name:'Contenido y Redes', icon:'📱', colorKey:'fire'},
    lectura: {name:'Crecimiento Personal', icon:'📖', colorKey:'ocean'},
    bienestar: {name:'Bienestar Físico', icon:'🏃', colorKey:'amber'}
};
const COLOR_CSS = {
    brand:{bg:'bg-brand-50',text:'text-brand-500',fill:'bg-brand-500',border:'border-brand-100',hex:'#534AB7'},
    mint:{bg:'bg-mint-50',text:'text-mint-500',fill:'bg-mint-500',border:'border-mint-100',hex:'#1D9E75'},
    fire:{bg:'bg-fire-50',text:'text-fire-500',fill:'bg-fire-500',border:'border-fire-100',hex:'#D85A30'},
    ocean:{bg:'bg-ocean-50',text:'text-ocean-500',fill:'bg-ocean-500',border:'border-ocean-100',hex:'#378ADD'},
    amber:{bg:'bg-amber-50',text:'text-amber-500',fill:'bg-amber-500',border:'border-amber-100',hex:'#EF9F27'}
};
const MNAMES = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];

// =========================================
// HELPERS HTTP
// =========================================
async function apiGet(url) {
    const res = await fetch(url, {
        credentials: 'same-origin',
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json'}
    });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    return res.json();
}
async function apiPost(url, data = {}, method = 'POST') {
    const res = await fetch(url, {
        method,
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': CSRF,
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    return res.json();
}

// =========================================
// HELPERS UI
// =========================================
function cc(ck){return COLOR_CSS[CAT_META[ck].colorKey]}
function fmt$(n){return '$'+Number(n).toLocaleString('es-CO')}
function fire(opts={}){if(typeof confetti!=='undefined')confetti(Object.assign({particleCount:100,spread:70,origin:{y:.5},zIndex:9999},opts))}
function daysSince(dateStr){if(!dateStr)return 999;return Math.floor((new Date()-new Date(dateStr))/(864e5))}

function getProgress(ck){
    const b = state.board[ck]; if(!b) return 0;
    const t = (b.todo?.length||0) + (b.done?.length||0) + (b.missed?.length||0);
    return t === 0 ? 0 : Math.round((b.done?.length||0)/t*100);
}
function getGlobalProgress(){
    const cats = Object.keys(CAT_META);
    return Math.round(cats.reduce((s,c) => s + getProgress(c), 0) / cats.length);
}

// Devuelve la frase del día para una categoría (viene del servidor)
function quoteOfDay(cat){
    const q = state?.quotes?.[cat];
    if(!q) return '';
    if(typeof q === 'string') return q;
    return q.frase || (q.autor ? `${q.frase} — ${q.autor}` : '');
}

function urlBlog(catKey){
    const slug = catKey ? RECURSOS_CONFIG.CAT_TO_BLOG[catKey] : '';
    return slug ? `${RECURSOS_CONFIG.BLOG_URL}?cat=${slug}` : RECURSOS_CONFIG.BLOG_URL;
}
function urlAcademia(catKey){
    const slug = catKey ? RECURSOS_CONFIG.CAT_TO_BLOG[catKey] : '';
    return slug ? `${RECURSOS_CONFIG.ACADEMIA_URL}?cat=${slug}` : RECURSOS_CONFIG.ACADEMIA_URL;
}

// Devuelve un texto motivacional según el delta entre el mes actual y el anterior.
function deltaMessage(delta){
    if(delta>=20) return {icon:'🚀',tone:'mint',texto:'¡Estás en racha! Llevas un ritmo superior al mes pasado.'};
    if(delta>=5)  return {icon:'📈',tone:'mint',texto:'Vas mejor que el mes pasado. Mantén ese impulso.'};
    if(delta>=-4) return {icon:'⚖️',tone:'ocean',texto:'Mantienes el ritmo del mes anterior. Pequeño esfuerzo extra y subes.'};
    if(delta>=-15)return {icon:'⏰',tone:'amber',texto:'Vas algo por debajo del mes pasado. Aún tienes margen para recuperar.'};
    return {icon:'🔄',tone:'fire',texto:'Bajaste la guardia respecto al mes pasado. Un día consistente cambia toda la curva.'};
}

// =========================================
// FEEDBACK CONTEXTUAL POR PROGRESO
// =========================================
function feedbackHTML(progress){
    let cls,icon,title,text;
    if(progress>=90){cls='bg-mint-50 text-mint-600';icon='🚀';title='¡Eres imparable! Estás construyendo un imperio';text='Progreso del '+progress+'%. Tu disciplina es tu mayor activo.';}
    else if(progress>=75){cls='bg-mint-50 text-mint-600';icon='🔥';title='¡Ya casi lo logras! No bajes el ritmo';text='Vas al '+progress+'%. Un último empujón y cierras el mes en alto.';}
    else if(progress>=50){cls='bg-ocean-50 text-ocean-600';icon='💪';title='Vas a la mitad, ¡buen arranque!';text='Progreso del '+progress+'%. La constancia es la clave del apalancamiento.';}
    else if(progress>=25){cls='bg-amber-50 text-amber-600';icon='💡';title='Aún estás a tiempo. ¡Actívate hoy!';text='Vas al '+progress+'%. Las grandes redes se construyen un contacto a la vez.';}
    else{cls='bg-fire-50 text-fire-600';icon='🌱';title='Tu camino está comenzando';text='Progreso del '+progress+'%. Todo gran logro empieza con el primer paso.';}
    return `<div class="${cls} rounded-xl p-4 mb-5 flex items-start gap-3 fade-in"><div class="text-2xl mt-0.5">${icon}</div><div><div class="font-bold text-sm">${title}</div><div class="text-xs mt-1 opacity-80">${text}</div></div></div>`;
}

// =========================================
// SUMMARY MENSUAL (si el último history es muy reciente y no fue visto)
// =========================================
function showSummaryIfPending(){
    if(!state.history || state.history.length === 0) return;
    const last = state.history[0]; // backend devuelve desc, el primero es el más reciente
    if(!last) return;

    // Sólo mostrar si es del mes inmediatamente anterior y no se ha cerrado en esta sesión
    const now = new Date();
    const currentMonth = now.getMonth() + 1;
    const currentYear  = now.getFullYear();
    let prevMonth = currentMonth - 1, prevYear = currentYear;
    if(prevMonth === 0){ prevMonth = 12; prevYear--; }

    if(parseInt(last.month) !== prevMonth || parseInt(last.year) !== prevYear) return;

    const seenKey = `np_summary_seen_${last.year}_${last.month}`;
    if(sessionStorage.getItem(seenKey)) return;

    const ov = document.getElementById('summary-overlay');
    const ct = document.getElementById('summary-content');
    const cp = last.cat_progress || {};

    let barsHtml = '';
    Object.keys(CAT_META).forEach(ck => {
        const m = CAT_META[ck], c = cc(ck), p = cp[ck] ?? 0;
        barsHtml += `<div class="mb-3"><div class="flex justify-between text-xs font-semibold mb-1"><span>${m.icon} ${m.name}</span><span class="${c.text}">${p}%</span></div><div class="h-2 bg-slate-100 rounded-full overflow-hidden"><div class="progress-bar ${c.fill} h-full rounded-full" style="width:${p}%"></div></div></div>`;
    });

    const catKeyByName = Object.keys(CAT_META).find(k => CAT_META[k].name === last.best_category) || 'red';
    const frase = quoteOfDay(catKeyByName) || quoteOfDay('red');

    ct.innerHTML = `
        <div class="text-center mb-6">
            <div class="w-16 h-16 bg-brand-50 rounded-full flex items-center justify-center text-3xl mx-auto mb-3">📊</div>
            <h2 class="text-xl font-extrabold text-slate-800">Resumen de ${last.month_name}</h2>
            <p class="text-slate-500 text-sm mt-1">Aquí está tu cierre mensual antes de comenzar el nuevo mes.</p>
        </div>
        <div class="bg-gradient-to-r from-brand-50 to-ocean-50 rounded-xl p-5 mb-5 text-center">
            <div class="text-4xl font-extrabold text-brand-500">${last.global_progress}%</div>
            <div class="text-sm text-slate-600 font-medium mt-1">Progreso global del mes</div>
        </div>
        ${barsHtml}
        <div class="grid grid-cols-2 gap-3 mt-5 mb-4">
            <div class="bg-mint-50 rounded-lg p-3 text-center"><div class="text-xs text-mint-600 font-semibold">🏆 Mejor categoría</div><div class="font-bold text-mint-600 text-sm mt-1">${last.best_category||'—'}</div></div>
            <div class="bg-fire-50 rounded-lg p-3 text-center"><div class="text-xs text-fire-600 font-semibold">📈 Área de mejora</div><div class="font-bold text-fire-600 text-sm mt-1">${last.worst_category||'—'}</div></div>
        </div>
        <div class="bg-slate-50 border-l-4 border-brand-500 rounded-lg p-3 mb-5 flex items-start gap-2">
            <i class="fa-solid fa-quote-left text-brand-500 mt-0.5"></i>
            <p class="text-xs italic text-slate-600 flex-1">${frase}</p>
        </div>
        <button onclick="closeSummary('${seenKey}')" class="w-full bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 rounded-xl transition">🚀 ¡Comenzar nuevo mes!</button>
    `;
    ov.classList.remove('hidden');
}

function closeSummary(seenKey){
    if(seenKey) sessionStorage.setItem(seenKey, '1');
    document.getElementById('summary-overlay').classList.add('hidden');
}

// =========================================
// RENDER: DASHBOARD PRINCIPAL
// =========================================
function render(){
    if(!state.config.onboarded){ showOnboarding(); return; }

    showSummaryIfPending();

    const app = document.getElementById('app');
    const gp = getGlobalProgress();
    const streak = state.config.streak || 0;
    const sport = state.config.sport || 'Caminar';

    let html = `<div class="fade-in">`;

    // Hero
    html += `
    <div class="bg-gradient-to-br from-slate-850 via-slate-900 to-slate-950 rounded-2xl p-6 md:p-8 text-white mb-5 relative overflow-hidden shadow-lg">
        <div class="absolute top-0 right-0 w-72 h-72 bg-brand-500 rounded-full mix-blend-screen opacity-10 blur-3xl"></div>
        <div class="absolute -bottom-10 left-10 w-60 h-60 bg-mint-500 rounded-full mix-blend-screen opacity-10 blur-3xl"></div>
        <div class="relative z-10">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
                <div>
                    <h1 class="text-xl md:text-3xl font-extrabold mb-1 leading-tight">Mi Tablero de Objetivos · Networker Pro</h1>
                    <p class="text-slate-400 text-sm">Libertad financiera en ${state.config.vision_years} año${state.config.vision_years>1?'s':''} · Meta: ${fmt$(state.config.vision_income)}/mes</p>
                </div>
                <div class="flex flex-wrap gap-2 w-full md:w-auto md:shrink-0">
                    <button onclick="renderPodcasts()" class="flex-1 md:flex-initial bg-fire-500/90 hover:bg-fire-500 px-4 py-2 rounded-lg text-sm font-semibold transition flex items-center justify-center gap-1.5">
                        <i class="fa-solid fa-podcast"></i> Podcasts
                    </button>
                    <button onclick="showOnboarding()" class="flex-1 md:flex-initial bg-fire-500/90 hover:bg-fire-500 px-4 py-2 rounded-lg text-sm font-semibold transition flex items-center justify-center gap-1.5">
                        <i class="fa-solid fa-gear mr-1"></i> Ajustar Metas
                    </button>
                </div>
            </div>
            <div class="flex flex-col sm:flex-row items-center gap-4 bg-white/10 rounded-xl p-4 backdrop-blur-sm">
                <div class="flex-1 w-full">
                    <div class="flex justify-between text-sm font-bold mb-2"><span>Progreso Global</span><span>${gp}%</span></div>
                    <div class="h-3 bg-slate-700 rounded-full overflow-hidden"><div class="progress-bar bg-gradient-to-r from-brand-500 to-mint-500 h-full rounded-full" style="width:${gp}%"></div></div>
                </div>
                ${streak>0?`<div class="bg-amber-500/20 border border-amber-500/30 text-amber-300 px-4 py-2 rounded-lg font-bold text-center shrink-0"><div class="text-lg">🔥 ${streak}</div><div class="text-[10px] font-medium opacity-80">Racha ${sport}</div></div>`:''}
            </div>
            <div class="mt-4 flex items-start gap-2 text-slate-300 text-xs italic">
                <i class="fa-solid fa-quote-left text-amber-400 mt-0.5"></i>
                <span class="flex-1">${quoteOfDay('vision')}</span>
            </div>
        </div>
    </div>`;

    // Feedback contextual
    html += feedbackHTML(gp);

    // Comparativo vs mes anterior (history[0] es el más reciente porque viene desc del backend)
    if(state.history && state.history.length > 0){
        const prev = state.history[0];
        const delta = gp - (prev.global_progress || 0);
        const msg = deltaMessage(delta);
        const toneColors = {
            mint: {bg:'bg-mint-50',border:'border-mint-100',text:'text-mint-600'},
            ocean:{bg:'bg-ocean-50',border:'border-ocean-100',text:'text-ocean-600'},
            amber:{bg:'bg-amber-50',border:'border-amber-100',text:'text-amber-600'},
            fire: {bg:'bg-fire-50',border:'border-fire-100',text:'text-fire-600'}
        }[msg.tone];
        const signo = delta > 0 ? '+' : '';
        html += `<div class="${toneColors.bg} border ${toneColors.border} rounded-xl p-4 mb-5">
            <div class="flex items-start gap-3">
                <div class="text-2xl">${msg.icon}</div>
                <div class="flex-1">
                    <div class="flex items-baseline gap-2 flex-wrap">
                        <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">vs ${prev.month_name}</span>
                        <span class="${toneColors.text} font-extrabold text-lg">${signo}${delta}%</span>
                        <span class="text-xs text-slate-400">(${prev.global_progress}% → ${gp}%)</span>
                    </div>
                    <p class="${toneColors.text} text-sm font-semibold mt-1">${msg.texto}</p>
                </div>
            </div>
        </div>`;
    }

    // Barras de progreso por categoría
    html += `<div class="bg-white rounded-xl border border-slate-200 p-3 mb-5 shadow-sm">
        <h3 class="text-sm font-bold text-slate-700 mb-4">📊 Progreso por categoría</h3>`;
    Object.keys(CAT_META).forEach(ck => {
        const m = CAT_META[ck], c = cc(ck), p = getProgress(ck);
        html += `<div class="mb-3 last:mb-0"><div class="flex justify-between items-center gap-2 text-xs font-semibold mb-1"><span class="flex-1 min-w-0">${m.icon} ${m.name}</span><span class="${c.text} shrink-0">${p}%</span></div><div class="h-2 bg-slate-100 rounded-full overflow-hidden"><div class="progress-bar ${c.fill} h-full rounded-full" style="width:${p}%"></div></div></div>`;
    });
    html += `</div>`;

    // Cards de categorías
    html += `<h3 class="text-sm font-bold text-slate-700 mb-3">Tus áreas de enfoque</h3>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 mb-6 [&>*:last-child:nth-child(odd)]:col-span-2 md:[&>*:last-child:nth-child(odd)]:col-span-1">`;
    Object.keys(CAT_META).forEach(ck => {
        const m = CAT_META[ck], c = cc(ck), p = getProgress(ck);
        html += `
        <div onclick="renderBoard('${ck}')" class="bg-white p-3 rounded-xl border border-slate-200 shadow-sm hover:shadow-md hover:-translate-y-1 transition cursor-pointer group">
            <div class="w-10 h-10 rounded-lg ${c.bg} ${c.text} flex items-center justify-center text-xl mb-3 group-hover:scale-110 transition">${m.icon}</div>
            <h4 class="font-bold text-slate-800 text-sm mb-1">${m.name}</h4>
            <p class="text-[11px] text-slate-400 font-medium mb-2">${p}% completado</p>
            <div class="h-1.5 bg-slate-100 rounded-full overflow-hidden"><div class="progress-bar ${c.fill} h-full rounded-full" style="width:${p}%"></div></div>
        </div>`;
    });
    html += `</div>`;

    // Centro de aprendizaje
    html += `<h3 class="text-sm font-bold text-slate-700 mb-3"><i class="fa-solid fa-graduation-cap mr-1 text-slate-400"></i>Centro de aprendizaje</h3>
    <div class="bg-white rounded-xl border border-slate-200 p-4 mb-6 shadow-sm">
        <p class="text-xs text-slate-500 mb-3">Refuerza tu crecimiento con los recursos del ecosistema:</p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <button onclick="renderPodcasts()" class="flex items-center gap-3 bg-fire-50 hover:bg-fire-100 border border-fire-100 rounded-lg p-3 transition text-left group">
                <div class="w-10 h-10 rounded-lg bg-fire-500 text-white flex items-center justify-center text-lg group-hover:scale-110 transition shrink-0"><i class="fa-solid fa-podcast"></i></div>
                <div class="flex-1 min-w-0">
                    <div class="font-bold text-fire-600 text-sm">Podcasts</div>
                    <div class="text-[11px] text-fire-500/80">Biblioteca de episodios</div>
                </div>
            </button>
            <a href="${urlBlog()}" target="_blank" rel="noopener" class="flex items-center gap-3 bg-ocean-50 hover:bg-ocean-100 border border-ocean-100 rounded-lg p-3 transition text-left group">
                <div class="w-10 h-10 rounded-lg bg-ocean-500 text-white flex items-center justify-center text-lg group-hover:scale-110 transition shrink-0"><i class="fa-solid fa-newspaper"></i></div>
                <div class="flex-1 min-w-0">
                    <div class="font-bold text-ocean-600 text-sm flex items-center gap-1">Blog y Artículos <i class="fa-solid fa-arrow-up-right-from-square text-[9px] opacity-60"></i></div>
                    <div class="text-[11px] text-ocean-500/80">Artículos por categoría</div>
                </div>
            </a>
            <a href="${urlAcademia()}" target="_blank" rel="noopener" class="flex items-center gap-3 bg-mint-50 hover:bg-mint-100 border border-mint-100 rounded-lg p-3 transition text-left group">
                <div class="w-10 h-10 rounded-lg bg-mint-500 text-white flex items-center justify-center text-lg group-hover:scale-110 transition shrink-0"><i class="fa-solid fa-graduation-cap"></i></div>
                <div class="flex-1 min-w-0">
                    <div class="font-bold text-mint-600 text-sm flex items-center gap-1">Academia <i class="fa-solid fa-arrow-up-right-from-square text-[9px] opacity-60"></i></div>
                    <div class="text-[11px] text-mint-500/80">Cursos formativos</div>
                </div>
            </a>
        </div>
    </div>`;

    // Historial
    if(state.history && state.history.length > 0){
        html += `<h3 class="text-sm font-bold text-slate-700 mb-3"><i class="fa-solid fa-clock-rotate-left mr-1 text-slate-400"></i>Historial de logros</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">`;
        state.history.slice(0, 3).forEach(h => {
            const cp = h.cat_progress || {};
            html += `<div class="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
                <div class="flex justify-between items-center mb-3"><span class="font-bold text-slate-700 text-sm">${h.month_name}</span><span class="text-sm font-extrabold text-brand-500">${h.global_progress}%</span></div>
                <div class="flex h-2 rounded-full overflow-hidden gap-0.5">${Object.keys(CAT_META).map(ck => `<div class="${cc(ck).fill} rounded" style="width:20%;opacity:${((cp[ck]||0)/100*.7)+.3}" title="${CAT_META[ck].name}: ${cp[ck]||0}%"></div>`).join('')}</div>
                <div class="mt-2 text-[10px] text-slate-400">🏆 ${h.best_category||'—'} · 📈 ${h.worst_category||'—'}</div>
            </div>`;
        });
        html += `</div>`;
    }

    html += `</div>`;
    app.innerHTML = html;
}

// =========================================
// RENDER: TABLERO DE UNA CATEGORÍA
// =========================================
function renderBoard(ck){
    const m = CAT_META[ck], c = cc(ck), b = state.board[ck], p = getProgress(ck);
    const app = document.getElementById('app');

    let html = `<div class="fade-in">`;

    // Header
    html += `<div class="flex flex-wrap items-center justify-between gap-2 mb-5">
    <div class="flex items-center gap-2 min-w-0">
        <button onclick="render()" class="bg-white border border-slate-200 text-slate-500 hover:text-brand-500 hover:border-brand-500 px-3 py-2 rounded-lg font-semibold transition text-sm shrink-0"><i class="fa-solid fa-arrow-left"></i><span class="hidden sm:inline ml-1">Volver</span></button>
        <h2 class="text-base sm:text-xl font-extrabold flex items-center gap-2 min-w-0"><span class="${c.text} shrink-0">${m.icon}</span><span class="truncate">${m.name}</span></h2>
    </div>
    <div class="flex items-center gap-3 shrink-0">
        <button onclick="showAddTask('${ck}')" class="bg-brand-500 hover:bg-brand-600 text-white px-3 py-2 rounded-lg text-sm font-bold transition"><i class="fa-solid fa-plus mr-1"></i>Agregar</button>
        <span class="text-lg sm:text-xl font-extrabold ${c.text}">${p}%</span>
    </div>
</div>`;

    // Streak para bienestar
    if(ck === 'bienestar'){
        const sport = state.config.sport || 'Caminar';
        const streak = state.config.streak || 0;
        const bestStreak = state.config.best_streak || 0;
        html += `<div class="bg-gradient-to-r from-amber-50 to-amber-100/50 border border-amber-200 rounded-xl p-4 mb-5 flex items-center justify-between gap-3">
            <div>
                <h3 class="font-bold text-amber-800">${sport} · 30 min/día</h3>
                <p class="text-amber-600 text-xs mt-1">Arrastra la tarjeta a "¡Hecho!" o usa el botón para marcar tu día.</p>
                ${bestStreak>0?`<p class="text-[10px] text-amber-500 mt-1">Mejor racha histórica: ${bestStreak} días</p>`:''}
            </div>
            <div class="text-center shrink-0">
                <div class="text-3xl font-extrabold text-amber-500">🔥 ${streak}</div>
                <div class="text-[10px] text-amber-600 font-semibold">días racha</div>
            </div>
        </div>`;
    }

    // Progress bar
    html += `<div class="bg-white rounded-xl border border-slate-200 p-4 mb-5 shadow-sm">
        <div class="flex justify-between text-xs font-semibold mb-2"><span>Progreso ${m.name}</span><span class="${c.text}">${p}%</span></div>
        <div class="h-2.5 bg-slate-100 rounded-full overflow-hidden"><div class="progress-bar ${c.fill} h-full rounded-full" style="width:${p}%"></div></div>
    </div>`;

    // Frase motivacional contextual
    html += `<div class="${c.bg} border ${c.border} rounded-xl p-3 mb-5 flex items-start gap-2">
        <i class="fa-solid fa-quote-left ${c.text} mt-0.5"></i>
        <p class="${c.text} text-xs italic font-medium flex-1">${quoteOfDay(ck)}</p>
    </div>`;

    // Feedback
    html += feedbackHTML(p);

    // 3 columnas
    html += `<div class="grid grid-cols-1 md:grid-cols-3 gap-4">`;
    [
        {col:'todo',  label:'📋 Por Hacer',     hdr:'bg-ocean-50 text-ocean-600'},
        {col:'done',  label:'✅ ¡Hecho!',       hdr:'bg-mint-50 text-mint-600'},
        {col:'missed',label:'⚠ No Realizado',   hdr:'bg-fire-50 text-fire-600'}
    ].forEach(({col,label,hdr}) => {
        html += `<div class="bg-slate-50 rounded-xl border border-slate-200 flex flex-col" style="min-height:350px">
            <div class="${hdr} p-3 rounded-t-xl font-bold text-center text-sm border-b border-white/50">${label} <span class="opacity-50 text-xs ml-1">(${(b[col]||[]).length})</span></div>
            <div class="flex-1 p-3 overflow-y-auto" data-col="${col}" data-cat="${ck}" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event)">`;

        (b[col]||[]).forEach((task, idx) => {
            const pct = task.target > 0 ? Math.min(Math.round(task.progress/task.target*100), 100) : 0;
            html += `<div class="task-card bg-white p-3 rounded-lg border border-slate-200 shadow-sm mb-2 relative group" draggable="true"
                data-board-item-id="${task.id}" data-task-id="${task.task_id}" data-idx="${idx}" data-col="${col}" data-cat="${ck}"
                ondragstart="onDragStart(event)" ondragend="onDragEnd(event)">
                <div class="flex items-start justify-between gap-2">
                    <div class="flex-1 min-w-0">
                        <h4 class="font-bold text-slate-700 text-sm">${m.icon} ${task.label}</h4>
                        <div class="text-[10px] text-slate-400 font-medium uppercase tracking-wider mt-0.5">${task.freq}</div>
                    </div>`;

            // Botones de Editar / Eliminar visibles en la columna "Por Hacer".
            // En "Hecho" y "No Realizado" se mantiene sólo el icono pequeño de eliminar (UX previa).
            if(col === 'todo'){
                html += `<div class="flex items-center gap-1 shrink-0">
                    <button onclick="event.stopPropagation();showEditTask(${task.task_id},'${ck}')"
                        class="w-7 h-7 rounded-md bg-slate-50 hover:bg-brand-50 text-slate-400 hover:text-brand-500 flex items-center justify-center transition"
                        title="Editar actividad">
                        <i class="fa-solid fa-pen text-[11px]"></i>
                    </button>
                    <button onclick="event.stopPropagation();removeTask(${task.task_id},'${ck}')"
                        class="w-7 h-7 rounded-md bg-slate-50 hover:bg-danger-50 text-slate-400 hover:text-danger-500 flex items-center justify-center transition"
                        title="Eliminar actividad">
                        <i class="fa-solid fa-trash text-[11px]"></i>
                    </button>
                </div>`;
            } else {
                html += `<button onclick="event.stopPropagation();removeTask(${task.task_id},'${ck}')" class="opacity-0 group-hover:opacity-100 text-slate-300 hover:text-danger-500 transition text-xs p-1" title="Eliminar"><i class="fa-solid fa-xmark"></i></button>`;
            }

            html += `</div>`;

            if(col === 'todo' && ck !== 'bienestar'){
                html += `<div class="flex items-center gap-2 mt-3">
                    <button onclick="event.stopPropagation();adjTask(${task.id},'${ck}',-1)" class="w-7 h-7 rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 flex items-center justify-center font-bold transition text-xs">−</button>
                    <div class="flex-1">
                        <div class="flex justify-between text-[10px] font-bold text-slate-400 mb-0.5"><span>${task.progress}</span><span>${task.target}</span></div>
                        <div class="h-1.5 bg-slate-100 rounded-full overflow-hidden"><div class="progress-bar ${c.fill} h-full rounded-full" style="width:${pct}%"></div></div>
                    </div>
                    <button onclick="event.stopPropagation();adjTask(${task.id},'${ck}',1)" class="w-7 h-7 rounded-full ${c.bg} ${c.text} hover:opacity-80 flex items-center justify-center font-bold transition text-xs">+</button>
                </div>`;
            } else if(col === 'todo' && ck === 'bienestar'){
                html += `<button onclick="event.stopPropagation();completeBienestar(${task.id},'${ck}')" class="w-full mt-3 py-2 bg-amber-50 hover:bg-amber-100 text-amber-700 rounded-lg font-bold text-xs transition"><i class="fa-solid fa-check-circle mr-1"></i>¡Hecho hoy! (30 min)</button>`;
            } else if(col === 'done'){
                html += `<div class="text-[10px] font-bold text-mint-500 bg-mint-50 py-1 px-2 rounded mt-2 inline-block">✓ Completado</div>`;
            } else {
                html += `<div class="text-[10px] font-bold text-fire-500 bg-fire-50 py-1 px-2 rounded mt-2 inline-block">Pendiente</div>`;
            }
            html += `</div>`;
        });

        html += `</div></div>`;
    });
    html += `</div>`;

    // Mini-banner "Aprende más"
    html += `<div class="mt-6 bg-gradient-to-br from-slate-50 to-${m.colorKey}-50/40 border border-slate-200 rounded-xl p-4">
        <div class="flex items-center gap-2 mb-3">
            <i class="fa-solid fa-graduation-cap ${c.text}"></i>
            <h4 class="font-bold text-slate-700 text-sm">Aprende más sobre ${m.name}</h4>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
            <button onclick="renderPodcasts('${ck}')" class="bg-white hover:bg-fire-50 border border-slate-200 hover:border-fire-200 rounded-lg p-2.5 transition flex items-center gap-2 text-left">
                <i class="fa-solid fa-podcast text-fire-500 text-sm"></i>
                <span class="text-xs font-semibold text-slate-600">Podcasts</span>
            </button>
            <a href="${urlBlog(ck)}" target="_blank" rel="noopener" class="bg-white hover:bg-ocean-50 border border-slate-200 hover:border-ocean-200 rounded-lg p-2.5 transition flex items-center gap-2">
                <i class="fa-solid fa-newspaper text-ocean-500 text-sm"></i>
                <span class="text-xs font-semibold text-slate-600 flex-1">Blog</span>
                <i class="fa-solid fa-arrow-up-right-from-square text-[9px] text-slate-400"></i>
            </a>
            <a href="${urlAcademia(ck)}" target="_blank" rel="noopener" class="bg-white hover:bg-mint-50 border border-slate-200 hover:border-mint-200 rounded-lg p-2.5 transition flex items-center gap-2">
                <i class="fa-solid fa-graduation-cap text-mint-500 text-sm"></i>
                <span class="text-xs font-semibold text-slate-600 flex-1">Academia</span>
                <i class="fa-solid fa-arrow-up-right-from-square text-[9px] text-slate-400"></i>
            </a>
        </div>
    </div>`;

    html += `</div>`;
    app.innerHTML = html;
}

// =========================================
// ACCIONES DE TAREA (vía API)
// =========================================
async function adjTask(boardItemId, ck, delta){
    try {
        const res = await apiPost(ROUTES.progress, {board_item_id: boardItemId, delta});
        // Actualizar estado local
        await refreshState();
        if(res.column === 'done') fire();
        renderBoard(ck);
    } catch(e){
        console.error(e);
        alert('Error al actualizar progreso');
    }
}

async function completeBienestar(boardItemId, ck){
    try {
        await apiPost(ROUTES.move, {board_item_id: boardItemId, target_column: 'done'});
        await refreshState();
        fire({particleCount:150, spread:80, colors:['#EF9F27','#D85A30','#534AB7']});
        renderBoard(ck);
    } catch(e){
        console.error(e);
        alert('Error al marcar como hecho');
    }
}

async function removeTask(taskId, ck){
    if(!confirm('¿Eliminar esta tarea? El progreso se perderá.')) return;
    try {
        const url = ROUTES.removeTask.replace(':id', taskId);
        await apiPost(url, {}, 'DELETE');
        await refreshState();
        renderBoard(ck);
    } catch(e){
        console.error(e);
        alert('Error al eliminar la tarea');
    }
}

// =========================================
// AGREGAR TAREA CUSTOM
// =========================================
function showAddTask(ck){
    const m = CAT_META[ck], c = cc(ck);
    const ov = document.getElementById('addtask-overlay');
    const ct = document.getElementById('addtask-content');
    ct.innerHTML = `
        <h3 class="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2"><span class="${c.text}">${m.icon}</span>Agregar actividad a ${m.name}</h3>
        <div class="mb-3">
            <label class="block text-xs font-semibold text-slate-600 mb-1">Nombre de la actividad</label>
            <input id="at-label" type="text" class="w-full p-2.5 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-brand-500 outline-none" placeholder="Ej: Llamadas de cierre">
        </div>
        <div class="grid grid-cols-2 gap-3 mb-3">
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1">Meta (cantidad)</label>
                <input id="at-target" type="number" value="5" min="1" class="w-full p-2.5 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-brand-500 outline-none">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1">Frecuencia</label>
                <select id="at-freq" class="w-full p-2.5 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-brand-500 outline-none">
                    <option value="diario">Diario</option>
                    <option value="semanal">Semanal</option>
                    <option value="quincenal">Quincenal</option>
                    <option value="mensual">Mensual</option>
                </select>
            </div>
        </div>
        <div class="flex gap-2 mt-4">
            <button onclick="closeAddTask()" class="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-600 font-semibold py-2.5 rounded-lg text-sm transition">Cancelar</button>
            <button onclick="saveAddTask('${ck}')" class="flex-1 bg-brand-500 hover:bg-brand-600 text-white font-bold py-2.5 rounded-lg text-sm transition">Agregar</button>
        </div>
    `;
    ov.classList.remove('hidden');
}

function closeAddTask(){
    document.getElementById('addtask-overlay').classList.add('hidden');
}

async function saveAddTask(ck){
    const label = document.getElementById('at-label').value.trim();
    const target = parseInt(document.getElementById('at-target').value) || 1;
    const freq = document.getElementById('at-freq').value;
    if(!label){ alert('Escribe un nombre para la actividad'); return; }

    try {
        await apiPost(ROUTES.addTask, {category: ck, label, target, freq});
        await refreshState();
        closeAddTask();
        renderBoard(ck);
    } catch(e){
        console.error(e);
        alert('Error al agregar la tarea');
    }
}

// =========================================
// EDITAR TAREA
// =========================================
function showEditTask(taskId, ck){
    // Buscar la tarea en cualquiera de las 3 columnas del tablero
    const board = state.board[ck] || {};
    let task = null;
    ['todo','done','missed'].forEach(col => {
        const found = (board[col] || []).find(t => t.task_id === taskId);
        if(found) task = found;
    });
    if(!task){ alert('No se encontró la tarea a editar'); return; }

    const m = CAT_META[ck], c = cc(ck);
    const ov = document.getElementById('addtask-overlay');
    const ct = document.getElementById('addtask-content');

    // Escapamos comillas dobles del label para que no rompan el atributo value=""
    const safeLabel = String(task.label).replace(/"/g, '&quot;');

    ct.innerHTML = `
        <h3 class="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
            <span class="${c.text}">${m.icon}</span>Editar actividad
        </h3>
        <div class="mb-3">
            <label class="block text-xs font-semibold text-slate-600 mb-1">Nombre de la actividad</label>
            <input id="et-label" type="text" value="${safeLabel}"
                class="w-full p-2.5 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-brand-500 outline-none">
        </div>
        <div class="grid grid-cols-2 gap-3 mb-3">
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1">Meta (cantidad)</label>
                <input id="et-target" type="number" value="${task.target}" min="1"
                    class="w-full p-2.5 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-brand-500 outline-none">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1">Frecuencia</label>
                <select id="et-freq" class="w-full p-2.5 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-brand-500 outline-none">
                    ${FREQS.map(f => `<option value="${f}" ${task.freq===f?'selected':''}>${f.charAt(0).toUpperCase()+f.slice(1)}</option>`).join('')}
                </select>
            </div>
        </div>
        <div class="flex gap-2 mt-4">
            <button onclick="closeAddTask()" class="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-600 font-semibold py-2.5 rounded-lg text-sm transition">Cancelar</button>
            <button onclick="saveEditTask(${taskId},'${ck}')" class="flex-1 bg-brand-500 hover:bg-brand-600 text-white font-bold py-2.5 rounded-lg text-sm transition">Guardar cambios</button>
        </div>
    `;
    ov.classList.remove('hidden');
}

async function saveEditTask(taskId, ck){
    const label = document.getElementById('et-label').value.trim();
    const target = parseInt(document.getElementById('et-target').value) || 1;
    const freq = document.getElementById('et-freq').value;
    if(!label){ alert('Escribe un nombre para la actividad'); return; }

    try {
        const url = ROUTES.updateTask.replace(':id', taskId);
        await apiPost(url, {label, target, freq}, 'PUT');
        await refreshState();
        closeAddTask();
        renderBoard(ck);
    } catch(e){
        console.error(e);
        alert('Error al editar la tarea');
    }
}

// =========================================
// DRAG & DROP
// =========================================
function onDragStart(e){
    e.target.classList.add('dragging');
    dragData = {
        cat: e.target.dataset.cat,
        col: e.target.dataset.col,
        idx: parseInt(e.target.dataset.idx),
        boardItemId: parseInt(e.target.dataset.boardItemId)
    };
    e.dataTransfer.effectAllowed = 'move';
}
function onDragEnd(e){ e.target.classList.remove('dragging'); }
function onDragOver(e){ e.preventDefault(); e.currentTarget.classList.add('drag-over'); }
function onDragLeave(e){ e.currentTarget.classList.remove('drag-over'); }

async function onDrop(e){
    e.preventDefault();
    e.currentTarget.classList.remove('drag-over');
    if(!dragData) return;
    const tCol = e.currentTarget.dataset.col;
    const tCat = e.currentTarget.dataset.cat;
    if(dragData.cat !== tCat || dragData.col === tCol){ dragData = null; return; }

    try {
        await apiPost(ROUTES.move, {board_item_id: dragData.boardItemId, target_column: tCol});
        await refreshState();
        if(tCol === 'done') fire();
        renderBoard(tCat);
    } catch(err){
        console.error(err);
        alert('Error al mover la tarea');
    }
    dragData = null;
}

// =========================================
// ONBOARDING
// =========================================
function showOnboarding(){
    // Pre-llenar con valores actuales si ya está onboardeado
    if(state && state.config && state.config.onboarded){
        obD.years = state.config.vision_years || 2;
        obD.income = parseFloat(state.config.vision_income) || 0;
        obD.bienestar.sport = state.config.sport || 'Caminar';
        obD.contenido.networks = state.config.networks || ['Instagram'];

        // Pre-llenar targets desde las tasks existentes
        const tasksByCat = {};
        (state.tasks || []).forEach(t => {
            if(!tasksByCat[t.category]) tasksByCat[t.category] = [];
            tasksByCat[t.category].push(t);
        });
        const findTask = (cat, label) => (tasksByCat[cat]||[]).find(t => t.label === label);

        const tr = (label, cat='red') => findTask(cat,label)?.target;
        const fr = (label, cat='red') => findTask(cat,label)?.freq;
        if(tr('Nuevos afiliados'))     { obD.red.afiliados      = tr('Nuevos afiliados');     obD.red.f.afiliados      = fr('Nuevos afiliados'); }
        if(tr('Personas a conocer'))   { obD.red.conocer        = tr('Personas a conocer');   obD.red.f.conocer        = fr('Personas a conocer'); }
        if(tr('Seguimientos'))         { obD.red.seguimientos   = tr('Seguimientos');         obD.red.f.seguimientos   = fr('Seguimientos'); }
        if(tr('Presentaciones'))       { obD.red.presentaciones = tr('Presentaciones');       obD.red.f.presentaciones = fr('Presentaciones'); }
        if(tr('Ventas nuevas','ventas'))      { obD.ventas.nuevas    = tr('Ventas nuevas','ventas');    obD.ventas.f.nuevas    = fr('Ventas nuevas','ventas'); }
        if(tr('Clientes a reactivar','ventas')){ obD.ventas.reactivar = tr('Clientes a reactivar','ventas'); obD.ventas.f.reactivar = fr('Clientes a reactivar','ventas'); }
        if(tr('Posts / Reels','contenido')){ obD.contenido.posts = tr('Posts / Reels','contenido'); obD.contenido.freq = fr('Posts / Reels','contenido'); }
        const lec = (tasksByCat.lectura||[])[0];
        if(lec){ obD.lectura.capitulos = lec.target; obD.lectura.freq = lec.freq; }
    }
    obStep = 0;
    renderOb();
    document.getElementById('ob-overlay').classList.remove('hidden');
}

function renderOb(){
    const ct = document.getElementById('ob-content');
    const dots = '<div class="flex gap-1.5 justify-center mb-5">' + [0,1,2,3,4,5].map(i =>
        `<div class="h-1.5 rounded-full transition-all ${i===obStep?'w-6 bg-brand-500':i<obStep?'w-3 bg-mint-500':'w-3 bg-slate-200'}"></div>`
    ).join('') + '</div>';
    const steps = [obVision, obRed, obVentas, obContenido, obLectura, obBienestar];
    ct.innerHTML = dots + steps[obStep]();
}

// Renderiza CTA motivacional desde state.ctas (editables desde admin)
function obCTA(key){
    const c = state?.ctas?.[key];
    if(!c) return '';
    const icono = c.icono || '✨';
    const titulo = c.titulo || '';
    const texto = c.texto || '';
    return `<div class="bg-gradient-to-br from-brand-50 to-ocean-50 border border-brand-100 rounded-xl p-3 mb-4 flex items-start gap-2.5">
        <span class="text-xl shrink-0">${icono}</span>
        <div class="flex-1">
            <div class="text-xs font-extrabold text-brand-600">${titulo}</div>
            <p class="text-[11px] text-slate-600 leading-relaxed mt-0.5">${texto}</p>
        </div>
    </div>`;
}

function obVision(){
    return `<div class="text-center mb-4"><div class="w-14 h-14 bg-brand-50 text-brand-500 rounded-full flex items-center justify-center text-2xl mx-auto mb-3">🎯</div><h2 class="text-xl font-extrabold">Tu Visión Financiera</h2><p class="text-slate-500 text-sm">Todo gran imperio empieza con un objetivo claro.</p></div>
    ${obCTA('vision')}
    <label class="block text-xs font-bold text-slate-600 mb-1">¿En cuánto tiempo?</label>
    <div class="grid grid-cols-5 gap-1.5 sm:gap-2 mb-4">${[1,2,3,4,5].map(y => `<button onclick="obD.years=${y};renderOb()" class="py-3 px-1 rounded-xl border-2 font-bold text-xs sm:text-sm transition leading-tight ${obD.years===y?'border-brand-500 bg-brand-50 text-brand-600':'border-slate-200 text-slate-500 hover:border-brand-500'}">${y} año${y>1?'s':''}</button>`).join('')}</div>
    <label class="block text-xs font-bold text-slate-600 mb-1">Ingreso mensual meta ($)</label>
    <input type="number" value="${obD.income}" onchange="obD.income=parseFloat(this.value)||0" class="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-brand-500 outline-none mb-4">
    <div class="flex gap-2">${state.config.onboarded?'<button onclick="closeOb()" class="flex-1 bg-slate-100 text-slate-500 font-semibold py-3 rounded-xl text-sm">Cancelar</button>':''}<button onclick="obStep=1;renderOb()" class="flex-1 bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 rounded-xl text-sm transition">Siguiente <i class="fa-solid fa-arrow-right ml-1"></i></button></div>`;
}

function obRed(){
    const fields = [
        {k:'afiliados',l:'Nuevos afiliados',i:'👥'},
        {k:'conocer',l:'Personas a conocer',i:'🤝'},
        {k:'seguimientos',l:'Seguimientos',i:'📞'},
        {k:'presentaciones',l:'Presentaciones',i:'🎤'}
    ];
    let h = `<div class="text-center mb-4"><div class="w-14 h-14 bg-brand-50 rounded-full flex items-center justify-center text-2xl mx-auto mb-3">🤝</div><h2 class="text-xl font-extrabold">Red y Afiliados</h2><p class="text-slate-500 text-sm">Actividades clave para crecer tu red.</p></div>${obCTA('red')}`;
    fields.forEach(f => {
        h += `<div class="flex items-center gap-2 mb-2 bg-slate-50 rounded-lg p-3"><span class="text-lg">${f.i}</span><span class="flex-1 text-sm font-semibold text-slate-700">${f.l}</span><input type="number" value="${obD.red[f.k]}" onchange="obD.red['${f.k}']=parseInt(this.value)||0" class="w-16 p-2 border border-slate-200 rounded-lg text-sm text-center focus:ring-2 focus:ring-brand-500 outline-none"></div>
        <div class="flex flex-wrap gap-1.5 justify-end mb-3">${FREQS.map(fr => `<button onclick="obD.red.f['${f.k}']='${fr}';renderOb()" class="px-3 py-1 rounded-full text-[10px] font-bold border transition ${obD.red.f[f.k]===fr?'border-brand-500 bg-brand-50 text-brand-600':'border-slate-200 text-slate-400 hover:border-brand-500'}">${fr}</button>`).join('')}</div>`;
    });
    h += `<div class="flex gap-2 mt-4"><button onclick="obStep=0;renderOb()" class="flex-1 bg-slate-100 text-slate-500 font-semibold py-3 rounded-xl text-sm">Atrás</button><button onclick="obStep=2;renderOb()" class="flex-1 bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 rounded-xl text-sm transition">Siguiente <i class="fa-solid fa-arrow-right ml-1"></i></button></div>`;
    return h;
}

function obVentas(){
    const fields = [{k:'nuevas',l:'Ventas nuevas',i:'💵'},{k:'reactivar',l:'Clientes a reactivar',i:'🔄'}];
    let h = `<div class="text-center mb-4"><div class="w-14 h-14 bg-mint-50 rounded-full flex items-center justify-center text-2xl mx-auto mb-3">💰</div><h2 class="text-xl font-extrabold">Ventas</h2><p class="text-slate-500 text-sm">Define tus metas comerciales.</p></div>${obCTA('ventas')}`;
    fields.forEach(f => {
        h += `<div class="flex items-center gap-2 mb-2 bg-slate-50 rounded-lg p-3"><span class="text-lg">${f.i}</span><span class="flex-1 text-sm font-semibold text-slate-700">${f.l}</span><input type="number" value="${obD.ventas[f.k]}" onchange="obD.ventas['${f.k}']=parseInt(this.value)||0" class="w-16 p-2 border border-slate-200 rounded-lg text-sm text-center focus:ring-2 focus:ring-mint-500 outline-none"></div>
        <div class="flex flex-wrap gap-1.5 justify-end mb-3">${FREQS.map(fr => `<button onclick="obD.ventas.f['${f.k}']='${fr}';renderOb()" class="px-3 py-1 rounded-full text-[10px] font-bold border transition ${obD.ventas.f[f.k]===fr?'border-mint-500 bg-mint-50 text-mint-600':'border-slate-200 text-slate-400 hover:border-mint-500'}">${fr}</button>`).join('')}</div>`;
    });
    h += `<div class="flex gap-2 mt-4"><button onclick="obStep=1;renderOb()" class="flex-1 bg-slate-100 text-slate-500 font-semibold py-3 rounded-xl text-sm">Atrás</button><button onclick="obStep=3;renderOb()" class="flex-1 bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 rounded-xl text-sm transition">Siguiente <i class="fa-solid fa-arrow-right ml-1"></i></button></div>`;
    return h;
}

function obContenido(){
    let h = `<div class="text-center mb-4"><div class="w-14 h-14 bg-fire-50 rounded-full flex items-center justify-center text-2xl mx-auto mb-3">📱</div><h2 class="text-xl font-extrabold">Contenido y Redes</h2><p class="text-slate-500 text-sm">Tu presencia digital atrae prospectos 24/7.</p></div>
    ${obCTA('contenido')}
    <label class="block text-xs font-bold text-slate-600 mb-2">¿Qué redes sociales usas?</label>
    <div class="flex flex-wrap gap-2 mb-4">${NETWORKS.map(n => `<button onclick="toggleNet('${n}')" class="px-4 py-2 rounded-full text-xs font-bold border-2 transition ${obD.contenido.networks.includes(n)?'border-fire-500 bg-fire-50 text-fire-600':'border-slate-200 text-slate-400 hover:border-fire-500'}">${n}</button>`).join('')}</div>
    <div class="flex items-center gap-2 mb-2 bg-slate-50 rounded-lg p-3"><span class="text-lg">📸</span><span class="flex-1 text-sm font-semibold text-slate-700">Posts / Reels a publicar</span><input type="number" value="${obD.contenido.posts}" onchange="obD.contenido.posts=parseInt(this.value)||0" class="w-16 p-2 border border-slate-200 rounded-lg text-sm text-center focus:ring-2 focus:ring-fire-500 outline-none"></div>
    <div class="flex flex-wrap gap-1.5 justify-end mb-3">${FREQS.map(fr => `<button onclick="obD.contenido.freq='${fr}';renderOb()" class="px-3 py-1 rounded-full text-[10px] font-bold border transition ${obD.contenido.freq===fr?'border-fire-500 bg-fire-50 text-fire-600':'border-slate-200 text-slate-400 hover:border-fire-500'}">${fr}</button>`).join('')}</div>
    <div class="flex gap-2 mt-4"><button onclick="obStep=2;renderOb()" class="flex-1 bg-slate-100 text-slate-500 font-semibold py-3 rounded-xl text-sm">Atrás</button><button onclick="obStep=4;renderOb()" class="flex-1 bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 rounded-xl text-sm transition">Siguiente <i class="fa-solid fa-arrow-right ml-1"></i></button></div>`;
    return h;
}

function toggleNet(n){
    const i = obD.contenido.networks.indexOf(n);
    if(i > -1) obD.contenido.networks.splice(i, 1);
    else obD.contenido.networks.push(n);
    renderOb();
}

function obLectura(){
    return `<div class="text-center mb-4"><div class="w-14 h-14 bg-ocean-50 rounded-full flex items-center justify-center text-2xl mx-auto mb-3">📖</div><h2 class="text-xl font-extrabold">Crecimiento Personal</h2><p class="text-slate-500 text-sm">La lectura es combustible para tu mente de líder.</p></div>
    ${obCTA('lectura')}
    <div class="flex items-center gap-2 mb-2 bg-slate-50 rounded-lg p-3"><span class="text-lg">📚</span><span class="flex-1 text-sm font-semibold text-slate-700">Artículos / capítulos a leer</span><input type="number" value="${obD.lectura.capitulos}" onchange="obD.lectura.capitulos=parseInt(this.value)||0" class="w-16 p-2 border border-slate-200 rounded-lg text-sm text-center focus:ring-2 focus:ring-ocean-500 outline-none"></div>
    <div class="flex flex-wrap gap-1.5 justify-end mb-3">${FREQS.map(fr => `<button onclick="obD.lectura.freq='${fr}';renderOb()" class="px-3 py-1 rounded-full text-[10px] font-bold border transition ${obD.lectura.freq===fr?'border-ocean-500 bg-ocean-50 text-ocean-600':'border-slate-200 text-slate-400 hover:border-ocean-500'}">${fr}</button>`).join('')}</div>
    <div class="flex gap-2 mt-4"><button onclick="obStep=3;renderOb()" class="flex-1 bg-slate-100 text-slate-500 font-semibold py-3 rounded-xl text-sm">Atrás</button><button onclick="obStep=5;renderOb()" class="flex-1 bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 rounded-xl text-sm transition">Siguiente <i class="fa-solid fa-arrow-right ml-1"></i></button></div>`;
}

function obBienestar(){
    return `<div class="text-center mb-4"><div class="w-14 h-14 bg-amber-50 rounded-full flex items-center justify-center text-2xl mx-auto mb-3">🏃</div><h2 class="text-xl font-extrabold">Bienestar Físico</h2><p class="text-slate-500 text-sm">Mente clara, negocio claro. 30 minutos al día.</p></div>
    ${obCTA('bienestar')}
    <label class="block text-xs font-bold text-slate-600 mb-2">¿Qué actividad te motiva más?</label>
    <div class="grid grid-cols-3 sm:grid-cols-4 gap-2 mb-5">${SPORTS.map(s => `<button onclick="obD.bienestar.sport='${s.id}';renderOb()" class="py-3 px-2 rounded-xl border-2 text-center transition ${obD.bienestar.sport===s.id?'border-amber-500 bg-amber-50':'border-slate-200 hover:border-amber-500'}"><div class="text-xl">${s.icon}</div><div class="text-[11px] font-semibold text-slate-600 mt-1">${s.id}</div></button>`).join('')}</div>
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-5 text-sm text-amber-700"><strong>Meta fija:</strong> 30 minutos de ${obD.bienestar.sport} al día · Sistema de racha 🔥</div>
    <div class="flex gap-2"><button onclick="obStep=4;renderOb()" class="flex-1 bg-slate-100 text-slate-500 font-semibold py-3 rounded-xl text-sm">Atrás</button><button onclick="finishOb()" class="flex-1 bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 rounded-xl text-sm transition">🚀 ¡Comenzar!</button></div>`;
}

function closeOb(){
    document.getElementById('ob-overlay').classList.add('hidden');
}

async function finishOb(){
    const payload = {
        vision: {years: obD.years, income: obD.income},
        red: {
            afiliados: obD.red.afiliados, conocer: obD.red.conocer,
            seguimientos: obD.red.seguimientos, presentaciones: obD.red.presentaciones,
            f: obD.red.f
        },
        ventas: {
            nuevas: obD.ventas.nuevas, reactivar: obD.ventas.reactivar,
            f: obD.ventas.f
        },
        contenido: {
            networks: obD.contenido.networks,
            posts: obD.contenido.posts,
            freq: obD.contenido.freq
        },
        lectura: {
            capitulos: obD.lectura.capitulos,
            freq: obD.lectura.freq
        },
        bienestar: {sport: obD.bienestar.sport}
    };

    try {
        await apiPost(ROUTES.saveConfig, payload);
        await refreshState();
        closeOb();
        render();
        fire({particleCount:200, spread:100});
    } catch(e){
        console.error(e);
        alert('Error al guardar el onboarding. Por favor intenta de nuevo.');
    }
}

// =========================================
// PODCASTS
// =========================================
async function renderPodcasts(catInicial){
    if(catInicial && CAT_META[catInicial]) podcastFiltro = catInicial;
    const app = document.getElementById('app');

    // Cargar podcasts si aún no se han cargado
    if(!state.podcasts){
        app.innerHTML = `<div class="text-center py-20"><div class="inline-block animate-spin h-10 w-10 border-4 border-fire-500 border-t-transparent rounded-full"></div><p class="text-slate-500 mt-4">Cargando podcasts...</p></div>`;
        try {
            state.podcasts = await apiGet(ROUTES.podcasts);
        } catch(e){
            console.error(e);
            app.innerHTML = `<div class="text-center py-10 text-danger-500">Error al cargar los podcasts.</div>`;
            return;
        }
    }

    const all = state.podcasts || [];
    const episodios = podcastFiltro === 'todos'
        ? all
        : all.filter(p => (p.categorias || []).includes(podcastFiltro));

    let html = `<div class="fade-in">`;

    // Header
    html += `<div class="flex flex-wrap items-center justify-between gap-2 mb-5">
    <div class="flex items-center gap-2 min-w-0 flex-1">
        <button onclick="render()" class="bg-white border border-slate-200 text-slate-500 hover:text-brand-500 hover:border-brand-500 px-3 py-2 rounded-lg font-semibold transition text-sm shrink-0">
            <i class="fa-solid fa-arrow-left"></i><span class="hidden sm:inline ml-1">Volver</span>
        </button>
        <h2 class="text-base sm:text-xl font-extrabold flex items-center gap-2 min-w-0">
            <span class="text-fire-500 shrink-0"><i class="fa-solid fa-podcast"></i></span>
            <span class="truncate">Biblioteca de Podcasts</span>
        </h2>
    </div>
    <span class="text-xs font-bold text-slate-500 bg-white border border-slate-200 px-3 py-1.5 rounded-full shrink-0 whitespace-nowrap">
        ${episodios.length} ${episodios.length===1?'episodio':'episodios'}
    </span>
</div>`;

    // Intro
    html += `<div class="bg-gradient-to-r from-fire-50 to-amber-50 border border-fire-100 rounded-xl p-4 mb-5">
        <p class="text-sm text-slate-700">
            <i class="fa-solid fa-headphones text-fire-500 mr-1"></i>
            Escucha episodios curados según el área que quieras desarrollar. Selecciona una categoría para filtrar.
        </p>
    </div>`;

    // Filtros
    html += `<div class="bg-white rounded-xl border border-slate-200 p-3 mb-5 shadow-sm">
        <div class="flex flex-wrap gap-2">`;
    const activoTodos = podcastFiltro === 'todos';
    html += `<button onclick="filtrarPodcasts('todos')"
        class="px-3 py-1.5 rounded-lg text-xs font-bold transition ${activoTodos?'bg-slate-800 text-white shadow-sm':'bg-slate-100 text-slate-600 hover:bg-slate-200'}">
        Todos <span class="opacity-60 ml-1">(${all.length})</span>
    </button>`;

    Object.keys(CAT_META).forEach(ck => {
        const m = CAT_META[ck], c = cc(ck);
        const count = all.filter(p => (p.categorias||[]).includes(ck)).length;
        const activo = podcastFiltro === ck;
        html += `<button onclick="filtrarPodcasts('${ck}')"
            class="px-3 py-1.5 rounded-lg text-xs font-bold transition ${activo?`${c.fill} text-white shadow-sm`:`${c.bg} ${c.text} hover:opacity-80`}">
            ${m.icon} ${m.name} <span class="opacity-60 ml-1">(${count})</span>
        </button>`;
    });
    html += `</div></div>`;

    // Grid
    if(episodios.length === 0){
        html += `<div class="bg-white rounded-xl border border-dashed border-slate-300 p-10 text-center">
            <div class="text-4xl mb-3">🎧</div>
            <p class="text-slate-500 text-sm">No hay episodios en esta categoría todavía.</p>
            <button onclick="filtrarPodcasts('todos')" class="mt-3 text-brand-500 hover:text-brand-600 text-xs font-bold">
                Ver todos los episodios
            </button>
        </div>`;
    } else {
        html += `<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">`;
        episodios.forEach(ep => {
            const tagsHtml = (ep.categorias || []).map(ck => {
                const m = CAT_META[ck]; if(!m) return '';
                const c = cc(ck);
                return `<span class="${c.bg} ${c.text} text-[10px] font-bold px-2 py-0.5 rounded-full whitespace-nowrap">${m.icon} ${m.name}</span>`;
            }).join('');

            html += `<div class="bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition overflow-hidden">
                <div class="p-3 border-b border-slate-100">
                    <div class="flex flex-wrap gap-1 mb-2">${tagsHtml}</div>
                    <h4 class="font-bold text-slate-800 text-sm leading-snug">${ep.titulo}</h4>
                    ${ep.duracion?`<p class="text-[11px] text-slate-400 mt-1"><i class="fa-regular fa-clock mr-1"></i>${ep.duracion}</p>`:''}
                </div>
                <div class="p-2">
                    <iframe
                        data-testid="embed-iframe"
                        style="border-radius:12px"
                        src="https://open.spotify.com/embed/episode/${ep.spotify_id}?utm_source=generator"
                        width="100%"
                        height="232"
                        frameBorder="0"
                        allowfullscreen=""
                        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                        loading="lazy"></iframe>
                </div>
            </div>`;
        });
        html += `</div>`;
    }

    html += `</div>`;
    app.innerHTML = html;
}

function filtrarPodcasts(cat){
    podcastFiltro = cat;
    renderPodcasts();
}

// =========================================
// REFRESH STATE — re-pide al servidor el estado completo
// =========================================
async function refreshState(){
    try {
        const data = await apiGet(ROUTES.config);
        state.config   = data.config;
        state.tasks    = data.tasks;
        state.board    = data.board;
        state.history  = data.history;
        state.quotes   = data.quotes;
        state.ctas     = data.ctas;
        // podcasts se mantienen cargados; no se refrescan en cada acción
    } catch(e){ console.error('refreshState falló', e); }
}

// =========================================
// INIT — Carga inicial desde servidor
// =========================================
async function init(){
    try {
        const data = await apiGet(ROUTES.config);
        state = {
            config: data.config,
            tasks: data.tasks,
            board: data.board,
            history: data.history,
            quotes: data.quotes,
            ctas: data.ctas,
            podcasts: null
        };

        if(!state.config.onboarded){
            showOnboarding();
            return;
        }

        // Si la URL trae ?view=podcasts, abre directo la biblioteca de podcasts
        const urlParams = new URLSearchParams(window.location.search);
        const view = urlParams.get('view');

        if (view === 'podcasts') {
            renderPodcasts();
        } else {
            render();
        }

    } catch(e){
        document.getElementById('app').innerHTML = `<div class="text-center py-20 text-danger-500">Error cargando el tablero. Por favor recarga la página.<br><small class="text-slate-400">${e.message||''}</small></div>`;
        console.error(e);
    }
}

// Boot
init();
</script>
@endpush