/* =========================================================
   MM REPLAYS — área de replays (replays.html)
   Reaproveita os tokens de style.css. Mobile-first.
   ========================================================= */

.page-app{ min-height:100vh; display:flex; flex-direction:column; }
.app-main{ flex:1; padding:calc(var(--header-h) + 32px) 0 64px; }

/* Classes com display explícito (.btn, .pane) vencem o [hidden] do navegador. */
[hidden]{ display:none !important; }

/* --- cartões -------------------------------------------- */

.card{
  background:var(--surface);
  border:1px solid var(--purple-line);
  border-radius:var(--radius-lg);
  padding:26px 22px;
}

.card--login{
  width:min(420px, calc(100% - 40px));
  margin:0 auto;
}

.card__head .mark{ width:32px; height:30px; color:var(--brand-light); }
.card__logo{ display:block; height:64px; width:auto; margin:0 auto; }
.card__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:18px;
  margin-bottom:20px;
  border-bottom:1px solid var(--purple-line);
}

.card__title{
  font-family:var(--font-display);
  font-size:1.4rem;
  margin:0 0 6px;
}

.card__lead{
  color:var(--ink-muted);
  font-size:.92rem;
  margin:0 0 22px;
}

.card--busca{ margin:26px 0 34px; }

/* --- formulários ---------------------------------------- */

.stack{ display:grid; gap:16px; }

.grid-3{ display:grid; gap:16px; margin-bottom:20px; }

.field{ display:grid; gap:7px; }

.field > span{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

.field input,
.field select{
  width:100%;
  padding:13px 14px;
  background:var(--bg-soft);
  border:1px solid var(--purple-line);
  border-radius:var(--radius-md);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
}

.field input::placeholder{ color:var(--ink-dim); }

.field input:focus,
.field select:focus{
  outline:none;
  border-color:var(--purple-bright);
  box-shadow:0 0 0 3px rgba(168,85,247,.16);
}

/* O ícone nativo de date/time nasce preto sobre fundo escuro. */
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.6);
  cursor:pointer;
}

/* Todo o campo é clicável: abre o calendário, o relógio ou a lista. */
.grid-filtros .field,
.grid-filtros .field input,
.grid-filtros .field select{ cursor:pointer; }

.lembrar{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  font-size:.9rem;
  color:var(--ink);
  line-height:1.4;
}
.lembrar input{
  flex:none;
  width:18px; height:18px;
  margin:1px 0 0;
  accent-color:var(--purple-bright);
  cursor:pointer;
}
.lembrar small{
  display:block;
  margin-top:2px;
  font-size:.78rem;
  color:var(--ink-dim);
}

.btn--sm{ padding:9px 16px; font-size:.86rem; }

/* --- filtros -------------------------------------------- */

.grid-filtros{ display:grid; gap:14px; }
.filtros__acoes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.filtros__dica{ margin:12px 0 0; font-size:.8rem; color:var(--ink-dim); }

@media (min-width:720px){
  .grid-filtros{ grid-template-columns:1.2fr 1fr 1fr; }
}

.arena-bar__logo{ height:26px; width:auto; border-radius:6px; }

/* --- lista de vídeos (formato vertical, igual ao Instagram) --- */

.video-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (min-width:720px){ .video-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; } }
@media (min-width:1000px){ .video-grid{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }

.video{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  background:var(--surface);
  border:1px solid var(--purple-line);
  border-radius:var(--radius-md);
}

.video__tela,
.video__player{
  position:relative;
  width:100%;
  aspect-ratio:9 / 16;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--bg-soft);
}
.video__tela{
  display:grid;
  place-items:center;
  padding:0;
  border:none;
  cursor:pointer;
}
.video__player{ display:block; object-fit:contain; background:#000; }

.video__tela img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video__tela .mark{ width:48px; height:45px; color:var(--brand-light); opacity:.45; }

.video__play{
  position:relative;
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(11,8,18,.72);
  border:1px solid rgba(245,242,255,.4);
  transition:background .15s ease;
}
.video__play::after{
  content:"";
  position:absolute; left:20px; top:15px;
  border-style:solid;
  border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #fff;
}
.video__tela:hover .video__play{ background:var(--purple); }
.video__tela--carregando .video__play::after{ display:none; }
.video__tela--carregando .video__play{
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation:girar .8s linear infinite;
}
.video__aviso{ position:relative; padding:0 12px; font-size:.8rem; color:var(--ink-muted); text-align:center; }

.video__info{ display:grid; gap:2px; padding:0 2px; }
.video__info strong{ font-family:var(--font-display); font-size:.98rem; }
.video__info span{ font-size:.8rem; color:var(--ink-muted); }

/* Aviso de que os vídeos são apagados depois do prazo */
.aviso-prazo{
  margin:8px 0 0;
  color:var(--ink-dim);
  font-size:.8rem;
}
.aviso-prazo__icone{
  width:15px; height:15px;
  margin-right:6px;
  fill:var(--purple-bright);
  vertical-align:-3px;
}

/* --- campo de data: DD / MM / ano ---------------------- */

.data-campos{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  background:var(--bg-soft);
  border:1px solid var(--purple-line);
  border-radius:var(--radius-md);
}
.field .data-campos select.data-campo{
  width:auto;
  min-width:58px;
  padding:7px 8px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(168,85,247,.08);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:1rem;
  text-align:center;
  text-align-last:center;
}
.field .data-campos select.data-campo:hover{ border-color:var(--purple-line); }
.data-campo option{ background:var(--surface); color:var(--ink); }
.data-barra{ color:var(--ink-dim); }
.data-ano{ padding:0 4px; color:var(--ink-muted); font-size:1rem; }

/* --- campo de horário: HH : MM, com painel próprio ------ */

.campo-hora{ position:relative; }
.hora-botao{ width:100%; cursor:pointer; font-family:var(--font-body); }
.hora-botao .data-campo{
  display:inline-grid;
  place-items:center;
  min-width:58px;
  padding:7px 8px;
  background:rgba(168,85,247,.08);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:1rem;
}
.hora-botao[aria-expanded="true"]{ border-color:var(--purple-bright); }

/* Duas colunas que rolam, como o relógio do navegador: hora à esquerda, minutos à direita. */
.hora-painel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:20;
  display:grid;
  grid-template-columns:repeat(2, 76px);
  gap:8px;
  padding:10px;
  background:var(--surface);
  border:1px solid var(--purple-bright);
  border-radius:var(--radius-md);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.hora-painel[hidden]{ display:none; }
.hora-painel__titulo{
  margin:0 0 6px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-align:center;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.hora-coluna{
  display:grid;
  gap:3px;
  max-height:230px;
  overflow-y:auto;
  padding:2px;
  border-radius:var(--radius-sm);
  scrollbar-width:thin;
  scrollbar-color:var(--purple-line) transparent;
}
.hora-coluna button{
  padding:8px 0;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  background:var(--bg-soft);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:.95rem;
  cursor:pointer;
}
.hora-coluna button:hover{ border-color:var(--purple-line); }
.hora-coluna button[aria-pressed="true"]{ background:var(--purple); color:#fff; }
/* Depois de escolher a hora, a coluna dos minutos brilha para mostrar o próximo passo. */
.hora-painel--minutos .hora-coluna--minutos{ animation:brilhar 2.4s ease-in-out infinite; }

/* Brilho leve mostrando onde clicar, até a pessoa escolher o dia. */
.data-campo.brilho{ animation:brilhar 2.4s ease-in-out infinite; }
@keyframes brilhar{
  0%, 100%{ box-shadow:0 0 0 0 rgba(168,85,247,0); }
  50%{ box-shadow:0 0 0 2px rgba(168,85,247,.35), 0 0 12px rgba(168,85,247,.35); }
}
@media (prefers-reduced-motion: reduce){ .data-campo.brilho{ animation:none; } }

/* 9:16 (Instagram) ou 16:9 (YouTube) */
.formato{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:3px;
  background:var(--bg-soft);
  border:1px solid var(--purple-line);
  border-radius:var(--radius-sm);
}
.formato__opcao{
  display:grid;
  gap:1px;
  padding:6px 4px;
  border:none;
  border-radius:calc(var(--radius-sm) - 2px);
  background:transparent;
  color:var(--ink-muted);
  font-family:var(--font-body);
  line-height:1.15;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.formato__opcao span{ font-size:.8rem; font-weight:600; }
.formato__opcao small{ font-size:.66rem; opacity:.8; }
.formato__opcao[aria-pressed="true"]{ background:var(--purple); color:#fff; }
.formato__opcao:disabled{ cursor:not-allowed; opacity:.45; }

/* Lance que acabou de ser gravado e ainda está subindo */
.video--chegando{ border-style:dashed; }
.video__tela--chegando{ cursor:default; gap:12px; align-content:center; background:linear-gradient(160deg, var(--bg-soft), var(--surface)); }
.spinner--grande{ width:38px; height:38px; border-width:3px; }
.video__espera{
  margin:0;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:var(--bg-soft);
  color:var(--ink-muted);
  font-size:.82rem;
  text-align:center;
}

.video__baixar{ padding:10px 12px; font-size:.86rem; }
.video__baixar:disabled{ cursor:progress; opacity:.95; transform:none; }

.btn--sucesso{ background:linear-gradient(135deg, #22C55E, #15803D) !important; box-shadow:none !important; color:#fff !important; }
.btn--erro{ background:linear-gradient(135deg, #EF4444, #B91C1C) !important; box-shadow:none !important; color:#fff !important; }

.spinner{
  flex:none;
  width:15px; height:15px;
  border-radius:50%;
  border:2px solid currentColor;
  border-right-color:transparent;
  opacity:.85;
  animation:girar .75s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

.btn-mais{ margin-top:22px; }

/* --- vídeo grande (caixa sobre a tela) ----------------- */

body.com-modal{ overflow:hidden; }

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(5,3,10,.9);
  animation:aparecer .15s ease-out;
}
@keyframes aparecer{ from{ opacity:0; } }

.modal__caixa{
  position:relative;
  display:grid;
  gap:12px;
  width:min(420px, 100%);
  max-height:100%;
  overflow:auto;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--purple-line);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}

.modal__video{
  display:block;
  width:100%;
  height:min(68vh, 640px);
  border-radius:var(--radius-sm);
  background:#000;
  object-fit:contain;
}
.modal__video--deitado{ height:auto; aspect-ratio:16 / 9; }

.modal__fechar{
  position:absolute;
  top:20px; right:20px;
  z-index:2;
  width:40px; height:40px;
  border:1px solid rgba(245,242,255,.35);
  border-radius:50%;
  background:rgba(11,8,18,.7);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
}
.modal__fechar:hover{ background:var(--purple); }

.modal .video__info strong{ font-size:1.1rem; }
.modal .formato__opcao{ padding:9px 6px; }
.modal .formato__opcao span{ font-size:.92rem; }
.modal .formato__opcao small{ font-size:.74rem; }
.modal .video__baixar{ padding:13px 16px; font-size:1rem; }

@media (min-width:720px){
  .modal__caixa{ width:min(460px, 100%); }
  .modal__caixa:has(.modal__video--deitado){ width:min(760px, 100%); }
}

/* --- mensagens ------------------------------------------ */

.msg{
  margin:0;
  padding:12px 14px;
  border-radius:var(--radius-md);
  font-size:.9rem;
  line-height:1.5;
}

.msg--erro{
  background:rgba(220,38,38,.12);
  border:1px solid rgba(248,113,113,.34);
  color:#FCA5A5;
}

.msg--ok{
  background:rgba(34,197,94,.12);
  border:1px solid rgba(74,222,128,.34);
  color:#86EFAC;
}

.msg--vazio{
  background:var(--surface);
  border:1px solid var(--purple-line);
  color:var(--ink-muted);
}

/* --- barra da arena ------------------------------------- */

.arena-bar{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 15px;
  margin-bottom:22px;
  background:var(--surface);
  border:1px solid var(--purple-line);
  border-radius:999px;
  font-size:.86rem;
  color:var(--ink-muted);
}

.arena-bar__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--purple-bright);
  box-shadow:0 0 0 4px rgba(168,85,247,.16);
}

/* --- resultados ----------------------------------------- */

.resultados__contagem{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin:0 0 14px;
}

.replay-grid{ display:grid; gap:12px; }

.replay{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--purple-line);
  border-radius:var(--radius-md);
}

.replay__thumb{
  flex:none;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  background:var(--bg-soft);
  border-radius:var(--radius-sm);
}

.replay__info{
  flex:1;
  min-width:0;
  display:grid;
  gap:3px;
}

.replay__info strong{
  font-family:var(--font-display);
  font-size:1.08rem;
}

.replay__info span{
  font-size:.82rem;
  color:var(--ink-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- rodapé enxuto -------------------------------------- */

.footer--slim{ padding:22px 0; }

/* --- telas maiores -------------------------------------- */

@media (min-width: 720px){
  .grid-3{ grid-template-columns:repeat(3, 1fr); }
  .card{ padding:30px 28px; }
  .app-main{ padding-top:calc(var(--header-h) + 52px); }
}

@media (min-width: 1000px){
  .replay-grid{ grid-template-columns:repeat(2, 1fr); }
}