/* ==========================================================================
   Modo TV (ts/ui/modo-tv.ts). Tudo aqui só vale com <html data-modo-tv="1"> (ligado e na tela Programação Semanal): no
   celular, no computador e nas outras telas nada muda.
   Liga sozinho em TV (ou à força, em Opções do Sistema). Quatro coisas, como no mockup aprovado:
     1. contraste  — colunas, cartões e bordas mais fortes; cinzas do texto mais escuros (no tema escuro, mais claros);
     2. texto maior — o tamanho-base (rem) e os textos em px crescem com a largura da tela (--tv-k e --tv-t, vindas do JS);
     3. foco forte para o controle remoto — anel dourado por dentro da borda (não é cortado por rolagem);
     4. sem efeitos pesados — sem desfoque, sem sombras e sem animações de entrada.
   Os tamanhos de texto em px (text-[10px] etc.) são GERADOS por tools/gerar-modo-tv.cjs no "npm run css".
   ========================================================================== */

/* ---- Opções do Sistema: a seção "Tela" aparece para todos; o tema do Modo TV só com o modo ligado (o ligado vale na tela Programação Semanal) ---- */
html:not([data-modo-tv-ligado]) #configTemaTv { display: none; }
#btnProgramacaoTv[aria-pressed="true"] { background: #fac043; border-color: #fac043; }
.modo-tv-opcao { min-height: 2.5rem; border-radius: .75rem; border: 1px solid #cbd5e1; font-size: 12px; font-weight: 800; padding: .4rem .5rem; cursor: pointer; background: transparent; color: inherit; }
.modo-tv-opcao[aria-pressed="true"] { background: #152e50; color: #fac043; border-color: #fac043; }
html[data-modo-tv] .modo-tv-opcao { font-size: calc(12px * var(--tv-t, 1.4)); }

/* ---- Programação no Modo TV: sem barra lateral (volta ao desligar ou sair da tela) e bordas que deslizam a semana ---- */
html[data-modo-tv] :is(#mainAdminSidebar, #mainMasterSidebar, #mainAdminGestaoSidebar) { display: none !important; }
/* Setas da semana: um botão pequeno sobre o título do dia, na ponta de cada borda (não cobre mais a coluna inteira nem os cartões, para o mouse clicar neles). Com mouse
   ficam sempre visíveis; sem mouse (só controle remoto) aparecem quando focadas ou com o ponteiro em cima. */
html[data-modo-tv] .prog-borda { position: absolute; top: .5rem; width: 3rem; height: 3.25rem; z-index: 5; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 1rem; color: #fff; font-size: 1.6rem; cursor: pointer; opacity: 0; pointer-events: none; }
html[data-modo-tv] .prog-borda.on { pointer-events: auto; }
html[data-modo-tv] .prog-borda.on:hover { opacity: 1; }
html[data-modo-tv][data-mouse] .prog-borda.on { opacity: .9; }
html[data-modo-tv] .prog-borda-e { left: 0; background: linear-gradient(90deg, rgba(21,46,80,.85), rgba(21,46,80,0)); }
html[data-modo-tv] .prog-borda-d { right: 0; background: linear-gradient(270deg, rgba(21,46,80,.85), rgba(21,46,80,0)); }

/* Sem botões que não servem na TV: RUNEia flutuante, busca, abrir em janela, Distribuir cargas, notificações e ajuda */
html[data-modo-tv] :is(#runeiaFlutuante, #programacaoBuscaTopo, #btnProgramacaoJanela, #btnProgramacaoDistribuir, #logHeaderDireita [onclick="abrirCentralNotificacoes()"], #logHeaderDireita [onclick="abrirAjuda()"]) { display: none !important; }
/* Cabeçalho fino (mockup aprovado): título pequeno sem subtítulo, botões pequenos e a legenda das cores dentro dele */
#programacaoLegendaTopo { display: none; }
html[data-modo-tv] #programacaoLegendaTopo:not(:empty) { display: flex; }
/* legenda em bolhas coloridas, no estilo das etiquetas dos cartões */
html[data-modo-tv] #programacaoLegendaTopo span { display: inline-flex; align-items: center; height: 1.65rem; color: #fff; font-weight: 900; text-transform: uppercase; border-radius: .45rem; padding: 0 .6rem; }
html[data-modo-tv] #logHeaderBar { height: 2.25rem; }
html[data-modo-tv] #logHeaderDireita { flex-shrink: 1; min-width: 0; }
html[data-modo-tv] #logHeaderSubtitle { display: none; }
html[data-modo-tv] #logHeaderBar #logHeaderTitle { font-size: calc(13px * var(--tv-k, 1.25)); }
html[data-modo-tv] #logHeaderBar #logHeaderIconBg { width: 1.4rem; height: 1.4rem; border-radius: .4rem; font-size: .7rem; }
html[data-modo-tv] #logHeaderBar :is(.h-9) { height: 1.65rem; }
html[data-modo-tv] #logHeaderBar :is(.w-9) { width: 1.65rem; }
html[data-modo-tv] #logHeaderBar .min-w-9 { min-width: 1.65rem; }
html[data-modo-tv] #logHeaderBar :is(.rounded-xl) { border-radius: .45rem; }
html[data-modo-tv] #logHeaderBar :is(.text-xs, .text-sm, .text-base) { font-size: calc(11px * var(--tv-k, 1.25)); }
html[data-modo-tv] #logHeaderBar #programacaoLegendaTopo { font-size: calc(11px * var(--tv-k, 1.25)); gap: .3rem; }
html[data-modo-tv] #logHeaderBar input { height: 1.65rem; }

/* ---- 2. Texto e tamanhos ---- */
html[data-modo-tv] { font-size: calc(16px * var(--tv-k, 1.25)); }
/* >>> TAMANHOS DE TEXTO GERADOS (tools/gerar-modo-tv.cjs) — não edite este trecho à mão >>> */
html[data-modo-tv] .text-xs{font-size:calc(12px * var(--tv-t,1.4))}
html[data-modo-tv] .text-sm{font-size:calc(12px * var(--tv-t,1.4) + 2px * var(--tv-k,1.25) * 1.12)}
html[data-modo-tv] .text-base{font-size:calc(12px * var(--tv-t,1.4) + 4px * var(--tv-k,1.25) * 1.12)}
html[data-modo-tv] .text-lg{font-size:calc(12px * var(--tv-t,1.4) + 6px * var(--tv-k,1.25) * 1.12)}
html[data-modo-tv] .text-xl{font-size:calc(12px * var(--tv-t,1.4) + 8px * var(--tv-k,1.25) * 1.12)}
html[data-modo-tv] .text-2xl{font-size:calc(12px * var(--tv-t,1.4) + 8px * var(--tv-k,1.25) * 1.12 + 4px * var(--tv-k,1.25))}
html[data-modo-tv] .text-3xl{font-size:calc(12px * var(--tv-t,1.4) + 8px * var(--tv-k,1.25) * 1.12 + 10px * var(--tv-k,1.25))}
html[data-modo-tv] .text-\[8px\]{font-size:calc(8px * var(--tv-t,1.4))}
html[data-modo-tv] .text-\[9px\]{font-size:calc(9px * var(--tv-t,1.4))}
html[data-modo-tv] .text-\[9\.5px\]{font-size:calc(9.5px * var(--tv-t,1.4))}
html[data-modo-tv] .text-\[10px\]{font-size:calc(10px * var(--tv-t,1.4))}
html[data-modo-tv] .text-\[10\.5px\]{font-size:calc(10.5px * var(--tv-t,1.4))}
html[data-modo-tv] .text-\[11px\]{font-size:calc(11px * var(--tv-t,1.4))}
html[data-modo-tv] .text-\[11\.5px\]{font-size:calc(11.5px * var(--tv-t,1.4))}
html[data-modo-tv] .text-\[12px\]{font-size:calc(12px * var(--tv-t,1.4))}
html[data-modo-tv] .text-\[12\.5px\]{font-size:calc(12px * var(--tv-t,1.4) + 0.5px * var(--tv-k,1.25) * 1.12)}
html[data-modo-tv] .text-\[13px\]{font-size:calc(12px * var(--tv-t,1.4) + 1px * var(--tv-k,1.25) * 1.12)}
html[data-modo-tv] .text-\[13\.5px\]{font-size:calc(12px * var(--tv-t,1.4) + 1.5px * var(--tv-k,1.25) * 1.12)}
html[data-modo-tv] .text-\[14px\]{font-size:calc(12px * var(--tv-t,1.4) + 2px * var(--tv-k,1.25) * 1.12)}
html[data-modo-tv] .text-\[15px\]{font-size:calc(12px * var(--tv-t,1.4) + 3px * var(--tv-k,1.25) * 1.12)}
html[data-modo-tv] .text-\[28px\]{font-size:calc(12px * var(--tv-t,1.4) + 8px * var(--tv-k,1.25) * 1.12 + 8px * var(--tv-k,1.25))}
/* <<< FIM DOS TAMANHOS GERADOS <<< */

/* ---- 1. Contraste (tema claro) ---- */
html[data-modo-tv]:not([data-tema-app="escuro"]) .text-slate-500 { color: #334155; }
html[data-modo-tv]:not([data-tema-app="escuro"]) .text-slate-600 { color: #1e293b; }
html[data-modo-tv]:not([data-tema-app="escuro"]) .text-slate-700 { color: #0f172a; }
html[data-modo-tv]:not([data-tema-app="escuro"]) :is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-amber-50, main) .text-slate-400 { color: #52627a; }
/* bordas: o mesmo tom areia da visualização normal (tema-areia.css), só um grau mais forte */
html[data-modo-tv]:not([data-tema-app="escuro"]) .border-slate-100 { border-color: #e9e3d9; }
html[data-modo-tv]:not([data-tema-app="escuro"]) .border-slate-200 { border-color: #ddd5c8; }
html[data-modo-tv]:not([data-tema-app="escuro"]) .border-slate-300 { border-color: #cfc5b5; }
html[data-modo-tv]:not([data-tema-app="escuro"]) .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #e9e3d9; }
/* fundos: o mesmo tom areia da visualização normal (tema-areia.css), só um grau mais forte para as colunas aparecerem na TV */
html[data-modo-tv]:not([data-tema-app="escuro"]) .bg-slate-50 { background-color: #f8f6f0; }
html[data-modo-tv]:not([data-tema-app="escuro"]) .bg-slate-100 { background-color: #f0ece3; }
html[data-modo-tv]:not([data-tema-app="escuro"]) .bg-slate-100\/70 { background-color: #efebe2; }
html[data-modo-tv]:not([data-tema-app="escuro"]) .bg-slate-200 { background-color: #e6e1d7; }
html[data-modo-tv]:not([data-tema-app="escuro"]) input::placeholder,
html[data-modo-tv]:not([data-tema-app="escuro"]) textarea::placeholder { color: #64748b; opacity: 1; }

/* ---- 1. Contraste (tema escuro) ---- */
html[data-modo-tv][data-tema-app="escuro"] .text-slate-400,
html[data-modo-tv][data-tema-app="escuro"] .text-slate-500 { color: #cbd5e1; }
html[data-modo-tv][data-tema-app="escuro"] .text-slate-600,
html[data-modo-tv][data-tema-app="escuro"] .text-slate-700 { color: #e2e8f0; }
html[data-modo-tv][data-tema-app="escuro"] .border-slate-100,
html[data-modo-tv][data-tema-app="escuro"] .border-slate-200 { border-color: #5b708f; }
html[data-modo-tv][data-tema-app="escuro"] .border-slate-300 { border-color: #8da2c2; }
html[data-modo-tv][data-tema-app="escuro"] .bg-amber-50\/60 { background-color: #3b3321; }   /* coluna de hoje (Programação) */
html[data-modo-tv][data-tema-app="escuro"] input::placeholder,
html[data-modo-tv][data-tema-app="escuro"] textarea::placeholder { color: #a9b8d0; opacity: 1; }

/* ---- 4. Sem efeitos pesados ---- */
html[data-modo-tv] *, html[data-modo-tv] *::before, html[data-modo-tv] *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
}
html[data-modo-tv] *:not(:focus-visible) { box-shadow: none !important; }
html[data-modo-tv] :is(.blur, .blur-sm, .blur-md, .blur-lg, .blur-xl, .blur-2xl, .blur-3xl, .cena-nuvem, .cena-nevoa, .sp-aura) { filter: none !important; }
html[data-modo-tv] .cena-nuvem, html[data-modo-tv] .cena-nevoa, html[data-modo-tv] .sp-aura { display: none !important; }
/* entradas animadas: a tela aparece direto */
html[data-modo-tv] :is(.screen-android-animate, .tab-pane-transition, .mov-entrando, .mov-entrando > *, .lista-viva > *, .mov-ok, .runeia-flutuante, .chat-anim),
html[data-modo-tv] [id^="content"]:not(.hidden) { animation: none !important; }
html[data-modo-tv] .sp-marca span { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
html[data-modo-tv] button:not(:disabled):active, html[data-modo-tv] [role="button"]:active { scale: none !important; }
/* sem transições: o anel de foco aparece e some na hora, e a TV não gasta quadros animando */
html[data-modo-tv] *, html[data-modo-tv] *::before, html[data-modo-tv] *::after { transition: none !important; }
/* Programação: cabeçalho das colunas numa linha só (dia/data e itens/cargas não quebram) */
html[data-modo-tv] #contentProgramacao .cab-degrade p { white-space: nowrap; }
html[data-modo-tv] .lista-viva:empty::before { animation: none !important; }

/* ---- 3. Foco do controle remoto: anel dourado por dentro da borda + faixa azul, legível em fundo claro e escuro ---- */
html[data-modo-tv] :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
    outline: 5px solid #fac043 !important;
    outline-offset: -5px !important;
    box-shadow: inset 0 0 0 10px #152e50 !important;
}
/* cartões e linhas que não são botões: o anel por dentro cobre o conteúdo, então só a borda dourada e a faixa azul fina */
html[data-modo-tv] :is(tr, td, th)[tabindex]:focus-visible { box-shadow: inset 0 0 0 6px #152e50 !important; }

/* ---- 5. Barra de ajuda do controle: aparece quando se usa o controle e some sozinha ---- */
#modoTvAjuda {
    display: none;
    position: fixed;
    left: 50%;
    bottom: calc(14px * var(--tv-k, 1.25));
    transform: translateX(-50%);
    z-index: 2147483000;
    gap: 1.6rem;
    align-items: center;
    padding: .5rem 1.4rem;
    border: 3px solid #fac043;
    border-radius: 999px;
    background: #0b1220;
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 700;
    pointer-events: none;
    white-space: nowrap;
}
html[data-modo-tv] #modoTvAjuda.on { display: flex; }
#modoTvAjuda kbd { margin-right: .45rem; padding: .1rem .6rem; border-radius: .5rem; background: #fac043; color: #152e50; font: inherit; font-weight: 900; }