/* =====================================================================
   A APARENCIA ESCOLHIDA (Configuracoes > Aparencia) - 18/10/2026

   Esta folha vem DEPOIS do app.css (e do painel.css, no painel) em toda
   pagina: site, TV, celular, painel, tela de entrar, perfis, liberar a
   TV e baixar o app. Ela nao desenha nada sozinha - so traduz o que foi
   escolhido em Aparencia para as pecas que ja existem:

     - as VARIAVEIS (:root, escritas pelo Aparencia.php) mudam numeros e
       cores: cantos, bordas, desfoque, sombra, moldura, cartoes por linha;
     - os ATRIBUTOS do <html> (data-ap-*) mudam ESTILOS inteiros:
         data-ap-bp  botao principal  (degrade | solido | vidro | neon | branco)
         data-ap-bs  botao de apoio   (vidro | solido | contorno | neon)
         data-ap-bt  texto do botao   (maiusculas | normal)
         data-ap-sl  selos            (misto | reto | suave | pilula)
         data-ap-k   cartao de filme  (classico | vidro | neon)
         data-ap-cx  o mesmo estilo, para as caixas
         data-ap-al  onde o estilo das caixas vale (painel entrar instalar modais)
         data-ap-ki  embaixo do cartao escolhido (completo | nome | nada)

   O PADRAO DE CADA UM E O DESENHO DE ANTES: "degrade", "vidro",
   "maiusculas", "misto", "classico", "completo" nao tem regra nenhuma
   aqui. Quem nunca abriu a tela nao ve mudanca.

   O FOCO DA TV GANHA SEMPRE. As regras de botao trazem
   ":not(:focus-visible)": na TV o botao escolhido continua acendendo em
   branco, qualquer que seja o estilo dele parado. E o vidro nunca liga
   na TV (desfoque e a coisa mais cara que um WebView de TV desenha).

   O PAINEL TEM BOTOES PROPRIOS (.pn .botao, painel.css): os estilos de
   botao valem para o site, e nao para ele - "html:not(.pn)".
   ===================================================================== */

/* ===================================================== CANTOS DAS CAIXAS
   Um numero so (--raio-g) para caixas, menus e janelas - em PROPORCAO:
   cada peca continua mais ou menos redonda que as outras, como antes. No
   padrao (14px) as medidas dao as de sempre. */
html[data-ap-al] .bloco,
html[data-ap-al] .modal,
html[data-ap-al] .busca-sugestoes,
html[data-ap-al] .lightbox-caixa{border-radius:var(--raio-g)}
html[data-ap-al] .cartao-login,
html[data-ap-al] .modal-perfil-caixa,
html[data-ap-al] .topo.ass .nav-lista{border-radius:calc(var(--raio-g) * 1.3)}
html[data-ap-al] .modal-pessoa-caixa{border-radius:calc(var(--raio-g) * 1.15)}
html[data-ap-al] .menu-perfil .menu-lista{border-radius:calc(var(--raio-g) * .6)}
html[data-ap-al] .aviso{border-radius:calc(var(--raio-g) * .58)}
/* (A pagina de baixar o app fica de fora dos cantos: ela mede tudo em
   pedacos da largura da tela, e um canto em pixel nao acompanharia.) */

/* ============================================================ SELOS
   "Novo", "Serie", o "T2 · E5" do continuar e os selos do painel. */
html[data-ap-sl="reto"] :is(.badge-novo,.tag-serie,.cartao-ep,.selo),
html[data-ap-sl="suave"] :is(.badge-novo,.tag-serie,.cartao-ep,.selo),
html[data-ap-sl="pilula"] :is(.badge-novo,.tag-serie,.cartao-ep,.selo){border-radius:var(--raio-s)}

/* ===================================================== BOTAO PRINCIPAL
   Assistir, Mais informacoes, Entrar e os botoes cheios do site. */
html:not(.pn)[data-ap-bp="solido"] .botao:where(:not(.secundario,.contorno,.claro,.perigo,.vidro)):not(:focus-visible){
  background:var(--azul);background-image:none;color:var(--azul-texto);border-color:transparent;
  box-shadow:0 6px 16px rgba(var(--azul-rgb),.28);text-shadow:none;
}
html:not(.pn)[data-ap-bp="solido"] .botao:where(:not(.secundario,.contorno,.claro,.perigo,.vidro)):not(:focus-visible):hover{
  background:var(--azul-forte);background-image:none;box-shadow:0 10px 24px rgba(var(--azul-rgb),.38);
}

html:not(.pn)[data-ap-bp="vidro"] .botao:where(:not(.secundario,.contorno,.claro,.perigo,.vidro)):not(:focus-visible){
  background:rgba(var(--azul-rgb),.24);background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));
  color:#fff;border-color:transparent;text-shadow:none;
  box-shadow:inset 0 0 0 var(--bw) rgba(var(--azul-rgb),.6),inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(0,0,0,.35);
}
html:not(.pn)[data-ap-bp="vidro"] .botao:where(:not(.secundario,.contorno,.claro,.perigo,.vidro)):not(:focus-visible):hover{
  background-color:rgba(var(--azul-rgb),.36);
}
html:not(.pn):not(.tv)[data-ap-bp="vidro"] .botao:where(:not(.secundario,.contorno,.claro,.perigo,.vidro)){
  backdrop-filter:blur(var(--ap-desfoque));-webkit-backdrop-filter:blur(var(--ap-desfoque));
}

html:not(.pn)[data-ap-bp="neon"] .botao:where(:not(.secundario,.contorno,.claro,.perigo,.vidro)):not(:focus-visible){
  background:rgba(var(--azul-rgb),.08);background-image:none;color:#fff;border-color:transparent;
  text-shadow:0 0 10px rgba(var(--azul-rgb),.9);
  box-shadow:inset 0 0 0 calc(var(--bw) + .5px) var(--azul-forte),0 0 16px rgba(var(--azul-rgb),.55),inset 0 0 14px rgba(var(--azul-rgb),.22);
}
html:not(.pn)[data-ap-bp="neon"] .botao:where(:not(.secundario,.contorno,.claro,.perigo,.vidro)):not(:focus-visible):hover{
  background:rgba(var(--azul-rgb),.16);
  box-shadow:inset 0 0 0 calc(var(--bw) + .5px) var(--azul-claro),0 0 26px rgba(var(--azul-rgb),.75),inset 0 0 18px rgba(var(--azul-rgb),.3);
}

html:not(.pn)[data-ap-bp="branco"] .botao:where(:not(.secundario,.contorno,.claro,.perigo,.vidro)):not(:focus-visible){
  background:#fff;background-image:none;color:#0b0c0f;border-color:transparent;text-shadow:none;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}
html:not(.pn)[data-ap-bp="branco"] .botao:where(:not(.secundario,.contorno,.claro,.perigo,.vidro)):not(:focus-visible):hover{
  background:#e8e9ed;box-shadow:0 10px 26px rgba(0,0,0,.5);
}
html:not(.pn)[data-ap-bp="branco"] .botao:where(:not(.secundario,.contorno,.claro,.perigo,.vidro)):not(:focus-visible) .ico{color:#0b0c0f}

/* =================================================== BOTAO DE APOIO
   Minha lista, Trailer, Ja assisti - o que fica ao lado do principal,
   quase sempre por cima de uma imagem. O "vidro" e o de hoje; aqui ele
   so ganha o desfoque escolhido. */
html:not(.pn):not(.tv) :is(.botao.secundario,.botao.marca.vidro){
  backdrop-filter:blur(var(--ap-desfoque));-webkit-backdrop-filter:blur(var(--ap-desfoque));
}

html:not(.pn)[data-ap-bs="solido"] :is(.botao.secundario,.botao.marca.vidro):not(:focus-visible){
  background:var(--fundo3);background-image:none;color:var(--texto);border-color:transparent;text-shadow:none;
  box-shadow:inset 0 0 0 var(--bw) var(--borda),0 4px 12px rgba(0,0,0,.3);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html:not(.pn)[data-ap-bs="solido"] :is(.botao.secundario,.botao.marca.vidro):not(:focus-visible):hover{
  background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08));color:#fff;
}

html:not(.pn)[data-ap-bs="contorno"] :is(.botao.secundario,.botao.marca.vidro):not(:focus-visible){
  background:transparent;background-image:none;color:#fff;border-color:transparent;text-shadow:none;
  box-shadow:inset 0 0 0 var(--bw) rgba(255,255,255,.5);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html:not(.pn)[data-ap-bs="contorno"] :is(.botao.secundario,.botao.marca.vidro):not(:focus-visible):hover{
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 var(--bw) #fff;
}

html:not(.pn)[data-ap-bs="neon"] :is(.botao.secundario,.botao.marca.vidro):not(:focus-visible){
  background:rgba(var(--azul-rgb),.06);background-image:none;color:#fff;border-color:transparent;
  text-shadow:0 0 8px rgba(var(--azul-rgb),.8);
  box-shadow:inset 0 0 0 var(--bw) var(--azul-forte),0 0 12px rgba(var(--azul-rgb),.45),inset 0 0 10px rgba(var(--azul-rgb),.16);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html:not(.pn)[data-ap-bs="neon"] :is(.botao.secundario,.botao.marca.vidro):not(:focus-visible):hover{
  background:rgba(var(--azul-rgb),.14);
  box-shadow:inset 0 0 0 var(--bw) var(--azul-claro),0 0 20px rgba(var(--azul-rgb),.65),inset 0 0 14px rgba(var(--azul-rgb),.24);
}

/* ===================================================== TEXTO DO BOTAO */
html:not(.pn)[data-ap-bt="normal"] .botao,
html:not(.pn)[data-ap-bt="normal"] .botao.marca{text-transform:none;letter-spacing:.01em}

/* ===================================================== CARTAO DE FILME */
/* A MOLDURA: um fio por dentro da capa, POR CIMA da imagem. (Um
   box-shadow inset na propria capa ficaria embaixo da foto.) O valor -
   espessura, reflexo e cor - vem pronto do Aparencia.php. */
.cartao .mini::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;
  border-radius:inherit;box-shadow:var(--k-moldura,none);
}

/* A SOMBRA E O BRILHO do cartao aberto, no computador. O brilho e um
   filtro no cartao inteiro: aberto, ele e capa MAIS painel, e so o
   drop-shadow contorna os dois como uma peca so. */
html:not(.tv)[data-ap-k] .cartao:hover .mini,
html:not(.tv)[data-ap-k] .cartao:focus-visible .mini,
html:not(.tv)[data-ap-k] .cartao:hover .cartao-info,
html:not(.tv)[data-ap-k] .cartao:focus-visible .cartao-info{box-shadow:var(--k-sombra)}
html:not(.tv)[data-ap-k] .cartao:hover,
html:not(.tv)[data-ap-k] .cartao:focus-visible{filter:var(--k-brilho-f,none)}

/* NA TV: o contorno do foco (o ::after, que ja abraca capa e painel)
   leva o brilho e a sombra; o cartao cresce o tanto escolhido; os
   cantos do conjunto seguem os do cartao. */
html.tv .cartao:focus::after,
html.tv .cartao:focus-visible::after{
  box-shadow:var(--k-brilho-tv),var(--k-sombra-tv);
  border-radius:calc(var(--raio-k) + 1px);
}
html.tv .cartao:focus,
html.tv .cartao:focus-visible,
html.tv .trilho .cartao:focus,
html.tv .trilho .cartao:focus-visible{transform:scale(var(--tv-zoom,1.14))}
html.tv .cartao:focus .mini,
html.tv .cartao:focus-visible .mini{border-radius:var(--raio-k) var(--raio-k) 0 0}
html.tv .cartao .cartao-info{border-radius:0 0 var(--raio-k) var(--raio-k)}

/* ---- VIDRO: reflexo de luz, etiquetas transluidas, barra que brilha --- */
html[data-ap-k="vidro"] .cartao .mini::after{
  background:linear-gradient(0deg,rgba(6,7,10,.9) 0%,rgba(6,7,10,.3) 40%,transparent 65%);
}
html[data-ap-k="vidro"] .cartao :is(.tag-serie,.cartao-ep){
  background:rgba(10,12,16,.55);border-color:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
html[data-ap-k="vidro"] .cartao .badge-novo{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px rgba(0,0,0,.45)}
html[data-ap-k="vidro"] .cartao .progresso{
  left:.6rem;right:.6rem;bottom:.45rem;height:4px;border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.22);
}
html[data-ap-k="vidro"] .cartao .progresso i{
  border-radius:9px;background:linear-gradient(90deg,var(--azul-claro),var(--azul));
  box-shadow:0 0 8px rgba(var(--azul-rgb),.85);
}
html[data-ap-k="vidro"] .cartao .cartao-info{
  background:linear-gradient(180deg,rgba(32,33,42,.98),rgba(20,21,27,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---- NEON: contorno na cor de destaque, etiquetas que acendem ------- */
html[data-ap-k="neon"] .cartao :is(.tag-serie,.cartao-ep){
  background:rgba(0,0,0,.6);border-color:var(--azul-forte);
  box-shadow:0 0 8px rgba(var(--azul-rgb),.55);
}
html[data-ap-k="neon"] .cartao .progresso i{box-shadow:0 0 8px rgba(var(--azul-rgb),.9)}
html[data-ap-k="neon"] .cartao .cartao-info{box-shadow:inset 0 1px 0 rgba(var(--azul-rgb),.55)}
html.tv[data-ap-k="neon"] .cartao:focus::after,
html.tv[data-ap-k="neon"] .cartao:focus-visible::after{border-color:var(--azul-forte)}

/* ---- O QUE APARECE EMBAIXO DO CARTAO ESCOLHIDO ----------------------- */
.cartao-nome{display:none}
html[data-ap-ki="nome"] .cartao-nome{display:block;margin:0 0 .15rem}
html[data-ap-ki="nome"] .cartao .cartao-meta,
html[data-ap-ki="nome"] .cartao .cartao-generos{display:none}
.cartao-nome b{display:block;font-weight:700;font-size:.86rem;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartao-nome span{display:block;margin-top:.2rem;font-size:.74rem;color:var(--fraco);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.tv .cartao-nome b{font-size:1.15vw}
html.tv .cartao-nome span{font-size:.9vw;margin-top:.25vw}
/* O painel da TV tem altura FIXA (e por ela que o contorno do foco sabe
   onde terminar): so nome e ano pedem bem menos que nota e generos. */
html.tv[data-ap-ki="nome"]{--tv-painel:3.6vw}

html[data-ap-ki="nada"] .cartao .cartao-info{display:none}
html[data-ap-ki="nada"] .cartao:hover .mini,
html[data-ap-ki="nada"] .cartao:focus-visible .mini,
html.tv[data-ap-ki="nada"] .cartao:focus .mini{border-radius:var(--raio-k)}
html.tv[data-ap-ki="nada"]{--tv-painel:0px}

/* ===================================================== AS CAIXAS
   O estilo dos cartoes (vidro, neon) tambem nas caixas que estiverem em
   "Vale para". O classico nao tem regra: e o de hoje. */

/* -- vidro -- */
html[data-ap-cx="vidro"][data-ap-al~="painel"].pn :is(.cartao-admin,.bloco){
  background-image:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border-color:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 55px -20px rgba(0,0,0,.75);
}
html[data-ap-cx="vidro"][data-ap-al~="entrar"] .cartao-login,
html[data-ap-cx="vidro"][data-ap-al~="instalar"] .ins-cartao,
html[data-ap-cx="vidro"][data-ap-al~="modais"] :is(.modal,.modal-pessoa-caixa,.modal-perfil-caixa,.menu-lista,.busca-sugestoes,.topo.ass .nav-lista){
  background-color:rgba(20,21,28,.86);
  background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012));
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 80px -20px rgba(0,0,0,.8);
}
html[data-ap-cx="vidro"][data-ap-al~="modais"].pn :is(.modal-adm-caixa,.pn-menu){
  background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.012));
  border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 40px 100px -20px rgba(0,0,0,.85);
}
/* o desfoque, so fora da TV */
html:not(.tv)[data-ap-cx="vidro"][data-ap-al~="entrar"] .cartao-login,
html:not(.tv)[data-ap-cx="vidro"][data-ap-al~="instalar"] .ins-cartao,
html:not(.tv)[data-ap-cx="vidro"][data-ap-al~="modais"] :is(.modal,.modal-pessoa-caixa,.modal-perfil-caixa,.menu-lista,.busca-sugestoes){
  backdrop-filter:blur(calc(var(--ap-desfoque) * 2));-webkit-backdrop-filter:blur(calc(var(--ap-desfoque) * 2));
}

/* -- neon -- */
html[data-ap-cx="neon"][data-ap-al~="painel"].pn :is(.cartao-admin,.bloco),
html[data-ap-cx="neon"][data-ap-al~="entrar"] .cartao-login,
html[data-ap-cx="neon"][data-ap-al~="instalar"] .ins-cartao,
html[data-ap-cx="neon"][data-ap-al~="modais"] :is(.modal,.modal-pessoa-caixa,.modal-perfil-caixa,.menu-lista,.busca-sugestoes,.topo.ass .nav-lista),
html[data-ap-cx="neon"][data-ap-al~="modais"].pn :is(.modal-adm-caixa,.pn-menu){
  border-color:rgba(var(--azul-rgb),.55);
  box-shadow:0 0 0 1px rgba(var(--azul-rgb),.16),0 0 26px rgba(var(--azul-rgb),.16),inset 0 0 22px rgba(var(--azul-rgb),.05);
}

/* ===================================================== A AMOSTRA
   Na previa ao vivo (admin/previa.php) um cartao e um botao ficam
   "escolhidos" sem ninguem estar com o mouse em cima: a pagina copia as
   regras de :hover e :focus para a classe .amostra-foco. */