#accesibilidad-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #4751f0;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 1000;
}

#accesibilidad-panel {
  position: fixed;
  bottom: 60px;
  right: 20px;
  background: white;
  color: #222;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: none;
  z-index: 1000;
}

#accesibilidad-panel ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
}

#accesibilidad-panel li {
  margin: 0.5rem 0;
}

#accesibilidad-panel button {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

#accesibilidad-panel button:hover {
  background: #f0f0f0;
}

/* Accessible styles toggled via JS classes */
body.accessible-increase-text {
  font-size: 1.2rem !important;
}
body.accessible-decrease-text {
  font-size: 0.5rem !important;
}

/* 1) Quitamos el filtro directo sobre el body */
body.accessible-grayscale {
  filter: none !important;
}

/* 2) Creamos un overlay fijo que aplica escala de grises a lo que hay "detrás" */
body.accessible-grayscale::before {
  content: "";
  position: fixed;
  inset: 0;                   /* top:0; right:0; bottom:0; left:0; */
  pointer-events: none;       /* deja clicable todo abajo */
  backdrop-filter: grayscale(100%);
  -webkit-backdrop-filter: grayscale(100%); /* para Safari/Edge */
  z-index: 999;               /* por debajo de tu botón (1000) */
}

/* —————————————— */
/* Alto contraste */
body.accessible-high-contrast {
  filter: none !important;
}

body.accessible-high-contrast::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  backdrop-filter: contrast(150%) brightness(120%);
  -webkit-backdrop-filter: contrast(150%) brightness(120%);
  z-index: 999;
}

/* —————————————— */
/* Contraste negativo */
body.accessible-negative-contrast {
  filter: none !important;
}

body.accessible-negative-contrast::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  backdrop-filter: invert(100%);
  -webkit-backdrop-filter: invert(100%);
  z-index: 999;
}

/* —————————————— */
/* Subrayar enlaces (sin filtros, queda igual) */
body.accessible-underline-links a {
  text-decoration: underline !important;
}



#accesibilidad-resumen {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(30, 30, 30, 0.9);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  z-index: 10000;
  display: none;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
#accesibilidad-resumen span {
  margin-right: 8px;
}