@charset "utf-8";
/*
 * CSS Document
 */
 
.jm_overlay {
	position: fixed;
	left: 0;
	top: 0;
	display: none;
	background-color: rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	will-change: backdrop-filter;
	transition: backdrop-filter 150ms ease, background-color 150ms ease;
}

/* overflow: o jQuery põe overflow: hidden inline enquanto anima a altura
   (autosize()/resize em modal.js), e a faixa do título (.grid-modal-top,
   margin-top: -20px, fica acima da caixa) sumia pela metade até a
   animação acabar. O !important vence o inline. */
.jm_modal {
	background-color: #FFF;
	padding: 0 0 10px 0;
	display: none;
	overflow: visible !important;
	border-radius: var(--border-radius);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/* jBox 'auto' crescendo/encolhendo (modal.js::autosize()): corta embaixo e
 * dos lados, pros botões não aparecerem abaixo da caixa, sem cortar a faixa
 * do título dos modais pequenos (.grid-modal-top), que fica acima dela. */
.jm_modal.jm_resizing {
	clip-path: inset(-40px 0 0 0);
}

/* jBox 'auto': sem o padding de baixo do modal - o respiro embaixo é o dos
 * botões. O miolo ganha altura em px do autosize(), então sai o limite de
 * altura das telas (.modal-input.scroll, default.css). */
.jm_modal.jm_auto {
	padding-bottom: 0;
}

.jm_modal.jm_auto .default-content > .modal-input {
	max-height: none;
}

/* Formulário de criar/alterar (jForm()): título, campos e botões na largura
 * do modal menos 20px de cada lado, no lugar dos 800px de --form-width
 * (!important: .modal-input tem margin 0 auto !important, default.css). */
.jm_modal.jm_form .default-content > .grid-top,
.jm_modal.jm_form .default-content > .modal-input,
.jm_modal.jm_form .default-content > .div-button {
	width: auto;
	margin-left: 20px !important;
	margin-right: 20px !important;
}

.jm_content {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.jm_overlay_lock {
	position: absolute;
	background-color: transparent;
	left: 0;
	top: 0;
	display: none;
}

.jm_modal_focus {
	box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
}

.jm_title {
	font-family: Verdana, Arial;
	font-size: 11px;
	font-weight: bold;
	text-align: left;
	height: 30px;
	line-height: 30px;
	color: #FFF;
	cursor: default;
	padding: 0 0 0 6px;
	margin: 0;
	text-shadow: 1px 0 1px rgba(0, 0, 0, 0.45);
}

.jm_close {
	position: absolute;
	font-size: 22px !important;
	color: #FFFFFF;
	top: 10px;
	left: 100%;
	cursor: pointer;
	margin-left: -36px;
}

.jm_cancel {
	position: absolute;
	font-size: 18px;
	color: #FFFFFF;
	top: 2px;
	left: 100%;
	cursor: pointer;
	margin-left: -30px;
	margin-top: 1px;
	text-shadow: 1px 0 1px rgba(0, 0, 0, 0.45);
}

.jm_mini {
	position: absolute;
	font-size: 18px;
	color: #FFFFFF;
	top: 2px;
	left: 100%;
	cursor: pointer;
	margin-left: -72px;
	margin-top: 1px;
	text-shadow: 1px 0 1px rgba(0, 0, 0, 0.45);
}

.jm_max {
	position: absolute;
	font-size: 16px;
	color: #FFFFFF;
	top: 2px;
	left: 100%;
	cursor: pointer;
	margin-left: -48px;
	margin-top: 1px;
	text-shadow: 1px 0 1px rgba(0, 0, 0, 0.45);
}

.jm_restore {
	position: absolute;
	font-size: 18px;
	color: #FFFFFF;
	top: 0px;
	left: 100%;
	cursor: pointer;
	margin-left: -54px;
	margin-top: 3px;
	display: none;
	text-shadow: 1px 0 1px rgba(0, 0, 0, 0.45);
}

.jm_restore:hover,
.jm_close:hover,
.jm_mini:hover,
.jm_max:hover {
	cursor: pointer;
	opacity: 0.80;
	-moz-opacity: 0.80;
	filter: alpha(opacity=80);
}

/*
 * *** RESPONSIVO ***
 *
 * $.jm.fit() (modal.js) encolhe o jBox pra caber na tela. O miolo dos
 * modais (.default-content) vira coluna flex: a área de conteúdo
 * (.modal-input.content/.scroll, que vem com altura fixa inline, ex.
 * height: 435px) ocupa o que sobrar e rola por dentro, e os botões ficam
 * sempre visíveis no rodapé.
 */
@media screen and (max-width: 1024px) {
	.jm_modal .jm_content > .default-content {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.jm_modal .default-content > .modal-input.content,
	.jm_modal .default-content > .modal-input.scroll {
		flex: 1 1 auto;
		min-height: 0;
		height: auto !important;
		max-height: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.jm_modal .default-content > .grid-modal-top,
	.jm_modal .default-content > .grid-top,
	.jm_modal .default-content > .div-button,
	.jm_modal .default-content > .div-button-search,
	.jm_modal .default-content > .div-button-export {
		flex: none;
	}

	/* Painel de busca (modal/search.php): os campos ocupam o que sobrar da
	   altura da tela e rolam por dentro; os botões ficam sempre visíveis.
	   O min-height de calc(100vh - 300px) dos .css das telas empurrava os
	   botões para fora da tela. */
	.jm_modal .default-content > .div-search-inputs.scroll {
		flex: 1 1 auto;
		min-height: 0 !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media screen and (max-width: 640px) {
	/* Formulário de criar/alterar (jContainer, 96% x 98% da tela - ver
	   $.jm.container_fit()): um campo por linha e margens menores. */
	.jm_modal .grid-two,
	.jm_modal .grid-three,
	.jm_modal .grid-four {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 16px;
	}

	/* Mesmo espaço entre campos dentro de um bloco (row-gap: 16px) e entre
	   blocos (8px + 8px de padding) - antes era 16px x 30px (15 + 15). */
	.jm_modal .grid-one,
	.jm_modal .grid-two,
	.jm_modal .grid-three,
	.jm_modal .grid-four {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.jm_modal .default-content > .grid-top,
	.jm_modal .default-content > .modal-input,
	.jm_modal .default-content > .div-button {
		margin-left: 12px !important;
		margin-right: 12px !important;
	}

	.jm_modal .default-content > .grid-top {
		margin-top: 12px;
	}

	/* Formulário (jForm()) com as mesmas margens de 12px. */
	.jm_modal.jm_form .default-content > .grid-top,
	.jm_modal.jm_form .default-content > .modal-input,
	.jm_modal.jm_form .default-content > .div-button {
		margin-left: 12px !important;
		margin-right: 12px !important;
	}

	/* Área dos campos sem o recuo de 15px à esquerda (.modal-input,
	   default.css): alinha os campos com o título e os botões. */
	.jm_modal .default-content > .modal-input.scroll {
		padding-left: 0 !important;
	}

	.jm_modal .grid-modal-top {
		margin-left: 12px;
		margin-right: 12px;
	}

	.jm_modal .modal-input.search {
		padding: 0 12px !important;
	}

	.jm_modal .modal-input.content,
	.jm_modal .modal-input.filter,
	.jm_modal .modal-input.export {
		margin-left: 12px !important;
		margin-right: 12px !important;
	}

	.jm_modal .div-button.modal {
		margin: 0 !important;
		padding: 14px 12px !important;
		gap: 10px;
	}

	/* Rodapé da busca: fechar à esquerda, Limpar e Buscar dividindo o resto */
	.jm_modal .div-button-search {
		margin: 0 12px;
		padding: 12px 0;
		gap: 8px;
	}

	.jm_modal .div-button-search .buttom.close {
		flex: none;
		width: 44px;
		padding: 0;
	}

	.jm_modal .div-button-search-right {
		flex: 1 1 auto;
		gap: 8px;
	}

	.jm_modal .div-button-search-right .buttom {
		flex: 1 1 0;
		margin-left: 0;
		padding: 0 12px;
	}

	.jm_modal .div-search-inputs-flex {
		margin-top: 18px;
		gap: 18px;
	}

	/* Datas uma embaixo da outra com o mesmo espaço dos outros campos */
	.jm_modal .div-search-inputs-flex > .grid-two {
		row-gap: 18px;
		padding: 0;
	}

	/* Exportar: opções lado a lado mais baixas e botão ocupando a largura */
	.jm_modal .modal-input.export {
		margin-top: 16px !important;
	}

	/* margin: 0 auto (default.css) encolhe a linha na coluna flex do modal */
	.jm_modal .div-button-export {
		width: 100%;
		margin: 0;
		padding: 16px 0;
	}

	.jm_modal .div-button-export .span-export-types,
	.jm_modal .div-button-export .span-export-download {
		margin: 0 12px;
		gap: 8px;
	}

	.jm_modal .div-button-export .buttom.close {
		flex: none;
		width: 44px;
		padding: 0;
	}

	.jm_modal .div-button-export #action-export {
		flex: 1 1 auto;
	}

	/* .span-export-download aparece com fadeIn (display inline, mas é item
	   flex do .div-button-export): ocupa a linha e o botão acompanha */
	.jm_modal .div-button-export .span-export-download {
		flex: 1 1 auto;
	}

	.jm_modal .div-button-export #action-export-download {
		width: 100%;
	}
}