/* ============================================================
   AIRIS · Reproductor de video con capítulos (vplayer.css)
   Va dentro del marco .embed de las páginas de solución.
   Reutilizable por los 3 demos.
   ============================================================ */
.demo-player .demo-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#eef2f8; display:block;
}
.vplayer{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; flex-wrap:wrap;
}
.vp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; min-width:38px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-strong, rgba(255,255,255,.16));
  background:rgba(255,255,255,.03); color:var(--muted, #9fb0c8);
  font-family:var(--font-mono, ui-monospace, monospace); font-size:.72rem; font-weight:600;
  letter-spacing:.02em; transition:.18s;
}
.vp-btn:hover{ border-color:var(--cyan, #00d4ee); color:#fff; background:rgba(0,212,238,.1); }
.vp-btn svg{ width:15px; height:15px; }
.vp-btn.play{ background:var(--cyan, #00d4ee); color:#04121a; border-color:var(--cyan, #00d4ee); min-width:46px; }
.vp-btn.play:hover{ background:#3fe0f5; color:#04121a; }
.vp-count{
  font-family:var(--font-mono, ui-monospace, monospace); font-size:.72rem; font-weight:600;
  color:var(--muted, #9fb0c8); font-variant-numeric:tabular-nums; padding:0 8px; white-space:nowrap;
}
.vp-title{
  font-family:var(--font-mono, ui-monospace, monospace); font-size:.68rem; letter-spacing:.04em;
  color:var(--muted, #9fb0c8); margin-left:4px; max-width:280px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
@media(max-width:560px){ .vp-title{ display:none; } }