/* ═══════════════════════════════════════════════════════════
   MODALES SIEMPRE A LA VISTA · KOKITO STAR
   Varios modales quedaban colocados respecto a la página y no a
   la ventana: al abrirlos en una pantalla larga aparecían en el
   medio del documento y había que bajar para llegar al botón.
   Aquí se fijan a la ventana, centrados, con desplazamiento
   propio cuando el contenido es más alto que la pantalla.
   ═══════════════════════════════════════════════════════════ */

.modal,
[id^="modal-"],
[id$="-modal"],
.admin-modal,
.ks-dialogo-velo,
.ks-velo,
#kc-ruleta-velo,
#kc-tj-velo,
.kc-dlg-velo {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Los que están ocultos siguen ocultos: la regla de arriba no debe
   convertirlos en visibles. */
.modal.hidden,
[id^="modal-"].hidden,
[id$="-modal"].hidden,
.hidden {
  display: none !important;
}

/* El contenido no puede pasarse de alto: si no cabe, se desplaza
   por dentro y el botón siempre queda alcanzable. */
.modal > *,
[id^="modal-"] > *,
[id$="-modal"] > *,
.admin-modal > *,
.ks-dialogo,
.kc-dlg,
.kc-rl-caja,
.kc-tj-caja {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: auto;
}

/* Mientras hay un modal abierto, el fondo no se desplaza */
body.kc-modal-abierto {
  overflow: hidden;
}

/* En pantallas bajas (celular apaisado) se aprovecha todo el alto */
@media (max-height: 560px) {
  .modal > *,
  [id^="modal-"] > *,
  [id$="-modal"] > *,
  .ks-dialogo,
  .kc-dlg,
  .kc-rl-caja,
  .kc-tj-caja {
    max-height: calc(100vh - 16px);
  }
  .modal,
  [id^="modal-"],
  [id$="-modal"] {
    padding: 8px;
  }
}