/* ===================================================================
   PRONORMA — folha de estilo única (sem frameworks, sem build).
   Paleta alinhada com a marca Estratégia Integrada (eintegrada.pt):
     azul institucional #1F3864 · azul médio #2E5FA3 · azul claro #D6E4F0
     acento laranja #E67E22 · neutros #F4F6F9 / #D0D7E3 / #1a1a1a
   =================================================================== */

:root {
  /* --- Marca ------------------------------------------------------- */
  --marca-900: #15294a;
  --marca-800: #1f3864;   /* azul institucional eintegrada */
  --marca-700: #244a80;
  --marca-600: #2e5fa3;   /* azul médio — ações primárias */
  --marca-500: #3f77c0;
  --marca-100: #d6e4f0;
  --marca-50:  #eef4fb;

  /* Era #c86a10, que a linha ao lado dizia ser "contraste AA" e não era: dava
     3.80:1 sobre branco e 3.42:1 sobre --laranja-bg, abaixo do mínimo de 4.5:1
     para texto. Escureceu para 5.86:1 / 5.26:1. Só é usado como cor de texto e
     de ícone (três sítios); os fundos e barras laranja usam --laranja-vivo,
     que não mudou. */
  --laranja: #9a5209;      /* acento (texto/ícones — 5.86:1 sobre branco) */
  --laranja-vivo: #e67e22; /* acento (fundos/barras) */
  --laranja-bg: #fdf1e3;

  /* --- Aliases retrocompatíveis (usados em CSS e inline nas páginas) --- */
  --azul-900: var(--marca-900);
  --azul-800: var(--marca-800);
  --azul-700: var(--marca-700);
  --azul-600: var(--marca-600);
  --azul-500: var(--marca-500);
  --azul-100: var(--marca-100);

  /* --- Neutros ----------------------------------------------------- */
  --cinza-900: #16202e;
  --cinza-700: #3f4855;
  --cinza-500: #5b6570;
  --cinza-300: #d0d7e3;
  --cinza-200: #e2e8f1;
  --cinza-100: #eef1f6;
  --cinza-50:  #f4f6f9;
  --branco: #ffffff;

  /* --- Semânticos -------------------------------------------------- */
  --verde: #14724f;
  --verde-bg: #e4f4ed;
  --amarelo: #8a5a06;
  --amarelo-bg: #fdf2dc;
  --vermelho: #b3261e;
  --vermelho-bg: #fbe9e8;

  /* --- Acentos de categoria (vista 360º) --------------------------- */
  /* Hue = categoria, não estado. O vermelho e o âmbar continuam reservados ao
     que exige ação; estes servem para distinguir secções entre si. */
  --teal: #0d6a71;
  --teal-bg: #e1f2f3;
  --teal-borda: #bfe1e3;
  --roxo: #6b4a91;
  --roxo-bg: #f1ecf7;
  --roxo-borda: #ded1ee;
  --verde-borda: #c7e6d9;
  --amarelo-borda: #f2ddb4;
  --vermelho-borda: #f0d2d0;
  --laranja-borda: #f4dcc0;

  /* --- Tabelas ------------------------------------------------------ */
  /* O contraste entre linhas. A zebra existia (--cinza-50), mas dava 1.08:1
     contra o branco — abaixo do que o olho apanha de relance, e foi por isso
     que o cliente pediu "zebra" a uma tabela que já a tinha. Passou a 1.15:1,
     e os quatro tons ficam em ordem crescente de escurecimento
     — zebra < hover < selecionada — para que passar o rato por cima de uma
     linha PAR continue a notar-se. O cabeçalho é mais escuro que a zebra. */
  --cabeca-tabela: #f1f5fb;
  --linha-zebra: #f8fafd;
  --linha-hover: #eaf2fc;
  --linha-selecionada: #c3d9f3;

  /* --- Forma e profundidade ---------------------------------------- */
  --raio: 8px;
  --raio-g: 12px;
  --sombra: 0 1px 2px rgba(21, 41, 74, .05), 0 1px 3px rgba(21, 41, 74, .06);
  --sombra-m: 0 2px 4px rgba(21, 41, 74, .06), 0 8px 20px -8px rgba(21, 41, 74, .16);
  --sombra-g: 0 24px 60px -12px rgba(21, 41, 74, .35);
  --transicao: .16s cubic-bezier(.4, 0, .2, 1);
  --largura-lateral: 248px;
  /* Largura útil do conteúdo. A área principal centra-se nesta medida e a
     barra de topo alinha com ela, para o ecrã não ficar todo encostado à
     esquerda em monitores largos. */
  --largura-conteudo: 1600px;
}

* { box-sizing: border-box; }

/* O atributo `hidden` tem de vencer sempre qualquer `display` definido
   por classe (ex.: `.ecra-auth { display: flex }`), senão os dois
   ecrãs (login e aplicação) ficam visíveis ao mesmo tempo. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cinza-900);
  background: var(--cinza-50);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5em; font-weight: 650; letter-spacing: -.01em; }

button { font-family: inherit; }

a { color: var(--marca-600); text-decoration: none; }
a:hover { color: var(--marca-700); }

/* Anel de foco consistente e visível em todo o portal (teclado). */
:focus-visible {
  outline: 2px solid var(--marca-600);
  outline-offset: 2px;
  border-radius: 4px;
}
.barra-lateral :focus-visible { outline-color: var(--branco); }

/* Texto só para leitores de ecrã. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Atalho "saltar para o conteúdo" (acessibilidade por teclado). */
.link-salto {
  position: absolute; left: .5rem; top: -3rem;
  z-index: 300;
  background: var(--branco); color: var(--marca-800);
  padding: .55em 1em; border-radius: var(--raio);
  font-size: .85rem; font-weight: 600;
  box-shadow: var(--sombra-m);
  transition: top var(--transicao);
}
.link-salto:focus { top: .5rem; }

/* --- Botões ---------------------------------------------------------- */

.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: .55em 1.05em;
  border-radius: var(--raio);
  border: 1px solid transparent;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transicao), border-color var(--transicao),
              color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.botao:active:not(:disabled) { transform: translateY(.5px); }

.botao-primario {
  background: linear-gradient(180deg, var(--marca-500), var(--marca-600));
  color: var(--branco);
  border-color: var(--marca-700);
  box-shadow: 0 1px 2px rgba(21, 41, 74, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.botao-primario:hover {
  background: linear-gradient(180deg, var(--marca-600), var(--marca-700));
  box-shadow: 0 3px 10px -2px rgba(46, 95, 163, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.botao-secundario { background: var(--branco); color: var(--marca-800); border-color: var(--cinza-300); box-shadow: 0 1px 1px rgba(21, 41, 74, .04); }
.botao-secundario:hover { background: var(--marca-50); border-color: var(--marca-500); color: var(--marca-700); }

.botao-perigo { background: var(--branco); color: var(--vermelho); border-color: #e7c3c0; }
.botao-perigo:hover { background: var(--vermelho-bg); border-color: var(--vermelho); }

.botao-perigo-solido { background: var(--vermelho); color: var(--branco); }
.botao-perigo-solido:hover { background: #971f18; }

.botao-discreto { background: none; color: var(--cinza-500); }
.botao-discreto:hover { background: var(--cinza-100); color: var(--cinza-900); }

.botao-bloco { width: 100%; }
.botao-pequeno { padding: .35em .7em; font-size: .8rem; }
.botao:disabled { opacity: .55; cursor: not-allowed; }

/* Botão em estado de espera: texto esbatido + anel a rodar. */
.botao-a-carregar { color: transparent !important; pointer-events: none; }
.botao-a-carregar::after {
  content: '';
  position: absolute;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  color: var(--branco);
  animation: rodar .6s linear infinite;
}
.botao-secundario.botao-a-carregar::after,
.botao-perigo.botao-a-carregar::after { color: var(--cinza-700); }

@keyframes rodar { to { transform: rotate(360deg); } }

/* --- Ecrã de autenticação -------------------------------------------- */

.ecra-auth {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(46, 95, 163, .55), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(230, 126, 34, .18), transparent 60%),
    linear-gradient(155deg, var(--marca-900), var(--marca-800) 60%, #112039);
  padding: 1.5rem;
}

.cartao-auth {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--branco);
  border-radius: 16px;
  box-shadow: var(--sombra-g);
  padding: 2.25rem 2rem 1.75rem;
  animation: subir .3s ease both;
}

@keyframes subir {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.marca-auth { text-align: center; margin-bottom: 1.75rem; }
.marca-auth .marca-icone { margin: 0 auto .75rem; width: 44px; height: 44px; border-radius: 12px; }
.marca-auth .marca-icone svg { width: 24px; height: 24px; }
.marca-nome {
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--marca-800);
}
.marca-tagline { display: block; font-size: .78rem; color: var(--cinza-500); margin-top: .3rem; }

.form-auth h1 { font-size: 1.05rem; text-align: center; color: var(--cinza-900); }
.form-auth label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--cinza-700);
  margin-bottom: .9rem;
}
.form-auth input {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .65em .75em;
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  font-size: .95rem;
  font-family: inherit;
  color: var(--cinza-900);
  background: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.form-auth input:focus,
.form-auth input:focus-visible {
  outline: none;
  border-color: var(--marca-600);
  box-shadow: 0 0 0 3px rgba(46, 95, 163, .16);
}
.form-auth input[name="codigo"] {
  text-align: center;
  letter-spacing: .5em;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.rodape-auth {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cinza-200);
  text-align: center;
  font-size: .72rem;
  color: var(--cinza-500);
}

.texto-ajuda { font-size: .82rem; color: var(--cinza-500); text-align: center; margin: -.25rem 0 1.1rem; }

.mensagem-erro {
  display: flex;
  gap: .5em;
  background: var(--vermelho-bg);
  color: var(--vermelho);
  font-size: .82rem;
  padding: .65em .8em;
  border-radius: var(--raio);
  border: 1px solid #f0d2d0;
  margin-bottom: 1rem;
}
.mensagem-erro::before { content: '!'; font-weight: 700; flex-shrink: 0; }

.mensagem-sucesso {
  display: flex;
  gap: .5em;
  background: var(--verde-bg);
  color: var(--verde);
  font-size: .82rem;
  padding: .65em .8em;
  border-radius: var(--raio);
  border: 1px solid #cfe7d5;
  margin-bottom: 1rem;
}
.mensagem-sucesso::before { content: '✓'; font-weight: 700; flex-shrink: 0; }

/* --- Palavra-passe ---------------------------------------------------- */

/* Ligação disfarçada de botão: precisa de ser <button> por acessibilidade
   (não navega para nenhum sítio), mas deve ler-se como uma ligação. */
.botao-ligacao {
  background: none;
  border: 0;
  padding: 0;
  color: var(--marca-600);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.botao-ligacao:hover { color: var(--marca-800); }

.rodape-form-auth { text-align: center; margin: .9rem 0 0; }

.forca-password { margin: -.3rem 0 1rem; }
.forca-barra {
  height: 5px;
  background: var(--cinza-200);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .35rem;
}
.forca-barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--vermelho);
  transition: width .18s ease, background-color .18s ease;
}
.forca-texto { font-size: .76rem; color: var(--cinza-500); }
/* A cor acompanha o nível, para o sinal ser percetível sem ler o texto —
   mas o texto existe sempre, porque a cor sozinha não é acessível. */
.forca-password[data-nivel="2"] .forca-barra span { background: var(--amarelo); }
.forca-password[data-nivel="3"] .forca-barra span { background: var(--verde); }
.forca-password[data-nivel="4"] .forca-barra span { background: var(--verde); }

.password-temporaria { text-align: center; margin: 1rem 0; }
.password-temporaria code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  letter-spacing: .06em;
  padding: .6rem 1rem;
  background: var(--cinza-100);
  border: 1px dashed var(--cinza-300);
  border-radius: var(--raio);
  user-select: all;   /* um clique seleciona tudo, para copiar sem erros */
}

/* Duas colunas que colapsam numa só em ecrã estreito. */
.grelha-dois {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem;
  align-items: start;
}

.lista-definicoes { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; }
.lista-definicoes dt { font-size: .78rem; color: var(--cinza-500); }
.lista-definicoes dd { margin: 0; font-size: .88rem; }

/* --- Calendário -------------------------------------------------------- */

/* Uma coluna por mês, com os eventos dentro. Um mês com sete prazos vê-se pela
   altura da coluna, o que é a pergunta que o calendário existe para responder:
   onde é que se acumula trabalho. */
.grelha-calendario {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}
.grelha-calendario.grelha-compacta { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.mes-calendario {
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio);
  background: var(--branco);
  display: flex;
  flex-direction: column;
  min-height: 90px;
}
.mes-calendario.mes-vazio { background: var(--cinza-100); border-style: dashed; }
.mes-calendario.mes-atual { border-color: var(--marca-600); box-shadow: 0 0 0 2px rgba(31, 56, 100, .08); }

.mes-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--cinza-200);
}
.mes-cabecalho h3 { margin: 0; font-size: .8rem; color: var(--marca-800); }
.mes-contagem { font-size: .7rem; color: var(--cinza-500); }
.mes-contagem em { color: var(--vermelho); font-style: normal; font-weight: 600; }
.mes-eventos { padding: .55rem .6rem; display: flex; flex-direction: column; gap: .3rem; }
.mes-sem-eventos { margin: 0; padding: .5rem .3rem; color: var(--cinza-300); font-size: .8rem; text-align: center; }

.evento-calendario {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  padding: .3rem .35rem;
  border-radius: 5px;
  text-decoration: none;
  color: var(--cinza-900);
  font-size: .76rem;
  line-height: 1.35;
  transition: background-color var(--transicao);
}
.evento-calendario:hover { background: var(--cinza-100); }
.evento-dia {
  flex-shrink: 0;
  min-width: 1.5em;
  text-align: right;
  font-weight: 700;
  color: var(--cinza-500);
  font-variant-numeric: tabular-nums;
}
.evento-corpo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.evento-titulo {
  font-weight: 600; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.evento-detalhe { color: var(--cinza-500); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Trimestre em foco (dashboard e ecrã do calendário): três meses largos, com o
   título em até duas linhas e o detalhe também em duas. */
.grelha-calendario.grelha-trimestre { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grelha-trimestre .mes-calendario { min-height: 150px; }
.grelha-trimestre .mes-cabecalho { padding: .7rem .95rem; }
.grelha-trimestre .mes-cabecalho h3 { font-size: .92rem; }
.grelha-trimestre .mes-eventos { padding: .6rem .7rem; gap: .35rem; }
.grelha-trimestre .evento-calendario { font-size: .82rem; padding: .4rem .5rem; gap: .55rem; }
.grelha-trimestre .evento-detalhe {
  font-size: .76rem; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.grelha-trimestre .evento-dia { min-width: 1.7em; font-size: .9rem; }
.evento-extra { display: none; }
.mes-expandido .evento-extra { display: flex; }
.mes-ver-mais {
  align-self: flex-start; margin: .15rem 0 0 .4rem; padding: .25rem .55rem;
  border: 1px dashed var(--cinza-300); border-radius: 999px; background: none;
  font: inherit; font-size: .75rem; font-weight: 600; color: var(--marca-600); cursor: pointer;
}
.mes-ver-mais:hover { background: var(--marca-50); border-style: solid; }
.mes-cabecalho h3 small { font-weight: 500; color: var(--cinza-500); }
.mes-selo-atual {
  margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px;
  background: var(--marca-600); color: var(--branco);
  font-size: .62rem; font-weight: 600; letter-spacing: .02em; vertical-align: middle;
}
@media (max-width: 900px) {
  .grelha-calendario.grelha-trimestre { grid-template-columns: 1fr; }
}
.evento-marca { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; margin-top: .35em; }

.evento-atrasado { background: var(--vermelho-bg); }
.evento-atrasado .evento-dia { color: var(--vermelho); }
/* Concluído continua visível mas discreto: serve de histórico do ano, e é isso
   que se mostra a um auditor que pergunta "o que fizeram em março?". */
.evento-concluido { opacity: .55; }
.evento-concluido .evento-titulo { text-decoration: line-through; }

/* Cores por tipo de evento — as mesmas do CORES_TIPO em calendario.js */
[data-cor="azul"]      { background-color: var(--marca-600); }
[data-cor="laranja"]   { background-color: var(--laranja-vivo, #e67e22); }
[data-cor="vermelho"]  { background-color: var(--vermelho); }
[data-cor="amarelo"]   { background-color: var(--amarelo); }
[data-cor="roxo"]      { background-color: #7d5ba6; }
[data-cor="verde"]     { background-color: var(--verde); }
[data-cor="turquesa"]  { background-color: #1a9e8f; }
[data-cor="neutro"]    { background-color: var(--cinza-300); }

.cartao-calendario { padding: 1.15rem 1.3rem; }
@media (max-width: 640px) { .cartao-calendario { padding: 1rem; } }

.barra-calendario {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem 1.2rem;
  flex-wrap: wrap;
}
.controlos-calendario { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.resumo-calendario { display: flex; gap: .9rem; font-size: .8rem; color: var(--cinza-500); flex-wrap: wrap; }
.destaque-perigo { color: var(--vermelho); font-weight: 600; }
.destaque-aviso { color: var(--amarelo); font-weight: 600; }

.legenda-calendario { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.chip-legenda {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border: 1px solid var(--cinza-200);
  border-radius: 999px;
  background: var(--branco);
  font: inherit;
  font-size: .72rem;
  color: var(--cinza-500);
  cursor: pointer;
}
.chip-legenda.chip-ativo { color: var(--cinza-900); border-color: var(--cinza-300); }
.chip-legenda:not(.chip-ativo) { opacity: .45; }
.chip-marca { width: 8px; height: 8px; border-radius: 50%; }

.lista-proximos { list-style: none; margin: 0; padding: 0; }
.lista-proximos a {
  display: flex; align-items: center; gap: .6rem; padding: .45rem 0;
  border-bottom: 1px solid var(--cinza-100); text-decoration: none; color: inherit; font-size: .85rem;
}
.proximo-data { font-variant-numeric: tabular-nums; color: var(--cinza-500); flex-shrink: 0; }
.proximo-atrasado { color: var(--vermelho); font-weight: 600; }
.proximo-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Matriz de risco --------------------------------------------------- */

table.matriz-risco { border-collapse: separate; border-spacing: 3px; width: auto; margin: 0 auto; }
table.matriz-risco th {
  background: none;
  font-size: .7rem;
  color: var(--cinza-500);
  font-weight: 600;
  text-align: center;
  padding: .3rem;
  border: 0;
}
table.matriz-risco th.eixo-p { text-align: right; padding-right: .5rem; max-width: 86px; }
table.matriz-risco .canto-matriz { font-size: .6rem; color: var(--cinza-300); }
.eixo-valor { display: block; font-size: .8rem; color: var(--cinza-900); font-weight: 700; }
.eixo-rotulo { display: block; font-weight: 500; line-height: 1.15; font-size: .62rem; }

/* Células menores do que eram: a matriz é para se ler de relance, não para
   ocupar o ecrã. O que precisa de espaço é o texto dos descritores ao lado. */
.celula-matriz {
  width: 56px;
  height: 44px;
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
  padding: 0;
  position: relative;
  cursor: default;
}
.celula-nivel { position: absolute; top: 3px; right: 5px; font-size: .64rem; opacity: .55; }
.celula-contagem { font-size: 1.15rem; font-weight: 700; }

/* Bandas: o vermelho começa no limiar da entidade, não num valor nosso.
   A cor traduz a decisão que a entidade tomou sobre o que é inaceitável. */
[data-banda="baixo"] { background: var(--verde-bg); color: var(--verde); }
[data-banda="medio"] { background: #fdf3dc; color: #8a6100; }
[data-banda="alto"]  { background: var(--vermelho-bg); color: var(--vermelho); }

.pastilha-nivel {
  display: inline-block;
  min-width: 2em;
  padding: .1em .45em;
  border-radius: 4px;
  font-weight: 700;
  font-size: .8rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nivel-residual { margin-left: .35rem; font-size: .75rem; color: var(--verde); font-weight: 600; }

.lista-pendencias { margin: 0; padding-left: 1.1em; font-size: .75rem; color: var(--vermelho); line-height: 1.5; }

/* A variante em linha está definida mais abaixo, junto a `.separadores`, e com
   dois níveis de especificidade — ver o comentário lá. Estava aqui e não
   funcionava: `.separadores` vem depois no ficheiro e, com a mesma
   especificidade, a última regra ganhava. */
.badge-separador {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--vermelho);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.5;
}
.etiqueta-opcao { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--cinza-700); }
.acoes-painel { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.2rem; flex-wrap: wrap; }

/* --- Dashboard: faixa de indicadores ----------------------------------- */

/* Compacta de propósito. Um algarismo não justifica um cartão de 120 px, e
   ocupar meio ecrã com seis números empurrava o calendário para fora da vista. */
.faixa-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: .5rem;
  margin-bottom: 1.1rem;
}
.indicador {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .6rem .75rem;
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-left: 3px solid var(--cinza-300);
  border-radius: var(--raio);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.indicador:hover { box-shadow: var(--sombra); border-color: var(--cinza-300); }
.indicador-valor {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--marca-800);
  font-variant-numeric: tabular-nums;
}
.indicador-rotulo {
  font-size: .7rem;
  line-height: 1.3;
  color: var(--cinza-500);
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* A cor só aparece quando o número exige ação — assim quer dizer algo. */
.indicador-aviso { border-left-color: var(--amarelo); }
.indicador-aviso .indicador-valor { color: var(--amarelo); }
.indicador-perigo { border-left-color: var(--vermelho); background: var(--vermelho-bg); }
.indicador-perigo .indicador-valor { color: var(--vermelho); }

.bloco-dashboard { margin-bottom: 1.1rem; }

/* Duas colunas: a lista de atrasos é o que se lê, a matriz é o que se vê. */
.painel-duplo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  margin-bottom: 1.1rem;
}
@media (max-width: 900px) {
  .painel-duplo { grid-template-columns: 1fr; }
}

.rodape-cartao { margin: 1rem 0 0; font-size: .8rem; }
.rodape-cartao a { color: var(--marca-600); text-decoration: none; font-weight: 600; }
.rodape-cartao a:hover { text-decoration: underline; }

/* --- Dashboard: o que exige atenção ------------------------------------ */

.lista-atencao { list-style: none; margin: 0; padding: 0; }
.lista-atencao > li + li { border-top: 1px solid var(--cinza-100); }
.lista-atencao a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .1rem;
  text-decoration: none;
  color: inherit;
}
.lista-atencao a:hover { background: var(--cinza-100); }
.atencao-dias {
  flex-shrink: 0;
  min-width: 2.6em;
  text-align: center;
  padding: .2em .35em;
  border-radius: 4px;
  background: var(--vermelho-bg);
  color: var(--vermelho);
  font-weight: 700;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
.atencao-dias small { font-size: .65em; font-weight: 600; }
.atencao-corpo { display: flex; flex-direction: column; min-width: 0; }
.atencao-titulo {
  font-size: .87rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atencao-meta { font-size: .74rem; color: var(--cinza-500); }
.atencao-mais { padding: .5rem .1rem; font-size: .78rem; color: var(--cinza-500); }

/* Estado vazio que é boa notícia: verde em vez do cinzento habitual. */
.estado-vazio-bom { color: var(--verde); }
.estado-vazio-bom strong { color: var(--verde); }

/* --- Dashboard: matriz compacta e barra de estados --------------------- */

.matriz-wrap { display: flex; justify-content: center; overflow-x: auto; }

/* Matriz e escala lado a lado: as cores da matriz só significam algo com os
   descritores à vista.
   A coluna da matriz tem largura MÁXIMA fixa e não `auto`: com `auto`, o
   parágrafo de explicação dentro do cartão fazia a coluna crescer até dois
   terços do ecrã e a escala ficava com o texto todo cortado. A matriz tem
   largura própria conhecida (5 células + rótulos), por isso limita-se aí e o
   resto do espaço fica para a escala, que é texto e é quem precisa dele. */
.painel-matriz-escala {
  display: grid;
  grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .painel-matriz-escala { grid-template-columns: 1fr; }
}
.painel-matriz-escala h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--marca-800);
  margin: 1.3rem 0 .5rem;
}
.painel-matriz-escala h3:first-of-type { margin-top: .8rem; }

/* --- Escala em lista (em vez de tabela) -------------------------------- */

/* Uma tabela de quatro colunas numa coluna estreita corta o texto e trunca os
   botões. Em lista, o descritor tem a largura toda para respirar e o nível
   continua alinhado à esquerda para se poder percorrer de cima a baixo. */
.lista-escala { list-style: none; margin: 0; padding: 0; }
.lista-escala li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .5rem 0;
}
.lista-escala li + li { border-top: 1px solid var(--cinza-100); }
.lista-escala .pastilha-nivel { flex-shrink: 0; margin-top: .1rem; }
.escala-corpo { flex: 1; min-width: 0; }
.escala-corpo strong { display: block; font-size: .85rem; color: var(--cinza-900); }
.escala-corpo span { display: block; font-size: .78rem; color: var(--cinza-500); line-height: 1.45; }

/* Botão de ícone: o "Editar" repetido dez vezes só roubava largura ao texto. */
.botao-icone {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--cinza-500);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao), background-color var(--transicao);
}
.botao-icone svg { width: 15px; height: 15px; }
.botao-icone:hover { color: var(--marca-800); border-color: var(--cinza-300); background: var(--cinza-100); }
table.matriz-compacta { border-spacing: 2px; }
table.matriz-compacta .celula-matriz { width: 46px; height: 38px; }
table.matriz-compacta .celula-contagem { font-size: .95rem; }
table.matriz-compacta .celula-nivel { font-size: .56rem; top: 2px; right: 3px; }
table.matriz-compacta th { padding: .15rem; font-size: .66rem; }
table.matriz-compacta th.eixo-p { padding-right: .35rem; }

.barra-estados {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--cinza-100);
  margin: .6rem 0 .8rem;
}
.segmento-estado { display: block; min-width: 4px; }
.legenda-estados {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  margin: 0;
  padding: 0;
  font-size: .78rem;
  color: var(--cinza-500);
}
.legenda-estados li { display: flex; align-items: center; gap: .35rem; }
.legenda-estados strong { color: var(--cinza-900); }

/* --- Vista 360º do processo -------------------------------------------- */

/* Redesenhada em 2026-07-28 a pedido do cliente ("muito monocromática").
   O problema não era falta de cor por si: eram oito cartões brancos iguais
   seguidos de sete títulos cinzentos iguais, sem nada que dissesse onde uma
   secção acaba e a seguinte começa. A regra de cor da aplicação mantém-se
   intacta — vermelho e âmbar continuam a significar "isto exige ação" e só
   aparecem em valores. O que passou a ter cor é a *categoria*: cada secção tem
   um hue próprio no ícone, no título e no contador, e é por aí que se navega. */

.visao-360 { display: flex; flex-direction: column; gap: 1rem; }

/* Tokens de acento por categoria. Um único bloco, para não haver dois sítios a
   decidir a mesma cor — foi o que quase aconteceu com a matriz de risco. */
[data-acento="azul"]     { --acento: var(--marca-700); --acento-bg: var(--marca-50);    --acento-borda: var(--marca-100); }
[data-acento="laranja"]  { --acento: var(--laranja);   --acento-bg: var(--laranja-bg);  --acento-borda: var(--laranja-borda); }
[data-acento="roxo"]     { --acento: var(--roxo);      --acento-bg: var(--roxo-bg);     --acento-borda: var(--roxo-borda); }
[data-acento="teal"]     { --acento: var(--teal);      --acento-bg: var(--teal-bg);     --acento-borda: var(--teal-borda); }
[data-acento="ambar"]    { --acento: var(--amarelo);   --acento-bg: var(--amarelo-bg);  --acento-borda: var(--amarelo-borda); }
[data-acento="verde"]    { --acento: var(--verde);     --acento-bg: var(--verde-bg);    --acento-borda: var(--verde-borda); }
[data-acento="vermelho"] { --acento: var(--vermelho);  --acento-bg: var(--vermelho-bg); --acento-borda: var(--vermelho-borda); }

/* Cabeçalho de identidade. Ancora a vista: diz onde o processo vive no mapa,
   quem responde por ele e se a revisão está em dia, antes de qualquer número. */
.cabecalho-360 {
  background: linear-gradient(135deg, var(--marca-900) 0%, var(--marca-700) 55%, var(--marca-600) 100%);
  color: var(--branco);
  border-radius: var(--raio-g);
  padding: .95rem 1.15rem 1.05rem;
  /* Texto secundário sobre o azul. O tom tem de aguentar a ponta mais CLARA do
     gradiente (--marca-600), que é o pior caso: a #b7cde9 dava 3.94:1, abaixo
     do mínimo. A #cfdff1 dá 4.72:1 e continua a leitura-se como secundário. */
  --sobre-azul-fraco: #cfdff1;
}
.trilha-360 {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .95rem;
  color: var(--sobre-azul-fraco);
}
.trilha-360 strong { color: var(--branco); font-size: 1.05rem; font-weight: 700; }
/* Puramente decorativo (o elemento tem aria-hidden): não é texto informativo. */
.trilha-360-sep { color: #9db9dc; }

.chapas-360 { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.chapa-360 {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: .78rem;
  line-height: 1.3;
  color: var(--branco);
}
.chapa-360 svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .85; }
.chapa-360-rotulo { color: var(--sobre-azul-fraco); }
.chapa-360 strong { font-weight: 600; color: var(--branco); }
/* Revisão ultrapassada: é a única coisa do cabeçalho que pode exigir ação, por
   isso é a única que sai do azul. */
.chapa-360-alerta {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--vermelho);
}
.chapa-360-alerta .chapa-360-rotulo,
.chapa-360-alerta strong { color: var(--vermelho); }
.chapa-360-alerta svg { opacity: 1; }

.descricao-360 {
  margin: .8rem 0 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--sobre-azul-fraco);
  /* Medida de leitura. Uma descrição de processo num modal de 1320px sem limite
     de largura dá linhas de 150 caracteres, que se perdem ao mudar de linha. */
  max-width: 78ch;
}

/* Contadores agrupados dois a dois, com o tema à cabeça. */
.grupos-360 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .7rem;
}
.grupo-360 {
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.grupo-360 > header {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .7rem;
  background: var(--acento-bg);
  border-bottom: 1px solid var(--acento-borda);
  color: var(--acento);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.grupo-360 > header svg { width: 14px; height: 14px; flex-shrink: 0; }
.grupo-360-corpo { display: grid; grid-template-columns: 1fr 1fr; }
.metrica-360 { padding: .6rem .7rem .65rem; }
.metrica-360 + .metrica-360 { border-left: 1px solid var(--cinza-100); }
.metrica-360 .valor {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--marca-800);
  font-variant-numeric: tabular-nums;
}
.metrica-360 .rotulo {
  display: block;
  margin-top: .2rem;
  font-size: .67rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--cinza-500);
}
/* Um zero não é notícia: fica esbatido para o olho ir direto ao que não é zero. */
.metrica-360[data-estado="zero"] .valor { color: var(--cinza-300); }
.metrica-360[data-estado="aviso"] .valor { color: var(--amarelo); }
.metrica-360[data-estado="perigo"] .valor { color: var(--vermelho); }

/* Secções. Cada uma é um bloco fechado com moldura própria — antes eram títulos
   soltos e não se percebia a que secção pertencia uma tabela. */
.secao-360 {
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-g);
  overflow: hidden;
}
.cabeca-secao-360 {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  background: var(--acento-bg);
  border-bottom: 1px solid var(--acento-borda);
}
.icone-secao-360 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--acento);
  color: var(--branco);
}
.icone-secao-360 svg { width: 15px; height: 15px; }
.cabeca-secao-360 h3 {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--acento);
}
.contador-secao-360 {
  margin-left: auto;
  min-width: 1.7em;
  padding: .1em .5em;
  text-align: center;
  border-radius: 999px;
  background: var(--branco);
  border: 1px solid var(--acento-borda);
  color: var(--acento);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.corpo-360 { padding: .8rem; }
.vazio-360 { margin: 0; padding: .85rem .8rem; font-size: .82rem; color: var(--cinza-500); }
/* Dentro de uma secção a tabela já tem a moldura da secção: dispensa a sua. */
.secao-360 table.tabela-dados tbody tr:last-child td { border-bottom: none; }

/* --- Layout da aplicação --------------------------------------------- */

.ecra-app { display: flex; min-height: 100vh; }

.barra-lateral {
  width: var(--largura-lateral);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--marca-900), #11213c);
  color: var(--branco);
  display: flex;
  flex-direction: column;
  padding: 1.15rem 0 1rem;
  overflow-y: auto;
}

.marca-barra-lateral {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 0 1.1rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  margin-bottom: .85rem;
}
.marca-icone {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--marca-500), var(--marca-700));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.marca-icone svg { width: 18px; height: 18px; stroke: var(--branco); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.marca-texto strong { font-size: 1.02rem; font-weight: 700; letter-spacing: .05em; color: var(--branco); }
.marca-texto small { font-size: .66rem; color: rgba(255, 255, 255, .72); letter-spacing: .01em; }

/* --- Menu lateral por fases do PDCA ------------------------------------
   Cada bloco (Planear, Executar, Verificar, Melhorar) tem uma cor própria em
   --cor: pinta a letra da fase, a caixa dos ícones e o item ativo. Visão geral
   e Administração ficam neutros, para as quatro fases sobressaírem. */
.nav-principal { display: flex; flex-direction: column; gap: .15rem; padding: 0 .6rem; }
.nav-principal [hidden] { display: none !important; }

.nav-bloco { --cor: #a9bddb; display: flex; flex-direction: column; gap: 1px; }
.nav-bloco + .nav-bloco { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.nav-bloco[data-fase="planear"]   { --cor: #6aa8ff; }
.nav-bloco[data-fase="executar"]  { --cor: #3fd3a0; }
.nav-bloco[data-fase="verificar"] { --cor: #f7bd4f; }
.nav-bloco[data-fase="melhorar"]  { --cor: #c49dff; }

.nav-secao {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .6rem .3rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  cursor: default;
}
.nav-bloco[data-fase="planear"] .nav-secao,
.nav-bloco[data-fase="executar"] .nav-secao,
.nav-bloco[data-fase="verificar"] .nav-secao,
.nav-bloco[data-fase="melhorar"] .nav-secao { color: color-mix(in srgb, var(--cor) 80%, #fff); }
.nav-fase-letra {
  width: 18px; height: 18px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--cor);
  color: #11213c;
  font-size: .64rem; font-weight: 800; letter-spacing: 0;
}
.nav-clausulas {
  margin-left: auto;
  font-size: .62rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
  color: rgba(255, 255, 255, .38);
}

.nav-principal a {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255, 255, 255, .84);
  padding: .32rem .5rem;
  font-size: .845rem;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color var(--transicao), color var(--transicao);
}
.nav-texto { flex: 1; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.nav-icone-caixa {
  width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--cor) 15%, transparent);
  color: var(--cor);
  transition: background-color var(--transicao), color var(--transicao);
}
.nav-icone { width: 15px; height: 15px; flex-shrink: 0; }
.nav-selo-norma {
  flex-shrink: 0;
  padding: 0 .28rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: .56rem; font-weight: 600; letter-spacing: .03em;
  color: rgba(255, 255, 255, .55);
}

.nav-principal a:hover { background: rgba(255, 255, 255, .07); color: var(--branco); }
.nav-principal a:hover .nav-icone-caixa { background: color-mix(in srgb, var(--cor) 26%, transparent); }

.nav-principal a.ativo {
  background: color-mix(in srgb, var(--cor) 20%, transparent);
  color: var(--branco);
  font-weight: 600;
}
.nav-principal a.ativo .nav-icone-caixa { background: var(--cor); color: #11213c; }
.nav-principal a.ativo .nav-selo-norma { border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .85); }
.nav-principal a.ativo::before {
  content: '';
  position: absolute;
  left: -.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 64%;
  border-radius: 0 3px 3px 0;
  background: var(--cor);
}

.nav-rodape {
  margin-top: auto;
  padding: .9rem 1.1rem 0;
  font-size: .68rem;
  color: rgba(255, 255, 255, .45);
  border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Fundo escuro por trás do menu quando aberto em ecrã pequeno. */
.fundo-nav {
  position: fixed;
  inset: 0;
  background: rgba(21, 41, 74, .5);
  z-index: 140;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao);
}

.botao-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--cinza-700);
  cursor: pointer;
}
.botao-menu svg { width: 19px; height: 19px; }
.botao-menu:hover { background: var(--cinza-50); }

.area-principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.barra-topo {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 1rem;
  /* O padding lateral acompanha a centragem do conteúdo: assim o seletor de
     entidade fica alinhado com o título da página, em vez de flutuar sozinho
     na margem direita. */
  padding: .7rem max(1.6rem, calc((100% - var(--largura-conteudo)) / 2));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--cinza-200);
}

.breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--cinza-500);
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.breadcrumb-item { overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-item.atual { color: var(--cinza-900); font-weight: 600; }
.breadcrumb-sep { color: var(--cinza-300); flex-shrink: 0; }

.barra-topo-direita { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

.seletor-entidade { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--cinza-500); }
.seletor-entidade label { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; }
.seletor-entidade select,
.grupo-formulario select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6570' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 15px;
  padding-right: 2rem !important;
}
.seletor-entidade select {
  padding: .42em .6em;
  border-radius: var(--raio);
  border: 1px solid var(--cinza-300);
  font-size: .85rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--cinza-900);
  background-color: var(--branco);
  min-width: 210px;
  max-width: 260px;
  cursor: pointer;
}
.seletor-entidade select:hover { border-color: var(--marca-500); }

/* --- Contexto de entidade (barra de topo) ------------------------------
   Uma combo sozinha não dizia em que entidade se estava a trabalhar — era
   só mais um campo. Aqui o nome da entidade é o elemento dominante e o
   <select> cobre o bloco todo, invisível, a tratar da troca. */
.contexto-entidade {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .7rem .3rem .4rem;
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  background: var(--branco);
  max-width: 320px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.contexto-entidade:hover { border-color: var(--marca-500); box-shadow: var(--sombra); }
.contexto-entidade select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  appearance: none; border: 0; background: transparent;
}
.contexto-icone {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--marca-500);
  color: var(--branco);
  font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.contexto-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.contexto-rotulo {
  font-size: .6rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--cinza-500);
  white-space: nowrap;
}
.contexto-nome {
  font-size: .9rem; font-weight: 700; color: var(--cinza-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contexto-seta { width: 15px; height: 15px; flex: none; color: var(--cinza-500); }

/* Nas páginas de plataforma não se está a trabalhar numa entidade: o
   contexto recolhe para segundo plano em vez de desaparecer, porque a
   entidade escolhida continua a valer quando se voltar atrás. */
body[data-ambito="plataforma"] .contexto-entidade { opacity: .55; }
body[data-ambito="plataforma"] .contexto-icone { background: var(--cinza-500); }

/* Linha de ações de um formulário de carregamento: o que se descarrega à
   esquerda, o que se submete à direita, e ambos com a mesma altura. */
.acoes-importacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: .7rem; flex-wrap: wrap; margin-top: .9rem;
}
.acoes-importacao .botao { min-height: 40px; display: inline-flex; align-items: center; }
.acoes-importacao > :only-child { margin-left: auto; }

/* Zebra: para listas longas de leitura, em que o olho tem de seguir a linha
   até ao fim. Não é o estilo por omissão das tabelas da aplicação — só de
   quem precisa dela. */
.tabela-zebra tbody tr:nth-child(odd) { background: var(--cinza-50, #f7f9fc); }
.tabela-zebra tbody tr:hover { background: var(--marca-50, #eef4fc); }
.tabela-zebra td { vertical-align: top; }

.faixa-ambito {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .5rem 1.4rem;
  background: var(--marca-900, #13203a);
  color: #dfe8f5;
  font-size: .8rem;
}
.faixa-ambito strong { color: #fff; letter-spacing: .02em; }
.faixa-ambito[hidden] { display: none; }

/* O bloco de plataforma no menu é nosso, não do cliente: separa-se do resto
   por uma linha e um fundo ligeiramente distinto. */
.nav-bloco-plataforma { border-top: 1px solid rgba(255,255,255,.14); margin-top: .5rem; padding-top: .3rem; }

.utilizador-atual { display: flex; align-items: center; gap: .7rem; font-size: .84rem; color: var(--cinza-700); }

/* Avatar com iniciais, como nas contas Google/Microsoft. É um link para "A minha
   conta": quem clica na sua própria fotografia espera chegar à conta. */
.cartao-utilizador {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .2rem .55rem .2rem .2rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transicao);
}
.cartao-utilizador:hover { background: var(--cinza-100); }
.avatar-utilizador {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--marca-800);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  user-select: none;
}
.utilizador-atual #nome-utilizador-atual {
  font-weight: 600; color: var(--cinza-900);
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Em ecrã estreito fica só o avatar: o nome é o primeiro a poder desaparecer. */
@media (max-width: 720px) {
  .utilizador-atual #nome-utilizador-atual { display: none; }
  .cartao-utilizador { padding: .2rem; }
}

.conteudo {
  flex: 1;
  padding: 1.6rem;
  width: 100%;
  max-width: var(--largura-conteudo);
  /* Era isto que faltava — o conteúdo ficava encostado à esquerda.
     `margin-left/right` em vez de `margin-inline` por compatibilidade. */
  margin-left: auto;
  margin-right: auto;
}

.cabecalho-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.15rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.cabecalho-pagina h1 {
  position: relative;
  font-size: 1.45rem; color: var(--marca-900); margin-bottom: 0;
  padding-left: .8rem; letter-spacing: -.01em;
}
/* Acento à esquerda do título, na cor da fase do PDCA (a mesma do menu). */
.cabecalho-pagina h1::before {
  content: ''; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 4px; background: var(--cor-fase, var(--marca-600));
}
body[data-fase="planear"]   { --cor-fase: #3b82f6; }
body[data-fase="plataforma"] { --cor-fase: #2c5aa0; }
body[data-fase="executar"]  { --cor-fase: #10a37f; }
body[data-fase="verificar"] { --cor-fase: #e0a020; }
body[data-fase="melhorar"]  { --cor-fase: #8b5cf6; }
.cabecalho-pagina h2 { font-size: 1.08rem; color: var(--marca-800); margin-bottom: 0; }
.cabecalho-pagina p { margin: .35rem 0 0; padding-left: .8rem; color: var(--cinza-500); font-size: .85rem; max-width: 78ch; }
.cabecalho-secundario h2, .cabecalho-secundario p { padding-left: 0; }
.cabecalho-pagina .botao { margin-left: auto; }

/* Cabeçalho de nível 2 (listas dentro de separadores). */
.cabecalho-secundario { margin-bottom: .85rem; }

/* --- Cartões ---------------------------------------------------------- */

.cartao {
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  overflow: hidden;
}

/* `.cartao` não tem padding porque as tabelas que vivem lá dentro precisam de
   encostar às bordas. Quando o cartão tem texto, títulos ou listas, precisa de
   respiro — é para isso que serve esta variante. Antes disto o projeto resolvia
   o mesmo problema com `style="padding:1.1rem 1.3rem"` espalhado pelo JS, o que
   dava espaçamentos diferentes de ecrã para ecrã. */
.cartao-painel { padding: 1.15rem 1.3rem; }

/* Para cartões que têm uma barra de ferramentas encostada ao topo (`.barra-tabela`,
   com fundo e bordo próprios): o cartão fica sem padding e é o corpo que o leva,
   senão a barra deixava de tocar nas bordas e ficava a flutuar. */
.corpo-cartao { padding: 1.15rem 1.3rem; }
.corpo-cartao > *:first-child { margin-top: 0; }
.corpo-cartao > *:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .corpo-cartao { padding: 1rem; } }
.cartao-painel > h2,
.cartao-painel > h3 {
  margin: 0 0 .35rem;
  font-size: .95rem;
  color: var(--marca-800);
}
.cartao-painel > h2:not(:first-child),
.cartao-painel > h3:not(:first-child) { margin-top: 1.2rem; }
.cartao-painel > .texto-ajuda { margin-top: 0; margin-bottom: .9rem; }
.cartao-painel > *:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .cartao-painel { padding: 1rem; }
}

/* --- Barra de ferramentas da tabela (pesquisa + contagem) ------------- */

.barra-tabela {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--cinza-200);
  background: var(--cinza-50);
  flex-wrap: wrap;
}

.campo-pesquisa { position: relative; flex: 1; min-width: 180px; max-width: 340px; }
.campo-pesquisa svg {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--cinza-500); pointer-events: none;
}
.campo-pesquisa input {
  width: 100%;
  padding: .45em .7em .45em 2rem;
  border: 1px solid var(--cinza-300);
  border-radius: 999px;
  font-size: .84rem;
  font-family: inherit;
  background: var(--branco);
  color: var(--cinza-900);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo-pesquisa input:focus,
.campo-pesquisa input:focus-visible {
  outline: none;
  border-color: var(--marca-600);
  box-shadow: 0 0 0 3px rgba(46, 95, 163, .14);
}
.campo-pesquisa input::-webkit-search-cancel-button { cursor: pointer; }

.contagem-registos {
  margin-left: auto;
  font-size: .76rem;
  color: var(--cinza-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Tabelas ---------------------------------------------------------- */

.tabela-wrap { overflow-x: auto; }

table.tabela-dados { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.tabela-dados th {
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  /* Cabeçalho com fundo próprio e mais escuro que a zebra: é a linha de
     referência da tabela e tem de se distinguir das linhas de dados. */
  color: #4a5d78;
  background: var(--cabeca-tabela);
  padding: .8em 1em;
  border-bottom: 2px solid #dbe4f0;
  white-space: nowrap;
}
table.tabela-dados td {
  padding: .8em 1em;
  border-bottom: 1px solid #edf1f6;
  vertical-align: top;
  color: var(--cinza-900);
  line-height: 1.45;
}
/* Coluna que identifica o registo: mais peso e cor da marca. */
table.tabela-dados td.col-principal {
  font-weight: 600;
  color: var(--marca-800);
  min-width: 11rem;
}
table.tabela-dados td.col-principal a { color: inherit; }
/* Texto corrido (descrições): tom secundário, para não competir com o nome. */
table.tabela-dados td.col-texto { color: var(--cinza-500); font-size: .83rem; }
table.tabela-dados tbody tr:hover td.col-texto { color: var(--cinza-700); }
table.tabela-dados tbody tr:last-child td { border-bottom: none; }
table.tabela-dados tbody tr { transition: background-color .1s linear; }

/* Zebra: em tabelas com muitas colunas, ajuda o olho a seguir a linha até ao
   fim. Os tons vêm de `:root` (--linha-zebra / --linha-hover) e obedecem à
   ordem zebra < hover < selecionada — ver o comentário lá. */
table.tabela-dados:not(.tabela-editavel) tbody tr:nth-child(even) td { background: var(--linha-zebra); }
table.tabela-dados tbody tr:hover td { background: var(--linha-hover); }

/* Linha inteira clicável. O cursor e a seta dizem que dá para clicar; sem isso,
   uma linha que reage ao clique é uma armadilha para quem só quer selecionar
   texto. Mantém-se navegável por teclado (tabindex + Enter/Espaço no JS). */
table.tabela-dados tbody tr.linha-clicavel { cursor: pointer; }
table.tabela-dados tbody tr.linha-clicavel:focus-visible {
  outline: 2px solid var(--marca-600);
  outline-offset: -2px;
}
table.tabela-dados tbody tr.linha-clicavel td:first-child { position: relative; }
table.tabela-dados tbody tr.linha-clicavel:hover td:first-child::after {
  content: '›';
  position: absolute;
  left: .2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--marca-600);
  font-weight: 700;
}
table.tabela-dados tbody tr.linha-clicavel td:first-child { padding-left: 1.1rem; }

/* Coluna ordenável: seta só aparece na coluna ativa (ou em hover). */
th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel:hover { color: var(--marca-700); }
th.ordenavel .seta-ordem { display: inline-block; margin-left: .35em; opacity: 0; transition: opacity var(--transicao); }
th.ordenavel:hover .seta-ordem { opacity: .4; }
th.ordenavel[aria-sort] { color: var(--marca-700); }
th.ordenavel[aria-sort] .seta-ordem { opacity: 1; }

.col-acoes { white-space: nowrap; text-align: right; width: 1%; }
.col-acoes .botao { margin-left: .3em; }
/* Alinhadas com a primeira linha de texto da linha (as células são top). */
.grupo-acoes { display: inline-flex; align-items: center; gap: .15rem; margin: -6px 0; }
.grupo-acoes .botao { margin-left: 0; }

/* Ações de linha: botões «fantasma» — sem caixa em repouso, aparecem ao passar.
   Os de ícone são quadrados; o de remover fica vermelho só ao passar. */
.botao-acao {
  display: inline-flex; align-items: center; gap: .35em;
  height: 30px; padding: 0 .6rem;
  border: 1px solid transparent; border-radius: 7px;
  background: none;
  color: var(--marca-700);
  font: inherit; font-size: .8rem; font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.botao-acao svg { width: 15px; height: 15px; flex-shrink: 0; }
.botao-acao:hover { background: var(--marca-50); border-color: var(--marca-100); color: var(--marca-800); }
.botao-acao:focus-visible { outline: 2px solid var(--marca-600); outline-offset: 1px; }
.botao-acao-icone { width: 30px; padding: 0; justify-content: center; color: #6b7c95; }
.botao-acao-perigo { color: #a5aebc; }
.botao-acao-perigo:hover { background: var(--vermelho-bg); border-color: #efc9c5; color: var(--vermelho); }
tr:hover .botao-acao-icone:not(.botao-acao-perigo) { color: var(--marca-700); }
tr:hover .botao-acao-perigo { color: #c0605a; }

/* Célula com valor numérico/destaque. */
.celula-forte { font-weight: 600; }
.celula-muda { color: var(--cinza-500); }
/* Em repouso o "—" é discreto de propósito. Sobre o hover e sobre a linha
   selecionada o fundo escurece e o cinza-500 deixa de passar o mínimo de
   contraste (4.5:1) — nesses dois estados escurece com ele. */
table.tabela-dados tbody tr:hover .celula-muda,
table.tabela-dados tbody tr.linha-selecionada .celula-muda { color: var(--cinza-700); }

/* --- Tabela editável (ex.: Atividades/SIPOC de um Processo) ----------- */

table.tabela-editavel td { padding: .35em; vertical-align: middle; border-bottom: none; }
table.tabela-editavel th { white-space: normal; font-size: .68rem; }
table.tabela-editavel tbody tr:hover td { background: none; }
table.tabela-editavel input {
  width: 100%;
  min-width: 130px;
  padding: .42em .55em;
  border: 1px solid var(--cinza-300);
  border-radius: 6px;
  font-size: .82rem;
  font-family: inherit;
  background: var(--branco);
}
table.tabela-editavel input:focus,
table.tabela-editavel input:focus-visible {
  outline: none;
  border-color: var(--marca-600);
  box-shadow: 0 0 0 2px rgba(46, 95, 163, .16);
}
table.tabela-editavel .botao-perigo { padding: .15em .5em; line-height: 1.2; }

/* --- Estados vazios / carregamento ----------------------------------- */

.estado-vazio, .estado-carregar {
  padding: 2.75rem 1.25rem;
  text-align: center;
  color: var(--cinza-500);
  font-size: .88rem;
}
.estado-vazio svg { width: 34px; height: 34px; stroke: var(--cinza-300); margin-bottom: .6rem; }
.estado-vazio strong { display: block; color: var(--cinza-700); font-size: .95rem; margin-bottom: .25rem; }

/* Esqueleto de carregamento (substitui o texto "A carregar…"). */
.esqueleto {
  background: linear-gradient(90deg, var(--cinza-100) 25%, var(--cinza-200) 37%, var(--cinza-100) 63%);
  background-size: 400% 100%;
  animation: brilho 1.3s ease-in-out infinite;
  border-radius: 5px;
  height: .78rem;
}
@keyframes brilho { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.esq-titulo { height: 1.35rem; width: 240px; margin-bottom: .6rem; }
.esq-sub { height: .78rem; width: 380px; max-width: 80%; margin-bottom: 1.2rem; }
.esqueleto-linha {
  display: grid;
  grid-template-columns: 2.2fr 1.4fr 1fr 1fr;
  gap: 1rem;
  padding: .95em 1em;
  border-bottom: 1px solid var(--cinza-100);
}
.esqueleto-linha:last-child { border-bottom: none; }
.esqueleto-linha.cabeca .esqueleto { height: .62rem; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Selos / etiquetas de estado ------------------------------------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .2em .65em .2em .55em;
  border-radius: 999px;
  font-size: .735rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.selo::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.selo-neutro { background: var(--cinza-100); color: var(--cinza-700); border-color: var(--cinza-200); }
.selo-azul { background: var(--marca-50); color: var(--marca-700); border-color: var(--marca-100); }
.selo-verde { background: var(--verde-bg); color: var(--verde); border-color: #c7e6d9; }
.selo-amarelo { background: var(--amarelo-bg); color: var(--amarelo); border-color: #f2ddb4; }
.selo-vermelho { background: var(--vermelho-bg); color: var(--vermelho); border-color: #f0d2d0; }
.selo-laranja { background: var(--laranja-bg); color: var(--laranja); border-color: var(--laranja-borda); }
/* Roxo: usado para o risco, no calendário e nas constatações abertas para o
   tratar. Faltava — `seloTexto(..., 'roxo')` saía sem cor nenhuma. */
.selo-roxo { background: #f1ecf7; color: #6b4a91; border-color: #ded1ee; }

/* --- Separadores (tabs) ---------------------------------------------- */

.separadores {
  display: flex;
  gap: .15rem;
  border-bottom: 1px solid var(--cinza-200);
  margin-bottom: 1.25rem;
  overflow-x: auto;
}
.separadores button {
  background: none;
  border: none;
  padding: .6em 1em;
  font-size: .86rem;
  font-weight: 600;
  color: var(--cinza-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--transicao), border-color var(--transicao);
}
.separadores button:hover { color: var(--marca-700); }
.separadores button.ativo { color: var(--marca-700); border-bottom-color: var(--laranja-vivo); }

/* --- Controlo segmentado ----------------------------------------------- */

/* Para escolhas curtas dentro de uma barra (Ano / 1.º / 2.º semestre; risco
   inerente / residual). Não são separadores de navegação, são um interruptor de
   três posições — e um interruptor não deve parecer um conjunto de abas nem
   herdar o `overflow-x: auto` que as abas precisam.
   Dois níveis de especificidade de propósito: `.separadores` está definido
   acima e, com uma classe só, ganhava a esta variante pela ordem no ficheiro. */
.controlo-segmentado,
.separadores.separadores-inline {
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible;
  margin: 0;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--cinza-200);
  border-radius: 999px;
  background: var(--cinza-100);
}
.controlo-segmentado button,
.separadores.separadores-inline button {
  border: 0;
  margin: 0;
  padding: .35em .95em;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cinza-500);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao);
}
.controlo-segmentado button:hover,
.separadores.separadores-inline button:hover { color: var(--marca-800); }
.controlo-segmentado button.ativo,
.separadores.separadores-inline button.ativo {
  background: var(--branco);
  color: var(--marca-800);
  box-shadow: var(--sombra);
}

/* Passo de ano: ‹ 2026 › como um bloco só, para não parecerem três coisas. */
.navegador-ano {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  border: 1px solid var(--cinza-200);
  border-radius: 999px;
  background: var(--branco);
  padding: 2px;
}
.navegador-ano button {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--cinza-500);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao);
}
.navegador-ano button:hover { background: var(--cinza-100); color: var(--marca-800); }
.navegador-ano .ano-calendario {
  min-width: 3.4em;
  text-align: center;
  font-size: .92rem;
  font-weight: 700;
  color: var(--marca-800);
  font-variant-numeric: tabular-nums;
}

/* --- Modal ------------------------------------------------------------ */

.fundo-modal {
  position: fixed;
  inset: 0;
  background: rgba(21, 41, 74, .5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  overflow-y: auto;
  z-index: 200;
  animation: aparecer .14s ease both;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.caixa-modal {
  background: var(--branco);
  border-radius: var(--raio-g);
  width: 100%;
  /* Aproveita a largura disponível em vez de ficar uma coluna estreita no
     meio de um ecrã grande. `min()` garante que nunca transborda no telemóvel. */
  max-width: min(860px, 94vw);
  box-shadow: var(--sombra-g);
  animation: subir .18s ease both;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
/* Formulários com tabela editável (SIPOC, critérios, avaliações) e painéis de
   detalhe precisam de muito mais largura. */
.caixa-modal.modal-larga { max-width: min(1320px, 96vw); }
.caixa-modal.modal-estreita { max-width: min(460px, 94vw); }

/* O formulário é o filho direto da caixa: herda o layout em coluna para
   que o corpo faça scroll e o rodapé de ações fique sempre visível. */
.caixa-modal > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
}

.cabecalho-modal {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem .9rem;
  border-bottom: 1px solid var(--cinza-200);
}
.cabecalho-modal h2 { font-size: 1.05rem; color: var(--marca-800); margin: 0; }
.botao-fechar-modal {
  margin-left: auto;
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px;
  background: none; color: var(--cinza-500);
  font-size: 1.15rem; line-height: 1;
  cursor: pointer;
}
.botao-fechar-modal:hover { background: var(--cinza-100); color: var(--cinza-900); }

.corpo-modal { padding: 1.25rem 1.5rem; overflow-y: auto; }
.corpo-modal > .mensagem-erro:first-child { margin-top: 0; }
.texto-modal { margin: 0; font-size: .9rem; color: var(--cinza-700); }
.texto-modal strong { color: var(--cinza-900); }

.grupo-formulario { margin-bottom: 1rem; }
.grupo-formulario:last-child { margin-bottom: 0; }

/* Rótulo de um controlo composto (escala, multi, tabela): é texto e não <label>,
   porque um `for` só pode apontar para um controlo — ver o comentário em ui.js. */
.rotulo-campo {
  display: block;
  font-size: .79rem;
  font-weight: 600;
  color: var(--cinza-700);
  margin-bottom: .3rem;
}

/* --- Campos agrupados -------------------------------------------------- */

/* Diz visualmente que os campos lá dentro tratam do mesmo assunto (ex.: a que
   processo pertence isto e quem é o responsável — duas escolhas, uma decisão). */
.grupo-campos {
  margin: 0 0 1rem;
  border: 1px solid var(--acento-borda, var(--cinza-200));
  border-radius: var(--raio);
  background: var(--branco);
  overflow: hidden;
}
/* Cabeçalho da secção: banda com a cor de acento e um quadrado com o ícone — a
   mesma linguagem da vista 360º, para o formulário deixar de ser uma parede
   branca uniforme. A cor vem do [data-acento] no próprio grupo. */
.cabeca-grupo {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  background: var(--acento-bg, var(--cinza-50));
  border-bottom: 1px solid var(--acento-borda, var(--cinza-200));
}
.icone-grupo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--acento, var(--marca-700));
  color: var(--branco);
}
.icone-grupo svg { width: 15px; height: 15px; }
.cabeca-grupo h3 {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--acento, var(--marca-800));
}
.grupo-campos > .grupo-campos-corpo { padding: .9rem .8rem; }
.grupo-campos > .ajuda-grupo { padding: .55rem .8rem 0; margin: 0; }
/* Reaproveita a mesma grelha de duas colunas dos campos soltos. */
.grupo-campos-corpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; }
.grupo-campos-corpo > .grupo-formulario:last-child,
.grupo-campos-corpo > .grupo-formulario:nth-last-child(2) { margin-bottom: 0; }

/* --- Escala em botões (radio) ------------------------------------------ */

.grupo-escala { display: flex; gap: .35rem; flex-wrap: wrap; }
.opcao-escala {
  flex: 1 1 5.5rem;
  min-width: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .5rem .35rem;
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  background: var(--branco);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transicao), background-color var(--transicao), box-shadow var(--transicao);
}
/* O radio continua no DOM (teclado e leitores de ecrã), apenas não se vê. */
.opcao-escala input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.opcao-escala:hover { border-color: var(--marca-600); }
.opcao-escala:has(input:checked) {
  border-color: var(--marca-600);
  background: var(--marca-50);
  box-shadow: inset 0 0 0 1px var(--marca-600);
}
.opcao-escala:has(input:focus-visible) { outline: 2px solid var(--marca-600); outline-offset: 2px; }
.escala-valor {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--marca-800);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.escala-rotulo { font-size: .68rem; color: var(--cinza-500); line-height: 1.25; }
.opcao-escala:has(input:checked) .escala-rotulo { color: var(--marca-800); }

/* Em ecrã estreito, as opções passam a ocupar a linha toda — mas mantêm o
   algarismo em cima e o texto por baixo, sempre. Havia aqui um
   `flex-direction: row` que punha o número ao lado do texto abaixo dos 560 px, e
   ficavam dois formatos diferentes para a mesma coisa. */
@media (max-width: 560px) {
  .opcao-escala { flex-basis: calc(33.333% - .25rem); }
}

/* --- Ações em lote ----------------------------------------------------- */

/* Só aparece quando há seleção. Uma barra permanente com botões inertes é ruído,
   e uma barra que aparece diz por si que há algo escolhido. */
.barra-lote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .6rem .85rem;
  background: var(--marca-50);
  border-bottom: 1px solid var(--cinza-200);
}
.lote-contagem { font-size: .82rem; font-weight: 600; color: var(--marca-800); }
.lote-acoes { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.col-selecao { width: 2.4rem; text-align: center; padding-right: 0 !important; }
.col-selecao input { cursor: pointer; }
/* Selecionada tem de ganhar à zebra e ao hover — e ganha por vir depois no
   ficheiro com a mesma especificidade. A barra azul na primeira célula diz que
   é *escolha do utilizador*, e não apenas a linha onde está o rato. */
table.tabela-dados tbody tr.linha-selecionada td { background: var(--linha-selecionada); }
table.tabela-dados tbody tr.linha-selecionada td:first-child {
  box-shadow: inset 3px 0 0 var(--marca-600);
}

/* --- Progresso de estado ----------------------------------------------- */

/* Substitui o dropdown de estado. Mostra a etapa atual e o que falta, sem dar a
   ideia de que se pode escolher — porque não se pode: o estado é consequência
   do que já foi feito e aprovado. */
.progresso-estado {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin-bottom: 1rem;
}
.progresso-estado .etapa {
  position: relative;
  padding: .32rem .8rem .32rem 1.15rem;
  font-size: .74rem;
  font-weight: 600;
  background: var(--cinza-100);
  color: var(--cinza-500);
  clip-path: polygon(0 0, calc(100% - .5rem) 0, 100% 50%, calc(100% - .5rem) 100%, 0 100%, .5rem 50%);
}
.progresso-estado .etapa:first-child {
  padding-left: .8rem;
  clip-path: polygon(0 0, calc(100% - .5rem) 0, 100% 50%, calc(100% - .5rem) 100%, 0 100%);
}
.progresso-estado .etapa-feita { background: var(--verde-bg); color: var(--verde); }
.progresso-estado .etapa-atual { background: var(--marca-800); color: #fff; }
.progresso-estado .etapa-futura { background: var(--cinza-100); color: var(--cinza-300); }
.grupo-formulario label {
  display: block;
  font-size: .79rem;
  font-weight: 600;
  color: var(--cinza-700);
  margin-bottom: .3rem;
}
.grupo-formulario input,
.grupo-formulario select,
.grupo-formulario textarea {
  width: 100%;
  padding: .55em .7em;
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  font-size: .88rem;
  font-family: inherit;
  color: var(--cinza-900);
  background-color: var(--branco);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.grupo-formulario input:focus,
.grupo-formulario select:focus,
.grupo-formulario textarea:focus,
.grupo-formulario input:focus-visible,
.grupo-formulario select:focus-visible,
.grupo-formulario textarea:focus-visible {
  outline: none;
  border-color: var(--marca-600);
  box-shadow: 0 0 0 3px rgba(46, 95, 163, .14);
}
.grupo-formulario input::placeholder,
.grupo-formulario textarea::placeholder { color: #9aa3b0; }
.grupo-formulario textarea { min-height: 5.5em; resize: vertical; }
.grupo-formulario .texto-campo-ajuda { font-size: .74rem; color: var(--cinza-500); margin-top: .3rem; }
/* Grelha dos campos do formulário genérico (abrirFormulario): duas colunas,
   previsível e igual em todos os modais. Substitui o antigo `inline-block` com
   `nth-of-type(odd)`, que dependia do espaço em branco entre elementos e punha
   campos "meia" à largura toda quando a conta não batia certo. Aqui um campo
   "meia" ocupa uma coluna e um campo "total" (ou um grupo) ocupa a linha toda. */
.campos-grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.campos-grelha > .grupo-formulario,
.grupo-campos-corpo > .grupo-formulario {
  /* Dentro da grelha quem manda na largura são as colunas. */
  width: auto;
  margin-right: 0;
  display: block;
}
.campos-grelha > .grupo-formulario[data-largura="total"],
.campos-grelha > .grupo-campos,
.grupo-campos-corpo > .grupo-formulario[data-largura="total"] { grid-column: 1 / -1; }

/* Campo de seleção múltipla (tipo 'multi'): lista de caixas em colunas. */
.grupo-escolhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .35rem .9rem;
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  padding: .7rem .8rem;
  background: var(--cinza-50);
}
.grupo-escolhas .escolha {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  font-size: .84rem;
  font-weight: 400;
  color: var(--cinza-900);
  cursor: pointer;
}
.grupo-escolhas .escolha input { width: auto; margin: .2rem 0 0; flex-shrink: 0; }

.linha-formulario { display: flex; gap: 1rem; }
.linha-formulario .grupo-formulario { flex: 1; min-width: 0; }

/* Rodapé fixo: em formulários longos os botões ficam sempre visíveis. */
.acoes-modal {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: .9rem 1.5rem 1.1rem;
  border-top: 1px solid var(--cinza-200);
  background: var(--cinza-50);
  border-radius: 0 0 var(--raio-g) var(--raio-g);
}

/* --- Toasts ----------------------------------------------------------- */

.area-toasts {
  position: fixed;
  bottom: 1.35rem;
  right: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  z-index: 300;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: .55em;
  background: var(--cinza-900);
  color: var(--branco);
  padding: .75em 1.05em;
  border-radius: 10px;
  font-size: .85rem;
  box-shadow: var(--sombra-m);
  max-width: 340px;
  animation: entrar-toast .22s cubic-bezier(.2, .9, .3, 1) both;
}
.toast::before { font-weight: 700; flex-shrink: 0; }
.toast-sucesso { background: var(--verde); }
.toast-sucesso::before { content: '✓'; }
.toast-erro { background: var(--vermelho); }
.toast-erro::before { content: '!'; }
.toast-saida { animation: sair-toast .2s ease forwards; }

@keyframes entrar-toast {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes sair-toast {
  to { opacity: 0; transform: translateX(12px); }
}

/* --- Dashboard -------------------------------------------------------- */

.grelha-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: .9rem;
  margin-bottom: 1.6rem;
}
.cartao-metrica {
  padding: 1.1rem 1.2rem;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
a.cartao-metrica:hover {
  border-color: var(--marca-100);
  box-shadow: var(--sombra-m);
  transform: translateY(-1px);
}
.cartao-metrica .valor {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--marca-800);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cartao-metrica .rotulo { font-size: .79rem; color: var(--cinza-500); margin-top: .3rem; }

/* --- Sino de avisos ---------------------------------------------------- */

.botao-avisos {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--cinza-700);
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao);
}
.botao-avisos:hover { background: var(--cinza-50); border-color: var(--marca-100); color: var(--marca-700); }
.botao-avisos svg { width: 18px; height: 18px; }

/* Contador de avisos não lidos. */
.marca-avisos {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--vermelho);
  color: var(--branco);
  font-size: .66rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--branco);
}

.lista-avisos { display: flex; flex-direction: column; gap: .7rem; }

.aviso {
  border: 1px solid var(--cinza-200);
  border-left: 3px solid var(--cinza-300);
  border-radius: var(--raio);
  padding: .8rem .95rem;
  background: var(--cinza-50);
}
.aviso-nao-lido { background: var(--branco); border-left-color: var(--marca-600); }

.aviso-topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.aviso-entidade { font-size: .76rem; font-weight: 600; color: var(--cinza-700); }
.aviso-data { margin-left: auto; font-size: .76rem; color: var(--cinza-500); }
.aviso-titulo { display: block; font-size: .9rem; color: var(--cinza-900); }
.aviso-mensagem { margin: .4rem 0 .5rem; font-size: .84rem; color: var(--cinza-700); white-space: pre-wrap; }
.aviso-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  font-size: .74rem; color: var(--cinza-500);
}

/* --- Dashboard: secções e cartões com alerta --------------------------- */

.titulo-secao-dashboard {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cinza-500);
  margin: 0 0 .6rem;
}

/* Cartões que mudam de cor quando há algo em atraso — constatações paradas
   há meses são a próxima não conformidade da auditoria de certificação. */
.cartao-metrica-aviso { border-color: #f2ddb4; background: linear-gradient(180deg, var(--amarelo-bg), var(--branco) 65%); }
.cartao-metrica-aviso .valor { color: var(--amarelo); }
.cartao-metrica-perigo { border-color: #f0d2d0; background: linear-gradient(180deg, var(--vermelho-bg), var(--branco) 65%); }
.cartao-metrica-perigo .valor { color: var(--vermelho); }

/* --- Fluxo de fases da constatação ------------------------------------- */

.fase-constatacao {
  border: 1px solid var(--cinza-200);
  border-left: 3px solid var(--cinza-300);
  border-radius: var(--raio);
  padding: .8rem .95rem;
  margin-bottom: .6rem;
  background: var(--cinza-50);
}
.fase-constatacao.fase-preenchida {
  background: var(--branco);
  border-left-color: var(--verde);
}

.fase-cabecalho { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fase-cabecalho strong { font-size: .88rem; color: var(--cinza-900); }

.fase-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--marca-100);
  color: var(--marca-800);
  font-size: .74rem;
  font-weight: 700;
}
.fase-preenchida .fase-numero { background: var(--verde-bg); color: var(--verde); }

.fase-texto { margin: .6rem 0 .3rem; font-size: .86rem; color: var(--cinza-700); white-space: pre-wrap; }
.fase-rubrica { margin: 0; font-size: .76rem; color: var(--cinza-500); }

/* --- Painel de anexos -------------------------------------------------- */

.painel-anexos {
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-g);
  padding: 1rem 1.1rem;
  background: var(--cinza-50);
}
.painel-anexos-topo { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.painel-anexos-topo h3 { margin: 0; font-size: .9rem; color: var(--marca-800); }

.form-anexo {
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio);
  padding: .85rem .9rem;
  margin-bottom: .9rem;
}
.form-anexo input[type="file"] {
  width: 100%;
  padding: .45em .5em;
  border: 1px dashed var(--cinza-300);
  border-radius: var(--raio);
  font-size: .82rem;
  font-family: inherit;
  background: var(--cinza-50);
}
.form-anexo input[type="file"]::file-selector-button {
  margin-right: .7em;
  padding: .35em .8em;
  border: 1px solid var(--cinza-300);
  border-radius: 6px;
  background: var(--branco);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--cinza-700);
  cursor: pointer;
}
.form-anexo .grupo-formulario { margin-bottom: .7rem; }

/* --- Normas e Módulos -------------------------------------------------- */

.grelha-normas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
}

.cartao-norma { padding: 1.15rem 1.25rem 1rem; display: flex; flex-direction: column; }
.cartao-norma-ativa { border-color: var(--marca-100); box-shadow: var(--sombra-m); }

.cartao-norma-topo {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .6rem;
}
.cartao-norma-topo h2 { font-size: 1rem; color: var(--marca-800); margin: 0; flex: 1; }

.cartao-norma-modulos { margin: 0 0 .85rem; font-size: .82rem; color: var(--cinza-500); line-height: 1.45; }

.cartao-norma-meta { margin: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.cartao-norma-meta div { display: flex; flex-direction: column; gap: .1rem; }
.cartao-norma-meta dt {
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cinza-500);
}
.cartao-norma-meta dd { margin: 0; font-size: .84rem; font-weight: 600; color: var(--cinza-900); }

.cartao-norma-aviso {
  margin: 0 0 .9rem;
  padding: .55em .7em;
  background: var(--laranja-bg);
  border: 1px solid #f4dcc0;
  border-radius: var(--raio);
  font-size: .78rem;
  color: var(--laranja);
}

.cartao-norma-acoes { margin-top: auto; display: flex; justify-content: flex-end; }

/* --- Responsividade --------------------------------------------------- */

@media (max-width: 1100px) {
  .seletor-entidade select { min-width: 150px; max-width: 200px; }
  .utilizador-atual #nome-utilizador-atual { max-width: 120px; }
}

@media (max-width: 960px) {
  /* Menu lateral passa a gaveta sobreposta, aberta pelo botão da topbar. */
  .botao-menu { display: inline-flex; }
  .barra-lateral {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 150;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
  }
  body.nav-aberta .barra-lateral { transform: none; }
  body.nav-aberta .fundo-nav { opacity: 1; pointer-events: auto; }
  body.nav-aberta { overflow: hidden; }

  .barra-topo { padding: .6rem .9rem; gap: .7rem; flex-wrap: wrap; }
  .barra-topo-direita { gap: .6rem; width: 100%; margin-left: 0; flex-wrap: wrap; }
  .contexto-entidade { flex: 1 1 100%; max-width: none; }
  .utilizador-atual { margin-left: auto; }
  .conteudo { padding: 1.1rem .9rem 2.5rem; }
  .cabecalho-pagina h1 { font-size: 1.2rem; }
  .caixa-modal.modal-larga { max-width: 100%; }
  .fundo-modal { padding: 2vh .6rem; }
  .cabecalho-modal, .corpo-modal { padding-left: 1.1rem; padding-right: 1.1rem; }
  .acoes-modal { padding-left: 1.1rem; padding-right: 1.1rem; }
}

@media (max-width: 700px) {
  /* Tabelas de dados passam a cartões empilhados — o scroll horizontal
     em tabelas ISO com 6+ colunas é impraticável no telemóvel. */
  .tabela-wrap { overflow: visible; }
  table.tabela-dados:not(.tabela-editavel) { font-size: .86rem; }
  table.tabela-dados:not(.tabela-editavel) thead { display: none; }
  table.tabela-dados:not(.tabela-editavel) tbody tr {
    display: block;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--cinza-200);
  }
  table.tabela-dados:not(.tabela-editavel) tbody tr:last-child { border-bottom: none; }
  table.tabela-dados:not(.tabela-editavel) tbody tr:hover td { background: none; }
  table.tabela-dados:not(.tabela-editavel) td {
    display: flex;
    gap: .75rem;
    padding: .2em 0;
    border: none;
    align-items: baseline;
  }
  table.tabela-dados:not(.tabela-editavel) td::before {
    content: attr(data-rotulo);
    flex: 0 0 38%;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cinza-500);
  }
  table.tabela-dados:not(.tabela-editavel) td:empty { display: none; }
  table.tabela-dados:not(.tabela-editavel) td.col-acoes {
    display: flex;
    justify-content: flex-start;
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--cinza-200);
    flex-wrap: wrap;
    gap: .35rem;
  }
  table.tabela-dados:not(.tabela-editavel) td.col-acoes::before { display: none; }
  .col-acoes .botao { margin-left: 0; }

  .barra-tabela { padding: .6rem .7rem; }
  .campo-pesquisa { max-width: none; }
  .contagem-registos { margin-left: 0; }
  .cabecalho-pagina .botao { margin-left: 0; width: 100%; }
  .grelha-dashboard { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
  .cartao-metrica .valor { font-size: 1.55rem; }
  .esqueleto-linha { grid-template-columns: 2fr 1fr; }
  .area-toasts { left: .8rem; right: .8rem; bottom: .8rem; }
  .toast { max-width: none; }
  /* Em ecrã estreito a grelha do formulário passa a uma só coluna. */
  .campos-grelha,
  .grupo-campos-corpo { grid-template-columns: 1fr; }
  .linha-formulario { flex-direction: column; gap: 0; }
  .acoes-modal { flex-direction: column-reverse; }
  .acoes-modal .botao { width: 100%; }

  /* Vista 360º no telemóvel: um grupo por linha (dois números lado a lado ainda
     cabem) e cabeçalho mais apertado, que é onde se perde mais altura. */
  .cabecalho-360 { padding: .8rem .85rem .9rem; }
  .trilha-360 { font-size: .85rem; }
  .trilha-360 strong { font-size: .98rem; }
  .grupos-360 { grid-template-columns: 1fr; }
  .metrica-360 .valor { font-size: 1.35rem; }
}

/* --- Impressão (relatórios de auditoria, objetivos, processos) -------- */

@media print {
  :root { --sombra: none; --sombra-m: none; }
  body { background: var(--branco); }
  .barra-lateral, .barra-topo, .fundo-nav, .area-toasts, .fundo-modal,
  .col-acoes, .barra-tabela, .botao, .separadores { display: none !important; }
  .ecra-app { display: block; }
  .conteudo { padding: 0; max-width: none; }
  .cartao { border: 1px solid #999; box-shadow: none; border-radius: 0; break-inside: avoid; }
  table.tabela-dados { font-size: 9.5pt; }
  table.tabela-dados th { position: static; border-bottom: 1px solid #333; color: #000; background: #eee; }
  table.tabela-dados td { border-bottom: 1px solid #ccc; }
  table.tabela-dados tr { break-inside: avoid; }
  /* No ecrã a zebra tem de se ver; no papel, o mesmo tom gasta tinta e escurece
     a folha. Aqui basta o suficiente para seguir a linha. */
  table.tabela-dados:not(.tabela-editavel) tbody tr:nth-child(even) td { background: #f4f4f4; }
  table.tabela-dados tbody tr:hover td { background: none; }
  .cabecalho-pagina h1, .cabecalho-pagina h2 { color: #000; }
  .selo { border: 1px solid #999; color: #000 !important; background: none !important; }
  a { color: #000; }

  /* Vista 360º impressa: o cabeçalho azul-escuro não se imprime a cheio, e as
     secções passam a molduras a preto para o relatório sair legível. */
  .cabecalho-360 { background: none !important; color: #000; border: 1px solid #333; }
  .trilha-360, .trilha-360 strong, .descricao-360, .chapa-360, .chapa-360 strong,
  .chapa-360-rotulo { color: #000 !important; }
  .chapa-360 { background: none !important; border-color: #999; }
  .secao-360, .grupo-360 { border-color: #999; break-inside: avoid; }
  .cabeca-secao-360, .grupo-360 > header { background: #f0f0f0 !important; border-color: #999; }
  .icone-secao-360 { background: none !important; color: #000; border: 1px solid #999; }
}

/* --- Inquéritos de Satisfação: construtor de perguntas ------------------ */

/* Um bloco por pergunta, no formulário de construção/edição de um modelo de
   inquérito — precisa de mais destaque visual do que um `.grupo-formulario`
   normal porque agrupa vários campos que só fazem sentido juntos (texto,
   tipo, e sub-campos que variam por tipo). */
.cartao-pergunta {
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  background: var(--cinza-50);
  padding: 1rem 1.1rem 1.2rem;
  margin-bottom: 1rem;
}
.cartao-pergunta-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}
.cartao-pergunta-cabecalho .numero-pergunta {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--marca-700);
}
.cartao-pergunta-acoes { display: flex; gap: .35rem; flex-wrap: wrap; }
.cartao-pergunta-acoes button[disabled] { opacity: .35; cursor: not-allowed; }
.cartao-pergunta .campo-checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  font-size: .84rem;
  color: var(--cinza-900);
  cursor: pointer;
}
.cartao-pergunta .campo-checkbox input { width: auto; margin: 0; flex-shrink: 0; }
.cartao-pergunta .aviso-escala-impar {
  margin-top: .4rem;
  font-size: .76rem;
  color: var(--amarelo);
  background: var(--amarelo-bg);
  border-radius: var(--raio);
  padding: .4rem .6rem;
}
.cartao-pergunta .linha-opcao {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .5rem;
}
.cartao-pergunta .linha-opcao input[type="text"] { flex: 1; }

/* --- Inquéritos: resultados agregados (sem biblioteca de gráficos) ------- */

.barra-resultado {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .4rem;
}
.barra-resultado .barra-resultado-fundo {
  flex: 1;
  height: 10px;
  background: var(--cinza-200);
  border-radius: 6px;
  overflow: hidden;
}
.barra-resultado .barra-resultado-preenchida {
  height: 100%;
  background: var(--marca-600);
  border-radius: 6px;
}
.barra-resultado .barra-resultado-legenda {
  font-size: .8rem;
  color: var(--cinza-700);
  white-space: nowrap;
  min-width: 11ch;
  text-align: right;
}

/* --- Ecrã público de resposta a inquérito (sem sessão) ------------------- */

.ecra-inquerito-publico .cartao-auth {
  max-width: 640px;
  text-align: left;
}
.cartao-inquerito-publico .marca-auth { margin-bottom: 1.25rem; }
.cartao-inquerito-publico h1 { font-size: 1.2rem; color: var(--cinza-900); margin-bottom: .25rem; }
.cartao-inquerito-publico .descricao-inquerito { color: var(--cinza-500); font-size: .88rem; margin-bottom: 1.4rem; }
.cartao-inquerito-publico .pergunta-publica { margin-bottom: 1.5rem; }
.cartao-inquerito-publico .pergunta-publica > .rotulo-pergunta {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  color: var(--cinza-900);
  margin-bottom: .6rem;
}
.cartao-inquerito-publico .rotulos-escala {
  display: flex;
  justify-content: space-between;
  font-size: .74rem;
  color: var(--cinza-500);
  margin-top: .3rem;
}
.cartao-inquerito-publico textarea[data-texto] {
  display: block;
  width: 100%;
  min-height: 8.5rem;
  padding: .8rem .95rem;
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio);
  background: var(--cinza-50);
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--cinza-900);
  resize: vertical;
  transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.cartao-inquerito-publico textarea[data-texto]::placeholder { color: #9aa3b0; }
.cartao-inquerito-publico textarea[data-texto]:hover { border-color: var(--marca-500); }
.cartao-inquerito-publico textarea[data-texto]:focus {
  outline: none;
  border-color: var(--marca-600);
  background: var(--branco);
  box-shadow: 0 0 0 3px var(--marca-100);
}
.cartao-inquerito-publico .contador-texto {
  text-align: right;
  font-size: .74rem;
  color: var(--cinza-500);
  margin-top: .3rem;
}
.cartao-inquerito-publico .ecra-resultado-publico {
  text-align: center;
  padding: 1rem 0;
}
.cartao-inquerito-publico .ecra-resultado-publico .icone-resultado {
  width: 48px;
  height: 48px;
  margin: 0 auto .9rem;
  color: var(--marca-600);
}

/* ======================================================================
   Visualizador de ficheiros e painel de versões de documento
   (migração 022 — carregamento e controlo de documentos)
   ====================================================================== */

.visualizador {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.visualizador-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--cinza-200);
}

/* Altura fixa em vez de automática: o conteúdo é de terceiros e um PDF de
   200 páginas não pode esticar o modal até ao infinito. */
.visualizador-conteudo {
  height: min(70vh, 720px);
  background: var(--cinza-50);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio);
  overflow: auto;
}

.visualizador-conteudo iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--branco);
}

.visualizador-imagem {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
}

.visualizador-imagem img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.visualizador-sem-previa {
  padding: 2rem 1rem;
  text-align: center;
  background: var(--cinza-50);
  border: 1px dashed var(--cinza-300);
  border-radius: var(--raio);
}

.visualizador-sem-previa p { margin: .25rem 0; }

/* Botão com aspeto de ligação — o nome de um ficheiro que abre o
   visualizador é uma AÇÃO, não uma navegação, por isso é <button>; mas o
   utilizador espera vê-lo como uma ligação. */
.ligacao-tabela {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--marca-600);
  text-decoration: underline;
  text-align: left;
  cursor: pointer;
}

.ligacao-tabela:hover { color: var(--marca-800); }

.ligacao-tabela:focus-visible {
  outline: 2px solid var(--marca-600);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Painel de versões ------------------------------------------------ */

.bloco-seccao {
  padding: .9rem 0;
  border-top: 1px solid var(--cinza-200);
}

.bloco-seccao:first-child { border-top: 0; padding-top: 0; }

.bloco-seccao > h3 {
  margin: 0 0 .5rem;
  font-size: .95rem;
  color: var(--cinza-900);
}

.acoes-inline {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* Lista de destinatários: várias colunas em ecrã largo, uma no telemóvel. */
.lista-destinatarios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .2rem .75rem;
  max-height: 260px;
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio);
  background: var(--cinza-50);
}

.lista-destinatarios .opcao-multi {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  padding: .25rem .2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: .88rem;
}

.lista-destinatarios .opcao-multi:hover { background: var(--marca-50); }

.lista-destinatarios .opcao-multi input { margin-top: .2rem; flex: 0 0 auto; }

.lista-destinatarios .opcao-multi span { display: block; line-height: 1.25; }

.lista-destinatarios .opcao-multi .celula-muda { display: block; }

.lista-simples {
  margin: .25rem 0;
  padding-left: 1.1rem;
  font-size: .88rem;
}

@media (max-width: 640px) {
  .visualizador-conteudo { height: 60vh; }
  .lista-destinatarios { grid-template-columns: 1fr; max-height: 220px; }
}

/* --- Zona de ficheiro (arrastar e largar) — js/arrastar_ficheiros.js ---- */
/* O <input type="file"> fica transparente por cima da zona inteira: o clique
   abre o seletor nativo e o largar é tratado pelo browser. A especificidade
   (0,3,1) vence regras antigas como `.form-anexo input[type="file"]`. */
.zona-ficheiro {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: .7rem .9rem;
  border: 2px dashed var(--cinza-300);
  border-radius: var(--raio);
  background: var(--cinza-50);
  transition: border-color var(--transicao), background var(--transicao);
}
.zona-ficheiro:hover { border-color: var(--marca-500); background: var(--marca-50); }
.zona-ficheiro:focus-within { border-color: var(--marca-600); box-shadow: 0 0 0 3px var(--marca-100); }
.zona-ficheiro.zona-ficheiro-sobre {
  border-color: var(--marca-600);
  border-style: solid;
  background: var(--marca-100);
}
.zona-ficheiro.zona-ficheiro-escolhido { border-style: solid; border-color: var(--verde-borda); background: var(--verde-bg); }
.zona-ficheiro > input[type="file"].zona-ficheiro-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.zona-ficheiro-rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
  pointer-events: none;
  font-size: .84rem;
  color: var(--cinza-700);
}
.zona-ficheiro-icone { font-size: 1.15rem; color: var(--marca-600); line-height: 1; }
.zona-ficheiro-escolhido .zona-ficheiro-icone { color: var(--verde); }
.zona-ficheiro-texto strong { color: var(--cinza-900); }
.zona-ficheiro-tamanho { margin-left: .4rem; color: var(--cinza-500); font-size: .78rem; }
.zona-ficheiro-tipos { flex-basis: 100%; padding-left: 1.75rem; color: var(--cinza-500); font-size: .76rem; }

/* --- Verificação em duas etapas (js/dois_fatores.js) ------------------- */
.passos-2fa { margin: .4rem 0 1rem; padding-left: 1.2rem; font-size: .88rem; color: var(--cinza-700); }
.passos-2fa li { margin-bottom: .6rem; }
.qr-2fa {
  width: 200px;
  height: 200px;
  margin: .6rem 0;
  padding: 8px;
  background: var(--branco);
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-2fa svg { width: 100%; height: 100%; }
.segredo-2fa { font-size: .82rem; margin-top: .3rem; }
.segredo-2fa code { font-size: .9rem; letter-spacing: .04em; user-select: all; }
.caixa-codigos-recuperacao {
  margin-top: .8rem;
  padding: .9rem 1rem;
  border: 1px solid var(--amarelo-borda);
  border-radius: var(--raio);
  background: var(--amarelo-bg);
  font-size: .86rem;
}
.lista-codigos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem 1.5rem;
  margin: .6rem 0;
  padding-left: 1.4rem;
}
.lista-codigos code { font-size: .95rem; letter-spacing: .06em; user-select: all; }
.linha-codigo-2fa { align-items: flex-end; flex-wrap: wrap; }
.linha-codigo-2fa .grupo-formulario { margin-bottom: 0; }
.linha-codigo-2fa .grupo-formulario:first-child { flex: 0 1 12rem; }
.linha-codigo-2fa .grupo-formulario:last-child { flex: 0 0 auto; }
.linha-codigo-2fa .botao { height: 2.6rem; }
#codigo-2fa { height: 2.6rem; font-size: 1.1rem; letter-spacing: .25em; text-align: center; }

/* --- A minha conta: identificação + palavra-passe num só quadro --------- */
.cartao-conta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; }
.cartao-conta .conta-coluna { padding: 1.25rem 1.5rem; }
.cartao-conta .conta-coluna-password { border-left: 1px solid var(--cinza-200); }
.cartao-conta .conta-coluna > h2 { margin: 0 0 .35rem; font-size: .95rem; color: var(--marca-800); }
.cartao-conta .conta-coluna > .texto-ajuda { margin-top: 0; margin-bottom: .9rem; text-align: left; }
.cartao-conta .conta-coluna > *:last-child { margin-bottom: 0; }
.cartao-conta, #cartao-2fa { margin-bottom: 1.1rem; }
@media (max-width: 860px) {
  .cartao-conta { grid-template-columns: 1fr; }
  .cartao-conta .conta-coluna-password { border-left: 0; border-top: 1px solid var(--cinza-200); }
  .linha-codigo-2fa { flex-direction: row; gap: .75rem; }
}

/* =====================================================================
   Ronda visual 2 (2026-11-05) — separadores, janelas, indicadores e
   cartões. Fica no fim de propósito: sobrepõe-se às regras base sem as
   reescrever, e o bloco pode ler-se (ou retirar-se) de uma vez.
   ===================================================================== */
@media screen {
  /* Separadores: o ativo ganha fundo e sublinhado na cor da fase. */
  .separadores:not(.separadores-inline) { gap: .25rem; border-bottom: 1px solid #dfe6f0; }
  .separadores:not(.separadores-inline) button {
    padding: .62em 1.05em; border-radius: 8px 8px 0 0; color: #5a6b84;
    border-bottom-width: 3px;
  }
  .separadores:not(.separadores-inline) button:hover { background: var(--marca-50); color: var(--marca-800); }
  .separadores:not(.separadores-inline) button.ativo {
    color: var(--marca-900);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cor-fase, var(--marca-600)) 9%, transparent));
    border-bottom-color: var(--cor-fase, var(--marca-600));
  }

  /* Janelas (modais): cabeçalho com fundo suave e acento da fase. */
  .cabecalho-modal {
    position: relative;
    background: linear-gradient(180deg, #f6f9fd, var(--branco));
    border-radius: var(--raio-g) var(--raio-g) 0 0;
    border-bottom-color: #e3e9f2;
  }
  .cabecalho-modal::before {
    content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
    border-radius: var(--raio-g) var(--raio-g) 0 0;
    background: var(--cor-fase, var(--marca-600));
  }
  .cabecalho-modal h2 { font-size: 1.12rem; color: var(--marca-900); letter-spacing: -.005em; }
  .fundo-modal { backdrop-filter: blur(2px); }

  /* Indicadores do dashboard: cartões com mais presença e reação ao passar. */
  .faixa-indicadores { gap: .7rem; }
  .indicador {
    padding: .85rem 1rem .8rem;
    border-left-width: 4px;
    border-radius: 10px;
    box-shadow: var(--sombra);
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
  }
  .indicador:hover { transform: translateY(-2px); box-shadow: var(--sombra-m); }
  .indicador-valor { font-size: 1.85rem; letter-spacing: -.02em; }
  .indicador-rotulo { font-size: .68rem; font-weight: 600; color: #6b7c95; margin-top: .15rem; }

  /* Cartões de painel: título com mais hierarquia e linha discreta por baixo. */
  .cartao { border-color: #e2e8f1; }
  .cartao-painel > h2 {
    font-size: 1rem; color: var(--marca-900);
    padding-bottom: .55rem; margin-bottom: .7rem;
    border-bottom: 1px solid #edf1f6;
  }

  /* Barra de pesquisa da tabela: fundo branco, contagem em «pílula». */
  .barra-tabela { background: var(--branco); border-bottom-color: #edf1f6; padding: .8rem 1rem; }
  .contagem-registos {
    padding: .2rem .6rem; border-radius: 999px;
    background: var(--marca-50); color: var(--marca-700);
    font-size: .74rem; font-weight: 600;
  }

  /* Estado vazio com um pouco mais de ar. */
  .estado-vazio { padding-top: 2.4rem; padding-bottom: 2.4rem; }

  /* Selos: ligeiramente mais compactos e nítidos dentro das tabelas. */
  table.tabela-dados .selo { font-size: .72rem; padding: .15em .6em .15em .5em; }

  /* Campos de formulário: foco mais visível e coerente com a pesquisa. */
  .grupo-formulario input:focus,
  .grupo-formulario select:focus,
  .grupo-formulario textarea:focus {
    border-color: var(--marca-600);
    box-shadow: 0 0 0 3px rgba(46, 95, 163, .14);
  }
}


/* --- Marca QUALL -------------------------------------------------------
   O ícone da marca passou a ser a imagem `marca.svg` (o Q com o visto, já
   com o seu próprio fundo claro arredondado). Por isso o quadrado azul com
   gradiente que servia de fundo ao antigo ícone vetorial deixa de fazer
   sentido: dava um segundo fundo por baixo do primeiro.                  */
/* Marca QUALL */
.marca-icone { background: none; box-shadow: none; overflow: hidden; }
.marca-icone img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.marca-auth .marca-icone { width: 56px; height: 56px; border-radius: 14px; }

/* ======================================================================
   Janelas de formulário com mais cor, e o painel de acessos
   ====================================================================== */
@media screen {
  /* O modal estava monocromático: branco sobre branco, sem nada a dizer ao
     olho onde começa o formulário e onde acabam as ações. */
  .caixa-modal .cabecalho-modal::before { height: 4px; }
  .caixa-modal .corpo-modal label,
  .caixa-modal .corpo-modal .rotulo-campo {
    color: var(--marca-800);
    font-weight: 600;
  }
  .caixa-modal .corpo-modal input[type="text"],
  .caixa-modal .corpo-modal input[type="email"],
  .caixa-modal .corpo-modal input[type="number"],
  .caixa-modal .corpo-modal input[type="date"],
  .caixa-modal .corpo-modal select,
  .caixa-modal .corpo-modal textarea {
    background-color: #fbfcfe;
    border-color: #d7e0ec;
  }
  .caixa-modal .corpo-modal input:focus,
  .caixa-modal .corpo-modal select:focus,
  .caixa-modal .corpo-modal textarea:focus {
    background-color: var(--branco);
    border-color: var(--marca-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-500) 16%, transparent);
  }
  .acoes-modal {
    background: linear-gradient(180deg, var(--branco), #f3f7fc);
    border-top: 1px solid #e3e9f2;
  }
}

/* --- Painel de acessos de uma entidade --------------------------------
   Uma tabela com uma permissão por linha dava colunas desiguais e uma
   parede de texto. Cada pessoa passa a ser um cartão: identificação à
   esquerda, estado à direita, e as permissões em etiquetas que se leem de
   relance — só as que tem, porque o que não tem não ocupa espaço. */
.acessos-lista { display: grid; gap: .75rem; }
.acesso-pessoa {
  border: 1px solid var(--cinza-200);
  border-left: 4px solid var(--marca-500);
  border-radius: var(--raio);
  padding: .85rem 1rem;
  background: var(--branco);
}
.acesso-pessoa[data-externo="sim"] { border-left-color: #8a5a2b; }
.acesso-cabeca { display: flex; align-items: flex-start; gap: .9rem; flex-wrap: wrap; }
.acesso-identidade { min-width: 0; flex: 1 1 15rem; }
.acesso-nome { font-weight: 700; color: var(--cinza-900); }
.acesso-email { font-size: .78rem; color: var(--cinza-500); }
.acesso-perfil {
  font-size: .78rem; font-weight: 600; color: var(--marca-800);
  background: var(--marca-50, #eef4fc);
  border-radius: 999px; padding: .2rem .7rem; align-self: flex-start;
}
.acesso-estado { margin-left: auto; text-align: right; font-size: .76rem; color: var(--cinza-500); }
.acesso-estado .selo { margin-left: .3rem; }
.acesso-permissoes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.chip-perm {
  font-size: .74rem; line-height: 1.5;
  padding: .12rem .55rem;
  border-radius: 6px;
  background: var(--cinza-100, #eef1f5);
  color: var(--cinza-700);
}
.chip-perm-extra { background: #fdf3dc; color: #8a6116; font-weight: 600; }
.chip-perm-menos { background: #fdeadf; color: #9a4b16; font-weight: 600; text-decoration: line-through; }
.acesso-so-consulta { font-size: .78rem; color: var(--cinza-500); font-style: italic; }

/* --- Mapa de perfis e permissões -------------------------------------- */
.tabela-rolavel { overflow-x: auto; }
.tabela-matriz th[scope="col"] { font-size: .78rem; line-height: 1.3; vertical-align: bottom; }
.tabela-matriz th[scope="row"] { font-weight: 500; white-space: normal; }
.tabela-matriz .celula-marca { text-align: center; }
.marca-sim { color: #1a7f5a; font-weight: 700; }
.marca-nao { color: var(--cinza-300, #c9d2de); }
.texto-perfil-nota { margin: .5rem 0 0; font-size: .84rem; color: var(--cinza-700); }

/* Explicação do perfil dentro do formulário de acesso: é texto de apoio,
   mas com peso suficiente para ser lido antes de se clicar em Conceder. */
.explicacao-perfil {
  margin-top: .5rem; padding: .7rem .85rem;
  border-left: 3px solid var(--marca-500);
  background: var(--marca-50, #eef4fc);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.explicacao-perfil p { margin: 0 0 .3rem; font-size: .82rem; color: var(--cinza-700); line-height: 1.45; }
.explicacao-perfil p strong { color: var(--cinza-900); }
.explicacao-perfil .acesso-permissoes { margin-top: .5rem; }
.explicacao-titulo {
  margin-top: .7rem !important;
  font-size: .76rem !important; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--cinza-500) !important;
}

/* --- Acessos lidos pelas fases do PDCA --------------------------------
   A mesma leitura do menu: a fase à esquerda, com a sua cor, e as áreas à
   direita. Substituiu um aglomerado de etiquetas que obrigava a procurar. */
.lista-acessos { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .3rem; }
.linha-acesso {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .7rem;
  align-items: baseline;
  padding: .32rem 0 .32rem .6rem;
  border-left: 3px solid var(--cor-pdca, var(--cinza-300));
}
.linha-acesso[data-fase="planear"]   { --cor-pdca: #3b82f6; }
.linha-acesso[data-fase="executar"]  { --cor-pdca: #10a37f; }
.linha-acesso[data-fase="verificar"] { --cor-pdca: #e0a020; }
.linha-acesso[data-fase="melhorar"]  { --cor-pdca: #8b5cf6; }
.linha-acesso[data-fase="admin"]     { --cor-pdca: #64748b; }
.linha-acesso-fase {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cor-pdca);
}
.linha-acesso-areas { font-size: .84rem; line-height: 1.45; color: var(--cinza-800, #2f3a47); }

/* Linha de separação de fase dentro da matriz cruzada. */
.tabela-matriz .linha-fase th {
  background: var(--cinza-50, #f7f9fc);
  border-left: 3px solid var(--cor-pdca, var(--cinza-300));
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cor-pdca);
  padding-top: .5rem; padding-bottom: .5rem;
}
.tabela-matriz .linha-fase[data-fase="planear"]   { --cor-pdca: #3b82f6; }
.tabela-matriz .linha-fase[data-fase="executar"]  { --cor-pdca: #10a37f; }
.tabela-matriz .linha-fase[data-fase="verificar"] { --cor-pdca: #e0a020; }
.tabela-matriz .linha-fase[data-fase="melhorar"]  { --cor-pdca: #8b5cf6; }
.tabela-matriz .linha-fase[data-fase="admin"]     { --cor-pdca: #64748b; }

@media (max-width: 640px) {
  .linha-acesso { grid-template-columns: 1fr; gap: .1rem; }
}

/* --- Gestão de uma entidade-cliente (painel da Visão de gestão) -------- */
.gestao-cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--cinza-200);
}
.gestao-seccao { padding: 1rem 0; border-bottom: 1px solid var(--cinza-200); }
.gestao-seccao:last-child { border-bottom: 0; }
.gestao-seccao h3 { font-size: .95rem; color: var(--marca-800); margin: 0 0 .6rem; }
.licenca-atual {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem .9rem; border: 1px solid var(--cinza-200);
  border-left: 4px solid var(--marca-500); border-radius: var(--raio);
  background: var(--branco);
}
.licenca-plano { font-weight: 700; color: var(--cinza-900); }
.form-licenca { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--cinza-300); }