:root { --ink:#eff7ff; --muted:#a9bed0; --navy:#061523; --panel:#0b2033; --line:rgba(190,220,240,.18); --actual:#d55e00; --forecast:#009e73; --rain-actual:#56b4e9; --rain-forecast:#e69f00; --sun:#67d7f0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--navy); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 74% -12%,#143956 0,transparent 38rem),linear-gradient(#071827,#061523 68%); }
button { font:inherit; }
.app-header { position:relative; min-height:72px; display:grid; grid-template-columns:52px 1fr 52px; align-items:center; max-width:1180px; margin:auto; padding:8px 18px; border-bottom:1px solid var(--line); }
.header-icon { border:0; background:transparent; color:#c7d7e5; font-size:25px; cursor:pointer; min-height:42px; }
.title-block { display:grid; justify-items:center; gap:2px; color:var(--ink); text-decoration:none; text-align:center; }
.title-block strong { font-size:clamp(1.05rem,3vw,1.45rem); letter-spacing:-.025em; }
.title-block span { color:#94abc0; font-size:.68rem; letter-spacing:.08em; }
.site-nav { position:absolute; z-index:5; top:64px; left:18px; display:grid; width:150px; padding:7px; border:1px solid var(--line); border-radius:12px; background:#0d263b; box-shadow:0 16px 32px rgba(0,0,0,.34); }
.site-nav button { padding:10px; border:0; border-radius:8px; background:transparent; color:var(--muted); text-align:left; cursor:pointer; }
.site-nav button.active { background:rgba(103,215,240,.13); color:var(--ink); }
main { width:min(1180px,100%); margin:auto; padding:18px 22px 0; }
.view { display:none; }.view.active { display:block; }
.hidden { display:none!important; }
.location-row { display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--muted); font-size:.9rem; }
.refresh-button { border:1px solid rgba(230,159,0,.65); border-radius:9px; padding:8px 12px; color:#ffda8b; background:rgba(230,159,0,.12); font-weight:700; cursor:pointer; }
.status { margin:10px 0; padding:9px 12px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:rgba(8,26,42,.62); font-size:.84rem; }
.status.error { border-color:rgba(255,122,108,.6); color:#ffd0c8; }
.current-card { display:flex; width:fit-content; max-width:100%; align-items:center; min-height:104px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:linear-gradient(120deg,#183b58,#0b2033); }
.current-main { flex:0 0 auto; padding:10px 18px; }.current-time,.actual-temp,.detail-label,.detail small { color:var(--muted); font-size:.78rem; }.condition-row { display:flex; align-items:center; gap:10px; margin:1px 0 0; }.weather-symbol { font-size:2.7rem; }.weather-icon { width:46px; height:46px; }.current-rain-symbol { position:relative; display:block; width:64px; height:52px; color:#f2f7fc; font-family:Georgia,serif; font-size:46px; line-height:34px; text-shadow:0 1px 6px #02111e; }.current-rain-symbol .rain-cloud { position:absolute; z-index:2; left:7px; top:3px; }.current-rain-symbol i { position:absolute; z-index:3; bottom:0; width:6px; height:12px; border-radius:70%; background:#2d9ff0; box-shadow:0 0 7px rgba(45,159,240,.65); transform:rotate(28deg); }.current-rain-symbol i:nth-of-type(1) { left:18px; }.current-rain-symbol i:nth-of-type(2) { left:32px; }.current-rain-symbol i:nth-of-type(3) { left:46px; }.night-moon { position:absolute; z-index:1; top:-8px; left:-1px; color:#e8e5c7; font-size:26px; line-height:1; text-shadow:0 0 7px rgba(232,229,199,.38); }.current-temperature { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:end; }.temperature { grid-row:1 / span 2; font-size:clamp(3rem,5vw,3.9rem); font-weight:750; line-height:.82; letter-spacing:-.07em; }.condition { grid-column:2; margin:0; font-size:.95rem; font-weight:700; }
.current-details { display:flex; align-items:center; gap:0; padding:8px 0 8px 14px; background:none; }.detail { min-width:112px; min-height:0; padding:3px 16px; border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; }.detail:first-child { border-left:0; }.detail-value { display:block; margin-top:3px; font-size:1.05rem; }.rain-detail { color:#ffda8b; }
.forecast-section { margin-top:24px; }.eyebrow { margin:0 0 2px; color:var(--sun); font-size:.74rem; font-weight:800; letter-spacing:.15em; }.section-heading h1,.section-heading h2,.performance-intro h1 { margin:0; font-size:clamp(1.35rem,4vw,2rem); letter-spacing:-.035em; }.chart-intro,.performance-intro p:last-child { margin:4px 0 10px; color:var(--muted); font-size:.86rem; }
.chart-scroll { overflow-x:auto; padding:4px 0 12px; scrollbar-color:#42657e transparent; }.chart-scroll svg { display:block; max-width:none; }
.temp-grid line { stroke:rgba(164,193,213,.15); stroke-width:1; }.horizontal-grid,.vertical-grid { stroke:rgba(164,193,213,.11); stroke-width:1; }.temp-grid text,.hour-label,.chart-label,.legend text { fill:#aec3d3; font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:12px; }.hour-label { text-anchor:middle; }.temp-axis-label { fill:#f47757; font:700 10px Inter,ui-sans-serif,system-ui,sans-serif; }.temperature-axis-label { fill:rgba(244,119,87,.72); font:600 10px Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:.02em; }.temp-axis-line,.temp-axis-tick line { stroke:rgba(244,119,87,.55); stroke-width:1; }.rain-axis-line,.rain-axis-tick line { stroke:#8aa3b8; stroke-width:1; }.rain-axis-tick text,.rain-axis-label { fill:#a9bed0; font:600 10px Inter,ui-sans-serif,system-ui,sans-serif; }.rain-axis-label { letter-spacing:.02em; }.temperature-line { stroke:#f47757; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }.temperature-dot { fill:#f47757; }.temp-value { fill:#f47757; font:700 11px Inter,ui-sans-serif,system-ui,sans-serif; text-anchor:start; }.hourly-symbol { font:16px "Segoe UI Emoji","Noto Color Emoji",sans-serif; text-anchor:middle; dominant-baseline:middle; }.rain-zero { stroke:#9ab1c3; stroke-width:1.3; }.rain-bar { fill:url(#rain-bar-gradient); }.rain-value { fill:#78c5ff; font:700 11px Inter,ui-sans-serif,system-ui,sans-serif; text-anchor:middle; }.sun-marker line { stroke:#f4c45b; stroke-width:1.35; stroke-dasharray:3 3; }.sun-marker text { fill:#f4c45b; font:600 11px Inter,ui-sans-serif,system-ui,sans-serif; }.day-marker line { stroke:rgba(169,190,208,.26); stroke-width:1; }.day-marker text { fill:#d4e4ef; font:700 11px Inter,ui-sans-serif,system-ui,sans-serif; }.actual-line { stroke:#dc4c3e; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }.forecast-line { stroke:#7698b1; stroke-width:1.8; stroke-dasharray:2 6; stroke-linejoin:round; stroke-linecap:round; }.actual-dot { fill:#dc4c3e; }.forecast-dot { fill:#7698b1; }.actual-point-label { fill:#ff998c; font:700 11px Inter,system-ui,sans-serif; text-anchor:middle; }.forecast-point-label { fill:#91aabd; font:600 10px Inter,system-ui,sans-serif; text-anchor:middle; }.edge-point-label { text-anchor:start; }.actual-rain { fill:#dc4c3e; }.forecast-rain { fill:rgba(118,152,177,.13); stroke:#7698b1; stroke-width:1.25; stroke-dasharray:3 3; }.actual-rain-text { fill:#ff998c; font:700 11px Inter,system-ui,sans-serif; text-anchor:middle; }.forecast-rain-text { fill:#91aabd; font:600 10px Inter,system-ui,sans-serif; text-anchor:middle; }.actual-zero-mark { stroke:#dc4c3e; stroke-width:2; }.actual-zero-text { fill:#ff998c; font:700 10px Inter,ui-sans-serif,system-ui,sans-serif; text-anchor:middle; }
.daily-strip { display:flex; gap:7px; overflow-x:auto; padding:4px 0 12px; scrollbar-color:#42657e transparent; }.day-card { flex:1 1 0; min-width:0; min-height:232px; padding:9px 6px; border:1px solid rgba(65,117,158,.3); border-radius:10px; background:linear-gradient(160deg,rgba(13,45,75,.9),rgba(6,24,42,.94)); text-align:center; }.day-card.today { border-color:rgba(86,180,233,.86); box-shadow:0 0 0 1px rgba(86,180,233,.12) inset; background:linear-gradient(#143c64,#091f36); }.day-name { display:grid; gap:1px; min-height:31px; font-weight:750; text-transform:capitalize; line-height:1.05; font-size:.76rem; }.day-name small { color:#a9bed0; font-size:.62rem; font-weight:650; }.day-symbol { display:grid; grid-template-rows:32px minmax(24px,auto); justify-items:center; align-items:center; row-gap:3px; min-height:59px; margin:7px 0 5px; font-size:1.4rem; }.day-condition { align-self:start; width:100%; color:#d2e0ec; font-size:.65rem; line-height:1.15; }.clear-symbol { font-size:1.42rem; line-height:32px; }.rain-symbol { position:relative; display:block; width:38px; height:32px; color:#e7eef8; font-family:Georgia,serif; font-size:31px; line-height:23px; text-shadow:0 1px 6px #02111e; }.rain-symbol i { position:absolute; bottom:0; width:4px; height:9px; border-radius:70% 70% 70% 70%; background:#2d9ff0; box-shadow:0 0 6px rgba(45,159,240,.65); transform:rotate(28deg); }.rain-symbol i:nth-of-type(1){left:8px}.rain-symbol i:nth-of-type(2){left:17px}.rain-symbol i:nth-of-type(3){left:26px}.temp-range { position:relative; height:120px; width:60px; margin:auto; }.temp-range-line { position:absolute; left:28px; width:2px; border-radius:9px; background:#f47757; }.range-dot { position:absolute; left:25px; width:8px; height:8px; border-radius:50%; transform:translateY(-50%); }.range-max { background:#f47757; }.range-min { background:#b7c8d8; }.range-value { position:absolute; left:37px; transform:translateY(-50%); color:#ff9479; font-size:.8rem; white-space:nowrap; }.range-min-value { color:#b7c8d8; }.daily-rain { display:flex; align-items:flex-end; justify-content:center; height:34px; margin:3px 0 0; border-bottom:1px solid #91aac0; }.daily-rain-bar { width:25px; background:#238ce0; border-radius:3px 3px 0 0; }.daily-rain-value { min-height:17px; color:#78c5ff; font-size:.7rem; font-weight:700; }
#hourly-chart .hour-label { font-size:10px; }
.performance-intro { margin-bottom:12px; }.horizon-tabs { display:grid; grid-template-columns:repeat(5,1fr); overflow:hidden; border:1px solid var(--line); border-radius:12px; }.horizon-tabs button { min-height:41px; border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; }.horizon-tabs button:last-child { border-right:0; }.horizon-tabs button.active { color:#061523; background:#f47757; box-shadow:0 0 15px rgba(244,119,87,.22); font-weight:800; }
.performance-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(820px,100%); gap:0; margin:14px auto 20px; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:rgba(8,26,42,.42); }.summary-item { min-height:100px; padding:15px 20px; text-align:center; }.summary-item + .summary-item { border-left:1px solid var(--line); }.summary-label { display:block; color:var(--muted); font-size:.78rem; }.summary-value { display:block; margin-top:4px; font-size:1.28rem; font-weight:800; }.summary-detail { display:block; margin-top:3px; font-size:.82rem; font-weight:700; }.temperature-score { color:#e8eef4; }.summary-detail.warm { color:#d8897c; }.summary-detail.cool { color:#aeb6d6; }.summary-detail.neutral,.rain-metric.neutral { color:#a9bed0; }.rain-metric.hit { color:#55c4b2; }.rain-metric.issue { color:#e7b26b; }.rain-summary-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:8px; }.rain-metric { display:grid; gap:1px; min-width:0; }.rain-metric b { font-size:1.2rem; line-height:1; }.rain-metric small { color:var(--muted); font-size:.68rem; white-space:nowrap; }
.landscape-footer { position:relative; width:min(1180px,100%); min-height:176px; margin:24px auto 0; overflow:hidden; border-radius:0 0 22px 22px; background:url('/footer-quebrada-perdices-v2.png') center/cover no-repeat; }.footer-mark { position:absolute; inset:auto 0 16px; display:grid; justify-items:center; gap:5px; color:#c4d3e3; text-align:center; }.footer-mark svg { width:72px; height:19px; opacity:.88; }.footer-mark span { padding:0 14px; font:italic 1rem Georgia,serif; text-shadow:0 1px 7px #061523; }
@media (max-width:1050px) { .current-card { display:block; width:100%; }.current-details { padding:4px 10px 10px; }.detail { flex:1 1 100px; min-width:0; } }
@media (max-width:900px) { .day-card { flex:0 0 88px; } }
@media (max-width:640px) { .app-header { padding:6px 9px; grid-template-columns:40px 1fr 40px; }.title-block strong { font-size:1rem; }.title-block span { max-width:230px; font-size:.58rem; letter-spacing:.055em; }.header-icon { font-size:22px; }.site-nav { left:9px; }.location-row { font-size:.78rem; }.current-main { padding:12px 15px; }.current-details { flex-wrap:wrap; padding:4px 8px 10px; }.detail { min-width:0; padding:6px 10px; }.detail-value { font-size:1rem; } main { padding:13px 10px 0; }.performance-summary { grid-template-columns:1fr; width:100%; }.summary-item + .summary-item { border-top:1px solid var(--line); border-left:0; }.rain-summary-row { gap:9px; }.landscape-footer { margin-top:18px; border-radius:0; } }