/*
 * 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
 */

html, body {
  margin: 0;
  padding: 0;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  /* Velo violeta de la marca, muy tenue: se nota que hay color sin llegar a competir con el
     contenido. Va en CSS y no como imagen — una textura a 1280x720 serían cientos de KB que
     la caja tendría que decodificar en cada arranque, y esto no pesa nada.
     ⚠️ Se declara tres veces a propósito: primero el color plano por si nada cuaja, luego la
     sintaxis ANTIGUA de -webkit-gradient, que es la que entiende QtWebKit 5.1. La forma
     moderna (`linear-gradient(180deg, …)`) la ignora y el fondo se quedaría liso. */
  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;
}

/* 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: 23px;
  line-height: 30px;
  padding-top: 9px;
}
.nav-item .gl svg { vertical-align: middle; margin-top: -2px; }
.nav-item .tx {
  display: block;
  font-size: 10px;
  letter-spacing: .5px;
}
.nav-item.on { color: #FFFFFF; }
.nav-item.on:after {
  content: "";
  position: absolute;
  top: 14px; left: 0;
  width: 3px; height: 34px;
  background: #079CE4;
}
.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: #079CE4; }
.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;
}
.canal-h .bar b {
  display: block;
  height: 3px;
  background: #079CE4;
  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; }
.chip.sel { border-color: #079CE4; 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;
}
.tv-fila.sel { border-color: #079CE4; background: #12141B; }

/* 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; }

/* ==========================================================================
   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;
}
.g-dia.act { color: #E8EAF0; background: #12141B; }
.g-dia.sel { border-color: #079CE4; color: #fff; }

/* 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;
}
.g-prog.sel { border-color: #079CE4; background: #12141B; }
.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;
}
#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 <img> 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; }
#pl-leyenda .lg, #pl-rotulo .lg {
  display: inline-block;
  margin-right: 22px;
  font-size: 13px;
  color: #8A92A6;
  vertical-align: middle;
}
#pl-leyenda .lg i, #pl-rotulo .lg i {
  display: inline-block;
  width: 11px; height: 11px;
  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. */
#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;
}
#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: #079CE4; 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; }
.b-cel {
  display: inline-block;
  position: relative;
  width: 92px; height: 132px;
  margin: 0 8px 16px 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: #079CE4;
  z-index: 5;
  -webkit-transform: scale(1.10);
  -webkit-box-shadow: 0 0 0 2px rgba(7,156,228,.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: #079CE4; background: #12141B; }
/* 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. */
.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. */
#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; }

/* ===== welcome de hotel + servicios (portado de naismarttv, adaptado a QtWebKit) ===== */
#welcome { position: relative; width: 1280px; height: 720px; overflow: hidden;
  color: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; }

#welcome .wbg { position: absolute; left: 0; top: 0; width: 1280px; height: 720px;
  background: #0a1a2a url('../img/hotel-bg.jpg') center center; background-size: cover;
  transform: scale(1.04); }
#welcome .wshade { position: absolute; left: 0; top: 0; width: 1280px; height: 720px;
  background:
    linear-gradient(90deg, rgba(4,10,18,0.72) 0%, rgba(4,10,18,0.30) 45%, rgba(4,10,18,0.10) 100%),
    linear-gradient(180deg, rgba(4,10,18,0.35) 0%, rgba(4,10,18,0.00) 30%, rgba(4,10,18,0.70) 100%); }

/* barra superior: marca + reloj */
#welcome .wtop { position: absolute; left: 0; top: 0; width: 1280px; height: 96px;
  display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: justify;
  padding: 0 72px; -webkit-box-sizing: border-box; box-sizing: border-box; }
#welcome .wbrand { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; letter-spacing: 4px;
  text-transform: uppercase; font-weight: 400; }
#welcome .wbrand span { display: block; font-size: 15px; letter-spacing: 6px; color: #E3C77A;
  margin-top: 3px; font-family: 'Helvetica Neue', Arial, sans-serif; }
#welcome .wclock { font-size: 26px; font-weight: 300; letter-spacing: 1px; color: #E9EEF5;
  font-variant-numeric: tabular-nums; }

/* saludo */
#welcome .wmid { position: absolute; left: 90px; top: 250px; }
#welcome .whello { font-family: Georgia, 'Times New Roman', serif; font-size: 46px; font-weight: 400;
  color: #E9EEF5; letter-spacing: 1px; }
#welcome .wname { font-size: 76px; font-weight: 700; line-height: 1.02; margin-top: 2px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
#welcome .wsub { margin-top: 14px; font-size: 22px; font-weight: 300; color: #CBD5E1; letter-spacing: 1px; }

/* fila de opciones */
#welcome .wbtns { position: absolute; left: 90px; bottom: 70px; right: 90px;
  display: -webkit-box; -webkit-box-pack: center; }
/* En QtWebKit el -webkit-box NO encoge los hijos (a diferencia del flex de la web), así que los 6
   botones a 188px se salían por la derecha. Se dimensionan para que 6 (máx) quepan en 1100px
   (6×170 + 5×14 = 1090) y con -webkit-box-pack:center la fila queda centrada (y con menos módulos
   también). El último sin margen para no desbordar el cálculo. */
#welcome .wbtn { width: 170px; height: 150px; margin-right: 14px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); border-radius: 16px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -webkit-box-pack: center; -webkit-box-align: center;
  cursor: pointer; -webkit-transition: all .18s ease; transition: all .18s ease; }
#welcome .wbtn:last-child { margin-right: 0; }
#welcome .wbtn-ico { color: #E9EEF5; margin-bottom: 14px; opacity: .95; }
#welcome .wbtn-tx { font-size: 21px; font-weight: 500; letter-spacing: .3px; text-align: center; padding: 0 8px; }
#welcome .wbtn.foco { background: rgba(227,199,122,0.94); border-color: #E3C77A;
  -webkit-transform: translateY(-8px); transform: translateY(-8px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45); }
#welcome .wbtn.foco .wbtn-ico, #welcome .wbtn.foco .wbtn-tx { color: #1a1206; }

/* panel de servicio (placeholder hasta conectar el API del hotel) */
#welcome .wmodal { position: absolute; left: 0; top: 0; width: 1280px; height: 720px;
  background: rgba(4,10,18,0.62); display: none; }
#welcome .wmodal.abierto { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; }
#welcome .wmodal-card { width: 640px; background: rgba(16,22,32,0.96); border: 1px solid rgba(227,199,122,0.5);
  border-radius: 18px; padding: 44px 48px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
#welcome .wmodal-tit { font-family: Georgia, serif; font-size: 34px; color: #E3C77A; margin-bottom: 16px; }
#welcome .wmodal-tx { font-size: 24px; line-height: 1.5; color: #E9EEF5; font-weight: 300; }
#welcome .wmodal-ok { margin-top: 30px; display: inline-block; padding: 12px 34px; border-radius: 30px;
  background: #E3C77A; color: #1a1206; font-size: 20px; font-weight: 600; cursor: pointer; }

/* ============================================================================
   Servicios de hotel (Room Service / Tour / Valet) — Autor: Darwin Quinones, 2026-08-01
   ============================================================================ */
#roomservice, #tour, #valet, #flights { position: relative; width: 1280px; height: 720px; overflow: hidden;
  color: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; }
.rs-bg { position: absolute; left:0; top:0; width: 1280px; height: 720px;
  background: #070d15 url('../img/hotel-bg.jpg') center center; background-size: cover; opacity: .26; }
.rs-shade { position: absolute; left:0; top:0; width: 1280px; height: 720px;
  background: linear-gradient(180deg, rgba(7,13,21,0.82), rgba(7,13,21,0.93)); }

/* cabecera comun */
.rs-head { position: absolute; left:0; top:0; width: 1280px; height: 84px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  display: -webkit-box; -webkit-box-align: center; padding: 0 48px; border-bottom: 1px solid rgba(255,255,255,0.09); }
.rs-back { width: 150px; font-size: 21px; color: #cbd5e1; cursor: pointer; }
.rs-back:hover { color: #E3C77A; }
.rs-title { -webkit-box-flex: 1; text-align: center; font-family: Georgia, serif; font-size: 30px; letter-spacing: 1px; }
.rs-room { min-width: 150px; text-align: right; font-size: 18px; color: #E3C77A; }

/* confirmacion (compartida) */
.rs-conf { position: absolute; left:0; top:0; width: 1280px; height: 720px; background: rgba(4,10,18,0.66); display: none; }
.rs-conf.abierto { display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; }
.rs-conf-card { width: 600px; background: rgba(16,22,32,0.97); border: 1px solid rgba(227,199,122,0.5);
  border-radius: 18px; padding: 42px 48px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.rs-conf-ico { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #E3C77A;
  color: #1a1206; font-size: 36px; line-height: 64px; font-weight: 700; }
.rs-conf-t { font-family: Georgia, serif; font-size: 32px; color: #E3C77A; margin-bottom: 12px; }
.rs-conf-x { font-size: 22px; line-height: 1.5; color: #E9EEF5; font-weight: 300; }
.rs-conf-tot { margin-top: 14px; font-size: 22px; font-weight: 600; }
.rs-conf-ok { margin-top: 28px; display: inline-block; padding: 12px 36px; border-radius: 30px;
  background: #E3C77A; color: #1a1206; font-size: 20px; font-weight: 600; cursor: pointer; }

/* ---- room service: 3 columnas ---- */
.rs-body { position: absolute; left:0; top: 84px; width: 1280px; height: 636px; display: -webkit-box; }
.rs-cats { width: 246px; padding: 18px 0; -webkit-box-sizing: border-box; box-sizing: border-box; border-right: 1px solid rgba(255,255,255,0.08); }
.rs-cat { padding: 14px 30px; font-size: 20px; color: #c3ccda; cursor: pointer; border-left: 3px solid transparent; }
.rs-cat.sel { color: #fff; }
.rs-cat.foco, .rs-cat:hover { color: #E3C77A; border-left-color: #E3C77A; background: rgba(255,255,255,0.04); }
.rs-items { -webkit-box-flex: 1; padding: 14px 24px; overflow-y: auto; }
.rs-item { display: -webkit-box; -webkit-box-align: center; padding: 15px 18px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; }
.rs-item.foco, .rs-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(227,199,122,0.4); }
.rs-it-tx { -webkit-box-flex: 1; }
.rs-it-n { font-size: 22px; font-weight: 600; }
.rs-q { color: #E3C77A; font-size: 18px; }
.rs-it-d { font-size: 16px; color: #9aa3b4; margin-top: 3px; font-style: italic; }
.rs-it-p { width: 78px; text-align: right; font-size: 21px; color: #E3C77A; font-weight: 600; }
.rs-it-add { width: 42px; height: 42px; margin-left: 16px; border-radius: 50%; background: rgba(227,199,122,0.92);
  color: #1a1206; font-size: 28px; line-height: 40px; text-align: center; }
.rs-order { width: 320px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px 24px; border-left: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22); display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: normal; }
.rs-order-t { font-family: Georgia, serif; font-size: 24px; margin-bottom: 12px; }
.rs-order-l { -webkit-box-flex: 1; overflow-y: auto; }
.rs-empty { color: #7c8698; font-size: 18px; font-style: italic; margin-top: 16px; }
.rs-ol { display: -webkit-box; -webkit-box-align: baseline; font-size: 18px; margin-bottom: 10px; }
.rs-ol-q { width: 36px; color: #E3C77A; }
.rs-ol-n { -webkit-box-flex: 1; padding-right: 8px; }
.rs-ol-p { color: #cbd5e1; }
.rs-total { display: -webkit-box; -webkit-box-pack: justify; font-size: 24px; font-weight: 700;
  padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 8px; }
.rs-place { text-align: center; padding: 15px; border-radius: 12px; background: #E3C77A; color: #1a1206;
  font-size: 22px; font-weight: 700; cursor: pointer; }
.rs-place.off { opacity: .35; }
.rs-place.foco { box-shadow: 0 0 0 3px rgba(227,199,122,0.55); }

/* ---- tour: lista de excursiones ---- */
.tr-grid { position: absolute; left:0; top: 84px; width: 1280px; height: 636px; -webkit-box-sizing: border-box; box-sizing: border-box;
  padding: 22px 60px; overflow-y: auto; }
.tr-card { display: -webkit-box; -webkit-box-align: center; padding: 14px 22px 14px 14px; margin-bottom: 14px; border-radius: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid transparent; cursor: pointer; overflow: hidden;
  -webkit-transition: all .16s ease; transition: all .16s ease; }
.tr-card.foco, .tr-card:hover { background: rgba(255,255,255,0.11); border-color: rgba(227,199,122,0.55);
  -webkit-transform: translateY(-2px); transform: translateY(-2px); }
.tr-photo { width: 200px; height: 116px; border-radius: 10px; margin-right: 26px; -webkit-box-flex: 0;
  background-size: cover; background-position: center; background-color: #12202e; }
.tr-info { -webkit-box-flex: 1; }
.tr-n { font-size: 26px; font-weight: 600; }
.tr-d { font-size: 18px; color: #9aa3b4; margin-top: 5px; }
.tr-meta { font-size: 16px; color: #c3ccda; margin-top: 8px; }
.tr-right { text-align: right; min-width: 130px; }
.tr-p { font-size: 30px; color: #E3C77A; font-weight: 700; }
.tr-book { margin-top: 10px; display: inline-block; padding: 8px 22px; border-radius: 24px; background: #E3C77A;
  color: #1a1206; font-size: 18px; font-weight: 600; }

/* ---- valet ---- */
.vl-wrap { position: absolute; left:0; top: 84px; width: 1280px; height: 636px; display: -webkit-box;
  -webkit-box-align: center; -webkit-box-pack: center; }
.vl-card { width: 560px; text-align: center; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 46px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.vl-ico { color: #E3C77A; margin-bottom: 8px; }
.vl-veh { font-size: 34px; font-weight: 700; }
.vl-sub { font-size: 21px; color: #9aa3b4; margin-top: 10px; }
/* pills: -webkit-box no envuelve; fluyen como inline-block centrados */
.vl-pills { text-align: center; margin-top: 34px; }
.vl-pill { display: inline-block; vertical-align: top; margin: 0 8px; width: 96px; padding: 18px 0; border-radius: 14px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18); font-size: 26px; font-weight: 700; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box;
  -webkit-transition: all .15s ease; transition: all .15s ease; }
.vl-pill span { display: block; font-size: 14px; font-weight: 400; color: #9aa3b4; margin-top: 2px; }
.vl-pill.foco, .vl-pill:hover { background: #E3C77A; color: #1a1206; border-color: #E3C77A;
  -webkit-transform: translateY(-4px); transform: translateY(-4px); }
.vl-pill.foco span, .vl-pill:hover span { color: #4a3a10; }

/* ---- flights: tablero del aeropuerto (PUJ) ---- */
.fl-tabs { position: absolute; left: 0; top: 84px; width: 1280px; height: 62px; -webkit-box-sizing: border-box; box-sizing: border-box;
  display: -webkit-box; -webkit-box-align: center; padding: 0 60px; }
.fl-tab { margin-right: 16px; padding: 10px 28px; border-radius: 24px; background: rgba(255,255,255,0.08);
  color: #c3ccda; font-size: 20px; cursor: pointer; }
.fl-tab.sel { background: #E3C77A; color: #1a1206; font-weight: 700; }
.fl-board { position: absolute; left: 60px; top: 158px; width: 1160px; bottom: 26px; overflow-y: auto; }
.fl-row { display: -webkit-box; -webkit-box-align: center; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 21px; }
.fl-hd { color: #E3C77A; font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 2px solid rgba(227,199,122,0.4); }
.fl-c { padding-right: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.fl-time { width: 92px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fl-flt { width: 118px; font-family: 'SF Mono', Menlo, Consolas, monospace; color: #cbd5e1; }
.fl-air { width: 168px; }
.fl-dst { -webkit-box-flex: 1; }
.fl-gate { width: 92px; text-align: center; font-weight: 600; }
.fl-status { width: 150px; text-align: right; padding-right: 0; }
.fl-st { display: inline-block; padding: 5px 14px; border-radius: 16px; font-size: 16px; font-weight: 600; }
.fl-ok  { background: rgba(46,160,90,0.22);  color: #5fd08a; }
.fl-go  { background: rgba(227,199,122,0.25); color: #E3C77A; }
.fl-bad { background: rgba(220,70,70,0.22);   color: #ff8a8a; }
.fl-dim { background: rgba(255,255,255,0.10); color: #9aa3b4; }

/* ==== welcome de hotel: Reservaciones ==== */
#reservations { position: relative; width: 1280px; height: 720px; overflow: hidden; }
#reservations .rv-grid { overflow-y: auto; }
#reservations .rv-card { width: 620px; }
/* pills envuelven: inline-block centrado (no -webkit-box) */
#reservations .rv-pills { text-align: center; max-width: 470px; margin: 34px auto 0; }
#reservations .rv-pills .vl-pill { margin-bottom: 12px; }
#reservations .rv-vacio { text-align: center; color: #9aa3b4; font-size: 22px; padding-top: 130px; }

/* ==== welcome de hotel: Valet Parking ==== */
#valet { position: relative; width: 1280px; height: 720px; overflow: hidden; }
#valet .rv-card { width: 620px; }
/* pills envuelven: inline-block centrado (no -webkit-box) */
#valet .vl-pills { text-align: center; max-width: 500px; margin: 34px auto 0; }
#valet .vl-pill { width: auto; min-width: 150px; padding: 18px 24px; font-size: 22px; margin: 0 8px 14px; }
#valet .vl-pill.vl-now { background: rgba(227,199,122,0.16); border-color: rgba(227,199,122,0.6); color: #E3C77A; }
#valet .vl-pill.vl-now.foco, #valet .vl-pill.vl-now:hover { background: #E3C77A; color: #1a1206; }
#valet .vl-envia { margin-top: 22px; font-size: 18px; color: #9aa3b4; }

/* ==== vuelos: selector de aeropuertos (horizontal) + mensajes ==== */
.fl-aps { position: absolute; left: 0; top: 84px; width: 1280px; height: 54px; -webkit-box-sizing: border-box; box-sizing: border-box;
  display: -webkit-box; -webkit-box-align: center; padding: 0 60px; overflow-x: auto; white-space: nowrap; }
.fl-ap { -webkit-box-flex: 0; margin-right: 12px; padding: 8px 22px; border-radius: 20px;
  background: rgba(255,255,255,0.08); color: #c3ccda; font-size: 20px; font-weight: 600; letter-spacing: 1px; cursor: pointer; }
.fl-ap.sel { background: #E3C77A; color: #1a1206; }
.fl-msg { text-align: center; color: #9aa3b4; font-size: 22px; padding-top: 80px; }
#flights .fl-tabs { top: 148px; }
.fl-board2 { top: 218px; }

/* hora de vuelos en AM/PM: columna un poco más ancha */
#flights .fl-time { width: 118px; }