/* ============================================================ PATAGONIA LACUSTRE · AVISO DE LECTURA GUARDADA (2-sep-2026) Se muestra sólo cuando /clima está pintando la última lectura buena guardada en localStorage porque la API de Open-Meteo no responde. Lo enciende /js/clima-page.v4.js agregando .clima-page--guardado a
e inyectando .clima-guardado dentro de #clima-hero-body. ARCHIVO NUEVO, NO UNA EDICIÓN: clima.v2.css se sirve con cache immutable de un año Y lo comparte index.html. Bajar una regla nueva ahí obligaba a subirlo a v3 y a tocar el home, que no tiene nada que ver con esto. Va como aparte, el último del de clima.html: no pisa nada, sólo agrega. El pedido era que el dato viejo se distinga DEL FRESCO DE UN VISTAZO, así que hay tres señales redundantes y ninguna exige leer letra chica: 1. cinta dorada arriba del número grande, 2. franja rayada al pie del hero (se ve a distancia), 3. la escena viva en escala de grises: el color se va con el dato. Contraste verificado: INK #153B38 sobre dorado #D99A2B = 5.04:1 (AA para texto normal); crema #FAF0D6 sobre INK = alto. ============================================================ */ /* ===== 1. LA CINTA ===== */ .clima-guardado { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin: 0 0 1.5rem; padding: 0.9rem 1.1rem; border-radius: 4px; background: var(--color-dorado); color: var(--color-bosque-profundo); box-shadow: 0 6px 18px rgba(21, 59, 56, 0.18); } .clima-guardado__icono { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; } .clima-guardado__texto { display: flex; flex-direction: column; gap: 0.15rem; /* Se lleva el espacio sobrante y empuja el botón a la derecha; bajo 480px la base de 16rem lo manda a su propia línea. */ flex: 1 1 16rem; } .clima-guardado__titulo { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; font-feature-settings: "ss01", "ss02"; } .clima-guardado__edad { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; line-height: 1.45; } .clima-guardado__btn { flex: 0 0 auto; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; padding: 0.55rem 1.3rem; border-radius: 50px; border: 2px solid var(--color-bosque-profundo); background: var(--color-bosque-profundo); color: var(--color-crema); cursor: pointer; transition: all 0.3s var(--ease); } .clima-guardado__btn:hover { background: var(--color-bosque); border-color: var(--color-bosque); transform: translateY(-2px); } /* ===== 2. FRANJA RAYADA AL PIE DEL HERO ===== .clima-hero ya es position:relative y no tiene ::after propio en clima.v2.css. z-index alto para quedar sobre .escena. */ .clima-page--guardado .clima-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient( 45deg, var(--color-dorado) 0 12px, var(--color-sepia-profundo) 12px 24px ); pointer-events: none; z-index: 4; } /* ===== 3. LA ESCENA VIVA SE APAGA ===== La cuenca teñida por el clima real es lo que le da el «esto está pasando ahora» a la página. Con dato viejo pierde el color: es la señal que se lee sin leer nada. */ .clima-page--guardado .escena { filter: grayscale(0.75); } /* ===== 4. PIE DE ACTUALIZACIÓN ===== Deja de ser metadato gris y pasa a INK: es parte del aviso. #153B38 sobre el papel del sitio = 10.6:1. */ .clima-page--guardado .clima-actualizado { color: var(--color-bosque-profundo); font-weight: 600; } @media (max-width: 480px) { .clima-guardado { gap: 0.7rem; } .clima-guardado__btn { width: 100%; } } /* Sin animaciones que apagar acá: el aviso no anima nada. La transición del botón es de color y transform en :hover, que el bloque global de prefers-reduced-motion de styles.css ya cubre. */