/**
 * Layout responsivo — formulário, home, pagamento e confirmação.
 */

html {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

/* ---------- Formulário (solicitacao) ---------- */

body.sinpa-solicitacao #corpo {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 12px 28px;
}

body.sinpa-solicitacao #cabecalho {
	display: block;
	width: 100%;
}

body.sinpa-solicitacao #cabecalho > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 10px 12px;
}

body.sinpa-solicitacao #cabecalho .col-md-1,
body.sinpa-solicitacao #cabecalho [role="img"] {
	flex: 0 0 auto;
	width: auto;
	float: none;
	padding: 0;
}

body.sinpa-solicitacao #cabecalho #titulo-cabecalho {
	flex: 1 1 180px;
	float: none;
	width: auto;
	padding: 0;
}

body.sinpa-solicitacao #cabecalho img {
	height: 48px;
	width: auto;
}

body.sinpa-solicitacao center {
	display: block;
	max-width: 100%;
	overflow-x: hidden;
}

body.sinpa-solicitacao .tab-content {
	width: 100% !important;
	max-width: 100%;
}

body.sinpa-solicitacao #content {
	max-width: 100%;
	overflow-x: hidden;
}

body.sinpa-solicitacao .tipo-solicitacao-badge {
	font-size: 13px;
	line-height: 1.45;
	word-break: break-word;
}

@media (max-width: 767px) {
	body.sinpa-solicitacao #cabecalho > div {
		justify-content: center;
		text-align: center;
	}

	body.sinpa-solicitacao #cabecalho #titulo-cabecalho {
		flex: 1 1 100%;
	}

	body.sinpa-solicitacao #myTab.nav-tabs.nav-justified {
		display: flex;
		flex-wrap: wrap;
		table-layout: auto;
	}

	body.sinpa-solicitacao #myTab.nav-justified > li {
		display: block;
		float: none;
		width: 50%;
	}

	body.sinpa-solicitacao #myTab.nav-tabs > li > a.tab-title {
		font-size: 11px;
		line-height: 1.25;
		padding: 10px 6px !important;
		min-height: 44px;
		white-space: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 400px) {
	body.sinpa-solicitacao #myTab.nav-justified > li {
		width: 100%;
	}

	body.sinpa-solicitacao #myTab.nav-tabs > li > a.tab-title {
		font-size: 12px;
	}
}

@media (max-width: 991px) {
	body.sinpa-solicitacao #formNovoPassaporte .row {
		margin-left: 0;
		margin-right: 0;
	}

	body.sinpa-solicitacao #formNovoPassaporte .row > [class*="col-"] {
		width: 100%;
		float: none;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 10px;
	}

	body.sinpa-solicitacao #formNovoPassaporte label {
		display: block;
		margin-bottom: 4px;
	}

	body.sinpa-solicitacao #ufNascimento,
	body.sinpa-solicitacao #ufResidencia,
	body.sinpa-solicitacao #selIdentidadeUFExpedicao,
	body.sinpa-solicitacao #certidaoUfExpedicao {
		width: 100% !important;
		max-width: 140px;
	}

	body.sinpa-solicitacao .comandos {
		text-align: center !important;
	}

	body.sinpa-solicitacao .comandos .btn-group {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 100%;
	}

	body.sinpa-solicitacao .comandos .btn-command {
		width: 100%;
		margin: 0 !important;
		min-height: 44px;
		font-size: 14px;
	}

	body.sinpa-solicitacao .comandos .btn-command[id^="anterior"] {
		background-color: #fff !important;
		color: #666 !important;
		border: 1px solid #ccc !important;
		font-weight: normal;
		box-shadow: none;
		order: 1;
	}

	body.sinpa-solicitacao .comandos .btn-command[id^="proximo"],
	body.sinpa-solicitacao .comandos #btnEnviar {
		background-color: #296da8 !important;
		border-color: #245a8c !important;
		color: #fff !important;
		font-weight: 700;
		order: 2;
		box-shadow: 0 1px 3px rgba(41, 109, 168, 0.35);
	}

	body.sinpa-solicitacao #tabelaNomesAnteriores,
	body.sinpa-solicitacao .table-responsive-wrap {
		width: 100% !important;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.sinpa-solicitacao .tituloPagina h1 {
		font-size: 18px !important;
		line-height: 1.35;
		padding-top: 6px;
	}

	body.sinpa-solicitacao .divobrigatorio {
		text-align: center;
		font-size: 12px;
	}

	body.sinpa-solicitacao input[type="text"],
	body.sinpa-solicitacao select,
	body.sinpa-solicitacao textarea {
		font-size: 16px;
		min-height: 44px;
	}

	body.sinpa-solicitacao #captcha {
		width: 100% !important;
		max-width: 300px;
	}

	body.sinpa-solicitacao .tab-pane .table,
	body.sinpa-solicitacao .tab-pane table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (min-width: 992px) {
	body.sinpa-solicitacao #cabecalho img {
		height: 55px;
	}

	body.sinpa-solicitacao .comandos .btn-group {
		flex-direction: row;
		justify-content: flex-end;
		flex-wrap: wrap;
		width: auto;
	}

	body.sinpa-solicitacao .comandos .btn-command {
		width: auto;
	}

	body.sinpa-solicitacao .comandos .btn-command[id^="anterior"] {
		margin-right: 8px !important;
	}

	body.sinpa-solicitacao .comandos .btn-command[id^="proximo"],
	body.sinpa-solicitacao .comandos #btnEnviar {
		min-width: 120px;
	}
}

/* Botões de navegação — desktop e mobile */
body.sinpa-solicitacao .comandos .btn-command[id^="anterior"] {
	background-color: #fff !important;
	color: #666 !important;
	border: 1px solid #ccc !important;
	font-weight: normal;
}

body.sinpa-solicitacao .comandos .btn-command[id^="proximo"],
body.sinpa-solicitacao .comandos #btnEnviar {
	background-color: #296da8 !important;
	border-color: #245a8c !important;
	color: #fff !important;
	font-weight: 700;
}

/* ---------- Home (servicos) ---------- */

.servicos-home #corpo {
	width: 100%;
	max-width: 720px;
	padding: 0;
}

@media (max-width: 575px) {
	.servicos-home #cabecalho .cabecalho-inner {
		padding: 10px 12px;
	}

	.servicos-home #cabecalho .cabecalho-brand {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.servicos-home #titulo-cabecalho #titulo {
		font-size: 16px;
	}

	.servicos-home #titulo-cabecalho small {
		display: block;
		line-height: 1.35;
		font-size: 10px;
	}

	.servicos-home .servicos-panel {
		padding: 16px 12px 28px;
	}

	.servicos-home .servicos-panel h1 {
		font-size: 20px;
	}

	.servicos-lista a {
		padding: 14px 12px;
		gap: 10px;
		min-height: 44px;
	}

	.servicos-texto strong {
		font-size: 14px;
	}
}

@media (min-width: 992px) {
	.servicos-home .servicos-panel h1 {
		font-size: 24px;
	}
}

/* ---------- Pagamento / sucesso ---------- */

body.pagamento-page,
body.sucesso-page {
	overflow-x: hidden;
}

body.pagamento-page #corpo,
body.sucesso-page #corpo {
	width: 100%;
	padding: 0;
}

@media (max-width: 575px) {
	body.pagamento-page .valor-destaque {
		font-size: 26px;
	}

	body.pagamento-page .pagamento-card-body,
	body.pagamento-page .aviso-protocolo,
	body.pagamento-page .pagamento-panel {
		padding-left: 12px;
		padding-right: 12px;
	}

	body.pagamento-page .btn-copiar-pix {
		width: 100%;
		display: block;
	}

	body.pagamento-page .pix-status {
		padding-left: 14px;
	}

	body.pagamento-page .pix-status::before {
		display: none;
	}

	body.sucesso-page #corpo.container {
		margin-top: 16px !important;
		padding: 0 12px 24px;
	}

	body.sucesso-page .alert .btn {
		display: block;
		width: 100%;
		margin: 0 0 8px;
		min-height: 44px;
	}
}