3
Los cinco huecos fuera de guía
Mismo lenguaje que 1c y el turno 2. Reglas confirmadas contra la aplicación real: solo el administrador crea canales, se elimina y edita únicamente el mensaje propio, en el ajeno no hay “denunciar”, el hilo no reenvía al canal, y los avisos push ya están concedidos. Los recortes muestran solo la zona que cambia respecto a la pantalla ya cerrada.
3a
Vista de hilo · destino de “💬 2 respuestas”
Notas para implementación
— El mensaje original queda fijo como tarjeta con filete bronce a la izquierda: no es una burbuja, para que nadie lo confunda con una respuesta.
— El botón “Siguiendo” alterna a “Seguir” en contorno cuando no participas.
— Las respuestas usan la misma burbuja de 1c sin cambios.
— El botón “Siguiendo” alterna a “Seguir” en contorno cuando no participas.
— Las respuestas usan la misma burbuja de 1c sin cambios.
3b
Acciones de mensaje · pulsación larga
Recorte · mensaje de otra persona
Notas para implementación
— Pulsación larga de 400 ms + vibración corta; el mensaje se eleva sobre el scrim y conserva su color.
— Selector de reacciones sobre la burbuja (5 fijas + “＋”); la ya usada aparece con lavado dorado.
— Mensaje propio (móvil) y mensaje ajeno (recorte) llevan hojas distintas: en el ajeno solo hay reaccionar, responder en hilo y copiar. Editar y eliminar son exclusivos del propio, y no existe “denunciar” — es un chat interno de despacho.
— La hoja solo lista acciones que existen en la aplicación: fuera “Responder” suelto, “Reenviar” y “Fijar en el canal”. El propio queda en cuatro filas (responder en hilo, copiar, editar, eliminar) más las reacciones; el ajeno en dos más las reacciones.
— La hoja se cierra deslizando o tocando el scrim; nunca lleva botón “Cancelar”.
— Selector de reacciones sobre la burbuja (5 fijas + “＋”); la ya usada aparece con lavado dorado.
— Mensaje propio (móvil) y mensaje ajeno (recorte) llevan hojas distintas: en el ajeno solo hay reaccionar, responder en hilo y copiar. Editar y eliminar son exclusivos del propio, y no existe “denunciar” — es un chat interno de despacho.
— La hoja solo lista acciones que existen en la aplicación: fuera “Responder” suelto, “Reenviar” y “Fijar en el canal”. El propio queda en cuatro filas (responder en hilo, copiar, editar, eliminar) más las reacciones; el ajeno en dos más las reacciones.
— La hoja se cierra deslizando o tocando el scrim; nunca lleva botón “Cancelar”.
3c
Hoja de nuevo chat · vista de administrador
Recorte · vista del resto del equipo
Notas para implementación
— Hoja al 80% del alto, no pantalla completa: se ve que la lista sigue detrás.
— Solo el administrador crea canales (está en la seguridad de la base de datos). El selector de dos tarjetas existe únicamente en su vista; al resto del equipo la hoja le ofrece solo conversación directa, y una nota explica a quién pedir un canal nuevo. No es un botón deshabilitado: no aparece.
— Para el admin, la elección Privada / Canal cambia solo el destino de la búsqueda; no hay segundo paso.
— Tocar una persona abre la conversación directamente (crear y abrir es la misma acción).
— Si el equipo crece, esta lista necesita secciones por departamento.
— Solo el administrador crea canales (está en la seguridad de la base de datos). El selector de dos tarjetas existe únicamente en su vista; al resto del equipo la hoja le ofrece solo conversación directa, y una nota explica a quién pedir un canal nuevo. No es un botón deshabilitado: no aparece.
— Para el admin, la elección Privada / Canal cambia solo el destino de la búsqueda; no hay segundo paso.
— Tocar una persona abre la conversación directamente (crear y abrir es la misma acción).
— Si el equipo crece, esta lista necesita secciones por departamento.
3d
Estados vacíos · sin chats, canal nuevo, sin resultados
Recorte · canal recién creado
Recorte · búsqueda sin resultados
Notas para implementación
— Todo estado vacío lleva una sola acción primaria; nunca dos botones bronce.
— El estado vacío usa el logotipo real (logo.png) sobre disco crema #f2ede6 de 172px: no hay ilustración pendiente de encargo.
— El vacío de canal nuevo va donde irían los mensajes, con el composer normal debajo.
— La búsqueda sin resultados mantiene el término escrito y ofrece cómo reformular.
— El estado vacío usa el logotipo real (logo.png) sobre disco crema #f2ede6 de 172px: no hay ilustración pendiente de encargo.
— El vacío de canal nuevo va donde irían los mensajes, con el composer normal debajo.
— La búsqueda sin resultados mantiene el término escrito y ofrece cómo reformular.
3e
Estados de sistema PWA · sin conexión, envío fallido, instalación
Recorte · cómo añadirlo a la pantalla de inicio
Recorte · avisos de sistema
Notas para implementación
— Tres estados de mensaje propio: enviando (bronce sólido; el estado se comunica solo en la fila meta, con reloj y “Enviando…”, para no rebajar el contraste del texto), fallido (lavado bronce con borde discontinuo y “Reintentar”) y enviado (bronce sólido + checks). Nunca se pierde el texto escrito.
— Sin conexión: banda ámbar bajo la cabecera y composer apagado, no bloqueado — se puede escribir y queda en cola.
— El rojo terroso #a04a3a solo marca el fallo; el resto sigue en paleta.
— En iPhone no existe botón que instale: Safari no lo permite. La hoja explica el gesto real (Compartir → Añadir a pantalla de inicio) y por qué importa: sin ello iOS no entrega push. Aparece una vez por dispositivo, solo si se abre desde el navegador, y no vuelve si se descarta.
— En Android sí hay instalación con un toque: ahí esta hoja se sustituye por un único botón “Instalar”.
— Sin conexión: banda ámbar bajo la cabecera y composer apagado, no bloqueado — se puede escribir y queda en cola.
— El rojo terroso #a04a3a solo marca el fallo; el resto sigue en paleta.
— En iPhone no existe botón que instale: Safari no lo permite. La hoja explica el gesto real (Compartir → Añadir a pantalla de inicio) y por qué importa: sin ello iOS no entrega push. Aparece una vez por dispositivo, solo si se abre desde el navegador, y no vuelve si se descarta.
— En Android sí hay instalación con un toque: ahí esta hoja se sustituye por un único botón “Instalar”.
Con esto hay diez pantallas y seis recortes. Siguiente: “monta el paquete de entrega” · “falta el estado de canal archivado” · “ajusta la hoja de 3b a mensaje ajeno”.
Conversación cerrada en 1c. De ella heredan: bronce profundo #8b6b47 en todo lo primario, avatares en escuadra suave (radio 12–14px), nombre de pantalla en Marcellus, tarjeta blanca con borde #e8e2d8 y píldoras de 99px. El tema oscuro no se maqueta: en Ajustes aparece solo como opción, con el navy de la plataforma.
2a
Lista de chats · pantalla de inicio de la PWA
Notas para implementación
— Fila de 72px de alto (46px de avatar + 13px arriba y abajo): cómoda para el dedo y con filete solo entre filas.
— Canales = # en lavado dorado; personas = iniciales con punto de presencia (verde en línea, gris ausente).
— Chips de filtro sustituyen a la barra de pestañas de Cliq, que no llevamos.
— Botón flotante en escuadra suave para no competir con el círculo de envío del composer.
— Canales = # en lavado dorado; personas = iniciales con punto de presencia (verde en línea, gris ausente).
— Chips de filtro sustituyen a la barra de pestañas de Cliq, que no llevamos.
— Botón flotante en escuadra suave para no competir con el círculo de envío del composer.
2b
Drawer · navegación y estado
Notas para implementación
— Panel de 312px (deja 81px de fondo visible para cerrar tocando fuera); scrim rgba(29,26,21,.42).
— Cabecera oscura: es el único sitio donde el navy/negro de marca entra en el tema claro, y ancla el selector de estado.
— Iconos de línea a 22px, trazo 1.7px (1.9px el activo): burbuja con líneas de texto, almohadilla de canal, dos personas, documento con esquina doblada y controles. Sustituibles por el set real de la plataforma si ya existe.
— Fila activa con lavado #f7f1e8, no con barra lateral.
— Cabecera oscura: es el único sitio donde el navy/negro de marca entra en el tema claro, y ancla el selector de estado.
— Iconos de línea a 22px, trazo 1.7px (1.9px el activo): burbuja con líneas de texto, almohadilla de canal, dos personas, documento con esquina doblada y controles. Sustituibles por el set real de la plataforma si ya existe.
— Fila activa con lavado #f7f1e8, no con barra lateral.
2c
Galería de archivos · pestañas y agrupación por mes
Notas para implementación
— Pestañas subrayadas en bronce (no píldoras): así no compiten con los chips de filtro de 2a.
— Rejilla de 3 columnas con gap de 7px y radio 12px; la última celda del mes actúa como “+6 más”.
— El bloque inferior está en la maqueta solo como muestra de Documentos y Enlaces: en la app cada pestaña ocupa la pantalla completa.
— Rayado diagonal = marcador de posición de miniatura real.
— Rejilla de 3 columnas con gap de 7px y radio 12px; la última celda del mes actúa como “+6 más”.
— El bloque inferior está en la maqueta solo como muestra de Documentos y Enlaces: en la app cada pestaña ocupa la pantalla completa.
— Rayado diagonal = marcador de posición de miniatura real.
2d
Ajustes · selector de tema y notificaciones
Notas para implementación
— El selector de tema se muestra con miniaturas reales de la conversación, no con texto: se elige viendo.
— Interruptores: pista #8b6b47 encendida / #e8e2d8 apagada, 52×32 con pomo de 26px.
— “Cerrar sesión” en rojo terroso #a04a3a, el único color fuera de la paleta y solo para acción destructiva.
— Nada de secciones extra: si algo no es tema, notificaciones o cuenta, no entra.
— Interruptores: pista #8b6b47 encendida / #e8e2d8 apagada, 52×32 con pomo de 26px.
— “Cerrar sesión” en rojo terroso #a04a3a, el único color fuera de la paleta y solo para acción destructiva.
— Nada de secciones extra: si algo no es tema, notificaciones o cuenta, no entra.
Con esto están las cinco pantallas de la etapa. Siguiente: “ajusta 2a a filas de 80px” · “el drawer sin cabecera oscura” · “prepárame el paquete de entrega para Claude Code”.
1
Hoja de tokens y pantalla de conversación
Módulo 3 · Etapa 8.4 — maquetas de referencia del chat móvil (PWA). El contrato de color aplicado a roles y la pantalla ancla. La conversación cerrada es 1c, ampliada con menciones, vista previa de enlace y audio; 1b y 1d quedan como registro de lo descartado.
Supuestos que he tomado
Tipografía: Montserrat para toda la UI (según la guía) y Marcellus solo en el nombre de canal de la cabecera, que es lo que hace la tarjeta de visita. Si prefieres Montserrat también ahí, lo cambio en un minuto.
Decisión cerrada · accesibilidad
El relleno de la burbuja propia es #8b6b47: 4,7:1 con el texto, por encima del 4,5:1 que exige el estándar. Es un punto más oscuro que el bronce de la tarjeta de visita y no rompe la armonía — el degradado va de ahí hacia abajo (#7e6040), nunca hacia arriba. #a07e58 se queda en acentos. 1b conserva el bronce plano solo como registro.
1a
Hoja de tokens · el contrato de color
spainDoctors
Chat interno · Etapa 8.4
Chat móvil · tema claro
Todo lo que en Cliq es azul, aquí es bronce. Un solo bronce de marca; los dorados solo acompañan.
Fondos y superficies
Fondo de app
Lienzo de conversación, lista y ajustes
#faf8f4
Superficie elevada
Cabecera, composer, tarjetas de archivo, chips
#ffffff
Superficie cálida
Burbuja ajena y campo del composer
#f2ede6
Lavado dorado
Avatares de inicial, píldora de día, icono PDF
#f0e9df
Burbujas
Burbuja propia — bronce, a la derecha.
20:07✓✓
Relleno #8b6b47 · texto #fffaf3 · hora 75% · checks #f0dcc0
Burbuja ajena — crema, a la izquierda.
20:06
Relleno #f2ede6 · borde #e8e2d8 · texto #1d1a15
Regla cerrada: el relleno de la burbuja propia es #8b6b47 — 4,7:1 con texto #fffaf3, por encima del 4,5:1 del estándar. En degradado, de #8b6b47 a #7e6040: nunca hacia arriba, porque el extremo claro sería el que incumple. #a07e58 queda para acentos, nombres de autor e iconos — nunca como fondo de texto (3,8:1).
Texto
Principal · cuerpo de mensaje, nombres
#1d1a15
Secundario · último mensaje, descripciones
#5d564b
Terciario · horas, metadatos, placeholders
#8a8175
Acentos, badges y estados
Bronce de burbuja
#8b6b47
Bronce de acento
#a07e58
Dorado · enlaces
#c5a179
Dorado claro · hover
#d4b183
Presencia en línea
#5f8a4a
3
Badge de no leídos
👍2
Chip de reacción
HOY
Separador de día
Separadores y geometría
Filete interno#efe9df
Borde de tarjeta#e5dfd5
Radio burbuja16px / 5px cola
Radio tarjeta14px
Píldoras y botones99px
Sombra de tarjeta0 1px 2px 5%
Tipografía y tacto
Marcelluscanal · títulos
Montserrattoda la UI
Cuerpo de mensaje15 / 1.45
Nombre y meta12 · 10.5
Fila de lista / composer72 · 48px
Área táctil mínima44px
1b
Conversación · densidad Cliq, bronce plano
Notas para implementación
— Estructura y densidad calcadas de las capturas de Cliq: solo cambia el color y la tipografía.
— Bronce plano #a07e58 en burbuja propia (el que pide la guía).
— La píldora de día queda pegada arriba al desplazar (sticky).
— La lista se desplaza dentro del móvil: hay más mensajes por encima.
— Bronce plano #a07e58 en burbuja propia (el que pide la guía).
— La píldora de día queda pegada arriba al desplazar (sticky).
— La lista se desplaza dentro del móvil: hay más mensajes por encima.
1c
Conversación · agrupada por autor, composer flotante
Recorte · menciones
PM
Pablo Martín
Se lo pregunto a @Ana Cortés cuando vuelva de la reunión.
10:02
@
Te han mencionado
A
Ana Cortés
@Vicente ¿me confirmas el importe antes de las 14:00?
10:04
Recorte · autocompletado de menciones
Pregunta a @lu|
↑
Recorte · vista previa de enlace
Esto lo explica bien, dura 8 minutos youtu.be/4kR2p
10:12✓✓
A
La instrucción de la Agencia es de ayer
Instrucción 3/2026 sobre retenciones profesionales
Criterio aplicable a las facturas emitidas desde el 1 de julio.
agenciatributaria.es
Recorte · audio en la burbuja
0:12 / 1:38
1,4 MB
10:21✓✓
PM
0:31 / 1:32
1,2 MB
Notas para implementación
— Hora y checks fuera de la burbuja: el cuerpo del mensaje respira y no hay hueco reservado.
— Bronce de burbuja #8b6b47 → 4,7:1 con el texto (cumple el 4,5:1 del estándar).
— Avatares con radio 12px (escuadra suave) en vez de círculo, como la tarjeta de visita.
— Composer flotante sobre degradado; la lista pasa por debajo.
— Menciones: el @Nombre va en píldora #f0e9df con texto #7d5c34 (5,05:1), radio 5px. Cuando el mencionado eres tú, el turno completo se envuelve en #fdf7ee con regla lateral de 3px y rótulo “Te han mencionado”; la píldora sube a #f4e6d0. El resaltado es del turno, no de la burbuja.
— Autocompletado: se despliega sobre el composer al teclear “@”, filtra por coincidencia (resaltada en bronce), muestra rol y presencia, fila de 52px, y cierra con “Todo el canal” separado por filete. Enter confirma la fila activa.
— Enlaces: dentro de la burbuja, tarjeta blanca de radio 16px con la miniatura a sangre — la burbuja pasa a padding de 6px para que la tarjeta respire por igual. La variante sin imagen no lleva tarjeta: filete bronce de 2px con título, una línea de descripción y dominio en monoespaciada.
— Audio: botón de reproducción de 38px, onda de 17 barras (reproducido a #f7e9d4, pendiente al 42%) en la burbuja propia y barra de progreso con pomo en la ajena. Siempre tiempo transcurrido / total y tamaño.
— Todo texto sobre bronce va en #fffaf3 a opacidad plena, incluidos metadatos de audio y enlaces subrayados: el crema apagado y las opacidades bajan de 4,5:1. El tono suave se reserva para la onda y otros gráficos, que solo necesitan 3:1.
— Bronce de burbuja #8b6b47 → 4,7:1 con el texto (cumple el 4,5:1 del estándar).
— Avatares con radio 12px (escuadra suave) en vez de círculo, como la tarjeta de visita.
— Composer flotante sobre degradado; la lista pasa por debajo.
— Menciones: el @Nombre va en píldora #f0e9df con texto #7d5c34 (5,05:1), radio 5px. Cuando el mencionado eres tú, el turno completo se envuelve en #fdf7ee con regla lateral de 3px y rótulo “Te han mencionado”; la píldora sube a #f4e6d0. El resaltado es del turno, no de la burbuja.
— Autocompletado: se despliega sobre el composer al teclear “@”, filtra por coincidencia (resaltada en bronce), muestra rol y presencia, fila de 52px, y cierra con “Todo el canal” separado por filete. Enter confirma la fila activa.
— Enlaces: dentro de la burbuja, tarjeta blanca de radio 16px con la miniatura a sangre — la burbuja pasa a padding de 6px para que la tarjeta respire por igual. La variante sin imagen no lleva tarjeta: filete bronce de 2px con título, una línea de descripción y dominio en monoespaciada.
— Audio: botón de reproducción de 38px, onda de 17 barras (reproducido a #f7e9d4, pendiente al 42%) en la burbuja propia y barra de progreso con pomo en la ajena. Siempre tiempo transcurrido / total y tamaño.
— Todo texto sobre bronce va en #fffaf3 a opacidad plena, incluidos metadatos de audio y enlaces subrayados: el crema apagado y las opacidades bajan de 4,5:1. El tono suave se reserva para la onda y otros gráficos, que solo necesitan 3:1.
1d
Conversación · editorial de despacho, sin burbuja ajena
Notas para implementación
— El mensaje ajeno no lleva burbuja: gutter de 34px con avatar y hora, filete inferior por turno. Cabe ~35% más conversación en pantalla.
— Radio asimétrico 4/14px y monoespaciada en metadatos: lenguaje de expediente, no de mensajería genérica.
— PDF y enlace como piezas de documento, sin tarjeta blanca.
— Riesgo: se aleja de las convenciones de Cliq; el equipo puede notarlo “menos chat”.
— Radio asimétrico 4/14px y monoespaciada en metadatos: lenguaje de expediente, no de mensajería genérica.
— PDF y enlace como piezas de documento, sin tarjeta blanca.
— Riesgo: se aleja de las convenciones de Cliq; el equipo puede notarlo “menos chat”.
Siguiente paso según la guía: cerrar la conversación antes de tocar las demás. Pruébalas en el iPhone y dime — “sigo con 1c pero con la hora dentro como 1b” · “bronce profundo en todas” · “el gutter de 1d aplicado a 1b”. Cuando la cierres, sigo con lista de chats, drawer, galería y ajustes heredando de la elegida.