@charset "UTF-8";

/*
 * Ajustes de responsividade para telefones.
 * Complementa o custom.css do template (JAR tjac), que já esconde o menu lateral
 * abaixo de 768px, mas não adapta cabeçalho, tabelas, filtros e modais.
 */

/* ========== todas as larguras ========== */
/* as mensagens (h:messages) ficam fixas sobre o cabeçalho e, depois de esmaecerem
   (opacity 0), continuavam capturando os toques e bloqueavam o botão do menu */
.mensagens,
.loading {
	pointer-events: none;
}

/* célula de título criada por mobile.js apenas para o layout de cartão: oculta fora do celular */
:is(.conteudo, .doc-conteudo) table td.cartao-titulo-extra {
	display: none;
}

/* ========== tablets e telefones (até 768px) ========== */
@media (max-width: 768px) {

	/* ---------- estrutura ---------- */
	/* a barra lateral deixa de ocupar coluna: vira gaveta sobre o conteúdo */
	.wrapper,
	.wrapper.active {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto 1fr auto;
		grid-template-areas:
			"cabecalho"
			"subcabecalho"
			"conteudo"
			"rodape";
	}

	.wrapper .barra-lateral.active {
		position: fixed;
		top: 50px;
		left: 0;
		bottom: 0;
		width: 250px;
		max-width: 85vw;
		overflow-y: auto;
		z-index: 1040;
		box-shadow: 4px 0 12px rgba(0, 0, 0, 0.35);
	}

	/* cabeçalho sem a coluna do logotipo (que fica oculta no mobile) */
	.wrapper .cabecalho,
	.wrapper .cabecalho.active {
		grid-template-columns: minmax(0, 1fr);
	}

	.wrapper .cabecalho-menu {
		width: 100%;
		min-width: 0;
	}

	/* com o menu aberto o JAR esconde o ícone do usuário (.cabecalho-menu-lista.active), o que tira o item
	   da direita do flex e empurra o título para o lado; a gaveta abre abaixo do cabeçalho, então mantém visível */
	.wrapper .cabecalho-menu-lista.active {
		display: block;
	}

	/* cabeçalho fixo no topo: o botão do menu fica sempre à mão, sem precisar rolar de volta */
	.wrapper .cabecalho,
	.wrapper .cabecalho.active {
		position: sticky;
		top: 0;
		z-index: 1050;
		height: 50px;
		/* o JAR aplica overflow:hidden com o menu aberto (.cabecalho.active); como o cabeçalho fixo
		   é a referência do dropdown do usuário, isso cortava o menu "Perfil / Documentação / Sair" */
		overflow: visible;
	}

	/* subcabeçalho: título e seletor de serventia em linhas separadas */
	.wrapper .subcabecalho {
		flex-wrap: wrap;
		height: auto;
		min-height: 45px;
		font-size: 16px;
		padding: 6px 10px;
		gap: 6px;
	}

	.subcabecalho #subcabecalho-direita,
	.subcabecalho #subcabecalho-esquerda {
		flex: 1 1 100%;
		min-width: 0;
	}

	.subcabecalho #subcabecalho-esquerda .pull-right,
	.subcabecalho #subcabecalho-esquerda form {
		float: none !important;
		width: 100%;
	}

	.subcabecalho select {
		width: 100%;
		max-width: 100%;
		text-overflow: ellipsis;
	}

	.wrapper .conteudo {
		/* folga no fim da página: a paginação/último item rola para cima do botão "voltar ao topo" */
		padding: 10px 10px 5rem !important;
		margin-top: 8px;
		min-width: 0;
		overflow-x: hidden;
	}

	.rodape {
		text-align: center;
		font-size: 0.8rem;
		min-height: 40px;
	}

	/* ---------- tabelas ---------- */
	/* tabelas sem wrapper .table-responsive passam a rolar na horizontal */
	:is(.conteudo, .doc-conteudo) :not(.table-responsive) > table.table,
	:is(.conteudo, .doc-conteudo) :not(.table-responsive) > table.dataTable {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	:is(.conteudo, .doc-conteudo) .table th,
	:is(.conteudo, .doc-conteudo) .table td,
	.modal .table th,
	.modal .table td {
		padding: 0.4rem;
		font-size: 0.85rem;
		/* nunca quebra no meio de palavras/números: a tabela rola em vez de espremer */
		word-break: normal;
		overflow-wrap: normal;
		vertical-align: middle;
	}

	:is(.conteudo, .doc-conteudo) .table th,
	.modal .table th {
		white-space: nowrap;
	}

	/* tabelas com 4+ colunas mantêm largura mínima e rolam na horizontal */
	:is(.conteudo, .doc-conteudo) .table:not(.tabela-cartoes):has(> thead > tr > th:nth-child(4)),
	.modal .table:not(.tabela-cartoes):has(> thead > tr > th:nth-child(4)) {
		min-width: 640px;
	}

	:is(.conteudo, .doc-conteudo) .table:not(.tabela-cartoes):has(> thead > tr > th:nth-child(7)),
	.modal .table:not(.tabela-cartoes):has(> thead > tr > th:nth-child(7)) {
		min-width: 900px;
	}

	/* botões de ação nas tabelas: compactos, lado a lado, sem esticar nem empilhar */
	:is(.conteudo, .doc-conteudo) .table tbody td .btn,
	.modal .table tbody td .btn {
		width: auto;
		min-height: 0;
		white-space: nowrap;
	}

	:is(.conteudo, .doc-conteudo) .table td .form-inline,
	.modal .table td .form-inline {
		display: inline-flex;
		flex-flow: row nowrap;
		float: none !important;
	}

	/* células que contêm botões não quebram linha */
	:is(.conteudo, .doc-conteudo) .table td:has(> .btn),
	:is(.conteudo, .doc-conteudo) .table td:has(> .form-inline),
	:is(.conteudo, .doc-conteudo) .table td:has(> .btn-group) {
		white-space: nowrap;
	}

	/* o wrapper deve rolar, mesmo quando o componente do JAR define overflow */
	:is(.conteudo, .doc-conteudo) .table-responsive,
	.modal .table-responsive {
		-webkit-overflow-scrolling: touch;
	}

	/* ---------- tabelas como cartões ---------- */
	/* .tabela-cartoes, data-label e .cartao-largo/.cartao-vazio são definidos por mobile.js */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes {
		display: block;
		min-width: 0;
		overflow: visible;
		border: 0;
		background: transparent;
	}

	/* a linha de nomes das colunas continua no DOM (leitores de tela), mas some visualmente */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > thead > tr.cartao-cabecalho {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > thead,
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > thead > tr.cartao-legenda {
		display: block;
		width: 100%;
	}

	/* legenda da tabela (ex.: nome do serviço) como cabeçalho do grupo de cartões */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > thead > tr.cartao-legenda > th {
		display: block;
		padding: 0.5rem 0.25rem;
		text-align: left !important;
		white-space: normal !important;
		font-size: 0.95rem;
		border: 0;
		background: transparent;
		color: #1a2226;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody,
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tfoot {
		display: block;
		width: 100%;
	}

	/* cartão: grade de duas colunas */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		margin: 0 0 0.6rem;
		padding: 0;
		background: #fff !important;
		border: 1px solid #dee2e6;
		border-radius: 0.5rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}

	/* tabelas com a classe "sem-rodape-cartao" não mostram a linha de totais (tfoot) no modo cartão,
	   por exemplo quando a tela já tem um bloco de totalizadores próprio */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes.sem-rodape-cartao > tfoot {
		display: none;
	}

	/* linha de totais como cartão destacado */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tfoot > tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		margin: 0 0 0.6rem;
		background: #eef4f9;
		border: 1px solid #0c5483;
		border-left-width: 4px;
		border-radius: 0.5rem;
		overflow: hidden;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tfoot > tr > td.cartao-titulo {
		grid-column: 1 / -1;
		order: -1;
		padding-top: 0.6rem;
		padding-bottom: 0.1rem;
		font-size: 1.05rem;
		font-weight: 700;
		color: #0c5483;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tfoot > tr > td[data-label]:not([data-label=""])::before {
		content: attr(data-label);
		display: block;
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: #6c757d;
		margin-bottom: 0.1rem;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td,
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > th {
		display: block;
		width: auto !important;
		min-width: 0;
		padding: 0.4rem 0.7rem;
		border: 0;
		text-align: left !important;
		white-space: normal !important;
		font-size: 0.88rem;
		line-height: 1.3;
		overflow-wrap: break-word;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-largo,
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > th.cartao-largo,
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td[colspan] {
		grid-column: 1 / -1;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-vazio {
		display: none;
	}

	/* uniformiza fontes pequenas herdadas das telas (small, font-size inline) */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td small,
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td [style*="font-size"] {
		font-size: 0.85rem !important;
	}

	/* rótulo da coluna acima do valor */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td[data-label]:not([data-label=""])::before,
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > th[data-label]:not([data-label=""])::before {
		content: attr(data-label);
		display: block;
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: #6c757d;
		margin-bottom: 0.1rem;
	}

	/* primeira célula funciona como título do cartão, integrada a ele (sem faixa separada) */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-titulo,
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > th.cartao-titulo {
		grid-column: 1 / -1;
		order: -1; /* o título vai para o topo mesmo quando não é a 1ª coluna */
		padding-top: 0.6rem;
		padding-bottom: 0.1rem;
		font-size: 1.05rem;
		font-weight: 700;
		color: #0c5483;
	}

	/* título no formato "Rótulo: valor" (ex.: Identificador: 27526387) */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-titulo[data-label]:not([data-label=""])::before,
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > th.cartao-titulo[data-label]:not([data-label=""])::before {
		content: attr(data-label) ": ";
		display: inline;
		margin: 0;
		font-size: inherit;
		font-weight: 600;
		letter-spacing: normal;
		text-transform: none;
		color: #1a2226;
	}

	/* contorno azul em volta do cartão, com a lateral esquerda mais grossa */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr {
		border: 1px solid #0c5483;
		border-left-width: 4px;
	}

	/* o .badge do Bootstrap não quebra linha (nowrap): textos longos dentro dele estouravam o cartão */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td .badge {
		white-space: normal;
		text-align: left;
		max-width: 100%;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td .d-flex {
		flex-wrap: wrap;
		gap: 0 0.5rem;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td [class*="col-"] {
		flex: 0 1 auto;
		max-width: 100%;
		width: auto;
		padding-left: 0;
		padding-right: 0.5rem;
	}

	/* .row dentro de uma célula (margens negativas do Bootstrap) fazia o texto sair do cartão:
	   zera as margens e deixa o conteúdo fluir como texto corrido */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td .row {
		display: block;
		margin-left: 0;
		margin-right: 0;
	}

	/* células com rótulo e só botões (ex.: "Ações", "Arquivo retorno"): viram o rodapé de ações
	   do cartão, igual ao das células sem rótulo; o rótulo é dispensado (os ícones bastam) */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-botoes:not(:first-child) {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		justify-content: flex-end;
		align-items: center;
		padding: 0.5rem 0.7rem;
		border-top: 1px solid #eef1f4;
		background: #fafbfc;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-botoes::before {
		display: none !important;
	}

	/* células sem rótulo (ex.: badge "Interino") ocupam linha própria, para os campos
	   com rótulo (Início / Término) ficarem lado a lado */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td[data-label=""]:not(:first-child):not(.cartao-acoes) {
		grid-column: 1 / -1;
		padding-top: 0.1rem;
		padding-bottom: 0.1rem;
	}

	/* célula original de competência, substituída pelo título "Competência: MM/AAAA.NN" (mobile.js) */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-oculto {
		display: none;
	}

	/* botão de expandir/recolher (ex.: seta de decêndio) fica no canto do cartão, ao lado do título */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr {
		position: relative;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-expansor {
		position: absolute;
		top: 0.2rem;
		right: 0.3rem;
		z-index: 1;
		padding: 0;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-expansor .btn {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 1.1rem;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr:has(> td.cartao-expansor) > td.cartao-titulo {
		padding-right: 3.2rem;
	}

	/* células de ação (sem rótulo): botões lado a lado no fim, separados por uma linha */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-acoes:not(:first-child) {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		justify-content: flex-end;
		padding: 0.5rem 0.7rem;
		border-top: 1px solid #eef1f4;
		background: #fafbfc;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td .btn {
		min-height: 36px;
		margin: 0 !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 0.9rem;
	}

	/* status (ex.: "Pedido Finalizado") com o mesmo porte visual dos botões da área de ações */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes > tbody > tr > td.cartao-acoes .badge {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
		padding: 0 0.8rem;
		font-size: 0.85rem;
		border-radius: 0.25rem;
	}

	/* ---------- modo compacto (.cartao-compacto): lista de linhas em vez de cartões ---------- */
	/* linha 1: título à esquerda e valor em destaque à direita; demais campos em linhas corridas e menores */
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes.cartao-compacto > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		margin: 0;
		padding: 0.45rem 0.25rem;
		background: transparent !important;
		border: 0;
		border-bottom: 1px solid #dfe3e8;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes.cartao-compacto > tbody > tr > td {
		flex: 0 0 auto;
		order: 2;
		padding: 0.05rem 0.6rem 0.05rem 0;
		font-size: 0.78rem;
		line-height: 1.35;
		color: #4d5964;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes.cartao-compacto > tbody > tr > td[data-label]:not([data-label=""])::before {
		content: attr(data-curto) " ";
		display: inline;
		margin: 0;
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
		color: #8a949e;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes.cartao-compacto > tbody > tr > td.cartao-titulo {
		order: 0;
		/* título + valor somam 100%: a 1ª linha fecha ali e os demais campos quebram para baixo */
		flex: 1 1 calc(100% - 6.5rem);
		min-width: 0;
		padding: 0 0.5rem 0 0;
		background: transparent;
		border: 0;
		font-size: 1rem;
		font-weight: 700;
		color: #0c5483;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes.cartao-compacto > tbody > tr > td.cartao-destaque {
		order: 1;
		flex: 0 0 6.5rem;
		text-align: right !important;
		padding: 0;
		font-size: 1rem;
		font-weight: 700;
		color: #1a2226;
	}

	:is(.conteudo, .doc-conteudo) table.tabela-cartoes.cartao-compacto > tbody > tr > td.cartao-titulo[data-label]:not([data-label=""])::before,
	:is(.conteudo, .doc-conteudo) table.tabela-cartoes.cartao-compacto > tbody > tr > td.cartao-destaque[data-label]:not([data-label=""])::before {
		display: none !important;
	}

	/* ---------- formulários e botões ---------- */
	/* 16px evita o zoom automático do iOS ao focar em um campo */
	:is(.conteudo, .doc-conteudo) .form-control,
	:is(.conteudo, .doc-conteudo) select.form-control,
	.modal .form-control {
		font-size: 16px;
	}

	/* alvo de toque maior apenas nos botões fora de tabelas */
	:is(.conteudo, .doc-conteudo) :not(table) .btn:not(.btn-sm),
	.modal-footer .btn {
		min-height: 40px;
	}

	.card-body {
		padding: 0.75rem;
	}

	.btn-toolbar,
	.btn-group {
		flex-wrap: wrap;
	}

	.pagination {
		flex-wrap: wrap;
	}

	/* ---------- menu lateral (gaveta) ---------- */
	/* fundo escurecido atrás da gaveta; o toque nele fecha o menu (mobile.js) */
	.wrapper.active::before {
		content: "";
		position: fixed;
		top: 50px;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 1030;
	}

	/* o botão do menu (JAR) alterna "active" em TODOS os subitens, invertendo o destaque;
	   aqui o destaque volta a significar apenas "página atual" (.pagina-atual, via mobile.js) */
	#barra-lateral .item-submenu.active:not(.pagina-atual) {
		background: transparent !important;
		color: var(--cor-texto-item-menu, #ffffff) !important;
		font-weight: normal !important;
	}

	#barra-lateral .item-submenu.pagina-atual {
		background: #0c5483 !important;
		color: #fff !important;
		font-weight: bold !important;
	}

	/* menu aberto: a página de trás não rola; só a gaveta rola */
	html:has(.wrapper.active),
	body:has(.wrapper.active) {
		overflow: hidden;
		height: 100%;
	}

	.wrapper.active::before {
		touch-action: none;
	}

	.wrapper .barra-lateral.active {
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* itens do menu com área de toque confortável */
	.menu a,
	.menu a:hover,
	.menu a:visited {
		padding: 13px 10px;
	}

	.item-submenu {
		padding-top: 9px !important;
		padding-bottom: 9px !important;
	}

	/* ---------- checkboxes (Oficializada, Ativa, Bloqueada...) ---------- */
	/* rótulo à esquerda e caixa à direita, em uma linha, em vez de uma coluna centralizada */
	:is(.conteudo, .doc-conteudo) .form-group.text-center:has(> input[type="checkbox"]) {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left !important;
		padding: 0.5rem 0.25rem;
		margin-bottom: 0;
		border-bottom: 1px solid #e5e5e5;
	}

	:is(.conteudo, .doc-conteudo) .form-group.text-center:has(> input[type="checkbox"]) br {
		display: none;
	}

	:is(.conteudo, .doc-conteudo) .form-group.text-center:has(> input[type="checkbox"]) label {
		margin: 0;
	}

	/* o wrapper col-md-N desses grupos não precisa da margem extra */
	:is(.conteudo, .doc-conteudo) [class*="col-md-"].mb-3:has(> .form-group > input[type="checkbox"]) {
		margin-bottom: 0 !important;
	}

	:is(.conteudo, .doc-conteudo) input[type="checkbox"]:not(.form-check-input),
	:is(.conteudo, .doc-conteudo) input[type="radio"]:not(.form-check-input) {
		width: 20px;
		height: 20px;
		margin: 0;
	}

	/* .form-check-input é posicionado de forma absoluta, com margem negativa à esquerda do rótulo:
	   mantém essa estrutura, só aumentando a caixa e o recuo reservado a ela */
	:is(.conteudo, .doc-conteudo) .form-check {
		padding-left: 1.9rem;
	}

	:is(.conteudo, .doc-conteudo) .form-check-input {
		width: 20px;
		height: 20px;
		margin-left: -1.9rem;
		margin-top: 0.1rem;
	}

	/* checkboxes soltos em colunas (ex.: Usa Selo, Usa Faixa, Ativo): lista compacta,
	   sem o espaçamento vertical pensado para alinhar com campos no desktop */
	/* inclui colunas só com "col" (sem número) e o span de h:panelGroup que as envolve */
	:is(.conteudo, .doc-conteudo) .row > span:has(> .col > .form-group > input[type="checkbox"]) {
		flex: 0 0 100%;
		max-width: 100%;
		display: block;
	}

	:is(.conteudo, .doc-conteudo) :is(.col, [class*="col-"]):has(> .form-group > input[type="checkbox"]) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		flex: 0 0 100%;
		max-width: 100%;
	}

	:is(.conteudo, .doc-conteudo) .form-group:not(.text-center):has(> input[type="checkbox"]) {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		margin: 0;
		padding: 0.6rem 0.25rem;
		border-bottom: 1px solid #e5e5e5;
	}

	:is(.conteudo, .doc-conteudo) .form-group:not(.text-center):has(> input[type="checkbox"]) label {
		margin: 0 !important;
		flex: 1 1 auto;
	}

	/* ---------- listas com texto e botões (list-group-item > row > col + col com botões) ---------- */
	/* o Bootstrap reserva só col-2 para os botões, que então empilham: aqui o texto ocupa
	   o espaço que sobra e os botões ficam lado a lado, na própria largura */
	.list-group-item > .row:has(> [class*="col-"]:last-child > .btn) {
		flex-wrap: nowrap;
		align-items: center;
	}

	.list-group-item > .row:has(> [class*="col-"]:last-child > .btn) > [class*="col-"]:first-child {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}

	.list-group-item > .row:has(> [class*="col-"]:last-child > .btn) > [class*="col-"]:last-child {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		display: flex;
		gap: 0.4rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	.list-group-item > .row:has(> [class*="col-"]:last-child > .btn) > [class*="col-"]:last-child > .btn {
		margin: 0 !important;
		white-space: nowrap;
	}

	/* ---------- abas ---------- */
	.nav-tabs,
	.nav-pills {
		/* com justify-content-center o excesso estoura para os dois lados e a esquerda
		   fica inalcançável; alinhar ao início mantém todas as abas acessíveis */
		justify-content: flex-start !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.nav-tabs .nav-link,
	.nav-pills .nav-link {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 0.6rem 0.9rem;
	}

	/* ---------- paginação / busca das tabelas (jquery.dataTables) ---------- */
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter,
	.dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_paginate {
		float: none !important;
		text-align: left !important;
		margin-bottom: 0.5rem;
	}

	.dataTables_wrapper .dataTables_filter input {
		width: 100%;
		margin-left: 0;
	}

	/* ---------- títulos e rótulos que não cabem na linha ---------- */
	:is(.conteudo, .doc-conteudo) h1.text-nowrap, :is(.conteudo, .doc-conteudo) h2.text-nowrap, :is(.conteudo, .doc-conteudo) h3.text-nowrap,
	:is(.conteudo, .doc-conteudo) h4.text-nowrap, :is(.conteudo, .doc-conteudo) h5.text-nowrap, :is(.conteudo, .doc-conteudo) h6.text-nowrap,
	:is(.conteudo, .doc-conteudo) label.text-nowrap, :is(.conteudo, .doc-conteudo) .card-title.text-nowrap,
	:is(.conteudo, .doc-conteudo) .card-header.text-nowrap {
		white-space: normal !important;
	}

	/* cabeçalhos de card com título e botão: quebram em vez de estourar */
	.card-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
	}

	/* ---------- busca/exportação do cardLista (componente do JAR) ---------- */
	/* título e busca em linhas separadas; a busca ocupa a largura toda */
	.card-header > .row {
		width: 100%;
		margin: 0;
	}

	.card-header > .row > [class*="col-"],
	.card-header > .row > .col {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	.card-header > .row > .col {
		padding-top: 0.5rem !important;
		padding-bottom: 0 !important;
		padding-left: 0.5rem !important;
	}

	.card-header .input-group {
		flex-wrap: nowrap;
		width: 100%;
	}

	.card-header .input-group > .form-control {
		flex: 1 1 auto;
		min-width: 0;
		width: 1%;
		text-align: left !important;
	}

	.card-header .input-group-prepend .btn {
		display: flex;
		align-items: center;
		white-space: nowrap;
	}

	/* cabeçalho do relatório de ressarcimento: título/data, serventia/competência e botões em linhas empilhadas */
	.card-header.ressarc-cabecalho {
		display: block;
	}

	.ressarc-cabecalho .ressarc-info {
		width: 100% !important;
	}

	.ressarc-cabecalho .ressarc-comp {
		float: none !important;
		display: block;
		margin: 0.2rem 0 0 !important;
	}

	.ressarc-cabecalho .ressarc-acoes {
		width: 100%;
		margin-top: 0.5rem;
		text-align: right;
		white-space: normal !important;
	}

	/* ---------- menus suspensos, listas, árvores ---------- */
	.dropdown-menu {
		max-width: calc(100vw - 20px);
	}

	:is(.conteudo, .doc-conteudo) .list-group-item {
		overflow-wrap: break-word;
	}

	/* árvores (plano de contas / prestação de contas) rolam em vez de estourar */
	:is(.conteudo, .doc-conteudo) .tree,
	:is(.conteudo, .doc-conteudo) [class*="tree"] {
		max-width: 100%;
		overflow-x: auto;
	}

	/* gráficos do dashboard nunca passam da largura da tela */
	:is(.conteudo, .doc-conteudo) .canvasjs-chart-container,
	:is(.conteudo, .doc-conteudo) .canvasjs-chart-canvas {
		max-width: 100%;
	}

	/* ---------- gerais ---------- */
	html {
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
	}

	:is(.conteudo, .doc-conteudo) img {
		max-width: 100%;
		height: auto;
	}

	/* rodapés de modal: botões ocupam a linha e empilham */
	.modal-footer {
		flex-wrap: wrap;
	}

	.modal-footer > .btn {
		flex: 1 1 auto;
	}

	/* ---------- modais ---------- */
	.modal-dialog {
		margin: 0.5rem;
		max-width: calc(100vw - 1rem) !important;
	}

	.modal-body {
		overflow-x: auto;
	}

	/* modais com pares "Rótulo: valor" em colunas (.col, .col text-center, .col text-right):
	   um embaixo do outro e alinhados à esquerda */
	.modal-body .row > [class*="col"]:has(> label.badge),
	:is(.conteudo, .doc-conteudo) .row > [class*="col"]:has(> label.badge) {
		flex: 0 0 100%;
		max-width: 100%;
		text-align: left !important;
		margin-bottom: 0.35rem;
	}

	/* quebra textos longos (e-mails, protocolos) sem reduzir a largura mínima das colunas */
	:is(.conteudo, .doc-conteudo) .card-body,
	.modal-body {
		overflow-wrap: break-word;
	}
}

/* ========== telefones (até 576px) ========== */
@media (max-width: 576px) {

	/* colunas .col simples empilham em vez de espremerem os campos lado a lado */
	:is(.conteudo, .doc-conteudo) .form-row > .col,
	:is(.conteudo, .doc-conteudo) .row > .col {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* botões ocupam a linha toda nos rodapés de filtro/formulário */
	:is(.conteudo, .doc-conteudo) .text-right:not(td):not(th) > .btn,
	:is(.conteudo, .doc-conteudo) .text-right:not(td):not(th) > a.btn {
		width: 100%;
		margin-bottom: 0.25rem;
	}

	:is(.conteudo, .doc-conteudo) h1, :is(.conteudo, .doc-conteudo) .h1 { font-size: 1.5rem; }
	:is(.conteudo, .doc-conteudo) h2, :is(.conteudo, .doc-conteudo) .h2 { font-size: 1.3rem; }
	:is(.conteudo, .doc-conteudo) h3, :is(.conteudo, .doc-conteudo) .h3 { font-size: 1.15rem; }

	.mensagens {
		width: 94%;
	}
}