/* Miva Player Web — visual copiado do app Android (v1.14.10).
   Paleta: colors.xml. Formas: drawables (cartao_login, campo_login,
   botao_principal/contorno, campo_busca_pilula, ajuste_secao_fundo,
   caixa_agora, logo_fundo). Nada aqui é invenção nova: são os mesmos
   valores do Android traduzidos para CSS. */
:root{
  --fundo:#0E1522; --superficie:#17202F; --superficie-foco:#1F4B47;
  --tinta:#F2F4F6; --fraco:#93A0B0;
  --destaque:#31C8B4; --destaque-foco:#3FE0C9; --destaque-preto:#08201D;
  --alerta:#E2A44C; --perigo:#E0685A;
  --cartao:#1A2536; --cartao-borda:#243349;
  --campo:#14202F; --campo-borda:#2C3E56; --campo-foco:#12303A;
  --contorno-borda:#38506B;
  --raio:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--tinta);
  background:linear-gradient(180deg,#16233A 0%, #0E1522 50%, #080D15 100%);
  background-attachment:fixed;
  min-height:100vh; display:flex; flex-direction:column;
}

/* topo com a marca do Android (SVG) */
.topo{display:flex;align-items:center;gap:10px;padding:16px 18px}
.topo .marca{width:30px;height:30px;border-radius:8px;display:block}
.logo{font-weight:800;letter-spacing:.3px;font-size:20px}
.logo b{color:var(--destaque)}

.centro{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}

/* No Ao vivo (só em tela larga), a PÁGINA fica fixa na altura da janela e não
   rola: quem rola é o conteúdo de cada coluna (como o RecyclerView weight=1 do
   Android). No celular a tela empilha e a página rola normalmente. */
@media(min-width:821px){
  body.aovivo{height:100vh;overflow:hidden}
}

/* logo grande da tela de login (o ic_launcher, 72dp) */
.marca-login{width:72px;height:72px;border-radius:20px;display:block;margin:4px auto 14px}

.cartao{width:100%;max-width:520px;background:var(--cartao);border:1px solid var(--cartao-borda);
  border-radius:18px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
h1{font-size:22px;margin:2px 0 4px}
.sub{color:var(--fraco);margin:0 0 6px;font-size:13px}

/* rótulos e campos = RotuloCampo + campo_login */
label{display:block;font-size:13px;color:var(--fraco);margin:16px 0 6px}
input{width:100%;padding:12px 14px;border:1px solid var(--campo-borda);border-radius:12px;
  background:var(--campo);color:var(--tinta);font:inherit;outline:none}
input:focus{border-color:var(--destaque);border-width:2px;background:var(--campo-foco);padding:11px 13px}
input[inputmode=numeric]{letter-spacing:6px;font-weight:700;text-align:center;font-size:20px}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.linha2{grid-template-columns:1fr}}

/* botao_principal: preenchido teal, texto escuro */
button.principal{width:100%;margin-top:20px;padding:14px;border:0;border-radius:12px;
  background:var(--destaque);color:var(--destaque-preto);font:inherit;font-weight:700;font-size:17px;cursor:pointer}
button.principal:hover{background:var(--destaque-foco)}
button.principal:disabled{opacity:.6;cursor:default}
/* botao_contorno: só borda */
button.secundario{margin-top:10px;width:100%;padding:13px;border:1px solid var(--contorno-borda);
  border-radius:12px;background:transparent;color:var(--tinta);font:inherit;font-size:16px;cursor:pointer}
button.secundario:hover{border-color:var(--destaque)}

/* recado de erro no TOPO do cartão (como o Android) */
.recado{margin:0 0 12px;text-align:center;color:var(--alerta);font-size:14px;display:none}
.recado.mostra{display:block}

.aviso{margin-top:14px;padding:11px 13px;border-radius:10px;font-size:14px;display:none}
.aviso.mostra{display:block}
.aviso.erro{background:rgba(224,104,90,.12);border:1px solid rgba(224,104,90,.4);color:#f6c3bb}
.aviso.ok{background:rgba(49,200,180,.12);border:1px solid rgba(49,200,180,.4);color:#a9ecdf}
.aviso.info{background:rgba(226,164,76,.10);border:1px solid rgba(226,164,76,.35);color:#f2d29a}

/* rodapé do login: código do aparelho, teal monospace */
.rodape-codigo{margin-top:18px;text-align:center}
.rodape-codigo .dizer{color:var(--fraco);font-size:12px}
.rodape-codigo .cod{margin-top:2px;font-family:monospace;letter-spacing:.2em;
  color:var(--destaque);font-weight:700;font-size:22px}

.codigo{font-size:30px;font-weight:800;letter-spacing:6px;text-align:center;
  background:var(--campo);border:1px dashed var(--campo-borda);border-radius:10px;padding:14px;margin:12px 0;
  font-family:monospace;color:var(--destaque)}
.dados{margin-top:8px;font-size:14px}
.dados div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--cartao-borda)}
.dados div:last-child{border-bottom:0}
.dados span{color:var(--fraco)}
.selo{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.selo.ok{background:rgba(49,200,180,.2);color:#8fe6d7}
.selo.erro{background:rgba(224,104,90,.2);color:#f0a89f}
.selo.aviso{background:rgba(226,164,76,.2);color:#f0cf94}
.carregando{color:var(--fraco);text-align:center;padding:30px}
.spin{width:26px;height:26px;border:3px solid var(--cartao-borda);border-top-color:var(--destaque);
  border-radius:50%;animation:g 1s linear infinite;margin:0 auto 12px}
@keyframes g{to{transform:rotate(360deg)}}
.rodape{padding:14px 18px;color:var(--fraco);font-size:12px;text-align:center}
.contato{margin-top:12px;text-align:center;font-size:14px;color:var(--fraco)}
.contato b{color:var(--tinta)}
[hidden]{display:none!important}

/* ===== Ao vivo — três colunas, cópia do tela_ao_vivo.xml =====
   Como o Android (weight 25/33/42, match_parent): preenche a tela inteira,
   colunas proporcionais em qualquer tamanho, sem largura máxima; as listas
   rolam por dentro. A margem das bordas vem do padding do .centro. */
.tela-cheia{width:100%;align-self:stretch;flex:1;min-height:0;display:flex}
.av-grade{flex:1;width:100%;min-height:0;display:grid;
  grid-template-columns:25% 33% 42%;grid-template-rows:minmax(0,1fr);gap:0;
  border:1px solid var(--cartao-borda);border-radius:14px;overflow:hidden}

/* coluna 1: título + busca + categorias */
.av-lado{background:rgba(10,15,24,.35);padding:16px 12px 8px;display:flex;flex-direction:column;min-width:0;min-height:0}
.av-cabeca{display:flex;align-items:center;gap:6px}
.av-voltar{width:40px;height:40px;border:0;background:transparent;color:var(--tinta);
  font-size:20px;cursor:pointer;border-radius:8px}
.av-voltar:hover{background:rgba(255,255,255,.06)}
.av-titulo{font-weight:800;font-size:20px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-busca{margin-top:10px;width:100%;padding:8px 14px 8px 34px;border:0;border-radius:99px;
  background:rgba(255,255,255,.06);color:var(--tinta);font:inherit;font-size:13px;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393A0B0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center}
.av-busca::placeholder{color:var(--fraco)}
.av-busca:focus{background-color:var(--superficie-foco);box-shadow:0 0 0 2px var(--destaque)}
.av-cats{margin-top:10px;overflow:auto;flex:1}
.av-cat{padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--fraco);
  font-size:16px;min-height:48px;display:flex;align-items:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.av-cat:hover{color:var(--tinta)}
.av-cat.sel{background:rgba(49,200,180,.10);color:var(--tinta)}

/* coluna 2: título "Canais" + lista */
.av-meio{padding:14px 12px;display:flex;flex-direction:column;min-width:0;min-height:0}
.av-rotulo{color:var(--fraco);font-size:12px;margin-bottom:6px}
.av-canais{overflow:auto;flex:1}
.av-canal{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:10px;
  min-height:48px;cursor:pointer;margin-bottom:2px}
.av-canal:hover{background:rgba(49,200,180,.06)}
.av-canal.tocando{background:rgba(49,200,180,.10);box-shadow:inset 0 0 0 2px var(--destaque)}
.av-num{width:34px;flex:none;text-align:right;font-family:monospace;font-size:11px;color:var(--fraco)}
.av-logo{width:46px;height:32px;flex:none;border-radius:6px;background:rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.av-logo img{width:100%;height:100%;object-fit:contain;padding:3px}
.av-inicial{color:var(--fraco);font-weight:700;font-size:14px}
.av-nome{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* coluna 3: prévia + AGORA. A prévia cresce com a coluna (42%); se a coluna
   for mais baixa que o vídeo + programação, esta coluna rola por dentro. */
.av-dir{padding:14px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:auto}
.av-video{width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;display:block}
.av-nomecanal{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:18px;font-weight:700}
.av-nomecanal .lg{width:46px;height:30px;border-radius:6px;background:rgba(255,255,255,.10);
  object-fit:contain;padding:3px}
.av-agora{margin-top:10px;background:var(--superficie);border-radius:10px;padding:10px 14px;display:none}
.av-agora.mostra{display:block}
.av-agora .et{color:var(--destaque);font-size:10px;font-weight:700;letter-spacing:.08em}
.av-agora .tt{margin-top:2px;color:var(--tinta);font-size:15px}
.av-barra{margin-top:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.av-barra i{display:block;height:100%;background:var(--destaque);width:0}
.av-horas{margin-top:4px;display:flex;justify-content:space-between;font-family:monospace;
  font-size:11px;color:var(--fraco)}
.av-erro,.av-vazio{color:var(--fraco);font-size:14px;padding:14px}
.av-erro{color:var(--alerta)}

@media(max-width:820px){
  /* empilha e volta ao fluxo natural: sem altura total forçada, as listas
     rolam com um teto próprio; o vídeo fica em largura cheia (grande no
     celular deitado). */
  .tela-cheia{flex:none;display:block;min-height:0}
  .av-grade{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .av-lado{order:1;min-height:0}
  .av-dir{order:2;overflow:visible}
  .av-meio{order:3}
  .av-cats{max-height:none;display:flex;gap:6px;overflow-x:auto;flex:none}
  .av-cat{flex:none}
  .av-canais,.av-cats{max-height:46vh}
  /* Filmes/Séries: o cabeçalho (av-lado: ← título, busca, categorias) tem
     order:1; a grade (fl-main) fica DEPOIS dele, senão a grade vinha em cima
     e o cabeçalho sumia embaixo dela no celular. */
  .fl-main{order:5}
}

/* ===== Tela inicial — cópia da tela_inicio (variante menu, cartões grandes) ===== */
.tela-inicial{width:100%;align-self:stretch;flex:1;min-height:0;display:flex;flex-direction:column;
  padding:8px 4px}
.ini-topo{display:flex;align-items:center;gap:10px}
.ini-topo .marca{width:30px;height:30px;border-radius:8px}
.ini-marca{font-size:20px;font-weight:800}
.ini-lista{flex:1;min-width:0;color:var(--fraco);font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini-botoes{display:flex;gap:8px;flex:none}
.botao-cab{height:36px;padding:0 14px;border:1px solid var(--contorno-borda);border-radius:10px;
  background:transparent;color:var(--tinta);font:inherit;font-size:14px;cursor:pointer}
.botao-cab:hover{border-color:var(--destaque)}

.ini-aviso{margin-top:12px;padding:10px 14px;border-radius:10px;font-size:14px;
  background:rgba(49,200,180,.10);border:1px solid rgba(49,200,180,.35);color:#a9ecdf}

/* três cartões, peso igual, preenchem a altura (como o Android sem faixas) */
.ini-cartoes{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:24px}
.cartao-ini{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--superficie);border:1px solid var(--cartao-borda);border-radius:16px;
  color:var(--tinta);font:inherit;cursor:pointer;padding:18px;transition:border-color .12s,transform .12s}
.cartao-ini:hover{border-color:var(--destaque);transform:translateY(-2px)}
.cartao-ini:focus-visible{outline:none;border-color:var(--destaque);box-shadow:0 0 0 2px var(--destaque)}
.ci-icone{width:62px;height:62px;fill:var(--destaque)}
.ci-nome{font-size:22px;font-weight:700}
.ci-desc{font-size:13px;color:var(--fraco);text-align:center}

.ini-rodape{display:flex;align-items:center;gap:12px;margin-top:22px}
.ini-validade{flex:1;min-width:0;color:var(--fraco);font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini-caixacod{background:var(--campo);border:1px solid var(--cartao-borda);border-radius:10px;
  padding:8px 14px;color:var(--fraco);font-size:13px}
.ini-caixacod b{margin-left:8px;font-family:monospace;letter-spacing:.16em;color:var(--destaque);font-size:18px}
.ini-sair{align-self:flex-start;margin-top:12px;padding:8px 0;border:0;background:transparent;
  color:var(--fraco);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}
.ini-sair:hover{color:var(--tinta)}

@media(max-width:760px){
  .tela-inicial{flex:none}
  .ini-topo{flex-wrap:wrap}
  .ini-lista{order:3;flex-basis:100%;text-align:left}
  .ini-cartoes{grid-template-columns:1fr;margin-top:16px}
  .cartao-ini{min-height:120px;flex-direction:row;justify-content:flex-start;gap:16px;text-align:left}
  .cartao-ini .ci-desc{text-align:left}
  .ci-icone{width:44px;height:44px}
}

/* ===== Modos da tela inicial (simples x capas) ===== */
.tela-inicial{overflow:auto}
.ini-faixas{display:none}

/* SIMPLES: cartões grandes preenchem, sem faixas (já é o padrão .ini-cartoes) */
#tela-inicial.simples .ini-faixas{display:none}

/* CAPAS: cartões menores que a variante simples, e as faixas embaixo */
#tela-inicial.capas .ini-cartoes{flex:none;margin-top:16px}
#tela-inicial.capas .cartao-ini .ci-desc{display:none}
#tela-inicial.capas .ini-faixas{display:block}
/* Desktop: no modo capas os cartões ficam mais altos e com presença (a tela do
   PC é maior que a da TV), sem chegar ao tamanho da variante simples. No
   celular vale a regra de @media(max-width:760) — cartões em linha, inalterada. */
@media(min-width:761px){
  #tela-inicial.capas .cartao-ini{flex-direction:column;justify-content:center;gap:10px;
    min-height:150px;padding:18px}
  #tela-inicial.capas .cartao-ini .ci-icone{width:46px;height:46px}
  #tela-inicial.capas .cartao-ini .ci-nome{font-size:19px}
}

.faixa{margin-top:18px}
.faixa-titulo{font-size:16px;font-weight:700;margin-bottom:8px}
.faixa{position:relative}
.faixa-capas{display:flex;align-items:flex-start;gap:10px;overflow-x:auto;padding-bottom:4px;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.faixa-capas::-webkit-scrollbar{display:none}   /* barra do navegador escondida */
.capa-item{width:104px;flex:none;cursor:pointer}
/* 2:3 exato (104x156), a MESMA caixa das capas reais — a tela não "pula"
   quando o conteúdo chega no lugar do esqueleto. Sem aspect-ratio para não
   haver ambiguidade com a largura/altura fixas. */
.capa-img{width:104px;height:156px;border-radius:8px;background:var(--superficie);overflow:hidden}
/* setinhas nas pontas da faixa */
.faixa-seta{position:absolute;top:92px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--cartao-borda);background:rgba(10,15,24,.9);color:var(--tinta);
  font-size:20px;line-height:1;cursor:pointer;align-items:center;justify-content:center;z-index:2;display:none}
.faixa-seta.esq{left:-6px}
.faixa-seta.dir{right:-6px}
.faixa-seta:hover{border-color:var(--destaque)}
.capa-img img{width:100%;height:100%;object-fit:cover;display:block}
.capa-nome{margin-top:5px;font-size:12px;color:var(--fraco);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* esqueleto "a caminho" (capas cinzas do Android enquanto o catálogo não veio) */
.capa-esq .capa-img{background:linear-gradient(100deg,#1a2536 30%,#223047 50%,#1a2536 70%);
  background-size:200% 100%;animation:esq 1.3s linear infinite}
.capa-esq .capa-nome{height:12px;width:82%;border-radius:4px;background:#223047}
@keyframes esq{to{background-position:-200% 0}}

/* ===== Minhas listas ===== */
.listas-lista{margin:6px 0 4px}
.lw-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--cartao-borda);
  border-radius:12px;margin-bottom:8px;background:var(--superficie)}
.lw-item.atual{border-color:var(--destaque)}
.lw-corpo{flex:1;min-width:0;cursor:pointer}
.lw-nome{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-sub{font-size:12px;color:var(--fraco);margin-top:2px}
.lw-emuso{font-size:11px;color:var(--destaque);font-weight:700}
.lw-remover{flex:none;padding:8px 12px;border:1px solid var(--contorno-borda);border-radius:10px;
  background:transparent;color:var(--fraco);font:inherit;font-size:13px;cursor:pointer}
.lw-remover:hover{border-color:var(--perigo);color:#f0a89f}
.listas-vazia{color:var(--fraco);font-size:14px;padding:10px 0}

/* ===== Filmes (etapa 4) ===== */
.tela-cheia{position:relative}
@media(min-width:821px){ .fl-grade{grid-template-columns:22% 78%} }
.fl-main{padding:14px;min-width:0;min-height:0;overflow:auto}
.fl-grid{display:grid;grid-template-columns:var(--fl-cols, repeat(auto-fill,minmax(120px,1fr)));gap:14px}
.fl-grid .capa-item{width:auto}
.fl-grid .capa-img{width:100%;height:auto;aspect-ratio:2/3}

/* ficha (sobrepõe a grade) */
/* fixed (não absolute): no celular a tela rola e é longa; a camada precisa
   cobrir a JANELA, não o topo do contêiner alto (senão a ficha abriria acima
   da rolagem atual). */
.fl-ficha{position:fixed;inset:0;background:rgba(8,13,21,.92);display:flex;
  align-items:center;justify-content:center;padding:20px;z-index:5}
.fl-ficha-cartao{display:flex;gap:20px;max-width:820px;width:100%;background:var(--cartao);
  border:1px solid var(--cartao-borda);border-radius:16px;padding:20px}
.fl-ficha-capa{width:200px;flex:none;aspect-ratio:2/3;border-radius:12px;background:var(--superficie);overflow:hidden}
.fl-ficha-capa img{width:100%;height:100%;object-fit:cover}
.fl-ficha-dir{flex:1;min-width:0}
.fl-ficha-dir h1{font-size:22px;margin:0 0 6px}
.fl-ficha-meta{color:var(--fraco);font-size:14px;margin-bottom:12px}
.fl-aviso{background:rgba(226,164,76,.10);border:1px solid rgba(226,164,76,.35);color:#f2d29a;
  border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px}
@media(max-width:620px){
  .fl-ficha-cartao{flex-direction:column;align-items:center;text-align:center}
  .fl-ficha-capa{width:150px}
}

/* player do filme (sobrepõe tudo) */
.fl-player{position:fixed;inset:0;background:#000;z-index:6;display:flex;align-items:center;justify-content:center}
.fl-video{width:100%;height:100%;background:#000}
.fl-player-barra{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;
  padding:14px 18px;background:linear-gradient(#000a,transparent)}
.fl-player-nome{flex:1;min-width:0;font-size:18px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-fechar{border:1px solid var(--contorno-borda);background:rgba(0,0,0,.4);color:var(--tinta);
  border-radius:10px;padding:8px 14px;font:inherit;cursor:pointer}
.fl-fechar:hover{border-color:var(--destaque)}
.fl-msg{max-width:440px;padding:0 24px;text-align:center;color:var(--tinta);font-size:16px;line-height:1.6}

/* ficha rica (rola quando o conteúdo é grande) */
.fl-ficha{align-items:flex-start;overflow:auto}
.fl-ficha-corpo{max-width:900px;width:100%;margin:0 auto}
.fl-enredo{margin:12px 0;font-size:14px;line-height:1.6;color:var(--tinta)}
.fl-enredo.fraco{color:var(--fraco)}
.fl-sobre{margin-top:18px;border-top:1px solid var(--cartao-borda);padding-top:14px}
.fl-sobre-tit{color:var(--fraco);font-size:12px;letter-spacing:.08em;font-weight:700;margin-bottom:8px}
.fl-dados{display:grid;grid-template-columns:1fr;gap:6px}
.fl-dado{display:flex;gap:10px;font-size:14px}
.fl-dado-k{color:var(--fraco);min-width:96px;flex:none}
.fl-dado-v{color:var(--tinta)}
.fl-ficha .faixa{margin-top:18px}
.fl-ficha .faixa-seta{top:110px}
@media(min-width:620px){ .fl-dados{grid-template-columns:1fr 1fr} .fl-dado-k{min-width:80px} }

/* estrela de favorito na linha do canal (Ao vivo) — ★ âmbar quando ativo */
.av-estrela{flex:none;margin-left:6px;border:0;background:transparent;color:var(--fraco);
  font-size:16px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:8px}
.av-estrela.ativa{color:var(--alerta)}
.av-estrela:hover{color:var(--tinta)}

/* ===== Séries (etapa 5): abas de temporada, episódios, próximo ===== */
.se-abas{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.se-aba{padding:8px 14px;border:1px solid var(--contorno-borda);border-radius:99px;
  background:transparent;color:var(--tinta);font:inherit;font-size:14px;cursor:pointer}
.se-aba.sel{background:var(--destaque);color:var(--destaque-preto);border-color:var(--destaque);font-weight:700}
.se-eps{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.se-ep{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--cartao-borda);
  border-radius:10px;background:var(--superficie);cursor:pointer}
.se-ep:hover{border-color:var(--destaque)}
.se-ep-num{width:30px;flex:none;text-align:center;font-family:monospace;color:var(--fraco);font-size:14px}
.se-ep-mid{flex:1;min-width:0}
.se-ep-tit{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-ep-sub{font-size:12px;color:var(--fraco);margin-top:2px}
.se-ep-sub.visto{color:var(--destaque)}
.se-ep-play{flex:none;color:var(--destaque);font-size:14px}

/* cartão "Próximo episódio em 5s" / "Ainda está assistindo?" */
.se-proximo{position:absolute;right:22px;bottom:22px;max-width:360px;background:rgba(14,21,34,.96);
  border:1px solid var(--cartao-borda);border-radius:14px;padding:16px 18px;z-index:7;
  box-shadow:0 16px 48px rgba(0,0,0,.5)}
.se-proximo-rot{color:var(--fraco);font-size:11px;letter-spacing:.08em;font-weight:700;text-transform:uppercase}
.se-proximo-tit{font-size:16px;font-weight:700;margin:4px 0 4px}
.se-proximo-conta{color:var(--destaque);font-size:14px;margin-bottom:6px}
.se-proximo .principal{margin-top:8px}
.se-proximo .secundario{margin-top:8px}
@media(max-width:620px){ .se-proximo{left:16px;right:16px;max-width:none} }

/* ===== Ajustes (etapa 6) ===== */
/* a tela cheia é flex-row por padrão (uma coluna única nos outros); aqui são
   dois filhos (cabeçalho + corpo), então empilha em coluna. */
#tela-ajustes{flex-direction:column}
.aj-topo{display:flex;align-items:center;gap:8px;padding:6px 4px 10px;flex:none}
.aj-corpo{overflow:auto;flex:1;min-height:0;padding:0 4px 16px;max-width:820px;width:100%;margin:0 auto}
.aj-secao{margin-top:18px;background:var(--superficie);border:1px solid var(--cartao-borda);border-radius:14px;padding:6px 14px 10px}
.aj-secao-tit{color:var(--fraco);font-size:12px;letter-spacing:.06em;font-weight:700;text-transform:uppercase;margin:10px 0 4px}
.aj-linha{display:flex;align-items:center;gap:10px;padding:11px 2px;border-top:1px solid var(--cartao-borda)}
.aj-secao-tit + .aj-linha{border-top:0}
.aj-linha-esq{flex:1;min-width:0}
.aj-linha-rot{font-size:15px}
.aj-linha-val{font-size:13px;color:var(--fraco);margin-top:2px}
.aj-linha.clicavel{cursor:pointer}
.aj-linha.clicavel:hover .aj-linha-rot{color:var(--destaque)}
.aj-seta{color:var(--fraco);font-size:20px}
.aj-ops{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 10px}
.aj-op{padding:8px 14px;border:1px solid var(--contorno-borda);border-radius:99px;background:transparent;
  color:var(--tinta);font:inherit;font-size:14px;cursor:pointer}
.aj-op.sel{background:var(--destaque);color:var(--destaque-preto);border-color:var(--destaque);font-weight:700}
.aj-aviso{background:rgba(226,164,76,.10);border:1px solid rgba(226,164,76,.35);color:#f2d29a;
  border-radius:10px;padding:10px 12px;font-size:13px;margin:8px 0}
.aj-nota{color:var(--fraco);font-size:12px;padding:6px 2px 2px}

/* modal de PIN / avisos */
.pin-overlay{position:fixed;inset:0;background:rgba(8,13,21,.75);display:flex;align-items:center;
  justify-content:center;padding:20px;z-index:50}
.pin-card{width:100%;max-width:360px;background:var(--cartao);border:1px solid var(--cartao-borda);
  border-radius:16px;padding:20px}
.pin-tit{font-size:18px;font-weight:700;margin-bottom:6px}
.pin-sub{color:var(--fraco);font-size:14px;margin-bottom:12px;line-height:1.5}
.pin-inp{width:100%;padding:12px 14px;border:1px solid var(--campo-borda);border-radius:12px;
  background:var(--campo);color:var(--tinta);font:inherit;font-size:22px;text-align:center;letter-spacing:.3em;outline:none}
.pin-inp:focus{border-color:var(--destaque)}
.pin-msg{color:var(--perigo);font-size:13px;min-height:16px;margin-top:8px;text-align:center}

/* ===== Ajustes finos para CELULAR (o que dá para corrigir por inspeção) ===== */
@media(max-width:600px){
  /* a grade de filmes/séries NÃO herda "capas por linha" no celular: usa o
     automático, com capas de tamanho tocável */
  .fl-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important}
  /* estrela do favorito com alvo de toque maior, sem colar no nome do canal */
  .av-estrela{font-size:20px;padding:8px 10px}
  /* ficha e cartão "próximo" com margem de segurança */
  .fl-ficha{padding:12px}
  .se-proximo{left:12px;right:12px;bottom:12px}
  /* categorias em linha rolável não podem espremer o texto */
  .av-cat{min-height:44px}
  /* botões de pílula do Ajustes com toque confortável */
  .aj-op{padding:10px 16px}
  /* o vídeo do Ao vivo no celular ocupa a largura, com altura 16:9 */
  .av-dir .av-video{aspect-ratio:16/9;height:auto}
}

/* ===== Escolha de servidor (empate na descoberta) ===== */
.escolha-lista{margin:8px 0 4px;display:flex;flex-direction:column;gap:8px}
.escolha-op{text-align:left;padding:14px;border:1px solid var(--cartao-borda);border-radius:12px;
  background:var(--superficie);color:var(--tinta);font:inherit;cursor:pointer;width:100%}
.escolha-op:hover{border-color:var(--destaque)}
.escolha-nome{font-size:16px;font-weight:700}
.escolha-sub{font-size:13px;color:var(--fraco);margin-top:2px}

/* ===== CELULAR: a PÁGINA rola nas telas altas =====================================
   No PC cada coluna rola por dentro e a página fica fixa em 100vh (body.aovivo, só
   em min-width:821). No celular a tela vira UMA coluna só, mais alta que a janela —
   então quem tem de rolar é a PÁGINA. Três travas escondiam o cabeçalho no topo:
     1) html,body{height:100%} prendia o documento na altura da janela;
     2) .centro{justify-content:center} centralizava o bloco alto e empurrava o
        cabeçalho para ACIMA da janela, sem como rolar até ele;
     3) .tela-inicial{overflow:auto} + flex:none prendiam a rolagem numa caixa que
        não tinha teto (altura = conteúdo), então nada rolava.
   Correção: soltar o documento, alinhar ao topo e deixar as telas altas fluírem. */
@media(max-width:820px){
  html,body{height:auto}                 /* solta o documento p/ a página rolar */
  .centro{justify-content:flex-start}    /* conteúdo começa no topo; cabeçalho visível */
  .tela-inicial{overflow:visible}        /* rola a PÁGINA, não a caixa */
  .tela-cheia{overflow:visible}
}

/* ── Controle remoto / teclado ──────────────────────────────────────────────
   O foco.js poe tabindex="0" nos itens clicaveis; sem contorno visivel, quem
   usa controle nao enxerga onde esta. O :focus puro e' o que vale nas TVs;
   onde existe :focus-visible (navegador de PC/celular), trocamos para ele,
   senao o contorno apareceria tambem no clique de mouse.
   ────────────────────────────────────────────────────────────────────────── */
[tabindex="0"]:focus{outline:3px solid var(--destaque);outline-offset:2px;border-radius:8px}
@supports selector(:focus-visible){
  [tabindex="0"]:focus{outline:none}
  [tabindex="0"]:focus-visible{outline:3px solid var(--destaque);outline-offset:2px;border-radius:8px}
}

/* ── Botao proprio de tela cheia (telacheia.js) ─────────────────────────────
   Canto superior DIREITO do video. No celular e no PC ele convive com os
   controles nativos, que ficam embaixo; na TV e' o unico caminho alcancavel
   pelo controle remoto. 48px de lado: acima do minimo de toque e grande o
   bastante para ser visto de longe, na TV.
   ────────────────────────────────────────────────────────────────────────── */
.mv-cheia{position:absolute;top:10px;right:10px;z-index:7;
  width:48px;height:48px;min-width:48px;min-height:48px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:10px;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font-size:22px;line-height:1}
.mv-cheia:hover{background:rgba(0,0,0,.75)}

/* ── Alvos de toque no celular ──────────────────────────────────────────────
   Dedo nao acerta alvo de 30px. Abaixo de 820px (onde a tela empilha), tudo
   que se clica passa a ter 44px de altura minima.
   So' `min-height` nos que JA sao flex com align-items:center — ali o texto
   continua centralizado sozinho. Nos que nao sao flex, o min-height sozinho
   deixaria o texto colado no topo, entao esses ganham padding vertical em vez
   de altura: cresce igual e nao mexe no alinhamento de nada.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:820px){
  /* ja' sao flex centrados: basta a altura */
  .av-canal,.se-ep,.aj-linha,.lw-item{min-height:44px}

  /* nao sao flex: cresce por padding, sem mudar o alinhamento */
  .av-cat{padding:13px 14px}
  .se-aba,.aj-op{padding:13px 16px}
  .escolha-op{min-height:44px}

  /* botoes redondos/quadrados pequenos */
  .av-voltar{width:44px;height:44px}
  .fl-fechar{min-height:44px;padding-left:14px;padding-right:14px}
  .av-estrela{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}