/* SUDI Web App
   Los insets se activan únicamente cuando SUDI se abre como aplicación instalada.
   Así la interfaz del navegador conserva sus proporciones habituales. */

html.sudi-webapp {
	--sudi-safe-area-top: env(safe-area-inset-top, 0px);
	--sudi-safe-area-right: env(safe-area-inset-right, 0px);
	--sudi-safe-area-bottom: env(safe-area-inset-bottom, 0px);
	--sudi-safe-area-left: env(safe-area-inset-left, 0px);
	--sudi-upbar-height: 75px;
}

html.sudi-webapp,
html.sudi-webapp body {
	height: 100%;
	min-height: 100vh;
	min-height: 100dvh;
}

html.sudi-webapp body {
	overscroll-behavior-y: none;
}

html.sudi-webapp #main_blur_container {
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
}

html.sudi-webapp #main_menu {
	top: 0;
	height: 100vh;
	height: 100dvh;
	padding: var(--sudi-safe-area-top) var(--sudi-safe-area-right) var(--sudi-safe-area-bottom) var(--sudi-safe-area-left);
	background-color: var(--bg-main-high);
	box-sizing: border-box;
}

html.sudi-webapp #main_menu #bar_menu,
html.sudi-webapp #main_nav {
	height: 100%;
	max-height: none;
}

html.sudi-webapp header {
	top: 0;
	height: calc(var(--sudi-upbar-height) + var(--sudi-safe-area-top));
	padding-top: var(--sudi-safe-area-top);
	box-sizing: border-box;
}

html.sudi-webapp #info_container:not(.hidden) {
	height: 100vh;
	height: 100dvh;
	padding-top: calc(var(--sudi-upbar-height) + var(--sudi-safe-area-top));
	padding-bottom: var(--sudi-safe-area-bottom);
	box-sizing: border-box;
}

html.sudi-webapp #info_container.hidden {
	height: 100vh;
	height: 100dvh;
	padding: var(--sudi-safe-area-top) var(--sudi-safe-area-right) var(--sudi-safe-area-bottom) var(--sudi-safe-area-left);
	box-sizing: border-box;
}

html.sudi-webapp #msg_sudi {
	bottom: calc(15px + var(--sudi-safe-area-bottom));
}

html.sudi-webapp #r_panel {
	top: calc(10px + var(--sudi-safe-area-top));
	height: calc(100vh - 20px - var(--sudi-safe-area-top) - var(--sudi-safe-area-bottom));
	height: calc(100dvh - 20px - var(--sudi-safe-area-top) - var(--sudi-safe-area-bottom));
}

html.sudi-webapp #r_panel.r_panel_show {
	margin-right: calc(10px + var(--sudi-safe-area-right)) !important;
}

@media (min-width: 1024px) and (max-width: 1600px) {
	html.sudi-webapp { --sudi-upbar-height: 64px; }
}

@media (min-width: 751px) and (max-width: 1023px) {
	html.sudi-webapp { --sudi-upbar-height: 60px; }
}

@media (max-width: 750px) {
	html.sudi-webapp #sub_controls {
	top: calc(75px + var(--sudi-safe-area-top));
		height: calc(100vh - 75px - var(--sudi-safe-area-top) - var(--sudi-safe-area-bottom));
		height: calc(100dvh - 75px - var(--sudi-safe-area-top) - var(--sudi-safe-area-bottom));
	}

	html.sudi-webapp #nav_list {
		bottom: calc(10px + var(--sudi-safe-area-bottom));
	}

	html.sudi-webapp #list_row_options.opened {
		bottom: var(--sudi-safe-area-bottom);
	}

	html.sudi-webapp .curtain {
		height: 100vh;
		height: 100dvh;
		min-height: 100vh;
		min-height: 100dvh;
		padding: calc(12px + var(--sudi-safe-area-top)) calc(12px + var(--sudi-safe-area-right)) calc(12px + var(--sudi-safe-area-bottom)) calc(12px + var(--sudi-safe-area-left));
		box-sizing: border-box;
	}

	html.sudi-webapp .close_curtain {
		top: calc(10px + var(--sudi-safe-area-top));
		right: calc(10px + var(--sudi-safe-area-right));
	}

	html.sudi-webapp .form_manage,
	html.sudi-webapp .curtain_content {
		max-height: calc(100vh - 24px - var(--sudi-safe-area-top) - var(--sudi-safe-area-bottom));
		max-height: calc(100dvh - 24px - var(--sudi-safe-area-top) - var(--sudi-safe-area-bottom));
		overflow-y: auto;
	}

	html.sudi-webapp #r_panel {
		top: 0;
		right: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		margin-right: 0;
		padding: calc(14px + var(--sudi-safe-area-top)) 12px calc(14px + var(--sudi-safe-area-bottom));
	}

	html.sudi-webapp #r_panel.r_panel_show {
		margin-right: 0 !important;
	}

	html.sudi-webapp #r_panel .form_title,
	html.sudi-webapp #r_panel #r_panel_content {
		width: 100%;
		max-width: 680px;
	}

	html.sudi-webapp #r_panel #r_panel_content,
	html.sudi-webapp #r_panel #r_panel_content .form_manage {
		max-height: calc(100vh - 110px - var(--sudi-safe-area-top) - var(--sudi-safe-area-bottom));
		max-height: calc(100dvh - 110px - var(--sudi-safe-area-top) - var(--sudi-safe-area-bottom));
	}
}