=== FILAS CANALES ===
380-    <div class="timeDate"><?=date("D, d M, H:i")?></div>
381-    <div class="timeScroll" id="timeScroll">
382-        <?php for($h=0;$h<=36;$h++): ?>
383-            <div class="hourCell"><?=date("H:i", time()+($h*3600))?></div>
384-        <?php endfor; ?>
385-    </div>
386-</section>
387-
388-<section class="grid36Wrap" id="grid36Wrap">
389-    <?php foreach($channels as $idx=>$c):
390-        $is=((string)$stream===(string)$c["stream_id"]);
391-        $programs = epg_programs_36h($dns,$user,$pass,$c["stream_id"]);
392-        $rowStart = time();
393-        $pxPerMin = 4;
394-    ?>
395:    <a class="row row36 navFocus <?=$is?'active':''?>"
396-       data-play="<?=htmlspecialchars(trim($dns,"/")."/live/".$user."/".$pass."/".$c["stream_id"].".m3u8")?>"
397-       data-name="<?=htmlspecialchars($c["name"] ?? "Canal")?>"
398-       data-logo="<?=htmlspecialchars($c["stream_icon"] ?? "")?>"
399-       data-now="<?=htmlspecialchars($epgNow ?? "No information")?>"
400-       data-next="<?=htmlspecialchars($epgNext ?? "No information")?>"
401-       href="tv_clean.php?cat=<?=urlencode($cat)?>&stream=<?=urlencode($c["stream_id"])?><?=$keepEpg?>">
402-        <div class="ch ch36">
403-            <?php if(!empty($c["stream_icon"])): ?><img src="<?=htmlspecialchars($c["stream_icon"])?>"><?php endif; ?>
404-            <span><?=htmlspecialchars($c["name"] ?? "Canal")?></span>
405-        </div>
406-        <div class="track36">
407-            <?php if(!$programs): ?>
408-                <div class="prog36 noinfo" style="left:0px;width:8640px">Sin información</div>
409-            <?php else: foreach($programs as $pr):
410-                $left=max(0,intval((($pr["start"]-$rowStart)/60)*$pxPerMin));

=== GRID COMPLETA ===

              <div class="epgLabelNow">AHORA</div>
              <div class="epgProgramNow"><?=htmlspecialchars($nowTitle)?></div>
              <?php if ($startTs > 0 && $endTs > 0): ?>
              <div class="epgTimeSimple"><?=pz_hora_epg($startTs)?> - <?=pz_hora_epg($endTs)?></div>
              <?php endif; ?>
              <div class="epgBarLine">
                <div class="epgBarMini"><div class="epgBarFill" style="width:<?=$progress?>%"></div></div>
                <span><?=$remainMin?> min</span>
              </div>

              <div class="epgLabelNext">SIGUE</div>
              <div class="epgProgramNext"><?=htmlspecialchars($nextTitle)?></div>
              <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">
            <?php if(!empty($c["stream_icon"])): ?><img src="<?=htmlspecialchars($c["stream_icon"])?>"><?php endif; ?>
            <span><?=htmlspecialchars($c["name"] ?? "Canal")?></span>
        </div>
        <div class="track36">
            <?php if(!$programs): ?>
                <div class="prog36 noinfo" style="left:0px;width:8640px">Sin información</div>
            <?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];

