) que CoffeeCup inserta para * alinear contenido. Ese esquema asume una ventana >=1280px y no puede * reflotar en pantallas angostas. * * En vez de reescribir cada una de las ~250 páginas, esta hoja se enlaza * DESPUÉS de todas las hojas heredadas (ver script de cabecera) y sobreescribe * ese mismo conjunto de clases para que el layout sea fluido. Debe cargarse * al final del para ganar en cascada sin depender solo de !important. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* --------------------------------------------------------------------- * 1. Contenedores raíz de los 8 módulos de layout CoffeeCup del sitio * (uno por hoja en includes/CSSLayouts/*.css). Antes: min-width fijo * (p.ej. 1280px en innerPageLayout) que impide encoger bajo ese punto. * ------------------------------------------------------------------- */ div.innerPageLayout, div.indexPageLayout, div.IndicadorPlusEdos, div.IndicadoresPlusEdos, div.ForIndicadoresPHP, div.ForIndicadoresPHP2, div.about_layout, div.content_section, div.footer_layout, div.showcase_section { width: 100% !important; min-width: 0 !important; max-width: 100%; } /* --------------------------------------------------------------------- * 2. Todas las cajas "_layout" (las que cargan el ancho fijo en px). * max-width:100% deja que el valor "width" original siga aplicando * como preferencia, pero nunca desborda al contenedor padre. * ------------------------------------------------------------------- */ [class*="_layout"] { max-width: 100%; } /* Por debajo de este punto (el min-width original de CoffeeCup) se apila todo a una columna en vez de depender solo del reflow de floats. */ @media (max-width: 900px) { [class*="_layout"] { width: 100% !important; max-width: 100% !important; float: none !important; } } /* --------------------------------------------------------------------- * 3. Cajas de posicionamiento absolutas que CoffeeCup inserta inline: *

... * Sacan el contenido del flujo normal y fijan su ancho en px. * El patrón exacto autogenerado siempre es "position: absolute; width:" * seguido del valor — no coincide con los estilos que colorbox aplica * en tiempo real (ese usa position/width en llamadas .css() separadas). * * Se usa position:relative (no static): varias páginas de sd/ anidan * dentro de estas cajas un submenú propio con su propio * position:absolute;top:NNpx (p.ej. FM_CSS_CSSMenu9_lc) que depende de * que ALGÚN ancestro sea "positioned" para anclarse correctamente. Con * static ese submenú pierde su referencia y salta a la esquina superior * de toda la página; relative conserva el mismo comportamiento de flujo * sin destruir esa referencia. * ------------------------------------------------------------------- */ div[style*="position: absolute; width:"] { position: relative !important; top: auto !important; left: auto !important; width: auto !important; max-width: 100% !important; } /* --------------------------------------------------------------------- * 3a. Alturas fijas heredadas del hack de IE6 en cada caja "_design" * (min-height:NNNpx; height:auto!important; height:NNNpx;). Antes, * con las cajas de posicionamiento en position:absolute, ese alto fijo * compensaba el espacio que las cajas absolutas no ocupaban en el * flujo normal. Ahora que esas cajas vuelven al flujo (regla 3), el * alto fijo ya sobra y solo deja huecos en blanco — se fuerza auto. * ------------------------------------------------------------------- */ [class*="_design"] { height: auto !important; min-height: 0 !important; } /* --------------------------------------------------------------------- * 3b. Relleno horizontal fijo en las cajas "_design" (p.ej. * navigation_centered_design: 160px de cada lado; row_1_design: 118px). * En un viewport angosto ese relleno por sí solo puede consumir todo * el ancho disponible. * * OJO — el intento anterior aplicaba el mismo relleno a TODA caja * "_design", y los layouts de CoffeeCup anidan esas cajas en unos 7 * niveles (wrapper > middle > middle_xtdalignwrapper > row_2 > * row_2_xtdalignwrapper > column_3 ...). Con 12px por lado en cada * nivel eso restaba 7 x 24 = 168px: en un teléfono de 360px la * columna de contenido quedaba en ~168px útiles, que es la razón de * que las tablas se vieran recortadas a la mitad del ancho de la * pantalla y no solo por su propio ancho. * * Ahora el relleno se anula en toda la cadena estructural y se * restituye UNA sola vez, en las cajas hoja que de verdad contienen * texto o tablas. Los nombres siguen el patrón * "{modulo}_{caja}_design" en las 8 hojas de includes/CSSLayouts/, * así que el selector por subcadena cubre los 8 módulos. * ------------------------------------------------------------------- */ @media (max-width: 900px) { [class*="_design"] { padding-left: 0 !important; padding-right: 0 !important; } [class*="_column_"][class*="_design"], [class*="_copyright_design"], [class*="_navigation_centered_design"], [class*="_footer_centered_design"], [class*="_top_navigation_design"], [class*="_search_design"] { padding-left: 12px !important; padding-right: 12px !important; } } /* --------------------------------------------------------------------- * 3c. El recorte heredado que hacía invisible todo lo desbordado. * * CSSLayouts.css:25 aplica "overflow:hidden" a TODA caja interna de * layout (.cssLO > .cssLI:first-child). En 2012 eso solo servía para * evitar el colapso de márgenes del box model y contener floats, con * un viewport de >=1280px donde nada se desbordaba nunca. * * En un viewport angosto ese mismo overflow:hidden es el que recorta * el contenido al ancho de la columna y — lo importante — impide que * cualquier scroll horizontal sea alcanzable: el contenido no se ve * Y tampoco se puede arrastrar hacia él. Es la causa raíz común del * menú de estados invisible en vertical y de las tablas cortadas. * * display:flow-root sustituye el hack: crea el mismo contexto de * formato en bloque (no colapsa márgenes, contiene floats) pero SIN * recortar. Se limita a móvil para no alterar el escritorio. * ------------------------------------------------------------------- */ @media (max-width: 900px) { .cssLO > .cssLI:first-child { overflow: visible; display: flow-root; } } /* --------------------------------------------------------------------- * 3d. Divs de limpieza de floats que en realidad llevan contenido. * * CSSLayouts.css fija "height:0" a .cssLClearR porque son divs vacíos * cuyo único propósito es hacer clear:both entre filas del layout. * Pero el HTML de 2012 metió por error contenido real dentro de uno * de ellos: el aviso de navegadores recomendados del pie vive en *

...

. * * Con height:0 ese aviso se desborda de su caja y se encima con el * texto de copyright. Antes no se notaba porque el overflow:hidden * heredado (ver 3c) lo recortaba por completo — es decir, el aviso * llevaba tiempo invisible. Al quitar ese recorte reaparece, y hay * que darle altura propia. * * :not(:empty) distingue los dos casos sin tocar el HTML: los divs * de limpieza reales están genuinamente vacíos y conservan height:0; * solo el que lleva contenido recupera su altura natural. * ------------------------------------------------------------------- */ .cssLClearR:not(:empty), .cssLClearC:not(:empty) { height: auto; } /* --------------------------------------------------------------------- * 4. Medios e imágenes fluidas * ------------------------------------------------------------------- */ img { max-width: 100%; height: auto; } /* --------------------------------------------------------------------- * 5. Tablas de datos (fichas de indicadores, listados de municipios). * * Las fichas de sd/ anidan tablas: una externa de encuadre * () que contiene la tabla real * de datos (

) más su tabla de notas al * pie (width="760"). El intento anterior aplicaba * display:block+overflow-x:auto a TODAS ellas, lo que creaba * contenedores de scroll anidados y dejaba la tabla interna con su * ancho fijo en px dentro de otra que también quería desplazarse: * en la práctica ninguna terminaba desplazándose. Sumado al * overflow:hidden del ancestro (regla 3c) el resultado era el que se * ve en móvil: columnas de valores cortadas y sin scroll alguno. * * Ahora el rol queda repartido: SOLO la tabla más externa actúa como * ventana de desplazamiento, y las anidadas vuelven a comportarse * como tablas normales. "table table" selecciona precisamente las de * profundidad >=2, así que la de nivel 1 es la única que queda como * bloque desplazable. * * Tampoco se usa ya white-space:nowrap: forzaba cada etiqueta de * indicador ("Tasa de Asistencia de la población en edad de...") a * una sola línea y por sí solo multiplicaba el ancho a desplazar. * Dejando que envuelva, la tabla cabe casi entera en el teléfono. * ------------------------------------------------------------------- */ @media (max-width: 768px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Tablas anidadas: tabla normal otra vez. Se neutraliza su width fijo en px para que se ajusten al teléfono, con un piso de legibilidad por debajo del cual sí conviene desplazar (5 columnas aplastadas en 336px serían ilegibles). En horizontal (~760px) caben completas y no aparece scroll. */ table table { display: table; overflow: visible; width: 100% !important; min-width: 520px; } /* El scroll tiene que VERSE: en Android la barra superpuesta solo aparece durante el gesto, así que el usuario no tenía forma de saber que había contenido a la derecha. */ table::-webkit-scrollbar { height: 8px; } table::-webkit-scrollbar-track { background: rgba(7, 103, 153, 0.08); border-radius: 4px; } table::-webkit-scrollbar-thumb { background: rgba(7, 103, 153, 0.55); border-radius: 4px; } } /* --------------------------------------------------------------------- * 5a. Tablas usadas como LAYOUT, no como datos: las que encuadran los * desplegables de entidad/municipio (js/site-nav.js les pone la * clase). Aquí desplazar sería la solución equivocada — el