/* MascotBook · correcciones layout (carga al final del admin)
   Auditoría: sticky, tabs Historia, muro pastilla. Sin JS. */

/* ── 1. Ancestros: no romper position:sticky ── */
@media (min-width: 1025px) {
  html[data-ec-admin] #app {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  html[data-ec-admin] .admin-root.layout,
  html[data-ec-admin] #admin-root.admin-root.layout {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  html[data-ec-admin] .admin-root.layout > section.main,
  html[data-ec-admin] .admin-root.layout > .main {
    overflow-y: visible !important;
    overflow-x: hidden;
  }
}

/* ── 2. Vista previa móvil · sticky definitivo (desktop) ── */
@media (min-width: 1025px) {
  html[data-ec-admin] body.admin-view-mascot .admin-root.view-mascot aside.preview-col,
  html[data-ec-admin] body.admin-view-mascot .admin-root.view-mascot .preview-col {
    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 25 !important;
  }

  html[data-ec-admin] body.admin-view-mascot aside.preview-col > .preview-col__sticky,
  html[data-ec-admin] body.admin-view-mascot .preview-col > .preview-col__sticky {
    box-sizing: border-box !important;
  }

  /* #phone-stage: dimensiones en preview-column.css (evita colapso flex) */
}

/* ── 3. Tabs · Historia y Muro (visibilidad sin depender solo de JS) ── */
.mb-tab-panel-hidden {
  display: none !important;
}

body.admin-view-mascot #form-mascot:has(.mb-tab-btn[data-mb-tab="contenido"].active) [data-mb-tab-panel]:not([data-mb-tab-panel="contenido"]) {
  display: none !important;
}

body.admin-view-mascot #form-mascot:has(.mb-tab-btn[data-mb-tab="historia"].active) [data-mb-tab-panel]:not([data-mb-tab-panel="historia"]) {
  display: none !important;
}

body.admin-view-mascot #form-mascot:has(.mb-tab-btn[data-mb-tab="salud"].active) [data-mb-tab-panel]:not([data-mb-tab-panel="salud"]) {
  display: none !important;
}

body.admin-view-mascot #form-mascot:has(.mb-tab-btn[data-mb-tab="seguridad"].active) [data-mb-tab-panel]:not([data-mb-tab-panel="seguridad"]) {
  display: none !important;
}

body.admin-view-mascot #form-mascot:has(.mb-tab-btn[data-mb-tab="preview"].active) [data-mb-tab-panel] {
  display: none !important;
}

body.admin-view-mascot #form-mascot:has(.mb-tab-btn[data-mb-tab="historia"].active) #mb-tab-historia[data-mb-tab-panel="historia"] {
  display: block !important;
}

/* ── 4. Muro de fotos · pastillas (ancho completo, altura fija) ── */
body.admin-view-mascot #m-gallery-slots.m-gallery-slots,
body.admin-view-mascot #m-gallery-slots.m-gallery-slots--pill,
body.admin-view-mascot #mb-tab-historia #m-gallery-slots {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: none !important;
}

body.admin-view-mascot #m-gallery-slots .m-gallery-slot.m-gallery-slot--tile {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.admin-view-mascot #m-gallery-slots .m-gallery-slot-tile,
body.admin-view-mascot #m-gallery-slots .foto-pastilla__inner {
  width: 100% !important;
  height: 55px !important;
  min-height: 55px !important;
  max-height: 55px !important;
  aspect-ratio: unset !important;
  border-radius: 30px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

body.admin-view-mascot #m-gallery-slots .btn-eliminar-foto {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.admin-view-mascot #m-gallery-slots .m-gallery-slot--has-image .btn-eliminar-foto:not(:disabled) {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.admin-view-mascot .mascot-gallery-slots-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── 5. Vista previa · sin recorte de título / enlace público ── */
html[data-ec-admin] .preview-col,
html[data-ec-admin] aside.preview-col {
  box-sizing: border-box !important;
  padding: 15px !important;
  align-items: stretch !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html[data-ec-admin] .preview-col__sticky {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

html[data-ec-admin] .preview-col h3,
html[data-ec-admin] .preview-col .preview-spec,
html[data-ec-admin] .preview-col .link-public,
html[data-ec-admin] .preview-col #public-url,
html[data-ec-admin] .preview-col .link-public-muted {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  box-sizing: border-box !important;
}

html[data-ec-admin] .preview-col #public-url a,
html[data-ec-admin] .preview-col .link-public a {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
}

/* Marco fijo: bloque MascotBook al final del archivo */

/* Tablet: preview-phone-mockup.css controla el mockup */

/* ═══════════════════════════════════════════════════════════════
   MascotBook · Columna vista previa (reset · marco fijo 300×633)
   Solo body.admin-view-mascot
   ═══════════════════════════════════════════════════════════════ */

body.admin-view-mascot .columna-vista-previa,
body.admin-view-mascot .preview-col__sticky.columna-vista-previa {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px;
  gap: 16px;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: mb-preview-col;
}

body.admin-view-mascot .columna-vista-previa h3 {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  text-align: center;
  flex-shrink: 0;
}

body.admin-view-mascot .columna-vista-previa .preview-spec {
  margin: 0 0 4px;
  font-size: 0.62rem;
  color: #6b7280;
  text-align: center;
  flex-shrink: 0;
}

body.admin-view-mascot .columna-vista-previa .link-public,
body.admin-view-mascot .columna-vista-previa #public-url {
  margin: 0;
  font-size: 12px;
  text-align: center;
  color: #666;
  width: 90%;
  flex-shrink: 0;
}

body.admin-view-mascot #public-url .link-public-muted {
  font-size: 12px;
  color: #666;
  line-height: 1.45;
}

body.admin-view-mascot .marco-celular-slot {
  width: 100%;
  max-width: 390px;
  height: calc(100cqw * 844 / 390);
  min-height: calc(100cqw * 844 / 390);
  max-height: 844px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  margin: 0 auto;
  overflow: visible;
  box-sizing: border-box;
}

body.admin-view-mascot .marco-celular,
body.admin-view-mascot #phone-stage.marco-celular {
  width: 390px !important;
  height: 844px !important;
  min-width: 390px !important;
  min-height: 844px !important;
  max-width: 390px !important;
  max-height: 844px !important;
  box-sizing: border-box !important;
  border: 12px solid #0f172a !important;
  border-radius: 2.75rem !important;
  background: #020617 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transform: scale(min(1, calc(100cqw / 390))) !important;
  transform-origin: top center !important;
  box-shadow:
    0 32px 80px rgba(15, 23, 42, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

@supports not (container-type: inline-size) {
  body.admin-view-mascot .marco-celular-slot {
    height: 726px;
  }

  body.admin-view-mascot .marco-celular,
  body.admin-view-mascot #phone-stage.marco-celular {
    transform: scale(0.87) !important;
  }
}

body.admin-view-mascot .marco-celular .phone-scale-wrap,
body.admin-view-mascot #phone-scale-wrap {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body.admin-view-mascot .contenido-interno,
body.admin-view-mascot #preview-frame.contenido-interno {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 2rem !important;
  overflow: hidden !important;
  display: block !important;
  box-sizing: border-box !important;
  background: #f1f5f9 !important;
}

body.admin-view-mascot .contenido-interno::-webkit-scrollbar,
body.admin-view-mascot #preview-frame::-webkit-scrollbar {
  display: none;
}

body.admin-view-mascot .contenido-interno,
body.admin-view-mascot #preview-frame {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body.admin-view-mascot .boton-guardar,
body.admin-view-mascot .preview-col-save.boton-guardar {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.admin-view-mascot .boton-guardar .preview-col-save-btn--mascot {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  html[data-ec-admin] body.admin-view-mascot .admin-root.layout > aside.preview-col {
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow: visible;
    height: auto;
    max-height: none;
  }

  body.admin-view-mascot .columna-vista-previa {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  body.admin-view-mascot .columna-vista-previa::-webkit-scrollbar {
    display: none;
  }
}

/* Vista previa MascotBook: visible en móvil (admin-elite.css + preview-phone-mockup.css) */