/* Clase personalizada para hacer el modal fullscreen */
.modal-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
  }
  
  .modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

/*
 * El cuerpo tiene que poder desplazarse.
 *
 * Faltaba desde el principio y se nota apenas el contenido pasa el alto de la pantalla:
 * .modal-content queda en height:100% y .modal-body es un hijo flexible sin desbordamiento
 * propio, asi que todo lo que no cabe queda fuera de la caja y no hay forma de llegar a ello.
 * Se veia, por ejemplo, en la modal de ubicacion de un producto que esta en muchos servicios:
 * la lista salia cortada.
 *
 * Son las dos declaraciones que Bootstrap 5 trae en SU .modal-fullscreen y que esta copia
 * para Bootstrap 4 no incluyo:
 *
 *   - overflow-y: auto  pone la barra de desplazamiento en el cuerpo.
 *   - min-height: 0     es la que la hace efectiva. Sin ella no sirve de nada: .modal-body es
 *                       flex:1 1 auto dentro de una columna flex, y el min-height:auto que
 *                       trae por omision le impide encogerse por debajo de su contenido, asi
 *                       que nunca queda nada que desplazar.
 *
 * El encabezado y el pie no se encogen: son los que mantienen a la vista el titulo y el boton
 * de cerrar mientras se recorre el cuerpo.
 */
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
    -ms-flex-negative: 0;
    flex-shrink: 0;

    /* A pantalla completa no hay esquina que redondear. Es la otra declaracion que Bootstrap 5
       trae en su .modal-fullscreen y esta copia no incluyo; se nota ahora que las pantallas
       redondean el encabezado y el pie por su cuenta. */
    border-radius: 0;
}

.modal-fullscreen .modal-body {
    min-height: 0;
    overflow-y: auto;
}