/* Estilos generales */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Encode Sans', sans-serif;  /* Tipografía preferida */
}

header {
    background-color: #f8f9fa;
}


.navbar {
    background-color: #e1e6ee;
}

/* Enlaces del menú de navegación */
.navbar-nav .nav-link {
    color: #153777; 
    font-weight: 500;
}

.navbar-nav .nav-link:hover {
    color: #ff1500; 
}
.nav-link{color: #dde3ee;}


/* Submenú */
.dropdown-menu {
    background-color: #153777;
    border: none;
}

/* Enlaces del submenú */
.dropdown-menu .dropdown-item {
    color: white;
    text-decoration: none; 
}

.dropdown-menu .dropdown-item:hover {
    background-color: #d2d0c5;
    color: #153777;
    text-decoration: none; 
}


.custom-dropdown-menu {
    background-color: #153777; 
}

/* General: Eliminar subrayado por defecto en todos los enlaces */
a {
    text-decoration: none;
}

a:hover {
    font-weight:600; 
}

/* Footer */
footer {
    background-color: #343a40;
    color: white;
    padding: 40px 0; /* Espaciado adicional dentro del footer */
    margin-top: auto; /* Asegura que el footer se mantenga al final de la página */
}

footer iframe {
    border: none;
}

.card-img-top {
    height: 150px;
    object-fit: cover;
}

/* Contenido principal */
main {
    flex: 1;
    margin-bottom: 50px; /* Espacio adicional entre el contenido y el footer */
}

/* Carrusel */
.carousel, .carousel-item {
    height: 50vh; /* Altura del carrusel */
}

.carousel-item img {
    width: 100%;
    height: auto; /* Mantener la proporción de la imagen */
    object-fit: cover; /* Recortar la imagen si es necesario sin deformarla */
}

.my-5{
    margin-top: 1rem !important;
    margin-bottom: 2rem;
    }
    
@media (max-width: 768px) {
        .carousel, .carousel-item {
            height: 20vh; /* Altura reducida para dispositivos móviles */
        }
    }
@media (max-width: 768px) {
        .my-5, .my-3 {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }
    }


/* Estilo para el logo y el título */
.header-title {
    margin-left: 15px; /* Espaciado entre el logo y el título */
    color: #153777;
}

.img-fluid-logo {
    max-height: 90px;
}

/* Menú superior */
.top-nav {
    background-color: #153777;
    padding: 5px 0;
}

.social-icons a {
    color: #eaecf2;
    margin-left: 15px;
    font-size: 1.5em;
}



/* autoridades - misión institucional */
.mi {
    font-family: 'Encode Sans', sans-serif;
    color: #153777;
    margin-bottom: 20px;
}

.mi h3 {
    font-weight: 600;
    margin-bottom: 10px;
}

.mi h4 {
    text-align: justify;
    margin-bottom: 10px;
}

.mi p {
    margin-bottom: 15px;
    font-size: 1rem;
}

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

/* Carreras */
.hero {
    background: url('../img/banner_plan_estudios.jpg') no-repeat center center;
    background-size: cover;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.hero h1 {
    font-size: 2.5rem;
}

.program-list {
    list-style: none;
    padding-left: 0;
}

.program-list li {
    margin-bottom: 10px;
}

/* Enlaces para documentos */
.doc-link {
    text-decoration: none;
    color: #007bff;
}


/* Calendario */
.table-responsive {
    margin-top: 20px;
}

.bloque {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 100%; /* Asegura que ambos bloques tengan el mismo alto */
}

.bloque a {
    display: block;
    margin: 10px 0;
    color: #007BFF;
    text-decoration: none;
}

.bloque a:hover {
    text-decoration: underline;
}

.icono {
    margin-right: 8px; /* Espacio entre el icono y el texto */
}


/* Estilo img carreras */
.image-gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrado para cohesión */
    gap: 4px; /* Espacio mínimo entre imágenes (¡clave para unión!) */
    width: 100%;
    padding: 0;
}

.image-wrapper {
    box-sizing: border-box;
    overflow: hidden; /* Opcional para efectos hover */
    transition: transform 0.3s ease; /* Efecto de escala al hover (opcional) */
}

/* Imágenes en PC (7 por fila, grandes y unidas) */
.img-responsive {
    width: 100%;
    height: auto;
    max-height: 250px; /* Altura máxima grande en PC */
    object-fit: contain; /* Sin recortes */
    display: block;
}

/* Hover para destacar (opcional) */
.image-wrapper:hover {
    transform: scale(1.05); /* Ligero zoom al pasar el cursor */
    z-index: 1; /* Superposición */
}

/* ----- Responsividad ----- */
/* Móviles: 2 imágenes por fila */
@media (max-width: 600px) {
    .image-wrapper {
        flex: 0 0 calc(50% - 4px);
    }
    .img-responsive {
        max-height: 180px; /* Altura menor en móviles */
    }
}

/* Tabletas: 3 imágenes por fila */
@media (min-width: 601px) and (max-width: 899px) {
    .image-wrapper {
        flex: 0 0 calc(33.333% - 4px);
    }
}

/* PC: 7 imágenes por fila (grandes y compactas) */
@media (min-width: 900px) {
    .image-wrapper {
        flex: 0 0 calc(14.2857% - 4px); /* 7 imágenes */
    }
    .image-gallery-container {
        gap: 2px; /* Espacio casi nulo en PC */
    }
    .img-responsive {
        max-height: 300px; /* Más altas en PC */
    }
}

    .txt_carreras{
        padding: 0.5em;
        font-weight:300;
    }
    /* Fin Estilo img carreras */


    .image-gallery-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
        background-image: url('../img/carreras_img/backg.png'); 
        background-size: cover;
        background-position: center;
        padding: 20px; /* Añade espacio para que el fondo sea visible */
        margin-top: 0;
        border-top-style: solid;
        border-color: #d5d8db;
      border-bottom-style: solid;
    }