BK-352 - Light Mode quebrado: seletor perdido, especificidade e contraste

• Aberto em: 26/08/2026 (achado lateral durante o BK-351)
• Status: CONCLUIDO em 26/08/2026. CSS, contraste e o botao de trocar de

tema, todos corrigidos e medidos. O ADMIN escolheu a opcao (A): botao

flutuante.

Resumo

O tema claro estava quebrado por tres motivos independentes, nenhum deles

com erro visivel: nao havia log, console limpo, pagina 200.

Causa 1 - o seletor sumiu (03/12/2025)

css/theme.css ficou com 20 linhas de declaracoes sem seletor nenhum:

```

$ grep -c "{" css/theme.css -> 0

$ grep -c "}" css/theme.css -> 1

```

Um bloco sem seletor e descartado inteiro pelo parser. Origem: commit

e84917d8b (03/12/2025 18:54), que moveu o :root do dark para

redesign_2026.css e levou junto as duas primeiras linhas do bloco de baixo:

```

-[data-theme="light"] {

• --bg-body: #ffffff;

--bg-surface: #ffffff; <- sobrou orfa

```

Corrigido: regra reaberta.

Causa 2 - especificidade (descoberta ao testar a correcao 1)

Reabrir como [data-theme="light"] nao bastou: a pagina continuou escura.

theme.css e carregado ANTES de redesign_2026.css, que define os mesmos

tokens em :root. [data-theme="light"] e :root tem a mesma

especificidade (0,1,0), entao quem vem depois no HTML ganha - e quem vem depois

e o redesign.

Corrigido: o seletor virou :root[data-theme="light"], especificidade

(0,2,0), que vence independente da ordem de carga.

Causa 3 - contraste nunca revisado

Com os tokens finalmente valendo, o tema claro apareceu pela primeira vez - e

varios pontos assumiam fundo escuro. Medidos com auditoria de contraste rodando

no navegador, tema claro ligado, em /, /pecas.php, /eventos.php,

/teatros.php, /teatro.php, peca, evento, /cadastre-se.php,

/painel/login.php, /termos-uso.php e /politica-privacidade.php.

| # | O que quebrava | Medido | Correcao |

|---|---|---|---|

| 1 | Amarelo da marca como TEXTO sobre superficie clara: datas de sessao, botao de compra dos cards, nome do teatro, total do checkout | 1.07:1 | acento vira o AZUL da marca (as duas cores ja sao da paleta) |

| 2 | Grades de teatros/eventos usam --dark-bg/--dark-card, que sao cores fixas de secao e nao tokens de tema; o texto dentro virava cinza escuro | 1.50:1, 184 ocorrencias em /teatros.php | os tokens de texto voltam ao valor do escuro dentro dessas ilhas |

| 3 | Vermelho do regulamento clareado para #ff8a80 (correcao feita para o tema escuro) | 2.28:1 | no claro o vermelho volta ao original do autor |

| 4 | Estrelas vazias do PalcoFan #ccc | 1.53:1 | --text-muted |

| 5 | Breadcrumb com cor cravada rgba(255,255,255,.8) | 1.00:1 (branco no branco) | tokens de tema |

| 6 | .rnt-container pinta --bg-surface por cima do gradiente do CTA de teatros: caixa BRANCA sobre o gradiente, texto branco some | 1.00:1 | container transparente dentro dessa secao |

| 7 | .btn-login do painel pede color: var(--white), e --white nao existe em nenhum CSS que a pagina carrega: declaracao invalida, cor cai para herdada | 1.37:1 | --text-inverse |

Estado final da auditoria no tema claro: limpo em todas as paginas, exceto

tres casos analisados e descartados:

• / hero: o fundo e <img>/<video> dentro de .rnt-hero-media, nao um

background CSS - o medidor nao enxerga, o texto branco esta correto;

• /eventos.php dias "Sex"/"Seg" em cinza: sao os dias sem evento, cinza

de proposito (os dias com evento tem .has-event e sao brancos sobre azul);

• btn-success "QUERO ESTA OFERTA" a 2.48:1: verde padrao do Bootstrap,

identico no tema escuro (medido) - nao e do light mode.

Bug pre-existente corrigido junto (afetava OS DOIS temas)

pecas.php e eventos.php tem <h2 class="rnt-section-title" style="color: white">

na secao de cadastro. Essa classe traz caixa amarela, entao era **branco sobre

amarelo, 1.13:1**, ilegivel - e assim tambem no tema escuro, medido. O

index.php ja tinha o override .rnt-signup-section .rnt-section-title que

tira a caixa; a mesma regra foi replicada nas outras duas paginas.

O QUE FALTA: nao existe botao para trocar de tema

Testado clicando de verdade no navegador: #theme-toggle-floating **nao existe

no HTML**. Os dois ids so aparecem uma vez cada na pagina servida, e e dentro do

proprio JavaScript que procura por eles.

Causa: commit a21a8d122 (03/12/2025 21:53, ~3h depois do e84917d8b)

removeu o <button id="theme-toggle"> do header, renomeou o JS para

theme-toggle-floating e nunca adicionou o botao flutuante.

Ou seja: o tema claro quebrou duas vezes no mesmo dia, por dois caminhos

independentes, e nenhum dos dois deu erro.

RESOLVIDO - opcao (A), botao flutuante

• Desktop: o <button id="theme-toggle-floating" class="rnt-theme-floating">

foi criado em includes/inc_peca.php. O CSS da classe ja existia desde

a21a8d122; so o HTML faltava. Posicao mantida como o autor tinha desenhado

(topo-esquerda, top:100px; left:20px) depois de medir com

elementFromPoint em /, /pecas.php, /teatros.php, /cadastre-se.php,

peca e evento: nao cobre nada clicavel em nenhuma delas.

• Celular: o flutuante fica escondido. Foram medidas cinco posicoes

(topo-esq, topo-dir, meio-esq, meio-dir, baixo-esq) em seis paginas a 390px e

nenhuma estava livre: cobriam link de card de venda, campo de formulario

ou a barra de compra, que ja e fixa no rodape. Em vez de escolher o overlap

menos ruim, no celular o controle foi para dentro do menu, no grupo

"Aparencia" (#theme-toggle-mobile) - que e exatamente o que o

updateIcons() ja esperava desde 12/2025 e nunca tinha sido criado.

• Cuidado que fica registrado: updateIcons() faz

sun.style.display = ... sem checar null. Os dois <span>

(.theme-icon-light e .theme-icon-dark) dentro de cada botao sao

obrigatorios; remover um quebra o script inteiro do header. Enquanto os

botoes nao existiam, o if(toggleBtn) mascarava isso.

• Ajuste junto: o padding-bottom do menu mobile subiu de 20px para 150px,

senao o ultimo grupo (Aparencia) ficava debaixo do banner fixo de

notificacoes, que ocupa ~120px.

• Validacao: clique real no navegador, nao simulacao de atributo - escuro ->

claro -> gravado em localStorage -> sobrevive ao reload. Zero erro de JS em

7 paginas. Auditoria de contraste final limpa nos dois temas.

Sobrou para depois (pre-existente, TEMA ESCURO, nao mexido aqui)

Medido durante a checagem de regressao. Nao e regressao desta rodada, e nao foi

alterado porque muda o que 100% dos visitantes veem hoje:

• ~~painel/login.php: <h1>Bem-vindo!</h1> a 1.19:1 no escuro~~ -

CORRIGIDO em 26/08/2026 a pedido do ADMIN. Passou a usar

--text-primary, entao acompanha o tema nos dois lados. A causa de fundo e

que o card pede background: var(--white) e --white nao existe em nenhum

CSS que a pagina carrega: declaracao invalida, o fundo escuro da pagina

aparece e o titulo azul sumia em cima dele.

• Estrelas do PalcoFan: o card e claro nos dois temas, entao o #ccc das

estrelas vazias tambem esta ruim no escuro (1.53:1).

• CTA de teatros: no escuro a caixa do .rnt-container fica #1e1e1e sobre o

gradiente azul - legivel, mas nao e o desenho pretendido.

• painel/login.php carrega jQuery duas vezes (1.11.3 pelo LoadHeader e

1.11.1 depois, pela propria pagina). A segunda carga substitui o

window.jQuery e apaga o plugin do owlCarousel registrado na primeira, o que

gera TypeError: $(...).owlCarousel is not a function no console. Nao ha

carrossel nessa pagina, entao hoje e so ruido - mas e uma bomba-relogio para

qualquer plugin jQuery que venha a ser usado ali.