feat(recepcion): mostrar tiempo de espera en tarjetas de cola

Cada turno en la lista muestra cuánto lleva el paciente esperando,
igual que en toma de muestras — verde < 10 min, amarillo < 25 min,
rojo ≥ 25 min.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

modules/turnero/views/recepcion.php

@@ -129,6 +129,11 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
         .cola-card .turno-info .pac { font-size: .78rem; color: #64748b;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .cola-vacia { text-align: center; padding: 3rem 1rem; color: #94a3b8; }
+        .turno-info .t-badge-row { display: flex; align-items: center; gap: .3rem; margin-top: 2px; flex-wrap: wrap; }
+        .tiempo-chip { font-size: .6rem; font-weight: 700; border-radius: 99px; padding: 0 6px; line-height: 1.7; }
+        .tiempo-chip.ok   { background: #f0fdf4; color: #166534; }
+        .tiempo-chip.warn { background: #fffbeb; color: #92400e; }
+        .tiempo-chip.crit { background: #fef2f2; color: #991b1b; }
 
         /* ── Columna ficha ── */
         .rec-ficha {
@@ -960,6 +965,15 @@ async function cargarCola() {
     } catch (_) {}
 }
 
+function tiempoEspera(iso) {
+    if (!iso) return null;
+    const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
+    if (mins < 1)  return { txt: 'recién',    cls: 'ok'   };
+    if (mins < 10) return { txt: mins + ' min', cls: 'ok'   };
+    if (mins < 25) return { txt: mins + ' min', cls: 'warn' };
+    return               { txt: mins + ' min', cls: 'crit' };
+}
+
 function renderCola(snap) {
     const lista    = document.getElementById('cola-items');
     const todos    = snap.cola || [];
@@ -977,12 +991,18 @@ function renderCola(snap) {
             <i class="fas fa-hourglass-start fa-2x mb-2 d-block"></i>Cola vacía</div>`;
         return;
     }
-    lista.innerHTML = visibles.map(t => `
+    lista.innerHTML = visibles.map(t => {
+        const te = tiempoEspera(t.creado_at);
+        const badgeRow = te
+            ? `<div class="t-badge-row"><span class="tiempo-chip ${te.cls}">${escHtml(te.txt)}</span></div>`
+            : '';
+        return `
         <div class="cola-card ${turnoActivo?.id === t.id ? 'activo' : ''}" data-id="${t.id}">
             <div class="prio-dot" style="background:${t.prioridad_color};cursor:pointer" onclick="seleccionarTurno(${t.id})">${t.prioridad_codigo}</div>
             <div class="turno-info" style="cursor:pointer" onclick="seleccionarTurno(${t.id})">
                 <div class="cod">${escHtml(t.codigo)}</div>
                 <div class="pac">${escHtml(t.paciente_nombre || 'Sin nombre')}</div>
+                ${badgeRow}
             </div>
             <button onclick="llamarTurnoEspecifico(${t.id}, '${t.estado}')"
                     title="${t.estado === 'en_recepcion' ? 'Re-llamar este turno' : 'Llamar este turno ahora'}"
@@ -990,7 +1010,8 @@ function renderCola(snap) {
                            border-radius:7px;padding:5px 9px;font-size:.78rem;cursor:pointer">
                 <i class="fas ${t.estado === 'en_recepcion' ? 'fa-volume-up' : 'fa-bell'}"></i>
             </button>
-        </div>`).join('');
+        </div>`;
+    }).join('');
 }
 
 // ── Llamar siguiente ──────────────────────────────────────────