/* INFORMACION IMPORTANTE */

#informacion-importante {
  max-width: 1000px; /* Aumentar el ancho máximo */
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* Asegura que el padding no afecte al tamaño total */
  position: relative; /* Esto permitirá que la sombra se muestre correctamente fuera del contenedor */
  z-index: 1; /* Asegura que la sombra esté por encima de otros elementos */
}

#informacion-importante h2 {
  text-align: center;
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 20px;
}

.info-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.input-box {
  display: flex;
  flex-direction: column;
}

.input-box label {
  font-weight: bold;
  margin-bottom: 8px;
  color: red;
}

.input-box input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  width: 100%; /* Hace que los inputs ocupen todo el ancho disponible */
  box-sizing: border-box;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  .info-box {
    grid-template-columns: 1fr; /* Apilar las columnas en pantallas pequeñas */
  }
}

/* Ajustes para pantallas grandes */
@media (min-width: 1024px) {
  #informacion-importante {
    max-width: 970px; /* Aumenta el ancho máximo en pantallas grandes */
  }
}




/* ACTIVIDADES EXTRACURRICULARES */

    .faq-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza los botones */
        padding: 100px 0; /* Más espacio arriba y abajo */
        margin: 50px auto; /* Más espacio alrededor del contenedor */
        width: fit-content; /* El contenedor solo ocupa el espacio necesario */
    }

    .faq-button {
        background-color: #ea1d24; /* Color rojo para los botones */
        color: white;
        border: none; /* Elimina los bordes */
        padding: 20px;
        text-align: left;
        cursor: pointer;
        position: relative;
        width: 800px; /* Ancho más grande para los botones */
        margin: 0; /* Elimina el margen entre los botones */
        border-radius: 0; /* Sin bordes redondeados */
    }

    .faq-button:focus {
        outline: none;
    }

    .faq-content {
        display: none;
        padding: 20px;
        background-color: #f4f4f4;
        margin-top: 0; /* Sin margen entre los contenidos */
        width: 800px; /* El mismo tamaño que los botones */
        border-radius: 0; /* Sin esquinas redondeadas */
        text-align: left;
    }

    .active + .faq-content {
        display: block;
    }

    .faq-button::after {
        content: "+";
        position: absolute;
        right: 10px;
        font-size: 20px;
        top: 50%; /* Posición vertical al centro del botón */
        transform: translateY(-50%); /* Ajusta para centrar perfectamente */
    }

    .active::after {
        content: "-";
    }

    /* Adaptación para dispositivos móviles */
    @media (max-width: 600px) {
        .faq-button,
        .faq-content {
            width: 100%; /* Reduce el ancho al 100% del contenedor */
        }
    }




/* GOOGLE CALENDAR*/

  /* Ajustes para pantallas pequeñas */
  @media (max-width: 600px) {
    #calendario-contenedor {
      padding: 10px; /* Solo reduce el padding del contenedor del calendario en móviles */
    }

    iframe {
      height: 300px; /* Reduce la altura en móviles */
      width: 100%; /* Asegura que el calendario use todo el ancho disponible */
    }
  }

  /* Estilo para pantallas más grandes */
  @media (min-width: 1024px) {
    iframe {
      max-width: 1200px; /* Aumenta el ancho máximo en pantallas de escritorio */
    }
  }