From b365dab16fd6f5b8a90e12c0f52b367755fb7e4b Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 11 Jun 2026 22:08:49 -0500
Subject: [PATCH] Update display_global.php
---
modules/turnero/views/display_global.php | 80 +++++++++++++++++-------
1 file changed, 56 insertions(+), 24 deletions(-)
diff --git a/modules/turnero/views/display_global.php b/modules/turnero/views/display_global.php
index d2f125a..0c36db1 100644
--- a/modules/turnero/views/display_global.php
+++ b/modules/turnero/views/display_global.php
@@ -57,13 +57,13 @@ $_hasVideo = (bool)$_tvVideo;
background: #f1f5f9; border-radius: 8px; padding: 4px 7px;
}
.lab-nombre {
- font-size: clamp(1.1rem, 2vw, 1.4rem);
+ font-size: clamp(1.35rem, 2.3vw, 1.65rem);
font-weight: 700; color: #1e293b;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-right { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.reloj {
- font-size: clamp(1.3rem, 2.5vw, 1.7rem);
+ font-size: clamp(1.55rem, 2.8vw, 1.95rem);
font-weight: 700; color: #64748b;
font-variant-numeric: tabular-nums; letter-spacing: .5px;
}
@@ -76,15 +76,34 @@ $_hasVideo = (bool)$_tvVideo;
.btn-fs {
background: transparent; border: 1px solid #e2e8f0;
color: #64748b; border-radius: 8px; padding: 6px 10px;
- font-size: .85rem; cursor: pointer; font-family: inherit;
+ font-size: 1.1rem; cursor: pointer; font-family: inherit;
transition: background .15s;
}
.btn-fs:hover { background: #f1f5f9; }
+ /* ── Background decoration ── */
+ .bg-deco {
+ position: fixed; inset: 0;
+ pointer-events: none; z-index: 0;
+ overflow: hidden;
+ }
+ .bg-deco .dot {
+ position: absolute;
+ border-radius: 50%;
+ background: var(--brand);
+ opacity: .04;
+ }
+ .bg-deco .dot:nth-child(1) { width: 300px; height: 300px; top: -80px; left: -60px; }
+ .bg-deco .dot:nth-child(2) { width: 180px; height: 180px; bottom: 10%; left: 15%; }
+ .bg-deco .dot:nth-child(3) { width: 120px; height: 120px; top: 30%; left: 60%; }
+ .bg-deco .dot:nth-child(4) { width: 240px; height: 240px; bottom: -60px; right: 30%; }
+ .bg-deco .dot:nth-child(5) { width: 80px; height: 80px; top: 15%; right: 25%; }
+
/* ── Main body ── */
.pg-body {
- display: grid;
- grid-template-columns: 1fr;
+ display: flex;
+ align-items: center;
+ justify-content: center;
overflow: hidden;
position: relative;
}
@@ -100,7 +119,7 @@ $_hasVideo = (bool)$_tvVideo;
overflow: hidden;
}
.turno-activo .label {
- font-size: clamp(.85rem, 1.4vw, 1.05rem);
+ font-size: clamp(1.1rem, 1.7vw, 1.3rem);
font-weight: 700; text-transform: uppercase; letter-spacing: 4px;
color: #94a3b8;
margin-bottom: .2rem;
@@ -114,38 +133,43 @@ $_hasVideo = (bool)$_tvVideo;
font-variant-numeric: tabular-nums;
}
.turno-activo .lugar-label {
- font-size: clamp(1.1rem, 2.7vw, 1.9rem);
+ font-size: clamp(1.35rem, 3vw, 2.15rem);
font-weight: 600;
color: #94a3b8;
margin-top: .3rem;
}
.turno-activo .lugar-nombre {
- font-size: clamp(1.5rem, 3.7vw, 2.8rem);
+ font-size: clamp(1.75rem, 4vw, 3.05rem);
font-weight: 800;
color: #1e293b;
margin-top: .1rem;
}
.turno-activo .pac-nombre {
- font-size: clamp(.9rem, 1.8vw, 1.2rem);
+ font-size: clamp(1.15rem, 2.1vw, 1.45rem);
color: #64748b;
margin-top: .3rem;
}
.turno-activo .sin-turno {
- font-size: clamp(1.2rem, 2.5vw, 1.8rem);
+ font-size: clamp(1.45rem, 2.8vw, 2.05rem);
color: #cbd5e1;
}
- /* ── Video reel (columna derecha, alto completo) ── */
- .pg-body.has-video {
- grid-template-columns: 1fr 220px;
- }
+ /* ── Video reel flotante (9:16, alto completo) ── */
.reel-wrap {
display: none;
+ position: absolute;
+ right: 40px;
+ top: 50%;
+ transform: translateY(-50%);
+ height: calc(100% - 60px);
+ aspect-ratio: 9 / 16;
+ border-radius: 20px;
overflow: hidden;
background: #000;
- border-left: 1px solid rgba(255,255,255,.06);
+ box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.08);
+ z-index: 10;
}
- .reel-wrap.has-video { display: block; height: 100%; }
+ .reel-wrap.has-video { display: block; }
.reel-wrap video {
width: 100%; height: 100%;
object-fit: cover;
@@ -167,7 +191,7 @@ $_hasVideo = (bool)$_tvVideo;
}
.pg-cola::-webkit-scrollbar { display: none; }
.cola-lbl {
- font-size: .6rem; font-weight: 700;
+ font-size: .85rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.5px;
color: #94a3b8; white-space: nowrap; flex-shrink: 0;
}
@@ -175,14 +199,14 @@ $_hasVideo = (bool)$_tvVideo;
.cola-chip {
display: inline-flex; align-items: center; gap: .25rem;
padding: .2rem .6rem; border-radius: 99px;
- font-size: .72rem; font-weight: 700;
+ font-size: .97rem; font-weight: 700;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #475569;
white-space: nowrap; flex-shrink: 0;
}
.cola-chip .cdot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
- .cola-empty { font-size: .65rem; color: #cbd5e1; }
+ .cola-empty { font-size: .9rem; color: #cbd5e1; }
/* ── Announcement overlay ── */
#ann-overlay {
@@ -204,7 +228,7 @@ $_hasVideo = (bool)$_tvVideo;
}
#ann-overlay.visible .ann-card { transform: scale(1) translateY(0); }
.ann-label {
- font-size: clamp(.8rem, 1.5vw, 1rem); font-weight: 700;
+ font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 700;
text-transform: uppercase; letter-spacing: 4px;
color: rgba(255,255,255,.3); margin-bottom: .2rem;
}
@@ -216,11 +240,11 @@ $_hasVideo = (bool)$_tvVideo;
text-shadow: 0 0 80px var(--ac, var(--brand))66;
}
.ann-destino {
- font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 700;
+ font-size: clamp(1.75rem, 4.3vw, 3.25rem); font-weight: 700;
color: #fff; margin-top: .2rem;
}
.ann-pac {
- font-size: clamp(.8rem, 1.5vw, 1.1rem);
+ font-size: clamp(1.05rem, 1.8vw, 1.35rem);
color: rgba(255,255,255,.45); margin-top: .3rem;
}
.ann-progress {
@@ -248,12 +272,12 @@ $_hasVideo = (bool)$_tvVideo;
}
.stat-item { text-align: center; }
.stat-item .val {
- font-size: clamp(.7rem, 1.2vw, .85rem);
+ font-size: clamp(.95rem, 1.5vw, 1.1rem);
font-weight: 700; color: #475569;
font-variant-numeric: tabular-nums;
}
.stat-item .lbl {
- font-size: .5rem; color: #94a3b8;
+ font-size: .75rem; color: #94a3b8;
text-transform: uppercase; letter-spacing: 1px;
}
.stat-sep { width: 1px; height: 18px; background: #e2e8f0; }
@@ -265,6 +289,14 @@ $_hasVideo = (bool)$_tvVideo;
+
+