:root {
    --darkmode-bg-main: #1e1e1e;
    --darkmode-bg-secondary: #2c3643;
    --darkmode-bg-lightdark: #454d55;
    --darkmode-input: #343a40;
    --darkmode-text: #f1f1f1;
}

/* Dark mode estilos (general) */
body.dark-mode,
body.dark-mode .preloader {
    background-color: var(--darkmode-bg-main);
    color: var(--darkmode-text);
}

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

body.dark-mode #toggleDarkMode i{
    color: var(--darkmode-text) !important;
}

body.dark-mode input::placeholder {
    color: var(--darkmode-text);
    opacity: 1;
}

body.dark-mode .container-fluid,
body.dark-mode .container-fluid > div{
    border: none !important;
}

body.dark-mode .container-fluid div,
body.dark-mode .login-container div{
    background-color: var(--darkmode-bg-main);
    color: var(--darkmode-text);
}

body.dark-mode .modal-content .container-fluid{
    background-color: var(--darkmode-bg-main) !important;
}

body.dark-mode .container-fluid .tableContainer{
    background-color: var(--darkmode-bg-main) !important;
}

body.dark-mode .container-fluid td {
    background-color: var(--darkmode-bg-secondary);
    color: var(--darkmode-text);
}

body.dark-mode .container-fluid form{
    background-color: var(--darkmode-bg-main);
}

body.dark-mode .container-fluid td div{
    background-color: var(--darkmode-bg-secondary);
    color: var(--darkmode-text);
}

body.dark-mode .container-fluid .botonBoostrapTable{
    color: var(--darkmode-bg-main) !important;
}

body.dark-mode .modal-body{
    background-color: var(--darkmode-bg-main) !important;
}

body.dark-mode .modal-body .table{
    background-color: var(--darkmode-bg-main) !important;
    color: var(--darkmode-text) !important;
}

body.dark-mode .breadcrumbs{
    color: var(--darkmode-text);
}

/* Menu lateral */
body.dark-mode .main-sidebar {
    background-color: var(--darkmode-bg-main) !important;
}

body.dark-mode .main-sidebar .nav-link i{
    color: var(--darkmode-text) !important;
}

body.dark-mode .main-sidebar .nav-sidebar .nav-link p{
    color: var(--darkmode-text) !important;
}

body.dark-mode .main-sidebar .nav-sidebar .nav-link.active{
    background-color: var(--darkmode-bg-secondary) !important;
}

body.dark-mode .main-sidebar .nav-sidebar .nav-link.active i{
    color: var(--darkmode-text) !important;
}

/* Componente card */
body.dark-mode .container-fluid .optionsMenu div{
    background-color: var(--darkmode-bg-lightdark);
}

body.dark-mode .container-fluid .optionsMenu .cardComponent{
    background-color: var(--darkmode-bg-main);
    border: none !important;
}

body.dark-mode .container-fluid .optionsMenu .cardComponent div{
    background-color: var(--darkmode-bg-main);
}

/* Select options */
body.dark-mode option{
    background-color: var(--darkmode-bg-main);
    border: none !important;
}

body.dark-mode option:hover{
    background-color: var(--darkmode-bg-lightdark);
}

body.dark-mode .select2-selection,
body.dark-mode .form-select{
    background-color: var(--darkmode-input);
}

body.dark-mode .select2-selection[aria-disabled="true"],
body.dark-mode .form-select:disabled {
    background-color: var(--darkmode-bg-main);
    cursor: not-allowed;
}

body.dark-mode .select2-selection__rendered{
    color: var(--darkmode-text) !important;
}

/* Loader bootstrap table */
body.dark-mode .fixed-table-loading {
    background-color: var(--darkmode-bg-main) !important;
    color: var(--darkmode-text) !important;
    border: none !important;
}

/* Detail view bootstrap table */
body.dark-mode .detail-view div{
    background-color: var(--darkmode-input) !important;
}

/* Bootstrap table */
body.dark-mode .table-primary {
    --bs-table-bg: var(--bs-table-color) !important;
    --bs-table-color: var(--darkmode-bg-main) !important; 
}

body.dark-mode .bootstrap-table .detail{
    background-color: var(--darkmode-bg-main) !important;
}

body.dark-mode .bootstrap-table .page-link{
    color: var(--darkmode-text) !important;
}

body.dark-mode .horaComponent{
    color: var(--darkmode-text) !important;
    font-weight: bold;
}

body.dark-mode a{
    color: var(--darkmode-text);
}

body.dark-mode .rolCreate p{
    color: var(--darkmode-text) !important;
}

/* Logo Cope */
body.dark-mode .logoCope{
    display:none;
}

body.dark-mode .logoCopeBlanco{
    display: block !important;
}

/* Loader */
body.dark-mode .spinner-border{
    color: var(--darkmode-text) !important;
}

/* Login styles */
body.dark-mode .login-container .card{
    background-color: var(--darkmode-bg-lightdark);
    color: var(--darkmode-text);
}

body.dark-mode .login-container .card p{
    color: var(--darkmode-text) !important;
}

body.dark-mode .login-container input{
    background-color: var(--darkmode-bg-main);
    color: var(--darkmode-text);
}

body.dark-mode .login-container .input-group-text{
    background-color: var(--darkmode-bg-secondary);
    color: var(--darkmode-text);
}

/* Toast alert */
body.dark-mode #toastAlert,
body.dark-mode .toastAJAX{
    background-color: var(--darkmode-bg-main) !important;
    color: var(--darkmode-text) !important;
}

/* Index cards */
body.dark-mode .cardIndex h5,
body.dark-mode .cardIndex p,
body.dark-mode .cardIndex i{
    color: var(--darkmode-text) !important;
}

body.dark-mode .indexContainer h1,
body.dark-mode .indexContainer p{
    color: var(--darkmode-text) !important;
}

body.dark-mode .cardIndex{
    background-color: var(--darkmode-input) !important;
    border: none !important;
}

.bodyIndex.dark-mode{
    background-color: var(--darkmode-bg-main) !important;
}

/* Header */
body.dark-mode .content-header{
    background-color: var(--darkmode-bg-secondary) !important;
}


.theme-icon {
    width: 38px;
    height: 38px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 62 62'%3E%3Cg fill='%23ffce31'%3E%3Cpath d='m14.7 44.4l4.8-4.9c-1.7-.4-3.3-1-4.7-2zM30.3 6.6l-4.8 4.9c1.7.4 3.3 1 4.7 2zM3.6 33.3l6.9-.1c-.9-1.4-1.6-3-2-4.7zm37.8-15.6l-6.9.1c.9 1.4 1.6 3 2 4.7zm-37.8 0l4.9 4.8c.4-1.7 1-3.3 2-4.7zm37.8 15.6l-4.9-4.8c-.4 1.7-1 3.3-2 4.7zM14.7 6.6l.1 6.9c1.4-.9 3-1.6 4.7-2zm15.6 37.8l-.1-6.9c-1.4.9-3 1.6-4.7 2zM10.7 33.7L8 40l6.3-2.7q-2.1-1.5-3.6-3.6m23.6-16.4L37 11l-6.3 2.7q2.1 1.5 3.6 3.6M8.4 22.9L2 25.5l6.4 2.6c-.1-.8-.2-1.7-.2-2.6c-.1-.9 0-1.7.2-2.6m28.2 5.2l6.4-2.6l-6.4-2.6c.2.8.2 1.7.2 2.6s0 1.7-.2 2.6M14.3 13.7L8 11l2.7 6.3q1.5-2.1 3.6-3.6m16.4 23.6L37 40l-2.7-6.3q-1.5 2.1-3.6 3.6m-5.6-25.9L22.5 5l-2.6 6.4c.8-.1 1.7-.2 2.6-.2c.9-.1 1.7 0 2.6.2m-5.2 28.2l2.6 6.4l2.6-6.4c-.8.1-1.7.2-2.6.2s-1.7 0-2.6-.2'/%3E%3Ccircle cx='22.5' cy='25.5' r='13'/%3E%3C/g%3E%3Cpath fill='%23b1daf8' d='M17.2 57.1c-1 0-2-.2-2.9-.5c-3.8-1.3-6.4-4.9-6.4-9c0-2.7 1.2-5.4 3.2-7.2c.5-.5 1.1-.9 1.7-1.2l.6-2.2c1.5-5.5 6.5-9.3 12.1-9.3c.6 0 1.1 0 1.8.1l1.5.3l.2-.5c2.3-4.2 6.6-6.7 11.2-6.7C47.3 20.9 53 26.8 53 34v1.3c.5.2 1.1.5 1.6.8c3.4 2 5.5 5.8 5.5 9.8c0 5.3-3.5 9.8-8.6 11c-.8.2-1.7.3-2.5.3H17.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}


body.dark-mode .theme-icon {
    width: 38px;
    height: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='meteoconsStarryNightFill0' x1='54.3' x2='187.2' y1='29' y2='259.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2386c3db'/%3E%3Cstop offset='.5' stop-color='%2386c3db'/%3E%3Cstop offset='1' stop-color='%235eafcf'/%3E%3C/linearGradient%3E%3ClinearGradient id='meteoconsStarryNightFill1' x1='294' x2='330' y1='112.8' y2='175.2' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fcd966'/%3E%3Cstop offset='.5' stop-color='%23fcd966'/%3E%3Cstop offset='1' stop-color='%23fccd34'/%3E%3C/linearGradient%3E%3ClinearGradient id='meteoconsStarryNightFill2' x1='295.5' x2='316.5' y1='185.9' y2='222.1' href='%23meteoconsStarryNightFill1'/%3E%3ClinearGradient id='meteoconsStarryNightFill3' x1='356.3' x2='387.7' y1='194.8' y2='249.2' href='%23meteoconsStarryNightFill1'/%3E%3Csymbol id='meteoconsStarryNightFill4' viewBox='0 0 270 270'%3E%3Cpath fill='url(%23meteoconsStarryNightFill0)' stroke='%2372b9d5' stroke-linecap='round' stroke-linejoin='round' stroke-width='8.8' d='M252.3 168.6A133.4 133.4 0 0 1 118 36.2A130.5 130.5 0 0 1 122.5 3A133 133 0 0 0 3 134.6C3 207.7 63 267 137.2 267c62.5 0 114.8-42.2 129.8-99.2a135.6 135.6 0 0 1-14.8.8Z'%3E%3CanimateTransform additive='sum' attributeName='transform' dur='6s' repeatCount='indefinite' type='rotate' values='-15 135 135; 9 135 135; -15 135 135'/%3E%3C/path%3E%3C/symbol%3E%3C/defs%3E%3Cpath fill='url(%23meteoconsStarryNightFill1)' stroke='%23fcd34d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m282.8 162.8l25-6.4a1.8 1.8 0 0 1 1.7.5l18.3 18a1.8 1.8 0 0 0 3-1.7l-6.4-25a1.8 1.8 0 0 1 .5-1.7l18-18.4a1.8 1.8 0 0 0-1.8-3l-24.9 6.5a1.8 1.8 0 0 1-1.7-.5l-18.4-18a1.8 1.8 0 0 0-3 1.7l6.5 25a1.8 1.8 0 0 1-.5 1.7l-18 18.3a1.8 1.8 0 0 0 1.7 3Z'%3E%3CanimateTransform additive='sum' attributeName='transform' calcMode='spline' dur='6s' keySplines='.42, 0, .58, 1; .42, 0, .58, 1' repeatCount='indefinite' type='rotate' values='-15 312 144; 15 312 144; -15 312 144'/%3E%3Canimate attributeName='opacity' dur='6s' values='1; .75; 1; .75; 1; .75; 1'/%3E%3C/path%3E%3Cpath fill='url(%23meteoconsStarryNightFill2)' stroke='%23fcd34d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m285.4 193.4l12 12.3a1.2 1.2 0 0 1 .3 1.1l-4.3 16.6a1.2 1.2 0 0 0 2 1.2l12.3-12a1.2 1.2 0 0 1 1.1-.3l16.6 4.3a1.2 1.2 0 0 0 1.2-2l-12-12.3a1.2 1.2 0 0 1-.3-1.1l4.3-16.6a1.2 1.2 0 0 0-2-1.2l-12.3 12a1.2 1.2 0 0 1-1.1.3l-16.7-4.3a1.2 1.2 0 0 0-1.1 2Z'%3E%3CanimateTransform additive='sum' attributeName='transform' begin='-.33s' calcMode='spline' dur='6s' keySplines='.42, 0, .58, 1; .42, 0, .58, 1' repeatCount='indefinite' type='rotate' values='-15 306 204; 15 306 204; -15 306 204'/%3E%3Canimate attributeName='opacity' begin='-.33s' dur='6s' values='1; .75; 1; .75; 1; .75; 1'/%3E%3C/path%3E%3Cpath fill='url(%23meteoconsStarryNightFill3)' stroke='%23fcd34d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m337.3 223.7l24.8 7a1.8 1.8 0 0 1 1.3 1.2l6.9 24.8a1.8 1.8 0 0 0 3.4 0l7-24.8a1.8 1.8 0 0 1 1.2-1.3l24.8-6.9a1.8 1.8 0 0 0 0-3.4l-24.8-7a1.8 1.8 0 0 1-1.3-1.2l-6.9-24.8a1.8 1.8 0 0 0-3.4 0l-7 24.8a1.8 1.8 0 0 1-1.2 1.3l-24.8 6.9a1.8 1.8 0 0 0 0 3.4Z'%3E%3CanimateTransform additive='sum' attributeName='transform' begin='-.67s' calcMode='spline' dur='6s' keySplines='.42, 0, .58, 1; .42, 0, .58, 1' repeatCount='indefinite' type='rotate' values='-15 372 222; 15 372 222; -15 372 222'/%3E%3Canimate attributeName='opacity' begin='-.67s' dur='6s' values='1; .75; 1; .75; 1; .75; 1'/%3E%3C/path%3E%3Cuse width='270' height='270' href='%23meteoconsStarryNightFill4' transform='translate(121 121)'/%3E%3C/svg%3E");
}

body.dark-mode input:-webkit-autofill{
    -webkit-text-fill-color:var(--darkmode-input);
}

body.dark-mode input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--darkmode-input);
}

body.dark-mode input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--darkmode-input);
}