/*
 * Portal do Cliente — Serro & Andrade
 *
 * CSS próprio, sem CDN e sem build. Tudo com prefixo .ps- e dentro de .ps-root,
 * para não lutar com o tema do site. Variáveis para o modo escuro.
 */

/* A moldura é irmã do conteúdo, não filha: sem a juntar aqui ficava sem palete
   nenhuma — fundo, linhas e tinta todos por resolver. */
.ps-root, body.ps-moldura {
	/* A linguagem do serro-andrade.com, lida do tema: Inter, a tinta #023a51 dos
	   títulos, o cinzento-azulado #59667d do corpo, o verde da marca e o
	   separador #e8ebef. Os tons de TEXTO são os escurecidos o suficiente para
	   passarem o contraste mínimo — o verde #2cbc63 da marca dá 2,5:1 sobre
	   branco, pelo que serve para preencher e nunca para escrever. */
	--ps-bg: #ffffff;
	--ps-bg2: #f9fafb;
	/* Entre os 12,2:1 dos títulos e os 5,8:1 do corpo não havia nada — e um
	   rótulo de 13px em caixa alta não é corpo de texto: é um título pequeno, e
	   quer tinta de título. A banda tem token próprio porque tem outra função
	   que uma linha: o #f9fafb servia de hairline e por isso ficava claro demais
	   para fazer de chão (1,05:1 contra o branco — invisível). */
	--ps-ink-rot: #2e4a5c;      /* rótulos pequenos — 9,3:1 no branco, 8,2:1 na banda */
	--ps-banda: #eef1f6;        /* o chão dos rótulos — 1,13:1 do branco */
	--ps-marca-forte: #1d9850;  /* o verde quando é ELE que informa — 3,7:1 */
	--ps-ink: #023a51;          /* títulos e valores — 12,2:1 */
	--ps-ink2: #59667d;         /* corpo e notas — 5,8:1 */
	/* A fronteira de um componente e o separador de uma linha são dois trabalhos
	   diferentes, e durante muito tempo foram a mesma cor quase branca: a borda
	   dava 1,20:1 contra o branco e o separador 1,10:1 — ou seja, nada. Três
	   caixas encaixadas, cada uma com um contorno invisível, não fazem hierarquia
	   nenhuma: fazem ruído. A borda passa a 1,52:1 (é o tom que já existia neste
	   ficheiro como cor de passagem do rato) e o separador a 1,22:1, que é pouco
	   de propósito — ele separa linhas da mesma caixa, não caixas. */
	--ps-line: #c8d3dd;         /* fronteira de componente — 1,52:1 */
	--ps-line2: #e4e9ef;        /* separador de linha — 1,22:1 */
	--ps-verde: #117f3f;        /* 5,1:1; 4,6:1 sobre o verde claro das pastilhas */
	--ps-ambar: #7a4f00;        /* 7,1:1 */
	--ps-vermelho: #b3263a;     /* 6,5:1 (o #eb4962 da marca dá 3,7 e não chega) */
	--ps-azul: #023a51;         /* o site usa a tinta dos títulos nas ligações */
	--ps-marca: #2cbc63;        /* só para preencher: barras, anéis, realces */
	--ps-raio: 8px;             /* o raio das caixas do site */
	--ps-sombra: 0 2px 4px -1px rgba(0, 0, 0, .05);

	font-family: Inter, Arial, Helvetica, sans-serif;
	color: var(--ps-ink2);
	font-size: 16px;
	line-height: 1.72;
	letter-spacing: .015em;
}

@media (prefers-color-scheme: dark) {
	.ps-root:not([data-ps-tema="claro"]) {
		--ps-bg: #06202c;
		--ps-bg2: #0b2b39;
		--ps-ink-rot: #cfdde6;
		--ps-banda: #143545;
		--ps-marca-forte: #4fd68b;
		--ps-ink: #eaf2f6;
		--ps-ink2: #9fb3c0;
		--ps-line: #204b60;         /* 1,79:1 sobre o fundo escuro */
		--ps-line2: #19404f;
		--ps-verde: #4fd68b;
		--ps-ambar: #e8b14e;
		--ps-vermelho: #ff8a9c;
		--ps-azul: #7fd3a6;
		--ps-marca: #2cbc63;
		--ps-sombra: 0 2px 6px rgba(0, 0, 0, .45);
	}
}

.ps-root *, .ps-root *::before, .ps-root *::after { box-sizing: border-box; }
/* A cor de ligação é para ligações DE TEXTO. Os componentes que por acaso são
   <a> — botões e pílulas — trazem a sua própria cor, e esta regra (uma classe
   mais um tipo) vencia-a por especificidade: a pílula da empresa activa saía
   azul sobre preto, e o mesmo nos botões escuros. */
.ps-root a:not(.ps-botao):not(.ps-pilula) { color: var(--ps-azul); }
/* A hierarquia do site: títulos e números na tinta escura, corpo no
   cinzento-azulado. É o que faz o bloco ler-se como parte da página e não como
   uma caixa colada por cima. */
.ps-root h1, .ps-root h2, .ps-root h3, .ps-root h4 {
	color: var(--ps-ink); font-weight: 600; letter-spacing: -.015em;
}
.ps-valor, .ps-cartao__estado, .ps-modal__estado, .ps-cp__codigo,
.ps-guia__valor, .ps-ref__valor, .ps-anel__texto strong, .ps-dl dd { color: var(--ps-ink); }
.ps-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: all; letter-spacing: 0; }
.ps-rot { color: var(--ps-ink2); font-size: .86em; }
.ps-sep { color: var(--ps-ink2); margin: 0 .15em; }
.ps-valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ps-verde { color: var(--ps-verde); }
.ps-ambar { color: var(--ps-ambar); }
.ps-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-ajuda { cursor: help; border-bottom: 1px dotted currentColor; }
/* texto só para quem ouve a página: o `title` não chega a teclado nem a toque */
.ps-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── a moldura das páginas da área ────────────────────────────────────────── */
/* Estas páginas têm modelo próprio: não há tema por baixo para herdar nada, por
   isso o básico (fundo, tipo de letra, largura) define-se aqui.
   O cabeçalho é de aplicação e não de site: uma faixa branca com a marca e a
   saída, e por baixo os separadores das quatro páginas, colados a ela. É o que
   faz isto ler-se como um sítio onde se trabalha em vez de uma página solta. */
body.ps-moldura {
	margin: 0;
	/* sem isto o body acaba onde o conteúdo acaba e aparece por baixo o fundo do
	   tema, que continua carregado: meia página da nossa cor e meia da dele */
	min-height: 100vh;
	background: var(--ps-banda, #eef1f6);
	color: var(--ps-ink);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
body.ps-moldura .ps-moldura__topo {
	background: var(--ps-bg);
	border-bottom: 1px solid var(--ps-line);
	position: sticky; top: 0; z-index: 20;
	box-shadow: 0 1px 2px rgba(2, 58, 81, .04);
}
body.ps-moldura .ps-moldura__barra {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	max-width: 1180px; margin: 0 auto;
	padding: 13px clamp(16px, 4vw, 32px);
}
body.ps-moldura .ps-moldura__marca {
	display: inline-flex; align-items: center; gap: 13px;
	text-decoration: none; min-width: 0;
}
body.ps-moldura .ps-moldura__marca img { display: block; height: 34px; width: auto; }
body.ps-moldura .ps-moldura__nome {
	font-weight: 700; font-size: 1.02rem; color: var(--ps-ink); letter-spacing: -.01em;
}
/* a etiqueta diz onde se está; o traço antes dela separa-a da marca sem ruído */
body.ps-moldura .ps-moldura__etiqueta {
	position: relative; padding-left: 14px;
	font-size: .72rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
	color: var(--ps-ink-rot, #2e4a5c); white-space: nowrap;
}
body.ps-moldura .ps-moldura__etiqueta::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 20px; background: var(--ps-line);
}
body.ps-moldura .ps-moldura__sair {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 15px; border: 1px solid var(--ps-line); border-radius: 999px;
	background: var(--ps-bg); color: var(--ps-ink2);
	font-size: .86rem; font-weight: 600; text-decoration: none;
	min-height: 40px; box-sizing: border-box; white-space: nowrap;
	transition: border-color .12s, color .12s, background .12s;
}
body.ps-moldura .ps-moldura__sair:hover,
body.ps-moldura .ps-moldura__sair:focus-visible {
	color: var(--ps-ink); border-color: #c8d3dd; background: var(--ps-bg2);
}
/* o par do canto: a conta e a saída, encostados um ao outro */
body.ps-moldura .ps-moldura__eu { display: inline-flex; align-items: center; gap: 8px; }
body.ps-moldura .ps-moldura__conta { font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
/*
 * O «Sair» a vermelho. É a única coisa nesta barra que desfaz o que o cliente
 * está a fazer, e tem de se distinguir do botão que está ao lado dela — o par
 * todo da mesma cor dava dois botões iguais onde um deles fecha a sessão.
 * A borda e o fundo saem do próprio vermelho misturado com o fundo da página,
 * para o modo escuro não precisar de uma segunda regra.
 */
body.ps-moldura .ps-moldura__sair--fora {
	color: var(--ps-vermelho);
	border-color: #e6c3ca;
	border-color: color-mix(in srgb, var(--ps-vermelho) 32%, var(--ps-bg));
}
body.ps-moldura .ps-moldura__sair--fora:hover,
body.ps-moldura .ps-moldura__sair--fora:focus-visible {
	color: var(--ps-vermelho);
	border-color: var(--ps-vermelho);
	background: #fdeaec;
	background: color-mix(in srgb, var(--ps-vermelho) 9%, var(--ps-bg));
}

/* os separadores encostados ao fundo da faixa, sem a linha dupla */
body.ps-moldura .ps-moldura__nav {
	max-width: 1180px; margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 32px);
}
body.ps-moldura .ps-moldura__nav .ps-nav { margin: 0; }
body.ps-moldura .ps-moldura__nav .ps-nav__lista { border-bottom: 0; }
body.ps-moldura .ps-moldura__nav .ps-nav__item { padding: 11px 14px 13px; }

body.ps-moldura .ps-moldura__corpo {
	max-width: 1180px; margin: 0 auto;
	padding: clamp(18px, 3vw, 28px) clamp(16px, 4vw, 32px) 72px;
}
/* os cartões assentam directamente na banda. Uma folha branca por fora deles
   dava um terceiro nível de caixa — caixa dentro de caixa dentro de caixa — e
   era isso que fazia a página parecer pesada. */
/* a barra de administração do WordPress empurra a página para baixo */
body.ps-moldura.admin-bar .ps-moldura__topo { top: 32px; }
@media (max-width: 782px) {
	body.ps-moldura.admin-bar .ps-moldura__topo { top: 46px; }
}
@media (max-width: 640px) {
	body.ps-moldura .ps-moldura__marca img { height: 28px; }
	body.ps-moldura .ps-moldura__etiqueta { display: none; }
	/* no telemóvel fica só o ícone — mas o «Entrar» de quem ainda não entrou não
	   TEM ícone, e sem a palavra era um botão branco e vazio no canto do ecrã */
	body.ps-moldura .ps-moldura__sair:not([data-ps-entrar]) span { display: none; }
	body.ps-moldura .ps-moldura__sair { padding: 8px 12px; }
}
@media (max-width: 420px) {
	/* abaixo disto a navegação é um menu que abre: precisa de ar à volta */
	body.ps-moldura .ps-moldura__nav { padding-bottom: 10px; }
}

/* ── avisos ─────────────────────────────────────────────────────────────── */
.ps-aviso {
	background: var(--ps-bg2); border: 1px solid var(--ps-line); border-radius: var(--ps-raio);
	padding: 16px 18px; margin: 12px 0; color: var(--ps-ink2);
}
.ps-alerta { color: var(--ps-ambar); font-size: .8em; display: block; margin-top: 2px; }
.ps-aviso__nota { margin: 10px 0 0; font-size: .86rem; color: var(--ps-ink2); }
/* ── a porta ─────────────────────────────────────────────────────────────────
   É o mesmo desenho do ecrã de entrada do WordPress, e de propósito: são a mesma
   porta vista de dois sítios. Painel escuro da casa à esquerda, formulário à
   direita; no telemóvel um em cima do outro, com o painel reduzido ao essencial —
   ninguém rola três ecrãs de apresentação para escrever uma senha. */
.ps-porta {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	max-width: 980px; margin: 18px auto 26px;
	border: 1px solid var(--ps-line); border-radius: 18px; overflow: hidden;
	box-shadow: 0 18px 44px -28px rgba(1, 24, 35, .5);
	background: var(--ps-bg);
}
.ps-porta__apre {
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 36px 34px; color: #fff;
	background:
		radial-gradient(120% 90% at 6% 0%, rgba(44, 188, 99, .20) 0%, rgba(44, 188, 99, 0) 56%),
		linear-gradient(158deg, #023a51 0%, #022c3f 58%, #011f2d 100%);
}
/* o logótipo numa placa branca: inverter o PNG fazia do quadrado verde do «&» um
   bloco branco cego — a placa mantém a marca exactamente como ela é */
.ps-porta__logo {
	width: 164px; max-width: 62%; height: auto; display: block;
	background: #fff; padding: 13px 16px; border-radius: 13px;
	box-sizing: content-box; box-shadow: 0 12px 32px rgba(1, 24, 35, .28);
}
.ps-porta__meio { margin: 26px 0 0; }
.ps-porta__titulo {
	font-family: Montserrat, "Noto Sans", -apple-system, "Segoe UI", sans-serif;
	font-weight: 800; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.08;
	letter-spacing: -.025em; margin: 0; color: #fff;
}
.ps-root .ps-porta__apre .ps-porta__titulo { color: #fff; }
.ps-porta__titulo em { font-style: normal; color: #2cbc63; }
.ps-porta__texto {
	margin: 15px 0 0; max-width: 30em; font-size: .95rem; line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}
.ps-porta__lista { list-style: none; margin: 24px 0 0; padding: 0; }
.ps-porta__lista li {
	position: relative; padding: 0 0 0 26px; margin: 0 0 12px;
	font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .86);
}
.ps-porta__lista li::before {
	content: ""; position: absolute; left: 0; top: .6em;
	width: 11px; height: 2px; border-radius: 2px; background: #2cbc63;
}
.ps-porta__rodape {
	/* a .5 de opacidade sobre o gradiente escuro isto ficava em 3,4:1 — abaixo do
	   mínimo para texto pequeno; e a ligação, que é para ser clicada, pior ainda */
	margin: 32px 0 0; font-size: .76rem; letter-spacing: .02em;
	color: rgba(255, 255, 255, .66);
}
.ps-porta__rodape a { color: rgba(255, 255, 255, .88); text-decoration: underline; }
.ps-porta__rodape a:hover, .ps-porta__rodape a:focus-visible { color: #fff; text-decoration: underline; }

.ps-porta__lado { padding: 38px 34px; display: flex; flex-direction: column; }
/* o assistente já tinha a sua caixa; dentro da moldura da porta seria uma caixa
   dentro de outra, com dois contornos a 8px um do outro */
.ps-porta__lado .ps-painel {
	border: 0; box-shadow: none; background: none; padding: 0; margin: 0;
}
.ps-porta__lado .ps-painel__topo { padding: 0 0 14px; background: none; border: 0; }
.ps-porta__lado .ps-painel__topo h3 { font-size: 1.2rem; }
.ps-porta--registo .ps-porta__lado { padding: 30px 32px 32px; }
/* a nota do fim acompanha a moldura, e não a largura da página */
.ps-registo .ps-nota--solta { max-width: 980px; margin-inline: auto; }
.ps-porta__cabeca {
	font-family: Montserrat, "Noto Sans", -apple-system, "Segoe UI", sans-serif;
	font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em;
	margin: 0; color: var(--ps-ink);
}
.ps-porta__sub { margin: 7px 0 0; font-size: .92rem; color: var(--ps-ink2); }
.ps-porta__forma { margin-top: 20px; gap: 16px; }
.ps-porta__forma .ps-campo input { padding: 11px 13px; border-radius: 10px; }
.ps-porta__botao { width: 100%; padding: 12px 18px; font-size: 1rem; }
.ps-porta .ps-forma__estado { color: var(--ps-vermelho); font-size: .86rem; min-height: 1.2em; }
.ps-porta__pes { margin: 14px 0 0; }
.ps-porta__esqueci { font-size: .88rem; color: var(--ps-ink2); text-decoration: underline; }
.ps-porta__esqueci:hover, .ps-porta__esqueci:focus-visible { color: var(--ps-marca-forte); }
.ps-porta__segunda {
	margin: auto 0 0; padding-top: 22px; border-top: 1px solid var(--ps-line2);
	font-size: .88rem; color: var(--ps-ink2);
}
.ps-porta__segunda a { color: var(--ps-marca-forte); font-weight: 600; }

@media (max-width: 760px) {
	.ps-porta { grid-template-columns: 1fr; margin-top: 10px; }
	/* em cima fica a marca e a frase; a lista e o rodapé são para quem tem espaço
	   para os ler, e não para empurrar o formulário para fora do ecrã */
	.ps-porta__apre { padding: 24px 22px; }
	.ps-porta__meio { margin-top: 18px; }
	.ps-porta__lista, .ps-porta__rodape, .ps-porta__texto { display: none; }
	.ps-porta__logo { width: 132px; padding: 10px 13px; }
	.ps-porta__lado { padding: 24px 22px 26px; }
}
.ps-aviso__nota a { color: var(--ps-marca-forte); font-weight: 600; }

/* ── pílulas (empresas, anos) ────────────────────────────────────────────── */
.ps-pilulas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ps-pilula {
	display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
	border: 1px solid var(--ps-line); border-radius: 999px; background: var(--ps-bg);
	color: var(--ps-ink); text-decoration: none; font-size: .86rem; font-weight: 500;
}
.ps-pilula:hover { border-color: var(--ps-ink2); }
.ps-pilula--activa { background: var(--ps-ink); color: var(--ps-bg); border-color: var(--ps-ink); }
/* o ano activo marca-se como a empresa activa: duas cores diferentes para a
   mesma ideia, em duas filas encostadas, lem-se como engano */
.ps-pilula--ano.ps-pilula--activa { background: var(--ps-ink); border-color: var(--ps-ink); color: var(--ps-bg); }
.ps-pilula__icone { opacity: .7; }
.ps-empresa-unica { font-weight: 600; margin: 0 0 12px; }

/* ── cartões do sinal ────────────────────────────────────────────────────── */
.ps-cartoes { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 720px) { .ps-cartoes { grid-template-columns: 1fr 1fr; } }

/*
 * A lição do <button>: a grelha estica os dois cartões à altura do mais alto e o
 * navegador CENTRA verticalmente o conteúdo de um botão — a barra de cor ficava a
 * 16px do topo no cartão mais curto. Com flex-direction:column encosta ao topo.
 */
.ps-card-btn {
	display: flex; flex-direction: column; align-items: stretch;
	width: 100%; padding: 0; text-align: left; cursor: pointer;
	background: var(--ps-bg); border: 1px solid var(--ps-line);
	border-radius: var(--ps-raio); overflow: hidden; box-shadow: var(--ps-sombra);
	font: inherit; color: inherit;
}
.ps-card-btn:hover { border-color: var(--ps-ink2); }
.ps-card-btn:focus-visible { outline: 2px solid var(--ps-azul); outline-offset: 2px; }
.ps-cartao__barra { display: block; height: 4px; width: 100%; }
.ps-cartao__corpo { display: block; padding: 14px 16px; }
.ps-cartao__topo { display: flex; align-items: flex-start; gap: 12px; }
.ps-rosto { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; padding: 6px; flex: 0 0 auto; }
.ps-cartao__texto { display: block; min-width: 0; flex: 1 1 auto; }
/* O nível 3 NÃO ganha tinta: está por cima do `.ps-cartao__estado`, que é a
   informação do cartão. Fica o mais claro dos três de propósito — o que estava
   mal eram os 10,9px, e só isso. Mais entreletra compensa ser o menor. */
.ps-cartao__titulo { display: inline-flex; align-items: center; font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase; color: var(--ps-ink2);
	font-weight: 600; }
.ps-cartao__estado { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.ps-cartao__quando { display: block; font-size: .78rem; color: var(--ps-ink2); }
.ps-cartao__seta { color: var(--ps-ink2); align-self: center; }
.ps-cartao__meta { display: block; border-top: 1px solid var(--ps-line2); margin-top: 12px; padding-top: 10px; }
.ps-pendencia { display: block; font-size: .82rem; color: var(--ps-ambar); margin-top: 4px; }
.ps-pendencia strong { margin-right: 4px; }

.ps-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-chip { display: inline-block; font-size: .78rem; padding: 3px 9px; border-radius: 8px; background: var(--ps-bg2); border: 1px solid var(--ps-line2); color: var(--ps-ink2); }
.ps-chip--divida { color: var(--ps-vermelho); font-weight: 600; }
/* em aberto nao e o mesmo que vencido: ambar diz «falta pagar», o vermelho
   fica reservado para quando se sabe que o prazo passou */
.ps-chip--aberto { color: var(--ps-ambar); font-weight: 600; }

/* ── modal ──────────────────────────────────────────────────────────────── */
.ps-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .ps-modal { align-items: center; padding: 16px; } }
.ps-modal[hidden] { display: none; }
.ps-modal__fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.ps-modal__caixa {
	position: relative; background: var(--ps-bg); width: 100%; max-width: 34rem; max-height: 88vh;
	overflow-y: auto; border-radius: var(--ps-raio) var(--ps-raio) 0 0; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
@media (min-width: 640px) { .ps-modal__caixa { border-radius: var(--ps-raio); } }
.ps-modal__barra { height: 4px; }
.ps-modal__corpo { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ps-modal__topo { display: flex; align-items: flex-start; gap: 12px; }
.ps-modal__ident { flex: 1 1 auto; min-width: 0; }
.ps-modal__estado { font-weight: 700; font-size: 1.1rem; }
.ps-modal__accoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-x { background: none; border: 0; font-size: 1.1rem; line-height: 1; color: var(--ps-ink2); cursor: pointer; padding: 4px; }
.ps-x:hover { color: var(--ps-ink); }

/* ── caixas dentro do modal ─────────────────────────────────────────────── */
.ps-caixa { border: 1px solid var(--ps-line); border-radius: var(--ps-raio); overflow: hidden; }
.ps-caixa--vermelha { border-color: rgba(179, 38, 58, .25); }
/* A banda sai para regra própria: três dos usos no PHP não têm `.ps-caixa` por
   cima (a cronologia e as contas bancárias) e aí uma faixa cinzenta solta no
   meio do painel lê-se como erro de desenho. Sem caixa é uma sobrancelha com
   linha; dentro de caixa é uma faixa. */
.ps-caixa__topo,
.ps-root h4.ps-caixa__topo {      /* se um dia virar <h4>, não é a regra do h4 que manda */
	/* `flex-start` e não `space-between`: o ícone é um item de flex por si, e com
	   `space-between` o rótulo era empurrado para o meio da faixa. O valor da
	   direita, quando existe, é que se encosta sozinho (regra abaixo). */
	display: flex; justify-content: flex-start; gap: 8px; align-items: center;
	margin: 0; padding: 0 0 6px;
	border-bottom: 1px solid var(--ps-line);
	background: none;
	/* px e não rem: isto vive dentro do Avada, e um `html{font-size:62.5%}` do
	   tema punha estes 13px a 6,5px sem ninguém dar por isso */
	font-size: 13px; font-weight: 600;   /* 700 a 13px em caixa alta grita */
	line-height: 1.35; letter-spacing: .045em; text-transform: uppercase;
	color: var(--ps-ink-rot);
}
/* Dentro de uma caixa o título ocupa a faixa toda: é aqui que ganha chão, e a
   barra de 3px amarra-o à marca. `inset` e não `::before` — o topo é flex com
   `space-between`, e um pseudo-elemento vira terceiro item e manda o rótulo
   para o meio; além de que a `.ps-caixa` tem `overflow:hidden` e cortaria uma
   barra posicionada à esquerda. */
.ps-caixa > .ps-caixa__topo {
	padding: 9px 12px 9px 15px;          /* 12 + os 3 da barra, para o texto não encostar */
	background: var(--ps-banda);
	box-shadow: inset 3px 0 0 var(--ps-marca);
}
/* Numa caixa vermelha o acento acompanha o estado: um verde contra o bordo
   vermelho da caixa são dois sinais a discutir um com o outro. */
.ps-caixa > .ps-caixa__topo--vermelho {
	background: #fdeaec; color: var(--ps-vermelho);
	box-shadow: inset 3px 0 0 var(--ps-vermelho);
}
.ps-caixa__topo--vermelho { background: none; color: var(--ps-vermelho); }
/* A faixa passou a ter linha em baixo e a primeira `.ps-caixa__linha` já tinha
   linha em cima: davam 2px em dois tons, que num ecrã de retina se vê como um
   risco sujo. (0,2,0) para vencer sem depender da ordem no ficheiro. */
.ps-root .ps-caixa__topo + * { border-top: 0; }
/* O valor à direita da faixa é dinheiro, não rótulo: a 11px em maiúsculas com
   entreletra, «1.234,56 €» era um enfeite. E é ele — não o rótulo — que se
   encosta à direita, agora que o `space-between` saiu. */
.ps-caixa__topo > span:last-child:not(:first-child) {
	margin-left: auto;
	font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* o ícone não é «o primeiro span»: não pode herdar a regra do valor */
.ps-caixa__topo > .ps-icone { margin-right: 0; }
@media (prefers-color-scheme: dark) { .ps-root:not([data-ps-tema="claro"]) .ps-caixa__topo--vermelho { background: rgba(179,38,58,.14); } }
.ps-caixa__linha { padding: 8px 12px; border-top: 1px solid var(--ps-line2); font-size: .9rem; }
.ps-caixa__rodape { padding: 10px 12px; border-top: 1px solid var(--ps-line2); }
.ps-nota { padding: 7px 12px; font-size: .76rem; color: var(--ps-ink2); border-top: 1px solid var(--ps-line2); }
.ps-aviso-interno {
	padding: 9px 12px; font-size: .8rem; line-height: 1.45; color: var(--ps-ink2);
	background: var(--ps-bg2); border-top: 1px solid var(--ps-line2);
}
.ps-escolha { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }

/* ── linhas da dívida ───────────────────────────────────────────────────── */
.ps-divida { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--ps-line2); font-size: .9rem; }
.ps-divida__ident { flex: 1 1 auto; min-width: 0; }
.ps-divida__accao { flex: 0 0 auto; min-width: 92px; text-align: right; }

/* ── guias ──────────────────────────────────────────────────────────────── */
.ps-guia { padding: 12px; border-top: 1px solid var(--ps-line2); }
.ps-guia--urgente { background: #fdeaec; }
@media (prefers-color-scheme: dark) { .ps-root:not([data-ps-tema="claro"]) .ps-guia--urgente { background: rgba(179,38,58,.12); } }
.ps-guia__urgente { color: var(--ps-vermelho); font-weight: 700; font-size: .8rem; margin-bottom: 6px; }
.ps-guia__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ps-guia__valor { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-guia__accoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
/* Preenchida e sem contorno: um bloco cheio lê-se a 1,05:1, um contorno a
   1,10:1 não se lê de todo — e dentro de uma caixa que já tem fronteira, um
   segundo contorno é o terceiro nível de moldura a dizer a mesma coisa. */
.ps-ref { display: flex; flex-wrap: wrap; gap: 8px 24px; background: var(--ps-bg2); border-radius: var(--ps-raio); padding: 9px 12px; margin: 9px 0; }
.ps-ref__valor { font-size: 1rem; font-weight: 700; }

/* ── botões ─────────────────────────────────────────────────────────────── */
.ps-botao {
	display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; min-height: 40px;
	border: 1px solid var(--ps-line); border-radius: 999px; background: var(--ps-bg); color: var(--ps-ink);
	font: inherit; font-size: .86rem; font-weight: 500; cursor: pointer; text-decoration: none;
	letter-spacing: .015em;
}
.ps-botao:hover { border-color: var(--ps-ink2); }
.ps-botao:focus-visible { outline: 2px solid var(--ps-verde); outline-offset: 2px; }
/* o botão principal do site: cápsula verde, texto branco (5,1:1) */
.ps-botao--escuro { background: #117f3f; color: #fff; border-color: #117f3f; }
.ps-botao--escuro:hover { background: #0d6a34; border-color: #0d6a34; }
.ps-botao--pequeno { padding: 5px 10px; min-height: 32px; font-size: .8rem; }
/* «Enviar por email» e uma accao a par de «Ver PDF», nao uma ligacao de texto:
   mesma pilula, verde mais claro, para se ler como irma e nao como a mesma. */
.ps-botao--email { background: #e8f6ee; color: #0d6a34; border-color: #bfe3cd; }
.ps-botao--email:hover { background: #d8efe1; border-color: #9fd4b6; color: #0a5528; }
.ps-botao--email .ps-icone { color: #15844a; }
.ps-botao[disabled] { opacity: .6; cursor: progress; }
.ps-ligacao { background: none; border: 0; padding: 0; font: inherit; font-size: .86em; color: var(--ps-azul); cursor: pointer; text-decoration: underline; }

/* ── a minha empresa ─────────────────────────────────────────────────────── */
/* A firma e o NIF em grande: é o que se vem cá buscar com mais pressa. */
.ps-ident { margin: 0 0 14px; }
.ps-ident__nome { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em;
	color: var(--ps-ink); line-height: 1.25; }
.ps-ident__nif { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ps-ident__nif code { font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; }
.ps-dl--empresa { margin-bottom: 14px; }
.ps-dl--empresa dd { overflow-wrap: anywhere; }

/* botão de copiar: pequeno, discreto, e com alvo de toque a sério no telemóvel */
.ps-copia { display: inline-flex; align-items: center; justify-content: center;
	min-width: 30px; min-height: 30px; padding: 0 6px; border: 1px solid var(--ps-line);
	border-radius: 999px; background: var(--ps-bg); color: var(--ps-ink2);
	font: inherit; font-size: .9rem; cursor: pointer; line-height: 1; }
.ps-copia:hover { border-color: var(--ps-ink2); color: var(--ps-ink); }
.ps-copia svg { display: block; }
/* enquanto a senha vem a caminho: o ícone fica como está — mexer-lhe no
   conteúdo apagava o desenho — e é o botão que diz que está ocupado */
.ps-copia[disabled] { opacity: .5; cursor: progress; }
.ps-copia:focus-visible { outline: 2px solid var(--ps-verde); outline-offset: 2px; }
.ps-copiado { color: var(--ps-verde); border-color: var(--ps-verde); }

/* um acesso: nome, utilizador, senha. Em coluna no telemóvel. */
.ps-acesso { padding: 10px 12px; border-top: 1px solid var(--ps-line2); }
.ps-acesso__nome { font-weight: 600; color: var(--ps-ink); font-size: .9rem; margin-bottom: 4px; }
.ps-acesso__linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font-size: .9rem; margin-top: 4px; }
.ps-acesso__linha .ps-rot { flex: 0 0 auto; min-width: 72px; }
.ps-acesso__linha code { overflow-wrap: anywhere; }
.ps-senha { letter-spacing: .08em; }
.ps-senha--visivel { color: var(--ps-ink); font-weight: 700; letter-spacing: normal;
	background: var(--ps-bg2); padding: 1px 6px; border-radius: 6px; }
.ps-gestor .ps-caixa__linha { font-size: .92rem; }
.ps-nota--solta { padding: 10px 0 0; border: 0; }

/* ── painéis (certidão, compliance) ─────────────────────────────────────── */
.ps-painel { background: var(--ps-bg); border: 1px solid var(--ps-line); border-radius: var(--ps-raio); box-shadow: var(--ps-sombra); padding: 16px; margin-bottom: 16px; }
/* O que separa um título do texto não é 1px de corpo de letra: é ter uma linha
   por baixo e um espaço só dele. */
.ps-painel__topo {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	position: relative;                 /* para o traço da marca, que é absoluto */
	padding-bottom: 9px; margin-bottom: 12px;
	border-bottom: 1px solid var(--ps-line);
}
.ps-painel__topo h3,
.ps-grupo__topo h3 {
	margin: 0;
	font-size: 1.0625rem;               /* 17px — um degrau acima do corpo, não dois */
	font-weight: 600;
	line-height: 1.3;                   /* o 1.72 do corpo afunda um título */
	letter-spacing: -.012em;
}
/* O acento da marca: 28px de verde a cortar a linha. Mesma gramática do
   separador activo da navegação — verde quer dizer «é este» — e o verde
   continua a preencher, nunca a escrever. */
.ps-painel__topo::after {
	content: ""; position: absolute; left: 0; bottom: -1px;
	width: 28px; height: 2px; border-radius: 2px; background: var(--ps-marca);
}
/* Onde já há ícone verde, o traço era o segundo verde em 20px e passava a
   enfeite. Um acento por cabeçalho. */
.ps-painel__topo:has(.ps-icone)::after { content: none; }
/* O contador à direita é metadado, não título. */
.ps-painel__topo .ps-rot,
.ps-painel__topo h3 .ps-rot,
.ps-grupo__topo .ps-rot { color: var(--ps-ink2); font-weight: 400; letter-spacing: .015em; }
.ps-cp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.ps-cp__codigo { font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; }
.ps-dl { display: grid; gap: 6px 20px; margin: 0; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ps-dl { grid-template-columns: 1fr 1fr; } }
.ps-dl > div { display: flex; gap: 8px; font-size: .9rem; }
.ps-dl dt { color: var(--ps-ink2); flex: 0 0 auto; }
.ps-dl dd { margin: 0; }
.ps-contas { margin-top: 14px; border-top: 1px solid var(--ps-line2); padding-top: 10px; }

.ps-compliance__corpo { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.ps-anel { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.ps-anel__texto { display: flex; flex-direction: column; }
.ps-anel__texto strong { font-size: 1.5rem; line-height: 1; }
.ps-barras { list-style: none; margin: 0; padding: 0; flex: 1 1 260px; display: flex; flex-direction: column; gap: 5px; }
.ps-barra { display: grid; grid-template-columns: minmax(0, 1fr) 70px 42px 36px; align-items: center; gap: 8px; font-size: .82rem; }
/* quebra em vez de cortar: «DMR — Declaração Mensal de Rem…» não diz nada a
   quem o lê, e uma linha a mais não custa nada */
.ps-barra__nome { overflow-wrap: anywhere; }
.ps-barra__trilho { background: var(--ps-line2); border-radius: 999px; height: 7px; overflow: hidden; }
.ps-barra__cheio { display: block; height: 100%; border-radius: 999px; }
.ps-barra__pct { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-barra__conta { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .ps-barra { grid-template-columns: minmax(0, 1fr) 50px 40px; } .ps-barra__conta { display: none; } }

/* ── documentos ─────────────────────────────────────────────────────────── */
.ps-grupo { background: var(--ps-bg); border: 1px solid var(--ps-line); border-radius: var(--ps-raio); box-shadow: var(--ps-sombra); margin-bottom: 14px; overflow: hidden; }
.ps-grupo__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ps-line2); }
.ps-grupo__topo h3 { margin: 0; font-size: .98rem; }
.ps-grelha { display: grid; gap: 8px; padding: 12px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .ps-grelha { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ps-grelha { grid-template-columns: 1fr 1fr 1fr; } }
.ps-linha { border: 1px solid var(--ps-line2); border-radius: 11px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ps-linha:hover { border-color: var(--ps-line); background: var(--ps-bg2); }
.ps-linha__topo { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ps-linha__periodo { font-weight: 600; }
.ps-linha__meta { font-size: .82rem; color: var(--ps-ink2); line-height: 1.45; }
.ps-linha__accoes { margin-top: auto; }
.ps-marca { font-size: .72rem; padding: 2px 7px; border-radius: 999px; border: 1px solid; }
.ps-marca--tarde { color: var(--ps-ambar); border-color: currentColor; }
.ps-marca--azul { color: var(--ps-azul); border-color: currentColor; }

/* ── pastilhas de estado (vista do escritório) ──────────────────────────── */
.ps-pastilha { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.ps-pastilha--ok { color: var(--ps-verde); }
.ps-pastilha--tarde, .ps-pastilha--prazo { color: var(--ps-ambar); }
.ps-pastilha--subst { color: var(--ps-azul); }
.ps-pastilha--falta, .ps-pastilha--erro { color: var(--ps-vermelho); }
.ps-pastilha--futuro, .ps-pastilha--recolher { color: var(--ps-ink2); }
.ps-pastilha--dispensada { color: #7c3aed; }

/* ── janela de progresso ────────────────────────────────────────────────── */
.ps-progresso-bloco { border: 1px solid var(--ps-line); border-radius: 11px; overflow: hidden; margin-bottom: 10px; }
.ps-progresso-bloco__topo { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ps-bg2); font-size: .82rem; font-weight: 600; }
.ps-progresso-bloco__tempo { margin-left: auto; color: var(--ps-ink2); font-variant-numeric: tabular-nums; font-weight: 400; }
.ps-log { margin: 0; padding: 12px; background: #11141a; color: #d6dae2; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .74rem; line-height: 1.5; max-height: 190px; overflow-y: auto; white-space: pre-wrap; }
.ps-progresso-bloco__fim { padding: 9px 12px; font-size: .82rem; border-top: 1px solid var(--ps-line2); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ps-aviso-demora { margin: 0; padding: 10px 18px 16px; font-size: .8rem; color: var(--ps-ambar); }
.ps-cliente { padding: 14px; font-size: .9rem; white-space: pre-line; }
.ps-girar { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--ps-line); border-top-color: var(--ps-ink2); border-radius: 50%; animation: ps-girar 1s linear infinite; }
@keyframes ps-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ps-girar { animation: none; } }

/* ── cronologia de actos societários ───────────────────────────────────────── */
.ps-cron__actual { margin: 10px 0 6px; }
.ps-cron__tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ps-cron__tabela th, .ps-cron__tabela td { padding: 6px 8px; border-bottom: 1px solid var(--ps-line2); text-align: left; }
.ps-cron__tabela th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ps-ink2); }
.ps-cron__tabela .ps-num { text-align: right; white-space: nowrap; }
.ps-cron__aviso { margin: 6px 0; padding: 6px 10px; font-size: .82rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; }
.ps-cron__lista { margin-top: 10px; }
.ps-cron__lista > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.ps-cron__eventos { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; border-left: 2px solid var(--ps-line); }
.ps-cron__ev { position: relative; display: flex; gap: 14px; padding: 6px 0 12px 16px; }
.ps-cron__ev::before { content: ""; position: absolute; left: -7px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: #64748b; border: 2px solid var(--ps-bg); }
.ps-cron__ev--constituicao::before { background: #2563eb; }
.ps-cron__ev--transmissao_quotas::before, .ps-cron__ev--cessao_quotas::before, .ps-cron__ev--unificacao_quotas::before, .ps-cron__ev--cisao_quotas::before, .ps-cron__ev--alteracao_capital::before { background: #d97706; }
.ps-cron__ev--aumento_capital::before { background: #059669; }
.ps-cron__ev--reducao_capital::before, .ps-cron__ev--dissolucao::before { background: #dc2626; }
.ps-cron__ev--alteracao_sede::before, .ps-cron__ev--alteracao_firma::before, .ps-cron__ev--alteracao_objeto::before { background: #6366f1; }
.ps-cron__ev--designacao_orgaos::before, .ps-cron__ev--cessacao_funcoes::before { background: #7c3aed; }
.ps-cron__data { flex: 0 0 88px; font-family: ui-monospace, Consolas, monospace; font-size: .82rem; color: var(--ps-ink2); padding-top: 3px; }
.ps-cron__corpo { flex: 1; min-width: 0; }
.ps-cron__corpo p { margin: 4px 0; font-size: .9rem; }
.ps-cron__tipo { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ps-ink2); background: var(--ps-line2); border-radius: 999px; padding: 2px 8px; }
.ps-cron__socios { margin: 4px 0 0; padding-left: 18px; font-size: .86rem; }
/* anonimas: a certidao declara as accoes, nao os accionistas */
.ps-cron__acoes { margin: 4px 0 0; font-size: .9rem; font-weight: 600; color: #0f2447; }
.ps-cron__accoes { margin-top: 10px; }

/* ── conta corrente ──────────────────────────────────────────────────────── */
/* O saldo primeiro e em grande: é a pergunta com que se entra nesta página. */
.ps-conta__resumo { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ps-conta__saldo { flex: 0 0 auto; min-width: 190px; display: flex; flex-direction: column; gap: 2px; }
.ps-conta__valor { font-size: 2rem; line-height: 1.1; font-weight: 700; color: var(--ps-vermelho);
	font-variant-numeric: tabular-nums; }
.ps-conta__saldo--limpo .ps-conta__valor { color: var(--ps-verde); }
.ps-conta__pagamento { flex: 1 1 260px; border-left: 1px solid var(--ps-line2); padding-left: 20px; }
.ps-conta__pagamento .ps-caixa__topo { background: none; padding: 0 0 6px; }
.ps-conta__modo { margin: 0 0 4px; font-size: 1rem; }

/* uma linha por factura: identificação, valor, acção — e a referência por baixo */
.ps-fatura { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 14px;
	align-items: center; padding: 11px 0; border-top: 1px solid var(--ps-line2); }
.ps-fatura:first-of-type { border-top: 0; }
.ps-fatura__ident { min-width: 0; }
.ps-fatura__valor { font-size: 1rem; white-space: nowrap; }
.ps-fatura__accoes { display: flex; gap: 6px; justify-content: flex-end; }
.ps-fatura__ref { grid-column: 1 / -1; margin: 4px 0 0; }
.ps-fatura--anulada { opacity: .6; }
.ps-chip--paga { color: var(--ps-verde); background: #e8f6ee; border-color: #bfe6d0; }

/* ── bens: viaturas e imóveis ─────────────────────────────────────────────── */
/* A chave primeiro (a matrícula, o artigo): é por ela que se procura na lista. */
.ps-bem { display: grid; grid-template-columns: minmax(110px, auto) 1fr auto; gap: 4px 14px;
	align-items: baseline; padding: 11px 0; border-top: 1px solid var(--ps-line2); }
.ps-bem:first-of-type { border-top: 0; }
.ps-bem__chave b { letter-spacing: .04em; }
.ps-bem__corpo { min-width: 0; }
.ps-bem__valor { white-space: nowrap; }
.ps-bem__fim { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }

/* ══ telemóvel ═══════════════════════════════════════════════════════════════
   No fim do ficheiro de propósito: uma sobreposição tem de vir depois do que
   sobrepõe, e este bloco estava antes — era por isso que os alvos de toque
   continuavam pequenos apesar de estarem aqui escritos.

   As medidas não são de gosto: 44px é o alvo de toque que um dedo acerta sem
   olhar, e 12px é o limite abaixo do qual um rótulo deixa de se ler ao sol. */
/* Os alvos de toque seguem o PONTEIRO, não a largura: um tablet de 768px é
   tocado com o dedo igual a um telemóvel, e um portátil estreito continua a ser
   usado com rato. Foi o erro de os ter ligado à largura que os deixava pequenos
   no tablet. */
@media (pointer: coarse) {
	.ps-botao { min-height: 44px; }
	.ps-botao--pequeno { min-height: 40px; padding: 8px 14px; }
	.ps-copia { min-width: 40px; min-height: 40px; }
	.ps-pilula { padding: 9px 15px; min-height: 40px; }
	.ps-ligacao { min-height: 40px; display: inline-flex; align-items: center; padding: 0 6px; }
	.ps-x { min-width: 44px; min-height: 44px; }
	.ps-escolha { min-height: 40px; }
	.ps-cron__lista > summary { min-height: 44px; display: flex; align-items: center; }
	/* o email e o telefone são para se tocar, não só para se ler */
	.ps-dl dd a, .ps-caixa__linha a { display: inline-block; padding: 9px 0; }
}

/* Nada abaixo dos 12px num ecrã que se segura na mão — e um tablet segura-se
   na mão tanto como um telemóvel, por isso é outra vez o ponteiro que manda. */
@media (pointer: coarse) {
	.ps-root { font-size: 16px; }
	/* os títulos já são 12px e 13px em px fixos: encolhê-los aqui desfazia a
	   escada, e era este bloco — que vem no fim do ficheiro — que ganhava */
	.ps-rot { font-size: 12px; }
	.ps-cartao__quando { font-size: 12.5px; }
	.ps-chip, .ps-nota, .ps-cron__tipo { font-size: 12.5px; }
}

@media (max-width: 560px) {
	.ps-ident__nome { font-size: 1.15rem; }

	/* ── o que empilha ── */
	.ps-acesso__linha { align-items: flex-start; }
	.ps-acesso__linha .ps-rot { min-width: 100%; }
	.ps-dl > div { flex-direction: column; gap: 1px; }
	.ps-painel { padding: 14px 12px; }
	.ps-cron__ev { flex-direction: column; gap: 2px; }
	.ps-cron__data { flex-basis: auto; }
	.ps-guia__topo { flex-wrap: wrap; }
	.ps-divida { flex-wrap: wrap; }
	.ps-divida__accao { min-width: 100%; text-align: left; }

	/* ── o que não pode empurrar a página ── */
	/* a tabela dos sócios tem quatro colunas e a da percentagem não quebra: o
	   conteúdo mínimo passa a largura do ecrã. Em bloco, desliza só ela. */
	.ps-cron__tabela { display: block; width: 100%; overflow-x: auto; }
	.ps-dl dd, .ps-caixa__linha, .ps-acesso__linha code { overflow-wrap: anywhere; }

	/* a factura passa a duas linhas: identificação em cima, valor e acção em
	   baixo — a três colunas o número ficava espremido contra o botão */
	.ps-fatura { grid-template-columns: 1fr auto; }
	.ps-bem { grid-template-columns: 1fr auto; }
	.ps-bem__corpo { grid-column: 1 / -1; }
	.ps-bem__fim { grid-column: 1 / -1; justify-content: flex-start; }
	.ps-fatura__accoes { grid-column: 1 / -1; justify-content: flex-start; }
	.ps-conta__pagamento { border-left: 0; padding-left: 0; border-top: 1px solid var(--ps-line2); padding-top: 12px; }
	.ps-conta__valor { font-size: 1.7rem; }

	/* o nome do grupo era cortado a meio («DMR — Declaração Mensal de Rem…»);
	   numa coluna só cabe inteiro, e a conta passa para baixo */
	.ps-barra { grid-template-columns: 1fr auto; row-gap: 2px; }
	.ps-barra__nome { white-space: normal; overflow: visible; grid-column: 1 / -1; }
}

/* ── ecrãs muito estreitos (o iPhone SE ainda anda por aí) ── */
@media (max-width: 360px) {
	.ps-painel { padding: 12px 10px; }
	.ps-cartao__corpo { padding: 12px 12px; }
	.ps-ident__nome { font-size: 1.05rem; }
	.ps-cp__codigo { font-size: 1rem; }
}

/* ── formulário dentro de um modal (escrever ao gestor) ───────────────────── */
.ps-forma { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ps-campo { display: flex; flex-direction: column; gap: 4px; }
.ps-campo input, .ps-campo textarea { width: 100%; box-sizing: border-box; font: inherit;
  color: #023a51; background: #fff; border: 1px solid #7f8b9b; border-radius: 8px;
  padding: 10px 12px; }
.ps-campo textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.ps-campo input:focus, .ps-campo textarea:focus { outline: 2px solid var(--ps-marca-forte); outline-offset: 1px;
  border-color: #117f3f; }
.ps-forma__fim { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* O MB WAY pede nove dígitos e um clique: o campo tem a largura do que lá cabe,
   o botão fica a seu lado, e a frase que explica o que vai acontecer passa por
   baixo dos dois — entre o campo e a acção ela só os afastava. */
.ps-forma--mbway { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.ps-forma--mbway .ps-campo { flex: 0 1 auto; }
.ps-forma--mbway .ps-campo input { width: 13ch; font-variant-numeric: tabular-nums; }
.ps-forma--mbway .ps-forma__fim { flex: 0 0 auto; }
.ps-forma--mbway .ps-forma__nota { flex: 1 0 100%; margin: 0; }
@media (max-width: 420px) {
	/* no telemóvel o botão ganha a linha toda: metade de um ecrã estreito não
	   chega para «Pedir pagamento» sem o texto se partir */
	.ps-forma--mbway .ps-campo,
	.ps-forma--mbway .ps-forma__fim { flex: 1 0 100%; }
	.ps-forma--mbway .ps-campo input { width: 100%; }
	.ps-forma--mbway .ps-forma__fim .ps-botao { width: 100%; justify-content: center; }
}
.ps-forma__estado { font-size: 13px; color: #59667d; }
.ps-forma__feito { margin-top: 14px; padding: 14px 16px; background: #e8f6ee; border-radius: 10px; }
.ps-forma__ok { margin: 0 0 2px; color: #117f3f; font-weight: 600; }
.ps-escrever { font-weight: 600; }
@media (pointer: coarse) {
  .ps-campo input, .ps-campo textarea { min-height: 44px; font-size: 16px; }
  .ps-forma__fim .ps-botao { min-height: 44px; }
}

/* ── ícones ────────────────────────────────────────────────────────────────
   Herdam a cor do texto e alinham-se pela linha de base óptica (o -2px), senão
   ficam a flutuar acima das letras. */
.ps-icone { display: inline-block; vertical-align: -2px; margin-right: 6px; flex: 0 0 auto; }
.ps-painel__topo h3 .ps-icone { color: #2cbc63; }
.ps-cartao__titulo { display: inline-flex; align-items: center; }

/* ── navegação da área ─────────────────────────────────────────────────────
   Quatro separadores numa fila. Abaixo dos 420px nem quatro rótulos curtos
   cabem, por isso aí — e só aí — vira um botão que abre a lista. */
.ps-nav { margin: 0 0 20px; }
.ps-nav__abre { display: none; }
.ps-nav__lista { display: flex; gap: 4px; border-bottom: 1px solid #e8ebef; }
.ps-nav__item { display: inline-flex; align-items: center; gap: 2px; padding: 10px 14px;
  font-size: 15px; font-weight: 500; color: #59667d; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ps-nav__item:hover { color: #023a51; background: #f3f5f8; border-radius: 8px 8px 0 0; }
.ps-nav__item--activo { color: #023a51; font-weight: 600; border-bottom-color: #2cbc63; }
.ps-nav__item--activo .ps-icone { color: #2cbc63; }

@media (max-width: 420px) {
  .ps-nav { position: relative; }
  .ps-nav__abre { display: inline-flex; align-items: center; gap: 8px; width: 100%;
    min-height: 48px; padding: 10px 14px; font: inherit; font-weight: 600; color: #023a51;
    background: #fff; border: 1px solid #e8ebef; border-radius: 10px; cursor: pointer; }
  .ps-nav__lista { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: 30; flex-direction: column; gap: 0; padding: 6px; background: #fff;
    border: 1px solid #e8ebef; border-radius: 10px; box-shadow: 0 10px 30px rgba(2,58,81,.14); }
  .ps-nav--aberta .ps-nav__lista { display: flex; }
  .ps-nav__item { min-height: 48px; border-bottom: 0; margin-bottom: 0; border-radius: 8px; }
  .ps-nav__item--activo { background: #e8f6ee; }
}

/* ── a facturação comunicada ──────────────────────────────────────────────── */
/* Um ano de cada vez, com o ano anterior atrás em tom apagado. O cartão fica à
   direita e a COR dele é a leitura, não decoração: verde a subir, laranja numa
   queda até 5%, vermelho abaixo disso. */
.ps-fact__anos { margin: 2px 0 16px; }
/* O gráfico a toda a largura e os cartões por baixo.
   Eram duas colunas, com um cartão só à direita. Com três — homólogo, previsão e
   resumo — a coluna de 232px obrigava cada número a partir-se em duas linhas e
   deixava o gráfico apertado contra ela. Doze meses precisam de largura; três
   cartões, em cima de uma fila, lêem-se de uma vez. */
.ps-fact__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ps-fact__grafico { min-width: 0; }
.ps-fact__svg { display: block; width: 100%; height: auto; overflow: visible; }

.ps-fact__barra { fill: var(--ps-marca-forte); }
.ps-fact__sombra { fill: #d4dde6; }
.ps-fact__vazio { fill: #dde4ea; }
.ps-fact__grelha { stroke: var(--ps-line); stroke-width: 1; }
.ps-fact__base { stroke: #c3cfda; stroke-width: 1; }
.ps-fact__eixo { font-size: 10.5px; fill: #8a97a6; text-anchor: end; }
.ps-fact__mes { font-size: 11.5px; fill: var(--ps-ink2); text-anchor: middle; }

/* a zona de leitura cobre a faixa do mês inteira: acertar o rato numa barra de
   6px é pontaria, não interface */
.ps-fact__zona { fill: transparent; cursor: default; }
.ps-fact__zona:hover, .ps-fact__zona:focus-visible { fill: rgba(2,58,81,.045); outline: none; }

.ps-fact__legenda {
	display: flex; gap: 16px; margin: 8px 0 0 34px;
	font-size: .78rem; color: var(--ps-ink2);
}
.ps-fact__legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ps-fact__amostra { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ps-fact__amostra--ano { background: var(--ps-marca-forte); }
.ps-fact__amostra--antes { background: #d4dde6; }

/* a caixa que segue o rato */
.ps-fact__dica {
	position: fixed; z-index: 60; pointer-events: none; display: none;
	min-width: 170px; padding: 10px 12px;
	background: var(--ps-bg); border: 1px solid var(--ps-line); border-radius: 10px;
	box-shadow: 0 10px 28px rgba(2,58,81,.16); font-size: .82rem; color: var(--ps-ink2);
}
.ps-fact__dica b { color: var(--ps-ink); }
.ps-fact__dica .d-mes { font-weight: 700; color: var(--ps-ink); font-size: .88rem; }
.ps-fact__dica .d-valor { font-size: 1.1rem; font-weight: 700; color: var(--ps-ink); margin: 2px 0 6px; }
.ps-fact__dica dl { display: grid; gap: 2px; margin: 0; }
.ps-fact__dica dl > div { display: flex; justify-content: space-between; gap: 12px; }
.ps-fact__dica dt { margin: 0; opacity: .85; }
.ps-fact__dica dd { margin: 0; font-variant-numeric: tabular-nums; }
.ps-fact__dica .d-sobe { color: var(--ps-marca-forte); font-weight: 700; }
.ps-fact__dica .d-desce { color: var(--ps-vermelho); font-weight: 700; }

.ps-fact__lado {
	display: grid; gap: 12px; align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ps-fact__lado > * { margin: 0; }
.ps-fact__cartao { border: 1px solid; border-radius: 14px; padding: 15px 17px; }
.ps-fact__cartao--sobe { background: #e9f7ef; border-color: #bfe6cf; color: #10402a; }
.ps-fact__cartao--aviso { background: #fdf3e3; border-color: #f0dcb4; color: #5a3f10; }
.ps-fact__cartao--queda { background: #fdeceb; border-color: #f3cdc9; color: #5c1f1a; }
.ps-fact__cartao--neutro { background: var(--ps-bg2); border-color: var(--ps-line); color: var(--ps-ink2); }
/* O que é previsto não tem a cara do que é medido: cor própria, fria, e o
   contorno a tracejado — é a diferença que se vê antes de se ler o rótulo. */
.ps-fact__cartao--previsao {
	background: #eef2fb; border-color: #b9c6e4; border-style: dashed; color: #233a66;
}
.ps-fact__selo {
	display: inline-block; padding: 1px 7px; border-radius: 999px;
	background: #233a66; color: #fff; font-size: .68rem; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
}
.ps-fact__var--prev { font-size: 1.42rem; }
.ps-fact__nota { margin: 8px 0 0; font-size: .76rem; line-height: 1.45; opacity: .9; }
/* o tracejado diz «isto ainda não aconteceu» sem precisar de legenda */
.ps-fact__prev {
	fill: #233a66; fill-opacity: .13;
	stroke: #233a66; stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 3 2;
}
.ps-fact__amostra--prev { background: #eef2fb; border: 1px dashed #233a66; }
/* num cartao estreito, um valor que parte a meio deixa o EUR sozinho na linha
   de baixo: o rotulo pode embrulhar, o numero nao */
.ps-fact__cartao--previsao .ps-fact__par dd { white-space: nowrap; }
.ps-fact__cartao--previsao .ps-fact__par dt { line-height: 1.25; }
.ps-fact__dica .d-prev { color: #233a66; font-weight: 700; }
.ps-fact__rot { font-size: .76rem; font-weight: 600; letter-spacing: .02em; opacity: .85; }
.ps-fact__var {
	font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
	margin: 6px 0 12px; font-variant-numeric: tabular-nums;
}
.ps-fact__var--vazia { opacity: .5; }
.ps-fact__par { display: grid; gap: 3px; margin: 0; }
.ps-fact__par > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ps-fact__par dt { font-size: .8rem; margin: 0; opacity: .8; }
.ps-fact__par dd { margin: 0; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* o resumo deixou de ser uma caixa: e a lista DENTRO do cartao do resumo */
.ps-fact__resumo { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; }
.ps-fact__cartao--resumo { background: var(--ps-bg2); border-color: var(--ps-line); color: var(--ps-ink2); }
.ps-fact__cartao--resumo dd { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.ps-fact__delta { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-fact__delta--sobe { color: var(--ps-marca-forte); }
.ps-fact__delta--desce { color: var(--ps-vermelho); }
/* «=» e mais honesto do que «+0,2%»: abaixo de meio ponto nao houve variacao,
   houve arredondamento */
.ps-fact__igual { font-size: .72rem; font-weight: 700; color: var(--ps-ink2); opacity: .65; }
.ps-fact__resumo > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ps-fact__resumo dt { font-size: .8rem; color: var(--ps-ink2); margin: 0; }
.ps-fact__resumo dd {
	margin: 0; font-size: .85rem; font-weight: 600; color: var(--ps-ink);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 880px) {
	.ps-fact__var { font-size: 1.9rem; margin-bottom: 8px; }
	.ps-fact__legenda { margin-left: 0; }
}

/* ── as linhas de um modal ─────────────────────────────────────────────────
   O modal de pagar tinha uma componente de caixa só dele — a `.ps-via` — com um
   contorno de 1px e mais nada: sem banda no cabeçalho, sem a barra verde, sem
   sombra. Dentro de um modal branco, sobre um fundo branco, não havia limite
   nenhum para ver, e cada via repetia 44px de moldura para mostrar um número.
   Passou a ser a `.ps-caixa` que o resto da área usa, e que já se lê. Aqui fica
   só o que uma linha de modal tem de diferente: o rótulo, o valor e o botão de
   copiar na mesma linha, com o copiar encostado à direita. */
.ps-modal .ps-caixa { margin: 0; }
/* as marcas de pagamento não são ícones nossos: têm cor própria e proporção
   própria, e por isso não herdam nem a cor do texto nem o alinhamento dos
   outros — alinham-se pelo meio do rótulo que acompanham */
.ps-marca { display: block; flex: 0 0 auto; margin-right: 8px; }
.ps-caixa__topo > .ps-marca { margin-right: 10px; }
/* a banda cresce para a marca caber sem a cortar, e não encolhe quando a
   caixa ao lado não tem nenhuma: três caixas seguidas com cabeças de alturas
   diferentes liam-se como três coisas diferentes */
.ps-modal .ps-caixa__topo { min-height: 46px; }
.ps-modal .ps-caixa__linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ps-modal .ps-caixa__linha .ps-copia { margin-left: auto; }
.ps-modal .ps-caixa .ps-forma { margin-top: 0; }
.ps-modal .ps-ref { margin: 0; }

/* ── registo: criar o acesso ───────────────────────────────────────────────
   Cada contacto é um botão grande: num telemóvel escolhe-se com o polegar, e o
   valor mascarado tem de se ler sem esforço — é por ele que o cliente decide. */
/* o assistente era uma caixa estreita no meio da página; agora vive dentro da
   moldura da porta, e é ela que manda na largura */
.ps-registo { max-width: none; }
.ps-canais { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.ps-canal { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 12px 14px; background: #fff; border: 1px solid #e8ebef; border-radius: 10px;
  cursor: pointer; font: inherit; }
.ps-canal:hover { border-color: #7f8b9b; }
.ps-canal--escolhido { border-color: #117f3f; background: #e8f6ee; }
.ps-canal__tipo { font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #59667d; }
.ps-canal--escolhido .ps-canal__tipo { color: #117f3f; }
.ps-canal__valor { font-size: 16px; color: #023a51; letter-spacing: .02em; }
/* o código escreve-se uma vez e tem de se conferir à vista */
.ps-otp { font-size: 26px; letter-spacing: .34em; text-align: center; font-weight: 600; }
.ps-registo__enviado { margin: 0 0 4px; }
@media (pointer: coarse) { .ps-canal { min-height: 60px; } }

/* ── o esqueleto: o lugar de um painel que ainda não chegou ─────────────────
 *
 * Tem a FORMA do painel que vem a seguir, e isso não é um enfeite: um
 * rectângulo genérico substituído por conteúdo de outra altura faz a página dar
 * um salto debaixo dos olhos de quem já começou a ler.
 *
 * O brilho que o atravessa diz «está a caminho». A quem pediu menos movimento
 * ao sistema operativo fica parado: a informação está na forma e não na
 * animação.
 */
.ps-esq {
	background: linear-gradient( 100deg, var(--ps-line2) 28%, var(--ps-banda) 48%, var(--ps-line2) 68% );
	background-size: 360% 100%;
	border-radius: 6px;
}
@media (prefers-reduced-motion: no-preference) {
	.ps-esq { animation: ps-esq 1.5s ease-in-out infinite; }
}
@keyframes ps-esq { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.ps-esq--linha { height: 13px; margin: 0 0 11px; }
.ps-esq--linha:last-child { margin-bottom: 2px; }
/* a altura do painel__topo: 20 de título, 9 de folga e 12 depois da linha */
.ps-esq--titulo { height: 20px; margin: 0 0 21px; }
.ps-esq--pilula { height: 31px; width: 76px; border-radius: 999px; }
.ps-esq--cartao { height: 168px; border-radius: var(--ps-raio); }
.ps-esq-fact { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 22px; }
.ps-esq--grafico { height: 230px; }
.ps-esq--lado { height: 214px; border-radius: var(--ps-raio); }
@media (max-width: 880px) {
	.ps-esq-fact { grid-template-columns: minmax(0, 1fr); }
	.ps-esq--lado { height: 120px; }
}

/* Trocar de ano não volta ao esqueleto. Quem já está a olhar para o gráfico não
   quer ver o lugar dele outra vez vazio: o painel apaga-se um pouco, deixa de
   responder, e o conteúdo novo entra por cima do velho. */
.ps-adiado--outra-vez { opacity: .45; pointer-events: none; transition: opacity .15s; }

/* só para quem ouve a página */
.ps-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── o selector de idioma, na barra de cima ────────────────────────────────
   Siglas, não bandeiras: uma bandeira é um país e não uma língua. E sem caixa
   à volta de cada uma — são quatro palavras de duas letras ao lado de dois
   botões, e mais quatro contornos ali fariam uma régua. */
body.ps-moldura .ps-moldura__linguas {
	display: inline-flex; align-items: center; gap: 2px; margin-right: 6px;
}
body.ps-moldura .ps-lingua {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; min-height: 32px; padding: 0 6px; border-radius: 999px;
	font-size: .78rem; font-weight: 600; letter-spacing: .04em;
	color: var(--ps-ink2); text-decoration: none;
	transition: color .12s, background .12s;
}
body.ps-moldura .ps-lingua:hover { color: var(--ps-ink); background: var(--ps-bg2); }
body.ps-moldura .ps-lingua:focus-visible { outline: 2px solid var(--ps-verde); outline-offset: 1px; }
body.ps-moldura .ps-lingua--activa { color: var(--ps-ink); background: var(--ps-banda); }
@media (max-width: 560px) {
	/* No telemóvel a barra já leva a marca e dois botões: as línguas descem para
	   a sua própria linha. O `order` e o `width` só valem entre irmãos do mesmo
	   contentor — por isso é que o `__linguas` tem de ser irmão do `__eu` e não
	   filho dele, senão ia parar depois dos botões em vez de mudar de linha. */
	body.ps-moldura .ps-moldura__barra { flex-wrap: wrap; }
	body.ps-moldura .ps-moldura__linguas {
		order: 3; width: 100%; margin: 8px 0 0; justify-content: flex-start;
	}
	body.ps-moldura .ps-lingua { min-width: 44px; min-height: 44px; }
}

/* ── a barra das empresas ──────────────────────────────────────────────────
   O mesmo HTML serve os dois ecrãs e é o CSS que escolhe: no ecrã grande a fila
   de pílulas, no telemóvel a empresa actual e um «+N» que abre a lista. Mandar
   HTML diferente do servidor obrigava a adivinhar a largura — e a página vai
   para cache, pelo que o seguinte levaria o ecrã do anterior. */
.ps-empresas__resumo { display: none; }
@media (max-width: 560px) {
	.ps-empresas > .ps-pilula { display: none; }
	.ps-empresas__resumo { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
	/* o nome da empresa encolhe e corta; o «+N» nunca encolhe */
	.ps-empresas__resumo > .ps-pilula--activa {
		min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.ps-empresas__mais { flex: 0 0 auto; font-weight: 700; min-height: 40px; cursor: pointer; }
}

/* a lista do modal: cada empresa é um alvo grande, para o polegar */
.ps-escolher { display: flex; flex-direction: column; }
.ps-escolher__item {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 13px 4px; border-top: 1px solid var(--ps-line2);
	color: var(--ps-ink); text-decoration: none; min-height: 52px;
}
.ps-escolher__item:first-child { border-top: 0; }
.ps-escolher__item:hover { background: var(--ps-bg2); }
.ps-escolher__item:focus-visible { outline: 2px solid var(--ps-verde); outline-offset: -2px; }
.ps-escolher__nome { font-weight: 600; }
.ps-escolher__marca { margin-left: auto; color: var(--ps-verde); font-weight: 700; }
.ps-escolher__item--activa { color: var(--ps-ink); }