.table-container {
  overflow-x: auto;
  max-width: 100%; /* Ajusta el ancho máximo según sea necesario */
}

.table-container::-webkit-scrollbar {
  height: 10px; /* Altura de la barra de desplazamiento */
  background-color: #f0f5f9; /* Color de fondo de la barra de desplazamiento */
}

.table-container::-webkit-scrollbar-thumb {
  background-color: #3498db; /* Color del "thumb" de la barra de desplazamiento */
  border-radius: 5px; /* Borde redondeado del "thumb" */
}

.table-container::-webkit-scrollbar-thumb:hover {
  background-color: #2980b9; /* Color del "thumb" de la barra de desplazamiento al pasar el mouse */
}


/* Estilos para la tabla */
.table-container table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap; /* Evitar que los elementos se envuelvan a la siguiente línea */

}

.table-container th, .table-container td {
  padding: 4px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  vertical-align: middle; /* Alineación vertical al centro */
  
}

/* Estilos para las filas impares */
.table-container tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* Estilos para el encabezado */
.table-container thead {
  background-color: #3498db; /* Azul */
  color: #fff;
}

/* Estilos para las celdas en el encabezado */
.table-container th {
  font-weight: bold;
}

/* Hover sobre las filas */
.table-container tbody tr:hover {
  background-color: #e0e0e0; /* Color de fondo cuando se pasa el ratón */
}



.button-container {
  display: flex; /* Utiliza flexbox para alinear los botones horizontalmente */
  justify-content: space-between; /* Espacio uniformemente entre los botones */
  border: none;
}

.editar-button,
.borrar-button {
  background-color: transparent;
  border: none;
  padding: auto; /* Quita el relleno para que los botones se ajusten al tamaño de los iconos */
}

.editar-button i,
.borrar-button i {
  font-size: 16px;
}

.editar-button {
  color: #4CAF50; /* Verde */
}

.borrar-button {
  color: #f44336; /* Rojo */
}


/* Estilos personalizados para el selector de cantidad de registros */
.dataTables_length {
  margin-bottom: 10px; /* Espacio entre el selector y la tabla */
  font-size: 14px; /* Tamaño de fuente */
  display: flex; /* Mostrar los elementos en línea */
  align-items: center; /* Centrar verticalmente los elementos */
}

.dataTables_length label {
  margin-right: 10px; /* Espacio entre el texto y el selector */
  color: #333; /* Color del texto */
}

.dataTables_length select {
  border-radius: 5px; /* Bordes redondeados */
  padding: 6px 12px; /* Espacio interno */
  font-size: 14px; /* Tamaño de fuente */
  color: #333; /* Color del texto */
  background-color: #f7f7f7; /* Color de fondo */
  border: 1px solid #ccc; /* Borde */
  margin-right: 10px; /* Espacio entre el selector y el siguiente elemento */
}

.dataTables_length select:focus {
  outline: none; /* Eliminar el contorno de enfoque */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Sombra al enfocar */
}

.dataTables_length select:hover {
  background-color: #e0e0e0; /* Cambio de color al pasar el ratón */
}



/* Ocultar el campo de búsqueda */
.dataTables_filter {
  display: none;
}

/* Estilos personalizados para los botones de paginación */
.dataTables_paginate {
  margin-top: 10px; /* Espacio entre la tabla y los botones */
  text-align: center; /* Centrar los botones */
  margin-bottom: 20px; /* Espacio entre la tabla y los botones */
}

.dataTables_paginate .paginate_button {
  display: inline-block;
  padding: 5px 10px; /* Espacio interno */
  margin: 0 2px; /* Margen entre los botones */
  font-size: 14px; /* Tamaño de fuente */
  color: #fff; /* Color del texto */
  background-color: #007bff; /* Color de fondo azul */
  border: 1px solid #007bff; /* Borde */
  border-radius: 4px; /* Bordes redondeados */
  cursor: pointer; /* Cambio de cursor al pasar el ratón */
  transition: background-color 0.3s, border-color 0.3s; /* Transición suave */
}

.dataTables_paginate .paginate_button:hover {
  background-color: #0056b3; /* Cambio de color al pasar el ratón */
  border-color: #0056b3; /* Cambio de color de borde al pasar el ratón */
}

.dataTables_paginate .paginate_button.current {
  background-color: #0056b3; /* Color de fondo azul oscuro para el botón actual */
  border-color: #0056b3; /* Color de borde azul oscuro para el botón actual */
}