.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;
}