﻿.accessibility-menu {
  position: fixed;
  top: 7px;
  left: 10px;
  z-index: 9999;
}

#toggle-accessibility {
  all: unset;
  background-color: #611232 !important;
  color: white !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  position: relative;
  overflow: hidden; /* ← Evita zonas activas invisibles */
}

#toggle-accessibility:hover {
  background-color: #940094; /* tono más claro u oscuro al pasar el mouse */
}


#toggle-accessibility i {
  font-size: 28px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none; /* ← Esto es clave */
}

.accessibility-options {
  display: none;
  flex-direction: column;
  margin-top: 10px;
}

.accessibility-options button {
  margin-bottom: 5px;
  background-color: #e5e5e5;
  border: none;
  padding: 8px 12px;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
}

.accessibility-options button i {
  margin-right: 6px;
}

.accessibility-options button:hover {
  background-color: #ccc;
}

/* Modo Daltonismo */
body.daltonico {
  filter: grayscale(0.5) contrast(1.2) saturate(0.7);
  /* Puedes ajustar el filtro para mejor legibilidad */
}

/* Modo Contraste Alto */
body.contraste-alto {
  background-color: #000 !important;
  color: #fff !important;
}

body.contraste-alto a,
body.contraste-alto button {
  color: #0ff !important; /* cian para enlaces y botones */
  background-color: transparent !important;
  border-color: #0ff !important;
}

#mask-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(
    circle 120px at 0 0,
    transparent 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  background-repeat: no-repeat;
  transition: background 0.1s ease;
}


