/*
 * Barra de accesibilidad GOV.CO (Biblioteca Digital de Componentes, versión 5,
 * https://cdn.www.gov.co/v5/transversal/barra-accesibilidad).
 *
 * Copia local: mismos nombres de clase, mismas medidas, colores, textos e
 * íconos del componente oficial (layout-govco-v5/all.css, sección "Barra de
 * accesibilidad"), pero sin pedir nada a cdn.www.gov.co. Cambios respecto al
 * original, todos para que la barra se vea y se comporte igual dentro de este
 * visor:
 *  - Las medidas van en px (el original usa rem) porque la barra no debe
 *    crecer ni encogerse cuando la propia barra cambia el tamaño de la letra.
 *  - El ícono es más grande (26 px sobre un cuadro de 32 px, no 16 sobre 24) y se pinta con el azul
 *    exacto en vez del filtro del original: a 16 px el "−" y el "+" de las dos letras no se leían.
 *  - Los colores van como variables propias (--acc-*), sin depender de las
 *    variables --govcolor-* del layout oficial.
 *  - Los selectores van bajo .govco-acc para ganarle a la versión 4 de la
 *    barra, que el visor todavía carga desde el CDN para la barra superior
 *    (esa hoja fija .barra-accesibilidad-govco con otro color y otra posición).
 *  - La fuente Verdana del original no se incluye (es una fuente con licencia
 *    de Microsoft): se usa la del sistema y, si no existe, sans-serif.
 *
 * Los íconos (icons/*.svg) son los del componente oficial.
 */

.govco-acc {
  --acc-cobalto: #0943B5;
  --acc-havelock: #4672C8;
  --acc-azul-tropical: #B5C7E9;
  --acc-blanco: #FFFFFF;
  --acc-negro: #000000;

  /* Anclada al lado derecho del navegador, centrada en vertical (guía oficial:
     "ubicándola siempre en la parte derecha, anclado al navegador"). */
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1055;
}

.govco-acc .barra-accesibilidad-govco {
  background-color: var(--acc-cobalto) !important;
  display: flex;
  flex-direction: column;
  border-radius: 10px 0 0 10px;
  width: 48px;
  height: 143px;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  position: relative;
  top: auto;
  right: auto;
  opacity: 1;
}

.govco-acc .barra-accesibilidad-govco button {
  width: 48px;
  height: 40px;
  border: 0;
  padding: 0;
  background-color: var(--acc-cobalto);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: Verdana, "DejaVu Sans", sans-serif;
  line-height: inherit;
  border-radius: 0;
  cursor: pointer;
}

/* Ícono: el original lo tiñe con un filtro (invert/sepia/hue-rotate) a 16 px, lo que lo deja
   pálido y con el "−" y el "+" casi ilegibles. Aquí el SVG se usa como máscara y se pinta con el
   azul cobalto exacto, a 26 px dentro de un cuadro blanco de 32 px. */
.govco-acc .barra-accesibilidad-govco button span {
  z-index: 1;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  display: inline-block;
  background-color: var(--acc-cobalto);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.govco-acc .barra-accesibilidad-govco button span.govco-contrast {
  -webkit-mask-image: url(icons/adjust.svg);
  mask-image: url(icons/adjust.svg);
}

.govco-acc .barra-accesibilidad-govco button span.govco-font-minimize {
  -webkit-mask-image: url(icons/font-minimize.svg);
  mask-image: url(icons/font-minimize.svg);
}

.govco-acc .barra-accesibilidad-govco button span.govco-font-maximize {
  -webkit-mask-image: url(icons/font-maximize.svg);
  mask-image: url(icons/font-maximize.svg);
}

/* Etiqueta que se despliega a la izquierda con el nombre de la acción. */
.govco-acc .barra-accesibilidad-govco button::before {
  position: absolute;
  right: 0;
  min-width: 172px;
  height: 40px;
  padding-right: 48px;
  border-radius: 10px 0 0 10px;
  align-items: center;
  padding-left: 10px;
  color: var(--acc-blanco);
  background-color: var(--acc-havelock);
  white-space: nowrap;
  display: none;
  opacity: 0;
}

/* Cuadro blanco redondeado detrás del ícono. */
.govco-acc .barra-accesibilidad-govco button::after {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--acc-blanco);
  border: 0;
  border-radius: 6px;
  position: absolute;
  display: block;
}

.govco-acc .barra-accesibilidad-govco button.contrast::before {
  content: "Contraste";
}

.govco-acc .barra-accesibilidad-govco button.decrease-font-size::before {
  content: "Reducir letra";
}

.govco-acc .barra-accesibilidad-govco button.increase-font-size::before {
  content: "Aumentar letra";
}

.govco-acc .barra-accesibilidad-govco button:hover,
.govco-acc .barra-accesibilidad-govco button:focus-visible {
  background-color: var(--acc-havelock);
}

.govco-acc .barra-accesibilidad-govco button:hover::before,
.govco-acc .barra-accesibilidad-govco button:focus-visible::before {
  opacity: 1;
  display: flex;
}

.govco-acc .barra-accesibilidad-govco button:focus-visible {
  outline: 0;
}

.govco-acc .barra-accesibilidad-govco button:focus-visible::before {
  outline: 2px solid var(--acc-negro);
  outline-offset: 2px;
}

/* Seleccionado: el botón sobre el que se hizo clic. */
.govco-acc .barra-accesibilidad-govco button.active {
  background-color: var(--acc-azul-tropical);
  box-shadow: 0 3px 6px #00000029;
}

/* Texto solo para lectores de pantalla: anuncia el cambio de contraste o de tamaño. */
.govco-acc-aviso {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .govco-acc {
    display: none !important;
  }
}