OBJETIVOS SEMANALES
{activeMuscles.map(([id, state]) => {
const def = MUSCLES[id];
const sci = MUSCLE_SCIENCE[id];
if (!def || !sci) return null;
const isPrio = state === 'priority';
const isMaint = state === 'maintain';
const isRed = state === 'reducir';
// Priority→MAV, Mantener→MEV, Reducir→50% MEV (deload)
const target = isPrio ? sci.mav : isMaint ? sci.mev : Math.round(sci.mev * 0.5);
const done = setsThisWeek(id, log) + (sessionSets[id] || 0);
const pct = Math.min(100, Math.round((done / target) * 100));
// Para reducir: colores invertidos (menos = mejor)
const color = isRed
? (done <= target ? BD.green : done <= sci.mev ? BD.amber : BD.red)
: pct >= 100 ? BD.green : pct >= 60 ? BD.amber : BD.blue;
const badgeBg = isPrio ? 'rgba(59,130,246,0.18)' : isMaint ? 'rgba(34,197,94,0.12)' : 'rgba(245,158,11,0.12)';
const badgeColor = isPrio ? '#93C5FD' : isMaint ? BD.green : BD.amber;
const badgeLabel = isPrio ? 'PRIORIDAD' : isMaint ? 'MANTENER' : 'REDUCIR';
return (
{def.label}
{badgeLabel}
{done}/{target} sets · {sci.freq}×/sem
= 100 ? `0 0 8px ${color}60` : 'none' }} />
);
})}
Basado en protocolos de hipertrofia (Israetel / Schoenfeld)
);
}
// ── Panel de recomendación científica ────────────────────────────────────────
function SciencePanel({ muscleId, priorities, log, sessionSets, onTogglePriority }) {
// Science detail is collapsed by default so the panel doesn't overwhelm; the
// full MEV/MAV/MRV breakdown stays one tap away behind "Ver detalles".
const [showDetail, setShowDetail] = React.useState(false);
// Reset to collapsed whenever the selected muscle changes.
React.useEffect(() => { setShowDetail(false); }, [muscleId]);
if (!muscleId) return null;
const def = MUSCLES[muscleId];
const sci = MUSCLE_SCIENCE[muscleId];
if (!def || !sci) return null;
const prio = priorities[muscleId];
const done = setsThisWeek(muscleId, log) + (sessionSets[muscleId] || 0);
const statusColor = done === 0 ? BD.muted
: done < sci.mev ? BD.amber
: done < sci.mav ? BD.green
: done <= sci.mrv ? BD.blue
: BD.red;
const statusText = done === 0 ? 'Sin series esta semana'
: done < sci.mev ? 'Por debajo del volumen mínimo efectivo'
: done < sci.mav ? 'En rango óptimo · sigue así'
: done <= sci.mrv ? 'Volumen elevado · monitoriza recuperación'
: 'Superando el máximo recuperable';
const ROWS = [
{ key:'MEV', val:sci.mev, color:BD.amber, title:'Mínimo efectivo',
body:'Series mínimas por semana para provocar adaptación. Por debajo no hay progreso real.' },
{ key:'MAV', val:sci.mav, color:BD.green, title:'Volumen óptimo',
body:'Rango donde la hipertrofia se maximiza sin comprometer la recuperación semanal.' },
{ key:'MRV', val:sci.mrv, color:BD.red, title:'Máximo recuperable',
body:'Límite superior. Superarlo de forma sostenida acumula fatiga y frena el progreso.' },
];
return (
{/* Cabecera */}
RECOMENDACIÓN CIENTÍFICA
{def.label}
onTogglePriority(muscleId)}
style={{ padding:'5px 12px', borderRadius:999, border:'none', cursor:'pointer',
background: prio === 'priority' ? BD.blue
: prio === 'maintain' ? 'rgba(34,197,94,0.15)'
: prio === 'reducir' ? 'rgba(245,158,11,0.12)'
: 'rgba(255,255,255,0.06)',
color: prio === 'priority' ? '#fff'
: prio === 'maintain' ? BD.green
: prio === 'reducir' ? BD.amber
: BD.muted,
fontFamily:'Inter,system-ui', fontSize:10, fontWeight:700, transition:'all .14s',
boxShadow: prio === 'priority' ? '0 3px 12px -3px rgba(59,130,246,0.45)' : 'none',
whiteSpace:'nowrap' }}>
{prio === 'priority' ? '🎯 Prioridad'
: prio === 'maintain' ? '✓ Mantener'
: prio === 'reducir' ? '↓ Reducir'
: '+ Priorizar'}
{/* Estado compacto siempre visible + toggle de detalle científico */}
{done} sets
{statusText}
setShowDetail(v => !v)}
style={{ flexShrink:0, background:'none', border:'none', cursor:'pointer', padding:'2px 0',
fontFamily:'Inter,system-ui', fontSize:10.5, fontWeight:700, color:BD.blue,
display:'flex', alignItems:'center', gap:3 }}>
{showDetail ? 'Ocultar' : 'Ver detalles'}
▸
{!showDetail && (
)}
{showDetail && (
{/* Filas MEV / MAV / MRV */}
{ROWS.map(({ key, val, color, title, body }) => (
))}
{/* Barra de volumen con marcadores MEV / MAV */}
Esta semana · {sci.freq}× recomendado
{done} sets
{/* Marcador MEV */}
{/* Marcador MAV */}
MEV {sci.mev}
MAV {sci.mav}
MRV {sci.mrv}
)}
);
}
// ── Panel de equilibrio muscular ──────────────────────────────────────────────
function BalancePanel({ log, sessionSets }) {
const imbalances = BALANCE_PAIRS.map(pair => {
const setsA = pair.idsA.reduce((acc, id) => acc + setsThisWeek(id, log) + (sessionSets[id] || 0), 0);
const setsB = pair.idsB.reduce((acc, id) => acc + setsThisWeek(id, log) + (sessionSets[id] || 0), 0);
const totalSets = setsA + setsB;
if (totalSets < 4) return null;
if (setsB === 0 && setsA === 0) return null;
const ratio = setsB === 0 ? (setsA > 0 ? Infinity : 1) : setsA / setsB;
let alert = null;
if (pair.maxRatio && ratio > pair.maxRatio) {
alert = { label: pair.labelA, dominator: true, advice: pair.adviceHigh || pair.advice, ratio };
} else if (pair.minRatio && ratio < pair.minRatio) {
alert = { label: pair.labelB, dominator: false, advice: pair.adviceLow || pair.advice, ratio: setsB / setsA };
}
return alert ? { ...alert, setsA, setsB, pair } : null;
}).filter(Boolean);
if (imbalances.length === 0) return null;
return (
{imbalances.map(({ pair, setsA, setsB, advice, ratio }) => {
const ratioStr = isFinite(ratio) ? ratio.toFixed(1) + ':1' : '∞:1';
return (
{pair.labelA}: {setsA} series
vs
{pair.labelB}: {setsB} series
{ratioStr}
{/* Mini ratio bar */}
{advice}
);
})}
);
}
// ── Panel: Recomendación Atlas Coach ─────────────────────────────────────────
function CoachRecommendationPanel({ priorities, log, sessionSets }) {
const [open, setOpen] = React.useState(true);
const [dayOpen, setDayOpen] = React.useState(false);
const { navigate } = useRoute();
const plan = React.useMemo(() => {
if (!window.AtlasEngine) return null;
const hasAny = Object.values(priorities).some(s => s === 'priority' || s === 'maintain' || s === 'reducir');
if (!hasAny) return null;
return window.AtlasEngine.exportBuilderPlan(priorities, 4);
}, [priorities]);
if (!plan || !plan.volumePlan.length) return null;
const split = plan.split;
const splitStyle = {
fullbody: { color:BD.green, bg:'rgba(34,197,94,0.10)', border:'rgba(34,197,94,0.22)' },
upper_lower: { color:BD.blue, bg:'rgba(59,130,246,0.10)', border:'rgba(59,130,246,0.22)' },
ppl: { color:BD.amber, bg:'rgba(245,158,11,0.10)', border:'rgba(245,158,11,0.22)' },
}[split.key] || { color:BD.blue, bg:'rgba(59,130,246,0.10)', border:'rgba(59,130,246,0.22)' };
function handleSendToCoach() {
window.AtlasEngine.saveBuilderPlan(plan);
navigate('/coach');
}
return (
{/* Header */}
RECOMENDACIÓN ATLAS COACH
setOpen(o=>!o)}
style={{ background:'none', border:'none', cursor:'pointer', color:BD.muted, padding:'4px 2px', lineHeight:0 }}>
{open ?
{open && (
<>
{/* Split badge */}
{split.name}
{split.sessionsPerWeek}×/sem · {plan.totalSets} series totales
{split.reason}
{/* Volume table */}
{plan.volumePlan.map(m => {
const done = setsThisWeek(m.id, log) + (sessionSets[m.id] || 0);
const pct = m.targetSets > 0 ? Math.min(100, (done / m.targetSets) * 100) : 0;
const prioC = m.state === 'priority' ? BD.blue
: m.state === 'maintain' ? BD.green : BD.amber;
const badge = m.state === 'priority' ? 'MAV'
: m.state === 'maintain' ? 'MEV' : 'DLD';
return (
{m.name}
{badge}
{done}/{m.targetSets} · {m.freq}×/sem
);
})}
{/* Day structure toggle */}
setDayOpen(o=>!o)}
style={{ width:'100%', background:'rgba(255,255,255,0.03)', border:`1px solid ${BD.border}`,
borderRadius:8, padding:'7px 12px', cursor:'pointer', color:BD.muted,
fontFamily:'Inter,system-ui', fontSize:10, display:'flex', justifyContent:'space-between',
marginBottom: dayOpen ? 8 : 10 }}>
Estructura de sesiones
{dayOpen && (
{plan.days.map((day, i) => (
{day.dayLabel.toUpperCase()} · {day.totalSets} series
{day.muscles.map(m => (
{m.name} · {m.setsThisDay}s
))}
))}
{split.science}
)}
{/* CTA */}
Enviar al Coach →
)}
);
}
// ── Atlas Score ───────────────────────────────────────────────────────────────
function computeAtlasScore(priorities, log, sessionSets) {
const active = Object.entries(priorities).filter(([,s]) => s === 'priority' || s === 'maintain');
// 1. Equilibrio (25 pts) — balance antagonista
const pairsEval = BALANCE_PAIRS.filter(p => {
const a = p.idsA.reduce((n,id) => n + setsThisWeek(id,log) + (sessionSets[id]||0), 0);
const b = p.idsB.reduce((n,id) => n + setsThisWeek(id,log) + (sessionSets[id]||0), 0);
return (a + b) >= 4;
});
let imbalancedPairs = [];
pairsEval.forEach(p => {
const a = p.idsA.reduce((n,id) => n + setsThisWeek(id,log) + (sessionSets[id]||0), 0);
const b = p.idsB.reduce((n,id) => n + setsThisWeek(id,log) + (sessionSets[id]||0), 0);
const r = b === 0 ? (a > 0 ? Infinity : 1) : a / b;
if ((p.maxRatio && r > p.maxRatio) || (p.minRatio && r < p.minRatio)) imbalancedPairs.push(p);
});
const eqPts = pairsEval.length === 0
? 18
: Math.max(0, 25 - imbalancedPairs.length * 9);
// 2. Volumen óptimo (30 pts) — series en rango MEV–MAV
let volPts = 0;
if (active.length > 0) {
let sum = 0;
active.forEach(([id, state]) => {
const sci = MUSCLE_SCIENCE[id]; if (!sci) return;
const done = setsThisWeek(id,log) + (sessionSets[id]||0);
if (done === 0) sum += 0;
else if (done < sci.mev) sum += 0.35 * (done / sci.mev);
else if (done <= sci.mav) sum += 0.35 + 0.65 * ((done - sci.mev) / Math.max(1, sci.mav - sci.mev));
else if (done <= sci.mrv) sum += 1.0;
else sum += 0.70;
});
volPts = Math.round(30 * (sum / active.length));
}
// 3. Sin excesos (20 pts) — penaliza por superar MRV
let excesoPts = 20;
const excesoMuscles = [];
Object.entries(MUSCLE_SCIENCE).forEach(([id, sci]) => {
const done = setsThisWeek(id,log) + (sessionSets[id]||0);
if (done > sci.mrv) { excesoPts -= 5; excesoMuscles.push(MUSCLES[id]?.label || id); }
});
excesoPts = Math.max(0, excesoPts);
// 4. Cobertura muscular (15 pts) — prioridades en grupos principales
const CGROUPS = ['torso', 'hombros', 'brazos', 'piernas', 'core'];
const coveredCount = CGROUPS.filter(g =>
active.some(([id]) => MUSCLES[id]?.group === g || (g === 'piernas' && MUSCLES[id]?.group === 'gluteos'))
).length;
const coverPts = Math.round(15 * (coveredCount / CGROUPS.length));
// 5. Frecuencia semanal (10 pts) — músculos prioritarios activos esta semana
const freqPts = active.length === 0 ? 0
: Math.round(10 * (active.filter(([id]) => setsThisWeek(id,log) + (sessionSets[id]||0) > 0).length / active.length));
const total = eqPts + volPts + excesoPts + coverPts + freqPts;
// Insight principal
let insight;
if (active.length === 0) {
insight = 'Selecciona músculos en el mapa para empezar a evaluar tu entrenamiento.';
} else if (excesoMuscles.length > 0) {
insight = `${excesoMuscles[0]} supera el MRV. El exceso sostenido frena el progreso y acumula fatiga.`;
} else if (imbalancedPairs.length > 0) {
const p = imbalancedPairs[0];
insight = (p.adviceHigh || p.advice).split('.')[0] + '.';
} else if (volPts < 12) {
insight = 'El volumen semanal está aún por debajo del mínimo efectivo en varios grupos prioritarios.';
} else if (coverPts < 9) {
insight = 'Diversifica las prioridades. Un programa completo cubre torso, tren inferior, brazos y core.';
} else if (total >= 85) {
insight = 'Entrenamiento muy bien estructurado. Volumen, equilibrio y frecuencia en zona óptima.';
} else if (total >= 70) {
insight = 'Buen programa. Ajusta el volumen de los grupos prioritarios para acercarte al rango MAV.';
} else {
insight = 'Programa en desarrollo. Acumula series y distribuye el volumen entre grupos antagonistas.';
}
return {
total,
insight,
pillars: [
{ key:'equilibrio', label:'Equilibrio muscular', pts:eqPts, max:25, icon:'⚖' },
{ key:'volumen', label:'Volumen adecuado', pts:volPts, max:30, icon:'📊' },
{ key:'exceso', label:'Sin excesos', pts:excesoPts, max:20, icon:'🛡' },
{ key:'cobertura', label:'Cobertura', pts:coverPts, max:15, icon:'🗺' },
{ key:'frecuencia', label:'Frecuencia', pts:freqPts, max:10, icon:'📅' },
],
};
}
function AtlasScoreCard({ priorities, log, sessionSets }) {
const [open, setOpen] = React.useState(false);
const sc = computeAtlasScore(priorities, log, sessionSets);
const color = sc.total >= 80 ? BD.green
: sc.total >= 65 ? BD.amber
: sc.total >= 45 ? '#F97316'
: BD.red;
const qualLabel = sc.total >= 80 ? 'Excelente'
: sc.total >= 65 ? 'Bueno'
: sc.total >= 45 ? 'Mejorable'
: 'Atención';
const R = 30;
const C = 2 * Math.PI * R;
const offset = C * (1 - sc.total / 100);
return (
{/* Anillo SVG */}
{/* Texto */}
ATLAS SCORE
{qualLabel}
{sc.insight}
setOpen(o => !o)}
style={{ background:'none', border:'none', cursor:'pointer',
color:BD.muted, padding:'4px 2px', flexShrink:0, lineHeight:0 }}>
{open ?
{open && (
{sc.pillars.map(p => {
const pct = p.pts / p.max;
const pc = pct >= 0.8 ? BD.green : pct >= 0.5 ? BD.amber : BD.red;
return (
{p.label}
{p.pts}/{p.max}
);
})}
Basado en protocolos Israetel · Schoenfeld
)}
);
}
// ── Modal: Generar Plan ───────────────────────────────────────────────────────
function PlanModal({ priorities, log, sessionSets, workout, onClose, onGoLab }) {
const sc = computeAtlasScore(priorities, log, sessionSets);
const today = new Date().toLocaleDateString('es-ES', { year:'numeric', month:'long', day:'numeric' });
const active = Object.entries(priorities).filter(([,s]) => s);
// Paleta clara para impresión
const PT = {
bg:'#F8F9FC', card:'#FFFFFF', border:'#E5E7EB',
text:'#0F1A2E', sub:'#374151', muted:'#6B7280',
blue:'#2563EB', green:'#16A34A', amber:'#D97706', red:'#DC2626',
};
const scoreColor = sc.total >= 80 ? PT.green
: sc.total >= 65 ? PT.amber
: sc.total >= 45 ? '#EA580C' : PT.red;
const qualLabel = sc.total >= 80 ? 'Excelente' : sc.total >= 65 ? 'Bueno'
: sc.total >= 45 ? 'Mejorable' : 'Atención';
function handlePrint() {
const s = document.createElement('style');
s.dataset.ap = '1';
s.textContent = `@media print{body *{visibility:hidden!important}#atlas-plan-print,#atlas-plan-print *{visibility:visible!important}#atlas-plan-print{position:fixed;inset:0;overflow:visible!important;padding:40px!important;border-radius:0!important;max-height:none!important}.atlas-noprint{display:none!important}}`;
document.head.appendChild(s);
window.print();
window.addEventListener('afterprint', () =>
document.querySelectorAll('[data-ap]').forEach(e => e.remove()), { once:true });
}
return ReactDOM.createPortal(
{/* Fondo oscuro */}
{/* Tarjeta del plan — fondo claro para impresión */}
{/* ── Cabecera ── */}
Atlas Method
PLAN DE ENTRENAMIENTO · {today.toUpperCase()}
×
{/* ── Atlas Score ── */}
{sc.total}
/100
{qualLabel}
ATLAS SCORE
{sc.pillars.map(p => {
const pct = p.pts / p.max;
const c = pct >= 0.8 ? PT.green : pct >= 0.5 ? PT.amber : PT.red;
return (
{p.label}
{p.pts}/{p.max}
);
})}
{/* ── Músculos priorizados ── */}
{active.length > 0 && (
MÚSCULOS PRIORIZADOS
{['Músculo','Prioridad','Series/sem','Frec.'].map(h => (
{h}
))}
{active.map(([id, state], i) => {
const def = MUSCLES[id];
const sci2 = MUSCLE_SCIENCE[id];
if (!def || !sci2) return null;
const done = setsThisWeek(id, log) + (sessionSets[id] || 0);
const target = state === 'priority' ? sci2.mav
: state === 'maintain' ? sci2.mev
: Math.round(sci2.mev * 0.5);
const sc2c = state === 'priority' ? PT.blue
: state === 'maintain' ? PT.green : PT.amber;
const slabel = state === 'priority' ? 'Prioridad'
: state === 'maintain' ? 'Mantener' : 'Reducir';
return (
{def.label}
{slabel}
{done}/{target} sets
{sci2.freq}×/sem
);
})}
)}
{/* ── Insight ── */}
Recomendación ·
{sc.insight}
{/* ── Footer acciones ── */}
Atlas Method · atlasmethod.com
Cerrar
Ir al Laboratorio →
Descargar PDF
,
document.body
);
}
// ── Barra de búsqueda global ──────────────────────────────────────────────────
function SearchBar({ query, onQuery, muscle, onMuscle, priorities = {} }) {
const [focused, setFocused] = React.useState(false);
const [openG, setOpenG] = React.useState(null);
const mobile = useIsMobile();
const PRIO = s => s === 'priority' || s === 'maintain' || s === 'reducir';
// The visible sub-list follows the tapped group, or the group of the active muscle.
const activeGroup = MUSCLE_GROUPS.find(g => g.ids.includes(muscle));
const shownGroup = MUSCLE_GROUPS.find(g => g.id === openG) || activeGroup || null;
return (
onQuery(e.target.value)}
onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
placeholder="Buscar ejercicios, músculos, patrones..."
style={{ width:'100%', padding: mobile ? '14px 42px' : '13px 42px', borderRadius:14, boxSizing:'border-box',
background:'rgba(255,255,255,0.04)',
border:`1.5px solid ${focused ? 'rgba(59,130,246,0.50)' : 'rgba(255,255,255,0.09)'}`,
fontFamily:'Inter,system-ui', fontSize: mobile ? 16 : 14, color:BD.text, transition:'border-color .15s', outline:'none' }} />
{query && (
onQuery('')}
style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)',
width:26, height:26, borderRadius:8, border:'none',
background:'rgba(255,255,255,0.08)', cursor:'pointer',
color:BD.muted, fontSize:12, display:'flex', alignItems:'center', justifyContent:'center' }}>
✕
)}
{/* Level 1 — six big muscle groups (clean entry) */}
{MUSCLE_GROUPS.map(g => {
const isOpen = shownGroup?.id === g.id;
const hasPrio = g.ids.some(id => PRIO(priorities[id]));
return (
setOpenG(isOpen ? null : g.id)}
style={{ padding: mobile ? '9px 15px' : '6px 14px', minHeight: mobile ? 38 : undefined, borderRadius:999, border:'none', cursor:'pointer',
display:'inline-flex', alignItems:'center', gap:6,
background: isOpen ? BD.blue : 'rgba(255,255,255,0.06)',
color: isOpen ? '#fff' : BD.sub,
fontFamily:'Inter,system-ui', fontSize: mobile ? 13 : 12, fontWeight:700, transition:'background .14s, color .14s' }}>
{g.label}
{hasPrio &&
);
})}
{/* Level 2 — the specific muscles of the open group */}
{shownGroup && (
{shownGroup.ids.map(id => {
const def = MUSCLES[id]; if (!def) return null;
const active = muscle === id;
const prio = priorities[id];
return (
onMuscle(active ? null : id)}
style={{ padding: mobile ? '8px 13px' : '5px 12px', minHeight: mobile ? 36 : undefined, borderRadius:999, cursor:'pointer',
background: active ? BD.blue
: prio === 'priority' ? BD.blueDim
: prio === 'maintain' ? 'rgba(34,197,94,0.10)'
: prio === 'reducir' ? 'rgba(245,158,11,0.10)'
: 'rgba(255,255,255,0.05)',
border: active ? 'none' : `1px solid ${prio === 'priority' ? 'rgba(59,130,246,0.40)' : BD.border}`,
color: active ? '#fff'
: prio === 'priority' ? '#93C5FD'
: prio === 'maintain' ? BD.green
: prio === 'reducir' ? BD.amber
: BD.muted,
fontFamily:'Inter,system-ui', fontSize: mobile ? 12.5 : 11.5, fontWeight:600, transition:'all .12s' }}>
{prio === 'priority' ? '🎯 ' : prio === 'maintain' ? '✓ ' : prio === 'reducir' ? '↓ ' : ''}{def.label}
);
})}
)}
);
}
// ── Tarjeta ejercicio premium ─────────────────────────────────────────────────
function ExerciseCard({ ex, inSession, onDetail, onQuickAdd }) {
const [hov, setHov] = React.useState(false);
const g = exGroup(ex);
const eq = exEquipment(ex)[0];
const eqMeta = EQ_META[eq];
const lvlColor = LVL_COLOR[ex.level] || BD.muted;
return (
setHov(true)} onMouseLeave={() => setHov(false)}
onClick={onDetail}
style={{ borderRadius:14, overflow:'hidden', cursor:'pointer', position:'relative',
border:`1.5px solid ${inSession ? 'rgba(34,197,94,0.32)' : hov ? 'rgba(59,130,246,0.42)' : BD.border}`,
background: inSession ? 'rgba(34,197,94,0.04)' : BD.card,
transform: hov ? 'translateY(-2px)' : 'none',
transition:'border-color .14s, transform .14s, background .14s' }}>
{ e.stopPropagation(); onQuickAdd(); }}
style={{ position:'absolute', top:7, right:7, width:28, height:28, borderRadius:'50%',
border:'none', cursor:'pointer',
background: inSession ? 'rgba(34,197,94,0.88)' : 'rgba(59,130,246,0.88)',
color:'#fff', fontSize:13, fontWeight:700,
display:'flex', alignItems:'center', justifyContent:'center',
backdropFilter:'blur(8px)',
boxShadow: inSession ? '0 2px 10px rgba(34,197,94,0.45)' : '0 2px 10px rgba(59,130,246,0.45)',
transition:'transform .12s' }}
onMouseEnter={e => e.currentTarget.style.transform='scale(1.12)'}
onMouseLeave={e => e.currentTarget.style.transform='scale(1)'}>
{inSession ? '✓' : '+'}
{ex.name}
{eqMeta && (
{eqMeta.label}
)}
{ex.compound && (
Comp.
)}
);
}
// ── Detalle de ejercicio ──────────────────────────────────────────────────────
function ExerciseDetail({ ex, inSession, onAdd, onBack }) {
const g = exGroup(ex);
const cues = ex.cues || [];
return (
← Volver
{ex.name}
{exEquipment(ex).map(eq => {
const m = EQ_META[eq];
if (!m) return null;
return {m.label} ;
})}
{ex.level && (
{LVL_LABEL[ex.level]}
)}
{ex.compound && (
⚡ Compuesto
)}
MÚSCULOS
{(ex.muscles.primary || []).map(m => (
{m}
))}
{(ex.muscles.secondary || []).map(m => (
{m}
))}
{cues.length > 0 && (
TÉCNICA
{cues.map((cue, i) => (
{i+1}
{cue}
))}
)}
{(ex.variants || []).length > 0 && (
VARIANTES
{ex.variants.map(v => (
{v}
))}
)}
{inSession ? '✓ Editar series →' : 'Añadir a sesión →'}
);
}
// ── Panel de resultados ───────────────────────────────────────────────────────
function ResultsPanel({ filteredExs, suggestions, sessionIds, workout, muscle, query, priorities, onDetail, onQuickAdd, onRemoveEx, onEditEx, onBack, onTogglePriority, mobile }) {
// On mobile the added exercises live in the always-visible MobileWorkoutBlock,
// so don't repeat them here.
const sessionExsInView = mobile ? [] : workout.filter(e => filteredExs.some(f => f.id === e.id));
const remainingExs = filteredExs.filter(e => !sessionIds.has(e.id));
const prio = muscle ? priorities[muscle] : null;
return (
{/* Volver a la selección general — nunca dejar al usuario atrapado aquí */}
{onBack && (
← Volver
)}
{muscle ? MUSCLES[muscle].label : 'Resultados'}
{filteredExs.length} ejercicio{filteredExs.length !== 1 ? 's' : ''}
{query.trim() ? ` · "${query.trim()}"` : ''}
{muscle && (
onTogglePriority(muscle)}
style={{ flexShrink:0, padding:'7px 14px', borderRadius:999, border:'none', cursor:'pointer',
background: prio === 'priority' ? BD.blue
: prio === 'maintain' ? 'rgba(34,197,94,0.15)'
: prio === 'reducir' ? 'rgba(245,158,11,0.12)'
: 'rgba(255,255,255,0.06)',
color: prio === 'priority' ? '#fff'
: prio === 'maintain' ? BD.green
: prio === 'reducir' ? BD.amber
: BD.muted,
fontFamily:'Inter,system-ui', fontSize:11, fontWeight:700, transition:'all .15s',
boxShadow: prio === 'priority' ? '0 4px 16px -4px rgba(59,130,246,0.50)' : 'none' }}>
{prio === 'priority' ? '🎯 Prioridad'
: prio === 'maintain' ? '✓ Mantener'
: prio === 'reducir' ? '↓ Reducir'
: '+ Priorizar'}
)}
{sessionExsInView.length > 0 && (
EN TU SESIÓN
{sessionExsInView.map(ex => (
onRemoveEx(ex.id)} onEdit={() => onEditEx(ex)} />
))}
)}
{remainingExs.length > 0 && (
{sessionExsInView.length > 0 && (
DISPONIBLES
)}
{remainingExs.map(ex => (
onDetail(ex)}
onQuickAdd={() => onQuickAdd(ex)} />
))}
)}
{filteredExs.length === 0 && (
(suggestions && suggestions.length > 0) ? (
Sin coincidencias exactas para
“{query.trim()}”
¿QUISISTE DECIR…?
{suggestions.map(ex => (
onDetail(ex)} onQuickAdd={() => onQuickAdd(ex)} />
))}
) : (
Sin resultadosPrueba con otro término o grupo muscular
)
)}
);
}
// ── Fila ejercicio en sesión ──────────────────────────────────────────────────
function ExRow({ ex, onRemove, onEdit }) {
const [hov, setHov] = React.useState(false);
const g = exGroup(ex);
return (
setHov(true)} onMouseLeave={() => setHov(false)}
onClick={onEdit}
style={{ display:'flex', alignItems:'center', borderRadius:12, overflow:'hidden',
background: hov ? BD.hov : BD.card, border:`1px solid ${BD.border}`,
marginBottom:8, cursor:'pointer', transition:'background .12s' }}>
{ex.name}
{ex.sets.length} serie{ex.sets.length !== 1 ? 's' : ''}
{ex.sets[0]?.kg ? ` · ${ex.sets[0].kg} kg` : ''}
✓
{ e.stopPropagation(); onRemove(); }}
style={{ width:24, height:24, borderRadius:7, border:'none',
background:'rgba(239,68,68,0.14)', color:'rgba(239,68,68,0.80)',
cursor:'pointer', fontSize:11, display:'flex', alignItems:'center', justifyContent:'center' }}>
✕
);
}
// ── Configurar series ─────────────────────────────────────────────────────────
function SetConfig({ ex, initSets, onConfirm, onBack }) {
const [sets, setSets] = React.useState(() =>
initSets && initSets.length > 0
? initSets.map(s => ({ kg: s.kg || '', reps: s.reps || '10', rir: s.rir || '' }))
: [{ kg:'', reps:'10', rir:'' }, { kg:'', reps:'10', rir:'' }, { kg:'', reps:'10', rir:'' }]
);
const upd = (i,f,v) => setSets(p => p.map((s,idx) => idx===i ? {...s,[f]:v} : s));
const add = () => setSets(p => [...p, { kg:'', reps:'10', rir:'' }]);
const rem = i => setSets(p => p.filter((_,idx) => idx!==i));
const g = exGroup(ex);
const inp = {
type:'number', min:0,
style:{ width:'100%', padding:'10px 6px', borderRadius:9, boxSizing:'border-box',
border:`1px solid ${BD.border}`, background:'rgba(255,255,255,0.04)',
fontFamily:'ui-monospace,Menlo,monospace', fontSize:14, color:BD.text, textAlign:'center' },
};
return (
← Volver
{ex.name}
{ex.muscles.primary.join(' · ')}
{['','Kg','Reps','RIR',''].map((h,i) => (
{h}
))}
{sets.map((set, i) => (
{i+1}
upd(i,'kg', e.target.value)} />
upd(i,'reps',e.target.value)} />
upd(i,'rir',e.target.value)} />
{sets.length > 1
?
rem(i)} aria-label={`Quitar serie ${i+1}`} title="Quitar serie" style={{ width:24, height:24, border:'none', background:'rgba(239,68,68,0.14)',
color:'rgba(239,68,68,0.90)', borderRadius:5, cursor:'pointer', fontSize:11,
display:'flex', alignItems:'center', justifyContent:'center', padding:0 }}>✕
:
}
))}
+ Serie
onConfirm(ex, sets)}
style={{ width:'100%', padding:'14px 20px', borderRadius:13, cursor:'pointer',
background:'#2563EB', color:'#fff', border:'none',
fontFamily:'Inter,system-ui', fontSize:14, fontWeight:700, letterSpacing:-0.2,
boxShadow:'0 8px 28px -8px rgba(59,130,246,0.50)' }}>
Añadir · {sets.length} serie{sets.length !== 1 ? 's' : ''} →
);
}
// ── Panel vacío ───────────────────────────────────────────────────────────────
// Scroll to + focus the search so "＋ Añadir ejercicio" always leads somewhere.
function focusBuilderSearch() {
const el = document.getElementById('builder-search');
const inp = document.getElementById('builder-search-input');
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
setTimeout(() => { try { if (inp) inp.focus(); } catch (e) {} }, 220);
}
// Mobile: the routine-in-construction is ALWAYS visible while building, with a
// persistent "＋ Añadir ejercicio" that returns to the search/selector. This is
// what makes adding the 2nd, 3rd, Nth exercise identical to the 1st.
function MobileWorkoutBlock({ workout, duration, onEdit, onRemove, onAdd }) {
return (
TU RUTINA
{workout.length} ejercicio{workout.length !== 1 ? 's' : ''} · ~{duration} min
{workout.map(ex => (
onRemove(ex.id)} onEdit={() => onEdit(ex)} />
))}
＋ Añadir ejercicio
);
}
function EmptyPanel({ onPick, priorities }) {
const hasPrios = Object.values(priorities).some(v => v === 'priority');
return (
{hasPrios ? 'Tu plan de desarrollo' : 'Construye tu físico'}
{hasPrios
? 'Elige un grupo muscular arriba (o toca el mapa) para ver sus músculos, o busca un ejercicio directamente. Tu perfil de prioridades guía las recomendaciones.'
: 'Elige un grupo muscular arriba (Pecho, Espalda, Hombro…) o toca el mapa para ver sus músculos. Después busca o añade ejercicios.'}
);
}
// ── Barra de sesión sticky ────────────────────────────────────────────────────
function BookmarkIcon({ filled, color }) {
return (
);
}
function WorkoutBar({ workout, saved, routineSaved, duration, onSave, onSaveRoutine, onStart, mobile }) {
// Save-to-Mis-rutinas (template) — bookmark, clearly distinct from "register session"
const saveRoutineBtn = (
{routineSaved ? '✓ Guardada' : <>
);
// Register today's session (awards gems) — clearly a log action, not a template
const registerBtn = (
{saved ? '✓ Registrada' : 'Registrar sesión'}
);
const startBtn = (
▶ Iniciar
);
const wrap = {
position:'fixed', left:0, right:0, zIndex:200,
// Mobile: sit just above the fixed bottom tab bar so neither is covered
bottom: mobile ? 'calc(56px + env(safe-area-inset-bottom))' : 0,
background:'rgba(6,13,24,0.97)', backdropFilter:'blur(24px)',
borderTop:'1px solid rgba(255,255,255,0.08)',
padding: mobile ? '10px 14px' : '12px 32px',
};
// Mobile: two rows so the two save buttons never truncate
if (mobile) {
return (
{workout.length} ejercicio{workout.length !== 1 ? 's' : ''} · ~{duration} min
{startBtn}
{saveRoutineBtn}
{registerBtn}
);
}
return (
{workout.slice(0, 5).map(ex => {
const gs = ExerciseMedia.GROUP_STYLE[exGroup(ex)] || ExerciseMedia.GROUP_STYLE.core;
return (
{ex.name}
);
})}
{workout.length > 5 && (
+{workout.length - 5}
)}
~{duration} min
{startBtn}
{saveRoutineBtn}
{registerBtn}
);
}
// ── Componente principal ──────────────────────────────────────────────────────
function BuilderSection() {
const { state, actions } = useStore();
const { navigate } = useRoute();
const mobile = useWidth() < 680;
const [view, setView] = React.useState('front');
const [muscle, setMuscle] = React.useState(null);
const [query, setQuery] = React.useState('');
const [mode, setMode] = React.useState('empty');
const [detailEx, setDetailEx] = React.useState(null);
const [cfgEx, setCfgEx] = React.useState(null);
const [cfgSets, setCfgSets] = React.useState(null);
const [cfgFromDet, setCfgFromDet]= React.useState(false);
const [workout, setWorkout] = React.useState([]);
const [saved, setSaved] = React.useState(false);
const [routineSaved, setRoutineSaved] = React.useState(false);
const [showPlan, setShowPlan] = React.useState(false);
// Toast: { msg, link?: {label, to}, action?: {label, onClick} }
const [toast, setToast] = React.useState(null);
const toastTimer = React.useRef(null);
function showToast(t, ms = 4500) {
setToast(t);
if (toastTimer.current) clearTimeout(toastTimer.current);
toastTimer.current = setTimeout(() => setToast(null), ms);
}
// Priorities persist in localStorage
const [priorities, setPrioritiesRaw] = React.useState(() => {
try { return JSON.parse(localStorage.getItem('atlas.priorities') || '{}'); } catch { return {}; }
});
function setPriorities(next) {
setPrioritiesRaw(next);
try { localStorage.setItem('atlas.priorities', JSON.stringify(next)); } catch {}
}
function togglePriority(id) {
setPriorities(prev => {
const cur = prev[id];
const next = cur === 'priority' ? 'maintain'
: cur === 'maintain' ? 'reducir'
: cur === 'reducir' ? null
: 'priority';
const copy = { ...prev };
if (next === null) delete copy[id]; else copy[id] = next;
return copy;
});
}
const allExs = React.useMemo(() => ExerciseService.getAll(), []);
const [coachBanner, setCoachBanner] = React.useState(null);
React.useEffect(() => {
const raw = localStorage.getItem('atlas.pendingWorkout');
const meta = (() => { try { return JSON.parse(localStorage.getItem('atlas.pendingWorkoutMeta') || 'null'); } catch { return null; } })();
if (!raw) return;
try {
const exs = JSON.parse(raw);
if (Array.isArray(exs) && exs.length > 0) {
localStorage.removeItem('atlas.pendingWorkout');
if (meta) localStorage.removeItem('atlas.pendingWorkoutMeta');
// Builder only ever *loads* a workout into the canvas; training itself
// runs in the unified player (/player).
setWorkout(exs);
if (meta) setCoachBanner(meta);
}
} catch {}
}, []);
const filteredExs = React.useMemo(() => {
let exs = allExs;
if (muscle) exs = exsForMuscle(muscle, exs);
const q = query.trim();
// Fuzzy, accent/word-order/typo-tolerant search over name·músculos·patrón·equipo.
if (q) exs = ExerciseService.searchIn(exs, q);
return exs;
}, [allExs, muscle, query]);
// "¿Quisiste decir…?" — near matches when the exact search finds nothing.
const searchSuggestions = React.useMemo(() => {
const q = query.trim();
if (!q || filteredExs.length > 0) return [];
return ExerciseService.suggest(q, 6);
}, [query, filteredExs.length]);
// Sets per muscle in current workout session
const sessionSets = React.useMemo(() => {
const acc = {};
for (const ex of workout) {
const g = exGroup(ex);
acc[g] = (acc[g] || 0) + (ex.sets?.length || 0);
}
return acc;
}, [workout]);
const sessionIds = React.useMemo(() => new Set(workout.map(e => e.id)), [workout]);
const duration = React.useMemo(() => sessionDuration(workout), [workout]);
const hasFilter = muscle !== null || query.trim() !== '';
// keepView: when the muscle was picked from the body map the user is already
// looking at the right side, so don't flip the view out from under them (the
// anatomical map draws several muscles on both sides). Chip picks still switch
// to the canonical view so the selected muscle is visible.
function pickMuscle(id, keepView) {
setMuscle(id);
setMode('results');
if (keepView) return;
const def = MUSCLES[id];
if (def?.view === 'back') setView('back');
if (def?.view === 'front') setView('front');
}
// Leave a muscle's exercise view and return to the general selection, so the
// user is never stranded inside one muscle without a way out.
function backToSelection() {
setMuscle(null);
setQuery('');
setMode('empty');
}
function handleMuscleChip(id) {
if (id === null) {
setMuscle(null);
if (mode !== 'detail' && mode !== 'config') setMode(query.trim() ? 'results' : 'empty');
} else {
pickMuscle(id);
}
}
function handleQuery(q) {
setQuery(q);
if (mode !== 'detail' && mode !== 'config') {
setMode(q.trim() || muscle ? 'results' : 'empty');
}
}
function openDetail(ex) { setDetailEx(ex); setMode('detail'); }
function openConfig(ex, fromDetail) {
setCfgEx(ex);
setCfgSets(workout.find(e => e.id === ex.id)?.sets || null);
setCfgFromDet(!!fromDetail);
setMode('config');
}
function confirmSets(ex, sets) {
setWorkout(prev =>
prev.find(e => e.id === ex.id)
? prev.map(e => e.id === ex.id ? { ...e, sets } : e)
: [...prev, { ...ex, sets }]
);
setMode(hasFilter ? 'results' : 'empty');
}
function removeEx(id) { setWorkout(prev => prev.filter(e => e.id !== id)); }
function editEx(ex) { openConfig(ex, false); }
// Register today's session in the history/log. This counts toward the weekly
// goal and achievements but awards NO gems — session rewards are earned only by
// completing a tracked session in the player. Saving a reusable template is a
// separate, persistent action in the bottom bar ("Guardar rutina").
function save() {
if (!workout.length) return;
const snapshot = workout;
actions.logSession(snapshot.map(ex => ({
id: ex.id, name: ex.name, group: exGroup(ex),
muscles: ex.muscles.primary, sets: ex.sets,
})));
setSaved(true);
showToast({ msg: 'Sesión registrada en tu historial' }, 3000);
setTimeout(() => { setSaved(false); setWorkout([]); setMuscle(null); setQuery(''); setMode('empty'); }, 3000);
}
// Save a workout as a reusable routine template ("Mis rutinas"). Accepts an
// optional snapshot so it can be triggered from the post-registration toast
// even after the live workout has been cleared.
function saveAsRoutine(wkt) {
const src = (wkt && wkt.length) ? wkt : workout;
if (!src.length) return;
const muscles = [...new Set(src.flatMap(ex =>
Array.isArray(ex.muscles) ? ex.muscles : (ex.muscles?.primary || [])))].slice(0, 4);
const totalSets = src.reduce((t, ex) => t + (ex.sets?.length || 0), 0);
const dateLabel = new Date().toLocaleDateString('es-ES', { day: 'numeric', month: 'short' });
const name = coachBanner?.routineName
|| (muscles.length ? `Rutina ${muscles.slice(0, 2).join(' + ')}` : `Rutina ${dateLabel}`);
const routine = {
id: `routine-${Date.now()}`,
name,
objective: null,
source: 'builder',
createdAt: Date.now(),
sessions: [{
name: coachBanner?.sessionName || 'Sesión 1',
exercises: src.map(ex => ({
id: ex.id, name: ex.name, group: exGroup(ex),
muscles: Array.isArray(ex.muscles) ? { primary: ex.muscles, secondary: [] } : (ex.muscles || { primary: [], secondary: [] }),
pattern: ex.pattern,
sets: ex.sets,
setsCount: ex.sets?.length,
repsRange: ex.repsRange || (ex.sets?.[0]?.reps ? String(ex.sets[0].reps) : '8-12'),
rir: ex.rir ?? 2,
rest: ex.rest || '90s',
})),
totalSets,
muscles,
}],
};
actions.saveRoutine(routine);
setRoutineSaved(true);
showToast({ msg: 'Guardada en Mis rutinas ✓', link: { label: 'Ver', to: '/rutinas' } });
setTimeout(() => setRoutineSaved(false), 2800);
}
function loadRoutineDay(dayIndex) {
const routine = arLoad();
if (!routine?.sessions?.[dayIndex]) return;
const session = routine.sessions[dayIndex];
const exs = session.exercises || [];
if (!exs.length) return;
setWorkout(exs);
setCoachBanner(prev => prev ? { ...prev, sessionIndex: dayIndex, sessionName: session.name } : null);
}
// Single training player: hand the session to the immersive player at /player
// (same flow as the Coach) instead of a separate in-Builder execution view.
function startExecution() {
if (!workout.length) return;
const exercises = workout.map(ex => ({
id: ex.id, name: ex.name, group: exGroup(ex),
muscles: Array.isArray(ex.muscles) ? { primary: ex.muscles, secondary: [] } : (ex.muscles || { primary: [], secondary: [] }),
pattern: ex.pattern,
sets: ex.sets,
setsCount: ex.sets?.length,
repsRange: ex.repsRange || (ex.sets?.[0]?.reps ? String(ex.sets[0].reps) : '8-12'),
rir: ex.rir ?? 2,
rest: ex.rest || '90s',
}));
try {
localStorage.setItem('atlas.pendingWorkout', JSON.stringify(exercises));
localStorage.setItem('atlas.pendingWorkoutMeta', JSON.stringify({ ...(coachBanner || {}), mode: 'player' }));
} catch (e) {}
setCoachBanner(null);
navigate('/player');
}
const renderMode = mode === 'empty' && hasFilter ? 'results' : mode;
// Extra bottom padding so the fixed WorkoutBar (2 rows on mobile) never covers
// the last content — e.g. the "Generar Plan →" button — when a workout is loaded.
const contentPadBottom = mobile ? (workout.length > 0 ? 210 : 120) : (workout.length > 0 ? 140 : 120);
return (
{coachBanner && (
{/* Row 1: label, name, actions */}
ATLAS COACH
{coachBanner.routineName || 'Plan generado'}
{!coachBanner.totalSessions || coachBanner.totalSessions <= 1
? (coachBanner.sessionName ? ` · ${coachBanner.sessionName}` : '')
: ` · ${coachBanner.sessionName || `Día ${(coachBanner.sessionIndex || 0) + 1}`}`}
{workout.length > 0 && !mobile && (
▶ Iniciar
)}
{
if (typeof exportRoutinePDF === 'undefined') return;
try {
const full = JSON.parse(localStorage.getItem('atlas.routine.active.v1') || 'null');
if (full && Array.isArray(full.sessions) && full.sessions.length) {
exportRoutinePDF(full);
} else {
exportRoutinePDF({ name: coachBanner.routineName || 'Rutina', sessions: [{ name: coachBanner.sessionName || 'Día 1', exercises: workout }] });
}
} catch { exportRoutinePDF({ name: coachBanner.routineName || 'Rutina', sessions: [{ name: coachBanner.sessionName || 'Día 1', exercises: workout }] }); }
}}
style={{ padding:'5px 10px', borderRadius:7, border:'1px solid rgba(59,130,246,0.25)', background:'rgba(59,130,246,0.07)', color:'#93C5FD', fontFamily:'Inter,system-ui', fontSize:11, fontWeight:700, cursor:'pointer', flexShrink:0 }}
>↓ PDF
setCoachBanner(null)} style={{ background:'none', border:'none', cursor:'pointer', color:'rgba(147,197,253,0.35)', fontSize:14, padding:'2px 6px', flexShrink:0 }}>✕
{/* Mobile: prominent full-width start button */}
{workout.length > 0 && mobile && (
▶ Iniciar entrenamiento
)}
{/* Row 2: day tabs for multi-session plans */}
{coachBanner.totalSessions > 1 && (
{Array.from({ length: coachBanner.totalSessions }, (_, i) => {
const isActive = i === (coachBanner.sessionIndex || 0);
return (
loadRoutineDay(i)} style={{
padding:'4px 12px', borderRadius:7,
border:`1px solid ${isActive ? 'rgba(59,130,246,0.45)' : 'rgba(59,130,246,0.15)'}`,
background: isActive ? 'rgba(59,130,246,0.14)' : 'transparent',
color: isActive ? '#93C5FD' : 'rgba(147,197,253,0.40)',
fontFamily:'Inter,system-ui', fontSize:11, fontWeight:700,
cursor: isActive ? 'default' : 'pointer', transition:'all .15s',
}}>
Día {i + 1}
);
})}
)}
)}
{toast && (
{toast.msg}
{toast.link && (
{ setToast(null); navigate(toast.link.to); }}
style={{ flexShrink:0, border:'none', cursor:'pointer', background:'rgba(59,130,246,0.16)', color:'#93C5FD', borderRadius:9, padding:'7px 14px', fontFamily:'Inter,system-ui', fontSize:13, fontWeight:800 }}>
{toast.link.label} →
)}
{toast.action && (
{ toast.action.onClick(); }}
style={{ flexShrink:0, border:'1px solid rgba(59,130,246,0.35)', cursor:'pointer', background:'transparent', color:'#93C5FD', borderRadius:9, padding:'7px 14px', fontFamily:'Inter,system-ui', fontSize:13, fontWeight:800 }}>
{toast.action.label}
)}
)}
Construye tu físico.{' '}
De forma inteligente.
{/* ── Mapa corporal ── (below the add-panel on mobile) */}
{/* Atlas Score lives in Progreso (it needs real training data); the
build screen stays focused on choosing exercises. */}
{[['front','Frontal'],['back','Posterior']].map(([v,lbl]) => (
setView(v)}
style={{ flex:1, padding:'8px 0', borderRadius:7, border:'none', cursor:'pointer',
background: view === v ? BD.blue : 'transparent',
color: view === v ? '#fff' : BD.muted,
fontFamily:'Inter,system-ui', fontSize:11, fontWeight:700, transition:'all .14s' }}>
{lbl}
))}
pickMuscle(id, true)} priorities={priorities} />
{/* Panel científico — aparece cuando hay músculo seleccionado */}
{muscle && (
)}
{/* Volume panel — resumen global de todas las prioridades */}
{/* Balance panel — desequilibrios musculares */}
{/* Coach recommendation — split + volumen + estructura científica */}
{(Object.keys(priorities).length > 0 || workout.length > 0) && (
setShowPlan(true)}
style={{ width:'100%', padding:'12px 0', borderRadius:10, border:'none',
cursor:'pointer',
background:'linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%)',
color:'white', fontFamily:'Inter,system-ui', fontSize:12.5, fontWeight:700,
letterSpacing:0.2, boxShadow:'0 4px 20px rgba(37,99,235,0.40)',
transition:'opacity .15s' }}>
Generar Plan →
{workout.length > 0 && (
navigate('/coach')}
style={{ width:'100%', padding:'9px 0', borderRadius:10,
border:'1px solid rgba(59,130,246,0.22)', background:'rgba(59,130,246,0.06)',
color:'#93C5FD', fontFamily:'Inter,system-ui', fontSize:11.5, fontWeight:700,
cursor:'pointer' }}>
Analizar con Coach →
)}
)}
{/* ── Panel contextual ── (above the map on mobile) */}
{/* Mobile: routine-in-construction always visible with a persistent add button */}
{mobile && workout.length > 0 && renderMode !== 'config' && renderMode !== 'detail' && (
{ handleQuery(''); focusBuilderSearch(); }}
/>
)}
{/* Welcome panel only when NOT already building (otherwise it's a dead end) */}
{renderMode === 'empty' && !(mobile && workout.length > 0) && (
openConfig(ex, false)}
onRemoveEx={removeEx}
onEditEx={editEx}
onBack={backToSelection}
onTogglePriority={togglePriority}
mobile={mobile}
/>
)}
{renderMode === 'detail' && detailEx && (
openConfig(detailEx, true)}
onBack={() => setMode(hasFilter ? 'results' : 'empty')}
/>
)}
{renderMode === 'config' && cfgEx && (
{
if (cfgFromDet && detailEx) setMode('detail');
else setMode(hasFilter ? 'results' : 'empty');
}}
/>
)}
setShowPlan(false)}
onGoLab={() => { setShowPlan(false); navigate('/laboratorio'); }}
/>
)}
);
}
Object.assign(window, { BuilderSection });