document.addEventListener("DOMContentLoaded", () => {
  const nav = document.getElementById("navegacion-preguntas");
  const areaPregunta = document.getElementById("contenedor-pregunta");
  const nombreMateria = document.getElementById("materia-actual");
  const iniciarBtn = document.getElementById("btn-toggle");
  const timerElemento = document.querySelector(".timer");
  const vozBtn = document.querySelector(".btn.voz");
 
  let preguntas = [];
  let respuestas = [];
  let temporizador = null;
  let tiempoRestante = 3 * 60 * 60;
  let lecturaActiva = false;
  let examenIniciado = false;

  // ✅ VERIFICAR QUE voz.js ESTÉ CARGADO
  function verificarVozJS() {
    if (typeof leerTexto !== 'function') {
      console.error('❌ ERROR: voz.js no está cargado o leerTexto() no está disponible');
      return false;
    }
    console.log('✅ voz.js disponible');
    return true;
  }

  // ✅ WRAPPER SEGURO PARA leerTexto
  function leerTextoSeguro(texto, callback = null) {
    if (!verificarVozJS()) {
      console.warn('⚠️ Función leerTexto no disponible, saltando lectura');
      if (typeof callback === 'function') callback();
      return;
    }
    
    try {
      leerTexto(texto, callback);
    } catch (error) {
      console.error('❌ Error al intentar leer texto:', error);
      if (typeof callback === 'function') callback();
    }
  }

  // ✅ FUNCIÓN PARA DETENER LECTURA DE FORMA SEGURA
  function detenerLecturaSegura() {
    try {
      if (window.speechSynthesis) {
        window.speechSynthesis.cancel();
        console.log('🔇 Lectura detenida');
      }
    } catch (error) {
      console.error('❌ Error al detener lectura:', error);
    }
  }

  // LIMPIAR TEXTO DE PREGUNTA
  const limpiarTexto = texto => texto.replace(/^\s*\d+[\.\)]\s*/, '');

  // LOCALSTORAGE
  const guardarLocal = () => localStorage.setItem("respuestasM5", JSON.stringify(respuestas));
  const cargarLocal = () => JSON.parse(localStorage.getItem("respuestasM5") || "[]");

  // TEMPORIZADOR
  function actualizarTimer() {
    const h = String(Math.floor(tiempoRestante / 3600)).padStart(2, "0");
    const m = String(Math.floor((tiempoRestante % 3600) / 60)).padStart(2, "0");
    const s = String(tiempoRestante % 60).padStart(2, "0");
    timerElemento.textContent = `${h}:${m}:${s}`;

    if (tiempoRestante <= 0) {
      clearInterval(temporizador);
      Swal.fire({
        icon: 'info',
        title: '¡Tiempo terminado!',
        text: 'Se agotó el tiempo para resolver este Examen.',
        width: '400px'
      }).then(() => {
        terminarExamen();
      });
    } else {
      tiempoRestante--;
    }
  }

  function iniciarTemporizador() {
    if (temporizador) return;
  
    actualizarTimer();
    temporizador = setInterval(() => {
      if (tiempoRestante > 0) {
        tiempoRestante--;
        actualizarTimer();
      } else {
        clearInterval(temporizador);
        temporizador = null;
        Swal.fire({
          icon: 'info',
          title: '¡Tiempo terminado!',
          text: 'Se acabó el tiempo del examen.',
          width: '400px'
        }).then(() => {
          terminarExamen();
        });
      }
    }, 1000);
  }
  
  // BOTONES DE NAVEGACIÓN
  function generarBotones(cantidad) {
    nav.innerHTML = "";
    for (let i = 0; i < cantidad; i++) {
      const btn = document.createElement("button");
      btn.textContent = i + 1;
      btn.dataset.index = i;
      btn.classList.add("nav-btn");
      btn.addEventListener("click", () => {
        // ✅ Detener lectura antes de cambiar de pregunta
        detenerLecturaSegura();
        mostrarPregunta(i);
      });
      nav.appendChild(btn);
    }
  }

  function actualizarBotonesNavegacion() {
    Array.from(nav.children).forEach((btn, i) => {
      btn.classList.toggle("respondida", respuestas[i] !== null);
    });
  }

  // ✅ FUNCIÓN MOSTRAR PREGUNTA CON SOPORTE DE IMÁGENES
  function mostrarPregunta(index) {
    const pregunta = preguntas[index];
    
    // ✅ Detener cualquier lectura en curso
    detenerLecturaSegura();
    
    // GENERAR PREGUNTAS DINÁMICAMENTE CON SOPORTE DE IMÁGENES
    let preguntasHTML = '';
    
    // ✅ PREGUNTA PRINCIPAL - LÓGICA INDEPENDIENTE
    // Verificar si tiene texto
    if (pregunta.pregunta && pregunta.pregunta.trim() !== '') {
      preguntasHTML += `<h3 class="pregunta-principal">${limpiarTexto(pregunta.pregunta)}</h3>`;
    }
    
    // Verificar si tiene imagen (INDEPENDIENTE del texto)
    if (pregunta.imagen_pregunta && pregunta.imagen_pregunta.trim() !== '') {
      preguntasHTML += `
        <div class="pregunta-imagen">
          <img src="${pregunta.imagen_pregunta}" 
               alt="Imagen de la pregunta" 
               class="img-pregunta"
               onerror="this.style.display='none'">
        </div>`;
    }
    
    // ✅ PREGUNTA A - LÓGICA INDEPENDIENTE
    // Verificar si tiene texto
    if (pregunta.pregunta_a && pregunta.pregunta_a.trim() !== '') {
      preguntasHTML += `<div class="pregunta-secundaria pregunta-a">${limpiarTexto(pregunta.pregunta_a)}</div>`;
    }
    
    // Verificar si tiene imagen (INDEPENDIENTE del texto)
    if (pregunta.imagen_pregunta_a && pregunta.imagen_pregunta_a.trim() !== '') {
      preguntasHTML += `
        <div class="pregunta-imagen pregunta-imagen-a">
          <img src="${pregunta.imagen_pregunta_a}" 
               alt="Imagen de la pregunta A" 
               class="img-pregunta"
               onerror="this.style.display='none'">
        </div>`;
    }
    
    // ✅ PREGUNTA B - LÓGICA INDEPENDIENTE
    // Verificar si tiene texto
    if (pregunta.pregunta_b && pregunta.pregunta_b.trim() !== '') {
      preguntasHTML += `<div class="pregunta-secundaria pregunta-b">${limpiarTexto(pregunta.pregunta_b)}</div>`;
    }
    
    // Verificar si tiene imagen (INDEPENDIENTE del texto)
    if (pregunta.imagen_pregunta_b && pregunta.imagen_pregunta_b.trim() !== '') {
      preguntasHTML += `
        <div class="pregunta-imagen pregunta-imagen-b">
          <img src="${pregunta.imagen_pregunta_b}" 
               alt="Imagen de la pregunta B" 
               class="img-pregunta"
               onerror="this.style.display='none'">
        </div>`;
    }
    
    const todasOpciones = [
      pregunta.opcion1, pregunta.opcion2,
      pregunta.opcion3, pregunta.opcion4, pregunta.opcion5
    ];
    
    const opcionesValidas = todasOpciones
      .map((opcion, i) => ({ texto: opcion, indiceOriginal: i + 1 }))
      .filter(opcion => opcion && opcion.texto && opcion.texto.trim() !== '');

    nombreMateria.textContent = `Materia: ${pregunta.nombre_materia}`;
    Array.from(nav.children).forEach((b, i) => {
      b.classList.toggle("seleccionado", i === index);
    });

    const html = `
      <div class="preguntas-container">
        ${preguntasHTML}
      </div>
      <div class="opciones-lista">
        ${opcionesValidas.map((opcion, i) => `
          <label>
            <input type="radio" name="pregunta${index}" value="${opcion.indiceOriginal}" ${respuestas[index] == opcion.indiceOriginal ? "checked" : ""}>
            <span>${String.fromCharCode(65 + i)}. ${opcion.texto}</span>
          </label>
        `).join('')}
      </div>
    `;
    areaPregunta.innerHTML = html;

    document.querySelectorAll(`input[name="pregunta${index}"]`).forEach(input => {
      input.addEventListener("change", () => {
        respuestas[index] = parseInt(input.value);
        guardarLocal();
        actualizarBotonesNavegacion();
      });
    });

    // ✅ LECTURA DE VOZ CON FUNCIÓN SEGURA Y DELAY
    if (lecturaActiva) {
      let textoCompleto = '';
      
      if (pregunta.pregunta && pregunta.pregunta.trim() !== '') {
        textoCompleto += limpiarTexto(pregunta.pregunta) + '. ';
      }
      
      if (pregunta.pregunta_a && pregunta.pregunta_a.trim() !== '') {
        textoCompleto += limpiarTexto(pregunta.pregunta_a) + '. ';
      }
      
      if (pregunta.pregunta_b && pregunta.pregunta_b.trim() !== '') {
        textoCompleto += limpiarTexto(pregunta.pregunta_b) + '. ';
      }
      
      if (textoCompleto.trim() !== '') {
        // ✅ Usar setTimeout para evitar conflictos de timing
        setTimeout(() => {
          leerTextoSeguro(textoCompleto.trim());
        }, 300);
      }
    }
  }

  // FUNCIÓN PARA OBTENER EL TEXTO COMPLETO DE UNA PREGUNTA
  function obtenerTextoPreguntaCompleto(pregunta) {
    let textoCompleto = '';
    
    if (pregunta.pregunta && pregunta.pregunta.trim() !== '') {
      textoCompleto += limpiarTexto(pregunta.pregunta);
    }
    
    if (pregunta.pregunta_a && pregunta.pregunta_a.trim() !== '') {
      textoCompleto += ' ' + limpiarTexto(pregunta.pregunta_a);
    }
    
    if (pregunta.pregunta_b && pregunta.pregunta_b.trim() !== '') {
      textoCompleto += ' ' + limpiarTexto(pregunta.pregunta_b);
    }
    
    return textoCompleto.trim();
  }

  // FUNCIÓN PARA OBTENER TEXTO DE OPCIÓN POR NÚMERO
  function obtenerTextoOpcion(pregunta, numeroOpcion) {
    const opciones = [
      pregunta.opcion1, pregunta.opcion2,
      pregunta.opcion3, pregunta.opcion4, pregunta.opcion5
    ];
    
    if (numeroOpcion >= 1 && numeroOpcion <= 5) {
      return opciones[numeroOpcion - 1] || '';
    }
    return '';
  }

  // FUNCIÓN PARA OBTENER LETRA DE OPCIÓN BASADA EN OPCIONES VÁLIDAS
  function obtenerLetraOpcion(pregunta, numeroOpcion) {
    const todasOpciones = [
      pregunta.opcion1, pregunta.opcion2,
      pregunta.opcion3, pregunta.opcion4, pregunta.opcion5
    ];
    
    const opcionesValidas = todasOpciones
      .map((opcion, i) => ({ texto: opcion, indiceOriginal: i + 1 }))
      .filter(opcion => opcion && opcion.texto && opcion.texto.trim() !== '');
    
    const indiceEnValidas = opcionesValidas.findIndex(opcion => opcion.indiceOriginal === numeroOpcion);
    
    if (indiceEnValidas !== -1) {
      return String.fromCharCode(65 + indiceEnValidas);
    }
    return '';
  }

  // FUNCIÓN PARA GENERAR REPORTE DETALLADO
  function generarReporteDetallado(correctas, incorrectasCount, sinResponderCount, nota, usuario = 'Usuario') {
    let reporteHTML = `
      <!DOCTYPE html>
      <html lang="es">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Reporte Detallado del Examen</title>
          <style>
              body {
                  font-family: Arial, sans-serif;
                  margin: 20px;
                  color: #333;
                  font-size: 1rem;
              }
              .header {
                  text-align: center;
                  margin-bottom: 15px;
                  padding: 20px;
                  background-color: #f8f9fa;
                  border-radius: 10px;
              }
              .h1{
                font-size: 2rem;
              }
              .resumen {
                  background-color: #e9ecef;
                  padding: 15px;
                  border-radius: 8px;
                  margin-bottom: 15px;
                  line-height: 1.2;
              }
              
              .resumen p {
                  margin: 5px 0;
              }

              .pregunta {
                  margin-bottom: 25px;
                  padding: 15px;
                  border: 1px solid #ddd;
                  border-radius: 8px;
                  background-color: #fff;
              }
              .pregunta-numero {
                  font-weight: bold;
                  color: #2c3e50;
                  margin-bottom: 10px;
              }
              .pregunta-texto {
                  margin-bottom: 15px;
              }
              .opcion-info {
                  margin: 5px 0;
                  padding: 5px 10px;
              }
              .opcion-marcada {
                  background-color: #fff3cd;
                  border-left: 4px solid #ffc107;
              }
              .opcion-correcta {
                  background-color: #d1edff;
                  border-left: 4px solid #0066cc;
              }
              .resultado {
                  font-weight: bold;
                  margin-top: 10px;
                  padding: 10px;
                  border-radius: 5px;
              }
              .acertado {
                  color: #155724;
                  background-color: #d4edda;
                  border: 1px solid #c3e6cb;
              }
              .fallado {
                  color: #721c24;
                  background-color: #f8d7da;
                  border: 1px solid #f5c6cb;
              }
              .sin-respuesta {
                  color: #856404;
                  background-color: #fff3cd;
                  border: 1px solid #ffeaa7;
              }
              .controles {
                  position: fixed;
                  top: 15px;
                  right: 15px;
                  z-index: 1000;
              }
              .btn {
                  background-color: #007bff;
                  color: white;
                  border: none;
                  padding: 8px 12px;
                  margin: 5px;
                  border-radius: 5px;
                  cursor: pointer;
                  font-size: 14px;
              }
              .btn:hover {
                  background-color: #0056b3;
              }
              .btn-pdf {
                  background-color: #dc3545;
              }
              .btn-pdf:hover {
                  background-color: #c82333;
              }
              @media print {
                  .controles {
                      display: none;
                  }
              }
              @media (max-width: 550px) {
                body {
                font-size: 0.7rem;
                }
                .h1{
                  font-size: 1.5rem;
                }
                .btn {
                  font-size: 12px;
                }
                .controles {
                  justify-content: center;
                }
              }
          </style>
      </head>
      <body>
          <div class="controles">
              <button class="btn" onclick="window.print()">🖨️ Imprimir</button>
              <button class="btn btn-pdf" onclick="generarPDF()">📄 Descargar PDF</button>
              <button class="btn" onclick="window.close()">Cerrar</button>
          </div>

          <div class="header">
              <h1>Reporte Detallado del Examen</h1>
              <p><strong>Usuario:</strong> ${usuario}</p>
              <p><strong>Fecha:</strong> ${new Date().toLocaleString('es-ES')}</p>
          </div>

          <div class="resumen">
              <h3>Resumen de Resultados</h3>
              <p><strong>Total de preguntas:</strong> ${preguntas.length}</p>
              <p><strong>Respuestas correctas:</strong> ${correctas}</p>
              <p><strong>Respuestas incorrectas:</strong> ${incorrectasCount}</p>
              <p><strong>Sin responder:</strong> ${sinResponderCount}</p>
              <p><strong>Puntaje obtenido:</strong> ${nota} puntos</p>
              <p><strong>Estado:</strong> ${nota >= 36 ? 'APROBADO' : 'DESAPROBADO'}</p>
          </div>
    `;

    preguntas.forEach((pregunta, index) => {
      const respuestaUsuario = respuestas[index];
      const respuestaCorrecta = parseInt(pregunta.correcta_rpta);
      const textoCompleto = obtenerTextoPreguntaCompleto(pregunta);
      
      let estadoRespuesta = '';
      let claseResultado = '';
      let textoRespuestaUsuario = 'Sin respuesta';
      let letraRespuestaUsuario = '';
      
      if (respuestaUsuario === null || respuestaUsuario === undefined) {
        estadoRespuesta = 'SIN RESPONDER';
        claseResultado = 'sin-respuesta';
      } else if (respuestaUsuario === respuestaCorrecta) {
        estadoRespuesta = 'ACERTADO';
        claseResultado = 'acertado';
        textoRespuestaUsuario = obtenerTextoOpcion(pregunta, respuestaUsuario);
        letraRespuestaUsuario = obtenerLetraOpcion(pregunta, respuestaUsuario);
      } else {
        estadoRespuesta = 'FALLADO';
        claseResultado = 'fallado';
        textoRespuestaUsuario = obtenerTextoOpcion(pregunta, respuestaUsuario);
        letraRespuestaUsuario = obtenerLetraOpcion(pregunta, respuestaUsuario);
      }

      const textoOpcionCorrecta = obtenerTextoOpcion(pregunta, respuestaCorrecta);
      const letraOpcionCorrecta = obtenerLetraOpcion(pregunta, respuestaCorrecta);

      reporteHTML += `
        <div class="pregunta">
          <div class="pregunta-numero">Pregunta ${index + 1}</div>
          <div class="pregunta-texto">${textoCompleto}</div>
          
          ${respuestaUsuario !== null && respuestaUsuario !== undefined ? `
            <div class="opcion-info opcion-marcada">
              <strong>Opción marcada:</strong> ${letraRespuestaUsuario}. ${textoRespuestaUsuario}
            </div>
          ` : `
            <div class="opcion-info sin-respuesta">
              <strong>Opción marcada:</strong> Sin responder
            </div>
          `}
          
          <div class="opcion-info opcion-correcta">
            <strong>Opción correcta:</strong> ${letraOpcionCorrecta}. ${textoOpcionCorrecta}
          </div>
          
          <div class="resultado ${claseResultado}">
            <strong>Usted ha: ${estadoRespuesta}</strong>
          </div>
        </div>
      `;
    });

    reporteHTML += `
          <script>
              const datosExamen = {
                  preguntas: ${JSON.stringify(preguntas)},
                  respuestas: ${JSON.stringify(respuestas)},
                  nota: ${nota}
              };
              
              async function generarPDF() {
                  try {
                      console.log('Enviando datos:', datosExamen);
                      
                      const response = await fetch('generar_reporte_pdf.php', {
                          method: 'POST',
                          headers: {
                              'Content-Type': 'application/json',
                          },
                          body: JSON.stringify(datosExamen)
                      });
                      
                      if (response.ok) {
                          const blob = await response.blob();
                          const url = window.URL.createObjectURL(blob);
                          const a = document.createElement('a');
                          a.href = url;
                          a.download = 'reporte-examen-${new Date().getTime()}.pdf';
                          document.body.appendChild(a);
                          a.click();
                          window.URL.revokeObjectURL(url);
                          document.body.removeChild(a);
                      } else {
                          const errorText = await response.text();
                          console.error('Error del servidor:', errorText);
                          throw new Error('Error en la respuesta del servidor: ' + response.status);
                      }
                  } catch (error) {
                      console.error('Error al generar PDF:', error);
                      alert('Error al generar el PDF: ' + error.message);
                  }
              }
          </script>
      </body>
      </html>
    `;

    return reporteHTML;
  }
  
  // TERMINAR EXAMEN
  async function terminarExamen() {
    if (!examenIniciado) return;

    const result = await Swal.fire({
      icon: 'question',
      title: 'Confirmar',
      text: 'Ud tiene un examen en curso. ¿Desea terminarlo?',
      showCancelButton: true,
      confirmButtonText: 'Sí, terminar',
      cancelButtonText: 'Cancelar',
      width: '400px'
    });

    if (!result.isConfirmed) return;

    // ✅ Detener lectura al terminar examen
    detenerLecturaSegura();

    let correctas = 0;
    let incorrectas = [];
    let sinResponder = [];

    preguntas.forEach((p, i) => {
      if (respuestas[i] === null || respuestas[i] === undefined) {
        sinResponder.push(p.Id);
      } else if (respuestas[i] === parseInt(p.correcta_rpta)) {
        correctas++;
      } else {
        incorrectas.push(p.Id);
      }
    });

    const nota = correctas;
    const msj = (nota < 36) ? 'Desaprobaste' : 'Aprobaste';
    
    const resultadoFinal = await Swal.fire({
      icon: 'success',
      title: 'Resultado guardado',
      html: `
        <p><strong>Obtuvo: ${nota} puntos. ${msj}</strong></p>
        <p>Correctas: ${correctas} | Incorrectas: ${incorrectas.length} | Sin responder: ${sinResponder.length}</p>
      `,
      showCancelButton: true,
      confirmButtonText: 'Reporte Detallado',
      cancelButtonText: 'Solo Continuar',
      width: '400px'
    });

    if (resultadoFinal.isConfirmed) {
      const nombreUsuario = 'Usuario'; // Puedes obtenerlo de tu sistema
      const reporteHTML = generarReporteDetallado(correctas, incorrectas.length, sinResponder.length, nota, nombreUsuario);
      const nuevaVentana = window.open('', '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes');
      nuevaVentana.document.write(reporteHTML);
      nuevaVentana.document.close();
    }

    try {
      const res = await fetch("guardar_resultado.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ nota, incorrectas })
      });
      
      const data = await res.json();
      
      if (!data.success) {
        console.error("Error al guardar:", data.message);
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'Hubo un problema al guardar el resultado.',
          width: '400px'
        });
      }
    } catch (error) {
      console.error("Error de conexión:", error);
      Swal.fire({
        icon: 'error',
        title: 'Error de conexión',
        text: 'Error al conectar con el servidor.',
        width: '400px'
      });
    }

    // Resetear examen
    clearInterval(temporizador);
    temporizador = null;
    localStorage.removeItem("respuestasM5");

    preguntas = [];
    respuestas = [];
    examenIniciado = false;
    lecturaActiva = false;

    tiempoRestante = 3 * 60 * 60;
    actualizarTimer();

    areaPregunta.innerHTML = "<p><em>Cargando pregunta...</em></p>";
    nav.innerHTML = "";
    nombreMateria.textContent = "";
    iniciarBtn.textContent = "Iniciar";
    iniciarBtn.classList.remove("terminar");
    vozBtn.textContent = "Con voz";
    vozBtn.classList.remove("rojo");
    vozBtn.classList.add("azul");
  }

  // INICIAR / TERMINAR EXAMEN
  iniciarBtn.addEventListener("click", async () => {
    if (!examenIniciado) {
      iniciarBtn.textContent = "Terminar";
      iniciarBtn.classList.add("terminar");
      examenIniciado = true;

      try {
        const res = await fetch("obtener_preguntasM5.php");
        const data = await res.json();
        
        preguntas = data;
        respuestas = cargarLocal();
        if (respuestas.length !== preguntas.length) {
          respuestas = new Array(preguntas.length).fill(null);
        }
        generarBotones(preguntas.length);
        mostrarPregunta(0);
        actualizarBotonesNavegacion();
        
        iniciarTemporizador();
      } catch (error) {
        console.error("Error al cargar preguntas:", error);
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'No se pudieron cargar las preguntas.',
          width: '400px'
        });
        
        iniciarBtn.textContent = "Iniciar";
        iniciarBtn.classList.remove("terminar");
        examenIniciado = false;
      }
    } else {
      await terminarExamen();
    }
  });

  // ✅ BOTÓN VOZ CORREGIDO
  vozBtn.addEventListener("click", () => {
    lecturaActiva = !lecturaActiva;

    vozBtn.textContent = lecturaActiva ? "Sin voz" : "Con voz";
    vozBtn.classList.toggle("rojo", lecturaActiva);
    vozBtn.classList.toggle("azul", !lecturaActiva);

    detenerLecturaSegura();

    if (lecturaActiva && preguntas.length > 0) {
      const btnSeleccionado = nav.querySelector('.seleccionado');
      if (btnSeleccionado) {
        const index = parseInt(btnSeleccionado.dataset.index);
        const preguntaActual = preguntas[index];
        
        let textoCompleto = '';
        
        if (preguntaActual.pregunta && preguntaActual.pregunta.trim() !== '') {
          textoCompleto += limpiarTexto(preguntaActual.pregunta) + '. ';
        }
        
        if (preguntaActual.pregunta_a && preguntaActual.pregunta_a.trim() !== '') {
          textoCompleto += limpiarTexto(preguntaActual.pregunta_a) + '. ';
        }
        
        if (preguntaActual.pregunta_b && preguntaActual.pregunta_b.trim() !== '') {
          textoCompleto += limpiarTexto(preguntaActual.pregunta_b) + '. ';
        }
        
        if (textoCompleto.trim() !== '') {
          // ✅ Usar setTimeout para evitar conflictos
          setTimeout(() => {
            leerTextoSeguro(textoCompleto.trim());
          }, 300);
        }
      }
    }
  });

  // ✅ DETENER LECTURA AL ABANDONAR LA PÁGINA
  window.addEventListener('beforeunload', () => {
    detenerLecturaSegura();
  });

  window.addEventListener('blur', () => {
    detenerLecturaSegura();
  });

  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      detenerLecturaSegura();
    }
  });

  window.addEventListener('popstate', () => {
    detenerLecturaSegura();
  });

  // ✅ VERIFICACIÓN INICIAL
  console.log('✅ generarM5.js cargado correctamente');
  verificarVozJS();

});