{/* Foto a color — sin filtro de escala de grises */} {showPhoto && (

setImgOk(false)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', }} /> )} {/* Contraste SOLO en la franja superior (zona de las etiquetas), sin oscurecer toda la foto. Garantiza texto blanco legible (WCAG AA) sobre cualquier imagen. */} {showPhoto && (

)} {/* Portada sin foto: textura + nombre de la categoría */} {!showPhoto && (

)} {!showPhoto && (

)} {/* Gradient fallback decorations */} {!showPhoto && ( <>

{m.label} )}

); } // ── Evidence badge ──────────────────────────────────────────────────────────── function AlEvBadge({ level }) { if (!level || !EVIDENCE_LABEL[level]) return null; return ( {EVIDENCE_LABEL[level]} ); } // ── "Nuevo" badge — shown for an article's first 2 weeks ────────────────────── function AlNewBadge({ article }) { const isNew = (typeof ArticlesService !== 'undefined' && ArticlesService.isNew) ? ArticlesService.isNew(article) : false; if (!isNew) return null; return ( Nuevo ); } // Format an ISO publish date as e.g. "10 ene 2026" function alFmtPubDate(iso) { if (!iso) return ''; const t = Date.parse(iso); if (isNaN(t)) return ''; try { return new Date(t).toLocaleDateString('es-ES', { day:'numeric', month:'short', year:'numeric' }); } catch { return ''; } } // ── Category pill ───────────────────────────────────────────────────────────── function AlCatPill({ category }) { const m = ALcat[category] || ALcat.fuerza; return ( {m.label} ); } // ── Hero ────────────────────────────────────────────────────────────────────── function AulaHero({ total, completed, query, onQuery }) { const isMobile = useIsMobile(); return (

Aula Atlas

Entrena con evidencia.

Ciencia aplicada al entrenamiento. Sin dogma, sin ruido.

{/* Search */}

⌕ onQuery(e.target.value)} aria-label="Buscar artículos" placeholder="Buscar artículos…" style={{ padding: isMobile ? '13px 14px 13px 34px' : '10px 14px 10px 34px', borderRadius:12, border:`1px solid ${AL.bord2}`, background:'#FFFFFF', color:AL.navy, fontFamily:'"Inter",system-ui', fontSize: isMobile ? 16 : 13, outline:'none', width: isMobile ? '100%' : 220, boxSizing:'border-box', }} />

{/* Stats */} {completed > 0 && ( ✓ {completed} leído{completed !== 1 ? 's' : ''} · +{completed * 15} 💎 )}

); } // ── Category filter strip ───────────────────────────────────────────────────── // Ordered category keys — single source of truth for the strip and the swipe nav. const AULA_CATS = ['all','hipertrofia','fuerza','nutricion','recuperacion','cognitivo','sueno']; function AlCatStrip({ active, onChange }) { const cats = [['all','Todos'], ...Object.entries(ALcat).filter(([k]) => AULA_CATS.includes(k)).map(([k,v]) => [k,v.label])]; return (

{cats.map(([key, label]) => { const m = ALcat[key]; const act = active === key; return ( ); })}

); } // ── Featured article (horizontal hero card) ─────────────────────────────────── function AulaFeatured({ article, isRead, onOpen }) { const [hov, setHov] = React.useState(false); const isMobile = useIsMobile(); const m = ALcat[article.category] || ALcat.fuerza; return (

onOpen(article.id)} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', borderRadius:24, overflow:'hidden', background:AL.card, border:`1px solid ${AL.border}`, cursor:'pointer', boxShadow: hov ? '0 24px 64px rgba(15,26,46,0.15)' : '0 4px 20px rgba(15,26,46,0.07)', transform: hov ? 'translateY(-4px)' : 'none', transition:'all .3s cubic-bezier(.2,.8,.2,1)', marginBottom: isMobile ? 28 : 56, }} > {/* Left: cover */}

DESTACADO DEL DÍA

{isRead && (

✓ Leído

)}

{/* Right: content */}

{alFmtPubDate(article.publishedAt) && ( {alFmtPubDate(article.publishedAt)} )}

{article.title}

{article.subtitle}

{article.summary}

Ver análisis →

{article.readTime} min {!isRead && +{article.gems} 💎}

); } // ── Feed card ───────────────────────────────────────────────────────────────── function AulaCard({ article, isRead, onOpen, imgIdx }) { const [hov, setHov] = React.useState(false); return (

onOpen(article.id)} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ borderRadius:20, overflow:'hidden', background:AL.card, border:`1px solid ${AL.border}`, cursor:'pointer', boxShadow: hov ? '0 16px 48px rgba(15,26,46,0.12)' : '0 2px 8px rgba(15,26,46,0.05)', transform: hov ? 'translateY(-5px)' : 'none', transition:'all .25s cubic-bezier(.2,.8,.2,1)', }} >

{isRead && (

✓

)}

{article.title}

{article.subtitle}

{alFmtPubDate(article.publishedAt) ? `${alFmtPubDate(article.publishedAt)} · ` : ''}{article.readTime} min {!isRead ? +{article.gems} 💎 : Completado }

); } // ── Section heading ─────────────────────────────────────────────────────────── function AlSectionHead({ label, sublabel }) { return (

{label}

{sublabel && {sublabel}}

); } // ── Micro-learning strip ────────────────────────────────────────────────────── function AulaMicroLearning() { const isMobile = useIsMobile(); const typeColors = { fact: { c:'#1E40AF', bg:'rgba(30,64,175,0.07)' }, myth: { c:'#B45309', bg:'rgba(180,83,9,0.07)' }, tip: { c:'#059669', bg:'rgba(5,150,105,0.07)' }, error: { c:'#be123c', bg:'rgba(190,18,60,0.07)' }, }; return (

{MICRO_TIPS.map((tip, i) => { const tc = typeColors[tip.type] || typeColors.fact; return (

{tip.label.toUpperCase()}

{tip.text}

); })}

); } // ── Science feed ────────────────────────────────────────────────────────────── function AulaScienceFeed() { const isMobile = useIsMobile(); return (

{SCIENCE_NEWS.map((item, i) => (

{item.date}

HALLAZGO

{item.finding}

{item.source}

APLICACIÓN PRÁCTICA

{item.application}

))}

); } // ── Glossary term card ───────────────────────────────────────────────────────── // A readable definition card. `onPickTerm` lets a related-term chip jump to that // entry (also the hook a future article→glossary deep-link would use). function AulaGlossaryCard({ term, onOpenArticle, flash, publishedIds }) { const cat = (typeof GlossaryService !== 'undefined') ? GlossaryService.catFor(term.category) : { label: term.category, c: AL.sub, bg: 'rgba(15,26,46,0.06)' }; const related = (term.related || []) .map(id => (typeof GlossaryService !== 'undefined' ? GlossaryService.getById(id) : null)) .filter(Boolean); // "Leer más en el Aula" solo si el artículo existe y está PUBLICADO. const hasArticle = !!term.articleId && (!publishedIds || publishedIds.has(term.articleId)); return (

{term.term}

{cat.label} {/* Shareable per-term anchor (/aula/glosario#) — copiable y enlazable. */} #

{term.definition}

{(related.length > 0 || hasArticle) && (

{related.length > 0 && ( <> RELACIONADO {related.map(r => ( {r.term} ))} )} {hasArticle && ( )}

)}

); } // ── Glossary section ─────────────────────────────────────────────────────────── // Searchable (accent/typo-tolerant) + category-filterable list of training terms. // Content is placeholder; the trainer supplies the real terms/definitions. function AulaGlossary({ onOpenArticle, jumpTo, publishedIds }) { const isMobile = useIsMobile(); const [q, setQ] = React.useState(''); const [cat, setCat] = React.useState('all'); const [flashId, setFlashId] = React.useState(null); const svc = (typeof GlossaryService !== 'undefined') ? GlossaryService : null; const cats = svc ? svc.categories : []; const results = React.useMemo( () => (svc ? svc.search(q, cat) : []), [q, cat, svc] ); const total = svc ? svc.getAll().length : 0; function scrollToTerm(id, flash) { setTimeout(() => { const el = document.getElementById(`glosario-${id}`); if (el) el.scrollIntoView({ behavior:'smooth', block:'center' }); if (flash) { setFlashId(id); setTimeout(() => setFlashId(f => f === id ? null : f), 1600); } }, 80); } function pickTerm(t) { setQ(''); setCat('all'); scrollToTerm(t.id, false); } // Deep-link from an article term ("Ver en el glosario"): clear filters, scroll // to the entry and flash it so it's easy to spot. React.useEffect(() => { if (!jumpTo || !jumpTo.id) return; setQ(''); setCat('all'); scrollToTerm(jumpTo.id, true); }, [jumpTo]); // eslint-disable-line react-hooks/exhaustive-deps const chip = (active, label, onClick, c) => ( ); return (

{/* Search */}

⌕ setQ(e.target.value)} aria-label="Buscar un término del glosario" placeholder="Buscar un término…" style={{ width:'100%', boxSizing:'border-box', padding: isMobile ? '13px 16px 13px 40px' : '12px 16px 12px 40px', borderRadius:12, border:`1px solid ${AL.bord2}`, background:AL.card, color:AL.navy, fontFamily:'"Inter",system-ui', fontSize: isMobile ? 16 : 14, outline:'none' }} />

{/* Category filter */}

{chip(cat === 'all', 'Todas', () => setCat('all'))} {cats.map(c => chip(cat === c.id, c.label, () => setCat(c.id), c.c))}

{/* Results */} {results.length > 0 ? (

{results.map(t => ( ))}

) : (

{total === 0 ? 'El glosario aún no tiene términos.' : <>Sin resultados para “{q}”. }

)}

); } // ── Explore by topic ────────────────────────────────────────────────────────── function AulaExplore({ onCategory }) { const isMobile = useIsMobile(); return (

{EXPLORE_TOPICS.map(topic => { const m = ALcat[topic.id] || ALcat.fuerza; return ( ); })}

); } // ── Article detail (kept from v1, style polish) ─────────────────────────────── // ── Original SVG diagrams (license-free, drawn here) ────────────────────────── // Referenced by an image block via { type:'image', diagram:'' }. Add more by // dropping another entry here — no reader changes needed. const ARTICLE_DIAGRAMS = { // Same weekly volume (12 sets) split across 1 session vs 3 sessions. 'volumen-1-vs-3': () => ( ), 'progresion-lineal': () => ( ), 'mev-mav-mrv': () => ( ), // ── Flujo: tensión mecánica → hipertrofia (HTML flex: horizontal en escritorio, // vertical en móvil, siempre legible). ──────────────────────────────────── 'tension-cascada': () => { const isMobile = useIsMobile(); const steps = ['Tensión mecánica', 'La fibra lo detecta', 'Señales (vía mTOR)', 'Más síntesis de proteína, ribosomas y núcleos']; const box = (txt, j, result) => (

{txt}

); const arrow = (k) => ( ); const items = []; steps.forEach((s, j) => { items.push(box(s, j, false)); items.push(arrow(j)); }); items.push(box('Hipertrofia', 'r', true)); return (

{items}

); }, // ── Ciclo de doble progresión. ──────────────────────────────────────────────── 'doble-progresion': () => { const isMobile = useIsMobile(); const steps = ['3 × 8', '3 × 10', '3 × 12 (tope del rango)', 'Sube el peso lo mínimo']; const box = (txt, j, hi) => (

{txt}

); const arrow = (k) => (); const items = []; steps.forEach((s, j) => { items.push(box(s, j, j === 3)); if (j < steps.length - 1) items.push(arrow(j)); }); return (

{items}

Mismo peso hasta llegar arriba del rango; entonces, más peso.

); }, // ── Escala de proximidad al fallo (RIR 5 → 0). ──────────────────────────────── 'proximidad-fallo': () => ( ), // ── Descarga entre bloques (timeline de 3 tramos, sin semanas numeradas). ────── 'descarga-bloques': () => ( ), // ── HRV: dato diario irregular + media de 7 días + banda "rango habitual". ───── 'hrv-tendencia': () => ( ), }; // Inline citation superscript(s) → link to the numbered bibliography. function AlCite({ cite, refCount }) { if (cite == null) return null; const nums = (Array.isArray(cite) ? cite : [cite]).filter(n => n >= 1 && n <= refCount); if (!nums.length) return null; return ( ^{{nums.map((n, i) => (

{i > 0 && ,}
{ e.preventDefault(); const el = document.getElementById('ref-' + n); if (el) el.scrollIntoView({ behavior:'smooth', block:'center' }); }}
style={{ color:'#1a4fa0', textDecoration:'none', fontWeight:700 }}>[{n}]

))}} ); } // Renders a scientific reference as a bibliography line. function alFormatRef(r) { if (r.raw && !r.title) return r.raw; const authors = Array.isArray(r.authors) ? r.authors.join(', ') : (r.authors || ''); const bits = []; if (authors) bits.push(authors + (r.year ? ' (' + r.year + ')' : '')); else if (r.year) bits.push('(' + r.year + ')'); if (r.title) bits.push(r.title); if (r.journal) bits.push(r.journal); return bits.join('. ') + '.'; } // ── Article → glossary linking ──────────────────────────────────────────────── // Wires the glossary: the first mention of a known term in the article body // becomes a tappable link to its definition. Only ever operates on plain-string // block text (paragraphs/lead), so article formatting is never touched. let _glossIdx = null; function alGlossIndex() { if (_glossIdx) return _glossIdx; if (typeof GlossaryService === 'undefined') return { re: null, map: new Map() }; const map = new Map(); const surfaces = []; GlossaryService.getAll().forEach(t => { const base = t.term.replace(/\s*$[^)]*$/g, '').trim(); // "RIR (…)" → "RIR" [base, ...(t.aliases || [])].filter(Boolean).forEach(f => { const k = f.toLowerCase(); if (!map.has(k)) { map.set(k, t.id); surfaces.push(f); } }); }); if (!surfaces.length) { _glossIdx = { re: null, map }; return _glossIdx; } surfaces.sort((a, b) => b.length - a.length); // longest first (greedy) const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); let re; try { re = new RegExp('(? { e.stopPropagation(); onOpen(termId); }} onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(termId); } }} style={{ borderBottom:'1px dotted rgba(30,64,175,0.55)', color:'#1a4fa0', cursor:'pointer', fontWeight:600 }} title="Ver en el glosario">{surface} ); } // Returns the text as-is (string) or an array of [text …, , …] nodes. // `seen` dedupes across the whole article so each term links only once. function alLinkTerms(text, seen, onOpen, keyPrefix) { const { re, map } = alGlossIndex(); if (!re || typeof text !== 'string' || !text) return text; re.lastIndex = 0; const out = []; let last = 0, m, n = 0; while ((m = re.exec(text))) { const id = map.get(m[0].toLowerCase()); if (!id || seen.has(id)) continue; seen.add(id); if (m.index > last) out.push(text.slice(last, m.index)); out.push(); last = m.index + m[0].length; } if (!out.length) return text; if (last < text.length) out.push(text.slice(last)); return out; } // Definition popover shown when a linked term is tapped. function AlTermPopover({ termId, isMobile, onClose, onOpenGlossary }) { if (typeof useEscClose === 'function') useEscClose(onClose); const t = (typeof GlossaryService !== 'undefined') ? GlossaryService.getById(termId) : null; if (!t || typeof ReactDOM === 'undefined') return null; const cat = GlossaryService.catFor(t.category); return ReactDOM.createPortal(

, document.body ); } // ── Block-based article body ───────────────────────────────────────────────── function AlArticleBody({ article, isMobile, onOpenGlossary }) { const blocks = ArticlesService.getBlocks(article); const refs = blocks.filter(b => b.type === 'reference'); const refCount = refs.length; const [popTerm, setPopTerm] = React.useState(null); const openTerm = React.useCallback((id) => setPopTerm(id), []); const P = { fontFamily:'"Inter",system-ui', fontSize: isMobile ? 17 : 16.5, color:'#2C3542', lineHeight:1.72, margin:'0 0 18px' }; const nodes = []; // Fresh per render so first-occurrence linking is consistent across re-renders. const seen = new Set(); blocks.forEach((b, i) => { if (b.type === 'reference') return; if (b.type === 'lead') { nodes.push(

{alLinkTerms(b.text, seen, openTerm, `l${i}`)}

); } else if (b.type === 'heading') { nodes.push(

{b.text}

); } else if (b.type === 'paragraph') { nodes.push(

{alLinkTerms(b.text, seen, openTerm, `p${i}`)}

); } else if (b.type === 'list') { const Tag = b.ordered ? 'ol' : 'ul'; nodes.push( {(b.items || []).map((it, j) => (

{!b.ordered && } {it}

))} ); } else if (b.type === 'quote') { nodes.push(

{b.text}
{b.attribution && — {b.attribution}}

); } else if (b.type === 'callout') { const cc = { key:{ c:'#1E40AF', bg:'rgba(30,64,175,0.06)', bd:'rgba(30,64,175,0.18)', ic:'★' }, tip:{ c:'#059669', bg:'rgba(5,150,105,0.06)', bd:'rgba(5,150,105,0.18)', ic:'✓' }, warning:{ c:'#B45309', bg:'rgba(180,83,9,0.07)', bd:'rgba(180,83,9,0.2)', ic:'!' } }[b.variant] || null; const s = cc || { c:AL.navy, bg:'rgba(15,26,46,0.04)', bd:AL.border, ic:'i' }; nodes.push(

{s.ic} {b.title || 'Nota'}

{b.text &&

{b.text}

}

); } else if (b.type === 'image') { const D = b.diagram ? ARTICLE_DIAGRAMS[b.diagram] : null; nodes.push(

{b.alt — {b.caption && {b.caption}} {b.credit && {b.credit}}

); } else if (b.type === 'keypoints') { // Caja "Puntos clave" — fondo azul muy suave, siempre arriba del todo. nodes.push(

En 30 segundos

{it}

); } else if (b.type === 'table') { // Tabla accesible con scroll horizontal DENTRO de su contenedor (nunca de la // página). Cabecera navy + texto crema, filas alternas, caption y note. const cols = b.columns || []; const minW = cols.length >= 3 ? (isMobile ? 520 : 0) : (isMobile ? 360 : 0); nodes.push(

{b.caption && ( )}

{b.caption && } {cols.map((c, ci) => ( ))} {(b.rows || []).map((row, ri) => ( {row.map((cell, cj) => ( ))} ))}

{b.caption}
{c}
{cell}

{b.note &&

{b.note}

} ); } }); return (

{nodes} {refCount > 0 && (

REFERENCIAS CIENTÍFICAS

[{i + 1}]
{alFormatRef(r)} {r.doi && <> doi:{r.doi}} {!r.doi && r.url && <> enlace}

)} {popTerm && ( setPopTerm(null)} onOpenGlossary={(id) => { setPopTerm(null); onOpenGlossary && onOpenGlossary(id); }} /> )}

); } function AulaDetail({ article, isRead, onBack, onMarkRead, allArticles, completedIds, onOpen, onAskCoach, onOpenGlossary }) { const isMobile = useIsMobile(); const [showAi, setShowAi] = React.useState(false); const m = ALcat[article.category] || ALcat.fuerza; const ev = EVIDENCE_LABEL; return (

{alFmtPubDate(article.publishedAt) && ( · {alFmtPubDate(article.publishedAt)} )} · {article.readTime} min lectura {article.publishYear && article.journal && ( · {article.journal} ({article.publishYear}) )}

{article.title}

{article.subtitle}

{article.authors?.length > 0 && (

{article.authors.join(', ')} {article.doi && · doi:{article.doi}}

)} {/* Abstract */}

ABSTRACT

{article.summary}

{/* AI summary */} {article.aiSummary && (

{showAi && (

"{article.aiSummary}"

)}

)} {/* Article body — rich blocks (paragraphs, headings, images, lists, quotes, callouts) with an inline-cited scientific bibliography. */}

{/* Read CTA */}

{isRead ? (

✓ Artículo completado · gemas acreditadas

) : ( <>

¿Has terminado de leer?

Gana {article.gems} gemas al marcarlo como leído

)}

{/* Related articles */} {allArticles && onOpen && ( )} {/* Ask Coach */} {onAskCoach && (

¿Tienes dudas sobre este tema?

)}

); } // ── For You — personalized article strip ────────────────────────────────────── function AulaForYou({ articles, profile, completedIds, onOpen }) { const isMobile = useIsMobile(); if (typeof aulaGetRecommended === 'undefined' || !profile) return null; const recommended = aulaGetRecommended(articles, profile, completedIds, 4); if (!recommended.length) return null; const OBJ_LABELS = { muscle:'Hipertrofia', fat_loss:'Pérdida de grasa', recomp:'Recomposición', performance:'Rendimiento', health:'Salud y bienestar' }; const objLabel = OBJ_LABELS[profile.objective] || 'tu objetivo'; return (

Para ti

seleccionado según tu objetivo: {objLabel}

{profile.experience === 'beginner' ? 'Empezamos por los fundamentos.' : profile.experience === 'advanced' ? 'Contenido avanzado alineado con tu nivel.' : 'Contenido intermedio ordenado por relevancia.'}

{recommended.map((a, i) => ( ))}

); } // ── Learning Path Strip ─────────────────────────────────────────────────────── function AulaLearningPath({ articles, profile, completedIds, onOpen }) { if (typeof aulaGetLearningPath === 'undefined' || !profile) return null; const path = aulaGetLearningPath(profile); const available = (path.steps || []).filter(s => articles.some(a => a.id === s.id)); if (available.length < 2) return null; const doneCount = available.filter(s => completedIds.includes(s.id)).length; const pct = Math.round((doneCount / available.length) * 100); return (

RUTA DE APRENDIZAJE

{path.label}

{doneCount} / {available.length}

completados

{available.map((step, i) => { const done = completedIds.includes(step.id); const article = articles.find(a => a.id === step.id); return ( ); })}

); } // ── Related articles (inside detail view) ───────────────────────────────────── function AulaRelated({ allArticles, currentId, completedIds, onOpen }) { if (typeof aulaGetRelatedArticles === 'undefined') return null; const related = aulaGetRelatedArticles(allArticles, currentId, 3); if (!related.length) return null; return (

ARTÍCULOS RELACIONADOS

{related.map(a => { const done = completedIds.includes(a.id); const m = ALcat[a.category] || ALcat.fuerza; return ( ); })}

); } // ── Main section ────────────────────────────────────────────────────────────── function AulaSection() { const { state, actions } = useStore(); const { navigate } = useRoute(); const isMobile = useIsMobile(); const [articles, setArticles] = React.useState([]); const [loading, setLoading] = React.useState(true); const [query, setQuery] = React.useState(''); const [category, setCategory] = React.useState('all'); const [openId, setOpenId] = React.useState(null); const [gemFlash, setGemFlash] = React.useState(null); // Glossary jump: set when a reader term's "Ver en el glosario" is tapped — // closes the article and tells the glossary to scroll to that entry. const [glossJump, setGlossJump] = React.useState(null); const openGlossary = React.useCallback((termId) => { setOpenId(null); setGlossJump({ id: termId, ts: Date.now() }); }, []); // Shareable deep links: #/aula/glosario (→ scroll to the glossary) and // #/aula/glosario# (→ scroll to and flash that term). const handleGlossaryDeepLink = React.useCallback(() => { const raw = (window.location.hash || '').replace(/^#/, ''); const i = raw.indexOf('#'); const path = i >= 0 ? raw.slice(0, i) : raw; const frag = i >= 0 ? raw.slice(i + 1) : ''; if (path !== '/aula/glosario') return; if (frag) { openGlossary(frag); } else { setOpenId(null); setTimeout(() => { const el = document.getElementById('glosario'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 140); } }, [openGlossary]); React.useEffect(() => { window.addEventListener('hashchange', handleGlossaryDeepLink); return () => window.removeEventListener('hashchange', handleGlossaryDeepLink); }, [handleGlossaryDeepLink]); // First-mount deep link (#/aula/glosario[#term]): run independently of the // article fetch so the glossary jump/flash works even if the feed is slow. React.useEffect(() => { const t = setTimeout(handleGlossaryDeepLink, 180); return () => clearTimeout(t); }, []); // eslint-disable-line react-hooks/exhaustive-deps const atlasProfile = React.useMemo(() => { try { return JSON.parse(localStorage.getItem('atlas.profile.v1') || 'null'); } catch { return null; } }, []); React.useEffect(() => { setLoading(true); ArticlesService.getAll({ status:'published' }).then(data => { setArticles(data); setLoading(false); // Open article deep-linked from Coach const pending = localStorage.getItem('atlas.aula.pending.v1'); if (pending) { localStorage.removeItem('atlas.aula.pending.v1'); setOpenId(pending); } // Jump to a glossary term deep-linked from Coach const pendingGloss = localStorage.getItem('atlas.aula.glossary.pending.v1'); if (pendingGloss) { localStorage.removeItem('atlas.aula.glossary.pending.v1'); openGlossary(pendingGloss); } // URL deep link (#/aula/glosario[#term]) — run once the glossary can mount. if (!pending && !pendingGloss) handleGlossaryDeepLink(); }); }, []); const completed = state.reading?.completed || []; // Published article ids — the glossary only shows "Leer más" for these. const publishedIds = React.useMemo(() => new Set((articles || []).map(a => a.id)), [articles]); const filtered = React.useMemo(() => { const q = query.toLowerCase().trim(); return articles.filter(a => (category === 'all' || a.category === category) && (!q || a.title.toLowerCase().includes(q) || a.subtitle.toLowerCase().includes(q) || a.summary.toLowerCase().includes(q) || (a.aiKeywords || []).some(k => k.toLowerCase().includes(q)) || a.tags.some(t => t.toLowerCase().includes(q))) ); }, [articles, query, category]); const featured = filtered[0] || null; const feedItems = filtered.slice(1); const openArticle = openId ? articles.find(a => a.id === openId) : null; function handleMarkRead() { if (!openId) return; const art = articles.find(a => a.id === openId); if (!art || completed.includes(openId)) return; actions.markArticleRead(openId); setGemFlash(`+${art.gems} gemas · ${art.title}`); setTimeout(() => setGemFlash(null), 2500); } // Category change with a direction hint for the swipe/slide transition. const [swipeDir, setSwipeDir] = React.useState(1); const changeCategory = React.useCallback((cat) => { setCategory(prev => { const from = AULA_CATS.indexOf(prev), to = AULA_CATS.indexOf(cat); setSwipeDir(to >= from ? 1 : -1); return cat; }); }, []); const catIndex = Math.max(0, AULA_CATS.indexOf(category)); const catSwipe = useSwipeNav({ index: catIndex, count: AULA_CATS.length, onChange: (next) => changeCategory(AULA_CATS[next]) }); // Tapping the active "Aula" tab while at the top returns to the section root: // close an open article. React.useEffect(() => { const onReset = (e) => { if (e.detail && e.detail.route === '/aula') setOpenId(null); }; window.addEventListener('atlas:navreset', onReset); return () => window.removeEventListener('atlas:navreset', onReset); }, []); function handleCategoryFromExplore(cat) { changeCategory(cat); setOpenId(null); window.scrollTo({ top: 0, behavior: 'smooth' }); } return (

{gemFlash && (

💎 {gemFlash}

)}

{openArticle ? ( setOpenId(null)} onMarkRead={handleMarkRead} allArticles={articles} completedIds={completed} onOpen={setOpenId} onAskCoach={() => navigate('/coach')} onOpenGlossary={openGlossary} /> ) : ( <> {/* ── Hero ─────────────────────────────────────────────── */} {/* ── Personalized: For You ─────────────────────────────── */} {!loading && atlasProfile && ( )} {/* ── Learning path ─────────────────────────────────────── */} {!loading && atlasProfile && ( )} {/* ── Category strip ────────────────────────────────────── */} {/* ── Swipeable, animated category feed (prev/next on horizontal swipe) ── */}

{/* Loading skeleton */} {loading && (

{[1,2,3,4].map(i =>

)}

)} {/* Empty state */} {!loading && filtered.length === 0 && (

Sin resultados

No hay artículos que coincidan con "{query}".

)} {/* Featured article */} {!loading && featured && ( )} {/* Feed grid */} {!loading && feedItems.length > 0 && (

{feedItems.map((a, i) => ( ))}

)}

{/* ── Micro-learning ────────────────────────────────────── */} {/* Oculto tras bandera (FEATURE_AULA_SNIPPETS): el contenido contradice los artículos validados y sus citas no son verificables. */} {!loading && (typeof ATLAS_FEATURE === 'function' && ATLAS_FEATURE('FEATURE_AULA_SNIPPETS')) && } {/* ── Science feed ──────────────────────────────────────── */} {!loading && (typeof ATLAS_FEATURE === 'function' && ATLAS_FEATURE('FEATURE_AULA_SNIPPETS')) && } {/* ── Glosario ─────────────────────────────────────────── */} {/* El glosario es contenido estático (GlossaryService), no depende de la carga de artículos: se muestra siempre para que sus entradas (p. ej. «Descarga») aparezcan aunque el feed aún esté cargando. */} {/* ── Explore by topic ──────────────────────────────────── */} )}

); } Object.assign(window, { AulaSection });