diff --git a/web/src/telas/AoVivo.svelte b/web/src/telas/AoVivo.svelte
index 29feca5..28f557a 100644
--- a/web/src/telas/AoVivo.svelte
+++ b/web/src/telas/AoVivo.svelte
@@ -48,6 +48,8 @@
});
const cfg = $derived(estado.appConfig);
+ // Pontinho do PIR sobre a imagem: verde pulsando nos 8 s depois de cada disparo.
+ const pirAtivo = $derived(!!estado.pir?.ultimo && estado.agora - estado.pir.ultimo * 1000 < 8000);
const transmitindo = $derived(!!cfg?.preview);
const hora = (t: number) => new Date(t).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
@@ -70,6 +72,12 @@
+ {#if estado.pir?.disponivel}
+
+
+ PIR{pirAtivo ? ' · presença' : ''}
+
+ {/if}
@@ -300,6 +308,41 @@
.espaco {
flex: 1;
}
+ .ponto-pir {
+ position: absolute;
+ z-index: 3;
+ left: var(--e-3);
+ top: var(--e-3);
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 4px 10px 4px 7px;
+ border-radius: var(--raio-pill);
+ background: rgb(0 0 0 / 0.55);
+ color: #c7cdd4;
+ font: 600 11px var(--fonte);
+ letter-spacing: 0.04em;
+ pointer-events: none;
+ transition: color var(--transicao);
+ }
+ .ponto-pir .luz {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #6b7280;
+ transition: background var(--transicao);
+ }
+ .ponto-pir.ativo {
+ color: #b8f5c9;
+ }
+ .ponto-pir.ativo .luz {
+ background: #34c759;
+ animation: pulsoPir 1s ease-in-out infinite;
+ }
+ @keyframes pulsoPir {
+ 0%, 100% { box-shadow: 0 0 0 0 rgb(52 199 89 / 0.7); }
+ 50% { box-shadow: 0 0 0 7px rgb(52 199 89 / 0); }
+ }
/* ---------- lista */
.lista {
display: grid;