/* Leitor de QR Code compartilhado — estilo do overlay criado por
 * static/js/qr-scan.js.
 *
 * Vive em arquivo próprio porque os DOIS lugares que usam o leitor
 * (static/index.html e static/remote.html) NÃO carregam apresentacao.css:
 * a landing tem CSS inline e o controle remoto usa remote.css. Enquanto este
 * bloco morou no apresentacao.css o overlay subia sem estilo nenhum no celular
 * (vídeo sem largura, sem aspect-ratio e sem object-fit).
 *
 * Quem usa o leitor precisa do <link> explícito:
 *   <link rel="stylesheet" href="/static/css/qr-scan.css">
 */

.qrscan-overlay{
  position:fixed; inset:0; z-index:9800;
  display:none; place-items:center;
  background:rgba(5,7,10,.96);
  /* Notch/barra de gestos: o box nunca encosta nas bordas inseguras. */
  padding:
    calc(env(safe-area-inset-top,0px) + 12px)
    calc(env(safe-area-inset-right,0px) + 12px)
    calc(env(safe-area-inset-bottom,0px) + 12px)
    calc(env(safe-area-inset-left,0px) + 12px);
  /* inset:0 num fixed usa o viewport GRANDE no iOS/Android — com a barra de URL
   * visível o rodapé do overlay (o botão FECHAR) fica atrás dela. 100dvh segue
   * a altura real; o vh é o fallback de browser sem suporte. */
  height:100vh;
}
@supports (height:100dvh){
  .qrscan-overlay{ height:100dvh; bottom:auto; }
}

.qrscan-overlay.open{ display:grid; }

.qrscan-box{
  background:#0A0E14; border:1px solid #1F2A37; border-radius:12px;
  padding:1.4rem; width:min(420px,100%);
  /* Nunca maior que a tela: em altura baixa o vídeo encolhe (flex-shrink com
   * min-height baixo) em vez de empurrar o botão FECHAR para fora. */
  max-height:100%;
  display:flex; flex-direction:column; align-items:stretch;
  text-align:center;
  font-family:'JetBrains Mono',ui-monospace,monospace; color:#E6EDF3;
}
.qrscan-box h2{
  flex:0 0 auto;
  color:#7DF9FF; font-size:.9rem; letter-spacing:.08em; margin:0 0 .9rem;
}

/* O stream costuma vir em paisagem (1280x720) e a caixa é retrato: object-fit
 * cover + object-position center preenchem a área toda e cortam simetricamente
 * as laterais — sem barras preta e sem imagem deslocada para um canto. */
.qrscan-box video{
  display:block; width:100%;
  flex:0 1 auto; min-height:120px;
  aspect-ratio:3/4;
  max-height:58vh;
  background:#000; border-radius:8px;
  object-fit:cover; object-position:center;
}
@supports (height:100dvh){
  .qrscan-box video{ max-height:58dvh; }
}

.qrscan-hint{ flex:0 0 auto; font-size:.72rem; opacity:.7; margin:.8rem 0 .2rem; }
.qrscan-erro{ flex:0 0 auto; font-size:.72rem; color:#FF4D6D; margin:.4rem 0 0; min-height:1em; }
.qrscan-fechar{
  flex:0 0 auto; align-self:center;
  margin-top:.9rem; background:transparent; border:1px solid #1F2A37; color:#E6EDF3;
  border-radius:6px; padding:.7rem 1.2rem; font-family:inherit; font-size:.72rem;
  letter-spacing:.08em; cursor:pointer;
  min-height:44px; /* alvo de toque confortável */
  -webkit-tap-highlight-color:transparent;
}
.qrscan-fechar:active{ border-color:#7DF9FF; color:#7DF9FF; }

/* Paisagem / telas baixas: caixa mais larga, vídeo deitado e mais baixo, para
 * que título, dica e botão continuem visíveis sem precisar rolar. */
@media (orientation:landscape) and (max-height:560px){
  .qrscan-box{ width:min(560px,100%); padding:1rem 1.2rem; }
  .qrscan-box h2{ margin-bottom:.5rem; }
  .qrscan-box video{ aspect-ratio:16/9; min-height:96px; max-height:44vh; }
  .qrscan-hint{ margin:.5rem 0 .1rem; }
  .qrscan-fechar{ margin-top:.6rem; }
}
@supports (height:100dvh){
  @media (orientation:landscape) and (max-height:560px){
    .qrscan-box video{ max-height:44dvh; }
  }
}
@media (orientation:portrait) and (max-height:640px){
  .qrscan-box{ padding:1rem 1.1rem; }
  .qrscan-box video{ aspect-ratio:1; max-height:48vh; }
}
@supports (height:100dvh){
  @media (orientation:portrait) and (max-height:640px){
    .qrscan-box video{ max-height:48dvh; }
  }
}