Digdgeo · June 11, 2025 09:52
diff --git a/donana-dashboard3.html b/donana-dashboard3.html
 <!DOCTYPE html>
 <html lang="es">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Ciclo de Inundación Doñana 2024-2025</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
 <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f9fafb; color: #374151; line-height: 1.6; }
 .container { max-width: 1200px; margin: 0 auto; padding: 24px; }
 .header { text-align: center; margin-bottom: 32px; }
 .title { font-size: 2.5rem; font-weight: bold; color: #1f2937; margin-bottom: 8px; }
 .subtitle { font-size: 1.125rem; color: #6b7280; margin-bottom: 16px; }
 .info-box { background: #dbeafe; padding: 16px; border-radius: 8px; display: inline-block; }
 .info-text { color: #1e40af; font-weight: 600; }
 .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 32px; }
 .stat-card { padding: 20px; border-radius: 8px; border-left: 4px solid; }
 .stat-card.blue { background: #eff6ff; border-color: #3b82f6; }
 .stat-card.green { background: #f0fdf4; border-color: #10b981; }
 .stat-card.purple { background: #faf5ff; border-color: #8b5cf6; }
 .stat-card.red { background: #fef2f2; border-color: #ef4444; }
 .stat-title { font-weight: 600; margin-bottom: 4px; }
 .stat-date { font-size: 0.875rem; margin-bottom: 8px; }
 .stat-value { font-size: 1.875rem; font-weight: bold; margin-bottom: 4px; }
 .stat-detail { font-size: 0.875rem; }
 .blue .stat-title, .blue .stat-date, .blue .stat-detail { color: #1e40af; }
 .blue .stat-value { color: #1e3a8a; }
 .green .stat-title, .green .stat-date, .green .stat-detail { color: #047857; }
 .green .stat-value { color: #064e3b; }
 .purple .stat-title, .purple .stat-date, .purple .stat-detail { color: #7c2d12; }
 .purple .stat-value { color: #581c87; }
 .red .stat-title, .red .stat-date, .red .stat-detail { color: #b91c1c; }
 .red .stat-value { color: #991b1b; }
 .chart-nav { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
 .chart-btn { padding: 8px 16px; border: 1px solid #d1d5db; background: white; color: #374151; border-radius: 8px; cursor: pointer; font-weight: 500; transition: all 0.2s; }
 .chart-btn:hover { background: #f9fafb; }
 .chart-btn.active { background: #2563eb; color: white; border-color: #2563eb; }
 .chart-container { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 32px; }
 .chart-title { font-size: 1.5rem; font-weight: bold; color: #1f2937; margin-bottom: 8px; }
 .chart-subtitle { color: #6b7280; margin-bottom: 24px; }
 .canvas-container { position: relative; height: 400px; margin-bottom: 16px; }
 .phases-container { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 32px; }
 .phases-title { font-size: 1.25rem; font-weight: bold; color: #1f2937; margin-bottom: 16px; }
 .phases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 24px; }
 .phase-card { padding: 16px; border-radius: 8px; border-left: 4px solid; }
 .phase-card.red { background: #fef2f2; border-color: #ef4444; }
 .phase-card.blue { background: #eff6ff; border-color: #3b82f6; }
 .phase-card.orange { background: #fff7ed; border-color: #f97316; }
 .analysis-box { background: #dbeafe; padding: 24px; border-radius: 8px; margin-top: 24px; }
 .analysis-title { font-size: 1.125rem; font-weight: 600; color: #1e40af; margin-bottom: 12px; }
 .analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 16px; }
 .analysis-item { font-size: 0.875rem; }
 .analysis-label { color: #1e40af; font-weight: bold; }
 .analysis-detail { color: #1e40af; }
 .analysis-extreme { color: #7c2d12; }
 .source-box { background: white; padding: 16px; border-radius: 4px; border-left: 4px solid #10b981; margin-top: 16px; }
 .source-text { font-size: 0.875rem; color: #374151; }
 .source-link { color: #2563eb; text-decoration: underline; }
 .footer { text-align: center; color: #6b7280; font-size: 0.875rem; margin-top: 32px; }
 </style>
 </head>
 <body>
 <div class="container">
 <div class="header">
 <h1 class="title">📊 Ciclo de Inundación Doñana 2024-2025</h1>
 <p class="subtitle">Análisis temporal del sistema acuático mediante teledetección satelital</p>
 <div class="info-box">
 <p class="info-text">🛰️ Período: Septiembre 2024 - Mayo 2025 | 📍 Parque Nacional de Doñana</p>
 </div>
 </div>

 <div class="stats-grid">
 <div class="stat-card blue">
 <h3 class="stat-title">📈 Pico Máximo</h3>
 <p class="stat-date">19 de marzo de 2025</p>
 <p class="stat-value">33,113 ha</p>
 <p class="stat-detail">(97.4% de la marisma)</p>
 </div>
 <div class="stat-card green">
 <h3 class="stat-title">🏞️ Máximo Lagunas</h3>
 <p class="stat-date">19 de marzo de 2025</p>
 <p class="stat-value">220 lagunas</p>
 <p class="stat-detail">(131.4 ha)</p>
 </div>
 <div class="stat-card purple">
 <h3 class="stat-title">🌧️ Precipitación Total</h3>
 <p class="stat-date">Ciclo completo</p>
 <p class="stat-value">674.5 mm</p>
 <p class="stat-detail">Acumulada hasta mayo 2025</p>
 </div>
 <div class="stat-card red">
 <h3 class="stat-title">📉 Mínimo</h3>
 <p class="stat-date">29 de diciembre de 2024</p>
 <p class="stat-value">2,687 ha</p>
 <p class="stat-detail">(7.9% de la marisma)</p>
 </div>
 </div>

 <div class="chart-nav">
 <button class="chart-btn active" onclick="showChart('inundacion')">Evolución de la Inundación</button>
 <button class="chart-btn" onclick="showChart('lagunas')">Sistema Lagunar</button>
 <button class="chart-btn" onclick="showChart('precipitacion')">Precipitación vs Inundación</button>
 <button class="chart-btn" onclick="showChart('acumulada')">Precipitación Acumulada</button>
 </div>

 <div class="chart-container">
 <h2 class="chart-title" id="chartTitle">Evolución de la Inundación</h2>
 <p class="chart-subtitle" id="chartSubtitle">Superficie inundada (ha) y porcentaje de la marisma</p>
 <div class="canvas-container">
 <canvas id="mainChart"></canvas>
 </div>
 </div>

 <div class="phases-container">
 <h3 class="phases-title">🔄 Fases del Ciclo Hidrológico</h3>
 <div class="phases-grid">
 <div class="phase-card red">
 <h4 class="stat-title">Período Seco</h4>
 <p class="stat-date">Sep - Dic 2024</p>
 <p class="stat-detail">Mínima inundación estacional</p>
 </div>
 <div class="phase-card blue">
 <h4 class="stat-title">Gran Inundación</h4>
 <p class="stat-date">Ene - Mar 2025</p>
 <p class="stat-detail">Inundación histórica excepcional</p>
 </div>
 <div class="phase-card orange">
 <h4 class="stat-title">Descenso Gradual</h4>
 <p class="stat-date">Abr - May 2025</p>
 <p class="stat-detail">Secado estacional progresivo</p>
 </div>
 </div>

 <div class="analysis-box">
 <h4 class="analysis-title">🔍 Análisis de Correlación Precipitación-Inundación (DATOS CORREGIDOS)</h4>
 <div class="analysis-grid">
 <div class="analysis-item">
 <p class="analysis-label">Octubre-Noviembre 2024:</p>
 <p class="analysis-detail">177.5 mm acumulados → Primera inundación significativa (15.3%)</p>
 <p class="analysis-extreme">⛈️ Evento clave: 34mm (12 octubre)</p>
 <p class="analysis-detail">Umbral de activación del sistema</p>
 </div>
 <div class="analysis-item">
 <p class="analysis-label">Enero 2025:</p>
 <p class="analysis-detail">82.4 mm en el período → 851% aumento inundación</p>
 <p class="analysis-extreme">⛈️ Pico: 40.5mm (21 enero)</p>
 <p class="analysis-detail">De 2,687 ha a 22,874 ha en 32 días</p>
 </div>
 <div class="analysis-item">
 <p class="analysis-label">Marzo 2025:</p>
 <p class="analysis-detail">265.9 mm en el período → 97.4% marisma inundada</p>
 <p class="analysis-extreme">⛈️ Acumulada: 560.3mm hasta el máximo</p>
 <p class="analysis-detail">Saturación completa del sistema</p>
 </div>
 </div>
 <div class="source-box">
 <p class="source-text">
 <strong>📊 Fuentes de datos:</strong><br/>
 • <strong>Precipitación:</strong> Estación meteorológica Palacio de Doñana (ICTS-EBD. <a href="https://datos-automaticos.icts-donana.es/" class="source-link" target="_blank">https://datos-automaticos.icts-donana.es/</a>)<br/>
 • <strong>Superficie inundada:</strong> Imágenes Landsat 8 y 9 procesadas por el Protocolo Automático v2 del LAST-EBD (<a href="https://github.com/Digdgeo/ProtocoloV2" class="source-link" target="_blank">https://github.com/Digdgeo/ProtocoloV2</a>)
 </p>
 </div>
 </div>
 </div>

 <div class="footer">
 <p>🛰️ Imágenes Landsat 8-9 (LAST-EBD) | 🌧️ Datos meteorológicos (ICTS-EBD) | 📊 Análisis: Ciclo de inundación Doñana 2024-2025</p>
 </div>
 </div>

 <script>
 // DATOS CORREGIDOS CON PRECIPITACIÓN REAL
 const data = [
 { fecha_corta: '16 Sep', superficie_marisma: 112.95, porcentaje_marisma: 0.33, num_lagunas: 93, superficie_lagunas: 62.91, precipitacion_acumulada: 0.0, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 },
 { fecha_corta: '11 Nov', superficie_marisma: 3907.53, porcentaje_marisma: 11.49, num_lagunas: 16, superficie_lagunas: 28.44, precipitacion_acumulada: 177.5, precipitacion_periodo: 177.5, max_diario_periodo: 34.0 },
 { fecha_corta: '19 Nov', superficie_marisma: 5185.35, porcentaje_marisma: 15.25, num_lagunas: 32, superficie_lagunas: 43.02, precipitacion_acumulada: 195.0, precipitacion_periodo: 17.5, max_diario_periodo: 12.0 },
 { fecha_corta: '27 Nov', superficie_marisma: 4327.11, porcentaje_marisma: 12.73, num_lagunas: 14, superficie_lagunas: 32.67, precipitacion_acumulada: 197.4, precipitacion_periodo: 2.4, max_diario_periodo: 2.4 },
 { fecha_corta: '5 Dic', superficie_marisma: 3998.52, porcentaje_marisma: 11.76, num_lagunas: 17, superficie_lagunas: 53.91, precipitacion_acumulada: 197.4, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 },
 { fecha_corta: '13 Dic', superficie_marisma: 4020.93, porcentaje_marisma: 11.83, num_lagunas: 18, superficie_lagunas: 50.18, precipitacion_acumulada: 197.4, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 },
 { fecha_corta: '21 Dic', superficie_marisma: 3003.12, porcentaje_marisma: 8.83, num_lagunas: 13, superficie_lagunas: 33.12, precipitacion_acumulada: 212.0, precipitacion_periodo: 14.6, max_diario_periodo: 11.1 },
 { fecha_corta: '29 Dic', superficie_marisma: 2687.40, porcentaje_marisma: 7.90, num_lagunas: 14, superficie_lagunas: 36.63, precipitacion_acumulada: 212.0, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 },
 { fecha_corta: '30 Ene', superficie_marisma: 22873.95, porcentaje_marisma: 67.28, num_lagunas: 32, superficie_lagunas: 46.53, precipitacion_acumulada: 294.4, precipitacion_periodo: 82.4, max_diario_periodo: 40.5 },
 { fecha_corta: '19 Mar', superficie_marisma: 33112.53, porcentaje_marisma: 97.39, num_lagunas: 220, superficie_lagunas: 131.37, precipitacion_acumulada: 560.3, precipitacion_periodo: 265.9, max_diario_periodo: 36.5 },
 { fecha_corta: '27 Mar', superficie_marisma: 32810.53, porcentaje_marisma: 96.50, num_lagunas: 165, superficie_lagunas: 117.01, precipitacion_acumulada: 595.7, precipitacion_periodo: 35.4, max_diario_periodo: 15.2 },
 { fecha_corta: '28 Abr', superficie_marisma: 29519.91, porcentaje_marisma: 86.82, num_lagunas: 164, superficie_lagunas: 122.88, precipitacion_acumulada: 648.9, precipitacion_periodo: 53.2, max_diario_periodo: 13.8 },
 { fecha_corta: '6 May', superficie_marisma: 29017.64, porcentaje_marisma: 85.35, num_lagunas: 177, superficie_lagunas: 120.51, precipitacion_acumulada: 674.5, precipitacion_periodo: 25.6, max_diario_periodo: 14.2 },
 { fecha_corta: '14 May', superficie_marisma: 27234.81, porcentaje_marisma: 80.10, num_lagunas: 175, superficie_lagunas: 115.56, precipitacion_acumulada: 674.5, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 },
 { fecha_corta: '22 May', superficie_marisma: 24929.35, porcentaje_marisma: 73.32, num_lagunas: 152, superficie_lagunas: 98.19, precipitacion_acumulada: 674.5, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 }
 ];

 let currentChart = null;

 function formatNumber(num) {
 return new Intl.NumberFormat('es-ES').format(Math.round(num));
 }

 function showChart(chartType) {
 document.querySelectorAll('.chart-btn').forEach(btn => btn.classList.remove('active'));
 event.target.classList.add('active');

 if (chartType === 'inundacion') {
 document.getElementById('chartTitle').textContent = 'Evolución de la Inundación';
 document.getElementById('chartSubtitle').textContent = 'Superficie inundada (ha) y porcentaje de la marisma';
 createInundacionChart();
 } else if (chartType === 'lagunas') {
 document.getElementById('chartTitle').textContent = 'Sistema Lagunar';
 document.getElementById('chartSubtitle').textContent = 'Número y superficie de lagunas temporales';
 createLagunasChart();
 } else if (chartType === 'precipitacion') {
 document.getElementById('chartTitle').textContent = 'Precipitación por Período vs Inundación';
 document.getElementById('chartSubtitle').textContent = 'Precipitación entre imágenes y respuesta de inundación';
 createPrecipitacionChart();
 } else if (chartType === 'acumulada') {
 document.getElementById('chartTitle').textContent = 'Precipitación Acumulada vs Inundación';
 document.getElementById('chartSubtitle').textContent = 'Evolución de precipitación acumulada y superficie inundada';
 createAcumuladaChart();
 }
 }

 function createInundacionChart() {
 const ctx = document.getElementById('mainChart').getContext('2d');
 if (currentChart) currentChart.destroy();

 currentChart = new Chart(ctx, {
 type: 'line',
 data: {
 labels: data.map(d => d.fecha_corta),
 datasets: [
 {
 label: 'Superficie Marisma (ha)',
 data: data.map(d => d.superficie_marisma),
 backgroundColor: 'rgba(59, 130, 246, 0.6)',
 borderColor: 'rgb(37, 99, 235)',
 borderWidth: 2,
 fill: true,
 yAxisID: 'y'
 },
 {
 label: '% Inundación',
 data: data.map(d => d.porcentaje_marisma),
 backgroundColor: 'rgba(220, 38, 38, 0.1)',
 borderColor: 'rgb(220, 38, 38)',
 borderWidth: 4,
 fill: false,
 pointRadius: 6,
 yAxisID: 'y1'
 }
 ]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Superficie (ha)' } },
 y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: '% Inundación' }, min: 0, max: 100, grid: { drawOnChartArea: false } }
 },
 plugins: {
 tooltip: {
 callbacks: {
 afterBody: function(context) {
 const item = data[context[0].dataIndex];
 return [`💧 Precip. acumulada: ${item.precipitacion_acumulada}mm`, `💧 Precip. período: ${item.precipitacion_periodo}mm`];
 }
 }
 }
 }
 }
 });
 }

 function createLagunasChart() {
 const ctx = document.getElementById('mainChart').getContext('2d');
 if (currentChart) currentChart.destroy();

 currentChart = new Chart(ctx, {
 type: 'bar',
 data: {
 labels: data.map(d => d.fecha_corta),
 datasets: [
 {
 label: 'Número de Lagunas',
 data: data.map(d => d.num_lagunas),
 backgroundColor: 'rgba(139, 92, 246, 0.8)',
 yAxisID: 'y'
 },
 {
 label: 'Superficie Lagunas (ha)',
 data: data.map(d => d.superficie_lagunas),
 type: 'line',
 borderColor: 'rgb(5, 150, 105)',
 borderWidth: 3,
 fill: false,
 pointRadius: 5,
 yAxisID: 'y1'
 }
 ]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Número de Lagunas' } },
 y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: 'Superficie (ha)' }, grid: { drawOnChartArea: false } }
 },
 plugins: {
 tooltip: {
 callbacks: {
 afterBody: function(context) {
 const item = data[context[0].dataIndex];
 return [`💧 Precip. acumulada: ${item.precipitacion_acumulada}mm`, `💧 Precip. período: ${item.precipitacion_periodo}mm`];
 }
 }
 }
 }
 }
 });
 }

 function createPrecipitacionChart() {
 const ctx = document.getElementById('mainChart').getContext('2d');
 if (currentChart) currentChart.destroy();

 currentChart = new Chart(ctx, {
 type: 'bar',
 data: {
 labels: data.map(d => d.fecha_corta),
 datasets: [
 {
 label: 'Precipitación período (mm)',
 data: data.map(d => d.precipitacion_periodo),
 backgroundColor: 'rgba(96, 165, 250, 0.7)',
 yAxisID: 'y'
 },
 {
 label: '% Inundación',
 data: data.map(d => d.porcentaje_marisma),
 type: 'line',
 borderColor: 'rgb(220, 38, 38)',
 borderWidth: 3,
 fill: false,
 pointRadius: 5,
 yAxisID: 'y1'
 }
 ]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Precipitación período (mm)' } },
 y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: '% Inundación' }, min: 0, max: 100, grid: { drawOnChartArea: false } }
 },
 plugins: {
 tooltip: {
 callbacks: {
 afterBody: function(context) {
 const item = data[context[0].dataIndex];
 return [`💧 Máximo diario: ${item.max_diario_periodo}mm`, `💧 Acumulada total: ${item.precipitacion_acumulada}mm`];
 }
 }
 }
 }
 }
 });
 }

 function createAcumuladaChart() {
 const ctx = document.getElementById('mainChart').getContext('2d');
 if (currentChart) currentChart.destroy();

 currentChart = new Chart(ctx, {
 type: 'line',
 data: {
 labels: data.map(d => d.fecha_corta),
 datasets: [
 {
 label: 'Precipitación acumulada (mm)',
 data: data.map(d => d.precipitacion_acumulada),
 backgroundColor: 'rgba(34, 197, 94, 0.2)',
 borderColor: 'rgb(34, 197, 94)',
 borderWidth: 3,
 fill: true,
 yAxisID: 'y'
 },
 {
 label: '% Inundación',
 data: data.map(d => d.porcentaje_marisma),
 backgroundColor: 'rgba(220, 38, 38, 0.1)',
 borderColor: 'rgb(220, 38, 38)',
 borderWidth: 4,
 fill: false,
 pointRadius: 6,
 yAxisID: 'y1'
 }
 ]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Precipitación acumulada (mm)' } },
 y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: '% Inundación' }, min: 0, max: 100, grid: { drawOnChartArea: false } }
 },
 plugins: {
 tooltip: {
 callbacks: {
 afterBody: function(context) {
 const item = data[context[0].dataIndex];
 return [`💧 Período: ${item.precipitacion_periodo}mm`, `💧 Máximo diario: ${item.max_diario_periodo}mm`];
 }
 }
 }
 }
 }
 });
 }

 // Inicializar con la primera gráfica
 window.addEventListener('load', function() {
 createInundacionChart();
 });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Ciclo de Inundación Doñana 2024-2025</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
	<style>
	* { margin: 0; padding: 0; box-sizing: border-box; }
	body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f9fafb; color: #374151; line-height: 1.6; }
	.container { max-width: 1200px; margin: 0 auto; padding: 24px; }
	.header { text-align: center; margin-bottom: 32px; }
	.title { font-size: 2.5rem; font-weight: bold; color: #1f2937; margin-bottom: 8px; }
	.subtitle { font-size: 1.125rem; color: #6b7280; margin-bottom: 16px; }
	.info-box { background: #dbeafe; padding: 16px; border-radius: 8px; display: inline-block; }
	.info-text { color: #1e40af; font-weight: 600; }
	.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 32px; }
	.stat-card { padding: 20px; border-radius: 8px; border-left: 4px solid; }
	.stat-card.blue { background: #eff6ff; border-color: #3b82f6; }
	.stat-card.green { background: #f0fdf4; border-color: #10b981; }
	.stat-card.purple { background: #faf5ff; border-color: #8b5cf6; }
	.stat-card.red { background: #fef2f2; border-color: #ef4444; }
	.stat-title { font-weight: 600; margin-bottom: 4px; }
	.stat-date { font-size: 0.875rem; margin-bottom: 8px; }
	.stat-value { font-size: 1.875rem; font-weight: bold; margin-bottom: 4px; }
	.stat-detail { font-size: 0.875rem; }
	.blue .stat-title, .blue .stat-date, .blue .stat-detail { color: #1e40af; }
	.blue .stat-value { color: #1e3a8a; }
	.green .stat-title, .green .stat-date, .green .stat-detail { color: #047857; }
	.green .stat-value { color: #064e3b; }
	.purple .stat-title, .purple .stat-date, .purple .stat-detail { color: #7c2d12; }
	.purple .stat-value { color: #581c87; }
	.red .stat-title, .red .stat-date, .red .stat-detail { color: #b91c1c; }
	.red .stat-value { color: #991b1b; }
	.chart-nav { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
	.chart-btn { padding: 8px 16px; border: 1px solid #d1d5db; background: white; color: #374151; border-radius: 8px; cursor: pointer; font-weight: 500; transition: all 0.2s; }
	.chart-btn:hover { background: #f9fafb; }
	.chart-btn.active { background: #2563eb; color: white; border-color: #2563eb; }
	.chart-container { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 32px; }
	.chart-title { font-size: 1.5rem; font-weight: bold; color: #1f2937; margin-bottom: 8px; }
	.chart-subtitle { color: #6b7280; margin-bottom: 24px; }
	.canvas-container { position: relative; height: 400px; margin-bottom: 16px; }
	.phases-container { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 32px; }
	.phases-title { font-size: 1.25rem; font-weight: bold; color: #1f2937; margin-bottom: 16px; }
	.phases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 24px; }
	.phase-card { padding: 16px; border-radius: 8px; border-left: 4px solid; }
	.phase-card.red { background: #fef2f2; border-color: #ef4444; }
	.phase-card.blue { background: #eff6ff; border-color: #3b82f6; }
	.phase-card.orange { background: #fff7ed; border-color: #f97316; }
	.analysis-box { background: #dbeafe; padding: 24px; border-radius: 8px; margin-top: 24px; }
	.analysis-title { font-size: 1.125rem; font-weight: 600; color: #1e40af; margin-bottom: 12px; }
	.analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 16px; }
	.analysis-item { font-size: 0.875rem; }
	.analysis-label { color: #1e40af; font-weight: bold; }
	.analysis-detail { color: #1e40af; }
	.analysis-extreme { color: #7c2d12; }
	.source-box { background: white; padding: 16px; border-radius: 4px; border-left: 4px solid #10b981; margin-top: 16px; }
	.source-text { font-size: 0.875rem; color: #374151; }
	.source-link { color: #2563eb; text-decoration: underline; }
	.footer { text-align: center; color: #6b7280; font-size: 0.875rem; margin-top: 32px; }
	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<h1 class="title">📊 Ciclo de Inundación Doñana 2024-2025</h1>
	<p class="subtitle">Análisis temporal del sistema acuático mediante teledetección satelital</p>
	<div class="info-box">
	<p class="info-text">🛰️ Período: Septiembre 2024 - Mayo 2025 \| 📍 Parque Nacional de Doñana</p>
	</div>
	</div>

	<div class="stats-grid">
	<div class="stat-card blue">
	<h3 class="stat-title">📈 Pico Máximo</h3>
	<p class="stat-date">19 de marzo de 2025</p>
	<p class="stat-value">33,113 ha</p>
	<p class="stat-detail">(97.4% de la marisma)</p>
	</div>
	<div class="stat-card green">
	<h3 class="stat-title">🏞️ Máximo Lagunas</h3>
	<p class="stat-date">19 de marzo de 2025</p>
	<p class="stat-value">220 lagunas</p>
	<p class="stat-detail">(131.4 ha)</p>
	</div>
	<div class="stat-card purple">
	<h3 class="stat-title">🌧️ Precipitación Total</h3>
	<p class="stat-date">Ciclo completo</p>
	<p class="stat-value">674.5 mm</p>
	<p class="stat-detail">Acumulada hasta mayo 2025</p>
	</div>
	<div class="stat-card red">
	<h3 class="stat-title">📉 Mínimo</h3>
	<p class="stat-date">29 de diciembre de 2024</p>
	<p class="stat-value">2,687 ha</p>
	<p class="stat-detail">(7.9% de la marisma)</p>
	</div>
	</div>

	<div class="chart-nav">
	<button class="chart-btn active" onclick="showChart('inundacion')">Evolución de la Inundación</button>
	<button class="chart-btn" onclick="showChart('lagunas')">Sistema Lagunar</button>
	<button class="chart-btn" onclick="showChart('precipitacion')">Precipitación vs Inundación</button>
	<button class="chart-btn" onclick="showChart('acumulada')">Precipitación Acumulada</button>
	</div>

	<div class="chart-container">
	<h2 class="chart-title" id="chartTitle">Evolución de la Inundación</h2>
	<p class="chart-subtitle" id="chartSubtitle">Superficie inundada (ha) y porcentaje de la marisma</p>
	<div class="canvas-container">
	<canvas id="mainChart"></canvas>
	</div>
	</div>

	<div class="phases-container">
	<h3 class="phases-title">🔄 Fases del Ciclo Hidrológico</h3>
	<div class="phases-grid">
	<div class="phase-card red">
	<h4 class="stat-title">Período Seco</h4>
	<p class="stat-date">Sep - Dic 2024</p>
	<p class="stat-detail">Mínima inundación estacional</p>
	</div>
	<div class="phase-card blue">
	<h4 class="stat-title">Gran Inundación</h4>
	<p class="stat-date">Ene - Mar 2025</p>
	<p class="stat-detail">Inundación histórica excepcional</p>
	</div>
	<div class="phase-card orange">
	<h4 class="stat-title">Descenso Gradual</h4>
	<p class="stat-date">Abr - May 2025</p>
	<p class="stat-detail">Secado estacional progresivo</p>
	</div>
	</div>

	<div class="analysis-box">
	<h4 class="analysis-title">🔍 Análisis de Correlación Precipitación-Inundación (DATOS CORREGIDOS)</h4>
	<div class="analysis-grid">
	<div class="analysis-item">
	<p class="analysis-label">Octubre-Noviembre 2024:</p>
	<p class="analysis-detail">177.5 mm acumulados → Primera inundación significativa (15.3%)</p>
	<p class="analysis-extreme">⛈️ Evento clave: 34mm (12 octubre)</p>
	<p class="analysis-detail">Umbral de activación del sistema</p>
	</div>
	<div class="analysis-item">
	<p class="analysis-label">Enero 2025:</p>
	<p class="analysis-detail">82.4 mm en el período → 851% aumento inundación</p>
	<p class="analysis-extreme">⛈️ Pico: 40.5mm (21 enero)</p>
	<p class="analysis-detail">De 2,687 ha a 22,874 ha en 32 días</p>
	</div>
	<div class="analysis-item">
	<p class="analysis-label">Marzo 2025:</p>
	<p class="analysis-detail">265.9 mm en el período → 97.4% marisma inundada</p>
	<p class="analysis-extreme">⛈️ Acumulada: 560.3mm hasta el máximo</p>
	<p class="analysis-detail">Saturación completa del sistema</p>
	</div>
	</div>
	<div class="source-box">
	<p class="source-text">
	<strong>📊 Fuentes de datos:</strong><br/>
	• <strong>Precipitación:</strong> Estación meteorológica Palacio de Doñana (ICTS-EBD. <a href="https://datos-automaticos.icts-donana.es/" class="source-link" target="_blank">https://datos-automaticos.icts-donana.es/</a>)<br/>
	• <strong>Superficie inundada:</strong> Imágenes Landsat 8 y 9 procesadas por el Protocolo Automático v2 del LAST-EBD (<a href="https://github.com/Digdgeo/ProtocoloV2" class="source-link" target="_blank">https://github.com/Digdgeo/ProtocoloV2</a>)
	</p>
	</div>
	</div>
	</div>

	<div class="footer">
	<p>🛰️ Imágenes Landsat 8-9 (LAST-EBD) \| 🌧️ Datos meteorológicos (ICTS-EBD) \| 📊 Análisis: Ciclo de inundación Doñana 2024-2025</p>
	</div>
	</div>

	<script>
	// DATOS CORREGIDOS CON PRECIPITACIÓN REAL
	const data = [
	{ fecha_corta: '16 Sep', superficie_marisma: 112.95, porcentaje_marisma: 0.33, num_lagunas: 93, superficie_lagunas: 62.91, precipitacion_acumulada: 0.0, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 },
	{ fecha_corta: '11 Nov', superficie_marisma: 3907.53, porcentaje_marisma: 11.49, num_lagunas: 16, superficie_lagunas: 28.44, precipitacion_acumulada: 177.5, precipitacion_periodo: 177.5, max_diario_periodo: 34.0 },
	{ fecha_corta: '19 Nov', superficie_marisma: 5185.35, porcentaje_marisma: 15.25, num_lagunas: 32, superficie_lagunas: 43.02, precipitacion_acumulada: 195.0, precipitacion_periodo: 17.5, max_diario_periodo: 12.0 },
	{ fecha_corta: '27 Nov', superficie_marisma: 4327.11, porcentaje_marisma: 12.73, num_lagunas: 14, superficie_lagunas: 32.67, precipitacion_acumulada: 197.4, precipitacion_periodo: 2.4, max_diario_periodo: 2.4 },
	{ fecha_corta: '5 Dic', superficie_marisma: 3998.52, porcentaje_marisma: 11.76, num_lagunas: 17, superficie_lagunas: 53.91, precipitacion_acumulada: 197.4, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 },
	{ fecha_corta: '13 Dic', superficie_marisma: 4020.93, porcentaje_marisma: 11.83, num_lagunas: 18, superficie_lagunas: 50.18, precipitacion_acumulada: 197.4, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 },
	{ fecha_corta: '21 Dic', superficie_marisma: 3003.12, porcentaje_marisma: 8.83, num_lagunas: 13, superficie_lagunas: 33.12, precipitacion_acumulada: 212.0, precipitacion_periodo: 14.6, max_diario_periodo: 11.1 },
	{ fecha_corta: '29 Dic', superficie_marisma: 2687.40, porcentaje_marisma: 7.90, num_lagunas: 14, superficie_lagunas: 36.63, precipitacion_acumulada: 212.0, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 },
	{ fecha_corta: '30 Ene', superficie_marisma: 22873.95, porcentaje_marisma: 67.28, num_lagunas: 32, superficie_lagunas: 46.53, precipitacion_acumulada: 294.4, precipitacion_periodo: 82.4, max_diario_periodo: 40.5 },
	{ fecha_corta: '19 Mar', superficie_marisma: 33112.53, porcentaje_marisma: 97.39, num_lagunas: 220, superficie_lagunas: 131.37, precipitacion_acumulada: 560.3, precipitacion_periodo: 265.9, max_diario_periodo: 36.5 },
	{ fecha_corta: '27 Mar', superficie_marisma: 32810.53, porcentaje_marisma: 96.50, num_lagunas: 165, superficie_lagunas: 117.01, precipitacion_acumulada: 595.7, precipitacion_periodo: 35.4, max_diario_periodo: 15.2 },
	{ fecha_corta: '28 Abr', superficie_marisma: 29519.91, porcentaje_marisma: 86.82, num_lagunas: 164, superficie_lagunas: 122.88, precipitacion_acumulada: 648.9, precipitacion_periodo: 53.2, max_diario_periodo: 13.8 },
	{ fecha_corta: '6 May', superficie_marisma: 29017.64, porcentaje_marisma: 85.35, num_lagunas: 177, superficie_lagunas: 120.51, precipitacion_acumulada: 674.5, precipitacion_periodo: 25.6, max_diario_periodo: 14.2 },
	{ fecha_corta: '14 May', superficie_marisma: 27234.81, porcentaje_marisma: 80.10, num_lagunas: 175, superficie_lagunas: 115.56, precipitacion_acumulada: 674.5, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 },
	{ fecha_corta: '22 May', superficie_marisma: 24929.35, porcentaje_marisma: 73.32, num_lagunas: 152, superficie_lagunas: 98.19, precipitacion_acumulada: 674.5, precipitacion_periodo: 0.0, max_diario_periodo: 0.0 }
	];

	let currentChart = null;

	function formatNumber(num) {
	return new Intl.NumberFormat('es-ES').format(Math.round(num));
	}

	function showChart(chartType) {
	document.querySelectorAll('.chart-btn').forEach(btn => btn.classList.remove('active'));
	event.target.classList.add('active');

	if (chartType === 'inundacion') {
	document.getElementById('chartTitle').textContent = 'Evolución de la Inundación';
	document.getElementById('chartSubtitle').textContent = 'Superficie inundada (ha) y porcentaje de la marisma';
	createInundacionChart();
	} else if (chartType === 'lagunas') {
	document.getElementById('chartTitle').textContent = 'Sistema Lagunar';
	document.getElementById('chartSubtitle').textContent = 'Número y superficie de lagunas temporales';
	createLagunasChart();
	} else if (chartType === 'precipitacion') {
	document.getElementById('chartTitle').textContent = 'Precipitación por Período vs Inundación';
	document.getElementById('chartSubtitle').textContent = 'Precipitación entre imágenes y respuesta de inundación';
	createPrecipitacionChart();
	} else if (chartType === 'acumulada') {
	document.getElementById('chartTitle').textContent = 'Precipitación Acumulada vs Inundación';
	document.getElementById('chartSubtitle').textContent = 'Evolución de precipitación acumulada y superficie inundada';
	createAcumuladaChart();
	}
	}

	function createInundacionChart() {
	const ctx = document.getElementById('mainChart').getContext('2d');
	if (currentChart) currentChart.destroy();

	currentChart = new Chart(ctx, {
	type: 'line',
	data: {
	labels: data.map(d => d.fecha_corta),
	datasets: [
	{
	label: 'Superficie Marisma (ha)',
	data: data.map(d => d.superficie_marisma),
	backgroundColor: 'rgba(59, 130, 246, 0.6)',
	borderColor: 'rgb(37, 99, 235)',
	borderWidth: 2,
	fill: true,
	yAxisID: 'y'
	},
	{
	label: '% Inundación',
	data: data.map(d => d.porcentaje_marisma),
	backgroundColor: 'rgba(220, 38, 38, 0.1)',
	borderColor: 'rgb(220, 38, 38)',
	borderWidth: 4,
	fill: false,
	pointRadius: 6,
	yAxisID: 'y1'
	}
	]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Superficie (ha)' } },
	y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: '% Inundación' }, min: 0, max: 100, grid: { drawOnChartArea: false } }
	},
	plugins: {
	tooltip: {
	callbacks: {
	afterBody: function(context) {
	const item = data[context[0].dataIndex];
	return [`💧 Precip. acumulada: ${item.precipitacion_acumulada}mm`, `💧 Precip. período: ${item.precipitacion_periodo}mm`];
	}
	}
	}
	}
	}
	});
	}

	function createLagunasChart() {
	const ctx = document.getElementById('mainChart').getContext('2d');
	if (currentChart) currentChart.destroy();

	currentChart = new Chart(ctx, {
	type: 'bar',
	data: {
	labels: data.map(d => d.fecha_corta),
	datasets: [
	{
	label: 'Número de Lagunas',
	data: data.map(d => d.num_lagunas),
	backgroundColor: 'rgba(139, 92, 246, 0.8)',
	yAxisID: 'y'
	},
	{
	label: 'Superficie Lagunas (ha)',
	data: data.map(d => d.superficie_lagunas),
	type: 'line',
	borderColor: 'rgb(5, 150, 105)',
	borderWidth: 3,
	fill: false,
	pointRadius: 5,
	yAxisID: 'y1'
	}
	]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Número de Lagunas' } },
	y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: 'Superficie (ha)' }, grid: { drawOnChartArea: false } }
	},
	plugins: {
	tooltip: {
	callbacks: {
	afterBody: function(context) {
	const item = data[context[0].dataIndex];
	return [`💧 Precip. acumulada: ${item.precipitacion_acumulada}mm`, `💧 Precip. período: ${item.precipitacion_periodo}mm`];
	}
	}
	}
	}
	}
	});
	}

	function createPrecipitacionChart() {
	const ctx = document.getElementById('mainChart').getContext('2d');
	if (currentChart) currentChart.destroy();

	currentChart = new Chart(ctx, {
	type: 'bar',
	data: {
	labels: data.map(d => d.fecha_corta),
	datasets: [
	{
	label: 'Precipitación período (mm)',
	data: data.map(d => d.precipitacion_periodo),
	backgroundColor: 'rgba(96, 165, 250, 0.7)',
	yAxisID: 'y'
	},
	{
	label: '% Inundación',
	data: data.map(d => d.porcentaje_marisma),
	type: 'line',
	borderColor: 'rgb(220, 38, 38)',
	borderWidth: 3,
	fill: false,
	pointRadius: 5,
	yAxisID: 'y1'
	}
	]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Precipitación período (mm)' } },
	y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: '% Inundación' }, min: 0, max: 100, grid: { drawOnChartArea: false } }
	},
	plugins: {
	tooltip: {
	callbacks: {
	afterBody: function(context) {
	const item = data[context[0].dataIndex];
	return [`💧 Máximo diario: ${item.max_diario_periodo}mm`, `💧 Acumulada total: ${item.precipitacion_acumulada}mm`];
	}
	}
	}
	}
	}
	});
	}

	function createAcumuladaChart() {
	const ctx = document.getElementById('mainChart').getContext('2d');
	if (currentChart) currentChart.destroy();

	currentChart = new Chart(ctx, {
	type: 'line',
	data: {
	labels: data.map(d => d.fecha_corta),
	datasets: [
	{
	label: 'Precipitación acumulada (mm)',
	data: data.map(d => d.precipitacion_acumulada),
	backgroundColor: 'rgba(34, 197, 94, 0.2)',
	borderColor: 'rgb(34, 197, 94)',
	borderWidth: 3,
	fill: true,
	yAxisID: 'y'
	},
	{
	label: '% Inundación',
	data: data.map(d => d.porcentaje_marisma),
	backgroundColor: 'rgba(220, 38, 38, 0.1)',
	borderColor: 'rgb(220, 38, 38)',
	borderWidth: 4,
	fill: false,
	pointRadius: 6,
	yAxisID: 'y1'
	}
	]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	y: { type: 'linear', display: true, position: 'left', title: { display: true, text: 'Precipitación acumulada (mm)' } },
	y1: { type: 'linear', display: true, position: 'right', title: { display: true, text: '% Inundación' }, min: 0, max: 100, grid: { drawOnChartArea: false } }
	},
	plugins: {
	tooltip: {
	callbacks: {
	afterBody: function(context) {
	const item = data[context[0].dataIndex];
	return [`💧 Período: ${item.precipitacion_periodo}mm`, `💧 Máximo diario: ${item.max_diario_periodo}mm`];
	}
	}
	}
	}
	}
	});
	}

	// Inicializar con la primera gráfica
	window.addEventListener('load', function() {
	createInundacionChart();
	});
	</script>
	</body>
	</html>