/*
header {
    background-image: url('../img/bg-hero.jpg');
    
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    min-height: 400px; /* Ajusta este valor según la altura de tu imagen y contenido 
    padding-bottom: 10rem;
  }*/


  header {
    background-image: url('../img/bg-hero3.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; /* Centrar la imagen para mejor responsividad */
    min-height: 300px; /* Reducir la altura mínima para pantallas pequeñas */
    padding-bottom: 3rem; /* Valor predeterminado para pantallas pequeñas */
}

/* Pantallas medianas (tablets) */
@media (min-width: 768px) {
    header {
        min-height: 400px; /* Aumentar la altura mínima para pantallas medianas */
        padding-bottom: 5rem;
    }
}

/* Pantallas grandes (desktops) */
@media (min-width: 1200px) {
    header {
        padding-bottom: 7rem;
    }
}

/* Pantallas muy grandes (desktops de alta resolución) */
@media (min-width: 1600px) {
    header {
        padding-bottom: 9rem;
    }
}
  

#historia p {
  text-align: justify;
  
}

figcaption {
  font-style: italic;
  color: #777;
  text-align: center;
  margin-top: 5px;
}

.navbar-nav .nav-link {
  /*padding: 0.5rem 1rem;  Reduce el padding */
   /* font-size: 0.9rem;  Reduce el tamaño de la fuente */
   white-space: normal;
    max-width: 200px; /* Ajusta este valor según tus necesidades */
    word-wrap: break-word;
    font-size: 0.9rem; /* Reduce el tamaño de la letra */
  transition: background-color 0.3s ease, border-bottom 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

.navbar-nav .nav-link:hover {
  color: white; /* Color de texto al pasar el cursor */
  border-bottom: 2px solid white; /* Subrayado blanco al pasar el cursor */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra al pasar el cursor */
}


.directivo-card {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
  text-align: center;
  border-radius: 5px; /* Opcional: para redondear las esquinas */
}

.directivo-card img {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* Para hacer la foto circular */
  object-fit: cover; /* Para asegurar que la foto se ajuste al círculo */
}

/*desde aca es para el equipo directivo*/
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* Espacio entre las tarjetas */
}

.card {
  width: 300px; /* Ancho fijo para las tarjetas */
  margin-bottom: 20px; /* Espacio inferior para las tarjetas */
  display: flex; /* Habilita flexbox para la tarjeta */
  flex-direction: column; /* Organiza los elementos verticalmente */

}

.card img {
  object-fit: cover; /* Ajustar imagen al contenedor */
  height: 250px; /* Altura fija para las imágenes */
  width: 100%; /*asegura que la imagen ocupe todo el ancho de la tarjeta*/
}

.card-body {
  flex-grow: 1; /* Permite que el cuerpo de la tarjeta crezca para llenar el espacio disponible */
  display: flex; /* Habilita flexbox para el cuerpo de la tarjeta */
  flex-direction: column; /* Organiza los elementos verticalmente */
  justify-content: center; /* Centra el contenido verticalmente */
  align-items: center; /* Centra el contenido horizontalmente */
  text-align: center; /* Centra el texto horizontalmente */
}

.card-title {
  margin-bottom: 10px; /* Espacio entre el título y el texto */
}

/* Media queries para ajustar el ancho de las tarjetas en pantallas más pequeñas */
@media (max-width: 768px) {
  .card {
      width: 250px;
  }
}

@media (max-width: 576px) {
  .card {
      width: 200px;
  }
}

#equipo-de-trabajo h3 { /* es para los titulos de equipo de trabajo */
  color: red;
  text-decoration: underline;
}

#infraestructura p {
  text-align: justify;
}

#infraestructura h3 {
    font-size: 2rem;       
}

#Biblioteca-cra p{
  text-align: justify;
}

.columna-cra {
  height: 100px; /* Ajusta la altura según necesites */
}

.carousel-inner img {
  object-fit: cover;
  height: 500px;
}

#hitos-af p{
  text-align: justify;
}

#utiles { /* lo puse para que la imagen se centrara*/
  text-align: center;
}

#utiles img{ /*para convertir la imagen en un circulo*/
 
  width: 250px; /* Ancho de la imagen */
  height: 250px; /* Alto de la imagen */
  border-radius: 50%; /* La mitad del ancho/alto o 50% */
}

.texto-justificado{
  text-align: justify;
}

.correo-pequeño{
  word-break: break-all;
  white-space: nowrap;
  font-size: 1rem;
}

.contenedor-inspectoria {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

.parrafo {
  font-size: 1rem;
  line-height: 1.5;
  word-wrap: break-word;
}

@media (max-width: 768px) {
  .parrafo {
      font-size: 0.7rem;
  }
}

/*lista de Simulacro*/
.custom-list {
  list-style-type: square; /* Cambia el tipo de viñeta */
  /*color: red;  Cambia el color de la viñeta */
}


/*banner de profesores curso*/
.imagen-container {
  text-align: center;
  margin-bottom: 10px;
}

.imagen-pequeña {
  width: 150px; /* Ajusta el tamaño según tus preferencias */
  height: 150px; /* Ajusta el tamaño según tus preferencias */
  object-fit: cover; /* Recorta la imagen para que quepa en el círculo */
  margin: 0 auto;
}

.imagen-container p {
  margin-top: 3px;
}


.modal-imagen {
  display: none; /* Inicialmente oculto */
  position: fixed; /* Se mantiene en la ventana */
  z-index: 1; /* Por encima de otros elementos */
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta para centrar correctamente */
  width: auto; /* Ajusta el ancho al contenido */
  height: auto; /* Ajusta la altura al contenido */
  max-width: 90%; /* O el ancho máximo que desees */
  max-height: 90%; /* O la altura máxima que desees */
  overflow: auto; /* Habilitar scroll si el contenido es largo */
  background-color: transparent; /* Fondo transparente */
}

.modal-imagen-contenido {
  display: flex; /* Para centrar la imagen */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  max-width: 90%; /* O el porcentaje que prefieras */
  max-height: 90%; /* O el porcentaje que prefieras */
  background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro para el contenido si lo deseas */
  padding: 20px; /* Añade un poco de espacio alrededor de la imagen */
  border-radius: 5px; /* Opcional: esquinas redondeadas */
}

.modal-imagen-contenido img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: auto;
}

.cerrar-modal-imagen {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.cerrar-modal-imagen:hover,
.cerrar-modal-imagen:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.imagen-convivencia{
  height: auto !important; /* Sobreescribe la altura de .card img */
  object-fit: contain; /* Asegura que la imagen completa sea visible */
}
/*
#destacados {
  background-image: url("./assets/img/pizarraVerde.jpg"); 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: white;
  padding: 50px 0;
}

#destacados h2,
#destacados p {
  
  padding: 10px;
  border-radius: 5px;
}
*/

#circulares-table {
  width: 80%; /* Ancho de la tabla (puedes ajustarlo) */
  margin: 20px auto; /* Centra la tabla horizontalmente */
  border-collapse: collapse; /* Colapsa los bordes de las celdas */
}

#circulares-table th,
#circulares-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

#circulares-table th {
  background-color: #f2f2f2;
}

/* Anchos específicos para las columnas */
.col-fecha {
  width: 15%; /* Ancho para la columna de fecha */
}

.col-descripcion {
  width: 65%; /* Ancho para la columna de descripción (ocupa más espacio) */
}

.col-acciones {
  width: 20%; /* Ancho para la columna de acciones */
  text-align: center; /* Centra el contenido de la columna de acciones */
}

/* Estilos para la versión responsive (opcional) */
/* @media (max-width: 600px) { ... } */

/*
.dropdown-item:hover {
  background-color: blue;
}*/

.articulo-articulo {
  max-width: 800px; /* Limita el ancho para facilitar la lectura */
  margin: 20px auto; /* Centra el artículo en la pantalla */
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  line-height: 1.6;
}

.header-articulo {
  text-align: center;
  margin-bottom: 20px;
}

.h1-articulo {
  color: #337ab7; /* Un color llamativo pero institucional */
  margin-bottom: 5px;
}

.fecha {
  color: #777;
  font-size: 0.9em;
}

.introduccion {
  color: #555;
  margin-top: 15px;
}

.galeria-imagenes {
  margin-top: 30px;
}

.galeria-imagenes h2 {
  text-align: center;
  color: #337ab7;
  margin-bottom: 15px;
}

.contenedor-imagenes {
  display: grid; /* Usamos Grid para un diseño flexible */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Crea columnas que se ajustan al ancho */
  gap: 10px; /* Espacio entre las imágenes */
}

.contenedor-imagenes img {
  width: 100%; /* Las imágenes ocupan todo el ancho de su contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.desarrollo {
  margin-top: 30px;
}

.desarrollo h2 {
  color: #337ab7;
  margin-bottom: 10px;
}

.footer-articulo {
  text-align: center;
  margin-top: 20px;
  color: #777;
  font-size: 0.8em;
}

.imagen-convivencia {
  height: auto !important; /* Sobreescribe la altura de .card img */
  object-fit: contain; /* Asegura que la imagen completa sea visible */
}

/* Media Query para pantallas más pequeñas */
@media (max-width: 600px) {
  .contenedor-imagenes {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Columnas más pequeñas en móviles */
  }

  article {
    padding: 15px;
    margin: 10px;
  }

  h1 {
    font-size: 1.5em;
  }
}


/*
  Clase personalizada para la columna que apila las imágenes.
  Usamos Flexbox para un control total.
*/
.columna-imagenes-apiladas {
  display: flex;            /* Activa Flexbox */
  flex-direction: column;   /* Apila los elementos verticalmente */
  justify-content: center;  /* Centra el contenido verticalmente en el espacio disponible */
  height: 100%;             /* Asegura que la columna ocupe toda la altura de la fila */
}

/*
  Establece un espacio (gap) entre las imágenes apiladas.
  '1rem' es equivalente a la clase 'mb-3' de Bootstrap, puedes cambiarlo a '0.5rem' si quieres aún menos espacio.
*/
.columna-imagenes-apiladas > div {
  margin-bottom: 1rem; 
}

/* Elimina el margen de la última imagen para que quede perfectamente alineado */
.columna-imagenes-apiladas > div:last-child {
  margin-bottom: 0;
}

/* Estilos para la fuente y el color del cuerpo */
body {
    font-family: 'Roboto', sans-serif;
    color: #333;
}

/* Estilo para el título destacado con ícono */
.titulo-destacado {
    font-weight: 700;
    color: #090909; /* Un azul para el título */
    border-bottom: 2px solid #0c0c0c; /* Una línea para darle énfasis */
    padding-bottom: 10px;
}

/* Estilo para el texto principal de los párrafos */
.texto-principal {
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: justify;
}

/* Estilo para la palabra "Solidaridad" */
.texto-solidaridad {
    color: #28a745; /* Un color verde para destacarla */
    font-size: 1.2rem;
}

/* Estilo para la caja de texto destacada */
.caja-destacada {
    background-color: #e9ecef; /* Un fondo gris claro */
    border-left: 5px solid #ffc107; /* Una línea lateral amarilla */
    padding: 15px;
    border-radius: 5px;
}

/* Estilo para la lista de íconos (personalizada) */
.lista-iconos {
    list-style: none; /* Elimina las viñetas por defecto */
    padding: 0;
}

.lista-iconos li {
    position: relative;
    padding-left: 25px; /* Espacio para el ícono */
    margin-bottom: 10px;
}

/* Pseudo-elemento para añadir un ícono como viñeta */
.lista-iconos li::before {
     content: "🙏";
    position: absolute;
    left: 0;
    /*color: #ff0000;  Puedes cambiar el color del corazón */
}



/* Estilo para el separador visual */
.separador {
    border-top: 1px solid #dee2e6;
}