Difuntos e intenciones personales

frontend/css/intenciones.css

@@ -261,6 +261,45 @@
     border-color: var(--color-acento);
 }
 
+/* NAVEGADOR DE MES */
+.nav-mes {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin: 1rem 0 0.8rem;
+}
+
+.nombre-mes {
+    font-size: 1rem;
+    font-weight: 600;
+    min-width: 120px;
+    text-align: center;
+    color: var(--color-texto);
+    text-transform: capitalize;
+}
+
+.btn-mes {
+    background: none;
+    border: 1px solid var(--color-acento, #c8a96e);
+    color: var(--color-acento, #c8a96e);
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    font-size: 1.4rem;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+}
+
+.btn-mes:hover {
+    background: var(--color-acento, #c8a96e);
+    color: #fff;
+}
+
 /* LISTA DE DIFUNTOS */
 .lista-difuntos {
     list-style: none;

frontend/data/difuntos.json

@@ -17,7 +17,7 @@
   },
   {
     "nombre": "Visi Correas González",
-    "nacimiento": "XXXX-11-14",
+    "nacimiento": "1900-11-14",
     "fallecimiento": "2024-02-04",
     "nota": ""
   },
@@ -83,8 +83,8 @@
   },
   {
     "nombre": "Mauricio Sánchez",
-    "nacimiento": "XXXX-09-22",
+    "nacimiento": "1900-09-22",
-    "fallecimiento": "XXXX-08-20",
+    "fallecimiento": "1900-08-20",
     "nota": ""
   },
   {

frontend/intenciones.html

@@ -39,6 +39,11 @@
             </div>
             <button id="btn-guardar-difunto" class="boton">Añadir</button>
         </div>
+        <div id="nav-mes-difuntos" class="nav-mes">
+            <button id="btn-mes-prev" class="btn-mes" title="Mes anterior">&#8249;</button>
+            <span id="nombre-mes-difuntos" class="nombre-mes">Abril</span>
+            <button id="btn-mes-next" class="btn-mes" title="Mes siguiente">&#8250;</button>
+        </div>
         <ul id="lista-difuntos" class="lista-difuntos"></ul>
         <p id="sin-difuntos" class="texto-suave" style="display:none; margin-top:1rem;">Aún no has añadido ningún difunto.</p>
     </div>

frontend/js/codigo.js

@@ -141,77 +141,89 @@ async function recordatorioDifuntos() {
     if (!seccion) return;
 
     const hoy = new Date();
-    const mmdd = String(hoy.getMonth() + 1).padStart(2, "0") + "-" + String(hoy.getDate()).padStart(2, "0");
+    const mesActual = hoy.getMonth() + 1; // 1-12
+    const mmdd = String(mesActual).padStart(2, "0") + "-" + String(hoy.getDate()).padStart(2, "0");
+    const nombreMes = hoy.toLocaleDateString('es-ES', { month: 'long' });
 
-    // 1. Lista compartida desde difuntos.json (normalizar fallecimiento -> defuncion)
+    // 1. Difuntos personales desde la API (usuario logueado) o localStorage
-    let difuntosJSON = [];
-    try {
-        const res = await fetch('data/difuntos.json');
-        if (res.ok) {
-            const data = await res.json();
-            difuntosJSON = data.map(d => ({
-                nombre:    d.nombre,
-                nacimiento: d.nacimiento,
-                defuncion: d.fallecimiento,
-                nota:      d.nota || ""
-            }));
-        }
-    } catch (e) { /* sin conexion */ }
-
-    // 2. Difuntos personales desde localStorage
     const usuarioGuardado = typeof getUsuario === 'function' ? getUsuario() : null;
+    let todosDifuntos = [];
+
+    if (usuarioGuardado) {
+        try {
+            const res = await fetch(`${API_BASE}/difuntos/personales`, {
+                headers: { 'Authorization': 'Bearer ' + (localStorage.getItem('token') || '') }
+            });
+            if (res.ok) {
+                todosDifuntos = await res.json();
+                // La API devuelve 'defuncion', igual que localStorage
+            }
+        } catch (e) { /* sin conexión */ }
+    }
+
+    // Fallback localStorage si no hay API o no hay usuario
+    if (todosDifuntos.length === 0) {
         const clave = usuarioGuardado
             ? `difuntos_personales_${usuarioGuardado.id}`
             : "difuntos_personales_anonimo";
-    const difuntosLocal = JSON.parse(localStorage.getItem(clave) || "[]");
+        todosDifuntos = JSON.parse(localStorage.getItem(clave) || "[]");
+    }
 
-    // 3. Combinar (locales primero, sin duplicados por nombre)
+    if (todosDifuntos.length === 0) return;
-    const nombresSeen = new Set();
+
-    const todos = [...difuntosLocal, ...difuntosJSON].filter(d => {
+    // 2. Filtrar los que tienen aniversario o cumpleaños en el mes actual
-        if (!d.nombre || nombresSeen.has(d.nombre)) return false;
+    const delMes = todosDifuntos.filter(d => {
-        nombresSeen.add(d.nombre);
+        const nacMes = d.nacimiento && !d.nacimiento.includes('XXXX')
-        return true;
+            ? parseInt(d.nacimiento.split('-')[1]) : null;
+        const defMes = d.defuncion && !d.defuncion.includes('XXXX')
+            ? parseInt(d.defuncion.split('-')[1]) : null;
+        return nacMes === mesActual || defMes === mesActual;
     });
 
-    if (todos.length === 0) return;
+    if (delMes.length === 0) return;
 
-    // 4. Detectar aniversarios de hoy
+    // 3. Detectar aniversarios de hoy (dentro de los del mes)
     const recordatorios = [];
-    todos.forEach(d => {
+    delMes.forEach(d => {
         if (d.nacimiento && !d.nacimiento.includes('XXXX')) {
             const partes = d.nacimiento.split("-");
             if (partes.length === 3 && partes[1] + "-" + partes[2] === mmdd) {
                 const anios = hoy.getFullYear() - parseInt(partes[0]);
-                recordatorios.push("\uD83C\uDF82 Hoy habr\u00eda sido el cumplea\u00F1os de <strong>" + d.nombre + "</strong> &mdash; " + anios + " a\u00F1os");
+                recordatorios.push("🎂 Hoy habría sido el cumpleaños de <strong>" + d.nombre + "</strong> &mdash; " + anios + " años");
             }
         }
         if (d.defuncion && !d.defuncion.includes('XXXX')) {
             const partes = d.defuncion.split("-");
             if (partes.length === 3 && partes[1] + "-" + partes[2] === mmdd) {
                 const anios = hoy.getFullYear() - parseInt(partes[0]);
-                recordatorios.push("\uD83D\uDD6F Hoy es el " + anios + ".\u00BA aniversario del fallecimiento de <strong>" + d.nombre + "</strong>");
+                recordatorios.push("🕯 Hoy es el " + anios + ".º aniversario del fallecimiento de <strong>" + d.nombre + "</strong>");
             }
         }
     });
 
-    // 5. Construir HTML
+    // 4. Construir HTML
     seccion.style.display = "block";
-    let html = '<h3>\uD83D\uDD6F En el recuerdo</h3>';
+    let html = `<h3>🕯 En el recuerdo — ${nombreMes.charAt(0).toUpperCase() + nombreMes.slice(1)}</h3>`;
 
     if (recordatorios.length > 0) {
         html += recordatorios.map(r => `<p>${r}</p>`).join("");
-        html += '<p class="recordatorio-oracion"><em>"D\u00E1les, Se\u00F1or, el descanso eterno y brille para ellos la luz perpetua."</em></p>';
+        html += '<p class="recordatorio-oracion"><em>"Dales, Señor, el descanso eterno y brille para ellos la luz perpetua."</em></p>';
         html += '<hr style="border-color:rgba(255,255,255,0.15);margin:0.8rem 0;">';
     }
 
     html += '<ul class="lista-difuntos-index">';
-    todos.forEach(d => {
+    delMes.forEach(d => {
-        let anioStr = "";
+        let fechaStr = "";
-        if (d.defuncion && !d.defuncion.includes('XXXX')) {
+        if (d.nacimiento && !d.nacimiento.includes('XXXX')) {
-            const anio = parseInt(d.defuncion.split('-')[0]);
+            const dia = parseInt(d.nacimiento.split('-')[2]);
-            if (anio > 1000) anioStr = ' <span class="anio-difunto">(\u2020 ' + anio + ')</span>';
+            fechaStr += ` <span class="anio-difunto">(🎂 ${dia})</span>`;
         }
-        html += '<li>\uD83D\uDD4A ' + d.nombre + anioStr + '</li>';
+        if (d.defuncion && !d.defuncion.includes('XXXX')) {
+            const dia = parseInt(d.defuncion.split('-')[2]);
+            const anio = parseInt(d.defuncion.split('-')[0]);
+            fechaStr += ` <span class="anio-difunto">(✝ ${dia}${anio > 1000 ? ' · ' + anio : ''})</span>`;
+        }
+        html += '<li>🕊 ' + d.nombre + fechaStr + '</li>';
     });
     html += '</ul>';
 

frontend/js/intenciones.js

@@ -209,6 +209,10 @@ function crearHexagono(intencion) {
 
 // Caché en memoria para evitar peticiones redundantes
 let _difuntosCache = null;
+let _mesDifuntos = new Date().getMonth(); // 0-11, mes visible actualmente
+
+const MESES_ES = ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
+                  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
 
 async function _apiGetDifuntos() {
     try {
@@ -309,12 +313,27 @@ async function eliminarDifunto(id) {
 async function cargarDifuntos() {
     const lista       = document.getElementById("lista-difuntos");
     const sinDifuntos = document.getElementById("sin-difuntos");
-    const difuntos    = _difuntosCache || await _apiGetDifuntos();
+    const todos       = _difuntosCache || await _apiGetDifuntos();
+
+    // Actualizar navegador de mes
+    const navMes = document.getElementById("nav-mes-difuntos");
+    if (navMes) {
+        document.getElementById("nombre-mes-difuntos").textContent = MESES_ES[_mesDifuntos];
+    }
+
+    // Filtrar por mes seleccionado
+    const mesNum = _mesDifuntos + 1; // 1-12
+    const difuntos = todos.filter(d => {
+        const nacMes = d.nacimiento ? parseInt(d.nacimiento.split('-')[1]) : null;
+        const defMes = d.defuncion  ? parseInt(d.defuncion.split('-')[1])  : null;
+        return nacMes === mesNum || defMes === mesNum;
+    });
 
     lista.innerHTML = "";
 
     if (difuntos.length === 0) {
         sinDifuntos.style.display = "block";
+        sinDifuntos.textContent = `No hay difuntos con fechas en ${MESES_ES[_mesDifuntos]}.`;
         return;
     }
     sinDifuntos.style.display = "none";
@@ -349,6 +368,16 @@ async function cargarDifuntos() {
             cargarDifuntos();
         });
     });
+
+    // Botones de navegación de mes (se reasignan cada vez para evitar duplicados)
+    const btnPrev = document.getElementById("btn-mes-prev");
+    const btnNext = document.getElementById("btn-mes-next");
+    if (btnPrev) {
+        btnPrev.onclick = () => { _mesDifuntos = (_mesDifuntos + 11) % 12; cargarDifuntos(); };
+    }
+    if (btnNext) {
+        btnNext.onclick = () => { _mesDifuntos = (_mesDifuntos + 1) % 12; cargarDifuntos(); };
+    }
 }
 
 // ── MODAL ────────────────────────────────────────────────────