estica o botão. */
.apoios-grelha { list-style: none; margin: 0; padding: 0; }
.apoio-item { display: grid; min-width: 0; }
/* Logótipo no lugar do ícone, com o mesmo tamanho (48 px; 42 px em ecrãs
estreitos). Sem placa: o fundo vem do próprio logótipo. */
.apoio-logo {
display: block;
width: 48px;
height: 48px;
border-radius: 12px;
object-fit: contain;
}
@media (max-width: 380px) {
.apoio-logo { width: 42px; height: 42px; }
}
/* Convite «Queres apoiar o Prontidão?»: o mesmo botão, mais discreto
(tracejado, sem fundo) e com um "+" no lugar do ícone. */
.apoio--convite {
background: transparent;
border: 1.5px dashed var(--line);
color: var(--muted);
}
.apoio-mais {
background: transparent;
border: 1.5px dashed var(--line);
box-shadow: none;
color: var(--mint-forte);
font-size: 26px;
font-weight: var(--peso-forte);
line-height: 1;
}
/* =========================================================
17. Barra de navegação inferior
========================================================= */
.nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-nav);
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
/* centra os 5 botões em ecrãs largos, até 560 px */
padding: 6px max(6px, calc((100% - 560px) / 2)) calc(6px + env(safe-area-inset-bottom, 0px));
background: var(--nav);
}
.nav a,
.nav button {
display: grid;
justify-items: center;
align-content: center;
gap: 3px;
min-width: 0;
min-height: var(--toque-min);
padding: 4px 0;
border: 0;
border-radius: var(--raio-md);
background: none;
color: var(--nav-ink);
font-size: var(--fs-xs);
font-weight: var(--peso-medio);
line-height: 1.2;
text-decoration: none;
cursor: pointer;
}
.nav svg { width: 40px; height: 28px; padding: 4px 10px; border-radius: var(--raio-sm); }
.nav a:hover svg, .nav button:hover svg { background: var(--realce-nav); }
.nav [aria-current="page"] { color: var(--nav-ink-ativo); }
.nav [aria-current="page"] svg { background: var(--realce-nav); }
.nav :focus-visible { outline-color: var(--nav-ink-ativo); }
/* =========================================================
18. Barra de ação fixa (telemóvel), por cima da nav
========================================================= */
.barra-acao {
position: fixed;
left: 0;
right: 0;
bottom: calc(var(--altura-nav) + env(safe-area-inset-bottom, 0px));
z-index: var(--z-barra-acao);
display: flex;
gap: var(--esp-2);
padding: 10px max(var(--gutter), calc((100% - var(--largura-leitura)) / 2 + var(--gutter)));
background: var(--surface);
border-top: 1px solid var(--line);
box-shadow: var(--sombra-2);
}
.barra-acao > .btn { flex: 1; }
/* =========================================================
19. Folha (sheet): janela que sobe do fundo
========================================================= */
.sheet-bg {
position: fixed;
inset: 0;
z-index: var(--z-sheet);
display: grid;
align-items: end;
justify-items: center;
padding: var(--esp-4);
background: var(--veu);
}
@media (min-width: 640px) {
.sheet-bg { align-items: center; }
}
.sheet {
width: 100%;
max-width: 420px;
max-height: calc(100dvh - 2 * var(--esp-4));
overflow-y: auto;
display: grid;
gap: var(--esp-3);
padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
background: var(--surface);
color: var(--ink);
border-radius: var(--raio-sheet);
box-shadow: var(--sombra-3);
}
.sheet h2, .sheet h4 { margin: 0; font-size: var(--fs-lg); font-weight: var(--peso-extra); }
.sheet > form { display: grid; gap: var(--esp-3); }
/* Enquanto a folha está aberta, a página por trás não desliza */
.sem-scroll { overflow: hidden; }
/* =========================================================
20. Toast (mensagem curta)
Fica sempre no DOM com role="status"; vazio = invisível.
========================================================= */
.toast {
/* O toast só informa: os cliques passam através dele, por isso nunca
tapa um botão (ex.: o "Eliminar" de uma folha aberta). */
pointer-events: none;
position: fixed;
left: 50%;
bottom: calc(var(--altura-nav) + var(--esp-5) + env(safe-area-inset-bottom, 0px));
z-index: var(--z-toast);
max-width: calc(100% - 2 * var(--gutter));
padding: 11px 16px;
border-radius: var(--raio-md);
background: var(--ink);
color: var(--bg);
font-size: 14px;
transform: translateX(-50%);
box-shadow: var(--sombra-2);
animation: toast-entra .2s ease-out;
}
.toast:empty {
padding: 0;
clip-path: inset(50%);
animation: none;
}
@keyframes toast-entra {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* =========================================================
21. Menos movimento, se o sistema o pedir
========================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
22. Rodapé: autoria e ligações legais (todas as páginas)
Vem logo a seguir ao .aviso-formacao:
Criado por Jeferson Rolim · Privacidade · Termos · Sobre
Antes estava repetido em guia.css, simulador.css e inicio.css.
========================================================= */
.autoria {
margin-top: var(--esp-2);
color: var(--muted);
font-size: 12px;
text-align: center;
}
/* Alvo de toque maior (as ligações são pequenas) */
.autoria a { display: inline-block; padding-block: 12px; }
/* As ligações ficam juntas numa linha: sem um "· Sobre" sozinho. Em ecrãs
estreitos passam para uma linha própria, sem o separador no início. */
.autoria-ligacoes { white-space: nowrap; }
@media (max-width: 420px) {
.autoria-sep { display: none; }
.autoria-ligacoes { display: block; }
}
/* Marca bem visível de demonstração: nada é enviado nem guardado.
(Antes só em inicio.css; usada na página principal e no Perfil.) */
.marca-demo {
margin: 0;
padding: var(--esp-2) var(--esp-3);
border: 1px dashed var(--parcial);
border-radius: var(--raio-sm);
background: var(--parcial-soft);
color: var(--parcial);
font-size: 13px;
font-weight: var(--peso-forte);
}