whatsapp-api-mockup/docs/referencias/README.md

# Referencias visuales — WhatsApp iOS + Cloud API

Capturas reales de referencia para ajustar el mockup y la especificación visual que se deriva de ellas.
Recopiladas el 27-09-2026.

**Cómo se obtuvieron.** Casi todas vienen de la documentación oficial de Meta
(`developers.facebook.com/documentation/business-messaging/whatsapp/...`). Esas capturas son de
**WhatsApp iOS** (colita abajo, botones con icono, fuente SF, hoja inferior iOS) y están a ~3x
(1190 px ≈ 393 pt). Meta devuelve error a `curl`, así que la página se renderizó con Playwright y la
imagen se descargó con la misma sesión. Las dos capturas completas del chat vienen de la ficha oficial
de WhatsApp en el App Store (iPhone 6,9").

**Cómo leer los valores.** Los hex están **medidos por muestreo de píxeles** (el color dominante de
una región) sobre estas capturas. Las medidas en pt salen de dividir entre 3. Son aproximaciones:
PNG comprimido, antialiasing y perfil de color. El texto indica la fuente de cada valor: `[medido]`,
`[observado]` (se ve en la captura pero no tiene número exacto) o `[estimado]` (no está confirmado).

## 1. Capturas

| Archivo | Fuente | Qué muestra |
|---|---|---|
| `ios-chat-claro-appstore.png` | https://apps.apple.com/us/app/whatsapp-messenger/id310633997 (captura 6.9" Display 2) | Chat iOS completo en claro: header (chevron negro, avatar, nombre, "online", iconos vídeo y llamada en línea), aviso de cifrado amarillo, nota de voz, burbuja saliente con ticks azules, foto, ubicación en vivo con botón verde dentro de la burbuja |
| `ios-chat-oscuro-appstore.png` | ídem (captura 6.9" Display 4) | Chat iOS en **oscuro**: fondo casi negro con doodle, entrante gris neutro, saliente verde oscuro, ubicación, sticker y composer oscuro (+, píldora, cámara, micro) |
| `ios-composer-ticks-leido.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/mark-message-as-read | Saliente con ✓✓ **azul iOS** y composer iOS: "+", píldora blanca con borde e icono de sticker, cámara y micro, home indicator negro |
| `botones-respuesta-header-imagen.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/interactive-reply-buttons-messages | Reply buttons con header de imagen **inset**, body, footer gris, hora, y 2 botones **dentro de la misma burbuja** con icono ↩ verde |
| `botones-respuesta-tras-pulsar.png` | ídem (2.ª captura) | Estado tras pulsar: el botón usado queda **gris/deshabilitado** y la respuesta saliente **cita** el mensaje original (nombre, miniatura, extracto) |
| `template-imagen-url-llamada-quickreply.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/templates/utility-templates/utility-templates | Plantilla de utilidad: header imagen, body con primera línea en negrita, footer, botones **URL (↗ en caja)**, **llamada (teléfono)** y **quick reply (↩)** apilados dentro de la burbuja |
| `template-ver-todas-opciones-android.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/templates/components | (Android, estructura) Plantilla con más de 3 botones: se ven 2 y luego "See all options" (icono de lista), que abre una hoja "All Options" con todos los botones y sus iconos |
| `lista-burbuja.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/interactive-list-messages | List message: header en negrita, body, footer gris, hora y botón con icono de lista **dentro de la burbuja** |
| `lista-hoja-inferior.png` | ídem (2.ª) | Hoja inferior iOS de la lista: título centrado (= texto del botón), X en círculo gris, títulos de sección en gris y negrita, filas título/descripción **sin chevrons**, separadores con sangría y el pie "Tap an item to select it" |
| `lista-respuesta-cita.png` | ídem (3.ª) | Respuesta a la lista: burbuja saliente con cita del mensaje + título y descripción de la fila elegida |
| `cta-url-header-imagen.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/interactive-cta-url-messages | CTA URL: todo en **una burbuja** (imagen inset, body, footer, hora, separador, botón ↗ "See Dates" verde); **sin fila de dominio** |
| `carrusel-plantilla-media-cards.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/templates/marketing-templates/media-card-carousel-templates | Carrusel de plantilla: burbuja de body con hora y debajo tarjetas horizontales (imagen inset, texto 17 pt, botones ↩ y ↗); la siguiente tarjeta asoma; **sin puntos** |
| `carrusel-interactivo-quick-replies.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/interactive-media-carousel-messages | Carrusel interactivo: 3 tarjetas con título en negrita + descripción y 2 quick replies con icono |
| `carrusel-productos.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/templates/marketing-templates/product-card-carousel-templates | Carrusel de productos: panel gris claro con título y precio, botón "View" |
| `imagen-caption.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/image-messages | Imagen inset con esquinas redondeadas, caption y hora a la derecha, botón de reenviar fuera |
| `video-caption.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/video-messages | Vídeo: play en círculo claro translúcido, icono de cámara con duración abajo a la izquierda, caption |
| `documento.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/document-messages | Documento: panel gris interno con icono de página "PDF", nombre en 2 líneas, "243 KB • html", descarga en círculo verde y caption |
| `audio-nota-voz.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/audio-messages | Nota de voz: triángulo de play gris sin círculo, punto verde de progreso, waveform, avatar con micro verde, duración y transcripción |
| `ubicacion.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/location-messages | Ubicación: mapa inset con pin rojo, nombre en regular 17 pt y dirección gris subrayada |
| `contacto.png` | https://developers.facebook.com/documentation/business-messaging/whatsapp/messages/contacts-messages | Contacto: avatar genérico gris, nombre en negrita y chevron, hora, y dos botones lado a lado "Message" / "Save contact" |

## 2. Especificación visual (iOS 2025–2026)

Valores en pt/CSS px sobre un ancho de 393. Si `#pantalla` está escalada, se escala todo junto.

### 2.1 Paleta

| Token | Claro | Oscuro | Fuente |
|---|---|---|---|
| Fondo del chat (wall) | `#f4f1ec` (App Store `#f6f1ea`) | `#0a0a0a` | [medido] |
| Trazo del doodle | `#e8e0d4` (tostado cálido, opaco) | `#1f2121` | [medido] |
| Burbuja entrante | `#ffffff` | `#232626` (gris neutro, no azulado) | [medido] |
| Burbuja saliente | `#d9fdd3` | `#004f35` (App Store comprimido; revisar a ojo) | [medido] |
| Texto de burbuja | `#000000` | `#ffffff` | [observado] |
| Hora y footer (entrante) | `#7f7f7f` | ≈`#8d9494` | [medido] / [estimado] |
| Hora en saliente | `#6b7d68` (gris verdoso) | ≈`#8fb3a3` | [medido] / [estimado] |
| ✓ / ✓✓ entregado | igual que la hora | igual que la hora | [observado] |
| ✓✓ leído | **`#027bfc`** (≈ azul iOS `#007aff`) | `#0a84ff` [estimado] | [medido] |
| Texto de botones de acción (quick reply, URL, lista, carrusel) | **`#408559`** | ≈`#21c063` [estimado] | [medido] |
| Separador de botones | `#cccccc` (1 px físico ≈ 0,33 pt → CSS `0.5px` o `1px rgba(0,0,0,.2)`) | `rgba(255,255,255,.12)` [estimado] | [medido] |
| Header / barra del composer | `#f4f3f2` (translúcido sobre el wall) | header `#121313`, barra `#232626` | [medido] |
| Campo del composer | `#ffffff` con borde `#d1d1d6` 0,5 pt | `#393c3c` sin borde | [medido] / [observado] |
| Iconos del chrome (chevron, vídeo, llamada, +, cámara, micro) | `#000000` (de línea) | `#ffffff` | [observado] |
| Aviso de cifrado | fondo `#ffefd1`, texto `#1f1f1f`, radio 10 | ≈`#2a2a26` [estimado] | [medido] |
| Hoja de lista: fondo | `#ffffff` | ≈`#1c1c1e` [estimado] | [medido] |
| Hoja: título de sección / descripción | `#757778` | ≈`#8d8d93` [estimado] | [medido] |
| Hoja: separadores | `#c6c6c8` | ≈`#38383a` [estimado] | [medido] |
| Hoja: botón cerrar | círculo `#eeeeef`, X `#838388` | ≈`#2c2c2e` / `#a0a0a5` | [medido] / [estimado] |
| Velo detrás de la hoja | `rgba(0,0,0,.26)` | `rgba(0,0,0,.5)` [estimado] | [medido] |
| Panel interno de documento / producto | `#f6f5f4` | ≈`#1b1d1d` [estimado] | [medido] |
| Home indicator | `#000000` (claro) | `#ffffff` (oscuro) | [observado] |

### 2.2 Burbuja

- Radio **18 pt** en las cuatro esquinas. **La colita va abajo**: la entrante abajo a la izquierda y la saliente abajo a la derecha, como una curva que sale del borde inferior (se ve en todas las capturas de Meta). Solo la lleva la **última** burbuja de un grupo del mismo emisor. La esquina de arriba no se afila. [observado]
- Ancho máximo aproximado de 280–290 pt (~72 % de 393). Las plantillas y las burbujas con media usan ese ancho completo. [medido]
- Padding de texto aproximado: 7 pt arriba, 12 pt a izquierda y derecha, 6 pt abajo. [medido]
- Fuente del body: 17 pt SF Pro, interlineado de ~22 pt, negro. [medido]
- Hora: ~12 pt con números tabulares, abajo a la derecha. Con footer, la hora se alinea con la última línea del footer. Ticks de ~16×11 pt. [medido]
- Separación: ~2 pt entre burbujas del mismo emisor y ~8–10 pt al cambiar de emisor. [observado]

### 2.3 Media dentro de la burbuja (imagen, vídeo, ubicación y header de plantilla o interactivo)

- **Inset**, no a sangre: margen de **4 pt** (arriba y a los lados) entre la media y el borde de la burbuja. Radio interior de **~13–14 pt**. [medido]
- Con caption o body debajo, el texto sigue con el padding normal. Sin caption, la hora va sobre la imagen en blanco con una sombra suave. [observado]
- Proporción del header: en plantillas se recorta a ~**1,91:1** (utility, CTA). En interactivos se mantiene la del archivo, hasta cuadrado (reply buttons). [observado]
- Vídeo: play centrado en un círculo de 50 pt `rgba(230,230,230,.8)` con triángulo gris oscuro. Abajo a la izquierda, icono de cámara y duración en blanco de 13 pt. [observado]

### 2.4 Botones de plantilla y botones interactivos (reply buttons)

En iOS **se pintan igual**: van **dentro de la misma burbuja**, no en una tarjeta aparte.

- Bajo el body/footer/hora va un separador a todo el ancho de la burbuja, de borde a borde y sin sangría. [medido]
- Cada botón ocupa una fila de **~43–44 pt**, con el contenido centrado. Entre botones hay otro separador a todo el ancho. [medido]
- Texto de 17 pt regular en `#408559`, con un icono de ~20 pt a la izquierda y 8 pt de hueco. [medido]
  - Quick reply → flecha de responder **↩** en línea (arco curvo).
  - URL → **cuadrado redondeado con flecha ↗** dentro.
  - Llamada → auricular en línea.
  - Lista → icono **≡ con puntos** (tres puntos + tres líneas).
  - "Ver todas las opciones" → icono de lista.
- Con más de 3 botones se muestran 2 y una tercera fila "**Ver todas las opciones**" sin contador. Esa fila **abre una hoja** "Todas las opciones" con todos los botones (icono + texto, alineados a la izquierda) y un separador entre URL/llamada y quick replies. No se despliegan en línea. [observado, Android; mismo comportamiento documentado por Meta]
- Tras pulsar un quick reply, esa fila queda en gris (`#b0b0b0`, sin interacción). [observado]
- La respuesta saliente **cita** el mensaje: un bloque interno con radio de 8 pt, fondo `rgba(0,0,0,.04)` sobre verde (`#d5f3cf`), barra izquierda de 4 pt de color, nombre del negocio en semibold 15 pt, extracto de 1–3 líneas en 15 pt gris y miniatura a la derecha si hay media. Debajo va el texto del botón en 17 pt. [medido/observado]

### 2.5 Plantilla (template)

Orden: header → body → footer → hora → separador → botones, en **una sola burbuja** de 18 pt con colita.

- Header de texto: 17 pt semibold, negro.
- Body: 17 pt regular. Admite `*negrita*`.
- Footer: **15 pt** gris `#7f7f7f`, 4 pt por debajo del body.
- Hora a la derecha, en la línea del footer.
- Header de documento: el mismo panel gris interno que el mensaje de documento (§2.9).

### 2.6 Lista

- Burbuja: header 17 pt semibold, body 17 pt, footer 15 pt gris, hora, separador y botón con icono ≡ y el texto `boton` en verde. Todo dentro de la burbuja.
- Hoja inferior:
  - Panel blanco, esquinas superiores de ~12 pt y altura según el contenido.
  - Cabecera de ~56 pt con el **título centrado = texto del botón**, en 17 pt semibold.
  - A la derecha, un **círculo de 30 pt** `#eeeeef` con una X de 13 pt `#838388`.
  - Título de sección: 15 pt semibold `#757778`, con 16 pt de sangría y ~24 pt de aire encima.
  - Fila: título 17 pt negro y descripción 15 pt `#757778`. Padding vertical de ~12 pt (~76 pt de alto con descripción). **Sin chevron ni radio** en iOS.
  - Separador de 0,33 pt `#c6c6c8` con 16 pt de sangría izquierda que llega al borde derecho.
  - Pie centrado "Toca un elemento para seleccionarlo" en 15 pt gris, con el home indicator debajo.
  - Velo `rgba(0,0,0,.26)`.

### 2.7 CTA URL

- Una sola burbuja: media inset opcional, body, footer, hora, separador y botón ↗ + etiqueta en verde.
- **No hay fila de dominio** ni texto azul.

### 2.8 Carrusel (plantilla media card o interactivo)

- Burbuja de body normal (con hora y colita) y, debajo, tarjetas en scroll horizontal.
- Tarjeta de **~287 pt de ancho (~73 %)**. La primera se alinea con el borde izquierdo de las burbujas, las demás se desbordan hasta el borde de la pantalla y la siguiente asoma. Separación de **~4 pt**. [medido]
- Tarjeta blanca de 18 pt de radio, **sin colita y sin hora**. Imagen inset de 4 pt, radio de ~12 pt y proporción ~1,7:1. [medido]
- Texto de la tarjeta en 17 pt. En interactivo: título semibold 17 pt + descripción 17 pt.
- Botones como en §2.4: separador a todo el ancho, filas de 44 pt con icono ↩/↗ en verde.
- **Sin puntos de paginación.** [observado]
- Producto: panel `#f6f5f4` con título 17 pt semibold y precio 15 pt gris; botón "Ver".

### 2.9 Otros tipos

- **Documento:**
  - Panel interno `#f6f5f4` con radio de 10 pt y 4 pt de inset.
  - Dentro: icono de página blanca de 30×38 pt con la extensión en gris de 9 pt, nombre de archivo en 17 pt (hasta 2 líneas) y "243 KB • pdf" en 15 pt gris.
  - A la derecha, descarga en círculo de 30 pt con **borde verde `#4caf6a`** y flecha verde.
  - Debajo, caption de 17 pt con la hora.
- **Nota de voz:**
  - Triángulo de play gris `#6b6b6b` de 22 pt **sin círculo**.
  - Waveform de barras de 2 pt `#b3b3b3` con un punto verde de progreso de 12 pt al inicio.
  - Duración en 13 pt gris debajo de la waveform.
  - A la derecha, avatar de 44 pt con **micro verde** en la esquina inferior izquierda.
  - Hora abajo a la derecha.
- **Ubicación:**
  - Mapa inset de 4 pt, radio de 13 pt y ~155 pt de alto.
  - Nombre en 17 pt **regular**.
  - Dirección en 15 pt gris **subrayada**.
  - Hora en una línea propia a la derecha.
- **Contacto:**
  - Avatar genérico de 44 pt (degradado gris con silueta blanca), nombre en 17 pt semibold y chevron `›` gris.
  - Hora a la derecha.
  - Separador y **dos botones lado a lado** "Mensaje" | "Guardar contacto" (o uno solo, "Invitar a WhatsApp"), en verde, 17 pt y 44 pt de alto, con un separador vertical entre ellos.
  - **No** muestra teléfono, email ni empresa dentro de la burbuja: eso aparece al abrir el perfil.
- **Sticker:** sin burbuja. La hora va en una pastilla `rgba(0,0,0,.35)` con texto blanco debajo, a la derecha. [observado en oscuro]

### 2.10 Chrome iOS

- **Header** (~44 pt bajo la status bar):
  - Chevron `‹` **negro** de ~22 pt, sin texto.
  - Avatar de 36 pt.
  - Nombre en 17 pt semibold y subtítulo ("en línea") en 13 pt gris.
  - A la derecha, iconos **de línea**: videocámara de 28 pt y teléfono de 24 pt, en negro con ~0,6 de opacidad o gris `#8e8e93`. En oscuro, blancos.
  - Fondo `#f4f3f2`, sin borde visible.
- **Verificado:** insignia azul de Meta Verified junto al nombre. Tono `#1d9bf0`–`#0866ff` [estimado, sin captura iOS de negocio verificado].
- **Aviso de cifrado** (primer elemento del chat):
  - Tarjeta centrada de ~90 % de ancho, fondo `#ffefd1`, radio de 10 pt y padding de 6×12 pt.
  - Texto centrado de 13 pt con candado inicial y "Más información" en negrita.
  - En chats de negocio el texto es el de negocio: "Este negocio usa un servicio seguro de Meta…". [observado en Android; en iOS se asume el mismo texto]
- **Separador de fecha "Hoy":** pastilla centrada de 12–13 pt semibold, fondo blanco translúcido (`rgba(255,255,255,.9)`) con sombra de 0,5 pt, y 4×10 pt de padding. [estimado a partir de capturas Android/Web; sin captura iOS]
- **Composer:**
  - Barra `#f4f3f2`, con el padding inferior del safe area (**34 pt**) bajo el home indicator.
  - "+" negro de 24 pt.
  - Píldora blanca de 36 pt de alto y radio de 18 pt, con borde de 0,5 pt `#d1d1d6`, **icono de sticker dentro a la derecha** y sin placeholder visible.
  - Después, **cámara** y **micro** en negro, fuera de la píldora.
  - El botón de enviar (círculo verde con flecha) **solo aparece al escribir** y sustituye a cámara y micro.
- **Home indicator:** negro en claro y blanco en oscuro, de 134×5 pt, **encima** de la barra del composer.

---

**Antes de reutilizar esto fuera del equipo, valida** que las capturas de Meta y de Apple solo se usan como referencia interna (tienen derechos de sus autores) y revisa a ojo en un iPhone real los hex de modo oscuro marcados como [estimado].