.grid-custom {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto */
    gap: 20px; /* Espacio entre las columnas */
}

@media (min-width: 768px) {
    .grid-custom {
        grid-template-columns: 1fr 1fr; /* Dos columnas iguales en pantallas más grandes */
    }
}

/* Asegúrate de que la barra de navegación esté alineada correctamente */
header {
    margin: 0;
    padding: 0;
}

nav.navbar {
    border-bottom: none;
    background-color: transparent; /* Asegúrate de que el fondo sea transparente */
}

.nav-pills {
    margin: 0;
    padding: 0;
}

.nav-link {
    color: white; /* Asegúrate de que el color del texto sea blanco */
}

/* Asegúrate de que el contenedor ocupe toda la pantalla con márgenes */
.container-fluid {
    padding: 0 15px; /* Ajusta el padding para los márgenes laterales */
}

.table-container {
    padding: 1rem; /* Ajusta el padding según sea necesario */
}

/* Estilos para pantallas de tamaño reducido */
@media (max-width: 768px) {
    table {
        font-size: 12px; /* Reduce el tamaño de la fuente en pantallas pequeñas */
    }

    th, td {
        padding: 8px 5px; /* Ajusta el padding */
    }

    /* Si la tabla es muy ancha, habilitar desplazamiento horizontal */
    .dataTables_wrapper {
        overflow-x: auto;
    }
}



.masthead {
    background-color: black;         /* Color de fondo negro por si la imagen no carga */
    height: 100vh;                   /* Ocupa el 100% de la altura de la pantalla */
    width: 100vw;                    /* Ocupa el 100% del ancho de la pantalla */
    margin: 0;
}