/**
 * Folha de Pagamento — Câmara Municipal de Soure
 *
 * Todo o CSS é escopado em .fpcms: nenhuma regra atinge body, :root, table,
 * th, td, label, select ou a fora desse escopo.
 *
 * Espaçamentos seguem uma escala fixa de 4px (--fpcms-sp-*). Nenhum valor
 * de margem ou padding é definido fora dela.
 *
 * Algumas propriedades de layout usam !important porque temas costumam impor
 * regras genéricas a label, select, input e button dentro do conteúdo do post,
 * com especificidade igual ou maior. Elas ficam restritas a display, largura,
 * float e altura — nada que afete o resto da página.
 */

.fpcms {
	/* Escala de espaçamento */
	--fpcms-sp-1: 3px;
	--fpcms-sp-2: 6px;
	--fpcms-sp-3: 9px;
	--fpcms-sp-4: 12px;
	--fpcms-sp-5: 18px;
	--fpcms-sp-6: 24px;

	/* Cores */
	--fpcms-card: #ffffff;
	--fpcms-ink: #16202b;
	--fpcms-muted: #66768a;
	--fpcms-line: #e2e7ee;
	--fpcms-line-soft: #f0f3f7;
	--fpcms-accent: #1f6feb;
	--fpcms-accent-soft: #e8f0fe;
	--fpcms-zebra: #fafbfd;

	/* Raios */
	--fpcms-radius: 10px;

	box-sizing: border-box;
	color: var(--fpcms-ink);
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 var(--fpcms-sp-5);
}

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

.fpcms .fpcms__sub {
	color: var(--fpcms-muted);
	font-size: 14px;
	margin: 0 0 var(--fpcms-sp-4);
}

/* ---------- Painel de filtros ---------- */

.fpcms .fpcms__panel {
	background: var(--fpcms-card);
	border: 1px solid var(--fpcms-line);
	border-radius: var(--fpcms-radius);
	margin: 0 0 var(--fpcms-sp-4);
	padding: var(--fpcms-sp-4);
}

.fpcms .fpcms__filters {
	align-items: end;
	display: grid !important;
	gap: var(--fpcms-sp-4);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: 0;
	padding: 0;
}

.fpcms .fpcms__field {
	margin: 0;
	min-width: 0;
	padding: 0;
}

.fpcms .fpcms__field label {
	clear: none !important;
	color: var(--fpcms-muted);
	display: block !important;
	float: none !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	margin: 0 0 var(--fpcms-sp-2) !important;
	padding: 0;
	text-transform: uppercase;
	width: auto !important;
}

.fpcms .fpcms__field select,
.fpcms .fpcms__field input[type="search"] {
	background-color: #ffffff;
	background-image: none;
	border: 1px solid var(--fpcms-line);
	border-radius: var(--fpcms-radius);
	box-shadow: none;
	color: var(--fpcms-ink);
	display: block !important;
	float: none !important;
	font-family: inherit;
	font-size: 14px;
	height: auto !important;
	line-height: 1.4;
	margin: 0 !important;
	max-width: 100% !important;
	min-height: 0;
	padding: var(--fpcms-sp-3);
	width: 100% !important;
}

.fpcms .fpcms__field select:focus,
.fpcms .fpcms__field input[type="search"]:focus {
	border-color: var(--fpcms-accent);
	box-shadow: 0 0 0 3px var(--fpcms-accent-soft);
	outline: none;
}

.fpcms .fpcms__actions {
	align-items: stretch;
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--fpcms-sp-2);
}

.fpcms .fpcms__export {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fpcms-sp-1);
}

.fpcms .fpcms__export-rotulo {
	color: var(--fpcms-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	margin-right: var(--fpcms-sp-1);
	text-transform: uppercase;
}

.fpcms .fpcms__btn--mini {
	font-size: 13px;
	padding: var(--fpcms-sp-2) var(--fpcms-sp-3);
}

.fpcms .fpcms__btn {
	background: #ffffff;
	border: 1px solid var(--fpcms-line);
	border-radius: var(--fpcms-radius);
	box-shadow: none;
	color: var(--fpcms-ink);
	cursor: pointer;
	display: inline-block;
	float: none !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	height: auto;
	letter-spacing: normal;
	line-height: 1.4;
	margin: 0;
	padding: var(--fpcms-sp-3) var(--fpcms-sp-4);
	text-shadow: none;
	text-transform: none;
	white-space: nowrap;
	width: auto;
}

.fpcms .fpcms__btn:hover,
.fpcms .fpcms__btn:focus {
	background: var(--fpcms-zebra);
	color: var(--fpcms-ink);
}

.fpcms .fpcms__btn--primary {
	background: var(--fpcms-accent);
	border-color: var(--fpcms-accent);
	color: #ffffff;
}

.fpcms .fpcms__btn--primary:hover,
.fpcms .fpcms__btn--primary:focus {
	background: #1a5fd0;
	border-color: #1a5fd0;
	color: #ffffff;
}

.fpcms .fpcms__count {
	color: var(--fpcms-muted);
	font-size: 14px;
	margin: 0 0 var(--fpcms-sp-3);
}

/* ---------- Tabela ---------- */

.fpcms .fpcms__tablewrap {
	background: var(--fpcms-card);
	border: 1px solid var(--fpcms-line);
	border-radius: var(--fpcms-radius);
	max-width: 100%;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

.fpcms .fpcms__table {
	background: transparent;
	border: 0 !important;
	border-collapse: collapse !important;
	border-spacing: 0;
	font-size: 14px;
	margin: 0 !important;
	max-width: 100%;
	/* Larguras vêm do colgroup. Com layout fixo o navegador não expande a
	   tabela para acomodar conteúdo longo, então ela sempre cabe no cartão. */
	table-layout: fixed;
	width: 100%;
}

.fpcms .fpcms__table thead th {
	background: var(--fpcms-zebra);
	border: 0 !important;
	border-bottom: 1px solid var(--fpcms-line) !important;
	color: var(--fpcms-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: var(--fpcms-sp-3) var(--fpcms-sp-2);
	text-align: center;
	text-transform: uppercase;
	-webkit-user-select: none;
	user-select: none;
	white-space: nowrap;
}

/* Só as colunas ordenáveis convidam ao clique. "Documento" indicava ação
   inexistente com cursor de ponteiro e realce ao passar o mouse. */
.fpcms .fpcms__table thead th[data-sort] {
	cursor: pointer;
}

.fpcms .fpcms__table thead th[data-sort]:hover {
	color: var(--fpcms-ink);
}

.fpcms .fpcms__table thead th.fpcms__th-estatico {
	cursor: default;
}

.fpcms .fpcms__table thead th span {
	font-size: 10px;
	margin-left: var(--fpcms-sp-1);
	opacity: 0.35;
}

.fpcms .fpcms__table thead th[aria-sort] span {
	opacity: 1;
}

.fpcms .fpcms__table tbody tr,
.fpcms .fpcms__table tbody tr:nth-child(odd),
.fpcms .fpcms__table tbody tr:nth-child(even) {
	background: transparent;
}

.fpcms .fpcms__table tbody td {
	background: transparent;
	border: 0 !important;
	border-bottom: 1px solid var(--fpcms-line-soft) !important;
	color: var(--fpcms-ink);
	overflow-wrap: break-word;
	padding: var(--fpcms-sp-3) var(--fpcms-sp-2);
	text-align: center;
	vertical-align: middle;
	word-break: normal;
}

.fpcms .fpcms__table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.fpcms .fpcms__table tbody tr:hover td {
	background: var(--fpcms-zebra);
}

.fpcms .fpcms__ord {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fpcms .fpcms__ord {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.fpcms .fpcms__na {
	color: #9aa8b8;
	font-style: italic;
	font-weight: 400;
}

.fpcms .fpcms__tag {
	border-radius: 999px;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	max-width: 100%;
	padding: var(--fpcms-sp-1) var(--fpcms-sp-3);
	white-space: normal;
}

.fpcms .fpcms__tag--mensal { background: var(--fpcms-accent-soft); color: #1a4fb4; }
.fpcms .fpcms__tag--decimo { background: #eaf7ee; color: #116b31; }
.fpcms .fpcms__tag--adiantamento { background: #fef4e6; color: #a15c07; }
.fpcms .fpcms__tag--complementar { background: #f3ecfd; color: #5b3bb5; }
.fpcms .fpcms__tag--outro { background: #f0f2f5; color: #5a6a7d; }

/* ---------- Botões de arquivo ---------- */

.fpcms .fpcms__cel-arq {
	white-space: nowrap;
}

.fpcms .fpcms__arq {
	border: 1px solid var(--fpcms-line);
	border-radius: 6px;
	box-shadow: none;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 2px;
	min-width: 52px;
	padding: 4px 10px;
	text-align: center;
	text-decoration: none;
}

.fpcms .fpcms__arq--pdf {
	background: #fdecec;
	border-color: #f5c9c6;
	color: #b42318;
}

.fpcms .fpcms__arq--doc {
	background: var(--fpcms-accent-soft);
	border-color: #c5d9f7;
	color: #1a4fb4;
}

.fpcms .fpcms__arq--xls {
	background: #eaf7ee;
	border-color: #bfe3c9;
	color: #116b31;
}

.fpcms .fpcms__arq:hover,
.fpcms .fpcms__arq:focus {
	filter: brightness(0.94);
	text-decoration: none;
}

/* Formato não publicado naquela competência: fica visível para deixar claro
   que a ausência é do documento, não da página. */
.fpcms .fpcms__arq--vazio {
	background: transparent;
	border-style: dashed;
	color: #b3bdca;
	font-weight: 400;
}

.fpcms .fpcms__obs {
	color: #b54708;
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin: var(--fpcms-sp-1) auto 0;
	max-width: 260px;
}

.fpcms .fpcms__link {
	box-shadow: none;
	color: var(--fpcms-accent);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.fpcms .fpcms__link:hover,
.fpcms .fpcms__link:focus {
	color: var(--fpcms-accent);
	text-decoration: underline;
}

.fpcms .fpcms__empty {
	color: var(--fpcms-muted);
	margin: 0;
	padding: var(--fpcms-sp-6) var(--fpcms-sp-4);
	text-align: center;
}

/* Aviso exibido só para administradores; fica fora do escopo .fpcms,
   por isso não usa as variáveis de espaçamento. */
.fpcms-erro {
	background: #fdecec;
	border-left: 4px solid #b42318;
	color: #b42318;
	padding: 12px 16px;
}

/* ---------- Barra de contagem, exportação e ação ---------- */

.fpcms .fpcms__bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fpcms-sp-3);
	justify-content: space-between;
	margin: 0 0 var(--fpcms-sp-3);
}

.fpcms .fpcms__bar .fpcms__count {
	margin: 0;
}

/* ---------- Avisos de operação ---------- */

.fpcms .fpcms__aviso {
	border-left: 4px solid var(--fpcms-line);
	border-radius: var(--fpcms-radius);
	font-size: 14px;
	margin: 0 0 var(--fpcms-sp-3);
	padding: var(--fpcms-sp-3) var(--fpcms-sp-4);
}

.fpcms .fpcms__aviso--ok {
	background: #eaf7ee;
	border-left-color: #116b31;
	color: #116b31;
}

.fpcms .fpcms__aviso--erro {
	background: #fdecec;
	border-left-color: #b42318;
	color: #b42318;
}

.fpcms .fpcms__aviso--info {
	background: var(--fpcms-accent-soft);
	border-left-color: var(--fpcms-accent);
	color: #1a4fb4;
}

/* ---------- Ações na linha ---------- */

/*
 * Padrão das listagens do painel do WordPress: em repouso a tabela é idêntica
 * à que o visitante vê; as ações surgem ao passar o mouse sobre a linha ou ao
 * chegar nela pelo teclado.
 *
 * O espaço vertical fica reservado o tempo todo, mesmo com as ações ocultas.
 * Sem isso, cada linha cresceria ao receber o cursor e a tabela saltaria sob
 * o ponteiro.
 */
.fpcms .fpcms__cel-comp {
	white-space: nowrap;
}

.fpcms .fpcms__comp-txt {
	display: block;
}

.fpcms .fpcms__rowactions {
	align-items: center;
	display: flex;
	gap: var(--fpcms-sp-4);
	height: 15px;
	justify-content: center;
	margin-top: 1px;
	opacity: 0;
	transition: opacity 0.12s ease;
}

.fpcms .fpcms__table tbody tr:hover .fpcms__rowactions,
.fpcms .fpcms__rowactions:focus-within {
	opacity: 1;
}

.fpcms .fpcms__acao {
	background: none;
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	color: var(--fpcms-muted);
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	margin: 0;
	padding: 0;
	text-transform: none;
	width: auto;
}

.fpcms .fpcms__acao:hover,
.fpcms .fpcms__acao:focus {
	background: none;
	color: var(--fpcms-accent);
	text-decoration: underline;
}

.fpcms .fpcms__acao--perigo:hover,
.fpcms .fpcms__acao--perigo:focus {
	color: #b42318;
}

/* Visível ao navegar pelo teclado, mesmo sem o mouse sobre a linha. */
.fpcms .fpcms__acao:focus-visible {
	outline: 2px solid var(--fpcms-accent);
	outline-offset: 2px;
}

/* ---------- Paginação ---------- */

.fpcms .fpcms__pager {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fpcms-sp-1);
	justify-content: center;
	margin: var(--fpcms-sp-4) 0 0;
}

.fpcms .fpcms__pg {
	background: #ffffff;
	border: 1px solid var(--fpcms-line);
	border-radius: 8px;
	box-shadow: none;
	color: var(--fpcms-ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	margin: 0;
	min-width: 38px;
	padding: var(--fpcms-sp-2) var(--fpcms-sp-3);
	text-align: center;
	text-transform: none;
	width: auto;
}

.fpcms .fpcms__pg:hover:not([disabled]),
.fpcms .fpcms__pg:focus:not([disabled]) {
	background: var(--fpcms-zebra);
	border-color: var(--fpcms-accent);
	color: var(--fpcms-ink);
}

.fpcms .fpcms__pg.is-atual {
	background: var(--fpcms-accent);
	border-color: var(--fpcms-accent);
	color: #ffffff;
	font-weight: 700;
}

.fpcms .fpcms__pg[disabled] {
	cursor: default;
	opacity: 0.4;
}

.fpcms .fpcms__pg-sep {
	color: var(--fpcms-muted);
	padding: 0 var(--fpcms-sp-1);
}

/* ---------- Formulário em janela ---------- */

/* O modal é filho de body, fora do escopo .fpcms, por isso os seletores
   abaixo partem da própria classe do modal. */
.fpcms__modal {
	align-items: flex-start;
	background: rgba(16, 32, 43, 0.55);
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	overflow-y: auto;
	padding: 24px 16px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 999999;
}

.fpcms__modal-caixa {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(16, 32, 43, 0.3);
	box-sizing: border-box;
	color: #16202b;
	font-size: 15px;
	max-width: 520px;
	padding: 24px;
	width: 100%;
}

.fpcms__modal-caixa *,
.fpcms__modal-caixa *::before,
.fpcms__modal-caixa *::after {
	box-sizing: border-box;
}

.fpcms__modal-titulo {
	color: #16202b;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 16px;
	padding: 0;
}

.fpcms__form {
	margin: 0;
	padding: 0;
}

.fpcms__form-row {
	margin: 0 0 16px;
}

.fpcms__form-row label {
	color: #66768a;
	display: block !important;
	float: none !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 6px !important;
	text-transform: uppercase;
	width: auto !important;
}

.fpcms__form-row input,
.fpcms__form-row select {
	background-color: #ffffff;
	border: 1px solid #e2e7ee;
	border-radius: 10px;
	box-shadow: none;
	color: #16202b;
	display: block !important;
	font-family: inherit;
	font-size: 14px;
	height: auto !important;
	line-height: 1.4;
	margin: 0 !important;
	max-width: 100% !important;
	padding: 10px 12px;
	width: 100% !important;
}

.fpcms__form-row input:focus,
.fpcms__form-row select:focus {
	border-color: #1f6feb;
	box-shadow: 0 0 0 3px #e8f0fe;
	outline: none;
}

.fpcms__dica {
	color: #66768a;
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin: 6px 0 0;
}

.fpcms__form-erro {
	background: #fdecec;
	border-left: 4px solid #b42318;
	border-radius: 8px;
	color: #b42318;
	font-size: 13px;
	margin: 0 0 16px;
	padding: 10px 12px;
}

.fpcms__form-acoes {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin: 20px 0 0;
}

.fpcms__form-acoes .fpcms__btn {
	background: #ffffff;
	border: 1px solid #e2e7ee;
	border-radius: 10px;
	color: #16202b;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 16px;
	text-transform: none;
	width: auto;
}

.fpcms__form-acoes .fpcms__btn--primary {
	background: #1f6feb;
	border-color: #1f6feb;
	color: #ffffff;
}

.fpcms__form-acoes .fpcms__btn[disabled] {
	cursor: default;
	opacity: 0.6;
}

/* Aviso exibido só para administradores; fica fora do escopo .fpcms,
   por isso não usa as variáveis de espaçamento. */
.fpcms-erro {
	background: #fdecec;
	border-left: 4px solid #b42318;
	color: #b42318;
	padding: 12px 16px;
}


/* ================================================================== *
 * Telas médias
 * ================================================================== */

@media (max-width: 900px) {
	.fpcms .fpcms__filters {
		gap: var(--fpcms-sp-3);
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.fpcms .fpcms__table thead th,
	.fpcms .fpcms__table tbody td {
		font-size: 13px;
		padding: var(--fpcms-sp-3) var(--fpcms-sp-1);
	}
}

/* ================================================================== *
 * Telas estreitas — a tabela vira uma lista de cartões
 *
 * Seis colunas em 360px dariam menos de 60px por coluna: as datas
 * quebrariam no meio e os rótulos ficariam ilegíveis. Em vez de
 * encolher, cada registro passa a ocupar um cartão próprio, com os
 * rótulos vindo do atributo data-rotulo de cada célula.
 * ================================================================== */

@media (max-width: 720px) {
	.fpcms {
		font-size: 15px;
		-webkit-text-size-adjust: 100%;
	}

	/* ---- Filtros ---- */

	.fpcms .fpcms__panel {
		padding: var(--fpcms-sp-4);
	}

	.fpcms .fpcms__filters {
		grid-template-columns: 1fr 1fr;
	}

	/* Busca e botões ocupam a linha inteira. */
	.fpcms .fpcms__filters .fpcms__field:nth-last-child(2),
	.fpcms .fpcms__actions {
		grid-column: 1 / -1;
	}

	/* 16px é o limite abaixo do qual o Safari no iOS amplia a página
	   sozinho ao focar um campo. Manter esse tamanho evita o salto. */
	.fpcms .fpcms__field select,
	.fpcms .fpcms__field input[type="search"] {
		font-size: 16px;
		min-height: 44px;
		padding: var(--fpcms-sp-3) var(--fpcms-sp-4);
	}

	.fpcms .fpcms__btn {
		flex: 1 1 auto;
		min-height: 44px;
		padding: var(--fpcms-sp-3) var(--fpcms-sp-4);
	}

	/* ---- Barra de contagem, exportação e ação ---- */

	.fpcms .fpcms__bar {
		align-items: stretch;
		flex-direction: column;
		gap: var(--fpcms-sp-3);
	}

	.fpcms .fpcms__export {
		justify-content: flex-start;
		gap: var(--fpcms-sp-2);
	}

	.fpcms .fpcms__export .fpcms__btn--mini {
		flex: 1 1 0;
		min-height: 40px;
		padding: var(--fpcms-sp-2);
	}

	.fpcms .fpcms__bar > .fpcms__btn--primary {
		min-height: 46px;
		width: 100%;
	}

	/* ---- Tabela em modo cartão ---- */

	.fpcms .fpcms__tablewrap {
		background: transparent;
		border: 0;
		border-radius: 0;
	}

	.fpcms .fpcms__table,
	.fpcms .fpcms__table tbody,
	.fpcms .fpcms__table tr,
	.fpcms .fpcms__table td {
		display: block;
		width: auto;
	}

	.fpcms .fpcms__table colgroup,
	.fpcms .fpcms__table thead {
		display: none;
	}

	.fpcms .fpcms__table tr {
		background: var(--fpcms-card);
		border: 1px solid var(--fpcms-line) !important;
		border-radius: var(--fpcms-radius);
		display: grid;
		gap: var(--fpcms-sp-2) var(--fpcms-sp-4);
		grid-template-columns: 1fr auto;
		margin: 0 0 var(--fpcms-sp-3);
		padding: var(--fpcms-sp-4);
	}

	.fpcms .fpcms__table tbody tr:hover td {
		background: transparent;
	}

	.fpcms .fpcms__table tbody td {
		border: 0 !important;
		padding: 0;
		text-align: left;
	}

	/* Rótulo à esquerda, valor à direita — o mesmo par que o cabeçalho
	   da tabela faz em tela larga. */
	.fpcms .fpcms__table tbody td::before {
		color: var(--fpcms-muted);
		content: attr(data-rotulo);
		flex: 0 0 auto;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	/* Linha 1: data em destaque à esquerda, número à direita. */
	.fpcms .fpcms__cel-comp {
		font-size: 17px;
		font-weight: 700;
		grid-column: 1;
	}

	.fpcms .fpcms__cel-comp::before {
		display: block;
		font-weight: 600;
		margin-bottom: 1px;
	}

	.fpcms .fpcms__ord {
		align-self: start;
		font-size: 17px;
		grid-column: 2;
		text-align: right;
	}

	.fpcms .fpcms__ord::before {
		display: block;
		margin-bottom: 1px;
		text-align: right;
	}

	/* Demais campos ocupam a largura toda, rótulo e valor lado a lado. */
	.fpcms .fpcms__cel-tipo,
	.fpcms .fpcms__ord,
	.fpcms .fpcms__cel-arq {
		align-items: baseline;
		border-top: 1px solid var(--fpcms-line-soft) !important;
		display: flex;
		gap: var(--fpcms-sp-4);
		grid-column: 1 / -1;
		justify-content: space-between;
		padding-top: var(--fpcms-sp-2) !important;
	}

	.fpcms .fpcms__cel-tipo {
		flex-wrap: wrap;
	}

	.fpcms .fpcms__obs {
		flex: 1 1 100%;
		margin: var(--fpcms-sp-2) 0 0;
		max-width: none;
		text-align: left;
	}

	.fpcms .fpcms__link {
		min-height: 32px;
		padding: var(--fpcms-sp-1) 0;
	}

	/* ---- Ações no cartão ---- */

	/* Em tela sensível ao toque não existe passar o mouse: revelar por hover
	   deixaria as ações permanentemente invisíveis. Aqui elas viram o rodapé
	   do cartão, com área de toque cheia. */
	.fpcms .fpcms__cel-comp {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		white-space: normal;
	}

	.fpcms .fpcms__rowactions {
		gap: var(--fpcms-sp-2);
		height: auto;
		justify-content: flex-start;
		margin-top: var(--fpcms-sp-3);
		opacity: 1;
	}

	.fpcms .fpcms__acao {
		background: var(--fpcms-zebra);
		border: 1px solid var(--fpcms-line);
		border-radius: 8px;
		font-size: 13px;
		min-height: 38px;
		padding: var(--fpcms-sp-2) var(--fpcms-sp-4);
	}

	.fpcms .fpcms__acao:hover,
	.fpcms .fpcms__acao:focus {
		background: var(--fpcms-accent-soft);
		text-decoration: none;
	}

	.fpcms .fpcms__acao--perigo {
		color: #b42318;
	}

	.fpcms .fpcms__acao--perigo:hover,
	.fpcms .fpcms__acao--perigo:focus {
		background: #fdecec;
	}

	.fpcms .fpcms__empty {
		background: var(--fpcms-card);
		border: 1px solid var(--fpcms-line);
		border-radius: var(--fpcms-radius);
		padding: var(--fpcms-sp-6) var(--fpcms-sp-4);
	}

	/* ---- Paginação ---- */

	.fpcms .fpcms__pager {
		gap: var(--fpcms-sp-2);
	}

	.fpcms .fpcms__pg {
		min-height: 44px;
		min-width: 44px;
	}

	/* ---- Formulário ---- */

	.fpcms__modal {
		align-items: flex-end;
		padding: 0;
	}

	.fpcms__modal-caixa {
		border-radius: 14px 14px 0 0;
		max-height: 92vh;
		max-width: none;
		overflow-y: auto;
		padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
	}

	.fpcms__form-row input,
	.fpcms__form-row select {
		font-size: 16px;
		min-height: 46px;
	}

	.fpcms__form-acoes {
		flex-direction: column-reverse;
	}

	.fpcms__form-acoes .fpcms__btn {
		min-height: 46px;
		width: 100%;
	}
}

@media (max-width: 400px) {
	.fpcms .fpcms__filters {
		grid-template-columns: 1fr;
	}

	.fpcms .fpcms__cel-comp,
	.fpcms .fpcms__ord {
		font-size: 16px;
	}
}

/* ---------- Campo-armadilha ---------- */

/* Fica fora da tela em vez de display:none: leitores automáticos costumam
   ignorar elementos ocultos por display, mas preenchem os que existem no DOM.
   aria-hidden e tabindex garantem que nenhum usuário real o alcance. */
.fpcms__hp {
	height: 1px;
	left: -9999px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	top: -9999px;
	width: 1px;
}