Manual completo do
Portal Plan-Assiste

Tipografia

A fonte oficial e obrigatória do Portal é Titillium Web. A família deve ser carregada com os pesos 300, 400, 500 e 600. Qualquer fallback deve ser apenas contingência técnica de renderização quando a fonte não carregar; não autoriza trocar a identidade tipográfica nem escolher outra família no framework definitivo.

Regra de acessibilidade: nenhum texto visível do Portal pode ter menos de 16px. A hierarquia deve ser preservada por tamanho, peso, cor e espaçamento; não se deve reduzir a fonte para forçar conteúdo a caber. Quando faltar espaço, o componente deve quebrar, redistribuir ou adaptar seu layout.

Iconografia

• Usar ícones de linha fina, preferencialmente Lucide.
• Ícones livres em cards de destaque e atalhos: 30 a 38px, sem fundo.
• Ícones informativos, de identidade ou contexto: 20 a 28px dentro de círculo de 40 a 56px.
• Ícones de serviços e fluxos operacionais: 24px dentro de quadrado de 48px com raio de 12px.
• Ícones sociais, sino e ações isoladas no topo/rodapé: 24px.
• Indicadores auxiliares, como setas de dropdown e ícones inline: 16px.
• Ícones em botões: 16 a 20px.
• Ícones de tipo de credenciado: 28px dentro de círculo de 54 a 64px.
• Não misturar estilos preenchidos e lineares, exceto estados ativos como favorito/avaliação.

Tokens fixos de layout

• --site-max: 1440px
• --unit: 16px
• --grid-base: 48px, coluna-base repetida 30 vezes.
• --gap: 24px
• --space-sm: 16px para padding compacto.
• --space-md: 24px para gaps estruturais e padding de cards pequenos de conteúdo.
• --space-lg: 32px para padding de caixas grandes.
• --sidebar: 342px, equivalente a uma coluna do grid.

Aplicação obrigatória

• Home e seções amplas: usar 4 colunas quando houver quatro itens equivalentes.
• Cards de notícia em destaque: 4 colunas no desktop, respeitando gap de 24px.
• Seções internas com 3 cards no canvas completo: 3 colunas de 464px e gap de 24px.
• Cards pequenos, métricas, atalhos e listas de cards também usam gap de 24px para manter alinhamento entre páginas.
• Layout do Beneficiário: sidebar de 342px + conteúdo de 1074px + gap de 24px; dentro do conteúdo cabem 3 cards de 342px com 2 gaps de 24px.
• Gaps internos de controles, ícones e conteúdo dentro do card podem ser menores quando forem parte da composição do componente.
• Mobile: colunas empilham em 1 coluna sem alterar hierarquia, raios ou pesos tipográficos.

Menu do Beneficiário em telas menores

No desktop, a navegação do Beneficiário funciona como sidebar porque organiza uma área operacional extensa. Ela não é igual ao menu principal do Portal: o menu principal pode exibir apenas “Catálogo de serviços”, enquanto a sidebar mantém “Minhas solicitações” e os demais destinos da área autenticada. Em telas menores, a sidebar deve ser substituída por um campo de seleção.

• Atendimento: Catálogo de serviços, Minhas solicitações, Carteirinhas, Reembolso e auxílios, Despesas e custeios e Dependentes.
• Minha conta: Meus dados, Meus favoritos e Notificações.
• Hierarquia editorial: páginas filhas exibidas na sidebar, como Pessoa Jurídica e Pessoa Física dentro de “Como se credenciar ou renovar”, recebem recuo adicional e um pequeno conector visual. A página-pai permanece em semibold enquanto uma filha estiver ativa.
• Usar select com label visível, altura mínima de 48px, borda de 2px e raio de 9px.
• O valor selecionado deve refletir a página atual, para orientar o beneficiário sem repetir toda a navegação.
• Ao selecionar outro item, navegar imediatamente para a seção correspondente.
• Ocultar foto, bloco de perfil e lista lateral para evitar duplicidade de navegação.
• Manter esse padrão em qualquer área com navegação lateral longa. Não criar menus laterais colapsados que ainda ocupem largura útil no mobile.

Adaptação de grids e controles

• Quatro itens equivalentes: 4 colunas no desktop, 2 colunas até 1100px e 1 coluna até 640px.
• Três cards editoriais ou institucionais: 3 colunas no desktop; 1 coluna quando houver sidebar, texto longo ou largura menor que 1100px.
• Filtros de busca: desktop pode usar múltiplas colunas; mobile deve empilhar campos e deixar ações em botões com largura confortável.
• Cards de credenciado: manter duas colunas apenas onde houver largura real; em mobile, imagem/ícone, texto, metadados e ações devem empilhar.
• Notícias relacionadas: 2 colunas em tablet, 1 coluna no mobile compacto.
• Rodapé: 4 colunas no desktop e 1 coluna abaixo de 900px, preservando ordem, contraste e espaçamento de leitura.

Botões

• Primário: ações principais, como buscar, enviar, baixar e ver detalhes. Usa formato retangular com cantos arredondados de 9px; o formato de cápsula fica reservado aos controles secundários indicados neste manual.
• Secundário: ações complementares, como imprimir, limpar filtro.
• Ícone circular: ações rápidas de baixo texto, sempre com aria-label.

Formulários e filtros

Filtros ativos devem ser visíveis, removíveis e refletidos na URL quando a busca for compartilhável.

Select padrão: toda lista usa label visível, altura mínima de 46px, borda de 2px, raio de 9px, fundo branco e seta verde alinhada a 16px da borda direita. O estilo nativo do navegador não deve aparecer. Em linhas de filtros, use as proporções da grade sem alterar a largura após a seleção.

Botões segmentados de filtro: os conjuntos usados no Catálogo de serviços, na Rede credenciada, em Dúvidas frequentes e na Pesquisa permanecem estáticos. No hover, alteram somente a cor de fundo e da borda, sem deslocamento vertical. Contêineres com rolagem horizontal devem reservar espaço interno suficiente para não recortar nenhuma borda.

Seleção de período: filtros por data usam um único campo retangular com cantos arredondados, ícone de calendário e calendário em português do Brasil. O período é exibido em dia/mês/ano e o cabeçalho do calendário usa “mês de ano”. A largura do campo não muda depois da seleção.

Limpar filtros: use sempre o botão secundário em formato de cápsula, com fundo verde muito claro, borda suave e altura mínima de 46px. O hover altera apenas fundo e borda, sem deslocar o botão.

Editor de texto rico

Conteúdo rico é permitido somente por meio do editor personalizado do Portal. Formulários operacionais usam campos de texto simples; não devem existir editores paralelos, HTML livre ou campos ricos com estilos próprios.

Descrições de cards, documentos, destaques, slides, resumos e legendas usam entrada de texto simples em Titillium Web Light 18px. O editor rico fica reservado ao corpo de notícias e aos blocos editoriais “Texto rico”, nos quais a formatação altera de fato a estrutura de leitura.

Governança do editor personalizado

O editor oferece parágrafo, títulos H2 e H3, ênfases, listas, citação, alinhamento, links, linha horizontal e tabelas. O conteúdo gerado deve ser sanitizado; scripts, iframes livres, eventos JavaScript e classes externas não são aceitos.

<h2>Orientações para reembolso</h2>
<p>Envie os documentos exigidos pelo regulamento.</p>
<table>
  <thead><tr><th>Documento</th><th>Quando usar</th></tr></thead>
  <tbody><tr><td>Nota fiscal</td><td>Sempre</td></tr></tbody>
</table>

• Salvar conteúdo pelo editor personalizado, sem campo HTML concorrente.
• Validar headings em ordem lógica.
• Obrigar texto alternativo em imagens informativas.
• Bloquear elementos inseguros antes da prévia.

Tabela editorial padrão

Tabelas devem ser usadas para comparação real de dados, não para diagramação. O editor oferece três estilos: padrão, realce da linha no hover e zebrado com linhas alternadas. Seus títulos e cabeçalhos usam 18px; o conteúdo das células usa 17px. Em mobile, a tabela precisa ter rolagem horizontal dentro de um contêiner, preservando cabeçalhos e conteúdo.

Imagem com legenda

Imagens editoriais devem ter função clara, proporção estável, legenda quando ajudarem na interpretação e texto alternativo obrigatório quando transmitirem informação.

• Usar largura 100% dentro do bloco e altura automática.
• Definir proporção ou dimensões para evitar salto de layout.
• Comprimir arquivos e usar lazy loading.

Accordion / FAQ

Usar accordion para perguntas frequentes, explicações progressivas e listas longas de detalhes. O título precisa ser autoexplicativo; respostas não devem esconder ações críticas.

Alertas e mensagens

Alertas devem orientar decisão. Não usar cor sozinha: o texto precisa dizer o estado e a consequência.

Upload de arquivo

Uploads devem indicar formatos aceitos, limite de tamanho, progresso, sucesso, erro e remoção. Em documentos sensíveis, exibir aviso de segurança e não aceitar arquivos fora da política.

Estados administrativos

Tabelas e listagens do admin precisam exibir status, autor, última edição, ações por linha e estados de revisão. O usuário deve entender o que está publicado, em rascunho ou aguardando aprovação.

Home

Página de passagem. Cards devem favorecer descoberta, com links claros para serviços, notícias, suporte e áreas públicas.

Beneficiário

Área operacional. Priorizar atalhos, pendências, rede credenciada e cards de orientação navegáveis para conteúdos futuros.

Carteirinhas

Separar ações diretas da carteirinha dos cards informativos/navegáveis. Plan-Assiste e Unimed devem ter identidade visual distinta.

Rede credenciada

Filtros úteis, favorito, avaliações, Google e rede/custo devem ficar escaneáveis. Botões inferiores sempre alinhados ao fundo do card.

Notícias

Data com calendário, categoria como chip, imagem relevante ou editorial, divisória antes de relacionadas e favoritos quando logado.

Suporte

Priorizar FAQ, Central 24h e Manifestações. Evitar canais que não serão mantidos, como e-mail de contato direto.

Plan-Assiste

Conteúdo institucional com cards de navegação e seções editoriais separadas por linhas sutis quando o conteúdo for longo.

Credenciado

Área pública com quatro cards no desktop e acesso claro à área logada. Detalhe de credenciado sem divisórias excessivas.

Transparência

Indicadores gerais (despesas, beneficiários, rede) em cards de gráfico com legenda, rótulos diretos e alternativa em tabela. Dados sempre identificados como ilustrativos quando não vierem de fonte oficial.

Princípios da interface mobile

• Usar os mesmos tokens de cor, tipografia e espaçamento do Portal.
• Tamanho mínimo de toque: 44px de altura ou área equivalente.
• Padding lateral padrão de tela: 20 a 24px.
• Títulos de tela: 18px peso 700; corpos: 14 a 15px peso 400 ou 600.
• Raios: controles em 8–9px; cards em 14–18px; pílulas em 999px.
• Sombra de card: 0 10px 24px rgba(16,63,58,.06).

Navegação por pilha (screen stack)

O app usa um modelo de pilha de telas. Cada tela empurrada preserva o histórico e o botão de voltar retorna para a tela anterior. A navegação por abas inferiores (bottom nav) redefine a pilha para o contexto daquela aba.

• Telas principais (login, home, serviços, rede, favoritos, perfil): raiz da pilha.
• Telas de detalhe ou sub-fluxo (ex.: Fale Conosco): empilhadas sobre a tela de origem.
• Troca de aba via bottom nav: reseta a pilha para aquela aba.

Card de ajuda contextual

Componente de rodapé de telas de entrada para oferecer suporte antes da autenticação.

Borda 1.5px solid #d7e7e2; raio 16px; ícone HelpCircle 20px cor #0d8473 em círculo de 42px com borda; título 17px peso 700; descrição 16px cor #4a7b73; seta ChevronRight 18px.

Linha de contato – ContactRow

Linha de canal de atendimento dentro de card. Ícone colorido à esquerda, texto e subtítulo no centro, separadas por borda superior.

Padding 14px vertical / 20px lateral; ícone 20px cor #0d8473; texto principal 17px peso 700; subtítulo 16px; separador 1px solid #d7e7e2; última linha sem borda; e-mails longos com overflow-wrap: anywhere.

Construtor de páginas

• Adicionar/remover seções por drag and drop.
• Escolher grid: 1, 2, 3 ou 4 colunas conforme tokens do Portal.
• Alternar sidebar: nenhuma, institucional, notícia, FAQ, beneficiário, credenciado, equipe ou customizada.
• Associar cards, notícias, FAQs, serviços e credenciados dinamicamente.
• Configurar visibilidade por perfil, data, área e status.
• Previsualizar estados vazio, erro, carregando e publicado.

Governança de customização

• Administradores podem customizar conteúdo, ordem, blocos, sidebars, templates e associações.
• Não podem alterar livremente fonte, grid, cores fora da paleta, foco, contraste ou componentes base sem revisão de design.
• Campos avançados devem existir, mas protegidos por perfil de superadministrador.
• Toda exclusão de página publicada exige confirmação, motivo e possibilidade de restauração.

Fluxo editorial recomendado

1. Rascunho criado por editor.
2. Validação de campos obrigatórios e acessibilidade.
3. Prévia visual em desktop e mobile.
4. Revisão por perfil autorizado.
5. Publicação imediata ou agendada.
6. Registro automático no histórico.

Validações automáticas

• Obrigar texto alternativo em imagens informativas.
• Bloquear links quebrados ou rotas inexistentes.
• Avisar sobre títulos longos em cards.
• Checar contraste de cores customizadas.
• Exigir confirmação para remover conteúdo publicado.

Como editar

1. Entre com o perfil de equipe e abra Administração do Portal.
2. Selecione Páginas, edite uma página existente ou crie uma nova.
3. Informe título, endereço, página-mãe opcional e resumo.
4. Adicione blocos de texto, card, documento, destaque, Dúvidas frequentes ou Organograma.
5. No bloco de Dúvidas frequentes, crie, renomeie ou exclua categorias e gerencie as perguntas de cada uma. No Organograma, a numeração é automática: as setas horizontais alteram o nível e as verticais alteram a ordem.
6. Dúvidas frequentes e Organograma são editados na listagem geral de páginas, sem módulos administrativos separados. O Organograma também permite alterar nome da unidade, sigla, responsável e e-mail.
7. Os módulos Banners, Mídia, Arquivos e Notícias ficam diretamente na Administração do Portal. Mídia reúne imagens, vídeos e áudios com player; Arquivos cataloga PDFs e documentos do Office. Na demonstração, novos uploads de até 1 MB são persistidos no navegador.
8. O editor de páginas oferece texto rico baseado em TipTap e blocos estruturados de tabela, botão, mídia e documento. O texto comum dos campos e do editor segue a tipografia Titillium Web Light em 18px; títulos e comandos preservam seus pesos próprios. No texto rico, é possível formatar títulos, listas, citações, alinhamentos e links, além de inserir tabelas e editar ou excluir suas linhas, colunas, cabeçalhos, células e a própria tabela. O bloco próprio de tabela continua disponível para acervos e dados tabulares padronizados; botões e documentos podem apontar diretamente para itens da Biblioteca de arquivos.
9. Slides são administrados por slideshow: Home, Beneficiário, Credenciado e Equipe. Cada slide mantém chamada, título, descrição, CTA, imagem, texto alternativo, período, ordem, tom visual e status.
10. Mídias e arquivos podem ser substituídos mantendo o mesmo registro; o protótipo atualiza referências editoriais para evitar links quebrados. Imagens mostram dimensões e vídeos ou áudios mostram duração quando o navegador carrega os metadados.
11. Escolha linha inteira, metade, um terço ou um quarto.
12. Salve como rascunho ou publique. Somente a versão publicada aparece no portal. Use Cancelar edição para retornar à listagem sem salvar as mudanças da sessão.

Persistência e cópia de segurança

• Os dados da demonstração ficam restritos ao navegador e dispositivo atuais.
• Use Exportar JSON antes de limpar os dados ou trocar de computador.
• Use Importar JSON para restaurar uma cópia.
• Restaurar conteúdo apaga personalizações e recupera o conteúdo original.
• O modo de edição contextual adiciona atalhos às páginas personalizadas.