/* =========================================================
   DataTables - ONE CSS (FIXED)
   - Sólo afecta DataTables
   - Tipografía escalable por pantalla (dentro de .dataTables_wrapper)
   - Especificidad reforzada contra Bootstrap y el tema
   - Paginador centrado
   - Modo columnas por contenido (.dt-auto) y Acciones en línea
   Cargar DESPUÉS de Bootstrap y de los CSS de DataTables/tema
   ========================================================= */

/* -----------------------------
   1) Variables (scope local)
   ----------------------------- */
.dataTables_wrapper {
    /* base ~ -10% */
    --dt-font: 0.90rem; /* celdas/cabeceras */
    --dt-ctrl-font: 0.90rem; /* filtro, info, paginador, selects */
    --dt-line: 1.35;
    --dt-cell-py: 0.45rem;
    --dt-cell-px: 0.60rem;
    --dt-input-py: 0.30rem;
    --dt-input-px: 0.50rem;
    --dt-input-h: calc(1.5em + 0.5rem);
    --dt-page-py: 0.35rem;
    --dt-page-px: 0.60rem;
}

/* -----------------------------
   2) Contenedor
   ----------------------------- */
.dataTables_wrapper {
    width: 100%;
    overflow-x: clip;
}

    /* -----------------------------
   3) Tabla y celdas (alto peso)
   ----------------------------- */
    /* Captura también el selector de Bootstrap para celdas */
    .dataTables_wrapper .table.dataTable,
    .dataTables_wrapper table.dataTable {
        width: 100% !important;
        table-layout: fixed !important; /* por defecto fijo; usa .dt-auto para contenido */
        border-collapse: collapse !important;
        font-size: var(--dt-font) !important;
        line-height: var(--dt-line) !important;
    }

        /* Celdas: selector estilo Bootstrap para subir especificidad */
        .dataTables_wrapper .table.dataTable > :not(caption) > * > *,
        .dataTables_wrapper table.dataTable > :not(caption) > * > * {
            font-size: var(--dt-font) !important;
            line-height: var(--dt-line) !important;
            padding: var(--dt-cell-py) var(--dt-cell-px) !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
            min-width: 0 !important;
        }

        /* Anula widths inline de DT */
        .dataTables_wrapper table.dataTable thead th,
        .dataTables_wrapper table.dataTable tfoot th,
        .dataTables_wrapper table.dataTable tbody td {
            width: auto !important;
            max-width: none !important;
        }

        /* Cabeceras multilínea */
        .dataTables_wrapper table.dataTable thead th {
            white-space: normal !important;
        }

        /* Integración Bootstrap que a veces mete nowrap */
        .dataTables_wrapper .table.dataTable > thead > tr > th,
        .dataTables_wrapper .table.dataTable > tbody > tr > td {
            white-space: normal !important;
        }

        /* Media en celdas */
        .dataTables_wrapper table.dataTable td a {
            word-break: break-all;
        }

        .dataTables_wrapper table.dataTable td img,
        .dataTables_wrapper table.dataTable td video {
            max-width: 100%;
            height: auto;
            display: inline-block;
        }

        /* Badges/chips no ensanchan */
        .dataTables_wrapper table.dataTable td .badge,
        .dataTables_wrapper table.dataTable td .chip,
        .dataTables_wrapper table.dataTable td .label {
            max-width: 100%;
            white-space: normal !important;
            display: inline-block;
        }

    /* Utilidad: no-break */
    .dataTables_wrapper td.no-break,
    .dataTables_wrapper th.no-break {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* -----------------------------
   4) Controles (filter/length/info)
   ----------------------------- */
    .dataTables_wrapper,
    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        font-size: var(--dt-ctrl-font) !important;
    }

        .dataTables_wrapper .dataTables_filter input[type="search"],
        .dataTables_wrapper .dataTables_length select {
            font-size: var(--dt-ctrl-font) !important;
            padding: var(--dt-input-py) var(--dt-input-px) !important;
            height: var(--dt-input-h) !important;
        }

        /* -----------------------------
   5) Paginador centrado
   ----------------------------- */
        .dataTables_wrapper .dataTables_paginate {
            float: none !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center;
            width: 100%;
            text-align: center !important;
            margin-top: .5rem;
        }

            .dataTables_wrapper .dataTables_paginate .pagination {
                margin: 0 auto !important;
                justify-content: center !important;
            }

                .dataTables_wrapper .dataTables_paginate .pagination,
                .dataTables_wrapper .dataTables_paginate .page-item .page-link,
                .dataTables_wrapper .dataTables_paginate .pagination .page-link,
                .dataTables_wrapper .dataTables_paginate .paginate_button,
                .dataTables_wrapper .dataTables_paginate .paginate_button a {
                    font-size: var(--dt-ctrl-font) !important;
                    line-height: 1.25 !important;
                }

                    .dataTables_wrapper .dataTables_paginate .paginate_button,
                    .dataTables_wrapper .dataTables_paginate .pagination .page-link,
                    .dataTables_wrapper .dataTables_paginate .page-item .page-link {
                        padding: var(--dt-page-py) var(--dt-page-px) !important;
                    }

        /* Info no empuja paginador */
        .dataTables_wrapper .dataTables_info {
            float: none !important;
            width: 100%;
            text-align: left;
        }

/* -----------------------------
   6) Responsivo (solo fuentes)
   ----------------------------- */
@media (max-width: 1439.98px) {
    .dataTables_wrapper {
        --dt-font: 0.88rem;
        --dt-ctrl-font: 0.88rem;
    }
}

@media (max-width: 1366px) {
    .dataTables_wrapper {
        --dt-font: 0.82rem; /* equivalente aprox a 90% */
        --dt-ctrl-font: 0.82rem;
    }
}

@media (max-width: 1140px) {
    .dataTables_wrapper {
        --dt-font: 0.80rem;
        --dt-ctrl-font: 0.80rem;
    }
}

@media (max-width: 991.98px) {
    .dataTables_wrapper {
        --dt-font: 0.78rem;
        --dt-ctrl-font: 0.78rem;
    }
}

@media (max-width: 767.98px) {
    .dataTables_wrapper {
        --dt-font: 0.76rem;
        --dt-ctrl-font: 0.76rem;
    }
}

@media (max-width: 575.98px) {
    .dataTables_wrapper {
        --dt-font: 0.74rem;
        --dt-ctrl-font: 0.74rem;
    }

        .dataTables_wrapper .row {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
        }

            .dataTables_wrapper .row > div {
                width: 100% !important;
                max-width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

    .dataTables_filter label {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: .5rem;
    }

    .dataTables_wrapper .dataTables_paginate .pagination {
        flex-wrap: wrap;
    }
}

/* Ocultar columnas de baja prioridad (opcional) */
@media (max-width: 767.98px) {
    .dataTables_wrapper table.dataTable th.col-optional,
    .dataTables_wrapper table.dataTable td.col-optional {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .dataTables_wrapper table.dataTable th.col-optional,
    .dataTables_wrapper table.dataTable td.col-optional {
        display: table-cell !important;
    }
}

/* -----------------------------
   7) Columnas por contenido (opt-in)
   Usa la clase .dt-auto en tu <table>
   ----------------------------- */
.dataTables_wrapper table.dataTable.dt-auto {
    table-layout: auto !important; /* contenido gobierna */
}

    .dataTables_wrapper table.dataTable.dt-auto thead th,
    .dataTables_wrapper table.dataTable.dt-auto tfoot th,
    .dataTables_wrapper table.dataTable.dt-auto tbody td {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
    /* Cols compactas (fechas/doc/teléfono/estados) */
    .dataTables_wrapper table.dataTable.dt-auto th.dt-col-fit,
    .dataTables_wrapper table.dataTable.dt-auto td.dt-col-fit {
        width: 1% !important;
        white-space: nowrap;
    }
    /* Cols que deben ganar espacio (nombres/seguimiento) */
    .dataTables_wrapper table.dataTable.dt-auto th.dt-col-grow,
    .dataTables_wrapper table.dataTable.dt-auto td.dt-col-grow {
        min-width: 24ch;
    }

    /* -----------------------------
   8) Columna “Acciones” en línea
   ----------------------------- */
    .dataTables_wrapper table.dataTable.dt-auto th.dt-actions,
    .dataTables_wrapper table.dataTable.dt-auto td.dt-actions {
        width: 1% !important;
        white-space: nowrap !important;
    }

        .dataTables_wrapper table.dataTable.dt-auto td.dt-actions .btn {
            display: inline-block;
            margin-right: .25rem;
            font-size: .85rem;
            padding: .20rem .45rem;
            line-height: 1.15;
            white-space: nowrap;
        }

            .dataTables_wrapper table.dataTable.dt-auto td.dt-actions .btn:last-child {
                margin-right: 0;
            }

@media (max-width:1366px) {
    .dataTables_wrapper table.dataTable.dt-auto td.dt-actions .btn {
        font-size: .80rem;
        padding: .18rem .40rem;
    }
}

@media (max-width:1140px) {
    .dataTables_wrapper table.dataTable.dt-auto td.dt-actions .btn {
        font-size: .76rem;
        padding: .16rem .36rem;
    }
}

@media (max-width:991.98px) {
    .dataTables_wrapper table.dataTable.dt-auto td.dt-actions .btn {
        font-size: .74rem;
        padding: .14rem .32rem;
    }
}