/* ==========================================================
   Modal seguro para visor 3D
   - z-index alto para quedar por encima de topbar/carruseles
   - Full-screen en móviles para mejor UX
   ========================================================== */

.modal-root { position: fixed; inset: 0; z-index: 9999; display: none; }
.modal-root.is-open { display: block; }

/* Backdrop oscuro con ligero blur */
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }

/* Contenedor del diálogo (header + body) */
.modal-dialog {
  position: absolute;
  inset: 5% 6%;
  background: var(--stage-bg, #0b0b0b);
  border: 1px solid var(--stroke, rgba(255,255,255,.12));
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.4));
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

/* Header con botón Cerrar */
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--stroke, rgba(255,255,255,.12));
}
.modal-title { font-weight: 700; margin: 0; font-size: 14px; }
.modal-close {
  appearance: none; border: 1px solid var(--stroke, rgba(255,255,255,.12));
  background: rgba(255,255,255,.04); color: inherit; border-radius: 10px;
  padding: 6px 10px; cursor: pointer;
}
.modal-close:hover { background: rgba(255,255,255,.08); }

/* Cuerpo con iframe al 100% */
.modal-body { position: relative; }
.modal-iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.modal-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; text-align: center; color: #ddd;
}

/* Tablets */
@media (max-width: 920px) { .modal-dialog { inset: 6% 4%; } }

/* Móviles: pantalla completa y sin bordes redondeados para aprovechar espacio */
@media (max-width: 640px) {
  .modal-dialog { inset: 0; border-radius: 0; }
  .modal-title { font-size: 13px; }
}