/* ========================================================
   MODALES EN MÓVIL Y TABLET — HOJA INFERIOR (BOTTOM SHEET)
   ========================================================

   Por debajo de 992px los modales de Bootstrap dejan de aparecer
   centrados y suben desde el borde inferior, con el asa para
   arrastrarlos hacia abajo y cerrarlos (assets/js/modalesMovil.js).

   Se aplica a todos los .modal-dialog menos a los que ya se muestran
   a pantalla completa (#modalEmpleado usa .modal-fullscreen-lg-down):
   esos conservan su tamaño y solo heredan la animación de subida.

   OJO: el CSS de cada pantalla se enlaza dentro del cuerpo de la vista,
   así que se carga DESPUÉS de este archivo. Las propiedades de
   colocación llevan !important o cualquier regla de página sobre
   .modal-dialog las pisaría. */

@media (max-width: 991.98px) {

  :root {
    --jd-hoja-radio: 22px;
    --jd-hoja-asa: 13px;   /* alto del asa + su margen inferior */
    --jd-hoja-subida: .35s cubic-bezier(.32, .72, 0, 1);
  }

  /* Bootstrap descuelga el modal cuando acaba SU transición, que es la de la
     opacidad. Si dura menos que la de la hoja, al cerrar se corta la bajada a
     medias, así que las igualamos */
  .modal.fade {
    transition: opacity .35s linear;
  }

  /* El diálogo va anclado abajo con position: absolute, así que el modal
     no tiene que desplazarse: el scroll ocurre dentro del .modal-body */
  .modal {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .modal .modal-dialog:not([class*="modal-fullscreen"]) {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;      /* anula el height de .modal-dialog-scrollable */
    min-height: 0 !important;
    margin: 0 !important;
    /* core.css mete padding lateral al diálogo por debajo de 768px */
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform: translateY(100%);
    transition: transform var(--jd-hoja-subida);
  }

  .modal.show .modal-dialog:not([class*="modal-fullscreen"]) {
    /* "none" y no translateY(0): un transform activo convertiría el
       diálogo en bloque contenedor de los elementos position: fixed */
    transform: none;
  }

  /* Asa. Es un elemento flex más del diálogo, por encima de la tarjeta,
     de manera que se apoya sobre el fondo oscurecido y se ve igual sea
     cual sea el color de la cabecera del modal.

     Solo en los modales que se pueden cerrar: los de fondo estático no
     admiten el arrastre, y enseñar el asa sería prometer algo que no pasa */
  .modal:not([data-bs-backdrop="static"]) .modal-dialog:not([class*="modal-fullscreen"])::before {
    content: "";
    flex: 0 0 auto;
    width: 42px;
    height: 4px;
    margin: 0 auto 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
  }

  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content {
    border-radius: var(--jd-hoja-radio) var(--jd-hoja-radio) 0 0 !important;
    border-bottom: 0;
    max-height: calc(90vh - var(--jd-hoja-asa));
    max-height: calc(90svh - var(--jd-hoja-asa));
  }

  /* core.css saca el aspa fuera de la esquina de la tarjeta con un
     translate(23px, -25px). Con la hoja pegada a los bordes de la pantalla
     se quedaría medio fuera, así que aquí vuelve a su sitio */
  .modal .modal-dialog:not([class*="modal-fullscreen"]) .btn-close,
  .modal .modal-dialog:not([class*="modal-fullscreen"]) .btn-close:hover {
    transform: none !important;
    box-shadow: none;
  }

  .modal .modal-dialog:not([class*="modal-fullscreen"]) .modal-header .btn-close {
    margin-top: 0;
  }

  /* min-height: 0 para que el body pueda encogerse dentro del flex y
     quedarse él con el scroll, en vez de desbordar la tarjeta */
  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content > .modal-body {
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
  }

  /* Unos cuantos modales del proyecto montan su propio cuerpo en vez de usar
     .modal-body (#modalCambioRol, #modalMiPerfil...). Sin esto el max-height
     de arriba les cortaría el contenido sin dejar manera de llegar a él */
  .modal .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content:not(:has(> .modal-body)) {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Los de pantalla completa no se recolocan, pero entran igual desde abajo */
  .modal .modal-dialog[class*="modal-fullscreen"] {
    transform: translateY(100%);
    transition: transform var(--jd-hoja-subida);
  }

  .modal.show .modal-dialog[class*="modal-fullscreen"] {
    transform: none;
  }

  /* Mientras se arrastra manda el transform en línea que pone el JS */
  .modal .modal-dialog.jd-hoja-arrastrando {
    transition: none;
  }
}

/* !important porque las reglas de arriba tienen más peso que este bloque */
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .modal.fade,
  .modal .modal-dialog {
    transition: none !important;
  }
}