html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    /* … si aquí había más reglas de tu archivo original, se conservan … */
}

/* =======================
   DataTables — Dropdown collections (PageLength, ColVis, etc.)
   ======================= */

/* Contenedor de la colección (DataTables usa DIV o UL; en Bootstrap/AdminLTE: dropdown-menu) */
div.dt-button-collection,
ul.dt-button-collection,
.dt-button-collection.dropdown-menu {
    background-color: var(--bs-body-bg, #fff) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    color: var(--bs-body-color, #212529) !important;
    z-index: 2000 !important; /* por si queda detrás de headers/modales */
    /* Variables de Bootstrap para dropdown (cuando aplica) */
    --bs-dropdown-bg: var(--bs-body-bg, #fff);
    --bs-dropdown-color: var(--bs-body-color, #212529);
    --bs-dropdown-link-color: var(--bs-body-color, #212529);
    --bs-dropdown-link-hover-color: var(--bs-body-color, #212529);
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg, #f8f9fa);
}

    /* Ítems internos (a/button/span/dropdown-item) */
    div.dt-button-collection .dt-button,
    div.dt-button-collection .dt-button > span,
    div.dt-button-collection a.dt-button,
    div.dt-button-collection a.dt-button > span,
    div.dt-button-collection .dropdown-item,
    div.dt-button-collection .dropdown-item > span,
    ul.dt-button-collection .dt-button,
    ul.dt-button-collection .dt-button > span,
    ul.dt-button-collection a.dt-button,
    ul.dt-button-collection a.dt-button > span,
    ul.dt-button-collection .dropdown-item,
    ul.dt-button-collection .dropdown-item > span,
    .dt-button-collection.dropdown-menu .dropdown-item,
    .dt-button-collection.dropdown-menu .dropdown-item > span {
        color: var(--bs-body-color, #212529) !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

        /* Hover/Focus de ítems */
        div.dt-button-collection .dt-button:hover,
        div.dt-button-collection .dt-button:focus,
        div.dt-button-collection .dropdown-item:hover,
        div.dt-button-collection .dropdown-item:focus,
        ul.dt-button-collection .dt-button:hover,
        ul.dt-button-collection .dt-button:focus,
        ul.dt-button-collection .dropdown-item:hover,
        ul.dt-button-collection .dropdown-item:focus,
        .dt-button-collection.dropdown-menu .dropdown-item:hover,
        .dt-button-collection.dropdown-menu .dropdown-item:focus {
            background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
            color: var(--bs-body-color, #212529) !important;
        }

        /* Estado activo/seleccionado (cuando DataTables marca el actual) */
        .dt-button-collection.dropdown-menu .dropdown-item.active,
        .dt-button-collection.dropdown-menu .dropdown-item:active {
            color: #fff !important;
            background-color: var(--bs-primary, #0d6efd) !important;
        }

/* AdminLTE dark-mode (si body o wrapper usa .dark-mode) */
.dark-mode div.dt-button-collection,
.dark-mode ul.dt-button-collection,
.dark-mode .dt-button-collection.dropdown-menu {
    background-color: #2d3035 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #e9ecef !important;
    --bs-dropdown-bg: #2d3035;
    --bs-dropdown-color: #e9ecef;
    --bs-dropdown-link-color: #e9ecef;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-hover-bg: #3a3f44;
}

    .dark-mode div.dt-button-collection .dt-button,
    .dark-mode div.dt-button-collection .dt-button > span,
    .dark-mode div.dt-button-collection a.dt-button,
    .dark-mode div.dt-button-collection a.dt-button > span,
    .dark-mode div.dt-button-collection .dropdown-item,
    .dark-mode div.dt-button-collection .dropdown-item > span,
    .dark-mode ul.dt-button-collection .dt-button,
    .dark-mode ul.dt-button-collection .dt-button > span,
    .dark-mode ul.dt-button-collection a.dt-button,
    .dark-mode ul.dt-button-collection a.dt-button > span,
    .dark-mode ul.dt-button-collection .dropdown-item,
    .dark-mode ul.dt-button-collection .dropdown-item > span,
    .dark-mode .dt-button-collection.dropdown-menu .dropdown-item,
    .dark-mode .dt-button-collection.dropdown-menu .dropdown-item > span {
        color: #e9ecef !important;
    }

/* =======================
   DataTables — Overlay/z-index (para que no "oscurezca" el botón)
   ======================= */

/* La capa oscura que aparece al abrir la colección */
.dt-button-background {
    z-index: 1048 !important; /* por debajo del trigger (1049) y del dropdown (1050) */
    opacity: .25 !important; /* opcional: baja un poco la oscuridad */
}

/* Botones trigger (PageLength, ColVis, Collection genérica) */
.dt-buttons .buttons-page-length,
.dt-buttons .buttons-collection,
.dt-buttons .buttons-colvis {
    position: relative;
    z-index: 1049 !important; /* encima del overlay */
    color: var(--bs-body-color, #212529) !important;
}

    .dt-buttons .buttons-page-length > span,
    .dt-buttons .buttons-collection > span,
    .dt-buttons .buttons-colvis > span {
        color: inherit !important;
    }

    /* Variables de btn-outline-* que a veces dejan el texto tenue */
    .dt-buttons .buttons-page-length.btn,
    .dt-buttons .buttons-collection.btn,
    .dt-buttons .buttons-colvis.btn,
    .dt-buttons .buttons-page-length.btn-outline-secondary,
    .dt-buttons .buttons-collection.btn-outline-secondary,
    .dt-buttons .buttons-colvis.btn-outline-secondary {
        --bs-btn-color: var(--bs-body-color, #212529) !important;
        --bs-btn-hover-color: var(--bs-body-color, #212529) !important;
        --bs-btn-active-color: var(--bs-body-color, #212529) !important;
        --bs-btn-disabled-color: var(--bs-body-color, #212529) !important;
    }

/* Modo oscuro: color de texto en triggers */
.dark-mode .dt-buttons .buttons-page-length,
.dark-mode .dt-buttons .buttons-collection,
.dark-mode .dt-buttons .buttons-colvis,
.dark-mode .dt-buttons .buttons-page-length > span,
.dark-mode .dt-buttons .buttons-collection > span,
.dark-mode .dt-buttons .buttons-colvis > span {
    color: #e9ecef !important;
}

    .dark-mode .dt-buttons .buttons-page-length.btn,
    .dark-mode .dt-buttons .buttons-collection.btn,
    .dark-mode .dt-buttons .buttons-colvis.btn,
    .dark-mode .dt-buttons .buttons-page-length.btn-outline-secondary,
    .dark-mode .dt-buttons .buttons-collection.btn-outline-secondary,
    .dark-mode .dt-buttons .buttons-colvis.btn-outline-secondary {
        --bs-btn-color: #e9ecef !important;
        --bs-btn-hover-color: #e9ecef !important;
        --bs-btn-active-color: #e9ecef !important;
        --bs-btn-disabled-color: #e9ecef !important;
    }

/* =======================
   (Opcional) Compat extra: títulos internos/two-column de DT
   ======================= */
div.dt-button-collection .dt-button-collection-title,
div.dt-button-collection.fixed,
div.dt-button-collection.two-column,
ul.dt-button-collection.fixed,
ul.dt-button-collection.two-column {
    color: inherit !important;
}
/* === Forzar texto BLANCO en PageLength y Columnas, con buen contraste === */
.dt-buttons .buttons-page-length,
.dt-buttons .buttons-colvis {
    /* Texto blanco siempre */
    color: #fff !important;
    /* Si el tema los renderiza como btn-outline-*, rellenamos para contraste */
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #6c757d !important; /* gris Bootstrap secondary */
    --bs-btn-border-color: #6c757d !important;
    /* Hover / Active coherentes */
    --bs-btn-hover-bg: #5c636a !important;
    --bs-btn-hover-border-color: #565e64 !important;
    --bs-btn-active-bg: #565e64 !important;
    --bs-btn-active-border-color: #51585e !important;
    --bs-btn-disabled-bg: #6c757d !important;
    --bs-btn-disabled-border-color: #6c757d !important;
}

    .dt-buttons .buttons-page-length > span,
    .dt-buttons .buttons-colvis > span {
        color: #fff !important;
    }

/* Modo oscuro: mantenemos blanco para máxima legibilidad */
.dark-mode .dt-buttons .buttons-page-length,
.dark-mode .dt-buttons .buttons-colvis,
.dark-mode .dt-buttons .buttons-page-length > span,
.dark-mode .dt-buttons .buttons-colvis > span {
    color: #fff !important;
}