/* * Autor: Darwin Quinones * Ultima edicion: 2026-07-28 12:50 */ /* portal4 — estilos base * * ⚠️ El navegador de la caja es QtWebKit 5.1 (Qt 5.1.1, equivalente a Chrome ~24). NADA de: * · variables CSS (var(--x)) llegaron en Chrome 49 * · CSS Grid Chrome 57 * · gap en flex Chrome 84 * · object-fit Chrome 32 * · aspect-ratio, calc anidado * Flexbox sólo con la sintaxis vieja: display:-webkit-box. Se usa posicionamiento * absoluto para el layout, que es lo más predecible a 1280x720 fijos. * * Paleta (la de las apps de Naicom): * fondo #07080C · superficie #12141B · marca #504697 · foco #079CE4 · vivo #ED1E29 * texto #FFFFFF · tenue #8A92A6 */ /* ⚠️ naismarttv/naiweb: el fondo de marca (el degradado) va en el y éste llena la VENTANA ENTERA (100%), NO 1280x720 como en la caja. Si se dejara a 1280x720, el área sobrante de una ventana más grande mostraría el BLANCO por defecto del navegador — que es lo que se veía. Así el MISMO fondo cubre también el letterbox, sin bordes blancos. El sigue siendo el lienzo de 1280x720 que `display.js` escala y centra. */ html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; /* Velo violeta de la marca, muy tenue. ⚠️ Tres declaraciones a propósito: color plano de respaldo, la sintaxis ANTIGUA de -webkit-gradient (la que entiende QtWebKit 5.1) y la de -webkit-linear-gradient. */ background: #07080C; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #17132B), color-stop(0.5, #0C0D15), color-stop(1, #07080C)); background: -webkit-linear-gradient(top, #17132B 0%, #0C0D15 50%, #07080C 100%); color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; -webkit-user-select: none; } body { margin: 0; padding: 0; width: 1280px; height: 720px; overflow: hidden; /* Transparente: deja ver el mismo fondo del por debajo, sin costura en el letterbox. */ background: transparent; } /* Cada pantalla ocupa el marco completo; sólo una visible a la vez. */ .pantalla { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; display: none; } .pantalla.activa { display: block; } /* ---------- arranque ---------- */ #arranque .centro { position: absolute; top: 196px; left: 0; width: 1280px; text-align: center; } /* el icono (píldora con el play) late suavemente mientras conecta: da señal de vida sin necesidad de texto, que es lo que se agradece en un arranque de 10-12 s */ .icono-boot { display: block; margin: 0 auto 30px; width: 132px; height: 117px; /* fichero 262x232: se muestra al 50% */ -webkit-animation: latido 1.9s ease-in-out infinite; } @-webkit-keyframes latido { 0% { -webkit-transform: scale(1); opacity: .92; } 50% { -webkit-transform: scale(1.07); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: .92; } } /* Fichero de 840x106 (reducido del original de 1843px) mostrado a la MITAD: el navegador sólo reduce, nunca interpola hacia arriba, y en la tele se ve limpio. */ .logo-boot { display: block; margin: 0 auto; width: 420px; height: 53px; } @media (prefers-reduced-motion: reduce) { .icono-boot { -webkit-animation: none; } } /* barra de progreso indeterminada: una franja que recorre el carril */ .carril { position: absolute; top: 462px; left: 490px; width: 300px; height: 3px; background: #1A1D27; overflow: hidden; border-radius: 2px; } .carril b { position: absolute; top: 0; left: -110px; width: 110px; height: 3px; background: #079CE4; -webkit-animation: recorre 1.15s linear infinite; } @-webkit-keyframes recorre { from { left: -110px; } to { left: 300px; } } .estado { position: absolute; top: 488px; left: 0; width: 1280px; text-align: center; font-size: 15px; color: #8A92A6; } /* ---------- aviso (no registrado / suspendido / sin red) ---------- */ #aviso .caja { position: absolute; top: 150px; left: 275px; width: 730px; background: #12141B; border: 1px solid #242833; border-radius: 14px; padding: 42px 50px 46px; } .aviso-tipo { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #ED1E29; font-weight: bold; margin-bottom: 16px; } .aviso-tipo.suave { color: #F5A524; } .aviso-titulo { font-size: 34px; line-height: 1.18; margin-bottom: 16px; } .aviso-texto { font-size: 19px; line-height: 1.55; color: #C6CBD8; margin-bottom: 30px; } /* datos que el cliente tiene que dictar por teléfono: grandes y legibles a 3 metros */ .datos { border-top: 1px solid #242833; padding-top: 24px; } .dato { display: inline-block; margin-right: 54px; vertical-align: top; } .dato .et { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #8A92A6; margin-bottom: 7px; } .dato .vl { font-size: 27px; font-weight: bold; letter-spacing: 1px; } .dato .vl.azul { color: #079CE4; } .pie { position: absolute; top: 626px; left: 0; width: 1280px; text-align: center; font-size: 14px; color: #4A5260; } /* ========================================================================== HOME Layout con posicionamiento absoluto, no con flex: en QtWebKit 5.1 el flex es el de 2012 (-webkit-box) y no hay `gap`. A 1280x720 fijos, absoluto es más predecible y no reflowea. ========================================================================== */ /* ---------- barra lateral ---------- */ /* ZONA SEGURA = 36px por lado. * La tele recorta los bordes (overscan) y no es configurable desde el portal: con la barra * en left:0 se comía el primer cuarto y los rótulos salían como "lovies" o ".ccount". * Todo el layout arranca a partir de este margen; nada toca el canto físico. */ /* La barra lateral se pinta en cada pantalla (cada una es un div aparte), así que sus estilos valen para todas. Cuando estaban atados sólo a #lateral, la de TV heredaba nada y el logo salía a tamaño natural, desbordando la pantalla. */ /* ⚠️ CADA pantalla nueva con barra lateral tiene que añadir su id AQUÍ. Es un fallo que ya ha pasado dos veces: la de TV se quedó fuera y heredó nada, y luego la de Radio igual —tenía su `#rd-lateral { }` vacío con un comentario diciendo «los mismos estilos que las demás», pero sin estar en esta lista no le llegaba ninguno. Se nota poco porque `.nav-item` y `.ico-marca` sí son por clase y sí pintan: lo que falla es la CAJA, que se va a la esquina 0,0 sin fondo ni margen de seguridad, encima del título. */ #lateral, #tv-lateral, #mv-lateral, #rd-lateral, #cu-lateral, #st-lateral { /* semitransparente para que se note el velo violeta del fondo por debajo */ position: absolute; top: 36px; left: 36px; width: 84px; height: 648px; background: #0A0B10; border-right: 1px solid #242833; border-radius: 10px 0 0 10px; } .ico-marca { display: block; width: 44px; height: 39px; margin: 14px auto 16px; } .nav-item { position: relative; width: 84px; height: 62px; color: #8A92A6; text-align: center; cursor: pointer; } .nav-item .gl { display: block; font-size: 26px; line-height: 31px; padding-top: 7px; } .nav-item .gl svg { vertical-align: middle; margin-top: -2px; } /* ⭐ 10px NO se leía desde el sofá (Darwin, 2026-08-24). El lienzo es de 1280 y el televisor lo escala, pero aun así quedaba diminuto en una pantalla de 65". Subido a 14px. ⚠️ Caben: la etiqueta más larga es «Settings» (8 caracteres) y el item mide 84px de ancho. El `nowrap` está para que, si algún día entra un nombre más largo, se recorte en vez de partirse en dos líneas y descuadrar toda la barra. */ .nav-item .tx { display: block; font-size: 14px; line-height: 17px; letter-spacing: .3px; white-space: nowrap; overflow: hidden; } .nav-item.on { color: #FFFFFF; } /* La barrita vertical que marca la sección en la que estás. Violeta, como el resto del foco de la barra y de la pantalla de TV (Darwin, 2026-08-24). Sube a 4px porque a 3 apenas se veía. */ .nav-item.on:after { content: ""; position: absolute; top: 14px; left: 0; width: 4px; height: 34px; background: #8B7FE8; border-radius: 0 2px 2px 0; } .nav-item.sel { color: #FFFFFF; background: #1A1D27; } /* ---------- contenedor ---------- */ /* 36 (margen) + 84 (barra) = 120 · ancho = 1280 - 120 - 36 = 1124 */ #hcont { position: absolute; top: 36px; left: 120px; width: 1124px; height: 648px; overflow: hidden; } /* MARGEN DE SEGURIDAD: la tele recorta los bordes (overscan), así que nada se pega a menos de 40px del canto. Con 26px el usuario veía las carátulas cortadas. */ #hcab { position: absolute; top: 4px; left: 22px; width: 1080px; height: 30px; } #hcab .saludo { float: left; font-size: 21px; } #hcab .reloj { float: right; font-size: 14px; color: #8A92A6; padding-top: 5px; } /* ---------- carrusel ---------- */ #hero { position: absolute; top: 40px; left: 22px; width: 1080px; height: 206px; /* sin transición: en este WebKit la anima la CPU y se traga la respuesta del mando */ background: #12141B; border-radius: 12px; overflow: hidden; border: 2px solid transparent; } #hero.sel { border-color: #079CE4; -webkit-box-shadow: 0 0 0 3px rgba(7,156,228,.25); } /* el hero se encoge al bajar por las filas; el lienzo lo sigue */ #hero.chico { height: 96px; opacity: .45; } #hero .lienzo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* los banners son grandes; se ajustan por background porque no hay object-fit */ background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; opacity: 0; -webkit-transition: opacity .4s ease; /* sólo entre banners, con el mando parado */ } #hero .lienzo.vis { opacity: 1; } #hero .puntos { position: absolute; bottom: 12px; right: 16px; } #hero .puntos i { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: rgba(255,255,255,.35); } #hero .puntos i.on { background: #079CE4; } /* ---------- filas ---------- */ /* VENTANA fija con el contenido deslizándose DENTRO. Antes se movía este contenedor con `top` negativo y las filas se subían por encima del carrusel: el recorte no servía de nada porque lo que salía del marco era el marco mismo. */ #hfilas { position: absolute; top: 258px; left: 22px; width: 1084px; height: 386px; overflow: hidden; } #hfilas.subido { top: 140px; height: 504px; } #hfilas-in { position: absolute; top: 0; left: 0; width: 1084px; } .fila-h { margin-bottom: 14px; } .fila-h .tit { font-size: 14px; font-weight: bold; margin-bottom: 7px; letter-spacing: .3px; } .carr { position: relative; height: 176px; /* deja sitio al rótulo del enfocado, que va debajo */ white-space: nowrap; } .carr-in { position: absolute; top: 4px; left: 6px; /* 6px de aire para que el enfocado no se corte */ } /* carátula: div con background porque no hay object-fit en este WebKit */ .cart { display: inline-block; width: 104px; height: 149px; margin-right: 11px; border-radius: 7px; background: #1A1D27 no-repeat center center; -webkit-background-size: cover; background-size: cover; border: 2px solid transparent; vertical-align: top; position: relative; } /* El foco se marca con BORDE y brillo, sin `scale`. Escalar obliga a recomponer la carátula (y sus vecinas) en cada movimiento, que era parte del retardo del mando. */ .cart.sel { border-color: #079CE4; z-index: 5; -webkit-box-shadow: 0 0 0 2px rgba(7,156,228,.45), 0 6px 18px rgba(0,0,0,.5); } /* título sólo del enfocado: 12 rótulos a la vez serían ruido */ .cart .et { display: none; position: absolute; top: 152px; left: -14px; width: 132px; white-space: normal; font-size: 11px; line-height: 1.25; font-weight: bold; } .cart.sel .et { display: block; } .cart .et s { display: block; text-decoration: none; font-weight: normal; color: #8A92A6; font-size: 10px; } /* ---------- canales (fila con preview del enfocado) ---------- */ .canal-h { display: inline-block; width: 188px; height: 149px; margin-right: 11px; border-radius: 8px; background: #12141B; border: 2px solid transparent; vertical-align: top; position: relative; overflow: hidden; white-space: normal; } .canal-h.sel { border-color: #8B7FE8; } .canal-h .pv { position: absolute; top: 0; left: 0; width: 184px; height: 103px; background: #1A1D27 no-repeat center center; -webkit-background-size: cover; background-size: cover; } .canal-h .num { position: absolute; top: 6px; left: 7px; font-size: 12px; font-weight: bold; background: rgba(7,8,12,.72); padding: 1px 6px; border-radius: 4px; } .canal-h .nb { position: absolute; top: 107px; left: 8px; width: 168px; font-size: 12px; font-weight: bold; overflow: hidden; } .canal-h .pr { position: absolute; top: 123px; left: 8px; width: 168px; font-size: 10.5px; color: #8A92A6; overflow: hidden; height: 13px; } .canal-h .bar { position: absolute; bottom: 5px; left: 8px; width: 168px; height: 3px; background: #242833; border-radius: 2px; } /* Por dónde va el programa, en la fila «Top channels now» del home. Violeta como el resto del acento (Darwin, 2026-08-24). */ .canal-h .bar b { display: block; height: 3px; background: #8B7FE8; border-radius: 2px; } /* ========================================================================== LOGIN — alta del equipo en una cuenta Con mando no se puede escribir: hace falta teclado en pantalla, y el foco tiene que verse desde el sofá. Todo el bloque mide 680px, el ancho exacto del teclado (10 teclas), para que campo, mensaje y separador caigan a plomo con las teclas. ========================================================================== */ #login .caja-l { position: absolute; top: 54px; left: 200px; width: 680px; } #login .tit-l { font-size: 30px; margin-bottom: 6px; } #login .sub-l { font-size: 15px; color: #8A92A6; margin-bottom: 18px; line-height: 1.5; } /* el logo, arriba a la derecha: esta pantalla también es cara de la marca */ #login .logo-l { position: absolute; top: 54px; right: 200px; width: 210px; } /* lo escrito */ .campo { /* ⚠️ border-box: sin esto los 2px de borde se SUMAN al ancho y la fila de teclas de abajo, calculada a 680, se desborda y parte el teclado en dos líneas. */ -webkit-box-sizing: border-box; box-sizing: border-box; width: 680px; height: 54px; background: #12141B; border: 2px solid #242833; border-radius: 10px; font-size: 26px; letter-spacing: 3px; padding: 0 16px; line-height: 50px; overflow: hidden; white-space: nowrap; } .campo.sel { border-color: #079CE4; } .campo i { font-style: normal; color: #4A5260; letter-spacing: 1px; font-size: 18px; } /* cursor: parpadeo lento, que a 5 fps uno rápido se ve mal */ .campo b { font-weight: normal; color: #079CE4; -webkit-animation: cursor 1.4s step-end infinite; } @-webkit-keyframes cursor { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } } /* teclado: 10 columnas de 62 + 6 de separación = 680 */ .tecl { margin-top: 14px; width: 680px; } .tecla { /* 62 + 6 de margen = 68; 10 por fila = 680, el ancho del bloque. El borde va DENTRO (border-box) o cada tecla mediría 66 y la décima se caería de la fila. */ -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; width: 62px; height: 44px; margin: 0 6px 6px 0; background: #12141B; border: 2px solid transparent; border-radius: 8px; text-align: center; line-height: 44px; font-size: 20px; vertical-align: top; } .tecla.ancha { width: 130px; } /* 130 + 6 de margen = 136; dos completan la fila */ .tecla.sel { border-color: #079CE4; background: #1A1D27; } .tecla.accion { color: #079CE4; font-size: 15px; } /* la MAC, para dictarla por teléfono. Va EN EL FLUJO, detrás del teclado, no en posición absoluta: los mensajes del servidor ocupan una, dos o tres líneas según el caso (el del límite de equipos son dos más el teléfono destacado), y con un `top` fijo el teclado acababa metiéndose encima. Así el bloque siempre queda debajo, mida lo que mida lo de arriba. */ #login .mac-l { margin-top: 20px; width: 680px; border-top: 1px solid #242833; padding-top: 16px; } #login .mac-l .et { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #8A92A6; margin-bottom: 4px; } #login .mac-l .vl { font-size: 28px; font-weight: bold; letter-spacing: 2px; color: #079CE4; } #login .mac-l .ay { font-size: 13px; color: #8A92A6; margin-top: 8px; line-height: 1.5; } /* mensaje devuelto por el servidor: se muestra SIEMPRE, tal cual. min-height reserva el hueco para que al aparecer no empuje el teclado hacia abajo. */ .msg-l { margin-top: 12px; min-height: 22px; font-size: 16px; line-height: 1.4; } .msg-l.err { color: #F5A524; } .msg-l.ok { color: #30C39E; } .msg-l.info { color: #8A92A6; } /* cuenta atrás de vigencia del código del SMS. Va en su propia línea con alto reservado para que al aparecer y desaparecer no mueva el teclado de sitio. */ .vence-l { height: 18px; font-size: 13px; color: #8A92A6; margin-top: 2px; } /* Enlace para descargar la app, cuando el teléfono tecleado no es de ningún cliente. Grande y en el color de marca: es lo único de la pantalla que el cliente tiene que copiar a mano en otro aparato, y se lee desde el sofá. */ .app-l { min-height: 30px; margin-top: 4px; font-size: 24px; font-weight: bold; letter-spacing: 1px; color: #079CE4; } /* ========================================================================== TV — rejilla de canales Misma retícula que el inicio (barra lateral + contenido con zona segura). ========================================================================== */ #tv-cont { position: absolute; top: 36px; left: 158px; width: 1086px; height: 648px; } #tv-cab { height: 40px; } #tv-tit { font-size: 26px; font-weight: bold; } /* pestañas de género */ /* ventana con recorte; el contenido se desplaza dentro para alcanzar las pestañas que no caben (doce géneros no entran en 1086px) */ #tv-gen { position: relative; height: 44px; overflow: hidden; } #tv-gen-in { position: absolute; top: 0; left: 0; white-space: nowrap; } .chip { display: inline-block; height: 32px; line-height: 30px; padding: 0 16px; margin-right: 8px; border: 2px solid transparent; border-radius: 16px; background: #12141B; font-size: 14px; color: #8A92A6; vertical-align: top; } .chip.act { color: #E8EAF0; background: #1A1D27; } /* Los géneros están en la misma pantalla que la lista: si el foco de una fila es violeta y el de un chip azul, el mismo significado tendría dos colores en la misma vista. */ .chip.sel { border-color: #8B7FE8; color: #E8EAF0; } .tv-vacio { color: #8A92A6; font-size: 16px; padding: 20px 4px; } /* -------------------------------------------------------------------------- TV — lista a la izquierda, canal seleccionado a la derecha. Mismo reparto que la app de televisores: 35% de lista y 65% de panel. -------------------------------------------------------------------------- */ #tv-lista { position: absolute; top: 92px; left: 0; width: 372px; height: 556px; overflow: hidden; } #tv-lista-in { position: absolute; top: 0; left: 0; width: 372px; } .tv-fila { height: 68px; margin-bottom: 6px; padding: 4px; border: 2px solid transparent; border-radius: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; } /* ⭐ Foco VIOLETA en la lista de canales (Darwin, 2026-08-24), igual que en la guía. El fondo sube a #1D1836 —antes era #12141B, casi el color del panel— para que la fila enfocada se distinga también por relleno y no sólo por un borde de 2px, que a distancia de sofá casi no se ve. */ .tv-fila.sel { border-color: #8B7FE8; background: #1D1836; } /* miniatura de lo que está dando */ .tv-mini { position: relative; display: inline-block; width: 96px; height: 56px; background: #12141B; border-radius: 6px; overflow: hidden; vertical-align: top; } .tv-mini img { width: 96px; height: 56px; display: block; } /* el número es lo que la gente busca primero en una lista de canales: va grande */ /* el número en el violeta de la marca: es el ancla visual de la lista */ .tv-num { position: absolute; bottom: 3px; left: 4px; background: #504697; color: #fff; font-size: 17px; font-weight: bold; padding: 1px 7px; border-radius: 5px; line-height: 21px; } .tv-txt { display: inline-block; width: 246px; margin-left: 10px; vertical-align: top; } /* el nombre manda; lo que están dando va en el mismo blanco pero apagado, para que se lea sin competir con él */ .tv-nom { font-size: 18px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; } .tv-prog { font-size: 13px; color: rgba(232,234,240,0.55); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; } /* -------- panel derecho -------- */ #tv-panel { position: absolute; top: 92px; left: 388px; width: 698px; height: 556px; } /* el recuadro grande: hoy la captura del canal, mañana el vídeo en vivo */ #tv-marco { width: 698px; height: 392px; /* 16:9 */ background: #12141B; border-radius: 12px; overflow: hidden; } #tv-marco img { width: 698px; height: 392px; display: block; } /* logo + nombre del canal seleccionado */ #tv-info { height: 46px; margin-top: 10px; white-space: nowrap; } #tv-logo { display: inline-block; width: 62px; height: 40px; vertical-align: middle; background: #12141B; border-radius: 6px; } #tv-info-tx { display: inline-block; margin-left: 14px; vertical-align: middle; line-height: 40px; } #tv-canal-num { display: inline-block; min-width: 46px; color: #8B7FE8; font-size: 30px; font-weight: bold; } #tv-canal-nom { font-size: 22px; font-weight: bold; margin-left: 4px; } #tv-canal-nom .hd { font-size: 11px; font-weight: bold; background: #079CE4; color: #fff; padding: 2px 5px; border-radius: 4px; vertical-align: middle; margin-left: 6px; } /* -------- parrilla: ahora y lo que viene -------- */ #tv-epg { margin-top: 6px; } .epg-it { height: 26px; line-height: 26px; white-space: nowrap; overflow: hidden; } .epg-hora { display: inline-block; width: 82px; font-size: 13px; color: #8A92A6; } .epg-nom { font-size: 14px; color: #C8CDD8; } /* el que están dando, en el violeta de la app */ .epg-it.ahora .epg-hora, .epg-it.ahora .epg-nom { color: #8B7FE8; font-weight: bold; } .epg-viendo { font-size: 10px; font-weight: bold; letter-spacing: 1px; background: #504697; color: #fff; padding: 2px 6px; border-radius: 4px; margin-left: 8px; vertical-align: middle; } .epg-barra { height: 3px; width: 300px; background: #242833; border-radius: 2px; margin: 2px 0 4px 82px; overflow: hidden; } .epg-barra b { display: block; height: 3px; background: #504697; } .epg-espera { font-size: 13px; color: #4A5260; padding-top: 6px; } /* ========================================================================== Botones de acción al pie de la barra lateral (guía, subtítulos, 2º audio). Se separan de las secciones con una línea: no son sitios a los que ir, son cosas que le haces al canal que tienes delante. ========================================================================== */ .nav-sep { width: 52px; height: 1px; background: #242833; margin: 14px auto 10px; } .nav-btn { position: relative; width: 84px; height: 50px; margin: 0 auto 4px; border-radius: 10px; text-align: center; color: #3A4152; /* apagado: el canal no lo ofrece */ } .nav-btn .gl { display: block; padding-top: 8px; } .nav-btn .tx { display: block; font-size: 10px; letter-spacing: .5px; margin-top: -2px; } /* disponible en este canal */ .nav-btn.hay { color: #8A92A6; } /* activado por el cliente */ .nav-btn.on { color: #8B7FE8; } .nav-btn.on:after { content: ''; position: absolute; bottom: 3px; left: 50%; width: 16px; height: 2px; margin-left: -8px; background: #504697; border-radius: 1px; } .nav-btn.sel { color: #FFFFFF; background: #1A1D27; } /* Rótulo del canal sobre el vídeo a pantalla completa. Aparece al cambiar de canal y se va solo: es lo que hace cualquier televisor, y evita tener que sacar el menú para saber qué se está viendo. */ #tv-rotulo { display: none; position: absolute; left: 60px; bottom: 60px; min-width: 320px; padding: 14px 22px; background: rgba(7,8,12,0.82); border-left: 4px solid #504697; border-radius: 4px 10px 10px 4px; } #tv-rotulo .rt-num { font-size: 34px; font-weight: bold; color: #8B7FE8; vertical-align: middle; margin-right: 14px; } #tv-rotulo .rt-nom { font-size: 26px; font-weight: bold; vertical-align: middle; } #tv-rotulo .rt-prog { font-size: 15px; color: #8A92A6; margin-top: 6px; } /* Pista del ▶❙❙ dentro del rótulo. Pequeña y apagada a propósito: es una ayuda para quien no conoce el botón, no un mensaje que haya que leer cada vez que se cambia de canal. */ #tv-rotulo .rt-pista { font-size: 13px; color: #6B7386; margin-top: 10px; } #tv-rotulo .rt-pista .rt-pp { display: inline-block; margin-right: 8px; padding: 1px 7px; border: 1px solid #504697; border-radius: 4px; color: #8B7FE8; font-style: normal; font-size: 12px; letter-spacing: 1px; } /* ========================================================================== MODO VÍDEO — el hueco por donde se ve la imagen ========================================================================== En una MAG el decodificador pinta en una capa PROPIA, por DEBAJO del HTML. La página no se dibuja "sobre el vídeo": el vídeo se ve por donde la página es transparente. Con el fondo opaco del portal —el gradiente violeta— el vídeo estaba sonando perfectamente detrás de una cortina, que es justo el síntoma de "se oye pero no se ve". Con esta clase el fondo se aparta y cada bloque de interfaz se pinta el suyo. */ html.video, html.video body { background: transparent !important; } /* El fondo se conserva alrededor del vídeo con cuatro piezas que rodean el hueco. No se puede "recortar un agujero" en un fondo con CSS, y el vídeo sólo se ve por donde la página es transparente — así que el fondo se pinta en todo MENOS en el rectángulo del vídeo. Cada pieza lleva el tramo de degradado que le toca según su altura, de modo que las cuatro juntas se leen como uno solo. Se calculan a mano y no con background-position porque `background-size` sobre gradientes no es fiable en QtWebKit 5.1. Hueco del vídeo: 546,128 de 698x392. */ .velo { display: none; position: absolute; } html.video .velo { display: block; } html.video.lleno .velo { display: none; } /* a pantalla completa no hay marco que pintar */ #velo-t { top: 0; left: 0; width: 1280px; height: 128px; background: -webkit-linear-gradient(top, #17132B 0%, #141127 100%); } #velo-i { top: 128px; left: 0; width: 546px; height: 392px; background: -webkit-linear-gradient(top, #141127 0%, #0A0B13 100%); } #velo-d { top: 128px; left: 1244px; width: 36px; height: 392px; background: -webkit-linear-gradient(top, #141127 0%, #0A0B13 100%); } #velo-b { top: 520px; left: 0; width: 1280px; height: 200px; background: -webkit-linear-gradient(top, #0A0B13 0%, #07080C 100%); } /* Los paneles ya se apoyan en los velos, así que no necesitan fondo propio. */ /* El recuadro se queda hueco. La captura la enseña o la esconde el JS según si el canal enfocado es el que suena: aquí no se decide, porque depende del estado, no del modo. */ html.video #tv-marco { background: transparent; } /* Indicador de volumen: aparece al tocar las teclas y se va solo. Va FUERA de las pantallas (hermano de ellas, no hijo) para que sirva en todas — dentro de `#tv` no se veía al subir el volumen viendo una película. De ahí el z-index: siendo hermano ya no hereda el apilamiento de la pantalla activa. */ #vol-ind { display: none; position: absolute; z-index: 50; right: 60px; bottom: 60px; padding: 12px 20px; background: rgba(7,8,12,0.85); border-radius: 10px; white-space: nowrap; } #vol-ind .vol-ico { display: inline-block; vertical-align: middle; color: #8B7FE8; } #vol-ind .vol-barra { display: inline-block; vertical-align: middle; width: 200px; height: 6px; margin: 0 12px; background: #242833; border-radius: 3px; overflow: hidden; } #vol-ind .vol-barra b { display: block; height: 6px; background: #504697; } #vol-ind .vol-num { display: inline-block; vertical-align: middle; min-width: 34px; font-size: 17px; font-weight: bold; } /* Selector de pista (subtítulos / audio). Sale sobre el vídeo, cerca de los botones que lo abren, y se cierra con cualquier tecla que no sea elegir. Lo comparten la tele y el Video Club: es el mismo menú y debe verse igual en los dos. */ #tv-menu, #pl-menu { display: none; position: absolute; left: 170px; bottom: 90px; min-width: 260px; padding: 14px 0 8px; background: rgba(7,8,12,0.94); border: 2px solid #242833; border-radius: 12px; } #tv-menu .mn-tit, #pl-menu .mn-tit { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #8A92A6; padding: 0 18px 10px; } #tv-menu .mn-it, #pl-menu .mn-it { font-size: 18px; padding: 9px 18px; border-left: 4px solid transparent; } #tv-menu .mn-it.sel, #pl-menu .mn-it.sel { background: #1A1D27; border-left-color: #504697; color: #fff; } #tv-menu .mn-aviso, #pl-menu .mn-aviso { font-size: 15px; color: #8A92A6; padding: 0 18px 8px; max-width: 380px; line-height: 1.5; } /* ========================================================================== GUÍA del canal — días a la izquierda, programas a la derecha ========================================================================== */ #g-cont { position: absolute; top: 36px; left: 36px; width: 1208px; height: 648px; } #g-top { height: 44px; white-space: nowrap; } #g-tit { font-size: 26px; font-weight: bold; vertical-align: middle; margin-right: 24px; } #g-cab { vertical-align: middle; } #g-cab .g-logo { width: 48px; height: 32px; vertical-align: middle; background: #12141B; border-radius: 5px; margin-right: 10px; } #g-cab .g-num { font-size: 22px; font-weight: bold; color: #8B7FE8; vertical-align: middle; margin-right: 8px; } #g-cab .g-nom { font-size: 20px; vertical-align: middle; } #g-cab .g-aviso { font-size: 13px; color: #8A92A6; margin-left: 18px; vertical-align: middle; } /* días */ #g-dias { position: absolute; top: 56px; left: 0; width: 230px; height: 440px; overflow: hidden; } #g-dias-in { position: absolute; top: 0; left: 0; width: 230px; } .g-dia { height: 38px; line-height: 38px; padding: 0 14px; margin-bottom: 4px; border-radius: 8px; font-size: 15px; color: #8A92A6; border: 2px solid transparent; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; } /* ⭐ El día que se está mirando. Antes era `background:#12141B` a secas —prácticamente el mismo tono que el panel— así que al entrar en la guía (que arranca con el foco en los PROGRAMAS) no había forma de saber en qué fecha estabas. Ahora lleva barra de acento a la izquierda y texto claro: se distingue aunque el foco esté en la otra columna. */ .g-dia.act { color: #FFFFFF; background: #1A1D27; font-weight: bold; -webkit-box-shadow: inset 4px 0 0 0 #079CE4; box-shadow: inset 4px 0 0 0 #079CE4; } /* ⭐ El FOCO va en VIOLETA, no en azul (Darwin, 2026-08-24). ⛔ El azul no servía aquí: en la columna de días el foco cae SIEMPRE sobre el día activo — `foco()` enfoca `gd-` y `pintaDias()` marca `act` en ese mismo `fd`—, así que foco y día activo son EL MISMO recuadro. Pintados los dos de azul no había nada que distinguir y parecía que la guía no enfocaba. Ahora el violeta (el foco, dónde está el mando) se lee encima del azul (la fecha que se está viendo). */ .g-dia.sel { border-color: #8B7FE8; background: #1D1836; color: #FFFFFF; } /* programas */ #g-progs { position: absolute; top: 56px; left: 246px; width: 962px; height: 440px; overflow: hidden; } #g-progs-in { position: absolute; top: 0; left: 0; width: 962px; } .g-prog { height: 40px; line-height: 40px; padding: 0 14px; margin-bottom: 4px; border-radius: 8px; border: 2px solid transparent; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; } /* Mismo criterio en los programas: el foco de la guía es violeta en las dos columnas, para que sea UN color el que significa «aquí está el mando» y no dos según dónde mires. */ .g-prog.sel { border-color: #8B7FE8; background: #1D1836; } .g-prog .g-hora { display: inline-block; width: 96px; font-size: 14px; color: #8A92A6; } .g-prog .g-tit { font-size: 16px; } /* lo que se puede volver a ver lleva su marca; lo que no, se apaga */ .g-prog.no .g-tit, .g-prog.no .g-hora { color: #4A5260; } .g-prog .g-play { color: #8B7FE8; font-size: 13px; margin-left: 10px; } .g-prog.ahora .g-tit { color: #8B7FE8; font-weight: bold; } .g-prog.ahora .g-hora { color: #8B7FE8; } .g-ahora { font-size: 10px; font-weight: bold; letter-spacing: 1px; background: #504697; color: #fff; padding: 2px 6px; border-radius: 4px; margin-left: 10px; vertical-align: middle; } .g-barra { height: 3px; width: 300px; background: #242833; border-radius: 2px; margin: -2px 0 4px 110px; overflow: hidden; } .g-barra b { display: block; height: 3px; background: #504697; } /* descripción del programa enfocado */ #g-detalle { position: absolute; top: 512px; left: 246px; width: 962px; height: 130px; border-top: 1px solid #242833; padding-top: 14px; } #g-detalle .g-d-tit { font-size: 20px; font-weight: bold; margin-bottom: 4px; } #g-detalle .g-d-hora { font-size: 13px; color: #8A92A6; margin-bottom: 8px; } #g-detalle .g-d-txt { font-size: 14px; color: #C8CDD8; line-height: 1.5; } #g-detalle .g-d-no { font-size: 13px; color: #F5A524; margin-top: 6px; } .g-vacio { color: #8A92A6; font-size: 16px; padding: 20px 4px; } /* Barra de posición de una grabación: sale al saltar o al pulsar OK, y se va sola. */ #tv-tiempo { display: none; position: absolute; left: 120px; right: 120px; bottom: 70px; padding: 14px 22px; background: rgba(7,8,12,0.85); border-radius: 12px; white-space: nowrap; /* Misma promoción a capa propia que `#pl-tiempo`: sobre el vídeo a pantalla completa, sin esto la tapa la capa del reproductor del televisor. Ver la nota larga en `#pl-tiempo`. */ z-index: 60; -webkit-transform: translateZ(0); transform: translateZ(0); } #tv-tiempo .tp-est { color: #8B7FE8; font-size: 18px; margin-right: 16px; vertical-align: middle; } #tv-tiempo .tp-hora { font-size: 15px; color: #C8CDD8; vertical-align: middle; min-width: 62px; display: inline-block; text-align: center; } #tv-tiempo .tp-barra { display: inline-block; vertical-align: middle; width: 800px; height: 6px; margin: 0 14px; background: #242833; border-radius: 3px; overflow: hidden; } #tv-tiempo .tp-barra b { display: block; height: 6px; background: #504697; } /* Marca de "retrocedido" / "en vivo", arriba a la derecha sobre el vídeo. */ #tv-vivo { display: none; position: absolute; top: 60px; right: 60px; padding: 8px 16px; border-radius: 8px; font-size: 16px; font-weight: bold; letter-spacing: 1px; } #tv-vivo.atras { background: rgba(80,70,151,0.92); color: #fff; } #tv-vivo.vivo { background: rgba(237,30,41,0.92); color: #fff; } /* ========================================================================== CINE — catálogo por categorías ========================================================================== */ /* Mismo encaje que TV: 36 de margen + 84 de barra = 158, y 1086 de ancho útil. */ #mv-cont { position: absolute; top: 36px; left: 158px; width: 1086px; height: 648px; } #mv-cab { height: 52px; white-space: nowrap; overflow: hidden; } #mv-tit { font-size: 26px; font-weight: bold; } /* Ficha de la enfocada, a la derecha del título: con tres filas a la vista, un rótulo debajo de cada carátula se pisaría con la fila siguiente. */ #mv-ficha { float: right; max-width: 800px; overflow: hidden; text-align: right; line-height: 34px; } #mv-ficha .mv-f-tit { font-size: 19px; font-weight: bold; } #mv-ficha .mv-f-sub { font-size: 13px; color: #8A92A6; margin-left: 14px; } /* Ventana fija con el contenido deslizándose DENTRO, igual que en la portada: mover la ventana dejaba las filas por encima de la cabecera. Alto para 3 filas de 186 (=558) y el resto asoma la cuarta, que es lo que dice que hay más abajo. */ #mv-filas { position: absolute; top: 60px; left: 0; width: 1086px; height: 588px; overflow: hidden; } #mv-filas-in { position: absolute; top: 0; left: 0; width: 1086px; } /* El margen se mete DENTRO del carril en vez de dejarlo entre filas: así la carátula enfocada tiene sitio para crecer sin invadir el título de la fila de abajo, y la altura total de la fila no cambia (16 + 7 + 163 = 186, la misma de antes). */ .fila-m { margin-bottom: 0; } .fila-m .tit { font-size: 14px; font-weight: bold; height: 16px; line-height: 16px; margin-bottom: 7px; letter-spacing: .3px; } .carr-m { position: relative; height: 163px; white-space: nowrap; } .carr-m-in { position: absolute; top: 4px; left: 6px; } /* Carátula: div con fondo, que este WebKit no tiene object-fit y una sin src pinta el icono de imagen rota. 100x143 mantiene la proporción del póster (0,7). */ .cart-m { display: inline-block; position: relative; width: 100px; height: 143px; margin-right: 12px; border-radius: 7px; background: #1A1D27 no-repeat center center; -webkit-background-size: cover; background-size: cover; border: 2px solid transparent; vertical-align: top; } /* La enfocada crece un poco, además del borde y el brillo. ⚠️ Con `-webkit-transform`, NO cambiando ancho y alto. Es la diferencia entre componer esta carátula y recalcular la fila entera: tocar `width`/`height` obliga al motor a recolocar todas las vecinas en CADA movimiento del mando, y ahí se iba la respuesta en esta caja. El transform no mueve a nadie — la de al lado se queda donde estaba y ésta se le monta encima, que es justo el efecto que se busca. Sin transición a propósito: animarlo son 15-20 fotogramas por pulsación, y recorriendo la fila rápido eso sí se acumula. El salto instantáneo se lee igual de bien desde el sofá. */ .cart-m.sel { border-color: #079CE4; z-index: 5; -webkit-transform: scale(1.10); -webkit-transform-origin: center center; -webkit-box-shadow: 0 0 0 2px rgba(7,156,228,.45), 0 8px 22px rgba(0,0,0,.6); } .cart-m .hd { position: absolute; top: 5px; right: 5px; font-size: 9px; font-weight: bold; letter-spacing: .5px; background: rgba(80,70,151,0.92); color: #fff; padding: 1px 4px; border-radius: 3px; } .mv-vacio { color: #8A92A6; font-size: 16px; padding: 24px 6px; } /* ========================================================================== CINE — ficha de una película ========================================================================== */ /* Sin barra lateral: es una pantalla de detalle, se entra y se sale con OK/BACK. Quitarla deja sitio para la carátula grande, que es lo que uno viene a mirar. */ /* El bloque va centrado a lo alto y no pegado arriba. La carátula no puede crecer más —el original mide 160x229 y ampliarlo lo emborrona—, así que con el bloque arriba quedaba media pantalla vacía debajo. */ #pl-ficha { position: absolute; top: 168px; left: 76px; width: 1128px; height: 390px; } /* Carátula grande. La imagen de origen mide 160x229, así que se enseña a 220x315: ampliar un 38% se aguanta; más allá el borde se emborrona. */ #pl-cara { position: absolute; top: 0; left: 0; width: 220px; height: 315px; border-radius: 10px; background: #1A1D27 no-repeat center center; -webkit-background-size: cover; background-size: cover; -webkit-box-shadow: 0 10px 28px rgba(0,0,0,.55); } #pl-datos { position: absolute; top: 0; left: 268px; width: 860px; } #pl-tit { font-size: 38px; font-weight: bold; line-height: 1.1; } #pl-meta { font-size: 15px; color: #8A92A6; margin-top: 12px; } #pl-meta i { font-style: normal; color: #3A4050; margin: 0 9px; } #pl-meta .pl-edad { border: 1px solid #4A5260; border-radius: 3px; padding: 1px 5px; font-size: 12px; color: #C8CDD8; } #pl-meta .pl-hd { color: #8B7FE8; font-weight: bold; } /* Subtítulos disponibles: «CC» y un cuadrito por idioma. Sólo se pintan los que la película tiene de verdad — un cuadrito apagado se lee como algo que se puede activar, y no lo hay. */ #pl-meta .pl-cc b { font-weight: bold; color: #6C7488; font-size: 12px; margin-right: 5px; letter-spacing: .5px; } #pl-meta .pl-cc s { text-decoration: none; display: inline-block; font-size: 12px; font-weight: bold; letter-spacing: .5px; color: #C8CDD8; background: #2A2440; border: 1px solid #504697; border-radius: 3px; padding: 1px 6px; margin-right: 4px; vertical-align: middle; } /* Sinopsis: alto FIJO y recortada. Las de Vubiquity van de una línea a un párrafo largo, y sin tope los botones bailaban de sitio según la película. */ #pl-txt { font-size: 16px; line-height: 1.55; color: #C8CDD8; margin-top: 18px; height: 118px; overflow: hidden; } #pl-cred { font-size: 13px; color: #8A92A6; margin-top: 12px; line-height: 1.7; height: 46px; overflow: hidden; } #pl-cred b { color: #6C7488; font-weight: normal; margin-right: 6px; } /* Botones. Anchos al contenido y en fila: son dos como mucho. */ #pl-bts { margin-top: 24px; white-space: nowrap; } .pl-bt { display: inline-block; margin-right: 14px; padding: 13px 30px; border-radius: 9px; border: 2px solid transparent; background: #1A1D27; color: #C8CDD8; font-size: 17px; vertical-align: middle; } .pl-bt s { text-decoration: none; color: #8A92A6; font-size: 14px; margin-left: 6px; } .pl-bt.sel { background: #504697; border-color: #079CE4; color: #FFFFFF; } .pl-bt.sel s { color: rgba(255,255,255,.7); } /* Leyenda de los botones de colores: un punto del color del botón y lo que hace. Los tonos son los del MANDO, no los de la paleta de la app: el punto tiene que parecerse al botón que hay que pulsar, que es toda la utilidad de esto. */ #pl-leyenda { margin-top: 20px; } /* Subida de 13 a 15px por lo mismo que el menú lateral: en un televisor de 65" a distancia de sofá, 13px sobre un lienzo de 1280 no se lee. */ #pl-leyenda .lg, #pl-rotulo .lg { display: inline-block; margin-right: 24px; font-size: 15px; color: #9AA2B6; vertical-align: middle; } #pl-leyenda .lg i, #pl-rotulo .lg i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 7px; vertical-align: middle; } #pl-leyenda .lg i.verde, #pl-rotulo .lg i.verde { background: #3DBE4B; } #pl-leyenda .lg i.amarillo, #pl-rotulo .lg i.amarillo { background: #F5C518; } #pl-rotulo .rt-lg { margin-top: 10px; } #pl-aviso { margin-top: 18px; font-size: 15px; color: #F5A524; } /* -------- sobre el vídeo -------- */ /* Rótulo con el título al arrancar, como hace un televisor al cambiar de canal. */ #pl-rotulo { display: none; position: absolute; top: 56px; left: 76px; padding: 16px 26px; background: rgba(7,8,12,0.82); border-radius: 12px; } #pl-rotulo .rt-nom { font-size: 28px; font-weight: bold; } #pl-rotulo .rt-sub { font-size: 15px; color: #8A92A6; margin-top: 5px; } /* Barra de posición: misma pieza que la de las grabaciones de TV, con su propio id para que una pantalla no dependa del HTML de la otra. */ /* ⭐ Burbuja de «Opciones», arriba a la derecha, como el panel ▶❙❙ de la app de Apple TV. Aparece y se va CON la barra de tiempo: son la misma capa de información sobre el vídeo, y que una salga sin la otra se lee como un fallo. Recuerda con qué tecla se abre el menú —que es lo que no se descubre solo— y además se puede pulsar con el ratón. */ #pl-burb { display: none; position: absolute; top: 56px; right: 60px; padding: 9px 16px; background: rgba(7,8,12,0.85); border: 1px solid #504697; border-radius: 22px; font-size: 14px; color: #C8CDD8; white-space: nowrap; cursor: pointer; z-index: 60; /* la misma capa que la barra: salen y se van juntas */ /* Misma promoción a capa propia que la barra, y por lo mismo: si no, la tapa el vídeo. */ -webkit-transform: translateZ(0); transform: translateZ(0); } #pl-burb i { display: inline-block; margin-right: 9px; font-style: normal; font-size: 13px; color: #8B7FE8; } #pl-tiempo { display: none; position: absolute; left: 120px; right: 120px; bottom: 70px; padding: 14px 22px; background: rgba(7,8,12,0.85); border-radius: 12px; white-space: nowrap; /* 🚨 LA BARRA SE PINTABA Y NO SE VEÍA. Medido en el Q70A el 2026-08-24 con una sonda que la interrogaba al dibujarla y otra vez un segundo después: display=block visibility=visible opacity=1 rect=1040x50 posición en pantalla: y de 900 a 975 sobre 1080 (dentro) document.elementFromPoint(centro) -> la PROPIA barra (nada del DOM la tapa) O sea: estaba ahí, entera y visible, y aun así no aparecía. Lo que la tapaba es la **capa de vídeo del televisor**, que se compone por hardware y que `elementFromPoint` no ve porque sólo mira el DOM. ⛔ Subir el `z-index` NO sirve para eso — se probó con 60 y siguió igual: el z-index ordena dentro del HTML, no frente a la capa del reproductor. La solución es promover el elemento a su PROPIA capa de composición con un transform 3D: así deja de pintarse en la capa del documento (que va debajo del vídeo) y pasa a componerse por encima. ⚠️ El `translateZ(0)` no mueve nada — está sólo para forzar esa promoción. */ z-index: 60; -webkit-transform: translateZ(0); transform: translateZ(0); } #pl-tiempo .tp-est { color: #8B7FE8; font-size: 18px; margin-right: 16px; vertical-align: middle; } #pl-tiempo .tp-hora { font-size: 15px; color: #C8CDD8; vertical-align: middle; min-width: 62px; display: inline-block; text-align: center; } #pl-tiempo .tp-barra { display: inline-block; vertical-align: middle; width: 780px; height: 6px; margin: 0 14px; background: #242833; border-radius: 3px; overflow: hidden; } #pl-tiempo .tp-barra b { display: block; height: 6px; background: #504697; } /* ========================================================================== CINE — buscador ========================================================================== */ /* Sin barra lateral: se entra desde la lupa y se sale con BACK. El teclado ocupa la izquierda y los resultados la derecha, que es como se lee de forma natural: escribo aquí, sale allí. */ #b-cont { position: absolute; top: 36px; left: 36px; width: 1208px; height: 648px; } #b-cab { height: 44px; white-space: nowrap; overflow: hidden; } #b-tit { font-size: 26px; font-weight: bold; } #b-ficha { float: right; max-width: 820px; overflow: hidden; text-align: right; line-height: 32px; } #b-ficha .b-f-tit { font-size: 17px; font-weight: bold; } #b-ficha .b-f-sub { font-size: 12px; color: #8A92A6; margin-left: 12px; } /* Lo tecleado. Alto fijo para que el teclado no baile al escribir. */ #b-campo { position: absolute; top: 48px; left: 0; width: 520px; height: 46px; line-height: 46px; padding: 0 16px; background: #12141B; border: 2px solid #242833; border-radius: 9px; font-size: 22px; white-space: nowrap; overflow: hidden; } #b-campo i { font-style: normal; color: #4A5260; font-size: 16px; } /* Cursor: parpadeo lento, que a 5 fps uno rápido se ve mal. */ #b-campo b { display: inline-block; width: 2px; height: 24px; background: #079CE4; vertical-align: middle; margin-left: 3px; -webkit-animation: cursorb 1.1s step-end infinite; } @-webkit-keyframes cursorb { 0%,100% { opacity: 1; } 50% { opacity: 0; } } /* Teclado. ⚠️ Las cuentas incluyen el BORDE: cada tecla mide 44 + 2 de borde por lado + 4 de margen = 52 reales, así que diez son 520. Con la medida sin el borde se pasaban de los 552 del contenedor y la fila se partía en 9 + 1. */ #b-tecl { position: absolute; top: 112px; left: 0; width: 548px; } .b-tecla { display: inline-block; width: 44px; height: 42px; line-height: 42px; margin: 0 4px 4px 0; text-align: center; font-size: 18px; background: #12141B; border: 2px solid transparent; border-radius: 7px; color: #C8CDD8; vertical-align: top; } /* Las anchas: 76 + bordes + margen = 84. La última fila son 7 cifras (364) + estas dos (168) = 532, que entra en los 548. */ .b-tecla.ancha { width: 76px; font-size: 12px; color: #8A92A6; } .b-tecla.sel { background: #504697; border-color: #8B7FE8; color: #FFFFFF; } #b-cuenta { position: absolute; top: 112px; left: 596px; font-size: 13px; color: #8A92A6; } /* Resultados: ventana con recorte y la rejilla deslizándose dentro, como el catálogo. */ /* Rejilla de resultados: 5 por fila. Cada carátula mide 92 + 2 de borde por lado + 8 de margen = 104 reales, así que cinco son 520 y seis no entrarían. */ #b-resw { position: absolute; top: 138px; left: 596px; width: 528px; height: 500px; overflow: hidden; } #b-res { position: absolute; top: 0; left: 0; width: 528px; } /* ⭐ TRES BLOQUES (canales · películas · programación), cada uno una FILA HORIZONTAL, como en la app de Apple TV y la de Roku. El eje vertical cambia de bloque y el horizontal recorre la fila: en vertical, treinta canales obligaban a bajar treinta veces para llegar a las películas. */ .b-bloque { margin-bottom: 14px; } .b-b-tit { font-size: 13px; font-weight: bold; letter-spacing: .6px; color: #9AA2B6; text-transform: uppercase; margin-bottom: 7px; } .b-b-tit i { font-style: normal; color: #6B7386; font-weight: normal; margin-left: 5px; } /* La ventana recorta y la fila se desliza dentro, igual que la rejilla del catálogo. */ .b-b-w { position: relative; width: 528px; overflow: hidden; } .b-b-in { position: relative; left: 0; white-space: nowrap; font-size: 0; } /* --- canal --- */ .b-can { display: inline-block; vertical-align: top; position: relative; width: 120px; height: 74px; margin-right: 8px; padding: 6px 8px; background: #12141B no-repeat 96% 6px; -webkit-background-size: 26px auto; background-size: 26px auto; border: 2px solid transparent; border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: normal; overflow: hidden; } .b-can-num { display: block; font-size: 17px; font-weight: bold; color: #8B7FE8; } .b-can-nom { display: block; font-size: 12px; color: #E8EAF0; overflow: hidden; white-space: nowrap; } .b-can-pg { display: block; font-size: 10px; color: #6B7386; overflow: hidden; white-space: nowrap; } .b-can.sel { border-color: #8B7FE8; background-color: #1D1836; } /* --- programa --- */ .b-pg { display: inline-block; vertical-align: top; position: relative; width: 200px; height: 74px; margin-right: 8px; padding: 6px 9px; background: #12141B; border: 2px solid transparent; border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: normal; overflow: hidden; } .b-pg-est { display: block; font-size: 9px; font-weight: bold; letter-spacing: .5px; color: #6B7386; } .b-pg-est.ahora { color: #ED1E29; } .b-pg-est.grabado { color: #8B7FE8; } .b-pg-tit { display: block; font-size: 13px; color: #E8EAF0; overflow: hidden; white-space: nowrap; } .b-pg-sub { display: block; font-size: 10px; color: #6B7386; overflow: hidden; white-space: nowrap; } .b-pg.sel { border-color: #8B7FE8; background: #1D1836; } /* Lo que aún no se ha emitido se enseña APAGADO: se recorre, pero no se puede abrir. */ .b-pg.no { opacity: .55; } .b-pg.no.sel { opacity: 1; border-color: #3A3F52; } .b-cel { display: inline-block; position: relative; width: 92px; height: 132px; margin: 0 8px 0 0; border-radius: 6px; background: #1A1D27 no-repeat center center; -webkit-background-size: cover; background-size: cover; border: 2px solid transparent; vertical-align: top; } .b-cel.sel { border-color: #8B7FE8; z-index: 5; -webkit-box-shadow: 0 0 0 2px rgba(139,127,232,.45), 0 8px 22px rgba(0,0,0,.6); } .b-cel .hd { position: absolute; top: 4px; right: 4px; font-size: 8px; font-weight: bold; letter-spacing: .5px; background: rgba(80,70,151,0.92); color: #fff; padding: 1px 3px; border-radius: 3px; } .b-vacio { color: #8A92A6; font-size: 15px; padding: 16px 4px; } /* ========================================================================== RADIO ========================================================================== ⚠️ La maqueta NO es la de TV. Estas emisoras llevan VÍDEO, y el vídeo es el contenido: va rotando la carátula del disco, el tema y datos del artista. Como aquí no hay parrilla que enseñar, la lista se queda estrecha y el recuadro se lleva todo lo demás — 744x418 frente a los 698x392 de la tele. */ #rd-cont { position: absolute; top: 36px; left: 158px; width: 1086px; height: 648px; } #rd-cab { height: 40px; } #rd-tit { font-size: 26px; font-weight: bold; } /* La barra lateral se estiliza arriba, en la lista de selectores que comparten todas las pantallas. Aquí no va nada: un `#rd-lateral { }` vacío parecía que la estaba atendiendo. */ /* Lista de emisoras: ventana con recorte y el contenido deslizándose dentro. */ #rd-lista { position: absolute; top: 56px; left: 0; width: 320px; height: 528px; overflow: hidden; } #rd-lista-in { position: absolute; top: 0; left: 0; width: 320px; } .rd-fila { height: 40px; line-height: 40px; margin-bottom: 4px; /* 40 + 4 = 44, el paso que usa el desplazamiento */ padding: 0 12px; border-radius: 8px; border: 2px solid transparent; white-space: nowrap; overflow: hidden; background: #0E1016; } .rd-fila.sel { border-color: #8B7FE8; background: #1D1836; } /* El número en el violeta de la marca, como en la lista de canales: es el ancla visual. */ .rd-num { display: inline-block; width: 38px; font-size: 17px; font-weight: bold; color: #8B7FE8; } .rd-nom { font-size: 15px; color: #C8CDD8; } .rd-fila.sel .rd-nom { color: #FFFFFF; } /* Las que este equipo no puede reproducir se marcan; el porqué se dice al pulsarlas. */ .rd-no { float: right; width: 18px; height: 18px; line-height: 18px; margin-top: 11px; text-align: center; font-size: 12px; font-weight: bold; color: #F5A524; border: 1px solid #F5A524; border-radius: 50%; } /* Datos de la emisora enfocada, debajo del vídeo. */ #rd-info { position: absolute; top: 596px; left: 328px; width: 758px; height: 40px; line-height: 40px; white-space: nowrap; overflow: hidden; } #rd-info .rd-i-num { font-size: 24px; font-weight: bold; color: #8B7FE8; margin-right: 12px; } #rd-info .rd-i-nom { font-size: 22px; font-weight: bold; } #rd-info .rd-i-est { font-size: 13px; color: #8A92A6; margin-left: 18px; } #rd-info .rd-i-est i.on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #30C39E; margin-right: 7px; vertical-align: middle; } /* Aviso de emisora no reproducible. */ #rd-aviso { display: none; position: absolute; top: 556px; left: 328px; padding: 10px 18px; background: rgba(245,165,36,0.12); border: 1px solid #F5A524; border-radius: 8px; font-size: 14px; color: #F5A524; } /* Rótulo sobre el vídeo a pantalla completa. */ #rd-rotulo { display: none; position: absolute; top: 56px; left: 76px; padding: 14px 24px; background: rgba(7,8,12,0.82); border-radius: 12px; white-space: nowrap; } #rd-rotulo .rt-num { font-size: 26px; font-weight: bold; color: #8B7FE8; margin-right: 12px; vertical-align: middle; } #rd-rotulo .rt-nom { font-size: 26px; font-weight: bold; vertical-align: middle; } .rd-vacio { color: #8A92A6; font-size: 15px; padding: 18px 6px; } /* Los velos rodean el hueco del vídeo (486,132 de 744x418) para conservar el fondo alrededor. Mismo truco que en TV: el vídeo se pinta debajo del HTML y sólo se ve donde es transparente, así que sin estas cuatro piezas el resto de la pantalla se quedaría en negro. ⚠️ Llevan FONDO, no sólo posición: es justo lo que hacen. Se heredan `display` y `position` de `.velo`, que ya los muestra en modo vídeo y los esconde a pantalla completa. */ #rvelo-t { top: 0; left: 0; width: 1280px; height: 132px; background: -webkit-linear-gradient(top, #17132B 0%, #141127 100%); } #rvelo-i { top: 132px; left: 0; width: 486px; height: 418px; background: -webkit-linear-gradient(top, #141127 0%, #0A0B13 100%); } #rvelo-d { top: 132px; left: 1230px; width: 50px; height: 418px; background: -webkit-linear-gradient(top, #141127 0%, #0A0B13 100%); } #rvelo-b { top: 550px; left: 0; width: 1280px; height: 170px; background: -webkit-linear-gradient(top, #0A0B13 0%, #07080C 100%); } /* ========================================================================== CUENTA ========================================================================== Dos estados en la misma pantalla: la PUERTA (la clave de cuatro cifras) y lo de DENTRO (pestañas a la izquierda, contenido a la derecha). No son dos pantallas distintas porque entre una y otra no se cambia de sitio: se abre la que ya estabas mirando. ⚠️ Nada de esto es navegable con ratón: se recorre con las flechas del mando, así que el foco tiene que verse desde el sofá. Por eso el elemento enfocado no lleva sólo un borde, lleva fondo propio — un borde de 2px a tres metros no se distingue. */ #cu-cont { position: absolute; top: 36px; left: 158px; width: 1086px; height: 648px; } #cu-cab { height: 40px; } #cu-tit { font-size: 26px; font-weight: bold; } #cu-sub { font-size: 14px; color: #8A92A6; margin-left: 14px; } /* ---------- la puerta ---------- */ #cu-puerta { position: absolute; top: 56px; left: 0; width: 1086px; height: 528px; display: none; } #cu-puerta.on { display: block; } .cu-p-caja { position: absolute; top: 92px; left: 313px; /* (1086-460)/2 */ width: 460px; padding: 30px 0 26px; background: #12141B; border: 1px solid #242833; border-radius: 12px; text-align: center; } .cu-p-ico { height: 40px; color: #504697; } .cu-p-ico svg { width: 34px; height: 34px; } .cu-p-tit { font-size: 21px; font-weight: bold; margin-top: 4px; } .cu-p-sub { font-size: 13px; color: #8A92A6; margin-top: 7px; } /* Los cuatro huecos de la clave. Se ve CUÁNTAS llevas, nunca cuáles. */ /* Teclado numérico en pantalla de la puerta de Cuenta. 🚨 Está porque los mandos de smart TV NO tienen números — medido: al teclear el PIN en un Samsung no llega ningún keydown de dígito. Rejilla de 3, que es como se lee un teclado. */ .cu-p-tec { margin: 22px auto 0; width: 246px; font-size: 0; /* mata el hueco entre inline-blocks */ } .cu-tec { display: inline-block; width: 74px; height: 56px; line-height: 56px; margin: 0 3px 6px; font-size: 24px; font-weight: bold; color: #E8EAF0; background: #12141B; border: 2px solid #242833; border-radius: 10px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .cu-tec.aux { font-size: 20px; color: #9AA2B6; } .cu-tec.sel { border-color: #8B7FE8; background: #1D1836; color: #FFFFFF; } .cu-p-pts { margin-top: 24px; height: 46px; } .cu-p-pt { display: inline-block; width: 38px; height: 44px; margin: 0 7px; background: #0A0B10; border: 1px solid #2C3140; border-radius: 7px; line-height: 44px; font-size: 24px; color: #FFFFFF; vertical-align: top; } .cu-p-pt.lleno { border-color: #504697; } /* El hueco donde va a caer la próxima cifra, para que se sepa por dónde vas. */ .cu-p-pt.act { border-color: #079CE4; background: #101828; } .cu-p-msg { min-height: 20px; margin-top: 16px; font-size: 14px; color: #8A92A6; } .cu-p-msg.err { color: #ED1E29; } .cu-p-msg.ok { color: #4ED17A; } .cu-p-ay { margin-top: 12px; font-size: 12px; color: #6B7386; } .cu-p-ay b { color: #ED1E29; font-weight: normal; } /* la pista del botón rojo */ /* ---------- dentro ---------- */ #cu-dentro { position: absolute; top: 56px; left: 0; width: 1086px; height: 560px; display: none; } #cu-dentro.on { display: block; } /* pestañas */ #cu-tabs { position: absolute; top: 0; left: 0; width: 236px; } .cu-tab { position: relative; height: 44px; padding: 0 14px; margin-bottom: 4px; line-height: 44px; font-size: 15px; color: #8A92A6; border-radius: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cu-tab.on { color: #FFFFFF; background: #171A23; } .cu-tab.sel { color: #FFFFFF; background: #504697; } /* panel */ #cu-panel { position: absolute; top: 0; left: 258px; width: 828px; height: 560px; overflow: hidden; } #cu-panel-in { position: absolute; top: 0; left: 0; width: 828px; } /* fichas de datos: dos columnas de etiqueta/valor */ .cu-bloq { margin-bottom: 18px; } .cu-bloq-t { font-size: 12px; letter-spacing: 1.2px; color: #079CE4; padding-bottom: 7px; margin-bottom: 9px; border-bottom: 1px solid #1E2230; } .cu-fila { height: 27px; line-height: 27px; font-size: 14px; } .cu-fila .et { display: inline-block; width: 210px; color: #8A92A6; vertical-align: top; } .cu-fila .vl { display: inline-block; width: 600px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: top; } /* listas (equipos, órdenes, pagos): cabecera fija de columnas y filas debajo */ .cu-lin { height: 34px; line-height: 34px; font-size: 14px; border-bottom: 1px solid #14171F; overflow: hidden; white-space: nowrap; } .cu-lin.cab { color: #8A92A6; font-size: 12px; letter-spacing: .8px; border-bottom-color: #1E2230; } .cu-lin.este { background: #141A2B; } /* el equipo desde el que se está mirando */ .cu-lin .c { display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: top; padding-right: 10px; } .cu-lin .num { text-align: right; } .cu-tag { display: inline-block; height: 19px; line-height: 19px; padding: 0 8px; margin-left: 8px; font-size: 11px; border-radius: 10px; vertical-align: middle; } .cu-tag.aqui { background: #504697; color: #FFFFFF; } .cu-tag.ok { background: #16351F; color: #4ED17A; } .cu-tag.no { background: #3A1418; color: #FF8189; } .cu-vacio { padding: 26px 0; color: #8A92A6; font-size: 14px; } /* Se dice cuántos hay en total cuando no caben todos: si no, parece que esos son todos. */ .cu-pie { margin-top: 12px; font-size: 12px; color: #6B7386; } /* ---------- formularios (tarjeta, clave) ---------- */ .cu-campo { position: relative; height: 52px; margin-bottom: 10px; padding: 0 14px; background: #101219; border: 1px solid #242833; border-radius: 8px; } .cu-campo.sel { border-color: #079CE4; background: #101828; } .cu-campo .et { position: absolute; top: 7px; left: 14px; font-size: 11px; letter-spacing: .8px; color: #8A92A6; } .cu-campo .vl { position: absolute; top: 22px; left: 14px; font-size: 19px; letter-spacing: 1px; } .cu-campo .vl.ph { color: #4A5162; letter-spacing: 0; font-size: 15px; } /* La marca detectada aparece a la derecha en cuanto se teclean los primeros dígitos: así se ve que el número va bien encaminado antes de terminar de escribirlo. */ .cu-campo .marca { position: absolute; top: 18px; right: 14px; font-size: 14px; color: #079CE4; } .cu-campo.corto { display: inline-block; width: 214px; margin-right: 10px; vertical-align: top; } .cu-bt { height: 46px; line-height: 46px; margin-top: 6px; padding: 0 22px; display: inline-block; background: #1A1D27; border: 1px solid #2C3140; border-radius: 8px; font-size: 15px; } .cu-bt.sel { background: #504697; border-color: #6558C4; color: #FFFFFF; } /* interruptor del pago automático */ .cu-sw { position: relative; height: 52px; margin-bottom: 10px; padding: 0 14px; background: #101219; border: 1px solid #242833; border-radius: 8px; } .cu-sw.sel { border-color: #079CE4; background: #101828; } .cu-sw .tx { position: absolute; top: 9px; left: 14px; font-size: 15px; } .cu-sw .ay { position: absolute; top: 30px; left: 14px; font-size: 11px; color: #6B7386; } .cu-sw .bo { position: absolute; top: 13px; right: 14px; width: 54px; height: 26px; background: #2C3140; border-radius: 13px; } .cu-sw .bo i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #8A92A6; border-radius: 10px; } .cu-sw.on .bo { background: #1E5B33; } .cu-sw.on .bo i { left: 31px; background: #4ED17A; } /* aviso flotante: confirmaciones y errores de guardado */ #cu-aviso { position: absolute; bottom: 14px; left: 258px; width: 828px; padding: 13px 16px; background: #171A23; border-left: 3px solid #079CE4; border-radius: 6px; font-size: 14px; display: none; } #cu-aviso.err { border-left-color: #ED1E29; } #cu-aviso.ok { border-left-color: #4ED17A; } /* ========================================================================== AJUSTES ========================================================================== Una lista larga de filas «etiqueta … valor», agrupadas. El valor de las que se pueden cambiar lleva flechas a los lados: es la pista de que ahí IZQUIERDA/DERECHA hacen algo, que en un mando no se adivina de otra forma. */ #st-cont { position: absolute; top: 36px; left: 158px; width: 1086px; height: 648px; } #st-cab { height: 40px; } #st-tit { font-size: 26px; font-weight: bold; } #st-lista { position: absolute; top: 56px; left: 0; width: 760px; height: 520px; overflow: hidden; } #st-lista-in { position: absolute; top: 0; left: 0; width: 760px; } .st-grupo { font-size: 12px; letter-spacing: 1.2px; color: #079CE4; padding: 16px 0 7px; margin-bottom: 6px; border-bottom: 1px solid #1E2230; } .st-grupo:first-child { padding-top: 0; } .st-fila { position: relative; height: 46px; line-height: 46px; padding: 0 14px; margin-bottom: 3px; border-radius: 8px; font-size: 15px; overflow: hidden; white-space: nowrap; } .st-fila.sel { background: #171A23; } .st-fila .et { display: inline-block; width: 330px; color: #C8CEDA; vertical-align: top; overflow: hidden; text-overflow: ellipsis; } .st-fila.sel .et { color: #FFFFFF; } .st-fila .vl { display: inline-block; width: 380px; text-align: right; vertical-align: top; } /* Los datos de sólo mirar se pintan apagados: así se distingue de un vistazo lo que se puede cambiar de lo que no, sin tener que probar el mando fila por fila. */ .st-fila .vl.info { color: #8A92A6; font-size: 14px; } .st-fila .vl b { font-weight: normal; color: #FFFFFF; padding: 0 10px; } .st-fila .vl i { font-style: normal; font-size: 12px; color: #4A5162; } .st-fila.sel .vl i { color: #079CE4; } #st-ayuda { position: absolute; top: 590px; left: 0; width: 760px; font-size: 12px; color: #6B7386; } .st-vacio { padding: 26px 0; color: #8A92A6; font-size: 14px; } #st-aviso { position: absolute; bottom: 14px; left: 0; width: 760px; padding: 13px 16px; background: #171A23; border-left: 3px solid #079CE4; border-radius: 6px; font-size: 14px; display: none; } #st-aviso.err { border-left-color: #ED1E29; } #st-aviso.ok { border-left-color: #4ED17A; } /* Aviso de confirmación. Va centrado y por encima de todo: lo que pregunta —reiniciar el equipo, cambiar la salida de vídeo— no admite que se conteste sin querer al pasar. */ #st-dialogo { position: absolute; top: 210px; left: 143px; /* (1086-800)/2 */ width: 800px; padding: 26px 30px 22px; background: #12141B; border: 1px solid #2C3140; border-radius: 12px; display: none; } .st-d-tx { font-size: 17px; line-height: 25px; } .st-d-bt { margin-top: 22px; text-align: right; } .st-d-bt .bt { display: inline-block; height: 42px; line-height: 42px; min-width: 96px; margin-left: 10px; padding: 0 20px; background: #1A1D27; border: 1px solid #2C3140; border-radius: 8px; font-size: 15px; text-align: center; } .st-d-bt .bt.sel { background: #504697; border-color: #6558C4; } /* ========================================================================== AVISO DE SOPORTE (mandado desde NaiCenter por el latido) Va por encima de TODO y en cualquier sección: soporte lo manda sin saber dónde está el cliente, y tiene que verlo esté viendo la tele o navegando el catálogo. */ #ka-msg { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; background: rgba(4, 5, 8, 0.82); display: none; z-index: 90; } .ka-m-tx { position: absolute; top: 232px; left: 240px; width: 800px; padding: 34px 40px; background: #12141B; border: 1px solid #2C3140; border-radius: 12px; font-size: 20px; line-height: 30px; text-align: center; } .ka-m-ay { position: absolute; top: 430px; left: 240px; width: 800px; text-align: center; font-size: 13px; color: #8A92A6; } /* Ajuste elegido pero todavía sin guardar. Hace falta una marca explícita: elegir con las flechas y guardar con OK parecían lo mismo, y el cliente creía que sus cambios no se aplicaban cuando lo que faltaba era pulsar OK. */ .st-fila .vl b.chg { color: #FFC53D; } .st-fila .vl u.chg-t { text-decoration: none; margin-left: 10px; font-size: 11px; color: #FFC53D; } /* Filas de equipo a dos líneas: el dato principal arriba y el contexto debajo, más pequeño. Se sube el alto de la fila porque dos líneas de 34px no caben. */ .cu-lin.dos { height: 46px; line-height: 17px; padding-top: 6px; } .cu-lin.dos.cab { height: 26px; line-height: 26px; padding-top: 0; } .cu-lin.dos .c { white-space: normal; } .cu-lin .l1 { display: block; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cu-lin .l2 { display: block; font-size: 11px; color: #6B7386; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cu-lin .l2.vv { color: #4ED17A; } /* ---------- favoritos ---------- */ /* La estrella va PEGADA al nombre y no en una columna aparte: así se lee «★ ABC» de un vistazo y no ocupa sitio fijo en las filas que no son favoritas, que son la mayoría. */ .tv-nom .tv-est { color: #FFC53D; margin-right: 6px; font-size: 13px; } #tv-favaviso { position: absolute; bottom: 30px; left: 158px; padding: 11px 18px; background: #171A23; border-left: 3px solid #6B7386; border-radius: 6px; font-size: 14px; display: none; z-index: 40; } #tv-favaviso.on { border-left-color: #FFC53D; } #tv-favaviso .est { color: #FFC53D; margin-right: 8px; } /* ---------- portada de Radio ---------- */ /* Ocupa el hueco del vídeo mientras no suena nada. Las medidas las pone el JS desde la misma constante que coloca el recuadro, así que aquí no se repiten. */ #rd-portada { position: absolute; display: none; background: #0C0E15; border: 1px solid #1E2230; border-radius: 10px; overflow: hidden; text-align: center; } /* Placa clara para el logotipo: viene sobre blanco y con el texto en gris oscuro, así que sobre el panel oscuro hay que darle su propio fondo o no se lee. */ #rd-placa { display: inline-block; margin-top: 12%; padding: 26px 44px; background: #FFFFFF; border-radius: 12px; } #rd-arte { display: block; width: 310px; height: auto; } #rd-arte-txt { display: none; padding-top: 22%; } #rd-arte-txt .m { font-size: 40px; font-weight: bold; letter-spacing: -0.5px; } #rd-arte-txt .l { margin-top: 8px; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: #6B7386; } #rd-arte-pie { margin-top: 26px; font-size: 14px; color: #8A92A6; } /* Leyenda del botón azul. Discreta y abajo a la derecha: es una pista para quien no lo sabe, no un mensaje que haya que leer cada vez. */ /* Reloj fijo sobre el vídeo a pantalla completa («keep the clock»). Arriba a la derecha, que es donde lo pone un televisor, y con sombra para que se lea sobre imagen clara. */ #tv-reloj { display: none; position: absolute; top: 42px; right: 56px; font-size: 30px; font-weight: bold; color: #FFFFFF; text-shadow: 0 2px 10px rgba(0,0,0,.85); z-index: 40; } #tv-leyenda { position: absolute; bottom: 14px; right: 36px; font-size: 12px; color: #6B7386; z-index: 30; } #tv-leyenda .pt { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 5px; background: #2F80ED; /* el azul del mando */ vertical-align: middle; } /* A pantalla completa no pinta nada: ahí no hay lista donde marcar. */ html.lleno #tv-leyenda { display: none; } /* ---------- marcar canal por numero ---------- */ /* Grande y arriba a la derecha, como en un televisor: se lee desde el sofa mientras se teclea y no tapa lo que se esta viendo. */ #tv-numero { position: absolute; top: 54px; right: 54px; min-width: 128px; padding: 14px 22px; background: rgba(10, 11, 16, 0.88); border: 1px solid #2C3140; border-radius: 10px; text-align: right; display: none; z-index: 60; } #tv-numero .n { display: block; font-size: 46px; font-weight: bold; letter-spacing: 2px; line-height: 50px; } #tv-numero .nm { display: block; margin-top: 4px; font-size: 14px; color: #8A92A6; max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #tv-numero .no { display: block; font-size: 16px; color: #FF8189; } /* La barra del timeshift reusa la del catch-up; sólo añade el extremo «EN VIVO» y cuánto se ha retrocedido, que ahí no hacen falta. */ #tv-tiempo .tp-vivo { color: #4ED17A; letter-spacing: 1px; font-size: 12px; } #tv-tiempo .tp-atras { margin-left: 14px; font-size: 13px; color: #8A92A6; vertical-align: middle; } /* ---- Ratón (naismarttv/naiweb) ------------------------------------------------------------- Afordancia de clic en los elementos navegables. El d-pad sigue funcionando igual; esto solo hace que en web / magic remote de webOS el puntero muestre que se puede clicar. */ .nav-item, .cart, .canal-h, .tecla, .tv-fila, .rd-fila, [data-sec], [data-acc] { cursor: pointer; } /* ---- Visibilidad del