/* Faixa de controles colada ao quadro da live do YouTube (TV): mesma largura do vídeo, superfície escura do núcleo
   (o mesmo papel do player das rádios), botão de janela e interruptor "continuar ao navegar". Cores pelos tokens
   da paleta do núcleo; nenhum hex de página. Quando a janela separada toca, a faixa troca o conteúdo pelo aviso. */
.a12-tvj {
	--a12-tvj-marca: var(--a12-principal, var(--ap-marca, #0b4f8c));
	--a12-tvj-fundo: color-mix(in srgb, var(--a12-tvj-marca) 78%, #000);
	--a12-tvj-texto: #fff;
	--a12-tvj-tonal: rgba(255, 255, 255, .74);
	display: block; margin: 0; color: var(--a12-tvj-texto); font-size: .9rem; line-height: 1.3;
}
.a12-tvj__faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 60px; padding: 8px 12px 8px 8px; border-radius: 0 0 16px 16px; background: var(--a12-tvj-fundo); }
.a12-tvj__faixa[hidden] { display: none; }
/* o reset do tema pinta cor em todo elemento (*), então a cor do texto vai explícita nos filhos */
.a12-tvj .a12-tvj__faixa, .a12-tvj .a12-tvj__faixa span { color: var(--a12-tvj-texto); }
/* botões: mesma régua do player das rádios (44px, ícone 22px, fundo translúcido; hover inverte) */
.a12-tvj button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; margin: 0; padding: 0 16px 0 12px; height: 44px; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: none; background: rgba(255, 255, 255, .12); color: var(--a12-tvj-texto); transition: background .15s, color .15s, box-shadow .15s; }
.a12-tvj button:hover, .a12-tvj button:focus { background: var(--a12-tvj-texto); color: var(--a12-tvj-fundo); outline: none; }
.a12-tvj button:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.a12-tvj button > svg { width: 22px; height: 22px; flex: none; }
/* interruptor "continuar assistindo ao navegar" (só desktop; some via JS no celular) */
.a12-tvj__continuar { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0 4px; min-height: 44px; font-size: .85rem; color: var(--a12-tvj-tonal); cursor: pointer; user-select: none; }
.a12-tvj__continuar[hidden] { display: none; }
.a12-tvj .a12-tvj__continuar > span { color: var(--a12-tvj-tonal); }
.a12-tvj .a12-tvj__continuar:hover > span { color: var(--a12-tvj-texto); }
.a12-tvj .a12-tvj__continuar-caixa { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 40px; height: 22px; margin: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .28); cursor: pointer; transition: background .15s; }
.a12-tvj .a12-tvj__continuar-caixa::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--a12-tvj-texto); transition: transform .15s, background .15s; }
.a12-tvj .a12-tvj__continuar-caixa:checked { background: var(--a12-tvj-texto); }
.a12-tvj .a12-tvj__continuar-caixa:checked::before { transform: translateX(18px); background: var(--a12-tvj-fundo); }
.a12-tvj .a12-tvj__continuar-caixa:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
/* aviso + chamadas enquanto a janela separada toca (substitui a faixa de controles) */
.a12-tvj__aviso-texto { display: inline-flex; align-items: center; gap: 10px; padding-left: 8px; font-weight: 500; }
.a12-tvj__aviso-texto::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--a12-tvj-texto); box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }
.a12-tvj__aviso-acoes { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.a12-tvj button.a12-tvj__btn { padding: 0 16px; }
.a12-tvj button.a12-tvj__btn--aqui { background: var(--a12-tvj-texto); color: var(--a12-tvj-fundo); }
.a12-tvj button.a12-tvj__btn--aqui:hover, .a12-tvj button.a12-tvj__btn--aqui:focus { background: rgba(255, 255, 255, .85); }
@media (max-width: 767px) {
	.a12-tvj__faixa { border-radius: 0 0 12px 12px; justify-content: center; }
	.a12-tvj__aviso-texto { flex: 1 1 100%; justify-content: center; padding: 0; }
	.a12-tvj__aviso-acoes { justify-content: center; }
}