/* 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: vertical; /* Permite al usuario alargar/acortar verticalmente */
            position: relative;
            z-index: 1; /* Contexto de apilamiento base */
            flex: 1; /* Ocupa el espacio restante en el flex container */
            min-width: 0; /* Permite que se encoja correctamente */
            min-height: 200px; /* Altura mínima para no colapsar demasiado */
            overflow-y: auto; /* Necesario para que el handle de resize funcione */
            transition: background-color 0.3s ease; /* Transición suave para el cambio de color */
        }

        /* Efecto visual cuando el micrófono está activo (grabando) */
        #dictationBox.recording {
            background-color: rgba(255, 193, 7, 0.15) !important; /* Amarillo suave (warning) */
        }

        /* Efecto en tema oscuro - más visible pero suave */
        [data-bs-theme="dark"] #dictationBox.recording {
            background-color: rgba(255, 193, 7, 0.18) !important;
        }

        /* Efecto en tema auto (depende del sistema) */
        @media (prefers-color-scheme: dark) {
            [data-bs-theme="auto"] #dictationBox.recording {
                background-color: rgba(255, 193, 7, 0.18) !important;
            }
        }

        @media (prefers-color-scheme: light) {
            [data-bs-theme="auto"] #dictationBox.recording {
                background-color: rgba(255, 193, 7, 0.15) !important;
            }
        }

        /* ═══════════════════════════════════════════════════════════════════════════
           INDICADOR DE PROCESAMIENTO DE AUDIO (Whisper/Groq)
           Pastilla flotante sobre el textarea que indica que se está transcribiendo
           ═══════════════════════════════════════════════════════════════════════════ */
        .whisper-processing-indicator {
            position: absolute;
            bottom: 18px;
            right: 16px;
            z-index: 10;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.02em;
            color: rgba(255, 255, 255, 0.92);
            background: rgba(13, 110, 253, 0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 2px 12px rgba(13, 110, 253, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
            pointer-events: none;
            animation: whisperIndicatorIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            transition: opacity 0.2s ease;
        }

        .whisper-processing-indicator.d-none {
            display: none !important;
        }

        .whisper-processing-indicator i {
            font-size: 0.85rem;
            opacity: 0.9;
        }

        /* Animación de puntos suspensivos tipo chat */
        .processing-dots::after {
            content: '';
            animation: processingDots 1.4s steps(4, end) infinite;
        }

        @keyframes processingDots {
            0%   { content: ''; }
            25%  { content: '.'; }
            50%  { content: '..'; }
            75%  { content: '...'; }
            100% { content: ''; }
        }

        /* Entrada suave */
        @keyframes whisperIndicatorIn {
            from {
                opacity: 0;
                transform: translateY(6px) scale(0.92);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Salida suave */
        @keyframes whisperIndicatorOut {
            from {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            to {
                opacity: 0;
                transform: translateY(-4px) scale(0.95);
            }
        }

        /* Tema oscuro (default) - ajustes sutiles */
        [data-bs-theme="dark"] .whisper-processing-indicator {
            background: rgba(13, 110, 253, 0.8);
            box-shadow: 0 2px 16px rgba(13, 110, 253, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
        }

        /* Temas claros - contraste invertido */
        [data-theme^="light-"] .whisper-processing-indicator {
            color: #ffffff;
            background: rgba(37, 99, 235, 0.88);
            box-shadow: 0 2px 12px rgba(37, 99, 235, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
        }

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

        #feedbackBox {
            position: relative;
            z-index: 1;
            padding-left: 8px !important; /* Texto pegado al borde izquierdo */
            text-align: left;
            resize: vertical; /* El usuario puede redimensionar manualmente */
            overflow-y: auto;
        }

        /* Cuando hay correcciones activas, agregar padding para botones de corrección */
        #feedbackBox.has-corrections {
            padding-left: 75px !important;
        }

        /* Controles del header - transición suave */
        #headerControlsGroup {
            transition: opacity 0.2s ease;
        }

        /* 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 */
        /* Botones de corrección compactos por defecto */
        .correction-ignore-btn,
        .correction-add-btn {
            width: 24px;
            min-height: 16px;
            font-size: 10px;
        }

        .correction-ignore-btn i,
        .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 (Ahora es el estilo por defecto) --- */
        /* Estos estilos ahora se aplican siempre, sin necesidad de clase */
        .card-body { padding: 0.8rem; }
        h1 { font-size: 1.5rem; }
        .form-check-label { font-size: 0.9rem; }
        .btn, .form-control {
            font-size: 0.85rem;
            padding: 0.25rem 0.5rem;
        }
        #modalityFilters .btn {
            padding: 0.2rem 0.4rem;
            font-size: 0.8rem;
        }
        .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); }
        }

        /* --- RESALTADO DE CAMBIOS DE GEMINI (Ajustar Informe) --- */
        /* Backdrop que muestra SOLO el resaltado (sin texto visible) detrás del textarea */
        .gemini-changes-backdrop {
            overflow-y: auto;
            overflow-x: hidden;
            color: transparent !important; /* Texto invisible */
            caret-color: transparent !important;
        }
        
        /* Resaltado de palabras cambiadas por Gemini - SOLO fondo visible, texto transparente */
        .gemini-change-highlight {
            background-color: rgba(255, 235, 59, 0.6) !important; /* Amarillo semi-transparente */
            color: transparent !important; /* Texto invisible - se ve el del textarea encima */
            padding: 2px 0;
            border-radius: 3px;
            animation: geminiPulse 2s ease-in-out infinite;
        }
        
        /* Modo oscuro para resaltado de Gemini */
        [data-bs-theme="dark"] .gemini-change-highlight {
            background-color: rgba(255, 193, 7, 0.5) !important; /* Amarillo más visible en oscuro */
            color: transparent !important;
        }
        
        /* Animación de pulsación suave para llamar la atención */
        @keyframes geminiPulse {
            0%, 100% {
                opacity: 1;
                box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.7);
            }
            50% {
                opacity: 0.7;
                box-shadow: 0 0 8px 2px rgba(255, 235, 59, 0.5);
            }
        }

        /* --- RESALTADO DE TEXTO TRANSCRITO (muestra dónde se insertó el dictado) --- */
        /* Backdrop que muestra SOLO el resaltado del texto recién transcrito */
        .transcription-highlight-backdrop {
            overflow-y: auto;
            overflow-x: hidden;
            color: transparent !important;
            caret-color: transparent !important;
        }
        
        /* Resaltado del texto transcrito - estilo marcador/highlight con franja debajo */
        .transcription-highlight {
            background: linear-gradient(to top, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.3) 18%, transparent 18%, transparent 100%) !important; /* Franja azul (color de selección default del navegador) */
            color: transparent !important;
            padding: 2px 0;
            border-radius: 0;
        }
        
        /* Modo oscuro para resaltado de transcripción */
        [data-bs-theme="dark"] .transcription-highlight {
            background: linear-gradient(to top, #0d6efd 0%, #0d6efd 18%, transparent 18%, transparent 100%) !important; /* Franja azul Bootstrap - idéntico a ::selection */
            color: transparent !important;
        }

        #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 para los cálculos (compactos por defecto) */
        #analysisToolsContainer .dropdown-toggle {
            font-size: 0.8rem;
            padding: 0.2rem 0.4rem;
        }

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

        /* --- MEDIDOR DE NIVEL EN BOTÓN DE DICTADO --- */
        #speechBtn {
            z-index: 1;
            overflow: hidden;
            min-width: 140px; /* Ancho doble en modo normal */
        }

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

        .audio-level-meter {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: flex-end;
            justify-content: space-evenly;
            padding: 7px 12px;
            gap: 3px;
            z-index: 1;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.12s ease;
            contain: layout paint;
        }

        .audio-level-meter.active {
            opacity: 1;
        }

        #speechBtn.btn-sm .audio-level-meter {
            padding: 4px 12px;
        }

        .audio-level-bar {
            flex: 0 0 5px;
            width: 5px;
            opacity: 0;
            transform: scaleY(0.18);
            transform-origin: bottom center;
            border-radius: 999px;
            transition: opacity 0.1s ease, transform 0.1s ease;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        }

        .audio-level-bar.is-visible {
            opacity: 0.9;
            transform: scaleY(1);
        }

        .audio-level-bar-1 {
            height: 22%;
            background: rgba(34, 197, 94, 0.92);
        }

        .audio-level-bar-2 {
            height: 30%;
            background: rgba(34, 197, 94, 0.92);
        }

        .audio-level-bar-3 {
            height: 38%;
            background: rgba(34, 197, 94, 0.92);
        }

        .audio-level-bar-4 {
            height: 46%;
            background: rgba(22, 163, 74, 0.94);
        }

        .audio-level-bar-5 {
            height: 54%;
            background: rgba(22, 163, 74, 0.95);
        }

        .audio-level-bar-6 {
            height: 64%;
            background: rgba(21, 128, 61, 0.96);
        }

        .audio-level-bar-7 {
            height: 74%;
            background: rgba(239, 68, 68, 0.9);
        }

        .audio-level-bar-8 {
            height: 86%;
            background: rgba(220, 38, 38, 0.95);
        }

        /* 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);
        }


        [data-bs-theme="dark"] .audio-level-bar {
            box-shadow: 0 1px 8px rgba(0, 0, 0, 0.34);
        }

        /* ========================================
           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;
            }
        }

        /* --- PANEL DE BOTONES DE LÍNEA (COLAPSABLE) --- */
        #textareaWrapper {
            position: relative;
            display: flex;
            width: 100%;
            gap: 0;
            align-items: stretch; /* Panel y textarea comparten la misma altura */
        }

        /* Panel contenedor - estructura VERTICAL: barra arriba, botones abajo */
        .line-buttons-panel {
            position: relative;
            display: flex;
            flex-direction: column; /* Vertical: barra arriba, contenido abajo */
            width: 90px; /* Ancho para 4 columnas de botones */
            min-width: 90px;
            align-self: stretch; /* Misma altura que el textarea */
            transition: width 0.3s ease, min-width 0.3s ease;
            overflow: hidden;
            flex-shrink: 0; /* NUNCA se encoge horizontalmente */
        }

        /* Barra horizontal toggle en la parte superior */
        .toggle-line-buttons-bar {
            width: 100%;
            height: 22px;
            background: linear-gradient(180deg, #6c757d 0%, #5a6268 100%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px 4px 0 0;
            color: white;
            font-size: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.2s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            flex-shrink: 0;
        }

        .toggle-line-buttons-bar:hover {
            background: linear-gradient(180deg, #5a6268 0%, #495057 100%);
        }

        .toggle-line-buttons-bar i {
            font-size: 9px;
            transition: transform 0.3s ease;
        }

        .toggle-line-buttons-bar .toggle-label {
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        /* Contenedor de todos los botones (debajo de la barra) */
        .line-buttons-content {
            position: relative;
            flex: 1;
            display: flex;
            flex-direction: row; /* Los contenedores de botones lado a lado */
            width: 100%;
            height: calc(100% - 22px);
        }

        /* Estado colapsado del panel — ocultar completamente */
        .line-buttons-panel.collapsed {
            display: none !important;
        }

        /* Botón toggle de herramientas de línea (encima del textarea, extremo izquierdo) */
        .toggle-line-tools-btn {
            position: absolute;
            top: 0;
            left: 0;
            width: 90px; /* Mismo ancho que .line-buttons-panel */
            height: 22px;
            display: none; /* Solo visible cuando panel está colapsado */
            align-items: center;
            justify-content: center;
            gap: 5px;
            background: linear-gradient(135deg, #e7f3ff 0%, #cfe2ff 100%);
            border: 1px solid #0d6efd;
            border-radius: 4px 4px 0 0;
            color: #0d6efd;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.2s ease;
            padding: 0 10px;
            z-index: 5;
            user-select: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

        .toggle-line-tools-btn:hover {
            background: linear-gradient(135deg, #cfe2ff 0%, #b6d4fe 100%);
            border-color: #0a58ca;
            box-shadow: 0 2px 6px rgba(13, 110, 253, 0.35);
            color: #0a58ca;
        }

        .toggle-line-tools-btn i {
            font-size: 10px;
        }

        .toggle-line-tools-btn .toggle-line-tools-label {
            white-space: nowrap;
        }

        /* Cuando herramientas están visibles, botón con estilo activo */
        .toggle-line-tools-btn.active {
            background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
            color: white;
            border-color: #0d6efd;
        }

        .toggle-line-tools-btn.active:hover {
            background: linear-gradient(135deg, #0a58ca 0%, #084298 100%);
            box-shadow: 0 2px 6px rgba(13, 110, 253, 0.5);
        }

        /* Modo oscuro */
        [data-bs-theme="dark"] .toggle-line-tools-btn {
            background: linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 100%);
            border-color: #6ea8fe;
            color: #9ec5fe;
        }

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

        [data-bs-theme="dark"] .toggle-line-tools-btn.active {
            background: linear-gradient(135deg, #3a6ebd 0%, #2a5a9f 100%);
            color: white;
            border-color: #6ea8fe;
        }

        /* Modo oscuro para barra interna "Colapsar" del panel expandido */
        [data-bs-theme="dark"] .toggle-line-buttons-bar {
            background: linear-gradient(180deg, #495057 0%, #3d4246 100%);
            border-color: rgba(255, 255, 255, 0.15);
        }

        [data-bs-theme="dark"] .toggle-line-buttons-bar:hover {
            background: linear-gradient(180deg, #5a6268 0%, #495057 100%);
        }

        /* Textarea con margen superior para alinear con botones */
        #dictationBox {
            margin-top: 22px; /* Altura de la barra toggle */
            flex-shrink: 1; /* El textarea se encoge, NO el panel de botones */
            min-width: 0; /* Permite que se encoja correctamente */
        }

        /* --- CONTENEDORES DE BOTONES DE LÍNEA --- */
        .line-buttons-container {
            position: absolute;
            left: 22px; /* Después de delete */
            top: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none;
            overflow: visible;
            height: 100%;
            width: 22px;
        }

        /* Contenedor de botones de borrar */
        .delete-buttons-container {
            position: absolute;
            left: 0;
            top: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none;
            overflow: visible;
            height: 100%;
            width: 22px;
        }

        /* Contenedor de botones de subir línea */
        .move-up-buttons-container {
            position: absolute;
            left: 44px; /* Después de delete + copy */
            top: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none;
            overflow: visible;
            height: 100%;
            width: 22px;
        }

        /* Contenedor de botones de bajar línea */
        .move-down-buttons-container {
            position: absolute;
            left: 66px; /* Después de move-up */
            top: 0;
            pointer-events: none;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: none;
            overflow: visible;
            height: 100%;
            width: 22px;
        }

        /* Botones de borrar */
        .delete-line-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            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: 9px;
            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%);
        }

        .line-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            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: 9px;
            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%);
        }

        /* Botones de subir/bajar línea */
        .move-line-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            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: 8px;
            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%);
        }

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

        /* --- SCROLL INDEPENDIENTE DE PLANTILLAS --- */
        /* La card de plantillas se limita al viewport para que #templateList
           (que ya tiene flex-grow-1 overflow-auto) haga scroll interno */
        #templatesColumn > .card {
            max-height: calc(100vh - 70px);
            display: flex;
            flex-direction: column;
        }

        #templatesColumn > .card > .card-body {
            overflow: hidden;
            min-height: 0;
        }

        #templateList {
            min-height: 0;
        }



        /* Estado colapsado de plantillas — ocultar completamente */
        #templatesColumn.collapsed {
            max-width: 0 !important;
            flex: 0 0 0 !important;
            overflow: hidden;
            padding: 0 !important;
            margin: 0 !important;
            border: none;
            visibility: hidden;
        }

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

        /* Botón toggle de plantillas (encima del textarea, extremo derecho) */
        .toggle-templates-btn {
            position: absolute;
            top: 0;
            right: 0;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            background: linear-gradient(135deg, #e7f3ff 0%, #cfe2ff 100%);
            border: 1px solid #0d6efd;
            border-radius: 4px 4px 0 0;
            color: #0d6efd;
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.2s ease;
            padding: 0 10px;
            z-index: 5;
            user-select: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

        .toggle-templates-btn:hover {
            background: linear-gradient(135deg, #cfe2ff 0%, #b6d4fe 100%);
            border-color: #0a58ca;
            box-shadow: 0 2px 6px rgba(13, 110, 253, 0.35);
            color: #0a58ca;
        }

        .toggle-templates-btn i {
            font-size: 10px;
        }

        .toggle-templates-btn .toggle-templates-label {
            white-space: nowrap;
        }

        /* Cuando plantillas están visibles, botón con estilo activo */
        .toggle-templates-btn.active {
            background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
            color: white;
            border-color: #0d6efd;
        }

        .toggle-templates-btn.active:hover {
            background: linear-gradient(135deg, #0a58ca 0%, #084298 100%);
            box-shadow: 0 2px 6px rgba(13, 110, 253, 0.5);
        }

        /* Modo oscuro */
        [data-bs-theme="dark"] .toggle-templates-btn {
            background: linear-gradient(135deg, #1e3a5f 0%, #2a4a6f 100%);
            border-color: #6ea8fe;
            color: #9ec5fe;
        }

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

        [data-bs-theme="dark"] .toggle-templates-btn.active {
            background: linear-gradient(135deg, #3a6ebd 0%, #2a5a9f 100%);
            color: white;
            border-color: #6ea8fe;
        }



        /* 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);
        }

        /* ═══════════════════════════════════════════════════════════════════════════
           ALERTA VISUAL DE CORRECCIÓN PENDIENTE (SEMÁFORO)
           Efecto visual que indica al usuario que hay una acción pendiente
        ═══════════════════════════════════════════════════════════════════════════ */
        
        /* Animación de semáforo para feedbackBox - MODO CLARO */
        @keyframes vocabularyAlertLight {
            0% { 
                background-color: #fff3cd; /* Amarillo suave */
                box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.4);
            }
            25% { 
                background-color: #f8d7da; /* Rojo suave */
                box-shadow: 0 0 0 5px rgba(220, 53, 69, 0.3);
            }
            50% { 
                background-color: #fff3cd; /* Amarillo suave */
                box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.4);
            }
            75% { 
                background-color: #d1e7dd; /* Verde suave */
                box-shadow: 0 0 0 5px rgba(25, 135, 84, 0.3);
            }
            100% { 
                background-color: #ffffff; /* Volver a normal */
                box-shadow: none;
            }
        }
        
        /* Animación de semáforo para feedbackBox - MODO OSCURO */
        @keyframes vocabularyAlertDark {
            0% { 
                background-color: rgba(255, 193, 7, 0.25); /* Amarillo oscuro */
                box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3);
            }
            25% { 
                background-color: rgba(220, 53, 69, 0.25); /* Rojo oscuro */
                box-shadow: 0 0 0 5px rgba(220, 53, 69, 0.25);
            }
            50% { 
                background-color: rgba(255, 193, 7, 0.25); /* Amarillo oscuro */
                box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3);
            }
            75% { 
                background-color: rgba(25, 135, 84, 0.25); /* Verde oscuro */
                box-shadow: 0 0 0 5px rgba(25, 135, 84, 0.25);
            }
            100% { 
                background-color: var(--bs-body-bg); /* Volver a normal */
                box-shadow: none;
            }
        }
        
        /* Clase para activar la animación - Modo claro */
        .vocabulary-alert-animation {
            animation: vocabularyAlertLight 2s ease-in-out;
        }
        
        /* Clase para activar la animación - Modo oscuro */
        [data-bs-theme="dark"] .vocabulary-alert-animation {
            animation: vocabularyAlertDark 2s ease-in-out;
        }
        
        /* Pulso sutil para el borde del feedbackBox cuando hay corrección pendiente */
        .vocabulary-pending-border {
            border: 2px solid #ffc107 !important;
            transition: border-color 0.3s ease;
        }
        
        [data-bs-theme="dark"] .vocabulary-pending-border {
            border: 2px solid rgba(255, 193, 7, 0.6) !important;
        }

/* ═══════════════════════════════════════════════════════════════════════════
   TEMAS CLAROS MODERNOS - 5 Paletas (2024-2025)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   OPCIÓN 1: SLATE GRAY (Moderno - Estilo Tailwind)
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light-slate"] {
    --light-bg-primary: #f8fafc;      /* Slate 50 */
    --light-bg-secondary: #f1f5f9;    /* Slate 100 */
    --light-bg-tertiary: #e2e8f0;     /* Slate 200 */
    --light-text-primary: #0f172a;    /* Slate 900 - Contraste 15.52:1 ✅ AAA */
    --light-text-secondary: #475569;  /* Slate 600 - Contraste 7.51:1 ✅ AAA (era 500) */
    --light-text-muted: #64748b;      /* Slate 500 - Contraste 5.13:1 ✅ AA+ (era 400) */
    --light-border: #e2e8f0;          /* Slate 200 */
    --light-border-focus: #cbd5e1;    /* Slate 300 */
    --light-accent: #2563eb;          /* Blue 600 */
    --light-accent-hover: #1d4ed8;    /* Blue 700 */
}

/* ─────────────────────────────────────────────────────────────────────────────
   OPCIÓN 2: ZINC NEUTRAL (Estilo Apple/iOS)
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light-zinc"] {
    --light-bg-primary: #fafafa;      /* Zinc 50 */
    --light-bg-secondary: #f4f4f5;    /* Zinc 100 */
    --light-bg-tertiary: #e4e4e7;     /* Zinc 200 */
    --light-text-primary: #18181b;    /* Zinc 900 - Contraste 14.68:1 ✅ AAA */
    --light-text-secondary: #52525b;  /* Zinc 600 - Contraste 7.89:1 ✅ AAA (era 500) */
    --light-text-muted: #71717a;      /* Zinc 500 - Contraste 5.24:1 ✅ AA+ (era 400) */
    --light-border: #e4e4e7;          /* Zinc 200 */
    --light-border-focus: #d4d4d8;    /* Zinc 300 */
    --light-accent: #3b82f6;          /* Blue 500 */
    --light-accent-hover: #2563eb;    /* Blue 600 */
}

/* ─────────────────────────────────────────────────────────────────────────────
   OPCIÓN 3: STONE WARM (Cálido elegante)
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light-stone"] {
    --light-bg-primary: #fafaf9;      /* Stone 50 */
    --light-bg-secondary: #f5f5f4;    /* Stone 100 */
    --light-bg-tertiary: #e7e5e4;     /* Stone 200 */
    --light-text-primary: #1c1917;    /* Stone 900 - Contraste 14.41:1 ✅ AAA */
    --light-text-secondary: #57534e;  /* Stone 600 - Contraste 7.76:1 ✅ AAA (era 500) */
    --light-text-muted: #78716c;      /* Stone 500 - Contraste 5.09:1 ✅ AA+ (era 400) */
    --light-border: #e7e5e4;          /* Stone 200 */
    --light-border-focus: #d6d3d1;    /* Stone 300 */
    --light-accent: #0d9488;          /* Teal 600 */
    --light-accent-hover: #0f766e;    /* Teal 700 */
}

/* ─────────────────────────────────────────────────────────────────────────────
   OPCIÓN 4: SKY BLUE (Médico/Profesional)
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light-sky"] {
    --light-bg-primary: #f0f9ff;      /* Sky 50 */
    --light-bg-secondary: #e0f2fe;    /* Sky 100 */
    --light-bg-tertiary: #bae6fd;     /* Sky 200 */
    --light-text-primary: #0c4a6e;    /* Sky 900 - Contraste 9.87:1 ✅ AAA */
    --light-text-secondary: #075985;  /* Sky 800 - Contraste 7.82:1 ✅ AAA (era 700) */
    --light-text-muted: #0369a1;      /* Sky 700 - Contraste 6.04:1 ✅ AA+ (era 300 - CRÍTICO) */
    --light-border: #bae6fd;          /* Sky 200 */
    --light-border-focus: #7dd3fc;    /* Sky 300 */
    --light-accent: #0284c7;          /* Sky 600 */
    --light-accent-hover: #0369a1;    /* Sky 700 */
}

/* ─────────────────────────────────────────────────────────────────────────────
   OPCIÓN 5: MATERIAL DESIGN 3 (Google)
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light-material"] {
    --light-bg-primary: #fef7ff;      /* Surface */
    --light-bg-secondary: #f3edf7;    /* Surface Container */
    --light-bg-tertiary: #e8def8;     /* Surface Container High */
    --light-text-primary: #1d1b20;    /* On Surface - Contraste 14.89:1 ✅ AAA */
    --light-text-secondary: #1d1b20;  /* On Surface - Contraste 14.89:1 ✅ AAA (era Variant) */
    --light-text-muted: #49454f;      /* On Surface Variant - Contraste 8.24:1 ✅ AAA (era Outline) */
    --light-border: #cac4d0;          /* Outline Variant */
    --light-border-focus: #79747e;    /* Outline */
    --light-accent: #6750a4;          /* Primary */
    --light-accent-hover: #4f378b;    /* Primary darker */
}

/* ─────────────────────────────────────────────────────────────────────────────
   ESTILOS COMUNES PARA TODOS LOS TEMAS CLAROS
   ───────────────────────────────────────────────────────────────────────────── */

/* Aplicar estilos cuando hay un tema claro activo */
[data-theme^="light-"] body,
[data-theme^="light-"] {
    background-color: var(--light-bg-primary) !important;
}

[data-theme^="light-"] .container-fluid {
    background-color: var(--light-bg-primary);
}

/* Textarea de dictado */
[data-theme^="light-"] #dictationBox {
    background-color: #ffffff;
    color: var(--light-text-primary);
    border: 1px solid var(--light-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-weight: 450; /* Ligeramente más pesado para mejor legibilidad */
}

[data-theme^="light-"] #dictationBox:focus {
    border-color: var(--light-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

[data-theme^="light-"] #dictationBox::placeholder {
    color: var(--light-text-muted);
}

/* Textareas de feedback */
[data-theme^="light-"] #feedbackBox,
[data-theme^="light-"] #feedbackBoxTransformaciones {
    background-color: var(--light-bg-secondary);
    color: var(--light-text-primary);
    border: 1px solid var(--light-border);
}

/* Cards y paneles */
[data-theme^="light-"] .card {
    background-color: #ffffff;
    border: 1px solid var(--light-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme^="light-"] .card-body {
    background-color: transparent;
}

/* Botones primarios */
[data-theme^="light-"] .btn-primary {
    background-color: var(--light-accent);
    border-color: var(--light-accent);
}

[data-theme^="light-"] .btn-primary:hover {
    background-color: var(--light-accent-hover);
    border-color: var(--light-accent-hover);
}

/* Botones outline */
[data-theme^="light-"] .btn-outline-primary {
    color: var(--light-accent);
    border-color: var(--light-accent);
}

[data-theme^="light-"] .btn-outline-primary:hover {
    background-color: var(--light-accent);
    color: #ffffff;
}

[data-theme^="light-"] .btn-outline-secondary {
    color: var(--light-text-secondary);
    border-color: var(--light-border);
}

[data-theme^="light-"] .btn-outline-secondary:hover {
    background-color: var(--light-bg-secondary);
    color: var(--light-text-primary);
    border-color: var(--light-border-focus);
}

/* Dropdowns */
[data-theme^="light-"] .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid var(--light-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme^="light-"] .dropdown-item {
    color: var(--light-text-primary);
}

[data-theme^="light-"] .dropdown-item:hover {
    background-color: var(--light-bg-secondary);
    color: var(--light-text-primary);
}

/* Inputs y form controls */
[data-theme^="light-"] .form-control {
    background-color: #ffffff;
    color: var(--light-text-primary);
    border-color: var(--light-border);
}

[data-theme^="light-"] .form-control:focus {
    border-color: var(--light-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

[data-theme^="light-"] .form-control::placeholder {
    color: var(--light-text-muted);
}

/* Input groups */
[data-theme^="light-"] .input-group-text {
    background-color: var(--light-bg-secondary);
    border-color: var(--light-border);
    color: var(--light-text-secondary);
}

/* List groups */
[data-theme^="light-"] .list-group-item {
    background-color: #ffffff;
    border-color: var(--light-border);
    color: var(--light-text-primary);
}

[data-theme^="light-"] .list-group-item:hover {
    background-color: var(--light-bg-secondary);
}

[data-theme^="light-"] .list-group-item.active {
    background-color: var(--light-accent);
    border-color: var(--light-accent);
}

/* Modales */
[data-theme^="light-"] .modal-content {
    background-color: #ffffff;
    border: 1px solid var(--light-border);
}

[data-theme^="light-"] .modal-header {
    border-bottom-color: var(--light-border);
}

[data-theme^="light-"] .modal-footer {
    border-top-color: var(--light-border);
}

/* Tablas */
[data-theme^="light-"] .table {
    color: var(--light-text-primary);
}

[data-theme^="light-"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--light-bg-secondary);
}

[data-theme^="light-"] .table-hover > tbody > tr:hover {
    background-color: var(--light-bg-tertiary);
}

/* Alerts */
[data-theme^="light-"] .alert-info {
    background-color: var(--light-bg-secondary);
    border-color: var(--light-border);
    color: var(--light-text-primary);
}

/* Text utilities */
[data-theme^="light-"] .text-muted {
    color: var(--light-text-secondary) !important;
}

/* Headers */
[data-theme^="light-"] h1, 
[data-theme^="light-"] h2, 
[data-theme^="light-"] h3, 
[data-theme^="light-"] h4, 
[data-theme^="light-"] h5, 
[data-theme^="light-"] h6 {
    color: var(--light-text-primary);
    font-weight: 600; /* Más bold para mayor impacto visual */
}

/* Labels */
[data-theme^="light-"] .form-label {
    color: var(--light-text-primary);
    font-weight: 500; /* Peso medio para destacar */
}

[data-theme^="light-"] .form-check-label {
    color: var(--light-text-primary);
    font-weight: 450; /* Ligeramente más pesado */
}

/* Switches */
[data-theme^="light-"] .form-check-input {
    background-color: var(--light-border);
    border-color: var(--light-border-focus);
}

[data-theme^="light-"] .form-check-input:checked {
    background-color: var(--light-accent);
    border-color: var(--light-accent);
}

/* Scrollbars para temas claros */
[data-theme^="light-"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme^="light-"] ::-webkit-scrollbar-track {
    background: var(--light-bg-secondary);
}

[data-theme^="light-"] ::-webkit-scrollbar-thumb {
    background: var(--light-border-focus);
    border-radius: 4px;
}

[data-theme^="light-"] ::-webkit-scrollbar-thumb:hover {
    background: var(--light-text-muted);
}

/* Indicador de tema activo en el dropdown */
[data-theme^="light-"] .theme-option[data-theme="dark"],
[data-theme="dark"] .theme-option:not([data-theme="dark"]) {
    opacity: 0.7;
}

[data-theme^="light-"] .theme-option.active,
.theme-option.active {
    background-color: var(--bs-primary);
    color: white !important;
}

/* Barra de herramientas de línea en temas claros */
[data-theme^="light-"] .toggle-line-buttons-bar {
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
    color: var(--light-text-primary);
    border-color: var(--light-border);
}

[data-theme^="light-"] .toggle-line-buttons-bar:hover {
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
}

[data-bs-theme="light"] ::-webkit-scrollbar-track {
    background: var(--light-bg-secondary);
}

[data-bs-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--light-border-focus);
    border-radius: 4px;
}

[data-bs-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--light-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTILOS PARA USER EMAIL CLICKABLE
   ═══════════════════════════════════════════════════════════════════════════ */
.user-email-link {
    transition: color 0.2s ease;
}

.user-email-link:hover {
    color: var(--bs-primary) !important;
    text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTILOS PARA SELECTOR DE TEMA (DROPDOWN)
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-option {
    transition: all 0.2s ease;
}

.theme-option:hover {
    background-color: var(--bs-tertiary-bg) !important;
}

.theme-option.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.theme-option.active i {
    color: white !important;
}

/* Tema dropdown en modo claro */
[data-theme^="light-"] .theme-option.active {
    background-color: var(--light-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - ZOOM Y PANTALLAS MEDIANAS
   Protección para zoom aumentado en desktop (Cmd+ / Ctrl+) y tablets
   ═══════════════════════════════════════════════════════════════════════════ */

/* El row principal NUNCA debe hacer wrap en desktop - las columnas se encogen proporcionalmente */
main.container-fluid .row {
    flex-wrap: nowrap !important;
}

/* Protección para zoom en desktop: cuando el viewport efectivo baja de 1200px 
   (ej: pantalla 1440px con zoom 125% = 1152px efectivos) */
@media (max-width: 1199px) {
    /* Permitir que las columnas ocupen todo el ancho si no caben lado a lado */
    #dictationColumn {
        flex: 1 1 60% !important;
        min-width: 0; /* Permitir encogimiento proporcional con zoom */
        max-width: 100% !important;
    }
    
    #templatesColumn {
        flex: 1 1 35% !important;
        min-width: 60px !important; /* Mínimo = ancho colapsado */
        max-width: 100% !important;
    }
    
    /* Cuando plantillas está colapsada, asegurar dimensiones fijas */
    #templatesColumn.collapsed {
        flex: 0 0 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }
    
    /* Dictado expandido cuando plantillas colapsada */
    #dictationColumn.expanded {
        flex: 1 1 calc(100% - 70px) !important;
        max-width: calc(100% - 70px) !important;
    }
}

/* Tablets en modo portrait - SOLO dispositivos táctiles (no aplica a zoom en desktop) */
@media (max-width: 991px) and (pointer: coarse) {
    /* Las columnas ocupan 100% del ancho */
    #dictationColumn,
    #templatesColumn {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }
    
    /* Panel de líneas adaptado para tablet - mínimo 90px para 4 columnas de botones (88px) */
    .line-buttons-panel {
        width: 90px;
        min-width: 90px;
    }
    
    .line-buttons-panel.collapsed {
        width: 25px; /* Proporción ~1:2 con plantillas colapsado (50px) */
        min-width: 25px;
    }
    
    /* Panel de plantillas como overlay deslizante desde la derecha */
    #templatesColumn {
        position: fixed !important;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1040;
        width: 400px !important;
        max-width: 70vw !important;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: -2px 0 15px rgba(0,0,0,0.2);
        background: var(--bs-body-bg);
    }
    
    /* Cuando NO está colapsado (visible), mostrarlo */
    #templatesColumn:not(.collapsed) {
        transform: translateX(0);
    }
    
    /* Columna de dictado siempre a pantalla completa en tablet */
    #dictationColumn,
    #dictationColumn.expanded {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Cuando está colapsado en tablet, ocultar completamente */
    #templatesColumn.collapsed {
        display: none !important;
    }
    
    /* Backdrop cuando plantillas están abiertas en tablet */
    body.templates-open::before {
        content: '';
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1039;
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* Protección zoom en desktop: cuando viewport efectivo baja de 992px por zoom,
   mantener columnas lado a lado (solo mouse/trackpad, NO tablets) */
@media (max-width: 991px) and (pointer: fine) {
    #dictationColumn {
        flex: 1 1 60% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    
    #templatesColumn {
        flex: 1 1 35% !important;
        min-width: 60px !important;
        max-width: 100% !important;
    }
    
    #templatesColumn.collapsed {
        display: none !important;
    }
    
    #dictationColumn.expanded {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - MÓVIL
   Evitar scroll horizontal y ajustar elementos para pantallas pequeñas
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Header flexible */
    header.d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    header h1 {
        font-size: 1.25rem;
        width: 100%;
    }
    
    header .d-flex.align-items-center {
        width: 100%;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
    }

    /* Fila del título: NUNCA hacer wrap */
    #headerTitleRow {
        flex-wrap: nowrap !important;
    }
    
    /* Botones de acción principal más compactos */
    .btn-group-vertical .btn,
    #dictation-buttons .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Panel de herramientas de análisis */
    #analysisToolsContainer {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }
    
    #analysisToolsContainer .dropdown,
    #analysisToolsContainer .btn {
        flex: 0 0 auto;
    }
    
    /* Textarea más pequeño en móvil para dar espacio a botones */
    #dictationBox {
        min-height: 200px !important;
    }
    
    /* Forzar que los contenedores no excedan el viewport */
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        overflow-x: hidden;
    }
    
    /* Columna de dictado a pantalla completa */
    #dictationColumn {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Panel de plantillas como overlay deslizante en móvil */
    #templatesColumn {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1040;
        width: 85% !important;
        max-width: 320px !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        background: var(--bs-body-bg);
    }
    
    /* Cuando está abierto (no colapsado), mostrarlo */
    #templatesColumn:not(.collapsed) {
        transform: translateX(0);
        box-shadow: 2px 0 10px rgba(0,0,0,0.3);
    }
    
    /* Cuando está colapsado en móvil, ocultar completamente */
    #templatesColumn.collapsed {
        display: none !important;
    }
    
    /* Overlay cuando plantillas están abiertas en móvil */
    #templatesColumn:not(.collapsed)::before {
        content: '';
        position: fixed;
        left: 100%;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.5);
    }
    
    /* Panel de herramientas de línea en móvil - mínimo 90px para 4 columnas de botones (88px) */
    .line-buttons-panel {
        width: 90px;
        min-width: 90px;
    }
    
    .line-buttons-panel.collapsed {
        width: 25px; /* Proporción 1:2 con plantillas colapsado (50px) */
        min-width: 25px;
    }
}
/* Cabecera autoajustable */
.header-title-full,
.header-title-med,
.header-title-short {
    display: none;
}

#headerTitleRow.state-full .header-title-full {
    display: inline;
}

#headerTitleRow.state-med .header-title-med {
    display: inline;
}

#headerTitleRow.state-short .header-title-short {
    display: inline;
}

/* Si no se ha aplicado estado (carga inicial o JS inactivo), mostrar título completo */
#headerTitleRow:not(.state-full):not(.state-med):not(.state-short):not(.state-none) .header-title-full {
    display: inline;
}

/* Pantallas muy pequeñas (celulares) */
@media (max-width: 480px) {
    header h1 {
        font-size: 1rem;
    }
    
    header h1 i {
        display: none; /* Ocultar icono del micrófono para ahorrar espacio */
    }
    
    .form-check-label {
        font-size: 0.75rem;
    }
    
    /* Botones aún más compactos */
    .btn-sm {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
    
    /* User email truncado */
    #user-email {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
    
    /* Panel de herramientas de línea - mínimo 90px para 4 columnas de botones (88px) */
    .line-buttons-panel {
        width: 90px;
        min-width: 90px;
    }
    
    .line-buttons-panel.collapsed {
        width: 20px;
        min-width: 20px;
    }
    
    /* Panel de plantillas más compacto - mantener proporción ~1:2 con líneas */
    #templatesColumn.collapsed {
        width: 40px !important;
        max-width: 40px !important;
        min-height: 120px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   BADGE DE USUARIO MAESTRO
   ═══════════════════════════════════════════════════════════ */

.master-badge-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.badge-master {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.4),
        0 0 20px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 2px solid #c5a000;
    position: relative;
    overflow: hidden;
    animation: master-pulse 2s ease-in-out infinite;
    display: inline-flex;
    align-items: center;
}

.badge-master::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 70%
    );
    animation: master-shine 3s ease-in-out infinite;
}

.badge-master .crown-icon {
    color: #c5a000;
    animation: crown-bounce 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(197, 160, 0, 0.8));
}

.badge-master .master-text {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.badge-master .sparkle-icon {
    color: #c5a000;
    font-size: 0.6rem;
    animation: sparkle-rotate 2s linear infinite;
    filter: drop-shadow(0 0 3px rgba(197, 160, 0, 0.8));
}

/* Animaciones */
@keyframes master-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 4px 15px rgba(255, 215, 0, 0.4),
            0 0 20px rgba(255, 215, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 
            0 6px 25px rgba(255, 215, 0, 0.6),
            0 0 30px rgba(255, 215, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
}

@keyframes master-shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

@keyframes crown-bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-3px) rotate(-5deg);
    }
    75% {
        transform: translateY(-3px) rotate(5deg);
    }
}

@keyframes sparkle-rotate {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg) scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}

/* Tema oscuro */
[data-bs-theme="dark"] .badge-master {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    color: #1a1a1a;
    border-color: #c5a000;
}

/* Tema claro */
[data-bs-theme="light"] .badge-master {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    color: #1a1a1a;
    border-color: #c5a000;
}

/* Botón de dashboard de uso de modelos */
.btn-model-usage {
    --usage-btn-color: #495057;
    --usage-btn-border: #6c757d;
    --usage-btn-hover-bg: #6c757d;
    color: var(--usage-btn-color);
    border-color: var(--usage-btn-border);
}

.btn-model-usage:hover,
.btn-model-usage:focus,
.btn-model-usage:active,
.btn-model-usage.active {
    color: #ffffff;
    background-color: var(--usage-btn-hover-bg);
    border-color: var(--usage-btn-hover-bg);
}

[data-bs-theme="dark"] .btn-model-usage {
    --usage-btn-color: #cfe2ff;
    --usage-btn-border: #6ea8fe;
    --usage-btn-hover-bg: #3d8bfd;
    box-shadow: 0 0 0 1px rgba(110, 168, 254, 0.12);
}

[data-bs-theme="dark"] .btn-model-usage:hover,
[data-bs-theme="dark"] .btn-model-usage:focus,
[data-bs-theme="dark"] .btn-model-usage:active,
[data-bs-theme="dark"] .btn-model-usage.active {
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODO COMPACTO
   Oculta textos de botones principales y colapsa campos de API para ganar espacio
   Mueve botones de IA a la fila principal con separador
   ═══════════════════════════════════════════════════════════════════════════ */

/* Transición suave para todos los elementos afectados */
.compact-transition {
    transition: all 0.2s ease-in-out;
}

/* Ocultar texto de TODOS los botones en modo compacto (solo mostrar iconos) */
body.compact-mode .mb-2.d-flex.flex-wrap.gap-2 > button:not(.dropdown-toggle),
body.compact-mode #analysisToolsContainer > button,
body.compact-mode #toolsPanel > button {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0;
}

body.compact-mode .mb-2.d-flex.flex-wrap.gap-2 > button:not(.dropdown-toggle) .btn-content,
body.compact-mode .mb-2.d-flex.flex-wrap.gap-2 > button:not(.dropdown-toggle):not(#speechBtn) {
    font-size: 0;
}

body.compact-mode .mb-2.d-flex.flex-wrap.gap-2 > button:not(.dropdown-toggle):not(#speechBtn) i {
    font-size: 1rem;
    margin-right: 0 !important;
}

/* Botón de dictado especial - ancho triplicado en modo compacto */
body.compact-mode #speechBtn {
    min-width: 80px; /* Dos tercios del ancho anterior (120px * 2/3) */
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Botón de dictado especial - mantener icono visible */
body.compact-mode #speechBtn .btn-content {
    font-size: 0;
}

body.compact-mode #speechBtn .btn-content i {
    font-size: 1rem;
    margin-right: 0 !important;
}

/* Botones de análisis (IA) - solo iconos */
body.compact-mode #analysisToolsContainer > button {
    font-size: 0;
}

body.compact-mode #analysisToolsContainer > button i {
    font-size: 1rem;
    margin-right: 0 !important;
}

/* Botones en panel Herramientas - solo iconos */
body.compact-mode #toolsPanel > button {
    font-size: 0;
}

body.compact-mode #toolsPanel > button i {
    font-size: 1rem;
    margin-right: 0 !important;
}

body.compact-mode #toolsPanel > button .btn-text-compact {
    display: none;
}

body.compact-mode #toolsPanel {
    gap: 0.25rem !important;
}

/* Dropdown de cálculos - solo icono */
body.compact-mode #calculationsDropdown {
    font-size: 0;
}

body.compact-mode #calculationsDropdown i {
    font-size: 1rem;
    margin-right: 0 !important;
}

/* Dropdown de plantillas frecuentes */
body.compact-mode #frequentTemplatesDropdown small {
    font-size: 0;
}

body.compact-mode #frequentTemplatesDropdown i {
    font-size: 1rem;
    margin-right: 0 !important;
}

/* En modo compacto, ocultar el panel completo de herramientas de análisis */
body.compact-mode #exportSection {
    display: none !important;
}

/* Reducir gap entre botones en modo compacto */
body.compact-mode .mb-2.d-flex.flex-wrap.gap-2 {
    gap: 0.25rem !important;
}

/* Estilos para el separador y botones de IA cuando están en la fila principal */
.ai-separator {
    margin: 0 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--bs-secondary) !important;
    border-left: 2px solid var(--bs-secondary) !important;
    padding-left: 0.5rem !important;
}

/* Contenedor compacto de botones de IA */
#compactAIContainer {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

/* Botones dentro del contenedor compacto de IA - solo iconos */
body.compact-mode #compactAIContainer button {
    padding: 0.375rem 0.5rem !important;
    font-size: 0 !important;
}

body.compact-mode #compactAIContainer button i {
    font-size: 1rem !important;
    margin-right: 0 !important;
}

/* Dropdown dentro del contenedor compacto */
body.compact-mode #compactAIContainer .dropdown-toggle {
    padding: 0.375rem 0.5rem !important;
    font-size: 0 !important;
}

body.compact-mode #compactAIContainer .dropdown-toggle i {
    font-size: 1rem !important;
    margin-right: 0 !important;
}

.compact-ai-buttons {
    display: inline-flex;
    gap: 0.25rem;
}

.compact-ai-buttons > button {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Estilo del switch de modo compacto */

/* Mantener texto "Modo compacto" visible siempre */
.compact-mode-text {
    font-size: 0.875rem;
    white-space: nowrap;
}

body.compact-mode .compact-mode-text {
    font-size: 0.875rem !important; /* Siempre visible */
}

body.compact-mode .compact-mode-label i {
    font-size: 0.9rem !important;
}

/* ==========================================================================
   INTERRUPTOR VERTICAL PERSONALIZADO (MODO LOCAL VS EXTERNO)
   ========================================================================== */
.custom-vertical-toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 135px;
    height: 31px; /* matching small button (btn-sm) height */
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    justify-content: space-between;
}

[data-bs-theme="dark"] .custom-vertical-toggle {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.custom-vertical-toggle:hover {
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .custom-vertical-toggle:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.custom-vertical-toggle .toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 12px; /* half of total height minus padding */
    background-color: #198754; /* Green color same as success dot */
    border-radius: 4px;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

/* When external mode is active, the slider shifts down */
.custom-vertical-toggle.mode-external .toggle-slider {
    transform: translateY(13px);
}

.custom-vertical-toggle .toggle-option {
    position: relative;
    z-index: 2;
    height: 12px;
    line-height: 12px;
    font-size: 0.55rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    transition: color 0.2s ease;
}

[data-bs-theme="dark"] .custom-vertical-toggle .toggle-option {
    color: #a0aec0;
}

/* Active option colors */
.custom-vertical-toggle.mode-local .local-option {
    color: #ffffff !important;
}

.custom-vertical-toggle.mode-external .external-option {
    color: #ffffff !important;
}