/* =====================================================================
   MEU ACERVO - identidade visual
   Escuro cinematografico: banner de destaque, fileiras horizontais,
   cartao que cresce no hover. Identidade propria, sem marca de terceiros.
   ===================================================================== */

:root{
  /* O site inteiro e escuro, e isto avisa o NAVEGADOR disso. Sem esta
     linha ele desenha as barras de rolagem, os campos de formulario e os
     menus nativos no tema claro - e era exatamente o que acontecia com
     a barra de rolagem do painel: uma tira cinza-clara colada num menu
     preto. Uma palavra resolve em toda parte, inclusive onde o CSS de
     barra de rolagem nao alcanca. */
  color-scheme:dark;

  /* ---- cinza escuro: a base do site ------------------------------ */
  --preto:#0a0a0b;
  --topo:#101013;          /* barra do topo */
  --fundo:#101012;
  --fundo2:#1a1a1e;
  --fundo3:#26262b;
  --borda:#31313a;

  /* ---- azul: so o acento (acao, foco, item ativo) ---------------- */
  --azul:#2f7dfb;
  --azul-forte:#5b9cff;
  --azul-vidro:rgba(47,125,251,.15);
  --azul-linha:rgba(47,125,251,.45);

  --texto:#f2f3f5;
  --fraco:#9b9ba6;
  --apagado:#6c6c78;

  --ok:#3ecf72;
  --alerta:#f0b429;
  --erro:#ef5a44;

  /* A cor de "onde eu parei" - no risco do player e na tira embaixo do
     cartao. Tem variavel propria, e nao usa o --azul direto, porque as
     duas coisas sao independentes: o --azul e a cor de ACAO (botao,
     foco, item ativo) e esta e a cor de PROGRESSO. Uma pode mudar sem
     arrastar a outra.

     Era vermelha, como na Netflix. Ficou azul para acompanhar a marca:
     o azul cromado do MEUFLIX e a cor do site, e uma tira vermelha no
     meio dele destoava. */
  --progresso:#2f7dfb;

  /* Apelidos antigos, para nenhum canto do sistema ficar sem cor. */
  --marinho:var(--topo);
  --dourado:var(--azul);
  --dourado-forte:var(--azul-forte);

  --raio:8px;
  --raio-g:14px;
  --sombra:0 20px 55px rgba(0,0,0,.7);
  --topo-altura:72px;
}

*{box-sizing:border-box}
/* O atributo hidden esconde via display:none do proprio navegador, que
   tem prioridade BAIXA: qualquer .botao{display:inline-flex} ou
   .circ{display:grid} passa por cima e o elemento aparece assim mesmo.
   Esta linha devolve ao hidden o poder de esconder. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--preto)}
body{
  color:var(--texto);
  font:15px/1.6 "Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.fraco{color:var(--fraco);font-size:.86rem}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}

/* ---------------------------------------------------------------- topo */
/* Transparente sobre o banner; ao rolar um pouco vira uma barra solida
   (a classe .solido entra pelo app.js). Sem isso o texto da pagina
   passava por tras e ficava ilegivel. */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:1.5rem;
  height:var(--topo-altura);padding:0 2.6vw;
  background:linear-gradient(180deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.55) 55%,transparent 100%);
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
.topo.solido{
  background:rgba(16,16,19,.94);
  backdrop-filter:saturate(150%) blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 30px rgba(0,0,0,.6);
}

/* marca */
/* A MARCA.
   Duas imagens no HTML, uma visivel de cada vez: a palavra inteira nas
   telas largas, so o M nas estreitas. Encolher a palavra ate caber num
   celular deixaria a letra com 6px de altura, ilegivel - e o M sozinho
   e justamente o que uma marca serve para ser nesse tamanho. */
.marca{
  display:inline-flex;align-items:center;flex:0 0 auto;
  /* 34px era discreto demais para uma marca: ao lado de sete itens de
     menu ela lia como mais um deles. 46px poe a marca acima do menu na
     hierarquia sem empurrar a altura do topo, que ja tem folga. */
  height:var(--marca-altura,46px);
}
.marca img{display:block;height:100%;width:auto;
  /* O azul da logo ja brilha sozinho; um filtro leve so garante que ela
     nao desapareca contra o topo escuro quando a pagina rola. */
  filter:drop-shadow(0 2px 10px rgba(47,125,251,.35));}
/* DUAS CLASSES, e nao uma. ".marca img" acima vale (0,1,1) em
   especificidade - classe mais elemento - e venceria um ".marca-m"
   solto, que vale (0,1,0). O sintoma era as DUAS logos aparecerem lado a
   lado no topo: a palavra e o M. */
.marca .marca-m{display:none}

@media (max-width:900px){
  /* Nao ha largura para a palavra: fica o M. */
  .marca .marca-palavra{display:none}
  .marca .marca-m{display:block}
  .marca{--marca-altura:40px}
}

/* OS TRES TRACINHOS DO CELULAR.
   Escondido por padrao: acima de 640px o menu inteiro cabe na barra e
   os tracinhos seriam um clique a mais para chegar no mesmo lugar. A
   regra que o mostra esta la embaixo, no bloco de 640px. */
.menu-tres{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 9px;flex:0 0 auto;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
}
.menu-tres span{
  display:block;height:2px;border-radius:2px;background:#e8eaf0;
  transition:transform .18s ease,opacity .18s ease;
}
/* Aberto, os tracinhos viram um X: e o sinal de que aquele mesmo
   botao FECHA - sem ele a pessoa procura um "fechar" que nao existe. */
.menu-tres[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-tres[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-tres[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-tres:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* A TV nunca mostra os tracinhos: la a largura sobra e o controle nao
   tem dedo. Se um dia a TV entregar viewport estreita, esta linha e o
   que impede o menu de virar painel de celular no meio da sala. */
html.tv .menu-tres{display:none !important}

/* menu principal */
.topo nav{display:flex;align-items:center;gap:.15rem;flex:1;min-width:0;margin-left:1.6rem}
/* Menu em caixa alta. Em caixa alta as letras precisam de mais ar entre
   si, senao a palavra vira um bloco cinza - por isso o letter-spacing
   sobe de .01em para .09em, e a Outfit entra no lugar da Inter (tem as
   maiusculas mais abertas). */
.topo nav a,.nav-botao{
  position:relative;
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  padding:.58rem 1rem;border-radius:6px;border:0;background:none;cursor:pointer;
  color:#b0b0bd;font-size:.74rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;
  font-family:"Outfit","Inter","Segoe UI",system-ui,sans-serif;
  transition:color .18s,background .18s;
}
.topo nav a:hover,.nav-botao:hover{color:#fff;background:rgba(255,255,255,.07)}
.topo nav a.on,.nav-botao.on{color:#fff;font-weight:700;background:rgba(255,255,255,.1)}
/* risco fino embaixo do item ativo - a caixa alta sozinha ja e uniforme
   demais para distinguir so pelo peso */
.topo nav a.on::after,.nav-botao.on::after{
  content:"";position:absolute;left:1rem;right:1rem;bottom:.28rem;height:2px;
  border-radius:2px;background:var(--azul-forte);
}
.ico{width:16px;height:16px;flex-shrink:0;opacity:.7}
.topo nav a:hover .ico,.nav-botao:hover .ico{opacity:1}
.topo nav a.on .ico,.nav-botao.on .ico{color:var(--azul-forte);opacity:1}

/* submenu de generos */
/* DENTRO DA GAVETA "EXPLORAR": em cima os dois recortes prontos, com
   icone; embaixo a lista de generos, com a contagem. A linha e o
   rotulo separam as duas coisas - sem eles, "Premiados" leria como um
   genero chamado Premiados. */
/* justify-content: os generos usam "space-between" para jogar a
   contagem na direita; estes dois nao tem contagem, e herdar a regra
   empurrava o texto para longe do icone. */
.nav-lista .nav-destaque{
  justify-content:flex-start;gap:.55rem;
  font-weight:600;color:var(--texto);
}
.nav-lista .nav-destaque .ico{width:16px;height:16px;margin-right:.5rem;opacity:.8}
.nav-lista .nav-titulo{
  display:block;padding:.6rem .9rem .3rem;margin-top:.25rem;
  border-top:1px solid var(--borda);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--apagado);
}

.nav-menu{position:relative}
.nav-botao .seta-baixo{font-size:.46rem;opacity:.55;margin-left:.1rem}
.nav-lista{
  position:absolute;left:0;top:calc(100% + .45rem);z-index:70;
  min-width:250px;max-height:62vh;overflow-y:auto;
  background:rgba(20,20,24,.98);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:.4rem;box-shadow:var(--sombra);
  backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* A VISIBILIDADE MUDA NA HORA AO ABRIR E SO NO FIM AO FECHAR.
     Com "visibility .18s" nos dois sentidos, a lista continuava
     hidden durante todo o fade de abertura - e um elemento hidden NAO
     ACEITA FOCO. No controle remoto isso aparecia assim: a seta para
     baixo abria o menu e o foco ficava parado no botao "Generos",
     como se nada tivesse acontecido.
     Fechando, o atraso continua: sem ele a lista sumiria de um golpe
     no primeiro quadro, antes de o fade acontecer. */
  transition:opacity .18s,transform .18s,visibility 0s .18s;
}
.nav-menu:hover .nav-lista,.nav-menu.aberto .nav-lista{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .18s,transform .18s,visibility 0s;
}
.nav-lista a{
  display:flex !important;align-items:center;justify-content:space-between;
  width:100%;letter-spacing:0;font-weight:500;font-size:.86rem;
  color:var(--fraco);padding:.5rem .7rem;border-radius:7px;
}
.nav-lista a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-lista .qtd{
  color:var(--fraco);font-size:.72rem;font-weight:600;
  background:rgba(255,255,255,.07);padding:.05rem .45rem;border-radius:20px;
}

/* lado direito */
/* "flex-shrink:0" com "min-width:0": ele nao encolhe enquanto sobra
   espaco - que e a razao de ser dele, manter busca e avatar inteiros -,
   mas quando NAO sobra, encolhe em vez de empurrar o avatar para fora
   da tela. Era o que acontecia no celular com a busca aberta. */
.topo-dir{display:flex;align-items:center;gap:.7rem;margin-left:auto;
  flex-shrink:0;min-width:0;max-width:100%}
@media (max-width:640px){
  .topo-dir{flex-shrink:1}
}
.sair{color:var(--fraco);font-size:.84rem}
.sair:hover{color:var(--erro)}

/* ------------------------------------------------------------- destaque */
/* O RECUO SAIU DAQUI E FOI PARA O SLIDE.
   Com o carrossel, o banner virou uma grade e os slides passaram a ser
   itens dela - e item de grade mora DENTRO do padding do pai. Os 3vw
   que antes so afastavam o texto viraram uma tira preta de cada lado da
   arte, porque a imagem agora comeca no slide, e nao no banner.

   No slide, o recuo continua afastando o texto e a arte volta a ocupar
   a largura inteira: o fundo e posicionado por inset:0, que cobre o
   padding tambem. */
.destaque{
  position:relative;min-height:80vh;display:flex;align-items:flex-end;
  padding:0;margin-bottom:-4vh;
}
/* ---- o carrossel do banner ------------------------------------------
   Os slides ficam EMPILHADOS no mesmo lugar, e nao lado a lado num
   trilho que desliza. Empilhados, a altura do banner e a do slide mais
   alto e nao muda quando a sinopse do proximo e mais curta - com trilho
   deslizante o resto da pagina subiria e desceria a cada troca.

   Sem JavaScript nao ha troca nenhuma: o primeiro slide esta visivel no
   HTML e os outros escondidos. Fica um banner comum, que e exatamente o
   que havia antes. */
.destaque-carrossel{display:grid}
.destaque-carrossel > .destaque-slide{
  grid-area:1/1;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s ease;
}
.destaque-carrossel > .destaque-slide.on{opacity:1;visibility:visible;pointer-events:auto}
.destaque-slide{
  position:relative;width:100%;min-height:inherit;
  display:flex;align-items:flex-end;
  padding:0 3vw 9vh;
}

/* ---- as barrinhas, que tambem sao o relogio -------------------------
   Cada barra e um botao (leva ao slide dela) E a contagem do tempo que
   falta: a que esta acesa se preenche da esquerda para a direita ao
   longo dos nove segundos. Uma coisa so, e nao um relogio separado -
   nada mais entra na tela para dizer o que a barra ja podia dizer. */
.destaque-pontos{
  position:absolute;right:3vw;bottom:9vh;z-index:2;
  display:flex;gap:.5rem;
}
.destaque-pontos button{
  position:relative;overflow:hidden;
  width:34px;height:5px;border-radius:99px;padding:0;cursor:pointer;
  border:0;background:rgba(255,255,255,.28);transition:background .2s;
}
.destaque-pontos button:hover{background:rgba(255,255,255,.55)}
.destaque-pontos button:focus-visible{outline:2px solid var(--azul-forte);outline-offset:3px}

.destaque-pontos button i{
  position:absolute;inset:0;display:block;background:var(--azul-forte);
  transform:scaleX(0);transform-origin:left center;
}
/* A duracao vem do JavaScript, do mesmo numero que troca o slide: dois
   tempos escritos em lugares diferentes iam se separar no primeiro dia
   em que alguem mudasse um deles. */
.destaque-pontos button.on i{animation:ponto-enche linear forwards}
@keyframes ponto-enche{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Parado (mouse em cima, aba escondida), a barra para junto - senao ela
   prometeria uma troca que nao vai acontecer. */
.destaque-pontos.parado button.on i{animation-play-state:paused}

/* Na TV a barra de 5px nao existe a tres metros. */
html.tv .destaque-pontos button{height:8px;width:48px}
html.tv .destaque-pontos button:focus{outline:3px solid #fff;outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .destaque-carrossel > .destaque-slide{transition:none}
  /* Sem troca automatica nao ha tempo para mostrar: a barra da vez fica
     cheia, e so. */
  .destaque-pontos button.on i{animation:none;transform:scaleX(1)}
}

.destaque-fundo{position:absolute;inset:0;z-index:0;overflow:hidden}
.destaque-fundo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.destaque-fundo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,9,12,.96) 0%,rgba(8,9,12,.75) 38%,rgba(8,9,12,.15) 75%),
    linear-gradient(0deg,var(--preto) 2%,transparent 45%);
}
.destaque-corpo{position:relative;z-index:1;max-width:640px}
.destaque-logo{max-width:min(420px,60vw);max-height:170px;object-fit:contain;margin-bottom:1.1rem}
.destaque h1{font-size:clamp(2rem,4.2vw,3.6rem);text-shadow:0 3px 24px rgba(0,0,0,.8)}
.destaque .tagline{
  color:var(--azul);font-style:italic;font-size:1.02rem;margin:.6rem 0 0;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.destaque .sinopse{
  margin:1rem 0 1.6rem;font-size:1rem;color:#dfe4ec;max-width:56ch;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.destaque-acoes{display:flex;gap:.7rem;flex-wrap:wrap}

/* linha de metadados */
.meta-linha{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.9rem;font-size:.9rem}
.meta-linha .sep{color:var(--apagado)}
/* ---------------------------------------------- classificacao indicativa
   Cores oficiais do Ministerio da Justica. Quem conhece o sistema le a
   faixa pela cor antes de ler o numero, entao cada faixa tem a sua - e
   o quadrado colorido com o numero em branco, como aparece no filme. */
.cert{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.45em;padding:.1rem .32rem;border-radius:4px;
  font-size:.76rem;font-weight:800;line-height:1.25;
  color:#fff;background:#5a5a63;border:1px solid transparent;
}
.cert.faixa-l  {background:#1e9b45}
.cert.faixa-10 {background:#3a8ecb}
.cert.faixa-12 {background:#f0a71a;color:#1b1b1b}
.cert.faixa-14 {background:#e8721c}
.cert.faixa-16 {background:#d8232a}
/* o 18 e preto com contorno claro, senao some no fundo escuro do site */
.cert.faixa-18 {background:#101014;border-color:rgba(255,255,255,.5)}

/* ------------------------------------------------------------ nota
   A marca de quem deu a nota, e o numero, na MESMA altura - as duas
   caixas alinhadas pelo centro e com a mesma linha de base visual, que
   e o que faz o conjunto parecer uma peca so e nao dois adesivos
   colados. A logo do IMDb e desenhada aqui (retangulo amarelo, texto
   preto): acompanha o tamanho da fonte sozinha e nao pesa requisicao.

   A nota e a do IMDb quando existe (ver Imdb.php); enquanto a lista
   oficial nao roda, cai para a do TMDB - dizendo TMDB. */
/* align-items:stretch e o que iguala as alturas: a caixa da logo NAO
   tem altura propria, ela estica ate a altura da linha - que quem
   define e o numero. Assim as duas batem certinho no cartao e na ficha
   sem eu ter de acertar pixel a pixel em cada tamanho. */
.nota-card{
  display:inline-flex;align-items:stretch;gap:.3rem;
  line-height:1;white-space:nowrap;vertical-align:middle;
}

/* --- a logo -------------------------------------------------------- */
.nota-card .nota-imdb,
.nota-card .nota-fonte{
  font-style:normal;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 .42em;border-radius:.24em;
  font-weight:800;letter-spacing:-.01em;
  font-family:"Outfit","Inter",system-ui,sans-serif;
  flex-shrink:0;
}
.nota-card .nota-imdb{
  background:#f5c518;color:#0c0c0c;font-size:.82em;
  box-shadow:0 1px 4px rgba(245,197,24,.28);
}
/* Enquanto a lista do IMDb nao rodou: mesma forma, cor apagada, para
   nao competir com a amarela e para a diferenca ser visivel de longe. */
.nota-card .nota-fonte{
  background:rgba(255,255,255,.12);color:#c8cdd6;
  font-size:.66em;letter-spacing:.04em;
}

/* --- o numero: e ele que da a altura da linha ----------------------- */
.nota-card .nota-valor{
  display:inline-flex;align-items:center;
  font-family:"Outfit","Inter",system-ui,sans-serif;
  font-weight:800;font-size:1.1em;line-height:1.34;
  color:#f5c518;                     /* amarelo do IMDb */
  letter-spacing:-.01em;
}
.nota-card.tmdb .nota-valor{color:#e8ecf2}

/* tamanho grande, na ficha */
.nota-card.grande{gap:.42rem}
.nota-card.grande .nota-valor{font-size:1.7rem}
.nota-card.grande .nota-imdb{font-size:.92rem;border-radius:.22em}
.nota-card.grande .nota-fonte{font-size:.78rem}

/* ---------------------------------------------------------- badge NOVO
   Canto de cima do cartao, do lado oposto a etiqueta de links. Some
   sozinho: quem decide se ainda e "novo" e a data, no PHP. */
.badge-novo{
  position:absolute;top:.5rem;left:.5rem;z-index:4;
  display:inline-flex;align-items:center;gap:.22rem;
  font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.2rem .42rem;border-radius:4px;color:#fff;
  background:linear-gradient(135deg,#e50914,#b0060f);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.badge-novo.episodio{background:linear-gradient(135deg,#2f7dfb,#1b5ed6)}
.badge-novo.temporada{background:linear-gradient(135deg,#8b5cf6,#6d3ae0)}
/* Com badge, a etiqueta de links desce uma linha em vez de ficar por
   baixo dela. A direita ja e da etiqueta de serie. */
.cartao:hover .badge-novo,.cartao:focus-within .badge-novo{opacity:0;transition:opacity .18s}

/* -------------------------------------------------------------- botoes */
/* Uma familia so, com quatro pesos: cheio (acao principal), claro,
   vidro (sobre imagem) e contorno. Nada de brilho exagerado. */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  /* CAIXA ALTA EM TODO BOTAO.
     Um botao nao e uma frase: e um comando curto. Em caixa alta ele para
     de se confundir com o texto ao redor, e a linha de base fica reta -
     sem as descidas do g e do p furando o alinhamento com o icone.
     Caixa alta pede espaco entre as letras, senao vira um bloco: dai o
     letter-spacing. */
  text-transform:uppercase;letter-spacing:.055em;
  padding:.7rem 1.5rem;border:1px solid transparent;
  /* POUCO ARREDONDADO, DE PROPOSITO. Era 8px, e num botao de 44px de
     altura aquilo ja lia como pilula. 6px mantem o canto vivo. */
  border-radius:6px;
  background:var(--azul);color:#fff;
  font-size:.82rem;font-weight:700;font-family:inherit;line-height:1.2;
  cursor:pointer;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s,transform .12s,box-shadow .18s;
}
.botao:hover{background:var(--azul-forte);color:#fff;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(47,125,251,.3)}
.botao:active{transform:translateY(0)}
.botao .ico{width:17px;height:17px;opacity:1}

/* =====================================================================
   OS BOTOES PRINCIPAIS, COM A CARA DA MARCA
   =====================================================================
   Assistir, Trailer e Mais informacoes sao os tres botoes que aparecem
   em cima de um cartaz de cinema, e por isso precisam de mais do que uma
   cor chapada: precisam do mesmo azul cromado da logo, que e o que
   amarra a tela toda.

   O desenho copia a logo em tres camadas, e cada uma resolve um
   problema:

     1. o GRADIENTE (claro em cima, escuro embaixo) da o volume - e o que
        faz a letra da logo parecer metal e nao papel;
     2. a LINHA CLARA no topo, por dentro da borda, e o reflexo de luz;
        sem ela o gradiente sozinho parece um botao desbotado;
     3. o BRILHO em volta separa o botao do cartaz atras dele. Sobre uma
        cena clara, um botao azul liso some.
   ===================================================================== */
.botao.marca{
  position:relative;isolation:isolate;
  border:0;border-radius:6px;font-weight:700;letter-spacing:.07em;
  /* O GRADIENTE FICOU MAIS CURTO. Antes ele ia de #4d9bff a #0b39c4 -
     quase preto no pe -, e o botao parecia um pote de tinta. Agora a
     variacao e pequena: da volume sem virar desenho. */
  background:linear-gradient(180deg,#3f8dfb 0%,#2470f2 55%,#1655d8 100%);
  color:#fff;
  box-shadow:
    /* o reflexo de luz por dentro, no alto - fino */
    inset 0 1px 0 rgba(255,255,255,.34),
    /* o vinco escuro por dentro, embaixo */
    inset 0 -1px 0 rgba(0,0,0,.28),
    /* SOMBRA, E NAO HALO. O que havia antes era um anel azul de 1px
       somado a um brilho largo: sobre o cartaz aquilo lia como se o
       botao estivesse aceso. Uma sombra que cai para baixo assenta o
       botao na tela em vez de fazer ele flutuar. */
    0 1px 1px rgba(0,0,0,.28),
    0 6px 16px rgba(9,44,140,.42);
  text-shadow:0 1px 1px rgba(0,0,0,.28);
}
.botao.marca:hover{
  background:linear-gradient(180deg,#57a0ff 0%,#2f7dfb 55%,#1c62e8 100%);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 2px 2px rgba(0,0,0,.24),
    0 12px 26px rgba(24,86,230,.44);
}
.botao.marca:active{
  transform:translateY(0);
  background:linear-gradient(180deg,#2470f2 0%,#1655d8 60%,#1247bd 100%);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.38),0 1px 1px rgba(0,0,0,.22);
}
.botao.marca .ico{width:18px;height:18px}

/* A versao de vidro, para o botao que fica AO LADO do principal (o
   Trailer ao lado do Assistir). Mesma familia, mesmo bisel, sem disputar
   a atencao: dois botoes azuis iguais lado a lado nao dizem qual e o
   primeiro. */
.botao.marca.vidro{
  background:linear-gradient(180deg,rgba(120,170,255,.16) 0%,rgba(20,60,150,.22) 100%);
  color:#dce8ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(146,186,255,.28),
    0 1px 1px rgba(0,0,0,.24),
    0 6px 16px rgba(0,0,0,.3);
  backdrop-filter:blur(10px);
}
.botao.marca.vidro:hover{
  background:linear-gradient(180deg,rgba(140,188,255,.26) 0%,rgba(28,84,200,.34) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(168,203,255,.45),
    0 2px 2px rgba(0,0,0,.22),
    0 12px 24px rgba(0,0,0,.36);
}

/* claro: o mais forte de todos, para a acao numero um sobre banner */
.botao.claro{background:#fff;color:#111;border-color:#fff}
.botao.claro:hover{background:rgba(255,255,255,.82);color:#111;box-shadow:0 6px 18px rgba(0,0,0,.4)}

/* vidro: sobre imagem, sem competir com o principal */
.botao.secundario{
  background:rgba(255,255,255,.11);color:var(--texto);
  border-color:rgba(255,255,255,.14);backdrop-filter:blur(8px);
}
.botao.secundario:hover{background:rgba(255,255,255,.2);color:#fff;box-shadow:none}

/* contorno: acoes de apoio */
.botao.contorno{background:transparent;border-color:rgba(255,255,255,.22);color:var(--fraco)}
.botao.contorno:hover{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.06);box-shadow:none}

.botao.pequeno{padding:.42rem .85rem;font-size:.72rem;border-radius:5px;gap:.4rem;letter-spacing:.05em}
.botao.pequeno .ico{width:14px;height:14px}
.botao.perigo{background:var(--erro);color:#fff}
.botao.perigo:hover{background:#f4715d;box-shadow:0 6px 18px rgba(239,90,68,.3)}
.botao.secundario.perigo{background:rgba(239,90,68,.14);color:var(--erro);border-color:rgba(239,90,68,.4)}
.botao[disabled]{opacity:.42;cursor:default;transform:none;box-shadow:none}

/* ------------------------------------------------------------ fileiras */
.conteudo{position:relative;z-index:2;padding-top:1.6rem;padding-bottom:5rem}
.sem-destaque{padding-top:calc(var(--topo-altura) + 2rem)}
.fileira{margin:0 0 2.6rem;position:relative}
.fileira h2{
  font-family:"Outfit","Inter",system-ui,sans-serif;
  font-size:1.16rem;font-weight:700;letter-spacing:.005em;
  margin:0 0 .9rem;padding:0 3vw;
  display:flex;align-items:center;gap:.6rem;
}
.fileira h2 .contagem{color:var(--apagado);font-size:.8rem;font-weight:400}
/* flow-root: sem ele as margens negativas do trilho "vazam" para fora da
   caixa e as setas, que se posicionam por ela, ficariam 164px acima do
   lugar. */
.trilho-caixa{position:relative;display:flow-root}

/* overflow-x:auto obriga o eixo vertical a recortar tambem: o que sai
   por cima ou por baixo do trilho some. Por isso o painel do hover
   aparecia cortado pela fileira de cima.

   A saida e dar folga DENTRO do trilho (padding) e devolver o espaco
   por fora (margem negativa): o cartao cresce dentro da area de recorte
   e a fileira continua ocupando a mesma altura na pagina. Agora a folga
   e dos dois lados - antes so havia embaixo, e o cartao nao tinha para
   onde subir. */
.trilho{
  display:flex;gap:.6rem;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  padding:170px 3vw 210px;margin-top:-164px;margin-bottom:-186px;
  scrollbar-width:none;

  /* A folga de cima passa por cima do titulo da fileira e do rodape da
     fileira anterior. Sem isto, essa faixa invisivel roubaria o mouse
     de quem esta embaixo dela. Os cartoes (e as setas, que ficam fora
     do trilho) continuam clicaveis normalmente. */
  pointer-events:none;
}
.trilho > *{pointer-events:auto}
.trilho::-webkit-scrollbar{display:none}

/* A fileira inteira sobe no empilhamento enquanto tem um cartao aberto,
   senao o cartao crescido passa por baixo da fileira seguinte (que vem
   depois no HTML e, por isso, e desenhada por cima). */
.fileira{position:relative;z-index:1}
.fileira:has(.cartao:hover),.fileira:has(.cartao:focus-visible){z-index:60}

.seta{
  position:absolute;top:0;bottom:24px;width:3vw;min-width:44px;z-index:12;
  background:rgba(8,9,12,.72);border:0;color:#fff;font-size:1.7rem;cursor:pointer;
  opacity:0;transition:opacity .2s;display:grid;place-items:center;
}
.trilho-caixa:hover .seta{opacity:1}
.seta:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:-4px}
.seta.esq{left:0}
.seta.dir{right:0}
.seta:hover{background:rgba(8,9,12,.92)}
/* Seta que nao leva a lugar nenhum e pior que seta nenhuma: o JS marca
   as pontas e elas somem. */
.seta[hidden]{display:none}

/* -------------------------------------------------------------- cartao */
.cartao{
  flex:0 0 auto;width:250px;position:relative;cursor:pointer;outline:none;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
  transform-origin:center top;
  align-self:flex-start;
}
.cartao .mini{
  position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:var(--fundo3);
  transition:border-radius .18s,box-shadow .25s;
}
.cartao .mini img.arte{width:100%;height:100%;object-fit:cover;display:block}
.cartao .mini::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.1) 45%,transparent 70%);
  opacity:.92;transition:opacity .25s;
}
.mini-titulo{
  position:absolute;left:.75rem;right:.75rem;bottom:.6rem;z-index:2;
  font-size:.88rem;font-weight:700;line-height:1.2;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:opacity .2s;
}
.mini-logo{
  position:absolute;left:.75rem;bottom:.6rem;z-index:2;
  width:auto;max-width:62%;max-height:42px;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.9));transition:opacity .2s;
}

/* ---- previa em video: entra depois de um tempinho de hover ---------- */
.cartao .previa{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s;background:#000}
/* O VIDEO NO TAMANHO CERTO, E SEM A MOLDURA DO YOUTUBE.

   O problema: mesmo com controls=0, o YouTube desenha por cima do video
   o titulo, o nome do canal, a logo e o botao de pausar. Nao da para
   esconder por CSS - o player e de outro dominio, nada daqui alcanca
   dentro dele. E aumentar o video para cortar a moldura devolveria o
   zoom que voce ja tinha reclamado.

   A saida: o iframe fica com a LARGURA do cartao e TRES VEZES a altura.
   O YouTube encaixa o video pela largura, entao ele sai do tamanho exato
   do cartao - sem zoom nenhum. O que sobra de iframe vira tarja preta
   em cima e embaixo, fora da area visivel, e e justamente ali que o
   player desenha o titulo e a logo. Some tudo, e o video fica intacto.

   (Antes a medida era 177.78vh x 56.25vw - da JANELA, nao do cartao: num
   cartao de 300px isso dava uma imagem de milhares de pixels.) */
.cartao .previa{overflow:hidden}
.cartao .previa iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:300%;
  border:0;pointer-events:none;
}
.cartao.tocando .previa{opacity:1}
.cartao.tocando .mini-titulo{opacity:0}
.cartao.tocando .mini::after{opacity:1}
.mudo{
  position:absolute;right:.6rem;bottom:.6rem;z-index:4;
  width:30px;height:30px;border-radius:50%;display:none;place-items:center;
  background:rgba(20,20,24,.6);border:1px solid rgba(255,255,255,.45);
  color:#fff;cursor:pointer;padding:0;
}
.cartao.tocando .mudo{display:grid}
.mudo:hover{background:rgba(255,255,255,.25);border-color:#fff}
.mudo .ico{width:15px;height:15px}

/* ---- painel que abre no hover --------------------------------------- */
.cartao-info{
  position:absolute;left:0;right:0;top:100%;z-index:3;
  background:var(--fundo2);border-radius:0 0 6px 6px;
  padding:0 .9rem;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .22s ease,opacity .18s ease,padding .22s ease;
}
.cartao-botoes{display:flex;gap:.5rem;align-items:center;margin-bottom:.7rem}
.circ{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.45);
  color:var(--texto);transition:background .16s,border-color .16s,transform .16s;
}
.circ .ico{width:16px;height:16px;opacity:1}
.circ:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff;transform:scale(1.08)}
.circ.principal{background:#fff;border-color:#fff;color:#111}
.circ.principal:hover{background:rgba(255,255,255,.78);color:#111}
.circ.direita{margin-left:auto}

.cartao-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.76rem;color:var(--texto)}
.cartao-meta .nota{color:var(--ok);font-weight:700}
.cartao-meta .hd{
  border:1px solid rgba(255,255,255,.35);border-radius:3px;
  padding:0 .28rem;font-size:.62rem;font-weight:700;letter-spacing:.04em;color:var(--fraco);
}
.cartao-meta .dur{color:var(--fraco)}
.cartao-generos{
  font-size:.75rem;color:var(--fraco);margin:.5rem 0 .8rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cartao-generos i{color:var(--apagado);font-style:normal;margin:0 .35rem}

/* ---- expansao: o cartao cresce e os vizinhos abrem espaco ------------ */
/* O painel de informacoes abre PARA BAIXO do cartao. Se o cartao nao
   subisse, o conjunto todo cresceria so para baixo e pareceria estar
   caindo da fileira. O translateY sobe 66px (x1.34 na tela = 88px) e
   deixa a expansao equilibrada, com mais peso para cima - que e onde
   sobra espaco na fileira.

   Em pixels, nao em %: a altura do cartao muda enquanto o painel abre, e
   uma porcentagem faria o cartao escorregar durante a animacao. */
/* O QUANTO ELE SOBE - e por que 26px, e nao 66px.

   Com -66px o cartao subia 113px medidos na tela (66 x 1,34 de escala,
   mais a metade da altura que ele ganha). Na PRIMEIRA fileira isso o
   levava para dentro da barra do topo, que e fixa e pinta por cima
   (z-index 60 contra 40) - o alto do cartaz sumia.

   A saida obvia era descer a fileira; foi o que se fez primeiro, e
   custou 40px de vazio no alto de toda pagina de catalogo. Numa TV, com
   viewport curto, aquilo comia um quarto da tela.

   Subir menos resolve o mesmo problema sem gastar tela: -26px sobem
   55px, o cartao da primeira fileira para 29px ABAIXO da barra, e o
   crescimento continua com peso para cima - so que menos exagerado. O
   resto do que ele ganha sai para baixo, que e onde o painel ja abria
   de qualquer jeito. */
.cartao:hover,.cartao:focus-visible{
  transform:scale(1.34) translateY(-26px);z-index:40;
  transition-delay:.35s;                    /* passar o mouse correndo nao abre */
}
/* O canto de baixo do quadro fica reto porque o painel encosta nele - e
   o painel devolve o arredondamento embaixo. O conjunto continua com o
   mesmo raio do cartao fechado. */
.cartao:hover .mini,.cartao:focus-visible .mini{
  border-radius:6px 6px 0 0;box-shadow:0 26px 50px rgba(0,0,0,.75);
  transition-delay:.35s;
}
.cartao:hover .cartao-info,.cartao:focus-visible .cartao-info{
  max-height:230px;opacity:1;padding:.85rem .9rem 1rem;transition-delay:.35s;
  border-radius:0 0 6px 6px;box-shadow:0 26px 50px rgba(0,0,0,.75);
}
/* Os vizinhos NAO se mexem. Antes eles andavam 46px para os lados para
   "abrir espaco"; o cartao aberto ja fica por cima deles (z-index), e o
   empurra-empurra fazia a fileira inteira tremer a cada passada de
   mouse - inclusive na grade da busca, onde os cartoes de baixo tambem
   pulavam. O crescimento continua igual; so o balanco saiu. */
/* nas pontas o cartao cresce para dentro, nunca para fora da tela */
/* Nas pontas cresce para dentro, nunca para fora da tela. "center" no
   eixo vertical para o cartao subir e descer por igual. */
.trilho .cartao:first-child{transform-origin:left center}
.trilho .cartao:last-child{transform-origin:right center}

/* ---- fileira numerada: numero gigante vazado, igual ao Top 10 --------
   O cartao e o MESMO das outras fileiras (mesma largura, mesma arte
   16:9, mesmo hover). So o numero ao lado muda. Antes era um poster em
   pe, e ao passar o mouse ele virava outra coisa - crescia diferente,
   com outro formato, e destoava do resto da tela. */
.fileira.numerada .trilho{padding-left:3vw;gap:.4rem}
.cartao.com-numero{margin-left:96px}
/* O numero desenha-se no espaco aberto pelo margin-left, encostado no
   canto de baixo da arte. */
.numero{
  /* o cartao fechado tem exatamente a altura da arte (o painel de
     informacoes e absoluto), entao 100% aqui = altura da arte 16:9 */
  position:absolute;left:-96px;bottom:0;z-index:1;
  width:96px;height:100%;
  display:flex;align-items:flex-end;justify-content:center;
  font-size:8.4rem;font-weight:700;line-height:.8;letter-spacing:-.05em;
  color:var(--preto);
  -webkit-text-stroke:3px #55555f;
  font-family:"Arial Black",Impact,Haettenschweiler,sans-serif;
  pointer-events:none;user-select:none;
}
/* o "10" e mais largo e precisa de mais folga */
.cartao.com-numero.dez{margin-left:138px}
.cartao.com-numero.dez .numero{left:-138px;width:138px;letter-spacing:-.08em}
/* Nada de hover proprio aqui: o Top 10 herda exatamente o das outras
   fileiras. Antes tinha escala e deslocamento so dele, e a diferenca
   saltava aos olhos ao passar de uma fileira para a outra. */
.fileira.numerada .cartao:hover .numero{opacity:.55;transition:opacity .2s .35s}

/* "EM BREVE", quando ainda nao ha arquivo para assistir.
   Substituiu a etiqueta de links do canto - uma bolinha verde com um
   numero, que media quantos magnets tinham seeders e deixou de querer
   dizer qualquer coisa. Embaixo e centralizado, sobre um veu escuro: e
   um recado para quem esta escolhendo o que ver, e nao um dado tecnico
   de canto de tela. */
.em-breve{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:.42rem 0;text-align:center;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 70%,rgba(0,0,0,0) 100%);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
/* Aberto no hover o cartao vira um painel: o "em breve" colado no pe da
   arte encostaria no texto de baixo. */
.cartao:hover .em-breve,.cartao:focus-visible .em-breve{opacity:0;transition:opacity .15s}

.tag-serie{
  position:absolute;top:.45rem;right:.45rem;z-index:2;
  padding:.16rem .45rem;border-radius:20px;
  background:rgba(47,125,251,.85);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);color:#fff;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
/* no hover o cartao mostra os botoes; a etiqueta sai da frente */
.cartao:hover .tag-serie,.cartao:focus-within .tag-serie{opacity:0;transition:opacity .18s}
/* ONDE EU PAREI, na tira embaixo do cartao.
   Do mesmo azul do risco do player: a mesma coisa dita no mesmo lugar
   tem de ter a mesma cor. A faixa escura atras existe para a tira
   aparecer tanto sobre uma cena clara quanto sobre uma escura. */
.progresso{
  position:absolute;left:0;right:0;bottom:0;height:4px;
  background:rgba(0,0,0,.62);z-index:2;
}
.progresso i{display:block;height:100%;background:var(--progresso)}

/* --------------------------------------------------------------- ficha */
/* O RECUO DE CIMA E OBRIGATORIO, mesmo com min-height.

   O bloco alinha o conteudo EMBAIXO (align-items:flex-end) dentro de
   70vh. Numa tela alta sobra espaco de sobra; numa tela BAIXA - e a TV
   costuma entregar um viewport curto em pixels de CSS - 70vh pode ser
   menor que o proprio cartaz, e o flex-end o empurra para cima ate
   debaixo da barra do topo, que e fixa. Foi o que apareceu na foto da
   TV: o cartaz colado no menu.

   Com o recuo, o box nunca fica mais curto que "barra + conteudo": o
   cartaz para logo abaixo do menu em vez de passar por baixo dele. Numa
   tela alta nada muda, porque ali quem manda continua sendo o 70vh. */
.ficha-topo{
  position:relative;min-height:70vh;display:flex;align-items:flex-end;
  padding:calc(var(--topo-altura) + 1.6rem) 3vw 3rem;
}
/* Sem arte de fundo nao ha o que mostrar em 70vh: a pagina abria com uma
   faixa preta enorme antes do poster. Sem imagem, o topo encolhe. */
.ficha-topo:not(:has(.destaque-fundo)){
  min-height:auto;padding-top:calc(var(--topo-altura) + 2rem);
}
.ficha-topo .destaque-fundo::after{
  background:
    linear-gradient(90deg,rgba(8,9,12,.95) 0%,rgba(8,9,12,.6) 50%,rgba(8,9,12,.2) 100%),
    linear-gradient(0deg,var(--preto) 1%,transparent 55%);
}
.ficha-cabeca{
  position:relative;z-index:4;display:flex;gap:2.2rem;align-items:flex-end;width:100%;
  pointer-events:none;              /* o vazio ao lado do texto nao rouba o clique */
}
.ficha-cabeca > *{pointer-events:auto}

.ficha-poster{
  width:210px;flex-shrink:0;border-radius:var(--raio-g);
  box-shadow:var(--sombra);border:1px solid rgba(255,255,255,.08);
}
.ficha-info{flex:1;min-width:260px}
.ficha-info h1{font-size:clamp(1.8rem,3.4vw,3rem)}
.ficha-info .original{color:var(--fraco);font-size:.95rem;margin:.35rem 0 0;font-style:italic}

/* A coluna da direita cresce um pouco em telas largas, mas a da
   esquerda e que fica com a sobra. */
.painel-ficha{
  padding:2.6rem 3vw 4rem;display:grid;gap:3rem;width:100%;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  align-items:start;                 /* cada coluna termina onde acaba */
}
.bloco-ficha h2{font-size:1.1rem;margin-bottom:.9rem;color:var(--texto)}
/* Linha muito longa cansa de ler; o texto para nas 90 colunas mesmo com
   a pagina ocupando a tela toda. */
.sinopse-longa{font-size:1.02rem;color:#dbe0e9;max-width:90ch}

/* ficha tecnica */
.tecnica{display:grid;gap:.1rem}
.tecnica div{display:flex;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--borda);font-size:.9rem}
.tecnica dt{color:var(--apagado);min-width:118px;flex-shrink:0}
.tecnica dd{margin:0;color:var(--texto)}
/* A colecao na ficha e clicavel: leva a saga inteira. Sublinhado
   discreto para nao virar um link berrante no meio de linhas de texto,
   mas visivel o bastante para a pessoa saber que da para clicar. */
.tecnica dd .ficha-link{
  color:var(--texto);text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.28);
  text-underline-offset:3px;
}
.tecnica dd .ficha-link:hover{color:#fff;text-decoration-color:currentColor}

/* elenco */
.elenco{display:flex;gap:.9rem;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none}
.elenco::-webkit-scrollbar{display:none}
/* O ator virou botao (abre a modal): zera o visual que o navegador
   coloca sozinho em <button> e mantem o cursor de link. */
.ator{
  flex:0 0 auto;width:108px;text-align:center;cursor:pointer;
  background:none;border:0;padding:0;font-family:inherit;color:inherit;
}
.ator:hover img,.ator:focus-visible img,
.ator:hover .sem-foto,.ator:focus-visible .sem-foto{
  border-color:var(--azul);transform:translateY(-3px);
}
.ator img,.ator .sem-foto{transition:border-color .18s,transform .18s}
.ator:hover b{color:#fff}
.ator img,.ator .sem-foto{
  width:108px;height:108px;border-radius:50%;object-fit:cover;
  background:var(--fundo3);margin-bottom:.5rem;
  border:2px solid var(--borda);
}
.ator .sem-foto{display:grid;place-items:center;color:var(--apagado);font-size:1.6rem;font-weight:300}
.ator b{display:block;font-size:.8rem;font-weight:600;line-height:1.25}
.ator span{display:block;font-size:.74rem;color:var(--apagado);margin-top:.15rem;line-height:1.25}

/* (o bloco do trailer fica mais abaixo, junto com a capa e o botao de play) */

/* ------------------------------------------------- acoes do topo da ficha */
.hero-acoes{
  display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;margin-top:1.4rem;
}

/* faixa de informacoes do link ativo, logo abaixo dos botoes */
.hero-info{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  margin-top:1.1rem;padding:.72rem .95rem;
  background:rgba(18,18,22,.72);border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--azul);
  border-radius:12px;backdrop-filter:blur(10px);max-width:760px;
}

.dado{
  display:inline-flex;align-items:center;gap:.34rem;
  padding:.2rem .6rem;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  font-size:.76rem;font-weight:600;color:#c4d2e8;white-space:nowrap;
}
.dado b{color:#fff;font-weight:700}
.dado .ico{width:13px;height:13px;opacity:.75}

/* seletor de versao quando o filme tem mais de um link */
.hero-versoes{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.85rem}
.versao{
  padding:.36rem .8rem;border-radius:20px;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--fraco);font-size:.76rem;font-weight:700;letter-spacing:.02em;
  transition:all .18s;
}
.versao:hover{color:#fff;border-color:var(--azul-linha)}
.versao.on{background:var(--azul);border-color:var(--azul);color:#fff}
.hero-vazio{
  margin-top:1.1rem;padding:.8rem 1rem;max-width:520px;
  background:rgba(255,255,255,.04);border:1px dashed var(--borda);
  border-radius:12px;color:var(--fraco);font-size:.88rem;
}
.hero-retorno{
  margin:.8rem 0 0;font-size:.85rem;padding:.55rem .8rem;border-radius:9px;
  background:rgba(47,125,251,.12);border:1px solid var(--azul-linha);max-width:760px;
}

/* --------------------------------------------- servidor de midia (admin) */
.form-midia{max-width:640px;display:grid;gap:.3rem}
.form-midia label{display:block;font-size:.85rem;color:var(--fraco);margin-top:1.1rem}
.form-midia p.fraco{margin:.4rem 0 0}
.form-midia code{background:var(--fundo3);padding:.1rem .35rem;border-radius:4px;color:#cdd5e2}
.retorno-midia{
  background:var(--fundo2);border:1px solid var(--borda);border-radius:10px;
  padding:1rem;font-size:.82rem;line-height:1.6;white-space:pre-wrap;
  color:#cdd5e2;overflow-x:auto;margin:0;
}
/* cartao que tem o filme no servidor de midia ganha um risco verde */
.cartao.tem-midia .mini{box-shadow:inset 0 0 0 2px rgba(62,207,114,.55)}

/* A lista ".versoes-lista / .versao-item" desenhava a secao "Para
   baixar" da ficha. Saiu com os torrents em setembro de 2026. */
.bloco-ficha h2 .contagem{
  color:var(--apagado);font-size:.8rem;font-weight:500;margin-left:.4rem;
}

/* =======================================================================
   SERIES - temporadas e episodios
   ===================================================================== */

/* A barra de versoes do topo existe sempre (o JS a repovoa quando voce
   escolhe um episodio); com menos de duas versoes ela nao ocupa nada. */
.hero-versoes.vazia{display:none}

/* etiqueta "Serie" e "Em exibicao" na linha de dados do topo */
.etiqueta-tipo,.etiqueta-exibicao{
  padding:.1rem .5rem;border-radius:20px;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;border:1px solid;
}
.etiqueta-tipo{color:#8fbcff;border-color:var(--azul-linha);background:rgba(47,125,251,.14)}
.etiqueta-exibicao{color:var(--ok);border-color:rgba(62,207,114,.45);background:rgba(62,207,114,.12)}

/* o chip do episodio selecionado e o unico azul da barra */
.hero-info .destaque-dado{
  background:rgba(47,125,251,.16);border-color:var(--azul-linha);color:#cfe1ff;font-weight:700;
}

/* ---------------------------------------------------- abas de temporada */
.temporada-abas{
  display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1.2rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--borda);
}
.aba-temporada{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;font-family:inherit;
  padding:.45rem .9rem;border-radius:9px;font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  color:var(--fraco);transition:background .18s,border-color .18s,color .18s;
}
.aba-temporada:hover{color:#fff;border-color:rgba(255,255,255,.22)}
.aba-temporada.on{background:var(--azul);border-color:var(--azul);color:#fff}
.aba-temporada .qtd{
  font-size:.68rem;font-weight:800;padding:.05rem .38rem;border-radius:20px;
  background:rgba(0,0,0,.28);
}
.temporada-titulo{
  margin:0 0 1rem;font-size:.95rem;font-weight:700;color:var(--fraco);
  text-transform:uppercase;letter-spacing:.06em;
}

/* ----------------------------------------------------- linha de episodio */
.episodios-lista,.pacotes{display:grid;gap:.6rem}
.pacotes{margin-bottom:1.2rem}

.ep-item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem 1rem;
  align-items:start;background:var(--fundo2);border:1px solid var(--borda);
  border-radius:12px;padding:.9rem 1.1rem;transition:border-color .2s,background .2s;
}
.ep-item:hover{border-color:rgba(255,255,255,.2);background:#1e1e23}
/* pacote de temporada inteira: risco azul a esquerda para diferenciar */
.ep-item.pacote{border-left:3px solid var(--azul)}

.ep-num{
  display:grid;place-items:center;min-width:38px;height:38px;border-radius:9px;
  background:rgba(255,255,255,.05);color:var(--fraco);
  font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.ep-num.pacote{color:#8fbcff;background:rgba(47,125,251,.14)}
.ep-num .ico{width:17px;height:17px}

.ep-corpo{min-width:0}
.ep-topo{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.ep-topo strong{font-size:.92rem;font-weight:600}
.ep-dados{display:flex;gap:.45rem;flex-wrap:wrap}
.ep-arquivo{
  margin:.5rem 0 0;font-size:.74rem;color:var(--apagado);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ep-acoes{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
/* a resposta do "Verificar" ocupa a linha toda, abaixo dos tres blocos */
.ep-item>.retorno{grid-column:1/-1;margin:.2rem 0 0}

.mais-versoes{
  cursor:pointer;font-family:inherit;font-size:.7rem;font-weight:800;
  letter-spacing:.03em;padding:.15rem .55rem;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:var(--fraco);transition:all .18s;
}
.mais-versoes:hover{color:#fff;border-color:var(--azul-linha)}
.mais-versoes.on{background:var(--azul);border-color:var(--azul);color:#fff}

/* -------------------------------------------- versoes extras do episodio */
.ep-extras{
  grid-column:1/-1;display:grid;gap:.5rem;
  margin-top:.3rem;padding-top:.8rem;border-top:1px dashed var(--borda);
}
.ep-extra{
  background:var(--fundo3);border-radius:10px;padding:.7rem .85rem;
}
.ep-extra .ep-dados{align-items:center}
.ep-extra .ep-acoes{justify-content:flex-start;margin-top:.6rem}

@media (max-width:640px){
  /* no celular os botoes vao para baixo, em linha cheia */
  .ep-item{grid-template-columns:auto minmax(0,1fr)}
  .ep-acoes{grid-column:1/-1;justify-content:flex-start;margin-top:.3rem}
}

/* ---------------------------------------------------------------- links */
.link,.link-edit{
  background:var(--fundo2);border:1px solid var(--borda);border-radius:var(--raio-g);
  padding:1rem 1.1rem;margin-bottom:.9rem;
}
.link-cabeca{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:.5rem}
.link-meta{display:flex;gap:1rem;flex-wrap:wrap;color:var(--fraco);font-size:.82rem;margin-bottom:.7rem}
.link-acoes{display:flex;gap:.5rem;flex-wrap:wrap}
.hash{display:block;color:var(--apagado);font-size:.72rem;margin-bottom:.5rem;word-break:break-all}
.retorno{margin:.7rem 0 0;font-size:.85rem;padding:.5rem .7rem;border-radius:8px;background:var(--fundo3)}
.barra{height:5px;background:var(--fundo3);border-radius:3px;overflow:hidden;margin:.5rem 0}
.barra i{display:block;height:100%;background:var(--azul);transition:width .4s}

.selo{
  padding:.16rem .55rem;border-radius:20px;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;border:1px solid;white-space:nowrap;
}
.selo.ok{color:var(--ok);border-color:rgba(62,207,114,.5);background:rgba(62,207,114,.13)}
.selo.fraco{color:var(--alerta);border-color:rgba(240,180,41,.5);background:rgba(240,180,41,.13)}
.selo.morto{color:var(--erro);border-color:rgba(239,90,68,.5);background:rgba(239,90,68,.13)}
.selo.erro{color:var(--erro);border-color:rgba(239,90,68,.5)}
.selo.neutro{color:var(--apagado);border-color:var(--borda)}

/* ------------------------------------------------------ formularios etc */
/* Largura inteira: o acervo e uma grade de capas, e sobrava tela dos
   dois lados numa janela larga. Sem max-width, so o respiro das bordas. */
/* O RECUO DE CIMA ERA 2,2rem ALEM DA BARRA - 35 pontos de vazio entre
   a barra e o titulo da pagina. Numa TV, de viewport curto, aquilo era
   uma faixa preta grande antes de qualquer conteudo. 1rem separa o
   titulo da barra sem fazer a pagina parecer que comeca no meio. */
.pagina{padding:calc(var(--topo-altura) + 1rem) 3vw 5rem;width:100%}

/* AQUI HAVIA UM RECUO EXTRA de 40px so nas telas com cartaz, para o
   cartao aberto nao entrar na barra do topo. Saiu: 40px de vazio em
   cima de toda pagina de catalogo e caro demais - numa TV, que entrega
   um viewport curto, aquilo virava um quarto da tela em branco antes do
   primeiro filme. O mesmo problema agora e resolvido do outro lado, no
   proprio cartao: ele sobe menos ao abrir (ver .cartao:hover). */

/* -------------------------------------------------------- grade de busca
   As colunas se esticam para preencher a linha inteira (1fr), entao nao
   sobra buraco na direita - que era o que acontecia com cartao de 250px
   fixo numa linha flex com quebra. Aqui nada recorta o hover: a grade
   nao rola de lado, entao o cartao cresce por cima das linhas vizinhas
   sem precisar do truque de folga do trilho. */
.grade-cartoes{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:1.6rem .7rem;
}
.grade-cartoes .cartao{width:auto}
/* na grade a linha de baixo esta logo abaixo: o cartao aberto precisa
   ficar por cima dela, e o de cima precisa ceder */
.grade-cartoes .cartao:hover,.grade-cartoes .cartao:focus-visible{z-index:50}
.pagina h1{font-size:1.7rem;margin-bottom:1.4rem}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],select,textarea{
  width:100%;margin-top:.3rem;padding:.62rem .75rem;
  background:var(--fundo3);color:var(--texto);
  border:1px solid var(--borda);border-radius:var(--raio);outline:none;font:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--azul)}
textarea{resize:vertical}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.campos label{font-size:.82rem;color:var(--fraco)}
.campos .largo{grid-column:1 / -1}
.linha{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.7rem 0}
.linha input{width:auto;flex:1;min-width:150px;margin-top:0}
.linha-mini{display:inline-flex;gap:.3rem;align-items:center}
.linha-mini input{width:130px;margin-top:0;padding:.3rem .5rem;font-size:.8rem}
.bloco{background:var(--fundo2);border:1px solid var(--borda);border-radius:var(--raio-g);
  padding:1.4rem;margin-bottom:1.4rem}
.perigo-zona{border-color:rgba(239,90,68,.35);background:rgba(239,90,68,.05)}

.aviso{padding:.75rem .95rem;border-radius:var(--raio);margin:0 0 1rem;font-size:.88rem;border:1px solid}
.aviso.info{background:rgba(70,130,200,.1);border-color:rgba(70,130,200,.35)}
.aviso.ok{background:rgba(70,192,94,.1);border-color:rgba(70,192,94,.4);color:#a9e8b8}
.aviso.erro{background:rgba(239,90,68,.1);border-color:rgba(239,90,68,.4);color:#f5b5a8}

.tabela{width:100%;border-collapse:collapse;font-size:.88rem}
.tabela th{text-align:left;color:var(--apagado);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.06em;padding:.6rem .5rem;border-bottom:1px solid var(--borda)}
.tabela td{padding:.65rem .5rem;border-bottom:1px solid var(--borda);vertical-align:middle}
.tabela tr:hover td{background:var(--fundo2)}
.tabela.compacta td{padding:.35rem .5rem;font-size:.82rem}
.acoes-linha{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}

.painel{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:1.6rem}
.cartao-num{background:var(--fundo2);border:1px solid var(--borda);border-radius:var(--raio-g);
  padding:1.1rem;text-align:center}
.cartao-num b{display:block;font-size:2rem;line-height:1.1}
.cartao-num span{color:var(--apagado);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.cartao-num.ok b{color:var(--ok)}
.cartao-num.fraco b{color:var(--alerta)}
.cartao-num.morto b{color:var(--erro)}

.abas{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.3rem}
.abas a{padding:.4rem .9rem;border-radius:20px;background:var(--fundo2);
  border:1px solid var(--borda);font-size:.84rem;color:var(--fraco)}
.abas a.on{background:var(--azul);color:#fff;border-color:var(--azul);font-weight:700}
/* O numero dentro da aba: quantos faltam, para a aba pedir o trabalho
   em vez de esperar que alguem va conferir. */
.abas a .qtd{
  margin-left:.35rem;padding:.05rem .35rem;border-radius:9px;
  background:var(--fundo3);color:var(--texto);font-size:.74rem;font-weight:700;
}
.abas a.on .qtd{background:rgba(255,255,255,.22);color:#fff}

/* A grade de capas do TMDB (.resultados-tmdb / .res-tmdb) e a
   #previa-poster vestiam as telas de importar e adicionar titulo, que
   sairam com os torrents. A busca no TMDB continua existindo - na aba
   de editar, com estilo proprio (.tmdb-item). */

/* escolher entre filme e serie, antes de buscar no TMDB */
.escolha-tipo{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 .8rem}
.opcao-tipo{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-family:inherit;
  padding:.7rem 1.4rem;border-radius:11px;font-size:.9rem;font-weight:600;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:var(--fraco);transition:background .18s,border-color .18s,color .18s;
}
.opcao-tipo:hover{color:#fff;border-color:rgba(255,255,255,.24)}
.opcao-tipo.on{background:var(--azul);border-color:var(--azul);color:#fff}
.opcao-tipo .ico{width:17px;height:17px}

.vazio{text-align:center;padding:5rem 1rem;color:var(--fraco)}
.vazio-pequeno{color:var(--fraco);padding:1rem 0}
.paginacao{display:flex;gap:1.2rem;justify-content:center;align-items:center;margin-top:2rem;color:var(--fraco)}

/* --------------------------------------------------------------- login */
/* =======================================================================
   ENTRAR

   O fundo e o proprio acervo: tres colunas de capas subindo devagar, com
   um veu escuro por cima para o formulario continuar legivel. Nada de
   foto de banco de imagens - a tela mostra o que ha do outro lado dela.
   ===================================================================== */
.tela-login{
  min-height:100dvh;margin:0;position:relative;overflow:hidden;
  background:radial-gradient(1100px 700px at 50% -15%,#141a26 0%,#08090c 62%);
}

.login-mosaico{
  position:fixed;inset:-8% -4%;z-index:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  /* inclinado: as colunas retas dao cara de catalogo, inclinadas dao
     cara de fundo */
  transform:rotate(-8deg) scale(1.25);
  filter:saturate(.85);
}
.mos-col{display:flex;flex-direction:column;gap:1.1rem;will-change:transform}
.mos-col img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;display:block;
  box-shadow:0 12px 30px rgba(0,0,0,.6);
}
/* Cada coluna anda no seu ritmo, e uma delas ao contrario: colunas em
   sincronia parecem uma imagem so escorregando. O deslocamento e de
   -50%, que e exatamente uma volta da lista (ela e impressa em dobro),
   entao o laco fecha sem salto. */
@keyframes mos-sobe{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes mos-desce{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.mos-col.c0{animation:mos-sobe  90s linear infinite}
.mos-col.c1{animation:mos-desce 74s linear infinite}
.mos-col.c2{animation:mos-sobe 104s linear infinite}
/* Quem pediu menos movimento no sistema nao ve nada se mexer. */
@media (prefers-reduced-motion:reduce){ .mos-col{animation:none} }

/* O veu: escuro no centro (onde fica o formulario) e nos cantos, para a
   parede de capas nunca competir com o texto. */
.login-veu{
  position:fixed;inset:0;z-index:1;
  background:
    radial-gradient(700px 580px at 50% 50%,rgba(6,7,10,.9) 0%,rgba(6,7,10,.62) 48%,rgba(6,7,10,.4) 100%),
    linear-gradient(180deg,rgba(6,7,10,.9) 0%,rgba(6,7,10,.42) 34%,rgba(6,7,10,.42) 66%,rgba(6,7,10,.94) 100%);
}

.login-palco{
  position:relative;z-index:2;
  min-height:100dvh;display:grid;place-items:center;padding:2rem 1.2rem;
}

.cartao-login{
  width:100%;max-width:410px;padding:2.6rem 2.4rem 2rem;
  background:rgba(11,12,16,.82);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  box-shadow:0 40px 90px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
}
/* A logo na tela de entrada. E a primeira coisa que alguem ve do
   acervo, entao vai grande - mas com altura fixa, para o cartao de login
   nao pular de tamanho enquanto a imagem carrega. */
.login-marca{
  display:block;height:52px;width:auto;margin:0 auto 1.9rem;
  filter:drop-shadow(0 4px 18px rgba(47,125,251,.4));
}
.cartao-login h1{
  font-family:"Outfit","Inter",system-ui,sans-serif;
  font-size:1.85rem;font-weight:700;letter-spacing:-.01em;color:#fff;margin:0;
  text-transform:none;
}
.cartao-login .sub{color:var(--fraco);font-size:.86rem;margin:.45rem 0 1.7rem}

/* Rotulo flutuante: fica dentro do campo e sobe quando se digita. Ocupa
   metade da altura de um rotulo em cima do campo, e a tela cabe inteira
   no celular sem rolar. */
.campo-flutua{position:relative;display:block;margin-bottom:1rem}
.campo-flutua input{
  width:100%;margin:0;padding:1.45rem .95rem .6rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;
  color:#fff;font-size:.95rem;font-family:inherit;
  transition:border-color .16s,background .16s;
}
.campo-flutua input:hover{background:rgba(255,255,255,.09)}
.campo-flutua input:focus{
  outline:none;border-color:var(--azul-forte);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(47,125,251,.18);
}
.campo-flutua > span{
  position:absolute;left:.98rem;top:.98rem;
  color:var(--fraco);font-size:.95rem;pointer-events:none;
  transition:transform .16s ease,color .16s,font-size .16s;
  transform-origin:left top;
}
.campo-flutua input:focus + span,
.campo-flutua input:not(:placeholder-shown) + span{
  transform:translateY(-.62rem) scale(.76);color:#9aa3b2;
}
/* O preenchimento automatico do navegador pinta o campo de branco e come
   o texto claro; isto devolve o visual escuro. */
.campo-flutua input:-webkit-autofill,
.campo-flutua input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 60px #191c24 inset;
  caret-color:#fff;
}

.login-entrar{
  width:100%;margin-top:.5rem;padding:.85rem;
  font-size:.98rem;font-weight:700;letter-spacing:.02em;
}
.cartao-login .aviso{margin-bottom:1.2rem}

/* ------------------------------------------------- entrar pelo celular */
/* Digitar e-mail e senha com o controle remoto e das piores tarefas que
   uma TV oferece. Aqui fica o caminho curto: a TV mostra um QR, o
   celular libera, a TV entra.

   SO EXISTE NA TV, e isto e uma regra e nao um detalhe de estilo.
   Num computador ou num celular o teclado ja esta na mao: o QR pediria
   que a pessoa lesse um codigo na tela para digitar no aparelho que ela
   esta segurando. Antes disto o bloco vinha atras de um botao "Entrar
   pelo celular" em toda tela de login - um botao que, fora da TV, e uma
   pergunta sem resposta boa. O JS tambem desiste sozinho quando nao ha
   modo TV (ver entrar-tv.js), entao aqui nao fica so escondido: nem
   chega a pedir codigo ao servidor. */
.login-celular{display:none}
html.tv .login-celular{display:block}

.login-celular{
  width:100%;max-width:410px;margin:1.1rem auto 0;text-align:center;
}
.celular-abrir{width:100%;gap:.5rem}
.celular-painel{
  margin-top:1rem;padding:1.2rem 1rem 1rem;
  background:rgba(11,12,16,.82);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;
}
.celular-passos{
  margin:0 0 1rem;font-size:.82rem;color:var(--fraco);line-height:1.55;
}
/* O QR NUM QUADRADO BRANCO, e nao solto no escuro: leitor de camera
   precisa da faixa clara em volta para achar as bordas do codigo, e
   fundo escuro comendo essa faixa e a causa numero um de QR que "nao
   le". O proprio SVG ja traz a margem; o branco aqui garante contraste
   mesmo com o mosaico do fundo passando atras. */
.celular-qr{
  display:flex;align-items:center;justify-content:center;
  min-height:60px;
}
.celular-qr svg{
  display:block;width:min(300px,68vw);height:auto;
  background:#fff;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.celular-codigo{
  margin:.9rem 0 .2rem;
  font-family:"Outfit","Inter",system-ui,sans-serif;
  font-size:1.6rem;font-weight:800;letter-spacing:.16em;
  color:#fff;min-height:1.3em;
}
.celular-estado{margin:.2rem 0 0;font-size:.8rem;color:var(--fraco)}
.celular-outro{margin-top:.9rem}

/* O QR AO LADO, E NAO EMBAIXO.

   Empilhado, o conjunto passa da altura da tela num monitor comum e
   nasce com barra de rolagem - e o QR, que e o caminho rapido, fica
   fora da primeira dobra. Lado a lado os dois cabem.

   So quando o painel esta ABERTO (a classe vem do entrar-tv.js): com
   ele fechado ha apenas um botao, e um botao solto a direita do cartao
   pareceria perdido. */
@media (min-width:900px){
  .login-palco.com-celular{
    display:flex;align-items:center;justify-content:center;
    gap:2.2rem;flex-wrap:nowrap;
  }
  .login-palco.com-celular .cartao-login{margin:0;flex:0 0 auto}
  .login-palco.com-celular .login-celular{margin:0;flex:0 0 auto;width:330px}
  /* Menor do que na TV: aqui o celular esta a um palmo da tela, e o que
     manda e caber sem rolagem. */
  .login-palco.com-celular .celular-qr svg{width:270px}
}

/* ------------------------------------------------- liberar a TV (celular) */
.cartao-liberar{
  width:100%;max-width:420px;margin:0 auto;text-align:center;
  background:rgba(11,12,16,.82);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;
  padding:1.6rem 1.4rem 1.4rem;
}
.liberar-rotulo{margin:0;font-size:.82rem;color:var(--fraco)}
/* O CODIGO GRANDE E A PROPRIA SEGURANCA DA TELA: e comparando-o com o
   da TV que a pessoa sabe que esta liberando a TV dela, e nao a de um
   estranho. Por isso ele e a maior coisa da pagina. */
.liberar-codigo{
  margin:.4rem 0 1rem;
  font-family:"Outfit","Inter",system-ui,sans-serif;
  font-size:2.4rem;font-weight:800;letter-spacing:.16em;color:#fff;
}
.liberar-aviso{
  margin:0 0 1.1rem;font-size:.82rem;color:var(--fraco);line-height:1.55;
  text-align:left;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.7rem .8rem;
}
.liberar-de{margin:0 0 1rem;font-size:.78rem;color:var(--apagado)}
.liberar-sim{width:100%}
.liberar-nao{width:100%;margin-top:.6rem}
.liberar-tv .campo-flutua input{text-align:center;letter-spacing:.14em;text-transform:uppercase}

@media (max-width:560px){
  .cartao-login{padding:2rem 1.5rem 1.6rem;border-radius:14px}
  .login-mosaico{gap:.7rem;transform:rotate(-8deg) scale(1.5)}
  .mos-col{gap:.7rem}
}

/* -------------------------------------------------------------- player */
.player-topo{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:calc(var(--topo-altura) + 1.2rem) 3vw .8rem}
.player-topo h1{font-size:1.2rem}
.player-topo h1 small{color:var(--fraco);font-weight:400}
.voltar{color:var(--fraco);font-size:.88rem}
/* O #player nao tem mais regra propria - e a razao merece ficar escrita.
   -----------------------------------------------------------------
   Havia aqui: #player{width:100%;max-height:82vh;background:#000}.
   O "82vh" sobrou da epoca em que o video morava DENTRO da pagina, com
   titulo em cima e os controles do navegador embaixo - ali fazia
   sentido nao deixar a imagem tomar a tela inteira.

   Quando o player virou tela cheia, a linha ficou, e passou a cortar
   18% da altura do palco: a imagem encolhia, sobrava preto em CIMA, em
   BAIXO e - por consequencia da forma - muito mais preto NOS LADOS.
   Numa janela de 1916x941 a imagem saía com 1372x772 e tarjas de 272px
   de cada lado; sem a linha, sai com 1673x941 e 122px. Metade a mais de
   imagem, e o preto de cima e de baixo some.

   Quem cuida do tamanho agora e .assistir-video, logo abaixo, que e
   onde essa decisao deve morar. */

/* --------------------------------------------------------------- modal */
.modal-fundo{
  position:fixed;inset:0;z-index:200;overflow-y:auto;
  background:rgba(0,0,0,.78);backdrop-filter:blur(3px);
  padding:3.5rem 1rem 4rem;
  animation:aparecer .2s ease;
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes subir{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
.modal{
  max-width:880px;margin:0 auto;background:var(--fundo2);
  border-radius:var(--raio-g);overflow:hidden;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.85);
  animation:subir .3s cubic-bezier(.2,.8,.3,1);
}
.modal-fechar{
  position:absolute;top:1rem;right:1rem;z-index:5;
  width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(10,12,16,.85);color:var(--texto);font-size:1.5rem;line-height:1;
}
.modal-fechar:hover{background:#000}

.modal-arte{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.modal-arte img.fundo{width:100%;height:100%;object-fit:cover}
.modal-arte::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--fundo2) 1%,rgba(18,21,28,.35) 40%,transparent 75%);
}
.modal-arte-corpo{position:absolute;left:2rem;right:2rem;bottom:1.4rem;z-index:2}
.modal-arte-corpo h2{font-size:clamp(1.4rem,3vw,2.2rem);text-shadow:0 3px 18px rgba(0,0,0,.9)}
.modal-arte-corpo img.logo{max-width:min(340px,58%);max-height:100px;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.9))}
.modal-acoes{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

.modal-dados{padding:1.4rem 2rem 2rem;display:grid;gap:1.6rem;grid-template-columns:1fr 250px}
.modal-dados .sinopse{font-size:.96rem;color:#dbe0e9;margin:.8rem 0 0}
.modal-lado{font-size:.85rem}
.modal-lado p{margin:0 0 .7rem;line-height:1.5}
.modal-lado b{color:var(--apagado);font-weight:500}
.modal-secao{padding:0 2rem 1.6rem}
.modal-secao h3{font-size:.95rem;margin-bottom:.8rem;color:var(--fraco)}
.modal-elenco{display:flex;gap:.8rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.4rem}
.modal-elenco::-webkit-scrollbar{display:none}
.modal-elenco .ator{width:88px}
.modal-elenco .ator img,.modal-elenco .ator .sem-foto{width:88px;height:88px}
.modal-links{display:grid;gap:.5rem}
.modal-link{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:var(--fundo3);border-radius:var(--raio);padding:.6rem .8rem;font-size:.84rem;
}
.modal-link .nome{font-weight:600;flex:1;min-width:140px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.travado{overflow:hidden}

/* A CAIXA DE MARCAR, que sobrou de um bloco maior.

   Aqui morava o desenho do importador de magnets: .item-import,
   .import-cabeca, .import-nome, .import-sinais, .import-corpo,
   .import-candidatos e .import-campos. Foi tudo embora em setembro de
   2026 com a tela que essas classes vestiam. A .marcar ficou porque
   nunca foi do importador - ela e a caixa de marcar de todo o painel
   (configuracoes, perfis, arquivos). */
.marcar{
  display:flex;align-items:center;gap:.45rem;flex-shrink:0;
  background:var(--fundo3);border:1px solid var(--borda);border-radius:var(--raio);
  padding:.45rem .7rem;cursor:pointer;font-size:.82rem;color:var(--fraco);
}
.marcar input{width:auto;margin:0}
.marcar:has(input:checked){border-color:var(--azul);color:var(--texto)}

/* ------------------------------------------------------------- perfis */
/* =======================================================================
   PERFIS

   A tela mostra o essencial - rosto e nome - e a edicao vai para uma
   modal, aberta pelos tres pontinhos do avatar. Antes cada perfil era um
   formulario aberto (nome, oito bolinhas de cor, caixa de infantil e
   dois botoes); com quatro perfis a tela virava quatro formularios lado
   a lado e nao dava nem para saber quem era quem.
   ===================================================================== */
.tela-perfis{
  position:relative;isolation:isolate;
  min-height:100dvh;display:grid;place-items:center;padding:3rem 1.5rem;
  background:radial-gradient(1100px 550px at 50% -5%,#171c26 0%,var(--preto) 65%);
}

/* ---------------------------------------------------- o fundo sorteado
   Um banner do proprio acervo atras da tela de "quem esta assistindo".

   TRES CAMADAS, e cada uma tem uma razao:
     1. a imagem, DESFOCADA e a 30% - nitida ela vira o assunto da tela,
        e o assunto tem de ser o nome dos perfis;
     2. um veu escuro por cima, para o texto branco ter contraste
        independente de o banner sorteado ser claro ou escuro;
     3. o mesmo degrade radial de antes por cima de tudo, que amarra a
        imagem ao preto do site em vez de deixar uma foto colada.
   O scale(1.06) existe porque o blur come as bordas: sem ele aparece uma
   moldura clara em volta da imagem. */
.perfis-fundo{
  position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--preto);
}
.perfis-fundo img{
  width:100%;height:100%;object-fit:cover;
  opacity:.3;filter:blur(3px) saturate(.85);transform:scale(1.06);
}
.perfis-fundo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(8,9,12,.62) 0%,rgba(8,9,12,.78) 55%,var(--preto) 100%),
    radial-gradient(1100px 550px at 50% -5%,rgba(23,28,38,.5) 0%,rgba(8,9,12,.9) 70%);
}
.perfis-caixa{text-align:center;max-width:980px;width:100%}
.perfis-caixa .marca{--marca-altura:44px;justify-content:center}
.perfis-caixa h1{
  font-family:"Outfit","Inter",system-ui,sans-serif;
  font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:700;
  margin:1.8rem 0 .5rem;
}
.perfis-sub{color:var(--fraco);font-size:.9rem;margin:0 0 2.6rem}

.perfis-lista{
  display:flex;gap:1.9rem;flex-wrap:wrap;justify-content:center;align-items:flex-start;
}
.perfil-cartao{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.perfil-forma{margin:0}

.perfil-avatar{
  position:relative;
  width:120px;height:120px;border-radius:14px;
  display:grid;place-items:center;padding:0;cursor:pointer;
  font-size:2.9rem;font-weight:800;color:#fff;font-family:"Outfit","Inter",sans-serif;
  border:3px solid transparent;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
/* Emoji nao e letra: no tamanho da inicial ele estoura a caixa. */
.perfil-avatar.emoji{font-size:3.4rem;font-weight:400;line-height:1}
.perfil-avatar:hover{
  border-color:#fff;transform:translateY(-4px) scale(1.04);
  box-shadow:0 16px 36px rgba(0,0,0,.6);
}
.perfil-avatar.vazio{
  background:var(--fundo3);color:var(--apagado);
  font-size:2.6rem;font-weight:300;
  border:2px dashed rgba(255,255,255,.22);
  box-shadow:none;
}
.perfil-avatar.vazio:hover{
  border-color:var(--azul-forte);color:var(--texto);
  background:rgba(47,125,251,.08);
}

/* Os tres pontinhos: so no modo gerenciar, e so quando se chega perto.
   Ficam num canto proprio para nao tapar o rosto. */
.perfil-pontos{
  position:absolute;top:.4rem;right:.4rem;
  width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;
  background:rgba(8,9,12,.66);backdrop-filter:blur(6px);
  color:#fff;font-size:1.05rem;font-style:normal;line-height:1;
  opacity:0;transition:opacity .18s;
}
.perfil-avatar:hover .perfil-pontos,
.perfil-avatar:focus-visible .perfil-pontos{opacity:1}

.perfil-nome{color:var(--texto);font-size:.95rem;font-weight:500}
.perfil-tag{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:#8fd0ff;background:rgba(47,125,251,.16);
  border:1px solid rgba(47,125,251,.32);border-radius:20px;padding:.1rem .5rem;
}
.perfis-rodape{margin-top:3.4rem;display:flex;gap:1.2rem;justify-content:center;align-items:center}
/* "Sair da conta" era um link solto ao lado de um botao - duas coisas
   com o mesmo peso de decisao e desenhos diferentes. Agora e botao de
   contorno, como o vizinho, e so o hover diz que ele e o que encerra. */
.perfis-rodape .sair{color:var(--fraco)}
.perfis-rodape .sair:hover{
  border-color:rgba(239,90,68,.55);color:#f4715d;background:rgba(239,90,68,.08);
}

/* ---- a modal de editar/criar -------------------------------------- */
.modal-perfil{
  position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:1.5rem;
  background:rgba(0,0,0,.76);backdrop-filter:blur(4px);
  animation:aparecer .18s ease;
}
/* A caixa tem TETO de altura e rola por dentro.
   Sem isso, numa tela baixa (um notebook, ou o celular deitado) a lista
   de avatares empurrava as cores e o botao de salvar para fora da
   janela - e nao havia como rolar ate eles, porque quem rola e a pagina
   de tras, que esta travada enquanto a modal esta aberta. O resultado
   era uma modal sem saida: dava para escolher o avatar e nao dava para
   salvar.

   O cabecalho e o X ficam parados; so o CORPO rola. */
.modal-perfil-caixa{
  position:relative;width:100%;max-width:440px;text-align:left;
  max-height:min(88vh,760px);display:flex;flex-direction:column;
  background:var(--fundo2);border:1px solid var(--borda);border-radius:18px;
  padding:2rem 1.8rem 1.6rem;box-shadow:0 34px 80px rgba(0,0,0,.8);
  animation:subir .22s ease;
}
.modal-perfil-caixa form{
  min-height:0;overflow-y:auto;
  /* a folga a direita evita o texto encostar na barra de rolagem */
  padding-right:.5rem;margin-right:-.5rem;
  scrollbar-width:thin;scrollbar-color:var(--borda) transparent;
}
.modal-perfil-caixa form::-webkit-scrollbar{width:8px}
.modal-perfil-caixa form::-webkit-scrollbar-track{background:transparent}
.modal-perfil-caixa form::-webkit-scrollbar-thumb{
  background:var(--borda);border-radius:99px;
  border:2px solid transparent;background-clip:content-box;
}
.modal-perfil-caixa form::-webkit-scrollbar-thumb:hover{
  background:var(--apagado);background-clip:content-box;
}
.modal-perfil-x{
  position:absolute;top:.8rem;right:.8rem;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.07);border:0;color:var(--fraco);
  font-size:1.3rem;line-height:1;cursor:pointer;
}
.modal-perfil-x:hover{background:rgba(255,255,255,.16);color:#fff}
.modal-perfil h2{
  font-family:"Outfit","Inter",system-ui,sans-serif;
  font-size:1.25rem;margin:0 0 1.4rem;
}
.mp-previa{display:flex;justify-content:center;margin-bottom:1.4rem}
.mp-previa .perfil-avatar{width:96px;height:96px;font-size:2.4rem;cursor:default}
.mp-previa .perfil-avatar.emoji{font-size:2.9rem}
.mp-previa .perfil-avatar:hover{transform:none;border-color:transparent}

.mp-campo{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.3rem}
.mp-campo > span{font-size:.78rem;font-weight:600;color:var(--fraco)}
.mp-campo input{margin:0}

.mp-secao{margin-bottom:1.3rem}
.mp-rotulo{
  display:block;font-size:.78rem;font-weight:600;color:var(--fraco);margin-bottom:.55rem;
}
.mp-avatares{
  display:grid;grid-template-columns:repeat(8,1fr);gap:.32rem;
}
.mp-avatar{
  aspect-ratio:1;border-radius:9px;cursor:pointer;
  background:var(--fundo3);border:2px solid transparent;
  font-size:1.15rem;line-height:1;padding:0;
  display:grid;place-items:center;
  transition:border-color .15s,background .15s,transform .12s;
}
.mp-avatar:hover{background:rgba(255,255,255,.1);transform:scale(1.08)}
.mp-avatar.on{border-color:var(--azul-forte);background:rgba(47,125,251,.18)}
/* o primeiro e "usar a inicial do nome" */
.mp-avatar.inicial{font-weight:800;font-size:.95rem;color:var(--fraco)}

.mp-cores{display:flex;gap:.45rem;flex-wrap:wrap}
.mp-cor{
  width:30px;height:30px;border-radius:50%;cursor:pointer;padding:0;
  border:3px solid transparent;transition:transform .15s,border-color .15s;
}
.mp-cor:hover{transform:scale(1.12)}
.mp-cor.on{border-color:#fff;transform:scale(1.12)}

.mp-infantil{width:100%;align-items:flex-start;gap:.7rem;padding:.8rem .9rem;margin-bottom:1.4rem}
.mp-infantil input{margin-top:.15rem}
.mp-infantil span{display:flex;flex-direction:column;gap:.15rem}
.mp-infantil b{font-size:.86rem;color:var(--texto)}
.mp-infantil i{font-size:.76rem;font-style:normal;color:var(--fraco)}

.mp-acoes{display:flex;gap:.5rem;flex-wrap:wrap}
.mp-acoes .botao{flex:1;min-width:110px;justify-content:center}
.mp-acoes .perigo{flex:0 0 auto;min-width:0}

@media (max-width:560px){
  .perfil-avatar{width:96px;height:96px;font-size:2.3rem}
  .perfil-avatar.emoji{font-size:2.7rem}
  .perfis-lista{gap:1.2rem}
  .mp-avatares{grid-template-columns:repeat(6,1fr)}
}

/* ------------------------------------------------------- busca do topo */
/* Fechada e so a lupa; ao clicar, abre em pilula azul. */
.busca-topo{
  display:flex;align-items:center;gap:0;
  /* min-width:0 nos DOIS - o formulario e o campo. Um <input> tem
     largura minima propria (a "size" do HTML), e como item de flex ela
     vira um piso que nada empurra: no celular, com a busca aberta, a
     barra do topo passava da tela e o avatar ficava cortado pela
     direita. */
  min-width:0;
  border:1px solid transparent;border-radius:7px;
  background:transparent;transition:background .25s,border-color .25s,padding .25s,box-shadow .25s;
  padding:.42rem;
}
.busca-topo:focus-within,.busca-topo.aberta{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);
  padding:.42rem .9rem;
}
.busca-icone{
  background:none;border:0;cursor:pointer;color:#b9c8e0;
  display:grid;place-items:center;padding:.2rem;flex-shrink:0;transition:color .2s;
}
.busca-icone:hover{color:#fff}
.busca-topo:focus-within .busca-icone,.busca-topo.aberta .busca-icone{color:var(--azul-forte)}
.busca-topo input{
  background:none;border:0;outline:0;color:var(--texto);font-family:inherit;
  width:0;min-width:0;padding:0;font-size:.88rem;
  transition:width .25s ease,padding .25s ease;
}
/* O CAMPO ABERTO E LARGO, E O MENU SAI DE BAIXO DELE.
   Com 200px ele era um risco no canto, e a lista larga que abre embaixo
   parecia vir de outro lugar. Agora os dois tem a mesma largura e leem
   como uma coisa so.

   E O MENU CONTINUA LA. A primeira versao apagava o menu inteiro
   assim que alguem tocava no campo, em qualquer largura de tela - e
   numa tela de 1900px, onde sobra espaco de sobra para as duas coisas,
   isso era so um menu sumindo sem motivo. O menu so sai de cena onde
   ele REALMENTE nao cabe ao lado do campo aberto: abaixo de 1100px.
   Acima disso sobra espaco para a marca, o menu, o campo de 26rem e o
   avatar - entao os quatro ficam. */
.busca-topo:focus-within,.busca-topo.aberta{
  position:relative;z-index:70;
}
.busca-topo:focus-within input,.busca-topo.aberta input{
  width:min(26rem,52vw);padding:.34rem .6rem;font-size:.98rem;
}
.topo nav{transition:opacity .18s ease}
@media (max-width:1100px){
  html.busca-aberta .topo nav{opacity:0;pointer-events:none}
}
.busca-topo input::placeholder{color:var(--apagado)}

/* ------------------------------------------------- menu do perfil */
/* (o visual do menu principal fica la em cima, no bloco do topo) */
.menu-perfil{position:relative}
.menu-botao{
  display:flex;align-items:center;gap:.45rem;background:none;border:0;cursor:pointer;
  padding:.2rem;color:var(--texto);
}
.menu-botao .seta-baixo{
  font-size:.6rem;color:var(--fraco);transition:transform .25s;
}
.menu-perfil.aberto .seta-baixo{transform:rotate(180deg)}
.avatar{
  width:34px;height:34px;border-radius:6px;flex-shrink:0;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:.88rem;
  border:2px solid transparent;transition:border-color .2s,box-shadow .2s;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.menu-botao:hover .avatar{border-color:#fff}
.menu-lista{
  position:absolute;right:0;top:calc(100% + .6rem);min-width:210px;z-index:70;
  background:rgba(20,20,24,.98);border:1px solid rgba(255,255,255,.1);border-radius:8px;
  padding:.5rem;box-shadow:var(--sombra);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.menu-perfil.aberto .menu-lista{opacity:1;visibility:visible;transform:none}
.menu-lista a,.menu-lista button{
  display:flex;align-items:center;gap:.6rem;width:100%;
  padding:.5rem .65rem;border-radius:8px;border:0;background:none;
  color:var(--fraco);font-size:.86rem;text-align:left;cursor:pointer;font:inherit;
}
.menu-lista a:hover,.menu-lista button:hover{background:rgba(255,255,255,.08);color:#fff}
.menu-lista .divisor{height:1px;background:var(--borda);margin:.4rem 0}
.menu-lista .mini-avatar{
  width:26px;height:26px;border-radius:5px;display:grid;place-items:center;
  font-size:.72rem;font-weight:800;color:#fff;flex-shrink:0;
}

/* --------------------------------------------------------------- trailer */
/* O trailer abre em cima da pagina inteira, escurecendo tudo atras. */
.lightbox{
  /* ACIMA DA MODAL, e nao ao lado dela.
     As duas viviam em z-index 200, e quem ganhava era a ordem no HTML -
     o trailer aberto de dentro da janela de informacoes podia ficar
     ATRAS dela. Com um numero maior isso deixa de depender de sorte. */
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;padding:4vh 4vw;
  background:rgba(6,6,8,.93);backdrop-filter:blur(10px);
  animation:surgir .22s ease;
}
.lightbox[hidden]{display:none}
@keyframes surgir{from{opacity:0}to{opacity:1}}
.lightbox-caixa{
  position:relative;width:min(1240px,100%);aspect-ratio:16/9;max-height:88vh;
  background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.9);
  animation:subir .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes subir{from{opacity:0;transform:scale(.96) translateY(14px)}to{opacity:1;transform:none}}
.lightbox-caixa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox-titulo{
  position:absolute;left:0;right:0;top:0;z-index:2;padding:1rem 1.2rem;
  background:linear-gradient(180deg,rgba(0,0,0,.75),transparent);
  font-size:.95rem;font-weight:600;pointer-events:none;
}
.lightbox-fechar{
  position:absolute;top:2.2vh;right:3vw;z-index:210;
  width:44px;height:44px;border-radius:50%;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  font-size:1.3rem;line-height:1;display:grid;place-items:center;
  transition:background .2s,transform .2s;
}
.lightbox-fechar:hover{background:var(--erro);border-color:var(--erro);transform:rotate(90deg)}

/* caixa embutida, ainda usada pelo modal do catalogo */
.trailer{
  position:relative;display:block;width:100%;max-width:900px;
  aspect-ratio:16/9;max-height:70vh;
  border-radius:var(--raio-g);overflow:hidden;
  background:#000;box-shadow:var(--sombra);border:1px solid var(--borda);
}
.trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.trailer-capa{position:absolute;inset:0;cursor:pointer;overflow:hidden;display:block}
.trailer-capa img{
  position:absolute;inset:0;width:100%;height:100%;max-width:100%;
  object-fit:cover;transition:transform .5s,filter .3s;
}
.trailer-capa:hover img{transform:scale(1.04);filter:brightness(.72)}
.trailer-capa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,.15));
}
.trailer-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#111;font-size:1.4rem;
  box-shadow:0 8px 30px rgba(0,0,0,.6);transition:transform .2s,background .2s;
  padding-left:4px;
}
.trailer-capa:hover .trailer-play{transform:translate(-50%,-50%) scale(1.1)}
.trailer-rotulo{
  position:absolute;left:1.2rem;bottom:1rem;z-index:2;
  font-size:.9rem;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.9);
}

/* ------------------------------------------------------------ telas pequenas */
@media (max-width:900px){
  .painel-ficha{grid-template-columns:minmax(0,1fr)}
  .ficha-poster{width:150px}
  .modal-dados{grid-template-columns:1fr;gap:1rem}
  .cartao{width:210px}
}
@media (max-width:1320px){
  .topo nav a,.nav-botao{padding:.55rem .6rem}
  .topo nav{margin-left:.9rem}
  .busca-topo:focus-within input,.busca-topo.aberta input{width:min(20rem,32vw)}
}
/* No painel do celular o menu vira lista vertical e ha espaco de sobra:
   ali o rotulo volta, senao restariam dois icones mudos numa coluna de
   itens escritos por extenso. */
/* ------------------------------------------ a barra vira gaveta antes
   O MENU JA ESTOURAVA A BARRA ABAIXO DE ~1180px, e nao por causa das
   telas novas: com seis itens a conta ja nao fechava em 1024, e o que
   era empurrado para fora da tela nao era o ultimo item do menu - eram
   a BUSCA e o PERFIL, que vem depois dele. Media aqui: 47 pontos de
   sobra em 1024, 261 em 700. Passava despercebido porque o item que
   caia fora era "Lancamentos", que ninguem procura primeiro.

   A gaveta - os tres tracinhos - so entrava em 640. Ela ja funciona e
   ja cabe tudo; entrar mais cedo conserta a faixa inteira de tablet, e
   de quebra abre espaco para as duas telas novas. Abaixo de 640 as
   medidas de dedo continuam valendo, no bloco seguinte. */
@media (max-width:1180px){
  /* HTML:NOT(.TV) E O CONSERTO DE UMA REGRESSAO MINHA.
     Sem isso, a TV entrava aqui - o navegador dela informa 1280 ou
     menos - e o menu virava gaveta. So que na TV a gaveta e um beco
     sem saida: os tres tracinhos sao escondidos de proposito (nao ha
     dedo para toca-los, e o controle nao alcanca um botao que so
     existe no celular). Resultado: a TV ficou com logo, busca e
     perfil, e MENU NENHUM. */
  html:not(.tv) .topo nav{
    display:none;
    position:absolute;left:0;right:0;top:var(--topo-altura);
    flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:.4rem 0 .7rem;
    background:#101014;border-top:1px solid var(--borda);
    box-shadow:0 18px 40px rgba(0,0,0,.6);
    max-height:calc(100vh - var(--topo-altura));overflow-y:auto;
  }
  html:not(.tv) .topo nav.aberto{display:flex}
  html:not(.tv) .menu-tres{display:flex}

  /* Na gaveta ha uma linha inteira por item: o rotulo volta, senao
     sobrariam dois icones mudos numa coluna de itens escritos por
     extenso. */

  html:not(.tv) .topo nav a,.topo nav .nav-botao{
    width:100%;justify-content:flex-start;
    padding:.85rem 1.4rem;border-radius:0;font-size:.95rem;
  }
  html:not(.tv) .topo nav a::after,.topo nav .nav-botao::after{display:none}
  html:not(.tv) .topo nav a.on{background:rgba(47,125,251,.16)}

  /* O SUBMENU DE GENEROS vira parte da lista, e nao uma caixa
     flutuante: aqui nao ha espaco ao lado para ela abrir. Ele nasce
     FECHADO - com quatorze generos abertos por padrao, os Lancamentos
     ficariam abaixo da dobra da gaveta e ninguem os acharia. */
  html:not(.tv) .topo nav .nav-menu{width:100%}
  html:not(.tv) .topo nav .nav-lista{
    position:static;transform:none;
    min-width:0;max-height:none;background:transparent;border:0;
    box-shadow:none;padding:0;
    display:none;opacity:1;visibility:visible;transition:none;
  }
  html:not(.tv) .topo nav .nav-menu.aberto .nav-lista{display:block;padding:0 0 .3rem}
  html:not(.tv) .topo nav .nav-menu:hover .nav-lista{display:none}
  html:not(.tv) .topo nav .nav-menu.aberto:hover .nav-lista{display:block}
  html:not(.tv) .topo nav .nav-lista a{padding-left:2.6rem;font-size:.9rem;opacity:.85}
}

@media (max-width:640px){
  .topo{gap:1rem;padding:0 4vw}

  /* MEDIDA DE DEDO no celular: a gaveta ja veio do bloco de cima; aqui
     so mudam os recuos, que acompanham a largura da tela. */
  .topo nav a,.topo nav .nav-botao{padding:.85rem 4vw}
  .topo nav .nav-lista a{padding-left:9vw}

     Ele continua fora da barra - nao ha largura para cinco itens em
     414px - mas agora desce como painel quando alguem toca nos tres
     tracinhos. Antes daqui ele so tinha "display:none", e o celular
     ficava sem nenhuma forma de chegar em Filmes, Series, Premiados,
     Generos ou Lancamentos. */

  /* O SUBMENU DE GENEROS vira parte da lista, e nao uma caixa
     flutuante: no celular nao ha espaco ao lado para ela abrir. Ele
     nasce FECHADO - com quatorze generos abertos por padrao, os
     Lancamentos ficariam abaixo da dobra do painel e ninguem os
     acharia. O botao que abre ja funciona: o app.js liga o clique de
     .nav-botao a classe .aberto desde sempre, e e a mesma classe
     usada no computador. */
  .marca::before{width:7px;height:22px;margin-right:.5rem}
  .busca-topo:focus-within input,.busca-topo.aberta input{width:min(42vw,160px)}
  .hero-acoes{gap:.5rem}
  .hero-acoes .botao{flex:1 1 45%;padding:.65rem .8rem;font-size:.86rem}
  .campos{grid-template-columns:1fr}
  .destaque{min-height:60vh}
  .destaque h1{font-size:1.7rem}
  /* no celular o poster sobe para cima do texto: lado a lado nao cabe
     em 414px e empurrava a pagina para fora da tela */
  .ficha-cabeca{flex-direction:column;align-items:flex-start;gap:1rem}
  .ficha-poster{width:118px}
  .ficha-info{min-width:0;width:100%}
  .ficha-topo{min-height:auto;padding-top:calc(var(--topo-altura) + 1.4rem);padding-bottom:2rem}
  .ficha-info h1{font-size:1.65rem}
  .hero-info{max-width:100%}
  .lightbox{padding:0}
  .lightbox-caixa{border-radius:0;max-height:100vh}
  .lightbox-fechar{top:1rem;right:1rem;width:38px;height:38px}
  .cartao{width:176px}
  .pagina{padding-left:4vw;padding-right:4vw}
  .modal-fundo{padding:0}
  .modal{border-radius:0;max-width:100%}
  .modal-arte-corpo,.modal-dados,.modal-secao{padding-left:1.2rem;padding-right:1.2rem}
  .modal-arte-corpo{left:0;right:0}
  .numero{font-size:6.2rem;left:-58px;width:58px;-webkit-text-stroke-width:2px}
  .cartao.com-numero{margin-left:60px}
  .cartao.com-numero.dez{margin-left:86px}
  .cartao.com-numero.dez .numero{left:-86px;width:86px}
  .fileira.numerada .trilho{padding-left:4vw}
  /* em toque nao ha hover: o cartao nao cresce, o toque abre o modal */
  .cartao:hover{transform:none}
  .cartao:hover .cartao-info{max-height:0;opacity:0;padding:0 .8rem}
  .trilho:hover .cartao{opacity:1}
}
@media (hover:none){
  .cartao:hover{transform:none}
  .cartao:hover .cartao-info{max-height:0;opacity:0;padding:0 .8rem}
  .trilho:hover .cartao{opacity:1}
  .seta{display:none}
}

/* =====================================================================
   PAINEL ADMINISTRATIVO
   Barra lateral fixa + area de conteudo. Tudo dentro de .admin.
   ===================================================================== */
.admin{
  display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:0;min-height:100vh;padding-top:var(--topo-altura);
}

/* ------------------------------------------------------ barra lateral */
.admin-lado{
  position:sticky;top:var(--topo-altura);align-self:start;
  height:calc(100vh - var(--topo-altura));overflow-y:auto;
  background:var(--fundo2);border-right:1px solid var(--borda);
  padding:1.4rem 0 2rem;display:flex;flex-direction:column;

  /* A barra de rolagem no Firefox: fina e na cor do menu. */
  scrollbar-width:thin;
  scrollbar-color:var(--borda) transparent;
}

/* E no Chrome, que ignora as duas linhas acima. Fina, sem as setinhas
   das pontas, e sem o trilho branco - a tira cinza-clara colada num menu
   preto era a unica coisa do painel desenhada pelo sistema, e via-se.
   Some quando ninguem esta com o mouse por perto. */
.admin-lado::-webkit-scrollbar{width:8px}
.admin-lado::-webkit-scrollbar-track{background:transparent}
.admin-lado::-webkit-scrollbar-thumb{
  background:transparent;border-radius:99px;
  border:2px solid transparent;background-clip:content-box;
}
.admin-lado:hover::-webkit-scrollbar-thumb{background:var(--borda);background-clip:content-box}
.admin-lado::-webkit-scrollbar-thumb:hover{background:var(--apagado);background-clip:content-box}
.admin-lado::-webkit-scrollbar-button{display:none}
.admin-marca{
  display:flex;align-items:center;gap:.6rem;
  padding:0 1.3rem 1.2rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--borda);
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fraco);
}
.admin-marca .ico{width:15px;height:15px;color:var(--azul-forte);opacity:1}
.admin-grupo{
  padding:1.1rem 1.3rem .45rem;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--apagado);
}
.admin-lado nav{display:flex;flex-direction:column;gap:1px}
.admin-lado nav a{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem 1.3rem;font-size:.88rem;color:#b8b8c4;
  border-left:2px solid transparent;transition:all .15s;
}
.admin-lado nav a .ico{width:16px;height:16px;opacity:.6;flex-shrink:0}
.admin-lado nav a span{flex:1;min-width:0}
.admin-lado nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.admin-lado nav a:hover .ico{opacity:1}
.admin-lado nav a.on{
  background:rgba(255,255,255,.07);color:#fff;font-weight:600;
  border-left-color:var(--azul);
}
.admin-lado nav a.on .ico{color:var(--azul-forte);opacity:1}
.admin-selo{
  font-size:.68rem;font-weight:700;padding:.1rem .42rem;border-radius:20px;
  background:rgba(255,255,255,.09);color:var(--fraco);flex-shrink:0;
}
.admin-selo.alerta{background:rgba(240,180,41,.18);color:var(--alerta)}
.admin-selo.erro{background:rgba(239,90,68,.18);color:var(--erro)}
.admin-rodape{
  margin-top:auto;padding:1.2rem 1.3rem 0;border-top:1px solid var(--borda);
}
.admin-rodape a{
  display:flex;align-items:center;gap:.6rem;font-size:.84rem;color:var(--fraco);
}
.admin-rodape a:hover{color:#fff}
.admin-rodape .ico{width:15px;height:15px}

/* ------------------------------------------------------------- corpo */
.admin-corpo{padding:1.8rem 2.4rem 5rem;min-width:0;width:100%}
.admin-cabeca{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.4rem;flex-wrap:wrap;margin-bottom:1.8rem;
}
.admin-cabeca h1{font-size:1.55rem;margin:0}
.admin-cabeca p{margin:.35rem 0 0}
.admin-acoes{display:flex;gap:.6rem;flex-wrap:wrap}

/* ------------------------------------------------------ cartao/secao */
.cartao-admin{
  background:var(--fundo2);border:1px solid var(--borda);border-radius:14px;
  padding:1.4rem 1.5rem;margin-bottom:1.6rem;
}
.cartao-admin-topo{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem;
}
.cartao-admin-topo h2{font-size:1.02rem;margin:0}
.cartao-admin-topo .contagem{
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fraco);background:rgba(255,255,255,.07);
  padding:.12rem .5rem;border-radius:20px;margin-left:.5rem;
}
.admin-colunas{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}

/* ------------------------------------------------- rotinas / agenda --
   Um bloco por rotina automatica: o que faz, de quanto em quanto tempo,
   quantos estao na fila e quando rodou pela ultima vez. Antes isso so
   existia dentro do crontab, so se via por SSH. */
.rotinas{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem}
.rotina{
  background:var(--fundo3);border:1px solid var(--borda);border-radius:12px;
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;
}
.rotina-cabeca{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.rotina-cabeca b{font-size:.92rem}
.rotina p{margin:0;font-size:.8rem;line-height:1.5}
.rotina-pe{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  font-size:.76rem;margin-top:auto;padding-top:.5rem;
  border-top:1px solid var(--borda);
}
.rotina-pe form{margin:0}
.rotina-pe code{font-size:.72rem}

/* --------------------------------------------------- formularios de ajuste
   Cada campo carrega a sua propria explicacao (<i>). Numero de
   configuracao sem explicacao ao lado e numero que ninguem mexe - foi
   o que aconteceu enquanto tudo isto morava no .env. */
.form-config{margin-top:1.4rem;border-top:1px solid var(--borda);padding-top:1.4rem}
.grade-campos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.1rem;margin-bottom:1.1rem;
}
.grade-campos label{display:flex;flex-direction:column;gap:.35rem}
.grade-campos label > span{font-size:.84rem;font-weight:600;color:var(--texto)}
.grade-campos label > i{font-size:.75rem;color:var(--fraco);font-style:normal;line-height:1.45}
.grade-campos input{width:100%}

/* No formulario de ajustes o "marcar" e um bloco com titulo e
   explicacao, nao a etiqueta compacta do importador. */
.form-config .marcar{
  display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;
  margin-bottom:.8rem;
}
.form-config .marcar input{margin-top:.15rem}
.form-config .marcar span{display:flex;flex-direction:column;gap:.2rem}
.form-config .marcar b{font-size:.86rem;color:var(--texto)}
.form-config .marcar i{font-size:.76rem;font-style:normal;line-height:1.45}

/* --------------------------------------------------- numeros do topo */
.numeros{
  display:grid;gap:1rem;margin-bottom:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.num-cartao{
  display:block;background:var(--fundo2);border:1px solid var(--borda);
  border-radius:14px;padding:1.2rem 1.3rem;
  border-top:3px solid var(--borda);transition:all .18s;
}
a.num-cartao:hover{border-color:rgba(255,255,255,.24);transform:translateY(-2px)}
.num-cartao b{display:block;font-size:2.1rem;font-weight:700;line-height:1.05}
.num-cartao span{display:block;font-size:.82rem;color:var(--fraco);margin-top:.3rem}
.num-cartao i{display:block;font-style:normal;font-size:.74rem;color:var(--apagado);margin-top:.5rem}
.num-cartao.ok{border-top-color:var(--ok)}      .num-cartao.ok b{color:var(--ok)}
.num-cartao.alerta{border-top-color:var(--alerta)} .num-cartao.alerta b{color:var(--alerta)}
.num-cartao.erro{border-top-color:var(--erro)}  .num-cartao.erro b{color:var(--erro)}

/* ------------------------------------------------------ barra saude */
.barra-saude{
  display:flex;height:12px;border-radius:20px;overflow:hidden;
  background:var(--fundo3);margin-bottom:.9rem;
}
.barra-saude i{display:block;height:100%;transition:width .4s}
.barra-saude i.ok{background:var(--ok)}
.barra-saude i.fraco{background:var(--alerta)}
.barra-saude i.morto{background:var(--erro)}
.barra-saude i.novo{background:var(--apagado)}
.legenda-saude{display:flex;gap:1.3rem;flex-wrap:wrap;font-size:.8rem;color:var(--fraco)}
.legenda-saude span{display:flex;align-items:center;gap:.42rem}
.legenda-saude i{width:9px;height:9px;border-radius:50%;display:block}
.legenda-saude i.ok{background:var(--ok)}
.legenda-saude i.fraco{background:var(--alerta)}
.legenda-saude i.morto{background:var(--erro)}
.legenda-saude i.novo{background:var(--apagado)}

/* ------------------------------------------------------ listas/vazio */
.lista-admin{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lista-admin li{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.72rem 0;border-bottom:1px solid var(--borda);font-size:.88rem;
}
.lista-admin li:last-child{border-bottom:0;padding-bottom:0}
.lista-admin li > a:first-child{display:flex;gap:.5rem;align-items:baseline;min-width:0}
.lista-admin li > a:first-child:hover strong{color:var(--azul-forte)}
.lista-apoio{
  color:var(--apagado);font-size:.78rem;margin-left:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%;
}
.vazio-admin{
  display:flex;align-items:center;gap:.8rem;
  color:var(--fraco);font-size:.9rem;padding:1.6rem 0;margin:0;
}
.vazio-admin .ico{width:20px;height:20px;color:var(--ok);opacity:.8;flex-shrink:0}

/* ---------------------------------------------------- mini grade */
.mini-grade{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.mini-item{display:block;text-align:center}
.mini-item img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;
  background:var(--fundo3);border:1px solid var(--borda);transition:all .18s;
}
.mini-item:hover img{border-color:var(--azul);transform:translateY(-3px)}
.mini-item b{display:block;font-size:.78rem;font-weight:600;margin-top:.5rem;line-height:1.25}
.mini-item span{display:block;font-size:.72rem;color:var(--apagado)}

/* --------------------------------------------------- grafico simples */
.grafico-barras{display:flex;flex-direction:column;gap:.6rem}
.barra-linha{display:grid;grid-template-columns:110px 1fr 34px;gap:.7rem;align-items:center;font-size:.82rem}
.barra-rot{color:var(--fraco);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-trilho{height:7px;background:var(--fundo3);border-radius:20px;overflow:hidden}
.barra-trilho i{display:block;height:100%;background:var(--azul);border-radius:20px}
.barra-linha b{font-size:.8rem;text-align:right;color:var(--fraco)}

/* --------------------------------------------------- filtros e tabela */
.filtro-barra{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem}
.campo-busca{
  display:flex;align-items:center;gap:.55rem;flex:1;min-width:220px;
  background:var(--fundo3);border:1px solid var(--borda);border-radius:9px;padding:0 .8rem;
  transition:border-color .2s;
}
.campo-busca:focus-within{border-color:var(--azul)}
.campo-busca .ico{width:16px;height:16px;color:var(--apagado);flex-shrink:0}
.campo-busca input{background:none;border:0;outline:0;margin:0;padding:.6rem 0;width:100%;color:var(--texto)}
.filtro-barra select{width:auto;margin:0}
.tabela.compacta td,.tabela.compacta th{padding:.55rem .7rem;font-size:.82rem}
.mini-capa{
  width:40px;height:60px;object-fit:cover;border-radius:5px;
  background:var(--fundo3);border:1px solid var(--borda);
}
.filmes-admin td{vertical-align:middle}
.filmes-admin .forte{font-weight:600}
.filmes-admin .forte:hover{color:var(--azul-forte)}
.em-linha{display:inline}
.paginas{display:flex;gap:1rem;align-items:center;justify-content:center;margin-top:1.4rem}

/* =====================================================================
   IMPORTADOR - fila de magnets
   ===================================================================== */
/* A caixa de colar foi removida: o Ctrl+V vale na pagina inteira. */
.colar-erro{
  margin:.7rem 0 0;padding:.55rem .8rem;border-radius:8px;font-size:.84rem;
  background:rgba(240,180,41,.12);border:1px solid rgba(240,180,41,.35);color:var(--alerta);
}
.colar-erro.bom{background:rgba(62,207,114,.12);border-color:rgba(62,207,114,.35);color:var(--ok)}

.fila-magnets{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.magnet-item{
  display:flex;align-items:flex-start;gap:.9rem;
  background:var(--fundo3);border:1px solid var(--borda);border-radius:11px;
  padding:.85rem .9rem;animation:entrou .22s ease;
}
.magnet-item.repetido{border-color:rgba(240,180,41,.4);background:rgba(240,180,41,.05)}
@keyframes entrou{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.magnet-num{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;background:var(--azul);color:#fff;
  font-size:.72rem;font-weight:700;margin-top:.1rem;
}
.magnet-dados{flex:1;min-width:0}
.magnet-dados > strong{display:block;font-size:.95rem;font-weight:600;line-height:1.3}
.magnet-sinais{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem}
.magnet-sinais .dado{font-size:.72rem;padding:.1rem .45rem}
.magnet-sinais .dado.hash{
  display:inline-flex;font-family:ui-monospace,Menlo,Consolas,monospace;
  color:var(--apagado);margin:0;word-break:normal;
}
.magnet-sinais .dado.aviso-ja{
  background:rgba(240,180,41,.16);border-color:rgba(240,180,41,.4);color:var(--alerta);
}
/* "serie" e "T1 E05" saltam a vista na lista colada: e por eles que se
   confere, de relance, se o leitor acertou o episodio. */
.magnet-sinais .dado.tipo-serie{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);
  color:var(--fraco);text-transform:uppercase;font-weight:800;letter-spacing:.05em;
}
/* o chip do episodio e um BOTAO: clicar abre a correcao a mao */
.magnet-sinais .dado.episodio,
.magnet-sinais .dado.virar-serie{
  cursor:pointer;font-family:inherit;line-height:inherit;
}
.magnet-sinais .dado.episodio{
  background:rgba(47,125,251,.16);border-color:var(--azul-linha);
  color:#cfe1ff;font-weight:800;font-variant-numeric:tabular-nums;
}
.magnet-sinais .dado.episodio:hover{background:rgba(47,125,251,.3);color:#fff}
.magnet-sinais .dado.virar-serie{
  background:transparent;border-style:dashed;color:var(--apagado);
}
.magnet-sinais .dado.virar-serie:hover{color:#cfe1ff;border-color:var(--azul-linha)}

/* correcao a mao da temporada e do episodio, dentro da lista colada */
.ep-editor{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;
  margin-top:.55rem;padding:.7rem .8rem;border-radius:10px;
  background:rgba(47,125,251,.07);border:1px solid var(--azul-linha);
}
.ep-editor label{
  display:grid;gap:.2rem;font-size:.68rem;color:var(--fraco);
  text-transform:uppercase;letter-spacing:.04em;font-weight:700;
}
.ep-editor .ep-campo{
  width:120px;padding:.35rem .5rem;border-radius:7px;font-size:.82rem;
  background:var(--fundo3);border:1px solid var(--borda);color:var(--texto);
}
.ep-editor .ep-campo:focus{outline:none;border-color:var(--azul)}
.magnet-arquivo{
  display:block;margin-top:.45rem;font-size:.73rem;color:var(--apagado);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.magnet-tirar{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;cursor:pointer;
  background:none;border:1px solid var(--borda);color:var(--fraco);
  font-size:1.05rem;line-height:1;display:grid;place-items:center;
  transition:all .16s;font-family:inherit;
}
.magnet-tirar:hover{background:rgba(239,90,68,.16);border-color:var(--erro);color:var(--erro)}

/* ---- a ficha achada no TMDB, dentro da linha --------------------- */
.ficha-achada{
  display:flex;align-items:center;gap:.7rem;margin-top:.7rem;
  padding:.5rem .6rem;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid var(--borda);
}
.ficha-achada.carregando{color:var(--fraco);font-size:.82rem;padding:.6rem}
.ficha-achada.nenhuma{border-color:rgba(240,180,41,.35);background:rgba(240,180,41,.06)}
.ficha-capa{width:34px;height:50px;border-radius:5px;overflow:hidden;flex-shrink:0;
  background:var(--fundo2);display:grid;place-items:center}
.ficha-capa img{width:100%;height:100%;object-fit:cover}
.ficha-capa .sem-poster,.ficha-capa.vazia{
  color:var(--apagado);font-weight:700;font-size:.95rem;
  width:34px;height:50px;display:grid;place-items:center;
}
.ficha-txt{flex:1;min-width:0}
.ficha-txt b{display:block;font-size:.86rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ficha-txt i{display:block;font-style:normal;font-size:.74rem;color:var(--fraco);margin-top:.1rem}
.ficha-trocar{
  background:none;border:1px solid var(--borda);border-radius:7px;cursor:pointer;
  color:var(--fraco);font-size:.74rem;padding:.3rem .6rem;font-family:inherit;
  white-space:nowrap;flex-shrink:0;transition:all .16s;
}
.ficha-trocar:hover{border-color:var(--azul);color:var(--azul-forte)}
.ficha-trocar.chamando{border-color:var(--azul);color:var(--azul-forte);font-weight:600}

/* ---- corrigir o titulo ------------------------------------------- */
.busca-caixa{margin-top:.6rem;padding:.7rem;border-radius:9px;
  background:rgba(0,0,0,.25);border:1px solid var(--borda)}
.busca-linha{display:flex;gap:.45rem;flex-wrap:wrap}
.busca-titulo{
  flex:1;min-width:150px;margin:0;padding:.45rem .65rem;font-size:.85rem;
  background:var(--fundo2);border:1px solid var(--borda);border-radius:7px;color:var(--texto);
}
.busca-titulo:focus{outline:0;border-color:var(--azul)}
.busca-aviso{margin:.7rem 0 0;font-size:.8rem;color:var(--fraco);display:flex;align-items:center;gap:.5rem}
/* motivo real da falha (sem chave do TMDB, servidor fora do ar...) */
.busca-aviso.ruim{color:var(--alerta)}
.busca-resultados{display:flex;gap:.5rem;overflow-x:auto;margin-top:.7rem;padding-bottom:.3rem}
.busca-op{
  flex:0 0 auto;width:84px;background:none;border:2px solid transparent;border-radius:8px;
  cursor:pointer;padding:.2rem;text-align:center;font-family:inherit;color:var(--fraco);
  transition:all .16s;
}
.busca-op img,.busca-op .sem-poster{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;display:block;
  background:var(--fundo2);
}
.busca-op .sem-poster{display:grid;place-items:center;font-size:1.3rem;color:var(--apagado)}
.busca-op span{display:block;font-size:.7rem;margin-top:.3rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-op i{display:block;font-style:normal;font-size:.66rem;color:var(--apagado)}
.busca-op:hover{border-color:rgba(255,255,255,.3);color:var(--texto)}
.busca-op.on{border-color:var(--azul);color:#fff}

.girando{
  width:13px;height:13px;border-radius:50%;display:inline-block;flex-shrink:0;
  border:2px solid var(--borda);border-top-color:var(--azul);
  animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

.fila-vazia{
  display:flex;align-items:center;gap:1rem;margin-top:1.2rem;
  padding:1.4rem;border:1px dashed var(--borda);border-radius:12px;color:var(--fraco);
}
.fila-vazia .ico{width:26px;height:26px;opacity:.5;flex-shrink:0}
.fila-vazia strong{display:block;font-size:.9rem;color:var(--texto)}
.fila-vazia span{display:block;font-size:.83rem;margin-top:.2rem}

/* ------------------------------------------------------- telas menores */
@media (max-width:1080px){
  .admin{grid-template-columns:1fr}
  .admin-lado{
    position:static;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:.3rem;padding:.8rem 4vw;
    border-right:0;border-bottom:1px solid var(--borda);
  }
  .admin-marca,.admin-grupo,.admin-rodape{display:none}
  .admin-lado nav{flex-direction:row;flex-wrap:wrap;gap:.3rem}
  .admin-lado nav a{border-left:0;border-radius:8px;padding:.5rem .8rem;font-size:.82rem}
  .admin-lado nav a.on{background:var(--azul);color:#fff}
  .admin-lado nav a.on .ico{color:#fff}
  .admin-corpo{padding:1.4rem 4vw 4rem}
  .admin-colunas{grid-template-columns:1fr}
}
@media (max-width:640px){
  .numeros{grid-template-columns:1fr 1fr;gap:.7rem}
  .num-cartao{padding:.9rem 1rem}
  .num-cartao b{font-size:1.6rem}
  .cartao-admin{padding:1.1rem 1rem}
  .filmes-admin td:nth-child(4),.filmes-admin th:nth-child(4){display:none}
}

/* --- acoes da tabela: cabem numa linha so, e o apagar so avisa no hover */
.filmes-admin .acoes-linha{flex-wrap:nowrap;gap:.35rem}
.filmes-admin .acoes-linha .botao.pequeno{padding:.42rem .5rem;gap:0}
.filmes-admin .acoes-linha .botao .ico{width:15px;height:15px}
.botao.contorno.perigo{
  background:transparent;border-color:rgba(239,90,68,.35);color:rgba(239,90,68,.85);
}
.botao.contorno.perigo:hover{
  background:rgba(239,90,68,.16);border-color:var(--erro);color:var(--erro);box-shadow:none;
}

/* --- tabelas largas rolam dentro do cartao, nunca a pagina inteira --- */
.rolagem-x{overflow-x:auto;margin:0 -.4rem;padding:0 .4rem}
.rolagem-x .tabela{min-width:620px}
@media (max-width:640px){
  /* a etiqueta do "nao testar seeders" empurrava a pagina para o lado */
  .acoes-linha .marcar{margin-left:0 !important;width:100%}
}

/* =======================================================================
   EPISODIOS COM FICHA (nome, sinopse e foto vindos do TMDB)
   ===================================================================== */

/* A foto de cena entra no lugar do quadradinho do numero. O numero fica
   por cima, num canto, para nao sumir a referencia. */
.ep-foto{
  position:relative;display:block;width:132px;flex-shrink:0;
  border-radius:9px;overflow:hidden;background:var(--fundo3);
}
.ep-foto img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ep-foto i{
  position:absolute;left:5px;bottom:5px;font-style:normal;
  font-size:.7rem;font-weight:800;font-variant-numeric:tabular-nums;
  padding:.05rem .35rem;border-radius:5px;color:#fff;
  background:rgba(8,9,12,.8);
}

/* ---- a tira de "ja vi" no episodio ----------------------------------
   A MESMA COR DE PROGRESSO do cartao e do player (--progresso): a
   pessoa aprende a tira uma vez e a reconhece nas tres telas. Fica na
   borda de baixo da foto, colada nela, para dizer "deste episodio" e
   nao "desta linha".

   TERMINADO E A MESMA COR, so que cheia. O verde chegou a entrar aqui,
   para separar "vi tudo" de "parei perto do fim"; saiu porque quebrava
   a leitura - numa lista de vinte e quatro episodios, duas cores de
   tira viram dois assuntos, e ha um so. Quem terminou tem a barra
   inteira, e isso ja e a diferenca. */
.ep-visto{
  position:absolute;left:0;right:0;bottom:0;height:4px;
  background:rgba(255,255,255,.16);display:block;
}
.ep-visto b{display:block;height:100%;background:var(--progresso)}
/* Sem o fundo cinza: cheia de ponta a ponta, sem sobra aparecendo. */
.ep-visto.fim{background:var(--progresso)}

/* Sem foto, a marca vai no quadradinho do numero. */
.ep-num.com-visto{position:relative;overflow:hidden}

/* CLICAR NA IMAGEM COMECA O EPISODIO
   -------------------------------------------------------------------
   A foto e o alvo maior da linha e o gesto ja vem de casa - todo mundo
   clica na imagem para dar play. Mas imagem nenhuma se anuncia como
   clicavel sozinha: sem o play por cima, o clique so seria descoberto
   por acaso. O icone e o convite, e o veu escuro atras dele garante
   que ele apareca tambem sobre cena clara. */
.ep-play{display:block;cursor:pointer}
.ep-play-icone{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(8,9,12,.32);
  opacity:0;transition:opacity .16s ease;
}
.ep-play-icone svg{
  width:34px;height:34px;color:#fff;
  /* O circulo atras do play: sobre uma cena clara, um play branco sem
     fundo some. */
  background:rgba(8,9,12,.55);border-radius:50%;padding:7px;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
/* Aparece ao passar o mouse - e no toque, onde nao ha mouse, fica
   sempre visivel, senao no celular ninguem descobre. */
.ep-play:hover .ep-play-icone,
.ep-play:focus-visible .ep-play-icone{opacity:1}
@media (hover:none){ .ep-play-icone{opacity:1;background:transparent} }

/* A versao sem foto de cena: o quadradinho do numero tambem toca. */
a.ep-num.ep-play{position:relative;text-decoration:none}
a.ep-num.ep-play:hover .ep-num-txt{opacity:0}
a.ep-num.ep-play .ep-play-icone{background:transparent}
a.ep-num.ep-play .ep-play-icone svg{width:22px;height:22px;padding:4px}

.ep-ficha{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.45rem}
.ep-ficha .dado{font-size:.72rem}
.nota-ep{color:var(--ok)}

.ep-sinopse{
  margin:0 0 .55rem;font-size:.82rem;line-height:1.55;color:var(--fraco);
  /* Sinopse longa demais empurraria os botoes para fora da tela. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.ep-item:hover .ep-sinopse{-webkit-line-clamp:6}

/* Episodio que o TMDB conhece mas que ainda nao tem magnet nenhum */
.ep-item.sem-link{opacity:.62;border-style:dashed}
.ep-item.sem-link:hover{opacity:1}
.pequeno-txt{font-size:.75rem}

/* "3/10" na aba: verde quando a temporada esta completa */
.aba-temporada .qtd.cheia{background:rgba(62,207,114,.25);color:var(--ok)}

/* classificacao de outro pais leva a sigla junto */
.cert.estrangeira{opacity:.9}
.cert-pais{
  font-style:normal;font-size:.62rem;font-weight:800;margin-left:.25rem;
  opacity:.75;letter-spacing:.03em;
}

/* =======================================================================
   PREMIOS
   ===================================================================== */
/* align-items:start e o que impede o bloco de UMA vitoria de esticar
   ate a altura do bloco de treze indicacoes ao lado - era dai que
   vinha o retangulo vazio gigante na ficha. */
.premios{display:grid;gap:.9rem;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.premio-bloco{
  background:var(--fundo2);border:1px solid var(--borda);
  border-left:3px solid var(--apagado);border-radius:12px;padding:.9rem 1rem;
}
.premio-bloco.ouro     {border-left-color:#e3b341}
.premio-bloco.framboesa{border-left-color:#e0559b}
.premio-bloco.prata    {border-left-color:#9aa4b8}

.premio-cabeca{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
.premio-nome{font-weight:700;font-size:.95rem}
.premio-conta{
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:.1rem .45rem;border-radius:20px;
  background:rgba(255,255,255,.06);color:var(--fraco);
}
.premio-conta.vencedor{background:rgba(227,179,65,.18);color:#e3b341}

.premio-lista{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.premio-lista li{
  display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;
  font-size:.82rem;line-height:1.4;
}
.premio-lista li i{font-style:normal;color:var(--apagado);font-size:.75rem}
.premio-lista li.indicado{color:var(--fraco)}
.premio-marca{
  font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:.05rem .35rem;border-radius:4px;flex-shrink:0;
  background:rgba(255,255,255,.07);color:var(--apagado);
}
.premio-lista li.vencedor .premio-marca{background:rgba(227,179,65,.2);color:#e3b341}

/* Crédito da fonte - o JustWatch exige, e o Wikidata merece. */
.fonte-dados{
  margin:.9rem 0 0;font-size:.72rem;color:var(--apagado);
}
.fonte-dados a{color:var(--fraco);text-decoration:underline}

/* =======================================================================
   ONDE ASSISTIR
   ===================================================================== */
.streaming-grupo{margin-bottom:.9rem}
.streaming-rot{
  display:block;font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--apagado);margin-bottom:.4rem;
}
.streaming-lista{display:flex;gap:.4rem;flex-wrap:wrap}
.streaming-item{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.25rem .55rem .25rem .25rem;border-radius:8px;font-size:.78rem;
  background:var(--fundo3);border:1px solid var(--borda);
}
.streaming-item img{width:22px;height:22px;border-radius:5px;display:block}

@media (max-width:640px){
  .ep-foto{width:96px}
  .premios{grid-template-columns:1fr}
}

/* abas de premiacao no catalogo */
.premio-abas{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.6rem}
.premio-abas a{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .9rem;border-radius:9px;font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  color:var(--fraco);transition:background .18s,border-color .18s,color .18s;
}
.premio-abas a:hover{color:#fff;border-color:rgba(255,255,255,.24)}
.premio-abas a.on{background:var(--azul);border-color:var(--azul);color:#fff}
.premio-abas a.on.ouro     {background:#8a6d1f;border-color:#b8912b}
.premio-abas a.on.framboesa{background:#8c2f5c;border-color:#c04a86}
.premio-abas a .qtd{
  font-size:.68rem;font-weight:800;padding:.05rem .38rem;border-radius:20px;
  background:rgba(0,0,0,.28);
}

/* =======================================================================
   SUGESTOES PARA ADICIONAR
   ===================================================================== */
.sugestoes{
  display:grid;gap:1rem;margin-top:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
}
.sug-cartao{
  display:flex;flex-direction:column;
  background:var(--fundo2);border:1px solid var(--borda);border-radius:12px;
  overflow:hidden;transition:border-color .2s,transform .18s;
}
.sug-cartao:hover{border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
/* o que ja esta no acervo fica discreto, sem sumir */
.sug-cartao.tenho{opacity:.72}

/* A ABA DO OSCAR. O cabecalho traz a conta ("12 de 97 no acervo") de um
   lado e o botao de atualizar do outro - a conta e a resposta, o botao
   e manutencao, e nao podem competir pelo mesmo peso. */
.oscar-topo{
  display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin:0 0 1.2rem;
  padding:.9rem 1rem;border-radius:10px;
  background:var(--fundo2);border:1px solid var(--borda);
}
.oscar-topo .ok{color:var(--verde,#4caf50)}

/* O ANO DA CERIMONIA, ao lado do ano de estreia. Sao numeros diferentes
   para o mesmo filme (a premiacao e no ano seguinte), e sem a etiqueta
   um deles pareceria erro. */
.oscar-selo{
  display:inline-block;padding:.05rem .4rem;border-radius:5px;
  background:rgba(212,175,55,.16);color:#d4af37;
  font-size:.72rem;font-weight:600;white-space:nowrap;
}
.sug-cartao.tenho:hover{opacity:1}

.sug-capa{position:relative;background:var(--fundo3)}
.sug-capa img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.sug-sem-capa{
  display:grid;place-items:center;width:100%;aspect-ratio:2/3;color:var(--apagado);
}
.sug-sem-capa .ico{width:30px;height:30px}
/* A NOTA DO CARTAO DE SUGESTOES.
   Por dentro e o mesmo .nota-card do catalogo - a tarja amarela do IMDb
   quando a nota e de la, a cinza escrita TMDB quando e daqui. Isto aqui
   e so a pilula escura que o segura sobre a capa. Sem a marca, o numero
   passava por "a nota do filme": La Captura mostrava 8,9 (TMDB) e 6,7
   no IMDb, as duas certas e de sites diferentes. */
.sug-nota{
  position:absolute;top:.4rem;left:.4rem;
  display:inline-flex;align-items:center;
  padding:.16rem .34rem;border-radius:20px;font-size:.62rem;
  background:rgba(8,9,12,.82);backdrop-filter:blur(4px);
}
.sug-nota .nota-card{gap:.22rem}
.sug-nota .nota-valor{font-size:1.16em}
.sug-tenho{
  position:absolute;top:.4rem;right:.4rem;
  padding:.1rem .4rem;border-radius:20px;font-size:.6rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;
  background:rgba(62,207,114,.85);color:#04140a;
}

.sug-corpo{padding:.7rem .75rem .5rem;flex:1;min-width:0}
.sug-corpo strong{
  display:block;font-size:.85rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sug-corpo .fraco{font-size:.75rem}
.sug-sinopse{
  margin:.4rem 0 0;font-size:.74rem;line-height:1.45;color:var(--apagado);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sug-acoes{padding:0 .75rem .75rem}
.sug-acoes .botao{width:100%;justify-content:center}
.sug-acoes form{margin:0}

.paginacao{
  display:flex;align-items:center;gap:1rem;justify-content:center;
  margin-top:1.6rem;
}

/* o seletor filme/serie tambem e usado como link nesta tela */
a.opcao-tipo{text-decoration:none}

/* =======================================================================
   ELENCO: carrossel com setas e modal do ator
   ===================================================================== */
.elenco-trilho{position:relative}

/* As setas ficam por cima das pontas, e o app.js esconde a que nao tem
   para onde ir - seta que nao faz nada e pior que seta nenhuma. */
.elenco-seta{
  position:absolute;top:44px;z-index:3;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;font-size:1rem;line-height:1;
  background:rgba(12,13,17,.88);border:1px solid rgba(255,255,255,.18);
  color:#fff;backdrop-filter:blur(6px);
  transition:background .18s,border-color .18s,transform .18s;
}
.elenco-seta:hover{background:var(--azul);border-color:var(--azul);transform:scale(1.08)}
.elenco-seta.esq{left:-6px}
.elenco-seta.dir{right:-6px}

/* ---------------------------------------------------------- modal */
/* A JANELA DO ATOR FICA POR CIMA DA JANELA DO TITULO.
   Ela nasce DE DENTRO da modal do titulo (clicando num rosto do
   elenco), e vivia em z-index 120 - abaixo dos 200 da modal. O
   resultado: clicava-se num ator e a janela dele abria ATRAS, visivel
   so pelas beiradas, parecendo que o site tinha travado. */
.modal-pessoa{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:4vh 4vw}
.modal-pessoa-fundo{
  position:absolute;inset:0;border:0;padding:0;cursor:pointer;
  background:rgba(6,7,10,.82);backdrop-filter:blur(4px);
}
.modal-pessoa-caixa{
  position:relative;z-index:1;width:100%;max-width:760px;max-height:88vh;overflow-y:auto;
  background:var(--fundo2);border:1px solid var(--borda);border-radius:16px;
  padding:1.6rem 1.8rem 1.8rem;box-shadow:0 30px 70px rgba(0,0,0,.7);
}
.modal-pessoa-x{
  position:absolute;top:.8rem;right:1rem;z-index:2;
  background:none;border:0;color:var(--fraco);font-size:1.7rem;line-height:1;
  cursor:pointer;padding:0 .3rem;
}
.modal-pessoa-x:hover{color:#fff}

.pessoa-cabeca{display:flex;gap:1.1rem;align-items:center;margin-bottom:1.4rem}
.pessoa-foto{flex:0 0 auto;width:76px;height:76px;border-radius:50%;overflow:hidden;
  background:var(--fundo3);border:2px solid var(--borda);display:grid;place-items:center}
.pessoa-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pessoa-foto span{color:var(--apagado);font-size:1.7rem;font-weight:300}
.pessoa-cabeca h3{margin:0;font-size:1.25rem}
.pessoa-cabeca p{margin:.2rem 0 0;font-size:.88rem}
.pessoa-corpo h4{
  margin:0 0 .9rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--apagado);font-weight:800;
}

.pessoa-titulos{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.pessoa-titulo{position:relative;display:block;min-width:0}
.pessoa-titulo img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:9px;
  background:var(--fundo3);border:1px solid var(--borda);
  transition:border-color .18s,transform .18s;
}
.pessoa-titulo:hover img{border-color:var(--azul);transform:translateY(-3px)}
.pt-nome{
  display:block;margin-top:.4rem;font-size:.78rem;font-weight:600;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pt-linha{display:block;font-size:.72rem;color:var(--apagado)}
.pt-linha i{font-style:normal;color:#8fbcff}
.pt-papel{
  display:block;font-size:.72rem;color:var(--fraco);margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* pontinho verde: este titulo tem link funcionando */
.pt-ok{
  position:absolute;top:.4rem;right:.4rem;width:9px;height:9px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 2px rgba(8,9,12,.75);
}

@media (max-width:640px){
  .modal-pessoa-caixa{padding:1.2rem 1rem 1.4rem}
  .pessoa-titulos{grid-template-columns:repeat(auto-fill,minmax(94px,1fr))}
}

/* =======================================================================
   IMPORTADOR: barra fixa, area de soltar e sinais de carregamento
   ===================================================================== */

/* Com 30 magnets na lista, os botoes ficavam a uma tela de rolagem.
   Presos no rodape, estao sempre a um clique. */
.barra-acoes{
  position:sticky;bottom:0;z-index:30;margin-top:1.4rem;
  background:linear-gradient(to top,var(--fundo) 62%,rgba(11,12,16,0));
  padding:1.4rem 0 .9rem;
}
.barra-acoes-dentro{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--fundo2);border:1px solid var(--borda);border-radius:12px;
  padding:.8rem 1rem;box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.barra-conta{font-size:.85rem;color:var(--fraco);flex:1;min-width:120px}
.barra-conta b{font-weight:700}
.alerta-txt{color:var(--alerta)}
.barra-botoes{display:flex;gap:.5rem;flex-wrap:wrap}

/* Arrastar o link para qualquer lugar da pagina */
.area-colar{position:relative}
.area-colar.arrastando::after{
  content:"Solte o magnet aqui";
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:rgba(47,125,251,.14);border:3px dashed var(--azul);
  color:#fff;font-size:1.3rem;font-weight:700;letter-spacing:.02em;
  pointer-events:none;backdrop-filter:blur(2px);
}

/* teclas na dica de colar */
kbd{
  display:inline-block;padding:.05rem .35rem;border-radius:5px;
  background:var(--fundo3);border:1px solid var(--borda);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78em;
  color:var(--texto);
}

/* chip enquanto os seeders estao sendo testados */
.magnet-sinais .dado.testando{
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(47,125,251,.12);border-color:var(--azul-linha);color:#cfe1ff;
}

/* Enquanto importa, a pagina inteira fica "ocupada": o cursor avisa e
   nada mais responde a clique - o segundo clique mandaria tudo de novo. */
body.ocupado{cursor:progress}
body.ocupado .fila-magnets,
body.ocupado .barra-botoes{pointer-events:none;opacity:.6}

@media (max-width:640px){
  .barra-acoes-dentro{flex-direction:column;align-items:stretch}
  .barra-botoes{justify-content:stretch}
  .barra-botoes .botao{flex:1;justify-content:center}
}

/* =======================================================================
   EDITAR TITULO - abas e formulario compacto

   O editor tinha cinco blocos empilhados e um campo por linha: trocar
   uma palavra da sinopse pedia tres telas de rolagem. Agora sao duas
   abas (o que e dado / o que e arquivo) e uma grade de 12 colunas, onde
   "Ano" ocupa duas e nao a linha inteira.
   ===================================================================== */
.abas-editor{
  display:flex;gap:.4rem;margin:0 0 1.5rem;
  border-bottom:1px solid var(--borda);
}
.abas-editor .aba{
  display:inline-flex;align-items:center;gap:.5rem;
  background:none;border:0;border-bottom:2px solid transparent;
  padding:.75rem 1.1rem;margin-bottom:-1px;cursor:pointer;
  color:var(--fraco);font-family:"Outfit","Inter",system-ui,sans-serif;
  font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  transition:color .16s,border-color .16s;
}
.abas-editor .aba:hover{color:var(--texto)}
.abas-editor .aba.on{color:#fff;border-bottom-color:var(--azul-forte)}
.abas-editor .aba .ico{width:15px;height:15px}
.abas-editor .aba .qtd{
  background:rgba(255,255,255,.1);border-radius:20px;
  padding:.05rem .42rem;font-size:.72rem;
}
.abas-editor .aba.on .qtd{background:rgba(47,125,251,.3);color:#fff}

/* ---- a grade de 12 colunas ---------------------------------------- */
.grade-editor{display:grid;grid-template-columns:repeat(12,1fr);gap:.9rem}
.grade-editor label{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.grade-editor label > span{
  font-size:.76rem;font-weight:600;color:var(--fraco);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.grade-editor input,.grade-editor select,.grade-editor textarea{margin-top:0}
.grade-editor .col-2 {grid-column:span 2}
.grade-editor .col-3 {grid-column:span 3}
.grade-editor .col-4 {grid-column:span 4}
.grade-editor .col-6 {grid-column:span 6}
.grade-editor .col-12{grid-column:span 12}
.grade-editor.apertada{gap:.6rem}
.grade-editor.apertada input{padding:.45rem .6rem;font-size:.86rem}
@media (max-width:900px){
  /* Numa tela estreita, campo de 2 colunas vira ilegivel: tudo vira
     meia largura, e os textos, largura inteira. */
  .grade-editor .col-2,.grade-editor .col-3,.grade-editor .col-4{grid-column:span 6}
  .grade-editor .col-6{grid-column:span 12}
}

/* ---- diagnostico da ficha ----------------------------------------- */
.pecas-ficha{display:flex;gap:.45rem;flex-wrap:wrap}
.peca{
  font-size:.75rem;font-weight:600;padding:.24rem .6rem;border-radius:20px;
  border:1px solid transparent;
}
.peca.ok{background:rgba(62,207,114,.14);color:var(--ok);border-color:rgba(62,207,114,.3)}
.peca.falta{background:rgba(239,90,68,.12);color:#ff8f7d;border-color:rgba(239,90,68,.32)}

/* ---- resultados da busca no TMDB ---------------------------------- */
.busca-tmdb{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.busca-tmdb .campo-busca{flex:1;min-width:240px}
.tmdb-resultados{display:grid;gap:.5rem}
.tmdb-item{
  display:grid;grid-template-columns:44px 1fr auto;gap:.8rem;align-items:center;
  background:var(--fundo3);border:1px solid var(--borda);border-radius:10px;padding:.6rem .8rem;
}
.tmdb-item img,.tmdb-sem-capa{
  width:44px;height:66px;object-fit:cover;border-radius:5px;background:var(--fundo2);display:block;
}
.tmdb-nome{font-weight:600;font-size:.9rem}
.tmdb-nome i{color:var(--fraco);font-style:normal;font-weight:400}
.tmdb-sinopse{
  grid-column:2;font-size:.78rem;color:var(--fraco);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---- bloco que abre e fecha --------------------------------------- */
.bloco-detalhe > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;
}
.bloco-detalhe > summary::-webkit-details-marker{display:none}
.bloco-detalhe > summary::before{
  content:"\203A";font-size:1.3rem;color:var(--fraco);
  transition:transform .18s;display:inline-block;
}
.bloco-detalhe[open] > summary::before{transform:rotate(90deg)}
.bloco-detalhe > summary h2{margin:0;font-size:1.02rem}
.bloco-detalhe[open] > summary{margin-bottom:1.1rem}
.bloco-detalhe summary .qtd{
  font-size:.74rem;font-weight:600;color:var(--fraco);
  background:rgba(255,255,255,.08);border-radius:20px;padding:.1rem .5rem;
}

/* ---- linha de tabela clicavel ------------------------------------- */
.linha-clicavel{cursor:pointer;transition:background .14s}
.linha-clicavel:hover{background:rgba(255,255,255,.045)}

/* ---------------------------------------------------- busca: sugestoes
   O que aparece enquanto se digita, vindo do PROPRIO acervo.

   ELA E "fixed" E VIVE FORA DO <header>. As duas coisas sao conserto,
   e nao gosto:

     - o tv.js trata ".topo" como uma FAIXA (linha em que a seta anda de
       lado) e nao desce de um item para outro da mesma faixa. Dentro do
       header, campo e sugestoes eram a mesma faixa e a seta para baixo
       pulava a lista inteira;
     - na TV o header tem "transform" para entrar e sair deslizando, e
       um transform faz de qualquer filho "fixed" um posicionado em
       relacao A ELE: a lista escorregava junto com a barra.

   Quem diz onde ela fica e o app.js, medindo o campo na hora - as tres
   telas tem alturas de barra bem diferentes. */
.busca-topo{position:relative}
.busca-sugestoes{
  position:fixed;top:5rem;right:2.6vw;z-index:95;
  width:min(30rem,94vw);max-height:min(70vh,32rem);overflow-y:auto;
  background:rgba(16,17,22,.985);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:.5rem;
  box-shadow:0 28px 70px rgba(0,0,0,.78),0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter:blur(16px);
  scrollbar-width:thin;
}
/* O VEU. Sem ele a lista pousa em cima dos cartazes e as duas coisas
   competem - e na TV, de longe, nao da nem para dizer onde uma acaba e
   a outra comeca.

   ELE NAO PODE SER FILHO DA CAIXA: a caixa rola (overflow-y:auto), e
   caixa que rola RECORTA o que passa dela - o veu ficava do tamanho da
   propria lista, que e o oposto do que ele serve. Mora no body, e so
   enquanto ha lista na tela.

   Fica ABAIXO da barra do topo (z-index 60) de proposito: o campo e o
   que a pessoa esta usando, e escurecer o que ela esta digitando seria
   escurecer a coisa errada. */
html.busca-lista body::after{
  content:"";position:fixed;inset:0;z-index:55;pointer-events:none;
  background:rgba(6,7,10,.58);
}
.sug-grupo{
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--apagado);padding:.7rem .8rem .35rem;
}
.sug-grupo:first-child{padding-top:.35rem}
.sug-item{
  display:flex;align-items:center;gap:.85rem;
  padding:.5rem .8rem;border-radius:10px;color:var(--texto);
  border:1px solid transparent;
}
.sug-item:hover,.sug-item.marcado{background:rgba(255,255,255,.09)}
/* NA TV QUEM ANDA E O FOCO DE VERDADE (ver app.js): ele precisa marcar
   tanto quanto a marca do mouse, e um pouco mais - a moldura e o unico
   jeito de saber onde a seta parou, a tres metros da tela. */
.sug-item:focus,.sug-item:focus-visible{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);
  outline:2px solid var(--azul-forte);outline-offset:-1px;
}
.sug-item img,.sug-vazio{
  width:42px;height:62px;object-fit:cover;border-radius:5px;
  background:var(--fundo3);flex-shrink:0;
}
.sug-txt{display:flex;flex-direction:column;gap:.14rem;min-width:0;flex:1}
.sug-txt b{font-size:.97rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-txt i{font-size:.79rem;color:var(--fraco);font-style:normal}
/* pontinho verde = tem link funcionando, a informacao que decide se
   vale a pena clicar */
.sug-ok{width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0}

/* avatar do topo com emoji: sem peso de fonte e um pouco maior, senao
   o emoji fica menor que a inicial que ele substituiu */
.avatar.emoji,.mini-avatar.emoji{font-weight:400;font-size:1.05em;line-height:1}

/* ------------------------------------------------------- fila de tarefas
   A VPS trabalhando, visivel em qualquer pagina do painel.

   POR QUE ISTO EXISTE
   Antes, mandar uma importacao segurava o navegador: a pagina ficava
   minutos carregando, o painel inteiro travado, e fechar a aba matava o
   trabalho pela metade. Agora o clique so avisa a VPS, e o andamento
   aparece aqui - de qualquer pagina, porque o trabalho continua se voce
   navegar para outra. */
.fila-painel{
  margin:0 0 1.2rem;padding:.9rem 1rem;border-radius:12px;
  background:linear-gradient(180deg,rgba(58,142,203,.10),rgba(58,142,203,.04));
  border:1px solid rgba(58,142,203,.28);
}
.fila-cabeca{
  display:flex;align-items:center;gap:.45rem;margin-bottom:.7rem;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8fc0e8;
}
/* O circulo do cabecalho gira enquanto ha trabalho - o sinal de vida
   que falta quando so ha texto parado na tela. */
.fila-cabeca svg{animation:fila-gira 1.1s linear infinite}
@keyframes fila-gira{to{transform:rotate(360deg)}}

.fila-item{padding:.5rem 0;border-top:1px solid rgba(255,255,255,.07)}
.fila-item:first-of-type{border-top:0;padding-top:0}
.fila-topo{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem}
.fila-topo b{font-size:.92rem;font-weight:600}
.fila-estado{
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:.1rem .4rem;border-radius:4px;
}
.fila-estado.espera {background:rgba(255,255,255,.10);color:#c2c9d6}
.fila-estado.rodando{background:rgba(58,142,203,.22);color:#8fc0e8}
.fila-estado.ok     {background:rgba(30,155,69,.20);color:#7fd39b}
.fila-estado.erro   {background:rgba(216,35,42,.20);color:#f19a9d}
.fila-conta{margin-left:auto;font-size:.78rem;color:var(--apagado);font-variant-numeric:tabular-nums}
.fila-x{
  margin-left:auto;background:none;border:0;cursor:pointer;padding:.1rem .3rem;
  color:var(--apagado);font-size:.76rem;text-decoration:underline;
}
.fila-x:hover{color:#fff}

.fila-barra{height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.fila-barra i{display:block;height:100%;border-radius:99px;background:#3a8ecb;transition:width .4s ease}
.fila-barra i.espera{background:rgba(255,255,255,.16)}
/* "Trabalhando, mas ainda nao sei quantos sao": a barra corre em vez de
   fingir uma porcentagem que ninguem calculou. */
.fila-barra.indeterminada i{width:35%;animation:fila-corre 1.3s ease-in-out infinite}
@keyframes fila-corre{
  0%{margin-left:-35%}
  100%{margin-left:100%}
}
.fila-recado{margin:.35rem 0 0;font-size:.8rem;color:var(--apagado)}
.fila-item.erro .fila-recado{color:#f19a9d}

/* ------------------------------------------------------------- louro
   Premiacao no cartao e no topo da ficha.

   POR QUE NO CARTAO
   O bloco de premios existia so na ficha: era preciso abrir cada titulo
   para descobrir que ganhou Oscar. O louro resolve isso de relance.

   VITORIA e INDICACAO nao podem parecer a mesma coisa - dourado para
   quem venceu, cinza para quem so foi indicado. O ramo e um SVG inline:
   acompanha o tamanho da fonte e nao pesa requisicao. */
.louro{
  display:inline-flex;align-items:center;gap:.22rem;
  padding:.12rem .4rem .12rem .28rem;border-radius:5px;
  font-size:.7rem;font-weight:700;letter-spacing:.01em;line-height:1.3;
  white-space:nowrap;vertical-align:middle;
  background:rgba(255,255,255,.08);color:#c3cad8;
  border:1px solid transparent;
}
.louro svg{width:.95em;height:.95em;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.louro b{font-weight:800}
.louro i{font-style:normal;opacity:.75;font-weight:600}

/* Venceu: dourado, com um brilho de fora para destacar na fileira. */
.louro.venceu{
  background:linear-gradient(180deg,rgba(227,179,65,.26),rgba(227,179,65,.14));
  color:#f0cd72;border-color:rgba(227,179,65,.38);
  box-shadow:0 1px 6px rgba(227,179,65,.16);
}
.louro.venceu svg{opacity:1}

/* Na ficha, maior e com o nome da premiacao junto. */
.louro.grande{
  font-size:.82rem;gap:.34rem;padding:.26rem .6rem .26rem .45rem;border-radius:7px;
}
.louro.grande i{margin-left:.1rem}

/* =====================================================================
   O LOURO NA PROPRIA ARTE DO CARTAO

   O louro de cima mora no cartao ABERTO: era preciso ja estar
   interessado no titulo para descobrir que ele ganhou Oscar. Passando o
   olho pela fileira - que e onde a escolha acontece - um filme premiado
   era igual a qualquer outro.

   AQUI NAO HA CAIXA NEM FUNDO, de proposito. A capa ja tem duas
   etiquetas com fundo solido ("novo" e "serie"); uma terceira faria da
   arte um mural de adesivos. Dois ramos e um numero pousam sobre a
   imagem sem recortar um retangulo dela - e a sombra do desenho, e nao
   uma caixa, e quem garante a leitura sobre capa clara.

   O CANTO DE BAIXO A DIREITA e o unico livre: "novo" fica em cima a
   esquerda, "serie" em cima a direita, e o pe e da faixa "em breve".
   ===================================================================== */
.louro-arte{
  position:absolute;right:.5rem;bottom:.45rem;z-index:4;
  display:inline-flex;align-items:center;gap:.02rem;
  color:#f0cd72;
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.95));
  pointer-events:none;
}
.louro-arte svg{
  width:15px;height:25px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Um ramo so no PHP, espelhado aqui: desenhar os dois no mesmo caminho
   colava um no outro e o numero saia por cima do desenho. */
.louro-arte svg.dir{transform:scaleX(-1)}
.louro-arte b{
  font-size:.86rem;font-weight:900;line-height:1;padding:0 .04rem;
  font-variant-numeric:tabular-nums;
}
/* Com "em breve" no pe, sobe uma linha em vez de ficar por baixo. */
.louro-arte.acima{bottom:2.3rem}

/* O NOME DO FILME RECUA PARA O LOURO CABER.
   O nome ocupa a largura toda do pe da capa; um titulo comprido passava
   por baixo do desenho. A classe vem do PHP, e nao de um :has(), porque
   o navegador da TV e velho e :has() la e sorte. */
.mini.com-louro .mini-titulo{padding-right:3.2rem}
.mini.com-louro .mini-logo{max-width:52%}

/* Aberto, o cartao ja mostra o louro escrito por extenso na linha de
   dados - dois louros ao mesmo tempo seria a mesma coisa dita duas
   vezes, e a de cima diz mais. */
.cartao:hover .louro-arte,
.cartao:focus-within .louro-arte{opacity:0;transition:opacity .18s}

/* Na TV o cartao e medido em vw, e nao em pixels: um tamanho fixo aqui
   ficava desproporcional (era um quinto da largura do cartao). Em vw o
   louro acompanha o cartao em qualquer tela. */
html.tv .louro-arte svg{width:.72vw;height:1.2vw}
html.tv .louro-arte b{font-size:.95vw}
html.tv .louro-arte{right:.6vw;bottom:.55vw}
html.tv .louro-arte.acima{bottom:2.4vw}
html.tv .mini.com-louro .mini-titulo{padding-right:3.6vw}

/* --------------------------------------------------- manutencao
   Os trabalhos que antes so existiam por linha de comando na VPS, ou
   que travavam o navegador por minutos. Cada linha diz o que esta
   pendente ANTES de a pessoa clicar - "5 titulos ainda mostram a nota
   do TMDB" e mais util do que um botao mudo. */
.manut{display:grid;gap:.1rem}
.manut-item{
  display:flex;align-items:center;gap:1rem;
  padding:.75rem 0;border-top:1px solid var(--borda);
}
.manut-item:first-child{border-top:0}
.manut-item > div{flex:1;min-width:0}
.manut-item b{display:block;font-size:.94rem;font-weight:600}
.manut-item span{display:block;font-size:.82rem;color:var(--apagado);margin-top:.15rem}
/* Nada pendente: a linha continua ali (da para refazer), mas apagada,
   para o olho ir direto ao que precisa de atencao. */
.manut-item.pronto b{color:var(--apagado);font-weight:500}
.manut-item .botao{flex-shrink:0}
@media (max-width:640px){
  .manut-item{flex-direction:column;align-items:stretch;gap:.5rem}
}

/* ================================================= modais do painel
   Acao que fala de UMA pessoa acontece numa tela que diz o nome dela.
   Antes, o campo de senha ficava aberto na linha da tabela, ao lado de
   um "Excluir" igual a todos os outros botoes - trocar a senha de quem
   nao era para trocar dependia so de mirar mal. */
.modal-adm{
  position:fixed;inset:0;z-index:70;
  background:rgba(6,8,14,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
  animation:modal-entra .16s ease;
}
@keyframes modal-entra{from{opacity:0}to{opacity:1}}
.modal-adm-caixa{
  width:min(30rem,100%);max-height:90vh;overflow:auto;
  background:#141824;border:1px solid var(--borda);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.modal-adm-topo{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem 1.2rem .8rem;border-bottom:1px solid var(--borda);
}
.modal-adm-topo h2{margin:0;font-size:1.05rem;flex:1}
.modal-adm-x{
  background:none;border:0;color:var(--apagado);cursor:pointer;
  font-size:1.5rem;line-height:1;padding:0 .2rem;
}
.modal-adm-x:hover{color:#fff}
.modal-adm-corpo{display:grid;gap:.9rem;padding:1.2rem}
.modal-adm-corpo label{display:grid;gap:.3rem;font-size:.86rem;color:var(--apagado)}
.modal-adm-corpo input,.modal-adm-corpo select,.modal-adm-corpo textarea{
  background:#0d111b;border:1px solid var(--borda);border-radius:8px;
  padding:.55rem .7rem;color:var(--texto);font:inherit;font-size:.92rem;width:100%;
}
.modal-adm-corpo input:focus,.modal-adm-corpo select:focus,.modal-adm-corpo textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(47,125,251,.18);
}
.modal-adm-corpo small{color:var(--apagado);font-size:.76rem}
.modal-adm-acoes{
  display:flex;gap:.6rem;justify-content:flex-end;
  margin-top:.3rem;padding-top:.9rem;border-top:1px solid var(--borda);
}

/* ------------------------------------------------- tres pontinhos */
.pontinhos{position:relative;display:inline-block}
.pontinhos-botao{
  background:none;border:1px solid transparent;border-radius:7px;cursor:pointer;
  color:var(--apagado);font-size:1.15rem;line-height:1;padding:.25rem .5rem;
}
.pontinhos-botao:hover{color:#fff;background:rgba(255,255,255,.08)}
.pontinhos.aberto .pontinhos-botao{color:#fff;background:rgba(255,255,255,.10);border-color:var(--borda)}
.pontinhos-lista{
  display:none;position:absolute;right:0;top:calc(100% + .3rem);z-index:40;
  min-width:15rem;padding:.3rem;
  background:#161b28;border:1px solid var(--borda);border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.pontinhos.aberto .pontinhos-lista{display:block}
.pontinhos-lista button{
  display:flex;align-items:center;gap:.5rem;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:.5rem .6rem;border-radius:7px;color:var(--texto);font:inherit;font-size:.87rem;
}
.pontinhos-lista button:hover{background:rgba(255,255,255,.08)}
.pontinhos-lista button.perigo{color:#f19a9d}
.pontinhos-lista button.perigo:hover{background:rgba(216,35,42,.16)}
.pontinhos-lista .ico{width:15px;height:15px;flex-shrink:0;opacity:.8}
.pontinhos-lista .divisor{height:1px;background:var(--borda);margin:.3rem 0}
.pontinhos-nota{padding:.5rem .6rem;font-size:.79rem;color:var(--apagado);line-height:1.4}

/* ---------------------------------------------- tabela de usuarios */
.tabela.usuarios td{vertical-align:middle}
.tabela.usuarios .fim{text-align:right;width:1%;white-space:nowrap}
.tabela.usuarios tr.inativa td{opacity:.5}
.usuario-pessoa{display:flex;align-items:center;gap:.65rem}
.usuario-inicial{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.usuario-pessoa b{display:block;font-weight:600;font-size:.93rem}
.usuario-pessoa span{display:block;font-size:.79rem;color:var(--apagado)}
.usuario-pessoa .voce{
  font-style:normal;margin-left:.4rem;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  color:#8fc0e8;background:rgba(58,142,203,.18);padding:.05rem .3rem;border-radius:4px;
}
.selo.papel-admin{background:rgba(227,179,65,.18);color:#e3b341}
.tabela.usuarios td i.fraco{display:block;font-style:normal;font-size:.75rem;margin-top:.1rem}

/* ---- quem esta no acervo agora --------------------------------------
   Tres estados, tres leituras a distancia: bolinha verde acesa (esta
   vendo alguma coisa), verde apagada (esta no site) e cinza (nao esta).
   A cor faz o trabalho que a palavra faria - a tabela e larga, e a
   pergunta "quem esta online?" tem de se responder correndo o olho. */
.selo-online{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:.82rem;color:var(--fraco);
}
.selo-online i{
  width:8px;height:8px;border-radius:50%;background:var(--apagado);
  flex:0 0 auto;
}
.selo-online:not(.fora){color:var(--ok);font-weight:600}
.selo-online:not(.fora) i{background:var(--ok)}
/* Assistindo ganha o halo: dentro do "online" ainda ha um estado mais
   forte, e ele merece se distinguir do resto sem outra cor. */
.selo-online.vendo i{box-shadow:0 0 0 3px rgba(62,207,114,.22)}
.tabela.usuarios td.agora{white-space:nowrap}
.tabela.usuarios td.agora .agora-oque{
  max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ============================================ topo do editor
   O titulo do jeito que ele esta, antes dos campos. O editor comecava
   direto numa parede de inputs: dava para trocar a sinopse sem nunca
   ver a capa, e nao havia como saber se a arte tinha sido baixada ou se
   a nota tinha chegado. */
.editor-capa{
  position:relative;margin:0 0 1.4rem;border-radius:14px;overflow:hidden;
  border:1px solid var(--borda);background:#10131c;
  /* A LARGURA DO CARTAZ VIVE AQUI porque duas coisas dependem dela: o
     proprio cartaz e o recuo do logo, que precisa comecar DEPOIS dele.
     Com dois numeros soltos, mudar um deixava o logo por tras do
     cartaz - foi o que aconteceu na primeira versao desta tela. */
  --ed-cartaz:168px;
  --ed-borda:1.6rem;
  --ed-vao:1.4rem;
}
/* ESTE BLOCO E PARA JULGAR A ARTE, e nao para enfeitar a tela.

   Ele nasceu como enfeite: 190px de altura, banner a 55% de opacidade
   e um degrade pesado por cima. Servia para saber SE havia arte. Nao
   servia para a pergunta que se faz aqui de verdade - "esta e a arte
   certa?" - porque o banner ficava escuro demais para se ver o que ele
   mostra e o logo saia pequeno demais para se LER o nome escrito nele.

   E ler o nome e o ponto: o TMDB nao diz de que pais uma imagem e, e a
   unica forma de saber se o logo e brasileiro ou portugues e enxergar
   a palavra. Entao agora as proporcoes sao as da pagina do titulo, que
   e onde essa arte vai aparecer de verdade. */
.editor-banner{
  position:relative;overflow:hidden;background:#0b0e15;
  /* ALTURA DIRETA, E NAO aspect-ratio. Parece a mesma coisa e nao e:
     com "aspect-ratio:16/6" mais "max-height", o navegador para de
     esticar a largura e passa a CALCULA-LA a partir da altura ja
     limitada. O banner virava 907px dentro de um cartao de 1562 - uma
     faixa preta enorme a direita, que foi o que o Giovanni viu.

     Eu tinha medido "907x340" no meu proprio teste e deixado passar:
     olhei se a altura estava boa e nao comparei com a largura do
     cartao. Numero conferido nao e numero entendido.

     clamp() faz o que o aspect-ratio deveria fazer aqui sem mexer na
     largura: cresce com a tela e para nos 360. */
  width:100%;
  height:clamp(200px, 21vw, 360px);
}
.editor-banner img{width:100%;height:100%;object-fit:cover;opacity:.92}
.editor-banner::after{
  content:'';position:absolute;inset:0;
  /* O degrade agora e so o que o texto embaixo precisa para ser lido -
     forte no pe, quase nada no alto. Antes ele comia a imagem toda. */
  background:linear-gradient(180deg,rgba(16,19,28,0) 0%,rgba(16,19,28,.25) 45%,
                             rgba(16,19,28,.82) 82%,#10131c 100%);
}
.editor-logo{
  position:absolute;z-index:2;
  left:calc(var(--ed-borda) + var(--ed-cartaz) + var(--ed-vao));
  bottom:1.2rem;
  max-width:min(440px,42%);max-height:130px;width:auto;height:auto;
  object-fit:contain;opacity:1;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.75));
}
.editor-vazio{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--apagado);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  background:repeating-linear-gradient(45deg,#12161f,#12161f 10px,#151a25 10px,#151a25 20px);
}
.editor-frente{
  display:flex;gap:var(--ed-vao);padding:0 var(--ed-borda) 1.4rem;
  margin-top:-92px;position:relative;z-index:3;
}
.editor-poster{
  /* SEM PROPORCAO FIXA E SEM "cover": a altura sai da imagem.

     Com aspect-ratio 2/3 e object-fit:cover, todo cartaz que nao fosse
     exatamente 2:3 era CORTADO para caber - e cortar e o pior que se
     pode fazer numa tela cujo unico proposito e conferir a arte. Era
     por isso que a capa aparecia "sem a largura toda": ela nao estava
     estreita, estava aparada nas bordas.

     min-height segura so a caixa listrada do "sem capa", que nao tem
     imagem para dar altura a ela. */
  width:var(--ed-cartaz);flex-shrink:0;min-height:120px;
  border-radius:10px;overflow:hidden;
  background:#12161f;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.editor-poster img{width:100%;height:auto;display:block}
.editor-resumo{flex:1;min-width:0;padding-top:96px}
.editor-resumo h2{margin:0;font-size:1.2rem;line-height:1.25}
.editor-resumo .original{margin:.15rem 0 0;font-size:.85rem;color:var(--apagado);font-style:italic}
.editor-chips{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}
.editor-chips .chip{
  font-size:.76rem;padding:.16rem .45rem;border-radius:5px;
  background:rgba(255,255,255,.08);color:#c3cad8;
}

/* As tres pecas de arte, cada uma dizendo o proprio estado: verde
   baixada, amarelo so no TMDB, vermelho nao existe. Antes isso era uma
   linha de texto num diagnostico separado. */
.editor-arte{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
/* O botao de tirar o logo entra na mesma linha das tres etiquetas de
   arte, com um respiro antes dele. */
.arte-tirar{display:inline-flex;margin-left:.5rem}

.arte-item{
  font-size:.72rem;font-weight:700;padding:.14rem .45rem;border-radius:5px;
  border:1px solid transparent;
}
.arte-item.ok    {background:rgba(30,155,69,.16);color:#7fd39b;border-color:rgba(30,155,69,.3)}
.arte-item.remoto{background:rgba(240,167,26,.16);color:#f0c069;border-color:rgba(240,167,26,.3)}
.arte-item.falta {background:rgba(216,35,42,.14);color:#f19a9d;border-color:rgba(216,35,42,.28)}

.editor-ids{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.7rem;font-size:.8rem}
.editor-ids a{color:#8fc0e8;text-decoration:none;border-bottom:1px dotted rgba(143,192,232,.4)}
.editor-ids a:hover{color:#fff}
.editor-ids .falta{color:#f19a9d}

@media (max-width:720px){
  .editor-frente{flex-direction:column;margin-top:-56px}
  .editor-resumo{padding-top:0}
  /* Em tela estreita o cartaz desce para baixo do banner, entao o logo
     nao precisa mais desviar dele: volta para a esquerda. */
  .editor-capa{--ed-cartaz:0px;--ed-borda:1rem;--ed-vao:1rem}
  .editor-poster{width:118px}
  /* Em tela estreita o banner deitado viraria uma tira: mais altura
     proporcional devolve imagem a ele sem empurrar a pagina. */
  .editor-banner{height:clamp(150px, 42vw, 260px)}
  .editor-logo{max-width:62%;max-height:88px;bottom:.9rem}
}

/* Titulo de grupo dentro da grade de campos: em vez de 14 inputs
   seguidos, quatro blocos com nome. */
.grupo-campos{
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--apagado);padding:.9rem 0 .1rem;
  border-top:1px solid var(--borda);margin-top:.5rem;
}
.grade-editor > .grupo-campos:first-child{border-top:0;margin-top:0;padding-top:0}

/* A explicacao embaixo do campo, quando o rotulo sozinho nao basta.
   "Fim antecipado (s)" nao diz nada a quem nao viu esta conversa; a
   linha de baixo diz, e some do caminho depois de lida. */
.dica-campo{
  display:block;font-style:normal;font-size:.72rem;line-height:1.45;
  color:var(--apagado);margin-top:.3rem;
}
.dica-campo strong{color:var(--fraco);font-weight:700}

/* AQUI MORAVA O "ARRASTAR PARA HERDAR" do importador de magnets:
   .dica-arrastar, .puxador-exemplo, .import-puxador, .item-import (com
   .alvo e .herdou) e .herdou-recado. Mandar uma temporada inteira
   significava escolher o mesmo titulo no TMDB dez vezes; arrastando um
   cartao sobre o outro os dados eram copiados. Saiu com a tela que
   vestia, em setembro de 2026. */

/* --------------------------------------------- indicacoes compactas
   Treze indicacoes ocupavam treze linhas e faziam a ficha rolar sem
   necessidade. Vitoria continua com linha propria (e o que importa);
   indicacao vira etiqueta na mesma linha. */
.premio-indicacoes{
  margin-top:.6rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.07);
  display:flex;flex-wrap:wrap;gap:.3rem;align-items:baseline;
}
.premio-indicacoes b{
  font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--apagado);margin-right:.15rem;
}
.premio-indicacoes span{
  font-size:.78rem;padding:.1rem .4rem;border-radius:4px;
  background:rgba(255,255,255,.06);color:var(--fraco);
}
.premio-conta{white-space:nowrap}

/* ============================== herdar no importar
   Solte o link novo em cima do cartao ja acertado: e ele que diz qual
   titulo e. Sem o destaque, com dez cartoes na tela nao daria para saber
   em qual o link vai cair. */
.dica-heranca{
  display:flex;gap:.7rem;align-items:flex-start;
  margin:.9rem 0 0;padding:.75rem .95rem;border-radius:10px;
  background:rgba(58,142,203,.09);border:1px solid rgba(58,142,203,.22);
  font-size:.85rem;color:var(--apagado);line-height:1.5;
}
.dica-heranca .ico{width:17px;height:17px;flex-shrink:0;margin-top:.15rem;color:#8fc0e8}
.dica-heranca b{color:var(--texto);display:block;margin-bottom:.05rem}

.magnet-item{transition:box-shadow .14s ease, border-color .14s ease, opacity .14s ease}
.magnet-item.arrastando-item{opacity:.45}
/* O cartao que vai emprestar a identidade. */
.magnet-item.alvo-heranca{
  border-color:#3a8ecb !important;
  box-shadow:0 0 0 2px rgba(58,142,203,.35), 0 8px 22px rgba(58,142,203,.16);
}
.magnet-item.alvo-heranca::after{
  content:"entra como este título";
  position:absolute;right:.8rem;top:.55rem;z-index:3;
  font-size:.7rem;font-weight:800;letter-spacing:.03em;
  color:#8fc0e8;background:rgba(58,142,203,.18);
  padding:.12rem .45rem;border-radius:5px;pointer-events:none;
}
.magnet-item.herdou{border-color:rgba(30,155,69,.45) !important}
.magnet-herdou{
  grid-column:1/-1;margin:.35rem 0 0;font-size:.76rem;color:#7fd39b;
}

/* ------------------------------------------------ permissoes da conta
   Antes so havia "usuario" e "admin": para alguem ajudar a cadastrar
   magnets era preciso dar tambem o poder de apagar titulo e trocar a
   senha dos outros. */
.perm-chips{display:flex;flex-wrap:wrap;gap:.22rem;margin-top:.3rem}
.perm-chips span{
  font-size:.68rem;padding:.06rem .32rem;border-radius:4px;
  background:rgba(255,255,255,.07);color:var(--apagado);white-space:nowrap;
}
.perm-lista{
  display:grid;gap:.15rem;padding:.8rem .9rem;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--borda);
}
.perm-lista > b{
  font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--apagado);margin-bottom:.35rem;
}
/* Admin ja pode tudo: as caixas continuam a vista, apagadas, para
   ficar claro que nao e preciso marcar nada. */
.perm-lista.apagada{opacity:.45;pointer-events:none}
.perm-item{
  display:flex !important;align-items:flex-start;gap:.55rem;
  padding:.35rem .3rem;border-radius:7px;cursor:pointer;
}
.perm-item:hover{background:rgba(255,255,255,.05)}
.perm-item input{width:auto !important;margin-top:.18rem;flex-shrink:0;accent-color:var(--azul)}
.perm-item span{display:block;line-height:1.35}
.perm-item b{display:block;font-size:.87rem;font-weight:600;color:var(--texto)}
.perm-item i{display:block;font-style:normal;font-size:.76rem;color:var(--apagado)}
.perm-nota{margin:.45rem 0 0;font-size:.76rem;color:var(--apagado)}

/* ================================================ saude dos links
   A pergunta que a tela responde: QUAIS TITULOS ESTAO SEM JEITO DE
   ASSISTIR? Antes eram 500 linhas soltas ordenadas por status, e um
   titulo com quatro links mortos virava quatro problemas separados em
   pontos diferentes da lista. */
.saude-lista{display:grid;gap:.5rem}
.saude-titulo{
  border:1px solid var(--borda);border-radius:11px;overflow:hidden;
  background:var(--fundo2);border-left-width:3px;
}
.saude-titulo.erro  {border-left-color:#d8232a}
.saude-titulo.alerta{border-left-color:#f0a71a}
.saude-titulo.ok    {border-left-color:#1e9b45}

.saude-titulo summary{
  display:flex;align-items:center;gap:.85rem;
  padding:.6rem .9rem;cursor:pointer;list-style:none;
}
.saude-titulo summary::-webkit-details-marker{display:none}
.saude-titulo summary:hover{background:rgba(255,255,255,.03)}

.saude-capa{
  width:34px;height:50px;flex-shrink:0;border-radius:5px;overflow:hidden;
  background:#12161f;
}
.saude-capa img{width:100%;height:100%;object-fit:cover;display:block}
.saude-nome{flex:1;min-width:0}
.saude-nome b{display:block;font-size:.94rem;font-weight:600}
.saude-nome i{display:block;font-style:normal;font-size:.78rem;color:var(--apagado)}

.saude-estado{
  flex-shrink:0;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  padding:.14rem .45rem;border-radius:5px;
  background:rgba(255,255,255,.08);color:#c3cad8;
}
.saude-estado.erro  {background:rgba(216,35,42,.2);color:#f19a9d}
.saude-estado.alerta{background:rgba(240,167,26,.18);color:#f0c069}
.saude-estado.ok    {background:rgba(30,155,69,.18);color:#7fd39b}
.saude-oque{flex-shrink:0;font-size:.8rem;color:var(--apagado)}

/* A conta de links por estado, sem precisar abrir. */
.saude-barras{display:flex;gap:.2rem;flex-shrink:0}
.saude-barras b{
  font-size:.7rem;font-weight:800;min-width:1.5em;text-align:center;
  padding:.1rem .3rem;border-radius:4px;
}
.saude-barras .ok   {background:rgba(30,155,69,.2);color:#7fd39b}
.saude-barras .fraco{background:rgba(240,167,26,.2);color:#f0c069}
.saude-barras .novo {background:rgba(255,255,255,.1);color:#c3cad8}
.saude-barras .morto{background:rgba(216,35,42,.2);color:#f19a9d}

.saude-seta{color:var(--apagado);transition:transform .15s ease;flex-shrink:0}
.saude-titulo[open] .saude-seta{transform:rotate(180deg)}

.saude-links{padding:.2rem .9rem .8rem;border-top:1px solid var(--borda)}
.saude-link{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.85rem;
}
.saude-link:last-of-type{border-bottom:0}
.saude-link-nome{flex:1;min-width:11rem;word-break:break-word}
.saude-ep{
  font-style:normal;margin-left:.4rem;font-size:.72rem;font-weight:700;
  color:#8fc0e8;background:rgba(58,142,203,.16);padding:.05rem .3rem;border-radius:4px;
}
.saude-seed{color:var(--apagado);font-variant-numeric:tabular-nums;white-space:nowrap}
.saude-quando{color:var(--apagado);font-size:.78rem;white-space:nowrap}
.saude-link.morto .saude-link-nome{color:var(--apagado)}
.saude-acoes{margin-left:auto}
.saude-rodape{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}

@media (max-width:760px){
  .saude-oque,.saude-quando{display:none}
  .saude-titulo summary{gap:.6rem}
}

/* ---------------------------------------------------------------------
   USUARIOS NO CELULAR.

   A tabela de contas tem 655px de largura. Numa tela de 390px ela
   empurrava o painel INTEIRO para o lado: a barra de cima saia da tela e
   a pagina rolava na horizontal.

   Nao da para simplesmente por a tabela numa caixa com overflow: o menu
   de tres pontinhos e um .pontinhos-lista absoluto DENTRO da celula, e
   qualquer ancestral com overflow diferente de visible o cortaria pela
   metade - trocariamos um defeito visivel por um pior, que so aparece
   quando a pessoa vai clicar em "Excluir".

   Entao somem as colunas de apoio, na ordem do que menos importa numa
   tela pequena. Ficam "quem e" (nome, e-mail, o que pode) e o menu.
   --------------------------------------------------------------------- */
@media (max-width:760px){
  .tabela.usuarios .col-desde,
  .tabela.usuarios .col-perfis{display:none}
}
@media (max-width:560px){
  .tabela.usuarios .col-entrada{display:none}
  .tabela.usuarios td,.tabela.usuarios th{padding-left:.4rem;padding-right:.4rem}
  /* table-layout fixo: sem isto o navegador dimensiona a tabela pelo
     conteudo e um e-mail comprido continua estourando a largura, por
     mais coluna que se esconda. */
  .tabela.usuarios{table-layout:fixed}
  .tabela.usuarios .usuario-pessoa{min-width:0}
  .tabela.usuarios .usuario-pessoa b,
  .tabela.usuarios .usuario-pessoa span{overflow-wrap:anywhere}
  .tabela.usuarios .perm-chips{gap:.2rem}
  .tabela.usuarios .perm-chips span{font-size:.66rem}
  /* A coluna do menu tem largura propria: com table-layout fixo ela
     recebia 1% e o botao de 36px transbordava 7px para fora da tela -
     o bastante para a pagina inteira rolar de lado. */
  .tabela.usuarios .fim{width:42px;padding-right:0}
}

/* ---------------------------------------------------------------------
   O BOTAO "ASSISTIR AQUI" NA FICHA E NO CARTAO
   --------------------------------------------------------------------- */
.link-assistir{gap:.4rem}
.link-assistir .ico{width:15px;height:15px}

/* O aviso de quando o arquivo esta cadastrado mas nao da para tocar:
   uma linha discreta, porque nao e erro de quem esta olhando. */
.arquivo-aviso{
  font-size:.76rem;color:var(--apagado);
  display:inline-flex;align-items:center;gap:.35rem;
}

/* =====================================================================
   PAINEL > SERVIDOR DE ARQUIVOS
   ===================================================================== */
.aviso.alerta{background:rgba(240,180,41,.1);border-color:rgba(240,180,41,.42);color:#f3d489}

.passos-arq{margin:.6rem 0 0;padding-left:1.3rem;color:var(--fraco);max-width:660px}
.passos-arq li{margin:.4rem 0}
.passos-arq code{background:var(--fundo3);padding:.12rem .4rem;border-radius:5px;color:var(--texto)}

.lista-arq{margin:.8rem 0 0;padding-left:1.2rem;color:var(--fraco);
  columns:2;column-gap:2rem;max-width:820px}
.lista-arq li{margin:.22rem 0;break-inside:avoid}
.lista-arq span{font-size:.76rem;margin-left:.35rem}

/* O CONVERSOR DA MAQUINA DE CASA
   -----------------------------------------------------------------
   A barra propria da conversao SAIU DAQUI. A conversao virou a
   primeira etapa da fila de cadastro, e quem mostra o andamento e a
   linha do filme la embaixo (#fila-entrada), junto das outras tres
   etapas. Duas barras dizendo a mesma coisa em telas diferentes eram
   duas chances de uma delas mentir - e foi o que aconteceu: a de cima
   ficava parada em 98% depois de o arquivo estar pronto ha meia hora.
   ----------------------------------------------------------------- */

/* A tabela da varredura. O caminho e comprido de propria natureza; ele
   fica numa segunda linha, menor, para o NOME - que e o que se le -
   ficar em primeiro. */
.tabela.biblioteca .arq-nome{font-weight:600;overflow-wrap:anywhere}
.tabela.biblioteca .arq-caminho{font-size:.74rem;overflow-wrap:anywhere;margin-top:.1rem}
.tabela.biblioteca select{max-width:100%}
.tabela.biblioteca tr.ja-tem{opacity:.55}

/* A linha que veio com palpite fica marcada. Duas cores porque as duas
   propostas nao valem o mesmo: id do TMDB na pasta e certeza; nome
   parecido e chute educado, e quem confirma precisa saber a diferenca. */
.tabela.biblioteca tr.proposto{background:rgba(47,125,251,.06)}
.proposta-marca{font-size:.72rem;margin-top:.25rem}
.proposta-marca.alta{color:var(--ok)}
.proposta-marca.media{color:var(--alerta)}

@media (max-width:760px){
  .lista-arq{columns:1}
  .tabela.biblioteca .arq-caminho{display:none}
}

/* ---------------------------------------------------------------------
   OBRA NOVA  -  o cartao de "achei no HD, nao esta no acervo"
   ---------------------------------------------------------------------
   A capa vem primeiro de proposito: e por ela que se percebe, num
   relance, que o TMDB devolveu o filme errado. Ler "Duna (1984)" exige
   atencao; ver a capa errada nao exige nenhuma.
   --------------------------------------------------------------------- */
.obra{
  border:1px solid var(--borda);border-radius:var(--raio-g);
  padding:1rem 1.1rem;margin:0 0 1rem;background:var(--fundo2);
}
.obra-sem{opacity:.7;border-style:dashed}

.obra-marcar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;cursor:pointer}
.obra-marcar input{width:17px;height:17px;accent-color:var(--azul);flex:0 0 auto}
.obra-nome{font-weight:700;font-size:1rem}
.obra-tipo{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  padding:.14rem .45rem;border-radius:999px;
  background:rgba(255,255,255,.08);color:var(--fraco);
}
.obra-qtd{margin-left:auto;font-size:.8rem}

.obra-opcoes{display:flex;gap:.7rem;flex-wrap:wrap;margin:.9rem 0 .2rem}
.obra-op{
  display:flex;align-items:center;gap:.55rem;cursor:pointer;
  border:1px solid var(--borda);border-radius:10px;padding:.45rem .7rem .45rem .5rem;
  background:var(--fundo);transition:border-color .15s,background .15s;
}
.obra-op:hover{border-color:rgba(255,255,255,.3)}
/* :has deixa o cartao inteiro reagir ao radio que esta dentro dele.
   Onde o navegador nao tiver :has, o radio continua visivel e marcavel -
   so nao pinta a borda. Degrada sem quebrar. */
.obra-op:has(input:checked){border-color:var(--azul);background:var(--azul-vidro)}
.obra-op input{accent-color:var(--azul);flex:0 0 auto}
.obra-op img{width:46px;height:69px;object-fit:cover;border-radius:5px;display:block}
.obra-sem-capa{
  width:46px;height:69px;border-radius:5px;display:flex;
  align-items:center;justify-content:center;background:var(--fundo3);color:var(--apagado);
}
.obra-op-txt{display:flex;flex-direction:column;gap:.12rem;font-size:.85rem}
.obra-op-txt i{color:var(--fraco);font-style:normal;font-size:.78rem}

.obra-vazio{margin:.7rem 0 0;font-size:.85rem}
.obra-arquivos{margin-top:.7rem}
.obra-arquivos summary{cursor:pointer;font-size:.8rem}
.obra-arquivos ul{margin:.5rem 0 0;padding-left:1.1rem;font-size:.78rem;color:var(--fraco)}
.obra-arquivos li{margin:.18rem 0;overflow-wrap:anywhere}
.obra-arquivos b{color:var(--texto);margin-right:.3rem}
.obra-arquivos span{margin-left:.4rem}

@media (max-width:620px){
  .obra-qtd{margin-left:0;width:100%}
  .obra-opcoes{flex-direction:column}
  .obra-op{width:100%}
}

/* Para onde o arquivo vai quando voce confirmar. Mover e a unica coisa
   irreversivel desta tela - ver o destino ANTES separa "confirmei" de
   "confirmei sem saber". */
.obra-destino{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin:.8rem 0 0;font-size:.8rem;color:var(--fraco);
}
.obra-destino .ico{width:15px;height:15px;flex:0 0 auto}
.obra-destino code{
  background:var(--fundo3);padding:.16rem .45rem;border-radius:5px;
  color:var(--texto);overflow-wrap:anywhere;
}

/* ---------------------------------------------------------------------
   O QUE CHEGOU  -  a caixa de entrada, com detalhe
   ---------------------------------------------------------------------
   Estas tres palavrinhas de estado (ok / alerta / erro) ja eram usadas
   no HTML desta tela e nao existiam no CSS: saiam cinza, iguais ao
   resto, e "respondeu" tinha o mesmo peso de "fora do ar". Cor e o
   unico jeito de uma linha de estado ser lida sem ser lida.
   --------------------------------------------------------------------- */
span.ok    {color:var(--ok)}
span.alerta{color:var(--alerta)}
span.erro  {color:var(--erro)}

/* Os tres passos do topo. A tela abre dizendo O QUE FAZER - antes abria
   com o endereco IP da maquina dos videos, que e informacao de quem
   instala, na cara de quem so quer cadastrar um filme. */
.passos-add{
  list-style:none;counter-reset:passo;margin:.2rem 0 1.4rem;padding:0;
  display:grid;gap:.7rem;max-width:720px;
}
.passos-add li{
  counter-increment:passo;position:relative;padding-left:2.4rem;
}
.passos-add li::before{
  content:counter(passo);position:absolute;left:0;top:-.1rem;
  width:1.7rem;height:1.7rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--azul-vidro);border:1px solid var(--azul);
  color:#fff;font-size:.8rem;font-weight:700;
}
.passos-add b{display:block;font-size:.94rem}
.passos-add span{display:block;color:var(--fraco);font-size:.83rem;margin-top:.1rem}
.passos-add code{background:var(--fundo3);padding:.1rem .35rem;border-radius:5px;color:var(--texto)}

/* A faixa de resumo. Responde de relance o que antes exigia abrir obra
   por obra: quanto chegou, quanto pesa, quanto tem legenda. */
.chegou-resumo{
  display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 1rem;
}
.chegou-resumo span{
  font-size:.8rem;color:var(--fraco);
  background:var(--fundo3);border:1px solid var(--borda);
  border-radius:999px;padding:.28rem .7rem;
}
.chegou-resumo b{color:var(--texto);font-weight:700}
.chegou-resumo span.ok b   {color:var(--ok)}
.chegou-resumo span.erro b {color:var(--erro)}

/* A linha de fatos da obra: tamanho, qualidade, legenda, buraco de
   episodio. Fica ABAIXO do nome e nao ao lado dele porque num celular
   ao lado vira uma coluna de uma palavra por linha. */
.obra-fatos{
  display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;
  margin:.5rem 0 0;padding-left:1.7rem;font-size:.78rem;color:var(--fraco);
}
.obra-fatos span::after{content:"·";margin-left:.45rem;opacity:.45}
.obra-fatos span:last-child::after{content:""}
.obra-fatos span.ok{color:var(--ok)}
.obra-fatos span.alerta{color:var(--alerta)}
.obra-fatos span.erro{color:var(--erro);font-weight:600}

/* O cabecalho de cada temporada. A falta de episodio no meio e a unica
   coisa aqui que ninguem descobre sozinho antes da noite do filme. */
.temp-cab{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline;
  margin:.9rem 0 .3rem;font-size:.85rem;
}
.temp-cab .fraco{font-size:.76rem}
.temp-cab .erro{font-size:.76rem;color:var(--erro);font-weight:600}

.chegou-arqs{width:100%;font-size:.8rem}
.chegou-arqs td{padding:.3rem .5rem;vertical-align:top}
.chegou-arqs .arq-nome{font-weight:600;overflow-wrap:anywhere}
.chegou-arqs .arq-caminho{font-size:.72rem;overflow-wrap:anywhere;margin-top:.08rem}
.chegou-arqs .fim{text-align:right;white-space:nowrap}

/* O desenho das pastas. Fechado por padrao: e a resposta de uma
   pergunta que se faz uma vez ("como ficam os episodios?"), e depois
   nunca mais - nao pode ocupar a tela para sempre por causa disso. */
pre.codigo{
  background:var(--fundo3);border:1px solid var(--borda);border-radius:var(--raio);
  padding:.8rem 1rem;overflow-x:auto;font-size:.76rem;line-height:1.55;
  color:var(--texto);margin:.6rem 0;
}

@media (max-width:620px){
  .obra-fatos{padding-left:0}
  .chegou-arqs .arq-caminho{display:none}
}

/* =====================================================================
   ASSISTIR  -  a tela do player
   =====================================================================
   Escura, sem menu, com o video ocupando o que der. O que nao e video
   fica discreto e nao rouba altura: num celular deitado, cada pixel que
   a moldura toma sai da imagem.

   O topo flutua POR CIMA do video (nao acima dele) para a imagem
   comecar no alto da tela. A barra de baixo, ao contrario, e solida:
   trocar de audio ou de episodio e uma acao deliberada, e um controle
   que some sozinho e um controle que ninguem acha.
   --------------------------------------------------------------------- */
.assistir{
  min-height:100dvh;display:flex;flex-direction:column;
  background:#000;position:relative;
}

/* ---------------------------------------------------------------- topo */
.assistir-topo{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;gap:1rem;padding:.8rem 1.1rem;
  background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0));
  pointer-events:none;              /* a imagem continua clicavel */
}
.assistir-topo > *{pointer-events:auto}
.assistir-voltar{
  display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;
  color:var(--texto);text-decoration:none;font-size:.86rem;font-weight:600;
  padding:.38rem .7rem;border-radius:8px;background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px);transition:background .15s;
}
.assistir-voltar:hover{background:rgba(255,255,255,.22);color:#fff}
.assistir-voltar .ico{width:16px;height:16px}
.assistir-nome{
  min-width:0;display:flex;flex-direction:column;line-height:1.25;
  text-shadow:0 1px 8px rgba(0,0,0,.95);
}
.assistir-nome strong{
  font-size:.98rem;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.assistir-nome span{font-size:.78rem;color:rgba(255,255,255,.72)}

/* --------------------------------------------------------------- palco */
.assistir-palco{
  flex:1;position:relative;min-height:0;
  display:flex;align-items:center;justify-content:center;background:#000;
}
.assistir-video{
  /* ABSOLUTO, E NAO ITEM DO FLEX.
     Como item flexivel com align-items:center, o "height:100%" nao
     resolve: o navegador nao tem altura definida para a porcentagem
     morder e cai na altura intrinseca do <video> (150px) ou na que a
     proporcao do filme sugerir - e a imagem sai de qualquer tamanho
     menos o certo. Fora do fluxo, com inset:0, a caixa do video E o
     palco, exatamente, e o object-fit faz o resto. */
  position:absolute;inset:0;width:100%;height:100%;
  /* "contain" e nao "cover": preencher cortaria a legenda queimada e o
     rosto de quem esta na beira do quadro. Quem quiser cortar tem o
     botao "preencher a tela" na barra - e ai e escolha, nao surpresa. */
  object-fit:contain;background:#000;display:block;
}

/* A ABERTURA - a arte enquanto o filme nao comeca.
   -------------------------------------------------------------------
   PREENCHE A LARGURA (cover), ao contrario do video: aqui cortar as
   beiradas nao custa nada - ninguem esta lendo legenda numa tela de
   espera - e uma arte pequena com preto em volta dava ao player cara de
   erro antes mesmo de o filme comecar.

   E ESCURECIDA PELA METADE porque ela nao e a imagem principal: e o
   fundo de onde saem o "continuando de" e o botao de tocar, que
   precisam ser lidos por cima dela. */
.assistir-abertura{
  position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transition:opacity .35s ease;
}
.assistir-abertura::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.assistir-abertura[hidden]{display:none}

/* PREENCHER A TELA - a escolha de cortar, quando ela for a preferida.
   -------------------------------------------------------------------
   Um filme 16:9 numa janela 2:1 deixa tarja dos lados; um filme 2.39:1
   numa tela 16:9 deixa tarja em cima e embaixo. Nao ha conserto para
   isso: sao formas diferentes, e a unica saida seria cortar imagem. E
   por isso que e um BOTAO, e nao o padrao - do mesmo jeito que a TV faz
   com o "zoom". Quem prefere a tela cheia aperta; quem prefere ver o
   quadro inteiro nao encosta. */
.assistir-video.encher{object-fit:cover}

/* Em tela cheia quem ocupa a tela e o PALCO, e nao o <video> - e o que
   leva o menu de audio e legenda junto. Fora do modo tela cheia o palco
   e um filho flexivel; virando raiz, precisa dizer o proprio tamanho. */
.assistir-palco:fullscreen{width:100vw;height:100vh;background:#000}
.assistir-palco:-webkit-full-screen{width:100vw;height:100vh;background:#000}

/* =====================================================================
   OS CONTROLES DO PLAYER
   =====================================================================
   Uma barra so, embaixo e POR CIMA da imagem, como em qualquer player de
   video. Antes eram duas coisas mal resolvidas: os controles do
   navegador embaixo, e uma barra nossa ABAIXO do video com dublagem e
   legenda - que sumia inteira em tela cheia, justamente onde ela mais
   faz falta.

   A regra de cor: risco vermelho no que ja passou, branco translucido no
   que ja baixou, cinza no resto. E a leitura mais rapida que existe para
   "esta carregando" contra "travou".
   ===================================================================== */

/* Some tudo com o ponteiro parado. O :focus-within segura a barra de
   quem chegou pelo teclado - sumir com o foco dentro seria prender a
   pessoa num controle invisivel. */
.assistir.quieto .pl-barra,
.assistir.quieto .assistir-topo{opacity:0;pointer-events:none}

/* O PONTEIRO SOME JUNTO - e o "*" nao e exagero, e o conserto.
   Havia so ".assistir.quieto .assistir-palco{cursor:none}", e ela nunca
   valia: por cima da imagem inteira ha a camada de clique (.pl-toque),
   que declara cursor:pointer. O ponteiro esta SEMPRE sobre ela, e o
   filho ganha do pai. Resultado: a barra sumia e a setinha branca ficava
   parada no meio do filme. */
.assistir.quieto .assistir-palco,
.assistir.quieto .assistir-palco *{cursor:none}
/* O FOCO SEGURA A BARRA - MAS SO O FOCO DE TECLADO.
   Era ":focus-within", e ele foi o motivo de a barra NUNCA sumir em tela
   cheia: entra-se em tela cheia clicando no botao que fica dentro da
   propria barra, e o clique deixa o foco ali. A barra ficava presa em
   "opacity:1 !important" por causa do gesto que pediu a tela cheia.

   O ":focus-visible" e a mesma protecao sem o efeito colateral: ele so
   vale quando o navegador entende que a pessoa esta navegando pelo
   teclado - que e exatamente o caso em que sumir prenderia alguem num
   controle invisivel. */
.pl-barra:has(:focus-visible){opacity:1 !important;pointer-events:auto !important}
.assistir-topo{transition:opacity .22s}

/* A camada que recebe o clique. Nao e o proprio <video>: clicar nele
   direto abre menu de contexto proprio em alguns navegadores. */
.pl-toque{position:absolute;inset:0;z-index:3;cursor:pointer}

.pl-barra{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:0 .5rem .35rem;
  background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 100%);
  transition:opacity .22s;
  /* O gradiente nao pode roubar o clique da imagem acima dele. */
  pointer-events:none;
}
.pl-barra > *{pointer-events:auto}

/* ---------------------------------------------------------- linha do tempo
   A area de TOQUE e alta (16px) e o risco e fino (4px). Acertar 4px com
   o mouse andando e frustrante; a folga invisivel em volta resolve isso
   sem engordar o desenho. */
.pl-linha{
  position:relative;height:16px;display:flex;align-items:center;
  cursor:pointer;margin:0 .35rem;touch-action:none;
}
.pl-trilho{
  position:relative;width:100%;height:4px;border-radius:2px;
  background:rgba(255,255,255,.28);overflow:hidden;
  transition:height .12s;
}
.pl-linha:hover .pl-trilho,
.assistir.arrastando .pl-trilho{height:6px}

.pl-carregado{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:rgba(255,255,255,.45);
}
.pl-passado{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--progresso);
}
/* A bolinha so aparece com o mouse em cima, como no YouTube: parada, ela
   e um ponto vermelho no meio do filme o tempo todo. */
.pl-bolinha{
  position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;
  background:var(--progresso);transform:translate(-50%,-50%) scale(0);
  transition:transform .12s;pointer-events:none;
}
.pl-linha:hover .pl-bolinha,
.assistir.arrastando .pl-bolinha{transform:translate(-50%,-50%) scale(1)}

/* A etiqueta com o horario sob o ponteiro: e ela que deixa procurar uma
   cena sem tentativa e erro. */
.pl-dica{
  position:absolute;bottom:20px;transform:translateX(-50%);
  background:rgba(0,0,0,.9);color:#fff;font-size:.74rem;font-weight:600;
  padding:.2rem .45rem;border-radius:5px;pointer-events:none;white-space:nowrap;
}

/* ------------------------------------------------------------- botoes */
.pl-botoes{
  display:flex;align-items:center;gap:.15rem;
  padding:.1rem .2rem .2rem;
}
.pl-bt{
  display:inline-grid;place-items:center;flex:0 0 auto;
  width:38px;height:38px;padding:0;border:0;border-radius:8px;
  background:none;color:#fff;cursor:pointer;text-decoration:none;
  opacity:.92;transition:opacity .12s,background .12s;
}
.pl-bt:hover{opacity:1;background:rgba(255,255,255,.14)}
.pl-bt:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.pl-bt .ico{width:22px;height:22px}
.pl-bt.on{color:#fff}

/* ------------------------------------------------------- pular pedaco
   Os dois botoes de -10s e +30s, um de cada lado do play. No computador
   sao mais um controle; na TV sao O controle, porque com o remoto nao
   ha como arrastar a linha do tempo. Por isso eles crescem no modo TV
   (ver o bloco .tv la embaixo) em vez de ficarem do tamanho dos outros.

   O NOME E "pl-saltar" PORQUE "pl-pulo" JA ESTAVA OCUPADO por outra
   coisa nesta mesma tela: o aviso de "<< 10s" que pisca sobre o video,
   la embaixo neste arquivo. Aquele bloco vem depois deste e ganharia a
   disputa - os botoes recebiam position:absolute, fundo preto e
   pointer-events:none, isto e, saiam do lugar E paravam de funcionar.
   Nao renomeie um destes dois sem olhar o outro. */
.pl-saltar .ico{width:23px;height:23px}
.pl-saltar:active{transform:scale(.92)}

html.tv .pl-bt{width:4.2vw;height:4.2vw;border-radius:.5vw}
html.tv .pl-bt .ico{width:2.4vw;height:2.4vw}
html.tv .pl-saltar .ico{width:2.7vw;height:2.7vw}
/* Na TV o foco tem de gritar: a pessoa esta a tres metros e o unico
   jeito de saber onde esta e o anel. */
html.tv .pl-bt:focus{outline:.22vw solid #fff;outline-offset:.1vw;background:rgba(255,255,255,.16)}
/* O CC ligado ganha o sublinhado vermelho, que e como todo player marca
   "a legenda esta no ar" sem gastar uma palavra. */
.pl-cc{position:relative}
.pl-cc.on::after{
  content:"";position:absolute;left:9px;right:9px;bottom:6px;height:2.5px;
  border-radius:2px;background:var(--progresso);
}
.pl-bt.apagado{opacity:.34;cursor:not-allowed}
.pl-bt.apagado:hover{background:none}

.pl-elastico{flex:1 1 auto}

/* ---- volume: abre ao passar o mouse ----
   Parado e so o icone, e nao rouba largura de quem esta no celular. */
.pl-som{display:flex;align-items:center}
.pl-volume{
  width:0;opacity:0;margin:0;padding:0;
  transition:width .18s,opacity .18s,margin .18s;
  -webkit-appearance:none;appearance:none;background:none;cursor:pointer;
}
.pl-som:hover .pl-volume,
.pl-volume:focus{width:76px;opacity:1;margin:0 .5rem 0 .15rem}
.pl-volume::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,#fff var(--cheio,100%),rgba(255,255,255,.32) var(--cheio,100%));
}
.pl-volume::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.32)}
.pl-volume::-moz-range-progress{height:4px;border-radius:2px;background:#fff}
.pl-volume::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:#fff;margin-top:-4px;
}
.pl-volume::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}

.pl-tempo{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.82rem;color:#fff;font-variant-numeric:tabular-nums;
  margin:0 .5rem;white-space:nowrap;
}
.pl-tempo .pl-sep{color:rgba(255,255,255,.5)}
.pl-tempo span:last-child{color:rgba(255,255,255,.72)}

/* -------------------------------------------------------- a engrenagem */
.pl-menu{position:relative;display:inline-flex}
.pl-painel{
  position:absolute;bottom:calc(100% + .5rem);right:0;min-width:216px;
  max-height:min(58vh,400px);overflow-y:auto;
  background:rgba(14,14,16,.97);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:.5rem;
  box-shadow:0 18px 44px rgba(0,0,0,.75);backdrop-filter:blur(10px);
}
.pl-grupo + .pl-grupo{
  margin-top:.4rem;padding-top:.45rem;border-top:1px solid rgba(255,255,255,.1);
}
.pl-grupo h3{
  display:flex;align-items:center;gap:.35rem;margin:0 0 .25rem;padding:0 .5rem;
  font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.5);font-weight:700;
}
.pl-grupo h3 .ico{width:13px;height:13px}
.pl-op{
  display:block;width:100%;text-align:left;
  padding:.4rem .55rem;border-radius:7px;border:0;background:none;
  color:rgba(255,255,255,.86);font-size:.85rem;font-family:inherit;
  cursor:pointer;text-decoration:none;transition:background .12s,color .12s;
}
.pl-op:hover{background:rgba(255,255,255,.1);color:#fff}
.pl-op.on{background:var(--azul);color:#fff;font-weight:600}
.pl-op.vazio{color:rgba(255,255,255,.4);cursor:default;font-size:.8rem}
.pl-op.vazio:hover{background:none}

/* ------------------------------------------------- avisos sobre a imagem */
/* A rodinha. Filme que vem de um HD de casa para de vez em quando para
   encher o buffer; sem sinal nenhum isso parece travamento, e a pessoa
   recarrega a pagina - que e a pior coisa a fazer. */
.pl-girando{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;
  pointer-events:none;
}
.pl-girando i{
  display:block;width:54px;height:54px;border-radius:50%;
  border:3px solid rgba(255,255,255,.22);border-top-color:#fff;
  animation:pl-girar .8s linear infinite;
}
@keyframes pl-girar{to{transform:rotate(360deg)}}

.pl-pulo{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  background:rgba(0,0,0,.6);color:#fff;font-size:.9rem;font-weight:700;
  padding:.7rem 1.1rem;border-radius:999px;pointer-events:none;
}
.pl-pulo-tras{left:9%}
.pl-pulo-frente{right:9%}

/* "continuando de 32:43". Some sozinho em 8 segundos: depois disso a
   pessoa ja esta assistindo, e voltar ao inicio deixou de ser a
   pergunta. */
.pl-retomada{
  position:absolute;left:1.1rem;bottom:5.2rem;z-index:6;
  display:inline-flex;align-items:center;gap:.75rem;
  background:rgba(14,15,20,.88);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);border-radius:.85rem;
  padding:.6rem .7rem .6rem .75rem;color:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  animation:retomada-entra .35s cubic-bezier(.2,.8,.3,1);
}
@keyframes retomada-entra{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}
}
/* O relogio num circulo azul: dá ao cartao um ponto de entrada visual e
   diz, sem palavra nenhuma, que o assunto e tempo. */
.pl-retomada-ico{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--azul-vidro);border:1px solid var(--azul-linha);
}
.pl-retomada-ico svg{width:15px;height:15px;color:var(--azul-forte)}

/* O rotulo pequeno em cima, a HORA grande embaixo: o dado e a hora, e
   ela tem de ser lida de relance, de longe, na TV. */
.pl-retomada-txt{display:flex;flex-direction:column;line-height:1.15}
.pl-retomada-txt small{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(255,255,255,.55);font-weight:600;
}
.pl-retomada-txt b{font-size:1.02rem;font-weight:700;font-variant-numeric:tabular-nums}

/* Botao de verdade, separado por uma linha - e a unica acao do cartao,
   e sublinhado no meio de texto corrido nao parecia clicavel. */
.pl-retomada button{
  margin-left:.15rem;padding:.42rem .75rem;
  border:1px solid rgba(255,255,255,.2);border-radius:.55rem;
  background:rgba(255,255,255,.07);
  font:inherit;font-size:.78rem;font-weight:600;color:#fff;cursor:pointer;
  white-space:nowrap;transition:background .15s,border-color .15s;
}
.pl-retomada button:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38)}

/* O play grande: so aparece quando o navegador recusa tocar sozinho. */
.palco-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:7;
  width:78px;height:78px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(0,0,0,.62);border:2px solid rgba(255,255,255,.85);color:#fff;
  backdrop-filter:blur(6px);transition:transform .15s,background .15s;
}
.palco-play:hover{background:rgba(0,0,0,.82);transform:translate(-50%,-50%) scale(1.07)}
.palco-play svg{width:40px;height:40px;margin-left:4px}

@media (max-width:620px){
  /* No celular sobram os que se usa com o filme rodando. O volume e do
     botao lateral do aparelho, e a barrinha nao cabe. */
  .pl-som .pl-volume{display:none}
  .pl-bt{width:34px;height:34px}
  .pl-bt .ico{width:20px;height:20px}
  .pl-tempo{font-size:.76rem;margin:0 .25rem}
  .pl-retomada{left:.6rem;right:.6rem;bottom:4.6rem}
}

/* --------------------------------------------------------------- erro */
.assistir-erro{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;text-align:center;padding:2rem 1.4rem;
  background:rgba(0,0,0,.88);backdrop-filter:blur(6px);
}
.assistir-erro h2{font-size:1.25rem;margin:0}
.assistir-erro p{color:var(--fraco);max-width:30rem;margin:.2rem 0 0}
.assistir-erro-botoes{margin-top:1.1rem;display:flex;gap:.6rem}

/* Um botao com cara de link. "do início" e uma ACAO (muda o video), e
   nao um endereco - <a href="#"> ali deixaria um "#" no historico a
   cada clique. */
.ligacao{
  background:none;border:0;padding:0;margin:0;font:inherit;
  color:var(--azul-forte);cursor:pointer;text-decoration:underline;
}
.ligacao:hover{color:#fff}

/* -------------------------------------------------- gaveta de episodios */
.assistir-gaveta{
  position:absolute;top:0;right:0;bottom:0;width:340px;max-width:88vw;z-index:8;
  background:rgba(10,10,11,.97);backdrop-filter:blur(10px);
  border-left:1px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;
  box-shadow:-18px 0 48px rgba(0,0,0,.6);
}
.gaveta-topo{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.gaveta-x{
  background:none;border:0;color:var(--fraco);font-size:1.5rem;
  line-height:1;cursor:pointer;padding:0 .2rem;
}
.gaveta-x:hover{color:#fff}
.gaveta-lista{overflow-y:auto;padding:.4rem 0 1rem}
.gaveta-temp{
  padding:.7rem 1rem .35rem;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--apagado);
}
.gaveta-ep{
  display:flex;align-items:center;gap:.7rem;padding:.55rem 1rem;
  color:var(--fraco);text-decoration:none;font-size:.85rem;
  border-left:3px solid transparent;
}
.gaveta-ep:hover{background:rgba(255,255,255,.06);color:#fff}
.gaveta-ep.on{border-left-color:var(--azul);background:var(--azul-vidro);color:#fff}
.gaveta-num{
  flex:0 0 auto;min-width:1.9rem;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--apagado);font-weight:700;
}
.gaveta-ep.on .gaveta-num{color:var(--azul-forte)}
.gaveta-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gaveta-agora{
  flex:0 0 auto;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--azul-forte);
}

@media (max-width:680px){
  .assistir-topo{padding:.55rem .7rem;gap:.6rem}
  .assistir-voltar span{display:none}
  .assistir-barra{gap:.8rem;padding:.65rem .7rem}
  .assistir-rotulo{display:none}       /* a pastilha ja se explica */
  .assistir-dir{margin-left:0}
  .assistir-retomada{width:100%}
}

/* O botao principal da ficha: "Assistir" merece mais peso que o resto.

   A ALTURA VEM DE min-height, e nao so do recuo. Com padding sozinho,
   "Assistir" (que tem icone) ficava mais alto do que "Mais informacoes"
   (que nao tem), e os dois botoes desalinhavam de um ou dois pixels -
   o bastante para a linha parecer torta. Um piso comum resolve os dois
   casos de uma vez. */
.botao.grande{
  min-height:52px;padding:.9rem 1.9rem;font-size:1.01rem;
}
.botao.grande .ico{width:20px;height:20px}

/* =====================================================================
   O AVISO DE COPIA DE CINEMA
   =====================================================================
   Amarelo, e nao vermelho: o filme FUNCIONA, so nao esta bonito.
   Vermelho e reservado para o que esta quebrado - se as duas coisas
   usassem a mesma cor, quem olha a tela pararia de distinguir "ruim" de
   "nao funciona". */
.selo-cam{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .65rem;border-radius:999px;
  background:rgba(240,180,41,.14);border:1px solid rgba(240,180,41,.45);
  color:var(--alerta);font-size:.75rem;font-weight:700;
  white-space:nowrap;cursor:help;
}
.selo-cam .ico{width:14px;height:14px}
.selo-cam.grande{font-size:.84rem;padding:.42rem .85rem}
.selo-cam.grande .ico{width:16px;height:16px}

.hero-cam{margin:0 0 1rem}

/* No player, junto do aviso de retomada: quem chegou pelo cartao nao
   passou pela ficha e nao viu aviso nenhum ainda. */
.pl-cam{position:absolute;left:1.1rem;bottom:8.2rem;z-index:6}
@media (max-width:620px){ .pl-cam{left:.6rem;bottom:7.4rem} }

/* A escolha de "como esta a imagem", na tela de adicionar titulo. */
.obra-imagem{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin:.7rem 0 0;padding-left:1.7rem;font-size:.8rem;
}
.mini-radio{
  display:inline-flex;align-items:center;gap:.35rem;
  cursor:pointer;color:var(--fraco);
}
.mini-radio input{accent-color:var(--azul);margin:0}
.mini-radio:has(input:checked){color:var(--texto);font-weight:600}

/* A serie com episodio faltando: capa pequena ao lado do nome, para
   reconhecer de relance qual e sem ler. */
.serie-falta{margin-bottom:1.6rem}
.serie-falta-topo{display:flex;gap:1rem;align-items:flex-start;margin-bottom:.6rem}
.serie-falta-topo img{width:54px;height:81px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.serie-falta-topo h2{font-size:1.05rem}
.serie-falta-topo h2 a{color:var(--texto);text-decoration:none}
.serie-falta-topo h2 a:hover{color:#fff;text-decoration:underline}
.serie-falta-topo h2 .fraco{font-size:.85rem;font-weight:400;margin-left:.4rem}

@media (max-width:620px){ .obra-imagem{padding-left:0} }

/* =====================================================================
   MANDAR UM ARQUIVO PELO PAINEL
   =====================================================================
   Area grande e tracejada: e o desenho que todo mundo ja reconhece como
   "arraste aqui", sem precisar de legenda. */
.enviar{margin:0 0 1.6rem;max-width:700px}
.enviar-alvo{
  display:flex;align-items:center;gap:1rem;cursor:pointer;
  padding:1.1rem 1.3rem;border-radius:var(--raio-g);
  border:2px dashed var(--borda);background:var(--fundo2);
  transition:border-color .15s,background .15s;
}
.enviar-alvo:hover{border-color:var(--azul);background:var(--azul-vidro)}
/* Enquanto o arquivo esta pairando por cima. Sem esta pista, quem
   arrasta nao sabe se pode soltar. */
.enviar-alvo.sobre{border-color:var(--azul-forte);background:var(--azul-vidro)}
.enviar-icone{
  display:grid;place-items:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;
  background:var(--azul-vidro);color:var(--azul-forte);
}
.enviar-icone .ico{width:21px;height:21px}
.enviar-texto{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.enviar-texto b{font-size:.95rem}
.enviar-texto i{font-style:normal;font-size:.82rem;color:var(--fraco)}
.enviar-texto code{background:var(--fundo3);padding:.1rem .35rem;border-radius:5px;color:var(--texto)}

.enviar-lista{margin-top:.9rem;display:grid;gap:.6rem}
.enviar-item{
  background:var(--fundo2);border:1px solid var(--borda);
  border-radius:var(--raio);padding:.7rem .9rem;
}
.enviar-nome{font-size:.86rem;font-weight:600;overflow-wrap:anywhere}
.enviar-nome .fraco{font-weight:400;margin-left:.35rem}

/* A barra que anda. Numa espera de quarenta minutos ela e a diferenca
   entre "esta indo" e "isto travou". */
.enviar-barra{
  height:5px;border-radius:3px;background:var(--fundo3);
  margin:.5rem 0 .35rem;overflow:hidden;
}
.enviar-barra i{
  display:block;height:100%;width:0;background:var(--progresso);
  transition:width .25s;
}
.enviar-recado{font-size:.78rem;color:var(--fraco)}

/* ESPERANDO A VEZ. A linha existe desde que o arquivo foi solto, mas
   apagada: quem olha ve que ele foi aceito e ainda nao comecou, em vez
   de ver o vazio e achar que o segundo arquivo se perdeu. */
.enviar-item.esperando{opacity:.62;border-style:dashed}
.enviar-item.esperando .enviar-barra i{width:0}

.enviar-item.pronto{border-color:rgba(62,207,114,.45)}
.enviar-item.pronto .enviar-barra i{background:var(--ok)}
.enviar-item.pronto .enviar-recado{color:var(--ok)}
.enviar-item.erro{border-color:rgba(239,90,68,.45)}
.enviar-item.erro .enviar-barra i{background:var(--erro)}
.enviar-item.erro .enviar-recado{color:var(--erro)}

@media (max-width:620px){
  .enviar-alvo{flex-direction:column;text-align:center;gap:.7rem}
}

/* =====================================================================
   O CARTAO DO PROXIMO EPISODIO
   ---------------------------------------------------------------------
   Aparece quando o episodio termina. Ocupa a tela toda por cima do
   video - neste momento ele E a tela, e nao um aviso de canto: a
   pessoa acabou de largar a atencao e precisa reencontrar onde ela
   esta.

   O video parado atras fica escurecido, e nao escondido: some a
   sensacao de ter mudado de pagina, que e o que assustava quando o
   player pulava sozinho.
   ===================================================================== */
/* OS DADOS EMBAIXO, E O VIDEO INTEIRO EM CIMA.
   Antes este cartao era uma caixa no MEIO da tela, com o video borrado
   atras: dava um susto, e tapava justamente o fim do episodio - que e o
   que a pessoa ainda esta vendo, ja que agora ele abre faltando dez
   segundos, e nao depois do fim. Embaixo, ele nao cobre nada: e o mesmo
   lugar onde a barra de controles ja mora. */
.pl-proximo{
  position:absolute;inset:0;z-index:12;
  display:flex;align-items:flex-end;padding:0 3% 7%;
  background:linear-gradient(to top,rgba(6,7,10,.96) 18%,rgba(6,7,10,.55) 42%,transparent 68%);
  animation:proximo-entra .3s ease;
}
.pl-proximo[hidden]{display:none}
@keyframes proximo-entra{from{opacity:0}to{opacity:1}}

.pl-proximo-cartao{
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:1.4rem;
  align-items:center;max-width:820px;width:100%;
  animation:proximo-sobe .38s cubic-bezier(.2,.8,.3,1);
}
@keyframes proximo-sobe{
  from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}
}

/* A cena do proximo, com a contagem por cima: o olho ja esta na imagem,
   e nao ha por que mandar procurar o numero noutro canto. */
.pl-proximo-cena{
  position:relative;border-radius:.7rem;overflow:hidden;aspect-ratio:16/9;
  background:var(--fundo3);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 40px rgba(0,0,0,.6);
}
.pl-proximo-cena img{width:100%;height:100%;object-fit:cover;display:block}
.pl-proximo-sem svg{width:38px;height:38px;color:var(--apagado)}

.pl-proximo-anel{
  position:absolute;top:50%;left:50%;width:72px;height:72px;
  transform:translate(-50%,-50%) rotate(-90deg);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.pl-proximo-anel circle{fill:rgba(8,9,12,.55);stroke-width:3}
.pl-proximo-anel .trilho{stroke:rgba(255,255,255,.22)}
.pl-proximo-anel .corda{
  fill:none;stroke:var(--azul-forte);stroke-linecap:round;
  transition:stroke-dashoffset 1s linear;
}
.pl-proximo-conta{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.5rem;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(0,0,0,.7);
}

.pl-proximo-corpo{min-width:0}
.pl-proximo-rotulo{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--azul-forte);margin-bottom:.4rem;
}
.pl-proximo-nome{display:block;font-size:1.22rem;line-height:1.3;margin-bottom:.5rem}
.pl-proximo-sinopse{
  margin:0 0 1rem;font-size:.85rem;line-height:1.55;color:var(--fraco);
  /* Sinopse longa empurraria os botoes para fora do cartao. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pl-proximo-acoes{display:flex;gap:.6rem;flex-wrap:wrap}
.pl-proximo-acoes .botao svg{width:1rem;height:1rem}

/* No celular deitado sobra pouca altura: a cena sai e fica o essencial -
   o nome, a contagem e os dois botoes. */
@media (max-width:720px), (max-height:460px){
  .pl-proximo{padding:1rem}
  .pl-proximo-cartao{grid-template-columns:132px minmax(0,1fr);gap:1rem;padding:.85rem}
  .pl-proximo-sinopse{display:none}
  .pl-proximo-nome{font-size:1rem}
  .pl-proximo-anel{width:52px;height:52px}
  .pl-proximo-conta{font-size:1.1rem}
}

/* =====================================================================
   A TELA DE FIM - filme, ou ultimo episodio

   O que havia antes era a tela dos creditos: preta, com nomes de
   dublagem rolando, ate a pessoa achar o botao de voltar. Nao e uma
   tela feia por acaso - e uma tela que nao foi feita para ser o fim de
   nada.

   Aqui o fundo volta a ser a ARTE do proprio titulo, fechando onde a
   abertura comecou, e os dados ficam EMBAIXO, numa faixa. Nada de
   caixa no meio da tela: a imagem e do filme que a pessoa acabou de
   ver, e ela merece a tela inteira mais alguns segundos.
   ===================================================================== */
.pl-fim{
  position:absolute;inset:0;z-index:12;
  display:flex;flex-direction:column;justify-content:flex-end;
  animation:proximo-entra .4s ease;
}
.pl-fim[hidden]{display:none}

.pl-fim-arte{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--preto)}
.pl-fim-arte img{width:100%;height:100%;object-fit:cover;display:block}
.pl-fim-arte::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(6,7,10,.97) 22%,rgba(6,7,10,.55) 52%,rgba(6,7,10,.25) 100%);
}

/* O nome do que acabou fica no alto, pequeno: e a legenda da imagem, e
   nao o assunto da tela - o assunto e o que vem depois. */
.pl-fim-topo{
  position:relative;z-index:1;padding:2.2rem 3% 0;
  display:flex;flex-direction:column;gap:.15rem;
}
.pl-fim-acabou{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul-forte);
}
.pl-fim-topo strong{
  font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.15;color:#fff;
  text-shadow:0 3px 20px rgba(0,0,0,.8);
}

.pl-fim-faixa{position:relative;z-index:1;padding:0 3% 6%;margin-top:auto}
.pl-fim-cabeca{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:.7rem;
}
.pl-fim-rotulo{
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--azul-forte);
}
.pl-fim-fechar{
  background:transparent;border:1px solid rgba(255,255,255,.3);color:#e8eaee;
  border-radius:6px;padding:.35rem .8rem;font-size:.82rem;cursor:pointer;
  font-family:inherit;
}
.pl-fim-fechar:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07)}
.pl-fim-fechar:focus-visible{outline:2px solid var(--azul-forte);outline-offset:2px}

/* Rolagem lateral em vez de quebra de linha: quatro cartoes cabem numa
   tela larga, e num celular deitado eles andam com o dedo em vez de
   empurrar a faixa para cima do filme. */
.pl-fim-cartoes{
  display:flex;gap:.9rem;
  /* OVERFLOW-Y DECLARADO, E FOLGA POR DENTRO.
     Aqui morava a moldura quebrada do controle remoto. Um elemento com
     overflow-x:auto e overflow-y:visible tem o overflow-y promovido a
     auto pelo proprio CSS - ou seja, ele RECORTA por cima e por baixo
     tambem. E o cartao focado faz duas coisas que saem da caixa: sobe
     3px e ganha uma moldura branca de 3px afastada outros 3px. Tudo
     isso era cortado rente, e o que aparecia na TV era meia moldura.

     A folga vai como padding (dentro da area que rola, logo nao e
     cortada) e volta como margem negativa, para a fila continuar
     alinhada com o rotulo "A seguir" acima dela. O padding-left ainda
     serve de recuo para o tv.js, que le justamente esse valor para
     saber onde parar de rolar. */
  overflow-x:auto;overflow-y:hidden;
  padding:12px 10px 14px;margin:-12px -10px -12px;
  scrollbar-width:none;
}
.pl-fim-cartoes::-webkit-scrollbar{display:none}

.pl-fim-cartao{
  flex:0 0 clamp(170px,19vw,260px);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:.35rem;
}
.pl-fim-cena{
  position:relative;display:block;aspect-ratio:16/9;border-radius:.6rem;
  overflow:hidden;background:var(--fundo3);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 36px rgba(0,0,0,.55);
  transition:transform .18s ease,border-color .18s ease;
}
.pl-fim-cena img{width:100%;height:100%;object-fit:cover;display:block}
.pl-fim-play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(6,7,10,.35);opacity:0;transition:opacity .18s ease;
}
.pl-fim-play svg{width:34px;height:34px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
.pl-fim-cartao:hover .pl-fim-cena,
.pl-fim-cartao:focus-visible .pl-fim-cena{transform:translateY(-3px);border-color:var(--azul)}
.pl-fim-cartao:hover .pl-fim-play,
.pl-fim-cartao:focus-visible .pl-fim-play{opacity:1}
.pl-fim-cartao:focus{outline:none}
.pl-fim-cartao:focus-visible{outline:none}

.pl-fim-nome{
  font-size:.92rem;font-weight:600;color:#f2f3f5;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pl-fim-ano{font-size:.78rem;color:var(--fraco)}

/* AQUI ESTAVA A MOLDURA DUPLA.
   O painel da TV tem uma regra geral - ".tv :focus" - que poe um anel
   AZUL em volta de qualquer coisa que ganhe foco. Ela tem exatamente o
   mesmo peso que o ".pl-fim-cartao:focus{outline:none}" escrito la em
   cima e vem depois no arquivo, entao ganhava: cada cartao de "a
   seguir" recebia um retangulo azul em volta do conjunto inteiro
   (imagem MAIS o nome embaixo) e, por dentro dele, o anel branco da
   imagem. Duas molduras desencontradas, uma dentro da outra - e era
   isso que se via da sala.
   Com "html.tv" na frente a regra passa a pesar mais que a geral, e
   sobra o anel branco, que e o que se enxerga a tres metros. */
html.tv .pl-fim-cartao:focus,
html.tv .pl-fim-cartao:focus-visible{outline:none}

/* Na TV o anel de foco tem de ser grosso e branco - o azul fino some a
   tres metros, e aqui o foco e a unica forma de saber onde o OK cai. */
html.tv .pl-fim-cartao:focus .pl-fim-cena{
  outline:3px solid #fff;outline-offset:3px;transform:translateY(-3px);
  /* A moldura acompanha o canto arredondado do cartao; sem isto o
     Chromium da TV desenha um retangulo de quina viva por cima de uma
     imagem redonda, e e essa sobra nos cantos que parece defeito. */
  border-radius:.6rem;
}
html.tv .pl-fim-cartao:focus .pl-fim-play{opacity:1}

@media (max-width:720px), (max-height:460px){
  .pl-fim-topo{padding-top:1.1rem}
  .pl-fim-topo strong{font-size:1.1rem}
  .pl-fim-cartao{flex-basis:150px}
  .pl-fim-faixa{padding-bottom:4.5rem}
}

/* =====================================================================
   ADICIONAR TITULO - CONFIRMAR QUEM E, E A FILA

   A tela tem duas metades com trabalhos diferentes, e o desenho diz
   isso: em cima cartoes largos, com capa grande, onde se DECIDE; em
   baixo linhas compactas, com capa pequena, onde so se ACOMPANHA.
   ===================================================================== */

/* ---------------------------------------------------- uma obra que chegou */
.obra.js-obra{
  background:var(--fundo2);border:1px solid var(--borda);border-radius:.8rem;
  padding:1rem;margin-bottom:.75rem;display:block;
}
.obra.js-obra.aberta{border-color:var(--azul-linha);background:rgba(47,125,251,.05)}
.obra-topo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:start}
.obra-lado{min-width:0}
.obra-arq{
  font-size:.76rem;color:var(--apagado);font-family:ui-monospace,monospace;
  overflow-wrap:anywhere;margin-bottom:.2rem;
}
.obra-dados{font-size:.78rem;color:var(--fraco);margin-top:.3rem}
.obra-dados b{color:var(--texto);font-weight:600}
.obra-dados .proposta-marca{display:inline;margin:0}
.obra-acoes{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;text-align:right}
.obra-acoes .obra-destino{
  display:block;margin:0;
  font-size:.71rem;color:var(--apagado);font-family:ui-monospace,monospace;
  overflow-wrap:anywhere;max-width:230px;
}
.obra-converter{
  display:flex;align-items:flex-start;gap:.4rem;
  font-size:.78rem;color:var(--fraco);margin-top:.5rem;line-height:1.5;
}
.obra-converter svg{width:.95rem;height:.95rem;color:var(--alerta);flex:0 0 auto}

/* ------------------------------------------------------------- as capas */
.capas{display:flex;gap:.55rem;margin-top:.75rem;align-items:flex-start;flex-wrap:wrap}
.capa{
  width:76px;flex:0 0 auto;cursor:pointer;text-align:center;
  background:none;border:0;padding:0;font:inherit;color:inherit;
}
.capa i,.capa img{
  display:grid;place-items:center;width:76px;height:114px;border-radius:.4rem;
  font-style:normal;font-size:.6rem;font-weight:700;color:#fff;padding:.35rem;
  line-height:1.2;border:2px solid transparent;box-sizing:border-box;
  background:linear-gradient(150deg,#3a4a6b,#1d2333);
}
.capa img{object-fit:cover;padding:0}
.capa.on i,.capa.on img{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-vidro)}
/* A mesma marca sem depender do JavaScript ter rodado: o radio esta
   escondido dentro do label, e :has deixa a capa reagir a ele. Onde o
   navegador nao tiver :has, a classe .on que o JavaScript poe resolve.
   Os dois caminhos existem para que a capa marcada NUNCA fique sem
   marca - e escolher a capa errada e o unico erro caro desta tela. */
.capa:has(input:checked) i,.capa:has(input:checked) img{
  border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-vidro)}
.capa:has(input:checked) span{color:var(--texto);font-weight:600}
.capa span{display:block;font-size:.68rem;color:var(--fraco);margin-top:.3rem;line-height:1.25}
.capa.on span{color:var(--texto);font-weight:600}
.capa-buscar i{
  background:transparent;border:1.5px dashed var(--borda);color:var(--fraco);
  font-size:1.4rem;font-weight:400;
}
.capa-buscar:hover i{border-color:var(--azul);color:var(--azul-forte)}

/* --------------------------------------------------- procurar a mao */
.buscar{
  margin-top:.9rem;padding:.9rem;border-radius:.6rem;
  background:rgba(0,0,0,.28);border:1px solid var(--borda);
}
.buscar-linha{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.5rem}
.buscar-linha input[type=text]{
  flex:1;min-width:180px;padding:.5rem .7rem;border-radius:.45rem;
  border:1px solid var(--borda);background:var(--fundo);color:var(--texto);
  font:inherit;font-size:.85rem;
}
.buscar-linha input.ano{flex:0 0 88px;min-width:0}
.tipos{display:flex;border:1px solid var(--borda);border-radius:.45rem;overflow:hidden}
.tipos button{
  border:0;background:transparent;color:var(--fraco);font:inherit;font-size:.8rem;
  padding:.5rem .8rem;cursor:pointer;
}
.tipos button.on{background:var(--azul);color:#fff;font-weight:600}
.buscar-dica{font-size:.75rem;color:var(--apagado);margin:.2rem 0 .6rem}
.buscar-dica b{color:var(--fraco)}

/* Temporada e episodio, arquivo por arquivo */
.ep-campos{white-space:nowrap}
.ep-campos label{font-size:.76rem;color:var(--fraco);display:inline-flex;
  align-items:center;gap:.3rem;margin-right:.45rem}
.ep-campos input{
  width:52px;padding:.3rem .4rem;border-radius:.4rem;text-align:center;
  border:1px solid var(--borda);background:var(--fundo);color:var(--texto);
  font:inherit;font-size:.82rem;font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------- a fila
   TUDO AQUI DENTRO DE #fila-entrada, E NAO SOLTO.

   A barrinha de tarefas que aparece em toda tela do painel ja usa
   .fila-item, .fila-barra e .fila-recado, com outro desenho. Escrever
   estas regras soltas as trocaria LA TAMBEM - e a barrinha, que
   funciona, viraria linha de cartao com capa de 50 pixels em todas as
   telas do acervo. Como estas regras vem depois no arquivo, elas
   venceriam, e o estrago apareceria longe daqui.
   --------------------------------------------------------------------- */
#fila-entrada .fila-aviso{display:flex;align-items:center;gap:.55rem;margin:.1rem 0 1.2rem;
  font-size:.83rem;color:var(--fraco)}
#fila-entrada .fila-aviso svg{width:1rem;height:1rem;color:var(--ok);flex:0 0 auto}
#fila-entrada .fila-aviso strong{color:var(--texto)}
#fila-entrada .fila-item{
  display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:1rem;align-items:center;
  padding:.8rem .9rem;margin-bottom:.55rem;border-top:0;
  background:var(--fundo2);border:1px solid var(--borda);border-radius:.7rem;
}
#fila-entrada .fila-item.ativo{border-color:var(--azul-linha);background:rgba(47,125,251,.06)}
#fila-entrada .fila-item.pronto{opacity:.72}
#fila-entrada .fila-item.falhou{border-color:rgba(239,90,68,.42);background:rgba(239,90,68,.06)}
#fila-entrada .fila-capa{
  width:50px;height:74px;border-radius:.35rem;display:grid;place-items:center;
  object-fit:cover;background:linear-gradient(150deg,#3a4a6b,#1d2333);
}
#fila-entrada .fila-capa-sem svg{width:1.2rem;height:1.2rem;color:rgba(255,255,255,.5)}
#fila-entrada .fila-meio{min-width:0}
#fila-entrada .fila-titulo{font-weight:600;font-size:.92rem;margin-bottom:.12rem}
#fila-entrada .fila-titulo .ano{color:var(--fraco);font-weight:400}
#fila-entrada .fila-sub{font-size:.75rem;color:var(--apagado);margin-bottom:.45rem;
  overflow-wrap:anywhere}
#fila-entrada .fila-sub b{color:var(--fraco);font-weight:600}
#fila-entrada .fila-sub code{font-size:.72rem}

/* O caminho das quatro etapas */
#fila-entrada .passos{display:flex;align-items:center;gap:.28rem;flex-wrap:wrap}
#fila-entrada .passo{display:flex;align-items:center;gap:.3rem;font-size:.7rem;
  color:var(--apagado);padding:.12rem .5rem .12rem .3rem;border-radius:20px}
#fila-entrada .passo i{width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--apagado);display:grid;place-items:center;
  font-size:.48rem;font-style:normal;color:var(--preto)}
#fila-entrada .passo.feito{color:var(--fraco)}
#fila-entrada .passo.feito i{background:var(--ok);border-color:var(--ok)}
#fila-entrada .passo.feito i::before{content:"\2713";color:var(--preto);font-weight:700}
#fila-entrada .passo.agora{color:var(--azul-forte);background:var(--azul-vidro);font-weight:600}
#fila-entrada .passo.agora i{border-color:var(--azul-forte);border-right-color:transparent;
  animation:fila-girar 1s linear infinite}
#fila-entrada .passo.erro{color:var(--erro)}
#fila-entrada .passo.erro i{background:var(--erro);border-color:var(--erro)}
#fila-entrada .passo.erro i::before{content:"!";color:var(--preto);font-weight:700}
#fila-entrada .fila-seta{color:var(--borda);font-size:.68rem}
@keyframes fila-girar{to{transform:rotate(360deg)}}

#fila-entrada .fila-barra{height:.28rem;border-radius:99px;background:rgba(255,255,255,.1);
  margin-top:.5rem;max-width:320px;overflow:hidden}
#fila-entrada .fila-barra i{display:block;height:100%;border-radius:99px;
  background:var(--progresso);transition:width .4s ease}
#fila-entrada .fila-dir{text-align:right;display:flex;flex-direction:column;
  align-items:flex-end;gap:.3rem}
#fila-entrada .fila-pos{font-size:.69rem;color:var(--apagado);font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.06);padding:.15rem .5rem;border-radius:20px}
#fila-entrada .fila-pct{font-size:.8rem;font-variant-numeric:tabular-nums;line-height:1.1}
/* A etiqueta do numero de cima. Ver o comentario em fila-entrada.php:
   sao duas reguas diferentes na mesma coluna, e sem dizer qual e qual
   elas se desmentem. */
#fila-entrada .fila-pct-rotulo{font-size:.62rem;color:var(--apagado);
  letter-spacing:.03em;text-transform:uppercase;margin-top:-.15rem}
#fila-entrada .fila-recado{font-size:.71rem;max-width:180px;line-height:1.35;margin:0}
#fila-entrada .fila-erro{font-size:.75rem;color:var(--erro);margin:.35rem 0 0;
  line-height:1.45;max-width:520px}
#fila-entrada .fila-nota{font-size:.73rem;color:var(--apagado);margin:.4rem 0 0;
  line-height:1.4;max-width:520px}

@media (max-width:760px){
  .obra-topo{grid-template-columns:minmax(0,1fr)}
  /* A tabela de episodios tem colunas demais para 420 pixels (nome,
     temporada, episodio, qualidade, tamanho, legenda). Sem isto ela
     empurra a PAGINA INTEIRA para o lado, e o celular passa a rolar na
     horizontal em tudo - inclusive no menu. Rolando so ela, o resto da
     tela fica no lugar. */
  .js-obra .obra-arquivos{overflow-x:auto}
  /* E a tabela precisa de uma largura MINIMA, senao ela nao rola: ela
     se espreme ate caber, e o nome do arquivo - que quebra em qualquer
     ponto - desce uma letra por linha, virando uma coluna de letras.
     Com largura minima ela rola de lado e continua legivel. */
  .js-obra .obra-arquivos .chegou-arqs{min-width:520px}
  .js-obra .obra-arquivos .temp-cab{min-width:520px}
  .obra-acoes{text-align:left;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:.6rem}
  .obra-acoes .obra-destino{max-width:none}
  #fila-entrada .fila-item{grid-template-columns:44px minmax(0,1fr)}
  #fila-entrada .fila-capa{width:44px;height:66px}
  #fila-entrada .fila-dir{grid-column:2;flex-direction:row;align-items:center;
    justify-content:flex-start}
  #fila-entrada .fila-recado{max-width:none}
}

/* A barra de acoes no alto de "Adicionar titulo".
   Sao os tres botoes que se aperta AO CHEGAR nesta tela - ver o que
   chegou, varrer tudo, conferir o que ja esta apontado. Ficavam no fim
   da pagina, e pedir uma varredura obrigava a rolar por cima da fila
   inteira. */
.acoes-topo{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  margin:0 0 1.8rem;
}
.acoes-topo form{display:inline}

/* =====================================================================
   ASSISTINDO AGORA
   =====================================================================
   Uma linha por pessoa: capa pequena (reconhecer o filme de relance),
   quem e, em que minuto esta, e - do lado direito - de onde vem. A rede
   aparece antes da cidade porque e ela que muda a leitura de tudo o
   mais: um travamento de quem esta na rede de casa e um problema aqui
   dentro; o mesmo travamento vindo da internet e a banda de subida. */
.vivo-item{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:1rem;align-items:center;
  padding:.85rem .9rem;margin-bottom:.6rem;
  background:var(--fundo2);border:1px solid var(--borda);border-radius:.7rem;
  border-left:3px solid var(--ok);
}
.vivo-item.pausado{border-left-color:var(--alerta);opacity:.85}
.vivo-capa{
  width:52px;height:78px;border-radius:.35rem;object-fit:cover;display:block;
  background:linear-gradient(150deg,#3a4a6b,#1d2333);
}
.vivo-capa-sem{display:grid;place-items:center}
.vivo-capa-sem svg{width:1.2rem;height:1.2rem;color:rgba(255,255,255,.5)}
.vivo-meio{min-width:0}
.vivo-titulo{font-weight:600;font-size:.95rem;margin-bottom:.15rem;overflow-wrap:anywhere}
.vivo-titulo .ano{color:var(--fraco);font-weight:400}
.vivo-quem{display:flex;align-items:center;gap:.4rem;font-size:.8rem;margin-bottom:.45rem}
.vivo-perfil{width:.72rem;height:.72rem;border-radius:50%;flex:0 0 auto;display:inline-block}
.vivo-barra{height:.28rem;border-radius:99px;background:rgba(255,255,255,.1);
  max-width:360px;overflow:hidden}
.vivo-barra i{display:block;height:100%;border-radius:99px;background:var(--progresso);
  transition:width .5s linear}
.vivo-tempo{font-size:.75rem;color:var(--apagado);margin-top:.4rem;
  font-variant-numeric:tabular-nums}
.vivo-dir{display:flex;flex-direction:column;align-items:flex-end;gap:.28rem;text-align:right}
.vivo-rede{font-size:.71rem;padding:.12rem .5rem;border-radius:20px;
  background:rgba(255,255,255,.07);color:var(--fraco)}
.vivo-rede-internet{background:rgba(240,180,41,.16);color:var(--alerta)}
.vivo-rede-tailscale{background:var(--azul-vidro);color:var(--azul-forte)}
.vivo-lugar{font-size:.71rem;max-width:220px}
.vivo-ip{font-size:.68rem;color:var(--apagado);background:rgba(255,255,255,.05);
  padding:.08rem .35rem;border-radius:4px}

@media (max-width:760px){
  .vivo-item{grid-template-columns:44px minmax(0,1fr)}
  .vivo-capa{width:44px;height:66px}
  .vivo-dir{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:flex-start;text-align:left}
  .vivo-lugar{max-width:none}
}

/* =====================================================================
   A SAGA - os outros filmes da mesma colecao, na pagina do titulo
   =====================================================================
   Capas, e nao os cartoes da home: aqui a pergunta e "qual parte e
   esta?", e a capa responde isso de relance. O cartao da home traz nota,
   genero e botao de assistir - informacao demais para uma linha que so
   existe para dizer o que mais ha na saga.

   O da pagina atual fica APAGADO e nao e link: e ele que diz em que
   ponto voce esta, e clicar nele nao levaria a lugar nenhum. */
.saga{display:flex;gap:1rem;flex-wrap:wrap}
.saga-item{
  width:132px;flex:0 0 auto;display:flex;flex-direction:column;gap:.35rem;
  text-decoration:none;color:var(--texto);
}
.saga-item img,.saga-sem-capa{
  width:132px;height:198px;border-radius:.5rem;object-fit:cover;display:block;
  background:var(--fundo3);border:2px solid transparent;
  transition:transform .15s,border-color .15s;
}
.saga-sem-capa{display:grid;place-items:center;color:var(--apagado)}
.saga-sem-capa svg{width:1.6rem;height:1.6rem}
a.saga-item:hover img{transform:translateY(-3px);border-color:var(--azul)}
.saga-item b{font-size:.82rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.saga-item i{font-size:.75rem;color:var(--fraco);font-style:normal}

/* O de agora: apagado, sem cursor de link, e dizendo por que. */
.saga-item.aqui{cursor:default}
.saga-item.aqui img,.saga-item.aqui .saga-sem-capa{
  opacity:.32;filter:grayscale(.55);border-color:var(--borda)}
.saga-item.aqui b,.saga-item.aqui i{opacity:.55}
.saga-aqui{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fraco);
}

@media (max-width:620px){
  .saga-item,.saga-item img,.saga-item .saga-sem-capa{width:104px}
  .saga-item img,.saga-item .saga-sem-capa{height:156px}
}

/* =====================================================================
   O ACERVO NA TV  -  quando quem manda e o controle
   =====================================================================
   Estas regras so valem com <html class="tv">, que o tv.js poe quando o
   aparelho e uma TV (ou quando alguem so tem setas para navegar). Num
   computador com mouse nada disto aparece.

   A MEDIDA, QUE E O CORACAO DESTE BLOCO
   O catalogo nasceu com o cartaz de 250px FIXOS. Num monitor isso da
   sete cartazes na largura e esta certo. Numa TV, esta errado por um
   motivo que nao se ve no computador: a TV nao entrega ao site os
   1920 pontos que ela tem. O navegador dela conta em "pixels de CSS", e
   numa TV de 1080p ele costuma dizer que a tela tem 960 - cada ponto de
   CSS valendo dois pontos de verdade. Entao 250px viravam um quarto da
   largura da tela, e so cabiam TRES cartazes e meio: os "cartazes
   grandes demais".

   Nao adianta escolher outro numero fixo: a TV seguinte conta diferente.
   O que a Netflix faz - e o que passa a valer aqui - e nao medir em
   pixel nenhum. O cartaz e UMA FRACAO DA LARGURA DA TELA:

        seis cartazes na linha, sempre, em qualquer aparelho.

   Seis e a conta da sala: a 1080p, cada cartaz fica com cerca de 285
   pontos de largura por 160 de altura, que e o tamanho em que um rosto
   ainda se reconhece a tres metros. Numa TV que conte 960, a mesma
   fracao devolve 142 pontos de CSS - que sao os mesmos 285 na tela. A
   medida deixa de depender de como o aparelho conta.

   O RESTO SEGUE DAI:

   1. O FOCO PRECISA SER VISTO DE TRES METROS. Anel branco grosso,
      crescimento, e o nome do filme aceso SO no cartaz escolhido - com
      os vizinhos apagados. Na TV o foco nao e uma dica: e a unica
      resposta a pergunta "qual eu estou escolhendo?".

   2. A TV CORTA AS BORDAS. Quase toda TV amplia um pouco a imagem
      (overscan) e come de 2% a 5% de cada lado. Dai a margem de 4%.

   3. O MENU SAI DA FRENTE. Ele sobe para fora da tela e so volta quando
      a pessoa sobe ate ele. Antes ficava fixo no alto roubando uma faixa
      da imagem de abertura o tempo todo.

   4. NADA QUE SO SIRVA AO MOUSE FICA DE PE. As setas de rolar a fileira,
      a previa em video do hover e - a mais importante - o painel de
      botoes que abria dentro do cartaz: os botoes dele ficavam ENTRE um
      cartaz e o seguinte, e a seta para a direita caia neles em vez de
      andar na fileira. Era o "nao da para mover para frente".
   ===================================================================== */

/* ---- 0. as medidas, num lugar so ------------------------------------ */
.tv{
  --tv-borda:4vw;          /* margem de seguranca contra o corte da TV   */
  --tv-vao:.55vw;          /* espaco entre um cartaz e o outro           */
  --tv-numero:5.6vw;       /* largura do numerao do Top 10               */
  --tv-numero-dez:7.9vw;   /* o "10" e mais largo que os outros          */

  /* Altura do painel que abre sob o cartaz escolhido.
     FIXA de proposito, e nao "o que couber": e por ela que a borda sabe
     onde terminar para contornar cartaz e painel como um bloco so. Com
     altura variavel, a borda sobraria ou faltaria em cada cartao. */
  /* A ALTURA DO PAINEL DO CARTAZ ESCOLHIDO.

     Era 7,2vw = 138px a 1920, e o conteudo pede 165px: a ultima linha
     (os generos) saia cortada ao meio em todo cartaz focado. Em vw de
     proposito - os textos deste painel tambem sao em vw, entao a conta
     continua valendo em qualquer largura de TV.

     Para reconferir depois de mexer no conteudo: com o cartaz focado,
     comparar scrollHeight e clientHeight do .cartao-info. */
  --tv-painel:9vw;

  /* Sem isto o navegador da TV as vezes "ajuda" aumentando textos por
     conta propria, e a conta de seis cartazes por linha quebra. */
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
  /* Quem desliza aqui e o tv.js, com animacao que se refaz em vez de
     empilhar. A rolagem suave do navegador brigava com ela. */
  scroll-behavior:auto;
}

/* Na TV nao ha mouse - e um cursor esquecido no meio da tela e a coisa
   mais amadora que um aplicativo de sala pode mostrar. O "!important" e
   deliberado: e para vencer, de uma vez, as dezenas de "cursor:pointer"
   espalhados pelo arquivo, que existem para o computador. */
.tv,.tv *{cursor:none!important}

/* Abaixo de 700 pontos nao ha largura para seis cartazes: se alguem
   ligar o modo TV num celular, o layout normal continua valendo. */
@media (min-width:700px){

/* O corpo do texto tambem em fracao da tela, pelo mesmo motivo dos
   cartazes: assim ele tem o mesmo tamanho FISICO numa TV que conta 960 e
   numa que conta 1920. */
.tv{font-size:1.15vw}

/* ---- 1. SEIS CARTAZES NA LARGURA ------------------------------------ */
/* A conta e feita sobre "100%" do trilho, e nao sobre a largura da
   janela: 100% aqui ja e a area visivel com as margens descontadas, e
   por isso a barra de rolagem de um navegador de computador nao
   desalinha a ultima coluna. */
.tv .trilho{
  gap:var(--tv-vao);
  padding-left:var(--tv-borda);
  padding-right:var(--tv-borda);
  /* A FOLGA VERTICAL, E POR QUE ELA E ASSIMETRICA.

     O trilho recorta o que sai dele (e obrigado a isso: quem rola de
     lado recorta nos dois eixos). O painel abre PARA BAIXO do cartaz,
     entao a folga de baixo tem de caber o painel inteiro ja crescido -
     senao ele apareceria cortado no meio. Em cima basta o tanto que o
     cartaz cresce.

     A margem negativa devolve por fora exatamente o que o padding tomou
     por dentro: a fileira continua ocupando a mesma altura na pagina, e
     a conta que rola a tela ate ela continua valendo. */
  padding-top:1.4vw;
  padding-bottom:calc(var(--tv-painel) + 2.2vw);
  margin-top:-1.4vw;
  margin-bottom:calc(-1 * (var(--tv-painel) + 2.2vw));
  scroll-behavior:auto;
}
/* O cartaz escolhido tem de ficar POR CIMA da fileira seguinte, que vem
   depois no HTML e por isso e desenhada em cima.

   Ja existe uma regra que levanta a fileira inteira quando ha foco nela,
   mas ela usa ":has()" - que TV com navegador antigo nao entende, e ali
   o painel apareceria por baixo da fileira de baixo. Tirando o z-index
   da fileira, quem decide passa a ser o z-index do proprio cartaz, que
   qualquer navegador entende.

   O seletor e comprido de proposito: precisa vencer o
   ".fileira:has(.cartao:focus-visible)", que vale tres classes. */
html.tv .conteudo .fileira{z-index:auto}
.tv .trilho .cartao{
  width:calc((100% - 5 * var(--tv-vao)) / 6);
}

/* A grade de "ver todos" e da busca segue a mesma medida. */
.tv .grade-cartoes{
  grid-template-columns:repeat(6,1fr);
  gap:2.6vw var(--tv-vao);
}

/* O TOP 10. Cinco na linha, e nao seis: o numerao ao lado de cada cartaz
   ocupa largura de verdade. */
.tv .fileira.numerada .trilho{padding-left:var(--tv-borda);gap:var(--tv-vao)}
.tv .fileira.numerada .trilho .cartao{
  width:calc((100% - 5 * var(--tv-numero) - 4 * var(--tv-vao)) / 5);
}
.tv .cartao.com-numero{margin-left:var(--tv-numero)}
.tv .cartao.com-numero .numero{
  left:calc(-1 * var(--tv-numero));width:var(--tv-numero);
  font-size:7.4vw;-webkit-text-stroke-width:.22vw;
}
.tv .cartao.com-numero.dez{margin-left:var(--tv-numero-dez)}
.tv .cartao.com-numero.dez .numero{
  left:calc(-1 * var(--tv-numero-dez));width:var(--tv-numero-dez);
}

/* ---- 2. A MARGEM DE SEGURANCA --------------------------------------- */
/* So no que encosta na borda, e SEM dobrar: antes a fileira tinha 3,2vw
   e o trilho dentro dela outros 3vw, e o conjunto comia 12% da tela. */
.tv .topo{padding-left:var(--tv-borda);padding-right:var(--tv-borda)}
.tv .fileira{padding-left:0;padding-right:0;margin-bottom:2.4vw}
.tv .fileira h2{padding-left:var(--tv-borda);padding-right:var(--tv-borda)}
.tv .conteudo{padding-left:0;padding-right:0}
.tv .pagina,.tv .rodape{padding-left:var(--tv-borda);padding-right:var(--tv-borda)}
/* Sem destaque nao ha o que empurrar: o menu esta fora da tela. */
.tv .sem-destaque{padding-top:4vh}

/* ---- 3. TAMANHO DE LEITURA A DISTANCIA ------------------------------ */
.tv .fileira h2{font-size:1.55vw;margin-bottom:.8vw}
.tv .fileira h2 .contagem{font-size:1.05vw}
.tv .mini-titulo{font-size:1.05vw;left:.6vw;right:.6vw;bottom:.5vw}
.tv .mini-logo{max-height:2.6vw;left:.6vw;bottom:.5vw}
.tv .pagina h1{font-size:2.6vw}
.tv .pl-op{font-size:1.05vw}

/* ---- 4. O DESTAQUE OCUPA A TELA ------------------------------------- */
/* Com o menu fora do caminho, a imagem de abertura ganha a tela toda -
   que e a razao de ela existir. */
.tv .destaque{min-height:88vh;padding-left:var(--tv-borda);padding-right:var(--tv-borda);padding-bottom:11vh}
.tv .destaque-corpo{max-width:48vw}
.tv .destaque h1{font-size:4vw}
.tv .destaque-logo{max-width:32vw;max-height:15vh}
.tv .destaque .tagline{font-size:1.3vw}
.tv .destaque .sinopse{font-size:1.3vw;max-width:46ch}
.tv .meta-linha{font-size:1.15vw}
.tv .destaque-acoes .botao{font-size:1.35vw;padding:1.1vh 2vw}

/* ---- 5. O MENU SAI DA FRENTE ---------------------------------------- */
/* Ele espera fora da tela, em cima. Sobe-se ate ele com a seta e ele
   desce; sai-se dele e ele volta a sumir. E o que a propria Netflix faz
   na TV, e resolve o "menu ocupando espaco" sem tirar o menu de ninguem. */
/* DOIS MOTIVOS PARA O MENU ESTAR NA TELA, E BASTA UM:

     1. a pagina esta no alto (classe "tv-topo", posta pelo tv.js). Ali
        ele se sobrepoe ao ceu escuro da imagem de abertura, como na
        Netflix, e nao rouba espaco de nada;
     2. o foco esta dentro dele.

   A primeira versao tinha so a segunda regra, e era ruim: quem descia
   para o catalogo e subia de volta nao via mais o menu em lugar nenhum -
   ele existia, mas nao se anunciava.

   O SUMICO E INSTANTANEO E A VOLTA E QUE DESLIZA - e nao os dois. O
   tv.js poe a classe "tv" quando o arquivo carrega, com a pagina ja
   desenhada: com transicao nos dois sentidos, quem abre o acervo veria o
   menu aparecer e subir sozinho, como se fosse defeito. */
.tv .topo{
  height:auto;padding-top:1vw;padding-bottom:1vw;
  transform:translateY(-110%);opacity:0;transition:none;
  gap:1vw;
}
.tv.tv-topo .topo,
.tv .topo:focus-within,
/* COM A BUSCA ABERTA A BARRA FICA. As sugestoes moram FORA do header
   (ver o comentario delas): com o foco numa delas o ":focus-within" da
   barra se perde, e sem esta linha ela deslizaria para fora da tela no
   meio da busca - levando junto o campo com o que a pessoa digitou. */
.tv.busca-aberta .topo{
  transform:none;opacity:1;
  transition:transform .2s ease,opacity .2s ease;
}

/* O MENU TEM DE CABER NA LARGURA.
   Sao sete itens com icone, mais a marca, mais a busca, mais o perfil.
   A 1,3vw eles nao cabiam e o ultimo ("Lancamentos 2026") passava por
   cima do botao de busca - foi o que apareceu na foto da TV. A 1,12vw
   com os recuos apertados sobram uns 200 pontos de folga a 1080p. */
.tv .topo nav{margin-left:1vw;gap:.1vw;flex-wrap:nowrap}
.tv .topo nav a,.tv .nav-botao{font-size:1.12vw;padding:.55vw .75vw;gap:.35vw}
.tv .topo nav .ico{width:1.1vw;height:1.1vw}
.tv .marca{--marca-altura:3vw}
.tv .busca-icone .ico,.tv .busca-icone svg{width:1.3vw;height:1.3vw}

/* O PERFIL NA TV NAO ABRE MENU SUSPENSO.
   Ele vai direto para "Quem esta assistindo?" (o data-tv-ir no HTML diz
   para onde, e o tv.js leva). Duas razoes: um menu que desce sobre a
   tela e mais uma camada para navegar de seta, e metade do que havia
   nele - painel administrativo, adicionar titulo - nao se faz de
   controle remoto. */
html.tv .menu-perfil .menu-lista{display:none}
html.tv .menu-perfil .seta-baixo{display:none}
.tv .menu-botao .avatar{width:2.4vw;height:2.4vw;font-size:1.1vw}

/* ---- 6. O FOCO, FORTE ----------------------------------------------- */
.tv :focus-visible,
.tv :focus{
  outline:.22vw solid var(--azul);
  outline-offset:.2vw;
  border-radius:.4rem;
}

/* O CARTAZ ESCOLHIDO.

   Cresce a partir do CENTRO, e nao do canto. Isso nao e gosto: o tv.js
   mede a posicao dos cartazes na tela para decidir para onde a seta vai,
   e um cartaz que se desloca ao ganhar foco faz essa medida mentir - a
   seta seguinte passa a errar o alvo. Crescendo pelo centro, o centro
   nao sai do lugar e a conta continua valendo. */
.tv .cartao:focus,
.tv .cartao:focus-visible,
.tv .trilho .cartao:focus,
.tv .trilho .cartao:focus-visible{
  outline:none;
  transform:scale(1.14);
  transform-origin:center center;
  transition-delay:0s;
  z-index:50;
}
.tv .cartao:focus .mini,
.tv .cartao:focus-visible .mini{
  border-radius:.35vw .35vw 0 0;      /* o painel encosta embaixo */
  box-shadow:0 1.4vw 3.6vw rgba(0,0,0,.85);
  transition-delay:0s;
}

/* A BORDA EM VOLTA DO BLOCO INTEIRO - cartaz mais painel.

   Antes era um anel grosso so na capa, e o painel de informacoes ficava
   solto embaixo, sem contorno: o conjunto nao se lia como uma coisa so.
   Agora e uma linha fina desenhada por um pseudo-elemento do cartao,
   que se estende para baixo o tanto do painel. Fina de proposito: o que
   diz onde voce esta e o CRESCIMENTO do cartaz mais o painel aberto, e
   nao a espessura da linha. */
.tv .cartao:focus::after,
.tv .cartao:focus-visible::after{
  content:"";
  position:absolute;left:0;right:0;top:0;
  bottom:calc(-1 * var(--tv-painel));
  border:.13vw solid rgba(255,255,255,.92);
  border-radius:.4vw;
  pointer-events:none;
  z-index:8;
  /* A SOMBRA EM VOLTA, e nao so para baixo.

     O cartaz escolhido cresce 14% e passa uns dez pixels por cima dos
     vizinhos de cada lado. Ele esta na frente (z-index 50), mas com a
     arte do vizinho encostada e so uma linha branca de 0,13vw entre os
     dois, de longe nao da para dizer qual esta em cima - foi a queixa
     de "os cards dos lados ficam acima do hover". Uma sombra que se
     espalha para os quatro lados escurece o que esta atras e resolve a
     duvida sem mexer em ordem de pintura nenhuma. */
  box-shadow:0 .8vw 3vw .7vw rgba(0,0,0,.82);
}
/* O NOME DO FILME: aceso so no escolhido. Era a queixa mais direta -
   "nao da para saber em qual filme esta". Com todos os nomes acesos com
   a mesma forca, o olho nao tem onde pousar; com um so aceso, a resposta
   e imediata mesmo de longe. */
.tv .mini-titulo{opacity:.45;transition:opacity .14s}
.tv .cartao:focus .mini-titulo,
.tv .cartao:focus-visible .mini-titulo{
  opacity:1;text-shadow:0 .1vw .5vw rgba(0,0,0,.98);
}

/* As capas da saga e as fotos de episodio seguem a mesma linguagem. */
.tv .saga-item:focus img,
.tv .saga-item:focus-visible img,
.tv .ep-foto:focus,
.tv .ep-foto:focus-visible{
  outline:.28vw solid #fff;outline-offset:.14vw;
}

/* Botao e link de menu: fundo cheio, e nao so a borda - de longe, cor se
   ve melhor do que contorno. */
/* O "Generos" e um <button>, e nao um <a>: sem ele nesta lista, o unico
   item do menu que NAO acendia de azul era justamente o que abre a
   lista - do sofa, parecia que a seta tinha pulado ele. */
.tv .topo nav a:focus,
.tv .topo nav a:focus-visible,
.tv .nav-botao:focus,
.tv .nav-botao:focus-visible,
.tv .pl-op:focus,
.tv .pl-op:focus-visible{
  background:var(--azul);color:#fff;outline-offset:0;
}

/* ---- 7. O PAINEL DE INFORMACOES, E O QUE FOI TIRADO DELE ------------ */
/* O PAINEL VOLTOU, MAS OS BOTOES DELE SAIRAM DO CAMINHO DA SETA.

   O painel abre sob o cartaz escolhido com nota, premios, duracao e
   generos - e o que se quer saber antes de escolher, e e o que a
   Netflix mostra.

   O defeito nunca foi o painel: eram os TRES BOTOES dentro dele. Eles
   ficavam ENTRE um cartaz e o proximo, a seta para a direita entrava
   neles, o cartaz perdia o foco, o painel fechava, os botoes sumiam com
   ele e o foco morria no meio da fileira. Do sofa, "a seta parou de
   andar".

   Eles continuam desenhados - o painel sem eles ficaria com um buraco
   no alto -, mas o tv.js nao os considera destino de seta nenhuma. Na
   TV quem abre o titulo e o OK sobre o cartaz.

   ALTURA FIXA: e o que permite a borda acima saber onde terminar. */
html.tv .cartao .cartao-info{
  max-height:0;height:auto;overflow:hidden;
  padding-left:.7vw;padding-right:.7vw;
  border-radius:0 0 .4vw .4vw;
  font-size:1vw;
}
html.tv .cartao:focus .cartao-info,
html.tv .cartao:focus-visible .cartao-info{
  max-height:var(--tv-painel);height:var(--tv-painel);
  opacity:1;
  padding-top:.6vw;padding-bottom:.6vw;
  transition-delay:0s;
  box-shadow:0 1.4vw 3.6vw rgba(0,0,0,.85);
}
/* Os botoes ficam, so nao mandam mais em nada: sem mouse na TV, eles
   sao ilustracao. O tv.js e quem os exclui da navegacao. */
html.tv .cartao .cartao-info .circ{
  width:2vw;height:2vw;border-width:.12vw;pointer-events:none;
}
html.tv .cartao .cartao-info .circ .ico{width:.95vw;height:.95vw}
html.tv .cartao .cartao-botoes{gap:.5vw;margin-bottom:.45vw}
html.tv .cartao .cartao-meta{font-size:.95vw;gap:.4vw}
html.tv .cartao .cartao-generos{font-size:.9vw;margin:.35vw 0 0}

/* Estes dois sim sao so do mouse: o botao de silenciar a previa e a
   propria previa em video, que existe para quem deixa o ponteiro
   parado sobre o cartaz. */
html.tv .cartao .mudo{display:none}
html.tv .cartao .previa{display:none}
/* Setas de rolar a fileira - as do catalogo e as do elenco: existem para
   o ponteiro do mouse chegar perto da borda. No controle, quem rola e a
   propria seta do aparelho. E, focaveis, elas ficariam ENTRE o ultimo
   cartaz de uma fileira e o primeiro da seguinte. */
html.tv .seta,
html.tv .elenco-seta{display:none}

/* ---- 7b. A TELA DE ENTRADA NA TV ------------------------------------ */
/* O cartao de entrada nasceu para um celular em pe: 410 pontos de
   largura e recuo generoso. Numa TV de 1080p ele ficava enorme, sobrando
   pelas beiradas - e, com o QR embaixo, passava da altura da tela e
   criava barra de rolagem, que num controle remoto e o pior que pode
   acontecer (nao ha o que arrastar).

   Aqui ele vira DUAS COLUNAS lado a lado: a senha a esquerda para quem
   insiste, o QR a direita para quem tem o celular no bolso. Cabe em
   1080p sem rolar, e o QR - que e o caminho que a gente quer que a
   pessoa use - fica do tamanho de quem manda ser fotografado. */
.tv .login-palco{
  min-height:100vh;padding:2vh var(--tv-borda);
  display:flex;align-items:center;justify-content:center;gap:3vw;
}
.tv .cartao-login{
  max-width:30vw;padding:2vw 2vw 1.6vw;border-radius:1vw;
  flex:0 0 auto;
}
.tv .login-marca{height:4.4vh;margin-bottom:1.6vh}
.tv .cartao-login h1{font-size:2vw}
.tv .cartao-login .sub{font-size:1vw;margin:.4vh 0 1.8vh}
.tv .campo-flutua{margin-bottom:1.2vh}
.tv .campo-flutua input{padding:1.5vh .8vw .6vh;font-size:1.1vw}
.tv .campo-flutua > span{font-size:1.1vw;left:.85vw;top:1.05vh}
.tv .login-entrar{padding:1.1vh;font-size:1.1vw;margin-top:.6vh}

.tv .login-celular{max-width:26vw;margin:0}
/* O botao desaparece porque na TV o painel ja abre aberto. */
.tv .celular-abrir{display:none}
.tv .celular-painel{margin-top:0;padding:1.6vh 1.2vw 1.2vh;border-radius:1vw}
.tv .celular-passos{font-size:1vw;margin-bottom:1.4vh}
/* GRANDE DE PROPOSITO, e o tamanho foi MEDIDO e nao chutado.

   Um QR de 33 modulos com margem sao 41 quadradinhos de lado. Fotografei
   a tela renderizada com desfoque, com ruido e de esguelha, e decodifiquei
   com leitor de verdade: a 16vw o caso mais duro - foto torta de uma TV
   que conta 960 pontos - deixava de ler. A 19vw passa em todos.

   19vw a 1080p sao 365 pontos, quase nove por quadradinho. Sobra espaco
   na coluna da direita, e QR grande nao custa nada. */
.tv .celular-qr svg{width:19vw;border-radius:.6vw}
.tv .celular-codigo{font-size:2vw;margin:1.2vh 0 .2vh}
.tv .celular-estado{font-size:.95vw}
.tv .celular-outro{margin-top:1.2vh;font-size:1vw}

/* ---- 8. O QUE NAO SERVE NA TV --------------------------------------- */
/* O atalho do painel sai do menu: administrar de controle remoto e
   sofrimento, e o app nem leva para la. Continua acessivel pelo
   endereco, no computador ou no celular. */
.tv .menu-painel{display:none}

}  /* fim do @media (min-width:700px) */


/* =====================================================================
   A TELA DOS DISCOS
   =====================================================================
   Ela e lida de longe e com pressa: alguem abre aqui porque desconfia
   que alguma coisa esta errada. Entao o numero vem grande, o rotulo
   pequeno em cima dele, e o que esta ruim fica vermelho sem depender
   de ler o rotulo. */
.disco-item + .disco-item{margin-top:1.2rem}

.disco-numeros{
  display:grid;gap:.9rem;margin:0 0 1rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.disco-numeros > div{
  background:var(--fundo3);border:1px solid var(--borda);
  border-radius:10px;padding:.7rem .85rem;
}
.disco-numeros dt{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--apagado);margin:0 0 .25rem;
}
.disco-numeros dd{margin:0;font-size:1.3rem;font-weight:700;line-height:1.1}
/* Vermelho no NUMERO, e nao numa etiqueta ao lado: o olho vai ao numero
   primeiro, e e nele que a informacao mora. */
.disco-numeros dd.ruim{color:var(--erro)}

.disco-motivos{margin:0 0 1rem;padding-left:1.1rem}
.disco-motivos li{margin:.18rem 0;font-size:.88rem}

/* A barra de uso. Verde ate 80%, amarela ate 92%, vermelha acima - e
   nao um degrade continuo: com degrade ninguem sabe dizer onde estava
   ontem, e o ponto da barra e justamente perceber a mudanca. */
.barra-disco{
  height:7px;border-radius:99px;background:rgba(255,255,255,.09);
  overflow:hidden;margin-bottom:.25rem;min-width:110px;
}
.barra-disco i{display:block;height:100%;background:var(--ok);border-radius:99px}
.barra-disco i.quase{background:var(--alerta)}
.barra-disco i.cheia{background:var(--erro)}

/* O comando para copiar. Fonte de terminal, quebra preservada, e um
   fundo escuro que diz "isto se cola no terminal, nao se le como
   texto". */
.comando-bloco{
  background:#0c0c0f;border:1px solid var(--borda);border-radius:8px;
  padding:.8rem .9rem;margin:.5rem 0;overflow-x:auto;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.82rem;line-height:1.55;color:#cfe3ff;white-space:pre;
}
.passo-disco{margin:1.1rem 0}
.passo-disco b{font-size:.92rem}
.passo-disco p{margin:.35rem 0 0;max-width:72ch}

/* ==================================================================
   TV: O QUE CUSTA QUADRO POR QUADRO
   ==================================================================

   A TV nao e um computador pequeno - e outra maquina. GPU de celular
   de 2016, memoria contada, e um navegador que desenha a tela inteira
   quando qualquer coisa se mexe. Tres efeitos que no PC nao custam
   nada sao, ali, a lentidao inteira:

   1. backdrop-filter. E o mais caro de todos, e por um motivo que nao
      e obvio: para desfocar o que esta ATRAS, o navegador precisa
      primeiro desenhar tudo que esta atras, copiar aquilo para uma
      textura, borrar a textura e so entao desenhar por cima. A cada
      quadro. A barra do topo e fixa e cobre uma fileira inteira de
      cartazes - entao rolar a pagina refazia esse trabalho todo,
      sessenta vezes por segundo, para um efeito que ninguem enxerga a
      tres metros de distancia.

   2. As sombras grandes e espalhadas. Blur de sombra tambem e
      textura borrada; num cartao so nao se sente, em vinte e quatro
      cartazes por fileira se sente.

   3. As fileiras que estao fora da tela. O navegador desenha as sete,
      mesmo as que ninguem esta vendo. content-visibility manda ele
      desenhar so o que aparece - e as demais quando chegarem.

   NADA DISSO MUDA NO COMPUTADOR. O bloco inteiro esta preso em
   html.tv: o vidro fosco continua exatamente como estava no monitor,
   onde ele custa barato e fica bonito. */

/* O FOSCO VIRA OPACO. Onde havia vidro, agora ha uma superficie
   escura solida - a legibilidade nao vem mais do borrao, entao ela
   precisa vir da propria cor, e por isso os fundos dos casos de baixa
   opacidade sobem logo abaixo, em vez de simplesmente perderem o
   efeito e deixarem o texto sobre o cartaz.

   A lista e nominal, e nao um "*", de proposito: seletor universal com
   !important desliga tambem o que um dia for acrescentado sem que
   ninguem perceba, e esconde o custo em vez de trata-lo. Estes sao os
   vinte e seis lugares que hoje declaram backdrop-filter. */
html.tv .topo,
html.tv .topo.solido,
html.tv .nav-lista,
html.tv .botao.marca.vidro,
html.tv .botao.secundario,
html.tv .tag-serie,
html.tv .hero-info,
html.tv .cartao-login,
html.tv .modal-fundo,
html.tv .perfil-pontos,
html.tv .modal-perfil,
html.tv .menu-lista,
html.tv .lightbox,
html.tv .ep-foto i,
html.tv .sug-nota,
html.tv .elenco-seta,
html.tv .modal-pessoa-fundo,
html.tv .busca-sugestoes,
html.tv .modal-adm,
html.tv .assistir-voltar,
html.tv .pl-painel,
html.tv .pl-retomada,
html.tv .palco-play,
html.tv .assistir-erro,
html.tv .assistir-gaveta,
html.tv .pl-proximo,
/* Este ultimo e do painel de administracao, que ninguem abre na TV.
   Entra na lista mesmo assim: manter a regra "todo vidro fosco tem
   desligamento" sem excecao custa uma linha, e excecao e o que faz
   uma lista assim apodrecer. */
html.tv .area-colar.arrastando::after{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* A barra do topo: fundo solido e nada de transicao.
   Transicionar backdrop-filter, como estava, obriga o navegador a
   refazer o borrao em CADA quadro da animacao - e a barra muda de
   estado toda vez que a pagina rola um pouco. */
html.tv .topo{transition:background .3s ease}
html.tv .topo.solido{
  background:#101013;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}

/* OS FUNDOS QUE DEPENDIAM DO BORRAO para separar texto de imagem.
   Sem o desfoque, .66 de opacidade deixa o cartaz atravessar a letra;
   com fundo solido, o mesmo painel continua legivel de longe - que e
   a unica distancia de que a TV precisa. */
html.tv .nav-lista{background:#14141a}

/* A LETRA DO MENU CRESCE NA TV, e nao encolhe.
   Com oito itens a barra so cabia apertando a letra - numa tela vista
   a tres metros, exatamente o contrario do que se deve fazer. Com seis
   sobrou espaco, e ele foi para o tamanho da fonte. */
html.tv .topo nav a,
html.tv .topo nav .nav-botao{font-size:1.05rem;padding:.62rem .8rem}
html.tv .topo nav{gap:.25rem}
html.tv .hero-info{background:rgba(8,9,12,.94)}
html.tv .pl-painel{background:rgba(8,9,12,.94)}
html.tv .assistir-gaveta{background:rgba(6,7,10,.96)}
html.tv .busca-sugestoes{background:#101014}
html.tv .menu-lista{background:#14141a}

/* AS SOMBRAS DO CARTAO ESCOLHIDO. A moldura clara continua - ela e
   quem diz onde a seta esta, e sem ela a TV fica sem foco visivel. O
   que sai e o borrao gigante em volta, que era enfeite e custava
   caro. */
html.tv .cartao:focus::after,
html.tv .cartao:focus-visible::after{
  box-shadow:0 .3vw .6vw rgba(0,0,0,.75);
}

/* ---- O PAINEL DO CARTAO ABRE DE UMA VEZ NA TV -----------------------
   MEDIDO, e nao achado: com o processador seis vezes mais lento,
   andar com a seta pela grade dava 24 quadros acima de 32 ms - a
   travada que se ve. Desligando so estas transicoes, caiu para 10; com
   a grade menor junto (ver ehTv, no funcoes.php), para 2.

   A CAUSA e o que a transicao anima. max-height, height e padding sao
   propriedades de LAYOUT: cada quadro da animacao obriga o navegador a
   recalcular a posicao das coisas, e ele faz isso enquanto a pessoa ja
   apertou a proxima seta. No computador passa despercebido; na TV e a
   lentidao inteira.

   O que se perde e o deslizar do painel. A tres metros de distancia,
   com o foco andando de cartaz em cartaz, ninguem estava vendo esse
   deslizar - estava vendo o atraso que ele custava. */
html.tv .cartao-info,
html.tv .cartao .mini{transition:none}

/* E a sombra grande vai junto: 3.6vw de desfoque sao 69 pixels de
   borrao em 1080p, repintados a cada passagem de foco. A moldura clara
   e quem diz onde a seta esta; a sombra era enfeite. */
html.tv .cartao:focus .cartao-info,
html.tv .cartao:focus-visible .cartao-info,
html.tv .cartao:hover .mini,
html.tv .cartao:focus-visible .mini{
  box-shadow:0 .2vw .5vw rgba(0,0,0,.8);
}

/* AS FILEIRAS FORA DA TELA CONTINUAM SE DESENHANDO - E DE PROPOSITO.

   O caminho obvio aqui seria content-visibility:auto nas fileiras,
   que manda o navegador nao desenhar o que esta fora da tela. Custa
   uma linha e economizaria bastante numa pagina de 120 cartazes.

   Nao da. content-visibility:auto liga junto "contain: layout style
   paint", e o paint CORTA o que passa da caixa. O cartao escolhido
   cresce e sobe para fora da fileira - foi exatamente o conserto do
   hover que a gente penou para acertar. Com a containment ele voltaria
   a ser cortado na borda da fileira, e eu teria trocado uma lentidao
   por um defeito visivel.

   Fica registrado para nao ser tentado de novo. Se um dia a lista de
   120 precisar mesmo ser aliviada, o caminho e paginar no servidor -
   mandar menos cartazes - e nao esconder do navegador os que ja foram
   mandados. */

/* ---------------------------------------------- o seletor de arte ---
   O TMDB guarda o IDIOMA de cada imagem e nunca o pais, entao o cartaz
   brasileiro e o portugues chegam os dois como "pt". Nenhuma regra
   automatica separa os dois - a lista aqui existe para a pessoa olhar
   o nome escrito na arte e apontar o certo.

   Por isso a miniatura e grande o suficiente para LER o titulo nela.
   Uma grade de bolinhas nao serviria para nada: o que se escolhe aqui
   e justamente a palavra desenhada na imagem. */
.escolher-arte{margin-top:1rem;border-top:1px solid var(--borda);padding-top:.9rem}
.escolher-arte > summary{cursor:pointer;font-weight:600;font-size:.92rem;list-style:none}
.escolher-arte > summary::-webkit-details-marker{display:none}
.escolher-arte > summary a{color:var(--azul);text-decoration:none}
.escolher-arte h4{margin:1rem 0 .5rem;font-size:.9rem}
.escolher-arte h4 .fraco{font-weight:400;margin-left:.4rem}
.escolher-arte p{margin:.4rem 0;max-width:72ch;font-size:.86rem;line-height:1.55}

.arte-grade{display:flex;flex-wrap:wrap;gap:.7rem}
.arte-op{margin:0}
.arte-op button{
  position:relative;display:block;padding:0;cursor:pointer;
  background:var(--fundo2);border:2px solid transparent;border-radius:8px;
  overflow:hidden;line-height:0;
}
.arte-op button:hover{border-color:var(--azul)}
.arte-op button:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.arte-op img{display:block;width:118px;height:auto}

/* O logo e desenho claro sobre fundo transparente: sem um fundo escuro
   atras, PNG de letra branca vira um quadrado vazio na tela. */
.arte-grade.logos .arte-op button{background:#15161a;padding:.5rem}
.arte-grade.logos .arte-op img{width:150px;max-height:64px;object-fit:contain}

/* A ETIQUETA E O QUE IMPORTA NESTA TELA, e ela nao esconde a imagem:
   fica embaixo, em faixa, porque em cima cobriria justamente o nome
   desenhado - que e o que a pessoa veio ler. */
.arte-tag{
  display:block;padding:.28rem .4rem;line-height:1.25;
  font-size:.7rem;color:var(--fraco);background:rgba(0,0,0,.45);
}
.arte-op.em-uso button{border-color:var(--ok)}
.arte-uso{
  position:absolute;top:.35rem;left:.35rem;
  padding:.12rem .35rem;border-radius:4px;line-height:1.3;
  font-size:.66rem;font-weight:700;color:#04140a;background:var(--ok);
}

/* O banner e deitado e largo. Na mesma largura do cartaz ele viraria
   uma tira de 118 por 66 - nao daria para ver o que a imagem mostra, e
   escolher no escuro nao e escolher. */
.arte-grade.banners .arte-op img{width:230px;height:auto}

/* ------------------------------ a arte na tela de cadastrar ---------
   O mesmo seletor da tela de editar, adiantado para a hora do cadastro.
   Escolher aqui evita o conserto depois - e o conserto depois e o unico
   jeito, porque o TMDB nao diz de que pais uma imagem e. */
.arte-cadastro{margin:.7rem 0 .2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.arte-cadastro .js-arte-resumo{font-size:.8rem}
.arte-painel{
  flex:1 1 100%;margin-top:.5rem;padding:.8rem .9rem;
  background:var(--fundo2);border:1px solid var(--borda);border-radius:10px;
  max-height:60vh;overflow-y:auto;
}
.arte-painel h4{margin:.7rem 0 .45rem;font-size:.86rem}
.arte-painel h4:first-child{margin-top:0}
.arte-painel p{margin:.3rem 0;font-size:.8rem;max-width:70ch}

/* Botao, e nao <label>: este seletor vive DENTRO do formulario da obra,
   e um radio a mais ali entraria no envio sem ninguem pedir. */
.arte-op-bt{
  position:relative;padding:0;cursor:pointer;line-height:0;
  background:var(--fundo);border:2px solid transparent;border-radius:8px;
  overflow:hidden;
}
.arte-op-bt:hover{border-color:var(--azul)}
.arte-op-bt:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.arte-op-bt img{display:block;width:96px;height:auto}
.arte-painel .arte-grade.banners .arte-op-bt img{width:190px}
.arte-painel .arte-grade.logos .arte-op-bt{background:#15161a;padding:.45rem}
.arte-painel .arte-grade.logos .arte-op-bt img{width:130px;max-height:56px;object-fit:contain}

/* Verde e "e esta que vai" - a mesma cor que a tela de editar usa para
   "em uso", para as duas telas quererem dizer a mesma coisa. */
.arte-op-bt.on{border-color:var(--ok)}

/* O "limpar os prontos" fica no cabecalho da barra, encostado a
   direita: e uma acao sobre a barra inteira, e nao sobre uma linha. */
.fila-limpar{
  margin-left:auto;background:none;border:0;cursor:pointer;
  font-size:.74rem;color:var(--fraco);text-decoration:underline;
  text-underline-offset:2px;padding:0;
}
.fila-limpar:hover{color:#fff}
.fila-limpar:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* ================================================ botao ocupado ====
   "Apertei e nao aconteceu nada" era a queixa, e ela e justa: varrer a
   caixa de entrada leva alguns segundos falando com a maquina de casa,
   e nesse tempo a tela ficava identica. Quem nao ve resposta aperta de
   novo.

   O rodinho entra ANTES do texto e o texto FICA - trocar por
   "aguarde..." mudaria a largura do botao e faria a linha inteira
   pular. E pointer-events:none, e nao disabled: botao desabilitado
   dentro de um formulario nao e enviado, e ha telas que dependem do
   name do botao para saber qual acao foi pedida. */
.botao.carregando,
button.carregando{
  position:relative;pointer-events:none;opacity:.72;
}
.botao.carregando::before,
button.carregando::before{
  content:'';display:inline-block;flex:0 0 auto;
  width:.9em;height:.9em;margin-right:.45em;vertical-align:-.1em;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;
  animation:fila-gira .7s linear infinite;
}
/* Quem pede para nao ver animacao continua vendo o estado - so que
   parado. O aviso e a informacao; girar e o enfeite. */
@media (prefers-reduced-motion:reduce){
  .botao.carregando::before,
  button.carregando::before{animation:none;opacity:.6}
}

/* O recado de "onde ficou o arquivo" ao tirar da fila. Fica 12
   segundos - tempo de ler duas frases sem virar decoracao permanente. */
.fila-recado-topo{
  margin:0 0 .7rem;padding:.6rem .8rem;border-radius:8px;
  background:rgba(47,125,251,.12);border:1px solid var(--azul-linha);
  font-size:.84rem;line-height:1.5;
}

/* O comando dentro de um aviso vai para a linha de baixo e ganha ar:
   grudado no texto ele parece parte da frase, e a pessoa nao percebe
   que aquilo e para copiar. */
.aviso-comando{
  display:block;margin-top:.55rem;padding:.5rem .7rem;
  background:rgba(0,0,0,.35);border-radius:6px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.82rem;user-select:all;
}

/* ------------------------------------ o "ver todos" da fileira ------
   Ele era um link no cabecalho e virou o ULTIMO CARTAO da fileira.

   No cabecalho ele estava no caminho de ninguem: quem le o nome da
   fileira ainda nao quer sair dela, e quem quer sair so descobre isso
   depois de olhar os cartazes - com o olho (e, na TV, com o foco) do
   outro lado da tela, longe do link. No fim, ele e o proximo passo
   depois do ultimo cartaz.

   Como CARTAO, e nao como link solto, por causa da TV: a seta anda
   entre cartoes, e um <a> de outro tamanho no meio da fileira seria um
   degrau na navegacao. */
.cartao-todos{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-decoration:none;
  /* A MESMA CAIXA DO CARTAZ: mesma largura e mesma proporcao 16/9 do
     .mini. Um retangulo de outro tamanho no fim da fileira faria a
     linha inteira parecer torta. */
  aspect-ratio:16/9;border-radius:6px;
  background:var(--fundo2);border:1px dashed var(--borda);
  color:var(--fraco);font-size:.9rem;font-weight:600;
}
.cartao-todos:hover,
.cartao-todos:focus-visible{
  background:var(--fundo3);border-color:var(--azul);color:#fff;
}
.todos-seta{font-size:1.7rem;line-height:1}
html.tv .cartao-todos{font-size:1.05vw;border-width:.12vw}
html.tv .cartao-todos .todos-seta{font-size:2.2vw}

/* O cartao de "ver todos" nao cresce como cartaz: ele nao tem arte
   para mostrar de perto, e crescer so o faria brigar por espaco com os
   cartazes de verdade ao lado. */
.cartao-todos:hover,
.cartao-todos:focus,
.cartao-todos:focus-visible{transform:none}

/* ------------------------------- a busca da TV abre so no OK --------
   NO COMPUTADOR, ":focus-within" abre o campo, e esta certo: quem
   chegou ali com Tab quer digitar - foi para isso que ele deu Tab.

   NA TV, nao. Ali a seta PASSA por cima do icone a caminho de outra
   coisa, e o campo abria sozinho no meio do caminho, empurrando o resto
   da barra para o lado. Foco de controle remoto e passagem, e nao
   intencao: a intencao e o OK.

   Entao, so na TV, o ":focus-within" para de abrir e sobra a classe
   ".aberta", que o clique (e o OK, que vira clique) poe. As regras
   abaixo desfazem o efeito dele; as de ".aberta" continuam valendo
   porque vem depois e tem mais peso. */
html.tv .busca-topo:focus-within{
  background:transparent;border-color:transparent;padding:.42rem;
}
html.tv .busca-topo:focus-within input{width:0;padding:0}

/* Aberta de verdade - por clique ou OK - volta a ser o que era, e na TV
   ela e GRANDE: a mesma largura da lista que abre embaixo, e o menu sai
   de baixo dela. A tres metros, um campo de 200px com letra de 14px nao
   se le - e e nele que a pessoa confere o que o controle digitou. */
html.tv .busca-topo.aberta{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);
  padding:.5vw 1vw;
}
html.tv .busca-topo.aberta input{width:26vw;padding:.2vw .6vw;font-size:1.25vw}

/* A LISTA, NO TAMANHO DA TV. */
html.tv .busca-sugestoes{max-height:62vh;padding:.5vw;border-radius:.7vw}
html.tv .sug-grupo{font-size:.85vw;padding:.7vw .8vw .35vw}
html.tv .sug-item{gap:.9vw;padding:.55vw .8vw;border-radius:.5vw}
html.tv .sug-item img,html.tv .sug-vazio{width:3vw;height:4.4vw;border-radius:.3vw}
html.tv .sug-txt b{font-size:1.25vw}
html.tv .sug-txt i{font-size:1vw}
html.tv .sug-ok{width:.6vw;height:.6vw}
html.tv .sug-item:focus,html.tv .sug-item:focus-visible{
  outline:.16vw solid #fff;outline-offset:-.08vw;
}

/* O icone precisa dizer que ESTA escolhido mesmo com o campo fechado -
   senao, na TV, a seta chega nele e nada muda na tela: a pessoa nao
   sabe onde esta. */
html.tv .busca-icone:focus,
html.tv .busca-icone:focus-visible{
  color:#fff;background:rgba(255,255,255,.14);border-radius:6px;
  outline:.16vw solid rgba(255,255,255,.75);outline-offset:.1vw;
}

/* ------------------------------------------------ sagas incompletas -
   "Tenho Vingadores; quais faltam?" - a lista de compras de quem monta
   o acervo. A ficha do titulo mostra so o que voce TEM, e la isso e
   proposital; aqui e o contrario. */
.sagas-grade{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.saga-cartao{
  display:flex;flex-direction:column;gap:.2rem;
  padding:.9rem 1rem;border-radius:10px;text-decoration:none;
  background:var(--fundo2);border:1px solid var(--borda);color:var(--texto);
  transition:border-color .15s,background .15s;
}
.saga-cartao:hover,.saga-cartao:focus-visible{border-color:var(--azul);background:var(--fundo3)}
.saga-cartao b{font-size:.95rem;line-height:1.3}
.saga-ir{margin-top:.35rem;font-size:.8rem;color:var(--azul)}

/* "2 DE 4" - o numero grande e a conta, e nao o rotulo. Quem passa o
   olho pela grade esta procurando saga incompleta; o denominador e a
   unica coisa que responde isso de relance. */
.saga-conta{font-size:.86rem;color:var(--apagado);margin-top:.15rem}
.saga-conta b{font-size:1.05rem;color:var(--texto)}

/* A SAGA COMPLETA CONTINUA CLICAVEL, mas apagada: ela nao e o motivo da
   tela, e sim a confirmacao de que aquela ja acabou. Colorir de verde
   chamaria atencao para justamente o que nao precisa de nada. */
.saga-cartao.completa{opacity:.62}
.saga-cartao.completa:hover,.saga-cartao.completa:focus-visible{opacity:1}
.saga-cartao.completa .saga-conta b{color:var(--verde,#4caf50)}


/* A GRADE DO QUE FALTA. Capa grande o suficiente para reconhecer o
   filme de relance - e reconhecer de relance e tudo o que se faz aqui:
   "esse eu quero", "esse nao". */
.saga-falta{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin-top:.8rem}
.capa-falta{
  display:flex;flex-direction:column;gap:.3rem;text-decoration:none;color:var(--texto);
}
.capa-falta img{
  width:100%;height:auto;border-radius:8px;display:block;
  background:var(--fundo3);border:1px solid var(--borda);
}
.capa-falta .sem-capa{
  display:grid;place-items:center;aspect-ratio:2/3;border-radius:8px;
  background:var(--fundo3);border:1px solid var(--borda);
  font-style:normal;font-size:.72rem;color:var(--apagado);text-align:center;padding:.4rem;
}
.capa-falta b{font-size:.82rem;line-height:1.3}
.capa-falta span{font-size:.75rem}
.capa-falta form{margin-top:.25rem}
.capa-falta .botao{width:100%;justify-content:center}

/* O QUE VOCE JA TEM entra apagado: ele esta ali para dar o contexto da
   saga, e nao para competir com o que falta - que e o motivo da tela. */
.saga-falta.tenho .capa-falta{opacity:.55}
.saga-falta.tenho .capa-falta:hover{opacity:1}

/* =====================================================================
   MINHA LISTA
   ---------------------------------------------------------------------
   EM LINHAS, E NAO EM GRADE DE CARTAZES. A grade e o que o resto do
   site faz, e aqui seria a escolha errada: uma lista de "ver depois"
   serve para GERENCIAR - tirar o que ja nao interessa, ver quanto falta
   do que ficou pela metade, lembrar quando entrou. Nada disso cabe
   embaixo de um cartaz; tudo cabe numa linha.
   ===================================================================== */
.lista-apoio{margin:-.4rem 0 1.4rem;font-size:.9rem}

.lista-fila{display:flex;flex-direction:column;gap:.7rem}

.lista-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1.1rem;align-items:center;
  padding:.8rem;
  background:var(--fundo2);border:1px solid var(--borda);border-radius:10px;
  transition:border-color .15s,background .15s;
}
.lista-item:hover{border-color:var(--apagado)}
/* Sem arquivo continua na lista - e uma promessa para depois, nao um
   erro - mas nao compete com o que da para ver agora. */
.lista-item.sem-arquivo{opacity:.72}
.lista-item.sem-arquivo:hover{opacity:1}

.lista-capa{
  position:relative;display:block;width:64px;flex:0 0 auto;
  border-radius:6px;overflow:hidden;background:var(--fundo3);
}
.lista-capa img{width:100%;height:auto;display:block;aspect-ratio:2/3;object-fit:cover}
.lista-barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.55)}
.lista-barra i{display:block;height:100%;background:var(--progresso,var(--azul))}

.lista-texto{min-width:0}
.lista-titulo{
  display:block;font-size:1.02rem;font-weight:600;color:var(--texto);
  text-decoration:none;line-height:1.25;
}
.lista-titulo:hover{color:var(--azul-forte)}
.lista-meta{margin:.2rem 0 0;color:var(--fraco);font-size:.85rem}
.lista-tag{
  display:inline-block;margin-left:.4rem;padding:.05rem .4rem;border-radius:4px;
  background:var(--fundo3);border:1px solid var(--borda);
  font-size:.7rem;font-weight:600;color:var(--fraco);
}
.lista-estado{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin:.4rem 0 0;font-size:.8rem;color:var(--apagado);
}
.lista-parou{color:var(--azul-forte);font-weight:600}
.lista-breve{color:var(--alerta)}

.lista-acoes{display:flex;gap:.5rem;align-items:center}
.lista-acoes .botao{padding:.55rem 1rem;font-size:.75rem}
.lista-tirar{margin:0}

.lista-vazia{max-width:52ch}
.lista-vazia p + p{margin-top:.6rem}
.lista-vazia-acoes{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem;justify-content:center}

/* O botao da ficha, quando o titulo JA esta na lista: o mesmo botao,
   dizendo em qual dos dois estados esta. */
.hero-lista{margin:0}
#bt-lista.na-lista{
  background:var(--azul-vidro);border-color:var(--azul-linha);color:var(--azul-forte);
}

@media (max-width:640px){
  .lista-item{grid-template-columns:auto 1fr;gap:.8rem}
  .lista-acoes{grid-column:1 / -1;justify-content:flex-start}
  .lista-acoes .botao{flex:1;justify-content:center}
}

/* Na TV a linha inteira cresce e o anel aparece: a pessoa esta a tres
   metros, e um contorno de 1px nao se ve dai. */
html.tv .lista-item{padding:1.1rem}
html.tv .lista-capa{width:84px}
/* O ANEL VAI NO BOTAO, E NAO NA LINHA.
   Antes a linha inteira acendia no :focus-within: com dois botoes
   dentro dela, a tela dizia "voce esta nesta linha" e nao dizia em
   QUAL dos dois - entao apertar OK era um chute entre assistir e
   tirar da lista. A linha continua se destacando, de leve, para nao
   perder a referencia de onde a seta esta. */
html.tv .lista-item:focus-within{border-color:var(--borda);background:var(--fundo3)}
html.tv .lista-acoes .botao{padding:.7rem 1.3rem;font-size:.9rem}
html.tv .lista-acoes .botao:focus{
  outline:0;
  box-shadow:0 0 0 .2vw var(--texto);
  transform:scale(1.04);
}
/* E o botao de tirar fica claro quando esta em foco: cinza sobre cinza
   nao se ve a tres metros. */
html.tv .lista-tirar .botao:focus{background:var(--erro);border-color:var(--erro);color:#fff}

/* =====================================================================
   DESCOBRIR - uma pergunta por tela
   ---------------------------------------------------------------------
   SEIS TELAS EM VEZ DE UM PAINEL, por causa do controle remoto: num
   painel de filtros cada resposta e um alvo pequeno entre outros vinte;
   aqui sao tres alvos grandes, e responder e uma seta e um OK.
   ===================================================================== */
/* UMA COISA SO NA TELA, E ELA GRANDE.
   A tela antiga tinha tudo centralizado e do mesmo peso - pergunta,
   apoio, opcoes e rodape com tamanhos parecidos -, e quando nada manda,
   nada e bonito. Aqui a pergunta e o maior texto do site, alinhada a
   esquerda como se le, e o resto se organiza embaixo dela. */
/* ---- O FUNDO: o acervo, bem apagado --------------------------------
   A tela pergunta sobre filmes e nao mostrava nenhum. Aqui eles voltam
   como TEXTURA - opacidade baixa, desfoque e um veu escuro por cima.
   Tem de dar para sentir que ha um acervo atras da pergunta, e nao
   para reconhecer os titulos: cartaz legivel vira concorrente do
   texto, e o texto e o assunto. */
.descobrir-fundo{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--preto);
}
.descobrir-fundo-grade{
  position:absolute;inset:-8% -6%;
  display:grid;grid-template-columns:repeat(6,1fr);gap:1.2vw;
  transform:rotate(-8deg) scale(1.15);
  /* VISIVEL, E NAO ADIVINHADO. A .13 com desfoque de 2px o fundo virava
     uma mancha cinza: a pessoa via que tinha alguma coisa ali e nao via
     o que era. A .30, com meio pixel de desfoque, da para reconhecer que
     sao cartazes - e o veu abaixo e quem cuida de manter a letra
     legivel, em vez de apagar a imagem inteira. */
  opacity:.30;filter:blur(.5px) saturate(.9);
}
@media (max-width:720px){
  .descobrir-fundo-grade{grid-template-columns:repeat(3,1fr)}
}
.descobrir-fundo-grade img{
  width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:6px;
}
/* O VEU E QUEM GARANTE A LEITURA. Sem ele, "sutil" depende da cor de
   cada cartaz - um poster claro no meio da grade estouraria atras da
   letra. Com ele, o piso e sempre escuro e o que varia e so a
   insinuacao. */
/* O VEU E QUEM ESCOLHE ONDE O FUNDO APARECE.
   Ele e forte embaixo do texto (esquerda, onde ficam pergunta, apoio e
   opcoes) e afrouxa para a direita e para os cantos, que e onde nao ha
   letra nenhuma. Assim o acervo aparece de verdade sem nunca disputar
   com a palavra - "escurecer tudo por igual" era o que fazia o fundo
   sumir. */
.descobrir-fundo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(75% 62% at 26% 44%,rgba(8,9,12,.93) 0%,rgba(8,9,12,.80) 55%,rgba(8,9,12,.55) 100%),
    linear-gradient(0deg,var(--preto) 2%,rgba(8,9,12,.45) 40%,rgba(8,9,12,.25) 100%);
}
/* Na TV o desfoque e caro e o fundo e enfeite: fica so a opacidade. */
html.tv .descobrir-fundo-grade{filter:none;opacity:.24}

/* O conteudo sobe acima do fundo. */
.descobrir{position:relative;z-index:1}

/* ---- AS FAIXAS: o que muda de tamanho e so o meio -------------------
   As seis perguntas tem alturas diferentes - tres cartoes numa, doze
   generos noutra - e a tela escorregava a cada resposta: o titulo
   subia, o rodape descia, os botoes trocavam de lugar debaixo do dedo
   (e debaixo do foco, na TV, que e pior: a seta passa a ir para onde
   ninguem espera).

   Quatro faixas de grade com altura reservada resolvem: o topo e a
   pergunta tem lugar fixo, as respostas ficam na faixa que estica, e o
   rodape mora colado na base. Trocar de pergunta passa a ser trocar o
   miolo - e nao remontar a tela. */
.descobrir-passo{
  position:relative;
  max-width:56rem;margin:0 auto;
  padding-left:2.2rem;
}
.descobrir-miolo{
  width:100%;
  display:grid;
  /* minmax(0,1fr) E OBRIGATORIO: a coluna "auto" de uma grade cresce
     ate o max-content do que esta dentro, e a trilha (que agora e uma
     fita de uma linha so) tem max-content grande. Sem isto, o passo 6
     empurrava a pagina inteira 186px para o lado no celular. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;
  min-height:min(72vh,40rem);
}
/* A altura reservada do topo e a da trilha ja aberta: assim a primeira
   pergunta (que ainda nao tem trilha) nasce na mesma linha das outras,
   em vez de subir e descer quando a primeira resposta aparece. */
/* AS ALTURAS SAO AS DA MAIOR DAS SEIS PERGUNTAS, e nao um numero
   redondo: reservar de menos e deixar a faixa crescer num passo e
   encolher no outro, que e o defeito que isto conserta. Medidas na
   tela, com a trilha aberta e o apoio em duas linhas. */
.descobrir-faixa-topo{min-height:5.05rem}
.descobrir-faixa-pergunta{min-height:11.3rem}
.descobrir-faixa-opcoes{align-content:start;padding-top:.4rem}
/* No celular os tres cartoes viram tres linhas e a faixa quase dobra;
   a pergunta de genero continua curta. Sem piso, o rodape subia 143px
   entre uma pergunta e a outra. */
@media (max-width:720px){
  .descobrir-faixa-opcoes{min-height:23.6rem}
}

/* O PROGRESSO E UMA BARRA, E FICA DE LADO.
   Seis bolinhas no alto disputavam atencao com o titulo e nao diziam
   mais do que "2 de 6" ja diz em palavras. De pe, na margem, ela
   informa sem entrar na conversa. */
.descobrir-trilho{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:9rem;
  border-radius:99px;background:var(--fundo3);overflow:hidden;
}
.descobrir-trilho i{
  display:block;width:100%;background:var(--azul);
  transition:height .35s cubic-bezier(.2,.8,.3,1);
}

.descobrir-conta{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul-forte);font-variant-numeric:tabular-nums;
  margin:0 0 .9rem;font-weight:600;
}

/* A TRILHA DO QUE JA FOI RESPONDIDO.
   Cada pedaco volta para a sua pergunta: mudar a terceira resposta
   deixou de exigir recomecar as seis. */
/* UMA LINHA SO, QUE ROLA DE LADO.
   Envolvendo, a quinta resposta abria uma segunda linha e a tela toda
   descia 38px de uma pergunta para a outra - no celular, sempre. Uma
   fita que rola guarda a altura e cabe qualquer numero de respostas. */
.descobrir-trilha{
  display:flex;flex-wrap:nowrap;gap:.4rem;margin:0 0 1rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  /* A ULTIMA RESPOSTA DESBOTA NA BORDA quando a fita passa da largura:
     cortada em seco ela parece defeito, desbotada ela diz "tem mais,
     arrasta". Quando tudo cabe, o que desbota e o vazio. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
}
.descobrir-trilha::-webkit-scrollbar{display:none}
.descobrir-trilha a{
  display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;white-space:nowrap;
  padding:.28rem .7rem;border-radius:6px;font-size:.82rem;
  background:var(--azul-vidro);border:1px solid var(--azul-linha);
  color:var(--azul-forte);text-decoration:none;
}
.descobrir-trilha a::after{content:"\2715";font-size:.72em;opacity:.75}
.descobrir-trilha a:hover{background:rgba(47,125,251,.26);color:#fff}
.descobrir-trilha a:focus-visible{outline:2px solid var(--azul-forte);outline-offset:2px}

/* A ESPECIFICIDADE AQUI E DE PROPOSITO.
   ".pagina h1" (uma classe + um elemento) vence ".descobrir-pergunta"
   (uma classe so) e devolvia o titulo para 1,7rem - a pergunta grande
   nunca aparecia. Repetir a classe empata em elementos e ganha na
   contagem de classes, sem precisar de !important. */
.descobrir-pergunta.descobrir-pergunta{
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;margin:0;
  letter-spacing:-.02em;text-wrap:balance;max-width:18ch;
}
.descobrir-apoio{color:var(--fraco);margin:.9rem 0 0;max-width:52ch;font-size:1rem}

/* TRES COLUNAS FIXAS, e nao auto-fit: toda pergunta de escolha unica
   tem exatamente tres respostas, e o auto-fit com minimo zero deixava
   as tres empilhadas numa coluna so no meio de uma tela de 1440. */
.descobrir-opcoes{
  display:grid;gap:.9rem;margin:2rem 0 0;
  grid-template-columns:repeat(3,minmax(0,15rem));
  justify-content:start;
}
@media (max-width:720px){
  .descobrir-opcoes{grid-template-columns:1fr;max-width:22rem}
}
.descobrir-opcoes.generos{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-start;max-width:46rem;
}

.descobrir-op{
  display:flex;flex-direction:column;gap:.25rem;justify-content:center;
  padding:1.5rem 1.1rem;border-radius:12px;
  background:var(--fundo2);border:1px solid var(--borda);
  color:var(--texto);text-decoration:none;
  transition:border-color .15s,background .15s,transform .12s;
}
.descobrir-op b{font-size:1.08rem;font-weight:600}
.descobrir-op span{color:var(--fraco);font-size:.84rem}
.descobrir-op:hover{border-color:var(--azul);background:var(--fundo3);transform:translateY(-2px)}
.descobrir-op.on{border-color:var(--azul);background:var(--azul-vidro)}
.descobrir-op:focus-visible{outline:2px solid var(--azul-forte);outline-offset:3px}

/* QUADRADO, e nao pilula: na TV o foco desenha um retangulo em volta,
   e um chip arredondado dentro de uma moldura reta briga com ela. O
   raio e o mesmo dos cartoes de resposta, para as duas telas do
   Descobrir lerem como a mesma coisa. */
.descobrir-chip{
  padding:.62rem 1.15rem;border-radius:8px;
  background:var(--fundo2);border:1px solid var(--borda);
  color:var(--texto);text-decoration:none;font-size:.95rem;font-weight:500;
  transition:border-color .15s,background .15s,color .15s;
}
.descobrir-chip:hover{border-color:var(--apagado)}
.descobrir-chip.on{border-color:var(--azul);background:var(--azul-vidro);color:var(--azul-forte)}
/* Ja ha dois escolhidos: clicar neste troca o mais antigo. Dizer isso
   no proprio botao evita o clique que parece nao ter feito nada. */
.descobrir-chip.troca{opacity:.72}
.descobrir-chip:focus-visible{outline:2px solid var(--azul-forte);outline-offset:3px}

.descobrir-escolhido{margin:1rem 0 0;color:var(--fraco);font-size:.88rem}
.descobrir-escolhido strong{color:var(--texto)}

.descobrir-rodape{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  flex-wrap:wrap;margin-top:2.4rem;
  border-top:1px solid var(--borda);padding-top:1.4rem;
  /* Altura fixa tambem aqui: o recado de "nada combina" tem tres
     palavras a mais que o normal, e sem um piso ele empurrava o rodape
     inteiro para cima - justo na tela em que a pessoa precisa achar o
     "Voltar" no mesmo lugar de sempre. */
  min-height:5.4rem;
}
.descobrir-acoes{display:flex;gap:.7rem;flex-wrap:wrap}

/* A CONTA E O MAIOR NUMERO DA TELA.
   Era uma legenda no rodape, do tamanho de um aviso - e e a unica
   coisa viva aqui: e ela que muda quando voce responde. Ver "181"
   virar "12" e o retorno de cada escolha, e agora da para ver. */
.descobrir-quantos{
  display:flex;align-items:baseline;gap:.5rem;margin:0;
  color:var(--fraco);font-variant-numeric:tabular-nums;
}
.descobrir-quantos strong{
  color:#fff;font-size:2.6rem;font-weight:800;line-height:.9;letter-spacing:-.03em;
}
/* DUAS LINHAS RESERVADAS: "titulos combinam" ocupa uma e "nada combina
   - afrouxe uma resposta" ocupa duas. Sem o piso, o rodape mudava de
   altura exatamente na tela em que a pessoa precisa achar o "Voltar". */
.descobrir-quantos span{font-size:.9rem;max-width:26ch;line-height:1.25;min-height:2.5em}
/* NAO CHAMAR ISTO DE ".vazio": essa classe ja existe no site (linha
   1216) com padding de 5rem, e o rodape do Descobrir crescia 160px so
   na tela do "nada combina". */
.descobrir-quantos.descobrir-zero strong{color:var(--alerta)}
.descobrir-quantos.descobrir-zero span{color:var(--alerta)}

/* =====================================================================
   O RESULTADO: UM POR VEZ

   Doze cartazes ainda sao doze decisoes - e depois de seis perguntas a
   pessoa acabou de dizer que nao queria decidir. Aqui o acervo escolhe,
   mostra um em tela cheia com a arte dele, e pergunta: e esse? A
   decisao vira sim ou nao, que e a facil.

   A grade continua a um clique, para quem gosta de bater o olho. Ela e
   o segundo caminho, e nao o primeiro.
   ===================================================================== */
.descobrir-um{
  position:relative;
  min-height:min(72vh,40rem);
  display:flex;align-items:center;
  margin:-1rem -3vw 0;padding:3rem 3vw;
}
/* A ARTE E FIXA NA JANELA, e nao presa a este bloco.
   Presa ao bloco, ela acabava onde o bloco acabava - e como a pagina e
   mais alta que ele, sobrava uma faixa preta embaixo, sem imagem. Fixa,
   ela cobre a janela inteira em qualquer altura de tela, e nao ha faixa
   nenhuma para sobrar. */
.descobrir-um-arte{position:fixed;inset:0;z-index:0}
.descobrir-um-arte img{width:100%;height:100%;object-fit:cover;display:block}
.descobrir-um-arte::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,9,12,.97) 26%,rgba(8,9,12,.55) 62%,rgba(8,9,12,.25) 100%),
    linear-gradient(0deg,rgba(8,9,12,.85) 2%,transparent 45%);
}
.descobrir-um-corpo{position:relative;z-index:1;max-width:46rem}
.descobrir-um .descobrir-um-corpo h1{
  font-size:clamp(2.2rem,5.4vw,3.8rem);line-height:1.02;letter-spacing:-.025em;
  margin:0 0 .7rem;text-shadow:0 3px 24px rgba(0,0,0,.85);text-wrap:balance;
}
.descobrir-um-meta{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  color:var(--fraco);font-size:.95rem;margin-bottom:1rem;
}
.descobrir-um-sinopse{
  margin:0 0 1.2rem;max-width:52ch;color:#dfe4ec;font-size:1.02rem;line-height:1.6;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* POR QUE ESTE VEIO. Sem isto a lista final podia ter saido de qualquer
   lugar - e as seis perguntas viram enfeite. Os pedacos sao os mesmos
   da trilha, e continuam clicaveis: discordar do motivo e poder
   corrigi-lo na mesma tela. */
.descobrir-porque{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0 0 1.6rem;
  font-size:.85rem;color:var(--apagado);
}
.descobrir-porque span{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}
.descobrir-porque a{
  padding:.24rem .65rem;border-radius:6px;font-size:.82rem;text-decoration:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#dfe4ec;
}
.descobrir-porque a:hover{border-color:var(--azul);color:#fff}
.descobrir-porque a:focus-visible{outline:2px solid var(--azul-forte);outline-offset:2px}

.descobrir-um-acoes{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.6rem}
.descobrir-um-rodape{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.86rem}
.descobrir-um-rodape a{color:var(--fraco);text-decoration:none;border-bottom:1px solid transparent}
.descobrir-um-rodape a:hover{color:var(--texto);border-bottom-color:var(--apagado)}
.descobrir-um-rodape a:focus-visible{outline:2px solid var(--azul-forte);outline-offset:3px}

@media (max-width:720px){
  .descobrir-um{margin-left:-1rem;margin-right:-1rem;padding:2rem 1rem;min-height:auto}
  /* DUAS LINHAS DE TITULO, SEMPRE. No celular um nome comprido dobra e
     todos os botoes desciam 36px de um titulo para o outro - e este e
     um lugar onde a pessoa aperta "Proximo" varias vezes seguidas, com
     o dedo parado no mesmo ponto. */
  .descobrir-um .descobrir-um-corpo h1{
    min-height:2.04em;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
  .descobrir-um-arte::after{
    background:linear-gradient(0deg,rgba(8,9,12,.97) 30%,rgba(8,9,12,.6) 70%,rgba(8,9,12,.4) 100%);
  }
}

/* Na TV tudo cresce, e o par de botoes e o que a seta precisa achar. */
html.tv .descobrir-um .descobrir-um-corpo h1{font-size:3.4rem}
html.tv .descobrir-um-sinopse{font-size:1.25rem;-webkit-line-clamp:3}
html.tv .descobrir-um-acoes .botao{font-size:1.25rem;padding:1rem 2rem}

.descobrir-cabeca{
  display:flex;gap:1.4rem;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:1.2rem;
}
.descobrir-cabeca h1{margin:0}
.descobrir-cabeca-acoes{display:flex;gap:.6rem;flex-wrap:wrap}
.descobrir-nota{margin:0 0 1.2rem;font-size:.85rem}

/* Na TV tudo cresce: alvo grande e o que faz a seta acertar de primeira,
   e o texto tem de ser legivel a tres metros. */
html.tv .descobrir-pergunta.descobrir-pergunta{font-size:3.4rem;max-width:20ch}
html.tv .descobrir-apoio{font-size:1.25rem}
html.tv .descobrir-conta{font-size:1rem}
html.tv .descobrir-trilha a{font-size:1.05rem;padding:.45rem 1rem}
html.tv .descobrir-quantos strong{font-size:4rem}
html.tv .descobrir-quantos span{font-size:1.15rem}
html.tv .descobrir-opcoes{grid-template-columns:repeat(3,minmax(0,17rem));gap:1.2rem}
html.tv .descobrir-op{padding:2rem 1.4rem}
html.tv .descobrir-op b{font-size:1.35rem}
html.tv .descobrir-op span{font-size:1rem}
html.tv .descobrir-chip{padding:.75rem 1.5rem;font-size:1.1rem}
html.tv .descobrir-op:focus,
html.tv .descobrir-chip:focus{
  outline:0;border-color:var(--texto);
  box-shadow:0 0 0 .18vw var(--texto);
  background:var(--fundo3);
}
html.tv .descobrir-quantos{font-size:1.1rem}

/* =====================================================================
   MANDAR OS EPISODIOS DE UMA SERIE
   ---------------------------------------------------------------------
   Dizer a serie ANTES de mandar os arquivos. O acervo deixa de
   adivinhar: cada episodio sobe com o numero da serie no proprio nome, e
   a temporada e o episodio saem do T01E01 que o arquivo ja trazia.
   ===================================================================== */
.enviar-modos{display:flex;gap:.4rem;margin:0 0 1rem;flex-wrap:wrap}
.enviar-modo{
  padding:.55rem 1.1rem;border-radius:8px;
  border:1px solid var(--borda);background:var(--fundo2);color:var(--fraco);
  font-size:.85rem;font-weight:600;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.enviar-modo:hover{border-color:var(--apagado);color:var(--texto)}
.enviar-modo.on{border-color:var(--azul);background:var(--azul-vidro);color:var(--azul-forte)}
.enviar-modo:focus-visible{outline:2px solid var(--azul-forte);outline-offset:2px}

.serie-escolha{
  margin:0 0 1rem;padding:1.1rem 1.2rem;
  border:1px solid var(--borda);border-radius:10px;background:var(--fundo2);
}
.serie-procura label{display:block;font-size:.9rem;margin-bottom:.6rem}
.serie-campo{display:flex;gap:.6rem;flex-wrap:wrap}
.serie-campo input{
  flex:1;min-width:200px;padding:.6rem .8rem;border-radius:8px;
  border:1px solid var(--borda);background:var(--fundo);color:var(--texto);
  font-family:inherit;font-size:.95rem;
}
.serie-campo input:focus{outline:0;border-color:var(--azul)}
.serie-dica{margin:.6rem 0 0;font-size:.85rem;min-height:1.1em}

/* Os achados: capa pequena e nome, porque escolher serie pelo nome sem
   ver a capa erra em toda franquia que ganhou remake. */
.serie-achados{display:grid;gap:.6rem;margin-top:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.serie-achado{
  display:flex;align-items:center;gap:.6rem;text-align:left;
  padding:.5rem;border-radius:8px;cursor:pointer;
  border:1px solid var(--borda);background:var(--fundo);color:var(--texto);
  font-family:inherit;transition:border-color .15s,background .15s;
}
.serie-achado:hover{border-color:var(--azul);background:var(--fundo3)}
.serie-achado:focus-visible{outline:2px solid var(--azul-forte);outline-offset:2px}
.serie-achado img{width:38px;height:57px;border-radius:4px;object-fit:cover;flex:0 0 auto}
.serie-achado .serie-sem-capa{
  width:38px;height:57px;border-radius:4px;flex:0 0 auto;
  background:var(--fundo3);border:1px solid var(--borda);
}
.serie-achado b{font-size:.86rem;line-height:1.25}
.serie-achado .fraco{font-size:.78rem;display:block}

.serie-pronta{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.serie-pronta img{width:44px;height:66px;border-radius:5px;object-fit:cover}
.serie-pronta b{display:block;font-size:1.02rem}
.serie-pronta .fraco{font-size:.85rem}
.serie-pronta .botao{margin-left:auto}

/* O nome final, escrito por extenso. Sem ver o que vai subir, o
   "[tmdbid-...]" pareceria sujeira em vez do que ele e: a garantia de
   que o episodio vai para a serie certa. */
.serie-exemplo{margin:.9rem 0 0;font-size:.84rem}
.serie-exemplo code{
  background:var(--fundo3);border:1px solid var(--borda);border-radius:5px;
  padding:.15rem .45rem;font-size:.8rem;
}

/* =====================================================================
   TROCAR O ARQUIVO DE UM TITULO

   E a unica tela do painel onde uma acao APAGA alguma coisa sem volta.
   Por isso ela e visualmente mais pesada que as vizinhas: o alvo
   escolhido nao e uma linha discreta, e um bloco com borda azul, o
   nome do arquivo por extenso e o tamanho de hoje. Quem vai subir 8 GB
   por cima de outro arquivo precisa ver, sem procurar, QUAL arquivo
   vai deixar de existir.

   O aviso embaixo e cor de alerta e nao de erro de proposito: nada deu
   errado ainda: e so o que vai acontecer.
   ===================================================================== */
.trocar-escolha{
  margin:0 0 1rem;padding:1.1rem 1.2rem;
  border:1px solid var(--borda);border-radius:10px;background:var(--fundo2);
}
.trocar-escolha > div + div{margin-top:1rem}
.trocar-escolha label{display:block;font-size:.9rem;margin-bottom:.6rem}

/* Coluna mais larga que a da escolha de serie: aqui a linha de baixo
   diz ano, tipo E quantos arquivos, e nos 150px do outro picker
   "3 arquivos" quebrava no meio. */
#trocar-achados{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.serie-achado-txt{min-width:0}
.serie-achado-txt b{display:block}

/* A LISTA DE EPISODIOS e uma coluna, e nao uma grade de cartoes: numa
   temporada inteira o que se procura e "E07", e olho corre coluna
   abaixo bem mais rapido do que sobre uma grade. */
.trocar-lista{
  display:flex;flex-direction:column;gap:.4rem;
  max-height:320px;overflow-y:auto;
  padding-right:.2rem;
}
.trocar-item{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;text-align:left;
  width:100%;padding:.55rem .7rem;border-radius:8px;cursor:pointer;
  border:1px solid var(--borda);background:var(--fundo);color:var(--texto);
  font-family:inherit;transition:border-color .15s,background .15s;
}
.trocar-item:hover{border-color:var(--azul);background:var(--fundo3)}
.trocar-item:focus-visible{outline:2px solid var(--azul-forte);outline-offset:2px}
.trocar-item b{font-size:.88rem}
.trocar-item .fraco{font-size:.78rem;margin-left:auto;white-space:nowrap}

/* O ALVO ESCOLHIDO. */
.trocar-alvo{
  margin-top:1rem;padding:.9rem 1rem;border-radius:10px;
  border:1px solid var(--azul-linha);background:var(--azul-vidro);
}
.trocar-atual{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.trocar-quem{flex:1;min-width:220px}
/* O ">" NAO E ENFEITE: sem ele esta regra pega tambem o <b> do tamanho,
   dentro da linha "hoje: 4,2 GB", e o numero salta para outra linha em
   corpo de titulo - a frase que devia ser lida de um golpe vira tres. */
.trocar-quem > b{display:block;font-size:1rem;line-height:1.3}
.trocar-quem .micro{font-size:.78rem;margin-top:.2rem;overflow-wrap:anywhere}
.trocar-quem .micro b{color:var(--texto);font-weight:700}
.trocar-acoes{display:flex;flex-direction:column;gap:.4rem;flex:0 0 auto;max-width:250px}
.trocar-acoes .botao{white-space:normal;text-align:center;line-height:1.3}

.trocar-nota{
  margin:.8rem 0 0;padding-top:.7rem;border-top:1px solid var(--azul-linha);
  font-size:.8rem;line-height:1.45;color:var(--alerta);
}
.trocar-nota b{color:var(--alerta)}

/* JA ACONTECEU: aqui a frase nao avisa mais, ela CONTA. Cor de feito,
   e nao de alerta - ler "7,9 GB → 3,0 GB (4,9 GB a menos)" em amarelo
   de aviso faria a pessoa procurar o problema que nao existe. */
.trocar-nota-feito,.trocar-nota-feito b{color:var(--ok)}
.trocar-nota-feito{border-top-color:rgba(62,207,114,.35)}

@media (max-width:700px){
  .trocar-escolha{padding:.9rem}
  .trocar-lista{max-height:260px}
  .trocar-item .fraco{margin-left:0;width:100%}
  .trocar-acoes{width:100%}
}

html.tv .trocar-item{padding:.75rem .9rem}
html.tv .trocar-item b{font-size:1rem}
html.tv .trocar-lista{max-height:none;overflow:visible}

html.tv .enviar-modo{padding:.7rem 1.3rem;font-size:.95rem}

/* =====================================================================
   RECOMPRIMIR - a tela que muda sozinha

   ELA E DIFERENTE DE TODAS AS OUTRAS DO PAINEL por um motivo so: aqui
   ha coisa acontecendo enquanto se olha. Uma conversao leva duas horas,
   e o que se vem ver e justamente se ela esta andando. Dai o peso
   visual estar todo no cartao do que esta em curso - ele e maior que os
   numeros do alto, tem capa, barra grossa e pulso - e as listas serem
   deliberadamente calmas atras dele.

   O RESTO DA TELA E LISTA, e lista de trinta linhas precisa de tres
   coisas que a versao anterior nao tinha: capa (reconhecer um titulo
   pelo cartaz e instantaneo; ler o nome nao e), numero alinhado a
   direita (para comparar tamanhos batendo o olho na coluna) e paginacao
   (havia 25 linhas e ponto - o 26o maior arquivo do acervo nao existia).
   ===================================================================== */

/* ---- o recado que aparece e some, sem empurrar a tela -------------- */
.recomp-recado{
  margin:0 0 1rem;padding:.7rem 1rem;border-radius:10px;
  background:rgba(62,207,114,.12);border:1px solid rgba(62,207,114,.35);
  color:#a9e9c2;font-size:.86rem;
}
.recomp-recado.ruim{
  background:rgba(239,90,68,.12);border-color:rgba(239,90,68,.4);color:#f5b1a5;
}
.recomp-carregando{color:var(--apagado);font-size:.86rem;padding:2rem 0}
.recomp-guardado{margin:-.4rem 0 1.4rem}

/* ---- A CAPA, do tamanho de uma unha ------------------------------- */
.recomp-capa{
  flex-shrink:0;display:block;width:40px;height:60px;border-radius:5px;
  overflow:hidden;background:var(--fundo3);border:1px solid var(--borda);
}
.recomp-capa img{width:100%;height:100%;object-fit:cover;display:block}

/* =====================================================================
   O CARTAO DO QUE ESTA ACONTECENDO AGORA
   ===================================================================== */
.recomp-vivo{
  display:flex;gap:1.1rem;align-items:flex-start;
  margin:0 0 1.4rem;padding:1.15rem 1.3rem;border-radius:14px;
  background:linear-gradient(180deg,rgba(62,207,114,.10),rgba(62,207,114,.02));
  border:1px solid rgba(62,207,114,.32);
}
.recomp-vivo .recomp-capa{width:62px;height:93px}
.recomp-vivo-miolo{flex:1;min-width:0}
.recomp-vivo-topo{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.recomp-vivo-topo b{font-size:1.06rem;line-height:1.25}
.recomp-arquivo{
  font-size:.76rem;color:var(--apagado);margin:.15rem 0 .8rem;overflow-wrap:anywhere;
}

/* A barra grossa: e a peca principal da tela, e uma tira de 5px nao
   parece coisa que se olha de longe enquanto o jantar esquenta. */
.fila-barra.grande{height:11px;background:rgba(255,255,255,.10)}
.fila-barra.grande i{
  background:linear-gradient(90deg,#2f9e5c,#3ecf72);
  transition:width 1s linear;   /* anda de verdade, sem pular de degrau */
}

.recomp-linha-tempo{
  margin:.55rem 0 0;font-size:.85rem;color:var(--fraco);
  font-variant-numeric:tabular-nums;
}
.recomp-linha-tempo b{color:var(--texto);font-size:1rem}

/* O "?" que explica o "1,4x" sem gastar uma linha da tela com isso. */
.recomp-dica{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-left:.3rem;border-radius:50%;
  background:var(--fundo3);color:var(--apagado);
  font-style:normal;font-size:.66rem;font-weight:700;cursor:help;vertical-align:middle;
}

/* De onde para onde, e com que autoridade. O selo ao lado do numero e
   a parte que importa: "medido no arquivo novo" e "estimativa" sao
   coisas muito diferentes ditas no mesmo lugar. */
.recomp-alvo{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:.75rem 0 0;font-size:.92rem;
}
.recomp-alvo em{font-style:normal;color:var(--apagado)}
.recomp-alvo strong{color:var(--ok);font-size:1.05rem}
.recomp-ganho{margin-left:auto;font-size:.85rem;color:var(--ok);font-weight:600}
.recomp-mudo{margin:.7rem 0 0;font-size:.8rem;color:var(--alerta)}

/* O pulso: verde vivo que respira. Um selo parado "convertendo" ao lado
   de uma barra parada e a propria coisa que esta tela veio consertar. */
.recomp-pulso{animation:recomp-respira 1.8s ease-in-out infinite}
@keyframes recomp-respira{
  0%,100%{opacity:1}
  50%{opacity:.45}
}
@media (prefers-reduced-motion:reduce){
  .recomp-pulso{animation:none}
  .fila-barra.grande i{transition:none}
}

/* Fila cheia e ninguem trabalhando: e a falha silenciosa desta tela.
   A maquina de casa pode estar desligada ha uma semana. */
.recomp-vivo.parado{
  display:block;background:rgba(240,180,41,.07);border-color:rgba(240,180,41,.32);
}
.recomp-vivo.parado b{display:block;font-size:.98rem;margin-bottom:.25rem}
.recomp-vivo.parado span{display:block;font-size:.84rem;color:var(--fraco)}
.recomp-vivo.parado .botao{margin-top:.8rem}

/* =====================================================================
   AS ABAS, A BUSCA E O LOTE
   ===================================================================== */
.recomp-cartao{padding-top:1.2rem}
.recomp-abas{margin-bottom:1rem}
.abas a.com-erro .qtd{background:rgba(239,90,68,.25);color:#f5b1a5}

.recomp-ferramentas{
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:0 0 1rem;
}
.recomp-busca{flex:1;min-width:min(100%,260px)}
.recomp-busca input{width:100%}

/* A barra do lote so existe quando ha algo marcado - um botao
   "recomprimir os marcados" permanentemente apagado seria mais uma
   coisa parada na tela. */
.recomp-lote{
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  padding:.45rem .8rem;border-radius:10px;
  background:var(--azul-vidro);border:1px solid var(--azul-linha);
  font-size:.84rem;
}

.recomp-explica{margin:0 0 1rem;font-size:.84rem;line-height:1.55}

/* =====================================================================
   AS TABELAS
   ===================================================================== */
.recomp-tabela .col-marca{width:34px;text-align:center}
.recomp-tabela .col-titulo{min-width:260px}
/* O flex vai num DIV dentro da celula, e nunca na propria <td>: trocar
   o display de uma celula a tira do desenho da tabela, e as colunas
   deixam de se alinhar entre as linhas. */
.recomp-tit{display:flex;gap:.7rem;align-items:center}
.recomp-tit strong{display:block;line-height:1.3}
.recomp-tabela .micro{font-size:.73rem;margin-top:.12rem;overflow-wrap:anywhere}
/* Tamanho quebrado em duas linhas ("7.21" em cima, "GB" embaixo) e
   ilegivel numa coluna que existe para ser comparada de relance. O
   detalhe embaixo dele continua podendo quebrar. */
.recomp-tabela th.num,.recomp-tabela td.num{white-space:nowrap}
.recomp-tabela td.num .micro{white-space:normal}
.recomp-tabela .forte{font-weight:700}
.recomp-tabela tr.marcada td{background:var(--azul-vidro)}
.recomp-tabela .recomp-acoes{white-space:nowrap;display:flex;gap:.4rem;justify-content:flex-end}
.recomp-motivo{
  margin-top:.3rem;font-size:.76rem;color:#f19a9d;overflow-wrap:anywhere;
}
/* "medindo..." nao e um estado morto: e a maquina de casa trabalhando
   agora. Piscar de leve diz isso sem precisar de uma frase. */
.recomp-tabela .medindo{animation:recomp-respira 2.4s ease-in-out infinite}

/* =====================================================================
   A FILA DE ESPERA - cartoes, e nao linhas de tabela

   Uma tabela de cinco colunas para dizer "3o da fila, 4,2 GB, tirar"
   gastava tres cabecalhos para nada. Em cartao cabe a capa, e a capa e
   o jeito mais rapido de reconhecer um titulo.
   ===================================================================== */
.recomp-espera{display:flex;flex-direction:column;gap:.55rem}
.recomp-item{
  display:flex;align-items:center;gap:.85rem;
  padding:.6rem .85rem;border-radius:11px;
  background:var(--fundo2);border:1px solid var(--borda);
}
.recomp-posicao{
  flex-shrink:0;min-width:2.1rem;text-align:center;
  font-size:.9rem;font-weight:700;color:var(--apagado);
  font-variant-numeric:tabular-nums;
}
.recomp-item-miolo{flex:1;min-width:0}
.recomp-item-miolo strong{display:block;font-size:.94rem;line-height:1.3}
.recomp-item-num{text-align:right;flex-shrink:0}
.recomp-item-num b{display:block;font-size:.92rem;font-variant-numeric:tabular-nums}
.recomp-item-num i{display:block;font-style:normal;font-size:.75rem;margin-top:.1rem}

@media (max-width:700px){
  .recomp-vivo{gap:.8rem;padding:.95rem 1rem}
  .recomp-vivo .recomp-capa{width:48px;height:72px}
  .recomp-alvo{font-size:.85rem}
  .recomp-ganho{margin-left:0;width:100%}
  .recomp-item{flex-wrap:wrap}
  .recomp-item-num{margin-left:auto}
  .recomp-item .botao{width:100%}
  .recomp-tabela .col-titulo{min-width:200px}
}

/* =====================================================================
   A CONFERENCIA

   Esta aba existe por um motivo so, e ele e serio: recomprimir na
   entrada acontece SEM NINGUEM VER. O original fica guardado na maquina
   de casa ate uma linha daqui sair - o conversor pergunta ao acervo
   antes de apagar qualquer original de titulo recomprimido.

   Por isso o video toca AQUI DENTRO e nao num link que abre outra aba:
   conferir e coisa de trinta segundos - pular para o fim, ver se a
   imagem esta inteira, ouvir se o audio esta certo. Mandar a pessoa
   para o player e traze-la de volta transformaria trinta segundos em
   dois minutos e uma tela perdida.
   ===================================================================== */
.abas a.com-pendencia .qtd{background:rgba(240,180,41,.25);color:#f5d99a}

.recomp-conferir{display:flex;flex-direction:column;gap:1.1rem}
.recomp-conf{
  border:1px solid var(--borda);border-radius:13px;
  background:var(--fundo2);padding:1rem 1.1rem;
}
.recomp-conf-topo{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:.85rem}
.recomp-conf-quem{min-width:0;flex:1}
.recomp-conf-quem > strong{display:block;font-size:1rem;line-height:1.3}
.recomp-conf .recomp-alvo{margin-top:.5rem}

/* O video ocupa a largura do cartao e nada mais: o assunto e "a imagem
   esta inteira?", e para isso um retangulo de 16:9 basta. */
.recomp-video{
  width:100%;max-height:46vh;display:block;border-radius:9px;
  background:#000;border:1px solid var(--borda);
}

.recomp-conf-acoes{
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.85rem;
}
.recomp-conf-acoes .botao:last-child{margin-left:auto}
.recomp-fim{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.82rem;color:var(--fraco);
}
.recomp-fim input{width:6.5rem}

/* O bloco da regra da entrada, dentro do formulario dos ajustes.
   Separado por moldura porque ele decide uma coisa de natureza
   diferente das outras: nao "como converter", e "o que nem chega a
   entrar do tamanho que veio". */
.recomp-entrada-ajuste{
  margin:1.4rem 0 .4rem;padding:1rem 1.1rem;border-radius:12px;
  border:1px solid var(--borda);background:rgba(255,255,255,.02);
}

@media (max-width:700px){
  .recomp-conf-acoes .botao:last-child{margin-left:0;width:100%}
  .recomp-video{max-height:38vh}
}

/* =====================================================================
   A FILA DE CADASTRO, COM RELOGIO

   O que faltava nesta tela nao era desenho, era TEMPO. "Convertendo"
   sem numero nenhum e a mesma tela para uma conversao de dois minutos e
   para uma de duas horas - e e essa duvida que faz alguem recarregar a
   pagina de dez em dez segundos procurando sinal de vida.
   ===================================================================== */
.fila-resumo{
  display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;
  margin:0 0 .9rem;padding:.55rem .9rem;border-radius:10px;
  background:var(--fundo2);border:1px solid var(--borda);font-size:.86rem;
}
.fila-resumo b{color:var(--texto);font-variant-numeric:tabular-nums}
.fila-resumo b.erro{color:var(--erro)}
.fila-resumo .fraco{margin-left:auto}

.fila-tempo{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  margin:.4rem 0 0;font-size:.78rem;color:var(--apagado);
  font-variant-numeric:tabular-nums;
}
.fila-vivo{color:var(--ok)}
.fila-vivo b{font-variant-numeric:tabular-nums}
.fila-falta{color:var(--fraco)}
.fila-arq{
  background:var(--fundo3);border-radius:4px;padding:.05rem .3rem;
  font-size:.72rem;overflow-wrap:anywhere;
}

/* A mesma informacao na barrinha que segue a pessoa por todo o painel. */
.fila-detalhe{
  margin:.3rem 0 0;font-size:.75rem;color:var(--apagado);
  font-variant-numeric:tabular-nums;
}

@media (max-width:700px){
  .fila-resumo .fraco{margin-left:0;width:100%}
}