/* ======================================= DARK MODE GLOBAL (se activa con html.dark-mode en ) ======================================= */ html.dark-mode body { background-color: #212121; color: #fff; } html.dark-mode .logo-circle{ background-image: url("../img/logo-circle-white.png"); background-size: cover; background-position: center; } html.dark-mode .btn-light.active, html.dark-mode .btn-outline-light.active { /* color: var(--bs-primary) !important; */ font-weight: bold; border-color: var(--bs-primary) !important; } html.dark-mode .btn-outline-dark{ color: white; border-color: white; } /* =========================== Fondos y layouts principales =========================== */ html.dark-mode #nav-principal { background: #171717; } html.dark-mode .card { background-color: #303030; } html.dark-mode .sb-sidenav-dark { background-color: #171717; } /* =========================== Colores de texto invertidos =========================== */ html.dark-mode .text-white { color: #000 !important; } html.dark-mode .text-dark { color: #fff !important; } /* =========================== Fondos y elementos light =========================== */ html.dark-mode .bg-light { background-color: #303030 !important; } /* =========================== Paginación y enlaces en tablas =========================== */ html.dark-mode .page-link, html.dark-mode .dataTable-pagination a { position: relative; display: block; color: #0d6efd; text-decoration: none; background-color: #303030; border: 1px solid #212121; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } /* =========================== Botones y dropdowns "light" =========================== */ html.dark-mode .btn-light, html.dark-mode .btn-outline-light { background-color: #303030 !important; color: #f0f0f0 !important; border-color: #3a3a3a !important; } html.dark-mode .btn-light.dropdown-toggle { border-color: #3a3a3a !important; } html.dark-mode .btn-light:hover, html.dark-mode .btn-outline-light:hover { background-color: #3a3a3a !important; color: #ffffff !important; } html.dark-mode .btn-light:active, html.dark-mode .btn-outline-light:active, html.dark-mode .btn-light:focus, html.dark-mode .btn-outline-light:focus { background-color: #2b2b2b !important; color: #ffffff !important; box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.1); } /* =========================== Botones secundarios =========================== */ html.dark-mode .btn-secondary { background-color: #303030 !important; border-color: #3a3a3a !important; color: #f0f0f0 !important; } html.dark-mode .btn-secondary:hover { background-color: #3a3a3a !important; } /* =========================== Dropdown menus =========================== */ html.dark-mode .dropdown-menu { background-color: #303030; border: 1px solid #3a3a3a; color: #f0f0f0; } html.dark-mode .dropdown-menu .dropdown-item { color: #f0f0f0; } html.dark-mode .dropdown-menu .dropdown-item:hover, html.dark-mode .dropdown-menu .dropdown-item:focus { background-color: #3a3a3a; color: #ffffff; } html.dark-mode .dropdown-divider { border-top: 1px solid #444; } html.dark-mode .dropdown-toggle::after { filter: brightness(1.5); } /* =========================== Badges =========================== */ html.dark-mode .badge.bg-light, html.dark-mode .badge-light { background-color: #303030 !important; color: #e0e0e0 !important; } /* =========================== Alerts =========================== */ html.dark-mode .alert-light { background-color: #303030; border-color: #3a3a3a; color: #f0f0f0; } /* =========================== List groups =========================== */ html.dark-mode .list-group-item-light { background-color: #303030; color: #e0e0e0; } html.dark-mode .list-group-item-light:hover { background-color: #3a3a3a; } html.dark-mode .list-group-item { color: #fff; background-color: #303030; border: 1px solid rgba(0, 0, 0, 0.125); } html.dark-mode .list-group-item:hover { background-color: #3a3a3a; } /* =========================== Navbar light =========================== */ html.dark-mode .navbar-light { background-color: #303030 !important; border-bottom: 1px solid #3a3a3a; } html.dark-mode .navbar-light .navbar-nav .nav-link { color: #f0f0f0 !important; } html.dark-mode .navbar-light .navbar-nav .nav-link:hover { color: #ffffff !important; } /* =========================== Tooltips =========================== */ html.dark-mode .tooltip-inner { background-color: #303030; color: #f0f0f0; border: 1px solid #3a3a3a; } html.dark-mode .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before, html.dark-mode .bs-tooltip-top .tooltip-arrow::before { border-top-color: #303030; } html.dark-mode .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before, html.dark-mode .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #303030; } /* =========================== Cards =========================== */ html.dark-mode .card.bg-light, html.dark-mode .card-light { background-color: #303030 !important; border-color: #3a3a3a !important; color: #f0f0f0 !important; } html.dark-mode .card.bg-light .card-header { background-color: #353535 !important; border-bottom: 1px solid #444; } /* =========================== Formularios y controles =========================== */ html.dark-mode .form-control, html.dark-mode .dataTable-input, html.dark-mode .form-control:disabled, html.dark-mode .dataTable-input:disabled, html.dark-mode .form-control[readonly], html.dark-mode [readonly].dataTable-input { color: white; background-color: #404040; border: 1px solid #303030; } html.dark-mode .form-control-alt[readonly]:not([disabled]) { border-color: #303030; background-color: #404040; opacity: 1; } html.dark-mode .form-control:focus { color: white; background-color: #404040; border: 1px solid #303030; } /* =========================== Tablas Bootstrap 5.1.3 =========================== */ html.dark-mode .table { --bs-table-bg: #151515; --bs-table-striped-bg: #191919; --bs-table-striped-color: #e0e0e0; --bs-table-active-bg: #2e2e2e; --bs-table-active-color: #fff; --bs-table-hover-bg: #2a2a2a; --bs-table-hover-color: #fff; color: #ddd; background-color: var(--bs-table-bg); border-color: #3a3a3a; } html.dark-mode .table.table-bordered { border: 1px solid #3a3a3a; } html.dark-mode .table.table-bordered th, html.dark-mode .table.table-bordered td { border: 1px solid #3a3a3a; } html.dark-mode .table thead th { background-color: #282828; color: #f2f2f2; border-color: #454545; } html.dark-mode .table tbody tr:hover { background-color: var(--bs-table-hover-bg); color: var(--bs-table-hover-color); } html.dark-mode .table.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--bs-table-striped-bg); } html.dark-mode .table > tbody > tr.active > * { background-color: var(--bs-table-active-bg); color: var(--bs-table-active-color); } html.dark-mode .table a { color: #79b8ff; } html.dark-mode .table a:hover { color: #a5d6ff; } html.dark-mode .btn-outline-white{ color: white; border-color: white; } html.dark-mode .btn-outline-white:hover{ color: goldenrod; border-color: goldenrod; } html.dark-mode .input-group-text{ background-color: #404040; color: white; border-color: #303030; } /* html.dark-mode .table input, html.dark-mode .table select, html.dark-mode .table textarea { background-color: #2a2a2a; color: #e0e0e0; border: 1px solid #444; } */ /* html.dark-mode .table input:focus, html.dark-mode .table select:focus, html.dark-mode .table textarea:focus { background-color: #333; border-color: #666; color: #fff; } */ html.dark-mode .table.table-responsive { background-color: transparent; } html.dark-mode input:-internal-autofill-selected { appearance: menulist-button; background-image: none !important; background-color: #404040 !important; color: fieldtext !important; } html.dark-mode .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #303030; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0; } html.dark-mode .modal-footer { border-top: 1px solid #212121; } html.dark-mode .modal-header { border-bottom: 1px solid #212121; } html.dark-mode .nav-tabs .nav-link.active, html.dark-mode .nav-tabs .nav-item.show .nav-link { color: white; background-color: #404040; border-color: #212121; } html.dark-mode .nav-tabs { border-bottom: 1px solid #212121; } html.dark-mode .modal-body.body-bg{ background-color: #212121; } html.dark-mode .tab-content{ background-color: #303030; border:1px solid #212121; } html.dark-mode .btn-close{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") } html.dark-mode .modal-backdrop-custom.show { opacity: 0.80; } /* =============================== CONTENEDOR =============================== */ html.dark-mode #ui-datepicker-div.ui-datepicker { background: #141414 !important; border: 1px solid #2b2b2b !important; color: #e6e6e6 !important; box-shadow: 0 10px 30px rgba(0,0,0,.7) !important; border-radius: 6px !important; font-size: 16px !important; z-index: 9999 !important; } /* =============================== HEADER =============================== */ html.dark-mode #ui-datepicker-div .ui-datepicker-header { background: #1f1f1f !important; border-bottom: 1px solid #2b2b2b !important; color: #ffffff !important; } /* TITULO */ html.dark-mode #ui-datepicker-div .ui-datepicker-title { color: #ffffff !important; font-weight: 600 !important; } /* PREV / NEXT */ html.dark-mode #ui-datepicker-div .ui-datepicker-prev, html.dark-mode #ui-datepicker-div .ui-datepicker-next { background: transparent !important; border-radius: 4px !important; } html.dark-mode #ui-datepicker-div .ui-datepicker-prev:hover, html.dark-mode #ui-datepicker-div .ui-datepicker-next:hover { background: #333 !important; } /* FLECHAS */ html.dark-mode #ui-datepicker-div .ui-datepicker-prev span, html.dark-mode #ui-datepicker-div .ui-datepicker-next span { filter: invert(1) !important; } /* =============================== TABLA =============================== */ html.dark-mode #ui-datepicker-div table { width: 100% !important; border-collapse: collapse !important; } /* DIAS SEMANA */ html.dark-mode #ui-datepicker-div th { color: #999 !important; font-weight: 500 !important; padding: 6px 0 !important; } /* CELDAS */ html.dark-mode #ui-datepicker-div td { padding: 2px !important; } /* DIA */ html.dark-mode #ui-datepicker-div td a, html.dark-mode #ui-datepicker-div td span { display: block !important; padding: 6px 0 !important; text-align: center !important; border-radius: 4px !important; color: #ddd !important; text-decoration: none !important; background: transparent !important; } /* HOVER */ html.dark-mode #ui-datepicker-div td a:hover { background: #333 !important; color: #fff !important; } /* DIA SELECCIONADO */ html.dark-mode #ui-datepicker-div .ui-state-active { background: #0d6efd !important; color: #fff !important; } /* HOY */ html.dark-mode #ui-datepicker-div .ui-state-highlight { background: #2f80ed !important; color: #fff !important; font-weight: 600 !important; } /* OTRO MES */ html.dark-mode #ui-datepicker-div .ui-datepicker-other-month a { color: #555 !important; } /* DESHABILITADO */ html.dark-mode #ui-datepicker-div .ui-state-disabled span { color: #444 !important; } /* =============================== FOOTER =============================== */ html.dark-mode #ui-datepicker-div .ui-datepicker-buttonpane { background: #1f1f1f !important; border-top: 1px solid #2b2b2b !important; } html.dark-mode #ui-datepicker-div .ui-datepicker-buttonpane button { background: #333 !important; color: #fff !important; border: 1px solid #444 !important; border-radius: 4px !important; } html.dark-mode #ui-datepicker-div .ui-datepicker-buttonpane button:hover { background: #444 !important; } /* =============================== BORRAR BORDES DEFAULT =============================== */ html.dark-mode #ui-datepicker-div .ui-state-default, html.dark-mode #ui-datepicker-div .ui-widget-content, html.dark-mode #ui-datepicker-div .ui-widget-header { border: none !important; background: transparent !important; } html.dark-mode .focusable[tabindex]:hover { z-index: 5; color: #6610f2; text-decoration: none; border-left: #6610f2 2px dashed; border-right: #6610f2 2px dashed; outline: #6610f2 2px dashed; background-color: #404040; } html.dark-mode .focusable[tabindex]:focus { z-index: 10; color: #6610f2; text-decoration: none; border-left: #6610f2 2px dashed; border-right: #6610f2 2px dashed; outline: #6610f2 2px dashed; background-color: #404040; } html.dark-mode .list-group-item-action[tabindex]:hover { z-index: 10; color: #6610f2; text-decoration: none; border-left: #6610f2 2px dashed; border-right: #6610f2 2px dashed; outline: #6610f2 2px dashed; background-color: #404040; } html.dark-mode .list-group-item-action[tabindex]:focus { z-index: 10; color: #6610f2; text-decoration: none; border-left: #6610f2 2px dashed; border-right: #6610f2 2px dashed; outline: #6610f2 2px dashed; background-color: #404040; }