# Plataformas e dispositivos

> **Telas conceituais.** Os aplicativos do colaborador e do gestor mostrados
> aqui orientam o design system. Não representam produto publicado nem regras de
> negócio aprovadas. Pessoas, saldos, prêmios e datas são fictícios e nada é
> enviado.

Onde está:

| O quê | Arquivo |
| --- | --- |
| Camada CSS | `src/css/style.css`, bloco `/* TP:APP:START … TP:APP:END */`, antes de `TP:LEGACY-OVERRIDES` |
| Markup do app do colaborador (um só, incluído em todas as molduras) | `src/partials/design-system/app-colaborador.html` |
| Markup do app do gestor (três telas, mesma casca) | `src/partials/design-system/app-gestor.html` |
| Estado local (Alpine) | `src/partials/design-system/app-runtime.html` — componentes `tpColab`, `tpGestor` e `tpDeviceFit` |
| Seção do portal | `src/partials/design-system/plataformas.html`, em `design-system.html` como **16 · Plataformas e dispositivos** |
| Página de referência | `src/padroes-aplicativo.html` (menu Referências → Aplicativo e dispositivos) |
| Verificação | `scripts/check-design-system.mjs`, grupo "Aplicativo e dispositivos (TP:APP)" |

## 1. Três formatos, uma casca

| | Telefone · aplicativo | Tablet | Desktop |
| --- | --- | --- | --- |
| Largura do app | até 620 px | 621 a 1120 px | acima de 1120 px |
| Quem usa | Colaborador (principal) e gestor (decisões rápidas) | Colaborador; gestão em consulta | Gestão e RH, atendimento; colaborador no navegador |
| Navegação | Barra de abas inferior | Trilho de 96 px | Lateral de 256 px com a marca |
| Colunas e margens | 1 coluna, 16 px | 2 colunas ou lista-detalhe (42%), 24 px | 2 colunas 5:7 ou lista-detalhe (46%), 32 px, até 72rem |
| Alvo mínimo | 44 × 44 px | 44 × 44 px | 44 px na navegação e nos botões |
| Tipografia | Corpo 16 px, título da barra 18 px | Corpo 16 px, título 24 px | Corpo 14 px, título 24 px |
| Densidade | Linhas de 64 px | Linhas de 64 px | Linhas de 56 px |
| Entrada | Toque, teclado externo, leitor de tela | Toque, teclado externo | Ponteiro e teclado; toque em conversíveis |
| Confirmação | Folha inferior | Diálogo centralizado | Diálogo centralizado ou `.tp-drawer` |

O painel da gestão (`index.html`) e o sistema de atendimento
(`sistema-atendimento.html`) continuam como estão, e seguem sendo a experiência
principal da gestão no desktop. A referência aponta para eles e não recria
nenhuma das duas telas.

### Dois públicos, uma casca

Decidido em 22/09/2026: **haverá aplicativo para o gestor**. Ele não é o painel
encolhido; resolve o que aparece no meio do dia — uma aprovação, um crédito, uma
olhada na campanha. Três telas na referência bastam para o sistema mostrar que
cobre o público:

| Tela | O que traz | Ação |
| --- | --- | --- |
| Início | Pontos disponíveis para distribuir (cartão de saldo), engajamento do período e resumo do trimestre | Atalho **Reconhecer e creditar**, que abre a folha inferior |
| Aprovações | Fila curta de solicitações, com Aprovar e Recusar em cada linha | Decidir; a fila vazia cai no estado vazio |
| Campanhas | Resumo com progresso, participação e quem mais reconheceu | Creditar o bônus de quem cumpriu a meta |

Destinos do gestor: **Início, Aprovações, Campanhas** — três, dentro da faixa de
3 a 5, com ícone, rótulo e `aria-current="page"`, como os do colaborador. O
`.tp-app-nav` é o mesmo: no telefone vira barra de abas, acima de 620 px vira
trilho, acima de 1120 px vira navegação lateral.

Os números do gestor fecham entre as telas: **cota do trimestre = pontos já
creditados + pontos disponíveis para distribuir**, antes e depois de cada
crédito, aprovação ou bônus. Relatórios, criação de campanha, importação de
pessoas e distribuição em massa continuam no painel web.

## 2. Limiares e por quê

`.tp-app` declara `container: tp-app / inline-size`. O layout segue a largura
que o aplicativo **recebe**, não a da janela: a mesma casca é telefone dentro de
uma moldura de 390 px num monitor de 1440 px, e desktop numa janela de 1180 px.
Por isso uma página de documentação consegue mostrar os três formatos lado a
lado com o mesmo markup.

Os dois limiares são os do sistema:

| Condição | Valor | Token de origem |
| --- | --- | --- |
| `@container tp-app (width <= 620px)` / `(width > 620px)` | 620 px | `--tp-breakpoint-mobile` |
| `@container tp-app (width > 1120px)` | 1120 px | `--tp-breakpoint-desktop` |

A semântica é a das media queries do portal (`max-width: 620px`): 620 px ainda
é telefone. `--tp-breakpoint-tablet` (860 px) não é usado na casca: entre 621 e
1120 px o que muda é o espaço de conteúdo, e a lista-detalhe já cabe a partir de
620 px.

**Por que os números estão repetidos.** Custom property não funciona na
condição de `@container` nem de `@media`: a condição é avaliada fora da cascata,
sem elemento de onde ler `var()`. O check lê todos os `@container` do bloco e
recusa qualquer número diferente de `--tp-breakpoint-mobile` e
`--tp-breakpoint-desktop` no `tokens.json`. Se um dia os tokens mudarem, o check
falha até o bloco acompanhar.

## 3. Padrões

### Casca `.tp-app`

Grade de duas colunas (`auto`, `1fr`) e três linhas (barra, conteúdo, navegação).
Um contêiner não pode consultar a si mesmo, então quem muda de lugar são os
filhos: no telefone a navegação ocupa a terceira linha; acima de 620 px ela passa
para a primeira coluna e a barra e o conteúdo para a segunda. A casca ocupa a
altura do pai (`block-size: 100%`); no produto, a tela inteira.

Ordem no DOM: barra superior, conteúdo, navegação. É a ordem de leitura do
telefone, que é o uso principal. No tablet e no desktop a navegação aparece à
esquerda pela grade e continua depois do conteúdo na ordem de Tab — decisão
registrada, não acidente.

A casca não herda a densidade compacta de quem a hospeda: botões e campos dentro
de `.tp-app` mantêm 44 px.

### Barra superior — `.tp-app-bar`, `.tp-app-title`, `.tp-app-icon-button`

Título alinhado ao início, Voltar à esquerda, até duas ações à direita (sino e
avatar do perfil). Soma `env(safe-area-inset-top)`. No telefone, um detalhe
empilhado troca o título ("Prêmio", "Movimentação") e mostra Voltar; acima de
620 px o detalhe fica ao lado e Voltar some. Telas empilhadas (Perfil,
Notificações) mostram Voltar em qualquer largura.

### Navegação — `.tp-app-nav`, `.tp-tab-bar`, `.tp-nav-rail`

- `.tp-app-nav` é adaptável: barra de abas até 620 px, trilho até 1120 px,
  navegação lateral acima disso, com a marca inteira (`.tp-brand`, 218 px com a
  área de proteção).
- `.tp-tab-bar` e `.tp-nav-rail` fixam uma forma quando o produto precisar.
- 3 a 5 destinos, ícone e rótulo sempre visíveis. O destino atual leva
  `aria-current="page"` e pista de forma: pílula atrás do ícone (barra e trilho)
  ou barra lateral e fundo (lateral), além do rótulo em negrito.
- Rótulo de 12 px que cede até 11 px (`clamp` com `cqi`) em cascas estreitas.
  Quatro destinos cabem inteiros a partir de 300 px mesmo na fonte de fallback,
  que é larga.
- Hover só sob `@media (hover: hover)`; foco com o anel do sistema desenhado
  por dentro, porque a barra encosta na borda da casca.

### Linha de lista — `.tp-list-group`, `.tp-list-row`

Ícone ou avatar (`.tp-list-row-lead`), texto primário e secundário, valor à
direita (`.tp-list-row-value`, dígitos tabulares) e chevron. Três formas:
estática (`div`), acionável (`button`/`a`) e escolha (`label` com radio nativo e
marca de seleção). Seleção em lista-detalhe: `aria-current="true"`, barra lateral
e fundo. Crédito e débito levam sinal em texto (`+500 pts`, `−1.000 pts`) e
ícone de seta; a cor verde é reforço, não a única pista. O texto quebra por
palavra (`overflow-wrap: break-word`), nunca no meio dela.

Quando a linha precisa de mais de uma ação (Aprovar e Recusar, na fila do
gestor), os botões entram em `.tp-app-row-actions`, dentro do bloco de texto:
ficam abaixo do apoio, alinhados ao rótulo da linha, com 44 px de alvo e quebra
quando a linha estreita. A linha inteira deixa de ser acionável — duas ações e
um alvo grande em volta se atrapalham. Com ações, a linha alinha o ícone ao
início (`align-items: start`), para ele acompanhar a primeira linha de texto.
Decidir tira a linha da fila e leva o foco junto: vai para a próxima linha ou,
se a fila esvaziou, para o título do estado vazio.

### Reconhecer com pontos

Decidido em 22/09/2026: **reconhecer um colega movimenta pontos**, tirados do
saldo de quem envia. A tela Reconhecer ganhou um terceiro campo obrigatório,
entre Motivo e Mensagem:

- Valor em `.tp-segmented` (50, 100, 250 e 500 pts), com o saldo disponível
  acima e o saldo depois do envio abaixo, os dois em dígitos tabulares.
- Saldo insuficiente é **estado de erro** do campo, não um controle desligado:
  a mensagem diz quanto a pessoa tem e o foco vai para o campo, como nos outros
  erros do formulário. É o mesmo critério do catálogo, onde "Resgatar" continua
  visível e a ajuda diz quantos pontos faltam.
- A confirmação informa os pontos enviados e o saldo depois do envio.
- O envio vira um débito no extrato ("Reconhecimento para …", origem "Enviado
  por você · motivo") e uma linha de sinal negativo em "Reconhecimentos
  recentes", ao lado dos recebidos, que são crédito.

O extrato passou a fechar com o saldo: abaixo do resumo, uma linha diz o saldo
no início do período e a conta que leva ao saldo de hoje. O número não é escrito
à mão — `saldoInicial` é `saldo − créditos + débitos` do período selecionado,
então a conta fecha em 30 dias, 90 dias e 12 meses, e continua fechando depois
de um resgate ou de um reconhecimento enviado.

### Tema — `.tp-segmented` no Perfil

Decidido em 22/09/2026: o app **segue o tema do sistema e também oferece
alternador**. O controle fica no Perfil, em "Aparência", com três estados:
Sistema, Claro e Escuro. No produto: o padrão é **seguir o sistema** e a escolha
do usuário é **persistida**, valendo só para o aplicativo — mudar o tema do app
não muda o do aparelho, e voltar para "Sistema" devolve o controle ao aparelho.
Enquanto a escolha for "Sistema", o app acompanha a troca de tema feita fora
dele, sem precisar reabrir.

Nesta documentação o efeito é da página inteira, não da moldura: um tema claro
dentro de uma página escura exigiria redeclarar os tokens de cor dentro do bloco
`TP:APP`, e o bloco só declara propriedades locais `--tp-app-*`. Como a moldura
representa a tela inteira do aparelho, a página faz o papel do sistema. As
instâncias do app na mesma página se avisam por evento, para todas mostrarem a
mesma escolha.

### Cartão de saldo — `.tp-balance` com `.tp-graphic.tp-graphic-gradient`

Número em Passo com dígitos tabulares. Compõe com o grafismo existente: o
gradiente para em Mauveine (branco a 8,7:1 ou mais), o foco vira branco nessa
superfície e o arco fica na faixa reservada, abaixo do número.

### Folha inferior — `.tp-sheet-layer`, `.tp-sheet`

`role="dialog"`, `aria-modal="true"`, título e descrição associados. Contrato de
`.tp-dialog`/`tpOverlay`: foco no primeiro controle, Tab e Shift+Tab contidos,
Esc e toque no véu fecham, o foco volta ao acionador. Conteúdo, barra e
navegação da casca ficam `inert` enquanto a folha está aberta. A camada é
posicionada dentro da casca (e não no top layer do `<dialog>`) para caber em
qualquer moldura; no produto a casca é a tela inteira e o efeito é o mesmo.
Véu na mesma tinta de `.tp-dialog::backdrop`.

No telefone ancora no rodapé, com alça decorativa e botão Fechar — arrastar
nunca é o único caminho. Acima de 620 px vira diálogo centralizado de até 28rem,
com as ações lado a lado.

### Segmentado e filtros — `.tp-segmented`, `.tp-app-chips`

Radios nativos: uma parada de Tab, setas para trocar, sem JavaScript de teclado.
Selecionado tem preenchimento e marca de seleção. Desenho de 36 px; o radio
invisível passa 4 px de cada lado e o alvo chega a 44 px. Segmentado para 2 a 4
opções curtas (período do extrato); pílulas quando as opções não cabem numa
linha (categorias do catálogo) — rolam na horizontal ou quebram
(`.tp-app-chips-wrap`, motivos do reconhecimento).

### Barra de ação — `.tp-app-actionbar`

Ação primária grudada no fim da área rolável, na zona do polegar, em largura
total no telefone. Na lista-detalhe acima de 620 px volta ao fluxo, alinhada ao
início.

### Lista-detalhe — `.tp-app-split`

No telefone, lista e detalhe se revezam (`data-detalhe="aberto"`); o foco vai ao
título do detalhe e volta ao cartão de origem. Acima de 620 px ficam lado a lado
e rolam de forma independente.

### Painel inicial — `.tp-app-dashboard`

Uma coluna no telefone; no tablet, saldo e campanha lado a lado e as listas em
largura total; no desktop, colunas 5:7 com saldo e campanha à esquerda,
reconhecimentos e "Ao seu alcance" à direita.

### Estados — `.tp-app-state`, `.tp-app-banner`

| Estado | Como aparece | Texto |
| --- | --- | --- |
| Carregando | Esqueleto com a forma do conteúdo, `aria-busy` na área | anunciado pela região de status |
| Vazio | Ícone, o que vai aparecer ali e um próximo passo que existe | "Ainda não há movimentações" |
| Erro | Ícone de alerta, `error.connection`, "Tentar novamente" | sem culpar a pessoa |
| Sem conexão | Faixa de aviso com data e hora dos dados salvos; resgate indisponível e dizendo por quê | "Resgates ficam indisponíveis até a conexão voltar." |

### Molduras — `.tp-device`, `-phone`, `-tablet`, `-desktop`

Só para documentação. Retângulo arredondado genérico, sem entalhe, ilha ou
botões de fabricante; a janela de desktop tem uma barra neutra, sem os três
pontos coloridos de um sistema operacional. A moldura de telefone simula área
segura de 24 px no topo e 8 px embaixo.

## 4. Propriedades locais `--tp-app-*`

Não são tokens: vivem só no bloco `TP:APP`, como `--tp-graphic-*` em
`TP:GRAPHICS`. O gerador as exclui explicitamente do catálogo e o check recusa
`--tp-app-*` fora do bloco e qualquer outro `--tp-*` declarado dentro dele. O
catálogo continua com 452 tokens.

| Propriedade | Valor | Uso |
| --- | --- | --- |
| `--tp-app-bar-height` | 56 px | Barra superior no telefone |
| `--tp-app-tab-height` | 56 px | Item da barra de abas e do trilho |
| `--tp-app-rail-width` | 96 px | Trilho |
| `--tp-app-drawer-width` | 256 px | Navegação lateral |
| `--tp-app-target` | 44 px | Alvo mínimo de toque |
| `--tp-app-gutter` | 16 / 24 / 32 px | Margem por formato (`--tp-space-4/5/6`) |
| `--tp-app-columns` | 1 / 2 / 3 | Colunas de `.tp-app-columns` |
| `--tp-app-sheet-width` | 28rem | Folha como diálogo |
| `--tp-app-inset-top/bottom/left/right` | `env(safe-area-inset-*)` | Área segura |
| `--tp-app-screen-w/h`, `--tp-app-bezel`, `--tp-app-device-radius` | por moldura | Molduras |
| `--tp-app-scale` | 1 | Escala da moldura (via `zoom`), escrita por `tpDeviceFit` |

## 5. Tokens usados

Cor: `--tp-page`, `--tp-surface`, `--tp-text`, `--tp-muted`, `--tp-border`,
`--tp-border-strong`, `--tp-action`, `--tp-on-action`, `--tp-soft`,
`--tp-success`, `--tp-success-soft`, `--tp-danger`, `--tp-danger-soft`,
`--tp-warning`, `--tp-warning-soft`, `--color-brand-dark` (véu, como
`.tp-dialog`), `--color-ink` e `--color-ui-dark-elevated` (aro das molduras).
Espaço `--tp-space-*`; raio `--tp-radius-*`; tipo `--tp-type-*`; movimento
`--tp-duration-fast/slow` e `--tp-easing-*`; elevação `--tp-elevation-2` e
`--tp-elevation-dialog`; foco `--tp-component-focus-ring` e `--tp-focus-width`;
`--tp-border-width` e `--tp-disabled-opacity`. Nenhum hexadecimal no bloco.

## 6. Acessibilidade — medido

Medido no build com Chromium, nas larguras 1440, 1024, 390 e 360 px, temas claro
e escuro, na página de referência e na seção 16 do portal, e tela a tela no
telefone, no tablet e no desktop. Remedido em 22/09/2026 com o app do gestor, a
escolha de pontos e o controle de tema no ar: 32 cenas, 13.128 textos e 3.174
controles, incluindo a fila de aprovações, a folha do gestor aberta e o erro de
saldo insuficiente.

| Critério | Resultado |
| --- | --- |
| Contraste de texto | Nenhuma falha em 13.128 textos. Pior caso claro 5,68:1 (rótulo "Evitar" dos exemplos, componente existente); pior caso dentro do app 6,06:1 (data secundária sobre linha selecionada). Pior caso escuro 7,15:1 |
| Anel de foco | Todos os 3.174 controles com anel; pior contraste do anel 7,29:1 (escuro) e 9,09:1 (claro) |
| Alvos de toque | Nenhum controle vivo do app abaixo de 44 × 44 px, inclusive Aprovar e Recusar na fila do gestor |
| Overflow horizontal da página | 0 px nas quatro larguras, nas duas páginas |
| Erros de console | 0 |
| Rótulos truncados | Nenhum fora do contraexemplo "Mais de cinco destinos" |
| Folha inferior | Foco entra, Tab e Shift+Tab contidos (9 voltas no colaborador, 14 no gestor), Esc e véu fecham, foco volta ao acionador; no tablet vira diálogo centralizado |
| Teclado | Tab percorre os destinos; Enter troca a tela e move `aria-current`; setas trocam o segmentado, inclusive o de tema e o de pontos |
| Foco depois de uma decisão | Aprovar ou recusar move o foco para a linha seguinte ou, se a fila esvaziou, para o título do estado vazio |
| Movimento reduzido | Folha sem animação (`animation: none`) |

Outros cuidados: mudança de tela anunciada numa região `aria-live="polite"`;
erro de formulário associado por `aria-describedby`, com foco no primeiro campo
com problema; ilustrações de fazer/evitar são `inert` e descritas em texto
visível; molduras reduzidas da visão geral do portal também são `inert` e têm o
modo Tamanho real para navegar.

## 7. Responsividade da documentação

Moldura de telefone é fluida: estreita junto com a página. Abaixo de 420 px ela
perde o aro e ocupa a margem, para o app nunca ficar mais estreito que um
aparelho real (390 px na tela de 390, 360 px na de 360).

Tablet e desktop, na página de referência: `tpDeviceFit` reduz a moldura com
`zoom` só até 75% (tablet) e 80% (desktop). Abaixo disso a moldura fica em
tamanho real dentro de uma região rolável com foco por teclado e rótulo, como as
tabelas. Escolhido por legibilidade: reduzir a moldura de desktop para caber em
390 px levaria o corpo de 14 px a 3,5 px. Medido: nenhum texto do app abaixo de
11,5 px renderizados na página de referência, em nenhuma das quatro larguras.

Na seção 16 do portal, a visão geral põe as três molduras lado a lado na mesma
escala (cerca de 40% em 1440 px), só para leitura; o seletor Tamanho real mostra
as três em 100%, navegáveis e roláveis. `zoom` escala o desenho sem mudar a
largura lógica, então a consulta de contêiner continua vendo 390, 768 e 1180 px.

## 8. iOS e Android

O sistema só toma posição onde a diferença afeta o uso:

| Aspecto | Posição |
| --- | --- |
| Voltar | Ícone da plataforma (chevron no iOS, seta no Android e na web); nome acessível sempre "Voltar". O voltar do sistema nunca é bloqueado e fecha primeiro a folha aberta |
| Título da barra | Alinhado ao início nas duas plataformas: títulos em pt-BR são longos e truncam cedo quando centralizados entre dois botões |
| Rótulos das abas | Sempre visíveis nas duas |
| Folha inferior | Alça e botão Fechar visíveis nas duas |
| Tema | Segue o do sistema por padrão nas duas; o app tem alternador próprio (Sistema, Claro, Escuro) e guarda a escolha, que vale só para o app |

O resto segue a plataforma. O que ainda não foi decidido está na seção 10.

## 9. Dados demonstrativos

Pessoa logada: **Júlia Andrade** (`julia.andrade@trocapontos.com.br`, JA,
Analista de operações). Colegas: Rafael Moura, Larissa Prado, Henrique Sato,
Bruna Teles e Gustavo Lemos, sem e-mail exibido. Gestora que reconhece: Mariana
Sydow, a administradora do ambiente demonstrativo. Pela regra de desempate de
`pessoas-e-emails.md`, a tela não nomeia empresa cliente e o domínio é
`@trocapontos.com.br`. **Pendente:** registrar essas pessoas no mapa de
`pessoas-e-emails.md` (arquivo fora do escopo desta entrega).

No app do gestor a pessoa logada é **Mariana Sydow** (MS), a mesma gestora que
aparece reconhecendo no app do colaborador. A equipe demonstrativa tem 84
pessoas; as três que recebem crédito na folha são Rafael Moura, Larissa Prado e
Henrique Sato.

Prêmios com descrição genérica, sem marca, loja ou fabricante. Saldo inicial de
12.480 pts; "hoje" é 21/09/2026. Resgate e reconhecimento atualizam só a tela
("Resgate registrado nesta demonstração … nenhum pedido real foi criado").
Prazos aparecem como "Informado pelo programa".

Os números batem entre as telas, e a conta foi somada, não estimada:

| Período do extrato | Saldo no início | Créditos | Débitos | Saldo hoje |
| --- | --- | --- | --- | --- |
| 30 dias (7 lançamentos) | 14.430 | +2.600 | −4.550 | 12.480 |
| 90 dias (10 lançamentos) | 11.530 | +5.600 | −4.650 | 12.480 |
| 12 meses (12 lançamentos) | 13.530 | +6.400 | −7.450 | 12.480 |

Os três reconhecimentos enviados no trimestre (12/09, 28/08 e 14/07) são os
mesmos três que a campanha conta ("3 de 5"), e os recebidos de 18/09 e 16/09 são
os mesmos que aparecem em "Reconhecimentos recentes", com o valor igual ao do
extrato. "Ao seu alcance" traz os três prêmios mais caros dentro do saldo (Fone
sem fio, 9.800; Curso de fotografia, 6.000; Vale-experiência gastronômica,
4.500) e a cadeira, de 18.000, é a que fica acima do saldo: faltam 5.520 pts.

No gestor: cota do trimestre 60.000 pts = 36.000 creditados + 24.000 para
distribuir. Aprovar o crédito extra de 2.000 pts leva a 38.000 + 22.000; pagar o
bônus (28 pessoas × 200 pts = 5.600) leva a 41.600 + 18.400. Sempre 60.000.

## 10. Premissas adotadas e decisões pendentes

A responsável pelo projeto respondeu em **22/09/2026**. O que era premissa em
P1, P2, P3, P4, P5, P6 e P8 virou decisão; o resto continua premissa desta
entrega e depende dela.

### Decidido em 22/09/2026

| # | Decisão | O que mudou aqui |
| --- | --- | --- |
| P1 | **Haverá aplicativo para o gestor.** O painel web segue como a experiência principal da gestão no desktop | Seção "Gestão no telefone" na página de referência, com Início, Aprovações e Campanhas; partial `app-gestor.html`; abas próprias do gestor |
| P2 | O app será **nativo, multiplataforma e web responsivo** — a camada vale para os três | Matriz e seção 8 valem para as três formas; `TP:APP` é a especificação do nativo e o CSS da web |
| P3 | As abas atuais do colaborador estão **confirmadas**: Início, Reconhecer, Catálogo, Extrato, com Perfil no avatar | Nada muda no markup; a decisão fecha a pergunta sobre "Pedidos" e "Campanhas" como destinos |
| P4 | **Reconhecer movimenta pontos**, tirados do saldo de quem envia | Escolha de valor na tela Reconhecer, saldo visível, erro de saldo insuficiente, saldo na confirmação, débito no extrato e no Início |
| P5 | **Inter também no app nativo** (e Passo nos títulos) | A pendência de licença de fonte sai da lista |
| P6 | Ícones **próprios**, em traço, não os das plataformas | O conjunto do sistema vale no nativo; o ícone de Voltar continua sendo o da plataforma (P7) |
| P8 | O app **segue o tema do sistema e também oferece alternador**, com padrão "seguir o sistema" e escolha persistida | Controle "Aparência" no Perfil, com Sistema, Claro e Escuro |

### Ainda premissa

| # | Premissa adotada | O que falta decidir |
| --- | --- | --- |
| P7 | Título alinhado ao início nas duas plataformas | Título grande do iOS nas telas de primeiro nível |
| P9 | O app mostra a marca Troca Pontos | Co-branding com a empresa cliente (já pendente, manual p.7) |
| P10 | Resgate confirma em folha inferior com resumo e saldo após o resgate; prazo "informado pelo programa" | **Bloqueado por falta de documento.** A resposta de 22/09/2026 foi "consultar nos termos de uso", e os termos de uso não existem neste repositório nem foram enviados. Enquanto não chegarem, os textos das telas continuam genéricos. Ver abaixo |
| P11 | Campanha "5 reconhecimentos no trimestre" é exemplo | Mecânica real de campanhas |
| P12 | Navegação depois do conteúdo na ordem do DOM (ordem do telefone) | Confirmar com teste de leitor de tela no produto |
| P13 | `TP:APP` fica fora do pacote portátil (`design-system/troca-pontos.css`), como `TP:GRAPHICS` e `TP:PORTAL` | Se a camada de app entra no núcleo distribuído (exige mudar o gerador) |
| P14 | Gestos (arrastar a folha, deslizar linha) não foram implementados; o sistema só exige o caminho visível equivalente | Quais gestos o produto terá |
| P15 | Orientação paisagem do telefone não foi desenhada à parte: a casca a trata pela largura | Se há comportamento próprio em paisagem |

### P10 em detalhe — o que falta para destravar

A pendência é de **documento**, não de desenho. É preciso o arquivo dos **termos
de uso do programa** (o texto vigente, com data de vigência) para alinhar
prazo, entrega e cancelamento nas telas. Dele saem três coisas que hoje estão
genéricas:

| Onde | Texto de hoje | O que o documento precisa dizer |
| --- | --- | --- |
| Detalhe do prêmio e folha de resgate | "Prazo — Informado pelo programa" | O prazo de entrega ou de envio do código: se é fixo, se varia por categoria, se é contado em dias úteis |
| Detalhe do prêmio | "Entrega — Código enviado pelo programa" / "Endereço cadastrado no perfil" / "Comprovante no extrato" | Como cada categoria é entregue de verdade, e o que acontece quando o endereço está desatualizado |
| Depois do resgate (extrato, estado do pedido) | Selos "Em preparação", "Entregue", "Utilizado", "Doação registrada" | Se o resgate pode ser cancelado, por quem, até quando, e se os pontos voltam |

Até o arquivo chegar, nada nas telas promete prazo, e o sistema não inventa
regra: os três campos continuam com os textos genéricos acima. A decisão não
bloqueia a camada — bloqueia só a redação final desses três lugares.

## 11. Verificação

`node scripts/check-design-system.mjs` confere: bloco `TP:APP` delimitado,
antes de `TP:LEGACY-OVERRIDES` e sem hexadecimal; só `--tp-app-*` declarados no
bloco e nenhum fora dele nem no catálogo; limiares do `@container` iguais aos
breakpoints; `.tp-app` como contêiner; componentes presentes; área segura nos
quatro lados; alvo de 44 px; movimento reduzido; hover só sob
`@media (hover: hover)`; foco visível nos controles; página nova com a nota de
telas conceituais e o link para o painel; item no menu Referências; barra de
abas com 3 a 5 destinos e `aria-current`; folha com papel de diálogo modal, Esc,
foco contido e retorno ao acionador; seção 16 entre 15 e 17 e sobrancelhas em
sequência; fazer e evitar; esta documentação.

Depois das decisões de 22/09/2026, o check confere também: o app do gestor
existe, com 3 a 5 destinos e `aria-current`, folha com o mesmo contrato de
diálogo modal e ação em cada linha da fila; a tela Reconhecer tem escolha de
pontos com saldo visível e erro de saldo insuficiente; o extrato traz a
movimentação de reconhecimento enviado e fecha a conta com `saldoInicial`; o
Perfil tem o controle de tema com os três estados; a seção de gestão no telefone
está na página de referência e continua apontando para `index.html`; e esta
documentação registra as decisões com data e a pendência dos termos de uso.