html, body.display{
  margin:0; height:100%;
  background: var(--color-fondo-pantalla);
  color: var(--color-texto-pantalla);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  overflow:hidden;
}

.display-shell{
  height:100vh;
  display:flex;
  flex-direction:column;
  gap: 18px;
  padding: 18px 22px;
}

/* ---------- Encabezado: tarjeta propia, con su propio color y contraste ---------- */
.display-header{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 16px 26px;
  background: var(--color-barra-menu);
  color: var(--color-texto-sobre-barra);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  flex-shrink:0;
}
.display-header img{ height:40px; background:#fff; border-radius:8px; padding:4px; }
.display-header .marca-nombre{ font-size:1.15rem; font-weight:800; line-height:1.15; }
.display-header .marca-agencia{ font-size:.8rem; opacity:.75; font-weight:600; }
.display-header .reloj-header{
  margin-left:auto; font-size:1.55rem; font-weight:800; font-variant-numeric: tabular-nums;
}

/* ---------- Banner de turno en atención: tarjeta blanca, protagonista ---------- */
.turno-banner{
  flex-shrink:0;
  min-height: 27vh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 22px;
  flex-wrap:wrap;
  padding: 26px 40px;
  background:#fff;
  color: var(--color-texto-normal);
  border-radius: 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  position:relative;
}
.turno-banner .vacio{
  opacity:.45; text-align:center; font-size:1.3rem; font-weight:700; color: var(--color-texto-normal);
}
.turno-card{
  display:flex;
  align-items:center;
  gap: 26px;
  padding: 10px 20px;
  border-radius: 16px;
  animation: destello .7s ease;
}
@keyframes destello{
  0%{ background: color-mix(in srgb, var(--color-acento) 35%, white); }
  100%{ background: transparent; }
}
.turno-card .codigo-grande{
  font-size: 5.6rem;
  font-weight: 900;
  letter-spacing: 1px;
  line-height:1;
}
.turno-card .detalle{ text-align:left; }
.turno-card .detalle .servicio{ font-size:1.1rem; font-weight:700; color: var(--color-texto-normal); opacity:.75; }
.turno-card .detalle .ventanilla{
  font-size:1.7rem; font-weight:800; color: var(--color-texto-titulo); margin-top:2px;
  display:flex; align-items:center; gap:8px;
}
.turno-card .detalle .ventanilla i{ font-size:1.2rem; color: var(--color-secundario); }
.turno-card.secundario{
  padding: 10px 22px; gap:14px; background:#f4f6f8; border-radius:14px;
}
.turno-card.secundario .codigo-grande{ font-size:2.5rem; }
.turno-card.secundario .detalle .servicio{ font-size:.8rem; }
.turno-card.secundario .detalle .ventanilla{ font-size:1.02rem; }

/* ---------- Franja inferior: dos tarjetas independientes, con espacio real entre ellas ---------- */
.display-body{
  flex:1;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  min-height:0;
}

.espera-panel{
  background:#fff;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  padding: 22px 22px;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.espera-panel .subtitulo-lista{
  font-size:.78rem; text-transform:uppercase; letter-spacing:1.4px; color:#8a97a6; margin: 0 0 14px;
  font-weight:800; display:flex; align-items:center; justify-content:space-between;
}
.espera-panel .subtitulo-lista .contador{
  background: var(--color-secundario); color:#fff; border-radius:7px; padding:2px 10px; font-size:.78rem; font-weight:800;
}
.lista-espera{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.fila-turno{
  display:flex; align-items:center; gap:12px;
  background: #f4f6f8;
  border-radius: 10px;
  padding: 11px 14px;
}
.fila-turno .codigo{ font-size:1.05rem; font-weight:800; min-width:60px; color: var(--color-texto-titulo); }
.fila-turno .servicio{ flex:1; color: var(--color-texto-normal); opacity:.8; font-size:.82rem; }

.vacio{ opacity:.45; text-align:center; padding: 30px 10px; font-size:.9rem; color: var(--color-texto-normal); }

/* ---------- Publicidad: tarjeta propia, protagonista en tamaño ---------- */
.panel-ads{
  position:relative;
  background:#000;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  overflow:hidden;
}
.ad-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition: opacity .5s 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: rgba(0,0,0,.72);
  color:#fff;
  padding: 18px 28px;
  font-size:1rem;
  font-weight:700;
}
.ad-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; opacity:.55; gap:14px; text-align:center; padding: 30px; color:#fff;
}
.ad-placeholder i{ font-size:3.2rem; }

.ad-slide.img-error img{ display:none; }
.img-error-msg{
  color:#ffb4b4; font-size:.95rem; text-align:center; padding: 0 30px; line-height:1.5;
}
.img-error-msg .ruta{
  display:block; margin-top:8px; font-size:.78rem; opacity:.75; word-break:break-all; font-family: monospace;
}

/* Indicadores de progreso del carrusel (puntitos) */
.ad-dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px; z-index:5;
}
.ad-dots span{
  width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,.4); transition: background .3s;
}
.ad-dots span.activa{ background:#fff; }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px){
  .display-body{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .espera-panel{ max-height:200px; }
  .turno-banner{ min-height:22vh; }
  .turno-card .codigo-grande{ font-size:3.6rem; }
}