/*
 * Menu de acessibilidade: botão fixo sob o do VLibras, painel e os modos que
 * as opções ligam. Os modos são classes na raiz (<html>), aplicadas pelo
 * assets/js/acessibilidade.js e, antes da primeira pintura, pelo <head>.
 */

/* ------------------------------------------------------------------ *
 * Botão (mesmo visual do botão do VLibras: 40x40, cantos de 8px)
 * ------------------------------------------------------------------ */

.cap-a11y-pilha {
  position: fixed;
  right: 10px;
  top: calc(50% + 32px);
  z-index: 99998;
}

.cap-a11y-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  line-height: 1;
}

.cap-a11y-botao svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cap-a11y-botao:hover {
  filter: brightness(1.1);
}

.cap-a11y-botao:focus-visible {
  outline: 2px solid #ffffff;
  box-shadow: 0 0 10px 4px #1351b4;
}

/*
 * Dica lateral: como no VLibras, ao passar o mouse (ou focar pelo teclado) uma
 * etiqueta azul desliza para a esquerda, de trás do botão. Com o painel
 * aberto ela some, para não competir com ele.
 */
.cap-a11y-botao {
  position: relative;
  z-index: 1;
}

.cap-a11y-dica {
  position: absolute;
  top: 0;
  right: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 0;
  height: 40px;
  padding: 0;
  background: linear-gradient(135deg, #2266d2, #3690fa);
  color: #ffffff;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 0.9rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: width 0.5s ease, padding 0.5s ease, opacity 0.3s ease;
}

.cap-a11y-dica strong {
  font-family: var(--f-titulo);
  font-size: 1.05rem;
  font-weight: 600;
}

.cap-a11y-pilha:hover .cap-a11y-dica,
.cap-a11y-botao:focus-visible ~ .cap-a11y-dica {
  width: 10rem;
  padding: 0 0 0 16px;
  opacity: 1;
}

.cap-a11y-pilha .cap-a11y-botao[aria-expanded="true"] ~ .cap-a11y-dica {
  width: 0;
  padding: 0;
  opacity: 0;
}

/* ------------------------------------------------------------------ *
 * Painel
 * ------------------------------------------------------------------ */

.cap-a11y-painel {
  position: fixed;
  right: calc(var(--cap-a11y-direita, 10px) + 54px);
  top: 50%;
  z-index: 99999;
  width: 21rem;
  max-width: calc(100vw - 24px);
  max-height: 88vh;
  overflow-y: auto;
  background: #ffffff;
  color: #2b2b2b;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%);
}

.cap-a11y-painel[hidden] {
  display: none;
}

.cap-a11y-painel:focus {
  outline: none;
}

.cap-a11y-painel__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  background: linear-gradient(135deg, #2266d2, #3690fa);
  color: #ffffff;
  border-radius: 16px 16px 0 0;
}

.cap-a11y-painel__titulo {
  margin: 0;
  color: #ffffff;
  font-size: 1.1rem;
}

.cap-a11y-painel__fechar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border: 0;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
}

.cap-a11y-painel__fechar:hover {
  background: rgba(255, 255, 255, 0.4);
}

.cap-a11y-painel__grade {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
}

.cap-a11y-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: #f4f7fb;
  color: #2b2b2b;
  border: 2px solid #dde4ee;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.25;
  text-align: center;
  transition: border-color var(--transicao), background var(--transicao);
}

.cap-a11y-opcao:hover:not(:disabled) {
  background: #e8f0fc;
  border-color: #1351b4;
}

.cap-a11y-opcao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cap-a11y-opcao.is-ativa {
  background: #1351b4;
  color: #ffffff;
  border-color: #1351b4;
}

.cap-a11y-opcao--larga {
  grid-column: 1 / -1;
}

.cap-a11y-opcao__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.cap-a11y-opcao__icone svg {
  width: 1.4rem;
  height: 1.4rem;
}

.cap-a11y-opcao__sigla {
  font-family: var(--f-titulo);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}

.cap-a11y-painel__nota {
  margin: 0;
  padding: 0 14px 14px;
  color: #555555;
  font-size: 0.78rem;
  line-height: 1.4;
}

@media (max-width: 37.5em) {
  /* No celular o painel vira uma folha ancorada embaixo. */
  .cap-a11y-painel {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: 78vh;
    transform: none;
  }
}

/* ------------------------------------------------------------------ *
 * Guia de leitura
 * ------------------------------------------------------------------ */

.cap-guia-leitura {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 99997;
  height: 8px;
  background: rgba(255, 215, 0, 0.55);
  border-top: 2px solid rgba(255, 140, 0, 0.9);
  pointer-events: none;
}

.cap-guia-leitura[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ *
 * Modos
 * ------------------------------------------------------------------ */

html.cap-links-destacados a {
  background: #ffd800 !important;
  color: #000000 !important;
  text-decoration: underline !important;
  box-shadow: 0 0 0 2px #000000 !important;
}

/* Espaçamento do WCAG 1.4.12: linha 1,5x, letras 0,12em, palavras 0,16em. */
html.cap-espacamento body,
html.cap-espacamento body * {
  line-height: 1.8 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

html.cap-dislexia body,
html.cap-dislexia body * {
  font-family: "OpenDyslexic", "Comic Sans MS", Verdana, sans-serif !important;
}

html.cap-sem-imagens img,
html.cap-sem-imagens picture,
html.cap-sem-imagens video,
html.cap-sem-imagens .cap-faixa {
  display: none !important;
}

/* A marca continua visível: sem ela a página perde o rumo. */
html.cap-sem-imagens .cap-marca img,
html.cap-sem-imagens .cap-rodape img[src*="logo"] {
  display: block !important;
}

html.cap-sem-animacao *,
html.cap-sem-animacao *::before,
html.cap-sem-animacao *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}