diff --git a/modules/turnero/views/recepcion.php b/modules/turnero/views/recepcion.php
index fff9479..3dfb68f 100644
--- a/modules/turnero/views/recepcion.php
+++ b/modules/turnero/views/recepcion.php
@@ -118,7 +118,11 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
             display: flex; align-items: center; gap: .6rem;
             transition: box-shadow .15s;
         }
-        .cola-card.activo { border-color: #3b82f6; box-shadow: 0 0 0 2px #bfdbfe; }
+        .cola-card.activo     { border-color: #3b82f6; box-shadow: 0 0 0 2px #bfdbfe; }
+        .cola-card.en-atencion { background: #eff6ff; border-color: #93c5fd; border-left: 4px solid #2563eb; }
+        .atencion-chip { font-size: .6rem; font-weight: 700; border-radius: 99px;
+            padding: 0 6px; line-height: 1.7;
+            background: #dbeafe; color: #1d4ed8; }
         .cola-card .prio-dot {
             width: 36px; height: 36px; border-radius: 9px;
             display: flex; align-items: center; justify-content: center;
@@ -992,12 +996,14 @@ function renderCola(snap) {
         return;
     }
     lista.innerHTML = visibles.map(t => {
+        const enAtencion = t.estado === 'en_recepcion';
         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>`
-            : '';
+        const badgeRow = enAtencion
+            ? `<div class="t-badge-row"><span class="atencion-chip"><i class="fas fa-circle" style="font-size:.45rem;vertical-align:middle;margin-right:3px"></i>EN ATENCIÓN</span></div>`
+            : (te ? `<div class="t-badge-row"><span class="tiempo-chip ${te.cls}">${escHtml(te.txt)}</span></div>` : '');
+        const clases = ['cola-card', turnoActivo?.id === t.id ? 'activo' : '', enAtencion ? 'en-atencion' : ''].filter(Boolean).join(' ');
         return `
-        <div class="cola-card ${turnoActivo?.id === t.id ? 'activo' : ''}" data-id="${t.id}">
+        <div class="${clases}" 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>
@@ -1005,10 +1011,10 @@ function renderCola(snap) {
                 ${badgeRow}
             </div>
             <button onclick="llamarTurnoEspecifico(${t.id}, '${t.estado}')"
-                    title="${t.estado === 'en_recepcion' ? 'Re-llamar este turno' : 'Llamar este turno ahora'}"
-                    style="flex-shrink:0;background:#2563eb;border:none;color:#fff;
+                    title="${enAtencion ? 'Re-llamar este turno' : 'Llamar este turno ahora'}"
+                    style="flex-shrink:0;background:${enAtencion ? '#1d4ed8' : '#2563eb'};border:none;color:#fff;
                            border-radius:7px;padding:5px 9px;font-size:.78rem;cursor:pointer">
-                <i class="fas ${t.estado === 'en_recepcion' ? 'fa-volume-up' : 'fa-bell'}"></i>
+                <i class="fas ${enAtencion ? 'fa-volume-up' : 'fa-bell'}"></i>
             </button>
         </div>`;
     }).join('');