/*
 * Palco de video. Herda os tokens do sistema, mas mantem fundo escuro: moldura
 * clara em volta de video rouba contraste da imagem, que e o conteudo. A barra
 * usa vidro escuro com a mesma cor de acao do resto do produto.
 */

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--palco);
  color: var(--tinta-no-escuro);
  font: var(--t-corpo);
}

.palco { position: relative; height: 100%; background: #000; }
.palco video { width: 100%; height: 100%; object-fit: contain; display: block; }

.vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e4);
  background: radial-gradient(120% 80% at 50% 38%, #141926 0%, var(--palco) 72%);
  color: var(--tinta-fraca);
}
.vazio svg { width: 56px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: 0.4; }
.vazio p { margin: 0; font: var(--t-corpo); }

.hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: linear-gradient(to top, rgb(0 0 0 / 0.78), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.palco:hover .hud,
.palco:focus-within .hud,
.palco.parado .hud { opacity: 1; transform: none; }

.quem { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.quem strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sutil { color: var(--tinta-fraca); font: var(--t-apoio); }

.pulso { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tinta-fraca); }
.pulso[data-vivo="sim"] { background: var(--vivo); box-shadow: 0 0 0 4px rgb(16 185 129 / 0.2); }

.acoes { display: flex; gap: var(--e2); flex: none; align-items: center; }

.acao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px var(--e3);
  border-radius: var(--raio-pilula);
  border: 1px solid var(--linha-no-escuro);
  background: rgb(22 26 38 / 0.82);
  backdrop-filter: blur(10px);
  color: var(--tinta-no-escuro);
  font: var(--t-apoio);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.acao:hover { background: rgb(40 46 64 / 0.9); border-color: rgb(255 255 255 / 0.2); }
.acao:disabled { opacity: 0.45; cursor: not-allowed; }
.acao:focus-visible { outline: 2px solid var(--marca-clara); outline-offset: 2px; }
.acao svg { width: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acao svg .cheio { fill: currentColor; stroke: none; }

.acao--destaque { background: var(--marca); border-color: transparent; color: #fff; }
.acao--destaque:hover { background: var(--marca-clara); border-color: transparent; }

.acao--perigo { background: rgb(229 72 77 / 0.2); border-color: rgb(229 72 77 / 0.4); color: #ffb3b5; }
.acao--perigo:hover { background: rgb(229 72 77 / 0.3); border-color: rgb(229 72 77 / 0.55); }

.escolha {
  padding: 9px var(--e3);
  border-radius: var(--raio-pilula);
  border: 1px solid var(--linha-no-escuro);
  background: rgb(22 26 38 / 0.82);
  backdrop-filter: blur(10px);
  color: var(--tinta-no-escuro);
  font: var(--t-apoio);
  font-weight: 600;
  cursor: pointer;
}
.escolha:focus-visible { outline: 2px solid var(--marca-clara); outline-offset: 2px; }

/* Volume: a faixa so ocupa espaco quando a pessoa vai mexer nela. */
.volume {
  display: flex;
  align-items: center;
  border-radius: var(--raio-pilula);
  background: rgb(22 26 38 / 0.82);
  border: 1px solid var(--linha-no-escuro);
  backdrop-filter: blur(10px);
}
.volume .acao { background: none; border: none; backdrop-filter: none; }
.volume .acao:hover { background: rgb(255 255 255 / 0.08); }

.faixa {
  width: 0;
  opacity: 0;
  margin: 0;
  appearance: none;
  background: none;
  transition: width 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
}
.volume:hover .faixa,
.volume:focus-within .faixa { width: 84px; opacity: 1; margin: 0 var(--e3) 0 2px; }
.faixa::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--marca-clara) var(--preenchido, 100%), rgb(255 255 255 / 0.2) var(--preenchido, 100%));
}
.faixa::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
}

#icone-som .corte { opacity: 0; }
#icone-som[data-mudo="sim"] .onda { opacity: 0; }
#icone-som[data-mudo="sim"] .corte { opacity: 1; }

.aviso {
  position: absolute;
  left: var(--e4);
  right: var(--e4);
  bottom: 64px;
  margin: 0;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-campo);
  background: rgb(229 72 77 / 0.18);
  border: 1px solid rgb(229 72 77 / 0.38);
  color: #ffc9ca;
  font: var(--t-apoio);
}

@media (max-width: 540px) {
  .acao span { display: none; }
  .acao { padding: 9px 10px; }
}