:root {
    --silver: linear-gradient(180deg, #fdfdfd 0%, #b0b0b0 50%, #707070 100%);
    --led: #3dfc03;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }

body { 
    background: #000; color: #fff; 
    height: 100vh; height: 100svh;
    display: flex; flex-direction: column; 
    overflow: hidden; 
}

/* HEADER */
.main-header { height: 50px; background: #111; border-bottom: 2px solid #333; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; flex-shrink: 0; }
.main-header img { height: 28px; }
.header-right { display: flex; gap: 15px; align-items: center; font-family: 'Orbitron'; font-size: 11px; }
.led { font-size: 8px; margin-right: 5px; font-weight: bold; }
.led.red { color: #f00; }
.led.green { color: var(--led); text-shadow: 0 0 5px var(--led); }

/* CONTENEDOR CENTRAL */
#app-viewport { flex: 1; position: relative; overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }
#screen-home { background: url('assets/bk.png') center/cover; }

.sat-layout { display: grid; grid-template-columns: 1fr 280px; height: 100%; }

/* VIDEO AREA */
.video-section { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    background: radial-gradient(circle, #222, #000); padding: 10px; height: 100%; overflow: hidden;
}

.monitor { 
    width: 100%; max-width: 640px; aspect-ratio: 16/9; background: #000; 
    position: relative; border: 3px solid #333; border-radius: 6px; overflow: hidden;
    max-height: 50vh; 
}
video { width: 100%; height: 100%; background: #000; z-index: 1; }

.noise-overlay { position: absolute; inset: 0; z-index: 10; background: url('assets/noise.gif') center/cover; display: flex; align-items: center; justify-content: center; }
.tuning-text { font-family: 'Orbitron'; color: var(--led); background: rgba(0,0,0,0.8); padding: 8px 15px; border: 1px solid var(--led); font-size: 14px; }
.osd-top-right { position: absolute; top: 15px; right: 20px; font-family: 'Orbitron'; color: var(--led); font-size: 24px; z-index: 11; text-shadow: 2px 2px 5px #000; display: none; }

/* REMOTE SILVER */
.remote-silver { 
    background: var(--silver); padding: 10px; border-radius: 10px; width: 300px; 
    border: 1px solid #fff; box-shadow: 0 5px 15px #000; display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}
.remote-lcds { display: flex; gap: 8px; }
.lcd { flex: 1; background: #000; padding: 4px; border-radius: 4px; border: 1px solid #444; display: flex; flex-direction: column; align-items: center; }
.lcd small { font-size: 7px; color: #666; font-weight: bold; }
.lcd span { font-family: 'Orbitron'; color: var(--led); font-size: 16px; }

.remote-btns { display: flex; gap: 8px; }
.remote-btns button { flex: 1; height: 38px; border-radius: 5px; border: 1px solid #888; background: linear-gradient(180deg, #fff, #999); cursor: pointer; color: #222; font-size: 16px; }

/* LISTA */
.list-section { background: #0a0a0a; border-left: 1px solid #222; display: flex; flex-direction: column; overflow: hidden; }
.list-label { padding: 12px; font-size: 10px; color: #444; font-weight: bold; border-bottom: 1px solid #222; }
.rollup-list { flex: 1; overflow-y: auto; }
.rollup-list div { padding: 12px 15px; border-bottom: 1px solid #111; font-size: 13px; color: #888; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rollup-list div.active { background: #1a1a1a; color: #fff; border-left: 4px solid var(--led); }

/* BARRA INFERIOR (ESTA NO SE MUEVE) */
.bottom-nav { 
    height: 65px; background: #000; border-top: 2px solid #333; 
    display: flex; justify-content: center; gap: 20px; flex-shrink: 0; 
}
.nav-item { background: none; border: none; color: #444; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 9px; min-width: 65px; cursor: pointer; }
.nav-item i { font-size: 20px; margin-bottom: 3px; }
.nav-item.active { color: #fff; }

@media (max-width: 768px) {
    .sat-layout { grid-template-columns: 1fr; grid-template-rows: 1fr 200px; }
    .list-section { border-left: none; border-top: 1px solid #222; }
    .monitor { max-height: 35vh; }
    .remote-silver { width: 95%; scale: 0.9; }
}