/* ============================================================================================================
   mobile.css - ajustes para TELAS PEQUENAS (celular).
   Carregado com media="screen and (max-width: 767px)" (ver cabecalho.tag) e todas as regras abaixo tambem ficam dentro
   de @media: em telas >= 768px este arquivo NAO tem nenhum efeito, entao o desktop nao muda.

   Parte 1 - estrutura global (barra superior e menu): vale para todas as paginas no celular.
   Parte 2 - conteudo: so dentro de .industria-tela (telas do modulo Industria), para nao mexer em telas antigas
             que nao foram pensadas para o celular.
   ============================================================================================================ */
@media (max-width: 767px) {

	/* ---------- PARTE 1: barra superior ---------- */
	/* a barra deixa de ser "fixed" (altura variavel por causa do titulo/botoes) e passa a "sticky": acompanha a rolagem
	   sem cobrir o conteudo */
	nav.navbar.fixed {
		z-index: 1030 !important;   /* abaixo das janelas de mensagem (modal 1050) - antes ficava por cima e cobria o titulo da mensagem */
		position: sticky;
		height: auto !important;
		min-height: 50px;
		border-bottom: 1px solid #d9d9d9;
		box-shadow: 0 1px 4px rgba(0,0,0,.08);
	}
	nav.navbar.fixed .navbar-header { height: 50px; }

	/* titulo em linha propria, botoes embaixo (quebram em varias linhas se precisar) */
	.navbar-header-title {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		margin: 0 !important;
		padding: 4px 10px 8px;
		text-align: left !important;
		font-size: 14px;
	}
	.navbar-header-title .buttons-heading { float: none !important; margin: 0 !important; }
	/* titulo e botao Sair na mesma linha; os demais botoes (Listagem, Salvar...) logo abaixo */
	.navbar-header-title .buttons-heading.pull-left { flex: 1 1 58%; min-width: 58%; }
	.navbar-header-title .buttons-heading.pull-right { margin-left: auto !important; }
	.navbar-header-title h5,
	.navbar-header-title h5 * {
		color: #1f5e3d !important;
		font-size: 16px;
		font-weight: 700;
	}
	.navbar-header-title h5 { margin: 4px 0 !important; }
	.navbar-header-title .btn {
		margin: 0 !important;
		padding: 8px 12px;
		font-size: 14px;
		white-space: nowrap;
	}

	/* o conteudo comeca logo abaixo da barra (que agora esta no fluxo) */
	.cabec-top { margin-top: 0 !important; }

	/* ---------- PARTE 1: janelas de mensagem (confirmacao/erro/aviso do framework) ---------- */
	.modal.modal-top {
		margin-top: 0 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	.modal.modal-top .modal-dialog { margin: 12px 10px !important; width: auto !important; }
	.modal.modal-top .modal-content { width: auto !important; }
	.modal.modal-top .modal-body { padding: 12px; }
	.modal.modal-top .modal-footer .btn, .modal.modal-top .btn { min-height: 44px; }

	/* ---------- PARTE 1: menu lateral ---------- */
	/* sem o "trilho" de icones: o menu abre sobre a tela, com largura total e os textos */
	.menu-controle { display: none !important; }
	nav.navbar.navbar-default.navbar-static-top:not(.fixed) { position: static !important; min-height: 0 !important; height: 0; margin: 0 !important; }
	.navbar-default.sidebar { width: 100% !important; margin: 0 !important; position: static; }
	.sidebar-nav.navbar-collapse.collapse.in,
	.sidebar-nav.navbar-collapse.collapsing {
		width: auto !important;
	}
	.sidebar-nav.navbar-collapse.collapse.in {
		position: fixed;
		top: 50px;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		z-index: 1035;
		background: #efefef;
		-webkit-overflow-scrolling: touch;
	}
	.sidebar-nav > ul > li > a > font { display: inline !important; }
	.sidebar .info, #divPesquisaMenu { display: block !important; }
	.sidebar ul li a { padding-top: 14px; padding-bottom: 14px; }
	.sidebar .nav-second-level li a { padding-top: 13px; padding-bottom: 13px; font-size: 15px; }
	.sidebar .sidebar-search .input-group { width: 100%; }
	#txtPesquisaMenu { height: 42px; font-size: 16px; }

	/* o conteudo ocupa a tela toda (nada de margem do trilho do menu) */
	#page-wrapper, #page-heading { margin-left: 0 !important; border-left: 0 !important; }
	#page-wrapper { padding: 10px 0 !important; }
	#page-wrapper .container-fluid { padding-left: 10px; padding-right: 10px; }
	#page-heading { height: auto !important; }
	#page-heading .search-heading { margin-top: 8px; margin-bottom: 8px; }

	/* ---------- PARTE 2: telas do modulo Industria ---------- */
	/* campos empilhados, um por linha, em largura total */
	.industria-tela .form-group[class*="campoTamanho"] {
		width: 100% !important;
		float: none !important;
		clear: both;
		margin: 0 0 10px 0 !important;
	}
	.industria-tela .form-group > br { display: none; }
	.industria-tela .form-control { height: 46px; font-size: 16px; }   /* 16px evita o zoom automatico do iOS */
	.industria-tela textarea.form-control { height: auto; }
	.industria-tela .input-group-lg > .form-control,
	.industria-tela .input-group-lg > .input-group-btn > .btn { height: 52px; }
	.industria-tela .btn { min-height: 46px; padding: 10px 14px; }
	.industria-tela .btn-xs { min-height: 36px; min-width: 36px; }
	.industria-tela .btn-lg { width: 100%; margin-bottom: 8px; }
	.industria-tela .input-group-btn .btn-lg { width: auto; margin-bottom: 0; }
	.industria-tela h4 { font-size: 18px; margin: 18px 0 12px; }
	.industria-tela .alert h4 { font-size: 17px; }

	/* blocos alinhados a direita no desktop (codigo de barras, status, impressao de etiquetas) passam para o fluxo normal */
	.industria-tela .pull-right { float: none !important; text-align: left !important; min-width: 0 !important; width: 100% !important; }
	.industria-tela .pull-right .input-group { width: 100% !important; float: none !important; }
	.industria-tela .pull-right input[readonly] { text-align: left !important; }

	/* tabelas rolam na horizontal dentro do proprio quadro */
	.industria-tela .table-responsive { border: 0; }
	.industria-tela table.table { font-size: 14px; }
	/* saidas de carrinho: a coluna Equipe nao cabe no celular */
	.industria-tela #tabelaCarrinhos th:nth-child(4),
	.industria-tela #tabelaCarrinhos td:nth-child(4) { display: none; }
}