/* ==========================================================================
   Variables y Estilos Base
   ========================================================================== */
:root {
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --line-height-base: 1.6;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --shadow-soft: 0 4px 12px rgba(0,0,0,0.15); 
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease;
}

body { 
    font-family: var(--font-primary); 
    line-height: var(--line-height-base); 
    margin: 0; 
    padding: 20px; 
    background-color: var(--bg-primary); 
    color: var(--text-primary); 
    display: flex; 
    justify-content: center; 
    transition: background-color var(--transition-fast), color var(--transition-fast); 
    box-sizing: border-box; 
}

h2 { 
    font-size: 1.4em; 
    margin-top: 0; 
    color: var(--text-primary); 
    text-align: center; 
    margin-bottom: 15px; 
    font-weight: 500; 
}

h3 { 
    font-size: 1.1em; 
    color: var(--text-secondary); 
    border-bottom: 1px solid var(--border-light-color); 
    padding-bottom: 10px; 
    text-align: left; 
    margin-top: 0; 
    margin-bottom: 15px; 
    font-weight: 500; 
}

textarea { 
    width: 100%; 
    padding: 12px; 
    margin-bottom: 10px; 
    border: 1px solid var(--input-border); 
    border-radius: var(--border-radius-small); 
    box-sizing: border-box; 
    background-color: var(--input-bg); 
    color: var(--input-text); 
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); 
    font-family: var(--font-primary); 
    font-size: 1em; 
    line-height: 1.5; 
}

textarea:focus { 
    outline: none; 
    border-color: var(--accent-color); 
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 83,155,245), 0.3);  
}

/* ==========================================================================
   Temas (Oscuro y Claro)
   ========================================================================== */

/* Tema Oscuro */
body[data-theme="dark"] {
    --bg-primary: #22272e; --bg-secondary: #2d333b; --text-primary: #adbac7; --text-secondary: #768390; 
    --border-color: #444c56; --border-light-color: #373e47; --accent-color: #539bf5; --accent-text-color: #ffffff; 
    --btn-record-bg: #377ef0; --btn-record-bg-hover: #539bf5; --btn-pause-bg: #d9971a; --btn-pause-bg-hover: #f0b72f; 
    --btn-pause-text: #22272e; --btn-stop-bg: #e5534b; --btn-stop-bg-hover: #f47067; --btn-retry-bg: #4387d9; 
    --btn-retry-bg-hover: #539bf5; --btn-copy-bg: #d9971a; --btn-copy-bg-hover: #f0b72f; --btn-copy-text: #22272e;
    --btn-copy-synced-bg: #28a745; --btn-copy-synced-bg-hover: #218838; --btn-correct-bg: #28a745; --btn-correct-bg-hover: #218838;
    --btn-blue-bg: #377ef0; --btn-blue-bg-hover: #539bf5; --btn-reset-bg: #8957e5; --btn-reset-bg-hover: #9b72f5; 
    --btn-juanizar-bg: #218ca3; --btn-juanizar-bg-hover: #28a9c2; --btn-juanizar-text: var(--accent-text-color);
    --btn-danger-bg: #e5534b; --btn-danger-bg-hover: #f47067; --btn-success-bg: #28a745; --btn-success-bg-hover: #218838;
    --btn-technique-red-bg: #e5534b; --btn-technique-red-hover: #f47067; --btn-technique-yellow-bg: #d9971a; 
    --btn-technique-yellow-hover: #f0b72f; --btn-technique-yellow-text: #22272e; --btn-technique-blue-bg: #377ef0; 
    --btn-technique-blue-hover: #539bf5; --btn-technique-gray-bg: #444c56; --btn-technique-gray-hover: #5d6774;
    --btn-technique-text: var(--accent-text-color); --volume-bar-gradient: linear-gradient(to right, #2ecc71, #f1c40f, #e74c3c);
    --success-bg: #14301c; --success-text: #a3cfbb; --error-bg: #3b1518; --error-text: #f1b0b7;
    --processing-bg: #002752; --processing-text: #b8d4fe; --idle-bg: #3e444a; --idle-text: #ced4da;
    --button-disabled-bg: #444c56; --theme-image-border: var(--border-color); --input-bg: #22272e; 
    --input-border: #444c56; --input-text: #adbac7; --switch-bg: #444c56; --switch-thumb-bg: #768390; 
    --switch-checked-bg: #377ef0; --auth-form-bg: var(--bg-secondary); --auth-error-color: var(--btn-stop-bg); 
    --auth-link-color: var(--accent-color); --modal-overlay-bg: rgba(0,0,0,0.7); --modal-content-bg: var(--bg-secondary);
    --accent-color-rgb: 83, 155, 245;
    --btn-upload-bg: var(--btn-reset-bg);
    --btn-upload-bg-hover: var(--btn-reset-bg-hover);
    --btn-download-bg: var(--btn-blue-bg);
    --btn-download-bg-hover: var(--btn-blue-bg-hover);
    --btn-export-bg: #28a745;
    --btn-export-bg-hover: #218838;
    --btn-import-bg: #8957e5;
    --btn-import-bg-hover: #9b72f5;
}

/* Tema Claro */
body[data-theme="light"] {
    --bg-primary: #f4f8fa; --bg-secondary: #ffffff; --text-primary: #2f363d; --text-secondary: #5c6975;
    --border-color: #d0d7de; --border-light-color: #e9ecef; --accent-color: #007bff; --accent-text-color: #ffffff;
    --btn-record-bg: #28a745; --btn-record-bg-hover: #218838; --btn-pause-bg: #ffc107; --btn-pause-bg-hover: #e0a800;
    --btn-pause-text: #212529; --btn-stop-bg: #dc3545; --btn-stop-bg-hover: #c82333; --btn-retry-bg: #17a2b8; 
    --btn-retry-bg-hover: #138496; --btn-copy-bg: #fd7e14; --btn-copy-bg-hover: #e66f0d; --btn-copy-text: #ffffff;
    --btn-copy-synced-bg: #28a745; --btn-copy-synced-bg-hover: #218838; --btn-correct-bg: #28a745; 
    --btn-correct-bg-hover: #218838; --btn-blue-bg: #007bff; --btn-blue-bg-hover: #0056b3; --btn-reset-bg: #6f42c1; 
    --btn-reset-bg-hover: #5a349b; --btn-juanizar-bg: #17a2b8; --btn-juanizar-bg-hover: #138496; 
    --btn-juanizar-text: var(--accent-text-color); --btn-danger-bg: #dc3545; --btn-danger-bg-hover: #c82333;
    --btn-success-bg: #28a745; --btn-success-bg-hover: #218838; --btn-technique-red-bg: #dc3545; 
    --btn-technique-red-hover: #c82333; --btn-technique-yellow-bg: #ffc107; --btn-technique-yellow-hover: #e0a800;
    --btn-technique-yellow-text: #212529; --btn-technique-blue-bg: #17a2b8; --btn-technique-blue-hover: #138496;
    --btn-technique-gray-bg: #6c757d; --btn-technique-gray-hover: #5a6268; --btn-technique-text: var(--accent-text-color);
    --volume-bar-gradient: linear-gradient(to right, #2ecc71, #f1c40f, #e74c3c); --success-bg: #d4edda; 
    --success-text: #155724; --error-bg: #f8d7da; --error-text: #721c24; --processing-bg: #e7f3ff;
    --processing-text: #004085; --idle-bg: #f0f0f0; --idle-text: #555; --button-disabled-bg: #ced4da;
    --theme-image-border: var(--border-color); --input-bg: #ffffff; --input-border: #ced4da; --input-text: #2f363d;
    --switch-bg: #ccc; --switch-thumb-bg: white; --switch-checked-bg: #007bff; --auth-form-bg: var(--bg-secondary);
    --auth-error-color: var(--btn-stop-bg); --auth-link-color: var(--accent-color); --modal-overlay-bg: rgba(0,0,0,0.6);
    --modal-content-bg: var(--bg-secondary); --accent-color-rgb: 0, 123, 255;
    --btn-upload-bg: var(--btn-reset-bg);
    --btn-upload-bg-hover: var(--btn-reset-bg-hover);
    --btn-download-bg: var(--btn-blue-bg);
    --btn-download-bg-hover: var(--btn-blue-bg-hover);
    --btn-export-bg: #28a745;
    --btn-export-bg-hover: #218838;
    --btn-import-bg: #6f42c1;
    --btn-import-bg-hover: #5a349b;
}

/* ==========================================================================
   Estructuras de Contenedores y Vistas
   ========================================================================== */
body.logged-out #app-container, body.logged-out #juanizador-container { display: none !important; }
body.logged-out #auth-container { display: block !important; } 
body.logged-in #auth-container { display: none !important; }

#auth-container { width: 100%; max-width: 450px; margin-top: 50px; }
#app-container, #juanizador-container { width: 100%; display: flex; flex-direction: column; align-items:center; }

/* ==========================================================================
   Sección de Autenticación
   ========================================================================== */
.auth-form-wrapper { background-color: var(--auth-form-bg); padding: 30px 40px; border-radius: var(--border-radius-medium); border: 1px solid var(--border-color); box-shadow: var(--shadow-soft); }
.auth-form h2 { text-align: center; margin-bottom: 25px; font-weight: 500; }
.auth-form div { margin-bottom: 15px; }
.auth-form label { display: block; text-align: left; margin-bottom: 6px; font-weight: 500; font-size: 0.9em; color: var(--text-secondary); }
.auth-form input[type="email"], .auth-form input[type="password"] { width: 100%; padding: 10px; border: 1px solid var(--input-border); border-radius: var(--border-radius-small); box-sizing: border-box; background-color: var(--input-bg); color: var(--input-text); font-size: 1em; }
.auth-form input[type="email"]:focus, .auth-form input[type="password"]:focus { border-color: var(--accent-color); outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb),0.3); }
.auth-form button { width: 100%; padding: 12px; font-size: 1.05em; cursor: pointer; border: none; border-radius: var(--border-radius-small); background-color: var(--accent-color); color: var(--accent-text-color); transition: background-color 0.2s ease; margin-top: 5px; }
.auth-form button:hover { background-color: var(--btn-record-bg-hover); }
.auth-error-message { color: var(--auth-error-color); margin-bottom: 15px; font-weight: 500; min-height: 1.2em; text-align: center; font-size: 0.9em; }
.auth-switch { font-size: 0.9em; color: var(--text-secondary); margin-top: 20px; text-align: center; }
.auth-switch a { color: var(--auth-link-color); text-decoration: none; font-weight: 500; }
.auth-switch a:hover { text-decoration: underline; }

/* ==========================================================================
   Vista de Dictado (#app-container)
   ========================================================================== */
#app-container .user-info-bar { background-color: var(--bg-secondary); padding: 10px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; width: 100%; max-width: 1600px; box-sizing: border-box; }
#app-container #userDisplay { margin-right: 15px; color: var(--text-secondary); font-size: 0.9em; }
#app-container #logoutButton { background-color: var(--btn-stop-bg); color: var(--accent-text-color); padding: 6px 12px; font-size: 0.85em; width: auto; flex-grow: 0; }
#app-container #logoutButton:hover { background-color: var(--btn-stop-bg-hover); }
#app-container .app-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; }
#app-container .app-layout { display: flex; flex-direction: row; gap: 25px; width: 100%; max-width: 1600px; margin-top: 0; } 
#app-container .main-column { flex: 2; display: flex; flex-direction: column; gap: 20px; }
#app-container .sidebar-column { flex: 1; position: sticky; top: 20px; align-self: flex-start; display: flex; flex-direction: column; gap: 20px; max-width: 400px; }
#app-container .container { background-color: var(--bg-secondary); padding: 20px 25px; border-radius: var(--border-radius-medium); border: 1px solid var(--border-color); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
#app-container #title-frame { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius-medium); padding: 20px 25px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); width: 100%; max-width: 1600px; box-sizing: border-box; margin-bottom: 20px; min-height: 80px; }
#app-container #title-frame h1 { font-size: 2.2em; color: var(--text-primary); font-weight: 600; text-align: center; margin: 0; line-height: 1.1; }
#app-container #title-frame h1 small { font-size: 0.55em; color: var(--text-secondary); font-weight: normal; margin-left: 8px; }
#app-container .controls .buttons-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 15px; }
#app-container #polishedText { min-height: 250px; font-size: 1.05em; }
#app-container #headerArea { min-height: 100px; margin-bottom: 0; }
#app-container button { color: var(--accent-text-color); border: none; padding: 10px 15px; border-radius: var(--border-radius-small); cursor: pointer; font-weight: 500; font-size: 0.95em; transition: background-color var(--transition-medium), color var(--transition-medium), transform 0.1s ease; text-align: center; width: 100%; }
#app-container button:active:not(:disabled) { transform: translateY(1px); }
#app-container button:disabled { background-color: var(--button-disabled-bg); color: var(--text-secondary); cursor: not-allowed; opacity: 0.6; }
#app-container .btn-record { background-color: var(--btn-record-bg); } 
#app-container .btn-record.stop-style { background-color: var(--btn-stop-bg); } 
#app-container .btn-record:hover:not(:disabled) { background-color: var(--btn-record-bg-hover); }
#app-container .btn-record.stop-style:hover:not(:disabled) { background-color: var(--btn-stop-bg-hover); }
#app-container .btn-pause { background-color: var(--btn-pause-bg); color: var(--btn-pause-text); }
#app-container .btn-pause:hover:not(:disabled) { background-color: var(--btn-pause-bg-hover); }
#app-container .btn-retry { background-color: var(--btn-retry-bg); }
#app-container .btn-retry:hover:not(:disabled) { background-color: var(--btn-retry-bg-hover); }
#app-container .btn-copy { background-color: var(--btn-copy-bg); color: var(--btn-copy-text); }
#app-container .btn-copy:hover:not(:disabled) { background-color: var(--btn-copy-bg-hover); }
#app-container .btn-copy.synced { background-color: var(--btn-copy-synced-bg); color: var(--accent-text-color); }
#app-container .btn-correct { background-color: var(--btn-correct-bg); color: var(--accent-text-color); }
#app-container .btn-correct:hover:not(:disabled) { background-color: var(--btn-correct-bg-hover); }
#app-container .btn-blue { background-color: var(--btn-blue-bg); color: var(--accent-text-color); }
#app-container .btn-blue:hover:not(:disabled) { background-color: var(--btn-blue-bg-hover); }
#app-container .btn-reset { background-color: var(--btn-reset-bg); }
#app-container .btn-reset:hover:not(:disabled) { background-color: var(--btn-reset-bg-hover); }
#app-container .btn-upload { background-color: var(--btn-upload-bg); }
#app-container .btn-upload:hover:not(:disabled) { background-color: var(--btn-upload-bg-hover); }
#app-container .btn-download { background-color: var(--btn-download-bg); margin-top: 10px; }
#app-container .btn-download:hover:not(:disabled) { background-color: var(--btn-download-bg-hover); }
#app-container .btn-juanizar { background-color: var(--btn-juanizar-bg); color: var(--btn-juanizar-text); }
#app-container .btn-juanizar:hover:not(:disabled) { background-color: var(--btn-juanizar-bg-hover); }
#app-container #status { margin-top: 15px; padding: 8px 12px; border-radius: var(--border-radius-small); font-weight: 500; text-align: center; transition: background-color var(--transition-medium), color var(--transition-medium); color: var(--text-secondary); font-size: 0.9em; }
#app-container .status-idle { color: var(--idle-text); background-color: transparent; } 
#app-container .status-processing { color: var(--processing-text); background-color: var(--processing-bg); }
#app-container .status-success { color: var(--success-text); background-color: var(--success-bg); }
#app-container .status-error { color: var(--error-text); background-color: var(--error-bg); }
#app-container #recordingTimeDisplay { text-align: center; font-size: 1.1em; font-weight: 500; color: var(--text-secondary); margin-bottom: 10px; min-height: 1.5em; }
#app-container #volumeMeterContainer { width: 100%; height: 20px; background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius-small); margin: 0 auto 10px auto; overflow: hidden; }
#app-container #volumeMeterBar { width: 0%; height: 100%; background: var(--volume-bar-gradient); transition: width 0.05s linear; }
#app-container #volumeMeterBar.paused { background: var(--button-disabled-bg); }
#app-container .audio-playback-section { text-align: center; } 
#app-container #audioPlayback { width: 100%; margin-top: 10px; }
#app-container body[data-theme="dark"] #audioPlayback { filter: invert(1) hue-rotate(180deg); }
#app-container .theme-switch-wrapper { display: flex; align-items: center; justify-content: space-between; } 
#app-container .theme-switch-label { margin-right: 0; font-size: 1em; color: var(--text-primary); } 
#app-container .theme-switch { display: inline-block; height: 22px; position: relative; width: 42px; } 
#app-container .theme-switch input { display:none; }
#app-container .slider { background-color: var(--switch-bg); bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; border-radius: 22px; }
#app-container .slider:before { background-color: var(--switch-thumb-bg); bottom: 2px; content: ""; height: 18px; left: 2px; position: absolute; transition: .4s; width: 18px; border-radius: 50%; }
#app-container input:checked + .slider { background-color: var(--switch-checked-bg); } 
#app-container input:checked + .slider:before { transform: translateX(20px); }
#app-container #techniqueButtons { display: flex; flex-direction: column; gap: 10px; }
#app-container .technique-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
#app-container #techniqueButtons button { padding: 8px 10px; font-size: 0.88em; border: 1px solid transparent; }
#app-container .btn-tech-red { background-color: var(--btn-technique-red-bg); color: var(--accent-text-color); }
#app-container .btn-tech-red:hover:not(:disabled) { background-color: var(--btn-technique-red-hover); }
#app-container .btn-tech-yellow { background-color: var(--btn-technique-yellow-bg); color: var(--btn-technique-yellow-text); }
#app-container .btn-tech-yellow:hover:not(:disabled) { background-color: var(--btn-technique-yellow-hover); }
#app-container .btn-tech-blue { background-color: var(--btn-technique-blue-bg); color: var(--accent-text-color); }
#app-container .btn-tech-blue:hover:not(:disabled) { background-color: var(--btn-technique-blue-hover); }
#app-container .btn-tech-gray { background-color: var(--btn-technique-gray-bg); color: var(--btn-technique-text); } 
#app-container .btn-tech-gray:hover:not(:disabled) { background-color: var(--btn-technique-gray-hover); }

/* ==========================================================================
   Vista del Juanizador (#juanizador-container)
   ========================================================================== */
#juanizador-container { max-width: 1400px; gap: 20px; }
#juanizador-container .page-header { width: 100%; box-sizing: border-box; background-color: var(--bg-secondary); padding: 15px 25px; border-radius: var(--border-radius-medium); border: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
#juanizador-container .page-header h1 { margin: 0; font-size: 1.8em; font-weight: 500; }
#juanizador-container .header-controls { display: flex; align-items: center; gap: 20px; }
#juanizador-container .main-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
#juanizador-container .juanizador-section { width: 100%; box-sizing: border-box; background-color: var(--bg-secondary); border-radius: var(--border-radius-medium); padding: 20px 25px; border: 1px solid var(--border-color); box-shadow: 0 2px 5px rgba(0,0,0,0.05); min-width: 0; }
#juanizador-container .section-title { font-size: 1.5em; font-weight: 500; margin-top: 0; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light-color); }
#juanizador-container .buttons-group { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
#juanizador-container .btn { border: none; padding: 10px 15px; border-radius: var(--border-radius-small); cursor: pointer; font-size: 0.95em; font-weight: 500; transition: background-color 0.2s ease, transform 0.1s ease; text-align: center; }
#juanizador-container .btn:active:not(:disabled) { transform: translateY(1px); }
#juanizador-container .btn-main { background-color: var(--accent-color); color: var(--accent-text-color); }
#juanizador-container .btn-main:hover { background-color: var(--btn-record-bg-hover); }
#juanizador-container .btn-danger { background-color: var(--btn-danger-bg); color: var(--accent-text-color); }
#juanizador-container .btn-danger:hover { background-color: var(--btn-danger-bg-hover); }
#juanizador-container .btn-success { background-color: var(--btn-success-bg); color: var(--accent-text-color); }
#juanizador-container .btn-success:hover { background-color: var(--btn-success-bg-hover); }
#juanizador-container #microphone-btn { background-color: var(--accent-color); color: var(--accent-text-color); border-radius: 50px; padding: 10px 20px; font-size: 1em; display: inline-flex; align-items: center; gap: 10px; }
#juanizador-container #microphone-btn.recording { background-color: var(--btn-danger-bg); animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.5); } 70% { box-shadow: 0 0 0 10px rgba(var(--accent-color-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0); } }
#juanizador-container select { width: 100%; padding: 10px; border: 1px solid var(--input-border); border-radius: var(--border-radius-small); background-color: var(--input-bg); color: var(--input-text); font-size: 1em; box-sizing: border-box; }
#juanizador-container select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.3); }
#juanizador-container #transcript { min-height: 150px; resize: vertical; margin-bottom: 20px; }
#juanizador-container .technique-selector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
#juanizador-container .selector-group { display: flex; flex-direction: column; gap: 8px; }
#juanizador-container .selector-group label { font-weight: 500; color: var(--text-secondary); font-size: 0.9em; }
#juanizador-container .checkbox-group { display: flex; flex-direction: column; gap: 8px; }
#juanizador-container .checkbox-group label { display: flex; align-items: center; gap: 8px; font-weight: normal; cursor: pointer; }
#juanizador-container .checkbox-group input[type="checkbox"] { margin-right: 5px; accent-color: var(--accent-color); }
#juanizador-container .category { background-color: var(--bg-primary); border-left: 4px solid var(--accent-color); padding: 15px; margin-bottom: 10px; border-radius: 0 5px 5px 0; }
#juanizador-container .category h3 { margin-top: 0; margin-bottom: 8px; font-weight: 500; font-size: 1.1em; }
#juanizador-container .category ul { padding-left: 20px; margin: 5px 0 0 0; color: var(--text-secondary); list-style-position: inside; }
#juanizador-container .finding-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 8px 0; flex-wrap: wrap; }
#juanizador-container .finding-text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; text-align: left; }
#juanizador-container .category-reassign { padding: 5px 8px; font-size: 0.85em; max-width: 160px; flex-shrink: 0; }
#juanizador-container #final-report { white-space: pre-wrap; background-color: var(--bg-primary); padding: 15px; border-radius: var(--border-radius-small); border: 1px solid var(--border-light-color); min-height: 100px; }
#juanizador-container .technique-description { margin-bottom: 20px; background-color: var(--bg-primary); padding: 15px; border-radius: var(--border-radius-small); border-left: 4px solid var(--accent-color); }
#juanizador-container .btn-omit { padding: 4px 8px; font-size: 0.8em; font-weight: 500; background-color: var(--text-secondary); color: var(--bg-secondary); border: none; border-radius: var(--border-radius-small); cursor: pointer; }
#juanizador-container .btn-omit:hover { background-color: var(--btn-danger-bg); color: var(--accent-text-color); }
#juanizador-container .loading { text-align: center; margin: 20px 0; display: none; }
#juanizador-container .spinner { border: 4px solid var(--border-light-color); width: 36px; height: 36px; border-radius: 50%; border-left-color: var(--accent-color); animation: spin 1s linear infinite; margin: 0 auto 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#juanizador-container .status-message { font-style: italic; color: var(--text-secondary); }

/* ==========================================================================
   Modal de Vocabulario (Compartido)
   ========================================================================== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--modal-overlay-bg); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: var(--modal-content-bg); padding: 25px 30px; border-radius: var(--border-radius-medium); border: 1px solid var(--border-color); width: 90%; max-width: 600px; max-height: 85vh; box-shadow: var(--shadow-soft); position: relative; display: flex; flex-direction: column; }
.modal-content h3 { margin-top: 0; margin-bottom: 20px; text-align: center; border-bottom: 1px solid var(--border-light-color); padding-bottom: 10px; }
.modal-content p small { display: block; text-align: center; margin-bottom: 15px; color: var(--text-secondary); }
.modal-close-button { position: absolute; top: 10px; right: 15px; font-size: 2em; font-weight: bold; color: var(--text-secondary); background: none; border: none; cursor: pointer; line-height: 1; padding: 0; }
.modal-close-button:hover { color: var(--text-primary); }
#vocabManagerList { list-style: none; padding: 0; margin: 0 0 20px 0; flex-grow: 1; overflow-y: auto; border: 1px solid var(--border-light-color); border-radius: var(--border-radius-small); }
#vocabManagerList li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border-light-color); font-size: 0.95em; }
#vocabManagerList li:last-child { border-bottom: none; }
.vocab-key { font-weight: bold; color: var(--accent-color); flex-basis: 40%; margin-right: 5px; word-break: break-all; }
.vocab-arrow { color: var(--text-secondary); margin: 0 8px; }
.vocab-value { flex-grow: 1; word-break: break-all; }
.vocab-actions { flex-shrink: 0; margin-left: 15px; display: flex; gap: 5px; }
.vocab-actions button { padding: 5px 8px; font-size: 0.8em; min-width: auto; width: auto; background-color: var(--input-bg); color: var(--text-primary); border: 1px solid var(--border-color); }
.vocab-actions button.delete-vocab-btn { background-color: var(--btn-stop-bg); color: var(--accent-text-color); border-color: var(--btn-stop-bg); }
.vocab-actions button:hover { opacity: 0.8; }
.modal-actions { 
    margin-top: 20px; 
    text-align: center; 
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Para que no se desborde en pantallas pequeñas */
}
.modal-actions button {
    padding: 10px 20px;
    font-size: 0.9em;
}
.btn-export {
    background-color: var(--btn-export-bg);
}
.btn-export:hover {
    background-color: var(--btn-export-bg-hover);
}
.btn-import {
    background-color: var(--btn-import-bg);
}
.btn-import:hover {
    background-color: var(--btn-import-bg-hover);
}

/* ==========================================================================
   Estilos de Sidebar e Imagen de Tema
   ========================================================================== */
.theme-image-container { padding: 15px; text-align: center; background-color: var(--bg-primary); }
#themeImageDark, #themeImageLight { width: 120px; height: auto; border-radius: var(--border-radius-medium); border: 2px solid var(--border-color); box-shadow: var(--shadow-soft); display: block; margin: 0 auto; transition: transform 0.3s ease; }
#themeImageDark:hover, #themeImageLight:hover { transform: scale(1.05); }

/* ==========================================================================
   Efecto de Transición Batman (VERSIÓN DEFINITIVA CON GIF)
   ========================================================================== */
#batman-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000; /* Fondo negro sólido */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#batman-transition-overlay.active {
    opacity: 1;
    visibility: visible;
}
#batman-transition-gif {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

/* ==========================================================================
   Media Queries para Responsividad
   ========================================================================== */
@media (max-width: 992px) { 
    #app-container .app-layout, #juanizador-container .main-content-grid { flex-direction: column; grid-template-columns: 1fr; } 
    #app-container .sidebar-column { position: static; width: 100%; max-width: none; order: 2; } 
    #app-container .main-column { order: 1; } 
    #app-container #title-frame h1, #juanizador-container .page-header h1 { font-size: 1.6em; } 
    #app-container #themeImageDark, #app-container #themeImageLight { width: 100px; } 
}
@media (max-width: 768px) { 
    #app-container .controls .buttons-group { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } 
    button { font-size: 0.9em; }  
    #app-container #techniqueButtons .technique-group { grid-template-columns: 1fr; } 
    #juanizador-container .page-header { flex-direction: column; gap: 15px; align-items: flex-start; }
    #juanizador-container .header-controls { width: 100%; justify-content: space-between; }
}