/* =========================================================
   PAINEL DE ACESSIBILIDADE - ACB Marechal
   Botao flutuante (abaixo do VLibras, lado direito) + painel de opcoes.
   Cada opcao ativa uma classe "a11y-*" no <html>.
   ========================================================= */

:root {
	--a11y-cor: #314933;
	--a11y-cor-hover: #24372a;
	--a11y-ativo-bg: #e9f1ea;
	--a11y-botao-cor: #1fa34a;       /* cor do icone flutuante (verde vivo, destaca do fundo do site) */
	--a11y-botao-cor-hover: #178a3d;
}

/* ---------- Botao flutuante (fica logo abaixo do botao do VLibras, lado direito) ----------
   top/right sao ajustados pelo JS conforme a posicao real do VLibras; estes valores sao o padrao. */
.a11y-botao {
	position: fixed;
	right: 10px;
	top: calc(50% - 13px);
	z-index: 10000;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 8px;
	background: var(--a11y-botao-cor);
	color: #FFF;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .2s, transform .2s;
}
.a11y-botao:hover { background: var(--a11y-botao-cor-hover); transform: scale(1.06); }
.a11y-botao:focus-visible,
.a11y-painel button:focus-visible { outline: 3px solid #e8b72b; outline-offset: 2px; }

/* ---------- Painel (abre a esquerda dos botoes, centralizado na altura) ---------- */
.a11y-painel {
	position: fixed;
	right: 62px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2147483640; /* acima do VLibras */
	width: 320px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: #FFF;
	border-top: 5px solid var(--a11y-cor);
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
	padding: 16px;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	text-align: left;
}
.a11y-painel[hidden] { display: none; }

.a11y-painel .a11y-cab {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}
.a11y-painel .a11y-titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--a11y-cor);
	line-height: 1.2;
}
.a11y-painel .a11y-sub {
	margin: 4px 0 0;
	font-size: 12px;
	color: #666;
	line-height: 1.4;
}
.a11y-painel .a11y-fechar {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: #f1f1f1;
	color: #333;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.a11y-painel .a11y-fechar:hover { background: #e2e2e2; }

.a11y-painel .a11y-grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.a11y-painel .a11y-opcao {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 78px;
	padding: 10px 6px;
	border: 2px solid #e1e1e1;
	border-radius: 8px;
	background: #FFF;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.a11y-painel .a11y-opcao .fa { font-size: 22px; color: var(--a11y-cor); }
.a11y-painel .a11y-opcao:hover { border-color: var(--a11y-cor); }
.a11y-painel .a11y-opcao[aria-pressed="true"] {
	border-color: var(--a11y-cor);
	background: var(--a11y-ativo-bg);
	position: relative;
}
.a11y-painel .a11y-opcao[aria-pressed="true"]::after {
	content: "\2713";
	position: absolute;
	top: 4px;
	right: 6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--a11y-cor);
	color: #FFF;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

.a11y-painel .a11y-restaurar {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 10px;
	border: 0;
	border-radius: 8px;
	background: var(--a11y-cor);
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.a11y-painel .a11y-restaurar:hover { background: var(--a11y-cor-hover); }

@media (max-width: 480px) {
	.a11y-painel { right: 16px; left: 16px; width: auto; }
}

/* =========================================================
   EFEITOS DAS OPCOES
   (o painel e o botao ficam de fora para continuarem legiveis)
   ========================================================= */

/* Alto contraste / monocromatico (filter no <html> nao quebra os position:fixed) */
html.a11y-contraste { filter: contrast(1.5); }
html.a11y-mono { filter: grayscale(1); }
html.a11y-contraste.a11y-mono { filter: grayscale(1) contrast(1.5); }

/* Destacar links */
html.a11y-links a:not(.a11y-ignorar) {
	text-decoration: underline !important;
	outline: 2px solid #e8b72b !important;
	outline-offset: 1px;
	background-color: rgba(255, 235, 59, 0.35) !important;
}

/* Fonte legivel (nao mexe em icones de fonte) */
html.a11y-fonte body *:not(.fa):not([class*="fa-"]):not([class*="icon"]):not([class*="glyph"]):not(i) {
	font-family: Arial, Verdana, Helvetica, sans-serif !important;
}

/* Mais espacamento */
/* Vale para a pagina toda, exceto o menu principal (.linhaMenu, que tambem e o menu da barra fixa),
   o VLibras e o proprio painel. Para excluir outra area, adicione a classe no :not(:is(...)). */
html.a11y-espaco body *:not(:is(.linhaMenu, .linhaMenu *, .a11y-painel, .a11y-painel *, [vw], [vw] *)) {
	letter-spacing: 0.05em !important;
	word-spacing: 0.14em !important;
}
html.a11y-espaco body :is(p, li, td, dd, blockquote):not(:is(.linhaMenu *, .a11y-painel *, [vw] *)) {
	line-height: 1.9 !important;
}

/* Cursor grande */
html.a11y-cursor,
html.a11y-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 10-7 1.5 4 7.5-3 1.5-4-7.5L4 20z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-cursor a,
html.a11y-cursor button,
html.a11y-cursor a *,
html.a11y-cursor button * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 10-7 1.5 4 7.5-3 1.5-4-7.5L4 20z' fill='%23314933' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, pointer !important;
}

/* Reduzir animacoes */
html.a11y-animacoes *,
html.a11y-animacoes *::before,
html.a11y-animacoes *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* Guia de leitura (faixa que acompanha o mouse) */
.a11y-guia {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 14px;
	margin-top: -7px;
	background: rgba(232, 183, 43, 0.35);
	border-top: 2px solid #314933;
	border-bottom: 2px solid #314933;
	pointer-events: none;
	z-index: 9998;
	display: none;
}
html.a11y-guia-ativo .a11y-guia { display: block; }

/* Menu principal com texto grande / extra grande:
   o tema usa altura fixa (68px) com line-height 68px, entao uma segunda linha caia para fora da barra.
   Aqui a altura e mantida e o texto fica centralizado na vertical (1 ou 2 linhas). */
html.a11y-texto ul.menuSite > li > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 5px;
	height: 68px;
	line-height: 1.15 !important;
}
html.a11y-texto ul.menuSite > li > a .tituloMenu {
	display: block !important;
	height: auto !important;
	line-height: 1.15 !important;
}

/* Com texto grande, o menu flexivel pode quebrar o texto do item em 2 linhas (centralizado) em vez de estourar */
html.a11y-texto .linhaMenu ul.menuSite > li {
	white-space: normal;
	min-width: 0;
}