/* Estilos del Widget de Accesibilidad */

/* Botón flotante */
#accessibility-btn {
  position: fixed;
  bottom: 80px !important;
  right: 15px !important;
  background: #3E7CBD;
  color: #fff;
  border: none;
  border-radius: 10%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  /*box-shadow: 0 4px 6px rgba(0,0,0,0.3);*/
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#accessibility-btn:hover {
  background: #83d0f5;
  color: #000;
}

/* Panel */
#accessibility-panel {
  position: fixed;
  bottom: 145px !important;
  right: 11px !important;
  background: #fff;
  border: 2px solid #231f20;
  border-radius: 12px;
  padding: 10px;
  width: 230px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  display: none;
  z-index: 9999;
  font-family: sans-serif;
}
#accessibility-panel button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 5px 0;
  padding: 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  background: #f8f9fa;
}
#accessibility-panel button:hover {
  background: #e9ecef;
}

#accessibility-panel button i {
  font-size: 1.2rem;
}
#accessibility-panel button span {
  display: inline;
}

/* 📱 En móviles: solo íconos */
@media (max-width: 768px) {
  #accessibility-panel {
    width: auto;
    min-width: 60px;
    padding: 8px;
  }
  #accessibility-panel button {
    width: 45px;
    height: 45px;
    justify-content: center;
    margin: 4px;
    padding: 0;
  }
  #accessibility-panel button span {
    display: none;
  }
}

/* ---- Modos SOLO para los elementos target ---- */
#main.contrast-high, #header.contrast-high, #footer.contrast-high, #navhero.contrast-high {
  filter: contrast(180%);
}
#main.contrast-bw, #header.contrast-bw, #footer.contrast-bw, #navhero.contrast-bw {
  filter: grayscale(100%) contrast(120%);
}
#main.contrast-sepia, #header.contrast-sepia, #footer.contrast-sepia, #navhero.contrast-sepia {
  filter: sepia(100%);
}
#main.highlight-links a, #header.highlight-links a, #footer.highlight-links a, #navhero.highlight-links a {
  outline: 2px dashed red;
  background: yellow;
}

/* Contraste invertido (nombres consistentes) */
#main.contrast-invert, #header.contrast-invert, #footer.contrast-invert, #navhero.contrast-invert {
  filter: invert(1) hue-rotate(180deg);
}

/* --- Reglas fallback globales (si JS aplica clases a body) --- */
.contrast-high { filter: contrast(180%); }
.contrast-bw   { filter: grayscale(100%) contrast(120%); }
.contrast-sepia{ filter: sepia(100%); }
.contrast-invert { filter: invert(1) hue-rotate(180deg); }

/* Resaltar links (fallback global) */
.highlight-links a { outline: 2px dashed red; background: yellow; color: #000000 !important }

/* Excluir videos de los filtros */
.contrast-high video,
.contrast-bw video,
.contrast-sepia video,
.contrast-invert video,
#main.contrast-high video,
#main.contrast-bw video,
#main.contrast-sepia video,
#main.contrast-invert video,
header.contrast-high video,
footer.contrast-high video, 
navhero.contrast-high video {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Si preferís que la exclusión sea más específica (ej: video con clase .hero-video-bg) mejor: */
.hero-video-bg,
video.hero-video-bg {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Ocultar multimedia (global) */
.hide-media img,
.hide-media video,
.hide-media audio,
.hide-media iframe,
.hide-media picture,
.hide-media source {
  display: none !important;
}

/* Excluir el panel del widget (no queremos que el propio panel se oculte) */
.hide-media #accessibility-panel img,
.hide-media #accessibility-panel video,
.hide-media #accessibility-panel audio,
.hide-media #accessibility-panel iframe {
  display: initial !important;
}

/* Si tu botón tiene alguna imagen dentro, también evitar ocultarlo */
.hide-media #accessibility-btn img,
.hide-media #accessibility-btn svg,
.hide-media #accessibility-btn i {
  display: inline-block !important;
}

/* (Opcional) si querés ocultar background-images que queden */
.hide-media [style*="background-image"] {
  background-image: none !important;
}

/* Evitar que el widget se vea afectado por filtros o contrastes */
#accessibility-btn,
#accessibility-panel {
  isolation: isolate;
  position: fixed !important; /* asegura que flote siempre */
  z-index: 99999 !important;
}