@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
body {
 	font-family: "Ubuntu", sans-serif;
	background: #EFF3F4;
}


/* =====================================================================
 * BOTÕES — a base de toda a plataforma
 *
 * Um só tamanho (32px), um só raio (8px) e uma só moldura. A hierarquia
 * faz-se pela COR DE FUNDO, não pelo tamanho: o neutro é branco com
 * contorno, e só o que é primário ou perigoso se enche.
 *
 * Era 16px, MAIÚSCULAS e cinzento sobre cinzento — o mesmo peso visual para
 * "Guardar", "Exportar" e "Apagar".
 * ===================================================================== */
button,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 14px;
	margin-right: 5px;
	border: 1px solid #D7DBE0;
	border-radius: 8px;
	background: #fff;
	color: #4A4F58;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}

/* ⚠️ O TinyMCE desenha a barra de ferramentas com <button>. A regra acima
   apanha-os e desalinhava a barra inteira: aqui devolvem-se ao que o
   plugin espera. */
.mce-container button,
.mce-panel button,
.mce-tinymce button {
	display: block;
	height: auto;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: normal;
	white-space: normal;
}


/* A barra de título não tem estilo próprio: os botões são os da plataforma
   (ver o topo deste ficheiro). Só a margem entre eles é do `gap` do flex. */
.datagrid-top .button,
.datagrid-top button {
	width: auto;
	margin: 0;
}

button#send_order_email {
	white-space: nowrap;
	width: auto;
}

button:hover,
.button:hover {
	background: #F2F4F6;
	border-color: #BEC4CC;
	color: #2E3238;
}

button:disabled,
.button:disabled,
button.disabled,
.button.disabled {
	opacity: .45;
	cursor: default;
}

button:disabled:hover,
.button:disabled:hover,
button.disabled:hover,
.button.disabled:hover {
	background: #fff;
	border-color: #D7DBE0;
	color: #4A4F58;
}

button:focus-visible,
.button:focus-visible {
	outline: 2px solid #75ac1e;
	outline-offset: 2px;
}

.mce-panel button:hover {
	background: none;
}

/* DESTRUTIVO. Sai do vermelho sólido para contorno: apagar não pode ser a
   coisa mais berrante de um ecrã que se usa para ver e editar. Enche-se
   quando o rato lá está — quem já decidiu vê para onde vai. */
button.red,
.button.red {
	background: #fff;
	border-color: #E0B4B4;
	color: #A20000;
}

button.red:hover,
.button.red:hover {
	background: #A20000;
	border-color: #A20000;
	color: #fff;
}

/* NEUTRO. Era cinzento cheio com texto branco; passa a ser a base. */
button.gray,
.button.gray,
button.lightgray,
.button.lightgray {
	background: #fff;
	border-color: #D7DBE0;
	color: #4A4F58;
}

button.gray:hover,
.button.gray:hover,
button.lightgray:hover,
.button.lightgray:hover {
	background: #F2F4F6;
	border-color: #BEC4CC;
	color: #2E3238;
}

/* PRIMÁRIO. O verde da plataforma, cheio — e o hover ESCURECE. Clarear com
   texto branco por cima fazia a etiqueta desaparecer debaixo do rato. */
button.green,
.button.green {
	background: #a8c22e;
	border-color: #a8c22e;
	color: #fff;
}

button.green:hover,
.button.green:hover {
	background: #93ab26;
	border-color: #93ab26;
	color: #fff;
}

button.blue,
.button.blue {
	background: #3b91b4;
	border-color: #3b91b4;
	color: #fff;
}

button.blue:hover,
.button.blue:hover {
	background: #337fa0;
	border-color: #337fa0;
	color: #fff;
}

button.orange,
.button.orange {
	background: #cd7323;
	border-color: #cd7323;
	color: #fff;
}

button.orange:hover,
.button.orange:hover {
	background: #b5641d;
	border-color: #b5641d;
	color: #fff;
}

/* =====================================================================
 * IA — `.btn-ai` (Pedro, 2026-10-02)
 *
 * O aspecto comum de TODOS os botões que chamam a IA ("Criar … com IA"):
 * gradiente índigo → violeta → ciano, brilho por baixo, o ícone de
 * centelhas e um reflexo que atravessa o botão sob o rato. É a única cor
 * do backoffice que não é da plataforma — de propósito: a IA tem de se
 * reconhecer em qualquer ecrã, ao lado de um "Guardar" verde ou de um
 * "Visualizar" azul.
 *
 * Basta a classe: `<button class="btn-ai">Criar X com IA</button>`, ou
 * `class="btn-ai"` numa acção do formulário declarativo. O ícone é do CSS
 * (máscara sobre `currentColor`), por isso a etiqueta vai SEM emoji.
 *
 * ⚠️ O hover base (`button:hover`) usa o atalho `background:` e apagava o
 * gradiente: o hover daqui volta a declará-lo inteiro. E cada `background:`
 * leva o `background-origin: border-box` atrás: sem ele o gradiente (a 150%)
 * repetia-se por baixo da borda transparente e deixava um fio ciano à esquerda.
 * ===================================================================== */

/* Os tokens da IA: o gradiente das duas versões e o ícone das centelhas.
   Vivem aqui para o painel lateral dos chats (js/ai/widget.css) os usar
   sem os copiar. */
:root {
	--ai-gradient: linear-gradient(110deg, #4338ca 0%, #7c3aed 48%, #0891b2 100%);
	--ai-gradient-blue: linear-gradient(110deg, #1e3a8a 0%, #2563eb 48%, #06b6d4 100%);
	--ai-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6c.5 5 3 7.5 8 8-5 .5-7.5 3-8 8-.5-5-3-7.5-8-8 5-.5 7.5-3 8-8z'/%3E%3Cpath d='M18.5 1.5c.25 2.4 1.6 3.75 4 4-2.4.25-3.75 1.6-4 4-.25-2.4-1.6-3.75-4-4 2.4-.25 3.75-1.6 4-4z'/%3E%3C/svg%3E");
}
button.btn-ai,
.button.btn-ai {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	gap: 7px;
	padding: 0 16px 0 13px;
	border-color: transparent;
	background: var(--ai-gradient);
	background-origin: border-box;
	background-size: 150% 100%;
	background-position: 0 0;
	color: #fff;
	letter-spacing: .01em;
	box-shadow: 0 1px 2px rgba(49, 46, 129, .25), 0 6px 16px -6px rgba(124, 58, 237, .6);
	transition: background-position .45s ease, box-shadow .2s ease, transform .12s ease;
}

/* O ícone: duas centelhas de quatro pontas, cheias. */
button.btn-ai::before,
.button.btn-ai::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: var(--ai-sparkle) center / contain no-repeat;
	mask: var(--ai-sparkle) center / contain no-repeat;
	transition: transform .35s ease;
}

/* O reflexo: uma faixa clara que atravessa o botão sob o rato. Fica por
   baixo da etiqueta (z-index -1 dentro do `isolation` do botão). */
button.btn-ai::after,
.button.btn-ai::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 50%;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
	transform: skewX(-20deg);
	transition: left .6s ease;
	pointer-events: none;
}

button.btn-ai:hover,
.button.btn-ai:hover {
	border-color: transparent;
	background: var(--ai-gradient);
	background-origin: border-box;
	background-size: 150% 100%;
	background-position: 100% 0;
	color: #fff;
	box-shadow: 0 1px 2px rgba(49, 46, 129, .3), 0 8px 22px -6px rgba(8, 145, 178, .65);
}

button.btn-ai:hover::before,
.button.btn-ai:hover::before {
	transform: rotate(90deg) scale(1.08);
}

button.btn-ai:hover::after,
.button.btn-ai:hover::after {
	left: 120%;
}

button.btn-ai:active,
.button.btn-ai:active {
	transform: translateY(1px);
}

button.btn-ai:focus-visible,
.button.btn-ai:focus-visible {
	outline-color: #7c3aed;
}

button.btn-ai:disabled,
.button.btn-ai:disabled,
button.btn-ai.disabled,
.button.btn-ai.disabled,
button.btn-ai:disabled:hover,
.button.btn-ai:disabled:hover,
button.btn-ai.disabled:hover,
.button.btn-ai.disabled:hover {
	background: var(--ai-gradient);
	background-origin: border-box;
	background-size: 150% 100%;
	border-color: transparent;
	color: #fff;
	box-shadow: none;
	transform: none;
}

button.btn-ai:disabled::after,
.button.btn-ai:disabled::after,
button.btn-ai.disabled::after,
.button.btn-ai.disabled::after {
	display: none;
}

/* A SEGUNDA versão — `btn-ai btn-ai-blue`. Dois botões de IA lado a lado
   não podem ser gémeos: é o mesmo botão (centelhas, reflexo, brilho), mas
   em azuis — marinho → azul eléctrico → ciano. Só troca o gradiente e a
   cor do brilho; tudo o resto vem do `btn-ai`. */
button.btn-ai.btn-ai-blue,
.button.btn-ai.btn-ai-blue,
button.btn-ai.btn-ai-blue:hover,
.button.btn-ai.btn-ai-blue:hover,
button.btn-ai.btn-ai-blue:disabled,
.button.btn-ai.btn-ai-blue:disabled,
button.btn-ai.btn-ai-blue.disabled,
.button.btn-ai.btn-ai-blue.disabled {
	background: var(--ai-gradient-blue);
	background-origin: border-box;
	background-size: 150% 100%;
}

button.btn-ai.btn-ai-blue,
.button.btn-ai.btn-ai-blue {
	background-position: 0 0;
	box-shadow: 0 1px 2px rgba(30, 58, 138, .25), 0 6px 16px -6px rgba(37, 99, 235, .6);
}

button.btn-ai.btn-ai-blue:hover,
.button.btn-ai.btn-ai-blue:hover {
	background-position: 100% 0;
	box-shadow: 0 1px 2px rgba(30, 58, 138, .3), 0 8px 22px -6px rgba(6, 182, 212, .65);
}

button.btn-ai.btn-ai-blue:disabled,
.button.btn-ai.btn-ai-blue:disabled,
button.btn-ai.btn-ai-blue.disabled,
.button.btn-ai.btn-ai-blue.disabled {
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	button.btn-ai,
	.button.btn-ai,
	button.btn-ai::before,
	.button.btn-ai::before,
	button.btn-ai::after,
	.button.btn-ai::after {
		transition: none;
	}
}

button.small,
.button.small {
	height: 26px;
	padding: 0 10px;
	font-size: 12px;
	border-radius: 6px;
}

button.large,
.button.large {
	height: 40px;
	padding: 0 20px;
	font-size: 15px;
}

a {
	color: #62b7da;
	transition: .2s all;
}

a.icon-file {
	font-weight: bold;
	font-size: 19px;
}

a.icon-file:hover {
	color: #e69145;
}

.form .tinymce-editor .CodeMirror-wrap {
	border: 1px solid #ccc;
	border-radius: 10px;
}

.canvasjs-chart-credit {
	display: none !important;
}

@media screen and (max-width: 1500px) {

	.datagrid-top {
		height: 80px;
	}


	.auction-edit #lots_container .datagrid-top .cols-config {
		left: 160px;
	}

	.auction-edit .top-actions {
		padding-bottom: 30px;
	}

	.auction-edit #phone_partners_container button,
	.auction-edit #lots_container button,
	.auction-edit #phone_partners_container .button,
	.auction-edit #lots_container .button {
		padding: 6px;
		font-size: 14px;
	}
}

@media screen and (max-width: 1500px) {

	.auction-edit #phone_partners_container button,
	.auction-edit #lots_container button,
	.auction-edit #phone_partners_container .button,
	.auction-edit #lots_container .button {
		padding: 6px;
		font-size: 14px;
	}
}

@media screen and (max-width: 1650px) {
	.auction-edit #lots_container .datagrid-top .cols-config {
		left: 160px;
	}
}

.drag-icon {
	width: 16px;
	height: 16px;
	background: url(../images/i_move.png);
	display: block;
	cursor: pointer;
}


/* Grelhas de linhas do ecra de websites (dominios e idiomas).
   Mesmo vocabulario visual do .images-list, que e a tabela de linhas
   repetidas da plataforma: moldura arredondada, cabecalho separado, campos
   com cantos redondos. */
.form-website-container .website-rows {
	width: 100%;
	max-width: 940px;
	border: 1px solid #ccc;
	border-radius: 10px;
	border-collapse: separate;
	background: #fff;
	margin: 12px 0;
}

.form-website-container .website-rows thead tr:last-child th {
	border-bottom: 1px solid #ccc;
}

.form-website-container .website-rows th {
	padding: 10px;
	font-size: 12px;
	font-weight: bold;
	color: #777;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.form-website-container .website-rows td {
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
	text-align: center;
	vertical-align: middle;
	font-size: 14px;
}

/* "Ativar tema em…" (multi-website F4): a escolha do website vive na caixa de confirmação */
.confirm-box .activate-website-question { display: block; margin-bottom: 12px; }
.confirm-box .activate-website-field { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 4px; }
.confirm-box .activate-website-field > span { font-size: 12px; font-weight: bold; color: #777; text-transform: uppercase; }
.confirm-box select.activate-website { min-width: 240px; border: 1px solid #d8d8d8; border-radius: 6px; padding: 7px 9px; background: #fff; font: inherit; color: #333; }

/* Identidade do website (multi-website F4): três cartões — o que o frontend
   serve agora, o ficheiro actual (próprio ou recuo) e uma dropzone compacta */
.form-website-container .identity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 940px; }
.form-website-container .identity-card { border: 1px solid #ccc; border-radius: 10px; background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.form-website-container .identity-card-title { font-size: 12px; font-weight: bold; color: #777; text-transform: uppercase; }
.form-website-container .identity-preview { height: 120px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e5e5; border-radius: 8px; padding: 10px; box-sizing: border-box;
	background-color: #fff; background-image: linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%), linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.form-website-container .identity-preview.dark { background: #222; border-color: #444; }
.form-website-container .identity-preview.small img { max-height: 48px; }
.form-website-container .identity-preview img { max-height: 100px; max-width: 100%; object-fit: contain; }
.form-website-container .identity-preview .identity-empty { font-size: 12px; color: #999; }
.form-website-container .identity-preview.dark .identity-empty { color: #bbb; }
.form-website-container .identity-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: #777; min-height: 24px; }
.form-website-container .identity-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.form-website-container .identity-meta .identity-clear { flex: 0 0 auto; }
.form-website-container .identity-dropzone.dropzone { min-height: 0; margin: 0; padding: 10px; border: 1px dashed #d8d8d8; border-radius: 8px; background: #fafafa; }
.form-website-container .identity-dropzone.dropzone.dz-drag-hover { border-color: #75ac1e; background: #f0f5e6; }
/* ⚠️ O "Arraste para aqui os ficheiros" do Dropzone NÃO é texto: é um sprite
   PNG de 428x123 em position:absolute, com o <span> do texto real escondido
   (js/dropzone/css/dropzone.css). Numa caixa de ~300px transbordava do cartão
   (QA do Pedro, 2026-09-04). Aqui o sprite sai e o texto do dictDefaultMessage
   passa a ser o que se lê — no fluxo, à medida da caixa. */
.form-website-container .identity-dropzone.dropzone .dz-default.dz-message {
	position: static; width: auto; height: auto; margin: 0; padding: 12px 6px;
	background-image: none; display: block; text-align: center;
	font-size: 12px; color: #999;
}
.form-website-container .identity-dropzone.dropzone .dz-default.dz-message span { display: block; }
/* pré-visualização do ficheiro em curso: cabe no cartão (o original usa 100px
   fixos com margem de 17px) */
.form-website-container .identity-dropzone.dropzone .dz-preview { margin: 6px; padding: 4px; }
.form-website-container .identity-dropzone.dropzone .dz-preview .dz-details { width: 72px; height: 72px; padding: 4px; margin-bottom: 12px; font-size: 10px; }
.form-website-container .identity-dropzone.dropzone .dz-preview .dz-details img { width: 72px; height: 72px; }
.form-website-container .identity-dropzone.dropzone .dz-preview .dz-details .dz-size { display: none; }
.form-website-container .identity-dropzone.dropzone .dz-preview .dz-progress { top: 72px; }

.form-website-container .website-rows tbody tr:last-child td {
	border-bottom: 0;
}

.form-website-container .website-rows th.left,
.form-website-container .website-rows td.left {
	text-align: left;
}

.form-website-container .website-rows td input[type="text"],
.form-website-container .website-rows td select {
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background: #fff;
	color: #444;
}

.form-website-container .website-rows td input[type="text"]:focus,
.form-website-container .website-rows td select:focus {
	border-color: #a6ce39;
	outline: none;
}

.form-website-container .website-rows td input[type="radio"],
.form-website-container .website-rows td input[type="checkbox"] {
	cursor: pointer;
}

.form-website-container .website-rows td.empty {
	padding: 22px 10px;
	color: #999;
	font-size: 13px;
	font-style: italic;
}

.form-website-container .website-rows .locale-name {
	color: #444;
}

.form-website-container .website-rows .locale-code {
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 10px;
	background: #eff3f4;
	border: 1px solid #dfe4e6;
	color: #888;
	font-size: 11px;
	text-transform: uppercase;
}

.form-website-container .website-rows tbody tr.is-off .locale-name {
	color: #aaa;
}

.form-website-container .rows-intro {
	max-width: 940px;
}

.form-website-container .rows-actions {
	max-width: 940px;
	margin-bottom: 10px;
}

.loading {
	position: fixed;
	top: -15px;
	left: 50%;
	width: 150px;
	height: 51px;
	z-index: 9999;
	display: none;
	background: #f4f4f4;
	transform: translateX(-50%);
	border-radius: 10px;
	text-align: center;
}

.loading .icon {
	top: -25px;
	position: relative;
	transform: scale(0.8);
}

/* FLASH MESSAGES */
.flash-messages {
	margin: 10px 0;
}

.flash-messages .message {
	text-align: center;
	padding: 5px;
	border: 1px solid #000;
	margin-bottom: 5px;
	position: static !important;
	font-size: 12px !important;
}

.flash-messages .message.success {
	border-color: #060;
	background: #D2ECD3;
	color: #060;
}

.flash-messages .message.error {
	border-color: #900;
	background: #FACFD0;
	color: #900;
}

.flash-messages .message.warning {
	border-color: #C60;
	background: #FCE0C5;
	color: #C60;
}

/* LOGIN PAGE */
.login {
	min-height: 100vh;
	height: 100%;
	/* O PAINEL DESENHADO (2026-10-02) — o fundo por omissão do login, quando
	   o serviço de banners não devolve nada: escuro, com as luzes do
	   gradiente da IA (violeta, ciano) e o verde da Wheelt. Era a foto
	   images/bg/img1.jpg. Com banner, a foto do banner entra por cima (o
	   `background-image` inline da vista) — ver `.login.has-banner`. */
	background:
		radial-gradient(55% 50% at 16% 20%, rgba(124, 58, 237, .55), transparent 70%),
		radial-gradient(50% 45% at 62% 72%, rgba(8, 145, 178, .42), transparent 70%),
		radial-gradient(38% 34% at 28% 88%, rgba(168, 194, 46, .30), transparent 70%),
		linear-gradient(135deg, #0b1020 0%, #121a3a 55%, #0b1020 100%);
	background-color: #0b1020;
}

/* a grelha fina e a centelha grande, só no painel desenhado; ficam na área
   à esquerda do formulário (que tem 400px à direita) */
.login .login-aside-art {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 400px;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 40% 45%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 40% 45%, #000 20%, transparent 75%);
	pointer-events: none;
}

.login .login-aside-art::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(46vh, 420px);
	height: min(46vh, 420px);
	transform: translate(-55%, -58%);
	background-color: rgba(255, 255, 255, .32);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='.18' stroke-linejoin='round'%3E%3Cpath d='M10 6c.5 5 3 7.5 8 8-5 .5-7.5 3-8 8-.5-5-3-7.5-8-8 5-.5 7.5-3 8-8z'/%3E%3Cpath d='M18.5 1.5c.25 2.4 1.6 3.75 4 4-2.4.25-3.75 1.6-4 4-.25-2.4-1.6-3.75-4-4 2.4-.25 3.75-1.6 4-4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='.18' stroke-linejoin='round'%3E%3Cpath d='M10 6c.5 5 3 7.5 8 8-5 .5-7.5 3-8 8-.5-5-3-7.5-8-8 5-.5 7.5-3 8-8z'/%3E%3Cpath d='M18.5 1.5c.25 2.4 1.6 3.75 4 4-2.4.25-3.75 1.6-4 4-.25-2.4-1.6-3.75-4-4 2.4-.25 3.75-1.6 4-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.login .login-brand {
	position: fixed;
	left: 56px;
	bottom: 100px;
	right: 456px;
	color: #fff;
}

.login .login-brand-name {
	margin: 0 0 8px;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.login .login-brand-areas {
	margin: 0;
	color: rgba(255, 255, 255, .72);
	font-size: 15px;
	letter-spacing: .04em;
}

/* COM BANNER: a foto do serviço, com um escurecimento em gradiente por cima
   (o texto lê-se em qualquer foto) — a mensagem vai num cartão de vidro */
.login.has-banner {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.login.has-banner::before {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 400px;
	background: linear-gradient(20deg, rgba(11, 16, 32, .82) 0%, rgba(11, 16, 32, .35) 45%, rgba(67, 56, 202, .18) 100%);
	pointer-events: none;
}

.fa-calendar::before {
	content: '' !important;
	display: inline-block;
	width: 49px;
	height: 33px;
	background-image: url('../images/menu/calendar.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-size: auto 36px;
}

.login-container {
	z-index: 2;
	position: absolute;
	width: 400px;
	top: 0;
	height: 100%;
	right: 0px;
	background: #fff;
	display: none;
}

.login-content {
	padding: 40px;
}

.login-content h2 {
	font-size: 14px;
	text-transform: uppercase;
	color: #666;
	margin: 50px 0 5px;
}

.login-content .legend {
	font-size: 15px;
}

.login-content .form {
	margin: 20px 0;
	padding: 0;
}

.login-content .form .field {
	padding: 0;
	margin-bottom: 10px;
}

.login-content .forgot-password {
	color: #333;
	font-size: 12px;
	float: right;
}

.login-content .forgot-password:hover {
	text-decoration: underline;
}

.login-footer {
	position: absolute;
	bottom: 10px;
	font-size: 11px;
	text-align: center;
}

.login .message {
	position: fixed;
	z-index: 1;
	/* acima do selo do reCAPTCHA, que a vista põe no canto inferior
	   esquerdo (`badge=bottomleft`, ~60px de altura) */
	bottom: 96px;
	left: 48px;
	max-width: min(560px, calc(100vw - 400px - 96px));
	padding: 20px 24px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 16px;
	background: rgba(11, 16, 32, .42);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
}

.login .message .title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.login .message .subtitle {
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: 16px;
}

/* NAVIGATION */

.navigation-container {
	background: #fff;
	position: absolute;
	top: 0;
	transition: left 0.2s;
	z-index: 999;
	border-radius: 14px;
}

.navigation-container .top-navigation {
	background: url(../images/top-nav-icon.png) no-repeat center #fff;
	background-size: auto;
	background-size: auto;
	background-size: auto 29px;
	height: 90px;
}

.navigation-container .top-navigation h1 {
	display: none;
}

.navigation {
	margin-top: 36px;
	background: #fff;	
}

.navigation > li > a {
	color: #666666;
	/* display: block; */
	padding: 40px 10px;
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 12px;
	width: 75px;
}

.navigation > li > a.active,
.navigation > li > a:hover {
	color: #a6ce39 ;
}

.navigation a .icon {
	position: absolute;
	left: 50%;
	padding: 40px 27px 27px;
	top: -20px;
	background-repeat: no-repeat;
	background-position: center;
	height: 0px;
	width: 25px;
	order: 1;
	transform: translateX(-50%);
}

.navigation a .icon {
	background-size: auto 40px;
	border-top: 1px solid #eee;
}

.navigation a.active .icon,
.navigation a.hammer .icon {
	background-image: url(../images/menu/hammer.png);
}
.navigation a.hammer.active .icon,
.navigation a.hammer:hover .icon {
	background-image: url(../images/menu/hammer_over.png);
}
.navigation a.box .icon {
	background-image: url(../images/menu/box.png);
}
.navigation a.box.active .icon,
.navigation a.box:hover .icon {
	background-image: url(../images/menu/box_over.png);
}
.navigation a.config .icon {
	background-image: url(../images/menu/config.png);
}
.navigation a.config.active .icon,
.navigation a.config:hover .icon {
	background-image: url(../images/menu/config_over.png);
}
.navigation a.stats .icon {
	background-image: url(../images/menu/stats.png);
	background-size: auto 40px;
	background-repeat: no-repeat;
}
.navigation a.stats.active .icon,
.navigation a.stats:hover .icon {
	background-image: url(../images/menu/stats_over.png);
}
.navigation a.users .icon {
	background-image: url(../images/menu/users.png);
}
.navigation a.users.active .icon,
.navigation a.users:hover .icon {
	background-image: url(../images/menu/users_over.png);
}
.navigation a.roles .icon {
	background-image: url(../images/menu/roles.png);
}
.navigation a.roles.active .icon,
.navigation a.roles:hover .icon {
	background-image: url(../images/menu/roles_over.png);
}
.navigation a.page .icon {
	background-image: url(../images/menu/page.png);
}
.navigation a.page.active .icon,
.navigation a.page:hover .icon {
	background-image: url(../images/menu/page_over.png);
}
.navigation a.page2 .icon {
	background-image: url(../images/menu/page2.png);
}
.navigation a.page2.active .icon,
.navigation a.page2:hover .icon {
	background-image: url(../images/menu/page2_over.png);
}
.navigation a.news .icon {
	background-image: url(../images/menu/news.png);
}
.navigation a.news.active .icon,
.navigation a.news:hover .icon {
	background-image: url(../images/menu/news_over.png);
}
.navigation a.blocks .icon {
	background-image: url(../images/menu/blocks.png);
}
.navigation a.blocks.active .icon,
.navigation a.blocks:hover .icon {
	background-image: url(../images/menu/blocks_over.png);
}
.navigation a.customer .icon {
	background-image: url(../images/menu/customer.png);
}
.navigation a.customer.active .icon,
.navigation a.customer:hover .icon {
	background-image: url(../images/menu/customer_over.png);
}
.navigation a.supplier .icon {
	background-image: url(../images/menu/supplier.png);
}
.navigation a.supplier.active .icon,
.navigation a.supplier:hover .icon {
	background-image: url(../images/menu/supplier_over.png);
}
.navigation a.cart .icon {
	background-image: url(../images/menu/cart.png);
}
.navigation a.cart.active .icon,
.navigation a.cart:hover .icon {
	background-image: url(../images/menu/cart_over.png);
}
.navigation a.image .icon {
	background-image: url(../images/menu/image.png);
}
.navigation a.image.active .icon,
.navigation a.image:hover .icon {
	background-image: url(../images/menu/image_over.png);
}
.navigation a.file .icon {
	background-image: url(../images/menu/file.png);
}
.navigation a.file.active .icon,
.navigation a.file:hover .icon {
	background-image: url(../images/menu/file_over.png);
}
.navigation a.calendar .icon {
	background-image: url(../images/menu/calendar.png);
}
.navigation a.calendar.active .icon,
.navigation a.calendar:hover .icon {
	background-image: url(../images/menu/calendar_over.png);
}
.navigation a.catalog .icon {
	background-image: url(../images/menu/catalog.png);
}
.navigation a.catalog.active .icon,
.navigation a.catalog:hover .icon {
	background-image: url(../images/menu/catalog_over.png);
}
.navigation a.product .icon {
	background-image: url(../images/menu/product.png);
}
.navigation a.product.active .icon,
.navigation a.product:hover .icon {
	background-image: url(../images/menu/product_over.png);
}
.navigation a.category .icon {
	background-image: url(../images/menu/category.png);
}
.navigation a.category.active .icon,
.navigation a.category:hover .icon {
	background-image: url(../images/menu/category_over.png);
}
.navigation a.receives .icon {
	background-image: url(../images/menu/receives.png);
}
.navigation a.receives.active .icon,
.navigation a.receives:hover .icon {
	background-image: url(../images/menu/receives_over.png);
}
.navigation a.exit .icon {
	background-image: url(../images/menu/exit.png);
}
.navigation a.exit.active .icon,
.navigation a.exit:hover .icon {
	background-image: url(../images/menu/exit_over.png);
}
.navigation a.blog .icon {
	background-image: url(../images/menu/blog.png);
}
.navigation a.blog.active .icon,
.navigation a.blog:hover .icon {
	background-image: url(../images/menu/blog_over.png);
}

.navigation .icon::after {
	content: attr(title);
	display: none;
	text-align: center;
	font-size: 12px;
	color: #d7d9da;
	margin-top: 18px;
	position: absolute;
	left: 0px;
	width: 79px;
}
.navigation .icon:hover::after {
	color: #c1e65e;
}

.navigation li {}

.navigation > li > ul {
	display: block;
	width: 300px;
	height: 100%;
	position: absolute;
	top: 0;
	left: -100%;
	opacity: 0;
	transition: .3s all ease-in-out;
	visibility: hidden;
	z-index: 9;
	background-color: #fff;
	box-shadow: rgb(128, 128, 128) 8px 0px 10px -10px;
	overflow: auto;
}

.navigation > li.expanded > ul {
	left: 95px;
	visibility: visible;
	opacity: 1;
}

.navigation ul li,
.navigation ul li a,
.navigation ul li a .icon {
	all: unset;
}

.navigation ul li {
	display: block;
	padding: 10px 20px;
}
.navigation ul ul li {
	padding: 0;
}

.navigation ul li a {
	color: #666666;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	cursor: pointer;
	transition: .2s color ease;
	display: block;
}

.navigation ul li a.parent {
	margin: 30px 0;
	color: rgb(102, 102, 102);
	font-size: 18px;
	cursor: default;
}

.navigation ul ul li a {
	margin-bottom: 15px;
}

.navigation ul li a.active:not(.parent),
.navigation ul li a:hover:not(.parent) {
	color: #a6ce39 ;
}


/* CONTENT */
.content-container {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(100% - 93px);
	background: #EFF3F4;
	box-sizing: border-box;
}

.page-title {
	font-weight: bold;
	color: #a6ce39;
	font-size: 18px;
	padding: 5px 40px;
	/* background: #fff; */
	width: calc(100% - 750px);
	position: absolute;
	top: 25px;
	text-transform: uppercase;
	max-height: 38px;
	line-height: 22px;
	overflow: hidden;
	/*overflow-y: scroll;*/
}

#category_data_container .page-title,
#page_data_container .page-title {
	position: unset;
	text-decoration: underline;
}

.page-title a {
	color: #a6ce39;
	text-decoration: underline;
}

.page-title .page-link {
	margin-right: 0;
}

.page-title .separator {
	background: url(../images/separator.png) no-repeat;
	width: 9px;
	height: 9px;
	display: inline-block;
	/*display: none;*/
}

@media only screen and (max-width: 1280px) {
	.page-title {font-size: 16px;}
}

.content-wrapper {
	padding: 15px 35px;
}
/*
.form.auction-edit {
	padding: 25px 15px;
}

.form.auction-edit .top-actions{
	background: #fff;
	border-radius: 19px 19px 0 0;
	padding-top: 25px;
  	padding-bottom: 15px;
}
.form.auction-edit .notebook {
	margin-right: 20px;
}
.form.auction-edit .notebook .notebook-title{
	background: #fff;
}
.form.auction-edit .notebook .notebook-title:after{
	width: 100%;
	height: 1px;
	background: #E5E5E5;
	content: "";
	position: absolute;
	bottom:42px;
	left: 0;
}
.form.auction-edit .notebook .page{
	padding: 20px 15px 15px;
  	border: 0 !important;
}

*/

.content > .form {
	padding: 25px 15px;
}

.content > .form .top-actions{
	background: rgba(255,255,255,0.9);
	border-radius: 19px 19px 0 0;
	padding: 20px 10px 15px;
	position: sticky;
	top: 0;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid #ccc;
	z-index: 9;
}
.content > .form .notebook {
}
.content > .form .notebook .notebook-title{
	background: #fff;
}


.content > .form .notebook .notebook-title:after{
	width: 100%;
	height: 1px;
	background: #E5E5E5;
	content: "";
	position: absolute;
	bottom:42px;
	left: 0;
}
.content > .form .notebook .page{
	padding: 20px 15px 15px;
  	border: 0 !important;
}

/* ADMIN HEADER */

.dev-mode-notice {
	background: #000;
	color: #fff;
	padding: 5px;
	text-align: center;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	padding: 5px 30px;
}

.admin-header {
	padding: 10px 40px;
	position: relative;
	height: 67px;
	background: #fff;
}

.admin-header .profile {
	background: url(../images/cliente-perfil.svg) no-repeat center right;
	background-size: 50px;
	position: absolute;
	right: 45px;
	font-size: 18px;
	color: #444;
	padding: 22px 60px 22px 0;
}

.admin-header .profile:hover .profile-menu {
	display: block;
}

.admin-header .profile .profile-menu {
	position: absolute;
	top: 70px;
	right: 0;
	width: 270px;
	box-shadow: 0 0 2px #333;
	background: #fff;
	z-index: 999;
	display: none;
	border-radius: 19px;
}

.admin-header .profile .profile-menu p.message {
	padding: 10px;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
}

.admin-header .profile .profile-menu li a {
	padding: 17px 10px 17px 60px;
	font-size: 12px;
	background: center left 12px no-repeat;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
	display: block;
	color: #333;
}

.admin-header .profile .profile-menu li a:hover {
	background-color: #f4f4f4;
}

.admin-header .profile .profile-menu li a.access-data {
	background-image: url(../images/i_person.png);
}

.admin-header .profile .profile-menu li a.users {
	background-image: url(../images/i_persons.png);
}

.admin-header .profile .profile-menu li a.backup {
	background-image: url(../images/i_shield.png);
}

.admin-header .profile .profile-menu li a.sales {
	background-image: url(../images/i_percent.png);
}

.admin-header .profile .profile-menu li a.box {
	background-image: url(../images/i_box2.png);
}

.admin-header .profile .profile-menu li a.logout {
	background-image: url(../images/i_logout.png);
}

.admin-header .profile .profile-menu li a.import-export {
	background-image: url(../images/i_cloud.png);
}

.admin-header .messages {
	background: url(../images/messages.svg) no-repeat center right;
	position: absolute;
	right: 270px;
	width: 40px;
	height: 40px;
	color: #333;
	top: 28px;
	background-size: 30px;
}
/*
.admin-header .messages:hover {
	background-image: url(../images/i_messages_over.png);
}
*/
.admin-header .messages span {
	display: block;
	width: 30px;
	padding-top: 1px;
	height: 30px;
	background: #A6CE37;
	border-radius: 50%;
	color: #444;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	position: absolute;
	top: -13px;
	right: -22px;
	line-height: 29px;
}

.admin-header .messages:hover .messages-info {
	display: block;
}

.admin-header .messages .messages-info {
	position: absolute;
	top: 40px;
	left: -110px;
	width: 270px;
	box-shadow: 0 0 2px #333;
	background: #fff;
	z-index: 999;
	display: none;
	border-radius: 19px;
	overflow: hidden;
}

.admin-header .messages .messages-info p.message {
	padding: 10px;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
}

.admin-header .messages .messages-info ul{
	max-height: 70vh;
	overflow: auto;
}
.admin-header .messages .messages-info ul li {
	padding: 5px 10px 5px 40px;
	font-size: 12px;
	background: url(../images/i_message.png) center left 5px no-repeat;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}

.admin-header .messages .messages-info ul li:hover {
	background-color: #f4f4f4;
}

.admin-header .messages .messages-info ul li p {
	margin-bottom: 3px;
}

.admin-header .messages .messages-info ul li .name {
	font-weight: bold;
}

.admin-header .messages .messages-info ul li .date_ {
	font-size: 10px;
}

.admin-header .messages .messages-info .all-messages {
	padding: 10px;
	background: #f4f4f4;
	font-size: 13px;
	text-align: center;
	display: block;
	color: #333;
}

.admin-header .messages .messages-info .all-messages:hover {
	background: #e4e4e4;
}

.admin-header .messages .messages-info p.no-messages {
	padding: 10px;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
}

.admin-header .frontend-link { 
	position: absolute;
	right: 400px;
	color: #ccc;
	top: 29px;
	font-size: 22px;	
	width: 32px;
	height: 32px;
	background: url(../images/website-design.png);
	filter: invert(85%) sepia(0%) saturate(0%) brightness(85%) contrast(90%);
	transition: .2s all;
}

.admin-header .frontend-link:hover { 
	filter: invert(85%) sepia(0%) saturate(0%) brightness(65%) contrast(70%);
}

/* SALDO DE IA no cabeçalho (Consumos de IA, 2026-10-02) — à esquerda do
   atalho para o frontend. O ícone é o dos botões `.btn-ai` (as duas centelhas
   do `--ai-sparkle`), partido em dois: a centelha GRANDE em traço, no cinzento
   dos outros ícones do cabeçalho (#bec0cd, o dos SVG), e a PEQUENA cheia, na
   cor do estado do saldo — verde acima de 10 €, laranja até 10 €, vermelho a
   0 € ou menos (o limiar vive no UsageController::balanceState). As duas
   máscaras partilham a caixa e o viewBox, por isso encaixam como no botão. */
.admin-header .ai-balance {
	position: absolute;
	right: 466px;
	top: 28px;
	height: 32px;
	display: flex;
	align-items: center;
	gap: 7px;
	color: #8f929f;
	font-size: 14px;
	font-weight: bold;
	white-space: nowrap;
	text-decoration: none;
	transition: color .2s;
}
.admin-header .ai-balance:hover { color: #5d606b; }
.admin-header .ai-balance .ai-balance-icon {
	position: relative;
	flex: none;
	width: 32px;
	height: 32px;
}
.admin-header .ai-balance .ai-balance-icon::before,
.admin-header .ai-balance .ai-balance-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	transition: background-color .2s, transform .35s ease;
}
.admin-header .ai-balance .ai-balance-icon::before {
	background-color: #bec0cd;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6c.5 5 3 7.5 8 8-5 .5-7.5 3-8 8-.5-5-3-7.5-8-8 5-.5 7.5-3 8-8z' fill='none' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6c.5 5 3 7.5 8 8-5 .5-7.5 3-8 8-.5-5-3-7.5-8-8 5-.5 7.5-3 8-8z' fill='none' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.admin-header .ai-balance .ai-balance-icon::after {
	background-color: #bec0cd;
	transform-origin: 77% 23%;
	transform: scale(1.3);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.5 1.5c.25 2.4 1.6 3.75 4 4-2.4.25-3.75 1.6-4 4-.25-2.4-1.6-3.75-4-4 2.4-.25 3.75-1.6 4-4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.5 1.5c.25 2.4 1.6 3.75 4 4-2.4.25-3.75 1.6-4 4-.25-2.4-1.6-3.75-4-4 2.4-.25 3.75-1.6 4-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.admin-header .ai-balance:hover .ai-balance-icon::before { background-color: #9a9cab; }
.admin-header .ai-balance:hover .ai-balance-icon::after { transform: rotate(90deg) scale(1.45); }
.admin-header .ai-balance.is-ok    .ai-balance-icon::after { background-color: #8dc63f; }
.admin-header .ai-balance.is-low   .ai-balance-icon::after { background-color: #f08c1a; }
.admin-header .ai-balance.is-empty .ai-balance-icon::after { background-color: #e53935; }

.admin-header .events {
	background: url(../images/events.svg) no-repeat center right;
	position: absolute;
	right: 340px;
	width: 40px;
	height: 40px;
	color: #333;
	top: 28px;
	background-size: 30px;
	/*overflow: hidden;*/
}
/*
.admin-header .events:hover {
	background-image: url(../images/i_event_over.png);
}
	*/

.admin-header .events span {
	display: block;
	width: 30px;
	padding-top: 1px;
	height: 30px;
	background: #A6CE37;
	border-radius: 50%;
	color: #444;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	position: absolute;
	top: -13px;
	right: -22px;
	line-height: 29px;
}

.admin-header .events:hover .events-info {
	display: block;
	overflow: hidden;
}

.admin-header .events .events-info {
	position: absolute;
	top: 45px;
	left: -110px;
	width: 270px;
	box-shadow: 0 0 2px #333;
	background: #fff;
	z-index: 999;
	display: none;
	border-radius: 19px;
}

.admin-header .events .events-info p.event {
	padding: 10px;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
}

.admin-header .events .events-info ul li {
	padding: 5px 10px 5px 40px;
	font-size: 12px;
	background: url(../images/i_message.png) center left 5px no-repeat;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}

.admin-header .events .events-info ul li:hover {
	background-color: #f4f4f4;
}

.admin-header .events .events-info ul li p {
	margin-bottom: 3px;
}

.admin-header .events .events-info ul li .name {
	font-weight: bold;
}

.admin-header .events .events-info ul li .date_ {
	font-size: 10px;
}

.admin-header .events .events-info .all-events {
	padding: 10px;
	background: #f4f4f4;
	font-size: 13px;
	text-align: center;
	display: block;
	color: #333;
}

.admin-header .events .events-info .all-events:hover {
	background: #e4e4e4;
}

.admin-header .events .events-info p.no-messages {
	padding: 10px;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
}

.admin-header .logo {
	position: absolute;
	top: 10px;
	left: 10px;
}

.admin-header .logo span {
	color: #727272;
	font-weight: normal;
	position: absolute;
	top: 7px;
	left: 120px;
	width: 90px;
	font-size: 14px;
	text-transform: uppercase;
	line-height: 17px;
}

/* CONTENT */

.content-container .content {background: #EFF3F4;}

/* DASHBOARD */
.dashboard .stats-resume { display:none;
	width: 270px;
	float: right;
	background: #fff;
	padding: 15px 15px 13px;
	margin-bottom: 15px;
}

.dashboard .stats-resume strong {
	font-weight: bold;
}

.dashboard .stats-resume li {
	margin-bottom: 0;
	font-size: 13px;
	display: block;
	text-align: center;
}

.dashboard .notebook {
	width: 100%;
	border-top: 0px solid #E5E5E5;
	float: left;
	margin-bottom: 15px;
}

.dashboard .notebook .notebook-title {
	background: none;
	padding: 28px 0;
	border: 0;
}

.dashboard .notebook .notebook-title li {
	width: calc(25% - 8px);
	font-size: 18px;
	padding: 14px 17px;
	border-right: 0px solid #ccc;
	opacity: 1;
	margin-right: 10px;
	/*background-size: auto 37px !important;*/
	background: #000;
  	border-radius: 19px;
	color: #fff;
}

.dashboard .notebook .notebook-title li:last-child {
	margin-right: 0;
}

.dashboard .notebook .notebook-title li.active,
.dashboard .notebook .notebook-title li:hover {
	background: #A6CE37;
	color: #000;
}

.dashboard .notebook .notebook-title li .icon{
	font-size: 50px;
	color: #fff;
	vertical-align: middle;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	width: 66px;
	height: 66px;
	display: inline-block;
	vertical-align: middle;
	line-height: 66px;
	text-align: center;
	margin-right: 26px;
}

.dashboard .notebook .notebook-title li .icon.icon-pages{
	font-size: 44px;
	text-align: left;
	padding-left: 5px;
	box-sizing: border-box;
}

.dashboard .notebook .notebook-title li .icon:before{
	margin:0;
}

.dashboard .notebook .notebook-title li.active span:last-child {
	display: none;
}
/*
.dashboard .notebook .notebook-title li.dash-regions .icon-regions {
	background: url(../images/i_dash_map.png) no-repeat left center;
	padding-left: 40px;
}


.dashboard .notebook .notebook-title li.dash-regions.active {
	background-image: url(../images/i_dash_map_over.png);
}
	

.dashboard .notebook .notebook-title li.dash-visits.active {
	background-image: url(../images/i_dash_visits_over.png);
}

.dashboard .notebook .notebook-title li.dash-visits {
	background: url(../images/i_dash_visits.png) no-repeat left center;
	padding-left: 40px;
}

.dashboard .notebook .notebook-title li.dash-pages.active {
	background-image: url(../images/i_dash_pages_over.png);
}

.dashboard .notebook .notebook-title li.dash-pages {
	background: url(../images/i_dash_pages.png) no-repeat left center;
	padding-left: 50px;
}

.dashboard .notebook .notebook-title li.dash-channel.active {
	background-image: url(../images/i_dash_keywords_over.png);
}

.dashboard .notebook .notebook-title li.dash-channel {
	background: url(../images/i_dash_keywords.png) no-repeat left center;
	padding-left: 40px;
}

.dashboard .notebook .notebook-title li.dash-referrers {
	background: url(../images/i_dash_referer.png) no-repeat left center;
	padding-left: 40px;
}

.dashboard .notebook .notebook-title li.dash-referrers.active {
	background-image: url(../images/i_dash_referer_over.png);
}
	*/

.dashboard .notebook .page .overflow {
	height: 400px;
	overflow-y: scroll;
}

.dashboard .notebook .page .datagrid-top {
	display: none;
}

.dashboard .notebook .page .datagrid-container {
	padding: 0;
	border: 0;
	overflow: auto;
}

.dashboard .notebook .page .datagrid .sorter {
	background: none;
}

.dashboard .form {
	background: #fff;
	margin-bottom: 15px;
}

.dashboard .form.form-dashboard-filters {
	background: #fff;
	border-radius: 19px 19px 0 0;
	padding: 40px;
}

.dashboard .notebook .notebook-page .page{
	border-radius: 0 0 19px 19px;
	border:0;
}

.dashboard .form-dashboard-filters .col.label label {
	border:0;
}

.dashboard .form-dashboard-filters .col.label label span {
	font-size: 18px;
	color: #444;
	text-transform: none;
}

.dashboard .form-dashboard-filters .col .box-group .label {
	display: inline-block;
	font-size: 18px;
	text-transform: none;
	font-weight: normal;
	color: #444;
	margin-bottom: 0;
	vertical-align: middle;
}
.dashboard .form-dashboard-filters .col .box-group .date{
	padding:0;
	border: 0;
}
.dashboard .form-dashboard-filters .col .box-group input {
	font-size: 16px;
	color: #444;
	display: inline-block;
	width: calc(100% - 43px);
	border: 1px solid #BEC0CD;
	border-radius: 10px;
	vertical-align: middle;
	padding: 10px;
	box-sizing: border-box;
	margin-left: 5px;
}
.dashboard .form-dashboard-filters .col .box-group > label {
	padding: 0;
	border:0;
}
.dashboard .form-dashboard-filters .col .box-group label span {
	display: inline-block;
	font-size: 18px;
	text-transform: none;
	font-weight: normal;
	color: #444;
	margin-bottom: 0;
	vertical-align: middle;
}

.dashboard .form-dashboard-filters .col .box-group .data {
	font-size: 16px;
	color: #444;
	display: inline-block;
	width: calc(100% - 43px);
	border: 1px solid #BEC0CD;
	border-radius: 10px;
	vertical-align: middle;
	padding: 12px;
	box-sizing: border-box;
	margin-left: 5px;
}

.dashboard .form-dashboard-filters .col .box-group .data span {
	font-size: 16px;
  	color: #444;
}

.dashboard .form-dashboard-filters .col .box-group label .select2-container .select2-choice {
  line-height: 16px;
  height: 19px;
}

.dashboard .form-dashboard-filters .col.buttons {
	text-align: right;
}

.dashboard .form button {
	padding: 13px 40px;
	font-size: 16px;
	margin-right: 5px;
	margin-bottom: 5px;
	text-transform: none;
	color: #fff;
	border-radius: 10px;
	background: #BEC0CD;
}
.dashboard .form button.green {
	background:#A6CE37;
}

.dashboard .form button.grey {
	background:#444444;
}

.dashboard .pending-orders .page-title {
	display: none;
}

.dashboard .pending-orders .datagrid-container {
	margin: 0;
}

@media only screen and (max-width: 1450px) {
	.dashboard .form.form-dashboard-filters {
		padding: 40px 15px;
	}

	.dashboard .form.form-dashboard-filters .fields-group.cols2 .col {
		width: calc(50%) !important;
	}
}

@media only screen and (max-width: 1320px) {
	

	.dashboard .form-dashboard-filters .col .box-group label span {
		display: block;
		font-size: 15px;
		margin-bottom: 5px;
	}
	.dashboard .form-dashboard-filters .col .box-group .label {
		display: block;
		font-size: 15px;
		margin-bottom: 5px;
	}

	.dashboard .form-dashboard-filters .col .box-group .data {
		font-size: 12px;
		width: 100%;
	}

	.dashboard .form-dashboard-filters .col .box-group .data span {
  		font-size: 12px;
	}

	.dashboard .form-dashboard-filters .col.label label span {
  		font-size: 15px;
	}
}

/* FILE MANAGER */
.file-manager {
	display: table;
	width: 100%;
}

.file-manager .folders {
	display: table-cell;
	padding-right: 15px;
	border-right: 1px solid #ccc;
	min-width: 20%;
	vertical-align: top;
}

.file-manager .folders .buttons {
	margin: 10px 0;
	border-radius: 5px;
}

.file-manager .files {
	display: table-cell;
	padding-left: 15px;
	vertical-align: top;
}

.file-manager .file-list li {
	width: 120px;
	margin-right: 10px;
	margin-bottom: 10px;
	height: 120px;
	padding: 5px;
	border: 1px solid #ccc;
	float: left;
	position: relative;
	border-radius: 5px;
}

.file-manager .file-list li .image {
	width: 100%;
	height: 90px;
	display: block;
	overflow: hidden;
	margin-bottom: 5px;
	text-align: center;
}

.file-manager .file-list li .image.file-extension img {
	margin-top: 22px;
}

.file-manager .file-list li .paths {
	position: relative;
}

.file-manager .file-list li .file-name {
	font-size: 11px;
}

.file-manager .file-list li .full-path {
	display: none;
	position: absolute;
	border: 1px solid #ccc;
	border-top: 0;
	font-size: 11px;
	background: #fff;
	top: 0px;
	left: -6px;
	z-index: 9999;
	padding: 0 5px 5px;
	width: 100%;
	min-height: 25px;
	cursor: copy;
}

.file-manager .file-list li:hover .full-path {
	display: block;
}

.file-manager .file-list li .remove {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 26px;
	height: 26px;
	background: url(../images/i_remove2.png);
	display: none;
	cursor: pointer;
}

.file-manager .file-list li:hover .remove {
	display: block;
}

/* PAGE MANAGER */
.page-manager {
	display: table;
	width: 100%;
}

.page-manager .page-title {
	padding: 5px 10px;
}

.page-manager .page-data .page-title {
	padding: 5px 0;
}

.page-manager .pages {
	display: table-cell;
	padding-right: 15px;
	border-right: 1px solid #ccc;
	min-width: 20%;
	vertical-align: top;
}

.page-manager .pages .buttons {
	margin: 10px 0 5px;
}

.page-manager .pages .buttons button {
	margin: 0 0 3px;
	text-transform: none;
	border-radius: 5px;
}

.page-manager .pages .buttons p {
	font-size: 13px;
	margin-top: 10px;
}

/* A BARRA DAS ÁRVORES (páginas, categorias do catálogo e de leilão — Pedro,
   2026-10-02: «encaixa-os com mais sentido»). Eram botões empilhados com
   <br>, de tamanhos e cores sem ordem, e um «Abrir Tudo | Fechar Tudo» de
   ligações soltas. Agora:
     - uma grelha de 2 colunas, botões da mesma altura: em cima, à largura
       toda e NEUTRO, o «na Raiz» (criar na raiz é raro); por baixo o que se
       usa todos os dias — o «Nova …» em verde (dentro do seleccionado) e,
       nas páginas, a IA ao lado. O «Duplicar Página» é do formulário;
     - por cima da árvore, a faixa «Estrutura» com abrir/fechar tudo num
       selector segmentado, com as setas a dizer o que fazem. */
.page-manager .pages .tree-toolbar {
	margin: 12px 0 0;
}

.page-manager .pages .tree-toolbar-grid {
	/* FLEX e não grelha de 2 colunas iguais (QA do Pedro, Chrome): com a
	   coluna a ~340px cada metade tinha 166px e «Nova Página com IA» pede
	   169 — cortava. Assim os botões de baixo repartem o espaço pelo TEXTO
	   de cada um, e se não couberem os dois o da direita desce para uma
	   linha sua, à largura toda, em vez de cortar. */
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* à largura toda: o «na Raiz» (acção rara, em cima e neutra) e, nas
   árvores sem IA, o «Nova …» de baixo */
.page-manager .pages .tree-toolbar-grid .tree-toolbar-wide {
	flex-basis: 100%;
}

.page-manager .pages .tree-toolbar-grid button {
	flex: 1 1 auto;
	width: auto;
	height: 34px;
	margin: 0;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 12.5px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.page-manager .pages .tree-toolbar-view {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 0 8px;
	border-top: 1px solid #ECEEF1;
}

.page-manager .pages .tree-toolbar-label {
	color: #6B7280;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.page-manager .pages .tree-toolbar-toggles {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: #F1F3F5;
	border-radius: 9px;
}

.page-manager .pages .tree-toolbar-toggles .tree-toggle {
	height: 26px;
	margin: 0;
	padding: 0 10px 0 8px;
	gap: 5px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #4A4F58;
	font-size: 12px;
}

.page-manager .pages .tree-toolbar-toggles .tree-toggle:hover {
	background: #fff;
	color: #1F2937;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.page-manager .pages .tree-toolbar-toggles .tree-toggle::before {
	content: "";
	flex: none;
	width: 13px;
	height: 13px;
	background-color: currentColor;
}

.page-manager .pages .tree-toolbar-toggles .tree-toggle-open::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.page-manager .pages .tree-toolbar-toggles .tree-toggle-close::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 20 5-5 5 5'/%3E%3Cpath d='m7 4 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 20 5-5 5 5'/%3E%3Cpath d='m7 4 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.page-manager .page-data {
	display: table-cell;
	padding-left: 15px;
	vertical-align: top;
}

.page-manager .page-data .notebook .notebook-page .page {
	padding: 20px 0 15px;
}

/* A caixa dos blocos é UMA: a barra `.blocks-head` (título + "Criar bloco
   com IA") é o topo, o `.blocks-wrapper` fecha-a por baixo. */
.page-manager .page-data .has-blocks .blocks-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 50px;
	padding: 8px 10px 8px 14px;
	border: 1px solid #D7DBE0;
	border-radius: 10px 10px 0 0;
	background: #F7F8FA;
	box-sizing: border-box;
}

.page-manager .page-data .has-blocks .blocks-head-title {
	font-size: 13px;
	font-weight: 700;
	color: #2E3238;
}

/* Os botões de IA da barra: o espaço entre eles é do `gap`, não da margem. */
.page-manager .page-data .has-blocks .blocks-head-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.page-manager .page-data .has-blocks .blocks-head .btn-ai {
	margin-right: 0;
}

.page-manager .page-data .blocks-wrapper {
	padding: 2px 4px 6px;
	border: 1px solid #D7DBE0;
	border-top: 0;
	border-radius: 0 0 10px 10px;
	background: #fff;
}

.page-manager .page-data .blocks-wrapper .col-actions {
	background: #f4f4f4;
	padding: 5px;
	text-align: right;
	border-bottom: 1px solid #ccc;
	white-space: nowrap;
	border-radius: 10px 10px 0 0;
}

.page-manager .page-data .blocks-wrapper button.small {
	font-size: 11px;
	border-radius: 5px;
}

.page-manager .page-data .block-container {
	position: relative;
}

.page-manager .page-data .block-container .block-actions {
	text-align: right;
	padding: 5px 5px 0;
	white-space: nowrap;
}

.page-manager .page-data .block-container .bt-settings {}

.page-manager .page-data .block-container .bt-remove {}

.page-manager .page-data .block-container .drag-icon {
	display: inline-block;
	top: 3px;
	position: relative;
}

.page-manager .page-data .block-container .drag-icon:hover {
	opacity: 0.5;
}

.page-manager .page-data .block-container .ui-state-highlight {
	height: 40px;
	background: #eee;
	border: 1px solid #ddd;
	margin: 5px;
}

.page-manager .page-data .block-container ul {
	display: table;
	width: 100%;
	border-spacing: 5px;
}

.page-manager .page-data .block-container li {
	height: 75px;
	width: 2%;
	display: table-cell;
	border: 1px solid #ccc;
	margin: 5px;
	position: relative;
	vertical-align: top;
	border-radius: 10px;
}

.page-manager .page-data .block {
	position: relative;
	min-height: 40px;
	width: calc(100% - 12px);
	border: 1px solid #ccc;
	margin: 5px;
	border-radius: 10px;
}

.page-manager .page-data .block.active-0 {
	border: 1px dotted #D02428;
}

.page-manager .page-data .block .block-actions {
	text-align: right;
	padding: 5px 5px 0;
	white-space: nowrap;
}

.page-manager .page-data .block .drag-icon {}

.page-manager .page-data .block .block-title {
	padding: 5px;
	font-size: 13px;
	font-weight: bold;
}


.cms-page-view img {
	width: 100%;
	height: auto;
}

/* CATEGORY MANAGER */

/* EVENTS
 * =====================================================================
 * O CALENDÁRIO DE EVENTOS (Pedro, 2026-10-02: «modernizar o layout»).
 *
 * Duas peças lado a lado: o calendário (FullCalendar 2.3.2) num cartão, e o
 * painel do evento, que o index.phtml anima de 0 para 340px. Era uma
 * `display: table` com o painel a 10px de padding e borda — a 0px de largura
 * ficava um fio visível à direita; agora o painel só tem moldura quando tem
 * conteúdo (`:not(:empty)`, o close faz `.html("")`).
 *
 * O FullCalendar carrega o seu CSS DEPOIS deste ficheiro (admin.phtml), por
 * isso tudo aqui vai debaixo de `.calendar-container` — é a especificidade
 * que ganha, não a ordem. ⚠️ O fullcalendar.js é um ficheiro corrigido à
 * mão para o jQuery 3: aqui só se mexe no aspecto, nunca na lib.
 * ===================================================================== */
.events {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	/* a mesma folga dos dois lados que há entre o calendário e o painel —
	   à esquerda o cartão colava ao menu (Pedro, 2026-10-02) */
	padding: 16px;
	box-sizing: border-box;
}

.calendar-container {
	flex: 1;
	min-width: 0;
	padding: 0;
}

.calendar-container #calendar {
	padding: 16px 20px 20px;
	background: #fff;
	border: 1px solid #E6E9ED;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.calendar-container .fc-view-container {
	padding: 0;
	background: transparent;
}

/* ---- a barra de cima: navegação | título | vistas ---- */
.calendar-container .fc-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.calendar-container .fc-toolbar .fc-left,
.calendar-container .fc-toolbar .fc-right {
	float: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.calendar-container .fc-toolbar .fc-center {
	flex: 1;
	display: block;
	text-align: center;
}

.calendar-container .fc-toolbar .fc-left { order: 1; }
.calendar-container .fc-toolbar .fc-center { order: 2; }
.calendar-container .fc-toolbar .fc-right { order: 3; }
.calendar-container .fc-toolbar .fc-clear { display: none; }

.calendar-container .fc-toolbar h2 {
	margin: 0;
	color: #1F2937;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.calendar-container .fc-toolbar h2::first-letter {
	text-transform: uppercase;
}

.calendar-container .fc .fc-toolbar > * > * {
	float: none;
	margin-left: 0;
}

.calendar-container .fc-toolbar .fc-button {
	height: 34px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #D7DBE0;
	border-radius: 8px;
	background: #fff;
	background-image: none;
	box-shadow: none;
	color: #374151;
	font-size: 13px;
	font-weight: 500;
	text-shadow: none;
}

.calendar-container .fc-toolbar .fc-button:hover {
	background: #F3F4F6;
	color: #1F2937;
}

.calendar-container .fc-toolbar .fc-button.fc-state-disabled {
	opacity: .45;
	cursor: default;
}

.calendar-container .fc-toolbar .fc-button.fc-state-disabled:hover {
	background: #fff;
}

/* ‹ › — um par colado, com setas desenhadas (o glifo do FC desalinhava) */
.calendar-container .fc-toolbar .fc-left .fc-button-group {
	display: inline-flex;
}

.calendar-container .fc-toolbar .fc-prev-button,
.calendar-container .fc-toolbar .fc-next-button {
	width: 36px;
	padding: 0;
}

.calendar-container .fc-toolbar .fc-prev-button {
	border-radius: 8px 0 0 8px;
}

.calendar-container .fc-toolbar .fc-next-button {
	margin-left: -1px;
	border-radius: 0 8px 8px 0;
}

.calendar-container .fc-toolbar .fc-button .fc-icon {
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 auto;
	top: 0;
	background-color: currentColor;
}

.calendar-container .fc-toolbar .fc-button .fc-icon::after {
	content: none;
}

.calendar-container .fc-toolbar .fc-icon-left-single-arrow {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.calendar-container .fc-toolbar .fc-icon-right-single-arrow {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Mês | Semana | Dia — um selector segmentado */
.calendar-container .fc-toolbar .fc-right .fc-button-group {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: #F1F3F5;
	border-radius: 10px;
}

.calendar-container .fc-toolbar .fc-right .fc-button {
	height: 28px;
	padding: 0 14px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: #6B7280;
}

.calendar-container .fc-toolbar .fc-right .fc-button:hover {
	background: rgba(255, 255, 255, .6);
	color: #1F2937;
}

.calendar-container .fc-toolbar .fc-right .fc-button.fc-state-active {
	background: #fff;
	color: #1F2937;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .14);
}

/* ---- a grelha ---- */
.calendar-container .fc-unthemed th,
.calendar-container .fc-unthemed td,
.calendar-container .fc-unthemed thead,
.calendar-container .fc-unthemed tbody,
.calendar-container .fc-unthemed .fc-divider,
.calendar-container .fc-unthemed .fc-row,
.calendar-container .fc-unthemed .fc-popover {
	border-color: #ECEEF1;
}

.calendar-container .fc-unthemed .fc-divider {
	background: #F7F8FA;
}

.calendar-container .fc-day-header {
	padding: 9px 0;
	background: #FAFAFB;
	color: #6B7280;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.calendar-container .fc-basic-view td.fc-day-number {
	padding: 7px 9px;
	color: #374151;
	font-size: 12px;
	font-weight: 500;
}

.calendar-container .fc-basic-view td.fc-other-month {
	background: #FAFAFB;
}

.calendar-container .fc-basic-view td.fc-day-number.fc-other-month {
	color: #C0C5CC;
	background: transparent;
}

.calendar-container .fc-unthemed .fc-today {
	background: #F5F3FF;
}

/* na vista Dia a coluna é só uma: pintá-la toda era pintar o ecrã */
.calendar-container .fc-agendaDay-view .fc-unthemed .fc-today,
.calendar-container .fc-unthemed .fc-agendaDay-view .fc-today {
	background: transparent;
}

.calendar-container .fc-basic-view td.fc-day-number.fc-today {
	color: #6d28d9;
	font-weight: 700;
	background: transparent;
}

/* agenda (Semana e Dia): eixo das horas discreto, meias-horas pontilhadas */
.calendar-container .fc-axis {
	color: #9CA3AF;
	font-size: 11px;
}

.calendar-container .fc-day-grid .fc-axis {
	vertical-align: middle;
	color: #6B7280;
}

.calendar-container .fc-time-grid .fc-slats td {
	height: 2.2em;
}

.calendar-container .fc-time-grid .fc-slats .fc-minor td {
	border-top-color: #F3F4F6;
}

.calendar-container .fc-highlight {
	background: #8b5cf6;
	opacity: .14;
}

/* os eventos (a cor de fundo é a do evento, vem do FullCalendar) */
.calendar-container .fc-event {
	padding: 2px 6px;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .14);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
}

.calendar-container .fc-time-grid-event {
	border-left: 3px solid rgba(0, 0, 0, .18);
}

.calendar-container .fc-more {
	color: #6d28d9;
	font-weight: 600;
}

/* ---- o painel do evento ---- */
.events .events-edition-container {
	flex: none;
	width: 0;
	/* ⚠️ `clip` e não `hidden`: corta na horizontal (a animação da largura)
	   SEM fazer do painel um contentor de scroll. Com `overflow-y: auto` o
	   painel passava a ser o "scroller" do `sticky` da barra dos botões — e
	   como quem rola é a JANELA, a barra ficava presa a um painel parado e
	   não acompanhava (Pedro, 2026-10-02). Pela mesma razão a altura fixa
	   que o resizeCalendar() do page.js lhe põe é anulada: o painel cresce
	   com o conteúdo e é a janela que rola. */
	overflow-x: clip;
	overflow-y: visible;
	height: auto !important;
	padding: 0;
	border: 0;
	background: transparent;
}

.events .events-edition-container:not(:empty) {
	background: #fff;
	border: 1px solid #E6E9ED;
	border-radius: 12px;
	box-shadow: 0 6px 20px -8px rgba(16, 24, 40, .18);
}

/* durante a animação o conteúdo não encolhe abaixo de 300px (o painel
   corta-o); aberto, ocupa o que sobra da barra de rolamento — com 340px
   fixos a barra tapava o «Guardar» */
.events .events-edition-container > * {
	width: auto;
	min-width: 300px;
	box-sizing: border-box;
}

.events .event-form {
	padding: 0;
}

/* os botões numa barra no topo do painel, encostados à direita — e PRESA
   ao topo quando o painel rola (Pedro, 2026-10-02: sem isto era preciso
   subir tudo para voltar a gravar) */
.events .event-form > .top-actions {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	margin: 0;
	padding: 12px 14px;
	border-bottom: 1px solid #ECEEF1;
	border-radius: 12px 12px 0 0;
	background: #FAFAFB;
	text-align: right;
}

.events .event-form > .top-actions button {
	height: 30px;
	margin: 0;
	padding: 0 12px;
	border-radius: 7px;
	font-size: 12.5px;
}

/* as secções, planas: dentro de um cartão estreito, cartões dentro do
   cartão eram ruído — fica um rótulo pequeno e um traço entre elas */
.events .event-form .form-node-group.form-section {
	margin: 0;
	padding: 0 16px 10px;
	border: 0;
	border-bottom: 1px solid #ECEEF1;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.events .event-form .form-node-group.form-section:last-of-type {
	border-bottom: 0;
}

.events .event-form .form-node-group.form-section > p.separator {
	margin: 0 -16px 6px;
	padding: 12px 16px 4px 34px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #6B7280;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.events .event-form .form-node-group.form-section > .form-group-head::before {
	left: 17px;
	width: 5px;
	height: 5px;
	margin-top: -2px;
	border-width: 0 1.5px 1.5px 0;
}

.events .event-form .form-node-group.form-section > .form-group-head:hover {
	background: transparent;
	color: #1F2937;
}

.events .event-form .field {
	padding: 5px 0;
}

/* DATAGRID */
/* =====================================================================
 * A BARRA DE TÍTULO DE UMA LISTA
 *
 * Era posicionamento absoluto com um `top` a !important: o título e os
 * botões não partilhavam linha de base e a altura era um número mágico.
 * Passa a ser uma linha flex — o título à esquerda, as acções à direita, e
 * a altura sai do conteúdo.
 * ===================================================================== */

.datagrid-top {
	margin: 25px 15px 0;
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	min-height: 33px;
	border-radius: 19px 19px 0 0;
	background: #fff;
	padding: 20px 15px 14px;
}

.datagrid-top .name {
	margin: 0;
	font-size: 19px;
	line-height: 1.2;
	color: #2E3238;
	text-transform: none;
	background: url(../images/i_list.png) no-repeat center left;
	padding-left: 35px;
	font-weight: 500;
	margin-right: 10px;
}

.datagrid-top .actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* =====================================================================
 * A CALHA DE CONTROLOS DE UMA LISTA
 *
 * Antes era texto solto numa faixa branca larga: o âmbito, dois comandos em
 * cinzento-claro que pareciam desactivados, dois selects de tamanhos
 * diferentes e um pager mais acima do que tudo o resto. Passa a ser UMA
 * calha — uma superfície só, com os controlos todos a 28px e agrupados por
 * separadores finos: âmbito | vistas | acção em massa · · · página | pager.
 * ===================================================================== */

.datagrid-rail {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 6px 8px;
	margin-bottom: 12px;
	background: #F6F7F9;
	border: 1px solid #E3E6EA;
	border-radius: 10px;
}

.datagrid-rail .rail-spacer {
	flex: 1 1 20px;
	min-width: 0;
}

.datagrid-config {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

/* Numa instalação sem âmbito e sem colunas escondidas este `<p>` sai vazio:
   sem isto deixava um intervalo a abrir a calha sem nada lá dentro. */
.datagrid-rail .datagrid-config:empty {
	display: none;
}

/* Os separadores entre grupos. São um traço PRÓPRIO — pô-los como
   `border-left` no controlo mudava-lhe a moldura em vez de o separar. */
.datagrid-rail .mass-actions::before,
.datagrid-rail .page-size::before,
.datagrid-rail .pager-container::before {
	content: "";
	flex: 0 0 1px;
	align-self: center;
	width: 1px;
	height: 18px;
	margin-right: 2px;
	background: #DDE1E6;
}

/* --- âmbito: o rótulo e o selector são UM objecto, não dois --- */

.datagrid-rail .datagrid-scope {
	display: inline-flex;
	align-items: stretch;
	height: 28px;
	margin: 0;
	gap: 0;
	background: #fff;
	border: 1px solid #D7DBE0;
	border-radius: 8px;
	overflow: hidden;
	cursor: auto;
}

.datagrid-rail .datagrid-scope label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0 10px;
	border: none;
	border-right: 1px solid #E3E6EA;
	background: #EEF1F4;
	font-size: 11px;
	font-weight: 600;
	color: #6B7280;
	white-space: nowrap;
}

.datagrid-rail .datagrid-scope .select2-container .select2-choice {
	height: 26px;
	line-height: 26px;
	border: none;
	border-radius: 0;
	background: #fff;
	font-size: 13px;
	color: #3C4048;
}

/* --- "Mais filtros" e "Colunas": botões, porque é o que são --- */

.datagrid-rail .rail-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #D7DBE0;
	border-radius: 8px;
	color: #4A4F58;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}

.datagrid-rail .rail-button:hover {
	background: #EEF1F4;
	border-color: #BEC4CC;
	color: #2E3238;
}

.datagrid-rail .rail-button em {
	font-size: 13px;
	color: #8A919B;
}

/* Aberto = carregado. */
.datagrid-rail .rail-button.expanded {
	background: #2E3238;
	border-color: #2E3238;
	color: #fff;
}

.datagrid-rail .rail-button.expanded em {
	color: rgba(255,255,255,0.65);
}

/* A estreitar a lista por um filtro que não se vê: tem de se notar. */
.datagrid-rail .rail-button.is-active {
	box-shadow: inset 0 0 0 1px #75ac1e;
	border-color: #75ac1e;
}

/* --- selects da calha --- */

.datagrid-rail select {
	height: 28px;
	padding: 0 8px;
	border: 1px solid #D7DBE0;
	border-radius: 8px;
	background: #fff;
	color: #4A4F58;
	font-size: 13px;
	vertical-align: middle;
}

/* O botão que uma acção em massa faz aparecer (aplicar um valor à selecção)
   entra na calha e tem de ter a mesma medida de tudo o resto. */
.datagrid-rail button {
	height: 28px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid #D7DBE0;
	border-radius: 8px;
	background: #fff;
	color: #4A4F58;
	font-size: 13px;
	font-weight: 500;
	line-height: 26px;
	text-transform: none;
	transition: background .12s, border-color .12s, color .12s;
}

.datagrid-rail button:hover {
	background: #EEF1F4;
	border-color: #BEC4CC;
	color: #2E3238;
}

.datagrid-rail .mass-action-element {
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}

/* Em ecrãs estreitos a calha parte-se em duas linhas em vez de empurrar o
   pager para fora: o espaçador desaparece e o pager encosta à direita. */
@media only screen and (max-width: 1100px) {
	.datagrid-rail .rail-spacer { flex-basis: 100%; height: 0; }
	.datagrid-rail .pager-container { margin-left: auto; }
}

/* A moldura da lista. NÃO é o scroller: quem faz scroll é o
   `.datagrid-scroll` cá dentro, para que arrastar a barra horizontal
   desloque a tabela e deixe a calha de controlos quieta. A altura máxima
   fica aqui e a coluna flex distribui-a: calha ao natural, tabela no resto. */
.datagrid-container {
	padding: 18px 15px;
	background: #fff;
	margin: 0 15px 15px;
	border: 0px solid #E5E5E5;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 270px);
	border-radius: 0 0 19px 19px;
}

/* O scroller: só a tabela. `min-height: 0` porque um item flex não encolhe
   abaixo do conteúdo sem isso — e sem encolher nunca há scroll vertical. */
.datagrid-container .datagrid-scroll {
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	overflow: auto;
}

/* (os antigos "links" cinzentos da linha de configuração deram lugar aos
   `.rail-button` acima — ficam só os que não estejam numa calha) */
.datagrid-container .datagrid-config span:not(.datagrid-scope):not(.rail-button) {
	margin-right: 16px;
	cursor: pointer;
	font-size: 13px;
	color: #BEC0CD;
	vertical-align: middle;
}

.datagrid-container .cols-config {
	margin: 0 0 12px;
	display: none;
}

.datagrid-container .cols-config .cols {
	border: 1px solid #E3E6EA;
	padding: 12px;
	background: #FBFCFD;
	border-radius: 10px;
}

.datagrid-container .cols-config .cols label {
	display: block;
	white-space: nowrap;
	font-size: 12px;
	border: none;
	padding: 0;
}

.datagrid-container .cols-config .cols label * {
	vertical-align: middle;
}

.datagrid-container .cols-config .cols label input {
	width: auto;
	display: inline-block;
}

.datagrid-container .cols-config .cols .reset-cols {
	cursor: pointer;
	margin-bottom: 10px;
}

.datagrid-container .cols-config .cols .reset-cols:hover {
	text-decoration: underline;
}

.datagrid-container .cols-config .cols li {
	display: inline-block;
	margin-right: 10px;
	width: 15%;
}

@media only screen and (max-width: 1300px) {
	.datagrid-container .cols-config .cols li {
		width: 20%;
	}
}

@media only screen and (max-width: 1000px) {
	.datagrid-container .cols-config .cols li {
		width: 25%;
	}
}

.datagrid-container .cols-config .cols li:first-child {
	display: block;
	margin-right: 0;
	width: 100%;
}

.datagrid-container .hidden-filters {
	display: none;
	border: 1px solid #E3E6EA;
	padding: 12px 12px 2px;
	background: #FBFCFD;
	margin: 0 0 12px;
	border-radius: 10px;
}

.datagrid-container .hidden-filters .title:hover {
	color: #999;
}

.datagrid-container .hidden-filters .title em {
	font-size: 16px;
}

.datagrid-container .hidden-filters .filter {
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 10px;
}

.datagrid-container .hidden-filters .filter span {
	display: block;
	font-size: 12px;
}

.datagrid-container .hidden-filters .filter select,
.datagrid-container .hidden-filters .filter input {
	border: 1px solid #D7DBE0;
	padding: 5px 8px;
	width: 150px;
	border-radius: 8px;
	font-size: 13px;
}

.datagrid-container .mass-actions {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}

.datagrid-container .page-size {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}

.datagrid-container .page-size label {
	font-size: 11px;
	font-weight: 600;
	color: #6B7280;
	margin: 0;
	border: none;
	padding: 0;
	white-space: nowrap;
}

.datagrid-container .page-size select {
	width: auto;
}

/* Fora do scroller, é sempre visível: dispensa o `sticky` (que só prendia no
   eixo vertical) e o alargamento que tapava o padding do container. */
.datagrid-container .datagrid-header-actions {
	flex: 0 0 auto;
	background: #fff;
	box-sizing: border-box;
	padding-top: 2px;
}

.datagrid {
	font-size: 12px;
	border-collapse: collapse;
}

.datagrid .actions {
	position: relative;
	width: 100%;
}

/* Cola ao topo do `.datagrid-scroll`. Era `top: 13px` para passar por baixo
   da calha sticky; a calha saiu do scroller, o desvio deixou de fazer falta. */
.datagrid thead {
	background-color: #000;
	position: sticky;
	top: 0;
	z-index: 2;
}

.datagrid thead tr:last-child th {
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}

.datagrid th,
.datagrid td {
    border-right: 1px solid #e0e0e0;
    border-top: none;
    border-bottom: none;
}

.datagrid th:last-child,
.datagrid td:last-child {
    border-right: none;
}

/* Um comando segmentado: os quatro saltos e o intervalo dentro da mesma
   moldura, em vez de quatro quadrados soltos com o texto no meio. */
.datagrid-container .pager-container {
	float: none;
	position: relative;
	height: auto;
	width: auto;
	margin: 0;
	display: inline-flex;
	align-items: center;
}

.datagrid-container .pager {
	display: inline-flex;
	align-items: stretch;
	height: 28px;
	font-size: 13px;
	background: #fff;
	border: 1px solid #D7DBE0;
	border-radius: 8px;
	overflow: hidden;
}

/* O intervalo em fluxo normal: com `inline-flex` o "de 9" ficava numa linha
   de base própria, mais alta do que o "1–9" ao lado. */
.datagrid-container .pager strong {
	display: inline-block;
	height: 26px;
	line-height: 26px;
	margin: 0;
	padding: 0 10px;
	border-left: 1px solid #E3E6EA;
	border-right: 1px solid #E3E6EA;
	color: #3C4048;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.datagrid-container .pager strong .of {
	margin-left: 4px;
	font-weight: 400;
	color: #8A919B;
}

.datagrid-container .pager > span {
	position: relative;
	display: inline-block;
	border: none;
	height: 26px;
	width: 30px;
	background: transparent;
	vertical-align: top;
	margin: 0;
	cursor: pointer;
	border-radius: 0;
	transition: background-color .12s;
}

.datagrid-container .pager > span:hover {
	background-color: #EEF1F4;
}

/* ⚠️ `> span`: só os quatro botões de salto são filhos DIRECTOS do `.pager`.
   O intervalo tem um `<span class="of">de 3</span>` dentro do `<strong>` —
   com `.pager span` ele também levava uma seta desenhada por cima e um
   hover que não fazia nada. (QA da P4.)

   As setas são DESENHADAS, não são imagens. Os PNG de 12px ficavam
   esbatidos ao lado do resto da calha e não acompanham a cor — a seta agora
   escurece com o rato, como qualquer outro comando. */
.datagrid-container .pager > span::before,
.datagrid-container .pager > span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border: 2px solid #5B6270;
	border-width: 2px 2px 0 0;
}

.datagrid-container .pager > span:hover::before,
.datagrid-container .pager > span:hover::after {
	border-color: #2E3238;
}

/* Um passo: uma seta só. */
.datagrid-container .pager > span.pager-next::after,
.datagrid-container .pager > span.pager-prev::after {
	display: none;
}

.datagrid-container .pager > span.pager-next::before {
	transform: translate(-60%, -50%) rotate(45deg);
}

.datagrid-container .pager > span.pager-prev::before {
	transform: translate(-40%, -50%) rotate(-135deg);
}

/* Primeira e última: duas setas, uma a seguir à outra. */
.datagrid-container .pager > span.pager-last::before {
	transform: translate(calc(-50% - 3px), -50%) rotate(45deg);
}

.datagrid-container .pager > span.pager-last::after {
	transform: translate(calc(-50% + 3px), -50%) rotate(45deg);
}

.datagrid-container .pager > span.pager-first::before {
	transform: translate(calc(-50% - 3px), -50%) rotate(-135deg);
}

.datagrid-container .pager > span.pager-first::after {
	transform: translate(calc(-50% + 3px), -50%) rotate(-135deg);
}

.datagrid th {
	font-weight: normal;
	padding: 4px 4px;
}

.datagrid .sorters th {
	padding: 18px 14px 5px;
}

.datagrid th.filter {
	padding: 0 14px 5px;
}

.datagrid .no-sort {
	display: block;
	color: #fff;
	text-transform: uppercase;
}

.datagrid .sorter {
	cursor: pointer;
	display: block;
	background: url(../images/datagrid_nosort.png) no-repeat center right 5px;
	color: #fff;
	text-transform: none;
	padding-right: 17px;
	font-size: 14px;
}

.datagrid .sorter.asc {
	background-image: url(../images/datagrid_asc.png);
	color: #fff;
}

.datagrid .sorter.desc {
	background-image: url(../images/datagrid_desc.png);
	color: #fff;
}

.datagrid .filter {}

.datagrid .filter select,
.datagrid .filter input {
	width: calc(100% - 8px);
	padding: 4px;
	border: 1px solid #fff;
	background: #fff;
	border-radius: 6px;
}

.datagrid .filter input.datepicker {
	width: 120px;
	display: block;
	margin-bottom: 3px;
}

.datagrid .row td {
	padding: 5px;
	border-top: 1px solid #eff3f4;
	font-size: 12px;
}

.datagrid .row td input {
	border-radius: 6px;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 5px;
}

.datagrid .row.odd {
	background: #eff3f4;
}

.datagrid .row.highlight {
	background: #c5d5f9;
}

.datagrid .row.disabled {
	opacity: 0.5;
}

.datagrid .row:hover {
	background: #e4e4e4;
}

.datagrid .row.highlight:hover {
	background: #c5d5f9;
}

.datagrid .row.link {
	cursor: pointer;
}

.datagrid .drag-icon {
	float: right;
}

.datagrid .footer td {
	font-weight: bold;
	font-size: 15px;
	white-space: nowrap;
}

.datagrid .row label {
	all: unset;
}

.datagrid .row label input {
	width: auto;
	display: inline-block;
}

.datagrid .editable-field .current-value {
	/* min-height: 50px; */
	min-width: 80px;
}

.datagrid .editable-field .editable-value {
	display: none;
}

.datagrid .editable-field .editable-value .actions {
	text-align: center;
	white-space: nowrap;
}

.datagrid .editable-field .editable-value input {
	border: 1px solid #ccc;
	padding: 4px;
	width: calc(100% - 10px);
	background: #fff;
}

.datagrid-container .select2-container {
	width: 100%;
}

.datagrid-container .select2-container .select2-choice {
	border-radius: 0;
	border: 1px solid #ccc;
	background: #fff;
	height: 24px;
	line-height: 24px;
	border-radius: 6px;
}

.datagrid-container .select2-container .select2-choice .select2-arrow b {
	position: relative;
	top: 3px;
}

.datagrid-container .select2-container .select2-choice>.select2-chosen {
	color: #000 !important;
	font-weight: normal;
	font-size: 13px;
	font-family: "Ubuntu", sans-serif;
	letter-spacing: 0px;
}

.datagrid-container .select2-container .select2-choice abbr {
	right: 3px;
	top: 5px;
	z-index: 9999;
}

.select2-drop {
	min-width: 150px !important;
}

.datagrid .log-data .data-container {
	font-size: 11px;
	background: #fff;
	border: 1px solid #ddd;
	padding: 2px;
	max-height: 53px;
	overflow: hidden;
	transition: .3s all;
}

.datagrid .log-data.expanded .data-container {
	max-height: 300px;
	overflow: auto;
}

.datagrid .log-data>span {
	display: block;
	font-size: 11px;
	cursor: pointer;
	text-decoration: underline;
}

.datagrid .log-data>span.view-less {
	display: none;
}

.datagrid .log-data.expanded>span.view-less {
	display: block;
}

.datagrid .log-data.expanded>span.view-all {
	display: none;
}

/* HTML CONFIRM */
/* ⚠️ ACIMA DA CAIXA. Uma pergunta é modal: se ficar por baixo de alguma coisa,
   o ecrã pede uma resposta que ninguém consegue dar. Estava em 8999 e a
   `.wizard-container` está em 9999 — qualquer confirmação aberta com uma caixa
   no ecrã nascia escondida atrás dela. Apanhado na QA do Office_Popup (ponto 5,
   2026-09-29) no aviso de alterações por gravar, mas o defeito é ANTIGO: atinge
   o "Apagar" dos 11 wizards declarados que o têm.
   O espaço, medido: 9999 é a caixa e a `.message-box`, 10000 é o
   `.iv-note-modal`, 99999 é o `.tom08-export-overlay` (cifra das exportações,
   que não coexiste com isto). */
.confirm-overlay {
	background: rgba(0, 0, 0, 0.3);
	position: fixed;
	z-index: 10001;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
	left: 0;
}

.confirm-box {
	background: #fff;
	border-radius: 5px;
	padding: 10px;
	width: 590px;
	margin: 0 auto;
	margin-top: 15%;
}

.confirm-box .title {
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	display: block;
	font-size: 16px;
	font-weight: bold;
}

.confirm-box.success .title {
	padding: 5px;
}

.confirm-box.warning .title {
	padding: 5px;
}

.confirm-box .message {
	display: block;
	font-size: 16px;
	margin-bottom: 15px;
}

.confirm-box .actions {
	text-align: center;
}

/* Amostra da letra no campo de família (2026-09-11) */
.font-sample { margin-top: 6px; padding: 8px 10px; border: 1px solid #e3e5e8; border-radius: 3px; background: #fff; font-size: 17px; line-height: 1.3; color: #1d2125; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-sample.is-base { color: #9aa0a6; }

/* Construtor de degradé do painel de tokens/rows (2026-09-11) */
.grad-builder { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.grad-builder select, .grad-builder input[type=number] { padding: 4px 6px; font-size: 12px; border: 1px solid #c3c7cc; border-radius: 3px; background: #fff; }
.grad-builder input[type=number] { width: 66px; }
.grad-builder input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid #c3c7cc; border-radius: 3px; background: #fff; cursor: pointer; }
.grad-builder .btn { padding: 4px 8px; font-size: 11px; }
.grad-palette { display: inline-flex; gap: 3px; align-items: center; margin-left: 2px; }
.grad-sw { width: 20px; height: 20px; padding: 0; border: 1px solid #c3c7cc; border-radius: 3px; cursor: pointer; }
.grad-sw:hover { border-color: #1f7a3d; }
.grad-preview { flex: 1 1 90px; min-width: 90px; height: 26px; border: 1px solid #d7dade; border-radius: 3px; background-color: #fff; }

/* Rejeitar proposta — conteúdo dentro do .confirm-box (2026-09-11) */
.tp-reject { text-align: left; font-size: 13px; }
.tp-reject .tp-intro { margin: 0 0 8px; font-size: 13px; color: #40464d; }
.tp-reject .tp-kill { margin: 0 0 12px; padding-left: 20px; }
.tp-reject .tp-kill li { margin-bottom: 4px; line-height: 1.4; color: #a3384a; }
.tp-reject .tp-keep { margin: 0 0 8px; padding: 8px 10px; background: #f2f6f3; border-left: 3px solid #1f7a3d; font-size: 12px; line-height: 1.45; color: #40464d; }
.tp-reject .tp-final { margin: 0; font-size: 12px; font-weight: bold; color: #a3384a; }

/* Nova proposta do tema — conteúdo dentro do .confirm-box (2026-09-11) */
.tp-proposal { text-align: left; font-size: 13px; }
.tp-proposal .tp-intro { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #40464d; }
.tp-proposal .tp-legend { display: block; font-weight: bold; font-size: 13px; margin-bottom: 6px; }
.tp-degree { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid #d7dade; border-radius: 4px; cursor: pointer; background: #fff; }
.tp-degree:hover { border-color: #1f7a3d; }
.tp-degree input { margin: 2px 0 0; flex: 0 0 auto; }
.tp-degree-body { display: flex; flex-direction: column; line-height: 1.35; }
.tp-degree-body b { font-size: 13px; }
.tp-degree-body em { font-style: normal; font-size: 12px; color: #6b7178; }
.tp-note-label { display: block; margin: 12px 0 4px; font-weight: bold; font-size: 13px; }
.tp-note-label span { font-weight: normal; color: #6b7178; }
.tp-proposal textarea { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 12px; font-family: inherit; border: 1px solid #c3c7cc; border-radius: 3px; resize: vertical; }
.tp-proposal textarea:focus { border-color: #1f7a3d; outline: none; }
.tp-note-count { display: block; text-align: right; font-size: 11px; color: #9aa0a6; margin-top: 2px; }

/* HTML MESSAGE */
.message-box {
	background: #e9e9e9;
	border-radius: 5px;
	padding: 10px;
	position: fixed;
	z-index: 9999;
	max-width: 300px;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.message-box .title {
	border-bottom: 1px solid #666;
	margin-bottom: 10px;
	display: block;
	font-size: 15px;
	font-weight: bold;
}

.message-box.error {
	background: #ffe0e0;
}

.message-box.success {
	background: #defde1;
}

.message-box.warning {
	background: #ffebd9;
}

.message-box .message {
	display: block;
	font-size: 15px;
	margin-bottom: 10px;
}

.message-box .actions {
	text-align: center;
}

/* WIZARD BOX */
.wizard-container {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.wizard-container .wizard {
	width: 90%;
	height: 90%;
	margin: 2.5% auto;
	border: 0;
	background: #fff;
	border-radius: 5px;
	display: block;
	position: relative;
	overflow: hidden;
}


/* O CABEÇALHO DA CAIXA: o que ela É, à esquerda, e o fecho à direita.
   Uma ficha que se abre por cima do ecrã sem se identificar obriga quem olha
   a adivinhar pelo conteúdo — e um formulário desenhado em caixa não imprime
   título de página, justamente porque este é o sítio dele.
   Sem título (uma caixa que não o mande) fica como estava: só o fecho à
   direita, que é o que o `space-between` faz com um lado vazio. */
.wizard-container .wizard .wizard-actions {
	position: sticky;
	top: 0;
	right: 5px;
	background: #fff;
	width: 100%;
	height: 37px;
	z-index: 9;
	border-bottom: 1px solid #ccc;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px 0 30px;   /* 30px = o recuo do .loaded-html, para alinhar */
	box-sizing: border-box;
}

.wizard-container .wizard .wizard-actions .wizard-title {
	font-size: 15px;
	font-weight: bold;
	color: #333;
	text-align: left;
	padding-right: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wizard-container .wizard .wizard-actions .close {
	font-size: 30px;
}

.wizard-container .wizard .wizard-actions .close:hover {
	opacity: 0.5;
}

.wizard-container .wizard .loaded-html {
	padding: 0px 30px 20px;
	overflow: auto;
	position: relative;
	height: 100%;
	background: #fff;
}

.wizard-container .wizard .loaded-html .form{
	position: relative;
	padding-bottom: 100px;
}
.wizard-container .wizard .loaded-html .form .top-actions {
	position: sticky;
	top: 0;
	right: 0;
	background: rgba(255,255,255,0.9);
	width: 100%;
	height: 37px;
	z-index: 9;
	border-bottom: 1px solid #ddd;
	text-align: right;
	padding: 10px 0px 0;
}

.wizard-container .wizard .wizard-container .wizard {
	width: 85%;
	height: 85%;
	margin: 3.95% auto;
}


/* FORM */
.form {
	/* padding: 15px; */
}

.form .top-actions {
	text-align: right;
	/* width: calc(100% - 432px);  */
	margin-left: auto;
	margin-right: 20px;
	/* margin-bottom: -16px; */
}

.form .field {
	/* padding: 6px; */
	margin-right: 10px;
}

.form .field .tree-field {
	border: 1px solid #ccc;
	border-top: 0;
	padding: 10px;
	border-radius: 0 0 10px 10px;
}


.form .field .table-dynamic-rows{
	padding: 15px 5px;
	background-color: #f4f4f4;
	margin: 10px 0;
}

.form .field .table-dynamic-rows .insert-row td {
	background-color: #e4e4e4;
}

.form .field .table-dynamic-rows input,
.form .field .table-dynamic-rows select {
	background-color: #fff;
}

.form .field .table-dynamic-rows input.small,
.form .field .table-dynamic-rows select.small {
	width: 60px;
}

.form .field .table-dynamic-rows input.xsmall,
.form .field .table-dynamic-rows select.xsmall {
	width: 30px;
}

.form .field .table-dynamic-rows input.medium,
.form .field .table-dynamic-rows select.medium {
	width: 100px;
}

.form .field.tinymce-editor{
	border-radius: 10px;
  	border: 1px solid #e5e5e5;
 	padding: 10px;
	margin-top: 5px;
}

.form .field.tinymce-editor label {
	border: 0;
}
.form .field.tinymce-editor .mce-tinymce {
	border-radius: 10px
}


.images-list .minicolors-swatch,
.form .field .table-dynamic-rows .minicolors-swatch {
	top: 4px !important;
  	left: 4px !important;
}

.form label {
	border: 1px solid #E5E5E5;
	border-radius: 1px;
	padding: 10px;
	display: block;
	cursor: text;
	position: relative;
	/*margin-bottom: 5px;*/
	margin-top: 5px;
	border-radius: 10px
}

/* Um valor que é uma REFERÊNCIA a outro registo (o tema pai, por exemplo):
   ocupa o lugar do controlo DENTRO da caixa do campo, em vez de cair para
   baixo dela. */
.form .field label > .field-reference {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
}

.form .field label > .field-reference.is-empty {
	color: #9aa0a6;
	cursor: default;
}

.form label.number-error,
.form label.validate-error {
	border: 1px solid #C00;
}

.form label.number-error span,
.form label.validate-error span {
	color: #C00;
}

.form label.readonly {
	cursor: default;
}

.form label.readonly,
.form label:hover {
	background: #f1f1f1;
}

.dashboard .form-dashboard-filters label.readonly,
.dashboard .form-dashboard-filters label:hover {
	background: none;
}

.form label span {
	display: block;
	font-size: 14px;
	text-transform: none;
	font-weight: bold;
	color: #444;
	margin-bottom: 4px;
}

.form label textarea {
	font-size: 13px;
	color: #666;
	display: block;
	width: 100%;
	border: 0;
	background: none;
	height: 80px;
}

.form label p,
.form label input {
	font-size: 13px;
	color: #666;
	display: block;
	width: 100%;
}

.form label p {
	line-height: 15px;
}

.form label textarea:focus,
.form label input:focus {
	outline: none;
}

.form label .select2-container {
	width: auto;
	display: block;
}

.form label select.color-swatch-select {
	border: 0;
	font-size: 13px;
	color: #666;
	padding: 4px 10px;
}

.form label .select2-container .select2-choice {
	line-height: 16px;
	height: 15px;
	border: 0;
	padding: 0;
	background: #fff;
}

.form label .select2-container {
	width: auto;
	display: block;
}

.form label .select2-container .select2-search-choice-close {
	right: 3px;
	top: 2px;
	z-index: 9999;
}

.form label:hover .select2-container .select2-choice {
	background: #f1f1f1;
}

.form label .select2-container-active .select2-choice {
	box-shadow: 0 0 0 #fff;
}

.form label .select2-container .select2-choice span {
	text-transform: none;
	font-weight: normal;
	font-size: 13px;
	color: #666;
}

.form label .select2-container label {
	padding: 0;
}

.form label select:hover {
	background: #f1f1f1;
}

.form label.readonly .select2-container .select2-choice {
	background: #f1f1f1;
}

.form .error-message {
	display: block;
	color: #C00;
	font-weight: normal;
	font-size: 12px;
}

.form .tinymce-editor label {
	border-bottom: 0;
}

.form .tinymce-editor label:hover {
	background: #fff;
}

.form .tinymce-editor label span {
	margin-bottom: 0;
}

.form .tinymce-editor .help-sidebar-icon-open {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 16px;
	cursor: pointer;
}

.form label.checkbox {
	display: inline-block;
	padding: 0;
	border: 0;
}

.form label.checkbox:hover {
	background: #fff;
	cursor: pointer;
}

.form label.checkbox span {
	display: inline-block;
}

.form label.checkbox input {
	display: inline-block;
	width: 30px;
}

.form label.switcher {
	cursor: pointer;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 5px;
}

.form label.switcher span.title {
	display: inline-block;
	order: 2;
	align-content: center;
	flex: 1 1 auto;
	overflow: hidden;
}

.form label.switcher .switchery {
	margin-bottom: 2px;
	order: 1;
	display: inline-block;
}

.form .field.collaborator-switchery {
	width: calc(20% - 16px);
	display: inline-block;
}

.form .field.buttons {
	position: relative;
}

.form .field.buttons .button-container,
.form .field.buttons button {
	background-color: #fff;
	width: 48px;
	height: 48px;
	text-indent: -1000px;
	overflow: hidden;
	border: 1px solid #ccc;
	position: absolute;
	right: 6px;
	top: 6px;
}

.form .field.buttons .button-container {
	height: 55px;
	text-indent: 0;
}

.form .field.buttons button.button-2 {
	right: 64px;
}

.form .field.buttons button:hover {
	background-color: #f1f1f1 !important;
}

.form .field.button-1 label {
	width: calc(100% - 100px);
	display: inline-block;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.form #edit-block-form .field.button-1 label:not(.switcher) {
	width: calc(100% - 100px);
	display: inline-block;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.form #edit-block-form .field.button-1  label.switcher {
	display: flex;
}

.form .field.button-2 label {
	width: calc(100% - 131px);
	display: inline-block;
}

.form .field.buttons button.save {
	background: url(../images/i_save.png) no-repeat center center;
}

.form .field.buttons button.add {
	background: url(../images/i_add.png) no-repeat center center;
}

.form .field.buttons button.print {
	background: url(../images/i_print.png) no-repeat center center;
}

.form .field.buttons button.reset {
	background: url(../images/i_reset.png) no-repeat center center;
}

.form .field.buttons button.remove {
	background: url(../images/i_remove.png) no-repeat center center;
}

.form .field.buttons button.export {
	background: url(../images/i_arrow_down.png) no-repeat center center;
}

.form .field.buttons button.import {
	background: url(../images/i_arrow_up.png) no-repeat center center;
}

.form .field.buttons button.pay {
	background: url(../images/i_pay.png) no-repeat center center;
}

.form .field.buttons button.email {
	background: url(../images/i_mail2.png) no-repeat center center;
}

.form .field.buttons .button-container label {
	border: 0;
	width: 100%;
}

.form .field.buttons .button-container label.switcher span.title {
	display: block;
	position: static;
	font-size: 8px;
}


.form .date {
	border: 1px solid #E5E5E5;
	border-radius: 1px;
	padding: 10px;
	display: block;
	cursor: text;
	position: relative;
	border-radius: 10px;
	margin-top: 5px;
}

.form .date.readonly,
.form .date:hover {
	background: #f1f1f1;
	margin-top: 5px;
}

.form .datagrid-top{
	padding: 0;
	margin: 0;
	height: 50px;
}
.form .datagrid-container {
	padding: 10px;
	margin: 0;
}

/* UMA LISTA DENTRO DE UMA SECÇÃO (o `<lazy>` dentro de um `<group>` com
   rótulo — os endereços nos Dados Pessoais do parceiro; Pedro, 2026-10-02).
   ⚠️ O alinhamento: os campos começam colados à esquerda da secção e acabam
   16px antes da direita (o `margin-right` do `.form .field` mais o da
   coluna — MEDIDO no browser, não somado de cabeça). O padding de 10px do
   contentor da lista recuava-a 10px à ESQUERDA e deixava-a 6px além dos
   campos à direita. Aqui: 0 à esquerda, 16px à direita — as duas bordas batem
   com as dos campos. As listas que ocupam um separador inteiro não mudam. */
.form .form-node-group.form-section .form-lazy .datagrid-container {
	padding: 0 16px 8px 0;
}

/* O título da lista, na linha do resto do formulário: sem o ícone grande nem
   os 19px de página — um subtítulo da secção, com o peso das etiquetas dos
   campos, e um traço a separá-lo dos campos de cima. */
.form .form-node-group.form-section .form-lazy .datagrid-top {
	display: flex;
	align-items: center;
	height: auto;
	margin: 12px 16px 10px 0;
	padding: 14px 0 0;
	border: 0;
	border-top: 1px solid #e3e7eb;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* o botão da direita acaba na borda dos campos. O datagrid.js escreve um
   `&nbsp;` depois de cada botão: no flex com `gap` esse espaço é mais um
   item (12px a sobrar à direita). Aqui o espaço mede 0 e o intervalo entre
   botões é margem. */
.form .form-node-group.form-section .form-lazy .datagrid-top .actions {
	gap: 0;
	font-size: 0;
}

.form .form-node-group.form-section .form-lazy .datagrid-top .actions button {
	margin-right: 0;
}

.form .form-node-group.form-section .form-lazy .datagrid-top .actions button + button {
	margin-left: 8px;
}

.form .form-node-group.form-section .form-lazy .datagrid-top .name {
	margin: 0;
	padding: 0;
	background: none;
	color: #26313b;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
}

.dashboard .form-dashboard-filters .date.readonly,
.dashboard .form-dashboard-filters .date:hover {
	background: none;
}

.form .date .fa-calendar {
	position: absolute;
	right: 10px;
	top: 6px;
	z-index: 99;
}

.form .date .label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	color: #444;
	margin-bottom: 4px;
}

.form .date input {
	font-size: 13px;
	color: #666;
	display: block;
	width: 100%;
}

.form .date.validate-error {
	border: 1px solid #C00;
}

.form .date.validate-error span {
	color: #C00;
}

.form .legend {
	font-weight: bold;
	margin-bottom: 10px;
	font-size: 11px;
	color: #999;
}

.form .sm-textarea {
	display: none;
}

.form .separator {
	margin: 6px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 6px;
	font-weight: bold;
	font-size: 16px;
  	margin-top: 40px;
}

.form .multiple-select-field label:hover {
	background: #fff;
}

.form .multiple-select {
	width: 100%;
	border: 0;
}

.form .multiple-select:hover {
	background: #fff;
}

.form .multiple-select option {
	border-bottom: 1px solid #ddd;
	padding: 5px 2px;
	margin-right: 10px;
}

.form .multiple-select option:hover {
	background: #eee;
}

.form .multiple-select option:checked {
	background: #ddd;
}

.form .check-button {
	height: 46px;
	width: 46px;
	float: right;
	border: 1px solid #ccc;
	background: url(../images/i_uncheck.png) no-repeat center center;
	cursor: pointer;
}

.form .check-button:hover {
	background-color: #f4f4f4;
}

.field.buttons.button-1.disabled > label:first-of-type {
    pointer-events: none;
    background: #ede9e9;
    cursor: default;
}

.form .check-button.disabled {
	cursor: default;
}

.form .check-button.disabled:hover {
	background-color: #fff;
}

.form .check-button.checked {
	background-image: url(../images/i_check.png);
}

.form .tip {
	font-size: 12px;
	margin-top: 5px;
}

.select2-drop-active {
	border: 1px solid #ccc !important;
	padding: 7px !important;
}

.select2-drop-active li {
	font-size: 12px;
}

.select2-container .select2-choice .select2-arrow {
	background: none !important;
	border: 0 !important;
}

.select2-container .select2-choice .select2-arrow b {
	background-position: 0 -4px !important;
}

.select2-results .select2-highlighted {
	background: #999 !important;
}

.datepicker-dropdown {
	margin-top: 30px;
}

/* SIDEBAR HELP */
.help-sidebar {
	position: fixed;
	top: 0;
	right: -350px;
	width: 350px;
	height: 100%;
	background: #fff;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	overflow: auto;
	z-index: 9999;
	transition: .2s all;
	box-sizing: border-box;
}

.help-sidebar.visible {
	right: 0;
}

.help-sidebar .title {
	font-size: 16px;
	font-weight: bold;
	margin: 20px 0 10px 0;
}

.help-sidebar .legend {
	font-size: 14px;
	font-weight: bold;
	margin: 20px 0 10px 0;
	color: #333;
}

.help-sidebar p {
	font-size: 12px;
	margin-bottom: 10px;
}

.help-sidebar .table-info {
	margin-bottom: 20px;
}

.help-sidebar .table-info tr {}

.help-sidebar .table-info td {
	padding: 5px;
	border-bottom: 1px solid #ccc;
	font-size: 12px;
}

.help-sidebar .help-sidebar-icon-close {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
}

/* SIDEBAR */
.sidebar {
	position: fixed;
	top: 0;
	right: -80%;
	width: 80%;
	height: 100%;
	background: #fff;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	overflow: auto;
	z-index: 9999;
	transition: .3s all;
	box-sizing: border-box;
}

.sidebar.visible {
	right: 0;
}

.sidebar .title {
	font-size: 16px;
	font-weight: bold;
	margin: 20px 0 10px 0;
}

.sidebar .legend {
	font-size: 14px;
	font-weight: bold;
	margin: 20px 0 10px 0;
	color: #333;
}

.sidebar p {
	font-size: 12px;
	margin-bottom: 10px;
}

.sidebar .table-info {
	margin-bottom: 20px;
}

.sidebar .table-info tr {}

.sidebar .table-info td {
	padding: 5px;
	border-bottom: 1px solid #ccc;
	font-size: 12px;
}

.sidebar .sidebar-header {
	position: sticky;
	top: -20px;
	right: 5px;
	background: #fff;
	width: 100%;
	height: 39px;
	z-index: 9;
	text-align: right;
}

.sidebar .sidebar-header .sidebar-icon-close {
	text-align: right;
	cursor: pointer;
	font-size: 30px;
	transition: .3s all;
}

.sidebar .sidebar-header .sidebar-icon-close:hover {
	opacity: 0.5;
}

.sidebar .help-content {
	
	.main-title {
		font-size: 15px;
		font-weight: 700;
		color: #111;
		letter-spacing: 0.01em;
		padding-bottom: 14px;
		margin-bottom: 24px;
		border-bottom: 2px solid #111;
		text-transform: uppercase;
	}

	.intro {
		font-size: 13px;
		color: #555;
		line-height: 1.6;
		margin-bottom: 20px;
	  }

	.section-title {
		font-size: 13px;
		font-weight: 700;
		color: #111;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		margin-bottom: 18px;
		padding-bottom: 6px;
		border-bottom: 1px solid #ddd;
	}

	.element-card {
		background: #f9f9f9;
		border: 1px solid #e5e5e5;
		border-radius: 6px;
		padding: 18px 20px;
		margin-bottom: 14px;
	}

	.element-name {
		font-size: 13px;
		font-weight: 700;
		color: #222;
		margin-bottom: 12px;
	}

	.field-label {
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.07em;
		color: #777;
		margin-bottom: 4px;
		margin-top: 10px;
	}

	.field-label:first-of-type {
		margin-top: 0;
	}

	.field-value {
		font-size: 13px;
		color: #333;
		line-height: 1.5;
	}

	.code-block {
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 8px 12px;
		font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
		font-size: 12px;
		color: #1a1a1a;
		word-break: break-all;
		overflow-x: auto;
	}

	.preview-img {
		display: block;
		max-width: 800px;
		height: auto;
		margin-top: 6px;
		border-radius: 3px;
		background: #fff;
		border: 1px solid #e0e0e0;
		padding: 8px;
	}

}

/* IMAGES LIST */

#uploaded_images {
	overflow-x: auto;
    max-width: 100%;
}

.images-list {
	border: 1px solid #ccc;
	border-radius: 10px;
	border-collapse: separate;
	margin-top: 5px;
}

.images-list thead {
	border-bottom: 1px solid #ccc;
}

.images-list thead tr:last-child th {
    border-bottom: 1px solid #ccc;
}

.images-list th {
	padding: 5px;
	font-size: 12px;
	text-align: center;
}

.images-list td {
	padding: 2px 2px;
	border-bottom: 1px solid #ccd;
	text-align: center;
}

.images-list td.image {
	background: #f4f4f4;
}

.images-list td input.order {
	text-align: center;
	border: 1px solid #fff;
	width: 50px;
	padding: 3px;
}

.images-list td input.order:hover {
	border: 1px solid #ccc;
}

.images-list td input.order:focus {
	border: 1px solid #ccc;
	background: #eee;
}

.images-list td input,
.images-list td select {
	font-size: 14px;
	padding: 3px;
	border: 1px solid #ccc;
	border-radius: 10px;
}

.images-list td img {
	display: block;
}

.images-list td .image-rotate {
	font-size: 13px;
	color: #000;
	cursor: pointer;
}

.images-list td .image-rotate:hover {
	text-decoration: underline;
}

/* PERMISSIONS */
.permissions-container {
	padding: 10px;
	border: 1px solid #ccc;
	margin: 5px;
}

.permissions {
	font-size: 13px;
}

.permissions li {
	width: 400px;
}

.permissions li label {
	float: right;
}

.permissions ul li {
	padding-left: 10px;
	width: 390px;
}

/* CONTAINERS */
.fields-group {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.fields-group .col {
	display: table-cell;
	width: 2%;
	vertical-align: top;
}

.fields-group.cols2 .col {
	width: calc(50%);
}

/* NOTEBOOK */
.notebook {}

.notebook .notebook-title {
	padding: 23px 15px;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	white-space: nowrap;
	list-style: none;

	transform: rotateX(180deg);
}

.notebook .notebook-title li {
	transform: rotateX(180deg);
}


/* Firefox */
.notebook .notebook-title {
	scrollbar-height: thin;
}

.notebook.hidden {
	display: none;
}

.notebook .notebook-title li {
	float: left;
	font-size: 16px;
	margin-right: 20px;
	color: #444;
	cursor: pointer;
	opacity: 0.7;
	line-height: 17px;
}

.notebook .notebook-title li.active {
	opacity: 1;
	position: relative;
}

.notebook .notebook-title li.active span:last-child {
	background: url(../images/notebook_pointer.png) no-repeat;
	width: 22px;
	height: 13px;
	position: absolute;
	top: 20px;
	display: block;
	left: 50%;
	margin-left: -11px;
}





















.notebook .notebook-page .page {
	display: none;
	background: #fff;
	padding: 20px 40px 15px;
	border: 1px solid #E5E5E5;
	margin-top: -20px;
	border-radius: 10px;
}


.notebook .notebook-page .page:first-child {
	display: block;
}

.notebook.in-form {
	margin: -6px 6px 30px;
	padding: 20px;
	background: #f4f4f4;
}

.notebook.in-form .notebook-title li.active span {
	top: 18px;
}

.notebook.in-form.hidden {
	padding: 0;
}

.notebook-toggle {
	cursor: pointer;
}

.notebook-toggle span:before {
	translate: .2s all;
}

.notebook-toggle.open span:before {
	transform: rotate(180deg);
}

/* OTHERS */
.notebook .notebook-title:after {
	clear: both;
	line-height: 0;
	font-size: 0;
	content: ".";
}

/* LAYOUT */
.layout-grid {
	margin: 0 6px;
}

.layout-grid td {
	padding: 6px;
	border: 1px solid #ccc;
}

.layout-grid td .block {
	transition: .2s all;
	display: inline-block;
	background: #333;
	color: #fff;
	font-size: 12px;
	padding: 3px 5px;
	cursor: pointer;
	margin: 0 1px;
}

.layout-grid td .block:hover {
	background: #ccc;
	color: #333;
	cursor: grab;
}

.layout-grid tbody>tr td:first-child {
	width: 50px;
}

.layout-grid tbody>tr td {
	width: 33%;
}

.layout-grid tbody>tr td>span.active {
	background-color: #a6ce39;
	border-radius: 5px;
}

.layout-grid tbody>tr td>span:not(.active) {
	background-color: rgb(217 65 96) !important;
	box-shadow: inset #622c2c 0px 0px 5px 0px;
}

.layout-grid .layout-row-edit {
	font-size: 13px;
}

.layout-available-blocks {
	margin: 20px 5px;
}

.layout-available-blocks li {
	transition: .2s all;
	display: inline-block;
	background: #333;
	color: #fff;
	font-size: 12px;
	padding: 3px 5px;
	cursor: pointer;
	margin: 0 1px;
	border-radius: 5px;
}

.layout-available-blocks li:hover {
	background: #777;
}

/* AUCTIONS */
.auction-room-partner-form .number {
	display: block;
	text-align: center;
	font-size: 200px;
	font-weight: normal;
}

.auction-room-partner-form .message-container {
	display: none;
}

.auction-room-partner-form .message-container p {
	text-align: center;
	padding: 5px;
	color: #900;
	border: 1px solid #ccc;
}

.fields-group.licitation-form #submit_licitation,
.fields-group.licitation-form #submit_max_offer,
.fields-group.licitation-form #create_order {
	padding: 11px 13px;
}

.fields-group.licitation-form .col {
	vertical-align: middle;
}

@media only screen and (max-width: 1480px) {
	.dashboard .notebook .notebook-title li {
		padding: 14px 10px;
	}

	.dashboard .notebook .notebook-title {
		padding: 14px 5px 26px;
	}

	.dashboard .notebook .notebook-title li .icon {
		width: 45px;
  		height: 45px;
		line-height: 45px;
		margin-right: 10px;
		font-size: 30px;
	}

	.dashboard .notebook .notebook-title li .icon.icon-pages {
		font-size: 26px;
	}
}

@media only screen and (max-width: 1250px) {
	.dashboard .notebook .notebook-title li {
		width: calc(25% - 8px);
		font-size: 14px;
	}
}

@media only screen and (max-width: 1100px) {

	.dashboard .notebook .notebook-title li {
		font-size: 12px;
		font-weight: bold;
		margin-right: 5px;
		box-sizing: border-box;
	}

	.dashboard .notebook .notebook-title {
		padding: 14px 5px 26px;
	}

	.dashboard .notebook .notebook-title li {
		padding: 8px 8px;
	}

	.dashboard .notebook .notebook-title li .icon {
		width: 45px;
  		height: 45px;
		line-height: 45px;
		margin-right: 2px;
		font-size: 30px;
	}

	.dashboard .notebook .notebook-title li .icon.icon-pages {
		font-size: 26px;
	}

	.dashboard .form button {
		padding: 10px 5px;
	}

	.form .date .fa-calendar {
		display: none;
	}
}

.datetimepicker th.next i {
	background: url(/js/bootstrap-datetimepicker/arrow_right.png) no-repeat center center;
	display: block;
	width: 16px;
	height: 16px;
}

.datetimepicker th.prev i {
	background: url(/js/bootstrap-datetimepicker/arrow_left.png) no-repeat center center;
	display: block;
	width: 16px;
	height: 16px;
}

#edit-block-form .CodeMirror {
	width: calc(100% - 60px);
}

.edit-block-form-social-media-list .button-container {
	display: none !important;
}

.edit-block-form-social-media-list .field.button-1 label {
	width: 97%;
}

.edit-block-form-social-media-list .col:last-child label {
	width: calc(100% - 70px);
}

.border-controls-ui,
.width-slider-ui {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
}

.border-controls-ui input[type="range"] ,
.width-slider-ui input[type="range"] {
	width: 100%;
	min-width: 100px;
}

.border-controls-ui select,
.width-slider-ui select {
	border: 0;
  	padding: 5px;
	border-radius: 5px;
}

.border-controls-ui .value,
.width-slider-ui .value {
	font-weight: 600;
}

#page-navigation-container{
	display: none;
}

/* ----- AJUDA / PRÉ-VISUALIZAÇÃO DE TEMPLATE DE EMAIL ----- */
/*
 * ⚠️ O ícone que abre a barra de ajuda é `position: absolute` e vive dentro do
 * `.field` do campo (o motor põe-no lá, `help-panel="…"`). Sem um ancestral
 * POSICIONADO ia ancorar-se no primeiro que houvesse acima e aparecia no canto
 * superior direito do ecrã, longe do editor (QA da P3). O `.field` do campo que
 * o declara passa a ser esse ancestral.
 */
.form .field.field-with-help {
	position: relative;
}

.form-email-template-container .help-sidebar-icon-open,
.form-email-layout-container .help-sidebar-icon-open {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 16px;
	cursor: pointer;
}

/*
 * As "Variáveis do layout" são uma lista de `chave = valor`, uma por linha: a
 * caixa precisa de altura. O PHTML antigo dava-lha com um `style` em linha
 * (width/height), que num formulário declarativo se declara em CSS a partir da
 * classe do campo (`class="email-layout-variables"`).
 */
.form-email-layout-container .field.email-layout-variables textarea {
	height: 300px;
}

.help-sidebar .help-tag-raw {
	display: inline-block;
	font-family: monospace;
	font-size: 11px;
	background: #efe9c2;
	color: #7a6a00;
	padding: 0 5px;
	border-radius: 3px;
}

.help-sidebar .help-note-raw {
	background: #fbf7e0;
	border: 1px solid #e6dca0;
	padding: 8px;
	border-radius: 3px;
}

.help-sidebar .table-info td.help-copy-cell {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

.help-sidebar .help-copy-icon {
	cursor: pointer;
	position: relative;
}

.help-sidebar .help-copy-icon:hover {
	color: #999;
}

.help-sidebar .help-copy-icon.copied::after {
	content: "Copiado!";
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 6px;
	background: #2c3e50;
	color: #fff;
	font-size: 11px;
	font-family: sans-serif;
	padding: 2px 6px;
	border-radius: 3px;
	white-space: nowrap;
}

.email-preview-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
}

.email-preview-overlay.is-open {
	display: block;
}

.email-preview-modal {
	position: absolute;
	top: 3%;
	left: 50%;
	transform: translateX(-50%);
	width: 860px;
	max-width: 95%;
	height: 94%;
	background: #fff;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.email-preview-header {
	padding: 12px 15px;
	border-bottom: 1px solid #ddd;
	background: #f7f7f7;
}

.email-preview-titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.email-preview-titlebar strong {
	font-size: 14px;
}

.email-preview-hint {
	margin: 0 0 12px;
	color: #777;
	font-size: 12px;
}

.email-preview-params {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	flex-wrap: wrap;
}

.email-preview-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.email-preview-field label {
	font-size: 12px;
	font-weight: bold;
	color: #555;
}

.email-preview-field input,
.email-preview-field select {
	width: 132px;
	height: 34px;
	padding: 6px 10px;
	border: 1px solid #bbb;
	border-radius: 3px;
	box-sizing: border-box;
	background: #fff;
}

.email-preview-field input {
	width: 90px;
}

.email-preview-field-test {
	margin-left: 15px;
	padding-left: 20px;
	border-left: 1px solid #ddd;
}

.email-preview-field-test input {
	width: 200px;
}

.email-preview-check {
	display: inline;
	font-size: 12px;
	color: #555;
	cursor: pointer;
	white-space: nowrap;
}

.email-preview-check input {
	width: 20px;
	vertical-align: middle;
	margin-right: 4px;
}

.email-preview-params button {
	height: 34px;
}

#preview_send_test {
	position: relative;
	top: -25px;
}

.email-preview-subject {
	padding: 10px 15px;
	border-bottom: 1px solid #eee;
}

.email-preview-subject span {
	color: #555;
}

.email-preview-iframe {
	border: 0;
	width: 100%;
	flex: 1;
	background: #fff;
}

/* TOM08 — modal de exportação protegida (password mostrada 1×) */
.tom08-export-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 99999;
}

.tom08-export-box {
	max-width: 480px;
	margin: 8% auto;
	background: #fff;
	border-radius: 6px;
	padding: 24px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
	font-family: inherit;
}

.tom08-export-title {
	margin: 0 0 12px;
}

.tom08-export-intro {
	margin: 0 0 8px;
}

.tom08-export-pwd-row {
	display: flex;
	gap: 8px;
	margin: 12px 0;
}

.tom08-export-pwd {
	flex: 1;
	font-family: monospace;
	font-size: 15px;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.tom08-export-hint {
	margin: 0 0 16px;
	font-size: 12px;
	color: #666;
}

.tom08-export-actions {
	text-align: right;
}

/* TOM08 — preview de vídeo na célula de imagem do datagrid de lotes */
.lot-media-video {
	vertical-align: middle;
	object-fit: cover;
	background: #000;
}

/* Texto de ajuda por baixo de um campo de formulário (ex.: mapa de modelos Bedrock) */
.field-hint {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: #666;
}
/* ===== Auditoria de conversas do chatbot =====
   A estrutura (Pedro, 2026-10-02: «falta-lhe estrutura»): dois cartões —
   «Detalhes» à esquerda, preso ao scroll, e a «Transcrição» à direita, com
   separadores de dia, avatares e as bolhas da mesma família das dos painéis
   de IA (o cliente no azul em gradiente, o assistente em branco). */
.chat-audit {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 20px;
}
.chat-audit-meta,
.chat-audit-main {
	background: #fff;
	border: 1px solid #E6E9ED;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	overflow: hidden;
}
.chat-audit-meta { position: sticky; top: 16px; }
.chat-audit-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #ECEEF1;
	background: #FAFAFB;
	color: #2f3a44;
	font-size: 14px;
	font-weight: 700;
}
.chat-audit-count { color: #6B7280; font-size: 12px; font-weight: 500; }
.chat-audit-meta-list { margin: 0; padding: 4px 16px 8px; }
.chat-audit-meta-item { padding: 9px 0; border-bottom: 1px solid #F1F3F5; }
.chat-audit-meta-item:last-child { border-bottom: 0; }
.chat-audit-meta-label { margin: 0 0 2px; color: #6B7280; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.chat-audit-meta-value { margin: 0; color: #1F2937; font-size: 13px; font-weight: 600; word-break: break-word; }

.chat-audit-transcript { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #F7F8FA; }

/* o dia: um separador com a data ao centro */
.chat-audit-day { display: flex; align-items: center; gap: 12px; margin: 8px 0 2px; color: #6B7280; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.chat-audit-day::before,
.chat-audit-day::after { content: ""; flex: 1; height: 1px; background: #E3E7EB; }
.chat-audit-day span { padding: 3px 10px; background: #fff; border: 1px solid #E3E7EB; border-radius: 999px; }

/* uma linha = avatar + bolha; o cliente à direita (linha invertida) */
.chat-audit-row { display: flex; align-items: flex-end; gap: 10px; max-width: 82%; }
.chat-audit-row.chat-audit-user { align-self: flex-end; flex-direction: row-reverse; }
.chat-audit-row.chat-audit-assistant { align-self: flex-start; }
.chat-audit-avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}
.chat-audit-user .chat-audit-avatar { background: #DBEAFE; color: #1E40AF; }
/* o assistente: o símbolo da IA (gradiente + centelhas, os tokens dos botões btn-ai) */
.chat-audit-assistant .chat-audit-avatar { position: relative; background: var(--ai-gradient); }
.chat-audit-assistant .chat-audit-avatar::after {
	content: "";
	width: 15px;
	height: 15px;
	background-color: #fff;
	-webkit-mask: var(--ai-sparkle) center / contain no-repeat;
	mask: var(--ai-sparkle) center / contain no-repeat;
}

.chat-audit-msg { min-width: 0; padding: 9px 13px 10px; border-radius: 14px; }
.chat-audit-user .chat-audit-msg { background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); color: #fff; border-bottom-right-radius: 4px; }
.chat-audit-assistant .chat-audit-msg { background: #fff; color: #1F2937; border: 1px solid #E3E7EB; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.chat-audit-msg-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 3px; font-size: 11px; }
.chat-audit-role { font-weight: 700; }
.chat-audit-time { opacity: .7; font-variant-numeric: tabular-nums; }
.chat-audit-assistant .chat-audit-role { color: #4c1d95; }
.chat-audit-msg-body { font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.chat-audit-msg-body strong { font-weight: 700; }
.chat-audit-tools { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 6px; background: #F1F3F5; color: #4A4F58; font-size: 11px; }
.chat-audit-user .chat-audit-tools { background: rgba(255, 255, 255, .18); color: #fff; }
.chat-audit-empty { padding: 16px; color: #888; }

@media (max-width: 1000px) {
	.chat-audit { grid-template-columns: 1fr; }
	.chat-audit-meta { position: static; }
}
/* ===== Assistente de temas (motor de templating IA) ===== */
.theme-assistant { display: flex; gap: 16px; align-items: stretch; min-height: 640px; }
.theme-assistant-chat { flex: 0 0 380px; display: flex; flex-direction: column; border: 1px solid #e3e5e8; border-radius: 8px; background: #fff; overflow: hidden; }
.theme-assistant-transcript { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto; max-height: 420px; background: #f5f6f8; }
.theme-assistant-compose { padding: 12px; border-top: 1px solid #e3e5e8; }
.theme-assistant-compose .field { margin-bottom: 10px; }
.theme-assistant-compose textarea, .theme-assistant-compose select { width: 100%; box-sizing: border-box; }
.theme-assistant-busy { display: none; padding: 8px 12px; font-size: 12px; color: #555; background: #fff8e1; border-top: 1px solid #f0e2b6; }
.theme-assistant-error { display: none; padding: 8px 12px; font-size: 12px; color: #b3261e; background: #fdecea; border-top: 1px solid #f4c7c3; }
.theme-assistant-notice { margin-bottom: 12px; padding: 10px 14px; font-size: 13px; color: #5d4a12; background: #fff8e1; border: 1px solid #f0e2b6; border-radius: 8px; }
.theme-assistant-preview { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid #e3e5e8; border-radius: 8px; overflow: hidden; background: #fff; }
.theme-assistant-preview-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e3e5e8; background: #f5f6f8; }
/* seleção na barra do preview: classe .green (como os restantes botões do
   backoffice) — sem underline */
.theme-assistant-preview iframe { flex: 1 1 auto; width: 100%; border: 0; min-height: 560px; }
/* seletor de device: o iframe simula a largura do viewport (tablet/mobile
   centrados sobre fundo neutro); o ?theme_device= trata da fidelidade
   server-side (chrome por device) */
.theme-assistant-preview.device-tablet, .theme-assistant-preview.device-mobile { background: #e8eaed; }
.theme-assistant-preview.device-tablet iframe { width: 820px; max-width: 100%; margin: 0 auto; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); }
.theme-assistant-preview.device-mobile iframe { width: 390px; max-width: 100%; margin: 0 auto; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); }
.theme-assistant-preview-bar .device-sep { color: #c3c7cc; }
/* âmbito das instruções: bolha laranja LOCAL (nunca vai para a IA) + badge
   permanente junto ao campo Pedido */
.chat-scope-msg { margin: 8px 0; padding: 8px 12px; font-size: 12px; color: #7a4a00; background: #fff3e0; border: 1px solid #f5c98a; border-radius: 8px; text-align: center; }
.scope-badge { margin-left: 8px; padding: 1px 8px; font-size: 11px; font-weight: 600; color: #7a4a00; background: #fff3e0; border: 1px solid #f5c98a; border-radius: 10px; }
.theme-assistant-clear-refs { display: none; margin-top: 4px; font-size: 11px; }
/* perguntas de estilo — markup PARTILHADO pelo questionário e pela ficha do
   tema (_brief_style.phtml). O mesmo questionário não pode ter duas caras: na
   ficha só muda a DENSIDADE (secções lado a lado), nunca os controlos. */
.iv-style-fields.is-compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; align-items: start; margin-top: 6px; }
.iv-style-fields.is-compact .iv-card { margin-bottom: 0; padding: 10px 12px; background: #fafbfc; }
.iv-style-fields.is-compact .iv-card h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #5a5f66; }
.iv-style-fields.is-compact .iv-q { margin-bottom: 10px; }
.iv-style-fields.is-compact .iv-opt { padding: 4px 9px; font-size: 11px; }
.iv-style-fields.is-compact .iv-forbidden { grid-template-columns: 1fr; }
.iv-q-token { font-style: normal; font-size: 10px; font-weight: 400; color: #8a8f96; }
/* ligação em forma de botão (limpar referências) */
.iv-linkbtn { display: inline-block; margin-top: 4px; padding: 0; font-size: 11px; background: none; border: 0; color: #1f7a3d; text-decoration: underline; cursor: pointer; }

/* recap do questionário no assistente: o tema chegou preparado e ainda sem
   conversa — mostra o que ficou respondido, com atalho para rever */
.theme-brief-recap { margin: 8px 0; padding: 10px 12px; background: #f5f6f8; border: 1px solid #e3e5e8; border-radius: 8px; }
.theme-brief-recap strong { display: block; font-size: 12px; margin-bottom: 6px; }
.theme-brief-recap ul { margin: 0; padding: 0 0 0 14px; max-height: 150px; overflow-y: auto; }
.theme-brief-recap li { font-size: 11px; line-height: 1.5; color: #555; }
.theme-brief-recap-edit { display: inline-block; margin-top: 6px; font-size: 11px; color: #1f7a3d; }
/* Aviso de estrutura por criar (Pedro, 2026-09-10): distingue-se do recap
   porque NAO e um resumo do que ficou respondido — e uma accao em falta. */
.theme-brief-pending { background: #fdf6e3; border-color: #e8d9a8; }
.theme-brief-pending strong { color: #7a5c1f; }
.theme-brief-pending p { margin: 0; font-size: 11px; line-height: 1.5; color: #6b5a33; }

/* ===== QUESTIONÁRIO DO TEMA — ecrã dedicado (office/theme/interview.phtml)
   Saiu da coluna do chat quando passou a ter 17 perguntas de estilo dos
   blocos: três colunas (índice · perguntas · amostra viva), cada uma com o
   seu scroll, sem a página inteira a rolar. ===== */
.iv-screen { display: flex; gap: 16px; align-items: stretch; height: calc(100vh - 190px); min-height: 420px; }
.iv-index { flex: 0 0 190px; display: flex; flex-direction: column; gap: 2px; padding: 12px; background: #f5f6f8; border: 1px solid #e3e5e8; border-radius: 8px; overflow-y: auto; }
.iv-index-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #5a5f66; margin-bottom: 6px; }
.iv-index-link { display: block; padding: 5px 8px; font-size: 12px; color: #333; text-decoration: none; border-radius: 5px; }
.iv-index-link:hover { background: #e7eaee; }
.iv-index-hint { margin-top: 10px; font-size: 11px; line-height: 1.4; color: #777; }
.iv-body { flex: 1 1 auto; overflow-y: auto; padding-right: 4px; position: relative; }
.iv-card { margin-bottom: 12px; padding: 14px 16px; background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; }
.iv-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.iv-q { margin-bottom: 14px; }
.iv-q:last-child { margin-bottom: 0; }
.iv-q-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.iv-q-hint { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: #777; }
.iv-q textarea, .iv-q select, .iv-q input[type="text"] { width: 100%; box-sizing: border-box; }
/* select2 (norma da casa): dentro de <label> o `.form label .select2-container`
   já trata do bloco/largura; o seletor de modelo não vive num label, por isso
   leva o mesmo tratamento aqui. Nada de largura inline — o init usa
   width:'off' para o CSS mandar (ver interview.phtml). */
.form #iv_model_wrap .select2-container { width: auto; display: block; }
.iv-q > label { display: block; margin-top: 8px; }
.iv-q > label > span:first-child { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.iv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.iv-grid-2 > label > span:first-child { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.iv-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-opt { padding: 6px 10px; font-size: 12px; border: 1px solid #c3c7cc; border-radius: 16px; background: #fff; cursor: pointer; }
.iv-opt.active { background: #1f7a3d; border-color: #1f7a3d; color: #fff; }
/* TIPOGRAFIA do questionário (2026-09-11) */
.iv-select { padding: 6px 8px; font-size: 12px; border: 1px solid #c3c7cc; border-radius: 3px; background: #fff; max-width: 420px; }
.iv-select:focus { border-color: #1f7a3d; outline: none; }
.iv-type-preview { border: 1px solid #e3e5e8; border-radius: 4px; background: #fff; padding: 14px 16px; max-width: 560px; }
.iv-type-h { font-size: 22px; font-weight: 700; line-height: 1.25; margin-bottom: 6px; color: #1d2125; }
.iv-type-p { font-size: 13px; line-height: 1.6; margin: 0; color: #40464d; }
.iv-blocks { display: flex; gap: 16px; margin-top: 6px; }
.iv-block-group { flex: 1 1 0; }
.iv-block-group-title { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #555; margin-bottom: 4px; }
/* as checkboxes destes ecrãs são switchery (padrão do backoffice): o layout
   flex, a ordem (interruptor à esquerda) e o espaçamento vêm de
   `.form label.switcher`; aqui só afinamos o tamanho do texto. Uma checkbox
   nua dentro de <label> apanharia o `.form label input { width:100% }` global
   e sairia disforme — foi o defeito que o QA apanhou. */
.form .iv-body label.switcher, .form .iv-style-fields label.switcher { margin-bottom: 2px; }
.form .iv-body label.switcher span.title, .form .iv-style-fields label.switcher span.title { font-size: 12px; font-weight: 400; overflow: visible; }
.iv-block-row em { color: #999; font-style: normal; font-size: 10px; }
/* INSTÂNCIAS (Pedro, 2026-09-28): a linha deixou de ser um interruptor — tem
   o nome, quantas instâncias há e «+ Adicionar». Remover é no esquema.
   ⚠️ Classe PRÓPRIA: a `.iv-block-row` é também a dos interruptores dos
   módulos, que continuam a ser switchery. */
.iv-item-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 10px; margin-bottom: 4px; border: 1px solid #e3e5e8; border-radius: 8px; background: #fff; font-size: 12px; }
.iv-item-row.is-used { border-color: #b9d8c3; background: #f4faf6; }
.iv-item-row .title { flex: 1 1 auto; color: #33373d; }
.iv-item-row em { color: #999; font-style: normal; font-size: 10px; }
.iv-block-count { min-width: 26px; font-size: 11px; font-weight: 700; color: #1f7a3d; text-align: right; }
.iv-item-row .iv-block-add { height: 26px; padding: 0 10px; margin: 0; font-size: 12px; }
/* etiquetas do esquema que são instâncias: clicam-se para as instruções */
.iv-sc-chip[data-item] { cursor: pointer; }
.iv-sc-chip[data-item]:hover, .iv-sc-chip[data-item]:focus-visible { border-color: #1f7a3d; outline: none; }
.iv-sc-chip.is-noted::after { content: ' ✎'; color: #1f7a3d; }
/* bloco de CONTEÚDO sem instruções: o briefing manda perguntar antes de montar */
.iv-sc-chip.is-unnoted { border-style: dashed; border-color: #e6a700; }
/* respostas que chocam entre si (A1/A3/B6 da sessão web, 2026-09-28) */
.iv-sc-chip.is-conflict { border-color: #d9822b; box-shadow: inset 0 -2px 0 #f0b37e; }
/* vários blocos na mesma célula ficam lado a lado (C7) */
.iv-sc-cell.is-multi { outline: 1px dotted #b6bbc1; outline-offset: -2px; }
/* lado a lado ou por baixo (2026-09-30): o que o site vai fazer, e os botões ⇆/⇅ */
.iv-sc-cell.is-stack { flex-direction: column; outline: 1px dotted #b6bbc1; outline-offset: -2px; }
.iv-sc-arrange { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; max-width: 100%; }
.iv-sc-arrange button { min-width: 20px; height: 18px; padding: 0 3px; border: 1px solid #c3c8ce; border-radius: 3px; background: #fff; color: #555; font-size: 11px; line-height: 1; cursor: pointer; }
.iv-sc-arrange button.on { border-color: #2e7d32; background: #2e7d32; color: #fff; }
.iv-sc-arrange-ask { margin-left: 2px; font-weight: 700; color: #b35c00; }
/* ↕ no tablet/telemóvel: blocos que só aí partilham a célula — confirmar a ordem (30-09) */
.iv-sc-orderhint { padding: 0 3px; font-size: 10px; line-height: 16px; color: #b35c00; border: 1px dashed #e0a060; border-radius: 3px; cursor: help; }
.iv-note-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 24, 28, .45); }
.iv-note-box { box-sizing: border-box; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: #fff; border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, .28); }
.iv-note-title { font-size: 15px; font-weight: 700; color: #1d2125; }
.iv-note-box textarea { box-sizing: border-box; width: 100%; min-height: 120px; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.5; border: 1px solid #c3c7cc; border-radius: 8px; resize: vertical; }
.iv-note-box textarea:focus { border-color: #1f7a3d; outline: none; }
.iv-note-count { font-size: 11px; color: #8a9097; text-align: right; }
.iv-note-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.iv-note-actions button { margin: 0; }
.iv-note-spacer { flex: 1 1 auto; }
/* PERGUNTAS DO BLOCO no popup (Pedro, 2026-09-28): uma por linha, rótulo por
   cima; a caixa cresce e rola se o bloco tiver muitas (as redes) */
.iv-note-box { max-height: calc(100vh - 32px); overflow-y: auto; }
.iv-note-questions { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 12px; border-bottom: 1px solid #eef0f2; }
.iv-note-q { display: flex; flex-direction: column; gap: 4px; }
.iv-note-q-label, .iv-note-label { font-size: 12px; font-weight: 600; color: #33373d; }
.iv-note-q select, .iv-note-q input[type="text"] { box-sizing: border-box; width: 100%; height: 32px; padding: 0 8px; font: inherit; font-size: 13px; border: 1px solid #c3c7cc; border-radius: 8px; background: #fff; }
.iv-note-q select:focus, .iv-note-q input[type="text"]:focus { border-color: #1f7a3d; outline: none; }
.iv-note-q .iv-q-hint { font-size: 11px; }
.iv-net-rows { display: flex; flex-direction: column; gap: 6px; }
.iv-net-row { display: flex; gap: 6px; align-items: center; }
.iv-net-row .iv-net-name { flex: 0 0 34%; }
.iv-net-row .iv-net-url { flex: 1 1 auto; }
.iv-net-row input[type="text"] { box-sizing: border-box; height: 30px; padding: 0 8px; font: inherit; font-size: 12px; border: 1px solid #c3c7cc; border-radius: 8px; }
.iv-net-row .iv-net-del { height: 30px; padding: 0 9px; margin: 0; }
.iv-note-q .iv-net-add { align-self: flex-start; height: 26px; padding: 0 10px; margin: 0; font-size: 12px; }
.iv-note-navwarn { font-size: 12px; }
/* RAL PELA MORADA (2026-09-30, melhoria 6 da sessão web): a proposta por baixo
   do campo das entidades, no popup do bloco legal */
.iv-ral-prop { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding: 8px 10px; background: #f6f8f7; border: 1px dashed #b9cfc0; border-radius: 8px; }
.iv-ral-out { font-size: 12px; line-height: 1.45; color: #33373d; }
.iv-note-q .iv-ral-use { align-self: flex-start; height: 26px; padding: 0 10px; margin: 0; font-size: 12px; }
/* OPÇÕES POR LINHA (Pedro, 2026-09-28): a pega «⚙» à esquerda de cada faixa
   do esquema (D1) e o aspecto da linha na miniatura */
/* ⚠️ Em FLUXO (revisão 28-09): absoluta, tapava a célula esquerda e roubava
   o clique e o arrasto dos blocos; e o padding de reserva perdia-se com a
   «Altura» inline e nas barras .is-minimal */
.iv-sc-rowhandle { flex: 0 0 auto; align-self: center; margin: 0 3px 0 2px; padding: 1px 4px; font-size: 9px; line-height: 1.3; color: #5a5f66; background: rgba(255,255,255,.85); border: 1px solid #cfd4d9; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.iv-sc-cell.is-off { opacity: .35; }
.iv-sc-rowhandle:hover, .iv-sc-rowhandle:focus-visible { border-color: #1f7a3d; color: #1f7a3d; outline: none; }
.iv-sc-rowhandle.is-set { color: #1f7a3d; border-color: #9cc9aa; }
.iv-sc-bar.is-transparent { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.iv-sc-bar.is-glass { outline: 1px dashed rgba(31, 122, 61, .45); outline-offset: -1px; }
.iv-sc-bar.is-textlight .iv-sc-chip { color: #e6e8ea; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.iv-sc-bar.is-rowhidden { opacity: .35; }
.iv-note-colorline { display: flex; gap: 6px; align-items: center; }
.iv-note-colorline .iv-note-input { flex: 1 1 auto; }
.iv-note-colorpick { flex: 0 0 36px; width: 36px; height: 32px; padding: 2px; border: 1px solid #c3c7cc; border-radius: 8px; background: #fff; cursor: pointer; }
.iv-note-devices { display: flex; gap: 14px; flex-wrap: wrap; }
.iv-note-dev { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; }
.iv-note-dev input { width: auto; margin: 0; }
#iv_note_error:empty { display: none; }

/* ---- Cores e logótipo (QA Pedro 2026-08-04) ---- */
.iv-logos { display: flex; gap: 12px; margin: 4px 0 6px; }
.iv-logo-slot { flex: 1 1 0; }
.iv-logo-title { display: block; font-size: 11px; font-weight: 600; color: #5a5f66; margin-bottom: 3px; }
/* o slot de fundo escuro mostra-se ESCURO: é a única forma de ver ali mesmo
   se o ficheiro carregado é o certo para aquele fundo */
.iv-logo-drop { display: flex; align-items: center; justify-content: center; height: 64px; padding: 6px; background: #fff; border: 1px dashed #c3c7cc; border-radius: 4px; overflow: hidden; }
.iv-logo-drop.is-dark { background: #23262b; border-color: #3a3f45; }
.iv-logo-drop.is-dark .iv-logo-empty { color: #8a9097; }
.iv-logo-preview { max-width: 100%; max-height: 52px; }
.iv-logo-empty { font-size: 10px; font-style: italic; color: #b6bbc1; }
.iv-logo-drop.has-file .iv-logo-empty { display: none; }
.iv-logo-file { margin-top: 4px; font-size: 11px; }
.iv-logo-swatches { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.iv-swatch-row { display: inline-flex; gap: 4px; }
.iv-swatch { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(0,0,0,.18); border-radius: 3px; cursor: pointer; }
.iv-swatch:hover { outline: 2px solid #1f7a3d; outline-offset: 1px; }

/* campos de cor (marca e afinação) — duas coisas a corrigir:
   1. o office só estiliza inputs DENTRO de <label> (`.form label input`) e
      estes são filhos diretos do .iv-q, por isso saíam sem caixa;
   2. ⚠️ `jquery.minicolors.css` é carregado DEPOIS do styles.css (admin.phtml
      linha 22 vs 11), pelo que `.minicolors-theme-default .minicolors-swatch`
      (0,2,0) ganhava por ordem a um seletor de igual peso e a amostra ficava
      no canto, fora da caixa. Ancorar no ID da secção dá (1,1,0) e resolve
      independentemente da ordem dos ficheiros.
   Resultado: caixa igual à dos restantes campos, com a amostra DENTRO, à
   esquerda. Largura travada — um campo de cor a toda a largura do cartão
   lê-se como caixa de texto. */
#iv_sec_brand .minicolors { display: block; position: relative; width: 100%; max-width: 240px; }
#iv_sec_brand .minicolors-input {
	width: 100%; box-sizing: border-box; height: auto;
	border: 1px solid #d8d8d8; border-radius: 6px;
	padding: 7px 9px 7px 40px; background: #fff;
	font-size: 13px; line-height: 18px; color: #333; font-family: monospace;
}
#iv_sec_brand .minicolors-input:focus { border-color: #75ac1e; outline: 0; }
#iv_sec_brand .minicolors-swatch {
	position: absolute; top: 50%; left: 8px; right: auto;
	width: 22px; height: 22px; margin-top: -11px;
	border: 1px solid rgba(0, 0, 0, .25); border-radius: 4px; overflow: hidden;
}
#iv_sec_brand .minicolors-swatch .minicolors-swatch-color { border-radius: 3px; }

/* o afinador é um painel que PERTENCE à paleta, não mais uma pergunta solta */
#iv_pal_editor { margin-top: 8px; padding: 8px 10px; background: #f7f8f9; border: 1px solid #e3e5e8; border-radius: 6px; }
#iv_pal_editor .iv-q-label { margin-bottom: 4px; }
#iv_pal_editor .iv-linkbtn { margin-left: 8px; }

.iv-palette { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 2px; }
.iv-pal-item { display: flex; flex-direction: column; align-items: center; width: 62px; }
.iv-pal-chip { width: 40px; height: 28px; padding: 0; border: 1px solid rgba(0,0,0,.18); border-radius: 4px; cursor: pointer; }
.iv-pal-item.is-pinned .iv-pal-chip { outline: 2px solid #1f7a3d; outline-offset: 1px; }
.iv-pal-label { margin-top: 3px; font-size: 10px; color: #5a5f66; text-align: center; }
.iv-pal-hex { font-size: 9px; color: #9aa0a6; font-family: monospace; }

.iv-forbidden { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 4px; }
.iv-warn { display: block; margin-top: 6px; font-size: 11px; color: #b3261e; }
.iv-error { min-height: 16px; margin: 6px 0; font-size: 12px; color: #b3261e; }
.iv-actions { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; }

/* ESQUEMA DA PÁGINA: header (N linhas) · secções · rodapé (M linhas). As
   respostas de FORMA entram por CSS custom properties (o mesmo mecanismo dos
   tokens reais, à escala de uma miniatura); as de ESTRUTURA desenham
   elementos. Antes era um cartão isolado e as perguntas de chrome não tinham
   retorno visual nenhum. */
/* QA Pedro: as etiquetas dos blocos ficavam ilegíveis. A fonte subiu para 10px
   e o painel alargou em conformidade — a 300px as três colunas de cada row
   ficariam esmagadas com o texto maior. */
.iv-sample { flex: 0 0 390px; display: flex; flex-direction: column; padding: 12px; background: #f5f6f8; border: 1px solid #e3e5e8; border-radius: 8px; overflow-y: auto; }
.iv-sample-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #5a5f66; }
.iv-sample-hint { margin: 2px 0 10px; font-size: 11px; line-height: 1.4; color: #777; }
.iv-sample-viewport { background: #dfe3e7; border: 1px solid #cfd4d9; border-radius: 6px; padding: 6px; }
/* selector de device do esquema: as posições de um telemóvel só se decidem
   bem à largura de um telemóvel */
.iv-sample-devices { display: flex; gap: 4px; margin-bottom: 6px; }
.iv-dev { flex: 1 1 0; padding: 4px 6px; font-size: 10px; color: #4a5057; background: #fff; border: 1px solid #c3c7cc; border-radius: 4px; cursor: pointer; }
.iv-dev.active { background: #1f7a3d; border-color: #1f7a3d; color: #fff; }
.iv-sample-legend { display: block; margin-top: 6px; font-size: 10px; color: #7a8087; }
/* As cores do esquema saem da PALETA quando o utilizador a define (QA Pedro
   2026-08-04). Todas com FALLBACK: em paleta automática o esquema fica
   exatamente com o cinzento de sempre — o JS só escreve as vars quando há
   paleta, e apagá-las devolve o aspeto neutro sem tocar em CSS. */
.iv-sample-frame { --s-space: 24px; --s-gap: 10px; --s-radius: 6px; --s-shadow: 0 1px 3px rgba(0,0,0,.10); --s-border: 1px solid #d9dce0;
	background: var(--s-bg, #fff); border-radius: 3px; overflow: hidden; }

/* barras do chrome — uma por linha respondida */
.iv-sc-bar { display: flex; justify-content: center; min-height: 28px; margin: 0 auto; padding: 5px 0; background: #eceef1; border-bottom: 1px solid #e0e3e7; transition: width .15s ease; }
.iv-sample-footer .iv-sc-bar { border-bottom: 0; border-top: 1px solid #e0e3e7; }
.iv-sc-bar.is-contained { border-radius: 3px; }
/* estilos de barra do questionário — o esquema mostra o que cada um faz */
.iv-sc-bar.is-pill { margin-top: 6px; border-radius: 14px; border-bottom: 0; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.iv-sc-bar.is-divider { background: transparent; border-bottom: 1px solid #c9ced4; }
.iv-sc-bar.is-overlay { background: repeating-linear-gradient(45deg, #cfd6de, #cfd6de 4px, #c4ccd5 4px, #c4ccd5 8px); border-bottom: 0; }
.iv-sc-bar.is-overlay .iv-sc-chip { background: rgba(255,255,255,.75); }
.iv-sc-bar.is-stacked .iv-sc-inner, .iv-sc-bar.is-minimal .iv-sc-inner { justify-content: center; }
.iv-sc-bar.is-dark_band { background: #23262b; border-top-color: #23262b; }
.iv-sc-bar.is-dark_band .iv-sc-chip { color: #e6e8ea; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.iv-sc-bar.is-newsletter:first-child { padding: 10px 0; }
.iv-sc-bar.is-newsletter:first-child .iv-sc-inner { justify-content: center; }
.iv-sc-bar.is-minimal { padding: 2px 0; }
.iv-sc-bar.is-ghost { justify-content: center; align-items: center; padding: 10px 0; background: repeating-linear-gradient(45deg, #f2f4f6, #f2f4f6 5px, #eaedf0 5px, #eaedf0 10px); font-size: 10px; color: #8a9097; font-style: italic; }
.iv-sc-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 0 auto; }
/* 9 células por secção (3 rows × 3 colunas): os blocos arrastam-se entre elas
   e o mapa viaja no brief, por isso o compose obedece em vez de inventar */
.iv-sc-inner.is-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; align-items: center; }
.iv-sc-cell { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; min-height: 22px; padding: 3px; border: 1px dashed transparent; border-radius: 3px; }
/* ⚠️ A LINHA APERTADA (Pedro, 2026-09-30: «a preview do telemóvel ficou com blocos e ações
   escondidas»): com `1fr` uma coluna não desce abaixo do conteúdo, e no telemóvel (46 %,
   ≈170 px) a grelha passava a moldura — o `overflow: hidden` dela cortava os blocos da
   direita e a pega ⚙. O renderSample marca `is-tight` só nas linhas que não cabem: aí cada
   coluna fica com a largura do conteúdo (a vazia com 28 px, para continuar a receber o
   arrasto) e o nome longo encolhe (…, o nome inteiro fica no title). Colunas a ⅓ encolhiam
   os nomes do desktop, que cabem, e deixavam «lo…» ao lado de uma coluna vazia. */
.iv-sc-inner.is-grid.is-tight { grid-template-columns: repeat(3, minmax(28px, auto)); min-width: 0; }
.iv-sc-inner.is-tight .iv-sc-cell { min-width: 0; }
.iv-sc-inner.is-tight .iv-sc-chip { padding-left: 4px; padding-right: 4px; }
/* numa linha apertada o «…» comia o ✎ (vinha depois do nome): passa para a frente */
.iv-sc-inner.is-tight .iv-sc-chip.is-noted::after { content: none; }
.iv-sc-inner.is-tight .iv-sc-chip.is-noted::before { content: '✎ '; color: #1f7a3d; }
.iv-sc-cell:hover { border-color: #c3c7cc; }
.iv-sc-cell.is-over { border-color: #1f7a3d; border-style: solid; background: rgba(31,122,61,.10); }
.iv-sc-chip[draggable] { cursor: grab; }
.iv-sc-chip.is-dragging { opacity: .4; }
/* bandeja dos escondidos: arrastar para cá desliga o bloco NESTE aparelho
   (active=0 na linha desse device); arrastar de volta repõe-no. Mostra-se
   sempre — um bloco escondido sem rasto seria o pior dos mundos. */
.iv-sc-tray { padding: 6px 8px; background: #f7f8f9; border-top: 1px dashed #cfd4d9; }
.iv-sc-tray-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: #9aa0a6; margin-bottom: 3px; }
.iv-sc-cell.is-tray { justify-content: flex-start; min-height: 24px; border-style: dashed; border-color: #dde1e5; }
.iv-sc-tray.is-empty .iv-sc-cell.is-tray::before { content: 'arrasta para aqui os blocos a esconder'; font-size: 9px; font-style: italic; color: #b6bbc1; }
.iv-sc-cell.is-tray .iv-sc-chip { opacity: .55; text-decoration: line-through; }
.iv-sc-chip { box-sizing: border-box; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 3px 7px; font-size: 10px; line-height: 1.4; color: #4a5057; background: #fff; border: 1px solid #dcdfe3; border-radius: 3px; white-space: nowrap; }
.iv-sc-chip.is-logo { font-weight: 700; color: #1f7a3d; }
.iv-sc-chip.is-nav { padding: 3px 18px; }
.iv-sc-chip.is-searchbox { padding: 3px 28px 3px 7px; color: #9aa0a6; }
.iv-sc-chip.is-empty { color: #b6bbc1; background: transparent; border-style: dashed; }

/* secções de conteúdo */
.iv-sc-section { margin: 0 auto; padding: var(--s-space) 0; background: var(--s-bg, #fff); transition: width .15s ease, padding .15s ease; }
.iv-sc-section.is-alt { background: var(--s-surface, #f7f8f9); }
.iv-sc-section.is-dark { background: #23262b; }
.iv-sc-heading { height: 7px; width: 45%; margin-bottom: var(--s-gap); border-radius: 2px; background: var(--s-text, #33373d); }
.iv-sc-section.is-dark .iv-sc-heading { background: #e6e8ea; }
.iv-sc-grid { display: grid; gap: var(--s-gap); }
.iv-sc-card { background: var(--s-bg, #fff); border: var(--s-border); border-radius: var(--s-radius); box-shadow: var(--s-shadow); overflow: hidden; transition: border-radius .15s ease, box-shadow .15s ease; }
.iv-sc-img { background: #d7dbe0; transition: padding-bottom .15s ease; }
.iv-sc-lines { padding: 4px; }
.iv-sc-lines i { display: block; height: 3px; margin-bottom: 2px; border-radius: 2px; background: var(--s-muted, #c9ced4); }
.iv-sc-lines i.short { width: 55%; }
/* peso da imagem: muda o LAYOUT do cartão, não a escala — protagonista tem o
   texto POR CIMA da imagem, mínima põe uma miniatura ao lado do texto */
.iv-sc-card.is-hero .iv-sc-img { position: relative; }
.iv-sc-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.iv-sc-overlay i { display: block; height: 4px; margin-bottom: 3px; border-radius: 2px; background: rgba(255,255,255,.9); }
.iv-sc-overlay i.short { width: 50%; }
.iv-sc-card.is-minimal { display: flex; align-items: flex-start; gap: 6px; padding: 5px; }
.iv-sc-card.is-minimal .iv-sc-thumb { flex: 0 0 22px; height: 0; background: #d7dbe0; border-radius: 2px; }
.iv-sc-card.is-minimal .iv-sc-lines { flex: 1 1 auto; padding: 0; }

/* largura de leitura: a diferença tem de SALTAR à vista na miniatura */
.iv-sc-prose i { display: block; height: 5px; margin-bottom: 5px; border-radius: 2px; background: var(--s-muted, #c2c8ce); }
.iv-sc-prose.is-narrow { max-width: 45%; }
.iv-sc-prose.is-narrow i { margin-left: 0; }
.iv-sc-prose i.short { width: 40%; }
.iv-sc-section.is-dark .iv-sc-prose i { background: #4a4f56; }
.iv-sc-dots { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.iv-sc-dots i { width: 4px; height: 4px; border-radius: 50%; background: #b6bbc1; }
.iv-sc-dots i:first-child { background: #1f7a3d; }
.iv-sc-cta { margin-top: var(--s-gap); }
.iv-sc-btn { display: inline-block; padding: 4px 12px; font-size: 10px; border-radius: 3px; }
.iv-sample-frame.btn-solid .iv-sc-btn { background: var(--s-brand, #1f7a3d); color: var(--s-on-brand, #fff); }
.iv-sample-frame.btn-outline .iv-sc-btn { border: 1px solid var(--s-brand, #1f7a3d); color: var(--s-brand, #1f7a3d); }
.iv-sample-frame.btn-text .iv-sc-btn { padding-left: 0; color: var(--s-brand, #1f7a3d); text-decoration: underline; }
.iv-sample-frame.is-static .iv-sc-card { transition: none; }

/* ESTRUTURA DE PAGINAS do questionario (Pedro, 2026-09-10). Uma LINHA por
   pagina, indentada pelo nivel: e a forma em que se edita (indentar e mudar um
   numero) e a forma em que as paginas sao criadas (o pai antes do filho).
   ⚠️ O input NAO vive dentro de <label>, de proposito: `.form label input`
   poe width:100% e display:block, que foi o que deformou as checkboxes na QA
   de 2026-07-30. Aqui a largura e do flex. */
.iv-tree { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.iv-tree-row { display: flex; align-items: center; gap: 6px; }
.iv-tree-level { flex: 0 0 auto; width: 16px; font-size: 10px; color: #9aa0a6; text-align: center; }
.iv-tree-title { flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: 12px; border: 1px solid #c3c7cc; border-radius: 3px; background: #fff; }
.iv-tree-title:focus { border-color: #1f7a3d; outline: none; }
.iv-tree-row button { flex: 0 0 auto; padding: 4px 8px; font-size: 11px; line-height: 1; border: 1px solid #c3c7cc; border-radius: 3px; background: #fff; cursor: pointer; }
.iv-tree-row button:disabled { opacity: .35; cursor: default; }
.iv-tree-row .iv-tree-del { color: #a3384a; }
/* a DESCRIÇÃO de uma página (Pedro, 2026-09-28): ✎ marcado quando há texto */
.iv-tree-row .iv-tree-note { color: #5a5f66; }
.iv-tree-row .iv-tree-note.is-set { color: #1f7a3d; border-color: #9cc9aa; background: #f4faf6; }
/* NÓS DE MÓDULO na estrutura (B8, 2026-09-28): não são páginas — outra cor */
.iv-tree-row.is-module .iv-tree-title { border-color: #b9c7dd; background: #f5f8fc; }
.iv-tree-modbadge { flex: 0 0 auto; max-width: 130px; overflow: hidden; text-overflow: ellipsis; padding: 3px 7px; font-size: 11px; line-height: 1.2; color: #2f4a73; background: #e8eef7; border: 1px solid #b9c7dd; border-radius: 3px; white-space: nowrap; }
.iv-tree-row .iv-tree-ghost { visibility: hidden; }
/* PÁGINA INICIAL, LIGAÇÕES e a RAIZ do catálogo na estrutura (2026-09-28) */
.iv-tree-row .iv-tree-ghostgroup { display: contents; visibility: hidden; }
.iv-tree-hometitle { flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: 12px; font-weight: 600; color: #2b2f33; border: 1px dashed #c3c7cc; border-radius: 3px; background: #fafafa; }
.iv-tree-row .iv-tree-linkurl { flex: 1.5 1 150px; min-width: 130px; padding: 5px 8px; font-size: 12px; border: 1px solid #c3c7cc; border-radius: 3px; background: #fff; }
.iv-tree-row .iv-tree-linkurl.is-bad { border-color: #d9822b; background: #fdf6ee; }
/* ATALHO (2026-09-29): o destino, no lugar do endereço de uma ligação */
.iv-tree-row .iv-tree-shortcut { flex: 1.5 1 150px; min-width: 130px; padding: 4px 6px; font-size: 12px; border: 1px solid #c3c7cc; border-radius: 3px; background: #fff; }
.iv-tree-row .iv-tree-shortcut.is-bad { border-color: #d9822b; background: #fdf6ee; }
/* o «nova janela» é uma caixa simples numa linha: sem isto herdava o `.form
   label` (bloco com moldura) e parecia mais uma caixa de menu (Pedro, 28-09) */
.form .iv-tree-row label.iv-tree-linknew { flex: 0 0 auto; display: inline-flex; flex-direction: row; align-items: center; gap: 4px; width: auto; margin: 0; padding: 0; border: 0; background: none; font-size: 11px; line-height: 1.2; color: #5a5f66; white-space: nowrap; }
.form .iv-tree-row label.iv-tree-linknew input { width: auto; margin: 0; }
/* a parte da esquerda de um módulo ou de uma ligação: quebra em duas linhas
   quando falta espaço, e as caixas de menu e as acções ficam na coluna das
   páginas; o nome e o endereço repartem o espaço, com mínimos que os deixam ver */
.iv-tree-main { flex: 1 1 0; min-width: 150px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.iv-tree-main .iv-tree-title,
.iv-tree-main .iv-tree-hometitle { flex: 1 1 120px; min-width: 90px; }
.iv-tree-row .iv-tree-modroot { flex: 1 1 110px; min-width: 110px; max-width: 220px; width: auto; padding: 3px 4px; font-size: 11px; border: 1px solid #c3c7cc; border-radius: 3px; background: #fff; }
.iv-tree-modpick .iv-tree-modpick-group { margin-top: 4px; }
.iv-note-fixmobile { align-self: flex-start; margin-top: 4px; padding: 4px 10px; font-size: 12px; border: 1px solid #d9822b; border-radius: 3px; background: #fff; color: #8a4b12; cursor: pointer; }
.iv-tree-modbadge.is-conflict { color: #8a4b12; background: #fdf1e4; border-color: #d9822b; }
.iv-tree-row .iv-tree-modkids { flex: 1 1 110px; min-width: 110px; max-width: 220px; width: auto; padding: 3px 4px; font-size: 11px; border: 1px solid #c3c7cc; border-radius: 3px; background: #fff; }
.iv-tree-modpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; padding: 8px; border: 1px dashed #b9c7dd; border-radius: 4px; background: #f8fafd; }
.iv-tree-modpick .iv-q-hint { flex: 1 0 100%; margin: 0 0 2px; }
.iv-tree-modpick button { padding: 4px 9px; font-size: 11px; border: 1px solid #b9c7dd; border-radius: 3px; background: #fff; cursor: pointer; }
.iv-tree-modpick button:disabled { opacity: .4; cursor: default; }
.iv-note-bool { font-weight: 600; }
.iv-tree-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; font-size: 11px; color: #555; white-space: nowrap; cursor: pointer; user-select: none; }
.iv-tree-nav input { margin: 0; cursor: pointer; }
.iv-tree-nav.off { color: #adb2b8; }
.iv-tree-nav.warn { color: #a3384a; }
.iv-tree-navwarn { font-size: 11px; line-height: 1; }
/* o ⚠ na mesma linha do rótulo: o `.form label span` (bloco, 14px) ganhava ao
   `.iv-tree-navwarn` e punha-o numa 3.ª linha, com a linha mais alta que as
   outras (revisão Fable R2); a caixa em si fica como está */
.form .iv-tree-row label.iv-tree-nav .iv-tree-navwarn { display: inline; font-size: 11px; line-height: 1; }
.iv-tree-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.iv-tree-count { font-size: 11px; color: #777; }
/* painel de edição manual de um bloco (roda dentada do modo Blocos): overlay
   à direita sobre o preview; escondido por omissão, .open mostra */
.block-config-panel { position: absolute; top: 45px; right: 0; bottom: 0; width: min(560px, 46vw); min-width: 340px; max-width: 90%; display: none; flex-direction: column; background: #fff; border-left: 1px solid #e3e5e8; box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12); z-index: 20; }
.block-config-panel.open { display: flex; }
.block-config-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #e3e5e8; background: #f5f6f8; }
.block-config-head strong { flex: 1 1 auto; font-size: 13px; }
.block-config-head #block_config_close { padding: 0 8px; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: #5a5f66; }
.block-config-fields { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; }
/* ORGANIZAÇÃO DO PAINEL (QA Pedro 2026-08-14): os campos estavam todos
   empilhados e o formulário original tem grupos com nome e duas colunas. A
   grelha é auto-fit — num painel estreito volta sozinha a uma coluna. */
.block-config-grid { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 0 12px; align-items: start; }
.block-config-grid .field.wide { grid-column: 1 / -1; }
/* cabeçalho de grupo COLAPSÁVEL: botão a toda a largura, seta que roda, e o
   número de campos com valor (com 52 campos, saber onde está mexido conta) */
/* menu do editor de tokens (QA Pedro 2026-08-17): as secções abrem em lista
   por baixo do botão "Estilos", com a contagem de campos de cada uma */
.theme-tokens-menu { position: relative; display: inline-block; }
.theme-tokens-menu button { white-space: nowrap; }
.theme-tokens-list { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
	min-width: 210px; padding: 6px; border: 1px solid #d9dce0; border-radius: 6px;
	background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); }
.theme-tokens-list.open { display: block; }
.theme-tokens-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; margin: 0 0 2px; text-align: left; }
.theme-tokens-list .tcount { min-width: 22px; padding: 1px 5px; border-radius: 9px;
	background: #eef0f2; color: #6b7178; font-size: 11px; text-align: center; }

.block-config-separator { display: flex; align-items: center; gap: 6px; width: 100%; margin: 14px 0 6px; padding: 4px 0; border: 0; border-bottom: 1px solid #d9dce0; background: none; text-align: left; cursor: pointer; font-size: 12px; font-weight: 700; color: #3c4147; text-transform: uppercase; letter-spacing: .04em; }
.block-config-separator:hover { color: #111; }
.block-config-separator::before { content: "▸"; display: inline-block; font-size: 10px; color: #8a9099; transition: transform .12s ease; }
.block-config-separator.open::before { transform: rotate(90deg); }
.block-config-separator .gname { flex: 1 1 auto; }
.block-config-separator .gcount:not(:empty) { flex: none; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: #e7eef7; color: #3c6ea5; font-size: 10px; font-weight: 700; letter-spacing: 0; text-align: center; }
.block-config-fields > .block-config-separator:first-child { margin-top: 0; }
/* só as grelhas COM cabeçalho colapsam; as dos painéis de linha/célula (sem
   grupos) ficam sempre visíveis */
.block-config-grid { display: grid; }
.block-config-grid.collapsible { display: none; }
.block-config-grid.collapsible.open { display: grid; }
@media (prefers-reduced-motion: reduce) { .block-config-separator::before { transition: none; } }
/* rótulos: vêm do formulário original, já em português — capitalizar aqui
   estragava "URL [PT]" e "1º Nível" */
.block-config-fields .field span { text-transform: none; }
.block-config-fields .field { margin-bottom: 10px; }
.block-config-fields .field span { display: block; font-size: 11px; font-weight: 600; color: #5a5f66; margin-bottom: 2px; text-transform: capitalize; }
.block-config-fields .field input[type="text"], .block-config-fields .field textarea, .block-config-fields .field select { width: 100%; box-sizing: border-box; }
.block-config-fields .field .minicolors { display: block; width: 100%; }
.block-config-fields .field-hint { display: block; margin-top: 2px; font-size: 11px; color: #7a4a00; }
/* campos 0/1 do painel = switchery (QA Pedro 2026-08-04): o interruptor, a
   ordem e o espaçamento vêm de `.form label.switcher`; aqui só se puxa o
   texto para o tamanho dos restantes rótulos do painel */
.block-config-fields label.switcher { margin-bottom: 0; }
.block-config-fields label.switcher span.title { font-size: 11px; font-weight: 600; color: #5a5f66; text-transform: capitalize; overflow: visible; }
.block-config-note { margin-bottom: 10px; padding: 8px 10px; font-size: 11px; color: #7a4a00; background: #fff3e0; border: 1px solid #f5c98a; border-radius: 6px; }
.block-config-actions { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e3e5e8; background: #f5f6f8; }
.block-config-panel .theme-assistant-error { margin: 0 12px; }
/* ===== Editor de artigos dos blocos CMS (Fase 1 - campos genéricos) ===== */
.tree-field .remove-link2-page { float: right; }

/* ===== Composer de banners (Fase 5) — cartões de slide verticais =====
   Grelha auto-fit: os campos embrulham em vez de estourar a largura (fim do
   scroll lateral). Sem classes CSS expostas ao utilizador. */
.slides-editor { display: flex; flex-direction: column; gap: 14px; }
.slide-card { border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; }
.slide-card-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; background: #fafafa; border-bottom: 1px solid #eee; border-radius: 8px 8px 0 0; }
.slide-card.collapsed .slide-card-head { border-bottom: 0; border-radius: 8px; }
.slide-card-thumb { width: 66px; height: 46px; flex: 0 0 auto; border-radius: 4px; background: #dcdcdc; overflow: hidden; }
.slide-card-thumb img, .slide-card-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-card-summary { flex: 1 1 auto; min-width: 0; }
.slide-card-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide-card-title .muted { color: #aaa; font-weight: 400; }
.slide-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.slide-chip { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #eef1f4; color: #556; }
.slide-card-actions { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }
/* ações do cartão: ícone em caixa compacta (não um botão grande) */
.slide-card-actions .field-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 0; padding: 0; margin: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; box-shadow: none; }
.slide-card-actions .field-button img { height: 16px; width: auto; max-width: 20px; display: block; }
.slide-card-actions .field-button:hover { background: #f0f0f0; }
.slide-card-actions .field-button.red { background: #e2453a; border-color: #e2453a; }
.slide-card-actions .field-button.red:hover { background: #c8382e; border-color: #c8382e; }
.slide-card-actions .field-button.red img { filter: brightness(0) invert(1); }
/* Botões com icon-font (compor/duplicar): garante glifo visível e dimensionado
   (o toolbar não tinha regra para a fonte de ícones — ficavam em branco). */
.slide-card-actions .field-button [class^="icon-"]:before,
.slide-card-actions .field-button [class*=" icon-"]:before { font-size: 15px; line-height: 1; margin: 0; width: auto; color: #555; }
.slide-card-actions .field-button.js-compose-slide:before,
.slide-card-actions .field-button.js-compose-slide [class^="icon-"]:before { color: #6b9e1f; }
.slide-card-actions .field-button.js-compose-slide:hover { background: #eef3e2; }

/* ===== Normalização da APRESENTAÇÃO — todos os controlos na MESMA linha gráfica =====
   Altura fixa (38px) + border/radius iguais; etiqueta com altura mínima para os
   controlos alinharem mesmo quando a etiqueta quebra em 2 linhas. */
.slide-fields { align-items: start; }
.slide-fields .slide-field { gap: 0; }
.slide-fields .slide-field > .lbl { display: block; font-size: 11px; color: #888; line-height: 1.25; min-height: 20px; margin: 0; }
.slide-fields .slide-field > input[type=text],
.slide-fields .slide-field > select,
.slide-fields .slide-field > .line-solto,
.slide-fields .slide-field .focal-inputs input,
.slide-fields .slide-field .minicolors-input {
	height: 38px; box-sizing: border-box; width: 100%;
	border: 1px solid #d8d8d8; border-radius: 6px; background: #fff;
	padding: 0 10px; font: inherit; color: #333;
}
.slide-fields .slide-field > select { padding: 0 6px 0 8px; }
.slide-fields .slide-field > input[type=text]:focus,
.slide-fields .slide-field > select:focus,
.slide-fields .slide-field .focal-inputs input:focus,
.slide-fields .slide-field .minicolors-input:focus { border-color: #75ac1e; outline: 0; }
.slide-fields .slide-field > .line-solto { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: #555; white-space: nowrap; overflow: hidden; }
.slide-fields .slide-field > .line-solto input { margin: 0; flex: 0 0 auto; width: 20px; }
/* Focos: campos pequenos e FIXOS (sem grow) — nunca se sobrepõem */
.slide-fields .slide-field .focal-inputs { display: flex; gap: 6px; justify-content: flex-start; }
.slide-fields .slide-field.focal-pair .focal-inputs input { flex: 0 0 56px; width: 56px; min-width: 0; text-align: center; padding: 0 6px; }
/* minicolors (Cor da caixa) — caixa igual aos inputs, com amostra à esquerda */
.slide-fields .slide-field .minicolors { display: block; width: 100%; }
.slide-fields .slide-field .minicolors-input { padding-left: 36px; }
.slide-fields .slide-field .minicolors-swatch { top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 4px; overflow: hidden; }
.slide-fields .slide-field .minicolors-swatch .minicolors-swatch-color { border-radius: 4px; }
/* a grelha 3x3 fica alinhada ao topo dos restantes controlos */
.slide-fields .slide-field .pos-grid { margin-top: 0; }
/* "Elemento solto (posição livre)" na linha — mesma norma (caixa) dos restantes */
.line-actions .line-solto { border: 1px solid #d8d8d8; border-radius: 6px; padding: 7px 10px; background: #fff; }

/* Barra de pré-visualização do banner COMPLETO (slideshow/parallax) — nova aba. */
.banner-fullpreview-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 10px 12px; background: #f4f7ee; border: 1px solid #e2e9d3; border-radius: 8px; }
.banner-fullpreview-label { font-size: 12px; color: #5a6b3b; font-weight: 600; }

/* Preview vivo embutido — ABRE A PEDIDO (o vh do banner conta a altura do iframe,
   por isso o iframe é grande, ~70% do ecrã, para o 50vh ler como no site) */
.slide-preview { margin-bottom: 16px; border: 1px solid #e6e6e6; border-radius: 8px; overflow: hidden; }
.slide-preview-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #f7f7f7; cursor: pointer; }
.slide-preview-bar:hover { background: #f0f2ec; }
.slide-preview.open .slide-preview-bar { border-bottom: 1px solid #eee; }
.slide-preview-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #999; }
.slide-preview-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #bbb; }
.slide-preview.open .slide-preview-hint { display: none; }
.slide-preview-actions { display: flex; align-items: center; gap: 10px; }
.slide-preview-refresh { display: none; border: 1px solid #cfcfcf; background: #fff; border-radius: 5px; padding: 5px 12px; font-size: 11px; cursor: pointer; color: #555; }
.slide-preview.open .slide-preview-refresh { display: inline-block; }
.slide-preview-refresh:hover { background: #eef3e2; border-color: #bcd48a; }
.slide-preview-caret { font-size: 12px; color: #999; transition: transform .15s; }
.slide-preview.open .slide-preview-caret { transform: rotate(180deg); }
.slide-preview-frame { display: none; width: 100%; height: 70vh; min-height: 440px; border: 0; background: #fff; }
.slide-preview.open .slide-preview-frame { display: block; }

/* Trocar ficheiro do slide — barra colapsável; ao abrir inicia um Dropzone */
.slide-file { margin-bottom: 14px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.slide-file-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #fafafa; cursor: pointer; gap: 10px; }
.slide-file-bar:hover { background: #f0f2ec; }
.slide-file.open .slide-file-bar { border-bottom: 1px solid #eee; }
.slide-file-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #999; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.slide-file-name { color: #666; text-transform: none; letter-spacing: 0; font-weight: 400; }
.slide-file-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.slide-file-hint { font-size: 11px; color: #bbb; }
.slide-file.open .slide-file-hint { display: none; }
.slide-file-caret { font-size: 12px; color: #999; transition: transform .15s; }
.slide-file.open .slide-file-caret { transform: rotate(180deg); }
.slide-file-body { display: none; padding: 12px; }
.slide-file.open .slide-file-body { display: block; }
/* a área usa a classe .dropzone (aspeto e texto do Dropzone original); só ajustes: */
.slide-dropzone.dropzone { min-height: 110px; margin: 0; }

.slide-card-caret { font-size: 14px; color: #999; transition: transform .15s; }
.slide-card.collapsed .slide-card-caret { transform: rotate(-90deg); }
.slide-card-body { padding: 14px 16px 6px; }
.slide-card.collapsed .slide-card-body { display: none; }
.slide-section { margin-bottom: 18px; }
.slide-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #999; margin: 0 0 8px; border-bottom: 1px solid #f0f0f0; padding-bottom: 4px; }
.slide-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; align-items: start; }
.slide-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.slide-field > .lbl { font-size: 11px; color: #777; }
.slide-field input[type=text], .slide-field select,
.line-grid .line-field input[type=text], .line-grid .line-field select, select.color-swatch-select {
	width: 100%; box-sizing: border-box; border: 1px solid #d8d8d8; border-radius: 6px;
	padding: 7px 9px; background: #fff; font: inherit; color: #333;
}
.slide-field input[type=text]:focus, .slide-field select:focus,
.line-grid .line-field input[type=text]:focus, .line-grid .line-field select:focus {
	border-color: #75ac1e; outline: 0;
}
/* campo "Cor livre (hex)" no Avançado (minicolors) — mesma caixa dos inputs, com amostra */
.line-grid .line-field .minicolors { display: block; width: 100%; }
.line-grid .line-field input[type=text].minicolors-input { width: 100%; box-sizing: border-box; height: auto; border: 1px solid #d8d8d8; border-radius: 6px; padding: 7px 9px 7px 40px; background: #fff; font: inherit; color: #333; }
.line-grid .line-field .minicolors-swatch { top: 50%; left: 8px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 4px; overflow: hidden; }
.line-grid .line-field .minicolors-swatch .minicolors-swatch-color { border-radius: 4px; }
/* foco: label em cima (como os outros), dois inputs lado a lado por baixo */
.slide-field.focal-pair .focal-inputs { display: flex; gap: 6px; }
.slide-field.focal-pair .focal-inputs input { flex: 1 1 0; width: auto; text-align: center; }
/* campos de checkbox (Onde aparece / Visível): caixa própria a condizer com os inputs */
.slide-field > .line-solto { border: 1px solid #d8d8d8; border-radius: 6px; padding: 8px 9px; background: #fff; display: flex; align-items: center; gap: 8px; }
.slide-field > .line-solto input { margin: 0; }
/* Caixa da mensagem (minicolors) segue o padrão dos inputs de texto */
.slide-field .minicolors { display: block; width: 100%; }
.slide-field .minicolors-input { width: 100%; box-sizing: border-box; padding-left: 30px; }

/* Grelha de posição 3x3 clicável (substitui o select de posição) */
.pos-grid { display: grid; grid-template-columns: repeat(3, 22px); grid-auto-rows: 22px; gap: 3px; }
.pos-grid .pos-cell { box-sizing: border-box; border: 1px solid #cfcfcf; border-radius: 3px; cursor: pointer; background: #fff; padding: 0; }
.pos-grid .pos-cell:hover { background: #eef3e2; }
.pos-grid .pos-cell.active { background: #75ac1e; border-color: #75ac1e; }

/* Editor do modelo de caixa (margem/padding) por linha — SEMPRE visível, em
   forma de CRUZ (Topo/Esquerda/Direita/Fundo) via CSS grid 3×3. Duas cruzes
   lado a lado: margem + padding. */
.line-box-row { display: flex; gap: 30px; padding: 10px 2px 4px; flex-wrap: wrap; align-items: center; }
.line-box-row .box-row-extra { display: flex; align-items: center; }
.line-box-row .box-row-extra .line-solto { border: 1px solid #d8d8d8; border-radius: 6px; padding: 7px 10px; background: #fff; margin: 0; }
.box-grid .box-in::placeholder { color: #d0d0d0; }
.box-cross { display: inline-flex; flex-direction: column; align-items: center; }
.box-cross-lbl { font-size: 11px; color: #888; margin-bottom: 5px; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.box-cross-lbl em { color: #bbb; font-style: normal; text-transform: none; letter-spacing: 0; }
.box-grid { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 27px); gap: 5px; }
.box-grid .box-in { width: 48px; height: 25px; box-sizing: border-box; text-align: center; padding: 0 3px;
    border: 1px solid #cfcfcf; border-radius: 4px; background: #fff; font-size: 11px; color: #444; margin: 0; }
.box-grid .box-in:focus { border-color: #75ac1e; outline: none; background: #fcfef7; }
.box-grid .box-mid { grid-area: 2 / 2; display: flex; align-items: center; justify-content: center;
    width: 48px; height: 25px; font-size: 10px; font-weight: 700; color: #bbb;
    border: 1px dashed #dcdcdc; border-radius: 4px; }
.box-grid.padding .box-mid { border-style: solid; background: #f4f7ee; }
.box-grid .box-t { grid-area: 1 / 2; }
.box-grid .box-l { grid-area: 2 / 1; }
.box-grid .box-r { grid-area: 2 / 3; }
.box-grid .box-b { grid-area: 3 / 2; }


/* Linhas de conteúdo — grelha que embrulha, nunca estoura */
.line-row { border: 1px solid #ececec; border-radius: 6px; padding: 9px 11px; margin-bottom: 8px; background: #fcfcfc; }
.line-row.insert-row { background: #f5f9ee; border-color: #d8e6bf; }
.line-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 10px; align-items: end; }
.line-grid .line-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.line-grid .line-field.wide { grid-column: span 2; }
.line-grid .line-field > .lbl { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .03em; }
/* os <label> do composer NÃO são caixas (o office põe border/padding em .form label) */
.slides-editor label, .cms-banner-description-lines label { border: 0; border-radius: 0; padding: 0; margin: 0; }
.line-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.line-actions .spacer { flex: 1 1 auto; }
.line-solto { font-size: 11px; color: #777; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* Disclosure "Avançado" — esconde hex/classe livre de quem não os precisa */
.adv-toggle { font-size: 11px; color: #2e7bbf; cursor: pointer; user-select: none; display: inline-block; margin-top: 4px; }
.adv-toggle:before { content: "\25B8 "; }
.adv-panel { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #eee; }
.adv-panel.open { display: block; }
.adv-panel.open + .adv-toggle:before, .adv-toggle.open:before { content: "\25BE "; }

/* Editor de segmentos (título multi-cor) — pedaços inline com cor do tema */
.js-seg-toggle { color: #a05a00; }
.js-seg-toggle.has-seg { font-weight: 600; }
.js-seg-toggle em { font-style: normal; color: #a05a00; }
.js-seg-toggle.open:before { content: "\25BE "; }
.seg-panel { display: none; margin-top: 8px; padding: 10px; border: 1px dashed #e6c9a0; border-radius: 8px; background: #fffaf3; }
.seg-panel.open { display: block; }
.seg-list { display: flex; flex-direction: column; gap: 6px; }
.seg-item { display: flex; align-items: center; gap: 8px; }
.seg-item .seg-text { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 34px; border: 1px solid #d8d8d8; border-radius: 6px; padding: 6px 9px; background: #fff; font: inherit; color: #333; }
.seg-item .seg-token { flex: 0 0 160px; box-sizing: border-box; height: 34px; border: 1px solid #d8d8d8; border-radius: 6px; padding: 6px 9px; background: #fff; font: inherit; color: #333; }
.seg-item .seg-text:focus, .seg-item .seg-token:focus { border-color: #2e7bbf; outline: none; }
.seg-item .seg-del { flex: 0 0 auto; width: 30px; height: 30px; line-height: 28px; text-align: center; border: 1px solid #e2b6b6; border-radius: 6px; background: #fff; color: #c33; font-size: 18px; cursor: pointer; padding: 0; }
.seg-item .seg-del:hover { background: #c33; color: #fff; border-color: #c33; }
.seg-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.seg-hint { font-size: 11px; color: #997; flex: 1 1 200px; min-width: 0; }
.seg-item .seg-move { flex: 0 0 auto; width: 26px; height: 30px; line-height: 28px; text-align: center; border: 1px solid #d8d8d8; border-radius: 6px; background: #fff; color: #555; cursor: pointer; padding: 0; font-size: 13px; }
.seg-item .seg-move:hover { background: #f0f0f0; }

/* Tier A — cabeçalho de secção (Conteúdo + botão stagger) */
.slide-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.slide-section-head .slide-section-title { margin: 0; }

/* Tier A — foco visual: pad clicável com marcador */
.slide-fields .focal-pair { grid-column: span 2; }
.focal-pad { position: relative; width: 100%; height: 92px; background-size: cover; background-position: center; background-color: #ececec; border: 1px solid #d8d8d8; border-radius: 6px; cursor: crosshair; overflow: hidden; }
.focal-pad .focal-marker { position: absolute; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.45); transform: translate(-50%, -50%); pointer-events: none; }
.focal-pad-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #999; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.focal-pair .focal-inputs { margin-top: 6px; }


/* ==========================================================================
   QUALIDADE DAS GERAÇÕES DE IA  (office_ai_quality)
   Ecrã de análise da Fase 2 — docs/md/motor_feedback_templates_plano.md §13.
   Só de leitura. Prefixo .aiq- para não colidir com nada do office.
   ========================================================================== */

.aiq { max-width: 1420px; padding-bottom: 40px; }

/* --- barra de filtros ---------------------------------------------------- */
.aiq-filters {
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 18px;
}
.aiq-filters .aiq-frow { display: flex; align-items: center; flex-wrap: wrap; }
.aiq-filters .aiq-frow + .aiq-frow { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f1f1; }
.aiq-filters .aiq-flabel {
	width: 108px;
	flex: 0 0 108px;
	color: #8a9099;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.aiq-filters a.aiq-chip {
	display: inline-block;
	padding: 4px 12px;
	margin: 2px 6px 2px 0;
	border: 1px solid #d8d8d8;
	border-radius: 14px;
	background: #fff;
	color: #5a5f66;
	font-size: 12px;
	text-decoration: none;
	line-height: 18px;
}
.aiq-filters a.aiq-chip:hover { border-color: #a6ce39; color: #1f7a3d; }
.aiq-filters a.aiq-chip.on {
	background: #a6ce39;
	border-color: #a6ce39;
	color: #fff;
	font-weight: bold;
}

/* --- avisos de enviesamento ---------------------------------------------
   Vêm SEMPRE antes dos números: um ecrã que mostra contagens sem eles dá
   autoridade visual a leituras erradas. */
.aiq-warn, .aiq-ok {
	border-radius: 8px;
	padding: 11px 16px;
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 1.55;
}
.aiq-warn { background: #fff8e8; border: 1px solid #f0dcae; color: #6b5320; }
.aiq-warn b { color: #a8760f; }
.aiq-ok { background: #f1f7ec; border: 1px solid #d5e6c4; color: #3d5a2a; }

/* --- resumo em mosaicos --------------------------------------------------- */
.aiq-kpis { display: flex; flex-wrap: wrap; margin: 0 -8px 18px; }
.aiq-kpi { flex: 1 1 180px; margin: 0 8px 12px; }
.aiq-kpi-inner {
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 8px;
	border-top: 3px solid #a6ce39;
	padding: 14px 16px;
	height: 100%;
	box-sizing: border-box;
}
.aiq-kpi .aiq-kpi-n { font-size: 26px; font-weight: bold; color: #3d4249; line-height: 1.1; }
.aiq-kpi .aiq-kpi-l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a9099; margin-top: 5px; }
.aiq-kpi .aiq-kpi-h { font-size: 11px; color: #a2a7ae; margin-top: 3px; }
.aiq-kpi.warn .aiq-kpi-inner { border-top-color: #e0a83c; }
.aiq-kpi.warn .aiq-kpi-n { color: #a8760f; }

/* --- cartões de secção ---------------------------------------------------- */
.aiq-card {
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 8px;
	margin-bottom: 18px;
	overflow: hidden;
}
.aiq-card > .aiq-head { padding: 14px 20px 12px; border-bottom: 1px solid #f1f1f1; }
.aiq-card > .aiq-head h3 {
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	color: #3d4249;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.aiq-card > .aiq-head .aiq-sub { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: #7a8089; }
.aiq-card > .aiq-body { padding: 6px 20px 16px; }
.aiq-card > .aiq-foot {
	padding: 10px 20px;
	background: #fafbfc;
	border-top: 1px solid #f1f1f1;
	font-size: 12px;
	line-height: 1.6;
	color: #7a8089;
}
.aiq-card > .aiq-foot b { color: #5a5f66; }

/* --- tabelas -------------------------------------------------------------
   Larguras fixas nas colunas numéricas: sem elas o browser espalha 5 números
   por 1900px e o olho perde a linha. */
table.aiq-t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.aiq-t th {
	text-align: left;
	padding: 9px 10px;
	border-bottom: 1px solid #e3e5e8;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8a9099;
	white-space: nowrap;
}
table.aiq-t td { padding: 9px 10px; border-bottom: 1px solid #f4f4f4; vertical-align: middle; color: #4a4f56; }
table.aiq-t tr:last-child td { border-bottom: 0; }
table.aiq-t tbody tr:hover td { background: #fbfcfa; }
table.aiq-t th.num, table.aiq-t td.num { text-align: right; white-space: nowrap; width: 96px; }
table.aiq-t th.wide, table.aiq-t td.wide { width: auto; }
table.aiq-t td.strong { font-weight: bold; color: #3d4249; }
table.aiq-t td.aiq-code, table.aiq-t th.aiq-code { width: 260px; }
.aiq-code { font-family: Consolas, Monaco, monospace; font-size: 12px; color: #5a5f66; }
.aiq-muted { color: #9aa0a8; }
.aiq-empty { color: #9aa0a8; font-style: italic; padding: 14px 0; font-size: 13px; }

/* destaque do número que interessa em cada linha */
table.aiq-t td.num.lead { font-weight: bold; color: #3d4249; font-size: 14px; }

/* --- barras --------------------------------------------------------------
   Larguras por classe (passos de 5%) e não por style inline: o CSS vive todo
   no styles.css do office. */
.aiq-bar-track { background: #f1f3f5; border-radius: 3px; height: 10px; width: 100%; min-width: 60px; }
.aiq-bar-fill { display: block; height: 10px; border-radius: 3px; background: #a6ce39; }
table.aiq-t td.bar, table.aiq-t th.bar { width: 150px; }
.aiq-bar-fill.aiq-w-5 { width: 5%; }
.aiq-bar-fill.aiq-w-10 { width: 10%; }
.aiq-bar-fill.aiq-w-15 { width: 15%; }
.aiq-bar-fill.aiq-w-20 { width: 20%; }
.aiq-bar-fill.aiq-w-25 { width: 25%; }
.aiq-bar-fill.aiq-w-30 { width: 30%; }
.aiq-bar-fill.aiq-w-35 { width: 35%; }
.aiq-bar-fill.aiq-w-40 { width: 40%; }
.aiq-bar-fill.aiq-w-45 { width: 45%; }
.aiq-bar-fill.aiq-w-50 { width: 50%; }
.aiq-bar-fill.aiq-w-55 { width: 55%; }
.aiq-bar-fill.aiq-w-60 { width: 60%; }
.aiq-bar-fill.aiq-w-65 { width: 65%; }
.aiq-bar-fill.aiq-w-70 { width: 70%; }
.aiq-bar-fill.aiq-w-75 { width: 75%; }
.aiq-bar-fill.aiq-w-80 { width: 80%; }
.aiq-bar-fill.aiq-w-85 { width: 85%; }
.aiq-bar-fill.aiq-w-90 { width: 90%; }
.aiq-bar-fill.aiq-w-95 { width: 95%; }
.aiq-bar-fill.aiq-w-100 { width: 100%; }

/* --- caminho da destilação (secção 4) ------------------------------------- */
.aiq-path { font-size: 12px; line-height: 1.5; }
.aiq-path.is-widen  { color: #a8760f; }
.aiq-path.is-none   { color: #4a4f56; }
.aiq-path.is-strict { color: #1f7a3d; }
.aiq-path.is-blind  { color: #9aa0a8; font-style: italic; }

@media (max-width: 1100px) {
	table.aiq-t td.aiq-code, table.aiq-t th.aiq-code { width: auto; }
	table.aiq-t td.bar, table.aiq-t th.bar { display: none; }
}

/* =========================================================================
   Consumos de IA (office_ai_usage) — o que a dashboard acrescenta ao kit
   .aiq-* do ecrã de Qualidade. O cartão do saldo leva a cor do estado (a
   mesma do indicador do cabeçalho).
   ========================================================================= */
.aiu .aiu-balance.is-ok    .aiq-kpi-inner { border-top-color: #8dc63f; }
.aiu .aiu-balance.is-low   .aiq-kpi-inner { border-top-color: #f08c1a; }
.aiu .aiu-balance.is-low   .aiq-kpi-n     { color: #b8650b; }
.aiu .aiu-balance.is-empty .aiq-kpi-inner { border-top-color: #e53935; }
.aiu .aiu-balance.is-empty .aiq-kpi-n     { color: #c62828; }
.aiu .aiq-warn.aiu-empty { background: #fdecea; border-color: #f5c2bd; color: #7f1d1d; }
.aiu .aiq-warn.aiu-empty b { color: #c62828; }
.aiu .aiu-range { margin-left: auto; font-size: 12px; }
.aiu .aiu-bar { display: flex; align-items: center; gap: 10px; }
.aiu .aiu-bar .aiq-bar-track { flex: 1 1 auto; }
.aiu .aiu-bar .aiq-muted { flex: 0 0 48px; text-align: right; font-size: 12px; }
.aiu table.aiq-t td.aiu-nowrap { white-space: nowrap; }
.aiu table.aiq-t td.aiu-status.is-ok     { color: #1f7a3d; }
.aiu table.aiq-t td.aiu-status.is-failed { color: #c62828; font-weight: bold; }
.aiu .aiu-pager { display: flex; justify-content: space-between; }
.aiu .aiu-pager .aiu-next { margin-left: auto; }


/* =========================================================================
   Fila de Emails (office_email_queue)
   Alinhado com o card do datagrid: mesmas margens laterais (15px) e o mesmo
   raio de canto (19px) do .datagrid-top / .datagrid-container.
   ========================================================================= */

/* --- estado da mensagem (renderer da célula) ----------------------------- */
.email-queue-status { font-weight: bold; }
.email-queue-status-pending    { color: #7f8c8d; }
.email-queue-status-processing { color: #2980b9; }
.email-queue-status-sent       { color: #27ae60; }
.email-queue-status-failed     { color: #c0392b; }
.email-queue-status-cancelled  { color: #95a5a6; }

.email-queue-attempts-exhausted { color: #c0392b; font-weight: bold; }

/* --- painel de resumo ---------------------------------------------------- */
.email-queue-panel {
	background: #fff;
	border-radius: 19px;
	margin: 25px 15px 0;
	padding: 25px 15px 5px;
}

.email-queue-summary {
	display: flex;
	flex-wrap: wrap;
}

.email-queue-summary-item {
	flex: 1 1 0;
	min-width: 110px;
	padding: 0 15px;
	text-align: center;
	border-left: 1px solid #ececec;
}

.email-queue-summary-item:first-child { border-left: 0; }

.email-queue-summary-value {
	display: block;
	font-size: 26px;
	line-height: 1.2;
	color: #4a4f56;
}

.email-queue-summary-value.is-sent   { color: #27ae60; }
.email-queue-summary-value.is-failed { color: #c0392b; }

.email-queue-summary-label {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #9aa0a8;
}

/* --- avisos -------------------------------------------------------------- */
.email-queue-notices { margin-top: 20px; }

.email-queue-notice {
	margin: 0 0 10px 0;
	padding: 10px 14px;
	border-radius: 10px;
	border-left: 3px solid #ccc;
	background: #f7f7f7;
	font-size: 12px;
	line-height: 1.6;
	color: #4a4f56;
}

.email-queue-notice.is-ok      { border-left-color: #27ae60; background: #f2faf5; }
.email-queue-notice.is-warning { border-left-color: #e67e22; background: #fdf6ee; }
.email-queue-notice.is-error   { border-left-color: #c0392b; background: #fdf3f2; }

.email-queue-notice-title {
	display: block;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
}

.email-queue-notice.is-ok .email-queue-notice-title      { color: #1f7a3d; }
.email-queue-notice.is-warning .email-queue-notice-title { color: #a8760f; }
.email-queue-notice.is-error .email-queue-notice-title   { color: #c0392b; }

.email-queue-notice-hint { display: block; margin-top: 6px; }

.email-queue-notice-hint code {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
	background: #eceff1;
	font-family: monospace;
	font-size: 11px;
	color: #37474f;
}

/* --- detalhe da mensagem ------------------------------------------------- */
.email-queue-body {
	width: 100%;
	height: 500px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fff;
}

.email-queue-error {
	width: 100%;
	height: 120px;
	box-sizing: border-box;
	font-family: monospace;
	font-size: 12px;
}

.email-queue-attachments { margin: 0; padding-left: 18px; }
.email-queue-attachment-missing { color: #c0392b; font-style: italic; }

@media (max-width: 900px) {
	.email-queue-summary-item {
		flex: 1 1 33%;
		border-left: 0;
		margin-bottom: 12px;
	}
}

/* ============================================================
   Painel de MOTIVO ao apagar um bloco gerado por IA (Fase C do
   feedback de conteúdos). Vive dentro da mensagem do Html_Confirm —
   por isso as regras ancoram em .ai-block-judge e não no confirm.
   ============================================================ */
.ai-block-judge {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e3e5e8;
	text-align: left;
}
.ai-block-judge-hint {
	font-size: 11px;
	color: #6b7280;
	margin-bottom: 8px;
	line-height: 1.45;
}
.ai-block-judge-chips { margin-bottom: 8px; }
.ai-block-judge-chip {
	display: inline-block;
	padding: 3px 10px;
	margin: 0 6px 6px 0;
	border: 1px solid #d8d8d8;
	border-radius: 14px;
	background: #fff;
	color: #5a5f66;
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
	cursor: pointer;
}
.ai-block-judge-chip input { margin-right: 4px; vertical-align: middle; }
.ai-block-judge .ai-bj-note {
	width: 100%;
	font-size: 12px;
	padding: 5px 8px;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   MULTI-WEBSITE (F2): âmbito das definições.
   O chip diz o âmbito do param (Global / Website / Website View) e vive no
   canto superior direito do cartão do campo (o <label>, que já é
   position:relative), fora do fluxo do título e do controlo — igual para
   switches, inputs, select2 e áreas de texto. A legenda por baixo do cartão
   diz de onde vem o valor quando a célula desta selecção não existe ("a
   herdar de …"). Os campos herdados ficam sem a classe `data` (o
   Form_Validator só recolhe `.data`), por isso nunca são gravados por engano.
   --------------------------------------------------------------------------- */
.form .config-scope-bar {
	margin-bottom: 6px;
}
.form .config-scope-bar .field label {
	background: #F7F9FA;
}
.form .config-scope-bar .legend.config-scope-legend {
	font-weight: normal;
	margin: 4px 0 0 12px;
	line-height: 16px;
}
.form .config-scope-bar .legend.config-scope-legend b {
	color: #666;
}

/* O ASPECTO do chip nao depende de estar dentro de um <label>: os campos de
   data/hora usam um .input-group e ficavam com o chip sem estilo nenhum. */
.form .config-scope-chip {
	display: inline-block;
	margin: 0;
	padding: 0 8px;
	border-radius: 10px;
	border: 1px solid #BEC0CD;
	background: #EFF3F4;
	color: #666;
	font-size: 10px;
	font-weight: normal;
	line-height: 16px;
	text-transform: none;
	white-space: nowrap;
	cursor: default;
}
/* Dentro de um <label> (a maioria dos campos) vive no canto do cartao. */
.form label .config-scope-chip {
	position: absolute;
	top: 9px;
	right: 10px;
}
.form .config-scope-chip.scope-global       { background: #E8EEF7; border-color: #9DB3D6; color: #2F5496; }
.form .config-scope-chip.scope-website      { background: #EAF5E2; border-color: #A9CF85; color: #4A7A1E; }
.form .config-scope-chip.scope-website_view { background: #FBF1DD; border-color: #E2C27A; color: #8A6212; }
.form .config-scope-chip.scope-market       { background: #F3E8F5; border-color: #C9A3D0; color: #6E3A78; }

/* O título não corre por baixo do chip. */
.form label.has-scope-chip > span:first-child,
.form label.switcher.has-scope-chip span.title {
	padding-right: 100px;
}
.form .field.tinymce-editor label .config-scope-chip {
	top: 6px;
	right: 0;
}

/* A legenda de estado, por baixo do cartão, como os .legend dos ecrãs. */
.form .legend.config-scope-note {
	font-weight: normal;
	margin: 3px 0 8px 12px;
	line-height: 16px;
	color: #888;
}
.form .legend.config-scope-note b {
	color: #666;
	font-weight: bold;
}
.form .legend.config-scope-note button {
	margin-left: 8px;
	padding: 0 8px;
	border: 1px solid #BEC0CD;
	border-radius: 3px;
	background: #fff;
	color: #4A7A1E;
	font-size: 11px;
	line-height: 16px;
	cursor: pointer;
	vertical-align: baseline;
}
.form .legend.config-scope-note button:hover {
	background: #EAF5E2;
}

/* Campo a herdar: vê-se o valor efectivo, não se mexe. */
.form .field.config-inherited label {
	background: #FAFAFA;
}
.form .field.config-inherited input,
.form .field.config-inherited textarea,
.form .field.config-inherited select,
.form .field.config-inherited .select2-container,
.form .field.config-inherited .switchery,
.form .field.config-inherited .CodeMirror,
.form .field.config-inherited .mce-tinymce,
.form .field.config-inherited .tox-tinymce {
	pointer-events: none;
	opacity: 0.55;
}
.form .field.config-inherited label .config-scope-chip {
	opacity: 1;
}
.form .field.config-reset .legend.config-scope-note {
	color: #8A6212;
}

/* Campo com valores próprios por idioma: o que se vê aqui pode não ser o que
   o site mostra em cada idioma. Em "Global - todos os idiomas" um campo destes
   aparece vazio de propósito, e a nota diz onde estão os valores. */
.form .field.config-shadowed .legend.config-scope-note {
	color: #8A6212;
}
.form .field.config-shadowed .legend.config-scope-note b {
	color: #8A6212;
}

/* ---------------------------------------------------------------------------
   FORMULÁRIOS DECLARATIVOS (docs/md/forms_declarativos_plano.md, P1)
   O HTML é o dos ecrãs de hoje (.form > .top-actions + .notebook, .fields-group
   .cols2 > .col > .field > label); estas regras só cobrem o que o motor
   acrescenta: nós escondidos por condição, o selector de âmbito próprio, o
   topo escondido, grelhas de 3/4 colunas e os rádios.
   --------------------------------------------------------------------------- */
.form .form-node-hidden,
.form-node-hidden {
	display: none;
}

.fields-group.cols3 .col {
	width: 33.333%;
}
.fields-group.cols4 .col {
	width: 25%;
}

/* GRUPOS COLAPSÁVEIS (P10, docs/md/forms_grupos_colapsaveis_plano.md).
   O separador de um grupo com rótulo é o botão que o abre e fecha; o
   Helper_Form_Renderer desenha-o já no estado certo (o 1.º da página aberto).
   Fechar é `form-group-collapsed` e esconde o CORPO — tudo o que não é o
   cabeçalho. ⚠️ Nunca `form-node-hidden`: o validador v2 salta tudo o que
   está dentro dessa classe e não o recolhe, e os campos de um grupo fechado
   deixavam de ser gravados.
   Cabeçalhos fechados seguidos ficam juntos (os 40px do `.form .separator`
   eram para separar blocos de campos, não títulos). */
/* P10-B (pedido do Pedro, 2026-09-30): «visualmente está tudo muito plano e
   quando temos vários abertos quase não se distinguem os grupos». Cada
   SECÇÃO é um cartão: moldura, cantos, faixa de título com fundo e, quando
   aberta, os campos dentro da moldura. Vale também para a secção que não
   fecha (a única da página) — sem seta, o mesmo cartão.
   ⚠️ O padding é do CARTÃO e a faixa estende-se com margens negativas: o
   `.fields-group` tem `width: 100%` e um padding nele somava-se à largura. */
.form .form-node-group.form-section {
	margin: 0 0 12px;
	padding: 0 18px 6px;
	background: #fff;
	border: 1px solid #dde2e7;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(20, 30, 40, .04);
}
.form .form-node-group.form-section > p.separator {
	position: relative;
	margin: 0 -18px 14px;
	padding: 12px 18px;
	background: #f4f6f8;
	border: 0;
	border-bottom: 1px solid #e3e7eb;
	border-radius: 10px 10px 0 0;
	color: #2f3a44;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
}
/* O cabeçalho que abre e fecha. `p.` de propósito: tem de ganhar ao padding
   da faixa (0,3,1) para o recuo da divisa. */
.form .form-node-group.form-section > p.form-group-head {
	padding-left: 44px;
	cursor: pointer;
	user-select: none;
	transition: background-color .12s ease;
}
.form .form-node-group.form-section > .form-group-head::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -6px;
	border-right: 2px solid #6b7682;
	border-bottom: 2px solid #6b7682;
	transform: rotate(45deg);
	transition: transform .15s ease, margin-top .15s ease;
}
.form .form-node-group.form-section.form-group-collapsed > .form-group-head::before {
	margin-top: -4px;
	transform: rotate(-45deg);
}
.form .form-node-group.form-section > .form-group-head:hover {
	background: #eaeef2;
	color: #111;
}
.form .form-node-group.form-section > .form-group-head:focus {
	outline: none;
}
.form .form-node-group.form-section > .form-group-head:focus-visible {
	outline: 2px solid #2F6FED;
	outline-offset: -2px;
}
/* Fechada: só a faixa, com os quatro cantos. */
.form .form-node-group.form-section.form-group-collapsed {
	padding-bottom: 0;
}
.form .form-node-group.form-section.form-group-collapsed > .form-group-head {
	margin-bottom: 0;
	border-bottom: 0;
	border-radius: 10px;
	background: #f8f9fb;
}
.form .form-node-group.form-section.form-group-collapsed > .form-group-head:hover {
	background: #eef1f4;
}
/* (0,5,0) de propósito: tem de ganhar às regras de `display` dos cartões
   (`.form .form-node-group.sp-settings > .fields-group`, 0,4,0, mais abaixo). */
.form .form-node-group.form-group-collapsible.form-group-collapsed > :not(.form-group-head) {
	display: none;
}
/* Uma secção DENTRO de outra (o bloco de abas do banner, um sub-grupo) não é
   um cartão dentro de um cartão: fica um título simples. */
.form .form-section .form-node-group.form-section {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.form .form-section .form-node-group.form-section > p.separator {
	margin: 10px 0 10px;
	padding: 0 0 6px;
	background: transparent;
	border-bottom: 1px solid #e3e7eb;
	border-radius: 0;
	font-size: 14px;
}
@media (prefers-reduced-motion: reduce) {
	.form .form-node-group.form-section > .form-group-head,
	.form .form-node-group.form-section > .form-group-head::before { transition: none; }
}

/* FORMULÁRIO LIMPO (P10-B, decisão do Pedro sobre a maqueta, 2026-09-30).
   Uma moldura por campo: o rótulo fica por cima e só o CONTROLO tem moldura
   — a caixa à volta de cada campo (o `<label>` com borda) sai. O âmbito
   passa a um ponto discreto ao lado do rótulo, e a nota «Definido em…» só
   se vê quando o valor vem de outro sítio (`is-quiet` vem do renderer).
   Só nos formulários do motor (`.form-declarative`): os ecrãs manuais e os
   legados continuam com a caixa. */
.form.form-declarative .field {
	margin: 0 16px 16px 0;
}
.form.form-declarative .field > label,
.form.form-declarative .field > label:hover,
.form.form-declarative .field > label.readonly {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: default;
}
.form.form-declarative .field > label > span:first-child,
.form.form-declarative .field > label.switcher > span.title,
.form.form-declarative .field .input-group.date > .label {
	display: inline-block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: #34404b;
	text-transform: none;
	letter-spacing: normal;
	background: transparent;
	text-align: left;
	white-space: normal;
	vertical-align: top;
}
/* o chip de âmbito: um ponto com o nome, ao lado do rótulo */
.form.form-declarative .field .config-scope-chip,
.form.form-declarative .field label .config-scope-chip {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 6px 8px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 11px;
	line-height: 16px;
	color: #8a949e;
	vertical-align: top;
}
.form.form-declarative .field .config-scope-chip::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #7f99c4;
}
.form.form-declarative .field .config-scope-chip.scope-website::before      { background: #86b35c; }
.form.form-declarative .field .config-scope-chip.scope-website_view::before { background: #d4a94a; }
.form.form-declarative .field .config-scope-chip.scope-market::before       { background: #b287ba; }
.form.form-declarative .field label.has-scope-chip > span:first-child,
.form.form-declarative .field label.switcher.has-scope-chip span.title {
	padding-right: 0;
}
/* os controlos: a única moldura */
.form.form-declarative .field > label > input[type="text"],
.form.form-declarative .field > label > input[type="password"],
.form.form-declarative .field > label > input[type="number"],
.form.form-declarative .field > label > input[type="email"],
.form.form-declarative .field > label > textarea,
.form.form-declarative .field .input-group.date > input,
.form.form-declarative .field > label > .select2-container .select2-choice,
.form.form-declarative .field > label > .select2-container-multi .select2-choices,
.form.form-declarative .field > label > .field-reference {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 38px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #cfd6dd;
	border-radius: 7px;
	background: #fff;
	color: #26313b;
	font-size: 14px;
	line-height: 20px;
	box-shadow: none;
}
.form.form-declarative .field > label > textarea {
	min-height: 90px;
	resize: vertical;
}
.form.form-declarative .field > label > input:focus,
.form.form-declarative .field > label > textarea:focus,
.form.form-declarative .field .input-group.date > input:focus,
.form.form-declarative .field > label > .select2-container-active .select2-choice,
.form.form-declarative .field > label > .select2-container-active .select2-choices {
	border-color: #2f6fed;
	box-shadow: 0 0 0 3px rgba(47, 111, 237, .15);
	outline: none;
}
.form.form-declarative .field > label > input.form-readonly,
.form.form-declarative .field > label > textarea.form-readonly,
.form.form-declarative .field > label.readonly .select2-container .select2-choice {
	background: #f4f6f8;
	color: #5d6873;
}
/* select2: a largura toda (o plugin copia às vezes `display:inline-block`
   para o style do contentor, e ele encolhia até ao texto) */
.form.form-declarative .field > label > .select2-container {
	display: block !important;
	width: 100%;
}
/* o «×» de limpar ao lado da seta, na mesma linha */
.form.form-declarative .field > label > .select2-container .select2-choice abbr {
	top: 50%;
	right: 30px;
	margin-top: -6px;
}
/* select2: a seta sem a caixa cinzenta do tema */
.form.form-declarative .field > label > .select2-container .select2-choice {
	height: auto;
	line-height: 20px;
}
.form.form-declarative .field > label:hover .select2-container .select2-choice {
	background: #fff;
}
.form.form-declarative .field > label > .select2-container .select2-choice > span {
	font-size: 14px;
	color: #26313b;
}
.form.form-declarative .field > label > .select2-container .select2-choice .select2-arrow {
	border: 0;
	background: transparent;
	top: 50%;
	height: 20px;
	margin-top: -10px;
}
/* datas: o rótulo por cima, o ícone dentro do controlo */
.form.form-declarative .field .input-group.date {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent;
}
.form.form-declarative .field .input-group.date > input {
	padding-right: 40px;
}
.form.form-declarative .field .input-group.date > .input-group-addon {
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 38px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: #8a949e;
}
/* O ÍCONE DO CALENDÁRIO no campo (Pedro, 2026-10-02: «corrige o
   calendário»). A regra global `.fa-calendar::before` é a do ícone do
   CABEÇALHO/MENU (o PNG de 49×33 a 36px de altura): dentro do botão de 38×36
   do campo ficava reduzido, esbatido e a cair para baixo. Aqui é um
   calendário de traço, 16px, centrado, na cor dos ícones dos campos. */
.form.form-declarative .field .input-group.date > .input-group-addon {
	cursor: pointer;
	transition: color .15s ease;
}
.form.form-declarative .field .input-group.date > .input-group-addon:hover {
	color: #374151;
}
.form.form-declarative .field .input-group.date > .input-group-addon .fa-calendar {
	position: static;
	top: auto;
	display: block;
	width: 16px;
	height: 16px;
	margin: 0;
	line-height: 0;
}
.form.form-declarative .field .input-group.date > .input-group-addon .fa-calendar::before {
	display: block;
	width: 16px;
	height: 16px;
	background-image: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* interruptores: o rótulo por cima e o interruptor por baixo, como os outros */
.form.form-declarative .field > label.switcher {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0;
	align-items: center;
	cursor: pointer;
}
.form.form-declarative .field > label.switcher > .switchery {
	grid-row: 2;
	grid-column: 1 / -1;
	justify-self: start;
	margin: 0;
}
/* o interruptor: rótulo e ponto na 1.ª linha, o interruptor na 2.ª (as
   regras antigas punham-no à frente com `order`) */
.form.form-declarative .field > label.switcher > span.title {
	order: 0;
	grid-row: 1;
	grid-column: 1;
	flex: none;
}
.form.form-declarative .field > label.switcher > .config-scope-chip {
	order: 0;
	grid-row: 1;
	grid-column: 2;
	justify-self: start;
}
.form.form-declarative .field > label.switcher > .switchery {
	order: 0;
}
/* o interruptor em si (pedidos do Pedro: «enquadra-o melhor», e depois «ficam
   perdidos ali no meio… para o form não perder estrutura»): compacto como na
   maqueta — 38×22, botão de 16 — dentro de uma CAIXA da largura do campo e da
   altura de um input, com o estado escrito ao lado («Sim»/«Não», traduzidos,
   em data-on/data-off do <label>). A caixa é o ::before do <label> (item da
   grelha), por isso clicar em qualquer ponto dela muda o estado — o Switchery
   com um <label> por pai segue o `change` do input. O Switchery escreve
   as cores e a posição do botão no `style` (a posição medida pela largura,
   que dá 0 numa secção fechada): aqui manda o CSS, pelo estado do input,
   que vem imediatamente antes do interruptor. */
.form.form-declarative .field > label.switcher {
	grid-template-rows: auto 38px;
}
.form.form-declarative .field > label.switcher::before {
	content: "";
	grid-row: 2;
	grid-column: 1 / -1;
	align-self: stretch;
	box-sizing: border-box;
	border: 1px solid #cfd6dd;
	border-radius: 7px;
	background: #fff;
	transition: border-color .2s;
}
.form.form-declarative .field > label.switcher:hover::before {
	border-color: #aeb8c2;
}
.form.form-declarative .field > label.switcher > .switchery {
	align-self: center;
	z-index: 1;
	width: 36px;
	height: 20px;
	margin: 0 0 0 12px;
	border: 1px solid #c9d1d9 !important;
	border-radius: 11px;
	background-color: #dde2e7 !important;
	box-shadow: none !important;
	transition: background-color .2s, border-color .2s !important;
}
.form.form-declarative .field > label.switcher > .switchery > small {
	top: 2px;
	left: 2px !important;
	width: 16px;
	height: 16px;
	box-shadow: 0 1px 2px rgba(20, 30, 40, .25);
	transition: left .2s !important;
}
.form.form-declarative .field > label.switcher > input:checked + .switchery {
	border-color: #75ac1e !important;
	background-color: #75ac1e !important;
}
.form.form-declarative .field > label.switcher > input:checked + .switchery > small {
	left: 18px !important;
}
.form.form-declarative .field.switch-warning > label.switcher > input:checked + .switchery {
	border-color: #9f0707 !important;
	background-color: #9f0707 !important;
}
.form.form-declarative .field > label.switcher:hover > .switchery {
	border-color: #aeb8c2 !important;
}
/* o estado escrito: só onde o browser sabe `:has()` — sem ele, um «Não» fixo
   mentiria, e mais vale a caixa só com o interruptor */
@supports selector(:has(a)) {
	.form.form-declarative .field > label.switcher::after {
		content: attr(data-off);
		grid-row: 2;
		grid-column: 1 / -1;
		justify-self: start;
		align-self: center;
		z-index: 1;
		margin-left: 60px;
		font-size: 14px;
		line-height: 20px;
		color: #8a949e;
		pointer-events: none;
	}
	.form.form-declarative .field > label.switcher:has(> input:checked)::after {
		content: attr(data-on);
		color: #26313b;
	}
	.form.form-declarative .field > label.switcher:has(> input:disabled)::before {
		background: #f4f6f8;
	}
}
.form.form-declarative .field > label.switcher:hover > input:checked + .switchery {
	border-color: #689a1a !important;
}
/* datas: o ponto de âmbito vem a seguir ao grupo do controlo — sobe para a
   linha do rótulo, encostado à direita */
.form.form-declarative .field.form-type-date,
.form.form-declarative .field.form-type-datetime,
.form.form-declarative .field.form-type-time {
	position: relative;
}
.form.form-declarative .field.form-type-date > .config-scope-chip,
.form.form-declarative .field.form-type-datetime > .config-scope-chip,
.form.form-declarative .field.form-type-time > .config-scope-chip {
	position: absolute;
	top: 1px;
	right: 0;
	display: flex;
	margin: 0;
}
/* uma regra antiga dava-lhe `display:block`, e o ponto (::before) ficava
   inline, sem tamanho — o «Global» saía sem ponto */
.form.form-declarative .field.form-type-date > .config-scope-chip::before,
.form.form-declarative .field.form-type-datetime > .config-scope-chip::before,
.form.form-declarative .field.form-type-time > .config-scope-chip::before {
	display: block;
}
/* o editor deixa de ter caixa à volta do campo */
.form.form-declarative .field.tinymce-editor {
	margin-top: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}
/* editores: uma moldura com cantos (os menus ficam, por decisão do Pedro) */
.form.form-declarative .field.tinymce-editor .mce-tinymce {
	border: 1px solid #cfd6dd !important;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: none;
}
/* editor (TinyMCE 4, skin lightgray; pedido do Pedro: «melhora o aspeto
   gráfico do tinymce», com os menus): barras claras sem gradiente, botões
   lisos (fundo só ao passar ou quando activos), separadores finos entre os
   grupos, rodapé discreto. ⚠️ A regra global `.mce-tinymce button
   {display:block}` (topo do ficheiro) partia os botões de lista em dois —
   o botão e a seta — e a seta caía para a linha de baixo: aqui voltam a
   `inline-block`. */
.form.form-declarative .mce-tinymce .mce-menubar,
.form.form-declarative .mce-tinymce .mce-toolbar-grp,
.form.form-declarative .mce-tinymce .mce-statusbar {
	border: 0;
	background: #f7f9fb;
	background-image: none;
}
.form.form-declarative .mce-tinymce .mce-menubar {
	padding: 2px 4px;
	border-bottom: 1px solid #e6eaee;
}
.form.form-declarative .mce-tinymce .mce-toolbar-grp {
	padding: 4px 4px;
	border-bottom: 1px solid #e6eaee;
}
.form.form-declarative .mce-tinymce .mce-statusbar {
	border-top: 1px solid #e6eaee;
}
.form.form-declarative .mce-tinymce .mce-statusbar .mce-path-item {
	color: #8a949e;
	font-size: 12px;
}
.form.form-declarative .mce-tinymce .mce-edit-area {
	border: 0;
}
.form.form-declarative .mce-tinymce .mce-btn,
.form.form-declarative .mce-tinymce .mce-toolbar .mce-btn-group .mce-btn,
.form.form-declarative .mce-tinymce .mce-menubar .mce-menubtn {
	margin: 0 1px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	background-image: none;
	box-shadow: none;
	text-shadow: none;
}
.form.form-declarative .mce-tinymce .mce-btn:hover,
.form.form-declarative .mce-tinymce .mce-toolbar .mce-btn-group .mce-btn:hover,
.form.form-declarative .mce-tinymce .mce-menubar .mce-menubtn:hover,
.form.form-declarative .mce-tinymce .mce-btn:focus,
.form.form-declarative .mce-tinymce .mce-menubar .mce-menubtn.mce-active {
	border-color: transparent;
	background: #e8edf2;
	background-image: none;
	box-shadow: none;
}
.form.form-declarative .mce-tinymce .mce-btn.mce-active,
.form.form-declarative .mce-tinymce .mce-toolbar .mce-btn-group .mce-btn.mce-active,
.form.form-declarative .mce-tinymce .mce-btn.mce-active:hover {
	border-color: transparent;
	background: #dfe8d0;
	background-image: none;
	box-shadow: none;
}
.form.form-declarative .mce-tinymce .mce-btn.mce-disabled,
.form.form-declarative .mce-tinymce .mce-btn.mce-disabled:hover {
	background: transparent;
	opacity: .45;
}
.form.form-declarative .mce-tinymce .mce-btn button {
	display: inline-block;
	vertical-align: top;
}
.form.form-declarative .mce-tinymce .mce-splitbtn {
	white-space: nowrap;
}
.form.form-declarative .mce-tinymce .mce-splitbtn .mce-open {
	border-left: 0;
}
.form.form-declarative .mce-tinymce .mce-btn-group:not(:first-child) {
	margin-left: 4px;
	padding-left: 4px;
	border-left: 1px solid #dde3e9;
}
.form.form-declarative .mce-tinymce .mce-ico {
	color: #45515c;
}
.form.form-declarative .mce-tinymce .mce-caret {
	border-top-color: #6b7682;
}
.form.form-declarative .mce-tinymce .mce-menubtn button span,
.form.form-declarative .mce-tinymce .mce-listbox button span {
	color: #34404b;
	font-size: 13px;
}
/* árvores: tinham a borda de cima no cartão do campo, que saiu */
.form.form-declarative .field .tree-field {
	padding: 4px;
	border: 1px solid #cfd6dd;
	border-radius: 7px;
	background: #fff;
}
/* a árvore das categorias do item vem num slot com dois `.tree-field`
   encaixados: a moldura é só a de dentro */
.form.form-declarative .field.tree-field {
	padding: 0;
	border: 0;
}
/* botão colado ao campo (`.field.buttons`): era absoluto no canto da caixa,
   que saiu — passa a coluna própria, alinhado com a base do controlo */
.form.form-declarative .field.buttons {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 38px;
	column-gap: 8px;
	align-items: end;
}
.form.form-declarative .field.buttons > * {
	grid-column: 1 / -1;
}
.form.form-declarative .field.buttons > label {
	grid-column: 1;
	grid-row: 1;
	width: auto;
	gap: 0;
}
/* a regra antiga `.field.button-1 label` fazia do rótulo um flex com folga */
.form.form-declarative .field.buttons > label:not(.switcher) {
	display: block;
}
.form.form-declarative .field.buttons > button.field-button {
	grid-column: 2;
	grid-row: 1;
	position: static;
	width: 38px;
	height: 38px;
	border: 1px solid #cfd6dd;
	border-radius: 7px;
	background-color: #fff;
	background-size: 18px auto;
	cursor: pointer;
}
/* num interruptor o controlo é pequeno (52px): o botão encosta-se-lhe, em
   vez de ir para o fim da coluna do título */
.form.form-declarative .field.buttons.form-type-switch {
	display: block;
	position: relative;
}
.form.form-declarative .field.buttons.form-type-switch > button.field-button {
	position: absolute;
	top: auto;
	right: 3px;
	left: auto;
	bottom: 3px;
	width: 32px;
	height: 32px;
	border-color: transparent;
	border-radius: 5px;
	z-index: 2;
}
/* numa árvore o <label> é só o título (a árvore é irmã dele): o botão fica
   pequeno no canto da linha do título, sem a empurrar */
.form.form-declarative .field.buttons.form-type-tree {
	display: block;
	position: relative;
}
.form.form-declarative .field.buttons.form-type-tree > button.field-button {
	position: absolute;
	top: -5px;
	right: 0;
	width: 26px;
	height: 26px;
	background-size: 12px auto;
}
/* árvores (Dynatree; pedido do Pedro: «melhora o aspeto gráfico das
   árvores»): a skin de origem é Tahoma 10pt com sprites de 16px, pastas azuis
   e o seleccionado em verde itálico. Aqui: linhas de 26px com fundo ao passar,
   seta e caixa desenhadas em CSS, guias de indentação, sem ícones (a pasta lê-
   se pelo negrito e pela seta) e o seleccionado num verde claro da casa.
   Vale para TODAS as árvores do backoffice (pedidos do Pedro, a seguir:
   gestores de categorias e de ficheiros, e depois — por questionário — o
   gestor de páginas, os editores de blocos, as páginas dos banners e as
   categorias do leilão). Âmbito `html ul.dynatree-container`: este ficheiro
   só carrega no office, e o `html` dá a força para ganhar à skin do
   Dynatree (que usa !important no nó activo). */
html ul.dynatree-container {
	padding: 6px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 13.5px;
	overflow: auto;
}
html ul.dynatree-container ul {
	margin: 0 0 0 11px;
	padding: 0 0 0 10px;
	border-left: 1px solid #e3e8ed;
}
html ul.dynatree-container li {
	margin: 0;
	padding: 0;
	background-image: none;
}
html ul.dynatree-container span.dynatree-node {
	display: flex;
	align-items: center;
	min-height: 26px;
	margin: 1px 0;
	padding: 0 8px 0 2px;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .15s;
}
html ul.dynatree-container span.dynatree-node:hover {
	background-color: #f2f5f8;
}
html ul.dynatree-container span.dynatree-node a {
	margin: 0;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: #26313b;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 20px;
	vertical-align: middle;
	outline: none;
}
/* ao passar e com o foco só se limpa o fundo da skin — o peso e a cor são
   de quem é (pasta, seleccionado, activo): um `:focus` com peso próprio
   ganhava ao activo e tirava-lhe o negrito */
html ul.dynatree-container span.dynatree-node a:hover,
html ul.dynatree-container span.dynatree-node a:focus {
	border: 0;
	background: transparent;
	outline: none;
}
html ul.dynatree-container span.dynatree-folder a {
	font-weight: 600;
}
/* seta (pastas) e o espaço dela (folhas) */
html ul.dynatree-container span.dynatree-expander,
html ul.dynatree-container span.dynatree-connector {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: none;
}
html ul.dynatree-container span.dynatree-expander::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 6px;
	width: 6px;
	height: 6px;
	border: solid #7d8893;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(-45deg);
	transition: transform .15s;
}
html ul.dynatree-container span.dynatree-expanded > span.dynatree-expander::before {
	top: 5px;
	transform: rotate(45deg);
}
html ul.dynatree-container span.dynatree-expander:hover {
	background-color: #e3e8ed;
}
/* sem ícones de pasta/documento */
html ul.dynatree-container span.dynatree-icon {
	display: none;
}
html ul.dynatree-container span.dynatree-statusnode-error span.dynatree-icon,
html ul.dynatree-container span.dynatree-statusnode-wait span.dynatree-icon {
	display: inline-block;
}
/* caixa de marcar */
html ul.dynatree-container span.dynatree-checkbox,
html ul.dynatree-container span.dynatree-checkbox:hover {
	position: relative;
	flex: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0 6px 0 4px;
	border: 1.5px solid #b3bdc7;
	border-radius: 4px;
	background: #fff;
}
html ul.dynatree-container span.dynatree-node:hover > span.dynatree-checkbox {
	border-color: #8d99a5;
}
html ul.dynatree-container span.dynatree-selected > span.dynatree-checkbox {
	border-color: #75ac1e;
	background: #75ac1e;
}
html ul.dynatree-container span.dynatree-selected > span.dynatree-checkbox::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 4px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* parcialmente seleccionada (há um filho marcado): um traço */
html ul.dynatree-container span.dynatree-partsel:not(.dynatree-selected) > span.dynatree-checkbox::after {
	content: "";
	position: absolute;
	top: 5.5px;
	left: 2.5px;
	width: 8px;
	height: 2px;
	border-radius: 1px;
	background: #75ac1e;
}
/* seleccionado (caixa) ou activo (árvore de escolha única) */
html ul.dynatree-container span.dynatree-selected,
html ul.dynatree-container span.dynatree-active {
	background-color: #eff6e4;
}
html ul.dynatree-container span.dynatree-selected:hover,
html ul.dynatree-container span.dynatree-active:hover {
	background-color: #e6f0d6;
}
html ul.dynatree-container span.dynatree-selected a,
html ul.dynatree-container span.dynatree-active a {
	background: transparent !important;
	color: #3f6a0e !important;
	font-style: normal;
	font-weight: 600;
}
/* gestores: ao arrastar uma categoria ou página, o destino acende no verde da casa
   (a skin punha-o azul-escuro com !important) */
html ul.dynatree-container span.dynatree-drop-target.dynatree-drop-accept {
	background-color: #dfe8d0;
}
html ul.dynatree-container span.dynatree-drop-target.dynatree-drop-accept a {
	background: transparent !important;
	color: #3f6a0e !important;
}
html ul.dynatree-container span.dynatree-drag-source {
	background-color: #eef1f4;
	opacity: .6;
}
/* barra do âmbito/websites: o fundo é o da barra (a regra da barra pintava
   o <label> de branco, e ganhava por vir antes com a mesma força) */
.form.form-declarative .form-context-bar .field > label {
	background: transparent;
}
.form.form-declarative .config-scope-bar .legend.config-scope-legend {
	margin: 6px 0 0;
}
/* cor (minicolors): a caixa igual às outras, com a amostra dentro, à esquerda */
.form.form-declarative .field > label > .minicolors {
	display: block;
	position: relative;
	width: 100%;
	max-width: 260px;
}
.form.form-declarative .field > label > .minicolors > input.minicolors-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: auto;
	min-height: 38px;
	margin: 0;
	padding: 8px 12px 8px 42px;
	border: 1px solid #cfd6dd;
	border-radius: 7px;
	background: #fff;
	color: #26313b;
	font-size: 14px;
	line-height: 20px;
	box-shadow: none;
}
.form.form-declarative .field > label > .minicolors > input.minicolors-input:focus {
	border-color: #2f6fed;
	box-shadow: 0 0 0 3px rgba(47, 111, 237, .15);
	outline: none;
}
.form.form-declarative .field > label > .minicolors > .minicolors-swatch {
	top: 50%;
	left: 10px;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 5px;
	overflow: hidden;
}
.form.form-declarative .field > label > .minicolors > .minicolors-swatch .minicolors-swatch-color {
	border-radius: 5px;
}
/* erros: a moldura do controlo fica vermelha, não a caixa */
.form.form-declarative .field > label.validate-error,
.form.form-declarative .field > label.number-error {
	border: 0;
}
.form.form-declarative .field > label.validate-error > input,
.form.form-declarative .field > label.validate-error > textarea,
.form.form-declarative .field > label.validate-error .select2-choice,
.form.form-declarative .field > label.number-error > input {
	border-color: #c0392b;
}
/* notas e ajudas */
.form.form-declarative .legend.config-scope-note {
	margin: 6px 0 0;
	font-size: 12px;
}
.form.form-declarative .legend.config-scope-note.is-quiet {
	display: none;
}
.form.form-declarative .field p.tip {
	margin: 6px 0 0;
	font-size: 12px;
	color: #6b7682;
}
.form .form-scope-bar .form-scope-pending {
	color: #8A6212;
}
.form .radio-options {
	padding: 6px 0 6px 12px;
}
.form .radio-options label.radio {
	display: inline-block;
	border: 0;
	padding: 4px 16px 4px 0;
	cursor: pointer;
}
.form .radio-options label.radio input {
	display: inline-block;
	width: auto;
	margin-right: 6px;
}
.form .radio-options label.radio:hover {
	background: #fff;
}

/* SUPERFÍCIES DE MÓDULO no formulário do banner (office/cms/banner/edit/surfaces.phtml,
 * Fases 2-3 das superfícies): a caixa por baixo do título é a mesma da árvore de
 * páginas ao lado (`.tree-field`); dentro, uma linha por superfície — caixa e
 * texto na MESMA linha, sem o negrito em bloco que `.form label span` dá aos
 * títulos dos campos — em colunas que se ajustam à largura. */
.form .field.surfaces-field .surfaces-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2px 16px;
}
.form .field.surfaces-field label.surface-option {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 5px 8px;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}
.form .field.surfaces-field label.surface-option:hover {
	background: #fff;
}
.form .field.surfaces-field label.surface-option input {
	width: auto;
	margin: 0;
	flex: 0 0 auto;
}
.form .field.surfaces-field label.surface-option span {
	display: inline;
	margin: 0;
	font-size: 13px;
	font-weight: normal;
	color: #444;
	line-height: 1.3;
}
.form .field.surfaces-field .surfaces-list .help {
	grid-column: 1 / -1;
	margin: 8px 0 0;
}

/* «ONDE APARECE» com as duas caixas lado a lado (Pedro, 2026-10-02): a árvore
   de páginas à esquerda, as páginas de módulo à direita. As superfícies são
   uma lista com o ASPECTO DA ÁRVORE (uma página por linha, 14px, a mesma
   caixa) em grupos por área, dois grupos por linha; a caixa tem a altura da
   árvore (os 400px do `.tree-field-scroll`) e a explicação vai pequena e
   cinzenta no fundo. */
.form .form-node-group[data-node="where_sec"] .field.surfaces-field .surfaces-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 360px;
	max-height: 400px;
	overflow: auto;
	padding: 12px 14px;
}
.form .form-node-group[data-node="where_sec"] .field.surfaces-field .surfaces-groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px 24px;
	align-content: start;
	flex: 1;
}
.form .form-node-group[data-node="where_sec"] .field.surfaces-field .surfaces-group-title {
	margin: 0 0 4px;
	padding: 0 6px;
	color: #6B7280;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.form .form-node-group[data-node="where_sec"] .field.surfaces-field label.surface-option {
	padding: 4px 6px;
	border-radius: 6px;
}
.form .form-node-group[data-node="where_sec"] .field.surfaces-field label.surface-option:hover {
	background: #F3F4F6;
}
.form .form-node-group[data-node="where_sec"] .field.surfaces-field label.surface-option span {
	color: #2E3238;
	font-size: 14px;
}
.form .form-node-group[data-node="where_sec"] .field.surfaces-field label.surface-option:has(input:checked) span {
	font-weight: 600;
}
.form .form-node-group[data-node="where_sec"] .field.surfaces-field .surfaces-list .help {
	margin: 14px 0 0;
	padding-top: 10px;
	border-top: 1px solid #ECEEF1;
	color: #6B7280;
	font-size: 12px;
	line-height: 1.45;
}

/* Os assistentes de IA do banner, à cabeça do grupo «Imagens»: os dois botões
   e a explicação alinhados À ESQUERDA, com os campos (Pedro, 2026-10-02 —
   experimentou à direita e ao centro). */
.form .field.banner-ai-tools {
	margin-bottom: 14px;
}
.form .field.banner-ai-tools .banner-ai-tools-buttons {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 8px;
}
.form .field.banner-ai-tools .banner-ai-tools-buttons button {
	width: auto;
	margin: 0;
}
.form .field.banner-ai-tools .help {
	margin: 8px 0 0;
	color: #6B7280;
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
}
/*
 * Data, data-hora e hora nao usam <label>: usam o .input-group do Bootstrap,
 * que faz dos filhos celulas de tabela — o chip la dentro saia sem estilo
 * nenhum e empurrava o valor para outra linha. Fica FORA do grupo, alinhado a
 * direita por baixo dele, colado a nota de ambito.
 *
 * ⚠️ Nao vai para o canto superior do campo (onde esta o dos outros) porque
 * esse canto e do botao do calendario.
 */
.form .field.form-type-date > .config-scope-chip,
.form .field.form-type-datetime > .config-scope-chip,
.form .field.form-type-time > .config-scope-chip {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	max-width: max-content;
	margin: 6px 0 0 auto;
}
.form .field.form-masked input {
	color: #999;
	letter-spacing: 2px;
}
.form .tip.form-help {
	margin: 6px 12px 10px;
}
.form .form-file-current {
	color: #666;
}
.form input.form-readonly,
.form textarea.form-readonly {
	background: #FAFAFA;
	color: #666;
}

/* ---------------------------------------------------------------------------
   Formulários declarativos — P2 (pilotos cms_new e auction_lot)
   --------------------------------------------------------------------------- */

/* O lançador de IA de um campo (<field ai="…">): irmão do campo, por cima. */
.form .field.form-ai-launch {
	margin-bottom: 14px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.form .field.form-ai-launch button {
	width: auto;
}
/* `align: 'right'` no módulo do formulário (js/office/form.js, Office_Form.ai) */
.form .field.form-ai-launch.form-ai-launch-right {
	justify-content: flex-end;
}

/* Registo novo: o âmbito está preso em Global e o selector diz porquê. */
.form .form-scope-bar .form-scope-pinned {
	color: #8a6d3b;
}

/* Uma zona preguiçosa vazia não deve deixar buraco no ecrã. */
.form .form-lazy:empty {
	display: none;
}

/* Os botões do bloco "Forçar Licitação" (slot do item) numa só linha. */
.form .field.licitation-buttons {
	white-space: nowrap;
}

/* A pega de arrasto de cada linha da lista de atributos de um grupo (slot do
   formulário declarativo). Era um style="float: right" no HTML. */
.form .attributes-list .drag-icon {
	float: right;
}

/* ---------------------------------------------------------------------------
   Filtro "Website / idioma" da grelha (P3, formulários declarativos §1.3).
   Vive na linha de configuração, por cima dos filtros das colunas: é da grelha
   inteira, não de uma coluna. Abre em "Todos" e não persiste.
   --------------------------------------------------------------------------- */
/* O filtro "Website / idioma" vive na calha (`.datagrid-rail`) e é lá que
   está desenhado — uma fonte só. */

/* Selector do website de trabalho de um ecrã (P3, formulários declarativos §1.3). */
.work-scope {
	margin: 0 0 20px;
	padding: 12px 15px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
}

.work-scope label {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	color: #999;
	margin: 0 10px 0 0;
	vertical-align: middle;
}

.work-scope .select2-container {
	vertical-align: middle;
}

.work-scope .legend {
	margin: 8px 0 0;
}

/* Uma árvore de escolha dentro de um formulário não pode empurrar o ecrã: a
   das páginas de um banner tem 84 nós. (P3 — era um style em linha no PHTML.) */
.form .tree-field-scroll {
	max-height: 400px;
	overflow: auto;
}

/* ---------------------------------------------------------------------------
   A BARRA DE CONTEXTO de um formulário declarativo (P3, QA do Pedro).

   O "Âmbito do conteúdo" e o widget "Websites" respondem à mesma pergunta — a
   que websites e idiomas este registo pertence — e ficavam um por baixo do
   outro, cada um a meia largura, com metade do ecrã em branco. Ficam agora
   numa secção só, lado a lado e à largura toda, com um fundo que a separa dos
   campos: é a mesma secção em todos os formulários.
   --------------------------------------------------------------------------- */
.form .form-context-bar {
	background: #F4F6F7;
	border: 1px solid #E5E9EB;
	border-radius: 10px;
	padding: 14px 16px 10px;
	margin: 0 0 20px;
}

/* Dentro da barra o fundo é da SECÇÃO, não de cada campo: com os dois iguais
   o campo desaparecia dentro dela. */
.form .form-context-bar .config-scope-bar {
	margin-bottom: 0;
}

.form .form-context-bar .field label {
	background: #fff;
}

.form .form-context-bar .field {
	margin-bottom: 0;
}

.form .form-context-bar .col {
	vertical-align: top;
}

/* As duas notas ficam à mesma altura, sem empurrar a barra. */
.form .form-context-bar .legend,
.form .form-context-bar .tip {
	margin: 6px 0 0 12px;
	line-height: 16px;
	font-weight: normal;
}

/* ---------------------------------------------------------------------------
   MATRIZ DE PERMISSÕES GRANULARES (RBAC/RGPD, TOM11) — o slot `acl_matrix` do
   formulário declarativo config_user_role (P4). São, uma a uma, as
   declarações que estavam em `style="…"` dentro do PHTML antigo: nesta base o
   CSS nunca vai inline.
   --------------------------------------------------------------------------- */
.acl-matrix .acl-resource {
	margin-bottom: 18px;
	padding: 10px;
	border: 1px solid #eee;
	border-radius: 4px;
}
.acl-matrix .acl-resource h4 {
	margin: 0 0 8px;
}
.acl-matrix .acl-resource h4 small {
	color: #999;
}
.acl-matrix .acl-actions label.checkbox {
	display: inline-block;
	margin-right: 14px;
}
.acl-matrix .acl-fields {
	margin-top: 10px;
	width: auto;
}
.acl-matrix .acl-fields th {
	padding: 0 8px;
}
.acl-matrix .acl-fields td {
	padding: 2px 8px;
}
.acl-matrix .acl-fields th.acl-field-name {
	text-align: left;
	padding: 0 14px 0 0;
}
.acl-matrix .acl-fields td.acl-field-name {
	padding: 2px 14px 2px 0;
}
.acl-matrix .acl-fields td small {
	color: #bbb;
}

/* -------------------------------------------------------------------------
   Ciclo de vida de um acesso (P4, office/config/user/edit/lifecycle.phtml)

   O bloco tinha o aspecto escrito em `style="…"` dentro do PHTML — incluindo
   a cor do estado, que vinha de um array em PHP. Aqui é uma classe por
   estado: quem quiser mudar as cores muda-as num sítio.
   ------------------------------------------------------------------------- */
.access-lifecycle {
	margin: 10px 0;
	padding: 12px;
	border: 1px solid #eee;
	border-radius: 4px;
}
.access-lifecycle .access-state {
	margin: 0 0 8px 0;
}
.access-lifecycle .access-state strong {
	font-weight: bold;
}
.access-lifecycle .access-state-pending_approval strong,
.access-lifecycle .access-state-suspended strong {
	color: #e67e22;
}
.access-lifecycle .access-state-active strong {
	color: #27ae60;
}
.access-lifecycle .access-state-disabled strong,
.access-lifecycle .access-state-revoked strong {
	color: #c0392b;
}
.access-lifecycle p.separator {
	margin: 0 0 10px;
}

/* =====================================================================
   PERSONALIZAÇÃO DE FORMULÁRIOS (P5)
   =====================================================================
   Duas superfícies: o painel do ecrã de LISTA (escolher o formulário) e a
   TABELA de nós do editor.

   ⚠️ Os campos desta tabela não vivem dentro de um `<label>`, e é por isso que
   levam caixa própria: o office só estiliza `input` dentro de `.form label`, e
   um input filho directo de uma `div` sai sem moldura nenhuma.

   ⚠️ O `button` da plataforma mede 32px de altura (a normalização do QA da P4).
   Numa célula de tabela isso é uma linha inteira: o `↺` de repor é um botão
   compacto, declarado por cima da regra global e sem inventar um sistema novo
   — mesma moldura, mesmo raio, menos altura.
   ------------------------------------------------------------------------- */

/* ---- o painel do ecrã de lista ---- */
.form-personalize-panel {
	background: #fff;
	border-radius: 19px;
	margin: 25px 15px 0;
	padding: 20px 15px;
}

.form-personalize-picker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.form-personalize-picker label {
	font-size: 11px;
	font-weight: bold;
	color: #999;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0;
}

.form-personalize-note {
	margin: 12px 0 0;
	font-size: 12px;
	color: #7A7F88;
	line-height: 1.6;
}

/* ---- a tabela de nós do editor ---- */
.form-personalize {
	margin-top: 10px;
}

.form-personalize-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
}

.form-personalize-filter {
	width: 280px;
	height: 28px;
	padding: 0 10px;
	border: 1px solid #E5E5E5;
	border-radius: 8px;
	font-size: 13px;
	color: #4A4F58;
	background: #fff;
}

.form-personalize-count {
	font-size: 11px;
	font-weight: bold;
	color: #999;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.form-personalize-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #ECECEC;
	border-radius: 10px;
	font-size: 12px;
}

.form-personalize-table th {
	padding: 8px 8px;
	text-align: left;
	font-size: 10px;
	font-weight: bold;
	color: #999;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 1px solid #ECECEC;
	white-space: nowrap;
}

.form-personalize-table td {
	padding: 4px 8px;
	border-bottom: 1px solid #F4F4F4;
	vertical-align: middle;
}

.form-personalize-table tr:last-child td { border-bottom: 0; }

/* Uma linha com decisão vê-se de relance: é a pergunta que o ecrã responde. */
.form-personalize-table tr.is-set td { background: #F6FBEF; }

.form-personalize-table tr.fp-kind-page > td { background: #FAFAFA; }
.form-personalize-table tr.fp-kind-page.is-set > td { background: #F1F7E7; }

.form-personalize-table .fp-name {
	white-space: nowrap;
}

.form-personalize-table .fp-name code {
	font-size: 12px;
	color: #4A4F58;
}

.form-personalize-table .fp-name em {
	display: block;
	margin-left: 0;
	font-style: normal;
	font-size: 10px;
	color: #A9AEB6;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* A indentação diz a que contentor o nó pertence, sem uma coluna a mais. */
.fp-indent { display: inline-block; }
.fp-indent-0 { width: 0; }
.fp-indent-1 { width: 14px; }
.fp-indent-2 { width: 28px; }
.fp-indent-3 { width: 42px; }
.fp-indent-4 { width: 56px; }
.fp-indent-5 { width: 70px; }

.form-personalize-table .fp-input,
.form-personalize-table .fp-select {
	width: 100%;
	min-width: 90px;
	height: 26px;
	padding: 0 6px;
	border: 1px solid #E5E5E5;
	border-radius: 6px;
	background: #fff;
	font-size: 12px;
	color: #4A4F58;
}

.form-personalize-table .fp-position { min-width: 52px; width: 52px; }

.form-personalize-table .fp-flag { text-align: center; }

.form-personalize-table .fp-na {
	color: #C7CBD1;
	cursor: help;
}

.form-personalize-table .fp-col-flag { text-align: center; }
.form-personalize-table .fp-col-position { width: 60px; }
.form-personalize-table .fp-col-reset { width: 34px; }

.form-personalize-table .fp-row-reset {
	height: 22px;
	min-width: 22px;
	padding: 0 5px;
	margin: 0;
	font-size: 12px;
	line-height: 1;
	border-radius: 6px;
}

/* Uma tabela larga rola dentro de si, nunca empurra o formulário. */
.form-personalize {
	overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   A VISTA DE DESENHO da personalização (P6)
   app/default/views/scripts/office/config/form/edit/layout.phtml

   O corpo do editor deixou de ser uma tabela e passou a ter a forma que o
   RENDERER produz: o notebook das páginas, os grupos como caixas, os blocos de
   abas como notebooks aninhados, cada campo um cartão que se arrasta.

   ⚠️ Duas medidas saíram do spike P6.0 e não são decoração:

   1. `.fp-grip` — a PEGA. O `sortable` agarra só por ela, porque o centro de um
      grupo cai sempre em cima de um filho: sem pega, arrastar um grupo pelo
      corpo agarra um campo lá de dentro.
   2. `.fp-list-strip` — a FAIXA de largada de cada contentor. O jQuery UI dá a
      largada ao contentor MAIS INTERIOR (é o que faz o aninhamento funcionar),
      e por isso a lista de fora fica inalcançável pelo meio — está toda coberta
      pelos filhos. A faixa é a área que é só dela.
   --------------------------------------------------------------------------- */

.form-personalize-designer {
	display: block;
}

.fp-designer {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.fp-canvas {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- o notebook das páginas ---- */
.fp-pages-title {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 2px solid #E5E7EB;
}

.fp-pages-title > li {
	padding: 8px 14px 8px 32px;
	/* ⚠️ O ícone vai no ATALHO, com a cor: um `background:` abreviado numa regra
	   de estado reinicia o `repeat` e a posição, e o ícone passa a ladrilhar a
	   aba inteira. Uma regra por estado, cada uma completa. */
	background: #F3F4F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23444' stroke-width='1.3' stroke-linejoin='round'%3E%3Crect x='1.4' y='4.4' width='11.2' height='8.2' rx='1.6'/%3E%3Cpath d='M4.6 4.4V2.9a1.1 1.1 0 0 1 1.1-1.1h2.6a1.1 1.1 0 0 1 1.1 1.1v1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat 12px center;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	font-weight: 600;
	color: #4B5563;
}

	.fp-pages-title > li.active {
	background: #2F6FED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linejoin='round'%3E%3Crect x='1.4' y='4.4' width='11.2' height='8.2' rx='1.6'/%3E%3Cpath d='M4.6 4.4V2.9a1.1 1.1 0 0 1 1.1-1.1h2.6a1.1 1.1 0 0 1 1.1 1.1v1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat 12px center;
	color: #fff;
}

.fp-pages > .fp-page { display: none; }
.fp-pages > .fp-page.active { display: block; }

/* ---- as listas ---- */
.fp-list {
	list-style: none;
	margin: 0;
	padding: 4px 6px 8px;
	min-height: 30px;
	border: 1px dashed #D1D5DB;
	border-radius: 10px;
	background: #FCFCFD;
}

/* A faixa que é só do contentor: é por aqui que se lhe chega. */
.fp-list-strip {
	height: 10px;
	margin: 0 0 2px;
	border-radius: 5px;
}

.fp-list-strip:hover { background: #EEF2FF; }

.fp-tray {
	background: #FFF7ED;
	border-color: #FDBA74;
}

.fp-tray-note { margin: 4px 0; }

/* ---- os cartões ---- */
.fp-node {
	position: relative;
	margin: 4px 0;
	padding: 8px 10px 8px 28px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
}

.fp-node.fp-kind-group  { background: #F5F8FF; border-color: #C7D7FE; }
.fp-node.fp-kind-page   { background: #F5F3FF; border-color: #DDD6FE; }
.fp-node.fp-kind-action { background: #F9FAFB; }
.fp-node.fp-is-tabs     { background: #FFFBEB; border-color: #FDE68A; }
.fp-node.fp-is-own      { border-left: 3px solid #2F6FED; }
.fp-node.fp-selected    { box-shadow: 0 0 0 2px #2F6FED; }
/* ⚠️ FILTRAR É TIRAR O RESTO DA FRENTE, não esbatê-lo (QA da P7). Com 214
   nós no item, `opacity: .35` sobre tudo o que não casa dá uma página inteira
   de cinzento pálido — que se lê como "a lista desapareceu". O que não casa
   SAI (`fp-off`); um contentor que tenha um resultado lá dentro fica, mais
   apagado, porque é o contexto que diz ONDE o resultado está. */
.fp-node.fp-off         { display: none; }

/* ⚠️ UM CONTENTOR DE CONTEXTO NÃO SE APAGA COM `opacity` — ELA MULTIPLICA-SE.
   `opacity` cria um contexto de empilhamento e aplica-se à SUBÁRVORE inteira:
   um resultado dentro de `body > item_col > item_data > expert > estimate_row`,
   com os cinco a 0.55, fica a 0.05 — invisível, que foi exactamente o que se
   viu ao filtrar por "estima". Apaga-se só o CROMO DO PRÓPRIO nó (a etiqueta,
   a pega, o contador) e deixa-se a subárvore intacta, para que o resultado lá
   dentro se leia à mesma seja qual for a profundidade a que esteja. */
.fp-node.fp-dim {
	background: transparent;
	border-color: #EEF1F5;
}
.fp-node.fp-dim > .fp-node-head,
.fp-node.fp-dim > .fp-grip,
.fp-node.fp-dim > .fp-collapse,
.fp-node.fp-dim > .fp-count { opacity: .45; }

/* E o resultado salta à vista — é o que se foi lá procurar. */
.fp-node.fp-hit { background: #FFFBEB; border-color: #F59E0B; }

/* Os separadores do topo dizem em que aba está cada resultado: sem isto,
   filtrar por um campo de outra página dava um ecrã vazio com os resultados
   escondidos atrás de um separador fechado. */
.fp-pages-title > li.fp-tab-dim { opacity: .45; }
.fp-pages-title > li.fp-tab-hit { box-shadow: 0 -2px 0 0 #F59E0B inset; font-weight: 600; }

/* Enquanto se filtra não se arrasta (ver o `dragging()` do módulo): a pega
   deixa de convidar ao gesto que está desligado. */
.form-personalize-designer.fp-filtering .fp-grip { opacity: .3; cursor: default; }

.fp-grip {
	position: absolute;
	left: 8px;
	top: 9px;
	width: 12px;
	color: #9CA3AF;
	font-size: 12px;
	line-height: 1;
	letter-spacing: -2px;
	cursor: move;
	user-select: none;
}

.fp-node-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	cursor: pointer;
}

.fp-node-label { font-weight: 600; color: #111827; }

.fp-node-name {
	font-family: monospace;
	font-size: 11px;
	color: #6B7280;
}

.fp-node-kind {
	font-size: 11px;
	color: #9CA3AF;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.fp-badges { margin-left: auto; display: flex; gap: 4px; }

.fp-badge {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 10px;
	background: #F3F4F6;
	color: #6B7280;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.fp-badge-own  { background: #E0EAFF; color: #2F6FED; }
.fp-badge-lock { background: #FEF3C7; color: #92400E; }

/* ---- P7: de onde vem um atributo, e encolher um contentor ----
   O distintivo do GRUPO é o que torna cem cartões de atributo legíveis: sem
   ele são cem nomes técnicos seguidos, e quem personaliza não tem por onde
   pegar. `sem grupo` é o aviso de que aquele nunca se desenha. */
.fp-badge-group   { background: #ECFDF5; color: #047857; text-transform: none; letter-spacing: 0; }
.fp-badge-nogroup { background: #FEE2E2; color: #B91C1C; }

/* O triângulo de encolher e o contador de filhos vivem À ESQUERDA, na mesma
   goteira da pega — o cabeçalho é um flex e mete-los lá dentro empurrava os
   distintivos para outra linha em cada contentor. */
.fp-collapse {
	position: absolute;
	left: 8px;
	top: 24px;
	width: 12px;
	color: #6B7280;
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
}
.fp-collapse:focus { outline: 2px solid #2F6FED; outline-offset: 1px; }

.fp-count {
	position: absolute;
	left: 4px;
	top: 40px;
	min-width: 18px;
	padding: 1px 4px;
	border-radius: 8px;
	background: #F3F4F6;
	color: #6B7280;
	font-size: 10px;
	line-height: 1.4;
	text-align: center;
}

/* Encolhido: a lista desaparece e o cartão fica a dizer o que tem lá dentro.
   Não é um estado do formulário — é como quem personaliza arruma o ecrã. */
.fp-node.fp-collapsed > .fp-list,
.fp-node.fp-collapsed > .fp-tabs-title,
.fp-node.fp-collapsed > .fp-tab { display: none; }

/* O cartão a que se chegou pelo "Posicionar no formulário": um realce que
   passa, para o olho o encontrar entre cem. */
.fp-node.fp-focused { animation: fp-focus-pulse 1.6s ease-out 2; }
@keyframes fp-focus-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(47, 111, 237, 0.55); }
	70%  { box-shadow: 0 0 0 10px rgba(47, 111, 237, 0); }
	100% { box-shadow: 0 0 0 0 rgba(47, 111, 237, 0); }
}

.fp-focus-missing { background: #FEF3C7; border-left: 3px solid #F59E0B; padding: 8px 12px; }

/* O sítio onde o nó vai ficar, enquanto se arrasta: onde ele está é onde fica. */
.fp-placeholder {
	height: 34px;
	margin: 4px 0;
	border: 2px dashed #34D399;
	border-radius: 8px;
	background: #ECFDF5;
}

/* ---- as abas de um bloco de abas ---- */
.fp-tabs-title {
	list-style: none;
	margin: 8px 0 6px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 1px solid #E5E7EB;
}

.fp-tabs-title > li {
	padding: 5px 10px 5px 26px;
	background: #F3F4F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23444' stroke-width='1.3' stroke-linejoin='round'%3E%3Crect x='1.4' y='4.4' width='11.2' height='8.2' rx='1.6'/%3E%3Cpath d='M4.6 4.4V2.9a1.1 1.1 0 0 1 1.1-1.1h2.6a1.1 1.1 0 0 1 1.1 1.1v1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat 8px center;
	border-radius: 6px 6px 0 0;
	cursor: pointer;
	font-size: 12px;
}

.fp-tabs-title > li.active {
	background: #F59E0B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linejoin='round'%3E%3Crect x='1.4' y='4.4' width='11.2' height='8.2' rx='1.6'/%3E%3Cpath d='M4.6 4.4V2.9a1.1 1.1 0 0 1 1.1-1.1h2.6a1.1 1.1 0 0 1 1.1 1.1v1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat 8px center;
	color: #fff;
}

.fp-tab { display: none; }
.fp-tab.active { display: block; }

/* ---- o painel de propriedades ---- */
.fp-panel {
	flex: 0 0 300px;
	position: sticky;
	top: 12px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	padding: 14px;
}

.fp-panel-empty { color: #9CA3AF; font-size: 13px; }

.fp-panel-title { font-weight: 600; margin: 0 0 2px; }

.fp-panel-name {
	font-family: monospace;
	font-size: 11px;
	margin: 0 0 10px;
}

.fp-panel .field { margin-bottom: 10px; }

.fp-panel-movebox {
	border-top: 1px solid #F3F4F6;
	padding-top: 10px;
	margin-top: 10px;
}

.fp-panel-actions {
	display: flex;
	gap: 6px;
	border-top: 1px solid #F3F4F6;
	padding-top: 10px;
	margin-top: 10px;
}

/* Onde a guarda do "só aperta" recusaria, mostra-se a RAZÃO em vez de uma
   caixa: oferecer o que o motor vai ignorar é prometer uma coisa e fazer
   outra. */
.fp-locked {
	background: #FFFBEB;
	border-left: 3px solid #FCD34D;
	padding: 6px 8px;
	margin: 0 0 10px;
	border-radius: 0 6px 6px 0;
}

.fp-no-own { color: #92400E; font-size: 12px; }

/* Num ecrã estreito o painel passa para baixo do desenho em vez de o
   espremer. */
@media (max-width: 1100px) {
	.fp-designer { flex-wrap: wrap; }
	.fp-panel { flex-basis: 100%; position: static; }
}

/* ⚠️ A regra da P5 (`.form-personalize { overflow-x: auto }`) existia para a
   TABELA larga rolar dentro de si. No desenho não há tabela, e um contentor com
   `overflow` é um contentor de rolamento: o `position: sticky` do painel deixa
   de pegar dentro dele. */
.form-personalize.form-personalize-designer {
	overflow-x: visible;
}

/* ---------------------------------------------------------------------------
   UM ÍCONE SÓ PARA TODAS AS ABAS (decisão do Pedro, QA da P6)

   Até aqui cada aba trazia o seu ícone de um `icon="…"` no XML — vinte imagens
   diferentes, uma regra CSS por cada. Com a P6 passou a ser possível CRIAR
   abas, e essas nasciam sem ícone nenhum: o mesmo notebook mostrava umas com
   imagem e outras sem, e a diferença não queria dizer nada para quem olha.

   Passa a haver um ícone comum a todas — as da plataforma e as criadas no
   editor —, desenhado aqui e não num ficheiro: é um SVG embebido, nítido em
   qualquer densidade de ecrã, e não deixa mais um PNG para manter. Herda a
   opacidade do `li`, por isso a aba activa acende com o resto dela.

   ⚠️ Os ícones personalizados deixam de existir "para já": o `icon` continua
   declarado nos 101 sítios onde estava — é o registo do que cada aba queria
   dizer, e é o que torna esta decisão reversível numa linha —, mas não pinta
   nada. O `forms_inventory.php` di-lo, para não ser uma omissão silenciosa.

   ⚠️ O DASHBOARD não é apanhado por isto, e é de propósito: as abas dele têm
   ícones próprios em `<span class="icon">` e fundo preto, e a regra
   `.dashboard .notebook .notebook-title li` (0-4-0) ganha a esta (0-2-0) por
   especificidade — não por ordem. Um ícone de fundo aqui dar-lhe-ia dois.
   --------------------------------------------------------------------------- */
.notebook .notebook-title li {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23444' stroke-width='1.3' stroke-linejoin='round'%3E%3Crect x='1.4' y='4.4' width='11.2' height='8.2' rx='1.6'/%3E%3Cpath d='M4.6 4.4V2.9a1.1 1.1 0 0 1 1.1-1.1h2.6a1.1 1.1 0 0 1 1.1 1.1v1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;
	padding-left: 20px;
}





/* ==========================================================================
   P8 — A EXPORTAÇÃO PARA XML LOCAL, REVERSÍVEL
   O aviso da exportação viva no editor, o painel e os estados do histórico.
   ========================================================================== */

/* ---- o aviso no topo do editor ---- */
/* Depois de exportar, as decisões exportadas entram na LINHA DE BASE deste
   ecrã e passam a parecer decisões da plataforma — e o «Repor» já não as
   desfaz. Este aviso é o que impede isso de acontecer em silêncio. */
.fp-export-notice {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0;
	padding: 10px 14px;
	background: #EFF6FF;
	border-left: 3px solid #3B82F6;
	border-radius: 8px;
	font-size: 12px;
	color: #4B5563;
	line-height: 1.6;
}

.fp-export-notice p {
	margin: 0;
	flex: 1 1 340px;
}

.fp-export-notice code {
	font-size: 11px;
}

/* O ficheiro no disco já não é o que a exportação escreveu: anular substitui-o
   e essas alterações perdem-se. A cor diz que há aqui uma decisão a tomar. */
.fp-export-notice-diverged {
	background: #FEF3C7;
	border-left-color: #F59E0B;
}

.fp-export-history {
	font-size: 12px;
	white-space: nowrap;
}

/* ---- o painel do histórico ---- */
.form-export-panel {
	background: #fff;
	border-radius: 19px;
	margin: 25px 15px 0;
	padding: 20px 15px;
}

.form-export-note {
	margin: 0 0 12px;
	font-size: 12px;
	color: #7A7F88;
	line-height: 1.6;
}

.form-export-links,
.form-personalize-links {
	margin: 12px 0 0;
	font-size: 12px;
}

.form-personalize-note-inline {
	color: #7A7F88;
	margin-left: 8px;
}

/* Os `local/` sem registo: não se anulam por aqui, e escondê-los seria pior do
   que os listar sem botão — mandam no formulário na mesma. */
.form-export-orphans {
	margin: 16px 0 0;
	padding: 12px 14px;
	background: #FEF3C7;
	border-left: 3px solid #F59E0B;
	border-radius: 8px;
}

.form-export-orphans h3 {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: bold;
	color: #92400E;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.form-export-orphan-list {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.form-export-orphan-list th {
	text-align: left;
	font-size: 11px;
	color: #999;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 4px 8px 4px 0;
}

.form-export-orphan-list td {
	padding: 4px 8px 4px 0;
	border-top: 1px solid #FDE68A;
	color: #4B5563;
}

/* ---- os estados na grelha do histórico ---- */
.form-export-state {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
}

.form-export-state-live      { background: #D1FAE5; color: #065F46; }
.form-export-state-reverted  { background: #E5E7EB; color: #4B5563; }
.form-export-state-superseded{ background: #E5E7EB; color: #6B7280; }
.form-export-state-diverged  { background: #FEF3C7; color: #92400E; }

.form-export-state-note {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: #9CA3AF;
	line-height: 1.4;
}

.form-export-revert {
	margin-top: 6px;
}

/* ---------------------------------------------------------------------------
 * IDIOMAS (gestão de idiomas, L1): a bandeira na grelha e no formulário, e o
 * painel «Onde é usado». ⚠️ Este ficheiro é servido sem ?v=: uma alteração
 * aqui só se vê com refresh forçado.
 * ------------------------------------------------------------------------- */
.datagrid-flag {
	width: 18px;
	height: 13px;
	vertical-align: middle;
	margin-right: 6px;
	border: 1px solid #ddd;
}

.datagrid-flag-none {
	color: #9CA3AF;
}

.form-locale-container .locale-flag-preview {
	width: 36px;
	height: 27px;
	margin: 6px 0 0 0;
	border: 1px solid #ddd;
	vertical-align: middle;
}

.form-locale-container .locale-flag-preview.is-hidden {
	display: none;
}

.form-locale-container .locale-usage {
	width: 100%;
	margin-bottom: 18px;
}

.form-locale-container .locale-usage th,
.form-locale-container .locale-usage td {
	padding: 6px 10px;
}

.form-locale-container .locale-usage td.num,
.form-locale-container .locale-usage th.num {
	text-align: right;
	white-space: nowrap;
	width: 90px;
}

.form-locale-container .locale-usage tr.usage-off td,
.form-locale-container .usage-off {
	color: #9CA3AF;
}

.form-locale-container .locale-usage tr.has-rows td.num {
	font-weight: bold;
}

.form-locale-container .locale-blockers {
	margin: 0 0 14px 18px;
}

.form-locale-container .locale-blockers li {
	color: #c0392b;
	line-height: 1.5;
}

.form-locale-container .usage-ok {
	color: #27ae60;
}

/* =========================================================================
 * TRADUÇÕES DE INTERFACE (gestão de idiomas, L4)
 *
 * O painel acima da grelha (âmbito, contagens por traduzir, chaves em falta)
 * e as células de tradução, que dizem de onde vem o valor: da instalação, do
 * website, ou de lado nenhum (a chave é a resposta).
 * ========================================================================= */

.translation-summary {
	width: 100%;
	padding: 12px 16px;
	margin-bottom: 12px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 6px;
	box-sizing: border-box;
}

.translation-summary p {
	margin: 0 0 6px;
	line-height: 1.6;
}

.translation-summary p:last-child {
	margin-bottom: 0;
}

.translation-summary .translation-hint {
	color: #6B7280;
}

.translation-summary .translation-count {
	display: inline-block;
	margin-right: 12px;
	padding: 1px 8px;
	border-radius: 10px;
	background: #F3F4F6;
	color: #6B7280;
}

.translation-summary .translation-count.has-gap {
	background: #FEF3C7;
	color: #92400E;
	font-weight: bold;
}

.translation-summary .translation-missing button {
	margin-left: 10px;
	vertical-align: middle;
}

/* A célula: o que está a herdar da instalação lê-se mais claro do que o que
   este website definiu, e o que não existe em lado nenhum diz-se com um
   travessão em vez de um vazio — um vazio não se distingue de uma célula por
   carregar ([[feedback_sample_data_measured]]). */
.datagrid td.translation-cell {
	max-width: 380px;
	word-break: break-word;
}

.datagrid td.translation-cell.from-inherited .current-value {
	color: #6B7280;
	font-style: italic;
}

.datagrid td.translation-cell.from-none .current-value:empty::before {
	content: '—';
	color: #D1D5DB;
}

.datagrid td.translation-cell-default {
	background: #F9FAFB;
}

.form .field.translation-value.from-inherited textarea {
	background: #F9FAFB;
}

/* ==========================================================================
   PAINÉIS DA LOJA (F2) — mosaicos e cartões de secção
   --------------------------------------------------------------------------
   O separador Canais do item e o bloco "Forçar Licitação" da listagem em
   leilão. Segue a linguagem visual dos ecrãs de análise (cartão branco, filete
   verde, número grande, rótulo em maiúsculas), com PREFIXO PRÓPRIO `.sp-`:
   o `.aiq-` é do ecrã de qualidade das gerações e diz-se lá que existe para
   não colidir com o office — pedir emprestado um prefixo de outro programa
   ataria os dois ecrãs à mesma folha de estilo.
   QA da F2, ponto 9 (2026-09-15).
   ========================================================================== */

/* --- mosaicos de resumo --------------------------------------------------- */
.sp-kpis { display: flex; flex-wrap: wrap; margin: 0 -8px 18px; }
.sp-kpi { flex: 1 1 180px; margin: 0 8px 12px; }
.sp-kpi-inner {
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 8px;
	border-top: 3px solid #a6ce39;
	padding: 14px 16px;
	height: 100%;
	box-sizing: border-box;
}
.sp-kpi .sp-kpi-n { font-size: 26px; font-weight: bold; color: #3d4249; line-height: 1.1; }
.sp-kpi .sp-kpi-l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a9099; margin-top: 5px; }
.sp-kpi .sp-kpi-h { font-size: 11px; color: #a2a7ae; margin-top: 3px; line-height: 1.5; }
.sp-kpi.is-off .sp-kpi-inner { border-top-color: #cfd3d8; }
.sp-kpi.is-off .sp-kpi-n { color: #8a9099; }
.sp-kpi.is-live .sp-kpi-inner { border-top-color: #4a90d9; }
.sp-kpi.is-live .sp-kpi-n { color: #2f6ea8; }
/* ⚠️ Faltava o `is-warn`, e o mosaico usa-o: `backorder` («Por encomenda»)
   caía no filete VERDE da base e lia-se como saudável. O `is-ok` é que é a
   base — esse não precisa de regra. */
.sp-kpi.is-warn .sp-kpi-inner { border-top-color: #e8b23a; }
.sp-kpi.is-warn .sp-kpi-n { color: #a8760f; }

/* --- cartões de secção ---------------------------------------------------- */
.sp-card {
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 8px;
	margin-bottom: 18px;
	overflow: hidden;
}
.sp-card > .sp-head { padding: 14px 20px 12px; border-bottom: 1px solid #f1f1f1; }
.sp-card > .sp-head h3 {
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	color: #3d4249;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.sp-card > .sp-head .sp-sub { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: #7a8089; }
.sp-card > .sp-head .sp-sub b { color: #5a5f66; }
.sp-card > .sp-body { padding: 6px 20px 16px; }
.sp-card > .sp-body.is-tight { padding: 14px 20px 16px; }
.sp-card > .sp-foot {
	padding: 10px 20px;
	background: #fafbfc;
	border-top: 1px solid #f1f1f1;
	font-size: 12px;
	line-height: 1.6;
	color: #7a8089;
}

/* --- tabelas dos painéis --------------------------------------------------
   A tabela desliza dentro do cartão e o cartão fica quieto (a lição do
   datagrid: arrastar a barra não pode levar o resto do ecrã atrás). */
.sp-scroll { overflow-x: auto; }
table.sp-t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.sp-t th {
	text-align: left;
	padding: 9px 10px;
	border-bottom: 1px solid #e3e5e8;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8a9099;
	white-space: nowrap;
}
table.sp-t td { padding: 9px 10px; border-bottom: 1px solid #f4f4f4; vertical-align: middle; color: #4a4f56; }
table.sp-t tr:last-child td { border-bottom: 0; }
table.sp-t tbody tr:hover td { background: #fbfcfa; }
table.sp-t th.num, table.sp-t td.num { text-align: right; white-space: nowrap; width: 110px; }
table.sp-t th.wide, table.sp-t td.wide { width: auto; }
table.sp-t td.strong { font-weight: bold; color: #3d4249; }
table.sp-t td a { color: #4a7c1f; text-decoration: none; font-weight: bold; }
table.sp-t td a:hover { text-decoration: underline; }
table.sp-t select { max-width: 200px; }
.sp-empty { color: #9aa0a8; font-style: italic; padding: 14px 0; font-size: 13px; }
.sp-muted { color: #9aa0a8; }

/* --- etiquetas de estado --------------------------------------------------
   O estado lê-se pela FORMA e não só pela palavra: uma grelha de listagens
   percorre-se com o olho. */
.sp-tag {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 11px;
	font-size: 11px;
	line-height: 17px;
	font-weight: bold;
	white-space: nowrap;
	background: #f1f2f4;
	color: #7a8089;
	border: 1px solid #e3e5e8;
}
.sp-tag.is-ok   { background: #f1f7ec; color: #3d5a2a; border-color: #d5e6c4; }
.sp-tag.is-live { background: #eef5fc; color: #2f6ea8; border-color: #cfe2f4; }
.sp-tag.is-warn { background: #fff8e8; color: #a8760f; border-color: #f0dcae; }
.sp-tag.is-off  { background: #f6f7f8; color: #9aa0a8; border-color: #e7e9eb; }

/* ---------------------------------------------------------------------------
   CRÉDITO DE UMA EMPRESA (loja, Fase 6).

   ⚠️ ESPAÇAMENTO PELO RITMO QUE O OFFICE JÁ TEM — 6 · 12 · 14 · 18 · 20 —, não
   por números novos. A QA do Pedro (2026-09-17) apanhou o painel colado ao
   grupo de campos de cima e com um vão grande dentro do cartão: o resumo
   começava onde a ajuda do campo acabava, sem nada a dizer que era outra
   coisa.

   As quatro decisões, e cada uma tem uma razão:
   · 20px acima do painel  — é a mesma medida do padding lateral dos cartões;
     separa «o que se edita» de «o que se lê».
   · 20px entre os KPIs e o cartão — um pouco mais do que os 18 de origem,
     porque aqui os KPIs e o cartão são dois blocos de leitura seguidos.
   · a barra encosta ao cabeçalho (4px) e afasta-se do que vem a seguir (16px):
     ela pertence ao número que está acima, não à lista que está abaixo.
   · a mensagem de vazio encolhe (10/4 em vez de 14/14) — um cartão que só tem
     uma linha não precisa do vão de um que tem uma tabela.
--------------------------------------------------------------------------- */
.company-credit { margin-top: 20px; }
.company-credit .sp-kpis { margin-bottom: 20px; }

.company-credit .cc-bar {
	background: #f1f3f5;
	border-radius: 3px;
	height: 8px;
	width: 100%;
	overflow: hidden;
	margin: 4px 0 16px;
}
.company-credit .cc-bar-fill {
	display: block;
	height: 8px;
	border-radius: 3px;
	background: #9aa0a8;
	transition: width .2s ease;
}
.company-credit .cc-bar-fill.is-full { background: #e8b23a; }

/* A tabela é o conteúdo principal do cartão quando existe: encosta ao
   cabeçalho e deixa respirar a nota que vem depois dela. */
.company-credit .sp-scroll { margin-top: 4px; }
.company-credit .sp-body > .sp-sub { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #7a8089; }
.company-credit .sp-body > .sp-sub b { color: #5a5f66; }
.company-credit .sp-empty { padding: 10px 0 4px; }

.company-credit .sp-t td.num.strong { font-weight: bold; }
.company-credit .sp-t tr.is-late td { background: #fffaf0; }
.company-credit .sp-card > .sp-head h3 .sp-tag { margin-left: 8px; vertical-align: middle; }

/* --- tira de factos ------------------------------------------------------
   O que o operador LÊ, separado do que ele PREENCHE: a listagem, o leilão, o
   estado e a licitação actual não são campos e não se misturam com eles. */
.sp-facts {
	display: flex;
	flex-wrap: wrap;
	background: #fafbfc;
	border: 1px solid #eef0f2;
	border-radius: 6px;
	padding: 10px 4px;
	margin-bottom: 16px;
}
.sp-fact { flex: 1 1 150px; padding: 2px 14px; min-width: 130px; border-left: 1px solid #eef0f2; }
.sp-fact:first-child { border-left: 0; }
.sp-fact .sp-fact-l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a9099; }
.sp-fact .sp-fact-v { font-size: 14px; color: #3d4249; margin-top: 3px; line-height: 1.4; }
.sp-fact .sp-fact-v b { font-weight: bold; }

/* --- formulário dentro de um cartão (o "Forçar Licitação") ----------------- */
.sp-card .sp-form { display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0 -8px; }
.sp-card .sp-form .sp-f { flex: 1 1 220px; max-width: 420px; margin: 0 8px 4px; min-width: 180px; }
.sp-card .sp-form .sp-f > label { display: block; }
.sp-card .sp-form .sp-f > label > span {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #8a9099;
	margin-bottom: 5px;
}
.sp-card .sp-form .sp-f input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid #d8dbdf;
	border-radius: 6px;
	font-size: 14px;
	color: #3d4249;
	background: #fff;
}
.sp-card .sp-form .sp-f input[readonly] { background: #f6f7f8; color: #6b7178; }
.sp-card .sp-form .sp-f .select2-container { width: 100% !important; }
/* As acções vivem no rodapé do cartão — o que se FAZ, separado do que se
   preenche (QA da F2, 3.ª ronda). */
.sp-card > .sp-foot.licitation-buttons { white-space: normal; }
.sp-card > .sp-foot button,
.sp-card > .sp-foot .button { margin: 2px 6px 2px 0; padding: 9px 14px; vertical-align: middle; }
.sp-card > .sp-foot button:last-child { margin-right: 0; }

/* --- um GRUPO do formulário declarativo como cartão -----------------------
   `<group cols="1" label="…" class="sp-settings">` desenha o rótulo dentro do
   seu <div>: é esse o cabeçalho. Os campos lá dentro continuam a ser os do
   motor (com a etiqueta de âmbito e o botão do campo), só o contentor muda.
   QA da F2, 4.ª ronda (2026-09-15). */
.form .form-node-group.sp-settings {
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 8px;
	margin-bottom: 18px;
	padding: 0 0 6px;
	overflow: hidden;
}
.form .form-node-group.sp-settings > p.separator {
	margin: 0 0 6px;
	padding: 14px 20px 12px;
	border-bottom: 1px solid #f1f1f1;
	border-top: 0;
	background: transparent;
	font-size: 14px;
	font-weight: bold;
	color: #3d4249;
	text-transform: uppercase;
	letter-spacing: .04em;
}
/* ⚠️ A grelha de colunas do motor é uma TABELA (`display: table` + `.col` em
   `table-cell`, larguras em %): sem a margem de cada campo os conteúdos ficam
   encostados e o botão do campo aterra em cima da coluna seguinte. Dentro
   deste cartão a linha passa a flex com goteira própria — muda só aqui, e
   ganha a quebra em ecrãs estreitos que a tabela não tem. */
.form .form-node-group.sp-settings > .fields-group {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 8px 20px 16px;
	gap: 4px 24px;
	/* ⚠️ `.fields-group` tem `width: 100%`: sem isto o padding SOMA-SE à largura
	   e a última coluna sai cortada pelo `overflow: hidden` do cartão. */
	box-sizing: border-box;
}
/* As três colunas com a mesma altura e as ajudas alinhadas em baixo: a linha
   lê-se de uma vez em vez de três blocos de alturas diferentes. */
.form .form-node-group.sp-settings > .fields-group > .col {
	display: flex;
	flex-direction: column;
	width: auto;
	flex: 1 1 270px;
	min-width: 250px;
}
.form .form-node-group.sp-settings > .fields-group > .col > .field {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.form .form-node-group.sp-settings .field { margin-right: 0; }
.form .form-node-group.sp-settings .field label { margin-top: 0; box-sizing: border-box; }
.form .form-node-group.sp-settings .field p.tip:last-child { margin-top: auto; padding-top: 6px; }
/* O botão do campo (reinicializar as horas) mora no canto do PRÓPRIO campo: o
   espaço reservado encolhe de 100px para 64px, senão abre um vazio ao lado. */
.form .form-node-group.sp-settings .field.button-1 label { width: calc(100% - 64px); }
.form .form-node-group.sp-settings .field p.tip {
	font-size: 11px;
	line-height: 1.55;
	color: #8a9099;
	margin: 6px 2px 0;
}
.form .form-node-group.sp-settings .field .legend.config-scope-note { font-size: 11px; margin: 6px 2px 0; }

/* O select2 dentro de um painel: o plugin CLONA as classes do elemento no
   contentor que desenha, por isso a largura pede-se pelo nome do campo e não
   pelo `select` (que passa a estar escondido). */
.select2-container.channels-relist-auction { width: 190px; }
.sp-card .sp-form .sp-f .select2-container { width: 100% !important; }

/* A pega de arrasto das linhas da grelha de lotes de um leilão diz-se pelo
   cursor (a grelha é ordenável; QA da F2, ponto 1). */
.datagrid-container.auction_lot .drag-icon { cursor: move; }


/* --- a tabela de um PAINEL recebe CAMPOS e ACÇÕES (F5, QA do Pedro) -------
   Os três separadores da listagem de loja (Preços, Stock, Canais) nasceram com
   `table.datagrid` — o componente da GRELHA, desenhado para viver dentro de um
   `.datagrid-container`. Fora dele dá cabeçalho preto de ponta a ponta, células
   sem goteira e — porque o office só estiliza inputs dentro de `<label>`
   (`.form label input`, 0-2-1) — campos SEM CAIXA NENHUMA, que o operador lê
   como texto solto.
   É o MESMO erro que a ficha da encomenda pagou na F4 (bloco aqui em baixo, e
   lá está dito): a tabela de um painel é a `.sp-t`, nunca a `.datagrid`. O que
   faltava à `.sp-t` para receber uma grelha EDITÁVEL está aqui — e nenhuma
   regra de cima é alterada. */
table.sp-t th.tight, table.sp-t td.tight { width: 1%; white-space: nowrap; }
table.sp-t th.acc,   table.sp-t td.acc   { width: 1%; white-space: nowrap; text-align: right; }

/* ⚠️ Sem esta regra o campo sai sem borda: `.form label input` não apanha um
   input dentro de um `<td>`, e no office não há regra genérica para
   `input[type=text]`. A especificidade (0-3-2) fica acima do tema. */
.form table.sp-t input[type="text"].sp-in,
table.sp-t input[type="text"].sp-in {
	display: block;
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0 9px;
	box-sizing: border-box;
	border: 1px solid #d8dbdf;
	border-radius: 6px;
	background: #fff;
	color: #3d4249;
	font: inherit;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.form table.sp-t input[type="text"].sp-in:focus,
table.sp-t input[type="text"].sp-in:focus {
	border-color: #a8c22e;
	outline: none;
	box-shadow: 0 0 0 3px rgba(168, 194, 46, .16);
}
table.sp-t td.num input.sp-in { text-align: right; }
table.sp-t input.sp-in::placeholder { color: #b6bbc2; font-style: italic; }

/* A janela da promoção é UM facto com duas pontas: lê-se numa linha só.
   ⚠️ A regra de cima é 0-3-2 e traz `display: block` — um `td.sp-win .sp-in`
   (0-2-1) PERDE e os dois campos empilham-se, com a seta órfã pelo meio.
   O selector daqui repete o `input[type="text"]` para ficar acima dela. */
table.sp-t td.sp-win { white-space: nowrap; }
.form table.sp-t td.sp-win input[type="text"].sp-in,
table.sp-t td.sp-win input[type="text"].sp-in {
	display: inline-block;
	/* cabe o «AAAA-MM-DD HH:MM» que o calendário escreve */
	width: 146px;
	vertical-align: middle;
}
table.sp-t td.sp-win .sp-arrow { display: inline-block; padding: 0 8px; color: #b6bbc2; vertical-align: middle; }

/* Uma linha AINDA SEM valor gravado não grita: o estado está na etiqueta. */
table.sp-t tr.is-unset td { background: #fcfcfd; }
table.sp-t tr.is-unset:hover td { background: #fbfcfa; }

/* A moeda não se escolhe — mostra-se como um facto da lista, não como campo. */
.sp-cur {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 4px;
	background: #f1f2f4;
	border: 1px solid #e3e5e8;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: .04em;
	color: #6b7178;
}
.sp-code {
	font-family: Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 11px;
	font-weight: normal;
	color: #9aa0a8;
	margin-left: 6px;
}
table.sp-t td .sp-tag { margin-left: 6px; }
table.sp-t td small { display: block; color: #9aa0a8; font-size: 11px; margin-top: 2px; }

/* ⚠️ `table.sp-t td a` (0-1-2) pinta os links a verde e a negrito — o que está
   certo para um link e errado para um BOTÃO, que traz a sua própria cor. */
table.sp-t td a.button { font-weight: 500; color: #4A4F58; }
table.sp-t td a.button.blue,
table.sp-t td a.button.green,
table.sp-t td a.button:hover.blue,
table.sp-t td a.button:hover.green { color: #fff; }
table.sp-t td a.button.red { color: #A20000; }
table.sp-t td a.button.red:hover { color: #fff; }

/* O botão de uma LINHA é menor que o do cabeçalho do ecrã. */
table.sp-t .button {
	height: 28px;
	padding: 0 12px;
	margin: 0;
	font-size: 12px;
}

/* =====================================================================
   FICHA DA ENCOMENDA E ENCOMENDA MANUAL (Fase 4 da loja, QA do Pedro)
   =====================================================================
   Os separadores da encomenda nasceram com `table.datagrid` (o componente da
   GRELHA: cabecalho preto sticky, desenhado para viver dentro de um
   `.datagrid-container`) e com `fields-group cols2` para os paineis de accao.
   Numa ficha isso da' cabecalho pesado, colunas sem largura, numeros
   alinhados a' esquerda (as vistas pediam `.numbers` e `.note`, que NAO
   existiam aqui) e caixas de check com o texto por baixo.

   Aqui esta' o vocabulario proprio, e nenhuma regra de cima e' alterada:
     .order-table   tabela-razao leve (cabecalho claro, numeros tabulares,
                    linha-filha com pega, tfoot de totais)
     .order-pill    estado numa palavra (ok / wait / bad / off / type)
     .order-empty   o vazio dito por extenso, nao uma celula de tabela
     .order-panel   a gaveta de accao (grelha auto-fit + rodape a' direita)
     .order-sum     a faixa de numeros (total / pago / em divida)
     .order-head    o cabecalho da ficha (numero, estados, metadados)
     .order-timeline  a linha do tempo como linha do tempo
   ===================================================================== */

/* ---- tabela-razao ---------------------------------------------------- */
.order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
	background: #fff;
}
.order-table thead th {
	background: #f5f6f8;
	color: #6b7280;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	text-align: left;
	padding: 10px 13px;
	border-bottom: 1px solid #e3e5e8;
	white-space: nowrap;
}
.order-table td {
	padding: 11px 13px;
	border-bottom: 1px solid #eff1f3;
	color: #3d4249;
	vertical-align: middle;
}
.order-table tbody tr:hover td { background: #fafbfc; }
.order-table tbody tr:last-child td { border-bottom: 1px solid #e3e5e8; }

/* Os numeros alinham-se pela direita e com algarismos de largura fixa: uma
   coluna de dinheiro le-se pela virgula, nao palavra a palavra. */
.order-table .num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.order-table .id {
	width: 1%;
	white-space: nowrap;
	color: #8a9099;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}
.order-table .acts {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}
.order-table .acts button,
.order-table .acts .button { margin-left: 5px; }
.order-table .meta {
	display: block;
	margin-top: 2px;
	color: #8a9099;
	font-size: 11px;
}
.order-table .meta b { color: #6b7280; font-weight: 600; }
.order-table td.strong { font-weight: 600; }

/* A linha FILHA (o premio de comprador, um servico) pendura-se na mae com uma
   pega desenhada — o `↳` de texto nao chegava para se ver a hierarquia. */
.order-table tr.child td { background: #fcfcfd; }
.order-table tr.child td.hang {
	position: relative;
	padding-left: 30px;
}
.order-table tr.child td.hang::before {
	content: "";
	position: absolute;
	left: 13px;
	top: -10px;
	bottom: 50%;
	width: 8px;
	border-left: 1px solid #ccd2d8;
	border-bottom: 1px solid #ccd2d8;
	border-radius: 0 0 0 4px;
}
.order-table tr.void td {
	color: #9aa1a9;
	text-decoration: line-through;
	text-decoration-color: #d7dbe0;
}

/* O rodape de totais e' parte da tabela: le-se na mesma coluna dos valores. */
.order-table tfoot td {
	border-bottom: none;
	padding: 7px 13px;
	color: #5a5f66;
	background: #fff;
}
.order-table tfoot tr:first-child td { padding-top: 14px; }
.order-table tfoot .label { text-align: right; }
.order-table tfoot tr.grand td {
	border-top: 2px solid #3d4249;
	padding-top: 9px;
	font-size: 14px;
	font-weight: 700;
	color: #22262b;
}
.order-table tfoot tr.due td { color: #a20000; font-weight: 600; }
.order-table tfoot tr.paid td { color: #1f7a3d; }

/* A coluna da direita da ficha e' uma CONTA: sem moldura ficava solta no alto
   do ecra, desequilibrada com os cartoes da esquerda (QA do Pedro, 2.a ronda). */
.order-totals {
	border: 1px solid #e3e5e8;
	border-radius: 12px;
	overflow: hidden;
}
.order-totals td.label { color: #5a5f66; }
.order-totals tbody tr:last-child td { border-bottom: 1px solid #eff1f3; }
.order-totals tfoot tr:last-child td { padding-bottom: 14px; }
.order-totals caption {
	padding: 12px 13px;
	text-align: left;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #5a5f66;
	background: #fafbfc;
	border-bottom: 1px solid #eff1f3;
}

/* ⚠️ AS DUAS COLUNAS DA FICHA NAO SE TOCAM (QA do Pedro, 3.a ronda).
   O `.fields-group` e' uma TABELA (`display: table` / `.col { display: table-cell }`)
   e uma tabela nao tem `gap`: o espaco entre as metades vinha do `margin-right`
   dos `.field`, e um `<slot>` nao e' um campo — as duas colunas encostavam uma
   a outra no meio do ecra. O intervalo passa a ser da COLUNA, e por dentro. */
.form.order-form .fields-group.cols2 > .col:first-child { padding-right: 20px; }
.form.order-form .fields-group.cols2 > .col + .col { padding-left: 20px; }
/* E os blocos empilhados dentro da mesma coluna (o retrato, o grupo de campos,
   os cartoes) tambem respiram entre si. */
.form.order-form .fields-group.cols2 > .col > * + * { margin-top: 24px; }

/* ⚠️ CAMPOS EMPILHADOS (QA do Pedro, 4.a ronda: «as decisoes estao todas coladas»).
   Num grupo `cols="1"` os `.field` sao irmaos directos, e o unico espaco entre
   eles sao os 5 px do `margin-top` do `label` — porque a margem de BAIXO do
   `.form label` esta COMENTADA no CSS da casa (l. 2966) e o `.form .field` so'
   tem `margin-right`. Trinta e sete formularios da plataforma tem grupos
   `cols="1"` e todos sofrem do mesmo: a correccao global e' do programa dos
   formularios, nao da loja — aqui fica contida no `.order-form`. */
.form.order-form .field + .field { margin-top: 14px; }
.form.order-form .form-node-group > .field:first-of-type { margin-top: 4px; }
.form.order-form p.separator { margin: 0 0 12px; }

/* O select2 3.x DESENHA um contentor proprio e CLONA-lhe as classes do campo
   ([[feedback_select2_class_clone]]): a largura pede-se pela classe do campo,
   nunca pelo `input` (que passa a estar escondido). */
.form.order-form .pf > .select2-container,
.select2-container.sel-customer,
.select2-container.sel-item { width: 100%; }
.form.order-form .panel-table .select2-container { width: 100%; min-width: 210px; }

/* ⚠️ O campo de pesquisa VESTE a caixa do campo ao lado — a mesma altura, a
   mesma borda, o mesmo raio — em vez de desenhar uma caixa dentro de outra.
   A norma da casa (`.form label .select2-container .select2-choice`) tira a
   caixa ao plugin, porque la' a caixa e' o proprio `<label>`; aqui a caixa e' o
   campo, e por isso e' o plugin que a veste. Com `flex`, o texto e a seta
   centram-se na altura e o texto ganha a margem que lhe faltava. */
.form.order-form .select2-container .select2-choice {
	display: flex;
	align-items: center;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #d7dbe0;
	border-radius: 8px;
	background: #fff;
	color: #3d4249;
	line-height: normal;
	box-shadow: none;
}
.form.order-form .select2-container .select2-choice > .select2-chosen {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 8px 0 0;
	padding: 0;
	font-size: 13px;
	color: #3d4249;
}
.form.order-form .select2-container .select2-choice:hover,
.form.order-form .select2-container-active .select2-choice {
	border-color: #a8c22e;
	box-shadow: 0 0 0 3px rgba(168, 194, 46, .16);
}

/* A SETA desenha-se aqui, em vez de vir do sprite: a casa posiciona o sprite a
   `0 -4px`, que centra numa caixa de 15 px e nao numa de 34 — ficava encostada
   ao topo (QA do Pedro, 2026-09-16). Sendo um filho flex de altura propria, o
   `align-items: center` do pai centra-a sozinho. */
.form.order-form .select2-container .select2-choice .select2-arrow {
	position: static;
	flex: 0 0 auto;
	width: 10px;
	height: auto;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
}
.form.order-form .select2-container .select2-choice .select2-arrow b {
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	background: none !important;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #8a9099;
}
.form.order-form .select2-container-active .select2-choice .select2-arrow b,
.form.order-form .select2-dropdown-open .select2-choice .select2-arrow b { border-top-color: #5a6470; }

/* O «x» de limpar fica ANTES da seta e centrado na altura (o plugin poe-no em
   posicao absoluta, calculada para a caixa pequena). */
.form.order-form .select2-container .select2-choice abbr.select2-search-choice-close {
	right: 26px;
	top: 50%;
	margin-top: -7px;
}

/* Dentro da tabela de linhas a caixa e' mais baixa, como os `input` ao lado. */
.form.order-form .panel-table .select2-container .select2-choice { height: 30px; border-radius: 6px; padding: 0 8px; }

/* ---- estado numa palavra --------------------------------------------- */
.order-pill {
	display: inline-block;
	padding: 2px 9px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 17px;
	white-space: nowrap;
}
.order-pill.ok   { color: #1f7a3d; border-color: #c3e2cd; background: #f2faf5; }
.order-pill.wait { color: #8a5b12; border-color: #ecd6ab; background: #fdf8ee; }
.order-pill.bad  { color: #a20000; border-color: #e6bcbc; background: #fdf4f4; }
.order-pill.off  { color: #6b7280; border-color: #e3e5e8; background: #f5f6f8; }
.order-pill.type {
	color: #4a4f58;
	border-color: #e3e5e8;
	background: #f5f6f8;
	font-weight: 500;
	text-transform: none;
}

/* ---- o vazio ---------------------------------------------------------- */
.order-empty {
	margin: 0 0 4px;
	padding: 30px 14px;
	text-align: center;
	color: #8a9099;
	font-size: 13px;
	background: #fcfcfd;
	border: 1px dashed #dfe3e7;
	border-radius: 10px;
}
.order-note {
	margin: 18px 0 0;
	padding: 12px 14px;
	font-size: 12.5px;
	color: #5a5f66;
	background: #f7f8fa;
	border-left: 3px solid #d7dbe0;
	border-radius: 0 8px 8px 0;
}
.order-note.warn { background: #fdf8ee; border-left-color: #e0a63c; color: #7a5510; }

/* ---- a faixa de numeros ----------------------------------------------- */
.order-sum {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 22px;
	border: 1px solid #e3e5e8;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
.order-sum > div {
	flex: 1 1 130px;
	padding: 14px 18px;
	border-left: 1px solid #eff1f3;
}
.order-sum > div:first-child { border-left: none; }
.order-sum span {
	display: block;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #8a9099;
	margin-bottom: 3px;
}
.order-sum strong {
	font-size: 17px;
	font-weight: 600;
	color: #2e3238;
	font-variant-numeric: tabular-nums;
}
.order-sum .due strong { color: #a20000; }
.order-sum .ok strong  { color: #1f7a3d; }

/* ---- a gaveta de accao ------------------------------------------------ */
.order-panel {
	margin: 26px 0 0;
	border: 1px solid #e3e5e8;
	border-radius: 12px;
	background: #fff;
}
.order-panel > h4 {
	margin: 0;
	padding: 13px 16px;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #5a5f66;
	background: #fafbfc;
	border-bottom: 1px solid #eff1f3;
	border-radius: 12px 12px 0 0;
}
.order-panel .panel-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
	gap: 18px 18px;
	align-items: end;
	padding: 18px 16px;
}
.order-panel .panel-body.tight { padding-bottom: 4px; }
.order-panel .panel-body + .panel-body { padding-top: 0; }
/* O campo vive dentro de um <label>: e' a regra da casa (o office so' estiliza
   `input` dentro de `.form label`). */
.form .order-panel .pf { display: block; margin: 0; }
.form .order-panel .pf > span {
	display: block;
	margin: 0 0 4px;
	font-size: 11px;
	color: #6b7280;
}
.form .order-panel .pf > input[type="text"],
.form .order-panel .pf > select,
.form .order-panel .pf > textarea {
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0 9px;
	box-sizing: border-box;
	border: 1px solid #d7dbe0;
	border-radius: 8px;
	background: #fff;
	color: #3d4249;
	font: inherit;
	font-size: 13px;
}
.form .order-panel .pf > select[multiple] { height: auto; padding: 6px 9px; }
.form .order-panel .pf > input[type="text"]:focus,
.form .order-panel .pf > select:focus {
	border-color: #a8c22e;
	outline: none;
	box-shadow: 0 0 0 3px rgba(168, 194, 46, .16);
}
.form .order-panel .pf.wide { grid-column: 1 / -1; }
.order-panel .pf em {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-style: normal;
	color: #8a9099;
}
/* A caixa de check e' uma LINHA: o texto ao lado, nao por baixo. */
.form .order-panel .check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: #3d4249;
	cursor: pointer;
}
.form .order-panel .check > input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
}
.order-panel .panel-foot {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px;
	border-top: 1px solid #f2f4f6;
	margin-top: 4px;
}
.order-panel .panel-foot .hint {
	margin-right: auto;
	font-size: 11.5px;
	color: #8a9099;
}
.order-panel .panel-table { padding: 4px 16px 0; }
.order-panel .panel-table .order-table { font-size: 12px; }
.form .order-panel .panel-table input[type="text"] {
	width: 70px;
	height: 28px;
	margin: 0;
	padding: 0 7px;
	box-sizing: border-box;
	border: 1px solid #d7dbe0;
	border-radius: 6px;
	text-align: right;
	font: inherit;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

/* ---- o cabecalho da ficha -------------------------------------------- */
.order-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding-bottom: 18px;
	margin-bottom: 22px;
	border-bottom: 1px solid #eff1f3;
}
.order-head .number {
	font-size: 21px;
	font-weight: 700;
	color: #22262b;
	letter-spacing: -.01em;
}
.order-head .states { display: flex; flex-wrap: wrap; gap: 6px; }
.order-head .amount {
	margin-left: auto;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.order-head .amount span {
	display: block;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #8a9099;
}
.order-head .amount strong { font-size: 19px; font-weight: 700; color: #22262b; }

.order-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px 26px;
	margin: 0 0 6px;
}
.order-meta > div { min-width: 0; }
.order-meta dt {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #8a9099;
	margin-bottom: 4px;
}
.order-meta dd {
	margin: 0;
	font-size: 13px;
	color: #3d4249;
	overflow-wrap: break-word;
}
.order-meta dd.quiet { color: #9aa1a9; }

.order-card {
	border: 1px solid #e3e5e8;
	border-radius: 10px;
	padding: 16px 18px;
	background: #fff;
}
.order-card h5 {
	margin: 0 0 9px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #8a9099;
}
.order-card p { margin: 0; font-size: 13px; line-height: 1.5; color: #3d4249; }
/* Sem margem propria: quem separa os blocos empilhados e' a COLUNA (a regra
   `> * + *` la' em cima). Ter as duas somava 48 px entre o grupo de campos e
   os cartoes. */
.order-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}

/* ---- a linha do tempo ------------------------------------------------- */
.order-timeline { margin: 0; padding: 4px 0 0 0; list-style: none; }
.order-timeline li {
	position: relative;
	padding: 0 0 22px 28px;
	border-left: 1px solid #e3e5e8;
	margin-left: 5px;
}
.order-timeline li:last-child { border-left-color: transparent; padding-bottom: 2px; }
.order-timeline li::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 4px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #c3c7cc;
}
.order-timeline li.is-status::before { border-color: #a8c22e; }
.order-timeline li.is-money::before  { border-color: #3b91b4; }
.order-timeline li.is-bad::before    { border-color: #a20000; }
.order-timeline .when {
	font-size: 11px;
	color: #8a9099;
	font-variant-numeric: tabular-nums;
}
.order-timeline .what {
	display: block;
	margin: 3px 0 4px;
	font-size: 13px;
	color: #2e3238;
}
.order-timeline .who { font-size: 11.5px; color: #8a9099; }
.order-timeline .who .order-pill { margin-left: 6px; }

/* ---- barra de accao de um ecra proprio (encomenda manual) ------------- */
.order-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid #eff1f3;
}
.order-actions .hint { margin-right: auto; font-size: 12px; color: #8a9099; }

@media (max-width: 900px) {
	.order-head .amount { margin-left: 0; text-align: left; }
	.order-table .meta { font-size: 10.5px; }
}

/* A tabela de linhas de um ecra de CRIACAO tem caixas: a descricao cresce e
   alinha a esquerda, os numeros ficam estreitos e alinhados pela virgula. */
.form .order-panel .panel-table td.grow { width: 42%; }
.form .order-panel .panel-table input[type="text"].txt {
	width: 100%;
	text-align: left;
	font-variant-numeric: normal;
}
.form .order-panel .panel-table .id input[type="text"] { width: 70px; text-align: left; }
.order-card .ln { display: block; }

/* =========================================================================
   MODOS DA PLATAFORMA — capacidades
   docs/md/platform_modos_plano.md §3.4

   Dois sítios, dois papéis:
     · o ESTADO, em leitura, no separador Sistema  -> .platform-caps
     · a NOTA que acompanha os interruptores e o estado -> .legend.platform-cap-note

   A nota é um `.legend` da casa com um modificador, como o
   `.legend.config-scope-note` já faz: o peso normal e a entrelinha existem
   porque estas são FRASES, e um parágrafo inteiro a bold não se lê.
   ========================================================================= */
.form .platform-caps {
	list-style: none;
	margin: 0 6px 14px;
	padding: 0;
}

.form .platform-caps .platform-cap-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #eff1f3;
}

.form .platform-caps .platform-cap-row:last-child {
	border-bottom: 0;
}

.form .platform-caps .cap-state {
	flex: none;
	min-width: 76px;
	padding: 2px 8px;
	border: 1px solid #e3e5e8;
	border-radius: 10px;
	background: #f5f6f8;
	color: #6b7280;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: .04em;
	text-align: center;
	text-transform: uppercase;
}

/* ⚠️ A cor segue o que a capacidade VALE (`has()`), não o que está gravado
   (`rawEnabled()`): um B2B ligado na célula com a loja desligada é vermelho,
   e a frase ao lado diz porquê. Pintá-lo de verde por causa da célula era
   mentir com a cor. */
.form .platform-caps .is-on .cap-state   { color: #1f7a3d; border-color: #c3e2cd; background: #f2faf5; }
.form .platform-caps .is-off .cap-state  { color: #a20000; border-color: #e6bcbc; background: #fdf4f4; }
.form .platform-caps .is-base .cap-state { color: #2f6fed; border-color: #cfdcfa; background: #f2f6fe; }

.form .platform-caps .cap-name {
	flex: none;
	color: #2e3238;
	font-size: 13px;
	font-weight: bold;
}

.form .platform-caps .cap-why {
	flex: 1 1 280px;
	color: #8a9099;
	font-size: 11px;
	line-height: 16px;
}

.form .platform-caps .cap-why b {
	color: #2e3238;
	font-weight: bold;
}

.form .legend.platform-cap-note {
	font-weight: normal;
	line-height: 16px;
	color: #888;
}

.form .legend.platform-cap-note b {
	color: #666;
	font-weight: bold;
}

@media only screen and (max-width: 760px) {
	.form .platform-caps .cap-why { flex-basis: 100%; }
}