html, body.display{
  margin:0; height:100%;
  background:#061826;
  color:#fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  overflow:hidden;
}
.display-wrap{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  height:100vh;
}

/* ---------- Columna izquierda: turnos ---------- */
.panel-turnos{
  display:flex;
  flex-direction:column;
  background: linear-gradient(160deg, #0b3d62, #061826 80%);
  padding: 26px 30px;
  overflow:hidden;
}
.panel-turnos .cabecera{
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
}
.panel-turnos .cabecera img{ height:44px; background:#fff; border-radius:8px; padding:4px; }
.panel-turnos .cabecera h1{ font-size:1.3rem; margin:0; }
.panel-turnos .cabecera .reloj{ margin-left:auto; font-size:1.3rem; font-weight:700; opacity:.9; font-variant-numeric: tabular-nums; }

.turno-actual{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding: 26px 30px;
  margin-bottom: 20px;
  display:flex;
  align-items:center;
  gap:26px;
  animation: destello .9s ease;
}
@keyframes destello{ 0%{ background: rgba(0,169,157,.55);} 100%{ background: rgba(255,255,255,.07);} }
.turno-actual .codigo-grande{
  font-size: 4.6rem;
  font-weight: 900;
  letter-spacing: 2px;
  line-height:1;
}
.turno-actual .detalle{ flex:1; }
.turno-actual .detalle .servicio{ font-size:1.15rem; font-weight:700; opacity:.9; }
.turno-actual .detalle .ventanilla{ font-size:1.6rem; font-weight:800; color:#8fe3d9; margin-top:4px;}

.subtitulo-lista{
  font-size:.85rem; text-transform:uppercase; letter-spacing:1.5px; opacity:.55; margin: 6px 0 10px;
  font-weight:700;
}

.lista-espera{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fila-turno{
  display:flex; align-items:center; gap:16px;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 12px 16px;
}
.fila-turno .codigo{ font-size:1.3rem; font-weight:800; min-width:80px; }
.fila-turno .servicio{ flex:1; opacity:.8; font-size:.92rem; }
.fila-turno .estado-tag{ font-size:.72rem; padding:4px 10px; border-radius:999px; font-weight:700; text-transform:uppercase; }
.fila-turno .estado-tag.esperando{ background:#1c3a52; color:#9fd3f5; }
.fila-turno .estado-tag.llamado{ background:#5a3d0c; color:#ffd48a; }
.fila-turno .estado-tag.atendiendo{ background:#0d4a34; color:#8fe3c8; }

.vacio{ opacity:.4; text-align:center; padding: 30px; font-size:.95rem; }

/* ---------- Columna derecha: publicidad ---------- */
.panel-ads{
  position:relative;
  background:#000;
  overflow:hidden;
}
.ad-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition: opacity 1s ease;
}
.ad-slide.activa{ opacity:1; }
.ad-slide img{ width:100%; height:100%; object-fit:cover; }
.ad-slide .caption{
  position:absolute; bottom:0; left:0; right:0;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  padding: 40px 30px 22px;
  font-size:1.1rem;
  font-weight:700;
}
.ad-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; opacity:.35; gap:14px; text-align:center; padding: 30px;
}
.ad-placeholder i{ font-size:4rem; }

@media (max-width: 1000px){
  .display-wrap{ grid-template-columns: 1fr; grid-template-rows: 1.3fr 1fr; }
}