/* VoxIA TV — player ao vivo com volta no tempo (DVR de 2 h), no padrão das TVs ao vivo de streaming */
.vx{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:16/9;user-select:none;-webkit-user-select:none;
  box-shadow:0 30px 80px -20px rgba(0,83,229,.45),0 0 0 1px rgba(0,169,254,.18);font-family:Inter,system-ui,sans-serif;color:#fff}
.vx video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.vx:fullscreen,.vx:-webkit-full-screen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh}
.vx.ocioso{cursor:none}

/* capa antes do play */
.vx-capa{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at center,rgba(0,83,229,.35),rgba(0,7,27,.92) 70%),url(/img/capa.jpg) center/cover;text-align:center;padding:20px;transition:opacity .35s}
.vx-capa.some{opacity:0;pointer-events:none}
.vx-capa img{width:min(320px,55%)}
.vx-capa button{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;font:700 17px Inter,sans-serif;color:#fff;
  padding:16px 28px;border-radius:999px;background:linear-gradient(135deg,#00A9FE,#0053E5);box-shadow:0 10px 30px -6px rgba(0,169,254,.6)}
.vx-capa button svg{width:20px;height:20px}
.vx-capa p{color:#9fb3d1;font-size:14px}

/* topo: o que está no ar */
.vx-topo{position:absolute;left:0;right:0;top:0;z-index:4;padding:18px 22px 40px;background:linear-gradient(rgba(0,7,27,.85),transparent);
  display:flex;flex-direction:column;gap:4px;opacity:0;transition:opacity .25s;pointer-events:none}
.vx-topo .ed{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#00A9FE}
.vx-topo .tit{font-size:20px;font-weight:700;line-height:1.25;max-width:80%;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* centro: play/pausa grande, carregando, avisos de toque duplo */
.vx-centro{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
.vx-grande{width:84px;height:84px;border-radius:50%;background:rgba(0,7,27,.55);display:grid;place-items:center;opacity:0;transform:scale(.85);transition:.2s;backdrop-filter:blur(6px)}
.vx-grande.mostra{opacity:1;transform:scale(1)}
.vx-grande svg{width:40px;height:40px}
.vx-gira{position:absolute;width:56px;height:56px;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:#00A9FE;animation:vxgira .8s linear infinite;display:none}
.vx.carregando .vx-gira{display:block}
@keyframes vxgira{to{transform:rotate(360deg)}}
.vx-pulo{position:absolute;top:50%;transform:translateY(-50%);font:800 15px Inter;background:rgba(0,7,27,.6);padding:10px 16px;border-radius:999px;opacity:0;transition:opacity .2s}
.vx-pulo.e{left:12%}.vx-pulo.d{right:12%}.vx-pulo.mostra{opacity:1}

/* barra de controles */
.vx-base{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:40px 18px 12px;background:linear-gradient(transparent,rgba(0,7,27,.92));
  opacity:0;transition:opacity .25s;pointer-events:none}
.vx.ativo .vx-base,.vx.ativo .vx-topo,.vx.pausado .vx-base,.vx.pausado .vx-topo{opacity:1;pointer-events:auto}
.vx.ativo .vx-topo,.vx.pausado .vx-topo{pointer-events:none}

.vx-linha{position:relative;height:22px;display:flex;align-items:center;cursor:pointer;margin:0 2px 6px;touch-action:none}
.vx-trilho{position:relative;flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.22);transition:height .15s}
.vx-linha:hover .vx-trilho,.vx-linha.arrasta .vx-trilho{height:7px}
.vx-carregado{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:rgba(255,255,255,.35)}
.vx-feito{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#00A9FE,#0053E5)}
.vx-ponto{position:absolute;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(0,169,254,.35);transform:scale(0);transition:transform .15s}
.vx-linha:hover .vx-ponto,.vx-linha.arrasta .vx-ponto,.vx.toque .vx-ponto{transform:scale(1)}
.vx-dica{position:absolute;bottom:22px;transform:translateX(-50%);background:rgba(0,7,27,.92);border:1px solid rgba(0,169,254,.35);
  font:700 12px Inter;padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;font-variant-numeric:tabular-nums}
.vx-linha:hover .vx-dica,.vx-linha.arrasta .vx-dica{opacity:1}

.vx-botoes{display:flex;align-items:center;gap:4px}
.vx-botoes button{border:0;background:transparent;color:#fff;width:42px;height:42px;border-radius:10px;cursor:pointer;display:grid;place-items:center;transition:background .15s;position:relative}
.vx-botoes button:hover{background:rgba(255,255,255,.12)}
.vx-botoes button:focus-visible{outline:2px solid #00A9FE;outline-offset:1px}
.vx-botoes svg{width:24px;height:24px}
.vx-vol{display:flex;align-items:center}
.vx-vol input{width:0;opacity:0;transition:width .2s,opacity .2s;accent-color:#00A9FE}
.vx-vol:hover input,.vx-vol input:focus{width:90px;opacity:1;margin-right:6px}
.vx-tempo{font:600 13px Inter;color:#cfd8e6;margin-left:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vx-aovivo{width:auto!important;padding:0 14px 0 12px!important;display:inline-flex!important;gap:8px;font:800 12px Inter!important;letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.18)!important;border-radius:999px!important;height:32px!important;margin-left:10px}
.vx-aovivo i{width:9px;height:9px;border-radius:50%;background:#FF3B5C;box-shadow:0 0 0 0 rgba(255,59,92,.7);animation:vxpulsa 1.6s infinite}
.vx-aovivo.atras{color:#cfd8e6}
.vx-aovivo.atras i{background:#7C93B5;animation:none}
@keyframes vxpulsa{70%{box-shadow:0 0 0 9px rgba(255,59,92,0)}100%{box-shadow:0 0 0 0 rgba(255,59,92,0)}}
.vx-esp{flex:1}

/* menu de qualidade */
.vx-menu{position:absolute;right:62px;bottom:62px;z-index:7;min-width:170px;background:rgba(2,13,40,.97);border:1px solid rgba(124,147,181,.25);
  border-radius:12px;padding:6px;display:none;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.vx-menu.aberto{display:block}
.vx-menu h5{font:700 11px Inter;letter-spacing:.14em;text-transform:uppercase;color:#7C93B5;padding:8px 10px 6px}
.vx-menu button{display:flex;width:100%;justify-content:space-between;align-items:center;border:0;background:transparent;color:#fff;font:500 14px Inter;padding:9px 10px;border-radius:8px;cursor:pointer}
.vx-menu button:hover{background:rgba(0,169,254,.15)}
.vx-menu button.sel::after{content:"✓";color:#00A9FE;font-weight:800}
.vx-menu small{color:#7C93B5;font-size:12px;margin-left:8px}

.vx-aviso{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:6;background:rgba(0,7,27,.8);border:1px solid rgba(255,255,255,.2);
  font:600 13px Inter;padding:9px 14px;border-radius:999px;display:none;align-items:center;gap:8px;cursor:pointer;backdrop-filter:blur(6px)}
.vx-aviso.mostra{display:inline-flex}
.vx-aviso svg{width:16px;height:16px}

@media (max-width:680px){
  .vx{border-radius:12px}
  .vx-topo .tit{font-size:15px;max-width:100%}
  .vx-capa img,.vx-capa p{display:none}
  .vx-capa button{padding:12px 20px;font-size:15px}
  .vx-botoes button{width:38px;height:38px}
  .vx-vol input,.vx-pip{display:none!important}
  .vx-tempo{display:none}
  .vx-base{padding:30px 10px 8px}
  .vx-menu{right:10px;bottom:56px}
}