/* ==========================================================================
admin-light-preview.css — PREVIEW do tema CLARO (fundo branco), SÓ pro ADMIN.
Gate no main.php: a classe .admin-light-preview só entra no quando
is_admin() && Setting admin_light_preview. O JOGADOR nunca recebe.
Técnica: inverte o documento INTEIRO no elemento RAIZ (). Cobre de uma
vez as variáveis CSS, as ~200 cores fixas e os estilos inline. `hue-rotate(180)`
preserva o TOM dos acentos (verde continua verde, dourado continua dourado).
Aplicar no é seguro p/ position:fixed (o root é isento da regra de
containing-block), então header/betslip/modais não quebram.
IMPORTANTE: o elemento que recebe o `filter: invert` NÃO pode ter fundo claro —
ele seria INVERTIDO pra escuro. Por isso o background aqui é ESCURO (#101010),
que ao inverter vira quase-branco (#efefef) = o fundo claro que queremos.
Mídia (fotos/logos/escudos/bandeiras) é RE-invertida p/ aparecer normal.
Reversível na hora: Setting admin_light_preview=false.
========================================================================== */
html.admin-light-preview {
filter: invert(1) hue-rotate(180deg);
/* fundo ESCURO de propósito -> ao inverter vira claro (~#efefef). NÃO usar #fff. */
background-color: #101010;
}
/* Re-inverte o que NÃO deve virar negativo: mídia embutida + logos/escudos/
bandeiras/avatares. Assim fotos/banners ficam normais. NÃO incluir seletores
de container grande (evita "des-inverter" áreas inteiras). */
html.admin-light-preview img,
html.admin-light-preview video,
html.admin-light-preview iframe,
html.admin-light-preview canvas,
html.admin-light-preview embed,
html.admin-light-preview object,
html.admin-light-preview .carousel-slide,
html.admin-light-preview .pcc-logo,
html.admin-light-preview .pcc-team-logo,
html.admin-light-preview .hero-odd-logo,
html.admin-light-preview .team-logo,
html.admin-light-preview .match-team-logo,
html.admin-light-preview .league-logo,
html.admin-light-preview .league-flag,
html.admin-light-preview .country-flag,
html.admin-light-preview .flag,
html.admin-light-preview .home-flag,
html.admin-light-preview .away-flag,
html.admin-light-preview .avatar,
html.admin-light-preview .user-avatar,
/* campo do tracker ao vivo: background-image num DIV (nao e ![]()
) -> re-inverte p/
mostrar cores originais (campo VERDE, linhas BRANCAS, bola BRANCA). Sem isto o
filtro invertia -> linhas pretas, bola preta, campo magenta. A bola/rastro sao
FILHOS do .gst-field, entao 1 re-invert cobre tudo (nao re-inverter .gst-ball). */
html.admin-light-preview .gst-field {
filter: invert(1) hue-rotate(180deg);
}
/* ICONES DE ESPORTE (SVG inline): sao DESENHO, nao ![]()
, entao a lista de
re-inversao la de cima nao os pegava — e a pagina invertida trocava a cor de
TODOS. A bolinha de tenis (verde-limao) virava azul escuro, o basquete laranja
virava azul, o boxe vermelho virava ciano... Re-inverte pra mostrarem a cor de
verdade. Conferido nos 17 icones da barra. */
html.admin-light-preview .sport-tab-ico svg,
html.admin-light-preview .lg-sport-ic svg,
html.admin-light-preview .sp-ico svg,
html.admin-light-preview .sport-ico svg {
filter: invert(1) hue-rotate(180deg);
}
/* BOLA DE TENIS de quem esta sacando (09/09/2026). Duas coisas numa regra so,
e tem que ser assim: `filter` e UMA propriedade — declarar o brilho no CSS
normal e a re-inversao aqui faz a segunda APAGAR a primeira, e a bola volta
a chegar escura no tema claro. O brilho aqui e mais fechado (verde-oliva)
porque amarelo sobre fundo branco nao aparece. */
/* PESO DO SELETOR (09/09/2026): o brilho da bola no card da home mora em
".premium-card--compact.premium-card--tn .pct-saque svg" — 3 classes, mais forte
que "html.admin-light-preview .pct-saque svg", que tem 2. Especificidade ganha de
ordem de arquivo: sem repetir as classes do card aqui, a re-inversao PERDIA e a
bola aparecia PRETA na home (tema claro = o que todo jogador ve). */
html.admin-light-preview .mh-serve .orb svg,
html.admin-light-preview .mh-crumb .esp svg,
html.admin-light-preview .premium-card--compact.premium-card--tn .pct-saque svg,
html.admin-light-preview .pct-saque svg {
filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 4px rgba(150, 190, 30, 0.60));
}
/* Marca do time/atleta na tela do jogo: `img.mk-team` é MAIS ESPECÍFICO que a regra
genérica de `img` acima, então aqui a re-inversão convive com a sombra. Sem esta
regra a imagem ficaria certa mas sem sombra. */
html.admin-light-preview img.mk-team {
filter: invert(1) hue-rotate(180deg) drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
html.admin-light-preview img.mk-rosto {
filter: invert(1) hue-rotate(180deg) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
/* Vinheta BRANCA nas beiradas do campo (tema branco): funde a arquibancada escura da
imagem noite no fundo branco, tirando a 'moldura' escura. Regra SEPARADA (nao entra na
lista de re-invert -> nao vaza p/ logos/banners). Como o .gst-field passa por F(pagina)
o F(.gst-field) = identidade, a cor #fff do box-shadow se PRESERVA. Ajustavel no blur/spread. */
/* Fade BRANCO so nas bordas HORIZONTAIS (topo + base) via ::after. Chega a 100% BRANCO
solido na ultima faixa (0-5% e 95-100%), transparente no gramado (26-74%). O pseudo e
filho do .gst-field (filtro F) -> F(pagina) o F(.gst-field) = identidade -> #fff preservado.
z-index 2 = acima do fundo/glow, ABAIXO da bola(5)/badge(7) -> nao cobre os overlays. */
html.admin-light-preview .gst-field::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background: linear-gradient(to bottom,
#efefef 0%, #efefef 2%, rgba(239,239,239,0) 12%,
rgba(239,239,239,0) 88%, #efefef 98%, #efefef 100%);
}
/* ── Tracker = UM card branco unico (campo/posicao in-ball + barra + estatisticas sem costura) ──
Pedido do dono: o degrade LIGA o campo da posicao ao card de estatisticas -> tudo um card so.
O .gst ja renderiza claro (bg #0a0e13 -> invertido ~#f5f1ec). O problema era a COSTURA: a vinheta
do campo funde em BRANCO PURO (#fff), mas barra/estatisticas ficavam off-white -> linha visivel
separando "campo" de "estatisticas". Fix: barra + estatisticas + card viram BRANCO PURO, igual ao
alvo da vinheta. Como NAO sao re-invertidos, p/ renderizar #fff o valor real e ESCURO
(#000 -> invert do -> #fff). Assim a vinheta branca do campo funde perfeito -> sem emenda. */
html.admin-light-preview .gst {
background: #101010; /* renderiza #efefef = MESMA cor do fundo da pagina */
border-color: #4a4a4a; /* renderiza ~#b5b5b5 (borda cinza VISIVEL destacando da pagina) */
box-shadow: 0 6px 22px rgba(255,255,255,.20); /* invertida -> sombra escura suave (destaca da pagina) */
}
html.admin-light-preview .gst-ov,
html.admin-light-preview .gst-stats {
background: #101010; /* renderiza #efefef = fundo da pagina -> sem card visivel, so o campo */
}
/* ── Card do topo (placar/bandeiras/odds = #matchHero) FUNDE no card do tracker ──
Pedido do dono: o card de cima (bandeiras + odd) tambem entra no card unico.
Fio continuo: hero (topo) -> campo/posicao -> barra -> estatisticas = 1 card so.
- hero vira BRANCO PURO (igual ao tracker; nao e re-invertido: #000 -> invert do -> #fff)
- some o vao (margin-bottom) + a borda/raio de BAIXO do hero
- o tracker perde a borda/raio de CIMA -> as duas metades colam num card continuo.
(#matchHeroSpecial/#matchCenterSection ficam display:none no modo GoalServe -> hero encosta no .gst) */
html.admin-light-preview .match-hero {
background: #101010; /* renderiza #efefef = MESMA cor do fundo da pagina */
border-color: #4a4a4a; /* renderiza ~#b5b5b5 (borda cinza VISIVEL, sem o verde) */
border-bottom: none; /* tira a emenda com o campo */
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0; /* cola no card do tracker */
box-shadow: none;
}
html.admin-light-preview .gst {
border-top: none; /* topo do tracker encosta no hero sem borda dupla */
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* ── AMARELOS viravam MARROM ────────────────────────────────────────────────────────────
O hue-rotate(180) do tema joga o amarelo SATURADO fora do gamut -> o canal estoura e e
"clampado" -> #FFD700 renderiza #5e3600 (marrom). Correcao: autorar o ESPELHO que renderiza
um dourado limpo. #966300 -> renderiza ambar rico #c89532 (round-trip sem clamp). */
/* Turbinada CROSS-GAME (dourada): a var --tc-neon pinta o card inteiro de uma vez. */
html.admin-light-preview .combined-card.is-cross:not(.is-purple) {
--tc-neon: #966300; /* renderiza ambar/dourado ~#c89532 (era marrom) */
--tc-neon-soft: rgba(150,99,0,.5); /* brilho dourado translucido */
}
/* Cartao amarelo/vermelho no timeline (emoji 🟨/🟥): RE-inverte SO o glifo -> cores
verdadeiras (o .mc-ic tem so o emoji, sem filhos de texto -> re-invert e seguro). */
html.admin-light-preview .mc-ic {
display: inline-block;
filter: invert(1) hue-rotate(180deg);
}
/* ── Turbinada dourada: FUNDOS gold (CTA/pill/chip/glow) sao HARDCODED (#FFD700/#FFD84D/#FFEC4D),
nao a var --tc-neon -> continuavam MARROM. Autoro o espelho p/ renderizar dourado rico,
e o texto (autorado claro) renderiza ESCURO -> legivel no dourado. ── */
html.admin-light-preview .combined-card.is-cross:not(.is-purple) .tcard-cta {
background: linear-gradient(135deg, #7d5400 0%, #966300 100%); /* renderiza dourado ~#cfa652->#c89532 */
color: #f1ebda; /* renderiza texto ESCURO ~#1A1403 */
}
html.admin-light-preview .combined-card.is-cross:not(.is-purple) .tcard-cta .tcard-cta-arw { stroke: #f1ebda; }
html.admin-light-preview .combined-card.is-cross:not(.is-purple) .tcard-boostpill {
background: linear-gradient(135deg, #966300 0%, #7d5400 100%); /* renderiza dourado */
color: #f1ebda; /* texto escuro */
}
html.admin-light-preview .combined-card.is-cross:not(.is-purple) .tcard-chip {
background: rgba(150,99,0,0.16); /* tint dourado claro */
border-color: rgba(150,99,0,0.40);
}
html.admin-light-preview .combined-card.is-cross:not(.is-purple) .combined-card-glow {
background: radial-gradient(60% 50% at 50% 0%, rgba(150,99,0,0.22), transparent 70%);
}
html.admin-light-preview .combined-card.is-cross:not(.is-purple) .tcard-leg:not(:last-child)::before {
background: linear-gradient(180deg, var(--tc-neon), rgba(150,99,0,0.35));
}
/* ============================================================
COR POR PERÍODO no tema claro (hoje verde / amanhã dourado / 14 dias laranja)
O tema aplica `invert(1) hue-rotate(180deg)` na página inteira. Esse par
inverte a LUMINOSIDADE e quase preserva a matiz — mas "quase": o amarelo é
justamente onde ele erra mais. Medido no navegador: o dourado #fcd34d chega
ao jogador como rgb(87,45,0) — marrom escuro de matiz 31°, praticamente a
mesma matiz do laranja (25°). Os dois blocos ficavam parecidos, que é o
oposto do que a cor deveria comunicar.
Então o dourado é PRÉ-COMPENSADO aqui: #887700 atravessa o filtro e chega
como rgb(163,146,27) — matiz 52°, dourado de verdade, 27° longe do laranja.
O laranja #fb923c já atravessa bem (chega rgb(182,77,0), matiz 25°) e não
precisa de ajuste.
Ao mexer nestas cores, MEÇA o resultado depois do filtro em vez de confiar no
valor escrito — foi assim que o marrom passou despercebido.
============================================================ */
html.admin-light-preview .lg-dyn-heading--tomorrow { --per-cor: #887700; }
/* ------------------------------------------------------------------
CARD DE AMANHÃ: dourado de verdade no tema claro.
O tema escuro usa rgba(255,200,60) — um dourado bonito. Mas, medido depois do
`invert(1) hue-rotate(180deg)`, ele chega ao jogador em matiz 29°: laranja
escuro. E o card dos 14 DIAS chega em 25°. Quatro graus de diferença — os dois
blocos ficavam praticamente iguais, que é exatamente o que a cor deveria evitar.
Aqui o dourado é PRÉ-COMPENSADO para a base rgb(153,136,34), que atravessa o
filtro e chega em matiz ~51° (dourado) com luminosidade parecida com a do
laranja. Resultado: ~26° de separação entre amanhã e 14 dias.
Só o tema claro muda; o escuro segue com o dourado original.
------------------------------------------------------------------ */
html.admin-light-preview .premium-card--compact.premium-card--tomorrow {
border-color: rgba(153, 136, 34, 0.28);
}
html.admin-light-preview .premium-card--compact.premium-card--tomorrow:hover {
border-color: rgba(153, 136, 34, 0.5);
}
html.admin-light-preview .premium-card--compact.premium-card--tomorrow .pcc-time {
background: rgba(153, 136, 34, 0.10);
border-color: rgba(153, 136, 34, 0.26);
color: rgb(153, 136, 34);
}
html.admin-light-preview .premium-card--compact.premium-card--tomorrow .pcc-odd {
border-color: rgba(153, 136, 34, 0.32);
}
html.admin-light-preview .premium-card--compact.premium-card--tomorrow .pcc-odd:hover {
border-color: rgba(153, 136, 34, 0.62);
background: rgba(153, 136, 34, 0.10);
}
html.admin-light-preview .premium-card--compact.premium-card--tomorrow .pcc-o-v {
color: rgb(153, 136, 34);
text-shadow: 0 0 8px rgba(153, 136, 34, 0.28);
}
html.admin-light-preview .premium-card--compact.premium-card--tomorrow .pcc-odd.selected {
background: linear-gradient(180deg, #998822, #7a6a13);
border-color: #998822;
}
/* mesmo motivo do card de amanhã: sem isto o ícone dourado chega marrom (29°) */
html.admin-light-preview .lg-dyn-section[data-day="tomorrow"] .section-title .material-symbols-outlined {
color: rgb(153, 136, 34);
}
/* ------------------------------------------------------------------
PAINEL AO VIVO DO BASQUETE (#gsCourt) — MESMO tratamento do tracker de futebol.
O painel é escrito ESCURO e o invert da página o entrega CLARO — igual ao `.gst`.
Aqui só se repete o que o futebol já faz: fundo #101010 (renderiza #efefef, a
mesma cor da página) e borda cinza visível, pra o card não parecer uma caixa preta
colada numa tela clara.
As barras de estatística NÃO levam tratamento próprio: usam o mesmo verde/vermelho
do futebol e passam pelo mesmo filtro, pra ficarem idênticas às de lá.
CARD ÚNICO: o painel é a METADE DE BAIXO do card do hero (placar/bandeiras/odds),
exatamente como o `.gst` do futebol — perde borda e raio de CIMA, o hero perde os
de BAIXO (regra lá em cima, que já vale pra qualquer esporte) e os dois viram um
card contínuo. Sem isso apareciam DOIS cards com o mesmo placar e o mesmo "ao vivo".
------------------------------------------------------------------ */
html.admin-light-preview #gsCourt {
background: #101010;
border-color: #4a4a4a;
box-shadow: 0 6px 22px rgba(255,255,255,.20);
border-top: none; /* encosta no hero sem borda dupla */
border-top-left-radius: 0;
border-top-right-radius: 0;
}
html.admin-light-preview .gsq-stats {
background: #101010; /* mesmo valor do .gst-stats do futebol */
}
/* ── EMOJI DO TÍTULO DA TURBINADA ─────────────────────────────────────────────
O tema inverte a página inteira, e o emoji colorido do card ("🔥 APOSTA QUENTE")
chegava ESCURO ao jogador. Mesmo remédio do cartão do timeline (.mc-ic): o glifo
está sozinho no `.tcard-emoji`, sem texto irmão dentro, então RE-inverter é seguro
— os dois inverts se cancelam e a cor real volta. Não pôr no `.tcard-chip` inteiro:
ali mora o texto do título, que ficaria com a cor trocada. */
html.admin-light-preview .tcard-emoji {
display: inline-block;
filter: invert(1) hue-rotate(180deg);
}