/* Media Queries and Responsive Styles */
@media (max-width: 768px) {
  /* Summary Styles */
  .summary {
    max-height: 10rem;
    min-height: 10rem;
  }

  .summary-content {
    padding: 0.4rem;
    overflow: hidden;
  }

  .summary-title {
    font-size: 1rem;
    margin-bottom: 0.3rem;
  }

  .summary-date {
    font-size: 0.7rem;
  }

  .summary-description {
    font-size: 1.25rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
  }

  /* List Summary Styles */
  .list-summary.lista .summary {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 10rem;
    max-height: 15rem;
    height: 12rem;
  }

  .list-summary.lista .summary-image {
    width: 35%;
    overflow: hidden;
    max-height: 15rem;
    min-height: 10rem;
  }

  .list-summary.lista .summary-content {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
  }

  .list-summary.cuadros {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: flex-start;
  }

  .list-summary.cuadros .summary {
    width: 100%;
    height: auto;
    min-height: 10rem;
  }

  .list-summary.cuadros .summary-image {
    width: 100%;
    min-height: 150px;
    max-height: 150px;
  }

  /* Carousel Styles */
  .carousel-item img {
    height: 170px;
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width: 320px) {
  .summary {
    flex-direction: column;
    height: auto !important;
    max-height: none !important;
  }

  .summary-image {
    width: 100% !important;
    height: 150px !important;
  }
  .mid-wrapper {
    padding: 0rem 0.5rem;
    padding-top: 3rem;
  }
  .intro-about{
    padding: 0.5rem 0rem;
    flex-basis: 100%;
    max-width: 100%;
  
  }

  /* Added for about page layout on very small screens */
  .intro .fila {
    display: flex; /* Asegura el contexto flex */
    flex-direction: column-reverse; /* Apila los elementos e invierte el orden (imagen arriba) */
  }

  .intro .fila .intro-content,
  .intro .fila .about-img {
    width: 100%; /* Asegura que ambos elementos ocupen el ancho completo */
    max-width: 100%; /* Sobrescribe cualquier max-width de las clases col-md-6 */
    flex-basis: auto; /* Permite que el tamaño se base en el contenido o el ancho */
    margin-bottom: 1rem; /* Añade un pequeño margen inferior para separación */
  }
  

  .intro .fila .about-img {
    width: 80%; /* Reducimos el ancho del contenedor de la imagen */
    max-width: 250px; /* Un máximo para que no sea demasiado grande en proporción */
    margin-left: auto; /* Centramos el contenedor */
    margin-right: auto; /* Centramos el contenedor */
    margin-bottom: 1rem; /* Mantenemos el margen inferior para separación */
    flex-basis: auto; /* Permite que el tamaño se base en el contenido o el ancho */
  }

  .intro .fila .about-img img {
    display: block; /* Asegura que la imagen se comporte como bloque para centrado si es necesario */
    width: 100%; /* La imagen ocupa el 100% de su contenedor .about-img */
    height: auto; /* Mantiene la proporción */
  }

  .intro .fila .intro-content { /* El contenido de texto estará abajo */
    margin-bottom: 0; /* Elimina el margen inferior del último elemento */
  }
}

@media (max-width: 767.98px) { /* Breakpoint sm de Bootstrap */
    .list-item {
        flex-direction: column; /* Apila los elementos verticalmente */
        align-items: flex-start; /* Alinea al inicio */
    }
    .list-item img {
        width: 100%; /* La imagen ocupa todo el ancho disponible */
        
        margin-right: 0;
        margin-bottom: 10px; /* Espacio debajo de la imagen */
    }
}

@media (max-width: 575.98px) {
  /* Ocultar el toggle de vista en pantallas de una columna */
  .view-toggle {
    display: none !important;
  }
}