/* ==================================================================
   VEXORA — sistema visual
   ------------------------------------------------------------------
   Regra de ouro deste arquivo:
   vidro (blur) so no menu, no topo e nos cards grandes.
   Tabela, grafico e texto pequeno ficam sobre superficie opaca.
   Brilho e roxo tingido — nunca sombra preta.
   Nada de animar blur: isso repinta a tela inteira e trava o navegador.
   ================================================================== */

:root {
  /* base — roxo quase preto */
  --fundo-0: #05030c;
  --fundo-1: #0a0616;
  --fundo-2: #0e0820;

  /* superficies */
  --vidro:      rgba(30, 13, 60, 0.52);   /* menu, topo, cards */
  --vidro-forte:rgba(22, 9, 46, 0.72);
  --opaco:      rgba(9, 4, 20, 0.88);    /* tabela, grafico, formulario */
  --opaco-2:    rgba(14, 7, 30, 0.72);

  /* bordas */
  --borda:      rgba(168, 85, 247, 0.15);
  --borda-forte:rgba(192, 132, 252, 0.32);
  --borda-viva: rgba(216, 180, 254, 0.55);

  /* texto */
  --texto-1: #f5f1ff;
  --texto-2: #b7ace0;
  --texto-3: #7b6fa6;

  /* acentos */
  --roxo:      #a855f7;
  --roxo-claro:#c084fc;
  --magenta:   #e879f9;
  --ciano:     #22d3ee;
  --verde:     #34d399;
  --ambar:     #fbbf24;

  /* brilhos roxos (nunca preto) */
  --glow:    0 0 22px rgba(168, 85, 247, 0.22);
  --glow-forte: 0 0 40px rgba(168, 85, 247, 0.34), 0 0 12px rgba(232, 121, 249, 0.22);
  --profund: 0 18px 50px rgba(3, 1, 10, 0.75);

  --r-p: 14px;
  --r-m: 18px;
  --r-g: 26px;

  /* ---- A BARRA FIXA E O RECORTE DO APARELHO ----

     `--recorte-topo` é a faixa que o sistema reserva para a ilha do iPhone e a
     barra de status. Ela é lida de `env()` e vale ZERO em qualquer tela sem
     recorte, o que mantém o desktop exatamente como estava.

     `--altura-topo` é quanto a barra ocupa de verdade. Ela é declarada aqui
     porque DUAS coisas dependem do mesmo número: a barra em si, e a folga que o
     conteúdo precisa para não ficar escondido atrás dela. Se os dois números
     saírem de lugares diferentes, um dia eles divergem e o título reaparece
     colado atrás da barra — que é o defeito que o dono viu no celular. */
  --recorte-topo: env(safe-area-inset-top, 0px);
  --altura-topo: 78px;

  /* folga entre o V e o titulo da tela de login. O V ja e cortado em
     .login-logo; esta e a unica folga que voce ve. Pequeno = colado. */
  --gap-logo-titulo: 2px;

  --fonte: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- FUNDO: foto (design/fundo_painel.jpg) + véu escuro ---------- */
/* A foto é pintada UMA vez num elemento fixo: nada de background-attachment
   (isso trava a rolagem no celular). 86 KB em 1920px, 28 KB no celular. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  contain: strict;

  background-color: var(--fundo-0);
  background-image:
    /* véu: garante o contraste do texto em cima da nuvem clara */
    linear-gradient(180deg, rgba(6, 2, 16, 0.62), rgba(6, 2, 16, 0.78)),
    url('/fundo-painel.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

@media (max-width: 720px) {
  body::before {
    background-image:
      linear-gradient(180deg, rgba(6, 2, 16, 0.66), rgba(6, 2, 16, 0.82)),
      url('/fundo-painel-mobile.jpg');
  }
}

/* segundo plano: o halo roxo que empurra a fumaça pro centro */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 42% at 62% 34%, rgba(147, 51, 234, 0.16), transparent 70%),
    radial-gradient(44% 34% at 26% 72%, rgba(109, 40, 217, 0.12), transparent 72%);
  contain: strict;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* tela cheia: o painel e o aplicativo, nao uma janela sobre a pagina */
  padding: 0;
  min-height: 100vh;
  background: var(--fundo-0);
  color: var(--texto-1);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}

/* ---------- CAIXA DO PAINEL ---------- */
.painel {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0,...) e obrigatorio: 1fr puro tem minimo automatico e a
     coluna cresce alem da tela quando um item nao encolhe. */
  /* SEM coluna reservada para o menu: o V fica no canto e o conteudo usa a
     largura toda. Antes era `78px + 1fr` e o menu ocupava essa faixa sempre. */
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--opaco-2);
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* SEM overflow hidden: ele quebra position:fixed dos filhos. */
  overflow: visible;
  min-height: 100vh;
  /* SEM contain: layout — layout containment makes this box the containing
     block for every fixed descendant, so the header sticks to the PANEL and
     scrolls away with the content instead of staying on screen. */
}

/* ---------------------------------------------------------------------------
   O V DENTRO DA BARRA, E O MENU QUE ABRE POR CIMA
   ---------------------------------------------------------------------------
   Decisao do dono, 2026-10-08, no padrao do Cloudflare: "so o icone; clica,
   abre; tira o mouse ou clica fora, some".

   O que muda em relacao a coluna fixa de 78px que existia:
     - o CONTEUDO ganha a largura toda, sempre;
     - FECHADO o estado e so o V — nao ha coluna de icones permanente;
     - ABERTO o painel passa POR CIMA, sem empurra-lo.

   O gatilho mora DENTRO da barra de sessao, e por isso nao e mais `fixed`:
   quem precisa ficar na tela e a barra, e o V acompanha ela. Antes o V era
   `fixed` num elemento solto na margem 12px — e um `fixed` que nao esta dentro
   de nada que role e o que some quando a pessoa desce a pagina.

   A caixa de 44px sobrevive porque e o alvo de toque do dedo, nao o lugar do V:
   dentro da barra ele fica alinhado com os outros dois botoes. */
.menu-gatilho {
  position: relative;
  z-index: 85;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--fundo-1);
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s;
}
.menu-gatilho:hover,
.menu-gatilho:focus-visible {
  border-color: var(--borda-viva);
  box-shadow: var(--glow);
}
.menu-gatilho img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(168, 85, 247, .5));
}

/* O VEU: a camada invisivel que fecha o menu ao clicar fora. Sem cor de
   proposito — escurecer a tela faria de fechar o menu um evento. */
.menu-veu { position: fixed; inset: 0; z-index: 80; background: transparent; }

/* ---------- MENU LATERAL: some por padrao, abre por cima ---------- */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  /* ACIMA do V (85): o menu e a coisa que acabou de aparecer. */
  z-index: 95;
  width: 248px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: opacity .18s ease-out, transform .18s ease-out, visibility .18s;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  /* A folga de cima soma o recorte do aparelho: com a ilha do iPhone, os
     primeiros itens do menu abriam DENTRO da área reservada ao sistema. */
  padding: calc(14px + var(--recorte-topo)) 12px 20px;
  /* O FUNDO E REAL, NAO VIDRO. MEDIDO 2026-10-08: com `--opaco-2`
     (rgba alfa 0.72) o conteudo aparecia por tras do painel. O dono:
     "ele tem que ter o fundo real, e ficar por cima do fundo". */
  background: var(--fundo-1);
  border-right: 1px solid var(--borda-forte);
  box-shadow: var(--profund);
}
/* `visibility` e o que tira do TAB de quem navega pelo teclado: painel fechado
   que ainda e focavel e painel sem dono. */
.menu.aberto { opacity: 1; visibility: visible; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .menu { transition: visibility .18s; transform: none; }
  .menu.aberto { transform: none; }
}

.logo { display: none; }   /* o V que abre o menu esta no gatilho, no canto */

/* O NOME AO LADO DO ICONE.
   MEDIDO 2026-10-08: `overflow-wrap: anywhere` QUEBRA A PALAVRA no meio —
   cada letra caia numa linha, e as palavras saiam embossadas. E `color:
   inherit` puxava a cor escura do link, e as letras saiam pretas sobre fundo
   escuro. Agora: nao quebra no meio (corta com reticencias) e tem cor propria. */
.menu-btn-nome {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--texto-1);
  /* `flex: 1` da LUGAR ao nome: sem ele o span ocupa so o texto. */
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.menu-btn:hover .menu-btn-nome,
.menu-btn.ativo .menu-btn-nome { color: #fff; }

.logo {
  width: 40px; height: 40px;
  flex-shrink: 0;
  margin-bottom: 14px;
  display: none;
  place-items: center;
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* o proprio PNG ja tem o brilho violeta; aqui so um halo suave */
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, .55));
}

.menu-btn {
  /* icone E nome na mesma linha: o dono pediu "os icones ficam e os nomes
     aparecem". So o icone obriga a decorar o desenho; so o nome gasta largura.
     `min-height: 48px` e o alvo de toque confortavel — o painel antigo mede
     44px como minimo (PAINEL-ANTIGO.md, secao 6.3). */
  width: 100%;
  min-height: 48px;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: color .16s, background-color .16s, border-color .16s, transform .12s;
}
/* `flex-start` segura o nome AO LADO do icone. MEDIDO 2026-10-08 no celular
   do dono: aparecia so o icone. Ver a nota do painel do dono, mesma causa. */
.menu-btn svg { width: 21px; height: 21px; flex-shrink: 0; }
.menu-btn { justify-content: flex-start; }
.menu-btn:hover { color: var(--texto-1); background: rgba(168, 85, 247, 0.10); }
.menu-btn:active { transform: scale(.93); }
.menu-btn.ativo {
  color: #fff;
  background: linear-gradient(150deg, rgba(168, 85, 247, 0.30), rgba(109, 40, 217, 0.18));
  border-color: var(--borda-forte);
  box-shadow: var(--glow);
}

/* filho de grid sem isto nao encolhe: ele fica no tamanho do conteudo */
.painel > div { min-width: 0; }

/* ---------- TOPO ----------
   A BARRA DE SESSÃO É FIXA EM TODA LARGURA.

   Ela carrega as duas únicas ações que existem em toda tela — sair e o perfil —
   e o V que abre o menu. Perder qualquer um dos três no meio da rolagem tira da
   pessoa a referência de onde ela está, e foi exatamente o que o dono viu.

   `position: fixed` mora AQUI, na regra base, e não dentro de um `@media`: antes
   ele só existia no bloco de celular, e no computador a barra era um bloco
   comum que subia junto com a página.

   A área segura do aparelho (a ilha do iPhone) é lida de `env()` e vale 0 em
   qualquer tela sem recorte — por isso o desktop não muda nada por causa dela. */
.topo {
  position: fixed;
  top: var(--recorte-topo);
  left: 0; right: 0;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px;
  /* SEM backdrop-filter: ver nota acima */
  background: var(--opaco-2);
  border-bottom: 1px solid var(--borda);
}

.busca { display: none; }   /* barra de busca removida do painel */
.topo-dir { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icone-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--borda);
  border-radius: 11px;
  background: rgba(6, 3, 15, 0.42);
  color: var(--texto-2);
  cursor: pointer;
  transition: color .16s, border-color .16s, background-color .16s, transform .12s;
}
.icone-btn svg { width: 18px; height: 18px; }
.icone-btn:hover { color: #fff; border-color: var(--borda-forte); background: rgba(168, 85, 247, 0.14); }
.icone-btn:active { transform: scale(.93); }

.perfil {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--borda);
  border-radius: 30px;
  background: rgba(6, 3, 15, 0.42);
  cursor: pointer;
  transition: border-color .16s;
}
.perfil:hover { border-color: var(--borda-forte); }

.avatar {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(145deg, var(--magenta), var(--roxo) 60%, #5b21b6);
  box-shadow: var(--glow);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#perfil-nome { font-size: 14px; font-weight: 500; white-space: nowrap; }

/* ---------- CONTEÚDO ---------- */
/* A folga de cima NÃO é um palpite: é a barra que está em cima. Antes este
   bloco não tinha nenhuma, e o título da tela aparecia colado atrás da barra. */
.conteudo {
  padding: calc(var(--altura-topo) + var(--recorte-topo) + 18px) 24px 34px;
  min-width: 0;
}

/* ---------- SAUDAÇÃO ---------- */
.saudacao {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.saudacao h1 { margin: 0 0 5px; font-size: 25px; font-weight: 600; letter-spacing: -0.4px; }
.saudacao p  { margin: 0; color: var(--texto-2); font-size: 14px; }

/* ---------- SELETOR DE PERÍODO (era decorativo, agora funciona) ---------- */
.periodo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  background: rgba(6, 3, 15, 0.6);
  border: 1px solid var(--borda);
  border-radius: 12px;
  color: var(--texto-1);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.periodo:hover { border-color: var(--borda-forte); }
.periodo.aberto { border-color: var(--borda-viva); box-shadow: var(--glow); background: rgba(20, 8, 42, 0.85); }
.periodo svg { width: 16px; height: 16px; color: var(--roxo-claro); }
.periodo .seta { margin-left: 2px; transition: transform .18s; color: var(--texto-3); }
.periodo.aberto .seta { transform: rotate(180deg); }

.periodo-lista {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 60;
  min-width: 172px;
  padding: 6px;
  background: var(--opaco-2);
  border: 1px solid var(--borda-forte);
  border-radius: 13px;
  box-shadow: var(--profund), var(--glow);
  display: none;
}
.periodo.aberto .periodo-lista { display: block; }
.periodo-lista button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color .14s, color .14s;
}
.periodo-lista button:hover { background: rgba(168, 85, 247, 0.16); color: #fff; }
.periodo-lista button[aria-selected="true"] { color: #fff; font-weight: 600; }
.periodo-lista button[aria-selected="true"]::after { content: '✓'; color: var(--roxo-claro); }

/* ---------- O HEROI, NO PAINEL DO AFILIADO (etapa 4.5) ----------
   O mesmo tratamento que o painel do dono: o numero que a pessoa abre a tela
   para ver vira grande, e o resto apoia.

   Os tokens sao os mesmos. Nenhuma cor nova. */

/* O codigo do afiliado. E o numero que a pessoa digita para receber o
   proprio dinheiro, entao e codigo de verdade — com `letter-spacing`, e nao
   texto corrido que o olho passa reto. */
.codigo-box {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(168, 85, 247, .12);
  border: 1px solid var(--borda-viva);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--texto-2);
}
.codigo-box b {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--roxo-claro);
}

/* A linha do KYC. `ok` e `pendente` mudam de cor de graca: a cor e a unica
   pista de que aquele texto e uma condicao, e nao mais um paragrafo solto
   no fim da pagina — que e como ele estava. */
.kyc-pendente {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(251, 191, 36, .09);
  border: 1px solid rgba(251, 191, 36, .28);
  color: #fcd34d;
  line-height: 1.55;
}
.kyc-ok {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(52, 211, 153, .09);
  border: 1px solid rgba(52, 211, 153, .28);
  color: var(--verde);
  line-height: 1.55;
}

.heroi {
  padding: 20px 22px 16px;
  margin-bottom: 16px;
  background: linear-gradient(150deg, rgba(58, 22, 105, 0.62), rgba(24, 10, 50, 0.66));
  border-color: var(--borda-viva);
  box-shadow: var(--profund), var(--glow-forte);
}
.heroi-topo { display: flex; align-items: center; gap: 11px; }
.heroi-valor {
  margin: 6px 0 4px;
  font-size: clamp(28px, 6.5vw, 40px);
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--texto-1);
  line-height: 1.05;
}
.heroi-rodape {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12.5px;
  color: var(--texto-2);
}

/* ---------- GRADE DE CARDS ---------- */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.card {
  position: relative;
  padding: 17px 18px 10px;
  background: var(--vidro);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  box-shadow: var(--profund);
  cursor: default;
  /* SEM preserve-3d / will-change: 4 cards em camada 3D permanente
     queimam bateria e travam em Android fraco */
  transition: border-color .18s, box-shadow .18s, background-color .18s;
  overflow: hidden;
}
.card:hover { border-color: var(--borda-forte); }

/* o card de lucro é o destaque: borda viva e vazamento de luz */
.card.destaque {
  background: linear-gradient(150deg, rgba(58, 22, 105, 0.62), rgba(24, 10, 50, 0.66));
  border-color: var(--borda-viva);
  box-shadow: var(--profund), var(--glow-forte);
}
.card.destaque::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(232,121,249,.75), rgba(168,85,247,.25) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

/* ícone: disco com halo colorido, como na referência */
.card-icone {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: rgba(6, 3, 15, 0.5);
  filter: drop-shadow(0 0 9px currentColor);
}
.card-icone svg { width: 17px; height: 17px; }

.card-rotulo {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--texto-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-varia {
  display: inline-block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.card-varia.sobe  { color: var(--verde); }
.card-varia.desce { color: var(--magenta); }

.card-valor {
  font-size: 27px;
  font-weight: 300;
  letter-spacing: -0.6px;
  line-height: 1.15;
}
.card-valor.pequeno { font-size: 22px; }
.card-valor span.unidade { font-size: 15px; color: var(--texto-2); }

.card-nota {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--texto-3);
}

/* o card do lucro pulsa enquanto o numero conta do zero */
@keyframes pulso-roxo {
  0%, 100% { box-shadow: var(--profund), var(--glow); }
  50%      { box-shadow: var(--profund), var(--glow-forte); }
}
.card.destaque.contando {
  animation: pulso-roxo 1.15s ease-in-out;
}

/* ---------- link de afiliado ---------- */
.afiliado-codigo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px dashed var(--borda-viva);
  background: rgba(168, 85, 247, 0.09);
  color: var(--roxo-claro);
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 15px;
  letter-spacing: 2px;
}
.afiliado-rotulo {
  font-size: 11.5px;
  color: var(--texto-3);
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 8px;
}

/* sparkline */
.spark { display: block; width: 100%; height: 46px; margin-top: 6px; }

/* ---------- BLOCOS (gráfico, tabela, formulário) ---------- */
.painel-grafico {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}

.bloco {
  min-width: 0;
  padding: 19px 20px;
  /* opaco: número pequeno sobre vidro fica com halo ilegível */
  background: var(--opaco);
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  box-shadow: var(--profund);
  min-width: 0;
}
.bloco h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 600; }
.bloco .sub { margin: 0 0 15px; font-size: 12.5px; color: var(--texto-3); }

/* gráfico de linha */
.grafico { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-linha { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.g-grade { stroke: rgba(168, 85, 247, 0.10); stroke-width: 1; }
.g-eixo  { fill: var(--texto-3); font-size: 10px; font-family: var(--fonte); }
.g-ponto { stroke-width: 2; }

.dica {
  position: absolute;
  z-index: 40;
  padding: 7px 11px;
  background: var(--opaco-2);
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  box-shadow: var(--profund), var(--glow);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity .12s;
}
.dica.visivel { opacity: 1; }

/* rosca */
/* descricao estatica de pagina.
   NAO usar .dica aqui: .dica e TOOLTIP (position:absolute + opacity:0) e so
   aparece com .visivel — texto estatico placed nela fica invisivel. */
.pagina-desc { margin: -6px 0 18px; color: var(--texto-2); font-size: 14px; }
.pagina-desc.fim { margin: 18px 0 0; }

.rosca { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rosca svg { width: 132px; height: 132px; flex-shrink: 0; }
.rosca-trilho { fill: none; stroke: rgba(168, 85, 247, 0.13); stroke-width: 13; }
.rosca-fg { fill: none; stroke-width: 13; stroke-linecap: round; transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1); }
.rosca-centro-v { font-size: 20px; font-weight: 600; fill: var(--texto-1); }
.rosca-centro-r { font-size: 10px; fill: var(--texto-3); }

.legenda { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 11px; }
.legenda > div { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legenda i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.legenda span { flex: 1; min-width: 0; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda b { font-weight: 600; font-size: 13.5px; }

/* ---------- TABELA ---------- */
.tabela-bloco {
  padding: 19px 20px 8px;
  background: var(--opaco);
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  box-shadow: var(--profund);
}
.tabela-bloco h3 { margin: 0 0 14px; font-size: 15.5px; font-weight: 600; }

.tabela-bloco table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela-bloco th {
  padding: 9px 10px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--texto-3);
  border-bottom: 1px solid var(--borda);
}
.tabela-bloco td { padding: 13px 10px; border-bottom: 1px solid rgba(168, 85, 247, 0.07); }
.tabela-bloco tbody tr { transition: background-color .14s; }
.tabela-bloco tbody tr:hover { background: rgba(168, 85, 247, 0.07); }
.tabela-bloco tbody tr:last-child td { border-bottom: none; }

.marcador {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 9px;
  box-shadow: 0 0 8px currentColor;
  vertical-align: middle;
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.tag.verde  { color: var(--verde); background: rgba(52, 211, 153, 0.13); }
.tag.amarelo{ color: var(--ambar); background: rgba(251, 191, 36, 0.13); }
.tag.roxo   { color: var(--roxo-claro); background: rgba(168, 85, 247, 0.15); }
.tag.vermelho{ color: #fb7185; background: rgba(251, 113, 133, 0.13); }

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 19px;
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.14);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s, border-color .16s, box-shadow .16s, transform .12s;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { background: rgba(168, 85, 247, 0.24); border-color: var(--borda-viva); box-shadow: var(--glow); }
.btn:active { transform: scale(.97); }

.btn-primario {
  background: linear-gradient(140deg, var(--roxo-claro), var(--roxo) 55%, #6d28d9);
  border-color: transparent;
  box-shadow: var(--glow-forte);
}
.btn-primario:hover { filter: brightness(1.1); }

.btn-fantasma { background: rgba(6, 3, 15, 0.5); }
.btn-fantasma:hover { background: rgba(168, 85, 247, 0.14); }

.btn:disabled {
  opacity: .32;
  cursor: not-allowed;
  filter: saturate(.35);
  box-shadow: none;
}
.btn:disabled:hover { background: rgba(168, 85, 247, 0.14); box-shadow: none; }

/* configuracoes: duas colunas em tela larga */
.config-grade {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 15px;
  align-items: start;
  max-width: 1080px;
}
@media (max-width: 900px) { .config-grade { grid-template-columns: 1fr; } }

/* ---------- CAMPO DE TEXTO ---------- */
.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 17px; }
.campo > label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto-2);
  display: flex;
  align-items: center;
  gap: 7px;
}
.campo input, .campo select {
  width: 100%;
  padding: 12px 14px;
  background: rgba(6, 3, 15, 0.6);
  border: 1px solid var(--borda);
  border-radius: 12px;
  color: var(--texto-1);
  font: inherit;
  /* 16px: abaixo disso o celular da zoom automatico ao tocar */
  font-size: 16px;
  outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.campo input:focus, .campo select:focus { border-color: var(--borda-viva); box-shadow: var(--glow); }
.campo input:disabled, .campo input[readonly] {
  color: var(--texto-3);
  background: rgba(6, 3, 15, 0.35);
  cursor: not-allowed;
}
.campo .dica-campo { font-size: 11.5px; color: var(--texto-3); }
.campo-linha { display: flex; gap: 15px; flex-wrap: wrap; }
.campo-linha > .campo { flex: 1; min-width: 190px; }

/* ---------- FOTO DE PERFIL ---------- */
.foto-linha { display: flex; align-items: center; gap: 17px; margin-bottom: 20px; }
.foto-grande {
  width: 74px; height: 74px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px; font-weight: 700; color: #fff;
  background: linear-gradient(145deg, var(--magenta), var(--roxo) 60%, #5b21b6);
  box-shadow: var(--glow);
  overflow: hidden;
  flex-shrink: 0;
}
.foto-grande img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-acoes { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------- CARROSSEL DE JOGOS ----------
   Faixa horizontal com trava de rolagem: o card para no centro a cada
  Games. No celular e o alcance do polegar, no desktop tambem funciona. */
.carrossel {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 3px 3px 8px;      /* respiro para a borda viva nao ser cortada */
  margin: 0 -3px;            /* compensa o padding */
}
.carrossel::-webkit-scrollbar { display: none; }

.jogo {
  position: relative;
  flex: 0 0 auto;
  width: min(76vw, 300px);
  scroll-snap-align: center;
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  background: var(--opaco);
  box-shadow: var(--profund);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.jogo:hover { border-color: var(--borda-forte); box-shadow: var(--profund), var(--glow); }
.jogo.selecionado { border-color: var(--borda-viva); box-shadow: var(--profund), var(--glow-forte); }

/* 3:4 vertical, como post de celular */
.jogo-capa {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo-2);
}
/* enquanto a capa carrega, a caixa fica com a cor solida do design system
   (--fundo-2) e a imagem entra por cima. Antes cada jogo pintava o espaco de
   espera na propria cor saturada e o card "piscava" ao trocar de imagem. */
.jogo-capa img.pronta {
  opacity: 1;
}
.jogo-capa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .28s ease;
}
.jogo-selo {
  position: absolute;
  top: 10px; left: 10px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
  background: rgba(6, 3, 15, 0.82);
  border: 1px solid var(--borda-forte);
  color: var(--roxo-claro);
}
.jogo-info { padding: 14px 15px 15px; }
.jogo-info h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; }
.jogo-info p { margin: 0 0 13px; font-size: 12.5px; color: var(--texto-3); }

/* dois botoes lado a lado, com borda viva */
.jogo-acoes { display: flex; gap: 9px; }
.jogo-acoes .btn { flex: 1; min-width: 0; padding: 11px 12px; font-size: 13.5px; }

/* pontos de posicao: quantos jogos tem no carrossel */
.carrossel-marcas {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.carrossel-marcas i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.25);
}
.carrossel-marcas i.ativa {
  width: 18px;
  border-radius: 3px;
  background: var(--roxo-claro);
  box-shadow: 0 0 8px rgba(192, 132, 252, .6);
}

/* ---------- LINK GERADO ---------- */
.link-gerado {
  margin-top: 15px;
  padding: 17px 19px;
  background: var(--opaco);
  border: 1px solid var(--borda-viva);
  border-radius: var(--r-m);
  box-shadow: var(--glow);
  display: none;
}
.link-gerado.visivel { display: block; }
/* LINK DO BOTAO CONVIDAR, MOSTRADO NA ABA JOGOS.
   O campo e `width:100%` + `overflow-wrap:anywhere` de proposito: o link tem o
   dominio + 8 caracteres do codigo + o parametro de jogo, e em tela de
   telefone ele NAO cabe em uma linha. Sem isso, o texto estourava o cartao e o
   proprio link ficava cortado — o afiliado copiava um link pela metade. */
.link-gerado-titulo {
  display: block;
  font-size: 12px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 9px;
}
.link-gerado-campo {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: rgba(6, 3, 15, 0.7);
  border: 1px solid var(--borda-viva);
  border-radius: 12px;
  color: var(--texto-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.link-gerado-campo:focus { outline: 2px solid var(--roxo-claro); outline-offset: 1px; }
.link-gerado-nota {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texto-2);
}
.link-caixa {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}
.link-caixa input {
  flex: 1;
  min-width: 200px;
  padding: 12px 14px;
  background: rgba(6, 3, 15, 0.7);
  border: 1px solid var(--borda);
  border-radius: 12px;
  color: var(--roxo-claro);
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 13px;
  outline: none;
}
/* AVISO DE COPIA — nao e erro fatal. O link continua na tela; so a copia
   automatica nao saiu. Fica com `flex: 1 0 100%` para cair na linha de baixo
   dos botoes em tela estreita, em vez de espremer o campo do link. */
.aviso-copia {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texto-2);
}
@media (max-width: 420px) {
  .link-gerado-campo { font-size: 12.5px; }
  .link-caixa input { min-width: 0; }
}

/* ---------- AVISO ---------- */
.aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border-radius: var(--r-p);
  border: 1px solid var(--borda);
  background: rgba(168, 85, 247, 0.08);
  margin-bottom: 17px;
}
.aviso svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--roxo-claro); margin-top: 1px; }
.aviso p { margin: 0; font-size: 13.5px; color: var(--texto-2); line-height: 1.65; }
.aviso strong { color: var(--texto-1); }

/* ---------- ESTADO VAZIO ---------- */
.vazio {
  padding: 42px 22px;
  text-align: center;
  color: var(--texto-3);
  font-size: 14px;
}

/* ==================================================================
   RESPONSIVO — MOBILE PRIMEIRO
   ------------------------------------------------------------------
   O publico e mobile. O celular e o layout base; o desktop e o extra.
   Nada de "versione reduzida do desktop": no celular o painel e
   desenhado para o celular.
   ================================================================== */

@media (max-width: 1023px) {

  body { padding: 0; }

  .painel {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 0;
    border-left: none;
    border-right: none;
    min-height: 100vh;
  }

  /* O MENU NAO VIRA BARRA INFERIOR NESTA REGRA.

     MEDIDO 2026-10-08, por print do proprio dono no telefone: 5 itens
     espremidos numa faixa horizontal de ~340px, rolando de lado, e o texto
     do rodape aparecendo por tras. Decisao do dono, no padrao do Cloudflare:
     o V fica no canto superior esquerdo, no telefone como no computador, e o
     menu abre POR CIMA. Aqui so se ajusta a largura — nao a direcao nem o
     lugar. */
  /* No telefone o menu vai ate METADE da tela e nao passa disso: o dono
     pediu "no mobile, pode ser ate meio da tela". `min()` escolhe o menor
     entre 248px e 55% da tela. */
  /* 78vw: MEDIDO 2026-10-08, 55% nao deixava espaco para o nome aparecer. */
  .menu { width: min(280px, 78vw); }

  /* A barra encolhe no celular: 44px do V e 42px do perfil, com 10px em cima e
     embaixo. O conteúdo lê o mesmo número, então os dois nunca divergem. */
  :root { --altura-topo: 64px; }

  /* no celular a logo abre o inicio e vira o primeiro item da barra */
  .logo {
    order: 0;
    width: 48px; height: 48px;
    margin-bottom: 0;
    margin-right: 6px;
    padding: 5px;
    border: 1px solid var(--borda);
    border-radius: 13px;
    background: rgba(6, 3, 15, 0.5);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .16s, box-shadow .16s;
  }
  .logo:hover { border-color: var(--borda-forte); box-shadow: var(--glow); }
  .logo img { filter: drop-shadow(0 0 7px rgba(168, 85, 247, .5)); }

  /* O ITEM DO MENU É UMA LINHA, NÃO UMA CAIXA.
     `width: 48px` aqui era a caixa de um ÍCONE: com o nome dentro dela, o texto
     ficava com espaço negativo e sumia. A pessoa via só o desenho e nenhuma
     pista do que era. O alvo de toque de 48px continua, agora pelo `min-height`
     que a regra base já traz — largura deixa de ser fixa e o nome respira. */
  .menu-btn { min-height: 48px; }
  .menu-btn svg { width: 22px; height: 22px; }

  .painel > div { display: flex; flex-direction: column; min-height: 100vh; }
  /* A folga de cima é a barra; a de baixo é a barra de seleção, que também é
     fixa. O conteúdo nunca fica escondido atrás de nenhuma das duas. */
  .conteudo {
    order: 1;
    flex: 1;
    padding: calc(var(--altura-topo) + var(--recorte-topo) + 16px) 14px 86px;
  }

  /* topo: acoes na primeira linha, busca na segunda */
  .topo {
    order: 0;
    flex-wrap: nowrap;
    gap: 10px;
    /* A fixação e a camada mora na regra base; aqui só o tamanho. */
    background: var(--fundo-1);
    box-shadow: 0 8px 24px rgba(3, 1, 10, .55);
  }
  .topo-dir { order: 1; margin-left: auto; }
  /* sem busca, o topo e so a linha de acoes: encolhe a barra */
  .topo { flex-wrap: nowrap; padding: 10px 14px; }

  .saudacao { gap: 12px; }
  .saudacao h1 { font-size: 22px; }
  .saudacao p { font-size: 13.5px; }

  /* duas colunas de cards, como app de banco */
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .painel-grafico { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .config-grade { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .bloco, .tabela-bloco { padding: 15px 14px; border-radius: var(--r-p); }

  /* A LISTA VIRA CARTAO NO TELEFONE — o metodo vem do painel antigo.

     MEDIDO no painel antigo (`_TABELA-RESPONSIVO.md`): a coluna "Rolagem
     horizontal" vale `nao` em **34 de 34** telas. O motivo esta no metodo:
     la lista NUNCA e tabela — e CARTAO empilhado. Aqui a tabela de 460px
     dentro de 390px obrigava o afiliado a arrastar o dedo de lado.

     `data-rotulo` vem do JSX: cada `<td>` carrega o nome da coluna, que
     vira o texto antes do valor. Coluna escondida sem rotulo e a pessoa nao
     sabe se o dado sumiu ou se ela nao achou. */
  .tabela-bloco table,
  .tabela-bloco tbody,
  .tabela-bloco tr,
  .tabela-bloco td { display: block; width: 100%; }

  .tabela-bloco thead { display: none; }

  .tabela-bloco tbody tr {
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(168, 85, 247, .05);
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .tabela-bloco td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(168, 85, 247, .07);
    text-align: right;
    min-width: 0;
  }
  .tabela-bloco td:last-child { border-bottom: none; padding-bottom: 0; }

  .tabela-bloco td::before {
    content: attr(data-rotulo);
    color: var(--texto-3);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-align: left;
    flex-shrink: 0;
  }

  /* FIX 4: AS ACOES VIRAM DUAS COLUNAS IGUAIS no telefone. MEDIDO 2026-10-08
     no celular do dono: "organizar os botoes, deixando sincronizados" — cada
     botao ficava com a largura do proprio texto. */
  .tabela-bloco .celula-botoes,
  .tabela-bloco .celula-acoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .tabela-bloco .celula-botoes .btn,
  .tabela-bloco .celula-acoes .btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* FIX 5: LINHAS DO CARTAO COM A MESMA ALTURA. MEDIDO 2026-10-08: "deixa o
     dados (linhas) do mesmo tamanho". */
  .tabela-bloco td { min-height: 34px; }

  /* a primeira celula identifica: so ela fica em destaque */
  .tabela-bloco td:first-child {
    font-weight: 600;
    font-size: 14.5px;
    margin-bottom: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--borda-forte);
  }

  .rosca { gap: 14px; }
  .rosca svg { width: 112px; height: 112px; }

  .jogo { width: min(78vw, 280px); }

  .campo-linha { flex-direction: column; gap: 0; }
  .campo-linha > .campo { min-width: 0; }

  .foto-linha { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foto-acoes { width: 100%; }
  .foto-acoes .btn { flex: 1; }
}

@media (min-width: 620px) and (max-width: 1023px) {
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* rotulo do card: pode quebrar em 2 linhas sem colidir com nada */
.card-rotulo { white-space: normal; overflow: visible; line-height: 1.25; }

@media (max-width: 400px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { padding: 13px 12px 6px; }
  .card-valor { font-size: 19px; }
  .card-icone { width: 30px; height: 30px; }
  .card-icone svg { width: 15px; height: 15px; }
  .card-rotulo { font-size: 11.5px; }
  .card-top { gap: 8px; align-items: flex-start; }
  .card-varia { font-size: 11px; }
  .spark { height: 36px; }
  #perfil-nome { display: none; }
  /* eixo do grafico com respiro no celular */
  .grafico svg { min-height: 150px; }
}

/* ==================================================================
   TELEFONE — o breakpoint que NAO EXISTIA

   MEDIDO 2026-10-08, por print do proprio dono no painel do ADMIN. O mesmo
   defeito existe aqui, e a causa e a mesma: nao havia breakpoint entre 381 e
   619, e a regra de 1023px forcava DUAS colunas de cartao. Com 360px de tela
   sobram ~150px por cartao e o rotulo nao cabe — "Valor em jogo (dinheiro
   real)" aparecia cortado.

   Pior: a regra de 400px acima REFORCA as duas colunas. Ou seja, quanto
   menor a tela, mais apertado ficava — o contrario do que a tela precisa.

   Este bloco vem DEPOIS de propósito: em CSS, em larguras que casam com
   mais de um breakpoint, vale a regra declarada por ultimo.

   O mesmo bloco foi colocado no painel do dono, e o `teste-css-integridade`
   exige os dois — porque ja aconteceu de um ser corrigido e o outro ficar.
   ================================================================== */
@media (max-width: 480px) {

  /* 1 coluna. O cartao tem que caber inteiro, e nao metade. */
  .grade { grid-template-columns: minmax(0, 1fr); }

  /* O nome tem teto. Sem isso, "Senhor da Minha Operacao" empurra a pilha
     para fora da tela e o `overflow-x: hidden` do body recorta — o sintoma
     vira "o texto sumiu", que nao da nem para rolar e ver. */
  .perfil-nome { min-width: 0; max-width: 128px; }
  .perfil-nome strong,
  .perfil-nome small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .perfil { max-width: 100%; }
  .topo { padding: 10px 12px; gap: 8px; }
  /* A folga de cima CONTINUA sendo a barra. Este bloco vem depois do de 1023px,
     então um `padding` curto aqui cancelava a folga inteira e o título da tela
     reaparecia colado atrás da barra fixa. */
  .conteudo {
    padding: calc(var(--altura-topo) + var(--recorte-topo) + 16px) 14px 86px;
  }
}

/* toque: sem estado hover grudado no dedo */
@media (hover: none) {
  .card:hover, .jogo:hover, .btn:hover, .menu-btn:hover { border-color: var(--borda); }
  .jogo:hover { box-shadow: var(--profund); }
  .btn-primario:hover { filter: none; }
}

/* ---------- AREA SEGURA (iPhone com notch) ---------- */
@supports (padding: max(0px)) {
  .topo { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .conteudo { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}

/* ---------- ACESSIBILIDADE ---------- */
:focus-visible {
  outline: 2px solid var(--roxo-claro);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
   LOGIN
   ------------------------------------------------------------------
   Tela cheia, sem o painel atras. Mesmo visual: roxo, vidro fosco,
   borda luminosa. Sem animacao de entrada — quem digita a senha nao
   quer esperar nada carregar.
   ================================================================== */

.login {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 18px;
}
.login[hidden] { display: none; }

.login-forma {
  width: 100%;
  max-width: 400px;
  padding: 30px 30px 28px;
  /* opaco: campo de texto sobre vidro fica com halo ilegivel */
  background: var(--opaco-2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-g);
  box-shadow: var(--profund), 0 0 90px rgba(124, 58, 237, 0.14);
}

.login-logo {
  width: 88px; height: 88px;
  /* o V e o titulo ficam vizinhos: a folga vem daqui, nao de um padding
     escondido dentro da imagem. Ver --gap-logo-titulo no :root. */
  margin: 0 auto var(--gap-logo-titulo);
  display: grid;
  place-items: center;
  /* recorta o respiro TRANSPARENTE da PNG: sem isso a caixa de 88px guarda
     ~18px vazios embaixo e o titulo parece la em baixo. */
  position: relative;
  overflow: hidden;
  /* o brilho fica NA CAIXA, nao na imagem: filtro dentro de overflow:hidden e
     cortado e o corte dele aparece como um quadrado em volta do V. */
  filter: drop-shadow(0 0 14px rgba(168, 85, 247, .6));
}
/* 168% = a janela visivel passa a ser a faixa central da imagem, com ~3px de
   folga de cada lado (o glifo ocupa 21,9%..77,3% da altura da PNG).
   Resultado medido: o V passa de 73px para 82px de altura e nao ha mais
   vazio morto entre a ponta do V e o titulo.
   Tudo em %: o mesmo desenho em qualquer tamanho de tela. */
.login-logo img {
  position: absolute;
  width: 168%; height: 168%;
  left: -34%; top: -34%;
  max-width: none;
}

.login-titulo {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-align: center;
}
.login-sub {
  margin: 0 0 24px;
  font-size: 13.5px;
  color: var(--texto-3);
  text-align: center;
}

.login-erro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: var(--r-p);
  border: 1px solid rgba(251, 113, 133, 0.35);
  background: rgba(251, 113, 133, 0.10);
  color: #fda4af;
  font-size: 13.5px;
  line-height: 1.5;
}
.login-erro[hidden] { display: none; }
.login-erro::before {
  content: '!';
  flex-shrink: 0;
  width: 17px; height: 17px;
  margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fb7185;
  color: #2a0510;
  font-size: 12px;
  font-weight: 700;
}

.login-enviar { width: 100%; margin-top: 10px; padding: 13px; font-size: 15px; }
.login-enviar:disabled { opacity: .5; cursor: not-allowed; }

.login-nota {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(168, 85, 247, 0.10);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--texto-3);
  text-align: center;
}

/* campo de senha com o botao de mostrar */
.senha-caixa { position: relative; display: flex; }
.senha-caixa input { padding-right: 46px; }
.senha-olho {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--texto-3);
  cursor: pointer;
  transition: color .16s, background-color .16s;
}
.senha-olho svg { width: 18px; height: 18px; }
.senha-olho:hover { color: var(--texto-1); background: rgba(168, 85, 247, 0.12); }

/* painel some enquanto o login esta na frente */
.painel[hidden] { display: none; }

@media (max-width: 400px) {
  .login-forma { padding: 28px 20px 24px; border-radius: var(--r-m); }
  .login-titulo { font-size: 20px; }
}

/* ==================================================================
   ADMIN — o que so existe no painel do gerente
   ================================================================== */

/* acoes lado a lado na tabela */
.acoes-linha { display: flex; gap: 7px; flex-wrap: wrap; }

/* tabela compacta (dentro dos blocos do diagnostico) */
.tb-compacta { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tb-compacta th {
  padding: 7px 6px; text-align: left; font-size: 10.5px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; color: var(--texto-3);
  border-bottom: 1px solid var(--borda);
}
.tb-compacta td { padding: 9px 6px; border-bottom: 1px solid rgba(168, 85, 247, 0.07); }

/* lista chave/valor */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 20px; }
.dl-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(168, 85, 247, 0.07);
}
.dl-linha span { font-size: 12.5px; color: var(--texto-3); }
.dl-linha b { font-size: 13.5px; font-weight: 600; text-align: right; }

/* codigo do link de afiliado */
.codigo-link {
  display: inline-block; padding: 3px 9px; border-radius: 8px;
  background: rgba(168, 85, 247, 0.12); border: 1px solid var(--borda);
  color: var(--roxo-claro); font-family: ui-monospace, monospace;
  font-size: 12px; letter-spacing: 1px;
}

/* filtros */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.filtro-btn {
  padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--borda); background: rgba(6, 3, 15, 0.5);
  color: var(--texto-2); font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .16s, color .16s, background-color .16s;
}
.filtro-btn:hover { border-color: var(--borda-forte); color: #fff; }
.filtro-btn.ativo {
  color: #fff; border-color: var(--borda-viva);
  background: rgba(168, 85, 247, 0.16); box-shadow: var(--glow);
}

/* caixa de permissoes */
.caixa-permissoes {
  display: grid; gap: 14px;
  padding: 15px; border-radius: var(--r-p);
  border: 1px solid var(--borda); background: rgba(6, 3, 15, 0.35);
}
.grupo-perm h4 {
  margin: 0 0 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; color: var(--roxo-claro);
}
.check {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0; cursor: pointer; font-size: 13.5px; color: var(--texto-2);
}
.check input { width: 16px; height: 16px; accent-color: #a855f7; cursor: pointer; flex-shrink: 0; }
.check:hover { color: #fff; }
.radios { display: flex; gap: 18px; }

/* 2FA */
.config-2fa-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 6px;
}
.config-2fa-linha b { font-size: 15px; }
.input-codigo {
  width: 100%; padding: 13px 16px; text-align: center;
  background: rgba(6, 3, 15, 0.6); border: 1px solid var(--borda);
  border-radius: 12px; color: var(--texto-1); font: inherit;
  font-size: 24px; letter-spacing: 10px; font-variant-numeric: tabular-nums;
  outline: none; transition: border-color .16s, box-shadow .16s;
}
.input-codigo:focus { border-color: var(--borda-viva); box-shadow: var(--glow); }

/* modal de confirmacao */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(3, 1, 10, 0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal[hidden] { display: none; }
.modal-caixa {
  width: 100%; max-width: 460px;
  padding: 26px 24px 22px;
  background: var(--opaco-2); border: 1px solid var(--borda-forte);
  border-radius: var(--r-g); box-shadow: var(--profund), var(--glow-forte);
}
.modal-caixa h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.modal-caixa > p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--texto-2); }
.modal-caixa > p b { color: var(--texto-1); }
.modal-caixa .campo { margin-bottom: 18px; }
.modal-acoes { display: flex; gap: 10px; }
.modal-acoes .btn { flex: 1; }

/* marca que este e o painel do gerente: fundo um tom mais frio */
.admin-corpo { --fundo-0: #06040e; }

@media (max-width: 700px) {
  .acoes-linha .btn { flex: 1; }
  .dl-grid { grid-template-columns: 1fr; }
  .modal-caixa { padding: 22px 18px 18px; }
  .radios { flex-direction: column; gap: 8px; }
}

/* ============================================
   NOVAS TELAS (painel-admin)
   Adicionado abaixo — o design.css original
   acima nao foi tocado.
   ============================================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.login-card input,
.login-card button {
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid currentColor;
}
.login-card button:disabled {
  opacity: 0.6;
}
.erro {
  color: #c0392b;
  font-size: 13px;
}

/* ---------- PERFIL: FOTO E NOME (E3) ----------
   .perfil e o bloco do topo que leva para /afiliado/perfil. Antes ele era
   so um div; agora e um Link, porque o dono pediu que clicar na foto abra o
   perfil. O cursor:pointer e o :hover vinham no CSS desde sempre — ha meses o
   painel parecia clicavel e nao era. Agora e. */
.perfil-nome { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.perfil-nome strong { font-size: 14px; font-weight: 600; color: var(--texto-1); }
.perfil-nome small { font-size: 11px; color: var(--texto-3); }

/* Botao que apaga algo. Vermelho, porque o que ele faz e remover. */
.btn-perigo {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}
.btn-perigo:hover:not(:disabled) { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); }

/* Mensagem de deu certo. O erro ja tinha (.login-erro); o sucesso nao. */
.login-ok {
  margin: 0; padding: 10px 13px;
  border-radius: var(--r-p);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac; font-size: 13px;
}

/* ---------- TELA DO 2FA (etapa 2) — mesmo desenho da tela de login ---------- */
.login-alternativa {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 9px;
  border: 0;
  background: transparent;
  color: var(--texto-3);
  font: inherit;
  font-size: 12.5px;
  text-align: center;
  cursor: pointer;
  transition: color .16s;
}
.login-alternativa:hover { color: var(--roxo-claro); text-decoration: underline; }
.input-codigo {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 26px !important;
  letter-spacing: 10px;
  text-align: center;
  padding: 15px 12px !important;
  text-indent: 10px;
}

/* ==================================================================
   2FA — TELA DE ATIVACAO, DUAS ETAPAS (decisao do dono 2026-10-05)

   MEDIDAS, e nao palpite. A base saiu do que o projeto ja usava: a
   `.login-forma` e `max-width: 400px` com 30px de respiro, e no celular
   (400px) cai para 28/20/24px. Aqui a tela de ativacao e um pouco mais
   larga porque precisa caber 8 codigos de backup em 2 colunas.

   DESKTOP  >= 721px   .ativar 460px / 32px   grade 2 colunas
   TABLET   381-720px  .ativar 100% / 24px    grade 2 colunas (auto-fit)
   MOBILE   <= 380px   .ativar 100% / 18px    grade 1 coluna

   O `auto-fit` com `minmax` e o que faz a grade se acertar sozinha em
   qualquer largura: nao depende de breakpoint acertado a mao.
   ================================================================== */

.login-forma.ativar { max-width: 460px; padding: 32px 32px 30px; }

/* o bloco da semente: pequena, monoespacada, quebra por caractere */
.login-forma.ativar .bloco-codigo {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: left;
  text-indent: 0;
  word-break: break-all;
  min-height: 0;
  padding: 11px 13px;
  border-radius: 10px;
  resize: none;
}
@media (max-width: 720px) {
  .login-forma.ativar { padding: 24px 22px 22px; }
  .login-forma.ativar .bloco-codigo { font-size: 12px; }
}

/* faixa de "validado": so aparece na tela 2 */
.validado {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  margin-bottom: 18px;
  background: rgba(34, 197, 94, 0.09);
  border: 1px solid rgba(34, 197, 94, 0.38);
  border-radius: 12px;
}
.validado-ok {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  font-size: 14px;
  font-weight: 700;
}
.validado div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.validado b { color: var(--texto-1); font-size: 14px; }
.validado span { color: var(--texto-3); font-size: 12.5px; line-height: 1.45; }

/* os 8 codigos: fichas, nao textarea.
   MEDIDO: em textarea com `.input-codigo` (26px, espacamento 10) apenas 4
   dos 8 apareciam. */
.grade-backup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.chip-backup {
  display: grid;
  place-items: center;
  min-height: 44px;             /* alvo de toque minimo */
  padding: 10px 8px;
  background: rgba(6, 3, 15, 0.6);
  border: 1px solid var(--borda);
  border-radius: 10px;
  color: var(--texto-1);
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 15px;
  letter-spacing: 1px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 380px) {
  .login-forma.ativar { padding: 20px 16px 18px; }
  .grade-backup { grid-template-columns: 1fr; }
  .chip-backup { font-size: 14px; }
}

.linha-copiar { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 9px; }
.btn-copiar {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borda);
  border-radius: 10px;
  color: var(--texto-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.btn-copiar:hover { border-color: var(--borda-viva); color: var(--texto-1); }
@media (hover: none) { .btn-copiar:hover { border-color: var(--borda); color: var(--texto-2); } }

/* o "Concluir" e a acao final: mesma largura do campo, altura de toque cheia */
.login-forma.ativar .login-enviar { min-height: 48px; margin-top: 4px; }

/* o link otpauth inteiro fica recolhido: ele serve para QR, e colar ele no
   campo de chave do Google Authenticator e o que produz "chave ilegal" */
.link-extra { margin-top: 10px; }
.link-extra > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--texto-3);
  padding: 4px 0;
  list-style: none;
}
.link-extra > summary::-webkit-details-marker { display: none; }
.link-extra > summary::before { content: '\25B8 '; }
.link-extra[open] > summary::before { content: '\25BE '; }
.link-extra > summary:hover { color: var(--texto-1); }
.link-extra .bloco-codigo { margin-top: 8px; }
.link-extra .dica-campo { display: block; margin-top: 6px; }

/* ============================================================
   RESPONSIVO DA TELA DE 2FA — MEDIDO 2026-10-05 na foto do dono
   ============================================================
   O botao "Tentar de novo" saia com ~55px de largura e o rotulo quebrava em
   TRES linhas ("Tentar / de / novo"). A causa nao era a fonte nem o
   viewport: `.login-erro` e `display: flex` em LINHA, e dentro dela o texto e
   uma caixa solta, que nao e item flex — o navegador vira o texto num item
   anonimo. Os dois disputam a mesma linha, e quem encolhe e o botao.
   A correcao e deixar a linha do botao cair para a linha de baixo inteira,
   e travar o rotulo em uma linha so.

   E o que garante que a tela nao rola de lado no celular:
   - a semente Base32 tem 32 caracteres; sem `anywhere` ela estoura a caixa;
   - o campo le a largura da caixa, nao a do viewport;
   - alvos de toque sobem para 44px em tela sem mouse.
*/
.login-erro { flex-wrap: wrap; }
.login-erro > .linha-copiar { flex: 1 1 100%; }
.login-forma.ativar .btn-copiar {
  white-space: nowrap;
  min-height: 44px;
  width: 100%;
}
.login-forma.ativar .bloco-codigo,
.login-forma.ativar input,
.login-forma.ativar .grade-backup {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.login-forma.ativar input { font-size: 16px; }

@media (max-width: 380px) {
  .login-forma.ativar { padding: 18px 14px 16px; }
  .login-forma.ativar .bloco-codigo { font-size: 12.5px; letter-spacing: 0; }
  .login-forma.ativar .login-enviar { min-height: 48px; }
}

/* ============================================================
   A CAIXA DA CHAVE — MEDIDO 2026-10-05 na foto do dono
   ============================================================
   A caixa da chave saia BRANCA e cortava o design. Nao era tema: e um
   `<textarea>`, e elemento de formulario que o navegador pinta com o padrao dele
   quando o CSS nao diz nada. A regra antiga do `.bloco-codigo` socuava fonte,
   altura e quebra de linha — nenhuma cor.

   Aqui ela recebe o roxo um tom acima do cartao, com a mesma familia de
  variaveis do resto da tela: fundo translucido roxo, borda viva e texto claro.
*/
.login-forma.ativar .bloco-codigo {
  background: rgba(124, 58, 237, 0.14);
  color: var(--texto-1);
  border: 1px solid var(--borda-forte);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  caret-color: var(--roxo-claro);
}
.login-forma.ativar .bloco-codigo::placeholder { color: var(--texto-3); }
.login-forma.ativar .bloco-codigo:focus {
  outline: none;
  border-color: var(--roxo-claro);
  background: rgba(124, 58, 237, 0.2);
}
.login-forma.ativar .bloco-codigo:focus-visible { box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3); }

/* ============================================================
   AVISO DE RELOGIO — MEDIDO 2026-10-05
   ============================================================
   O dono viu no Google Authenticator "os codigos nao conferem. Confira o
   relogio do celular". O TOTP conta tempo ABSOLUTO em blocos de 30s: se o
   aparelho estiver 1 minuto fora, os dois lados contam blocos diferentes e
   nenhum codigo bate. A tela avisa antes da pessoa tentar, com o numero e o
   caminho para corrigir — em vez de deixar o app cuspir o erro depois.
*/
.relogio-aviso {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  margin-bottom: 18px;
  border-radius: var(--r-p);
  border: 1px solid rgba(251, 191, 36, 0.42);
  background: rgba(251, 191, 36, 0.1);
  color: var(--texto-2);
  font-size: 13.5px;
  line-height: 1.6;
}
.relogio-aviso strong { color: #fcd34d; font-weight: 600; }
.relogio-aviso b { color: var(--texto-1); font-weight: 600; }
@media (max-width: 380px) {
  .relogio-aviso { font-size: 12.5px; padding: 11px 12px; }
}

/* ===================================================================
   ETAPA 2 — o que o dono pediu depois de ver o resultado.
   Bloco novo, entao no fim do arquivo: uma correcao nova nunca reescreve
   a antiga, e se algo quebrar da para desfazer apagando este bloco.
   =================================================================== */

/* --- O GRAFICO DETALHADO ---------------------------------------------
   O `.spark` antigo e uma linha de 46px: serve para dizer "subiu", e nao
   serve para dizer QUANDO. Aqui a linha ganhou altura, grade, dia marcado
   em cada ponto e o rotulo do valor.

   A linha e desenhada num SVG esticado na horizontal (`preserveAspectRatio=
   "none"`). Isso estica o traço, entao `vector-effect: non-scaling-stroke`
   devolve a largura de 2px. Os PONTO sao HTML de proposito: dentro do
   SVG esticado eles virariam elipse. */
.grafico {
  display: block;
  width: 100%;
  min-width: 0;
  background: var(--opaco);
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  box-shadow: var(--profund);
  padding: 19px 20px 14px;
}
.grafico-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.grafico-total { font-size: 24px; font-weight: 650; color: var(--texto-1); margin-top: 5px; }
.grafico-total span { font-size: 12.5px; font-weight: 400; color: var(--texto-3); margin-left: 7px; }

/* O FILTRO. `flex-wrap` e o que impede o defeito: cinco pilulas de 44px
   sao 220px + gaps, e na largura de um celular sobrava menos que isso —
   sem o wrap a ultima (1A) saia da tela. */
.pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.pilulas .filtro-btn { padding: 7px 13px; font-size: 12.5px; }

/* A ALTURA DO SVG E EM PIXEL, DE PROPOSITO.

   MEDIDO no Chromium, 2026-10-09: com `height: 100%` o `<svg>` ficou com
   720 x 720px dentro de uma area de 158px, e a curva foi desenhada por cima
   do funil e das tabelas. A causa e o `viewBox="0 0 100 100"`: ele e
   QUADRADO, entao quando a altura percentual nao resolve, o navegador
   recalcula pela proporcao — largura dividida por 1. E 720px de altura.

   `overflow: hidden` fecha a porta: mesmo que o desenho fuja, ele para na
   borda do grafico. */
.grafico { --altura-grafico: 190px; }
.grafico-area { position: relative; height: var(--altura-grafico); }

/* ESCOPADO DELETO DE PROPÓSITO.
   MEDIDO no Chromium: esta regra precisa de DOIS seletores. Ja existia no
   design uma `.grafico svg { height: auto; overflow: visible }`, que vale
   0,1,1 — e uma classe solta (`.grafico-svg`) vale so 0,1,0, entao perdia.
   Com `height: auto` o `viewBox` quadrado (0 0 100 100) fazia o navegador
   recalcular a altura pela proporcao: 1515px de largura viravam 1515px de
   altura, e a curva cobria o funil e as tabelas.
   `.grafico .grafico-svg` vale 0,2,0 e ganha. */
.grafico .grafico-svg {
  display: block;
  width: 100%;
  height: var(--altura-grafico);
  overflow: hidden;
}
.grafico-grade { stroke: var(--borda); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico-area-preenchida { fill: url(#preencheGrafico); }
.grafico-linha {
  fill: none;
  stroke: var(--roxo-claro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* O ponto fica no HTML, nao no SVG. `translate(-50%,-50%)` o centraliza no
   ponto exato da curva, seja qual for a largura da tela. */
.grafico-ponto {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--roxo-claro);
  border: 2px solid var(--fundo-2);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 9px rgba(192, 132, 252, .75);
}
.grafico-ponto.pico { background: #fff; box-shadow: 0 0 13px rgba(216, 180, 254, .95); }
.grafico-pico-valor {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-1);
  background: rgba(14, 7, 30, .92);
  border: 1px solid var(--borda-forte);
  border-radius: 7px;
  padding: 2px 7px;
  white-space: nowrap;
  pointer-events: none;
}
.grafico-eixo {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  font-size: 11.5px;
  color: var(--texto-3);
}
.grafico-eixo span { white-space: nowrap; }

/* --- O FUNIL ---------------------------------------------------------
   Reusa `.rosca` e `.legenda`, que ja existiam: a rosca e o circulo com o
   percentual, a legenda sao as 4 etapas com o numero ao lado. */
.funil-bloco { display: flex; flex-direction: column; }
.funil-cabeca { margin-bottom: 16px; }
.funil-cabeca h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 600; }
.funil-cabeca p { margin: 0; font-size: 12.5px; color: var(--texto-3); }

/* --- AS ABAS QUE ABREM E FECHAM --------------------------------------
   O defeito era o contrario do comum: a tabela aberta empurrava tudo para
   baixo e, com 100 indicados, a rolagem para chegar no rodape virava um
   expediente. A correcao e DUAS: nasce fechada, e quando abre tem altura
   maxima com rolagem POR DENTRO. O contador fica no cabecalho justamente
   para o afiliado ver "100 pessoas" sem precisar abrir. */
.abas { display: flex; flex-direction: column; gap: 14px; }
.aba { background: var(--opaco); border: 1px solid var(--borda); border-radius: var(--r-m); box-shadow: var(--profund); overflow: hidden; }
.aba-cabeca {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--texto-1);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: background-color .16s;
}
.aba-cabeca:hover { background: rgba(168, 85, 247, .07); }
.aba-seta {
  flex-shrink: 0;
  color: var(--roxo-claro);
  font-size: 12px;
  transition: transform .18s;
}
.aba-cabeca[aria-expanded="true"] .aba-seta { transform: rotate(90deg); }
.aba-titulo { flex: 1; min-width: 0; }
.aba-contagem { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.aba-corpo { border-top: 1px solid var(--borda); }
/* A altura maxima e o que impede o empurrao. 340px mostra umas 6 linhas: da
   para ler sem rolar, e o resto fica a um gesto. */
.aba-rolagem { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.aba-rolagem table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.aba-rolagem th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-3);
  padding: 11px 14px; background: var(--opaco);
  border-bottom: 1px solid var(--borda);
}
.aba-rolagem td { padding: 12px 14px; border-bottom: 1px solid rgba(168, 85, 247, .07); color: var(--texto-2); }
.aba-rolagem tbody tr:last-child td { border-bottom: 0; }
.aba-rolagem tbody tr:hover td { background: rgba(168, 85, 247, .05); }
.aba-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--borda);
  font-size: 12px; color: var(--texto-3);
}
.aba-rodape button {
  padding: 6px 13px; border-radius: 18px;
  border: 1px solid var(--borda-forte); background: rgba(168, 85, 247, .1);
  color: var(--texto-1); font: inherit; font-size: 12px; cursor: pointer;
}
.aba-rodape button:hover { background: rgba(168, 85, 247, .2); }

/* A barra de rolagem por dentro da tabela, no tom do painel. */
.aba-rolagem::-webkit-scrollbar { width: 9px; }
.aba-rolagem::-webkit-scrollbar-track { background: rgba(168, 85, 247, .06); }
.aba-rolagem::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, .3); border-radius: 6px; }
.aba-rolagem::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, .48); }

/* --- CELULAR ---------------------------------------------------------
   O grafico encolhe, o filtro encolhe, e a tabela vira rolagem de lado: em
   360px de largura, sete colunas espremidas ficam ilegiveis. */
@media (max-width: 1023px) {
  /* a altura do grafico muda pelo MESMO numero que a area — e o SVG le a
     variavel, entao os dois nunca ficam com alturas diferentes. */
  .grafico { padding: 16px 15px 12px; --altura-grafico: 158px; }
  .grafico-total { font-size: 21px; }
  .pilulas { width: 100%; }
  .pilulas .filtro-btn { flex: 1 1 auto; padding: 7px 8px; text-align: center; }
  .aba-cabeca { padding: 14px 15px; }

  /* A ROLAGEM DAS DADOS FICA TRAVADA NO EIXO VERTICAL.
     MEDIDO: antes era `overflow-x: auto` com `min-width: 560px` na tabela,
     e a lista solava para os dois lados — o defeito que o dono chamou de
     "solto para todos os angulos". Agora so desce. `touch-action: pan-y`
     faz o dedo nao arrastar a tabela de lado, e `overscroll-behavior`
     impede que a rolagem continue na pagina quando a lista chega ao fim. */
  .aba-rolagem {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .aba-rolagem th,
  .aba-rolagem td { padding: 10px 8px; font-size: 12px; }
  /* coluna opcional some antes de a tabela precisar de rolagem lateral */
  .aba-rolagem [data-opcional] { display: none; }
}