/*
 * Acessibilidade Gov Pro — Widget de acessibilidade (glassmorphic, moderno).
 */

#agp-widget {
	--agp-primary: #2563eb;
	--agp-hover: #1e40af;
	--agp-radius: 16px;
	--agp-blur: 12px;
	--agp-transition: all 0.3s cubic-bezier( 0.4, 0, 0.2, 1 );
	--agp-panel-bg: rgba( 255, 255, 255, 0.75 );
	--agp-panel-border: rgba( 255, 255, 255, 0.4 );
	--agp-panel-text: #16181d;
	--agp-panel-muted: #5b6472;
	--agp-chip-bg: rgba( 255, 255, 255, 0.6 );

	position: fixed;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	box-sizing: border-box;
}

/*
 * Isolamento defensivo: temas e page builders (ex.: Elementor) costumam aplicar
 * resets globais de tipografia/ícone a "button", "svg", "a" etc. em todo o site.
 * Fixamos aqui o essencial (fonte, tamanho, caixa) para que o widget sempre
 * pareça igual, não importa o que o restante da página defina.
 */
#agp-widget,
#agp-widget * {
	box-sizing: border-box !important;
}

/*
 * Reseta apenas o essencial que costuma vazar de temas/page builders para
 * dentro de widgets de terceiros (fonte e sombra de texto). Não mexe em
 * margin/padding/text-transform/letter-spacing aqui: como "#agp-widget button"
 * tem especificidade de ID, qualquer propriedade listada sobrepõe classes
 * utilitárias internas (ex.: ".agp-group-label" usa text-transform de
 * propósito) e causaria regressões visuais no próprio widget.
 */
#agp-widget button,
#agp-widget a,
#agp-widget span {
	font-family: inherit !important;
	text-shadow: none !important;
}

@media ( prefers-color-scheme: dark ) {
	#agp-widget {
		--agp-panel-bg: rgba( 24, 26, 32, 0.75 );
		--agp-panel-border: rgba( 255, 255, 255, 0.12 );
		--agp-panel-text: #f4f5f7;
		--agp-panel-muted: #a6adba;
		--agp-chip-bg: rgba( 255, 255, 255, 0.06 );
	}
}

/* ------------------------------------------------------------------ */
/* Posicionamento                                                      */
/* ------------------------------------------------------------------ */

#agp-widget[data-position="bottom-right"] {
	right: 20px;
	bottom: 20px;
}

#agp-widget[data-position="bottom-left"] {
	left: 20px;
	bottom: 20px;
}

/*
 * Quando o aviso de cookies LGPD está visível, o JS dele define
 * --agp-lgpd-height (altura ocupada no rodapé) e o botão do canto inferior
 * sobe para não ficar escondido atrás do banner. Sem banner, o valor é 0px.
 */
#agp-widget[data-position^="bottom"] {
	bottom: calc( 20px + var( --agp-lgpd-height, 0px ) );
	transition: bottom 0.3s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/*
 * Centralização vertical via "margin-top" negativo (metade da altura do
 * botão, 56px), e não via "transform: translateY(-50%)". Isso é proposital:
 * "transform" em QUALQUER elemento vira o "containing block" dos
 * descendentes "position:fixed" (como o nosso .agp-panel), então um
 * transform aqui fazia o painel tentar caber dentro da caixa de 56x56px do
 * botão em vez da tela inteira — causando o painel "espremido" com barra de
 * rolagem horizontal. Com margin-top isso não acontece.
 */
#agp-widget[data-position="center-right"] {
	right: 20px;
	top: 50%;
	margin-top: -28px;
}

#agp-widget[data-position="center-left"] {
	left: 20px;
	top: 50%;
	margin-top: -28px;
}

/* ------------------------------------------------------------------ */
/* Botão flutuante (FAB)                                               */
/* ------------------------------------------------------------------ */

.agp-fab {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: var( --agp-primary ) !important;
	color: #fff !important;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.25 );
	transition: var( --agp-transition );
	box-sizing: border-box !important;
}

/*
 * :hover, :active e :focus-visible fixados na nossa própria cor (com
 * !important) — temas/page builders (Elementor etc.) costumam ter um estilo
 * global de "cor de destaque" para todo <button>, que sem isso vazaria para
 * o nosso botão ao passar o mouse ou clicar.
 */
.agp-fab:hover,
.agp-fab:active,
.agp-fab:focus-visible {
	background: var( --agp-hover ) !important;
	color: #fff !important;
	transform: scale( 1.06 );
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.32 );
}

.agp-fab:focus-visible {
	outline: 3px solid #ffd60a;
	outline-offset: 3px;
}

.agp-fab-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 26px !important;
	height: 26px !important;
	max-width: 26px !important;
	max-height: 26px !important;
	flex-shrink: 0;
}

.agp-fab-icon svg {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	display: block;
}

.agp-fab-badge {
	position: absolute;
	right: calc( 100% + 10px );
	top: 50%;
	transform: translateY( -50% ) translateX( 6px );
	white-space: nowrap;
	background: var( --agp-panel-bg );
	backdrop-filter: blur( var( --agp-blur) );
	-webkit-backdrop-filter: blur( var( --agp-blur ) );
	color: var( --agp-panel-text );
	border: 1px solid var( --agp-panel-border );
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: var( --agp-transition );
}

#agp-widget[data-position="bottom-left"] .agp-fab-badge,
#agp-widget[data-position="center-left"] .agp-fab-badge {
	right: auto;
	left: calc( 100% + 10px );
	transform: translateY( -50% ) translateX( -6px );
}

.agp-fab:hover .agp-fab-badge,
.agp-fab:focus-visible .agp-fab-badge {
	opacity: 1;
	transform: translateY( -50% ) translateX( 0 );
}

/* ------------------------------------------------------------------ */
/* Painel (glassmorphism)                                              */
/* ------------------------------------------------------------------ */

/*
 * O painel usa "position: fixed" com "top" E "bottom" fixados ao viewport
 * (não "bottom" sozinho crescendo para cima a partir do botão). Isso garante
 * que a altura do painel SEMPRE cabe entre esses dois limites, não importa a
 * altura da janela — em telas baixas (notebooks) o painel antigo, que crescia
 * livremente para cima a partir do botão, podia ficar mais alto que o espaço
 * disponível e "vazar" para fora da tela por cima (cabeçalho) e por baixo
 * (rodapé/Redefinir), sem nenhuma forma de rolar até lá. Com top+bottom
 * fixos e "overflow-y: auto", o conteúdo interno é que rola — o painel em
 * si nunca ultrapassa os limites da tela.
 */
.agp-panel {
	position: fixed;
	top: 16px;
	bottom: calc( 84px + var( --agp-lgpd-height, 0px ) );
	right: 20px;
	width: 320px;
	max-width: calc( 100vw - 40px );
	overflow-y: auto;
	background: var( --agp-panel-bg );
	backdrop-filter: blur( var( --agp-blur ) ) saturate( 160% );
	-webkit-backdrop-filter: blur( var( --agp-blur ) ) saturate( 160% );
	border: 1px solid var( --agp-panel-border );
	border-radius: var( --agp-radius );
	color: var( --agp-panel-text );
	box-shadow: 0 16px 48px rgba( 0, 0, 0, 0.28 );
	padding: 18px;
	animation: agp-panel-in 0.25s cubic-bezier( 0.4, 0, 0.2, 1 );
}

#agp-widget[data-position="bottom-left"] .agp-panel,
#agp-widget[data-position="center-left"] .agp-panel {
	right: auto;
	left: 20px;
}

.agp-panel[hidden] {
	display: none;
}

@keyframes agp-panel-in {
	from {
		opacity: 0;
		transform: translateY( 10px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.agp-panel {
		animation: none;
	}
	.agp-fab,
	.agp-control,
	.agp-fab-badge {
		transition: none;
	}
}

.agp-panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var( --agp-panel-border );
}

.agp-panel-header h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.agp-panel-subtitle {
	margin: 2px 0 0;
	font-size: 12px;
	color: var( --agp-panel-muted );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.agp-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: none;
	border-radius: 10px;
	background: var( --agp-chip-bg );
	color: var( --agp-panel-text );
	cursor: pointer;
	transition: var( --agp-transition );
}

.agp-icon-btn svg {
	width: 16px !important;
	height: 16px !important;
	max-width: none !important;
	flex-shrink: 0;
}

.agp-icon-btn:hover,
.agp-icon-btn:active {
	background: var( --agp-hover ) !important;
	color: #fff !important;
}

.agp-icon-btn:focus-visible,
.agp-control:focus-visible,
.agp-reset-btn:focus-visible {
	outline: 3px solid var( --agp-primary );
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Grupo de tamanho de fonte                                           */
/* ------------------------------------------------------------------ */

.agp-group {
	margin-bottom: 14px;
}

.agp-group-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --agp-panel-muted );
	margin-bottom: 8px;
}

.agp-btn-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: var( --agp-chip-bg );
	border-radius: 12px;
	padding: 6px;
}

.agp-font-value {
	font-weight: 700;
	font-size: 13px;
	min-width: 44px;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Botões de controle                                                   */
/* ------------------------------------------------------------------ */

.agp-control {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	background: var( --agp-chip-bg );
	color: var( --agp-panel-text );
	cursor: pointer;
	transition: var( --agp-transition );
	box-sizing: border-box !important;
	line-height: 1.2 !important;
}

.agp-btn-row .agp-control {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	padding: 0 !important;
	border-radius: 9px;
	flex-shrink: 0;
}

.agp-btn-row .agp-control svg {
	width: 15px !important;
	height: 15px !important;
	max-width: none !important;
	flex-shrink: 0;
}

.agp-control:hover,
.agp-control:active {
	background: var( --agp-hover ) !important;
	color: #fff !important;
	transform: translateY( -1px );
}

.agp-controls-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 6px;
}

.agp-control-grid {
	width: 100% !important;
	max-width: 100% !important;
	flex-direction: column;
	gap: 5px !important;
	padding: 9px 6px !important;
	border-radius: 11px;
	font-size: 11px !important;
	line-height: 1.25 !important;
	text-align: center;
}

.agp-control-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	flex-shrink: 0;
}

.agp-control-icon svg {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	display: block;
}

.agp-control-label {
	font-weight: 600;
	font-size: 11px !important;
	line-height: 1.2 !important;
	word-break: break-word;
}

.agp-control[aria-pressed="true"] {
	background: var( --agp-primary ) !important;
	color: #fff !important;
	border-color: var( --agp-primary ) !important;
}

@media ( min-width: 360px ) {
	.agp-controls-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* ------------------------------------------------------------------ */
/* Rodapé / Redefinir                                                  */
/* ------------------------------------------------------------------ */

.agp-panel-footer {
	/* "position: sticky" mantém o botão Redefinir sempre visível no rodapé do
	   painel, mesmo em telas baixas onde o conteúdo rolável (grid de recursos +
	   atalhos) seria maior que o espaço disponível — o usuário nunca precisa
	   "descobrir" que dá para rolar para encontrá-lo. */
	position: sticky;
	bottom: -18px;
	margin: 14px -18px -18px;
	padding: 12px 18px 18px;
	background: var( --agp-panel-bg );
	backdrop-filter: blur( var( --agp-blur ) );
	-webkit-backdrop-filter: blur( var( --agp-blur ) );
	border-top: 1px solid var( --agp-panel-border );
	border-radius: 0 0 var( --agp-radius ) var( --agp-radius );
}

.agp-reset-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px;
	border: none;
	border-radius: 12px;
	background: rgba( 220, 38, 38, 0.12 );
	color: #dc2626;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: var( --agp-transition );
}

.agp-reset-btn svg {
	width: 16px !important;
	height: 16px !important;
	max-width: none !important;
	flex-shrink: 0;
}

.agp-reset-btn:hover {
	background: #dc2626;
	color: #fff;
}

@media ( max-width: 480px ) {
	.agp-panel {
		width: calc( 100vw - 32px );
	}
}

/* ------------------------------------------------------------------ */
/* Atalhos de teclado (ajuda visível dentro do painel)                  */
/* ------------------------------------------------------------------ */

.agp-shortcuts {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var( --agp-panel-border );
}

.agp-shortcuts-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 4px;
	border: none;
	background: transparent;
	color: var( --agp-panel-text );
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: var( --agp-transition );
}

.agp-shortcuts-toggle .agp-control-icon,
.agp-shortcuts-toggle .agp-shortcuts-chevron {
	display: flex;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.agp-shortcuts-toggle .agp-shortcuts-chevron {
	margin-left: auto;
	transition: transform 0.2s ease;
}

.agp-shortcuts-toggle[aria-expanded="true"] .agp-shortcuts-chevron {
	transform: rotate( 180deg );
}

.agp-shortcuts-toggle:hover {
	color: var( --agp-primary );
}

.agp-shortcuts-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 10px 12px;
	background: var( --agp-chip-bg );
	border-radius: 10px;
	font-size: 12px;
	color: var( --agp-panel-muted );
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.agp-shortcuts-list[hidden] {
	display: none;
}

.agp-shortcuts-list kbd {
	display: inline-block;
	min-width: 20px;
	padding: 2px 6px;
	background: var( --agp-panel-bg );
	border: 1px solid var( --agp-panel-border );
	border-radius: 5px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	color: var( --agp-panel-text );
	text-align: center;
}

/* ==================================================================== */
/* Efeitos aplicados ao SITE (não ao chrome do widget)                   */
/* ==================================================================== */

/*
 * VLibras: o script oficial cria um <div id="vlibras-access-wrapper"> no
 * <body> com Shadow DOM (botão de mão + balão "Acessível com VLibras"). Por
 * ser Shadow DOM, só o elemento "host" é alcançável por CSS externo. O acesso
 * ao VLibras é feito pelo botão "Libras" do nosso painel (JS chama
 * window.VLibrasWidget.open(), que funciona com o host oculto).
 * (Também impresso inline no <head> por AGP_Frontend::print_critical_css().)
 */
#vlibras-access-wrapper {
	display: none !important;
}

/* Guia de leitura */
#agp-reading-guide {
	position: fixed;
	left: 0;
	width: 100%;
	height: 3px;
	background: #ffd60a;
	box-shadow: 0 0 8px rgba( 0, 0, 0, 0.5 );
	z-index: 1000000;
	pointer-events: none;
	display: none;
}

/* Espaçamento de texto (progressivo) */
body.agp-spacing-1 {
	letter-spacing: 0.05em !important;
	word-spacing: 0.12em !important;
	line-height: 1.7 !important;
}

body.agp-spacing-2 {
	letter-spacing: 0.12em !important;
	word-spacing: 0.22em !important;
	line-height: 2 !important;
}

/*
 * Fonte para dislexia: pilha de fontes sans-serif ultra-legíveis como
 * fallback seguro. Para usar a fonte OpenDyslexic real, adicione os
 * ficheiros em assets/fonts/ e descomente o bloco @font-face abaixo.
 */
/*
@font-face {
	font-family: 'OpenDyslexic';
	src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
	font-display: swap;
}
*/
body.agp-dyslexia-font,
body.agp-dyslexia-font * {
	font-family: 'OpenDyslexic', Verdana, Arial, 'Comic Sans MS', sans-serif !important;
	letter-spacing: 0.02em !important;
}

/* Alto contraste certificado (fundo escuro, texto claro, links em destaque) */
body.agp-contrast-high {
	background: #0b0c0f !important;
	color: #f5f5f5 !important;
}

body.agp-contrast-high a {
	color: #ffd60a !important;
}

body.agp-contrast-high * {
	background-color: #0b0c0f !important;
	color: #f5f5f5 !important;
	border-color: #f5f5f5 !important;
}

body.agp-contrast-high img,
body.agp-contrast-high svg,
body.agp-contrast-high video {
	filter: grayscale( 100% ) contrast( 1.2 );
}

body.agp-contrast-high #agp-widget .agp-fab {
	background: var( --agp-primary ) !important;
	color: #fff !important;
}

body.agp-contrast-high #agp-widget .agp-panel,
body.agp-contrast-high #agp-widget .agp-panel * {
	background-color: #0b0c0f !important;
	color: #f5f5f5 !important;
	border-color: #f5f5f5 !important;
}

body.agp-contrast-high #agp-widget .agp-control[aria-pressed="true"] {
	background-color: var( --agp-primary ) !important;
	color: #fff !important;
	border-color: var( --agp-primary ) !important;
}

/* Contraste invertido / modo escuro instantâneo */
body.agp-contrast-invert {
	filter: invert( 100% ) hue-rotate( 180deg );
}

body.agp-contrast-invert img,
body.agp-contrast-invert svg,
body.agp-contrast-invert video {
	filter: invert( 100% ) hue-rotate( 180deg );
}

/*
 * Aplicado em .agp-fab/.agp-panel (não em #agp-widget) de propósito: "filter"
 * também vira "containing block" de descendentes position:fixed, pelo mesmo
 * motivo do bug de posição documentado acima — colocar o filter direto no
 * #agp-widget prenderia o .agp-panel dentro da caixa de 56x56px do botão.
 */
body.agp-contrast-invert #agp-widget .agp-fab,
body.agp-contrast-invert #agp-widget .agp-panel {
	filter: invert( 100% ) hue-rotate( 180deg );
}

/* Fundo amarelo/preto — leitura de altíssimo contraste */
body.agp-contrast-yellow-black,
body.agp-contrast-yellow-black * {
	background-color: #000000 !important;
	color: #ffd60a !important;
	border-color: #ffd60a !important;
}

body.agp-contrast-yellow-black a {
	color: #fff200 !important;
	text-decoration: underline !important;
}

body.agp-contrast-yellow-black #agp-widget .agp-fab {
	background: var( --agp-primary ) !important;
	color: #fff !important;
}

body.agp-contrast-yellow-black #agp-widget .agp-panel,
body.agp-contrast-yellow-black #agp-widget .agp-panel * {
	background-color: #000000 !important;
	color: #ffd60a !important;
	border-color: #ffd60a !important;
}

/* Escala de cinza */
body.agp-grayscale {
	filter: grayscale( 100% );
}

/* Links sublinhados */
body.agp-underline-links a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* Modo leitor de voz: indica visualmente o que é "lível" ao passar o cursor (exceto dentro do próprio widget) */
body.agp-speech-mode :is( p, li, h1, h2, h3, h4, h5, h6, a, button, span, td, th, figcaption, blockquote, label ):not( #agp-widget ):not( #agp-widget * ):hover {
	outline: 2px dashed var( --agp-primary, #2563eb );
	outline-offset: 2px;
	cursor: pointer;
}