/* WpLanding — Responsive de las secciones generadas con IA
 *
 * POR QUÉ EXISTE:
 * Todo el estilo que escribe la IA va en el atributo style="" de cada elemento, porque es el
 * único formato que el editor sabe editar. Y un style="" NO puede contener @media: no hay forma
 * de escribir un punto de ruptura ahí dentro. Resultado: en escritorio se veía perfecto y en
 * móvil una rejilla de 3 columnas seguía siendo de 3 columnas, con tarjetas de 60 px.
 *
 * La solución es sacar SOLO los puntos de ruptura a esta hoja, que sí puede tener @media, y que
 * el HTML los pida con un atributo. El estilo concreto (colores, tipografías, espaciados) sigue
 * yendo inline, así que el editor lo sigue controlando todo.
 *
 * Se carga en el lienzo del constructor y en la landing publicada.
 */

/* ── Rejillas ─────────────────────────────────────────────────────────────
 * data-wpl-cols="N" reemplaza a grid-template-columns:repeat(N,1fr).
 * minmax(0,1fr) y no 1fr a secas: sin ese 0 una tarjeta con texto largo se
 * niega a encoger y desborda la rejilla. */
[data-wpl-cols] {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
[data-wpl-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-wpl-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-wpl-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-wpl-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
[data-wpl-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Tablet: nada de más de 3 columnas, y las de 2 aguantan. */
@media (min-width: 901px) and (max-width: 1100px) {
  [data-wpl-cols="5"],
  [data-wpl-cols="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 641px) and (max-width: 900px) {
  [data-wpl-cols="3"],
  [data-wpl-cols="4"],
  [data-wpl-cols="5"],
  [data-wpl-cols="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Móvil: una sola columna, siempre. */
@media (max-width: 640px) {
  /* La elección manual (⚙️ Propiedades) manda: estas reglas se apartan de ese elemento. */
  [data-wpl-cols]:not([data-wpl-cols-movil]):not([data-wpl-cols-tablet]) { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── Filas de columnas hechas con flex ────────────────────────────────────
 * data-wpl-fila marca una fila que en móvil debe apilarse. */
[data-wpl-fila] {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  [data-wpl-fila]:not([data-wpl-cols-movil]):not([data-wpl-cols-tablet]) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Los de tamaño propio (logo, avatar, icono, imagen) se EXCLUYEN de la regla en vez de
     contradecirla después: si se les pone width:auto encima pierden su tamaño y quedan
     aplastados. Así conservan exactamente el que tenían. */
  [data-wpl-fila]:not([data-wpl-cols-movil]):not([data-wpl-cols-tablet]) > *:not([data-wpl-fijo]):not(img) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  [data-wpl-fila] > [data-wpl-fijo],
  [data-wpl-fila] > img {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    max-width: 100% !important;
  }
  /* Una barra de navegación no se apila en vertical: se centra y se envuelve. */
  [data-wpl-fila="nav"] {
    flex-direction: row !important;
    justify-content: center !important;
  }
  [data-wpl-fila="nav"] > * { width: auto !important; }
}

/* ── Red de seguridad general ─────────────────────────────────────────────
 * Estas tres reglas evitan el 90% de los desbordes en móvil sin tocar el
 * diseño de escritorio. */
@media (max-width: 640px) {
  [data-wpl-sec] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  [data-wpl-sec] img { max-width: 100% !important; height: auto !important; }
  /* Posicionados absolutos: en móvil no hay sitio para superponer nada. */
  [data-wpl-sec] [style*="position:absolute"],
  [data-wpl-sec] [style*="position: absolute"] {
    position: static !important;
  }
}

/* Nunca scroll horizontal por culpa de una sección generada. */
[data-wpl-sec] {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESTOS DEL EDITOR QUE NO DEBEN TENER EFECTO AL PUBLICAR
   ──────────────────────────────────────────────────────────────────────────
   GrapesJS marca los <iframe> con la clase .gjs-no-pointer para que al hacer
   clic en el lienzo se seleccione el bloque en vez de interactuar con su
   contenido. Esa clase, y su regla pointer-events:none, se estaban guardando
   en la página publicada: el visitante veía el calendario de reservas o un
   mapa, pero no podía pulsar absolutamente nada.

   La limpieza de verdad se hace al guardar la landing, pero esta regla lo
   neutraliza de inmediato en TODAS las páginas ya publicadas, sin tener que
   volver a guardarlas una por una. Va con !important porque el CSS guardado
   de la landing se inserta después en el documento.
   ══════════════════════════════════════════════════════════════════════════ */
.gjs-no-pointer,
.gjs-freezed {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Un calendario o mapa incrustado nunca debe traer su propia barra de scroll:
   wpl-embed.js le ajusta el alto al contenido. */
iframe[data-wpl-embed],
iframe[src*="/booking/"] {
  width: 100%;
  border: none;
  display: block;
  max-width: 100%;
}

/* ── Un incrustado nunca puede ser más ancho que su hueco ─────────────────
   El editor deja redimensionar el bloque arrastrando la esquina, y basta pasarse
   un poco para que quede guardado un width:108% que en el móvil saca barra de
   scroll horizontal a TODA la página (medido en /lp/2/fgbhwsrf: 529 px dentro de
   490). Esto lo corta sin tocar el CSS guardado de cada landing. */
[data-wpl-embed] {
  max-width: 100% !important;
  box-sizing: border-box;
}
/* :has() en regla aparte: si un navegador viejo no lo entiende descarta sólo ésta
   y no la de arriba. Cubre los calendarios insertados antes de que el bloque
   marcara el contenedor. */
:has(> iframe) {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   COLUMNAS ELEGIDAS A MANO PARA MÓVIL Y TABLET
   ──────────────────────────────────────────────────────────────────────────
   Las reglas automáticas de arriba deciden solas: en el teléfono todo baja a una
   columna. Es lo correcto casi siempre, pero no cuando la fila lleva cosas cortas
   —tres cifras, cuatro iconos, dos etiquetas— y apilarlas deja la pantalla vacía
   y el recorrido larguísimo.

   Con estos atributos la persona lo decide desde "⚙️ Propiedades" al seleccionar
   la fila. Van DESPUÉS de las automáticas a propósito: misma especificidad, así
   que gana la última y la elección manual manda.

   Sólo viven dentro de sus @media: en escritorio no existen y no pueden estropear
   nada de lo que ya está montado.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Se enumeran los valores en vez de usar [atributo] a secas: la opción "Automático"
     deja el atributo vacío, y un selector de atributo suelto también lo casaría,
     forzando una rejilla cuando lo que se pide es no intervenir. */
  [data-wpl-cols-movil="1"],
  [data-wpl-cols-movil="2"],
  [data-wpl-cols-movil="3"],
  [data-wpl-cols-movil="4"] {
    display: grid !important;
    flex-direction: row !important;
  }
  [data-wpl-cols-movil="1"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-wpl-cols-movil="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-wpl-cols-movil="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [data-wpl-cols-movil="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  /* Los hijos de una fila flex llevaban width:100% para apilarse. Si aquí se pide
     más de una columna, ese 100% los sacaría de su celda. */
  [data-wpl-cols-movil="2"] > *,
  [data-wpl-cols-movil="3"] > *,
  [data-wpl-cols-movil="4"] > * {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  /* Se enumeran los valores en vez de usar [atributo] a secas: la opción "Automático"
     deja el atributo vacío, y un selector de atributo suelto también lo casaría,
     forzando una rejilla cuando lo que se pide es no intervenir. */
  [data-wpl-cols-tablet="1"],
  [data-wpl-cols-tablet="2"],
  [data-wpl-cols-tablet="3"],
  [data-wpl-cols-tablet="4"] {
    display: grid !important;
    flex-direction: row !important;
  }
  [data-wpl-cols-tablet="1"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-wpl-cols-tablet="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-wpl-cols-tablet="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [data-wpl-cols-tablet="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  [data-wpl-cols-tablet="2"] > *,
  [data-wpl-cols-tablet="3"] > *,
  [data-wpl-cols-tablet="4"] > * {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}