/******************************************/
/* 1. RESPONSIVE PRINCIPAL (min-width: 641px) */
/******************************************/

@media (min-width: 641px) {
    /* escritorio  */

    .grid {
        width: 100%;
        height: calc(100vh - 260px);
        border-left: 0px solid rgba(0, 0, 0, 0);
        border-right: 0px solid rgba(0, 0, 0, 0);
    }


        .grid .rz-data-row {
            height: 35px !important;
        }

        .grid th,
        .grid td {
            height: 45px !important;
            font-size: 16px !important;
        }

        .grid thead th,
        .grid thead th > div,
        .grid thead th span {
            white-space: normal !important;
            word-break: keep-all !important;
            overflow-wrap: normal !important;
            max-height: 45px;

            line-height: 1.3 !important;
        }

    .gridConCabecera {
        width: 100%;
        height: calc(100vh - 332px);
        border: 0px solid #CCC;
    }

        .gridConCabecera .rz-data-row {
            height: 35px !important;
        }

        .gridConCabecera th,
        .gridConCabecera td {
            height: 45px !important;
            font-size: 16px !important;
        }


/*        

        .gridConCabecera thead th,
        .gridConCabecera thead th > div,
        .gridConCabecera thead th span {
            white-space: normal !important;
            word-break: keep-all !important;
            overflow-wrap: normal !important;
            max-height: 45px;
            line-height: 1.3 !important;
        }*/

    .gridGestion {
        width: 100%;
        height: calc(100vh - 550px);
        border: 0px solid #CCC;
    }


    .ancho {
        --ancho: 100;
    }

    .ancho-combo {
        width: 100% !important
    }

    .contenido-barra {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .extiende-form {
        width: 100%;
    }

    .my-custom-modal {
        min-width: 870px;
        max-width: 870px;
        background-color: #fff;
        margin-top: 64px;
        margin-left: auto;
        margin-right: auto;
        animation: popIn 10ms ease-in-out;
        padding: 0px !important;
        border-radius: 16px !important;
    }


    .my-custom-modal-busca {
        width: 780px;
        border-radius: 8px 8px 5px 5px !important;
        padding: 10px 20px;
        background-color: #fff;
        margin-left: auto;
        margin-right: auto;
        animation: popIn 30ms ease-in-out;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -45%);
    }

    /******************************************/
    /* 2. AJUSTES DE GRANDE ESCALA (ANIDADOS) */
    /******************************************/

    /* Pantallas grandes (≥1400px) */
    @media (min-width: 1400px) {
        .grid .rz-data-row {
            height: 46px !important;
        }
    }

    /* Pantallas muy grandes (≥1600px) */
    @media (min-width: 1600px) {
        .grid .rz-data-row {
            height: 50px !important;
        }
    }
}