diff --git a/modules/turnero/views/display.php b/modules/turnero/views/display.php index 290eb3a..3febb10 100644 --- a/modules/turnero/views/display.php +++ b/modules/turnero/views/display.php @@ -1,3 +1,15 @@ +getConnection(); + $__rows = $__pdo->query("SELECT clave, valor FROM lab_config WHERE clave IN ('empresa_nombre','doc_logo_base64','doc_color')")->fetchAll(PDO::FETCH_KEY_PAIR); + $_dispCfg = $__rows ?: []; +} catch (\Throwable $_) {} +$_labNombre = htmlspecialchars($_dispCfg['empresa_nombre'] ?? 'Sistema de Turnos'); +$_labLogo = $_dispCfg['doc_logo_base64'] ?? ''; +$_labColor = preg_match('/^#[0-9a-fA-F]{3,8}$/', $_dispCfg['doc_color'] ?? '') ? $_dispCfg['doc_color'] : '#1565c0'; +?> @@ -13,11 +25,18 @@ margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; - background: #0a0f1e; - color: #f0f4ff; + background: #f0f4f8; + color: #1e293b; font-family: 'Segoe UI', system-ui, sans-serif; } + /* ── Variables de color de marca ─────────────────── */ + :root { + --brand: ; + --brand-dark: color-mix(in srgb, 70%, #000); + --brand-light:color-mix(in srgb, 15%, #fff); + } + /* ── Layout ───────────────────────────────────────── */ .display-grid { display: grid; @@ -25,35 +44,64 @@ height: 100vh; gap: 0; } + + /* ── Header ───────────────────────────────────────── */ .display-header { display: flex; align-items: center; justify-content: space-between; - padding: .75rem 2rem; - background: #0f172a; - border-bottom: 1px solid #1e293b; + padding: .6rem 2rem; + background: var(--brand); flex-shrink: 0; + gap: 1rem; } - .display-header .titulo { - font-size: clamp(1rem, 2.5vw, 1.5rem); - font-weight: 700; color: #94a3b8; - display: flex; align-items: center; gap: .6rem; + .header-brand { + display: flex; align-items: center; gap: .8rem; + flex: 1; min-width: 0; + } + .header-brand img.logo { + height: 44px; max-width: 120px; + object-fit: contain; + background: rgba(255,255,255,.12); + border-radius: 8px; + padding: 4px 6px; + } + .header-brand .lab-nombre { + font-size: clamp(.9rem, 2vw, 1.3rem); + font-weight: 800; color: #fff; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + .header-brand .lab-subtitulo { + font-size: .72rem; color: rgba(255,255,255,.65); + font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; + display: block; margin-top: 1px; + } + .header-right { + display: flex; align-items: center; gap: .75rem; flex-shrink: 0; } .display-header .reloj { - font-size: clamp(1.2rem, 3vw, 1.8rem); - font-weight: 800; color: #e2e8f0; + font-size: clamp(1.1rem, 2.5vw, 1.6rem); + font-weight: 800; color: rgba(255,255,255,.95); font-variant-numeric: tabular-nums; + letter-spacing: 1px; } - .display-header .estado-chip { - font-size: .8rem; padding: .25rem .75rem; border-radius: 20px; - font-weight: 700; + .estado-chip { + font-size: .75rem; padding: .22rem .65rem; border-radius: 20px; + font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; } - .estado-chip.conectado { background: #14532d; color: #86efac; } - .estado-chip.conectando { background: #422006; color: #fdba74; } - .estado-chip.error { background: #450a0a; color: #fca5a5; } + .estado-chip.conectado { background: rgba(255,255,255,.2); color: #fff; } + .estado-chip.conectando { background: rgba(0,0,0,.25); color: #fde68a; } + .estado-chip.error { background: rgba(239,68,68,.3); color: #fecaca; } + #btn-activar-sonido { + background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); + color: rgba(255,255,255,.85); border-radius: 8px; padding: 5px 12px; + font-size: .78rem; cursor: pointer; + display: flex; align-items: center; gap: 5px; white-space: nowrap; + } + #btn-activar-sonido:hover { background: rgba(255,255,255,.25); } - /* ── Panel central ────────────────────────────────── */ + /* ── Cuerpo ───────────────────────────────────────── */ .display-body { display: grid; - grid-template-columns: 1fr 340px; + grid-template-columns: 1fr 320px; height: 100%; overflow: hidden; } @@ -62,46 +110,52 @@ .cola-panel { display: none !important; } } - /* ── Turno activo ─────────────────────────────────── */ + /* ── Panel turno activo ────────────────────────────── */ .turno-activo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; position: relative; overflow: hidden; - background: radial-gradient(ellipse at center, #111827 0%, #0a0f1e 70%); + background: #fff; + } + /* Franja decorativa de color en el borde izquierdo */ + .turno-activo::before { + content: ''; position: absolute; left: 0; top: 0; bottom: 0; + width: 8px; background: var(--brand); } .turno-activo .etiqueta { - font-size: clamp(.9rem, 2vw, 1.2rem); - color: #64748b; font-weight: 600; + font-size: clamp(.8rem, 1.8vw, 1.1rem); + color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; - margin-bottom: .5rem; + margin-bottom: .25rem; } .turno-activo .codigo-grande { - font-size: clamp(5rem, 22vw, 16rem); + font-size: clamp(5rem, 20vw, 15rem); font-weight: 900; line-height: 1; letter-spacing: -4px; + color: var(--brand); transition: color .4s; } .turno-activo .nombre-pac { - font-size: clamp(1rem, 3vw, 2rem); - font-weight: 600; color: #cbd5e1; - margin-top: .5rem; text-align: center; + font-size: clamp(1rem, 2.8vw, 1.8rem); + font-weight: 700; color: #334155; + margin-top: .4rem; text-align: center; } .turno-activo .prio-badge { display: inline-flex; align-items: center; gap: .5rem; - padding: .4rem 1.2rem; border-radius: 30px; - font-size: clamp(.8rem, 1.8vw, 1.15rem); font-weight: 700; + padding: .45rem 1.4rem; border-radius: 30px; + font-size: clamp(.8rem, 1.6vw, 1.1rem); font-weight: 700; margin-top: 1rem; + background: var(--brand-light); color: var(--brand-dark); } .turno-activo .sin-turno { - font-size: clamp(1.5rem, 4vw, 3rem); - color: #334155; text-align: center; + font-size: clamp(1.2rem, 3vw, 2.2rem); + color: #cbd5e1; text-align: center; } - - /* Anillo de animación al llamar turno */ + /* Anillo de animación */ @keyframes ping-ring { - 0% { transform: scale(.8); opacity: .9; } - 100% { transform: scale(2.5); opacity: 0; } + 0% { transform: scale(.8); opacity: .7; } + 100% { transform: scale(2.8); opacity: 0; } } .ring-anim { position: absolute; inset: 0; @@ -109,69 +163,70 @@ pointer-events: none; z-index: 0; } .ring-anim::before { - content: ''; - width: 35vmin; height: 35vmin; - border-radius: 50%; - background: transparent; - border: 4px solid currentColor; - opacity: 0; - } - .ring-anim.animar::before { - animation: ping-ring .7s ease-out 1; + content: ''; width: 35vmin; height: 35vmin; border-radius: 50%; + background: transparent; border: 5px solid var(--brand); opacity: 0; } + .ring-anim.animar::before { animation: ping-ring .75s ease-out 1; } .turno-activo > *:not(.ring-anim) { position: relative; z-index: 1; } /* ── Panel de cola ────────────────────────────────── */ .cola-panel { - background: #0f172a; - border-left: 1px solid #1e293b; + background: #f8fafc; + border-left: 2px solid #e2e8f0; display: flex; flex-direction: column; overflow: hidden; } .cola-panel-header { - padding: 1rem 1.2rem .6rem; - font-size: .85rem; font-weight: 700; - color: #64748b; text-transform: uppercase; letter-spacing: 2px; - border-bottom: 1px solid #1e293b; + padding: .9rem 1.2rem .5rem; + font-size: .8rem; font-weight: 800; + color: var(--brand); text-transform: uppercase; letter-spacing: 2px; + border-bottom: 1px solid #e2e8f0; flex-shrink: 0; + background: #fff; } .cola-lista { flex: 1; overflow-y: auto; padding: .5rem; - scrollbar-width: thin; scrollbar-color: #1e293b transparent; + scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .cola-item { - display: flex; align-items: center; gap: .75rem; - padding: .6rem .8rem; border-radius: 10px; - margin-bottom: .35rem; - background: #1e293b; - transition: background .2s; + display: flex; align-items: center; gap: .7rem; + padding: .55rem .75rem; border-radius: 10px; + margin-bottom: .3rem; + background: #fff; + border: 1px solid #e2e8f0; + transition: border-color .2s; + } + .cola-item:first-child { + border-color: var(--brand); + background: var(--brand-light); } - .cola-item:first-child { background: #1e3a5f; } .cola-item .cod-badge { - font-size: 1.2rem; font-weight: 900; - min-width: 52px; text-align: center; - padding: .2rem .4rem; border-radius: 8px; + font-size: 1.15rem; font-weight: 900; + min-width: 50px; text-align: center; + padding: .18rem .4rem; border-radius: 7px; + color: #fff; } .cola-item .pac-info { flex: 1; min-width: 0; } .cola-item .pac-nombre { - font-size: .85rem; color: #e2e8f0; font-weight: 600; + font-size: .83rem; color: #1e293b; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .cola-item .pac-hora { font-size: .72rem; color: #475569; } - .cola-vacia { color: #334155; text-align: center; padding: 3rem 1rem; font-size: .95rem; } + .cola-item .pac-hora { font-size: .7rem; color: #94a3b8; } + .cola-vacia { color: #94a3b8; text-align: center; padding: 3rem 1rem; font-size: .9rem; } - /* ── Stats (footer) ──────────────────────────────── */ + /* ── Footer ───────────────────────────────────────── */ .display-footer { - display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; - padding: .65rem 2rem; - background: #0f172a; - border-top: 1px solid #1e293b; + display: flex; justify-content: center; align-items: center; + gap: 2rem; flex-wrap: wrap; + padding: .5rem 2rem; + background: var(--brand); flex-shrink: 0; } .stat-item { text-align: center; } - .stat-item .val { font-size: 1.3rem; font-weight: 800; color: #e2e8f0; } - .stat-item .lbl { font-size: .7rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; } + .stat-item .val { font-size: 1.25rem; font-weight: 800; color: #fff; } + .stat-item .lbl { font-size: .65rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: 1px; } + .stat-sep { width: 1px; height: 28px; background: rgba(255,255,255,.2); } @@ -180,20 +235,24 @@
-
- - Sistema de Turnos +
+ + + +
+
+ Sistema de Turnos +
+
+
+ + Conectando… + + +
--:--:--
- - Conectando… - - -
--:--:--
@@ -201,12 +260,12 @@
-
+
Turno en atención
-
—
+
—
-
- Esperando turno +
+ Esperando turno
@@ -231,14 +290,17 @@
—
En espera
+
—
Atendidos hoy
+
—
Total del día
+
—
Tiempo prom.
@@ -353,32 +415,28 @@ function renderSnapshot(snap) { const elRing = document.getElementById('ring'); if (activo) { - const color = activo.prioridad_color || '#3b82f6'; - // ¿Cambió el turno? → animar + sonido if (activo.codigo !== lastCodigoActivo) { anunciarTurno(activo.codigo, activo.paciente_nombre || ''); - elRing.style.color = color; elRing.classList.remove('animar'); - // Forzar reflow para reiniciar animación void elRing.offsetWidth; elRing.classList.add('animar'); lastCodigoActivo = activo.codigo; } - elCodigo.textContent = activo.codigo; - elCodigo.style.color = color; - elNombre.textContent = activo.paciente_nombre || ''; - elPrio.style.background = color + '33'; // 20% opacity - elPrio.style.color = color; + elCodigo.textContent = activo.codigo; + elCodigo.style.color = activo.prioridad_color || ''; + elNombre.textContent = activo.paciente_nombre || ''; + elPrio.style.background = (activo.prioridad_color || '#1565c0') + '22'; + elPrio.style.color = activo.prioridad_color || '#1565c0'; elPrio.innerHTML = ` ${activo.prioridad_codigo} — ${activo.prioridad_nombre}`; } else { elCodigo.textContent = '—'; - elCodigo.style.color = '#334155'; + elCodigo.style.color = '#cbd5e1'; elNombre.textContent = ''; - elPrio.style.background = '#1e293b'; + elPrio.style.background = '#f1f5f9'; elPrio.style.color = '#94a3b8'; - elPrio.innerHTML = ' Esperando turno'; + elPrio.innerHTML = ' Esperando turno'; lastCodigoActivo = null; }