{label}

</div>
);

const SuccessArtifactView = ({ title, desc, children }) => (
    <div className="fade-in card-app-light p-6 md:p-8 relative overflow-hidden text-left">
        <div className="absolute top-0 left-0 w-full h-3 bg-emerald-500"></div>
        <div className="flex items-center gap-4 mb-6 border-b-4 border-slate-100 pb-4">
            <div className="p-4 bg-emerald-100 text-emerald-600 rounded-2xl"><IconFile /></div>
            <div>
                <h4 className="text-2xl font-black uppercase tracking-tight text-slate-800">Artefacto Oficial PM²</h4>
                <p className="text-slate-500 font-bold text-sm">{title} - {desc}</p>
            </div>
        </div>
        {children}
        <div className="mt-8 text-center">
            <span className="text-xs font-black uppercase tracking-widest text-emerald-700 bg-emerald-100 border-2 border-emerald-200 px-6 py-3 rounded-full inline-block shadow-sm">✓ Análisis Validado y Guardado</span>
        </div>
    </div>
);

// --- VISTAS DE FLUJO (Extraídas fuera de la app principal) ---
const StepRegistro = ({ user, setUser, nextStep }) => (
    <div className="bounce-in max-w-md w-full mx-auto card-app p-10 text-center">
        <div className="bg-yellow-400 w-20 h-20 rounded-3xl flex items-center justify-center mx-auto mb-6 shadow-[0_4px_0_0_#ca8a04] rotate-3 text-slate-900"><IconFilm /></div>
        <h1 className="text-4xl font-black text-white mb-2 uppercase">¡Bienvenido!</h1>
        <p className="text-slate-400 mb-8 font-bold">Inicia tu aventura cinematográfica PM²</p>
        <input 
            type="text" placeholder="¿Tu nombre?" 
            value={user.nombre} onChange={(e) => setUser({...user, nombre: e.target.value})}
            className="w-full bg-slate-800 border-4 border-slate-600 rounded-2xl px-5 py-4 text-white text-xl font-bold mb-6 text-center focus:border-yellow-400 focus:outline-none"
        />
        <button onClick={nextStep} disabled={!user.nombre} className="btn-app w-full py-4 text-xl">Siguiente</button>
    </div>
);

const StepEstudio = ({ user, openInfo }) => {
    const [active, setActive] = useState(null);
    const [comp, setComp] = useState([]);
    const [formData, setFormData] = useState({});

useEffect(() => {
        if (active && !comp.includes(active)) {
            openInfo(active);
        }
    }, [active]);

const updateField = (node, field, val) => {
        setFormData(prev => ({ ...prev, [node]: { ...(prev[node] || {}), [field]: val } }));
    };

const finish = (id) => { if(!comp.includes(id)) setComp([...comp, id]); setActive(null); };

return (
        <div className="fade-in w-full max-w-6xl mx-auto pb-10">
            <div className="text-center mb-10">
                <span className="bg-rose-500 px-4 py-1.5 rounded-full text-[10px] font-black uppercase shadow-lg">Estudio de Producción</span>
                <h2 className="text-4xl md:text-5xl font-black text-white mt-4 uppercase">{user.pelicula?.titulo}</h2>
            </div>

<div className="card-app p-6 md:p-10 mb-10 overflow-x-auto custom-scrollbar flex justify-start items-center gap-6 min-w-max relative" style={{scrollSnapType: 'x mandatory'}}>
                <div className="absolute top-1/2 left-10 right-10 h-3 bg-slate-800 -translate-y-1/2 rounded-full z-0"></div>
                {roadmap.map((n, i) => (
                    <div key={n.id} className="relative z-10 flex flex-col items-center" style={{scrollSnapAlign: 'center'}}>
                        <button 
                            onClick={() => setActive(n.id)}
                            className={`w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center text-2xl md:text-3xl border-4 transition-all flex-shrink-0
                                ${active === n.id ? 'bg-sky-400 border-white scale-110 md:scale-125' : 
                                comp.includes(n.id) ? 'bg-emerald-400 border-emerald-200' : 'bg-slate-700 border-slate-600'}`}
                        >{comp.includes(n.id) ? <IconCheck/> : n.icon}</button>
                        <p className="mt-4 text-[9px] md:text-[10px] font-black uppercase text-slate-400 w-20 md:w-24 text-center leading-tight">{n.t}</p>
                    </div>
                ))}
            </div>

{active && (
                <div className="card-app p-6 md:p-10 border-t-8 border-sky-400 bounce-in">
                    <div className="flex justify-between items-start mb-8 md:mb-10">
                        <div className="flex items-center gap-3">
                            <h3 className="text-2xl md:text-3xl font-black uppercase text-white leading-tight">{roadmap.find(n => n.id === active)?.t}</h3>
                            <button onClick={() => openInfo(active)} className="w-8 h-8 rounded-full bg-slate-700 hover:bg-sky-400 transition-colors flex items-center justify-center flex-shrink-0"><IconInfo/></button>
                        </div>
                        <button onClick={() => setActive(null)} className="text-4xl text-slate-500 hover:text-white leading-none">×</button>
                    </div>

{comp.includes(active) ? (
                        <SuccessArtifactView title="Análisis PM² Validado" desc={roadmap.find(n => n.id === active)?.t}>
                            <div className="space-y-4">
                                <div className="grid gap-3">
                                    {Object.entries(formData[active] || {}).map(([k, v]) => (
                                        <div key={k} className="bg-slate-50 p-4 rounded-xl border-2 border-slate-200">
                                            <span className="text-[10px] uppercase font-black text-slate-400 block mb-1">{k}</span>
                                            <p className="font-bold text-slate-800 text-sm md:text-base">{v || 'Sin datos registrados.'}</p>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </SuccessArtifactView>
                    ) : renderCustomModule()}
                </div>
            )}
        </div>
    );
};

// --- COMPONENTE PRINCIPAL ---
window.UscTfmTool = function({ theme, navigate }) {
    useEffect(() => {
        const styleId = "pm2-cinehash-styles";
        if (!document.getElementById(styleId)) {
            const styleNode = document.createElement("style");
            styleNode.id = styleId;
            styleNode.innerHTML = `
                @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&family=Bebas+Neue&family=Courier+Prime:wght@400;700&display=swap');
                
                .tfm-container { font-family: 'Nunito', sans-serif; }
                .tfm-container .fade-in { animation: tfmFadeIn 0.4s ease-out forwards; }
                .tfm-container .slide-in-right { animation: tfmSlideInRight 0.3s ease-out forwards; }
                .tfm-container .bounce-in { animation: tfmBounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }
                
                @keyframes tfmFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
                @keyframes tfmSlideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
                @keyframes tfmBounceIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.tfm-container .card-app { background: #1e293b; border-radius: 28px; border: 4px solid #334155; box-shadow: 0 8px 0 0 #0f172a; }
                .tfm-container .card-app-light { background: #ffffff; border-radius: 28px; border: 4px solid #cbd5e1; box-shadow: 0 8px 0 0 #94a3b8; color: #0f172a; }
                .tfm-container .btn-app {
                    background: #facc15; color: #0f172a; font-weight: 900; border-radius: 18px; border: 3px solid #ca8a04; border-bottom-width: 6px; transition: all 0.1s; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 4px 0 0 rgba(0,0,0,0.1);
                }
                .tfm-container .btn-app:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
                .tfm-container .btn-app:active:not(:disabled) { transform: translateY(4px); border-bottom-width: 2px; box-shadow: none; }
                .tfm-container .btn-app:disabled { opacity: 0.5; cursor: not-allowed; }
                .tfm-container .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 10px; }
                .tfm-container .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
                .tfm-container .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; border: 2px solid #1e293b; }
                .tfm-container .custom-checkbox { appearance: none; width: 1.75rem; height: 1.75rem; border: 3px solid #475569; border-radius: 0.5rem; background-color: #1e293b; display: inline-block; position: relative; cursor: pointer; transition: all 0.2s; }
                .tfm-container .custom-checkbox:checked { background-color: #10b981; border-color: #059669; }
                .tfm-container .custom-checkbox:checked::after { content: ''; position: absolute; left: 8px; top: 3px; width: 6px; height: 14px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
                .tfm-container .poster-card { background: #fff; border-radius: 20px; overflow: hidden; border: 4px solid #cbd5e1; box-shadow: 0 10px 0 0 #94a3b8; transition: transform 0.2s; }
                .tfm-container .poster-card:hover { transform: translateY(-5px); }
            `;
            document.head.appendChild(styleNode);
        }
    }, []);

const [step, setStep] = useState(0);
    const [info, setInfo] = useState(null);
    const [user, setUser] = useState({
        nombre: '', avatar: null, modalidad: 'Individual',
        actividadesSeleccionadas: [], equipo: [], pelicula: null
    });

const next = (skip = false) => {
        if(skip) setStep(8); else setStep(s => s + 1);
        window.scrollTo(0,0);
    };

return (
        <div className="tfm-container w-full bg-[#0f172a] text-[#f8fafc] min-h-screen py-10 px-4 md:px-6 rounded-3xl border-4 border-slate-800/50 shadow-2xl overflow-hidden relative">
            <InfoModal isOpen={!!info} data={info} onClose={() => setInfo(null)} />
            
            {/* Header de Progreso Integrado (Sticky) */}
            <div className="sticky top-0 z-50 w-full h-16 bg-slate-900 rounded-2xl border-b-4 border-slate-800 flex items-center justify-between px-4 md:px-8 mb-10 shadow-lg">
                <div className="flex items-center gap-2 md:gap-3 font-black text-lg md:text-xl text-white uppercase tracking-tighter">
                    <IconCamera/>
                    <span className="text-yellow-400 hidden sm:inline">Cine-Hash</span>
                </div>
                <div className="flex gap-1 md:gap-2">
                    {[0,1,2,3,4,5,6,7,8,9].map(i => (
                        <div key={i} className={`h-2 md:h-2.5 w-4 md:w-6 rounded-full transition-all ${i===step?'bg-yellow-400 w-8 md:w-10':'bg-slate-700'}`}></div>
                    ))}
                </div>
            </div>

{/* Router Interno usando los subcomponentes extraídos */}
            {step === 0 && <StepRegistro user={user} setUser={setUser} nextStep={() => next()} />}
            {step === 1 && <StepAvatar user={user} setUser={setUser} nextStep={() => next()} />}
            {step === 2 && <SurveySlider title="Perfil Cine" questions={encuestas.cine} onFinish={(a) => {setUser({...user, resCine: a}); next();}} />}
            {step === 3 && <StepExploradorPM2 user={user} setUser={setUser} nextStep={() => next()} />}
            {step === 4 && <StepModalidad user={user} setUser={setUser} nextStep={() => next()} />}
            {step === 5 && <SurveySlider title="Roles PM²" questions={encuestas.pm2} onFinish={(a) => {setUser({...user, resPM2: a}); next();}} />}
            {step === 6 && <StepHashTicket user={user} setUser={setUser} nextStep={(s) => next(s)} />}
            {step === 7 && <StepCasting user={user} setUser={setUser} nextStep={() => next()} />}
            {step === 8 && <StepShortlist user={user} setUser={setUser} nextStep={() => next()} />}
            {step === 9 && <StepEstudio user={user} openInfo={(id) => setInfo(pm2InfoData[id] || {title: 'Módulo PM²', icon: '💡', text: 'Análisis metodológico de la guía PM².'})} />}
        </div>
    );
};

{data.title}