/* O que é só do Portal. O resto vem do núcleo do design system (engi-ds.css, sincronizado do EngiDesignSystem):
   a letra, as cores, os botões e as tabelas não se escrevem aqui. */

/* O conteúdo ocupa o ecrã todo (pedido do dono, 2026-09-22): o design system trava o conteúdo a 1600px por
   omissão, e as tabelas de movimentos e documentos ganham com cada pixel. A variável existe no DS para o host
   decidir; as tabelas das páginas não levam max-width próprio. */
:root { --ds-conteudo-max: 100%; }

/* O FocusOnNavigate põe o foco no título ao mudar de página, para os leitores de ecrã; o contorno desse foco
   não serve a quem vê. */
h1:focus { outline: none; }

/* Nos Movimentos, a linha do movimento tratado (conciliado por inteiro ou sem documento, e rateado) fica verde, para se ver
   o que falta tratar (o dono, 2026-10-09). O verde é o do núcleo, também no tema escuro; ao passar o rato ganha o realce do
   núcleo, que carrega depois deste ficheiro. */
.ds-table tbody tr.mov-tratado { background: var(--ds-success-wash); }

/* Nos Movimentos, a Estado, a Docs, o Rateio e a Notas apertam-se no tablet, de 641 a 1279px, e a Docs e a Notas mostram o
   ícone da célula no lugar da palavra. A palavra continua no cabeçalho para o leitor de ecrã e para o menu de
   colunas do núcleo, que lê o texto, e a chave das escolhas guardadas não muda. Com uma só conta, a tabela não cabia num tablet
   de 1180px e a Notas ficava cortada debaixo da engrenagem (faltavam 30px, 31/10). No telemóvel e a 1280 e acima fica como
   estava. A Estado aperta-se para o texto da etiqueta maior, «Sem documento», se ler inteiro (a nota da 97). Tem a largura da
   página (LarguraDaEstado, nos Movimentos), e no tablet o browser aperta-a quando a tabela não chega: a 1180 fica com 147px, e
   com as margens de 8px a etiqueta cabe com a margem de dentro inteira (2/11). Os limites são o complemento exato dos dois lados,
   para nenhuma largura com fração ficar de fora. */
.mov-cab-icone { display: none; }
@media not all and (max-width: 640px) {
    @media not all and (min-width: 1280px) {
        .ds-table th.mov-aperta, .ds-table td.mov-aperta { padding-left: 8px; padding-right: 8px; }
        .mov-cab-palavra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
        .mov-cab-icone { display: inline-flex; align-items: center; }
    }
}

/* A barra de filtros comum (BarraDeFiltros, nas Horas, nas Pessoas e nos Projetos): o período numa linha, com os totais e o
   «Remover os filtros» à direita, e os campos por baixo, em colunas iguais que se reorganizam pela largura (três no tablet na
   vertical), com a pesquisa em duas. Numa linha só, a barra partia-se em linhas desiguais e a pesquisa ficava cortada (o dono,
   2026-10-19). A ordem no código não muda: os totais vêm no fim, e só no ecrã sobem para a linha do período. */
.barra-filtros { gap: 8px; flex-wrap: wrap; }
.barra-filtros-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.barra-filtros-fim { order: 1; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.barra-filtros-campos { order: 2; flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.barra-filtros-campos > * { min-width: 0; }
.barra-filtros-campos .ds-select-wrap, .barra-filtros-campos .ds-select { width: 100%; max-width: none; }
.barra-filtros-campos > [data-filtro="pesquisa"] { width: 100%; }
@media (min-width: 641px) { .barra-filtros-campos > [data-filtro="pesquisa"] { grid-column: span 2; } }
.barra-filtros-fim:empty { display: none; }

/* O quadro do rateio na gaveta do movimento, até 640 px, onde a gaveta ocupa o ecrã todo: a origem da fatia («Horas»,
   «Manual»...) sai da quarta coluna e passa para uma linha suave por baixo do nome, e as células ficam com margens de 8 px.
   A 390 o nome tinha 108 px e partia palavras a meio, uma por linha (a 97, 5/11); fica com uns 195. Acima de 640 fica como
   estava. As duas origens estão sempre no HTML e a mesma media query mostra uma e esconde a outra: o display:none tira-a
   também ao leitor de ecrã, que lê só uma. O núcleo carrega depois deste ficheiro, por isso a regra das células leva a
   .ds-table, como a mov-aperta. */
.rateio-origem-linha { display: none; }
@media (max-width: 640px) {
    [data-tabela="rateio-do-movimento"] .ds-table td { padding-left: 8px; padding-right: 8px; }
    [data-tabela="rateio-do-movimento"] .ds-table td.rateio-origem { display: none; }
    .rateio-origem-linha { display: block; }
}

/* O Início: o gráfico dos 12 meses e a tabela das contas lado a lado, e um por baixo do outro abaixo de 900 px. Era uma
   grelha em linha sem media query, e a 390 o gráfico ficava com 34 px (a e5 e a 97, 2/11). */
.inicio-tesouraria { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 900px) {
    .inicio-tesouraria { grid-template-columns: minmax(0, 1fr); }
}