/* =============================================================================
   Acessibilidade — layouts de página do visual novo
   (_LayoutInternaNovo, _LayoutHomeNovo, _LayoutFluxoNovo). O layout antigo
   não carrega este arquivo, por decisão: nada muda nas páginas não migradas.

   Notas da migração (o que mudou, o que saiu e por quê): doc/restyle-visual-novo.md

   Porta de frontend/src/app.css (bloco "Acessibilidade").
   CSS puro, fora do Tailwind: as regras dependem de atributos no <html> e de
   seletores que o Tailwind não gera (:root[data-a11y-...]), e ficam juntas e
   legíveis num arquivo só.

   As preferências chegam como atributos no <html>, postos antes da pintura pelo
   script de Views/Shared/_AcessibilidadeCabeca.cshtml e mudados pelo painel
   (Views/Shared/_AcessibilidadeNovo.cshtml).
   ========================================================================== */

/* WCAG 1.4.4 — texto redimensionável até 200%. O layout usa medidas em px, então
   escalar só a raiz em rem não teria efeito: a ampliação usa `zoom`, que reflui a
   página inteira como o zoom do navegador. */
html[data-a11y-zoom] {
	zoom: var(--a11y-zoom, 1);
}

/* WCAG 1.4.6 — alto contraste com paleta real (nada de `filter: invert`, que
   inverteria fotos e logotipos e não garante razão de contraste alguma).
   Os tokens do visual novo são escopados em .jc-home/.jc-pagina/.jc-popup
   (home.input.css), então a troca também é: 0,2,1 contra os 0,1,0 de lá. As
   cores de marca vivem no :root (@theme do Tailwind). Os componentes legados
   que ainda aparecem dentro das páginas novas não usam tokens e ficam como estão. */
:root[data-a11y-contraste='alto'] {
	--color-brand-blue: #00308f;
	--color-brand-title: #000000;
	--color-brand-royal: #00308f;
	--color-brand-red: #a50000;
	--color-brand-green: #005c24;
}

:root[data-a11y-contraste='alto'] :is(.jc-home, .jc-pagina, .jc-popup) {
	--background: #ffffff;
	--foreground: #000000;
	--card: #ffffff;
	--card-foreground: #000000;
	--popover: #ffffff;
	--popover-foreground: #000000;
	--primary: #00308f;
	--primary-foreground: #ffffff;
	--secondary: #ffffff;
	--secondary-foreground: #000000;
	--muted: #f2f2f2;
	--muted-foreground: #1a1a1a;
	--accent: #f2f2f2;
	--accent-foreground: #000000;
	--destructive: #a50000;
	--border: #000000;
	--input: #000000;
	--ring: #00308f;
	--table-layer: #ffffff;
	--table-accent: #e6e6e6;
	--table-hover: #ededed;
	--table-border: #000000;
}

/* Bordas e limites de controles precisam ficar perceptíveis (WCAG 1.4.11). */
:root[data-a11y-contraste='alto'] :is(.jc-home, .jc-pagina) :is(button, input, select, textarea, [role='button']) {
	border-color: currentColor;
}

/* Alto contraste automático para quem já pediu isso no sistema, enquanto não
   houver escolha explícita no painel. */
@media (prefers-contrast: more) {
	:root:not([data-a11y-contraste]) :is(.jc-home, .jc-pagina, .jc-popup) {
		--border: #000000;
		--muted-foreground: #1a1a1a;
	}
}

/* WCAG 1.4.12 — espaçamento de texto nos valores exatos do critério: entrelinha
   1,5×; parágrafos 2×; entre letras 0,12em; entre palavras 0,16em. */
:root[data-a11y-espacamento] body {
	line-height: 1.5 !important;
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

:root[data-a11y-espacamento] :is(p, li, dd, blockquote) {
	margin-bottom: 2em !important;
}

:root[data-a11y-espacamento] :is(h1, h2, h3, h4, h5, h6) {
	line-height: 1.5 !important;
}

/* Fonte de alta legibilidade. Não "fonte para dislexia": os estudos disponíveis
   (Rello & Baeza-Yates, 2013; Wery & Diliberto, 2017) não mostram ganho de leitura
   com fontes específicas — o que ajuda é corpo maior, traços distintos e mais
   espaçamento. A Atkinson Hyperlegible foi desenhada pelo Braille Institute
   justamente para diferenciar caracteres ambíguos. O visual novo lê a fonte de
   --font-sans. */
:root[data-a11y-fonte='legivel'] {
	--font-sans: 'Atkinson Hyperlegible', Verdana, Tahoma, ui-sans-serif, system-ui, sans-serif;
}

/* WCAG 1.4.1 — o link não pode ser identificado apenas pela cor. */
:root[data-a11y-links] a:not(.sr-only):not(.jc-a11y-salto) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 2px;
}

:root[data-a11y-links] a:hover,
:root[data-a11y-links] a:focus-visible {
	background-color: rgba(255, 204, 41, 0.45);
}

/* WCAG 2.4.7 / 2.4.11 / 2.4.13 — foco visível, espesso e com contraste em
   qualquer fundo (anel duplo: amarelo por dentro, escuro por fora). */
:root[data-a11y-foco] :focus-visible {
	outline: 3px solid #ffcc29 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.75), 0 0 0 8px #ffcc29 !important;
	border-radius: 3px;
}

/* WCAG 2.3.3 — sem movimento desnecessário. Vale para o pedido explícito no
   painel; quem configurou isso no sistema já é atendido pelo
   prefers-reduced-motion das próprias animações. */
:root[data-a11y-movimento='reduzido'] *,
:root[data-a11y-movimento='reduzido'] *::before,
:root[data-a11y-movimento='reduzido'] *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* -----------------------------------------------------------------------------
   Aba que abre o painel: presa à borda direita, um pouco acima do meio — no meio
   fica o botão do VLibras, que o widget desenha sozinho (shadow DOM).
   -------------------------------------------------------------------------- */
.jc-a11y-aba {
	position: fixed;
	top: calc(50% - 5.5rem);
	right: 0;
	z-index: 40;
}

/* O botão do VLibras (o widget o põe em #vlibras-access-wrapper, com z-index
   acima de qualquer coisa da página) ficava por cima do painel aberto e cobria
   os interruptores. Enquanto um modal do visual novo estiver aberto (o modal.js
   marca o <html>), ele some; volta ao fechar. */
html[data-modal-aberto] #vlibras-access-wrapper {
	display: none !important;
}

/* Links de salto (Alt+1, Alt+2, Alt+4): fora da tela até receberem foco. */
.jc-a11y-salto {
	position: absolute;
	left: -9999px;
	top: 0.75rem;
	z-index: 70;
}

.jc-a11y-salto:focus {
	left: 0.75rem;
}

/* Ferramentas de leitura (guia, máscara e descrição de imagens). */
.jc-a11y-guia,
.jc-a11y-mascara,
.jc-a11y-descricoes {
	pointer-events: none;
}

.jc-a11y-guia {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 45;
	height: 3px;
	background: #1351b4;
	box-shadow: 0 0 0 1px #fff;
}

.jc-a11y-mascara {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 44;
	background: rgba(0, 0, 0, 0.72);
}

.jc-a11y-descricao {
	position: fixed;
	z-index: 46;
	max-width: 100%;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(22, 41, 79, 0.94);
	color: #fff;
	font: 12px/1.35 'Raleway', 'Rawline', sans-serif;
}

.jc-a11y-descricao[data-sem-alt] {
	background: rgba(165, 0, 0, 0.94);
}

@media print {
	.jc-a11y-aba,
	.jc-a11y-guia,
	.jc-a11y-mascara,
	.jc-a11y-descricoes {
		display: none !important;
	}

	html[data-a11y-zoom] {
		zoom: 1;
	}
}