Saltar al contenido
Te Tengo · Sistema de diseñov1.0Probar la app

Sistema de diseño de Te Tengo

Tokens, componentes y patrones de la app móvil Te Tengo, para el familiar o cuidador, y de Te Tengo Captura, el programa de Windows que envía el video de la cámara. Cada ejemplo de esta página usa los mismos componentes que las pantallas de la app.

«Cerca de los tuyos, aunque estés lejos.»

Principios

  • Calma bajo estrésUna base neutra y serena. El color de estado aparece solo cuando algo pide atención, y una alerta se entiende en dos segundos: qué pasó, dónde, cuándo y qué hacer ahora.
  • Sostén, no vigilanciaNada recuerda a una cámara de seguridad. Los clips y la vista en vivo son una ilustración de la habitación con el esqueleto de postura. La vista en vivo no se graba y cada acceso queda registrado para toda la familia.
  • El estado nunca va solo en colorCada estado lleva ícono, texto y, cuando hace falta, un patrón: rayado para la pausa, punteado para la desconexión. Una caída y un movimiento inestable no comparten color, ícono ni etiqueta.
  • Legible para baja visiónAtkinson Hyperlegible, cuerpo de 17 px, contraste AA como mínimo y objetivos táctiles de 44 px o más. Pensado también para familiares de 40 a 60 años con presbicia.

Plataformas

Un solo sistema con dos superficies. El escritorio es una extensión: hereda tokens, color, tipografía y reglas de estado, y solo cambia lo propio de una ventana de Windows.

App móvil Te Tengo

Para el familiar o cuidador. Recibe las alertas y muestra el estado de la cámara, la vista en vivo, el historial y la familia. Pantallas de 390 × 844.

10:42

Miércoles 23 de septiembre

Hola, Carmen

RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

Todo tranquilo

Sin eventos hoy. La cámara de la Sala está funcionando.

Cámara

Esta semana

0 caídas1 inestable0 falsas

Te Tengo Captura

Programa de bandeja en la PC de la vivienda, con Windows 11. En la prueba piloto solo muestra el estado de la única webcam USB. Ventana de 960 × 640.

Ventana de estado de Te Tengo Captura: la webcam de la Sala está enviando video y la configuración aparece en solo lectura.

Lo que decide la prueba piloto

El sistema refleja estas decisiones de producto. Cuando un componente depende de una de ellas, su guía lo indica.

Una sola webcam USB
La instala y la configura el equipo del proyecto en la PC de la casa. La app no vincula cámaras: solo muestra la cámara instalada y permite cambiar el nombre de su habitación.
Vista en vivo cuando quieras
Cualquier familiar vinculado puede abrirla en cualquier momento, no solo con una alerta. Cada acceso queda en el registro de accesos.
Consentimiento con vista en vivo
El consentimiento informado incluye la cláusula de vista en vivo. Sin consentimiento, la cámara queda instalada, pero no envía video.
Alerta en menos de 10 s
La notificación de caída llega en menos de 10 segundos, con la habitación y la hora.
Confirmada a los 30 s
Si la persona sigue en el suelo 30 segundos, la caída queda confirmada. Si se pone de pie, avisamos «Rosa se levantó».
Detección no confiable
Si durante más de 5 minutos la cámara no ve bien a la persona, avisamos y pedimos revisar la luz y el encuadre.

Marca

Te Tengo es lo que dices cuando sostienes a alguien que se cae. El nombre es una promesa de sostén, no de vigilancia: la app no mira todo el tiempo, llega cuando hace falta. Siempre se escribe en dos palabras, con mayúscula inicial en ambas.

El símbolo dibuja esa escena con la inicial del nombre. Se construye sobre una retícula de 120 × 120 y solo tiene tres trazos.

Travesaño: dos brazos abiertos
Se curva hacia arriba para recibir. Trazo de 13 con extremos redondeados: M22 38 Q60 80 98 38.
Punto: la persona
Círculo de radio 11 en 60, 38. Nunca toca los brazos.
Fuste: el apoyo
La sostiene desde abajo: M60 60 V96, trazo de 13.

Versiones

Seis archivos SVG autónomos en 05-prototipos/marca/. El nombre va trazado en curvas desde Atkinson Hyperlegible Next ExtraBold (800); «Captura», en SemiBold (600).

Espacio libre y tamaño mínimo

Alrededor del símbolo o del logotipo deja libre, como mínimo, el diámetro del punto: 22 unidades de 120, un 18 % de la altura del símbolo. Ningún texto, borde ni imagen entra en esa zona.

Te Tengo · símbolo
24 pxSímbolo solo
Te Tengo
16 pxÍcono en la bandeja
Te Tengo
20 px de altoLogotipo horizontal

Por debajo de 24 px, usa el ícono de la app en lugar del símbolo: se lee hasta 16 px en la bandeja del sistema.

Usos incorrectos

Símbolo morado sobre un fondo oscuro. Sobre oscuro va la versión blanca.
El punto toca los brazos. El hueco es la persona recibida, no aplastada.
Encerrar el símbolo en un círculo o en otra forma que no sea el ícono de la app.
Degradados, sombras, contornos o efectos 3D.
Combinar el símbolo con cámaras, ojos, lentes o cualquier elemento de vigilancia.
Ver la alerta
Usar el coral o el durazno en botones, textos de interfaz o estados.
Te
Tengo
Separar «Te» y «Tengo» en dos líneas o cambiar su orden.

Colores de marca

El morado es a la vez marca y acción principal. El coral y el durazno son solo de marca: el punto y «Tengo». Nunca marcan un estado ni una alerta, porque el rojo de caída y el ámbar de movimiento inestable están reservados para eventos reales.

#4A2A85

Morado de marca

Trazos y «Te» sobre claro; fondo del ícono y del arranque. --morado

#E8765A

Coral

Punto y «Tengo» sobre claro. --coral

#FFB59C

Durazno

Punto y «Tengo» sobre morado u oscuro. --durazno

#FFFFFF

Blanco

Trazos y «Te» sobre morado u oscuro.

#4F4766

Tinta 2

«Captura» sobre claro. Sobre oscuro, blanco al 80 %.

Lema

Cerca de los tuyos, aunque estés lejos.

Acompaña al símbolo en la pantalla de arranque. No se usa como titular de otras pantallas ni en las alertas.

Pantalla de arranque

10:42

Cerca de los tuyos, aunque estés lejos.

Cuadro final del arranque

Fondo morado a pantalla completa. Se ve al abrir la app y al cerrar sesión, nunca antes de una alerta. Dura unos 2,2 s y se omite tocando la pantalla.

  1. 0,06 sLos brazos se abren desde el centro.
  2. 0,32 sEl punto cae…
  3. 0,74 s…y los brazos lo reciben con un leve vaivén.
  4. 0,92 sSe dibuja el fuste.
  5. 1,04 sAparecen «Te Tengo» y el lema.

Solo anima transform, opacity y stroke-dashoffset, así que no mueve el diseño. Con prefers-reduced-motion se muestra el cuadro final quieto. Te Tengo Captura usa la misma secuencia en una ventana de 480 × 300 con barra de progreso.

Color

Una base neutra y serena en la que el color de estado solo aparece cuando algo pide atención. Estos son todos los tokens de color del sistema.

Tokens

Neutros

La base serena: fondo, tarjetas, tres tintas de texto y dos líneas.

  • --ground#EEF0F4Fondo de la app
  • --ground-2#E4E6ECFondo secundario: segmentos, botón deshabilitado, aviso neutro
  • --card#FFFFFFTarjetas, listas y hojas
  • --ink#221A38Texto principal; aviso breve y botón tinta
  • --ink-2#4F4766Texto secundario (.t-small)
  • --ink-3#655D7ATexto terciario y metadatos (.t-meta)
  • --line#D9D7E1Divisores entre filas
  • --line-2#C7C3D3Bordes de campos, chips y botón secundario

Marca y acción

El morado guía la acción principal fuera de las alertas. El coral y el durazno son solo de marca.

  • --morado#4A2A85Marca y acción principal fuera de las alertas
  • --morado-press#3A1F6CBotón principal con el cursor encima o presionado
  • --morado-soft#ECE7F6Selección, pestaña activa, aviso informativo
  • --morado-ink#3B2270Texto morado sobre claro: enlaces, botón secundario
  • --focus#4A2A85Anillo de foco visible (3 px)
  • --coral#E8765ASolo marca: punto y «Tengo» sobre claro
  • --durazno#FFB59CSolo marca: punto y «Tengo» sobre morado

Caída

Severidad alta. Solo para una caída real: alerta a pantalla completa, etiqueta y franja.

  • --caida#BF2A1BCaída: pantalla de alerta, etiqueta, franja, botón de peligro
  • --caida-deep#951D11Botón de peligro con el cursor encima
  • --caida-soft#FBE8E5Fondo del aviso de error y anillo del campo con error
  • --caida-ink#9C2012Texto rojo sobre claro: errores, «Sigue en el suelo»

Movimiento inestable

Severidad media. Distinto de la caída en color, ícono (rombo) y etiqueta.

  • --inestable#F1B42FMovimiento inestable: pantalla de alerta, etiqueta y franja
  • --inestable-deep#D99A12Rombo del registro y barra del resumen
  • --inestable-soft#FDF3DBFondo del sello «Activa» de severidad media
  • --inestable-ink#6E4B00Texto ámbar oscuro sobre claro

Calma

Todo tranquilo, cámara en línea, recuperación y pasos completados.

  • --calma#1C7A4CEstado normal, interruptor activo, pasos completados
  • --calma-soft#E2F2E9Fondo de «En línea» y del aviso de éxito
  • --calma-ink#145C39Texto verde sobre claro

Aviso

Problemas no urgentes: permisos, conexión, cámara desconectada, detección no confiable.

  • --aviso#8F5400Avisos no urgentes: desconectada, detección no confiable, aumento semanal
  • --aviso-soft#FBEFD9Fondo de los avisos no urgentes

Pausa

Cámara en pausa o detenida. Siempre con el rayado diagonal.

  • --pausa#4E5B74Cámara en pausa (texto e ícono)
  • --pausa-soft#E6E9F0Fondo rayado de la pausa
El rojo y el ámbar son para eventos realesLos fondos, bandas y pantallas en rojo o ámbar lleno solo aparecen ante una caída o un movimiento inestable real. Los errores de formulario usan el rojo únicamente en el borde y el mensaje del campo.
Caída e inestable nunca comparten color, ícono ni etiquetaCaída: rojo, figura en el suelo, «Caída» y marca cuadrada. Inestable: ámbar, rombo con trazo quebrado, «Inestable» y marca en rombo. Si un movimiento inestable termina en caída, la alerta cambia a caída.

Haz

  • Acompaña cada color de estado con un ícono y un texto.
  • Usa las variantes -ink para el texto sobre las -soft.
  • Usa el rayado de --pausa para la pausa y el punteado de --aviso para la desconexión.

Evita

  • Usar el rojo o el ámbar para decorar o destacar contenido.
  • Usar el coral o el durazno en botones, textos o estados.
  • Mostrar un estado solo con color, sin ícono ni texto.

Contraste

Pares reales de texto y fondo de los componentes. De 27 pares de texto, 17 alcanzan AAA y 10 AA; ninguno queda por debajo de AA.

MuestraParTexto / fondoContrasteNivel
AaTexto principal
Títulos y cuerpo sobre tarjetas		--ink / --card16,50:1AAA
AaTexto principal
Títulos y cuerpo sobre el fondo		--ink / --ground14,46:1AAA
AaTexto secundario
.t-small, descripciones		--ink-2 / --card8,66:1AAA
AaTexto terciario
.t-meta, .sub de las filas		--ink-3 / --card6,18:1AA
AaTexto terciario
Metadatos sobre el fondo		--ink-3 / --ground5,41:1AA
AaBotón principal
.btn-primary		#FFFFFF / --morado10,71:1AAA
AaEnlace y botón secundario
.link, .btn-secondary		--morado-ink / --card12,74:1AAA
AaSelección y aviso informativo
.tab.sel, .notice.info, .choice.sel		--morado-ink / --morado-soft10,51:1AAA
AaTitular de la alerta de caída
.alert-h (34 px, 800) · texto grande		#FFFFFF / --caida5,90:1AAA
AaDatos de la alerta de caída
.slot .v sobre la franja oscurecida (21 px, 800) · texto grande		#FFFFFF / rojo oscurecido7,64:1AAA
AaEtiquetas de la alerta de caída
.slot .k (13 px, 700)		#FFFFFF / rojo oscurecido7,64:1AAA
AaCaída sobre blanco
.btn-white, .alert-conf		--caida-ink / #FFFFFF7,99:1AAA
AaAviso de error
.notice.err, .field-msg con error		--caida-ink / --caida-soft6,76:1AA
AaAlerta de movimiento inestable
.drench.inestable, .strip.med, .sev.inestable		--ink / --inestable8,89:1AAA
AaSello de severidad media
.stamp.activa.med		--inestable-ink / --inestable-soft7,12:1AAA
AaEn línea y éxito
.cam-online, .notice.ok		--calma-ink / --calma-soft6,91:1AA
AaEstado «En línea»
.state-txt.online, .trend.down		--calma-ink / --card8,02:1AAA
AaDesconectada y no confiable
.state-txt.offline, .trend.up		--aviso / --card6,11:1AA
AaÍcono de cámara desconectada
.cam-offline		--aviso / --aviso-soft5,37:1AA
AaAviso de advertencia
.notice.warn		#5E3700 / --aviso-soft9,12:1AAA
AaEn pausa
.state-txt.paused		--pausa / --card6,83:1AA
AaÍcono de cámara en pausa
.cam-paused (fondo rayado)		--pausa / --pausa-soft5,62:1AA
AaAviso neutro
.notice.neutral, .seg sin elegir		--ink-2 / --ground-26,94:1AA
AaAviso breve (toast)
.toast, .btn-ink, .order-n		#FFFFFF / --ink16,50:1AAA
AaLema del arranque
.sp-tag (18 px, 600) · texto grande		#E4DAF4 / --morado7,97:1AAA
AaTexto de la vista en vivo
Explicación bajo la vista en vivo		#D9D3E6 / #17121F12,61:1AAA
AaTexto de ejemplo del campo
.input::placeholder		#77708A / #FFFFFF4,70:1AA
BordeBorde de campo, chip y botón secundario
Límite del control (no texto)		--line-2 / #FFFFFF1,72:1Menos de 3:1
BordeAnillo de foco
:focus-visible, 3 px (no texto)		--focus / #FFFFFF10,71:1Cumple 3:1
AaBotón deshabilitado
.btn[disabled]		#8A849A / --ground-22,88:1Exento
Calculado a partir de los tokens de color. Texto normal: AA desde 4,5:1 y AAA desde 7:1. Texto grande (24 px, o 18,66 px en negrita): AA desde 3:1 y AAA desde 4,5:1. Bordes y foco: 3:1. Los controles deshabilitados están exentos.

Tipografía

Una sola familia, pensada para leer bien con baja visión y bajo estrés. Distingue caracteres que se confunden, como 1, l e I, o 0 y O.

Interfaz

Aa
1 l I · 0 O · 8 B · rn m

Atkinson Hyperlegible Next, pesos 400 a 800. Diseñada por el Braille Institute para lectores con baja visión. Se usa en toda la interfaz, del cuerpo a los titulares de alerta.

Horas y datos

10:42
0123456789 · 07:55

Atkinson Hyperlegible Mono, con cifras tabulares (.mono). Solo para horas, duraciones y números que se comparan en columna, nunca como adorno.

Escala de la app móvil

Estilos de texto del sistema. El cuerpo base es de 17 px con interlineado 1,45, y ningún texto de lectura baja de 13 px.

Rosa pudo haberse caído

.alert-h · Titular de alerta
34px · 800 · 1.08 · -.02em
Atkinson Hyperlegible Next

Hola, Carmen

.t-title · Título de pantalla
28px · 800 · 1.15 · -.015em
Atkinson Hyperlegible Next

Tu cámara ya está lista

.t-h2 · Título de sección o tarjeta
22px · 800 · 1.2 · -.01em
Atkinson Hyperlegible Next

Vista en vivo

.sec-h · Encabezado de grupo
18px · 800 · 1.45 (heredado)
Atkinson Hyperlegible Next

Qué hacer ahora

.t-h3 · Subtítulo
18px · 700 · 1.3
Atkinson Hyperlegible Next

Si detectamos una caída o un movimiento inestable, te llegará un aviso aunque tengas la app cerrada.

.t-body · Cuerpo
17px · 400 · 1.45 (heredado)
Atkinson Hyperlegible Next

Nombre de la habitación

.label · Etiqueta de campo
15px · 700 · 1.45 (heredado)
Atkinson Hyperlegible Next

Cada acceso queda registrado: quién la vio, cuándo y cuánto tiempo.

.t-small · Texto secundario
15px · 400 · 1.4
Atkinson Hyperlegible Next

Las alertas anteriores conservan el nombre que tenían.

.t-meta · Metadatos
14px · 400 · 1.35
Atkinson Hyperlegible Next

10:42 · 07:55 · 00:37

.mono · Horas y datos
17px (heredado) · 400 · 1.45 (heredado) · -.01em
Atkinson Hyperlegible Mono

Escala de escritorio

Te Tengo Captura usa una escala más compacta, propia de una ventana: título de inicio de 34 px, cuerpo de 15 a 16 px y datos secundarios de 13,5 px.

ClaseUsoTamañoPesoInterlineadoMuestra
.t-displayTítulo de inicio34px8001.1Sala · En línea
.t-titleTítulo26px8001.15Sala · En línea
.t-h2Título de tarjeta18px8001.25Sala · En línea
.t-leadEntrada16px4001.5Sala · En línea
.t-smallTexto secundario14.5px4001.45Sala · En línea
.t-metaDatos secundarios13.5px4001.4Sala · En línea
.winCuerpo de la ventana15px4001.45Enviando video
Valores propios de Te Tengo Captura.

Haz

  • Mantén el cuerpo en 16 px o más en la app móvil.
  • Usa la negrita 800 para titulares y la 700 para etiquetas y botones.
  • Equilibra los titulares largos (text-wrap: balance).

Evita

  • Usar la Mono para dar un aire «técnico»: solo va en horas y datos.
  • Escribir textos de interfaz en mayúsculas sostenidas, salvo las etiquetas de severidad y los sellos.
  • Bajar de 13 px, ni siquiera en metadatos.

Forma, espaciado y elevación

Formas redondeadas y amables, sombras suaves y movimiento breve. Nada rígido ni técnico.

Radios

--r-card · 22px

Tarjetas y listas

--r-ctl · 16px

Botones, campos y opciones

14 px

Botón pequeño, segmentos, ícono de fila

18 px

Avisos, clips y alerta de estado

28 px arriba

Hojas inferiores

44 px de alto, 22 px

Chips en forma de píldora

En Te Tengo Captura los radios se ajustan a la densidad de escritorio: tarjetas de 18px, controles de 12px y ventana de 10px.

Espaciado

Una escala de 4 en 4 con utilidades .mt8 a .mt24. Las pantallas tienen 20 px de margen lateral y las tarjetas, 18 px de relleno. Los grupos relacionados van juntos (10 a 12 px) y las secciones se separan más (28 px sobre cada .sec-h).

4 px
8 px
12 px
16 px
20 px
24 px
28 px

Elevación

--shadow-1

Tarjetas y listas en reposo. 0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05)

--shadow-2

Hojas, diálogos y avisos breves. 0 8px 28px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.08)

Contorno

Botón secundario, campos y tarjetas dentro de otra superficie: borde interior de 1,5 px, sin sombra.

Movimiento

Todas las transiciones usan --ease: cubic-bezier(.16,1,.3,1): arrancan rápido y frenan suave. El movimiento comunica un cambio de estado, nunca decora.

  • 150 ms: botones (fondo y escala al presionar).
  • 200 a 220 ms: pestañas, interruptores y cambio de pantalla.
  • 280 a 300 ms: hojas, diálogos y avisos breves.
  • 550 ms: la alerta inunda la pantalla desde arriba, el único momento enfático.

Con prefers-reduced-motion: reduce las entradas pasan a un fundido de 150 ms, la inundación de la alerta y el esqueleto animado se desactivan y el arranque muestra su cuadro final.

Objetivos táctiles

Todo lo que se toca mide al menos 44 px de alto; los botones principales, 56 px.

Botón—
Botón pequeño—
Botón de ícono—
Chip—
Segmentos—
Fila de lista—

Iconografía

Un solo juego de 52 íconos dibujados a mano: retícula de 24 × 24, trazo de 2, extremos y uniones redondeados, y currentColor para heredar el color del texto. Toca un ícono para copiar su nombre.

Íconos de estado

Los íconos con borde morado en la cuadrícula llevan significado de estado y siempre acompañan a un texto. No se reutilizan para otra cosa.

ÍconoNombreSignifica
fallCaída
unsteadyMovimiento inestable
standSe levantó
camCámara en línea
wifiOffDesconectada
pauseEn pausa
lockDetenida o solo lectura
eyeOffDetección no confiable
eyeVista en vivo y registro de accesos
shieldConsentimiento y privacidad

Tamaños en uso: 18 px en mensajes de campo, 22 px en avisos y botones, 24 px en filas y barras, 26 px en la barra de pestañas y 28 px en la tarjeta de estado.

Haz

  • Marca cada ícono con aria-hidden="true" y pon el significado en el texto de al lado.
  • Da a un botón de solo ícono un aria-label que nombre la acción.

Evita

  • Usar emojis o caracteres Unicode como íconos.
  • Usar el ícono de caída para un movimiento inestable, o al revés.

Componentes

Cada ejemplo usa el HTML y las clases de la app. Los teléfonos muestran pantallas completas.

Botones

Un botón nombra la acción que hace. Hay una sola acción principal por pantalla; en una alerta, la principal es llamar.

Variantes
Pequeño, tinta, enlace y de ícono

¿Ya tienes cuenta?

Sobre la alerta de caída
Llamar a Rosa · 987 654 321
Sobre la alerta de movimiento inestable
Llamar a Rosa · 987 654 321

Cuándo usarlo

  • Principal (morado): la acción que completa la tarea.
  • Secundario: alternativas y acciones de apoyo.
  • Fantasma: posponer u omitir («Ahora no»).
  • Peligro: solo acciones destructivas, siempre con confirmación.

Variantes y estados

  • Alto de 56 px (48 px el fantasma, 44 px el pequeño) y ancho completo en el móvil.
  • Con cursor encima, presionado (escala 0,985), deshabilitado y cargando («Un momento…» con aria-busy).
  • Blanco y translúcido sobre rojo; tinta y secundario sobre ámbar.

Accesibilidad

  • Foco visible de 3 px en morado; en blanco dentro de las alertas.
  • Los botones de solo ícono llevan aria-label («Volver», «Cerrar la alerta y volver al inicio»).
  • Texto de 18 px en negrita.

Haz

  • Escribe la acción completa: «Llamar a Rosa · 987 654 321», «Registrar consentimiento».
  • Pon la acción principal primero y sola.

Evita

  • Dos botones principales juntos.
  • Usar el botón de peligro para algo que no borra ni retira nada.
  • «Aceptar» u «OK» sin decir qué pasa.
Ver el HTML.btn

<button class="btn btn-primary">…</button>

<button class="btn btn-primary" type="button">Registrar consentimiento</button>
<button class="btn btn-secondary" type="button"><!-- ic('pin') -->Cambiar el nombre</button>
<button class="btn btn-primary" type="button" disabled>Volver al inicio</button>
<div class="drench caida ds-pad">
  <div class="btn-row">
    <a class="btn btn-white" href="#componentes" onclick="return false">
      <!-- ic('phone') -->
      Llamar a Rosa · 987 654 321
    </a>
    <button class="btn btn-onred" type="button"><!-- ic('video') -->Ver en vivo · Sala</button>
  </div>
</div>

Campos de texto

La etiqueta siempre está visible encima del campo. La ayuda va debajo y el error la reemplaza diciendo qué falta y cómo resolverlo.

Con ayuda

Elige una sugerencia o escribe otro nombre.

Con error

Escribe el nombre de la habitación.

Contraseña

Mínimo 8 caracteres, con al menos un número.

Deshabilitado (solo lectura)

Es el correo al que llegó la invitación.

Área de texto

Cuándo usarlo

  • Datos que la persona escribe: nombres, correo, contraseña, dirección, notas.
  • Si hay pocas opciones conocidas, ofrece chips de sugerencia debajo (como en el nombre de la habitación).

Variantes y estados

  • Alto de 56 px y borde de 1,5 px.
  • Foco: borde morado y anillo --morado-soft.
  • Error: borde y anillo rojos, ícono de advertencia y mensaje en negrita.
  • Deshabilitado: fondo --ground y borde punteado.

Accesibilidad

  • <label for> ligado al campo.
  • Con error: aria-invalid="true" y aria-describedby al mensaje.
  • El error no depende del color: lleva ícono y texto.
  • Mostrar la contraseña con un botón de ícono etiquetado.

Haz

  • Mensajes que dicen qué hacer: «Escribe el nombre de la habitación.»
  • Validar al enviar, no mientras la persona escribe.

Evita

  • Usar el texto de ejemplo como etiqueta.
  • Mensajes genéricos como «Campo inválido».
Ver el HTML
<div class="field">
  <label class="label" for="ds-f1">Nombre de la habitación</label>
  <div class="input-wrap">
    <input class="input" id="ds-f1" name="ds-f1" type="text" value="Sala comedor" placeholder="Ej.: Sala comedor">
  </div>
  <p class="hint">Elige una sugerencia o escribe otro nombre.</p>
</div>
<div class="field err">
  <label class="label" for="ds-f2">Nombre de la habitación</label>
  <div class="input-wrap">
    <input class="input" id="ds-f2" name="ds-f2" type="text" value="" placeholder="Ej.: Sala comedor" aria-invalid="true" aria-describedby="ds-f2-m">
  </div>
  <p class="field-msg" id="ds-f2-m">
    <!-- ic('warn') -->
    <span>Escribe el nombre de la habitación.</span>
  </p>
</div>

Chips, opciones, casillas, segmentos e interruptores

Controles para elegir. Todos son interactivos en esta página.

Opciones (una sola)
Casillas del consentimiento
Chips de sugerencia
Segmentos
Interruptores
CaídasSiempre activas. No se pueden silenciar.
Movimientos inestablesSeveridad media
Fin de una pausaCuando la cámara se reactiva sola

Cuándo usarlo

  • Opciones: elegir una entre 2 a 5 alternativas con explicación.
  • Casillas: aceptar algo de forma explícita.
  • Chips: sugerencias rápidas y filtros.
  • Segmentos: cambiar de vista dentro de una pantalla.
  • Interruptores: activar o desactivar un aviso al instante.

Variantes y estados

  • Opción elegida: borde morado y fondo --morado-soft; con subtítulo opcional (.sub).
  • Chip elegido: fondo tinta con texto blanco.
  • Interruptor activo en verde; los que no se pueden apagar (caídas) no cambian.
  • Solo lectura: opciones al 72 % de opacidad y sin interacción.

Accesibilidad

  • Radios reales dentro de <label>.
  • Casillas con role="checkbox", aria-checked y Espacio o Intro.
  • Chips con aria-pressed; segmentos con role="tab" y aria-selected.
  • Interruptores con role="switch" y aria-checked.
Ver el HTML
<div class="">
  <label class="choice" data-act="escMin" data-arg="3">
    <input type="radio" name="ds-esc">
    <span class="dot"></span>
    <span>3 minutos</span>
  </label>
  <label class="choice sel" data-act="escMin" data-arg="5">
    <input type="radio" name="ds-esc" checked>
    <span class="dot"></span>
    <span>5 minutos<span class="sub">Predeterminado</span></span>
  </label>
  <label class="choice" data-act="escMin" data-arg="10">
    <input type="radio" name="ds-esc">
    <span class="dot"></span>
    <span>10 minutos</span>
  </label>
</div>
<div class="chips mb16" style="margin-top:-6px" aria-label="Sugerencias">
  <button type="button" class="chip" data-act="roomName" data-arg="Sala" aria-pressed="false">
    Sala
  </button>
  <button type="button" class="chip sel" data-act="roomName" data-arg="Sala comedor" aria-pressed="true">
    Sala comedor
  </button>
  <button type="button" class="chip" data-act="roomName" data-arg="Comedor" aria-pressed="false">
    Comedor
  </button>
  <button type="button" class="chip" data-act="roomName" data-arg="Dormitorio" aria-pressed="false">
    Dormitorio
  </button>
  <button type="button" class="chip" data-act="roomName" data-arg="Cocina" aria-pressed="false">
    Cocina
  </button>
</div>

Tarjetas y listas

La tarjeta de estado resume cómo está la persona cuidada, con una franja superior del color del estado. Las listas agrupan filas tocables o informativas.

Tarjeta de estado · todo tranquilo
RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

Todo tranquilo

Sin eventos hoy. La cámara de la Sala está funcionando.

Cabecera de la cámara con datos

Sala

En línea

Última señal10:42 · hace 6 s
Conectada aPC de la casa
Instalada el3 ago 2026
Instalada porEquipo del proyecto
Detección de caídasActiva
Lista de ajustes
Filas del historial
Marcas, etiquetas, sellos y roles
CaídaInestableFalsa alarma
CaídaInestable
ActivaActivaAtendidaFalsa alarma
PrincipalSecundarioPendienteCHLHRH

Cuándo usarlo

  • Tarjeta de estado: arriba del inicio, una por persona cuidada.
  • Lista: navegación a otra pantalla (con chevrón) o datos fijos (.row.static).
  • Pares clave–valor (.kv): datos de la cámara y de la constancia.

Variantes y estados

  • Franja de 8 px: calma, caída, inestable, aviso (discontinua), pausa (rayada) y morado.
  • Fila con ícono (.ico), avatar o marca; fila de peligro en rojo.
  • Sellos: Activa, Atendida, Falsa alarma (tachado).

Accesibilidad

  • Las filas tocables son <button> de al menos 64 px.
  • El título de la fila es el nombre accesible; el chevrón es decorativo.
  • La franja de color siempre se acompaña del título del estado.
Ver el HTML
<div class="card">
  <div class="band calma"></div>
  <div class="card-pad">
    <div class="flex">
      <span class="avatar rosa">RH</span>
      <span class="grow">
        <b style="font-size:17px">Rosa Huamán, 78 años</b>
        <span class="t-meta" style="display:block">Jr. Los Pinos 482, San Miguel</span>
      </span>
    </div>
    <div class="flex mt16" style="align-items:flex-start;color:var(--calma-ink)">
      <!-- ic('sun', 'style="width:28px;height:28px;flex:none"') -->
      <div>
        <p class="t-h2" style="color:var(--ink)">Todo tranquilo</p>
        <p class="t-small mt8">Sin eventos hoy. La cámara de la Sala está funcionando.</p>
      </div>
    </div>
  </div>
</div>

Estados de la cámara

La única cámara de la vivienda se muestra con ícono, texto y un trazo propio en cada estado. Nunca solo con color.

Fila de la cámara en el inicio
EstadoForma
En líneaVerde, cámara, hora de la última señal
DesconectadaÁmbar, wifi tachado, contorno punteado
Detección no confiableÁmbar, ojo tachado, contorno punteado, «revisa la luz y el encuadre»
En pausaGris azulado rayado, pausa, hora de reactivación
DetenidaGris, candado, sin consentimiento

Cuándo usarlo

  • En el inicio (sección «Cámara»), en el detalle de la cámara y en Ajustes.
  • La fila lleva al detalle, con «Qué revisar en la casa» cuando hay un problema.

Variantes y estados

  • En línea, desconectada, detección no confiable, en pausa y detenida sin consentimiento.
  • La cámara la instala y la configura el equipo del proyecto: la app no tiene un estado de conexión pendiente.

Accesibilidad

  • El estado se lee en texto (.state-txt) antes del detalle.
  • Desconectada y no confiable comparten el ámbar, pero no el ícono ni el texto.
  • Cada problema dice qué revisar: el cable, la PC, el internet, la luz o el encuadre.
Ver el HTML
<button class="row" data-act="openCam" data-arg="c1">
  <span class="camline cam-offline"><!-- ic('wifiOff') --></span>
  <span class="grow">
    <span class="ttl">Sala</span>
    <span class="sub">
      <span class="state-txt offline">Desconectada</span>
      · desde las
      <span class="mono">10:31</span>
    </span>
  </span>
  <!-- ic('chevR', 'class="chev"') -->
</button>

Avisos

Mensajes dentro de la pantalla que no bloquean. El tono lo da el tipo; el título dice qué pasa y el texto, qué significa o qué hacer.

Éxito · ok
Notificaciones activadasRecibirás las alertas aunque tengas la app cerrada.
Información · info
Ejemplo: si llega una alerta a las 10:42 y nadie la atiende, avisamos a Luis a las 10:47.
Advertencia · warn
No recibimos señal desde las 10:31Mientras siga desconectada no detectamos caídas en la Sala. Te avisaremos cuando vuelva.
Activa las notificacionesEstán desactivadas en tu celular. Sin ellas no te enterarás de una caída cuando tengas la app cerrada.
Error o bloqueo · errNeutro · neutral
En pausa hasta las 11:42No se detectan caídas y no se puede ver en vivo. Se reactivará sola a esa hora y te avisaremos.
Barra sin internet
Tu celular no tiene internetLas alertas llegarán cuando vuelvas a conectarte. Si no atiendes una a tiempo, avisamos a tu contacto secundario.

Cuándo usarlo

  • Permisos, conexión, cámara, consentimiento y explicaciones de una regla.
  • Para un evento real de caída o inestable no se usa un aviso: se usa la alerta.

Variantes y estados

  • ok, info, warn, err y neutral, con o sin título y con una acción opcional (.notice-act).
  • La barra sin internet (.offline-bar) va arriba en las pantallas con pestañas.

Accesibilidad

  • role="alert" para err y role="status" para los demás: el lector de pantalla los anuncia.
  • Ícono con aria-hidden; el título lleva el significado.
Ver el HTML
<div class="notice warn" role="status">
  <!-- ic('wifiOff') -->
  <div class="grow">
    <b>No recibimos señal desde las 10:31</b>
    <span>
      Mientras siga desconectada no detectamos caídas en la Sala. Te avisaremos cuando vuelva.
    </span>
  </div>
</div>

Barra de pestañas

Cuatro destinos fijos abajo: Inicio, Historial, Familia y Ajustes. Es la misma para la titular y para un familiar invitado.

Inicio seleccionado
Con una alerta activa

Cuándo usarlo

  • En las cuatro pantallas principales. Las pantallas de detalle y las alertas no la muestran.

Variantes y estados

  • Pestaña elegida: ícono dentro de una píldora --morado-soft y texto morado.
  • Insignia roja «1» en Historial mientras hay una alerta activa.

Accesibilidad

  • <nav aria-label="Secciones"> y aria-current="page" en la pestaña actual.
  • La insignia tiene aria-label="1 alerta activa".
  • Cada pestaña mide 56 px de alto.
Ver el HTML
<nav class="tabbar" aria-label="Secciones">
  <button class="tab" data-tab="inicio">
    <span class="pill"><!-- ic('home') --></span>
    Inicio
  </button>
  <button class="tab sel" data-tab="historial" aria-current="page">
    <span class="pill"><!-- ic('hist') --></span>
    Historial
    <span class="badge" aria-label="1 alerta activa">1</span>
  </button>
  <button class="tab" data-tab="familia">
    <span class="pill"><!-- ic('users') --></span>
    Familia
  </button>
  <button class="tab" data-tab="ajustes">
    <span class="pill"><!-- ic('sliders') --></span>
    Ajustes
  </button>
</nav>

Franja de alerta activa

Mientras una alerta sigue sin marcar, una franja arriba de las pantallas principales lleva de vuelta a ella.

Posible caída
Caída confirmada
Movimiento inestable

Cuándo usarlo

  • Inicio, Historial, Familia y Ajustes mientras haya una alerta activa.

Variantes y estados

  • Roja para caída («Posible caída» o «Caída confirmada»), ámbar con texto tinta para movimiento inestable.
  • Siempre con la hora desde la que está activa.

Accesibilidad

  • Es un <button>: se enfoca y se activa con el teclado.
  • Ícono distinto por tipo (figura en el suelo o rombo).
Ver el HTML
<button class="strip" data-act="openActive">
  <!-- ic('fall') -->
  <span class="grow">
    <b>Posible caída en la Sala</b>
    Alerta activa desde las
    <span class="mono">10:42</span>
  </span>
  <!-- ic('chevR') -->
</button>

Alerta a pantalla completa

La alerta inunda la pantalla con el color de su severidad. Arriba, tres datos de lectura inmediata; debajo, qué hacer, el clip y el registro.

10:42

Alerta de caída · Urgente

Rosa pudo haberse caído

Comprobando si sigue en el suelo

HabitaciónSala
Hora10:42
Haceinstantes

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321

Estamos comprobando si Rosa se levanta. Si sigue en el suelo 30 segundos, confirmaremos la caída. Si se pone de pie, te avisaremos.

Si nadie la marca como atendida antes de las 10:47, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaSi contesta, pregúntale si puede levantarse sola.
  2. 2Si no contesta, pide ayuda cercaA un vecino o a quien esté más cerca de San Miguel. Emergencias: SAMU 106 o Bomberos 116.
  3. 3Marca la alertaCuando esté atendida, para que la familia lo sepa.

Clip del evento

Sala · 10:42
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:42Caída detectada en la Sala
  2. 10:42Aviso enviado a Carmen (principal) y Luis, 6 s después de la caída
Caída · comprobando si sigue en el suelo
10:43

Alerta de caída · Urgente

Rosa se cayó y sigue en el suelo

Sigue en el suelo · confirmada

HabitaciónSala
Hora10:42
Hace1 min

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321

Si nadie la marca como atendida antes de las 10:47, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaSi contesta, pregúntale si puede levantarse sola.
  2. 2Si no contesta, pide ayuda cercaA un vecino o a quien esté más cerca de San Miguel. Emergencias: SAMU 106 o Bomberos 116.
  3. 3Marca la alertaCuando esté atendida, para que la familia lo sepa.

Clip del evento

Sala · 10:42
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:42Caída detectada en la Sala
  2. 10:42Aviso enviado a Carmen (principal) y Luis, 6 s después de la caída
  3. 10:43Sigue en el suelo tras 30 s: caída confirmada
Caída confirmada a los 30 s
10:40

Movimiento inestable · Severidad media

Rosa tuvo un movimiento inestable

HabitaciónSala
Hora10:39
Hace1 min

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321

No se detectó una caída. Si la situación termina en una caída, te avisaremos de inmediato con una alerta urgente.

Si nadie la marca como atendida antes de las 10:44, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaPregúntale cómo se siente y si necesita ayuda.
  2. 2Revisa el clipMira qué pasó antes y después del movimiento.
  3. 3Marca la alertaIndica si la atendiste o si fue una falsa alarma.

Clip del evento

Sala · 10:39
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:39Movimiento inestable detectado en la Sala
  2. 10:39Aviso enviado a Carmen (principal) y Luis, 5 s después del movimiento
Movimiento inestable
10:43

Alerta de caída · Urgente

Rosa se cayó y sigue en el suelo

Sigue en el suelo · confirmada

HabitaciónSala
Hora10:42
Hace1 min

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321

Si nadie la marca como atendida antes de las 10:47, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaSi contesta, pregúntale si puede levantarse sola.
  2. 2Si no contesta, pide ayuda cercaA un vecino o a quien esté más cerca de San Miguel. Emergencias: SAMU 106 o Bomberos 116.
  3. 3Marca la alertaCuando esté atendida, para que la familia lo sepa.

Clip del evento

Sala · 10:42
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:42Caída detectada en la Sala
  2. 10:42Aviso enviado a Carmen (principal) y Luis, 6 s después de la caída
  3. 10:43Sigue en el suelo tras 30 s: caída confirmada
Qué hacer ahora y clip
Clip del evento
Sala · 10:42
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro de la alerta
  1. 10:42Caída detectada en la Sala
  2. 10:42Aviso enviado a Carmen (principal) y Luis, 6 s después de la caída
  3. 10:43Sigue en el suelo tras 30 s: caída confirmada
  4. 10:45Rosa se levantó

Cuándo usarlo

  • Solo ante una caída o un movimiento inestable real, detectados por la cámara.
  • Se abre desde la notificación, la franja o el historial.

Variantes y estados

  • Etiqueta de severidad, titular, chip de permanencia (.alert-conf): «Comprobando si sigue en el suelo», «Sigue en el suelo · confirmada» o «Se levantó a las HH:MM».
  • Tres datos: habitación, hora y tiempo transcurrido.
  • Acciones: llamar (principal) y ver en vivo. Abajo, «Marcar alerta».

Accesibilidad

  • Texto blanco sobre rojo a 5,9:1 en el titular y 7,6:1 en los datos (texto grande).
  • Foco en blanco dentro de la alerta.
  • El registro indica en cuántos segundos se envió el aviso (menos de 10 s) y cuándo se confirmó.
Ver el HTML
<div class="clip">
  <svg class="room" viewBox="0 0 320 200">…</svg>
  <span class="tag">Sala · 10:42</span>
</div>
<div class="clip-bar">
  <button class="play" aria-label="Reproducir clip" data-act="playClip">
    <!-- ic('play') -->
  </button>
  <span class="track">
    <i style="width:50%"></i>
    <span class="ev" style="left:50%" title="Momento del evento"></span>
  </span>
  <span class="mono">0:06 / 0:12</span>
</div>
<p class="t-meta mt8">
  Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.
</p>

Notificación en la pantalla de bloqueo

La alerta llega con la app cerrada. La notificación usa el ícono de la app, una etiqueta de severidad y el qué, dónde y cuándo.

10:42

Miércoles 23 de septiembre

10:42

Caída · urgente
10:39

Miércoles 23 de septiembre

10:39

Movimiento inestable · severidad media
10:41

Miércoles 23 de septiembre

10:41

De movimiento inestable a caída

Cuándo usarlo

  • Toda alerta de caída o de movimiento inestable, y los avisos de la cámara.
  • La pantalla de bloqueo simulada es neutra: no copia a ningún sistema operativo.

Variantes y estados

  • Etiqueta «URGENTE · CAÍDA» en rojo, «SEVERIDAD MEDIA» en ámbar o «SEGUIMIENTO» en verde.
  • Título con la persona y la habitación; cuerpo con la hora y la acción.

Accesibilidad

  • La etiqueta de severidad es texto, no solo color.
  • El título se entiende sin abrir la app.

Hoja, diálogo y avisos breves

Capas sobre la pantalla. La hoja inferior pide una elección breve; el diálogo confirma algo irreversible; los avisos breves confirman sin interrumpir.

10:46

Alerta de caída · Urgente

Rosa se cayó y sigue en el suelo

Sigue en el suelo · confirmada

HabitaciónSala
Hora10:42
Hace4 min

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321

Si nadie la marca como atendida antes de las 10:47, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaSi contesta, pregúntale si puede levantarse sola.
  2. 2Si no contesta, pide ayuda cercaA un vecino o a quien esté más cerca de San Miguel. Emergencias: SAMU 106 o Bomberos 116.
  3. 3Marca la alertaCuando esté atendida, para que la familia lo sepa.

Clip del evento

Sala · 10:42
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:42Caída detectada en la Sala
  2. 10:42Aviso enviado a Carmen (principal) y Luis, 6 s después de la caída
  3. 10:43Sigue en el suelo tras 30 s: caída confirmada
Hoja: marcar la alerta
10:42

Privacidad

Constancia de consentimiento

Otorgado porRosa Huamán
Registrado porCarmen Huamán
Fecha3 ago 2026
Hora09:12

Guardamos la fecha y la hora como constancia de que Rosa autorizó el monitoreo, como lo exige la Ley N.° 29733 de Protección de Datos Personales.

Cómo cuidamos sus datos

Clips de las alertasSe guardan 30 días y luego se eliminan
Video en vivoLos familiares vinculados pueden verlo en cualquier momento. No se graba.
Reconocimiento facialNo se usa

Según la Ley N.° 29733, Rosa puede pedir acceder, corregir o eliminar sus datos escribiendo a privacidad@tetengo.pe.

Revocar

Detiene la captura de la cámara, la vista en vivo y elimina las grabaciones guardadas.

¿Revocar el consentimiento?

La cámara de la Sala dejará de capturar de inmediato, ya no se podrá ver en vivo y se eliminarán las grabaciones guardadas. Nadie de la familia recibirá más alertas de caída. Esta acción no se puede deshacer.

Diálogo: revocar el consentimiento
10:44

Cámara · Sala

Sala

En línea

Última señal10:44 · hace 6 s
Conectada aPC de la casa
Instalada el3 ago 2026
Instalada porEquipo del proyecto
Detección de caídasActiva

Útil si hay visitas o una reunión familiar en esta habitación.

Vista en vivo

Habitación

Acceso registradoViste la Sala en vivo durante 1 min 12 s.
Aviso breve: acceso registrado
10:45

Alerta de caída · Urgente

Rosa pudo haberse caído

Se levantó a las 10:45

HabitaciónSala
Hora10:42
Hace3 min

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321
Rosa se levantó a las 10:45Detectamos que se puso de pie en la Sala. Aun así, confirma cómo está antes de cerrar la alerta.

Si nadie la marca como atendida antes de las 10:47, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaSi contesta, pregúntale si puede levantarse sola.
  2. 2Si no contesta, pide ayuda cercaA un vecino o a quien esté más cerca de San Miguel. Emergencias: SAMU 106 o Bomberos 116.
  3. 3Marca la alertaCuando esté atendida, para que la familia lo sepa.

Clip del evento

Sala · 10:42
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:42Caída detectada en la Sala
  2. 10:42Aviso enviado a Carmen (principal) y Luis, 6 s después de la caída
  3. 10:43Sigue en el suelo tras 30 s: caída confirmada
  4. 10:45Rosa se levantó
Banner dentro de la app: se levantó

Cuándo usarlo

  • Hoja: marcar una alerta, pausar la cámara, filtrar, elegir un contacto.
  • Diálogo: solo para retirar un acceso, revocar el consentimiento o cerrar sesión.
  • Aviso breve: confirmar algo que ya pasó («Acceso registrado»).

Variantes y estados

  • Hoja con asa, título y botón principal abajo.
  • Diálogo con ícono tonal, título en pregunta y dos botones: la acción nombrada y «Cancelar».
  • Aviso breve oscuro arriba, con ícono de color según el tono.

Accesibilidad

  • Hoja y diálogo con role="dialog" o alertdialog, aria-modal y aria-labelledby.
  • El aviso breve usa role="status".
  • El fondo oscurecido cierra la hoja; el diálogo destructivo no se cierra por accidente.
Ver el HTML
<div class="scrim"></div>
<div class="dialog" role="alertdialog" aria-modal="true" aria-labelledby="dg-t">
  <div class="d-ico" style="background:var(--caida-soft);color:var(--caida-ink)">
    <!-- ic('warn') -->
  </div>
  <h2 class="t-h2" id="dg-t">¿Revocar el consentimiento?</h2>
  <p class="t-small mt8 mb20">
    La cámara de la Sala dejará de capturar de inmediato, ya no se podrá ver en vivo y se eliminarán las grabaciones guardadas.
  </p>
  <div class="btn-row">
    <button class="btn btn-danger">Sí, revocar y eliminar</button>
    <button class="btn btn-secondary">Cancelar, mantenerlo</button>
  </div>
</div>

Vista en vivo y registro de accesos

Cualquier familiar vinculado puede ver la cámara en vivo cuando quiera, no solo durante una alerta. La vista no se graba y cada acceso queda registrado para toda la familia.

10:42

En vivo · Sala

EN VIVO · 00:37

Ves la Sala y la postura de Rosa en este momento. La transmisión no se graba.

Tu acceso queda en el registro que ve toda la familia: Carmen Huamán, desde las 10:42.

Llamar a Rosa
En vivo desde el inicio
10:42

En vivo · Sala

La vista en vivo no está disponible

La cámara de la Sala está en pausa hasta las 11:42. Podrás verla de nuevo a esa hora, o antes si reanudas la cámara.

No disponible: en pausa
10:44

Registro de accesos

Cada vez que alguien de la familia abre la vista en vivo de la Sala, queda registrado quién la vio, cuándo empezó y cuánto duró. Toda la familia ve este registro.

Hoy, miércoles 23 de septiembre

CHCarmen Huamán (tú)Empezó a las 10:42 · duró 1 min 12 s
LHLuis HuamánEmpezó a las 08:15 · duró 2 min 5 s

martes 22 de septiembre

CHCarmen Huamán (tú)Empezó a las 21:40 · duró 48 s

lunes 21 de septiembre

CHCarmen Huamán (tú)Empezó a las 12:06 · duró 1 min 34 sDesde una alerta

sábado 19 de septiembre

LHLuis HuamánEmpezó a las 19:02 · duró 3 min 10 s

Rosa autorizó la vista en vivo en su consentimiento del 3 ago 2026.

Registro de accesos
Entrada desde el inicio
Filas del registro
CHCarmen Huamán (tú)Empezó a las 10:42 · duró 1 min 12 s
LHLuis HuamánEmpezó a las 08:15 · duró 2 min 5 s

Cuándo usarlo

  • Desde el inicio («Ver en vivo · Cuando quieras»), el detalle de la cámara o una alerta.
  • El registro se abre desde el detalle de la cámara y desde Ajustes › Privacidad.

Variantes y estados

  • Disponible: ilustración de la habitación con el esqueleto de postura y la etiqueta «EN VIVO · mm:ss».
  • No disponible por desconexión (ámbar) o por pausa («hasta las HH:MM», con «Reanudar la cámara ahora»).
  • Filas del registro: avatar, nombre, «Empezó a las HH:MM · duró N min N s» y «Desde una alerta».

Accesibilidad

  • El recordatorio «Tu acceso queda en el registro» es texto visible, no un ícono.
  • Al cerrar la vista, el aviso breve «Acceso registrado» se anuncia con role="status".
  • Fondo oscuro propio (#17121F) con texto a 13:1.
Ver el HTML
<div class="list">
  <div class="row static">
    <span class="avatar ">CH</span>
    <span class="grow">
      <span class="ttl">Carmen Huamán (tú)</span>
      <span class="sub">Empezó a las <span class="mono">10:42</span> · duró 1 min 12 s</span>
    </span>
  </div>
  <div class="row static">
    <span class="avatar b">LH</span>
    <span class="grow">
      <span class="ttl">Luis Huamán</span>
      <span class="sub">Empezó a las <span class="mono">08:15</span> · duró 2 min 5 s</span>
    </span>
  </div>
</div>

Orden de aviso

Todos los familiares reciben cada alerta. El contacto principal debe atenderla primero; si no la marca a tiempo, avisamos al secundario.

Principal y secundario
1Carmen Huamán (tú)Contacto principal
2Luis HuamánContacto secundario · a los 5 min
Tiempo de espera
Un solo familiar
1Carmen Huamán (tú)Contacto principal
2Sin contacto secundarioNo hay otro familiar vinculado. Si nadie atiende una alerta, no habrá a quién avisar.

Cuándo usarlo

  • En Familia › Orden de aviso y en la configuración inicial.

Variantes y estados

  • Filas numeradas (.order-n) 1 y 2, con «Cambiar» para la titular.
  • Sin secundario: número gris con borde y «Sin contacto secundario».
  • Espera de 3, 5 (predeterminado) o 10 minutos.

Accesibilidad

  • El número acompaña al texto «Contacto principal» o «Contacto secundario».
  • «Cambiar» lleva un aria-label con el rol.
Ver el HTML
<div class="list">
  <div class="row static order">
    <span class="order-n">1</span>
    <span class="grow">
      <span class="ttl">Carmen Huamán (tú)</span>
      <span class="sub">Contacto principal</span>
    </span>
    <button class="link" data-act="pickSlot" data-arg="principal" aria-label="Cambiar contacto principal">
      Cambiar
    </button>
  </div>
  <div class="row static order">
    <span class="order-n">2</span>
    <span class="grow">
      <span class="ttl">Luis Huamán</span>
      <span class="sub">Contacto secundario · a los 5 min</span>
    </span>
    <button class="link" data-act="pickSlot" data-arg="secundario" aria-label="Cambiar contacto secundario">
      Cambiar
    </button>
  </div>
</div>

Solo lectura (familiar invitado)

Un familiar invitado ve lo mismo que la titular, pero no cambia la configuración. Lo que no puede editar se muestra, no se esconde, y se explica quién puede cambiarlo.

Aviso en Ajustes
Eres familiar invitadoVes las mismas alertas, clips e historial que Carmen. Lo marcado con candado solo lo puede cambiar Carmen (titular).
Aviso de candado
Solo Carmen (titular) puede cambiar el nombre de la habitación.
Fila con «Solo ver»
SalaNombre que aparece en las alertasSolo ver
Campo deshabilitado
Opciones en solo lectura

Cuándo usarlo

  • En los datos de la persona cuidada, el consentimiento, el nombre de la habitación, la familia y el orden de aviso.
  • El invitado sí puede marcar alertas, pausar la cámara y ver en vivo.

Variantes y estados

  • Aviso neutro con candado: «Solo Carmen (titular) puede…».
  • Etiqueta .ro-tag «Solo ver» en las filas.
  • Campos con borde punteado y opciones al 72 %; las acciones de administración se ocultan.

Accesibilidad

  • Los campos usan disabled real y las opciones aria-disabled.
  • El candado siempre va con texto.
Ver el HTML
<div class="notice neutral" role="status">
  <!-- ic('lock') -->
  <div class="grow">
    <span>Solo Carmen (titular) puede cambiar el nombre de la habitación.</span>
  </div>
</div>
<div class="list">
  <div class="row static">
    <span class="ico"><!-- ic('pin') --></span>
    <span class="grow">
      <span class="ttl">Sala</span>
      <span class="sub">Nombre que aparece en las alertas</span>
    </span>
    <span class="ro-tag"><!-- ic('lock') -->Solo ver</span>
  </div>
</div>

Comparación semanal

El resumen cuenta caídas, movimientos inestables y falsas alarmas de la semana y los compara con la anterior.

Por tipo, con la semana anterior
1CaídasAumentó: 1 más que la semana anterior (0)
2Movimientos inestablesIgual que la semana anterior
1Falsas alarmasDisminuyó: 1 menos que la semana anterior (2)
Tendencias
Aumentó: 1 más que la semana anterior (0)Disminuyó: 2 menos que la semana anterior (3)Igual que la semana anteriorAumentó: 1 más que la semana anterior (1)

Cuándo usarlo

  • En Historial › Resumen semanal.

Variantes y estados

  • Aumentó caídas o inestables: ámbar con flecha arriba.
  • Disminuyó: verde con flecha abajo.
  • Igual, o aumento de falsas alarmas: neutro.

Accesibilidad

  • Flecha y texto completo: «Aumentó: 1 más que la semana anterior».
  • Las falsas alarmas no se suman a las caídas.
Ver el HTML
<div class="card card-pad" style="padding-top:6px;padding-bottom:6px">
  <div class="count-row">
    <span class="n">1</span>
    <span class="grow">
      <b class="flex" style="gap:8px"><svg class="m" viewBox="0 0 18 18">…</svg>Caídas</b>
      <span class="bar"><i style="width:33.33333333333333%;background:var(--caida)"></i></span>
      <span class="trend up"><!-- ic('up') -->Aumentó: 1 más que la semana anterior (0)</span>
    </span>
  </div>
  <div class="count-row">
    <span class="n">2</span>
    <span class="grow">
      <b class="flex" style="gap:8px">
        <svg class="m" viewBox="0 0 18 18">…</svg>
        Movimientos inestables
      </b>
      <span class="bar">
        <i style="width:66.66666666666666%;background:var(--inestable-deep)"></i>
      </span>
      <span class="trend same"><!-- ic('equal') -->Igual que la semana anterior</span>
    </span>
  </div>
  <div class="count-row">
    <span class="n">1</span>
    <span class="grow">
      <b class="flex" style="gap:8px">
        <svg class="m" viewBox="0 0 18 18">…</svg>
        Falsas alarmas
      </b>
      <span class="bar"><i style="width:33.33333333333333%;background:var(--ink-3)"></i></span>
      <span class="trend down">
        <!-- ic('down') -->
        Disminuyó: 1 menos que la semana anterior (2)
      </span>
    </span>
  </div>
</div>

Constancia de consentimiento

Prueba de que la persona cuidada autorizó el monitoreo, con fecha y hora, como exige la Ley N.° 29733. El consentimiento incluye la vista en vivo en cualquier momento.

Constancia

Constancia de consentimiento

Otorgado porRosa Huamán
Registrado porCarmen Huamán
Fecha3 ago 2026
Hora09:12

Guardamos la fecha y la hora como constancia de que Rosa autorizó el monitoreo, como lo exige la Ley N.° 29733 de Protección de Datos Personales.

Cláusula de vista en vivo en el resumen
Vista en vivo en cualquier momento

Los familiares vinculados a esta cuenta pueden ver la cámara en vivo cuando quieran, no solo durante una alerta. Cada acceso queda registrado: quién la vio, cuándo y cuánto tiempo.

Cuándo usarlo

  • Al registrar el consentimiento y en Ajustes › Privacidad.

Variantes y estados

  • Banda verde, quién lo otorgó, quién lo registró, fecha y hora (en Mono).
  • Cláusula destacada en morado suave: «Vista en vivo en cualquier momento».

Accesibilidad

  • Datos en pares clave–valor legibles en orden.
  • El enlace dice adónde lleva: «Ver la constancia completa».
Ver el HTML
<div class="card">
  <div class="band calma"></div>
  <div class="card-pad">
    <div class="flex">
      <!-- ic('shield', 'style="width:26px;height:26px;color:var(--calma-ink);flex:none"') -->
      <p class="t-h3">Constancia de consentimiento</p>
    </div>
    <div class="kv mt8">
      <span class="k">Otorgado por</span>
      <span class="v">Rosa Huamán</span>
    </div>
    <div class="kv">
      <span class="k">Registrado por</span>
      <span class="v">Carmen Huamán</span>
    </div>
    <div class="kv"><span class="k">Fecha</span><span class="v">3 ago 2026</span></div>
    <div class="kv"><span class="k">Hora</span><span class="v mono">09:12</span></div>
    <p class="t-meta mt8">
      Guardamos la fecha y la hora como constancia de que Rosa autorizó el monitoreo, como lo exige la Ley N.° 29733 de Protección de Datos Personales.
    </p>
    <button class="link mt12" data-act="docConsent">Ver la constancia completa</button>
  </div>
</div>

Estados vacíos y de carga

Un estado vacío explica qué aparecerá ahí y cuándo. Mientras se carga, el esqueleto conserva la forma de la lista.

Registro de accesos vacío

Aún no hay accesos registrados

Cuando alguien de la familia abra la vista en vivo, aquí verás quién la vio, cuándo empezó y cuánto duró.

Historial vacío

Sin eventos registrados

Aquí aparecerán las alertas de caída y de movimiento inestable, con su fecha, hora, habitación y estado.

Historial cargando

Cuándo usarlo

  • Listas sin elementos: historial, registro de accesos, filtros sin resultados, semana sin eventos.

Variantes y estados

  • Ilustración propia en círculo suave, titular y una línea de explicación; acción opcional («Quitar filtros»).
  • Esqueleto con brillo (.skeleton), sin animación si se pide movimiento reducido.

Accesibilidad

  • El esqueleto usa aria-busy="true" y un aria-label («Cargando historial»).
  • Las ilustraciones son decorativas (aria-hidden).
Ver el HTML
<div class="empty">
  <svg class="e-ill" viewBox="0 0 120 120">…</svg>
  <h2 class="t-h2">Aún no hay accesos registrados</h2>
  <p class="t-small">
    Cuando alguien de la familia abra la vista en vivo, aquí verás quién la vio, cuándo empezó y cuánto duró.
  </p>
</div>

Patrones

Cómo se combinan los componentes en los momentos clave de la prueba piloto.

Caída y movimiento inestable

Son dos eventos distintos y nunca se confunden: cambian el color, el ícono, la etiqueta, la severidad y la marca del historial. Un movimiento inestable puede terminar en caída; entonces la alerta pasa a ser de caída.

CaídaSeveridad alta

10:42

Miércoles 23 de septiembre

10:42

Notificación
10:42

Alerta de caída · Urgente

Rosa pudo haberse caído

Comprobando si sigue en el suelo

HabitaciónSala
Hora10:42
Haceinstantes

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321

Estamos comprobando si Rosa se levanta. Si sigue en el suelo 30 segundos, confirmaremos la caída. Si se pone de pie, te avisaremos.

Si nadie la marca como atendida antes de las 10:47, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaSi contesta, pregúntale si puede levantarse sola.
  2. 2Si no contesta, pide ayuda cercaA un vecino o a quien esté más cerca de San Miguel. Emergencias: SAMU 106 o Bomberos 116.
  3. 3Marca la alertaCuando esté atendida, para que la familia lo sepa.

Clip del evento

Sala · 10:42
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:42Caída detectada en la Sala
  2. 10:42Aviso enviado a Carmen (principal) y Luis, 6 s después de la caída
Alerta roja a pantalla completa

InestableSeveridad media

10:39

Miércoles 23 de septiembre

10:39

Notificación
10:40

Movimiento inestable · Severidad media

Rosa tuvo un movimiento inestable

HabitaciónSala
Hora10:39
Hace1 min

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321

No se detectó una caída. Si la situación termina en una caída, te avisaremos de inmediato con una alerta urgente.

Si nadie la marca como atendida antes de las 10:44, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaPregúntale cómo se siente y si necesita ayuda.
  2. 2Revisa el clipMira qué pasó antes y después del movimiento.
  3. 3Marca la alertaIndica si la atendiste o si fue una falsa alarma.

Clip del evento

Sala · 10:39
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:39Movimiento inestable detectado en la Sala
  2. 10:39Aviso enviado a Carmen (principal) y Luis, 5 s después del movimiento
Alerta ámbar a pantalla completa
CaídaMovimiento inestable
ColorRojo --caida, texto blancoÁmbar --inestable, texto tinta
Ícono figura en el suelo rombo con trazo quebrado
Etiqueta«Alerta de caída · Urgente», «Caída»«Movimiento inestable · Severidad media», «Inestable»
Marca en el historial cuadrado rombo
Acción principalLlamar (botón blanco)Llamar (botón tinta)
SeguimientoConfirmación a los 30 s y aviso «se levantó»Si termina en caída, la alerta se actualiza a caída

El ciclo de una caída

  1. 0 sSe detectaLa cámara envía el video; en la nube se reconoce la postura de caída.
  2. < 10 sLlega el avisoNotificación a toda la familia, con habitación y hora. El registro dice en cuántos segundos llegó.
  3. 30 sCaída confirmadaSi sigue en el suelo, «Sigue en el suelo · confirmada». La alerta sigue activa hasta que alguien la marque.
  4. DespuésSe levantóSi se pone de pie, avisamos «Rosa se levantó a las HH:MM» y pedimos confirmar cómo está.
10:42

Alerta de caída · Urgente

Rosa pudo haberse caído

Comprobando si sigue en el suelo

HabitaciónSala
Hora10:42
Haceinstantes

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321

Estamos comprobando si Rosa se levanta. Si sigue en el suelo 30 segundos, confirmaremos la caída. Si se pone de pie, te avisaremos.

Si nadie la marca como atendida antes de las 10:47, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaSi contesta, pregúntale si puede levantarse sola.
  2. 2Si no contesta, pide ayuda cercaA un vecino o a quien esté más cerca de San Miguel. Emergencias: SAMU 106 o Bomberos 116.
  3. 3Marca la alertaCuando esté atendida, para que la familia lo sepa.

Clip del evento

Sala · 10:42
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:42Caída detectada en la Sala
  2. 10:42Aviso enviado a Carmen (principal) y Luis, 6 s después de la caída
Comprobando si sigue en el suelo
10:43

Alerta de caída · Urgente

Rosa se cayó y sigue en el suelo

Sigue en el suelo · confirmada

HabitaciónSala
Hora10:42
Hace1 min

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321

Si nadie la marca como atendida antes de las 10:47, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaSi contesta, pregúntale si puede levantarse sola.
  2. 2Si no contesta, pide ayuda cercaA un vecino o a quien esté más cerca de San Miguel. Emergencias: SAMU 106 o Bomberos 116.
  3. 3Marca la alertaCuando esté atendida, para que la familia lo sepa.

Clip del evento

Sala · 10:42
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:42Caída detectada en la Sala
  2. 10:42Aviso enviado a Carmen (principal) y Luis, 6 s después de la caída
  3. 10:43Sigue en el suelo tras 30 s: caída confirmada
Sigue en el suelo · confirmada
10:45

Alerta de caída · Urgente

Rosa pudo haberse caído

Se levantó a las 10:45

HabitaciónSala
Hora10:42
Hace3 min

Jr. Los Pinos 482, San Miguel, Lima

Llamar a Rosa · 987 654 321
Rosa se levantó a las 10:45Detectamos que se puso de pie en la Sala. Aun así, confirma cómo está antes de cerrar la alerta.

Si nadie la marca como atendida antes de las 10:47, avisaremos a Luis Huamán (contacto secundario).

Qué hacer ahora

  1. 1Llama a RosaSi contesta, pregúntale si puede levantarse sola.
  2. 2Si no contesta, pide ayuda cercaA un vecino o a quien esté más cerca de San Miguel. Emergencias: SAMU 106 o Bomberos 116.
  3. 3Marca la alertaCuando esté atendida, para que la familia lo sepa.

Clip del evento

Sala · 10:42
0:06 / 0:12

Ilustración de la habitación con la postura detectada. 6 s antes y 6 s después del evento.

Registro

  1. 10:42Caída detectada en la Sala
  2. 10:42Aviso enviado a Carmen (principal) y Luis, 6 s después de la caída
  3. 10:43Sigue en el suelo tras 30 s: caída confirmada
  4. 10:45Rosa se levantó
Se levantó

Estados de la cámara

La tarjeta de estado del inicio cambia su franja, su ícono y su texto con el estado de la única cámara, y cuando hay un problema dice qué revisar en la casa.

Todo tranquilo
RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

Todo tranquilo

Sin eventos hoy. La cámara de la Sala está funcionando.

Desconectada
RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

La cámara está desconectada

Sin ella no podemos detectar caídas en la Sala. Revisa el cable de la cámara, que la PC esté encendida y el internet de la casa.

Detección no confiable
RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

La detección no es confiable

Hace más de 5 minutos que la cámara no ve bien a Rosa en la Sala. Revisa la luz y el encuadre.

En pausa
RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

Todo tranquilo, con una pausa

La cámara de la Sala está en pausa hasta las 11:42.

Detenida, sin consentimiento
RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

Detección detenida

Falta el consentimiento informado de Rosa. La cámara está instalada, pero no envía video.

10:42

Cámara · Sala

Sala

Desconectada

Última señala las 10:31
Conectada aPC de la casa
Instalada el3 ago 2026
Instalada porEquipo del proyecto
Detección de caídasDetenida
No recibimos señal desde las 10:31Mientras siga desconectada no detectamos caídas en la Sala. Te avisaremos cuando vuelva.

Qué revisar en la casa

El cable de la cámaraQue esté bien conectado al puerto USB de la PC.
La PC encendidaQue no esté apagada ni suspendida, con Te Tengo Captura abierto.
La conexión a internetQue el módem o router de la casa tenga luz y funcione.

Vista en vivo

Habitación

Desconectada · qué revisar
10:42

Miércoles 23 de septiembre

Hola, Carmen

RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

Todo tranquilo, con una pausa

La cámara de la Sala está en pausa hasta las 11:42.

Cámara

Esta semana

0 caídas1 inestable0 falsas
Inicio con la cámara en pausa
10:52

Miércoles 23 de septiembre

Hola, Carmen

RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

Todo tranquilo

Sin eventos hoy. La cámara de la Sala está funcionando.

Cámara

Esta semana

0 caídas1 inestable0 falsas
La cámara de la Sala volvió a estar en líneaEl monitoreo se restableció a las 10:52.
Reconectada

Haz

  • Decir qué revisar: el cable de la cámara, que la PC esté encendida y el internet de la casa.
  • Avisar también cuando vuelve: «El monitoreo se restableció».

Evita

  • Mostrar un problema de la cámara con el rojo de caída.
  • Pedir a la familia que conecte o vincule la cámara: la instala el equipo del proyecto.

Cámara lista tras el consentimiento

En la configuración inicial no hay nada que conectar. Después del consentimiento, la app confirma que la cámara instalada ya funciona y ofrece cambiar el nombre de su habitación.

09:14

Consentimiento registrado

La cámara de la casa empezó a enviar video: desde ahora detectamos caídas. Puedes revisarlo o revocarlo cuando quieras en Ajustes.

Constancia de consentimiento

Otorgado porRosa Huamán
Registrado porCarmen Huamán
Fecha23 sep 2026
Hora09:14

Guardamos la fecha y la hora como constancia de que Rosa autorizó el monitoreo, como lo exige la Ley N.° 29733 de Protección de Datos Personales.

Consentimiento registrado
09:14

Cámara

Paso 3 de 4

Tu cámara ya está lista

El equipo del proyecto la instaló y la configuró en la PC de la casa de Rosa. No tienes que conectar nada: ya estamos detectando caídas en la Sala.

Sala

En línea

Última señal09:14 · hace 2 s
Conectada aPC de la casa
Instalada el22 sep 2026
Instalada porEquipo del proyecto
Detección de caídasActiva

Nombre de la habitación

Lo definió el equipo al instalarla y aparece en cada alerta. Si en casa la llaman de otra forma, cámbialo.

Tu cámara ya está lista
09:14

Cámara

Paso 3 de 4

¿Cómo se llama esta habitación?

Es donde el equipo del proyecto instaló la cámara. El nombre aparece en cada alerta para que sepas al instante dónde fue.

Escribe el nombre de la habitación.

Así se verá en las próximas alertas

Posible caída …

Las alertas anteriores conservan el nombre que tenían.

Nombre de la habitación vacío
09:14

Cámara

Paso 3 de 4

La cámara está instalada, pero no envía video

Sin el consentimiento de Rosa, la cámara de la Sala no captura nada y no podemos detectar caídas.

Sala

Detenida

Envío de videoDetenido
Conectada aPC de la casa
Instalada el22 sep 2026
Instalada porEquipo del proyecto
Detección de caídasDetenida

Nombre de la habitación

Lo definió el equipo al instalarla y aparece en cada alerta. Si en casa la llaman de otra forma, cámbialo.

Podrás registrarlo después desde Inicio o Ajustes.

Sin consentimiento: no envía video

Haz

  • Confirmar con datos concretos: conectada a la PC de la casa, instalada el…, «Instalada por: Equipo del proyecto».
  • Mostrar cómo se verá el nombre en las próximas alertas.

Evita

  • Pedir códigos, elegir webcams o esperar una conexión: en la prueba piloto no existen.
  • Aceptar un nombre de habitación vacío.

Vista en vivo y registro de accesos

Ver en vivo es un acto transparente: se puede en cualquier momento porque la persona cuidada lo aceptó, y todos saben quién miró, cuándo y cuánto tiempo.

10:42

Miércoles 23 de septiembre

Hola, Carmen

RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

Todo tranquilo

Sin eventos hoy. La cámara de la Sala está funcionando.

Cámara

Esta semana

0 caídas1 inestable0 falsas
1 · «Ver en vivo · Cuando quieras»
10:42

En vivo · Sala

EN VIVO · 00:37

Ves la Sala y la postura de Rosa en este momento. La transmisión no se graba.

Tu acceso queda en el registro que ve toda la familia: Carmen Huamán, desde las 10:42.

Llamar a Rosa
2 · En vivo, sin grabar
10:44

Cámara · Sala

Sala

En línea

Última señal10:44 · hace 6 s
Conectada aPC de la casa
Instalada el3 ago 2026
Instalada porEquipo del proyecto
Detección de caídasActiva

Útil si hay visitas o una reunión familiar en esta habitación.

Vista en vivo

Habitación

Acceso registradoViste la Sala en vivo durante 1 min 12 s.
3 · Al cerrar: acceso registrado
10:44

Registro de accesos

Cada vez que alguien de la familia abre la vista en vivo de la Sala, queda registrado quién la vio, cuándo empezó y cuánto duró. Toda la familia ve este registro.

Hoy, miércoles 23 de septiembre

CHCarmen Huamán (tú)Empezó a las 10:42 · duró 1 min 12 s
LHLuis HuamánEmpezó a las 08:15 · duró 2 min 5 s

martes 22 de septiembre

CHCarmen Huamán (tú)Empezó a las 21:40 · duró 48 s

lunes 21 de septiembre

CHCarmen Huamán (tú)Empezó a las 12:06 · duró 1 min 34 sDesde una alerta

sábado 19 de septiembre

LHLuis HuamánEmpezó a las 19:02 · duró 3 min 10 s

Rosa autorizó la vista en vivo en su consentimiento del 3 ago 2026.

4 · Registro para toda la familia

Haz

  • Recordar dentro de la vista que el acceso queda registrado.
  • Si no está disponible, decir por qué y hasta cuándo.
  • Mostrar el registro vacío con «Aún no hay accesos registrados».

Evita

  • Grabar la vista en vivo o mostrar fotos de la persona.
  • Esconder el registro de accesos a los invitados.

Familiar invitado (solo lectura)

Luis ve las mismas alertas, clips, historial y vista en vivo que Carmen. Lo que solo puede cambiar la titular aparece con candado y una explicación.

10:42

Ajustes

Eres familiar invitadoVes las mismas alertas, clips e historial que Carmen. Lo marcado con candado solo lo puede cambiar Carmen (titular).
Tu cuenta · Familiar invitadoluis.huaman.r@gmail.com

Te Tengo 1.0 · prueba piloto

Ajustes con «Solo ver»
10:42

Cámara · Sala

Sala

En línea

Última señal10:42 · hace 6 s
Conectada aPC de la casa
Instalada el3 ago 2026
Instalada porEquipo del proyecto
Detección de caídasActiva

Útil si hay visitas o una reunión familiar en esta habitación.

Vista en vivo

Habitación

SalaNombre que aparece en las alertasSolo ver
Solo Carmen (titular) puede cambiar el nombre de la habitación.
Cámara: nombre en solo lectura
10:42

Orden de aviso

Solo Carmen (titular) puede cambiar el orden de aviso y el tiempo de espera.

Todos los familiares reciben cada alerta. El contacto principal es quien debe atenderla primero; si no la marca como atendida a tiempo, avisamos al secundario.

Quién responde

1Carmen HuamánContacto principal
2Luis Huamán (tú)Contacto secundario · a los 5 min

Milagros podrá ser contacto cuando acepte la invitación.

Tiempo de espera

Cuánto esperamos a que el contacto principal marque la alerta antes de avisar al secundario.

Mientras no elijas otro, usamos 5 minutos.

Ejemplo: si llega una alerta a las 10:42 y nadie la atiende, avisamos a Luis a las 10:47.
Orden de aviso en solo lectura

Detección no confiable

Si durante más de 5 minutos solo llegan imágenes descartadas, no podemos asegurar que detectemos una caída. Se avisa con el ámbar de aviso, el ojo tachado y qué revisar.

10:41

Miércoles 23 de septiembre

Hola, Carmen

RHRosa Huamán, 78 añosJr. Los Pinos 482, San Miguel

La detección no es confiable

Hace más de 5 minutos que la cámara no ve bien a Rosa en la Sala. Revisa la luz y el encuadre.

Cámara

Esta semana

0 caídas1 inestable0 falsas
Aviso a los 5 minutos
10:41

Cámara · Sala

Sala

Detección no confiable

Última señal10:41 · hace 6 s
Conectada aPC de la casa
Instalada el3 ago 2026
Instalada porEquipo del proyecto
Detección de caídasNo confiable
La detección no es confiable desde las 10:36Hace más de 5 minutos que la cámara no ve bien a Rosa. Descartamos esas imágenes, así que no podemos asegurar que detectemos una caída.

Qué revisar en la casa

La luz de la habitaciónQue haya luz suficiente. De noche, deja encendida una lámpara pequeña.
El encuadre de la cámaraQue nada la tape y que se vea el cuerpo entero de Rosa, de la cabeza a los pies.

Te avisaremos cuando la cámara vuelva a verla bien.

Vista en vivo

Habitación

Qué revisar: la luz y el encuadre

Haz

  • Decir desde qué hora y qué revisar: la luz de la habitación y que se vea el cuerpo entero.
  • Avisar cuando la cámara vuelva a verla bien.

Evita

  • Tratarla como una caída o usar el rojo.
  • Culpar a la persona cuidada del problema.

Escritorio: Te Tengo Captura

Una extensión del sistema, no un mundo nuevo. Tokens, color, tipografía y reglas de estado vienen de la app móvil; aquí solo cambia lo propio de una ventana de Windows 11.

Qué cambia

AspectoApp móvilTe Tengo Captura
MarcoTeléfono de 390 × 844Ventana de 960 × 640, radio de 10 px y barra de título neutra de 36 px (minimizar, maximizar desactivado y cerrar)
RadiosTarjetas 22 px, controles 16 pxTarjetas 18 px, controles 12 px
TipografíaCuerpo de 17 pxCuerpo de 15 a 16 px, título de inicio de 34 px
Botones56 px, ancho completo44 px (38 px el pequeño), ancho según el texto
PantallasFlujos completosUna sola ventana de estado, más la bandeja y los avisos del sistema
ConfiguraciónNombre de la habitación, consentimiento, pausa, familiaSolo lectura: «Configurada por el equipo del proyecto». El nombre de la habitación se cambia en la app
Rojo de caídaAlertasNo aparece: aquí no hay alertas

Ventana de estado

La única pantalla del piloto: la vivienda, una tarjeta de estado con franja superior y dos tarjetas, la cámara y la configuración en solo lectura. Elige un estado para ver cómo cambia la ventana.

Ventana principal: la vivienda y la cámara, de solo lectura, configuradas por el equipo del proyecto; la webcam envía su video cifrado.

Estados del equipo

EstadoColorForma
Enviando--calma / --calma-softÍcono de subida
En pausa--pausa, rayado diagonalÍcono de pausa, «hasta las HH:MM»
Esperando consentimiento--aviso / --aviso-softÍcono de documento
Sin internetTinta oscura, ámbar en el íconoWi-Fi tachado, cuenta regresiva y «Reintentar ahora»
Webcam desconectada--aviso-soft, franja discontinua, contorno punteadoCámara tachada, «revisa el cable USB» y «Buscar de nuevo»

Arranque, bandeja y avisos del sistema

El programa se inicia con Windows y vive en la bandeja. Cerrar o minimizar la ventana no lo detiene. El ícono de la bandeja lleva un punto de estado: verde enviando, gris en pausa y ámbar con un problema.

Ventana de arranque morada con el símbolo, «Te Tengo Captura» y una barra de progreso.
Arranque480 × 300, centrada, con el paso actual y la versión.
Aviso del sistema junto al reloj: Te Tengo Captura sigue funcionando en segundo plano.
Al cerrar o minimizar«Sigue funcionando en segundo plano».
Aviso del sistema: la webcam se desconectó; el punto de la bandeja pasa a ámbar.
Webcam desconectadaCon la ventana cerrada, aviso del sistema y punto ámbar.

Escala tipográfica de escritorio

ClaseUsoTamañoPesoInterlineadoMuestra
.t-displayTítulo de inicio34px8001.1Sala · En línea
.t-titleTítulo26px8001.15Sala · En línea
.t-h2Título de tarjeta18px8001.25Sala · En línea
.t-leadEntrada16px4001.5Sala · En línea
.t-smallTexto secundario14.5px4001.45Sala · En línea
.t-metaDatos secundarios13.5px4001.4Sala · En línea
.winCuerpo de la ventana15px4001.45Enviando video
Valores propios de Te Tengo Captura.

Accesibilidad

La persona que recibe una alerta puede estar nerviosa, en la calle y sin sus lentes. Estas reglas valen para las dos plataformas.

Contraste

AA como mínimo en todo el texto y AAA en los datos de la alerta. De 27 pares reales, 17 llegan a AAA y 10 a AA. Ver la tabla de contraste.

Objetivos táctiles

44 px como mínimo; 56 px en botones principales y pestañas; 64 px en filas de lista. Ver las medidas de cada componente.

Foco visible

Anillo de 3 px en --focus (morado) con 2 px de separación; en blanco dentro de las alertas. Nunca se elimina el contorno sin reemplazarlo. Prueba a recorrer esta página con Tab.

El estado lleva ícono, texto y patrón

El color nunca va solo. Las marcas del historial cambian de forma y la pausa y la desconexión, de trazo:

CaídaInestableFalsa alarmaEn pausaDesconectada

Anuncios para lectores de pantalla

  • Avisos: role="status"; errores y bloqueos: role="alert".
  • Avisos breves y barra sin internet: role="status".
  • Progreso de la revocación: aria-live="polite".
  • En el escritorio, la cuenta regresiva de reconexión se actualiza sin mover el foco.

Movimiento reducido

Con prefers-reduced-motion, las entradas pasan a un fundido corto, la inundación de la alerta, el esqueleto animado y el brillo de carga se desactivan, y el arranque muestra su cuadro final.

Lenguaje

Español peruano, frases cortas y verbos de acción. Los errores dicen qué pasó y cómo resolverlo. Nunca se muestran códigos internos.

Semántica

Botones reales para acciones y enlaces para navegar; etiquetas <label> en cada campo; aria-current en la pestaña actual; hojas y diálogos con aria-modal y título asociado.

Pendientes conocidos

  • Borde de campo, chip y botón secundario: --line-2 sobre blanco da 1,72:1, por debajo del 3:1 que pide WCAG para los límites de un control. La etiqueta visible y el relleno ayudan, pero conviene oscurecer el borde de los campos.
  • Interruptor: mide 56 × 34 px. Cumple el mínimo AA de 24 px, pero no los 44 px de este sistema; conviene ampliar su área táctil sin cambiar su dibujo.

Recursos

Pantallas, prototipos navegables y archivos de marca.

Marca

  • simbolo.svgSVG
  • simbolo-blanco.svgSVG
  • icono-app.svgSVG
  • logotipo.svgSVG
  • logotipo-blanco.svgSVG
  • logotipo-captura.svgSVG