Fix PDF permissions, routing, and FlujoCircular exercise

- Fix PDF file permissions (403 Forbidden error)
- Fix routing bug preventing access to modules 2-4
- Replace FlujoCircular with intuitive quiz version
- Cap progress percentage at 100%
- Add PDF viewer with modal in Recursos page

frontend/src/pages/Recursos.tsx

@@ -1,6 +1,7 @@
+import { useState } from 'react';
 import { Card } from '../components/ui/Card';
 import { Button } from '../components/ui/Button';
-import { FileText, Download, BookOpen, ArrowLeft } from 'lucide-react';
+import { FileText, Download, BookOpen, ArrowLeft, X, Eye } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
 const recursos = [
@@ -39,6 +40,19 @@ const recursos = [
 ];
 
 export function RecursosPage() {
+  const [pdfSeleccionado, setPdfSeleccionado] = useState<string | null>(null);
+  const [pdfTitulo, setPdfTitulo] = useState<string>('');
+
+  const abrirPdf = (archivo: string, titulo: string) => {
+    setPdfSeleccionado(archivo);
+    setPdfTitulo(titulo);
+  };
+
+  const cerrarPdf = () => {
+    setPdfSeleccionado(null);
+    setPdfTitulo('');
+  };
+
   return (
     <div className="min-h-screen bg-gray-50 py-8">
       <div className="max-w-6xl mx-auto px-4">
@@ -98,17 +112,29 @@ export function RecursosPage() {
                     {recurso.descripcion}
                   </p>
                   
-                  <a 
-                    href={recurso.archivo}
-                    download
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Button variant="outline" className="w-full">
-                      <Download size={18} className="mr-2" />
-                      Descargar PDF
+                  <div className="flex gap-2">
+                    <Button 
+                      variant="outline" 
+                      className="flex-1"
+                      onClick={() => abrirPdf(recurso.archivo, recurso.titulo)}
+                    >
+                      <Eye size={18} className="mr-2" />
+                      Ver
                     </Button>
-                  </a>
+                    
+                    <a 
+                      href={recurso.archivo}
+                      download
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex-1"
+                    >
+                      <Button variant="outline" className="w-full">
+                        <Download size={18} className="mr-2" />
+                        Descargar
+                      </Button>
+                    </a>
+                  </div>
                 </div>
               </div>
             </Card>
@@ -127,6 +153,58 @@ export function RecursosPage() {
           </Link>
         </div>
       </div>
+
+      {/* Modal para visualizar PDF */}
+      {pdfSeleccionado && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 p-4">
+          <div className="bg-white rounded-xl shadow-2xl w-full max-w-6xl h-[90vh] flex flex-col">
+            {/* Header del modal */}
+            <div className="flex items-center justify-between p-4 border-b border-gray-200">
+              <h2 className="text-lg font-semibold text-gray-900 truncate pr-4">
+                {pdfTitulo}
+              </h2>
+              <button
+                onClick={cerrarPdf}
+                className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
+              >
+                <X size={24} />
+              </button>
+            </div>
+            
+            {/* Contenido del PDF */}
+            <div className="flex-1 p-4 bg-gray-100">
+              <iframe
+                src={pdfSeleccionado}
+                className="w-full h-full rounded-lg bg-white"
+                title={pdfTitulo}
+              />
+            </div>
+            
+            {/* Footer del modal */}
+            <div className="flex items-center justify-between p-4 border-t border-gray-200 bg-gray-50">
+              <p className="text-sm text-gray-600">
+                Usa los controles del visor de PDF para navegar, hacer zoom y descargar.
+              </p>
+              <div className="flex gap-2">
+                <a
+                  href={pdfSeleccionado}
+                  download
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button variant="outline" size="sm">
+                    <Download size={16} className="mr-2" />
+                    Descargar
+                  </Button>
+                </a>
+                <Button onClick={cerrarPdf} size="sm">
+                  Cerrar
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }