.icono-altavoz {
  display: flex;
  height: 150px;
  justify-content: space-around;
  font-size: 30px;
  color: #004080; /* Mismo color que la caja, pero puedes cambiarlo */
  left: 100px;
}

.icono-altavoz button{
  height: 44px;
}

#padre-text {
  position: fixed;
  top: 42%;
  z-index: 10;
}

/* Estilos para el cuadro de texto */
.vertical-box {
  width: 45px;
  height: 150px;
  background-color: #008a97;
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 13px 10px 13px 7px;
  border-radius: 0 10px 10px 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

#padre-text input {
  display: none;
}

#cajaPadreAccesibilidad {
  display: none;
}

#imagen-accesibilidad img {
  cursor: pointer;
}

.imagen-accesibilidad img{
  margin-left: 10px;
}

#botonAccesibilidad:checked ~ div {
  display: flex;
}


.high-contrast a,
.high-contrast p,
.high-contrast h1,
.high-contrast h2,
.high-contrast h3,
.high-contrast span,
.high-contrast li,
.high-contrast .bgHeading,
.high-contrast .headingTitle {
  color: yellow !important;
}

.high-contrast header,
.high-contrast footer,
.high-contrast .bgHeading,
.high-contrast .headingTitle,
.high-contrast #footerCopyright {
  background-color: black !important;
}

.high-contrast img {
  filter: grayscale(100%) contrast(100%);
  background-color: white;
}

.high-contrast .reading-mask {
  background: yellow !important;
}
.high-contrast .reading-mask::after{
  border-bottom: 20px solid yellow;
}

.reading-mask {
  position: fixed;
  width: 30%; /* Ancho del 20% */
  height: 15px; /* Grosor de la línea */
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* Centrar horizontalmente */
  background: rgba(0, 0, 0, 0.8); /* Color oscuro para la línea */
  pointer-events: none;
  z-index: 9999;
}

/* Flecha (pico) apuntando hacia arriba */
.reading-mask::after {
  content: "";
  position: absolute;
  top: -20px; /* Posición de la flecha */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid rgba(0, 0, 0, 0.8); /* Flecha del mismo color que la línea */
}