/* =========================================================================
   PlayCash — entrada

   Arquivo da frente de ENTRADA: www/js/telas/login.js e www/js/telas/home.js.
   Só o que é exclusivo dessas duas telas. Tudo que serve a mais de uma frente
   mora em css/styles.css e já está pronto: .tela-login, .login-topo,
   .marca-simbolo, .login-titulo, .login-sub, .login-form, .login-bonus,
   .cartao-saldo, .atalho, .linha-acao, .missao, .linha-extrato, .linha-pessoa,
   .barra, .campo, .rotulo, .erro-campo, .btn, .surge, .brilho.

   Carrega DEPOIS de styles.css: no empate de especificidade, o que estiver
   aqui vence. Nenhuma cor escrita à mão — tudo vem de tokens.css.
   ========================================================================= */

/* ============================================================== 1. ENTRADA */

/* A tela de entrada é centrada; com o teclado aberto num aparelho baixo, o
   conteúdo passa da altura da janela e o `center` come o topo (o título e o
   símbolo somem para fora da rolagem). `safe` desliga a centralização exata no
   momento em que ela começaria a esconder alguma coisa. Quem não conhece a
   palavra ignora a linha inteira e continua com o `center` de styles.css. */
.tela-login { justify-content: safe center; }

/* Pílula de gente no app agora. O ponto usa --marca-3, que é a cor de
   ilustração: verde aqui seria decoração, e verde neste app é dinheiro. */
.entrada-vivo {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  color: var(--texto-fraco);
  font-size: var(--txt-nota);
  font-variant-numeric: tabular-nums;
}

.entrada-vivo-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marca-3);
  flex: none;
  animation: bate 2.6s ease-in-out infinite;
}

@keyframes bate {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.72); opacity: .55; }
}

/* O valor que cai ao abrir a conta é o número que decide a tela. `nowrap`
   porque a 320px a linha quebrava entre o "R$" e o número. */
.login-bonus strong {
  font-size: var(--txt-forte);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Prova de que o app é vivo: quem acabou de sacar e quanto saiu na semana. */
.entrada-prova {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borda);
}

.entrada-saques { display: flex; flex-direction: column; }

.entrada-saque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-top: 1px solid var(--borda);
  font-size: var(--txt-nota);
}

.entrada-saque:first-child { border-top: 0; padding-top: 0; }

.entrada-saque-txt {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entrada-saque-ha {
  color: var(--texto-3);
  font-size: var(--txt-mini);
  flex: none;
}

.entrada-pago {
  color: var(--texto-fraco);
  font-size: var(--txt-nota);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ================================================================ 2. INÍCIO */

/* Dentro do cartão de saldo da home a barra é o assunto: ela responde "quando
   eu saco?". Respiro em volta dela, e o botão descolado do texto anterior.
   O seletor é o da home (.inicio-saldo) e não .cartao-saldo puro: o mesmo
   cartão aparece na tela de saque e na de ranking, que são de outras frentes. */
.inicio-saldo .barra { margin-top: var(--e-2); }
.inicio-saldo .btn { margin-top: var(--e-2); }

/* --------------------------------------- 2.1 O que fazer agora (a rodada) */

/* A rodada é a tarefa que mais paga: linha cheia, ícone na cor da tarefa, o
   valor no subtítulo e a seta no fim. É o .atalho da base deitado — em pé, ao
   lado do trilho de vídeos, ele virava um segundo cartão competindo com as
   miniaturas. */
.inicio-acao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-4);
  min-height: var(--toque-min);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cor-atalho, var(--marca));
  border-radius: var(--raio);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform var(--tempo-instante) var(--curva);
}

.inicio-acao:active { transform: scale(.98); }

/* O quadrado colorido do ícone vem da base (.atalho-icone), onde ele tem uma
   margem embaixo que só faz sentido no tile em pé. */
.inicio-acao .atalho-icone { margin-bottom: 0; flex: none; }

.inicio-acao-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.inicio-acao-txt strong { font-size: var(--txt-corpo); }
.inicio-acao > .icone { flex: none; color: var(--texto-3); }

/* ------------------------------------------- 2.2 Trilho de vídeos */

/* Miniaturas que correm de lado. Quem rola é o trilho, nunca a página —
   .rolagem-h da base já esconde a barra e contém a rolagem. A margem negativa
   faz a miniatura da ponta encostar na borda da tela, como em qualquer
   aplicativo de vídeo, sem furar o respiro dos outros blocos. */
.trilho-video {
  gap: var(--e-3);
  margin: 0 calc(var(--pad-tela) * -1);
  padding: 0 var(--pad-tela) var(--e-1);
  scroll-snap-type: x proximity;
  /* Sem isto o encaixe ignora o respiro e cola a primeira miniatura na borda,
     desalinhada do título da seção, que começa no respiro da tela. */
  scroll-padding-left: var(--pad-tela);
}

.video-tile {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  flex: none;
  width: 168px;
  scroll-snap-align: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: transform var(--tempo-instante) var(--curva);
}

.video-tile:active { transform: scale(.97); }
.video-tile.visto { opacity: .74; }

/* A largura vem do trilho, a altura vem da proporção: 16:9 igual à da tela de
   Vídeos, com a duração no mesmo canto de lá. */
.video-tile .video-capa {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Com filme dentro, a capa deixa de ser cor de marca e vira o quadro do vídeo.
   O fundo passa a preto porque é o que sobra nas beiradas de um quadro que não
   preenche o retângulo — o degradê dourado por trás apareceria como moldura. */
.video-capa-com-filme {
  background: #000;
  overflow: hidden;
}

.video-capa-filme {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.video-tile-titulo {
  font-size: var(--txt-nota);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.video-tile-pe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
}

.video-tile-quem {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-tile-premio {
  flex: none;
  color: var(--verde);
  font-size: var(--txt-nota);
  font-variant-numeric: tabular-nums;
}

/* A escada da sequência: um degrau por dia até o bônus travar. Não tem texto
   porque a linha de cima já diz em quantos dias a pessoa está. */
.inicio-seq {
  display: flex;
  gap: var(--e-1);
  margin-top: var(--e-1);
}

.inicio-seq-marca {
  flex: 1;
  height: 6px;
  border-radius: var(--raio-pill);
  background: var(--borda);
}

.inicio-seq-marca.aceso { background: var(--amarelo); }

/* O feed de saques da home é o fundo da tela, não o assunto: linha mais baixa
   que a da tela de ranking, que é dona do .linha-pessoa cheio. */
.linha-pessoa.feed-saque {
  min-height: 52px;
  padding: var(--e-2) var(--e-3);
}

/* A 320px "Jaboatão dos Guararapes, PE" quebra em duas linhas e deixa a lista
   serrilhada. A cidade corta com reticências; o valor e a hora — que são a
   prova de que o feed está andando — ficam inteiros na coluna da direita. */
.feed-saque .nota-fraca {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-saque .item-fim { align-items: flex-end; text-align: right; }

/* ============================================================ 3. MOVIMENTO */

@media (prefers-reduced-motion: reduce) {
  .entrada-vivo-ponto { animation: none !important; }
}