/* Vistio Business v1.1.89 — vista previa ancha para las cuatro herramientas.
   Sólo en el Workspace móvil; el diseño publicado, la vista de escritorio,
   el renderizador, los formularios y las rutas permanecen intactos. */
@media (max-width: 820px) {
  /* Tarjeta Digital, Vistio Link y Catálogo comparten el estudio de edición. */
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .editor-split {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .live-preview-column.preview-studio {
    box-sizing: border-box !important;
    min-width: 0 !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 !important;
    padding: 16px 0 20px !important;
    overflow: visible !important;
    align-self: stretch !important;
  }
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .live-preview-column > :not(.preview-shell) {
    box-sizing: border-box !important;
    margin-inline: auto !important;
    max-width: calc(100% - 16px) !important;
  }
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .preview-shell,
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .preview-canvas {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .preview-shell { padding: 10px 7px 12px !important; }
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .preview-toolbar {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .preview-canvas {
    padding: 5px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Sólo modo Móvil: ancho real disponible dentro del marco de teléfono. */
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form #live-preview.preview-stage.v101-preview-mobile {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    overflow-x: hidden !important;
  }
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form #live-preview.v101-preview-mobile > * {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  /* En modo Escritorio la vista permanece desplazable sin forzar su escala. */
  #workspace #view-content.vb188-tools #resource-form #live-preview.v101-preview-desktop {
    margin-inline: auto !important;
  }

  /* Citas y Reservaciones — vista previa propia de dispositivo. */
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] .vb-booking-editor-shell {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] .vb-booking-editor-preview {
    box-sizing: border-box !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    overflow: visible !important;
  }
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] #vb-appt-preview,
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] .vb-booking-preview-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] .vb-booking-preview-copy {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 10px !important;
  }
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] .vb-booking-preview-device {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] .vb-booking-preview-screen {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    /* No cambiar altura, overflow-y ni el carril dorado del scroll de Agenda. */
  }
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] .vb-booking-live-shell {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (min-width: 601px) and (max-width: 820px) {
  /* Tabletas pequeñas: aspecto de móvil de ancho razonable, centrado. */
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .live-preview-column.preview-studio,
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] .vb-booking-editor-preview {
    width: min(calc(100vw - 20px), 540px) !important;
    max-width: min(calc(100vw - 20px), 540px) !important;
  }
}