@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0');


/* =========================================================
   BOTÃO FLUTUANTE
   ========================================================= */


#a11y-toggle {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9996;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;

  background: #3085EF;
  color: #ffffff;

  cursor: pointer;
  z-index: 9996;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


#a11y-toggle:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}


#a11y-toggle .fab-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#a11y-toggle .fab-icon svg {
  width: 100% !important;
  height: 100% !important;
}

/* ANEL EXTERNO */
#a11y-toggle.profile-active::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid #00c27a;
  animation: pulse 1.6s infinite;
}

/* CHECK */
#a11y-toggle.profile-active .fab-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00c27a;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: bold;
}

#a11y-toggle.profile-active .fab-indicator::after {
  content: "✓";
}

@keyframes pulse {
  0% {
    opacity: .9;
  }

  50% {
    opacity: .4;
  }

  100% {
    opacity: .9;
  }
}


/* =========================================================
   PAINEL
   ========================================================= */

#a11y-panel {
  position: fixed;
  top: 0;
  left: -380px;
  width: 360px;
  height: 100%;
  background: #f3f6f5;
  box-shadow: 6px 0 30px rgba(0, 0, 0, .2);
  z-index: 2147483646;
  transition: left .3s ease;

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#a11y-panel.open {
  left: 0;
}

.a11y-header {
  height: 56px;
  background: #007a4a;
  color: #fff !important;
  padding: 0 48px 0 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-shrink: 0;
  /* 🔥 nunca encolhe */
}

.a11y-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  z-index: 1;
  color: #fff;
}

/* ÍCONE DO HEADER DE PERFIS */
.a11y-profiles-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #3085EF;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  /* controla SVG ou fonte */
  flex-shrink: 0;
}

/* SVG DENTRO DA BOLINHA */
.a11y-profiles-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* SE USAR MATERIAL SYMBOLS */
.a11y-profiles-icon.material-symbols-rounded {
  font-size: 20px;
  line-height: 1;
}


/* FECHAR */

#a11y-close {
  position: absolute;
  top: 14px;
  right: 14px;

  width: 34px;
  height: 34px;
  border-radius: 50%;

  border: 3px solid #fff;
  background: transparent;
  color: #fff;

  font-size: 18px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}


#a11y-close:hover {
  background: rgba(255, 255, 255, .15);
}

#a11y-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* =========================================================
   SCROLL – COMPORTAMENTO ANTIGO (HOVER ONLY)
   ========================================================= */


.a11y-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.a11y-body {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.a11y-body::-webkit-scrollbar {
  width: 8px;
}

.a11y-body::-webkit-scrollbar-track {
  background: transparent;
}

.a11y-body::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 8px;
  transition: background-color .3s ease;
}

.a11y-body:hover {
  scrollbar-color: #00995d transparent;
}

.a11y-body:hover::-webkit-scrollbar-thumb {
  background-color: #00995d;
}

/* =========================================================
   PERFIS DE ACESSIBILIDADE (LAYOUT NOVO)
   ========================================================= */

.a11y-profiles {
  margin: 0 16px 16px;
  background: #fff;
  border-radius: 20px;
  margin: 16px 16px 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

.a11y-profiles-header {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  padding: 16px;

  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.a11y-profiles-header:focus-visible {
  outline: 3px solid #00995d;
}

.a11y-profiles-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #111;
}

.a11y-profiles-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  transition: transform .25s ease;
}

.a11y-profiles.open .a11y-profiles-chevron {
  transform: rotate(-135deg);
}

/* CONTEÚDO EXPANSÍVEL */

.a11y-profiles-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;

  padding: 0 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;

  transition:
    max-height .35s ease,
    opacity .25s ease,
    padding .25s ease;
}

.a11y-profiles.open .a11y-profiles-content {
  max-height: 260px;
  opacity: 1;
  padding: 16px;
}

/* CARDS DE PERFIL */

.a11y-profile-card {
  all: unset;
  box-sizing: border-box;
  height: 52px;
  background: #f5f7f6;
  border-radius: 14px;
  padding: 10px 12px;

  display: flex;
  align-items: center;
  gap: 10px;

  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}

.a11y-profile-card:hover {
  background: #eef6f2;
}

.a11y-profile-card.active {
  background: #e4f6ee;
  box-shadow: 0 0 0 2px #00995d;
}

.profile-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #00995d;
  color: #fff;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-label {
  font-size: 14px;
  font-weight: 500;
}

/* =========================================================
   GRID DE OPÇÕES (NOVO VISUAL)
   ========================================================= */

.a11y-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding: 16px;
}

.a11y-grid button {
  background: #fff;
  border: none;
  border-radius: 20px;
  padding: 28px 14px;
  min-height: 130px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  cursor: pointer;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, .1),
    0 2px 6px rgba(0, 0, 0, .05);

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.a11y-grid button:hover {
  box-shadow:
    0 0 0 2px rgba(0, 153, 93, .4),
    0 14px 30px rgba(0, 0, 0, .16),
    0 4px 10px rgba(0, 0, 0, .08);
}

/*
.a11y-grid button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px #00995d,
    0 14px 30px rgba(0,0,0,.16);
}*/


.a11y-grid button.active {
  background: #00995d;
}

.a11y-grid .icon {
  font-size: 30px;
}

.a11y-grid .label {
  font-size: 14px;
  font-weight: 500;
  color: #222;
}

.a11y-grid button.active .icon,
.a11y-grid button.active .label {
  color: #fff;
}



/* =========================================================
   ACESSIBILIDADE – CLASSES FUNCIONAIS
   ========================================================= */

html.a11y-dyslexia *:not(.material-symbols-rounded):not(.icon) {
  font-family: 'Lexend', Arial, sans-serif !important;
}


html.a11y-text-up {
  font-size: 112%;
}

html.a11y-spacing {
  letter-spacing: .12em;
  line-height: 1.8;
}

html.a11y-line-height * {
  line-height: 1.9 !important;
}

html.a11y-contrast {
  background: #000;
  color: #fff;
}

html.a11y-links a {
  text-decoration: underline !important;
  font-weight: bold;
}

html.a11y-no-anim * {
  animation: none !important;
  transition: none !important;
}

html.a11y-no-img img {
  display: none !important;
}

/* =========================================================
   CURSOR DESTACADO
   ========================================================= */

html.a11y-cursor,
html.a11y-cursor * {
  cursor: pointer !important;
}

html.a11y-cursor::after {
  content: "";
  position: fixed;
  left: var(--cursor-x);
  top: var(--cursor-y);
  width: 36px;
  height: 36px;
  border: 3px solid #00995d;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483647;
  transform: translate(-50%, -50%);
}

@media (hover: none) {
  html.a11y-cursor::after {
    display: none;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  #a11y-panel {
    width: 92%;
    max-width: 380px;
    left: -100%;
  }

  #a11y-panel.open {
    left: 0;
  }

  #a11y-toggle {
    width: 48px;
    height: 48px;
    font-size: 22px;
    bottom: 16px;
    left: 16px;
  }
}

/* =========================================================
   ALTO CONTRASTE – CORRIGIDO (SEM TRANSPARÊNCIA)
   ========================================================= */

/* SITE */
html.a11y-contrast body {
  background-color: #000 !important;
  color: #fff !important;
}

html.a11y-contrast a {
  color: #00ff99 !important;
  text-decoration: underline !important;
}

/* =========================
   WIDGET A11Y (ISOLADO)
   ========================= */

html.a11y-contrast #a11y-panel {
  background: #000 !important;
  color: #fff !important;
}

html.a11y-contrast .a11y-header {
  background: #000 !important;
  border-bottom: 2px solid #fff;
}

html.a11y-contrast .a11y-header h2,
html.a11y-contrast #a11y-close {
  color: #fff !important;
  border-color: #fff !important;
}

/* CARDS / BOTÕES */
html.a11y-contrast .a11y-grid button,
html.a11y-contrast .a11y-profile-card {
  background: #000 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #fff !important;
}

/* ÍCONES E LABELS */
html.a11y-contrast .icon,
html.a11y-contrast .label,
html.a11y-contrast .profile-label {
  color: #fff !important;
}

/* HOVER */
.a11y-grid button:hover {
  border-color: #00995d;
  background: #f0faf7;
}

/* Botão ativo permanece verde mesmo no hover */
.a11y-grid button.active:hover {
  background: #00995d;
}


/* FOCO TECLADO */
.a11y-grid button:focus-visible {
  outline: 3px solid #00995d;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  #a11y-toggle {
    top: auto;
    bottom: 16px;
    transform: none;
  }
}