/* Oscurecer el fondo del modal al 95% - backdrop muy oscuro */
.modal-backdrop {
    background-color: #000000 !important;
}

.modal-backdrop.show {
    opacity: 0.92 !important;
}

/* Asegurar que el modal tenga buen contraste */
.modal-content {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

.carousel-control-prev {
    left: -12px; /* Mueve el botón más hacia la izquierda */
}

.carousel-control-next {
    right: -12px; /* Mueve el botón más hacia la derecha */
}
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: black;
            /* fondo negro traslúcido */
            border-radius: 50%;
            /* forma circular */
            padding: 10px;
            /* espacio interno para agrandar el círculo */
            width: 40px;
            height: 40px;
            background-size: 60% 60%;
            /* tamaño del ícono dentro del círculo */
        }

        
.modal-custom-size {
    max-height: 90vh; /* Altura máxima 90% de la pantalla */
}

.modal-body {
    overflow-y: auto;
}

.modal-img {
    max-height: 70vh;
    object-fit: contain;
}

.modal-video {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

/* Solo aplica dentro de los modales */
.modal-body {
    max-height: 70vh; /* Asegura scroll si el contenido es muy largo */
    overflow-y: auto;
}

/* Scrollbar para Chrome, Edge, Safari */
.modal-body::-webkit-scrollbar {
    width: 10px;               /* ancho de la barra */
}

.modal-body::-webkit-scrollbar-track {
    background: #2c2c2c;       /* color de fondo del track */
    border-radius: 5px;
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: #dc3545; /* rojo danger de Bootstrap */
    border-radius: 5px;
    border: 2px solid #2c2c2c; /* opcional, separa del track */
}

/* Scrollbar para Firefox */
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: #dc3545 #2c2c2c;
}

/* === ESTILOS PARA IMÁGENES DEL CARRUSEL === */
.carousel-main-image {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 500px;
    margin: 0 auto;
    image-orientation: from-image !important;
}

/* === ESTILOS PARA MINIATURAS === */
.thumbnails-container {
    padding: 0;
}

.thumbnail-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 0 !important;
}

.thumbnail-image {
    transition: outline 0.2s ease;
    border-radius: 0 !important;
    image-orientation: from-image !important;
    border: none !important;
    padding: 0 !important;
}

.thumbnail-image:hover {
    outline: 2px solid rgba(220, 53, 69, 0.5);
    outline-offset: 0;
}

.thumbnail-image.active {
    outline: 2px solid #dc3545;
    outline-offset: 0;
}

/* === RESPONSIVE PARA MÓVIL === */
@media (max-width: 991.98px) {
    .carousel-main-image {
        height: 300px !important;
    }

    .thumbnail-image {
        height: 60px !important;
    }

    /* Ajuste de columnas en móvil */
    .modal-body .row > div[class*="col-lg-"] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .carousel-main-image {
        height: 250px !important;
    }

    .thumbnail-image {
        height: 50px !important;
    }

    .thumbnails-container .col-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* === AJUSTES PARA VIDEO DE YOUTUBE === */
.ratio-16x9 {
    position: relative;
    width: 100%;
}

.ratio-16x9::before {
    display: block;
    padding-top: 56.25%;
    content: "";
}

.ratio-16x9 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}