feat(rosto): iris, boca e sobrancelhas na Matriz; emocoes da tela Rosto vao ao celular

- opcao "iris" (app config, Ajustes e tela Rosto): anel mais escuro com
  pupila que acompanha o olhar, dilata na alegria e contrai no susto; na
  Matriz vira LEDs apagados
- Matriz desenha boca e sobrancelhas em LEDs (antes a tela de pontos
  cobria o SVG); Bloco e Lente passam a obedecer o ajuste de boca
- tela Rosto: boca, sobrancelhas e iris ali mesmo; as teclas de emocao
  agora vao ao celular por padrao ("testar so na previa" e opcional)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/lib/ajustes.svelte.ts

@@ -46,6 +46,7 @@ export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] =
       { chave: 'auto', rotulo: 'Gestos espontâneos', ajuda: 'Pisca e olha em volta sem comando', tipo: 'toggle' },
       { chave: 'boca', rotulo: 'Mostrar boca', tipo: 'toggle' },
       { chave: 'sobrancelhas', rotulo: 'Mostrar sobrancelhas', tipo: 'toggle' },
+      { chave: 'iris', rotulo: 'Mostrar íris', ajuda: 'Pupila que acompanha o olhar (Viva, Bloco e Matriz)', tipo: 'toggle' },
       { chave: 'audio', rotulo: 'Sons no celular', ajuda: 'Bipes do próprio robô', tipo: 'toggle' },
       { chave: 'volume', rotulo: 'Volume dos sons', tipo: 'slider', min: 0, max: 1, passo: 0.05 },
       { chave: 'brilho', rotulo: 'Brilho normal', tipo: 'slider', min: 0.01, max: 1, passo: 0.01 },

web/src/telas/Rosto.svelte

@@ -5,6 +5,7 @@
   } from '../lib/comandos.svelte';
   import RostoPrevia from '../lib/componentes/RostoPrevia.svelte';
   import Toggle from '../lib/componentes/Toggle.svelte';
+  import { salvarApp } from '../lib/ajustes.svelte';
   import { estado } from '../lib/estado.svelte';
 
   let previa = $state<{ ordem: (t: string) => void; legenda: (t: string) => void }>();
@@ -24,8 +25,8 @@
     const c = voz();
     if (c) (window as any).VozRobo.balbuciar(c, FRASE, 0.5);
   }
-  // Por padrão as emoções só aparecem aqui na prévia; ligado, vão também para o celular.
-  let noCelular = $state(false);
+  // As emoções vão para o celular (e a prévia mostra junto); "só na prévia" serve para testar quieto.
+  let soPrevia = $state(false);
 
   const atual = $derived(estado.aparencia.rosto);
   const formatoAtual = $derived(estado.aparencia.formato ?? 'padrao');
@@ -36,8 +37,8 @@
 
   const EMOCOES = ['feliz', 'coracao', 'surpreso', 'triste', 'bravo', 'piscadinha', 'acenar', 'esconder', 'espiar', 'pensar', 'musica', 'dormir', 'acordar'];
   function emocao(g: string) {
-    if (noCelular) gesto(g);
-    else previa?.ordem(g);
+    if (soPrevia) previa?.ordem(g);
+    else gesto(g);
     const c = voz();
     if (c) (window as any).VozRobo.tocar(c, g, 0.5);
   }
@@ -88,10 +89,10 @@
       onchange={(v) => (ouvirAqui = v)}
     />
     <Toggle
-      rotulo="Mandar as emoções também para o celular"
-      ajuda="Desligado, elas aparecem só na prévia"
-      checked={noCelular}
-      onchange={(v) => (noCelular = v)}
+      rotulo="Testar só na prévia, sem mandar ao celular"
+      ajuda="Desligado, cada emoção aparece no celular na hora"
+      checked={soPrevia}
+      onchange={(v) => (soPrevia = v)}
     />
   </section>
 
@@ -130,6 +131,21 @@
     {/if}
   </section>
 
+  <section class="bloco-escolha" aria-labelledby="t-detalhes">
+    <h2 id="t-detalhes">Detalhes do rosto</h2>
+    <div class="detalhes">
+      <Toggle rotulo="Boca" checked={estado.appConfig?.boca !== false} disabled={!estado.appConfig} onchange={(v) => salvarApp({ boca: v })} />
+      <Toggle rotulo="Sobrancelhas" checked={!!estado.appConfig?.sobrancelhas} disabled={!estado.appConfig} onchange={(v) => salvarApp({ sobrancelhas: v })} />
+      <Toggle
+        rotulo="Íris"
+        ajuda={aceitaFormato ? 'Pupila que acompanha o olhar' : 'Vale para Viva, Bloco e Matriz'}
+        checked={!!estado.appConfig?.iris}
+        disabled={!estado.appConfig}
+        onchange={(v) => salvarApp({ iris: v })}
+      />
+    </div>
+  </section>
+
   <section class="bloco-escolha" aria-labelledby="t-cor">
     <h2 id="t-cor">Cor dos olhos</h2>
     <div class="cores">
@@ -356,6 +372,12 @@
     height: 18px;
     border-radius: 6px;
   }
+  .detalhes {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
+    gap: var(--e-2) var(--e-6);
+    max-width: 780px;
+  }
   .cores {
     display: flex;
     flex-wrap: wrap;