/* Ecrã de apps do Stratechna Orbit.
 *
 * As cores vêm das variáveis do próprio Frappe sempre que existem, para o ecrã
 * acompanhar o tema claro e o escuro sem duas folhas de estilo. Onde não há
 * variável, entram os degraus da ardósia da Stratechna.
 *
 * Regra de composição: a página inteira cabe num ecrã, sem rolar. Os módulos
 * agrupam-se em blocos que se arrumam por colunas — a primeira versão punha um
 * grupo por linha a toda a largura, e com grupos de um ou dois módulos o ecrã
 * ficava com metros de vazio à direita e obrigava a rolar para chegar ao fim.
 */

/* ── Barra de cima: símbolo maior, com o nome ao lado ───────────────────── */
.desktop-navbar .navbar-home {
	display: flex;
	align-items: center;
	gap: 10px;
}

.desktop-navbar .navbar-home #brand-logo {
	height: 30px;
	width: auto;
}

.desktop-navbar .navbar-home .orbit-marca-nome {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var(--text-color, #22303d);
}

@media (max-width: 720px) {
	.desktop-navbar .navbar-home .orbit-marca-nome {
		display: none; /* em telemóvel, o símbolo chega */
	}
}

/* A grelha de origem fica no sítio, apenas escondida: se a nossa falhar, basta
   tirar esta classe para o ecrã do Frappe voltar. */
.desktop-container.orbit-escondido {
	display: none;
}

/* ── A página ──────────────────────────────────────────────────────────────
   Coluna única: saudação em cima, blocos no meio a ocupar o que sobra, rodapé
   encostado ao fundo do ecrã mesmo quando há poucos módulos. */
:root {
	/* O espaçamento lateral da faixa que sangra até às bordas. Vive numa
	   variável porque JÁ SE PERDEU DUAS VEZES: havia quatro regras a escrever
	   `padding: <algo> 0 <algo>` na faixa — escritas quando ela acabava na
	   coluna de conteúdo — e cada uma delas punha o horizontal a zero, que é o
	   que alinha o que lá está com os blocos. Agora o horizontal é sempre esta
	   variável, e o que as regras de altura mexem é só o vertical. */
	--orbit-faixa-lado: max(28px, calc(50vw - 700px + 28px));
}

#orbit-pagina {
	display: flex;
	flex-direction: column;
	/* A altura da barra de cima é medida pelo JS e escrita em `--orbit-topo`:
	   fixá-la em 60px deixava a página 1px mais alta que o ecrã e aparecia a
	   barra de rolamento — precisamente o que se queria evitar. */
	min-height: calc(100vh - var(--orbit-topo, 60px));
	/* 1400 e não 1180: com 47 módulos, esta largura dá NOVE colunas por bloco em
	   vez de oito e encurta a página em 75px — medido, não estimado. É mais
	   altura do que se ganhou a apertar espaçamentos, e vinha de graça.
	   1400 porque é o que enche um portátil de 1440 lógicos sem margem morta e
	   continua equilibrado num monitor externo; mais do que isto estica as
	   linhas de símbolos até custarem a percorrer com os olhos. */
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 28px;
	box-sizing: border-box;
}

/* ── Saudação ──────────────────────────────────────────────────────────── */
#orbit-saudacao {
	/* Era 34/20. O espaço em cima e em baixo dos blocos estava a sobrar e a
	   fazer a grelha parecer pequena no meio do ecrã — e era esse mesmo espaço
	   que eu andava a poupar encolhendo os símbolos. */
	padding: 22px var(--orbit-faixa-lado) 12px;
}

#orbit-saudacao .orbit-saudacao-titulo {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text-color, #22303d);
}

#orbit-saudacao .orbit-saudacao-frase {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-muted, #5f7386);
}

/* ── Agenda ────────────────────────────────────────────────────────────────
   Mês à esquerda, dia à direita, ambos à direita da saudação. A faixa de cima
   deixa de ser só um cumprimento e passa a valer o espaço que ocupa.

   Isto faz a página passar de um ecrã — decisão do utilizador, com o rodapé a
   ficar abaixo da dobra. O `min-height: 100vh` do `#orbit-pagina` mantém-se: só
   garante o MÍNIMO, e deixa a página crescer e rolar quando é preciso. */
#orbit-saudacao {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
}

/* ── A faixa da marca ──────────────────────────────────────────────────────
   Só a zona da saudação é escura, e não a página inteira. A razão é do sistema
   de ícones: os 47 mosaicos são ardósia (#22303d) desenhados para fundo claro,
   e sobre preto desapareciam — havia que trocá-los todos pela variante clara.
   Além disso o Frappe tem tema por utilizador e o resto do desk (CRM, ERP,
   Desk) continua claro: uma página toda escura só aqui fazia um salto a cada
   entrada numa app.

   Assim a marca fica onde o olho cai primeiro, os mosaicos ficam sobre o fundo
   para que foram desenhados, e os dois temas continuam a funcionar.

   O acento muda com o fundo, como manda a regra da marca: #880000 sobre claro,
   #ea5c55 sobre escuro. Aqui o fundo é sempre escuro, logo é sempre o claro. */
#orbit-saudacao {
	position: relative;
	overflow: hidden;
	/* A TODA A LARGURA DO ECRÃ, e não só da coluna de conteúdo.
	   A página vive numa coluna de 1400px centrada; para a faixa sangrar até
	   às bordas, puxa-se cada lado pela distância que vai do centro da coluna
	   ao centro do ecrã — `50% - 50vw`. O conteúdo dela fica alinhado com o
	   resto por um padding do mesmo tamanho. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 18px;
	padding: 24px var(--orbit-faixa-lado) 22px;
	background: linear-gradient(135deg, #22303d 0%, #1a2530 100%);
	color: #e4e9ee;
	align-items: center;
}

/* O grafismo: a própria elipse da marca do Orbit, muito esbatida, encostada à
   direita e cortada pela margem. É SVG desenhado aqui — não depende de nenhuma
   imagem do site, escala em qualquer largura e não há ficheiro para manter. */
#orbit-saudacao::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -40px;
	width: 380px;
	height: 380px;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0.09;
	background: no-repeat center / contain
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='none'%3E%3Cellipse cx='256' cy='256' rx='230' ry='112' stroke='%23c8d0d8' stroke-width='14' transform='rotate(-30 256 256)'/%3E%3Cellipse cx='256' cy='256' rx='168' ry='82' stroke='%23c8d0d8' stroke-width='12' transform='rotate(-30 256 256)'/%3E%3Ccircle cx='256' cy='256' r='44' fill='%23ea5c55'/%3E%3C/svg%3E");
}

#orbit-saudacao > * {
	position: relative;
}

#orbit-saudacao .orbit-saudacao-titulo {
	color: #f2f5f8;
}

#orbit-saudacao .orbit-saudacao-frase {
	color: #a9b7c4;
}

/* A fila de pontos é o divisor da marca, o mesmo que separa secções no
   stratechna.com — aqui em pequeno, entre o cumprimento e a frase. */
.orbit-saudacao-pontos {
	display: flex;
	gap: 5px;
	margin: 12px 0 0;
}

/* A marca da empresa, à direita da faixa, com as ligações por baixo. Veio do
   rodapé: aqui tem contraste e está onde já se olha. */
.orbit-saudacao-marca {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	text-align: right;
}

.orbit-saudacao-marca img {
	height: 54px;
	width: auto;
	display: block;
}

.orbit-saudacao-marca a {
	/* Discreta de propósito: o que a licença exige é que seja alcançável, não
	   que compita com a marca que está por cima dela. */
	font-size: 10px;
	letter-spacing: 0.02em;
	color: #6b7c8c;
	text-decoration: none;
}

.orbit-saudacao-marca a:hover,
.orbit-saudacao-marca a:focus-visible {
	color: #a9b7c4;
	text-decoration: underline;
}

.orbit-saudacao-pontos span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: block;
	box-sizing: border-box;
}

/* Os das pontas são vazados, como no divisor do stratechna.com, onde a fila
   começa e acaba em círculos de contorno. */
.orbit-saudacao-pontos .orbit-ponto-vazado {
	background: none;
	border: 1.5px solid #ea5c55;
}

.orbit-saudacao-texto {
	flex: 1 1 auto;
	min-width: 0;
}

.orbit-agenda-caixa {
	flex: none;
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.orbit-mes,
.orbit-agenda {
	box-sizing: border-box;
	padding: 11px 13px 10px;
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #e2e8ee);
	border-radius: 12px;
}

.orbit-mes { width: auto; flex: none; }
.orbit-agenda { width: auto; flex: none; display: flex; flex-direction: column; }

/* Mesmo cabeçalho dos blocos de módulos — título, risco, e uma acção à direita
   quando faz sentido. A repetição é de propósito: são a mesma família. */
.orbit-agenda-cab {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
}

.orbit-agenda-titulo {
	flex: none;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-color, #22303d);
}

.orbit-agenda-risco {
	flex: 1 1 auto;
	min-width: 8px;
	height: 1px;
	background: var(--border-color, #e2e8ee);
}

.orbit-agenda-marcar {
	flex: none;
	padding: 3px 9px;
	border: 1px solid var(--border-color, #e2e8ee);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--text-muted, #5f7386);
}

.orbit-agenda-marcar:hover,
.orbit-agenda-marcar:focus-visible {
	color: var(--text-color, #22303d);
	border-color: var(--text-light, #8a9bab);
	text-decoration: none;
}

/* ── Vista mensal ──────────────────────────────────────────────────────────
   Sete colunas fixas: com `auto-fill` as semanas desalinhavam consoante o mês
   começasse à segunda ou ao domingo. */
.orbit-mes-grelha {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
}

.orbit-mes-dia {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	border-radius: 6px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--text-muted, #5f7386);
}

.orbit-mes-dia--cab {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-light, #8a9bab);
}

/* Ocupado é preenchimento, hoje é contorno. Duas pistas diferentes para duas
   coisas diferentes — se fossem ambas cor, um dia ocupado que calhasse hoje
   perdia uma das duas informações. */
.orbit-mes-dia--ocupado {
	background: var(--bg-color, #eef2f5);
	font-weight: 600;
	color: var(--text-color, #22303d);
}

.orbit-mes-dia--hoje {
	box-shadow: inset 0 0 0 1.5px #ea5c55;
	font-weight: 600;
	color: var(--text-color, #22303d);
}

/* ── Compromissos do dia ───────────────────────────────────────────────── */
.orbit-agenda-lista {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.orbit-agenda-linha {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 3px 4px;
	margin: 0 -4px;
	border-radius: 6px;
	font-size: 12.5px;
	line-height: 1.35;
	text-decoration: none;
	color: inherit;
}

a.orbit-agenda-linha:hover,
a.orbit-agenda-linha:focus-visible {
	background: var(--bg-color, #f4f7f9);
	text-decoration: none;
	color: inherit;
}

.orbit-agenda-hora {
	flex: none;
	width: 36px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--text-color, #22303d);
}

/* O título corta com reticências em vez de partir a linha: com quatro
   compromissos, uma linha dupla fazia a faixa crescer de forma imprevisível. */
.orbit-agenda-nome {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-muted, #5f7386);
}

.orbit-agenda-meet {
	flex: none;
	width: 13px;
	height: 13px;
	border-radius: 3px;
	background: #22303d;
	opacity: 0.5;
}

a.orbit-agenda-linha:hover .orbit-agenda-meet { opacity: 0.9; }

.orbit-agenda-vazio {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--text-light, #8a9bab);
}

/* Em ecrãs estreitos a agenda sai: a saudação sozinha ainda funciona, dois
   quadros de 232 e 400px encavalitados não. */
@media (max-width: 1100px) {
	.orbit-agenda-caixa { display: none; }
}

/* ── Os blocos ─────────────────────────────────────────────────────────────
   Duas linhas de dois blocos, em colunas iguais: cada bloco de baixo fica
   exactamente por baixo do de cima, com a mesma largura. Em baixo estão os
   grupos que só dão uma linha de símbolos, e por isso a linha é mais baixa.

   Dentro de cada linha os blocos esticam à mesma altura; entre linhas, não:
   a de baixo é naturalmente mais baixa, e é isso que se quer. */
/* ── A marca de água ──────────────────────────────────────────────────────
   O mesmo símbolo que está esbatido na faixa escura, agora em grande sobre o
   branco: encostado à direita e cortado pela borda, como se estivesse a entrar
   pelo lado.

   Fica ATRÁS de tudo (`z-index: -1`) e os blocos mantêm a superfície opaca —
   o desenho aparece à volta deles e por baixo do último, nunca por trás de
   texto. É também por isso que a opacidade é tão baixa: num ecrã cheio, o que
   se vê são fatias entre os blocos, e uma marca de água que se nota é uma
   marca de água a mais.

   Vive no CORPO branco e não na página inteira: a página tem de deixar a faixa
   escura sangrar para fora dela por margens negativas, e um `overflow: hidden`
   ali cortava-a. O corpo não tem esse problema — e é ele o fundo branco de que
   se está a falar. */
#orbit-corpo::after {
	content: "";
	position: absolute;
	right: -170px;
	bottom: -90px;
	width: 620px;
	height: 620px;
	/* `z-index: -1` NÃO serve aqui: manda o desenho para trás do fundo do
	   próprio elemento pai, e ele desaparece por completo — foi o que
	   aconteceu à primeira. Fica em `0` e são os blocos que sobem para `1`,
	   que é o que põe o desenho ENTRE o fundo e os cartões. */
	z-index: 0;
	pointer-events: none;
	opacity: 0.09;
	background: no-repeat center / contain
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='none'%3E%3Cellipse cx='256' cy='256' rx='230' ry='112' stroke='%2322303d' stroke-width='14' transform='rotate(-30 256 256)'/%3E%3Cellipse cx='256' cy='256' rx='168' ry='82' stroke='%2322303d' stroke-width='12' transform='rotate(-30 256 256)'/%3E%3Ccircle cx='256' cy='256' r='44' fill='%23880000'/%3E%3C/svg%3E");
}

[data-theme="dark"] #orbit-corpo::after {
	opacity: 0.11;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='none'%3E%3Cellipse cx='256' cy='256' rx='230' ry='112' stroke='%23c8d0d8' stroke-width='14' transform='rotate(-30 256 256)'/%3E%3Cellipse cx='256' cy='256' rx='168' ry='82' stroke='%23c8d0d8' stroke-width='12' transform='rotate(-30 256 256)'/%3E%3Ccircle cx='256' cy='256' r='44' fill='%23ea5c55'/%3E%3C/svg%3E");
}

/* ── Corpo: blocos à esquerda, agenda à direita ───────────────────────────
   A agenda estava deitada dentro da faixa e era ela que lhe dava 185px de
   altura. De pé, ao lado dos blocos, não custa altura nenhuma — os blocos são
   mais altos do que ela — e os 145px que se libertam voltam para os símbolos.
   O custo é a largura: a coluna leva 300px que os blocos deixam de ter. Vale a
   pena porque neste ecrã o que falta é altura, não largura. */
#orbit-corpo {
	position: relative;
	overflow: hidden;
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	min-height: 0;
}

#orbit-corpo > #orbit-grelha {
	flex: 1 1 auto;
	min-width: 0;
}

#orbit-corpo > .orbit-agenda-caixa {
	position: relative;
	z-index: 1;
	flex: none;
	width: 300px;
	flex-direction: column;
	align-items: stretch;
}

/* Em ecrãs estreitos a coluna passa para baixo dos blocos em vez de os
   espremer; abaixo de tablet sai, como já saía. */
@media (max-width: 1100px) {
	#orbit-corpo { flex-direction: column; }
	#orbit-corpo > .orbit-agenda-caixa { width: 100%; flex-direction: row; }
}

#orbit-grelha {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	/* `center` repartia a folga que sobrava em duas faixas vazias, uma acima e
	   outra abaixo dos blocos — era o «espaço antes e depois» que se notava.
	   Encostados ao cimo, a folga junta-se toda antes do rodapé, onde não
	   separa nada. */
	justify-content: flex-start;
	gap: 18px;
}

/* ── Disposição: um bloco por linha, a toda a largura ──────────────────────
   Era uma grelha 2×2. Com blocos de 22, 9, 7 e 9 módulos, esticá-los à altura
   do mais alto da linha deixava vazios grandes — mais de metade do bloco de
   gestão era espaço morto — e as duas colunas nunca alinhavam entre si.

   Empilhados, cada bloco tem a altura do que leva, há uma margem esquerda e uma
   direita só, e os símbolos ficam todos na mesma grelha de colunas: é daí que
   vem a harmonia que faltava. A leitura passa a ser de cima para baixo, que é
   como se percorre uma página. */
.orbit-linha {
	display: grid;
	align-items: stretch;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 18px;
}

.orbit-bloco {
	/* Acima da marca de água, que vive no fundo do corpo. */
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 16px 16px 8px;
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #e2e8ee);
	border-radius: 12px;
}

/* Título à esquerda, legenda à direita e o risco a ligar os dois — a forma que
   foi aprovada na primeira versão. */
.orbit-bloco-cab {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 2px 12px;
}

.orbit-bloco-titulo {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-color, #22303d);
}

.orbit-bloco-risco {
	flex: 1 1 auto;
	min-width: 12px;
	height: 1px;
	background: var(--border-color, #e2e8ee);
}

.orbit-bloco-nota {
	flex: none;
	font-size: 11.5px;
	line-height: 1.35;
	text-align: right;
	color: var(--text-light, #8a9bab);
}

.orbit-bloco-nota:empty {
	display: none;
}

/* Em blocos estreitos a legenda não cabe ao lado do título sem espremer o
   risco até desaparecer; nesse caso sai, e o título fica sozinho. */
@media (max-width: 1080px) {
	.orbit-bloco-nota { display: none; }
}

/* ── Os módulos ──────────────────────────────────────────────────────────
   Encostados ao cimo do bloco, sempre. Chegou a haver aqui um
   `align-content: space-between` para «encher» os blocos que a linha estica à
   altura do mais alto — mas isso fazia o espaço entre linhas de símbolos
   depender do bloco em que estavam: no Gestão as duas linhas afastavam-se uma
   para o topo e outra para o fundo, e não pareciam da mesma família. O vazio
   que sobra num bloco mais curto é melhor do que espaçamento inconstante. */
.orbit-lista {
	flex: 1 1 auto;
	display: grid;
	/* TECTO DE COLUNAS, e não só um mínimo.
	   Com os blocos a toda a largura, o `auto-fill` dava dezoito colunas de
	   71px e os nomes partiam-se a meio da palavra — «Configura-ção»,
	   «Recrutamen-to». E não ganhava altura nenhuma: o número de LINHAS é
	   ditado pelo bloco maior (22 módulos), que dá duas linhas a partir de
	   onze colunas. Ou seja, passar de doze para dezoito colunas estragava os
	   nomes sem poupar um pixel.
	   O `max()` põe o tecto: a coluna nunca é mais estreita do que um
	   duodécimo da largura, logo nunca há mais de doze. Em ecrãs estreitos o
	   mínimo em pixéis volta a mandar, e as colunas reduzem-se sozinhas. */
	grid-template-columns: repeat(auto-fill, minmax(max(92px, calc(100% / 12)), 1fr));
	align-content: start;
	gap: 2px;
}

.orbit-cartao {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 10px 4px 12px;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: background-color 120ms ease;
}

.orbit-cartao:hover,
.orbit-cartao:focus-visible {
	background: var(--bg-color, #f4f7f9);
	text-decoration: none;
	color: inherit;
}

/* 52px é o tamanho a que estes mesmos símbolos são mostrados no stratechna.com,
   medido lá. Ter os dois sítios ao mesmo tamanho não é só arrumação: é o mesmo
   desenho a ser reconhecido no site e dentro do produto. */
.orbit-cartao-img,
.orbit-cartao-vazio {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	flex: none;
}

.orbit-cartao-vazio {
	background: var(--bg-color, #eef2f5);
}

.orbit-cartao-nome {
	font-size: 11.5px;
	line-height: 1.25;
	text-align: center;
	color: var(--text-muted, #5f7386);
	/* `anywhere` partia «Subcontratação» a meio da palavra; `break-word` só
	   quebra quando a palavra não cabe de todo. */
	overflow-wrap: break-word;
	/* Sem hifenização automática: em rótulos de uma ou duas palavras corta a
	   meio da palavra e lê-se pior do que a partir a linha. */
	hyphens: manual;
}

/* ── Apps por subscrever ───────────────────────────────────────────────────
   Ficam na grelha, a cinzento, com um selo a convidar. Dessaturar o símbolo em
   vez de o esconder mantém a app reconhecível — o cliente vê o que lhe falta,
   e nós não perdemos a venda a quem não sabe que existe. */
.orbit-cartao--fechada {
	position: relative;
	cursor: pointer;
}

.orbit-cartao--fechada .orbit-cartao-img {
	filter: grayscale(1);
	opacity: 0.38;
}

.orbit-cartao--fechada .orbit-cartao-nome {
	color: var(--text-light, #8a9bab);
}

.orbit-cartao--fechada .orbit-cartao-selo {
	display: block;
	margin-top: 3px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-light, #8a9bab);
	opacity: 0;
	transition: opacity 120ms ease;
}

.orbit-cartao--fechada:hover .orbit-cartao-img,
.orbit-cartao--fechada:focus-visible .orbit-cartao-img {
	filter: grayscale(0.3);
	opacity: 0.85;
}

.orbit-cartao--fechada:hover .orbit-cartao-selo,
.orbit-cartao--fechada:focus-visible .orbit-cartao-selo {
	opacity: 1;
	color: var(--text-muted, #5f7386);
}

@media (prefers-reduced-motion: reduce) {
	.orbit-cartao--fechada .orbit-cartao-selo,
	.orbit-cartao--fechada .orbit-cartao-img { transition: none; }
}

/* Um logótipo para cada tema. Quem manda é o `data-theme` que o Frappe carimba
   na raiz — e não a preferência do sistema: no tema «automático» o próprio
   Frappe resolve o sistema e carimba o resultado. Ler `prefers-color-scheme`
   por cima disso escondia o logótipo certo quando os dois discordavam. */
.orbit-so-escuro { display: none; }

[data-theme="dark"] .orbit-so-claro { display: none; }
[data-theme="dark"] .orbit-so-escuro { display: block; }

/* Em ecrãs baixos aperta-se o espaço vertical em vez de se deixar rolar. */
@media (max-height: 860px) {
	/* Só o vertical. O padding horizontal da faixa é o que alinha o que lá
	   está com os blocos — pô-lo a zero encostava o texto à borda do ecrã. */
	#orbit-saudacao { padding-top: 20px; padding-bottom: 14px; }
	.orbit-cartao { padding: 8px 4px 10px; gap: 6px; }
	.orbit-bloco { padding: 14px 14px 6px; }
}

/* A faixa da marca também aperta — mas só nas margens, nunca no que lá está
   escrito. */
#orbit-pagina[data-densidade="apertada"] #orbit-saudacao,
#orbit-pagina[data-densidade="minima"] #orbit-saudacao {
	padding-top: 18px;
	padding-bottom: 14px;
	margin-bottom: 14px;
}

#orbit-pagina[data-densidade="apertada"] .orbit-bloco {
	padding: 11px 14px 3px;
}

#orbit-pagina[data-densidade="apertada"] .orbit-bloco-cab {
	margin-bottom: 8px;
}

/* ── Último recurso ────────────────────────────────────────────────────────
   Quando nem apertado cabe — muitos módulos num ecrã baixo. Aqui sim os
   símbolos encolhem mais, porque a alternativa é a página rolar e o rodapé
   ficar escondido. */
#orbit-pagina[data-densidade="minima"] .orbit-lista {
	grid-template-columns: repeat(auto-fill, minmax(max(68px, calc(100% / 12)), 1fr));
}

#orbit-pagina[data-densidade="minima"] .orbit-cartao {
	padding: 5px 3px 7px;
	gap: 4px;
}

#orbit-pagina[data-densidade="minima"] .orbit-cartao-img,
#orbit-pagina[data-densidade="minima"] .orbit-cartao-vazio {
	/* Nunca abaixo de 44px, que é a medida a que um alvo continua fácil de
	   acertar. Abaixo disto é melhor a página rolar. */
	width: 44px;
	height: 44px;
}

#orbit-pagina[data-densidade="minima"] .orbit-cartao-nome {
	font-size: 10.5px;
	line-height: 1.25;
}

#orbit-pagina[data-densidade="minima"] .orbit-bloco {
	padding: 8px 12px 2px;
}

#orbit-pagina[data-densidade="minima"] .orbit-bloco-cab {
	margin-bottom: 6px;
}

#orbit-pagina[data-densidade="minima"] #orbit-grelha {
	gap: 12px;
}

/* ── Agenda recolhida ──────────────────────────────────────────────────────
   Quando a página não cabe no ecrã, a agenda recolhe ANTES de os símbolos
   encolherem ao mínimo. A ordem é deliberada: este ecrã é um lançador, e o que
   ele existe para fazer são os símbolos. O calendário do mês é orientação —
   útil, mas a data também está no relógio do sistema — enquanto os compromissos
   de hoje são informação que não está em mais lado nenhum.
   Por isso recolher é: o mês sai, o «Hoje» fica.

   Sai cerca de 125px, que é mais do que se ganha a apertar tudo o resto junto.

   É um estado à parte de `data-densidade` de propósito: sendo dois atributos
   independentes, cada degrau escolhe a combinação que quer sem que as regras de
   um apaguem as do outro. */
#orbit-pagina[data-agenda="recolhida"] .orbit-mes {
	display: none;
}

/* Sem o mês ao lado, a caixa deixa de ser esticada à altura dele e passa a ter
   a altura do que leva. */
#orbit-pagina[data-agenda="recolhida"] .orbit-agenda-caixa {
	align-items: flex-start;
}

#orbit-pagina[data-agenda="recolhida"] .orbit-agenda {
	width: 340px;
	padding: 9px 12px 9px;
}

/* Um dia cheio não pode voltar a fazer crescer a faixa: a lista rola dentro de
   si a partir de três compromissos. */
#orbit-pagina[data-agenda="recolhida"] .orbit-agenda-lista {
	max-height: 84px;
	overflow-y: auto;
}

/* Os degraus de aperto sobem de chão (34→42, 30→36): com a agenda fora da
   faixa há mais altura disponível, e o que se ganhou em espaço deve voltar
   para os símbolos, que é o que a pessoa tem de acertar com o rato. */

/* O rodapé deixou de existir como elemento: a marca da empresa subiu para a
   faixa escura e a ligação às licenças foi com ela. As regras que o vestiam
   foram removidas — folha de estilo a vestir um elemento que já não é
   desenhado é exactamente o tipo de resto que este trabalho anda a limpar. */

/* ── Muitos módulos ────────────────────────────────────────────────────────
   Acima de duas dezenas e meia de módulos, os símbolos encolhem para caberem
   mais por linha — o que tira linhas aos blocos e mantém a página dentro do
   ecrã. Com 45 módulos são seis por linha em vez de cinco. */
#orbit-pagina[data-densidade="apertada"] .orbit-lista {
	grid-template-columns: repeat(auto-fill, minmax(max(78px, calc(100% / 12)), 1fr));
}

#orbit-pagina[data-densidade="apertada"] .orbit-cartao {
	gap: 5px;
	padding: 7px 3px 9px;
}

/* 52px TAMBÉM no modo apertado — o mesmo tamanho do resto e o mesmo do
   stratechna.com.
   Durante três tentativas encolhi isto (46px, depois 40px) a tentar garantir
   que os 45 módulos cabiam numa página. Estava a resolver um problema que não
   existe: com os blocos em duas colunas sobra altura de sobra, e o que se
   perdia era a legibilidade do desenho, que é a única coisa que ali se lê.
   Só cede em janelas mesmo curtas — e aí é o `clamp` da regra dos ecrãs
   baixos que manda. */
#orbit-pagina[data-densidade="apertada"] .orbit-cartao-img,
#orbit-pagina[data-densidade="apertada"] .orbit-cartao-vazio {
	width: 52px;
	height: 52px;
	border-radius: 12px;
}

#orbit-pagina[data-densidade="apertada"] .orbit-cartao-nome {
	/* 10,5 px é o que deixa «Subcontratação» numa linha em células de 78 px; a
	   11 px partia a palavra com hífen. Por isso também não se hifeniza aqui. */
	font-size: 10.5px;
	hyphens: manual;
}

#orbit-pagina[data-densidade="apertada"] #orbit-saudacao {
	padding: 20px var(--orbit-faixa-lado) 14px;
}

#orbit-pagina[data-densidade="apertada"] #orbit-grelha {
	gap: 14px;
}

#orbit-pagina[data-densidade="apertada"] .orbit-linha {
	gap: 14px;
}

#orbit-pagina[data-densidade="apertada"] .orbit-bloco {
	padding: 13px 13px 6px;
}

#orbit-pagina[data-densidade="apertada"] .orbit-bloco-cab {
	margin-bottom: 9px;
}

/* Portátil de 1280×800 (ecrã útil ~700 px): aperta-se mais um degrau. A conta é
   simples — o que sobra são cinco linhas de módulos na coluna mais alta, e cada
   linha que encolhe 10 px devolve 50 px à página. */
@media (max-height: 780px) {
	#orbit-saudacao { padding-top: 16px; padding-bottom: 12px; }
	#orbit-saudacao .orbit-saudacao-titulo { font-size: 21px; }
	.orbit-cartao { padding: 6px 4px 8px; gap: 5px; }
	/* Com poucos módulos há folga de sobra mesmo num ecrã baixo: o símbolo só
	   cede se a janela for mesmo curta. */
	.orbit-cartao-img,
	.orbit-cartao-vazio { width: clamp(44px, 6vh, 52px); height: clamp(44px, 6vh, 52px); border-radius: 11px; }
	.orbit-bloco { padding: 12px 12px 5px; }
	.orbit-bloco-cab { margin-bottom: 9px; }
}

/* Muitos módulos NUM ecrã baixo — o caso mais apertado de todos. As regras de
   densidade têm mais especificidade do que as dos ecrãs baixos e passavam-lhes
   à frente; por isso este degrau repete-as com o mesmo peso em vez de contar
   com a herança. */
@media (max-height: 780px) {
	/* Numa janela mesmo curta o símbolo cede — mas cede POUCO, e nunca abaixo
	   de 44px. O que se aperta primeiro é o espaço à volta, que ninguém lê. */
	#orbit-pagina[data-densidade="apertada"] .orbit-cartao-img,
	#orbit-pagina[data-densidade="apertada"] .orbit-cartao-vazio {
		width: clamp(44px, 7vh, 52px);
		height: clamp(44px, 7vh, 52px);
	}
	#orbit-pagina[data-densidade="apertada"] #orbit-saudacao { padding-top: 12px; padding-bottom: 8px; }
	#orbit-pagina[data-densidade="apertada"] .orbit-cartao { padding: 4px 3px 5px; gap: 3px; }
	#orbit-pagina[data-densidade="apertada"] .orbit-bloco { padding: 9px 10px 3px; }
	#orbit-pagina[data-densidade="apertada"] .orbit-bloco-cab { margin-bottom: 5px; }
	#orbit-pagina[data-densidade="apertada"] #orbit-grelha,
	#orbit-pagina[data-densidade="apertada"] .orbit-linha { gap: 10px; }
}

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

/* ══════════════════════════════════════════════════════════════════════════
   AS CORES DA MARCA
   ══════════════════════════════════════════════════════════════════════════

   Vermelho #b20009 para a ACÇÃO, ardósia #1a2a33 para a ESTRUTURA. É a mesma
   regra do site, das peças sociais e do webmail — e é uma regra, não uma
   paleta: o vermelho marca o que se carrega, e por isso não pode estar em mais
   nada. Se tudo for vermelho, nada é.

   **Os azuis de informação ficam como estão, de propósito.** São eles que
   distinguem um aviso de um erro de uma confirmação; pintá-los da cor da marca
   fazia o Orbit ficar bonito e ilegível.

   Isto entra pelo `app_include_css` (secretária) e pelo `web_include_css`
   (entrada e páginas públicas). Nenhum ficheiro do Frappe é alterado. */

:root {
	--orbit-accao: #b20009;
	--orbit-accao-escura: #8c0007;
	--orbit-estrutura: #1a2a33;

	--primary: var(--orbit-accao);
	--primary-color: var(--orbit-accao);
	--btn-primary: var(--orbit-accao);
	--heading-color: var(--orbit-estrutura);
	--text-color: #22303d;
}

/* Os botões da secretária. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
	background-color: var(--orbit-accao) !important;
	border-color: var(--orbit-accao) !important;
	color: #fff !important;
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):hover {
	background-color: var(--orbit-accao-escura) !important;
	border-color: var(--orbit-accao-escura) !important;
}

/* Os botões do desenho novo (Espresso), usados na entrada e nos ecrãs
   recentes.
   **Pinta-se o `background` e não a ficha `--bt-solid-bg`.** A ficha é
   redefinida dentro do próprio `.es-button` e sobrepõe-se ao `:root`; mudá-la
   de fora não pegava, e o botão continuava preto sem dar sinal nenhum. */
.es-button[data-variant="solid"] {
	background: var(--orbit-accao) !important;
	border-color: var(--orbit-accao) !important;
	color: #fff !important;
}
.es-button[data-variant="solid"]:hover {
	background: var(--orbit-accao-escura) !important;
}

/* O separador activo e o que está seleccionado seguem a acção. */
.nav-link.active,
.list-row-col .level-item.active,
.sidebar-item.selected > .sidebar-item-control + a,
.widget.links-widget-box .link-item:hover {
	color: var(--orbit-accao);
}

/* Modo escuro: o vermelho sobre fundo escuro precisa de ser mais claro, ou
   lê-se como castanho. */
[data-theme="dark"] {
	--orbit-accao: #d4151f;
	--orbit-accao-escura: #b20009;
	--heading-color: #e8edf1;
	--text-color: #c8d0d8;
}