/* ===== Modal base (estilo Bootstrap, sin deps) ===== */
.modal{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
  z-index: 1400;
}
.modal.show{
  opacity: 1; visibility: visible;
  transition: opacity .2s ease;
}
.modal-dialog{
  width: min(720px, 92vw);
  transform: translateY(-12px);
  transition: transform .22s ease;
}
.modal.show .modal-dialog{ transform: translateY(0); }

.modal-content{
  background:#fff; color: var(--ink);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
  overflow: hidden;
}

.modal-header, .modal-footer{
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.modal-header{ justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.06); }
.modal-footer{ justify-content: flex-end; border-top: 1px solid rgba(0,0,0,.06); }

.modal-title{ margin:0; font-size: clamp(18px, 2.4vw, 20px); font-weight: 800; color:var(--lime-950); }

.btn-close{
  appearance: none; border:0; background: transparent;
  width: 36px; height: 36px; border-radius: 8px;
  font-size: 22px; line-height: 1; cursor: pointer;
  color:#334; transition: background-color .15s ease;
}
.btn-close:hover{ background: rgba(0,0,0,.06); }

.modal-body{ padding: 14px 16px; }
.modal-media{
  width: 100%; aspect-ratio: 16/9;
  background: #f5f7ff; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: 12px;
}
.modal-media img{ width:100%; height:100%; object-fit: cover; display:block; }
.modal-text{ margin:0; color:#253046; }

/* Botones (reutiliza tus tokens) */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 14px; border-radius:8px; text-decoration:none; font-weight:700;
  border:1px solid rgba(0,0,0,.08); cursor:pointer;
  background:#fff; color:#132;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:hover{ background: rgba(0,0,0,.04); }
.btn-primary{ background: var(--blue-500); color: #fff; border-color: transparent; }
.btn-primary:hover{ background: var(--blue-600); }

/* Backdrop */
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 1390;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.modal-backdrop.show{
  opacity: 1; visibility: visible;
  transition: opacity .2s ease;
}

/* No scroll cuando la modal está abierta */
.body-lock{ overflow: hidden; }