/* controles-app.css — lo que toca a la APP de los controles del reproductor v1.
 *
 * Los controles viven en el iframe del player (soultv_player/controles/); la app
 * se queda el menú de SoulTV y la fila de «Programação», y el puente
 * (js/puente-player.js) los une. Clases del body que pone el puente:
 *   controles-v1  siempre
 *   arrancando    mientras la app se abre (se quita al llegar al reproductor)
 *   player-v1     en el reproductor de un canal (no en el home ni en un VOD)
 *   menu-soultv   con el menú de SoulTV abierto
 *   tizen-tapar   sólo en Samsung Tizen, con la app encima del reproductor
 *
 * Sin var(), sin gap (Chromium 38).
 */

/* ------------------------------------------------ el puntero, al player */
/* #block-click-player tapa el iframe (z 21) y se quedaba todo el ratón: con él
 * los controles del player no reciben ni un clic. En el reproductor de un canal
 * deja pasar el puntero; en el home el iframe es la vista previa y sigue igual. */
body.player-v1 #block-click-player { pointer-events: none; }

/* ------------------------------------------- la barra del canal de la app */
/* Al cambiar de canal la app ya no enseña su barra (logo SoulTV + nombre del
 * canal): lo hace el player (feedback del 15-sep-2026). Sólo sale con el menú
 * de SoulTV abierto, y entonces sólo la columna y el logo (abajo). */
body.player-v1:not(.menu-soultv) .menu-container { display: none !important; }

/* Con el menú abierto sobre el reproductor, SÓLO el menú de la app (feedback
 * del 16-sep-2026: "solo debe mostrar los menús de la app padre, nada más, no
 * título del canal, y no poner la pantalla más oscura"):
 *   - fuera el logo y el nombre del canal y el programa en curso, que son la
 *     barra del canal de la app y ya los enseña el player;
 *   - fuera el velo: la hoja de la app pinta `.menu-container` a pantalla
 *     completa con rgba(0,0,0,.4). El player no pone nada en estado `menu`.
 * Las etiquetas de la columna llevan una sombra de texto para leerse sobre
 * cualquier imagen ahora que no hay velo detrás. */
body.player-v1.menu-soultv .menu-container { background-color: rgba(0,0,0,0) !important; }
body.player-v1.menu-soultv .menu-container .channel-logo-container,
body.player-v1.menu-soultv .menu-container .channel-info,
body.player-v1.menu-soultv .menu-container .elements-container { display: none !important; }
body.player-v1.menu-soultv .menu-user .label-option-menu { text-shadow: 0 1px 3px rgba(0,0,0,.85); }

/* Y al abrir la app no se asoma nada: se entra directo al stream. La app
 * enseñaba su barra antes de que el puente pudiera poner `player-v1` -medido en
 * el banco: barra a los 1451 ms, clase a los 1902- y eso era el menú que salía
 * "unos ms al entrar". `arrancando` la tapa hasta que el puente sabe dónde
 * está. */
body.controles-v1.arrancando .menu-container { display: none !important; }

/* El logo, en el MISMO sitio y con el MISMO tamaño que la bolita SoulTV de los
 * controles (x 1176, y 596, 48 px): al abrir el menú desde la bolita, el logo
 * queda justo donde estaba. Anillo de foco blanco sólido de 3 por fuera, como
 * en el player (54 px con -3 de margen). brand.png es de 70 con el círculo de
 * 60: a 56 px el círculo mide 48. */
body.controles-v1 .menu-container .btn-user-main {
    position: absolute !important;
    left: 1173px !important;
    top: 593px !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    border: 3px solid rgba(0,0,0,0) !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background-size: 56px 56px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -webkit-transform: none !important;
    transform: none !important;
}
body.controles-v1 .menu-container .btn-user-main.focus-item-keyboard { border-color: #ffffff !important; }

/* La columna se ancla por abajo contra el logo con el hueco de siempre (20 px
 * de borde a borde, ver dvr.css): con el logo arriba en y 596, el círculo más
 * cercano acaba en 576 y su bloque (+9 margen +6 renglón) en 591.
 *
 * En horizontal se ancla por la IZQUIERDA, en la misma x que el logo. La hoja
 * de la app le da `left: 1147px` y un `margin-left: 15px` a cada círculo, así
 * que con `right` sólo se cambiaba el ancho de la caja y los círculos no se
 * movían (medido: columna en x 1171 con el logo en 1173). */
body.controles-v1 .menu-user { bottom: 129px; left: 1173px; right: auto; }
body.controles-v1 .menu-user .btn-m-user { margin-left: 0 !important; }

/* Y el logo del canal con su nombre suben 25 px para que su centro (y 620) sea
 * el del logo de SoulTV: la columna queda centrada en su eje (x 1200). */
body.controles-v1 .menu-container .channel-logo-container,
body.controles-v1 .menu-container .channel-info { -webkit-transform: translateY(-25px); transform: translateY(-25px); }

/* «Guía» y «Volver a ver» ya no se dibujan (se quitaron de menu.html el
 * 15-sep-2026: los tapaba el iframe y el player ya ofrece las dos cosas desde
 * la bolita). Esto es el cinturón: si alguna vista los pintara igual, no se
 * ven ni entran en el anillo de foco de gtvzone, que sólo mira lo visible. */
body.controles-v1 .btn-channel,
body.controles-v1 .btn-rever { display: none !important; }

/* ------------------------------------- la columna, del tamaño del logo */
/* Los botones de encima del logo eran de 60 y el logo de SoulTV mide 48 dentro
 * de un anillo de 54 (arriba). Feedback del 15-sep-2026: «deben ser del mismo
 * tamaño que el logo». Se igualan a 54 con el mismo anillo de 3, y como la
 * columna está anclada por abajo, el hueco con el logo no se mueve: sólo se
 * acorta hacia arriba. */
body.controles-v1 .menu-user .btn-m-user {
    width: 54px !important;
    height: 54px !important;
    border-width: 3px !important;
    box-sizing: border-box !important;
    /* Y el círculo VISIBLE igual que el del logo (48). Con la caja igualada no
     * bastaba: medido en la LG, los iconos se veían de 50 y «Canales en vivo»
     * de 54 frente a los 47-48 del logo, porque el `background-size: 120%` de
     * la app no cuadra con cada PNG. Casi todos son de 70 con el círculo de 60,
     * como brand.png, así que llevan su mismo 56; sqjl.png es de 71 con el
     * círculo a sangre (70), y a 48 da 47-48. */
    background-size: 56px 56px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
body.controles-v1 .menu-user .btn-sqjl { background-size: 48px 48px !important; }
/* La etiqueta se recoloca con el botón: mismo hueco de 25 px hasta su borde
 * izquierdo (85 - 60 antes) y centrada en los 54 de alto. */
body.controles-v1 .menu-user .cont-btn-m-user .label-option-menu { right: 79px; top: 27px; }

/* ------------------------------------------ Samsung Tizen: vídeo tapado */
/* En Tizen el vídeo sale por el plano del hardware y su hueco se come lo que
 * la app pinta encima (menú de SoulTV, fila de «Programação»). Con eso abierto
 * el puente pone `tizen-tapar` y el iframe del player no se pinta: se ve el
 * menú sobre negro y el vídeo sigue sonando. Ver puente-player.js, «la app
 * encima del vídeo». Nunca se pone fuera de Tizen. */
body.tizen-tapar #player-iframe { visibility: hidden !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: siempre azul liso de 18 (en esta franja el foco va a las tarjetas,
 * nunca a la bolita: sin anillo). */
body.controles-v1 #dvr-cabeza,
body.controles-v1 #dvr-cabeza.vivo {
    top: -6px;
    width: 18px; height: 18px; margin-left: -9px;
    border: 0;
    border-radius: 50%;
    background-color: #216d90;
    box-sizing: border-box;
}
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; }