/* Reproductor: sin librerías de iconos, filtros ni dependencias externas. */
#hero { background:#141414; border-radius:10px; overflow:hidden; margin:0 auto 28px; }
.hero-shell { position:relative; height:calc(100vh - 190px); min-height:320px; max-height:780px; align-items:stretch; }
.video-col { min-width:0; height:100%; min-height:0; max-height:none; }
body:not(.tv-mode) #rawVideo { object-fit:contain; }
#heroImg { opacity:.6; }
.hgrad { background:linear-gradient(0deg,#080808 0%,rgba(0,0,0,.22) 70%,rgba(0,0,0,.1)); }
.hinfo { max-width:85%; padding:32px; }
.htitle { letter-spacing:-.7px; font-size:36px; line-height:1.15; }
.btn-play,.btn-close { border-radius:4px; }
.play-circle { display:none; }
#playerTopBar { background:linear-gradient(180deg,rgba(0,0,0,.85),transparent); padding:22px 26px 36px; }
#btnClosePlayer { width:40px; height:40px; border:none; background:transparent; border-radius:4px; margin-right:16px; display:inline-flex; align-items:center; justify-content:center; }
#playerTitle { font-size:17px; font-weight:500; letter-spacing:.2px; }
#controls { background:linear-gradient(0deg,rgba(0,0,0,.95),rgba(0,0,0,.65) 65%,transparent); padding:38px 26px 18px; }
.ctrl-progress { position:relative; }
.prog-wrap { margin:0 12px; height:28px; touch-action:none; }
.prog-track { height:4px; border-radius:0; background:rgba(255,255,255,.25); transition:height .15s; }
.prog-fill,.prog-buf { border-radius:0; }
.prog-buf { background:rgba(255,255,255,.35); }
.prog-fill { background:#e50914; }
.prog-thumb { width:12px; height:12px; top:-4px; margin-left:-6px; background:#e50914; }
.prog-wrap:hover .prog-track { height:6px; }
.prog-wrap.focused .prog-track { height:8px; background:rgba(255,255,255,.3); }
.prog-wrap.focused .prog-thumb { top:-4px; width:16px; height:16px; margin-left:-8px; border:2px solid #fff; }
.time-lbl { font-size:12px; font-weight:400; min-width:46px; font-variant-numeric:tabular-nums; }
.ctrl-row { margin-top:10px; }
.cb { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:none; border-radius:4px; background:transparent; margin-right:12px; transition:background .15s; }
.cb:hover,#btnClosePlayer:hover { background:rgba(255,255,255,.13); }
.cb.focused,#btnClosePlayer.focused,.skip-btn.focused { background:rgba(255,255,255,.18); outline:2px solid #fff; outline-offset:2px; }
.player-icon { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; flex-shrink:0; }
#btnPause .player-icon { width:29px; height:29px; }
#btnAudio { width:auto; padding:0 10px; font-size:12px; font-weight:600; }
.control-label { margin-left:7px; }
#skipBtns { margin-top:-32px; }
.skip-btn { position:relative; width:58px; height:58px; border:none; background:rgba(0,0,0,.28); margin:0 22px; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.skip-btn .player-icon { width:42px; height:42px; }
.skip-btn.big { width:70px; height:70px; background:rgba(0,0,0,.38); }
.skip-btn.big .player-icon { width:46px; height:46px; }
.skip-value { position:absolute; top:24px; font-size:11px; pointer-events:none; }
#vloader { pointer-events:none; background:rgba(0,0,0,.26); opacity:1; line-height:normal; }
.player-loading { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; color:#ddd; font-size:12px; letter-spacing:.4px; }
.player-loading i { display:block; margin:0 auto 16px; width:36px; height:36px; border:3px solid rgba(255,255,255,.15); border-top-color:#e50914; border-radius:50%; animation:player-spin .8s linear infinite; }
@keyframes player-spin { to { transform:rotate(360deg); } }
#heroSkeleton { background:#111; }
.eps-col,body.tv-mode .eps-col { width:320px; height:100%; min-height:0; background:#161616; border-left:1px solid #292929; }
.eps-header { color:#eee; font-size:16px; text-transform:none; letter-spacing:0; padding:22px 18px 18px; border-bottom:1px solid #292929; }
.eps-count { float:right; font-size:12px; color:#888; padding-top:3px; }
#epsList { min-height:0; flex:1 1 0%; -webkit-box-flex:1; overflow-y:auto; overflow-x:hidden; padding:8px; white-space:normal; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#555 #161616; }
#epsList::-webkit-scrollbar { width:5px; }
#epsList::-webkit-scrollbar-thumb { background:#555; border-radius:3px; }
.ep-btn,body.tv-mode .ep-btn { display:flex; align-items:center; width:100%; min-height:76px; padding:13px 10px; margin:0 0 4px; border:1px solid transparent; border-radius:5px; background:transparent; color:#aaa; font-size:14px; font-weight:400; white-space:normal; }
.ep-btn:hover { background:#222; color:#fff; }
.ep-number { flex-shrink:0; width:36px; color:#888; font-size:21px; font-weight:600; text-align:center; margin-right:12px; }
.ep-copy { flex:1; min-width:0; }
.ep-title { display:block; color:#eee; font-size:13px; font-weight:600; line-height:1.4; overflow:hidden; text-overflow:ellipsis; }
.ep-status { display:block; margin-top:5px; color:#828282; font-size:11px; font-weight:400; }
.ep-play { flex-shrink:0; margin-left:8px; opacity:.35; }
.ep-play .player-icon { width:18px; height:18px; }
.ep-btn.on { background:#282828; border-color:#383838; box-shadow:inset 3px 0 #e50914; }
.ep-btn.on .ep-number,.ep-btn.on .ep-status,.ep-btn.on .ep-play { color:#fff; opacity:1; }
.ep-btn.focused { border-color:#fff; outline:2px solid #fff; outline-offset:-2px; background:#303030; }
#epsContinue { max-height:25%; background:#131313; }
#hero.episodes-hidden #epsCol { display:none; }
#hero:fullscreen,#hero:-webkit-full-screen { border-radius:0; margin:0; height:100%; width:100%; }
#hero:fullscreen .hero-shell,#hero:-webkit-full-screen .hero-shell { height:100vh; max-height:none; }
#hero:fullscreen .eps-col,#hero:-webkit-full-screen .eps-col { position:absolute; right:24px; top:80px; bottom:110px; height:auto; z-index:24; border:1px solid #333; border-radius:6px; box-shadow:0 12px 40px #000; }
body.tv-mode .hero-shell { height:calc(100vh - 200px); max-height:none; }
/* Mantener el alto explícito usado antes del rediseño: webOS antiguo no
   resuelve siempre porcentajes dentro del layout -webkit-box. */
body.tv-mode .video-col { height:calc(100vh - 200px); max-height:none; min-height:360px; }
body.tv-mode #hero { border-radius:0; overflow:visible; }
body.tv-mode #vidWrap,body.tv-mode #rawVideo { background:transparent; }
body.tv-mode #rawVideo { position:absolute; top:0; left:0; opacity:1; transform:none; -webkit-transform:none; }
body.tv-mode #seekFreeze { display:none!important; }
body.tv-mode #hero:fullscreen .video-col { height:100vh; min-height:0; }
body.tv-mode #hero:-webkit-full-screen .video-col { height:100vh; min-height:0; }
body.tv-mode .cb { width:52px; height:52px; margin-right:14px; }
body.tv-mode #btnAudio { width:auto; padding:0 14px; }
body.tv-mode .player-icon { width:30px; height:30px; }
body.tv-mode .eps-header { font-size:20px; }
body.tv-mode .ep-title { font-size:17px; }
body.tv-mode .ep-status { font-size:13px; }
body.tv-mode .ep-btn { min-height:88px; }
@media (max-width:900px) {
  #hero { border-radius:0; }
  .hero-shell,body.tv-mode .hero-shell { height:auto; min-height:0; max-height:none; display:block; }
  .video-col,body.tv-mode .video-col { height:56.25vw; min-height:220px; }
  .eps-col,body.tv-mode .eps-col { width:100%; height:340px; max-height:none; border-left:none; }
  .eps-col.show { display:flex; }
  #epsList { overflow-y:auto; overflow-x:hidden; max-height:none; padding:8px 14px; }
  .ep-btn,body.tv-mode .ep-btn { display:flex; width:100%; min-height:68px; margin:0 0 4px; }
  .ep-title { font-size:14px; }
  .hinfo { padding:20px; }
  .htitle { font-size:26px; }
  #controls { padding:30px 14px 12px; }
  #playerTopBar { padding:14px 16px 26px; }
  .cb { margin-right:6px; }
  .skip-btn { margin:0 10px; }
}
@media (max-width:480px) {
  #btnAudio .control-label { display:none; }
  #btnPrevEp { display:none!important; }
  .cb { width:32px; height:34px; margin-right:3px; }
  .player-icon { width:21px; height:21px; }
  .ctrl-right { margin-left:auto; }
  #playerTitle { font-size:13px; }
  #btnClosePlayer { width:30px; margin-right:10px; }
  .time-lbl { min-width:38px; font-size:10px; }
  .btn-close { padding:10px; font-size:12px; }
  .btn-play { padding:10px 14px; font-size:13px; }
  .skip-btn { width:40px; height:40px; }
  .skip-btn .player-icon { width:32px; height:32px; }
  .skip-btn.big { width:50px; height:50px; }
  .skip-btn.big .player-icon { width:32px; height:32px; }
  .skip-value { top:16px; font-size:9px; }
}
.ep-btn,body.tv-mode .ep-btn { max-width:none; }
@media (max-width:600px) {
  .tb-inner { min-width:0; }
  .logo { flex-shrink:0; }
  .topbar-right { flex:1 1 auto; min-width:0; width:0; overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:none; }
  .topbar-right .tb-btn { flex-shrink:0; }
  .topbar-right::-webkit-scrollbar { height:0; }
}
/* Fallbacks de layout y fullscreen para versiones antiguas de webOS. */
.cb,#btnClosePlayer { display:-webkit-inline-box; display:inline-flex; -webkit-box-align:center; -webkit-box-pack:center; }
.skip-btn { display:-webkit-inline-box; display:inline-flex; -webkit-box-align:center; -webkit-box-pack:center; }
.ep-btn,body.tv-mode .ep-btn { display:-webkit-box; display:flex; -webkit-box-align:center; }
.ep-copy { -webkit-box-flex:1; }
.player-loading { -webkit-transform:translate(-50%,-50%); }
.player-loading i { -webkit-animation:player-spin .8s linear infinite; }
@-webkit-keyframes player-spin { to { -webkit-transform:rotate(360deg); } }
#hero:-webkit-full-screen { border-radius:0; margin:0; height:100%; width:100%; }
#hero:-webkit-full-screen .hero-shell { height:100vh; max-height:none; }
#hero:-webkit-full-screen .eps-col { position:absolute; right:24px; top:80px; bottom:110px; height:auto; z-index:24; border:1px solid #333; border-radius:6px; box-shadow:0 12px 40px #000; }
.eps-col.show { display:-webkit-box; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; }