DORAMA PLAY V3.5 — LAYOUT COM SIDEBAR (referência: P2ULTRA)

O QUE MUDOU NA HOME (index.php)

1. MENU LATERAL (sidebar), igual ao P2ULTRA
- Logo/nome no topo, navegação abaixo (Início, categorias, Minha
  lista, Painel se for admin/revendedor), cartão de conta no rodapé
  (avatar, status Ativo/Vencido, usuário, vencimento) e botão Sair.
- Em telas pequenas (celular), a sidebar continua escondida e usa o
  menu inferior de sempre — não perde nada.

2. BANNER (hero) reorganizado igual ao P2ULTRA
- Selo FILME/SÉRIE + nota (★) + ano + gêneros, quando cadastrados.
- Título, sinopse (2 linhas).
- Linha com miniatura do pôster + botão branco "Assistir" + botão
  circular de coração (Minha lista) — igual ao print.

3. NOVOS CAMPOS OPCIONAIS NO ADMIN (Admin > Conteúdos > Editar)
- Nota (avaliação): ex. 7.9
- Ano de lançamento: ex. 2024
- Gêneros: ex. Romance, Comédia, Drama
Nenhum é obrigatório — se não preencher, o site simplesmente não
mostra aquele selo (não quebra nada, não aparece "vazio").
- A nota também aparece nos cards do catálogo, no canto onde antes
  ficava a categoria (some a categoria some, mas ainda mostra no
  texto pequeno embaixo do título).

IMPORTANTE
- Pra ficar exatamente como o print, preencha nota/ano/gêneros nos
  conteúdos que você já cadastrou — sem isso, o selo simplesmente
  não aparece (fica só o tipo + categoria, que também é normal).
- Esta mudança de sidebar foi feita só na Home por enquanto. Perfil,
  Minha lista e o player ainda usam o menu de cima antigo. Se
  gostar do resultado, posso estender a sidebar pra essas páginas
  também — é só pedir.

ATUALIZAÇÃO SEM PERDER DADOS
Preserve:
storage/dorama.sqlite
includes/config.php
Envie os arquivos por cima. Não execute install.php de novo.

CORREÇÃO (banner deixou de aparecer totalmente preto)
- Quando a imagem era vertical (pôster), o site estava escondendo
  ela por completo, deixando só o fundo escuro liso — por isso
  sumiu a "vida"/cor do banner.
- Agora, nesse caso, o site mostra a mesma capa só que BEM desfocada
  e escurecida como ambientação atrás (mesma técnica que apps de
  streaming usam), em vez de esconder tudo ou mostrar cortada/feia.
  A capa nítida continua aparecendo na miniatura ao lado do botão
  Assistir. Com um banner largo de verdade, ele aparece nítido igual
  antes — isso só vale pra quando a imagem é vertical/errada.

DETALHE FINAL (fechando com a referência do P2ULTRA)
- Título de cada seção do catálogo agora tem um ícone pequeno antes
  do nome (igual "📁 Novos Filmes" do P2ULTRA).
- Do lado direito de cada seção agora tem "Ver todos →", igual a
  referência.

CORREÇÃO CRÍTICA (conteúdo cortado à direita, "Ver todos" sumindo)
- Bug real de layout: a sidebar é fixa (position:fixed), então ela
  sai do cálculo de largura normal. Mas eu deixei o container
  principal (.main-content) calculando 100% da tela E somando mais
  264px de margem em cima disso — estourava a largura da página em
  264px, empurrando tudo que ficava encostado na direita (como o
  "Ver todos →") pra fora da tela.
- Corrigido: agora o conteúdo principal ocupa exatamente o espaço
  correto ao lado da sidebar, nada fica cortado.

CORREÇÃO IMPORTANTE (a causa real de "não aparece imagem nenhuma")
- Descobri o motivo: você só preenche o campo de CAPA (poster_url)
  ao cadastrar o conteúdo, nunca o campo separado de BANNER. O site
  só tentava mostrar imagem no topo se o campo Banner estivesse
  preenchido — por isso ficava tudo preto quando só tinha capa.
- Agora, se não tiver banner específico, o site usa a própria capa
  automaticamente. E como a capa geralmente é vertical (formato de
  pôster), ele mostra ela INTEIRA, sem esticar, flutuando do lado
  direito do banner, com o fundo desfocado dando cor/ambientação —
  igual o efeito visual que o P2ULTRA tem.
- Se um dia você cadastrar um banner horizontal de verdade (1920x700)
  pra algum conteúdo, ele passa a usar esse banner nítido em tela
  cheia em vez da capa flutuante.

AJUSTE FINO (capa flutuante menor e mais alta, longe da busca)
- Reduzida a largura (30% → 20%) e a altura (82% → 64%) da capa
  flutuante do banner, e subida um pouco, pra não chegar perto da
  barra de busca embaixo.

AJUSTE (largura da área do banner + espaçamento com a busca)
- A caixa inteira do banner estava mais larga que o resto do
  conteúdo (margem lateral de só 1,5%, enquanto a busca e os cards
  usam 5%). Agora o banner usa a mesma margem lateral do resto da
  página — fica mais estreito e alinhado com tudo.
- Removida uma sobreposição negativa que fazia a barra de busca
  subir e encostar no rodapé do banner. Agora tem espaço limpo entre
  os dois.

AJUSTE (banner mais compacto, menos espaço vazio)
- Altura do banner reduzida (590px → 460px no desktop, 540px → 420px
  no celular) e o título/parágrafo ficaram um pouco menores pra
  caber melhor nesse espaço mais enxuto. Menos vazio, mais conteúdo
  visível na tela sem precisar rolar.

AJUSTE (capa flutuante mais estreita)
- Reduzida de novo (20%→14% de largura, 64%→48% de altura), deixando
  mais espaço/protagonismo pro resto do banner.

CORREÇÃO (fiz errado da última vez)
- Da última vez reduzi altura E largura da capa flutuante, mas só
  tinha sido pedido pra mexer na largura. Corrigido: agora a altura
  voltou pro tamanho de antes (64%) e só a largura ficou menor.

AJUSTE (menos espaço vazio em cima e embaixo do banner)
- Altura do banner reduzida de novo (460px → 400px), padding de cima
  e de baixo do conteúdo menor, e menos distância até a barra de
  busca. Menos vazio nas duas pontas.

AJUSTE (banner tinha ficado pequeno demais)
- Fui reduzindo a altura em várias rodadas seguidas e passou do
  ponto. Aumentei de novo (400px → 530px, meio-termo entre o
  original de 590px e o menor de 400px), título um pouco maior
  também.

CORREÇÃO CRÍTICA (imagem vazando pra fora da tela)
- Bug real: a capa flutuante estava vazando pra fora da borda direita
  da tela em vez de ficar contida dentro do banner.
- Adicionei travas de segurança em várias camadas (html, body,
  app-shell, área principal) pra garantir que nada consiga estourar
  a largura da página lateralmente, não importa o tamanho de tela.
- A capa flutuante também ganhou um limite máximo fixo (180px), então
  não cresce descontroladamente em telas grandes.

CORREÇÃO (era a caixa do banner, não a imagem)
- Fiquei várias rodadas mexendo na imagem/poster quando o pedido
  era sobre a CAIXA do banner (o container inteiro) ficar mais
  estreita. Corrigido: margem lateral do banner aumentada de 5%
  para 8% — a caixa toda fica visivelmente mais estreita agora. Não
  toquei em mais nada (nem imagem, nem altura, nem título).

REMOÇÃO DA SIDEBAR (a pedido)
- Voltei pro menu de cima (client-header) como era antes, removendo
  a barra lateral esquerda.
- O cartão de conta (usuário, relógio, vencimento) voltou pra cima
  do banner, do jeito que era antes da sidebar existir.

SIDEBAR DE VOLTA
- Restaurada a barra lateral (igual ao P2ULTRA), com os ajustes de
  tamanho/largura que já tinham sido feitos antes de tirá-la.

CAPA FLUTUANTE REMOVIDA (era isso que "sidebar" queria dizer)
- Descoberto o mal-entendido: "sidebar" era a capa/imagem flutuante
  do lado do título no banner, não o menu lateral esquerdo. Removida.
- O menu lateral esquerdo (navegação) continua normalmente.
- Quando a imagem do banner é vertical, agora só aparece o fundo
  desfocado como ambientação — sem a capa nítida flutuando do lado.

AJUSTE (banner mais estreito + capa flutuante encaixada)
- Margem lateral do banner aumentada (8% → 12%), altura não foi
  tocada (continua 530px).
- Capa flutuante agora encaixa nas bordas do banner (toca em cima,
  embaixo e na direita, sem cantos arredondados nem sombra ali),
  com uma transição suave na borda esquerda pra não ter corte duro
  — em vez de ficar "flutuando" solta como antes.

CORREÇÃO (capa cortando o texto/rosto no topo e embaixo)
- O ajuste anterior esticava a capa até 100% da altura do banner
  cortando a imagem (inclusive o título escrito nela) no topo e no
  rodapé. Corrigido: agora ela usa "imagem inteira" (nunca corta),
  ocupa 88% da altura com uma margem em cima e embaixo, encostada
  na borda direita. Não corta mais nada, seja lá qual for a imagem.

NOVO: EPISÓDIOS DE SÉRIE (igual à referência Reelflix)
- O banco já tinha a coluna pra isso, mas o admin não tinha campo
  pra usar — corrigido.
- Admin > Conteúdos > Editar: novo campo "Série (apenas para
  episódios)" — aparece pra qualquer conteúdo, mas só é obrigatório
  quando o Tipo é "Episódio".
- URL do vídeo deixou de ser obrigatória pro tipo "Série" (ela vira
  só a capa/pasta; quem tem vídeo são os episódios).
- watch.php agora mostra, do lado do player, o título, sinopse e uma
  grade numerada com todos os episódios da série (agrupados por
  temporada se tiver mais de uma) — igual ao print que você mandou.
  Clicar num número troca de episódio na hora.
- Abrir uma série diretamente (sem escolher episódio) agora manda
  pro primeiro episódio automaticamente.

COMO CADASTRAR
1. Crie o conteúdo com Tipo = Série (capa e banner, sem vídeo).
2. Crie cada episódio com Tipo = Episódio, escolha a Série no campo
   novo, preencha Temporada/Episódio e a URL do vídeo.
3. Na Home aparece só o card da Série. Ao assistir, o player mostra
   a grade de episódios do lado.

PAINEL DE FILMES SEM EPISÓDIOS (preenchendo o espaço vazio)
- Antes, filme sem descrição deixava aquele espaço do lado do vídeo
  praticamente vazio.
- Agora mostra: pôster pequeno, selos (Filme/Série, nota, ano,
  gênero — só os que estiverem preenchidos), título, sinopse (se
  tiver), botão de Minha Lista, e uma grade de "Conteúdos
  relacionados" da mesma categoria.

AJUSTE (fundo do login muito grande/estranho)
- A imagem de fundo do login agora aparece desfocada e escurecida,
  como ambientação — não mais nítida e dominando a tela. Funciona
  bem com qualquer imagem que você colocar em Admin > Aparência.

LOGO OFICIAL + MELHORIAS NO LOGIN
- Empacotei a logo que você mandou dentro do próprio site
  (assets/brand-logo.png) — não precisa hospedar em lugar nenhum,
  já aparece sozinha no login e na sidebar.
- Se você preencher "Logo do site" em Admin > Aparência, essa
  imagem sua tem prioridade sobre a logo empacotada.
- Login: barra colorida no topo do card, marca d'água gigante e
  bem sutil da logo atrás do card, subtítulo "Bem-vindo de volta a
  [nome do site]", campos com destaque colorido ao focar, botão com
  sombra mais forte no hover.

AJUSTE (logo quadrada ficando pequena)
- A logo que você colocou é quadrada (ícone + texto embaixo), mas o
  espaço reservado era pensado pra logo larga/retangular — por isso
  ela ficava pequena. Aumentei a altura permitida na sidebar (44px
  → 64px) e no login (64px → 110px), então agora ela aparece bem
  maior nos dois lugares.

LOGO COM BRILHO SUTIL + TROCA AUTOMÁTICA DE EPISÓDIO
- Logo (sidebar e login) ganhou uma sombra/brilho sutil na cor da
  marca atrás dela, pra destacar mais.
- Quando o vídeo de um episódio termina, se existir um próximo
  episódio, aparece um aviso "Próximo episódio em 6s" no canto do
  player com botão pra assistir agora ou cancelar — se não cancelar,
  troca sozinho.

LOGO DE VOLTA COMO PADRÃO (com opção de trocar)
- A logo empacotada voltou a aparecer sozinha no login e na sidebar
  (sem precisar configurar nada). Se você preencher "Logo do site"
  em Admin > Aparência, essa sua tem prioridade.
- Login: logo centralizada.
- Sidebar: logo centralizada no espaço reservado, encaixada.

MOBILE: MENU DE BAIXO NÃO ESCONDE MAIS CONTEÚDO
- Aumentei o espaço reservado no fim da página (105px → 130px) e
  adicionei um degradê suave que aparece atrás do menu flutuante de
  baixo — assim, mesmo quando algum card fica perto do menu, some
  suavemente em vez de ficar cortado feio embaixo dele.

MOBILE: CAPA NO TOPO + VÍDEO CENTRALIZADO
- No celular, quando a imagem é vertical, agora mostra uma versão
  pequena e centralizada no topo do banner, em vez de sumir
  completamente deixando espaço vazio.
- Vídeo do player agora fica centralizado (estava desalinhado pra
  esquerda em telas estreitas).
- Marca d'água (usuário • IP) movida do rodapé pro topo do vídeo,
  pra não bater mais em cima dos controles de play/tela cheia no
  celular.

REVENDEDOR: EDITAR CONTA + VENCIMENTO OPCIONAL
- Admin > Revendedores agora tem botão "Editar" em cada linha —
  permite mudar nome, usuário e WhatsApp.
- Novidade: revendedor/subrevendedor agora PODE ter vencimento
  (antes era sempre permanente, sem opção). No formulário de editar,
  escolha "Sem vencimento (permanente)" ou "Definir vencimento" e
  marque a data/hora. Se não definir nada, continua permanente como
  sempre foi.
- O revendedor também vê seu próprio vencimento (ou "Conta
  permanente") no cartão do painel dele.
- Sobre o "Continuar assistindo" não aparecer: não achei nenhum
  bloqueio no código pra revendedor — a função já funciona igual
  pra qualquer conta que acessa o catálogo (../index.php) e assiste
  algo por uns 15s. Se continuar sem aparecer depois de testar assim,
  me avisa que investigo mais a fundo.

VENCIMENTO JÁ NA CRIAÇÃO DO REVENDEDOR
- Agora o formulário "Criar revendedor ou subrevendedor" já tem a
  opção de vencimento (Sem vencimento / Definir vencimento), não
  precisa mais criar e depois editar pra isso.

CENTRALIZAÇÃO DO VÍDEO (correção mais robusta)
- Troquei pra um jeito mais direto e confiável de centralizar: agora
  a margem automática está no próprio elemento de vídeo, não só no
  container ao redor — funciona independente do layout (com ou sem
  painel de episódios do lado).

O BUG DE VERDADE DA CENTRALIZAÇÃO (achado)
- Não era o vídeo, era o container dele. No celular o layout vira
  coluna (vídeo em cima, painel embaixo), mas ficou uma regra de
  alinhamento (align-items:flex-start) herdada do computador que
  faz sentido lá, mas no celular fazia o bloco do vídeo ENCOLHER pro
  tamanho do conteúdo e grudar na esquerda, sobrando espaço vazio
  na direita — isso sim é a causa raiz do "não centralizado".
- Corrigido: no celular agora o bloco do vídeo estica 100% da
  largura disponível, aí a centralização finalmente funciona de
  verdade.

BUSCA MELHORADA
- Agora busca também por sinopse e gêneros, não só título e
  categoria.
- Quando não encontra nada, aparece uma mensagem "Nenhum resultado
  encontrado" em vez de a tela ficar vazia sem explicação.
- Digitação ficou mais suave (não recalcula a cada letra na hora,
  espera um instante parado).

BUSCA IGNORA ACENTOS
- Buscar "sao" agora encontra "São", "voce" encontra "você", etc.
  Maiúscula/minúscula já era ignorado, agora acento também.

REFORÇO DE SEGURANÇA
1. FALHA CORRIGIDA (importante): o install.php não tinha nenhuma
   trava — se ficasse esquecido no servidor depois de instalado,
   qualquer pessoa que achasse esse arquivo conseguia rodar a
   instalação de novo, APAGANDO o banco de dados inteiro e criando
   um admin novo pra ela mesma. Agora ele se bloqueia sozinho assim
   que detecta que o site já está instalado, mesmo que você esqueça
   de apagar o arquivo.
2. Erros do PHP não aparecem mais na tela pro visitante (evita
   vazar caminho de pastas do servidor); continuam sendo registrados
   no log do servidor normalmente.
3. Cabeçalhos de segurança reforçados: Content-Security-Policy (trava
   de onde o navegador pode carregar script/imagem/vídeo) e HSTS
   (força HTTPS quando o site já usa HTTPS).
4. Bloqueado acesso direto a arquivos de backup/log que às vezes
   ficam esquecidos na pasta do site (.zip, .sql, .bak, .log, .env
   etc.) — se alguém tentar baixar isso pela URL, recebe erro 403.

O QUE JÁ EXISTIA (continua valendo)
- Senhas com password_hash, nunca em texto puro.
- Todas as consultas usam PDO preparado (protege contra SQL
  injection).
- Token CSRF em todos os formulários.
- Cookies de sessão HttpOnly + SameSite + Secure (quando em HTTPS).
- Rate limit de tentativas de login.
- Banco de dados (storage/), pasta includes/ e arquivos de
  configuração bloqueados por .htaccess — não dá pra baixar isso
  direto pela URL.
- Links de vídeo assinados e temporários (expiram sozinhos).
- Marca d'água com usuário + IP no player.

SOBRE "PROTEÇÃO DO CÓDIGO-FONTE"
PHP roda inteiro no servidor — o visitante nunca vê o código-fonte
(.php), só o HTML final, então não existe "vazamento" de código a
não ser que o servidor esteja mal configurado (por exemplo, PHP
desligado e o arquivo sendo baixado como texto). O que de fato
importa proteger — e já está protegido — são os arquivos de
configuração, banco de dados e backups, que é exatamente o que os
itens acima cobrem.

RECOMENDAÇÃO FINAL (fora do código, depende de você)
- Apague install.php e diagnostico.php do servidor depois de
  instalar (o install.php agora até se autobloqueia, mas ainda é
  mais seguro remover o arquivo).
- Sempre acesse o painel por HTTPS.
- Troque a senha padrão do admin se ainda não trocou.

WHATSAPP DO REVENDEDOR NA TELA DE LIMITE DE APARELHOS
- A tela "Limite de dispositivos atingido" agora abre o WhatsApp do
  REVENDEDOR do usuário (não mais só o WhatsApp geral do site) —
  já com uma mensagem pronta ("Preciso liberar um aparelho na minha
  conta [usuário]").
- Se o revendedor não tiver WhatsApp cadastrado, cai pro WhatsApp
  geral do site (Admin > Aparência). Se nenhum dos dois existir,
  mostra um aviso pra procurar quem vendeu o acesso (sem link
  quebrado de e-mail).
- Revendedor agora pode cadastrar/editar o PRÓPRIO WhatsApp direto
  no painel dele (seção "Meus dados"), sem depender do admin fazer
  isso por ele.

AJUSTE: SEM FALLBACK PRO WHATSAPP GERAL
- Se o revendedor do usuário não tiver WhatsApp cadastrado, a tela
  de limite de dispositivos NÃO mostra mais o WhatsApp geral do
  site como alternativa — mostra só o aviso pra procurar quem
  vendeu o acesso.

LIMPEZA DE TEXTO ANTIGO
- Removida a frase "O administrador pode liberar os aparelhos em
  Painel Admin..." da tela de limite de dispositivos — não fazia
  mais sentido depois do botão passar a chamar o revendedor
  específico do usuário, não o admin.

WHATSAPP DO SITE ACEITA SÓ O NÚMERO TAMBÉM
- Admin > Aparência > URL do WhatsApp agora aceita tanto a URL
  completa (https://wa.me/...) quanto só o número com DDD e código
  do país (ex: 5511999999999) — o sistema monta o link sozinho.
  O campo de WhatsApp do revendedor já funcionava assim.

TELA DE CONTA VENCIDA/BLOQUEADA — AGORA TEM COMO CONTATAR O VENDEDOR
- Antes essa tela só mostrava um aviso seco, sem nenhuma opção de
  contato.
- Refeita: mostra se a conta está vencida ou bloqueada, e um botão
  que abre o WhatsApp do vendedor específico do usuário — já com
  mensagem pronta ("gostaria de renovar" ou "minha conta foi
  bloqueada, poderia verificar?", dependendo do caso).
- Se o vendedor não tiver WhatsApp cadastrado, mostra aviso pra
  procurar quem vendeu o acesso (mesma regra da tela de limite de
  aparelhos — nunca mostra contato de outro vendedor ou do admin).

RODAPÉ MAIS BONITO
- Links de WhatsApp/Telegram do rodapé agora são pílulas com ícone,
  em vez de texto simples — ganham cor de destaque (verde/azul) ao
  passar o mouse.

RODAPÉ: WHATSAPP RESPEITA O DONO DA CONTA
- O botão de WhatsApp do rodapé agora segue a mesma regra das
  telas de limite de aparelhos/conta vencida: se o usuário tem um
  revendedor, mostra o WhatsApp DESSE revendedor (se ele tiver
  cadastrado) — nunca mais o seu, admin. Só usuários sem revendedor
  (criados direto por você) continuam vendo o WhatsApp geral do site.
