<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Generador Estético de Palabras</title>
  <!-- jQuery y librerías para PDF y Excel -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <!-- Librería SheetJS para leer archivos Excel -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
    /* Estilo basado en la imagen "Pixel Art Generator" */
    :root {
      --bg-dark: #1a1a2e; /* Fondo principal oscuro */
      --bg-panel: #2a2a4a; /* Fondo ligeramente más claro para paneles */
      --accent-neon: #00f0ff; /* Azul neón brillante para acentos */
      --accent-gradient-start: #00f0ff;
      --accent-gradient-end: #a100ff; /* Magenta/Púrpura para gradientes */
      --text-light: #e0e0ff; /* Texto claro, ligeramente azulado/lavanda */
      --text-dark: #1a1a2e; /* Texto oscuro para botones brillantes */
      --border-color: #4a4a6a; /* Color de borde sutil */
      --error-color: #ff4d4d;
      --success-color: #4dff88;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: var(--bg-dark);
      color: var(--text-light);
      min-height: 100vh;
      font-size: 16px;
      line-height: 1.6;
    }

    /* Scrollbar custom (opcional pero mejora la estética) */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-dark); }
    ::-webkit-scrollbar-thumb { background: var(--accent-neon); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent-gradient-end); }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 30px 20px;
    }

    header {
      text-align: center;
      margin-bottom: 40px;
    }

    header h1 {
      font-size: 3rem;
      font-weight: 700;
      color: var(--accent-neon);
      text-shadow: 0 0 5px var(--accent-neon),
                   0 0 10px var(--accent-neon),
                   0 0 15px var(--accent-neon);
      margin-bottom: 10px;
    }

    header .subtitle {
      font-size: 1.2rem;
      opacity: 0.8;
      color: var(--text-light);
    }

    .main-content {
      display: grid;
      grid-template-columns: 300px 1fr; /* Columna izquierda fija, derecha flexible */
      gap: 30px;
    }

    @media (max-width: 900px) {
      .main-content {
        grid-template-columns: 1fr; /* Apilar en pantallas pequeñas */
      }
    }

    .left-panel {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espacio entre paneles de configuración y herramientas */
    }

    .panel {
      background-color: var(--bg-panel);
      border-radius: 8px;
      padding: 25px;
      border: 1px solid var(--border-color);
      box-shadow: 0 4px 15px rgba(0, 240, 255, 0.1); /* Sombra neón sutil */
    }

    .panel-title {
      font-size: 1.5rem;
      margin-bottom: 25px;
      color: var(--accent-neon);
      border-bottom: 2px solid var(--accent-neon);
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px; /* Espacio entre icono y texto */
    }

    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--accent-neon); /* Etiquetas en color neón */
      font-size: 0.95rem;
    }

    input[type="number"],
    input[type="text"],
    select {
      width: 100%;
      padding: 12px;
      background-color: var(--bg-dark); /* Fondo oscuro para inputs */
      color: var(--text-light);
      border: 1px solid var(--border-color);
      border-radius: 5px;
      font-size: 1rem;
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    input[type="number"]:focus,
    input[type="text"]:focus,
    select:focus {
      outline: none;
      border-color: var(--accent-neon);
      box-shadow: 0 0 5px var(--accent-neon); /* Resplandor al enfocar */
    }
    /* Placeholder styling */
    input::placeholder { color: rgba(224, 224, 255, 0.5); }


    /* Estilo para Checkbox */
    .form-group input[type="checkbox"] {
        margin-right: 8px;
        accent-color: var(--accent-neon); /* Color del check */
        transform: scale(1.2);
    }
    .form-group input[type="checkbox"] + label {
        display: inline-block; /* Alinear con el checkbox */
        color: var(--text-light); /* Texto normal para la etiqueta del checkbox */
        cursor: pointer;
    }


    /* Botones */
    .btn {
      background: linear-gradient(90deg, var(--accent-gradient-start), var(--accent-gradient-end));
      color: var(--text-dark); /* Texto oscuro sobre gradiente brillante */
      border: none;
      padding: 12px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 600;
      transition: all 0.3s ease;
      display: inline-flex; /* Para alinear icono y texto */
      align-items: center;
      justify-content: center;
      gap: 8px; /* Espacio entre icono y texto */
      text-decoration: none; /* Para enlaces */
      width: 100%; /* Hacer que los botones ocupen todo el ancho por defecto */
      margin-top: 10px; /* Espacio superior */
    }

    .btn:hover {
      opacity: 0.9;
      box-shadow: 0 0 8px var(--accent-gradient-end); /* Resplandor púrpura al pasar el ratón */
    }

    .btn-primary { /* Botón principal, quizás con color sólido neón */
       background: var(--accent-neon);
       color: var(--bg-dark);
    }
    .btn-primary:hover {
        box-shadow: 0 0 10px var(--accent-neon);
    }

    .btn-secondary { /* Botón secundario */
       background: var(--bg-panel);
       color: var(--accent-neon);
       border: 1px solid var(--accent-neon);
    }
    .btn-secondary:hover {
       background: var(--accent-neon);
       color: var(--bg-dark);
       box-shadow: 0 0 8px var(--accent-neon);
    }

    .btn-group {
      display: flex;
      flex-direction: column; /* Apilar botones en herramientas */
      gap: 10px;
      margin-top: 20px;
    }

    .result-panel { /* Panel derecho */
        display: flex;
        flex-direction: column;
        height: calc(100vh - 150px); /* Ajustar altura para llenar espacio vertical */
        min-height: 500px; /* Altura mínima */
    }

    .result-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .result-header .panel-title {
        margin-bottom: 0; /* Quitar margen inferior del título aquí */
        border-bottom: none; /* Quitar borde inferior del título aquí */
    }

    .action-buttons {
      display: flex;
      gap: 10px;
    }

    .mini-btn {
      background-color: var(--bg-panel);
      color: var(--accent-neon);
      border: 1px solid var(--accent-neon);
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.85rem;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .mini-btn:hover {
      background-color: var(--accent-neon);
      color: var(--bg-dark);
      box-shadow: 0 0 5px var(--accent-neon);
    }
    /* Botón favorito específico */
     .favorite-btn {
        font-size: 1.2rem; /* Hacer estrellas más grandes */
        padding: 2px 6px;
        line-height: 1;
        border: none;
        background: none;
        color: var(--accent-neon);
    }
    .favorite-btn:hover {
        color: var(--accent-gradient-end);
        background: none;
        box-shadow: none;
    }

    .words-container {
      flex-grow: 1;
      overflow-y: auto;
      background-color: var(--bg-dark); /* Fondo más oscuro para la lista */
      border-radius: 5px;
      border: 1px solid var(--border-color);
      padding: 15px;
      margin-bottom: 20px; /* Espacio antes de las estadísticas */
    }
    .words-container .loading,
    .words-container p { /* Mensaje de carga o vacío */
        text-align: center;
        padding: 40px 20px;
        font-style: italic;
        opacity: 0.7;
        font-size: 1.1rem;
        color: var(--accent-neon);
    }

    .word-item {
      background-color: var(--bg-panel);
      padding: 12px 15px;
      margin-bottom: 10px;
      border-radius: 4px;
      border-left: 4px solid var(--accent-neon); /* Línea neón a la izquierda */
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
    }

    .word-item:hover {
      transform: translateX(5px);
      box-shadow: 0 2px 8px rgba(0, 240, 255, 0.2);
    }

    .word-text {
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--text-light);
    }

    .word-actions {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .word-info {
      font-size: 0.9rem;
      color: var(--text-light);
      opacity: 0.7;
    }

    .stat-block {
      background: none; /* Quitar fondo del bloque */
      color: var(--text-light);
      padding: 15px 0;
      display: flex;
      justify-content: space-around;
      border-top: 1px solid var(--border-color);
      margin-top: auto; /* Empujar al fondo si hay espacio */
    }

    .stat-item {
      text-align: center;
    }

    .stat-value {
      font-size: 1.8rem;
      font-weight: bold;
      color: var(--accent-neon); /* Valor destacado en neón */
    }

    .stat-label {
      font-size: 0.9rem;
      opacity: 0.8;
      margin-top: 5px;
    }

    .loading:after {
      content: '.';
      animation: dots 1.5s steps(5, end) infinite;
      color: var(--accent-neon);
    }
    @keyframes dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60% { content: '...'; } 80%, 100% { content: '....'; } }

    .highlight {
      background-color: rgba(0, 240, 255, 0.3); /* Resaltado semitransparente */
      font-weight: bold;
      border-radius: 3px;
      padding: 0 2px;
    }

    /* Toast Notifications */
    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: var(--success-color);
      color: var(--bg-dark);
      padding: 12px 20px;
      border-radius: 5px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition: opacity 0.4s ease, transform 0.4s ease;
      transform: translateY(20px);
      z-index: 1001;
      font-weight: 500;
    }
    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }
    .toast.error {
      background-color: var(--error-color);
      color: var(--text-light);
    }

    /* Modal Styling */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(10, 10, 20, 0.8); /* Fondo oscuro semitransparente */
      z-index: 1000;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(5px); /* Efecto blur */
    }
    .modal-content {
      background-color: var(--bg-panel);
      padding: 30px;
      border-radius: 8px;
      max-width: 500px;
      width: 90%;
      box-shadow: 0 5px 25px rgba(0, 240, 255, 0.2);
      border: 1px solid var(--border-color);
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border-color);
    }
     .modal-header h2 {
        color: var(--accent-neon);
        font-size: 1.6rem;
     }
    .close-btn {
      font-size: 2rem;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      opacity: 0.7;
      transition: opacity 0.3s;
    }
    .close-btn:hover { opacity: 1; color: var(--accent-neon); }
    /* Estilos específicos para modal de detalles */
    .word-details p { margin-bottom: 10px; }
    .word-details strong { color: var(--accent-neon); margin-right: 5px; }

    /* Tabs Styling */
    .tab-container {
      margin-top: 30px;
    }
    .tab-buttons {
      display: flex;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 20px;
    }
    .tab-btn {
      padding: 10px 20px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 500;
      color: var(--text-light);
      opacity: 0.7;
      transition: all 0.3s ease;
      border-bottom: 3px solid transparent; /* Espacio para el borde activo */
    }
    .tab-btn:hover {
      opacity: 1;
      color: var(--accent-neon);
    }
    .tab-btn.active {
      opacity: 1;
      color: var(--accent-neon);
      border-bottom-color: var(--accent-neon);
    }
    .tab-content { display: none; }
    .tab-content.active { display: block; animation: fadeIn 0.5s ease; }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* Estilos para Historial y Favoritos dentro de pestañas */
    #history-container p, #favorites-container p, #stats-container p {
        text-align: center;
        padding: 20px;
        opacity: 0.7;
    }
    .history-item {
        background-color: var(--bg-dark);
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 4px;
        border-left: 3px solid var(--accent-gradient-end); /* Borde púrpura para historial */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    .history-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 0.9rem;
        color: var(--text-light);
        opacity: 0.8;
    }
    .history-words {
        margin-bottom: 10px;
        line-height: 1.5;
        font-size: 0.95rem;
        max-height: 60px; /* Limitar altura */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .history-item .mini-btn { /* Botón Cargar del historial */
        margin-top: 10px;
        width: auto; /* No ancho completo */
        border-color: var(--accent-gradient-end);
        color: var(--accent-gradient-end);
    }
     .history-item .mini-btn:hover {
        background-color: var(--accent-gradient-end);
        color: var(--text-light);
     }

    /* Estilos para estadísticas en pestaña */
    .stat-detail { margin-bottom: 25px; }
    .stat-detail h3 { color: var(--accent-neon); margin-bottom: 10px; font-size: 1.1rem; }
    .stat-bars { margin-top: 10px; }
    .stat-bar-item { display: flex; align-items: center; margin-bottom: 6px; font-size: 0.9rem;}
    .stat-label { width: 40px; text-align: center; font-weight: bold; opacity: 0.8;}
    .stat-bar { height: 18px; background: linear-gradient(90deg, var(--accent-gradient-start), var(--accent-gradient-end)); margin: 0 10px; min-width: 5px; border-radius: 3px; }
    .stat-value { width: 40px; text-align: right; opacity: 0.8; }


    .footer {
      margin-top: 40px;
      text-align: center;
      padding: 20px;
      color: var(--text-light);
      opacity: 0.6;
      font-size: 0.9rem;
      border-top: 1px solid var(--border-color);
    }
    .footer i { color: var(--accent-neon); } /* Corazón neón */

  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1><i class="fa-solid fa-wand-magic-sparkles"></i> Generador Estético de Palabras</h1>
      <p class="subtitle">Crea listas personalizadas de palabras aleatorias con estilo</p>
    </header>

    <div class="main-content">
      <!-- Columna Izquierda: Controles -->
      <div class="left-panel">
        <div class="panel settings-panel">
          <h2 class="panel-title"><i class="fa-solid fa-sliders"></i> Configuración</h2>

          <div class="form-group">
            <label for="word-count">Número de palabras:</label>
            <input type="number" id="word-count" value="10" min="1" max="100">
          </div>

          <div class="form-group">
            <label for="sort-option">Ordenar por:</label>
            <select id="sort-option">
              <option value="random">Aleatorio</option>
              <option value="alphabetical">Alfabéticamente</option>
              <option value="length">Longitud</option>
            </select>
          </div>

          <!-- Nuevo bloque para generación automática -->
          <div class="form-group">
            <input type="checkbox" id="auto-generate">
            <label for="auto-generate">Generar automáticamente</label>
          </div>
          <div class="form-group" id="interval-group" style="display: none;">
            <label for="interval-time">Intervalo (segundos):</label>
            <input type="number" id="interval-time" value="5" min="1">
          </div>

          <button id="generate-btn" class="btn btn-primary">
            <i class="fa-solid fa-bolt"></i> Generar Palabras
          </button>
        </div>

        <div class="panel filters-panel">
          <h2 class="panel-title"><i class="fa-solid fa-filter"></i> Herramientas</h2>
          <div class="form-group">
            <label for="search-word">Buscar palabra:</label>
            <input type="text" id="search-word" placeholder="Escribe para buscar...">
          </div>
          <div class="btn-group">
            <button id="export-btn" class="btn btn-secondary">
              <i class="fa-solid fa-download"></i> Exportar
            </button>
            <button id="clear-btn" class="btn btn-secondary">
              <i class="fa-solid fa-trash-can"></i> Limpiar
            </button>
          </div>
        </div>
      </div>

      <!-- Columna Derecha: Resultados -->
      <div class="panel result-panel">
        <div class="result-header">
          <h2 class="panel-title"><i class="fa-solid fa-list-check"></i> Palabras Generadas</h2>
          <div class="action-buttons">
            <button id="copy-btn" class="mini-btn" title="Copiar lista"><i class="fa-solid fa-copy"></i></button>
            <button id="save-btn" class="mini-btn" title="Guardar en favoritos"><i class="fa-solid fa-heart"></i></button>
            <button id="print-btn" class="mini-btn" title="Imprimir lista"><i class="fa-solid fa-print"></i></button>
          </div>
        </div>

        <div id="words-container" class="words-container">
          <div class="loading">Cargando diccionario...</div>
        </div>

        <div class="stat-block">
          <div class="stat-item">
            <div id="total-words" class="stat-value">0</div>
            <div class="stat-label">Palabras</div>
          </div>
          <div class="stat-item">
            <div id="avg-length" class="stat-value">0.0</div>
            <div class="stat-label">Long. Prom.</div>
          </div>
          <div class="stat-item">
            <div id="unique-letters" class="stat-value">0</div>
            <div class="stat-label">Letras Únicas</div>
          </div>
        </div>

        <div class="tab-container">
          <div class="tab-buttons">
            <button class="tab-btn active" data-tab="history"><i class="fa-solid fa-clock-rotate-left"></i> Historial</button>
            <button class="tab-btn" data-tab="favorites"><i class="fa-solid fa-star"></i> Favoritos</button>
            <button class="tab-btn" data-tab="stats"><i class="fa-solid fa-chart-pie"></i> Estadísticas</button>
          </div>
          <div id="history-tab" class="tab-content active">
            <div id="history-container">
              <p>El historial de generaciones aparecerá aquí.</p>
            </div>
          </div>
          <div id="favorites-tab" class="tab-content">
            <div id="favorites-container">
              <p>Tus palabras favoritas se mostrarán aquí.</p>
            </div>
          </div>
          <div id="stats-tab" class="tab-content">
            <div id="stats-container">
              <p>Genera palabras para ver estadísticas detalladas.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal para Exportar -->
    <div id="export-modal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h2><i class="fa-solid fa-file-export"></i> Exportar Palabras</h2>
          <button class="close-btn">×</button>
        </div>
        <div class="form-group">
          <label for="export-format">Formato:</label>
          <select id="export-format">
            <option value="txt">Texto plano (.txt)</option>
            <option value="csv">CSV (.csv)</option>
            <option value="json">JSON (.json)</option>
            <option value="pdf">PDF (.pdf)</option>
          </select>
        </div>
        <div class="form-group">
          <label for="export-filename">Nombre del archivo:</label>
          <input type="text" id="export-filename" value="palabras_generadas">
        </div>
        <button id="download-btn" class="btn btn-primary">
          <i class="fa-solid fa-download"></i> Descargar Archivo
        </button>
      </div>
    </div>

     <!-- Modal para Detalles de Palabra -->
     <div id="details-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="details-word-title"></h2>
                <button class="close-btn">×</button>
            </div>
            <div class="word-details" id="details-word-content">
                <!-- Content generated by JS -->
            </div>
            <div class="btn-group" style="flex-direction: row; gap: 15px;">
                <button id="details-fav-btn" class="btn btn-secondary"><i class="fa-regular fa-heart"></i> Añadir/Quitar Favorito</button>
                <button id="details-copy-btn" class="btn btn-secondary"><i class="fa-solid fa-copy"></i> Copiar Palabra</button>
            </div>
        </div>
     </div>

    <!-- Toast Notification Placeholder -->
    <div id="toast" class="toast">Mensaje de notificación</div>

    <footer class="footer">
      <p>© 2025 Generador Estético de Palabras | Desarrollado con <i class="fa-solid fa-heart"></i> y <i class="fa-solid fa-code"></i></p>
    </footer>
  </div>

  <script>
    // Variable para almacenar las palabras cargadas desde el servidor
    let palabrasEspanol = [];
    // Variables globales
    let currentWords = [];
    let historyWords = [];
    let favoriteWords = [];
    let autoGenerateTimer = null;

    // Elementos DOM
    const generateBtn = document.getElementById('generate-btn');
    const wordsContainer = document.getElementById('words-container');
    const totalWordsEl = document.getElementById('total-words');
    const avgLengthEl = document.getElementById('avg-length');
    const uniqueLettersEl = document.getElementById('unique-letters');
    const searchWordInput = document.getElementById('search-word');
    const copyBtn = document.getElementById('copy-btn');
    const saveBtn = document.getElementById('save-btn');
    const printBtn = document.getElementById('print-btn');
    const exportBtn = document.getElementById('export-btn');
    const clearBtn = document.getElementById('clear-btn');
    const exportModal = document.getElementById('export-modal');
    const downloadBtn = document.getElementById('download-btn');
    const toast = document.getElementById('toast');
    const historyContainer = document.getElementById('history-container');
    const favoritesContainer = document.getElementById('favorites-container');
    const statsContainer = document.getElementById('stats-container');
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    const autoGenerateCheckbox = document.getElementById('auto-generate');
    const intervalGroup = document.getElementById('interval-group');
    const intervalInput = document.getElementById('interval-time');
    const detailsModal = document.getElementById('details-modal');
    const detailsWordTitle = document.getElementById('details-word-title');
    const detailsWordContent = document.getElementById('details-word-content');
    const detailsFavBtn = document.getElementById('details-fav-btn');
    const detailsCopyBtn = document.getElementById('details-copy-btn');


    // Cargar palabras desde el archivo Excel del servidor
    function loadWordsFromServer() {
        wordsContainer.innerHTML = '<div class="loading">Cargando diccionario...</div>';
        fetch("https://papitasfritas.com/palabrascastellano.xlsx")
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.arrayBuffer();
            })
            .then(data => {
                const workbook = XLSX.read(data, { type: 'array' });
                const firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];
                const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                // Asumiendo que las palabras están en la columna B (índice 1) y no hay cabecera o se omite la primera fila
                palabrasEspanol = jsonData.map(row => row[1]).filter(word => word && typeof word === 'string' && word.trim().length > 0);
                console.log(`Palabras cargadas: ${palabrasEspanol.length}`);
                if (palabrasEspanol.length > 0) {
                    wordsContainer.innerHTML = '<p>Diccionario cargado. ¡Genera palabras!</p>';
                    showToast(`Diccionario con ${palabrasEspanol.length} palabras cargado.`);
                    generateWords(); // Generar una lista inicial
                } else {
                     wordsContainer.innerHTML = '<p>No se pudieron cargar palabras del archivo.</p>';
                     showToast("Error: No se encontraron palabras válidas en el archivo.", true);
                }
            })
            .catch(error => {
                console.error("Error al cargar el archivo Excel:", error);
                wordsContainer.innerHTML = '<p>Error al cargar el diccionario. Intenta recargar.</p>';
                showToast("Error fatal al cargar las palabras del servidor.", true);
            });
    }

    // Función para iniciar y detener generación automática
    function startAutoGenerate(intervalSeconds) {
      stopAutoGenerate(); // Detener cualquier temporizador existente
      if (intervalSeconds > 0) {
          autoGenerateTimer = setInterval(generateWords, intervalSeconds * 1000);
          console.log(`Auto-generación iniciada cada ${intervalSeconds}s`);
      }
    }
    function stopAutoGenerate() {
      if (autoGenerateTimer) {
        clearInterval(autoGenerateTimer);
        autoGenerateTimer = null;
        console.log("Auto-generación detenida");
      }
    }

    // Inicializar la aplicación
    document.addEventListener('DOMContentLoaded', () => {
      // No inicializar collapsible, ya que no se usa en el nuevo diseño
      initializeTabSystem();
      initializeModalSystem(); // Incluye modal de exportación y detalles
      loadSavedData();
      loadWordsFromServer(); // Cargar palabras al inicio

      generateBtn.addEventListener('click', generateWords);
      searchWordInput.addEventListener('input', searchWords);
      copyBtn.addEventListener('click', copyWords);
      saveBtn.addEventListener('click', saveToFavorites);
      printBtn.addEventListener('click', printWords);
      exportBtn.addEventListener('click', () => { exportModal.style.display = 'flex'; });
      clearBtn.addEventListener('click', clearResults);
      downloadBtn.addEventListener('click', downloadWords);

      // Manejar el modo de generación automática
      autoGenerateCheckbox.addEventListener('change', () => {
        if (autoGenerateCheckbox.checked) {
          intervalGroup.style.display = 'block';
          const intervalSec = parseInt(intervalInput.value) || 5; // Default 5s
          startAutoGenerate(intervalSec);
        } else {
          intervalGroup.style.display = 'none';
          stopAutoGenerate();
        }
      });

      intervalInput.addEventListener('change', () => {
        if (autoGenerateCheckbox.checked) {
          const intervalSec = parseInt(intervalInput.value) || 5;
          startAutoGenerate(intervalSec); // Reiniciar con el nuevo intervalo
        }
      });
    });


    // Función para inicializar el sistema de pestañas
    function initializeTabSystem() {
      tabButtons.forEach(button => {
        button.addEventListener('click', () => {
          const tab = button.getAttribute('data-tab');
          tabButtons.forEach(btn => btn.classList.remove('active'));
          tabContents.forEach(content => content.classList.remove('active'));
          button.classList.add('active');
          document.getElementById(`${tab}-tab`).classList.add('active');
        });
      });
    }

    // Función para inicializar el sistema de modales (Exportar y Detalles)
    function initializeModalSystem() {
        const modals = document.querySelectorAll('.modal');
        modals.forEach(modal => {
            const closeButton = modal.querySelector('.close-btn');
            if (closeButton) {
                closeButton.addEventListener('click', () => {
                    modal.style.display = 'none';
                });
            }
            // Cerrar modal al hacer clic fuera del contenido
            modal.addEventListener('click', (event) => {
                if (event.target === modal) {
                    modal.style.display = 'none';
                }
            });
        });
    }

    // Función para cargar datos guardados en localStorage
    function loadSavedData() {
      const savedFavorites = localStorage.getItem('favoriteWords');
      const savedHistory = localStorage.getItem('historyWords');
      if (savedFavorites) { favoriteWords = JSON.parse(savedFavorites); updateFavoritesUI(); }
      if (savedHistory) { historyWords = JSON.parse(savedHistory); updateHistoryUI(); }
      console.log(`Cargados ${favoriteWords.length} favoritos y ${historyWords.length} entradas de historial.`);
    }

    // Función para generar palabras aleatorias
    function generateWords() {
      if (palabrasEspanol.length === 0) {
          showToast("El diccionario aún no está cargado o está vacío.", true);
          wordsContainer.innerHTML = '<p>Esperando diccionario...</p>';
          return;
      }

      const wordCount = parseInt(document.getElementById('word-count').value);
      const sortOption = document.getElementById('sort-option').value;

      wordsContainer.innerHTML = '<div class="loading">Generando...</div>';

      // Usar setTimeout para simular carga y permitir que se muestre "Generando..."
      setTimeout(() => {
        let availableWords = [...palabrasEspanol]; // Copiar para no modificar el original
        currentWords = [];

        const countToGenerate = Math.min(wordCount, availableWords.length);

        if (countToGenerate === 0) {
            wordsContainer.innerHTML = '<p>No hay palabras disponibles.</p>';
            showToast("No hay palabras disponibles en el diccionario.", true);
            return;
        }

        for (let i = 0; i < countToGenerate; i++) {
          if (availableWords.length === 0) break;
          const randomIndex = Math.floor(Math.random() * availableWords.length);
          currentWords.push(availableWords[randomIndex]);
          availableWords.splice(randomIndex, 1); // Evitar duplicados en una generación
        }

        // Ordenar si es necesario
        if (sortOption === 'alphabetical') { currentWords.sort((a, b) => a.localeCompare(b)); }
        else if (sortOption === 'length') { currentWords.sort((a, b) => a.length - b.length || a.localeCompare(b)); }

        updateWordsUI();
        updateStatistics();

        // Añadir al historial (si hay palabras generadas)
        if(currentWords.length > 0) {
            historyWords.unshift({ date: new Date().toLocaleString('es-ES'), words: [...currentWords] });
            if (historyWords.length > 15) { historyWords.pop(); } // Limitar historial
            updateHistoryUI();
            localStorage.setItem('historyWords', JSON.stringify(historyWords));
        } else {
            wordsContainer.innerHTML = '<p>No se pudieron generar palabras.</p>';
        }

      }, 200); // Pequeño retraso para la UI
    }

    // Función para actualizar la interfaz de palabras
    function updateWordsUI() {
      wordsContainer.innerHTML = ''; // Limpiar contenedor
      if (currentWords.length === 0 && palabrasEspanol.length > 0) {
          wordsContainer.innerHTML = '<p>No se generaron palabras. Ajusta la configuración o el diccionario.</p>';
          return;
      } else if (currentWords.length === 0) {
          // Mantenido por si el diccionario aún no carga
           wordsContainer.innerHTML = '<p>Genera palabras usando el panel de configuración.</p>';
           return;
      }

      currentWords.forEach((word) => {
        const wordElement = document.createElement('div');
        wordElement.className = 'word-item';
        const isFavorite = favoriteWords.some(favWord => favWord.word === word);
        wordElement.innerHTML = `
          <div class="word-text">${word}</div>
          <div class="word-actions">
            <span class="word-info">${word.length} letras</span>
            <button class="mini-btn favorite-btn" data-word="${word}" title="${isFavorite ? 'Quitar de favoritos' : 'Añadir a favoritos'}">
              ${isFavorite ? '<i class="fa-solid fa-star"></i>' : '<i class="fa-regular fa-star"></i>'}
            </button>
          </div>
        `;
        wordsContainer.appendChild(wordElement);

        // Event listener para el botón de favorito
        const favoriteBtn = wordElement.querySelector('.favorite-btn');
        favoriteBtn.addEventListener('click', (e) => {
          e.stopPropagation(); // Evitar que se abra el modal de detalles
          toggleFavorite(word);
          // Actualizar icono del botón específico
          favoriteBtn.innerHTML = favoriteWords.some(favWord => favWord.word === word) ? '<i class="fa-solid fa-star"></i>' : '<i class="fa-regular fa-star"></i>';
          favoriteBtn.title = favoriteWords.some(favWord => favWord.word === word) ? 'Quitar de favoritos' : 'Añadir a favoritos';
          updateFavoritesUI(); // Actualizar también la pestaña de favoritos
        });

        // Event listener para mostrar detalles al hacer clic en el item
        wordElement.addEventListener('click', () => { showWordDetails(word); });
      });
    }

    // Función para actualizar estadísticas
    function updateStatistics() {
        const count = currentWords.length;
        totalWordsEl.textContent = count;

        if (count > 0) {
            const totalLength = currentWords.reduce((sum, word) => sum + word.length, 0);
            const avgLength = totalLength / count;
            avgLengthEl.textContent = avgLength.toFixed(1);

            const uniqueLetters = new Set(currentWords.join('').toLowerCase().split('')).size;
            uniqueLettersEl.textContent = uniqueLetters;

            updateStatsTab(); // Actualizar la pestaña de estadísticas detalladas
        } else {
            avgLengthEl.textContent = '0.0';
            uniqueLettersEl.textContent = '0';
            statsContainer.innerHTML = '<p>Genera palabras para ver estadísticas detalladas.</p>';
        }
    }

    // Función para actualizar la pestaña de estadísticas detalladas
    function updateStatsTab() {
        if (currentWords.length === 0) {
            statsContainer.innerHTML = '<p>Genera palabras para ver estadísticas detalladas.</p>';
            return;
        }

        // Calcular frecuencias
        const letterFrequency = {};
        currentWords.join('').toLowerCase().split('').forEach(letter => {
            if (letter.match(/[a-zñ]/i)) { // Contar solo letras
                letterFrequency[letter] = (letterFrequency[letter] || 0) + 1;
            }
        });

        const lengthFrequency = {};
        currentWords.forEach(word => {
            lengthFrequency[word.length] = (lengthFrequency[word.length] || 0) + 1;
        });

        // Encontrar palabras más larga y corta
        let longestWord = '';
        let shortestWord = currentWords.length > 0 ? currentWords[0] : '';
        currentWords.forEach(word => {
            if (word.length > longestWord.length) longestWord = word;
            if (word.length < shortestWord.length) shortestWord = word;
        });

        let statsHTML = `
        <div class="stat-detail">
          <h3><i class="fa-solid fa-ruler-combined"></i> Resumen de Longitud</h3>
          <p>Palabra más larga: <strong>${longestWord}</strong> (${longestWord.length} letras)</p>
          <p>Palabra más corta: <strong>${shortestWord}</strong> (${shortestWord.length} letras)</p>
          <p>Promedio de letras: <strong>${avgLengthEl.textContent}</strong></p>
        </div>
        <div class="stat-detail">
          <h3><i class="fa-solid fa-chart-bar"></i> Distribución de Longitud</h3>
          <div class="stat-bars">
      `;
      // Distribución de longitud
      const lengths = Object.keys(lengthFrequency).map(Number).sort((a, b) => a - b);
      const maxLengthCount = Math.max(...Object.values(lengthFrequency));
      lengths.forEach(length => {
          const count = lengthFrequency[length];
          const percentage = maxLengthCount > 0 ? (count / currentWords.length) * 100 : 0; // % del total
          statsHTML += `
          <div class="stat-bar-item">
            <div class="stat-label">${length}</div>
            <div class="stat-bar" style="width: ${percentage}%" title="${count} palabras (${percentage.toFixed(1)}%)"></div>
            <div class="stat-value">${count}</div>
          </div>
        `;
      });
      statsHTML += `</div></div>`;

        // Frecuencia de letras
       statsHTML += `<div class="stat-detail">
          <h3><i class="fa-solid fa-arrow-down-a-z"></i> Letras Más Frecuentes</h3>
          <div class="stat-bars">
      `;
      const sortedLetters = Object.entries(letterFrequency).sort(([,a],[,b]) => b-a);
      const topLetters = sortedLetters.slice(0, 10); // Top 10
      const maxLetterCount = topLetters.length > 0 ? topLetters[0][1] : 0;

      topLetters.forEach(([letter, count]) => {
        const percentage = maxLetterCount > 0 ? (count / maxLetterCount) * 100 : 0; // % relativo a la más frecuente
        statsHTML += `
          <div class="stat-bar-item">
            <div class="stat-label">${letter}</div>
            <div class="stat-bar" style="width: ${percentage}%" title="${count} apariciones"></div>
            <div class="stat-value">${count}</div>
          </div>
        `;
      });
      statsHTML += `</div></div>`;

      statsContainer.innerHTML = statsHTML;
    }


    // Función para buscar palabras en la lista actual
    function searchWords() {
        const searchTerm = searchWordInput.value.toLowerCase().trim();
        const wordItems = wordsContainer.querySelectorAll('.word-item');

        wordItems.forEach(item => {
            const wordTextElement = item.querySelector('.word-text');
            const wordText = wordTextElement.textContent.toLowerCase();

            if (searchTerm === '' || wordText.includes(searchTerm)) {
                item.style.display = 'flex';
                // Resaltar término de búsqueda
                if (searchTerm !== '') {
                    const regex = new RegExp(`(${searchTerm})`, 'gi');
                    wordTextElement.innerHTML = wordTextElement.textContent.replace(regex, '<span class="highlight">$1</span>');
                } else {
                     wordTextElement.innerHTML = wordTextElement.textContent; // Restaurar sin highlight
                }
            } else {
                item.style.display = 'none';
            }
        });
    }

    // Función para mostrar detalles de una palabra en un modal
    function showWordDetails(word) {
        detailsWordTitle.textContent = word;
        const isFav = favoriteWords.some(fav => fav.word === word);

        detailsWordContent.innerHTML = `
            <p><strong><i class="fa-solid fa-arrow-down-1-9"></i> Longitud:</strong> ${word.length}</p>
            <p><strong><i class="fa-solid fa-dice"></i> Letras únicas:</strong> ${new Set(word.toLowerCase().split('')).size}</p>
            <p><strong><i class="fa-solid fa-a"></i> Vocales:</strong> ${word.match(/[aeiouáéíóú]/gi)?.length || 0}</p>
            <p><strong><i class="fa-solid fa-b"></i> Consonantes:</strong> ${word.match(/[bcdfghjklmnpqrstvwxyzñ]/gi)?.length || 0}</p>
            <p><strong><i class="fa-solid fa-angles-right"></i> Primera letra:</strong> ${word[0]}</p>
            <p><strong><i class="fa-solid fa-angles-left"></i> Última letra:</strong> ${word[word.length - 1]}</p>
        `;

        // Configurar botones del modal
        detailsFavBtn.onclick = () => {
            toggleFavorite(word);
            showWordDetails(word); // Actualizar modal
            updateWordsUI(); // Actualizar lista principal
            updateFavoritesUI(); // Actualizar pestaña fav
        };
        detailsFavBtn.innerHTML = isFav
            ? '<i class="fa-solid fa-heart-crack"></i> Quitar Favorito'
            : '<i class="fa-regular fa-heart"></i> Añadir Favorito';

        detailsCopyBtn.onclick = () => {
            navigator.clipboard.writeText(word)
                .then(() => showToast(`'${word}' copiada al portapapeles`))
                .catch(err => showToast('Error al copiar', true));
        };

        detailsModal.style.display = 'flex'; // Mostrar modal
    }

    // Función para marcar/desmarcar favoritos
    function toggleFavorite(word) {
      const index = favoriteWords.findIndex(favWord => favWord.word === word);
      if (index !== -1) {
        favoriteWords.splice(index, 1); // Quitar de favoritos
        showToast(`'${word}' quitada de favoritos`);
      } else {
        favoriteWords.push({ word, date: new Date().toLocaleString('es-ES') }); // Añadir a favoritos
        showToast(`'${word}' añadida a favoritos`);
      }
      localStorage.setItem('favoriteWords', JSON.stringify(favoriteWords));
      // La UI se actualiza donde se llama toggleFavorite
    }

    // Actualizar interfaz de favoritos en la pestaña
    function updateFavoritesUI() {
      if (favoriteWords.length === 0) {
          favoritesContainer.innerHTML = '<p>Aún no has añadido palabras a favoritos. ¡Usa la estrella!</p>';
          return;
      }
      favoritesContainer.innerHTML = ''; // Limpiar
      favoriteWords.sort((a,b) => a.word.localeCompare(b.word)).forEach(item => { // Ordenar alfabéticamente
        const favoriteElement = document.createElement('div');
        favoriteElement.className = 'word-item'; // Reutilizar estilo
        favoriteElement.style.borderLeftColor = 'var(--accent-gradient-end)'; // Color diferente para favs
        favoriteElement.innerHTML = `
          <div class="word-text">${item.word}</div>
          <div class="word-actions">
            <span class="word-info">(${item.word.length} letras)</span>
            <button class="mini-btn remove-btn" data-word="${item.word}" title="Quitar favorito">
                <i class="fa-solid fa-trash-can"></i>
            </button>
          </div>
        `;
        favoritesContainer.appendChild(favoriteElement);

        // Botón para quitar favorito desde la pestaña
        const removeBtn = favoriteElement.querySelector('.remove-btn');
        removeBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            toggleFavorite(item.word);
            updateWordsUI(); // Actualizar estrellas en la lista principal
        });

        // Mostrar detalles al hacer clic
        favoriteElement.addEventListener('click', () => { showWordDetails(item.word); });
      });
    }

    // Actualizar historial en la pestaña
    function updateHistoryUI() {
      if (historyWords.length === 0) {
          historyContainer.innerHTML = '<p>No hay historial de generaciones recientes.</p>';
          return;
      }
      historyContainer.innerHTML = ''; // Limpiar
      historyWords.forEach((item, index) => {
        const historyElement = document.createElement('div');
        historyElement.className = 'history-item';
        historyElement.innerHTML = `
          <div class="history-header">
            <span class="history-date">${item.date}</span>
            <span class="history-count">${item.words.length} palabras</span>
          </div>
          <div class="history-words" title="${item.words.join(', ')}">${item.words.join(', ')}</div>
          <button class="mini-btn load-btn" data-index="${index}" title="Cargar esta lista">
             <i class="fa-solid fa-upload"></i> Cargar
          </button>
        `;
        historyContainer.appendChild(historyElement);

        // Botón para cargar lista del historial
        const loadBtn = historyElement.querySelector('.load-btn');
        loadBtn.addEventListener('click', () => {
            currentWords = [...item.words]; // Cargar palabras
            updateWordsUI();
            updateStatistics();
            showToast('Palabras cargadas desde el historial.');
            // Opcional: detener auto-generación si está activa
            if (autoGenerateCheckbox.checked) {
                autoGenerateCheckbox.checked = false;
                intervalGroup.style.display = 'none';
                stopAutoGenerate();
            }
        });
      });
    }

    // Copiar lista actual de palabras
    function copyWords() {
      if (currentWords.length === 0) {
          showToast("No hay palabras para copiar.", true);
          return;
      }
      const wordText = currentWords.join('\n');
      navigator.clipboard.writeText(wordText)
          .then(() => showToast(`${currentWords.length} palabras copiadas al portapapeles.`))
          .catch(err => showToast('Error al copiar palabras.', true));
    }

    // Guardar TODAS las palabras actuales en favoritos
    function saveToFavorites() {
      if (currentWords.length === 0) {
          showToast("No hay palabras para guardar.", true);
          return;
      }
      let addedCount = 0;
      currentWords.forEach(word => {
        if (!favoriteWords.some(favWord => favWord.word === word)) {
          favoriteWords.push({ word, date: new Date().toLocaleString('es-ES') });
          addedCount++;
        }
      });
      if (addedCount > 0) {
          localStorage.setItem('favoriteWords', JSON.stringify(favoriteWords));
          updateFavoritesUI();
          updateWordsUI(); // Actualizar estrellas en la lista principal
          showToast(`${addedCount} palabra(s) nueva(s) añadida(s) a favoritos.`);
      } else {
          showToast("Todas las palabras actuales ya estaban en favoritos.");
      }
    }

    // Imprimir palabras actuales
    function printWords() {
        if (currentWords.length === 0) {
            showToast("No hay palabras para imprimir.", true);
            return;
        }
        // Crear un iframe oculto para la impresión
        const iframe = document.createElement('iframe');
        iframe.style.position = 'absolute';
        iframe.style.width = '0';
        iframe.style.height = '0';
        iframe.style.border = '0';
        document.body.appendChild(iframe);

        const printDocument = iframe.contentWindow.document;
        printDocument.open();
        printDocument.write(`
            <!DOCTYPE html>
            <html lang="es">
            <head>
            <meta charset="UTF-8">
            <title>Imprimir Palabras</title>
            <style>
                body { font-family: sans-serif; line-height: 1.5; padding: 20px; }
                h1 { text-align: center; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 20px; }
                .word-list { column-count: 3; column-gap: 30px; }
                .word-item { margin-bottom: 8px; break-inside: avoid; }
                @media print {
                    body { padding: 0; }
                    h1 { font-size: 16pt; }
                    .word-list { column-count: 3; font-size: 10pt; }
                }
            </style>
            </head>
            <body>
            <h1>Lista de Palabras Generadas (${currentWords.length})</h1>
            <div class="word-list">
                ${currentWords.map(word => `<div class="word-item">${word}</div>`).join('')}
            </div>
            </body>
            </html>
        `);
        printDocument.close();

        iframe.contentWindow.focus();
        // Esperar un poco para que el contenido cargue antes de imprimir
        setTimeout(() => {
            iframe.contentWindow.print();
            // Eliminar el iframe después de la impresión (o intento)
            setTimeout(() => { document.body.removeChild(iframe); }, 1000);
        }, 500);
    }

    // Descargar palabras en el formato seleccionado
    function downloadWords() {
      if (currentWords.length === 0) {
          showToast("No hay palabras para descargar.", true);
          return;
      }
      const format = document.getElementById('export-format').value;
      const filename = document.getElementById('export-filename').value.trim() || 'palabras_generadas';
      let content = '', mimeType = '', blob = null;

      try {
          switch (format) {
            case 'txt':
              content = currentWords.join('\n');
              mimeType = 'text/plain';
              blob = new Blob([content], { type: mimeType });
              break;
            case 'csv':
              // Incluir cabecera CSV
              content = 'Palabra,Longitud\n';
              currentWords.forEach(word => {
                  // Escapar comillas si existen en la palabra (poco probable pero seguro)
                  const escapedWord = word.includes('"') ? `"${word.replace(/"/g, '""')}"` : word;
                  content += `${escapedWord},${word.length}\n`;
              });
              mimeType = 'text/csv;charset=utf-8;';
              // Añadir BOM para Excel
              blob = new Blob(["\uFEFF" + content], { type: mimeType });
              break;
            case 'json':
              const jsonData = currentWords.map(word => ({
                palabra: word,
                longitud: word.length,
                vocales: (word.match(/[aeiouáéíóú]/gi) || []).length,
                consonantes: (word.match(/[bcdfghjklmnpqrstvwxyzñ]/gi) || []).length
              }));
              content = JSON.stringify(jsonData, null, 2); // Formato legible
              mimeType = 'application/json';
              blob = new Blob([content], { type: mimeType });
              break;
            case 'pdf':
              const { jsPDF } = window.jspdf;
              if (!jsPDF) {
                  showToast("Error: librería jsPDF no cargada.", true);
                  return;
              }
              const doc = new jsPDF();
              doc.setFontSize(18);
              doc.text('Lista de Palabras Generadas', doc.internal.pageSize.getWidth() / 2, 20, { align: 'center' });
              doc.setFontSize(12);
              doc.text(`Total: ${currentWords.length} palabras`, doc.internal.pageSize.getWidth() / 2, 30, { align: 'center' });

              // Dividir en columnas
              const pageHeight = doc.internal.pageSize.getHeight();
              const margin = 20;
              const columnWidth = (doc.internal.pageSize.getWidth() - margin * 2) / 3;
              const lineHeight = 7;
              let y = 40;
              let currentColumn = 0;

              doc.setFontSize(10);
              currentWords.forEach(word => {
                  if (y > pageHeight - margin) { // Cambiar de columna o página
                      currentColumn++;
                      y = 40; // Reset Y
                      if (currentColumn > 2) { // Nueva página
                          doc.addPage();
                          currentColumn = 0;
                          y = 40;
                           // Re-agregar título en nueva página si se desea
                           doc.setFontSize(18);
                           doc.text('Lista de Palabras Generadas (cont.)', doc.internal.pageSize.getWidth() / 2, 20, { align: 'center' });
                           doc.setFontSize(10);
                      }
                  }
                  const x = margin + (currentColumn * columnWidth);
                  doc.text(word, x, y);
                  y += lineHeight;
              });

              // Guardar el PDF
              doc.save(`${filename}.pdf`);
              // Para PDF, la descarga es directa, no necesitamos crear link
              exportModal.style.display = 'none';
              showToast(`Archivo PDF '${filename}.pdf' generado.`);
              return; // Salir de la función aquí para PDF
          } // Fin switch

          // Crear enlace de descarga para TXT, CSV, JSON
          if (blob) {
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', `${filename}.${format}`);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
            exportModal.style.display = 'none';
            showToast(`Archivo descargado como ${filename}.${format}`);
          }

      } catch (error) {
          console.error("Error al descargar archivo:", error);
          showToast("Error al generar el archivo para descargar.", true);
      }
    }


    // Mostrar notificaciones toast
    let toastTimeout;
    function showToast(message, isError = false) {
        clearTimeout(toastTimeout); // Limpiar timeout anterior si existe
        toast.textContent = message;
        toast.className = 'toast'; // Reset classes
        if (isError) {
            toast.classList.add('error');
        }
        toast.classList.add('show');

        // Ocultar después de 3 segundos
        toastTimeout = setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }

    // Función para limpiar resultados actuales
    function clearResults() {
      currentWords = [];
      wordsContainer.innerHTML = '<p>Resultados limpiados. ¡Genera nuevas palabras!</p>';
      updateStatistics(); // Resetea estadísticas
      searchWordInput.value = ''; // Limpiar búsqueda
      showToast('Resultados limpiados.');
    }

  </script>
</body>
</html>