.actividades-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.actividad-card {
    flex-basis: calc(33.33% - 60px); /* Tres tarjetas por fila en PC */
    margin:10px;
    border: 5px solid #230b5e;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.actividad-card h2 {
    margin: 10px;
    color: #001f3f; /* Azul marino */
}

.imagenes {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.imagenes img {
    width: 100%;
    height: auto;
}

.imagenes img:first-child {
    margin-bottom: 10px; /* Separación entre las imágenes */
}

.actividad-info {
    padding: 10px;
}

.actividad-info p {
    margin-bottom: 10px;
}

.actividad-info ul {
    list-style: none;
    padding: 0;
}

.actividad-info ul li {
    margin-bottom: 5px;
}

.acciones {
    margin-top: 10px;
    text-align: center;
}





@media only screen and (max-width: 991px) {
    .actividad-card {
        flex-basis: calc(50% - 40px); /* Dos tarjetas por fila en tablet */
    }
}

@media only screen and (max-width: 580px) {
    .actividad-card {
        flex-basis: calc(100% - 20px); /* Una tarjeta por fila en móvil */
    }
}


/************ stylo para inscripciones ************++++++++++++*/
.centroInscripcion {
    width: 95%;
    margin: 0 auto;
}



.inscripciones-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrar las tarjetas en PC */
}

.inscripcion-card {
    width: calc(20% - 20px); /* Cuatro tarjetas por fila en PC */
    margin-bottom: 20px;
    margin-right: 20px;
    padding: 10px;
    border: 3px solid #212f67;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.usuario-card {
    /* Establecer un ancho máximo para el contenedor */
    max-width: 400px; /* Ajusta este valor según sea necesario */
    /* Restringir el texto de la contraseña para que no se desborde */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.inscripciones-container .inscripcion-card:nth-child(4n) {
    margin-right: 0;
}

.inscripcion-card p {
    margin: 0;
    margin-bottom: 5px;
}

.acciones {
    margin-top: 10px;
}


.acciones a.ver-justificante {
    background-color: aqua; /* Cambio de color para el botón 'Ver justificante' */
}



@media only screen and (max-width: 991px) {
    .inscripcion-card {
        width: calc(28.33% - 20px); /* Tres tarjetas por fila en tablet */
    }

    .inscripciones-container .inscripcion-card:nth-child(3n) {
        margin-right: 20px; /* Restaurar margen derecho en la tercera tarjeta de cada fila en tablet */
    }
}

@media only screen and (max-width: 768px) {
    .inscripcion-card {
        width: calc(50% - 20px); /* Dos tarjetas por fila en móvil */
    }

    .inscripciones-container .inscripcion-card:nth-child(2n) {
        margin-right: 20px; /* Restaurar margen derecho en la segunda tarjeta de cada fila en móvil */
    }
}

@media only screen and (max-width: 480px) {
    .inscripcion-card {
        width: calc(100% - 20px); /* Una tarjeta por fila en móvil */
    }

    .inscripciones-container .inscripcion-card {
        margin-right: 0; /* Eliminar margen derecho en dispositivos móviles */
    }
}
#ultimo {
    display: flex;
    justify-content: center; /* Centrar elementos horizontalmente */
    align-items: center; /* Centrar elementos verticalmente */
}






@media only screen and (max-width: 768px) {
    #ultimo {
        flex-direction: column; /* Cambiar la dirección a vertical en tablet y móvil */
    }

}
/*codigo pra juntar los botones de abajo al centro*/
.menu.flex-container {
    display: flex;
    justify-content: center;
}

.menu.flex-container a {
    margin-right: 10px; /* Espacio entre los botones */
}

@media only screen and (max-width: 768px) {
    .menu.flex-container {
        flex-direction: column;
        align-items: center;
    }

    .menu.flex-container a {
        margin-right: 0;
        margin-bottom: 10px; /* Espacio entre los botones en modo vertical */
    }
}
.w-90 {
    width: 90%;
}
/***************galeria de img responsive *****************************/
/* Evita que se solapen imágenes al mostrar las actividades */
.galeria {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px;
  }
  /*
.imagen {
  flex: 0 1 calc(25% - 20px);
  margin: 10px;
  text-align: center;
  box-sizing: border-box; /* Asegura que el margen no afecte el ancho total 
}
*/
  .imagen {
    flex: 0 1 calc(33.33% - 20px); /* Cambia el 25% por 33.33% para mostrar tres imágenes por fila en dispositivos de escritorio */
    margin: 10px;
    text-align: center;
    box-sizing: border-box;
  }
  
  /* Ajusta el tamaño de las imágenes para ser responsive */
  .imagen img {
    max-width: 100%;
    height: auto;
  }
  
  /* Media queries para ajustar el diseño en tablets y dispositivos móviles */
  @media screen and (max-width: 1024px) {
    .imagen {
      flex: 0 1 calc(50% - 20px); /* Cambia el 25% por 50% para mostrar dos imágenes por fila en tablets */
    }
  }
  
  @media screen and (max-width: 600px) {
    .imagen {
      flex: 0 1 calc(100% - 20px); /* Cambia el 25% por 100% para mostrar una imagen por fila en dispositivos móviles */
    }
  }
  .inscripcion-card h2 {
    margin: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/***** muestr*******/
.inscripcion1-card {

    margin: 0 auto; /* Centra la tarjeta horizontalmente */
    padding: 20px;
    border: 5px solid #001f3f; /* Borde azul marino */
    border-radius: 10px; /* Esquinas redondeadas */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
  flex-direction: column;
  align-items: center;

}

/* Estilo para el contenido dentro de la tarjeta */
.inscripcion1-card p {
    margin-bottom: 10px;
    font-size: 20px;
}



   .container1{
    display: flex;
    flex-direction: column;
    align-items: center;
    }
/*colabotradores*/
/* Colaboradores */
.colaborador {
    width: calc(30% - 20px); /* Tres columnas en PC */
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 3px solid #212f67;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.colaborador h2 {
    background-color: #230b5e; /* Azul oscuro */
    color: white; /* Texto en blanco */
    padding: 10px; /* Espaciado interno */
    border-radius: 5px; /* Esquinas redondeadas */
}
/* Media query para tablet */
@media only screen and (max-width: 950px) {
    .colaborador {
        width: calc(45% - 5px); /* Dos columnas en tablet */
    }
}

/* Media query para móvil */
@media only screen and (max-width: 580px) {
    .colaborador {
        width: calc(100% - 20px); /* Una columna en móvil */
    }
}