/* FUTNEX 1.9.70 · cores do jogo pelo /controle (módulo ui70a). Carregado DEPOIS de todos os outros estilos do jogo.
   Nada aqui pinta sem a classe do token em <html>: o script do <head> (cores70-head) e o fx-cores-1970.js põem `fx70-c` + `fx70-c-<token>` e a variável
   `--fx70-<token>` SÓ com a paleta ligada, válida e com o tema ESCURO ativo (tema claro: nenhuma classe). Token ausente = a cor de hoje.
   Vale nos dois visuais (novo `html.ui68` e clássico) e só nas páginas do jogo (/, /en/, /es/); raridade, campo, uniformes e canvas ficam de fora.
   Os 17 tokens: fundo painel borda texto texto_suave destaque botao botao_texto botao_pressionado botao2 botao2_texto selecionado selecionado_texto
   barra_topo barra_baixo fechar fechar_texto.
   Mapa (token → o que muda):
     fundo → --bg (página; o topo e a barra de baixo seguem se não tiverem cor própria)        painel → --panel, e --panel-2/--fill (misturados com o texto)
     borda → --line e --line-strong                                                              texto → --text            texto_suave → --text-2 e --u-tx2
     destaque → --accent, --accent-2, --u-acc-tx, --focus (barras, anel do nível, links, rótulo da aba; o botão principal segue se não tiver cor própria)
     botao/botao_texto/botao_pressionado → .btn-primary (e botões de compra .lj-dinheiro)         botao2/botao2_texto → .btn comum (contorno ou cinza)
     selecionado/selecionado_texto → --sel/--on-sel (segmentos, chips de navegação), pílula da aba do celular, item da barra lateral do PC
     barra_topo → .topbar (e a meta theme-color)   barra_baixo → barra de baixo do celular / barra lateral do PC   fechar/fechar_texto → .sheet-x (× e "Fechar") */

/* ============================================================ 1 · variáveis do jogo (os --u-* do visual novo derivam destas, na mesma <html>) */
html.fx70-c-fundo { --bg: var(--fx70-fundo); }
html.fx70-c-painel {
  --panel: var(--fx70-painel);
  --panel-2: color-mix(in srgb, var(--fx70-painel) 96%, var(--fx70-texto, #f4f7fa));
  --fill: color-mix(in srgb, var(--fx70-painel) 91%, var(--fx70-texto, #f4f7fa));
}
html.fx70-c-borda {
  --line: var(--fx70-borda);
  --line-strong: color-mix(in srgb, var(--fx70-borda) 62%, var(--fx70-texto_suave, #a9b8c6));
}
html.fx70-c-texto { --text: var(--fx70-texto); }
html.fx70-c-texto_suave { --text-2: var(--fx70-texto_suave); --u-tx2: var(--fx70-texto_suave); }
html.fx70-c-destaque {
  --accent: var(--fx70-destaque);
  --accent-2: color-mix(in srgb, var(--fx70-destaque) 90%, #000);
  --u-acc-tx: var(--fx70-destaque);
  --focus: var(--fx70-destaque);
}
html.fx70-c-botao_texto { --on-accent: var(--fx70-botao_texto); --u-on-acc: var(--fx70-botao_texto); }
html.fx70-c-selecionado { --sel: var(--fx70-selecionado); }
html.fx70-c-selecionado_texto { --on-sel: var(--fx70-selecionado_texto); }
/* a borda "dura" do botão principal acompanha o botão (hoje #a88600 = o amarelo a 68% de preto) */
html.fx70-c-botao { --fx70-edge: color-mix(in srgb, var(--fx70-botao) 68%, #000); --u-hard: 0 4px 0 var(--fx70-edge); }

/* ============================================================ 2 · barras */
html.fx70-c-barra_topo .topbar { background: var(--fx70-barra_topo) !important; }
html.fx70-c-barra_baixo:not(.fx-pc) .tabs { background: var(--fx70-barra_baixo) !important; }
html.fx70-c-barra_baixo.fx-pc .topbar::before { background: var(--fx70-barra_baixo) !important; }
@media (min-width: 960px) { html.fx70-c-barra_baixo:not(.fx-pc):not(.ui68) .tabs { background: none !important; } }          /* clássico largo sem PC: as abas ficam dentro do topo, sem barra própria */

/* ============================================================ 3 · botão principal: botao, botao_texto, botao_pressionado */
html.fx70-c-botao .btn-primary:not([disabled]):not([aria-disabled=true]),
html.fx70-c-botao .lj-topo .lj-dinheiro, html.fx70-c-botao .lj-socio .lj-dinheiro {
  background: var(--fx70-botao) !important; border-color: var(--fx70-botao) !important;
}
html.fx70-c-botao .btn-primary:not([disabled]):not([aria-disabled=true]) { box-shadow: 0 4px 0 var(--fx70-edge); }
html.fx70-c-botao .btn-primary.btn-sm:not([disabled]):not([aria-disabled=true]) { box-shadow: 0 3px 0 var(--fx70-edge); }
html.fx70-c-botao .lj-topo .lj-dinheiro, html.fx70-c-botao .lj-socio .lj-dinheiro { box-shadow: 0 4px 0 var(--fx70-edge) !important; }
html.fx70-c-botao .btn-primary:active:not([disabled]):not([aria-disabled=true]) { box-shadow: 0 1px 0 var(--fx70-edge); }
html.fx70-c-botao .btn-primary.fx-guia:not([disabled]) { animation-name: fx70-pulso; }
@keyframes fx70-pulso {
  0%, 100% { box-shadow: 0 4px 0 var(--fx70-edge), 0 0 0 0 color-mix(in srgb, var(--fx70-botao) 60%, transparent); }
  50% { box-shadow: 0 4px 0 var(--fx70-edge), 0 0 0 9px color-mix(in srgb, var(--fx70-botao) 0%, transparent); }
}
html.fx70-c-botao_texto .btn-primary:not([disabled]):not([aria-disabled=true]),
html.fx70-c-botao_texto .lj-topo .lj-dinheiro, html.fx70-c-botao_texto .lj-socio .lj-dinheiro { color: var(--fx70-botao_texto) !important; }
/* pressionado (e em cima, no PC): sem cor própria, o botão clareia um pouco; com `botao_pressionado`, é essa cor */
@media (hover: hover) and (pointer: fine) {
  html.fx70-c-botao:not(.fx70-c-botao_pressionado) .btn-primary:hover:not([disabled]):not([aria-disabled=true]) {
    background: color-mix(in srgb, var(--fx70-botao) 88%, #fff) !important; border-color: color-mix(in srgb, var(--fx70-botao) 88%, #fff) !important;
  }
  html.fx70-c-botao_pressionado .btn-primary:hover:not([disabled]):not([aria-disabled=true]) {
    background: var(--fx70-botao_pressionado) !important; border-color: var(--fx70-botao_pressionado) !important;
  }
}
html.fx70-c-botao_pressionado .btn-primary:active:not([disabled]):not([aria-disabled=true]),
html.fx70-c-botao_pressionado .btn-primary:is(.on, [aria-pressed=true], [aria-checked=true], [aria-selected=true]):not([disabled]):not([aria-disabled=true]),
html.fx70-c-botao_pressionado .lj-topo .lj-dinheiro:active, html.fx70-c-botao_pressionado .lj-socio .lj-dinheiro:active {
  background: var(--fx70-botao_pressionado) !important; border-color: var(--fx70-botao_pressionado) !important;
}

/* ============================================================ 4 · botão secundário (.btn comum): botao2, botao2_texto */
html.fx70-c-botao2 .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):not(.btn-quiet):not(.sheet-x):not([disabled]):not([aria-disabled=true]) { background: var(--fx70-botao2); }
html.fx70-c-botao2_texto .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):not(.btn-quiet):not(.sheet-x):not([disabled]):not([aria-disabled=true]) { color: var(--fx70-botao2_texto); }
@media (hover: hover) and (pointer: fine) {
  html.fx70-c-botao2 .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):not(.btn-quiet):not(.sheet-x):hover:not([disabled]):not([aria-disabled=true]) {
    background: color-mix(in srgb, var(--fx70-botao2) 85%, var(--fx70-botao2_texto, #f4f7fa));
  }
}

/* ============================================================ 5 · selecionado / selecionado_texto
   segmentos e chips de navegação: o novo já usa --sel/--on-sel; o clássico pinta de verde (ui58), então ganha regra própria */
html.fx70-c-selecionado .seg-b[aria-selected=true], html.fx70-c-selecionado .seg-b[aria-checked=true],
html.fx70-c-selecionado:is(.fx-ui1958) :is(.jg, .loja, .clube) > .seg .seg-b[aria-selected=true] {
  background: var(--fx70-selecionado); color: var(--on-sel); box-shadow: none;
}
html.fx70-c-selecionado_texto .seg-b[aria-selected=true], html.fx70-c-selecionado_texto .seg-b[aria-checked=true] { color: var(--fx70-selecionado_texto); }
/* barra de baixo do celular: a pílula do ícone (visual novo) e a célula toda (clássico) */
html.fx70-c-selecionado:not(.fx-pc) .tabs .tab[aria-current=page] { background: color-mix(in srgb, var(--fx70-selecionado) 16%, transparent); }
/* a pílula do visual novo é o amarelo da marca a 18% com anel a 55% (rgba literal): segue o destaque e, havendo, o selecionado (que vem depois e ganha); nada de texto em cima dela, só o ícone */
html.fx70-c-destaque.ui68:not(.fx-pc) .tabs .tab[aria-current=page]::before,
html.fx70-c-destaque.ui68[data-ui68-tab=palpites]:not(.fx-pc) .tabs .tab[data-tab=jogar]::before { background-color: color-mix(in srgb, var(--fx70-destaque) 18%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fx70-destaque) 55%, transparent); }
html.fx70-c-selecionado.ui68:not(.fx-pc) .tabs .tab[aria-current=page]::before,
html.fx70-c-selecionado.ui68[data-ui68-tab=palpites]:not(.fx-pc) .tabs .tab[data-tab=jogar]::before { background-color: color-mix(in srgb, var(--fx70-selecionado) 18%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fx70-selecionado) 55%, transparent); }
html.fx70-c-selecionado.ui68:not(.fx-pc) .tabs .tab[aria-current=page] { background: transparent; }
html.fx70-c-selecionado:not(.ui68):not(.fx-pc) .tabs .tab[aria-current=page]::before { background: var(--fx70-selecionado); }
/* barra lateral do PC (os dois visuais): item selecionado = fundo + texto + a barrinha da borda */
html.fx70-c-selecionado.fx-pc .tabs .tab[aria-current=page] { background: var(--fx70-selecionado); box-shadow: none; border-color: var(--fx70-selecionado); }
html.fx70-c-selecionado.fx-pc .tabs .tab[aria-current=page]::before { background: var(--fx70-selecionado); }
html.fx70-c-selecionado.fx-pc .tabs .tab[aria-current=page], html.fx70-c-selecionado.fx-pc .tabs .tab[aria-current=page] span { color: var(--on-sel); }
html.fx70-c-selecionado.fx-pc .tabs .tab[aria-current=page] svg { stroke: var(--on-sel); }
html.fx70-c-selecionado_texto.fx-pc .tabs .tab[aria-current=page], html.fx70-c-selecionado_texto.fx-pc .tabs .tab[aria-current=page] span { color: var(--fx70-selecionado_texto); }
html.fx70-c-selecionado_texto.fx-pc .tabs .tab[aria-current=page] svg { stroke: var(--fx70-selecionado_texto); }

/* ============================================================ 6 · botão fechar (× do visual novo, "Fechar" do clássico): fechar, fechar_texto */
html.fx70-c-fechar .sheet-x, html.fx70-c-fechar .sheet .pcard-close.sheet-x { background: var(--fx70-fechar) !important; border-color: color-mix(in srgb, var(--fx70-fechar) 78%, #fff) !important; }
html.fx70-c-fechar_texto .sheet-x, html.fx70-c-fechar_texto .sheet .pcard-close.sheet-x { color: var(--fx70-fechar_texto) !important; }
@media (hover: hover) and (pointer: fine) {
  html.fx70-c-fechar .sheet-x:hover, html.fx70-c-fechar .sheet .pcard-close.sheet-x:hover { background: color-mix(in srgb, var(--fx70-fechar) 84%, #fff) !important; }
}