From 7f9e7d17307aad27bdf02ccdff96994833cf661d Mon Sep 17 00:00:00 2001
From: "david.martinez" <david.martinez@espacio360.com.mx>
Date: Wed, 1 Jul 2026 15:28:02 -0600
Subject: [PATCH] update

---
 contenido/03.html |   5 +-
 contenido/04.html |   3 +
 contenido/05.html |   3 +
 contenido/06.html |   3 +
 contenido/07.html |   3 +
 contenido/08.html |   3 +
 contenido/09.html |  54 +--
 contenido/10.html | 162 ++++----
 contenido/11.html |   3 +
 contenido/12.html |   5 +-
 contenido/13.html |   7 +-
 contenido/14.html |  35 +-
 contenido/15.html | 206 ++++++----
 contenido/16.html |   5 +-
 contenido/17.html | 952 +++++++++++++++++++++++-----------------------
 contenido/18.html | 755 ++++++++++++++++++------------------
 js/config.js      |   4 -
 js/config.min.js  |   2 +-
 18 files changed, 1145 insertions(+), 1065 deletions(-)

diff --git a/contenido/03.html b/contenido/03.html
index 1828581..6d2cc57 100644
--- a/contenido/03.html
+++ b/contenido/03.html
@@ -163,7 +163,10 @@
                 <div class="card bg-white border-0 rounded-4 bx-shadow p-3">
                   <div class="row justify-content-center">
                     <div class="col-12 mb-3 txt-question"></div>
-                    <div class="col-12 content-answers"></div>
+                    <div class="col-12 content-answers mb-3"></div>
+                    <div class="col-12 text-center">
+                      <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/contenido/04.html b/contenido/04.html
index c6fca10..e24e538 100644
--- a/contenido/04.html
+++ b/contenido/04.html
@@ -120,6 +120,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 mb-2 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12 col-actividad">
             <div class="custom-grid d-flex flex-row gap-3 justify-content-center align-items-center">
               <div class="img-sotable" data-order="0">
diff --git a/contenido/05.html b/contenido/05.html
index 6e78572..998970b 100644
--- a/contenido/05.html
+++ b/contenido/05.html
@@ -389,6 +389,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 mt-2 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
         </div>
       </div>
     </div>
diff --git a/contenido/06.html b/contenido/06.html
index 6540fa9..6541f29 100644
--- a/contenido/06.html
+++ b/contenido/06.html
@@ -129,6 +129,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 mb-3 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12">
             <div class="row justify-content-center">
               <div class="col-12 mb-2">
diff --git a/contenido/07.html b/contenido/07.html
index 8abaf07..5abd9e0 100644
--- a/contenido/07.html
+++ b/contenido/07.html
@@ -122,6 +122,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 mb-3 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12">
             <div class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
               <div class="row-questions custom-grid" id="row-questions">
diff --git a/contenido/08.html b/contenido/08.html
index 386b88e..374dba0 100644
--- a/contenido/08.html
+++ b/contenido/08.html
@@ -123,6 +123,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 mb-3 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12">
             <div class="row justify-content-center">
               <div class="col-12 mb-3">
diff --git a/contenido/09.html b/contenido/09.html
index e379556..ca5b8d5 100644
--- a/contenido/09.html
+++ b/contenido/09.html
@@ -195,18 +195,15 @@
             <div class="row justify-content-center align-items-center">
               <div class="col-6">
                 <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
-                  <div
-                    class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center"
-                  >
+                  <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center">
                     <p class="mb-0">
                       El jabón que utilice para el lavado de manos de preferencia debe ser
-                      <b class="text-lila-claro">líquido</b>, sin embargo, lo prioritario es que sea
-                      exclusivo para cuando usted realice los recambios en casa.
+                      <b class="text-lila-claro">líquido</b>, sin embargo, lo prioritario es que sea exclusivo para
+                      cuando usted realice los recambios en casa.
                     </p>
 
                     <p>
-                      <b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para
-                      secar sus manos.
+                      <b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para secar sus manos.
                     </p>
 
                     <p>
@@ -219,9 +216,7 @@
                   >
                     <p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p>
                   </div>
-                  <div
-                    class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
-                  >
+                  <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
                     <div
                       class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
                     >
@@ -251,7 +246,7 @@
               <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
-          <div class="col-11 mb-3 text-center">
+          <div class="col-11 mb-1 text-center">
             <h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
           </div>
           <div class="col-12 px-0 mb-3">
@@ -261,35 +256,32 @@
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
                     <img src="img/book0.png" class="img-fluid" />
                     <p class="mb-0">
-                      <strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
-                      colocarlos en el orden correcto.
+                      <strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para colocarlos en el orden
+                      correcto.
                     </p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
+          <div class="col-12 mb-2 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-11">
             <div class="row justify-content-center align-items-center">
               <div class="col-12 anim1">
-                <div
-                  class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list"
-                >
+                <div class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list">
                   <div class="drag-sortable" data-order="0">
                     <span class="drag-number"></span>
                     <span class="drag-icon">&#8597;</span>
-                    Mójese las manos y aplique suficiente jabón para cubrir toda su superficie.
-                    Frótelas entre sí.
+                    Mójese las manos y aplique suficiente jabón para cubrir toda su superficie. Frótelas entre sí.
                   </div>
                   <div class="drag-sortable" data-order="1">
                     <span class="drag-number"></span>
                     <!-- MANO CON ANIMACIÓN -->
-                    <span class="drag-hand-animate"
-                      ><i class="fa-duotone fa-solid fa-hand-pointer"></i
-                    ></span>
+                    <span class="drag-hand-animate"><i class="fa-duotone fa-solid fa-hand-pointer"></i></span>
                     <span class="drag-icon">&#8597;</span>
-                    Frótese la palma de la mano derecha contra el dorso de la mano izquierda
-                    entrelazando los dedos.
+                    Frótese la palma de la mano derecha contra el dorso de la mano izquierda entrelazando los dedos.
                   </div>
                   <div class="drag-sortable" data-order="2">
                     <span class="drag-number"></span>
@@ -304,14 +296,13 @@
                   <div class="drag-sortable" data-order="4">
                     <span class="drag-number"></span>
                     <span class="drag-icon">&#8597;</span>
-                    Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un
-                    movimiento de rotación y viceversa.
+                    Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y
+                    viceversa.
                   </div>
                   <div class="drag-sortable" data-order="5">
                     <span class="drag-number"></span>
                     <span class="drag-icon">&#8597;</span>
-                    Frótese la punta de los dedos de la mano derecha contra la palma de la mano
-                    izquierda.
+                    Frótese la punta de los dedos de la mano derecha contra la palma de la mano izquierda.
                   </div>
                   <div class="drag-sortable" data-order="6">
                     <span class="drag-number"></span>
@@ -352,10 +343,7 @@
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div
-            class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
-            style="display: none"
-          >
+          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
             <div
               class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
               onclick="CourseNav.reload()"
@@ -476,9 +464,7 @@
     }
 
     function mostrarPopup(isCorrect) {
-      CourseNav.audioController.stopAllSoundsAndPlay(
-        isCorrect ? feedbackcorrect : feedbackincorrect
-      );
+      CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? feedbackcorrect : feedbackincorrect);
       Swal.fire({
         target: document.getElementById("wrap-course-content"),
         imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
diff --git a/contenido/10.html b/contenido/10.html
index efb32ce..1c32cfd 100644
--- a/contenido/10.html
+++ b/contenido/10.html
@@ -27,8 +27,8 @@
   }
 
   .border-card {
-    background: #E31D73;
-    background: linear-gradient(to top, #E31D73 0%, #72256B 100%);
+    background: #e31d73;
+    background: linear-gradient(to top, #e31d73 0%, #72256b 100%);
   }
 
   .btn-answer {
@@ -47,15 +47,15 @@
     cursor: pointer;
   }
 </style>
-<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-11'>
-        <div class='row justify-content-center'>
+<div id="inicio" class="page-sco py-2 py-md-0 h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-11">
+        <div class="row justify-content-center">
           <div class="col-12 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
           <div class="col-12 mb-3 text-center">
@@ -64,22 +64,30 @@
           <div class="col-12">
             <div class="row justify-content-center align-items-center">
               <div class="col-4 text-center animate__animated animate__zoomIn">
-                <img src="img/10.0.png" class="img-fluid">
+                <img src="img/10.0.png" class="img-fluid" />
               </div>
               <div class="col-6">
                 <div class="card bg-custom border-0 rounded-3 p-0 bx-shadow">
                   <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
-                    <p>Omitir las medidas de seguridad podría provocarle <strong>infecciones del sitio de salida o peritonitis.</strong></p>
-                    <p class="mb-0">Si utiliza DPCA y vive en un medio ambiente con temperaturas exteriores menores a 15°C, puede ser que sienta más
-                      comodidad al <strong>precalentar la bolsa </strong>con solución dializante antes de utilizarla.</p>
+                    <p>
+                      Omitir las medidas de seguridad podría provocarle
+                      <strong>infecciones del sitio de salida o peritonitis.</strong>
+                    </p>
+                    <p class="mb-0">
+                      Si utiliza DPCA y vive en un medio ambiente con temperaturas exteriores menores a 15°C, puede ser
+                      que sienta más comodidad al <strong>precalentar la bolsa </strong>con solución dializante antes de
+                      utilizarla.
+                    </p>
                   </div>
                   <div
-                    class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
+                    class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
+                  >
                     <p class="mb-0 fw-bold text-center">Conozcamos las medidas de seguridad para hacerlo.</p>
                   </div>
                   <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
                     <div
-                      class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+                      class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                    >
                       <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                     </div>
                   </div>
@@ -92,15 +100,15 @@
     </div>
   </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-11'>
-        <div class='row justify-content-center'>
+<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-11">
+        <div class="row justify-content-center">
           <div class="col-10 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
             </div>
           </div>
           <div class="col-10 mb-1 text-center">
@@ -111,20 +119,28 @@
               <div class="row justify-content-center">
                 <div class="col-10">
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                    <img src="img/book0.png" class="img-fluid">
-                    <p class="mb-0"><strong>Instrucciones:</strong> Lea las siguientes frases y determine si son verdaderas o falsas para identificar las medidas de seguridad al
-                    precalentar la bolsa.</p>
+                    <img src="img/book0.png" class="img-fluid" />
+                    <p class="mb-0">
+                      <strong>Instrucciones:</strong> Lea las siguientes frases y determine si son verdaderas o falsas
+                      para identificar las medidas de seguridad al precalentar la bolsa.
+                    </p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
+          <div class="col-12 mb-3 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-8">
-            <div class="card border-card rounded-3 bx-shadow p-1 animate__animated animate__zoomIn" style="margin-top: 70px;">
+            <div
+              class="card border-card rounded-3 bx-shadow p-1 animate__animated animate__zoomIn"
+              style="margin-top: 70px"
+            >
               <div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pb-3 pt-0">
                 <div class="row justify-content-center">
                   <div class="col-12 text-center mb-3">
-                    <img src="img/10.1.png" class="img-fluid" style="margin-top: -70px;">
+                    <img src="img/10.1.png" class="img-fluid" style="margin-top: -70px" />
                   </div>
                   <div class="col-12 txt-pregunta fw-bold text-verde-oscuro text-center mb-3"></div>
                   <div class="col-12">
@@ -139,18 +155,18 @@
     </div>
   </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12">
         <div class="row justify-content-center">
           <div class="col-12 text-center mb-3">
-            <img src="img/cierre_actividad.png" class="img-fluid">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
           </div>
           <div class="col-12 mb-3 text-center">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
             </div>
           </div>
           <div class="col-12 mb-3 text-center">
@@ -159,10 +175,11 @@
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
+          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
             <div
               class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
-              onclick="CourseNav.reload()">
+              onclick="CourseNav.reload()"
+            >
               <h5 class="text-white fw-bold mb-0">Reintentar</h5>
             </div>
           </div>
@@ -174,7 +191,7 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
 
     let questions;
     let currentQuestionIndex = 0;
@@ -182,28 +199,28 @@
     let correctQuestions = 0;
     let maxQuestions = -1;
     let currentFichaIndex = 0;
-    const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
-    const good = CourseNav.createSound('audio/feedback-correct.mpeg');
+    const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
+    const good = CourseNav.createSound("audio/feedback-correct.mpeg");
 
-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
       e.preventDefault();
       CourseNav.soundClick();
-      $('#inicio').hide();
-      $('#desarrollo').show();
+      $("#inicio").hide();
+      $("#desarrollo").show();
     });
 
-    const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
+    const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
 
     function readExcelFile(url, callback) {
       var xhr = new XMLHttpRequest();
-      xhr.open('GET', url, true);
-      xhr.responseType = 'arraybuffer';
+      xhr.open("GET", url, true);
+      xhr.responseType = "arraybuffer";
       xhr.onload = function (e) {
         var arrayBuffer = xhr.response;
         var data = new Uint8Array(arrayBuffer);
         var workbook = XLSX.read(data, { type: "array" });
         var result = {};
-        workbook.SheetNames.forEach(sheetName => {
+        workbook.SheetNames.forEach((sheetName) => {
           var sheet = workbook.Sheets[sheetName];
           result[sheetName] = XLSX.utils.sheet_to_json(sheet);
         });
@@ -213,13 +230,13 @@
     }
 
     function procesarPreguntas(data) {
-      const preguntas = data.map(fila => {
+      const preguntas = data.map((fila) => {
         const opciones = [];
-        Object.keys(fila).forEach(key => {
-          if (key.startsWith('opcion')) {
+        Object.keys(fila).forEach((key) => {
+          if (key.startsWith("opcion")) {
             opciones.push({
               text: fila[key].trim(),
-              correct: key === 'opcion_c'
+              correct: key === "opcion_c",
             });
           }
         });
@@ -227,7 +244,7 @@
           pregunta: fila.pregunta.trim(),
           opciones: opciones,
           retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
-          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
+          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
         };
       });
       return preguntas;
@@ -247,36 +264,40 @@
         return;
       }
 
-      $('.border-card').hide();
+      $(".border-card").hide();
 
       currentQuestion = questions[currentQuestionIndex];
-      $('.txt-pregunta').text(currentQuestion.pregunta);
+      $(".txt-pregunta").text(currentQuestion.pregunta);
 
       setTimeout(() => {
-        $('.border-card').removeClass('animate__zoomIn').addClass('animate__zoomIn').show();
+        $(".border-card").removeClass("animate__zoomIn").addClass("animate__zoomIn").show();
       }, 100);
 
-      const answersContainer = $('.content-answers');
+      const answersContainer = $(".content-answers");
       answersContainer.empty();
 
       const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
 
-      shuffledOpciones.forEach(opcion => {
-        const icon = opcion.text.toLowerCase().includes('verdadero') ? '<i class="fa-solid fa-check me-2"></i>' : '<i class="fa-solid fa-xmark me-2"></i>';
-        const btn = $(`<div class="btn-answer px-3 py-2 d-flex flex-row justify-content-center align-items-center" data-answer="${opcion.correct}">${icon}${opcion.text}</div>`);
+      shuffledOpciones.forEach((opcion) => {
+        const icon = opcion.text.toLowerCase().includes("verdadero")
+          ? '<i class="fa-solid fa-check me-2"></i>'
+          : '<i class="fa-solid fa-xmark me-2"></i>';
+        const btn = $(
+          `<div class="btn-answer px-3 py-2 d-flex flex-row justify-content-center align-items-center" data-answer="${opcion.correct}">${icon}${opcion.text}</div>`,
+        );
         answersContainer.append(btn);
       });
 
-      $('.btn-answer').click(function() {
-        const isCorrect = $(this).data('answer') === true;
+      $(".btn-answer").click(function () {
+        const isCorrect = $(this).data("answer") === true;
 
-        $('.btn-answer').off('click').css('pointer-events', 'none');
+        $(".btn-answer").off("click").css("pointer-events", "none");
 
         if (isCorrect) {
-          $(this).addClass('bg-success text-white');
+          $(this).addClass("bg-success text-white");
           correctQuestions++;
         } else {
-          $(this).addClass('bg-danger text-white');
+          $(this).addClass("bg-danger text-white");
           //$('.btn-answer[data-answer="true"]').addClass('bg-success text-white');
         }
 
@@ -287,12 +308,13 @@
 
     function showFeedback(isCorrect) {
       Swal.fire({
-        target: document.getElementById('wrap-course-content'),
-        imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
+        target: document.getElementById("wrap-course-content"),
+        imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
         showConfirmButton: true,
         customClass: {
-          popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-          confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
+          popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+          confirmButton:
+            "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
         },
         confirmButtonText: "Cerrar",
         backdrop: "rgba(65, 60, 60, .95)",
@@ -300,7 +322,7 @@
         didClose: () => {
           currentQuestionIndex++;
           displayQuestion();
-        }
+        },
       });
     }
 
@@ -311,12 +333,12 @@
       CourseNav.setSlideVisited();
 
       if (passed) {
-        $('#desarrollo').hide();
-        $('#cierre').show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
       } else {
-        $('.col-reintentar').show();
-        $('#desarrollo').hide();
-        $('#cierre').show();
+        $(".col-reintentar").show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
       }
     }
 
diff --git a/contenido/11.html b/contenido/11.html
index e256f13..2aff232 100644
--- a/contenido/11.html
+++ b/contenido/11.html
@@ -159,6 +159,9 @@
                   <div class="row justify-content-center">
                     <div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div>
                     <div class="col-12 content-answers"></div>
+                    <div class="col-12 mt-3 text-center">
+                      <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/contenido/12.html b/contenido/12.html
index 6b30238..ecc7b75 100644
--- a/contenido/12.html
+++ b/contenido/12.html
@@ -449,9 +449,12 @@
             <h4 class="fw-bold text-verde-oscuro">${preguntaAleatoria.pregunta}</h4>
             <p class="text-muted">Puntos en juego: <strong>${puntajeEnJuego}</strong></p>
           </div>
-          <div class="content-answers">
+          <div class="content-answers mb-3">
             ${opcionesHTML}
           </div>
+          <div class="col-12 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
         `,
         showConfirmButton: false,
         allowOutsideClick: false,
diff --git a/contenido/13.html b/contenido/13.html
index ef4379e..f5f0f95 100644
--- a/contenido/13.html
+++ b/contenido/13.html
@@ -316,7 +316,7 @@
 
       let opcionesHTML = "";
       pregunta.opciones.forEach((opcion, index) => {
-        opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntosEnJuego}">
+        opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-3 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntosEnJuego}">
               <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
               <div class="txt-answer text-start ps-3">${opcion.text}</div>
             </div>`;
@@ -329,9 +329,12 @@
             <h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
             <p class="text-muted">Puntos en juego: <strong>${puntosEnJuego}</strong></p>
           </div>
-          <div class="content-answers">
+          <div class="content-answers mb-3">
             ${opcionesHTML}
           </div>
+          <div class="col-12 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
         `,
         showConfirmButton: false,
         allowOutsideClick: false,
diff --git a/contenido/14.html b/contenido/14.html
index d97dadc..055832c 100644
--- a/contenido/14.html
+++ b/contenido/14.html
@@ -120,13 +120,11 @@
               <div class="position-relative w-100">
                 <p>
                   Gracias a que la diálisis peritoneal es una terapia
-                  <strong class="text-lila-claro">portable,</strong> le permite mayores
-                  posibilidades de actividad laboral, vida escolar y posibilidad de viajar.
+                  <strong class="text-lila-claro">portable,</strong> le permite mayores posibilidades de actividad
+                  laboral, vida escolar y posibilidad de viajar.
                 </p>
               </div>
-              <div
-                class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s"
-              >
+              <div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s">
                 <div
                   class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
                 >
@@ -158,8 +156,8 @@
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
                     <img src="img/book0.png" class="img-fluid" />
                     <p class="mb-0">
-                      <strong>Instrucciones:</strong> Haga clic en cada caja y responda
-                      correctamente para recolectarla y completar la entrega domiciliaria.
+                      <strong>Instrucciones:</strong> Haga clic en cada caja y responda correctamente para recolectarla
+                      y completar la entrega domiciliaria.
                     </p>
                   </div>
                 </div>
@@ -254,10 +252,7 @@
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div
-            class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
-            style="display: none"
-          >
+          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
             <div
               class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
               onclick="CourseNav.reload()"
@@ -324,9 +319,7 @@
         return {
           pregunta: fila.pregunta.trim(),
           opciones: shuffleArray(opciones),
-          retroalimentacion_correcta: fila.retroalimentacion_correcta
-            ? fila.retroalimentacion_correcta.trim()
-            : "",
+          retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
           retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
             ? fila.retroalimentacion_incorrecta.trim()
             : "",
@@ -362,9 +355,12 @@
           <div class="text-center mb-3">
             <h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
           </div>
-          <div class="content-answers">
+          <div class="content-answers mb-3">
             ${opcionesHTML}
           </div>
+          <div class="col-12 text-center">
+              <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+            </div>
         `,
         showConfirmButton: false,
         allowOutsideClick: false,
@@ -418,7 +414,8 @@
 
           const camion = $("#camion-transporte");
           const paqueteWidth = currentPaquete.outerWidth() + 15;
-          const currentX = camion.css("transform") === "none" ? 0 : parseFloat(camion.css("transform").split(",")[4]) || 0;
+          const currentX =
+            camion.css("transform") === "none" ? 0 : parseFloat(camion.css("transform").split(",")[4]) || 0;
           camion.css("transform", `translateX(${currentX + paqueteWidth}px)`);
 
           if (questionIndex < questions.length - 1) {
@@ -459,11 +456,7 @@
       const paqueteId = $(this).attr("id");
       const index = parseInt(paqueteId.replace("paquete", ""));
 
-      if (
-        !$(this).hasClass("disabled") &&
-        !$(this).hasClass("completed") &&
-        index < questions.length
-      ) {
+      if (!$(this).hasClass("disabled") && !$(this).hasClass("completed") && index < questions.length) {
         $(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
         CourseNav.soundClick();
         mostrarPregunta(index);
diff --git a/contenido/15.html b/contenido/15.html
index c88b95f..8b0fa5c 100644
--- a/contenido/15.html
+++ b/contenido/15.html
@@ -50,12 +50,12 @@
     height: 35px;
     background: #4d4d4d;
     border: 4px solid #808080;
-    box-shadow: 0 0 15px rgba(0,0,0,.5);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
   }
 
   .med_style.bien {
-    background: #8EBA1F;
-    background: linear-gradient(to right, #8EBA1F 0%, #105742 100%);
+    background: #8eba1f;
+    background: linear-gradient(to right, #8eba1f 0%, #105742 100%);
     border: 4px solid #ffffff;
   }
 
@@ -67,7 +67,7 @@
   .btn-answer {
     cursor: pointer;
     border-radius: 10px;
-    box-shadow: 0 0 2px rgba(0,0,0,.5);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   }
 
   .letter {
@@ -121,31 +121,35 @@
     cursor: pointer;
   }
 </style>
-<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-11'>
-        <div class='row justify-content-center'>
+<div id="inicio" class="page-sco py-2 py-md-0 h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-11">
+        <div class="row justify-content-center">
           <div class="col-12 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Actuación ante incidencias</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
           <div class="col-12">
             <div class="row justify-content-center align-items-center">
               <div class="col-4 text-center animate__animated animate__zoomIn">
-                <img src="img/15.0.png" class="img-fluid">
+                <img src="img/15.0.png" class="img-fluid" />
               </div>
               <div class="col-5">
                 <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
                   <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center">
-                    <p class="mb-0">Ante las situaciones que se presentan a continuación, es indispensable que <strong class="text-verde-ceniza">guarde la calma y actúe
-                        oportunamente </strong>para recibir la atención adecuada.</p>
+                    <p class="mb-0">
+                      Ante las situaciones que se presentan a continuación, es indispensable que
+                      <strong class="text-verde-ceniza">guarde la calma y actúe oportunamente </strong>para recibir la
+                      atención adecuada.
+                    </p>
                   </div>
                   <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-1s">
                     <div
-                      class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+                      class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                    >
                       <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                     </div>
                   </div>
@@ -158,15 +162,15 @@
     </div>
   </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
-        <div class='row justify-content-center'>
+<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12">
+        <div class="row justify-content-center">
           <div class="col-10 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Actuación ante incidencias</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
             </div>
           </div>
           <div class="col-12 px-0 mb-3">
@@ -174,8 +178,11 @@
               <div class="row justify-content-center">
                 <div class="col-10">
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                    <img src="img/book1.png" class="img-fluid">
-                    <p class="mb-0"><strong>Instrucciones:</strong> Dé clic en cada una de las salas y conteste la pregunta sobre cómo atender la incidencia para ganar los puntos.</p>
+                    <img src="img/book1.png" class="img-fluid" />
+                    <p class="mb-0">
+                      <strong>Instrucciones:</strong> Dé clic en cada una de las salas y conteste la pregunta sobre cómo
+                      atender la incidencia para ganar los puntos.
+                    </p>
                   </div>
                 </div>
               </div>
@@ -185,7 +192,8 @@
             <div class="row justify-content-center align-items-center">
               <div class="col-12 text-center mb-3">
                 <div
-                  class="content-medidor bg-white rounded-5 p-3 d-inline-flex flex-row justify-content-center align-items-center gap-3">
+                  class="content-medidor bg-white rounded-5 p-3 d-inline-flex flex-row justify-content-center align-items-center gap-3"
+                >
                   <h4 class="mb-0 fw-bold text-verde-pino">Puntos:</h4>
                   <div class="grids-med d-flex flex-row justify-content-center align-items-center gap-3">
                     <div id="#med0" class="med_style"></div>
@@ -200,27 +208,45 @@
               <div class="col-11">
                 <div class="d-flex flex-row justify-content-center gap-2">
                   <div class="object-btn text-center d-inline-block" data-obj="0">
-                    <img src="img/15.1.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img
+                      src="img/15.1.png"
+                      class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
+                    /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Infección del sitio de salida</h4>
                   </div>
                   <div class="object-btn text-center d-inline-block" data-obj="1">
-                    <img src="img/15.2.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img
+                      src="img/15.2.png"
+                      class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
+                    /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Peritonitis</h4>
                   </div>
                   <div class="object-btn text-center d-inline-block" data-obj="2">
-                    <img src="img/15.3.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img
+                      src="img/15.3.png"
+                      class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
+                    /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Crisis hipertensiva</h4>
                   </div>
                   <div class="object-btn text-center d-inline-block" data-obj="3">
-                    <img src="img/15.4.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img
+                      src="img/15.4.png"
+                      class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
+                    /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Evento cardiovascular</h4>
                   </div>
                   <div class="object-btn text-center d-inline-block" data-obj="4">
-                    <img src="img/15.5.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img
+                      src="img/15.5.png"
+                      class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
+                    /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Desconexión accidental</h4>
                   </div>
                   <div class="object-btn text-center d-inline-block" data-obj="5">
-                    <img src="img/15.6.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img
+                      src="img/15.6.png"
+                      class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"
+                    /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Fractura del catéter</h4>
                   </div>
                 </div>
@@ -232,27 +258,28 @@
     </div>
   </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12">
         <div class="row justify-content-center">
           <div class="col-12 text-center mb-3">
-            <img src="img/cierre_actividad.png" class="img-fluid">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
           </div>
           <div class="col-12 mb-3 text-center">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Actuación ante incidencias</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
             </div>
           </div>
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
+          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
             <div
               class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
-              onclick="CourseNav.reload()">
+              onclick="CourseNav.reload()"
+            >
               <h5 class="text-white fw-bold mb-0">Reintentar</h5>
             </div>
           </div>
@@ -264,37 +291,44 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
 
     let questions;
     let currentQuestionIndex = 0;
     let currentQuestion;
     let correctQuestions = 0;
     let maxQuestions = -1;
-    const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
-    const good = CourseNav.createSound('audio/feedback-correct.mpeg');
-    const imganesPop = ['<img src="img/15.1.png" class="img-fluid">', '<img src="img/15.2.png" class="img-fluid">', '<img src="img/15.3.png" class="img-fluid">', '<img src="img/15.4.png" class="img-fluid">', '<img src="img/15.5.png" class="img-fluid">', '<img src="img/15.6.png" class="img-fluid">'];
+    const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
+    const good = CourseNav.createSound("audio/feedback-correct.mpeg");
+    const imganesPop = [
+      '<img src="img/15.1.png" class="img-fluid">',
+      '<img src="img/15.2.png" class="img-fluid">',
+      '<img src="img/15.3.png" class="img-fluid">',
+      '<img src="img/15.4.png" class="img-fluid">',
+      '<img src="img/15.5.png" class="img-fluid">',
+      '<img src="img/15.6.png" class="img-fluid">',
+    ];
 
-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
       e.preventDefault();
       CourseNav.soundClick();
-      $('.wrap-course-content').addClass('fake1').removeClass('fake');
-      $('#inicio').hide();
-      $('#desarrollo').show();
+      $(".wrap-course-content").addClass("fake1").removeClass("fake");
+      $("#inicio").hide();
+      $("#desarrollo").show();
     });
 
-    const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
+    const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
 
     function readExcelFile(url, callback) {
       var xhr = new XMLHttpRequest();
-      xhr.open('GET', url, true);
-      xhr.responseType = 'arraybuffer';
+      xhr.open("GET", url, true);
+      xhr.responseType = "arraybuffer";
       xhr.onload = function (e) {
         var arrayBuffer = xhr.response;
         var data = new Uint8Array(arrayBuffer);
         var workbook = XLSX.read(data, { type: "array" });
         var result = {};
-        workbook.SheetNames.forEach(sheetName => {
+        workbook.SheetNames.forEach((sheetName) => {
           var sheet = workbook.Sheets[sheetName];
           result[sheetName] = XLSX.utils.sheet_to_json(sheet);
         });
@@ -304,21 +338,23 @@
     }
 
     function procesarPreguntas(data) {
-      const preguntas = data.map(fila => {
+      const preguntas = data.map((fila) => {
         const opciones = [];
-        Object.keys(fila).forEach(key => {
-          if (key.startsWith('opcion')) {
+        Object.keys(fila).forEach((key) => {
+          if (key.startsWith("opcion")) {
             opciones.push({
               text: fila[key].trim(),
-              correct: key === 'opcion_c'
+              correct: key === "opcion_c",
             });
           }
         });
         return {
           pregunta: fila.pregunta.trim(),
           opciones: shuffleArray(opciones),
-          retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
-          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
+          retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
+          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
+            ? fila.retroalimentacion_incorrecta.trim()
+            : "",
         };
       });
       return preguntas;
@@ -336,7 +372,7 @@
       if (questionIndex >= questions.length) return;
 
       const pregunta = questions[questionIndex];
-      let opcionesHTML = '';
+      let opcionesHTML = "";
       pregunta.opciones.forEach((opcion, index) => {
         opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
               <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
@@ -345,16 +381,19 @@
       });
 
       Swal.fire({
-        target: document.getElementById('wrap-course-content'),
+        target: document.getElementById("wrap-course-content"),
         html: `
           <div id="pops-questions">
             <div class="container-fluid px-0" style="overflow: hidden;border-top-left-radius: 12px;border-top-right-radius: 12px;">
               <div class="row justify-content-center align-items-center">
                 <div class="col-12 text-center mb-3 img-pregunta bg-secondary">${imganesPop[questionIndex]}</div>
                 <div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3 px-4">${pregunta.pregunta}</div>
-                <div class="col-12 px-4">
+                <div class="col-12 px-4 mb-3">
                   <div id="txt-answers" class="d-flex flex-column justify-content-center gap-3 text-start">${opcionesHTML}</div>
                 </div>
+                <div class="col-12 text-center">
+              <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+            </div>
               </div>
             </div>
           </div>
@@ -362,51 +401,52 @@
         showConfirmButton: false,
         allowOutsideClick: false,
         customClass: {
-          popup: 'pop_html_style padd_perso border border-3 border-verde-pasto rounded-4'
+          popup: "pop_html_style padd_perso border border-3 border-verde-pasto rounded-4",
         },
         backdrop: "rgba(65, 60, 60, .95)",
         width: "50em",
         didOpen: () => {
           function handleAnswer() {
-            const isCorrect = $(this).data('correct') === true;
-            $('.btn-answer').off('click').css('pointer-events', 'none');
+            const isCorrect = $(this).data("correct") === true;
+            $(".btn-answer").off("click").css("pointer-events", "none");
 
             CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
 
             if (isCorrect) {
               correctQuestions++;
-              $(`.med_style:eq(${questionIndex})`).addClass('bien');
+              $(`.med_style:eq(${questionIndex})`).addClass("bien");
               setTimeout(() => {
                 Swal.close();
                 mostrarFeedback(pregunta, questionIndex);
               }, 250);
             } else {
               setTimeout(() => {
-                $('.btn-answer').css('pointer-events', '').on('click', handleAnswer);
+                $(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
               }, 600);
             }
           }
-          $('.btn-answer').on('click', handleAnswer);
-        }
+          $(".btn-answer").on("click", handleAnswer);
+        },
       });
     }
 
     function mostrarFeedback(pregunta, questionIndex) {
       Swal.fire({
-        target: document.getElementById('wrap-course-content'),
-        imageUrl: 'img/good.png',
-        text: pregunta.retroalimentacion_correcta || '',
+        target: document.getElementById("wrap-course-content"),
+        imageUrl: "img/good.png",
+        text: pregunta.retroalimentacion_correcta || "",
         showConfirmButton: true,
         customClass: {
-          popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-          confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
+          popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+          confirmButton:
+            "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
         },
         confirmButtonText: "Continuar",
         backdrop: "rgba(65, 60, 60, .95)",
         width: "35em",
         didClose: () => {
           const currentBtn = $(`.object-btn[data-obj="${questionIndex}"]`);
-          currentBtn.addClass('completed good');
+          currentBtn.addClass("completed good");
           currentQuestionIndex++;
 
           if (currentQuestionIndex >= questions.length) {
@@ -414,7 +454,7 @@
               finalizarJuego();
             }, 700);
           }
-        }
+        },
       });
     }
 
@@ -422,25 +462,25 @@
       const percentage = (correctQuestions / questions.length) * 100;
       const aprobado = percentage >= 80;
 
-      $('.wrap-course-content').addClass('fake2').removeClass('fake1');
+      $(".wrap-course-content").addClass("fake2").removeClass("fake1");
 
       CourseNav.setSlideVisited();
 
       if (aprobado) {
-        $('#desarrollo').hide();
-        $('#cierre').show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
       } else {
-        $('.col-reintentar').show();
-        $('#desarrollo').hide();
-        $('#cierre').show();
+        $(".col-reintentar").show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
       }
     }
 
-    $('.object-btn').click(function() {
-      const index = parseInt($(this).data('obj'));
-      if (!$(this).hasClass('completed') && !$(this).hasClass('disabled')) {
-        $(this).find('img').removeClass('animate__pulse animate__infinite');
-        $(this).addClass('disabled');
+    $(".object-btn").click(function () {
+      const index = parseInt($(this).data("obj"));
+      if (!$(this).hasClass("completed") && !$(this).hasClass("disabled")) {
+        $(this).find("img").removeClass("animate__pulse animate__infinite");
+        $(this).addClass("disabled");
         CourseNav.soundClick();
         mostrarPregunta(index);
       }
diff --git a/contenido/16.html b/contenido/16.html
index db92a28..96ecec4 100644
--- a/contenido/16.html
+++ b/contenido/16.html
@@ -409,9 +409,12 @@
     <div class="container-fluid">
       <div class="row justify-content-center align-items-center">
         <div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div>
-        <div class="col-12">
+        <div class="col-12 mb-3">
           <div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
         </div>
+        <div class="col-12 text-center">
+          <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+        </div>
       </div>
     </div>
   </div>
diff --git a/contenido/17.html b/contenido/17.html
index 5236dda..896ca4d 100644
--- a/contenido/17.html
+++ b/contenido/17.html
@@ -1,376 +1,385 @@
 <style>
-    .fake {
-        background-image: url(img/bg04.jpg);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        background-attachment: fixed;
-    }
+  .fake {
+    background-image: url(img/bg04.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+  }
 
-    .fake1 {
-        background-image: url(img/bg03.jpg);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        background-attachment: fixed;
-    }
+  .fake1 {
+    background-image: url(img/bg03.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+  }
 
-    .btn-comenzar {
-        border-radius: 20px;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        cursor: pointer;
-    }
+  .btn-comenzar {
+    border-radius: 20px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    cursor: pointer;
+  }
 
+  /* Estilos para drag and drop */
+  .options {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 15px;
+    /* padding: 20px; */
+  }
 
-    /* Estilos para drag and drop */
-    .options {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-template-rows: repeat(2, 1fr);
-        gap: 15px;
-        /* padding: 20px; */
-    }
+  .draggable-option {
+    cursor: grab;
+    background-image: url("img/17.2.png");
+    background-size: 100% auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 15px;
+    border: 3px solid #dee2e6;
+    transition: all 0.3s ease;
+    user-select: none;
+    height: 180px;
+    width: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 15px;
+    color: #333;
+    font-weight: bold;
+    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
+    border: none;
+    position: relative;
+  }
 
-    .draggable-option {
-        cursor: grab;
-        background-image: url('img/17.2.png');
-        background-size: 100% auto;
-        background-position: center;
-        background-repeat: no-repeat;
-        border-radius: 15px;
-        border: 3px solid #dee2e6;
-        transition: all 0.3s ease;
-        user-select: none;
-        height: 180px;
-        width: 200px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        padding: 15px;
-        color: #333;
-        font-weight: bold;
-        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
-        border: none;
-        position: relative;
-    }
+  .draggable-option:hover {
+    border-color: #6c9d7a;
+    transform: translateY(-5px) scale(1.05);
+    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
+    /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
+  }
 
-    .draggable-option:hover {
-        border-color: #6c9d7a;
-        transform: translateY(-5px) scale(1.05);
-        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
-        /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
-    }
+  .draggable-option.dragging {
+    opacity: 0.7;
+    transform: rotate(8deg) scale(0.95);
+    cursor: grabbing;
+  }
 
-    .draggable-option.dragging {
-        opacity: 0.7;
-        transform: rotate(8deg) scale(0.95);
-        cursor: grabbing;
-    }
+  .option-text {
+    position: absolute;
+    top: 44%;
+    left: 0%;
+    width: 90%;
+    background: transparent;
+    height: 40%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-    .option-text {
-        position: absolute;
-        top: 44%;
-        left: 0%;
-        width: 90%;
-        background: transparent;
-        height: 40%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+  .container-drag {
+    min-height: 150px;
+    border: 3px dashed #ccc !important;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
 
-    .container-drag {
-        min-height: 150px;
-        border: 3px dashed #ccc !important;
-        transition: all 0.3s ease;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-    }
+  .container-drag.drag-over {
+    border-color: #6c9d7a !important;
+    background-color: rgba(108, 157, 122, 0.1);
+  }
 
-    .container-drag.drag-over {
-        border-color: #6c9d7a !important;
-        background-color: rgba(108, 157, 122, 0.1);
-    }
+  .container-drag.has-answer {
+    border-color: #925c8d !important;
+    background-color: rgba(146, 92, 141, 0.1);
+  }
 
-    .container-drag.has-answer {
-        border-color: #925c8d !important;
-        background-color: rgba(146, 92, 141, 0.1);
-    }
+  .draggable-option.used {
+    opacity: 0.3;
+    pointer-events: none;
+    text-decoration: line-through;
+  }
 
-    .draggable-option.used {
-        opacity: 0.3;
-        pointer-events: none;
-        text-decoration: line-through;
-    }
+  .draggable-option.hidden {
+    display: none;
+  }
 
-    .draggable-option.hidden {
-        display: none;
-    }
+  .dropped-option {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #925c8d;
+    color: white;
+    padding: 10px 15px;
+    border-radius: 8px;
+    font-weight: bold;
+    z-index: 10;
+  }
 
-    .dropped-option {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: #925c8d;
-        color: white;
-        padding: 10px 15px;
-        border-radius: 8px;
-        font-weight: bold;
-        z-index: 10;
-    }
-
-    .btn-reintentar {
+  .btn-reintentar {
     cursor: pointer;
   }
 </style>
-<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
-    <div class='container h-100'>
-        <div class='row justify-content-center align-items-center h-100'>
-            <div class='col-11'>
-                <div class='row justify-content-center align-items-center'>
-                    <div class="col-12 text-center animate__animated animate__bounceInDown">
-                        <div class="position-relative d-inline-block">
-                            <h2 class="text-primary mb-1 fw-bold">Procedimientos</h2>
-                            <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
-                        </div>
-                    </div>
-                    <div class="col-12 mb-3 text-center">
-                        <h4 class="fw-bold text-verde-pino">DPCA</h4>
-                    </div>
-                    <div class="col-5 text-center intro mb-3 animate__animated animate__flipInX">
-                        <div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
-                            <p class="my-0">Para que una terapia de diálisis tenga los resultados esperados, se deben
-                                conocer los
-                                pasos necesarios para llevarla a cabo.</p>
+<div id="inicio" class="page-sco py-2 py-md-0 h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-11">
+        <div class="row justify-content-center align-items-center">
+          <div class="col-12 text-center animate__animated animate__bounceInDown">
+            <div class="position-relative d-inline-block">
+              <h2 class="text-primary mb-1 fw-bold">Procedimientos</h2>
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
+            </div>
+          </div>
+          <div class="col-12 mb-3 text-center">
+            <h4 class="fw-bold text-verde-pino">DPCA</h4>
+          </div>
+          <div class="col-5 text-center intro mb-3 animate__animated animate__flipInX">
+            <div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
+              <p class="my-0">
+                Para que una terapia de diálisis tenga los resultados esperados, se deben conocer los pasos necesarios
+                para llevarla a cabo.
+              </p>
 
-                            <p>En esta actividad podrá demostrar cuánto conoce acerca de los <b
-                                    class="text-morado-claro">procedimientos de
-                                    conexión
-                                    y desconexión de la DPCA.</b></p>
-                            <div class="w-100 position-relative text-center">
-                                <div
-                                    class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
-                                    <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
-                        <img src="img/17.0.png" class="img-fluid">
-                    </div>
+              <p>
+                En esta actividad podrá demostrar cuánto conoce acerca de los
+                <b class="text-morado-claro">procedimientos de conexión y desconexión de la DPCA.</b>
+              </p>
+              <div class="w-100 position-relative text-center">
+                <div
+                  class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                >
+                  <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                 </div>
+              </div>
             </div>
+          </div>
+          <div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
+            <img src="img/17.0.png" class="img-fluid" />
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
-    <div class='container h-100'>
-        <div class='row justify-content-center align-items-center h-100'>
-            <div class='col-12'>
-                <div class='row justify-content-center mb-5'>
-                    <div class="col-11 text-center animate__animated animate__bounceInDown">
-                        <div class="position-relative d-inline-block">
-                            <h2 class="text-primary mb-1 fw-bold">Procedimientos</h2>
-                            <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
-                        </div>
-                    </div>
-                    <div class="col-12 mb-3 text-center">
-                        <h4 class="fw-bold text-verde-pino">DPCA</h4>
-                    </div>
-                    <div class="col-12 px-0 mb-3">
-                        <div class="row justify-content-center">
-                            <div class="col-12">
-                                <div class="card bg-verde-claro border-0 rounded-0 py-2 px-3">
-                                    <div class="row justify-content-start">
-                                        <div class="col-12">
-                                            <div
-                                                class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
-                                                <img src="img/book3.png" class="img-fluid">
-                                                <p class="mb-0"><strong>Instrucciones:</strong> Lea con atención cada descripción y arrastre hacia ella el sobre con el nombre del paso al que corresponde.
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-11">
-                        <div
-                            class="row justify-content-center align-items-center animate__animated animate__slideInRight no-overflow">
-                            <div class="col-4">
-                                <div class="card border-0 bg-verde-pino rounded">
-                                    <div class="card-body">
-                                        <div class="row justify-content-center">
-                                            <div class="col-7">
-                                                <div
-                                                    class="card bg-transparent border border-2 border-white custom-card p-5 container-drag">
-                                                    <img src="img/17.1.png" class="img-fluid">
-                                                </div>
-                                            </div>
-                                            <div class="col-10 text-white mt-3">
-                                                <div class="question">Lorem ipsum dolor, sit amet consectetur
-                                                    adipisicing elit. Minima aliquam placeat neque, officia est laborum
-                                                    molestias voluptatibus pariatur, quaerat dolorum, et omnis mollitia.
-                                                    Dolorum facere minima at quas? Quo, praesentium?</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-8">
-                                <div class="options"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12">
+        <div class="row justify-content-center mb-5">
+          <div class="col-11 text-center animate__animated animate__bounceInDown">
+            <div class="position-relative d-inline-block">
+              <h2 class="text-primary mb-1 fw-bold">Procedimientos</h2>
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
+          </div>
+          <div class="col-12 mb-3 text-center">
+            <h4 class="fw-bold text-verde-pino">DPCA</h4>
+          </div>
+          <div class="col-12 px-0 mb-3">
+            <div class="row justify-content-center">
+              <div class="col-12">
+                <div class="card bg-verde-claro border-0 rounded-0 py-2 px-3">
+                  <div class="row justify-content-start">
+                    <div class="col-12">
+                      <div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
+                        <img src="img/book3.png" class="img-fluid" />
+                        <p class="mb-0">
+                          <strong>Instrucciones:</strong> Lea con atención cada descripción y arrastre hacia ella el
+                          sobre con el nombre del paso al que corresponde.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 mb-3 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
+          <div class="col-11">
+            <div
+              class="row justify-content-center align-items-center animate__animated animate__slideInRight no-overflow"
+            >
+              <div class="col-4">
+                <div class="card border-0 bg-verde-pino rounded">
+                  <div class="card-body">
+                    <div class="row justify-content-center">
+                      <div class="col-7">
+                        <div class="card bg-transparent border border-2 border-white custom-card p-5 container-drag">
+                          <img src="img/17.1.png" class="img-fluid" />
+                        </div>
+                      </div>
+                      <div class="col-10 text-white mt-3">
+                        <div class="question">
+                          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima aliquam placeat neque,
+                          officia est laborum molestias voluptatibus pariatur, quaerat dolorum, et omnis mollitia.
+                          Dolorum facere minima at quas? Quo, praesentium?
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-8">
+                <div class="options"></div>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-    <div class='container h-100'>
-        <div class='row justify-content-center align-items-center h-100'>
-            <div class='col-12'>
-                <div class="row justify-content-center">
-                    <div class="col-12 text-center mb-3">
-                        <img src="img/cierre_actividad.png" class="img-fluid">
-                    </div>
-                    <div class="col-12 mb-3 text-center">
-                        <div class="position-relative d-inline-block">
-                            <h2 class="text-primary mb-1 fw-bold">Procedimientos</h2>
-                            <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
-                        </div>
-                    </div>
-                    <div class="col-12 mb-3 text-center">
-                        <h4 class="fw-bold text-verde-pino">DPCA</h4>
-                    </div>
-                    <div class="col-12 text-center mb-3">
-                        <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
-                    </div>
-                    <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
-                        style="display: none;">
-                        <div class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
-                            onclick="CourseNav.reload()">
-                            <h5 class="text-white fw-bold mb-0">Reintentar</h5>
-                        </div>
-                    </div>
-                </div>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12">
+        <div class="row justify-content-center">
+          <div class="col-12 text-center mb-3">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
+          </div>
+          <div class="col-12 mb-3 text-center">
+            <div class="position-relative d-inline-block">
+              <h2 class="text-primary mb-1 fw-bold">Procedimientos</h2>
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
             </div>
+          </div>
+          <div class="col-12 mb-3 text-center">
+            <h4 class="fw-bold text-verde-pino">DPCA</h4>
+          </div>
+          <div class="col-12 text-center mb-3">
+            <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
+          </div>
+          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
+            <div
+              class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+              onclick="CourseNav.reload()"
+            >
+              <h5 class="text-white fw-bold mb-0">Reintentar</h5>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
 <script>
-    $(function () {
-        "use strict";
-        $('.wrap-course-content').addClass('fake');
+  $(function () {
+    "use strict";
+    $(".wrap-course-content").addClass("fake");
 
-        setTimeout(() => {
-            $('.intro').removeClass('animate__flipInX');
-        }, 600);
+    setTimeout(() => {
+      $(".intro").removeClass("animate__flipInX");
+    }, 600);
 
-        var preguntasActual = 0,
-            preguntasMax = 6,
-            preguntasCorrectas = 0;
-        const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
-        const good = CourseNav.createSound("audio/feedback-correct.mpeg");
+    var preguntasActual = 0,
+      preguntasMax = 6,
+      preguntasCorrectas = 0;
+    const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
+    const good = CourseNav.createSound("audio/feedback-correct.mpeg");
 
-        $('.btn-comenzar').click(function (e) {
-            e.preventDefault();
-            CourseNav.soundClick();
-            $('#inicio').hide();
-            $('#desarrollo').show();
-            inicializarTodasLasOpciones();
-            mostrarPregunta();
+    $(".btn-comenzar").click(function (e) {
+      e.preventDefault();
+      CourseNav.soundClick();
+      $("#inicio").hide();
+      $("#desarrollo").show();
+      inicializarTodasLasOpciones();
+      mostrarPregunta();
+    });
+
+    const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
+
+    function readExcelFile(url, callback) {
+      var xhr = new XMLHttpRequest();
+      xhr.open("GET", url, true);
+      xhr.responseType = "arraybuffer";
+      xhr.onload = function (e) {
+        var arrayBuffer = xhr.response;
+        var data = new Uint8Array(arrayBuffer);
+        var workbook = XLSX.read(data, { type: "array" });
+        var result = {};
+        workbook.SheetNames.forEach((sheetName) => {
+          var sheet = workbook.Sheets[sheetName];
+          result[sheetName] = XLSX.utils.sheet_to_json(sheet);
         });
+        callback(result);
+      };
+      xhr.send();
+    }
 
-        const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
-
-        function readExcelFile(url, callback) {
-            var xhr = new XMLHttpRequest();
-            xhr.open("GET", url, true);
-            xhr.responseType = "arraybuffer";
-            xhr.onload = function (e) {
-                var arrayBuffer = xhr.response;
-                var data = new Uint8Array(arrayBuffer);
-                var workbook = XLSX.read(data, { type: "array" });
-                var result = {};
-                workbook.SheetNames.forEach((sheetName) => {
-                    var sheet = workbook.Sheets[sheetName];
-                    result[sheetName] = XLSX.utils.sheet_to_json(sheet);
-                });
-                callback(result);
-            };
-            xhr.send();
-        }
-
-        function procesarPreguntas(data) {
-            const preguntas = data.map((fila) => {
-                const opciones = [];
-                Object.keys(fila).forEach((key) => {
-                    if (key.startsWith("opcion")) {
-                        opciones.push({
-                            text: fila[key].trim(),
-                            correct: key === "opcion_c",
-                        });
-                    }
-                });
-                return {
-                    pregunta: fila.pregunta.trim(),
-                    opciones: opciones,
-                    retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
-                    retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
-                };
+    function procesarPreguntas(data) {
+      const preguntas = data.map((fila) => {
+        const opciones = [];
+        Object.keys(fila).forEach((key) => {
+          if (key.startsWith("opcion")) {
+            opciones.push({
+              text: fila[key].trim(),
+              correct: key === "opcion_c",
             });
-            return preguntas;
-        }
+          }
+        });
+        return {
+          pregunta: fila.pregunta.trim(),
+          opciones: opciones,
+          retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
+          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
+            ? fila.retroalimentacion_incorrecta.trim()
+            : "",
+        };
+      });
+      return preguntas;
+    }
 
-        function shuffleArray(array) {
-            for (let i = array.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [array[i], array[j]] = [array[j], array[i]];
-            }
-            return array;
-        }
+    function shuffleArray(array) {
+      for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+      }
+      return array;
+    }
 
-        let questions = [];
-        let currentQuestion = null;
-        let currentQuestionIndex = 0;
-        let todasLasOpciones = [];
+    let questions = [];
+    let currentQuestion = null;
+    let currentQuestionIndex = 0;
+    let todasLasOpciones = [];
 
-        function inicializarTodasLasOpciones() {
-            todasLasOpciones = [];
+    function inicializarTodasLasOpciones() {
+      todasLasOpciones = [];
 
-            // Recopilar todas las opciones de todas las preguntas
-            questions.forEach((pregunta, preguntaIndex) => {
-                pregunta.opciones.forEach((opcion, opcionIndex) => {
-                    todasLasOpciones.push({
-                        text: opcion.text,
-                        correct: opcion.correct,
-                        preguntaIndex: preguntaIndex,
-                        id: `pregunta-${preguntaIndex}-opcion-${opcionIndex}`
-                    });
-                });
-            });
+      // Recopilar todas las opciones de todas las preguntas
+      questions.forEach((pregunta, preguntaIndex) => {
+        pregunta.opciones.forEach((opcion, opcionIndex) => {
+          todasLasOpciones.push({
+            text: opcion.text,
+            correct: opcion.correct,
+            preguntaIndex: preguntaIndex,
+            id: `pregunta-${preguntaIndex}-opcion-${opcionIndex}`,
+          });
+        });
+      });
 
-            // Barajar todas las opciones
-            todasLasOpciones = shuffleArray(todasLasOpciones);
+      // Barajar todas las opciones
+      todasLasOpciones = shuffleArray(todasLasOpciones);
 
-            // Mostrar todas las opciones
-            mostrarTodasLasOpciones();
-        }
+      // Mostrar todas las opciones
+      mostrarTodasLasOpciones();
+    }
 
-        function mostrarTodasLasOpciones() {
-            const $options = $('.options');
-            $options.empty();
+    function mostrarTodasLasOpciones() {
+      const $options = $(".options");
+      $options.empty();
 
-            todasLasOpciones.forEach((opcion, index) => {
-                const $option = $(`
+      todasLasOpciones.forEach((opcion, index) => {
+        const $option = $(`
                     <div class="draggable-option" draggable="true"
                          data-correct="${opcion.correct}"
                          data-pregunta-index="${opcion.preguntaIndex}"
@@ -378,169 +387,170 @@
                         <div class="option-text">${opcion.text}</div>
                     </div>
                 `);
-                $options.append($option);
-            });
+        $options.append($option);
+      });
 
-            setupDragAndDrop();
+      setupDragAndDrop();
+    }
+
+    function mostrarPregunta() {
+      if (questions.length === 0 || currentQuestionIndex >= questions.length) {
+        finalizarJuego();
+        return;
+      }
+
+      currentQuestion = questions[currentQuestionIndex];
+
+      // Mostrar la pregunta en el elemento .question
+      $(".question").text(currentQuestion.pregunta);
+
+      // Limpiar el área de drop
+      $(".container-drag").removeClass("has-answer").find(".dropped-option").remove();
+
+      // Rehabilitar todas las opciones para la nueva pregunta
+      $(".draggable-option").attr("draggable", true).css({
+        opacity: "1",
+        "pointer-events": "auto",
+      });
+    }
+
+    function setupDragAndDrop() {
+      const $draggables = $(".draggable-option");
+      const $dropZone = $(".container-drag");
+
+      // Eventos para elementos draggable
+      $draggables.on("dragstart", function (e) {
+        $(this).addClass("dragging");
+        e.originalEvent.dataTransfer.setData("text/plain", "");
+        e.originalEvent.dataTransfer.effectAllowed = "move";
+      });
+
+      $draggables.on("dragend", function (e) {
+        $(this).removeClass("dragging");
+      });
+
+      // Eventos para zona de drop
+      $dropZone.on("dragover", function (e) {
+        e.preventDefault();
+        e.originalEvent.dataTransfer.dropEffect = "move";
+        $(this).addClass("drag-over");
+      });
+
+      $dropZone.on("dragleave", function (e) {
+        $(this).removeClass("drag-over");
+      });
+
+      $dropZone.on("drop", function (e) {
+        e.preventDefault();
+        $(this).removeClass("drag-over");
+
+        const $draggedElement = $(".dragging");
+        if ($draggedElement.length > 0) {
+          manejarDrop($draggedElement);
         }
+      });
+    }
 
-        function mostrarPregunta() {
-            if (questions.length === 0 || currentQuestionIndex >= questions.length) {
-                finalizarJuego();
-                return;
-            }
+    function manejarDrop($draggedElement) {
+      const isCorrect = $draggedElement.data("correct") === true;
+      const preguntaIndexOpcion = $draggedElement.data("pregunta-index");
+      const optionText = $draggedElement.find(".option-text").text() || $draggedElement.text();
 
-            currentQuestion = questions[currentQuestionIndex];
+      // Verificar si la opción corresponde a la pregunta actual
+      const esOpcionDeLaPreguntaActual = preguntaIndexOpcion === currentQuestionIndex;
+      const isCorrectForCurrentQuestion = isCorrect && esOpcionDeLaPreguntaActual;
 
-            // Mostrar la pregunta en el elemento .question
-            $('.question').text(currentQuestion.pregunta);
+      // Crear elemento dropped
+      const $droppedOption = $(`<div class="dropped-option">${optionText}</div>`);
+      $(".container-drag").addClass("has-answer").find(".dropped-option").remove();
+      $(".container-drag").append($droppedOption);
 
-            // Limpiar el área de drop
-            $('.container-drag').removeClass('has-answer').find('.dropped-option').remove();
+      // NO eliminar la opción, mantenerla disponible
+      // Restaurar el estado normal de todas las opciones
+      $(".draggable-option").attr("draggable", true).css({
+        opacity: "1",
+        "pointer-events": "auto",
+      });
 
-            // Rehabilitar todas las opciones para la nueva pregunta
-            $('.draggable-option').attr('draggable', true).css({
-                'opacity': '1',
-                'pointer-events': 'auto'
-            });
-        }
+      // Reproducir sonido
+      CourseNav.audioController.stopAllSoundsAndPlay(isCorrectForCurrentQuestion ? good : bad);
 
-        function setupDragAndDrop() {
-            const $draggables = $('.draggable-option');
-            const $dropZone = $('.container-drag');
+      // Actualizar contadores
+      if (isCorrectForCurrentQuestion) {
+        preguntasCorrectas++;
+      }
 
-            // Eventos para elementos draggable
-            $draggables.on('dragstart', function (e) {
-                $(this).addClass('dragging');
-                e.originalEvent.dataTransfer.setData('text/plain', '');
-                e.originalEvent.dataTransfer.effectAllowed = 'move';
-            });
+      // Mostrar feedback después de un delay
+      setTimeout(() => {
+        mostrarFeedback(isCorrectForCurrentQuestion, currentQuestion);
+      }, 250);
+    }
 
-            $draggables.on('dragend', function (e) {
-                $(this).removeClass('dragging');
-            });
+    function mostrarFeedback(isCorrect, pregunta) {
+      const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
 
-            // Eventos para zona de drop
-            $dropZone.on('dragover', function (e) {
-                e.preventDefault();
-                e.originalEvent.dataTransfer.dropEffect = 'move';
-                $(this).addClass('drag-over');
-            });
+      Swal.fire({
+        target: document.getElementById("wrap-course-content"),
+        imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
+        text: retroalimentacion || "",
+        showConfirmButton: true,
+        customClass: {
+          popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+          confirmButton:
+            "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
+        },
+        confirmButtonText: "Continuar",
+        backdrop: "rgba(65, 60, 60, .95)",
+        width: "35em",
+        didClose: () => {
+          continuarJuego();
+        },
+      });
+    }
 
-            $dropZone.on('dragleave', function (e) {
-                $(this).removeClass('drag-over');
-            });
+    function continuarJuego() {
+      currentQuestionIndex++;
 
-            $dropZone.on('drop', function (e) {
-                e.preventDefault();
-                $(this).removeClass('drag-over');
+      if (currentQuestionIndex >= questions.length) {
+        setTimeout(() => {
+          finalizarJuego();
+        }, 500);
+      } else {
+        preguntasActual++;
+        mostrarPregunta();
+      }
+    }
 
-                const $draggedElement = $('.dragging');
-                if ($draggedElement.length > 0) {
-                    manejarDrop($draggedElement);
-                }
-            });
-        }
+    function visualFeedBack(isCorrect) {
+      // Cambiar la imagen de la alarma correspondiente
+      const $alarms = $(".alarms .alarm-img");
+      if ($alarms.length > preguntasActual) {
+        $alarms.eq(preguntasActual).attr("src", isCorrect ? "img/alarm_c.png" : "img/alarm_i.png");
+      }
+    }
 
-        function manejarDrop($draggedElement) {
-            const isCorrect = $draggedElement.data('correct') === true;
-            const preguntaIndexOpcion = $draggedElement.data('pregunta-index');
-            const optionText = $draggedElement.find('.option-text').text() || $draggedElement.text();
+    function finalizarJuego() {
+      const porcentaje = (preguntasCorrectas / questions.length) * 100;
+      const aprobado = porcentaje >= 60;
 
-            // Verificar si la opción corresponde a la pregunta actual
-            const esOpcionDeLaPreguntaActual = preguntaIndexOpcion === currentQuestionIndex;
-            const isCorrectForCurrentQuestion = isCorrect && esOpcionDeLaPreguntaActual;
+      $(".wrap-course-content").addClass("fake1").removeClass("fake");
 
-            // Crear elemento dropped
-            const $droppedOption = $(`<div class="dropped-option">${optionText}</div>`);
-            $('.container-drag').addClass('has-answer').find('.dropped-option').remove();
-            $('.container-drag').append($droppedOption);
+      CourseNav.setSlideVisited();
 
-            // NO eliminar la opción, mantenerla disponible
-            // Restaurar el estado normal de todas las opciones
-            $('.draggable-option').attr('draggable', true).css({
-                'opacity': '1',
-                'pointer-events': 'auto'
-            });
+      if (aprobado) {
+        $("#desarrollo").hide();
+        $("#cierre").show();
+      } else {
+        $(".col-reintentar").show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
+      }
+    }
 
-            // Reproducir sonido
-            CourseNav.audioController.stopAllSoundsAndPlay(isCorrectForCurrentQuestion ? good : bad);
-
-            // Actualizar contadores
-            if (isCorrectForCurrentQuestion) {
-                preguntasCorrectas++;
-            }
-
-            // Mostrar feedback después de un delay
-            setTimeout(() => {
-                mostrarFeedback(isCorrectForCurrentQuestion, currentQuestion);
-            }, 250);
-        }
-
-        function mostrarFeedback(isCorrect, pregunta) {
-            const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
-
-            Swal.fire({
-                target: document.getElementById('wrap-course-content'),
-                imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
-                text: retroalimentacion || '',
-                showConfirmButton: true,
-                customClass: {
-                    popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-                    confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
-                },
-                confirmButtonText: "Continuar",
-                backdrop: "rgba(65, 60, 60, .95)",
-                width: "35em",
-                didClose: () => {
-                    continuarJuego();
-                }
-            });
-        }
-
-        function continuarJuego() {
-            currentQuestionIndex++;
-
-            if (currentQuestionIndex >= questions.length) {
-                setTimeout(() => {
-                    finalizarJuego();
-                }, 500);
-            } else {
-                preguntasActual++;
-                mostrarPregunta();
-            }
-        }
-
-        function visualFeedBack(isCorrect) {
-            // Cambiar la imagen de la alarma correspondiente
-            const $alarms = $('.alarms .alarm-img');
-            if ($alarms.length > preguntasActual) {
-                $alarms.eq(preguntasActual).attr('src', isCorrect ? 'img/alarm_c.png' : 'img/alarm_i.png');
-            }
-        }
-
-        function finalizarJuego() {
-            const porcentaje = (preguntasCorrectas / questions.length) * 100;
-            const aprobado = porcentaje >= 60;
-
-             $('.wrap-course-content').addClass('fake1').removeClass('fake');
-
-            CourseNav.setSlideVisited();
-
-            if (aprobado) {
-                $('#desarrollo').hide();
-                $('#cierre').show();
-            } else {
-                $('.col-reintentar').show();
-                $('#desarrollo').hide();
-                $('#cierre').show();
-            }
-        }
-
-        readExcelFile(urlExcelFile, function (data) {
-            const hojaDatos = data["Diapositiva 37"];
-            questions = procesarPreguntas(hojaDatos);
-            preguntasMax = questions.length;
-        });
+    readExcelFile(urlExcelFile, function (data) {
+      const hojaDatos = data["Diapositiva 37"];
+      questions = procesarPreguntas(hojaDatos);
+      preguntasMax = questions.length;
     });
+  });
 </script>
diff --git a/contenido/18.html b/contenido/18.html
index 6a6e248..26fba2a 100644
--- a/contenido/18.html
+++ b/contenido/18.html
@@ -1,314 +1,317 @@
 <style>
-    .fake {
-        background-image: url(img/bg02.jpg);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        background-attachment: fixed;
-    }
+  .fake {
+    background-image: url(img/bg02.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+  }
 
-    .fake1 {
-        background-image: url(img/bg01.jpg);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        background-attachment: fixed;
-    }
+  .fake1 {
+    background-image: url(img/bg01.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+  }
 
-    .fake2 {
-        background-image: url(img/bg03.jpg);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        background-attachment: fixed;
-    }
+  .fake2 {
+    background-image: url(img/bg03.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+  }
 
-    .btn-comenzar {
-        border-radius: 20px;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        cursor: pointer;
-    }
+  .btn-comenzar {
+    border-radius: 20px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    cursor: pointer;
+  }
 
-    .alarm-img {
-        width: 90px;
-        margin: 10px 15px;
-    }
+  .alarm-img {
+    width: 90px;
+    margin: 10px 15px;
+  }
 
-    .border-style {
-        border-width: 4px;
-        border-style: solid;
-        border-image: linear-gradient(0deg, #E31D73, #72256B) 1;
-        border-radius: 18px;
-    }
+  .border-style {
+    border-width: 4px;
+    border-style: solid;
+    border-image: linear-gradient(0deg, #e31d73, #72256b) 1;
+    border-radius: 18px;
+  }
 
-    .no-overflow {
-        overflow: hidden;
-    }
+  .no-overflow {
+    overflow: hidden;
+  }
 
-    .btn-answer {
-        cursor: pointer;
-        border-radius: 10px;
-        box-shadow: 0 0 2px rgba(0, 0, 0, .5);
-        background-color: #f8f9fa;
-        color: #333;
-    }
+  .btn-answer {
+    cursor: pointer;
+    border-radius: 10px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    background-color: #f8f9fa;
+    color: #333;
+  }
 
-    .letter {
-        background-color: #925c8d;
-        border-radius: 10px;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
+  .letter {
+    background-color: #925c8d;
+    border-radius: 10px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 
-    .btn-answer.selected {
-        background-color: #C0D2CD;
-    }
+  .btn-answer.selected {
+    background-color: #c0d2cd;
+  }
 
-    .btn-answer.selected .letter {
-        background-color: #6c9d7a;
-    }
+  .btn-answer.selected .letter {
+    background-color: #6c9d7a;
+  }
 
-    .btn-answer:hover {
-        background-color: #C0D2CD;
-    }
+  .btn-answer:hover {
+    background-color: #c0d2cd;
+  }
 
-    .btn-answer:hover .letter {
-        background-color: #6c9d7a;
-    }
-    .btn-reintentar {
+  .btn-answer:hover .letter {
+    background-color: #6c9d7a;
+  }
+  .btn-reintentar {
     cursor: pointer;
   }
 </style>
-<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
-    <div class='container h-100'>
-        <div class='row justify-content-center align-items-center h-100'>
-            <div class='col-11'>
-                <div class='row justify-content-center align-items-center'>
-                    <div class="col-12 text-center animate__animated animate__bounceInDown">
-                        <div class="position-relative d-inline-block">
-                            <h2 class="text-primary mb-1 fw-bold">Alarmas</h2>
-                            <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
-                        </div>
-                    </div>
-                    <!-- <div class="col-12 mb-3 text-center">
+<div id="inicio" class="page-sco py-2 py-md-0 h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-11">
+        <div class="row justify-content-center align-items-center">
+          <div class="col-12 text-center animate__animated animate__bounceInDown">
+            <div class="position-relative d-inline-block">
+              <h2 class="text-primary mb-1 fw-bold">Alarmas</h2>
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
+            </div>
+          </div>
+          <!-- <div class="col-12 mb-3 text-center">
                         <h4 class="fw-bold text-verde-pino">Alimentación y actividad física</h4>
                     </div> -->
-                    <div class="col-5 text-center intro mb-3 animate__animated animate__flipInX">
-                        <div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
-                            <p>En caso de incidencia, el equipo lanzará alarmas.</p>
+          <div class="col-5 text-center intro mb-3 animate__animated animate__flipInX">
+            <div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
+              <p>En caso de incidencia, el equipo lanzará alarmas.</p>
 
-                            <p>Es importante conocerlas para llevar a cabo los procedimientos correctos y resolver el
-                                problema. </p>
-                            <div class="w-100 position-relative text-center">
-                                <div
-                                    class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
-                                    <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
-                        <img src="img/18.0.png" class="img-fluid">
-                    </div>
+              <p>Es importante conocerlas para llevar a cabo los procedimientos correctos y resolver el problema.</p>
+              <div class="w-100 position-relative text-center">
+                <div
+                  class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                >
+                  <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                 </div>
+              </div>
             </div>
+          </div>
+          <div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
+            <img src="img/18.0.png" class="img-fluid" />
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
-    <div class='container h-100'>
-        <div class='row justify-content-center align-items-center h-100'>
-            <div class='col-12'>
-                <div class='row justify-content-center mb-5'>
-                    <div class="col-11 text-center animate__animated animate__bounceInDown">
-                        <div class="position-relative d-inline-block">
-                            <h2 class="text-primary mb-1 fw-bold">Alarmas</h2>
-                            <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
-                        </div>
-                    </div>
-                    <!-- <div class="col-12 mb-3 text-center">
+<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12">
+        <div class="row justify-content-center mb-5">
+          <div class="col-11 text-center animate__animated animate__bounceInDown">
+            <div class="position-relative d-inline-block">
+              <h2 class="text-primary mb-1 fw-bold">Alarmas</h2>
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
+            </div>
+          </div>
+          <!-- <div class="col-12 mb-3 text-center">
                         <h4 class="fw-bold text-verde-pino">Alimentación y actividad física</h4>
                     </div> -->
-                    <div class="col-12 px-0 mb-3">
-                        <div class="row justify-content-center">
-                            <div class="col-8">
-                                <div class="card bg-verde-claro border-0 bx-shadow py-2 px-3"
-                                    style="border-radius: 25px;">
-                                    <div class="row justify-content-start">
-                                        <div class="col-12">
-                                            <div
-                                                class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
-                                                <img src="img/book3.png" class="img-fluid">
-                                                <p class="mb-0"><strong>Instrucciones:</strong> Seleccione una alarma.
-                                                    Lea detenidamente la pregunta que se mostrará y elija la respuesta
-                                                    que considere correcta. Su objetivo es apagar todas las alarmas.
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-11">
-                        <div
-                            class="row justify-content-center align-items-center animate__animated animate__slideInRight">
-                            <div class="col-10">
-                                <div class="alarms alarms d-flex justify-content-center"></div>
-                            </div>
-                            <div class="col-8">
-                                <div class="card mt-4 border-style">
-                                    <div class="card-body">
-                                        <div class="container-question"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+          <div class="col-12 px-0 mb-3">
+            <div class="row justify-content-center">
+              <div class="col-8">
+                <div class="card bg-verde-claro border-0 bx-shadow py-2 px-3" style="border-radius: 25px">
+                  <div class="row justify-content-start">
+                    <div class="col-12">
+                      <div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
+                        <img src="img/book3.png" class="img-fluid" />
+                        <p class="mb-0">
+                          <strong>Instrucciones:</strong> Seleccione una alarma. Lea detenidamente la pregunta que se
+                          mostrará y elija la respuesta que considere correcta. Su objetivo es apagar todas las alarmas.
+                        </p>
+                      </div>
                     </div>
+                  </div>
                 </div>
+              </div>
             </div>
+          </div>
+          <div class="col-12 mb-3 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
+          <div class="col-11">
+            <div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
+              <div class="col-10">
+                <div class="alarms alarms d-flex justify-content-center"></div>
+              </div>
+              <div class="col-8">
+                <div class="card mt-4 border-style">
+                  <div class="card-body">
+                    <div class="container-question"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-    <div class='container h-100'>
-        <div class='row justify-content-center align-items-center h-100'>
-            <div class='col-12'>
-                <div class="row justify-content-center">
-                    <div class="col-12 text-center mb-3">
-                        <img src="img/cierre_actividad.png" class="img-fluid">
-                    </div>
-                    <div class="col-12 mb-3 text-center">
-                        <div class="position-relative d-inline-block">
-                            <h2 class="text-primary mb-1 fw-bold">Alarmas</h2>
-                            <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
-                        </div>
-                    </div>
-                    <!-- <div class="col-12 mb-3 text-center">
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12">
+        <div class="row justify-content-center">
+          <div class="col-12 text-center mb-3">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
+          </div>
+          <div class="col-12 mb-3 text-center">
+            <div class="position-relative d-inline-block">
+              <h2 class="text-primary mb-1 fw-bold">Alarmas</h2>
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
+            </div>
+          </div>
+          <!-- <div class="col-12 mb-3 text-center">
                         <h4 class="fw-bold text-verde-pino">Alimentación y actividad física</h4>
                     </div> -->
-                    <div class="col-12 text-center mb-3">
-                        <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
-                    </div>
-                    <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
-                        style="display: none;">
-                        <div class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
-                            onclick="CourseNav.reload()">
-                            <h5 class="text-white fw-bold mb-0">Reintentar</h5>
-                        </div>
-                    </div>
-                </div>
+          <div class="col-12 text-center mb-3">
+            <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
+          </div>
+          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
+            <div
+              class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+              onclick="CourseNav.reload()"
+            >
+              <h5 class="text-white fw-bold mb-0">Reintentar</h5>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
 <script>
-    $(function () {
-        "use strict";
-        $('.wrap-course-content').addClass('fake');
+  $(function () {
+    "use strict";
+    $(".wrap-course-content").addClass("fake");
 
-        setTimeout(() => {
-            $('.intro').removeClass('animate__flipInX');
-        }, 600);
+    setTimeout(() => {
+      $(".intro").removeClass("animate__flipInX");
+    }, 600);
 
-        var preguntasActual = 0,
-            preguntasMax = 6,
-            preguntasCorrectas = 0;
-        const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
-        const good = CourseNav.createSound("audio/feedback-correct.mpeg");
+    var preguntasActual = 0,
+      preguntasMax = 6,
+      preguntasCorrectas = 0;
+    const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
+    const good = CourseNav.createSound("audio/feedback-correct.mpeg");
 
-        // Agregar imágenes de alarmas al iniciar la actividad
-        function inicializarAlarmas() {
-            const $alarms = $('.alarms');
-            $alarms.empty();
-            for (let i = 0; i < preguntasMax; i++) {
-                $alarms.append(`<img src="img/alarm_n.png" class="alarm-img" data-idx="${i}">`);
-            }
-        }
+    // Agregar imágenes de alarmas al iniciar la actividad
+    function inicializarAlarmas() {
+      const $alarms = $(".alarms");
+      $alarms.empty();
+      for (let i = 0; i < preguntasMax; i++) {
+        $alarms.append(`<img src="img/alarm_n.png" class="alarm-img" data-idx="${i}">`);
+      }
+    }
 
-        $('.btn-comenzar').click(function (e) {
-            e.preventDefault();
-            CourseNav.soundClick();
-            $('.wrap-course-content').addClass('fake1').removeClass('fake');
-            $('#inicio').hide();
-            $('#desarrollo').show();
-            inicializarAlarmas();
-            mostrarPregunta();
+    $(".btn-comenzar").click(function (e) {
+      e.preventDefault();
+      CourseNav.soundClick();
+      $(".wrap-course-content").addClass("fake1").removeClass("fake");
+      $("#inicio").hide();
+      $("#desarrollo").show();
+      inicializarAlarmas();
+      mostrarPregunta();
+    });
+
+    const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
+
+    function readExcelFile(url, callback) {
+      var xhr = new XMLHttpRequest();
+      xhr.open("GET", url, true);
+      xhr.responseType = "arraybuffer";
+      xhr.onload = function (e) {
+        var arrayBuffer = xhr.response;
+        var data = new Uint8Array(arrayBuffer);
+        var workbook = XLSX.read(data, { type: "array" });
+        var result = {};
+        workbook.SheetNames.forEach((sheetName) => {
+          var sheet = workbook.Sheets[sheetName];
+          result[sheetName] = XLSX.utils.sheet_to_json(sheet);
         });
+        callback(result);
+      };
+      xhr.send();
+    }
 
-        const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
-
-        function readExcelFile(url, callback) {
-            var xhr = new XMLHttpRequest();
-            xhr.open("GET", url, true);
-            xhr.responseType = "arraybuffer";
-            xhr.onload = function (e) {
-                var arrayBuffer = xhr.response;
-                var data = new Uint8Array(arrayBuffer);
-                var workbook = XLSX.read(data, { type: "array" });
-                var result = {};
-                workbook.SheetNames.forEach((sheetName) => {
-                    var sheet = workbook.Sheets[sheetName];
-                    result[sheetName] = XLSX.utils.sheet_to_json(sheet);
-                });
-                callback(result);
-            };
-            xhr.send();
-        }
-
-        function procesarPreguntas(data) {
-            const preguntas = data.map((fila) => {
-                const opciones = [];
-                Object.keys(fila).forEach((key) => {
-                    if (key.startsWith("opcion")) {
-                        opciones.push({
-                            text: fila[key].trim(),
-                            correct: key === "opcion_c",
-                        });
-                    }
-                });
-                return {
-                    pregunta: fila.pregunta.trim(),
-                    opciones: opciones,
-                    retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
-                    retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
-                };
+    function procesarPreguntas(data) {
+      const preguntas = data.map((fila) => {
+        const opciones = [];
+        Object.keys(fila).forEach((key) => {
+          if (key.startsWith("opcion")) {
+            opciones.push({
+              text: fila[key].trim(),
+              correct: key === "opcion_c",
             });
-            return preguntas;
-        }
+          }
+        });
+        return {
+          pregunta: fila.pregunta.trim(),
+          opciones: opciones,
+          retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
+          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
+            ? fila.retroalimentacion_incorrecta.trim()
+            : "",
+        };
+      });
+      return preguntas;
+    }
 
-        function shuffleArray(array) {
-            for (let i = array.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [array[i], array[j]] = [array[j], array[i]];
-            }
-            return array;
-        }
+    function shuffleArray(array) {
+      for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+      }
+      return array;
+    }
 
-        let questions = [];
+    let questions = [];
 
-        function mostrarPregunta() {
-            if (questions.length === 0) return;
+    function mostrarPregunta() {
+      if (questions.length === 0) return;
 
-            const QuestionPop = false;
-            const indiceAleatorio = Math.floor(Math.random() * questions.length);
-            const preguntaAleatoria = questions[indiceAleatorio];
-            questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada
-            const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]);
+      const QuestionPop = false;
+      const indiceAleatorio = Math.floor(Math.random() * questions.length);
+      const preguntaAleatoria = questions[indiceAleatorio];
+      questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada
+      const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]);
 
-            let opcionesHTML = '';
-            opcionesBarajadas.forEach((opcion, index) => {
-                opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
+      let opcionesHTML = "";
+      opcionesBarajadas.forEach((opcion, index) => {
+        opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
                 <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
                 <div class="txt-answer ps-3">${opcion.text}</div>
             </div>`;
-            });
+      });
 
-            if (QuestionPop) {
-                Swal.fire({
-                    target: document.getElementById('wrap-course-content'),
-                    html: `
+      if (QuestionPop) {
+        Swal.fire({
+          target: document.getElementById("wrap-course-content"),
+          html: `
             <div class="text-center mb-3">
             <h4 class="fw-bold text-verde-oscuro">${preguntaAleatoria.pregunta}</h4>
             </div>
@@ -316,41 +319,41 @@
             ${opcionesHTML}
             </div>
         `,
-                    showConfirmButton: false,
-                    allowOutsideClick: false,
-                    customClass: {
-                        popup: 'swal-wide bg-white border-0 rounded-3 shadow'
-                    },
-                    backdrop: "rgba(65, 60, 60, .95)",
-                    width: "50em",
-                    didOpen: () => {
-                        $('.btn-answer').click(function () {
-                            const isCorrect = $(this).data('correct') === true;
-                            // const puntos = $(this).data('puntos');
+          showConfirmButton: false,
+          allowOutsideClick: false,
+          customClass: {
+            popup: "swal-wide bg-white border-0 rounded-3 shadow",
+          },
+          backdrop: "rgba(65, 60, 60, .95)",
+          width: "50em",
+          didOpen: () => {
+            $(".btn-answer").click(function () {
+              const isCorrect = $(this).data("correct") === true;
+              // const puntos = $(this).data('puntos');
 
-                            $('.btn-answer').off('click').css('pointer-events', 'none');
+              $(".btn-answer").off("click").css("pointer-events", "none");
 
-                            if (isCorrect) {
-                                $(this).addClass('bg-success text-white');
-                                // totalPuntos += puntos;
-                                visualFeedBack(true);
-                            } else {
-                                visualFeedBack(false);
-                                $(this).addClass('bg-danger text-white');
-                                //$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
-                            }
+              if (isCorrect) {
+                $(this).addClass("bg-success text-white");
+                // totalPuntos += puntos;
+                visualFeedBack(true);
+              } else {
+                visualFeedBack(false);
+                $(this).addClass("bg-danger text-white");
+                //$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
+              }
 
-                            CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
+              CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
 
-                            setTimeout(() => {
-                                Swal.close();
-                                mostrarFeedback(isCorrect, preguntaAleatoria);
-                            }, 500);
-                        });
-                    }
-                });
-            } else {
-                $('.container-question').html(`
+              setTimeout(() => {
+                Swal.close();
+                mostrarFeedback(isCorrect, preguntaAleatoria);
+              }, 500);
+            });
+          },
+        });
+      } else {
+        $(".container-question").html(`
                 <div class="text-center mb-3">
                     <h4 class="fw-bold text-primary">${preguntaAleatoria.pregunta}</h4>
                 </div>
@@ -358,99 +361,99 @@
                 ${opcionesHTML}
                 </div>
             `);
-                $('.btn-answer').click(function () {
-                    const isCorrect = $(this).data('correct') === true;
-                    // const puntos = $(this).data('puntos');
+        $(".btn-answer").click(function () {
+          const isCorrect = $(this).data("correct") === true;
+          // const puntos = $(this).data('puntos');
 
-                    $('.btn-answer').off('click').css('pointer-events', 'none');
+          $(".btn-answer").off("click").css("pointer-events", "none");
 
-                    if (isCorrect) {
-                        $(this).addClass('bg-success text-white');
-                        // totalPuntos += puntos;
-                        visualFeedBack(true);
-                    } else {
-                        visualFeedBack(false);
-                        $(this).addClass('bg-danger text-white');
-                        //$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
-                    }
+          if (isCorrect) {
+            $(this).addClass("bg-success text-white");
+            // totalPuntos += puntos;
+            visualFeedBack(true);
+          } else {
+            visualFeedBack(false);
+            $(this).addClass("bg-danger text-white");
+            //$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
+          }
 
-                    CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
+          CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
 
-                    setTimeout(() => {
-                        // Swal.close();
-                        mostrarFeedback(isCorrect, preguntaAleatoria);
-                    }, 500);
-                });
-            }
-        }
-
-        function mostrarFeedback(isCorrect, pregunta) {
-            const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
-
-            if (isCorrect) {
-                preguntasCorrectas++;
-            }
-
-            Swal.fire({
-                target: document.getElementById('wrap-course-content'),
-                imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
-                text: retroalimentacion || '',
-                showConfirmButton: true,
-                customClass: {
-                    popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-                    confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
-                },
-                confirmButtonText: "Continuar",
-                backdrop: "rgba(65, 60, 60, .95)",
-                width: "35em",
-                didClose: () => {
-                    continuarJuego();
-                }
-            });
-        }
-
-        function continuarJuego() {
-            preguntasActual++;
-
-            if (preguntasActual >= preguntasMax) {
-                setTimeout(() => {
-                    finalizarJuego();
-                }, 400);
-            } else {
-                mostrarPregunta();
-            }
-        }
-
-        function visualFeedBack(isCorrect) {
-            // Cambiar la imagen de la alarma correspondiente
-            const $alarms = $('.alarms .alarm-img');
-            if ($alarms.length > preguntasActual) {
-                $alarms.eq(preguntasActual).attr('src', isCorrect ? 'img/alarm_c.png' : 'img/alarm_i.png');
-            }
-        }
-
-        function finalizarJuego() {
-            const porcentaje = (preguntasCorrectas / preguntasMax) * 100;
-            const aprobado = porcentaje >= 60;
-
-            $('.wrap-course-content').addClass('fake2').removeClass('fake1');
-
-            CourseNav.setSlideVisited();
-
-            if (aprobado) {
-                $('#desarrollo').hide();
-                $('#cierre').show();
-            } else {
-                $('.col-reintentar').show();
-                $('#desarrollo').hide();
-                $('#cierre').show();
-            }
-        }
-
-
-        readExcelFile(urlExcelFile, function (data) {
-            const hojaDatos = data["Diapositiva 39"];
-            questions = shuffleArray(procesarPreguntas(hojaDatos));
+          setTimeout(() => {
+            // Swal.close();
+            mostrarFeedback(isCorrect, preguntaAleatoria);
+          }, 500);
         });
+      }
+    }
+
+    function mostrarFeedback(isCorrect, pregunta) {
+      const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
+
+      if (isCorrect) {
+        preguntasCorrectas++;
+      }
+
+      Swal.fire({
+        target: document.getElementById("wrap-course-content"),
+        imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
+        text: retroalimentacion || "",
+        showConfirmButton: true,
+        customClass: {
+          popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+          confirmButton:
+            "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
+        },
+        confirmButtonText: "Continuar",
+        backdrop: "rgba(65, 60, 60, .95)",
+        width: "35em",
+        didClose: () => {
+          continuarJuego();
+        },
+      });
+    }
+
+    function continuarJuego() {
+      preguntasActual++;
+
+      if (preguntasActual >= preguntasMax) {
+        setTimeout(() => {
+          finalizarJuego();
+        }, 400);
+      } else {
+        mostrarPregunta();
+      }
+    }
+
+    function visualFeedBack(isCorrect) {
+      // Cambiar la imagen de la alarma correspondiente
+      const $alarms = $(".alarms .alarm-img");
+      if ($alarms.length > preguntasActual) {
+        $alarms.eq(preguntasActual).attr("src", isCorrect ? "img/alarm_c.png" : "img/alarm_i.png");
+      }
+    }
+
+    function finalizarJuego() {
+      const porcentaje = (preguntasCorrectas / preguntasMax) * 100;
+      const aprobado = porcentaje >= 60;
+
+      $(".wrap-course-content").addClass("fake2").removeClass("fake1");
+
+      CourseNav.setSlideVisited();
+
+      if (aprobado) {
+        $("#desarrollo").hide();
+        $("#cierre").show();
+      } else {
+        $(".col-reintentar").show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
+      }
+    }
+
+    readExcelFile(urlExcelFile, function (data) {
+      const hojaDatos = data["Diapositiva 39"];
+      questions = shuffleArray(procesarPreguntas(hojaDatos));
     });
+  });
 </script>
diff --git a/js/config.js b/js/config.js
index 6898687..569441d 100644
--- a/js/config.js
+++ b/js/config.js
@@ -190,10 +190,6 @@ function scaleWrapCourseContent() {
     scale = scaleY;
   }
 
-  // Limitar reducción excesiva
-  const minScale = 0.8;
-  scale = Math.max(minScale, scale);
-
   content.style.transform = `scale(${scale})`;
   content.style.transformOrigin = "top left";
   content.style.width = baseWidth + "px";
diff --git a/js/config.min.js b/js/config.min.js
index 46444df..ebaef67 100644
--- a/js/config.min.js
+++ b/js/config.min.js
@@ -1 +1 @@
-function renderPagination(e,t){const n=document.getElementById("coursenav-page-number"),o=document.getElementById("coursenav-total-pages");if(!Array.isArray(t))return;manageMenuVisibility(e,t);const r=t[e];if(!r)return;const s=t.filter((e=>e.moduleTitle===r.moduleTitle)),l=s.findIndex((e=>e.content===r.content));n&&(n.textContent=l+1),o&&(o.textContent=" / "+s.length),updateNavButtons(l,s)}function updateNavButtons(e,t){const n=document.getElementById("coursenav-next-btn"),o=document.getElementById("coursenav-prev-btn");if(!n||!o)return;const r=e+1===t.length,s=0===e,l=CourseNav.isDebug();n.classList.toggle("disabled",r&&!l),o.classList.toggle("disabled",s&&!l)}function manageMenuVisibility(e,t){const n=document.querySelectorAll("#coursenav-main-menu > ul.course-menu");if(!n.length)return;if(n[0].style.display="block",!Array.isArray(t)||!t.length){for(let e=1;e<n.length;e++)n[e].style.display="none";return}const o=t[e];if(!o?.moduleTitle){for(let e=1;e<n.length;e++)n[e].style.display="none";return}const r=o.moduleTitle;for(let e=1;e<n.length;e++){const o=Array.from(n[e].querySelectorAll(".coursenav-link")).some((e=>{const n=parseInt(e.dataset.coursenavindex);return n>=0&&t[n]?.moduleTitle===r}));n[e].style.display=o?"block":"none"}}function scrollToElementTop(e,t={}){const n=Object.assign({behavior:"smooth",block:"start",inline:"nearest"},t),o=document.querySelector(e);o&&o.scrollIntoView(n)}function animateOnScroll(e,t,n={}){const{threshold:o=.1,animateOnce:r=!0,prefix:s="animate__animated"}=n,l=new IntersectionObserver(((e,n)=>{e.forEach((e=>{e.isIntersecting?(e.target.classList.add(s,t),r&&n.unobserve(e.target)):r||e.target.classList.remove(s,t)}))}),{threshold:o});return document.querySelectorAll(e).forEach((e=>l.observe(e))),l}function scaleWrapCourseContent(){const e=document.querySelector(".wrap-course-content");if(!e)return;const t=window.innerWidth,n=window.innerHeight;let o=t<1500?1366:1920,r=t<1500?768:1080;const s=t/o;let l=s;r*s>n&&(l=n/r);l=Math.max(.8,l),e.style.transform=`scale(${l})`,e.style.transformOrigin="top left",e.style.width=o+"px",e.style.height=r+"px",e.style.position="absolute",e.style.left=(t-o*l)/2+"px",e.style.top=(n-r*l)/2+"px",e.style.overflow="hidden",e.style.zIndex="1"}function renderStepper(e,t,n,o=5){if("string"==typeof e&&(e=document.querySelector(e)),"string"==typeof n&&(n=document.querySelector(n)),!(e instanceof HTMLElement&&n instanceof HTMLElement))throw new Error("renderStepper: elementos inválidos.");e.querySelectorAll(".step").forEach((e=>e.remove()));const r=Array.from({length:o},((e,t)=>t/(o-1)*100)),s=r.map(((e,t)=>({p:e,i:t}))).filter((({p:e})=>e<=t)).pop().i;r.forEach(((t,n)=>{const o=document.createElement("div");o.classList.add("step"),n<s&&o.classList.add("completed"),n===s&&(o.classList.add("completed"),o.setAttribute("data-label",Math.round(t)+"%")),e.appendChild(o)})),e.style.setProperty("--pct",t+"%");const l=n.offsetWidth;n.style.left=`calc(${t}% - ${l}px)`,n.setAttribute("data-label",t+"%")}function gotoFirstMenuToolSlide(){const e=CourseNav.getCourseContentArray(),t=CourseNav.getCurrentSlide(),n=e.findIndex((e=>"Menús de la herramienta"===e.title&&e.moduleTitle===t.moduleTitle));-1!==n&&CourseNav.gotoSlide(n)}window.COURSE_CONFIG={COURSE_CONFIG_URL:"config.json",DEBUG:!0},document.addEventListener("DOMContentLoaded",(()=>{let e;scaleWrapCourseContent(),setTimeout(scaleWrapCourseContent,100),window.addEventListener("resize",(()=>{clearTimeout(e),e=setTimeout(scaleWrapCourseContent,50)})),window.addEventListener("orientationchange",(()=>{setTimeout(scaleWrapCourseContent,200)})),document.addEventListener("visibilitychange",(()=>{document.hidden||setTimeout(scaleWrapCourseContent,100)})),document.body.addEventListener("beforeSlideChange",(e=>{})),document.body.addEventListener("slideChange",(e=>{if(e.detail&&"number"==typeof e.detail.slideIndex&&Array.isArray(e.detail.contentArray)){renderPagination(e.detail.slideIndex,e.detail.contentArray);const t=e.detail.contentArray,n="Menús de la herramienta",o=CourseNav.getCurrentSlide(),r=t.findIndex((e=>e.title===n&&e.moduleTitle===o.moduleTitle)),s=document.getElementById("coursenav-other-btn");if(!s)return;-1!==r?s.classList.remove("disabled"):s.classList.add("disabled")}const t=document.getElementById("coursenav-course-title");if(t){const n=e.detail.contentArray[e.detail.slideIndex],o=n.moduleTitle?n.moduleTitle+" | ":"",r=n.title||"Sin título";t.textContent=o+r}const n=document.getElementById("stepper"),o=document.getElementById("step-movil");renderStepper(n,CourseNav.getProgressPercent(!0),o)})),document.body.addEventListener("slideCompleted",(e=>{const t=document.getElementById("stepper"),n=document.getElementById("step-movil");renderStepper(t,CourseNav.getProgressPercent(!0),n),renderPagination(e.detail.slideIndex,CourseNav.getCourseContentArray())}));const t=document.getElementById("coursenav-other-btn");t&&t.addEventListener("click",(()=>{gotoFirstMenuToolSlide()}))})),window.addEventListener("DOMContentLoaded",(()=>scaleWrapCourseContent())),window.addEventListener("resize",(()=>scaleWrapCourseContent()));
\ No newline at end of file
+function renderPagination(e,t){const n=document.getElementById("coursenav-page-number"),o=document.getElementById("coursenav-total-pages");if(!Array.isArray(t))return;manageMenuVisibility(e,t);const r=t[e];if(!r)return;const s=t.filter((e=>e.moduleTitle===r.moduleTitle)),l=s.findIndex((e=>e.content===r.content));n&&(n.textContent=l+1),o&&(o.textContent=" / "+s.length),updateNavButtons(l,s)}function updateNavButtons(e,t){const n=document.getElementById("coursenav-next-btn"),o=document.getElementById("coursenav-prev-btn");if(!n||!o)return;const r=e+1===t.length,s=0===e,l=CourseNav.isDebug();n.classList.toggle("disabled",r&&!l),o.classList.toggle("disabled",s&&!l)}function manageMenuVisibility(e,t){const n=document.querySelectorAll("#coursenav-main-menu > ul.course-menu");if(!n.length)return;if(n[0].style.display="block",!Array.isArray(t)||!t.length){for(let e=1;e<n.length;e++)n[e].style.display="none";return}const o=t[e];if(!o?.moduleTitle){for(let e=1;e<n.length;e++)n[e].style.display="none";return}const r=o.moduleTitle;for(let e=1;e<n.length;e++){const o=Array.from(n[e].querySelectorAll(".coursenav-link")).some((e=>{const n=parseInt(e.dataset.coursenavindex);return n>=0&&t[n]?.moduleTitle===r}));n[e].style.display=o?"block":"none"}}function scrollToElementTop(e,t={}){const n=Object.assign({behavior:"smooth",block:"start",inline:"nearest"},t),o=document.querySelector(e);o&&o.scrollIntoView(n)}function animateOnScroll(e,t,n={}){const{threshold:o=.1,animateOnce:r=!0,prefix:s="animate__animated"}=n,l=new IntersectionObserver(((e,n)=>{e.forEach((e=>{e.isIntersecting?(e.target.classList.add(s,t),r&&n.unobserve(e.target)):r||e.target.classList.remove(s,t)}))}),{threshold:o});return document.querySelectorAll(e).forEach((e=>l.observe(e))),l}function scaleWrapCourseContent(){const e=document.querySelector(".wrap-course-content");if(!e)return;const t=window.innerWidth,n=window.innerHeight;let o=t<1500?1366:1920,r=t<1500?768:1080;const s=t/o;let l=s;r*s>n&&(l=n/r),e.style.transform=`scale(${l})`,e.style.transformOrigin="top left",e.style.width=o+"px",e.style.height=r+"px",e.style.position="absolute",e.style.left=(t-o*l)/2+"px",e.style.top=(n-r*l)/2+"px",e.style.overflow="hidden",e.style.zIndex="1"}function renderStepper(e,t,n,o=5){if("string"==typeof e&&(e=document.querySelector(e)),"string"==typeof n&&(n=document.querySelector(n)),!(e instanceof HTMLElement&&n instanceof HTMLElement))throw new Error("renderStepper: elementos inválidos.");e.querySelectorAll(".step").forEach((e=>e.remove()));const r=Array.from({length:o},((e,t)=>t/(o-1)*100)),s=r.map(((e,t)=>({p:e,i:t}))).filter((({p:e})=>e<=t)).pop().i;r.forEach(((t,n)=>{const o=document.createElement("div");o.classList.add("step"),n<s&&o.classList.add("completed"),n===s&&(o.classList.add("completed"),o.setAttribute("data-label",Math.round(t)+"%")),e.appendChild(o)})),e.style.setProperty("--pct",t+"%");const l=n.offsetWidth;n.style.left=`calc(${t}% - ${l}px)`,n.setAttribute("data-label",t+"%")}function gotoFirstMenuToolSlide(){const e=CourseNav.getCourseContentArray(),t=CourseNav.getCurrentSlide(),n=e.findIndex((e=>"Menús de la herramienta"===e.title&&e.moduleTitle===t.moduleTitle));-1!==n&&CourseNav.gotoSlide(n)}window.COURSE_CONFIG={COURSE_CONFIG_URL:"config.json",DEBUG:!0},document.addEventListener("DOMContentLoaded",(()=>{let e;scaleWrapCourseContent(),setTimeout(scaleWrapCourseContent,100),window.addEventListener("resize",(()=>{clearTimeout(e),e=setTimeout(scaleWrapCourseContent,50)})),window.addEventListener("orientationchange",(()=>{setTimeout(scaleWrapCourseContent,200)})),document.addEventListener("visibilitychange",(()=>{document.hidden||setTimeout(scaleWrapCourseContent,100)})),document.body.addEventListener("beforeSlideChange",(e=>{})),document.body.addEventListener("slideChange",(e=>{if(e.detail&&"number"==typeof e.detail.slideIndex&&Array.isArray(e.detail.contentArray)){renderPagination(e.detail.slideIndex,e.detail.contentArray);const t=e.detail.contentArray,n="Menús de la herramienta",o=CourseNav.getCurrentSlide(),r=t.findIndex((e=>e.title===n&&e.moduleTitle===o.moduleTitle)),s=document.getElementById("coursenav-other-btn");if(!s)return;-1!==r?s.classList.remove("disabled"):s.classList.add("disabled")}const t=document.getElementById("coursenav-course-title");if(t){const n=e.detail.contentArray[e.detail.slideIndex],o=n.moduleTitle?n.moduleTitle+" | ":"",r=n.title||"Sin título";t.textContent=o+r}const n=document.getElementById("stepper"),o=document.getElementById("step-movil");renderStepper(n,CourseNav.getProgressPercent(!0),o)})),document.body.addEventListener("slideCompleted",(e=>{const t=document.getElementById("stepper"),n=document.getElementById("step-movil");renderStepper(t,CourseNav.getProgressPercent(!0),n),renderPagination(e.detail.slideIndex,CourseNav.getCourseContentArray())}));const t=document.getElementById("coursenav-other-btn");t&&t.addEventListener("click",(()=>{gotoFirstMenuToolSlide()}))})),window.addEventListener("DOMContentLoaded",(()=>scaleWrapCourseContent())),window.addEventListener("resize",(()=>scaleWrapCourseContent()));
\ No newline at end of file