/* 100% */
.modal-100 {
    max-width: 95vw;
}

@media (min-width: 768px) {
    .modal-100 {
        max-width: 100vw;
    }
}
/* 90% */
.modal-90 {
    max-width: 95vw;
}

@media (min-width: 768px) {
    .modal-90 {
        max-width: 90vw;
    }
}

/* 80% */
.modal-80 {
    max-width: 95vw;
}

@media (min-width: 768px) {
    .modal-80 {
        max-width: 80vw;
    }
}

/* 70% */
.modal-70 {
    max-width: 95vw;
}

@media (min-width: 768px) {
    .modal-70 {
        max-width: 70vw;
    }
}

/* 60% */
.modal-60 {
    max-width: 95vw;
}

@media (min-width: 768px) {
    .modal-60 {
        max-width: 60vw;
    }
}


.form-floating .select2-container--disabled .select2-selection,
.form-floating .select2-selection--disabled-custom {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

    .form-floating .select2-container--disabled .select2-selection__rendered,
    .form-floating .select2-selection--disabled-custom .select2-selection__rendered {
        color: #6c757d !important;
    }

.form-floating .select2-container--disabled .select2-selection__arrow {
    opacity: .5;
}

/* Contenedor que tiene directamente las cards dentro del modal */
.modal .modal-body:has(> .card[class*="col-lg-"]),
.modal .modal-body > :has(> .card[class*="col-lg-"]),
.modal .modal-body > * > :has(> .card[class*="col-lg-"]) {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 1.5rem !important;
    row-gap: 1.5rem !important;
    align-items: stretch !important;
}

/* La card ya no debe forzar ancho Bootstrap/flex */
.modal .modal-body .card[class*="col-lg-"] {
    width: auto !important;
    max-width: none !important;
    flex: unset !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
}

@media (min-width: 992px) {
    .modal .modal-body .card.col-lg-12 {
        grid-column: span 12 !important;
    }

    .modal .modal-body .card.col-lg-11 {
        grid-column: span 11 !important;
    }

    .modal .modal-body .card.col-lg-10 {
        grid-column: span 10 !important;
    }

    .modal .modal-body .card.col-lg-9 {
        grid-column: span 9 !important;
    }

    .modal .modal-body .card.col-lg-8 {
        grid-column: span 8 !important;
    }

    .modal .modal-body .card.col-lg-7 {
        grid-column: span 7 !important;
    }

    .modal .modal-body .card.col-lg-6 {
        grid-column: span 6 !important;
    }

    .modal .modal-body .card.col-lg-5 {
        grid-column: span 5 !important;
    }

    .modal .modal-body .card.col-lg-4 {
        grid-column: span 4 !important;
    }

    .modal .modal-body .card.col-lg-3 {
        grid-column: span 3 !important;
    }

    .modal .modal-body .card.col-lg-2 {
        grid-column: span 2 !important;
    }

    .modal .modal-body .card.col-lg-1 {
        grid-column: span 1 !important;
    }
}

@media (max-width: 991.98px) {
    .modal .modal-body .card[class*="col-lg-"] {
        grid-column: span 12 !important;
    }
}





/*
.dataTables_wrapper > .row:first-child {
    display: flex;
    flex-wrap: wrap;
    row-gap: 12px;
}

    .dataTables_wrapper > .row:first-child > div {
        flex: 1 1 240px;
        width: auto;
        max-width: 100%;
    }

        .dataTables_wrapper > .row:first-child > div:last-child {
            text-align: right;
        }

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_filter input {
    max-width: 200px;
}*/

/* Cada DataTable responde al ancho de su propio contenedor */
.dataTables_wrapper {
    container-type: inline-size;
}


div.dataTables_wrapper div.dataTables_length {
    padding: 0rem 0 !important;
}

    /* Toolbar superior */
    .dataTables_wrapper .dt-toolbar {
        display: flex;
        flex-wrap: wrap;
        row-gap: 4px !important; /* antes probablemente estaba en 12px */
        margin-bottom: 8px !important;
    }

    /* Footer inferior */
    .dataTables_wrapper .dt-footer {
        display: flex;
        flex-wrap: wrap;
        row-gap: 6px !important;
    }

/* Cuando la grilla está en un contenedor angosto */
@container (max-width: 520px) {
    .dataTables_wrapper .dt-toolbar-length,
    .dataTables_wrapper .dt-toolbar-search {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 0 !important;
        white-space: nowrap;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        max-width: 180px;
    }
    /* Reduce el espacio entre Mostrar y Buscar */
    .dataTables_wrapper .dt-toolbar {
        row-gap: 6px !important;
    }
    /* Paginación usando todo el ancho */
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
    }

        .dataTables_wrapper .dataTables_paginate .pagination {
            width: 100%;
            justify-content: space-between;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.previous {
            margin-right: auto;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.next {
            margin-left: auto;
        }
}