/* CRM Methodwise — folha única, servida estaticamente. Sem framework, sem build. Direção visual: docs/design/prototipo-v3.html (protótipo aprovado pelo cliente, 2026-08-09) — topbar e navegação lateral escuras, conteúdo em cartões brancos sobre fundo frio, chips de estado tintados, tipografia densa de aplicação. O v3 trouxe a navegação em duas formas: lateral colapsável acima dos 900px, gaveta abaixo. As duas estão implementadas SEM JavaScript, e o porquê de cada mecanismo está no cabeçalho de src/nucleo/html.ts. O que do protótipo está feito e o que falta vive em docs/design/levantamento.md. As divergências deliberadas — todas — estão em docs/design/README.md. Tipografia: corpo em Nohemi (woff2 local, ttf como fallback); títulos na stack Helvetica Neue. A Neue Haas Grotesk ficou de fora por licença — se um dia se licenciar, entra à frente da Helvetica Neue nesta stack e mais nada muda. */ /* ------------------------------------------------------------------ */ /* Tokens — valores do protótipo */ /* ------------------------------------------------------------------ */ :root { /* Identidade */ --cor-primaria: #326cb5; --cor-primaria-hover: #2a5c9c; --cor-primaria-escura: #26538c; --cor-acento: #eba821; /* Tinta e texto. A escada de cinzentos do protótipo (de #909aa5 a #6b7280) falha o contraste AA sobre os fundos claros — os rótulos em versaletes ficavam em 2.9:1. Escurecida o mínimo para que o pior par (sobre o fundo de página #f5f6f8) fique acima de 4.5:1, mantendo os quatro degraus de hierarquia e o tom azulado. Rácios no pior fundo: rótulo 4.91, mudo 5.29, suave 5.67, texto-2 7.33. */ --cor-tinta: #181818; --cor-texto-2: #4b5259; --cor-texto-suave: #5b6270; --cor-texto-mudo: #5f6773; --cor-rotulo: #646c78; /* Superfícies claras */ --cor-fundo: #f5f6f8; --cor-papel: #ffffff; --cor-papel-suave: #fafbfc; --cor-papel-rodape: #fcfcfd; /* Translúcido, e não o opaco `#f7f9fc` que aqui esteve: a linha sob o cursor é pintada na própria célula, e um fundo opaco tapava as sombras de deslize do `.tabela-envelope` — só nessa linha, o que abria um entalhe na faixa e minava a única coisa que as sombras têm para dizer. Sobre papel branco dá a mesma cor. (Achado do revisor.) */ --cor-hover-linha: rgba(15, 23, 42, 0.026); --cor-hover-acao: #f4f8fd; --cor-cinza-claro: #f2f4f7; /* Bordas */ --cor-borda: #e5e7eb; --cor-borda-suave: #eef0f3; --cor-borda-linha: #f3f4f6; --cor-borda-campo: #dcdfe4; --cor-borda-campo-hover: #b9bfc8; /* Escuro (topbar e navegação) */ --cor-escuro: #15191f; --cor-escuro-2: #21262e; --cor-escuro-3: #1c2027; --cor-escuro-borda: #2e343d; --cor-escuro-texto: #f2f3f5; --cor-escuro-mudo: #98a1ad; --cor-escuro-fraco: #7d8694; /* Semântica (texto / fundo tintado) */ --cor-vencido: #a3271b; --cor-vencido-forte: #c0392b; --cor-vencido-fundo: #fdecea; --cor-ok: #1e6b3f; --cor-ok-fundo: #e8f5ec; --cor-info: #1e4a80; --cor-info-fundo: #eaf1fa; --cor-ambar: #8a6410; --cor-ambar-fundo: #fdf3dc; --cor-neutro: #4b5259; --cor-neutro-fundo: #f2f4f7; /* Tipo */ --tipo-corpo: "Nohemi", "Helvetica Neue", Helvetica, Arial, sans-serif; --tipo-titulos: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Forma e medidas */ --raio: 6px; --raio-cartao: 10px; --sombra-cartao: 0 1px 2px rgba(16, 24, 40, 0.04); --altura-topo: 58px; --largura-lateral: 212px; /* Colapsada: 22px de ícone e a almofada à volta. Valor do v3. */ --largura-lateral-colapsada: 56px; --largura-conteudo: 1440px; /* Coluna de leitura de página inteira: formulário, ou cartão de erro. Era 640px escrito à mão no `.form-pagina`; passou a token quando o segundo sítio apareceu, para não haver duas medidas a divergir. */ --largura-coluna: 640px; /* Espaço */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 18px; --esp-6: 28px; --esp-7: 32px; } /* As `url()` das fontes são RELATIVAS de propósito, e não é arrumação. Uma `url()` relativa resolve contra a URL DA FOLHA de estilos: servida em `/e//estilo.css`, `url("Nohemi-Bold.woff2")` pede `/e//Nohemi-Bold.woff2` — versionada pelo mesmo valor, sem uma linha de reescrita e sem este ficheiro saber que a versão existe. É o que faz as fontes entrarem na mesma regra do CSS em vez de terem uma sua. Com a versão numa query (`?v=…`) era preciso reescrever este ficheiro para lhes chegar — e reescrevê-lo mudava-o. Ver `nucleo/estaticos.ts`. Servida em `/estilo.css` (sem versão) continuam a resolver para `/Nohemi-…`: o caminho relativo está certo nos dois casos. */ @font-face { font-family: "Nohemi"; src: url("Nohemi-Regular.woff2") format("woff2"), url("Nohemi-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Nohemi"; src: url("Nohemi-Bold.woff2") format("woff2"), url("Nohemi-Bold-BF6438cc587b5b5.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ */ /* Base */ /* ------------------------------------------------------------------ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--cor-fundo); color: var(--cor-tinta); font-family: var(--tipo-corpo); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } ::selection { background: #eba82155; } a { color: var(--cor-primaria); text-decoration: none; } a:hover { color: var(--cor-primaria-escura); } :focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; } h1 { font-family: var(--tipo-titulos); font-size: 27px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 5px; } h2 { font-family: var(--tipo-titulos); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } small { font-size: 12px; color: var(--cor-rotulo); } /* ------------------------------------------------------------------ */ /* Concha da aplicação: topbar + lateral + conteúdo */ /* ------------------------------------------------------------------ */ .topo { background: var(--cor-escuro); color: var(--cor-escuro-texto); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #000; } /* O interior do topo ocupa a largura toda — e é uma divergência deliberada face ao protótipo. Ver docs/design/README.md. ------------------------------------------------------------------- O protótipo tem `max-width: 1440px; margin: 0 auto` aqui, igual ao `main`. Copiámo-lo à letra, e num ecrã largo o resultado é este: o topo centra-se no ECRÃ inteiro, o `main` centra-se na área de conteúdo (o ecrã MENOS a lateral de 212px), e os dois deixam de estar alinhados. O logótipo e o "Sair" ficam a flutuar numa faixa central enquanto a página por baixo começa noutro sítio. O protótipo não se pronunciou sobre isto: a 1440px de largura — a medida a que foi desenhado — o limite não tem efeito nenhum e os dois alinham por coincidência. O caso só aparece acima dessa largura, que é onde o cliente está. Por isso o topo passa a acompanhar a moldura (`.concha`), que é sempre da largura toda. A almofada de 28px mantém-se, e com ela o logótipo alinha à esquerda com a lateral e o "Sair" à direita com a margem da página. O limite de 1440px continua no `main`, onde serve para o que foi feito: não deixar a linha de texto crescer sem fim. */ .topo-interior { padding: 0 var(--esp-6); height: var(--altura-topo); display: flex; align-items: center; gap: var(--esp-6); } .topo-marca { display: flex; align-items: baseline; gap: 9px; color: inherit; } .topo-marca strong { font-family: var(--tipo-titulos); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: #fff; } .topo-marca img { height: 12px; width: auto; display: block; opacity: 0.75; } .topo-sessao { margin-left: auto; display: flex; align-items: center; gap: 14px; } .topo-sessao form { margin: 0; } .topo-sessao .sair { border: 1px solid var(--cor-escuro-borda); background: var(--cor-escuro-2); color: var(--cor-escuro-mudo); border-radius: var(--raio); padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; } .topo-sessao .sair:hover { color: var(--cor-escuro-texto); border-color: var(--cor-escuro-fraco); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--cor-primaria); color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; flex: none; } .concha { display: flex; align-items: stretch; } .lateral { width: var(--largura-lateral); flex: none; background: var(--cor-escuro); border-right: 1px solid #000; display: flex; flex-direction: column; position: sticky; top: var(--altura-topo); height: calc(100vh - var(--altura-topo)); z-index: 15; } .lateral nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; } .lateral nav a { display: flex; align-items: center; gap: 10px; color: var(--cor-escuro-mudo); font-size: 13px; font-weight: 500; border-radius: var(--raio); padding: 9px 10px; } /* O rótulo da lateral tem classe PRÓPRIA e não a `.rotulo` genérica. A primeira versão reusou-a e o menu saiu todo em versaletes: a `.rotulo` global é o rótulo tipográfico dos formulários, com `text-transform: uppercase`. Nomes de classe genéricos numa folha única colidem — e colidem em silêncio, porque o resultado continua a ser CSS válido. */ .lateral nav a .lateral-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* O número de tarefas à espera, encostado à direita da entrada. Número em âmbar e não pastilha cheia — é o que o v3 desenha, e uma pastilha ao lado da entrada ativa competia com o realce dela. `margin-left: auto` empurra-o; `flex: none` impede que encolha quando o rótulo é comprido. Zero nunca chega aqui: quem decide é o `contador()` em html.ts. */ .lateral nav a .contador { margin-left: auto; flex: none; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cor-acento); } /* Colapsada não há sítio para o número: 56px são o ícone e mais nada. Fica o ponto sobre o ícone, que é o mesmo aviso sem texto. */ .lateral--colapsada nav a .contador { position: absolute; top: 6px; right: 12px; font-size: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-acento); } .lateral--colapsada nav a { position: relative; } .lateral nav a .icone { width: 22px; text-align: center; font-size: 14px; flex: none; } .lateral nav a:hover { background: var(--cor-escuro-3); color: #e7e9ec; } .lateral nav a[aria-current="page"] { background: var(--cor-escuro-2); color: #fff; font-weight: 600; } .conteudo-area { flex: 1; min-width: 0; } main.conteudo { max-width: var(--largura-conteudo); margin: 0 auto; padding: var(--esp-7) var(--esp-6) 64px; } /* Página estreita e centrada (login, página mínima) */ main.conteudo--estreito { max-width: 420px; padding-top: 11vh; } /* ------------------------------------------------------------------ */ /* Cabeçalho de página */ /* ------------------------------------------------------------------ */ .pagina-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; } .pagina-cab p { margin: 0; color: var(--cor-texto-suave); font-size: 13.5px; } /* As saídas de uma recusa vivem DENTRO do bloco da mensagem. ------------------------------------------------------------------- Medido a 2026-08-29: no rodapé do formulário ficavam 743px abaixo da mensagem e fora do ecrã (topo a 936px numa janela de 813). Uma recusa que oferece a saída abaixo da dobra não oferece nada. */ .mensagem-acoes { margin: var(--esp-3) 0 0; display: flex; gap: var(--esp-2); flex-wrap: wrap; } .pagina-acoes { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; } /* «+ Novo negócio»: o alvo é o botão, e é igual nos dois estados. ------------------------------------------------------------------- AQUI ESTIVERAM DUAS REGRAS, E AS DUAS SAÍRAM. A primeira, `.pagina-cab > .novo-negocio[open] { flex: 0 0 100% }`, fazia o botão saltar 1034px ao abrir — o `flex-basis` mudava com o estado. A segunda pôs o `` a ser o `.pagina-cab` inteiro, o que resolveu o salto e trouxe outros dois: o `

` da página passava a abrir o formulário, e o hover acendia a faixa toda. O que fica: o `
` ocupa a linha inteira SEMPRE. Não é uma regra de estado — é a mesma aberto e fechado —, e por isso não há nada que mude de tamanho ao alternar. O `` volta a ser só o botão, encostado à direita. */ .pagina-cab > .novo-negocio { flex: 0 0 100%; } /* O BOTÃO É ANCORADO AO CABEÇALHO, e não empurrado pela linha. ------------------------------------------------------------------- O `
` tem de ocupar a linha inteira para o formulário nascer com a largura da página — mas isso punha o botão numa linha PRÓPRIA, por baixo do título. Medido: o cabeçalho passava de 46px para 107, e o botão descia 70px. A correção era sobre o alvo do clique; pagá-la com 61px de cabeçalho e com o botão fora da linha do título é trocar um defeito por outro. Com o `` fora do fluxo e preso ao canto do cabeçalho, o `
` fechado passa a não ter altura nenhuma: o que sobra dele é o formulário, que só existe quando abre. O botão volta para junto do título e a sua caixa deixa de depender da linha em que caiu. `--revela` é um modificador do SERVIDOR e não um `:has()`: quem desenha o cabeçalho sabe se pôs lá o revelador, e uma folha que depende de suporte do navegador para posicionar um botão falha em silêncio quando não o tem. O que isto assume, e diz-se: que o título CABE à esquerda do botão. É verdade para «Negócios»; um título longo passaria por baixo dele. */ .pagina-cab--revela { position: relative; /* O `
` fechado é um item de flex de largura inteira e altura ZERO — o `` saiu do fluxo e o formulário não existe. Mesmo assim abre uma segunda linha, e o `gap` do `.pagina-cab` cobrava 24px por ela: medido, o cabeçalho fechado dava 70px onde dava 46. O ar entre o cabeçalho e o formulário passa a vir de quem está por baixo — o `.novo-negocio-forma` traz a sua margem —, que é o mesmo desenho do `.cartao-corpo--seguido`. */ row-gap: 0; } .novo-negocio > summary { cursor: pointer; width: max-content; position: absolute; top: 0; right: 0; } /* OS DOIS RÓTULOS EMPILHADOS, e a caixa fica com a largura do MAIS LARGO. ------------------------------------------------------------------- O idioma do sistema para isto é o `.revelar-botao`, que troca o texto com `font-size: 0` e um `::after`. Não serve aqui, e a razão é a que torna o idioma bom nos outros sítios: lá o alvo do clique é o cabeçalho do cartão e o span é um rótulo lá dentro, portanto a caixa do span pode encolher à vontade. **Aqui o span é o alvo** — medido, «+ Novo negócio» 123px contra «✕ Fechar» 81 —, e 42px a menos ao abrir é a mesma família do salto de manhã, em pequeno. Empilhados na mesma célula de grelha, a caixa é dimensionada pelo mais largo dos dois e não se mexe. `visibility` e não `display`: `none` tirava o elemento do cálculo da grelha e a largura voltava a variar. Sem número escrito à mão — um `min-width: 123px` amarrava a caixa ao texto português e envelhecia em silêncio à primeira mudança de palavra. */ .novo-negocio > summary { display: grid; } .novo-negocio > summary > span { grid-area: 1 / 1; } .novo-negocio > summary .rotulo-fechar { visibility: hidden; } .novo-negocio[open] > summary .rotulo-abrir { visibility: hidden; } .novo-negocio[open] > summary .rotulo-fechar { visibility: visible; } .novo-negocio-forma { margin-top: var(--esp-3); padding: var(--esp-5); text-align: left; } .migalhas { font-size: 12.5px; color: var(--cor-rotulo); margin-bottom: 14px; display: flex; gap: 7px; flex-wrap: wrap; } .migalhas .atual { color: var(--cor-texto-2); } /* ------------------------------------------------------------------ */ /* Cartões */ /* ------------------------------------------------------------------ */ .cartao { background: var(--cor-papel); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); overflow: hidden; } .cartao-cab { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--cor-borda-suave); flex-wrap: wrap; } .meta { font-size: 12.5px; color: var(--cor-rotulo); } .cartao-corpo { padding: 16px 18px; } /* Texto solto como filho DIRETO do cartão. ------------------------------------------------------------------- O `.cartao` não tem almofada própria — quem a traz é o `.cartao-corpo`. Um parágrafo posto ao lado dele, sem envelope, herda zero e encosta-se à borda: é o que acontecia nos cartões da Administração, onde os textos de ajuda ficavam a tocar no rebordo enquanto os campos ao lado respiravam 18px. A almofada iguala-se à do corpo em vez de se inventar um valor: o que o olho compara é o alinhamento da coluna de texto, e duas medidas diferentes no mesmo cartão leem-se como desalinhamento antes de se lerem como falta de espaço. */ .cartao > .ajuda, .cartao > .faixa--rodape { padding-left: var(--esp-5); padding-right: var(--esp-5); } /* A faixa traz a sua almofada vertical de `.faixa`; só as laterais é que precisavam de subir de 11px para 18px. */ .cartao > .ajuda { padding-bottom: var(--esp-4); } /* Segundo bloco de corpo no mesmo cartão: não repete a almofada de cima, senão os dois espaços somam-se e abre-se um vazio a meio do cartão. O ar entre os dois vem de quem está por baixo (.form-acoes traz a sua margem). */ .cartao-corpo--seguido { padding-top: 0; } /* Revelador do formulário de acrescentar: o cabeçalho do cartão é o , e o formulário só aparece quando é aberto. Sem JavaScript — details/summary chega. */ .revelar > summary { cursor: pointer; list-style: none; } .revelar > summary::-webkit-details-marker { display: none; } .revelar-botao { color: var(--cor-primaria); font-size: 12.5px; font-weight: 500; white-space: nowrap; } .revelar > summary:hover .revelar-botao { color: var(--cor-primaria-escura); } /* Aberto, o botão passa a fechar: o rótulo é substituído sem JavaScript — o texto encolhe a zero e entra o do pseudo-elemento. */ .revelar[open] > summary .revelar-botao { color: var(--cor-rotulo); font-size: 0; } .revelar[open] > summary .revelar-botao::after { content: "✕ Fechar"; font-size: 12.5px; } .revelar > summary:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; } /* Rodapé de cartão: a mesma classe serve um `` que LEVA a outro sítio e um `` que ABRE ali. Os dois são `--cor-primaria`. ------------------------------------------------------------------- NÃO-DECISÃO REGISTADA (2026-08-23). Levantou-se se a cor devia separar os dois, e a resposta é FICA COMO ESTÁ — escrita aqui para não voltar a ser feita como se fosse nova. **Se o `` e o `` partilham o azul em toda a aplicação, mudá-lo em quatro linhas criava a exceção** — passava a haver dois dialetos e nenhum argumento a dizer qual é o certo. **E o que faltava naquele caso não era cor: era o VERBO.** Quatro gavetas liam-se como ligações porque os rótulos estavam no pretérito («Aceitou esta versão»); todos os `` que esta aplicação abre são verbos — «Ajustar a taxa», «Escrever outro preço», «+ Criar». Postos no infinitivo, leem-se como controlos com a cor que já tinham. **A condição que reabre isto:** alguém querer separar «leva a outro sítio» de «abre aqui» **na aplicação inteira**, com o mesmo argumento em todos os sítios. É decisão de sistema e não sai de um cartão. */ .cartao-rodape { display: block; width: 100%; border: 0; border-top: 1px solid var(--cor-borda-suave); background: var(--cor-papel-rodape); color: var(--cor-primaria); text-align: left; padding: 11px 16px; font: inherit; font-size: 12.5px; font-weight: 500; } .cartao-rodape:hover { background: var(--cor-hover-acao); } /* Empurra para a direita dentro de qualquer linha flex */ .direita { margin-left: auto; } .aperta { min-width: 0; } /* Ponto de cor no cabeçalho de painel */ .ponto { width: 8px; height: 8px; border-radius: 2px; flex: none; } .ponto--vencido { background: var(--cor-vencido-forte); } .ponto--hoje { background: var(--cor-primaria); } .ponto--ambar { background: var(--cor-acento); } .ponto--neutro { background: var(--cor-rotulo); } /* Contagem em pílula */ .pilula { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 2px 9px; min-width: 26px; text-align: center; } .pilula--vencido { color: var(--cor-vencido); background: var(--cor-vencido-fundo); } .pilula--info { color: var(--cor-info); background: var(--cor-info-fundo); } .pilula--ambar { color: var(--cor-ambar); background: var(--cor-ambar-fundo); } .pilula--neutro { color: var(--cor-neutro); background: var(--cor-neutro-fundo); } /* Grelha de painéis: colunas de pilhas, não uma malha de células. Os cartões têm altura natural e cada coluna empilha-os sem folga — com células, um painel vazio ao lado de um cheio abria um buraco vertical do tamanho do maior da fila. */ .grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--esp-5); align-items: start; } .grelha--ficha { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .coluna { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; } /* ------------------------------------------------------------------ */ /* Linhas de lista dentro de cartões */ /* ------------------------------------------------------------------ */ .linhas { display: flex; flex-direction: column; } .linha { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--cor-borda-linha); } .linha:last-child { border-bottom: none; } .linha:hover { background: var(--cor-papel-suave); } .linha-texto { min-width: 0; flex: 1; } .linha-titulo { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Quem fez, ao lado da razão e antes do chip que o qualifica. Declara a cor: o mesmo `.linha-titulo` é montado em ecrãs diferentes, e um `inherit` aqui ligava a legibilidade do nome ao sítio onde o componente calhasse cair. Peso normal para não competir com a razão, que é o título da linha. */ .linha-autor { font-weight: 400; color: var(--cor-texto-mudo); } .linha-sub { font-size: 12.5px; color: var(--cor-texto-mudo); margin-top: 2px; } .linha-quando { font-size: 12.5px; color: var(--cor-texto-suave); white-space: nowrap; } .linha-quando--vencido { color: var(--cor-vencido); } .linha-quando--ambar { color: var(--cor-ambar); } .linha--vazia { color: var(--cor-rotulo); font-size: 13px; } .linha--alinhada-topo { align-items: flex-start; } .linha--alinhada-topo .inicial { margin-top: 2px; } .linha--vazia:hover { background: none; } /* Rótulo de tipo à esquerda (contactos, moradas) */ .tipo-rotulo { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cor-rotulo); width: 72px; flex: none; } /* Quadrado de iniciais */ .inicial { width: 26px; height: 26px; border-radius: 5px; background: var(--cor-cinza-claro); color: var(--cor-texto-2); display: grid; place-items: center; font-size: 10.5px; font-weight: 600; flex: none; } /* ------------------------------------------------------------------ */ /* Chips de estado */ /* ------------------------------------------------------------------ */ .chip { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; border-radius: 3px; padding: 2px 6px; white-space: nowrap; } .chip--ok { color: var(--cor-ok); background: var(--cor-ok-fundo); } .chip--info { color: var(--cor-info); background: var(--cor-info-fundo); } .chip--ambar { color: var(--cor-ambar); background: var(--cor-ambar-fundo); } .chip--vencido { color: var(--cor-vencido); background: var(--cor-vencido-fundo); } .chip--neutro { color: var(--cor-neutro); background: var(--cor-neutro-fundo); } /* ------------------------------------------------------------------ */ /* Botões */ /* ------------------------------------------------------------------ */ button, .botao { display: inline-block; border: 1px solid var(--cor-borda-campo); background: var(--cor-papel); color: var(--cor-tinta); border-radius: var(--raio); padding: 8px 13px; font: inherit; font-size: 13px; cursor: pointer; text-align: center; } button:hover, .botao:hover { border-color: var(--cor-borda-campo-hover); color: var(--cor-tinta); } .primario { border-color: var(--cor-primaria); background: var(--cor-primaria); color: #fff; font-weight: 500; } .primario:hover { background: var(--cor-primaria-hover); border-color: var(--cor-primaria-hover); color: #fff; } /* Ação pequena dentro de linhas e tabelas */ .acao { border: 1px solid var(--cor-borda-campo); background: var(--cor-papel); color: var(--cor-primaria); border-radius: 5px; padding: 4px 9px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; } .acao:hover { border-color: var(--cor-primaria); background: var(--cor-hover-acao); color: var(--cor-primaria); } /* Botão desligado: tem de PARECER desligado. Um primário que continua azul e vivo enquanto recusa o clique lê-se como avaria, não como "não há nada a fazer aqui". */ button:disabled, button:disabled:hover { opacity: 0.45; cursor: not-allowed; } .perigo { color: var(--cor-vencido); } .perigo:hover { border-color: var(--cor-vencido); background: var(--cor-vencido-fundo); color: var(--cor-vencido); } /* Ação em texto no cabeçalho do cartão */ .acao-texto { border: 0; background: none; color: var(--cor-primaria); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 0; } .acao-texto:hover { color: var(--cor-primaria-escura); border: 0; background: none; } form.em-linha { display: inline; } /* ------------------------------------------------------------------ */ /* Formulários */ /* ------------------------------------------------------------------ */ /* RITMO VERTICAL DOS FORMULÁRIOS Três distâncias, tiradas da escala de espaçamentos e não inventadas caso a caso: --esp-1 (4px) dentro do par rótulo+campo — pertencem um ao outro --esp-6 (28px) entre campos diferentes --esp-7 (32px) antes de uma subsecção, que já é outra coisa O salto de 4 para 28 é o que faz o par ler-se como uma unidade. Com 14px entre campos e 4px dentro, como estava, a diferença não se via e o formulário parecia uma lista corrida. */ label { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-rotulo); font-weight: 600; margin: var(--esp-6) 0 var(--esp-1); } label:first-child { margin-top: 0; } /* Checkbox e radio: rótulo em linha, sem versaletes */ label.marcador { display: flex; align-items: center; gap: 8px; font-size: 13.5px; letter-spacing: normal; text-transform: none; color: var(--cor-tinta); font-weight: 400; } input, select, textarea { font: inherit; font-size: 13.5px; color: var(--cor-tinta); background: var(--cor-papel); border: 1px solid var(--cor-borda-campo); border-radius: var(--raio); padding: 7px 10px; max-width: 100%; width: 100%; } /* A seta nativa desaparece e entra uma própria (SVG inline, sem pedido de rede), para o select ter a mesma caixa dos inputs. */ select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23646c78' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; padding-right: 28px; } select::-ms-expand { display: none; } /* Marcadores não são campos de texto: não esticam à largura do formulário. Sem o `radio` aqui, o botão esticava e empurrava o rótulo para o outro lado da linha. */ input[type="checkbox"], input[type="radio"] { width: auto; flex: none; accent-color: var(--cor-primaria); } input[type="file"] { padding: 6px; font-size: 13px; } textarea { resize: vertical; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 0; border-color: var(--cor-primaria); } fieldset { border: 1px solid var(--cor-borda-suave); border-radius: var(--raio); margin: 14px 0 0; padding: 12px 14px 14px; } legend { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-rotulo); font-weight: 600; padding: 0 4px; } fieldset label.marcador { margin: 6px 0 0; } /* Formulário compacto em linha (secções da ficha) */ .form-compacto { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--cor-borda-suave); background: var(--cor-papel-rodape); } .cartao-cab + .form-compacto { border-top: 0; } .form-compacto input, .form-compacto select { width: auto; flex: 1 1 120px; min-width: 0; font-size: 13px; padding: 6px 9px; } .form-compacto input[type="checkbox"] { flex: none; } .form-compacto textarea { flex: 1 1 100%; font-size: 13px; } .form-compacto label.marcador { margin: 0; font-size: 12.5px; flex: none; } .form-compacto button { flex: none; padding: 6px 11px; font-size: 12.5px; } /* Rodapé de formulário de página */ .form-acoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-3); margin-top: var(--esp-7); padding-top: var(--esp-4); border-top: 1px solid var(--cor-borda-suave); } /* Ação destrutiva numa linha de ações: encostada à esquerda, à distância do botão que se carrega por hábito. Não é decoração — é para que "Eliminar" nunca fique onde a mão já ia. */ .form-acoes .acao--destrutiva { margin-right: auto; } /* Coluna de formulário de página inteira, centrada no contentor. */ .form-pagina { max-width: var(--largura-coluna); margin: 0 auto; } /* Grelha de campos: duas colunas onde o campo o permite, uma só nos campos largos (nome, descrição, morada). */ .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* O espaço entre campos é da grelha, não das margens: assim vale igual entre colunas e entre linhas, e não depende da ordem. */ gap: var(--esp-6) var(--esp-5); } /* Dentro de um campo o rótulo já está no sítio certo — a distância entre campos vem do gap acima. */ .campo > label, .campo > .rotulo { margin-top: 0; } .campo { min-width: 0; } .campo--largo { grid-column: 1 / -1; } /* Rótulo sem campo associado (ex.: por cima de um marcador), com o mesmo tratamento tipográfico dos rótulos vizinhos. */ .rotulo { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-rotulo); font-weight: 600; margin: var(--esp-6) 0 var(--esp-1); } /* Subsecção dentro de um formulário — substitui fieldset/legend. Tem de superar os rótulos de campo, senão a hierarquia achata: mais corpo, mais peso, tinta mais escura e mais ar à volta. */ .subseccao { /* Margem dos dois lados: sem a de baixo, o rótulo do campo seguinte encostava aos marcadores da subsecção. */ margin: var(--esp-7) 0 var(--esp-6); padding-top: var(--esp-6); border-top: 1px solid var(--cor-borda-suave); } .subseccao h3 { font-family: var(--tipo-titulos); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor-texto-2); font-weight: 700; margin: 0 0 var(--esp-3); } /* O primeiro rótulo da subsecção não acumula a sua margem de topo com o espaço já dado pelo cabeçalho. */ .subseccao .campos > .campo:first-child > label, .subseccao .campos > .campo:first-child > .rotulo { margin-top: 0; } /* Subsecção dentro de um cartão: mesmo tratamento do cabeçalho de subsecção dos formulários, mas encaixado no ritmo do cartão. */ .cartao-subtitulo { padding: var(--esp-3) var(--esp-4) 0; border-top: 1px solid var(--cor-borda-suave); } .cartao-subtitulo h3 { font-family: var(--tipo-titulos); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor-texto-2); font-weight: 700; margin: 0; } /* Glossário curto dentro de um formulário: termo e o que ele abrange. Serve o formulário de consentimento, onde escolher a finalidade errada é escolher a base legal errada. */ .glossario { margin: var(--esp-3) 0 var(--esp-4); font-size: 12.5px; } .glossario dt { font-weight: 600; color: var(--cor-texto-2); } .glossario dd { margin: 0 0 var(--esp-3); color: var(--cor-texto-suave); } /* Subtítulo de cartão a servir de : o rótulo à esquerda e o revelador à direita, como no cabeçalho do cartão. Sem o flex, o `.direita` (margin-left: auto) não tem contra o que empurrar. */ summary.cartao-subtitulo { display: flex; align-items: center; gap: 10px; padding-bottom: var(--esp-3); } /* O filete já veio do cabeçalho de subsecção — o formulário não acrescenta outro. */ .cartao-subtitulo + .form-compacto { border-top: 0; padding-top: var(--esp-2); } /* Marcadores em coluna dentro de uma subsecção. */ .marcadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px var(--esp-5); } .marcadores { row-gap: var(--esp-2); } .marcadores .marcador { margin: 0; } /* ------------------------------------------------------------------ */ /* Mensagens e faixas */ /* ------------------------------------------------------------------ */ .mensagem { display: block; font-size: 13px; border-radius: var(--raio); padding: 10px 12px; margin: 0 0 14px; color: var(--cor-info); background: var(--cor-info-fundo); } .mensagem--aviso { color: var(--cor-ambar); background: var(--cor-ambar-fundo); } .mensagem--erro { color: var(--cor-vencido); background: var(--cor-vencido-fundo); } .mensagem:empty { display: none; } ul.mensagem { list-style-position: inside; padding-left: 4px; } ul.mensagem li { margin: 0; } .cartao > .mensagem { margin: 12px 16px; } /* ------------------------------------------------------------------ */ /* Tabelas em cartão */ /* ------------------------------------------------------------------ */ /* Tabela mais larga do que o cartão: desliza aqui dentro, em vez de empurrar a página. Já era assim — o que faltava era DIZÊ-LO. Num telemóvel a barra de deslize não se vê enquanto não se desliza, e a coluna cortada na borda parece um defeito, não um convite. As duas sombras nas pontas aparecem só quando há mais conteúdo desse lado: os retângulos da cor do cartão viajam com o conteúdo (`local`) e tapam a sombra quando se chega ao fim. Sem JavaScript e sem marcação nova. */ .tabela-envelope { overflow-x: auto; background: linear-gradient(to right, var(--cor-papel) 40%, transparent) left center / 36px 100% no-repeat local, linear-gradient(to left, var(--cor-papel) 40%, transparent) right center / 36px 100% no-repeat local, radial-gradient( farthest-side at 0 50%, rgba(15, 23, 42, 0.13), transparent ) left center / 12px 100% no-repeat scroll, radial-gradient( farthest-side at 100% 50%, rgba(15, 23, 42, 0.13), transparent ) right center / 12px 100% no-repeat scroll; } .tabela { width: 100%; border-collapse: collapse; } .tabela th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-rotulo); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--cor-borda-suave); background: var(--cor-papel-suave); white-space: nowrap; } .tabela td { padding: 10px 12px; font-size: 13px; color: var(--cor-texto-suave); border-bottom: 1px solid var(--cor-borda-linha); } .tabela tr:last-child td { border-bottom: none; } .tabela tbody tr:hover, .tabela tr:hover td { background: var(--cor-hover-linha); } .tabela th:first-child, .tabela td:first-child { padding-left: 16px; } .tabela th:last-child, .tabela td:last-child { padding-right: 16px; } .tabela .num { text-align: right; font-variant-numeric: tabular-nums; } /* Identificadores numéricos (NIF, datas): alinham à esquerda como texto, mas com algarismos de largura fixa. */ .tabela .tabular { font-variant-numeric: tabular-nums; } /* Linha inteira clicável: o link do nome estica a área de clique a toda a linha, com um pseudo-elemento absoluto. Sem JavaScript. O link continua a ser o único alvo de tabulação, e é ele que o leitor de ecrã anuncia. ATENÇÃO a quem acrescentar links ou botões a esta tabela: ficam por baixo do pseudo-elemento e deixam de receber cliques. Ou lhes dás `position: relative; z-index: 1`, ou a linha deixa de ser inteiramente clicável. */ .tabela--navegavel tbody tr, .tabela--navegavel tr { position: relative; } .tabela--navegavel td { cursor: pointer; } .tabela--navegavel a.alvo::after { content: ""; position: absolute; inset: 0; } .tabela .entidade { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--cor-tinta); } /* Barra de ferramentas no topo de um cartão de tabela */ .barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--cor-borda-suave); flex-wrap: wrap; } .barra form { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; max-width: 360px; } /* Rótulo em linha dentro da barra (ex.: seletor de ficheiro). */ .barra label { margin: 0; flex: none; text-transform: none; letter-spacing: normal; font-weight: 400; } .barra input { font-size: 13px; padding: 7px 10px; } /* Rodapé de paginação */ .paginacao { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--cor-papel-rodape); border-top: 1px solid var(--cor-borda-suave); font-size: 12.5px; color: var(--cor-texto-mudo); } .paginacao .direita { display: flex; gap: 8px; } /* Com 98 páginas, "Seguinte" não chega: há primeira, última e salto. `wrap` porque são seis controlos e a listagem de empresas ainda os quer ao lado de um total mais comprido. */ .paginacao-controlos { flex-wrap: wrap; align-items: center; } /* O salto é um formulário GET, sem JavaScript. Fica com a altura dos botões ao lado para a fila não ondular. */ .paginacao-salto { display: flex; align-items: center; gap: 6px; margin: 0; } .paginacao-salto label { color: var(--cor-texto-mudo); font-size: 12.5px; } .paginacao-salto input { width: 5.5em; padding: 5px 8px; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; } /* Primeira/última no limite: ficam visíveis e sem ação, em vez de desaparecerem. Uma fila de botões que muda de comprimento conforme a página faz o alvo do rato mudar de sítio a cada clique. */ .acao--inerte { opacity: 0.4; cursor: default; user-select: none; } /* ------------------------------------------------------------------ */ /* Ficha: cabeçalho de entidade e grelha de identificação */ /* ------------------------------------------------------------------ */ .entidade-cab { display: flex; align-items: center; gap: 18px; padding: 20px 22px; margin-bottom: var(--esp-5); flex-wrap: wrap; } .entidade-cab .avatar-grande { width: 54px; height: 54px; border-radius: 50%; background: var(--cor-info-fundo); color: var(--cor-primaria); display: grid; place-items: center; font-family: var(--tipo-titulos); font-size: 18px; font-weight: 700; flex: none; } .entidade-cab h1 { font-size: 23px; margin: 0 0 4px; } .entidade-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--cor-texto-suave); } .grelha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 24px; } .campo-rotulo { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-rotulo); margin-bottom: 3px; } .campo-valor { font-size: 13.5px; overflow-wrap: anywhere; } /* Lista simples rotulada (estado da relação, alterações) */ .par { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; } .par .rotulo { color: var(--cor-texto-suave); } .par .valor { font-weight: 500; text-align: right; } /* Faixa de alerta âmbar (dentro de cartões) */ .faixa { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cor-ambar); background: var(--cor-ambar-fundo); border-radius: var(--raio); padding: 9px 11px; } .faixa .ponto-mini { width: 6px; height: 6px; border-radius: 50%; background: var(--cor-acento); flex: none; } /* Cartão de erro do tratador central. ------------------------------------------------------------------- A ÚNICA regra nova desta passagem, e é só a largura. A almofada e o espaçamento vêm todos de classes que já existiam — `.pagina-cab` para o título, `.cartao-corpo` para o miolo —, que é o que a composição passou a usar. Porque é que não reaproveita o `.form-pagina`, que tem a medida certa: o `.form-pagina` também CENTRA (`margin: 0 auto`), e aqui isso desalinhava — o `

` do `.pagina-cab` fica à esquerda do conteúdo, e um cartão centrado por baixo dele não bate certo com nada. Aqui só se quer travar a largura; o alinhamento à esquerda é o que faz o rebordo do cartão cair debaixo da primeira letra do título. A medida é a mesma dos dois, e por isso é um token e não um número repetido: uma mensagem de erro é texto para ler, e a coluna de leitura desta aplicação é esta. */ .cartao--erro { max-width: var(--largura-coluna); } /* ------------------------------------------------------------------ */ /* Página de entrada */ /* ------------------------------------------------------------------ */ .cartao--entrada { padding: 26px 28px 28px; } .cartao--entrada h1 { font-size: 21px; margin-bottom: 18px; } .cartao--entrada button { width: 100%; margin-top: var(--esp-6); } /* ------------------------------------------------------------------ */ /* Telemóvel — a lateral vira barra horizontal; nada parte */ /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* As duas navegações — protótipo v3 */ /* */ /* Acima de 900px a lateral COLAPSA (preferência, em cookie). Abaixo */ /* vira GAVETA (efémera, por :target). São mecanismos opostos no mesmo */ /* elemento; a media query lá em baixo é a fronteira que garante que */ /* nunca se aplicam ao mesmo tempo. Sem uma linha de JavaScript. */ /* ------------------------------------------------------------------ */ /* Só existem abaixo dos 900px. Escondidos aqui, revelados lá. */ .topo-menu, .gaveta-cab, .gaveta-sessao, .barra-inferior, .veu { display: none; } /* --- Colapso de desktop ------------------------------------------- */ .lateral--colapsada { width: var(--largura-lateral-colapsada); } /* O nome sai; fica o ícone, centrado no que resta. */ .lateral--colapsada nav a { justify-content: center; padding-left: 0; padding-right: 0; } .lateral--colapsada nav a .lateral-rotulo, .lateral--colapsada .lateral-separador, .lateral--colapsada .lateral-colapso .lateral-rotulo { display: none; } .lateral--colapsada .lateral-colapso button { justify-content: center; } /* A dica: o nome ao passar o rato, em CSS puro. `visibility` e não `display` para o balão poder ter transição, e `pointer-events: none` para ele nunca roubar o rato ao link que o revelou — sem isso, o balão aparece por cima e o `:hover` pisca. */ .lateral nav a .dica { display: none; } .lateral--colapsada nav a { position: relative; } .lateral--colapsada nav a .dica { display: block; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #0c0f13; color: var(--cor-escuro-texto); border: 1px solid #2e343d; border-radius: 5px; padding: 5px 9px; font-size: 12.5px; white-space: nowrap; z-index: 40; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 90ms ease; } .lateral--colapsada nav a:hover .dica, .lateral--colapsada nav a:focus-visible .dica { opacity: 1; visibility: visible; } /* O botão de colapso, no rodapé da lateral. `margin-top: auto` empurra-o para baixo — a lateral é uma coluna flex. */ .lateral-colapso { margin-top: auto; padding: 10px 8px; border-top: 1px solid #22272f; } .lateral-colapso button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--cor-escuro-mudo); font: inherit; font-size: 13px; border-radius: var(--raio); padding: 9px 10px; cursor: pointer; } .lateral-colapso button:hover { background: #1c2027; color: var(--cor-escuro-texto); } .lateral-colapso .icone { width: 22px; text-align: center; flex: none; } /* --- Telemóvel: gaveta, barra do fundo, e o resto do v3 ----------- */ @media (max-width: 900px) { .concha { display: block; } /* O hambúrguer abre a gaveta; é um link para #menu. */ .topo-menu { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid #2e343d; background: #21262e; border-radius: 7px; color: var(--cor-escuro-texto); font-size: 16px; text-decoration: none; } .topo-interior { padding: 0 14px; gap: 12px; } /* A GAVETA. Fora do ecrã até `#menu` ficar ativo. `translateX(-102%)` e não `-100%`: os 2% a mais escondem a sombra, que de outra forma se vê como uma linha na margem esquerda. */ .lateral { position: fixed; top: 0; left: 0; bottom: 0; width: 270px; max-width: 84vw; height: auto; border-right: 1px solid #000; z-index: 30; transform: translateX(-102%); transition: transform 200ms ease; } .lateral:target { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } /* O colapso de desktop não existe aqui: a gaveta é sempre larga. Sem isto, quem colapsou no computador e abrisse o telemóvel com o mesmo cookie via uma gaveta de 56px só com ícones. */ .lateral--colapsada { width: 270px; } .lateral--colapsada nav a { justify-content: flex-start; padding-left: 12px; padding-right: 12px; } .lateral--colapsada nav a .lateral-rotulo, .lateral--colapsada .lateral-separador { display: revert; } /* A dica é de rato. Num ecrã de toque não há `:hover` que valha, e o nome já está à vista. */ .lateral--colapsada nav a .dica { display: none; } /* O botão de colapso é de desktop (v3 embrulha-o em `isDesktop`). */ .lateral-colapso { display: none; } .lateral nav { flex-direction: column; overflow-y: auto; padding: 10px 10px; } /* Alvos maiores: é um dedo, não um rato. */ .lateral nav a { font-size: 14.5px; padding: 12px 12px; gap: 12px; } /* Cabeçalho da gaveta: a marca outra vez, e o fecho. */ .gaveta-cab { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #22272f; } .gaveta-cab strong { font-family: var(--tipo-titulos); font-weight: 700; font-size: 17px; color: #fff; } .gaveta-cab span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cor-escuro-mudo); } .gaveta-fechar { margin-left: auto; color: var(--cor-escuro-mudo); font-size: 22px; line-height: 1; text-decoration: none; padding: 4px 8px; } /* Rodapé da gaveta: quem está lá dentro, e a saída. */ .gaveta-sessao { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 16px; border-top: 1px solid #22272f; } .gaveta-nome { font-size: 13px; color: var(--cor-escuro-texto); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gaveta-sessao form { margin-left: auto; } /* O véu. Continua escondido (a regra base põe `display: none`) e só ganha corpo com a gaveta aberta — daí o combinador de irmão seguinte, que é a razão de ele vir depois da gaveta no documento. */ .veu { position: fixed; inset: 0; background: rgba(12, 15, 19, 0.55); z-index: 28; } .lateral:target ~ .veu { display: block; } /* A BARRA DO FUNDO. */ .barra-inferior { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 26; background: var(--cor-escuro); border-top: 1px solid #000; } .barra-inferior a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 6px 2px; color: var(--cor-escuro-mudo); font-size: 10.5px; text-decoration: none; } .barra-inferior a[aria-current="page"] { color: #fff; font-weight: 600; } .barra-inferior .icone { font-size: 17px; line-height: 1; } /* Na barra do fundo o número não cabe — cinco entradas em 390px. Fica o ponto sobre o ícone (v3). O número vai no `aria-label` do link, para quem não vê a cor. */ .barra-inferior .icone--aviso { position: relative; } .barra-inferior .icone--aviso::after { content: ""; position: absolute; top: -2px; right: -5px; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-acento); } /* O conteúdo não pode acabar debaixo da barra do fundo. */ .conteudo-area { padding-bottom: 72px; } main.conteudo { padding: 20px 16px 32px; } .grelha, .grelha--ficha { grid-template-columns: 1fr; } .entidade-cab { padding: 16px; } .pagina-cab { align-items: flex-start; flex-direction: column; } /* --- Barra de ferramentas: empilhar em vez de espremer ------------- O `.barra` já quebrava linha, mas o FORMULÁRIO lá dentro não: com `flex: 1` e um teto de 360px, os campos encolhiam todos juntos até a caixa de pesquisa ficar um quadrado de 80px — e a de ficheiro, 22px, um retângulo vazio que não se percebe que é um seletor. Encolher o campo onde se ESCREVE é a pior escolha possível: é o único que precisa de ver o que lá está. O padrão vem do quadro de tarefas (`.filtros`), que já fazia isto bem: quebra linha, e cada controlo fica com a largura que precisa. Aqui o campo de texto leva uma linha inteira e os botões seguem por baixo. */ .barra form { /* `flex: 1 1 100%` e não `width: 100%`: a regra base é `flex: 1`, que fixa a base em 0 — a largura seria ignorada e o botão de criar subia para a mesma linha do filtro. */ flex: 1 1 100%; flex-wrap: wrap; max-width: none; min-width: 0; } /* Texto e ficheiro tomam a linha toda; o resto acomoda-se à volta. */ .barra form input:not([type]), .barra form input[type="text"], .barra form input[type="search"], .barra form input[type="file"] { flex: 1 1 100%; min-width: 0; } /* `margin-left: auto` empurrava o botão de criar para fora da linha quando já não havia linha para empurrar. Em coluna, não há para onde empurrar. */ .barra .direita { margin-left: 0; } /* O rodapé de paginação tem seis controlos e um total por extenso. Sem quebra, saíam pela borda do cartão. */ .paginacao, .paginacao .direita { flex-wrap: wrap; } } /* ------------------------------------------------------------------ */ /* Quadro de tarefas (protótipo v2) */ /* ------------------------------------------------------------------ */ /* Barra de filtros: um formulário GET normal — o quadro funciona sem JavaScript, e os filtros ficam no URL, portanto partilháveis. */ .filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--cor-papel); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: 10px 14px; margin-bottom: var(--esp-4); } .filtros-rotulo { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-texto-suave); font-weight: 600; } .filtro { display: flex; align-items: center; gap: 7px; border: 1px solid var(--cor-borda-campo); border-radius: var(--raio); padding: 3px 9px; margin: 0; text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--cor-tinta); } .filtro > span { font-size: 12px; color: var(--cor-texto-suave); white-space: nowrap; } .filtro select { border: 0; padding: 4px 22px 4px 0; background-position: right 2px center; width: auto; font-size: 13px; } .filtro select:focus-visible { outline-offset: 2px; } /* As colunas deslizam na horizontal quando não cabem — nunca encolhem ao ponto de o cartão deixar de se ler. */ .quadro { display: flex; gap: 15px; overflow-x: auto; padding-bottom: var(--esp-3); align-items: flex-start; } .quadro-coluna { flex: 1 1 0; /* 260px é o mínimo em que o cartão ainda se lê inteiro. Com quatro estados, é também o que faz caber o quadro todo num ecrã de 1440px sem deslize horizontal — acima disso, as colunas crescem. */ min-width: 260px; background: var(--cor-papel); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); transition: background 100ms, border-color 100ms; } .quadro-cartoes { display: flex; flex-direction: column; gap: 9px; padding: 11px; } .quadro-vazio { border: 1px dashed var(--cor-borda-campo); border-radius: 8px; padding: 20px 14px; text-align: center; font-size: 12.5px; color: var(--cor-texto-suave); margin: 0; } .quadro-mais, .quadro-nota { font-size: 12.5px; color: var(--cor-texto-suave); margin: 0; } .quadro-nota { margin-top: var(--esp-3); max-width: 52em; } .ponto--ok { background: var(--cor-ok); } /* --- cartão de tarefa --- */ .tarefa-cartao { display: flex; background: var(--cor-papel); border: 1px solid var(--cor-borda); border-radius: 8px; overflow: hidden; box-shadow: var(--sombra-cartao); } /* A marca de cor do serviço. A cor vem da base de dados, validada por CHECK de hexadecimal na migração 0014. */ .tarefa-marca { width: 4px; flex: none; } .tarefa-corpo { flex: 1; min-width: 0; padding: 10px 11px 9px; } .tarefa-topo { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .tarefa-topo .chip { margin-left: auto; } /* O nome do serviço leva a cor do próprio serviço. As sete cores do catálogo foram escolhidas com contraste AA sobre os fundos claros (migração 0014); uma cor nova criada na Administração é validada pelo mesmo critério no formulário. */ .tarefa-servico { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; white-space: nowrap; } .tarefa-titulo { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.35; margin-bottom: 8px; color: var(--cor-tinta); text-wrap: pretty; } .tarefa-titulo:hover { color: var(--cor-primaria); } .tarefa-parceiro { font-size: 12.5px; color: var(--cor-texto-suave); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tarefa-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 7px; } .inicial--redonda { width: 21px; height: 21px; border-radius: 50%; background: var(--cor-info-fundo); color: var(--cor-info); font-size: 9.5px; font-weight: 700; } .tarefa-dono { font-size: 12.5px; color: var(--cor-texto-suave); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tarefa-prazo { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--cor-texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; } .tarefa-prazo--vencida { color: var(--cor-vencido); } .tarefa-cartao--vencida { border-color: var(--cor-vencido-fundo); box-shadow: inset 3px 0 0 var(--cor-vencido-fundo), var(--sombra-cartao); } /* O controlo de estado: visível em cada cartão, funciona sem JavaScript — o arrastar é só um atalho por cima disto. Encostado ao rodapé, sem filete nem bloco próprio: o cartão tem de se ler como tarefa, não como formulário. O seletor já mostra o estado atual, pelo que não leva rótulo. */ .tarefa-estado { display: flex; align-items: center; gap: 5px; margin-left: auto; } .tarefa-estado select { font-size: 11.5px; padding: 2px 20px 2px 6px; background-position: right 5px center; background-size: 8px 5px; width: auto; max-width: 104px; color: var(--cor-texto-suave); } .tarefa-estado button { flex: none; font-size: 11.5px; padding: 2px 7px; } /* ALTURA PARTILHADA dos três controlos do rodapé do cartão — o seletor, o "Mudar" e o ✕. Sem isto cada um herda a sua altura do texto que tem dentro e ficam em degrau. 24px não é um número escolhido à vista: é o alvo tátil mínimo que o ✕ já respeitava sozinho (.acao--icone, achado do revisor), e era precisamente isso que o punha mais alto que os vizinhos. A correção é subir os outros dois até lá — nunca baixar o ✕, que seria trocar um desalinhamento por uma regressão de acessibilidade. O alinhamento vertical vem do `align-items: center` que .tarefa- rodape e .tarefa-estado já têm; o que faltava era a altura ser a mesma. */ .tarefa-rodape .tarefa-estado select, .tarefa-rodape .tarefa-estado button, .tarefa-rodape .acao--icone { height: 24px; } /* Um