Sistema visual Inspector Sanitatis

Azuis comunicam confiança, orientação e conteúdo institucional; os verdes destacam conformidade, saúde e ações positivas. Preserve contraste e não dependa apenas da cor para transmitir estado. Em tema escuro, os tons de interface são clareados para continuarem legíveis; as cores abaixo representam a paleta de marca de referência.

:root {
  --blue: #1557a0; --blue-bright: #125bb0;
  --green: #087f5b; --lime: #15a773;
  --ink: #193249; --muted: #586c7e;
  --page: #f4f7fa; --surface: #ffffff; --line: #dce5ec;
}
[data-theme="dark"] { /* redefina superfícies e texto para o tema */ }

Use uma hierarquia curta e previsível. Títulos devem descrever o conteúdo e não pular níveis semânticos. O tamanho fluido do título principal reduz em telas estreitas sem sacrificar a leitura; corpo de texto e controles permanecem confortáveis.

body { font: 400 16px/1.65 var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); }
h1 { font-size: clamp(2rem, 5vw, 3.7rem); }

Prefira traços limpos, área de desenho equilibrada e espessura consistente. Para ações comuns, associe ícone a texto visível; botões só com ícone precisam de nome acessível. SVG inline facilita cor adaptável com currentColor.

<button aria-label="Buscar">
  <svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
</button>

Mantenha o rótulo curto e orientado a verbo (“Consultar”, “Salvar”). Garanta área de toque confortável (idealmente 48 × 48 px no trabalho em campo), estado de foco visível e feedback após a ação. Não use apenas cor para distinguir importância.

<label for="email">E-mail</label>
<input id="email" type="email" aria-describedby="email-help">
<small id="email-help">Informe um endereço válido.</small>

Para grupos de cards, alinhe alturas e ações quando isso ajudar a comparação. Garanta que o destino esteja claro e que todo o card não pareça clicável se apenas uma parte for interativa.

Agrupe opções relacionadas com fieldset e legend. Use checkbox quando mais de uma resposta puder ser marcada. Mantenha os alvos de clique amplos e navegáveis pelo teclado.

Acione o cabeçalho “Tema” para alternar a ordem de demonstração. Em uso real, informe o estado de ordenação e preserve a relação entre cabeçalho e célula.

Gráfico 1 — Categorias fictícias, período A/B. Unidade: contagem demonstrativa; escala de 0 a 100. Fonte: dados de exemplo, sem registros operacionais.

.content { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) {
  .content { width: calc(100% - 30px); }
  .grid { grid-template-columns: 1fr; }
}

Teste pelo conteúdo, não apenas por modelos de aparelho. Verifique zoom, textos longos em português, orientação, largura mínima de 320 px e a ausência de rolagem horizontal global.

Uso e estrutura

Uma marca, navegação por tarefa, busca global, tema e menu móvel no cabeçalho; quatro grupos de links e identificação editorial no rodapé. A página contém link de salto, um main, uma identificação de público RS, trilha, introdução e seções. A home acrescenta hero, fluxo de trabalho, cartões de tarefa, oito áreas e atalhos.

Código de origem

site-config.js gera .site-header[data-site-shell], .shell-* e .site-footer. scripts/atualizar-interface.cjs grava o HTML estático em todas as páginas e recompila a busca. site-ui.js cuida de interação; portal.js não controla a navegação.

Interação e estados

Submenus são details/summary; a página atual recebe aria-current="page". O menu móvel usa aria-controls e aria-expanded. Escape e clique externo fecham os menus. O tema usa preferência do sistema ou escolha local, aplicada antes do CSS por site-theme.js. O botão flutuante de retorno ao topo aparece com rolagem.

Acessibilidade e adaptação

Preserve nome acessível dos botões só com ícone, foco visível, proporção da marca e rótulos dos links. Abaixo de 980 px a navegação usa o botão móvel; abaixo de 650 px os espaçamentos e a marca se compactam. Na impressão, cabeçalho, rodapé, faixa de escopo e ações de navegação são ocultos.

Reutilização

Use portal.css como base das páginas de recursos; site-ui.css é a camada compartilhada. O guia usa estilo.css apenas para a sua apresentação. Não copie os seletores .btn/.input de demonstração para novos formulários: use .button/.control. Não crie um segundo rodapé.

<body data-root="../">
  <a class="skip-link" href="#conteudo">Ir para o conteúdo</a>
  <main id="conteudo">
    <section class="page-intro"><div class="container"><h1>Título</h1></div></section>
    <section class="content-section"><div class="container">...</div></section>
  </main>
</body>
<!-- Aplicar escopo RS e executar atualizar-interface.cjs para gerar o shell. -->

Busca global

site-ui.js abre um dialog nativo por botão, formulário da home ou Ctrl/Command+K. O diálogo tem busca, tipo, somente favoritos, resultados em lotes de 20 e botão de continuação. Setas/Enter navegam nos resultados; Escape fecha e o foco volta à origem. Use o botão real do cabeçalho para testar.

Biblioteca e catálogos

biblioteca.js combina tipo, área, origem e favoritos, mostra 18 materiais por lote e reflete filtros na URL. areas-tecnicas.js organiza oito áreas e seus materiais. portal.js mantém consultas especializadas de legislação, POP e CNAE por data-search-kind. A busca é em metadados locais, não em todo o texto de PDFs.

Resultados e relações

Cartões têm título, descrição, tipo, origem e destino real. Materiais externos oficiais abrem em nova aba com aviso e rel="noopener noreferrer". Um CNAE pode ter mais de um enquadramento de competência; o resultado de risco oferece ligação à consulta de competência por ?q=. A ausência no catálogo não determina dispensa ou grau de risco.

Favoritos e compartilhamento

Apenas referências conhecidas são guardadas em inspector-reference-favorites-v1, até 200 links. Não guardar buscas nem dados de inspeção. O botão de página salva referência e copia o link; o fallback permite selecionar o endereço quando a área de transferência está bloqueada. Parâmetros de transferência de documentos não são compartilhados.

Estados e extensão

Cobrir inicial, filtro ativo, vazio, mais resultados, dados indisponíveis e armazenamento bloqueado. Atualize o catálogo correspondente e execute o compilador; não acrescente só um cartão sem arquivo ou fonte. Para uma nova biblioteca, prefira reutilizar o catálogo existente e seus filtros.

Testar biblioteca real Áreas técnicas · Competências

Estrutura

Normas usam introdução, identificação do ato, ementa, fonte oficial, texto, sumário/âncoras e tabelas quando existentes. legislacao-documentos.css e legislacao-page.js adaptam a apresentação e a rolagem das tabelas; não alteram o teor jurídico. POPs têm código, versão, escopo, responsabilidades, etapas, referências e histórico conforme o documento.

Variações

O POP demonstrativo tem sumário e progresso de leitura em pops/pop-modelo-demonstracao.js; esse progresso não comprova execução. O POP-O-SEVS-002 preserva o PDF fornecido e apresenta acessos ao editor e ao roteiro. Badges devem distinguir documento fornecido, exemplo demonstrativo e orientação editorial.

Responsividade e impressão

Limite largura de leitura, mantenha o texto selecionável e use rolagem localizada nas tabelas. Não reproduza texto essencial somente como imagem. Na impressão, mantenha título, versão, conteúdo e referências; oculte os controles. Não recorte o documento em uma altura fixa.

Extensão

Para novo material, identifique origem, aplicabilidade ao RS e versão, registre metadados no catálogo e confirme links internos. Em bibliografia normativa original, preserve o texto publicado. Não apresente modelo editorial como ato aprovado.

Roteiro em seis etapas

Preparação, estabelecimento, contexto/equipe, verificações, conclusão e revisão. roteiros-inspecao.js monta os campos com o editor; roteiro-modelo.js valida o registro e estrutura o relatório. Cada verificação reúne critério, norma, situação, como, quem/o que e fato; NC acrescenta requisito negativado; NA/limitação exigem justificativa. Providências e referências ficam em expansão opcional.

Campos e grupos

Use .field, .control, fieldset/legend, rótulo e dica. O botão NA preenche apenas campos permitidos. Tabelas editáveis usam cartões de linha, adicionar/remover e, quando previsto, alternância NA sem perder a cópia das linhas. Equipe requer identificação efetiva. ROI tem aplicação explícita, resultado, classificação e evolução.

Validação e revisão

Continuar valida a etapa; a revisão mostra pendências por etapa. Cada erro é botão que leva ao campo. O relatório tem modelos detalhado/simplificado, NCs, ROI, logo opcional, anexos, entrega e assinatura. A mudança de modelo preserva endereço/município/CEP e dados adicionais. Gerar, revisar, baixar HTML/JSON e imprimir usam o estado atual.

Transferência

O roteiro compõe as constatações e incorpora o roteiro preenchido e imagens ao relatório. A passagem usa token aleatório na sessão da aba, sem dados pessoais na URL; se bloqueada, o relatório é montado na página. Alterações invalidam a prévia. Não salvar dados de inspeção automaticamente no armazenamento persistente.

Autuação e contato

Os rascunhos de auto, interdição e coleta usam data-document-builder, prévia e download de texto em portal.js. Validar e regenerar ao baixar; não reutilizar prévia desatualizada. O contato usa data-contact-form e prepara mailto: no aplicativo do usuário; não declara envio ao servidor.

Layout e saída

Roteiro e relatório usam uma coluna em qualquer largura. Não restaurar a antiga lógica de colunas duplas. Na impressão, só o documento revisado deve aparecer. Avisos de alterações pendentes ajudam na saída da página, mas não garantem preservação ao encerrar um app móvel.

Testar roteiro · Editor de relatório · Autuação

Campos nativos

inspecao-toque.css estabelece texto de 16 px, campos de pelo menos 52 px, ações de 48 px e áreas de texto expansíveis. inspecao-midia.js configura idioma, sugestões de escrita e teclado pertinente sem interceptar a caneta nos campos. A conversão manuscrito → texto depende do sistema/navegador. VisualViewport ajuda a liberar espaço quando o teclado abre.

Quadro manuscrito

Canvas proporcional 1.600 × 800; Pointer Events com pressão, captura do ponteiro e eventos agrupados quando disponíveis. Dedos são ignorados por padrão, com ativação opcional. Desfazer, incorporar e descartar são ações explícitas. Até 150 traços/15.000 pontos; rolagem é feita fora do quadro. O manuscrito vira imagem e não substitui campos técnicos exigidos.

Fotografias

Seletores separados para câmera traseira preferencial e galeria múltipla. Câmera ao vivo usa getUserMedia, permissão, contexto seguro e nenhum áudio; encerra trilhas ao capturar, fechar ou sair. Cancelamento durante permissão também libera a câmera quando a resposta chegar. A escolha de câmera pelo seletor nativo depende do aparelho.

Processamento e dados

Arquivos originais até 25 MB/50 MP; JPEG, PNG, WebP e HEIC/HEIF se decodificável. Reencodar em JPEG, até 1.600 px, remove EXIF/GPS; preservar originais separadamente. Até 650.000 caracteres por imagem, 40 imagens/12 MB no conjunto e JSON de até 24 MB. Processamento é sequencial; não enviar imagens a conversores externos.

Integração e estados

Cada imagem tem prévia, legenda e remoção confirmada, seguindo para o JSON e o anexo dos dois relatórios. A anotação ou imagem em preparação bloqueia operações que descartariam dados. Antes de imprimir por botão, aguardar a decodificação e verificar se houve edição durante a espera. Tratar permissão negada, formato não suportado, limite, cancelamento e falha de armazenamento.

Homologação

Testes simulados cobrem eventos e modelos, sem garantir reconhecimento, latência, câmera ou rejeição da palma em todos os aparelhos. Conferir iPad/Apple Pencil, Android com caneta, celulares e Windows com tela de toque/webcam.

Planejamento

trabalho-modelos.js define cadastro, área, órgão, escopo, referências, equipe/data previstas, logística e conferências. trabalho.js renderiza .work-panel, .work-check e ações de salvar/reabrir/print. A preparação transferida ao roteiro fica em expansão de contexto e não se torna constatação, período ou presença efetiva.

Acompanhamento

Providência, referência, estabelecimento, responsável, data, situação, resultado/evidência e conclusão. Filtros por texto e estado; lotes de 25 até 500 registros. Itens novos entram no início. Resumo distingue em aberto, data ultrapassada, concluído informado e registros a revisar. Conclusão sem resultado/data continua sinalizada como pendente de revisão.

Importação e saídas

JSON de planejamento/acompanhamento até 2 MB; formatos diferentes não são intercambiáveis. O contexto de relatório aceita JSON de até 24 MB, mas transfere apenas estabelecimento, número/processo e medidas, sem executar atos. CSV neutraliza fórmulas e inclui pendências. JSON, CSV e impressão abrangem todos os registros, mesmo com filtro.

Datas e privacidade

Datas são validadas como calendário e comparadas ao dia local do dispositivo. Não calcular prazo legal nem enviar notificações. Salvar JSON é explícito; CSV/PDF não substituem o arquivo para reabrir. Antes de importar, validar, detectar edição concorrente e confirmar substituição. Em falha de sessão, o planejamento baixa roteiro JSON compatível.

Entrada e estrutura

atualizador-legislacao.js oferece URL, arquivo e texto, identificação do ato, emissor, resumo, prévia e exportações. Leitura remota pode falhar por CORS; oferecer arquivo/texto sem prometer contorno universal. Metadados precisam indicar fonte verificável e pertinência ao RS.

Validação e segurança

escopo-rs.js verifica origem/ente; html-seguro.js permite apenas estrutura editorial selecionada e remove conteúdo ativo/atributos inseguros. SVG, MathML e scripts importados não passam automaticamente. Os modelos técnicos deste guia são para autoria confiável no repositório, não uma liberação do importador.

Revisão e publicação

Revisar texto, ementa, versão, alterações, fonte, vínculos e tabelas. O atualizador gera arquivos localmente; não publica o site. O HTML exportado usa a configuração comum. Ao incorporar arquivos ao checkout, atualizar catálogo e executar compilação e testes. Não alterar a integridade do PDF fornecido nem o teor da norma para ajustar escopo editorial.

Contrato de estados

Para cada ação, documentar: pronto, foco, selecionado, desabilitado, processando, sucesso, erro, vazio e cancelamento. Use hidden para ausência de conteúdo; disabled para ação indisponível; role="status" para retorno não urgente e role="alert" para bloqueio que precisa de atenção. Não exibir porcentagem sem medida real.

Dados e marcação

Texto do usuário deve entrar com textContent ou escape ao exportar HTML. Não avaliar código nem montar atributos/URLs sem validação. Dados JSON são validados por formato/versão, tipo, tamanho, enumeração e limites de imagens antes de substituir estado. Arquivo inválido não deve apagar o preenchimento.

Persistência

Tema e links favoritos são preferências locais. Inspeções, planejamento e acompanhamento ficam na memória e nos arquivos baixados; a sessão da aba serve às transferências explícitas. Não adicionar autosave de dados pessoais sem projeto próprio de persistência e comunicação compatível.

Arquitetura

O website é estático e sem dependências instaladas. site-footer.js/site-footer.css são compatibilidade; a fonte atual do rodapé é site-config.js/site-ui.css. Os endereços antigos de checklist, roteiro de demonstração, qualidade e atividades econômicas são atalhos, não módulos para estender.

const message = document.createElement("p");
message.textContent = userText; // texto, não HTML executável
status.setAttribute("role", "status");
// Valide JSON antes de aplicar e invalide a prévia depois de editar.

Escreva as equações em LaTeX e compile com scripts/matematica.cjs. O KaTeX local gera HTML visual e MathML acessível, sem conexão externa durante a leitura ou a impressão. A fonte LaTeX permanece no atributo data-latex e na anotação matemática.

P

Proporção em percentual.

n

Quantidade selecionada, inteiro não negativo.

N

Total inteiro positivo, maior ou igual a n.

const { math } = require("./matematica.cjs");
const equacao = math("P=\frac{n}{N}\times100", true);
// Incluir CSS e fontes locais.

O compilador rejeita LaTeX inválido. Verifique unidades, variáveis, conversões, limites e arredondamentos. Equações longas podem ter rolagem local em telas pequenas, sem alargar a página; confira também a impressão.

Documentação oficial do KaTeX

Envolva imagens informativas em figure.technical-figure e identifique-as com figcaption. O texto alternativo descreve a informação visual relevante; legenda registra número, título e fonte/autoria, sem repetir toda a descrição. Dimensões reservam espaço e height:auto preserva proporção.

<figure class="technical-figure" id="figura-fluxo">
  <img src="images/fluxo-editorial.svg" width="720" height="220"
       alt="Redigir, revisar e publicar, em sequência." loading="lazy">
  <figcaption><strong>Figura 1 — Fluxo editorial.</strong> Fonte: elaboração própria.</figcaption>
</figure>
<p>Como ilustrado na <a href="#figura-fluxo">Figura 1</a>, ...</p>

Escolha de formato

SVG autoral para esquema/ícone; JPEG/WebP para fotografia; PNG quando transparência ou traços exigirem. Não converter fotografias de evidência em desenho. Em picture/srcset, fornecer arquivos reais de tamanhos alternativos e um img de fallback. Evitar peso desnecessário e não carregar imagem principal de apresentação com atraso artificial.

Descrição e privacidade

Decoração pode usar alt=""; imagem funcional descreve a ação. Imagem complexa precisa de descrição longa com as informações essenciais. Não publicar dados pessoais ou evidências reais nos exemplos do guia. Imagens coletadas no roteiro usam o módulo de mídia e seus limites, não este exemplo estático.

Responsividade e impressão

Sem largura fixa que ultrapasse o contêiner; use arquivo legível no tamanho impresso, legenda perto da imagem e contraste que funcione em escala de cinza. Para imagem alta, avaliar quebra de página; não encolher texto interno até ficar ilegível.

Orientação de acessibilidade: W3C WAI — imagens complexas.

Use tabela para relações entre linhas e colunas; use quadro para síntese conceitual. Um quadro de pares pode ser dl dentro de figure.technical-frame. Uma comparação com várias colunas continua sendo uma tabela semântica, mesmo que o título editorial seja “Quadro”. Não usar tabela para montar o layout da página.

<figure class="technical-frame">
  <figcaption><strong>Quadro 1 — Síntese.</strong> Fonte e contexto.</figcaption>
  <dl><dt>Termo</dt><dd>Explicação correspondente.</dd></dl>
</figure>
<div class="technical-table-scroll" role="region" aria-label="Tabela de exemplo" tabindex="0">
  <table class="technical-table">
    <caption>Tabela 1 — Quantidades fictícias, período A (unidades)</caption>
    <thead><tr><th scope="col">Categoria</th><th scope="col">Quantidade</th></tr></thead>
    <tbody><tr><th scope="row">Exemplo</th><td class="numeric">12</td></tr></tbody>
  </table>
</div>
<p class="technical-source">Fonte: dados fictícios. Nota: explicar recorte e limitações.</p>

Cabeçalhos

Usar caption, thead, tbody e th scope="col/row". Cabeçalhos complexos podem exigir id/headers; prefira dividir uma tabela muito complexa. Alinhar números à direita com .numeric e explicitar unidade, período, fonte, total e notas. Não tratar célula vazia, zero e não aplicável como equivalentes.

Rolagem e ordenação

Somente a região da tabela deve rolar em tela estreita, com nome acessível e foco se precisar de teclado. Texto descritivo deve quebrar linha. Ordenar por botão no cabeçalho, atualizar aria-sort e anunciar a mudança; dados numéricos devem usar comparação numérica. A demonstração de “Tema” acima ordena texto pt-BR.

Impressão

Retirar limite/rolagem do contêiner, repetir cabeçalhos, permitir quebra entre linhas e revisar larguras. Não usar altura fixa nem white-space:nowrap em todas as células. Tabela mais larga que a página exige síntese, divisão ou configuração de impressão adequada, não corte silencioso.

Referência: Tutorial de tabelas acessíveis · W3C WAI.

Use barras para comparar categorias, linhas para evolução temporal e dispersão para relação entre variáveis. Não usar pizza com muitas categorias, efeitos 3D ou eixo truncado sem explicação. Sempre registrar medida/unidade, período, escala, fonte e a indicação de dados fictícios nos exemplos. Não depender de hover: toque e teclado precisam acessar valores.

<figure class="technical-figure">
  <svg viewBox="0 0 400 160" role="img" aria-labelledby="grafico-titulo grafico-desc">
    <title id="grafico-titulo">Comparação fictícia por categoria (unidades)</title>
    <desc id="grafico-desc">Categoria A: 20. Categoria B: 30. Escala de zero a quarenta.</desc>
    <line x1="80" y1="120" x2="360" y2="120" stroke="currentColor"/>
    <text x="4" y="40" fill="currentColor">A: 20</text>
    <text x="4" y="85" fill="currentColor">B: 30</text>
    <rect x="80" y="20" width="140" height="28" fill="var(--blue)"/>
    <rect x="80" y="65" width="210" height="28" fill="var(--green)"/>
    <text x="80" y="145" fill="currentColor">0</text>
    <text x="340" y="145" fill="currentColor">40</text>
  </svg>
  <figcaption>Gráfico 1 — Demonstração, período A. Fonte: dados fictícios.</figcaption>
</figure>
<!-- Acrescentar resumo e tabela com todos os valores. -->

Interatividade existente

O gráfico de barras da seção Gráficos alterna períodos A/B, atualiza barras, resumo e tabela equivalente e exporta os mesmos dados como CSV e SVG. Números são fictícios. Uma mudança de filtro deve atualizar todas as representações e os arquivos exportados; não apenas a largura visual.

Fluxos e esquemas

Para fluxos pequenos, usar SVG local autoral com title/desc ou uma lista ordenada para sequência simples. Declare condições de decisão em texto e identifique o significado das setas. O arquivo images/fluxo-editorial.svg pode servir de estrutura: editar a fonte e sua descrição juntos.

Mapas e geografia

Não incluir mapa decorativo que pareça indicar cobertura oficial. Se forem adicionados dados geográficos do RS, documentar fonte, período, legenda, unidade territorial e alternativa em tabela/lista, sem divulgar dados pessoais. Não há mapa operacional implementado atualmente.

Código e exportação

SVG mantém texto vetorial; canvas exige alternativa textual e exportação própria. Não depender de biblioteca externa só para gráfico simples. SVG enviado por usuário não deve ser inserido sem sanitização; o exemplo deste guia é autoral e confiável. Para publicação científica, gerar também artefato separado com método, dados e versão.

Testar o gráfico e seus arquivos → · Baixar exemplo de figura SVG

Use ol para sequência, ul para itens paralelos e dl para termo/definição. Expansões usam details/summary para conteúdo complementar: não esconder um requisito obrigatório ou um erro que impede concluir.

<ol class="technical-steps"><li>Preparar.</li><li>Conferir.</li></ol>
<details><summary>Critérios complementares</summary><p>Conteúdo...</p></details>
<blockquote class="technical-quote"><p>Trecho curto com reprodução fiel.</p></blockquote>
<p>Fonte: <cite>Título do documento</cite>, dispositivo/página e link oficial.</p>
<pre class="technical-code"><code>&lt;!-- Código como texto escapado. --&gt;</code></pre>
<p>Leia a <a href="#nota-exemplo">nota 1</a>.</p>
<aside id="nota-exemplo" class="technical-note">Nota explicativa.</aside>

Identifique citação literal e paráfrase; preserve o sentido e informe dispositivo/página quando pertinente. Links devem ter texto que explique o destino. Em código, escapar <, > e &; copiar exemplo não deve executar scripts. Mensagens temporárias não substituem instruções persistentes. Os botões de copiar código neste guia usam a área de transferência e oferecem seleção manual se ela estiver bloqueada.

Downloads

Rótulo deve indicar conteúdo e formato: JSON para retomar, HTML para documento, CSV para planilha e PDF via diálogo de impressão. Usar Blob/URL.createObjectURL quando necessário e revogar a URL após o uso; não revogar antes de o navegador iniciar o download. Não comunicar download concluído quando apenas foi solicitado.

Impressão

Separar controles e documento, manter preto sobre branco e margens, evitar títulos isolados e conferir tabelas, imagens e anexos. Este guia imprime todas as seções e expande detalhes temporariamente; depois restaura busca e expansões. O resultado depende do navegador, do tamanho do papel e da configuração do usuário.

Áudio e vídeo

O vídeo atual é a prévia local de câmera, sem gravação de áudio. Se forem publicados vídeos editoriais, usar controles nativos, legendas sincronizadas em arquivo track real e transcrição; não iniciar som automaticamente. Para áudio, oferecer transcrição. Um exemplo textual de markup não substitui os arquivos de legenda/transcrição.

Arquivos embutidos

PDF deve ter título, formato e link direto; se houver visualização embutida, manter alternativa de download e testar em celular. Evitar iframe sem título e sem alternativa. O guia não contém editor rico ou reconhecimento OCR; campos de texto não interpretam HTML/MathML do usuário.

1. Localizar o padrão: use o inventário por família e confira o arquivo de origem. Escolha o componente existente antes de criar variante.
2. Adicionar conteúdo: escreva HTML semântico, IDs únicos, rótulos, fonte e contexto RS. Para elementos técnicos, carregue conteudo-tecnico.css após site-ui.css.
3. Integrar: registre materiais no catálogo correspondente e a página na navegação se fizer sentido. Respeite data-root e caminhos relativos.
4. Documentar: se criar nova família funcional, acrescente descrição em scripts/guia-estilo-secoes.cjs. O inventário registra seletores/fontes; não substitui a explicação do comportamento.
5. Compilar: execute os comandos abaixo. O guia deve refletir o código e não inserir conteúdo normativo fictício.
6. Homologar: testar teclado, leitor de tela, zoom, 320 px, telefone/tablet/desktop, claro/escuro, texto longo, armazenamento bloqueado, arquivos inválidos e impressão. Testes de DOM não medem aparência ou hardware real.

node scripts/atualizar-guia-estilo.cjs
node scripts/atualizar-interface.cjs
node scripts/verificar-site.cjs

Ordem geral: tema no head; CSS base, CSS específico, escopo RS, camada compartilhada e estilos editoriais necessários. O compilador insere configuração, catálogo e UI antes dos scripts de página. Não inverter dependências do editor, dos modelos e da mídia. Os arquivos de compatibilidade e os redirecionamentos permanecem documentados no inventário.

O guia atende exclusivamente aos órgãos de VISA Estadual e municipais do Rio Grande do Sul. Referências federais são incluídas conforme pertinência. Identifique autoria, fonte, versão, aplicabilidade, status documental e critérios de revisão; não represente a iniciativa pessoal como sistema oficial.

Ao alterar um componente, atualize código, exemplo e teste relevante. Não declarar aprovação normativa, publicação ou validação visual a partir da existência de um arquivo ou de testes simulados. As referências técnicas sobre MathML, tabelas e imagens são padrões de implementação, não fontes sanitárias de outro estado.

135 páginas HTML; 583 classes declaradas/identificadas; 68 atributos data; 39 variáveis CSS. O inventário registra marcação estática, classes declaradas em CSS e atributos citados em JS. Uma declaração pode atender uso dinâmico ou compatibilidade: sua presença não comprova que seja visível em todas as páginas.