/* Só posiciona o contêiner. Todo o visual do app fica isolado dentro do Shadow DOM (app.css). */
.agrl-host {
	display: block;
	box-sizing: border-box;
	background: #f3f6fa;
	color-scheme: light;
}

/* Tela cheia: cobre a janela inteira, por cima do tema */
.agrl-host.agrl-modo-sim {
	position: fixed !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99990;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
body.admin-bar .agrl-host.agrl-modo-sim { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .agrl-host.agrl-modo-sim { top: 46px; }
}
html.agrl-travado,
html.agrl-travado body { overflow: hidden !important; }

/* Largura total, dentro do fluxo da página */
.agrl-host.agrl-modo-largura {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Tela cheia do navegador (botão "Tela cheia") */
.agrl-host:fullscreen { overflow-y: auto; background: #f3f6fa; }
.agrl-host::backdrop { background: #f3f6fa; }

.agrl-aviso { padding: 16px; }