/* Diferentes variables para el funcionamiento de la barra de accesilidad, en este lugar podras encontrar el color tanto de la fuente como de los iconos, el tamaño de la barra y sus diferentes colores, entre mas propiedades que podras editar a tu gusto */
:root {
	--color--btnAC: #2fa350;
	--color-fontAC: #111010;
	--color-principalAC: #070b22;
	--color-secundarioAC: #2fa350;
	--color-fondoAC: #fff;
	--resalto-linksAC: #ffff00;
	--color-resaltoFondoAC: #000;
	--widthContenedorAC: 220px;
	--tamanoTituloAC: 18px;
	--tamanoTextoAC: 14px;
	--tamanoIconosAC: 13px;
	--LogoContenedorAC: 60px;
	--tamanoLogoAC: 30px;
	--colorGradient1: #28805c;
	--colorGradient2: #00673d;
}

/* Se importa tipo de fuente para textos, Worksans es la sugerencia realizada por Mintic para aplicarse en los portales web  */
@font-face {
	font-family: 'WorkSans';
	src: url('../fonts/Montserrat.ttf');
}
/* Se importa los iconos proporcionados por Mintic atravez de una fuente, para luego ser utilizado mediante clases */
@font-face {
	font-family: 'govco-font';
	src: url('../fonts/govco-font-icons.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Contenedor Principal, podras editar la posicion de la barra a tu gusto, por ejemplo
  si deseas cambiar la posicion de la barra al lado izquierdo, es necesario cambiar 
  el valor del flex-direction a row-reverse, ademas de su translateX*/
.accessibilityBar {
	display: flex;
	align-items: flex-start;
	position: fixed;
	width: 100%;
	left: 10px;
	bottom: calc(100vh - 99vh);
	transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform: translateY(94%);
	flex-direction: column;
	z-index: 99999999999999999;
}
@media (width >= 768px) {
	.accessibilityBar {
		max-width: 700px;
		top: auto;
		left: 10px;
		bottom: calc(100vh - 99vh);
		transform: translateY(93%);
	}
}

/* Le eliminamos el borde al momento de enfocar con tabulación la barra de accesibilidad en general */
.accessibilityBar:focus {
	border: none !important;
}

/* Contenedor de la imagen del logo */
/* Si es deseado añadir un gradient como fondo puedes ingresar a siguiente enlace https://uigradients.com/#CoolBlues,
  en el caso de que quieras continuar con el mismo gradient y solo cambiar los colores,  puedes conseguir nuevos colores ingresando al
  siguiente enlace https://colorhunt.co/ */
.accessibilityBar__figure {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 65px;
	cursor: pointer;
	background: var(--color--btnAC);
	transition: 0.3s;
	border-radius: 10px;
	padding: 14px;
	margin: 0 !important;
	backdrop-filter: blur(8px);
	position: relative;
}

/* Efecto hover para el boton de la barra de accesibilidad */
.accessibilityBar__figure:hover {
	box-shadow: 0px 0.1em 0.2em rgb(45 35 66 / 40%), 0px 0.4em 0.7em -0.1em rgb(45 35 66 / 30%), inset 0px -0.1em 0px var(--colorGradient2);
}

.accessibilityBar__figure:focus {
	border-radius: none !important;
}

/* Logo de Accesibilidad */
.accessibilityBar__logo {
	width: var(--tamanoLogoAC);
	transition: 1s;
	pointer-events: none;
}

/* Efecto de rotacion en el logo de la barra de accesibilidad en el momento de pasar el cursor */
.accessibilityBar__figure:hover > .accessibilityBar__logo {
	transform: rotate(360deg);
}

/* Contenedor de las diferentes opciones y titulo de la barra de accesibilidad */
.accessibilityBar__content {
	display: flex;
	background: #f2f2f2;
	transition: all 1.4s;
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
	border-radius: 10px;
	color: var(--color-fontAC);
	flex-direction: column;
	align-items: flex-start;
	justify-content: start;
	height: 100%;
	width: 100%;
	padding: 5px 14px 8px 14px;
	border-radius: 0px 8px 8px 8px;
	transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	/* transform: translateX(-100vw); */
	/* display: none; */
}

@media (width >= 768px) {
	.accessibilityBar__content {
		width: 100%;
	}
}

/* Titulo principal */
.accessibilityBar__title {
	font-size: var(--tamanoTituloAC) !important;
	letter-spacing: normal !important;
	margin-top: 10px;
	margin-bottom: 15px;
	font-weight: 700;
	text-align: center;
	color: var(--color-principalAC);
	font-family: 'WorkSans';
}

/* Opciones de la barra */
.accessibilityBar__options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	overflow-y: auto;
	overflow-x: hidden;
	height: 85%;
	width: 100%;
	z-index: 0;
}

.accessibilityBar__options::-webkit-scrollbar {
	background-color: transparent;
}

.accessibilityBar__options::-webkit-scrollbar {
	background-color: transparent;
}

@media (width >= 768px) {
	.accessibilityBar__options {
		max-width: 100%;
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Parrafos de las opciones */
.accessibilityBar__p {
	font-size: var(--tamanoTextoAC) !important;
	letter-spacing: normal !important;
	font-family: 'WorkSans' !important;
	margin-bottom: 0px !important;
	color: var(--color-fontAC);
	transition: 0.4s;
	text-align: center;
	pointer-events: none;
}

/* Se mantiene el mismo color luego de ingresar al enlace de centro de relevo */
.accessibilityBar__p:visited {
	color: var(--color-fontAC);
}

/* Opción de la barra por individual */
.accessibilityBar__option {
	display: flex;
	flex-direction: column;
	align-items: baseline;
	justify-content: center;
	align-items: center;
	transition: 400ms;
	opacity: 0;
	border: 1px solid var(--colorGradient1);
	border-radius: 1rem;
	padding: 0.5rem;
	cursor: pointer;
}

/* Efecto hover de subrayado para cada opción de la barra de accesibilidad */
.accessibilityBar__option:hover .accessibilityBar__p {
	text-decoration: underline;
}

.accessibilityBar--active {
	top: 0;
	left: 0;
	transform: translate(0);
}

@media (width >= 768px) {
	.accessibilityBar--active {
		max-width: 700px;
		top: auto;
		left: 10px;
		bottom: 10px;
		transform: translate(0);
	}
}

.accessibilityBar--active .accessibilityBar__figure {
	width: 100%;
	border-radius: 0;
}

/* .accessibilityBar--active .accessibilityBar__content {
	display: flex;
	transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	opacity: 1;
	transition: opacity 2s, width 1s, height 1s;
} */

/* @starting-style {
	.accessibilityBar--active .accessibilityBar__content {
		opacity: 0;
	}
} */

/* Contraste */
.scr_highcontrast {
	filter: invert(100%);
	background-color: #000 !important;
}

/* En caso que al activar el contraste y modo gris se pierda la barra y boton de subir descomentar linea de codigo 187-189 */

/* .scr_highcontrast .scroll-to-top,.scr_highcontrast .accesibilidadBtn{
      bottom: 8rem !important;
  } */

/* Letra para dislexicos*/

@font-face {
	font-family: 'OpenDyslexic';
	src: url('../fonts/OpenDyslexic-Regular.otf');
}

.font-dyslexic {
	font-family: 'OpenDyslexic', sans-serif !important;
}

/*Letra de señas*/
@font-face {
	font-family: 'handsLanguage';
	src: url('../fonts/Signalin_Nature_LSE.ttf');
}

.font-handsLanguage {
	font-family: 'handsLanguage', sans-serif !important;
}

/* Tono gris */

.scr_grayHues {
	filter: grayscale(1);
}

/* En caso que al activar el contraste y modo gris se pierda la barra y boton de subir descomentar linea de codigo 187-189 */

/* .scr_grayHues .scroll-to-top,.scr_grayHues .accesibilidadBtn{
      bottom: 8rem !important;
  } */

/* Cursor grande */
.scr_bigcursor * {
	cursor: url('/Style Library/ScreenReaderV3/Assets/images/bigcursor.svg'), auto !important;
}

.scr_bigcursor a,
.scr_bigcursor input,
.scr_bigcursor button {
	cursor: url('/Style Library/ScreenReaderV3/Assets/images/cursorPointer.svg'), auto !important;
}

/* Resaltar enlaces */
.src_highlightLink {
	background-color: var(--color-resaltoFondoAC) !important;
	color: var(--resalto-linksAC) !important;
	text-decoration: underline !important;
}

/* Animaciones */
@keyframes itemFade {
	from {
		opacity: 0;
		transform: translateX(70px);
	}

	to {
		opacity: 1;
		transform: translateX(0px);
	}
}

/* Iconos */
.accessibilityBar__icon {
	color: var(--color-secundarioAC);
	font-size: 20px;
	font-family: 'govco-font' !important;
	margin-bottom: 1rem;
	pointer-events: none;
}

.accessibilityBar__icon--play:before {
	content: '\ea94';
}

.accessibilityBar__icon--stop:before {
	content: '\eb37';
}

.accessibilityBar__icon--maximize:before {
	content: '\eae0';
}

.accessibilityBar__icon--minimize:before {
	content: '\eadf';
}

.accessibilityBar__icon--more_spacing:before {
	content: '\ec29';
}

.accessibilityBar__icon--less_spacing:before {
	content: '\ec2a';
}

.accessibilityBar__icon--bar_gray:before {
	content: '\e83d';
}

.accessibilityBar__icon--contrast:before {
	content: '\e803';
}

.accessibilityBar__icon--dyslexic:before {
	content: '\e96d';
}

.accessibilityBar__icon--sign-language:before {
	content: '\f2a7';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

.accessibilityBar__icon--cursor:before {
	content: '\ec44';
}

.accessibilityBar__icon--reading-line:before {
	content: '\f545';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

.accessibilityBar__icon--translate:before {
	content: '\ea02';
}

.accessibilityBar__icon--link:before {
	content: '\ea14';
}

.accessibilityBar__icon--restart:before {
	content: '\eb9b';
}

.accessibilityBar__icon--centro_relevo:before {
	content: '\e9b6';
}

/*TRADUCTOR STYLES*/
.head-access {
	display: block;
	width: 100%;
}

.translate-container {
	position: relative;
	width: 170px;
	height: 50px;
}

.gtranslate_wrapper {
	position: absolute;
	left: 0;
	z-index: 99999999 !important;
}

.traductor-center {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
}

@media (width >= 768px) {
	.traductor-center {
		display: flex;
		justify-content: center;
		align-items: center;
		grid-column-start: auto;
		grid-column-end: auto;
	}
}

.gt_float_switcher {
	border-radius: 20px !important;
	box-shadow: none !important;
	font-size: 25px;
	width: 100% !important;
}

.gtranslate_wrapper {
	width: 100% !important;
	border-radius: 50px;
}

.gt_float_switcher .gt_options {
	z-index: 1;
}

#gt_float_wrapper {
	position: initial !important;
	display: block;
	min-height: 100px;
}

.head-access {
	display: block;
	width: 100%;
	position: relative; /* 👈 necesario para posicionar la X adentro */
}

/* La X dentro del figure */
.accessibilityBar__close {
	position: absolute;
	top: 6px;
	right: 6px; /* 👈 esquina superior derecha del figure */
	border: none;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 12px 12px;
	border-radius: 8px;
	color: #fff; /* contraste sobre el botón azul */
}
.accessibilityBar__close:hover,
.accessibilityBar__close:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.15);
}

/* Cuando está activa, el figure se hace header (ya lo tenías) */
.accessibilityBar--active .accessibilityBar__figure {
	width: 100%;
	border-radius: 0;
}

/* Por si quieres reforzar visibilidad SOLO en abierto + derecha vía CSS (además del hidden en JS) */
.accessibilityBar__close[hidden] {
	display: none !important;
}