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; }
+}