From 8800cba2203d924a791ed7003ded107954aeff5b Mon Sep 17 00:00:00 2001
From: Ricardo Monla <rmonla@frlr.utn.edu.ar>
Date: Sun, 3 May 2026 21:32:17 -0300
Subject: [PATCH] fix: match accordion styling for mp4 resources

---
 .../descargas/LIBRO_DE_ESTUDIO.html            | 18 ++++++++++++------
 descargar-curso/generar_dashboard.mjs          |  9 ++++++---
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/descargar-curso/descargas/LIBRO_DE_ESTUDIO.html b/descargar-curso/descargas/LIBRO_DE_ESTUDIO.html
index 3de739f..056ecb9 100644
--- a/descargar-curso/descargas/LIBRO_DE_ESTUDIO.html
+++ b/descargar-curso/descargas/LIBRO_DE_ESTUDIO.html
@@ -1111,9 +1111,12 @@ body {
 </div>
 <p>VIDEO</p><div class="tema-separador"></div>
 <h3 class="tema-titulo" id="tema-analisis-del-opuesto-3">4. Análisis del Opuesto</h3>
-<p>Video</p>
-<div class="video-container">
-  <video src="secciones/Modulo_1_Planificacion/Analisis_Equipos_1/recurso_50262.mp4" controls preload="none" poster="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' fill='%23111'></svg>"></video>
+<p>Video</p><div class="video-viewer-wrap collapsed">
+  <div class="video-viewer-header" onclick="this.parentElement.classList.toggle('collapsed')">
+    <span>🎬 <strong>Análisis del Opuesto</strong></span>
+    <span class="video-toggle">▼</span>
+  </div>
+  <div class="video-container"><video controls preload="metadata"><source src="secciones/Modulo_1_Planificacion/Analisis_Equipos_1/recurso_50262.mp4" type="video/mp4">Tu navegador no soporta video HTML5.</video></div>
 </div>
 <div class="tema-separador"></div>
 <h3 class="tema-titulo" id="tema-evaluacion-y-estadisticas-en-el-voleibol-4">5. ​EVALUACION y ESTADISTICAS en el VOLEIBOL</h3>
@@ -1133,9 +1136,12 @@ body {
 <p><br></p><p>Programa Excel</p><div class="nota-recurso">📦 <strong>Descargar:</strong> <a href="secciones/Modulo_1_Planificacion/Analisis_Equipos_1/recurso_53181.xls" download>​Evaluación por Rotación</a></div>
 <div class="tema-separador"></div>
 <h3 class="tema-titulo" id="tema-pelota-pipe-7">8. PELOTA "PIPE"</h3>
-<p>Analisis video</p>
-<div class="video-container">
-  <video src="secciones/Modulo_1_Planificacion/Analisis_Equipos_1/recurso_50276.mp4" controls preload="none" poster="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' fill='%23111'></svg>"></video>
+<p>Analisis video</p><div class="video-viewer-wrap collapsed">
+  <div class="video-viewer-header" onclick="this.parentElement.classList.toggle('collapsed')">
+    <span>🎬 <strong>PELOTA "PIPE"</strong></span>
+    <span class="video-toggle">▼</span>
+  </div>
+  <div class="video-container"><video controls preload="metadata"><source src="secciones/Modulo_1_Planificacion/Analisis_Equipos_1/recurso_50276.mp4" type="video/mp4">Tu navegador no soporta video HTML5.</video></div>
 </div>
 <div class="tema-separador"></div>
 <h3 class="tema-titulo" id="tema-la-estadistica-aplicada-a-la-evaluacion-en-voleibol-8">9. La estadística aplicada a la evaluación en VOLEIBOL</h3>
diff --git a/descargar-curso/generar_dashboard.mjs b/descargar-curso/generar_dashboard.mjs
index 9fdc6b4..d1c05e1 100644
--- a/descargar-curso/generar_dashboard.mjs
+++ b/descargar-curso/generar_dashboard.mjs
@@ -1294,9 +1294,12 @@ body {
   <a href="${recursoHref}" download class="pdf-download-link">⬇ Descargar PDF</a>
 </div>\n`;
           } else if (recursoLocal && recursoLocal.endsWith(".mp4")) {
-            bodyHTML += `
-<div class="video-container">
-  <video src="${recursoHref}" controls preload="none" poster="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' fill='%23111'></svg>"></video>
+            bodyHTML += `<div class="video-viewer-wrap collapsed">
+  <div class="video-viewer-header" onclick="this.parentElement.classList.toggle('collapsed')">
+    <span>🎬 <strong>${tema.titulo}</strong></span>
+    <span class="video-toggle">▼</span>
+  </div>
+  <div class="video-container"><video controls preload="metadata"><source src="${recursoHref}" type="video/mp4">Tu navegador no soporta video HTML5.</video></div>
 </div>\n`;
           } else if (recursoLocal) {
             // Otros archivos locales (ZIP, PPT, XLS, etc)