left:105px;
bottom:16px;
background:#050505;
color:white;
text-decoration:none;
padding:12px 16px;
border-radius:8px;
z-index:30;
}

/* PUNTOZ_LOGO_CLEAN */
.chan img{
background:transparent!important;
border:0!important;
box-shadow:none!important;
border-radius:0!important;
}

/* PUNTOZ_LOGO_TRANSPARENTE_OK */
.chan img{
background:transparent!important;
border:none!important;
box-shadow:none!important;
border-radius:0!important;
object-fit:contain!important;
}

/* PUNTOZ_OVERLAY_FULLSCREEN */
.chan img{
background:transparent!important;
border:0!important;
box-shadow:none!important;
border-radius:0!important;
object-fit:contain!important;
}
#fsOverlay{
display:none;
position:fixed;
inset:0;
z-index:999999;
background:rgba(0,0,0,.55);
color:white;
font-family:Arial,Helvetica,sans-serif;
}
#fsOverlay.show{display:grid;grid-template-columns:520px 470px 1fr}
#fsChannels{
background:rgba(10,20,28,.78);
overflow-y:auto;
padding:22px;
backdrop-filter:blur(8px);
}
#fsGuide{
background:rgba(8,12,18,.72);
overflow-y:auto;
padding:22px;
backdrop-filter:blur(8px);
}
.fsRow{
display:flex;
align-items:center;
gap:16px;
padding:13px 14px;
border-radius:8px;
font-size:21px;
font-weight:bold;
cursor:pointer;
}
.fsRow img{
width:62px;
height:42px;
object-fit:contain;
background:transparent!important;
}
.fsRow.active,.fsRow:hover{
background:rgba(208,169,79,.55);
}
.fsProg{
font-size:22px;
padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.15);
}
.fsTime{color:#d0a94f;font-size:18px;margin-bottom:4px}
.fsTitle{font-weight:bold}
.fsDesc{font-size:17px;color:#ddd;margin-top:4px;line-height:1.25}
</style>
<?php if(isset($_GET['apk_tv']) || isset($_GET['tv'])){ echo '
'; } ?>
<?php if(isset($_GET['apk_tv'])) echo '<link rel="stylesheet" href="android_tv.css?v='.time().'">'; ?>
<?php if(isset($_GET['apk_tv'])) echo '<link rel="stylesheet" href="apk_layout.css.php?v='.time().'">'; ?>
</head>
<body>

<div class="app">

<div class="menu">
<div class="logo"><span>puntoz</span> TV</div>
<a class="mitem active" href="tv.php">▣ TV EN VIVO</a>
<a class="mitem" href="preview.php">⌂ Inicio</a>
<a class="mitem" href="preview.php">🎬 Movies</a>
<a class="mitem" href="preview.php">▤ TV Shows</a>
<a class="mitem" href="preview.php">⚙ Settings</a>
</div>

<div class="cats">
<h2>All playlists</h2>
<a class="cat <?=!$cat?'active':''?>" href="tv.php">All channels</a>
<?php foreach($cats as $c): ?>
<a class="cat <?=$cat==$c["category_id"]?'active':''?>" href="tv.php?cat=<?=urlencode($c["category_id"])?>">
<?=htmlspecialchars($c["category_name"])?>
</a>
<?php endforeach; ?>
</div>

<div class="main">

<div class="top">
<div class="video">
<?php if($selected): ?>
<video preload="none"  muted controls playsinline src="<?=$dns?>/live/<?=$user?>/<?=$pass?>/<?=$selected["stream_id"]?>.m3u8"></video>
<?php endif; ?>
</div>

<div class="info">
<h1><?=htmlspecialchars($selected["name"] ?? "TV")?></h1>
<div class="time"><?=date("D, M d, H:i", time()-(3*3600))?></div>
<?php if(count($selEpg)>0): $p=$selEpg[0]; ?>
<div class="title"><?=htmlspecialchars(dec($p["title"] ?? ""))?></div>
<div class="desc"><?=htmlspecialchars(dec($p["description"] ?? ""))?></div>
<?php else: ?>
<div class="title">Sin información EPG</div>
<div class="desc">El DNS no entregó guía para este canal.</div>
<?php endif; ?>
</div>
</div>

<div class="timebar">
<div><?=date("D, M d, H:i", time()-(3*3600))?></div>
<div><?=date("H:00")?></div>
<div><?=date("H:30")?></div>
<div><?=date("H:00",time()+3600)?></div>
<div><?=date("H:30",time()+3600)?></div>
</div>

<div class="grid">
<?php if(isset($_GET["apk_tv"])) $channels=array_slice($channels,0,80); ?>
<?php foreach($channels as $c):
$is=(string)$c["stream_id"]===(string)$stream;
$list = isset($_GET["apk_tv"]) ? [] : epg($dns,$user,$pass,$c["stream_id"],4);
?>
<a class="row <?=$is?'active':''?>" href="tv.php?cat=<?=urlencode($cat)?>&stream=<?=urlencode($c["stream_id"])?>">
<div class="chan">
<img src="<?=htmlspecialchars($c["stream_icon"] ?? "")?>">
<span><?=htmlspecialchars($c["name"])?></span>
</div>
<?php for($i=0;$i<4;$i++): $p=$list[$i] ?? null; ?>
<div class="prog">
<?php if($p): ?>
<div class="ptime"><?=htmlspecialchars(hora_chile_epg($p["start"] ?? ""))?></div>
<?=htmlspecialchars(dec($p["title"] ?? ""))?>
<?php else: ?>
<span class="noepg">No information</span>
<?php endif; ?>
</div>
<?php endfor; ?>
</a>
<?php endforeach; ?>
</div>

</div>
</div>

<?php if($cat): ?><a class="back" href="tv.php">← Categorías</a><?php else: ?><a class="back" href="preview.php">← Inicio</a><?php endif; ?>
<a class="logout" href="logout.php">Cambiar usuario</a>










<div id="fsOverlay">
  <div id="fsChannels"></div>
  <div id="fsGuide"></div>
  <div></div>
</div>

<script id="PUNTOZ_FINAL_EPG_TV_JS">
(function(){
  function dec(t){
    try{return decodeURIComponent(escape(atob(t||"")));}catch(e){return t||"";}
  }

  function fullVideo(){
    let v=document.querySelector("video");
    if(!v)return;
    try{v.muted=false;v.play();}catch(e){}
    if(v.requestFullscreen)v.requestFullscreen();
    else if(v.webkitRequestFullscreen)v.webkitRequestFullscreen();
  }

  function closeOverlay(){
    document.getElementById("fsOverlay").classList.remove("show");
  }

  function showOverlay(){
    let ov=document.getElementById("fsOverlay");
    let ch=document.getElementById("fsChannels");
    let gd=document.getElementById("fsGuide");
    ch.innerHTML="";
    gd.innerHTML="<h2>Guía EPG</h2><div>Selecciona un canal</div>";

    document.querySelectorAll(".row").forEach(function(r,i){
      let img=r.querySelector(".chan img");
      let name=r.querySelector(".chan span");
      let item=document.createElement("div");
      item.className="fsRow"+(r.classList.contains("active")?" active":"");
      item.tabIndex=0;
      item.innerHTML='<img src="'+(img?img.src:"")+'"><span>'+(name?name.textContent:"Canal")+'</span>';
      item.onclick=function(){
        r.click();
      };
      item.onfocus=function(){
        let progs=r.querySelectorAll(".prog");
        gd.innerHTML="<h2>"+(name?name.textContent:"Canal")+"</h2>";
        progs.forEach(function(p){
          let time=p.querySelector(".ptime") ? p.querySelector(".ptime").textContent : "";
          let title=p.textContent.replace(time,"").trim();
          gd.innerHTML += '<div class="fsProg"><div class="fsTime">'+time+'</div><div class="fsTitle">'+title+'</div></div>';
        });
      };
      ch.appendChild(item);
    });

    ov.classList.add("show");
    let first=ch.querySelector(".fsRow.active") || ch.querySelector(".fsRow");
    if(first) first.focus();
  }

  let lastEnter=0;
  let lastRow=null;

  document.addEventListener("keydown",function(e){
    let k=e.key || "";
    let code=e.keyCode || e.which;

    if(k==="Enter"){
      let row=document.activeElement && document.activeElement.closest ? document.activeElement.closest(".row") : null;
      let now=Date.now();

      if(row){
        if(lastRow===row && now-lastEnter<700){
          e.preventDefault();
          fullVideo();
          return;
        }
        lastRow=row;
        lastEnter=now;
      }
    }

    // Tecla GUIDE / EPG / flecha izquierda especial / botón azul frecuente
    if(k==="Guide" || k==="MediaGuide" || code===172 || code===457 || code===458 || code===459 || code===460){
      e.preventDefault();
      showOverlay();
      return;
    }

    if(k==="Backspace" || k==="Escape"){
      let ov=document.getElementById("fsOverlay");
      if(ov && ov.classList.contains("show")){
        e.preventDefault();
        closeOverlay();
      }
    }
  },true);

  document.addEventListener("dblclick",function(e){
    if(e.target.closest(".video") || e.target.closest("video") || e.target.closest(".row")){
      e.preventDefault();
      fullVideo();
    }
  },true);

  window.PUNTOZ_SHOW_GUIDE=showOverlay;
})();
</script>


<style id="PUNTOZ_SIDE_MENU_FIX">
.sidebar a,.side a,.menu a{
  border-radius:12px!important;
  transition:.18s!important;
}
.sidebar a:hover,.sidebar a:focus,.side a:hover,.side a:focus,.menu a:hover,.menu a:focus,
.sidebar .active,.side .active,.menu .active{
  background:linear-gradient(90deg,rgba(0,184,255,.35),rgba(0,184,255,.08))!important;
  outline:1px solid #00c8ff!important;
  box-shadow:0 0 18px rgba(0,200,255,.65)!important;
}
#toastPuntoz{
  position:fixed;right:28px;bottom:28px;z-index:999999;
  padding:10px 16px;border-radius:10px;color:white;font-weight:bold;
  display:none;font-family:Arial;font-size:14px;
}
</style>
<div id="toastPuntoz"></div>
<script>
function toastPuntoz(msg,ok){
 let t=document.getElementById("toastPuntoz");
 if(!t)return;
 t.innerText=msg;
 t.style.background=ok?"rgba(0,160,70,.92)":"rgba(190,20,20,.92)";
 t.style.display="block";
 setTimeout(()=>t.style.display="none",3000);
}
</script>

<script id="PUNTOZ_TOAST_RETURN">
