/* =========================================================
   MODELESS + DRAGGABLE + RESIZABLE + IMAGE VIEWPORT (SCOPED)
   Solo aplica a modales con: .modal.js-modeless-draggable
   y SOLO cuando el body tiene: .modeless-open
   ========================================================= */

/* 1) Estado modeless: deja usar la página detrás */
body.modeless-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

    /* Oculta backdrop SOLO mientras un modeless está abierto */
    body.modeless-open .modal-backdrop {
        display: none !important;
    }

    /* Deja pasar clicks por el overlay del modal (para usar el fondo) */
    body.modeless-open .modal.js-modeless-draggable {
        pointer-events: none;
    }

        /* Pero el contenido del modal sí recibe clicks */
        body.modeless-open .modal.js-modeless-draggable .modal-dialog,
        body.modeless-open .modal.js-modeless-draggable .modal-content {
            pointer-events: auto;
        }

        /* 2) Dialog flotante (JS lo mueve con left/top) */
        body.modeless-open .modal.js-modeless-draggable .modal-dialog {
            position: fixed;
            margin: 0;
            inset: auto;
            right: auto;
            bottom: auto;
            max-width: none;
        }

        /* Header: indica que se puede arrastrar */
        body.modeless-open .modal.js-modeless-draggable .modal-header {
            cursor: move;
            user-select: none;
        }

        /* 3) Resizable SIN scroll interno (evita que la imagen se vaya hacia abajo)
      resize funciona si overflow != visible. Usamos hidden para evitar scroll. */
        body.modeless-open .modal.js-modeless-draggable .modal-content {
            resize: both;
            overflow: hidden; /* ✅ clave para evitar scrollbar interno y mantener resize */ /* [1](https://www.w3tutorials.net/blog/how-to-increase-bootstrap-modal-width/)[2](https://nutricaresa.sharepoint.com/sites/RepositorioDesarrollo/_layouts/15/Doc.aspx?sourcedoc=%7B91D5C721-383D-45EF-983D-95608A85886D%7D&file=2026-04-09T22_04_42.2612651Z%20-PROGRAMACION%20VIERNES%2010%20%20%20ABRIL%20DEL%202026.xlsx&action=default&mobileredirect=true&DefaultItemOpen=1) */
            display: flex;
            flex-direction: column;
            min-width: 360px;
            min-height: 320px;
            max-width: calc(100vw - 32px);
            max-height: calc(100vh - 32px);
        }

        /* 4) Body ocupa el espacio restante */
        body.modeless-open .modal.js-modeless-draggable .modal-body {
            flex: 1 1 auto;
            overflow: hidden; /* ✅ el visor usa pan/zoom, no scroll */
            padding: 0; /* ✅ evita blanco arriba */
        }

        /* Si tienes footer y quieres que no afecte el visor, déjalo normal */
        body.modeless-open .modal.js-modeless-draggable .modal-footer {
            flex: 0 0 auto;
        }

        /* 5) Viewport de imagen: ocupa todo el modal-body */
        body.modeless-open .modal.js-modeless-draggable .preview-viewport {
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
        }

        /* Mensaje cuando no hay imagen */
        body.modeless-open .modal.js-modeless-draggable .js-preview-empty {
            padding: 1rem;
        }

        /* 6) Imagen: lista para zoom/pan por transform */
        body.modeless-open .modal.js-modeless-draggable .js-preview-img {
            max-width: 100%;
            max-height: 100%;
            transform-origin: 50% 50%;
            cursor: grab;
            user-select: none;
            -webkit-user-drag: none;
            touch-action: none;
            will-change: transform;
        }

            body.modeless-open .modal.js-modeless-draggable .js-preview-img.is-dragging {
                cursor: grabbing;
            }

        /* 7) Opcional: mejora de render al hacer transform (suave) */
        body.modeless-open .modal.js-modeless-draggable .js-preview-img {
            will-change: transform;
        }

/* 8) Mobile: ancho completo sin márgenes */
@media (max-width: 575.98px) {
    body.modeless-open .modal.js-modeless-draggable .modal-content {
        min-width: 0;
        max-width: 100vw;
        max-height: 100vh;
    }
}