<!-- RADAR METEOROLÓGICO LA PAMPA — copiar todo esto en widget HTML de WordPress -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"/>
<style>
.radar-widget { width:100%; max-width:900px; margin:0 auto; background:#111; border-radius:12px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,0.5); font-family:'Helvetica Neue',Arial,sans-serif; color:#fff; }
.radar-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:#0d0d0d; border-bottom:2px solid #18c438; }
.radar-title h2 { font-size:0.95rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#fff; margin:0; }
.radar-title span { font-size:0.75rem; color:#18c438; letter-spacing:0.1em; }
.live-badge { display:flex; align-items:center; gap:6px; font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#18c438; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#18c438; animation:pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
.map-container { position:relative; }
#rv-map { width:100%; height:480px; background:#1a1a2e; }
#rv-loading { position:absolute; inset:0; background:rgba(10,10,10,0.85); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1000; gap:12px; pointer-events:none; }
#rv-loading.hidden { display:none; }
.rv-spinner { width:36px; height:36px; border:3px solid #1e1e1e; border-top-color:#18c438; border-radius:50%; animation:rv-spin 0.8s linear infinite; }
@keyframes rv-spin { to{transform:rotate(360deg)} }
.rv-loading-text { font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:#18c438; }
.rv-timeline-wrap { padding:10px 20px 14px; background:#0d0d0d; }
.rv-timeline-label { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#555; margin-bottom:6px; }
#rv-timeline { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; background:#2a2a2a; outline:none; cursor:pointer; }
#rv-timeline::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#18c438; cursor:pointer; box-shadow:0 0 8px rgba(24,196,56,0.6); }
#rv-timeline::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#18c438; border:none; cursor:pointer; }
.rv-controls { padding:12px 20px; background:#0d0d0d; border-top:1px solid #1e1e1e; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.rv-playback { display:flex; align-items:center; gap:8px; }
.rv-btn { background:#1e1e1e; border:1px solid #333; color:#fff; border-radius:6px; padding:7px 14px; font-size:0.78rem; font-weight:700; letter-spacing:0.05em; cursor:pointer; transition:all 0.2s; text-transform:uppercase; font-family:'Helvetica Neue',Arial,sans-serif; }
.rv-btn:hover { background:#2a2a2a; border-color:#18c438; color:#18c438; }
.rv-btn.active { background:#18c438; border-color:#18c438; color:#000; }
.rv-time { font-size:0.78rem; font-weight:700; color:#18c438; letter-spacing:0.08em; min-width:130px; text-align:center; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; padding:7px 12px; }
.rv-opacity-wrap { display:flex; align-items:center; gap:8px; }
.rv-opacity-label { font-size:0.7rem; color:#555; text-transform:uppercase; letter-spacing:0.1em; }
#rv-opacity { -webkit-appearance:none; appearance:none; width:80px; height:3px; border-radius:2px; background:#2a2a2a; outline:none; cursor:pointer; }
#rv-opacity::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#18c438; cursor:pointer; }
.rv-legend { padding:10px 20px 14px; background:#0d0d0d; border-top:1px solid #1a1a1a; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rv-legend-label { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:#555; }
.rv-legend-wrap { flex:1; min-width:160px; }
.rv-legend-bar { height:10px; border-radius:5px; background:linear-gradient(to right,rgba(0,0,255,0.5),rgba(0,255,255,0.7),rgba(0,255,0,0.8),rgba(255,255,0,0.9),rgba(255,128,0,0.95),rgba(255,0,0,1),rgba(180,0,255,1)); }
.rv-legend-ends { display:flex; justify-content:space-between; font-size:0.6rem; color:#555; letter-spacing:0.1em; margin-top:3px; }
.rv-status { padding:8px 20px; background:#080808; border-top:1px solid #1a1a1a; display:flex; justify-content:space-between; font-size:0.65rem; color:#444; letter-spacing:0.08em; }
.rv-status a { color:#333; text-decoration:none; }
.rv-status a:hover { color:#18c438; }
@media(max-width:600px){ #rv-map{height:320px} .rv-controls{flex-direction:column;align-items:flex-start} }
</style>
<div class="radar-widget">
<div class="radar-header">
<div class="radar-title">
<h2>Radar Meteorológico</h2>
<span>La Pampa, Argentina</span>
</div>
<div class="live-badge">
<div class="live-dot"></div>
EN VIVO
</div>
</div>
<div class="map-container">
<div id="rv-map"></div>
<div id="rv-loading">
<div class="rv-spinner"></div>
<div class="rv-loading-text">Cargando radar...</div>
</div>
</div>
<div class="rv-timeline-wrap">
<div class="rv-timeline-label">Línea de tiempo — últimas 2 horas</div>
<input type="range" id="rv-timeline" min="0" max="0" value="0" step="1">
</div>
<div class="rv-controls">
<div class="rv-playback">
<button class="rv-btn" id="rv-prev">◀ Ant.</button>
<button class="rv-btn active" id="rv-play">▮▮ Pausa</button>
<button class="rv-btn" id="rv-next">Sig. ▶</button>
</div>
<div class="rv-time" id="rv-time">Cargando...</div>
<div class="rv-opacity-wrap">
<span class="rv-opacity-label">Intensidad</span>
<input type="range" id="rv-opacity" min="0" max="100" value="80">
</div>
</div>
<div class="rv-legend">
<span class="rv-legend-label">Precipitación</span>
<div class="rv-legend-wrap">
<div class="rv-legend-bar"></div>
<div class="rv-legend-ends">
<span>Leve</span><span>Moderada</span><span>Intensa</span><span>Extrema</span>
</div>
</div>
</div>
<div class="rv-status">
<span>Fuente: <a href="https://www.rainviewer.com" target="_blank" rel="noopener">RainViewer</a> · Datos actualizados cada ~10 min</span>
<span id="rv-framecount">— / —</span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<script>
(function(){
var LA_PAMPA = [-36.6, -64.3];
var map = L.map('rv-map', { center: LA_PAMPA, zoom: 6, zoomControl: true, attributionControl: false });
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { maxZoom: 18 }).addTo(map);
L.circleMarker(LA_PAMPA, { radius:6, color:'#18c438', fillColor:'#18c438', fillOpacity:0.9, weight:2 })
.addTo(map).bindTooltip('La Pampa', { permanent:false, direction:'top' });
var frames=[], current=0, layer=null, playing=true, timer=null, opacity=0.8;
function showFrame(i) {
if (!frames[i]) return;
var url = 'https://tilecache.rainviewer.com' + frames[i].path + '/256/{z}/{x}/{y}/2/1_1.png';
if (layer) map.removeLayer(layer);
layer = L.tileLayer(url, { opacity:opacity, maxZoom:18, zIndex:10 }).addTo(map);
var d = new Date(frames[i].time * 1000);
var hhmm = d.toLocaleTimeString('es-AR', { hour:'2-digit', minute:'2-digit', timeZone:'America/Argentina/Buenos_Aires' });
var ddmm = d.toLocaleDateString('es-AR', { day:'2-digit', month:'2-digit', timeZone:'America/Argentina/Buenos_Aires' });
document.getElementById('rv-time').textContent = ddmm + ' ' + hhmm + ' hs';
document.getElementById('rv-timeline').value = i;
document.getElementById('rv-framecount').textContent = (i+1) + ' / ' + frames.length;
}
function startAnim() {
clearInterval(timer);
timer = setInterval(function(){ if (!playing) return; current=(current+1)%frames.length; showFrame(current); }, 800);
}
function loadRadar() {
fetch('https://api.rainviewer.com/public/weather-maps.json')
.then(function(r){ return r.json(); })
.then(function(data){
frames = (data.radar && data.radar.past) ? data.radar.past : [];
if (!frames.length){ document.getElementById('rv-time').textContent='Sin datos'; return; }
var tl = document.getElementById('rv-timeline');
tl.max = frames.length - 1;
current = frames.length - 1;
document.getElementById('rv-loading').classList.add('hidden');
showFrame(current);
startAnim();
})
.catch(function(){ document.getElementById('rv-time').textContent='Error al cargar'; document.getElementById('rv-loading').classList.add('hidden'); });
}
document.getElementById('rv-play').addEventListener('click', function(){
playing = !playing;
this.textContent = playing ? '⏸ Pausa' : '▶ Play';
this.classList.toggle('active', playing);
});
document.getElementById('rv-prev').addEventListener('click', function(){
playing=false; document.getElementById('rv-play').textContent='▶ Play'; document.getElementById('rv-play').classList.remove('active');
current=(current-1+frames.length)%frames.length; showFrame(current);
});
document.getElementById('rv-next').addEventListener('click', function(){
playing=false; document.getElementById('rv-play').textContent='▶ Play'; document.getElementById('rv-play').classList.remove('active');
current=(current+1)%frames.length; showFrame(current);
});
document.getElementById('rv-timeline').addEventListener('input', function(){
playing=false; document.getElementById('rv-play').textContent='▶ Play'; document.getElementById('rv-play').classList.remove('active');
current=parseInt(this.value); showFrame(current);
});
document.getElementById('rv-opacity').addEventListener('input', function(){
opacity=this.value/100; if(layer) layer.setOpacity(opacity);
});
setInterval(loadRadar, 10*60*1000);
loadRadar();
})();
</script>
