/* Vista previa móvil · mockup 390×844 (EliteCard + MascotBook)
   Referencia visual: columna beige, teléfono ~82% del ancho útil, sin deformar. */

:root {
  --ec-preview-col-w: 380px;
  --ec-preview-beige: #f9f4ee;
  --ec-preview-phone-scale: 0.82;
  --ec-preview-phone-w: 390px;
  --ec-preview-phone-h: 844px;
  --ec-preview-phone-border: 12px;
  --ec-preview-phone-slot-w: calc(
    var(--ec-preview-phone-w) * var(--ec-preview-phone-scale)
  );
  --ec-preview-phone-slot-h: calc(
    var(--ec-preview-phone-h) * var(--ec-preview-phone-scale)
  );
}

/* —— Columna derecha (beige, como foto) —— */
@media (min-width: 1025px) {
  html[data-ec-admin] .admin-root.layout > aside.preview-col {
    flex: 0 0 var(--ec-preview-col-w) !important;
    width: var(--ec-preview-col-w) !important;
    max-width: var(--ec-preview-col-w) !important;
    min-width: var(--ec-preview-col-w) !important;
    align-self: flex-start !important;
    position: sticky !important;
    top: 20px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: var(--ec-preview-beige) !important;
    border-left: 1px solid #ebe3d8 !important;
  }
}

html[data-ec-admin] body.admin-view-personal .admin-root.layout > aside.preview-col,
html[data-ec-admin] body.admin-view-mascot .admin-root.layout > aside.preview-col,
html[data-ec-admin] .admin-root.view-personal .preview-col,
html[data-ec-admin] .admin-root.view-mascot .preview-col,
html[data-ec-admin] aside.preview-col.preview-col {
  background: var(--ec-preview-beige) !important;
  border-left: 1px solid #ebe3d8 !important;
}

html[data-ec-admin] .columna-vista-previa,
html[data-ec-admin] .preview-col__sticky.columna-vista-previa {
  width: 100% !important;
  max-width: var(--ec-preview-col-w) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 20px 15px !important;
  gap: 14px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  background: transparent !important;
}

html[data-ec-admin] .columna-vista-previa::-webkit-scrollbar {
  display: none;
}

html[data-ec-admin] .columna-vista-previa h3 {
  margin: 0 !important;
  width: 100% !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

html[data-ec-admin] .columna-vista-previa .preview-spec {
  margin: 0 !important;
  width: 100% !important;
  font-size: 0.62rem !important;
  color: #6b7280 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

html[data-ec-admin] .columna-vista-previa .link-public,
html[data-ec-admin] .columna-vista-previa #public-url {
  margin: 0 !important;
  width: 90% !important;
  max-width: 320px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center !important;
  color: #666 !important;
  flex-shrink: 0 !important;
}

/* —— Slot: reserva exacta del marco escalado —— */
html[data-ec-admin] .marco-celular-slot {
  width: var(--ec-preview-phone-slot-w) !important;
  max-width: var(--ec-preview-phone-slot-w) !important;
  min-width: var(--ec-preview-phone-slot-w) !important;
  height: var(--ec-preview-phone-slot-h) !important;
  min-height: var(--ec-preview-phone-slot-h) !important;
  max-height: var(--ec-preview-phone-slot-h) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* —— Marco 390×844 + escala uniforme (sin estirar) —— */
html[data-ec-admin] .marco-celular,
html[data-ec-admin] #phone-stage.marco-celular,
html[data-ec-admin] #phone-stage.phone-stage.marco-celular,
html[data-ec-admin] .preview-col .phone-stage.marco-celular,
html[data-ec-admin] body.admin-view-personal .marco-celular,
html[data-ec-admin] body.admin-view-personal #phone-stage.marco-celular,
html[data-ec-admin] body.admin-view-mascot .marco-celular,
html[data-ec-admin] body.admin-view-mascot #phone-stage.marco-celular {
  width: var(--ec-preview-phone-w) !important;
  height: var(--ec-preview-phone-h) !important;
  min-width: var(--ec-preview-phone-w) !important;
  min-height: var(--ec-preview-phone-h) !important;
  max-width: var(--ec-preview-phone-w) !important;
  max-height: var(--ec-preview-phone-h) !important;
  box-sizing: border-box !important;
  border: var(--ec-preview-phone-border) solid #0f172a !important;
  border-radius: 2.75rem !important;
  background: #020617 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  transform: scale(var(--ec-preview-phone-scale)) !important;
  transform-origin: top center !important;
  box-shadow:
    0 28px 64px rgba(15, 23, 42, 0.32),
    0 12px 28px rgba(15, 23, 42, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

html[data-ec-admin] #phone-stage.marco-celular[style],
html[data-ec-admin] #phone-stage.phone-stage[style],
html[data-ec-admin] body.admin-view-personal #phone-stage.marco-celular[style],
html[data-ec-admin] body.admin-view-mascot #phone-stage.marco-celular[style] {
  width: var(--ec-preview-phone-w) !important;
  height: var(--ec-preview-phone-h) !important;
  min-width: var(--ec-preview-phone-w) !important;
  min-height: var(--ec-preview-phone-h) !important;
  max-width: var(--ec-preview-phone-w) !important;
  max-height: var(--ec-preview-phone-h) !important;
  transform: scale(var(--ec-preview-phone-scale)) !important;
  transform-origin: top center !important;
}

html[data-ec-admin] body.admin-view-personal .marco-celular-slot,
html[data-ec-admin] body.admin-view-mascot .marco-celular-slot {
  width: var(--ec-preview-phone-slot-w) !important;
  max-width: var(--ec-preview-phone-slot-w) !important;
  min-width: var(--ec-preview-phone-slot-w) !important;
  height: var(--ec-preview-phone-slot-h) !important;
  min-height: var(--ec-preview-phone-slot-h) !important;
  max-height: var(--ec-preview-phone-slot-h) !important;
}

html[data-ec-admin] #phone-scale-wrap,
html[data-ec-admin] .marco-celular .phone-scale-wrap,
html[data-ec-admin] #phone-scale-wrap[style],
html[data-ec-admin] body.admin-view-personal #phone-scale-wrap,
html[data-ec-admin] body.admin-view-mascot #phone-scale-wrap {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  transform-origin: top center !important;
  box-sizing: border-box !important;
}

html[data-ec-admin] .contenido-interno,
html[data-ec-admin] #preview-frame.contenido-interno,
html[data-ec-admin] #preview-frame {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 2rem !important;
  display: block !important;
  box-sizing: border-box !important;
  background: #f1f5f9 !important;
  overflow: hidden !important;
}

html[data-ec-admin] .contenido-interno::-webkit-scrollbar,
html[data-ec-admin] #preview-frame::-webkit-scrollbar {
  display: none !important;
}

html[data-ec-admin] .contenido-interno,
html[data-ec-admin] #preview-frame {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

html[data-ec-admin] .boton-guardar,
html[data-ec-admin] .preview-col-save.boton-guardar {
  width: 100% !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
}

html[data-ec-admin] .boton-guardar .btn-save,
html[data-ec-admin] .boton-guardar .preview-col-save-btn {
  width: 100% !important;
  max-width: 100% !important;
  padding: 15px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-align: center !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  cursor: pointer;
}

@media (max-width: 1024px) {
  html[data-ec-admin] .admin-root.layout > aside.preview-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background: var(--ec-preview-beige) !important;
  }

  html[data-ec-admin] .marco-celular-slot {
    width: min(var(--ec-preview-phone-slot-w), calc(100vw - 48px)) !important;
    max-width: var(--ec-preview-phone-slot-w) !important;
    min-width: 0 !important;
    height: min(
      var(--ec-preview-phone-slot-h),
      calc((100vw - 48px) * 844 / 390 * var(--ec-preview-phone-scale))
    ) !important;
    min-height: 0 !important;
    max-height: 75vh !important;
  }

  html[data-ec-admin] .marco-celular,
  html[data-ec-admin] #phone-stage.marco-celular {
    transform: scale(
      min(
        var(--ec-preview-phone-scale),
        calc((100vw - 48px) / 390 * var(--ec-preview-phone-scale))
      )
    ) !important;
  }
}

/* Vista previa: visible en móvil (reglas en admin-elite.css MOBILE @768) */