html, body {
    height: 100% !important;        /* Forzó a html/body a ocupar el 100% del viewport */
    min-height: 100% !important;    /* Aseguró que no se encogieran */
    overflow-y: auto !important;    /* Hizo que html/body manejaran el scroll vertical */
    overflow-x: auto !important;  /* Evitó scroll horizontal indeseado */
    margin: 0 !important;
    padding: 0 !important;
}

#app, main {
    height: auto !important;        /* Aseguró que estos contenedores no tuvieran altura fija */
    min-height: auto !important;
    overflow: visible !important;   /* Evitó que crearan un scroll propio */
}


/* Fijado de encabezado de tablas  */

thead {
    position: sticky;
    top: 64px; /* Pegar justo debajo del Navbar (ajusta si el Navbar mide diferente) */
    z-index: 1020; /* Menor que el z-index del Navbar (1030), pero mayor que el contenido de la tabla */
    background-color: var(--bg-box); /* Usar tu variable de color de fondo oscuro, para que no sea transparente */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Añadir la sombra para un mejor efecto visual */
}

/* Opcional: Asegurarse de que el fondo sea sólido incluso en thead th si usas thead { background-color } */
thead th {
    background-color: inherit; /* Hereda el color del thead, para que no haya transparencias */
}

#div-wrapper {
    position: relative;
    /* height: 80%; /* <-- Quitar o ajustar esto */
    /* width: auto; */
    /* Mantener si es necesario */
    margin: 3px;
    /* overflow: visible;  Asegurarse de que no esté 'scroll' o 'auto' */
    height: auto;
    /* Permitir que su altura sea determinada por su contenido */
    /* min-height: 100%; /* Si quieres que ocupe al menos el 100% */
}

#div-wrapper.full {
    /* Esta clase "full" parece ser para un modo específico donde sí quieres que ocupe toda la pantalla y tenga scroll */
    /* Así que las propiedades fixed, height: 100%, etc., están bien aquí para ese caso de uso. */
    position: fixed;
    z-index: 1031;
    height: 100%;
    margin: 5;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #0b0b0b;
    overflow-y: auto;
    /* Si esta clase debe hacer scroll, esto es crucial */
}

#div-controls {
    opacity: 0.8;
    position: fixed;
    bottom: 5px;
    /* Siempre en la parte inferior */
    right: 5px;
    /* Siempre en la parte derecha */
    z-index: 999;
    display: flex;
    gap: 5px;
    /* Espacio entre los botones */
    padding: 5px;
    /* Un pequeño padding alrededor del grupo de botones */
}

#div-wrapper.full #div-controls {
    /* Si estás en modo pantalla completa, es posible que quieras otros estilos */
    /* De momento, no lo tocamos si la clase full es para la grilla y no para estos controles */
}

@media screen and (max-width: 767px) {
    #div-wrapper {
        /* height: 400px; /* <-- Quitar o ajustar esto también */
        height: auto;
        /* Permitir que se expanda con el contenido */
        padding-right: 20px;
    }

    #div-controls {
        top: auto;
        /* Aseguramos que no haya un 'top' que lo mueva */
        bottom: 10px;
        /* Un poco más de margen inferior en mobile para que no esté tan pegado */
        right: 10px;
        /* Un poco más de margen derecho en mobile */
        left: auto;
        /* Aseguramos que no haya un 'left' que lo mueva a la izquierda */
        transform: none;
        /* Eliminar el transform: translateX(-50%) si se había añadido antes */
        width: fit-content;
        /* Para que el contenedor ocupe solo el ancho de los botones */
        /* background-color: rgba(0, 0, 0, 0.7); /* Opcional: un fondo semitransparente para resaltarlos */
        /* border-radius: 5px; /* Opcional: bordes redondeados */
    }

    /* Opcional: Ajustes específicos para los botones en mobile si fuera necesario */
    #div-controls .btn {
        padding: 8px 12px;
        /* Ajustar padding de los botones individuales */
        font-size: 14px;
        /* Reducir tamaño de fuente si es necesario */
    }

    /* También podemos ajustar el tamaño del botón extra si es solo para desktop */
    #btnGridSize {
        /* Si quieres ocultarlo en mobile o reducirlo, hazlo aquí */
        /* display: none; */
        /* Si solo es para pantallas grandes */
    }
}

/* DataTable custumize */

.dataTables_wrapper .dataTables_length label {
    display: inline-block;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #aaa;
    border-radius: 3px;
    background-color: #0b0b0b;
    display: inline-flex;
    gap: 3px;
    width: 60px;
}

.dataTables_wrapper .dataTables_filter label {
    display: inline-block;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_filter input {
    display: inline-flex;
    gap: 3px;
    width: 200px;
}

/* Select2 tipo Bootstrap 5 */

body .select2-container--bootstrap-5 .select2-selection {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

body .select2-container--bootstrap-5.select2-container--focus .select2-selection,
body .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--bs-link-hover-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear,
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/0.75rem auto no-repeat;
}

body .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear:hover,
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/0.75rem auto no-repeat;
}

body .select2-container--bootstrap-5 .select2-dropdown {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-link-hover-color);
}

body .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

body .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--bs-link-hover-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message {
    color: #6c757d;
}

body .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: var(--bs-body-color);
    background-color: var(--bs-light-bg-subtle) !important;
}

body .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
body .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    color: var(--bs-body-color);
    background-color: var(--bs-dark-bg-subtle);
}

body .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled,
body .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"] {
    color: #6c757d;
}

body .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] .select2-results__group {
    color: #6c757d;
}

body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: #6c757d;
}

body .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

body .select2-container--bootstrap-5.select2-container--disabled .select2-selection,
body .select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection {
    color: #6c757d;
    background-color: var(--bs-light-bg-subtle);
    border-color: var(--bs-dark-bg-subtle);
}

.is-valid+body .select2-container--bootstrap-5 .select2-selection,
.was-validated select:valid+body .select2-container--bootstrap-5 .select2-selection {
    border-color: #198754;
}

.is-valid+body .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.is-valid+body .select2-container--bootstrap-5.select2-container--open .select2-selection,
.was-validated select:valid+body .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.was-validated select:valid+body .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.is-invalid+body .select2-container--bootstrap-5 .select2-selection,
.was-validated select:invalid+body .select2-container--bootstrap-5 .select2-selection {
    border-color: #dc3545;
}

.is-invalid+body .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.is-invalid+body .select2-container--bootstrap-5.select2-container--open .select2-selection,
.was-validated select:invalid+body .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.was-validated select:invalid+body .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Colores estados */

.estado-text-info {
    color: var(--status-info);
}

.estado-text-success {
    color: var(--status-on);
}

.estado-text-secondary {
    color: var(--status-off);
}

.estado-text-danger {
    color: var(--status-danger);
}

.estado-text-warning {
    color: var(--status-warning);
}