/* ============================================================
   VegaTurnos — Pantalla del Digiturno (kiosko, TV horizontal)
   Estética clara, moderna y premium: blanco + azul marino + dorado.
   ============================================================ */

:root {
	--vgt-dt-navy:    #1B406A;
	--vgt-dt-navy-2:  #14375C;
	--vgt-dt-oro:     #C9A24B;
	--vgt-dt-oro-osc: #A9842F;
	--vgt-dt-grad-oro: linear-gradient(135deg, #F1DDA6 0%, #D8B86A 48%, #C09A45 100%);
	--vgt-dt-azul-suave: #5C9BD1;
}

html, body { margin: 0; padding: 0; }

/* Oculta el chrome del tema en modo kiosko */
body.vgt-kiosko { overflow: hidden; background: #0a1e33; }
body.vgt-kiosko #wpadminbar,
body.vgt-kiosko header:not(.vgt-dt-left),
body.vgt-kiosko footer { display: none !important; }

.vgt-digiturno {
	position: fixed;
	inset: 0;
	display: flex;
	width: 100vw;
	height: 100vh;
	background: #0a1e33;
	overflow: hidden;
	font-family: var(--vgt-font);
}

/* ============================================================
   MITAD IZQUIERDA — turnos (CLARO y moderno)
   Layout en filas fijas: logo · turno · siguientes(flex) · reloj
   ============================================================ */
.vgt-dt-left {
	width: 46%;
	height: 100%;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: 2.2vh;
	padding: 3.4vh 2.6vw 2.6vh;
	background:
		radial-gradient(90% 60% at 100% 0%, rgba(201,162,75,.10) 0%, rgba(201,162,75,0) 55%),
		radial-gradient(80% 60% at 0% 100%, rgba(92,155,209,.16) 0%, rgba(92,155,209,0) 55%),
		linear-gradient(160deg, #FFFFFF 0%, #EFF6FC 48%, #DEECF8 100%);
	position: relative;
	overflow: hidden;
}
/* Acento dorado superior sutil */
.vgt-dt-left::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--vgt-dt-grad-oro);
}

/* Logo */
.vgt-dt-logo { display: flex; align-items: center; justify-content: center; min-height: 8vh; }
.vgt-dt-logo img { max-height: 10vh; max-width: 74%; width: auto; filter: drop-shadow(0 4px 12px rgba(27,64,106,.18)); }
.vgt-dt-logo-text { font-size: 2vw; font-weight: 800; color: var(--vgt-dt-navy); }

/* Tarjeta de turno actual */
.vgt-dt-actual {
	background: #fff;
	border: 1px solid #E4EEF7;
	border-radius: 26px;
	padding: 3vh 2.4vw;
	text-align: center;
	box-shadow: 0 18px 44px rgba(27,64,106,.12);
	position: relative;
}
.vgt-dt-actual { transform-origin: center; will-change: transform, box-shadow; }
.vgt-dt-actual.vgt-flash { animation: vgt-flash 0.95s ease-in-out 4; }
@keyframes vgt-flash {
	0%, 100% {
		transform: scale(1);
		background: #fff;
		box-shadow: 0 18px 44px rgba(27,64,106,.12);
	}
	35% {
		transform: scale(1.04);
		background: #FFFBF0;
		box-shadow:
			0 0 0 6px rgba(201,162,75,.55),
			0 0 48px 10px rgba(216,184,106,.65),
			0 22px 50px rgba(27,64,106,.22);
	}
}

/* El chip del destino también late y brilla al llamar */
.vgt-dt-actual.vgt-flash .vgt-dt-actual-destino {
	animation: vgt-chip-pulse 0.95s ease-in-out 4;
}
@keyframes vgt-chip-pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 12px 26px rgba(192,154,69,.4), inset 0 1px 0 rgba(255,255,255,.55);
	}
	35% {
		transform: scale(1.07);
		box-shadow: 0 18px 40px rgba(192,154,69,.75), 0 0 26px rgba(241,221,166,.9), inset 0 1px 0 rgba(255,255,255,.7);
	}
}
.vgt-dt-actual-label {
	font-family: var(--vgt-font-data);
	font-size: 1.35vw;
	letter-spacing: .5vw;
	color: var(--vgt-dt-oro-osc);
	font-weight: 600;
	text-transform: uppercase;
}
.vgt-dt-actual-nombre {
	font-size: 3vw;
	font-weight: 700;
	line-height: 1.08;
	margin: 1.4vh 0;
	color: var(--vgt-dt-navy);
	word-break: break-word;
	letter-spacing: -.01em;
}
.vgt-dt-actual-pasar {
	font-family: var(--vgt-font-data);
	font-size: 1.1vw;
	letter-spacing: .42vw;
	color: var(--vgt-dt-oro-osc);
	font-weight: 600;
	text-transform: uppercase;
}
.vgt-dt-actual-destino {
	display: inline-block;
	margin-top: 1.2vh;
	font-size: 2.2vw;
	font-weight: 800;
	color: #5a3d00;
	background: var(--vgt-dt-grad-oro);
	padding: 1.1vh 2.4vw;
	border-radius: 999px;
	box-shadow: 0 12px 26px rgba(192,154,69,.4), inset 0 1px 0 rgba(255,255,255,.55);
	text-shadow: 0 1px 0 rgba(255,255,255,.3);
}

/* Siguientes en turno (fila flexible, recorta sin tapar el reloj) */
.vgt-dt-siguientes { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.vgt-dt-siguientes-label {
	font-family: var(--vgt-font-data);
	font-size: 1.05vw;
	letter-spacing: .32vw;
	color: var(--vgt-dt-navy);
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 1.2vh;
	padding-bottom: .9vh;
	border-bottom: 2px solid rgba(201,162,75,.45);
	flex: 0 0 auto;
}
.vgt-dt-siguientes-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.vgt-dt-siguientes-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1vw;
	padding: 1.3vh 1.4vw;
	margin-bottom: 1vh;
	background: #fff;
	border: 1px solid #E4EEF7;
	border-left: 5px solid var(--vgt-dt-oro);
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(27,64,106,.07);
	font-size: 1.7vw;
}
.vgt-dt-sig-nombre { font-weight: 700; color: var(--vgt-dt-navy); }
.vgt-dt-sig-destino {
	font-family: var(--vgt-font-data);
	font-size: 1.1vw;
	font-weight: 600;
	color: var(--vgt-dt-navy);
	background: rgba(92,155,209,.16);
	padding: .55vh 1.1vw;
	border-radius: 999px;
	white-space: nowrap;
}

/* Reloj (pie con fila propia, nunca se solapa) */
.vgt-dt-reloj {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1vw;
	padding-top: 1.2vh;
	border-top: 1px solid rgba(27,64,106,.14);
}
.vgt-dt-fecha {
	font-family: var(--vgt-font-data);
	font-size: 1.2vw;
	color: var(--vgt-dt-navy);
	opacity: .72;
	text-transform: capitalize;
}
.vgt-dt-hora {
	font-family: var(--vgt-font-data);
	font-size: 1.7vw;
	font-weight: 700;
	color: var(--vgt-dt-oro-osc);
	letter-spacing: .03vw;
}

/* ============================================================
   MITAD DERECHA — carrusel
   ============================================================ */
.vgt-dt-right {
	width: 54%;
	height: 100%;
	background: #0a1e33;
	position: relative;
	overflow: hidden;
}
.vgt-dt-carrusel { width: 100%; height: 100%; position: relative; }
.vgt-dt-carrusel-placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,.4);
	font-size: 1.6vw;
}
.vgt-dt-slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity .9s ease;
	display: flex; align-items: center; justify-content: center;
	background: #0a1e33;
}
.vgt-dt-slide.is-active { opacity: 1; z-index: 2; }
.vgt-dt-slide img,
.vgt-dt-slide video { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   OVERLAY DE ACTIVACIÓN DE AUDIO (claro)
   ============================================================ */
.vgt-activar-overlay {
	position: fixed; inset: 0; z-index: 99999;
	background:
		radial-gradient(90% 70% at 50% 0%, rgba(92,155,209,.18) 0%, rgba(92,155,209,0) 60%),
		linear-gradient(160deg, #FFFFFF 0%, #EAF3FB 55%, #DAE9F7 100%);
	display: flex; align-items: center; justify-content: center;
}
.vgt-activar-overlay.is-hidden { display: none; }
.vgt-activar-box { text-align: center; color: var(--vgt-dt-navy); padding: 4vh; }
.vgt-activar-logo { max-height: 15vh; margin-bottom: 3vh; filter: drop-shadow(0 6px 18px rgba(27,64,106,.2)); }
.vgt-activar-box h2 { font-size: 2.4vw; font-weight: 800; margin: 0 0 1vh; color: var(--vgt-dt-navy); }
.vgt-activar-box p { font-size: 1.3vw; color: #5B7891; margin: 0 0 4vh; }
.vgt-activar-box .vgt-btn-azul {
	background: var(--vgt-dt-grad-oro) !important;
	color: #5a3d00 !important;
	border: none !important;
	box-shadow: 0 12px 28px rgba(192,154,69,.45) !important;
}

/* ============================================================
   PANTALLAS PEQUEÑAS / PRUEBAS
   ============================================================ */
@media (max-width: 900px) {
	.vgt-digiturno { flex-direction: column; }
	.vgt-dt-left, .vgt-dt-right { width: 100%; height: 50%; }
	.vgt-dt-actual-nombre { font-size: 6vw; }
	.vgt-dt-actual-destino { font-size: 4.4vw; }
	.vgt-dt-siguientes-list li { font-size: 3.4vw; }
	.vgt-dt-fecha { font-size: 2.6vw; }
	.vgt-dt-hora { font-size: 3.2vw; }
}