/* =====================================================================
GERADOR DE SENHAS — folha da página. 13/09/2026.
A PALETA É DECLARADA AQUI, não herdada. Copiei uma vez um bloco de CSS
entre folhas e deixei para trás as variáveis de que ele dependia: uma
`var()` por definir invalida a propriedade inteira EM SILÊNCIO, e o botão
ficou sem fundo nem moldura sem dar erro nenhum.
O CARTÃO TEM TRÊS ZONAS, pela ordem da atenção de quem chega:
1. a senha — o único artefacto da página — com a força e as acções
logo por baixo dela;
2. os controlos;
3. o extra (a impressão digital), atrás de um risco.
===================================================================== */
#sn-gerador, #sn-artigos, #sn-apoio, #sn-como, #sn-modal {
--sn-ac: #00acc8; /* a acção */
--sn-c: #d60037; /* a marca */
--sn-t: #1f2835; /* o texto */
--sn-l: #edeff0; /* o cinzento da casa */
--sn-l2: #e2e6ea;
--sn-g: #5b6879;
--sn-g2: #8b95a5;
--sn-ok: #1d8f4e;
--sn-dig: #00788c; /* os dígitos: o teal da casa escurecido até 5,17:1 */
}
#sn-gerador, #sn-artigos, #sn-apoio { padding: 60px 0; }
#sn-gerador { background: #fff; }
#sn-artigos { background: var(--sn-l); }
#sn-apoio { background: #fff; }
#sn-gerador, #sn-como, #sn-guardar, #sn-artigos, #sn-apoio { scroll-margin-top: 100px; }
/* =====================================================================
O ESPAÇO DESENHADO NÃO É ESPAÇO DE TEXTO — apanhado pelo dono ao colar o
cartão em texto: «Gerador de senhastudo acontece», «Forte102 bits».
Num contentor `flex` os nós de texto que só têm espaços são deitados
fora — não chegam a ser itens. O afastamento vem do `gap`, que é desenho
e não texto. No ecrã lê-se bem; quando a página deixa de ser VISTA e
passa a ser LIDA (copiar, leitor de ecrã, modo de leitura, tradutor) as
palavras colam-se.
A `.sn-vis` NÃO usa `position: absolute`: isso tira-a do fluxo e o
separador ganha uma linha só para ele, que é pior. Letra de tamanho zero
não ocupa nada, não se vê, e continua no texto e na mesma linha.
===================================================================== */
.sn-vis { font-size: 0; line-height: 0; letter-spacing: 0; }
/* =====================================================================
O CARTÃO
===================================================================== */
.sn-cartao {
max-width: 760px; margin: 0 auto;
background: #fff;
border: 1px solid var(--sn-l2); border-radius: 18px;
box-shadow: 0 18px 44px rgba(31, 40, 53, .10);
overflow: hidden;
}
.sn-cartao__top {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 18px; background: var(--sn-t); color: #fff; font-size: 14px;
}
.sn-cartao__top i {
width: 9px; height: 9px; border-radius: 50%;
background: #2ecc71; box-shadow: 0 0 0 3px rgba(46, 204, 113, .25);
}
.sn-cartao__top small { margin-left: auto; color: #9fb0c2; font-size: 12px; letter-spacing: .03em; }
.sn-cartao__corpo { padding: 24px 22px 22px; background: #f1f4f7; }
/* =====================================================================
A SENHA. É o único artefacto da página: tudo o resto é moldura.
VISÍVEL, não escondida atrás de pontos: uma senha que se vai copiar tem
de se poder ler para conferir, e ninguém a está a escrever — ela é
gerada aqui.
NÃO É UM `` NEM UM `