/* acessibilidade-padrao.css — painel de acessibilidade padrão (botão flutuante + 10 recursos + VLibras).
   Mesmo modelo em todos os sites; só o bloco "Cores" abaixo muda. Namespace .acess* para não colidir com o CSS do site. */

/* ---------- Cores (únicas linhas que mudam entre sites) ---------- */
.acess {
  --ac-fundo: #082c44;        /* painel e botão */
  --ac-texto: #ffffff;        /* texto no painel */
  --ac-acento: #017198;      /* cartão ligado, bordas de destaque */
  --ac-acento-texto: #ffffff; /* texto sobre o cartão ligado */
  --ac-titulo: #7fd0ec;      /* título e ícone do botão */
  --ac-z: 10001;
}

/* ---------- Botão e painel ---------- */
.acess, .acess * { box-sizing: border-box; }
.acess { position: fixed; left: 20px; bottom: 20px; transition: bottom .25s ease; z-index: var(--ac-z); font-family: inherit; line-height: 1.2; }
.acess button { font: inherit; margin: 0; letter-spacing: normal; text-transform: none; }
.acess-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0; border: 2px solid var(--ac-acento); border-radius: 50%;
  background: var(--ac-fundo); color: var(--ac-titulo); cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35); transition: transform .2s ease;
}
.acess-btn:hover { transform: scale(1.06); }
.acess-btn:focus-visible, .acess button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.acess-painel {
  position: absolute; left: 0; bottom: 64px; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 110px);
  display: flex; flex-direction: column; padding: 16px;
  background: var(--ac-fundo); color: var(--ac-texto);
  border: 1px solid var(--ac-acento); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  text-align: left;
}
.acess-painel[hidden] { display: none; }
.acess-titulo { margin: 0 0 12px; font-weight: 700; font-size: 1.1rem; color: var(--ac-titulo); }
.acess-rolagem { flex: 1; min-height: 0; overflow-y: auto; }
.acess-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acess-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 70px; padding: 8px 6px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px;
  background: rgba(255, 255, 255, .07); color: inherit; font-size: .8rem; font-weight: 500; line-height: 1.15; text-align: center;
}
button.acess-tile { cursor: pointer; }
.acess-tile svg { width: 22px; height: 22px; flex: none; }
.acess-tile[hidden] { display: none; }
button.acess-tile:hover { border-color: var(--ac-titulo); }
.acess-tile[aria-pressed="true"] { background: var(--ac-acento); border-color: var(--ac-acento); color: var(--ac-acento-texto); }
.acess-fonte { display: flex; gap: 4px; }
.acess-fonte button {
  min-width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px;
  background: transparent; color: inherit; font-weight: 700; cursor: pointer;
}
.acess-fonte button:hover { background: var(--ac-acento); border-color: var(--ac-acento); color: var(--ac-acento-texto); }
.acess-fonte button:disabled { opacity: .35; cursor: not-allowed; }
.acess-redefinir {
  margin-top: 12px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ac-titulo); border-radius: 999px;
  background: transparent; color: var(--ac-titulo); font-weight: 700; cursor: pointer;
}
.acess-redefinir:hover { background: var(--ac-titulo); color: var(--ac-fundo); }
.acess-pular {
  position: fixed; top: -100px; left: 16px; z-index: 100000; padding: 12px 24px; border-radius: 999px;
  background: var(--ac-acento, #000); color: var(--ac-acento-texto, #fff); font-weight: 700; text-decoration: none;
}
.acess-pular:focus { top: 16px; }

/* Régua de leitura: faixa clara que acompanha o mouse/dedo; o resto da tela escurece */
.acess-regua {
  position: fixed; left: 0; right: 0; top: 40%; height: 110px; z-index: 9990; pointer-events: none;
  border-top: 2px solid #ffbf47; border-bottom: 2px solid #ffbf47;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6);
}
.acess-regua[hidden] { display: none; }

/* ---------- Modos (aplicados no <html>) ---------- */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/atkinson/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/atkinson/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

/* Fonte legível (ícones ficam de fora) */
html[data-fonte="legivel"] body,
html[data-fonte="legivel"] body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]):not(svg):not(svg *) {
  font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif !important;
}

/* Espaçamento de texto (WCAG 1.4.12) */
html[data-espacamento="amplo"] body { letter-spacing: .12em !important; word-spacing: .16em !important; }
html[data-espacamento="amplo"] body p, html[data-espacamento="amplo"] body li, html[data-espacamento="amplo"] body dd,
html[data-espacamento="amplo"] body td, html[data-espacamento="amplo"] body label, html[data-espacamento="amplo"] body blockquote { line-height: 1.9 !important; letter-spacing: .12em !important; word-spacing: .16em !important; }
html[data-espacamento="amplo"] body p { margin-bottom: 1.6em; }

/* Cursor grande */
html[data-cursor="grande"], html[data-cursor="grande"] * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M4 2l15 9-6.5 1.8L9.5 19z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='round'/></svg>") 4 2, auto !important;
}
html[data-cursor="grande"] a, html[data-cursor="grande"] button, html[data-cursor="grande"] [role="button"], html[data-cursor="grande"] summary, html[data-cursor="grande"] label, html[data-cursor="grande"] select {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M9 11V5a1.5 1.5 0 0 1 3 0v5l5 1a2 2 0 0 1 1.6 2l-.6 6a2 2 0 0 1-2 1.8H10a2 2 0 0 1-1.6-.8L5 15.5a1.5 1.5 0 0 1 2.3-1.8L9 15z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>") 12 4, pointer !important;
}

/* Sublinhar links */
html[data-links="sublinhados"] body a:not(.acess-pular) { text-decoration: underline !important; text-underline-offset: 3px; }

/* Alto contraste: fundo preto, texto branco, links amarelos (o painel e o VLibras ficam como estão) */
html[data-contraste="alto"] body,
html[data-contraste="alto"] body *:not(.acess):not(.acess *):not(img):not(video):not(canvas):not(iframe):not([vw]):not([vw] *):not([vp]):not([vp] *) {
  background-color: #000 !important; color: #fff !important; border-color: #fff !important;
  box-shadow: none !important; text-shadow: none !important;
}
html[data-contraste="alto"] body a:not(.acess *), html[data-contraste="alto"] body a:not(.acess *) * { color: #ffea00 !important; }
html[data-contraste="alto"] body *:focus-visible { outline: 3px solid #ffea00 !important; outline-offset: 3px; }
html[data-contraste="alto"] body img { filter: contrast(1.1); }

/* Reduzir movimento */
html[data-movimento="reduzido"] *, html[data-movimento="reduzido"] *::before, html[data-movimento="reduzido"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

@media (max-width: 600px) {
  .acess { left: 12px; bottom: 12px; }
  .acess-btn { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .acess-btn { transition: none; } }