/* i9aware — site.css
 *
 * CSS partilhado por todas as páginas excepto a do Score (que tem
 * peso suficiente para viver em score.css separado). Concatenação
 * directa dos blocos <style> que viviam inline nos templates, com
 * comentários a separar por origem. Comportamento idêntico ao
 * inline anterior. Aperto do CSP (style-src 'self') é decisão de
 * policy à parte — não tocada nesta extracção.
 */

/* ─── Acessibilidade ──────────────────────────────────────────────── */

/* Skip link: invisível até receber foco via Tab.
   Permite a quem navega por teclado saltar a sidebar/cabeçalho. */
.skip-link {
	position: absolute;
	top: -40px;
	left: 8px;
	background: #1a4fbe;
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	z-index: 9999;
	transition: top 0.15s;
}
.skip-link:focus {
	top: 8px;
	outline: 2px solid white;
	outline-offset: 2px;
}

/* Foco visível em links e botões — fallback consistente em todo o site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #5ba0ff;
	outline-offset: 2px;
	border-radius: 2px;
}

/* sr-only: texto só para screen readers */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}


/* ─── base.html ─────────────────────────────────────────────── */
:root {
	color-scheme: dark;

	/* Severidade global — usado em notificações, badges, status cards,
	   audit-log render. Adicionar uso novo? Reutiliza estes 4 níveis em
	   vez de inventar cores ad-hoc. */
	--sev-info: #38e1ff;       /* cyan; também CIS Controls */
	--sev-sucesso: #2dd4a7;    /* verde; também NIS 2 */
	--sev-aviso: #f5b942;      /* amarelo; também RGPD */
	--sev-critico: #ff5a5f;    /* vermelho */
}

/* Badge de severidade reutilizável (chip pequeno com cor + texto). */
.sev-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid currentColor;
}
.sev-badge--info { color: var(--sev-info); }
.sev-badge--sucesso { color: var(--sev-sucesso); }
.sev-badge--aviso { color: var(--sev-aviso); }
.sev-badge--critico { color: var(--sev-critico); }

/* Dot indicador (3px) com cor da severidade — para sinos / cards. */
.sev-dot {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
}
.sev-dot--info { background: var(--sev-info); }
.sev-dot--sucesso { background: var(--sev-sucesso); }
.sev-dot--aviso { background: var(--sev-aviso); }
.sev-dot--critico { background: var(--sev-critico); }

/* Paleta por família de cápsulas — usada no catálogo (chips de filtro
   e tag por card). Cores escolhidas para serem distintas das de
   severidade e dos frameworks de compliance, e legíveis sobre o tema
   dark. Adicionar família nova? Acrescentar token + classe utilitária. */
:root {
	--fam-engenharia-social: #ff8b6a;       /* laranja-coral */
	--fam-ia-responsavel: #c084fc;          /* violeta */
	--fam-dados-pessoais: #60a5fa;          /* azul royal */
	--fam-pagamentos-fraudulentos: #fbbf24; /* dourado */
	--fam-incidente: #f87171;               /* vermelho médio */
	--fam-conectividade: #5eead4;           /* teal */
	--fam-identidade-digital: #f472b6;      /* rosa */
	--fam-diagnostico-awareness: #a3e635;   /* lima — diagnósticos/walkthroughs */
}

/* Chip de família — usado no filtro do topo (link) e na tag inline em
   cada card (span). Cor de fundo translúcida + borda + texto na cor. */
.fam-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	border: 1px solid currentColor;
	text-decoration: none;
	transition: background 0.15s;
}
.fam-chip:hover { background: rgba(255, 255, 255, 0.05); }
.fam-chip--activo {
	background: currentColor;
}
.fam-chip--activo > span { color: #0a0a0a; font-weight: 700; }

.fam-chip--todas { color: rgba(255, 255, 255, 0.7); }
.fam-chip--todas.fam-chip--activo { background: rgba(255,255,255,0.15); }
.fam-chip--todas.fam-chip--activo > span { color: #ffffff; }

.fam-chip--engenharia-social { color: var(--fam-engenharia-social); }
.fam-chip--ia-responsavel { color: var(--fam-ia-responsavel); }
.fam-chip--dados-pessoais { color: var(--fam-dados-pessoais); }
.fam-chip--pagamentos-fraudulentos { color: var(--fam-pagamentos-fraudulentos); }
.fam-chip--incidente { color: var(--fam-incidente); }
.fam-chip--conectividade { color: var(--fam-conectividade); }
.fam-chip--identidade-digital { color: var(--fam-identidade-digital); }
.fam-chip--diagnostico-awareness { color: var(--fam-diagnostico-awareness); }

/* Tag mais pequena para o card — só cor + texto, sem borda */
.fam-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.1rem 0.5rem;
	border-radius: 4px;
	font-size: 0.74rem;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.04);
}
.fam-tag--engenharia-social { color: var(--fam-engenharia-social); }
.fam-tag--ia-responsavel { color: var(--fam-ia-responsavel); }
.fam-tag--dados-pessoais { color: var(--fam-dados-pessoais); }
.fam-tag--pagamentos-fraudulentos { color: var(--fam-pagamentos-fraudulentos); }
.fam-tag--incidente { color: var(--fam-incidente); }
.fam-tag--conectividade { color: var(--fam-conectividade); }
.fam-tag--identidade-digital { color: var(--fam-identidade-digital); }
.fam-tag--diagnostico-awareness { color: var(--fam-diagnostico-awareness); }

/* ── Barra de progresso colorida pela família ──────────────────────
   Aplicada a percursos/mockups públicos: o passo actual ganha a cor
   da família do módulo (visual continuity entre catálogo e execução). */
.fam-progresso .progresso-item.actual { border-left-color: var(--fam-color, rgba(120,180,220,0.6)); }
.fam-progresso--engenharia-social { --fam-color: var(--fam-engenharia-social); }
.fam-progresso--ia-responsavel { --fam-color: var(--fam-ia-responsavel); }
.fam-progresso--dados-pessoais { --fam-color: var(--fam-dados-pessoais); }
.fam-progresso--pagamentos-fraudulentos { --fam-color: var(--fam-pagamentos-fraudulentos); }
.fam-progresso--incidente { --fam-color: var(--fam-incidente); }
.fam-progresso--conectividade { --fam-color: var(--fam-conectividade); }
.fam-progresso--identidade-digital { --fam-color: var(--fam-identidade-digital); }
.fam-progresso--diagnostico-awareness { --fam-color: var(--fam-diagnostico-awareness); }

/* ── Microinteracções: tokens partilhados ────────────────────────────
   Duração + easing centralizados para tudo o que respira no site.
   Mantemos o tempo curto (≤240ms): movimentação subtil, não distrai. */
:root {
	--anim-fast: 150ms;
	--anim-med: 240ms;
	--anim-slow: 380ms;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);     /* desacelera no fim */
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* simétrico */
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* pequena ultrapassagem */
}

/* Suaviza âncoras dentro da página (saltos a "Onboarding", crumbs, etc).
   Respeita prefers-reduced-motion para quem desligou animações no SO. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Active-press subtil em botões e chips — confirma o click sem
   esticar o layout. */
button, .btn-acc, .btn-ghost, .btn-primary, .btn-save,
.fam-chip, .tipo-chip, .estado-chip, .sev-badge {
	transition: transform var(--anim-fast) var(--ease-out),
	            background-color var(--anim-fast) var(--ease-out),
	            border-color var(--anim-fast) var(--ease-out),
	            color var(--anim-fast) var(--ease-out),
	            box-shadow var(--anim-fast) var(--ease-out),
	            opacity var(--anim-fast) var(--ease-out);
}
button:active, .btn-acc:active, .btn-ghost:active, .btn-primary:active,
.btn-save:active, .fam-chip:active, .tipo-chip:active, .estado-chip:active {
	transform: translateY(1px);
}

/* Loading state nos botões pós-submit (form com aria-busy ou disabled).
   O browser põe disabled automaticamente em submits multi-click se o
   handler já está a render; este estilo só harmoniza a sensação. */
button[disabled], button[aria-busy="true"],
.btn-acc[disabled], .btn-acc[aria-busy="true"],
.btn-primary[disabled], .btn-save[disabled] {
	opacity: 0.6;
	cursor: progress;
	transform: none !important;
}

/* Flash banners — fade-in subtil ao aparecer. Não controlam saída
   (server-rendered: nasce já visível, fica até o próximo GET). */
.flash, .flash-ok, .flash-info, .flash-erro {
	animation: flash-in var(--anim-med) var(--ease-out);
}
@keyframes flash-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Cards do catálogo / áreas — hover ganha lift coerente em todos. */
.cap-card, .area-card, .aw-card, .stat-card, .notif-card {
	transition: transform var(--anim-med) var(--ease-out),
	            background-color var(--anim-med) var(--ease-out),
	            border-color var(--anim-med) var(--ease-out),
	            box-shadow var(--anim-med) var(--ease-out);
}
.cap-card:hover, .area-card:hover, .aw-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

/* Sino com badge crítico — pulsa subtil para chamar atenção sem
   ficar agressivo. Pára em hover (deixa o utilizador clicar em paz). */
.notif-sino__badge.sev-dot--critico {
	animation: sino-pulse 1.8s var(--ease-in-out) infinite;
}
.notif-sino:hover .notif-sino__badge.sev-dot--critico {
	animation: none;
}
@keyframes sino-pulse {
	0%, 100% { box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 0 rgba(255, 90, 95, 0.55); }
	50% { box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 6px rgba(255, 90, 95, 0); }
}

/* ── Breadcrumbs (.crumb e .crumbs unificados) ──────────────────────
   Há 35 ocorrências espalhadas pelos templates com estilos diferentes
   ('← X' singular, 'X / Y / Z' plural, com ou sem .muted). Em vez de
   reescrever todas, harmonizamos aqui o look e respeitamos qualquer
   hierarquia que já esteja escrita.  */
.crumb, .crumbs {
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1.4;
}
.crumb a, .crumbs a {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
	transition: color var(--anim-fast) var(--ease-out);
}
.crumb a:hover, .crumbs a:hover {
	color: rgba(255, 255, 255, 0.95);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.30);
	text-underline-offset: 3px;
}
/* O último elemento do trail (item actual) fica branco-cheio */
.crumb a:last-of-type, .crumbs a:last-of-type { }
/* Item actual (não é link) ganha mais peso */
.crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Linhas de tabela com borda esquerda colorida por família ou tipo —
   usado em /painel/{nif}/awareness e tabelas equivalentes. Mantém a
   leitura horizontal e dá identidade vertical à coluna esquerda. */
.row-fam, .row-tipo { border-left: 3px solid rgba(255,255,255,0.20); }
.row-fam td:first-child, .row-tipo td:first-child { padding-left: 0.9rem; }
.row-fam--engenharia-social { border-left-color: var(--fam-engenharia-social); }
.row-fam--ia-responsavel { border-left-color: var(--fam-ia-responsavel); }
.row-fam--dados-pessoais { border-left-color: var(--fam-dados-pessoais); }
.row-fam--pagamentos-fraudulentos { border-left-color: var(--fam-pagamentos-fraudulentos); }
.row-fam--incidente { border-left-color: var(--fam-incidente); }
.row-fam--conectividade { border-left-color: var(--fam-conectividade); }
.row-fam--identidade-digital { border-left-color: var(--fam-identidade-digital); }
.row-fam--diagnostico-awareness { border-left-color: var(--fam-diagnostico-awareness); }
.row-tipo--capsula { border-left-color: var(--tipo-capsula); }
.row-tipo--percurso { border-left-color: var(--tipo-percurso); }
.row-tipo--mockup { border-left-color: var(--tipo-mockup); }
.row-tipo--markdown { border-left-color: var(--tipo-markdown); }

/* Paleta por tipo de módulo — cápsula, percurso, mockup, markdown.
   Cores claras e neutras para distinguir do esquema de família (que é
   semântico) e da paleta de severidade. */
:root {
	--tipo-capsula: #94a3b8;    /* cinza-azulado */
	--tipo-percurso: #86efac;   /* verde suave */
	--tipo-mockup: #fb923c;     /* laranja */
	--tipo-markdown: #fda4af;   /* rosa-pessego */
}

/* Versão "chip" — para filtros do topo. */
.tipo-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	border: 1px solid currentColor;
	text-decoration: none;
	transition: background 0.15s;
}
.tipo-chip:hover { background: rgba(255, 255, 255, 0.05); }
.tipo-chip--activo { background: currentColor; }
.tipo-chip--activo > span { color: #0a0a0a; font-weight: 700; }

.tipo-chip--capsula { color: var(--tipo-capsula); }
.tipo-chip--percurso { color: var(--tipo-percurso); }
.tipo-chip--mockup { color: var(--tipo-mockup); }
.tipo-chip--markdown { color: var(--tipo-markdown); }

/* Versão "tag" pequena para tabelas/cards. */
.tipo-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.1rem 0.5rem;
	border-radius: 4px;
	font-size: 0.74rem;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.04);
	text-transform: lowercase;
}
.tipo-tag--capsula { color: var(--tipo-capsula); }
.tipo-tag--percurso { color: var(--tipo-percurso); }
.tipo-tag--mockup { color: var(--tipo-mockup); }
.tipo-tag--markdown { color: var(--tipo-markdown); }

/* Paleta por estado — para chips de status (verde=actividade,
   cinza=parado, amarelo=atenção). Reutiliza tokens existentes em vez
   de criar novos: sucesso para "com activas", neutro para "sem". */
.estado-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.38rem 0.9rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	border: 1px solid currentColor;
	text-decoration: none;
	letter-spacing: 0.005em;
	transition:
		background 180ms ease,
		transform 140ms ease,
		box-shadow 200ms ease;
}
.estado-chip:hover {
	background: rgba(255, 255, 255, 0.04);
	transform: translateY(-1px);
}
.estado-chip--activo {
	background: currentColor;
	box-shadow: 0 4px 14px -6px currentColor;
}
.estado-chip--activo > span { color: #050a14; font-weight: 700; }

.estado-chip--todas { color: rgba(255, 255, 255, 0.7); }
.estado-chip--todas.estado-chip--activo { background: rgba(255, 255, 255, 0.15); }
.estado-chip--todas.estado-chip--activo > span { color: #ffffff; }

.estado-chip--com-activas { color: var(--sev-sucesso); }
.estado-chip--sem-activas { color: rgba(255, 255, 255, 0.5); }

/* Paleta por tipo de engagement (no diário da empresa). Reusa cores
   já definidas para não inflar a paleta. */
:root {
	--eng-diagnostico: var(--sev-info);                /* cyan */
	--eng-awareness: var(--fam-ia-responsavel);        /* violeta */
	--eng-phishing: var(--fam-incidente);              /* vermelho médio */
	--eng-workshop: var(--sev-sucesso);                /* verde */
	--eng-carta-trimestral: var(--fam-pagamentos-fraudulentos); /* dourado */
	--eng-outro: rgba(255,255,255,0.45);               /* neutro */
}

/* Tag inline pequena para timeline do diário */
.eng-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.5rem;
	border-radius: 4px;
	font-size: 0.72rem;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.04);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.eng-tag::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
}
.eng-tag--diagnostico { color: var(--eng-diagnostico); }
.eng-tag--awareness { color: var(--eng-awareness); }
.eng-tag--phishing { color: var(--eng-phishing); }
.eng-tag--workshop { color: var(--eng-workshop); }
.eng-tag--carta-trimestral { color: var(--eng-carta-trimestral); }
.eng-tag--outro { color: var(--eng-outro); }

/* Stat-strip — usada no header de detalhes (empresa, possivelmente
   outras vistas). Linha de "cards-mini" com número grande + label e
   indicador de cor opcional. */
.stat-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.85rem;
	margin: 1.2rem 0 1.6rem;
}
.stat-card {
	position: relative;
	padding: 1.05rem 1.25rem;
	background:
		linear-gradient(135deg, rgba(56,225,255,0.02), rgba(0,0,0,0.22) 70%),
		rgba(255, 255, 255, 0.015);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-left: 3px solid rgba(255, 255, 255, 0.20);
	border-radius: 9px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.03),
		0 8px 22px -18px rgba(0,0,0,0.45);
	transition:
		border-color 200ms ease,
		transform 160ms ease,
		box-shadow 220ms ease,
		background 200ms ease;
}
.stat-card:hover {
	transform: translateY(-2px);
	background:
		linear-gradient(135deg, rgba(56,225,255,0.04), rgba(0,0,0,0.26) 70%),
		rgba(255, 255, 255, 0.022);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.05),
		0 14px 30px -16px rgba(0,0,0,0.50);
}
.stat-card .lbl {
	font-size: 0.66rem;
	font-weight: 700;
	color: rgba(91,160,255,0.85);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0 0 0.35rem;
}
.stat-card .val {
	font-size: 1.55rem;
	font-weight: 700;
	color: rgba(245,253,255,1);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	letter-spacing: -0.018em;
}
.stat-card .val small { font-size: 0.68rem; opacity: 0.55; font-weight: 500; margin-left: 0.25rem; letter-spacing: 0; }
.stat-card .sub {
	font-size: 0.78rem;
	color: rgba(225,245,255,0.62);
	margin-top: 0.35rem;
	letter-spacing: 0.005em;
}
.stat-card .sub a {
	color: rgba(91,160,255,0.85);
	text-decoration: none;
	transition: color 160ms ease;
}
.stat-card .sub a:hover {
	color: rgba(180,235,255,1);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.stat-card a { color: inherit; text-decoration: none; }
.stat-card a:hover .val { color: rgba(180,235,255,1); }

/* Border-left coloured + box-shadow glow correspondente por variante. */
.stat-card--info {
	border-left-color: var(--sev-info);
}
.stat-card--info:hover { border-left-color: rgba(56,225,255,0.95); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px -14px rgba(56,225,255,0.40); }
.stat-card--sucesso {
	border-left-color: var(--sev-sucesso);
}
.stat-card--sucesso:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px -14px rgba(45,212,167,0.40); }
.stat-card--aviso {
	border-left-color: var(--sev-aviso);
}
.stat-card--aviso:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px -14px rgba(245,185,66,0.40); }
.stat-card--critico {
	border-left-color: var(--sev-critico);
}
.stat-card--critico:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px -14px rgba(255,90,95,0.40); }
.stat-card--neutro {
	border-left-color: rgba(255, 255, 255, 0.18);
}

/* Contentor de chips de estado — usado em /empresas. Padding vertical
   coerente com o resto da página; flex-wrap para mobile. */
.estado-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0.4rem 0 1.4rem;
}
.estado-filtros .filtro-label {
	font-size: 0.78rem;
	opacity: 0.6;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}


/* Sufixo de timezone — Manuel 2026-06-12: discreto à direita da hora. */
.tz-suffix {
	font-size: 0.72em;
	opacity: 0.55;
	font-weight: 400;
	letter-spacing: 0.02em;
	white-space: nowrap;
	margin-left: 0.25rem;
}

/* ─── Logo i9 Security (canto superior esquerdo) ──
   Aparece em todas as páginas com sessão (cliente) e na página de erro.
   Liga sempre para casa (painel do cliente ou home pública).
   Decisão Manuel 2026-06-12. */
.painel-logo {
	position: fixed;
	top: 0.7rem;
	left: 1rem;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	padding: 0.3rem 0.5rem;
	border-radius: 6px;
	transition: background 0.15s, transform 0.15s;
}
.painel-logo:hover {
	background: rgba(255,255,255,0.04);
	transform: translateY(-1px);
}
.painel-logo:focus-visible {
	outline: 2px solid rgba(56,225,255,0.55);
	outline-offset: 2px;
}
.painel-logo img {
	height: 26px;
	width: auto;
	display: block;
	opacity: 0.92;
}
.painel-logo:hover img { opacity: 1; }

/* Espaço no topo das páginas que têm header bar (logo + sino) para o
   conteúdo não ficar tapado pelos elementos fixed. */
.shell {
	scroll-margin-top: 3.4rem;
}
body.has-painel-header .shell {
	padding-top: 3.4rem;
}

/* ─── Header bar do painel cliente (sino + engrenagem + sair) ──
   Tudo no canto superior direito, alinhado em linha. Decisão Manuel
   2026-06-12. Substitui o sino isolado para a porta cliente. */
.painel-header-bar {
	position: fixed;
	top: 0.9rem;
	right: 1rem;
	z-index: 50;
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}
.phb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: rgba(255,255,255,0.04);
	color: rgba(255,255,255,0.72);
	border: 1px solid rgba(255,255,255,0.10);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
}
.phb-btn:hover {
	background: rgba(255,255,255,0.10);
	color: #fff;
	transform: translateY(-1px);
	border-color: rgba(56,225,255,0.40);
}
.phb-btn:focus-visible {
	outline: 2px solid rgba(56,225,255,0.55);
	outline-offset: 2px;
}
.phb-badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: rgba(255,90,95,0.95);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0,0,0,0.40);
}
.phb-badge.sev-dot--info { background: var(--sev-info); color: #050608; }
.phb-badge.sev-dot--sucesso { background: var(--sev-sucesso); color: #050608; }
.phb-badge.sev-dot--aviso { background: var(--sev-aviso); color: #050608; }
.phb-badge.sev-dot--critico { background: var(--sev-critico); }

/* Sino de notificações — canto superior direito, flutuante.
   Posicionado em fixed para sobreviver à shell de páginas com nav
   próprio (porta i9 e porta cliente). z-index alto suficiente para
   ficar acima de cards mas abaixo de modais (se algum dia houver). */
.notif-sino {
	position: fixed;
	top: 0.9rem;
	right: 1rem;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.10);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, transform 0.15s;
}
.notif-sino:hover {
	background: rgba(255, 255, 255, 0.10);
	color: #ffffff;
	transform: translateY(-1px);
}
.notif-sino:focus {
	outline: 2px solid rgba(120, 180, 220, 0.55);
	outline-offset: 2px;
}
.notif-sino__icon { display: block; }
.notif-sino__badge {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.32rem;
	border-radius: 999px;
	background: var(--sev-info);
	color: #0a0a0a;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
	box-shadow: 0 0 0 2px #0a0a0a;
}
/* O badge usa a cor da severidade máxima — sobrepõe o background. */
.notif-sino__badge.sev-dot--info { background: var(--sev-info); }
.notif-sino__badge.sev-dot--sucesso { background: var(--sev-sucesso); }
.notif-sino__badge.sev-dot--aviso { background: var(--sev-aviso); }
.notif-sino__badge.sev-dot--critico { background: var(--sev-critico); color: #ffffff; }

* { box-sizing: border-box; }
html {
	/* Reserva sempre espaço para a scrollbar vertical, mesmo nas páginas
	   curtas que não a precisam. Evita o "salto" de layout quando o user
	   navega entre páginas longas (com scroll) e páginas curtas (sem).
	   Combinação: scrollbar-gutter (moderno) + overflow-y scroll (fallback
	   universal). Garante coerência em Chrome/Firefox/Safari/Edge. */
	scrollbar-gutter: stable;
	overflow-y: scroll;
}
body {
	margin: 0;
	min-height: 100vh;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: #0a0a0a;
	color: #ffffff;
	line-height: 1.5;
}

/* Forçar widgets de form a usar paleta dark — sem isto, os dropdowns
   abertos pelo browser usam tema light do sistema (texto preto em fundo
   branco) e ficam ilegíveis em cima do tema dark da app. `color-scheme:
   dark` no :root já ajuda, mas algumas combinações de browser/OS ignoram-no;
   damos cor explícita às options também. */
select, option {
	background-color: #1a1a1a;
	color: #ffffff;
}
select option { padding: 0.4rem 0.6rem; }
select:focus, input:focus, textarea:focus {
	outline: 2px solid rgba(120, 180, 220, 0.5);
	outline-offset: 1px;
}
.shell {
	/* Sem max-width — Manuel 2026-06-12: abrir para o ecrã todo, alinhado
	   à esquerda. Login fica centrado pela própria .login-card { margin:auto }. */
	margin: 0;
	padding: 2rem 1.5rem;
}
h1 { letter-spacing: -0.02em; margin: 0 0 0.5rem; }
a { color: inherit; }
.muted { opacity: 0.6; font-size: 0.875rem; }
hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 2rem 0; }

/* ─── home.html ─────────────────────────────────────────────── */
.home-shell {
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}
.hero {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 4rem 0 3rem;
}
.brand-mark {
	font-size: clamp(3rem, 9vw, 6rem);
	font-weight: 700;
	letter-spacing: 0.15em;
	margin: 0 0 0.5rem;
	line-height: 1;
}
.brand-mark .nine { color: #1a4fbe; }
.tagline {
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	color: #999;
	margin: 0 0 2.5rem;
	letter-spacing: 0.02em;
}
.positioning {
	max-width: 38rem;
	font-size: 1.05rem;
	color: #cccccc;
	margin: 0 0 2.5rem;
}
.cta {
	display: inline-block;
	padding: 0.85rem 2.5rem;
	background: #1a4fbe;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.05em;
	border-radius: 4px;
	transition: background 120ms ease;
}
.cta:hover { background: #2563d9; }
.cta:focus { outline: 2px solid #4d6fa8; outline-offset: 3px; }
.features {
	border-top: 1px solid rgba(255,255,255,0.08);
	border-bottom: 1px solid rgba(255,255,255,0.08);
	padding: 2.5rem 0;
	text-align: center;
	color: #999;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}
.features strong { color: #ffffff; font-weight: 500; }
.foot {
	text-align: center;
	padding: 2.5rem 0 3rem;
	color: #666;
	font-size: 0.85rem;
}
.foot a { color: #999; text-decoration: none; }
.foot a:hover { color: #ffffff; }

/* ─── login.html ────────────────────────────────────────────── */
.login-card {
	max-width: 22rem;
	margin: 4rem auto 2rem;
	padding: 2rem 1.75rem;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	background: rgba(255,255,255,0.02);
}
.login-card h1 { font-size: 1.4rem; margin: 0 0 1.5rem; }
.login-card label { display: block; margin-bottom: 1rem; font-size: 0.9rem; }
.login-card input { width: 100%; padding: 0.5rem 0.65rem; margin-top: 0.25rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: inherit; border-radius: 4px; font: inherit; }
.login-card input:focus { outline: 1px solid #4d6fa8; border-color: #4d6fa8; }
.login-card button { width: 100%; padding: 0.6rem; background: #2a4d8a; color: white; border: none; border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; margin-top: 0.5rem; }
.login-card button:hover { background: #345fa7; }
.login-brand { text-align: center; margin: 2rem auto 0; font-size: 0.85rem; opacity: 0.5; }

/* erro genérico — partilhado entre login, list, detail, edit, eliminar */
.error { color: #f4a8a8; background: rgba(244,168,168,0.08); padding: 0.5rem 0.75rem; border-left: 3px solid #f4a8a8; margin-bottom: 1rem; font-size: 0.9rem; }

/* ─── empresas/list.html ────────────────────────────────────── */
form.add { margin-top: 2rem; padding: 1rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; }
form.add label { display: block; margin-bottom: 0.5rem; }
form.add input[type=text], form.add input[type=date], form.add select, form.add textarea {
	width: 100%; padding: 0.5rem;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	color: inherit; border-radius: 4px; font: inherit;
}
form.add textarea { min-height: 4rem; resize: vertical; }
form.add button { margin-top: 0.5rem; padding: 0.5rem 1rem; background: #2a4d8a; color: white; border: none; border-radius: 4px; font: inherit; cursor: pointer; }
form.add button:hover { background: #345fa7; }

/* ─── equipa/casa.html ──────────────────────────────────────── */
.ok { color: #a8e6a8; background: rgba(168,230,168,0.08); padding: 0.5rem 0.75rem; border-left: 3px solid #a8e6a8; margin: 1rem 0; font-size: 0.9rem; }

.eq-section { margin-top: 2.5rem; }
.eq-section h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.eq-membros { list-style: none; padding: 0; margin: 1rem 0 0; }
.eq-membros li { padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.95rem; }
.eq-membros li:last-child { border-bottom: none; }
.eq-nome { font-weight: 600; }

table.eq-atribuicoes { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9rem; }
table.eq-atribuicoes th { text-align: left; padding: 0.55rem 0.6rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; border-bottom: 1px solid rgba(255,255,255,0.1); }
table.eq-atribuicoes td { padding: 0.75rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.eq-empresa { color: inherit; text-decoration: none; font-weight: 600; }
.eq-empresa:hover { color: #8ab1ff; }
.eq-form { display: flex; gap: 0.5rem; align-items: center; }
.eq-form select { padding: 0.35rem 0.5rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: inherit; border-radius: 4px; font: inherit; font-size: 0.85rem; flex: 1; min-width: 0; }
.eq-form button { padding: 0.4rem 0.85rem; background: #2a4d8a; color: white; border: none; border-radius: 4px; font: inherit; font-size: 0.85rem; cursor: pointer; }
.eq-form button:hover { background: #345fa7; }

/* ─── empresas/list.html — dashboard cards ──────────────────── */
.dash-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; margin-bottom: 1rem; }
.dash-top .muted { font-size: 0.85rem; }
.dash-nav a { color: inherit; opacity: 0.65; text-decoration: none; margin-left: 1rem; }
.dash-nav a:hover { opacity: 1; }

.empresa-cards { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.85rem; }
.ec { padding: 1rem 1.15rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; background: rgba(255,255,255,0.02); }
.ec.ec-i9 { border-color: rgba(26,79,190,0.35); background: rgba(26,79,190,0.05); }
.ec-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.ec-nome { font-size: 1.1rem; font-weight: 600; color: inherit; text-decoration: none; }
.ec-nome:hover { color: #8ab1ff; }
.tag-i9 { background: rgba(26,79,190,0.18); color: #8ab1ff; }
.ec-meta { font-size: 0.8rem; opacity: 0.55; margin: 0.2rem 0 0.85rem; }
.ec-meta span { margin-right: 0.15rem; }
.ec-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; padding: 0.65rem 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
@media (max-width: 38rem) { .ec-row { grid-template-columns: 1fr; } }
.ec-cell { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ec-cell .ec-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; font-weight: 600; }
.ec-cell .ec-value { font-size: 0.9rem; }
.ec-cell .ec-count { font: 700 1.1rem system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ec-actions { display: flex; gap: 1rem; margin-top: 0.7rem; font-size: 0.85rem; }
.ec-actions a { color: inherit; opacity: 0.7; text-decoration: none; }
.ec-actions a:hover { opacity: 1; color: #8ab1ff; }

/* ─── empresas/detail.html ──────────────────────────────────── */
ul.diario { list-style: none; padding: 0; }
ul.diario li { padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
ul.diario li:last-child { border-bottom: none; }
.tag { display: inline-block; padding: 0.1rem 0.5rem; background: rgba(255,255,255,0.08); border-radius: 3px; font-size: 0.8rem; }
.entry-actions { font-size: 0.85rem; margin-top: 0.25rem; }
.entry-actions a { color: inherit; opacity: 0.55; margin-right: 1rem; }
.entry-actions a:hover { opacity: 1; }
.header-actions { font-size: 0.9rem; margin-top: 0.5rem; }
.header-actions a { color: inherit; opacity: 0.6; margin-right: 1rem; }
.header-actions a:hover { opacity: 1; }
.header-actions a.danger { color: #f4a8a8; }

/* ─── empresas/edit.html + engagements/edit.html ────────────── */
form.edit { margin-top: 1.5rem; padding: 1rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; }
form.edit label { display: block; margin-bottom: 0.75rem; }
form.edit input, form.edit select, form.edit textarea {
	width: 100%; padding: 0.5rem;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	color: inherit; border-radius: 4px; font: inherit;
}
form.edit input[disabled] { opacity: 0.5; cursor: not-allowed; }
form.edit textarea { min-height: 4rem; resize: vertical; }
form.edit button { margin-top: 0.5rem; padding: 0.5rem 1rem; background: #2a4d8a; color: white; border: none; border-radius: 4px; font: inherit; cursor: pointer; }
form.edit button:hover { background: #345fa7; }

.actions { display: flex; gap: 1rem; align-items: center; }
.actions a { color: inherit; opacity: 0.7; }

/* ─── empresas/eliminar.html + engagements/eliminar.html ────── */
.warn { padding: 1rem; border-left: 3px solid #d97706; background: rgba(217, 119, 6, 0.08); margin: 1.5rem 0; }
.warn strong { color: #fbbf24; }
.summary { padding: 1rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; margin: 1.5rem 0; }

form.danger { margin-top: 1.5rem; }
form.danger button { padding: 0.5rem 1rem; background: #8a2a2a; color: white; border: none; border-radius: 4px; font: inherit; cursor: pointer; }
form.danger button:hover { background: #a73434; }

/* ─── painel/casa.html ──────────────────────────────────────── */
.painel-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.85rem;
	margin-bottom: 1rem;
}
.painel-top a { color: inherit; opacity: 0.6; }
.painel-top a:hover { opacity: 1; }
.skeleton {
	margin-top: 2rem;
	padding: 1.5rem;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	border-radius: 8px;
}
.skeleton h2 { margin-top: 0; font-size: 1rem; opacity: 0.75; }
.skeleton ul { padding-left: 1.25rem; margin: 0.5rem 0 0; }
.skeleton li { margin: 0.3rem 0; opacity: 0.75; }

/* ─── Banner "vestir a camisola" (impersonação) ─────────────────── */
.camisola-banner {
	position: sticky;
	top: 0;
	z-index: 100;
	background: linear-gradient(135deg, #c97a1b, #e88e2b);
	color: #fff;
	font-size: 0.85rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.camisola-banner-inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0.55rem 1.4rem;
	display: flex;
	align-items: center;
	gap: 0.7rem;
}
.camisola-banner-icon {
	display: inline-flex;
	opacity: 0.95;
}
.camisola-banner-text { flex: 1; }
.camisola-banner-text strong { font-weight: 700; }
.camisola-banner-text em { font-style: normal; opacity: 0.85; font-size: 0.8rem; }
.camisola-banner-papel {
	display: inline-block;
	margin: 0 0.3rem;
	padding: 0.05rem 0.45rem;
	background: rgba(0, 0, 0, 0.22);
	border-radius: 3px;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
}
.camisola-banner-sair {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 0.3rem 0.7rem;
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	transition: background 0.15s;
	white-space: nowrap;
}
.camisola-banner-sair:hover { background: rgba(0, 0, 0, 0.38); }