/* =====================================================================
   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;
  height:var(--marca-altura,34px);
}
.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:32px}
}

/* 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:8px;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 */
.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:12px;padding:.4rem;box-shadow:var(--sombra);
  backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.nav-menu:hover .nav-lista,.nav-menu.aberto .nav-lista{opacity:1;visibility:visible;transform:none}
.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 */
.topo-dir{display:flex;align-items:center;gap:.7rem;margin-left:auto;flex-shrink:0}
.sair{color:var(--fraco);font-size:.84rem}
.sair:hover{color:var(--erro)}

/* ------------------------------------------------------------- destaque */
.destaque{
  position:relative;min-height:80vh;display:flex;align-items:flex-end;
  padding:0 3vw 9vh;margin-bottom:-4vh;
}
.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:.5rem;
  padding:.68rem 1.35rem;border:1px solid transparent;border-radius:8px;
  background:var(--azul);color:#fff;
  font-size:.9rem;font-weight:600;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:10px;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(180deg,#4d9bff 0%,#1e63f5 42%,#0b39c4 100%);
  color:#fff;
  box-shadow:
    /* o reflexo de luz por dentro, no alto */
    inset 0 1px 0 rgba(255,255,255,.55),
    /* o vinco escuro por dentro, embaixo */
    inset 0 -1px 0 rgba(0,0,0,.35),
    /* o brilho que descola o botao do cartaz */
    0 2px 10px rgba(12,58,196,.5),
    0 0 0 1px rgba(89,158,255,.5);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.botao.marca:hover{
  background:linear-gradient(180deg,#68adff 0%,#2f7dfb 42%,#1447d9 100%);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 8px 24px rgba(24,86,230,.6),
    0 0 0 1px rgba(120,180,255,.75);
}
.botao.marca:active{
  transform:translateY(0);
  background:linear-gradient(180deg,#2f7dfb 0%,#1447d9 60%,#0b39c4 100%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 0 0 1px rgba(89,158,255,.45);
}
.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(77,155,255,.22) 0%,rgba(11,57,196,.28) 100%);
  color:#dbe9ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 2px 10px rgba(0,0,0,.35),
    0 0 0 1px rgba(89,158,255,.45);
  backdrop-filter:blur(10px);
}
.botao.marca.vidro:hover{
  background:linear-gradient(180deg,rgba(104,173,255,.34) 0%,rgba(20,71,217,.42) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 8px 22px rgba(0,0,0,.45),
    0 0 0 1px rgba(120,180,255,.7);
}

/* 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:.4rem .8rem;font-size:.8rem;border-radius:7px;gap:.4rem}
.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. */
.cartao:hover,.cartao:focus-visible{
  transform:scale(1.34) translateY(-66px);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 */
.ficha-topo{position:relative;min-height:70vh;display:flex;align-items:flex-end;padding:0 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}
.dado.seed-ok    b{color:var(--ok)}
.dado.seed-fraco b{color:var(--alerta)}
.dado.seed-zero  b{color:var(--erro)}

/* 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)}

/* ------------------------------------------- lista de versoes na ficha */
.bloco-ficha h2 .contagem{
  color:var(--apagado);font-size:.8rem;font-weight:500;margin-left:.4rem;
}
.versoes-lista{display:grid;gap:.8rem}
.versao-item{
  background:var(--fundo2);border:1px solid var(--borda);border-radius:12px;
  padding:1rem 1.1rem;transition:border-color .2s,background .2s;
}
.versao-item:hover{border-color:rgba(255,255,255,.2);background:#1e1e23}
.versao-topo{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.7rem}
.versao-topo strong{font-size:.92rem;font-weight:600;word-break:break-word}
.versao-dados{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.85rem}
.versao-acoes{display:flex;gap:.5rem;flex-wrap:wrap}

/* =======================================================================
   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. */
.pagina{padding:calc(var(--topo-altura) + 2.2rem) 3vw 5rem;width:100%}

/* -------------------------------------------------------- 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}

.resultados-tmdb{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));margin-top:1rem}
/* Serve para <label> (importador) e para <button> (adicionar): por isso
   zera padding/fonte/cor, que o navegador poe sozinho nos botoes. */
.res-tmdb{background:var(--fundo3);border:1px solid var(--borda);border-radius:var(--raio);
  overflow:hidden;cursor:pointer;text-align:center;transition:transform .15s;
  padding:0;width:100%;font-family:inherit;color:inherit;display:block}
.res-tmdb:hover{transform:translateY(-3px)}
.res-tmdb.escolhido{border-color:var(--azul);box-shadow:0 0 0 2px rgba(47,125,251,.4)}
.res-tmdb img{width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--fundo2)}
.res-tmdb span{display:block;padding:.4rem;font-size:.75rem;line-height:1.3}
#previa-poster img{width:120px;border-radius:var(--raio);margin-top:.8rem}

/* 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;
}
.login-pe{
  margin:1.5rem 0 0;text-align:center;
  font-size:.73rem;color:var(--apagado);line-height:1.5;
}
.cartao-login .aviso{margin-bottom:1.2rem}

@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}
#player{width:100%;max-height:82vh;background:#000;display:block}

/* --------------------------------------------------------------- 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}

/* ---------------------------------------------------------- importador */
.item-import{padding:1.1rem 1.2rem}
.import-cabeca{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.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)}
.import-nome{flex:1;min-width:0}
.import-nome strong{font-size:.88rem;word-break:break-word;font-weight:600}
.import-sinais{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.import-sinais .selo a{text-decoration:underline}
.import-corpo{display:grid;gap:1.2rem;grid-template-columns:1fr 320px;align-items:start}
.import-candidatos{
  display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
}
.import-candidatos .res-tmdb{display:block;margin:0}
.import-candidatos .res-tmdb.nenhum{
  display:grid;place-items:center;aspect-ratio:2/3;text-align:center;
  border-style:dashed;color:var(--fraco);font-size:.76rem;padding:.5rem;
}
.import-candidatos .res-tmdb:has(input:checked){
  border-color:var(--azul);box-shadow:0 0 0 2px rgba(47,125,251,.4);
}
.import-campos{grid-template-columns:1fr 1fr;gap:.7rem}
.import-campos label{font-size:.76rem}
.import-campos input{padding:.45rem .6rem;font-size:.84rem}

/* ------------------------------------------------------------- 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{
  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%);
}
.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}
.perfis-rodape .sair{color:var(--fraco);font-size:.88rem}
.perfis-rodape .sair:hover{color:var(--texto)}

/* ---- 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;
  border:1px solid transparent;border-radius:22px;
  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;padding:0;font-size:.88rem;
  transition:width .25s ease,padding .25s ease;
}
.busca-topo:focus-within input,.busca-topo.aberta input{width:200px;padding:.2rem .55rem}
.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:9px;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:12px;
  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:1240px){
  .topo nav a,.nav-botao{padding:.55rem .6rem}
  .topo nav{margin-left:.9rem}
  .busca-topo:focus-within input,.busca-topo.aberta input{width:150px}
}
@media (max-width:640px){
  .topo{gap:1rem;padding:0 4vw}
  .topo nav{display:none}
  .marca::before{width:7px;height:22px;margin-right:.5rem}
  .busca-topo:focus-within input,.busca-topo.aberta input{width:min(46vw,190px)}
  .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);backdrop-filter:blur(4px);
}

/* 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}
.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}
.sug-nota{
  position:absolute;top:.4rem;left:.4rem;
  padding:.1rem .4rem;border-radius:20px;font-size:.68rem;font-weight:800;
  background:rgba(8,9,12,.82);color:var(--ok);backdrop-filter:blur(4px);
}
.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}
}

/* ---- caixa de colar magnet ---------------------------------------- */
.solta-magnet{
  border:2px dashed var(--borda);border-radius:12px;padding:.9rem;
  transition:border-color .18s,background .18s;
}
.solta-magnet.arrastando{border-color:var(--azul-forte);background:rgba(47,125,251,.08)}
.solta-magnet.recebeu{border-color:var(--ok);background:rgba(62,207,114,.08)}
.solta-magnet textarea{margin:0;border:0;background:var(--fundo3)}
.solta-dica{display:flex;align-items:center;gap:.45rem;margin:.7rem 0 0;font-size:.78rem}
.solta-dica .ico{width:15px;height:15px;flex-shrink:0}

/* ---- 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)}

/* ---- contador de downloads ---------------------------------------- */
.contador-dl{
  display:inline-flex;align-items:center;gap:.32rem;
  font-size:.82rem;font-weight:600;color:var(--texto);
}
.contador-dl .ico{width:14px;height:14px;opacity:.6}

/* ---------------------------------------------------- busca: sugestoes
   O que aparece enquanto se digita, vindo do PROPRIO acervo. A lista sai
   por baixo do campo, ancorada nele. */
.busca-topo{position:relative}
.busca-sugestoes{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:90;
  width:min(420px,92vw);max-height:70vh;overflow-y:auto;
  background:rgba(18,19,24,.98);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:.4rem;box-shadow:0 24px 60px rgba(0,0,0,.7);
  backdrop-filter:blur(14px);
}
.sug-grupo{
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--apagado);padding:.6rem .7rem .3rem;
}
.sug-grupo:first-child{padding-top:.3rem}
.sug-item{
  display:flex;align-items:center;gap:.7rem;
  padding:.45rem .7rem;border-radius:8px;color:var(--texto);
}
.sug-item:hover,.sug-item.marcado{background:rgba(255,255,255,.09)}
.sug-item img,.sug-vazio{
  width:34px;height:50px;object-fit:cover;border-radius:4px;
  background:var(--fundo3);flex-shrink:0;
}
.sug-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.sug-txt b{font-size:.87rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-txt i{font-size:.74rem;color:var(--fraco);font-style:normal}
/* pontinho verde = tem link funcionando, a informacao que decide se
   vale a pena clicar */
.sug-ok{width:7px;height:7px;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}

/* --------------------------------------------------- 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}

/* ============================================ 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;
}
.editor-banner{position:relative;height:190px;overflow:hidden;background:#0b0e15}
.editor-banner img{width:100%;height:100%;object-fit:cover;opacity:.55}
.editor-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,19,28,.15) 0%,rgba(16,19,28,.85) 70%,#10131c 100%);
}
.editor-logo{
  position:absolute;left:1.4rem;bottom:1rem;z-index:2;
  max-width:min(280px,45%);max-height:82px;width:auto;height:auto;
  object-fit:contain;opacity:1;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6));
}
.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:1.2rem;padding:0 1.4rem 1.3rem;margin-top:-70px;position:relative;z-index:3}
.editor-poster{
  width:118px;flex-shrink:0;aspect-ratio:2/3;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:100%;object-fit:cover;display:block}
.editor-resumo{flex:1;min-width:0;padding-top:74px}
.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}
.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:-52px}
  .editor-resumo{padding-top:0}
  .editor-poster{width:92px}
}

/* 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}

/* =========================================== arrastar para herdar
   Mandar uma temporada inteira significava escolher o mesmo titulo no
   TMDB dez vezes. Agora acerta-se um e arrastam-se os outros para cima
   dele. */
.dica-arrastar{
  display:flex;gap:.7rem;align-items:flex-start;
  margin:0 0 1rem;padding:.8rem 1rem;border-radius:10px;
  background:rgba(58,142,203,.09);border:1px solid rgba(58,142,203,.22);
  font-size:.86rem;color:var(--apagado);line-height:1.5;
}
.dica-arrastar .ico{width:18px;height:18px;flex-shrink:0;margin-top:.15rem;color:#8fc0e8}
.dica-arrastar b{color:var(--texto);display:block;margin-bottom:.1rem}
.puxador-exemplo{
  display:inline-block;letter-spacing:-.28em;padding-right:.28em;
  color:#8fc0e8;font-weight:800;
}

.import-puxador{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:30px;flex-shrink:0;margin-right:.1rem;
  color:var(--apagado);cursor:grab;border-radius:6px;
  /* Sem isto, arrastar seleciona o texto do cartao junto. */
  user-select:none;
}
.import-puxador:hover{color:#fff;background:rgba(255,255,255,.08)}
.import-puxador:active{cursor:grabbing}

.item-import{transition:border-color .15s ease, box-shadow .15s ease, opacity .15s ease}
.item-import.arrastando{opacity:.45}
/* O destino: o cartao que vai emprestar os dados. */
.item-import.alvo{
  border-color:#3a8ecb;
  box-shadow:0 0 0 2px rgba(58,142,203,.3), 0 8px 22px rgba(58,142,203,.14);
}
/* Quem herdou pisca em verde: sem isto, com dez cartoes na tela, nao da
   para ter certeza de que a copia aconteceu. */
.item-import.herdou{
  border-color:#1e9b45;
  box-shadow:0 0 0 2px rgba(30,155,69,.3);
  animation:herdou-pisca .9s ease;
}
@keyframes herdou-pisca{
  0%  {background:rgba(30,155,69,.16)}
  100%{background:transparent}
}
.herdou-recado{
  flex-basis:100%;margin:.5rem 0 0;font-size:.79rem;color:#7fd39b;
}

/* --------------------------------------------- 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. */
.ondevai{margin:.2rem 0 1.1rem;max-width:700px}
.ondevai summary{cursor:pointer;font-size:.85rem;color:var(--azul)}
.ondevai p{margin:.7rem 0}
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{
  width:100%;height:100%;
  /* "contain" e nao "cover": preencher cortaria a legenda queimada e o
     rosto de quem esta na beira do quadro. */
  object-fit:contain;background:#000;display:block;
}

/* 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}
.assistir.quieto .assistir-palco{cursor:none}
.pl-barra:focus-within{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}
/* 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. */
.botao.grande{padding:.8rem 1.7rem;font-size:.97rem}
.botao.grande .ico{width:19px;height:19px}

/* =====================================================================
   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)}

.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.
   ===================================================================== */
.pl-proximo{
  position:absolute;inset:0;z-index:12;
  display:grid;place-items:center;padding:2rem;
  background:linear-gradient(to top,rgba(6,7,10,.95) 30%,rgba(6,7,10,.72));
  backdrop-filter:blur(3px);
  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:280px minmax(0,1fr);gap:1.5rem;
  align-items:center;max-width:760px;width:100%;
  background:rgba(20,21,27,.9);border:1px solid rgba(255,255,255,.13);
  border-radius:1rem;padding:1.1rem;
  box-shadow:0 26px 70px rgba(0,0,0,.7);
  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;
}
.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}
}

/* =====================================================================
   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}
#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}

@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}
}