diff --git a/frontend/script.js b/frontend/script.js
index 58f3590..5a96645 100644
--- a/frontend/script.js
+++ b/frontend/script.js
@@ -82,7 +82,7 @@ function abrirModalDia(fecha, pendientes) {
             tit.textContent = 'Pendientes (' + noCompletados.length + ')';
             cont.appendChild(tit);
             noCompletados.forEach(function(p) {
-                cont.appendChild(crearCardPendiente(p));
+                cont.appendChild(crearCardPendiente(p, true));
             });
         }
         if (completados.length) {
@@ -91,14 +91,14 @@ function abrirModalDia(fecha, pendientes) {
             titC.textContent = 'Completados (' + completados.length + ')';
             cont.appendChild(titC);
             completados.forEach(function(p) {
-                cont.appendChild(crearCardPendiente(p));
+                cont.appendChild(crearCardPendiente(p, true));
             });
         }
     }
     document.getElementById('modalDia').classList.remove('hidden');
 }
 
-function crearCardPendiente(p) {
+function crearCardPendiente(p, soloLectura) {
     const vencido = esVencido(p);
     const div = document.createElement('div');
     div.className = 'pendiente-card ' + (vencido ? 'vencido' : p.urgencia);
@@ -111,41 +111,68 @@ function crearCardPendiente(p) {
     }
     html += '</div>' +
         '<div>' + formatearFecha(p.fecha) + ' - ' + p.estado + ' - Urgencia: ' + p.urgencia + '</div>' +
-        '</div>' +
-        '<div class="menu-wrapper">' +
-        '<button class="menu-btn" onclick="toggleMenu(' + p.id + ')">\u22EF</button>' +
-        '<div class="menu-dropdown" id="menu-' + p.id + '">' +
-        '<button onclick="editarPendiente(' + p.id + ')">Editar</button>' +
-        '<button class="menu-delete" onclick="eliminarPendiente(' + p.id + ')">Eliminar</button>' +
-        '</div>' +
-        '</div>' +
         '</div>';
 
-    html += '<div class="acceso-rapido">';
+    if (soloLectura) {
+        html += '</div>';
+    } else {
+        html += '<div class="menu-wrapper">' +
+            '<button class="menu-btn" onclick="toggleMenu(' + p.id + ')">\u22EF</button>' +
+            '<div class="menu-dropdown" id="menu-' + p.id + '">' +
+            '<button onclick="editarPendiente(' + p.id + ')">Editar</button>' +
+            '<button class="menu-delete" onclick="eliminarPendiente(' + p.id + ')">Eliminar</button>' +
+            '</div>' +
+            '</div>' +
+            '</div>';
+    }
 
-    html += '<div class="acceso-grupo">';
-    html += '<span class="acceso-label">Prioridad:</span>';
-    ['alta', 'media', 'baja'].forEach(function(u) {
-        const activo = p.urgencia === u ? ' activo' : '';
-        const etiqueta = u.charAt(0).toUpperCase() + u.slice(1);
-        html += '<button class="quick-btn urgencia-' + u + activo + '" onclick="cambioRapido(' + p.id + ',\'urgencia\',\'' + u + '\')">' + etiqueta + '</button>';
-    });
-    html += '</div>';
-
-    html += '<div class="acceso-grupo">';
-    html += '<span class="acceso-label">Estado:</span>';
-    [
-        { val: 'pendiente', label: 'Pendiente' },
-        { val: 'en progreso', label: 'En proceso' },
-        { val: 'completado', label: 'Completado' }
-    ].forEach(function(e) {
-        const activo = p.estado === e.val ? ' activo' : '';
-        const cls = e.val.replace(' ', '_');
-        html += '<button class="quick-btn estado-' + cls + activo + '" onclick="cambioRapido(' + p.id + ',\'estado\',\'' + e.val + '\')">' + e.label + '</button>';
-    });
-    html += '</div>';
-
-    html += '</div>';
+    if (soloLectura) {
+        html += '<div class="acceso-rapido solo-lectura">';
+        html += '<div class="acceso-grupo">';
+        html += '<span class="acceso-label">Prioridad:</span>';
+        ['alta', 'media', 'baja'].forEach(function(u) {
+            const activo = p.urgencia === u ? ' activo' : '';
+            const etiqueta = u.charAt(0).toUpperCase() + u.slice(1);
+            html += '<span class="quick-badge urgencia-' + u + activo + '">' + etiqueta + '</span>';
+        });
+        html += '</div>';
+        html += '<div class="acceso-grupo">';
+        html += '<span class="acceso-label">Estado:</span>';
+        [
+            { val: 'pendiente', label: 'Pendiente' },
+            { val: 'en progreso', label: 'En proceso' },
+            { val: 'completado', label: 'Completado' }
+        ].forEach(function(e) {
+            const activo = p.estado === e.val ? ' activo' : '';
+            const cls = e.val.replace(' ', '_');
+            html += '<span class="quick-badge estado-' + cls + activo + '">' + e.label + '</span>';
+        });
+        html += '</div>';
+        html += '</div>';
+    } else {
+        html += '<div class="acceso-rapido">';
+        html += '<div class="acceso-grupo">';
+        html += '<span class="acceso-label">Prioridad:</span>';
+        ['alta', 'media', 'baja'].forEach(function(u) {
+            const activo = p.urgencia === u ? ' activo' : '';
+            const etiqueta = u.charAt(0).toUpperCase() + u.slice(1);
+            html += '<button class="quick-btn urgencia-' + u + activo + '" onclick="cambioRapido(' + p.id + ',\'urgencia\',\'' + u + '\')">' + etiqueta + '</button>';
+        });
+        html += '</div>';
+        html += '<div class="acceso-grupo">';
+        html += '<span class="acceso-label">Estado:</span>';
+        [
+            { val: 'pendiente', label: 'Pendiente' },
+            { val: 'en progreso', label: 'En proceso' },
+            { val: 'completado', label: 'Completado' }
+        ].forEach(function(e) {
+            const activo = p.estado === e.val ? ' activo' : '';
+            const cls = e.val.replace(' ', '_');
+            html += '<button class="quick-btn estado-' + cls + activo + '" onclick="cambioRapido(' + p.id + ',\'estado\',\'' + e.val + '\')">' + e.label + '</button>';
+        });
+        html += '</div>';
+        html += '</div>';
+    }
 
     div.innerHTML = html;
     return div;
diff --git a/frontend/style.css b/frontend/style.css
index d6a98ab..29567f9 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -446,6 +446,30 @@ h1 {
 .quick-btn.estado-en_progreso.activo  { background: #4dabf7; }
 .quick-btn.estado-completado.activo   { background: #51cf66; }
 
+.quick-badge {
+    padding: 5px 11px;
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 8px;
+    background: rgba(255,255,255,0.08);
+    color: #fff;
+    font-size: 0.78rem;
+    white-space: nowrap;
+    display: inline-block;
+}
+
+.quick-badge.activo {
+    font-weight: 700;
+    border-color: transparent;
+}
+
+.quick-badge.urgencia-alta.activo   { background: #ff6b6b; }
+.quick-badge.urgencia-media.activo  { background: #feca57; color: #333; }
+.quick-badge.urgencia-baja.activo   { background: #48dbfb; color: #333; }
+
+.quick-badge.estado-pendiente.activo    { background: #6c757d; }
+.quick-badge.estado-en_progreso.activo  { background: #4dabf7; }
+.quick-badge.estado-completado.activo   { background: #51cf66; }
+
 .subsubtitulo {
     margin: 14px 0 8px;
     font-size: 0.92rem;