/* ============================================================================
   7k-utils.css — as utilitarias LITERAIS da 7k.bet.br
   ============================================================================

   PARA QUE SERVE
   O dono cola HTML tirado direto do 7k.bet.br, com as classes Tailwind deles
   (flex, gap-3.5, text-texts/60, sm:flex-row...). O sevenbets nao tem Tailwind
   e nao tem build. Esta folha traz a REGRA COMPILADA de cada classe, para que o
   HTML colado funcione sem traducao nenhuma.

   DE ONDE VEIO CADA REGRA
   Dos 3 blocos <style> embutidos na home deles (180.256 caracteres de CSS ja
   compilado). Cada regra abaixo foi EXTRAIDA, nunca escrita de memoria. Quem
   for acrescentar classe nova faz o mesmo: busca no HTML deles e copia. Se
   chutar, erra — a build da 7k customizou valores (ver .text-sm abaixo).

   A UNICA TROCA: o verde deles pelo amarelo da casa
     primary  #a1cd3d = rgb(161 205 61)  ->  #f9e30e = rgb(249 227 14)
     money    #d6ed16 = rgb(214 237 22)  ->  #f9f871 = rgb(249 248 113)
   As opacidades trocam pelo mesmo caminho, so o sufixo alpha continua igual:
     /10 = 1a   /15 = 26   /20 = 33   (e /5=0d /30=4d /40=66 /50=80 /60=99)
   NAO mudam: bg-primary #16182a, bg-secondary #1c1e34, texts #e0e0e0,
   titles #e0e0e0 (titles e texts sao a MESMA cor na build deles), button-text.

   POR QUE AS CORES SAO LITERAIS E NAO var(--primary)
   Porque na 7k elas sao literais. E porque o tema-7k.css:22-58 define
   `:root, body { --primary: ... !important }`: se esta folha usasse var(), o
   controle da cor sairia daqui e iria para la. Trocar literal por variavel
   QUEBRA a troca de cor da casa. Manter literal.

   NAO TEM RESET UNIVERSAL, E E DE PROPOSITO
   A 7k tem `*,:before,:after{box-sizing:border-box;border:0 solid}` e
   `*,:before,:after{box-sizing:border-box;margin:0;padding:0}`. Copiar isso
   para ca seria comodo e caro: esta folha entra pelo topbar.php, ou seja vale
   para as ~86 paginas. O `border:0 solid` zeraria a borda padrao de
   input/select/textarea/button/table/fieldset/hr, e o `margin:0;padding:0`
   derrubaria as margens de p/h1-h6/ul/ol nas paginas que nao tem reset proprio
   (carteira.php, sobre.php, termos.php, privacidade.php, jogo-responsavel.php).
   No lugar disso, as duas dependencias de preflight estao resolvidas DENTRO da
   propria utilitaria — ver .border e .tabular-nums.

   NAO TEM !important, E TAMBEM E DE PROPOSITO
   Utilitaria com !important vira armadilha permanente: impede qualquer ajuste
   pontual depois. As poucas regras do site que vencem estas daqui (os
   !important do tema-7k.css) se resolvem estreitando o seletor LA, nunca
   empilhando !important aqui.

   ONDE ESTA FOLHA E CARREGADA
   topbar.php, linha 21, logo depois do tema-7k.css (linha 20). Depois dele de
   proposito: assim ganha todo empate de especificidade. Como o topbar e
   incluido dentro do <body>, o <link> fica dentro do <body> tambem — irregular,
   mas ja e o padrao adotado aqui e funciona (mesmo motivo do carteira-7k.css).
   Ao editar esta folha, incrementar o ?v= la.
   ========================================================================== */


/* ══ 1. BASE ═══════════════════════════════════════════════════════════════
   Vazia por escolha. Ver "NAO TEM RESET UNIVERSAL" acima.
   Se um dia um bloco colado da 7k precisar mesmo do preflight deles, a saida
   segura e escopar em conteiner, nunca soltar no universal:
     .k7 *, .k7 :before, .k7 :after { box-sizing: border-box; border: 0 solid; }
   e envolver o HTML colado num <div class="k7">. Hoje nao e necessario.
   ========================================================================== */


/* ══ 2. LAYOUT ═════════════════════════════════════════════════════════════
   display, direcao, alinhamento e comportamento de caixa flex.
   ========================================================================== */

.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}

.flex-col{flex-direction:column}
.flex-row{flex-direction:row}

.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}

/* a 7k compila `flex:1`, e NAO o `flex:1 1 0%` do Tailwind padrao. Literal. */
.flex-1{flex:1}
.shrink-0{flex-shrink:0}

/* min-w-0 e o que permite ao truncate funcionar dentro de um filho flex:
   sem ele a largura minima automatica do item impede o corte. Anda em par
   com .truncate — se um sumir, o texto para de cortar e estoura o cartao. */
.min-w-0{min-width:0}

/* medidas fixas (avatar de iniciais: h-12 w-12 = 48x48) */
.h-12{height:3rem}
.w-12{width:3rem}


/* ══ 3. ESPACO ═════════════════════════════════════════════════════════════
   gap e padding. Escala da 7k: 1 = .25rem (4px).
   Atencao ao escape: a classe "gap-3.5" vira o seletor .gap-3\.5 — o ponto
   PRECISA da contrabarra, senao o CSS le como duas classes.
   ========================================================================== */

.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-3\.5{gap:.875rem}
.gap-4{gap:1rem}

.p-4{padding:1rem}
.p-5{padding:1.25rem}

.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}

.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}


/* ══ 4. FORMA ══════════════════════════════════════════════════════════════
   raio e borda.
   ========================================================================== */

.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-full{border-radius:9999px}

/* ATENCAO — NAO REMOVER O `border-style:solid` DAQUI.
   Na 7k a regra e so `.border{border-width:1px}`. Funciona la porque o CSS
   deles tem `*,:before,:after{box-sizing:border-box;border:0 solid}`, que crava
   border-style:solid em TODO elemento. O sevenbets nao tem esse reset: conferi
   os cinco resets universais do site (carteira-7k.css:30 e os `*{}` de
   perfil.php:72, premios.php:79, historico.php:83, affiliate.php:60) e nenhum
   define border-style. Sem o solid embutido aqui, border-style fica no default
   `none` e a borda simplesmente NAO APARECE — sem erro, sem aviso. Foi por isso
   que a regra saiu do literal: o literal, aqui, nao desenha nada.
   Quem for acrescentar .border-t / .border-b / .border-l / .border-r depois
   precisa do mesmo cuidado. */
.border{border-width:1px;border-style:solid}
.border-2{border-width:2px;border-style:solid}


/* ══ 5. TEXTO ══════════════════════════════════════════════════════════════
   tamanho, peso e corte.
   ========================================================================== */

/* ATENCAO — A ESCALA DA 7K NAO E A DO TAILWIND PADRAO.
   O .text-sm deles e 13px/18px (.8125rem/1.125rem), e nao os 14px/20px do
   default. Medido no CSS compilado da home deles. Quem escrever de memoria
   deixa o e-mail do cartao 1px maior que o original. Vale para a lista toda. */
.text-\[10px\]{font-size:10px}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.8125rem;line-height:1.125rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}

.font-semibold{font-weight:600}
.font-bold{font-weight:700}

/* ATENCAO — ESTA E A OUTRA REGRA QUE NAO E LITERAL, E TAMBEM POR NECESSIDADE.
   A 7k compila:
     .tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:
       var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
       var(--tw-numeric-spacing) var(--tw-numeric-fraction)}
   Os cinco var() nao tem fallback, e as variaveis so existem no bloco
   `*,:before,:after,::backdrop{--tw-ordinal: ; ...}` da build deles. Sem esse
   bloco a declaracao inteira fica invalida e o numero tabular NAO se aplica —
   falha silenciosa: a badge de id perde o alinhamento dos digitos e ninguem
   percebe. A forma abaixo da o mesmo resultado sem depender de preflight. */
.tabular-nums{font-variant-numeric:tabular-nums}

/* anda em par com .min-w-0 no pai flex — ver secao LAYOUT */
.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}


/* ══ 6. COR ════════════════════════════════════════════════════════════════
   Duas formas convivem aqui, as duas copiadas da 7k:
     - cor cheia:      rgb(R G B/var(--tw-*-opacity,1))  — o `,1` no fim E o
                       fallback, entao funciona sem preflight nenhum;
     - cor com alpha:  hex de 8 digitos, ex. #e0e0e099 = #e0e0e0 a 60%.
   Escape: a barra da opacidade vira \/ no seletor — "bg-primary/15" e
   .bg-primary\/15. Sem a contrabarra o seletor e invalido e a REGRA INTEIRA
   e descartada pelo navegador.
   ========================================================================== */

/* fundos — bg-secondary #1c1e34 nao muda */
.bg-bg-secondary{--tw-bg-opacity:1;background-color:rgb(28 30 52/var(--tw-bg-opacity,1))}

/* fundos do destaque — verde #a1cd3d trocado pelo amarelo #f9e30e */
.bg-primary\/10{background-color:#f9e30e1a}   /* 7k: #a1cd3d1a */
.bg-primary\/15{background-color:#f9e30e26}   /* 7k: #a1cd3d26 */

/* bordas — texts #e0e0e0 nao muda; primary trocado */
.border-texts\/5{border-color:#e0e0e00d}
.border-primary\/20{border-color:#f9e30e33}   /* 7k: #a1cd3d33 */
.border-primary{--tw-border-opacity:1;border-color:rgb(249 227 14/var(--tw-border-opacity,1))}  /* 7k: rgb(161 205 61/...) */

/* texto — titles/texts #e0e0e0 nao mudam; primary trocado */
.text-titles{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity,1))}
.text-texts\/60{color:#e0e0e099}
.text-primary{--tw-text-opacity:1;color:rgb(249 227 14/var(--tw-text-opacity,1))}  /* 7k: rgb(161 205 61/...) */


/* ══ 7. RESPONSIVO ═════════════════════════════════════════════════════════
   Breakpoints da 7k:  sm = 640   md = 768   lg = 1024

   MUDANCA DE SINTAXE, DE PROPOSITO: a build deles compila
   `@media (width>=640px)`, que e range query e exige Chrome 104+ / Safari 16.4+.
   Navegador mais velho IGNORA o bloco inteiro em silencio — o cartao ficaria
   empilhado no desktop de quem tem browser antigo, sem nenhuma pista do motivo.
   Transcrito para min-width: resultado identico, sem piso de navegador, e
   coerente com o que o resto do site ja escreve (carteira-7k.css:58 e :61,
   tema-7k.css:74 e :128).

   Estas regras vem por ultimo para vencerem as suas equivalentes sem prefixo
   por ORDEM, do mesmo jeito que na cascata da 7k. Nao reordenar.
   ========================================================================== */

/* ── sm: a partir de 640px ── */
@media (min-width: 640px) {
  .sm\:flex-row{flex-direction:row}
  .sm\:items-center{align-items:center}
  .sm\:justify-between{justify-content:space-between}
}

/* ── md: a partir de 768px ── */
@media (min-width: 768px) {
  .md\:p-5{padding:1.25rem}
}

/* ── margem de baixo ──────────────────────────────────────────────────────────────────────
   Usadas pelo contêiner do cartão de perfil na área da conta: `mb-4 lg:mb-6`.
   Atenção ao ponto de quebra: é lg (1024px), NÃO md (768px). Errar isso dá 24px de folga
   onde a 7k dá 16px, em toda a faixa de 768 a 1023. */
.mb-4{margin-bottom:1rem}
@media (min-width:1024px){
  .lg\:mb-6{margin-bottom:1.5rem}
}

/* ── imagem do cartão de bônus ────────────────────────────────────────────────────────────
   `w-20 h-20 object-contain` — 5rem = 80px. O -o-object-fit vem junto porque é assim que a
   folha deles compila; não faz diferença em navegador atual, mas é o valor real. */
.w-20{width:5rem}
.h-20{height:5rem}
.object-contain{-o-object-fit:contain;object-fit:contain}
/* ══ 8. PÁGINA DE DADOS (perfil.php) ═══════════════════════════════════════
   Utilitárias novas que o miolo da tela de Dados usa. Todas EXTRAÍDAS do CSS
   compilado da 7k (7k-css-raw.txt, os 180.260 caracteres tirados da home) e
   conferidas uma a uma antes de entrar aqui. As que já existiam nas seções
   2 a 7 não foram repetidas.

   Duas regras abaixo NÃO são o literal deles, pelo mesmo motivo do .border e
   do .tabular-nums já documentados acima: o literal depende do preflight da
   build da 7k, que esta folha de propósito não tem. Estão marcadas.

   Ordem: as sem prefixo primeiro, as de @media no fim da seção — assim
   md:/lg:/sm: e o :hover vencem as suas equivalentes por ordem de origem,
   igual à cascata da 7k. Não reordenar.
   ========================================================================== */


/* ── 8.1 espaço e margem ─────────────────────────────────────────────────── */

.mt-4{margin-top:1rem}
.mt-0\.5{margin-top:.125rem}
.mb-0\.5{margin-bottom:.125rem}
.ml-0{margin-left:0}

/* margem negativa de 1px: acerto ótico de selo/ícone contra a linha de texto */
.-mt-px{margin-top:-1px}

.py-4{padding-top:1rem;padding-bottom:1rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}

/* lista dividida dentro de um cartão: a primeira linha não leva folga em cima
   e a última não leva embaixo, para o padding do cartão não dobrar */
.first\:pt-0:first-child{padding-top:0}
.last\:pb-0:last-child{padding-bottom:0}

/* ATENÇÃO — ESTA NÃO É A REGRA LITERAL, E É DE PROPÓSITO.
   A 7k compila:
     .space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;
       margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
       margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}
   O --tw-space-y-reverse é declarado na própria regra, mas os calc() só
   resolvem porque o preflight deles (`*,:before,:after,::backdrop{...}`)
   garante a variável em todo elemento. Aqui, qualquer navegador que trate a
   custom property como inválida no contexto derruba o calc() inteiro e o
   espaçamento SOME sem aviso — o mesmo tipo de falha calada do .tabular-nums.
   Com reverse = 0 o resultado é fixo: .5rem em cima, 0 embaixo. Escrito direto. */
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem;margin-bottom:0}


/* ── 8.2 grade ───────────────────────────────────────────────────────────── */

.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}


/* ── 8.3 medidas ─────────────────────────────────────────────────────────── */

/* quadrado do ícone do cartão: w-8 h-8 = 32x32 */
.w-8{width:2rem}
.h-8{height:2rem}

/* bolinha do selo: 6x6 */
.w-1\.5{width:.375rem}
.h-1\.5{height:.375rem}

/* altura do SVG dentro do quadrado (a largura vai no atributo width do <svg>,
   porque a .w-4 NÃO foi levantada e não se inventa utilitária aqui) */
.h-4{height:1rem}

/* usada junto com .overflow-hidden e .opacity-0 para colapsar texto.
   SÓ serve acompanhada de uma variante que reabra (group-hover:max-w-[...]);
   sozinha, esconde o texto para sempre. Ver "notas". */
.max-w-0{max-width:0}


/* ── 8.4 texto ───────────────────────────────────────────────────────────── */

/* 9px é o tamanho do texto do selo verde na 7k — menor que o .text-[10px] do
   rótulo. Não arredondar para 10px, a diferença aparece. */
.text-\[9px\]{font-size:9px}

.uppercase{text-transform:uppercase}
.tracking-wider{letter-spacing:.05em}

/* leading-5 vem DEPOIS do .text-sm da seção 5 de propósito: quando as duas
   estão no mesmo elemento, o line-height que vale é 1.25rem, e não o
   1.125rem do .text-sm. É assim na 7k. */
.leading-5{line-height:1.25rem}
.leading-none{line-height:1}

.whitespace-nowrap{white-space:nowrap}


/* ── 8.5 cor ─────────────────────────────────────────────────────────────── */

/* bg-primary #16182a a 80% — é o fundo mais escuro das caixinhas internas
   (data de nascimento, nacionalidade). NÃO é a cor de destaque da casa:
   "bg-primary" aqui é o token de FUNDO da 7k, não o primary amarelo. */
.bg-bg-primary\/80{background-color:#16182acc}

/* texts #e0e0e0 em várias opacidades — nenhuma muda na troca de cor da casa */
.text-texts\/30{color:#e0e0e04d}
.text-texts\/35{color:#e0e0e059}
.text-texts\/50{color:#e0e0e080}
.text-texts\/80{color:#e0e0e0cc}

/* success #22bb33 — NÃO muda na troca de cor da casa (é o verde de estado,
   não o verde de marca que virou amarelo) */
.bg-success\/15{background-color:#22bb3326}
.bg-success{--tw-bg-opacity:1;background-color:rgb(34 187 51/var(--tw-bg-opacity,1))}
.text-success{--tw-text-opacity:1;color:rgb(34 187 51/var(--tw-text-opacity,1))}


/* ── 8.6 caixa e estado ──────────────────────────────────────────────────── */

.overflow-hidden{overflow:hidden}
.opacity-0{opacity:0}

/* o selo não é clicável: cursor de texto/mãozinha ali confunde */
.cursor-default{cursor:default}


/* ── 8.7 transição ───────────────────────────────────────────────────────── */

/* as duas .transition-* já trazem duration e timing embutidos (.15s) */
.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}

/* ORDEM OBRIGATÓRIA: estas duas TÊM de ficar depois das .transition-* acima.
   Mesma especificidade — quem vence é a ordem de origem. Se subirem uma linha,
   o .15s do .transition-all sobrescreve o .5s e a animação fica curta, sem
   nenhum sinal de erro. */
.duration-500{transition-duration:.5s}
.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}


/* ── 8.8 responsivo e hover (por último, ver cabeçalho da seção) ─────────── */

/* sm: a partir de 640px */
@media (min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* md: a partir de 768px — vence o .p-5 da seção 3 por ordem */
@media (min-width:768px){
  .md\:p-6{padding:1.5rem}
}

/* lg: a partir de 1024px — vence o .mt-4 da 8.1 por ordem.
   Atenção: é lg (1024), NÃO md. Mesmo cuidado do .mb-4 / .lg\:mb-6 acima. */
@media (min-width:1024px){
  .lg\:mt-6{margin-top:1.5rem}
}

/* a 7k envelopa TODO :hover neste media query: no celular o hover "gruda"
   depois do toque. Copiado literal, inclusive o envelope. */
@media (hover:hover) and (pointer:fine){
  .hover\:bg-texts\/5:hover{background-color:#e0e0e00d}
}

/* ── preflight de botão, só onde faz falta ────────────────────────────────────────────────
   Na 7k o reset do Tailwind zera fundo e borda de todo <button>. Aqui não existe esse reset,
   então um <button> sem background declarado sai com o CINZA padrão do navegador — foi o que
   aconteceu com o lápis da tela de Dados.
   Um `button { background: transparent }` global NÃO serve: medi e a home tem 25 botões que
   hoje caem no cinza padrão; mexer neles às cegas é risco sem ganho. Por isso a regra mira a
   combinação que SÓ aparece na marcação literal da 7k. */
/* EDICAO FEITA EM 17/09: era `button.w-8.h-8.rounded-lg` (0,3,1). O X do cabecalho
   da tela de saque e w-8 h-8 rounded-lg COM bg-auth-bg-close (0,1,0) — a forma antiga
   apagava esse fundo. Com :where() a especificidade cai para 0,0,1 e perde de qualquer
   utilitaria, continuando a matar o cinza do navegador onde nada compete. Conferido:
   o unico uso vivo e o lapis de perfil.php:533, que nao tem fundo proprio. */
button:where(.w-8.h-8.rounded-lg),
button:where(.w-9.h-9.rounded-lg) {
  background-color: transparent;
  background-image: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
/* ══ 9. TELA DE HISTÓRICO (historico.php) ══════════════════════════════════
   Só o que FALTAVA. Tudo abaixo foi conferido no CSS compilado da 7k
   (scratchpad/7k-all.css) com grep pelo seletor exato — nada foi escrito de
   memória. As três regras que NÃO são o literal deles estão marcadas uma a uma.

   Troca de cor da casa aplicada: primary #a1cd3d -> #f9e30e.
   NÃO entram na troca: success #22bb33, error #f1416c, info #0096ff, warning
   #ff9f43 e texts #e0e0e0 — são cores de estado/texto, não a cor da marca.

   ORDEM DESTA SEÇÃO (não reordenar): sem prefixo -> @media md/lg -> :hover.
   E leia a nota de "reposição de ordem" em 9.7/9.8: como este bloco é
   ACRESCENTADO NO FIM do arquivo, três regras que já existem mais acima
   precisam ser reescritas aqui embaixo para não perderem a disputa por ordem.
   ========================================================================== */


/* ── 9.1 espaço ──────────────────────────────────────────────────────────── */

.p-3{padding:.75rem}
/* escape obrigatório: a classe "p-3.5" vira .p-3\.5 — sem a contrabarra o
   navegador lê ".p-3" + ".5" e descarta a regra inteira */
.p-3\.5{padding:.875rem}

.mt-3{margin-top:.75rem}
.mb-3{margin-bottom:.75rem}

.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.gap-1\.5{gap:.375rem}


/* ── 9.2 medidas ─────────────────────────────────────────────────────────── */

/* bolinha/pontinho de status: 12x12 */
.w-3{width:.75rem}
.h-3{height:.75rem}

/* quadrado do ícone da linha: 40x40. A folha já tinha o 32 (w-8/h-8) e o 48
   (w-12/h-12); este é o do meio, usado nas linhas de lista da 7k. */
.w-10{width:2.5rem}
.h-10{height:2.5rem}

.w-full{width:100%}


/* ── 9.3 forma ───────────────────────────────────────────────────────────── */

/* 4px. NÃO confundir com .rounded-md (6px, linha 121).
   Escala da 7k: rounded .25 / md .375 / lg .5 / xl .75 / 2xl 1 / 3xl 1.5rem. */
.rounded{border-radius:.25rem}


/* ── 9.4 texto ───────────────────────────────────────────────────────────── */

/* .text-left não é decoração: o UA stylesheet centraliza o texto de todo
   <button>. Chip/linha clicável sem esta classe sai com o rótulo no meio. */
.text-left{text-align:left}
.text-right{text-align:right}


/* ── 9.5 cor ─────────────────────────────────────────────────────────────── */

/* info #0096ff — cor de ESTADO, não muda na troca da casa. A família inteira
   existe na build deles (bg-info, bg-info/10, border-info/20...), é token de
   verdade. O ",1" dentro do var() é fallback próprio, então o .text-info
   funciona sem preflight nenhum — copiado literal. */
.bg-info\/15{background-color:#0096ff26}
.text-info{--tw-text-opacity:1;color:rgb(0 150 255/var(--tw-text-opacity,1))}

/* texts #e0e0e0 em hex de 8 dígitos (os dois últimos são o alpha) */
.bg-texts\/5{background-color:#e0e0e00d}
/* a utilitária de fundo mais usada da 7k: 161 ocorrências no HTML da home */
.bg-texts\/10{background-color:#e0e0e01a}
.text-texts\/40{color:#e0e0e066}

/* bordas. SÓ pintam acompanhadas de .border/.border-2 (linhas 137/138), que
   são quem traz border-width E o border-style:solid que esta folha embute de
   propósito — ver a nota grande da seção 4. Cor de borda sozinha não desenha. */
.border-texts\/10{border-color:#e0e0e01a}
.border-texts\/20{border-color:#e0e0e033}

/* error #f1416c — cor de ESTADO, não muda. Par do .bg-success\/15 /
   .text-success que já estão na folha (351/353); é o selo "negado/falhou"
   (transactions.status = 'failed', e 'cancelled' se você decidir blindar). */
.bg-error\/15{background-color:#f1416c26}
.text-error{--tw-text-opacity:1;color:rgb(241 65 108/var(--tw-text-opacity,1))}

/* AMARELO DE "PENDENTE" — decisão sua, ver "decisoes".
   (a) o recomendado é bg-primary/15 + text-primary, que JÁ estão na folha
       (linhas 190 e 200) e deixam histórico igual à carteira
       (carteira-7k.css:254 .wl-status-espera).
   (b) se você preferir o token "warning" real da 7k — que é LARANJA, não
       amarelo — descomente as duas linhas abaixo. São o literal deles:
.bg-warning\/15{background-color:#ff9f4326}
.text-warning{--tw-text-opacity:1;color:rgb(255 159 67/var(--tw-text-opacity,1))}
*/


/* ── 9.6 caixa e cursor ──────────────────────────────────────────────────── */

.inline-block{display:inline-block}
.cursor-pointer{cursor:pointer}
.overflow-x-auto{overflow-x:auto}

/* SÃO DUAS REGRAS, nesta ordem, exatamente como na build deles. Copiar as
   duas: só o scrollbar-width:none não esconde a barra no Chrome/Safari.
   ATENÇÃO: a 7k também tem um ::-webkit-scrollbar{display:none} UNIVERSAL na
   folha; esse NÃO foi copiado e não deve ser — mataria a barra de rolagem das
   86 páginas do site. Aqui só a régua de chips perde a barra. */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}


/* ── 9.7 transição ───────────────────────────────────────────────────────── */

.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}

/* REPOSIÇÃO DE ORDEM — NÃO APAGAR, NÃO É DUPLICATA BOBA.
   .duration-500 e .ease-in-out já existem nas linhas 375/376, ou seja ACIMA
   deste bloco. A .transition-transform acima traz transition-duration:.15s
   embutido e, por estar mais embaixo, venceria o .5s num elemento que use
   "transition-transform duration-500" — a animação encurtaria sem nenhum erro
   no console, exatamente a mesma falha calada já documentada na linha 371.
   Reescrever as duas aqui devolve a precedência correta. */
.duration-500{transition-duration:.5s}
.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}


/* ── 9.8 responsivo (md/lg por último, ver cabeçalho da seção) ───────────── */

/* Breakpoints da 7k: sm=640 md=768 lg=1024.
   A build deles compila @media (width>=768px) (range query, exige Chrome 104+
   / Safari 16.4+). Transcrito para min-width, igual ao resto desta folha. */
@media (min-width:768px){
  .md\:p-4{padding:1rem}
  /* REPOSIÇÃO DE ORDEM: .md\:p-5 (linha 227) e .md\:p-6 (linha 388) ficaram
     ACIMA das .p-3 / .p-3\.5 que acabei de acrescentar em 9.1. Num elemento
     com "p-3.5 md:p-5" o padding sem prefixo venceria por ordem e o desktop
     ficaria com 14px onde a 7k dá 20px. Reescritas aqui, voltam a vencer. */
  .md\:p-5{padding:1.25rem}
  .md\:p-6{padding:1.5rem}
}

@media (min-width:1024px){
  /* REPOSIÇÃO DE ORDEM, mesmo motivo: .lg\:mt-6 (linha 394) e .lg\:mb-6
     (linha 237) ficaram acima das novas .mt-3 / .mb-3. */
  .lg\:mt-6{margin-top:1.5rem}
  .lg\:mb-6{margin-bottom:1.5rem}
}


/* ── 9.9 hover ───────────────────────────────────────────────────────────── */

/* A 7k envelopa TODO :hover em (hover:hover) and (pointer:fine): no celular o
   hover "gruda" depois do toque e o chip fica aceso para sempre. Envelope
   copiado literal, igual ao bloco da linha 399. */
@media (hover:hover) and (pointer:fine){
  /* substituta do "hover:bg-texts/8" que veio no HTML: esse degrau NÃO EXISTE
     na 7k (a escala deles é 5/10/15/20/25/30/40/50/60/80/90/95; busca por
     '\/8{' na build inteira = zero resultados). Use /10 aqui ou troque a
     classe no HTML por hover:bg-texts/5, que já está na linha 400. */
  .hover\:bg-texts\/10:hover{background-color:#e0e0e01a}
  .hover\:border-texts\/10:hover{border-color:#e0e0e01a}
  .hover\:text-texts:hover{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity,1))}
  .hover\:text-texts\/60:hover{color:#e0e0e099}
}


/* ── 9.10 preflight de botão — extensão para esta tela ───────────────────────────────────
   O preflight das linhas 410-418 mira button.w-8.h-8.rounded-lg / .w-9.h-9.rounded-lg, que
   é o lápis da tela de Dados. NÃO pega os botões desta tela, e — mais importante — ele não
   PODE ser copiado no mesmo formato aqui. Motivo, e é a diferença que importa:

   o lápis não tem utilitária de fundo, borda nem padding, então um seletor forte como
   `button.w-8.h-8.rounded-lg` (especificidade 0,4,1) não atropela nada. Os botões DESTA tela
   têm: o chip leva `.border .border-texts/10 .px-3 .py-1.5` e o chip ligado leva
   `.bg-primary/15`. Escrito no formato antigo, o reset venceria todas essas utilitárias
   (0,1,0) e o resultado seria, tudo calado: chip sem contorno (border:0 mata o .border),
   chip achatado (padding:0 mata .px-3/.py-1.5) e o chip SELECIONADO sem o amarelo
   (background-color:transparent mata .bg-primary/15). Mesma família de falha do .border e do
   .tabular-nums já documentados acima.

   Por isso os dois blocos abaixo usam :where(), que zera a especificidade do que está dentro
   dele. Regra de autor com especificidade 0,0,0 ou 0,0,1 ainda ganha do UA stylesheet do
   navegador (origem vence especificidade) mas PERDE de qualquer utilitária — que é
   exatamente o que se quer: o reset só age onde o HTML não declarou nada.
   Suporte: Chrome 88+, Safari 14+, Firefox 78+. Navegador mais velho descarta a regra e o
   botão volta ao cinza de hoje — degrada para o estado atual, não quebra layout.

   NÃO PEGA NENHUM BOTÃO ANTIGO — conferido, não suposto. Rodei
     grep -cE '<button[^>]*class="[^"]*(shrink-0|px-3|py-1\.5|text-xs|transition-all|transition-colors|gap-1\.5|rounded-lg)' *.php
   nos 86 .php e em includes/: ZERO ocorrências. Hoje nenhum botão do site usa utilitária
   Tailwind — todos têm classe própria (error-btn, dep-submit, pr-chip, period-tab, btn-submit,
   sv-*, h7-*, tabbar-fab...). Os 25 botões da home que vivem do cinza padrão ficam intocados.

   BLOCO A (recomendado): reset por ESCOPO. Cobre qualquer botão/input que você escrever no
   miolo novo, mesmo os que eu não previ, e não depende de eu ter acertado a lista de classes.
   Exige que o miolo inteiro fique dentro de um contêiner com a classe k7-hist — é o mesmo
   recurso de escopo que o cabeçalho desta folha já sugere na linha 61. Especificidade 0,0,0:
   perde para TUDO que for classe, então é impossível ele atropelar utilitária. */
:where(.k7-hist) :where(button, input, select, textarea){
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  background-image: none;
  border: 0 solid;          /* o "solid" replica o preflight da 7k; largura 0 = invisível */
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
/* o input de data continua com cursor de texto onde faz sentido */
:where(.k7-hist) :where(input[type="text"], input[type="search"], textarea){cursor:text}

/* BLOCO B (rede de segurança): mira as duas combinações exatas de <button> que você me passou
   desta tela, para o caso de algum botão nascer FORA do contêiner .k7-hist. Os dois blocos
   convivem sem conflito — ambos perdem para qualquer utilitária. Se a marcação final usar
   outra combinação, me mande a lista de classes de cada botão que eu estendo aqui; não vou
   soltar um button{} global. */
button:where(.shrink-0.rounded-lg.px-3.py-1\.5.text-xs.font-semibold),
button:where(.shrink-0.flex.items-center.gap-1\.5.text-xs.font-semibold){
  -webkit-appearance: none;
          appearance: none;
  background-color: transparent;
  background-image: none;
  border: 0 solid;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ── reset de link dentro dos blocos literais ─────────────────────────────────────────────
   No HTML da 7k os chips do histórico são <button>; aqui são <a>, para o filtro funcionar
   sem depender de JS. O preflight do Tailwind faz `a { color: inherit; text-decoration:
   inherit }` — sem isso o navegador pinta de azul e sublinha, que foi o que aconteceu.
   Escopado ao bloco do histórico: nenhum link do resto do site é tocado. */
.k7-hist a { color: inherit; text-decoration: none; }
/* == 10. TELA "INDIQUE E GANHE" (affiliate.php) ==============================
   So o que FALTAVA. Toda regra conferida no CSS compilado da 7k
   (scratchpad/7k-all.css, 180.260 chars). Nada aqui e chute.
   Cor da casa ja trocada: primary #a1cd3d -> #f9e30e.
   success #22bb33, error #f1416c, info #0096ff NAO mudam.
   ORDEM (nao reordenar): sem prefixo -> sm -> md -> lg -> hover.
   ========================================================================= */

/* -- 10.1 espacamento -- */
.gap-5{gap:1.25rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.pt-2{padding-top:.5rem}
/* par -mx-1 / px-1: trilha rolavel de chips, para o foco do primeiro e do
   ultimo chip nao ficar cortado na borda do overflow. */
.-mx-1{margin-left:-.25rem;margin-right:-.25rem}
.px-1{padding-left:.25rem;padding-right:.25rem}

/* -- 10.2 tamanho -- */
.h-1{height:.25rem}
/* alvo de toque de 44px da paginacao. Colchete escapado no seletor. */
.min-w-\[44px\]{min-width:44px}

/* -- 10.3 tipografia -- */
.text-3xl{font-size:1.875rem;line-height:2.25rem}
/* sem aspas nos nomes compostos: e assim que a build deles emite, e e valido */
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}
.leading-relaxed{line-height:1.625}
.text-center{text-align:center}
.select-all{-webkit-user-select:all;user-select:all}

/* -- 10.4 flex / alinhamento -- */
.flex-wrap{flex-wrap:wrap}
.self-start{align-self:flex-start}
/* ATENCAO: .items-start esta no FIM do arquivo e tem a mesma especificidade
   (0,1,0) de .sm\:items-center da LINHA 221 -> venceria por ordem e
   "items-start sm:items-center" ficaria no topo TAMBEM no desktop, sem erro
   no console. Por isso .sm\:items-center esta reposta no bloco sm (10.10).
   Nao apague uma sem apagar a outra. */
.items-start{align-items:flex-start}
/* .hidden TEM de vir depois de .flex (linha 70), .inline-flex (71) e .grid.
   E a ordem da build deles. No fim do arquivo ja nasce certa. */
.hidden{display:none}

/* -- 10.5 cores -- */
/* bg-primary e token de FUNDO (#16182a), nao o amarelo da casa: nao muda */
.bg-bg-primary{--tw-bg-opacity:1;background-color:rgb(22 24 42/var(--tw-bg-opacity,1))}
.bg-bg-primary\/50{background-color:#16182a80}
/* hex de 4 digitos = transparent; literal deles */
.border-transparent{border-color:#0000}
.text-texts\/70{color:#e0e0e0b3}
.border-primary\/25{border-color:#f9e30e40}   /* 7k: #a1cd3d40 */
.bg-success\/10{background-color:#22bb331a}
/* o minificador deles colapsou para #2b33 (4 digitos, expande exatamente para
   #22bb3333). Escrevo em 8 digitos: #2b33 parece erro de digitacao e alguem
   "conserta" errado depois. Mesmo pixel. */
.border-success\/20{border-color:#22bb3333}
/* 7k: rgb(161 205 61) */
.bg-button-bg{--tw-bg-opacity:1;background-color:rgb(249 227 14/var(--tw-bg-opacity,1))}
/* #1c1e34 - ja e o mesmo do deposito, NAO muda */
.text-button-text{--tw-text-opacity:1;color:rgb(28 30 52/var(--tw-text-opacity,1))}

/* -- 10.6 gradiente da barrinha (h-1 w-12) --
   FALHA CALADA se copiado literal. O literal da 7k e
     .from-primary{--tw-gradient-from:#a1cd3d var(--tw-gradient-from-position);...}
   e as tres *-position so existem no preflight DELES, declaradas VAZIAS:
     *,:before,:after,::backdrop{ ... --tw-gradient-from-position: ; ... }
   (conferido no arquivo). Sem esse bloco a var() nao resolve e nao tem
   fallback -> --tw-gradient-from invalida -> --tw-gradient-stops invalida ->
   background-image cai para 'none'. A barrinha some, console limpo. Mesma
   familia do .tabular-nums (linha 169) e do .border (linha 137).
   Solucao: tirar o " var(--tw-*-position)". Como na propria 7k essas
   variaveis valem VAZIO, elas nunca acrescentam nada ao valor final: tirar
   nao muda um pixel.
   MANTER A ORDEM from < via < to (via e to disputam a mesma
   --tw-gradient-to; e a ordem da build deles).
   Pintado: linear-gradient(to right,#f9e30e,#f9e30e99,#f9e30e00).
   HERANCA: --tw-gradient-stops e custom property, logo HERDA. Um filho com
   bg-gradient-to-r dentro de um pai com from-primary herda os stops do pai.
   Mesmo comportamento da build deles: nao e regressao. */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.from-primary{--tw-gradient-from:#f9e30e;--tw-gradient-to:#f9e30e00;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-primary\/60{--tw-gradient-to:#f9e30e00;--tw-gradient-stops:var(--tw-gradient-from),#f9e30e99,var(--tw-gradient-to)}
.to-transparent{--tw-gradient-to:#f9e30e00}

/* -- 10.7 estados que NAO sao :hover --
   Conferido na build da 7k: TODO :hover esta dentro de
   @media (hover:hover) and (pointer:fine); a familia disabled: e
   aria-disabled: NAO esta. Se caírem no envelope por descuido, o botao
   desabilitado nao apaga no celular, sem aviso.
   .disabled\:opacity-30 so pega <button disabled> de verdade (:disabled nao
   existe em <a>). Paginacao feita com <a> usa aria-disabled="true" + a classe
   abaixo, que e a que a 7k tem para isso. */
.disabled\:opacity-30:disabled{opacity:.3}
.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}

/* -- 10.8 reset de button/input/a desta tela --
   Armadilha 3: o *{margin:0;padding:0;box-sizing:border-box;outline:none} da
   propria affiliate.php (linha 60) NAO zera background, border, font-family
   nem appearance de <button>: o cinza padrao e a borda outset do UA continuam
   vindo. E o preflight da LINHA 410 desta folha so mira
   button.w-8.h-8.rounded-lg / button.w-9.h-9.rounded-lg: nenhum botao novo
   desta tela bate com ele.
   Por que :where(): especificidade 0,0,0. Origem de autor vence o UA
   stylesheet (o cinza morre), mas PERDE de qualquer utilitaria, entao
   .border, .px-3 e .bg-primary/15 dos chips continuam pintando. E o unico
   formato seguro para botoes que declaram borda/padding/fundo por classe.
   NAO propor button{} global: a home tem 25 botoes que dependem do cinza.
   Exige envolver o miolo inteiro em <div class="k7-ind">.
   Suporte Chrome 88+/Safari 14+/Firefox 78+; navegador mais velho descarta a
   regra e o botao volta ao cinza de hoje (degrada, nao quebra layout). */
:where(.k7-ind) :where(button, input, select, textarea){
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  background-image: none;
  border: 0 solid;      /* o "solid" replica o preflight da 7k; largura 0 = invisivel */
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
:where(.k7-ind) :where(input[type="text"], input[type="search"], input[type="date"], textarea){cursor:text}

/* Armadilha 4: <a> em bloco literal sai AZUL E SUBLINHADO. Mesmo tratamento
   do .k7-hist a (linha 659), so trocando o escopo. */
.k7-ind a { color: inherit; text-decoration: none; }

/* -- 10.9 ANEXO: utilitarias que a LISTA do briefing nao trouxe --
   A lista veio de uma marcacao SUPOSTA, nao do HTML literal da 7k (que NAO
   esta no scratchpad - ver riscos). Estas onze sao feijao-com-arroz de
   qualquer tela deles, existem na build da 7k, NAO existem nesta folha e hoje
   NENHUM .php do site as usa (grep = 0), entao acrescenta-las nao muda nada do
   que ja esta no ar. Se a marcacao final nao usar alguma, ela fica inerte; se
   usar e nao estiver aqui, some calada. */
.relative{position:relative}
.justify-end{justify-content:flex-end}
.ml-auto{margin-left:auto}
.text-xl{font-size:1.25rem;line-height:1.75rem}
/* .text-texts sem opacidade: a folha so tem a versao :hover (linha 581) */
.text-texts{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity,1))}
/* ARMADILHA 1: o literal da 7k e so {border-bottom-width:1px} - funciona la
   pelo *{border:0 solid} do preflight deles. AQUI o border-style tem de vir
   junto, senao o divisor das secoes some sem erro. E o que o aviso da linha
   135 desta folha ja mandava fazer. */
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
/* ATENCAO: estas quatro obrigam o bloco @media lg de 10.12 (armadilha 5).
   .lg\:mt-6 (564) e .lg\:mb-6 (565) disputam margin-top/bottom com elas e
   ficaram ACIMA. O cartao de perfil desta pagina usa "mb-4 lg:mb-6". */
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}

/* -- 10.10 @media sm (640px) --
   A build deles compila @media (width>=640px) (range query, Chrome 104+ /
   Safari 16.4+). Aqui vai como min-width, que roda em tudo. */
@media (min-width:640px){
  .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .sm\:flex-none{flex:none}
  /* .sm\:inline-flex ANTES de .sm\:hidden: ordem do grupo display na build
     deles. O par "hidden sm:inline-flex" / "sm:hidden" troca o rotulo curto
     do botao de compartilhar pelo longo a partir de 640px. */
  .sm\:inline-flex{display:inline-flex}
  .sm\:hidden{display:none}
  /* REPOSICAO OBRIGATORIA - ver nota do .items-start em 10.4 */
  .sm\:items-center{align-items:center}
}

/* -- 10.11 @media md (768px) --
   REPOSICAO DE ORDEM, mesma convencao das linhas 551-558: as novas .py-3 /
   .pt-2 / .px-1 sao LONGHANDS de padding e entraram depois do ultimo
   .md\:p-6 (linha 558). Num elemento "px-4 py-3 md:p-6" o py-3 venceria o
   shorthand no desktop. Levo .md\:p-4 e .md\:p-5 junto para o bloco nao ficar
   pela metade (includes/usuario-perfil.php usa "p-4 md:p-5"). */
@media (min-width:768px){
  .md\:p-4{padding:1rem}
  .md\:p-5{padding:1.25rem}
  .md\:p-6{padding:1.5rem}
}

/* -- 10.12 @media lg (1024px) --
   REPOSICAO DE ORDEM, mesmo motivo das linhas 561-565: as .mt-1/.mt-2/.mb-1/
   .mb-2 do anexo 10.9 entraram DEPOIS do ultimo .lg\:mt-6 / .lg\:mb-6 (564/
   565), mesma especificidade, venceriam por ordem e a folga do cartao de
   perfil quebraria a partir de 1024px.
   Se voce NAO usar o anexo 10.9, este bloco sai junto com ele. */
@media (min-width:1024px){
  .lg\:mt-6{margin-top:1.5rem}
  .lg\:mb-6{margin-bottom:1.5rem}
}

/* -- 10.13 @media hover --
   Envelope copiado literal da 7k: evita o hover "grudado" apos o toque no
   celular. Nao precisa repor nada do bloco de hover antigo (399-401 e
   574-583): o :hover conta como classe, entao .hover\:*:hover tem 0,2,0 e
   vence as novas 0,1,0 independente de ordem. */
@media (hover:hover) and (pointer:fine){
  .hover\:bg-bg-primary\/80:hover{background-color:#16182acc}
  .hover\:opacity-90:hover{opacity:.9}
  .hover\:bg-primary\/20:hover{background-color:#f9e30e33}   /* 7k: #a1cd3d33 */
  .hover\:text-texts\/70:hover{color:#e0e0e0b3}
}

/* -- 10.14 NAO EXISTE: hover:bg-texts/8 --
   Grep por "texts\/8{" nos 180.260 chars do CSS compilado da 7k = ZERO. A
   escala deles e 5/10/15/20/25/30/40/50/60/70/80/90/95: o degrau /8 nao
   existe. Nao inventar (8% de #e0e0e0 daria #e0e0e014, que nenhuma outra tela
   usa). No HTML, trocar por hover:bg-texts/10 (linha 579) ou hover:bg-texts/5
   (linha 400) - as duas ja existem.
   ========================================================================= */

/* -- 10.15 EDICAO PENDENTE NA LINHA 410 (nao e append; decidir antes) --
   O preflight atual
     button.w-8.h-8.rounded-lg, button.w-9.h-9.rounded-lg { background-color:
     transparent; background-image:none; border:0; padding:0; ... }
   tem especificidade 0,3,1. Se algum botao de icone 32x32 desta tela levar
   TAMBEM bg-bg-primary/50 ou border border-texts/10, a linha 410 mata as duas
   (0,1,0) e o :where() de 10.8 nao salva. Duas saidas, escolha uma:
   (a) nao usar w-8 h-8 rounded-lg em botao com fundo/borda nesta tela; ou
   (b) reescrever as linhas 410-411 assim (mesmo efeito na tela de Dados,
       especificidade cai para 0,0,1 e passa a perder de utilitaria):
         button:where(.w-8.h-8.rounded-lg),
         button:where(.w-9.h-9.rounded-lg) { ...mesmas declaracoes... }
   Conferi: nenhum .php usa hoje w-8/h-8 com bg-* ou border-* junto, entao (b)
   nao muda nada do que esta no ar. */

/* ═══════════════════════════════════════════════════════════════════════════
   11. TELA DE SAQUE (sacar.php)
   As 46 classes que o HTML da 7k pede e ainda não existiam aqui. Cada valor
   foi lido do CSS compilado deles; a única troca é a cor da casa
   (primary #a1cd3d → #f9e30e). success/error/info/warning NÃO mudam.
   ORDEM (não reordenar): preflight → sem prefixo → display → @media sm.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- 11.1 preflight de campo e botão, escopado em .k7-saque --
   Sem isto os 9 botões e os 2 campos saem com o cinza e a fonte do navegador.
   NÃO pode ser button{} global: a home depende do cinza em 25 botões.
   Especificidade 0,0,0 — mata o padrão do navegador e perde para QUALQUER
   utilitária, então .border, .px-4 e .bg-primary/10 continuam pintando.
   O `0 solid` é de propósito: as .border* da 7k são só border-width, e sem um
   border-style herdado a borda sumiria. */
:where(.k7-saque) :where(button,input,textarea){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
}
/* o <select> fica FORA do appearance:none de propósito — o preflight do
   Tailwind que a 7k usa também não mexe nisso, e sem ele a setinha nativa
   do campo sumiria e o jogador não saberia que dá para abrir. */
:where(.k7-saque) :where(button,input,select,textarea){
  background-color:transparent;background-image:none;
  border:0 solid;padding:0;margin:0;
  color:inherit;font:inherit;line-height:inherit;
  box-sizing:border-box;cursor:pointer;
}
:where(.k7-saque) :where(input[type="text"],input[type="number"],textarea){cursor:text}
/* link herda cor e sublinhado — NÃO usar `text-decoration:none` como no
   .k7-hist: aquilo tem 0,1,1 e mataria o .underline (0,1,0) desta tela. */
:where(.k7-saque) :where(a){color:inherit;text-decoration:inherit}

/* -- 11.2 espaço (longhands de padding: obrigam repor o bloco @media md? NÃO,
   porque nenhum elemento desta tela usa md:p-*; conferido no HTML alvo) -- */
.pl-4{padding-left:1rem}
.pr-1{padding-right:.25rem}
.pr-3{padding-right:.75rem}

/* -- 11.3 caixa e tamanho -- */
.w-5{width:1.25rem}
.h-5{height:1.25rem}
.w-auto{width:auto}
.h-full{height:100%}
.max-w-none{max-width:none}
.self-end{align-self:flex-end}
.self-stretch{align-self:stretch}
.items-stretch{align-items:stretch}
.flex-shrink-0{flex-shrink:0}
.overflow-y-hidden{overflow-y:hidden}
.scroll-smooth{scroll-behavior:smooth}
.\[overflow-anchor\:none\]{overflow-anchor:none}
/* snap-start sozinha NÃO rola nada: o pai precisaria de snap-x + snap-mandatory.
   A .snap-x deles depende de var(--tw-scroll-snap-strictness) sem fallback e
   morreria calada aqui. Fica só a âncora, que é o que o HTML pede. */
.snap-start{scroll-snap-align:start}
.select-none{-webkit-user-select:none;user-select:none}

/* -- 11.4 tipografia -- */
.underline{text-decoration-line:underline}
.underline-offset-2{text-underline-offset:2px}

/* -- 11.5 cor --
   payments-* e primary-foreground NÃO existem como var() na build deles
   (grep por "--payments" = zero); só aparecem já resolvidos. Mantidos literais.
   primary-foreground é a TINTA QUE VAI EM CIMA do amarelo — não acompanha a
   troca de cor da casa, senão o texto do botão sumiria. Continua #1c1e34. */
.bg-transparent{background-color:transparent}
.bg-bg-secondary\/40{background-color:#1c1e3466}
.bg-primary\/50{background-color:#f9e30e80}                 /* 7k: #a1cd3d80 */
/* o par LIGADO do botão Sacar — o JS troca bg-primary/50+text-primary-foreground/70
   por estes dois quando o valor fica válido. Nunca estão os quatro juntos. */
.bg-primary{--tw-bg-opacity:1;background-color:rgb(249 227 14/var(--tw-bg-opacity,1))}   /* 7k: 161 205 61 */
.text-primary-foreground{--tw-text-opacity:1;color:rgb(28 30 52/var(--tw-text-opacity,1))}
.text-texts\/25{color:#e0e0e040}
.text-primary-foreground\/70{color:#1c1e34b3}
.text-warning{--tw-text-opacity:1;color:rgb(255 159 67/var(--tw-text-opacity,1))}
.bg-payments-bg-inputs{--tw-bg-opacity:1;background-color:rgb(59 62 94/var(--tw-bg-opacity,1))}
.text-payments-text-inputs{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity,1))}
.placeholder\:text-texts\/25::placeholder{color:#e0e0e040}
.placeholder\:text-payments-text-inputs\/30::placeholder{color:#e0e0e04d}

/* -- 11.6 estado -- */
.border-0{border-width:0px}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.opacity-60{opacity:.6}
/* SÓ COSMÉTICO: não bloqueia clique nem submit. Quem trava de verdade é o
   atributo `disabled` no <button> — o JS da página põe e tira os dois juntos. */
.cursor-not-allowed{cursor:not-allowed}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}

/* ANEL DE FOCO SEM PREFLIGHT — mesma armadilha do tabular-nums e do gradiente.
   O literal da 7k é box-shadow montado com --tw-ring-inset, --tw-ring-offset-
   width, --tw-ring-offset-color, --tw-ring-color e --tw-shadow, todas
   declaradas só no reset universal do Tailwind, que esta folha não copia de
   propósito. Sem elas o box-shadow inteiro fica inválido e o anel NÃO APARECE,
   sem um erro sequer no console. Valor direto, então. A --k7-ring é nossa e tem
   fallback, por isso nunca fica calada.
   .ring-0 ANTES de .ring-1: mesma especificidade, decide a ordem. */
.ring-0{box-shadow:none}
.focus\:border-0:focus{border-width:0px}
.focus\:ring-0:focus{box-shadow:none}
.focus\:ring-1:focus{box-shadow:0 0 0 1px var(--k7-ring,#f9e30e)}
.focus\:ring-primary:focus{--k7-ring:#f9e30e}               /* 7k: #a1cd3d */

.disabled\:cursor-default:disabled{cursor:default}
.disabled\:no-underline:disabled{text-decoration-line:none}

/* -- 11.7 display (depois das de cor, como na build deles) -- */
.block{display:block}

/* -- 11.8 @media sm (640px) --
   REPOSIÇÃO OBRIGATÓRIA. .block e .items-stretch acabaram de entrar no fim da
   folha; as irmãs sm: estão lá em cima (820-830) e perderiam por ordem num
   "block sm:hidden" ou "items-stretch sm:items-center". Reescritas aqui. */
@media (min-width:640px){
  .sm\:flex{display:flex}
  .sm\:inline-flex{display:inline-flex}
  .sm\:hidden{display:none}
  .sm\:items-center{align-items:center}
}

/* -- 11.9 @media hover --
   Envelope literal da 7k: evita o hover grudado depois do toque no celular. */
@media (hover:hover) and (pointer:fine){
  .hover\:border-texts\/20:hover{border-color:#e0e0e033}
  .hover\:border-texts\/30:hover{border-color:#e0e0e04d}
  .hover\:bg-bg-secondary\/80:hover{background-color:#1c1e34cc}
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. CABEÇALHO DA TELA DE SAQUE
   Os tokens auth-* da 7k não existem como var() na build deles — só aparecem
   já resolvidos, igual aos payments-*. Mantidos literais.
   ═══════════════════════════════════════════════════════════════════════════ */
.text-auth-titles{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity,1))}
.border-auth-texts\/10{border-color:#e0e0e01a}
.bg-auth-bg-close{--tw-bg-opacity:1;background-color:rgb(28 30 52/var(--tw-bg-opacity,1))}
/* ESTE acompanha a cor da casa: na 7k o X é rgb(161 205 61), o verde deles. */
.text-auth-icon-close{--tw-text-opacity:1;color:rgb(249 227 14/var(--tw-text-opacity,1))}
.tracking-tight{letter-spacing:-.025em}
.pt-3{padding-top:.75rem}
.pb-3{padding-bottom:.75rem}

/* REPOSIÇÃO DE ORDEM: .pt-3 e .pb-3 são longhands de padding e acabaram de
   entrar depois do bloco md de 10.11. Num elemento "pt-3 md:p-6" o longhand
   venceria o shorthand no desktop. Bloco reescrito aqui, como manda a folha. */
@media (min-width:768px){
  .md\:p-4{padding:1rem}
  .md\:p-5{padding:1.25rem}
  .md\:p-6{padding:1.5rem}
}

@media (hover:hover) and (pointer:fine){
  .hover\:opacity-80:hover{opacity:.8}
}

/* -- 12.1 corpo rolante do painel (o embrulho que eu tinha pulado) --
   `<div class="px-4 pt-3 pb-4 overflow-y-auto flex-1 overscroll-contain">` é o corpo do
   modal da 7k: o cabeçalho é flex-shrink-0 e este é flex-1 com rolagem própria.
   overscroll-contain impede que o toque, ao chegar no fim da lista, continue rolando a
   página atrás — é o que faz o painel parecer preso. */
.pb-4{padding-bottom:1rem}
.overflow-y-auto{overflow-y:auto}
.overscroll-contain{overscroll-behavior:contain}
.min-h-0{min-height:0}


/* ═══════════════════════════════════════════════════════════════════════════
   13. INDIQUE E GANHE (affiliate.php)
   Das 104 classes do HTML deles, 101 já estavam aqui. Só estas duas faltavam.

   A TERCEIRA NÃO EXISTE: `hover:bg-texts/8`. Procurei `texts\/8` nos 180.256
   chars do CSS compilado da 7k: nada. O degrau /8 não está na escala deles
   (5/10/15/20/25/30/40/50/60/70/80/90/95), então essa classe não pinta nada
   NEM NO SITE DELES — o HTML a referencia e o navegador ignora. Escrever uma
   regra aqui seria inventar um hover que a 7k não tem. Mesma conclusão da
   seção 10.14, agora confirmada uma segunda vez.
   ═══════════════════════════════════════════════════════════════════════════ */
.pb-1{padding-bottom:.25rem}
/* 40px em cima e embaixo: a folga do estado vazio ("Nenhuma indicação ainda").
   Não vem do HTML deles — o print que o dono mandou tinha 13 indicados, então não
   mostrava o vazio. Existe na build da 7k e o valor é o literal deles.
   ENTRA AQUI, antes do bloco @media abaixo: é longhand de padding, e depois da
   reposição de md:p-* um elemento "py-10 md:p-6" perderia a folga no desktop. */
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}

/* REPOSIÇÃO DE ORDEM: .pb-1 é longhand de padding e entrou depois do bloco md
   reescrito em 12.1. Num elemento "pb-1 md:p-6" o longhand venceria o shorthand
   no desktop. Hoje nenhum elemento junta os dois, mas a folha repõe por
   convenção — é o que impede o erro na próxima tela. */
@media (min-width:768px){
  .md\:p-4{padding:1rem}
  .md\:p-5{padding:1.25rem}
  .md\:p-6{padding:1.5rem}
}

@media (min-width:640px){
  /* mesmo valor do .text-sm sem prefixo (linha 151): na build da 7k text-sm é
     13px, não os 14px do Tailwind de fábrica. */
  .sm\:text-sm{font-size:.8125rem;line-height:1.125rem}
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. O CONTÊINER DAS PÁGINAS DA CONTA
   As cinco telas da conta (carteira, prêmios, dados, histórico, indique) tinham
   cinco contêineres diferentes — 1440px numa e 900px nas outras quatro — e o
   cartão de perfil mudava de 1126px para 868px conforme a aba. A 7k usa UM só:
     <div class="max-w-content mx-auto w-full px-4 py-4 lg:px-6 lg:py-6">
   Medido no CSS compilado deles: max-w-content é 1440px, que é justamente o que
   a carteira já usava. As outras quatro é que estavam fora.
   A folga de baixo continua sendo do body de cada página: duas têm barra
   inferior de 56px e três não — a própria 7k varia esse pb por tela.
   ═══════════════════════════════════════════════════════════════════════════ */
.max-w-content{max-width:1440px}
.mx-auto{margin-left:auto;margin-right:auto}

@media (min-width:1024px){
  .lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .lg\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. TELA DE PROMOÇÕES (promotions.php)
   61 das 63 classes do HTML deles. As duas que sobraram:
   · `group` não é utilitária — é só o marcador que o Tailwind usa para o
     group-hover casar. Não tem CSS na build deles e não tem aqui.
   · `placeholder:text-texts/40` existe, mas com ::placeholder no seletor.
   `links` na paleta deles é #e0e0e0, o MESMO de `texts` — não leva troca de cor.
   ═══════════════════════════════════════════════════════════════════════════ */
.min-h-\[100svh\]{min-height:100svh}
.absolute{position:absolute}
.bottom-0{bottom:0}
.left-0{left:0}
.right-0{right:0}
.pointer-events-none{pointer-events:none}
.w-4{width:1rem}
.w-9{width:2.25rem}
.h-9{height:2.25rem}
.w-80{width:20rem}
.gap-1{gap:.25rem}
.gap-2\.5{gap:.625rem}
.gap-6{gap:1.5rem}
.p-0{padding:0}
.pt-1{padding-top:.25rem}
.pt-4{padding-top:1rem}
.pb-6{padding-bottom:1.5rem}
.pb-10{padding-bottom:2.5rem}
.mt-6{margin-top:1.5rem}
.mt-auto{margin-top:auto}
.max-h-0{max-height:0}
.max-h-24{max-height:6rem}
.rounded-2xl{border-radius:1rem}
.aspect-\[21\/9\]{aspect-ratio:21/9}
.object-fill{-o-object-fit:fill;object-fit:fill}
.appearance-none{appearance:none}
.text-\[11px\]{font-size:11px}
.font-medium{font-weight:500}
.leading-6{line-height:1.5rem}
.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.duration-200{transition-duration:.2s}
.duration-300{transition-duration:.3s}
.text-texts\/15{color:#e0e0e026}
.text-texts\/45{color:#e0e0e073}
.text-links\/75{color:#e0e0e0bf}      /* links = #e0e0e0 na paleta deles, igual a texts */
.border-texts\/15{border-color:#e0e0e026}
.bg-bg-primary\/40{background-color:#16182a66}
.placeholder\:text-texts\/40::placeholder{color:#e0e0e066}
.focus\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}
.focus-within\:border-primary\/50:focus-within{border-color:#f9e30e80}   /* 7k: #a1cd3d80 */

/* ── as três que dependem de var(--tw-*) e morreriam caladas ────────────────
   Mesma armadilha do tabular-nums, do gradiente e do focus:ring. O literal
   deles monta box-shadow e transform a partir de variáveis declaradas só no
   reset universal do Tailwind, que esta folha não copia. Valor direto. */
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a}
/* a 7k escreve transform:translate(var..) rotate(var..) skew(var..) scale(var..);
   sem as oito variáveis o transform inteiro fica inválido e o zoom da capa não
   acontece. Aqui só a escala, que é o que a classe quer dizer. */
.group:hover .group-hover\:scale-105{transform:scale(1.05)}
.group:hover .group-hover\:text-links{color:#e0e0e0}
/* gradiente sem as --tw-gradient-*-position, que só existem no preflight deles */
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.from-bg-primary{--tw-gradient-from:#16182a;--tw-gradient-to:#16182a00;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

@media (min-width:640px){
  .sm\:px-0{padding-left:0;padding-right:0}
  .sm\:px-4{padding-left:1rem;padding-right:1rem}
  .sm\:p-5{padding:1.25rem}
  .sm\:pb-14{padding-bottom:3.5rem}
  .sm\:mt-6{margin-top:1.5rem}
}

@media (min-width:1024px){
  .lg\:inline{display:inline}
  .lg\:hidden{display:none}
  .lg\:flex{display:flex}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .lg\:pt-6{padding-top:1.5rem}
  .lg\:pb-16{padding-bottom:4rem}
}

@media (min-width:1280px){
  .xl\:w-96{width:24rem}
}

@media (hover:hover) and (pointer:fine){
  .hover\:text-texts\/50:hover{color:#e0e0e080}
  .hover\:bg-bg-secondary:hover{background-color:#1c1e34}
  .hover\:bg-texts\/\[0\.03\]:hover{background-color:#e0e0e008}
  .hover\:border-primary\/50:hover{border-color:#f9e30e80}   /* 7k: #a1cd3d80 */
}

/* -- 15.1 preflight escopado em .k7-promo --
   Os 4 botões (Voltar, busca, Ver mais) sairiam com o cinza do navegador e os cartões
   com o azul sublinhado de <a>. Especificidade 0,0,0: mata o padrão do agente do
   usuário e perde para QUALQUER utilitária. NÃO pode ser global — a home depende do
   cinza em 25 botões. */
:where(.k7-promo) :where(button,input,select,textarea){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-color:transparent;background-image:none;
  border:0 solid;padding:0;margin:0;
  color:inherit;font:inherit;line-height:inherit;
  box-sizing:border-box;cursor:pointer;
}
:where(.k7-promo) :where(input[type="search"],input[type="text"]){cursor:text}
:where(.k7-promo) :where(a){color:inherit;text-decoration:inherit}
/* o X nativo do campo de busca no Chrome é cinza e destoa; a 7k não tem */
:where(.k7-promo) input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}


/* ═══════════════════════════════════════════════════════════════════════════
   16. TELA DO PIX GERADO (deposit-modal.php)
   37 das 41 classes novas. As QUATRO que não existem na build da 7k:
   · animate-in, fade-in, slide-in-from-top-2 — zero ocorrência nos 180.256
     chars do CSS deles, e não há @keyframes enter. A animação de entrada que o
     HTML pede NÃO acontece nem no site deles. Ficam literais e inertes.
   · bg-texts/8 — quarta vez que confirmo: o degrau /8 não está na escala deles.
     As caixinhas do relógio saem sem fundo lá e aqui.
   ═══════════════════════════════════════════════════════════════════════════ */
.p-2{padding:.5rem}
.bg-white{background-color:#fff}
.border-\[3px\]{border-width:3px;border-style:solid}   /* o solid é NOSSO: na 7k as
   .border* são só largura porque o preflight universal deles já põe `border-style:solid`
   em tudo. Sem ele o navegador computa border-width:0 e a moldura amarela do QR some —
   medido: borderWidth=0px, borderStyle=none, com a cor certa e invisível. */
.border-primary\/60{border-color:#f9e30e99}        /* 7k: #a1cd3d99 */
.border-dashed{border-style:dashed}
.border-texts\/30{border-color:#e0e0e04d}
.bg-texts\/\[0\.03\]{background-color:#e0e0e008}
.w-\[160px\]{width:160px}
.h-\[160px\]{height:160px}
.min-h-9{min-height:2.25rem}
.h-11{height:2.75rem}
.h-px{height:1px}
.top-3{top:.75rem}
.right-3{right:.75rem}
.gap-0{gap:0}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.max-h-14{max-height:3.5rem}
.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}
.font-extrabold{font-weight:800}
.text-\[8px\]{font-size:8px}
.leading-tight{line-height:1.25}
.tracking-widest{letter-spacing:.1em}
.break-all{word-break:break-all}
.text-texts\/20{color:#e0e0e033}
.text-texts\/90{color:#e0e0e0e6}
.text-success\/70{color:#22bb33b3}
.text-warning\/90{color:#ff9f43e6}
.bg-warning\/10{background-color:#ff9f431a}
.border-warning\/20{border-color:#ff9f4333}
.duration-1000{transition-duration:1s}
.ease-linear{transition-timing-function:linear}

/* sombra: a da 7k é box-shadow montado com --tw-ring-offset-shadow, --tw-ring-shadow
   e --tw-shadow, que só existem no reset universal do Tailwind. Valor direto.
   .shadow-primary/10 DEPOIS da .shadow: é ela que dá a cor, e quem vence é a ordem. */
.shadow{box-shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a}
.shadow-primary\/10{box-shadow:0 1px 3px 0 #f9e30e1a, 0 1px 2px -1px #f9e30e1a}   /* 7k: #a1cd3d1a */

/* o transform deles depende de oito variáveis e ficaria inválido aqui */
.active\:scale-\[0\.99\]:active{transform:scale(.99)}

/* a bolinha verde piscando ao lado de "Aguardando pagamento". O keyframes é o
   literal deles — sem ele a classe não anima nada. */
.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}
@keyframes pulse{50%{opacity:.5}}

@media (hover:hover) and (pointer:fine){
  .hover\:border-texts\/50:hover{border-color:#e0e0e080}
  .hover\:bg-texts\/\[0\.06\]:hover{background-color:#e0e0e00f}
}

/* -- 16.1 preflight escopado em .k7-qr --
   Os 4 botões da tela do PIX sairiam com o cinza do navegador. Especificidade 0,0,0:
   mata o padrão do agente do usuário e perde para qualquer utilitária. */
:where(.k7-qr) :where(button){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-color:transparent;background-image:none;
  border:0 solid;padding:0;margin:0;
  color:inherit;font:inherit;line-height:inherit;
  box-sizing:border-box;cursor:pointer;text-align:inherit;
}
