/* ============================================================================
   Painel de TV - Studio Adson Ramon

   Feito para UMA tela: a TV da recepcao, 16:9, vista de 3 a 5 metros. Por isso
   nada de scroll, nada de cursor parado na tela e tipo grande. As medidas saem
   de vw/vh em vez de px fixo, para o mesmo arquivo servir numa TV 4K e no
   monitor de teste sem recalcular nada.

   Tema escuro de proposito, sem alternancia: TV clara numa sala de treino
   ofusca e apaga a foto.
   ========================================================================== */

:root {
  --preto:    #0d0d0f;   /* fundo - quase preto, levemente azulado */
  --grafite:  #17171b;   /* painel */
  --borda:    #26262c;
  --vermelho: #e0312b;   /* a cor da marca: so acao e "ao vivo" */
  --branco:   #f5f5f4;
  --cinza:    #8a8a92;

  --raio: 1.1vw;
  --gap:  1.4vw;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: 'Barlow', 'Segoe UI', Arial, sans-serif;
  overflow: hidden;              /* TV nao rola */
}

/* o cursor some sozinho quando ninguem mexe (classe posta pelo JS) */
body.parado, body.parado * { cursor: none; }

img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------- grade -- */
.tela {
  height: 100%;
  padding: var(--gap);
  display: grid;
  grid-template-columns: 1fr 34%;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "video slides"
    "rodape rodape";
  gap: var(--gap);
}

/* ------------------------------------------------------------- o video --- */
.coluna-video {
  grid-area: video;
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  min-width: 0;
}

.palco {
  position: relative;
  flex: 1;
  background: #000;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.palco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* o [hidden] do navegador perde para o display abaixo: sem esta linha o recado
   de palco vazio fica por cima do video */
.palco-vazio[hidden] { display: none; }
.palco-vazio {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4vh; text-align: center;
}
.palco-vazio img { width: 8vw; opacity: .5; border-radius: 0.6vw; }
.palco-vazio b { font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; font-size: 2vw; letter-spacing: .02em; }
.palco-vazio p { color: var(--cinza); font-size: 1.05vw; line-height: 1.5; margin: 0; }
.palco-vazio code { color: #b9b9c2; background: #ffffff10; padding: .1vw .4vw; border-radius: .3vw; font-size: .95vw; }

/* barra sob o video: o que esta tocando + as playlists + a lupa */
.barra-video {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 4.6vw;
}
.agora { min-width: 0; flex: 1; }

.etiqueta {
  display: inline-block;
  font-size: 0.72vw; font-weight: 800; letter-spacing: .22em;
  color: var(--vermelho);
  margin-bottom: 0.2vh;
}
.agora h1 {
  font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  font-size: 2.3vw; line-height: 1.02; letter-spacing: .01em;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.playlists { display: flex; gap: 0.6vw; flex: 0 0 auto; }
.playlists button {
  font-family: inherit; font-size: 0.86vw; font-weight: 600; letter-spacing: .06em;
  color: var(--cinza);
  background: var(--grafite);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 0.7vh 1.1vw;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.playlists button:hover { color: var(--branco); border-color: #3a3a42; }
.playlists button[aria-pressed="true"] {
  color: #fff; background: var(--vermelho); border-color: var(--vermelho);
}

.btn-busca {
  flex: 0 0 auto;
  width: 3.4vw; height: 3.4vw;
  display: grid; place-items: center;
  color: var(--branco);
  background: var(--grafite);
  border: 1px solid var(--borda);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-busca:hover { background: #22222a; border-color: #3a3a42; }
.btn-busca svg { width: 1.4vw; height: 1.4vw; }

/* ------------------------------------------------------------- os slides -- */
.coluna-slides { grid-area: slides; min-width: 0; }

.slide {
  position: relative;
  height: 100%;
  background: var(--grafite);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}

/* a barra fina no topo mostra quanto falta para virar o slide - quem olha de
   longe percebe que a tela esta viva, sem precisar de animacao gritante */
.slide-progresso { position: absolute; top: 0; left: 0; right: 0; height: 0.3vh; background: #ffffff12; z-index: 3; }
.slide-progresso i { display: block; height: 100%; width: 0; background: var(--vermelho); }

.slide-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease, transform 9s linear;
  transform: scale(1.06);
}
.slide-foto.dentro { opacity: 1; transform: scale(1); }
/* o [hidden] perde para o position/inset acima - sem isto, a foto do slide
   anterior fica por baixo do video */
.slide-foto[hidden] { display: none; }
/* video de fundo nao leva o zoom lento da foto: ele ja tem movimento proprio,
   e os dois juntos embrulham quem olha */
video.slide-foto { transition: opacity .8s ease; transform: none; }
video.slide-foto.dentro { transform: none; }

.slide-texto {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6vh 1.8vw 2.8vh;
  background: linear-gradient(to top, #0d0d0fee 12%, #0d0d0fcc 55%, transparent);
  z-index: 2;
}
.slide-etiqueta {
  display: inline-block;
  font-size: 0.74vw; font-weight: 800; letter-spacing: .22em;
  color: var(--vermelho);
  margin-bottom: 0.6vh;
}
.slide-texto h2 {
  font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  font-size: 3vw; line-height: .98; letter-spacing: .01em;
  margin: 0 0 0.8vh;
  text-wrap: balance;
}
.slide-texto p {
  font-size: 1.15vw; line-height: 1.45; color: #d6d6da;
  margin: 0; max-width: 30ch;
}

/* slide so de recado: sem foto, o texto sobe e ganha o espaco todo */
.slide.sem-foto .slide-texto {
  top: 0; display: flex; flex-direction: column; justify-content: center;
  background: none;
  padding: 2.6vh 1.8vw;
}
.slide.sem-foto .slide-texto h2 { font-size: 3.6vw; }
.slide.sem-foto .slide-texto p { font-size: 1.3vw; max-width: 26ch; }

.slide-pontos {
  position: absolute; right: 1.2vw; top: 1.6vh;
  display: flex; gap: 0.35vw; z-index: 3;
}
.slide-pontos i {
  width: 0.45vw; height: 0.45vw; border-radius: 50%;
  background: #ffffff40;
}
.slide-pontos i.ativo { background: var(--vermelho); }

/* --------------------------------------------------------------- rodape -- */
.rodape {
  grid-area: rodape;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.4vh;
}
.marca { display: flex; align-items: center; gap: 0.9vw; }
.marca img { width: 3.1vw; border-radius: 0.5vw; }
.marca b {
  display: block;
  font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  font-size: 1.5vw; letter-spacing: .04em; line-height: 1;
}
.marca span { display: block; font-size: 0.82vw; color: var(--cinza); letter-spacing: .06em; }

/* O canto direito junta os QR dos canais e o relogio: quem olha de longe le a
   hora, quem passa perto aponta a camera. Os QR sao SVG e moram no proprio
   projeto - a TV nao depende de internet para desenhar. O simbolo no meio de
   cada um come modulos do codigo, por isso os dois sao gerados com correcao de
   erro alta (ver Scripts/gera-qr.js). */
.canto { display: flex; align-items: center; gap: 1.8vw; }
/* O vao entre os dois e de proposito: colados, a camera do celular pega os
   dois no mesmo quadro e fica sem saber qual ler. */
.qrs { display: flex; align-items: center; gap: 2.6vw; }
.qr-chamada {
  margin: 0; width: 6.2vw; text-align: right;
  font-size: 0.72vw; line-height: 1.25; color: var(--cinza);
  letter-spacing: .06em; text-transform: uppercase;
}
.qr { text-align: center; line-height: 1; }
.qr img {
  display: block; width: 4.4vw; height: 4.4vw;
  background: #fff; padding: 0.3vw; border-radius: 0.4vw;
}
.qr span {
  display: block; margin-top: 0.4vh;
  font-size: 0.68vw; color: var(--cinza);
  letter-spacing: .06em; text-transform: uppercase;
}

/* A hora cresce ate a altura do bloco do QR ao lado e para ai: os dois
   terminam na mesma linha e o rodape nao engorda. */
.relogio { text-align: right; }
.relogio time {
  display: block;
  font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  font-size: 4.25vw; line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.relogio span { display: block; font-size: 0.86vw; color: var(--cinza); letter-spacing: .08em; text-transform: uppercase; }

/* --------------------------------------------------------------- busca --- */
/* o [hidden] do navegador perde para qualquer classe que defina display:
   sem esta linha a busca nasce aberta em cima da TV */
.busca[hidden] { display: none; }

.busca {
  position: fixed; inset: 0; z-index: 50;
  background: #06060899;
  backdrop-filter: blur(6px);
  display: grid; place-items: start center;
  padding: 8vh 2vw;
}
.busca-caixa {
  width: min(62vw, 1180px);
  background: var(--grafite);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 2.4vh 1.8vw 2.8vh;
}
.busca-caixa header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6vh; }
.busca-caixa h2 {
  font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  font-size: 1.9vw; margin: 0; letter-spacing: .02em;
}
.fechar {
  width: 2.6vw; height: 2.6vw; border-radius: 999px;
  background: #ffffff10; border: 1px solid var(--borda); color: var(--branco);
  font-size: 1vw; cursor: pointer;
}
.fechar:hover { background: #ffffff1c; }

#formBusca { display: flex; gap: 0.8vw; }
#campoBusca {
  flex: 1;
  font-family: inherit; font-size: 1.15vw;
  color: var(--branco); background: #0f0f12;
  border: 1px solid var(--borda); border-radius: 0.6vw;
  padding: 1.3vh 1vw;
}
#campoBusca::placeholder { color: #5f5f68; }
#campoBusca:focus, .playlists button:focus-visible, .btn-busca:focus-visible, .fechar:focus-visible {
  outline: 2px solid var(--vermelho); outline-offset: 2px;
}
#formBusca button {
  font-family: inherit; font-size: 0.95vw; font-weight: 800; letter-spacing: .1em;
  color: #fff; background: var(--vermelho);
  border: 0; border-radius: 0.6vw; padding: 0 1.8vw; cursor: pointer;
}

.busca-aviso {
  margin: 1.6vh 0 0; padding: 1.4vh 1.2vw;
  background: #e0312b1a; border: 1px solid #e0312b40; border-radius: 0.6vw;
  color: #f0c9c7; font-size: 0.95vw; line-height: 1.5;
}

.busca-resultados {
  margin-top: 1.8vh;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1vw;
}
.resultado { background: #0f0f12; border: 1px solid var(--borda); border-radius: 0.7vw; overflow: hidden; cursor: pointer; text-align: left; padding: 0; color: inherit; font: inherit; }
.resultado:hover { border-color: #3a3a42; }
.resultado img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.resultado b { display: block; padding: 1.2vh 0.9vw 0.4vh; font-size: 0.95vw; line-height: 1.3; font-weight: 600; }
.resultado span { display: block; padding: 0 0.9vw 1.2vh; font-size: 0.8vw; color: var(--cinza); }

@media (prefers-reduced-motion: reduce) {
  .slide-foto, .slide-progresso i { transition: none; }
}

/* Monitor pequeno ou celular (so para conferir o layout fora da TV): a coluna
   de slides vai para baixo do video em vez de espremer as duas. */
@media (max-aspect-ratio: 1/1), (max-width: 900px) {
  .tela {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "video" "slides" "rodape";
  }
  .coluna-slides { height: 40vh; }
  .agora h1, .slide-texto h2 { font-size: 5vw; }
  .etiqueta, .slide-etiqueta { font-size: 2.6vw; }
  .slide-texto p { font-size: 3.6vw; max-width: none; }
  .playlists button, .relogio span, .marca span { font-size: 2.6vw; }
  .relogio time { font-size: 11vw; }
  .qr img { width: 11vw; height: 11vw; }
  .qr span { font-size: 1.9vw; }
  .qr-chamada { width: 13vw; font-size: 1.9vw; }
  .marca b { font-size: 4.4vw; }
  .busca-caixa { width: 92vw; }
  .busca-resultados { grid-template-columns: 1fr; }
  #campoBusca, #formBusca button, .busca-caixa h2 { font-size: 4vw; }
}

/* ==========================================================================
   Paineis de configuracao e cronometro

   Os dois usam a mesma moldura da busca (.sobre) - sao a mesma coisa para quem
   olha: uma caixa que abre por cima da TV e fecha no Esc.
   ========================================================================== */

.btn-icone {
  flex: 0 0 auto;
  width: 3.4vw; height: 3.4vw;
  display: grid; place-items: center;
  color: var(--branco);
  background: var(--grafite);
  border: 1px solid var(--borda);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-icone:hover { background: #22222a; border-color: #3a3a42; }
/* O atalho para o Gestor fica mais apagado que o cronometro e a busca: ele e
   para quem trabalha aqui, nao para quem esta assistindo. */
.btn-icone.discreto { opacity: .4; }
.btn-icone.discreto:hover { opacity: 1; }
/* Som ligado acende o botao: de longe da para ver se a TV esta muda sem
   precisar prestar atencao no risquinho do icone. */
.btn-icone.ligado { background: var(--vermelho); border-color: var(--vermelho); }
.btn-icone.ligado:hover { background: #c9241f; border-color: #c9241f; }
.btn-icone:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.btn-icone svg { width: 1.4vw; height: 1.4vw; }

/* --------------------------------------------------------- moldura comum - */
.sobre[hidden] { display: none; }
.sobre {
  position: fixed; inset: 0; z-index: 50;
  background: #06060899;
  backdrop-filter: blur(6px);
  display: grid; place-items: start center;
  padding: 7vh 2vw;
  overflow-y: auto;
}
.sobre-caixa {
  width: min(56vw, 1020px);
  background: var(--grafite);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 2.4vh 1.8vw 2.6vh;
}
.sobre-caixa header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1vh; }
.sobre-caixa h2 {
  font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  font-size: 1.9vw; margin: 0; letter-spacing: .02em;
}
.sobre-ajuda { color: var(--cinza); font-size: .95vw; line-height: 1.5; margin: 0 0 2vh; }

.lista-campos { display: grid; gap: 1vh; margin-bottom: 2.2vh; }
.campo-playlist { display: grid; grid-template-columns: 9vw 1fr; gap: .8vw; align-items: center; }
.campo-playlist span {
  font-size: .8vw; font-weight: 800; letter-spacing: .14em; color: var(--cinza);
}

.linha-campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1vw; }
.linha-campos.quatro { grid-template-columns: repeat(4, 1fr); }
.linha-campos label, .campo-playlist {
  font-size: .82vw; font-weight: 600; letter-spacing: .1em; color: var(--cinza);
  text-transform: uppercase;
}
.linha-campos label { display: grid; gap: .6vh; }
.linha-campos small { text-transform: none; letter-spacing: 0; font-weight: 400; color: #5f5f68; }

.sobre input {
  font-family: 'Barlow', sans-serif; font-size: 1.05vw; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--branco); background: #0f0f12;
  border: 1px solid var(--borda); border-radius: .5vw;
  padding: 1vh .9vw;
  width: 100%;
}
.sobre input::placeholder { color: #5f5f68; }
.sobre input:focus { outline: 2px solid var(--vermelho); outline-offset: 2px; }

.sobre-aviso {
  margin: 1.8vh 0 0; padding: 1.2vh 1vw;
  border-radius: .5vw; font-size: .92vw; line-height: 1.5;
  background: #1f7a3a1a; border: 1px solid #1f7a3a55; color: #a7e0bd;
}
.sobre-aviso.ruim { background: #e0312b1a; border-color: #e0312b40; color: #f0c9c7; }

.sobre-acoes { display: flex; align-items: center; gap: .9vw; margin-top: 2.4vh; }
.bt-principal, .bt-vazado, .bt-texto {
  font-family: 'Barlow', sans-serif; font-weight: 800; letter-spacing: .1em;
  border-radius: .5vw; cursor: pointer; border: 1px solid transparent;
}
.bt-principal { font-size: .95vw; color: #fff; background: var(--vermelho); padding: 1.3vh 1.8vw; }
.bt-vazado { font-size: .9vw; color: var(--branco); background: transparent; border-color: var(--borda); padding: 1.3vh 1.4vw; }
.bt-vazado:hover { border-color: #3a3a42; background: #ffffff0a; }
.bt-texto { font-size: .85vw; font-weight: 600; letter-spacing: .04em; color: var(--cinza); background: none; padding: 1.3vh .6vw; }
.bt-texto:hover { color: var(--branco); }

.atalhos-crono { display: flex; gap: .6vw; margin-top: 2vh; flex-wrap: wrap; }
.atalhos-crono button {
  font-family: 'Barlow', sans-serif; font-size: .85vw; font-weight: 600;
  color: var(--cinza); background: #0f0f12;
  border: 1px solid var(--borda); border-radius: 999px;
  padding: .8vh 1.1vw; cursor: pointer;
}
.atalhos-crono button:hover { color: var(--branco); border-color: #3a3a42; }

/* ------------------------------------------------------------ cronometro - */
/* Tela cheia de proposito: quem esta na serie precisa ler o numero do outro
   lado da sala, e nao procurar um relogio pequeno num canto. O video continua
   tocando atras - o som do ambiente nao para junto com a vista. */
.crono[hidden] { display: none; }
.crono {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2vh;
  background: #0d0d0f;
  transition: background .4s ease;
}
.crono.exercicio { background: #14110f; }
.crono.descanso  { background: #0c1116; }

.crono-fase {
  font-family: 'Barlow', sans-serif;
  font-size: 2vw; font-weight: 800; letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--cinza);
}
.crono.exercicio .crono-fase { color: var(--vermelho); }
.crono.descanso  .crono-fase { color: #6aa9d8; }

.crono-numero {
  font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  /* O maior que cabe deixando respiro: o contador vai ate 600, entao tres
     digitos ainda tem que caber na largura da TV. */
  font-size: 58vh; line-height: .82; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
}
.crono.acabando .crono-numero { color: var(--vermelho); }

.crono-series { font-size: 1.8vw; color: var(--cinza); letter-spacing: .06em; }

.crono-barra { width: 52vw; max-width: 900px; height: .5vh; background: #ffffff14; border-radius: 999px; overflow: hidden; margin-top: 1.4vh; }
.crono-barra i { display: block; height: 100%; width: 0; background: var(--vermelho); }
.crono.descanso .crono-barra i { background: #6aa9d8; }

.crono-acoes { display: flex; gap: 1vw; margin-top: 3vh; }

.crono-fim .crono-numero { font-size: 18vh; }

@media (max-aspect-ratio: 1/1), (max-width: 900px) {
  .btn-icone { width: 11vw; height: 11vw; }
  .btn-icone svg { width: 5vw; height: 5vw; }
  .sobre-caixa { width: 92vw; }
  .sobre-caixa h2 { font-size: 6vw; }
  .sobre-ajuda, .sobre-aviso { font-size: 3.4vw; }
  .linha-campos, .linha-campos.quatro { grid-template-columns: 1fr 1fr; }
  .campo-playlist { grid-template-columns: 1fr; gap: .4vh; }
  .campo-playlist span, .linha-campos label { font-size: 3vw; }
  .sobre input { font-size: 4vw; }
  .bt-principal, .bt-vazado, .bt-texto, .atalhos-crono button { font-size: 3.4vw; }
  .sobre-acoes { flex-wrap: wrap; }
  .crono-fase { font-size: 5vw; }
  .crono-numero { font-size: 34vh; }
  .crono-series { font-size: 5vw; }
  .crono-barra { width: 86vw; }
}


/* ------------------------------------------------- editor de slides ------ */
.sobre-secao {
  font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  font-size: 1.3vw; letter-spacing: .06em;
  color: var(--branco);
  margin: 3vh 0 .8vh;
  padding-top: 2vh;
  border-top: 1px solid var(--borda);
}
.sobre-secao.primeira { margin-top: .6vh; padding-top: 0; border-top: 0; }

.lista-slides { display: grid; gap: 1.2vh; }

.slide-edit {
  background: #0f0f12;
  border: 1px solid var(--borda);
  border-radius: .6vw;
  padding: 1.4vh 1vw 1.6vh;
  display: grid; gap: 1vh;
}
.slide-edit-topo { display: flex; align-items: center; justify-content: space-between; }
.slide-edit-topo b {
  font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  font-size: 1.1vw; letter-spacing: .08em; color: var(--cinza);
}
.slide-edit-acoes { display: flex; gap: .4vw; }
.slide-edit-acoes button {
  width: 2vw; height: 2vw; display: grid; place-items: center;
  font-family: 'Barlow', sans-serif; font-size: .95vw; line-height: 1;
  color: var(--cinza); background: transparent;
  border: 1px solid var(--borda); border-radius: .4vw; cursor: pointer;
}
.slide-edit-acoes button:hover { color: var(--branco); border-color: #3a3a42; }
.slide-edit-acoes .tirar:hover { color: #fff; background: var(--vermelho); border-color: var(--vermelho); }

.slide-edit label { display: grid; gap: .5vh; font-size: .78vw; font-weight: 600; letter-spacing: .12em; color: var(--cinza); text-transform: uppercase; }
.slide-edit textarea {
  font-family: 'Barlow', sans-serif; font-size: 1vw; font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.45;
  color: var(--branco); background: #0b0b0e;
  border: 1px solid var(--borda); border-radius: .5vw;
  padding: 1vh .9vw; width: 100%; resize: vertical; min-height: 7vh;
}
.slide-edit textarea:focus { outline: 2px solid var(--vermelho); outline-offset: 2px; }

/* a foto: caminho digitado OU escolhida do computador (encolhida aqui mesmo) */
.campo-foto { display: grid; grid-template-columns: 5vw 1fr auto auto; gap: .6vw; align-items: center; }
.campo-foto .previa {
  width: 5vw; height: 2.9vw; object-fit: cover;
  border-radius: .4vw; background: #0b0b0e; border: 1px solid var(--borda);
}
/* sem foto nao e imagem quebrada: e um espaco marcado, de traco */
.campo-foto .previa.vazia {
  opacity: 1;
  border-style: dashed;
  border-color: #33333c;
  background: repeating-linear-gradient(45deg, #101014 0 6px, #0b0b0e 6px 12px);
}
.campo-foto .bt-vazado, .campo-foto .bt-texto { padding: .9vh .9vw; font-size: .8vw; white-space: nowrap; }

.bt-largo { width: 100%; margin-top: 1.2vh; justify-content: center; }

@media (max-aspect-ratio: 1/1), (max-width: 900px) {
  .sobre-secao { font-size: 5vw; }
  .slide-edit-topo b { font-size: 4vw; }
  .slide-edit-acoes button { width: 9vw; height: 9vw; font-size: 4vw; }
  .slide-edit label { font-size: 3vw; }
  .slide-edit textarea { font-size: 4vw; }
  .campo-foto { grid-template-columns: 1fr; }
  .campo-foto .previa { width: 100%; height: 22vw; }
  .campo-foto .bt-vazado, .campo-foto .bt-texto { font-size: 3.4vw; }
}

/* video do estudio: mesmo palco do YouTube, tocado do proprio disco */
.palco video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;      /* video em pe nao e esticado */
  background: #000;
  border: 0;
}