/*============================================= THEME — modo oscuro Filosofía: definir variables CSS sobre :root y sobreescribirlas cuando el tenga data-theme="dark". Las variables se aplican a las clases más visibles del CRM y se sobreescriben las clases de Bootstrap que más impactan visualmente. =============================================*/ :root { --bg-primary: #ffffff; --bg-secondary: #f0f0f0; --bg-tertiary: #f8f9fa; --bg-input: #ffffff; --bg-msg-bot: #ffffff; --bg-msg-user: #d9fdd3; --text-primary: #212529; --text-secondary: #6c757d; --text-muted: #6c757d; --border-color: #dee2e6; --border-soft: #e9ecef; --link-color: inherit; --shadow: 0 1px 2px rgba(0,0,0,0.1); } html[data-theme="dark"] { --bg-primary: #1f2c33; --bg-secondary: #111b21; --bg-tertiary: #0b141a; --bg-input: #2a3942; --bg-msg-bot: #1f2c33; --bg-msg-user: #005c4b; --text-primary: #e9edef; --text-secondary: #aebac1; --text-muted: #8696a0; --border-color: #233138; --border-soft: #2a3942; --link-color: #53bdeb; --shadow: 0 1px 2px rgba(0,0,0,0.4); } /*============================================= Botón toggle del nav (icon styling) =============================================*/ #themeToggle{ font-size: 1.1rem; line-height: 1; color: inherit; background: transparent; } #themeToggle:hover #themeToggleIcon{ opacity: 0.7; } html[data-theme="dark"] #themeToggleIcon{ color: #f4d35e; } /*============================================= GLOBAL / Bootstrap overrides en modo oscuro =============================================*/ html[data-theme="dark"] body{ background-color: var(--bg-tertiary); color: var(--text-primary); } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light{ background-color: var(--bg-primary) !important; color: var(--text-primary) !important; } html[data-theme="dark"] .text-dark{ color: var(--text-primary) !important; } html[data-theme="dark"] .text-muted{ color: var(--text-muted) !important; } html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border, html[data-theme="dark"] .border-end, html[data-theme="dark"] .border-start{ border-color: var(--border-color) !important; } /*============================================= NAVBAR =============================================*/ html[data-theme="dark"] .navbar.navbar-light{ background-color: var(--bg-primary) !important; color: var(--text-primary); } html[data-theme="dark"] .navbar.navbar-light a, html[data-theme="dark"] .navbar.navbar-light .navbar-brand, html[data-theme="dark"] .navbar.navbar-light .btn{ color: var(--text-primary) !important; } /*============================================= SIDEBAR — wrapper / sidebar de CRM Tornado =============================================*/ html[data-theme="dark"] #wrapper, html[data-theme="dark"] .backDashboard{ background-color: var(--bg-tertiary) !important; } html[data-theme="dark"] #sidebar-wrapper, html[data-theme="dark"] .sidebar-heading, html[data-theme="dark"] .list-group-item{ background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .list-group-item-action:hover, html[data-theme="dark"] .list-group-item-action:focus{ background-color: var(--bg-primary) !important; color: var(--text-primary) !important; } /*============================================= CARDS / MODALES / DROPDOWNS =============================================*/ html[data-theme="dark"] .card, html[data-theme="dark"] .card-body, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer{ background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer{ background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .modal-header .btn-close, html[data-theme="dark"] .offcanvas .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); } html[data-theme="dark"] .dropdown-menu{ background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .dropdown-item{ color: var(--text-primary); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus{ background-color: var(--bg-secondary); color: var(--text-primary); } html[data-theme="dark"] .offcanvas{ background-color: var(--bg-primary); color: var(--text-primary); } /*============================================= FORMS / INPUTS =============================================*/ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea.form-control, html[data-theme="dark"] input.form-control{ background-color: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .form-control::placeholder{ color: var(--text-muted); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus{ background-color: var(--bg-input); color: var(--text-primary); } html[data-theme="dark"] .form-label, html[data-theme="dark"] label{ color: var(--text-primary); } html[data-theme="dark"] .input-group-text{ background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } /*============================================= TABLES =============================================*/ html[data-theme="dark"] .table{ color: var(--text-primary); background-color: var(--bg-primary); --bs-table-bg: var(--bg-primary); --bs-table-color: var(--text-primary); --bs-table-striped-bg: var(--bg-secondary); --bs-table-striped-color: var(--text-primary); --bs-table-hover-bg: var(--bg-secondary); --bs-table-hover-color: var(--text-primary); --bs-table-border-color: var(--border-color); } html[data-theme="dark"] .table > :not(caption) > * > *{ background-color: transparent; color: var(--text-primary); border-bottom-color: var(--border-color); } html[data-theme="dark"] .table thead{ background-color: var(--bg-secondary); } /*============================================= BUTTONS — generales =============================================*/ html[data-theme="dark"] .btn-default, html[data-theme="dark"] .btn-light{ background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-outline-dark{ color: var(--text-primary); border-color: var(--border-color); } /*============================================= CHAT — todos los componentes =============================================*/ html[data-theme="dark"] .contact-list{ background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary); } html[data-theme="dark"] .contact-item{ background-color: var(--bg-primary); color: var(--text-primary); box-shadow: var(--shadow); } html[data-theme="dark"] .contact-item:hover{ background-color: var(--bg-secondary); } html[data-theme="dark"] .contact-item .text-dark, html[data-theme="dark"] .contact-list a{ color: var(--text-primary) !important; } html[data-theme="dark"] .chat-container{ background-color: var(--bg-tertiary); } html[data-theme="dark"] .chat-body{ /* Mantenemos el patrón de WhatsApp pero atenuado en modo oscuro */ background-color: var(--bg-tertiary); background-blend-mode: multiply; } html[data-theme="dark"] .msg.bot{ background-color: var(--bg-msg-bot); color: var(--text-primary); } html[data-theme="dark"] .msg.user{ background-color: var(--bg-msg-user); color: #e9edef; } html[data-theme="dark"] .msg .small.text-muted{ color: var(--text-muted) !important; } html[data-theme="dark"] .chat-footer{ background-color: var(--bg-primary); border-top-color: var(--border-color); } html[data-theme="dark"] .chat-footer input{ background-color: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .chat-footer input::placeholder{ color: var(--text-muted); } html[data-theme="dark"] .chat-footer button.attach{ background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } /* El botón send mantiene el verde de marca */ /*============================================= SELECT2 — overrides =============================================*/ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple{ background-color: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered{ color: var(--text-primary); } html[data-theme="dark"] .select2-dropdown{ background-color: var(--bg-primary); border-color: var(--border-color); } html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected]{ background-color: var(--bg-secondary); color: var(--text-primary); } html[data-theme="dark"] .select2-search--dropdown .select2-search__field{ background-color: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); } /*============================================= SCROLLBARS (sutil, navegadores webkit) =============================================*/ html[data-theme="dark"] ::-webkit-scrollbar{ width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track{ background: var(--bg-tertiary); } html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background: var(--border-soft); border-radius: 5px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: var(--text-muted); }