/* Vistio Business 1.1.93 — nota explicativa debajo de la vista previa y
   miniaturas más grandes en dos columnas. Sólo panel móvil (<=820px).
   No modifica datos de edición, plantillas publicadas ni escritorio. */
@media (max-width: 820px) {
  /* v1.1.92 ocultaba la ayuda: devolverla visible, fuera del marco.
     JS la sitúa DESPUÉS del contenedor de la vista previa. */
  #workspace #view-content.vb188-tools #resource-form .live-preview-column > .vb188-mobile-helper {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both;
    inset: auto !important;
    transform: none !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 16px auto 4px !important;
    box-sizing: border-box !important;
    z-index: auto !important;
  }

  /* Tarjeta, Vistio Link y Catálogo. Retener proporciones, dar más
     superficie real a cada miniatura, sin ensanchar todo el documento. */
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .template-choices,
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .template-choices.vbp-continuous-grid {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: calc(100% + 24px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
  }
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .template-choices > .template-choice {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .template-choices :is(.vb114-template-poster, .vbt-ui),
  #workspace #view-content.vb188-tools:is([data-vb188-section="cards"], [data-vb188-section="hubs"], [data-vb188-section="catalogs"])
  #resource-form .template-choices .vb114-template-poster img {
    display: block;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }

  /* Citas y Reservaciones: sólo afecta las opciones visuales de estilo
     o plantilla detectadas previamente por el adaptador existente. */
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] #vb-appt-editor .vb190-appointment-templates {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: calc(100% + 20px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
  #workspace #view-content.vb188-tools[data-vb188-section="appointments"] #vb-appt-editor .vb190-appointment-templates > * {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }
}