/* Estilizar las celdas */
.table-smaller th, .table-smaller td {
    padding: 0.300rem; /* Ajusta el espaciado */
    font-size: 1.225rem; /* Tamaño de fuente ajustado */
    white-space: normal; /* Permite saltos de línea */
    word-wrap: break-word;
    border-collapse: collapse; /* Elimina espacios entre celdas */
    border: 1px solid black; /* Asegura un buen contraste */
        /* Corta palabras largas si es necesario */
}
/* Bordes de las celdas */
.table-smaller th, .table-smaller td {
    border: 1px solid black !important; 
    padding: 5px; /* Ajusta el espaciado */
    text-align: left; /* Alineación del texto */
}
/* Estilo para encabezados */
.table-smaller th {
    background-color: #212529; /* Color oscuro profesional */
    color: white; /* Texto en blanco */
    font-weight: bold;
}
/* Alternar colores en filas */
.table-smaller tbody tr:nth-child(odd) {
    background-color: #f8f9fa; /* Gris claro */
}
.table-smaller tbody tr:nth-child(even) {
    background-color: #e9ecef; /* Gris un poco más oscuro */
}
/* Resaltar fila al pasar el mouse */
.table-smaller tbody tr:hover {
    background-color: #d6d8db !important; /* Color más oscuro al hacer hover */
    transition: 0.3s;
}
/* Ajuste de texto en celdas */
.table-smaller td {
    white-space: nowrap; /* Mantiene todo en una línea */
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Contenedor principal para la tabla y el scroll superior */
.table-responsive-wrapper {
    position: relative;
}

/* Contenedor para el scroll superior */
.table-responsive-scroll-top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 6px; /* Altura del scroll superior */
    background-color: #f8f9fa;
    z-index: 2; /* Asegura que el scroll esté sobre la tabla */
}

/* Barra de desplazamiento en la parte superior */
.scrollbar {
    width: 100%;
    height: 6px;
    background-color: #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
}

/* Contenedor de la tabla */
.table-responsive {
    overflow-x: auto;
    overflow-y: hidden; /* No muestra el scroll vertical */
    margin-top: 6px; /* Evita que el contenido de la tabla quede debajo del scroll superior */
}

/* Barra de desplazamiento en la parte inferior */
.table-responsive::-webkit-scrollbar {
    height: 6px; /* Altura del scroll horizontal */
}

.table-responsive::-webkit-scrollbar-track {
    background: #f8f9fa; /* Gris claro */
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #343a40; /* Color oscuro */
    border-radius: 10px;
    transition: background 0.3s;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #495057; /* Color más claro en hover */
}