/* MENU-NAV */
    .menu-nav{
        display: flex;
        margin: 80px 0;
        justify-content: center;
    }
        .menu-nav a{
            padding: 0 40px;
            text-align: center;
            text-decoration: none;
            color: var(--blue-text);
            cursor: pointer;
            font-size: 1rem;
        }
        .menuA{
            color: #FE4A38!important;
        }

/*=============== TABLE ===============*/
    /* Estilos para el contenedor principal */
    .datatable-container {
        margin: 20px;
        padding: 20px;
        border-radius: 5px;
        width: 100%;
    }
    
    /* Estilos para el input de búsqueda */
    .header-tools{
        margin-bottom: 70px;
        display: flex;
        justify-content: space-between;
    }
        /* SORT */
        .sort{
            display: flex;
            align-items: center;
        }
            .sort p{
                padding-right: 20px;
                font-size: 0.9rem;
                color: var(--blue-text);
            }
            .sort select{
                font-size: 0.9rem;
                color: var(--blue-text);
            }

        /* SHOWPAGE */
        .showPage{
            display: flex;
            align-items: center;
        }
            .showPage div:nth-child(1){
                display: flex;
                align-items: center;
            }
            .showPage p{
                font-size: 0.9rem;
                color: var(--blue-text);
            }
            .showPage select{
                margin: 0 15px;
                font-size: 0.9rem;
                color: var(--blue-text);
            }
    

    .search-input {
        display: flex;
        float: right;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 400px;
    }
    
    /* Estilos para la tabla */
    .datatable {
        width: 80%;
        border-collapse: collapse;
        margin: 0 auto;
    }
    
    .datatable th, .datatable td {
        padding: 10px;
        border: none;
        text-align: left;
    }
    
    .datatable th {
        background-color: #F2F2F2;
    }
    
    .datatable tbody tr {
        border-bottom: 1px solid #dcdbdb;
    }
    .datatable tbody tr td a{
        background: var(--green);
        color: white;
        padding: 6px 10px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        text-decoration: none;
    }

    

    /* Estilos para los botones de paginación */
    .footer-tools{
        margin-top: 20px;
    }
    .pages ul {
        list-style: none;
        padding: 0;
        display: flex;
        float: right;
        align-items: center;
    }
    
    .pages ul li {
        display: inline-block;
        margin-right: 5px;
    }
    
    .pages ul li button, .pages ul li span {
        padding: 5px 10px;
        border: none;
        cursor: pointer;
    }
    
    .pages ul li span.active, .pages ul li button.active {
        background-color: var(--blue);
        color: #fff;
        border-color: var(--blue);
    }
    
    #mediosCultivo{
        display: block;
    }

    #suplementos,
    #discosAntibioticos,
    #mediosCromogenicos,
    #peptonasExtractos, 
    #agares,
    #biologiaMolecular,
    #cultivoPreparados{
        display: none;
    }

    /* TABLE AGARES */
    .dt-agares{
        width: 1200px!important;
        margin: 0 auto!important;
    }
    .dt-agares th:nth-child(2){
        width: 200px!important;
    }
    /* END TABLE AGARES */
    /* TABLE CULTIVOS */
    .dt-cultivo{
        width: 1200px!important;
        margin: 0 auto!important;
    }
    .dt-cultivo th:nth-child(2){
        width: 250px!important;
    }
    .dt-cultivo tbody tr td:nth-child(3){
        display: flex;
        justify-content: center;
    }
    /* END TABLE CULTIVOS */

/* <========== RESPONSIVE ============> */
/*=============== RESPONSIVE 100px - 425px ===============*/
    @media (min-width: 100px) and (max-width: 425px){
        .menu-nav{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 30px 0;
        }
            .menu-nav a{
                padding: 10px 0;
                font-size: 4vw;
            }
        
        /* TABLE */
        .datatable-container {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
            .header-tools{
                margin: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .search{
                display: flex;
                justify-content: center;
                width: 100px;
            }
            .search-input{
                justify-content: center;
                margin: 20px auto 20px auto;
            }

            /* SORT */
            .sort{
                display: flex;
                align-items: center;
            }
                .sort p{
                    padding-right: 20px;
                    font-size: 4vw;
                    color: var(--blue-text);
                }
                .sort select{
                    font-size: 4vw;
                    color: var(--blue-text);
                }

            /* SHOWPAGE */
            .showPage{
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-bottom: 20px;
            }
                .showPage p{
                    font-size: 4vw;
                    color: var(--blue-text);
                }
                .showPage select{
                    margin: 0 15px;
                    font-size: 4vw;
                    color: var(--blue-text);
                }
                .showPage div:nth-child(1){
                    display: flex;
                    align-items: center;
                }
                

        /* THEAD */
        .datatable thead tr th{
            font-size: 3.4vw;
        }
        .datatable thead tr th:nth-child(1){
            width: 25%;
            padding: 5px;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(2){
            width: auto;
            padding: 5px;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(3){
            width: 60px!important;
            padding: 5px;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(4){
            width: auto;
            padding: 5px;
            box-sizing: border-box;
            height: auto;
        }
            .datatable tbody tr td:nth-child(1){
                width: 65px;
                padding: 5px;
                box-sizing: border-box;
                overflow: auto;
                overflow-wrap: break-word; 
                display: inline-block;
                height: auto;
            }
            .datatable tbody tr td:nth-child(2){
                width: 10%;
                padding: 5px;
                box-sizing: border-box;
                height: auto;
            }
            .datatable tbody tr td:nth-child(3){
                width: 60px!important;
                padding: 5px;
                box-sizing: border-box;
                height: auto;
            }
            .datatable tbody tr td:nth-child(4){
                width: auto;
                padding: 5px;
                box-sizing: border-box;
                height: auto;
            }

        /* TBODY */
        .datatable tbody tr td{
            font-size: 2.8vw;
        }
        

        .footer-tools{
            margin: 20px 0 0 0;
            display: flex;
            width: 100%;
        }
        .pages{
            justify-content: center;
            display: flex;
            width: 100%;
        } 
        .pages .pages-more{
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            row-gap: 20px;
            align-items: center;
        }

        .datatable {
            width: 100%;
        }

        /* TABLE AGARES */
        .dt-agares{
            width: 100%!important;
            margin: 0 auto!important;
        }
        /* END TABLE AGARES */

        /* TABLE CULTIVOS */
        .dt-cultivo{
            width: 280px!important;
            margin: 0 auto!important;
        }
        .dt-cultivo tbody tr td:nth-child(3){
            display: flex;
            width: 100px!important;
            justify-content: center;
        }
        .dt-cultivo thead tr th:nth-child(1){
            width: 150px;
        }
        .dt-cultivo tbody tr td:nth-child(1){
            width: auto;
        }
        /* END TABLE CULTIVOS */
    } 

    /*=============== RESPONSIVE 426px - 1024px ===============*/
    @media (min-width: 426px) and (max-width: 1024px){
        .menu-nav{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 30px 0;
        }
            .menu-nav a{
                padding: 10px 0;
                font-size: 3vw;
            }
        
        /* TABLE */
        .datatable-container {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
            .header-tools{
                margin: 0;
                display: grid;
                grid-template-columns: auto 1fr;
                grid-template-rows: auto auto; 
                justify-content: space-between;
                column-gap: 16vw;
            }
            .search{
                display: flex;
                grid-row: 2;
                grid-column: 1 / span 2;
            }
            .search-input{
                justify-content: center;
                margin: 0 auto 20px auto;
            }

            /* SORT */
            .sort{
                display: flex;
                align-items: center;
                grid-column: 2;
                padding-bottom: 20px;
            }
                .sort p{
                    padding-right: 20px;
                    font-size: 2vw;
                    color: var(--blue-text);
                }
                .sort select{
                    font-size: 2vw;
                    color: var(--blue-text);
                }

            /* SHOWPAGE */
            .showPage{
                display: flex;
                align-items: center;
                padding-bottom: 20px;
                grid-column: 1;
            }
                .showPage p{
                    font-size: 2vw;
                    color: var(--blue-text);
                }
                .showPage select{
                    margin: 0 15px;
                    font-size: 2vw;
                    color: var(--blue-text);
                }

        /* THEAD */
        .datatable thead tr th{
            font-size: 2.2vw;
        }
        .datatable thead tr th:nth-child(1){
            width: 30%;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(2){
            width: 10%;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(3){
            width: 30%;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(4){
            width: 30%;
            box-sizing: border-box;
            height: auto;
        }

        /* TBODY */
        .datatable tbody tr td{
            font-size: 2vw;
        }
        

        .footer-tools{
            margin: 20px 0 0 0;
            display: flex;
            width: 100%;
        }
        .pages{
            justify-content: center;
            display: flex;
            width: 100%;
        } 
        .datatable {
            width: 100%;
        }

        /* TABLE AGARES */
        .dt-agares{
            width: 100%!important;
            margin: 0 auto!important;
        }
        .dt-agares thead tr th:nth-child(3){
            width: 150px;
        }
        /* END TABLE AGARES */

        /* TABLE CULTIVOS */
        .dt-cultivo{
            width: 100%!important;
            margin: 0 auto!important;
        }
        .dt-cultivo tbody tr td:nth-child(3){
            display: flex;
            width: auto!important;
            justify-content: end;
        }
        .dt-cultivo thead tr th:nth-child(1){
            width: 700px;
        }
        .dt-cultivo thead tr th:nth-child(3){
            width: 250px;
        }
        .dt-cultivo tbody tr td:nth-child(1){
            width: auto;
        }
        /* END TABLE CULTIVOS */
    }

    /*=============== RESPONSIVE 990px - 1350px ===============*/
    @media (min-width: 990px) and (max-width: 1350px){
        /* TABLE AGARES */
        .dt-agares{
            width: 900px!important;
            margin: 0 auto!important;
        }
        .dt-agares tbody tr td:nth-child(4){
            display: flex;
            justify-content: center;
            width: 200px;
        }

        /* END TABLE AGARES */

        /* TABLE CULTIVOS */
        .dt-cultivo{
            width: 900px!important;
            margin: 0 auto!important;
        }
        .dt-cultivo tbody tr td:nth-child(3){
            display: flex;
            width: auto!important;
            justify-content: center;
        }
        .dt-cultivo thead tr th:nth-child(1){
            width: auto;
        }
        .dt-cultivo thead tr th:nth-child(3){
            width: 250px!important;
        }
        .dt-cultivo tbody tr td:nth-child(1){
            width: auto;
        }
        /* END TABLE CULTIVOS */
    }

    /*=============== RESPONSIVE 769px - 1350px ===============*/
    @media (min-width: 1025px) and (max-width: 1350px){
        
        .menu-nav{
            display: flex;
            justify-content: space-between;
        }
            .menu-nav a{
                padding: 0 10px;
                font-size: 2vw;
                box-sizing: border-box;
            }
        
        /* TABLE */
        .datatable-container {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
            .header-tools{
                margin: 0;
                margin-bottom: 30px;
            }
            .search{
                display: flex;
                width: 300px;
            }
            .search-input{
                margin: 0 auto 20px auto;
            }

            /* SORT */
            .sort{
                padding-bottom: 20px;
            }

            /* SHOWPAGE */
            .showPage{
                padding-bottom: 20px;
            }
            .mostrar{
                height: 50px;
                width: 200px;
            }

        /* THEAD */
        .datatable thead tr th{
            font-size: 1.6vw;
        }
        .datatable thead tr th:nth-child(1){
            width: 65%;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(2){
            width: 10%;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(3){
            width: auto;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(4){
            width: auto;
            box-sizing: border-box;
            height: auto;
        }

        /* TBODY */
        .datatable tbody tr td{
            font-size: 1.5vw;
        }
        

        .footer-tools{
            margin: 20px 0 0 0;
            display: flex;
            width: 100%;
        }
        .pages{
            justify-content: center;
            display: flex;
            width: 100%;
        } 
        .datatable {
            width: 100%;
        }

        /* MENU-NAV */
        .menu-nav{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            row-gap: 60px;
        }
    }


    /*=============== RESPONSIVE 1081px ===============*/
    @media (min-width: 1081px){
        .datatable thead tr th:nth-child(1){
            width: 50%;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(2){
            width: 10%;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(3){
            width: auto;
            box-sizing: border-box;
            height: auto;
        }
        .datatable thead tr th:nth-child(4){
            width: auto;
            box-sizing: border-box;
            height: auto;
        }

        .datatable{
            margin: 0;
            width: 100%;
        }

        .menu-nav{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            row-gap: 60px;
        }
    }