/* ========================================================================== Modo oscuro (dark mode) Se activa agregando la clase .dark-mode al elemento . Cubre el panel admin (Argon), la tienda (Argon Design System) y las landings (tema tali). Los overrides usan variables para ajustar el tema en un solo lugar. ========================================================================== */ html.dark-mode { --dm-bg: #12141c; --dm-surface: #1b1e28; --dm-surface-2: #232733; --dm-surface-3: #2a2f3d; --dm-border: #313747; --dm-text: #d6d9e0; --dm-muted: #99a0af; --dm-heading: #f1f3f7; --dm-input-bg: #1e222d; --dm-shadow: rgba(0, 0, 0, 0.45); } /* Transición suave al alternar el tema */ html.dark-mode, html.dark-mode body { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } html.dark-mode body, html.dark-mode .main-content, html.dark-mode .wrapper, html.dark-mode #box_wrapper, html.dark-mode .page-content, html.dark-mode section, html.dark-mode .section { background-color: var(--dm-bg) !important; } /* Encabezados y texto */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6, html.dark-mode .h1, html.dark-mode .h2, html.dark-mode .h3, html.dark-mode .h4, html.dark-mode .h5, html.dark-mode .h6 { color: var(--dm-heading) !important; } html.dark-mode p, html.dark-mode span, html.dark-mode li, html.dark-mode label, html.dark-mode dt, html.dark-mode dd, html.dark-mode small { color: var(--dm-text); } html.dark-mode a:not(.btn) { color: #d6d9e0; } html.dark-mode a:not(.btn):hover { color: #9fbe61; } /* Utilidades de color de Bootstrap/Argon */ html.dark-mode .text-dark, html.dark-mode .text-black, html.dark-mode .text-body, html.dark-mode .text-default { color: var(--dm-text) !important; } html.dark-mode .text-muted { color: var(--dm-muted) !important; } html.dark-mode .bg-white, html.dark-mode .bg-secondary, html.dark-mode .bg-light, html.dark-mode .bg-default { background-color: var(--dm-surface) !important; } html.dark-mode .bg-lighter, html.dark-mode .bg-neutral { background-color: var(--dm-surface-2) !important; } /* Bordes */ html.dark-mode .border, html.dark-mode .border-top, html.dark-mode .border-bottom, html.dark-mode .border-left, html.dark-mode .border-right, html.dark-mode hr { border-color: var(--dm-border) !important; } /* Tarjetas */ html.dark-mode .card, html.dark-mode .card-body, html.dark-mode .card-header, html.dark-mode .card-footer { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text); } html.dark-mode .card { box-shadow: 0 0 2rem 0 var(--dm-shadow) !important; } html.dark-mode .panel, html.dark-mode .panel-default, html.dark-mode .panel-body, html.dark-mode .qhali-pro-card, html.dark-mode .qhali-book-panel { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .qhali-pro-card h3, html.dark-mode .qhali-pro-card h4, html.dark-mode .qhali-pro-card p, html.dark-mode .qhali-pro-card small, html.dark-mode .qhali-pro-card .qhali-pro-name, html.dark-mode .qhali-pro-card .qhali-pro-type, html.dark-mode .qhali-pro-card .qhali-pro-specialties, html.dark-mode .qhali-pro-card .qhali-pro-city, html.dark-mode .qhali-book-panel h3, html.dark-mode .qhali-book-panel p, html.dark-mode .qhali-book-panel small, html.dark-mode .qhali-book-panel .text-muted { color: var(--dm-text) !important; } html.dark-mode .qhali-pro-type, html.dark-mode .qhali-pro-specialties, html.dark-mode .qhali-pro-city { color: var(--dm-muted) !important; } html.dark-mode .qhali-pro-photo { background: var(--dm-surface-3); } html.dark-mode .qhali-pro-initials { color: var(--dm-heading); } /* Sidebar / navbar vertical (Argon admin) */ html.dark-mode .navbar-vertical, html.dark-mode #sidenav-main, html.dark-mode .navbar-vertical.navbar-light { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html.dark-mode .navbar-vertical .navbar-nav .nav-link, html.dark-mode .navbar-vertical .navbar-heading { color: var(--dm-text) !important; } html.dark-mode .navbar-vertical .navbar-nav .nav-link:hover, html.dark-mode .navbar-vertical .navbar-nav .nav-link.active { color: #fff !important; } html.dark-mode .navbar-vertical .navbar-nav .nav-link i { color: var(--dm-muted); } /* Dropdowns */ html.dark-mode .dropdown-menu { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; box-shadow: 0 .5rem 1.5rem var(--dm-shadow) !important; } html.dark-mode .dropdown-item { color: var(--dm-text) !important; } html.dark-mode .dropdown-item:hover, html.dark-mode .dropdown-item:focus { background-color: var(--dm-surface-3) !important; color: #fff !important; } html.dark-mode .dropdown-divider { border-color: var(--dm-border) !important; } /* Tablas */ html.dark-mode .table { color: var(--dm-text) !important; } html.dark-mode .table th, html.dark-mode .table td { border-color: var(--dm-border) !important; } html.dark-mode .table thead th, html.dark-mode .table .thead-light th { background-color: var(--dm-surface-2) !important; color: var(--dm-muted) !important; border-color: var(--dm-border) !important; } html.dark-mode .table-hover tbody tr:hover { background-color: var(--dm-surface-2) !important; color: #fff !important; } html.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03) !important; } /* Formularios */ html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode textarea, html.dark-mode .input-group-text, html.dark-mode select, html.dark-mode input[type="text"], html.dark-mode input[type="email"], html.dark-mode input[type="password"], html.dark-mode input[type="number"], html.dark-mode input[type="search"], html.dark-mode input[type="tel"], html.dark-mode input[type="date"] { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .form-control:focus, html.dark-mode .custom-select:focus { background-color: var(--dm-input-bg) !important; border-color: #5a7fd6 !important; color: #fff !important; } html.dark-mode .form-control::placeholder { color: var(--dm-muted) !important; } html.dark-mode .input-group-text { background-color: var(--dm-surface-2) !important; } /* Inputs "alternative" de Argon (traen sombra/fondo claro propio) */ html.dark-mode .input-group-alternative, html.dark-mode .form-control-alternative { background-color: var(--dm-input-bg) !important; box-shadow: none !important; border: 1px solid var(--dm-border) !important; } html.dark-mode .input-group-alternative .input-group-text, html.dark-mode .input-group-alternative .form-control { background-color: transparent !important; border: none !important; } /* Select2 */ html.dark-mode .select2-container--default .select2-selection--single, html.dark-mode .select2-container--default .select2-selection--multiple, html.dark-mode .select2-dropdown, html.dark-mode .select2-search__field { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--dm-surface-3) !important; } html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #3a4666 !important; } /* Modales */ html.dark-mode .modal-content { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } html.dark-mode .modal-header, html.dark-mode .modal-footer { border-color: var(--dm-border) !important; } html.dark-mode .close { color: var(--dm-text) !important; text-shadow: none; } /* Listas */ html.dark-mode .list-group-item { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Paginación */ html.dark-mode .page-link { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .page-item.disabled .page-link { background-color: var(--dm-surface) !important; color: var(--dm-muted) !important; } /* Pestañas / breadcrumb */ html.dark-mode .nav-tabs { border-color: var(--dm-border) !important; } html.dark-mode .nav-tabs .nav-link.active { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: #fff !important; } html.dark-mode .breadcrumb { background-color: transparent !important; } /* Alertas (suavizar fondos claros) */ html.dark-mode .alert-secondary, html.dark-mode .alert-light { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Landing (tema "tali"): tarjetas de servicios ".sc_services" */ html.dark-mode .sc_services, html.dark-mode .sc_services.sc_services_style_1, html.dark-mode .sc_services.sc_services_style_2, html.dark-mode .sc_services.sc_services_style_3, html.dark-mode .sc_services.sc_services_style_4 { background-color: var(--dm-surface) !important; border-radius: 6px; box-shadow: 0 0 1.5rem 0 var(--dm-shadow); } html.dark-mode .sc_services .sc_title { color: var(--dm-heading) !important; } html.dark-mode .sc_services .sc_description { color: var(--dm-muted) !important; } /* Al hacer hover el tema muestra un degradado morado: mantener texto blanco */ html.dark-mode .sc_services:hover .sc_title, html.dark-mode .sc_services:hover .sc_description, html.dark-mode .sc_services:hover .sc_icon { color: #ffffff !important; } /* Anillo claro alrededor de los botones -> tono oscuro */ html.dark-mode .sc_services.sc_services_style_1 .btn:before { border-color: var(--dm-surface) !important; } /* Titulos de seccion del landing */ html.dark-mode .sc_title, html.dark-mode #welcome_section .container .sc_title { color: var(--dm-heading) !important; } /* Carrusel: conservar los colores originales de los titulos (no cambiar en oscuro) */ html.dark-mode .slide_description .slide_title { color: #ffffff !important; } html.dark-mode .slide_description .slide_title.text-primary { color: #9fbe61 !important; } /* Botones — texto siempre legible en modo oscuro */ html.dark-mode .btn, html.dark-mode a.btn, html.dark-mode button.btn, html.dark-mode .btn span, html.dark-mode .btn .btn-inner--text { color: #ffffff; } html.dark-mode .btn-outline-primary, html.dark-mode .btn-outline-primary span { color: var(--qhali-success, #9fbe61); } /* ========== Secciones de contenido (términos, privacidad, registro) ========== */ html.dark-mode .light_section { background-color: var(--dm-surface) !important; } html.dark-mode .light_section .post_descr p, html.dark-mode .light_section .post_descr span, html.dark-mode .light_section .post_content p, html.dark-mode .post_descr p, html.dark-mode .post_descr span, html.dark-mode .post_content p[style], html.dark-mode .post_descr p[style], html.dark-mode .post_descr span[style] { color: var(--dm-text) !important; } html.dark-mode .light_section .sc_title, html.dark-mode section.light_section h3.sc_title, html.dark-mode section.light_section h4.sc_title, html.dark-mode section.light_section h5.sc_title { color: var(--dm-heading) !important; } html.dark-mode section.heading.breadcrumb { background-color: var(--dm-surface-2) !important; } html.dark-mode .breadcrumb h1, html.dark-mode .breadcrumb .page_title { color: var(--dm-heading) !important; } html.dark-mode .breadcrumb .breadcrumbs_item, html.dark-mode .breadcrumb .breadcrumbs_item.home, html.dark-mode .breadcrumb .breadcrumbs_item.current, html.dark-mode .breadcrumb .breadcrumbs_delimiter { color: var(--dm-muted) !important; } html.dark-mode .breadcrumb .breadcrumbs_item.home:hover { color: #9fbe61 !important; } /* ========== Footer landing ========== */ html.dark-mode footer, html.dark-mode footer .copyright_area { background-color: var(--dm-surface) !important; border-top-color: var(--dm-border) !important; } html.dark-mode footer .copyright_area, html.dark-mode footer .copyright_area .copyright, html.dark-mode footer .copyright_area .footer_social, html.dark-mode footer .copyright_area .container { color: var(--dm-text) !important; } /* ========== Checkbox términos / privacidad en formularios ========== */ html.dark-mode .custom-control-label, html.dark-mode label.custom-control-label { color: var(--dm-text) !important; } html.dark-mode .custom-control-label a { color: #9fbe61 !important; text-decoration: underline !important; } html.dark-mode .custom-control-label a:hover { color: #ffffff !important; } html.dark-mode .form-control-label, html.dark-mode label.form-control-label { color: var(--dm-text) !important; } html.dark-mode .text-muted { color: var(--dm-muted) !important; } #dm-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 2000; border: none; background: transparent; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } #dm-toggle .dm-switch-track { position: relative; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 62px; height: 30px; padding: 0 7px; border-radius: 999px; background: #c7ccd6; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); transition: background .25s ease; } html.dark-mode #dm-toggle .dm-switch-track { background: #3a4666; } #dm-toggle .dm-ico { font-size: 13px; line-height: 1; z-index: 1; opacity: .85; } #dm-toggle .dm-switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform .25s ease; } html.dark-mode #dm-toggle .dm-switch-thumb { transform: translateX(32px); } #dm-toggle:hover .dm-switch-thumb { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45); }