/* controles.css — los controles del reproductor v1 (spec SoulTV-player-controls-spec.md,
 * Figma «v1·01 … v1·10»). Lienzo 1280x720 nativo: las medidas son las del Figma, 1:1.
 *
 * Reglas del parque que mandan aquí (ver dvr.css):
 *   - Sin var(): Chromium 38 / WebKit 538 se quedan sin estilos.
 *   - Sin gap en flex, sin inset, sin aspect-ratio, sin backdrop-filter.
 *   - La app impone `* { box-shadow: none !important }` y `* { color: #fff }`:
 *     el brillo del foco es un degradado radial en un elemento aparte y todo
 *     color de texto se escribe.
 *   - Sólo se anima transform y opacity.
 *
 * Tokens (spec §9), literales:
 *   #FFFFFF texto · #C2CCD4 texto apagado · #0A0D12 icono sobre foco
 *   #FF3B40 AO VIVO · #216D90 cabezal en directo / acento SoulTV · #122130 botón SoulTV
 */

/* -------------------------------------------------------------- tipografía */
/* Montserrat en los cinco pesos del spec. Regular y Bold son los .otf que la app
 * ya auto-aloja; Medium, SemiBold y ExtraBold van recortados a latín (WOFF, ~16 KB). */
@font-face { font-family: "ctl-montserrat"; font-weight: 400; font-style: normal;
             src: url("/assets/fonts/Montserrat-Regular.otf"); }
@font-face { font-family: "ctl-montserrat"; font-weight: 500; font-style: normal;
             src: url("/assets/fonts/Montserrat-Medium.woff") format("woff"); }
@font-face { font-family: "ctl-montserrat"; font-weight: 600; font-style: normal;
             src: url("/assets/fonts/Montserrat-SemiBold.woff") format("woff"); }
@font-face { font-family: "ctl-montserrat"; font-weight: 700; font-style: normal;
             src: url("/assets/fonts/Montserrat-Bold.otf"); }
@font-face { font-family: "ctl-montserrat"; font-weight: 800; font-style: normal;
             src: url("/assets/fonts/Montserrat-ExtraBold.woff") format("woff"); }

/* ------------------------------------------------------------------- capa */
/* z-index 44: sobre el vídeo, la transición del zapping (29) y el OSD (30);
 * debajo del panel del archivo (45), que es la fila de «Programação». */
#ctl {
    position: absolute;
    z-index: 44;
    left: 0; top: 0;
    width: 1280px; height: 720px;
    overflow: hidden;
    pointer-events: none;
    font-family: "ctl-montserrat", "montserrat-regular", sans-serif;
    font-weight: 500;
    color: #ffffff;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .18s ease-out, visibility 0s linear .18s;
    transition: opacity .18s ease-out, visibility 0s linear .18s;
}
#ctl.visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .12s ease-out;
    transition: opacity .12s ease-out;
}
/* La app declara `*{font-family:"montserrat-light"}`: el universal gana a la
 * herencia, así que la familia se repite en cada descendiente (el peso sí se
 * hereda). Visto en la LG 2022: todo salía en Light. */
#ctl * { text-align: left; font-style: normal; font-family: "ctl-montserrat", "montserrat-regular", sans-serif; }
#ctl i, #ctl b, #ctl span { display: block; }

/* Todo lo que depende del estado arranca oculto y cada estado enciende lo suyo. */
#ctl-velo, #ctl-cab, #ctl-sig, #ctl-barra, #ctl-fila, #ctl-mini, #ctl-ayudas,
#ctl-inicio, #ctl-pausa-grande { display: none; }

/* ------------------------------------------------------------- velo */
/* spec §9: transparente → negro 72 % al 38 % → negro 96 %, desde y 300. */
#ctl-velo {
    position: absolute;
    left: 0; width: 1280px;
    top: 300px; height: 420px;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.96) 100%);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.96) 100%);
}

/* -------------------------------------------------------------- cabecera */
#ctl-cab {
    position: absolute;
    left: 56px; top: 392px;
    width: 1000px;
}
#ctl-cab-fila { position: relative; height: 30px; white-space: nowrap; }
#ctl-logo {
    position: absolute; left: 0; top: 0;
    width: 52px; height: 30px;
    border-radius: 8px;
    background-color: rgba(255,255,255,.14);
    overflow: hidden;
}
#ctl-logo-img {
    position: absolute; left: 4px; top: 3px;
    width: 44px; height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#ctl-logo-n {
    position: absolute; left: 0; top: 5px; width: 52px;
    text-align: center !important;
    font-weight: 700; font-size: 17px; line-height: 21px;
    color: #ffffff;
}
#ctl-canal-y-chip { position: absolute; left: 64px; top: 0; height: 30px; white-space: nowrap; }
#ctl-canal {
    display: inline-block !important;
    vertical-align: top;
    margin-top: 6px;
    max-width: 420px;
    overflow: hidden; text-overflow: ellipsis;
    font-weight: 600; font-size: 17px; line-height: 21px;
    color: rgba(255,255,255,.85);
}
/* La insignia de estado: Bold 14, espaciado 6 %, radio 6. */
#ctl-chip {
    display: inline-block !important;
    vertical-align: top;
    margin: 2px 0 0 21px;
    height: 27px;
    padding: 5px 13px 5px 12px;
    border-radius: 6px;
    background-color: rgba(255,255,255,.16);
    font-weight: 700; font-size: 14px; line-height: 17px;
    letter-spacing: .84px;
    color: #ffffff;
    white-space: nowrap;
    box-sizing: border-box;
}
#ctl-chip.vivo { background-color: #ff3b40; padding-left: 11px; }
#ctl-chip-punto {
    display: none !important;
    width: 8px; height: 8px;
    margin: 4.5px 8px 0 0;
    border-radius: 50%;
    background-color: #ffffff;
    float: left;
}
#ctl-chip.vivo #ctl-chip-punto { display: block !important; }
#ctl-chip-t { display: inline !important; }

#ctl-titulo {
    margin-top: 12px;
    max-width: 960px;
    height: 41px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 700; font-size: 34px; line-height: 41px;
    color: #ffffff;
}
#ctl.controles.cab-arriba #ctl-cab { top: 380px; }
#ctl.controles.cab-arriba #ctl-sig { top: 426px; }
/* inline-block: su ancho es el del texto (controles.js lo mide contra la burbuja). */
#ctl-meta {
    display: inline-block !important;
    vertical-align: top;
    margin-top: 5px;
    max-width: 1000px;
    overflow: hidden; text-overflow: ellipsis; white-space: pre;
    font-weight: 500; font-size: 16px; line-height: 20px;
    color: #c2ccd4;
}

/* «A SEGUIR · 12:00» / «DEPOIS · ONTEM 12:00» + título, alineado a la derecha. */
#ctl-sig {
    position: absolute;
    right: 56px; top: 438px;
    width: 420px;
}
#ctl-sig * { text-align: right !important; }
#ctl-sig-rot {
    font-weight: 600; font-size: 13px; line-height: 16px;
    letter-spacing: .78px;
    color: #c2ccd4;
    white-space: nowrap;
}
#ctl-sig-t {
    margin-top: 4px;
    font-weight: 600; font-size: 18px; line-height: 22px;
    color: #ffffff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- barra */
/* x(t) = 56 + 1168·(t − inicio)/(fin − inicio). El contenedor mide la pista:
 * todo lo de dentro se sitúa en px desde su izquierda. */
#ctl-barra {
    position: absolute;
    left: 56px; top: 538px;
    width: 1168px; height: 6px;
}
#ctl-barra i, #ctl-barra span { position: absolute; }

#ctl-pista {
    left: 0; top: 0; width: 1168px; height: 6px;
    border-radius: 3px;
    background-color: rgba(255,255,255,.10);
}
/* Aún no emitido: puntos 2x2 cada 12 px, blanco 30 %, con un fondo repetido
 * (nunca un nodo por punto). */
#ctl-futuro {
    top: 2px; height: 2px; left: 0; width: 0;
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,.30) 0, rgba(255,255,255,.30) 2px, rgba(255,255,255,0) 2px);
    background-image: linear-gradient(90deg, rgba(255,255,255,.30) 0, rgba(255,255,255,.30) 2px, rgba(255,255,255,0) 2px);
    background-size: 12px 2px;
    background-repeat: repeat-x;
}
#ctl-grabado {
    left: 0; top: 0; height: 6px; width: 0;
    border-radius: 3px;
    background-color: rgba(255,255,255,.32);
}
#ctl-visto {
    left: 0; top: 0; height: 6px; width: 0;
    border-radius: 3px;
    background-color: #ffffff;
}
/* Canal sin guía: el archivo sigue antes del borde izquierdo de la ventana. */
#ctl-previa {
    display: none !important;
    left: -44px; top: 2px; width: 38px; height: 2px;
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,.45) 0, rgba(255,255,255,.45) 4px, rgba(255,255,255,0) 4px);
    background-image: linear-gradient(90deg, rgba(255,255,255,.45) 0, rgba(255,255,255,.45) 4px, rgba(255,255,255,0) 4px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
}
#ctl-barra.sin-guia #ctl-previa.hay { display: block !important; }
/* Marcas cada 15 min (las horas, más altas), sólo sin guía. */
#ctl-marcas { left: 0; top: -12px; width: 1168px; height: 8px; display: none !important; }
#ctl-barra.sin-guia #ctl-marcas { display: block !important; }
#ctl-marcas i {
    top: 5px; width: 1px; height: 4px; margin-left: -.5px;
    background-color: rgba(255,255,255,.45);
}
#ctl-marcas i.hora { top: 0; height: 8px; background-color: rgba(255,255,255,.6); }

/* Borde del directo (sólo cuando no se está en él): rojo 3x20. */
#ctl-borde {
    display: none !important;
    left: 0; top: -7px; width: 3px; height: 20px;
    margin-left: -1.5px;
    border-radius: 1.5px;
    background-color: #ff3b40;
}
#ctl-borde-t {
    display: none !important;
    left: 0; top: 18px; width: 140px; margin-left: -70px;
    text-align: center !important;
    font-weight: 700; font-size: 13px; line-height: 16px;
    color: #ff3b40;
    white-space: nowrap;
}
#ctl-barra.con-borde #ctl-borde,
#ctl-barra.con-borde #ctl-borde-t { display: block !important; }
/* Sin guía el borde es el extremo derecho: el rótulo se alinea a la derecha. */
#ctl-barra.sin-guia #ctl-borde-t { margin-left: -140px; text-align: right !important; }

/* El fantasma: dónde empezó el arrastre. */
#ctl-fantasma {
    display: none !important;
    left: 0; top: -3px; width: 2px; height: 16px; margin-left: -1px;
    background-color: rgba(255,255,255,.55);
}

/* Cabezal. En AO VIVO: teal 18 + anillo blanco 3 + halo teal 30 % de 30. Si no:
 * blanco 20 (26 arrastrando). Se mueve con transform. */
#ctl-cabezal, #ctl-halo { left: 0; top: 0; }
#ctl-halo {
    width: 30px; height: 30px;
    margin: -12px 0 0 -15px;
    border-radius: 50%;
    background-color: rgba(33,109,144,.30);
    display: none !important;
}
#ctl-cabezal {
    width: 20px; height: 20px;
    margin: -7px 0 0 -10px;
    border-radius: 50%;
    background-color: #ffffff;
    box-sizing: border-box;
}
#ctl-barra.vivo #ctl-halo { display: block !important; }
#ctl-barra.vivo #ctl-cabezal {
    width: 24px; height: 24px;
    margin: -9px 0 0 -12px;
    border: 3px solid #ffffff;
    background-color: #216d90;
}

/* Burbuja de tiempo sobre el cabezal (fuera del directo). */
#ctl-burbuja {
    display: none !important;
    left: 0; top: -44px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background-color: #ffffff;
    white-space: nowrap;
    box-sizing: border-box;
}
#ctl-barra.con-burbuja #ctl-burbuja { display: block !important; }
#ctl-barra #ctl-burbuja b, #ctl-barra #ctl-burbuja span { position: static; }
#ctl-burbuja-h {
    display: inline-block !important;
    vertical-align: top;
    margin-top: 5px;
    font-weight: 700; font-size: 15px; line-height: 18px;
    color: #0a0d12;
    font-feature-settings: "tnum" 1; -webkit-font-feature-settings: "tnum" 1;
}
#ctl-burbuja-d {
    display: inline-block !important;
    vertical-align: top;
    margin: 6px 0 0 8px;
    font-weight: 600; font-size: 13px; line-height: 16px;
    color: rgba(10,13,18,.55);
    font-feature-settings: "tnum" 1; -webkit-font-feature-settings: "tnum" 1;
}

/* Rótulos bajo la barra: Medium 15 apagado; el del cabezal, Bold 15 blanco. */
#ctl-desde, #ctl-hasta, #ctl-medio, #ctl-ahora {
    top: 18px;
    font-weight: 500; font-size: 15px; line-height: 18px;
    color: #c2ccd4;
    white-space: nowrap;
    font-feature-settings: "tnum" 1; -webkit-font-feature-settings: "tnum" 1;
    -webkit-transition: opacity .15s ease; transition: opacity .15s ease;
}
#ctl-desde { left: 0; }
#ctl-hasta { right: 0; text-align: right !important; }
#ctl-medio { left: 0; width: 80px; margin-left: -40px; text-align: center !important; display: none !important; }
#ctl-barra.sin-guia #ctl-medio { display: block !important; }
#ctl-ahora {
    left: 0; width: 100px; margin-left: -50px;
    text-align: center !important;
    font-weight: 700; color: #ffffff;
    display: none !important;
}
#ctl-barra.con-ahora #ctl-ahora { display: block !important; }

/* La barra con el foco (y arrastrando): 10 px. */
#ctl-barra.foco #ctl-pista, #ctl-barra.foco #ctl-grabado, #ctl-barra.foco #ctl-visto {
    height: 10px; top: -2px; border-radius: 5px;
}
#ctl-barra.foco #ctl-futuro { top: 2px; }
#ctl.arrastre #ctl-barra #ctl-cabezal {
    width: 26px; height: 26px; margin: -10px 0 0 -13px;
}
#ctl.arrastre #ctl-barra #ctl-borde { top: -9px; height: 24px; }
#ctl.arrastre #ctl-fantasma.hay { display: block !important; }

/* ------------------------------------------------------ fila de botones */
#ctl-fila {
    position: absolute;
    left: 0; top: 588px;
    width: 1280px; height: 64px;
}
.ctl-b, .ctl-pill, .ctl-soul { position: absolute !important; }

/* Círculos: reposo blanco 12 %, icono blanco. Centros x 476/558/640/722/804. */
.ctl-b {
    top: 6px;
    width: 52px; height: 52px;
    margin-left: -26px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.12);
    -webkit-transition: background-color .12s ease, opacity .12s ease;
    transition: background-color .12s ease, opacity .12s ease;
}
.ctl-b.grande { top: 0; width: 64px; height: 64px; margin-left: -32px; }
.ctl-b[data-a="inicio"]  { left: 476px; }
.ctl-b[data-a="menos30"] { left: 558px; }
.ctl-b[data-a="pausa"]   { left: 640px; }
.ctl-b[data-a="mas30"]   { left: 722px; }
.ctl-b[data-a="vivo"]    { left: 804px; }

.ctl-b .ico, .ctl-pill .ico {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.ctl-b[data-a="inicio"] .ico { left: 14px; top: 14px; width: 24px; height: 24px;
                               background-image: url("/img/controles/icono-inicio.svg"); }
.ctl-b[data-a="menos30"] .ico { left: 11px; top: 10px; width: 30px; height: 30px;
                                background-image: url("/img/controles/icono-menos30.svg"); }
.ctl-b[data-a="mas30"] .ico { left: 11px; top: 10px; width: 30px; height: 30px;
                              background-image: url("/img/controles/icono-mas30.svg"); }
.ctl-b[data-a="pausa"] .ico { left: 17.5px; top: 17.5px; width: 29px; height: 29px;
                              background-image: url("/img/controles/icono-pausar.svg"); }
.ctl-b[data-a="pausa"].reproduzir .ico { background-image: url("/img/controles/icono-reproduzir.svg"); }
.ctl-b .n30 {
    position: absolute;
    left: 0; top: 22px; width: 52px;
    text-align: center !important;
    font-weight: 700; font-size: 9px; line-height: 11px;
    color: #ffffff;
}
.ctl-b[data-a="vivo"] .rojo {
    position: absolute;
    left: 17px; top: 17px; width: 18px; height: 18px;
    border-radius: 50%;
    background-color: #ff3b40;
}

/* Deshabilitado: opacidad 35 % y fuera del recorrido del foco. */
.ctl-b.off, .ctl-pill.off { opacity: .35; }
.ctl-b.no, .ctl-pill.no, .ctl-soul.no { display: none !important; }

/* Foco: relleno blanco 100 %, icono #0A0D12, brillo 0 0 24px rgba(255,255,255,.35)
 * (el brillo es #ctl-brillo, un degradado radial: sin box-shadow). */
.ctl-b.foco { background-color: #ffffff; }
.ctl-b.foco .n30 { color: #0a0d12; }
.ctl-b.foco[data-a="inicio"] .ico { background-image: url("/img/controles/icono-inicio-oscuro.svg"); }
.ctl-b.foco[data-a="menos30"] .ico { background-image: url("/img/controles/icono-menos30-oscuro.svg"); }
.ctl-b.foco[data-a="mas30"] .ico { background-image: url("/img/controles/icono-mas30-oscuro.svg"); }
.ctl-b.foco[data-a="pausa"] .ico { background-image: url("/img/controles/icono-pausar-oscuro.svg"); }
.ctl-b.foco[data-a="pausa"].reproduzir .ico { background-image: url("/img/controles/icono-reproduzir-oscuro.svg"); }

/* «Programação»: píldora de 48, radio 24, alineada a la derecha (acaba en x 1164). */
.ctl-pill {
    top: 8px; right: 116px;
    height: 48px;
    padding: 0 22px 0 18px;
    border-radius: 24px;
    background-color: rgba(255,255,255,.12);
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-transition: background-color .12s ease; transition: background-color .12s ease;
}
.ctl-pill .ico {
    position: relative !important;
    display: inline-block !important;
    vertical-align: top;
    margin-top: 13px;
    width: 22px; height: 22px;
    background-image: url("/img/controles/icono-programacao.svg");
}
.ctl-pill .t {
    display: inline-block !important;
    vertical-align: top;
    margin: 13.5px 0 0 10px;
    font-weight: 600; font-size: 17px; line-height: 21px;
    color: #ffffff;
}
.ctl-pill.foco { background-color: #ffffff; }
.ctl-pill.foco .t { color: #0a0d12; }
.ctl-pill.foco .ico { background-image: url("/img/controles/icono-programacao-oscuro.svg"); }

/* SoulTV: círculo navy de 48 (x 1176). Con foco conserva el navy y lleva anillo
 * blanco + brillo (excepción de la pantalla 10). */
.ctl-soul {
    top: 8px; left: 1176px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background-color: #122130;
    box-sizing: border-box;
}
.ctl-soul.foco { border: 3px solid #ffffff; }
.ctl-soul .s1, .ctl-soul .s2 {
    position: absolute;
    left: 0; width: 100%;
    text-align: center !important;
    color: #ffffff;
    white-space: nowrap;
}
.ctl-soul .s1 { top: 12px; font-weight: 800; font-size: 12px; line-height: 15px; }
.ctl-soul .s2 { top: 27px; font-weight: 700; font-size: 10px; line-height: 12px; }
.ctl-soul .ln {
    position: absolute;
    left: 14px; top: 26px; width: 20px; height: 1.5px;
    background-color: #ffffff;
}
.ctl-soul.foco .s1 { top: 9px; }
.ctl-soul.foco .s2 { top: 24px; }
.ctl-soul.foco .ln { left: 11px; top: 23px; }

#ctl-brillo {
    position: absolute;
    left: 0; top: 0;
    width: 100px; height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    background: -webkit-radial-gradient(center, circle closest-side, rgba(255,255,255,.35) 0%, rgba(255,255,255,.18) 55%, rgba(255,255,255,0) 100%);
    background: radial-gradient(circle closest-side, rgba(255,255,255,.35) 0%, rgba(255,255,255,.18) 55%, rgba(255,255,255,0) 100%);
    opacity: 0;
    -webkit-transition: opacity .12s ease; transition: opacity .12s ease;
}
#ctl-brillo.hay { opacity: 1; }

/* ------------------------------------------------- icono de pausa grande */
#ctl-pausa-grande {
    position: absolute;
    left: 596px; top: 156px;
    width: 88px; height: 88px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.45);
}
#ctl-pausa-grande i {
    position: absolute; left: 20px; top: 20px; width: 48px; height: 48px;
    background: url("/img/controles/icono-pausar.svg") center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------ ESTADOS */

/* CONTROLES (pantallas 01, 02, 05, 07, 10) */
#ctl.controles #ctl-velo, #ctl.controles #ctl-cab, #ctl.controles #ctl-barra,
#ctl.controles #ctl-fila { display: block; }
#ctl.controles #ctl-sig.hay { display: block; }
#ctl.controles.pausado #ctl-pausa-grande,
#ctl.arrastre.pausado #ctl-pausa-grande { display: block; }

/* ARRASTRE (pantalla 03): velo desde 120, cabecera arriba, barra de 10 px,
 * miniatura y ayudas; sin fila de botones. */
#ctl.arrastre #ctl-velo { display: block; top: 120px; height: 600px; }
#ctl.arrastre #ctl-cab { display: block; top: 182px; }
#ctl.arrastre #ctl-barra { display: block; }
#ctl.arrastre #ctl-desde, #ctl.arrastre #ctl-hasta, #ctl.arrastre #ctl-borde-t,
#ctl.arrastre #ctl-medio { top: 22px; }
#ctl.arrastre #ctl-mini.hay { display: block; }
#ctl.arrastre #ctl-ayudas { display: block; }
#ctl.arrastre #ctl-burbuja { display: none !important; }
#ctl.arrastre #ctl-pausa-grande { top: 40px; }

/* Miniatura del arrastre: 288x162 + pie de 44, con puntero. */
#ctl-mini {
    position: absolute;
    left: 0; top: 316px;
    width: 288px; height: 206px;
    border-radius: 8px;
    background-color: #0a0d12;
    overflow: visible;
}
#ctl-mini-foto {
    position: absolute; left: 0; top: 0;
    width: 288px; height: 162px;
    border-radius: 8px 8px 0 0;
    background-color: #16212b;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
#ctl-mini-foto-t {
    position: absolute; left: 0; top: 68px; width: 288px;
    text-align: center !important;
    font-weight: 700; font-size: 22px; line-height: 26px;
    color: rgba(255,255,255,.26);
}
#ctl-mini-foto.con-foto #ctl-mini-foto-t { display: none; }
#ctl-mini-h {
    position: absolute; left: 12px; top: 173px;
    font-weight: 700; font-size: 17px; line-height: 21px;
    color: #ffffff;
    font-feature-settings: "tnum" 1; -webkit-font-feature-settings: "tnum" 1;
}
#ctl-mini-d {
    position: absolute; right: 12px; top: 175px;
    text-align: right !important;
    font-weight: 600; font-size: 14px; line-height: 17px;
    color: #c2ccd4;
    white-space: nowrap;
    font-feature-settings: "tnum" 1; -webkit-font-feature-settings: "tnum" 1;
}
#ctl-mini-puntero {
    position: absolute; left: 136px; top: 206px;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #0a0d12;
}

/* Ayudas de teclas: y 626. */
#ctl-ayudas {
    position: absolute;
    left: 56px; top: 626px;
    height: 26px;
    white-space: nowrap;
}
.ctl-ayuda {
    display: inline-block !important;
    vertical-align: top;
    margin-right: 32px;
    height: 26px;
}
.ctl-tecla {
    display: inline-block !important;
    vertical-align: top;
    height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    background-color: rgba(255,255,255,.14);
    box-sizing: border-box;
    font-weight: 700; font-size: 14px; line-height: 26px;
    letter-spacing: .5px;
    color: #ffffff;
}
.ctl-ayuda-t {
    display: inline-block !important;
    vertical-align: top;
    margin-left: 10px;
    font-weight: 500; font-size: 15px; line-height: 26px;
    color: #c2ccd4;
}

/* ASSISTIR DO INÍCIO (pantalla 04): cabecera baja a 472, mini barra de 464. */
#ctl.inicio #ctl-velo { display: block; top: 380px; height: 340px; }
#ctl.inicio #ctl-cab { display: block; top: 472px; width: 680px; }
#ctl.inicio #ctl-titulo { max-width: 660px; }
#ctl.inicio #ctl-meta { max-width: 660px; }
#ctl.inicio #ctl-inicio { display: block; }

#ctl-inicio { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; }
#ctl-inicio i, #ctl-inicio span, #ctl-inicio b { position: absolute; }
#ctl-ini-barra { left: 56px; top: 596px; width: 464px; height: 4px; }
#ctl-ini-pista { left: 0; top: 0; width: 464px; height: 4px; border-radius: 2px; background-color: rgba(255,255,255,.10); }
#ctl-ini-grabado { left: 0; top: 0; height: 4px; width: 0; border-radius: 2px; background-color: rgba(255,255,255,.32); }
#ctl-ini-futuro {
    top: 1px; height: 2px; left: 0; width: 0;
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,.30) 0, rgba(255,255,255,.30) 2px, rgba(255,255,255,0) 2px);
    background-image: linear-gradient(90deg, rgba(255,255,255,.30) 0, rgba(255,255,255,.30) 2px, rgba(255,255,255,0) 2px);
    background-size: 10px 2px; background-repeat: repeat-x;
}
#ctl-ini-cabezal {
    left: 0; top: -4px; width: 12px; height: 12px; margin-left: -6px;
    border-radius: 50%;
    background-color: #216d90;
    border: 2px solid #ffffff;
    box-sizing: border-box;
}
/* La pregunta, la cuenta y el anillo en una línea alineada a la derecha (x 1224),
 * y los dos botones debajo: en línea, para que el largo de cada idioma empuje
 * en vez de pisar. En portugués caen donde el Figma (754–983 y 997–1224). */
#ctl-ini-linea, #ctl-ini-botones {
    position: absolute;
    right: 56px;
    white-space: nowrap;
    text-align: right !important;
}
#ctl-ini-linea { top: 510px; height: 22px; }
#ctl-ini-botones { top: 544px; height: 52px; }
#ctl-inicio #ctl-ini-linea span, #ctl-inicio #ctl-ini-linea > i,
#ctl-inicio #ctl-ini-botones > span { position: relative; display: inline-block !important; vertical-align: top; }
#ctl-ini-pregunta {
    margin-top: 2px;
    font-weight: 600; font-size: 15px; line-height: 18px;
    color: #ffffff;
}
#ctl-ini-cuenta {
    margin: 2px 0 0 20px;
    font-weight: 500; font-size: 14px; line-height: 17px;
    color: #c2ccd4;
    font-feature-settings: "tnum" 1; -webkit-font-feature-settings: "tnum" 1;
}
/* El anillo de la cuenta atrás de 8 s. Se vacía en sentido horario con la técnica
 * de las dos mitades recortadas (clip: rect, que entiende Chromium 38): cada
 * mitad lleva un medio anillo que gira fuera de su ventana. Sólo transform. */
#ctl-ini-anillo {
    margin-left: 10px; width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.18);
    box-sizing: border-box;
}
#ctl-ini-anillo .der, #ctl-ini-anillo .izq {
    left: -2px; top: -2px; width: 22px; height: 22px;
}
#ctl-ini-anillo .der { clip: rect(0, 22px, 22px, 11px); }
#ctl-ini-anillo .izq { clip: rect(0, 11px, 22px, 0); }
#ctl-ini-anillo .media {
    left: 0; top: 0; width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-sizing: border-box;
}
/* La media de la derecha vive en la mitad izquierda y gira hacia la derecha (y
 * al revés): con 180° la mitad se ve entera; con 0°, nada. */
#ctl-ini-anillo .der .media { clip: rect(0, 11px, 22px, 0);   -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#ctl-ini-anillo .izq .media { clip: rect(0, 22px, 22px, 11px); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
/* Primero se vacía la mitad derecha (de las 12 a las 6) y después la izquierda. */
#ctl-ini-anillo.corre .der .media { -webkit-animation: ctl-der 8s linear forwards; animation: ctl-der 8s linear forwards; }
#ctl-ini-anillo.corre .izq .media { -webkit-animation: ctl-izq 8s linear forwards; animation: ctl-izq 8s linear forwards; }
@-webkit-keyframes ctl-der { 0% { -webkit-transform: rotate(180deg) } 50% { -webkit-transform: rotate(360deg) } 100% { -webkit-transform: rotate(360deg) } }
@keyframes ctl-der { 0% { transform: rotate(180deg) } 50% { transform: rotate(360deg) } 100% { transform: rotate(360deg) } }
@-webkit-keyframes ctl-izq { 0% { -webkit-transform: rotate(180deg) } 50% { -webkit-transform: rotate(180deg) } 100% { -webkit-transform: rotate(360deg) } }
@keyframes ctl-izq { 0% { transform: rotate(180deg) } 50% { transform: rotate(180deg) } 100% { transform: rotate(360deg) } }

.ctl-ini-b {
    height: 52px;
    border-radius: 26px;
    background-color: rgba(255,255,255,.12);
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-transition: background-color .12s ease; transition: background-color .12s ease;
}
#ctl-ini-vivo { padding: 0 24px 0 42px; }
#ctl-ini-desde { margin-left: 14px; padding: 0 24px 0 52px; }
#ctl-inicio .ctl-ini-b .p, #ctl-inicio .ctl-ini-b .ico { position: absolute; }
.ctl-ini-b .t {
    position: relative !important;
    display: inline-block !important;
    margin-top: 15px;
    font-weight: 600; font-size: 18px; line-height: 22px;
    color: #ffffff;
}
#ctl-ini-vivo .p {
    left: 20px; top: 20px; width: 12px; height: 12px;
    border-radius: 50%;
    background-color: #ff3b40;
}
#ctl-ini-desde .ico {
    left: 20px; top: 15px; width: 22px; height: 22px;
    background: url("/img/controles/icono-inicio.svg") center / 100% 100% no-repeat;
}
.ctl-ini-b.foco { background-color: #ffffff; }
.ctl-ini-b.foco .t { color: #0a0d12; }
#ctl-ini-desde.foco .ico { background-image: url("/img/controles/icono-inicio-oscuro.svg"); }

/* Aviso breve (fuera del archivo). */
#ctl-aviso {
    position: absolute;
    left: 50%; top: 80px;
    width: 560px; margin-left: -280px;
    padding: 12px 20px;
    border-radius: 8px;
    background-color: rgba(10,13,18,.88);
    text-align: center !important;
    font-weight: 600; font-size: 17px; line-height: 22px;
    color: #ffffff;
    opacity: 0;
    -webkit-transition: opacity .2s ease; transition: opacity .2s ease;
}
#ctl-aviso.hay { opacity: 1; }

/* ------------------------------------------- la app con los controles v1 */
/* La barra del canal queda en su forma mínima (canal + logo SoulTV flotante):
 * la guía, «Volver a ver» y el programa en curso ya están en los controles. */
body.controles-v1 .menu-container .btn-channel,
body.controles-v1 .menu-container .btn-rever,
body.controles-v1 .menu-container .elements-container { display: none !important; }

/* ------------------------------ la fila de «Programação» (pantalla 06) */
/* Es el panel del archivo de dvr.js en forma franja. Aquí sólo se acerca a la
 * pantalla 06: sin «Ver desde o início» ni pestañas, pista de 6 px con los
 * mismos tonos de la barra de los controles y cabezal teal en directo. */
body.controles-v1 #dvr-panel { font-family: "ctl-montserrat", "montserrat-regular", sans-serif; }
body.controles-v1 #dvr-inicio,
body.controles-v1 #dvr-vistas { display: none !important; }
body.controles-v1 #dvr-canal { font-family: "ctl-montserrat", "montserrat-bold", sans-serif; font-weight: 700; font-size: 22px; }
body.controles-v1 #dvr-cobertura { font-weight: 500; color: #c2ccd4; }
body.controles-v1 #dvr-programa { font-family: "ctl-montserrat", "montserrat-bold", sans-serif; font-weight: 700; font-size: 26px; max-width: 1000px; }
body.controles-v1 #dvr-eje-cab { margin-bottom: 20px; }
body.controles-v1 #dvr-estado {
    top: 3px;
    padding: 4px 12px 4px 12px;
    border-radius: 6px;
    background-color: rgba(255,255,255,.16);
    font-family: "ctl-montserrat", "montserrat-bold", sans-serif; font-weight: 700;
    font-size: 14px; line-height: 18px; letter-spacing: .84px;
}
body.controles-v1 #dvr-estado.vivo { background-color: #ff3b40; }
body.controles-v1 #dvr-estado * { font-family: "ctl-montserrat", "montserrat-bold", sans-serif; font-weight: 700; }
/* La pista lleva los puntos de «aún no emitido» de fondo: lo emitido (blanco) los tapa. */
body.controles-v1 #dvr-pista {
    height: 6px; border-radius: 3px;
    background-color: rgba(255,255,255,.10);
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,.30) 0, rgba(255,255,255,.30) 2px, rgba(255,255,255,0) 2px);
    background-image: linear-gradient(90deg, rgba(255,255,255,.30) 0, rgba(255,255,255,.30) 2px, rgba(255,255,255,0) 2px);
    background-size: 12px 2px;
    background-position: 0 2px;
    background-repeat: repeat-x;
}
body.controles-v1 .dvr-cap-rep { display: none !important; }
body.controles-v1 #dvr-grabado { border-radius: 3px; background-color: #ffffff; }
body.controles-v1 #dvr-nograbado { border-radius: 3px 0 0 3px; }
body.controles-v1 #dvr-borde { top: -7px; background-color: #ff3b40; }
/* Cabezal: blanco de 20 fuera del directo; en el directo teal 18 + anillo blanco. */
body.controles-v1 #dvr-cabeza {
    top: -7px;
    width: 20px; height: 20px; margin-left: -10px;
    border: 0;
    border-radius: 50%;
    background-color: #ffffff;
    box-sizing: border-box;
}
body.controles-v1 #dvr-cabeza.vivo {
    top: -9px;
    width: 24px; height: 24px; margin-left: -12px;
    border: 3px solid #ffffff;
    background-color: #216d90;
}
body.controles-v1 #dvr-horas { margin-top: 14px; font-weight: 500; font-size: 17px; color: #c2ccd4; }
body.controles-v1 #dvr-ahora { font-family: "ctl-montserrat", "montserrat-bold", sans-serif; font-weight: 700; }
body.controles-v1 .dvr-cap { border-radius: 8px; }
body.controles-v1 .dvr-cap.focus-item-keyboard { border-color: #ffffff; background-color: #132835; }
body.controles-v1 .dvr-cap-mini { border-radius: 6px 6px 0 0; }
body.controles-v1 .dvr-cap-e { border-radius: 4px; font-family: "ctl-montserrat", "montserrat-bold", sans-serif; font-weight: 700; }
body.controles-v1 .dvr-cap-e.vivo { background-color: #ff3b40; }