/* Contenedor y botones de accesibilidad */
.accessibility-buttons-container {
  position: fixed !important;
  right: 1rem !important;
  bottom: 1rem !important;
  display: inline-flex !important; /* que el fondo se ajuste al contenido */
  flex-direction: column;
  gap: .5rem;
  z-index: 2000 !important;
  /* Contenedor sin fondo para evitar franja alargada */
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;  /* evita ocupación de ancho extra */
  height: auto !important; /* evita franjas alargadas */
}

.accessibility-buttons-container .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid #164443;
  background: #ffffff;
  color: #164443;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.accessibility-buttons-container .btn:hover,
.accessibility-buttons-container .btn:focus {
  background: #e9f4f2;
}

/* Mejor integración con modos */
body.modo-oscuro .accessibility-buttons-container .btn {
  background: #0f1720;
  color: #e9ecef;
  border-color: #e9ecef;
}
body.modo-oscuro .accessibility-buttons-container .btn:hover,
body.modo-oscuro .accessibility-buttons-container .btn:focus {
  background: #1b2430;
}

/* Botón de Encuesta con estilo institucional (solo este botón en verde) */
.accessibility-buttons-container [data-action="encuesta-accesibilidad"] {
  background: #164443 !important;
  color: #ffffff !important;
  border-color: #164443 !important;
}
.accessibility-buttons-container [data-action="encuesta-accesibilidad"] i { color: #ffffff !important; }

body.modo-oscuro .accessibility-buttons-container [data-action="encuesta-accesibilidad"] {
  background: #0f3332 !important;
  border-color: #0f3332 !important;
  color: #ffffff !important;
}

body.alto-contraste .accessibility-buttons-container .btn {
  background: #ffff00;
  color: #000;
  border-color: #000;
}

/* Layout responsivo del contenedor */
@media (max-width: 768px) {
  .accessibility-buttons-container {
    right: .5rem !important;
    bottom: .5rem !important;
    left: auto !important;  /* evitar que se expanda desde el lado izquierdo */
    top: auto !important;
    flex-direction: row;     /* en móviles, en fila para ocupar menos alto */
    gap: .4rem !important;
    width: auto !important;
  }
  .accessibility-buttons-container .btn { width: 40px; height: 40px; }
}