/* ════════════════════════════════════════════════════════ */
/*          MODAL - VENTANAS FLOTANTES UNIFICADAS           */
/* ════════════════════════════════════════════════════════ */

.overlay{
  position:fixed;
  inset:0;
  z-index:500;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:fadeUp .18s ease}

.modal{
  width:520px;
  max-height:88vh;
  overflow-y:auto;background:var(--bg2);
  border:1px solid var(--border2);border-radius:18px;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
  animation:fadeUp .22s ease;
  transition:all var(--tr)}

.modal-lg{width:720px}

.modal-xl{
  width:92vw;
  max-width:1100px;
  height:85vh; overflow:hidden;
  display:flex;
  flex-direction:column}

.m-hdr{
  padding:18px 22px;
  border-bottom:1px solid var(--border);

  display:flex;
  align-items:center;
  justify-content:space-between}

.m-title{font-size:15px;font-weight:700}

.m-x{width:28px;height:28px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--text2);
  font-size:14px;
  transition:all var(--tr)}

.m-x:hover{
  background:rgba(239,68,68,.15);
  border-color:var(--red);
  color:var(--red);
  transform:rotate(90deg)}

.m-body{padding:22px}

.m-ftr{padding:16px 22px;border-top:1px solid var(--border);
  display:flex;
  justify-content:flex-end;
  gap:9px}