/*
 * Interfaz para televisor (Android TV / Fire TV).
 *
 * Se ve a tres metros y se maneja con un mando, así que aquí manda una regla:
 * en todo momento tiene que verse SIN DUDA qué elemento está seleccionado.
 * Todo cuelga de html.vn-tv, que solo añade tv-remote.js en televisores, de modo
 * que el teléfono y el PC quedan intactos.
 */

html.vn-tv {
    /* Margen de seguridad: muchos televisores recortan los bordes de la imagen. */
    --tv-safe-x: 3.5%;
    --tv-safe-y: 1.5rem;
    font-size: 18px;
}

html.vn-tv,
html.vn-tv * {
    /* Modo foco (app TV): no hay puntero. En modo puntero se anula más abajo. */
    cursor: none !important;
    -webkit-user-select: none;
    user-select: none;
}

/*
 * Navegador del televisor (Samsung, LG, etc.): las flechas mueven el cursor
 * del propio navegador. Hay que verlo y permitir hover/clic como en el PC.
 */
html.vn-tv.vn-tv-pointer,
html.vn-tv.vn-tv-pointer * {
    cursor: auto !important;
    -webkit-user-select: none;
    user-select: none;
}

html.vn-tv.vn-tv-pointer a,
html.vn-tv.vn-tv-pointer button,
html.vn-tv.vn-tv-pointer .poster-card,
html.vn-tv.vn-tv-pointer .live-card,
html.vn-tv.vn-tv-pointer .live-channel-tile,
html.vn-tv.vn-tv-pointer .live-playlist-tile,
html.vn-tv.vn-tv-pointer .episode-row,
html.vn-tv.vn-tv-pointer .profile-card,
html.vn-tv.vn-tv-pointer .nav-link,
html.vn-tv.vn-tv-pointer .nav-account-trigger,
html.vn-tv.vn-tv-pointer .nav-account-dropdown-item,
html.vn-tv.vn-tv-pointer .btn-red,
html.vn-tv.vn-tv-pointer .player-ctl-btn,
html.vn-tv.vn-tv-pointer .player-lang-btn,
html.vn-tv.vn-tv-pointer .row-carousel-btn {
    cursor: pointer !important;
}

html.vn-tv input,
html.vn-tv textarea,
html.vn-tv .navbar-search-input {
    -webkit-user-select: text !important;
    user-select: text !important;
    cursor: text !important;
}

html.vn-tv.vn-tv-pointer input,
html.vn-tv.vn-tv-pointer textarea,
html.vn-tv.vn-tv-pointer .navbar-search-input {
    cursor: text !important;
}

html.vn-tv .navbar-search-toggle,
html.vn-tv .navbar-search-close {
    width: 2.8rem;
    height: 2.8rem;
}

html.vn-tv .navbar-search {
    flex-basis: 2.8rem;
    width: 2.8rem;
    min-width: 2.8rem;
    height: 2.8rem;
}

html.vn-tv .navbar-search.is-open {
    left: auto;
    right: 0;
    width: min(22rem, 28vw);
    height: 2.8rem;
}

html.vn-tv .navbar-search-input {
    height: 2.6rem;
    font-size: 1rem;
}

/* ===== MENÚ: el de escritorio, nunca la barra inferior del teléfono ===== */

html.vn-tv .bottom-nav {
    display: none !important;
}

html.vn-tv .nav-desktop {
    display: flex !important;
}

html.vn-tv .main-content {
    padding-bottom: calc(var(--tv-safe-y) + 2rem) !important;
}

html.vn-tv .navbar {
    height: auto;
    padding: var(--tv-safe-y) 0;
}

html.vn-tv .navbar-inner {
    padding-left: var(--tv-safe-x);
    padding-right: var(--tv-safe-x);
}

/* ===== FOCO ===== */

/* Se apagan los contornos por defecto para poner los nuestros, mucho más visibles. */
html.vn-tv *:focus {
    outline: none;
}

html.vn-tv button:focus,
html.vn-tv a:focus,
html.vn-tv .nav-link:focus,
html.vn-tv .nav-account-trigger:focus,
html.vn-tv .nav-account-dropdown-item:focus,
html.vn-tv .btn-red:focus,
html.vn-tv .player-ctl-btn:focus,
html.vn-tv .player-lang-btn:focus,
html.vn-tv .profile-pin-cancel:focus,
html.vn-tv .profiles-quick-connect:focus,
html.vn-tv select:focus,
html.vn-tv input:focus {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 6px;
    box-shadow: 0 0 0 6px rgba(229, 9, 20, .35);
}

html.vn-tv .nav-link:focus,
html.vn-tv .nav-account-dropdown-item:focus {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* Carátulas, canales y episodios: crecen y se enmarcan como en cualquier TV. */
html.vn-tv .poster-card:focus,
html.vn-tv .live-card:focus,
html.vn-tv .live-channel-tile:focus,
html.vn-tv .live-playlist-tile:focus,
html.vn-tv .profile-card:focus {
    outline: none;
    transform: scale(1.12);
    box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(229, 9, 20, .45), 0 18px 40px rgba(0, 0, 0, .85);
    border-radius: 6px;
    z-index: 5;
    position: relative;
}

html.vn-tv .episode-row:focus {
    outline: none;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 3px #fff;
    border-radius: 6px;
}

/* ===== FILAS HORIZONTALES ===== */

/*
 * La fila recorta lo que se sale por arriba y abajo, así que sin este hueco el
 * marco de la carátula enfocada aparecería cortado.
 */
html.vn-tv .row-scroll {
    padding-top: 1.75rem;
    padding-bottom: 2.25rem;
    padding-left: var(--tv-safe-x);
    padding-right: var(--tv-safe-x);
    /* El anclaje por celdas pelea con el desplazamiento automático del foco. */
    scroll-snap-type: none;
}

html.vn-tv .row-scroll > * {
    scroll-snap-align: none;
}

/*
 * Las flechas laterales solo existían para el ratón y además atraparían el foco:
 * con el mando, la fila se desplaza sola al moverse entre carátulas.
 */
html.vn-tv .row-carousel-btn {
    display: none !important;
}

/* Con el cursor del TV sí hacen falta las flechas de fila para recorrer el carrusel. */
html.vn-tv.vn-tv-pointer .row-carousel-btn {
    display: flex !important;
}

html.vn-tv .row-title,
html.vn-tv .row-title-link {
    padding-left: var(--tv-safe-x);
    font-size: 1.35rem;
}

/* ===== NADA DEPENDE DEL RATÓN ===== */

/*
 * Sin puntero no hay hover: lo que solo aparecía al pasar por encima quedaría
 * invisible para siempre. Se reproduce el mismo efecto sobre el foco.
 */
html.vn-tv .poster-card:hover,
html.vn-tv .live-channel-tile:hover,
html.vn-tv .live-card:hover {
    transform: none;
}

/* Modo puntero: el hover del cursor del TV es la selección visible. */
html.vn-tv.vn-tv-pointer .poster-card:hover,
html.vn-tv.vn-tv-pointer .live-card:hover,
html.vn-tv.vn-tv-pointer .live-channel-tile:hover,
html.vn-tv.vn-tv-pointer .live-playlist-tile:hover,
html.vn-tv.vn-tv-pointer .profile-card:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(229, 9, 20, .45), 0 18px 40px rgba(0, 0, 0, .85);
    border-radius: 6px;
    z-index: 5;
    position: relative;
}

html.vn-tv.vn-tv-pointer .episode-row:hover {
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 3px #fff;
    border-radius: 6px;
}

html.vn-tv.vn-tv-pointer .nav-link:hover,
html.vn-tv.vn-tv-pointer .nav-account-dropdown-item:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

html.vn-tv .live-channel-tile:focus .live-channel-play {
    opacity: 1;
}

html.vn-tv.vn-tv-pointer .live-channel-tile:hover .live-channel-play {
    opacity: 1;
}

html.vn-tv .live-channel-play {
    opacity: 0;
}

/* ===== TEXTO Y ZONAS GRANDES ===== */

html.vn-tv .hero {
    padding-left: var(--tv-safe-x);
    padding-right: var(--tv-safe-x);
}

html.vn-tv .nav-link {
    font-size: 1.05rem;
    padding: .5rem 1rem;
}

html.vn-tv .login-box input,
html.vn-tv .profile-pin-field input {
    font-size: 1.1rem;
    padding: .9rem 1rem;
}

html.vn-tv .btn-red {
    font-size: 1.05rem;
    padding: .9rem 1.4rem;
}

/* ===== REPRODUCTOR ===== */

html.vn-tv .player-custom-bar {
    padding-left: var(--tv-safe-x);
    padding-right: var(--tv-safe-x);
    padding-bottom: var(--tv-safe-y);
}

html.vn-tv .player-ctl-btn,
html.vn-tv .player-lang-btn {
    min-width: 3rem;
    min-height: 3rem;
}

html.vn-tv .player-back {
    top: var(--tv-safe-y);
    left: var(--tv-safe-x);
}

html.vn-tv .player-info {
    padding-left: var(--tv-safe-x);
    padding-right: var(--tv-safe-x);
}

html.vn-tv .poster-card-img,
html.vn-tv .poster-card-img img,
html.vn-tv .live-channel-logo,
html.vn-tv .live-card-wrap img {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

/* Evita cajas negras vacías mientras la carátula termina de cargar en TV */
html.vn-tv .poster-card-img {
    background: linear-gradient(160deg, #2a2a2a 0%, #141414 55%, #1a1a1a 100%);
}

html.vn-tv .poster-card-img img.poster-pending {
    opacity: 0 !important;
}

html.vn-tv .player-ctl-seek {
    min-width: 3.25rem;
    min-height: 3.25rem;
}

html.vn-tv .player-ctl-seek-label {
    font-size: 0.72rem;
}

/* La descarga sin conexión es para el móvil; en un televisor no tiene sentido. */
html.vn-tv #player-download-wrap,
html.vn-tv #btn-nav-downloads,
html.vn-tv #bottom-nav-downloads,
html.vn-tv .offline-dl-float {
    display: none !important;
}