/* PATH: /public/css/utilities.css
   Utilities (NOVO — task 020)
   ---------------------------------------------------------------------------
   Classes utilitárias para substituir padrões de inline style repetidos em
   template literals do public/js/. Criadas a partir da auditoria 360° que
   identificou 20+ ocorrências de "width:100%;height:100%;object-fit:cover"
   e outras repetições.

   Regras:
   - Prefixo "vx-" mantido (mesmo do design system Vitrix).
   - Sempre carregar DEPOIS de app.css e components.css (ordem do index.html).
   - Nomes curtos, semânticos, sem acoplar a uma página específica.
   - NÃO usar "!important" — classes utilitárias simples, sem conflito.
   --------------------------------------------------------------------------- */

/* Preenche 100% do pai (width+height). Útil para img dentro de avatar box. */
.vx-fill-parent{
  width: 100%;
  height: 100%;
}

/* Imagem de avatar: cobre o container e herda o border-radius do pai.
   Substitui "object-fit:cover;border-radius:inherit;" — repetido 13+ vezes
   em avatars de home, inbox, dm, ranking, room, socket toast, wallet-flow. */
.vx-avatar-cover{
  object-fit: cover;
  border-radius: inherit;
}

/* Número grande (valor em R$) dos fluxos de wallet-flow — aparece 3x com
   font-size:44px; font-weight:900; letter-spacing:-.5px. */
.vx-number-big{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -.5px;
}

/* Variante com line-height travado (telas de resumo após operação). */
.vx-number-big--tight{
  line-height: 1;
}

/* Divisor horizontal sutil (hairline) — usado em listas de review do
   wallet-flow ("height:1px;background:rgba(0,0,0,.08)") 4x. */
.vx-hairline{
  height: 1px;
  background: var(--vx-border, rgba(0,0,0,.08));
}

/* Emoji/ícone grande de sucesso (✅/🕒) nas telas de resultado — 3x. */
.vx-big-emoji{
  font-size: 56px;
  line-height: 1;
}

/* Card de review dentro dos fluxos de wallet — "border-radius:18px;
   background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06)" — 4x. */
.vx-review-card{
  border-radius: 18px;
  background: var(--vx-surface, #fff);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}