/* * Cáscara móvil del editor y del panel de miembro — 0.99.710 * ============================================================ * * POR QUÉ EXISTE ESTE ARCHIVO * * El editor se diseñó para escritorio y el móvil se fue parcheando encima: * `public-builder.css` (144 KB) mete TODO el dimensionado de la vista previa * dentro de `@media (min-width: 1100px)`, así que en el teléfono la previa * literalmente no tenía altura definida; `builder-pro.css` la rescató con un * 38vh pegado arriba; y por encima de ambos quedaron cuatro elementos * `position: fixed` — el riel de secciones, el botón de ayuda del tour, el de * soporte y la píldora de la guía — colocados a mano en tres hojas distintas, * sin que ninguna supiera de las otras. El resultado en un teléfono de 360 px * es el de la captura: los botones flotantes encima de la vista previa y la * previa encima del formulario. * * CÓMO LO ARREGLA * * Esta hoja es el ÚNICO dueño del móvil. Carga la última y hace tres cosas: * * 1. Apaga las reglas móviles de las hojas viejas (riel flotante, previa * pegada, FABs sueltos) en vez de sumar una capa más encima. * 2. Convierte el editor en dos pestañas —Editar y Ver— para que cada * superficie tenga la pantalla entera. Un formulario y una vista previa * no caben a la vez en 360×640: intentarlo da una versión mala de cada * una. * 3. Declara un contrato único para el borde inferior * (`--ppsa-ms-bottom`) del que dependen la barra de acción, los FABs y * el relleno del contenido. Antes cada uno inventaba su propio hueco y * por eso los botones acababan dentro de la barra de navegación. * * ALCANCE: todo vive dentro de `@media (max-width: 899px)`. El escritorio no * cambia ni un píxel. Especificidad mínima con `body.ppsa-mshell` — suficiente * para ganar a las hojas anteriores sin un solo `!important` salvo donde se * apaga algo por completo. * * La clase `ppsa-mshell` la pone `ppsa-mobile-shell.js` en el . Si ese * script no carga, NADA de este archivo aplica y el editor se comporta como * antes: degradación limpia, nunca a medias. */ @media (max-width: 899px) { /* ── 1. Contrato del borde inferior y tokens ─────────────────────── */ body.ppsa-mshell { /* * Alto de la barra inferior. Cero por defecto: en una pantalla sin * barra, reservar hueco dejaría los botones de ayuda flotando en el * aire. Cada cáscara declara el suyo más abajo. */ --ppsa-ms-bar-h: 0px; --ppsa-ms-safe-b: env(safe-area-inset-bottom, 0px); --ppsa-ms-bottom: calc(var(--ppsa-ms-bar-h) + var(--ppsa-ms-safe-b)); --ppsa-ms-tabs-h: 48px; --ppsa-ms-admin: var(--wp-admin--admin-bar--height, 0px); /* * 0.99.713 — las pestañas viven ABAJO, apoyadas sobre la barra de * acción, así que arriba ya no hay que reservar hueco para ellas. */ --ppsa-ms-top: var(--ppsa-ms-admin); /* Todo el cromo inferior: barra de acción + pestañas + zona segura. */ --ppsa-ms-stack: calc(var(--ppsa-ms-bottom) + var(--ppsa-ms-tabs-h)); --ppsa-ms-gutter: 14px; --ppsa-ms-radius: 14px; --ppsa-ms-line: #e2e8f0; --ppsa-ms-ink: #0f172a; --ppsa-ms-ink-2: #475569; --ppsa-ms-accent: #1d4ed8; --ppsa-ms-surface: #ffffff; --ppsa-ms-bg: #f4f6f9; --ppsa-ms-z-bar: 100300; --ppsa-ms-z-sheet: 100320; /* * Los FABs que ya existen leen `--ppsa-fab-base` para calcular sus * tres alturas. Redefinirlo aquí los sube por encima de la barra de * acción sin tocar sus hojas: antes valía 16px fijo y quedaban * literalmente dentro de la barra de navegación inferior. */ --ppsa-fab-base: calc(var(--ppsa-ms-bottom) + 12px); --ppsa-tap: 44px; } /* El editor trae barra propia. */ body.ppsa-mshell.ppsa-ms-builder { --ppsa-ms-bar-h: 60px; } /* * El panel de miembro ya tiene la suya (`.ppsa-dashbar`), que sólo existe * por debajo de 782px. Se replica ese corte para no reservar un hueco * fantasma entre 783 y 899. */ @media (max-width: 782px) { body.ppsa-mshell.ppsa-ms-dash { --ppsa-ms-bar-h: 62px; } } /* * Sin `overflow-x: hidden` en a propósito: convierte al body en * contenedor de scroll y rompe `position: sticky` de todo lo que haya * dentro. El desbordamiento horizontal se ataja en el origen —rejillas a * una columna, tablas con scroll propio, medios acotados— que además es * donde se ve el problema real en lugar de taparlo. */ body.ppsa-mshell img, body.ppsa-mshell video, body.ppsa-mshell canvas, body.ppsa-mshell iframe:not(.ppsa-preview-iframe) { max-width: 100%; } /* ── 2. Higiene de formularios ───────────────────────────────────── */ /* * Safari en iOS hace zoom automático al enfocar cualquier campo con * tipografía por debajo de 16px, y luego el usuario tiene que despinchar * a mano. `.ppsa-input` estaba en 15px, así que pasaba en TODOS los * campos del editor. 16px es el mínimo que lo evita. */ body.ppsa-mshell input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), body.ppsa-mshell select, body.ppsa-mshell textarea { font-size: 16px; min-height: var(--ppsa-tap); } body.ppsa-mshell textarea { min-height: 88px; } /* Un botón que no se puede tocar con el pulgar no es un botón. */ body.ppsa-mshell .ppsa-btn-pro, body.ppsa-mshell .ppsa-dash-nav__btn, body.ppsa-mshell .ppsa-builder-card__summary, body.ppsa-mshell summary.ppsa-builder-card__summary { min-height: var(--ppsa-tap); } body.ppsa-mshell .ppsa-btn-pro { display: inline-flex; align-items: center; justify-content: center; } /* ── 3. Se apaga lo que estorbaba ────────────────────────────────── */ /* * El riel flotante (↑ ☰ ↓ + «Estás en…») vivía en `position: fixed` con * `bottom: 28%`, que en un teléfono cae justo encima de la vista previa. * Su función —saltar de sección— la hace ahora el selector de la barra * inferior, que ni tapa nada ni hay que adivinar. */ body.ppsa-mshell .ppsa-builder-section-rail, body.ppsa-mshell .ppsa-blocks-quicknav, body.ppsa-mshell .ppsa-builder-jump-chip { display: none !important; } /* * Tres botones de ayuda independientes en el mismo borde: el «?» del * tour y la píldora «Guía» se peleaban por el mismo hueco. Se ocultan y * `ppsa-mobile-shell.js` los sustituye por un único botón que abre una * hoja con las tres opciones. Siguen en el DOM y sus manejadores intactos: * la hoja les hace click por debajo. */ body.ppsa-mshell .ppsa-guided-tour-help, body.ppsa-mshell .ppsa-dash-tour-help, body.ppsa-mshell .ppsa-support-contact-fab, body.ppsa-mshell .ppsa-member-guide__toggle { display: none !important; } /* El plegado de la previa lo sustituye la pestaña «Ver». */ body.ppsa-mshell .ppsa-canvas-toggle, body.ppsa-mshell .ppsa-builder-fs-float { display: none !important; } /* ── 4. Barra de pestañas Editar / Ver ───────────────────────────── */ /* * Fija, no pegajosa. `sticky` obligaría a que ningún antepasado tenga * `overflow` recortado —y el editor tiene varios— así que se rompería en * cuanto alguien añadiera un contenedor. Fija siempre funciona igual. */ .ppsa-ms-tabs { position: fixed; inset-inline: 0; /* * 0.99.713 — abajo, no arriba. * * Editar/Ver es el mando que más se toca y estaba en la esquina más * lejana del pulgar. Ahora se apoya justo encima de la barra de * acción, de modo que el cambio de superficie y el guardado quedan * en el mismo sitio, al alcance de una mano. */ top: auto; bottom: var(--ppsa-ms-bottom); z-index: var(--ppsa-ms-z-bar); display: flex; gap: 6px; align-items: center; height: var(--ppsa-ms-tabs-h); padding: 6px var(--ppsa-ms-gutter); background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-top: 1px solid var(--ppsa-ms-line); } .ppsa-ms-tabs__btn { flex: 1 1 0; /* * 0.99.712 — cabe entero en los 48px de contenido de la barra, así * que subir de 36px al mínimo táctil no cambia el alto de la barra * ni un píxel: solo agranda el blanco donde se puede pulsar. */ min-height: var(--ppsa-tap); border: 0; border-radius: 999px; background: transparent; color: var(--ppsa-ms-ink-2); font: 600 0.95rem/1 inherit; font-family: inherit; cursor: pointer; transition: background 0.16s ease, color 0.16s ease; } .ppsa-ms-tabs__btn[aria-selected='true'] { background: var(--ppsa-ms-ink); color: #fff; } .ppsa-ms-tabs__btn:focus-visible { outline: 2px solid var(--ppsa-ms-accent); outline-offset: 2px; } /* Punto de aviso: hay cambios sin guardar. */ .ppsa-ms-tabs__dot { display: none; /* * 0.99.713 — de 7px a 9px con anillo. El punto tenía que leerse * sobre la pestaña activa, que es casi negra; a 7px y sin borde se * confundía con el texto. El anillo lo despega de cualquier fondo. */ width: 9px; height: 9px; margin-inline-start: 6px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); vertical-align: middle; } body.ppsa-mshell.ppsa-ms-dirty .ppsa-ms-tabs__dot { display: inline-block; } /* ── 5. Las dos superficies ──────────────────────────────────────── */ /* Hueco para la barra de pestañas fija y para la de acción. */ body.ppsa-mshell.ppsa-ms-builder #ppsa-builder-root { /* * 0.99.713 — el hueco pasa de arriba a abajo: ahí es donde están * ahora las pestañas y la barra de acción. `--ppsa-ms-stack` suma las * dos más la zona segura, así ninguna de las dos tapa el final del * formulario. */ padding-top: 10px; padding-bottom: calc(var(--ppsa-ms-stack) + 12px); } body.ppsa-mshell .ppsa-builder-layout { display: block; gap: 0; padding: 0; } /* * `builder-pro.css` deja la previa pegada arriba con `order:-1` y 38vh. * Aquí manda la pestaña: cada panel ocupa todo o no se ve. Se gana por * especificidad (0,3,1 contra 0,2,0), sin `!important`. */ body.ppsa-mshell .ppsa-builder-layout .ppsa-builder-preview-col { order: 0; position: static; max-height: none; padding-bottom: 0; box-shadow: none; background: transparent; } body.ppsa-mshell[data-ms-tab='edit'] .ppsa-builder-layout .ppsa-builder-preview-col { display: none; } body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-shell, body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-layout .ppsa-builder-main, body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-progress, body.ppsa-mshell[data-ms-tab='view'] .ppsa-starter, body.ppsa-mshell[data-ms-tab='view'] .ppsa-ai-build { display: none; } /* ── 6. La vista previa, por fin a tamaño real ───────────────────── */ /* * NO se toma el control de la altura del iframe. `public-builder.js` * (applyPreviewIframeHeight) ya la calcula bien —mide desde el borde * superior del marco hasta el fondo del panel, restando lo que haya * debajo— y la escribe como estilo en línea, que ganaría a cualquier * regla de aquí. Pelearse con eso produce exactamente los saltos y * recortes que se quieren evitar. * * Así que se colabora con ese cálculo en vez de sustituirlo: * · se quitan los topes que lo estrangulaban (los 38vh de * builder-pro.css y los `max-height` heredados del escritorio); * · se le da un suelo razonable por si nunca llega a ejecutarse; * · y se le «avisa» de la barra inferior dándole relleno a la barra de * herramientas, que es justo lo que su algoritmo suma como `belowH`. * Ese truco vale más que un cálculo paralelo: si mañana cambia el * alto de la barra, la previa se ajusta sola. */ /* * EL PANEL NECESITA ALTURA PROPIA. Esto es lo que de verdad tenía * encogida la previa, y no se ve leyendo el CSS: el cálculo del iframe es * CIRCULAR. `previewAvailableFrameHeight()` hace * * min(alto_de_ventana - 8, panelRect.bottom) - frameTop - loDeAbajo * * y en escritorio funciona porque el panel lleva `max-height: 100vh` y es * pegajoso, así que su borde inferior llega al fondo de la ventana y el * `min()` elige ese fondo. En móvil el panel no tiene ninguna altura: su * borde inferior es simplemente donde acaba su contenido… que depende del * alto del iframe. Medido en el banco: panel abajo 538, iframe 321, * disponible 322. Un punto fijo. El algoritmo sólo puede encoger, jamás * crecer, y por eso la previa se quedaba clavada en su mínimo pasara lo * que pasara. * * Dándole al panel una altura real —la ventana menos las pestañas— el * `min()` vuelve a elegir el fondo de la ventana y el cálculo original * funciona tal cual. Se arregla la causa, no el síntoma. */ body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col { display: flex; flex-direction: column; min-height: calc(100vh - var(--ppsa-ms-top) - var(--ppsa-ms-stack) - 18px); min-height: calc(100dvh - var(--ppsa-ms-top) - var(--ppsa-ms-stack) - 18px); } body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col .ppsa-preview-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: none; overflow: visible; border-radius: var(--ppsa-ms-radius); border: 1px solid var(--ppsa-ms-line); background: var(--ppsa-ms-surface); } body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col .ppsa-preview-frame { flex: 1 1 auto; height: auto; min-height: 320px; max-height: none; overflow: hidden; border-radius: var(--ppsa-ms-radius); } body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col .ppsa-preview-toolbar { flex: 0 0 auto; } body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col .ppsa-preview-iframe { display: block; width: 100%; height: auto; min-height: 320px; max-height: none; border: 0; } body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col .ppsa-live-preview { height: auto; min-height: 320px; max-height: none; overflow: auto; } /* * Reserva del hueco de la barra inferior. `previewAvailableFrameHeight()` * suma la altura de todos los hermanos que hay bajo el marco: darle * relleno a la barra de herramientas hace que la previa termine justo * encima de la barra fija, sin que ninguna de las dos sepa de la otra. */ body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col .ppsa-preview-toolbar { display: block; padding-bottom: calc(var(--ppsa-ms-bottom) + 10px); } /* * Guardar y Publicar viven en la barra inferior, siempre a la vista. Lo * que sí vuelve a mostrarse aquí (builder-pro.css lo escondía en móvil) * son Deshacer / Rehacer / Actualizar / Ver página: se usan MIENTRAS * miras el resultado, que es justo esta pestaña. */ /* * Una sola fila que se desliza, no cuatro píldoras que se envuelven. * Medido: con `min-height: 44px` y ajuste automático, Deshacer / Rehacer / * Actualizar / Ver página ocupaban dos filas = 100px, y esos 100px salen * DIRECTAMENTE del alto de la previa, porque el cálculo del iframe resta * todo lo que hay debajo. Aquí la regla de los 44px cede: son controles * secundarios, se usan de uno en uno y quedan bien separados en * horizontal. */ body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col .ppsa-preview-secondary-actions { display: flex; flex-wrap: nowrap; gap: 6px; padding: 10px 0 0; overflow-x: auto; scrollbar-width: none; } body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col .ppsa-preview-secondary-actions::-webkit-scrollbar { display: none; } body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col .ppsa-preview-secondary-actions .ppsa-btn-pro { flex: 0 0 auto; min-height: var(--ppsa-tap); padding: 0 12px; font-size: 0.82rem; white-space: nowrap; } body.ppsa-mshell[data-ms-tab='view'] .ppsa-builder-preview-col .ppsa-preview-actions { display: none; } /* * Fuera la cabecera del panel. Medido en el banco de pruebas a 360×640: * el rótulo «Vista previa en vivo» más el selector de zoom se comían * 130px de los 640 —un 20% de la pantalla— y dejaban la previa en su * suelo de 320px. Ninguno de los dos aporta nada aquí: el rótulo repite * lo que ya dice la pestaña «Ver», y el zoom es para escritorio; en un * teléfono la previa YA está a tamaño de teléfono. El