/* CSS DE EMERGENCIA PARA MODALES */

/* Fuerza la visibilidad de elementos del modal */

/* Modal principal */

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

.modal.show {
    display: block !important;
}

/* Imagen en el modal */

#modalImage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 90% !important;
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    background: rgb(255 0 0 / 10%) !important; /* Fondo rojo muy suave para debugging */
    border: 2px solid red !important; /* Borde rojo para ver si está ahí */
}

/* Contenedor de la imagen */

.modal-body {
    text-align: center !important;
    padding: 20px !important;
    min-height: 200px !important;
    background: rgb(0 255 0 / 10%) !important; /* Fondo verde suave para debugging */
}

/* Modal dialog */

.modal-dialog {
    max-width: 90% !important;
    margin: 30px auto !important;
}

/* Modal content */

.modal-content {
    background: white !important;
    border: 2px solid blue !important; /* Borde azul para debugging */
}

/* Contenido multimedia */

#multimediaContent {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center !important;
    min-height: 100px !important;
    padding: 20px !important;
    background: rgb(255 255 0 / 10%) !important; /* Fondo amarillo para debugging */
}

/* Spinner de carga */

.spinner-border {
    display: none !important; /* Ocultar spinner para ver si hay algo detrás */
}

/* Asegurar que no hay elementos ocultos */

.modal * {
    visibility: visible !important;
}

/* Backdrop */

.modal-backdrop {
    z-index: 9998 !important;
}