/* ==========================================================================
   Hefesto TCG - base compartilhada por todas as páginas
   (logo, ícones, escala de texto, foco visível e campos no celular)
   Incluída depois do <style> de cada página.
   ========================================================================== */

/* Escala de texto: o site usa só estes tamanhos. */
:root {
  --fs-11: 11px;   /* selos, legendas minúsculas */
  --fs-12: 12px;   /* meta, rótulos */
  --fs-13: 13px;   /* texto secundário */
  --fs-14: 14px;   /* texto padrão de interface */
  --fs-16: 16px;   /* texto de leitura, campos */
  --fs-18: 18px;   /* subtítulos */
  --fs-20: 20px;   /* títulos de seção */
  --fs-24: 24px;
  --fs-28: 28px;   /* títulos de página */
  --fs-32: 32px;
  --fs-40: 40px;   /* destaque da página inicial */
  --fs-48: 48px;
}

/* Ícones (sprite /icones.svg) */
.ic {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex-shrink: 0;
  overflow: visible;
}
button .ic, a .ic { pointer-events: none; }

/* Logo */
a.logo { display: inline-flex !important; align-items: center; gap: 9px; text-decoration: none; }
a.logo .logo-marca, .marca-app .logo-marca { width: 30px; height: 30px; border-radius: 0 !important; flex-shrink: 0; display: block; }
.logo-texto { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.logo-tcg { margin-left: 5px; font-weight: 500; color: #9ca1b8; }
.marca-app { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: #9ca1b8; font-family: 'Space Grotesk', Inter, sans-serif; font-size: var(--fs-13); font-weight: 600; margin-bottom: 10px; }
.marca-app .logo-marca { width: 22px; height: 22px; }
.marca-app b { color: #fdfcf9; font-weight: 700; }
@media (max-width: 480px) { .logo-tcg { display: none; } }

/* Foco visível pra quem navega pelo teclado */
:focus-visible { outline: 2px solid #2bb3a3; outline-offset: 2px; }

/* No celular, campo com letra menor que 16px faz o iPhone dar zoom sozinho. */
@media (max-width: 600px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; }
}

/* ==========================================================================
   Estados de carregamento e vazios (iguais em todas as páginas)
   ========================================================================== */
/* Esqueleto: barras cinza com brilho passando, no lugar de "Carregando...". */
.skel-lista { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.skel-lista > span, .skel { display: block; height: 64px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.09) 40%, rgba(255,255,255,.04) 80%) 0 0 / 300% 100%; animation: skelBrilho 1.4s ease-in-out infinite; }
.skel-lista > span:nth-child(2) { width: 92%; animation-delay: .12s; }
.skel-lista > span:nth-child(3) { width: 80%; animation-delay: .24s; }
.skel-lista.compacta > span { height: 38px; }
@keyframes skelBrilho { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-lista > span, .skel { animation: none; } }

/* Estado vazio: ícone, título curto, explicação e (às vezes) o próximo passo. */
.vazio { text-align: center; padding: 34px 18px; border: 1px dashed rgba(156,161,184,.25); border-radius: 16px; margin: 6px 0; }
.vazio-ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: rgba(43,179,163,.1); color: #2bb3a3; }
.vazio-ic .ic { width: 26px; height: 26px; }
.vazio-titulo { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: var(--fs-16); color: #fdfcf9; margin: 0 0 4px; }
.vazio-texto { font-size: var(--fs-13); color: #a3a8bd; margin: 0 auto; max-width: 380px; line-height: 1.5; }
.vazio-acao { margin-top: 14px; display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vazio-acao a, .vazio-acao button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 0; cursor: pointer; font: inherit; font-size: var(--fs-13); font-weight: 700; text-decoration: none; background: #fdfcf9; color: #2a2417; }

/* Números: algarismos da mesma largura (valores alinhados, não "pulam" ao atualizar). */
.num, .valor, .preco, .card-price, .item-preco, .hero-number, .buyer-total, .grupo-leiloeiro-subtotal, .pay-deadline,
.stat-valor, .fin-valor, td, th, .status-pill, .badge-status-fila, #totalPendente, #barraPagarValor { font-variant-numeric: tabular-nums; }

/* Acessibilidade: texto só pra leitor de tela. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Enquanto verifica a sessão, a "caixa" do portão some e fica só o esqueleto da página. */
.gate:has(#gateSkel) { background: none; border: 0; padding: 0; }

/* Selo "Leiloeiro verificado" (passou pela análise do cadastro de parceiro). */
.selo-verificado { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 99px; font-size: var(--fs-11); font-weight: 700; letter-spacing: .01em; color: #8ff0cf; background: rgba(43,179,163,.14); border: 1px solid rgba(43,179,163,.35); vertical-align: middle; white-space: nowrap; font-family: Inter, sans-serif; }
.selo-verificado .ic { width: 13px; height: 13px; }
.selo-verificado.claro { color: #0f6f63; background: rgba(43,179,163,.12); border-color: rgba(15,111,99,.3); }
.selo-verificado.longo { white-space: normal; max-width: 100%; line-height: 1.35; padding-top: 3px; padding-bottom: 3px; }

/* Tela de abertura do app instalado (só aparece aberto pelo ícone, não no navegador). */
#splashApp { display: none; }
@media (display-mode: standalone) {
  #splashApp { display: flex; position: fixed; inset: 0; z-index: 99999; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(90% 55% at 50% 42%, #1c2640 0%, #121726 50%, #0a0d16 100%); transition: opacity .4s ease; }
  #splashApp img { width: 96px; height: 96px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); animation: splashPulso 1.6s ease-in-out infinite; }
  #splashApp span { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 22px; color: #fdfcf9; letter-spacing: -0.01em; }
  #splashApp span b { color: #9ca1b8; }
  #splashApp.saindo { opacity: 0; pointer-events: none; }
}
@keyframes splashPulso { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { #splashApp img { animation: none; } }