/* ----------------------------------------------------------------- Pulsio, folha de estilos do painel Sem dependencias externas: nem CDN, nem fontes remotas, nem bibliotecas. Tudo o que a pagina carrega sai deste servidor, que e o que permite a politica de seguranca de conteudos estrita do .htaccess. A linguagem visual e a do projecto de referencia da casa. Os nomes dos simbolos estao em portugues, como manda o CLAUDE.md, seccao 3. INDICE 1. Simbolos, tema claro 2. Tema escuro 3. Base e foco 4. Cabecalho e navegacao 5. Botoes 6. Cartoes 7. Tabelas 8. Etiquetas de estado e de gravidade 9. Notas e mensagens 10. Formularios 11. Listas de valores 12. Medidores 13. Registos: estado e abertura 14. Estados vazios e paginacao 15. Utilitarios 16. Paginas autonomas 17. Impressao ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- 1. Simbolos, tema claro ----------------------------------------------------------------- */ :root { color-scheme: light dark; /* Superficies e texto */ --fundo: #f5f5f7; --superficie: #ffffff; --superficie-recuada: #f4f4f6; --texto: #141416; --esbatido: #63636b; --tenue: #6d6d75; --borda: #c9c9cf; --borda-fraca: #e6e6ea; /* Acento */ --acento: #2f6df6; --acento-lavado: #dfeaff; --acento-texto: #2456d6; --sobre-acento: #ffffff; /* Fundo da linha sob o rato, simbolo proprio e nao `--acento-lavado`. Sao coisas diferentes com a mesma cor por acaso: `--acento-lavado` e fundo de etiqueta e de botao tenue, onde o texto e escuro e saturado; a linha sob o rato leva por cima texto `--tenue` de 11 e 12 pixeis, e a 4,24:1 esse texto ficava abaixo do minimo da norma. Separando os dois simbolos, a linha clareia sem lavar as etiquetas. */ --linha-sobre: #eef3ff; /* O VIDRO DA ETIQUETA DE AJUDA, que ACOMPANHA o tema em vez de o inverter. Esteve invertido -- etiqueta escura sobre painel claro -- durante uma hora, e o problema de inverter e o texto: uma etiqueta que troca o fundo tem de trocar tambem a cor das letras, e passa a precisar da sua propria paleta. Com o vidro a seguir o tema, a etiqueta usa as cores normais da pagina e nao ha segunda paleta para manter alinhada com a primeira. O alfa e o desfoque e que fazem o trabalho de a separar do que esta por baixo. A moldura e a mais fraca das duas, que e o suficiente para fechar a forma sem a fazer parecer uma caixa de dialogo. */ --vidro-ajuda: rgba(255, 255, 255, .72); /* Vocabulario de estado do Pulsio, nos tons do Bootstrap. Uma palavra, uma cor, em todo o produto: `atencao` e o mesmo laranja num cartao da pagina inicial, numa etiqueta de ocorrencia e num filete da grelha de factos. Sem isso, a mesma palavra aparecia de duas cores em dois ecras, que e como se perde a leitura de relance. AS TONALIDADES SAO AS DO BOOTSTRAP; OS VALORES NAO SAO OS CRUS. O `$danger` #dc3545 do Bootstrap da 4,53 sobre branco e apenas 3,39 sobre o proprio fundo lavado; o `$warning` #ffc107 da 1,63 e 1,47. Como texto de etiqueta nao se lem. O que se usa e o passo escuro de cada escala, escolhido para passar 4,5 SOBRE O FUNDO LAVADO, que e o sitio mais exigente onde a cor aparece: critico #b02a37 6,50 sobre branco 4,86 sobre o lavado atencao #a5520d 5,51 4,56 sem-comunicacao #8a6803 5,17 4,67 saudavel #146c43 6,45 4,97 informacao #0a58ca 6,44 4,90 Os fundos lavados sao os passos 100 das escalas do Bootstrap, tal e qual. A cor sozinha continua a nao chegar: oito por cento dos homens nao distingue o vermelho do verde, e por isso cada etiqueta traz um simbolo em `::before`. */ --saudavel: #146c43; --saudavel-lavado: #d1e7dd; --atencao: #a5520d; --atencao-lavado: #ffe5d0; --critico: #b02a37; --critico-lavado: #f8d7da; --sem-comunicacao: #8a6803; --sem-comunicacao-lavado: #fff3cd; --informacao: #0a58ca; --informacao-lavado: #cfe2ff; --sobre-critico: #ffffff; /* DUAS TONALIDADES QUE SO A AUDITORIA USA, e por isso nao tem lavado. As cinco de cima sao o vocabulario de ESTADO de um equipamento, e a auditoria nao lista estados: lista actos. Havia nove actos -- os sete do ciclo dos avisos ao cliente, a heranca de duplicado e a sessao retomada -- a cair no cinzento da rotina por nao haver familia nenhuma que os descrevesse, e o cinzento da rotina e o mesmo do fluxo antigo dos codigos de activacao, que esta morto. Um recado entregue no computador de um cliente ontem lia-se com o peso de uma linha de 2026 que nunca volta a acontecer. `percurso` e o recado a caminho do cliente: escrito, entregue, aberto no ecra. Nao afirma nada -- ninguem respondeu ainda --, nao pede nada e nao e decisao de ninguem depois da primeira. Nenhuma das cinco diz isto. `acesso` e entrar no painel sem escrever a palavra-passe, pela lembranca da sessao. Nao e o verde da entrada com exito, que afirma que alguem provou quem era, nem o vermelho da falhada. E o terceiro caso, e e o que mais interessa ver de relance quando se desconfia de um acesso. Medidas com a formula do WCAG 2.1 sobre os tres fundos onde aparecem -- superficie, linha par e linha sob o rato --, e nao estimadas: percurso #6f42c1 6,51 sobre branco 5,93 na par 5,86 sob o rato acesso #0b6473 6,81 6,20 6,12 As tonalidades sao as do Bootstrap, como as outras cinco: o violeta e o `$purple` a 262 graus, e o ciano e o passo escuro da escala `$cyan`, a 189 graus. Ficam a 27 e a 33 graus do azul e do verde mais proximos, que e o suficiente para se distinguirem -- e, por nao chegar, cada familia leva tambem o seu simbolo. */ --percurso: #6f42c1; --acesso: #0b6473; /* Elevacao: duas camadas por nivel, contacto curto mais difusao longa com espalhamento negativo. E o que impede que as sombras parecam caixas em vez de elevacao. */ --sombra-1: 0 1px 2px rgba(20, 20, 24, .05), 0 8px 24px -18px rgba(20, 20, 24, .35); --sombra-2: 0 4px 10px -4px rgba(20, 20, 24, .10), 0 16px 36px -16px rgba(20, 20, 24, .35); --luz: inset 0 1px 0 rgba(255, 255, 255, 0); /* Escala de espacamento. Antes desta escala a mesma pagina usava 8, 9, 10, 11, 12, 13, 14, 16 e 18 pixeis, escolhidos um a um. Nenhum desses numeros estava errado sozinho; juntos nao formam ritmo nenhum, e e disso que se faz a sensacao de coisa montada a pressa. Sao quatro degraus de 4px mais dois de 8px, e nada fora deles, com uma excepcao declarada: 2px, que serve para colar um rotulo ao seu valor e nao e espacamento de composicao. */ --e0: 2px; --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; /* Altura da linha de uma celula de tabela. Um valor em pixeis, e nao um multiplo: e o que permite que a primeira linha de todas as celulas da mesma fila caia no mesmo sitio, mesmo quando uma esta a 14px e a do lado a 12px. Ver a seccao 7. */ --linha-celula: 20px; /* Raios */ --raio-1: 8px; --raio-2: 10px; --raio-3: 14px; --raio-total: 999px; /* Escala tipografica, colada aos usos reais e nao a uma progressao. */ --letra-xs: 11px; --letra-sm: 12px; --letra-md: 13px; --letra-base: 14px; --letra-lg: 15px; --letra-xl: 18px; --letra-titulo: 20px; --letra-xxl: 22px; --letra-numero: 30px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Halo de foco. O valor fixo e o mesmo que o `color-mix` de baixo produz, e existe para os navegadores que nao o tem. O tema escuro tem o SEU, escrito por extenso nos dois blocos da seccao 2: derivar por `color-mix` la deixava o halo azul-claro num fundo escuro em quem nao suporta a funcao. */ --foco: rgba(47, 109, 246, .45); /* A SETA DO SELECT E' A UNICA QUE NAO E' MASCARA, e por isso continua declarada uma vez por tema. Um `` fica escondido para o CSS, mas nao para o teclado nem para o leitor de ecra: `opacity: 0` e `position: absolute` sobre o rotulo. Um `display: none` tirava-o da ordem de tabulacao e o grupo deixava de se poder percorrer com as setas, que e como um grupo de radios se usa. */ .escolha-de-cor { display: flex; flex-wrap: wrap; gap: var(--e2); } /* O ESCONDIDO E O PADRAO `visually-hidden`, e nao um `opacity: 0` solto. Com `position: absolute` sem coordenadas, os cinco `` do grupo caiam todos no mesmo ponto e sobrepunham-se ao primeiro rotulo: nao incomodava ninguem a usar o painel -- levam `pointer-events: none` --, mas era uma pilha de cinco elementos invisiveis por cima de um botao. O `clip-path: inset(50%)` recorta-os a nada sem os tirar do fluxo. */ .escolha-de-cor input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .escolha-de-cor label { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e3); border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--superficie); color: var(--texto); font-size: var(--letra-sm); font-weight: 500; cursor: pointer; } /* A amostra e um circulo cheio com a cor da familia. Uma etiqueta so com o nome obrigava a saber de cor qual e o laranja deste projecto. */ .escolha-de-cor label::before { content: ""; box-sizing: border-box; width: 18px; height: 18px; flex: 0 0 auto; border: 2px solid transparent; border-radius: 50%; background: var(--amostra); } /* AS AMOSTRAS DOS OITO FEITIOS DO SEGUNDO BOTAO. Era um `` pelo texto mais comprido que la esta: a 360 px saia 59 px para fora, e arrastava consigo o cabecalho, o corpo e o formulario inteiro. O `max-width` resolve-o sem tocar em mais nada, e o `text-overflow` faz o texto que nao cabe acabar em reticencias em vez de ser cortado a meio de uma letra. A largura minima cai para o que um dedo precisa, e nao para o que o texto quer. */ .cartao > header .filtro-de-cabecalho select { max-width: 100%; text-overflow: ellipsis; } /* O `flex-wrap` do cabecalho ja punha o filtro numa linha sua quando nao cabia. O que faltava era ele CABER nessa linha: com `min-width: 12rem` no select e `width: auto`, a caixa continuava a pedir a largura do texto mais comprido, e o `flex-wrap` nao encolhe um item que se recusa a encolher. `flex-basis: 100%` forca a linha propria, e `min-width: 0` autoriza o encolhimento -- sem ele, o minimo de conteudo de um item flex e a largura do proprio conteudo, que e a armadilha classica do flexbox. */ @media (max-width: 30rem) { .cartao > header .filtro-de-cabecalho { flex: 1 1 100%; min-width: 0; margin-left: 0; } .cartao > header .filtro-de-cabecalho select { flex: 1 1 auto; width: 100%; min-width: 0; } } /* A PRE-VISUALIZACAO ACOMPANHA O FORMULARIO. O compositor tem treze campos e rola muito; a coluna da direita e curta e saia do ecra assim que se chegava ao segundo paragrafo. Uma pre-visualizacao que nao se ve enquanto se escreve nao serve para o que foi feita. So a partir de 60rem, que e onde as duas colunas existem: mais estreito do que isso, a `.colunas` empilha-as e uma coluna colada ao topo tapava o formulario. */ @media (min-width: 60rem) { #pre-visualizacao { position: sticky; top: var(--e4); } } /* A REGRA DA AJUDA DOS CAMPOS SAIU A 22 DE SETEMBRO DE 2026. Era `#formulario-aviso .campo .ajuda { margin-bottom: var(--e4) }`, e existia porque a ajuda de um campo se colava ao rotulo do campo seguinte. As quinze ajudas do compositor passaram nesse dia para marcas `(?)` no proprio rotulo, e deixou de haver um so `.ajuda` dentro de um `.campo` desta pagina: a regra passou a nao apanhar nada. O espaco entre campos vem agora da `.campos`, que e a grelha do resto do painel. */ /* OS TITULOS DE SECCAO PRECISAM DE AR EM CIMA, E DE UM RISCO. «CONTACTO» e «COMO A JANELA SE COMPORTA» nasciam encostados a ajuda do campo anterior, a poucos pixeis dela e sem nada entre os dois. Num formulario de treze campos que ja e uma coluna comprida de texto cinzento, um titulo maiusculo pousado no meio dessa coluna nao se le como um titulo: le-se como mais uma linha da ajuda de cima, e as tres partes do ecra - o que o cliente le, quem contactar, como a janela se porta - deixam de existir a olho. O risco fino faz o trabalho que o espaco sozinho nao faz. Sem ele era preciso muito mais espaco para a separacao se ver, e o formulario ficava ainda mais comprido do que ja e. O PRIMEIRO NAO LEVA NADA. Um titulo logo a seguir ao cabecalho do cartao ja esta separado pela borda dele, e um segundo risco a poucos pixeis do primeiro le-se como um erro de desenho - que e a mesma razao pela qual o rodape dos botoes da janela do aviso so poe filete quando nao ha faixa de contacto. */ #formulario-aviso h3 { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--borda-fraca); } #formulario-aviso h3:first-of-type { margin-top: var(--e4); padding-top: 0; border-top: 0; } /* O rotulo do campo que vem logo a seguir ao titulo nao precisa do espaco que os outros levam: o titulo ja o deu. */ #formulario-aviso h3 + .campos { margin-top: var(--e3); } /* AS LIGACOES DA LINHA DE DADOS DE UMA OCORRENCIA PRECISAM DE ALVO. A linha de `.ocorrencia-meta` era so texto e um `` para o equipamento -- e esse ja tinha alvo pelo seu proprio bloco. Os avisos ao cliente trouxeram dois links novos para dentro dela, «Avisar o cliente» e «cliente avisado», e um `` inline no meio de texto de 12 px mede 16 px de altura: menos de metade dos 44 px que um dedo precisa, medido pelo `capturar_painel.py` a 360 e 390 px. `inline-flex` com `min-height` da-lhes o alvo sem lhes mexer no aspecto nem empurrar as linhas umas das outras, que e a mesma solucao que o titulo da lista de avisos ja levou. */ .ocorrencia-meta .meta-item > a { display: inline-flex; align-items: center; min-height: 44px; } /* ----------------------------------------------------------------- A biblioteca de exemplos, em /avisos/biblioteca TODAS AS CLASSES LEVAM `bib-`, E NAO E ARRUMACAO. Isto veio da folha da galeria offline, `testes/modelos_da_biblioteca/galeria.css`, e DEZ das classes de la existem tambem aqui: `.accoes`, `.campo`, `.campos`, `.etiqueta`, `.ficha`, `.marca`, `.nota`, `.numero`, `.topo` e `.vazio`. Copiadas com o nome que tinham, cada uma delas passava a valer em todo o painel. E ha uma que ja fez estragos com esse mecanismo exacto: as regras da janela do aviso nao declaram `font-family` nem `color` -- herdam-nos da `.janela-aviso` --, e a heranca PERDE para qualquer regra que se aplique ao elemento, por mais fraca que seja. Um `.numero` solto no fim de outra folha ja pos o telefone do cliente MONOESPACADO E CINZENTO dentro da janela. Ver `testes/replica_do_aviso.py::colisoes()`, que recusa nesta folha qualquer regra sem prefixo que atinja a janela. O QUE NAO ESTA AQUI, porque o painel ja o tem e seria a segunda copia: o cabecalho da pagina, os filtros, a paginacao, os botoes, as etiquetas de gravidade e o `.vazio`. Das 717 linhas da galeria, cerca de 420 nao vieram. ----------------------------------------------------------------- */ .bib-catalogo { display: flex; flex-direction: column; gap: var(--e5); padding: var(--e4) 0 var(--e2); } /* Dentro do cartao da lista o catalogo ja tem as margens dele. */ .cartao > .bib-catalogo { padding: var(--e4); } /* O `max-width` NAO E ARRUMACAO: a janela mede 612 px fixos e a ficha ao lado tem seis linhas de texto. Sem limite, num ecra de 1440 o cartao esticava-se todo e a metade direita ficava com um palmo de branco por baixo de meia duzia de pastilhas. O espaco a mais vai para FORA do cartao, onde nao se le como falta de conteudo. */ .bib-aviso { max-width: 1240px; padding: var(--e5); border: 1px solid var(--borda-fraca); border-radius: var(--raio-3); background: var(--superficie); box-shadow: var(--sombra-1); } .bib-topo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; } .bib-numero { font-family: var(--mono); font-size: var(--letra-md); color: var(--tenue); font-variant-numeric: tabular-nums; } /* O NOME DO EXEMPLO E UM `h3`, E O PAINEL TEM REGRAS PARA OS SEUS `h3`. h3 { font-size: var(--letra-md); text-transform: uppercase; letter-spacing: .04em; color: var(--esbatido); } Sem as desfazer aqui, «O disco está a falhar» saiu «O DISCO ESTÁ A FALHAR», a treze pixeis e cinzento, na primeira captura desta pagina. E a etiqueta certa -- isto e um titulo dentro de um cartao com `h2` -- e a etiqueta certa traz o estilo do painel atras, que e o que sempre acontece quando se desenha uma coisa dentro de outra que ja tem regras suas. E JA TINHA ACONTECIDO DUAS VEZES, as duas no `.ja-titulo` da janela do aviso: o `text-transform` a 2 de Setembro de 2026, porque se ve, e o `letter-spacing` dois dias depois, porque nao se ve e so aparece num titulo comprido a quebrar noutro sitio. As quatro propriedades sao desfeitas juntas, pela mesma razao. */ .bib-topo h3 { margin: 0; flex: 1 1 auto; font-size: var(--letra-xl); font-weight: 600; text-transform: none; letter-spacing: -.01em; color: var(--texto); } .bib-perfil { padding: var(--e0) var(--e3); border-radius: var(--raio-total); border: 1px solid var(--borda); background: var(--superficie-recuada); color: var(--esbatido); font-size: var(--letra-sm); letter-spacing: .04em; text-transform: uppercase; } .bib-quando { margin: var(--e2) 0 var(--e4); max-width: 82ch; color: var(--esbatido); font-size: var(--letra-base); } /* A JANELA A ESQUERDA, O QUE HA A SABER A DIREITA. Os 664 px da primeira coluna sao os 612 da janela mais o enchimento do palco, e por isso a replica aparece no tamanho verdadeiro sempre que a largura o permita. Abaixo dos 1040 a ficha desce para baixo da janela, que continua a caber: ela e `width:100%; max-width:612px` e encolhe sem transbordar. */ .bib-par { display: grid; grid-template-columns: minmax(0, 664px) minmax(300px, 1fr); gap: var(--e5); align-items: start; } @media (max-width: 1040px) { .bib-par { grid-template-columns: minmax(0, 1fr); } } /* O PALCO NAO TEM CLASSE PROPRIA, E E DELIBERADO. A galeria offline desenhava o seu, `#1b1b1f` com um gradiente proprio, porque abre sozinha e nao tem painel a volta. Aqui o parcial ja traz o `.palco-do-aviso` que o compositor e o detalhe usam, e usa-lo e o que faz a janela ter o MESMO aspecto nos tres sitios do painel onde aparece. Um segundo palco era uma segunda aparencia para a mesma coisa, e a divergir a partir da primeira alteracao. Nenhuma regra desta seccao toca na janela, e assim e que tem de ficar: a `replica_do_aviso.py::colisoes()` recusa nesta folha qualquer regra que a atinja sem prefixo, e uma que a atingisse COM prefixo passava a guarda e mudava na mesma o que o tecnico ve. */ .bib-ficha { display: flex; flex-direction: column; gap: var(--e4); } .bib-aspecto { display: flex; flex-wrap: wrap; gap: var(--e1) 7px; } .bib-pastilha { display: inline-flex; align-items: baseline; gap: 6px; padding: var(--e1) var(--e3); border: 1px solid var(--borda-fraca); border-radius: 7px; background: var(--superficie-recuada); font-size: var(--letra-sm); color: var(--esbatido); } .bib-pastilha em { font-style: normal; font-weight: 600; color: var(--texto); } /* AS CINCO CORES DO ASPECTO, no vocabulario de estado do painel e nao numa paleta nova. Sao as mesmas tonalidades que as etiquetas de gravidade usam, e passam 4,5 sobre o fundo lavado, que e o sitio mais exigente onde aparecem. */ .bib-pastilha.bib-cor-vermelho em { color: var(--critico); } .bib-pastilha.bib-cor-laranja em { color: var(--atencao); } .bib-pastilha.bib-cor-azul em { color: var(--informacao); } .bib-pastilha.bib-cor-verde em { color: var(--saudavel); } .bib-pastilha.bib-cor-cinzento em { color: var(--tenue); } .bib-numeros { display: flex; gap: var(--e5); flex-wrap: wrap; padding: var(--e3) var(--e4); border-radius: var(--raio-1); background: var(--superficie-recuada); border: 1px solid var(--borda-fraca); } .bib-numeros div { display: flex; flex-direction: column; } .bib-numeros b { font-size: var(--letra-lg); font-variant-numeric: tabular-nums; } .bib-numeros span { font-size: var(--letra-sm); color: var(--tenue); } .bib-regras { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .bib-regras code { padding: var(--e0) var(--e2); border-radius: 5px; background: var(--superficie-recuada); border: 1px solid var(--borda-fraca); font-family: var(--mono); font-size: var(--letra-sm); color: var(--esbatido); } .bib-porque { margin: 0; color: var(--esbatido); font-size: var(--letra-base); max-width: 74ch; } .bib-porque b { color: var(--texto); font-weight: 600; } /* O BOTAO FICA NO FIM DA FICHA E ALINHADO A ESQUERDA, e nao esticado: um botao com a largura da coluna le-se como «continuar» de assistente, e isto nao e um assistente. */ .bib-usar { align-self: flex-start; margin-top: var(--e1); }