/* Editor · modo móvil (≤768 px). Troceado de `compact_workspace.css` (lote C3). Carga en `head_extra` de editor/editor.html, ANTES del núcleo: ante una regla del núcleo con la misma especificidad, pierde. El orden entre módulos lo fija tests/css_manifest.py. */ /* ===================================================================== MODO MÓVIL (≤768px) ===================================================================== Punto de ruptura único de móvil. El editor tiene dos cortes y solo dos: ≤1279px «estrecho»: los carriles dejan de ser columnas de la retícula y pasan a ser cajones sobre el texto (bloques de más arriba). ≤768px «móvil»: este bloque. Va al final del fichero a propósito: varias de las reglas que corrige (barra de estado, pastilla del corrector) se declaran más arriba con la misma especificidad, y el orden de origen es lo que decide el empate. Decisión de producto: EN MÓVIL SE CAE LA METÁFORA DEL A4. Por debajo de este corte el folio deja de medir 794px fijos y ocupa el ancho útil, con márgenes proporcionados a la pantalla. Consecuencias obligadas: · las guías de cambio de página se ocultan (una guía calculada sobre proporciones A4 es falsa cuando la caja de texto no es un A4); editor_pagination.js además ni las calcula; · el contador «página X de Y» se oculta: contaría páginas de un reparto que la pantalla no muestra. La exportación y la impresión siguen paginando en A4 de verdad, con las reglas de @media print intactas; · el zoom deja de ser «ajustar el folio a la ventana» (no hay nada que ajustar) y queda como escala de lectura del texto; el zoom de ajuste automático arranca al 100 % (computeFitZoom en editor/public_editor.js). Nada de esto toca escritorio ni impresión: por encima de 768px siguen el A4 de anchura fija, las guías medidas y el bloque @media print. `screen and`: una consulta de anchura a secas también se evalúa al imprimir, contra la caja de página; con papel estrecho (o apaisado en ciertos tamaños) este bloque se colaría en la impresión. La salida impresa no depende del ancho de la pantalla. ===================================================================== */ @media screen and (max-width: 768px) { /* Altura de la aplicación en unidades dinámicas: con 100vh el navegador móvil cuenta la barra de direcciones retraída y la barra de estado del editor quedaba fuera de la pantalla hasta que se desplazaba la página. */ body:has([data-public-editor]) .public-editor-shell { min-height:100dvh; } body:has([data-public-editor]) .agent-editor-frame { height:100dvh; min-height:100dvh; } /* Con el folio abierto, la página no se desplaza: solo el folio. Chrome en Android esconde la barra de direcciones al desplazar la raíz, y mientras la barra se mueve `100dvh` va por detrás de lo visible: el marco medía más que la pantalla, el dedo arrastraba la página entera y la cinta se iba por arriba dejando un hueco bajo la barra de estado (Guillermo, 22-09). Sin raíz desplazable la barra no se esconde, y `100svh`, la altura con la barra visible, es exactamente la pantalla. La vista «Nuevo documento» sí necesita desplazar la página y queda fuera. */ html:has(.public-editor-shell[data-editor-view="editor"]), body:has(.public-editor-shell[data-editor-view="editor"]) { height:100%; overflow:hidden; overscroll-behavior:none; } body:has(.public-editor-shell[data-editor-view="editor"]) .agent-editor-frame { height:100svh; min-height:100svh; } /* ---- vista del informe ---- El rótulo del género se recorta a una línea y la descarga no parte palabras: en 375px, «Descargar informe PDF» en tres renglones se comía la cabecera entera. El informe pega con los bordes, que es todo el ancho que hay (el propio fragmento retira su marco en pantallas estrechas). */ .report-view-head { gap:10px; padding:9px 12px; } .report-view-id small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .report-view-download { flex:0 0 auto; padding:9px 13px; font-size:12.5px; white-space:nowrap; } .report-view-body { padding:0 0 32px; } /* ---- vista «Nuevo documento» ---- La cabecera se apila (el botón de volver bajo el título, no a su lado) y el pie pasa a dos renglones con el botón a todo lo ancho: en 375px, el resumen y «Crear documento» en la misma línea dejaban al botón en 90px. La altura la manda el visor, no 100vh: con el teclado abierto, el pie fijo a 100vh se iba fuera de pantalla. */ .editor-start { min-height:100dvh; max-height:100dvh; } .start-head { flex-direction:column; gap:12px; padding:16px 14px 14px; } .start-head-id h2 { font-size:18px; } .start-resume { align-self:stretch; justify-content:center; min-height:44px; } .start-body { padding:16px 14px 22px; } .start-origins { grid-template-columns:1fr; } .start-foot { flex-direction:column; align-items:stretch; gap:12px; padding:12px 14px; } .start-confirm { justify-content:center; min-height:46px; font-size:14.5px; } .start-warn { flex-wrap:wrap; } .start-download { min-height:34px; } .start-file-chip button { width:34px; height:34px; } /* ---- cinta ---- Las dos filas se desplazan con el dedo; objetivos de 40px. La fila de pestañas gana altura y la de comandos pasa a 52px. */ .ribbon-tabs { height:40px; } /* Se desplaza el carril, no la tira: el galón vive fuera de él y se queda quieto sin necesidad de `sticky`, de fondo propio ni de velo. */ .ribbon-tabs-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; } .ribbon-tabs-scroll::-webkit-scrollbar { display:none; } .ribbon-wordmark { display:none; } .ribbon-tab { height:40px; padding:0 12px; font-size:13.5px; } /* La barra de aplicación se queda en las tres vistas —es la única salida—, pero sin rótulos: en 375px, «Informe de claridad · Ayuda · Salir» escritos no dejaban ancho para una sola pestaña. Los nombres siguen en el title y en el aria-label, que es de donde los lee un lector de pantalla. La vuelta sí conserva el suyo: es la acción que se busca, no la que se reconoce por el icono. */ .ribbon-appbar { padding-left:4px; } .ribbon-appbtn { height:36px; padding:0 8px; } .ribbon-appbtn span { display:none; } .ribbon-appbtn svg { width:18px; height:18px; } .ribbon-exit { margin-left:4px; padding-left:10px; } .ribbon-back { height:36px; margin-right:8px; font-size:13px; } .ribbon-back svg { width:17px; height:17px; } /* El galón se queda pegado al borde derecho mientras las pestañas corren por debajo. Antes viajaba dentro del desplazamiento --es un hijo más de la tira-- y con cinco pestañas se iba fuera de la pantalla: para plegar la cinta había que arrastrar hasta el final primero (visto por Guillermo en su móvil, 2026-08-11). `margin-left:auto` no sirve aquí: cuando el contenido desborda no queda espacio libre que repartir y el margen automático se anula, así que el botón se pega a la última pestaña. `sticky` sí, porque lo ancla al borde del área visible y no al final del contenido. El fondo y el velo de la izquierda no son adorno: sin ellos las pestañas se leen por debajo del icono al pasar. */ .ribbon-fold { width:36px; height:36px; } .ribbon-row { height:52px; gap:2px; padding:0 6px; } .ribbon-btn { min-width:40px; height:40px; border-radius:9px; font-size:13px; } .ribbon-btn svg { width:20px; height:20px; } .ribbon-sep { height:26px; margin:0 4px; } .ribbon-select { height:40px; font-size:13px; } .ribbon-select-font { width:98px; } /* En estrecho la letra sube a 13px, así que el de estilo crece con ella. */ .ribbon-select-block { width:118px; } /* Los tres selectores (formato, fuente, tamaño) ocupan ~240px: al principio de la fila dejaban negrita/cursiva fuera de la primera pantalla. En móvil se van al final, donde se llega desplazando. */ .ribbon-row-format .ribbon-select { order:1; } /* ---- caja de texto ---- Aquí NO se repiten las reglas del folio: la columna continua ya es fluida y ocupa el ancho disponible cuando la ventana es estrecha. Lo único propio de móvil es el cuerpo de texto, 16px en vez de los 15px que analytics.css impone sin ámbito (de ahí el prefijo, que se carga después de esta hoja y si no ganaría el empate). */ [data-public-editor] .editor-document-card .rich-editor-surface { font-size:16px; } [data-public-editor] .editor-document-card .rich-editor-content { font-size:calc(16px * var(--editor-zoom,1)); } /* El selector de modo de vista se retira: por debajo de este corte el A4 no cabe y el modo impresión no se ofrece (editor/public_editor.js fuerza web). Se oculta en vez de dejarlo deshabilitado porque un control apagado sin explicación invita a preguntarse por qué, y aquí no hay elección posible ni sitio en la barra para justificarla. */ /* ---- barra de estado ---- Una fila desplazable en horizontal, no envuelta en varias: envolver le comía hasta tres renglones de alto. Se retiran los separadores, el indicador de idioma (ya está en la pastilla del corrector), el contador de páginas y el deslizador de zoom (los botones −/+ bastan con el dedo). */ .editor-statusbar { min-height:0; padding:4px 8px; font-size:12px; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; } .editor-statusbar::-webkit-scrollbar { display:none; } /* Grupo de la derecha primero: en 390px no cabe la barra entera, y lo que tiene que estar a la vista sin desplazar es lo accionable (coincidencias, corrector, zoom). Lo informativo (estado del motor, palabras, guardado) queda a continuación, alcanzable desplazando. Nada se oculta. */ .statusbar-right { order:1; } .statusbar-left { order:2; } /* flex:0 0 auto + min-width:auto: los dos grupos traen `min-width:0`, que con la barra sin envolver les dejaba encogerse por debajo de su contenido y los renglones se solapaban unos con otros. Aquí cada grupo mide lo suyo y lo que sobra lo absorbe el desplazamiento de la barra. */ .statusbar-left, .statusbar-right { flex:0 0 auto; min-width:auto; gap:8px; } .statusbar-left { overflow:visible; } .statusbar-sep, .statusbar-lang, .zoom-slider { display:none; } .statusbar-dirty { max-width:none; font-size:12px; } .statusbar-right .badge { padding:2px 9px; font-size:12px; } .editor-file-status { max-width:60vw; font-size:12px; } .statusbar-spell { min-height:40px; padding:4px 10px; } .statusbar-spell svg { width:16px; height:16px; } .statusbar-spell-lang, .statusbar-spell-state { font-size:12px; } .statusbar-zoom .icon-tool { width:40px; height:40px; } .statusbar-zoom .icon-tool svg { width:18px; height:18px; } .statusbar-zoom .editor-zoom-label { min-width:38px; font-size:12px; } /* ---- carriles a pantalla completa ---- Cubren la cabecera, así que la única salida es el botón de cerrar de su propia cabecera: tiene que ser grande. */ /* El cajón ocupa la pantalla ENTERA. Dejaba libres 46px a la izquierda para el carril de aplicación, que se retiró el 2026-08-24: sin él, esa franja ya no enseñaba navegación sino un recorte del folio, y el cajón parecía mal encajado en vez de abierto encima. Al no haber nada que respetar, el cajón se lleva los cuatro bordes y la salida es el aspa de su propia cabecera, que por eso mide 44px. */ .editor-rail { inset:0; width:auto; border-radius:0; } .rail-head { padding:8px 8px 8px 14px; } .rail-head-title { font-size:15px; } .rail-head-title i, .rail-head-title svg { width:18px; height:18px; } .rail-collapse { width:44px; height:44px; border-radius:11px; } .rail-collapse svg { width:20px; height:20px; } /* ---- paso abierto de la revisión con IA: hoja de dos tercios (N7) ---- En un paso se leen a la vez los cambios y el folio, así que el cajón deja arriba un tercio del folio con la llave y el cambio iluminado (`bracket.reveal` mide solo lo que queda a la vista). La lista de pasos, el final y Recomendaciones siguen con el cajón entero. El pie del paso es pegajoso (`03-suggestions-ai-steps.css`) y el párrafo compuesto se pliega. */ .public-editor-shell.is-suggestions-open:has(.editor-suggestions-panel[data-rail-level="ai"] .ai-step-view[data-ai-step-status]) .editor-suggestions-rail { top:34%; top:34dvh; border-top:1px solid var(--insp-line); border-radius:14px 14px 0 0; box-shadow:0 -10px 28px rgba(15,23,42,.16); } /* La pestaña de la estructura vive a media altura: caería sobre el borde de la hoja. Con un paso abierto no hace falta. */ .public-editor-shell.is-suggestions-open:has(.editor-suggestions-panel[data-rail-level="ai"] .ai-step-view[data-ai-step-status]) .rail-reopen-left { display:none; } .rail-genre { padding:8px 10px 8px 14px; } .rail-genre-id strong { font-size:14px; } .rail-genre-id small { font-size:12px; } .rail-genre-change { min-height:40px; font-size:12.5px; } .rail-analyze-btn { min-height:46px; font-size:14px; } .rail-analyze-btn svg { width:18px; height:18px; } .rail-analyze-btn.is-secondary { min-height:36px; font-size:12.5px; } .rail-analyze-btn.is-secondary svg { width:15px; height:15px; } [data-public-editor] .editor-report-status h3 { font-size:13.5px; } [data-public-editor] .editor-report-status p { font-size:12.5px; } /* ---- árbol de estructura ---- El «+» de insertar aparecía solo al posar el cursor: sin ratón no hay hover, así que en móvil está siempre visible o no se puede usar. */ .structure-intro { font-size:12.5px; } .structure-tree-toggle { min-height:44px; padding:10px 6px 10px 12px; } .structure-tree-toggle > svg { width:16px; height:16px; } .structure-tree-toggle strong { font-size:14px; } .structure-tree-toggle small { font-size:12px; } .structure-tree-row.content-row .structure-tree-toggle { min-height:42px; padding:9px 6px 9px 8px; } .structure-tree-row.content-row .structure-tree-toggle > svg { width:14px; height:14px; } .structure-tree-row.content-row .structure-tree-toggle strong { font-size:13.5px; } /* [data-public-editor]: analytics.css declara su propia `.structure-insert-action` de 32x32 sin ámbito y se carga después. */ .structure-tree-phrases .phraseology-btn { min-height:44px; padding:10px 9px; font-size:13px; } .structure-tree-phrases .phraseology-btn svg { width:17px; height:17px; } /* ---- panel de sugerencias (acotado al editor) ---- los módulos 03-suggestions-* y analytics.css los comparte el probador; las correcciones de móvil del editor van aquí bajo [data-public-editor] para no tocar esa hoja compartida. */ [data-public-editor] .sg-panel .sg-iconbtn { width:40px; height:40px; } [data-public-editor] .sg-panel .sg-iconbtn svg { width:18px; height:18px; } [data-public-editor] .sg-panel .sg-chip { min-height:34px; padding:6px 12px; font-size:12.5px; } [data-public-editor] .sg-panel .sg-card-head { padding:14px 13px; } [data-public-editor] .sg-panel .sg-point-head { padding:13px 12px; } [data-public-editor] .sg-panel .sg-points-head span, [data-public-editor] .sg-panel .sg-point-flag, [data-public-editor] .sg-panel .sg-rel-head .n { font-size:12px; } [data-public-editor] .sg-panel .sg-rel-head { padding:11px; } [data-public-editor] .sg-panel .sg-btn { min-height:44px; } /* ---- tarjeta de acierto: hoja inferior ---- Por debajo de este corte el globo anclado a la marca se cambia por una hoja pegada al borde inferior, como la del analizador. Razón: con una recomendación larga y propuestas de catálogo no hay hueco suficiente ni encima ni debajo de la marca en una pantalla de teléfono, así que el globo acababa fuera de la ventana o encogido a media altura. La hoja tiene siempre el mismo sitio, el mismo alto máximo y el pulgar cerca. La colocación es toda de aquí: `positionHitPopover` retira sus estilos en línea (izquierda, arriba, alto máximo, flecha) al entrar en este modo, y añade `is-sheet`. 72dvh: unidades dinámicas, para que la barra del navegador al replegarse no deje la hoja más alta que la ventana. Se declara detrás de la versión en vh, que sirve de respaldo donde no haya dvh. */ /* ---- diálogos ---- */ [data-public-editor] .dialog-close { width:40px; height:40px; } [data-public-editor] .dialog-footer .ghost-button, [data-public-editor] .dialog-footer .secondary-btn, [data-public-editor] .dialog-footer .primary-btn { min-height:44px; } .editor-special-grid button { min-height:44px; } /* 16px: por debajo de ese tamaño iOS amplía la página al enfocar un campo de texto y deja el editor descuadrado al volver. */ .editor-find-dialog input, .editor-image-dialog input { min-height:44px; font-size:16px; } }