/* Registo de Horas — AREAM
   Paleta do logótipo, e só ela (CLAUDE.md §8). Servido do próprio servidor:
   não há CDN externo em produção, e a CSP não admite `unsafe-inline`. */

:root {
    --texto:      #4E4D4F;
    --accao:      #337594;
    --realce:     #0095CD;
    --positivo:   #6B873E;
    --aviso:      #EFB14A;
    --erro:       #C34937;
    --marca:      #99BA3D;
    --fundo:      #F4F5F4;
    --superficie: #FFFFFF;
    --linhas:     #D9DBD9;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 2rem 1rem;
    background: var(--fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

/* A CAIXA DE TODAS AS PÁGINAS. A medida base é a do CARTÃO DE ENTRADA — entrar,
   PIN, definir PIN —, que é um formulário de dois campos: 26rem é a medida de um
   formulário, e um cartão largo à volta de dois campos afasta o olhar do que
   interessa. As páginas de trabalho alargam-na na regra seguinte. */
.folha {
    max-width: 26rem;
    margin: 0 auto;
    padding: 2rem;
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-radius: 6px;
}

/* UMA LARGURA SÓ PARA TODAS AS PÁGINAS DE TRABALHO *(19/08/2026, pedido do
   Filipe)*: «quero a mesma largura em todas as páginas para evitar saltos no
   menu». Com a barra de navegação no topo de todas elas, quatro larguras
   diferentes faziam o menu mudar de sítio a cada página — e um ponto de
   referência que se move é pior do que não o ter.

   ⚠ AS QUATRO ERAM 26, 60, 82 e 89rem, e cada uma tinha a sua razão: o cartão de
   entrada, o formulário, os centros de custo e a vista mensal. **A razão de todas
   continua a valer para o CONTEÚDO; o que deixou de valer é a página mudar de
   medida por causa disso.** Fica a maior — as 89rem que a vista mensal exige, com
   as suas 31 colunas —, porque uma página larga acomoda conteúdo estreito e o
   contrário não é verdade.

   ⚠ O CARTÃO DE ENTRADA MANTÉM-SE ESTREITO, e não é exceção à regra: são os
   ecrãs SEM barra — entrar, PIN, definir PIN. Não têm menu, logo não há salto que
   evitar, e 89rem à volta de dois campos afastava o olhar do que interessa.
   O critério é `:has(.barra)`, que é semântico: «esta página tem navegação».

   ⚠ HÁ TESTES A SOMAR AS CONTAS (`tests/casos/20_projetos.php` e
   `21_grelha_mes.php`): as tabelas mais largas — 86rem da mensal, 76rem dos
   centros de custo — têm de caber nesta medida com os preenchimentos pelo meio.
   Estreitar isto sem refazer as contas volta a esconder colunas, que foi o A-36. */
.folha:has(.barra) {
    max-width: 89rem;
    padding: 2rem 1.5rem;
    /* ⚠ É ESTA LINHA QUE ANCORA O «SAIR» AO CANTO DO CARTÃO *(19/08/2026)*, e sem
       ela os 5 mm passavam a ser medidos a partir da JANELA — o botão descolava do
       cartão e afastava-se dele à medida que o ecrã crescesse. Também melhora a
       gaveta do menu estreito, que já se posicionava em absoluto e passa a
       encostar à margem do cartão em vez de à da janela. */
    position: relative;
}

/* O TEXTO NÃO ACOMPANHA A PÁGINA. Uma linha de 89rem é ilegível — o olho perde a
   linha seguinte —, e a largura da folha existe para as TABELAS, não para a
   prosa. As tabelas e as grelhas ficam de fora desta regra, que é o ponto. */
.folha:has(.barra) > p,
.folha:has(.barra) .nota,
.folha:has(.barra) .seccao > p {
    max-width: 62rem;
}

/* O logotipo da AREAM, no topo de todas as páginas (ver `Vistas/layout.php`).
   `width`/`height` vão no HTML com as medidas reais do SVG — 855x371 — para o
   navegador reservar o espaço antes de o carregar e a página não saltar; aqui
   a largura real é a que a caixa permite, e a altura acompanha.
   ALINHADO À ESQUERDA, por decisão do Filipe em 14/08/2026: o logótipo traz a
   palavra «aream» e lê-se como cabeçalho, não como emblema centrado. */
.logotipo {
    display: block;
    width: 100%;
    max-width: 11rem;
    height: auto;
    margin: 0 0 1.5rem;
}

.marca {
    margin: 0 0 .25rem;
    font-size: 1.35rem;
    color: var(--texto);
    border-bottom: 3px solid var(--marca);
    padding-bottom: .5rem;
}

.entidade {
    margin: 0 0 1.5rem;
    font-size: .8rem;
    color: var(--texto);
    opacity: .75;
}

label {
    display: block;
    margin-top: 1rem;
    font-size: .85rem;
    font-weight: 600;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    margin-top: .25rem;
    padding: .55rem .6rem;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-radius: 4px;
}

/* ⚠ O CAMPO DE DATA NÃO ESTAVA EM REGRA NENHUMA *(corrigido em 19/08/2026)*, e
   ficava com o preenchimento do navegador — que é quase nenhum. Não se notou
   enquanto esteve sozinho na sua linha; notou-se no dia em que ficou **ao lado de
   um `select`**, que tem `.55rem`: a pastilha do «Tipo» ficou visivelmente mais
   alta do que as duas datas, e desalinhada. **Foi o Filipe a apanhá-lo.**

   ⚠ **A CAUSA NÃO ERA A LINHA, ERA A OMISSÃO** — e é por isso que a correção está
   aqui e não na regra da linha: pôr-lhe altura só no ecrã de férias deixava o mesmo
   campo com outro aspeto na criação de contas, que é o terceiro (e último) `date`
   da aplicação. **Os três passam a ler-se como os campos de texto ao lado deles**, e
   é a mesma lição do `select`, que também não tinha regra e também subia de linha.

   ⚠ **A LARGURA É DECLARADA E NÃO 100 %**, ao contrário dos campos de texto: o que
   se escreve num campo de data tem comprimento fixo — dez caracteres e o botão do
   calendário —, e a largura da página debaixo disso não serve para nada. É a mesma
   razão pela qual o `select` tem `width: auto`.

   ⚠ E O PREENCHIMENTO VERTICAL TEM DE SER O DO `select`: há CASO a somar a conta
   (`tests/casos/14_ecra_ferias.php`), porque é dele que depende as três caixas
   ficarem à mesma altura numa linha. Mexer num sem mexer no outro desalinha-as
   outra vez. */
/* ⛔ **O CAMPO DE MÊS ENTROU NESTA REGRA EM 31/08/2026, e é o defeito de 19/08 a
   repetir-se por inteiro:** nasceu em 31/08 sem regra nenhuma e ficava com o
   preenchimento do navegador, que é quase nenhum. **Não se via enquanto os dois
   estavam um debaixo do outro**; vê-se no dia em que ficam lado a lado, ao lado das
   caixas e do «Mostrar» — que é exactamente como o do `date` foi apanhado, ao lado
   de um `select`. A largura declarada não se aplica aqui: quem a decide é o
   `.periodo input[type="month"]`, com mais especificidade, porque um mês escrito
   ocupa menos do que uma data.

   ⚠ **A ORDEM DOS DOIS SELETORES NÃO É INDIFERENTE PARA QUEM MEDE.** O
   `tests/casos/14` lê o preenchimento desta regra por expressão regular, e o que
   ele procura tem de ficar colado à chaveta. A expressão foi alargada no mesmo dia
   para aceitar as duas posições — mas a regra continua a ser: **acrescenta-se
   ANTES, nunca depois.** */
input[type="month"],
input[type="date"] {
    width: 10rem;
    margin-top: .25rem;
    padding: .55rem .6rem;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-radius: 4px;
}

/* O `select` não tinha regra nenhuma e ficava com o estilo do navegador — que é
   `inline-block`. Consequência vista no ecrã do exercício em 14/08/2026: o
   seletor do ano de origem subia para a linha do botão «Gerar folhas de horas»,
   longe do seu rótulo «A partir de», e o formulário lia-se ao contrário do que
   está escrito no HTML, onde a ordem sempre esteve certa.
   `display: block` põe-no debaixo do seu rótulo e empurra o botão para a linha
   seguinte — os dois problemas com uma regra. `width: auto` mantém-no do tamanho
   do conteúdo: um seletor de quatro dígitos não precisa da largura da página. */
select {
    display: block;
    width: auto;
    margin-top: .25rem;
    padding: .55rem .6rem;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-radius: 4px;
}

input:focus,
select:focus {
    outline: 2px solid var(--realce);
    outline-offset: 1px;
    border-color: var(--realce);
}

/* Um formulário não acompanha a largura da página. Com as páginas de trabalho a
   abrir para 60rem, um campo de ano a 100% ficava com 15 cm para quatro
   dígitos. A medida é a do formulário, não a do ecrã. */
.seccao .entrada {
    max-width: 24rem;
}

/* RODAPÉ DE UM FORMULÁRIO COM VÁRIAS SECÇÕES — as definições gerais, onde um
   só «Gravar» grava todos os grupos e por isso não pode viver dentro de nenhum.
   Sem isto o botão ficava a flutuar depois da última caixa, sem nada que o
   ligasse ao que grava. Onde o formulário tem uma secção só, o botão vai dentro
   dela e não usa esta classe. */
.accoes {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linhas);
}

.accoes button {
    margin-top: 0;
}

/* O SEGUNDO BOTÃO DE UM PAR não compete com o primeiro. «Gravar» é o ato que
   fica; «Distribuir» prepara-o e não escreve nada — a hierarquia visual tem de
   dizer isso antes de alguém ler os rótulos.

   ⛔ A REGRA ESTAVA PRESA A `.accoes` E NUNCA CASOU COM NADA *(corrigido em
   31/08/2026)*. As duas — e únicas — utilizações de `class="segundo"` são os
   «Mostrar o que vai gravar» das grelhas da semana e do mês, e **nenhum deles vive
   dentro de um `.accoes`**: os dois saíam azuis, iguais ao «Gravar os N
   lançamentos» que está a um palmo. **Uma classe que promete um aspeto e não o dá
   passa em todas as verificações** — não há erro, há dois botões com o mesmo peso
   para dois atos de peso diferente, que é o contrário da decisão de 24/08. O
   seletor perdeu o prefixo; o `margin-left`, que era do par no `.accoes`, ficou lá. */
button.segundo {
    color: var(--accao);
    background: var(--superficie);
    border-color: var(--accao);
}

button.segundo:hover { background: var(--fundo); }

.accoes button.segundo { margin-left: .5rem; }

button {
    margin-top: 1.5rem;
    padding: .6rem 1.2rem;
    font: inherit;
    font-weight: 600;
    color: var(--superficie);
    background: var(--accao);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

button:hover  { background: var(--realce); }
button:focus  { outline: 2px solid var(--realce); outline-offset: 2px; }

button.secundario {
    color: var(--accao);
    background: var(--superficie);
    border-color: var(--linhas);
}

/* O «GRAVAR» É O BOTÃO MAIS DESTACADO DA APLICAÇÃO *(23/08/2026, pedido do Filipe)*:
   «confunde-se com outros como Acrescentar, Gerar folhas, abas do centro de custo».
   E era verdade medida, não impressão: uma só regra pintava os quatro iguais —
   `--accao` com texto branco —, e a aba do centro de custo selecionada usa a mesma cor.

   ⛔ **A CORREÇÃO É BAIXAR OS OUTROS, E NÃO SUBIR O «GRAVAR»** — decisão do Filipe, e é
   a mais forte das duas: não acrescenta cor nenhuma à paleta, não mexe no botão que já
   estava certo, e não toca nas páginas onde o botão cheio é a única ação do ecrã — o
   «Entrar», o «Marcar», o «Encerrar». *(A primeira proposta era pôr o «Gravar» a verde
   escuro, maior e com sombra. Ficou registada no `docs/17` com a razão por que foi
   abandonada: mexia em mais sítios para obter o mesmo resultado.)*

   FICAM TRÊS NÍVEIS, e cada um responde a uma pergunta diferente:
     azul cheio       — grava esta página. O «Gravar», e mais nada
     azul esbatido    — cria algo novo: «Acrescentar», «Criar», «Gerar folhas de horas»
     branco/contorno  — age numa linha que já existe: «Retirar», «Afetar as N tarefas»

   ⚠ **O NÍVEL DO MEIO NÃO PODE SER O `secundario`**, e é por isso que existe esta
   classe: baixar o «Acrescentar» até ao branco deixá-lo-ia indistinguível do «Retirar»
   — e criar uma tarefa não é o mesmo que retirar uma. Ganhava-se um destaque e
   perdia-se uma distinção que já funcionava. Foi o Filipe a apanhá-lo, ao notar que o
   «Afetar tarefa tem cor branca».

   ⚠ **O FUNDO É O PRÓPRIO `--accao` A 10 %, e não uma cor nova** — mesma matiz, menos
   intensidade, e o texto volta a ser `--accao`, que sobre este fundo dá 4,7:1. */
button.moderado {
    color: var(--accao);
    background: #EAF1F4;
    border-color: var(--accao);
}

button.moderado:hover {
    color: var(--superficie);
    background: var(--accao);
}

/* ⛔ AS LIGAÇÕES-ATO — `a.accao` — NÃO TINHAM REGRA NENHUMA ATÉ 27/08/2026, e é o
   achado A-101 na sua forma mais caseira: a classe existia em cinco sítios das
   vistas e **nenhuma linha deste ficheiro a definia**. Não dava erro; apenas
   deixava «Encerrar a folha de agosto», «Reabrir a folha», «Emitir a folha para
   assinatura» e «Reabrir a folha emitida» a aparecerem como ligações azuis
   sublinhadas do navegador, onde quem as escreveu quis o botão da aplicação.
   *(E não há regra `a {}` global neste ficheiro: sem isto, o estilo era o do
   navegador e mais nada.)*

   ⚠ **PORQUE É QUE ESTES ATOS SÃO LIGAÇÕES E NÃO BOTÕES.** Levam a uma página de
   confirmação e **não escrevem nada** — logo são `GET`, e um `GET` faz-se com uma
   ligação. Um `<form method="get">` daria o botão a valer, mas o navegador
   **descarta a query string do `action`** e substituiria o `?r=rota` pelos campos:
   obrigaria a escrever o `r` à mão na vista, quando quem constrói endereços nesta
   aplicação é o `Nucleo\Url::para()`, e só ele.

   Herda a forma do `button`, e não a repete por acaso: quem mudar o botão tem de
   mudar aqui também — é o preço de dois elementos com o mesmo aspeto. */
a.accao {
    display: inline-block;
    margin-top: 1.5rem;
    padding: .6rem 1.2rem;
    font-weight: 600;
    color: var(--superficie);
    background: var(--accao);
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
}

a.accao:hover { color: var(--superficie); background: var(--realce); }
a.accao:focus { outline: 2px solid var(--realce); outline-offset: 2px; }

/* A LIGAÇÃO-ATO MODERADA, par do `button.moderado`: mesma matiz, menos
   intensidade. É o que o «Encerrar o exercício» usa, por simetria com o «Abrir o
   exercício» — a hierarquia de 24/08 reserva o azul cheio ao «Gravar» da página,
   e dois azuis cheios no mesmo ecrã disputam o mesmo nível. */
a.accao.moderado {
    color: var(--accao);
    background: #EAF1F4;
    border-color: var(--accao);
}

a.accao.moderado:hover {
    color: var(--superficie);
    background: var(--accao);
}

/* A LIGAÇÃO-ATO BRANCA, par do `button.secundario` — e o quarto nível da
   hierarquia de 24/08: **o que DESFAZ**. Nasceu em 29/08/2026 para o «Descartar
   alterações» da página mensal, onde antes estava um link em corpo pequeno colado
   ao «Gravar o mês».

   ⛔ **O CONTORNO É CINZENTO, E ISSO NÃO É DETALHE.** O azul é a cor do ato de
   gravar; o `button.segundo` — branco com contorno azul — é para quem PREPARA esse
   ato, como o «Mostrar o que vai gravar» desta mesma página. Descartar é o
   contrário de preparar, e vestir os dois iguais devolvia a confusão que esta
   classe existe para desfazer.

   Herda a forma do `a.accao`, como ele herda a do `button`: quem mudar um tem de
   mudar os três — é o preço, já assumido acima, de elementos com o mesmo aspeto. */
a.accao.secundario {
    color: var(--accao);
    background: var(--superficie);
    border-color: var(--linhas);
}

a.accao.secundario:hover { background: var(--fundo); }

/* Num par, a ligação-ato alinha com o botão em vez de flutuar por cima dele: o
   `a.accao` traz `margin-top: 1.5rem` para quando é o único ato do ecrã, e dentro
   do `.accoes` isso desalinhava-o do `button`, que ali tem margem zero. */
.accoes a.accao {
    margin-top: 0;
    margin-left: .5rem;
}

.erro {
    margin: 0 0 1rem;
    padding: .6rem .75rem;
    color: var(--superficie);
    background: var(--erro);
    border-radius: 4px;
    font-size: .9rem;
}

.positivo {
    padding: .6rem .75rem;
    background: var(--fundo);
    border-left: 4px solid var(--positivo);
    border-radius: 0 4px 4px 0;
}

.nota {
    font-size: .85rem;
    opacity: .8;
}

/* Algarismos tabulares nas grelhas — as horas alinham pela casa decimal. */
table { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   M3 — o exercício. O seletor de ano fica no topo porque deixou de haver
   «o ano corrente» único: dois exercícios podem estar ABERTO ao mesmo
   tempo, e quem não vir em que ano está carrega horas no ano errado.
   --------------------------------------------------------------------- */

.anos,
.abas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1rem;
}

.ano,
.aba {
    padding: .3rem .7rem;
    font-variant-numeric: tabular-nums;
    color: var(--accao);
    background: var(--fundo);
    border: 1px solid var(--linhas);
    border-radius: 4px;
    text-decoration: none;
}

/* ⚠ A ABA SELECIONADA DEIXOU DE SER AZUL CHEIO *(23/08/2026)*, e era **exactamente a
   mesma cor do botão «Gravar»** — foi uma das três confusões que o Filipe nomeou. O que
   esta aba tem de dizer é «é esta», e para isso basta destacar-se das outras abas: não
   precisa de intensidade, precisa de diferença. Fica com o azul esbatido do nível do
   meio, contorno da cor da ação e negrito.

   ⛔ **E NÃO COMPETE MAIS COM O «GRAVAR»**, que é o ponto: numa página onde só um
   elemento é azul cheio, esse elemento é o que grava. */
.ano.atual,
.aba.atual,
.pessoa.atual {
    color: var(--accao);
    background: #EAF1F4;
    border-color: var(--accao);
    font-weight: 600;
}

/* AS PESSOAS DO EXERCÍCIO, na página de férias *(02/09/2026, docs/23)*: a mesma
   forma da barra de anos, porque é a mesma pergunta — «de quem, e de quando». */
.pessoas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1rem;
}

.pessoa {
    padding: .3rem .7rem;
    color: var(--accao);
    background: var(--fundo);
    border: 1px solid var(--linhas);
    border-radius: 4px;
    text-decoration: none;
    font-size: .9rem;
}

/* O mapa da entidade, à cabeça da barra, para quem não tem folha *(03/09/2026)*: um
   afastamento que o separa dos nomes sem lhe dar outra forma. */
.pessoa.entidade { margin-right: .6rem; }

/* O MAPA ANUAL — meses em linhas, dias em colunas *(02/09/2026, docs/23 §5)*.
   Cheio é aprovado, contorno é por aprovar; a cor diz a natureza, a forma o estado.
   Só as cores do logo: marca para férias, ação para as outras ausências, realce para a
   falta parcial, e o cinzento das linhas para o descanso. 5,5 + 31 × 1,85 + 3 rem cabe
   nos 89 rem da página; em ecrã estreito rola dentro do `.rolar`. */
.mapa-ano {
    table-layout: fixed;
    width: auto;
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
}

.mapa-ano th,
.mapa-ano td {
    padding: 0;
    border: 1px solid var(--linhas);
    text-align: center;
    height: 1.6rem;
}

.mapa-ano th.mes { width: 5.5rem; text-align: left; padding-left: .4rem; background: var(--fundo); font-weight: 600; }
.mapa-ano th.dia { width: 1.85rem; background: var(--fundo); font-weight: 500; }
.mapa-ano .uteis  { width: 3rem; background: var(--fundo); font-weight: 600; }
.mapa-ano td.descanso { background: #ECEDEC; }
.mapa-ano td.fora { background: repeating-linear-gradient(45deg, #F4F5F4 0 3px, #E4E5E4 3px 6px); }
.mapa-ano td.ferias-aprovada { background: var(--marca); color: #fff; font-weight: 600; }
.mapa-ano td.ferias-prevista { box-shadow: inset 0 0 0 2px var(--marca); color: var(--marca); font-weight: 600; }
.mapa-ano td.ausencia { background: var(--accao); color: #fff; font-weight: 600; }
.mapa-ano td.ausencia-prevista { box-shadow: inset 0 0 0 2px var(--accao); color: var(--accao); font-weight: 600; }
.mapa-ano td.falta { box-shadow: inset 0 0 0 2px var(--realce); color: var(--realce); font-size: .7rem; }

.legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    font-size: .85rem;
    margin: .75rem 0 0;
}

.legenda span::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -.2rem;
    margin-right: .35rem;
    border: 1px solid var(--linhas);
}

.legenda .l-aprovada::before { background: var(--marca); }
.legenda .l-prevista::before { box-shadow: inset 0 0 0 2px var(--marca); }
.legenda .l-ausencia::before { background: var(--accao); }
.legenda .l-falta::before { box-shadow: inset 0 0 0 2px var(--realce); }
.legenda .l-descanso::before { background: #ECEDEC; }

.estado {
    margin: 0 0 1.25rem;
    padding: .6rem .75rem;
    border-left: 4px solid var(--linhas);
    border-radius: 0 4px 4px 0;
    background: var(--fundo);
    font-size: .9rem;
}

.estado-em_preparacao { border-left-color: var(--aviso); }
.estado-aberto        { border-left-color: var(--positivo); }
.estado-encerrado     { border-left-color: var(--texto); }

.contagens {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding: 0;
}

.contagens > div {
    flex: 1 1 6rem;
    padding: .5rem .6rem;
    background: var(--fundo);
    border: 1px solid var(--linhas);
    border-radius: 4px;
}

.contagens dt { font-size: .75rem; opacity: .8; }
.contagens dd {
    margin: .15rem 0 0;
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.grelha {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.grelha th,
.grelha td {
    padding: .4rem .5rem;
    text-align: left;
    border-bottom: 1px solid var(--linhas);
}

.grelha th   { font-weight: 600; color: var(--accao); }
.grelha .num { text-align: right; }

/* O saldo por marcar é o número que interessa a quem abre o ecrã de férias:
   quem não vê quantos dias lhe faltam não os marca, e chega a dezembro com
   dias por gozar. */
.contagens .destaque {
    background: var(--superficie);
    border-color: var(--accao);
}

.contagens .destaque dd { color: var(--accao); }

/* Os avisos legais trazem a norma ao lado. Um aviso sem base legal lê-se como
   opinião da aplicação; com a norma, lê-se como o que é. */
.avisos {
    margin: 0 0 1.25rem;
    padding: 0 0 0 1.1rem;
    font-size: .85rem;
}

.avisos li {
    margin-bottom: .5rem;
    padding-left: .25rem;
}

.avisos li::marker { color: var(--aviso); }

.norma {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .35rem;
    font-size: .75rem;
    color: var(--texto);
    background: var(--fundo);
    border: 1px solid var(--linhas);
    border-radius: 3px;
    white-space: nowrap;
}

/* A regra do `.seccao` que estava aqui — `overflow-x: auto` — juntou-se à outra,
   mais abaixo, em 14/08/2026. Eram duas declarações da mesma classe a 76 linhas
   de distância, e a segunda não sabia da primeira: quem lesse uma delas ficava
   a pensar que tinha visto tudo. É o defeito que este projeto passou o dia a
   caçar nos documentos, aqui em CSS. */

/* ---------------------------------------------------------------------
   ECRÃ ③ — teclado do PIN.
   O PIN nunca entra num campo de password; entra por aqui, e o valor vai
   para um campo escondido. As quatro casas mostram quantos algarismos já
   foram escritos, nunca quais.
   --------------------------------------------------------------------- */

.reconhecido {
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--linhas);
}

.rotulo-pin {
    margin: 0 0 .75rem;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
}

.casas {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.casa {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--linhas);
    border-radius: 50%;
    transition: background-color .12s, border-color .12s;
}

.casa.cheia {
    background: var(--accao);
    border-color: var(--accao);
}

.teclado {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.tecla {
    margin: 0;
    padding: 1rem 0;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    color: var(--texto);
    background: var(--fundo);
    border: 1px solid var(--linhas);
    border-radius: 6px;
}

.tecla:hover  { background: var(--superficie); border-color: var(--accao); }
.tecla:active { background: var(--linhas); }

.tecla.vazia {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.tecla.apagar { font-size: 1.1rem; }

/* ---------------------------------------------------------------------
   M2 — definições gerais.
   Agrupadas por secção: dezasseis linhas por ordem alfabética seriam uma
   tabela de base de dados apresentada a uma pessoa.
   --------------------------------------------------------------------- */

.seccao {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--linhas);
    border-radius: 6px;
    /* Tabelas largas rolam dentro da sua caixa: o corpo da página nunca rola na
       horizontal. Vinha de uma segunda regra `.seccao`, 76 linhas acima. */
    overflow-x: auto;
}

.seccao legend {
    padding: 0 .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--accao);
}

/* SECÇÃO DOBRÁVEL — `<details>` nativo, sem uma linha de JavaScript.
   A CSP desta aplicação não admite `unsafe-inline`, e um comportamento que o
   navegador já traz não precisa de código para existir: funciona com teclado,
   sem JS, e a procura da página encontra o que está lá dentro.
   Fechada, ocupa uma linha; é o que tira o ruído de um ecrã onde o que se
   consulta é a lista e o que se preenche é a exceção. */
.seccao.dobravel {
    padding: 0;
    overflow: visible;
}

.seccao.dobravel > summary {
    padding: .7rem 1.25rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--accao);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* A seta é desenhada aqui e não deixada ao navegador: cada um põe a sua, com
   tamanhos e cores diferentes, e nenhuma acompanha a paleta. */
.seccao.dobravel > summary::-webkit-details-marker { display: none; }

.seccao.dobravel > summary::before {
    content: "▸";
    display: inline-block;
    width: 1rem;
    color: var(--accao);
}

.seccao.dobravel[open] > summary::before { content: "▾"; }

.seccao.dobravel[open] > summary {
    border-bottom: 1px solid var(--linhas);
    margin-bottom: 1rem;
}

.seccao.dobravel > summary:focus-visible {
    outline: 2px solid var(--accao);
    outline-offset: -2px;
}

.seccao.dobravel > form { padding: 0 1.25rem 1.25rem; }

/* ⚠ O MESMO ESPAÇAMENTO PARA CONTEÚDO QUE NÃO É FORMULÁRIO *(21/08/2026)*. A regra
   acima nasceu quando tudo o que se dobrava era um formulário — as duas secções da
   gestão de contas. A página de instalação dobra INSTRUÇÕES, e sem isto o texto
   encostava-se à borda da caixa enquanto o formulário ao lado respirava.
   Duas regras e não uma lista de seletores: a de cima é a que já está publicada e
   provada, e alargá-la era mexer no que funciona para acomodar o que é novo. */
.seccao.dobravel > .instrucoes { padding: 0 1.25rem 1.25rem; }

/* A lista numerada das instruções. Os passos são curtos e leem-se de uma vez:
   o espaço entre eles é o que os separa como PASSOS e não como linhas de um
   parágrafo partido. */
.instrucoes ol { margin: 0; padding-left: 1.4rem; }
.instrucoes li { margin: .4rem 0; }
.instrucoes .nota { margin: 1rem 0 0; }

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

.definicao label {
    margin-top: 0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .8rem;
    font-weight: 600;
}

.definicao .nota  { margin: .15rem 0 .3rem; font-size: .8rem; }

.fixo {
    margin: .25rem 0 0;
    padding: .55rem .6rem;
    background: var(--fundo);
    border: 1px dashed var(--linhas);
    border-radius: 4px;
}

/* A BARRA DE NAVEGAÇÃO *(19/08/2026)* — uma forma só, dois feitios.
   Num ecrã largo as ligações ficam em linha e o ☰ desaparece; num estreito, o ☰
   é o que se vê e as ligações escondem-se até alguém lhe tocar.
   ⚠ SEM UMA LINHA DE JAVASCRIPT: o que abre e fecha é uma CAIXA DE SELEÇÃO
   escondida, com a lista irmã dela. A política de segurança não admite
   `unsafe-inline`, e um menu que dependesse de script deixaria de abrir no dia em
   que o script falhasse. *(Esta nota dizia `<details>` até 19/08/2026, quando o
   `<details>` já tinha sido substituído por ter deixado a barra sem ligação
   nenhuma em produção — a razão inteira está no bloco do interruptor, abaixo.)* */
/* ⚠ TUDO À DIREITA *(19/08/2026, pedido do Filipe: «prefiro o menu à direita»)*.
   O logótipo ocupa o canto esquerdo, logo acima, e a barra equilibra-o do outro
   lado — em vez de os dois disputarem a esquerda. Em ecrã estreito é o ☰ que fica
   à direita, ao alcance do polegar.

   ⚠ **A BARRA FICOU SÓ COM O MENU**, e é isso que lhe dá a linha inteira: o nome
   e o «Sair» viviam aqui dentro, encostados à direita, e o menu tinha de dividir a
   linha com os dois. Passaram os dois para o `.canto`, fora do fluxo.
   *(Houve uma versão intermédia, de meia hora, com o nome na PONTA ESQUERDA desta
   linha e `space-between` a separá-los. O Filipe esclareceu que «à esquerda» era à
   esquerda DO BOTÃO, não do ecrã.)* */
.barra {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    margin: -0.5rem 0 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--linhas);
}

/* ⚠ AS LIGAÇÕES SÃO O ELEMENTO GRANDE DA BARRA *(19/08/2026)*: 1,15rem contra as
   0,95rem que aqui estavam. O pedido era «mais visibilidade», e a escolha foi
   ABAS COM SUBLINHADO e não pastilhas — as pastilhas já são a linguagem do
   «Semana · Mês», que é navegação de SEGUNDO nível, e repetir a forma nos dois
   níveis punha quatro pastilhas no ecrã sem se saber quais mandam. */
.barra a,
.barra .atual {
    display: inline-block;
    padding: .45rem 0;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--accao);
}

.barra a:hover { text-decoration: underline; }

/* ONDE SE ESTÁ NÃO É UMA LIGAÇÃO, e é o que distingue a página atual sem
   depender só da cor: quem não vê a diferença de tom vê que não há sublinhado e
   lê o `aria-current` no leitor de ecrã. O traço subiu de 2 para 3 px com a letra
   — um traço fino debaixo de letra grande lê-se como acidente. */
.barra .atual {
    color: var(--texto);
    font-weight: 600;
    border-bottom: 3px solid var(--marca);
}

/* ⚠ O CANTO SUPERIOR DIREITO, A 5 mm DO TOPO DO CARTÃO *(19/08/2026, pedido do
   Filipe)*. Leva o nome e o «Sair», e sai do fluxo para encostar ao canto; a
   referência é a `.folha`, que ganhou `position: relative` para isso.

   ⚠ OS 5 mm SÃO OS DO CSS, e não os de uma régua: um milímetro de CSS é 96/25,4
   de píxel de referência — 5 mm são 18,9 px —, e num telemóvel o resultado
   depende da densidade do ecrã. É a medida pedida, dita na unidade pedida; quem a
   quiser presa ao texto troca por `1.2rem`, que dá o mesmo em ecrã normal.

   O `right` acompanha o preenchimento lateral da folha, para o conjunto alinhar
   com a margem do conteúdo em vez de flutuar a meio dela.

   ⚠ **EMPILHADO — O NOME POR CIMA DO BOTÃO** *(escolhido pelo Filipe em
   19/08/2026, com os dois desenhos à vista; a alternativa era lado a lado)*. E
   com ele **os 5 mm passam a ser do CONJUNTO, não do botão**, que fica a cerca de
   11 mm do topo. **Não é desvio ao pedido, é aritmética:** 5 mm são 18,9 px e a
   linha do nome ocupa uns 22 px — manter o botão nos 5 mm punha o nome acima da
   margem do cartão, fora dele.

   ⚠ O `align-items: flex-end` É O QUE FAZ ISTO PARECER UM BLOCO: alinha o nome e o
   botão pela margem DIREITA, que é a que se lê. Sem ele, os dois centravam-se um
   sobre o outro e o botão, sendo mais curto, ficava a flutuar a meio do nome.

   ⚠ O `max-width` É A GUARDA DO LOGÓTIPO, e não decoração: o logótipo tem 11rem e
   começa no canto oposto, à mesma altura. Sem este limite, um nome comprido num
   ecrã estreito crescia para a esquerda até lhe passar por cima — os dois estão
   fora do fluxo um do outro e nada os empurra. Com ele, o nome corta-se com
   reticências antes de chegar lá. */
.canto {
    position: absolute;
    top: 5mm;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    max-width: calc(100% - 13rem);
}

/* QUEM ESTÁ, POR CIMA DO BOTÃO. Deliberadamente MAIS PEQUENO do que o menu: é
   identificação, não navegação, e o contraste entre os dois é o que dá
   visibilidade ao menu — aumentar tudo não aumenta nada. */
.canto .quem {
    min-width: 0;
    overflow: hidden;
    font-size: .95rem;
    color: var(--texto);
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: .8;
}

/* A SEGUNDA PRATELEIRA DO CANTO: «Instalar app | Sair da app» *(21/08/2026, ditado
   pelo Filipe ao ver o ecrã)*. O «Instalar» esteve na barra de navegação durante
   algumas horas do mesmo dia e saiu de lá — «é uma função auxiliar para fazer uma vez
   e não deve ficar no menu principal onde estão as ações do dia a dia».

   ⚠ O `flex-wrap` NÃO É PRECAUÇÃO VAGA, é a resposta a uma medida. O `.canto` tem
   `max-width: calc(100% - 13rem)` — a guarda que impede este bloco de passar por cima
   do logótipo, que tem 11rem e está à MESMA ALTURA do outro lado, fora do fluxo, sem
   nada que os empurre. Num cartão de telemóvel isso deixa cerca de 11rem, e o par não
   cabe numa linha só: sem a quebra, passava por cima do logótipo. Medido no desenho
   antes de se escrever isto, e não suposto.

   ⚠ E O SEPARADOR SAI COM A QUEBRA. Uma barra vertical entre duas linhas não separa
   nada — fica um traço solto no meio do canto. Some no mesmo limiar em que a barra de
   navegação se recolhe para hambúrguer, que é onde o espaço acaba. */
.canto-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0 .4rem;
}

/* O «Instalar app» é uma LIGAÇÃO e o «Sair da app» é um BOTÃO — POST com token —,
   mas leem-se igual, e é o que faz o par parecer um par. A regra `button.ligacao`
   não alcança um `<a>`, e é por isso que isto existe: as duas medidas têm de sair
   daqui iguais, ou o canto fica com duas letras diferentes lado a lado. */
.canto-linha a.ligacao {
    padding: .35rem 0;
    font-size: .85rem;
    color: var(--accao);
    text-decoration: none;
}

.canto-linha a.ligacao:hover { text-decoration: underline; }

.canto-linha .sep {
    font-size: .85rem;
    color: var(--linhas);
}

@media (max-width: 40rem) {
    .canto-linha .sep { display: none; }
}

/* ---------------------------------------------------------------------
   ⛔ **QUEM JÁ INSTALOU A APLICAÇÃO NÃO É CONVIDADO A INSTALÁ-LA**
   *(29/08/2026, o Filipe a ver o canto: «está a oferecer para instalar
   novamente a mesma app?»)*.

   O `display-mode: standalone` responde pela JANELA em que a página está
   aberta, e é essa a pergunta certa: quem abrir o mesmo endereço num
   separador normal volta a ver o convite, porque naquele computador pode
   não estar instalada. É a mesma condição que o `recursos/instalar.js`
   usa dentro da página de instalação.

   ⚠ **O iOS NÃO ENTRA AQUI**, e é limitação conhecida: os atalhos do ecrã
   principal do iPhone não respondem a esta condição — respondem ao
   `navigator.standalone`, que é JavaScript. O convite continua visível
   nesse caso, e a página para onde leva explica-o na mesma. Trocar isto
   por um guião no layout inteiro para cobrir um sistema não compensa.
   --------------------------------------------------------------------- */
@media (display-mode: standalone) {
    .canto-linha .oferta-instalar { display: none; }
}

/* ⚠ O BOTÃO NÃO ENCOLHE, e o nome é que cede. Empilhados, nada os comprime um ao
   outro — mas a regra fica: se algum dia voltarem à mesma linha, sem o `flex: none`
   um nome comprido comprimia o «Sair» até o partir em duas linhas, e a saída é a
   única coisa naquele canto que tem de continuar legível. */
.barra-sair {
    flex: none;
    margin: 0;
    white-space: nowrap;
}

/* O «Sair» é um BOTÃO porque é um POST com token — uma ligação bastaria a um
   sítio terceiro para terminar a sessão de quem a visitasse —, mas lê-se como
   ligação: é uma saída, não a ação principal de nenhuma página. */
/* ⚠ MAIS PEQUENO DO QUE O MENU, de propósito *(19/08/2026)*: .85rem contra as
   1,15rem das abas. É uma saída, não a ação de nenhuma página, e é este contraste
   que faz o menu ganhar o olhar. */
button.ligacao {
    margin: 0;
    padding: .35rem 0;
    font: inherit;
    font-size: .85rem;
    color: var(--accao);
    background: none;
    border: none;
    cursor: pointer;
}

button.ligacao:hover { text-decoration: underline; }

/* ⚠ O INTERRUPTOR É UMA CAIXA DE SELEÇÃO ESCONDIDA, e a lista é IRMÃ dela.
   A primeira versão pôs as ligações dentro de um `<details>` e mandou mostrá-las
   com `!important` em ecrã largo. Não funcionou: o navegador esconde o conteúdo
   de um `<details>` fechado por um mecanismo interno que uma regra de autor no
   filho não alcança, e a barra ficou SEM LIGAÇÃO NENHUMA em produção — o acesso
   às férias desapareceu para toda a gente. Aqui o `display` da lista é decidido
   só por estas regras, e não há nada do navegador para sobrepor.
   ⚠ A CAIXA FICA FOCÁVEL, e é o que mantém o menu utilizável só com teclado:
   esconde-se com `opacity`, nunca com `display: none`, que a tiraria da ordem de
   tabulação. */
.menu-alternar {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.menu-botao {
    display: none;          /* ecrã largo: não é preciso */
    width: 2rem;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--accao);
    cursor: pointer;
    user-select: none;
}

.menu-alternar:focus-visible + .menu-botao {
    outline: 2px solid var(--realce);
    outline-offset: 2px;
}

/* ECRÃ LARGO: as ligações em linha, sempre à vista. O espaço entre elas subiu de
   1,25 para 2rem com a letra: abas grandes e encostadas leem-se como uma frase. */
.menu-lista {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 40rem) {
    /* ECRÃ ESTREITO: volta a ser um menu. O ☰ aparece, e a lista só se vê com a
       caixa marcada — que é o que o `<label>` faz ao ser tocado. */
    .menu-botao { display: block; }

    .menu-lista { display: none; }

    .menu-alternar:checked ~ .menu-lista {
        display: block;
        position: absolute;
        /* Cai a partir do ☰, que está à direita — abrir para a esquerda punha-a
           debaixo do logótipo. */
        right: 1.5rem;
        z-index: 5;
        margin-top: 2.5rem;
        padding: .5rem 1rem;
        background: var(--superficie);
        border: 1px solid var(--linhas);
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }

    .menu-lista li { border-bottom: 1px solid var(--linhas); }
    .menu-lista li:last-child { border-bottom: none; }
    .menu-lista a,
    .menu-lista .atual { display: block; padding: .6rem 0; }
}

/* ⚠ O `.menu` SAIU EM 19/08/2026, com a página `auth/entrou` que o usava. Era o
   menu vertical da página de entrada, que passou a ser a grelha da semana; as
   ligações vivem agora na `.barra`, acima. Fica a nota e não a regra: uma regra
   sem quem a use é código morto, e o varrimento do D-18 confirmou zero
   ocorrências de `class="menu"` fora deste ficheiro. */

/* Ecrã ⑤ — o que se vai confirmar, dito antes de se pedir o PIN. Uma
   confirmação que não diz o que confirma é um gesto vazio. */
.ato {
    margin: 0 0 1rem;
    padding: .75rem;
    background: var(--fundo);
    border-left: 4px solid var(--aviso);
    border-radius: 0 4px 4px 0;
}

/* ⛔ **À ESQUERDA, COMO TUDO O RESTO** *(29/08/2026, decisão do Filipe)*. Esteve
   ao centro até esse dia e à direita durante uma hora — e a direita foi um erro
   meu de premissa: recomendei-a a dizer que o «Voltar» é a alternativa a um botão
   que está à direita, e **os botões desta aplicação estão à ESQUERDA** — o
   `.accoes` não tem alinhamento nenhum. O «Cancelar e voltar» ficava do lado
   oposto ao «Encerrar» que ele cancela.

   ⚠ **E À DIREITA NEM SEQUER FICAVA À DIREITA DA PÁGINA:** o `.alternativa` é um
   `<p>`, e a regra dos 62rem que impede a prosa de ficar em linhas ilegíveis
   alinhava-o à direita DESSES 62rem, dentro de um cartão de 89rem. Ficava a meio
   caminho de nada — foi o que o Filipe viu.

   Alinhado à esquerda, fica na vertical do botão que está por cima, e a página
   inteira passa a ter uma só margem de leitura. */
.alternativa {
    margin: 1.5rem 0 0;
    text-align: left;
    font-size: .85rem;
}

.alternativa a { color: var(--accao); }

/* Duas ligações a partilhar a linha, uma em cada extremo *(31/08/2026)*. O
   `margin-left: auto` — e não `space-between` — é o que põe a segunda à direita
   **mesmo quando está sozinha**, que é o caso comum: a da esquerda é poder de quem
   gere. O `flex-wrap` deixa-as empilhar em ecrã estreito. */
.alternativa.entre {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: baseline;
}

.alternativa.entre .a-direita { margin-left: auto; }

/* ---------------------------------------------------------------------
   M6 — a grelha do registo de horas.

   O INDICADOR DO MÊS NÃO É UM ALERTA, e o estilo tem de o dizer: a RN-07
   proíbe tratar um mês por completar durante o mês como defeito. Por isso
   o `mes-por_completar` leva a cor de AVISO e nunca a de erro — o vermelho
   fica para o que a aplicação recusa, e aqui não recusa nada.
   --------------------------------------------------------------------- */

.mes {
    margin: 0 0 1.5rem;
    padding: .85rem 1rem;
    background: var(--fundo);
    border-left: 4px solid var(--linhas);
    border-radius: 0 4px 4px 0;
}

.mes-titulo {
    margin: 0 0 .6rem;
    font-size: 1rem;
    font-weight: 600;
}

.mes .contagens { margin-bottom: .5rem; }

.mes-fecha         { border-left-color: var(--positivo); }
.mes-por_completar { border-left-color: var(--aviso); }
.mes-extra         { border-left-color: var(--realce); }

.semana-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 1rem;
}

.semana-rotulo { font-size: .95rem; }

/* Sete colunas de dias mais a tarefa não cabem num telemóvel, e encolher a
   letra até caber tornaria a grelha ilegível. Rola na horizontal, que é o
   comportamento que uma folha de horas sempre teve em papel largo. */
.rolar { overflow-x: auto; }

.grelha.horas { min-width: 44rem; }

.grelha.horas .tarefa { text-align: left; }

.grelha.horas th.dia {
    vertical-align: bottom;
    white-space: nowrap;
}

/* ⚠ SETE COLUNAS DE DIA COM A MESMA LARGURA, E O CONTEÚDO CENTRADO *(19/08/2026,
   pedido do Filipe depois de olhar para o ecrã publicado: «17, 18 e 19 estão com
   espaços muito largos e 20 a 23 estão encostados; poderiam ser equidistantes», e
   «o número da data está mais à direita do que o retângulo»)*.

   ⚠ **A CAUSA FOI A ETAPA 0 DO `docs/13`**, e o defeito não estava nela: ao tirar a
   caixa aos dias que ainda não chegaram, as colunas passaram a ter larguras
   diferentes — uma célula com `input` de 3,6rem é larga, uma célula vazia encolhe
   até ao conteúdo. Antes disso as sete tinham caixa e ficavam iguais por acidente.
   **É a terceira vez que uma alteração a esta grelha estraga o que não tocou**, e a
   lição é a mesma do A-41: ao mudar o que uma célula contém, ir ver o que decidia a
   largura dela.

   ⚠ **É A TÉCNICA DA VISTA MENSAL, e não uma invenção:** lá são 31 colunas de
   2,25rem com o número e o valor centrados, e o comentário respectivo já dizia que
   «trinta e uma colunas iguais leem-se melhor do que trinta e uma larguras
   diferentes». Este ecrã tinha ficado a divergir dela.

   ⚠ **A LARGURA É DECLARADA E NÃO CALCULADA**, e é o que a torna igual nas sete: o
   `table-layout` fica automático, pelo que a coluna da tarefa continua a absorver o
   espaço que sobra — e é ela que deve crescer, porque leva nomes de tarefa. As
   5,2rem cobrem a caixa de 3,6rem com o seu preenchimento e a moldura, mais o da
   célula; e em ecrã estreito a tabela cresce além das 44rem e a `.rolar` trata do
   resto, como já tratava.

   ⚠ **CENTRADO, e não à direita como estava:** com a coluna mais larga do que a
   caixa, alinhar à direita deixava o número do dia a leste do retângulo que ele
   encima — que é o que o Filipe viu. O que continua alinhado à direita é o texto
   DENTRO da caixa (`.celula`), para as horas alinharem pela vírgula. */
.grelha.horas:not(.mensal) th.dia,
.grelha.horas:not(.mensal) td.dia {
    width: 5.2rem;
    text-align: center;
}

/* ⚠ QUEM CENTRA A PRÓPRIA CAIXA é o `text-align: center` da célula, acima: um
   `input` é de nível de linha, e o alinhamento do texto da célula posiciona-o. Não
   é preciso regra nenhuma para ele — houve aqui uma, a repetir o `text-align:
   right` que a `.celula` já tem, e saiu por não fazer nada. */

/* O CABEÇALHO DO DIA, NOS DOIS ECRÃS: número em cima, nome do dia em baixo
   *(18/08/2026, pedido do Filipe)*. A ordem é a mesma na semana e no mês, para
   quem troca de vista ler a coluna da mesma maneira — e é ela que dá à coluna a
   largura de três caracteres em vez de cinco. */
.grelha.horas .dia-numero,
.grelha.horas .dia-semana,
.grelha.horas .dia-motivo,
.grelha.horas .dia-falta {
    display: block;
}

.grelha.horas .dia-semana,
.grelha.horas .dia-motivo,
.grelha.horas .dia-falta {
    font-size: .7rem;
    font-weight: 400;
    opacity: .8;
}

/* O nome do dia é orientação e não dado: fica mais claro do que o motivo, que
   quando aparece é porque diz algo que ninguém adivinha. */
.grelha.horas .dia-semana { opacity: .7; }

.grelha.horas .dia-falta { color: var(--aviso); opacity: 1; }

/* O tipo de dia distingue-se pelo FUNDO da coluna e não só pela cor do
   texto: quem imprima o ecrã em cinzentos continua a ver a diferença.

   ⛔ O CINZENTO DO DESCANSO PASSOU DE `--fundo` A `#E3E6E3` (31/08/2026, escolha do
   Filipe entre três variantes numa maqueta). O `--fundo` é `#F4F5F4` e sobre a
   superfície branca não se via de relance — que é a única coisa que esta marca tem
   de fazer. Sábado, domingo e feriado são A MESMA classe (`Grelha::classe()` devolve
   `descanso` para os três), e por isso um cinzento serve os três.

   ⚠ E A COLUNA TEM DE SER CONTÍNUA, do cabeçalho ao rodapé. Antes disto o fundo
   vivia só no `<th>` do cabeçalho: as caixas onde se escreve não tinham nada, e na
   vista mensal era pior — as células só de leitura levavam a classe e as EDITÁVEIS
   não, pelo que a marca desaparecia exactamente onde se escreve. */
.grelha.horas .dia-descanso { background: #E3E6E3; }
.grelha.horas .dia-ausencia { background: #FBF2DE; color: var(--texto); }
.grelha.horas .dia-fora     { background: var(--fundo); opacity: .55; }

/* A caixa continua a ler-se como caixa sobre o cinzento: um pouco mais clara do
   que a célula, com o contorno mais escuro. Sem isto, uma caixa branca sobre
   cinzento parecia o dia útil e desfazia a distinção que a coluna acabou de fazer. */
.grelha.horas td.dia-descanso .celula {
    background: #E9EBE9;
    border-color: #CFD2CF;
}

/* A linha do centro de custo é mais escura do que as das tarefas — é `--fundo` em
   todas as colunas —, e no fim de semana acompanha, senão a coluna cinzenta ficava
   com uma faixa mais clara no meio. */
.grelha.horas tr.centro th.dia-descanso,
.grelha.horas tr.centro td.dia-descanso { background: #D7DAD7; }

.grelha.horas tr.centro th,
.grelha.horas tr.centro td {
    background: var(--fundo);
    font-weight: 600;
}

.grelha.horas .centro-designacao {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    opacity: .75;
}

.grelha.horas tfoot th,
.grelha.horas tfoot td {
    border-top: 2px solid var(--linhas);
    font-weight: 600;
}

/* Um dia acima do limite EXISTE na base — foi importado assim, ou o limite
   mudou depois — e a grelha mostra-o em vez de o esconder. Quem recusa é a
   RN-01, no gravar. */
.grelha.horas td.excede { color: var(--erro); font-weight: 700; }

/* A LINHA DA FALTA NÃO É TRABALHO, e o estilo tem de o dizer: não pertence a
   centro de custo nenhum, não entra no total do dia, e não sai na folha como
   hora imputada. Cor de aviso, e nunca de erro — faltar não é defeito, é um
   facto que a conta do mês precisa de conhecer. */
.grelha.horas tr.falta th,
.grelha.horas tr.falta td {
    border-top: 2px solid var(--linhas);
    background: var(--fundo);
}

.grelha.horas tr.falta th { font-weight: 600; }
.grelha.horas input.celula.falta { border-color: var(--aviso); }

/* A célula de lançamento. Estreita e alinhada à direita, porque o que se
   escreve são sempre quatro caracteres — 3,25 — e uma caixa larga só afasta
   os dias uns dos outros. */
.celula {
    width: 3.6rem;
    padding: .2rem .3rem;
    text-align: right;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-radius: 3px;
}

.celula:focus {
    outline: 2px solid var(--accao);
    outline-offset: 1px;
    border-color: var(--accao);
}

/* Um dia que não recebe horas não fica com uma caixa desativada: fica sem
   caixa nenhuma. Uma caixa cinzenta convida a tentar escrever nela. */
.grelha.horas td.bloqueada { opacity: .5; }

/* A COLUNA «DISTRIBUIR» — M6.4.

   ⚠ TEM DE SE VER DE RELANCE QUE NÃO É UMA COLUNA DE DIAS. As células dos
   dias são o que está lançado; esta é um PEDIDO por cumprir, que desaparece
   assim que for gravado. Daí o fundo próprio e a barra vertical a separá-la
   do total — sem elas, seria mais uma caixa numa fila de caixas, e escrever
   nela por engano poria uma semana inteira onde se queria um dia. */
.grelha.horas .distribuir {
    background: var(--fundo);
    border-left: 2px solid var(--linhas);
}

.grelha.horas th.distribuir {
    font-size: .78rem;
    color: var(--accao);
}

/* ---------------------------------------------------------------------
   O «DISTRIBUIR» DENTRO DA SUA COLUNA *(29/08/2026, pedido do Filipe:
   «alinhado com a coluna das horas a distribuir — em cima e em baixo —
   fica mais intuitivo»)*.

   Estava sozinho no fim da página, longe das células que lê. São dois,
   um em cada ponta da coluna, pela mesma razão que o «Gravar» está no
   princípio e no fim de uma página que rola: quem escreve na última
   linha não devia ter de subir para agir.

   ⚠ **NÃO É O AZUL CHEIO.** A hierarquia de 24/08 reserva-o ao «Gravar»
   da página, e este é um ato que PREPARA — escreve uma proposta que
   ainda não está gravada. Leva a forma do `button.segundo`: branco com
   contorno azul, na largura da coluna.
   --------------------------------------------------------------------- */
.grelha.horas .na-coluna {
    display: block;
    width: 100%;
    margin: 0;
    padding: .3rem .2rem;
    font: inherit;
    font-weight: 600;
    font-size: .72rem;
    color: var(--accao);
    background: var(--superficie);
    border: 1px solid var(--accao);
    border-radius: 3px;
    cursor: pointer;
}

.grelha.horas .na-coluna:hover { background: var(--fundo); }

.celula.pedido {
    width: 4rem;
    border-color: var(--accao);
    border-style: dashed;
}

.celula.pedido:focus { border-style: solid; }

/* ---------------------------------------------------------------------
   M6.4 — a distribuição retrospetiva.

   DUAS COISAS QUE O ESTILO TEM DE DIZER, e são as duas que separam esta
   etapa de um botão qualquer:

   ① A FAIXA DA PRÉ-VISUALIZAÇÃO é a única coisa que distingue horas
      propostas de horas gravadas. Leva a cor de aviso e ocupa a largura
      toda de propósito — é o risco assumido desta forma de pré-visualizar
      (docs/08 §8), e um aviso discreto seria o mesmo que não o ter.
      Cor de AVISO e não de erro: nada correu mal, falta é decidir.

   ② O PAINEL não é um formulário de gravação, e por isso fica fechado
      até se precisar dele. A grelha é o que se consulta; isto é o que se
      usa para a encher de uma vez.
   --------------------------------------------------------------------- */

.previsualizacao {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    background: #FBF2DE;
    border-left: 4px solid var(--aviso);
    border-radius: 0 4px 4px 0;
}

.previsualizacao p { margin: 0; font-size: .9rem; }
.previsualizacao .previsao { margin-top: .4rem; font-variant-numeric: tabular-nums; }

/* O QUE FICOU DE FORA. Destacado dentro da faixa, porque é a única maneira de
   quem copiou uma semana saber que ela não veio inteira — e a folha de horas
   que daqui sai é prova documental. */
.previsualizacao .cortadas {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--aviso);
    font-weight: 600;
}

.distribuir { margin: 0 0 1.25rem; }

.distribuir > details {
    border: 1px solid var(--linhas);
    border-radius: 6px;
    background: var(--fundo);
}

.distribuir summary {
    padding: .6rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--accao);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.distribuir summary::-webkit-details-marker { display: none; }

.distribuir summary::before {
    content: "▸";
    display: inline-block;
    width: 1rem;
    color: var(--accao);
}

.distribuir details[open] summary::before { content: "▾"; }

.distribuir details[open] summary {
    border-bottom: 1px solid var(--linhas);
    margin-bottom: .9rem;
}

.distribuir summary:focus-visible {
    outline: 2px solid var(--accao);
    outline-offset: -2px;
}

.distribuir .campos {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    padding: 0 .9rem;
}

/* A tarefa leva o espaço que houver, as horas levam o que precisam: são
   quatro caracteres, e uma caixa larga só afastaria os dois campos. */
.distribuir .campo       { flex: 1 1 18rem; min-width: 0; }
.distribuir .campo.curto { flex: 0 0 7rem; }

.distribuir .campo label {
    display: block;
    margin-bottom: .2rem;
    font-size: .8rem;
    opacity: .85;
}

.distribuir .campo select,
.distribuir .campo input {
    width: 100%;
    padding: .4rem .5rem;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-radius: 4px;
}

.distribuir .dias-escolha {
    margin: .9rem .9rem 0;
    padding: .5rem .7rem .7rem;
    border: 1px solid var(--linhas);
    border-radius: 4px;
    background: var(--superficie);
}

.distribuir .dias-escolha legend {
    padding: 0 .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--accao);
}

.dia-escolha {
    display: inline-block;
    margin: .15rem .8rem .15rem 0;
    font-size: .85rem;
    white-space: nowrap;
}

/* Um dia de descanso pode receber horas — a RN-02 pede confirmação, não
   proíbe —, mas não vem marcado e o fundo diz porquê. */
.dia-escolha.dia-descanso { background: var(--fundo); padding: 0 .3rem; border-radius: 3px; }
.dia-escolha.bloqueada    { opacity: .5; }

.distribuir .accoes  { padding: 0 .9rem; margin-top: .9rem; }
.distribuir .nota    { padding: 0 .9rem .9rem; margin-top: .6rem; }

.ato .confirmar {
    display: block;
    margin: .75rem 0 .5rem;
    font-size: .9rem;
}

.ato label[for] {
    display: block;
    margin-bottom: .2rem;
    font-size: .8rem;
    opacity: .85;
}

/* ---------------------------------------------------------------------
   M11 — gestão de contas. A coluna que interessa é a da password: é ela
   que separa uma conta que EXISTE de uma conta que FUNCIONA.
   --------------------------------------------------------------------- */

.grelha.contas { min-width: 42rem; }

.grelha.contas .mono {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .85em;
}

.por-definir { color: var(--aviso); }

/* Formulário dentro de uma célula: o campo e o botão na mesma linha, sem
   quebrar a tabela. */
.em-linha {
    display: flex;
    gap: .3rem;
    align-items: center;
}

.em-linha input[type=email] {
    flex: 1 1 12rem;
    min-width: 8rem;
    padding: .25rem .35rem;
    font: inherit;
    font-size: .85rem;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-radius: 3px;
}

.em-linha button {
    padding: .25rem .5rem;
    font-size: .78rem;
    white-space: nowrap;
}

.ato input[type=text] {
    width: 100%;
    padding: .45rem .5rem;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-radius: 4px;
}

/* ---------------------------------------------------------------------
   AFETAÇÕES EM LOTE — as 85 tarefas do ano com caixa de seleção,
   agrupadas por centro de custo (17/08/2026)

   ⚠ AS COLUNAS SÃO DO CSS, NÃO DE JAVASCRIPT. Um centro com 19 tarefas
   numa lista de uma coluna dava um formulário com ecrãs de altura; em
   colunas, cabe. O `columns` quebra sozinho conforme a largura, pelo
   que num telemóvel volta a uma coluna sem nada a decidir.
   --------------------------------------------------------------------- */

.afetacoes { margin: 0 0 1rem; }

.afetacoes .centro {
    margin: 0 0 .9rem;
    padding: .5rem .8rem .7rem;
    border: 1px solid var(--linhas);
    border-radius: 4px;
    background: var(--superficie);
}

.afetacoes .centro legend {
    padding: 0 .3rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--accao);
}

.afetacoes .centro legend .mono { font-weight: 700; }

/* A contagem «1 de 2» é informação de apoio: mesma cor das notas, e não
   compete com o nome do centro de custo. */
.afetacoes .centro legend .nota {
    font-weight: 400;
    font-size: .78rem;
    margin-left: .4rem;
}

.afetacoes .tarefas {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
    columns: 22rem;
    column-gap: 1.4rem;
}

.afetacoes .tarefas li {
    /* Uma tarefa nunca fica partida entre duas colunas: a caixa de seleção
       numa e o nome na outra seria ilegível. */
    break-inside: avoid;
    margin: 0 0 .2rem;
}

.afetacoes .tarefas label {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    font-size: .88rem;
    line-height: 1.45;
    cursor: pointer;
}

.afetacoes .tarefas input[type=checkbox] {
    flex: 0 0 auto;
    margin: 0;
    /* Alinha a caixa com a primeira linha do texto, e não com o meio do
       bloco, quando a designação da tarefa ocupa duas linhas. */
    transform: translateY(.15rem);
}

/* Uma tarefa com horas lançadas não se retira: a caixa fica desativada, e o
   número explica porquê a quem olha. ⚠ Mas quem protege a valer é o
   repositório, porque uma caixa desativada NÃO É SUBMETIDA — o dono deste
   facto é o docblock de `RepositorioExercicio::afetacoes_em_lote()`. */
.afetacoes .tarefas input[type=checkbox]:disabled { cursor: not-allowed; }

.afetacoes .tarefas label:has(input:disabled) { cursor: default; }

.afetacoes .tarefas .nota {
    font-size: .76rem;
    white-space: nowrap;
}

.afetacoes .centro button { margin: .2rem 0 0; }

.afetacoes .accoes { margin-top: .3rem; }

/* A linha da atividade por defeito, e a que a assinala na tabela (17/08/2026).
   Era um botão por linha; passou a uma lista só. */
.entrada.defeito { margin: .4rem 0 .8rem; }

.grelha tr.defeito td { background: var(--fundo); }

.grelha tr.defeito .nota {
    font-size: .76rem;
    color: var(--accao);
    margin-left: .4rem;
}

/* O bloco do fecho do mês passou a ter uma lista antes do botão. */
.fecho label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }

/* ⛔ O SELETOR E O BOTÃO NA MESMA LINHA *(31/08/2026, pedido do Filipe)*. O `select`
   global é `display: block` — resolve outro problema, o de um seletor solto herdar a
   largura da página — e aqui empurrava o botão para a linha de baixo, longe do que ele
   lê. O `flex` põe-nos lado a lado e deixa-os empilhar em ecrã estreito. */
.fecho .escolha {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* ⛔ O `margin-top: 1.5rem` DO BOTÃO GLOBAL DESLOCAVA-O 12 px PARA BAIXO
   *(31/08/2026, o Filipe a ver o ecrã: «parece que tem de subir 12 px»)* — e a conta
   é exactamente essa: numa linha centrada, o que se centra é a **caixa de margens**,
   pelo que 24 px de margem em cima empurram o botão visível meia margem para baixo.
   **A estimativa dele estava certa ao pixel.** O `margin-top` do botão global serve
   um botão que fecha um formulário, não um que partilha a linha com o campo que lê. */
.fecho .escolha button { margin-top: 0; }

/* ⚠ MAIS ESTREITO DO QUE O CONTEÚDO *(mesmo pedido)*. A largura vinha do rótulo mais
   comprido da lista — «A01-ASSOCIACAO · A 2.3 · Reuniões e representação» —, e um
   seletor de 30rem ao lado de um botão desequilibrava a linha. O nome completo continua
   à vista quando a lista abre. */
.fecho select {
    margin-top: 0;
    margin-right: 0;
    max-width: 20rem;
}

/* ---------------------------------------------------------------------
   OS PARÂMETROS DO ANO, EDITÁVEIS NA TABELA (17/08/2026)

   Uma tabela com campos não pode usar a largura de um formulário: o
   `input` global tem `width: 100%`, e numa célula de tabela isso empurra
   a coluna para a largura do que lá cabe. Aqui a largura é do CONTEÚDO —
   quatro dígitos para as horas, dez para uma data.
   --------------------------------------------------------------------- */

.grelha.ano input[type="text"] {
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding: .35rem .45rem;
    font-size: .9rem;
}

/* Os números alinham à direita, como o resto da coluna. */
.grelha.ano td.num input[type="text"] { text-align: right; }

.grelha.ano input.curto { width: 5rem; }
.grelha.ano input.data  { width: 7.5rem; font-variant-numeric: tabular-nums; }

/* A coluna do «Retirar» não estica: é do tamanho do botão. */
.grelha.ano td:last-child { width: 1%; white-space: nowrap; }

.grelha.ano td:last-child button { margin-top: 0; }

/* Uma data escreve-se como 2026-03-15, e os algarismos alinham. */
.entrada input.data {
    width: 10rem;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   CAMPOS EM LINHA, DENTRO DE UM FORMULÁRIO *(19/08/2026, pedido do Filipe na
   página de férias: «de, até e tipo poderiam ficar numa linha, pois tem muito
   espaço à direita»)*.

   ⚠ **A ETIQUETA É `display: block` EM TODA A APLICAÇÃO**, e é isso que obriga ao
   `.campo`: sem uma caixa por par, três pares numa linha davam seis elementos em
   fila e a etiqueta de um aterrava ao lado da caixa do anterior. O `.campo` é o par
   — etiqueta em cima, campo em baixo — e é ele que se põe em linha.

   ⚠ **ENVOLVE-SE COM `wrap`, e não é zelo:** num telemóvel três campos não cabem em
   linha, e sem isto ou transbordavam do cartão ou encolhiam abaixo do legível. Com
   ele voltam a empilhar-se sozinhos, que é o desenho que havia.

   ⚠ **O `align-items: flex-end` ALINHA PELA BASE DAS CAIXAS**, não pelo topo das
   etiquetas: «Observações» e «De» têm alturas de etiqueta iguais hoje, mas uma
   etiqueta que passe a duas linhas desalinhava a caixa dela das outras — e o que se
   lê em linha são as caixas.

   ⚠ **O `margin-top` DA PRIMEIRA ETIQUETA SAI**, senão a linha ganhava o espaço da
   etiqueta a somar ao do bloco — a etiqueta tem `margin-top: 1rem` por ser feita
   para pares empilhados.
   --------------------------------------------------------------------- */

.entrada .linha-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 1rem;
    margin-top: 1rem;
}

.entrada .linha-campos label { margin-top: 0; }

/* Cada par tem a largura do seu campo: não estica nem encolhe, e é o que mantém
   as duas datas com a mesma medida ao lado de um seletor mais curto. */
.entrada .linha-campos .campo { flex: 0 0 auto; }

/* ⚠ A MEDIDA DESTE FORMULÁRIO É MAIOR, e a razão é a linha de três campos. A
   `.seccao .entrada` limita qualquer formulário a 24rem de propósito — «um
   formulário não acompanha a largura da página» —, e três campos não cabem lá.
   **Alargar a regra geral era o erro fácil:** punha a largura da página debaixo de
   um campo de ano de quatro dígitos, em todos os ecrãs. Aqui alarga-se só quem
   precisa, e continua a ser uma medida de formulário e não de página. */
.seccao .entrada.marcar { max-width: 34rem; }

/* ---------------------------------------------------------------------
   M12 — CENTROS DE CUSTO (17/08/2026)

   A faixa que diz que a vigência ainda não filtra nada. Não é erro nem
   sucesso: é uma condição temporária do módulo, e tem de se distinguir
   das duas — daí a cor de aviso e a borda à esquerda, como as notas do
   ecrã do exercício.
   --------------------------------------------------------------------- */

.aviso-etapa {
    margin: 0 0 1.25rem;
    padding: .7rem .9rem;
    background: var(--fundo);
    border-left: 4px solid var(--aviso);
    border-radius: 0 4px 4px 0;
}

.aviso-etapa p { margin: 0; font-size: .9rem; }

/* ---------------------------------------------------------------------
   CENTROS DE CUSTO EM BLOCOS — M12, fase 2 do docs/12 (18/08/2026)

   Cada centro de custo passou de LINHA DE TABELA a BLOCO. A razão é de
   largura: numa tabela de dez colunas a designação ficava com quatro
   centímetros, e as tarefas — que agora vivem aqui — não tinham onde
   caber. Num bloco, a designação ocupa a linha toda e as tarefas cabem
   numa tabela pequena lá dentro.

   ⚠ A PÁGINA CONTINUA A NÃO ROLAR NA HORIZONTAL. Quem rola é a tabela
   das tarefas, dentro do seu bloco — a mesma regra que a tabela dos
   centros tinha, e a mesma lição do A-36: o que decide a largura da
   página é a largura ÚNICA das páginas com barra, e os blocos são `.seccao`.
   --------------------------------------------------------------------- */

.seccao.centro { margin-bottom: 1.5rem; }

.seccao.centro legend .mono {
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 600;
}

.seccao.centro legend .nota { margin-left: .5rem; font-weight: 400; }

/* A LEGENDA PASSOU A DIZER O NOME (20/08/2026, hipótese C escolhida pelo
   Filipe). Dizia só o código e o tipo, e para o `A01-ASSOCIACAO` isso lia-se
   duas vezes a mesma coisa — enquanto a designação, que é o que alguém
   escreve no campo abaixo, não aparecia em sítio nenhum. */
/* ⚠ E EM LETRA MAIOR, COM O CÓDIGO *(pedido do Filipe, 28/08/2026: «o texto
   com o nome do projeto pode ter uma fonte maior»)*. A `<legend>` herda o
   tamanho do corpo, e numa página de quinze faixas iguais o que distingue uma
   da outra é justamente aquela linha — era o texto mais importante do ecrã com
   o tamanho do menos importante. Sobe com o CÓDIGO junto: são as duas metades
   do mesmo nome, e crescer só uma desfazia o par. */
.seccao.centro legend .mono,
.seccao.centro legend .nome { font-size: 1.05rem; }

.seccao.centro legend .nome { margin-left: .5rem; font-weight: 400; }

/* O TIPO FICA, COMO ETIQUETA. É dele que depende a RN-22 — só um centro `A`
   ou `S` pode completar as horas em falta de um mês —, pelo que não sai; mas
   como palavra corrida competia com o nome, e é o nome que se procura. */
.seccao.centro legend .tipo {
    display: inline-block;
    margin-left: .6rem;
    padding: .1rem .4rem;
    border-radius: 3px;
    background: var(--linhas);
    color: var(--texto);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

.centro .campo { margin-bottom: .75rem; }

.centro .campo label,
.centro .campo .etiqueta {
    display: block;
    margin-bottom: .2rem;
    font-size: .85rem;
    color: var(--texto);
}

.centro .campo.largo input { width: 100%; }

/* Programa, financiador e gestor lado a lado; a vigência idem. Em ecrã
   estreito o `wrap` desdobra-os, sem rolar nada.

   ⛔ **O `.centro` SAIU DO SELETOR EM 31/08/2026, e é uma correção e não um
   alargamento.** A classe estava escrita em duas vistas — os centros de custo e a
   gestão de folhas — e **só desenhava a primeira**: na caixa do período da gestão
   era decorativa, e o «De» e o «Até» ficavam um debaixo do outro. É a forma do
   A-101: uma classe que o CSS não conhece não dá erro, dá um elemento sem estilo.
   ⚠ A alternativa era repetir as quatro declarações sob `.periodo`, que é a
   segunda cópia a divergir — a mesma razão que manteve as abas presas às regras
   da barra dos anos. */
.campos-lado-a-lado {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.campos-lado-a-lado .campo { flex: 1 1 12rem; margin-bottom: .75rem; }

.campos-lado-a-lado input,
.campos-lado-a-lado select { width: 100%; margin-top: 0; }

/* A vigência são quatro listas — mês, ano, mês, ano — e não texto.
   ⚠ NUMA LINHA SÓ, e é pedido do Filipe *(18/08/2026)*: «no desde e até, ficaria
   melhor mês e ano numa linha». A etiqueta deixou de ocupar uma linha inteira e
   passou a ficar à frente das duas listas — `Desde [janeiro ▾] [2026 ▾]` —, que
   é como o esquema do `docs/12` já a desenhava. O `nowrap` é o que garante que
   o ano não cai para debaixo do mês quando a caixa aperta; quem desdobra, se for
   preciso, é o `.campos-lado-a-lado` à volta, separando «Desde» de «Até». */
.centro .vigencia .campo {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .35rem;
    margin-bottom: .75rem;
}

.centro .vigencia .campo .etiqueta {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
}

.centro .vigencia select { width: auto; min-width: 6.5rem; }

.centro .vigencia .nota { flex: 1 1 14rem; margin: 0; align-self: flex-end; }

/* A tabela das tarefas, dentro do bloco. A `min-width` é a soma das colunas
   mais o preenchimento das células — a conta está na quarta largura, lá em
   cima, e há um teste que a refaz. A `.seccao` já rola na horizontal, pelo que
   num ecrã estreito é a tabela que rola e nunca o corpo da página. */
/* ⛔ `fixed` E NÃO O CÁLCULO AUTOMÁTICO *(28/08/2026)*. Com o automático, as
   larguras abaixo são SUGESTÕES: o navegador mede o conteúdo, e o que sobra
   depois de as caixas de tamanho fixo se servirem vai todo para a única coluna
   elástica — a designação, que ficava com dois terços da tabela. Foi o Filipe a
   apanhá-lo: «as tarefas estão a ocupar 2/3 da página».

   ⚠ **`fixed` FAZ AS MEDIDAS SEREM MEDIDAS.** A tabela reparte o excesso pelas
   colunas na proporção declarada, em vez de o entregar todo a uma — e é também
   o que torna honesta a conta que o teste da largura faz sobre estes números.
   Sem ele, o teste somava larguras que o navegador não estava a usar. */
.grelha.tarefas-centro {
    min-width: 62rem;
    margin-top: .5rem;
    table-layout: fixed;
}

/* CADA COLUNA COM A SUA MEDIDA, e não «o que o navegador achar»: sem elas, o
   nome e as duas vigências disputam o espaço a cada linha, e o que sai depende
   do texto que lá estiver. Somam 56,5rem, para uma `min-width` de 62rem.

   ⛔ DUAS COLUNAS SAÍRAM EM 28/08/2026, POR DECISÃO DO FILIPE, e é isso que
   arruma a margem direita. «Horas» (6rem) porque «apenas preciso saber que
   está em uso e isso já está»; «Designação em inglês» (10rem) porque «a
   designação já está em inglês quando necessário». A largura mínima caiu de
   69 para 62rem — cabe num portátil sem rolar.

   ⚠ O ESPAÇO LIBERTADO FOI PARA O NOME DA TAREFA, e não repartido por todas:
   é a coluna que trunca, e as outras cinco têm conteúdo de tamanho fixo (um
   número, dois pares mês/ano, um símbolo). Dar 4rem a uma lista de meses não
   mostra mais mês nenhum. */
.grelha.tarefas-centro th.ordem  { width: 4rem; }
.grelha.tarefas-centro th.tarefa { width: 22rem; }
.grelha.tarefas-centro th.vig    { width: 12.5rem; }
.grelha.tarefas-centro th.accao  { width: 5.5rem; }

.grelha.tarefas-centro caption {
    text-align: left;
    padding: .4rem 0;
    font-weight: 600;
}

.grelha.tarefas-centro caption .nota { display: block; font-weight: 400; }

.grelha.tarefas-centro input { width: 100%; margin-top: 0; }

.grelha.tarefas-centro input.ordem {
    width: 3.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Duas listas por célula de vigência: 5,5 + 5,5 + 0,25 de intervalo = 11,25rem,
   dentro das 11,5rem que a coluna de 12,5rem deixa depois do preenchimento. */
.grelha.tarefas-centro select {
    margin-top: 0;
    padding: .3rem .4rem;
    font-size: .85rem;
    width: 5.5rem;
}

/* ⚠ AS DUAS LISTAS NUMA LINHA, E A CAUSA NÃO ERA A LARGURA *(18/08/2026)*.
   Ficavam uma debaixo da outra por causa da regra GLOBAL `select { display:
   block }`, escrita em 14/08 para o `select` deixar de ficar ao lado do seu
   rótulo no ecrã do exercício. Um elemento de bloco ocupa a linha toda, e o
   `white-space: nowrap` da célula não o impede — o `nowrap` governa o texto e as
   caixas em linha, não as de bloco. Foi por isso que a primeira tentativa de
   corrigir isto falhou: apertei a largura, e a largura não era o problema.
   Dentro da célula, o `select` volta a ser o que era por natureza. */
.grelha.tarefas-centro td.mesano {
    white-space: nowrap;
}

.grelha.tarefas-centro td.mesano select {
    display: inline-block;
    vertical-align: middle;
}

.grelha.tarefas-centro td.mesano select + select { margin-left: .25rem; }

/* A linha em branco do fim é a que cria tarefas. Fica visivelmente à
   parte, para ninguém a confundir com uma tarefa que existe. */
.grelha.tarefas-centro tr.nova td { background: var(--fundo); }

.grelha.tarefas-centro tr.nova input::placeholder { font-style: italic; }

/* O «GRAVAR» DE CIMA *(18/08/2026)*. São catorze blocos, e o botão do fim ficava
   longe de quem corrigisse o primeiro — «estão muito separados e a lista é
   grande». Não é um segundo formulário: é o mesmo botão, na outra ponta.
   ⚠ E É ELE O PRIMEIRO BOTÃO DE SUBMISSÃO DA PÁGINA, o que faz o Enter dentro de
   um campo gravar em vez de carregar num «Retirar» — ver a nota da vista. */
.accoes-topo {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.25rem;
    padding-top: 0;
    padding-bottom: 1rem;
    border-top: 0;
    border-bottom: 2px solid var(--linhas);
}

.accoes-topo .nota { margin: 0; }

/* Um só «Gravar» para a página inteira: fica destacado no fim, para não
   se confundir com os «Retirar» dos blocos. */
.accoes-fixas {
    margin: 1.5rem 0;
    padding-top: 1rem;
    border-top: 2px solid var(--linhas);
}

.grelha.ano input.medio  { width: 9rem; }
.grelha.ano input.mesano { width: 6.5rem; font-variant-numeric: tabular-nums; }

.grelha.ano select {
    margin-top: 0;
    padding: .35rem .45rem;
    font-size: .9rem;
    max-width: 11rem;
}

/* Uma vigência escreve-se `03/2028`, e os algarismos alinham. */
.entrada input.mesano {
    width: 8rem;
    font-variant-numeric: tabular-nums;
}

.entrada input.mono { font-family: ui-monospace, Consolas, monospace; }

/* ---------------------------------------------------------------------
   VISTA MENSAL — M6, só de leitura (18/08/2026, docs/11)
   --------------------------------------------------------------------- */

/* O alternador Semana · Mês. Dois estados e nada mais: onde se está é texto,
   o outro é ligação. */
.vistas {
    display: flex;
    gap: .25rem;
    margin: 0 0 1rem;
}

.vista {
    padding: .3rem .9rem;
    border: 1px solid var(--linhas);
    border-radius: 999px;
    font-size: .88rem;
    text-decoration: none;
    color: var(--accao);
    background: var(--superficie);
}

.vista.atual {
    background: var(--accao);
    border-color: var(--accao);
    color: var(--superficie);
    font-weight: 600;
}

.alternativa.vazio { opacity: .5; }

/* Trinta e uma colunas de dias mais a tarefa e o total do mês. A largura mínima
   é maior do que a da semana e a letra é menor: encolher só a letra não chegava,
   e rolar na horizontal é o que uma folha de horas sempre fez em papel largo.
   ⚠ A CONTA DAS LARGURAS ESTÁ FEITA, e não é decorativa *(18/08/2026)*: com as
   colunas do dia a 2,25rem, 31 dias dão 69,75rem, mais 12rem da tarefa e 3,4rem
   do total do mês — donde as 86rem. É por isso que a página tem 89rem: abaixo
   disso, o mês não cabe e a `.rolar` rola. Mexer numa destas medidas sem refazer
   a soma volta a esconder dias, que foi o A-36 — e há teste a somá-las
   (`tests/casos/21_grelha_mes.php`), que falha se a conta deixar de fechar. */
.grelha.horas.mensal {
    min-width: 86rem;
    font-size: .82rem;
}

.grelha.horas.mensal th,
.grelha.horas.mensal td {
    padding: .28rem .18rem;
}

/* A COLUNA DO DIA TEM LARGURA FIXA, e é o que impede o conteúdo de a esticar:
   um `7,00` e um cabeçalho de duas linhas cabem em 2,25rem, e trinta e uma
   colunas iguais leem-se melhor do que trinta e uma larguras diferentes. */
.grelha.horas.mensal th.dia,
.grelha.horas.mensal tbody td.num,
.grelha.horas.mensal tfoot td.num { width: 2.25rem; }

.grelha.horas.mensal .total-mes,
.grelha.horas.mensal tfoot td.total-mes { width: 3.4rem; }

/* A coluna das tarefas fica FIXA: sem ela, ao rolar até ao dia 28 não se sabe
   de que tarefa é a linha. */
.grelha.horas.mensal .tarefa {
    position: sticky;
    left: 0;
    background: var(--superficie);
    width: 12rem;
    min-width: 12rem;
    padding-left: .4rem;
    z-index: 1;
}

.grelha.horas.mensal tr.centro .tarefa,
.grelha.horas.mensal tfoot .tarefa { background: var(--fundo); }

/* ETAPA 2 — A LINHA EM EDIÇÃO *(19/08/2026)*.
   A caixa tem de caber na coluna de 2,25rem que o mês já tinha, e é isso que
   impede a soma das larguras de ser refeita: alargar a coluna para acomodar um
   `input` de 3,6rem — o da grelha semanal — daria 31 × 3,6 = 111,6rem só de dias,
   e o mês deixaria de caber no ecrã. Cabe porque o preenchimento desce a zero, o
   texto centra e a letra é a da tabela, que já é .82rem. ⚠ HÁ TESTE A SOMAR AS
   LARGURAS (`tests/casos/21_grelha_mes.php`): mexer nisto sem refazer a conta
   volta a esconder dias, que foi o A-36. */
.grelha.horas.mensal input.celula {
    width: 100%;
    min-width: 0;
    padding: .1rem .1rem;
    text-align: center;
    font-size: inherit;
}

/* A linha em edição destaca-se do resto da tabela: é a única que aceita escrita,
   e numa grelha de trinta linhas iguais isso tem de se ver. */
.grelha.horas.mensal tr.em-edicao > td,
.grelha.horas.mensal tr.em-edicao > th { background: #EAF4F8; }

/* O lápis que abre a edição de uma linha. Fica à direita do nome da tarefa, e é
   uma ligação — não há JavaScript nesta aplicação. */
.grelha.horas.mensal .lapis {
    float: right;
    margin-left: .3rem;
    text-decoration: none;
    color: var(--accao);
    font-size: .9rem;
}

.grelha.horas.mensal .lapis:hover { text-decoration: underline; }
.grelha.horas.mensal .lapis.atual { color: var(--erro); }

/* A CÉLULA PROPOSTA PELO FECHO DO MÊS *(etapa 1 do `docs/13`, 19/08/2026)*.
   Horas que ninguém gravou, mostradas por cima da grelha: a faixa de aviso está
   no topo da página e não acompanha quem rola até ao dia 28, pelo que a própria
   célula tem de dizer o que é. Mesmo amarelo da faixa, para se ler como a mesma
   coisa, e a moldura tracejada porque a cor sozinha não serve a quem não a
   distingue — o `title` diz o resto. */
.grelha.horas.mensal td.num.proposta {
    background: #FBF2DE;
    outline: 1px dashed var(--aviso);
    outline-offset: -1px;
    font-weight: 600;
}

.grelha.horas.mensal th.dia { text-align: center; }

/* ⚠ A DOBRA QUE ABRE E FECHA UM CENTRO DE CUSTO *(20/08/2026, pedido do Filipe
   para aliviar a página)*. É uma LIGAÇÃO e não um botão de JavaScript, como o
   resto deste ecrã: o estado vive no endereço.

   ⚠ O TRIÂNGULO É TEXTO, e é de propósito: um ícone em imagem seria um pedido a
   mais por página, e um em SVG embutido não sobrevive ao escape da vista. */
.grelha.horas.mensal .dobra {
    display: inline-block;
    width: 1rem;
    margin-right: .15rem;
    text-decoration: none;
    color: var(--accao);
}

/* ⛔ O ALVO DE CLIQUE É A CÉLULA TODA, E NÃO O TRIÂNGULO *(31/08/2026, pedido do
   Filipe)*. O triângulo continua a desenhar o estado — aberto ou fechado — mas
   deixou de ser o único sítio que responde: a ligação envolve o código, o nome e a
   contagem de tarefas, que é para onde o olho vai.

   ⚠ `display: block` PARA O ALVO OCUPAR A CÉLULA. Um `<a>` em linha teria a largura
   do texto, e o espaço à direita do nome — que é metade da célula nos centros de
   nome curto — continuaria morto. */
.grelha.horas.mensal th.tarefa .abre-centro {
    display: block;
    text-decoration: none;
    color: inherit;
    margin: -.1rem -.2rem;
    padding: .1rem .2rem;
    border-radius: 3px;
}

/* O realce diz onde o clique responde, antes de se clicar. */
.grelha.horas.mensal th.tarefa a.abre-centro:hover { background: #E7F1F6; }
.grelha.horas.mensal th.tarefa a.abre-centro:hover .dobra { color: var(--realce); }

.grelha.horas.mensal th.tarefa a.abre-centro:focus-visible {
    outline: 2px solid var(--accao);
    outline-offset: -2px;
}

/* ⚠ SEM CURSOR DE MÃO ONDE NÃO HÁ LIGAÇÃO — a irmã da regra do `span.dia-ligacao`,
   e pela mesma razão: um `<span>` com o mesmo aspeto de uma ligação promete um
   clique que não existe. */
.grelha.horas.mensal th.tarefa span.abre-centro { cursor: default; }

/* ⛔ A ÂNCORA NÃO PODE LEVAR A LINHA PARA DEBAIXO DO QUE ESTÁ FIXO *(31/08/2026)*.
   Abrir um centro é um carregamento de página com `#centro-CODIGO`, e o navegador
   punha a linha no topo absoluto da janela — atrás da faixa de atualização e da
   barra de gravar, as duas em `top: 0`. **E num dos últimos centros era pior:** não
   havendo página por baixo para rolar, a janela ficava no fim e parecia um salto
   para outro sítio. Esta margem é o espaço que as duas ocupam. */
.grelha.horas.mensal tr.centro { scroll-margin-top: 5.5rem; }

.grelha.horas.mensal .dobra:hover { color: var(--realce); }

/* O centro ABERTO destaca-se do fechado: numa lista de catorze, saber quais estão
   abertos sem contar linhas é o que evita abrir o mesmo duas vezes. */
.grelha.horas.mensal tr.centro.aberto th { color: var(--texto); }

/* O cabeçalho do dia leva à semana onde se lança — é a saída deste ecrã. */
.grelha.horas.mensal .dia-ligacao {
    display: block;
    text-decoration: none;
    color: inherit;
}

.grelha.horas.mensal a.dia-ligacao:hover .dia-numero { text-decoration: underline; }

/* O CABEÇALHO DO DIA EM DUAS LINHAS — número em cima, dia da semana em baixo.
   *(18/08/2026, pedido do Filipe ao ver o ecrã.)* Numa linha só, `1 sáb` dava a
   cada coluna a largura de cinco caracteres e mostravam-se 25 dias dos 31.
   Empilhados, a coluna passa a valer o mais largo dos dois — três caracteres. */
.grelha.horas.mensal .dia-numero,
.grelha.horas.mensal .dia-semana {
    display: block;
    white-space: nowrap;
    text-align: center;
}

.grelha.horas.mensal .dia-numero {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

/* O dia da semana é orientação, não dado: mais pequeno e mais claro, para o
   número ficar a ser o que se lê primeiro. */
.grelha.horas.mensal .dia-semana {
    font-size: .64rem;
    font-weight: 400;
    opacity: .7;
}

/* A coluna do mês é a única que se lê de relance numa tabela larga: separa-se
   com linha e não só com negrito. */
.grelha.horas.mensal .total-mes {
    border-left: 2px solid var(--linhas);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* A LINHA «POR EXPLICAR» INFORMA, NÃO ALERTA (RN-07): fundo de informação e
   nunca a cor de erro. Um dia útil incompleto durante o mês é normal. */
.grelha.horas.mensal tr.por-explicar th,
.grelha.horas.mensal tr.por-explicar td {
    background: var(--fundo);
    border-top: 2px solid var(--accao);
}

.grelha.horas.mensal .sentido-falta { color: var(--accao); font-weight: 600; }

/* Horas A MAIS do que o disponível são legítimas — quem lançou está a recuperar
   horas de outro dia (RN-01 e RN-13) —, e por isso não levam cor de erro. */
.grelha.horas.mensal .sentido-mais { color: var(--positivo); }

/* ⛔ NÃO HÁ `.sentido-fecha`, E É DE PROPÓSITO *(escrito em 10/09/2026, A-101)*.
   São três estados e duas regras: o `GrelhaMes::sentido()` e o `escreverSentido()`
   do `totais.js` devolvem `fecha`, `falta` ou `mais`, e o dia que fecha certo fica
   com a cor do texto — a ausência de cor É o estado neutro, e uma regra vazia não
   diria mais do que isto diz.

   ⚠ FICA ESCRITO PORQUE SEM ISTO NÃO SE DISTINGUE DE UM ESQUECIMENTO: é a forma
   exacta do A-101 — uma classe que o HTML escreve e o CSS não conhece —, e a
   varredura do `tests/casos/46` levanta-a de cada vez que correr. É lá que ela
   está declarada, com esta razão. */

.grelha.horas.mensal .sinal {
    display: block;
    /* Cabe em 2,25rem: a coluna do dia é estreita e este rótulo tem seis
       caracteres. Encolheu com as colunas, em 18/08/2026. */
    font-size: .6rem;
    font-weight: 400;
    opacity: .85;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   A FAIXA DE ATUALIZAÇÃO (20/08/2026, docs/14 — variante A).

   COR DE AVISO E NUNCA DE ERRO. Não há nada recusado nem defeituoso: há
   uma versão nova e um convite a recarregar. Neste projeto o vermelho é
   do que a aplicação recusa, e usá-lo aqui ensinaria a gramática errada
   a quem vê os dois no mesmo dia.

   OS MARGENS NEGATIVOS CANCELAM O PADDING DO `body`, que é `2rem 1rem`.
   Sem eles a faixa nasceria 2rem abaixo do topo e com 1rem de folga de
   cada lado — uma faixa encolhida, que é o que lhe tira a autoridade.
   Se o padding do `body` mudar, estes três valores mudam com ele.

   `sticky` E NÃO `fixed`: colada ao topo ao rolar, mas a empurrar o
   conteúdo para baixo enquanto se está no início da página, em vez de o
   cobrir. Um `fixed` tapava o logótipo e a barra de navegação.
   --------------------------------------------------------------------- */
/* ⛔ O ATRIBUTO `hidden` TEM DE VENCER, E NÃO VENCIA *(corrigido em 20/08/2026,
   achado A-52)*. A regra do navegador é `[hidden] { display: none }`, mas é da
   folha de estilos DELE — e qualquer `display` de autor ganha-lhe. Com o
   `display: flex` abaixo, a faixa aparecia **em todas as páginas, sempre**, e o
   botão de fechar — que faz `faixa.hidden = true` — não tinha efeito nenhum.

   Foi o Filipe a apanhá-lo em produção, minutos depois de publicar: «o aviso está
   a ser mostrado de forma persistente e não se consegue fechar». **Dois sintomas,
   uma causa.** E nenhum teste falhou: as verificações confirmavam que o atributo
   `hidden` estava no HTML — e estava —, nunca que ele ESCONDIA. É a lição de
   14/08 outra vez: medir o HTML não é ver o ecrã.

   ⚠ A REGRA É GERAL DE PROPÓSITO, e não só para esta classe: qualquer elemento
   futuro que se esconda por `hidden` e leve `display` de autor cai na mesma
   armadilha. O `!important` é o que a torna imune a isso — é o único do ficheiro,
   e é aqui que se justifica. */
[hidden] { display: none !important; }

.atualizacao {
    position: sticky;
    top: 0;
    z-index: 10;   /* acima do menu de ecrã estreito, que é 5 */
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: -2rem -1rem 1.5rem;
    padding: .6rem 1rem;
    background: var(--aviso);
    color: var(--texto);
    font-size: .92rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* Sobre o amarelo do aviso, a cor de ação não tem contraste que se leia: o
   botão passa a ser o próprio texto, sublinhado. */
.atualizacao button.ligacao {
    padding: 0;
    color: var(--texto);
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* O fechar vai para a ponta oposta — longe do «Recarregar», para não se
   tocar num a querer o outro. */
.atualizacao .fechar {
    margin-left: auto;
    font-weight: 400;
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   A FOLHA DE OUTRA PESSOA (20/08/2026, etapa 1 do painel de gestão de
   folhas).

   COR DE AÇÃO E NÃO DE AVISO: não há nada errado nem recusado — está-se
   a ver a folha de um colega, que é um direito de toda a gente dentro da
   AREAM. O amarelo diria «cuidado» e o vermelho «recusado»; nenhum dos
   dois é verdade, e este projeto usa as cores como gramática.

   MAS TEM DE SE VER. Este ecrã é rigorosamente igual ao da própria
   folha, e é isso que o torna perigoso de ler distraído: sem a faixa,
   quem chega por um endereço partilhado toma os números de outra pessoa
   pelos seus e conclui que lhe faltam horas que não lhe faltam.
   --------------------------------------------------------------------- */
.folha-de-outrem {
    margin: 0 0 1.25rem;
    padding: .8rem 1rem;
    background: var(--fundo);
    border-left: 4px solid var(--accao);
    border-radius: 0 4px 4px 0;
    font-size: .92rem;
}


/* O QUE PARECIA LIGAÇÃO E DEIXOU DE SER. Na folha de outra pessoa, o
   separador «Semana» e os cabeçalhos dos dias não têm destino: a grelha
   semanal não aceita titular, e a ligação levaria quem confere para a sua
   PRÓPRIA semana. Ficam no lugar, com a mesma medida, sem cor de ação. */
.vista.inerte {
    color: var(--texto);
    opacity: .55;
    cursor: default;
}

/* ⚠ E O SUBLINHADO DO CABEÇALHO PASSA A SER SÓ DAS LIGAÇÕES A SÉRIO. A
   regra era `.dia-ligacao:hover`, que casa com qualquer elemento — um
   `<span>` inerte sublinhava-se ao passar o rato e prometia um clique que
   não existe. */
.grelha.horas.mensal span.dia-ligacao { cursor: default; }
.grelha.horas.mensal span.dia-ligacao:hover .dia-numero { text-decoration: none; }

/* ---------------------------------------------------------------------
   A ENTRADA DA GESTÃO DE FOLHAS (20/08/2026, escolhida pelo Filipe de
   quatro hipóteses, com os desenhos à vista).

   SEPARADA DAS OUTRAS POR UMA LINHA. «Horas» e «Férias e ausências» são
   as coisas da própria pessoa; esta é a folha DOS OUTROS. Encostá-la às
   duas convidava a confundi-las — foi a dúvida que decidiu o desenho.

   E O CONTADOR É O QUE DISPENSOU uma secção de indicadores na página
   onde se trabalha: o aviso cabe num número, e os projetos e o
   preenchimento vivem no cabeçalho da própria página de gestão.
   --------------------------------------------------------------------- */
.menu-lista li.separado {
    border-left: 1px solid var(--linhas);
    margin-left: .4rem;
    padding-left: .9rem;
}

.menu-lista .papel { font-weight: 600; }

/* AMARELO DE AVISO E NÃO VERMELHO: uma folha por fechar não é um erro —
   é trabalho por fazer, e a RN-07 proíbe tratar o que está em curso como
   defeito. Só entram meses que JÁ ACABARAM, que é o que faz este número
   não estar sempre aceso. */
.conta {
    display: inline-block;
    min-width: 1.35rem;
    margin-left: .35rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--aviso);
    color: var(--texto);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Texto que só o leitor de ecrã lê. Um «7» sozinho a seguir a «Gestão de
   folhas» não diz o que conta; escondê-lo dos olhos e não da voz é a
   única forma de o dizer sem alargar a barra.
   ⚠ NÃO se usa `display: none` nem `visibility: hidden` — os dois
   escondem-no TAMBÉM do leitor de ecrã, que é o oposto do que se quer. */
.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Em ecrã estreito a lista cai na vertical: a linha da esquerda deixa de
   fazer sentido e passa a ser uma linha em cima, que é o que separa numa
   pilha. */
@media (max-width: 40rem) {
    .menu-lista li.separado {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
        border-top: 2px solid var(--linhas);
        margin-top: .3rem;
        padding-top: .3rem;
    }
}

/* ---------------------------------------------------------------------
   A PÁGINA DE GESTÃO DE FOLHAS.

   A refundação de 31/08/2026 trocou as duas tabelas e o seletor de mês por
   abas, um intervalo de meses e uma tabela por pessoa — e essa tabela é a
   `.grelha.periodo-folhas`, que tem secção própria mais abaixo.

   ⛔ O QUE AQUI FICA É SÓ O QUE A PÁGINA DE HOJE ESCREVE. Nove regras
   saíram em 01/09/2026, medidas uma a uma contra a vista: `.meses` e as três
   `.mes-botao` (o seletor de meses saiu na refundação), a `.mes-em_curso`
   (sem um único leitor em todo o código), as duas `.mono` e a `.centros` (a
   coluna dos códigos foi retirada) e as três do `.selo` (o selo mudou para a
   folha do mês, onde usa a `.nota`, e não voltou a esta página). ⚠ **E uma
   décima não estava morta, estava a não fazer nada desde que nasceu:** o
   `padding: .4rem .5rem` das duas `.grelha` era **letra por letra** o da
   `.grelha th, .grelha td` base. Uma regra que repete o que herda não se
   distingue de uma que funciona — nem quando se lê, nem quando se apaga.
   --------------------------------------------------------------------- */

/* ⛔ ESTAS DUAS E AS DUAS SEGUINTES ESTAVAM PRESAS À TABELA QUE MORREU, e a
   vista continua a escrever as quatro classes: viviam sob `.gestao-folhas`,
   que a refundação substituiu por `.periodo-folhas`. **Nada deu erro** — as
   classes estavam no CSS e no HTML, e a cor é que não chegava ao ecrã. É o
   defeito do A-166 pela terceira vez, e a diferença é que aqui a cor **diz
   um facto**: sem ela a coluna do saldo e o estado da linha leem-se iguais.

   ⚠ O SALDO A ZERO É O QUE FECHA (migração 013). O que NÃO é zero fica com
   a cor de ação e não de erro, e a razão é a mesma da linha «por explicar»
   da vista mensal: negativo é mês por completar — normal durante o mês — e
   positivo são horas extra, que são legítimas. Nenhum dos dois é defeito. */
.grelha.periodo-folhas .saldo-fecha  { color: var(--positivo); font-weight: 600; }
.grelha.periodo-folhas .saldo-aberto { color: var(--accao);    font-weight: 600; }

/* Uma folha emitida está selada; uma encerrada, congelada. A cor diz o
   estado sem obrigar a ler a coluna. */
.grelha.periodo-folhas tr.estado-EMITIDA   td { background: rgba(107, 135, 62, .08); }
.grelha.periodo-folhas tr.estado-ENCERRADA td { background: var(--fundo); }

/* O PREFIXO DO CÓDIGO, ao lado do campo do acrónimo (20/08/2026).

   É TEXTO E NÃO CAMPO, e a aparência tem de o dizer: quem vê uma caixa
   escreve nela. Fica com a mesma letra monoespaçada do código e alinhado
   com a caixa ao lado, para se ler `F25-ADAPTARESWATER` de uma vez — que é
   o código verdadeiro, partido em duas partes só para efeitos de edição. */
.centro .campo .prefixo {
    display: inline-block;
    margin-right: .15rem;
    font-weight: 600;
    vertical-align: middle;
}

/* A caixa do acrónimo não ocupa a linha toda: um acrónimo tem uma dúzia de
   caracteres, e um campo largo convida a escrever o que ali não cabe. */
.centro .campo input.mono {
    display: inline-block;
    width: auto;
    min-width: 16rem;
    max-width: 24rem;
    font-family: ui-monospace, Consolas, monospace;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ===================================================================
   FECHO DA FOLHA — M7, etapa 1 (23/08/2026)

   Três peças, e nenhuma inventa cor nova: a paleta é a do logo, como em
   toda a aplicação (CLAUDE.md §8).

   O BLOCO NO FIM DA FOLHA DO MÊS não é um alerta e não se pinta como
   um: encerrar é trabalho normal, feito depois de conferir o mês. Fica
   com a mesma superfície das outras secções, e uma linha no topo
   separa-o da grelha. */
/* ⛔ AS DUAS ÚLTIMAS SECÇÕES SÃO UM PAR, e por isso partilham o traço *(31/08/2026)*.
   O «Completar as horas em falta» veio do interior da caixa do indicador do mês, onde
   herdava o fundo cinzento; sem tratamento próprio ficava um bloco solto no branco. Lê-se
   agora como o primeiro dos dois atos que fecham a página: completar, e depois encerrar.

   ⚠ UMA REGRA PARA AS DUAS, e não duas regras iguais: o aspeto partilhado é
   deliberado, e o dia em que uma delas tiver de divergir é o dia em que se separam. */
.completar-mes,
.fecho-da-folha {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--linhas);
}

/* O RESUMO DA PROPOSTA DE COMPLETAR O MÊS *(10/09/2026, A-101)*. É um
   `role="alert"` e esteve sem regra nenhuma desde que nasceu: um alerta com
   aspeto de parágrafo, no único sítio da página que diz «nada foi gravado
   ainda».

   ⚠ NÃO INVENTA NADA: é a barra da `.nota.aviso`, e pela razão que está
   escrita lá — não é a cor do erro, porque completar o mês é permitido; o que
   a página faz é dizer o que vai acontecer se confirmar. */
.fecho-resumo {
    padding: .75rem 1rem;
    background: var(--fundo);
    border-left: 4px solid var(--aviso);
    border-radius: 0 4px 4px 0;
}

.fecho-resumo > p:first-child { margin-top: 0; }
.fecho-resumo > p:last-child  { margin-bottom: 0; }

/* A CONTA DA PÁGINA DE CONFIRMAÇÃO. Chave à esquerda, valor à direita,
   com algarismos tabulares: quatro números que se leem em coluna e se
   somam de cabeça sem os dígitos dançarem. */
.numeros {
    width: auto;
    min-width: 22rem;
    border-collapse: collapse;
    margin: .75rem 0 1.25rem;
}

.numeros th,
.numeros td {
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--linhas);
    text-align: left;
}

.numeros td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* OS DIAS COM HORAS POR EXPLICAR. Lista simples, com a data destacada:
   é por ela que se procura na folha, e não pelo número de horas. */
.dias-em-falta {
    margin: .5rem 0 1rem;
    padding-left: 1.25rem;
    line-height: 1.7;
}

.dias-em-falta strong {
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   OBSERVAÇÃO DA GESTÃO NA FOLHA — M7, etapa 2 (23/08/2026)

   O canal do «pede ao colega» que a RN-17 deixa de fora. Nenhuma cor
   nova: a paleta é a do logo (CLAUDE.md §8).

   O BLOCO NA FOLHA DO MÊS É UM PEDIDO DE AÇÃO, e é a única coisa neste
   ecrã que o é — daí a barra de realce à esquerda. NÃO é um erro e não
   se pinta de vermelho: quem escreveu está a pedir horas que faltam, o
   que durante o mês é normal (RN-07). O realce chama a atenção; a cor
   do erro acusaria a pessoa de um defeito que não existe. */
.observacoes-folha {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-left: 4px solid var(--realce);
    border-radius: 0 4px 4px 0;
}

.observacoes-folha h2 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    color: var(--accao);
}

/* A LISTA. Sem marcadores: cada observação é um bloco de texto com a
   sua autoria em baixo, e um ponto à esquerda de um parágrafo de cinco
   linhas não ajuda a ler nada. */
.observacoes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.observacoes li + li {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--linhas);
}

/* ⛔ O `pre-line` É O QUE FAZ AS MUDANÇAS DE LINHA APARECEREM, e é
   deliberado que seja CSS e não `nl2br`: o texto é livre e vem de outra
   pessoa, e a camada de vistas escapa tudo por omissão. Um `nl2br`
   obrigaria a passar HTML cru pelo `$cru`, que é a porta por onde se
   entra num XSS. Aqui a mudança de linha é aparência, e resolve-se onde
   a aparência vive. */
.observacoes .observacao-texto {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.observacoes .observacao-autoria {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: #6b6a6c;
}

/* A COLUNA DO PAINEL DE GESTÃO. O número é discreto de propósito: a
   coluna existe para se saber que há pedido, não para competir com o
   saldo, que é o que decide se a folha fecha. */
.observacoes-conta {
    font-variant-numeric: tabular-nums;
}

/* AS QUE JÁ NÃO APARECEM AO TITULAR. Cinzento e sem peso: continuam a
   existir no histórico, e não são um pedido pendente. */
.observacoes-conta .fora-de-vista {
    color: #6b6a6c;
    cursor: help;
}

/* A CAIXA DE TEXTO DA PÁGINA DE ESCRITA. Largura do texto e não do
   ecrã: uma observação lê-se depois num bloco estreito, na folha do
   mês, e escrever em linhas de 120 caracteres para as ler em linhas de
   60 engana quem escreve sobre o tamanho do que escreveu. */
.folha textarea#texto {
    display: block;
    width: 100%;
    max-width: 44rem;
    margin-top: .35rem;
    padding: .5rem .6rem;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-radius: 3px;
    resize: vertical;
}

.folha textarea#texto:focus {
    outline: 2px solid var(--realce);
    outline-offset: 1px;
}

/* O AVISO DA FOLHA JÁ EQUILIBRADA, na página de escrita. A `.nota` é
   pequena e a 80% de opacidade — o que serve para um rodapé e não para
   um aviso que muda o significado do que se está a fazer. Esta variante
   devolve-lhe o contraste e põe-lhe a barra de aviso à esquerda.

   ⚠ NÃO É A COR DO ERRO, e é decisão: escrever numa folha equilibrada é
   permitido, e o que a página faz é dizer o que vai acontecer. O
   vermelho diria «não faça isto». */
.nota.aviso {
    opacity: 1;
    padding: .75rem 1rem;
    background: var(--fundo);
    border-left: 4px solid var(--aviso);
    border-radius: 0 4px 4px 0;
}


/* ---------------------------------------------------------------------
   A BARRA DE PASSOS — o processo de criação de um exercício
   Etapa 2 do docs/21 (28/08/2026)

   ⛔ NÃO REUTILIZA A `.barra`, e não é distração: aquela é a navegação de
   topo da aplicação — abas com sublinhado, alinhadas à direita, com a sua
   própria `.atual`. São duas coisas diferentes no mesmo ecrã, e dar-lhes a
   mesma classe faria a segunda herdar o alinhamento e o traço da primeira.

   ⚠ NENHUM ESTADO SE CHAMA «FEITO». Os passos anteriores são `.antes` e os
   seguintes `.depois` — posição na sequência, que é um facto, e não
   conclusão, que a aplicação não sabe (ver a vista `exercicio/criar.php`).
   As duas pintam-se IGUAIS de propósito: dar ao `.antes` um ar de
   concluído seria afirmar pela cor o que o texto se recusa a dizer.
   --------------------------------------------------------------------- */
.passos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1.5rem;
    padding: 0 0 .85rem;
    list-style: none;
    border-bottom: 1px solid var(--linhas);
}

.passo {
    font-size: .9rem;
}

.passo a,
.passo.atual {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .7rem;
    text-decoration: none;
    border-radius: 4px;
}

.passo a {
    color: var(--accao);
    background: var(--superficie);
    border: 1px solid var(--linhas);
}

.passo a:hover {
    color: var(--superficie);
    background: var(--realce);
    border-color: var(--realce);
}

/* ONDE SE ESTÁ NÃO É UMA LIGAÇÃO — o mesmo princípio da navegação de topo:
   quem não distingue o tom vê que não há caixa clicável e ouve o
   `aria-current="step"` no leitor de ecrã. */
.passo.atual {
    font-weight: 600;
    color: var(--superficie);
    background: var(--accao);
    border: 1px solid var(--accao);
}

/* O ALGARISMO EM CAIXA PRÓPRIA, e não um «1.» colado ao título: numa lista
   que quebra para duas linhas em ecrã estreito, é ele que mantém a leitura
   de sequência quando a ordem visual se perde. */
.passo-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: 50%;
    background: var(--fundo);
    color: var(--accao);
}

.passo.atual .passo-numero {
    background: var(--superficie);
    color: var(--accao);
}

.passo a:hover .passo-numero {
    background: var(--superficie);
    color: var(--realce);
}


/* ---------------------------------------------------------------------
   «CRIAR NOVO EXERCÍCIO» NA BARRA DOS ANOS
   Etapa 3 do docs/21 (28/08/2026), por observação do Filipe: o botão de
   criar vivia no FIM da página de um ano, e criar um ano não é um ato do
   ano que está aberto no ecrã.

   ⛔ NÃO SE PARECE COM UM ANO, e é o ponto todo. Lidos em fila seguida,
   «2025 | 2026 | Criar novo exercício» são quatro coisas do mesmo tipo —
   e a última não é um ano. A barra vertical separa-a, e o contorno
   tracejado diz «isto cria», sem uma palavra a mais.

   ⚠ E NÃO COMPETE EM COR COM A ABA ATUAL: o azul cheio está reservado à
   aba selecionada e ao «Gravar». Esta é de contorno, e só se enche ao
   passar o rato — a mesma hierarquia do `.passo a:hover`.
   --------------------------------------------------------------------- */
.anos .separador {
    width: 1px;
    align-self: stretch;
    margin: 0 .35rem;
    background: var(--linhas);
}

.ano.criar {
    font-weight: 600;
    color: var(--accao);
    background: var(--superficie);
    border-style: dashed;
}

.ano.criar:hover {
    color: var(--superficie);
    background: var(--realce);
    border-color: var(--realce);
    border-style: solid;
}


/* ---------------------------------------------------------------------
   OS CENTROS DE CUSTO NUMA PÁGINA LONGA — três pedidos do Filipe
   28/08/2026, depois de carregar as vigências dos quinze centros

   São quinze blocos, cada um com a sua lista de tarefas. As três queixas
   eram de navegação, e não de gosto: «o botão de gravar fica para trás»,
   «é difícil distinguir onde começa o seguinte», «os botões podiam ser
   centrados na vertical».
   --------------------------------------------------------------------- */

/* ① O «GRAVAR» ACOMPANHA A PÁGINA.
   ⛔ NÃO SE MULTIPLICOU O BOTÃO, e foi a alternativa recusada de propósito:
   quinze «Gravar» iguais numa página longa **gravam todos a página
   inteira**, e é essa confusão que deu origem à regra do «Gravar» único em
   23/08 — alguém carregar no que está à mão a pensar que grava a secção.
   Um botão que acompanha dá o mesmo alcance sem prometer outro.
   ⚠ `sticky` E NÃO `fixed`: o botão pertence ao formulário e rola com ele
   até ao topo do ecrã, onde para. Um `fixed` sairia do fluxo e tapava
   conteúdo em ecrãs baixos. */
.accoes-topo.fixa {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: .7rem .9rem;
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-bottom: 2px solid var(--linhas);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

/* A BARRA PASSOU ÀS OUTRAS PÁGINAS LONGAS *(03/10/2026, `docs/35`)* — o exercício,
   os utilizadores, a semana e o mês —, com a nota que o `sair.js` mostra quando há
   alterações por gravar. Nasce escondida: sem script, não aparece.
   ⛔ O `sticky` PRENDE-SE AO PRIMEIRO ANTEPASSADO QUE DESLIZE, e a `.seccao` desliza
   (`overflow-x: auto`): dentro dela o botão ficava preso à secção, que nunca desliza
   na vertical — ou seja, a nada. O `com-fixa` devolve-a ao fluxo; quem tem de
   deslizar é a tabela, e já o faz no seu `.rolar`. */
.seccao.com-fixa { overflow: visible; }

.por-gravar {
    padding-left: .6rem;
    border-left: 4px solid var(--aviso);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ② ONDE COMEÇA CADA CENTRO DE CUSTO.
   A legenda tinha o peso do resto do texto, e com quinze blocos seguidos
   não se via a fronteira. Passa a faixa, com o traço da cor da marca à
   esquerda — a MESMA linguagem do `.aviso-etapa`, que já existe nesta
   página, em vez de uma cor nova.
   ⚠ `display: block` e `width: 100%` porque um `<legend>` encolhe ao
   conteúdo por omissão: sem isto, o fundo ficava só atrás das palavras. */
.seccao.centro > legend {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1rem;
    padding: .55rem .8rem;
    background: var(--fundo);
    border-left: 4px solid var(--marca);
    border-radius: 0 4px 4px 0;
}

/* ③ OS BOTÕES AO CENTRO DA LINHA.
   «Retirar» e «Acrescentar» estavam encostados ao topo da célula, e numa
   linha com duas listas de vigência isso deixava-os a olhar para o campo
   errado. `middle` alinha-os com o texto da linha a que pertencem. */
.seccao.centro .grelha td { vertical-align: middle; }


/* ---------------------------------------------------------------------
   AS LINHAS DAS TAREFAS, MAIS COMPACTAS — pedido do Filipe, 28/08/2026
   «melhorava a legibilidade global se compactar as linhas das tarefas e
   se alinhar os botões Retirar e Acrescentar»

   ⚠ NÃO É POUPAR ESPAÇO POR POUPAR: são quinze centros com dezenas de
   tarefas, e cada linha alta empurra o bloco seguinte para fora do ecrã.
   O que se ganha é ver o centro de custo inteiro de uma vez, que é a
   unidade sobre a qual se decide.
   --------------------------------------------------------------------- */
.grelha.tarefas-centro th,
.grelha.tarefas-centro td {
    padding-top: .2rem;
    padding-bottom: .2rem;
}

/* Os campos dentro da grelha perdem a altura de um campo de formulário
   isolado: numa grelha são células, e a moldura já as separa. */
.grelha.tarefas-centro input[type="text"],
.grelha.tarefas-centro select {
    padding-top: .2rem;
    padding-bottom: .2rem;
    line-height: 1.25;
}

/* Os botões acompanham — um botão alto numa linha baixa volta a esticá-la,
   e o efeito perdia-se. */
.grelha.tarefas-centro button {
    padding-top: .2rem;
    padding-bottom: .2rem;
}

/* ---------------------------------------------------------------------
   «RETIRAR» E «ACRESCENTAR» ALINHADOS ENTRE SI

   ⛔ A LARGURA DA COLUNA NÃO SE TOCA: são 5,5rem, e a soma das sete
   colunas — 68,5rem — está presa por um teste que falha se deixarem de
   caber. O que faltava era o ALINHAMENTO: cada botão encostava à esquerda
   da sua célula, e «Retirar» e «Acrescentar» têm larguras diferentes, pelo
   que formavam uma escada. À direita, formam coluna.
   --------------------------------------------------------------------- */
.grelha.tarefas-centro th.accao,
.grelha.tarefas-centro td:last-child {
    text-align: center;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   OS ATOS DA LINHA SÃO SÍMBOLOS — decisão do Filipe, 28/08/2026
   «se não consegues arranjar remove os botões e coloca um símbolo X e +»

   ⛔ TENTEI ALINHAR AS PALAVRAS DUAS VEZES E CONTINUAVAM EM ESCADA.
   «Retirar» e «Acrescentar» têm larguras diferentes, e numa coluna de
   5,5rem não há alinhamento que as torne iguais: alinhadas à esquerda
   divergem no fim, à direita divergem no princípio, e ao centro divergem
   dos dois lados. **Dois símbolos do mesmo tamanho alinham-se por serem
   iguais** — é resolver o problema em vez de o contornar.

   ⚠ O QUE O BOTÃO FAZ CONTINUA A LER-SE: o `aria-label` di-lo a quem ouve
   a página e o `title` a quem passa o rato. Um símbolo sozinho seria um
   enigma, e isso não é economia de espaço — é informação perdida.
   --------------------------------------------------------------------- */
.grelha.tarefas-centro button.simbolo {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
    /*
     * ⛔ **`block` E `margin: auto` — NÃO `vertical-align`.** Tentei três vezes
     * com `vertical-align`, na célula e no botão, e nenhuma resolveu: **uma
     * caixa EM LINHA alinha-se sempre pela linha de base do texto que a rodeia**,
     * e a linha de base de um botão é o fundo dele. Numa linha alta — feita pelas
     * duas listas de vigência — isso deixa-o colado em baixo, os sete milímetros
     * que o Filipe mediu.
     *
     * ⚠ **UM BLOCO NÃO TEM LINHA DE BASE, e é isso que torna esta solução
     * definitiva em vez de mais uma tentativa.** O `margin: auto` centra-o na
     * célula, e o `vertical-align: middle` da própria célula faz o resto — sem
     * depender de onde caia o texto das outras colunas.
     */
    display: block;
    margin: 0 auto;
}

/* Os campos da mesma linha alinham pelo mesmo critério, para as colunas
   ficarem à mesma altura entre si. */
.grelha.tarefas-centro input[type="text"],
.grelha.tarefas-centro select {
    vertical-align: middle;
}


/* ---------------------------------------------------------------------
   CÓDIGO E DESIGNAÇÃO NA MESMA LINHA — pedido do Filipe, 28/08/2026
   «a designação pode ficar à direita do campo do Código»

   ⚠ SÃO AS DUAS METADES DO MESMO NOME. A faixa acima mostra-as juntas —
   `F20-MAESHA Demonstration of smart and flexible solutions` —, e em
   baixo estavam em duas linhas inteiras, nenhuma delas cheia. Juntá-las
   devolve ao bloco duas linhas de altura e faz o ecrã dizer o que a
   faixa já dizia.
   --------------------------------------------------------------------- */

/* O CÓDIGO NÃO ESTICA; A DESIGNAÇÃO OCUPA O QUE SOBRA. Um acrónimo tem
   uma dúzia de caracteres e um nome de projeto europeu tem uma linha —
   repartir ao meio dava campo a mais a um e a menos ao outro. */
.centro .campos-lado-a-lado.identidade .campo.codigo     { flex: 0 1 auto; }
.centro .campos-lado-a-lado.identidade .campo.designacao { flex: 1 1 22rem; }

/* ⚠ E A CAIXA DO ACRÓNIMO ENCOLHE, agora que partilha a linha: 16rem
   mínimos numa linha só eram folga, ao lado da designação são espaço
   tirado a quem precisa dele. O máximo mantém-se — o que muda é o piso. */
.centro .campos-lado-a-lado.identidade .campo.codigo input.mono {
    min-width: 11rem;
}

/* ---------------------------------------------------------------------
   O NOME DO CENTRO, EM LETRA MAIOR — pedido do Filipe, 28/08/2026
   «o texto com o nome do projeto pode ter uma fonte maior»
   *(a regra vive junto às outras da legenda, mais acima neste ficheiro;
   esta nota fica aqui só para o dia ficar todo no mesmo sítio)*
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   A SECÇÃO POR PERÍODO DE REPORTE (31/08/2026)

   A refundação do painel de gestão, pedida pelo Filipe: o gestor não
   entrega meses, entrega períodos. Abas por centro de custo, um intervalo
   escrito à mão, e uma tabela por pessoa.

   ⚠ AS ABAS NÃO TRAZEM ESTILO NOVO: partilham as regras da barra dos anos
   — `.anos`/`.ano`/`.ano.atual` —, que já são abas a valer e já passaram
   pela correção de 23/08, quando a selecionada deixou de ser azul cheio
   para não competir com o «Gravar». Duplicar as declarações era criar a
   segunda cópia a divergir.
   --------------------------------------------------------------------- */

/* O código do centro é monoespaçado como na tabela acima: é um código, e
   lê-se comparando caracteres. */
.aba {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .85rem;
}

/* O intervalo e as caixas numa caixa só, separada do que vem depois. */
.periodo {
    padding: .9rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--fundo);
    border: 1px solid var(--linhas);
    border-radius: 4px;
}

.periodo input[type="month"] {
    width: auto;
    min-width: 9rem;
}

/* QUAL É O CENTRO E QUEM O GERE, no topo da caixa *(31/08/2026)*. Três linhas:
   a designação, o gestor de projeto e o gestor financeiro. */
.periodo .centro-gerido {
    margin: 0 0 .9rem;
    line-height: 1.8;
}

/* O rótulo esbatido, e o valor com o peso do texto normal: quem procura o nome
   do gestor procura o NOME, e não a palavra «Gestor». */
.periodo .centro-gerido .etiqueta {
    font-size: .85rem;
    color: var(--texto);
    opacity: .75;
}

/* A designação é o que se lê primeiro — é a resposta a «que centro é este?». */
.periodo .centro-gerido strong {
    font-size: 1.05rem;
}

/* ⚠ É UM `h2` A VALER, e não um parágrafo: continua a ser o título da secção, e
   sem ele o esqueleto da página saltava de `h1` para os `h3` das pessoas. O que
   mudou foi o peso — dentro da caixa ele rotula o intervalo, e um título de
   secção com o tamanho de origem competia com a designação acima. */
.periodo .rotulo-periodo {
    margin: 0 0 .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--texto);
}

/* O «De» e o «Até» na mesma linha, com a etiqueta à frente do campo — a mesma
   forma da vigência do centro de custo, pedida pelo Filipe em 18/08/2026. O
   `nowrap` impede que o campo caia para debaixo da etiqueta; quem desdobra,
   quando a caixa aperta, é o `.campos-lado-a-lado` à volta. */
.periodo .intervalo .campo {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .25rem;
}

.periodo .intervalo label { margin-top: 0; }

/* ⚠ O `fieldset` PERDE A MOLDURA DO NAVEGADOR: aqui já há a caixa do
   `.periodo` à volta, e duas molduras encaixadas leem-se como dois
   blocos quando é um. */
.periodo .quem {
    margin: .75rem 0 0;
    padding: 0;
    border: 0;
}

.periodo .quem legend {
    padding: 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--texto);
}

/* As pessoas em linha, a mudar de linha quando não cabem. */
.periodo .quem .confirmar {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: .4rem 1.2rem .1rem 0;
    font-weight: 400;
}

.periodo .accoes { margin: .9rem 0 0; }

/* Cada pessoa é um bloco, separado do seguinte por um traço — é a mesma
   separação das duas secções do fim da folha do mês. */
.pessoa-periodo {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linhas);
}

.pessoa-periodo h3 {
    margin: 0 0 .6rem;
    font-size: 1rem;
    font-weight: 600;
}

/* O rodapé do total do período destaca-se das linhas dos meses: é a conta
   que o gestor vem cá fazer. */
.grelha.periodo-folhas tfoot th,
.grelha.periodo-folhas tfoot td {
    font-weight: 600;
    background: var(--fundo);
    border-top: 2px solid var(--linhas);
}

/* Os atos de um mês, em linha e com espaço entre eles: colados, dois
   verbos seguidos leem-se como um só. */
.grelha.periodo-folhas td.atos a {
    display: inline-block;
    margin-right: .8rem;
    white-space: nowrap;
}

.grelha.periodo-folhas td.atos a:last-child { margin-right: 0; }

/* Os ícones da coluna dos atos — os PDF emitidos e o ver/imprimir (31/08/2026).

   ⛔ O SVG É ESCRITO NO TEMPLATE e não vem em dados: um ícone em imagem seria um
   pedido a mais por página, e um que viesse pela vista não sobrevive ao escape da
   `Nucleo\Vista`. É a mesma razão de o triângulo da dobra ser texto.

   ⚠ ALVO DE CLIQUE MAIOR DO QUE O DESENHO: 15px de ícone num alvo de 15px é
   pequeno de mais para o rato. O `padding` dá-lhe corpo sem mexer na altura da
   linha, porque o `line-height` fica em 1. */
.grelha.periodo-folhas td.atos a.icone {
    display: inline-block;
    margin-right: .35rem;
    padding: .15rem .25rem;
    line-height: 1;
    color: var(--accao);
    border-radius: 3px;
    vertical-align: middle;
}

.grelha.periodo-folhas td.atos a.icone:hover {
    color: var(--superficie);
    background: var(--realce);
}

.grelha.periodo-folhas td.atos a.icone:focus-visible {
    outline: 2px solid var(--accao);
    outline-offset: 1px;
}

/* O SVG alinha com o texto dos outros atos da mesma célula. */
.grelha.periodo-folhas td.atos a.icone svg { display: block; }

/* A DOBRA DAS HORAS POR TAREFA (01/09/2026, pedido do Filipe: «ao clicar sobre o
   mês e sobre o total onde está Período, deve expandir as horas por tarefa»).

   ⛔ AS REGRAS SÃO AS DA FOLHA DO MÊS, e não uma variante — o alvo é a célula
   toda, o triângulo é texto, e o realce diz onde o clique responde antes de se
   clicar. Um segundo desenho para a mesma ideia é a divergência seguinte.

   ⚠ O TRIÂNGULO É TEXTO pela razão de sempre: um SVG que viesse em dados não
   sobrevive ao escape da `Nucleo\Vista`. */
.grelha.periodo-folhas .dobra {
    display: inline-block;
    width: 1rem;
    margin-right: .15rem;
    color: var(--accao);
    text-decoration: none;
}

.grelha.periodo-folhas .mes .abre-tarefas {
    display: block;
    margin: -.1rem -.2rem;
    padding: .1rem .2rem;
    border-radius: 3px;
    color: inherit;
    text-decoration: none;
}

.grelha.periodo-folhas .mes a.abre-tarefas:hover { background: #E7F1F6; }
.grelha.periodo-folhas .mes a.abre-tarefas:hover .dobra { color: var(--realce); }

.grelha.periodo-folhas .mes a.abre-tarefas:focus-visible {
    outline: 2px solid var(--accao);
    outline-offset: -2px;
}

/* ⚠ SEM CURSOR DE MÃO ONDE NÃO HÁ LIGAÇÃO — um mês sem horas naquele centro sai
   em `<span>`, e um `<span>` com aspeto de ligação promete um clique que não
   existe. É a irmã da regra do `span.abre-centro` da folha do mês. */
.grelha.periodo-folhas .mes span.abre-tarefas { cursor: default; }

/* ⛔ A ÂNCORA É O BLOCO DA PESSOA, E NÃO A LINHA (01/09/2026, pedido do Filipe: «o
   ecrã salta e deveria manter a parte superior na mesma posição — agora salta para
   outro colaborador e confunde»).

   ⚠ ESTA REGRA ESTEVE EM `tr`, E ERA O SÍTIO ERRADO. O navegador põe o alvo no topo
   da janela: com a âncora na linha, o nome da pessoa e o cabeçalho da tabela ficavam
   ACIMA do ecrã, e num mês perto do fim da tabela o que se via por baixo já era a
   pessoa seguinte. Uma margem de rolamento não corrige isso — corrige a faixa fixa
   por cima, que é outro problema.

   ⚠ A MEDIDA É A DA FOLHA DO MÊS, e pela mesma razão: a faixa de atualização vive em
   `top: 0`, e sem esta margem o topo do bloco fica atrás dela. */
.pessoa-periodo { scroll-margin-top: 5.5rem; }

/* AS LINHAS DAS TAREFAS — parcelas, e o ecrã tem de as ler como parcelas.

   ⛔ RECOLHIDAS E MAIS CLARAS DO QUE O MÊS QUE DECOMPÕEM: sem isto, uma tabela de
   três meses abertos passa a quinze linhas todas com o mesmo peso, e deixa de se
   ver onde acaba um mês e começa o outro. O avanço é o que diz «isto está dentro
   daquilo» a quem passa os olhos. */
.grelha.periodo-folhas tr.tarefa-de-mes td.tarefa,
.grelha.periodo-folhas tr.tarefa-de-periodo td.tarefa {
    padding-left: 2.15rem;
    color: #6a696b;
    font-weight: 400;
}

/* ⚠ O TRACEJADO ESCREVE-SE POR INTEIRO, e não só o `border-top-style`. No rodapé a
   regra do total já pôs `border-top: 2px solid`, e mudar-lhe só o estilo deixava um
   tracejado de dois pixéis — mais pesado do que a linha cheia que substitui. */
.grelha.periodo-folhas tr.tarefa-de-mes td,
.grelha.periodo-folhas tr.tarefa-de-periodo td {
    background: var(--superficie);
    border-top: 1px dotted var(--linhas);
}

/* ⚠ AS PARCELAS DO PERÍODO VIVEM NO `<tfoot>`, onde a regra do rodapé lhes punha o
   peso do total. Devolve-se-lhes o peso normal: a linha que se destaca é a soma, e
   não cada uma das partes. */
.grelha.periodo-folhas tfoot tr.tarefa-de-periodo td { font-weight: 400; }

.grelha.periodo-folhas tr.tarefa-de-periodo td.destaque-centro { font-weight: 600; }

/* O SELO DO ÍCONE DE EMITIR — a única cor desta aplicação que não é `currentColor`
   (01/09/2026, pedido do Filipe: «impressora azul com selo laranja», e depois «pode
   ser outra cor, desde que destaque que é um passo que sela um processo»).

   ⛔ POR QUE É QUE ESTE ÍCONE PODE TER DUAS CORES E OS OUTROS NÃO: é o único ato
   da célula que PRODUZ UM DOCUMENTO PARA TERCEIROS, e o único que quem gere não
   desfaz — reabrir uma folha emitida é da administração, e com PIN. Os outros
   quatro agem sobre o ecrã ou sobre o estado interno da folha.

   ⚠ E O LARANJA JÁ SIGNIFICA ISTO NESTA PÁGINA, que é o que o justifica melhor do
   que a novidade: a nota `.nota.aviso` por baixo de cada tabela escreve «N folhas
   por emitir» em laranja. O selo é o ato que apaga essa nota — mesma cor, mesma
   pergunta, os dois extremos do mesmo assunto.

   ⚠ COM O RATO EM CIMA VOLTA A BRANCO, COM O RESTO, E É POR CONTRASTE MEDIDO:
   #EFB14A sobre o fundo de realce #0095CD dá cerca de 1,8:1, abaixo dos 3:1 que um
   elemento gráfico exige. O laranja serve para o olho POUSAR na linha; a partir do
   momento em que o rato lá está, quem diz o que o ato faz é o `title`. */
.grelha.periodo-folhas td.atos a.icone svg .selo { fill: var(--aviso); }

.grelha.periodo-folhas td.atos a.icone:hover svg .selo { fill: var(--superficie); }

/* A coluna das horas DAQUELE centro de custo (31/08/2026).

   ⛔ É A COLUNA QUE A PÁGINA EXISTE PARA MOSTRAR: todas as outras medem a folha
   inteira, e esta diz quanto daquilo é do projeto da aba — o número que se
   reporta à autoridade que financia. Distingue-se com peso, e não com cor: a cor
   nesta aplicação está tomada — verde fecha, vermelho recusa, azul age. */
.grelha.periodo-folhas td.destaque-centro,
.grelha.periodo-folhas th.destaque-centro { font-weight: 600; }

/* O cabeçalho desta coluna é um CÓDIGO de centro de custo, e lê-se comparando
   caracteres — monoespaçado, como na tabela dos centros geridos. */
.grelha.periodo-folhas thead th:nth-child(3) {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .8rem;
}

/* ===================================================================
   PARTILHA DA MINHA FOLHA — M8, etapa 2 (01/09/2026)

   Três peças, e nenhuma inventa cor nova: a paleta é a do logo.

   ⛔ NÃO HÁ CLASSE PARA «EM VIGOR», e é deliberado. Estar em vigor é o
   caso normal de uma linha desta tabela; o que se assinala é o que já
   ACABOU. É a mesma regra do selo no painel de gestão: dez marcas de
   «está bem» em dez linhas ensinam a não olhar para elas.
   --------------------------------------------------------------------- */

/* O FORMULÁRIO. O `campos-lado-a-lado` já põe o «Com quem» e o «Por
   quantos dias» na mesma linha — o que aqui se acrescenta é a medida de
   cada um, porque um seletor de nomes e um número de dois dígitos não
   querem a mesma largura. */
.partilhar select {
    min-width: 14rem;
    max-width: 22rem;
}

/* Dois dígitos. Um campo largo para um número de 1 a 30 convida a
   escrever o que ali não cabe — é o argumento do acrónimo dos centros. */
.partilhar input[type="number"] {
    width: 6rem;
}

/* O motivo é uma linha, e ocupa o que a página tem: é onde se escreve
   «baixa médica até ao fim do mês», e cortá-lo a meio não ajuda ninguém. */
.partilhar input[type="text"] {
    width: 100%;
    max-width: 34rem;
}

/* AS DUAS TABELAS. Reaproveitam a `.grelha`; o que se acrescenta é o
   tratamento do motivo, que é texto livre e não deve alargar a tabela. */
.grelha.partilhas td:nth-child(3) {
    max-width: 22rem;
    font-size: .82rem;
    color: #6b6a6c;
}

/* UMA PARTILHA QUE ACABOU — revogada ou caducada.
   ⛔ ESBATIDA, E NÃO ESCONDIDA: quem concedeu tem de conseguir ver que
   concedeu, mesmo depois de o prazo passar. Uma linha que desaparecesse no
   dia em que caduca deixava a pessoa sem saber se alguma vez existiu — é a
   mesma razão por que uma observação não se apaga.
   ⚠ E NÃO LEVA COR DE ERRO: caducar é o comportamento previsto desta
   funcionalidade, não uma falha. Neste projeto o vermelho é do que a
   aplicação recusa. */
.grelha.partilhas tr.partilha-finda td {
    opacity: .55;
}

/* O «Revogar» é um botão dentro de uma célula de atos: o formulário que o
   embrulha não deve ocupar uma linha só para ele. */
.grelha.partilhas td.atos form {
    display: inline;
}

/* ===================================================================
   A FAIXA DA EDIÇÃO DELEGADA — M8, etapa 3 (01/09/2026)

   Escolha do Filipe entre quatro variantes desenhadas: VERDE DA MARCA,
   cheio. «Uma faixa permanente com cor distinta bem visível com o nome do
   colaborador que delegou», mais a data de validade.

   ⛔ POR QUE É QUE NÃO É AMARELA NEM VERMELHA, e não é preferência: este
   projeto usa as cores como gramática. O vermelho é do que a aplicação
   RECUSA; o amarelo está tomado pela faixa de atualização, que é amarelo
   cheio e colada ao topo; e o azul de ação é «esta folha é de outra
   pessoa», na `.folha-de-outrem` — ver a explicação dela.

   ✔ E O VERDE DA MARCA É A ÚNICA COR QUE NÃO ROUBA SIGNIFICADO A NADA,
   medido em 01/09/2026: aparece três vezes em toda a folha de estilo, e
   sempre como TRAÇO de 3 ou 4 px. ⚠ Não confundir com o `--positivo`
   (#6B873E), que é outro verde e ESSE diz «está bem, fechou, bateu certo»
   — cinco usos, todos de estado. Duas cores com o mesmo nome não são a
   mesma cor.

   ⛔ TEXTO ESCURO, MAIOR E NEGRITO, e é MEDIÇÃO e não gosto. Contraste
   sobre o #99BA3D: com branco 2,22 — não serve —, com o texto escuro
   3,78. A norma pede 4,5 para texto normal e 3,0 para texto grande, pelo
   que a 1,2 rem e negrito passa com folga. Para referência, a faixa
   amarela que já existe está a 4,43 com texto normal: esta fica MAIS
   legível do que ela, não menos.

   `sticky` E NÃO `fixed`, e os margens negativos cancelam o padding do
   `body` — as duas coisas pela mesma razão da faixa de atualização, que é
   onde estão explicadas. A grelha do mês é longa e passa-se a vida a
   rolar nela: uma faixa que fique lá em cima, fora de vista, é uma faixa
   que não se lê.
   --------------------------------------------------------------------- */
.partilha-faixa {
    position: sticky;
    top: 0;
    z-index: 11;   /* acima da faixa de atualização, que é 10: a versão nova
                      pode esperar; saber em que folha se escreve, não */
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: -2rem -1rem 1.5rem;
    padding: .6rem 1rem;
    background: var(--marca);
    color: var(--texto);
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.partilha-faixa .nome { font-weight: 700; }

/* O prazo vai para a ponta oposta, e um pouco menor: o nome é o que se lê
   primeiro, a data é o que se confere depois. */
.partilha-faixa .ate {
    margin-left: auto;
    font-size: 1rem;
    font-weight: 600;
}

/* A MESMA MENSAGEM, NAS PÁGINAS DE CONFIRMAÇÃO *(10/09/2026, A-101)* — «esta
   folha é de X, o ato fica registado com o seu nome como autor». Seis sítios em
   `app/Vistas/folha/`, e estiveram todos sem regra nenhuma desde que nasceram:
   um `<p role="status">` que se lia como o resto do texto da página.

   ⛔ VIVE AQUI, COLADA À `.partilha-faixa`, E NÃO JUNTO DA `.nota.aviso`: as duas
   dizem a mesma coisa — em nome de quem se trabalha — e quem mexer numa tem de
   ver a outra. Foi por viverem longe uma da outra que esta ficou por escrever.

   ⚠ A COR É A MESMA E A FORMA NÃO. A `.partilha-faixa` é `sticky` e cheia porque
   a grelha do mês é longa e passa-se a vida a rolar nela; estas páginas cabem num
   ecrã e não têm de onde fugir. E não leva o amarelo do aviso: agir em nome de
   outra pessoa é um facto, não um risco — o amarelo diria «cuidado». */
.faixa {
    margin: 0 0 1.5rem;
    padding: .6rem 1rem;
    background: var(--fundo);
    border-left: 4px solid var(--marca);
    border-radius: 0 4px 4px 0;
    font-weight: 600;
}

/* A LIGAÇÃO PARA A FOLHA PARTILHADA, na página das partilhas. É um ato e
   não uma nota: lê-se como as outras ações da aplicação. */
.grelha.partilhas td.abrir a {
    font-weight: 600;
    white-space: nowrap;
}

/* O MAPA DE FÉRIAS DA ENTIDADE — a pré-visualização na página da administração
   (M5, etapa 1, 03/09/2026 — docs/25). Períodos com início e fim, na forma do mapa
   de 2026 da AREAM. Cheio é aprovado, contorno é previsto — a leitura do mapa anual. */
.mapa-ferias td.datas { white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.7; }
.ferias-periodo { display: inline-block; padding: 0 .25rem; border-radius: 3px; }
.ferias-periodo.previsto { box-shadow: inset 0 0 0 2px var(--marca); color: var(--marca); font-weight: 600; }

/* A LINHA DE UMA VERSÃO JÁ SUBSTITUÍDA, na tabela das emissões do mapa
   *(10/09/2026, A-101)*. A classe estava escrita na vista e o CSS não a conhecia:
   as duas linhas saíam iguais, e só a palavra na primeira coluna as distinguia.

   ⚠ É O FUNDO E NÃO A OPACIDADE, e é decisão: `opacity` na linha inteira baixa o
   contraste de tudo o que lá está dentro, incluindo a ligação para o PDF — que é
   precisamente o que alguém pode querer abrir para conferir o que circulou. Isto
   reutiliza o idioma da `.grelha tr.defeito`, que marca uma linha sem a apagar. */
.grelha tr.substituida td { background: var(--fundo); }

/* ─── OS MAPAS ─────────────────────────────────────────────────────────────────
   M9, etapa 1 (04/09/2026 — docs/27). Quatro classes, e nenhuma é decorativa:
   sem elas a lista lê-se como texto corrido, os números alinham à esquerda e uma
   tabela de doze meses empurra a página para o lado.

   ⚠ ESCRITAS AO MESMO TEMPO QUE A VISTA, e é a lição do A-166: uma classe que o
   HTML usa e o CSS não conhece não dá erro nenhum — dá um ecrã que parece por
   acabar, e ninguém liga as duas coisas. As quatro foram medidas contra o CSS
   antes de existirem. */

/* A lista do que existe: o título e, por baixo, a pergunta a que responde. Com
   dez mapas de nome parecido, é a segunda linha que faz escolher. */
.lista-mapas { list-style: none; margin: .5rem 0 0; padding: 0; }
.lista-mapas li { padding: .5rem 0; border-bottom: 1px solid var(--linhas); }
.lista-mapas li:last-child { border-bottom: none; }
.lista-mapas li.atual { font-weight: 600; }
.lista-mapas a { display: inline-block; }
.lista-mapas .nota { display: block; margin: .1rem 0 0; }

/* ⛔ A TABELA ROLA DENTRO DA SUA CAIXA, E A PÁGINA NÃO. Um mapa de um projeto tem
   uma coluna por mês; sem isto, doze meses põem a barra horizontal no documento
   inteiro e a barra de navegação sai do ecrã. */
.tabela-larga { overflow-x: auto; }

/* Números à direita. A tabela já tem algarismos tabulares — é regra global do
   `table` — e o que falta é o alinhamento. */
.mapa-resultado th.num,
.mapa-resultado td.num { text-align: right; }

/* Um link que se lê como botão. ⚠ Herda o aspeto do `button` de propósito: são
   dois atos do mesmo peso — descarregar o que se está a ver —, e dois aspetos
   para o mesmo peso é o defeito que a hierarquia de cores de 24/08 corrigiu. */
.botao {
    display: inline-block;
    margin-top: 0;
    padding: .6rem 1.2rem;
    font-weight: 600;
    color: var(--superficie);
    background: var(--accao);
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
}

.botao:hover { background: var(--realce); }
.botao:focus { outline: 2px solid var(--realce); outline-offset: 2px; }

.botao.secundario {
    color: var(--accao);
    background: var(--superficie);
    border-color: var(--linhas);
    margin-left: .5rem;
}

/* ------------------------------------------------------------------
   O REGISTO DE EXPEDICAO — quem recebeu cada documento (RN-10).

   A pagina e administrativa e nao decide nada: o aspeto e o da grelha
   comum, e o pouco que aqui se acrescenta serve para nao confundir tres
   coisas que sao diferentes — o documento que foi entregue, a ausencia
   de documento indicado (que NAO e uma falha de preenchimento) e um
   documento que ja foi substituido por uma reemissao.
   ------------------------------------------------------------------ */

/* A coluna dos atos e estreita e nao compete com o resto da linha. */
.grelha.expedicao td.expedicao-retirar {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* O formulario de um ato por linha nao pode empurrar a altura da celula. */
.expedicao-retirar form { display: inline; margin: 0; }

/* «Nao indicado» — cinzento e sem peso. E uma ausencia legitima, nao um
   erro: o vermelho aqui acusaria quem seguiu a regra. */
.sem-documento {
    color: #6b6a6c;
    font-style: italic;
}

/* O documento que uma reemissao substituiu. Amarelo de aviso: quem o
   recebeu tem o papel velho, e e a pergunta mais util desta tabela. */
.expedicao-substituido {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    font-size: .78rem;
    color: var(--texto);
    background: #fdf4e0;
    border: 1px solid var(--aviso);
    border-radius: 3px;
}

/* As caixas dos documentos, uma por linha: sao nomes de ficheiro e em
   coluna leem-se de relance. */
.expedicao-documentos {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--linhas);
    border-radius: 4px;
}

.expedicao-documentos legend {
    padding: 0 .35rem;
    font-weight: 600;
}

.expedicao-documentos label {
    display: block;
    margin: .25rem 0;
    font-weight: 400;
}

.expedicao-documentos input[type="checkbox"] { margin-right: .4rem; }

/* O ato de retirar uma linha de registo. Discreto de proposito: nao e' um
   ato principal, e nao pode ter o peso do «Acrescentar».

   ⚠ NAO SE REAPROVEITA A `.alternativa` AQUI, e foi achado de auditoria em
   16/09/2026: aquela foi desenhada para um paragrafo com uma ligacao e traz
   `margin: 1.5rem 0 0`, que dentro de uma celula de tabela empurra a linha
   inteira para baixo. E' a familia do A-166 — a classe existe no CSS e nao faz
   o que quem a escreveu supos —, e a guarda do `casos/46` nao a apanha: ela
   verifica que a classe TEM regra, e aquela tem. */
.botao-retirar {
    margin: 0;
    padding: .15rem .5rem;
    font-size: .82rem;
    font-weight: 400;
    color: var(--erro);
    background: var(--superficie);
    border: 1px solid var(--linhas);
    border-radius: 3px;
}

.botao-retirar:hover { border-color: var(--erro); }
.botao-retirar:focus { outline: 2px solid var(--erro); outline-offset: 1px; }