/* Player limpo da apuração ao vivo: controles próprios, no mesmo vocabulário da faixa AO VIVO do site. */
.av-player {
  --av-p-vermelho: #e1061f; --av-p-navy: #07194f;
  position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; -webkit-tap-highlight-color: transparent;
  font-family: "Libre Franklin", Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased;
}
.av-player iframe, .av-player [data-av-iframe] { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Camada transparente sobre o vídeo: recebe o toque (o iframe engoliria) sem esconder nada. */
.av-player__toque { position: absolute; inset: 0; z-index: 1; }
.av-player__barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 2px; padding: 48px 10px 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, 0));
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.av-player--controles .av-player__barra, .av-player--pausado .av-player__barra { opacity: 1; pointer-events: auto; }

/* Botões como nos players profissionais (Twitch, YouTube, CBS): ícone branco solto sobre o degradê,
   área de toque de 44 px; o círculo claro só aparece ao passar o mouse. */
.av-player__botao {
  position: relative; flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; color: #fff; cursor: pointer; border-radius: 50%; background: transparent; border: 0;
  transition: background-color .15s ease, transform .15s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* Área de toque um pouco maior que o círculo. */
.av-player__botao:hover { background: rgba(255, 255, 255, .14); }
.av-player__botao:active { transform: scale(.93); }
.av-player__botao:focus-visible, .av-player__ativar-som:focus-visible, .av-player__centro:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.av-player svg { pointer-events: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.av-player svg .av-ico-cheio { fill: currentColor; stroke: none; }
.av-player__botao svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* Volume sempre à vista ao lado do som. No iPhone some: lá o sistema não deixa o site mudar o volume. */
.av-player__som { display: inline-flex; align-items: center; }
.av-player__volume {
  --v: 100%; width: 76px; margin: 0 10px 0 2px; height: 4px; border-radius: 2px; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: linear-gradient(to right, #fff var(--v), rgba(255, 255, 255, .35) var(--v));
}
.av-player--ios .av-player__volume { display: none; }
.av-player__volume::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.av-player__volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.av-player__volume:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Selo AO VIVO no canto de cima à direita, sempre à vista (como na Twitch), igual ao da faixa do site. */
.av-player__aovivo {
  position: absolute; top: 12px; right: 12px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  background: var(--av-p-vermelho); color: #fff; border-radius: 4px;
  font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.av-player__aovivo i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: av-p-pulso 1.6s ease-out infinite; }
@keyframes av-p-pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }
.av-player__espaco { flex: 1; }

/* Capa sobre o iframe (carregando e pausado): a arte da live, com o aviso embaixo. */
.av-player__capa {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px;
  background-color: #050f33; background-size: cover; background-position: center;
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
}
.av-player__capa::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 15, 51, .7), rgba(5, 15, 51, 0) 45%); }
.av-player--capa .av-player__capa { opacity: 1; visibility: visible; transition: none; }
.av-player__carregando {
  position: relative; display: none; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px;
  background: rgba(7, 14, 40, .62); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.av-player__carregando i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: av-p-gira .8s linear infinite; }
@keyframes av-p-gira { to { transform: rotate(360deg); } }
.av-player--carregando .av-player__carregando { display: inline-flex; }
/* Antes da live (link já colado): horário e sininho no lugar do "Conectando"; o selo AO VIVO espera a hora. */
.av-player__aguardando { position: relative; display: none; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; pointer-events: auto; padding: 0 12px; }
.av-player__aguardando b { color: #fff; font-size: 17px; font-weight: 800; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.av-player--aguardando .av-player__aguardando { display: flex; }
.av-player--aguardando .av-player__carregando, .av-player--aguardando .av-player__aovivo { display: none !important; }
.av-player__aguardando .av-lembrete { margin-left: 0; }
@media (max-width: 600px) { .av-player__aguardando { gap: 8px; } .av-player__aguardando b { font-size: 14px; } }
/* Enquanto carrega, só a capa: o "Ativar som" e o play esperam o vídeo começar. */
.av-player--carregando .av-player__ativar-som, .av-player--carregando .av-player__centro { display: none !important; }
.av-player--carregando .av-player__barra { opacity: 0 !important; pointer-events: none !important; }

/* Cartão de espera (antes do link da live): a arte inteira, com o horário numa faixa embaixo. */
.av-espera.av-espera--capa { position: relative; justify-content: flex-end; align-items: stretch; padding: 0; background-color: #050f33; background-size: cover; background-position: center; font-family: "Libre Franklin", Arial, Helvetica, sans-serif; }
.av-espera__faixa { display: flex; align-items: center; gap: 12px; padding: 40px 18px 14px; background: linear-gradient(to top, rgba(5, 15, 51, .92), rgba(5, 15, 51, 0)); text-align: left; }
.av-espera__faixa > span:not(.av-espera__selo) { display: flex; flex-direction: column; gap: 3px; }
.av-espera__faixa b { font-size: 17px; font-weight: 800; line-height: 1.2; color: #fff; }
.av-espera__faixa small { font-size: 13px; color: #c9d3f5; opacity: 1; }
.av-espera--capa .av-espera__selo { flex: none; background: #e1061f; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
@media (max-width: 600px) { .av-espera__faixa { padding: 28px 12px 10px; gap: 10px; } .av-espera__faixa b { font-size: 14px; } .av-espera__faixa small, .av-espera--capa .av-espera__selo { display: none; } }

/* Sininho do cartão de espera (lembrete.js): pílula branca à direita da faixa do horário. */
.av-lembrete {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px 9px 13px; border: 0; border-radius: 999px;
  background: #fff; color: #07194f; font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.av-lembrete[hidden] { display: none; }
.av-lembrete:hover { transform: translateY(-1px); }
.av-lembrete svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.av-lembrete:not(.av-lembrete--ok) svg { animation: av-p-sino 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes av-p-sino { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 89% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
.av-lembrete--ok { background: #e7f6ec; color: #136c35; cursor: default; box-shadow: none; }
.av-lembrete:disabled:not(.av-lembrete--ok) { opacity: .7; }
@media (max-width: 600px) { .av-lembrete { padding: 8px 12px 8px 10px; font-size: 12px; gap: 5px; } .av-lembrete svg { width: 16px; height: 16px; } }
@media (prefers-reduced-motion: reduce) { .av-lembrete svg { animation: none !important; } }

/* Ícone certo para cada estado. */
.av-player .av-ico-play, .av-player--pausado .av-ico-pausa, .av-player .av-ico-mudo, .av-player--mudo .av-ico-som { display: none; }
.av-player--pausado .av-ico-play, .av-player--mudo .av-ico-mudo, .av-player__centro .av-ico-play { display: block; }

/* "Ativar som" em destaque enquanto estiver mudo, como o "Toque para ativar o som" do YouTube. */
.av-player__ativar-som {
  position: absolute; top: 14px; left: 14px; z-index: 2; display: none; align-items: center; gap: 9px;
  min-height: 44px; padding: 6px 16px 6px 6px; border-radius: 999px; cursor: pointer;
  background: rgba(7, 14, 40, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .01em;
  transition: background-color .15s ease, transform .15s ease;
  touch-action: manipulation;
}
.av-player__ativar-som:hover { background: rgba(7, 14, 40, .82); }
.av-player__ativar-som:active { transform: scale(.97); }
.av-player__ativar-icone {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; background: var(--av-p-vermelho);
}
.av-player__ativar-icone svg { width: 18px; height: 18px; }
.av-player--mudo .av-player__ativar-som { display: inline-flex; }

/* Play grande no meio quando o vídeo está pausado. */
.av-player__centro {
  position: absolute; top: 50%; left: 50%; z-index: 2; display: none; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 0 0 0 4px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .95); color: var(--av-p-navy); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .15s ease;
}
.av-player__centro:hover { transform: scale(1.06); }
.av-player__centro svg { width: 32px; height: 32px; }
.av-player--pausado .av-player__centro { display: inline-flex; }

@media (max-width: 600px) {
  .av-player__barra { gap: 0; padding: 40px 6px 4px; }
  .av-player__botao { width: 42px; height: 42px; }
  .av-player__botao svg { width: 22px; height: 22px; }
  .av-player__volume { width: 64px; margin: 0 8px 0 0; }
  .av-player__volume::-webkit-slider-thumb { width: 14px; height: 14px; }
  .av-player__aovivo { top: 10px; right: 10px; height: 20px; padding: 0 7px; font-size: 10px; }
  .av-player__ativar-som { top: 10px; left: 10px; min-height: 40px; padding: 5px 14px 5px 5px; font-size: 13px; }
  .av-player__ativar-icone { width: 30px; height: 30px; }
  .av-player__centro { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .av-player__centro svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .av-player__aovivo i, .av-player__carregando i { animation: none; }
  .av-player__botao, .av-player__ativar-som, .av-player__centro, .av-player__barra { transition: none; }
}

/* Tela cheia montada pela página (iPhone): cobre a tela, fundo preto, vídeo centralizado. */
.av-player--tela-cheia { position: fixed !important; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; }
.av-sem-rolagem, .av-sem-rolagem body { overflow: hidden !important; }
.av-player .av-ico-sair, .av-player--tela-cheia .av-ico-entrar { display: none; }
.av-player--tela-cheia .av-ico-sair { display: block; }
.av-player--tela-cheia .av-player__barra { padding-bottom: max(12px, env(safe-area-inset-bottom)); }