/*
Theme Name: Plantilla Web TECNM 2026 (Personalizada)
Version: 3.9 - MENUS ESTANDARIZADOS
*/

@charset "UTF-8";

:root {
    --tecnm-azul: #1B396A;
    --tecnm-guinda: #54041D;
    --header-height-total: 260px;
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Open Sans', 'Montserrat', sans-serif;
    margin: 0;
}

/* Evitar que cualquier elemento desborde el ancho del viewport */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Fijar el desbordamiento de .row de Bootstrap en pantallas pequeñas */
@media (max-width: 991px) {

    body,
    html {
        width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        /* Centrar filas por defecto */
    }

    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        /* Evitar que hijos se salgan */
    }

    img,
    iframe,
    video,
    embed,
    object {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Centrar solo los elementos con la clase text-center-mobile */
    .text-center-mobile {
        text-align: center !important;
    }
}

/* BARRAS RESPONSIVAS Y FIJAS (Efecto Sticky como tecnm.mx) */
#main-header {
    display: contents;
}

/* Permite que el sticky se extienda por toda la página */
#barraGobmx {
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    min-height: 50px !important;
    background: var(--tecnm-guinda) !important;
}

.contenedorLogos {
    position: relative !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 990;
    min-height: 120px;
    background: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.menublanco {
    position: sticky !important;
    top: 49px;
    left: 0;
    right: 0;
    z-index: 980;
    height: 42px !important;
    background: #fff;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
}

.menuazul {
    position: sticky !important;
    top: 91px;
    left: 0;
    right: 0;
    z-index: 970;
    height: 48px !important;
    background: var(--tecnm-azul) !important;
    display: flex;
    align-items: center;
}

/* COLORES DE LETRA FORZADOS */
.menuazul .nav-link,
.menuazul a,
.menuazul span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.menublanco .nav-link,
.menublanco a,
.menublanco span {
    color: #000000 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    padding: 0.5rem 0.2rem !important;
}

.menublanco .navbar-nav>.nav-item {
    white-space: nowrap !important;
}

/* === CORRECCIÓN DE SUBMENÚS (DROPDOWNS) === */
.menublanco .navbar-nav .nav-item,
.menuazul .navbar-nav .nav-item {
    position: relative !important;
}

@media (min-width: 992px) {

    /* Nivel 1: Caer hacia abajo */
    .menublanco .navbar-nav>.nav-item>.dropdown-menu,
    .menuazul .navbar-nav>.nav-item>.dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        margin-top: 0 !important;
    }

    /* Nivel 2 (Sub-submenús): Desplegar hacia la derecha */
    .menublanco .dropdown-menu .dropdown-menu,
    .menuazul .dropdown-menu .dropdown-menu {
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        margin-top: -2px !important;
        margin-left: 0px !important;
    }
}


/* Apariencia general de cualquier menú desplegable */
.menublanco .dropdown-menu,
.menuazul .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    border-top: 2px solid var(--tecnm-azul) !important;
    z-index: 9999 !important;
    /* Evitar que queden ocultos debajo de otra barra */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Texto de las opciones desplegables siempre visible (oscuro) */
.menublanco .dropdown-menu a,
.menuazul .dropdown-menu a {
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    white-space: normal !important;
    /* Para que opciones largas se acomoden y no rompan el menú */
    padding: 8px 16px !important;
    display: block !important;
    height: auto !important;
    /* Permitir que crezcan si hay doble línea */
    line-height: 1.4 !important;
    /* Separación apropiada entre líneas */
}

/* Efecto hover en las opciones desplegables */
.menublanco .dropdown-menu a:hover,
.menuazul .dropdown-menu a:hover {
    background-color: #f1f1f1 !important;
    color: #000000 !important;
}

/* LOGOS */
.plecaLogo {
    max-height: 80px !important;
    width: auto;
}

/* BUSCADOR */
.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
}

/* ELIMINAR ESPACIO EXTRA */
.header-spacer,
#header-spacer {
    display: none !important;
}

#main_content,
.page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* QUITAR REDES SOCIALES */
.sticky-container,
.sticky {
    display: none !important;
}

/* HOVER */
@media (min-width: 992px) {
    .dropdown:hover>.dropdown-menu {
        display: block !important;
        margin-top: 0;
    }
}

@media (max-width: 991px) {
    body {
        padding-top: 0 !important;
    }
}

/* FOOTER INSTITUCIONAL */
#footer_institucional {
    background-color: var(--tecnm-azul) !important;
    color: #ffffff !important;
}

#footer_institucional a,
#footer_institucional .footer-title,
#footer_institucional p,
#footer_institucional span {
    color: #ffffff !important;
}

/* FORZAR ANCHO DE INCRUSTACIONES DE WORDPRESS (oEmbed) PARA QUE NO OCULTE LA IMAGEN */
.wp-block-embed iframe,
.wp-embedded-content {
    width: 100% !important;
    max-width: 100% !important;
}

.custom-widget-container .wp-block-embed {
    width: 100%;
}

/* ============================================================
   RESPONSIVIDAD MÓVIL Y TABLET
   ============================================================ */

/* --- TABLET (768px – 991px) --- */
@media (max-width: 991px) {

    /* Header: reducir logo y barras */
    .contenedorLogos {
        min-height: 70px !important;
        padding: 5px 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .plecaLogo {
        max-height: 44px !important;
    }

    /* Centrar logos */
    .contenedorLogos .row {
        justify-content: center !important;
        width: 100%;
        margin: 0 !important;
    }

    /* Sticky positions ajustados para barras más delgadas */
    #barraGobmx {
        min-height: 40px !important;
        top: 0 !important;
    }

    .menublanco {
        top: 40px !important;
        /* Debajo de barra gob */
        height: auto !important;
        min-height: 38px !important;
    }

    .menuazul {
        top: 78px !important;
        /* Debajo de menublanco */
        height: 44px !important;
    }

    /* Buscador más compacto */
    .menublanco .input-group {
        width: 150px !important;
    }

    .menublanco .form-control {
        font-size: 11px !important;
        height: 26px !important;
    }

    /* Título de sección "Síguenos" más compacto */
    .display-3 {
        font-size: 1.8rem !important;
        text-align: center;
        width: 100%;
    }

    /* Contenido principal con menos padding lateral */
    #desface .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Footer: columnas apiladas con menos padding */
    #footer_institucional .container {
        padding: 10px !important;
    }

    #footer_institucional .col-12 {
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    #footer_institucional .text-left {
        text-align: center !important;
    }

    .map-container {
        height: 200px !important;
        margin-top: 10px;
        width: 100% !important;
    }
}

/* --- MÓVIL --- */
@media (max-width: 767px) {

    /* Header aún más compacto y centrado */
    .contenedorLogos {
        min-height: auto !important;
        padding: 10px 0 !important;
    }

    /* Logos en una sola línea centrada */
    .contenedorLogos .row {
        justify-content: center !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        /* Permitir wrap si falla el ancho */
        align-items: center !important;
        width: 100% !important;
    }

    .contenedorLogos .col-12 {
        width: 100% !important;
        padding: 0 10px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px;
        /* Espacio uniforme entre logos */
    }

    .contenedorLogos .border-left {
        height: 24px;
        margin: 0 !important;
        padding-left: 15px !important;
        border-left: 1px solid #ddd !important;
    }

    .contenedorLogos a {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 !important;
        /* Remover margenes estáticos */
    }

    .plecaLogo {
        max-height: 45px !important;
        width: 100% !important;
        max-width: 130px !important;
        /* Límite seguro para no desbordar 50% */
        height: auto !important;
        object-fit: contain;
    }

    /* Centrar puntos de carruseles */
    .slick-dots {
        justify-content: center !important;
        padding: 0 !important;
        margin: 5px 0 15px !important;
    }

    /* Barra blanca y azul centradas */
    .menublanco .container-fluid,
    .menuazul .container-fluid {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Acomodar buscador y hamburguesa blanca en extremos */
    .menublanco .d-flex.justify-content-between {
        justify-content: space-between !important;
        width: 100% !important;
    }

    .menublanco .input-group {
        width: 130px !important;
    }

    /* Sticky positions para móvil (barras más pequeñas) */
    #barraGobmx {
        min-height: 36px !important;
    }

    #barraGobmx .container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    #barraGobmx .navbar-brand {
        margin: 0 auto !important;
        display: block !important;
    }

    #barraGobmx .navbar-brand img {
        height: 22px !important;
        width: auto !important;
        display: inline-block !important;
    }

    .menublanco {
        top: 36px !important;
        min-height: 40px !important;
    }

    .menuazul {
        top: 76px !important;
        height: 40px !important;
    }

    /* Secciones: ajustes de padding para móviles */
    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Títulos de sección centrados */
    .display-3,
    .display-4 {
        font-size: 1.5rem !important;
        text-align: center !important;
        width: 100%;
        margin: 0 auto !important;
    }

    h2,
    h3,
    h4 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Forzar que las tarjetas no desborden */
    .card,
    .card-noticia,
    .social-card-wrapper {
        width: 100% !important;
        max-width: 96% !important;
        margin: 0 auto 15px !important;
        float: none !important;
    }

    /* Footer compacto y centrado */
    #footer_institucional .col-12 {
        margin-bottom: 25px !important;
    }

    .map-container {
        height: 160px !important;
    }

    /* Noticias centradas */
    .noticia-title {
        font-size: 1rem !important;
        padding: 8px !important;
    }

    .card-noticia img {
        max-height: 250px !important;
    }

    .banner-slide {
        width: 100vw !important;
        max-width: 100vw !important;
        display: flex !important;
        justify-content: center !important;
    }

    .banner-image-responsive {
        height: auto !important;
        /* Permitir que crezca proporcional al ancho */
        max-height: none !important;
        /* No forzar recorte */
        width: 100% !important;
        max-width: 100vw !important;
        object-fit: contain !important;
        /* Mostrar toda la imagen completa */
    }

    /* Sliders */
    .slick-slide {
        display: flex !important;
        justify-content: center !important;
    }

    /* Ajustes finales de texto */
    p,
    li {
        font-size: 0.95rem !important;
    }
}