From 7e7efd2c552d01de72b7246208443160f2bb8a00 Mon Sep 17 00:00:00 2001
From: Tatiana Villa Ema <tatiana@tecnologia-facil.es>
Date: Wed, 4 Feb 2026 19:20:17 +0100
Subject: [PATCH] Poniendo la tabla de estadisticas mona

---
 eltiempo/css/estilos.css    | 82 +++++++++++++++++++++++++++++++++++++
 eltiempo/js/estadisticas.js | 24 ++++++++---
 2 files changed, 101 insertions(+), 5 deletions(-)

diff --git a/eltiempo/css/estilos.css b/eltiempo/css/estilos.css
index 0e73d3b..da952f0 100644
--- a/eltiempo/css/estilos.css
+++ b/eltiempo/css/estilos.css
@@ -281,3 +281,85 @@ footer {
     min-width: 80px;
     text-align: center;
 }
+
+/* =======================
+   Tabla de tendencia
+   ======================= */
+.trend-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1em;
+    font-family: 'Nunito', sans-serif;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+/* Cabecera */
+.trend-table thead {
+    background-color: #4a90e2;
+    color: white;
+}
+
+.trend-table thead th {
+    padding: 10px 15px;
+    text-align: center;
+    font-weight: 600;
+}
+
+/* Filas del cuerpo */
+.trend-table tbody tr {
+    border-bottom: 1px solid #ddd;
+}
+
+.trend-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+.trend-table tbody td {
+    padding: 8px 12px;
+    text-align: center;
+    font-weight: 500;
+}
+
+/* Colores según tipo de dato */
+.trend-table tbody td:nth-child(2) { /* Máx */
+    color: #e74c3c; /* rojo */
+    font-weight: 600;
+}
+
+.trend-table tbody td:nth-child(3) { /* Mín */
+    color: #3498db; /* azul */
+    font-weight: 600;
+}
+
+.trend-table tbody td:nth-child(4) { /* Lluvia */
+    color: #27ae60; /* verde */
+    font-weight: 600;
+}
+
+/* Hover para destacar fila */
+.trend-table tbody tr:hover {
+    background-color: #f1f1f1;
+}
+
+/* Adaptable a móviles */
+@media (max-width: 600px) {
+    .trend-table thead {
+        display: none;
+    }
+    .trend-table tbody td {
+        display: block;
+        text-align: right;
+        padding-left: 50%;
+        position: relative;
+    }
+    .trend-table tbody td::before {
+        content: attr(data-label);
+        position: absolute;
+        left: 10px;
+        font-weight: 600;
+        text-align: left;
+    }
+}
diff --git a/eltiempo/js/estadisticas.js b/eltiempo/js/estadisticas.js
index 68fa626..8e0674a 100644
--- a/eltiempo/js/estadisticas.js
+++ b/eltiempo/js/estadisticas.js
@@ -1,6 +1,5 @@
 // API URL absoluta
 const API_URL = "https://aplicacionesdevanguardia.es/eltiempo/servidor/api-weather-reverse.php?ciudad=madrid";
-//"/eltiempo/servidor/api-weather-reverse.php?ciudad=madrid";
 
 // ====================
 // Helper
@@ -77,6 +76,7 @@ function renderMonthStats(data) {
 function renderTrend(data) {
     const byYear = {};
 
+    // Agrupar datos por año para el mes seleccionado
     data.forEach(d => {
         const date = new Date(d.dia);
         if (date.getMonth() === selectedMonth) {
@@ -89,14 +89,23 @@ function renderTrend(data) {
     });
 
     const container = $("trend-container");
-    container.innerHTML = "<table><thead><tr><th>Año</th><th>Máx</th><th>Mín</th><th>Lluvia</th></tr></thead><tbody>";
 
-    Object.keys(byYear).sort().forEach(year => {
+    // Si no hay datos para el mes, mostrar mensaje
+    if (Object.keys(byYear).length === 0) {
+        container.innerHTML = "<p>No hay datos históricos para este mes.</p>";
+        return;
+    }
+
+    // Construir tabla completa en una variable
+    let html = "<table class=\"trend-table\"><thead><tr><th>Año</th><th>Máx</th><th>Mín</th><th>Lluvia</th></tr></thead><tbody>";
+
+    // Ordenar años de más reciente a más antiguo
+    Object.keys(byYear).sort((a, b) => b - a).forEach(year => {
         const maxAvg = (byYear[year].max.reduce((a,b)=>a+b,0)/byYear[year].max.length).toFixed(1);
         const minAvg = (byYear[year].min.reduce((a,b)=>a+b,0)/byYear[year].min.length).toFixed(1);
         const rainTotal = byYear[year].rain.reduce((a,b)=>a+b,0).toFixed(1);
 
-        container.innerHTML += `
+        html += `
             <tr>
                 <td><strong>${year}</strong></td>
                 <td>Máx ${maxAvg}°C</td>
@@ -105,9 +114,14 @@ function renderTrend(data) {
             </tr>
         `;
     });
-    container.innerHTML += "</tbody></table>";
+
+    html += "</tbody></table>";
+
+    // Insertar tabla en el contenedor
+    container.innerHTML = html;
 }
 
+
 // ====================
 // Botones de mes
 // ====================