/* player_r2.css — o player PRÓPRIO do curso (vídeo do Cloudflare R2).
 *
 * Regras do dono (2026-08-27): só play/pause, velocidade 1× fixa, o aluno só avança o que já
 * assistiu, mais expandir (tela cheia) e o "modo teatro". Nada de barra arrastável — o trilho
 * aqui é INDICADOR, por isso `cursor:not-allowed`.
 *
 * ⚠️ O que vai a tela cheia / teatro é o PALCO (o container), nunca o <video>: com o vídeo
 * sozinho em tela cheia o navegador desenha os controles DELE, e a regra do "não avança"
 * morreria junto (a barra nativa é arrastável).
 */
.pl-palco{ position:relative; background:#000; border-radius:8px; overflow:hidden; }
.pl-palco video{ display:block; width:100%; max-height:70vh; background:#000; }

/* Modo teatro: CSS puro, sem Fullscreen API. É o único que funciona quando o sistema bloqueia
 * tela cheia de janela (caso do Qubes, na estação do dono). */
.pl-palco.pl-teatro{ position:fixed; inset:0; z-index:9999; border-radius:0;
                     display:flex; flex-direction:column; justify-content:center; }
.pl-palco.pl-teatro video{ max-height:calc(100vh - 54px); height:calc(100vh - 54px); object-fit:contain; }
.pl-palco:fullscreen{ display:flex; flex-direction:column; justify-content:center; }
.pl-palco:fullscreen video{ max-height:calc(100vh - 54px); height:calc(100vh - 54px); object-fit:contain; }

.pl-capa{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
          background:rgba(0,0,0,.5); cursor:pointer; }
.pl-capa b{ background:#00d94f; color:#04170c; border-radius:50%; width:72px; height:72px;
            display:flex; align-items:center; justify-content:center; font-size:29px; }
.pl-capa.pl-oculto{ display:none; }

.pl-controles{ display:flex; gap:12px; align-items:center; height:54px; padding:8px 12px;
               background:#121a14; border-top:1px solid #1f2c23; }
.pl-controles button{ background:transparent; color:#d7e5dc; border:0; font-size:17px;
                      cursor:pointer; padding:4px 6px; line-height:1; }
.pl-controles button:hover{ color:#00d94f; }
.pl-tempo{ font-variant-numeric:tabular-nums; color:#7d9488; font-size:12px; white-space:nowrap; }
.pl-tempo{ min-width:84px; }
/* BARRA DE TEMPO (2026-09-25) — LIVRE: <i> verdes = segundos realmente assistidos; bolinha =
   posição atual. Sem overflow:hidden (cortaria a bolinha e a área de toque do ::before). */
.pl-trilho{ position:relative; flex:1; height:12px; border-radius:6px; cursor:pointer; touch-action:none;
            background:#0a120d;
            border:1px solid #2a3a30; }
.pl-trilho::before{ content:""; position:absolute; left:0; right:0; top:-10px; bottom:-10px; }
.pl-trilho:hover{ border-color:#00d94f; }
.pl-trilho i{ position:absolute; top:0; bottom:0; background:#00d94f; opacity:.75; pointer-events:none; }
.pl-agulha{ position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
            background:#fff; box-shadow:0 0 0 3px rgba(0,217,79,.45); pointer-events:none; z-index:2; }
.pl-trilho:hover .pl-agulha{ transform:scale(1.15); }
.pl-dica{ position:absolute; bottom:22px; transform:translateX(-50%); white-space:nowrap; font-size:12px;
          padding:4px 8px; border-radius:4px; background:#000; color:#fff; border:1px solid #2a3a30;
          pointer-events:none; z-index:3; }
.pl-dica.pl-oculto{ display:none; }
.pl-legenda{ font-size:12px; color:#9fb3a7; padding:6px 12px; background:#121a14; border-top:1px solid #1f2c23; }
.pl-legenda b{ color:#fff; }
.pl-legenda.pl-oculto{ display:none; }
.pl-vol{ width:78px; accent-color:#00d94f; }
.pl-aviso{ font-size:12px; color:#ffb64d; padding:6px 12px; background:#1a1410; border-top:1px solid #4a3a22; }
.pl-aviso.pl-oculto{ display:none; }
/* Celular: a barra de tempo ganha uma linha só dela (senão o flex a espreme a 0 px e empurra
   volume/teatro/tela cheia para fora do palco). */
@media (max-width: 600px){
  .pl-controles{ flex-wrap:wrap; height:auto; gap:8px 10px; }
  .pl-trilho{ order:-1; flex:1 1 100%; height:14px; margin:6px 0 4px; }
  .pl-vol{ width:60px; }
}