/* ===== Núcleo visual de la modal (genérico) ===== */
.app-modal__backdrop{
  position: fixed;           /* fija a la ventana */
  inset: 0;                  /* ocupa toda la pantalla */
  z-index: 2147483647;       /* por encima de todo (canvas, etc.) */
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: saturate(1.1) blur(1px);
}

.app-modal{
  position: relative;
  width: min(1300px, 96vw);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto 1fr auto;  /* header / body / footer */
  background: var(--panel, #11161d);
  color: var(--text, #e6edf3);
  border: 1px solid var(--card-border, #1f2630);
  border-radius: 14px;
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.45));
  overflow: hidden;
}

/* Contenedores (simples; cada contenido aporta sus propios estilos) */
.app-modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border, #1f2630);
}
.app-modal__body{
  padding: 12px;
  overflow: hidden;     /* el scroll lo manejan los contenidos (p.ej. editor.css) */
}
.app-modal__footer{
  display:flex; gap:8px; justify-content:flex-end;
  padding: 10px 12px;
  border-top: 1px solid var(--card-border, #1f2630);
}

/* Bloquear el scroll del documento cuando hay modal abierta */
body.app-modal--open { overflow: hidden; }