.contenedorModal {
    /*border: 1px solid #006CD9;
    background-color: #006CD9;*/
    width: 500px !important;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
    /*max-height: 70%;*/
    max-height: 90%;
    z-index: 1000 !important;
}

.contenedorModalSinZIndex {
    /*border: 1px solid #006CD9;
    background-color: #006CD9;*/
    width: 500px !important;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
}

.contenedorModalOrden {
    width: 350px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: white;
    overflow: visible;
    white-space: normal !important;
    max-height: 90%;
    overflow-y: auto !important;
    z-index: 1000 !important;
    box-shadow: 5px 5px 15px grey;
}

.contenedorModalBloqueo {
    /*border: 1px solid #006CD9;
    background-color: #006CD9;*/
    width: 500px !important;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
    /*max-height: 70%;*/
    max-height: 90%;
    z-index: 1000001 !important;
}

.mpFondo {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
    z-index: 999 !important;
}

.mpFondo2 {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
    z-index: 10000 !important;
}

/* Fondo para un modal secundario abierto sobre otro modal. Sin z-index fijo:
   se deja que AjaxControlToolkit lo calcule dinámicamente, así el fondo queda
   por encima del panel del primer modal y por debajo del panel del segundo. */
.mpFondoModalAnidado {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.mpFondoBloqueo {
    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000000 !important;
}

.contenedorModalEstadisticas {
    /*border: 1px solid #006CD9;
    background-color: #006CD9;*/
    width: 1000px !important;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
    /*max-height: 70%;*/
    /*overflow-y: auto !important;*/
}

.contenedorModalFicherosAdjuntos {
    /*border: 1px solid #006CD9;
    background-color: #006CD9;*/
    width: 700px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
}

.contenedorModalTodoAncho {
    width: 100% !important;
    max-width: 1200px;
}

/* Historial de cambios. Se muestra fijo y centrado en la ventana para que no lo recorte ningún
   contenedor con scroll, ya que la pantalla que usa el control puede colocarlo dentro de otro modal.
   Sustituye a la posición absoluta que calcula el ModalPopupExtender, de ahí los !important. */
.modalHistorialCambios {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    max-height: 90vh;
    overflow-y: auto !important;
}

.contenedorModalFiltrosAvanzados {
    width: 100% !important;
    max-width: 1000px;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
    max-height: 70%;
}

.contenedorModalFiltrosAvanzadosScroll {
    width: 100%;
    max-width: 1000px;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
    max-height: 70%;
    overflow-y: auto !important;
}

.contenedorModalFiltrosAvanzadosScrollAncho {
    width: 100%;
    max-width: 1200px;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
    max-height: 70%;
    overflow-y: auto !important;
}

.contenedorModalObservacionesScroll {
    width: 80%;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
    max-height: 500px;
    overflow-y: auto !important;
}

.contenedorModalProgramasPAIMEScroll {
    width: 50%;
    height: 500px !important;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
    max-height: 400px;
    overflow-y: auto !important;
}

.contenedorModalImportesScroll {
    width: 50%;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
    max-height: 500px;
    overflow-y: auto !important;
}

.contenedorModalSeleccionarColegiadosDesdeFiltro {
    width: 80%;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 5px 5px 5px 5px;
    white-space: normal !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

.contenedorModalDelante {
    /*border: 1px solid #006CD9;
    background-color: #006CD9;*/
    width: 500px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: white;
    overflow: visible;
    padding: 10px 10px 10px 10px;
    white-space: normal !important;
    z-index: 9999 !important;
    /*max-height: 70%;*/
    /*overflow-y: auto !important;*/
}

.contenedorModalAltoMaximo700 {
    max-height: 700px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.contenedorModalAncho900 {
    width: 100% !important;
    max-width: 900px !important;
}

.contenedorModalAncho800 {
    width: 100% !important;
    max-width: 800px !important;
}

.contenedorModalAncho1200 {
    width: 100% !important;
    max-width: 1200px !important;
}

.contenedorModalAncho1000 {
    width: 100% !important;
    max-width: 1000px !important;
}

/*NUEVAS ANCHURAS PARA EL MODAL*/
.contenedorModalAncho700 {
    width: 100% !important;
    max-width: 700px !important;
}

.contenedorModalAncho600 {
    width: 100% !important;
    max-width: 600px !important;
}

.contenedorModalAncho550 {
    width: 100% !important;
    max-width: 550px !important;
}


.contenedorModalAncho500 {
    width: 100% !important;
    max-width: 500px !important;
}

.contenedorModalAlto800 {
    min-height: 800px;
}

.contenedorModalAltoMaximo95 {
    max-height: 95%;
    overflow: auto;
}

.contenedorModalAvisos {
    border-radius: 5px;
    border: 2px solid #C83838;
}

@media screen and (max-height:900px) {
    .contenedorModalSinZIndex {
        max-height: 90%;
        overflow-y: auto !important;
    }
}

/* Cruz de cierre de la cabecera de un modal: circulo gris que se oscurece al pasar por
   encima. La comparten los modales de la plataforma y el control AlertaConfirmacion en su
   estilo "alerta-moderna" (clase de rol .alerta-cerrar). */
.botonCerrarModal, .alerta-moderna .alerta-cerrar {
    align-items: center;
    background: #f1f3f5;
    border-radius: 50%;
    color: #6c757d;
    display: inline-flex;
    flex-shrink: 0;
    height: 30px;
    justify-content: center;
    text-decoration: none;
    transition: background .15s, color .15s;
    width: 30px;
}

.botonCerrarModal:hover, .alerta-moderna .alerta-cerrar:hover {
    background: #e2e6ea;
    color: #16213e;
    text-decoration: none;
}

.botonCerrarModal i, .alerta-moderna .alerta-cerrar i {
    font-size: 14px !important;
}

/* Modal redondeado con sombra, mismo aspecto que formularioPublico-modal pero sin z-index
   fijo: AjaxControlToolkit lo calcula, así puede abrirse sobre otro modal (con
   mpFondoModalAnidado) sin que el fondo quede por debajo del primero. */
.contenedorModalRedondeado {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    max-height: 90vh;
    max-width: 95vw;
    overflow-y: hidden;
    padding: 24px 28px;
    white-space: normal !important;
    width: 700px;
}

/* Cuerpo con scroll de contenedorModalRedondeado: el modal se queda quieto (cabecera y
   redondeo siempre visibles) y lo que se desplaza es el contenido. El alto que se
   descuenta es el de la cabecera más el padding del modal. */
.cuerpoModalScroll {
    max-height: calc(90vh - 110px);
    overflow-y: auto;
    /* Aire para que el contenido no quede pegado a la barra de scroll. */
    padding-right: 6px;
}

/* Si el contenido no cabe, flex encogería los hijos que lo permiten (los table-responsive
   de los grids); así conservan su alto y el que desplaza es el cuerpo. */
.cuerpoModalScroll > * {
    flex-shrink: 0;
}
/* Panel del control AlertaConfirmacion: siempre por encima de cualquier modal abierto.
   El z-index en línea del .ascx no basta, porque AjaxControlToolkit lo sobrescribe al
   mostrarlo (fondo + 1 = 10001) y un modal con z-index dinámico, como los anidados con
   mpFondoModalAnidado, queda encima. Por debajo de la pantalla de bloqueo (1000000). */
.panelAlertaConfirmacion {
    z-index: 999999 !important;
}

/* Fondo del control AlertaConfirmacion: justo debajo de su panel, para que oscurezca
   también los modales que haya abiertos debajo de la alerta. */
.mpFondoAlerta {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
    z-index: 999998 !important;
}

/* Sección dentro de un modal: caja con fondo suave y el mismo redondeo que el modal. */
.bloqueModal {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 16px;
}