html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/*******************Estilos del loggin*/
.background_loggin {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.data_loggin img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

.loggin {
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: white;
    text-align: center;
}

.icon__user_loggin {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.btn_logging {
    width: 100%;
    color: white;
    border: none;
    padding: 0.5rem;
    border-radius: 5px;
    transition: 0.3s;
}


.forgetPassword_logging a {
    text-decoration: none;
    color: white;
}

.line_Separator {
    width: 100%;
    height: 1px;
    background-color: white;
    margin: 1rem 0;
}

/********************Estilos del loggin End*/

/************************
Estilos de la recuperación de contraseña
*************************/

.background_recoveryPassword {
    background-image: url(/backgrounds/recovery__password.png);
    padding-bottom: 4rem;
}

.data_recoveryPassword img {
    width: 20rem;
    margin: 2rem 0rem 0rem 2rem;
}

.recoveryPass_containter_data h4 {
    color: #b70000;
    margin-top: 2rem;
}
.input_email_recovery {
    width: 30rem;
    margin-top: 2rem;
}

.btn_recovery {
    background-color: #b70000;
    color: white;
    height: 2rem;
    width: 15rem;
    border: none;
    margin-top: 0rem;
    margin-bottom: 2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn_recovery:hover {
        background-color: #b70000;
    }

.recoveryContainer {
    background-color: #ffffff45;
    padding: 2rem 4rem;
    width: 100%;
    height: 30rem;
    border-radius: 25px;
    border: 1px solid white;
    
}

.form_recovery{
    margin-top: 1rem;
}
.maps{
    width: 20rem; 
    height: 10rem;
}

.info_support{
    margin: 0rem 4rem 0rem 0rem;
}

    .info_support h5{
        font-size: 3rem;
        font-weight: 600;
        margin: 0;
    }

    .info_support img {
        width: 5rem;
    }

.data_contact{
    margin-top: 2rem;
}


/************************
Estilos de la recuperación de contraseña End
*************************/


/************************
Estilos del menu principal
*************************/
.barra_superior {
    padding: 10px;
    background-color: #f8f9fa;
}

/* Icono hamburguesa (visible en móviles) */
.menu-hamburguesa {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

/* Menú lateral con animación */
.menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* 90% del ancho */
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out;
    z-index: 100;
    padding: 20px;
}

    /* Mostrar el menú con transición */
    .menu-container.open {
        transform: translateX(0);
        opacity: 1;
    }

    /* Links del menú */
    .menu-container a {
        display: block;
        padding: 10px;
        color: white;
        text-decoration: none;
        font-size: 18px;
    }

/* Botón de cerrar (X) dentro del menú */
.close-menu {
    position: absolute;
    top: 5px;
    right: 35px;
    font-size: 28px;
    color: white;
    cursor: pointer;
    z-index: 200;
}

/* Mostrar icono hamburguesa en móviles */
@media (max-width: 910px) {
    .menu-hamburguesa {
        display: block;
        margin-left: 1rem;
    }

    /* Ocultar el dropdown normal en móviles */
    .dropdown {
        display: none;
    }
}

.menu-container-options {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding: 20px;
}

.menu-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .menu-options a {
        text-decoration: none;
        color: white;
        font-size: 18px;
    }

.footer {
    text-align: center;
    font-size: 14px;
    color: white;
    padding-bottom: 20px;
}

/************************
Estilos del menu principal
*************************/

.main_main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.main_container_manu {
    width: 100%;
    max-width: 1200px;
    margin-bottom: 20px;
}

.main_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.main_menu, .main_menu_report {
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: #f8f9fa;
    margin-bottom: 10px;
}

.main_text_manu, .main_text_manu_reports {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.elements_menu {
    flex: 1 1 calc(25% - 20px);
    min-width: 150px;
    text-align: center;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

    .elements_menu img {
        width: 50px;
        height: 50px;

    }

    .elements_menu h6 {
        font-size: 14px;
    }

/************************
Estilos del menu principal
*************************/

.form-control {
    padding: 0rem .75rem;
    height: 2rem;
}


/* Contenedor general con ancho fijo de 60rem en pantallas grandes */
.main_wrapper {
    max-width: 60rem;
    width: 100%;

}

/* Estilos del encabezado del menú */
.main_menu {
    background-color: #6161e9;
    color: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0rem;
}

.user_info h5{
    font-size: 1.1rem;
    margin: 0;
}

.user_info label{
    font-size: 0.9rem;
        color: gray;

}

.main_menu_report {
    background-color: #6161e9;
    color: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0rem;
    padding: 0.2rem 0rem;
}

/* Contenedor del contenido del menú */
.main_text_manu {
    display: flex;
    justify-content: start; /* Distribuye el espacio entre elementos */
    align-items: center;
    margin-top: 2.5rem;
    gap: 2rem; /* Espacio entre los elementos */
}

/* Estilos de los elementos del menú */
.elements_menu img {
    width: 2.5rem; /* Ajusta el tamaño de las imágenes */
}

.elements_menu a{
    cursor: pointer;
    text-decoration: none;
}
.elements_menu h6:hover {
    color: indianred;
}

.elements_menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-basis: 18%; /* Ocupan un 18% del ancho del contenedor */
}

.main_text_manu h6 {
    color: #;
    margin-top: 1rem;
}

.main_text_manu_reports {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 2.5rem;
}

    .main_text_manu_reports h6 {
        color: #2a54ad;
        margin-top: 1rem;
    }


/* Media query para pantallas medianas (tablets, laptops pequeños) */
@media (max-width: 1024px) {
    .main_wrapper {
        max-width: 100%; /* Asegura que el ancho sea dinámico en pantallas más pequeñas */
    }

    .main_text_manu {
        justify-content: space-around; /* Asegura distribución uniforme */
    }

    .main_text_manu_reports {
        justify-content: space-around; /* Asegura distribución uniforme */
    }

    .elements_menu {
        flex-basis: 22%; /* Permite más espacio entre los elementos en pantallas medianas */
    }
}

/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .main_text_manu {
        align-items: center;
        width: 100%;
    }
    .main_text_manu_reports {
        align-items: center;
        width: 100%;
    }

    .elements_menu {
        flex-basis: 100%; /* Cada elemento ocupa el ancho completo */
    }

        .elements_menu img {
            width: 3rem; /* Ajusta el tamaño de las imágenes para pantallas pequeñas */
        }

    .main_menu {
        margin-top: 1rem;
    }
    .main_menu_report {
        margin-top: 1rem;
    }

    .main_text_manu h6 {
        font-size: 1rem; /* Ajusta el tamaño del texto */
    }
    .main_text_manu_reports h6 {
        font-size: 1rem; /* Ajusta el tamaño del texto */
    }
}




.imag_loggin {
    display: flex;
    justify-content: center;
}

/***********************************/
/*Seccion defs catalogo*/
/***********************************/

.menu__lateral {
    background-color: white;
    color: black;
}

    .menu__lateral img{
        width: 10rem;
    }

    .container__catalog {
        display: flex;
        height: 100vh;
    }

.sidebar {
    width: 250px; /* Ancho del menú lateral */
    color: white;
    padding: 10px 5px;
    position: fixed; /* Fija el menú lateral en su lugar */
    height: 100%; /* Ocupa toda la altura de la pantalla */
    transition: transform 0.3s ease; /* Suaviza la transición */
    transform: translateX(0); /* Estado inicial */
}

.sidebar-toggle {
    display: none; /* Ocultar el botón en pantallas grandes */
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    background-color: #333;
    color: white; /* Cambiado a blanco para mejorar la visibilidad */
    border: none;
}

.sidebar h2 {
    margin-bottom: 20px;
}

.sidebar ul {
    list-style: none;
    margin-top: 2rem;;
    padding: 0rem 1rem;
}

    .sidebar ul li {
        margin: 10px 0;
    }

        .sidebar ul li a {
            text-decoration: none;
            display: block;
            transition: background 0.3s;
        }


.content {
    margin-left: 250px; /* Margen izquierdo igual al ancho del menú */
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
    background-color: #fbfbfb;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 910px) {
    .sidebar {
        transform: translateX(-100%); /* Oculta el menú lateral */
    }

        .sidebar.active {
            transform: translateX(0); /* Muestra el menú lateral al activarlo */
        }

    .sidebar-toggle {
        display: block; /* Muestra el botón en pantallas pequeñas */
        position: fixed; /* Fija el botón en la parte superior izquierda */
        top: 10px; /* Ajusta la posición vertical */
        right: 10px; /* Ajusta la posición horizontal */
        z-index: 1000; /* Asegura que el botón esté por encima del contenido */
        background-color: #333; /* Color de fondo para el botón */
        color: white; /* Color del texto */
        padding: 10px; /* Espaciado interno */
        border-radius: 5px; /* Bordes redondeados para el botón */
    }

    .content {
        margin-left: 0; /* Elimina el margen izquierdo para el contenido */
    }
}

.select_catalog {
    width: 100%;
}

    .select_catalog label {
        font-size: 0.9rem;
        font-weight: bold;
        margin-bottom: 10px;
        display: block;
        margin-top: 1rem;
    }



.select_catalog select {
    width: 15rem;
    font-size: 0.9rem;
    border: 0.5px solid #cbcbcb;
}

.btns_catalogs {
    color: #818181;
    display: flex;
    align-items: center;
}


    .btns_catalogs a {
        display: block;
        padding: 5px 10px;
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        border-radius: 0;
    }

        .btns_catalogs a:hover {
        color: white;
    }

/* Ajustes específicos para resoluciones menores a 470px */
@media (max-width: 470px) {

    .btns_catalogs a {
        padding: 8px; /* Reducir el padding para ahorrar espacio */
        font-size: 12px; /* Reducir el tamaño de la fuente */
    }

    .btn_filterCatalog img {
        width: 20px; /* Reducir el tamaño del ícono */
        height: 20px;
    }

    .select_catalog label {
        font-size: 14px; /* Ajustar el tamaño de la etiqueta */
    }

    select.form-select {
        font-size: 12px; /* Reducir el tamaño de la fuente del select */
    }
}
@media (max-width: 767.98px) {

    .btns_catalogs {
        width: 100%;
    }

        .btns_catalogs a {
            width: 100%;
            margin: 5px 0;
        }
}

@media (min-width: 768px) {
    .select_catalog .d-flex {
        gap: 10px;
    }

    .btns_catalogs {
        width: auto;
    }

        .btns_catalogs a {
            width: auto;
            margin: 0 5px;
        }
}
        /*Estilos de label tabla
*/
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        }

th {
    background-color: red;
    padding: 10px;
    text-align: left;
    font-size: 0.9rem;
}

td {
    background-color: #fff;
    color: #424242;
    padding: 10px;
    font-size: 0.9rem;
    border-bottom: 1px solid #ddd;
}

tr:hover {
    background-color: #f1f1f1; /* Efecto al pasar el mouse */
}

@media (max-width: 600px) {
    th, td {
        font-size: 0.7rem; /* Tamaño de fuente más pequeño en pantallas pequeñas */
    }
}

.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
    z-index: 999;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 90%; /* Responsivo */
    max-width: 500px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 18px;
    cursor: pointer;
    background: rgb(113, 1, 1);
    background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);
    color: white;
    border: none;
    border-radius: 100%;
}

.element_form label{
    text-align: start;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: gray;
}

.element_form{
    margin: 2rem 0rem;
}

.modal-content h3{
    text-align: start;
    font-size: 1.5rem;
}

.element_form input{
    border: 1px solid gray;
}

.element_form select {
    border: 1px solid gray;
    font-size: 0.9rem;
}

.btn_form {
    background: rgb(113, 1, 1);
    background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);
}

.icon__table{
    width: 1.5rem;
    cursor: pointer;
    border: none;
}

.new__product__form{
    margin-top: 3rem;
    padding: 0rem 1rem;
}

..new__product__form select {
    border: 0.1px solid #cbcbcb;
    font-size: 0.9rem;

}

.new__product__form label {
    font-size: 0.9rem;
    color: gray;
    margin: 0.2rem 0rem;
}

.btn_form_newProduct_list {
    background-color: #6161e9;
    color: white;
    width: 10rem;
    border: none;
    margin-top: 1rem;
}

.btn_form_newProduct {
    background-color: #6161e9;
    color: white;
    width: 10rem;
    border: none;
}

.btn_form_newProduct:hover {
    background-color: #4747b1;
}
.btn_back {
        border: none;
        text-decoration: none;
        cursor: pointer;
        font-size: 0.9rem;
    }

.label_back {
    color: black;
    font-size: 0.9rem;
}


.content_btn_save{
    margin-top: 20rem;
}

.content_btn_save a{
    background-color: white;
    color: black;
    padding: 0.2rem 3rem;
    text-decoration: none;
    height: 2rem;
    margin: 0;
    margin-right: 1rem;
}

    .content_btn_save a:hover{
        background-color: lightgray;
    }

.container__options {
    width: 100%;
    margin: 0 auto;
}

.btn_filterCatalog {
    margin-left: 0.2rem;
    height: 1.5rem;
    background-color: transparent;
    border: none;
}

    .btn_filterCatalog img{
        width: 1.5rem;
    }

    .options_products {
        background: rgb(113, 1, 1);
        background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);
        color: white;
        padding: 0.5rem;
        1rem;
        margin: 0rem 0.2rem 0rem 0.2rem;
        width: 20rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .options_products h6{
        margin: 0;
    }

    .main_options_products {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }

.title_products {
    background-color: #e3dfdf;
    color: black;
    margin-top: 2rem;
    display: flex;
    height: 3rem;
    justify-content: center;
    align-items: center;
}

.title_products h1{
    font-size: 1.5rem;
}

.content__products{
    padding: 0rem 4rem;
}

.container_inputs_prodcuts{
    display: flex;
}


.main_container_inputs_prodcuts{
    margin-top: 2rem;
    display: flex;
    justify-content:center;
}

.title_container_inputs_prodcuts {
    background: rgb(113, 1, 1);
    background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);
    color: white;
    width: 13rem;
    height: 2.5rem;
    margin: 0.2rem 0.2rem 0.2rem 0rem;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    
}

    .title_container_inputs_prodcuts h6{
        font-size: 0.8rem;
    }

    .input_container_inputs_prodcuts {
        background-color: #e3dfdf;
        width: 15rem;
        padding: 0rem 0.5rem;
        display: flex;
        align-items: center;
        margin: 0.2rem 0rem 0.2rem 0.2rem;
    }

    .input_container_inputs_prodcuts input {
        width: 100%;
        border-radius: 20px;
        border: none;
    }

    .input_container_inputs_prodcuts select {
        width: 100%;
        border-radius: 20px;
        border: none;
    }

.section_productos{
    margin: 0rem 0.2rem;
}

.btns_products{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.btns_products button {
    background: rgb(113, 1, 1);
    background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);
    color: white;
    padding: 0.5rem 1rem;
    margin: 0rem 0.1rem;
    width: 10rem;
    height: 2rem;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.update_list {
    background: rgb(113, 1, 1);
    background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);
    border-radius: 10px;
    color: white;
    padding: 0.2rem 1rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.update_list:hover {
    color: white;
}

.form_Search_list{
    margin-top: 2rem;
}

.form_Search_list label {
    font-size: 0.9rem;
    color: gray;
}

.form_Search_list input {
    width: 20rem;
    height: 1.8rem;
    font-size: 0.9rem;
}

.form_Search_list a img{
    width: 1.8rem;
    margin-left: 0.5rem;
    border-radius: 100%;
    cursor: pointer;
}

.cronograma tr td button {
    cursor: pointer;
    width: 4rem;
    color: white;
    border: none;
    border: none;
}


    .cronograma tr td a img {
        width: 1.2rem;
    }

.btn_nuevoCronograma {
    padding: 0.2rem 1rem;
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
}

    .btn_nuevoCronograma:hover {
        color: white;
    }

.new_schedule_form label{
    font-size: 0.9rem;
    color: gray;
}

.name_schedule input{
    width: 20rem;
}

.name_schedule{
    margin-right: 2rem;
    margin-top: 2rem;
}

.days{
    width: 100%;
}

.days select{
    height: 1.9rem;
}

.select_profile_name select{
    width: 20rem;
    height: 1.9rem;
    margin-right: 2rem;
}


.btns_form{
    margin-top: 4rem;
    display: flex;
    justify-content: end;
}

    .btns_form button {
        color: white;
        padding: 0.2rem 1rem;
        width: 10rem;
        border: none;
    }



    .btns_form a {
        background-color: white;
        color: black;
        padding: 0.2rem 1rem;
        width: 10rem;
        border: 1px solid #d9d9d9;
        text-align: center;
        margin-right: 1rem;
        cursor: pointer;
    }

            .btns_form a:hover{
                background-color: lightgray;
            }


.table_customers img {
    width: 1.5rem;
}

.line__Separation {
    background-color: #f59c9c;
    height: 0.1px;
    width: 100%;
    margin-top: 2rem;
}

.container__Table {
    max-width: 100%;
}

.table__listasprecios {
    max-height: 350px; /* Ajusta esta altura según lo que necesites */
    overflow-y: auto; /* Permite el desplazamiento vertical */
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 0.8rem;
    color: slategray;
}

/* Estilos para mantener los encabezados fijos */
thead th {
    position: sticky;
    top: 0; /* Fija el encabezado en la parte superior */
    background-color: #f3f3f3; /* Fondo del encabezado para destacarlo */
    z-index: 1; /* Asegura que el encabezado esté sobre el contenido al hacer scroll */
    color: #6161e9;
}

.container_selected_cronograma {
    margin: 1rem 2rem 1rem 0rem;
}

    .container_selected_cronograma select {
        margin: 0rem 1rem 0rem 0rem;
        border: 1px solid #d9d9d9;
    }

    .container_selected_cronograma h5 {
        margin: 1rem 0rem;
    }

.img_producto{
    width: 3rem;
}


.checkCustomers button {
    margin: 0rem 0rem 0rem 0.5rem;
    padding: 0rem 1rem;
    background-color: #6161e9;
    color: white;
    border: none;
}

.btn_selectedCustomer {
    background: rgb(113, 1, 1);
    background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);
    color: white;
    border: none;
}

.label_catalogoSeleccionado {
    font-size: 0.9rem;
    color: gray;
}

    .label_catalogoSeleccionado span {
        color: #6161e9;
        font-weight: 600;
    }

.section_left {
    width: 50%
}

.section_right {
    width: 50%;
    margin-top: 3.2rem;
}
    .section_right label {
        font-size: 0.9rem;
        color: gray;
        margin-bottom: 0.2rem;
    }
    .image-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
    }

.image-modal-content {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.image-modal-close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.message_notification label {
    font-size: 0.9rem;
    color: darkred;
    margin: 1rem 1rem;
}

.container__Table {
    max-height: 70vh; 
    overflow-y: auto;
}

.container__Table_byProduct {
    max-height: 350px;
    overflow-y: auto;
}

.container__Table__products {
    max-height: 450px;
    overflow-y: auto;
}

    table {
        width: 100%;
        border-collapse: collapse;
    }

th, td {
    border: 1px solid #ddd;
    text-align: left; 
    padding: 8px; 
}

thead {
    position: sticky;
    top: 0;
    background-color: #f9f9f9;
    z-index: 1; 
}

.img_producto {
    width: 50px; 
    height: auto; 
    cursor: pointer; 
}

.icon__table {
    width: 20px; 
    height: auto;
}

.container__creacion_Roles label{
    margin: 2rem 0rem;
}
.container_centroCostos {
    margin-top: 2rem;
    padding: 0rem 4rem;
}

.asignacion_presupuestos_seleccion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: gray;   
}

.btn_newCronogramaCentrocostos {
    background: rgb(113, 1, 1);
    background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);
    color: white;
    text-decoration: none;
    padding: 0.2rem 2rem;
    display: flex; 
    justify-content: center; 
    align-items: center;
    cursor: pointer;
    border: none;
}

    .btn_newCronogramaCentrocostos:hover{
        color: white;
    }

.container__data_centroCosos {
    display: flex;
    flex-direction: column; /* Para mantener los registros en formato vertical */
    gap: 20px; /* Espacio entre los registros */
    height: 400px; /* Alto fijo para el contenedor */
    overflow-y: auto; /* Habilitar scroll vertical si el contenido excede el alto */
    border: 1px solid #ccc; /* Opcional: Bordes para visualizar el contenedor */
    padding: 10px;
    box-sizing: border-box; /* Asegurar que padding no afecte el alto total */
    margin-top: 1rem;
}

.container__data_elments {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Espacio entre las secciones */
}

    .container__data_elments > div {
        flex: 1; /* Las tres secciones tendrán el mismo ancho */
        display: flex;
        flex-direction: column; /* Los elementos internos se apilan verticalmente */
        gap: 10px;
        border: 1px solid #ccc; /* Opcional: Para visualizar los contenedores */
        padding: 10px;
        box-sizing: border-box;
    }

.seccion_centros_costos,
.seccion_cronogramas,
.seccion_presupuestos {
    display: flex;
    flex-direction: column;
}

    .seccion_presupuestos input{
        height: 1.8rem;
    }

    .seccion_centros_costos label {
        font-size: 0.9rem;
        color: gray;
    }

.crear_Cronograma{
    display: flex;
    align-items: center;
}

    .crear_Cronograma select{
        height: 1.8rem;
        font-size: 0.9rem;
        width: 20rem;
    }

.crear_Cronograma_centrocostos {
    margin-left: 0.5rem;
    display: inline-block;
    text-align: center;
    background: rgb(113, 1, 1);
    background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    height: 1.8rem;
    display: flex; 
    justify-content: center; align-items: center;
}

    .crear_Cronograma_centrocostos:hover{
        color: white;
    }
    .crear_Cronograma_centrocostos:hover {
        background-color: #0056b3;
    }

.btn_saveCentroCostos {
    margin-top: 20px;
    padding: 7px 20px;
    background-color: #6161e9;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    .btn_saveCentroCostos:hover {
        background-color: #4747b1;
    }

    .container_btn_Save {
        display: flex;
        justify-content: end;
    }


.label_message{
    margin-top: 1rem;
    color: darkred;
    font-size: 0.9rem;
}

.form_reacionRoles{
    margin-top: 1rem;
}

.form_reacionRoles button {
    background-color: #6161e9;
    padding: 0.2rem 1rem;
    color: white;
    border: none;
    width: 10rem;
}

    .form_reacionRoles button:hover {
        background-color: #4747b1;
    }

    .form_reacionRoles label {
        margin: 0.2rem 0rem;
        color: gray;
    }

.label_massage{
    color: darkred;
    font-size: 0.9rem;
}

.container_inputs{
    display: flex; 
    flex-direction: column;
}

.container_inputs input{
    width: 30rem;
}


    .container_inputs select {
        width: 30rem;
    }

.container_inputs_general{
    display: flex; 
    margin-top: 1rem;
    justify-content: space-around;
}

.btn_form_createUser{
    display: flex; 
    justify-content: end;
    align-items: center;
    margin-top: 3rem;
}

.btn_back_Edit_user {
    background-color: gray;
    color: white;
    padding: 0.2rem 1rem;
    width: 10rem;
    margin: 0rem 5px;
    text-align: center;
    text-decoration: none;
}

.btn_back_save_user {
    color: white;
    padding: 0.2rem 1rem;
    width: 10rem;
    margin: 0rem 5px;
    border:none;
}
    .btn_back_Edit_user:hover {
            color: white;
        }

    .btn_form_createUser button {
        background-color: #6161e9;
        padding: 0.2rem 1rem;
        color: white;
        border: none;
        width: 10rem;
    }

.container__ccnewuser {
    margin-top: 2rem;
}

.container__ccnewuser label{
    color: gray;
    font-size: 0.9rem;
    margin: 0rem 0rem 2rem 0rem;
}

.form_associateUserCC label{
    margin: 0rem;
    margin-bottom: 0.5rem;
}

.form_associateUserCC input {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

.form_associateUserCC {
    height: 250px;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.scrollable-content {
    height: calc(100% - 50px);
    overflow-y: auto;
}

.notifications{
    margin-top: 2rem;
}

.btn_otheruser {
    background-color: #6161e9;
    padding: 0.2rem 1rem;
    color: white;
    border: none;
    margin: 1rem 0rem;
}

    .btn_otheruser:hover {
        background-color: #4747b1;
    }

    .input_alone {
        margin-left: 1.9rem;
    }

.dataCustomer h6 {
    margin: 0;
    color: #6161e9;
}

.dataCustomer label {
    margin-left: 0.5rem;
    color: gray;
}

.dataCustomer {
    display: flex;
    align-items: center;
    margin: 0.5rem 0rem;
}

.btn_detailsCustomer{
    background-color: transparent; 
    border: none;
}

.btn_updatePresupuesto {
    padding: 0.2rem 1rem;
    color: white;
    border: none;
    text-decoration: none;
    width: 13rem;
    text-align: center;
    margin: 0rem 0.2rem;
    font-size: 0.9rem;
}

.btn_updatePresupuesto:hover {
    color: white;
}

.btn_ViewRols {
    padding: 0.2rem 1rem;
    color: white;
    border: none;
    text-decoration: none;
    width: 10rem;
    text-align: center;
    margin: 0rem 0.2rem;
    font-size: 0.9rem;
}

    .btn_ViewRols:hover {
        color: white;
    }


.label_message_presupuesto{
    color: darkred;
    font-size: 0.9rem;
    margin-top: 0.5rem; 
}

.btn_viewUsers{
    margin: 1rem 0rem;
}


.opciones_extra{
    margin: 1rem 0rem;
}

.btn_opcionesAvanzadas {
    background: rgb(113, 1, 1);
    background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);
    padding: 0.2rem 1rem;
    color: white;
    border: none;
    text-decoration: none;
    width: 13rem;
    display: flex; 
    justify-content: center; 
    align-items: center;
    height: 1.7rem;
    margin: 1rem 0rem;
    margin-left: 0.5rem;
}

.container_Cronogramas select{
    height: 1.7rem;
}

.container_Cronogramas {
    display: flex;
    align-items: center;
}

.container__users__centrocostos h6{
    margin: 2rem 0rem;
}

.elements_users__centrocostos{
    display: flex;
    justify-content: space-around;
    margin-top: 2rem;
}

.data__users__centrocostos {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

    .data__users__centrocostos img{
        width: 4rem;
    }
    .data__users__centrocostos label {
        font-size: 1rem;
        font-weight: 600;
        color: #6161e9;
    }

.elements_users__centrocostos{
    margin-top: 2rem;
}

.elements_users__centrocostos a {
    cursor: pointer;
    text-decoration: none;
}

.data__users__centrocostos span{
    font-size: 0.9rem;
    color: gray;
    margin-top: 0.5rem
}

.info_mounts_productos{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.detail_info_mounts_productos {
    /*background: rgb(113, 1, 1);
    background: linear-gradient(0deg, rgba(113, 1, 1, 1) 0%, rgba(195, 0, 0, 1) 100%);*/
    background-color: #6161e9;
    color: white;
    padding: 0.3rem 2rem;
    margin: 0rem 0.1rem;
    width: 20rem;
    text-align: center;
}

.detail_info_mounts_productos p{
    margin: 0;
    font-size: 0.9rem;
}

    .detail_info_mounts_productos label{
        margin: 0;
        font-size: 0.9rem;
    }

.mounts_productos_borders_rigth {
    border-radius: 0 20px 20px 0;
}

.mounts_productos_borders_left {
    border-radius: 20px 0px 0px 20px;
}

.main_info_filters{
    display: flex;
    justify-content: center;
}

.data_filter_productos{
    margin: 1rem 0.2rem;
    display: flex; 
    align-content: center;
    align-items: center;
}

.container_labels_productos_filter {
    background-color: #6161e9;
    color: white;
    height: 2.2rem;
    width: 12rem;
    display: flex;
    align-items: center;
    padding: 0rem 0rem 0rem 10px;
}

    .container_labels_productos_filter label{
        font-size: 0.8rem;
    }

    .container_inputs_productos_filter {
        background-color: #e1e1e1;
        padding: 0.3rem 1rem;
        margin-left: 0.2rem;
    }

.container_inputs_productos_filter input{
    border-radius: 10rem;
    border: none;
    width: 15rem;
}

        .container_inputs_productos_filter select {
            border-radius: 10rem;
            border: none;
            width: 15rem;
            color: gray;
            font-size: 0.9rem;
        }

.products__btns{
    display:flex; 
    justify-content: center;
}

    .products__btns button {
        background-color: #6161e9;
        width: 10rem;
        color: white;
        border: none;
        margin: 0rem 0.2rem;
    }

        .products__btns button:hover {
            background-color: #4747b1;
        }

.btn_data_products {
    background-color: #6161e9;
    color: white;
    padding: 0.2rem 2rem;
    text-decoration: none;
    margin: 0rem 0.2rem;
}

    .btn_data_products:hover {
        background-color: #4747b1;
        color: white;
    }

    .bg_seccion {
        background-color: #ededed;
    }

.bg_seccionSettings {
    background-color: #6161e9;
    height: 3rem;
    color: white;
    display: flex;
    justify-content: end;
    padding: 0rem 1rem;
    align-content: center;
    align-items: center;
}

.container_info_Seccion{
    padding: 1rem 1rem;
}

.container_infodetails_orders {
    background-color: white;
    padding: 2rem 2rem;
    margin: 0rem 1rem;
}

.data_details {
    flex: 1; /* Hace que cada contenedor ocupe el mismo espacio */
    min-width: 150px; /* Define un ancho mínimo para evitar que sean demasiado pequeños */
    padding: 0.5rem;
    border-radius: 5px; /* Bordes redondeados */
    display: flex;
    flex-direction: column; /* Alinea los elementos verticalmente */
}

.detail_tittle{
    font-weight: 600;
    font-size: 0.9rem;
}

.details_text{
    font-size: 0.9rem;
    color: slategray;
    margin-top: 1rem;
}

.btn_edit_details{
    margin-top: 1rem;
}

/*.content_orderDetails{
    padding: 1rem 1rem;
    margin: 0rem 1rem;
}*/

.btn_submitAprobacion {
    background-color: #6161e9;
    color: white;
    width: 10rem;
    border: none;
    margin-top: 1rem;
}

.img_user{
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
}

.data_user_logger{
    display: flex;
    align-items: center;
    justify-content: end;
}

.data_user_logger h6{
    margin: 0;
}

.content_data_productos{
    padding: 1rem 1rem;
}

.bg_seccion_productos {
    background-color: #ededed;
}

.input_edit_products{
    background-color: white;
}

.superior_barra {
    color: white;
    height: 2.5rem;
}

.data_barrasuperior{
    display: flex;
    align-items: center;
    padding: 0rem 1rem;
}

.data_barrasuperior img{
    margin-left: 1rem;
}

.data_barrasuperior h6{
    margin: 0;
}

.containerdata{
    padding: 1rem;
}

.active_menu {
    background-color: #6161e9;
    padding: 0.2rem 0.4rem;
}

.active_link{
    color: white;
}

.active_link:hover {
    color: white;
}

.sleect_list {
    border: none;
    font-size: 0.9rem;
    color: gray;
}

.btn_CargarPedido {
    background-color: #6161e9;
    color: white;
    border: none;
    padding: 0.2rem 1rem;
}

.btn_CargarPedido:hover {
    background-color: #4747b1;
}

.btn_SaveData{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.btn_creteUser {
    width: 10rem;
    border: none;
    background-color: #6161e9;
    color: white;
    margin-top: 2rem;
    height: 2rem;
}

    .btn_creteUser:hover {
        background-color: #37378d;
    }

.notification_box_success {
    display: flex;
    background-color: #a3efa3;
    color: #004803;
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
    align-items: center;
}

.notification_box_success label{
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

.notification_box_error {
    display: flex;
    background-color: #efa3a3;
    color: #400000;
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
    align-items: center;
}

    .notification_box_error label {
        margin-left: 0.5rem;
        font-size: 0.9rem;
    }

.btn_form_produc_save {
    width: 10rem;
    border: none;
    background-color: #6161e9;
    color: white;
    margin-left: 0.5rem;
    height: 2rem;
}
    .btn_form_produc_save:hover{
        background-color: #4747b1;
    }
    .btn_form_produc_cancel {
        width: 10rem;
        border: none;
        background-color: darkgray;
        color: white;
        display: flex;
        justify-content: center;
        text-decoration: none;
        align-items: center;
        height: 2rem;
    }

.btn_form_produc_cancel:hover{
    color: white;
    background-color: dimgray;
}

.section_btn_newProduct{
    margin-top: 5rem;
}

.btn_finish_viewUsers {
    width: 10rem;
    border: none;
    color: white;
    display: flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    height: 2rem;
}

.btn_finish_viewUsers:hover {
    color: white;
}


.filter_input img {
    width: 1.8rem;
}

.input_filter_item{
    height: 2rem;
}
.filter_input button {
    border: none;
    background-color: transparent;
}

.filteredText {
    color: gray;
    font-size: 0.7rem;
    background-color: #cfcfff;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    margin-top: 1rem;
}

.homeIcon img {
    width: 1.5rem;
    margin-left: 1rem;
}

.icon__user_loggin{
    font-size: 4rem;
    padding: 1.4rem 1.6rem;
    background-color: white;
    border-radius: 100%;
}

.container__icon__loggin{
    margin: 1rem;
}

.icon__user__options{
    font-size: 2rem;
}

/******************************************/
/*Clientes Creacion*/

.new_customer_form{
    margin-top: 4rem;
    padding: 0rem 1rem;
}

/*Centros de costos creacion*/

.new_cost_center_form {
    margin-top: 4rem;
    padding: 0rem 1rem;
}

.notification_box_success img {
    width: 2.5rem;
}

.notification_box_error img {
    width: 2.5rem;
}

@media(max-width: 600px) {
    .notification_box_success img{
        width: 1.5rem;
    }
    .notification_box_success label{
        font-size: 0.7rem;
    }

    .notification_box_error img {
        width: 1.5rem;
    }

    .notification_box_error label {
        font-size: 0.7rem;
    }
}
/******************************************/

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 3rem;
    left: -130px;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    padding: 10px;
    z-index: 1000;
}

    .dropdown-menu.show {
        display: block;
    }

    .dropdown-menu a {
        display: block;
        padding: 8px 12px;
        text-decoration: none;
        color: black;
    }

        .dropdown-menu a:hover {
            background: #f1f1f1;
        }

.img_mainProducts {
    width: 2rem;
    
}

.modal {
    z-index: 1060 !important; /* Bootstrap usa 1050 para el modal y 1040 para el backdrop */
}

.modalImage{
    width: 10rem;
}

.container_Details_data_pedido {
    background-color: white;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    border-radius: 15px;
    margin: 1rem 0rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.paragrapgh_data{
    margin: 0rem;
    font-size: 1rem;
}

.container_table_pedidos_details {
    background-color: white;
    padding: 0.2rem 1rem;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin-top: 1rem;
}

.btn_reject_Details_pedido {
    text-decoration: none;
    background-color: darkred;
    color: white;
    padding: 0.2rem 2rem;
    font-size: 0.9rem;
    width: 8rem;
    text-align: center;
    margin: 0.2rem 0rem;
}

.btn_Autorizar_Details_pedido {
    text-decoration: none;
    background-color: orangered;
    color: white;
    padding: 0.2rem 2rem;
    font-size: 0.9rem;
    width: 8rem;
    text-align: center;
    margin: 0.2rem 0rem;
}

.btn_approve_Details_pedido {
    text-decoration: none;
    background-color: forestgreen;
    color: white;
    padding: 0.2rem 2rem;
    font-size: 0.9rem;
    width: 8rem;
    text-align: center;
    margin: 0.2rem 0rem;
}


.btn_Autorizar_Details_pedido:hover {
    color: white;
    background-color: #c93803;
}

.btn_reject_Details_pedido:hover {
    color: white;
    background-color: #660202;
}

.btn_approve_Details_pedido:hover {
    color: white;
    background-color: #176817;
}

.container_table_pedidos_details table tbody tr td{
    color: black;
}

.input_observaciones_reject{
    height: 8rem;
    border-radius: 10rpx;
}

.btn_send_Reject{
    width: 6rem;
    background-color: forestgreen;
    color: white;
    border: none;
    font-size: 0.9rem;
    padding: 0.2rem 2rem;
    text-align: center;
}

.label_observaciones{
    text-align: start;
    font-size: 0.9rem;
}