/*
 * Continuidade visual da area do usuario.
 *
 * O shell do painel permanece visivel enquanto o conteudo principal e os
 * recursos especificos da rota sao atualizados.
 */

html,
body.page-template-page-dashboard {
	background: #050b20;
}

/* O overlay branco do tema era a origem direta do flash entre as paginas. */
body.page-template-page-dashboard .apus-page-loading {
	display: none !important;
}

body.page-template-page-dashboard #apus-header {
	view-transition-name: autorepasse-painel-cabecalho;
}

body.page-template-page-dashboard #apus-header-mobile {
	view-transition-name: autorepasse-painel-cabecalho-mobile;
}

body.page-template-page-dashboard .sidebar-left {
	view-transition-name: autorepasse-painel-menu;
}

body.page-template-page-dashboard #main {
	view-transition-name: autorepasse-painel-conteudo;
}

body.page-template-page-dashboard #apus-footer {
	view-transition-name: autorepasse-painel-rodape;
}

body.page-template-page-dashboard .menu_short_profile a:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -3px;
	box-shadow: 0 0 0 2px #315df6;
}

body.page-template-page-dashboard #main :where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid #315df6;
	outline-offset: 3px;
}

/* O titulo recebe foco apenas para anunciar a nova tela ao leitor de tela. */
body.page-template-page-dashboard #main :where(h1, h2)[tabindex='-1']:focus {
	outline: none;
}

body.page-template-page-dashboard #main {
	position: relative;
	transition: opacity 140ms ease;
}

body.page-template-page-dashboard #main.autorepasse-painel-carregando {
	opacity: 0.72;
	pointer-events: none;
}

body.page-template-page-dashboard #main.autorepasse-painel-carregando::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 32%;
	height: 3px;
	background: #315df6;
	box-shadow: 0 0 10px rgba(49, 93, 246, 0.6);
	content: '';
	animation: autorepasse-painel-progresso 900ms ease-in-out infinite alternate;
}

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(autorepasse-painel-cabecalho),
::view-transition-new(autorepasse-painel-cabecalho),
::view-transition-old(autorepasse-painel-cabecalho-mobile),
::view-transition-new(autorepasse-painel-cabecalho-mobile),
::view-transition-old(autorepasse-painel-menu),
::view-transition-new(autorepasse-painel-menu),
::view-transition-old(autorepasse-painel-rodape),
::view-transition-new(autorepasse-painel-rodape) {
	animation: none;
	mix-blend-mode: normal;
}

::view-transition-old(autorepasse-painel-conteudo) {
	animation: autorepasse-painel-sair 90ms ease-out both;
}

::view-transition-new(autorepasse-painel-conteudo) {
	animation: autorepasse-painel-entrar 180ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes autorepasse-painel-sair {
	to {
		opacity: 0;
	}
}

@keyframes autorepasse-painel-entrar {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes autorepasse-painel-progresso {
	from {
		transform: translateX(-45%);
	}

	to {
		transform: translateX(260%);
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation-duration: 1ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
	}

	body.page-template-page-dashboard #main {
		transition: none;
	}

	body.page-template-page-dashboard #main.autorepasse-painel-carregando::before {
		width: 100%;
		animation: none;
	}
}