.table-wrapper {
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
    overflow-x: auto; /* Permite el desplazamiento horizontal */
    -webkit-overflow-scrolling: touch; /* Para mejorar la experiencia en dispositivos táctiles */
    margin-bottom: 20px; /* Opcional: agrega espacio por debajo de la tabla */
}

/* Estilos para la tabla */
.custom-table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate; /* Cambiado a 'separate' para que los bordes no se colapsen */
    border-spacing: 0; /* Elimina el espacio entre las celdas */
    font-size: 11.5px;
    border: 1px solid #ffffff; /* Borde muy fino en color plomo para la tabla */
}

/* Estilo para las celdas de la tabla */
.custom-table th,
.custom-table td {
    padding: 10px; /* Espacio dentro de las celdas */
    text-align: left; /* Alineación del texto a la izquierda */
    border: 1px solid #ffffff; /* Borde suave alrededor de las celdas */
    word-wrap: break-word; /* Evita que el texto se desborde en una celda */
}

/* Estilo para los encabezados */
.custom-table th {
    background-color: #565EAF; /* Color de fondo para los encabezados *//* Color de fondo para los encabezados */
    color: #ffffff; /* Color de texto de los encabezados */
    font-size: 12px; /* Tamaño de fuente para los encabezados */
    /*font-weight: bold; !* Negrita para los encabezados *!*/
}

/* Fila alternada con color de fondo */
.custom-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Color de fondo para las filas pares */
}

/* Centrar texto en las celdas específicas */
.custom-table td.center {
    text-align: center; /* Centra el contenido */
}

/* Alineación a la izquierda en las celdas específicas */
.custom-table td.left {
    text-align: left; /* Alinea a la izquierda */
}

/* Alineación a la derecha en las celdas específicas */
.custom-table td.right {
    text-align: right; /* Alinea a la derecha */
}

.custom-table th.center {
    text-align: center; /* Centra el contenido */
}

/* Alineación a la izquierda en las celdas específicas */
.custom-table th.left {
    text-align: left; /* Alinea a la izquierda */
}

/* Alineación a la derecha en las celdas específicas */
.custom-table th.right {
    text-align: right; /* Alinea a la derecha */
}

/* Fila activa o al pasar el cursor */
.custom-table tbody tr:hover {
    background-color: #feffe5; /* Color de fondo cuando el mouse pasa por encima */
    color: #3e4861;
    cursor: pointer;
}

/* Personalización de la barra de desplazamiento horizontal */
.table-wrapper::-webkit-scrollbar {
    height: 8px; /* Altura de la barra de desplazamiento */
}

.table-wrapper::-webkit-scrollbar-thumb {
    background-color: #888; /* Color del pulgar (parte desplazable) */
    border-radius: 4px; /* Bordes redondeados */
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color cuando se pasa el mouse sobre el pulgar */
}

.table-wrapper::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Color de la pista (parte por donde se mueve el pulgar) */
}

/* Media Query para pantallas pequeñas */
@media (max-width: 768px) {
    /* Aseguramos que la tabla ocupe el 100% del ancho disponible y el desplazamiento horizontal sea visible */
    .table-wrapper {
        overflow-x: auto; /* Para que aparezca la barra de desplazamiento cuando sea necesario */
    }

    /* Ajustar el tamaño de la fuente para pantallas pequeñas */
    .custom-table th,
    .custom-table td {
        font-size: 9px; /* Disminuir el tamaño de fuente */
    }
}

/* Media Query para dispositivos muy pequeños (como móviles) */
@media (max-width: 480px) {
    .custom-table {
        font-size: 8px; /* Reducir aún más el tamaño de la tabla */
    }

    /* Aseguramos que se muestre el scroll horizontal si la tabla es más grande que la pantalla */
    .table-wrapper {
        overflow-x: scroll;
    }
}