ui: badge "sem dispositivo virtual" é beco sem saída — diz o problema e esconde o passo a passo num <details> fechado do rodapé

[caioross]

Contexto

O badge de dispositivos é o primeiro diagnóstico que o usuário novo vê — e é um beco sem saída. Quando não há device virtual, updateLagunaBadge() (static/app.js:311) pinta o badge de vermelho com badge.laguna_none = "⚠ Sem dispositivo virtual (instale VB-CABLE)" (static/i18n.js:145). Estado amarelo (badge.laguna_cable): "VB-CABLE detectado (renomeie para Laguna)".

O problema: o badge é um <span> inerte (static/index.html:20) — sem id de destino, sem clique, sem listener (o único uso de laguna-badge em app.js é o de pintar o texto). E a receita que resolve exatamente esses dois estados — instalar VB-CABLE, renomear "CABLE Output"→Laguna Translator Mic, "CABLE Input"→Laguna Translator Output — está no <details> fechado por padrão do rodapé (static/index.html:254-271), sem id e sem nenhum link apontando pra ele.

Resultado: o app diz ao usuário o que está errado e esconde como resolver a três rolagens de distância. Quem instalou pela primeira vez fica sem os selects de saída virtual e sem caminho óbvio a seguir. Já pagamos essa dívida de "erro visível mas não acionável" na #33 e na #26; aqui é o mesmo padrão, no ponto de entrada.

Proposta

Fazer o badge acionar o passo a passo quando o estado for amarelo ou vermelho:

1. <details> do rodapé ganha id (ex.: setup-guide).
2. Badge vira <button id="laguna-badge" class="badge …"> (mantendo classes/estilo atuais) — ao clicar: details.open = true, scrollIntoView({behavior:'smooth', block:'start'}) e foco no <summary>.
3. O clique só é oferecido nos estados acionáveis (laguna_cable, laguna_none) — em laguna_ok o badge fica informativo (sem role/cursor de ação). Estado devices_error já tem a instrução do 🔄 no próprio texto; não precisa abrir o guia.
4. Texto do badge nos estados acionáveis ganha um sufixo curto e traduzido (ex.: badge.laguna_none_cta = "— clique para ver como resolver"), com paridade PT/EN.

Alternativa mais barata, se o <button> complicar o layout dos badges: manter o <span> e adicionar um link/ícone → como resolver ao lado, dentro do mesmo container.

Acceptance criteria

• Com nenhum device virtual presente (estado vermelho), clicar no badge abre o <details> do rodapé, rola até ele e move o foco pro <summary> — sem recarregar a página.
• Mesmo comportamento no estado amarelo (VB-CABLE detectado, não renomeado).
• No estado verde (laguna_ok) o badge não é anunciado como acionável (sem role="button", sem cursor de ação) e o tooltip atual continua funcionando.
• Acessível por teclado: alcançável por Tab e acionável por Enter/Espaço; aria-expanded reflete o estado do <details>.
• Toda string nova existe em PT e EN — tests_unit/test_i18n_parity.py verde.
• Gate T3: node --check static/app.js static/i18n.js + o teste de paridade.

Dica de abordagem

Só static/ — área de autonomia total (§7.3 do HANDBOOK), sem tocar em backend. O tooltip vem de data-tip-i18n (tip.laguna_badge) e o aria-label de data-aria-i18n, ambos aplicados em static/i18n.js:323-329 — trocar <span> por <button> mantém os dois se os atributos forem preservados. Cuidado com style.css: .badge provavelmente não neutraliza o estilo default de <button> (borda/fundo/fonte) — inclua o reset no seletor.

[caioross]

Resolvido em #67.

O badge segue <span> informativo (no verde não há role de botão nem cursor de ação, e o tooltip continua intacto); a semântica de botão vive num <button> interno visível só nos estados amarelo/vermelho — foi o caminho que atendeu a todos os acceptance criteria sem arriscar o data-tip do estado verde. Clique em qualquer ponto do badge abre o #setup-guide, rola até ele e foca o <summary>; aria-expanded acompanha o <details> nos dois sentidos.

Gate: T1 verde (compileall + imports), T3 verde (node --check + test_i18n_parity.py 2 passed). T2 não se aplica (diff 100% em static/). Os três estados foram verificados no navegador com o servidor da worktree.