/* Variables de Color */
:root {
    --color-oscuro-1: #181919;
    --color-oscuro-2: #0E1010;
    --color-blanco: #fff;
    --color-box-shadow-card: rgb(141 141 141 / 20%);
    --color-background-icon-home: #4e4a47;
}

body.dark-mode {
    background-color: var(--color-oscuro-2);
}

body.dark-mode header#header {
    background-color: var(--color-oscuro-1);
    box-shadow: inset 0 0 55px var(--color-box-shadow-card) !important;
}

body.dark-mode main#main {
    background-color: var(--color-oscuro-2);
}

body.dark-mode .card {
    background-color: var(--color-oscuro-1);
    box-shadow: inset 0 0 55px var(--color-box-shadow-card) !important;
}

body.dark-mode h1 {
    color: var(--color-blanco);
}

body.dark-mode h5 {
    color: var(--color-blanco);
}

body.dark-mode h6 {
    color: var(--color-blanco) !important;
}

body.dark-mode a {
    color: var(--color-blanco) !important;
}

body.dark-mode .text-muted {
    color: var(--color-blanco) !important;
}

body.dark-mode .dashboard .customers-card .card-icon{
    background: var(--color-background-icon-home);
}

body.dark-mode .dashboard .revenue-card .card-icon{
    background: var(--color-background-icon-home);
}

body.dark-mode .dashboard .sales-card .card-icon{
    background: var(--color-background-icon-home);
}

body.dark-mode footer#footer{
    background-color: var(--color-oscuro-1);
    border-top: 0;
    box-shadow: inset 0 0 55px var(--color-box-shadow-card);
}

body.dark-mode .copyright{
    color: var(--color-blanco);
}

body.dark-mode .credits{
    color: var(--color-blanco);
}


body.dark-mode .table tbody tr td {
    color: white;
    background-color: var(--color-oscuro-1) !important;
}

body.dark-mode .table tbody tr td button.btn-primary{
    background-color: #30486c;
    border: 0;
}

body.dark-mode .table tbody tr td button.btn-primary:hover{
    background-color: #0d6efd;
    border: 0;
}

body.dark-mode .table tbody tr td button.btn-info{
    background-color: #27616c;
    border: 0;
}

body.dark-mode .table tbody tr td button.btn-info:hover{
    background-color: #0dcaf0;
    border: 0;
}

body.dark-mode .table tbody tr td button.btn-danger{
    background-color: #69282e;
    border: 0;
}

body.dark-mode .table tbody tr td button.btn-danger:hover{
    background-color: #dc3545;
    border: 0;
}

body.dark-mode .table tbody tr td button.btn-success{
    background-color: #325143;
    border: 0;
}

body.dark-mode .table tbody tr td button.btn-success:hover{
    background-color: #198754;
    border: 0;
}

body.dark-mode .table tbody tr td span.badge.bg-success{
    background-color: #325143 !important;
}

body.dark-mode .table tbody tr td span.badge.bg-danger{
    background-color: #69282e !important;
}

body.dark-mode .table tbody tr td span.badge.bg-primary{
    background-color: #30486c !important;
}

body.dark-mode .table thead tr th {
    color: white;
    background-color: var(--color-oscuro-1) !important;
}

body.dark-mode input#dt-search-0 {
    background-color: var(--color-oscuro-1);
    color: var(--color-blanco);
}

body.dark-mode li.dt-paging-button.page-item.disabled button{
    background-color: var(--color-oscuro-1);
    color: var(--color-blanco);
}

body.dark-mode li.dt-paging-button.page-item.active button{
    background-color: #30486c;
    border: 1px solid var(--color-blanco);
    color: var(--color-blanco);
}

body.dark-mode aside#sidebar{
    background-color: var(--color-oscuro-1);
}

body.dark-mode a.nav-link {
    background-color: var(--color-oscuro-2);
}

body.dark-mode a.nav-link:hover {
    background-color: var(--color-oscuro-2);
}

body.dark-mode a.nav-link.collapsed {
    background-color: #232424;
}

body.dark-mode a.nav-link.collapsed:hover {
    background-color: var(--color-oscuro-2);
}

body.dark-mode i.bi.bi-list.toggle-sidebar-btn {
    color: var(--color-blanco)
}

body.dark-mode a.nav-link.nav-profile {
    background: none !important;
}

body.dark-mode ul.dropdown-menu.dropdown-menu-end.dropdown-menu-arrow.profile.show{
    background-color: var(--color-oscuro-1);
    box-shadow: inset 0 0 55px var(--color-box-shadow-card);
}

body.dark-mode .header-nav .profile .dropdown-item:hover:hover {
    background-color: var(--color-oscuro-2);
    color: var(--color-blanco);
}

body.dark-mode button.dropdown-item{
    color: var(--color-blanco);
}
body.dark-mode button.dropdown-item:hover{
    color: var(--color-blanco);
}

body.dark-mode .dropdown-menu-arrow::before{
    background-color: var(--color-oscuro-1);
    border-top: 0;
    border-left: 0;
    box-shadow: inset 0 0 55px var(--color-box-shadow-card);
}

body.dark-mode button.btn-primary{
    background-color: #30486c;
    border: 0;
}

body.dark-mode button.btn-primary:hover{
    background-color: #0d6efd;
    border: 0;
}

body.dark-mode a.btn-primary{
    background-color: #30486c;
    border: 0;
}

body.dark-mode a.btn-primary:hover{
    background-color: #0d6efd;
    border: 0;
}
body.dark-mode .modal-content {
    background-color: var(--color-oscuro-1);
    box-shadow: inset 0 0 55px var(--color-box-shadow-card);
}

body.dark-mode label.form-label{
    color: var(--color-blanco);
}

body.dark-mode input{
    background-color: var(--color-oscuro-1);
    color: var(--color-blanco);
}

body.dark-mode .form-control:focus{
    background-color: var(--color-oscuro-1);
    color: var(--color-blanco);
}

body.dark-mode textarea{
    background-color: var(--color-oscuro-1);
    color: var(--color-blanco);
}

body.dark-mode span.select2-selection.select2-selection--multiple {
    background: var(--color-oscuro-1);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #3f5b85;
    border: 1px solid #3f5b85;
    color: var(--color-blanco);
}

ul#select2-id_empresa-results{
    background-color: var(--color-oscuro-1);
    box-shadow: inset 0 0 55px var(--color-box-shadow-card);
    color: var(--color-blanco);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: var(--color-oscuro-2);
}

.select2-container--default .select2-results__option--selected{
    background-color: var(--color-oscuro-2);
}

.select2-container--open .select2-dropdown--below{
    border: 0;
}

span.select2-selection.select2-selection--multiple {
    border: 1px solid var(--color-blanco) !important;
}