/* ============================================================ DARK MODE — se activa con la clase .dark en Cubre el chrome principal del panel. Los colores de marca (boxes azul/rojo, círculos de estado) se dejan intactos. ============================================================ */ html.dark, html.dark body, html.dark .body-custom { background-color: #11161d !important; color: #d7dee6 !important; } /* Contenedor principal / contenido */ html.dark #content, html.dark .pmd-content, html.dark .content-area, html.dark .inner-page, html.dark .container-fluid, html.dark .section-inner, html.dark .component-section, html.dark .component-box { background-color: transparent !important; color: #d7dee6 !important; } /* Tarjetas / superficies */ html.dark .pmd-card, html.dark .pmd-card-custom-view, html.dark .card, html.dark .pmd-z-depth, html.dark .well, html.dark .panel { background-color: #1b222c !important; color: #d7dee6 !important; border-color: #2c3744 !important; box-shadow: 0 2px 10px rgba(0,0,0,.4) !important; } /* Títulos y textos generales */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark .section-title, html.dark .pmd-card-title-text, html.dark label, html.dark .control-label, html.dark p, html.dark span, html.dark div, html.dark td, html.dark th, html.dark .media-body { color: #d7dee6; } /* Links */ html.dark a { color: #6fb0ff; } html.dark a:hover { color: #9ccbff; } /* ---------- TABLAS ---------- */ html.dark table.table { background-color: #1b222c !important; color: #d7dee6 !important; } html.dark table.table > thead > tr > th { background-color: #232c38 !important; color: #e8edf2 !important; border-color: #2c3744 !important; } html.dark table.table > tbody > tr > td, html.dark table.table > tfoot > tr > td { border-color: #2c3744 !important; color: #d7dee6; } html.dark table.table > tbody > tr { background-color: transparent !important; } html.dark table.table > tbody > tr:hover > td { background-color: #232c38 !important; } html.dark .list-group-item:hover { background-color: #232c38 !important; } /* El encabezado negro de los historiales ya queda bien; reforzamos texto */ html.dark .encabezado, html.dark .encabezado th, html.dark .encabezado td { color: #fff !important; } /* ---------- TOOLBAR / FILTROS ---------- */ html.dark .toolbar, html.dark div[data-rel="filters"] { background-color: #1b222c !important; border-color: #2c3744 !important; } /* ---------- INPUTS ---------- */ html.dark .form-control, html.dark input[type="text"], html.dark input[type="password"], html.dark input[type="email"], html.dark input[type="number"], html.dark input[type="search"], html.dark select, html.dark textarea { background-color: #232c38 !important; color: #e8edf2 !important; border-color: #36424f !important; } html.dark .form-control::placeholder, html.dark input::placeholder { color: #8a949e !important; } html.dark .form-control:focus { border-color: #6fb0ff !important; } html.dark input[name="table_search"] { background-color: transparent !important; } /* ---------- MODALES ---------- */ html.dark .modal-content { background-color: #1b222c !important; color: #d7dee6 !important; border-color: #2c3744 !important; } html.dark .modal-header, html.dark .modal-footer, html.dark .pmd-modal-bordered { border-color: #2c3744 !important; } html.dark .modal-header { background-color: #1b222c !important; } html.dark .modal-body { background-color: #1b222c !important; } html.dark .close { color: #d7dee6 !important; opacity: .8; } /* ---------- POPOVER ---------- */ html.dark .popover { background-color: #232c38 !important; border-color: #36424f !important; color: #d7dee6 !important; } html.dark .popover-content, html.dark .popover-title { color: #d7dee6 !important; background: transparent !important; } html.dark .popover.top > .arrow:after { border-top-color: #232c38 !important; } html.dark .popover.bottom > .arrow:after { border-bottom-color: #232c38 !important; } html.dark .popover.left > .arrow:after { border-left-color: #232c38 !important; } html.dark .popover.right > .arrow:after { border-right-color: #232c38 !important; } html.dark .popover table { color: #d7dee6 !important; } html.dark .popover table th, html.dark .popover table td { border-color: #36424f !important; } /* ---------- INICIO (dashboard) ---------- */ html.dark .inicio-card { background: #1b222c !important; border-color: #2c3744 !important; } html.dark .inicio-card-head { border-color: #2c3744 !important; } html.dark .inicio-card-head h2 { color: #e8edf2 !important; } html.dark .inicio-list li { border-color: #232c38 !important; } html.dark .inicio-list li:hover { background: #232c38 !important; } html.dark .inicio-name { color: #e8edf2 !important; } /* ---------- BOTONES NEUTROS ---------- */ html.dark .btn-default { background-color: #2c3744 !important; color: #e8edf2 !important; border-color: #3a4654 !important; } /* Texto oscuro forzado por inline → lo aclaramos donde sea seguro */ html.dark .typo-fill-secondary { color: #e8edf2 !important; } /* ---------- MULTISELECT (.custom-select) ---------- */ html.dark .custom-select, html.dark .multiselect.dropdown-toggle { background-color: #232c38 !important; color: #e8edf2 !important; border-color: #36424f !important; } html.dark .custom-select:hover, html.dark .custom-select:focus, html.dark .multiselect.dropdown-toggle:hover, html.dark .multiselect.dropdown-toggle:focus { background-color: #2c3744 !important; color: #fff !important; } html.dark .custom-select .caret { border-top-color: #d7dee6 !important; } /* Panel desplegable del multiselect */ html.dark .multiselect-container.dropdown-menu { background-color: #232c38 !important; border-color: #36424f !important; box-shadow: 0 6px 20px rgba(0,0,0,.5) !important; } html.dark .multiselect-container > li > a, html.dark .multiselect-container > li > a > label { color: #d7dee6 !important; background-color: transparent !important; } html.dark .multiselect-container > li > a:hover, html.dark .multiselect-container > li.active > a, html.dark .multiselect-container > li > a:focus { background-color: #2c3744 !important; color: #fff !important; } html.dark .multiselect-container > li.multiselect-group > a, html.dark .multiselect-container .multiselect-group label { color: #8a949e !important; } html.dark .multiselect-container .input-group, html.dark .multiselect-container .multiselect-search { background-color: #1b222c !important; color: #e8edf2 !important; border-color: #36424f !important; } html.dark .multiselect-container li.divider { background-color: #36424f !important; } /* ---------- BOTÓN TOGGLE EN SIDENAV ---------- */ #menu_dark_toggle a { cursor: pointer; }