.dataTables_scrollTop {
    overflow-x: auto;
    overflow-y: hidden;
    height: 16px;          /* grosor */
    margin-bottom: 4px;    /* espacio con la tabla */
}

/* 2) Objetivos: el body y (si lo usas) el scroll superior clonado */
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollTop {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--bs-scrollbar-color);
}

/* 3) Hover sobre la tabla -> cambia ambos scrolls (Firefox) */
.dataTables_wrapper:hover .dataTables_scrollBody,
.dataTables_wrapper:hover .dataTables_scrollTop {
    scrollbar-color: var(--bs-scrollbar-hover-color);
}

/* 4) WebKit (Chrome/Edge/Safari) */
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar,
.dataTables_wrapper .dataTables_scrollTop::-webkit-scrollbar {
    height: 12px;
}


div.dt-rowReorder-float-parent {
    table-layout: fixed;
    outline: 2px solid rgb(10, 89, 203);
    z-index: 2001;
    position: absolute !important;
    overflow: hidden;
    border-radius: 3px;
}
div.dt-rowReorder-float-parent table.dt-rowReorder-float {
    opacity: 0.9;
    background-color: white;
    margin: 0 !important;
}

div.dt-rowReorder-float-parent.drop-not-allowed {
    cursor: not-allowed;
}

tr.dt-rowReorder-moving {
    outline: 2px solid #888;
    outline-offset: -2px;
}

body.dt-rowReorder-noOverflow {
    overflow-x: hidden;
}

table.dataTable td.reorder {
    text-align: center;
    cursor: move;
}

html.dark div.dt-rowReorder-float-parent {
    outline-color: rgb(110, 168, 254);
}
html.dark div.dt-rowReorder-float-parent table.dt-rowReorder-float {
    background-color: var(--dt-html-background);
}
html.dark tr.dt-rowReorder-moving {
    outline-color: #aaa;
}