/* ============================================================
COMPONENTE DE ACESSIBILIDADE — CEFOR/Ifes (canônico, compartilhado)
Painel flutuante (padrão gov.br): A−/A+, alto contraste, fonte para
dislexia e tema claro/escuro + widget VLibras.
Como usar numa página:
1. Carregar a fonte Lexend no (família "Lexend").
2. (DEPOIS dos tokens base)
3. body { font-size: calc(16px * var(--font-scale)); } (para A−/A+)
4.
O HTML do painel e do widget VLibras é injetado por a11y.js.
============================================================ */
/* Token da fonte para dislexia (a fonte Lexend é carregada no )
Seletores com :root[...] para vencer o :root dos tokens base
independentemente da ordem de carregamento das folhas. */
/* ------------------------------------------------------------
Alto contraste — esquema preto / amarelo / verde-neon.
Sobrescreve os tokens de cor usados por todas as páginas.
NOTA: o ajuste fino por layout (ex.: heros em faixa) é item
separado de QA de acessibilidade.
------------------------------------------------------------ */
/* ------------------------------------------------------------
Barra flutuante de acessibilidade (canto superior direito)
------------------------------------------------------------ */
.a11y-bar {
position: fixed; top: 14px; right: 14px; z-index: 150;
display: flex; flex-direction: row-reverse; gap: 4px; flex-wrap: wrap;
background: var(--paper); border: 1px solid var(--line);
border-radius: 999px; padding: 4px;
box-shadow: var(--shadow-md, 0 4px 12px rgba(20,17,13,.12));
max-width: calc(100vw - 28px);
font-family: var(--sans, system-ui, sans-serif);
}
.a11y-bar button {
border: 0; background: transparent; color: var(--ink-2);
min-width: 48px; min-height: 48px; padding: 0 10px;
border-radius: 999px; cursor: pointer;
font-family: inherit; font-weight: 600; font-size: .9rem;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
transition: background .15s, color .15s;
}
.a11y-bar button:hover { background: var(--bg-2); color: var(--ink); }
.a11y-bar button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.a11y-bar button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.a11y-bar button svg { width: 16px; height: 16px; }
.a11y-bar .a11y-sep { width: 1px; background: var(--line); margin: 6px 2px; align-self: stretch; }
.a11y-bar-controls { display: flex; gap: 4px; align-items: center; }
.a11y-bar[data-collapsed="true"] .a11y-bar-controls { display: none; }
.a11y-trigger { position: relative; }
.a11y-trigger svg { width: 18px; height: 18px; }
.a11y-bar[data-collapsed="false"] .a11y-trigger { background: var(--ink); color: var(--bg); }
/* Indicador de preferência ativa — quando qualquer ajuste (fonte,
contraste, dislexia, tema) difere do padrão: borda dourada expressiva
na barra, gatilho tingido e bolinha no canto. Em alto contraste o
--gold vira amarelo puro, então o destaque acompanha o esquema. */
.a11y-bar[data-active="true"] {
border: 2px solid var(--gold);
padding: 3px; /* compensa o 1px a mais de borda — barra não muda de tamanho */
box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-md);
}
.a11y-bar[data-active="true"][data-collapsed="true"] .a11y-trigger { color: var(--gold-deep); }
.a11y-bar[data-active="true"] .a11y-trigger::after {
content: ''; position: absolute; top: 1px; right: 1px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--gold);
border: 2px solid var(--paper);
}
/* ------------------------------------------------------------
Widget VLibras
------------------------------------------------------------ */
.vlibras-widget {
position: fixed; bottom: 20px; right: 20px; z-index: 140;
width: 56px; height: 56px; border-radius: 50%;
background: var(--teal); color: var(--on-teal); border: 0; cursor: pointer;
box-shadow: var(--shadow-lg);
display: flex; align-items: center; justify-content: center;
}
.vlibras-widget svg { width: 24px; height: 24px; }
.vlibras-widget:hover { transform: scale(1.05); }
.vlibras-widget::after {
content: 'VLibras'; position: absolute; right: 64px;
background: var(--ink); color: var(--bg);
padding: 4px 10px; border-radius: 6px; font-size: .76rem;
opacity: 0; pointer-events: none; transition: opacity .2s; white-space: nowrap;
}
.vlibras-widget:hover::after { opacity: 1; }
@media (max-width: 540px) {
.a11y-bar { top: auto; bottom: 12px; right: 12px; left: auto; }
.vlibras-widget { bottom: 76px; }
}