/* Configuración de Pantalla Completa para el Modal */
.fullscreen-modal {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.fullscreen-modal .modal-content {
    height: 100vh;
    border-radius: 0;
    border: none;
    background: rgba(0, 0, 0, 0.80); /* CAMBIO: Opacidad al 80% para ver la web detrás */
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fullscreen-modal .modal-body {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botón de cerrar (X) en el lado superior derecho */
.close-modal-btn {
    position: absolute;
    top: 25px;
    right: 30px;
    color: #ffffff !important;
    font-size: 45px;
    font-weight: 300;
    opacity: 0.7;
    z-index: 1060;
    transition: opacity 0.2s, transform 0.2s;
    background: transparent;
    border: none;
}
.close-modal-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Manejo de altura y visualización de la imagen */
#modalCarousel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 0 20px 0;
}
.carousel-inner {
    height: calc(100vh - 140px);
}
.carousel-inner .item {
    height: 100%;
    width: 100%;
    position: relative;
}

/* Enlace contenedor de la imagen */
.modal-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.modal-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ====================================================================
   SOLUCIÓN AL DESFASE VISUAL (Efecto Cross-Fade perfecto para Bootstrap v3.3.7)
   ==================================================================== */
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.6s;
    left: 0 !important; /* Resetea el desplazamiento de Bootstrap nativo */
    transform: none !important; /* Elimina tirones de posición en 3D */
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
/* Fuerza a que el slider entrante y saliente permanezcan inmóviles en el centro exacto */
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Estilos de las Miniaturas Inferiores */
.thumbnail-indicators {
    position: static;
    width: 100%;
    margin: 10px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    list-style: none;
}
.thumbnail-indicators li {
    width: 70px !important;
    height: 45px !important;
    text-indent: 0 !important;
    border: 2px solid #666666 !important;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease-in-out;
    margin: 0 !important;
}
.thumbnail-indicators li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumbnail-indicators li.active {
    opacity: 1;
    border-color: #ff5e14 !important; /* Naranja corporativo CIBO */
    background-color: transparent !important;
    transform: scale(1.05);
}



/*  Configuración de Pantalla Completa para el Modal 
.fullscreen-modal {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.fullscreen-modal .modal-content {
    height: 100vh;
    border-radius: 0;
    border: none;
    background: rgba(0, 0, 0, 0.95); /* Fondo oscuro elegante 
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fullscreen-modal .modal-body {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botón de cerrar (X) en el lado superior derecho 
.close-modal-btn {
    position: absolute;
    top: 25px;
    right: 30px;
    color: #ffffff !important;
    font-size: 45px;
    font-weight: 300;
    opacity: 0.7;
    z-index: 1060;
    transition: opacity 0.2s, transform 0.2s;
    background: transparent;
    border: none;
}
.close-modal-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Manejo de altura y visualización de la imagen 
#modalCarousel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 0 20px 0;
}
.carousel-inner {
    height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-inner .item {
    height: 100%;
    width: 100%;
    position: relative;
}
.modal-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Efecto de Difuminado (Fade) compatible con Bootstrap v3.3.7 
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.6s;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

/* Estilos de las Miniaturas Inferiores 
.thumbnail-indicators {
    position: static;
    width: 100%;
    margin: 10px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    list-style: none;
}
.thumbnail-indicators li {
    width: 70px !important;
    height: 45px !important;
    text-indent: 0 !important;
    border: 2px solid #666666 !important;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease-in-out;
    margin: 0 !important;
}
.thumbnail-indicators li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumbnail-indicators li.active {
    opacity: 1;
    border-color: #ff5e14 !important; /* Color naranja distintivo de CIBO 
    background-color: transparent !important;
    transform: scale(1.05);
} */