/* Definir variables de color para el modo oscuro */
:root {
    --primary-dark: #BC955C;
    --secondary-dark: #6c757d;
    --success-dark: #198754;
    --danger-dark: #dc3545;
    --warning-dark: #ffc107;
    --info-dark: #0dcaf0;
    --light-dark: #343a40;
    --dark-dark: #212529;
    --hover-opacity: 0.85;
}

/* Aplicar variables en el modo oscuro */
.dark-mode {
    background-color: #333333 !important;
    color: #ffffff !important;
}
    .dark-mode .swal2-container .swal2-popup {
        background-color: #4D4D4D !important;
        color: #F2E8DC !important;
    }
    /* Botones en modo oscuro */
    .dark-mode .btn-primary {
        background-color: var(--primary-dark) !important;
        border-color: var(--primary-dark) !important;
        color: #ffffff !important;
    }

    .dark-mode .btn-secondary {
        background-color: var(--secondary-dark) !important;
        border-color: var(--secondary-dark) !important;
        color: #ffffff !important;
    }

    .dark-mode .btn-success {
        background-color: var(--success-dark) !important;
        border-color: var(--success-dark) !important;
        color: #ffffff !important;
    }

    .dark-mode .btn-danger {
        background-color: var(--danger-dark) !important;
        border-color: var(--danger-dark) !important;
        color: #ffffff !important;
    }

    .dark-mode .btn-warning {
        background-color: var(--warning-dark) !important;
        border-color: var(--warning-dark) !important;
        color: #000000 !important;
    }

    .dark-mode .btn-info {
        background-color: var(--info-dark) !important;
        border-color: var(--info-dark) !important;
        color: #000000 !important;
    }

    .dark-mode .btn-light {
        background-color: var(--light-dark) !important;
        border-color: var(--light-dark) !important;
        color: #ffffff !important;
    }

    .dark-mode .btn-dark {
        background-color: var(--dark-dark) !important;
        border-color: var(--dark-dark) !important;
        color: #ffffff !important;
    }

    /* Efectos :hover, :focus y :active */
    .dark-mode .btn:hover,
    .dark-mode .btn:focus,
    .dark-mode .btn:active {
        opacity: var(--hover-opacity);
    }

    .dark-mode .breadcrumb a {
        color: #BC9459 !important;
    }

    .dark-mode .breadcrumb-item + .breadcrumb-item::before {
        float: left;
        padding-right: .5rem;
        content: "/";
        color: #BC9459 !important;
    }

    .dark-mode .card {
        background-color: #4D4D4D !important;
        border-color: #4D4D4D !important;
        color: #F2E8DC !important;
    }

    .dark-mode .modal-heder {
        background-color: #912846 !important;
        border-color: #912846 !important;
        color: #333333 !important;
    }

    .dark-mode .modal-body {
        background-color: #4D4D4D !important;
        border-color: #4D4D4D !important;
        color: #F2E8DC !important;
    }

    .dark-mode .modal-footer {
        background-color: #4D4D4D !important;
        /*border-color: #4D4D4D !important;*/
        border-top: 1px solid #F2EADA !important;
        color: #F2E8DC !important;
    }

    /* Table */
    .dark-mode .table {
        color: #ffffff !important;
    }

    .dark-mode .page-item.active .page-link {
        background-color: #BC9459 !important;
        border-color: #BC9459 !important;
    }

    .dark-mode table.table.dataTable > :not(caption) > * > * {
        background-color: #4D4D4D !important;
        color: #ffffff !important;
    }
    /* end */

    /* Nav */
    .dark-mode .navbar {
        background-color: #333333 !important;
        border-bottom: 1px solid #F2EADA !important;
        color: #F2EADA !important;
        padding: 0;
        margin: 0;
    }
        /*SE ELIMINO PARA BOOTSTRAP 5*/
        /*.dark-mode .navbar .nav-item .nav-link {
            padding-top: 10px;
            padding-bottom: 5px;
            margin: 5px;
        }*/

            .dark-mode .navbar .nav-item .nav-link:hover {
                background-color: #F2EADA !important;
                border: 1px solid #F2EADA !important;
                color: #333333 !important;
                font-weight: 500;
            }
    /*SE AGREGO PARA BOOTSTRAP 5*/
    .dark-mode .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
        border-color: #333333 !important;
        background-color: #333333 !important;
    }

    .dark-mode .sub-navbar .navbar-collapse {
        background-color: #333333 !important;
        color: #fff;
        margin-top: 20px;
        margin-left: 0;
    }
/* end */
/* Footer */
.dark-mode .main-footer {
    background-color: #333333 !important;
    border-top: 1px solid #F2EADA !important;
    color: #F2EADA !important;
}

    .dark-mode .footer-pleca {
        background-color: #333333;
        background-image: url(https://www.sat.gob.mx/_app/immutable/assets/pleca-gris.1cba2085.svg);
        background-repeat: repeat-x;
    }
    /*end */

    /* Tabs */
    .dark-mode .nav-tabs .nav-link, .nav-tabs .nav-item.show .nav-link {
        color: #595959;
        background-color: #E7DBC1;
        border-color: #E7DBC1;
        font-weight: bold;
    }

        .dark-mode .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
            color: #FFFFFF;
            background-color: #BC955C;
            border-color: #BC955C;
            font-weight: bold;
        }
    /* end */

    /* Input read only */
    .dark-mode input:read-only {
        background-color: #B9C1BE !important;
        border-color: #B9C1BE !important;
        color: #F2E8DC !important;
    }
    /* end */

    /* Sombra para modo oscuro */
    .dark-mode .shadow {
        -webkit-box-shadow: 0px 0px 26px 1px rgba(255, 255, 255, 0.2);
        -moz-box-shadow: 0px 0px 26px 1px rgba(255, 255, 255, 0.2);
        box-shadow: 0px 0px 26px 1px rgba(255, 255, 255, 0.2);
    }
/* end */


/* Contenedor del switch */
/*.toggle_switch {
    width: 48px;*/ /* Reducido un 20% */
/*height: 24px;
    position: relative;
    border-radius: 10px;
    background-color: #e0e0e0;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
    transition: background 0.3s ease;
}*/

/* Ocultar el input */
/*.toggle_switch input {
        display: none;
    }*/

/* Slider del switch */
/*.toggle_switch .slider {
        width: 16px;
        height: 16px;
        background-color: yellow;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 3px;
        transform: translateY(-50%);
        transition: transform 0.3s ease, background 0.3s ease;
    }*/

/* Estado activado */
/*.toggle_switch input:checked + .slider {
        transform: translate(26px, -50%);
        background-color: white;
    }

    .toggle_switch .slider::before {
        display: none !important;
    }*/


/* Contenedor del switch */
.toggle_switch {
    width: 52.8px; /* Aumentado un 10% */
    height: 26.4px; /* Aumentado un 10% */
    position: relative;
    border-radius: 15px; /* Aumentado el redondeo */
    /*background-color: #e0e0e0;*/
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
    transition: background 0.3s ease, border 0.3s ease;
    border: 2px solid yellow; /* Borde amarillo por defecto */
}

    /* Ocultar el input */
    .toggle_switch input {
        display: none;
    }

    /* Slider del switch */
    .toggle_switch .slider {
        width: 17.6px; /* Aumentado un 10% */
        height: 17.6px; /* Aumentado un 10% */
        background-color: yellow;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 3px;
        transform: translateY(-50%);
        transition: transform 0.3s ease, background 0.3s ease;
    }

        /* Iconos */
        .toggle_switch .slider::before,
        .toggle_switch .slider::after {
            content: '';
            position: absolute;
            font-size: 14px; /* Aumentado el tamaño de los iconos */
            transition: opacity 0.3s ease, color 0.3s ease;
            top: 50%; /* Alineación vertical */
            transform: translateY(-50%); /* Alineación vertical */
        }

        .toggle_switch .slider::before {
            content: '\f186'; /* Unicode de la luna en Font Awesome */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            left: -20px !important; /* Ajusta la posición de la luna */
            color: white; /* Color de la luna */
            opacity: 0;
        }

        .toggle_switch .slider::after {
            content: '\f185'; /* Unicode del sol en Font Awesome */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            right: -20px !important; /* Ajusta la posición del sol */
            color: yellow; /* Color del sol */
            opacity: 1;
        }

    /* Estado activado */
    .toggle_switch input:checked + .slider {
        transform: translate(26.4px, -50%); /* Ajustado para el nuevo tamaño */
        background-color: white;
    }

        .toggle_switch input:checked + .slider::before {
            opacity: 1;
            left: -20px; /* Ajusta la posición de la luna en modo oscuro */
        }

        .toggle_switch input:checked + .slider::after {
            opacity: 0;
            right: -20px; /* Ajusta la posición del sol en modo claro */
        }

    /* Borde blanco en modo oscuro */
    .toggle_switch input:checked + .slider {
        border: 2px solid white;
    }