/* ======================================================
   TRANSICIONES SUAVES
   ====================================================== */
body.light-theme * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Excepciones para elementos que no deben tener transiciones */
body.light-theme .cognitive-indicator,
body.light-theme .status-indicator,
body.light-theme [class*="progress"],
body.light-theme [class*="cognitive"] {
    transition: none !important;
}/* ======================================================
   ARCHIVO CSS PARA TEMAS DE NEUROMAR AI
   Versión: Enhanced Light Theme - FORZADO CON !IMPORTANT
   ====================================================== */

/* --- Estilos para el botón de cambio de tema --- */
#theme-switcher {
    background-color: transparent !important;
    border: 1px solid #e8e0c0 !important;
    color: #4a4a4a !important;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#theme-switcher:hover {
    transform: scale(1.1) rotate(15deg) !important;
    background-color: #f5f2e8 !important;
    border-color: #d4af37 !important;
    color: #d4af37 !important;
}

/* ======================================================
   TEMA CLARO - FORZADO CON !IMPORTANT
   ====================================================== */

/* FONDO PRINCIPAL - AMARILLITO */
body.light-theme {
    background-color: #fffdf5 !important; /* Fondo amarillito cremoso */
    color: #1a1a1a !important; /* Texto negro */
    transition: background-color 0.4s ease, color 0.4s ease !important;
}

/* FORZAMOS QUE EL GIF DEL CEREBRO SEA VISIBLE */
body.light-theme::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.06), transparent 70%) !important;
    background-blend-mode: overlay !important;
    z-index: -2 !important;
    animation: pulse-bg-light 6s ease-in-out infinite !important;
    opacity: 0.25 !important;
}

body.light-theme::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important;
    /* MANTENER EL GIF DEL CEREBRO */
    background: url("https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExYmU1bWNrbzllYTZpY3pzZzZ3ZzI1dTljYTVrbnlncjJ3ZHQxMnFqZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/HmNw5GoyPtaZa/giphy.gif") center/cover no-repeat !important;
    filter: brightness(0.8) contrast(1.1) hue-rotate(10deg) saturate(0.9) !important;
    mix-blend-mode: multiply !important;
    opacity: 0.2 !important;
    z-index: -1 !important;
    animation: flicker-bg-light 8s infinite alternate ease-in-out !important;
}

/* ANIMACIONES PARA TEMA CLARO */
@keyframes pulse-bg-light {
    0%, 100% { opacity: 0.25; transform: scale(1); } 
    50% { opacity: 0.3; transform: scale(1.005); } 
}

@keyframes flicker-bg-light {
    0% { opacity: 0.15; } 
    50% { opacity: 0.25; } 
    100% { opacity: 0.2; } 
}

/* SIDEBAR Y ELEMENTOS PRINCIPALES */
body.light-theme .sidebar,
body.light-theme #sidebar {
    background-color: rgba(255, 253, 235, 0.95) !important;
    border-right: 1px solid #e8e0c0 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* TÍTULOS Y ENCABEZADOS DE LA SIDEBAR */
body.light-theme .sidebar h1,
body.light-theme .sidebar h2, 
body.light-theme .sidebar h3,
body.light-theme .sidebar h4,
body.light-theme #sidebar h1,
body.light-theme #sidebar h2,
body.light-theme #sidebar h3,
body.light-theme #sidebar h4 {
    color: #2d2d2d !important; /* Negro/gris muy oscuro */
    font-weight: 600 !important;
}

/* TEXTO "REGISTROS DE INTERACCIÓN" ESPECÍFICAMENTE */
body.light-theme .sidebar-title,
body.light-theme .interaction-title,
body.light-theme [class*="registro"],
body.light-theme [class*="interac"] {
    color: #1a1a1a !important; /* Negro para mejor contraste */
    font-weight: 600 !important;
}

/* CUALQUIER TEXTO EN LA SIDEBAR */
body.light-theme .sidebar *,
body.light-theme #sidebar * {
    color: #1a1a1a !important; /* Por defecto negro */
}

/* EXCEPCIONES - elementos que deben mantener colores específicos */
body.light-theme .sidebar .history-item.active,
body.light-theme #sidebar .history-item.active {
    color: #8b7014 !important; /* Dorado oscuro para elementos activos */
}

body.light-theme .sidebar button,
body.light-theme #sidebar button {
    color: inherit !important; /* Heredar del botón padre */
}

body.light-theme .glass-effect {
    background: rgba(255, 253, 235, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid #e8e0c0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* ÁREA DE MENSAJES - CONTENEDOR PRINCIPAL */
body.light-theme .chat-messages {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 1rem !important;
    scroll-behavior: smooth !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ENCABEZADO - FONDO TRANSPARENTE */
body.light-theme .chat-header {
    border-bottom-color: rgba(232, 224, 192, 0.3) !important; /* Borde más sutil */
    background-color: transparent !important; /* Completamente transparente */
    backdrop-filter: none !important; /* Sin blur */
    -webkit-backdrop-filter: none !important; /* Sin blur */
    padding: 1rem 2rem !important; /* Mantener el padding */
}

body.light-theme .chat-header h1,
body.light-theme .chat-header .title {
    color: #2d2d2d !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3) !important;
    background: none !important; /* Asegurar que no tenga fondo */
}

body.light-theme .chat-header p,
body.light-theme #agent-selector-label {
    color: #4a4a4a !important;
    background: none !important; /* Asegurar que no tenga fondo */
}

/* Selectores específicos para elementos del encabezado */
body.light-theme .chat-header select,
body.light-theme .chat-header input {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid #e8e0c0 !important;
    color: #1a1a1a !important;
}

/* MENSAJES */
body.light-theme .message .avatar {
    background-color: #f5f2e8 !important;
    color: #4a4a4a !important;
    border-color: #e8e0c0 !important;
}

body.light-theme .message .avatar.user {
    background-color: #d4af37 !important;
    color: white !important;
}

body.light-theme .message .avatar.ai {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: #d4af37 !important;
    border-color: #d4af37 !important;
}

body.light-theme .message .message-content {
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #1a1a1a !important;
    border-color: #e8e0c0 !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.light-theme .message.user .message-content {
    background-color: rgba(212, 175, 55, 0.1) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

/* FORMULARIO DE ENTRADA */
body.light-theme .prompt-wrapper {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #f5f2e8 !important;
    border-radius: 28px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

body.light-theme .prompt-wrapper:focus-within {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e8e0c0 !important;
    box-shadow: 0 1px 6px rgba(212, 175, 55, 0.2) !important;
}

body.light-theme #prompt-input,
body.light-theme .input-area {
    color: #1a1a1a !important;
    background-color: transparent !important;
}

body.light-theme #prompt-input::placeholder,
body.light-theme .input-area::placeholder {
    color: #4a4a4a !important;
}

body.light-theme .input-btn {
    color: #4a4a4a !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

body.light-theme .input-btn:hover {
    color: #d4af37 !important;
    background-color: rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
}

/* BOTONES DE LA BARRA LATERAL */
body.light-theme #new-chat-button {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: #8b7014 !important;
    font-weight: 500 !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

body.light-theme #new-chat-button:hover {
    background-color: rgba(212, 175, 55, 0.25) !important;
}

body.light-theme .history-item {
    color: #1a1a1a !important;
    border-color: transparent !important;
}

body.light-theme .history-item:hover {
    background-color: #f5f2e8 !important;
}

body.light-theme .history-item.active {
    background-color: rgba(212, 175, 55, 0.2) !important;
    color: #8b7014 !important;
    font-weight: 500 !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}

/* CAMPO DE BÚSQUEDA EN HISTORIAL */
body.light-theme #history-search {
    background-color: rgba(245, 242, 232, 0.8) !important;
    border-color: #e8e0c0 !important;
    color: #1a1a1a !important;
}

body.light-theme #history-search::placeholder {
    color: #4a4a4a !important;
}

/* TARJETAS DE SUGERENCIA */
body.light-theme .suggestion-card {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid #e8e0c0 !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.light-theme .suggestion-card:hover {
    border-color: #d4af37 !important;
    box-shadow: 0 1px 6px rgba(212, 175, 55, 0.2) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-2px) !important;
}

body.light-theme .suggestion-card h3 {
    color: #2d2d2d !important;
}

body.light-theme .suggestion-card p {
    color: #4a4a4a !important;
}

/* LOGO DE BIENVENIDA */
body.light-theme .welcome-logo {
    color: #d4af37 !important;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4), 0 0 25px rgba(255, 215, 0, 0.2) !important;
}

/* SELECTORES Y CONTROLES */
body.light-theme select,
body.light-theme #language-selector {
    background-color: rgba(245, 242, 232, 0.8) !important;
    color: #1a1a1a !important;
    border: 1px solid #e8e0c0 !important;
}

body.light-theme .control-btn {
    color: #4a4a4a !important;
    border-color: #e8e0c0 !important;
    background-color: transparent !important;
}

body.light-theme .control-btn:hover {
    background-color: #f5f2e8 !important;
    color: #1a1a1a !important;
}

body.light-theme #clear-history-button {
    color: #d93025 !important;
}

body.light-theme #clear-history-button:hover {
    background-color: rgba(217, 48, 37, 0.05) !important;
}

/* BOTÓN DE DESCARGA */
body.light-theme .download-btn {
    background-color: #d4af37 !important;
    color: white !important;
    border-color: #d4af37 !important;
}

body.light-theme .download-btn:hover {
    background-color: #b8941f !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3) !important;
}

/* CÓDIGO Y CITAS */
body.light-theme .prose pre {
    background-color: rgba(248, 246, 240, 0.9) !important;
    color: #1a1a1a !important;
    border: 1px solid #e8e0c0 !important;
}

body.light-theme .prose code {
    color: #d4af37 !important;
    background-color: rgba(212, 175, 55, 0.1) !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
}

body.light-theme .prose blockquote {
    border-left-color: #d4af37 !important;
    background-color: rgba(212, 175, 55, 0.05) !important;
    color: #4a4a4a !important;
}

body.light-theme .prose h1,
body.light-theme .prose h2,
body.light-theme .prose h3,
body.light-theme .prose h4 {
    color: #2d2d2d !important;
}

body.light-theme .prose strong {
    color: #d4af37 !important;
}

/* BOTÓN DE COPIAR CÓDIGO */
body.light-theme .copy-code-btn {
    background-color: rgba(245, 242, 232, 0.9) !important;
    color: #4a4a4a !important;
}

body.light-theme .copy-code-btn:hover {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: #d4af37 !important;
}

/* ACCIONES DE MENSAJE */
body.light-theme .message-actions {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

body.light-theme .action-btn {
    background-color: transparent !important;
    color: #4a4a4a !important;
}

body.light-theme .action-btn:hover {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: #d4af37 !important;
}

/* NOTIFICACIONES TOAST */
body.light-theme #toast-notification {
    background-color: #d4af37 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3) !important;
}

/* SCROLLBARS PERSONALIZADOS */
body.light-theme ::-webkit-scrollbar-thumb {
    background-color: #d4af37 !important;
    border: 2px solid #fffdf5 !important;
    opacity: 0.6 !important;
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
    opacity: 0.9 !important;
}

body.light-theme ::-webkit-scrollbar-track {
    background: rgba(245, 242, 232, 0.3) !important;
}

/* ======================================================
   ELEMENTOS CANVAS Y NEURONAL - FORZADOS
   ====================================================== */
body.light-theme #neural-background {
    opacity: 1 !important;
    visibility: visible !important;
}

body.light-theme #neural-background canvas,
body.light-theme .neural-canvas,
body.light-theme canvas[id*="neural"],
body.light-theme canvas[class*="neural"] {
    filter: brightness(0.9) contrast(1.0) saturate(0.8) hue-rotate(15deg) !important;
    opacity: 0.3 !important;
}

/* ======================================================
   TRANSICIONES SUAVES
   ====================================================== */
body.light-theme * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}