mas visible en calendario

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 = '<span class="day-number">' + d + '</span>';
+        const tieneVencidos = delDia.some(function(p) { return esVencido(p); });
+        dayEl.className = 'day' + (tieneVencidos ? ' vencido-dia' : '');
+
+        let html = '<span class="day-number">' + d + '</span>';
         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 += '<span class="' + badgeClass + '">' + badgeText + '</span>';
+
+            const primero = delDia[0];
+            const texto = escaparHtml(primero.descripcion);
+            html += '<div class="day-summary">' + texto + '</div>';
         }
+        dayEl.innerHTML = html;
         dayEl.onclick = function() { abrirModalDia(dateStr, delDia); };
         grid.appendChild(dayEl);
     }
@@ -205,3 +208,4 @@ async function eliminarPendiente(id) {
 }
 
 cargarPendientes();
+

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