/*
================================================================================
REPORTE DE CAMBIOS Y CRITERIO DE DISEÑO
================================================================================
1. ACCIONES REALIZADAS:
   - Declaración de estilos para el contenedor `.hero-slider-container` y el zócalo 
     inferior `.hero-slider-overlay` con un degradado dinámico (`linear-gradient`).
   - Aplicación de restricciones textuales al título `h3` (`white-space: nowrap`, 
     `overflow: hidden`, `text-overflow: ellipsis`).
   - Ocultamiento explícito de párrafos en el overlay (`p { display: none !important; }`).
   - Implementación del manejo de eventos del puntero mediante `pointer-events: none` 
     en la capa del overlay y `pointer-events: auto` en los elementos clickeables.
   - Reducción del área lateral de las flechas de navegación del carrusel (`width: 8%`).
   - Asignación estricta de niveles de capas CSS (`.modal-backdrop: 1040`, `.modal: 1050`, `.modal-dialog: 1055`).

2. CRITERIO UTILIZADO:
   - Limpieza Visual y Foco en la Imagen: Deshabilitar los textos largos (`<p>`) 
     sobre el carrusel y forzar el recorte del título a una sola línea evita que 
     el texto tape la gráfica o las fotos institucionales.
   - Manejo De Pasarela de Clics (Click-Through Optimization): Al desactivar 
     los punteros en las zonas transparentes del overlay y reducir el ancho de las 
     flechas laterales, se previene que capas invisibles capturen los clics del usuario, 
     garantizando la usabilidad del botón "+ Info".
================================================================================
*/

/* ==========================================================================
   ESTILO DEFINITIVO Y COMPLETO DEL SLIDER HERO (AMET)
   ========================================================================== */

/* Contenedor Principal del Slider */
.hero-slider-container {
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    background-color: var(--azul-amet-oscuro, #0a2540);
    position: relative;
}

.hero-slider-container .carousel-item {
    position: relative;
}

/* Adaptación de la Imagen en Tamaño Completo */
.hero-slider-container .carousel-item img {
    width: 100% !important;
    height: 420px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Zócalo Inferior Mínimo (Limpia la foto para que no la tape el texto) */
.hero-slider-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 20px !important;
    background: linear-gradient(
        to top, 
        rgba(9, 44, 105, 0.95) 0%, 
        rgba(9, 44, 105, 0.5) 70%, 
        transparent 100%
    ) !important;
    color: #ffffff !important;
    z-index: 2 !important;
}

/* Disposición Horizontal (Título a la izquierda, botones a la derecha) */
.hero-slider-content-inline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
}

/* Título de 1 Sola Línea con Puntos Suspensivos */
.hero-slider-overlay h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--dorado-amet, #ffc107) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* Desactivación Total de Párrafos/Descripciones en el Slider */
.hero-slider-overlay p,
.carousel-caption p {
    display: none !important;
}

/* Estilos de los Botones del Zócalo */
.btn-slider-link {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-slider-modal {
    background: rgba(255, 193, 7, 0.2) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    color: var(--dorado-amet, #ffc107) !important;
}

.btn-slider-link:hover {
    background: var(--dorado-amet, #ffc107) !important;
    color: var(--azul-amet-oscuro, #0a2540) !important;
    border-color: var(--dorado-amet, #ffc107) !important;
}

/* Adaptabilidad Responsiva para Tablets y Pantallas Medianas */
@media (max-width: 768px) {
    .hero-slider-container .carousel-item img {
        height: 260px !important;
    }
    .hero-slider-overlay {
        padding: 8px 12px !important;
    }
    .hero-slider-overlay h3 {
        font-size: 13px !important;
    }
    .btn-slider-link {
        padding: 3px 8px !important;
        font-size: 10px !important;
    }
}

/* Adaptabilidad Responsiva para Celulares / Pantallas Pequeñas */
@media (max-width: 576px) {
    .hero-slider-container .carousel-item img {
        height: 210px !important;
    }
}
/* Forzar rellenado total de la imagen en el contenedor del slider */
.hero-slider-container .carousel-item img.slider-img-fit,
.hero-slider-container .carousel-item img {
    width: 100% !important;
    height: 380px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .hero-slider-container .carousel-item img.slider-img-fit,
    .hero-slider-container .carousel-item img {
        height: 250px !important;
    }
}

/* Asegurar interactividad en el botón +Info */
.hero-slider-overlay {
    pointer-events: none; /* Deja pasar los clics al fondo */
}

.hero-slider-content-inline *,
.btn-slider-modal {
    pointer-events: auto !important; /* Devuelve el clic exclusivamente a los textos y botones */
}

.carousel-control-prev, 
.carousel-control-next {
    width: 8% !important; /* Reduce el área invisible lateral para evitar solapamientos con el botón */
}

/* Asegurar jerarquía correcta en la ventana modal de Bootstrap */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1055 !important;
}


/* Ajuste de contenedor responsivo para el Slider */
.hero-slider-container .slider-img-wrapper {
    width: 100%;
    height: 380px;
    border-radius: 12px;
}

.hero-slider-container img.slider-img-fit {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Cubre todo el marco sin deformarse ni dejar franjas */
    object-position: center !important;
}

/* Responsivo para móviles y tablets */
@media (max-width: 768px) {
    .hero-slider-container .slider-img-wrapper {
        height: 250px !important;
    }
}