/* Bloquea el scroll de la página cuando hay cualquier <dialog> abierto via
   showModal(). Sin esto la rueda/swipe en el modal hacía scroll-chaining al
   fondo (el modal NO impide eventos de wheel/touch que no resultan en
   cambio de scroll dentro de él). Usa :has() — soportado en Chrome 105+,
   Safari 15.4+, Firefox 121+. */
html:has(dialog[open]),
body:has(dialog[open]),
html:has(.modal-bg.open),
body:has(.modal-bg.open),
html:has(.modal-overlay.open),
body:has(.modal-overlay.open),
html:has(.overlay:not(.hidden):not(#mbn-overlay)),
body:has(.overlay:not(.hidden):not(#mbn-overlay)) {
  overflow: hidden !important;
  /* `none` (no `contain`): bloquea también el pull-to-refresh nativo del
     navegador. Con `contain` se evita scroll-chaining al body pero el
     swipe-down al tope del modal seguía disparando la recarga de Chrome
     Android. */
  overscroll-behavior: none !important;
}

.modal {
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  max-height: 90vh;
  width: 480px;
  /* `none` también desactiva pull-to-refresh nativo cuando el swipe-down
     llega al tope del modal sin que haya scroll que consumir. */
  overscroll-behavior: none;
}

.modal::backdrop {
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(2px);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.modal-header h2 { margin: 0; font-size: var(--font-size-lg); }

.modal-close {
  background: transparent;
  border: 0;
  font-size: var(--font-size-lg);
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--color-surface-alt); }

.modal-body { padding: var(--space-lg); overflow-y: auto; max-height: 60vh; overscroll-behavior: none; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* Mobile: full-screen con flex layout para que el body haga scroll interno.
   IMPORTANTE: todo va bajo .modal[open]. Un <dialog> CERRADO debe quedar en
   display:none (estilo UA). Si se pone `display:flex` en `.modal` sin condicionar
   a [open], los modales cerrados se pintan full-screen (inset:0) y tapan el
   contenido de la página en blanco — bug de pantalla en blanco en móvil. */
@media (max-width: 768px) {
  .modal[open] {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal-header, .modal-footer { flex-shrink: 0; }
  .modal-body {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}