/** * Vixii — tema oscuro (app index + admin). * * Activación: añadir data-theme="dark" al elemento * * * También acepta la clase .theme-dark en . * Cargar después de brand.css, modern-app.css y modern-admin.css. */ html[data-theme="dark"], html.theme-dark { color-scheme: dark; --dark-color-primary: #F26A4F; --dark-color-tertiary: #A7CDBE; --dark-color-secondary: #FFB166; --dark-color-background: #1E1F23; --dark-color-foreground: #E7E7EA; --dark-color-white: #FFFFFF; --dark-color-secondary: #363636; .sidebar-left, .sidebar-header, .sidebar-footer{ background-color: var(--dark-color-background); background: var(--dark-color-background); } #sidebarActiveFilters{ background-color: var(--dark-color-secondary); background: var(--dark-color-secondary); } .chat-name, .sidebar-active-filters-title{ color: var(--dark-color-white); } .chat-message-plain, .chat-message, .config-btn{ color: var(--dark-color-white)!important; } .config-btn:hover{ background: var(--dark-color-secondary)!important; } .tag-chip-user{ color:var(--dark-color-white); background-color: var(--dark-color-secondary); border-color: var(--dark-color-secondary); } .chat-item:hover { background-color: #121212; } .chat-item.active { background-color: #121212; box-shadow: inset 3px 0 0 var(--dark-color-primary); } .chat-canal-badge { border-color: var(--dark-color-background); } .sidebar-active-filters{ border-bottom: 1px solid var(--dark-color-secondary); } .sidebar-filter-chip{ background-color: var(--dark-color-background); border-color: var(--dark-color-background); color: var(--dark-color-white)!important; } .sidebar-filter-chip *{ color: var(--dark-color-white)!important; } .filter-btn{ background-color: var(--dark-color-background); border-color: var(--dark-color-secondary); color: var(--dark-color-white)!important; } .filter-btn.active{ background-color: var(--dark-color-secondary); border-color: var(--dark-color-background); color: var(--dark-color-white)!important; } .filter-btn:hover{ background-color: #121212; border-color: #121212; color: var(--dark-color-white)!important; } #openAdvancedFilters,#openAdvancedFiltersInterno{ background-color: var(--brown); color: var(--dark-color-white)!important; } #addContactBtn{ background: var(--brown)!important; border-color: var(--brown); color: var(--dark-color-white)!important; } .tab-btn{ background-color: var(--dark-color-secondary ); border-color: var(--dark-color-secondary); color: var(--brown)!important; } .tab-btn:hover{ background: #121212!important; } .tab-btn.active{ background-color: var(--brown); border-color: var(--brown); color: var(--dark-color-white)!important; } .tab-btn.active:hover{ background-color: var(--brown)!important; border-color: var(--brown)!important; color: var(--dark-color-white)!important; } .chat-header-bar{ background: var(--dark-color-background); color: var(--dark-color-white)!important; } #chatContactName, #chatContactPhone{ color: var(--dark-color-white)!important; } #chatAiToggle, #chatOperatorDropdown{ background: var(--dark-color-secondary); } #chatOperatorList{ background: var(--dark-color-secondary); color: var(--dark-color-white)!important; } #chatAiToggleStatus{ color: var(--dark-color-white)!important; } .chat-ai-switch-slider{ background: var(--dark-color-background); } .chat-ai-toggle.is-paused{ border-color: var(--brown); } .chat-ai-toggle.is-paused .chat-ai-toggle-icon{ color: var(--brown)!important; } #chatOperatorLabel{ color: var(--dark-color-white)!important; } .chat-operator-option{ color: var(--dark-color-white)!important; } .chat-operator-option:hover{ background: #121212!important; } #chatInputStack{ background: var(--dark-color-secondary); } .chat-input-area{ background: var(--dark-color-background); } .attach-btn:hover, .emojis-btn:hover{ background-color: #121212!important; } #emoji-picker-tooltip{ background: var(--dark-color-secondary); } #attachMenuTooltip{ background: var(--dark-color-secondary); color: var(--dark-color-white)!important; } #attachMenuTooltip .attach-menu-item{ color: var(--dark-color-white)!important; } #attachMenuTooltip .attach-menu-item:hover{ background: #121212!important; } .emoji-picker-tooltip .emoji-group:not(:last-child) { border-bottom: 1px solid #121212; } #messagesContainer{ background: var(--dark-color-secondary); } #chatInputStack{ border-top: 1px solid var(--dark-color-background); } .message.received .message-bubble{ background: var(--dark-color-background); border-color: var(--dark-color-background); color: var(--dark-color-white)!important; } .message.received .message-text{ color: var(--dark-color-white)!important; } .sidebar-right-header{ background: var(--dark-color-background); border-bottom: 1px solid #121212; } .sidebar-right-header h3{ color: var(--dark-color-white)!important; } .contact-profile{ background: var(--dark-color-background); color: var(--dark-color-white)!important; border-bottom: 1px solid #121212; } .contact-details-section{ background: var(--dark-color-background); color: var(--dark-color-white)!important; } #profileName, #profilePhone{ color: var(--dark-color-white)!important; } #sidebarRight{ border-left: 1px solid var(--dark-color-background); } .sidebar-right-header h3 { margin-bottom: 0px!important; } .sidebar-right .admin-input { background: var(--dark-color-background); color: var(--dark-color-white)!important; border-color: var(--dark-color-background); } .sidebar-right .admin-input:focus{ box-shadow: none!important; } #destacadosSection *{ color: var(--dark-color-white)!important; } .sidebar-right .admin-fieldset { border: 1px solid var(--dark-color-white); } .contact-add-modal,.modal-body,.modal-header{ background: var(--dark-color-background); } .contact-add-modal *{ color: var(--dark-color-white)!important; } .contact-add-modal input{ background: var(--dark-color-secondary); border-color: var(--dark-color-background); } .contact-add-modal input::placeholder{ color: var(--dark-color-foreground); } .modal-header{ border-bottom: 1px solid #121212; } *:focus{ box-shadow: none!important; } #emptyState,#internoEmptyState{ background: #363636; } #emptyState p,#internoEmptyState p{ color: var(--dark-color-white)!important; } #internoChatPeerName{ color: var(--dark-color-white)!important; } }