/*
 * Tema do backoffice (Bootstrap 5.3 + tokens claro/escuro). Só é carregado nos layouts do backoffice e dos ecrãs de
 * acesso, sempre seguido do humanportal.ds.css (identidade visual, app/src/css/ds).
 *
 * Tokens: as variáveis --hp-* usadas abaixo (e as das folhas antigas) são definidas no humanportal.ds.css
 * (app/src/css/ds/_legacy.scss) a partir dos tokens da identidade visual (_tokens.scss), com o tema do <html>
 * (data-theme / data-bs-theme) e a cor de destaque do cliente (portal_accent_color, ver Sysconfig::accentShades()).
 */

/* ---------------------------------------------------------------- base */
body {
	font-family: var(--hp-font);
	background-color: var(--hp-bg);
	color: var(--hp-fg);
}

a {
	color: var(--hp-accent-ink);
}

/* ---------------------------------------------------------------- botões */
.btn {
	border-radius: var(--hp-radius);
	font-weight: 600;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--hp-accent);
	border-color: var(--hp-accent);
	color: var(--hp-on-accent);
}

.btn-primary:hover {
	filter: brightness(1.08);
}

.btn-default {
	background-color: var(--hp-surface);
	border: 1px solid var(--hp-border);
	color: var(--hp-fg);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	background-color: var(--hp-accent-soft);
	border-color: var(--hp-accent-line);
	color: var(--hp-accent-ink);
}

/* ---------------------------------------------------------------- cartões, tabelas, separadores */
.widget-box,
.panel,
.well {
	background-color: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-lg);
	/* sem sombra: a borda chega e fica mais limpo */
	box-shadow: none;
}

.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--hp-fg);
	--bs-table-border-color: var(--hp-border);
	color: var(--hp-fg);
}

.nav-tabs>li.active>a,
.nav-tabs>li>a.active,
.nav-tabs .nav-link.active {
	color: var(--hp-accent-ink);
	border-bottom-color: var(--hp-accent);
}

.form-control,
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=number],
select,
textarea {
	background-color: var(--hp-surface);
	color: var(--hp-fg);
	border-color: var(--hp-field-border);
	border-radius: var(--hp-radius);
}

.form-control:focus {
	border-color: var(--hp-accent);
	box-shadow: 0 0 0 3px var(--hp-accent-line);
}

.modal-content,
.dropdown-menu {
	background-color: var(--hp-surface);
	color: var(--hp-fg);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-lg);
}

/* ---------------------------------------------------------------- texto e linhas de tabela */
body {
	font-size: 14px;
}

#content,
#content td,
#content th {
	color: var(--hp-fg);
}

#content small,
#content .text-muted,
#content .help-block {
	color: var(--hp-muted);
}

#content table tbody tr.odd,
#content .table tbody tr:nth-child(odd) {
	background-color: var(--hp-surface);
}

#content table tbody tr.even,
#content .table tbody tr:nth-child(even) {
	background-color: var(--hp-surface-2);
}

#content table tbody tr:hover {
	background-color: var(--hp-accent-soft);
}

#content .table>thead>tr>th,
#content table thead th {
	color: var(--hp-muted);
	font-weight: 700;
	border-bottom-color: var(--hp-border);
}

/* grupo de botões em linha (ex.: ações de cada formação) */
#content .btn-group>.btn-default,
#content .btn-circular {
	background-color: transparent;
	border-color: var(--hp-border);
}

/* botão circular primário (adicionar, guardar numa linha): a regra acima, só para os botões de ação das linhas, deixava-o
   transparente e o ícone (branco) desaparecia */
#content .btn.btn-primary.btn-circular,
.btn.btn-primary.btn-circular {
	background-color: var(--hp-accent);
	border: 1px solid var(--hp-accent);
	color: var(--hp-on-accent);
	box-shadow: 0 2px 6px color-mix(in srgb, var(--hp-accent) 38%, transparent);
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#content .btn.btn-primary.btn-circular:hover,
.btn.btn-primary.btn-circular:hover {
	background-color: color-mix(in srgb, var(--hp-accent) 80%, #000);
	border-color: color-mix(in srgb, var(--hp-accent) 80%, #000);
	color: var(--hp-on-accent);
	box-shadow: 0 4px 10px color-mix(in srgb, var(--hp-accent) 45%, transparent);
	transform: translateY(-1px);
}

#content .btn.btn-primary.btn-circular:active,
.btn.btn-primary.btn-circular:active {
	transform: none;
	box-shadow: none;
}

#content .btn.btn-primary.btn-circular:disabled,
.btn.btn-primary.btn-circular:disabled {
	opacity: .5;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	.btn.btn-primary.btn-circular {
		transition: none;
	}

	.btn.btn-primary.btn-circular:hover {
		transform: none;
	}
}

/* botões circulares de cor (aceitar, recusar, avisar...): a regra "#content .btn-circular" acima deixava-os transparentes e o ícone
   (branco) desaparecia, como no primário. No tema claro cor sólida (fundo = texto do estado, ícone = fundo do estado); no escuro
   o oposto, "suave" (fundo escuro do estado, ícone e contorno claros), porque o preenchimento sólido ficava num verde néon.
   O informativo usa a cor de destaque nos dois. */
:root {
	--circ-ok: var(--hp-ok-fg);
	--circ-ok-fg: var(--hp-ok-bg);
	--circ-ok-line: var(--hp-ok-fg);
	--circ-bad: var(--hp-bad-fg);
	--circ-bad-fg: var(--hp-bad-bg);
	--circ-bad-line: var(--hp-bad-fg);
	--circ-warn: var(--hp-warn-fg);
	--circ-warn-fg: var(--hp-warn-bg);
	--circ-warn-line: var(--hp-warn-fg);
	--circ-info: var(--hp-accent);
	--circ-info-fg: var(--hp-on-accent);
	--circ-info-line: var(--hp-accent);
}

:root[data-bs-theme="dark"] {
	--circ-ok: var(--hp-ok-bg);
	--circ-ok-fg: var(--hp-ok-fg);
	--circ-ok-line: color-mix(in srgb, var(--hp-ok-fg) 60%, transparent);
	--circ-bad: var(--hp-bad-bg);
	--circ-bad-fg: var(--hp-bad-fg);
	--circ-bad-line: color-mix(in srgb, var(--hp-bad-fg) 60%, transparent);
	--circ-warn: var(--hp-warn-bg);
	--circ-warn-fg: var(--hp-warn-fg);
	--circ-warn-line: color-mix(in srgb, var(--hp-warn-fg) 60%, transparent);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-bs-theme="light"]) {
		--circ-ok: var(--hp-ok-bg);
		--circ-ok-fg: var(--hp-ok-fg);
		--circ-ok-line: color-mix(in srgb, var(--hp-ok-fg) 60%, transparent);
		--circ-bad: var(--hp-bad-bg);
		--circ-bad-fg: var(--hp-bad-fg);
		--circ-bad-line: color-mix(in srgb, var(--hp-bad-fg) 60%, transparent);
		--circ-warn: var(--hp-warn-bg);
		--circ-warn-fg: var(--hp-warn-fg);
		--circ-warn-line: color-mix(in srgb, var(--hp-warn-fg) 60%, transparent);
	}
}

#content .btn.btn-success.btn-circular,
.btn.btn-success.btn-circular {
	--circ: var(--circ-ok);
	--circ-fg: var(--circ-ok-fg);
	--circ-line: var(--circ-ok-line);
}

#content .btn.btn-danger.btn-circular,
.btn.btn-danger.btn-circular {
	--circ: var(--circ-bad);
	--circ-fg: var(--circ-bad-fg);
	--circ-line: var(--circ-bad-line);
}

#content .btn.btn-warning.btn-circular,
.btn.btn-warning.btn-circular {
	--circ: var(--circ-warn);
	--circ-fg: var(--circ-warn-fg);
	--circ-line: var(--circ-warn-line);
}

#content .btn.btn-info.btn-circular,
.btn.btn-info.btn-circular {
	--circ: var(--circ-info);
	--circ-fg: var(--circ-info-fg);
	--circ-line: var(--circ-info-line);
}

#content .btn.btn-success.btn-circular,
.btn.btn-success.btn-circular,
#content .btn.btn-danger.btn-circular,
.btn.btn-danger.btn-circular,
#content .btn.btn-warning.btn-circular,
.btn.btn-warning.btn-circular,
#content .btn.btn-info.btn-circular,
.btn.btn-info.btn-circular {
	background-color: var(--circ);
	border: 1px solid var(--circ-line) !important; /* o dark.css fixa o contorno dos botões com !important */
	color: var(--circ-fg);
	transition: background-color .15s ease, border-color .15s ease;
}

/* ao passar o rato: um pouco mais perto da cor do ícone (mais claro no tema claro, mais vivo no escuro) */
#content .btn.btn-success.btn-circular:hover,
#content .btn.btn-danger.btn-circular:hover,
#content .btn.btn-warning.btn-circular:hover,
#content .btn.btn-info.btn-circular:hover,
.btn.btn-success.btn-circular:hover,
.btn.btn-danger.btn-circular:hover,
.btn.btn-warning.btn-circular:hover,
.btn.btn-info.btn-circular:hover {
	background-color: color-mix(in srgb, var(--circ) 80%, var(--circ-fg));
	color: var(--circ-fg);
}

#content .btn.btn-success.btn-circular:disabled,
#content .btn.btn-danger.btn-circular:disabled,
#content .btn.btn-warning.btn-circular:disabled,
#content .btn.btn-info.btn-circular:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* pares de botões circulares agrupados (.btn-group-xs, ex.: aceitar / eliminar na validação de inscrições): uma pílula com duas
   metades (o .btn-group do Bootstrap já tira o raio dos cantos interiores). A metade sem estado ganha um contorno visível, senão só
   se via a selecionada e o par não parecia um grupo; as duas com o mesmo tamanho */
#content .btn-group.btn-group-xs:not(:has(>.btn:not(.btn-circular)))>.btn.btn-circular,
.btn-group.btn-group-xs:not(:has(>.btn:not(.btn-circular)))>.btn.btn-circular {
	justify-content: center;
	width: 36px;
	height: 30px;
	padding: 0;
}

#content .btn-group.btn-group-xs:not(:has(>.btn:not(.btn-circular)))>.btn.btn-circular:only-child,
.btn-group.btn-group-xs:not(:has(>.btn:not(.btn-circular)))>.btn.btn-circular:only-child {
	width: 30px;
}

#content .btn-group.btn-group-xs>.btn.btn-default.btn-circular,
.btn-group.btn-group-xs>.btn.btn-default.btn-circular {
	border: 1px solid var(--hp-border-strong) !important; /* o dark.css fixa o contorno dos botões com !important */
	background-color: transparent;
	color: var(--hp-fg);
}

/* sem a linha cinzenta entre a metade selecionada (cor) e a outra: a margem de -1px põe o contorno neutro da segunda por cima do
   da primeira, por isso ele toma a cor do contorno da selecionada */
#content .btn-group.btn-group-xs>.btn.btn-success.btn-circular+.btn.btn-default.btn-circular {
	border-left-color: var(--circ-ok-line) !important;
}

#content .btn-group.btn-group-xs>.btn.btn-danger.btn-circular+.btn.btn-default.btn-circular {
	border-left-color: var(--circ-bad-line) !important;
}

#content .btn-group.btn-group-xs>.btn.btn-warning.btn-circular+.btn.btn-default.btn-circular {
	border-left-color: var(--circ-warn-line) !important;
}

#content .btn-group.btn-group-xs>.btn.btn-info.btn-circular+.btn.btn-default.btn-circular {
	border-left-color: var(--circ-info-line) !important;
}

#content .btn-group.btn-group-xs>.btn.btn-default.btn-circular:hover,
#content .btn-group.btn-group-xs>.btn.btn-default.btn-circular:focus-visible,
.btn-group.btn-group-xs>.btn.btn-default.btn-circular:hover,
.btn-group.btn-group-xs>.btn.btn-default.btn-circular:focus-visible {
	border-color: var(--hp-accent-line) !important;
	background-color: var(--hp-accent-soft);
	color: var(--hp-accent-ink);
}

@media (prefers-reduced-motion: reduce) {
	.btn.btn-success.btn-circular,
	.btn.btn-danger.btn-circular,
	.btn.btn-warning.btn-circular,
	.btn.btn-info.btn-circular {
		transition: none;
	}
}

/* cancelar ao lado de guardar (par de botões circulares): contorno suave, senão no escuro ficava um ícone solto ao lado do azul */
#content .btn-group>.btn.btn-default.btn-circular:has(+ .btn.btn-primary.btn-circular),
.btn-group>.btn.btn-default.btn-circular:has(+ .btn.btn-primary.btn-circular) {
	border: 1px solid var(--hp-border-strong) !important;
	background-color: var(--hp-surface) !important;
	color: var(--hp-fg);
}

#content .btn-group>.btn.btn-default.btn-circular:has(+ .btn.btn-primary.btn-circular):hover,
.btn-group>.btn.btn-default.btn-circular:has(+ .btn.btn-primary.btn-circular):hover {
	background-color: var(--hp-accent-soft) !important;
	border-color: var(--hp-accent-line) !important;
	color: var(--hp-accent-ink);
}

/* botões transparentes (barra das tabelas: ⋮ das colunas, imprimir, atualizar, paginação): o hover do default.css era "buttonface"
   (cor do sistema) e o do dark.css a cor da borda dos campos; agora o realce suave do tema, também com o menu aberto e com o teclado */
.btn.btn-transparent {
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn.btn-transparent:hover,
.btn.btn-transparent:focus-visible,
.btn.btn-transparent[aria-expanded="true"],
.btn.btn-transparent.show {
	background-color: var(--hp-accent-soft);
	color: var(--hp-accent-ink);
}

/* os circulares dentro de #content têm fundo transparente (regra com id): o realce tem de ter a mesma força */
#content .btn.btn-transparent.btn-circular:hover,
#content .btn.btn-transparent.btn-circular:focus-visible,
#content .btn.btn-transparent.btn-circular[aria-expanded="true"] {
	background-color: var(--hp-accent-soft);
	border-color: var(--hp-accent-line);
	color: var(--hp-accent-ink);
}

#content .btn.btn-transparent.btn-circular:active {
	background-color: color-mix(in srgb, var(--hp-accent) 20%, var(--hp-surface));
}

.btn.btn-transparent:active {
	background-color: color-mix(in srgb, var(--hp-accent) 20%, var(--hp-surface));
}

.btn.btn-transparent:disabled,
.btn.btn-transparent[disabled] {
	background-color: transparent;
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.btn.btn-transparent {
		transition: none;
	}
}

/* ---------------------------------------------------------------- caixas e pesquisa */
#content .tab-pane {
	background-color: transparent;
}

/* conteúdo dos separadores: no claro um cinza ligeiramente diferente do fundo da página; no escuro o cartão (--hp-surface) que já existia */
#content .tab-content {
	background-color: var(--hp-tab-bg);
	border-radius: var(--hp-radius-lg);
}

#content .widget-title {
	background-color: var(--hp-surface-2);
	color: var(--hp-fg);
	border-bottom: 1px solid var(--hp-border);
}

/* o cabeçalho tem fundo próprio: sem os cantos do cartão, o fundo quadrado tapava a borda arredondada em cima.
   --wr é o raio do cartão menos a borda (0 num cartão dentro de outro); fechado, o cabeçalho é a única coisa e arredonda em baixo */
#content .widget-box>.widget-title:first-child {
	border-top-left-radius: var(--wr, calc(var(--hp-radius-lg) - 1px));
	border-top-right-radius: var(--wr, calc(var(--hp-radius-lg) - 1px));
}

#content .widget-box>.widget-title:last-child {
	border-bottom: 0;
	border-bottom-left-radius: var(--wr, calc(var(--hp-radius-lg) - 1px));
	border-bottom-right-radius: var(--wr, calc(var(--hp-radius-lg) - 1px));
}

/* cartão aberto (cabeçalho + corpo com tabela, ex.: grupos de "As minhas formações"): o corpo e a última linha arredondam em baixo.
   Sem overflow: hidden no cartão, que cortaria o menu "Mais" das últimas linhas; o fundo das riscas passa da linha para as células
   (a linha pinta um retângulo e tapava os cantos) e a última linha deixa de ter borda por baixo (o cartão já a tem) */
#content .widget-box>.widget-body:last-child {
	border-bottom-left-radius: var(--wr, calc(var(--hp-radius-lg) - 1px));
	border-bottom-right-radius: var(--wr, calc(var(--hp-radius-lg) - 1px));
}

#content .widget-box>.widget-body:last-child>table.table>tbody>tr.even,
#content .widget-box>.widget-body:last-child>table.table>tbody>tr:nth-child(even) {
	background-color: transparent;
}

#content .widget-box>.widget-body:last-child>table.table>tbody>tr.even>td,
#content .widget-box>.widget-body:last-child>table.table>tbody>tr:nth-child(even)>td {
	background-color: var(--hp-surface-2);
}

#content .widget-box>.widget-body:last-child>table.table>tbody>tr:last-child>td {
	border-bottom: 0;
}

#content .widget-box>.widget-body:last-child>table.table>tbody>tr:last-child>td:first-child {
	border-bottom-left-radius: var(--wr, calc(var(--hp-radius-lg) - 1px));
}

#content .widget-box>.widget-body:last-child>table.table>tbody>tr:last-child>td:last-child {
	border-bottom-right-radius: var(--wr, calc(var(--hp-radius-lg) - 1px));
}

/* realce ao passar o rato nas células, para respeitar os cantos da última linha */
#content .widget-box>.widget-body:last-child>table.table>tbody>tr:hover {
	background-color: transparent;
}

#content .widget-box>.widget-body:last-child>table.table>tbody>tr:hover>td {
	background-color: var(--hp-accent-soft);
}

input.search,
input.search.lx,
#content input.search,
#content input[type=search] {
	background-color: var(--hp-surface);
	color: var(--hp-fg);
	border: 1px solid var(--hp-field-border);
	border-radius: 99px;
}

/* ---------------------------------------------------------------- acessibilidade */
/* o humanportal.default.css tira o contorno de foco a tudo (* { outline: none !important }): repõe-se o do teclado */
:focus-visible {
	outline: 2px solid var(--hp-accent-ink) !important;
	outline-offset: 2px;
}

.dropdown-header {
	padding: 8px 10px 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hp-muted);
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--hp-fg);
	text-align: left;
}

.dropdown-item:hover,
.dropdown-item:focus {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
}

.dropdown-item:disabled,
.dropdown-item.disabled {
	color: var(--hp-muted);
	opacity: .6;
}

.dropdown-item .la {
	width: 20px;
	font-size: 18px;
	text-align: center;
}

.dropdown-divider {
	height: 1px;
	margin: 6px 4px;
	background-color: var(--hp-border);
	border: 0;
}

@media (max-width: 767px) {
	.dropdown-item {
		min-height: 44px;
	}
}

/* Pontos de quebra do Bootstrap deste portal: sm 768px, md 992px, lg 1200px, xl 1400px, xxl 1600px.
   A partir de lg os botões das ações ficam ao lado do texto; abaixo de lg (menos o menu lateral não cabem o texto e as
   ações lado a lado) ficam por baixo do texto, alinhados à esquerda. */
@media (min-width: 1200px) {
	td.action-btns {
		width: 1%;
		white-space: nowrap;
	}
}

/* menus suspensos: as variáveis do Bootstrap 5 seguem os tokens (no escuro o hover ficava branco sobre branco) */
.dropdown-menu {
	--bs-dropdown-bg: var(--hp-surface);
	--bs-dropdown-color: var(--hp-fg);
	--bs-dropdown-border-color: var(--hp-border);
	--bs-dropdown-divider-bg: var(--hp-border);
	--bs-dropdown-link-color: var(--hp-fg);
	--bs-dropdown-link-hover-color: var(--hp-accent-ink);
	--bs-dropdown-link-hover-bg: var(--hp-accent-soft);
	--bs-dropdown-link-active-color: var(--hp-on-accent);
	--bs-dropdown-link-active-bg: var(--hp-accent);
	--bs-dropdown-link-disabled-color: var(--hp-muted);
	--bs-dropdown-item-border-radius: 8px; /* o fundo do hover com cantos, como os itens com interruptor */
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>li>.dropdown-item:hover,
.dropdown-menu>li>.dropdown-item:focus {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
}

/* itens com interruptor (ex.: opções do cronograma no painel inicial): o clique é na linha, que ganha o mesmo fundo dos
   outros itens ao passar o rato */
.dropdown-menu>li:has(>label.toggle) {
	padding-right: var(--bs-dropdown-item-padding-x);
	padding-left: var(--bs-dropdown-item-padding-x); /* o ícone alinha com o dos outros itens */
	border-radius: 8px;
	cursor: pointer;
}

.dropdown-menu>li:has(>label.toggle):not([disabled]):hover {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
}

.dropdown-menu>li:has(>label.toggle)[disabled] {
	cursor: default;
}

/* ---------------------------------------------------------------- miniatura do curso */
.action-image {
	flex: 0 0 76px;
}

.course-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 12px;
	object-fit: cover;
	background-color: var(--hp-surface-2);
	border: 1px solid var(--hp-border);
}

.course-thumb.is-placeholder {
	border: 0;
	color: #ffffff;
}

.course-thumb.is-placeholder .la {
	font-size: 32px;
}

@media (max-width: 575px) {
	.action-image {
		flex-basis: 56px;
	}

	.course-thumb {
		width: 56px;
		height: 56px;
		border-radius: 10px;
	}
}

/* ---------------------------------------------------------------- cabeçalho da formação (ficha, no topo dos ecrãs de uma ação) */
.course-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 18px;
	background-color: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-lg);
	box-shadow: var(--hp-shadow);
}

.course-header-thumb {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 14px;
	object-fit: cover;
	background-color: var(--hp-surface-2);
	border: 1px solid var(--hp-border);
}

.course-header-thumb.is-placeholder {
	border: 0;
	color: #ffffff;
}

.course-header-thumb.is-placeholder .la {
	font-size: 30px;
}

.course-header-body {
	flex: 1 1 auto;
	min-width: 0;
}

/* o default.css dá line-height 1.8 a todos os div de .courseinfo */
.course-header .course-header-body div,
.course-header .course-header-body span,
.course-header .course-header-body li {
	line-height: 1.4;
}

.course-header-ref {
	display: inline-block;
	margin-bottom: 4px;
	padding: 1px 8px;
	border-radius: 99px;
	background-color: var(--hp-control-bg);
	color: var(--hp-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}

.course-header-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--hp-fg);
	overflow-wrap: anywhere;
}

.course-header-title .la {
	margin-right: 6px;
	color: var(--hp-muted);
}

.course-header-program {
	font-weight: 500;
	color: var(--hp-muted);
}

.course-header-entity {
	margin-top: 2px;
	font-size: 14px;
	color: var(--hp-muted);
}

.course-header-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.course-header-meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--hp-fg);
}

.course-header-meta .la {
	font-size: 17px;
	color: var(--hp-accent-ink);
}

@media (max-width: 575px) {
	.course-header {
		gap: 12px;
		padding: 12px;
	}

	.course-header-thumb {
		width: 52px;
		height: 52px;
		border-radius: 10px;
	}

	.course-header-thumb.is-placeholder .la {
		font-size: 24px;
	}

	.course-header-title {
		font-size: 17px;
	}
}

/* ---------------------------------------------------------------- texto de cada formação */
.course-info {
	min-width: 0;
}

.action-info .course-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--hp-fg);
}

/* ---------------------------------------------------------------- etiquetas de estado */
.badge.success,
.badge.warning,
.badge.light-warning,
.badge.bg-danger,
.badge.quit,
.badge.status_N,
.badge.green,
.badge.concluded,
.badge.yellow {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.badge.success {
	background-color: var(--hp-ok-bg);
	color: var(--hp-ok-fg);
}

.badge.warning {
	background-color: var(--hp-warn-bg);
	color: var(--hp-warn-fg);
}

.badge.light-warning {
	background-color: var(--hp-accent-soft);
	color: var(--hp-accent-ink);
}

.badge.bg-danger {
	background-color: var(--hp-bad-bg) !important;
	color: var(--hp-bad-fg);
}

.badge.quit,
.badge.status_N {
	background-color: var(--hp-mute-bg);
	color: var(--hp-mute-fg);
}

/* estados antigos (a decorrer, em espera): mesmas cores de estado, com contraste; o default.css usa !important */
body .badge.green,
body .badge.concluded {
	background-color: var(--hp-ok-bg) !important;
	color: var(--hp-ok-fg) !important;
}

body .badge.yellow {
	background-color: var(--hp-warn-bg) !important;
	color: var(--hp-warn-fg) !important;
}

/* ---------------------------------------------------------------- paginação */
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 14px 0;
	padding: 0;
}

.pagination>li>a,
.pagination>li>span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 0 10px;
	border-radius: var(--hp-radius);
	color: var(--hp-fg);
	background-color: transparent;
	border: 1px solid var(--hp-border);
	cursor: pointer;
}

.pagination>li>a:hover {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
	border-color: var(--hp-accent-line);
}

.pagination>li.active>a {
	color: var(--hp-on-accent);
	background-color: var(--hp-accent);
	border-color: var(--hp-accent);
}

.pagination>li.disabled>a {
	color: var(--hp-muted);
	opacity: .6;
	cursor: default;
}

/* ---------------------------------------------------------------- diálogos */
.modal-footer {
	gap: 8px;
	padding: 12px 16px;
	background: transparent;
	border-top: 1px solid var(--hp-border);
}

/* botões do rodapé: os da esquerda juntos à esquerda, os da direita juntos à direita
   (o rodapé é flex, os floats .pull-left/.pull-right dos diálogos jQuery não têm efeito) */
.modal-footer,
.modal-footer.justify-content-between {
	justify-content: flex-end !important;
}

.modal-footer > .pull-left,
.modal-footer > .modal-actions:first-child:not(:last-child) {
	margin-right: auto;
	margin-left: 0;
}

.modal-footer > .btn-group {
	display: flex;
	float: none;
}

.modal-footer > .btn-group > .btn {
	flex: 0 0 auto;
	margin: 0;
}

/* botões do mesmo lado colados, como um grupo: só as pontas arredondadas */
.modal-footer > .modal-actions,
.modal-footer > .btn-group {
	flex-wrap: nowrap;
	gap: 0;
}

.modal-footer > .modal-actions > .btn,
.modal-footer > .btn-group > .btn {
	position: relative;
	margin: 0;
}

.modal-footer > .modal-actions > .btn + .btn,
.modal-footer > .btn-group > .btn + .btn {
	margin-left: -1px;
}

.modal-footer > .modal-actions > .btn:not(:first-child):not(:last-child),
.modal-footer > .btn-group > .btn:not(:first-child):not(:last-child) {
	border-radius: 0;
}

.modal-footer > .modal-actions > .btn:first-child:not(:last-child),
.modal-footer > .btn-group > .btn:first-child:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.modal-footer > .modal-actions > .btn:last-child:not(:first-child),
.modal-footer > .btn-group > .btn:last-child:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.modal-footer > .modal-actions > .btn:hover,
.modal-footer > .modal-actions > .btn:focus-visible,
.modal-footer > .btn-group > .btn:hover,
.modal-footer > .btn-group > .btn:focus-visible {
	z-index: 1;
}

.modal-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.modal-footer .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border-radius: var(--hp-radius);
	font-size: 14px;
	font-weight: 600;
}

/* secundários (Fechar, Cancelar...): fundo de controlo e texto com contraste */
.modal-footer .btn.btn-default,
.modal-footer .btn.btn-light {
	color: var(--hp-fg);
	background-color: var(--hp-control-bg) !important;
	border: 1px solid var(--hp-border-strong) !important;
}

.modal-footer .btn.btn-default:hover,
.modal-footer .btn.btn-light:hover {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft) !important;
	border-color: var(--hp-accent-line) !important;
}

.modal-footer .btn.btn-primary {
	color: var(--hp-on-accent);
	background-color: var(--hp-accent);
	border: 1px solid var(--hp-accent) !important;
}

.modal-footer .btn.btn-danger {
	color: #ffffff;
	background-color: #c62828;
	border: 1px solid #c62828 !important;
}

.modal-footer .btn[disabled],
.modal-footer .btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.modal-header .close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--hp-muted);
	opacity: 1;
	cursor: pointer;
	border-radius: var(--hp-radius);
}

.modal-header .close:hover {
	color: var(--hp-fg);
	background-color: var(--hp-accent-soft);
}

@media (max-width: 767px) {
	.modal-footer .btn,
	.modal-header .close {
		min-height: 44px;
	}
}

/* texto de ajuda e dicas: o cinzento antigo (#777) ficava abaixo dos 4.5:1 sobre branco */
span.tip,
.tip,
.help-block {
	color: var(--hp-muted);
}

/* ---------------------------------------------------------------- diálogos: uma só barra de deslocamento */
/* o corpo do diálogo ocupa o espaço que sobra no ecrã (cabeçalho e rodapé fixos) e é o único com scroll;
   substitui a escada de max-height por altura do humanportal.default.css */
.modal .modal-content {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 60px);
}

.modal .modal-content .modal-header,
.modal .modal-content .modal-footer {
	flex: 0 0 auto;
}

.modal .modal-content .modal-body {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	overflow-x: hidden;
}

/* painéis com scroll próprio dentro de um diálogo (ex.: configurações): deixam de ter o seu */
.modal .modal-body .panel-scroll {
	min-height: 0;
	max-height: none;
	overflow: visible;
}

/* o título de cada secção (com o seu "Guardar") fica visível enquanto se percorre a secção */
.modal .modal-body .widget-box.config>.widget-title {
	position: sticky;
	top: 0;
	z-index: 3;
	background-color: var(--hp-surface-2);
}

/* overflow: clip (e não hidden) para a caixa não ser ela o contentor de scroll e o título poder ficar fixo */
.modal .modal-body .widget-box.config {
	overflow: clip;
}

/* "As minhas formações": o conteúdo dos separadores já são cartões (os grupos de ações), por isso o contentor fica sem fundo,
   sem moldura e sem margem interior; o cinza dos separadores (--hp-tab-bg) e o painel do dark.css ficavam por trás dos cartões */
#content .my-actions .tab-content,
#content .my-actions .tab-content>.tab-pane {
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* grupos de ações (a decorrer, em espera, terminadas, canceladas): sem a margem por defeito do .widget-box (16px em cima e em
   baixo, do default.css) e 4px entre eles */
#content .my-actions .tab-pane>.widget-box {
	margin: 0;
}

#content .my-actions .tab-pane>.widget-box+.widget-box {
	margin-top: 4px;
}

/* no painel inicial "As minhas formações" vive dentro do cartão do widget, e a regra "cartão dentro de cartão" (.widget-box
   .widget-box) tirava a moldura e os cantos aos grupos (Ações a decorrer, …); os grupos voltam a ser cartões, como no ecrã.
   O Tabs embrulha o conteúdo de cada separador num <div>: .tab-pane > div > .widget-box */
#content .widget-box .my-actions .tab-pane>.widget-box,
#content .widget-box .my-actions .tab-pane>div>.widget-box {
	--wr: calc(var(--hp-radius-lg) - 1px);
	background-color: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-lg);
}

/* os separadores ficam por baixo do título (que flutua à esquerda) e já não ao lado dele */
.my-actions .nav-tabs {
	clear: both;
}

/* Tabs com toolbar: a barra (pesquisa, vista, relatórios) na linha dos separadores, à direita */
.tabs-bar {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* base 0: o espaço vai primeiro para a barra (pesquisa com os seus 300px); os separadores ficam com o resto, sem encolher
   abaixo da largura dos próprios rótulos */
.tabs-bar>.nav-tabs {
	flex: 1 1 0;
}

.tabs-bar>.tabs-toolbar {
	flex: 0 1 auto;
	min-width: 0;
}

/* ---------------------------------------------------------------- mensagens (alertas: sucesso, informação, aviso, erro)
   cores do tema nos dois modos; o dark.css punha as ligações a #222 (ex.: "A sessão ... está aberta. Clique aqui para entrar"),
   ilegíveis no escuro */
body .alert {
	--hp-alert-bg: var(--hp-surface-2);
	--hp-alert-fg: var(--hp-fg);
	--bs-alert-bg: var(--hp-alert-bg);
	--bs-alert-color: var(--hp-alert-fg);
	--bs-alert-border-color: color-mix(in srgb, var(--hp-alert-fg) 22%, transparent);
	--bs-alert-link-color: var(--hp-alert-fg);
	position: relative;
	padding: 12px 44px 12px 14px;
	background-color: var(--hp-alert-bg);
	color: var(--hp-alert-fg);
	border: 1px solid color-mix(in srgb, var(--hp-alert-fg) 22%, transparent);
	border-radius: var(--hp-radius);
	font-size: 14px;
	line-height: 1.45;
}

body .alert.alert-success {
	--hp-alert-bg: var(--hp-ok-bg);
	--hp-alert-fg: var(--hp-ok-fg);
}

body .alert.alert-info {
	--hp-alert-bg: var(--hp-accent-soft);
	--hp-alert-fg: var(--hp-accent-ink);
}

body .alert.alert-warning {
	--hp-alert-bg: var(--hp-warn-bg);
	--hp-alert-fg: var(--hp-warn-fg);
}

body .alert.alert-danger {
	--hp-alert-bg: var(--hp-bad-bg);
	--hp-alert-fg: var(--hp-bad-fg);
}

/* ligações dentro da mensagem: a cor da própria mensagem, sublinhadas e a seminegrito */
html body .alert a,
html body .alert a:hover,
html body .alert a:focus {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ligações que são a mensagem inteira (aviso de sessão online aberta): sem sublinhado em repouso, porque não há texto à volta de
   que se distinguir; a seta indica a ação (também no telemóvel, onde não há hover) e o sublinhado volta com o rato ou o teclado.
   As ligações no meio de texto mantêm o sublinhado: têm a mesma cor do texto (WCAG 1.4.1). */
html body .alert a.open_meeting,
html body .alert a.open_session {
	text-decoration: none;
}

html body .alert a.open_meeting:hover,
html body .alert a.open_meeting:focus-visible,
html body .alert a.open_session:hover,
html body .alert a.open_session:focus-visible {
	text-decoration: underline;
}

body .alert a.open_meeting::after,
body .alert a.open_session::after {
	content: "\2192" / "";
	display: inline-block;
	margin-left: 6px;
	transition: transform .15s ease;
}

body .alert a.open_meeting:hover::after,
body .alert a.open_session:hover::after {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	body .alert a.open_meeting::after,
	body .alert a.open_session::after {
		transition: none;
	}
}

/* botão de fechar (React: ícone; jQuery: &times;) */
body .alert .close {
	position: absolute;
	top: 50%;
	right: 10px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	opacity: .7;
	text-shadow: none;
	transform: translateY(-50%);
	cursor: pointer;
}

body .alert .close:hover,
body .alert .close:focus-visible {
	opacity: 1;
	background-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* caixa flutuante no topo do backoffice (site.css: fixa, 60% de largura, alertas colados uns aos outros) */
body #formBodyMessage,
body .messages {
	top: 12px;
	left: 50%;
	width: min(720px, calc(100% - 32px));
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body #formBodyMessage>.alert,
body .messages>.alert {
	margin: 0;
	border-radius: var(--hp-radius);
	box-shadow: 0 10px 28px rgba(15, 27, 53, .14), 0 2px 6px rgba(15, 27, 53, .08);
}

:root[data-bs-theme="dark"] body #formBodyMessage>.alert,
:root[data-bs-theme="dark"] body .messages>.alert {
	box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
}

/* no login as mensagens não flutuam */
body.hp-login .messages,
body.hp-login #formBodyMessage {
	position: static;
	transform: none;
	width: auto;
}

/* ---------------------------------------------------------------- mensagem de sucesso (toast, canto inferior direito) */
body div.msg-tray {
	right: 24px;
	bottom: 24px;
	max-width: min(440px, calc(100vw - 32px));
}

body div.msg-tray .inner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 12px 12px 14px;
	background-color: var(--hp-surface);
	color: var(--hp-fg);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-lg);
	box-shadow: 0 10px 28px rgba(15, 27, 53, .16), 0 2px 6px rgba(15, 27, 53, .08);
	line-height: 1.4;
	white-space: normal;
	animation: hp-toast-in .28s cubic-bezier(.2, .8, .2, 1) both;
}

:root[data-bs-theme="dark"] body div.msg-tray .inner,
:root[data-bs-theme="dark"] div.msg-tray .inner {
	box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
}

div.msg-tray .msg-tray-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--hp-ok-bg);
	color: var(--hp-ok-fg);
	font-size: 18px;
}

body div.msg-tray .inner span.content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

div.msg-tray .inner span.content>span {
	display: block;
}

div.msg-tray .msg-tray-close {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--hp-muted);
	font-size: 16px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

div.msg-tray .msg-tray-close:hover {
	background-color: var(--hp-control-bg);
	color: var(--hp-fg);
}

@keyframes hp-toast-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body div.msg-tray .inner {
		animation: none;
	}
}

@media (max-width: 575px) {
	body div.msg-tray {
		right: 12px;
		left: 12px;
		bottom: 12px;
		max-width: none;
	}
}

/* ---------------------------------------------------------------- logótipos (cabeçalho e rodapé) */
/* .logo-light: logótipo próprio para o tema claro (portal_header_logo_light / portal_footer_logo_light); só se mostra
   no tema claro e, nesse caso, esconde o normal. .logo-fix: o normal é claro demais para o fundo claro e escurece-se. */
.logo-light {
	display: none;
}

:root:not([data-bs-theme="dark"]) .logo-light {
	display: inline;
}

:root:not([data-bs-theme="dark"]) .logo-main:has(~ .logo-light) {
	display: none;
}

:root:not([data-bs-theme="dark"]) .logo-fix {
	filter: brightness(.35) saturate(1.4);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-bs-theme="light"]) .logo-light {
		display: none;
	}

	:root:not([data-bs-theme="light"]) .logo-main:has(~ .logo-light) {
		display: inline;
	}

	:root:not([data-bs-theme="light"]) .logo-fix {
		filter: none;
	}
}

/* ---------------------------------------------------------------- botões alternáveis (ex.: lista / grelha) */
/* o botão ativo de um grupo fica preenchido com a cor de destaque */
#content .btn-group>.btn.btn-default.active,
#content .btn-group>.btn.btn-default[aria-pressed="true"],
.btn-group>.btn.btn-default.active,
.btn-group>.btn.btn-default[aria-pressed="true"] {
	color: var(--hp-on-accent);
	background-color: var(--hp-accent);
	border-color: var(--hp-accent) !important;
}

#content .btn-group>.btn.btn-default.active:hover,
#content .btn-group>.btn.btn-default[aria-pressed="true"]:hover,
.btn-group>.btn.btn-default.active:hover,
.btn-group>.btn.btn-default[aria-pressed="true"]:hover {
	color: var(--hp-on-accent);
	background-color: var(--hp-accent);
	filter: brightness(1.08);
}

/* itens dos menus suspensos: o `.dropdown-menu>li>a` do portal/bootstrap põe-nos em display:block e o ícone e o texto
   ficavam colados ao topo; com flex ficam centrados na vertical */
.dropdown-menu>li>.dropdown-item,
.dropdown-menu .dropdown-item {
	display: flex;
	align-items: center;
}

/* ---------------------------------------------------------------- início de sessão (sessions/login.personal) */
/* só o login por defeito (React): a vista define body.hp-login; os logins próprios de cada cliente não mudam */
body.hp-login {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: auto;
	min-height: 100vh;
	padding: 64px 16px 40px;
	box-sizing: border-box;
	font-family: var(--hp-font);
	font-size: 15px;
	color: var(--hp-fg);
	background-color: var(--portal-primary-color, var(--hp-bg));
	background-image:
		radial-gradient(60rem 36rem at 8% -12%, color-mix(in srgb, var(--hp-accent) 18%, transparent), transparent 70%),
		radial-gradient(48rem 32rem at 100% 0%, color-mix(in srgb, var(--hp-accent) 11%, transparent), transparent 65%);
	background-repeat: no-repeat;
}

html:has(body.hp-login) {
	height: auto;
	font-size: 16px;
}

body.hp-login .lang_widget {
	position: absolute;
	top: 14px;
	right: 18px;
	float: none;
}

body.hp-login #logo {
	display: flex;
	justify-content: center;
	margin: 0 0 28px;
	padding: 0;
}

body.hp-login #logo img {
	display: block;
	max-width: min(280px, 80vw);
	max-height: 64px;
	object-fit: contain;
}

body.hp-login #errbox,
body.hp-login #content,
body.hp-login #actionbox {
	width: min(100%, 420px);
	margin-left: auto;
	margin-right: auto;
}

body.hp-login #errbox .alert {
	margin: 0 0 14px;
	border-radius: var(--hp-radius);
}

body.hp-login #actionbox {
	overflow: visible;
	text-align: left;
	background-color: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: 18px;
	box-shadow: 0 10px 40px rgba(15, 27, 53, .12);
}

body.hp-login #actionbox .loginform {
	padding: 28px 28px 24px;
}

body.hp-login #actionbox .login-head {
	padding: 0 0 22px;
	text-align: center;
}

body.hp-login .login-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 14px;
	font-size: 32px;
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
	border-radius: 50%;
}

body.hp-login #actionbox h1.login-title {
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--hp-fg);
	background: transparent;
	border: 0;
}

body.hp-login .loginform .title {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: var(--hp-muted);
}

body.hp-login .loginform .title::before {
	display: none;
}

/* campos: ícone à esquerda e (na palavra-passe) botão de mostrar à direita, dentro do campo */
body.hp-login .loginform .input-group {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 14px;
}

body.hp-login .loginform .input-group.my-0 {
	margin-bottom: 0;
}

body.hp-login .input-group-addon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 6; /* acima do campo em foco (o Bootstrap 5 põe-lhe z-index 5) */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	padding: 0;
	font-size: 18px;
	color: var(--hp-muted);
	background: transparent;
	border: 0;
}

body.hp-login .loginform .form-control {
	width: 100%;
	height: 48px;
	padding: 0 48px;
	font-size: 15px;
	color: var(--hp-fg);
	background-color: var(--hp-surface);
	border: 1px solid var(--hp-border-strong);
	border-radius: var(--hp-radius);
	box-shadow: none;
}

body.hp-login .loginform .form-control::placeholder {
	color: var(--hp-muted);
}

body.hp-login .loginform .form-control:focus {
	border-color: var(--hp-accent);
	box-shadow: none; /* o contorno do foco do teclado (:focus-visible) já está acima */
}

/* sem o asterisco de campo obrigatório (colidia com o botão de mostrar a palavra-passe; os campos têm required) */
body.hp-login .loginform .form-control.required {
	background-image: none;
}

body.hp-login .login-reveal {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	font-size: 18px;
	color: var(--hp-muted);
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

body.hp-login .login-reveal:hover {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
}

/* botões: o principal ocupa a largura toda; o SSO secundário (btn-custom) é um contorno */
body.hp-login #actionbox .btn.submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	margin: 4px 0 0;
	padding: 0 20px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--hp-radius);
	transform: none;
	text-transform: none;
	letter-spacing: normal;
	background-image: none;
	box-shadow: none;
	transition: filter .15s ease, background-color .15s ease;
}

body.hp-login #actionbox .btn.submit.btn-default,
body.hp-login #actionbox .btn.submit.btn-primary,
body.hp-login #actionbox .btn.submit.btn-success {
	color: var(--hp-on-accent);
	background-color: var(--hp-accent);
	border: 1px solid var(--hp-accent) !important;
}

body.hp-login #actionbox .btn.submit.btn-default:hover,
body.hp-login #actionbox .btn.submit.btn-primary:hover,
body.hp-login #actionbox .btn.submit.btn-success:hover {
	filter: brightness(1.08);
}

body.hp-login #actionbox .btn.submit.btn-custom {
	color: var(--hp-accent-ink);
	background-color: transparent;
	border: 1px solid var(--hp-accent-line) !important;
}

body.hp-login #actionbox .btn.submit.btn-custom:hover {
	background-color: var(--hp-accent-soft);
}

body.hp-login #actionbox .btn.submit[disabled] {
	opacity: .65;
	cursor: progress;
}

body.hp-login #actionbox .or-separator {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--hp-muted);
}

body.hp-login #actionbox .or-separator::before,
body.hp-login #actionbox .or-separator::after {
	flex: 1;
	height: 1px;
	content: "";
	background-color: var(--hp-border);
}

/* ligações (registo, recuperar palavra-passe e nome de utilizador) */
body.hp-login #actionbox .form-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 22px 0 0;
	padding: 18px 0 0;
	text-align: center;
	background: transparent;
	border-top: 1px solid var(--hp-border);
	border-radius: 0;
}

body.hp-login #actionbox .form-actions:empty {
	display: none;
}

/* links dentro de texto corrido: sublinhados (WCAG 1.4.1: a cor não pode ser o único sinal) */
body.hp-login a {
	color: var(--hp-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ligações isoladas, empilhadas num bloco que só tem ligações: sem sublinhado em repouso, com ele em hover e foco */
body.hp-login #actionbox .form-actions a {
	display: inline-block;
	padding: 6px 4px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

body.hp-login #actionbox .form-actions a:hover,
body.hp-login #actionbox .form-actions a:focus-visible {
	text-decoration: underline;
}

/* texto de apoio por baixo do título (recuperar palavra-passe) e reCAPTCHA centrado */
body.hp-login .loginform .login-note {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	color: var(--hp-muted);
}

body.hp-login .loginform .g-recaptcha {
	display: flex;
	justify-content: center;
	margin: 0 0 14px;
	max-width: 100%;
	overflow: hidden;
}

/* campos só de leitura (ativação com o código do email) */
body.hp-login .loginform .form-control[readonly] {
	background-color: var(--hp-control-bg);
	color: var(--hp-fg);
}

body.hp-login #plusinfo {
	width: min(100%, 560px);
	margin: 20px auto 0;
	padding: 0 8px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--hp-muted);
}

@media (max-width: 480px) {
	body.hp-login {
		padding-top: 72px;
	}

	body.hp-login #actionbox .loginform {
		padding: 22px 18px 18px;
	}
}

/* "Saltar para o conteúdo": só aparece ao receber foco (o css do backoffice que o esconde não é carregado aqui) */
body.hp-login .skip-to-content {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 20;
	padding: 10px 16px;
	font-weight: 600;
	color: var(--hp-on-accent);
	background-color: var(--hp-accent);
	border-radius: var(--hp-radius);
	text-decoration: none;
}

body.hp-login .skip-to-content:focus {
	top: 12px;
}

/* logótipo feito para fundo escuro (.logo-fix) no tema claro: em vez de o escurecer com um filtro, assenta numa
   etiqueta escura que preserva as cores da marca */
:root:not([data-bs-theme="dark"]) body.hp-login #logo a:has(.logo-fix) {
	display: inline-block;
	padding: 14px 24px;
	background-color: #0f1b35;
	border-radius: 16px;
}

:root:not([data-bs-theme="dark"]) body.hp-login #logo .logo-fix {
	filter: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-bs-theme="light"]) body.hp-login #logo a:has(.logo-fix) {
		padding: 0;
		background: transparent;
	}
}

/* bandeiras do idioma: alvos de toque com pelo menos 32px */
body.hp-login .lang_widget a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
}

body.hp-login h2.title,
body.hp-login h2.or-separator {
	font-family: inherit;
}

/* largura do conteúdo do login: cabeçalho e main têm a largura do cartão (são itens flex do body) */
body.hp-login>header.login-top,
body.hp-login>main {
	width: min(100%, 420px);
}

body.hp-login #errbox,
body.hp-login #content,
body.hp-login #actionbox {
	width: 100%;
}

body.hp-login #actionbox h2.title,
body.hp-login #actionbox h2.or-separator {
	padding: 0;
	font-size: 14px;
	background: transparent;
	border: 0;
}

body.hp-login #actionbox h2.title {
	margin: 0 0 14px;
	font-weight: 600;
	text-align: center;
	color: var(--hp-muted);
}

body.hp-login .loginform .form-control:focus-visible {
	outline-offset: 0;
}

/* o Bootstrap 5 tira o raio dos cantos esquerdos do campo que não é o primeiro filho do .input-group (aqui o ícone vem antes) */
body.hp-login .loginform .input-group>.form-control,
body.hp-login .loginform .input-group>.form-control:not(:first-child) {
	margin-left: 0 !important; /* o seletor do Bootstrap (:not() encadeados) tem mais especificidade */
	border-radius: var(--hp-radius) !important;
}

/* ---------------------------------------------------------------- campos de texto: cor ao editar e campos "propostos" */
/* o Bootstrap (compat bs3) põe color: #555 em :focus, que no escuro fica cinzento sobre fundo escuro */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
	color: var(--hp-fg);
	background-color: var(--hp-surface);
}

/* campo com alteração por validar (.proposed): o fundo e o texto vêm dos tokens, nos dois temas */
.proposed:not(.rselect),
.proposed:not(.rselect):focus,
.rselect.proposed .rselect__control {
	color: var(--hp-fg);
	background: var(--hp-proposed-bg) !important;
}

/* botões por defeito (incluindo os de uma barra de ações e os de um grupo de opções, como Masculino/Feminino):
   contorno suave nos dois temas; no escuro o dark.css punha-o transparente com !important */
.btn.btn-default:not(.btn-circular):not(.btn-link):not(.btn-transparent) {
	border: 1px solid var(--hp-border-strong) !important;
}

.btn.btn-default:not(.btn-circular):not(.btn-link):not(.btn-transparent):hover {
	border-color: var(--hp-accent-line) !important;
}

/* o botão principal: contorno um pouco mais claro do que o fundo */
.btn.btn-primary {
	border: 1px solid color-mix(in srgb, var(--hp-accent) 72%, #ffffff) !important;
}

/* ---------------------------------------------------------------- validação dos campos (parsley) */
/* o parsley pinta os campos com cores claras fixas (rosa no erro, verde no válido): no escuro ficavam com fundo claro.
   O css do parsley carrega depois deste ficheiro e usa !important, por isso o seletor leva `body` e as regras !important */
body input.parsley-error,
body select.parsley-error,
body textarea.parsley-error,
body input.parsley-error:focus,
body select.parsley-error:focus,
body textarea.parsley-error:focus {
	color: var(--hp-bad-fg) !important;
	background-color: var(--hp-bad-bg) !important;
	border: 1px solid var(--hp-bad-fg) !important;
}

body input.parsley-success,
body select.parsley-success,
body textarea.parsley-success,
body input.parsley-success:focus,
body select.parsley-success:focus,
body textarea.parsley-success:focus {
	color: var(--hp-ok-fg) !important;
	background-color: var(--hp-ok-bg) !important;
	border: 1px solid var(--hp-ok-fg) !important;
}

body .parsley-errors-list,
body ul.parsley-error-list {
	color: var(--hp-bad-fg) !important;
}

/* ---------------------------------------------------------------- listas de seleção (react-select: classes rselect__*) */
.rselect__control {
	background-color: var(--hp-surface);
	border-radius: var(--hp-radius);
	box-shadow: none;
}

/* o dark.css fixa a cor do contorno com !important; o raio e o fundo repetem-se aqui porque a classe do emotion
   (react-select: 4px, branco) é injetada depois desta folha e ganhava ao .rselect__control sozinho */
.rselect .rselect__control {
	background-color: var(--hp-surface);
	border-color: var(--hp-field-border) !important;
	border-radius: var(--hp-radius);
}

/* Perfil > Política de proteção de dados: "Desejo ser esquecido" no fundo do separador, à direita; ação destrutiva,
   por isso texto e contorno na cor de erro do tema (legível nos dois modos) */
.privacy-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
}

.privacy-actions>.btn.btn-default.btn-forgetme:not(.btn-circular):not(.btn-link) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--hp-bad-fg);
	background-color: var(--hp-control-bg); /* no escuro o dark.css punha um cinzento onde o texto ficava abaixo de 4.5:1 */
	border-color: color-mix(in srgb, var(--hp-bad-fg) 45%, transparent) !important;
}

.privacy-actions>.btn.btn-default.btn-forgetme:not(.btn-circular):not(.btn-link):hover,
.privacy-actions>.btn.btn-default.btn-forgetme:not(.btn-circular):not(.btn-link):focus-visible {
	color: var(--hp-bad-fg);
	background-color: var(--hp-bad-bg);
	border-color: var(--hp-bad-fg) !important;
}

/* Perfil: botões da foto (editar / remover) sobre o canto inferior direito da imagem, redondos, com o fundo dos cartões,
   contorno suave e sombra leve para se destacarem de qualquer foto; antes eram transparentes e pequenos. Os três casos do
   InputFile: sem foto (o lápis direto no label), foto guardada (.btn-ungroup) e foto acabada de escolher (.flex-center) */
#content .my-photo .btn.btn-circular {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--hp-accent-ink);
	background-color: var(--hp-surface);
	border: 1px solid var(--hp-border-strong) !important;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgb(15 23 42 / .18);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#content .my-photo .btn.btn-circular:hover,
#content .my-photo .btn.btn-circular:focus-visible {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
	border-color: var(--hp-accent-line) !important;
}

#content .my-photo .btn.btn-circular .la {
	font-size: 18px;
	color: inherit;
}

#content .my-photo .btn.btn-circular .la-trash {
	color: var(--hp-bad-fg);
}

#content .my-photo .btn.btn-circular:has(.la-trash):hover,
#content .my-photo .btn.btn-circular:has(.la-trash):focus-visible {
	background-color: var(--hp-bad-bg);
	border-color: color-mix(in srgb, var(--hp-bad-fg) 45%, transparent) !important;
}

/* medido a partir do topo (a foto tem 200px de altura): com uma foto acabada de escolher, o nome do ficheiro por baixo
   aumentava o label e o bottom punha os botões fora da imagem */
#content .my-photo>label>button.btn-circular {
	top: 154px;
	right: 10px;
	bottom: auto;
}

#content .my-photo>label>.btn-ungroup,
#content .my-photo>label>.flex-center {
	position: absolute;
	top: 154px;
	right: 10px;
	display: flex;
	gap: 8px;
}

/* o remover fica sempre à esquerda do editar */
#content .my-photo>label>.flex-center>.xdel {
	order: -1;
}

@media (prefers-reduced-motion: reduce) {
	#content .my-photo .btn.btn-circular {
		transition: none;
	}
}

/* foco na escolha por botões: o humanportal.switch.css punha um contorno de 1px no grupo, que o alargava 2px e deslocava as
   opções; fica o anel dos campos de texto (box-shadow, não ocupa espaço) */
.btn-group.btn-switch:focus-within {
	border: 0;
	box-shadow: 0 0 0 3px var(--hp-accent-line);
}

/* escolha por botões (Radio do common.jsx, ex.: género): os cantos de fora do grupo com o mesmo raio dos campos
   (o Bootstrap punha os da compatibilidade BS3, mais pequenos). A primeira/última opção é a que não tem outra opção antes/
   depois, e não o :first/:last-child: quando há outro elemento no grupo depois das opções (ex.: o símbolo de obrigatório)
   o Bootstrap tirava o raio da direita à última opção */
.btn-switch {
	border-radius: var(--hp-radius);
}

.btn-group.btn-switch>.btn:not(.btn ~ .btn) {
	border-top-left-radius: var(--hp-radius);
	border-bottom-left-radius: var(--hp-radius);
}

.btn-group.btn-switch>.btn:not(:has(~ .btn)) {
	border-top-right-radius: var(--hp-radius);
	border-bottom-right-radius: var(--hp-radius);
}

.rselect .rselect__control:hover {
	border-color: var(--hp-accent-line) !important;
}

.rselect .rselect__control--is-focused,
.rselect .rselect__control--is-focused:hover {
	border-color: var(--hp-accent) !important;
	box-shadow: 0 0 0 3px var(--hp-accent-line);
}

.rselect__single-value,
.rselect__input-container,
.rselect__input {
	color: var(--hp-fg);
}

.rselect__placeholder {
	color: var(--hp-muted);
}

/* o foco do campo é o anel do .rselect__control; o <input> escondido não leva contorno (ficava um oval no canto) */
.rselect__input:focus-visible,
.rselect__input-container input:focus-visible {
	outline: none !important;
}

.rselect__multi-value {
	background-color: var(--hp-accent-soft);
	border-radius: 6px;
}

.rselect__multi-value__label {
	color: var(--hp-accent-ink);
}

.rselect__menu {
	overflow: hidden;
	background-color: var(--hp-surface);
	border: 1px solid var(--hp-border-strong);
	border-radius: var(--hp-radius);
	box-shadow: 0 12px 32px rgba(15, 27, 53, .2);
}

.rselect__menu-portal>.rselect__menu .rselect__option,
.rselect__menu .rselect__option {
	color: var(--hp-fg);
	background-color: transparent;
	cursor: pointer;
}

/* opção em foco (rato ou setas): realce suave; opção escolhida: cor de destaque cheia.
   O dark.css pinta o fundo com seletores de especificidade 0,3,0 (também em :hover), por isso estes têm a mesma */
.rselect__menu .rselect__option.rselect__option--is-focused,
.rselect__menu .rselect__option:hover {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
}

.rselect__menu .rselect__option.rselect__option--is-selected,
.rselect__menu .rselect__option.rselect__option--is-selected:hover {
	font-weight: 600;
	color: var(--hp-on-accent);
	background-color: var(--hp-accent);
}

.rselect__menu .rselect__option.rselect__option--is-selected:hover {
	filter: brightness(1.08);
}

.rselect__menu .rselect__option.rselect__option--is-disabled {
	color: var(--hp-muted);
	cursor: not-allowed;
}

/* ---------------------------------------------------------------- pesquisa das tabelas (Table): cresce ao receber foco */
.table-container>.header input.search {
	width: 250px;
	max-width: 100%;
	transition: width .15s ease;
}

.table-container>.header input.search:focus {
	width: 340px;
}

@media (prefers-reduced-motion: reduce) {
	.table-container>.header input.search {
		transition: none;
	}
}

/* ---------------------------------------------------------------- carregamento das tabelas (refrescar, paginar, pesquisar) */
/* véu translúcido com a cor da superfície, em vez do cinzento a 30%, e um anel que gira, em vez do círculo que pulsa */
.table-container>.overlay {
	z-index: 5;
	background-color: color-mix(in srgb, var(--hp-surface) 68%, transparent);
	-webkit-backdrop-filter: blur(1.5px);
	backdrop-filter: blur(1.5px);
	opacity: 1;
	border-radius: inherit;
}

.table-container>.loading.inline {
	position: absolute;
	top: clamp(70px, 30%, 220px);
	left: 50%;
	display: block;
	width: 44px;
	height: 44px;
	margin: 0;
	transform: translate(-50%, -50%);
	z-index: 6;
}

.table-container>.loading.inline>div {
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid var(--hp-accent-line);
	border-top-color: var(--hp-accent);
	border-radius: 50%;
	opacity: 1;
	transform: none;
	animation: hp-spin .8s linear infinite;
}

@keyframes hp-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.table-container>.loading.inline>div {
		animation-duration: 2.4s;
	}
}

/* ---------------------------------------------------------------- tabelas com cabeçalho fixo (.table.sticky) */
/* o cabeçalho fixo obriga a border-collapse: separate, e o espaçamento de 2px entre células deixava uma grelha de linhas
   escuras; sem espaçamento a tabela fica contínua, com uma linha fina entre linhas */
#content .table.sticky {
	border-spacing: 0;
}

#content .table.sticky.alternate>tbody>tr>td {
	border-bottom: 1px solid var(--hp-border);
}

/* ecrãs pequenos: uma tabela mais larga do que o ecrã desliza dentro do seu cartão, em vez de alargar a página
   (o cabeçalho fixo e o menu ficavam cortados) */
@media (max-width: 991px) {
	#content .table-container {
		max-width: 100%;
		overflow-x: auto;
	}
}

/* ligações/linhas desativadas (ex.: ações terminadas): o #aaa do default.css não tem contraste sobre branco */
#content a.disabled:not(.btn),
#content a.disabled:not(.btn) div {
	color: var(--hp-muted);
}

/* botão circular claro (expandir/recolher linhas): no escuro o .btn-light ficava cinzento claro */
#content .btn-light.btn-circular {
	background-color: transparent !important;
	color: var(--hp-fg);
	border-color: var(--hp-border);
}

#content .btn-light.btn-circular:hover {
	background-color: var(--hp-accent-soft) !important;
}

/* "Publicar" + interruptor no cabeçalho de tabela: separados e alinhados */
#content th label[for=has_elearning_hp] {
	margin: 0 10px 0 0;
	vertical-align: middle;
}

#content th .mtoggle {
	vertical-align: middle;
}

/* linhas alternadas: o default.css/dark.css usavam cinzentos fixos (#f2f5f6 no claro, #4d5155/#515961 no escuro) */
body .table.alternate>tbody>tr:nth-child(odd) {
	background-color: transparent;
}

body .table.alternate>tbody>tr:nth-child(even) {
	background-color: var(--hp-row-alt);
}

/* linhas que se abrem ao clicar (ex.: módulos de uma formação) */
body .table>tbody>tr.clickable,
body .table>tbody>tr.pointer,
body table tr[role="button"] {
	cursor: pointer;
}

/* o dark.css/default.css pintavam estas linhas de cinzento (--bg-hover) ao passar o rato */
body .table>tbody>tr.clickable:hover,
body .table>tbody>tr.pointer:hover,
body table tr[role="button"]:hover,
body table tr[role="button"]:focus {
	background-color: var(--hp-accent-soft) !important;
}

/* linha selecionada: o dark.css/default.css pintavam-na de cinzento com !important */
body .table tr.selected {
	background-color: color-mix(in srgb, var(--hp-accent) 20%, var(--hp-surface)) !important;
}

body table tr[role="button"]:focus-visible {
	outline: 2px solid var(--hp-accent);
	outline-offset: -2px;
}

/* tabelas dentro de um cartão (.widget-box): o cartão é redondo mas fica com overflow visível (os menus das células,
   como o do "+", têm de sair dele), por isso a tabela quadrada saía pelos cantos. Arredondam-se os cantos das células
   e as riscas passam das linhas para as células, para o fundo respeitar o raio. */
.widget-box {
	--wr: calc(var(--hp-radius-lg) - 1px);
}

/* painel inicial (personal.personal): o cartão de cada widget (.widget-box.board, a que o default.css tirava a borda) é que
   faz de moldura, nos 4 lados; o .panel do conteúdo deixa de ter borda própria (só tinha lados e fundo, e a de cima juntava-se
   à linha do cabeçalho e lia-se como uma linha dupla) */
#content .widget-box.board {
	background-color: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-lg);
}

/* "Configurar" o painel: cada widget com contorno tracejado para se ver que se pode arrastar (a regra acima, mais específica,
   tapava a do dashboard.css). Mesma espessura de 1px, para nada se mexer ao entrar e sair da configuração */
#content .widget-box.board.editing {
	border-style: dashed;
	border-color: var(--hp-field-border);
}

#content .widget-box.board.editing>.widget-title.drag {
	cursor: move;
}

/* filtros dos gráficos do painel (menu "⋮" do widget): as listas sem contorno, como linhas do menu; ao passar o rato ganham
   o fundo dos outros itens e, com o teclado, o anel de foco dos campos (o contorno era a única pista de que eram campos) */
#content .widget-box.board>.widget-title .dropdown-menu select.wide {
	background-color: transparent;
	border: 0 !important;
	border-radius: 8px;
	cursor: pointer;
}

#content .widget-box.board>.widget-title .dropdown-menu select.wide:hover {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
}

#content .widget-box.board>.widget-title .dropdown-menu select.wide:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--hp-accent-line);
}

/* sítio onde o widget arrastado vai ficar */
#content .board-placeholder {
	background-color: var(--hp-accent-soft);
	border: 1px dashed var(--hp-accent);
	border-radius: var(--hp-radius-lg);
}

#content .widget-box.board>.panel {
	margin: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0 0 var(--wr) var(--wr);
	box-shadow: none;
}

/* botões do cabeçalho dos widgets (abrir, menu, maximizar/restaurar): todos sem contorno, como os "borderless" do lado;
   ao passar o rato só muda o fundo */
#content .widget-box.board>.widget-title .btn-circular,
#content .widget-box.board>.widget-title .btn-circular:hover,
#content .widget-box.board>.widget-title .btn-circular:focus-visible {
	border-color: transparent !important; /* as regras do .btn-default do default.css pintavam-no de #eee */
}

/* em repouso, a mesma cor nos três (a seta é um <a> e ficava com a cor das ligações) */
#content .widget-box.board>.widget-title .btn-circular {
	color: var(--hp-fg);
}

/* ao passar o rato (ou com o menu aberto) todos com o efeito do maximizar: fundo e ícone na cor de destaque */
#content .widget-box.board>.widget-title .btn-circular:hover,
#content .widget-box.board>.widget-title .btn-circular:focus-visible,
#content .widget-box.board>.widget-title .btn-circular.show {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
}

/* cartão dentro de cartão (ex.: ficheiros de um módulo): sem moldura própria. Dois cantos arredondados encaixados, a 9px um do
   outro, liam-se como uma linha a mais no canto; o cartão exterior já faz de moldura. */
.widget-box .widget-box {
	--wr: 0px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

body .widget-box>table.table {
	border-collapse: separate;
	border-spacing: 0;
	background-color: transparent;
}

body .widget-box>table.table>thead>tr:first-child>th:first-child,
body .widget-box>table.table:not(:has(thead))>tbody>tr:first-child>td:first-child {
	border-top-left-radius: var(--wr);
}

body .widget-box>table.table>thead>tr:first-child>th:last-child,
body .widget-box>table.table:not(:has(thead))>tbody>tr:first-child>td:last-child {
	border-top-right-radius: var(--wr);
}

body .widget-box>table.table>tbody>tr:last-child>td:first-child {
	border-bottom-left-radius: var(--wr);
}

body .widget-box>table.table>tbody>tr:last-child>td:last-child {
	border-bottom-right-radius: var(--wr);
}

/* sem linha a mais por baixo da última: o cartão já tem borda */
body .widget-box>table.table>tbody>tr:last-child>td,
#content .widget-box>table.table>tbody>tr:last-child>td {
	border-bottom: 0;
}

/* riscas nas células (as linhas com estado, como light-success, mantêm o fundo da linha) */
body .widget-box>table.table.alternate>tbody>tr:not([class]):nth-child(even),
body .widget-box>table.table.alternate>tbody>tr.clickable:nth-child(even),
body .widget-box>table.table.alternate>tbody>tr.pointer:nth-child(even),
#content .widget-box>table.table.alternate>tbody>tr:not([class]):nth-child(even),
#content .widget-box>table.table.alternate>tbody>tr.clickable:nth-child(even),
#content .widget-box>table.table.alternate>tbody>tr.pointer:nth-child(even) {
	background-color: transparent;
}

body .widget-box>table.table.alternate>tbody>tr:not([class]):nth-child(even)>td,
body .widget-box>table.table.alternate>tbody>tr.clickable:nth-child(even)>td,
body .widget-box>table.table.alternate>tbody>tr.pointer:nth-child(even)>td {
	background-color: var(--hp-row-alt);
}

/* tabelas que marcam as linhas com .even/.odd em vez de .alternate (ex.: sessões de e-learning) */
body .widget-box>table.table>tbody>tr.even,
#content .widget-box>table.table>tbody>tr.even {
	background-color: transparent;
}

body .widget-box>table.table>tbody>tr.even>td {
	background-color: var(--hp-row-alt);
}

/* linha de detalhe (abre ao expandir e leva outro cartão lá dentro): sem risca, senão fica um friso mais claro à volta do cartão */
body .widget-box>table.table.alternate>tbody>tr:has(.widget-box):nth-child(n),
body .widget-box>table.table.alternate>tbody>tr:has(.widget-box):nth-child(n)>td,
#content .widget-box>table.table.alternate>tbody>tr:has(.widget-box):nth-child(n),
#content .widget-box>table.table.alternate>tbody>tr:has(.widget-box):nth-child(n)>td {
	background-color: transparent;
}

/* o mesmo para as linhas de detalhe de tabelas com .even/.odd que levam uma tabela lá dentro */
body .widget-box>table.table>tbody>tr.even:has(table)>td,
#content .widget-box>table.table>tbody>tr.even:has(table),
#content .widget-box>table.table>tbody>tr.even:has(table)>td {
	background-color: transparent;
}

body .widget-box>table.table>tbody>tr.clickable:hover,
body .widget-box>table.table>tbody>tr.pointer:hover,
body .widget-box>table.table>tbody>tr[role="button"]:hover,
body .widget-box>table.table>tbody>tr[role="button"]:focus {
	background-color: transparent !important;
}

body .widget-box>table.table>tbody>tr.clickable:hover>td,
body .widget-box>table.table>tbody>tr.pointer:hover>td,
body .widget-box>table.table>tbody>tr[role="button"]:hover>td,
body .widget-box>table.table>tbody>tr[role="button"]:focus>td {
	background-color: var(--hp-accent-soft);
}

/* tabelas simples (sem cabeçalho fixo): contínuas, sem espaçamento entre células e com uma linha fina entre linhas */
#content .table.regular_table_grid:not(.sticky),
#content .table.alternate:not(.sticky) {
	border-collapse: collapse;
	border-spacing: 0;
}

#content .table.regular_table_grid:not(.sticky)>tbody>tr>td,
#content .table.alternate:not(.sticky)>tbody>tr>td {
	border-top: 0;
	border-bottom: 1px solid var(--hp-border);
}

/* tabelas de largura fixa: o default.css usa word-break: break-all, que parte palavras a meio ("Po-rto");
   quebra-se entre palavras e só parte uma palavra se não couber de todo */
#content .table.fixed td {
	word-break: normal;
	overflow-wrap: anywhere;
}

/* contador de mensagens por ler no menu lateral: o vermelho do default.css não chega a 4.5:1 sobre o fundo do menu */
#sidebar sup.msg,
sup.msg {
	color: var(--hp-bad-fg);
	font-weight: 700;
}

/* texto escrito na pesquisa das listas de seleção: o default.css punha #333, ilegível no tema escuro */
.rselect .rselect__input,
.rselect .rselect__input-container,
.rselect .rselect__single-value {
	color: var(--hp-fg) !important;
}

/* ---------------------------------------------------------------- tabelas de configuração (.regular_table_grid, ex.: Configuração da aplicação)
   não têm a classe .table, por isso ficavam com os cinzentos do default.css/dark.css (linhas #4d5155/#515961 e espaço entre células) */
body table.regular_table_grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background-color: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	overflow: hidden;
}

body table.regular_table_grid>thead>tr>th {
	padding: 8px 10px;
	background-color: var(--hp-surface-2);
	color: var(--hp-muted);
	font-size: 12px;
	font-weight: 700;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--hp-border);
}

/* as riscas alternadas do default.css/dark.css deixam de existir: linhas transparentes separadas por uma linha fina */
body table.regular_table_grid.alternate>tbody>tr:nth-child(n),
body table.regular_table_grid>tbody>tr {
	background-color: transparent;
}

body table.regular_table_grid>tbody>tr>td {
	padding: 8px 10px;
	vertical-align: middle;
	border: 0;
	border-bottom: 1px solid var(--hp-border);
}

body table.regular_table_grid>tbody>tr:last-child>td {
	border-bottom: 0;
}

body table.regular_table_grid>tbody>tr:not(:last-child):hover {
	background-color: var(--hp-accent-soft);
}

/* ---------------------------------------------------------------- utilitários de display responsivos do Bootstrap 5
   O humanportal.default.css (carregado depois do Bootstrap, também nos sites com Bootstrap 3) redefine .d-none com !important,
   e por isso anulava as classes responsivas (ex.: d-none d-lg-inline-flex ficava sempre escondido). Repõem-se aqui, no último
   ficheiro do backoffice, com os pontos deste Bootstrap (compilado com os do 3): sm 768, md 992, lg 1200, xl 1400, xxl 1600 */
@media (min-width: 768px) {
	.d-sm-none {
		display: none !important;
	}

	.d-sm-inline {
		display: inline !important;
	}

	.d-sm-inline-block {
		display: inline-block !important;
	}

	.d-sm-block {
		display: block !important;
	}

	.d-sm-grid {
		display: grid !important;
	}

	.d-sm-inline-grid {
		display: inline-grid !important;
	}

	.d-sm-table {
		display: table !important;
	}

	.d-sm-table-row {
		display: table-row !important;
	}

	.d-sm-table-cell {
		display: table-cell !important;
	}

	.d-sm-flex {
		display: flex !important;
	}

	.d-sm-inline-flex {
		display: inline-flex !important;
	}
}

@media (min-width: 992px) {
	.d-md-none {
		display: none !important;
	}

	.d-md-inline {
		display: inline !important;
	}

	.d-md-inline-block {
		display: inline-block !important;
	}

	.d-md-block {
		display: block !important;
	}

	.d-md-grid {
		display: grid !important;
	}

	.d-md-inline-grid {
		display: inline-grid !important;
	}

	.d-md-table {
		display: table !important;
	}

	.d-md-table-row {
		display: table-row !important;
	}

	.d-md-table-cell {
		display: table-cell !important;
	}

	.d-md-flex {
		display: flex !important;
	}

	.d-md-inline-flex {
		display: inline-flex !important;
	}
}

@media (min-width: 1200px) {
	.d-lg-none {
		display: none !important;
	}

	.d-lg-inline {
		display: inline !important;
	}

	.d-lg-inline-block {
		display: inline-block !important;
	}

	.d-lg-block {
		display: block !important;
	}

	.d-lg-grid {
		display: grid !important;
	}

	.d-lg-inline-grid {
		display: inline-grid !important;
	}

	.d-lg-table {
		display: table !important;
	}

	.d-lg-table-row {
		display: table-row !important;
	}

	.d-lg-table-cell {
		display: table-cell !important;
	}

	.d-lg-flex {
		display: flex !important;
	}

	.d-lg-inline-flex {
		display: inline-flex !important;
	}
}

@media (min-width: 1400px) {
	.d-xl-none {
		display: none !important;
	}

	.d-xl-inline {
		display: inline !important;
	}

	.d-xl-inline-block {
		display: inline-block !important;
	}

	.d-xl-block {
		display: block !important;
	}

	.d-xl-grid {
		display: grid !important;
	}

	.d-xl-inline-grid {
		display: inline-grid !important;
	}

	.d-xl-table {
		display: table !important;
	}

	.d-xl-table-row {
		display: table-row !important;
	}

	.d-xl-table-cell {
		display: table-cell !important;
	}

	.d-xl-flex {
		display: flex !important;
	}

	.d-xl-inline-flex {
		display: inline-flex !important;
	}
}

@media (min-width: 1600px) {
	.d-xxl-none {
		display: none !important;
	}

	.d-xxl-inline {
		display: inline !important;
	}

	.d-xxl-inline-block {
		display: inline-block !important;
	}

	.d-xxl-block {
		display: block !important;
	}

	.d-xxl-grid {
		display: grid !important;
	}

	.d-xxl-inline-grid {
		display: inline-grid !important;
	}

	.d-xxl-table {
		display: table !important;
	}

	.d-xxl-table-row {
		display: table-row !important;
	}

	.d-xxl-table-cell {
		display: table-cell !important;
	}

	.d-xxl-flex {
		display: flex !important;
	}

	.d-xxl-inline-flex {
		display: inline-flex !important;
	}
}

/* ---------------------------------------------------------------- As minhas tarefas (tasks/my.personal) */
/* cartões brancos com borda suave, como os outros cartões do tema; o estado (bg-danger: em atraso, bg-warning: a terminar)
   usa as cores do tema (o rosa/amarelo fixo do default.css ficava mal no escuro): em atraso o cartão fica vermelho suave,
   a terminar só a etiqueta do tipo de tarefa e a borda. As classes bg-* do Bootstrap têm !important, daí os !important aqui */
.row.task .card-course {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	overflow: hidden;
	color: var(--hp-fg);
	background-color: var(--hp-surface) !important;
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-lg);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.row.task .card-course:hover {
	border-color: var(--hp-accent-line);
	box-shadow: var(--hp-shadow);
}

.row.task .card-course:focus-visible {
	outline: 0;
	border-color: var(--hp-accent);
	box-shadow: 0 0 0 3px var(--hp-accent-line);
}

.row.task .card-course>img {
	height: 146px;
	border-radius: 0;
	border-bottom: 1px solid var(--hp-border);
}

/* curso sem imagem: o quadro com gradiente e ícone das "As minhas formações" (CourseThumb), à largura do cartão */
.row.task .card-course>.task-thumb.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	height: 146px;
	color: #ffffff;
}

.row.task .card-course>.task-thumb.is-placeholder .la {
	font-size: 56px;
	opacity: .9;
}

.row.task .card-course>.icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 146px;
	background-color: var(--hp-surface-2);
	border-bottom: 1px solid var(--hp-border);
}

.row.task .card-course>.icon>svg {
	height: 72px;
	fill: var(--hp-muted);
}

.row.task .card-course>.card-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 14px 16px 16px;
	background-color: transparent !important;
}

.row.task .card-course>.card-content>div,
.row.task .card-course>.card-content>div:not(:last-child) {
	margin: 0;
}

/* tipo de tarefa: etiqueta com o estado */
.row.task .card-course>.card-content>.typename {
	align-self: flex-start;
	gap: 6px;
	max-width: 100%;
	padding: 3px 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hp-muted);
	background-color: var(--hp-surface-2);
	border-radius: 99px;
}

.row.task .card-course>.card-content>.typename>span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.row.task .card-course>.card-content>.typename em.la {
	font-size: 16px;
}

.row.task .card-course>.card-content>.typename svg {
	width: 16px;
	fill: currentColor;
}

/* em atraso (classe danger, posta pelo Task::my() quando o prazo já passou; bg-danger por compatibilidade): o cartão fica
   com o vermelho suave do tema (como antes, mas legível também no escuro); a etiqueta passa para um vermelho um pouco mais
   forte, para não se fundir com o fundo */
.row.task .card-course:is(.danger, .bg-danger) {
	background-color: var(--hp-bad-bg) !important;
	border-color: color-mix(in srgb, var(--hp-bad-fg) 40%, var(--hp-border));
}

.row.task .card-course:is(.danger, .bg-danger)>.card-content>.typename {
	color: var(--hp-bad-fg);
	background-color: color-mix(in srgb, var(--hp-bad-fg) 14%, var(--hp-bad-bg));
}

.row.task .card-course.bg-warning {
	border-color: color-mix(in srgb, var(--hp-warn-fg) 40%, var(--hp-border));
}

.row.task .card-course.bg-warning>.card-content>.typename {
	color: var(--hp-warn-fg);
	background-color: var(--hp-warn-bg);
}

.row.task .card-course>.card-content>.course {
	font-size: 13px;
	color: var(--hp-muted);
}

.row.task .card-course>.card-content>.module {
	font-size: 16px;
	font-weight: 600;
	color: var(--hp-fg);
}

.row.task .card-course>.card-content>.desc,
.row.task .card-course>.card-content>.trainer {
	font-size: 14px;
	color: var(--hp-fg) !important;
}

@media (prefers-reduced-motion: reduce) {
	.row.task .card-course {
		transition: none;
	}
}

/* ---------------------------------------------------------------- cronograma (components/user-cronogram: painel e coursesessions/cronogram) */
/* eventos: fundo suave tingido com a cor do módulo (--ev), faixa dessa cor à esquerda e texto do tema; antes a cor do módulo
   era o fundo sólido e no escuro uma cor clara ficava um bloco cinzento, com a hora quase ilegível */
.rbc-calendar .rbc-event.hp-event {
	color: var(--hp-fg);
	background-color: color-mix(in srgb, var(--ev) 22%, var(--hp-surface));
	border: 0;
	border-left: 3px solid var(--ev);
	border-radius: 6px;
}

.rbc-calendar .rbc-event.hp-event:hover {
	background-color: color-mix(in srgb, var(--ev) 34%, var(--hp-surface));
}

.rbc-calendar .rbc-event.hp-event.rbc-selected {
	background-color: color-mix(in srgb, var(--ev) 40%, var(--hp-surface));
}

.rbc-calendar .rbc-event.hp-event:focus-visible {
	outline: 2px solid var(--hp-accent);
	outline-offset: 1px;
}

.rbc-calendar .rbc-event.hp-event small {
	color: var(--hp-muted);
}

/* sessões previstas e com equivalência: tracejado em vez de meio transparente (o texto ficava sem contraste) */
.rbc-calendar .rbc-event.hp-event.is-tentative {
	background-color: color-mix(in srgb, var(--ev) 10%, var(--hp-surface));
	border-left-style: dashed;
}

/* barra do calendário (Hoje, <, >, Mês/Semana/Dia/Agenda): todos os estados com os tokens do tema. O react-bigcalendar.css
   pintava o botão com foco (ex.: depois de clicar em < ou >) de #e6e6e6 fixo, que no escuro ficava um quadrado branco */
body .rbc-calendar .rbc-toolbar button,
body .rbc-calendar .rbc-toolbar button:focus {
	color: var(--hp-fg);
	background-color: transparent;
	background-image: none;
	border-color: var(--hp-border);
	box-shadow: none;
}

body .rbc-calendar .rbc-toolbar button:hover,
body .rbc-calendar .rbc-toolbar button:active,
body .rbc-calendar .rbc-toolbar button.rbc-active,
body .rbc-calendar .rbc-toolbar button.rbc-active:hover,
body .rbc-calendar .rbc-toolbar button.rbc-active:focus {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
	border-color: var(--hp-border);
	box-shadow: none;
}

body .rbc-calendar .rbc-toolbar button:focus-visible {
	position: relative;
	z-index: 1;
	outline: 0;
	box-shadow: 0 0 0 3px var(--hp-accent-line);
}

/* ---------------------------------------------------------------- tooltips (bootstrap 5) */
/* invertidas em relação à página (escuras no claro, claras no escuro: --hp-fg/--hp-surface trocam de valor com o tema),
   cantos arredondados, sombra leve e texto alinhado à esquerda para as que têm mais de uma linha */
.tooltip {
	--bs-tooltip-bg: var(--hp-fg);
	--bs-tooltip-color: var(--hp-surface);
	--bs-tooltip-opacity: 1;
	--bs-tooltip-padding-x: 10px;
	--bs-tooltip-padding-y: 6px;
	--bs-tooltip-font-size: 13px;
	--bs-tooltip-border-radius: 8px;
	--bs-tooltip-max-width: 320px;
	font-family: inherit;
	line-height: 1.4;
}

.tooltip .tooltip-inner {
	text-align: left;
	box-shadow: 0 4px 14px rgb(15 23 42 / .18);
}

/* ---------------------------------------------------------------- registo (users/register, ecrã React no layout do login) */
/* o mesmo fundo, logótipo e cartão do login (body.hp-login), mais largo por ter muitos campos; a página faz scroll normal
   (o ecrã antigo fixava a altura ao ecrã e punha scroll dentro de cada separador) */
body.hp-register .register-page {
	display: block;
	height: auto;
	padding: 0;
	overflow: visible;
	background: transparent;
}

/* a margem lateral do login: o humanportal.default.css, que o registo carrega, põe body { padding: 0 !important } abaixo
   de 768px e o cartão encostava às bordas */
body.hp-login.hp-register {
	padding-right: 16px !important;
	padding-left: 16px !important;
}

/* o login limita o conteúdo à largura do cartão (420px); o <main> ocupa a largura toda para o 100% abaixo ter base */
body.hp-register #main-content {
	width: 100%;
}

body.hp-register #errbox,
body.hp-register #content {
	width: min(100%, 760px);
}

/* o logótipo já está no cabeçalho do layout */
body.hp-register .register-page .register-logo {
	display: none;
}

body.hp-register #user-register {
	width: min(100%, 760px);
	max-width: none;
	margin: 0 auto;
	padding: 0;
	color: var(--hp-fg);
	background-color: var(--hp-surface);
	border: 0;
	border-radius: 18px;
	box-shadow: 0 10px 40px rgba(15, 27, 53, .12);
	transform: none;
}

body.hp-register #user-register .title {
	padding: 28px 28px 8px;
}

body.hp-register #user-register .title h1 {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--hp-fg);
	background: transparent;
	border: 0;
}

body.hp-register #user-register .register-authgov {
	margin-top: 12px;
	font-size: 14px;
	color: var(--hp-muted);
	text-decoration: none;
}

body.hp-register #user-register .register-authgov img {
	max-height: 36px;
}

body.hp-register #user-register .nav-tabs {
	padding: 0 28px;
}

/* o login sublinha as ligações (acessibilidade do texto corrido); os separadores não são texto corrido */
body.hp-register #user-register .nav-tabs a {
	text-decoration: none;
}

body.hp-register #user-register .tab-content {
	height: auto;
	overflow: visible;
	padding: 8px 12px 0;
	background: transparent;
	border: 0;
}

body.hp-register #user-register .tab-pane {
	padding: 0 16px;
	background: transparent;
	border: 0;
}

/* grupos de campos: título liso (sem o gradiente antigo) e etiquetas numa coluna mais larga (a col-lg-2 partia-as em
   várias linhas no cartão de 760px) */
body.hp-register #user-register .widget-title {
	background-image: none;
}

/* etiquetas por cima dos campos, como no login (em coluna à esquerda partiam-se em várias linhas no cartão) */
body.hp-register #user-register .form-group>[class*="col-"] {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}

body.hp-register #user-register .form-group>label[class*="col-"] {
	margin-bottom: 6px;
}

/* o humanportal.login.css pinta de branco os campos obrigatórios e põe sombra branca nos títulos (no escuro ficavam
   brancos e os títulos desfocados) */
body.hp-register input.required,
body.hp-register select.required {
	background-color: var(--hp-surface);
}

body.hp-register #user-register .widget-title,
body.hp-register #user-register .widget-title * {
	text-shadow: none;
}

/* título dos grupos: ícone, texto e botão de expandir/retrair na mesma linha, centrados na vertical */
body.hp-register #user-register .widget-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: auto;
	min-height: 40px;
	padding: 0 6px 0 14px;
}

body.hp-register #user-register .widget-title h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	line-height: 1.3;
}

body.hp-register #user-register .widget-title .btn-group,
body.hp-register #user-register .widget-title .btn {
	display: flex;
	align-items: center;
	margin: 0;
}

/* botão de expandir/retrair: redondo e transparente; o foco do clique ficava com o cinzento do CSS antigo. Ao passar o
   rato o fundo azul-claro do tema, e com o teclado o anel de foco */
body.hp-register #user-register .widget-title .btn,
body.hp-register #user-register .widget-title .btn:focus,
body.hp-register #user-register .widget-title .btn:active {
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	color: var(--hp-muted);
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
}

body.hp-register #user-register .widget-title .btn:hover {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
}

body.hp-register #user-register .widget-title .btn:focus-visible {
	color: var(--hp-accent-ink);
	background-color: var(--hp-accent-soft);
	outline: 0;
	box-shadow: 0 0 0 3px var(--hp-accent-line);
}

/* título dos grupos: o #666 fixo do CSS antigo não tinha contraste no escuro */
body.hp-register #user-register .widget-title h4,
body.hp-register #user-register .widget-title h4 * {
	color: var(--hp-muted);
}

/* o nome é comprido: o campo ocupa a largura toda (os outros ficam com a largura do .input-tx) */
body.hp-register #user-register input[name="name"] {
	width: 100%;
	max-width: 100%;
}

body.hp-register #user-register .register-choose-type {
	color: var(--hp-muted);
}

body.hp-register #user-register .register-captcha {
	margin: 16px 28px 0;
}

/* ações: ligações (iniciar sessão, recuperar) à esquerda e o botão principal à direita, separados do formulário */
body.hp-register #user-register .register-actions {
	gap: 16px;
	margin: 20px 0 0;
	padding: 18px 28px 24px;
	border-top: 1px solid var(--hp-border);
}

body.hp-register #user-register .register-actions a {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.8;
	color: var(--hp-accent-ink);
	text-decoration: none;
}

body.hp-register #user-register .register-actions a:hover,
body.hp-register #user-register .register-actions a:focus-visible {
	text-decoration: underline;
}

body.hp-register #user-register .register-actions .btn-primary {
	min-height: 44px;
	margin: 0 !important;
	padding: 0 28px;
}

/* texto informativo configurável, por baixo do cartão */
body.hp-register #use-register-info {
	width: min(100%, 760px);
	max-width: none;
	margin: 20px auto 0;
	padding: 0 4px;
	font-size: 14px;
	color: var(--hp-muted);
}

@media (max-width: 767.98px) {
	body.hp-register #user-register .title,
	body.hp-register #user-register .register-actions {
		padding-right: 18px;
		padding-left: 18px;
	}

	body.hp-register #user-register .nav-tabs {
		padding: 0 12px;
	}

	body.hp-register #user-register .register-actions {
		flex-direction: column-reverse;
		align-items: stretch;
		text-align: center;
	}
}

/* botões redondos só com ícone que abrem um menu ("⋮", "⋯"): sem a seta do Bootstrap 5 (.dropdown-toggle::after), o ícone já
   diz que abre um menu. A camada de compatibilidade só a esconde nos botões com o atributo antigo data-toggle, por isso
   ao migrar um botão para data-bs-toggle (ex.: o das colunas das <Table>) a seta aparecia */
.btn-circular.dropdown-toggle::after {
	display: none;
}