<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editor de Cifrados Clásicos Pro</title>

    <!-- Dependencias (CDNs) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

    <style>
        /* --- Estilos Generales y Tema Moderno --- */
        :root {
            --bg-color: #1a1a2e;
            --primary-color: #16213e;
            --secondary-color: #0f3460;
            --accent-color: #e94560;
            --text-color: #ffffff;
            --text-muted-color: #cccccc;
            --success-color: #2ecc71;
            --error-color: #e74c3c;
            --border-radius: 8px;
            --font-family: 'Poppins', sans-serif;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* Prevenir scroll horizontal */
            line-height: 1.6;
        }

        /* --- Pantalla de Carga --- */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            flex-direction: column;
            transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
            opacity: 1;
            visibility: visible;
        }
        #loading-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }
        .spinner {
            border: 6px solid var(--secondary-color);
            border-top: 6px solid var(--accent-color);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }
        .loading-text {
            color: var(--accent-color);
            font-size: 1.2em;
            font-weight: 600;
            animation: pulse 1.5s infinite ease-in-out;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes pulse {
            0% { opacity: 0.7; }
            50% { opacity: 1; }
            100% { opacity: 0.7; }
        }

        /* --- Contenedor Principal y Header --- */
        .main-container {
            padding: 40px 20px;
            max-width: 1400px;
            margin: 20px auto;
            background-color: var(--primary-color);
            border-radius: var(--border-radius);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            opacity: 0; /* Inicialmente oculto para animación de entrada */
            transition: opacity 1s ease-out; /* Transición suave para la opacidad */
        }
         .main-container.visible {
            opacity: 1; /* Clase para activar la visibilidad */
        }

        /* Eliminada la animación fadeInContainer, se usa transition ahora */

        .main-title {
            color: var(--accent-color);
            text-align: center;
            margin-bottom: 10px;
            font-weight: 700;
            letter-spacing: 1px;
            text-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
        }
        .subtitle {
            text-align: center;
            color: #e0e0e0;
            margin-bottom: 40px;
            font-weight: 300;
        }

        /* --- Estilos de Formularios y Controles --- */
        .form-label {
            color: var(--text-color);
            font-weight: 600;
            margin-bottom: 8px;
        }
        .form-control, .form-select {
            background-color: var(--secondary-color);
            color: var(--text-color);
            border: 1px solid var(--secondary-color);
            border-radius: var(--border-radius);
            padding: 12px 15px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .form-control::placeholder {
            color: var(--text-muted-color);
            opacity: 0.9;
        }
        .form-control:focus, .form-select:focus {
            background-color: var(--secondary-color);
            color: var(--text-color);
            border-color: var(--accent-color);
            box-shadow: 0 0 0 0.2rem rgba(233, 69, 96, 0.25);
            outline: none;
        }
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        .form-control[readonly] {
             background-color: #2a2a3e; /* Un poco más oscuro */
             cursor: not-allowed;
             color: #ffffff;
        }

        /* --- Botones --- */
        .btn {
            border-radius: var(--border-radius);
            padding: 10px 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
            border: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        .btn-primary {
            background-color: var(--accent-color);
            color: #fff;
        }
        .btn-primary:hover {
            background-color: #d6304e;
            box-shadow: 0 6px 15px rgba(233, 69, 96, 0.4);
            transform: translateY(-2px);
        }
        .btn-secondary {
            background-color: var(--secondary-color);
            color: var(--text-color);
        }
        .btn-secondary:hover {
            background-color: #0c2a4d;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
             transform: translateY(-2px);
        }
        /* Efecto ripple en botones */
        .btn::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.5s ease, height 0.5s ease;
            z-index: -1;
        }
        .btn:active::before {
            width: 300px; /* Tamaño grande para cubrir el botón */
            height: 300px;
        }

        /* --- Secciones (Pasos, Estadísticas) --- */
        .section-card {
            background-color: var(--secondary-color);
            padding: 25px;
            border-radius: var(--border-radius);
            margin-top: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .section-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        .section-title {
            color: var(--accent-color);
            font-weight: 600;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--accent-color);
            padding-bottom: 8px;
            display: inline-block;
        }

        /* --- Visualización Paso a Paso --- */
        #step-by-step-output {
            max-height: 400px;
            overflow-y: auto;
            padding-right: 10px; /* Espacio para scrollbar */
            background-color: rgba(0,0,0,0.1);
            border-radius: var(--border-radius);
            padding: 15px;
            color: var(--text-color);
        }
        /* Custom Scrollbar */
        #step-by-step-output::-webkit-scrollbar {
            width: 8px;
        }
        #step-by-step-output::-webkit-scrollbar-track {
            background: var(--primary-color);
            border-radius: 10px;
        }
        #step-by-step-output::-webkit-scrollbar-thumb {
            background-color: var(--accent-color);
            border-radius: 10px;
            border: 2px solid var(--primary-color);
        }
        #step-by-step-output::-webkit-scrollbar-thumb:hover {
            background-color: #d6304e;
        }
        
        #step-by-step-output .text-muted {
            color: #e0e0e0 !important;
            font-weight: 400;
        }

        .step {
            background-color: var(--primary-color);
            margin-bottom: 10px;
            padding: 10px 15px;
            border-radius: 5px;
            font-family: monospace; /* Mejor para mostrar caracteres */
            font-size: 0.95em;
            opacity: 0;
            transform: translateX(-20px);
            animation: slideInStep 0.5s ease forwards;
            border-left: 4px solid var(--accent-color);
            color: var(--text-color);
        }
        .step strong {
            color: var(--accent-color);
        }
        .step .char-original { color: var(--success-color); }
        .step .char-result { color: #3498db; } /* Otro color para resultado */
        .step .char-key { color: #f1c40f; } /* Color para la clave */
        .step .char-non-alpha { color: var(--text-muted-color); }

        @keyframes slideInStep {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* --- Estadísticas y Gráficos --- */
        .chart-container {
            position: relative;
            height: 300px; /* Altura fija para los gráficos */
            width: 100%;
            margin-top: 20px;
        }
        #stats-details {
            margin-top: 20px;
            font-size: 0.9em;
            color: var(--text-muted-color);
        }
        #stats-details strong {
            color: var(--text-color);
        }

        /* --- Feedback Visual --- */
        .feedback-message {
            padding: 10px 15px;
            border-radius: var(--border-radius);
            margin-top: 15px;
            font-weight: 500;
            display: none; /* Oculto por defecto */
            animation: fadeInFeedback 0.5s ease;
            color: #ffffff;
        }
        .feedback-message.success {
            background-color: rgba(46, 204, 113, 0.2);
            color: var(--success-color);
            border: 1px solid var(--success-color);
        }
        .feedback-message.error {
            background-color: rgba(231, 76, 60, 0.2);
            color: var(--error-color);
            border: 1px solid var(--error-color);
        }
        @keyframes fadeInFeedback {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* --- Clases de utilidad --- */
        .hidden {
            display: none;
        }
        .icon {
            margin-right: 8px;
        }

        /* --- Responsive --- */
        @media (max-width: 768px) {
            .main-container {
                padding: 20px 15px;
                margin: 10px;
            }
            .main-title {
                font-size: 1.8em;
            }
            .subtitle {
                font-size: 0.9em;
                margin-bottom: 30px;
            }
            .col-md-6 {
                margin-bottom: 20px; /* Asegurar espacio entre gráficos en móvil */
            }
            .chart-container {
                height: 250px;
            }
        }

        .text-muted {
            color: #e0e0e0 !important;
        }

    </style>
</head>
<body>

    <!-- Pantalla de Carga -->
    <div id="loading-screen">
        <div class="spinner"></div>
        <div class="loading-text">Cargando CriptoEntorno...</div>
    </div>

    <!-- Contenido Principal -->
    <div class="container main-container"> <!-- Se quitará 'opacity:0' y se añadirá 'visible' con JS -->
        <h1 class="main-title"><i class="fas fa-lock icon"></i>Editor de Cifrados Clásicos Pro</h1>
        <p class="subtitle">Explora los métodos criptográficos tradicionales con visualización paso a paso.</p>

        <div class="row g-4">
            <!-- Columna de Configuración y Entrada -->
            <div class="col-lg-5">
                <div class="section-card">
                     <h5 class="section-title"><i class="fas fa-cog icon"></i>Configuración</h5>

                    <div class="mb-3">
                        <label for="cipherType" class="form-label">Tipo de Cifrado:</label>
                        <select id="cipherType" class="form-select">
                            <option value="cesar">Cifrado César</option>
                            <option value="vigenere">Cifrado Vigenère</option>
                        </select>
                    </div>

                    <div id="key-cesar-group" class="mb-3">
                        <label for="cesarKey" class="form-label">Desplazamiento (César):</label>
                        <input type="number" id="cesarKey" class="form-control" value="3" min="1" max="25">
                    </div>

                    <div id="key-vigenere-group" class="mb-3 hidden">
                        <label for="vigenereKey" class="form-label">Palabra Clave (Vigenère):</label>
                        <input type="text" id="vigenereKey" class="form-control" placeholder="Introduce solo letras (ej: CLAVE)">
                    </div>

                     <div class="mb-3">
                        <label for="inputText" class="form-label">Texto de Entrada:</label>
                        <textarea id="inputText" class="form-control" rows="5" placeholder="Escribe aquí el texto a cifrar o descifrar..."></textarea>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                        <button id="encryptBtn" class="btn btn-primary"><i class="fas fa-lock icon"></i>Cifrar</button>
                        <button id="decryptBtn" class="btn btn-secondary"><i class="fas fa-unlock icon"></i>Descifrar</button>
                    </div>

                     <div id="feedback" class="feedback-message"></div>
                </div>
            </div>

            <!-- Columna de Resultados y Visualización -->
            <div class="col-lg-7">
                 <div class="section-card mb-4">
                     <h5 class="section-title"><i class="fas fa-file-alt icon"></i>Resultado</h5>
                     <textarea id="outputText" class="form-control" rows="5" readonly placeholder="El resultado aparecerá aquí..."></textarea>
                </div>

                <div class="section-card">
                    <h5 class="section-title"><i class="fas fa-shoe-prints icon"></i>Proceso Paso a Paso</h5>
                    <div id="step-by-step-output">
                        <p class="text-muted">El detalle del proceso se mostrará aquí cuando cifres o descifres...</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sección de Estadísticas -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="section-card">
                    <h5 class="section-title"><i class="fas fa-chart-bar icon"></i>Estadísticas de Frecuencia</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-center mb-3">Frecuencia Letras (Entrada)</h6>
                            <div class="chart-container">
                                <canvas id="inputFreqChart"></canvas>
                            </div>
                        </div>
                        <div class="col-md-6">
                             <h6 class="text-center mb-3">Frecuencia Letras (Salida)</h6>
                             <div class="chart-container">
                                <canvas id="outputFreqChart"></canvas>
                            </div>
                        </div>
                    </div>
                     <div id="stats-details" class="mt-4 text-center">
                        <p>Caracteres (Entrada): <strong id="inputCharCount">0</strong> | Caracteres (Salida): <strong id="outputCharCount">0</strong></p>
                    </div>
                </div>
            </div>
        </div>

    </div> <!-- Fin .main-container -->

    <!-- Footer Simple -->
    <footer class="text-center text-muted py-4">
        <small>© 2024 Editor de Cifrados Clásicos Pro. Creado con <i class="fas fa-heart" style="color: var(--accent-color);"></i>.</small>
    </footer>

    <!-- Scripts (CDNs y Lógica Personalizada) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <!-- *** CORRECCIÓN: Actualizado el hash de integridad de Chart.js *** -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" integrity="sha384-9nhczxUqK87bcKHh20fSQcTGD4qq5GhayNYSYWqwBkINBhOfQLg/P5HG5lF1urn4" crossorigin="anonymous"></script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // --- Elementos del DOM ---
            const loadingScreen = document.getElementById('loading-screen');
            const mainContainer = document.querySelector('.main-container'); // Referencia al contenedor principal
            const cipherTypeSelect = document.getElementById('cipherType');
            const cesarKeyGroup = document.getElementById('key-cesar-group');
            const vigenereKeyGroup = document.getElementById('key-vigenere-group');
            const cesarKeyInput = document.getElementById('cesarKey');
            const vigenereKeyInput = document.getElementById('vigenereKey');
            const inputTextarea = document.getElementById('inputText');
            const outputTextarea = document.getElementById('outputText');
            const encryptBtn = document.getElementById('encryptBtn');
            const decryptBtn = document.getElementById('decryptBtn');
            const stepByStepOutput = document.getElementById('step-by-step-output');
            const feedbackDiv = document.getElementById('feedback');
            const inputCharCountSpan = document.getElementById('inputCharCount');
            const outputCharCountSpan = document.getElementById('outputCharCount');
            const inputFreqCanvas = document.getElementById('inputFreqChart').getContext('2d');
            const outputFreqCanvas = document.getElementById('outputFreqChart').getContext('2d');

            let inputChartInstance = null;
            let outputChartInstance = null;
            const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

             // --- Ocultar Pantalla de Carga y Mostrar Contenido ---
            // Usamos window.onload para asegurarnos que *todo* (incluyendo scripts externos como Chart.js) esté cargado
            window.addEventListener('load', () => {
                setTimeout(() => { // Pequeño retraso opcional para suavizar la transición
                     loadingScreen.classList.add('hidden');
                     // Mostrar el contenedor principal con transición
                     mainContainer.classList.add('visible');
                }, 300); // 300ms de retraso
            });

            // Añadir un manejador de errores para asegurar que la pantalla de carga desaparezca
            window.addEventListener('error', (event) => {
                console.error('Error detectado:', event.error);
                // Ocultar pantalla de carga si ha pasado más de 2 segundos desde la carga
                setTimeout(() => {
                    loadingScreen.classList.add('hidden');
                    mainContainer.classList.add('visible');
                }, 2000);
            });

            // --- Lógica de Cambio de Cifrado ---
            cipherTypeSelect.addEventListener('change', () => {
                const selectedCipher = cipherTypeSelect.value;
                if (selectedCipher === 'cesar') {
                    cesarKeyGroup.classList.remove('hidden');
                    vigenereKeyGroup.classList.add('hidden');
                } else if (selectedCipher === 'vigenere') {
                    cesarKeyGroup.classList.add('hidden');
                    vigenereKeyGroup.classList.remove('hidden');
                }
                clearResults(); // Limpiar resultados al cambiar de cifrado
            });

            // --- Funciones de Cifrado/Descifrado ---

            // Limpia la clave Vigenere (solo letras, mayúsculas)
            function cleanVigenereKey(key) {
                return key.toUpperCase().replace(/[^A-Z]/g, '');
            }

            // Cifrado César
            function processCesar(text, shift, encrypt = true) {
                let result = '';
                const steps = [];
                const originalTextForSteps = text; // Guardar original para mostrar may/min en pasos
                text = text.toUpperCase(); // Trabajar con mayúsculas para la lógica

                for (let i = 0; i < originalTextForSteps.length; i++) {
                    const originalChar = originalTextForSteps[i]; // Usar el caracter original para mostrar
                    const charUpper = originalChar.toUpperCase(); // Usar mayúscula para la lógica
                    const charCode = charUpper.charCodeAt(0);

                    if (charUpper >= 'A' && charUpper <= 'Z') {
                        const base = 'A'.charCodeAt(0);
                        let shiftedCode;
                        let resultChar;
                        if (encrypt) {
                             shiftedCode = base + (charCode - base + shift) % 26;
                             resultChar = String.fromCharCode(shiftedCode);
                             // Preservar may/min original si es posible (si el original era minúscula, el resultado también)
                             if (originalChar === originalChar.toLowerCase()) {
                                 resultChar = resultChar.toLowerCase();
                             }
                             steps.push(`<div class="step"><strong>${i + 1}.</strong> Carácter: <span class="char-original">${originalChar}</span> (${charCode - base}) + Shift: ${shift} = <span class="char-result">${resultChar}</span> (${(charCode - base + shift) % 26})</div>`);
                        } else {
                             shiftedCode = base + (charCode - base - shift + 26) % 26; // +26 para manejar negativos
                             resultChar = String.fromCharCode(shiftedCode);
                              // Preservar may/min original
                             if (originalChar === originalChar.toLowerCase()) {
                                 resultChar = resultChar.toLowerCase();
                             }
                             steps.push(`<div class="step"><strong>${i + 1}.</strong> Carácter: <span class="char-original">${originalChar}</span> (${charCode - base}) - Shift: ${shift} = <span class="char-result">${resultChar}</span> (${(charCode - base - shift + 26) % 26})</div>`);
                        }
                        result += resultChar;
                    } else {
                        result += originalChar; // Mantener caracteres no alfabéticos originales
                        steps.push(`<div class="step"><strong>${i + 1}.</strong> Carácter: <span class="char-non-alpha">${originalChar}</span> (No alfabético, se mantiene)</div>`);
                    }
                }
                return { result, steps };
            }

            // Cifrado Vigenère
            function processVigenere(text, key, encrypt = true) {
                let result = '';
                const steps = [];
                const originalTextForSteps = text; // Guardar original
                text = text.toUpperCase(); // Lógica en mayúsculas
                const cleanedKey = cleanVigenereKey(key); // Clave ya debe estar limpia aquí

                let keyIndex = 0;
                for (let i = 0; i < originalTextForSteps.length; i++) {
                    const originalChar = originalTextForSteps[i];
                    const charUpper = originalChar.toUpperCase();
                    const charCode = charUpper.charCodeAt(0);

                    if (charUpper >= 'A' && charUpper <= 'Z') {
                        const base = 'A'.charCodeAt(0);
                        const keyChar = cleanedKey[keyIndex % cleanedKey.length];
                        const keyCharCode = keyChar.charCodeAt(0);
                        const shift = keyCharCode - base;
                        let resultCode;
                        let resultChar;

                        if (encrypt) {
                            resultCode = base + (charCode - base + shift) % 26;
                            resultChar = String.fromCharCode(resultCode);
                             if (originalChar === originalChar.toLowerCase()) { // Preservar minúsculas
                                resultChar = resultChar.toLowerCase();
                             }
                            steps.push(`<div class="step"><strong>${i + 1}.</strong> Carácter: <span class="char-original">${originalChar}</span> (${charCode - base}) + Clave: <span class="char-key">${keyChar}</span> (${shift}) = <span class="char-result">${resultChar}</span> (${(charCode - base + shift) % 26})</div>`);
                        } else {
                            resultCode = base + (charCode - base - shift + 26) % 26;
                            resultChar = String.fromCharCode(resultCode);
                             if (originalChar === originalChar.toLowerCase()) { // Preservar minúsculas
                                resultChar = resultChar.toLowerCase();
                             }
                            steps.push(`<div class="step"><strong>${i + 1}.</strong> Carácter: <span class="char-original">${originalChar}</span> (${charCode - base}) - Clave: <span class="char-key">${keyChar}</span> (${shift}) = <span class="char-result">${resultChar}</span> (${(charCode - base - shift + 26) % 26})</div>`);
                        }
                        result += resultChar;
                        keyIndex++; // Incrementar índice de la clave solo para letras
                    } else {
                        result += originalChar; // Mantener caracteres no alfabéticos
                        steps.push(`<div class="step"><strong>${i + 1}.</strong> Carácter: <span class="char-non-alpha">${originalChar}</span> (No alfabético, se mantiene)</div>`);
                    }
                }
                 return { result, steps };
            }

            // --- Event Listeners para Botones ---
            encryptBtn.addEventListener('click', () => handleProcess(true));
            decryptBtn.addEventListener('click', () => handleProcess(false));

            // --- Función Principal de Procesamiento ---
            function handleProcess(encrypt) {
                clearFeedback();
                clearSteps();
                const text = inputTextarea.value;
                const cipherType = cipherTypeSelect.value;
                let output = { result: '', steps: [] };

                if (!text) {
                    showFeedback('Por favor, introduce algún texto.', 'error');
                    return;
                }

                try {
                    if (cipherType === 'cesar') {
                        const shift = parseInt(cesarKeyInput.value, 10);
                        if (isNaN(shift) || shift < 1 || shift > 25) {
                            showFeedback('El desplazamiento César debe ser un número entre 1 y 25.', 'error');
                            return;
                        }
                        output = processCesar(text, shift, encrypt);
                    } else if (cipherType === 'vigenere') {
                        const key = vigenereKeyInput.value;
                        const cleanedKey = cleanVigenereKey(key);
                        if (!cleanedKey) {
                             showFeedback('La palabra clave Vigenère no puede estar vacía y debe contener solo letras.', 'error');
                             return;
                        }
                         if (key !== cleanedKey) {
                             vigenereKeyInput.value = cleanedKey; // Actualiza el input con la clave limpia
                             // Opcional: notificar al usuario sobre la limpieza
                             // showFeedback('La clave Vigenère se ha limpiado (solo letras mayúsculas).', 'info');
                         }
                        output = processVigenere(text, cleanedKey, encrypt);
                    }

                    if (output.result !== undefined) {
                         outputTextarea.value = output.result;
                         displaySteps(output.steps);
                         updateStatistics(text, output.result); // Pasar texto original y resultado
                         showFeedback(`Texto ${encrypt ? 'cifrado' : 'descifrado'} con éxito usando ${cipherType}.`, 'success');
                    }

                } catch (error) {
                    console.error("Error during processing:", error);
                    showFeedback('Ocurrió un error inesperado durante el proceso.', 'error');
                    // Limpiar resultados parciales en caso de error
                    outputTextarea.value = '';
                    clearSteps();
                    updateStatistics(text, ''); // Actualizar estadísticas con salida vacía
                }
            }

            // --- Funciones Auxiliares ---

            function showFeedback(message, type = 'info') { // type: 'success', 'error', 'info'
                 feedbackDiv.textContent = message;
                 feedbackDiv.className = `feedback-message ${type}`; // Resetea clases y añade la nueva
                 feedbackDiv.style.display = 'block';
                 // Auto-ocultar feedback después de unos segundos (opcional)
                 setTimeout(() => {
                     if (feedbackDiv.textContent === message) { // Solo ocultar si el mensaje no ha cambiado
                         clearFeedback();
                     }
                 }, 5000); // Ocultar después de 5 segundos
            }


            function clearFeedback() {
                feedbackDiv.style.display = 'none';
                feedbackDiv.textContent = '';
                feedbackDiv.className = 'feedback-message'; // Resetea clases
            }

            function clearSteps() {
                 stepByStepOutput.innerHTML = '<p class="text-muted">El detalle del proceso se mostrará aquí cuando cifres o descifres...</p>';
            }

            function clearResults() {
                // No limpiamos el input text area al cambiar de cifrado, solo los resultados
                // inputTextarea.value = '';
                outputTextarea.value = '';
                clearFeedback();
                clearSteps();
                // Recalcular estadísticas solo con el texto de entrada actual (si existe)
                updateStatistics(inputTextarea.value, '');
            }

             function displaySteps(steps) {
                if (!steps || steps.length === 0) {
                    clearSteps();
                    return;
                }
                stepByStepOutput.innerHTML = ''; // Limpiar contenido previo
                steps.forEach((stepHtml, index) => {
                    const stepElementWrapper = document.createElement('div'); // Crear un wrapper temporal
                    stepElementWrapper.innerHTML = stepHtml.trim(); // Usar trim para evitar nodos de texto vacíos
                    const stepElement = stepElementWrapper.firstChild; // Obtener el div.step real

                    if(stepElement && stepElement.nodeType === Node.ELEMENT_NODE) { // Asegurarse de que es un elemento
                         // Añadir un pequeño retraso escalonado para la animación
                        stepElement.style.animationDelay = `${index * 0.05}s`;
                        stepByStepOutput.appendChild(stepElement);
                    } else {
                        console.warn("Could not append step, was not a valid element:", stepHtml);
                    }
                });
                // Scroll al final para ver los últimos pasos si es necesario
                stepByStepOutput.scrollTop = stepByStepOutput.scrollHeight;
            }

            // --- Lógica de Estadísticas y Gráficos ---

            function calculateFrequency(text) {
                const freq = {};
                ALPHABET.split('').forEach(char => freq[char] = 0); // Inicializar todas las letras a 0
                text = text.toUpperCase();
                for (let i = 0; i < text.length; i++) {
                    const char = text[i];
                    if (char >= 'A' && char <= 'Z') {
                        freq[char]++;
                    }
                }
                return freq;
            }

            function updateStatistics(inputText, outputText) {
                inputCharCountSpan.textContent = inputText.length;
                outputCharCountSpan.textContent = outputText.length;

                const inputFreq = calculateFrequency(inputText);
                const outputFreq = calculateFrequency(outputText);

                // Usamos las variables de instancia guardadas para actualizarlas/crearlas
                inputChartInstance = renderChart(inputFreqCanvas, inputFreq, 'Frecuencia Entrada', inputChartInstance);
                outputChartInstance = renderChart(outputFreqCanvas, outputFreq, 'Frecuencia Salida', outputChartInstance);
            }

            function renderChart(canvasContext, frequencyData, label, chartInstance) {
                try {
                    const labels = ALPHABET.split('');
                    const data = labels.map(label => frequencyData[label]);

                    // Destruir gráfico anterior si existe para evitar solapamientos o errores
                    if (chartInstance) {
                        chartInstance.destroy();
                    }

                    // Crear nueva instancia del gráfico
                    const newChart = new Chart(canvasContext, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: label,
                                data: data,
                                backgroundColor: 'rgba(233, 69, 96, 0.6)', // Color principal con transparencia
                                borderColor: 'rgba(233, 69, 96, 1)', // Color principal sólido
                                borderWidth: 1,
                                borderRadius: 4, // Bordes redondeados para las barras
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false, // Importante para que el contenedor controle el tamaño
                            plugins: {
                                legend: {
                                    display: false // Ocultar leyenda, ya está en el título h6
                                },
                                tooltip: {
                                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                                    titleFont: { weight: 'bold' },
                                    bodyFont: { size: 14 },
                                    cornerRadius: 4,
                                    titleColor: '#ffffff',
                                    bodyColor: '#ffffff',
                                    callbacks: {
                                        // Mostrar Frecuencia en Tooltip
                                        label: function(context) {
                                            let label = context.dataset.label || '';
                                            if (label) {
                                                label += ': ';
                                            }
                                            if (context.parsed.y !== null) {
                                                label += context.parsed.y;
                                            }
                                            return label;
                                        }
                                    }
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    grid: {
                                        color: 'rgba(224, 224, 224, 0.1)' // Color de la rejilla Y tenue
                                    },
                                    ticks: {
                                        color: '#ffffff', // Color claro para los ticks Y
                                        precision: 0 // Asegurar que no haya decimales en el eje Y
                                    }
                                },
                                x: {
                                    grid: {
                                        display: false // Ocultar rejilla X
                                    },
                                    ticks: {
                                        color: '#ffffff' // Color claro para los ticks X
                                    }
                                }
                            },
                            animation: {
                                duration: 500, // Duración de la animación al cargar/actualizar
                                easing: 'easeOutQuart' // Tipo de animación
                            }
                        }
                    });

                    // Devolver la nueva instancia para guardarla
                    return newChart;
                } catch (error) {
                    console.error("Error al renderizar el gráfico:", error);
                    // Asegurar que la pantalla de carga desaparezca en caso de error
                    loadingScreen.classList.add('hidden');
                    mainContainer.classList.add('visible');
                    return null;
                }
            }

            // Inicializar estado de la UI
             cipherTypeSelect.dispatchEvent(new Event('change')); // Para mostrar/ocultar campos de clave correctos al inicio
             updateStatistics(inputTextarea.value, ''); // Inicializar estadísticas con el input actual (si lo hay)

        }); // Fin DOMContentLoaded
    </script>

</body>
</html>