:root{font-family:Inter,system-ui,Arial,sans-serif;background:#eef3f8;color:#18324c}*{box-sizing:border-box}body{margin:0}header{background:#102e4b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 3%;gap:20px}.brand{display:flex;align-items:center;gap:16px}.brand img{width:140px;background:white;padding:7px;border-radius:6px}.brand h1{font-size:22px;letter-spacing:.07em;margin:0}.brand h1 span{color:#86c9fa}.brand p{margin:5px 0 0;color:#bdd0e2}.header-right{display:flex;gap:22px;align-items:center}.header-right a{color:#c5e5ff}#clock{font-size:20px;font-variant-numeric:tabular-nums}main{padding:20px 2.5%;max-width:1900px;margin:auto}.warning{border-left:5px solid #d09b30;background:#fff6e4;color:#775218;padding:10px 16px;margin-bottom:15px;border-radius:6px;font-size:12px}.panel{background:white;border:1px solid #d7e2eb;border-radius:12px;padding:18px;box-shadow:0 3px 14px #193b5710;min-width:0}.alerts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.eyebrow{font-size:11px;font-weight:800;color:#4a779b;letter-spacing:.09em}h2{font-size:19px;margin:8px 0 14px}.not-connected{display:inline-block;background:#e7ebef;color:#44566a;border-radius:8px;padding:11px 14px;font-size:17px;font-weight:750}p{color:#62788d;line-height:1.5}.panel a{color:#1b6096;text-decoration:none;font-weight:650}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:14px 0}.metric-label{font-size:12px;color:#627b93;font-weight:700}.metric-value{font-size:30px;font-weight:800;margin:10px 0 3px;overflow-wrap:anywhere}.metric-sub{font-size:12px;color:#647c91}.two{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(310px,1fr);gap:14px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.subtle{font-size:12px;color:#6b7f92}.ranges{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.ranges button,footer button{border:1px solid #bbd2e3;background:#eef6fc;color:#1e5a85;padding:8px 12px;border-radius:7px;cursor:pointer}.ranges button.active{background:#19649d;color:#fff}.chart-wrap{position:relative}.chart-wrap svg{display:block;width:100%;height:auto;touch-action:pan-y}.tooltip{position:absolute;background:#173751;color:white;padding:9px 12px;border-radius:8px;pointer-events:none;font-size:13px;z-index:3;box-shadow:0 8px 20px #0004;white-space:nowrap}.thresholds{display:flex;flex-wrap:wrap;gap:7px}.thresholds span{padding:7px 10px;border-radius:40px;font-weight:750;font-size:12px}.yellow{background:#ffe88d}.orange{background:#ef8a40;color:#fff}.red{background:#d94147;color:#fff}.forecast-row{display:flex;justify-content:space-between;border-bottom:1px solid #e2ebf2;padding:9px 0;gap:10px}.forecast-row b{text-align:right}.reservoirs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.reservoir{background:#f3f8fc;border:1px solid #e0eaf3;padding:16px;border-radius:9px}.reservoir strong{font-size:18px}.reservoir .big{font-size:25px;font-weight:800;margin:10px 0}.fill{background:#d9e6ef;height:10px;border-radius:9px;overflow:hidden}.fill i{display:block;height:100%;background:#3d90c4}.stamp{font-size:12px;color:#688196}footer{display:flex;justify-content:space-between;align-items:center;margin:16px 0;gap:10px}footer span{color:#6b7f92;font-size:12px}@media(max-width:1000px){.two{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){header{flex-direction:column;align-items:flex-start}.alerts,.reservoirs{grid-template-columns:1fr}.brand img{width:100px}.brand h1{font-size:17px}.metrics{grid-template-columns:1fr 1fr}.metric-value{font-size:23px}.panel{padding:13px}.section-title{align-items:flex-start;flex-direction:column}}
/* V2.9: compact dashboard, keeping original AEMET hourly graph and CHJ hover. */
main{padding:10px 1.5%;max-width:2000px}.warning{margin-bottom:9px;padding:7px 11px}.panel{padding:11px}.panel h2{font-size:15px;margin:4px 0 8px}.eyebrow{font-size:10px}.top-grid{display:grid;grid-template-columns:minmax(250px,0.65fr) minmax(0,1.35fr);gap:10px;align-items:stretch}.top-right{min-width:0}.map112{display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column}.map112 img{display:block;max-height:300px;max-width:100%;width:auto;object-fit:contain}.map112 .subtle{font-size:10px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0}.metrics .panel{padding:8px;background:#f3f8fc}.metric-value{font-size:19px;margin:4px 0}.metric-label{font-size:10px}.metric-sub{font-size:10px}.forecast-row{padding:4px 0;font-size:12px}.aemet-full{margin:10px 0}.two{grid-template-columns:1fr}.chart-wrap{max-height:290px}.chart-wrap svg{max-height:260px}.ranges{margin:5px 0}.ranges button{padding:5px 8px}.thresholds span{padding:4px 8px}.reservoirs{gap:8px}.reservoir{padding:9px}.reservoir strong{font-size:14px}.reservoir .big{font-size:19px;margin:4px 0}.reservoir p,.reservoir .stamp{font-size:11px;margin:4px 0}.reservoir .fill{height:7px}
/* Original hourly meteorological chart: horizontally scrollable, with values aligned by hour. */
.forecast-panel{box-shadow:none;border:0;padding:0}.forecast-heading{display:flex;justify-content:space-between;align-items:center}.forecast-heading h2{display:none}.forecast-heading .muted{font-size:11px;margin:0 0 6px}.forecast-scroll{overflow-x:auto;overflow-y:hidden;width:100%;border:1px solid #dbe5ed;border-radius:8px}.forecast-inner{display:flex;width:max-content;min-width:100%;font-size:11px}.met-labels{position:sticky;left:0;z-index:3;background:#eaf2f9;width:108px;flex-shrink:0;border-right:1px solid #d2e0ea}.met-labels>div{height:25px;padding:5px 7px;border-bottom:1px solid #d7e4ee;white-space:nowrap}.met-hours{position:relative;display:flex}.met-hour{width:76px;flex:0 0 76px;border-right:1px solid #e0e9f1;text-align:center}.met-hour>div{height:25px;border-bottom:1px solid #e4edf4;padding:3px 0}.met-day,.met-time{font-weight:700}.met-sky{font-size:16px}.met-prob-overlay{position:absolute;left:0;top:150px;width:100%;height:25px;pointer-events:none}.met-prob-band{position:absolute;top:0;height:25px;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #ffffffa0;font-size:11px;color:#1e3448}.met-prob-band small{font-size:9px}.met-integrated{position:absolute;top:225px;left:0;pointer-events:none}.met-hours,.met-labels{padding-bottom:320px}.met-integrated svg{display:block}.met-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;margin:7px 0}.aemet-full .muted{font-size:11px;margin:5px 0}.met-prob-band{background:#d8eafa}.met-prob-band.low{background:#d8eafa}.met-prob-band.medium{background:#ffe1a0}.met-prob-band.high{background:#ffb1a0}
@media(max-width:950px){.top-grid{grid-template-columns:1fr}.map112 img{max-height:240px}.metrics{grid-template-columns:repeat(2,1fr)}}
.met-prob-band.prob-min{background:#e4f3fc}.met-prob-band.prob-low{background:#cce5f6}.met-prob-band.prob-mid{background:#ffe7a4}.met-prob-band.prob-high{background:#ffc3ad}.met-prob-band.prob-none{background:#e5e9ed}

/* V3.0: CHJ en el cuadrante superior derecho, junto a 112CV */
.top-grid{grid-template-columns:minmax(270px,.65fr) minmax(0,1.35fr)}
.top-right .chart-wrap svg{max-height:205px}.top-right .chart-wrap{max-height:220px}
.top-right .metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.top-right .metric-value{font-size:15px}.top-right .metric-sub{font-size:9px}
.top-right #chart-status{font-size:10px;max-height:35px;overflow:auto}
@media(max-width:1050px){.top-grid{grid-template-columns:1fr}.top-right .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V3.2: pantalla móvil y ventana AEMET dinámica */
.aemet-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:5px 0 10px;font-size:12px}
.aemet-controls button{border:1px solid #b6d0e3;background:#f2f8fc;border-radius:7px;padding:6px 12px;color:#174d75;cursor:pointer}
.aemet-controls button.selected{background:#17679e;color:#fff}
.aemet-controls label{display:flex;align-items:center;gap:5px;margin-left:auto;cursor:pointer}
.met-integrated{pointer-events:auto}.met-integrated svg{overflow:visible}
.aemet-tooltip{position:absolute;z-index:8;pointer-events:none;background:#143650;color:#fff;border-radius:7px;padding:8px 10px;font-size:12px;white-space:nowrap;box-shadow:0 5px 16px #0004}
@media(max-width:700px){
 header{padding:10px 12px;gap:8px}.header-right{width:100%;justify-content:space-between;gap:8px}.header-right a{font-size:12px}#clock{font-size:12px}
 main{padding:8px}.top-grid{grid-template-columns:minmax(0,1fr)}.map112 img{max-height:none;width:100%;max-width:400px}
 .top-right .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics .panel{min-width:0}
 .top-right .chart-wrap svg{max-height:none}.chart-wrap{max-height:none}.reservoirs{grid-template-columns:1fr}
 .section-title{gap:4px}.aemet-controls label{margin-left:0;width:100%}
 .forecast-scroll{max-width:calc(100vw - 44px);-webkit-overflow-scrolling:touch}
 .met-labels{width:95px}.met-labels>div{font-size:10px}
 footer{flex-wrap:wrap}.warning{font-size:11px}
}

/* V3.3: fuentes y lecturas integradas en sus propias gráficas */
.source-stamp{font-size:11px;color:#607b92;margin:5px 0 8px;line-height:1.35}
.chj-summary{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:5px 0}
#chj-latest{font-size:20px;color:#125f99;font-variant-numeric:tabular-nums}
#chart-status:empty{display:none}
.notice112 .source-stamp{margin-top:7px}
@media(max-width:700px){#chj-latest{font-size:18px}.chj-summary{align-items:flex-start;flex-direction:column;gap:0}}

/* V3.4: leyenda AEMET siempre visible antes del gráfico desplazable */
.aemet-full .met-legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:8px 0 10px;padding:8px 11px;background:#f0f6fa;border:1px solid #dbe5ed;border-radius:7px;font-size:12px;font-weight:700}
@media(max-width:700px){.aemet-full .met-legend{gap:8px 14px;font-size:11px}}

/* V3.6: rótulos junto a cada curva, visibles al desplazar las horas */
.met-labels{position:sticky;left:0;z-index:5}
.met-axis-labels{height:320px;display:flex;flex-direction:column;padding:0!important;border:0!important;white-space:normal!important;background:#eaf2f9}
.met-labels .met-axis-labels>div{display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;text-align:center;padding:5px 3px;font-size:11px;font-weight:700;line-height:1.25;white-space:normal;box-sizing:border-box}
.met-axis-temp{height:106px;color:#d66c2e;border-bottom:1px solid #c8d9e8}
.met-axis-hum{height:108px;color:#239579;border-bottom:1px solid #c8d9e8}
.met-axis-rain{height:106px;color:#368bd0}
.met-axis-line{width:27px;height:4px;border-radius:4px;background:currentColor}
.met-axis-bar{width:13px;height:17px;background:currentColor;border-radius:2px}
@media(max-width:700px){.met-labels .met-axis-labels>div{font-size:10px}}

/* V3.7: viento de procedencia, con rosa orientada a la dirección de origen */
.wind-cell{display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;width:100%;height:100%;font-size:11px}
.wind-rose{width:25px;height:25px;min-width:25px;border:1px solid #a4c3d7;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle,#fff 42%,#eef6fb 100%);color:#1769a0}
.wind-rose:before{content:'N';position:absolute;top:-6px;font-size:7px;font-weight:800;color:#557d9c;background:#fff;line-height:8px}
.wind-rose-arrow{display:block;font-size:22px;font-weight:900;line-height:1;transform-origin:center center}
.wind-detail{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;gap:1px}
.wind-detail b{font-size:10px}.wind-detail small{font-size:9px;color:#496f8b}
.wind-unknown{color:#8499a8}

/* 6 filas de 25px (antes eran 9): alinear las curvas con el final de la tabla */
.met-prob-overlay{top:125px}
.met-integrated{top:150px}


/* V3.8: aligned 100px hourly columns, wind rose fits without overlapping */
.met-hour{width:100px!important;min-width:100px!important;flex:0 0 100px!important}
.met-hour .met-wind{overflow:hidden;box-sizing:border-box;padding:1px 2px!important}
.met-hour .wind-cell{gap:5px;font-size:10px;max-width:100%}
.met-hour .wind-rose{width:27px;height:27px;min-width:27px;flex-shrink:0}
.met-hour .wind-detail{min-width:0;white-space:nowrap}
.met-hour .wind-detail b{font-size:10px}.met-hour .wind-detail small{font-size:9px}
.met-gust-value{display:inline-block;padding:3px 7px;border-radius:5px;font-weight:700}
.met-threshold-yellow{background:#ffe27a!important;color:#4b3700!important}
.met-threshold-orange{background:#ef963e!important;color:#fff!important}
.met-threshold-red{background:#d83e46!important;color:#fff!important}
/* Labels remain at the left of each graph; remove redundant top legend */
.met-legend{display:none!important}
@media(max-width:700px){.met-hour{width:100px!important;min-width:100px!important;flex-basis:100px!important}}

/* V3.9: wind compass and sky legibility without altering hourly column alignment */
.met-hour .met-sky{font-size:32px!important;line-height:1.1;min-height:55px}
.met-hour .met-wind{padding:2px 3px!important;box-sizing:border-box;overflow:visible!important;min-height:41px}
.met-hour .wind-cell{gap:7px!important;font-size:11px!important}
.met-hour .wind-rose{width:29px!important;height:29px!important;min-width:29px!important}
.met-hour .wind-detail{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.met-hour .wind-detail b{font-size:11px!important}.met-hour .wind-detail small{font-size:10px!important}
.op-episodes{display:grid;gap:7px;margin:8px 0 12px}.op-episode{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid #cddfea;border-radius:9px;background:#f4f9fc}
.op-episode span{font-size:12px}.op-windows{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0 14px}.op-windows>div{display:flex;flex-direction:column;gap:5px;border:1px solid #cddfea;border-radius:9px;padding:10px;background:#f4f9fc}.op-windows span,.op-windows small{font-size:11px}.op-windows strong{font-size:15px}
@media(max-width:700px){.met-hour .met-sky{font-size:30px!important}.met-hour .wind-cell{gap:5px!important}}

.dashboard-test{background:#e9eff3;color:#4a6376;text-align:center;font-size:10px;padding:6px 12px;letter-spacing:.06em}.header-right{flex-wrap:wrap}

/* Shared manual risk header: text and icon accompany every severity color. */
.risk-header{background:#e8f3fa;color:#215b7b;border-top:1px solid #c6deed;border-bottom:1px solid #c6deed;font-family:Inter,system-ui,sans-serif}.risk-header-inner{max-width:1420px;margin:auto;padding:16px 38px;display:flex;align-items:center;gap:17px}.risk-exclamation{width:46px;height:46px;min-width:46px;border:1px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.9}.risk-header-copy{min-width:0}.risk-header-kicker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:9px;font-weight:800;letter-spacing:.1em}.risk-gravity{padding:3px 7px;border:1px solid currentColor;border-radius:4px;font-size:9px;letter-spacing:.01em;font-weight:700}.risk-header-copy>p{font-size:16px;line-height:1.55;font-weight:650;margin:5px 0 7px;color:inherit;white-space:pre-wrap;overflow-wrap:anywhere}.risk-header-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px 20px;font-size:10px;line-height:1.65;opacity:.95}.risk-header-meta>span,.risk-header-meta>a{display:inline-flex;align-items:center;gap:5px;color:inherit;overflow-wrap:anywhere}.risk-header-meta>a{font-weight:650;text-decoration:underline;text-underline-offset:3px}.risk-header-meta>b{font-weight:650;font-size:9px}.risk-amarilla{background:#fff4ce;color:#66500b;border-color:#e8d48d}.risk-naranja{background:#fff0df;color:#87440f;border-color:#e9bd91}.risk-roja{background:#b53440;color:#fff;border-color:#a52733}.risk-roja .risk-header-meta>a{color:#fff}.risk-unavailable{text-align:center;background:#edf2f5;color:#617888;font-size:10px;line-height:1.7;padding:9px 17px}.risk-editor{background:white;border:1px solid #dce5eb;border-radius:8px;margin-bottom:22px;overflow:hidden;scroll-margin-top:20px}.risk-editor-heading{display:flex;align-items:center;gap:12px;padding:19px 21px}.risk-editor-heading>svg{color:#7797ac}.risk-editor-heading>div{flex:1}.risk-editor-heading h2{font-size:15px;font-weight:700;letter-spacing:-.2px}.risk-editor-heading p{font-size:10px;color:#8299aa;margin-top:5px;line-height:1.6}.risk-editor-heading>.btn{margin-left:auto;white-space:nowrap}.risk-editor-fields{padding:20px 22px;border-top:1px solid #e4ecf1}.risk-editor-description{font-size:11px;line-height:1.8;color:#7b93a5;margin-bottom:20px}.risk-preview-label{font-size:9px;letter-spacing:.09em;font-weight:750;color:#829bab;margin:20px 0 10px}.risk-editor .risk-header{border:1px solid currentColor;border-radius:6px}.risk-editor .risk-header-inner{padding:16px;gap:12px}.risk-editor .risk-header-copy>p{font-size:14px}.risk-editor .risk-header-meta{font-size:9px;gap:6px 12px}.risk-editor .risk-exclamation{width:37px;min-width:37px;height:37px}.risk-editor .risk-exclamation svg{width:24px}.risk-editor-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}.risk-editor>.error-banner,.risk-editor>.success-banner{margin:0 20px 15px}.risk-header a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(min-width:1600px){.risk-header-inner{max-width:1510px}}
@media(max-width:1120px){.risk-header-inner{padding-left:25px;padding-right:25px}}
@media(max-width:560px){.risk-header-inner{padding:14px 17px;gap:11px;align-items:flex-start}.risk-exclamation{width:32px;height:32px;min-width:32px;margin-top:3px}.risk-exclamation svg{width:22px;height:22px}.risk-header-kicker{font-size:8px;gap:7px;letter-spacing:.05em}.risk-gravity{font-size:8px;padding:2px 5px}.risk-header-copy>p{font-size:13px;line-height:1.65;margin-top:7px}.risk-header-meta{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:9px}.risk-editor-heading{padding:17px 15px;gap:9px}.risk-editor-heading h2{font-size:13px;line-height:1.5}.risk-editor-heading p{font-size:9px}.risk-editor-heading>svg{width:18px}.risk-editor-fields{padding:18px 15px}.risk-editor-description{font-size:10px}.risk-editor .risk-header-inner{padding:12px;gap:9px}.risk-editor .risk-header-copy>p{font-size:12px}.risk-editor .risk-exclamation{width:29px;min-width:29px;height:29px}.risk-editor .risk-exclamation svg{width:19px}.risk-editor-actions{gap:6px}.risk-editor-actions .btn{padding:8px 10px;font-size:10px}}
@media print{.risk-header{print-color-adjust:exact;break-inside:avoid}}