/*
 * 50_player.css — ONDA C (vídeo).
 *
 * NÃO PRECISA DE @import: o layout usa `stylesheet_link_tag :app`, e no
 * Propshaft isso emite um <link> para CADA folha de app/assets/stylesheets, em
 * ordem alfabética. O NÚMERO no nome do arquivo É a ordem da cascata — este
 * entra depois de 10_componentes e antes de 90_impressao, que é onde ele deve
 * estar. Conferido com `curl` na tela do admin.
 *
 * Sem framework de utilitário e sem bundler: CSS variables + BEM, como a stack
 * manda. As variáveis de marca são as da ONDA D (§15.1); cada uma entra aqui
 * com FALLBACK, para que esta folha funcione sozinha enquanto o design system
 * não chega — e continue certa depois, sem edição.
 *
 * Tudo é pensado para o aparelho do motorista: tela pequena, sol na cara, uma
 * mão no volante da carreta parada. Alvo de toque nunca menor que 44 px.
 */

.player {
  --player-fundo: var(--cor-fundo-elevada, #12151c);
  --player-frente: var(--cor-contraste, #f5f7fa);
  --player-marca: var(--cor-marca, #4f6bff);
  --player-tenue: var(--cor-tenue, rgba(245, 247, 250, 0.16));

  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--player-fundo);
  border-radius: 0.75rem;
  overflow: hidden;
}

.player__palco {
  position: relative;
  background: #000;
  /* O retrato de celular é tratado, não esmagado (a mesma regra do ffmpeg):
     o vídeo se ajusta à caixa sem cortar nem distorcer. */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Marca d'água com o CPF. Dissuasão social, custo zero — e ISTO NÃO É DRM:
   quem grava a tela grava o próprio CPF junto, e só. */
.player__marca {
  position: absolute;
  top: 12%;
  left: 8%;
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  user-select: none;
  transition: top 1.2s ease, left 1.2s ease;
}

.player__carregando {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--player-frente);
  background: rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
}

.player__aviso {
  margin: 0;
  padding: 0.6rem 0.9rem;
  background: var(--cor-descanso, #b7791f);
  color: #1b1200;
  font-size: 0.9rem;
  line-height: 1.35;
}

.player__controles {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem 0.9rem;
  color: var(--player-frente);
}

.player__botao {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--player-tenue);
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.player__botao:hover { background: var(--player-tenue); }
.player__botao:focus-visible { outline: 2px solid var(--player-marca); outline-offset: 2px; }

.player__tempo {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* A BARRA É MOSTRADOR, NÃO CONTROLE.
   Sem `cursor: pointer`, sem clique, sem arrastar: não existe scrubber aqui —
   e é essa ausência que faz "assistir 40 minutos" exigir 40 minutos. */
.player__barra {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--player-tenue);
  overflow: hidden;
  cursor: default;
}

.player__preenchido {
  display: block;
  height: 100%;
  width: 0;
  background: var(--player-marca);
  transition: width 0.25s linear;
}

@media (max-width: 30rem) {
  .player__controles { flex-wrap: wrap; }
  .player__barra { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .player__preenchido,
  .player__marca { transition: none; }
}

/* ── Admin: envio e estado do vídeo ──────────────────────────────────────── */
.video-do-admin {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--cor-tenue, rgba(0, 0, 0, 0.12));
  border-radius: 0.75rem;
}

.video-do-admin__titulo { margin: 0; font-size: 1rem; }

.video-do-admin__dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0;
}

.video-do-admin__dados dt { font-size: 0.75rem; opacity: 0.7; margin: 0; }
.video-do-admin__dados dd { margin: 0; font-size: 0.95rem; }

.video-do-admin__ajuda { margin: 0.35rem 0 0; font-size: 0.85rem; opacity: 0.8; }

.video-do-admin__erro {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--cor-reprovado-tenue, rgba(200, 60, 60, 0.12));
  color: var(--cor-reprovado, #c83c3c);
  font-size: 0.9rem;
}

.video-do-admin__vigente { margin: 0.5rem 0 0; font-size: 0.9rem; opacity: 0.85; }

.video-do-admin__repor {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.selo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--cor-tenue, rgba(0, 0, 0, 0.08));
}

.selo--pronto { background: var(--cor-aprovado-tenue, rgba(40, 160, 90, 0.16)); color: var(--cor-aprovado, #28a05a); }
.selo--falhou { background: var(--cor-reprovado-tenue, rgba(200, 60, 60, 0.14)); color: var(--cor-reprovado, #c83c3c); }
.selo--normalizando { background: var(--cor-aguardando-tenue, rgba(79, 107, 255, 0.14)); color: var(--cor-aguardando, #4f6bff); }
.selo--recebendo { opacity: 0.85; }

.envio-de-video { display: flex; flex-direction: column; gap: 0.6rem; }

.envio-de-video__campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.envio-de-video__rotulo { font-weight: 600; }
.envio-de-video__ajuda { margin: 0; font-size: 0.8rem; opacity: 0.7; }

.envio-de-video__progresso {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.envio-de-video__progresso progress { flex: 1; min-width: 10rem; height: 0.75rem; }
.envio-de-video__medida { font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* A mensagem de erro mora AO LADO DO CAMPO, não no topo da página: recusar um
   arquivo depois de 40 minutos de upload, num aviso fora da tela, é a definição
   de tela que desrespeita quem a usa. */
.envio-de-video__erro {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--cor-reprovado-tenue, rgba(200, 60, 60, 0.12));
  color: var(--cor-reprovado, #c83c3c);
  font-size: 0.9rem;
}