.app .main-footer {
  /* Overlay fixo como o app-header — conteúdo passa por baixo ao scroll */
  position: fixed;
  bottom: 0;
  left: var(--sidebar-offset);
  right: 0;
  width: auto; /* sobrepõe .row { width: 100% } — left+right definem a largura */
  height: var(--footer-height);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--header-bg);
  border-top: 1px solid var(--header-border);
  /* Vidro fosco como o cabeçalho (reposto a 2026-09-10): o rodapé é fixo e o
     conteúdo passa-lhe por baixo, portanto há mesmo o que desfocar. */
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
  z-index: 1010;
  overflow: hidden;
  transition: left var(--dur-md) ease;
}

.app .main-footer .copyright-text {
  /* Um tom acima do cinzento apagado de antes. Com a faixa translúcida, o que
     passa por baixo pode ser um gráfico às cores, e aí o apagado caía a 3,7:1;
     assim fica em 6:1 no pior fundo medido, e continua a ler-se como rodapé. */
  color: var(--color-text-secondary);
  text-align: center;
}

/* Quem não sabe desfocar recebe o rodapé opaco, como o cabeçalho. Sem isto, o
   texto do rodapé ficava sobre o conteúdo a passar, sem nada a separá-los. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app .main-footer {
    background: var(--color-surface);
  }
}

/* ── O RODAPÉ NÃO EXISTE NO TELEMÓVEL (Jorge, 2026-09-19) ──────────────────
   Dizia o copyright e a versão, e custava 40px fixos dos 844 de um telemóvel,
   em todas as páginas do CMS. A versão continua a ler-se em Definições e no
   /server, nos sinais vitais do Estado: a desta máquina, e a de produção na
   mesma leitura que o PHP (até 2026-09-25 o /server não a mostrava).

   O espaço não se recupera aqui: quem o reserva é o `padding-bottom` do
   `.content`, que lê o `--footer-height`. Esse vai a zero no mesmo degrau, no
   `tokens.css`. */
.app .main-footer { display: none; }

@media (min-width: 481px) {
  .app .main-footer { display: flex; }
}