feat(recepcion): destacar turnos en atención en la cola

Los turnos ya tomados (en_recepcion) muestran fondo azul pálido,
borde izquierdo azul grueso y badge "EN ATENCIÓN" en lugar del
chip de tiempo, para que el recepcionista identifique de un vistazo
qué turno ya está siendo atendido y no llame otro.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-04 15:19:54 -05:00
co-authored by Claude Sonnet 4.6
parent 1d285da6ae
commit c566c1f33f
+14 -8
View File
@@ -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('');