feat: placeholders animados para videos pendientes + barra de progreso de descarga

descargar-curso/generar_dashboard.mjs

@@ -616,9 +616,13 @@ function generarHTML(datos) {
   let totalModulos = datos.length;
   let totalSecciones = 0;
   let totalTemas = 0;
+  let totalVideos = 0;
   for (const m of datos) {
     totalSecciones += m.secciones.length;
-    for (const s of m.secciones) totalTemas += s.temas.length;
+    for (const s of m.secciones) {
+      totalTemas += s.temas.length;
+      for (const t of s.temas) if (t.vimeoID) totalVideos++;
+    }
   }
 
   // Leer mapa de videos descargados si existe
@@ -630,6 +634,17 @@ function generarHTML(datos) {
     }
   } catch { /* sin mapa */ }
 
+  // Contar cuántos videos están descargados
+  let videosDescargados = 0;
+  for (const m of datos) {
+    for (const s of m.secciones) {
+      for (const t of s.temas) {
+        if (t.vimeoID && videosMap[t.vimeoID]) videosDescargados++;
+      }
+    }
+  }
+  const videoPct = totalVideos > 0 ? Math.round((videosDescargados / totalVideos) * 100) : 0;
+
   const css = `
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -941,6 +956,72 @@ body {
   font-size: 0.88rem;
   color: #7d6608;
 }
+.video-placeholder {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  border-radius: 8px;
+  padding: 2rem;
+  margin: 1rem 0;
+  text-align: center;
+  color: #e0e0e0;
+  position: relative;
+  overflow: hidden;
+}
+.video-placeholder::before {
+  content: '';
+  position: absolute;
+  top: 0; left: -100%; width: 200%; height: 100%;
+  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.03) 50%, transparent 75%);
+  animation: shimmer 3s infinite;
+}
+@keyframes shimmer {
+  0% { transform: translateX(-50%); }
+  100% { transform: translateX(50%); }
+}
+.video-placeholder .play-icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+  opacity: 0.5;
+}
+.video-placeholder .placeholder-text {
+  font-size: 0.85rem;
+  opacity: 0.6;
+}
+.video-placeholder .placeholder-label {
+  font-size: 0.75rem;
+  opacity: 0.35;
+  margin-top: 0.4rem;
+}
+/* ── BARRA DE PROGRESO ── */
+.progress-section {
+  padding: 0.8rem 1.2rem;
+  border-top: 1px solid rgba(255,255,255,0.08);
+}
+.progress-section .progress-label {
+  font-size: 0.7rem;
+  color: rgba(255,255,255,0.5);
+  margin-bottom: 0.4rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.progress-bar-bg {
+  background: rgba(255,255,255,0.1);
+  border-radius: 6px;
+  height: 8px;
+  overflow: hidden;
+}
+.progress-bar-fill {
+  height: 100%;
+  border-radius: 6px;
+  background: linear-gradient(90deg, #2980b9, #27ae60);
+  transition: width 0.5s ease;
+}
+.progress-stats {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.7rem;
+  color: rgba(255,255,255,0.4);
+  margin-top: 0.3rem;
+}
 .nota-recurso {
   background: #eaf2f8;
   border: 1px solid #aed6f1;
@@ -1022,7 +1103,7 @@ body {
           if (videoFile) {
             bodyHTML += `<div class="video-container"><video controls preload="metadata"><source src="videos_offline/${videoFile}" type="video/mp4">Tu navegador no soporta video HTML5.</video></div>\n`;
           } else {
-            bodyHTML += `<div class="nota-video">📹 <strong>Video disponible</strong> — Vimeo ID: ${tema.vimeoID}</div>\n`;
+            bodyHTML += `<div class="video-placeholder"><div class="play-icon">▶</div><div class="placeholder-text">Video en proceso de descarga</div><div class="placeholder-label">${tema.titulo}</div></div>\n`;
           }
         }
 
@@ -1123,10 +1204,16 @@ body {
         <div class="stat">📚 ${totalModulos} mód.</div>
         <div class="stat">📂 ${totalSecciones} secc.</div>
         <div class="stat">📖 ${totalTemas} temas</div>
+        <div class="stat">🎬 ${videosDescargados}/${totalVideos} videos</div>
       </div>
       <div class="sidebar-nav">
         ${sidebarNav}
       </div>
+      <div class="progress-section">
+        <div class="progress-label">Descarga de videos</div>
+        <div class="progress-bar-bg"><div class="progress-bar-fill" style="width: ${videoPct}%"></div></div>
+        <div class="progress-stats"><span>${videosDescargados} de ${totalVideos}</span><span>${videoPct}%</span></div>
+      </div>
     </nav>
 
     <main class="main-content">