/* Estilos generales y transiciones suaves para cambios de tema. */
        body {
            transition: background-color 0.3s, color 0.3s;
        }

        .card-body {
            transition: all 0.2s ease-in-out;
        }

        /* Estilos para el área de dictado. */
        #dictationBox {
            resize: none; /* Evita que el usuario cambie el tamaño del textarea. */
            position: relative;
            z-index: 1; /* Contexto de apilamiento base */
            padding-left: 100px !important; /* Espacio para 4 botones: borrar (26px) + copiar (24px) + subir (20px) + bajar (20px) + márgenes */
        }

        /* Wrapper para feedbackBox con botones flotantes */
        #feedbackWrapper {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        #feedbackBox {
            position: relative;
            z-index: 1;
            padding-left: 75px !important; /* Espacio para botones de ignorar + agregar */
        }

        /* Contenedores de botones de corrección */
        .correction-ignore-buttons-container {
            position: absolute;
            left: 0px;
            top: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none;
            overflow: visible;
            height: 100%;
            width: 35px;
        }
        
        /* Contenedor de botones X para transformaciones (a la derecha) */
        .transformation-ignore-buttons-container {
            position: absolute;
            right: 0px;
            top: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none;
            overflow: visible;
            height: 100%;
            width: 35px;
        }
        
        /* Botón de limpiar cuadro de feedback */
        .clear-feedback-btn {
            position: absolute;
            bottom: 5px;
            right: 5px;
            padding: 2px 6px;
            font-size: 10px;
            opacity: 0.6;
            z-index: 101;
        }
        
        .clear-feedback-btn:hover {
            opacity: 1;
        }

        .correction-add-buttons-container {
            position: absolute;
            left: 38px;
            top: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none;
            overflow: visible;
            height: 100%;
            width: 35px;
        }

        /* Botones de ignorar corrección (panel izquierdo - a la izquierda) */
        .correction-ignore-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: auto;
            min-height: 18px;
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            cursor: pointer;
            pointer-events: all;
            opacity: 0.7;
            transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease;
            color: white;
            font-size: 11px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
            margin: 0;
            padding: 0;
            position: absolute;
            left: 2px;
            will-change: opacity, display;
        }
        
        /* Botones de ignorar transformación (panel derecho - a la derecha) */
        .transformation-ignore-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: auto;
            min-height: 18px;
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            cursor: pointer;
            pointer-events: all;
            opacity: 0.7;
            transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease;
            color: white;
            font-size: 11px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
            margin: 0;
            padding: 0;
            position: absolute;
            right: 2px;
            will-change: opacity, display;
        }

        .correction-ignore-btn[style*="display: none"],
        .transformation-ignore-btn[style*="display: none"] {
            pointer-events: none;
            visibility: hidden;
        }

        .correction-ignore-btn:hover,
        .transformation-ignore-btn:hover {
            opacity: 1 !important;
            background: linear-gradient(135deg, #5a6268 0%, #4e555b 100%);
            transform: scale(1.1);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
        }

        .correction-ignore-btn:active {
            transform: scale(0.95);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .correction-ignore-btn i {
            font-size: 10px;
            pointer-events: none;
        }

        /* Botones de agregar al vocabulario */
        .correction-add-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: auto;
            min-height: 18px;
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            cursor: pointer;
            pointer-events: all;
            opacity: 0.7;
            transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease;
            color: white;
            font-size: 11px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
            margin: 0;
            padding: 0;
            position: absolute;
            left: 2px;
            will-change: opacity, display;
        }

        .correction-add-btn[style*="display: none"] {
            pointer-events: none;
            visibility: hidden;
        }

        .correction-add-btn:hover {
            opacity: 1 !important;
            background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
            transform: scale(1.1);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
        }

        .correction-add-btn:active {
            transform: scale(0.95);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .correction-add-btn i {
            font-size: 10px;
            pointer-events: none;
        }

        /* Modo oscuro para botones de corrección */
        [data-bs-theme="dark"] .correction-ignore-btn {
            background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        [data-bs-theme="dark"] .correction-ignore-btn:hover {
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
        }

        [data-bs-theme="dark"] .correction-add-btn {
            background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        [data-bs-theme="dark"] .correction-add-btn:hover {
            background: linear-gradient(135deg, #0a58ca 0%, #084298 100%);
        }

        /* Modo compacto para botones de corrección */
        body.compact-mode .correction-ignore-btn,
        body.compact-mode .correction-add-btn {
            width: 24px;
            min-height: 16px;
            font-size: 10px;
        }

        body.compact-mode .correction-ignore-btn i,
        body.compact-mode .correction-add-btn i {
            font-size: 9px;
        }

        /* Estilos para la lista de plantillas. */
        #templateList .list-group-item {
            transition: background-color 0.2s;
        }

        #templateList .template-text {
            cursor: pointer; /* Indica que el texto de la plantilla es clickeable. */
            flex-grow: 1;
            margin-right: 1rem;
        }

        #templateList .template-actions {
            display: flex;
            gap: 0.5rem;
            opacity: 0; /* Los botones de acción están ocultos por defecto. */
            transition: opacity 0.2s;
        }

        /* Muestra los botones de acción (editar, borrar) al pasar el ratón sobre un elemento de la lista. */
        #templateList .list-group-item:hover .template-actions {
            opacity: 1;
        }

        /* --- MODO COMPACTO --- */
        /* Reduce el padding, tamaño de fuentes y botones para una interfaz más densa. */
        body.compact-mode .card-body { padding: 0.8rem; }
        body.compact-mode h1 { font-size: 1.5rem; }
        body.compact-mode .form-check-label { font-size: 0.9rem; }
        body.compact-mode .btn, body.compact-mode .form-control {
            font-size: 0.85rem;
            padding: 0.25rem 0.5rem;
        }
        body.compact-mode #modalityFilters .btn {
            padding: 0.2rem 0.4rem;
            font-size: 0.8rem;
        }
        body.compact-mode .list-group-item {
            padding: 0.5rem 0.75rem;
            font-size: 0.9rem;
        }

        /* Mejora la visibilidad del texto seleccionado en modo oscuro. */
        [data-bs-theme="dark"] ::selection {
          background-color: #0d6efd; /* Azul primario de Bootstrap. */
          color: #ffffff;
        }

        /* --- RESALTADO DE CORRECCIONES --- */
        /* Overlay que se muestra brevemente para indicar que se ha hecho una corrección automática. */
        .highlight-overlay {
            position: absolute;
            pointer-events: none; /* El overlay no interfiere con los clics del ratón. */
            z-index: 20;
            border: 2px solid #28a745; /* Borde verde. */
            border-radius: 6px;
            box-shadow: 0 0 12px rgba(40,167,69,0.6);
            animation: fadeout 1.2s ease forwards; /* Animación para desvanecerse. */
        }

        /* --- RESALTADO DE PALABRAS PENDIENTES DE CONFIRMACIÓN --- */
        /* Clase para resaltar palabras que requieren aceptar/ignorar (modo claro) */
        .palabra-pendiente-highlight {
            background-color: #fff3cd !important; /* Amarillo claro */
            color: #856404 !important;
            font-weight: 600 !important;
            padding: 2px 4px;
            border-radius: 3px;
            animation: pulseHighlight 1.5s ease-in-out infinite;
        }

        /* Modo oscuro para palabras pendientes */
        [data-bs-theme="dark"] .palabra-pendiente-highlight {
            background-color: #664d03 !important; /* Amarillo oscuro */
            color: #fff3cd !important;
        }

        /* Animación de pulsación para llamar la atención */
        @keyframes pulseHighlight {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

        /* Animación keyframes para el desvanecimiento del overlay. */
        @keyframes fadeout {
            0% { opacity: 1; }
            90% { opacity: 1; }
            100% { opacity: 0; transform: scale(1.02); }
        }

        #exportSection {
            margin-top: 12px;
        }

        /* --- ESTILOS PARA EL MENÚ DE CÁLCULOS --- */
        /* Asegura que el dropdown se vea consistente con otros elementos */
        #analysisToolsContainer .dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        #analysisToolsContainer .dropdown-menu {
            min-width: 200px;
        }

        #analysisToolsContainer .dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            transition: background-color 0.2s;
        }

        #analysisToolsContainer .dropdown-item:hover {
            background-color: rgba(13, 110, 253, 0.1);
        }

        #analysisToolsContainer .dropdown-item i {
            width: 1.2rem;
            text-align: center;
        }

        /* Estilos en modo compacto para los cálculos */
        body.compact-mode #analysisToolsContainer .dropdown-toggle {
            font-size: 0.8rem;
            padding: 0.2rem 0.4rem;
        }

        body.compact-mode #analysisToolsContainer .dropdown-item {
            font-size: 0.85rem;
            padding: 0.4rem 0.8rem;
        }

        /* --- ESTILOS PARA BARRA DE VOLUMEN EN BOTÓN DE DICTADO --- */
        #speechBtn {
            z-index: 1;
            overflow: hidden;
        }

        #speechBtn .btn-content {
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .volume-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 0%;
            width: 100%;
            background: linear-gradient(to top, 
                rgba(25, 135, 84, 0.7) 0%,      /* Verde más intenso */
                rgba(25, 135, 84, 0.6) 25%,
                rgba(255, 193, 7, 0.65) 45%,     /* Amarillo vibrante */
                rgba(255, 193, 7, 0.7) 55%,
                rgba(220, 53, 69, 0.65) 75%,     /* Rojo intenso */
                rgba(220, 53, 69, 0.8) 100%
            );
            transition: height 0.08s ease-out;
            z-index: 1;
            pointer-events: none;
            opacity: 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        .volume-bar.active {
            opacity: 1;
        }

        /* Efecto de brillo cuando hay volumen alto */
        .volume-bar.active[style*="height: 7"],
        .volume-bar.active[style*="height: 8"],
        .volume-bar.active[style*="height: 9"] {
            box-shadow: 
                0 -2px 10px rgba(0, 0, 0, 0.15),
                inset 0 -1px 3px rgba(255, 255, 255, 0.3);
        }

        /* Animación de pulso mejorada cuando está grabando pero sin volumen */
        .volume-bar.recording {
            animation: pulseImproved 1.8s ease-in-out infinite;
            background: linear-gradient(to top, 
                rgba(25, 135, 84, 0.4) 0%,
                rgba(25, 135, 84, 0.6) 50%,
                rgba(25, 135, 84, 0.3) 100%
            );
        }

        @keyframes pulseImproved {
            0%, 100% {
                height: 5%;
                opacity: 0.4;
            }
            50% {
                height: 12%;
                opacity: 0.7;
            }
        }

        /* Añadir un brillo sutil al texto del botón cuando está activo */
        #speechBtn.btn-warning .btn-content {
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        /* Estilos en modo oscuro - colores más vibrantes */
        [data-bs-theme="dark"] .volume-bar {
            background: linear-gradient(to top, 
                rgba(40, 167, 69, 0.85) 0%,      /* Verde brillante */
                rgba(40, 167, 69, 0.75) 25%,
                rgba(255, 193, 7, 0.8) 45%,      /* Amarillo más visible */
                rgba(255, 193, 7, 0.85) 55%,
                rgba(220, 53, 69, 0.8) 75%,      /* Rojo vibrante */
                rgba(220, 53, 69, 0.95) 100%
            );
            box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
            border-top: 1px solid rgba(255, 255, 255, 0.15);
        }

        [data-bs-theme="dark"] .volume-bar.active[style*="height: 7"],
        [data-bs-theme="dark"] .volume-bar.active[style*="height: 8"],
        [data-bs-theme="dark"] .volume-bar.active[style*="height: 9"] {
            box-shadow: 
                0 -2px 15px rgba(0, 0, 0, 0.4),
                inset 0 -1px 5px rgba(255, 255, 255, 0.25),
                0 0 10px rgba(255, 193, 7, 0.3);
        }

        [data-bs-theme="dark"] .volume-bar.recording {
            background: linear-gradient(to top, 
                rgba(40, 167, 69, 0.5) 0%,
                rgba(40, 167, 69, 0.75) 50%,
                rgba(40, 167, 69, 0.4) 100%
            );
        }

        /* Efecto de resplandor adicional para niveles muy altos */
        @keyframes highVolumeGlow {
            0%, 100% {
                box-shadow: 
                    0 -2px 15px rgba(0, 0, 0, 0.4),
                    inset 0 -1px 5px rgba(255, 255, 255, 0.25),
                    0 0 15px rgba(220, 53, 69, 0.5);
            }
            50% {
                box-shadow: 
                    0 -2px 15px rgba(0, 0, 0, 0.4),
                    inset 0 -1px 5px rgba(255, 255, 255, 0.25),
                    0 0 25px rgba(220, 53, 69, 0.7);
            }
        }

        /* ========================================
           ESTILOS MEJORADOS PARA AUTENTICACIÓN
           ======================================== */
        
        /* Animación de entrada para el contenedor de auth */
        #auth-container {
            animation: fadeInUp 0.6s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Glassmorphism para la tarjeta de autenticación */
        .auth-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .auth-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
        }

        [data-bs-theme="dark"] .auth-card {
            background: rgba(33, 37, 41, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Icono animado en el header */
        .auth-icon {
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        /* Pills mejoradas para las pestañas */
        .nav-pills .nav-link {
            border-radius: 10px;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 12px 20px;
        }

        .nav-pills .nav-link:not(.active):hover {
            background-color: rgba(13, 110, 253, 0.1);
            transform: translateY(-2px);
        }

        .nav-pills .nav-link.active {
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
        }

        /* Input groups mejorados */
        .input-group {
            transition: all 0.3s ease;
        }

        .input-group:focus-within {
            transform: translateY(-2px);
        }

        .input-group-text {
            background-color: rgba(13, 110, 253, 0.1);
            border: 1px solid #dee2e6;
            transition: all 0.3s ease;
        }

        .input-group:focus-within .input-group-text {
            background-color: rgba(13, 110, 253, 0.2);
            border-color: #86b7fe;
            color: #0d6efd;
        }

        [data-bs-theme="dark"] .input-group-text {
            background-color: rgba(13, 110, 253, 0.15);
            border-color: rgba(255, 255, 255, 0.1);
        }

        /* Inputs con animación */
        .form-control {
            transition: all 0.3s ease;
            border-radius: 8px;
        }

        .form-control:focus {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
        }

        /* Botón de mostrar/ocultar contraseña */
        .toggle-password {
            transition: all 0.3s ease;
        }

        .toggle-password:hover {
            background-color: rgba(13, 110, 253, 0.1);
        }

        /* Indicador de fuerza de contraseña */
        .password-strength {
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .strength-bar {
            transition: all 0.4s ease;
            border-radius: 3px;
        }

        .strength-weak { background-color: #dc3545; width: 33%; }
        .strength-medium { background-color: #ffc107; width: 66%; }
        .strength-strong { background-color: #28a745; width: 100%; }

        .strength-text.weak { color: #dc3545; }
        .strength-text.medium { color: #ffc107; }
        .strength-text.strong { color: #28a745; }

        /* Feedback mejorado con animaciones */
        #auth-feedback {
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        #auth-feedback.alert {
            border-radius: 12px;
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* Botones mejorados */
        .btn {
            border-radius: 10px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .btn:active {
            transform: translateY(0);
        }

        /* Loading spinner mejorado */
        .fa-spinner {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Toast notifications modernas */
        .toast-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            min-width: 300px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            padding: 16px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            animation: toastSlideIn 0.3s ease;
        }

        @keyframes toastSlideIn {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .toast-notification.success { border-left: 4px solid #28a745; }
        .toast-notification.error { border-left: 4px solid #dc3545; }
        .toast-notification.info { border-left: 4px solid #0dcaf0; }

        [data-bs-theme="dark"] .toast-notification {
            background: #212529;
            color: #fff;
        }

        /* Modal mejorado */
        .modal-content {
            border-radius: 16px;
            border: none;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 20px 24px;
        }

        [data-bs-theme="dark"] .modal-content {
            background-color: #212529;
        }

        /* Validación visual mejorada */
        .was-validated .form-control:valid {
            border-color: #28a745;
            padding-right: calc(1.5em + 0.75rem);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }

        .was-validated .form-control:invalid {
            border-color: #dc3545;
        }

        /* Transición suave entre paneles */
        .tab-pane {
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* --- BOTONES DE LÍNEA PARA COPIAR A CONCLUSIÓN --- */
        #textareaWrapper {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .line-buttons-container {
            position: absolute;
            left: 28px; /* A la derecha del contenedor de botones de borrar */
            top: 0;
            pointer-events: none;
            z-index: 100; /* Por encima del textarea (z-index: 1) */
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none; /* Sin transición para mejor rendimiento */
            overflow: visible; /* CAMBIADO: Los botones deben verse fuera del contenedor */
            height: 100%; /* Coincide con altura del textarea */
            width: 24px; /* Ancho fijo para los botones */
        }

        /* Contenedor de botones de borrar (a la izquierda de los de copiar) */
        .delete-buttons-container {
            position: absolute;
            left: 0px; /* En el borde izquierdo del textarea wrapper */
            top: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none;
            overflow: visible;
            height: 100%;
            width: 26px;
        }

        /* Contenedor de botones de subir línea */
        .move-up-buttons-container {
            position: absolute;
            left: 54px; /* A la derecha del contenedor de copiar */
            top: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none;
            overflow: visible;
            height: 100%;
            width: 20px;
        }

        /* Contenedor de botones de bajar línea */
        .move-down-buttons-container {
            position: absolute;
            left: 76px; /* A la derecha del contenedor de subir */
            top: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none;
            overflow: visible;
            height: 100%;
            width: 20px;
        }

        /* Botones de borrar */
        .delete-line-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: auto;
            min-height: 18px;
            background: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            cursor: pointer;
            pointer-events: all;
            opacity: 0.7;
            transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease;
            color: white;
            font-size: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
            margin: 0;
            padding: 0;
            position: absolute;
            left: 2px;
            will-change: opacity, display;
        }

        .delete-line-btn[style*="display: none"] {
            pointer-events: none;
            visibility: hidden;
        }

        .delete-line-btn:hover {
            opacity: 1 !important;
            background: linear-gradient(135deg, #a71d2a 0%, #721c24 100%);
            transform: scale(1.1);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
        }

        .delete-line-btn:active {
            transform: scale(0.95);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .delete-line-btn i {
            font-size: 10px;
            pointer-events: none;
        }

        /* Modo oscuro para botones de borrar */
        [data-bs-theme="dark"] .delete-line-btn {
            background: linear-gradient(135deg, #c82333 0%, #a71d2a 100%);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        [data-bs-theme="dark"] .delete-line-btn:hover {
            background: linear-gradient(135deg, #a71d2a 0%, #721c24 100%);
        }

        /* Modo compacto para botones de borrar */
        body.compact-mode .delete-line-btn {
            width: 24px;
            min-height: 16px;
            font-size: 10px;
        }

        body.compact-mode .delete-line-btn i {
            font-size: 9px;
        }

        .line-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: auto; /* Se ajustará dinámicamente por JS */
            min-height: 18px;
            background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            cursor: pointer;
            pointer-events: all;
            opacity: 0.7; /* CAMBIADO: Visible por defecto con 70% opacidad */
            transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease;
            color: white;
            font-size: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
            margin: 0;
            padding: 0;
            position: absolute; /* Posicionamiento absoluto individual */
            left: 2px; /* Pequeño margen desde el borde izquierdo */
            /* Transición suave para visibilidad */
            will-change: opacity, display;
        }

        /* Botón oculto (fuera del área visible) - JS establece esto */
        .line-action-btn[style*="display: none"] {
            pointer-events: none;
            visibility: hidden;
        }

        /* Hover individual del botón - mayor opacidad */
        .line-action-btn:hover {
            opacity: 1 !important;
            background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
            transform: scale(1.1);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
        }

        .line-action-btn:active {
            transform: scale(0.95);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .line-action-btn i {
            font-size: 10px;
            pointer-events: none;
        }

        /* Ajuste para modo oscuro */
        [data-bs-theme="dark"] .line-action-btn {
            background: linear-gradient(135deg, #198754 0%, #146c43 100%);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        [data-bs-theme="dark"] .line-action-btn:hover {
            background: linear-gradient(135deg, #146c43 0%, #0d5132 100%);
        }

        /* Ajuste para modo compacto */
        body.compact-mode .line-action-btn {
            width: 24px;
            min-height: 16px;
            font-size: 10px;
        }

        body.compact-mode .line-action-btn i {
            font-size: 9px;
        }

        /* Botones de subir/bajar línea */
        .move-line-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: auto;
            min-height: 18px;
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            cursor: pointer;
            pointer-events: all;
            opacity: 0.6;
            transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease;
            color: white;
            font-size: 9px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
            margin: 0;
            padding: 0;
            position: absolute;
            left: 1px;
            will-change: opacity, display;
        }

        .move-line-btn[style*="display: none"] {
            pointer-events: none;
            visibility: hidden;
        }

        .move-line-btn:hover {
            opacity: 1 !important;
            background: linear-gradient(135deg, #495057 0%, #343a40 100%);
            transform: scale(1.1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        }

        .move-line-btn:active {
            transform: scale(0.95);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .move-line-btn i {
            font-size: 8px;
            pointer-events: none;
        }

        .move-line-btn.move-up-btn {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        }

        .move-line-btn.move-up-btn:hover {
            background: linear-gradient(135deg, #138496 0%, #0c6775 100%);
        }

        .move-line-btn.move-down-btn {
            background: linear-gradient(135deg, #fd7e14 0%, #dc6600 100%);
        }

        .move-line-btn.move-down-btn:hover {
            background: linear-gradient(135deg, #dc6600 0%, #b85400 100%);
        }

        /* Modo oscuro para botones de mover */
        [data-bs-theme="dark"] .move-line-btn.move-up-btn {
            background: linear-gradient(135deg, #138496 0%, #0c6775 100%);
        }

        [data-bs-theme="dark"] .move-line-btn.move-down-btn {
            background: linear-gradient(135deg, #dc6600 0%, #b85400 100%);
        }

        /* Modo compacto para botones de mover */
        body.compact-mode .move-line-btn {
            width: 16px;
            min-height: 16px;
            font-size: 8px;
        }

        body.compact-mode .move-line-btn i {
            font-size: 7px;
        }

        /* --- COLAPSO DE PLANTILLAS --- */
        /* Transiciones suaves para el cambio de tamaño de columnas */
        #dictationColumn, #templatesColumn {
            transition: all 0.3s ease-in-out;
        }

        /* Etiqueta vertical "PLANTILLAS" - oculta por defecto */
        .collapsed-label {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-90deg);
            font-size: 16px;
            font-weight: bold;
            color: #0d6efd;
            letter-spacing: 3px;
            white-space: nowrap;
            pointer-events: none;
            z-index: 10;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* Estado colapsado de plantillas */
        #templatesColumn.collapsed {
            max-width: 60px !important;
            flex: 0 0 60px;
        }

        #templatesColumn.collapsed .card {
            position: relative;
            background: linear-gradient(135deg, #e7f3ff 0%, #cfe2ff 100%);
            border: 2px solid #0d6efd;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #templatesColumn.collapsed .card:hover {
            background: linear-gradient(135deg, #cfe2ff 0%, #b6d4fe 100%);
            border-color: #0a58ca;
            box-shadow: 0 0 20px rgba(13, 110, 253, 0.4);
        }

        #templatesColumn.collapsed .collapsed-label {
            display: block;
        }

        /* Ocultar TODOS los elementos excepto el botón toggle y la etiqueta colapsada */
        #templatesColumn.collapsed .card-body > * {
            display: none !important;
        }

        #templatesColumn.collapsed .card-body > .d-flex {
            display: flex !important;
            margin-bottom: 0 !important;
            justify-content: center !important;
            position: relative;
            z-index: 20;
        }

        #templatesColumn.collapsed .d-flex > * {
            display: none !important;
        }

        #templatesColumn.collapsed #toggleTemplatesBtn {
            display: block !important;
        }

        #templatesColumn.collapsed .collapsed-label {
            display: block !important;
        }

        /* Columna de dictado expandida cuando plantillas está colapsada */
        #dictationColumn.expanded {
            max-width: 100% !important;
            flex: 0 0 calc(100% - 60px);
        }

        /* Botón de toggle con rotación del icono y mejor visibilidad */
        #toggleTemplatesBtn {
            transition: all 0.3s ease-in-out;
            position: relative;
            z-index: 20;
        }

        #toggleTemplatesBtn i {
            transition: transform 0.3s ease-in-out;
        }

        #templatesColumn.collapsed #toggleTemplatesBtn {
            background-color: rgba(13, 110, 253, 0.9);
            color: white;
            border-color: #0d6efd;
            box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4);
            position: absolute;
            top: 10px;
            right: 5px;
        }

        #templatesColumn.collapsed #toggleTemplatesBtn:hover {
            background-color: #0a58ca;
            border-color: #0a58ca;
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.6);
        }

        #templatesColumn.collapsed #toggleTemplatesBtn i {
            transform: rotate(180deg);
        }

        /* Ajuste del card en estado colapsado */
        #templatesColumn.collapsed .card {
            overflow: hidden;
        }

        #templatesColumn.collapsed .card-body {
            padding: 0.5rem;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* Modo oscuro - ajustes para plantillas colapsadas */
        [data-bs-theme="dark"] #templatesColumn.collapsed .card {
            background: linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 100%);
            border-color: #6ea8fe;
        }

        [data-bs-theme="dark"] #templatesColumn.collapsed .card:hover {
            background: linear-gradient(135deg, #2a4a6f 0%, #3a5a8f 100%);
            border-color: #9ec5fe;
        }

        [data-bs-theme="dark"] .collapsed-label {
            color: #9ec5fe;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        [data-bs-theme="dark"] #templatesColumn.collapsed #toggleTemplatesBtn {
            background-color: rgba(110, 168, 254, 0.9);
            border-color: #6ea8fe;
        }

        [data-bs-theme="dark"] #templatesColumn.collapsed #toggleTemplatesBtn:hover {
            background-color: #9ec5fe;
            border-color: #9ec5fe;
        }

        /* Estilo para área de carga de archivos con borde punteado */
        .border-dashed {
            border: 2px dashed #dee2e6 !important;
            border-radius: 0.5rem;
            transition: border-color 0.3s, background-color 0.3s;
        }

        .border-dashed:hover {
            border-color: #198754 !important;
            background-color: rgba(25, 135, 84, 0.05);
        }

        [data-bs-theme="dark"] .border-dashed {
            border-color: #495057 !important;
        }

        [data-bs-theme="dark"] .border-dashed:hover {
            border-color: #198754 !important;
            background-color: rgba(25, 135, 84, 0.1);
        }