/* ==========================================================================
   1. ESTILOS GLOBALES Y CUERPO
   ========================================================================== */
body {
    padding-top: 0; 
    padding-bottom: 3rem;
    color: rgb(var(--bs-tertiary-color-rgb));
}

/* ==========================================================================
   2. MENÚ DE NAVEGACIÓN (NAVBAR)
   ========================================================================== */
/* Fondo blanco limpio con sombra suave */
.menu-institucional {
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 10px 20px;
    z-index: 9999 !important; 
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
}

/* Ajuste de centrado vertical para los enlaces del menú */
.enlaces-navegacion {
    align-items: center; /* Centra los textos perfectamente con el logotipo */
}


/* Estilo y personalización del botón hamburguesa nativo de Bootstrap 5 */
.navbar-toggler {
    border: 2px solid rgba(139, 29, 36, 0.3) !important;
    padding: 6px 10px !important;
    background-color: #f8fafc !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(139, 29, 36, 0.15) !important; /* Brillo sutil al presionar */
}

/* Cambia las 3 líneas por un formato vectorial (SVG) limpio en rojo guinda */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://w3.org stroke='%238b1d24' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Alineación fija del logotipo institucional */
.logo-municipio {
    display: inline-block !important;
    line-height: 1.1;
    text-align: left;
    text-decoration: none !important;
}

.logo-municipio .texto-principal {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: #8b1d24; /* Rojo Guinda Institucional */
    text-transform: uppercase;
    margin: 0;
}

.logo-municipio .texto-sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #d32f2f; /* Rojo Carmesí */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
}

/* Enlaces horizontales de navegación */
.enlaces-navegacion .nav-item .nav-link {
    color: #334155 !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 16px !important;
    transition: color 0.2s ease;
}

.enlaces-navegacion .nav-item:hover .nav-link,
.enlaces-navegacion .nav-item .nav-link.active {
    color: #8b1d24 !important; 
}

/* Caja desplegable de los Institutos (Dropdown) */
.submenues-estilizados {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    background-color: #ffffff;
}

.submenues-estilizados .dropdown-item {
    color: #475569 !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 10px 20px;
    transition: all 0.2s ease;
}

.submenues-estilizados .dropdown-item:hover {
    background-color: #fdf2f2; 
    color: #8b1d24 !important; 
    padding-left: 24px; 
}

/* Rediseño Moderno e Institucional del Botón SeatSb */
.btn-seatsb {
    background-color: #8b1d24; 
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase; 
    letter-spacing: 0.5px;     
    padding: 10px 24px;        
    border-radius: 50px;       
    border: 2px solid transparent;
    box-shadow: 0 4px 10px rgba(139, 29, 36, 0.2); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

.btn-seatsb:hover {
    background-color: #ffffff;
    color: #8b1d24 !important;
    border-color: #8b1d24; 
    transform: translateY(-2px); 
    box-shadow: 0 6px 15px rgba(139, 29, 36, 0.35); 
}

.btn-seatsb:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(139, 29, 36, 0.2);
}

/* ==========================================================================
   3. PERSONALIZACIÓN DEL CARRUSEL (Alineado a la foto)
   ========================================================================== */
.carousel {
    position: relative;
    max-width: 900px;
    margin: 105px auto 2rem auto; 
}

.carousel-item {
    height: auto !important;
}

.carrusel-contenedor-bloque {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.carrusel-imagen-ajustada {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

.carrusel-capa-texto {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    padding: 40px 25px 25px 25px;
    text-align: left;
    color: #ffffff;
    z-index: 15;
}

.carrusel-categoria {
    font-family: sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #d32f2f; 
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 6px;
}

.carrusel-titulo {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.carousel-control-prev, 
.carousel-control-next {
    width: 5%;
    height: 100%;
    margin: auto 0;
    z-index: 20;
}

.carousel-control-prev { left: 20px; }
.carousel-control-next { right: 20px; }

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(139, 29, 36, 0.8); 
    border-radius: 50%;
    padding: 22px;
    background-size: 45%;
}

/* ==========================================================================
   4. SECCIONES INFERIORES (MARKETING / FEATURETTES)
   ========================================================================== */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}

.featurette-divider {
    margin: 5rem 0;
}

.featurette-heading {
    letter-spacing: -.05rem;
}

@media (min-width: 40em) {
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }
    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}

/* ==========================================================================
   5. DISEÑO RESPONSIVO EXCLUSIVO PARA MÓVILES (SINTAXIS CORREGIDA)
   ========================================================================== */
@media (max-width: 991px) {
    /* Ajustes del menú desplegable de Bootstrap 5 en celulares */
    .navbar-collapse {
        background-color: #ffffff !important;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        padding: 20px !important;
        border-radius: 8px;
        margin-top: 10px;
    }

    .enlaces-navegacion {
        text-align: center;
        width: 100%;
    }

    .btn-seatsb {
        display: block;
        text-align: center;
        margin-top: 15px;
    }

    /* Ajustes de tamaño del carrusel en celulares */
    .carousel {
        margin-top: 85px; 
    }
    
    .carrusel-imagen-ajustada {
        height: 300px; 
    }
    
    .carrusel-titulo {
        font-size: 1.05rem;
    }

    /* Ajuste para las cajitas desplegables en móviles */
    .submenues-estilizados {
        box-shadow: none;
        background-color: #fdf8f8; 
        border-left: 3px solid #8b1d24; 
    }
    
    .submenues-estilizados .dropdown-item {
        text-align: center;
    }
}

/* ==========================================================================
   6. DISEÑO DE PIE DE PÁGINA (FOOTER MEJORADO)
   ========================================================================== */
.seccion-footer {
    background-color: #1e293b; /* Fondo gris oscuro corporativo */
    color: #f1f5f9;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.footer-titulo-columna {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    position: relative;
}

.footer-texto-descripcion {
    color: #94a3b8; 
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-lista-enlaces li {
    margin-bottom: 12px;
}

.footer-lista-enlaces li a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-lista-enlaces li a:hover {
    color: #d32f2f; 
    padding-left: 4px; 
}

.btn-volver-arriba {
    display: inline-block;
    color: #ffffff;
    background-color: #8b1d24; 
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.btn-volver-arriba:hover {
    background-color: #d32f2f;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.footer-linea-divisoria {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 1;
}

.footer-copyright {
    color: #64748b;
    font-size: 0.85rem;
}

.footer-enlaces-legales a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.footer-enlaces-legales a:hover {
    color: #94a3b8;
}

@media (max-width: 767.98px) {
    .footer-titulo-columna {
        margin-bottom: 12px;
    }
    .footer-lista-enlaces {
        padding: 0;
    }
    .footer-enlaces-legales {
        margin-top: 10px;
    }
}

/* ==========================================================================
   7. SECCIÓN DE NOTICIAS EN TARJETAS (CARDS)
   ========================================================================== */
.container-noticias-municipales {
    padding: 20px 0;
}

.tarjeta-noticia-institucional {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-top: 4px solid #8b1d24; 
}

.tarjeta-noticia-institucional:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08) !important;
}

.contenedor-imagen-tarjeta {
    position: relative;
    width: 100%;
    height: 210px; 
    overflow: hidden;
    background-color: #f1f5f9;
}

.img-noticia-adaptable {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.3s ease;
}

.tarjeta-noticia-institucional:hover .img-noticia-adaptable {
    transform: scale(1.04); 
}

.etiqueta-noticia-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #8b1d24;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.cuerpo-tarjeta-noticia {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.titulo-noticia-tarjeta {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.resumen-noticia-tarjeta {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.enlace-noticia-leer {
    margin-top: auto; 
    color: #8b1d24;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: color 0.2s ease;
}

.enlace-noticia-leer:hover {
    color: #d32f2f; 
    text-decoration: underline;
}
    
/* ==========================================================================
   10. BLOQUES DIARIOS COMPACTOS EN DOS COLUMNAS
   ========================================================================== */
.bloque-diario-compacto {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #15803d; 
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.bloque-diario-compacto.border-color-guinda {
    border-top-color: #8b1d24;
}

.encabezado-bloque-diario {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.icono-bloque {
    font-size: 1.5rem;
    line-height: 1;
}

.titulo-bloque-diario {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.subtitulo-bloque-diario {
    font-size: 0.82rem;
}

.nombre-sector-compacto {
    font-size: 0.92rem;
    font-weight: 700;
    color: #334155;
}

.sectores-lista-compacta {
    font-size: 0.82rem;
}

.badge-status-compacto {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
}

.status-activo { background-color: #dcfce7; color: #15803d; }
.status-pendiente { background-color: #ffedd5; color: #c2410c; }

.badge-edicto-tipo {
    font-size: 0.75rem;
    font-weight: 700;
    color: #8b1d24;
}

.fecha-edicto-compacta {
    font-size: 0.75rem;
}

.extracto-legal-compacto {
    font-size: 0.82rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   11. INTEGRACIÓN DEL MAPA EN EL FOOTER
   ========================================================================== */
.contenedor-mapa-footer {
    position: relative;
    width: 100%;
    height: 160px; 
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background-color: #1e293b;
}

.mapa-marcador-info {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #8b1d24; 
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 10;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.contenedor-mapa-footer iframe {
    display: block !important;
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none;
}

@media (max-width: 767.98px) {
    .contenedor-mapa-footer {
        height: 180px; 
        margin-top: 15px;
    }
}
/* Asegura el correcto encuadre de la imagen estática del mapa */
.contenedor-mapa-footer img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Recorta la imagen armónicamente sin deformarla */
    display: block !important;
}

/* ==========================================================================
   12. VISOR DE GACETAS CON IFRAME
   ========================================================================== */
.titulo-gacetas-principal {
    color: #8b1d24;
    font-weight: 800;
    font-size: 1.75rem;
    text-transform: uppercase;
}

.contenedor-visor-gacetas {
    width: 100%;
    height: 400px; /* Altura ideal fija para mostrar una lista cómoda con barra de scroll interna */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.contenedor-visor-gacetas iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block;
}

/* ==========================================================================
   13. PÁGINAS INTERNAS DE INSTITUTOS MUNICIPALES
   ========================================================================== */
.body-vistas-internas {
    background-color: #f8fafc; /* Fondo gris claro limpio para resaltar el contenido */
}

/* Encabezado Principal (Hero Section) */
.hero-instituto-header {
    background: linear-gradient(135deg, #8b1d24 0%, #5c1115 100%); /* Degradado Rojo Guinda */
    padding-top: 130px !important; /* Espacio extra para que no lo tape la Navbar fixed-top */
    padding-bottom: 50px !important;
    border-bottom: 5px solid #d32f2f; /* Línea Carmesí de acento */
}

.badge-categoria-instituto {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 12px;
}

.siglas-instituto-interna {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.nombre-completo-instituto {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Tarjetas de Contenido (Misión / Visión) */
.tarjeta-interna-contenido {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    border-left: 5px solid #8b1d24; /* Línea de guía Rojo Guinda */
}

.subtitulo-instituto-interno {
    color: #8b1d24;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.texto-instituto-descripcion {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Tarjeta lateral del Director / Autoridad */
.tarjeta-autoridad-instituto {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.titulo-seccion-autoridad {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contenedor-avatar-director {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #f1f5f9;
    background-color: #f8fafc;
}

.contenedor-avatar-director img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nombre-director-interno {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 700;
}

.cargo-director-badge {
    background-color: #fdf2f2;
    color: #8b1d24;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    display: inline-block;
}

.texto-contacto-director {
    font-size: 0.82rem;
    line-height: 1.5;
}


/* Botón estilizado de regresar al inicio */
.btn-regresar-inicio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.25s ease;
}

/* Efecto al pasar el cursor (Hover) */
.btn-regresar-inicio:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-regresar-inicio:hover .flecha-regreso {
    transform: translateX(-3px); /* Pequeña animación de la flecha hacia la izquierda */
}

.flecha-regreso {
    display: inline-block;
    transition: transform 0.2s ease;
    font-weight: bold;
}