Update display_global.php

modules/turnero/views/display_global.php

@@ -112,6 +112,13 @@ $_hasVideo  = (bool)$_tvVideo;
         }
 
 
+        /* ── Left area ── */
+        .left-area {
+            display: flex; flex-direction: column;
+            overflow: hidden;
+            position: relative;
+        }
+
         /* ── Turno activo (centro) ── */
         .turno-activo {
             display: flex; flex-direction: column;
@@ -120,6 +127,7 @@ $_hasVideo  = (bool)$_tvVideo;
             padding: 1rem;
             position: relative;
             overflow: hidden;
+            flex: 1;
         }
         .turno-activo .label {
             font-size: clamp(1.1rem, 1.7vw, 1.3rem);
@@ -157,6 +165,33 @@ $_hasVideo  = (bool)$_tvVideo;
             color: #cbd5e1;
         }
 
+        /* ── Últimos llamados ── */
+        .ultimos-llamados {
+            flex-shrink: 0;
+            border-top: 1px solid #e2e8f0;
+            padding: .3rem 1.5rem .5rem;
+            background: #fff;
+        }
+        .ultimos-llamados .ul-label {
+            font-size: .7rem; font-weight: 700; text-transform: uppercase;
+            letter-spacing: 2px; color: #94a3b8; margin-bottom: .2rem;
+        }
+        .ultimos-llamados .ul-scroll {
+            display: flex; gap: .5rem;
+            overflow-x: auto; scrollbar-width: none;
+        }
+        .ultimos-llamados .ul-scroll::-webkit-scrollbar { display: none; }
+        .ul-item {
+            display: flex; align-items: center; gap: .4rem;
+            padding: .25rem .7rem; border-radius: 99px;
+            background: #f8fafc; border: 1px solid #e2e8f0;
+            white-space: nowrap; flex-shrink: 0;
+        }
+        .ul-item .ul-cod { font-weight: 800; font-size: .78rem; }
+        .ul-item .ul-nom { font-size: .72rem; color: #64748b; }
+        .ul-item .ul-dest { font-size: .65rem; color: #94a3b8; }
+        .ul-item .ul-dest i { margin-right: 2px; }
+
         /* ── Video reel (9:16, alto completo, columna derecha) ── */
         .reel-wrap {
             display: none;
@@ -328,12 +363,18 @@ $_hasVideo  = (bool)$_tvVideo;
     </header>
 
     <div class="pg-body <?= $_hasVideo ? 'has-video' : '' ?>">
-        <div class="turno-activo" id="zona-activo">
-            <div class="label">Siguiente turno</div>
-            <div class="codigo" id="codigo-activo">—</div>
-            <div class="lugar-label" id="lugar-label">Llamado a</div>
-            <div class="lugar-nombre" id="lugar-nombre">—</div>
-            <div class="pac-nombre" id="pac-nombre"></div>
+        <div class="left-area">
+            <div class="turno-activo" id="zona-activo">
+                <div class="label">Siguiente turno</div>
+                <div class="codigo" id="codigo-activo">—</div>
+                <div class="lugar-label" id="lugar-label">Llamado a</div>
+                <div class="lugar-nombre" id="lugar-nombre">—</div>
+                <div class="pac-nombre" id="pac-nombre"></div>
+            </div>
+            <div class="ultimos-llamados" id="ultimos-llamados" style="display:none">
+                <div class="ul-label"><i class="fas fa-history me-1"></i>Últimos llamados</div>
+                <div class="ul-scroll" id="ul-scroll"></div>
+            </div>
         </div>
         <div class="reel-wrap <?= $_hasVideo ? 'has-video' : '' ?>" id="reel-wrap">
             <div class="reel-inner">
@@ -485,6 +526,7 @@ function showAnnouncement({ codigo, destino, paciente, color }) {
 
 /* ── State ── */
 let lastTurnoKey = null;
+let llamados = [];
 
 function renderSnapshot(snap) {
     const codEl  = document.getElementById('codigo-activo');
@@ -522,6 +564,9 @@ function renderSnapshot(snap) {
                 color: c
             });
             lastTurnoKey = key;
+            llamados.unshift({ codigo: t.codigo, destino: t.destino, paciente: t.paciente_nombre, color: c });
+            if (llamados.length > 20) llamados.pop();
+            renderLlamados();
         }
     } else {
         codEl.textContent  = '—';
@@ -550,6 +595,8 @@ function renderSnapshot(snap) {
         });
     }
 
+    renderLlamados();
+
     // Stats
     const s = snap.stats || {};
     document.getElementById('st-espera').textContent      = s.en_espera      || 0;
@@ -558,6 +605,21 @@ function renderSnapshot(snap) {
     document.getElementById('st-total').textContent       = s.total          || 0;
 }
 
+function renderLlamados() {
+    const wrap = document.getElementById('ultimos-llamados');
+    const sc   = document.getElementById('ul-scroll');
+    if (!wrap || !sc) return;
+    if (llamados.length === 0) { wrap.style.display = 'none'; return; }
+    wrap.style.display = '';
+    sc.innerHTML = llamados.map(l => `
+        <div class="ul-item">
+            <span class="ul-cod" style="color:${l.color || '<?= $_labColor ?>'}">${esc(l.codigo)}</span>
+            ${l.paciente ? `<span class="ul-nom">${esc(l.paciente)}</span>` : ''}
+            <span class="ul-dest"><i class="fas fa-arrow-right"></i> ${esc(l.destino)}</span>
+        </div>
+    `).join('');
+}
+
 function esc(s) {
     const d = document.createElement('div');
     d.appendChild(document.createTextNode(String(s ?? '')));