/* DarkMode.css */

/* customize primary dark */
[data-bs-theme="dark"] {
    --bs-primary: #001199;
    --bs-primary-bg-subtle: #001199;
    --bs-primary-bg-subtle-dark: #001199;
    background-color: #121212; /* Fondo oscuro para el modo oscuro */
    color: #ffffff; /* Color de texto en modo oscuro */
}

    [data-bs-theme="dark"] .btn-primary {
        --bs-btn-bg: #001199;
    }

    /* Anular bg-white en modo oscuro */
    [data-bs-theme="dark"] .bg-white {
        background-color: #1e1e1e !important; /* Color de fondo oscuro */
        color: #ffffff; /* Color de texto en elementos con bg-white */
    }

    /* Otros estilos oscuros */
    [data-bs-theme="dark"] header {
        background-color: #1e1e1e; /* Fondo del header en modo oscuro */
    }

    [data-bs-theme="dark"] footer {
        background-color: #1e1e1e; /* Fondo del footer en modo oscuro */
    }

    [data-bs-theme="dark"] .navbar {
        background-color: #1e1e1e; /* Fondo de la navbar en modo oscuro */
    }

    /* Cambiar el color del enlace a blanco en modo oscuro */
    [data-bs-theme="dark"] .nav-link {
        color: #ffffff !important; /* Cambiar el color del texto a blanco en modo oscuro */
    }

    /* Estilos para el modo oscuro */
    [data-bs-theme='dark'] .tabButton {
        background-color: #343a40; /* Color de fondo oscuro */
        color: #ffffff; /* Color del texto blanco */
    }

    [data-bs-theme='dark'] .tabButtonActive {
        background-color: #495057; /* Color para el botón activo en modo oscuro */
        color: #ffffff; /* Color del texto blanco */
    }

    [data-bs-theme='dark'] .btn-check:checked + .tabButton {
        background-color: #495057; /* Color de fondo del botón seleccionado */
        color: #ffffff; /* Color del texto en botón seleccionado */
    }


    [data-bs-theme="dark"] .accordion-button {
        background-color: #1e1e1e; /* Fondo oscuro para los botones de acordeón */
        color: #ffffff; /* Color de texto */
    }

    [data-bs-theme="dark"] .accordion-body {
        background-color: #1e1e1e; /* Fondo oscuro para el cuerpo del acordeón */
        color: #ffffff; /* Color de texto */
    }

    /* order details */
       /* Estilos específicos para modo oscuro */
        [data-bs-theme="dark"] .header-content h3,
        [data-bs-theme="dark"] .header-content h5 {
            color: #ffffff; /* Texto blanco en modo oscuro */
        }


    [data-bs-theme="dark"] .topnav {
        background-color: #03458b;
    }

    [data-bs-theme="dark"] .header-item {
        background-color: #031633;
        
    }


    [data-bs-theme="dark"] #orderStatusList {
        background-color: #03458b;
        color: #ffffff;
    }

        [data-bs-theme="dark"] .accordion-button {
            background-color: #1e1e1e;
            color: #ffffff;
        }

        [data-bs-theme="dark"] .accordion-body {
            background-color: #1e1e1e;
            color: #ffffff;
        }

        [data-bs-theme="dark"] .btn-outline-primary {
            color: #ffffff;
            border-color: #ffffff;
        }

        [data-bs-theme="dark"] .container-fluid {
            background-color: #1e1e1e; /* Fondo oscuro para el contenedor */
            color: #ffffff; /* Texto en blanco */
        }

        [data-bs-theme="dark"] .totalFooter {
            background-color: #343a40; /* Fondo oscuro del total */
            color: #ffffff;
        }

        [data-bs-theme="dark"] .topnav .btn-outline-primary {
            color: #ffffff;
            border-color: #ffffff;
        }

        [data-bs-theme="dark"] .measures {
            color: #ffffff;
        }

    [data-bs-theme="dark"] .totalAmount {
        background-color: #03458b;
    }

    [data-bs-theme="dark"] .measures:nth-child(odd) {
        background-color: #031633; /* Estilo para los elementos impares */
    }

    [data-bs-theme="dark"] .measures:nth-child(even) {
        background-color: #1e1e1e; /* Estilo para los elementos pares */
    }

    [data-bs-theme="dark"] .deliveryData {
        background-color: #031633;
    }