Update display_global.php

modules/turnero/views/display_global.php

@@ -135,6 +135,29 @@ $_hasVideo  = (bool)$_tvVideo;
             color: var(--brand);
             transition: color .3s;
             font-variant-numeric: tabular-nums;
+            position: relative;
+            z-index: 1;
+        }
+        .pulse-ring {
+            position: absolute;
+            top: 50%; left: 50%;
+            width: 90vmin; height: 90vmin;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+            border: 3px solid var(--brand);
+            opacity: 0;
+            pointer-events: none;
+            z-index: 0;
+            transition: opacity .6s ease;
+        }
+        .pulse-ring.active {
+            opacity: 1;
+            animation: pulse-ring 3s ease-in-out infinite;
+        }
+        @keyframes pulse-ring {
+            0%   { transform: translate(-50%, -50%) scale(.75); opacity: .15; }
+            50%  { transform: translate(-50%, -50%) scale(1.1);  opacity: .08; }
+            100% { transform: translate(-50%, -50%) scale(.75); opacity: .15; }
         }
         .turno-activo .lugar-label {
             font-size: clamp(1.35rem, 3vw, 2.15rem);
@@ -385,6 +408,7 @@ $_hasVideo  = (bool)$_tvVideo;
             </div>
         </div>
         <div class="turno-activo" id="zona-activo">
+            <div class="pulse-ring" id="pulse-ring"></div>
             <div class="label">Siguiente turno</div>
             <div class="codigo" id="codigo-activo">—</div>
             <div class="lugar-label" id="lugar-label">Llamado a</div>
@@ -548,6 +572,7 @@ function renderSnapshot(snap) {
     const lugEl  = document.getElementById('lugar-nombre');
     const pacEl  = document.getElementById('pac-nombre');
     const lblEl  = document.getElementById('lugar-label');
+    const ringEl = document.getElementById('pulse-ring');
 
     const turnos = [];
 
@@ -564,6 +589,7 @@ function renderSnapshot(snap) {
         lugEl.textContent  = t.destino;
         pacEl.textContent  = t.paciente_nombre || '';
         lblEl.textContent  = 'Llamado a';
+        ringEl.classList.add('active');
 
         const c = t.prioridad_color || '<?= $_labColor ?>';
         codEl.style.color = c;
@@ -590,6 +616,7 @@ function renderSnapshot(snap) {
         lblEl.textContent  = 'Llamado a';
         codEl.style.color  = '<?= $_labColor ?>';
         lastTurnoKey       = null;
+        ringEl.classList.remove('active');
     }
 
     // Queue