diff --git a/db/pendientes.db b/db/pendientes.db index 31b5f05..58fdb77 100644 Binary files a/db/pendientes.db and b/db/pendientes.db differ diff --git a/frontend/script.js b/frontend/script.js index 3533024..6272b6f 100644 --- a/frontend/script.js +++ b/frontend/script.js @@ -44,18 +44,21 @@ function renderCalendar() { const dateStr = year + '-' + String(month + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0'); const delDia = todosPendientes.filter(function(p) { return p.fecha === dateStr; }); const dayEl = document.createElement('div'); - dayEl.className = 'day'; - dayEl.innerHTML = '' + d + ''; + const tieneVencidos = delDia.some(function(p) { return esVencido(p); }); + dayEl.className = 'day' + (tieneVencidos ? ' vencido-dia' : ''); + + let html = '' + d + ''; if (delDia.length) { - const dots = document.createElement('div'); - dots.className = 'day-dots'; - delDia.slice(0, 4).forEach(function(p) { - const dot = document.createElement('span'); - dot.className = 'dot ' + (esVencido(p) ? 'alta' : p.urgencia); - dots.appendChild(dot); - }); - dayEl.appendChild(dots); + const vencidosCount = delDia.filter(function(p) { return esVencido(p); }).length; + const badgeClass = vencidosCount > 0 ? 'day-count vencidos' : 'day-count'; + const badgeText = delDia.length > 9 ? '9+' : String(delDia.length); + html += '' + badgeText + ''; + + const primero = delDia[0]; + const texto = escaparHtml(primero.descripcion); + html += '
' + texto + '
'; } + dayEl.innerHTML = html; dayEl.onclick = function() { abrirModalDia(dateStr, delDia); }; grid.appendChild(dayEl); } @@ -205,3 +208,4 @@ async function eliminarPendiente(id) { } cargarPendientes(); + diff --git a/frontend/style.css b/frontend/style.css index bb24dc5..6636b7c 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -138,6 +138,19 @@ h1 { } .day { + aspect-ratio: 1; + background: rgba(255,255,255,0.05); + border-radius: 10px; + padding: 5px 4px 4px; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: flex-start; + transition: 0.2s; + position: relative; + overflow: hidden; + min-height: 52px; + border: 1px solid transparent; aspect-ratio: 1; background: rgba(255,255,255,0.05); border-radius: 10px; @@ -362,7 +375,20 @@ h1 { h1 { font-size: 1.35rem; } .tab { padding: 10px 18px; font-size: 0.95rem; } .weekdays div { font-size: 0.75rem; padding: 6px 1px; } - .day { border-radius: 8px; min-height: 48px; } + .day { + aspect-ratio: 1; + background: rgba(255,255,255,0.05); + border-radius: 10px; + padding: 5px 4px 4px; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: flex-start; + transition: 0.2s; + position: relative; + overflow: hidden; + min-height: 52px; + border: 1px solid transparent; border-radius: 8px; min-height: 48px; } .day-number { font-size: 0.8rem; } .dot { width: 6px; height: 6px; } .calendar-header h2 { font-size: 1.05rem; } @@ -371,3 +397,48 @@ h1 { .pendiente-actions { width: 100%; justify-content: flex-end; } .badge-vencido { font-size: 0.65rem; padding: 2px 6px; } } + +.day.vencido-dia { + border-color: #ff2e2e; + box-shadow: inset 0 0 12px rgba(255, 46, 46, 0.35); +} + +.day-summary { + margin-top: 4px; + font-size: 0.7rem; + line-height: 1.15; + color: rgba(255,255,255,0.8); + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +.day-count { + position: absolute; + top: 4px; + right: 4px; + background: rgba(255,255,255,0.2); + color: #fff; + font-size: 0.65rem; + font-weight: 700; + width: 18px; + height: 18px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.day-count.vencidos { + background: #ff2e2e; +} + +@media (max-width: 430px) { + .day { min-height: 58px; padding: 5px 3px 3px; } + .day-number { font-size: 0.78rem; } + .day-summary { font-size: 0.62rem; -webkit-line-clamp: 2; } + .day-count { width: 16px; height: 16px; font-size: 0.6rem; top: 2px; right: 2px; } +}