html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; color: #fff;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; cursor: none; }
.oculto { display: none !important; }

/* Tela do QR Code — unidades vw/vh para valer de 720p a 4K */
.tela-qr { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center;
  justify-content: center; background: #0f1d4a; background: linear-gradient(135deg, #0f1d4a 0%, #1f3fbf 100%); }
.qr-caixa { background: #fff; padding: 2vh; border-radius: 2vh; margin-right: 6vw; box-shadow: 0 2vh 6vh rgba(0,0,0,.35); }
.qr-imagem, .qr-imagem svg { width: 55vh; height: 55vh; display: block; }
.qr-texto { max-width: 42vw; }
.qr-texto h1 { font-size: 5.2vh; line-height: 1.2; margin: 0 0 2vh; font-weight: 700; }
.qr-sub { font-size: 3vh; margin: 0 0 6vh; opacity: .85; }
.qr-manual { font-size: 2.6vh; opacity: .75; line-height: 1.6; margin: 0; }
.qr-manual .codigo { font-family: "Consolas", "DejaVu Sans Mono", monospace; letter-spacing: .15em; font-size: 3.4vh; opacity: 1; }
.qr-cliente { font-size: 2.6vh; text-transform: uppercase; letter-spacing: .12em; opacity: .7; margin: 0 0 2vh; }
.qr-aviso { margin-top: 4vh; background: #b3261e; padding: 1.5vh 2vh; border-radius: 1vh; font-size: 2.6vh; }
@media (orientation: portrait) {
  .tela-qr { flex-direction: column; text-align: center; }
  .qr-caixa { margin: 0 0 5vh; }
  .qr-imagem, .qr-imagem svg { width: 60vw; height: 60vw; }
  .qr-texto { max-width: 85vw; }
  .qr-texto h1 { font-size: 3.6vh; }
}

/* Exibição: duas camadas que se revezam com transição suave */
.palco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; }
.camada { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;
  -webkit-transition: opacity .8s ease; transition: opacity .8s ease; }
.camada.ativa { opacity: 1; }
.camada img, .camada video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.palco.cover .camada img, .palco.cover .camada video { object-fit: cover; }

.carregando { position: absolute; top: 50%; left: 0; right: 0; text-align: center; font-size: 3vh; opacity: .6; }
.dica-tela-cheia { position: absolute; bottom: 4vh; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
  background: rgba(0,0,0,.75); padding: 1.5vh 3vh; border-radius: 4vh; font-size: 2.4vh; }
.sem-conexao { position: absolute; top: 2vh; right: 2vh; width: 1.6vh; height: 1.6vh; border-radius: 50%; background: #e5484d;
  box-shadow: 0 0 0 .4vh rgba(0,0,0,.5); }

/* Ativação: tela com formulário, navegável pelo controle remoto */
body.com-cursor { cursor: auto; }
.tela-ativar { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 5vw;
  background: #0f1d4a; background: linear-gradient(135deg, #0f1d4a 0%, #1f3fbf 100%); }
.tela-ativar h1 { font-size: 6vh; margin: 0 0 2vh; }
.ativar-sub { font-size: 3vh; opacity: .85; margin: 0 0 5vh; }
.ativar-form { display: flex; gap: 2vw; align-items: stretch; }
.ativar-form input { font-size: 6vh; width: 14em; max-width: 60vw; padding: 1.5vh 2vw; text-align: center; letter-spacing: .15em;
  font-family: "Consolas", "DejaVu Sans Mono", monospace; border: .5vh solid transparent; border-radius: 1.5vh; color: #111; background: #fff; }
.ativar-form button { font-size: 4vh; padding: 0 4vw; border: .5vh solid transparent; border-radius: 1.5vh; background: #ffb020; color: #111; font-weight: 700; cursor: pointer; }
.ativar-form input:focus, .ativar-form button:focus { outline: none; border-color: #ffb020; box-shadow: 0 0 0 .8vh rgba(255,176,32,.45); }
.ativar-form button:focus { border-color: #fff; }
.ativar-erro { margin-top: 4vh; background: #b3261e; padding: 1.5vh 3vh; border-radius: 1vh; font-size: 3vh; }
.ativar-rodape { position: absolute; bottom: 4vh; font-size: 2.2vh; opacity: .6; margin: 0; }
.ativar-rodape a { color: #fff; }