/* ============================================================ MODO ACESSIBILIDADE — TeCasei Classes aplicadas no via acessibilidade.js, controladas pelo botão flutuante. Preferências ficam salvas no localStorage, então persistem entre páginas e visitas. ============================================================ */ /* ---------- Botão flutuante e painel ---------- */ #botao-acessibilidade { position: fixed; bottom: 20px; left: 20px; z-index:2000; width: 52px; height: 52px; border-radius: 50%; background: #2B2320; color: #fff; border: none; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; } #painel-acessibilidade { position: fixed; bottom: 82px; left: 20px; z-index:2000; background: #fff; color: #2B2320; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); padding: 18px; width: 280px; max-width: calc(100vw - 40px); font-family: Arial, sans-serif; display: none; } #painel-acessibilidade.aberto { display: block; } #painel-acessibilidade h3 { font-size: 0.95rem; margin-bottom: 12px; } #painel-acessibilidade .linha-acess { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #eee; font-size: 0.85rem; } #painel-acessibilidade .linha-acess:last-child { border-bottom: none; } #painel-acessibilidade .controle-fonte { display: flex; gap: 6px; } #painel-acessibilidade .controle-fonte button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #ddd; background: #f7f7f7; cursor: pointer; font-weight: 700; } #painel-acessibilidade .controle-fonte button.ativo { background: #FF6B6B; color: #fff; border-color: #FF6B6B; } #painel-acessibilidade .toggle-switch { width: 40px; height: 22px; border-radius: 12px; background: #ccc; position: relative; cursor: pointer; border: none; flex-shrink: 0; } #painel-acessibilidade .toggle-switch.ativo { background: #FF6B6B; } #painel-acessibilidade .toggle-switch .bolinha { width: 18px; height: 18px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: left 0.2s ease; } #painel-acessibilidade .toggle-switch.ativo .bolinha { left: 20px; } #painel-acessibilidade .resetar-acess { width: 100%; margin-top: 12px; padding: 8px; border-radius: 10px; border: 1px solid #ddd; background: none; cursor: pointer; font-size: 0.78rem; } /* ---------- Tamanho de fonte ---------- */ body.acess-fonte-media { font-size: 112% !important; } body.acess-fonte-grande { font-size: 128% !important; } /* ---------- Alto contraste ---------- */ body.acess-alto-contraste { background: #000 !important; color: #fff !important; filter: contrast(1.15); } /* O ":not()" aqui é essencial: sem ele, o alto contraste também distorcia o PRÓPRIO botão/painel de acessibilidade, deixando impossível enxergar os controles pra desligar o modo depois. */ body.acess-alto-contraste *:not(#botao-acessibilidade):not(#painel-acessibilidade):not(#painel-acessibilidade *) { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } body.acess-alto-contraste a { color: #FFD84D !important; text-decoration: underline !important; } body.acess-alto-contraste button:not(#botao-acessibilidade):not(#painel-acessibilidade *), body.acess-alto-contraste input[type="submit"], body.acess-alto-contraste .btn-primary, body.acess-alto-contraste [class*="btn-"] { background-color: #FFD84D !important; color: #000 !important; border: 2px solid #fff !important; } body.acess-alto-contraste img, body.acess-alto-contraste svg { filter: contrast(1.2) brightness(1.05); } /* Garantia extra: o botão e o painel de acessibilidade SEMPRE mantêm sua própria aparência normal, nunca são afetados por nenhum modo — assim sempre dá pra achar e desligar qualquer preferência, mesmo se o alto contraste "vazar" de algum jeito que eu não previu aqui. Repete as mesmas propriedades da regra original no topo deste arquivo, só que com prioridade máxima. */ #botao-acessibilidade { background: #2B2320 !important; color: #fff !important; border: none !important; border-radius: 50% !important; box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; } #painel-acessibilidade { background: #fff !important; color: #2B2320 !important; border-radius: 16px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.25) !important; } #painel-acessibilidade * { background: transparent !important; color: #2B2320 !important; } #painel-acessibilidade .toggle-switch { background: #ccc !important; } #painel-acessibilidade .toggle-switch.ativo { background: #FF6B6B !important; } #painel-acessibilidade .toggle-switch .bolinha { background: #fff !important; } #painel-acessibilidade .controle-fonte button { background: #f7f7f7 !important; border: 1px solid #ddd !important; } #painel-acessibilidade .controle-fonte button.ativo { background: #FF6B6B !important; color: #fff !important; } /* ---------- Sublinhar todos os links ---------- */ body.acess-sublinhar-links a { text-decoration: underline !important; } /* ---------- Reduzir movimento/animações ---------- */ body.acess-reduzir-movimento *, body.acess-reduzir-movimento *::before, body.acess-reduzir-movimento *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ---------- Foco visível reforçado (navegação por teclado) ---------- */ body.acess-foco-visivel *:focus { outline: 3px solid #FFD84D !important; outline-offset: 2px !important; }