/* ============================================================================ modulo.css — cáscara corporativa para los módulos que traen su propio estilo. POR QUÉ EXISTE. Los tres visores de mapa y el visor SATURN son exportaciones con su maqueta y su paleta propias (Overpass, fondo #252525, acento azul #4393c3 en SATURN y verde limón #d2e962 en los visores de mapa). Reconvertirlos entero no vale el riesgo: SATURN pesa 1,54 MB con los datos incrustados y cada visor de mapa repite su maqueta dentro de cinco @media. Esta hoja hace lo acotado y de bajo riesgo: pone el MISMO banner superior e inferior que el resto del sitio, en claro, y deja intacto el cuerpo del visor. Se enlaza DESPUÉS de la hoja propia de cada módulo, para ganar por orden de cascada sin necesidad de !important salvo donde el estilo original usa selectores más específicos. La paleta es la medida sobre solutiva.com: texto #1a1a1a, secundario #555555, acento verde #8caa20, gris de sección #f5f5f5, esquinas rectas. ============================================================================ */ :root{ --tx:#1a1a1a; --tx2:#555555; --tx3:#8a8a8a; --ac:#8caa20; --ac-dark:#5f7417; --bg:#ffffff; --bg2:#f5f5f5; --linea:#e3e3e3; --dark:#1a1a1a; } /* ---------- banner superior ---------- El MISMO encabezado de presupuesto/ y evaluacion/: logo de color sobre fondo claro, "TODOS LOS EJEMPLOS" dentro del encabezado y sin banda de miga. Esos modulos lo toman del styles.css de la raiz; los visores de mapa no lo enlazan, asi que aqui se replican sus mismas medidas (logo 46 px, alto 68 px, ancho 1180). El export declara header{display:flex;height:70px} en cada @media: se anula. */ body > header{ position:sticky !important; top:0; z-index:1100; /* sobre los paneles de Leaflet (400+) */ display:block !important; height:auto !important; width:100% !important; background:var(--bg) !important; color:var(--tx) !important; border:0 !important; border-bottom:1px solid var(--linea) !important; box-shadow:none !important; padding:0 !important; margin:0 !important; min-height:0 !important; font-family:"Montserrat",-apple-system,"Segoe UI",Arial,sans-serif; line-height:1.6; } /* El export declara html,body{overflow-x:hidden}. Eso convierte a body en contenedor de desplazamiento y el sticky queda atado a el, que no se desplaza: el encabezado se iba con la pagina. overflow-x:clip recorta igual el exceso lateral sin crear contenedor. */ html, body{ overflow-x:clip !important; overflow-y:visible !important; } body > header .in{ max-width:1180px; margin:0 auto; padding:0 18px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; min-height:68px; } body > header #solutiva-logo{ display:block; height:46px !important; width:auto !important; max-width:100%; } body > header .header-nav{ display:flex; gap:26px; flex-wrap:wrap; } body > header .header-anchor{ font-family:"Montserrat",-apple-system,"Segoe UI",Arial,sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.14em !important; line-height:1.6; color:var(--tx2) !important; text-decoration:none !important; padding:6px 0; border-bottom:2px solid transparent; transition:.15s; } body > header .header-anchor:hover{ color:var(--tx) !important; border-bottom-color:var(--ac-dark); text-decoration:none !important; } body > header .header-anchor:focus-visible{ outline:3px solid var(--ac-dark); outline-offset:3px; } @media (max-width:560px){ body > header{ position:static !important; } body > header .in{ padding:8px 16px; gap:4px 0; min-height:0; } body > header .header-nav{ gap:16px; flex-wrap:nowrap; width:100%; } body > header .header-anchor{ font-size:12px !important; letter-spacing:.06em !important; white-space:nowrap; padding:4px 0; } } /* ---------- banner inferior ---------- */ body > footer{ background:var(--dark) !important; color:#9a9a9a !important; font-family:"Montserrat",-apple-system,"Segoe UI",Arial,sans-serif !important; font-size:12px !important; padding:28px 0 26px !important; margin:0 !important; display:block !important; } body > footer > *{ max-width:1180px; margin:0 auto; padding:0 24px; background:transparent !important; border:0 !important; } body > footer a, body > footer .footer-anchor{ color:#9a9a9a !important; text-decoration:none; font-size:12px !important; } body > footer a:hover, body > footer .footer-anchor:hover{ color:var(--ac) !important; } /* ---------- el body de los visores de mapa es un flex centrado ---------- Los tres exports traen body{display:flex;justify-content:center}. Con eso el banner, la barra de vuelta y el pie son ITEMS de ese flex y solo toman el ancho de su contenido: el encabezado salia de 452 px centrado en una ventana de 1300. Hay que declararlos de ancho completo y sin encogerse. Detectado midiendo con getComputedStyle, no a ojo. */ body > header, body > .nota-ref, body > footer{ width:100% !important; flex:0 0 auto !important; align-self:stretch; } /* y el contenido interno vuelve a centrarse dentro de su propio ancho maximo */ /* Sin box-sizing:border-box estos bloques median 100% MAS los 48 px de padding, y como los exports de mapa traen overflow-x:hidden esos 48 px no se podian desplazar: se perdian. Se acota a estos selectores y no se declara global, para no alterar el calculo de ancho del resto del export. */ body > header, body > header *, body > .nota-ref, body > .nota-ref *, body > footer, body > footer *{ box-sizing:border-box; } body > header .in, body > .nota-ref .in, body > footer > *{ width:100%; } /* ---------- nota de material referencial ---------- Va en TODAS las hojas del visor, justo bajo el banner. El visor muestra formato de entrega con datos de estudios anteriores, y quien llegue por un enlace directo a un modulo tiene que leerlo ahi mismo, no en el indice. */ .nota-ref{ background:#fbf6e4; border-top:1px solid #ece2bf; border-bottom:1px solid #ece2bf; font-family:"Montserrat",-apple-system,"Segoe UI",Arial,sans-serif; } .nota-ref .in{ max-width:1180px; margin:0 auto; padding:9px 24px; font-size:12.5px; line-height:1.5; color:#5c5433; } .nota-ref b{ color:#3d3720; } @media (max-width:560px){ .nota-ref .in{ padding:8px 16px; font-size:12px; } } /* ============================================================================ TEMA CLARO DE LOS VISORES DE MAPA Los tres exports de qgis2web traen su tema oscuro completo (fondo rgb(29,29,29), .project-title-container #252525, .category-title #363636, #copyright-section negro) y lo REPITEN dentro de cinco @media cada uno. Corregirlo breakpoint por breakpoint son quince bloques por archivo; se hace aqui una sola vez porque esta hoja se enlaza DESPUES de la propia de cada modulo, asi que gana por orden de cascada. Va con !important solo donde el original usa selectores mas especificos o vive dentro de un @media. ============================================================================ */ body{ background:var(--bg) !important; color:var(--tx) !important; } .project-title-container{ background:var(--bg2) !important; color:var(--tx) !important; border-bottom:1px solid var(--linea) !important; } .project-title-container *{ color:var(--tx) !important; } .category-title{ background:var(--bg2) !important; color:var(--tx) !important; border-bottom:1px solid var(--linea) !important; } #bottom-result1,#bottom-result2,#bottom-result3, #bottom-result1 *,#bottom-result2 *,#bottom-result3 *{ color:var(--tx) !important; } .total-container{ background:var(--bg2) !important; color:var(--tx) !important; } #left-info,#left-info *{ color:var(--tx) !important; } /* Los contenedores y paneles del export, para que no queden islas oscuras */ .leaflet-container{ background:#eceae5 !important; } .leaflet-control-layers,.leaflet-bar,.leaflet-bar a, .leaflet-control-layers-expanded{ background:var(--bg) !important; color:var(--tx) !important; border-color:var(--linea) !important; } .leaflet-bar a:hover{ background:var(--bg2) !important; } .leaflet-popup-content-wrapper,.leaflet-popup-tip{ background:var(--bg) !important; color:var(--tx) !important; } /* Esquinas rectas: el export usa 4 y 5 px */ .project-title-container,.category-title,.total-container, .leaflet-control-layers,.leaflet-bar{ border-radius:0 !important; } /* ============================================================================ DUPLICADOS Y PANELES VACIOS DE LOS EXPORTS DE MAPA Tres defectos que venian del export y que el usuario detecto en pantalla: 1. SELECTOR DE CAPAS DUPLICADO. El export trae DOS controles para las mismas capas: la columna de botones .btn-list, que es la propia del modulo, con muestra de color y estado presionado (onclick -> toggleLayerVisibility), y encima del mapa el control por omision de la libreria ol-layerswitcher, que la crea en tiempo de ejecucion. Se oculta el de la libreria y se conserva el propio: se pierde cero funcion, porque la columna de botones cubre tambien el mapa base. 2. PANELES DE GRAFICO VACIOS. En Etapa 2 los div chartOne/chartTwo/chartThree existen y NADIE los dibuja: cero llamadas a Plotly en el archivo. En Mapa TEL es al revés, hay ocho llamadas a createChart(chartOne, ...) y ningun elemento con ese id, de modo que cada llamada lanza un error de referencia. En los dos casos el resultado es el mismo: cajas vacias. Se ocultan; no se inventan graficos con datos de otro estudio. 3. DOS PIES APILADOS. El export traia su propio