/* OJO: .rmodal-body se usa en DOS contextos distintos: el modal de
   alerta (icono+mensaje grande) Y el body de cada modal de captura de
   datos (Nuevo Consultorio, Nueva Cita, etc). El 25px de aqui SOLO debia
   aplicar al primero, pero al ser la clase compartida, se filtraba como
   tamano base de cualquier texto sin una regla mas especifica dentro de
   los formularios — esa es la causa real de que el texto no se viera
   igual entre pantallas. El icono/mensaje del modal de alerta ya traen
   su propio tamano por style inline en cada .aspx (40px/24px), asi que
   bajar esto no les afecta. */
.rmodal-body {
    font-size: 14px;
    padding: 24px !important;
}

.rmodal-body i {
    font-size: 35px;
}

    .rmodal-body p {
        text-align: center;
        font-size: 20px;
    }

.main-titulo-modal {
    background-color: var(--background-modal-title);
}

/* Encabezado de los modales de CAPTURA de datos (Nuevo Consultorio,
   Nueva Cita, etc). Cada .aspx trae inline style="background-color:
   var(--ds-primary)" — un color solido de marca repetido en cada
   formulario. Esta regla, con !important, le gana al inline (el unico
   caso en que un !important de hoja de estilos supera un inline sin
   !important) y lo reemplaza por un header neutro con un acento sutil
   en la parte de abajo. No hace falta tocar los .aspx.               */
.modal-header {
    background-color: var(--ds-gray-50) !important;
    color: var(--ds-texto-primary) !important;
    border-bottom: 3px solid var(--ds-primary) !important;
}

    .modal-header .modal-title {
        color: var(--ds-texto-primary) !important;
        font-size: 16px;
        font-weight: 600;
    }

    /* La X del boton de cerrar estaba pensada para header oscuro
       (btn-close-white = icono blanco); en el header claro nuevo se
       regresa al icono oscuro normal de Bootstrap. */
    .modal-header .btn-close-white {
        filter: none !important;
    }

/* ---------------------------------------------------------------------
   Scroll del modal -- ESTO ARREGLA UN BUG DEL KIT, no es cosmetico

   Bootstrap hace scrollable el modal con .modal-dialog-scrollable, pero
   esa regla apunta a .modal-body:

       .modal-dialog-scrollable .modal-content { overflow: hidden; }
       .modal-dialog-scrollable .modal-body    { overflow-y: auto;  }

   Los modales del kit no usan .modal-body: usan .rmodal-body. Asi que
   el contenido nunca recibe el scroll, crece de mas, y como el
   .modal-content si esta en overflow:hidden, el footer -- con los
   botones de guardar y confirmar -- queda cortado FUERA de la caja y no
   hay forma de llegar a el.

   Se nota en los modales largos: la revision de competidores y el alta
   de eventos.

   Va acotado a .modal-dialog-scrollable para que solo aplique a los
   modales que lo pidieron.
   --------------------------------------------------------------------- */
.modal-dialog-scrollable .modal-content > .rmodal-body {
    /* flex-grow para que ocupe el espacio libre, min-height:0 para que
       PUEDA encogerse: sin eso un hijo flex nunca baja de su contenido y
       el overflow-y no sirve de nada. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* El footer no se encoge ni se va: es donde estan Confirmar y Rechazar. */
.modal-dialog-scrollable .modal-content > .modal-footer {
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* En telefono los tres botones no caben en un renglon: se apilan a lo
   ancho en vez de encimarse. */
@media (max-width: 575px) {
    .modal-dialog-scrollable .modal-content > .modal-footer > * {
        flex: 1 1 100%;
        margin: 0;
    }
}