/* ============================================================================ AJUSTE · red de seguridad para que la web quepa en CUALQUIER pantalla ---------------------------------------------------------------------------- No cambia el diseño: solo evita que algo se salga a lo ancho (que es lo que provoca el scroll horizontal y el «zoom raro» en los móviles). Va después de tema.css en todas las páginas. ============================================================================ */ /* 1. Nada puede ser más ancho que la pantalla. El scroll horizontal se corta en , no en : si se pone en el body, el body pasa a ser el contenedor de scroll y deja de dispararse el IntersectionObserver (lección del 3D de la portada). */ html { overflow-x: hidden; } body { min-width: 0; } /* 2. Medios y lienzos: nunca más anchos que su hueco */ img, svg, video, canvas, iframe { max-width: 100%; } img, video { height: auto; } /* 3. Palabras y enlaces largos (URLs de los legales, correos, códigos) parten línea en vez de estirar la caja */ p, li, td, th, h1, h2, h3, h4, blockquote, summary, label, .piedra { overflow-wrap: break-word; } a { overflow-wrap: anywhere; } /* 4. Barras de navegación: si los enlaces no caben en una línea, la barra crece hacia abajo en vez de desbordarse por la derecha */ nav .cont { flex-wrap: wrap; min-height: 56px; height: auto !important; row-gap: 4px; } nav .enlaces { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; } /* 5. Tablas anchas (panel): el scroll va DENTRO de su envoltorio, no en la página entera */ .envoltorio { overflow-x: auto; max-width: 100%; width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; } .envoltorio > table { min-width: 520px; } /* los contenedores en rejilla/flex necesitan min-width:0 o sus hijos anchos los estiran (es lo que hacía desbordar la tabla del panel en el móvil) */ .cont, .tarjeta, main, section { min-width: 0; } /* 6. Formularios: los campos se adaptan al ancho disponible. Los