/* Estilos para la tabla */
.tabla-contenedor {
  width: 80%; /* Ocupa 80% del ancho de la pantalla en pantallas grandes */
  max-width: 1200px; /* Limita el ancho máximo */
  margin: 0 auto; /* Centra el contenedor */
  padding: 0 20px;
  max-height: 400px; /* Altura máxima del contenedor */
  overflow-y: auto; /* Hace que el contenido sea desplazable verticalmente */
  /* border: 1px solid #ddd; Borde para el contenedor */
  /* border-radius: 5px; Bordes redondeados */
  overflow-x: hidden; /* Elimina el scroll horizontal */
}

table {
  width: 100%; /* La tabla ocupa el 100% del contenedor */
  border-collapse: collapse;
  margin: 20px 0;
  table-layout: fixed; /* Fija el ancho de las columnas */
}

/* Fijar el thead */
thead {
  height: 40px;
  /* position: sticky; */
  top: 0; /* Fija el thead en la parte superior */
  z-index: 2; /* Asegura que el thead esté por encima del contenido */
}

th {
  background-color: #20bf6b;
  color: white;
  /* position: sticky; Hace que las celdas del encabezado sean fijas */
  top: 0; /* Fija las celdas en la parte superior */
  z-index: 1; /* Asegura que las celdas estén por encima del contenido */
}

td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
  word-break: break-word; /* Divide el texto en varias líneas si es necesario */
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

.descargar-btn {
  background-color: #20bf6b;
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap; /* Evita que el texto del botón se divida */
}

.descargar-btn:hover {
  background-color: #1a9c5a;
}

/* Estilos responsivos */
@media (max-width: 1200px) {
  .tabla-contenedor {
    width: 90%; /* En pantallas medianas, ocupa el 90% del ancho */
  }
}

@media (max-width: 768px) {
  .tabla-contenedor {
    width: 95%; /* En pantallas pequeñas, ocupa el 95% del ancho */
    max-height: 300px; /* Reducimos la altura máxima para pantallas pequeñas */
  }

  th, td {
    padding: 8px; /* Reducimos el padding para pantallas pequeñas */
  }
}

@media (max-width: 480px) {
  .tabla-contenedor {
    width: 100%; /* En pantallas muy pequeñas, ocupa el 100% del ancho */
    max-height: 250px; /* Reducimos aún más la altura máxima */
  }

  th, td {
    padding: 6px; /* Reducimos aún más el padding para pantallas muy pequeñas */
  }

  .descargar-btn {
    padding: 6px 10px; /* Reducimos el padding del botón */
    font-size: 12px; /* Reducimos el tamaño de la fuente del botón */
  }
}

/* Estilos para el scroll vertical */
.tabla-contenedor::-webkit-scrollbar {
  width: 8px; /* Ancho del scroll */
}

.tabla-contenedor::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color de fondo del track */
  border-radius: 5px; /* Bordes redondeados */
}

.tabla-contenedor::-webkit-scrollbar-thumb {
  background: #888; /* Color del thumb */
  border-radius: 5px; /* Bordes redondeados */
}

.tabla-contenedor::-webkit-scrollbar-thumb:hover {
  background: #555; /* Color del thumb al pasar el mouse */
}