              <div class="epgNextTime"><?=pz_hora_epg($nextStartTs)?> - <?=pz_hora_epg($nextEndTs)?></div>
            </div>
            </div>
        </section>

        
<section class="timebar36">
    <div class="timeDate"><?=date("D, d M, H:i")?></div>
    <div class="timeScroll" id="timeScroll">
        <?php for($h=0;$h<=36;$h++): ?>
            <div class="hourCell"><?=date("H:i", time()+($h*3600))?></div>
        <?php endfor; ?>
    </div>
</section>

<section class="grid36Wrap" id="grid36Wrap">
    <?php foreach($channels as $idx=>$c):
        $is=((string)$stream===(string)$c["stream_id"]);
        $programs = epg_programs_36h($dns,$user,$pass,$c["stream_id"]);
        $rowStart = time();
        $pxPerMin = 4;
    ?>
    <a class="row row36 navFocus <?=$is?'active':''?>"
       data-play="<?=htmlspecialchars(trim($dns,"/")."/live/".$user."/".$pass."/".$c["stream_id"].".m3u8")?>"
       data-name="<?=htmlspecialchars($c["name"] ?? "Canal")?>"
       data-logo="<?=htmlspecialchars($c["stream_icon"] ?? "")?>"
       data-now="<?=htmlspecialchars($epgNow ?? "No information")?>"
       data-next="<?=htmlspecialchars($epgNext ?? "No information")?>"
       href="tv_clean.php?cat=<?=urlencode($cat)?>&stream=<?=urlencode($c["stream_id"])?><?=$keepEpg?>">
        <div class="ch ch36">
            <span class="chanNum"><?=intval($idx)+1?></span>
            <?php if(!empty($c["stream_icon"])): ?><img src="<?=htmlspecialchars($c["stream_icon"])?>"><?php endif; ?>
            <span class="chanName"><?=htmlspecialchars($c["name"] ?? "Canal")?></span>
        </div>
        <div class="track36">
            <?php if(!$programs): ?>
                <?php for($i=0;$i<18;$i++):
                    $left = $i * 120 * $pxPerMin;
                    $width = 120 * $pxPerMin;
                    $st = $rowStart + ($i * 120 * 60);
                    $en = $st + (120 * 60);
                ?>
                    <div class="prog36 noinfo" style="left:<?=$left?>px;width:<?=$width?>px">
                        <b>Programación en Actualización</b>
                        <small><?=pz_hora36($st)?> - <?=pz_hora36($en)?></small>
                    </div>
                <?php endfor; ?>
            <?php else: foreach($programs as $pr):
                $left=max(0,intval((($pr["start"]-$rowStart)/60)*$pxPerMin));
                $width=max(90,intval((($pr["end"]-$pr["start"])/60)*$pxPerMin));
                $nowProg=(time()>=$pr["start"] && time()<$pr["end"]);
            ?>
                <div class="prog36 <?=$nowProg?'nowProg':''?>" style="left:<?=$left?>px;width:<?=$width?>px">
                    <b><?=htmlspecialchars($pr["title"])?></b>
                    <small><?=pz_hora36($pr["start"])?> - <?=pz_hora36($pr["end"])?></small>
                </div>
            <?php endforeach; endif; ?>
        </div>
    </a>
    <?php endforeach; ?>
</section>

    </main>
</div>

<script>
let zone = 2;
let idx = [0,0,0,0,0];

function groups(){
    return [
        Array.from(document.querySelectorAll('.side .navFocus')),
        Array.from(document.querySelectorAll('.cats .cat')),
        Array.from(document.querySelectorAll('.row36')),
        Array.from(document.querySelectorAll('.videoBox')),
        Array.from(document.querySelectorAll('.refreshEpg'))
    ].map(a=>a.filter(e=>e && e.offsetParent !== null));
}

function setFocus(){
    const g = groups();
    g.flat().forEach(e=>e.classList.remove('focus'));

    if(!g[zone] || !g[zone].length) return;

    idx[zone] = Math.max(0, Math.min(idx[zone], g[zone].length - 1));

    const el = g[zone][idx[zone]];
    if(!el) return;

    el.classList.add('focus');
    el.setAttribute('tabindex','0');
    el.focus({preventScroll:true});
    el.scrollIntoView({block:'nearest', inline:'nearest'});
}

function enterItem(){
    const g = groups();
    const el = g[zone] && g[zone][idx[zone]];
    if(!el) return;

