/* AJUSTES MOVIL 13-oct-2026 - grupo D5: AVISO DE SCROLL LATERAL EN LAS TABLAS. Solo WordPress. Cliente: "Las tablas en mobile no es intuitivo o senal que debe hacer scroll" + aclaracion "el scroll de las tablas es hacia el lado" (horizontal). ====================== QUE PASA DE VERDAD (medido con Playwright) ====================== Afecta a las 4 fichas de cemento (225 gris HE, 226 blanco HE, 229 blanco GU, 230 gris GU), las unicas paginas servidas con .ctable-wrap (0 en home, sostenibilidad, contacto, nosotros, prensa y concreto). Hay DOS tablas por ficha: - f02d4f1 "Compara nuestros cementos" (5 col x 4 fil), envoltorio b9b6454. - 5a6594e "Resumen tecnico" (2 col x 5 fil), envoltorio cb7978b, dentro de la pestana "Caracteristicas tecnicas" (oculta al cargar). CORRECCION AL DIAGNOSTICO DE PARTIDA: NO es verdad que no haya contenedor de scroll. El prototipo ya trae `.argos-native.argos-native .ctable-wrap{overflow-x:auto}` y funciona: medido en b9b6454, clientWidth / scrollWidth = 348 / 696 a 390 px y 333 / 696 a 375 px, overflow-x computado = auto. La tabla YA se desplaza dentro de su caja. El "overflow-x: visible" que se habia medido es del WIDGET de dentro (f02d4f1), que no es el contenedor de scroll sino su contenido. DE DONDE SALE EL 640 (el dato raro): no es la segunda ley del porte (anchos congelados), es una regla del propio prototipo: `.ctable{min-width:640px}`. En el prototipo esa clase iba en el ; al portar, Elementor la dejo en el DIV del widget (f02d4f1 .ctable), que por eso mide 640 px dentro de un envoltorio de 348. Da igual a efectos visuales, porque la
de dentro mide MAS que 640 por contenido propio (696 / 700 / 705 / 708 px segun la ficha), y es ella la que manda el ancho de scroll. No se toca: ese min-width es la intencion del diseno (la tabla no debe estrujarse por debajo de 640) y para la tabla del "Resumen tecnico" si cae en el
(ahi el HTML es
) y es lo que la mantiene legible a 640 en vez de aplastarse a 298. LA PAGINA NO DESBORDA A LO ANCHO: document.documentElement.scrollWidth == innerWidth en las 4 fichas a 1440 / 1024 / 768 / 390 / 375. Lo unico que sobresale del viewport esta DENTRO de .ctable-wrap (o sea, en su caja de scroll, que es lo correcto). Por eso aqui no hay nada que arreglar de desbordes de pagina. (Dos salvedades ajenas a este defecto, reportadas y no tocadas: el blob decorativo 759e781 del CTA y el hero fhero dc1e164 a 768 / 375, ambos recortados por el overflow-x:hidden del body.) ====================== LO QUE SI FALTABA ====================== 1. La SENAL. En movil la barra de scroll nativa esta oculta hasta que tocas, asi que la tabla parecia cortada, no desplazable. Es exactamente la queja del cliente. 2. Que el gesto no arrastre la pagina al llegar al tope (overscroll-behavior-x). 3. Alcance por teclado: una caja con scroll sin tabindex no se puede desplazar con el teclado (WCAG 2.1.1). Senal elegida: DOS a la vez, porque una sola no basta. - Desvanecido en el borde por el que queda contenido (mask-image): afordancia continua, acompana al dedo y desaparece sola al llegar al final. Se pinta en el lado izquierdo tambien cuando ya se ha desplazado, para que se vea que se dejo algo atras. - Aviso de texto "Desliza para ver mas" sobre la tabla: explicito, en el idioma del cliente, y se oculta en cuanto se llega al final. Va ENCIMA de la tabla (no debajo) para que se lea antes de mirarla, y no tapa ninguna celda. Se descarto fiarse de la barra nativa (oculta en movil) y se descarto el truco CSS puro de "scroll shadows" con background-attachment:local porque la
lleva background:#fff propio y taparia los degradados. POR QUE CSS Y NO NATIVO DE ELEMENTOR: Elementor no tiene control para "avisa de que hay scroll". Lo mas parecido seria meter el aviso como widget de texto en cada ficha (editable a raton), pero tendria que aparecer y desaparecer segun el ancho Y segun la posicion del scroll, y eso no se puede expresar con controles. Ademas no se toca _elementor_data de ningun post: el aviso lo inyecta 74-tablas-scroll-mobile.js, asi que el cambio es reversible borrando estos dos ficheros. ACOTADO: aqui no se usa NINGUN id de Elementor, solo las clases de componente .ctable-wrap / .ctable, que existen unicamente en las fichas de cemento. Aun asi se repite la clase raiz .argos-native para ganarle a la regla base del prototipo `.argos-native.argos-native .ctable-wrap` (0,3,0) sin !important: 3 repeticiones = (0,4,0). Los bloques @media van de mas ancho a mas estrecho. */ /* --- 1. El contenedor de scroll: se refuerza, no se reinventa --------------------------- overflow-x:auto ya lo pone el prototipo. Aqui solo se anade lo que falta para movil: - overscroll-behavior-x:contain -> al llegar al tope de la tabla el gesto NO sigue arrastrando la pagina (ni dispara el "atras" por gesto del navegador). - -webkit-overflow-scrolling:touch -> inercia en iOS. - scroll-padding-inline para que el foco de teclado no quede debajo del desvanecido. No se tocan overflow, ancho, alto, borde ni sombra: la geometria medida del porte se queda como esta en los 5 anchos. */ .argos-native.argos-native.argos-native .ctable-wrap{ overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scroll-padding-inline:0 4rem; } /* --- 2. Foco visible cuando se alcanza con el teclado ----------------------------------- El JS pone tabindex="0" + role="region" SOLO cuando la tabla desborda de verdad, asi que en escritorio (1440 / 1024, sobra = 0 px) no se anade ninguna parada de tabulador inutil. */ .argos-native.argos-native.argos-native .ctable-wrap[data-d5-scroll]:focus-visible{ outline:2px solid var(--lima); outline-offset:3px; } /* --- 3. El desvanecido del borde -------------------------------------------------------- Se hace con mask-image sobre el propio contenedor de scroll: la mascara se aplica a la CAJA (su borde), no al contenido, asi que el degradado se queda quieto en el borde mientras la tabla pasa por debajo. Un ::after absoluto no serviria: dentro de un contenedor con scroll se desplazaria con el contenido. Y no hace falta envolver nada en un DIV nuevo, que es lo que romperia las reglas `.e-con > .e-con` de Elementor y podria cambiar el ancho medido. El JS pone data-d5-der cuando queda tabla a la derecha y data-d5-izq cuando ya se dejo tabla a la izquierda; al llegar al final el degradado derecho desaparece solo. El ANCHO del desvanecido no es fijo: lo pone el JS en --d5-der / --d5-izq como min(64 px, pixeles que quedan por ese lado). Asi a 390 px (quedan 348) el degradado es de 64 px, pero a 768 px en la ficha de blanco HE (quedan solo 19) es de 19 px y no emborrona media columna por 19 px de nada. 15 % de opacidad en el canto: se insinua, no se borra. Efecto colateral asumido: el degradado tambien desvanece el borde de 1 px y la sombra (0 30px 60px -46px) en esos 64 px. Es deseable: el canto que se disuelve ES la senal de "aqui sigue". */ .argos-native.argos-native.argos-native .ctable-wrap[data-d5-der]{ -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--d5-der,64px)),rgba(0,0,0,.15) 100%); mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--d5-der,64px)),rgba(0,0,0,.15) 100%); } .argos-native.argos-native.argos-native .ctable-wrap[data-d5-izq]{ -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.15) 0,#000 var(--d5-izq,64px),#000 100%); mask-image:linear-gradient(to right,rgba(0,0,0,.15) 0,#000 var(--d5-izq,64px),#000 100%); } .argos-native.argos-native.argos-native .ctable-wrap[data-d5-izq][data-d5-der]{ -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.15) 0,#000 var(--d5-izq,64px),#000 calc(100% - var(--d5-der,64px)),rgba(0,0,0,.15) 100%); mask-image:linear-gradient(to right,rgba(0,0,0,.15) 0,#000 var(--d5-izq,64px),#000 calc(100% - var(--d5-der,64px)),rgba(0,0,0,.15) 100%); } /* --- 4. El aviso de texto --------------------------------------------------------------- Lo inserta el JS como hermano ANTERIOR del .ctable-wrap, dentro del mismo contenedor de Elementor. ===== CORRECCION 13-oct-2026 (E1): EL AVISO YA NO MUEVE LA PAGINA ===== DEFECTO MEDIDO: el aviso pasaba de display:none a display:flex, o sea que su caja ENTRABA Y SALIA DEL FLUJO. Al llegar al final del desplazamiento desaparecia, dejaba de ocupar sitio, y la tabla y TODO lo que va debajo subian 14,97 px; al volver a la izquierda bajaban otra vez. Medido (top respecto al documento) en las 4 fichas a 390 y 375 px, 8 de 8 casos: tabla -14,97 px, lo de debajo -14,97 px. Y con la pestana "Caracteristicas tecnicas" abierta hay DOS tablas con aviso, asi que los dos saltos se suman: la tabla comparativa y el pie de pagina se movian -29,94 px y el alto del documento caia 29-30 px. El usuario esta leyendo la tabla y el contenido se le mueve bajo el dedo: un aviso asi es peor que no tener aviso. TECNICA ELEGIDA: RESERVAR EL HUECO SIEMPRE Y JUGAR SOLO CON opacity + visibility. Dos atributos en vez de uno, con esta invariante que garantiza el JS (hueco ⊇ ver): data-d5-hueco -> la tabla desborda: el aviso ES item del flujo y OCUPA sus ~15 px, pase lo que pase con el scroll. Se pone una vez y no se quita. data-d5-ver -> ademas queda tabla a la derecha: el aviso SE PINTA. Al llegar al final solo se apaga data-d5-ver: cambian opacity y visibility, que NO son propiedades de maquetacion, asi que el hueco no se mueve ni un pixel. Verificado despues: 0,00 px en inicio / mitad / tres cuartos / final / vuelta, en las 4 fichas a 390 y 375. POR QUE NO LAS OTRAS DOS OPCIONES (medido, no a ojo): - SACARLO DEL FLUJO CON position:absolute sobre el borde de la tabla. Vale para la tabla comparativa (b9b6454), que tiene 32 px de aire libre por encima en las 4 fichas: ahi cabria un aviso de 15 px sin tapar nada. Pero NO vale para la del "Resumen tecnico" (cb7978b): el aire libre por encima es 0 px (su padre f3b8072 es flex con gap 0 y el wrap no tiene margen ni relleno superior), asi que el aviso caeria ENCIMA de la primera fila, que mide 52,69 px y es la CABECERA de la tabla. Taparia datos, que es justo lo que hay que evitar, y obligaria a tratar cada tabla distinto. Descartada. - FUNDIRLO CON EL DEGRADADO que ya existe (seccion 3). Es gratis en maquetacion, pero sacrifica el texto explicito "Desliza para ver mas", que es literalmente lo que pidio el cliente ("no es intuitivo o senal que debe hacer scroll"); el degradado por si solo ya estaba y no basto. Descartada: el degradado SE QUEDA, pero como refuerzo, no en lugar del aviso. Reservar el hueco es la unica de las tres que da 0 px en las dos tablas, no tapa ninguna celda y conserva el texto. El precio es 15 px de aire en blanco encima de la tabla cuando ya estas al final; no es un precio nuevo: ese hueco es exactamente el que la pagina ya tiene desde el primer pintado (CLS de carga medido = 0 en las 4 fichas a 390 y 375), solo que ahora se queda quieto en vez de abrirse y cerrarse. Mientras NO haya desborde no hay ninguno de los dos atributos: display:none, el aviso no es ni item del flex del padre y a 1440 / 1024 / 768 la pagina queda EXACTAMENTE igual que antes (el gap del padre no cuenta los hijos con display:none). Tipografia: la mono del sistema de diseno a 0.72rem, igual que la primera columna de la tabla, para que se lea como parte del componente y no como un pegote. NOTA: no es una "micro-etiqueta" decorativa, es una instruccion funcional que pidio el cliente; va en minuscula normal, sin letter-spacing exagerado. */ .argos-native.argos-native.argos-native .ctable-aviso{ display:none; } /* HUECO RESERVADO: la caja existe y mide lo mismo este el aviso visible o no. Lo unico que cambia al llegar al final son opacity y visibility, que no reflujan nada. */ .argos-native.argos-native.argos-native .ctable-aviso[data-d5-hueco]{ display:flex; align-items:center; justify-content:flex-end; gap:.4rem; margin:0; font-family:var(--body); font-size:.78rem; line-height:1.2; color:var(--tinta-soft); -webkit-user-select:none; user-select:none; /* visibility ademas lo saca del arbol de accesibilidad y de los clics mientras no se ve */ opacity:0; visibility:hidden; transition:opacity .18s linear; } .argos-native.argos-native.argos-native .ctable-aviso[data-d5-hueco][data-d5-ver]{ opacity:1; visibility:visible; } /* la flecha se mueve un poco para que el ojo la cace; 6 px, dos segundos, suave */ .argos-native.argos-native.argos-native .ctable-aviso__flecha{ display:inline-block; font-size:1.05em; line-height:1; color:var(--navy); animation:d5-empuja 2s cubic-bezier(.16,1,.3,1) infinite; } /* apagada mientras el aviso no se ve: el hueco sigue reservado, pero no se anima lo invisible */ .argos-native.argos-native.argos-native .ctable-aviso[data-d5-hueco]:not([data-d5-ver]) .ctable-aviso__flecha{ animation:none; } @keyframes d5-empuja{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} } /* quien pida menos movimiento no ve la animacion ni el fundido: el aviso aparece y desaparece de golpe, y el hueco y el degradado siguen ahi igual. */ @media (prefers-reduced-motion:reduce){ .argos-native.argos-native.argos-native .ctable-aviso__flecha{ animation:none; } .argos-native.argos-native.argos-native .ctable-aviso[data-d5-hueco]{ transition:none; } }