/* ==========================================================================
   app.css — tema petróleo
   Canal de Denúncias · denuncias-online.pt

   Carrega SEMPRE depois de bulma.min.css.
   Só acrescenta o que o Bulma não resolve. Se o Bulma já tem a classe,
   usa-se a classe.

   Nomes das variáveis --bulma-* confirmados em bulma.min.css (1.0.4).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis
   -------------------------------------------------------------------------- */

:root {
  /* Bulma 1.x define as cores em HSL, com o prefixo --bulma- */
  --bulma-primary-h: 190deg;
  --bulma-primary-s: 65%;
  --bulma-primary-l: 23%;

  --bulma-link-h: 190deg;
  --bulma-link-s: 63%;
  --bulma-link-l: 33%;

  --bulma-info-h: 193deg;
  --bulma-info-s: 34%;
  --bulma-info-l: 35%;

  --bulma-success-h: 165deg;
  --bulma-success-s: 46%;
  --bulma-success-l: 33%;

  --bulma-warning-h: 40deg;
  --bulma-warning-s: 59%;
  --bulma-warning-l: 43%;

  --bulma-danger-h: 8deg;
  --bulma-danger-s: 38%;
  --bulma-danger-l: 47%;

  --bulma-scheme-h: 195;
  --bulma-scheme-s: 12%;

  --bulma-family-primary: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bulma-radius: 6px;
  --bulma-radius-large: 10px;
  --bulma-radius-small: 4px;

  --bulma-body-background-color: #f6f8f8;
  --bulma-body-color: #1e2a2e;
  --bulma-body-size: 16px;
  --bulma-body-line-height: 1.6;

  --bulma-border: #dce3e5;
  --bulma-border-weak: #e8eef0;

  /* Sombras muito ligeiras. O Bulma traz sombras pesadas por omissão. */
  --bulma-shadow: 0 1px 2px hsla(195, 12%, 20%, 0.05);

  /* --- variáveis próprias, usadas no CSS da aplicação --- */
  --petroleo-escuro: #0e3a42;
  --petroleo: #14555f;
  --petroleo-medio: #1e7a88;
  --petroleo-claro: #7fb3bc;
  --petroleo-muito-claro: #e3edef;

  --fundo: #f6f8f8;
  --superficie: #ffffff;
  --borda: #dce3e5;
  --texto: #1e2a2e;
  --texto-suave: #5c6b70;

  --sucesso: #2e7d6b;
  --aviso: #b0842e;
  --perigo: #a5544a;
  --informacao: #3a6e7a;

  /* medidas */
  --largura-conteudo: 1100px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html {
  background-color: var(--fundo);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--texto);
}

/* O conteúdo empurra o rodapé para baixo em páginas curtas. */
.app-corpo {
  flex: 1 0 auto;
}

/* Largura máxima do conteúdo: 1100px, centrado. */
.container {
  max-width: var(--largura-conteudo);
}

/* Títulos em petróleo escuro, peso 600, sem maiúsculas forçadas. */
.title,
h1,
h2,
h3,
h4 {
  color: var(--petroleo-escuro);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.subtitle {
  color: var(--texto-suave);
  font-weight: 400;
}

a {
  color: var(--petroleo-medio);
}

a:hover {
  color: var(--petroleo);
}

.texto-suave {
  color: var(--texto-suave);
}

/* Foco sempre visível — acessibilidade e navegação por teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--petroleo-medio);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Barra de navegação
   -------------------------------------------------------------------------- */

.navbar.app-navbar {
  background-color: var(--petroleo-escuro);
  border-bottom: 1px solid var(--petroleo-escuro);
  min-height: 3.5rem;
}

.app-navbar .navbar-brand {
  align-items: center;
}

.app-navbar .navbar-item,
.app-navbar .navbar-link {
  color: #dfeaec;
  background-color: transparent;
}

.app-navbar .navbar-item:hover,
.app-navbar .navbar-item:focus,
.app-navbar .navbar-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.app-navbar .navbar-item.is-active {
  color: #ffffff;
  box-shadow: inset 0 -2px 0 var(--petroleo-claro);
}

/* A marca não deve escurecer ao passar o rato. */
.app-navbar .navbar-brand .navbar-item:hover {
  background-color: transparent;
}

.app-navbar-marca {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
}

.app-navbar-empresa {
  color: var(--petroleo-claro);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.2;
}

.app-navbar-logo {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.75rem;
  color: var(--petroleo-claro);
  flex: none;
}

/* Impede que a referência legal parta ao meio no rodapé. */
.app-nao-quebrar {
  white-space: nowrap;
}

/* Botão do menu em ecrãs pequenos. */
.app-navbar .navbar-burger {
  color: #ffffff;
}

.app-navbar .navbar-burger:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* O menu aberto no telemóvel mantém o fundo petróleo. */
@media screen and (max-width: 1023px) {
  .app-navbar .navbar-menu.is-active {
    background-color: var(--petroleo-escuro);
    box-shadow: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.5rem 0;
  }
}

/* --------------------------------------------------------------------------
   4. Cartões e caixas
   -------------------------------------------------------------------------- */

.box,
.card {
  background-color: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 6px;
  box-shadow: none;
}

.box {
  padding: 1.75rem;
}

.card-header {
  box-shadow: none;
  border-bottom: 1px solid var(--borda);
}

.card-header-title {
  color: var(--petroleo-escuro);
  font-weight: 600;
}

.card-content {
  padding: 1.5rem;
}

.card-footer {
  border-top: 1px solid var(--borda);
}

.card-footer-item:not(:last-child) {
  border-right: 1px solid var(--borda);
}

/* Cabeçalho de secção: título e ação à direita. */
.app-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.app-cabecalho .title {
  margin-bottom: 0.25rem;
}

.app-cabecalho .subtitle {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Tabelas
   -------------------------------------------------------------------------- */

/* Sem linhas verticais, linha horizontal fina, realce suave ao passar o rato. */
.table {
  background-color: transparent;
  color: var(--texto);
}

.table th {
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--borda);
  border-width: 0 0 1px;
  white-space: nowrap;
}

.table td {
  border-bottom: 1px solid var(--bulma-border-weak);
  border-width: 0 0 1px;
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom-width: 0;
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: var(--petroleo-muito-claro);
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: #fafcfc;
}

/* Tabela dentro de um cartão: encosta às margens. */
.card-content > .table-container:only-child,
.card-content > .table:only-child {
  margin-bottom: 0;
}

/* Em ecrãs estreitos a tabela desliza na horizontal em vez de rebentar. */
.table-container {
  -webkit-overflow-scrolling: touch;
}

/* Referência da denúncia: monoespaçada, para se ler sem enganos. */
.app-referencia {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   6. Etiquetas: estados e prazos
   -------------------------------------------------------------------------- */

.tag:not(body) {
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding-left: 0.6em;
  padding-right: 0.6em;
}

/* Estados da denúncia (secção 10) */
.tag.app-estado-recebida {
  background-color: #e6ecee;
  color: #4a5c62;
}

.tag.app-estado-analise {
  background-color: var(--petroleo-muito-claro);
  color: var(--petroleo);
}

.tag.app-estado-concluida {
  background-color: #e2efeb;
  color: var(--sucesso);
}

.tag.app-estado-fora-ambito,
.tag.app-estado-arquivada {
  background-color: #eceff0;
  color: var(--texto-suave);
}

/* Sinal de prazo (secção 11): verde, mostarda, terracota. */
.tag.app-prazo-ok {
  background-color: #e2efeb;
  color: var(--sucesso);
}

.tag.app-prazo-perto {
  background-color: #f6efdf;
  color: var(--aviso);
}

.tag.app-prazo-vencido {
  background-color: #f4e6e4;
  color: var(--perigo);
}

/* Ponto de cor à frente da etiqueta, para não depender só da cor do texto. */
.app-prazo-ponto {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  background-color: currentColor;
  flex: none;
}

/* --------------------------------------------------------------------------
   7. Botões
   -------------------------------------------------------------------------- */

.button {
  font-weight: 500;
  border-radius: 6px;
  box-shadow: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* Botão principal: petróleo cheio. No máximo um por ecrã. */
.button.is-primary {
  background-color: var(--petroleo);
  border-color: var(--petroleo);
  color: #ffffff;
}

.button.is-primary:hover {
  background-color: var(--petroleo-escuro);
  border-color: var(--petroleo-escuro);
  color: #ffffff;
}

/* Botão secundário: só contorno. */
.button.app-secundario {
  background-color: transparent;
  border-color: var(--petroleo);
  color: var(--petroleo);
}

.button.app-secundario:hover {
  background-color: var(--petroleo-muito-claro);
  border-color: var(--petroleo);
  color: var(--petroleo-escuro);
}

.button.is-light,
.button:not([class*="is-"]) {
  border-color: var(--borda);
  color: var(--texto);
}

/* Grupo de botões que passa a coluna única no telemóvel. */
.app-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

@media screen and (max-width: 480px) {
  .app-acoes {
    flex-direction: column;
    align-items: stretch;
  }

  .app-acoes .button {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   8. Formulários
   -------------------------------------------------------------------------- */

.label {
  color: var(--petroleo-escuro);
  font-weight: 600;
  font-size: 0.9375rem;
}

.input,
.textarea,
.select select {
  border-color: var(--borda);
  box-shadow: none;
  color: var(--texto);
}

.input::placeholder,
.textarea::placeholder {
  color: #9aa8ad;
}

.input:hover,
.textarea:hover,
.select select:hover {
  border-color: var(--petroleo-claro);
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--petroleo-medio);
  box-shadow: 0 0 0 2px rgba(30, 122, 136, 0.15);
}

.help {
  color: var(--texto-suave);
}

.help.is-danger {
  color: var(--perigo);
}

.input.is-danger,
.textarea.is-danger,
.select select.is-danger {
  border-color: var(--perigo);
}

/* Opções de rádio e caixas de seleção com espaço para o dedo. */
.app-opcao {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--borda);
  border-radius: 6px;
  margin-bottom: 0.6rem;
  cursor: pointer;
  background-color: var(--superficie);
}

.app-opcao:hover {
  border-color: var(--petroleo-claro);
  background-color: #fbfdfd;
}

.app-opcao input {
  margin-top: 0.25rem;
  flex: none;
}

.app-opcao-texto {
  display: block;
  font-weight: 600;
  color: var(--texto);
}

.app-opcao-ajuda {
  display: block;
  font-size: 0.875rem;
  color: var(--texto-suave);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   9. Avisos e mensagens
   -------------------------------------------------------------------------- */

.notification {
  border: 1px solid var(--borda);
  border-radius: 6px;
  background-color: var(--petroleo-muito-claro);
  color: var(--texto);
  padding: 1.1rem 1.25rem;
}

.notification.is-info {
  background-color: #e6eff1;
  border-color: #cfe0e4;
  color: #2c545d;
}

.notification.is-success {
  background-color: #e2efeb;
  border-color: #cbe2da;
  color: #245f52;
}

.notification.is-warning {
  background-color: #f6efdf;
  border-color: #e8dcc0;
  color: #7d5e20;
}

.notification.is-danger {
  background-color: #f4e6e4;
  border-color: #e6cdc9;
  color: #7c4038;
}

.message {
  background-color: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 6px;
}

.message-header {
  background-color: var(--petroleo-muito-claro);
  color: var(--petroleo-escuro);
  font-weight: 600;
  border-radius: 5px 5px 0 0;
}

.message-body {
  border: 0;
  border-left: 3px solid var(--petroleo-claro);
  border-radius: 0 0 5px 5px;
  color: var(--texto);
  background-color: var(--superficie);
}

/* Aviso destacado — usado no ecrã da referência e palavra-passe. */
.app-aviso-forte {
  border: 1px solid var(--aviso);
  border-left-width: 4px;
  background-color: #fbf7ee;
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
  color: #6f5218;
}

.app-aviso-forte strong {
  color: #6f5218;
}

/* --------------------------------------------------------------------------
   10. Separadores (tabs)
   -------------------------------------------------------------------------- */

.tabs {
  margin-bottom: 1.5rem;
}

.tabs ul {
  border-bottom-color: var(--borda);
}

.tabs a {
  color: var(--texto-suave);
  border-bottom-width: 2px;
  border-bottom-color: transparent;
  font-weight: 500;
}

.tabs a:hover {
  color: var(--petroleo);
  border-bottom-color: var(--petroleo-claro);
  background-color: transparent;
}

.tabs li.is-active a {
  color: var(--petroleo-escuro);
  border-bottom-color: var(--petroleo);
  font-weight: 600;
}

/* Os painéis dos separadores são controlados pelo app.js. A regra que os
   esconde está na secção 15, para que sem JavaScript fiquem todos visíveis. */

/* --------------------------------------------------------------------------
   11. Modais
   -------------------------------------------------------------------------- */

.modal-card-head,
.modal-card-foot {
  background-color: var(--superficie);
  border-color: var(--borda);
}

.modal-card-head {
  border-radius: 6px 6px 0 0;
}

.modal-card-foot {
  border-radius: 0 0 6px 6px;
  justify-content: flex-end;
  gap: 0.75rem;
}

.modal-card-title {
  color: var(--petroleo-escuro);
  font-weight: 600;
  font-size: 1.125rem;
}

.modal-card-body {
  color: var(--texto);
}

.modal-background {
  background-color: rgba(14, 58, 66, 0.6);
}

/* --------------------------------------------------------------------------
   12. Página pública da empresa (secção 13.6)
   -------------------------------------------------------------------------- */

.app-canal {
  padding: 3rem 0 4rem;
}

.app-canal-titulo {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.app-canal-empresa {
  font-size: 1.125rem;
  color: var(--texto-suave);
  margin-bottom: 2rem;
}

.app-canal .box {
  padding: 2rem;
}

/* --------------------------------------------------------------------------
   13. Rodapé
   -------------------------------------------------------------------------- */

.footer.app-footer {
  flex: none;
  background-color: transparent;
  border-top: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: 0.875rem;
  padding: 1.75rem 1.5rem;
  margin-top: 3rem;
}

.app-footer a {
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-footer a:hover {
  color: var(--petroleo);
}

.app-footer-linhas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
  align-items: center;
}

/* --------------------------------------------------------------------------
   14. Ícones
   -------------------------------------------------------------------------- */

/* SVG local e monocromático. Sem bibliotecas externas. */
.app-icone {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* --------------------------------------------------------------------------
   15. Sem JavaScript
   -------------------------------------------------------------------------- */

/* Tudo tem de funcionar sem JavaScript (secção 14.1).
   O app.js marca o <html> com esta classe; enquanto não o fizer, os painéis
   escondidos ficam visíveis e o menu fica aberto. */
.app-painel[hidden] {
  display: block;
}

.js .app-painel[hidden] {
  display: none;
}

/* O botão de imprimir só faz sentido com JavaScript. Sem ele, esconde-se —
   quem quiser imprime pelo menu do browser, e a folha de impressão da
   secção 20 já está preparada. */
.app-imprimir {
  display: none;
}

.js .app-imprimir {
  display: inline-flex;
}

@media screen and (max-width: 1023px) {
  html:not(.js) .app-navbar .navbar-menu {
    display: block;
    background-color: var(--petroleo-escuro);
    box-shadow: none;
    padding: 0.5rem 0;
  }

  html:not(.js) .app-navbar .navbar-burger {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   16. Auxiliares de espaçamento
   -------------------------------------------------------------------------- */

.app-seccao {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.app-espaco {
  margin-bottom: 2rem;
}

.app-lista-limpa {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-lista-limpa li + li {
  margin-top: 0.5rem;
}

/* Separador fino entre blocos. */
.app-divisor {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: 2rem 0;
}

/* --------------------------------------------------------------------------
   17. Canal público da empresa

   A cor da marca chega por /{codigo}/marca.css, que define --empresa-cor.
   Se a empresa não tiver cor, o fallback é o petróleo e nada muda.
   -------------------------------------------------------------------------- */

.app-navbar.app-navbar-empresa-cor {
  background-color: var(--empresa-cor, var(--petroleo-escuro));
  border-bottom-color: var(--empresa-cor, var(--petroleo-escuro));
}

.app-navbar-logo-empresa {
  max-height: 2.25rem;
  width: auto;
  margin-right: 0.75rem;
  flex: none;
}

.button.is-primary.app-botao-empresa {
  background-color: var(--empresa-cor, var(--petroleo));
  border-color: var(--empresa-cor, var(--petroleo));
}

.button.is-primary.app-botao-empresa:hover {
  /* Escurece a cor da empresa sem precisar de saber qual é. */
  filter: brightness(0.88);
}

/* Coluna estreita para formulários longos: ler uma linha de 90 caracteres
   cansa, e uma denúncia já é bastante para ler. */
.app-coluna-estreita {
  max-width: 46rem;
}

/* Barra dos três passos: preencher, rever, referência. */
.app-passos-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--texto-suave);
}

.app-passos-barra .app-passo-atual {
  color: var(--petroleo-escuro);
  font-weight: 600;
}

/* Lista com marcas, para as poucas onde faz sentido. */
.app-lista-marcada {
  margin: 0;
  padding-left: 1.15rem;
  list-style: disc;
}

.app-lista-marcada li {
  margin-bottom: 0.35rem;
}

/* Campos de identificação. Sem JavaScript ficam sempre visíveis, com a nota
   de que só se preenchem se a pessoa se quiser identificar. O app.js
   esconde-os quando está escolhido "anónimo". */
.app-identificacao {
  border-top: 1px solid var(--borda);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}

.js .app-identificacao[hidden] {
  display: none;
}

/* Tabela de revisão: duas colunas, sem ar de folha de cálculo. */
.app-tabela-revisao th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
  width: 30%;
  color: var(--texto-suave);
}

/* Texto longo escrito pelo utilizador: respeita as mudanças de linha e não
   rebenta a caixa com uma palavra enorme. */
.app-texto-longo {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  background-color: #fbfdfd;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 1rem 1.15rem;
}

/* Referência e palavra-passe, mostradas uma única vez. */
.app-credenciais {
  border-color: var(--petroleo-claro);
}

.app-credencial {
  margin-bottom: 1.25rem;
}

.app-credencial-etiqueta {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  margin-bottom: 0.35rem;
}

.app-credencial-valor {
  display: block;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--petroleo-escuro);
  background-color: var(--petroleo-muito-claro);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   18. Ecrãs de entrada: login, 2FA e escolha da empresa
   -------------------------------------------------------------------------- */

.app-entrada {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
}

.app-entrada-caixa {
  width: 100%;
  max-width: 26rem;
}

.app-entrada-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  color: var(--petroleo-escuro);
  font-weight: 600;
  font-size: 1.0625rem;
}

.app-entrada-logo {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--petroleo);
  flex: none;
}

.app-entrada-rodape {
  margin-top: 1.25rem;
  color: var(--texto-suave);
  font-size: 0.875rem;
  text-align: center;
  line-height: 1.5;
}

/* Dois formulários seguidos na mesma caixa (continuar / terminar sessão). */
.app-entrada-caixa form + form {
  margin-top: 0.75rem;
}

/* Campo do código de 6 dígitos: grande, espaçado e centrado. */
.input.app-codigo {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  text-align: center;
  padding-left: 0.5rem;
  height: 3.25rem;
}

/* Passos numerados da configuração do 2FA. */
.app-passos {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}

.app-passos li {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.app-qr {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  padding: 0.75rem;
  background-color: #ffffff;
  border: 1px solid var(--borda);
  border-radius: 6px;
}

.app-qr img {
  display: block;
  max-width: 100%;
  height: auto;
}

.app-detalhes {
  font-size: 0.875rem;
  color: var(--texto-suave);
}

.app-detalhes summary {
  cursor: pointer;
  color: var(--petroleo-medio);
}

.app-detalhes p {
  margin-top: 0.5rem;
}

/* A chave do 2FA, em grupos de quatro, para se escrever à mão sem enganos. */
.app-segredo {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  background-color: var(--petroleo-muito-claro);
  color: var(--petroleo-escuro);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  word-break: break-all;
}

/* O botão de terminar sessão vive dentro de um form, na navbar. */
.app-sair {
  margin: 0;
}

/*
 * A navbar tem fundo petróleo escuro. O `.app-secundario` normal é texto
 * petróleo sobre transparente — que ali fica escuro sobre escuro e
 * praticamente desaparece. Dentro do `.app-sair` inverte-se: contorno e
 * texto brancos, com um véu claro por trás para o botão se ler como botão.
 *
 * Ao passar o rato enche-se de branco. A navbar da empresa (que pode ter
 * cor da marca) não tem este botão, por isso o branco é sempre seguro.
 */
.app-sair .button.app-secundario {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
  color: #ffffff;
  font-weight: 600;
}

.app-sair .button.app-secundario:hover,
.app-sair .button.app-secundario:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--petroleo-escuro);
}

/* Tabela de duas colunas usada no ecrã da sessão. */
.box .table th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
  color: var(--texto-suave);
  width: 40%;
}

/* --------------------------------------------------------------------------
   19. Página de demonstração

   Só usada em /demo, para ver o tema. Nenhum ecrã real usa estas classes.
   -------------------------------------------------------------------------- */

.app-paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.app-amostra {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 5.5rem;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--borda);
}

.app-amostra-nome {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.app-amostra-hex {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  opacity: 0.85;
}

.app-amostra-petroleo-escuro { background-color: var(--petroleo-escuro); color: #ffffff; }
.app-amostra-petroleo        { background-color: var(--petroleo); color: #ffffff; }
.app-amostra-petroleo-medio  { background-color: var(--petroleo-medio); color: #ffffff; }
.app-amostra-petroleo-claro  { background-color: var(--petroleo-claro); color: var(--petroleo-escuro); }
.app-amostra-petroleo-muito-claro { background-color: var(--petroleo-muito-claro); color: var(--petroleo-escuro); }
.app-amostra-sucesso    { background-color: var(--sucesso); color: #ffffff; }
.app-amostra-aviso      { background-color: var(--aviso); color: #ffffff; }
.app-amostra-perigo     { background-color: var(--perigo); color: #ffffff; }
.app-amostra-informacao { background-color: var(--informacao); color: #ffffff; }

/* Moldura que simula um ecrã dentro da página de demonstração. */
.app-previsualizacao {
  background-color: var(--fundo);
  border: 1px dashed var(--borda);
  border-radius: 6px;
  padding: 2rem;
}

code {
  background-color: var(--petroleo-muito-claro);
  color: var(--petroleo);
  border-radius: 4px;
  font-size: 0.875em;
  padding: 0.15em 0.4em;
}

/* --------------------------------------------------------------------------
   20. Backoffice
   -------------------------------------------------------------------------- */

.app-navbar-utilizador {
  color: #dfeaec;
  font-size: 0.875rem;
}

.app-navbar-perfil {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.14);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Cabeçalho de coluna só para leitores de ecrã. */
.app-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app-alinhar-direita {
  text-align: right;
}

/* Marca discreta numa denúncia identificada, na lista. */
.app-etiqueta-identificada {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}

.app-paginacao {
  margin-top: 1.25rem;
}

.pagination-link.is-current {
  background-color: var(--petroleo);
  border-color: var(--petroleo);
  color: #ffffff;
}

/* Caminho de regresso à lista. */
.app-migalhas {
  font-size: 0.875rem;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}

.app-migalhas span[aria-hidden] {
  margin: 0 0.4rem;
}

/* Os três prazos, lado a lado. */
.app-prazos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.app-prazo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background-color: #fbfdfd;
}

.app-prazo-nome {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--petroleo-escuro);
}

.app-prazo-data {
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

/* Conversa e notas. */
.app-conversa {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-mensagem {
  border: 1px solid var(--borda);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}

.app-mensagem-denunciante {
  border-left-color: var(--petroleo-claro);
  background-color: #fbfdfd;
}

.app-mensagem-gestor {
  border-left-color: var(--petroleo);
  background-color: var(--superficie);
}

.app-nota {
  border-left-color: var(--aviso);
  background-color: #fdfbf6;
}

.app-mensagem-cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font-size: 0.875rem;
}

.app-mensagem-autor {
  font-weight: 600;
  color: var(--petroleo-escuro);
}

/* Dentro de uma mensagem o texto já está numa caixa — não precisa de outra. */
.app-mensagem .app-texto-longo {
  background-color: transparent;
  border: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   21. Portal do denunciante
   -------------------------------------------------------------------------- */

/* Campos da referência e da palavra-passe: monoespaçados, para se copiar de um
   papel sem enganos. */
.input.app-credencial-campo {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
}

/* Os três estados que o denunciante vê. Sem contadores animados e sem
   gráficos: uma linha com três passos. */
.app-progresso {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.app-progresso-passo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--borda);
  border-top: 3px solid var(--borda);
  border-radius: 6px;
  background-color: #fbfdfd;
}

.app-progresso-passo.app-progresso-feito {
  border-top-color: var(--empresa-cor, var(--petroleo));
  background-color: var(--superficie);
}

.app-progresso-nome {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.app-progresso-feito .app-progresso-nome {
  color: var(--petroleo-escuro);
}

.app-progresso-data {
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   22. Anexos
   -------------------------------------------------------------------------- */

.app-anexos {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.app-anexo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--borda);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background-color: #fbfdfd;
}

.app-anexo .app-icone {
  color: var(--texto-suave);
}

.app-anexo-nome {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-anexo-meta {
  display: block;
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

/* O input de ficheiro do browser, com o mesmo aspeto dos outros campos. */
.input.app-ficheiro {
  height: auto;
  padding: 0.55rem 0.7rem;
  line-height: 1.4;
}

.input.app-ficheiro::file-selector-button {
  font: inherit;
  color: var(--petroleo);
  background-color: var(--petroleo-muito-claro);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  margin-right: 0.75rem;
  cursor: pointer;
}

.input.app-ficheiro::file-selector-button:hover {
  background-color: #d6e6e9;
}

/* --------------------------------------------------------------------------
   23. Administração
   -------------------------------------------------------------------------- */

/* Formulário de uma linha dentro de uma célula de tabela. */
.app-linha-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.app-logo-atual {
  max-height: 3.5rem;
  max-width: 100%;
  width: auto;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 0.35rem;
  background-color: #ffffff;
}

/* --------------------------------------------------------------------------
   24. Números da plataforma

   Somas, não um dashboard. Sem gráficos e sem contadores animados (§13.5).
   -------------------------------------------------------------------------- */

.app-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.app-numero {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background-color: var(--superficie);
}

.app-numero-destaque {
  border-color: var(--petroleo-claro);
  background-color: var(--petroleo-muito-claro);
}

.app-numero-valor {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--petroleo-escuro);
  line-height: 1.2;
}

.app-numero-nome {
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

/* Etiqueta de empresa na lista global de utilizadores. */
.app-empresa-etiqueta {
  display: inline-block;
  margin: 0 0.3rem 0.3rem 0;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--borda);
  border-radius: 4px;
  font-size: 0.8125rem;
  background-color: #fbfdfd;
}

/* --------------------------------------------------------------------------
   25. Impressão
   -------------------------------------------------------------------------- */

/* O ecrã da referência e palavra-passe tem botão de imprimir (secção 14.1). */
@media print {
  .app-navbar,
  .app-footer,
  .app-nao-imprimir {
    display: none !important;
  }

  body {
    background-color: #ffffff;
  }

  .box,
  .card {
    border: 1px solid #999999;
  }
}

/* --------------------------------------------------------------------------
   26. Botões com ícone e PDF
   -------------------------------------------------------------------------- */

/*
   Ícone dentro de um botão. O `currentColor` no SVG faz o desenho seguir a cor
   do texto do botão, incluindo no estado :hover — por isso não há aqui
   nenhuma cor definida.
*/
.app-icone {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.app-botao-icone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/*
   O botão só com ícone tem de continuar a ter área suficiente para se acertar
   com o dedo. 2.25rem é o mínimo confortável num telemóvel.

   A classe é posta à mão em vez de se detetar a ausência de texto com
   :not(:has(...)): resolvia-se numa linha, mas ficava uma regra que ninguém
   consegue ler daqui a um ano.
*/
.app-botao-so-icone {
  min-width: 2.25rem;
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/*
   Ações na última coluna de uma tabela: ficam lado a lado e não esticam a
   linha. É um `span` com flex e não o `.app-acoes`, que no telemóvel passa a
   coluna única e aqui empilharia os botões dentro da célula.
*/
.app-acoes-linha {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
}