:root{font-family:system-ui,-apple-system,sans-serif;color:#142b43;background:#edf3f7}*{box-sizing:border-box}body{margin:0}main{max-width:1600px;margin:auto;background:white}header{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;background:linear-gradient(105deg,#123e57,#0588bc);color:white}header small{font-size:11px;font-weight:800;letter-spacing:.8px}h1{font-size:25px;margin:3px 0}header a{color:white;font-size:13px}button,select{font:inherit;min-height:39px;border:1px solid #c5d6e3;border-radius:9px;background:white;color:#183b55;padding:7px 12px}button{cursor:pointer;font-weight:700}button:focus-visible,select:focus-visible{outline:3px solid #ffa800;outline-offset:2px}.selected,.primary{background:#087db0;color:white;border-color:#087db0}.controls{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;flex-wrap:wrap;border-bottom:1px solid #dae4ec}nav,.time{display:flex;gap:7px;flex-wrap:wrap}label{font-size:13px;display:flex;align-items:center;gap:7px}.time label{font-weight:700}#status{font-size:12px;padding:8px 18px;margin:0;background:#f2f7fa;min-height:32px}#mapWrap{background:#e8f0f3;margin:auto}#map{height:660px;height:min(74vh,760px);min-height:460px;width:100%}.mobile-preview{max-width:390px;box-shadow:0 0 0 2px #8199ac}.mobile-preview #map{height:650px}.meteo-marker{background:none;border:0}.pin{width:116px;text-align:center;filter:drop-shadow(0 2px 2px #4565);cursor:pointer;line-height:1.15}.pin img{height:43px;width:43px;display:block;margin:0 auto 1px}.pin strong,.temps,.wind,.pin small{display:table;margin:1px auto;padding:2px 5px;border-radius:5px;background:#fffffff0}.pin strong{font-size:11px;max-width:116px}.temps{font-size:12px;font-weight:800}.temps b:first-child{color:#0075c8}.temps b:last-child{color:#d3343e}.wind{font-size:10px;font-weight:700}.pin small{font-size:10px}.nodata{opacity:.7;margin-top:30px}#detail{position:relative;padding:15px 45px 15px 20px;border-top:2px solid #0588bc;background:#f3f8fc}#detail h2{font-size:18px;margin:0}#detail p{font-size:14px;margin:8px 0}#detail small{font-size:11px}#close{position:absolute;right:10px;top:10px;font-size:22px}footer{padding:12px 18px;font-size:11px;color:#546c80}footer p{margin:5px 0}footer a{color:#126c9b}#admin{display:flex;flex-wrap:wrap;gap:9px;padding:12px 18px;background:#fff7e7;border-bottom:1px solid #eedab4}#admin p{width:100%;margin:0;font-size:12px}#admin select{max-width:290px}#admin input{width:18px;height:18px}@media(max-width:639px){header{padding:12px}h1{font-size:22px}.controls{padding:9px;gap:9px}.controls nav{width:100%}.controls nav button{flex:1;font-size:12px}.time{width:100%;justify-content:space-between}.time label{font-size:11px;flex:1}.time select{width:100%;min-width:0;font-size:12px;padding:5px}.time label{display:block}#map{height:68vh;min-height:430px}.pin strong{font-size:11px}#admin{padding:9px}#admin label{max-width:100%;flex-wrap:wrap}#admin select{max-width:260px}footer{padding:10px}}

.brand{display:flex;align-items:center;gap:15px}.brand img{object-fit:contain;max-height:50px}@media(max-width:639px){.brand{gap:6px;flex-direction:column}.brand img{width:68px}.brand a{font-size:11px}}


/* Tamaños de tarjetas; independientes del fondo y de los controles. */
#mapWrap .pin{width:var(--meteo-width,116px)}
#mapWrap .pin .weather{width:var(--meteo-icon,43px);height:var(--meteo-icon,43px)}
#mapWrap .pin strong{font-size:var(--meteo-name,11px);max-width:var(--meteo-width,116px)}
#mapWrap .pin .temps{font-size:var(--meteo-temp,12px)}
#mapWrap .pin .wind{font-size:var(--meteo-wind,10px)}
.map-style-controls{flex-basis:100%;border:1px solid #dcc79d;border-radius:9px;margin:2px 0;padding:10px;display:flex;gap:12px;flex-wrap:wrap}
.map-style-controls legend{font-size:13px;font-weight:700;padding:0 6px}
#admin .map-style-controls label{display:flex;gap:8px;flex-wrap:wrap}
#admin .map-style-controls input[type=range]{width:120px;height:22px;accent-color:#087db0}
.map-style-controls output{font-size:12px;min-width:36px;font-variant-numeric:tabular-nums}
@media(max-width:639px){#admin .map-style-controls label{width:100%;justify-content:space-between}#admin .map-style-controls input[type=range]{flex:1;min-width:90px;max-width:165px}}

/* Atenuación exclusiva de la cartografía: tarjetas y atribución intactas. */
#mapWrap #map{background:#f8fafb}
#mapWrap .leaflet-tile-pane{opacity:var(--meteo-background,0.45)}

/* Calendario siempre visible, también en móvil vertical. */
.controls .time{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:12px 22px;border-top:1px solid #e5edf3;padding-top:9px}
.time-group{min-width:0;flex:1 1 420px}
.time-group.period-group{flex:0 1 auto}
.time-caption{display:block;font-size:10px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;color:#526b80;margin:0 0 5px}
.time-buttons{display:flex;flex-wrap:wrap;gap:6px}
.time-buttons button{font-size:12px;min-height:38px;padding:7px 12px;border-radius:18px;white-space:nowrap}
.time-buttons button:disabled{opacity:.4;cursor:default}
.time-buttons button.selected{background:#087db0;color:#fff;border-color:#087db0}
.time [hidden]{display:none!important}
#timeEmpty{margin:0;font-size:12px;color:#526b80}
@media(max-width:639px){
 .controls .time{gap:10px}
 .time-group,.time-group.period-group{flex:1 1 100%;width:100%}
 .time-buttons button{min-height:44px;padding:8px 12px}
 #periodButtons button{flex:1}
}

#status:empty{display:none}
.forecast-player{display:flex;align-items:center;gap:12px;padding:10px 18px;background:#f4f8fb;border-bottom:1px solid #dbe6ee;flex-wrap:wrap}
.play-controls{display:flex;align-items:center;gap:5px}
.play-controls button{min-height:40px;min-width:40px;padding:7px}
#play{display:flex;align-items:center;justify-content:center;gap:8px;min-width:118px}
.forecast-player button:disabled{opacity:.4;cursor:default}
.timeline-group{flex:1;min-width:180px}
#sequenceLabel{display:block;font-size:12px;font-weight:700;margin-bottom:3px}
#timeline{display:block;width:100%;height:26px;accent-color:#087db0;cursor:pointer}
.speed-label{font-size:11px}
#timeline:focus-visible{outline:3px solid #ffa800;outline-offset:2px}
@media(max-width:639px){
 .forecast-player{padding:9px;gap:8px}
 .play-controls{width:100%;justify-content:center}
 .play-controls button{min-width:44px;min-height:44px}
 .timeline-group{min-width:0;flex:1 1 55%}
 .speed-label{flex:0 1 auto;display:block}
 .speed-label select{display:block;min-height:40px;font-size:12px}
}
/* El mapa conserva altura propia, independiente del calendario y reproductor. */
#mapWrap #map{height:clamp(680px,88vh,1100px);min-height:680px}
#mapWrap.mobile-preview #map{height:760px;min-height:760px}
@media(max-width:639px){
 #mapWrap #map{height:clamp(560px,82vh,900px);height:clamp(560px,82svh,900px);min-height:560px}
 #mapWrap.mobile-preview #map{height:760px;min-height:760px}
}