Add Clases Grabadas section with audio player and announcement system

- Copy and merge audio files from Nextcloud (joined clase 1 and 2)
- Create ClasesGrabadas page with audio player and download option
- Add SistemaAnuncios component for user notifications
- Add announcement about new audio classes feature
- Add link to Clases Grabadas in Dashboard
- Audio files: 4 classes (clase1-4_completa.m4a) ~890MB total

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import { Modulos } from './pages/Modulos';
 import { Modulo } from './pages/Modulo';
 import { AdminPanel } from './pages/admin/AdminPanel';
 import { RecursosPage } from './pages/Recursos';
+import { ClasesGrabadasPage } from './pages/ClasesGrabadas';
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { isAuthenticated, isLoading } = useAuthStore();
@@ -77,6 +78,14 @@ function App() {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/clases"
+          element={
+            <ProtectedRoute>
+              <ClasesGrabadasPage />
+            </ProtectedRoute>
+          }
+        />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </BrowserRouter>

frontend/src/components/announcements/SistemaAnuncios.tsx

@@ -0,0 +1,142 @@
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Volume2, BookOpen } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { Link } from 'react-router-dom';
+
+interface Anuncio {
+  id: string;
+  titulo: string;
+  mensaje: string;
+  tipo: 'info' | 'success' | 'warning';
+  link?: string;
+  linkText?: string;
+  fechaExpiracion?: Date;
+}
+
+const ANUNCIOS: Anuncio[] = [
+  {
+    id: 'nuevas-clases-audio',
+    titulo: '🎉 ¡Nueva función disponible!',
+    mensaje: 'Ahora puedes escuchar las clases grabadas en audio. Accede a la sección "Clases Grabadas" para escuchar o descargar las 4 clases completas.',
+    tipo: 'success',
+    link: '/clases',
+    linkText: 'Ver Clases Grabadas'
+  }
+];
+
+export function SistemaAnuncios() {
+  const [anunciosVisibles, setAnunciosVisibles] = useState<Anuncio[]>([]);
+
+  useEffect(() => {
+    // Cargar anuncios no descartados desde localStorage
+    const anunciosDescartados = JSON.parse(localStorage.getItem('anunciosDescartados') || '[]');
+    
+    const anunciosActivos = ANUNCIOS.filter(anuncio => {
+      // Si ya fue descartado, no mostrar
+      if (anunciosDescartados.includes(anuncio.id)) return false;
+      
+      // Si tiene fecha de expiración y ya pasó, no mostrar
+      if (anuncio.fechaExpiracion && new Date() > anuncio.fechaExpiracion) return false;
+      
+      return true;
+    });
+    
+    setAnunciosVisibles(anunciosActivos);
+  }, []);
+
+  const cerrarAnuncio = (id: string) => {
+    // Guardar en localStorage para no mostrar de nuevo
+    const anunciosDescartados = JSON.parse(localStorage.getItem('anunciosDescartados') || '[]');
+    anunciosDescartados.push(id);
+    localStorage.setItem('anunciosDescartados', JSON.stringify(anunciosDescartados));
+    
+    // Remover de la vista actual
+    setAnunciosVisibles(prev => prev.filter(a => a.id !== id));
+  };
+
+  if (anunciosVisibles.length === 0) return null;
+
+  return (
+    <div className="space-y-4 mb-8">
+      <AnimatePresence>
+        {anunciosVisibles.map((anuncio) => (
+          <motion.div
+            key={anuncio.id}
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            className={`relative p-6 rounded-2xl border-2 ${
+              anuncio.tipo === 'success' 
+                ? 'bg-gradient-to-r from-green-50 to-emerald-50 border-green-200' 
+                : anuncio.tipo === 'warning'
+                ? 'bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200'
+                : 'bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200'
+            }`}
+          >
+            {/* Botón cerrar */}
+            <button
+              onClick={() => cerrarAnuncio(anuncio.id)}
+              className="absolute top-4 right-4 p-1 rounded-full hover:bg-black/5 transition-colors"
+            >
+              <X size={20} className="text-gray-500" />
+            </button>
+
+            <div className="flex items-start gap-4 pr-8">
+              {/* Icono */}
+              <div className={`p-3 rounded-xl ${
+                anuncio.tipo === 'success' 
+                  ? 'bg-green-100 text-green-600' 
+                  : anuncio.tipo === 'warning'
+                  ? 'bg-amber-100 text-amber-600'
+                  : 'bg-blue-100 text-blue-600'
+              }`}>
+                {anuncio.id === 'nuevas-clases-audio' ? (
+                  <Volume2 size={24} />
+                ) : (
+                  <BookOpen size={24} />
+                )}
+              </div>
+
+              {/* Contenido */}
+              <div className="flex-1">
+                <h3 className={`text-lg font-bold mb-2 ${
+                  anuncio.tipo === 'success' 
+                    ? 'text-green-900' 
+                    : anuncio.tipo === 'warning'
+                    ? 'text-amber-900'
+                    : 'text-blue-900'
+                }`}>
+                  {anuncio.titulo}
+                </h3>
+                
+                <p className={`mb-4 ${
+                  anuncio.tipo === 'success' 
+                    ? 'text-green-800' 
+                    : anuncio.tipo === 'warning'
+                    ? 'text-amber-800'
+                    : 'text-blue-800'
+                }`}>
+                  {anuncio.mensaje}
+                </p>
+
+                {anuncio.link && (
+                  <Link to={anuncio.link}>
+                    <Button 
+                      size="sm"
+                      className={anuncio.tipo === 'success' ? 'bg-green-600 hover:bg-green-700' : ''}
+                    >
+                      {anuncio.linkText}
+                    </Button>
+                  </Link>
+                )}
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export default SistemaAnuncios;

frontend/src/pages/ClasesGrabadas.tsx

@@ -0,0 +1,224 @@
+import { useState } from 'react';
+import { Card } from '../components/ui/Card';
+import { Button } from '../components/ui/Button';
+import { 
+  Headphones, 
+  Download, 
+  Play, 
+  Clock, 
+  BookOpen,
+  Calendar,
+  ArrowLeft
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+interface Clase {
+  id: number;
+  titulo: string;
+  modulo: string;
+  duracion: string;
+  fecha: string;
+  descripcion: string;
+  archivo: string;
+}
+
+const CLASES: Clase[] = [
+  {
+    id: 1,
+    titulo: 'Clase 1: Fundamentos de Economía',
+    modulo: 'Módulo 1',
+    duracion: '63 minutos',
+    fecha: '27 de Enero, 2025',
+    descripcion: 'Introducción a la economía, el problema económico fundamental, sistemas económicos, frontera de posibilidades de producción, agentes económicos y factores de producción.',
+    archivo: '/audios/clase1_completa.m4a'
+  },
+  {
+    id: 2,
+    titulo: 'Clase 2: Oferta, Demanda y Equilibrio',
+    modulo: 'Módulo 2',
+    duracion: '103 minutos',
+    fecha: '30 de Enero, 2025',
+    descripcion: 'Ley de la demanda, ley de la oferta, equilibrio de mercado, elasticidad de la demanda y controles de precio. Análisis completo del funcionamiento de los mercados.',
+    archivo: '/audios/clase2_completa.m4a'
+  },
+  {
+    id: 3,
+    titulo: 'Clase 3: Elasticidad y Teoría del Consumidor',
+    modulo: 'Módulo 3',
+    duracion: '52 minutos',
+    fecha: '3 de Febrero, 2025',
+    descripcion: 'Elasticidad precio, ingreso y cruzada. Utilidad total y marginal, restricción presupuestaria y maximización de la satisfacción del consumidor.',
+    archivo: '/audios/clase3_completa.m4a'
+  },
+  {
+    id: 4,
+    titulo: 'Clase 4: Teoría del Productor',
+    modulo: 'Módulo 4',
+    duracion: '46 minutos',
+    fecha: '6 de Febrero, 2025',
+    descripcion: 'Función de producción, ley de rendimientos decrecientes, costos a corto y largo plazo, ingresos y maximización de beneficios en competencia perfecta.',
+    archivo: '/audios/clase4_completa.m4a'
+  }
+];
+
+export function ClasesGrabadasPage() {
+  const [claseReproduciendo, setClaseReproduciendo] = useState<number | null>(null);
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-6xl mx-auto px-4">
+        {/* Header */}
+        <div className="mb-8">
+          <Link 
+            to="/"
+            className="inline-flex items-center text-gray-600 hover:text-blue-600 mb-4"
+          >
+            <ArrowLeft size={20} className="mr-2" />
+            Volver al Dashboard
+          </Link>
+          
+          <div className="flex items-center gap-4">
+            <div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
+              <Headphones className="w-7 h-7 text-white" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900">Clases Grabadas</h1>
+              <p className="text-gray-600">
+                Escucha las clases completas en audio o descárgalas
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Info Banner */}
+        <Card className="mb-8 bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
+          <div className="flex items-start gap-4">
+            <div className="p-3 bg-blue-100 rounded-xl">
+              <BookOpen className="w-6 h-6 text-blue-600" />
+            </div>
+            <div className="flex-1">
+              <h2 className="text-lg font-semibold text-blue-900 mb-2">
+                ¿Cómo usar las clases grabadas?
+              </h2>
+              <ul className="space-y-2 text-blue-800 text-sm">
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-500 mt-0.5">•</span>
+                  <span>Cada clase corresponde a un módulo del curso</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-500 mt-0.5">•</span>
+                  <span>Puedes escuchar directamente en la web o descargar para escuchar offline</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-500 mt-0.5">•</span>
+                  <span>Te recomendamos escuchar la clase antes de hacer los ejercicios del módulo</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-500 mt-0.5">•</span>
+                  <span>Total: {CLASES.length} clases · Duración total aproximada: 4.5 horas</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </Card>
+
+        {/* Lista de Clases */}
+        <div className="space-y-6">
+          {CLASES.map((clase) => (
+            <Card key={clase.id} className="hover:shadow-lg transition-shadow">
+              <div className="flex flex-col lg:flex-row gap-6">
+                {/* Icono/Info */}
+                <div className="flex items-start gap-4 lg:w-1/3">
+                  <div className="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-2xl flex items-center justify-center flex-shrink-0">
+                    <span className="text-2xl font-bold text-indigo-600">{clase.id}</span>
+                  </div>
+                  
+                  <div className="flex-1">
+                    <span className="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full mb-2">
+                      {clase.modulo}
+                    </span>
+                    
+                    <h3 className="text-lg font-bold text-gray-900 mb-1">
+                      {clase.titulo}
+                    </h3>
+                    
+                    <div className="flex items-center gap-4 text-sm text-gray-500">
+                      <span className="flex items-center gap-1">
+                        <Clock size={14} />
+                        {clase.duracion}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Calendar size={14} />
+                        {clase.fecha}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Descripción */}
+                <div className="lg:w-1/3">
+                  <p className="text-gray-600 text-sm leading-relaxed">
+                    {clase.descripcion}
+                  </p>
+                </div>
+
+                {/* Acciones */}
+                <div className="flex flex-col sm:flex-row gap-3 lg:w-1/3 lg:justify-end">
+                  <Button
+                    onClick={() => setClaseReproduciendo(claseReproduciendo === clase.id ? null : clase.id)}
+                    className="flex-1 sm:flex-none"
+                  >
+                    <Play size={18} className="mr-2" />
+                    {claseReproduciendo === clase.id ? 'Ocultar' : 'Escuchar'}
+                  </Button>
+                  
+                  <a 
+                    href={clase.archivo}
+                    download
+                    className="flex-1 sm:flex-none"
+                  >
+                    <Button variant="outline" className="w-full">
+                      <Download size={18} className="mr-2" />
+                      Descargar
+                    </Button>
+                  </a>
+                </div>
+              </div>
+
+              {/* Reproductor de Audio */}
+              {claseReproduciendo === clase.id && (
+                <div className="mt-6 pt-6 border-t border-gray-100">
+                  <audio 
+                    controls 
+                    className="w-full"
+                    autoPlay
+                  >
+                    <source src={clase.archivo} type="audio/mp4" />
+                    Tu navegador no soporta el elemento de audio.
+                  </audio>
+                  <p className="text-sm text-gray-500 mt-3 text-center">
+                    💡 Tip: Puedes descargar el audio para escucharlo sin conexión
+                  </p>
+                </div>
+              )}
+            </Card>
+          ))}
+        </div>
+
+        {/* Footer */}
+        <div className="mt-12 text-center">
+          <p className="text-gray-500 text-sm mb-4">
+            ¿Ya escuchaste las clases? Pasa a los ejercicios interactivos para practicar.
+          </p>
+          <Link to="/modulos">
+            <Button>
+              Ir a los Ejercicios
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ClasesGrabadasPage;

frontend/src/pages/Dashboard.tsx

@@ -8,7 +8,8 @@ import { ProgressBar } from '../components/progress/ProgressBar';
 import { ScoreDisplay } from '../components/progress/ScoreDisplay';
 import { BadgesSection } from '../components/progress/Badges';
 import { Loader } from '../components/ui/Loader';
-import { BookOpen, User, LogOut, LayoutGrid, Award, Star, Target, CheckCircle, FileText } from 'lucide-react';
+import { BookOpen, User, LogOut, LayoutGrid, Award, Star, Target, CheckCircle, FileText, Headphones } from 'lucide-react';
+import { SistemaAnuncios } from '../components/announcements/SistemaAnuncios';
 
 const MODULOS_CONFIG = [
   { id: 'modulo1', numero: 1, titulo: 'Fundamentos de Economía', descripcion: 'Introducción a los conceptos básicos', totalEjercicios: 3 },
@@ -121,6 +122,9 @@ export function Dashboard() {
           <p className="text-gray-600">Continúa donde lo dejaste y desbloquea nuevos logros</p>
         </div>
 
+        {/* Sistema de Anuncios */}
+        <SistemaAnuncios />
+
         {/* Stats Cards */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
           <Card className="bg-gradient-to-br from-blue-500 to-blue-600 text-white border-none">
@@ -252,6 +256,12 @@ export function Dashboard() {
                   Material PDF
                 </Button>
               </Link>
+              <Link to="/clases">
+                <Button variant="outline" size="lg" className="bg-gradient-to-r from-purple-50 to-pink-50 border-purple-200 hover:border-purple-300">
+                  <Headphones className="w-5 h-5 mr-2 text-purple-600" />
+                  <span className="text-purple-700">Clases Grabadas</span>
+                </Button>
+              </Link>
             </div>
           </div>