#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #f5f5f5;
  color: #73a1c9;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000;
}
#back-to-top:hover {
  background-color: #e9e9e9;
}

/*CSS para los circulos */
.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
  .flex-container a {
    display: block;
    width: 195px;
    height: 195px;
    border-radius: 50%; 
    overflow: hidden;
    margin: 20px;
    transition: all 0.3s ease-in-out;
    border: 2px solid transparent; 
  }
  .flex-container a img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 50%; 
  }
  .hover-color1:hover {
    border: 1px solid #4267B2; 
  }
  .hover-color2:hover {
    border: 1px solid #000000; 
  }
  .hover-color3:hover {
    border: 1px solid rgb(14, 116, 91);
  }
  .hover-color4:hover {
    border: 1px solid #075E54; 
  }

/*CSS para los cuadros*/
.flex-containere {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centra los contenedores de imágenes en la página */
  gap: 80px; /* Espacio entre los contenedores de imágenes */
}

/* Estilos para el contenedor de imágenes */
.image-container {
  width: calc(33.333% - 20px); /* Ajusta para 3 cuadros por línea considerando el gap */
  height: 250px; /* Altura fija para todos los cuadros */
  overflow: hidden; /* Asegura que todo el contenido se ajuste al tamaño del contenedor */
  text-align: center; /* Centra el contenido */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Sombra opcional para estética */
  transition: 0.3s; /* Efecto de transición suave para el hover */
}

.image-container a {
  display: flex;
  flex-direction: column; /* Organiza la imagen y el título en una columna */
  justify-content: center; /* Centra verticalmente dentro del cuadro */
  align-items: center; /* Centra horizontalmente */
  height: 100%;
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  color: inherit; /* El texto del título usa el color actual del texto */
}

.image-container img {
  max-width: 100%; /* Asegura que la imagen no sobrepase el ancho del contenedor */
  max-height: 80%; /* Ajusta la altura máxima de la imagen para dejar espacio al título */
  object-fit: cover; /* Asegura que la imagen cubra el espacio asignado */
}

.image-container .title {
  font-size: 1.3em; /* Tamaño del texto del título */
  font-weight: bold; /* Hace el título en negrita */
  width: 80%; /* Asegura que el título no sobrepase el contenedor */
  color: #1952c4;
}

/* Opcional: efecto al pasar el mouse por encima del contenedor */
.image-container:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/*CSS para las tablas*/
  table {
    border-collapse: collapse;
    width: 100%; /* O cualquier ancho que prefieras */
  }
  
  th, td {
    border: 1px solid #030916; /* Color del borde */
    padding: 8px; /* Espaciado interno */
  }
  
  th {
    background-color: #93a1ce; /* Color de fondo para los encabezados */
    text-align: left; /* Alineación del texto */
  }
  
  tr:hover {background-color: #e7dede98;} /* Color de fondo al pasar el mouse sobre una fila */


.back-button {
  position: absolute; /* Posición absoluta respecto a su contenedor relativo más cercano */
  top: 20px; /* Espacio desde la parte superior de la página */
  left: -90px; /* Espacio desde el lado izquierdo de la página */
  display: inline-block;
  padding: 5px 10px;
  background-color: #f0f0f0; /* Fondo del botón, cambia según tus necesidades */
  color: #333; /* Color del texto, cambia según tus necesidades */
  text-decoration: none; /* Elimina el subrayado del enlace */
  border-radius: 5px; /* Bordes redondeados */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra opcional para el botón */
  font-size: 1.5em; /* Tamaño del texto y de la flecha */
  z-index: 1000; /* Asegura que el botón esté sobre otros elementos */
}

.back-button:hover {
  background-color: #e0e0e0; /* Color de fondo al pasar el mouse */
}


#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  display: none; /* Ocultar por defecto */
}