document.addEventListener('DOMContentLoaded', () => {
    const toggleBtn = document.getElementById('btn-toggle');
    const timerElemento = document.querySelector('.timer');
    const selectMaterias = document.getElementById('materias');
    const contenedor = document.querySelector('main.contenedor');
    const vozBtn = document.querySelector('.btn.voz');
  
    let timerInterval = null;
    let tiempoRestante = 3 * 60 * 60; 
    let lecturaActivada = false;
    let preguntaActual = null;
    let voces = [];
    let isSpeaking = false;
    
    let preguntas = [];
    let index = 0;
  
    // ✅ FUNCIÓN NUEVA: Detener lectura de forma segura
    function detenerLecturaSinErrores() {
      if (window.speechSynthesis.speaking || window.speechSynthesis.pending) {
        // Marcar que se está cancelando intencionalmente
        window.speechSynthesis.cancel();
        
        // Resetear estado global
        isSpeaking = false;
        
        // Resetear botón de IA si existe
        const vozIABtn = document.getElementById('vozIA-btn');
        if (vozIABtn) {
          vozIABtn.innerHTML = '🔊';
          vozIABtn.title = 'Leer respuesta IA';
          vozIABtn.classList.remove('speaking');
        }
        
        console.log('Lectura detenida correctamente para navegación');
      }
    }
  
    // ✅ FUNCIÓN MEJORADA: Formatear respuestas de Gemini AI
    function formatearRespuestaGemini(texto) {
      if (!texto) return texto;
      
      let textoFormateado = texto;
      
      // Convertir títulos con triple asterisco a H3 (más agresivo)
      textoFormateado = textoFormateado.replace(/\*{3,}([^*]+)\*{3,}/g, '<h3>$1</h3>');
      
      // Convertir texto con doble asterisco a negrita (corregido)
      textoFormateado = textoFormateado.replace(/\*{2}([^*]+)\*{2}/g, '<strong>$1</strong>');
      
      // Convertir texto con asterisco simple a cursiva
      textoFormateado = textoFormateado.replace(/\*([^*]+)\*/g, '<em>$1</em>');
      
      // Convertir guiones de listas a elementos de lista HTML
      textoFormateado = textoFormateado.replace(/^[\-\*\+]\s(.+)$/gm, '<li>$1</li>');
      
      // Envolver listas consecutivas en <ul>
      textoFormateado = textoFormateado.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
      
      // Convertir saltos de línea dobles a párrafos
      textoFormateado = textoFormateado.replace(/\n\s*\n/g, '</p><p>');
      
      // Envolver todo en párrafos si no tiene etiquetas HTML principales
      if (!textoFormateado.includes('<h3>') && !textoFormateado.includes('<ul>') && !textoFormateado.includes('<p>')) {
        textoFormateado = '<p>' + textoFormateado + '</p>';
      }
      
      // Limpiar párrafos vacíos
      textoFormateado = textoFormateado.replace(/<p><\/p>/g, '');
      textoFormateado = textoFormateado.replace(/<p>\s*<\/p>/g, '');
      
      // Convertir saltos de línea simples a <br>
      textoFormateado = textoFormateado.replace(/(?<!>)\n(?!<)/g, '<br>');
      
      return textoFormateado.trim();
    }
  
    // ✅ FUNCIÓN ALTERNATIVA: Limpiar asteriscos completamente
    function limpiarAsteriscos(texto) {
      if (!texto) return texto;
      
      return texto
        .replace(/\*{3,}/g, '')        // Eliminar triple asterisco o más
        .replace(/\*{2}/g, '')         // Eliminar doble asterisco  
        .replace(/\*/g, '')            // Eliminar asterisco simple
        .replace(/\n\s*\n/g, '<br><br>') // Convertir dobles saltos de línea
        .replace(/\n/g, '<br>')        // Convertir saltos simples a <br>
        .trim();
    }
  
    // ✅ CORREGIDO: getVoices (no getVoces)
    function cargarVoces() {
      voces = speechSynthesis.getVoices().filter(v => v.lang.startsWith('es'));
    }
  
    // ✅ FUNCIÓN CORREGIDA: leerTexto con mejor manejo de errores
    function leerTexto(texto, callback = null) {
      if (!voces.length) cargarVoces();
  
      const utterance = new SpeechSynthesisUtterance(texto);
  
      const vozPreferida = localStorage.getItem('vozPreferida');
      const vozSeleccionada = voces.find(v => v.name === vozPreferida) || voces[0];
      utterance.voice = vozSeleccionada;
  
      isSpeaking = true;
  
      utterance.onend = () => {
        isSpeaking = false;
        if (typeof callback === 'function') callback();
      };
  
      utterance.onerror = (e) => {
        // ✅ Solo mostrar error si NO es una interrupción intencional
        if (e.error !== 'interrupted') {
          console.error("Error al leer con voz:", e);
        } else {
          console.log("Lectura interrumpida intencionalmente");
        }
        isSpeaking = false;
        if (typeof callback === 'function') callback();
      };
  
      // ✅ Cancelar cualquier lectura previa de forma segura
      if (window.speechSynthesis.speaking || window.speechSynthesis.pending) {
        window.speechSynthesis.cancel();
      }
      
      setTimeout(() => {
        window.speechSynthesis.speak(utterance);
      }, 100);
    }
  
    // Inicializar voces
    window.speechSynthesis.onvoiceschanged = cargarVoces;
    cargarVoces();
  
    async function validarToken() {
      try {
        const res = await fetch('validar_token.php');
        const data = await res.json();
        return data.valido === true;
      } catch (err) {
        console.error('Error al validar el token:', err);
        return false;
      }
    }
  
    validarToken().then(tokenValido => {
      if (!tokenValido) {
        window.location.href = "index.html?expirado=1";
      }
    });
  
    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}`;
    }
  
    function iniciarTimer() {
      if (timerInterval) return;
      timerInterval = setInterval(() => {
        if (tiempoRestante > 0) {
          tiempoRestante--;
          actualizarTimer();
        } else {
          clearInterval(timerInterval);
          timerInterval = null;
          Swal.fire({
            icon: 'info',
            title: '¡Descanso Visual!',
            text: 'Tu vista necesita un respiro, ¡Es momento de descansar!',
            width: '400px'
          });
        }
      }, 1000);
    }
  
    function detenerTimer() {
      clearInterval(timerInterval);
      timerInterval = null;
    }
  
    function reiniciarTimer() {
      tiempoRestante = 3 * 60 * 60;
      actualizarTimer();
    }  
  
    // ✅ FUNCIÓN COMPLETAMENTE CORREGIDA: toggleLecturaIA con lógica diferenciada
    function toggleLecturaIA() {
      const vozIABtn = document.getElementById('vozIA-btn');
      const resultadoDiv = document.getElementById('resultado');
      
      // ✅ PRIMERO: Verificar si hay contenido válido ANTES de hacer cualquier cosa
      const textoIA = resultadoDiv.textContent || resultadoDiv.innerText || '';
      const textoLimpio = textoIA.trim();
      
      // ✅ Lista de textos que indican que NO hay explicación válida
      const textosInvalidos = [
        '', // Vacío
        'Haz clic en "Explicación IA" para obtener una explicación detallada...',
        'Haz clic en "Explicación" para obtener una explicación detallada...',
        'Espere un momento, IA analizando pregunta',
        '❌ Error: No se pudo obtener la explicación.',
        '❌ Error: Sesión expirada. Inicie sesión nuevamente.',
        '❌ Error: Límite de solicitudes excedido. Intente más tarde.',
        '❌ Error: Problema de configuración del servicio IA.',
        '❌ Error: Solicitud inválida.',
        '❌ Error: Problema de conexión. Verifique su internet.'
      ];
      
      // ✅ Verificar si el texto es inválido o contiene mensajes de error/carga
      const esTextoInvalido = textosInvalidos.some(textoInvalido => 
        textoLimpio === textoInvalido || 
        textoLimpio.includes('Error:') ||
        textoLimpio.includes('Espere un momento') ||
        textoLimpio.includes('analizando pregunta')
      );
      
      // ✅ Si NO hay contenido válido, NO hacer nada (mantener lectura actual)
      if (esTextoInvalido || textoLimpio.length < 10) {
        console.log('toggleLecturaIA: No hay contenido válido para leer, manteniendo estado actual');
        return; // ✅ SALIR INMEDIATAMENTE sin tocar speechSynthesis
      }
      
      // ✅ LÓGICA CORREGIDA: Verificar si el botón IA está en estado "hablando"
      const iaEstaHablando = vozIABtn.classList.contains('speaking');
      
      if (iaEstaHablando) {
        // Si el botón IA está marcado como "hablando", detener la IA
        window.speechSynthesis.cancel();
        isSpeaking = false;
        vozIABtn.innerHTML = '🔊';
        vozIABtn.title = 'Leer respuesta IA';
        vozIABtn.classList.remove('speaking');
        console.log('toggleLecturaIA: Deteniendo lectura de IA');
      } else {
        // ✅ INICIAR lectura de IA (hay contenido válido y no está hablando la IA)
        console.log('toggleLecturaIA: Contenido válido encontrado, procediendo con la lectura');
        
        // Cancelar cualquier lectura en curso (pregunta o IA anterior)
        window.speechSynthesis.cancel();
        
        // ✅ RESETEAR botón "Con voz" si está activo
        const vozBtn = document.querySelector('.btn.voz');
        if (vozBtn && lecturaActivada) {
          lecturaActivada = false;
          vozBtn.textContent = 'Con voz';
          vozBtn.classList.remove('red');
          vozBtn.classList.add('azul');
          console.log('toggleLecturaIA: Botón "Con voz" reseteado');
        }
        
        // ✅ Actualizar botón de voz IA ANTES de iniciar
        vozIABtn.innerHTML = '🔇';
        vozIABtn.title = 'Detener lectura';
        vozIABtn.classList.add('speaking');
        
        // ✅ Iniciar lectura de IA con delay para evitar conflictos
        setTimeout(() => {
          console.log('toggleLecturaIA: Iniciando lectura de explicación IA');
          leerTexto(textoLimpio, () => {
            // Callback cuando termina la lectura
            vozIABtn.innerHTML = '🔊';
            vozIABtn.title = 'Leer respuesta IA';
            vozIABtn.classList.remove('speaking');
            console.log('toggleLecturaIA: Lectura de explicación completada');
          });
        }, 200);
      }
    }
  
    // ✅ MODIFICADO: Función mejorada para consultar Gemini AI con formateo
    async function consultarGeminiIA(preguntaCompleta) {
      try {
        const response = await fetch('gemini_ia.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          credentials: 'include',
          body: JSON.stringify({
            pregunta: preguntaCompleta
          })
        });
  
        const data = await response.json();
  
        if (!response.ok) {
          throw new Error(data.error || `Error HTTP: ${response.status}`);
        }
  
        if (!data.success) {
          throw new Error(data.error || 'Error desconocido');
        }
  
        // ✅ APLICAR LIMPIEZA DE ASTERISCOS A LA RESPUESTA
        return limpiarAsteriscos(data.respuesta);
        
        // ✅ ALTERNATIVA: Si quieres formateo HTML completo, comenta la línea anterior y descomenta esta:
        // return formatearRespuestaGemini(data.respuesta);
        
      } catch (error) {
        console.error('Error al consultar AI:', error);
        throw error;
      }
    }
  
    // ✅ FUNCIÓN CORREGIDA: buscar con verificación de contenido existente
    window.buscar = async function() {
      if (!preguntaActual) {
        Swal.fire({
          icon: 'warning',
          title: 'Sin pregunta',
          text: 'No hay pregunta activa para consultar.',
          width: '400px'
        });
        return;
      }
  
      const resultadoDiv = document.getElementById('resultado');
      const contenidoExistente = resultadoDiv.textContent || resultadoDiv.innerText || '';
      const contenidoLimpio = contenidoExistente.trim();
      
      // ✅ Lista de textos que indican que NO hay explicación válida (misma lógica que toggleLecturaIA)
      const textosInvalidos = [
        '', // Vacío
        'Haz clic en "Explicación IA" para obtener una explicación detallada...',
        'Haz clic en "Explicación" para obtener una explicación detallada...',
        'Espere un momento, IA analizando pregunta',
        '❌ Error: No se pudo obtener la explicación.',
        '❌ Error: Sesión expirada. Inicie sesión nuevamente.',
        '❌ Error: Límite de solicitudes excedido. Intente más tarde.',
        '❌ Error: Problema de configuración del servicio IA.',
        '❌ Error: Solicitud inválida.',
        '❌ Error: Problema de conexión. Verifique su internet.'
      ];
      
      // ✅ Verificar si ya existe contenido válido
      const yaTieneExplicacion = !textosInvalidos.some(textoInvalido => 
        contenidoLimpio === textoInvalido || 
        contenidoLimpio.includes('Error:') ||
        contenidoLimpio.includes('Espere un momento') ||
        contenidoLimpio.includes('analizando pregunta')
      ) && contenidoLimpio.length >= 10;
      
      // ✅ Si ya tiene explicación válida, NO hacer nueva consulta
      if (yaTieneExplicacion) {
        console.log('buscar(): Ya existe explicación válida, no se realizará nueva consulta');
        
        // Opcional: Mostrar mensaje discreto al usuario
        const existingBtn = document.querySelector('.btn-explicacion');
        if (existingBtn) {
          const textoOriginal = existingBtn.textContent;
          existingBtn.textContent = 'Ya cargada';
          existingBtn.style.opacity = '0.7';
          
          setTimeout(() => {
            existingBtn.textContent = textoOriginal;
            existingBtn.style.opacity = '1';
          }, 1000);
        }
        
        return;
      }
  
      // ✅ Solo si NO hay explicación válida, proceder con la consulta
      console.log('buscar(): No hay explicación válida, consultando IA...');
  
      try {
        resultadoDiv.innerHTML = `
          <div class="loading-indicator">
              <span class="loading-text">Espere un momento, IA analizando pregunta</span>
          </div>
        `;
        
        let preguntaCompleta = "Explica de manera clara, directa y estructurada la opción correcta de la siguiente pregunta:\n\n";
        
        if (preguntaActual.pregunta && preguntaActual.pregunta.trim() !== '') {
          preguntaCompleta += "PREGUNTA: " + preguntaActual.pregunta + "\n\n";
        }
        
        if (preguntaActual.pregunta_a && preguntaActual.pregunta_a.trim() !== '') {
          preguntaCompleta += "CONTEXTO A: " + preguntaActual.pregunta_a + "\n\n";
        }
        
        if (preguntaActual.pregunta_b && preguntaActual.pregunta_b.trim() !== '') {
          preguntaCompleta += "CONTEXTO B: " + preguntaActual.pregunta_b + "\n\n";
        }
        
        preguntaCompleta += "OPCIONES DISPONIBLES:\n";
        let opciones = [];
        const letrasOpciones = ['A)', 'B)', 'C)', 'D)', 'E)'];
        
        for (let i = 1; i <= 5; i++) {
          const opcionTexto = preguntaActual[`opcion${i}`];
          if (opcionTexto && opcionTexto.trim() !== '') {
            opciones.push(`${letrasOpciones[i-1]} ${opcionTexto}`);
          }
        }
        
        preguntaCompleta += opciones.join("\n") + "\n\n";
        
        const respuestaCorrectaTexto = preguntaActual[`opcion${preguntaActual.correcta_rpta}`];
        if (respuestaCorrectaTexto) {
          preguntaCompleta += `RESPUESTA CORRECTA: ${letrasOpciones[preguntaActual.correcta_rpta-1]} ${respuestaCorrectaTexto}\n\n`;
        }
  
        // ✅ PROMPT CORREGIDO: Sin asteriscos ni formato Markdown
        preguntaCompleta += `Por favor, proporciona una explicación estructurada que incluya:
  
  ANÁLISIS DE LA RESPUESTA CORRECTA:
  Explica por qué la opción seleccionada es correcta y qué conceptos fundamentales la respaldan.
  
  ANÁLISIS DE LAS OPCIONES INCORRECTAS:  
  Explica brevemente por qué cada una de las otras opciones no es correcta.
  
  IMPORTANTE: Responde de manera clara y directa, usando un lenguaje académico pero comprensible. NO uses asteriscos (*) ni símbolos de formato Markdown. Responde en texto plano limpio y estructurado.`;
        
        const respuestaIA = await consultarGeminiIA(preguntaCompleta);
        
        // ✅ USAR innerHTML PARA RENDERIZAR EL HTML FORMATEADO
        resultadoDiv.innerHTML = respuestaIA;
        
      } catch (error) {
        console.error('Error:', error);
        const resultadoDiv = document.getElementById('resultado');
        
        let mensajeError = '❌ Error: No se pudo obtener la explicación.';
        
        if (error.message.includes('No autorizado')) {
          mensajeError = '❌ Error: Sesión expirada. Inicie sesión nuevamente.';
        } else if (error.message.includes('429')) {
          mensajeError = '❌ Error: Límite de solicitudes excedido. Intente más tarde.';
        } else if (error.message.includes('403')) {
          mensajeError = '❌ Error: Problema de configuración del servicio IA.';
        } else if (error.message.includes('400')) {
          mensajeError = '❌ Error: Solicitud inválida.';
        } else if (error.message.includes('conexión')) {
          mensajeError = '❌ Error: Problema de conexión. Verifique su internet.';
        }
        
        resultadoDiv.innerHTML = `<div class="error-message">${mensajeError} Intente nuevamente.</div>`;
        
        Swal.fire({
          icon: 'error',
          title: 'Error de IA',
          text: mensajeError,
          width: '400px'
        });
      }
    };
  
    // ✅ FUNCIÓN ACTUALIZADA: mostrarPregunta() CON SOPORTE DE IMÁGENES
    // ✅ FUNCIÓN ACTUALIZADA: mostrarPregunta() CON LÓGICA INDEPENDIENTE
    function mostrarPregunta(index) {
        const pregunta = preguntas[index];
        preguntaActual = pregunta;
    
        let preguntasHTML = '';
        
        // ✅ PREGUNTA PRINCIPAL - LÓGICA INDEPENDIENTE
        // Verificar si tiene texto
        if (pregunta.pregunta && pregunta.pregunta.trim() !== '') {
        preguntasHTML += `<div class="pregunta">${pregunta.pregunta}</div>`;
        }
        
        // 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 pregunta-a">${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 pregunta-b">${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>`;
        }
    
        let opcionesHTML = '';
        for (let i = 1; i <= 5; i++) {
        const opcionTexto = pregunta[`opcion${i}`];
        
        if (opcionTexto && opcionTexto.trim() !== '') {
            opcionesHTML += `
            <label class="opcion ${i == pregunta.correcta_rpta ? 'correcta' : ''}">
                <input type="radio" name="opcion" disabled>
                ${opcionTexto}
            </label>`;
        }
        }
    
        const preguntaHTML = `
        ${preguntasHTML}
        <div class="opciones">
            ${opcionesHTML}
        </div>
        <div class="acciones">
            <div class="botones-ia">
            <button onclick="buscar()" class="btn-explicacion">Explicación</button>
            <button id="vozIA-btn" onclick="toggleLecturaIA()" title="Leer respuesta IA" class="btn-voz-ia">🔊</button>
            </div>
            <div class="navegacion">
            <button class="btn nav anterior">Anterior</button>
            <button class="btn nav siguiente">Siguiente</button>
            </div>
        </div>
        <div id="resultado" class="resultado-ia">Haz clic en "Explicación IA" para obtener una explicación detallada...</div>
        <div class="detalle_txt"><strong>${pregunta.detalle_rpta}</strong></div>
        `;
    
        contenedor.innerHTML = preguntaHTML;
        window.toggleLecturaIA = toggleLecturaIA;
    
        setTimeout(() => {
        const vozIABtn = document.getElementById('vozIA-btn');
        if (vozIABtn) {
            vozIABtn.innerHTML = '🔊';
            vozIABtn.title = 'Leer respuesta IA';
            vozIABtn.classList.remove('speaking');
        }
        }, 100);
    
        const materiaId = selectMaterias.value;
        localStorage.setItem(`avance_${materiaId}`, index);
    
        if (lecturaActivada) {
        let textoCompleto = '';
        
        if (pregunta.pregunta && pregunta.pregunta.trim() !== '') {
            textoCompleto += pregunta.pregunta + '. ';
        }
        
        if (pregunta.pregunta_a && pregunta.pregunta_a.trim() !== '') {
            textoCompleto += pregunta.pregunta_a + '. ';
        }
        
        if (pregunta.pregunta_b && pregunta.pregunta_b.trim() !== '') {
            textoCompleto += pregunta.pregunta_b + '. ';
        }
        
        if (textoCompleto.trim() !== '') {
            leerTexto(textoCompleto);
        }
        }
    }
  
    async function cargarPreguntas(materiaId) {
      try {
        const res = await fetch(`obtener_preguntasM2.php?materia_id=${materiaId}`, {
          credentials: 'include'
        });
  
        if (!res.ok) throw new Error("Error al cargar preguntas");
        preguntas = await res.json();
  
        const avanceGuardado = localStorage.getItem(`avance_${materiaId}`);
        
        if (avanceGuardado !== null && !isNaN(avanceGuardado)) {
          Swal.fire({
            title: 'Progreso guardado',
            text: `Tienes un avance en esta materia. ¿Deseas continuar donde te quedaste?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, continuar',
            cancelButtonText: 'No, empezar de nuevo',
            width: '400px'
          }).then((result) => {
            index = result.isConfirmed ? parseInt(avanceGuardado) : 0;
            mostrarPregunta(index);
          });
        } else {
          index = 0;
          mostrarPregunta(index);
        }
  
        // ✅ NAVEGACIÓN CORREGIDA: Con detención segura de lectura
        contenedor.onclick = (e) => {
          if (e.target.classList.contains('siguiente') && index < preguntas.length - 1) {
            // ✅ Detener lectura de forma segura antes de navegar
            detenerLecturaSinErrores();
            
            index++;
            mostrarPregunta(index);
            
          } else if (e.target.classList.contains('anterior') && index > 0) {
            // ✅ Detener lectura de forma segura antes de navegar
            detenerLecturaSinErrores();
            
            index--;
            mostrarPregunta(index);
          }
        };
  
      } catch (err) {
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'No se pudieron cargar las preguntas.',
          width: '400px'
        });
      }
    }
  
    fetch('get_materias.php')
      .then(res => res.text())
      .then(html => { selectMaterias.innerHTML += html; })
      .catch(err => console.error('Error cargando materias:', err));
  
    actualizarTimer();
  
    // ✅ BOTÓN "CON VOZ" CORREGIDO: Event listener actualizado
    if (vozBtn) {
      vozBtn.addEventListener('click', () => {
        lecturaActivada = !lecturaActivada;
        vozBtn.textContent = lecturaActivada ? 'Sin voz' : 'Con voz';
        vozBtn.classList.toggle('red', lecturaActivada);
        vozBtn.classList.toggle('azul', !lecturaActivada);
  
        // ✅ Detener lectura de forma segura
        detenerLecturaSinErrores();
  
        if (lecturaActivada && preguntaActual) {
          let textoCompleto = '';
          
          if (preguntaActual.pregunta && preguntaActual.pregunta.trim() !== '') {
            textoCompleto += preguntaActual.pregunta + '. ';
          }
          
          if (preguntaActual.pregunta_a && preguntaActual.pregunta_a.trim() !== '') {
            textoCompleto += preguntaActual.pregunta_a + '. ';
          }
          
          if (preguntaActual.pregunta_b && preguntaActual.pregunta_b.trim() !== '') {
            textoCompleto += preguntaActual.pregunta_b + '. ';
          }
          
          if (textoCompleto.trim() !== '') {
            // ✅ Usar setTimeout para evitar conflictos
            setTimeout(() => {
              leerTexto(textoCompleto);
            }, 200);
          }
        }
      });
    }
  
    if (toggleBtn) {
      toggleBtn.addEventListener('click', async () => {
        const iniciar = toggleBtn.classList.contains('iniciar');
  
        if (iniciar) {
          const tokenValido = await validarToken();
          if (!tokenValido) {
            window.location.href = "index.html?expirado=1";
            return;
          }
  
          const materiaId = selectMaterias.value;
          if (!materiaId) {
            Swal.fire({
              icon: 'warning',
              title: 'Seleccione una materia',
              text: 'Debe seleccionar una materia antes de iniciar.',
              width: '400px'
            });
            return;
          }
  
          toggleBtn.textContent = 'Terminar';
          toggleBtn.classList.replace('iniciar', 'terminar');
          selectMaterias.disabled = true;
          iniciarTimer();
          await cargarPreguntas(materiaId);
  
        } else {
          detenerTimer();
          // ✅ Usar función de detención segura
          detenerLecturaSinErrores();
  
          Swal.fire({
            icon: 'success',
            title: 'Avance guardado',
            text: 'El simulador AscensoFacil, guardó exitosamente tu avance.',
            width: '400px'
          });
  
          toggleBtn.textContent = 'Iniciar';
          toggleBtn.classList.replace('terminar', 'iniciar');
          reiniciarTimer();
          selectMaterias.disabled = false;
          
          contenedor.innerHTML = '';
          preguntaActual = null;
          preguntas = [];
        }
      });
    }
  
    // ✅ Log correcto
    console.log('Sistema de IA configurado correctamente');
  
    // ✅ NUEVA FUNCIONALIDAD: Detener voz al salir de la página
    // Detectar cuando el usuario abandona la página (retrocede, cierra, recarga, etc.)
    window.addEventListener('beforeunload', function(e) {
      console.log('Usuario abandonando página, deteniendo lectura de voz...');
      detenerLecturaSinErrores();
    });
  
    // ✅ Detectar cuando la página pierde el foco (cambio de pestaña, etc.)
    document.addEventListener('visibilitychange', function() {
      if (document.hidden) {
        console.log('Página oculta, pausando lectura...');
        // Opcional: pausar lectura cuando se cambia de pestaña
      }
    });
  });