/* dvr.css — el archivo (DVR) dentro del mundo visual de la app.
 *
 * Nada de esto inventa un lenguaje nuevo. Todo sale de lo que la app ya usa:
 *
 *   pastilla oscura  rgba(0,0,0,.7) r=15px   .current-program .program-info
 *   boton pastilla   #22313f r=30px b=4px    .btn-channel  (el boton "Guia")
 *   pista            10px #555               .progress-bar
 *   relleno          #fff                    .progress-fill
 *   en directo       #ff3434                 .current-program .live-indicator
 *   acento           #006790                 el azul del numero de canal enfocado
 *   superficie       #132835                 la tarjeta de producto enfocada
 *   FOCO             border:4px solid #fff   .item-keyboard-v2.focus-item-keyboard
 *   tipografia       montserrat-*            las tres caras que la app auto-aloja
 *
 * DOS REGLAS GLOBALES DE LA APP QUE MANDAN AQUI
 *   * { box-shadow: none !important }  -> la profundidad se hace con degradados
 *                                         y con el borde de 4px, nunca con sombra.
 *   * { color: #fff }                  -> todo color de texto hay que escribirlo.
 *
 * EL FOCO NO SE REDEFINE. Cada elemento navegable lleva .item-keyboard-v2 con un
 * borde de 4px transparente, y la propia hoja de la app lo pinta blanco al
 * enfocarse. Reservar el hueco desde el principio es lo que evita que el foco
 * mueva la maquetacion. Es el mismo trato que tienen el boton "Guia" y las
 * tarjetas de la rejilla.
 *
 * El lienzo es 1280x720 nativos (webos-720p.js no escala en un panel 720p), asi
 * que las medidas son pixeles de diseno 1:1.
 */

/* ------------------------------------------------------------------ paleta */

/* Los colores van LITERALES, no en propiedades personalizadas.
 *
 * `var()` necesita Chromium 49 y el parque no llega: webOS 3.x monta Chromium
 * 38 y webOS 2.x un WebKit 538. En esos televisores cada `var(--dvr-…)` se
 * queda sin valor y la hoja entera se cae -texto invisible, fondos ausentes-,
 * sin ningun error que lo delate. La propia hoja de la app no usa ni una
 * propiedad personalizada; esto hace lo mismo.
 *
 *   #ffffff            tinta
 *   #c3ccd3            tinta secundaria (gris azulado, tintado del fondo)
 *   #8d99a3            tinta terciaria: estados y ayudas
 *   #132835            la tarjeta en reposo
 *   #006790            la tarjeta seleccionada, y el acento de la app
 *   #ff3434            AO VIVO, y solo eso
 *   #555555            la pista
 *   rgba(0,0,0,.7)     la pastilla
 */

/* ------------------------------------------------------------------- panel */

/* z-index 45: por encima del .channel-switcher del OSD (30) y de la capa de
 * transicion del zapping (29), que son lo unico que se dibuja sobre el video. */
#dvr-panel {
    position: absolute;
    z-index: 45;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
    display: none;
    color: #ffffff;
    font-family: "montserrat-regular", "Montserrat", sans-serif;
    text-align: left;
    pointer-events: none;
}
#dvr-panel.visible { display: block; }
#dvr-panel * { text-align: left; }

/* Las insignias y los iconos se dibujan sobre <i>, y el estilo por defecto del
 * navegador para <i> es cursiva. Montserrat sólo trae Bold, Light y Regular:
 * no hay itálica que cargar, así que el navegador se INVENTA una oblicua
 * inclinando la recta. En pantalla convivían dos versiones de la misma
 * insignia -"AO VIVO" torcido en la tarjeta y recto en el eje- y una de ellas
 * era un corte falso de la cara de la marca. */
#dvr-panel i { font-style: normal; }

/* El fondo. Es lo unico que separa el panel del video, porque la sombra esta
 * prohibida globalmente. Cada forma trae el suyo. */
#dvr-fondo {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    pointer-events: none;
}
/* El degradado tiene que llegar arriba del todo con cuerpo: el titulo del
 * programa se dibuja a y=402 y debajo puede haber un plano muy claro -medido
 * sobre una cocina blanca, el texto quedaba sobre un velo de .37 y se leia a
 * duras penas-. Con .85 ahi, el blanco tiene contraste de sobra pase lo que
 * pase en el video. */
/* El velo sube hasta 280 y aguanta opaco mas arriba: ahora sostiene tambien
 * la linea de cobertura del archivo, que va por encima del titulo. */
.forma-franja #dvr-fondo {
    top: 258px;
    background: linear-gradient(0deg,
        rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,.97) 72%,
        rgba(0,0,0,.90) 90%, rgba(0,0,0,.5) 97%, rgba(0,0,0,0) 100%);
}
/* Dos velos, no uno. El de izquierda a derecha sostiene la columna de
 * capitulos, pero se apaga al 52% y dejaba el eje de la derecha -titulo, reloj
 * y ayuda- flotando sobre el video desnudo: sobre un plano claro no se leia
 * nada. El segundo es una banda inferior que cubre justo la zona del eje. */
.forma-lateral #dvr-fondo {
    background:
        linear-gradient(0deg,
            rgba(0,0,0,1) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,.90) 56%,
            rgba(0,0,0,.48) 84%, rgba(0,0,0,0) 100%) 0 100% / 100% 252px no-repeat,
        linear-gradient(90deg,
            rgba(0,0,0,.95) 0%, rgba(0,0,0,.93) 30%,
            rgba(0,0,0,.80) 40%, rgba(0,0,0,0) 52%);
}
.forma-completa #dvr-fondo { background: rgba(0,0,0,.94); }

/* --------------------------------------------------------------- cabecera */
/* Solo la llevan las formas que tapan: en la franja el titulo del programa ya
 * esta en el eje, justo debajo, y repetirlo seria decir dos veces lo mismo. */

#dvr-cabecera { position: absolute; display: none; }
/* En la franja tambien se dice el canal y hasta donde llega el archivo. Sin
 * esto, la forma por defecto -la que ve el espectador- era la unica que nunca
 * contaba cuanto se puede retroceder, y ademas la barra del canal esta oculta
 * mientras el panel esta abierto, asi que se perdia hasta el nombre. */
.forma-franja   #dvr-cabecera { display: block; left: 56px;  top: 306px; width: 1168px; white-space: nowrap; }
.forma-lateral  #dvr-cabecera { display: block; left: 40px;  top: 30px; width: 424px;
                                white-space: nowrap; overflow: hidden; }
.forma-completa #dvr-cabecera { display: block; left: 56px;  top: 26px; width: 1100px; white-space: nowrap; }

#dvr-canal {
    display: inline-block;
    vertical-align: baseline;
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    font-size: 30px;
    line-height: 1.15;
    color: #ffffff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forma-completa #dvr-canal { font-size: 34px; }
#dvr-cobertura {
    margin-top: 8px;
    font-size: 17px;
    color: #c3ccd3;
}
/* A pantalla completa caben en la misma linea, y asi la rejilla empieza antes:
 * apilados, el segundo renglon se comia el sitio de las pestanas. */
.forma-lateral  #dvr-cobertura,
.forma-completa #dvr-cobertura,
.forma-franja   #dvr-cobertura {
    display: inline-block;
    margin: 0 0 0 20px;
    vertical-align: baseline;
}
.forma-franja  #dvr-canal { font-size: 22px; }
.forma-franja  #dvr-cobertura { font-size: 17px; }
.forma-lateral #dvr-canal { font-size: 24px; }
.forma-lateral #dvr-cobertura { font-size: 16px; margin-left: 16px; }

/* -------------------------------------------------------------------- eje */
/* La barra de progreso de la app, extendida con lo unico que el archivo anade:
 * el tramo no grabado, el cabezal y la marca del borde del directo. */

#dvr-eje { position: absolute; }
.forma-franja   #dvr-eje { left: 56px; right: 56px; top: 342px; }
.forma-lateral  #dvr-eje { left: 512px; right: 56px; top: 536px; }
.forma-completa #dvr-eje { left: 56px; right: 56px; top: 136px; }

#dvr-eje-cab {
    position: relative;
    height: 32px;
    margin-bottom: 18px;
    white-space: nowrap;
}
/* El encabezado dice el CANAL; el eje dice el PROGRAMA. No es lo mismo, asi
 * que aqui tambien se enseña. */

#dvr-programa {
    display: inline-block;
    max-width: 880px;
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    vertical-align: top;
}
.forma-lateral #dvr-programa { max-width: 480px; font-size: 22px; }

/* "Ver desde o início": el único botón que vive en la línea de tiempo, y sólo
 * cuando el programa está en el aire. Es la misma pastilla que las vistas, y
 * como todo lo navegable lleva su borde de 4 px reservado para el foco. */
#dvr-inicio {
    display: none;
    position: absolute;
    top: -4px;
    right: 132px;
    padding: 5px 18px;
    border: 4px solid rgba(0, 0, 0, 0);
    border-radius: 30px;
    background-color: rgba(0, 0, 0, .7);
    color: #ffffff;
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 22px;
    white-space: nowrap;
    pointer-events: auto;
}
/* El anillo de foco hay que escribirlo aquí a mano.
 *
 * La regla de la app es `.item-keyboard-v2.focus-item-keyboard` -dos clases-,
 * y este botón se estiliza por ID, que gana en especificidad: el borde
 * transparente de arriba se imponía al blanco de la app y el foco no se veía.
 * Al resto de lo navegable no le pasa porque se estiliza por clase. */
#dvr-inicio.focus-item-keyboard { border-color: #ffffff; }

/* Con el botón puesto, el título deja de poder ocupar toda la fila. */
#dvr-eje.con-inicio #dvr-programa { max-width: 520px; }

/* La insignia de estado. En directo es la misma que ya usa la barra del canal:
 * mismo rojo, mismo radio, misma caja. Diferido y gravado son la misma insignia
 * en gris, para que las tres se lean como una sola cosa que cambia de valor. */
#dvr-estado {
    position: absolute;
    right: 0; top: 3px;
    padding: 4px 12px;
    border-radius: 3px;
    background-color: rgba(255,255,255,.14);
    color: #ffffff;
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: .09em;
}
#dvr-estado.vivo { background-color: #ff3434; }
#dvr-estado .punto {
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background-color: #fff;
    vertical-align: middle;
}
#dvr-estado:not(.vivo) .punto { display: none; }

/* La pista. 10px y #555, como .progress-bar de la app. */
#dvr-pista {
    position: relative;
    height: 10px;
    border-radius: 5px;
    background-color: #555555;
}

/* Lo que hay del programa en el archivo: relleno blanco solido, como
 * .progress-fill. Es la banda que SI se puede recorrer. */
#dvr-grabado {
    position: absolute;
    top: 0; height: 100%;
    border-radius: 5px;
    background-color: #ffffff;
}

/* El tramo del programa que empezo antes que la grabacion. Se dibuja, no se
 * omite: que se vea que existe y que no se puede ir ahi. Va MAS APAGADO que la
 * banda disponible; al reves la barra se lee invertida, porque el ojo toma lo
 * mas llamativo por lo lleno. */
#dvr-nograbado {
    position: absolute;
    top: 0; left: 0; height: 100%;
    border-radius: 5px 0 0 5px;
    background-image: repeating-linear-gradient(115deg,
        rgba(255,255,255,.22) 0 2px, rgba(255,255,255,0) 2px 7px);
}

/* El borde del directo, cuando el cabezal no esta ahi. Solo se dibuja si son
 * dos sitios distintos: dos marcas que deben coincidir siempre acaban sin
 * coincidir. */
#dvr-borde {
    position: absolute;
    top: -5px;
    width: 3px; height: 20px;
    border-radius: 2px;
    background-color: #ff3434;
    display: none;
}

/* El cabezal. Sin sombra -la app la prohibe globalmente-, asi que se despega
 * del fondo con un anillo oscuro dibujado con borde. */
#dvr-cabeza {
    position: absolute;
    top: -7px;
    width: 8px; height: 24px;
    margin-left: -4px;
    border: 2px solid rgba(0,0,0,.75);
    border-radius: 5px;
    background-color: #ffffff;
    transition: left .5s linear;
}
/* Un salto no se persigue con la animacion del tic: aterriza. */
#dvr-cabeza.salta { transition: none; }

#dvr-horas {
    position: relative;
    height: 22px;
    margin-top: 12px;
    font-size: 17px;
    color: #c3ccd3;
}
#dvr-desde { position: absolute; left: 0; }
/* Un programa que cruza la medianoche acaba a una hora MENOR que la de inicio:
 * "19:35 ... 02:00" se lee de un vistazo como que las dos ya pasaron. El
 * distintivo dice que ese extremo es del dia siguiente. */
#dvr-horas .dia {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background-color: rgba(255,255,255,.17);
    font-size: 13px;
    letter-spacing: .04em;
}
#dvr-hasta { position: absolute; right: 0; }
/* La hora del cabezal la coloca pintarEje() bajo el propio cabezal. Las cifras
 * van tabulares: sin eso el reloj baila de ancho cada segundo. */
#dvr-ahora {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    transition: left .5s linear;
}
/* Igual que el cabezal: un salto aterriza. Sin esto, con la tecla mantenida el
 * reloj se descuelga de la marca -los saltos llegan mas seguidos que la propia
 * transicion- y va detras dando tirones. */
#dvr-ahora.salta { transition: none; }
#dvr-desde, #dvr-hasta { transition: opacity .18s ease; }

/* ------------------------------------------------------------------ vistas */
/* Dos entradas al archivo: por hora y por programa. Son navegables, asi que
 * cambiar de vista es mover el foco, no aprenderse una tecla. */

#dvr-vistas { position: absolute; white-space: nowrap; }
/* Las vistas van DEBAJO de la tira. Arriba de la tira ahora está la línea de
 * tiempo, que es a donde lleva ▲; bajando se llega a las vistas. Así el
 * recorrido con la cruceta y el orden en que se ven las cosas coinciden. */
.forma-franja   #dvr-vistas { left: 56px; top: 624px; }
.forma-lateral  #dvr-vistas { left: 40px; top: 76px; }
.forma-completa #dvr-vistas { left: 56px; top: 80px; }

.dvr-vista {
    display: inline-block;
    margin-right: 12px;
    padding: 7px 22px;
    border: 4px solid rgba(0,0,0,0);   /* el hueco del foco, reservado */
    border-radius: 30px;
    background-color: rgba(0, 0, 0, .7);
    color: #c3ccd3;
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    font-size: 17px;
    line-height: 22px;
    pointer-events: auto;
    transition: background-color .18s ease, color .18s ease;
}
.dvr-vista.activa {
    background-color: #006790;
    color: #ffffff;
}

/* ------------------------------------------------------------------- tira */
/* La lista de capitulos. Una sola tarjeta con tres tallas, una por forma: el
 * vocabulario no cambia al cambiar de sitio. */

#dvr-tira {
    position: absolute;
    overflow: hidden;
}
.forma-franja   #dvr-tira { left: 56px; top: 456px; width: 1176px; height: 152px; }
.forma-lateral  #dvr-tira { left: 40px; top: 136px; width: 424px; height: 528px; }
.forma-completa #dvr-tira { left: 56px; top: 244px; width: 1176px; height: 428px; }

#dvr-carro {
    position: absolute;
    left: 0; top: 0;
    white-space: nowrap;
    transition: transform .18s ease-out;
}

.dvr-cap {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border: 4px solid rgba(0,0,0,0);   /* el hueco del foco, reservado */
    border-radius: 10px;
    background-color: #132835;
    overflow: hidden;
    pointer-events: auto;
    transition: background-color .18s ease;
}
.dvr-cap.focus-item-keyboard { background-color: #006790; }

/* Un capitulo fuera del archivo se ve y no se puede elegir. Se apaga, pero NO
 * con opacidad sobre la tarjeta entera: eso multiplica tambien el contraste del
 * texto, y 18 px de blanco al 42% sobre video en vivo se cae por debajo del
 * minimo legible a tres metros. Se apaga la imagen y se le da al texto su
 * propio tono, que si se puede medir: #98a4ae sobre #132835 son 5,9:1. */
.dvr-cap.fuera .dvr-cap-mini { opacity: .3; }
.dvr-cap.fuera .dvr-cap-n { color: #98a4ae; }
.dvr-cap.fuera .dvr-cap-h { color: #8a959e; }   /* ~5,0:1 sobre #132835 */

.dvr-cap-mini {
    display: block;
    background-color: #0a1620;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.dvr-cap-txt { display: block; }

.dvr-cap-h {
    display: block;
    color: #c3ccd3;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
.dvr-cap-n {
    display: block;
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La insignia del capitulo, sobre la miniatura. Misma caja que la del eje. */
.dvr-cap-e {
    position: absolute;
    padding: 3px 9px;
    border-radius: 3px;
    background-color: rgba(0,0,0,.78);
    color: #ffffff;
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    letter-spacing: .07em;
    white-space: nowrap;
}
.dvr-cap-e.vivo { background-color: #ff3434; }

/* Cuantas veces se emitio este programa en la ventana. Solo aparece en la vista
 * por hora, y solo cuando hay mas de una: es la pista de que existe la otra
 * vista, puesta donde surge la pregunta. */
.dvr-cap-rep {
    position: absolute;
    padding: 3px 9px;
    border-radius: 3px;
    background-color: rgba(0,103,144,.92);
    color: #ffffff;
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* --- talla franja: la miniatura manda y el texto va encima ---------------- */
.forma-franja .dvr-cap { width: 232px; height: 152px; margin-right: 16px; }
.forma-franja .dvr-cap-mini { width: 224px; height: 126px; }
.forma-franja .dvr-cap-txt {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 12px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 52%, rgba(0,0,0,0) 100%);
}
.forma-franja .dvr-cap-h { font-size: 15px; line-height: 19px; }
.forma-franja .dvr-cap-n { font-size: 18px; line-height: 23px; margin-top: 1px; }
.forma-franja .dvr-cap-e   { left: 8px;  top: 8px; font-size: 13px; line-height: 16px; }
.forma-franja .dvr-cap-rep { right: 8px; top: 8px; font-size: 13px; line-height: 16px; }

/* --- talla lateral: fila, miniatura pequena a la izquierda ---------------- */
.forma-lateral .dvr-cap { display: block; width: 424px; height: 80px; margin-bottom: 8px; }
.forma-lateral .dvr-cap-mini {
    position: absolute; left: 0; top: 0;
    width: 128px; height: 72px;
    border-radius: 6px 0 0 6px;
}
.forma-lateral .dvr-cap-txt { margin-left: 128px; padding: 13px 14px; }
.forma-lateral .dvr-cap-h { font-size: 15px; line-height: 19px; }
.forma-lateral .dvr-cap-n { font-size: 19px; line-height: 25px; max-width: 258px; }
.forma-lateral .dvr-cap-e   { left: 6px;  top: 6px;  font-size: 12px; line-height: 15px; }
.forma-lateral .dvr-cap-rep { right: 10px; bottom: 10px; font-size: 12px; line-height: 15px; }

/* --- talla completa: rejilla de 4, la miniatura grande ------------------- */
/* Cuatro por fila. El carro va mas ancho que la ventana a proposito: con
 * 1176 justos, el margen derecho de la cuarta tarjeta la mandaba a la fila
 * siguiente y solo salian tres. */
.forma-completa .dvr-cap { width: 268px; height: 200px; margin-right: 26px; margin-bottom: 24px; }
.forma-completa .dvr-cap-mini { width: 260px; height: 146px; }
.forma-completa .dvr-cap-txt { padding: 9px 14px; }
/* La hora va SOBRE la miniatura, como la insignia de estado. Debajo no cabia:
 * con las dos lineas, el titulo se cortaba por la mitad en las ocho tarjetas. */
.forma-completa .dvr-cap-h {
    position: absolute;
    left: 8px; bottom: 62px;
    padding: 3px 9px;
    border-radius: 3px;
    background-color: rgba(0,0,0,.78);
    font-size: 14px; line-height: 17px;
    color: #ffffff;
}
.forma-completa .dvr-cap-n { font-size: 20px; line-height: 28px; max-width: 232px; }
.forma-completa .dvr-cap-e   { left: 8px;  top: 8px; font-size: 13px; line-height: 16px; }
.forma-completa .dvr-cap-rep { right: 8px; top: 8px; font-size: 13px; line-height: 16px; }

/* ------------------------------------------------- esqueleto, vacio, error */

/* Mientras llegan los capitulos se dibuja la forma que van a tener, no un
 * girador: la lista no cambia de sitio al aparecer. */
.dvr-cap.esqueleto { background-color: rgba(255,255,255,.07); }
.dvr-cap.esqueleto .dvr-cap-mini { background-color: rgba(255,255,255,.05); }
.dvr-cap.esqueleto .dvr-cap-h,
.dvr-cap.esqueleto .dvr-cap-n {
    background-color: rgba(255,255,255,.10);
    border-radius: 3px;
    color: rgba(0,0,0,0);
}
.dvr-cap.esqueleto .dvr-cap-h { width: 64px; }
.dvr-cap.esqueleto .dvr-cap-n { width: 138px; margin-top: 6px; }
#dvr-tira.cargando #dvr-carro { animation: dvr-latido 1.1s ease-in-out infinite; }
@keyframes dvr-latido { 0%, 100% { opacity: .55 } 50% { opacity: .95 } }

/* El vacio explica el estado, no dice "no hay nada". */
#dvr-vacio {
    position: absolute;
    display: none;
    max-width: 640px;
    color: #c3ccd3;
    font-size: 19px;
    line-height: 28px;
}
.forma-franja   #dvr-vacio { left: 56px; top: 466px; }
.forma-lateral  #dvr-vacio { left: 40px; top: 146px; max-width: 400px; }
.forma-completa #dvr-vacio { left: 56px; top: 254px; }
#dvr-vacio b {
    display: block;
    margin-bottom: 6px;
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    font-size: 22px;
    color: #ffffff;
}

/* ------------------------------------------------- el boton de la barra    */
/* Gemelo exacto del boton "Guia" (.btn-channel): mismo fondo, mismo radio,
 * mismo borde de 4px transparente que la hoja de la app pinta blanco al
 * enfocarse, misma anchura y misma linea de base, para que se lean como un
 * par y no como un anadido.
 *
 * Los dos en la fila de abajo, pegados al logo y en este orden:
 *
 *     [programa actual]      [Guia de programacion] [Volver a ver] (SoulTV)
 *
 * "Volver a ver" ocupa el sitio que era de la guia y la guia se corre a su
 * izquierda (`.btn-channel.con-rever`). Hasta el 11-sep-2026 iba apilado
 * ENCIMA de la guia porque a su izquierda estaba la caja del programa
 * siguiente (x 524-764); retirada esa caja (abajo), el hueco queda libre:
 * la guia cae en x 603-872 y el programa actual acaba en 516. */

.btn-rever {
    background-color: #22313f;
    color: #fff;
    border-radius: 30px;
    padding: 6px 6px;
    display: inline-block;
    font-size: 16px;
    border: 4px solid rgba(0, 0, 0, 0);
    width: 21%;
    vertical-align: middle;
    position: absolute;
    /* El sitio exacto de .btn-channel en la hoja de la app. */
    right: 9.9%;
    top: 86.1%;
}
/* La guia, a la izquierda de "Volver a ver": su anchura (21%) mas ~12 px de
 * separacion. Solo cuando el canal tiene archivo; sin el, la guia se queda en
 * su sitio de siempre y no deja un hueco junto al logo. */
.btn-channel.con-rever {
    right: 31.8%;
}
/* El programa SIGUIENTE no se ensena: la barra muestra solo el que esta en
 * emision. La caja la dibuja la directiva `current-program`, compilada dentro
 * del bundle, asi que se retira aqui y no en su plantilla. */
.current-program-container .next-program {
    display: none;
}
/* ...y la del programa actual se queda donde estaba. Las dos cajas son
 * inline-block dentro de un `text-align: center` heredado; juntas (48 + 1 +
 * 29 + 21 = 99 %) llenaban la linea y el centrado no se notaba. Sola, se
 * recentraba 207 px a la derecha y quedaba debajo de la guia (visto en la
 * LG). Con el margen del par entero ocupa la misma linea que antes. */
.current-program-container .current-program {
    margin-right: 51%;
}

/* ------------------------------------------------- el menu del logo        */
/* La columna que despliega el logo de SoulTV. En la hoja de la app va anclada
 * por ARRIBA (`top: 7.24em` = 135 px), asi que su ultimo circulo acaba donde
 * caiga: medido en la LG, en y=608, con el logo empezando en y=605. No estaba
 * cerca: se le metia 3 px dentro.
 *
 * Se ancla por ABAJO, contra el logo, y con el mismo hueco que hay entre
 * circulos, para que la columna siga su ritmo hasta el logo -que tambien es un
 * circulo-.
 *
 * Y ese hueco es 25 % menor que el de la app: 20 px de borde a borde en vez de
 * 27 (5 margen arriba + 16 abajo + 6 del renglon). Se quitan 7 px del margen de
 * abajo. Con eso el ancla no cambia:
 *
 *     circulo mas cercano, borde inferior  = 605 - 20            = 585
 *     bloque .cont-btn-m-user por debajo   = +9 margen +6 renglon = 600
 *     bottom                               = 720 - 600           = 120 px
 *
 * (los 6 px de "renglon" son el descendente de la linea: los circulos son
 * inline-block). Anclada asi, el circulo mas cercano queda a la misma distancia
 * del logo aunque cambie cuantos hay. Solo `.menu-user`: el logo y la
 * desplegable de favoritos tambien son .btn-m-user y se quedan como estan. */
.menu-user {
    top: auto;
    bottom: 120px;
}
.menu-user .btn-m-user {
    margin-bottom: 9px;
}
/* La desplegable de favoritos esta colocada a mano a la altura de su fila: en
 * la app, `top: 323px` para la fila en y=338 (15 px por encima). Favoritos
 * sigue siendo la tercera y ahora cae en y=329: mismos 15 px. */
.options-emoticons.options-favorites {
    top: 314px;
}
.btn-rever span.rever-icono {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    /* Reloj con flecha antihoraria: "volver atras en el tiempo". Dibujado a la
     * medida porque rewind.png de la app es azul marino sobre transparente y
     * desaparece sobre esta pastilla. Mismo peso optico que icone-guide.png. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%23ffffff" d="M16 4a12 12 0 1 1-11 7.4l-2.2-1a.7.7 0 0 1 0-1.3l6-2.5a.7.7 0 0 1 1 .8l-1.6 6.3a.7.7 0 0 1-1.2.2L5.7 12A9.2 9.2 0 1 0 16 6.8V4z"/><path fill="%23ffffff" d="M14.6 9.6h2.6v6.9l4.8 2.8-1.3 2.2-6.1-3.5z"/></svg>');
}
.btn-rever .rever-texto {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    font-family: "montserrat-bold";
}

/* --------------------------------------------------- nivel 1: sólo el eje */
/* Tras un salto no se abre el archivo entero: se enseña la linea de tiempo y se
 * retira sola. Sea cual sea la forma elegida para el panel, este nivel usa
 * siempre la franja: es una tira fina sobre el video, no una pantalla. */

#dvr-panel.solo-eje #dvr-cabecera,
#dvr-panel.solo-eje #dvr-vistas,
#dvr-panel.solo-eje #dvr-tira,
#dvr-panel.solo-eje #dvr-vacio { display: none; }

#dvr-panel.solo-eje #dvr-fondo {
    top: 432px;
    background: linear-gradient(0deg,
        rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,.93) 56%,
        rgba(0,0,0,.85) 78%, rgba(0,0,0,.40) 93%, rgba(0,0,0,0) 100%);
}
#dvr-panel.solo-eje #dvr-eje    { left: 56px; right: 56px; top: 496px; }
#dvr-panel.solo-eje #dvr-eje-cab { display: block; }
#dvr-panel.solo-eje #dvr-programa { max-width: 880px; font-size: 24px; }

/* ------------------------------------------------- miniatura que no llega */
/* Un rectangulo negro liso se lee como una baldosa rota a tres metros. Cuando
 * el origen no da fotograma -y no siempre lo da-, la tarjeta dice de que
 * capitulo es en vez de parecer que fallo algo. */
.dvr-cap-mini.sin-imagen {
    background-color: #16212b;
    background-image: linear-gradient(135deg,
        rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%);
    position: relative;
}
.dvr-cap-mini.sin-imagen:after {
    content: attr(data-hora);
    position: absolute;
    left: 0; right: 0; top: 50%;
    margin-top: -13px;
    text-align: center !important;
    font-family: "montserrat-bold", "Montserrat", sans-serif;
    font-size: 26px;
    line-height: 26px;
    color: rgba(255,255,255,.26);
    letter-spacing: .04em;
}
.forma-lateral .dvr-cap-mini.sin-imagen:after { font-size: 17px; line-height: 17px; margin-top: -9px; }

/* --------------------------------------------------------- carro por forma */
/* En la franja las tarjetas van en una fila que se desplaza en X. En lateral y
 * en completa se apilan, asi que el carro deja de ser una linea. */

.forma-lateral  #dvr-carro { white-space: normal; width: 424px; }
.forma-completa #dvr-carro { white-space: normal; width: 1220px; }

/* ------------------------------------------- el preview de la linea de tiempo */
/* Un fotograma del archivo bajo el cabezal mientras se recorre el eje.
 *
 * Solo en el nivel 1 -la linea de tiempo sola-, que es cuando las flechas son
 * del eje. En el panel entero las flechas mueven la fila de capitulos, y ahi
 * ademas no cabe: la cabecera esta justo encima del eje.
 *
 * 264x152 con borde: dentro caben los 256x144 de la imagen, que es la cuarta
 * parte del 640x360 que sirve Flussonic. Sin sombra -la app la prohibe-, asi
 * que se despega del video con un anillo oscuro, igual que el cabezal.
 *
 * La posicion la escribe pintarEje() en pixeles y NO se anima: el cabezal glisa
 * entre tics, pero una caja de este tamano persiguiendo al cabezal se lee como
 * que la interfaz va lenta. Aterriza. */

#dvr-preview {
    display: none;
    position: absolute;
    width: 264px;
    height: 152px;
    margin-left: -132px;          /* centrada sobre el cabezal */
    border: 4px solid rgba(0, 0, 0, .55);
    border-radius: 10px;
    background-color: #16212b;
    overflow: hidden;
}
/* Se dibuja cuando hay imagen de verdad, no antes: una caja vacia sobre el
 * video es peor que ninguna caja. */
#dvr-panel.solo-eje #dvr-preview.hay { display: block; }
/* Por ENCIMA de la cabecera del eje, no sobre ella: a 376 la caja se comia el
 * titulo del programa, que en este nivel vive en 496..528. Abajo queda a 12 px
 * del titulo y arriba se sale del velo -que empieza en 432-, pero da igual:
 * la caja es opaca y trae su propio anillo. */
#dvr-panel.solo-eje #dvr-preview { top: 332px; }

/* Canal sin guia: el panel se queda abierto -no hay fila de capitulos que
 * enseñar, solo el eje y el texto que explica el retroceso- y ◀▶ ya recorren
 * el eje. Ahi arriba esta la cabecera, asi que la caja va DEBAJO del eje, en
 * el hueco donde vive el texto del vacio. */
#dvr-panel #dvr-preview.hay.bajo { display: block; top: 470px; }

#dvr-preview-img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------- la fila de capitulos asomada */
/* Al pulsar "Volver a ver" manda la LINEA DE TIEMPO y la fila se queda abajo
 * enseñando solo el filo de las tarjetas: dice que hay algo ahi sin robarle la
 * pantalla al eje. ▼ la despliega entera; ▲ vuelve a este estado.
 *
 * La pagina es la misma que con el panel abierto -misma cabecera, mismo eje,
 * mismas medidas-: lo unico que cambia es cuanto se ve de la fila. Por eso NO se
 * usa `solo-eje`, que mueve el eje a 496 y esconde todo lo demas; ese sigue
 * siendo el estado del eje que sale solo tras un salto. */

/* La fila ASOMA DESDE ABAJO: pegada al borde inferior de la pantalla, no
 * recortada donde estaba.
 *
 * Esto es lo que costó tres intentos. Recortar la tira en su sitio -456, con la
 * tarjeta cortada a media miniatura- dejaba 188 px de nada por debajo, y daba
 * igual lo que se hiciera con el velo: negro opaco tapando vídeo, o vídeo con la
 * fila flotando en mitad de la pantalla. Las dos cosas se leen como un fallo.
 *
 * Asomando desde el borde, la tarjeta se corta contra el filo de la pantalla,
 * que es el gesto de toda la vida para decir "aquí abajo hay más": no hay corte
 * que explicar ni hueco que rellenar.
 *
 * 644 = 720 - 76. La tarjeta mide 152, así que se ve justo la mitad de arriba:
 * media miniatura, sin llegar al bloque de texto. */
#dvr-panel.asomada #dvr-tira { top: 644px; height: 76px; }

/* Las pestañas cuelgan a 624, debajo de la fila entera: con la fila recortada
 * quedarian flotando en mitad de la nada. Se llega a ellas bajando dos veces. */
#dvr-panel.asomada #dvr-vistas { display: none; }

/* Que se vea que el que manda es el eje. La app pinta el foco con un borde
 * blanco de 4 px, pero aqui lo que se mueve es el cabezal: se le da altura en
 * vez de anillo, que sobre una pista de 10 px se lee mejor a tres metros.
 * Vale tambien para el eje suelto. */
#dvr-panel.asomada  #dvr-cabeza,
#dvr-panel.solo-eje #dvr-cabeza { top: -11px; height: 32px; }
/* ...salvo cuando el que manda es el boton: entonces el anillo blanco lo lleva
 * el, y el cabezal vuelve a su tamaño. Dos cosas marcadas a la vez no se leen ni
 * una. Va DESPUES de la regla de arriba a proposito: misma especificidad, gana
 * la ultima. */
#dvr-panel.en-boton #dvr-cabeza { top: -7px; height: 24px; }

/* El fotograma va ARRIBA DEL TODO: debajo estan la cabecera (306) y el eje
 * (342), y encima no hay nada mas que video. Queda lejos del cabezal, pero es
 * el unico sitio donde no tapa algo que hace falta. */
#dvr-panel.asomada #dvr-preview.hay { display: block; top: 330px; }

/* Y el bloque del eje BAJA hasta quedar pegado a la fila.
 *
 * Con la cabecera en 306 y el eje en 342 quedaban 208 px de negro opaco entre el
 * eje y la fila: nada que leer y encima tapando video. Bajandolo, el panel se
 * lee como un tercio inferior de toda la vida -video limpio arriba; abajo canal,
 * programa, linea de tiempo y la fila asomando- y no sobra ni un hueco.
 *
 * Las medidas salen de encajar hacia arriba desde la fila, conservando los
 * mismos aires que tiene el panel entero:
 *
 *     fila            644
 *     horas       602..624   (20 px hasta la fila, los mismos que arriba)
 *     pista       580..590
 *     programa    530..562
 *     cabecera    494        (36 px por encima del eje, como en el panel entero)
 */
#dvr-panel.asomada #dvr-cabecera { top: 494px; }
#dvr-panel.asomada #dvr-eje      { top: 530px; }

/* El velo acompaña: empieza a 430 para que la cabecera tenga respaldo y deja el
 * resto de la pantalla al video. Sigue llegando abajo del todo, que es donde
 * esta la fila. */
#dvr-panel.asomada #dvr-fondo {
    top: 430px;
    background: linear-gradient(0deg,
        rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,.97) 72%,
        rgba(0,0,0,.92) 84%, rgba(0,0,0,.45) 94%, rgba(0,0,0,0) 100%);
}

/* ------------------------------------------------ la pastilla "en vivo"
 *
 * La app la dibuja con ANCHO FIJO pensado para "Live": 46 px en la barra del
 * canal y 53 px en la tarjeta de la guia. Con las traducciones (i18n-fix.js)
 * dice "En vivo" / "Ao vivo" y el texto blanco se salia del rojo: medido en
 * Chromium, 49 px de texto en una caja de 46.
 *
 * No se fija otro ancho: `montserrat-bold` no esta declarada como fuente, asi
 * que cada aparato la pinta con su sans-serif y el ancho del texto cambia de un
 * televisor a otro. La caja crece con el texto y conserva de minimo el ancho de
 * antes, para que "Live" se vea igual que siempre. */
.current-program .live-indicator {
    width: auto;
    min-width: 46px;
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
    text-align: center;
}

/* En la barra la pastilla va anclada a la derecha (right:18px) y crece hacia
 * la izquierda, hacia el titulo. El titulo ocupaba el 84 % y le dejaba 12 px
 * de holgura; con el 80 % quedan ~24 px, sitio para "Ao vivo" con una fuente
 * mas ancha que la de Chromium. El titulo largo sigue cortandose con puntos
 * suspensivos, solo que unos caracteres antes. */
.current-program .program-title {
    width: 80%;
}

.guide-controls .programs .program-card .program-info .live-indicator {
    width: auto;
    min-width: 53px;
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
}