feat: Rediseño completo de UI, SCORM y ajustes de experiencia

src/layouts/MainLayout.tsx

@@ -1,23 +1,43 @@
 import type { ReactNode } from 'react'
 import { useScale } from '../hooks/useScale'
 import Header from '../components/layout/Header'
-import Footer from '../components/layout/Footer'
+import ActivityBar from '../components/ui/ActivityBar'
 
 interface MainLayoutProps {
   children: ReactNode
+  /** Props para el ActivityBar. Si no se pasa, la pantalla hija debe renderizar su propio ActivityBar. */
+  barProps?: {
+    preguntaActual?: number
+    totalPreguntas?: number
+    mensaje: string
+    puedeAnterior?: boolean
+    puedeSiguiente?: boolean
+    onPrev?: () => void
+    onNext?: () => void
+  }
 }
 
-export default function MainLayout({ children }: MainLayoutProps) {
+export default function MainLayout({ children, barProps }: MainLayoutProps) {
   const scaleRef = useScale()
 
   return (
     <div className="w-screen h-screen overflow-hidden bg-white relative">
       <div ref={scaleRef} className="bg-gray-100 flex flex-col">
         <Header />
-        <main className="flex-1 flex items-center justify-center px-4 py-8">
+        <main className="flex-1 flex flex-col items-center justify-center px-0 pt-8 overflow-hidden" style={{ minHeight: 0 }}>
           {children}
         </main>
-        <Footer />
+        {barProps && (
+          <ActivityBar
+            preguntaActual={barProps.preguntaActual ?? 0}
+            totalPreguntas={barProps.totalPreguntas ?? 0}
+            mensaje={barProps.mensaje}
+            puedeAnterior={barProps.puedeAnterior ?? false}
+            puedeSiguiente={barProps.puedeSiguiente ?? false}
+            onPrev={barProps.onPrev}
+            onNext={barProps.onNext}
+          />
+        )}
       </div>
     </div>
   )