/* =====================================================================
   Área do parceiro BENLIT — a identidade do painel (grafite, ouro e
   papel), num layout de uma tela só, pensado primeiro para o celular.
   ===================================================================== */
:root {
  --grafite: #282F38;
  --grafite-fundo: #1E242B;
  --grafite-eleva: #333B45;
  --grafite-linha: #3E4650;

  --ouro: #BA9C64;
  --ouro-texto: #7C6228;
  --ouro-claro: #D8C49A;
  --ouro-veu: rgba(186, 156, 100, .12);

  --papel: #F7F5F1;
  --papel-alt: #EDE9E1;
  --papel-linha: #DAD4C8;

  --texto: #22262C;
  --texto-suave: #5C636D;
  --texto-claro: #E8E9EB;
  --texto-claro-2: #A9B0B9;

  --erro: #A4331F;
  --ok: #2F6B4F;

  --fonte: "Eurostile", "Saira Semi Condensed", "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(40, 47, 56, .06), 0 6px 20px rgba(40, 47, 56, .07);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

body {
  font-family: var(--fonte);
  background: var(--papel);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.01em; }

/* ---------------------------------------------------------- entrar */
.entrar {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(186, 156, 100, .10), transparent 70%),
    var(--grafite-fundo);
}
.entrar_cartao {
  width: min(400px, 100%);
  padding: clamp(1.6rem, 5vw, 2.4rem);
  background: var(--grafite);
  border: 1px solid var(--grafite-linha);
  border-radius: 14px;
}
.entrar_cartao form { display: flex; flex-direction: column; gap: .45rem; }
.entrar_logo { width: 120px; margin: 0 auto .6rem; }
.entrar_cartao h1 {
  margin: 0 0 .8rem;
  font-size: 1.15rem;
  color: var(--texto-claro);
  text-align: center;
  font-weight: 400;
}
.entrar_texto { margin: 0 0 .4rem; font-size: .88rem; color: var(--texto-claro-2); text-align: center; }
.entrar_cartao label { font-size: .82rem; color: var(--texto-claro-2); margin-top: .5rem; }
.entrar_cartao input {
  font: inherit;
  font-size: 16px;            /* abaixo de 16px o iPhone dá zoom ao focar */
  padding: .75rem .85rem;
  border-radius: 8px;
  border: 1px solid var(--grafite-linha);
  background: var(--grafite-fundo);
  color: var(--texto-claro);
}
.entrar_cartao input:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px; }
.entrar_cartao button[type=submit] {
  margin-top: 1.1rem;
  font: inherit;
  font-weight: 500;
  padding: .85rem;
  border: 0;
  border-radius: 8px;
  background: var(--ouro);
  color: var(--grafite-fundo);
  cursor: pointer;
}
.entrar_cartao button:disabled { opacity: .6; cursor: default; }
.entrar_erro { margin: .9rem 0 0; font-size: .86rem; color: #E9A192; text-align: center; }

/* ---------------------------------------------------------- casca */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem clamp(.9rem, 3vw, 1.6rem);
  padding-top: max(.7rem, env(safe-area-inset-top));
  background: var(--grafite);
  color: var(--texto-claro);
}
.topo_logo { width: 84px; flex: none; }
.topo_titulo { flex: 1; font-size: .85rem; color: var(--texto-claro-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo_acoes { display: flex; align-items: center; gap: .5rem; }
.topo_acoes button {
  font: inherit;
  font-size: .84rem;
  min-height: 2.4rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--grafite-linha);
  background: none;
  color: var(--texto-claro-2);
  cursor: pointer;
}
.topo_acoes button:hover { color: var(--texto-claro); border-color: var(--ouro); }
.topo_recarregar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; padding: 0 !important; border-radius: 50% !important;
}
.topo_recarregar svg { width: 1rem; height: 1rem; display: block; }
.topo_recarregar[disabled] { opacity: .55; cursor: default; }
.topo_recarregar.girando svg { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.conteudo {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(1rem, 3vw, 1.8rem);
  padding-block: clamp(1.1rem, 3vw, 1.8rem) 3rem;
}

.saudacao h1 { font-size: clamp(1.3rem, 4vw, 1.6rem); }
.saudacao p { margin: .2rem 0 0; color: var(--texto-suave); font-size: .92rem; }

/* ---------------------------------------------------------- meu código */
.meu_codigo {
  margin-top: 1.1rem;
  padding: clamp(1.1rem, 4vw, 1.6rem);
  border-radius: 14px;
  color: var(--texto-claro);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(186, 156, 100, .22), transparent 70%),
    var(--grafite);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.6rem;
}
.meu_codigo_rotulo { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-claro-2); }
.meu_codigo_valor {
  margin-top: .1rem;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ouro-claro);
  word-break: break-all;
}
.meu_codigo_link { margin-top: .35rem; font-size: .84rem; color: var(--texto-claro-2); word-break: break-all; }
.meu_codigo_acoes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
@media (max-width: 640px) {
  .meu_codigo { grid-template-columns: 1fr; }
  .meu_codigo_acoes { justify-content: stretch; }
  .meu_codigo_acoes .botao { flex: 1 1 auto; }
}

/* ---------------------------------------------------------- botões */
.botao {
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  min-height: 2.6rem;
  padding: .55rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--ouro);
  background: var(--ouro);
  color: var(--grafite-fundo);
  cursor: pointer;
  white-space: nowrap;
}
.botao:hover { background: var(--ouro-claro); border-color: var(--ouro-claro); }
.botao.vazado { background: none; color: var(--ouro-claro); }
.botao.vazado:hover { background: rgba(186, 156, 100, .16); }
.botao.discreto { border-color: var(--papel-linha); background: #fff; color: var(--texto-suave); }
.botao.discreto:hover { border-color: var(--ouro); color: var(--texto); }
.botao:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------- números */
.cartoes {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
}
@media (max-width: 520px) {
  .cartoes { grid-template-columns: 1fr 1fr; }
  /* são cinco cartões: o do ranking, que é o destaque, fecha a grade inteiro */
  .cartoes .destaque { grid-column: 1 / -1; }
}
.cartao {
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--papel-linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao_rotulo { font-size: .74rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
.cartao_valor { font-size: 1.8rem; font-weight: 500; line-height: 1.1; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.cartao_nota { font-size: .78rem; color: var(--texto-suave); }
.cartao.destaque { border-color: var(--ouro); background: linear-gradient(180deg, #fff, #FBF6EC); }
.cartao.destaque .cartao_valor { color: var(--ouro-texto); }

/* ---------------------------------------------------------- blocos */
.grade {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}
@media (max-width: 860px) {
  .grade { grid-template-columns: 1fr; }
  /* no celular o ranking, que é curto, vem antes da lista longa */
  .grade .bloco_ranking { order: -1; }
}
.bloco {
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--papel-linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
@media (max-width: 520px) { .bloco { padding: 1rem .9rem; } }
.bloco_titulo {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  margin-bottom: .8rem;
}
.vazio { padding: 2rem 1rem; text-align: center; color: var(--texto-suave); font-size: .92rem; }

/* abas */
.abas { display: flex; gap: .2rem; margin: -.2rem 0 .6rem; border-bottom: 1px solid var(--papel-linha); overflow-x: auto; }
.abas button {
  font: inherit;
  min-height: 44px;
  padding: .5rem .85rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
}
.abas button.ativa { color: var(--texto); border-bottom-color: var(--ouro); font-weight: 500; }
.abas .conta { font-size: .76rem; color: var(--texto-suave); margin-left: .3rem; }

/* ---------------------------------------------------------- indicados */
.indicados { list-style: none; margin: 0; padding: 0; }
.ind { padding: .75rem 0; border-bottom: 1px solid var(--papel-alt); }
.ind:last-child { border-bottom: 0; }
.ind_topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.ind_nome { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.ind_meta { margin-top: .15rem; font-size: .82rem; color: var(--texto-suave); }
.ind_meta span + span::before { content: '·'; margin: 0 .4rem; color: var(--papel-linha); }
.mais { display: flex; justify-content: center; margin-top: .8rem; }

.etiq {
  flex: none;
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .74rem;
  white-space: nowrap;
}
.etiq-novo { background: var(--papel-alt); color: var(--texto-suave); }
.etiq-em_contato { background: #FFF4DC; color: #7A5A12; }
.etiq-aprovado { background: #E4F1EA; color: var(--ok); }
.etiq-recusado { background: #F7E4E0; color: var(--erro); }

/* ---------------------------------------------------------- ranking */
.ranking { list-style: none; margin: 0; padding: 0; }
.rk {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .55rem;
  border-radius: 8px;
}
.rk + .rk { margin-top: .15rem; }
.rk_pos {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; height: 1.75rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--papel-alt);
  color: var(--texto-suave);
  font-size: .8rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rk.podio .rk_pos { background: var(--ouro); color: var(--grafite-fundo); }
.rk_nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk_total { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.rk.eu { background: var(--ouro-veu); outline: 1px solid var(--ouro); }
.rk.eu .rk_nome { font-weight: 600; }
.rk_voce {
  margin-left: .35rem;
  font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ouro-texto);
}
.rk_salto { text-align: center; color: var(--texto-suave); line-height: 1; padding: .2rem 0; }
.ranking_nota { margin: .7rem 0 0; font-size: .8rem; color: var(--texto-suave); }

/* ---------------------------------------------------------- avisos */
.carregando { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--papel-alt); overflow: hidden; }
.carregando span { display: block; width: 40%; height: 100%; background: var(--ouro); animation: desliza 1s linear infinite; }
@keyframes desliza { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

.aviso {
  position: fixed;
  left: 50%;
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 70;
  padding: .7rem 1.2rem;
  background: var(--grafite);
  color: var(--texto-claro);
  border-radius: 999px;
  font-size: .88rem;
  box-shadow: 0 8px 26px rgba(30, 36, 43, .3);
  max-width: 92vw;
  text-align: center;
}
.aviso.ruim { background: var(--erro); }

@media (prefers-reduced-motion: reduce) {
  .topo_recarregar.girando svg, .carregando span { animation: none; }
}