/* =========================================================
   MODAL STABILITY PACK (Bootstrap 3 + ArcGIS 3.x / Dojo)
   Evita modales cortados, fuera de pantalla y desconfigurados
   ========================================================= */

/* Asegura viewport usable */
html, body { height: 100%; }

/* Cuando hay modal abierto, bloquea scroll del body (bootstrap lo hace, pero lo reforzamos) */
body.modal-open { overflow: hidden !important; }

/* 1) Fuerza a .modal a ser overlay full-screen (NO usar width/left/top en .modal) */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

    /* Z-index alto para ganarle al mapa/dojo */
    z-index: 20000 !important;
}

/* Fondo del modal debajo del modal, pero arriba del mapa */
.modal-backdrop {
    z-index: 19990 !important;
}

/* 2) Mantén el dialog dentro del viewport */
.modal-dialog {
    margin: 20px auto !important;
    max-width: calc(100vw - 20px);
}

/* 3) Evita que el contenido crezca más que la pantalla */
.modal-content {
    max-height: calc(100vh - 40px);
    overflow: hidden; /* el scroll se lo damos al body */
}

/* 4) Scroll interno para el body del modal */
.modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px); /* header + footer aprox */
}

/* 5) Neutraliza estilos peligrosos en .modal (left/top/width inline) */
.modal[style] {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
}

/* 6) Si tu clase modal-filter aplica posiciones raras, lo anulamos */
.modal-filter {
    left: 0 !important;
    top: 0 !important;
}

/* 7) Draggable: da pista visual */
.modal-header { cursor: move; }

/* 8) ArcGIS/Dojo a veces mete overlays con z-index raro: los dejamos bajo el modal */
.esriPopup, .esriPopupWrapper, .esriPopup .sizer {
    z-index: 15000 !important;
}

/* 9) Anchos “clásicos” de tus modales (se adaptan con max-width) */
#filterModal .modal-dialog,
#addfilterModal .modal-dialog { width: 600px; max-width: 95vw; }

#bookmarksModal .modal-dialog { width: 400px; max-width: 95vw; }

#layerControlModal .modal-dialog { width: 450px; max-width: 95vw; }

#evaluacionAreaControlModal .modal-dialog { width: 480px; max-width: 95vw; }

#resultadoEvaluacion .modal-dialog { width: 543px; max-width: 95vw; }

#ImprimirResultadoModal .modal-dialog,
#helpModal .modal-dialog,
#ErrorModal .modal-dialog,
#SuccessModal .modal-dialog { width: 480px; max-width: 95vw; }

/* 10) En pantallas pequeñas, reduce márgenes */
@media (max-width: 768px) {
    .modal-dialog { margin: 10px auto !important; }
    .modal-body { max-height: calc(100vh - 160px); }
}