:root{--c-muted:#5f6f64;--c-primary:#1f6241;--c-surface:#fff;--c-border:#e0e6df;--c-border-soft:#edf0ec;--c-muted-2:#5c6a60;--c-alert:#b23c30;--c-body:#22352a;--c-ink:#1e2c24;--c-warm:#fdfaf1;--c-danger:#a13333;--c-primary-dark:#174c32;--c-line:#e3ebe4;--c-surface-2:#f6f8f5;--c-brand:#153b2b;--r-xl:14px;--r-md:10px;--r-sm:8px;--r-lg:12px;--r-pill:30px;--r-round:50%;--shadow-card:0 5px 20px #17352508;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--c-ink);background:#f3f5f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.topbar{height:76px;background:var(--c-brand);color:white;padding:0 max(24px,calc((100% - 1180px)/2));display:flex;align-items:center;justify-content:space-between}.brand{color:white;text-decoration:none;font-weight:800;letter-spacing:.08em}.brand span{display:block;font-size:9px;letter-spacing:.17em;color:#b9d2be;margin-top:3px}.topbar button{color:white}.login-card{max-width:460px;background:white;padding:34px;border:1px solid #e0e6df;border-radius:16px;margin:8vh auto;box-shadow:0 10px 35px #1735250d}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.15em;color:#49745a;margin:0 0 8px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(27px,4vw,38px);margin-bottom:12px;letter-spacing:-.035em}h2{font-size:20px;margin:0}h3{font-size:17px;margin:0}.login-card>p:not(.eyebrow){color:var(--c-muted);line-height:1.5}.login-card form{display:grid;gap:17px;margin-top:28px}label{display:grid;gap:7px;font-size:13px;font-weight:650;color:#45544a}input,select{width:100%;padding:12px 13px;border:1px solid #cad4cb;border-radius:var(--r-sm);background:white;color:#233228;font:inherit}button{border:0;border-radius:var(--r-sm);background:var(--c-primary);color:white;padding:12px 18px;font:inherit;font-weight:700;cursor:pointer}button:hover{background:var(--c-primary-dark)}.quiet{background:transparent;padding:8px 12px}.hidden{display:none!important}.error{color:var(--c-danger);min-height:1.2em;font-size:13px}.page-heading,.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}.period-label{max-width:230px;margin-bottom:15px}.station-list{display:grid;gap:22px;margin:25px 0}.panel,.station-card{background:white;border:1px solid #e0e6df;border-radius:var(--r-xl);padding:23px;box-shadow:var(--shadow-card)}.station-head{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #edf0ec;padding-bottom:18px}.status{font-size:12px;border-radius:var(--r-pill);padding:7px 11px;background:#edf4ee;color:#28603f;font-weight:700;white-space:nowrap}.status.offline{background:#f9eeee;color:#9b4141}.updated{font-size:12px;color:var(--c-muted);margin:8px 0 0}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.metric{background:var(--c-surface-2);padding:15px;border-radius:var(--r-md);min-height:85px}.metric span{display:block;font-size:12px;color:var(--c-muted);margin-bottom:8px}.metric strong{font-size:21px;letter-spacing:-.03em}.metric small{font-size:12px;color:var(--c-muted)}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.chart-box{border:1px solid #e9ede8;border-radius:var(--r-md);padding:14px;min-width:0}.chart-box h3{font-size:13px;color:#4e5c52;margin-bottom:9px}.chart{width:100%;height:135px;display:block}.empty{color:var(--c-muted);font-size:13px;padding:14px 0}.summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.summary span{background:#edf4ee;padding:7px 9px;border-radius:7px;font-size:11px;color:#385541}.subsection{border-top:1px solid #edf0ec;margin-top:20px;padding-top:18px}.subsection h3{margin-bottom:11px}.source-tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#55735f}.forecast-row,.nearby-row,.alert-row{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #edf0ec;padding:11px 0;font-size:13px}.coverage{font-size:12px;color:var(--c-muted);margin:10px 0 0}.alerts{margin-top:14px}.alert-row{align-items:start}.alert-level{font-weight:750;color:#9b4141}.alert-level.warning{color:#7a5a1c}.alert-detail{color:var(--c-muted);font-size:12px;margin-top:4px}.footnote{color:var(--c-muted);font-size:12px;line-height:1.6;margin:22px 2px 40px}@media(max-width:760px){.period-label{margin:0 0 4px}.metrics{grid-template-columns:repeat(2,1fr)}.chart-grid{grid-template-columns:1fr}.panel,.station-card{padding:17px}.station-head{align-items:start;flex-direction:column}}.table-filters{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin:16px 0 10px}.table-filters label{max-width:210px}.table-wrap{overflow-x:auto;border:1px solid #e9ede8;border-radius:var(--r-md)}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:9px 11px;text-align:left;border-bottom:1px solid #edf0ec;white-space:nowrap}th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#5d6f62;background:#f8faf7}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#f6f9f6}button.danger{background:var(--c-alert);padding:7px 11px;font-size:12px}button.danger:hover{background:#8f2f25}button.danger:disabled{opacity:.5;cursor:default}.table-actions{margin-top:12px}@media(max-width:760px){.table-filters{flex-direction:column;align-items:stretch}.table-filters label{max-width:none}}

/* ---- Navegación, insignias y paneles nuevos ------------------------------- */
.topbar{gap:18px}
.topbar-right{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.topnav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;min-width:0}
.topnav a{color:#cfe0d4;text-decoration:none;font-size:13px;font-weight:650;padding:9px 12px;border-radius:var(--r-sm)}
.topnav a:hover{background:#ffffff14;color:white}
.topnav a.active{background:#ffffff1f;color:white}
.chip{background:#ffffff1f;color:#d6e6db;font-size:12px;font-weight:650;padding:8px 12px;border-radius:var(--r-pill);white-space:nowrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px;border-bottom:1px solid #dfe5df}
.tabs a{color:#4c5c51;text-decoration:none;font-size:13px;font-weight:650;padding:10px 14px;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--c-primary)}
.tabs a.active{border-bottom-color:var(--c-primary);color:var(--c-primary)}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap}
.badge-valid{background:#e6f2ea;color:var(--c-primary)}
.badge-invalid{background:#f9e9e7;color:var(--c-danger)}
.badge-muted{background:#eef1ee;color:var(--c-muted-2)}
.badge-deleted{background:#eceff1;color:var(--c-muted-2);text-decoration:line-through}
.station-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.station-head h2 a{color:inherit;text-decoration:none}
.station-head h2 a:hover{color:var(--c-primary)}
.link,.button-link{color:var(--c-primary);font-weight:650;text-decoration:none;font-size:13px}
.button-link{display:inline-block;padding:10px 14px;border:1px solid #cad4cb;border-radius:var(--r-sm);background:white}
.button-link:hover{background:#f2f6f2}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
td.row-actions,th.row-actions{white-space:normal}
.measurements-table{min-width:1020px}
.measurements-table .row-invalid{background:#fdf7f6}
.measurements-table .row-deleted{background:#f4f6f4;color:var(--c-muted)}
.station-form{display:grid;gap:18px;margin-top:6px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.sensor-set{border:1px solid #e0e6df;border-radius:var(--r-md);padding:14px 16px;display:flex;flex-wrap:wrap;gap:14px}
.sensor-set legend{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#5d6f62;padding:0 6px}
label.check{display:flex;flex-direction:row;align-items:center;gap:9px;font-size:13px}
label.check input{width:auto}
.rule-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:18px;align-items:end}
.rule-form button{height:44px}
.hint{color:var(--c-muted);font-size:12px;line-height:1.6;margin:0}
.detail-grid{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:9px 18px;margin:0}
.detail-grid dt{font-size:12px;color:var(--c-muted);font-weight:650}
.detail-grid dd{margin:0;font-size:13px}
.plain-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.plain-list li{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #edf0ec;padding:9px 0;font-size:13px}
.plain-list small{color:var(--c-muted)}
.diff{list-style:none;margin:0;padding:0;font-size:12px;color:#4c5c51}
.diff li{padding:2px 0}
.diff code{background:#f2f6f2;border-radius:4px;padding:1px 5px}
.access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
pre{white-space:pre-wrap;word-break:break-word;background:var(--c-surface-2);border-radius:var(--r-sm);padding:11px;max-height:320px;overflow:auto}

/* ---- Motor de avisos y estadísticas ---------------------------------------- */
tr.row-system{background:#f8faf7}
tr.row-system td{color:var(--c-muted-2)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}
.stat-card{border:1px solid #e0e6df;border-radius:var(--r-lg);padding:15px 17px;background:#fcfdfb}
.stat-card .eyebrow{margin:0 0 10px}
.stat-card .eyebrow small{color:var(--c-muted);font-weight:600}
.stat-row{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:6px 8px;align-items:baseline;font-size:12px;color:var(--c-muted);margin-bottom:6px}
.stat-row strong{color:var(--c-ink);font-size:14px}
.trend{margin:10px 0 0;font-size:12px;font-weight:700;color:var(--trend-color,#5d6f62)}
@media(max-width:760px){.stat-row{grid-template-columns:auto 1fr}}
.dixon-analysis{margin:20px 0 14px;padding:17px 18px;border:1px solid #d9e7e1;border-radius:15px;background:linear-gradient(160deg,#f7fbf9,#fff)}
.dixon-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.dixon-heading h3{margin:4px 0 0;font-size:17px}
.dixon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.dixon-card{padding:13px 15px;border:1px solid #e2ebe6;border-radius:var(--r-lg);background:var(--c-surface)}
.dixon-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.dixon-card-head strong{font-size:14px;color:#203d30}
.dixon-result{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 10px;align-items:baseline;font-size:12px;color:var(--c-muted)}
.dixon-result strong{color:var(--c-ink);font-size:14px}
.dixon-card p{margin:9px 0 0;font-size:11.5px;color:#5d6f62;line-height:1.45}
.aemet-proximity{margin:11px 0 0;padding-top:10px;border-top:1px solid #e2ebe6;color:#557064;font-size:10.5px;line-height:1.5}
@media(max-width:760px){.dixon-grid{grid-template-columns:1fr}.dixon-result{grid-template-columns:auto 1fr auto 1fr}}
.state-requested{background:#fbf2df;color:#8a6a1f}
.state-received{background:#e4eff6;color:#1a5a8c}
.state-applied{background:#e6f2ea;color:var(--c-primary)}
.stepper{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 4px;padding:0}
.stepper li{position:relative;border:1px solid #e0e6df;border-radius:var(--r-md);padding:14px 14px 14px 44px;background:#fafbf9}
.stepper li.done{background:#f4f9f5;border-color:#cfe3d5}
.stepper li.current{box-shadow:0 0 0 2px #1f62411f;border-color:var(--c-primary)}
.stepper .step-dot{position:absolute;left:14px;top:14px;width:20px;height:20px;border-radius:var(--r-round);background:#dfe5df;color:white;font-size:12px;line-height:20px;text-align:center}
.stepper li.done .step-dot{background:var(--c-primary)}
.stepper strong{display:block;font-size:13px}
.stepper small{display:block;color:var(--c-muted);font-size:11px;margin-top:4px;line-height:1.5}
.stepper time{display:block;color:#5d6f62;font-size:11px;margin-top:6px}
.stepper.compact li{padding:11px 11px 11px 36px}
.stepper.compact .step-dot{left:11px;top:11px;width:17px;height:17px;line-height:17px}
.stepper.compact time{margin-top:4px}
.remote-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 22px}
.remote-facts>div{background:white;border:1px solid #e0e6df;border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-card)}
.remote-facts span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#5d6f62;margin-bottom:7px}
.remote-facts strong{font-size:17px;letter-spacing:-.02em}
.remote-facts small{display:block;color:var(--c-muted);font-size:11px;margin-top:5px;line-height:1.5}
.config-group{border:1px solid #e0e6df;border-radius:var(--r-lg);padding:16px 18px;margin:0 0 16px;background:#fcfdfb}
.config-group legend{font-size:12px;font-weight:750;letter-spacing:.04em;color:#385541;padding:0 8px}
.config-group label small{color:var(--c-muted);font-size:11px}
.warn-box{background:#fbf6ea;border:1px solid #ecd9ae;border-radius:var(--r-md);padding:12px 15px;margin:0 0 16px}
.warn-box p{margin:0 0 6px;font-size:12.5px;color:#7a6320}
.warn-box p:last-child{margin:0}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.fact-grid>div{background:var(--c-surface-2);border-radius:var(--r-md);padding:13px 15px}
.fact-grid span{display:block;font-size:11px;color:var(--c-muted);margin-bottom:6px}
.fact-grid strong{font-size:18px;letter-spacing:-.02em}
@media(max-width:760px){.stepper{grid-template-columns:1fr}}
.detail-dialog{width:min(760px,92vw);border:1px solid #dfe5df;border-radius:var(--r-xl);padding:0;color:var(--c-ink)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid #edf0ec}
.dialog-head h3{margin:0}
.dialog-actions{display:flex;gap:9px;justify-content:flex-end;padding:16px 22px;border-top:1px solid #edf0ec}
@media(max-width:760px){.topbar{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.detail-grid{grid-template-columns:1fr}}
.quiet{color:var(--c-primary)}
.quiet:hover{background:#f2f6f2}
.measurements-toolbar{display:flex;justify-content:flex-end;margin:10px 0 14px}
.measurements-toolbar button{white-space:nowrap}
.table-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0}
.table-pagination span{font-size:13px;color:#5d6f62;font-weight:650}
@media(max-width:760px){.measurements-toolbar button{width:100%}.table-pagination{justify-content:space-between;gap:8px}}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:white;color:var(--c-brand);padding:10px 14px;border-radius:var(--r-sm)}
.skip-link:focus{top:12px}
.chart-wrap{position:relative;min-width:0}.chart{display:block;width:100%;height:135px;overflow:visible}.chart-gridline{stroke:#e7ece7;stroke-width:1}.chart-axis-label{fill:var(--c-muted);font-size:10px}.chart-hit{cursor:crosshair;pointer-events:all;outline:none}.chart-hit:focus{stroke:var(--c-ink);stroke-width:2}.chart-tooltip{position:absolute;z-index:2;transform:translate(-50%,-115%);max-width:220px;padding:6px 9px;border-radius:6px;background:var(--c-brand);color:white;font-size:11px;line-height:1.35;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px #17352530}.chart-tooltip[hidden]{display:none}
.chart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:38px}.chart-trend-wrap{text-align:right;flex:0 0 auto;max-width:62%}.chart-trend{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#f1f3f0;color:#5d6f62;font-size:11px;font-weight:750;white-space:nowrap}.chart-trend strong{font-size:16px;line-height:1}.trend-sube{color:var(--c-danger);background:#faeeee}.trend-baja{color:#246b91;background:#edf5f8}.trend-estable{color:#49745a;background:#edf5ef}.trend-insuficiente{color:var(--c-muted);background:#f1f3f0}.chart-trend-note{display:block;margin-top:3px;color:var(--c-muted);font-size:10px;line-height:1.25}.chart-trend-help{margin:0 0 8px;color:var(--c-muted);font-size:11px}
.chart{height:auto}.chart-axis-label{font-size:13px}.chart-heading h3{font-size:17px}.metric-icon{display:inline-block;font-size:1.65em;line-height:1;vertical-align:-.2em;margin-right:3px}.chart-trend strong{font-size:20px}
.weather-panel{margin:22px 0;padding:20px;border:1px solid #dce6dd;border-radius:var(--r-xl);background:#f9fbf8}.weather-heading,.weather-current-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.weather-heading{margin-bottom:15px}.weather-current{padding:15px;background:white;border:1px solid #e6ebe5;border-radius:var(--r-md);margin-bottom:16px}.weather-current-title small{color:var(--c-muted);font-size:11px}.weather-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:8px}.weather-metrics>div{padding:10px 12px;border-radius:var(--r-sm);background:#f5f8f4}.weather-metrics span,.weather-metrics strong{display:block}.weather-metrics span{color:var(--c-muted);font-size:12px}.weather-metrics strong{margin-top:4px;font-size:17px}.weather-provider{margin:14px 0}.weather-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px}.weather-day{display:grid;gap:5px;padding:12px;border:1px solid #e6ebe5;border-radius:9px;background:var(--c-surface);font-size:12px}.weather-day span{color:#56645a}.weather-alert-group{margin:16px 0}.weather-alert{display:grid;gap:5px;padding:11px 13px;border-radius:var(--r-sm);margin:7px 0;font-size:12px}.weather-alert p{margin:0}.weather-alert small,.weather-alert span{color:var(--c-muted)}.weather-alert.official{background:#fff2e8;border:1px solid #f1c5a2}.weather-alert.advisory{background:#f4f7ec;border:1px solid #dbe6c2}.weather-panel .hint{margin-top:8px}
.weather-hourly{margin-top:12px}.weather-hours{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:10px}.weather-hours>div{display:grid;gap:4px;padding:10px;border:1px solid #e6ebe5;border-radius:var(--r-sm);background:var(--c-surface);font-size:11px}.weather-hours>div span{color:#56645a}
.weather-attribution{margin:14px 0 0;color:var(--c-muted);font-size:10px}.weather-attribution a{color:#49745a}
@media(max-width:760px){.weather-panel{padding:14px;margin:16px 0}.weather-heading{display:block}.weather-heading>.badge{margin-top:8px;white-space:normal}.weather-days{grid-template-columns:1fr 1fr}.weather-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.chart-grid{grid-template-columns:minmax(0,1fr)!important}.chart-box{width:100%;min-width:0}.chart-wrap,.chart{width:100%}.chart{height:auto}}
.metric-icon{font-size:2.15em}.stat-card .eyebrow .metric-icon{font-size:1.9em}.chart-icon{vertical-align:-.12em;font-size:1.8em}.weather-icon{display:inline-block;font-size:1.8em;line-height:1;vertical-align:-.2em;margin-right:2px}.weather-metrics .weather-icon{display:inline-block}

/* Comparación directa de lecturas locales y observación AEMET. */
.reading-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:18px 0 22px}
.reading-source{min-width:0;padding:16px;border:1px solid #dfe7df;border-radius:var(--r-xl);background:#f9fbf8}
.aemet-readings{background:#f6f9fc;border-color:#dbe4ee}
.reading-source-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.reading-source-head small{color:var(--c-muted);text-align:right;font-size:11px;line-height:1.4}
.reading-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.reading-card{min-width:0;min-height:105px;padding:12px;border:1px solid #e5eae4;border-radius:11px;background:var(--c-surface)}
.reading-label{display:flex;align-items:center;gap:7px;min-height:30px;color:#5d6f62;font-size:12px;font-weight:700}
.reading-icon{font-size:27px;line-height:1}
.reading-value{display:flex;align-items:baseline;gap:5px;margin-top:8px}
.reading-value strong{font-size:clamp(20px,2.1vw,27px);line-height:1.05;letter-spacing:-.035em;color:var(--reading-color,#42534a);font-variant-numeric:tabular-nums}
.reading-value small{color:var(--c-muted);font-size:11px}
.reading-trend{margin-left:auto;font-size:25px;font-weight:800;line-height:1}
.reading-trend.trend-sube{color:var(--c-danger)}.reading-trend.trend-baja{color:#246b91}.reading-trend.trend-estable{color:#49745a}.reading-trend.trend-insuficiente{color:var(--c-muted)}
.tone-normal{--reading-color:#1f7043;background:#f0f8f1;border-color:#cfe5d3}
.tone-cold,.tone-cool{--reading-color:#246b91;background:#eff7fb;border-color:#cfe2ec}
.tone-warm,.tone-dry,.tone-humid{--reading-color:#8a5a0b;background:#fff8e9;border-color:#f0dfb6}
.tone-hot{--reading-color:#a13333;background:#fff0ed;border-color:#f0cbc5}
.tone-neutral{--reading-color:#514f83;background:#f5f4fb;border-color:#dfdeef}
.tone-muted,.tone-battery-unknown{--reading-color:#5f6f64;background:#f3f5f2;border-color:#e2e6e1}
.tone-battery-ok{--reading-color:#1f7043;background:#f0f8f1;border-color:#cfe5d3}
.tone-battery-low{--reading-color:#8a5a0b;background:#fff8e9;border-color:#f0dfb6}
.tone-battery-critical{--reading-color:#a13333;background:#fff0ed;border-color:#f0cbc5}
.reading-legend{grid-column:1/-1;margin:0;color:var(--c-muted);font-size:10px;line-height:1.5}
/* F12: los tonos de la leyenda son muestras de color, no glifos. Un cuadrado
   del mismo tamaño que el texto es más fiel que un emoji, que además cambia
   de aspecto entre sistemas. */
.legend-swatch{display:inline-block;width:9px;height:9px;border-radius:3px;vertical-align:-.05em;margin:0 2px}
.legend-green{background:#1f7043}.legend-blue{background:#246b91}.legend-amber{background:#8a5a0b}.legend-red{background:var(--c-danger)}
@media(max-width:760px){.reading-comparison{gap:9px}.reading-source{padding:11px}.reading-source-head{display:block}.reading-source-head small{display:block;text-align:left;margin-top:5px}.reading-grid{gap:7px}.reading-card{padding:9px;min-height:96px}.reading-icon{font-size:23px}.reading-value{gap:3px}.reading-value small{font-size:10px}}
@media(max-width:520px){.reading-comparison{grid-template-columns:1fr}.reading-source-head{display:flex}.reading-source-head small{text-align:right;margin:0}}

/* Tarjetas de evolución con encabezado de lectura, tendencia y área suave. */
.chart-title{display:flex;align-items:center;gap:8px;min-width:0}.chart-title small{display:block;color:var(--c-muted);font-size:9px;font-weight:750;letter-spacing:.06em}
.chart-current{display:flex;align-items:baseline;gap:4px;white-space:nowrap}.chart-current strong{font-size:20px;font-weight:850;font-variant-numeric:tabular-nums}.chart-current small{font-size:10px;color:var(--c-muted)}
.chart-trend-strip{min-height:22px;margin-bottom:4px}.chart-trend-strip .chart-trend-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;max-width:none;text-align:left}.chart-trend-strip .chart-trend-note{margin:0}
.chart-trend-item{display:flex;align-items:center;gap:5px;min-width:0}.chart-trend-label{color:var(--c-muted);font-size:10px;font-weight:750;white-space:nowrap}.chart-trend-daily{opacity:.72}
.chart-area{pointer-events:none}.chart-dates{display:flex;justify-content:space-between;gap:8px;margin-top:4px;color:var(--c-muted);font-size:9px}.chart-dates span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-station-card>.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:17px;margin-bottom:9px}
.tecrural-chart-card{min-width:0;padding:15px 15px 12px;border:1px solid #dfeae4;border-radius:18px;background:linear-gradient(155deg,#fff 0%,#fbfdfc 100%);box-shadow:0 5px 16px #123e2e09}
.tecrural-chart-card .chart-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:0;margin-bottom:7px}
.tecrural-chart-card .chart-title{display:flex;align-items:center;gap:9px;min-width:0}
.tecrural-chart-card .chart-icon{display:grid;place-items:center;width:35px;height:35px;flex:0 0 auto;border-radius:var(--r-lg);background:#eaf5ef;color:#17633e;font-size:20px;line-height:1}
.tecrural-chart-card .chart-title h3{overflow:hidden;color:#203d30;font-size:13px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.tecrural-chart-card .chart-title small{display:block;margin-top:3px;color:var(--c-muted);font-size:8px;font-weight:800;letter-spacing:.07em}
.tecrural-chart-card .chart-current{display:flex;align-items:baseline;gap:3px;white-space:nowrap}
.tecrural-chart-card .chart-current strong{color:#153f30;font-size:21px;font-weight:850;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tecrural-chart-card .chart-current small{color:var(--c-muted);font-size:10px;font-weight:700}
.tecrural-chart-card .chart-trend-strip{min-height:22px}
.tecrural-chart-card .chart-trend-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:5px 9px;max-width:none;text-align:left}
.tecrural-chart-card .chart-trend-label{font-size:9px}
.tecrural-chart-card .chart-trend{padding:3px 8px;border:1px solid #e4ece6;background:#f4f8f5;font-size:9px}
.tecrural-chart-card .chart-trend-note{margin:0;font-size:9px}
.tecrural-chart-card .chart-wrap{overflow:hidden;border-radius:var(--r-md);background:linear-gradient(180deg,#f9fcfa,#fff)}
/* F13: el SVG se dibuja a escala 1:1 con su contenedor (chartScale ajusta el
   viewBox al ancho real), así que la altura se fija en píxeles desde el propio
   SVG y el texto del eje se ve al tamaño declarado sin ampliar la página. */
.tecrural-chart-card .chart{height:var(--chart-h,148px)}
.tecrural-chart-card .chart-axis-label{fill:#7a8a81;font-size:10px}
.tecrural-chart-card .chart-hit:focus{stroke:#153f30;stroke-width:2}
.tecrural-chart-card .summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:9px}
.tecrural-chart-card .summary span{padding:6px 4px;border-radius:var(--r-sm);background:#f2f7f4;color:#557064;font-size:9px;text-align:center;white-space:nowrap}
.tecrural-chart-card.chart-empty{min-height:160px}
.dashboard-station-card>.chart-trend-help{margin-top:0;margin-bottom:14px;color:var(--c-muted);font-size:10px}
@media(max-width:760px){.dashboard-station-card>.chart-grid{grid-template-columns:1fr!important;gap:10px}.tecrural-chart-card{padding:13px}.tecrural-chart-card .chart{height:var(--chart-h,168px)}}

/* TecRural mobile-first dashboard, using the brand's forest green and sensor cyan. */
:root{--tr-forest:#17633e;--tr-forest-deep:#123e2e;--tr-cyan:#16a6bf;--tr-cloud:#edf4f3;--topbar-h:72px}
/* Compensa la cabecera fija en TODO desplazamiento por anclas y scrollIntoView,
   no solo en las secciones que declaran scroll-margin. El navegador usa este
   valor al calcular el destino; la altura real la fija app.js en --topbar-h
   porque la cabecera cambia de alto al plegarse la navegación. */
html{scroll-padding-top:calc(var(--topbar-h) + 14px)}
body{background:#edf3f1}
.topbar{position:sticky;top:0;z-index:30;height:auto;min-height:68px;flex-wrap:wrap;gap:8px 14px;padding:8px max(16px,calc((100% - 1180px)/2));background:rgba(18,62,46,.97);backdrop-filter:blur(12px);box-shadow:0 5px 18px #123e2e18}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:0}
.brand img{display:block;width:42px;height:42px;object-fit:contain;padding:2px;border-radius:var(--r-lg);background:white}
.brand-copy{font-size:15px;line-height:1.1;letter-spacing:.1em}
.brand-copy span{font-size:8px;letter-spacing:.12em;color:#9bd7d9;margin-top:4px}
.topnav{gap:3px}
main{max-width:1240px;margin:clamp(18px,3vw,36px) auto;padding:0 clamp(12px,2.2vw,22px)}
.page-heading{align-items:center;margin-bottom:10px}.page-heading h1{margin-bottom:4px}
.period-label{margin-bottom:0}
.station-list{gap:18px;margin-top:16px}
.dashboard-station-card{padding:0;overflow:hidden;border-radius:22px;border-color:#d8e5df;box-shadow:0 12px 36px #123e2e12}
.dashboard-station-card .station-head{padding:18px 20px 13px;background:linear-gradient(110deg,#fff,#f5faf7)}
.dashboard-station-card .station-head .eyebrow{color:var(--tr-forest);margin-bottom:4px}
.dashboard-station-card .station-head h2{font-size:20px}
.dashboard-station-card .station-head .updated{margin:7px 0 0;font-size:11px}
.station-hero{position:relative;isolation:isolate;overflow:hidden;margin:0 16px 14px;padding:17px 20px 14px;border-radius:20px;background:linear-gradient(120deg,#123e2e 0%,#174f48 55%,#07536b 100%);color:white;box-shadow:0 8px 22px #123e2e25}
.hero-ambient{position:absolute;z-index:-1;right:-42px;top:-90px;width:240px;height:240px;border-radius:var(--r-round);background:#16a6bf29;filter:blur(4px)}
.hero-content{position:relative;z-index:1}
.hero-source-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-local-badge{display:inline-flex;align-items:center;gap:7px;color:#bce9d4;font-size:10px;font-weight:800;letter-spacing:.1em}
/* Punto de fuente en la cabecera del hero: un círculo dibujado, no un glifo,
   para que no dependa de la tipografía del sistema. */
.hero-local-badge .source-dot{width:7px;height:7px;border-radius:var(--r-round);background:#55d59b;flex:0 0 auto}
.hero-source-row .reading-trend{color:#c4e8e0}
.hero-main{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 12px}
.hero-temperature{display:flex;align-items:flex-start;gap:4px;min-width:0}
.hero-temperature strong{font-size:clamp(48px,9vw,68px);font-weight:850;line-height:.98;letter-spacing:-.065em;font-variant-numeric:tabular-nums}
.hero-temperature>span{margin-top:5px;color:#9ee2e8;font-size:24px;font-weight:400}
.hero-forecast{display:grid;justify-items:center;gap:1px;min-width:112px;padding:8px 12px;border:1px solid #ffffff20;border-radius:16px;background:#ffffff0d;text-align:center}
.hero-weather-icon{font-size:30px;line-height:1.1}.hero-forecast small{color:#c8dcde;font-size:9px;line-height:1.35}
.hero-readout-footer{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:10px;border-top:1px solid #ffffff24;color:#c6dedb;font-size:10px}
.hero-readout-footer time{color:white;font-weight:700}.hero-separator{color:#70bfc2}
.dashboard-station-card .reading-comparison{margin:0;padding:0 16px 14px;gap:12px}
.dashboard-station-card .reading-source{padding:13px;border-radius:17px;background:#fbfdfb;border-color:#deebe3}
.dashboard-station-card .aemet-readings{background:#f5fafb;border-color:#d6e9ea}
.dashboard-station-card .reading-source-head{align-items:center;margin-bottom:10px}
.dashboard-station-card .reading-source-head h3{font-size:14px;font-weight:800;color:var(--tr-forest-deep)}
.dashboard-station-card .aemet-readings .reading-source-head h3{color:#06707f}
.dashboard-station-card .reading-source-head small{font-size:9px}
.dashboard-station-card .reading-grid{gap:7px}
.dashboard-station-card .reading-card{min-height:88px;padding:9px;border-radius:13px}
.dashboard-station-card .reading-label{gap:5px;min-height:25px;font-size:10px}
.dashboard-station-card .reading-icon{font-size:22px}
.dashboard-station-card .reading-value{gap:4px;margin-top:7px}
.dashboard-station-card .reading-value strong{font-size:clamp(17px,2vw,23px)}
.dashboard-station-card .reading-value small{font-size:9px}
.dashboard-station-card .reading-trend{font-size:21px}
.dashboard-station-card .reading-legend{padding:0 3px;color:var(--c-muted);font-size:9px}
.dashboard-station-card>.coverage,.dashboard-station-card>.chart-grid,.dashboard-station-card>.chart-trend-help,.dashboard-station-card>.weather-panel,.dashboard-station-card>.subsection{margin-left:18px;margin-right:18px}
.dashboard-station-card>.reliability-summary{margin:0 18px 8px}
.dashboard-station-card>.coverage:not(.reliability-summary){font-size:11px}
.dashboard-station-card .weather-panel{border-radius:18px;background:#f4f9f7;border-color:#dce9e2}
.dashboard-station-card .weather-current,.dashboard-station-card .weather-day{border-radius:13px}
.dashboard-station-card .tecrural-chart-card{border-radius:18px}
.dashboard-station-card .weather-panel .source-tag{background:#e8f5f1;color:#276a51}
.dashboard-station-card .weather-provider h4{color:#1a6148}
.dashboard-station-card .weather-attribution a{color:#0a6b7a}
.footnote{max-width:1180px;margin:12px auto 30px;padding:0 22px;color:var(--c-muted);font-size:11px;line-height:1.5}
.mobile-tab-bar{display:none}
.pwa-install-hint{margin-top:18px;padding:11px 13px;border:1px solid #d6e9e1;border-radius:11px;background:#f4faf6;color:#486b59;font-size:12px;line-height:1.5}
/* El aviso iOS vive en el contenido, bajo la tarjeta hero: en la cabecera
   fija ocupaba una fila propia y empujaba el activo de la página fuera de la
   primera pantalla en móvil. */
.pwa-install-hint{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pwa-install-hint .hint-dismiss{min-height:0;padding:8px 12px;font-size:13px;color:var(--c-primary-dark);white-space:nowrap}
@media(max-width:760px){
  .topbar{padding:8px 12px;gap:7px 10px}
  .topbar-right{margin-left:auto;gap:6px}.topbar-right .chip{max-width:145px;overflow:hidden;text-overflow:ellipsis}
  .topnav{order:3;display:flex;width:100%;margin:0;flex-wrap:wrap;row-gap:4px;justify-content:flex-start}
  .topnav a{flex:0 0 auto;padding:7px 10px}
  /* En móvil solo caben la CTA y el acceso en una fila: los enlaces medios
     del embudo se saltan (siguen accesibles scrollando y en la barra inferior
     de la app). Así la cabecera no pasa de ~94 px en 390. */
  #public-nav .nav-optional{display:none}
  main{margin:17px auto 24px;padding:0 11px 104px}
  .page-heading{align-items:flex-start;flex-direction:column;gap:10px}
  .period-label{max-width:none;width:100%}
  .station-list{gap:14px;margin:13px 0}
  .dashboard-station-card .station-head{padding:15px 15px 11px;align-items:flex-start}
  .dashboard-station-card .station-head h2{font-size:17px}
  .dashboard-station-card .station-tags{justify-content:flex-end;gap:5px}
  .dashboard-station-card .station-tags .badge{font-size:9px;padding:4px 6px}
  .station-hero{margin:0 10px 10px;padding:14px 15px 12px;border-radius:17px}
  .hero-main{margin:8px 0 10px}
  .hero-forecast{min-width:100px;padding:7px 9px}
  .dashboard-station-card .reading-comparison{padding:0 10px 11px;gap:8px}
  .dashboard-station-card .reading-source{padding:9px;border-radius:var(--r-xl)}
  .dashboard-station-card .reading-source-head{display:block}
  .dashboard-station-card .reading-source-head small{display:block;margin-top:4px;text-align:left}
  .dashboard-station-card .reading-grid{gap:5px}
  .dashboard-station-card .reading-card{min-height:80px;padding:7px;border-radius:11px}
  .dashboard-station-card .reading-label{font-size:9px}
  .dashboard-station-card .reading-icon{font-size:20px}
  .dashboard-station-card .reading-value strong{font-size:18px}
  .dashboard-station-card .reading-trend{font-size:18px}
  .dashboard-station-card>.coverage,.dashboard-station-card>.chart-grid,.dashboard-station-card>.chart-trend-help,.dashboard-station-card>.weather-panel,.dashboard-station-card>.subsection{margin-left:11px;margin-right:11px}
  .dashboard-station-card>.reliability-summary{margin:0 11px 8px}
  .footnote{padding:0 12px;margin:0 auto 95px}
  .mobile-tab-bar:not(.hidden){position:fixed;z-index:35;left:0;right:0;bottom:0;display:flex;justify-content:space-around;gap:4px;padding:8px 9px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid #dce8e2;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 -6px 24px #123e2e12}
  .mobile-tab-bar a{display:flex;flex:1;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;color:var(--c-muted);text-decoration:none;font-size:9px;font-weight:700}
  .mobile-tab-bar a>span{font-size:20px;line-height:1.1}
  .mobile-tab-bar .icon{width:22px;height:22px}
  .mobile-tab-bar a.active{color:var(--tr-forest)}
  .mobile-tab-bar a.active>span{color:var(--tr-cyan)}
}

/* ---- Escala tipográfica global +25% --------------------------------------- */
/* Sube el tamaño base y todos los microtextos para mejorar la lectura. */
:root{font-size:125%}
body{font-size:1rem}
.eyebrow{font-size:14px}
.brand-copy span{font-size:11px}
label{font-size:16px}
.error{font-size:16px}
.hint{font-size:15px}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px}
details summary{cursor:pointer;color:var(--c-primary);font-weight:650;font-size:15px}
.link,.button-link{font-size:16px}
.chip{font-size:15px}
.topnav a{font-size:16px}
.tabs a{font-size:16px}
.badge{font-size:14px;padding:5px 10px}
.period-label{font-size:15px}
input,select,button{font-size:16px}
td.row-actions button,td button{padding:6px 10px;font-size:15px}
.detail-grid dt{font-size:15px}
.detail-grid dd{font-size:16px}
.plain-list li{font-size:16px}
.plain-list small{font-size:14px}
.diff{font-size:15px}
.stat-card .eyebrow{font-size:13px}
.stat-card .eyebrow small{font-size:13px}
.stat-row{font-size:15px}
.stat-row strong{font-size:17px}
.trend{font-size:15px}
.dixon-heading h3{font-size:19px}
.dixon-card-head strong{font-size:16px}
.dixon-result{font-size:15px}
.dixon-result strong{font-size:17px}
.dixon-card p{font-size:14px}
.aemet-proximity{font-size:13px}
.stepper strong{font-size:15px}
.stepper small,.stepper time{font-size:14px}
.remote-facts span,.remote-facts small{font-size:14px}
.remote-facts strong{font-size:19px}
.config-group legend{font-size:15px}
.config-group label small{font-size:14px}
.warn-box p{font-size:15px}
.fact-grid span{font-size:14px}
.fact-grid strong{font-size:20px}
.weather-attribution{font-size:12px}
.footnote{font-size:14px}
.pwa-install-hint{font-size:15px}
.mobile-tab-bar a{font-size:12px}
.mobile-tab-bar a>span{font-size:24px}
.mobile-tab-bar .icon{width:24px;height:24px}
/* F12: un solo conjunto de iconos, un solo trazo y un solo color. El glifo
   acompaña al texto: nunca lo sustituye. */
.icon{display:inline-block;vertical-align:-.18em;flex:0 0 auto;color:currentColor}
.icon-label{display:inline-flex;align-items:center;gap:6px}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}
.chart-icon .icon{stroke-width:1.8}
.footnote{font-size:14px}
.source-tag{font-size:13px}

/* Tarjetas de lectura y comparación */
.reading-label{font-size:14px;min-height:34px}
.reading-icon{font-size:31px}
.reading-value strong{font-size:clamp(24px,2.4vw,31px)}
.reading-value small{font-size:13px}
.reading-source-head h3{font-size:19px}
.reading-source-head small{font-size:13px}
.reading-legend{font-size:12px}

/* Hero */
.hero-local-badge{font-size:12px}
.hero-temperature>span{font-size:28px}
.hero-forecast strong{font-size:14px}
.hero-forecast small{font-size:12px}
.hero-readout-footer{font-size:12px}
.hero-weather-icon{font-size:34px}

/* Gráficos */
.chart-title h3{font-size:18px}
.chart-title small{font-size:11px}
.chart-current strong{font-size:24px}
.chart-current small{font-size:12px}
.chart-axis-label{font-size:13px}
.chart-trend{font-size:14px}
.chart-trend strong{font-size:22px}
.chart-trend-note{font-size:12px}
.chart-trend-help{font-size:14px}
.chart-dates{font-size:11px}
.tecrural-chart-card .chart-title h3{font-size:16px}
.tecrural-chart-card .chart-title small{font-size:10px}
.tecrural-chart-card .chart-current strong{font-size:25px}
.tecrural-chart-card .chart-current small{font-size:12px}
.tecrural-chart-card .chart-trend{font-size:12px}
.tecrural-chart-card .chart-trend strong{font-size:17px}
.tecrural-chart-card .chart-trend-note{font-size:11px}
.tecrural-chart-card .summary span{font-size:11px}
.dashboard-station-card>.chart-trend-help{font-size:12px}

/* Meteorología */
.weather-heading h3{font-size:22px}
.weather-current-title h4,.weather-provider h4,.weather-alert-group h4{margin:6px 0 12px;font-size:18px}
.weather-current-title small{font-size:13px}
.weather-metrics span{font-size:14px}
.weather-metrics strong{font-size:20px}
.weather-day{font-size:14px}
.weather-day strong{font-size:15px}
.weather-alert{font-size:14px}
.weather-hours>div{font-size:13px}
.weather-hourly summary{font-size:14px}

/* Navegación en móvil: los enlaces bajan a 13px y la barra se queda en una
   fila (los enlaces medios se ocultan con .nav-optional); si aun así no
   caben —pantallas muy estrechas— la barra se pliega en dos filas en lugar
   de desplazarse en horizontal. Se declara DESPUÉS de la escala tipográfica
   global porque, con la misma especificidad, esta gana por orden: antes, los
   16px globales anulaban los 13px del bloque móvil y la barra quedaba más
   ancha que la pantalla, con «Entrar» fuera de vista. */
@media(max-width:760px){
  .topnav a{font-size:13px;padding:8px 9px}
}
@media(max-width:760px){
  .reading-label{font-size:12px}
  .reading-value strong{font-size:clamp(20px,6vw,24px)}
  .tecrural-chart-card .chart-current strong{font-size:23px}
  .tecrural-chart-card .summary span{font-size:11px}
  .weather-metrics strong{font-size:19px}
}

/* ---- Ampliación de tarjetas y gráficos ------------------------------------ */
.dashboard-station-card{scroll-margin-top:92px}
.reading-card[data-detail-key],.chart-box[data-detail-key],.station-hero[data-detail-key],.weather-day[data-detail-key]{cursor:pointer}
.reading-card[data-detail-key]:hover,.chart-box[data-detail-key]:hover,.station-hero[data-detail-key]:hover,.weather-day[data-detail-key]:hover{border-color:#9fc9bb}
.reading-card[data-detail-key]:focus-visible,.chart-box[data-detail-key]:focus-visible,.station-hero[data-detail-key]:focus-visible,.weather-day[data-detail-key]:focus-visible{outline:3px solid #d47749;outline-offset:2px}
.dashboard-station-card--focus{animation:tr-card-focus 1.8s ease-out}
@keyframes tr-card-focus{
  0%{box-shadow:0 0 0 0 #16a6bf99;border-color:#16a6bf}
  40%{box-shadow:0 0 0 6px #16a6bf33;border-color:#16a6bf}
  100%{box-shadow:0 12px 36px #123e2e12}
}
.detail-block h4{margin:0 0 10px;font-size:16px;color:#203d30}
.detail-dialog .tecrural-chart-card .chart{height:320px}
.detail-table{width:100%;border-collapse:collapse;font-size:14px}
.detail-table th,.detail-table td{padding:8px 10px;border-bottom:1px solid #edf0ec;text-align:left}
.detail-table th{color:#5d6f62;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.detail-dialog .fact-grid{margin:0}
.detail-dialog .fact-grid>div{background:#f2f8f5}
@media(max-width:760px){.detail-dialog .tecrural-chart-card .chart{height:220px}}

/* ---- Emojis y gráficos neón ------------------------------------------------ */
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.reading-icon,.chart-icon,.weather-icon,.metric-icon,.hero-weather-icon{display:inline-flex;align-items:center;color:currentColor}
.reading-icon .icon,.chart-icon .icon,.weather-icon .icon,.metric-icon .icon,.hero-weather-icon .icon{width:1em;height:1em}
.chart-axis-label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
/* F12: la tarjeta de gráfico deja de ser la única con borde superior de color y
   degradado. Pasa a la misma escala de elevación que el resto de tarjetas: una
   superficie, un borde, una sombra. El color intenso queda para lo que
   necesita atención ya, no para decorar. */
.tecrural-chart-card{position:relative;background:var(--c-surface);border-color:#dfeae4}
.tecrural-chart-card .chart-wrap{background:#fafcfb}
.tecrural-chart-card .chart-gridline{stroke:#d5e2dc;stroke-dasharray:2 6}
.chart-line{stroke-dasharray:1;stroke-dashoffset:1;animation:tr-line-draw 1.1s ease-out forwards}
@keyframes tr-line-draw{to{stroke-dashoffset:0}}
.chart-pulse{transform-box:fill-box;transform-origin:center;animation:tr-pulse 1.9s ease-out infinite}
@keyframes tr-pulse{
  0%{transform:scale(.55);opacity:.75}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}
.chart-tooltip{background:#08201a;border:1px solid #2c6a5f;color:#eaf6f2;border-radius:9px;box-shadow:0 6px 18px #08201a40;padding:7px 11px;font-size:12px;letter-spacing:.01em}
/* La cifra actual es el dato más importante de la tarjeta, pero sigue siendo un
   dato: verde profundo y peso, sin degradado que compita con la alerta. */
.chart-current strong{color:#15463a}
@media (prefers-reduced-motion: reduce){
  .chart-line{animation:none;stroke-dashoffset:0}
  .chart-pulse{animation:none;opacity:0}
}

/* ---- Identidad del diálogo de ampliación ---------------------------------- */
.detail-dialog{border:1px solid #cfe0d8;border-radius:18px;overflow:hidden;background:#edf3f1;box-shadow:0 24px 60px #08201a55}
.detail-dialog::backdrop{background:#08201ab8}
.dialog-head{background:linear-gradient(110deg,#123e2e,#174f48 58%,#07536b);color:white;border-bottom:0;padding:17px 22px}
.dialog-head h3{color:white;font-size:20px;letter-spacing:-.02em}
/* Cerrar: texto claro sobre el degradado. Con #1f6241 el contraste era de
   1,17–1,64:1 según la parada del degradado, muy por debajo del 4,5:1 que pide
   WCAG AA para texto normal, y por eso costaba localizarlo. En blanco el
   mínimo es de 8,54:1 (AAA) en la parada más clara; el borde al 75 % llega a
   5,57:1, por encima del 3:1 que exige el contraste de componentes de interfaz.
   El botón conserva el tamaño táctil de 44 px y lleva un aspa para que se
   reconozca como cierre sin leer la etiqueta. El cierre con Escape es el
   nativo de <dialog> y no depende de este botón. */
.dialog-head .quiet{color:var(--c-surface);background:transparent;border:1px solid #ffffffbf;font-weight:700}
.dialog-head .quiet:hover{background:#ffffff26;border-color:var(--c-surface)}
.dialog-head .quiet:focus-visible{outline:3px solid #fff;outline-offset:2px}
.dialog-head .dialog-close{display:inline-flex;align-items:center;gap:7px;padding:9px 15px 9px 13px;border-radius:9px}
.dialog-close-mark{font-size:13px;line-height:1;opacity:.95}
.dialog-body{padding:18px 20px;max-height:66vh;overflow:auto;background:#edf3f1}
.detail-block{background:var(--c-surface);border:1px solid #dfeae4;border-radius:var(--r-xl);padding:15px 16px;margin:0 0 14px;box-shadow:0 4px 14px #123e2e08}
.detail-block:last-child{margin-bottom:0}
.detail-block h4{color:#17633e}
.detail-dialog .reading-card{border-radius:13px}
.detail-dialog .reading-value strong{font-size:clamp(20px,2.2vw,26px)}
.detail-readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:10px}
.detail-dialog .weather-days{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.detail-dialog .chart-tooltip{font-size:12px}
@media(max-width:760px){
  .detail-readings{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-dialog .reading-grid{gap:7px}
}

/* ---- Panel de estadísticas de administración ------------------------------ */
.stats-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:start;margin-bottom:8px}
.stats-field{display:grid;gap:7px}
.stats-field>span{font-size:13px;font-weight:700;color:#45544a}
.stats-stations{display:flex;flex-wrap:wrap;gap:9px 18px;max-height:158px;overflow:auto;border:1px solid #dfe7df;border-radius:var(--r-lg);padding:12px;background:#f9fbf8}
.stats-stations small{color:var(--c-muted)}
.stats-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:end}
.stats-results{display:grid;gap:18px;margin-top:16px}
.stats-station{padding:22px}
.stats-chart{margin:16px 0 6px}
@media(max-width:880px){.stats-controls{grid-template-columns:1fr}.stats-field-stations{grid-column:1/-1}}

/* ---- Ajustes de tablet y móviles pequeños --------------------------------- */
@media(min-width:761px) and (max-width:1024px){
  .weather-days{grid-template-columns:repeat(3,minmax(0,1fr))}
  .weather-hours{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-station-card>.chart-grid{gap:14px}
  .detail-readings{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-temperature strong{font-size:clamp(44px,7vw,60px)}
}
@media(max-width:520px){
  .weather-days,.weather-hours{grid-template-columns:1fr}
  .hero-main{flex-wrap:wrap;gap:10px}
  .hero-forecast{width:100%;min-width:0}
  .detail-readings{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-results{gap:12px}
  .stats-stations{max-height:none}
}

/* ---- Landing pública y captación de fincas -------------------------------- */
.landing-hero{max-width:760px;margin:5vh auto 0;text-align:center}
.landing-hero h1{font-size:clamp(30px,6vw,52px);letter-spacing:-.04em;line-height:1.05}
.landing-lead{color:#54705c;font-size:18px;line-height:1.6;max-width:560px;margin:0 auto 28px}
.cta{font-size:17px;padding:16px 30px;border-radius:11px;background:var(--c-primary);color:white;box-shadow:0 10px 24px #1f624133}
.cta:hover{background:var(--c-primary-dark)}
.landing-login{color:var(--c-muted);font-size:14px;margin:18px 0 0}
.landing-login a{color:var(--c-primary);font-weight:700}
.landing-points{list-style:none;padding:0;margin:38px auto 0;display:grid;gap:12px;text-align:left;max-width:560px}
.landing-points li{background:white;border:1px solid #e0e6df;border-radius:var(--r-lg);padding:15px 18px;font-size:14px;color:#3d5145;box-shadow:0 4px 14px #17352508}
#lead-section{max-width:760px;margin:34px auto 0}
.span-all{grid-column:1/-1}
.ok{color:#1f7043;font-size:15px;margin:0}
.honeypot{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- Cuenta: canales de aviso y fincas ------------------------------------ */
.contact-block,.farm-block{border-top:1px solid #edf0ec;padding-top:16px;margin-top:16px}
.contact-block:first-of-type,.farm-block:first-child{border-top:0;padding-top:0;margin-top:8px}
.contact-verify{margin-top:10px;display:grid;gap:8px;justify-items:start}
.farm-list{display:grid;gap:18px;margin:8px 0 18px}
.farm-devices{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.farm-devices .chip{background:#edf4ee;color:#2b5a3f;font-size:13px;font-weight:650;padding:6px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:7px}
.chip-remove{background:transparent;color:#5d6f62;padding:0;font-size:15px;line-height:1;width:18px;height:18px;border-radius:var(--r-round)}
.chip-remove:hover{background:#d8e6dc;color:var(--c-danger)}

/* ---- Panel orientado a la finca ------------------------------------------- */
.landing-support,.support-line{color:#5d6f62;font-size:14px}
.landing-support a,.support-line a{color:var(--c-primary);font-weight:700}
.farm-overview{display:grid;gap:14px;margin-top:6px}
.overview-farm{border:1px solid #e3ebe4;border-left:5px solid #2f8a55;border-radius:var(--r-lg);padding:15px 17px;background:#fbfdfb}
.overview-farm.tone-alert{border-left-color:var(--c-alert);background:#fdf5f4}
.overview-farm.tone-warn{border-left-color:#c08a1e;background:var(--c-warm)}
.overview-farm.tone-muted{border-left-color:#b7c2b9;background:#f7f9f6}
.overview-farm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.overview-farm-head strong{font-size:17px;color:var(--c-body)}
.overview-tag{font-size:12px;font-weight:750;padding:4px 10px;border-radius:var(--r-pill);background:#e6f2ea;color:#1f7043;white-space:nowrap}
.overview-tag.tone-alert{background:#f7dcd8;color:#9b2f26}
.overview-tag.tone-warn{background:#f6eccf;color:#8a6414}
.overview-tag.tone-muted{background:#e9ede8;color:var(--c-muted)}
.overview-stations{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.overview-station{display:flex;align-items:center;gap:10px;font-size:14px;color:#3d5145}
.overview-dot{width:10px;height:10px;border-radius:var(--r-round);background:#2f8a55;flex:0 0 auto}
.overview-station.tone-alert .overview-dot{background:var(--c-alert)}
.overview-station.tone-warn .overview-dot{background:#c08a1e}
.overview-station.tone-muted .overview-dot{background:#b7c2b9}
.overview-station-name{font-weight:700;color:var(--c-body)}
.overview-station-text{color:#5b6a60}
.overview-updated{color:var(--c-muted);font-size:12px;margin:2px 0 0}
.plain-alerts{display:grid;gap:10px;margin-bottom:6px}
.plain-alert{border:1px solid #e3ebe4;border-left:5px solid #c08a1e;border-radius:11px;padding:13px 15px;background:var(--c-warm)}
.plain-alert.tone-alert{border-left-color:var(--c-alert);background:#fdf5f4}
.plain-alert-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plain-alert-head strong{color:var(--c-body)}
.plain-alert-meta{color:var(--c-muted);font-size:13px;margin:6px 0 0}
.technical-details{margin-top:22px;border:1px solid #e0e6df;border-radius:var(--r-xl);background:#f7faf7;padding:5px 16px 16px}
.technical-details>summary{cursor:pointer;font-weight:750;color:var(--c-primary);padding:12px 4px;font-size:15px}
.technical-details[open]>summary{margin-bottom:6px}

/* ---- Páginas públicas de la landing --------------------------------------- */
.landing-section{max-width:900px;margin:56px auto 0;padding:0 2px}
.landing-section h2{font-size:clamp(22px,3.4vw,30px);letter-spacing:-.03em;margin-bottom:18px}
.landing-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.landing-steps li{background:white;border:1px solid #e0e6df;border-radius:var(--r-xl);padding:18px;box-shadow:0 5px 18px #17352508}
.landing-steps strong{display:block;color:var(--c-primary);margin-bottom:8px;font-size:15px}
.landing-steps span{display:block;color:#5b6a60;font-size:14px;line-height:1.55}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:6px}
.demo-card{border:1px solid #e3ebe4;border-left:5px solid #2f8a55;border-radius:var(--r-xl);padding:18px;background:#fbfdfb}
.demo-card.tone-alert{border-left-color:var(--c-alert);background:#fdf5f4}
.demo-card.tone-warn{border-left-color:#c08a1e;background:var(--c-warm)}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.demo-card p{margin:0;color:#5b6a60;font-size:14px;line-height:1.55}
a.cta{display:inline-block;text-decoration:none;color:white}
.cta.secondary{background:#edf4ee;color:var(--c-primary);box-shadow:none;padding:12px 22px;font-size:15px}
.cta.secondary:hover{background:#dfeae1;color:var(--c-primary-dark)}
.problem-list{margin:0 0 22px;padding-left:20px;color:#3d5145;display:grid;gap:8px;line-height:1.55;font-size:15px}
.comparison-table td:first-child{font-weight:700;color:var(--c-body)}
.alert-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:4px 0 18px}
.alert-example{border:1px solid #e3ebe4;border-left:5px solid #c08a1e;border-radius:var(--r-lg);padding:15px 17px;background:var(--c-warm)}
.alert-example.tone-alert{border-left-color:var(--c-alert);background:#fdf5f4}
.alert-example.tone-muted{border-left-color:#b7c2b9;background:#f7f9f6}
.alert-example strong{display:block;margin-bottom:6px;color:var(--c-body)}
.alert-example p{margin:0;color:#5b6a60;font-size:14px;line-height:1.5}
.landing-section.lead-block{max-width:760px}
.landing-section.lead-block.final{margin-top:60px}

/* Portada pública basada en mediciones observadas, no en valores de ejemplo. */
.topnav .nav-access{font-weight:800;background:#e5f2e9;color:var(--c-primary-dark)}
.topnav .nav-access:hover{background:var(--c-surface);color:var(--c-brand)}
.landing-view{padding-bottom:28px}
.public-first-section{max-width:1040px;margin-top:24px;padding:28px 30px;border:1px solid #dce8df;border-radius:22px;background:linear-gradient(145deg,#f8fcf8,#fff);box-shadow:0 12px 36px #153b2b0d}
.public-first-section h1{font-size:clamp(30px,5vw,48px);letter-spacing:-.04em;line-height:1.05;margin-bottom:12px}
/* Un solo bloque hero: la tarjeta abre el bloque y el titular y la entradilla
   van justo debajo, con un ritmo común, en lugar de quedar sueltos. */
.public-hero{display:grid;gap:14px}
.public-hero>.landing-lead{max-width:740px;margin:0;text-align:left;font-size:16px}
.public-hero>.landing-actions{margin-top:4px}
/* Nota técnica de la portada: plegada y solo en la vista pública, para no
   repetirla al pie de todas las secciones privadas (que ya tienen su propia
   documentación en el panel). */
.landing-footnote{margin:26px 0 4px;padding:0 4px;max-width:1120px}
.landing-footnote summary{cursor:pointer;color:var(--c-primary);font-weight:650;font-size:14px}
.landing-footnote .footnote{margin:10px 0 0;padding:0;max-width:none}
.landing-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.public-loading{min-height:52px;display:flex;align-items:center;gap:10px;color:#617267;font-size:14px}
.loading-dot{width:10px;height:10px;border-radius:var(--r-round);background:#3b8b5d;box-shadow:0 0 0 5px #3b8b5d1a;animation:public-pulse 1.2s ease-in-out infinite alternate}
@keyframes public-pulse{to{opacity:.38;transform:scale(.8)}}
.public-data-card{border:1px solid #dfe9e1;border-radius:16px;background:white;padding:20px;box-shadow:0 5px 18px #153b2b08}
.public-now-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.public-now-heading h3{font-size:19px;margin:2px 0 4px}
.public-now-heading p:last-child{margin:0;color:var(--c-muted);font-size:13px}
.public-now-readings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.public-now-readings>div{display:grid;gap:5px;padding:18px;border-radius:13px;background:#f5f9f5}
.public-now-readings span{color:#5c6d61;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.public-now-readings strong{font-size:clamp(32px,7vw,52px);line-height:1.05;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--c-primary-dark)}
.public-now-readings small{color:var(--c-muted);font-size:12px}
.public-update{margin:14px 0 0;color:#58685d;font-size:13px}
.public-state-card{padding:15px 17px;border:1px solid #e0e6df;border-radius:var(--r-lg);background:#f7f9f6;color:#55645a;line-height:1.55}
.public-state-card.tone-warn{border-color:#ecd9ae;background:var(--c-warm);color:#775d1a}
.public-state-card.tone-muted{border-color:var(--c-border);background:#f7f9f6}
.public-data-card.is-stale{border-color:#ecd9ae;background:#fffdf8}
.section-intro{max-width:760px;color:#5b6a60;font-size:15px;line-height:1.6}
.public-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.public-chart-grid>.chart-box{min-width:0}
.farm-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:20px}
.farm-value-grid article{padding:19px;border:1px solid #e0e9e1;border-radius:var(--r-xl);background:var(--c-surface)}
/* El icono ya no es un emoji con tamaño de fuente: es un SVG con lado propio. */
.farm-value-grid article>.nav-icon,.tools-preview article>.nav-icon{width:26px;height:26px;color:var(--tr-forest)}
.farm-value-grid h3,.tools-preview h3{margin:8px 0 5px;font-size:16px;color:#234331}
.farm-value-grid p,.tools-preview p{margin:0;color:#5c6d61;font-size:14px;line-height:1.5}
.tools-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}
.tools-preview article{display:flex;align-items:flex-start;gap:13px;padding:17px;border:1px solid #e0e9e1;border-radius:var(--r-xl);background:#fbfdfb}
.tools-preview h3{margin-top:0}
.access-link{display:inline-flex;align-items:center;justify-content:center;padding:13px 21px;border-radius:var(--r-md);background:var(--c-primary);color:white;font-weight:750;text-decoration:none}
// Las tres vías de acceso: cada tarjeta declara su resultado antes del enlace,
// para que elegir una no dependa de la FAQ del final.
.vias-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.via-card{display:flex;flex-direction:column;padding:21px;border:1px solid #e0e9e1;border-radius:var(--r-xl);background:var(--c-surface)}
.via-card h3{margin:7px 0 9px;font-size:17px;color:#234331}
.via-outcome{margin:0 0 10px;color:#3f5147;font-size:14px;line-height:1.55}
.via-outcome strong{color:var(--c-primary)}
.via-card .hint{margin:0 0 16px}
.via-link{margin-top:auto;display:inline-block;align-self:flex-start;padding:11px 19px;border-radius:var(--r-md);background:var(--c-primary);color:var(--c-surface);font-weight:750;font-size:15px;text-decoration:none}
// Etiqueta de procedencia: sustituye a las notas repetidas al pie de cada
// bloque. Va siempre visible; la explicación completa está en su title y en la
// leyenda desplegable del contexto.
.origin-badge{letter-spacing:.02em}
.origin-legend{margin:12px 0 0;border:1px solid #e0e9e1;border-radius:11px;background:#fbfdfb;padding:2px 14px 12px}
.origin-legend>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--c-primary);padding:10px 2px}
.origin-legend dl{margin:0;display:grid;gap:9px}
.origin-legend dl div{display:flex;gap:10px;align-items:baseline}
.origin-legend dt{flex:0 0 auto}
.origin-legend dd{margin:0;font-size:13px;color:#5c6d61;line-height:1.5}
.sim-origin{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.sim-origin .hint{margin:0}
.access-link:hover{background:var(--c-primary-dark)}
/* El desplazamiento de esta sección lo regula el scroll-padding-top global
   (html), que ya descuenta la altura real de la cabecera. Antes declaraba
   18px aquí, suficientes para nada: la cabecera mide bastante más. */
.access-request{scroll-margin-top:0}
.public-forecast{margin-top:16px;padding:15px;border:1px solid #e1e9e2;border-radius:var(--r-xl);background:#f8faf7}
.public-forecast h3{font-size:17px}
.public-metadata{display:grid;gap:2px;margin:12px 0}
.public-metadata .aemet-proximity{margin:4px 0}
.contact-public{margin-bottom:20px}
.contact-public .landing-support{display:block}

/* Demostración agrícola simulada: independiente de las mediciones reales. */
.sim-shell{border:1px solid #dce8df;border-radius:18px;background:var(--c-surface);padding:20px;box-shadow:0 8px 26px #153b2b0a}
.sim-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.sim-tab{padding:10px 17px;border:1px solid #cfe0d4;border-radius:999px;background:#f7faf7;color:#2c4a38;font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.sim-tab:hover{border-color:#8fb9a0}
.sim-tab.is-active{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-surface)}
.sim-panel{display:grid;gap:16px}
.sim-scenario-title{margin:0;font-size:17px;font-weight:750;color:var(--c-body)}
.sim-threshold-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:14px 0 6px;font-weight:700;color:var(--c-body)}
.sim-threshold-label output{font-variant-numeric:tabular-nums;color:var(--c-primary);font-size:17px}
.sim-shell input[type=range]{width:100%;accent-color:var(--c-primary)}
.sim-threshold-hint{margin:6px 0 0;color:var(--c-muted);font-size:13px}
.sim-chart svg{width:100%;height:auto;display:block}
.sim-gridline{stroke:#e6ede7;stroke-width:1}
.sim-axis-label{fill:#6d7b72;font-size:11px}
.sim-threshold-line{stroke:var(--c-alert);stroke-width:2;stroke-dasharray:6 4}
.sim-threshold-svg{fill:var(--c-alert);font-size:11px;font-weight:700}
.sim-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0;padding:0;list-style:none;color:#4d5c53;font-size:13px}
.sim-legend li{display:flex;align-items:center;gap:7px}
.sim-swatch{width:17px;height:4px;border-radius:3px;background:var(--swatch,#c97742);flex:none}
.sim-swatch.is-dashed{background:repeating-linear-gradient(90deg,var(--swatch,#5a7d9a) 0 6px,transparent 6px 10px)}
.sim-swatch.is-threshold{background:repeating-linear-gradient(90deg,#b23c30 0 6px,transparent 6px 10px)}
.sim-result{border:1px solid #e3ebe4;border-radius:var(--r-xl);background:#f9fbf9;padding:15px 17px}
.sim-result-rows{display:grid;gap:9px}
.sim-result-row{display:grid;grid-template-columns:17px minmax(140px,auto) 1fr;align-items:center;gap:9px;font-size:14px}
.sim-result-row strong{color:var(--c-body)}
.sim-result-row>span:last-child{color:#4f5e55}
.sim-summary{margin-top:13px;padding-top:12px;border-top:1px solid #e6ede7}
.sim-facts{margin:0 0 8px;color:#3d5145;font-size:14px}
.sim-note{margin:0 0 6px;padding:10px 13px;border-radius:11px;font-size:14px;line-height:1.5;border:1px solid #e0e6df;background:#f7f9f6;color:#55645a}
.sim-note.tone-warn{border-color:#ecd9ae;background:var(--c-warm);color:#775d1a}
.sim-note.tone-alert{border-color:#f0c9c4;background:#fdf5f4;color:#8d3227}
.sim-safety{margin:16px 0 0;padding:12px 14px;border-radius:var(--r-lg);background:#eef5f0;color:#3f5c4b;font-size:13px;line-height:1.55}
.sim-lead{margin-top:26px;padding-top:22px;border-top:1px dashed #cfe0d4}
.sim-lead-title{margin:0 0 4px;font-size:19px;font-weight:750;color:var(--c-body)}
@media(max-width:760px){
  .sim-result-row{grid-template-columns:17px 1fr}
  .sim-result-row>span:last-child{grid-column:2}
}
@media(max-width:760px){
  .public-first-section{margin-top:14px;padding:20px 16px;border-radius:16px}
  .public-chart-grid{grid-template-columns:1fr}
  .farm-value-grid,.tools-preview{grid-template-columns:1fr}
  .vias-grid{grid-template-columns:1fr}
  .origin-legend dl div,.sim-origin{flex-wrap:wrap}
  .public-now-heading{display:block}
  .public-now-heading>.badge{display:inline-block;margin-top:10px}
}
@media(max-width:480px){
  .public-now-readings{gap:8px}
  .public-now-readings>div{padding:12px}
  .public-now-readings strong{font-size:clamp(27px,8vw,38px)}
  .landing-actions{display:grid}
  .landing-actions .cta{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){.loading-dot{animation:none}}

/* Acceso sin contraseña */
.password-fallback{margin-top:22px;border-top:1px solid #edf0ec;padding-top:16px}
.password-fallback summary{cursor:pointer;font-weight:700;color:var(--c-primary);font-size:14px}
.password-fallback[open] summary{margin-bottom:14px}
.password-fallback form{display:grid;gap:14px}
#magic-status{min-height:1.2em;color:#49745a;font-size:13px}

/* Consentimiento publicitario */
.consent-grid{display:flex;flex-wrap:wrap;gap:12px 22px;margin:12px 0}
.consent-grid .check{flex:0 0 auto}
.badge-warn{background:#fdf3dd;color:#8a6410}


/* ---- Bandeja de envíos manuales ------------------------------------------- */
.row-actions .button-link{display:inline-block;background:var(--c-primary);color:white;text-decoration:none;padding:8px 12px;border-radius:var(--r-sm);font-weight:700;font-size:13px;margin-right:6px}
.row-actions .button-link:hover{background:var(--c-primary-dark)}
.table-wrap pre{white-space:pre-wrap;word-break:break-word;max-width:420px;background:var(--c-surface-2);padding:10px;border-radius:var(--r-sm);font-size:12px;margin:0}

/* ---- Preferencias de alertas ---------------------------------------------- */
.prefs-group{border:1px solid #e0e6df;border-radius:var(--r-md);padding:12px 14px;display:flex;flex-wrap:wrap;gap:12px 18px}
.prefs-group legend{padding:0 6px;font-size:13px;font-weight:700;color:#45544a}
.prefs-group .check{flex:0 0 auto}

/* ---- Panel sencillo: tarjetas de estado ----------------------------------- */
.state-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.state-card{border:1px solid #e3ebe4;border-left:5px solid #2f8a55;border-radius:var(--r-xl);padding:16px 18px;background:#fbfdfb;display:flex;flex-direction:column;gap:6px}
.state-card.tone-warn{border-left-color:#c08a1e;background:var(--c-warm)}
.state-card.tone-alert{border-left-color:var(--c-alert);background:#fdf5f4}
.state-card.tone-muted{border-left-color:#b7c2b9;background:#f7f9f6}
.state-card-head{display:flex;align-items:center;gap:8px}
.state-card-head h3{font-size:15px;margin:0;flex:1}
.state-icon{font-size:18px}
.state-value{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:2px 0 0;color:var(--c-ink)}
.state-since{font-size:12px;color:var(--c-muted);margin:0}
.state-meaning{font-size:13px;color:#4a5a50;margin:6px 0 0}
.state-action{font-size:13px;font-weight:650;color:var(--c-primary);margin:0}
.next-risk{border:1px solid #e3ebe4;border-left:5px solid #2f8a55;border-radius:var(--r-xl);padding:16px 18px;background:#fbfdfb}
.next-risk.tone-warn{border-left-color:#c08a1e;background:var(--c-warm)}
.next-risk.tone-alert{border-left-color:var(--c-alert);background:#fdf5f4}
.next-risk.tone-muted{border-left-color:#b7c2b9;background:#f7f9f6}

/* ---- Alertas comprensibles ------------------------------------------------- */
.alert-cards{display:grid;gap:12px}
.alert-card{border:1px solid #e3ebe4;border-left:5px solid #c08a1e;border-radius:var(--r-xl);padding:15px 18px;background:var(--c-warm)}
.alert-card.tone-alert{border-left-color:var(--c-alert);background:#fdf5f4}
.alert-card.tone-muted{border-left-color:#b7c2b9;background:#f7f9f6}
.alert-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.alert-card-head h3{font-size:17px;margin:0;color:var(--c-body)}
.alert-card-explain{font-size:14px;color:#3d5145;line-height:1.55;margin:8px 0}
.alert-card-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--c-muted)}
.alert-card-meta li{white-space:nowrap}
.alert-card-tech{margin-top:10px}
.alert-card-tech pre{white-space:pre-wrap;word-break:break-word;background:var(--c-surface);padding:10px;border-radius:var(--r-sm);font-size:11px;margin:6px 0 0}
.alert-card-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.alert-card-actions button{padding:6px 12px;font-size:13px}
.hero-first>.eyebrow{margin:0 0 10px}
.hero-first-slot{margin-bottom:18px}
.hero-first-slot .station-hero{margin:0}
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.admin-tabs button{background:white;color:var(--c-ink);border:1px solid #cad4cb;padding:10px 16px}
.admin-tabs button:hover{background:#eef4ef}
.admin-tabs button.active{background:var(--c-primary);border-color:var(--c-primary);color:white}
input[data-search]{max-width:360px;margin:0 0 12px;display:block}

/* ---- SEO local, FAQ, legales y pie ---------------------------------------- */
.faq{display:grid;gap:10px}
.faq details{background:white;border:1px solid #e0e6df;border-radius:var(--r-lg);padding:14px 18px}
.faq summary{cursor:pointer;font-weight:700;color:var(--c-primary)}
.faq p{margin:10px 0 0;color:#4a5a50;line-height:1.6}
.legal-page{max-width:820px}
.legal-page h1{font-size:clamp(24px,3.4vw,34px)}
.legal-page h2{font-size:20px;margin-top:28px}
.legal-page p,.legal-page li{color:#3d5145;line-height:1.65}
.legal-page a{color:var(--c-primary)}
.legal-page code{background:#edf4ee;padding:2px 6px;border-radius:6px;font-size:13px}
.site-footer{background:var(--c-brand);color:#cfe0d4;margin-top:54px;padding:28px max(22px,calc((100% - 1180px)/2))}
.footer-inner{max-width:1180px;margin:0 auto;display:grid;gap:10px}
.footer-inner p{margin:0}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.footer-links a{color:#b9d2be;text-decoration:none;font-size:14px;font-weight:650}
.footer-links a:hover{color:white;text-decoration:underline}
.footer-support{font-size:14px}
.footer-support a{color:#b9d2be}
@media(max-width:520px){.site-footer{padding:22px 18px}}
@media(max-width:760px){.landing-hero{margin-top:2vh}}
/* Interacción cómoda y avisos persistentes desde el campo. */
.connection-notice { position: sticky; top: 0; z-index: 1000; margin: 0; padding: 12px 16px; background: #fff1b8; color: #382900; border-bottom: 2px solid #806000; line-height: 1.4; overflow-wrap: anywhere; }
button, .button-link, input:not([type="checkbox"]), select { min-height: 44px; }
button:disabled { opacity: .65; cursor: wait; }
/* El anillo marca el foco de teclado real: los objetivos programáticos
   (tabindex="-1": tarjeta del tiempo, encabezados de sección, <main> del
   salto) reciben foco para orientar, no para tabular. */
[tabindex="-1"]:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
dialog:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid var(--focus, #1766b0); outline-offset: 3px; }
[data-prospects] summary { padding: 12px 0; cursor: pointer; overflow-wrap: anywhere; }
.data-offline .metric { border: 2px dashed #806000; }
/* En móvil, al mostrarse el aviso fijo, la barra superior deja de fijarse para
   no quedar tapada por él; el propio aviso permanece visible al hacer scroll. */
body.data-offline .topbar { position: static; }
/* Las tablas anchas se desplazan en horizontal; se suaviza el gesto táctil. */
.table-wrap { -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .rule-form { grid-template-columns: 1fr; }
  .row-actions { flex-wrap: wrap; gap: 8px; }
  input, select, textarea { font-size: 16px; max-width: 100%; }
  .panel { overflow-wrap: anywhere; }
  /* Las acciones de la tabla ocupan el ancho y quedan cómodas al tocar. */
  td.row-actions .button-link { width: 100%; text-align: center; }
  .stats-stations { max-height: none; }
}
/* La medición opcional vive en el pie oscuro: se presenta como tarjeta clara
   para que texto, enlace y botones mantengan un contraste suficiente. */
.analytics-choice { max-width: 1000px; margin: 18px auto 0; padding: 16px; background: var(--c-surface); color: var(--c-ink); border: 1px solid #dfe7df; border-radius: var(--r-xl); }
.analytics-choice [data-choice] { border: 1px solid #1766b0; border-radius: var(--r-sm); padding: 12px; }
.analytics-choice p { color: #3d5145; }
.analytics-choice a { color: var(--c-primary); font-weight: 700; }
.analytics-choice [data-status] { color: #45544a; }
.analytics-choice .row-actions { margin-top: 10px; }
/* La portada enlaza a las herramientas; se refuerza el color de marca. */
.tools-preview a { color: var(--c-primary); font-weight: 700; font-size: 14px; }
.tools-preview a:hover { text-decoration: underline; }
/* Respeta la zona segura superior (notch) en PWA instalada con viewport-fit=cover. */
@supports (padding: max(0px)) {
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
  .connection-notice { padding-top: max(12px, env(safe-area-inset-top)); }
}

/* F18: filtros avanzados plegados en el centro de avisos. */
.filters-advanced summary{cursor:pointer;color:var(--c-primary);font-weight:700;font-size:13px;align-self:center;padding:10px 0}
.filters-advanced summary::before{content:'▸ '}
.filters-advanced[open] summary::before{content:'▾ '}
.filters-advanced[open]{display:grid;gap:14px;flex-basis:100%}

/* F17: estado de alta de avisos junto al listado vacío. */
.signup-steps{list-style:none;margin:14px 0;padding:0;display:grid;gap:0}
.signup-steps li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-top:1px solid #edf0ec;padding:11px 0;font-size:13px}
.signup-steps li span:last-of-type{color:#3f4f45}

/* F21: la columna de presión de la tabla de mediciones es opcional; por defecto
   se oculta para dejar temperatura, humedad y estado a primera vista. */
.measurements-table:not(.show-pressure) .pressure-cell,
.measurements-table:not(.show-pressure) th:nth-child(4){display:none}

/* F22: comparación pública en tarjetas, dos valores enfrentados con sus horas
   propias, diferencia debajo y metadatos desplegables. Sin barra horizontal. */
.comparison-card{background:white;border:1px solid #e0e6df;border-radius:var(--r-xl);padding:18px;margin:14px 0;box-shadow:var(--shadow-card)}
.comparison-card h3{font-size:15px;margin:0 0 12px;color:var(--c-ink)}
.comparison-readings{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.reading{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:var(--r-md);background:var(--c-surface-2)}
.reading-local{background:#eef6f0}
.reading-aemet{background:#f0f4f6}
.reading-label{font-size:11px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em}
.reading strong{font-size:23px;letter-spacing:-.03em}
.reading-time{font-size:12px;color:#3f4f45;font-weight:650}
.reading-state{font-size:11px;color:var(--c-muted)}
.comparison-diff{margin-top:12px;padding-top:12px;border-top:1px solid #edf0ec;display:flex;flex-direction:column;gap:4px}
.comparison-diff strong{font-size:18px}
.comparison-diff span{font-size:12px;color:var(--c-muted)}
.comparison-metadata{margin-top:10px;font-size:12px}
.comparison-metadata summary{cursor:pointer;color:var(--c-primary);font-weight:650}
.comparison-metadata[open] summary{margin-bottom:6px}
@media(max-width:560px){.comparison-readings{grid-template-columns:1fr}}

/* F23: la solicitud se reduce a nombre, teléfono y zona; el resto (actividad,
   interés, cultivo, correo, notas) queda en un desplegable opcional. */
.lead-details{border:1px solid #e0e6df;border-radius:var(--r-md);padding:6px 14px;margin-top:8px;background:#fbfdfb}
.lead-details summary{cursor:pointer;font-weight:700;color:var(--c-primary);padding:10px 4px;font-size:13px}
.lead-details[open] summary{margin-bottom:8px}
.lead-details .rule-form{gap:14px}

/* F24: estado "enviado" del formulario de enlace mágico. */
#magic-sent{padding:8px 0}
#magic-sent strong{word-break:break-all}
#magic-sent-status{min-height:1.2em}
.button-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
#magic-resend-hint{font-size:13px;color:var(--c-muted)}
#magic-resend-countdown{font-weight:700;color:var(--c-primary)}

/* F25: el refresco del panel se ve: el botón «Actualizar», la marca de última
   consulta (no es la última medición) y la carga mientras llega la respuesta.
   La marca ocupa su propia línea dentro de .row-actions para no comprimir el
   resto de controles. */
.refresh-meta{flex:1 0 100%;margin:0;text-align:right}
[data-refresh][disabled]{opacity:.65;cursor:default}
@media(max-width:560px){.refresh-meta{text-align:left}}