00-paper-reference.md

Referencia Paper — ATRIO

Campo	Valor
File ID	`01KYY20FFWZAN9PPH1RFEGJFVB`
URL	https://app.paper.design/file/01KYY20FFWZAN9PPH1RFEGJFVB
Nombre	ATRIO — Daily UX 2026-08-01
Fecha	2026-08-01
Estado UI	Nivel 3 — 35 artboards UI/UX + 5 etiquetas de sección (canvas jerárquico)

Mapa del canvas (bandas verticales, CRON §5.2)

Lectura arriba → abajo. Etiquetas §N encima de cada banda.

§	Banda	Contenido
1	UX PROCESS	UX-00 … UX-10 (2 filas)
2	DESIGN SYSTEM + DESKTOP PUBLIC	00 DS · Home · Expo · Detalle · Plan · Entradas · Confirmación · Visita
3	MOBILE PUBLIC	Home · Expo · Detalle · Visita · Entradas
4	STAFF / ADMIN L3	Login · Dashboard · Solicitudes · CMS list · CMS edit
5	SYSTEM STATES	Empty · Loading · Error red · 404 · Validación · Forbidden

A. UI de producto (24)

#	Artboard	Dispositivo
00	Design System	Desktop
01–02	Home	Desktop + Mobile
03–04	Exposiciones / Detalle	Desktop
05–07	Visita / Entradas / Confirmación	Desktop
08–10	Empty / Loading / Error	Desktop
11–14	Exposiciones / Detalle / Visita / Entradas	Mobile
15–18	Staff / 404 / Validación / Visita	Desktop
19–23	Login / Staff L3 / CMS list / CMS edit / 403	Mixed

B. Proceso UX (11) — alineado a markdown del case

Artboard	Contenido	Doc fuente
UX-00 Research cover	Portada proceso UX	—
UX-01 Stakeholders	Mapa influencia × interés	`02`
UX-02 Personas	Marta, Luis, Noa, Clara	`02`
UX-03 JTBD	3 jobs + barreras	`02`
UX-04 User stories	Épicas E1–E4 MoSCoW + AC	`02` / `19`
UX-05 Journey maps	Luis + Marta/Clara	`02`
UX-06 Service blueprint	Capas + fallos	`02`
UX-07 Site map + IA	Público + JWT + CMS L3	`03`
UX-08 Flujos de usuario	F1–F5 diagramas	`04`
UX-09 Modelo datos + permisos	ER + matriz L3	`05` / `03`
UX-10 Definición + métricas	Problema, valor, north star	`01`

Total: 35 artboards hi-fi en Paper.

Media real

assets/exhibitions/*.jpg vía paper-asset:// en UI de producto.

01-project-definition.md

Abrir documento

01 — Definición del proyecto: ATRIO

5.1 Identidad

Campo	Valor
Nombre	ATRIO
Significado	Del atrio del museo: umbral entre la calle y las salas de exposición
Eslogan	El umbral entre la ciudad y la obra
Una frase	Web pública del museo municipal para descubrir exposiciones, planificar la visita y solicitar entradas o grupos
Descripción ejecutiva	ATRIO es el canal digital del Museo Municipal de Rivera: catálogo editorial de exposiciones con ficha, información práctica de visita (horarios, tarifas, acceso, accesibilidad) y captura de demanda de entradas/grupos/escolares sin checkout online en v1. Reduce fricción frente a redes dispersas y llamadas a taquilla.
Sector	Cultura / Museos / Administración local
Tipo	Web pública institucional + panel staff ligero de leads
Plataforma principal	Web responsive (desktop-first editorial, mobile usable)
Secundarias	Email de confirmación (stub v1); kiosco / ticketing online (roadmap)
Mercado	España/Latam — museo municipal de ciudad mediana (constructo; Rivera como sede ficticia de trabajo)
Idioma UI	Español
Otros idiomas	Catalán / inglés (roadmap)

5.2 Problema

Tipo	Contenido
Principal	Visitantes y docentes no encuentran en un solo sitio qué se expone, cuándo y cómo reservar o comprar entrada
Secundarios	Contenido en PDF/Instagram/carteles; colas de info en taquilla; grupos escolares sin canal claro; comunicación sin rastro de demanda
Quién	Ciudadanos, turistas de paso, docentes, familias, staff de comunicación
Hoy	Llamadas, email genérico, redes, cartel en fachada
Deficiencias	Info desactualizada; sin ficha de exposición; sin registro de solicitudes
Coste	Visitas perdidas, personal de taquilla saturado, baja ocupación en franjas tranquilas, mala experiencia turística
Oportunidad	Web ligera con catálogo vivo + captura de demanda

Clasificación de conocimiento

Clase	Ejemplos
Supuestos de diseño	El museo no tiene e-commerce de tickets; un lead es suficiente en v1; público con alfabetización digital media-alta
Hipótesis	Un formulario de 5 campos reduce llamadas de grupos ≥30 %
Decisiones	Sin pago online v1; staff con `STAFF_KEY` no OAuth; stack Angular/Nest/Neon

5.3 Objetivos

Tipo	Objetivos
Negocio	Aumentar visitas planificadas; reducir consultas repetitivas; visibilidad de temporal
Usuario	Saber qué ver, cuándo ir, cómo llegar, cómo pedir entrada/grupo
Producto	Catálogo + plan de visita + formulario + bandeja staff de solicitudes
Experiencia	Claridad editorial, confianza institucional, lectura cómoda (WCAG AA)
Técnicos	API de contenido; seed realista; CORS; sin secretos en git
No objetivos	Pago online, membresía, app nativa, multi-museo SaaS, i18n completo
Restricciones	Stack fijo cron; calidad portfolio aunque Nivel 1 de alcance
Riesgos	Contenido desactualizado; expectativa “comprar ya”; clave staff débil en prod

5.4 Métricas

Métrica	Definición
North Star	Solicitudes de visita/entrada completadas / semana
Activación	% visitas que abren ≥1 ficha de exposición
Conversión	% que envían formulario de entradas
Retención	Visitas recurrentes al catálogo (30 d)
Tarea	Tiempo a info de visita útil < 60 s
Abandono	Formulario iniciado sin envío
Error	Tasa de fallos POST visit-requests
Staff	Tiempo medio NEW → CONTACTED
A11y	0 issues críticos automatizados en journey principal
LCP	Home < 2,5 s en 4G medio

Complejidad y calidad

Alcance: Nivel 1 (web pública + leads + staff ligero).
Calidad: barra completa del cron §6.1 (paridad documental y de estados con proyectos de mayor nivel).

02-ux-research-strategy.md

Abrir documento

02 — Investigación UX y estrategia · ATRIO

Nota metodológica: No hay investigación primaria. Perfiles, JTBD y journeys son constructos de diseño. Validar con observación en taquilla y entrevistas a docentes antes de producción.

6.1 Stakeholders

Stakeholder	Influencia	Interés	Necesidades	Riesgos	Relación
Dirección museo	Alta	Alta	Visitas, reputación, servicio público	Scope político	Propietario
Comunicación / web	Media	Alta	Contenido actualizable, SEO	Burnout editorial	Editor
Taquilla / atención	Media	Alta	Menos llamadas repetidas	Resistencia al cambio	Operador
Docentes	Baja	Alta	Grupos, confirmación	Abandono si no responden	Usuario clave
Visitante ciudadano	Baja	Media	Claridad, horarios, a11y	No vuelve	Usuario principal
Turista de paso	Baja	Media	Móvil, 1 expo “imperdible”	Bounce	Usuario secundario
Ayuntamiento	Alta	Media	Transparencia, accesibilidad	Plazos y pliegos	Patrocinador
Conservación	Media	Media	Correcta presentación de obra	Conflictos de copy	Contribuidor
Legal / privacidad	Alta	Media	RGPD en formularios	Multas	Gatekeeper
Soporte técnico municipal	Media	Baja	Hosting estable	Downtime	Dependencia

6.2 Perfiles de usuario

Perfil 1 — Marta “Docente” (primaria)

Campo	Detalle
Rol	Profesora de secundaria, organiza salidas culturales
Edad	38
Contexto	1–2 visitas al museo al año con 20–28 alumnos
Experiencia digital	Media-alta (email del centro, Classroom)
Motivaciones	Cumplir programación; logística simple y confirmable
Necesidades	Formulario de grupo, fechas, respuesta en 48 h
Objetivos	Reservar visita escolar a “Luz de sala” en abril
Frustraciones	“No sé si hay cupo ni a quién escribir”
Limitaciones	Solo puede gestionar en recreos; móvil a veces
Dispositivos	Android + portátil del centro
Entorno	Sala de profesores; wifi irregular
Accesibilidad	Prefiere formularios cortos, labels claros
Cita	«Si puedo pedir grupo en cinco minutos, lo hago.»
Escenario	Martes 11:20: rellena formulario escolar para 24 personas el 18/04

Perfil 2 — Luis “Visitante local”

Campo	Detalle
Rol	Jubilado reciente, visita culturales de mañana
Edad	62
Contexto	Vive en la ciudad; busca temporales nuevas
Experiencia digital	Media; prefiere web clara
Motivaciones	Ver algo nuevo sin colas ni sorpresas de horario
Necesidades	Letra legible, horarios, tarifas, acceso
Objetivos	Confirmar si la temporal está abierta el domingo
Frustraciones	Horarios confusos en redes; PDFs
Dispositivos	iPad + portátil en casa
Entorno	Casa, luz diurna
Accesibilidad	Texto ≥16px; contraste alto; sin jerga
Cita	«Solo quiero saber si está abierta la temporal.»
Escenario	Sábado noche: mira home y ficha, planifica domingo 11:00

Perfil 3 — Noa “Turista 48 h”

Campo	Detalle
Rol	Visitante de fin de semana
Edad	27
Contexto	48 h en la ciudad; 1 actividad cultural
Experiencia digital	Alta
Motivaciones	Una exposición “imperdible” bien fotografiada
Necesidades	Mobile-first, hero claro, CTA entradas
Objetivos	Decidir en 2 minutos si va al museo o a otro plan
Frustraciones	Webs municipales anticuadas
Dispositivos	iPhone
Entorno	4G en la calle
Accesibilidad	Touch targets grandes
Cita	«Si se ve bien en el móvil, compro o voy.»
Escenario	Viernes 18:00: abre home en el tren, guarda “Planificar visita”

Perfil 4 — Clara “Comunicación museo” (staff)

Campo	Detalle
Rol	Técnica de comunicación y públicos
Edad	34
Contexto	Gestiona web, redes y bandeja de visitas de grupo
Experiencia digital	Alta
Motivaciones	Responder leads a tiempo; medir demanda
Necesidades	Listado de solicitudes NEW/CONTACTED/CLOSED
Objetivos	Bajar tiempo de primera respuesta a < 1 día laborable
Frustraciones	Emails perdidos en bandeja compartida
Dispositivos	MacBook en oficina
Cita	«Necesito ver quién escribió ayer y marcarlo contactado.»
Escenario	Lunes 09:00: abre /staff, filtra NEW, llama a Marta

6.3 Jobs To Be Done

JTBD 1 — Visitante, decidir visita

Cuando tengo un hueco cultural, quiero ver qué hay abierto y la ficha de la exposición, para decidir si merezco el desplazamiento.

JTBD 2 — Docente, grupo escolar

Cuando organizo una salida, quiero solicitar plaza de grupo y dejar mis datos, para recibir confirmación sin depender del email genérico.

JTBD 3 — Staff, gestionar demanda

Cuando llegan peticiones, quiero verlas ordenadas y cambiar su estado, para no perder leads y medir carga de trabajo.

JTBD	Barreras	Alternativas actuales
1	Web rota, sin fotos	Instagram, boca a boca
2	Sin formulario	Teléfono taquilla
3	Email caótico	Excel manual

6.4 Historias de usuario (épicas)

Épica E1 — Descubrir exposiciones

ID	Historia	Prioridad	AC (resumen)	Métrica
E1-1	Como visitante, quiero ver exposiciones publicadas en home y listado, para elegir qué visitar	Must	Solo `published`; cards con foto, título, fechas, estado	exhibition_list_view
E1-2	Como visitante, quiero filtrar por Actual/Próxima/Pasada, para acotar	Should	Query `status`; empty si 0	filter_apply
E1-3	Como visitante, quiero abrir ficha por slug, para leer cuerpo y comisariado	Must	404 si no existe; CTA entradas/visita	exhibition_view
E1-4	Como sistema, quiero seed de 3 exposiciones realistas, para demo	Must	Seed idempotente o documentado	—

Épica E2 — Planificar visita

ID	Historia	Prioridad	AC	Métrica
E2-1	Como visitante, quiero horarios, tarifas, dirección y a11y, para planificar el día	Must	Datos de `/visit-info`; error reintentable	visit_plan_view
E2-2	Como visitante, quiero CTA a solicitar entradas desde visita y detalle	Must	Links a `/entradas` con exhibitionId opcional	cta_click

Épica E3 — Solicitar entradas / grupo

ID	Historia	Prioridad	AC	Métrica
E3-1	Como visitante/docente, quiero enviar solicitud con nombre, email, personas y tipo	Must	Validación; 201; status NEW	visit_request_submit
E3-2	Como visitante, quiero ver confirmación clara tras envío	Must	Pantalla success con email	—
E3-3	Como visitante, quiero mensajes de error de validación y de red	Must	Campos + banner	visit_request_error

Épica E4 — Staff solicitudes

ID	Historia	Prioridad	AC	Métrica
E4-1	Como staff, quiero listar solicitudes con clave, para gestionar demanda	Should→Must v1.1	Header x-staff-key; 401 si no	staff_list
E4-2	Como staff, quiero marcar CONTACTED/CLOSED	Must staff	PATCH status	staff_status_change

MoSCoW

Must	Should	Could	Won’t ahora
Catálogo, ficha, visita, form, estados, seed, staff básico	Email real, CMS exposiciones	Colección, agenda educativa, i18n	Pago online, app nativa, multi-museo

Casos de error / alternativos (E3)

Email inválido → no envía, mensaje bajo campo
API caída → banner + teléfono de recepción
exhibitionId inválido → 400
Doble submit → botón disabled en sending

6.5 Journey maps

Journey A — “Sábado de exposición” (Luis)

Fase	Acción	Pensamiento	Emoción	Touchpoint	Problema	Oportunidad	Métrica
Descubrir	Abre home	“¿Qué hay?”	Curiosidad	Home hero	Hero genérico	Foto real + temporal	page_view
Explorar	Scroll / listado	“¿Me interesa?”	Interés	Cards	Sin foto	Media real	list_view
Evaluar	Ficha	“¿Cuándo?”	Confianza	Detalle	Texto denso	Tipografía display	exhibition_view
Planificar	/visita	“¿Abre domingo?”	Alivio	Plan visita	Info incompleta	Bloques claros	visit_plan_view
Decidir	Va en persona	—	Satisfacción	Offline	—	—	—

Journey B — “Salida escolar” (Marta)

Fase	Acción	Emoción	Touchpoint	Oportunidad
Necesidad	Programa trimestre	Estrés	—	—
Descubrir	Ficha temporal	Esperanza	Detalle	CTA grupo
Solicitar	Form escolar 24 pax	Ansiedad	/entradas	Tipos SCHOOL
Esperar	Email (futuro)	Impaciencia	—	SLA 2 días
Staff	Clara marca CONTACTED	—	/staff	Estado visible

Journey C — “Lunes de bandeja” (Clara)

Fase	Acción	Touchpoint
Entrar	/staff + clave	Staff
Filtrar	NEW	Staff filters
Contactar	mailto / teléfono	Lista
Cerrar	CONTACTED → CLOSED	PATCH

6.6 Service blueprint (resumen)

Capa	Elementos
Usuario	Navega, lee, envía form
Frontstage	Web ATRIO, confirmación UI, (futuro) email, taquilla
Backstage	API Nest, Prisma, Neon, panel staff, bandeja coms
Soporte	Hosting, DNS, backups Neon
Evidencias	Solicitud NEW en BD, estados, seed exposiciones
Fallos	API caída → error UI + teléfono; clave staff filtrada → rotar STAFF_KEY; contenido viejo → owner editorial
Recuperación	Reintentar; canal telefónico documentado

Riesgos de investigación

No validado con docentes reales.
Rivera/sede es constructo de diseño.
Supuesto de “sin checkout” puede frustrar si el museo ya vende online.

03-information-architecture.md

Abrir documento

03 — Arquitectura de información · ATRIO

Mapa del sitio (público)

/ (Home)
├── /exposiciones
│   └── /exposiciones/:slug
├── /visita
├── /entradas?exhibitionId?
├── /staff                    [interno, clave]
└── (footer) Aviso / Privacidad / Accesibilidad — copy legal stub

Navegación

Tipo	Items
Principal	Exposiciones, Visita
CTA	Entradas
Footer	Contacto, Staff (discreto), legal
Contextual	Desde ficha → Visita / Entradas (con exhibitionId)

Taxonomía exposiciones

Dimensión	Valores
status	CURRENT, UPCOMING, PAST
type	TEMPORARY, PERMANENT, INSTALLATION
published	boolean
room	texto libre (Sala 2, Planta 1…)
fechas	startsOn, endsOn (null = permanente abierta)

Inventario de contenido

Tipo	Owner	Prioridad	Update	Visibilidad
Exposición	Comunicación	Must	Por apertura	published
VisitInfo	Operaciones	Must	Estacional	público API
VisitRequest	Sistema + staff	Must	Tiempo real	staff only list
Legal	Legal	Should	Anual	footer

Matriz de permisos

Rol	Módulo	Ver	Crear	Editar	Eliminar	Aprobar
Público anónimo	Exposiciones publicadas	✅	—	—	—	—
Público	VisitInfo	✅	—	—	—	—
Público	VisitRequest	—	✅ (propio lead)	—	—	—
Staff (clave)	VisitRequest list/status	✅	—	estado	—	CONTACTED/CLOSED
Admin CMS	Exposiciones	Could v2	Could	Could	Could	—

Nota v1: no hay auth de usuario final; staff = shared secret STAFF_KEY (documentar rotación en prod).

04-user-flows.md

Abrir documento

04 — Flujos de usuario · ATRIO

F1 — Descubrir y abrir exposición


Entrada	Home, nav Exposiciones, deep link slug
Pasos	1 Home/listado → 2 Filtro opcional → 3 Card → 4 Detalle
Prerrequisitos	Exposición published
Éxito	Ficha legible + CTAs
Errores	API down → banner reintentar; slug 404 → mensaje + link listado
Analítica	page_view, exhibition_list_view, exhibition_view, filter_apply

F2 — Plan de visita


Entrada	Nav Visita, CTA desde home/detalle
Pasos	1 Carga visit-info → 2 Lee bloques → 3 CTA entradas
Errores	Fallo API → error + reintentar
Analítica	visit_plan_view, cta_click

F3 — Solicitar entradas / grupo


Entrada	/entradas, CTA, query exhibitionId
Pasos	1 Form → 2 Validación cliente → 3 POST → 4 Success
Campos	name, email, phone, visitDate, partySize, requestType, message, exhibitionId
Tipos	INDIVIDUAL, GROUP, SCHOOL
Errores	Validación, 400 exhibition, 5xx red
Recuperación	Mensaje + teléfono recepción
Analítica	visit_request_start, submit success/error

F4 — Staff gestiona solicitudes


Entrada	/staff (footer)
Pasos	1 Clave → 2 Cargar → 3 Filtrar → 4 PATCH status
Errores	401 clave; red
Salida	Lista actualizada

Estados de producto

Estado	Dónde	Comportamiento
Empty listado	/exposiciones, home	Copy + link visita
Loading	listados, visita, staff	Texto/skeleton
Error red	todos	Banner + reintentar
Validación	form	Mensajes
Success	form	Confirmación sin auto-redirect
404 ficha	detalle	Mensaje + volver
401 staff	staff	“Clave incorrecta”

Diagrama de flujo (textual)

[Home] → [Exposiciones] → [Detalle] → [Visita] → [Entradas] → [Success]
                ↓                         ↑           ↓
             [Empty]                   [Error]    [Staff lista]

05-data-model.md

Abrir documento

05 — Modelo de datos · ATRIO

Diagrama ER (simplificado)

Exhibition 1───* VisitRequest

Exhibition

Campo	Tipo	Notas
id	cuid PK
slug	string unique	URL
title, subtitle	string
summary, body	text	listado / detalle
coverImage	string	path público `/images/…`
type	enum TEMPORARY\|PERMANENT\|INSTALLATION
status	enum CURRENT\|UPCOMING\|PAST
startsOn	date
endsOn	date?	null permanente
room, curator	string?
published	boolean default true
createdAt, updatedAt	datetime

Índices: slug unique; (published, status); startsOn.

VisitRequest

Campo	Tipo	Notas
id	cuid PK
name, email	string	PII
phone	string?	PII
visitDate	date?
partySize	int	1–200
requestType	enum INDIVIDUAL\|GROUP\|SCHOOL
message	text?
status	enum NEW\|CONTACTED\|CLOSED default NEW
exhibitionId	FK?
createdAt	datetime

Índices: status+createdAt; email (búsqueda futura).

VisitInfo

Config estática en API (no tabla v1): horarios, precios, dirección, a11y, contacto.

Privacidad y retención

VisitRequest = datos personales: base servicio público + consentimiento form.
Retención propuesta: 24 meses luego borrado o anonimización.
TLS; no logs de body en prod; staff key no es sustituto de IAM completo.

Datos sensibles

Dato	Clasificación	Control
email, phone, name	PII	acceso staff + BD
STAFF_KEY	secreto	env only
DATABASE_URL	secreto	env only

06-tech-stack.md

Abrir documento

06 — Stack tecnológico · ATRIO

Capa	Elección	Justificación
Frontend	Angular 19 standalone + Tailwind	Stack fijo del cron; SPA editorial
Backend	NestJS 11	Stack fijo; módulos por dominio
ORM	Prisma 6	Migraciones claras sobre Neon
BD	Neon PostgreSQL	MCP + serverless
Auth público	Ninguna v1	Nivel 1 alcance
Auth staff	Header `x-staff-key` / env `STAFF_KEY`	Suficiente demo; prod → IAM
Email	Stub / log	Sin proveedor en v1
Hosting recomendado	Web estático (Vercel/Netlify) + API Node (Railway/Fly); opcional grok.me vía Build Mode oficial
Assets	`/public/images` + case `assets/exhibitions`	Misma media Paper/app

Decisiones

Apps independientes apps/api y apps/web (sin npm workspaces — lección COMAL).
CORS http://localhost:4200.
API base hardcodeada en dev; en prod usar environment file.

07-creative-direction.md

Abrir documento

07 — Dirección creativa · ATRIO

Mood candidates: gallery, mineral, chapel, editorial, bookish
Mood chosen: gallery — pure white × cadmium red

Por qué no el primer instinto (mineral/bookish): evita el look “café cultural genérico” y el industrial naranja de COMAL; el rojo de cartelería de museo da carácter institucional.

Rol	Hex	Referente
Background	#FFFFFF	Muro de galería
Surface	#F5F5F5	Pedestal / ficha
Ink	#0A0A0A	Texto de cartela
Muted	#5C5C5C	Secundario
Border	#E5E5E5	Marco fino
Primary	#D41F26	Cadmium red cartelería
Primary strong	#A8181E	Hover CTA
Primary soft	#FDECEC	Badge / soft

Type: Cormorant Garamond (display editorial) + Karla (UI humanista)
Dirección: cartelería, mucho aire, acento rojo solo en CTA y labels, fotos reales de salas, radios 2–4px (casi poster, no app pill).

08-design-system.md

Abrir documento

08 — Design system · ATRIO

Fuente de verdad: tokens Paper + tailwind.config.js + este doc.

Tokens

Colores, type, spacing, radius: ver Paper CSS variables y 08 alineado a §07.

Componentes

Componente	Variantes	Notas
Nav	desktop / mobile	Logo ATRIO + links + CTA Entradas
Footer	—	Contacto + staff discreto
Button	primary (rojo), secondary (outline ink)	Hover strong
Badge	current (rojo soft), neutral	Estado expo / solicitud
Exhibition card	home grid, listado 2 col	Imagen 4:3 cover obligatoria
Form field	input, select, textarea + label + error	Labels asociados
Empty state	—	Copy + CTA visita
Error banner	—	+ reintentar
Loading	text / skeleton rects
Staff list row	status actions

Spacing scale

4 / 8 / 12 / 16 / 24 / 32 / 48 / 64

No usar

Pills excesivas, gradientes 2019, emoji como iconos, placeholders grises como foto.

09-content-guide.md

Abrir documento

09 — Guía de contenido · ATRIO

Voz y tono

Institucional cercano, sin jerga startup ni “¡imprescindible!”.
Preferir verbos claros: ver, planificar, solicitar, reintentar.
Tratar de “tú” en UI ES (o “usted” si el museo lo exige; v1 usa tú cercano / neutro en labels formales).

Nomenclatura

UI	Usar	Evitar
CTA principal	Entradas / Solicitar visita	Buy now / Book now
Listado	Exposiciones	Shows / Events genérico
Staff	Solicitudes de visita	Leads CRM

Fechas

Formato legible: “12 mar – 28 jun 2026”. En UI Angular: es locale short.

Microcopy errores

Red: “No pudimos cargar… Reintentá o llamá al +598 4622 3400.”
Validación email: “Revisá el correo.”
Staff 401: “Clave de staff incorrecta.”

Imágenes

Alt descriptivo de sala/obra genérica: “Sala de cerámica con vitrinas y luz puntual”, no “imagen1”.

No lorem

Copy de Museo Municipal de Rivera (constructo).

10-accessibility.md

Abrir documento

10 — Accesibilidad · ATRIO (WCAG 2.2 AA objetivo)

Requisitos de diseño e implementación

Tema	Criterio
Contraste	Ink #0A0A0A sobre blanco ≥ 4,5:1; CTA rojo con texto blanco verificado
Foco	Outline visible en links, botones, inputs
Teclado	Formulario y nav usables sin ratón
Labels	Todo input con `<label for>`
Errores	Texto, no solo color
Imágenes	`alt` significativo en covers y hero
Touch	Targets ≥ 44px en mobile
Skip	Enlace “Saltar al contenido” recomendado en layout (impl. si falta)
Staff	Misma base a11y; password field con label
Movimiento	Sin animaciones esenciales; hover scale suave opcional

Exclusiones

No se declara certificación formal WCAG; es objetivo de diseño + checklist QA.

11-privacy-security.md

Abrir documento

11 — Privacidad y seguridad · ATRIO

Datos personales

VisitRequest: name, email, phone, message, visitDate → PII.

Bases (orientación, no dictamen legal)

Servicio público de acceso a la cultura + consentimiento del formulario.
Informar en política de privacidad (stub footer hasta texto legal real).

Controles técnicos

Control	v1
TLS	Obligatorio en prod
Secretos	`.env` no git
Staff	`STAFF_KEY` rotatorio; no es OAuth
Validación	class-validator en API
CORS	Origen web explícito
Logs	No body de form en prod
Retención	24 meses (decisión de diseño)

Amenazas

Enumeración de staff key → rate limit + rotación.
Spam de form → captcha Could.
XSS → Angular sanitiza; no HTML en body de expo desde admin no autenticado.

12-analytics.md

Abrir documento

12 — Analítica · ATRIO

North Star

visit_request_submit con success=true / semana.

Eventos

Evento	Props
page_view	path
exhibition_list_view	count, filter?
exhibition_view	slug, status
visit_plan_view	—
cta_click	from, to
visit_request_start	requestType
visit_request_submit	requestType, partySize, success
visit_request_error	code
staff_list	count
staff_status_change	from, to

Implementación v1

Instrumentación documentada; wiring real (Plausible/GA) opcional en handoff. Priorizar que el producto funcione.

13-qa-test-plan.md

Abrir documento

13 — Plan de pruebas · ATRIO

Casos Must

ID	Caso	Esperado
Q1	GET /exhibitions	3 seed, solo published
Q2	Filtro status=CURRENT	Subconjunto correcto
Q3	GET slug inexistente	404
Q4	GET /visit-info	200 con horarios
Q5	POST request válido	201 NEW
Q6	POST email inválido	400
Q7	GET staff sin key	401
Q8	GET staff con key	lista
Q9	PATCH CONTACTED	status actualizado
Q10	Home API down	error + reintentar
Q11	Form success	UI confirmación
Q12	Listado vacío (filtro)	empty copy
Q13	Teclado en form	tab order razonable
Q14	Contraste CTA	visual
Q15	Imágenes cargan	covers visibles

Regresión

Tras cada cambio de schema o rutas, repetir Q1–Q9 smoke.

14-dev-handoff.md

Abrir documento

14 — Handoff desarrollo · ATRIO

Repos y enlaces

Artefacto	URL / path
Case	`ux-projects/2026-08-01-atrio/`
Paper	https://app.paper.design/file/01KYY20FFWZAN9PPH1RFEGJFVB
App	https://github.com/Criscode2022/atrio-app
Neon	project `bold-union-69609498`, db `neondb`

Arranque local

cd atrio-app/apps/api && cp .env.example .env  # DATABASE_URL, STAFF_KEY
npm i && npx prisma migrate dev && npx prisma db seed
npm run start:dev   # :3001

cd ../web && npm i && npm start  # :4200

API contract

Method	Path	Auth
GET	/exhibitions?status=	public
GET	/exhibitions/:slug	public
GET	/visit-info	public
POST	/visit-requests	public
GET	/visit-requests?status=	x-staff-key
PATCH	/visit-requests/:id/status	x-staff-key

Tokens → Tailwind

atrio-red #D41F26, ink #0A0A0A, muted #5C5C5C, surface #F5F5F5, fonts Cormorant + Karla.

Assets

Copiar case/assets/exhibitions/* → apps/web/public/images/ (ya en repo).

Prod checklist

15-roadmap.md

Abrir documento

15 — Roadmap · ATRIO

Fase	Alcance	Estado
v1	Web pública + API + solicitudes + staff clave + Paper/docs calidad completa	Este case
v1.1	Email transaccional real; rate limit form; skip-link	Next
v2	CMS exposiciones autenticado; roles staff
v2.1	Partner ticketing / pago
v3	Colección digital, agenda educativa, i18n ES/CA/EN

16-interaction-specs.md

Abrir documento

16 — Especificación de interacciones · ATRIO

Elemento	Interacción
Nav link	Hover underline / color primary
Card expo	Hover título → primary; imagen scale 1.03 500ms
CTA primary	Hover primary-strong; active press
Form submit	disabled + “Enviando…”; evita doble envío
Success	Sin redirect auto; botones nueva solicitud / ver expos
Error banner	Persistente hasta reintentar o éxito
Staff filters	Recarga lista con status
Staff actions	Optimistic o reload fila; busy por id
Filtros listado	Instant; loading breve
Focus	outline 2px ink o primary

Duraciones: hover 150–200ms; image scale 500ms ease.

17-prototype-map.md

Abrir documento

17 — Mapa de prototipo · ATRIO

Paper = hi-fi estático. Prototipo vivo = Angular.

Home ──┬── Exposiciones ── Detalle ──┬── Visita ── Entradas ── Success
       │                             └── Entradas(?exhibitionId)
       ├── Visita
       ├── Entradas
       └── Staff (clave)
Estados: Empty · Loading · Error red · 404 detalle · 401 staff

Desde	Acción	Hacia
Home card	click	Detalle
Detalle CTA	Entradas	Form
Nav	Visita	Plan
Footer	Staff	Panel
Success	Inicio	Home

18-completeness-audit.md

Abrir documento

18 — Auditoría de completitud · ATRIO

Cierre calidad: 2026-08-01 (elevación a barra §6.1)
Alcance de producto: Nivel 1 · Calidad: completa (paritaria)

Matriz de entregables del brief diario

#	Entregable	Estado	Evidencia
1	Identidad y definición	✅	`01-project-definition.md`
2	Problema / supuestos	✅	`01`
3	Objetivos y métricas	✅	`01`
4	Stakeholders	✅	`02`
5	Personas	✅	`02` (4 perfiles)
6	JTBD	✅	`02`
7	Historias + MoSCoW + AC	✅	`02` + `19`
8	Journey maps	✅	`02` (A/B/C)
9	Service blueprint	✅	`02`
10	Arquitectura de información	✅	`03`
11	Matriz de permisos	✅	`03`
12	Flujos prioritarios	✅	`04` + `17`
13	Modelo de datos	✅	`05`
14	Stack	✅	`06` + implementación
15	Dirección creativa	✅	`07`
16	Tokens	✅	Paper + `08` + Tailwind
17	Design system	✅	Paper DS + `08`
18	Pantallas hi-fi	✅	19 artboards Paper (flujo + mobile + staff + 404 + validación)
19	Estados y edge cases	✅	Paper + Angular
20	Responsive	✅	Desktop + mobile Paper/app
21	Spec interacciones	✅	`16` + `17`
22	Guía de contenido	✅	`09`
23	Accesibilidad	✅	`10`
24	Privacidad y seguridad	✅	`11`
25	Plan analítico	✅	`12`
26	Plan de pruebas	✅	`13`
27	Handoff	✅	`14`
28	Roadmap	✅	`15`
29	Presentación ejecutiva	✅	`presentation/`
30	Registry + memory	✅	actualizados
31	Código producto	✅	atrio-app vertical slice + staff

Autoverificación §29

Pregunta	Resultado
Concepto distinto de COMAL	✅ cultura vs hostelería
Problema concreto y usuarios	✅
Alcance acorde a L1 sin bajar calidad	✅ barra §6.1
Flujos principales completos	✅
Empty / load / error / recovery	✅
Contenido realista	✅
Identidad visual propia	✅ gallery red
Componentes reutilizables	✅
Responsive diseñado	✅
A11y AA objetivo	✅ diseño + labels
Modelo de datos soporta casos	✅
Stack justificado	✅
Privacidad y riesgos	✅
Métricas	✅
Pruebas	✅
Handoff implementable	✅
Presentación clara	✅
Paper hi-fi real	✅

Deuda residual (no bloqueante)

Deploy producción / grok.me solo vía Build Mode oficial.
Email real y captcha.
CMS exposiciones.
Investigación de campo.

Declaración

ATRIO se declara completo en calidad de portfolio y vertical slice Nivel 1, con profundidad documental y de estados elevada a la barra del cron §6.1.

19-backlog-completo.md

Abrir documento

19 — Backlog · ATRIO

Must (v1) — hecho

Catálogo y ficha exposiciones
Plan de visita
Formulario solicitudes + confirmación
Estados empty/loading/error
Seed 3 exposiciones + imágenes
Staff list/status con STAFF_KEY
Docs 00–20 profundidad portfolio
Paper flujo + responsive + estados

Should

Email transaccional
Rate limit + captcha form
Skip link global
CMS exposiciones

Could

Colección digital
Agenda educativa
i18n

Won’t ahora

Checkout de pago
App nativa
Multi-museo SaaS

20-implementation.md

Abrir documento

20 — Implementación · ATRIO

Item	Valor
Repo	https://github.com/Criscode2022/atrio-app
Neon	bold-union-69609498 / main / neondb
API	:3001 Nest + Prisma
Web	:4200 Angular + Tailwind
STAFF_KEY local	atrio-staff-dev

Rutas web

/, /exposiciones, /exposiciones/:slug, /visita, /entradas, /staff

Vertical slice verificado

Exhibitions CRUD read + seed
Visit info
Visit request create
Staff list + status patch
UI estados

Arranque

cd /Users/cristian/orca/atrio-app && npm run api && npm run web