System Requirements Document for recetas-de-cocina

1. Introduction

recetas-de-cocina es una aplicación web en español que enseña recetas de cocina a sus usuarios. Su propósito es doble: permitir que cualquier persona curiosa encuentre recetas de cocina con sus ingredientes y pasos de preparación, las consulte y las guarde como favoritas para volver a ellas; y permitir que cocineros con experiencia compartan sus propias recetas para que otros las aprendan.

La aplicación se dirige a dos públicos activos: el Aprendiz de cocina, que busca recetas para consultarlas y seguirlas como guía, y el Cocinero que comparte recetas, que aporta recetas con instrucciones claras para que otros las aprendan. El registro de la aplicación es cálido, generoso y doméstico: el placer de hacer algo con las manos y transmitirlo.

El producto se entrega como una aplicación web con interfaz propia (React), un backend compartido (FastAPI) y una base de datos relacional (MariaDB) que conserva las cuentas, los favoritos y las recetas publicadas.

2. System Overview

recetas-de-cocina es una aplicación web de recetas de cocina con identidad propia de la aplicación. Los usuarios pueden:

• Consultar recetas de cocina con sus ingredientes y pasos de preparación.
• Buscar recetas por nombre o por tipo de plato.
• Ver el detalle de una receta con ingredientes y pasos.
• Guardar recetas favoritas para consultarlas después.
• Compartir sus propias recetas de cocina para que otros las aprendan.
• Crear sus propias recetas en una sección dedicada (Nueva Receta), con nombre, tipo de plato, ingredientes y pasos de preparación.

Para que los favoritos y las recetas propias persistan y queden ligados a la persona correcta, la aplicación gestiona su propia identidad: alta autoservicio (Sign Up) y verificación de retorno (Login). La publicación de una receta propia la deja disponible en el catálogo y en la búsqueda para el resto de usuarios.

Servicios provisionados:

• frontend — aplicación React que sirve la interfaz de usuario.
• backend — proceso FastAPI compartido que expone las APIs de la aplicación y los módulos de dominio (recetas, búsqueda, favoritos, publicación, identidad).
• database — MariaDB para los datos persistentes propios de la aplicación.

El frontend consume las APIs del backend; el backend lee y escribe en MariaDB. No se provisionan servicios adicionales: la búsqueda, los favoritos y la publicación se resuelven dentro del backend compartido.

Fuera de alcance actual: no se especifican planes de suscripción, listas de compra, valoraciones, comentarios, moderación, notificaciones, ni funciones sociales más allá de compartir recetas propias mediante su publicación en el catálogo.

Removed from scope

• No se han eliminado conceptos en el hilo de requisitos; no hay elementos retirados que listar.

2a. Product Interpretation and Delivery Boundary

La entrega actual es una aplicación web de primera parte con identidad gestionada por la propia aplicación. La Landing es la entrada pública anónima: explica qué es la aplicación, a quién sirve y para qué, antes de cualquier identificación. Desde ella se puede iniciar el alta (Sign Up) o la verificación de retorno (Login).

Las superficies de trabajo —Recetas, Receta Detalle, Buscar, Favoritos y Nueva Receta— requieren sesión iniciada, porque los favoritos y las recetas propias deben quedar ligados a la persona correcta y poder retomarse en visitas posteriores. La identidad se establece en Sign Up y se verifica en Login; ninguna superficie protegida establece por sí misma el acceso a sí misma.

Todo el trabajo de recetas, búsqueda, favoritos y publicación ocurre en superficies propias de la aplicación. No hay superficies de proveedor externo ni destinos externos en el alcance actual. No se definen permisos diferenciados por rol: ambos perfiles usan la misma aplicación y las mismas superficies según su objetivo.

2c. Page Content and Component Coverage

Landing

• Información/estado: propósito de la aplicación (aprender recetas de cocina), a quién sirve (aprendices y cocineros que comparten), y las acciones de entrada. Estado público, sin sesión.
• Acciones primarias: ir a Sign Up; ir a Login.
• Acciones de apoyo: navegar a la explicación del catálogo y de la publicación de recetas.
• Entidades de dominio: ninguna propia; presenta el producto.
• Responsabilidades de componentes: hero dividido en dos columnas (titular a la izquierda, bloque visual a la derecha), banda de presentación del catálogo, banda de presentación de la publicación, llamadas a la acción de alta e inicio de sesión.
• Estados: carga (contenido estático, sin espera de datos); vacío (no aplica); éxito (render completo); error (no aplica, contenido estático); recuperación (no aplica).

Login

• Información/estado: formulario de verificación de retorno para usuarios existentes. Estado anónimo.
• Acciones primarias: verificar identidad y entrar.
• Acciones de apoyo: enlace a Sign Up si aún no hay cuenta.
• Entidades de dominio: cuenta de usuario.
• Responsabilidades de componentes: formulario de credenciales, mensajes de error, enlace de recuperación hacia el alta.
• Estados: carga (envío en curso); vacío (formulario limpio); éxito (sesión iniciada y acceso a superficies protegidas); error (credenciales no válidas, con mensaje y posibilidad de reintentar); recuperación (corregir datos y reenviar).

Sign Up

• Información/estado: formulario de alta autoservicio para crear una cuenta. Estado anónimo.
• Acciones primarias: crear la cuenta y quedar identificado.
• Acciones de apoyo: enlace a Login si ya existe cuenta.
• Entidades de dominio: cuenta de usuario.
• Responsabilidades de componentes: formulario de alta, validación de campos, mensajes de error, enlace al inicio de sesión.
• Estados: carga (envío en curso); vacío (formulario limpio); éxito (cuenta creada y sesión iniciada); error (datos inválidos o cuenta ya existente, con mensaje y reintento); recuperación (corregir y reenviar).

Recetas

• Información/estado: catálogo navegable de recetas de cocina, incluidas las publicadas por los usuarios. Requiere sesión.
• Acciones primarias: abrir el detalle de una receta.
• Acciones de apoyo: ir a Buscar; ir a Favoritos; ir a Nueva Receta.
• Entidades de dominio: receta (nombre, tipo de plato, ingredientes, pasos).
• Responsabilidades de componentes: índice tipo galería con tarjetas de distinto tamaño y relleno, cada una con nombre y tipo de plato; banda de recetas destacadas; navegación a las demás superficies.
• Estados: carga (obtención del catálogo); vacío (sin recetas disponibles, con invitación a publicar); éxito (catálogo visible); error (fallo de carga, con reintento); recuperación (recargar el catálogo).

Receta Detalle

• Información/estado: vista enfocada de una receta con sus ingredientes y pasos de preparación. Requiere sesión.
• Acciones primarias: consultar ingredientes y seguir los pasos.
• Acciones de apoyo: guardar o quitar de favoritos; volver al catálogo o a los resultados de búsqueda.
• Entidades de dominio: receta, ingredientes, pasos, favorito.
• Responsabilidades de componentes: panel de ingredientes, columna de pasos numerados, control de favorito, navegación de retorno.
• Estados: carga (obtención de la receta); vacío (receta no encontrada, con retorno al catálogo); éxito (receta visible); error (fallo de carga, con reintento); recuperación (volver al catálogo o reintentar).

Buscar

• Información/estado: búsqueda de recetas por nombre o tipo de plato, con resultados consultables. Requiere sesión.
• Acciones primarias: introducir el término y obtener resultados; abrir el detalle de un resultado.
• Acciones de apoyo: limpiar la búsqueda; volver al catálogo.
• Entidades de dominio: receta (nombre, tipo de plato).
• Responsabilidades de componentes: campo de búsqueda, selector de criterio (nombre o tipo de plato), lista de resultados, mensaje de sin resultados.
• Estados: carga (búsqueda en curso); vacío (sin resultados para el término, con sugerencia de otro término); éxito (resultados visibles); error (fallo de búsqueda, con reintento); recuperación (cambiar el término o reintentar).

Favoritos

• Información/estado: lista recurrente de recetas favoritas del usuario. Requiere sesión.
• Acciones primarias: consultar las recetas guardadas; abrir su detalle.
• Acciones de apoyo: quitar una receta de favoritos; ir al catálogo o a Buscar.
• Entidades de dominio: favorito, receta.
• Responsabilidades de componentes: lista de recetas favoritas, control de quitar, navegación al detalle.
• Estados: carga (obtención de favoritos); vacío (sin favoritos aún, con invitación a explorar el catálogo); éxito (lista visible); error (fallo de carga, con reintento); recuperación (recargar o volver al catálogo).

Nueva Receta

• Información/estado: formulario para crear y publicar una receta propia con ingredientes y pasos de preparación. Requiere sesión.
• Acciones primarias: completar nombre, tipo de plato, ingredientes y pasos; publicar la receta.
• Acciones de apoyo: añadir y quitar líneas de ingredientes y de pasos; cancelar y volver.
• Entidades de dominio: receta, ingrediente, paso.
• Responsabilidades de componentes: campos de nombre y tipo de plato, editor de lista de ingredientes, editor de lista de pasos, acción de publicar, mensajes de validación.
• Estados: carga (publicación en curso); vacío (formulario limpio); éxito (receta publicada y disponible en el catálogo y la búsqueda); error (campos incompletos o fallo de publicación, con mensaje y reintento); recuperación (corregir y reenviar sin perder lo escrito).

3. Functional Requirements

FR-1 — Enseñar recetas de cocina (explicit) Como Aprendiz de cocina, quiero que la aplicación me enseñe recetas de cocina, para aprender a preparar platos.

• Disparador: el usuario accede a la aplicación.
• Resultado observable: la aplicación presenta recetas de cocina con sus ingredientes y pasos de preparación.
• Acceso: la presentación del producto ocurre en la Landing pública; el catálogo y el detalle requieren sesión.
• Fallo/recuperación: si el contenido no carga, se ofrece reintento.
• Continuación: desde la presentación se puede ir al alta o al inicio de sesión y, ya identificado, al catálogo.

FR-2 — Consultar recetas con ingredientes y pasos (explicit) Como Aprendiz de cocina, quiero consultar recetas de cocina con sus ingredientes y pasos de preparación, para poder cocinarlas.

• Disparador: el usuario abre el catálogo (Recetas) o un resultado de búsqueda.
• Resultado observable: cada receta muestra su nombre, su tipo de plato, sus ingredientes y sus pasos de preparación.
• Acceso: requiere sesión.
• Fallo/recuperación: si el catálogo no carga, se muestra un error con reintento.
• Continuación: desde el catálogo se abre el detalle de una receta.

FR-3 — Buscar recetas por nombre o tipo de plato (explicit) Como Aprendiz de cocina, quiero buscar recetas por nombre o por tipo de plato, para encontrar rápidamente lo que quiero cocinar.

• Disparador: el usuario introduce un término en Buscar y elige el criterio (nombre o tipo de plato).
• Resultado observable: se muestran las recetas que coinciden con el término según el criterio elegido.
• Acceso: requiere sesión.
• Fallo/recuperación: si no hay coincidencias, se muestra un mensaje de sin resultados y se sugiere otro término; si la búsqueda falla, se ofrece reintento.
• Continuación: desde un resultado se abre su detalle.

FR-4 — Ver el detalle de una receta (explicit) Como Aprendiz de cocina, quiero ver el detalle de una receta con sus ingredientes y pasos, para seguirla mientras cocino.

• Disparador: el usuario selecciona una receta en el catálogo, en la búsqueda o en favoritos.
• Resultado observable: se muestra la receta con su panel de ingredientes y sus pasos numerados.
• Acceso: requiere sesión.
• Fallo/recuperación: si la receta no existe o no carga, se muestra un mensaje y un retorno al catálogo.
• Continuación: desde el detalle se puede guardar en favoritos o volver al catálogo o a los resultados.

FR-5 — Guardar recetas favoritas (explicit) Como Aprendiz de cocina, quiero guardar recetas favoritas, para consultarlas después.

• Disparador: el usuario activa el control de favorito en el detalle de una receta.
• Resultado observable: la receta aparece en Favoritos y permanece guardada en visitas posteriores.
• Acceso: requiere sesión; el favorito queda ligado a la cuenta del usuario.
• Fallo/recuperación: si el guardado falla, se informa y se permite reintentar.
• Continuación: el usuario puede abrir Favoritos para consultar sus recetas guardadas.

FR-6 — Consultar y quitar favoritos (explicit) Como Aprendiz de cocina, quiero consultar mis recetas favoritas y poder quitarlas, para mantener mi lista al día.

• Disparador: el usuario abre Favoritos o quita una receta de la lista.
• Resultado observable: se muestra la lista de recetas guardadas; al quitar una, deja de aparecer en la lista.
• Acceso: requiere sesión; solo se muestran los favoritos de la cuenta.
• Fallo/recuperación: si la lista no carga, se ofrece reintento; si el vaciado está vacío, se invita a explorar el catálogo.
• Continuación: desde la lista se abre el detalle de cualquier receta guardada.

FR-7 — Compartir recetas propias (explicit) Como Cocinero que comparte recetas, quiero compartir mis propias recetas de cocina, para que otros las aprendan.

• Sección de creación: la aplicación ofrece una sección propia donde las personas crean sus propias recetas (Nueva Receta), accesible desde la navegación de las superficies de trabajo (Recetas, Buscar, Favoritos) y desde la Landing mediante el enlace «Publicar la mía».
• Disparador: el usuario completa el formulario de Nueva Receta con nombre, tipo de plato, ingredientes y pasos, y publica.
• Resultado observable: la receta queda publicada y disponible en el catálogo y en la búsqueda para el resto de usuarios.
• Acceso: requiere sesión; la receta queda ligada a su autor.
• Fallo/recuperación: si faltan campos o la publicación falla, se muestra un mensaje y se permite corregir y reintentar sin perder lo escrito.
• Continuación: tras publicar, el usuario puede ver su receta en el catálogo o abrir su detalle.

FR-8 — Alta autoservicio (required_inference) Como usuario nuevo, quiero crear una cuenta por mí mismo, para poder guardar favoritos y publicar recetas.

• Disparador: el usuario elige la acción de alta desde la Landing o desde Login.
• Resultado observable: la cuenta se crea y el usuario queda identificado, con acceso a las superficies protegidas.
• Acceso: la superficie de alta es anónima.
• Fallo/recuperación: si los datos no son válidos o la cuenta ya existe, se muestra un mensaje y se permite corregir y reenviar.
• Continuación: el usuario accede al catálogo.

FR-9 — Verificación de retorno (required_inference) Como usuario existente, quiero verificar mi identidad al volver, para acceder a mis favoritos y a mis recetas propias.

• Disparador: el usuario introduce sus credenciales en Login.
• Resultado observable: se inicia la sesión y el usuario accede a las superficies protegidas con su estado propio.
• Acceso: la superficie de inicio de sesión es anónima.
• Fallo/recuperación: si las credenciales no son válidas, se muestra un mensaje y se permite reintentar; se ofrece el enlace al alta.
• Continuación: el usuario accede al catálogo, a sus favoritos o a publicar una receta.

FR-10 — Publicación disponible en catálogo y búsqueda (required_inference) Como Cocinero que comparte recetas, quiero que mi receta publicada quede disponible en el catálogo y en la búsqueda, para que otros la encuentren y la aprendan.

• Disparador: la publicación de una receta se completa con éxito.
• Resultado observable: la receta aparece en Recetas y puede encontrarse desde Buscar por su nombre o su tipo de plato.
• Acceso: la consulta de la receta publicada requiere sesión, como el resto del catálogo.
• Fallo/recuperación: si la publicación no se completa, la receta no se incorpora al catálogo y se informa al autor.
• Continuación: el autor y otros usuarios pueden abrir el detalle de la receta publicada.

4. User Personas

Aprendiz de cocina

• Contexto de producto: persona que quiere aprender a cocinar y busca recetas para consultarlas y seguirlas. Llega a la aplicación sin una receta concreta en mente o con un plato en mente, y necesita encontrar recetas fiables y legibles.
• Objetivo principal: encontrar recetas de cocina y usarlas como guía para preparar platos, con el resultado de haber aprendido o cocinado una receta.
• Responsabilidades aceptadas: consultar el catálogo de recetas, buscar por nombre o tipo de plato, abrir el detalle con ingredientes y pasos, guardar recetas favoritas y consultarlas después, y quitar de favoritos lo que ya no necesita.
• Entradas y decisiones: el término de búsqueda y el criterio (nombre o tipo de plato); qué receta abrir; qué receta guardar como favorita y cuál quitar.
• Interacción con otros participantes: consume las recetas que publica el Cocinero que comparte recetas; su experiencia depende de que esas recetas tengan ingredientes y pasos claros.
• Éxito observable: encuentra una receta por nombre o tipo de plato, ve sus ingredientes y pasos, la guarda en favoritos y vuelve a encontrarla en visitas posteriores.

Cocinero que comparte recetas

• Contexto de producto: persona con experiencia culinaria que aporta recetas para que otros las aprendan. Su trabajo no es solo escribir una receta, sino dejarla con instrucciones claras y completa para que un aprendiz pueda seguirla.
• Objetivo principal: publicar recetas de cocina con instrucciones claras, logrando que otros usuarios puedan consultarlas y aprender de ellas.
• Responsabilidades aceptadas: crear una receta propia en la sección Nueva Receta con nombre, tipo de plato, ingredientes y pasos de preparación, y publicarla para que quede disponible en el catálogo y en la búsqueda.
• Entradas y decisiones: el nombre de la receta, su tipo de plato, la lista de ingredientes y la secuencia de pasos; la decisión de publicar.
• Interacción con otros participantes: su receta publicada es la que el Aprendiz de cocina encuentra, consulta y guarda; la claridad de sus instrucciones determina el aprendizaje del aprendiz.
• Éxito observable: su receta aparece en el catálogo y se encuentra desde la búsqueda, y otros usuarios pueden abrir su detalle con ingredientes y pasos.

5. Core User Flows

Flujo A — El Aprendiz de cocina descubre la aplicación y crea su cuenta

1. El Aprendiz de cocina abre la Landing sin sesión y lee el propósito de la aplicación y a quién sirve.
2. Elige la acción de alta y llega a Sign Up.
3. Completa el formulario de alta y lo envía.
4. Si los datos no son válidos o la cuenta ya existe, ve un mensaje, corrige y reenvía.
5. Al crearse la cuenta, queda identificado y accede a Recetas.

Flujo B — El Aprendiz de cocina vuelve a la aplicación

1. El Aprendiz de cocina abre Login sin sesión.
2. Introduce sus credenciales y las envía.
3. Si las credenciales no son válidas, ve un mensaje y reintenta; si aún no tiene cuenta, sigue el enlace a Sign Up.
4. Al verificarse, accede a Recetas con su estado propio (sus favoritos y sus recetas).

Flujo C — El Aprendiz de cocina consulta el catálogo y el detalle de una receta

1. Desde Recetas, el Aprendiz de cocina recorre el catálogo de recetas.
2. Selecciona una receta y llega a Receta Detalle.
3. Lee el panel de ingredientes y sigue los pasos numerados.
4. Si la receta no carga o no existe, ve un mensaje y vuelve al catálogo.
5. Al terminar, vuelve al catálogo para elegir otra receta.

Flujo D — El Aprendiz de cocina busca una receta por nombre o tipo de plato

1. Desde Buscar, el Aprendiz de cocina introduce un término y elige el criterio: nombre o tipo de plato.
2. Envía la búsqueda y ve los resultados que coinciden.
3. Si no hay coincidencias, ve un mensaje de sin resultados y prueba otro término; si la búsqueda falla, reintenta.
4. Selecciona un resultado y llega a Receta Detalle con sus ingredientes y pasos.
5. Vuelve a los resultados o al catálogo para seguir buscando.

Flujo E — El Aprendiz de cocina guarda y consulta favoritos

1. En Receta Detalle, el Aprendiz de cocina activa el control de favorito.
2. La receta queda guardada y aparece en Favoritos.
3. Si el guardado falla, ve un mensaje y reintenta.
4. Más tarde, abre Favoritos y ve su lista de recetas guardadas.
5. Si la lista está vacía, ve una invitación a explorar el catálogo; si no carga, reintenta.
6. Abre el detalle de una receta guardada, o quita una receta de la lista y esta deja de aparecer.

Flujo F — El Cocinero que comparte recetas publica una receta

1. Ya identificado, el Cocinero que comparte recetas entra en la sección Nueva Receta desde la navegación de las superficies de trabajo.
2. Completa el nombre de la receta y su tipo de plato.
3. Añade las líneas de ingredientes y las líneas de pasos de preparación, añadiendo o quitando líneas según necesite.
4. Envía la publicación.
5. Si faltan campos o la publicación falla, ve un mensaje, corrige y reenvía sin perder lo escrito.
6. Al publicarse, la receta queda disponible en Recetas y en Buscar.
7. El Cocinero abre el detalle de su receta para comprobar cómo la verán los demás.

Flujo G — El Aprendiz de cocina encuentra la receta publicada por el Cocinero

1. Desde Buscar, el Aprendiz de cocina busca por el nombre o el tipo de plato de la receta publicada.
2. Ve la receta entre los resultados y abre su Receta Detalle.
3. Lee los ingredientes y sigue los pasos que el Cocinero escribió.
4. La guarda en Favoritos para volver a ella después.

6. Visuals Colors and Theme

Musa y titular: Warm modernism in the kitchen, after Charles & Ray Eames. Titular de entrada: «Cocina como quien construye algo».

Modo: claro únicamente.

Colores por rol (hex exactos):

Sin azul en ningún sitio; sin degradados.

Tipografía:

• Titulares: Jost, pesos 600–700, interlineado ajustado (0.98–1.05), sentence case; el espaciado amplio de letras (+0.14em) solo en etiquetas pequeñas en mayúsculas. Los titulares se componen muy grandes y pueden ocupar todo el ancho de un panel.
• Cuerpo: Lora, serif cálida y legible, 17–19px con interlineado 1.65; los pasos de receta y las listas de ingredientes también en Lora, para que la lectura se sienta como una página de libro de cocina.
• Escala modular 1.333 con rampa de display: 40/56/88/120px (clamp 40→120), cabeceras de sección 32/40/48, subtítulo 24, cuerpo guía 19, cuerpo 17, etiqueta en mayúsculas 13, pie 12. Cifras tabulares en Lora para cantidades y números de paso.

Lenguaje de forma: paneles modulares orgánico-modernos; tarjetas de esquinas redondeadas con radios de 20–28px y filete de nogal de 2px en lugar de sombras; botones cápsula y etiquetas de categoría tipo píldora; motivo recurrente «Eames dot»: grupos de tres círculos desplazados en tomate, mostaza y verde azulado como puntuación de sección. Sin blobs, sin vidrio, sin tarjetas idénticas con elevación al pasar el cursor: los paneles difieren en tamaño y relleno según el peso del contenido.

Retícula y ritmo: secuenciación tipo galería sobre retícula de 12 columnas con margen exterior duro de 96px en escritorio y 20px en móvil. Ritmo alterno de paneles: banda verde azulado a sangre, sección crema, raíl de recetas con tinte mostaza. El detalle de receta es un pliego de libro de cocina a dos columnas: ingredientes fijados en un panel verde azulado a la izquierda, pasos numerados en una columna larga de lectura a la derecha, separados por una regla de 2px. En móvil colapsa a una columna con el panel de ingredientes convertido en barra fija colapsable en la parte superior de los pasos.

Imaginería: fotografía cálida de comida y cocina con luz suave y textura material visible — lino, veta de madera, cerámica, polvo de harina — recortada en rectángulos decididos y ocasionalmente rotada 2–3 grados como una estampa prendida a un tablero. Acentos ocasionales de tinta dibujados a mano (un batidor, una ramita, una flecha) como marginalia. Sin personas sonriendo ante ensaladas, sin renders 3D, sin arte degradado.

7. Signature Design Concept

Hero de galería dividido sobre crema (Landing). La primera pantalla se compone como un muro de galería:

• Izquierda (7 de 12 columnas): titular apilado en Jost a clamp(40px, 9vw, 120px) — «Cocina como quien construye algo» — alineado a la izquierda y repartido en tres líneas. Encima, una etiqueta pequeña en mayúsculas y tomate: RECETAS · APRENDER · COMPARTIR. Debajo, una cápsula sólida verde azulado con el CTA «Explorar recetas» y un enlace de texto «Publicar la mía».
• Derecha (5 columnas): un bloque sólido verde azulado que contiene una única fotografía vertical y cálida de comida, recortada al borde del panel, rotada 2 grados y solapando el borde inferior del bloque. Un pequeño grupo de «Eames dots» en mostaza rompe la esquina superior izquierda del bloque.

Sin titular centrado, sin párrafo de subtítulo, sin degradado. El gesto de rotación y solape recae siempre sobre la imagen y la decoración; el titular, la etiqueta, el CTA y el enlace permanecen íntegros y legibles en 375px, 768px y 1280px.

Movimientos de firma que se extienden al resto del producto:

• Índice de recetas como muro de galería (Recetas): tarjetas de tamaño y relleno deliberadamente desiguales (crema, tinte mostaza, verde azulado) colocadas sobre la retícula de 12 columnas como estampas enmarcadas, cada una con filete de nogal de 2px y una rotación de 2–3 grados en una tarjeta por fila.
• Detalle como pliego de libro de cocina (Receta Detalle): panel de ingredientes sólido verde azulado fijado a la izquierda con cantidades en Lora tabular, regla de 2px y pasos numerados con numerales tomate sobredimensionados en el margen.
• Motivo «Eames dot»: tres círculos desplazados en tomate, mostaza y verde azulado como puntuación de sección y como estado activo del control de favorito.
• Banda verde azulado a sangre (Recetas): franja a todo el ancho con un desplazamiento horizontal lento de recetas destacadas, cada una un panel redondeado con su título en Jost 600 y su tiempo en etiquetas Lora en mayúsculas.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Sujeto focal: el bloque verde azulado con la fotografía cálida de comida rotada 2 grados y solapando su borde inferior, con el grupo de «Eames dots» en mostaza en la esquina superior izquierda.
• Tesis entrada → transformación → resultado: al cargar la Landing, el titular apilado y la etiqueta tomate entran con un fundido lento y una deriva ascendente de 12–20px; el bloque verde azulado y su fotografía entran con el mismo fundido y una deriva algo mayor, asentándose en su posición final rotada; el CTA y el enlace aparecen al final del asentamiento, ya legibles y accionables. El resultado es un muro de galería compuesto, no una secuencia de rebotes.
• Vocabulario de movimiento: fundidos ease-out de 400–600ms, derivas ascendentes de 12–20px, sin rebotes, sin flotación; el desplazamiento horizontal lento se reserva para la banda de recetas destacadas.
• Primer fotograma compuesto: titular a la izquierda en tres líneas, etiqueta tomate encima, CTA cápsula verde azulado y enlace debajo; bloque verde azulado a la derecha con la fotografía rotada y los «Eames dots» en la esquina.
• Estado con movimiento reducido: con prefers-reduced-motion, todo se renderiza en su posición final, sin fundidos ni derivas; la banda de recetas destacadas se convierte en una fila desplazable horizontalmente para que cada receta pueda llevarse por completo a la vista.

Movimiento en el resto del producto: las tarjetas del índice de recetas hacen un crossfade de 300ms de la fotografía a la versión emplatada al pasar el cursor; los paneles entran al viewport con fundidos y derivas de 400–600ms; nada rebota ni flota. Con movimiento reducido, todo queda en su posición final y las filas desplazables permiten llevar cada elemento por completo a la vista.

9. Non-Functional Requirements

• NFR-1 — Idioma y tono (explicit, del contexto del producto): toda la interfaz y el contenido se presentan en español, con un registro cálido, generoso y doméstico.
• NFR-2 — Legibilidad en todo viewport (explicit, de la dirección creativa): titulares, marcas, etiquetas, números, textos de tarjeta y controles permanecen íntegros dentro del viewport y de su contenedor en 375px, 768px y 1280px, ajustando tamaño o salto de línea; ningún otro elemento los cubre. La imaginería y la decoración pueden recortarse, sangrar, rotarse o solaparse según la dirección, sin cubrir texto ni controles legibles.
• NFR-3 — Movimiento reducido (explicit, de la dirección creativa): con prefers-reduced-motion, todo se renderiza en su posición final y las filas desplazables permiten llevar cada elemento por completo a la vista.
• NFR-4 — Persistencia de estado durable (required_inference, del contrato de planificación): las cuentas, los favoritos y las recetas publicadas persisten en MariaDB y se recuperan en visitas posteriores ligados a la persona correcta.
• NFR-5 — Acceso a superficies protegidas (required_inference): Recetas, Receta Detalle, Buscar, Favoritos y Nueva Receta requieren sesión iniciada; Landing, Login y Sign Up son anónimas.
• NFR-6 — Sin permisos diferenciados (required_inference): no se establecen roles ni visibilidades diferenciadas sobre el estado compartido; ambos perfiles usan las mismas superficies según su objetivo.
• NFR-7 — Sin azul ni degradados (explicit, de la dirección creativa): no se usa azul ni índigo en ningún acento, y no se usan degradados ni glassmorphism.

10. Tech Stack

• Frontend: React (aplicación de una sola página) que consume las APIs del backend.
• Backend: Python con FastAPI, proceso compartido que expone las APIs de identidad, recetas, búsqueda, favoritos y publicación.
• Base de datos: MariaDB para los datos persistentes propios de la aplicación (cuentas, recetas, ingredientes, pasos, favoritos).
• Orquestación local: docker-compose con los servicios frontend, backend y database.
• Tipografía: Jost (titulares) y Lora (cuerpo), servidas como fuentes web.

No se requieren servicios adicionales: la búsqueda y los favoritos se resuelven dentro del backend compartido.

11. Assumptions and Constraints

• A-1 (required_inference): la identidad es gestionada por la propia aplicación, con alta autoservicio y verificación de retorno; no hay invitación ni aprovisionamiento externo.
• A-2 (required_inference): el catálogo, el detalle, la búsqueda y los favoritos requieren sesión iniciada, porque el estado de favoritos y de recetas propias debe quedar ligado a la persona correcta.
• A-3 (required_inference): la búsqueda se realiza por nombre o por tipo de plato, según el criterio que elija el usuario; no se especifican otros criterios.
• A-4 (required_inference): una receta publicada queda disponible de inmediato en el catálogo y en la búsqueda, sin paso de moderación especificado.
• A-5 (explicit, de la dirección creativa): el modo es claro únicamente; no se especifica modo oscuro.
• A-6 (explicit, de la dirección creativa): no se usa azul ni índigo, ni degradados, ni tipografías Inter, Roboto, Arial, Helvetica, Poppins o system-ui.
• A-7 (required_inference): no se definen permisos diferenciados por rol; ambos perfiles comparten las mismas superficies.
• A-8 (explicit): no se especifican valoraciones, comentarios, listas de compra, notificaciones ni funciones sociales más allá de la publicación de recetas propias.

12. Glossary

• Receta: plato de cocina con nombre, tipo de plato, ingredientes y pasos de preparación.
• Ingrediente: cada componente de una receta, con su cantidad.
• Paso de preparación: cada instrucción numerada de una receta, en orden.
• Tipo de plato: categoría de la receta (por ejemplo, un tipo de plato culinario) usada como criterio de búsqueda.
• Favorito: receta guardada por un usuario para consultarla después; queda ligada a su cuenta.
• Catálogo: conjunto navegable de recetas disponibles en la aplicación, incluidas las publicadas por los usuarios.
• Publicar: acción de un Cocinero que comparte recetas que incorpora su receta al catálogo y a la búsqueda.
• Sección de creación de recetas: superficie propia de la aplicación (Nueva Receta) donde cada persona crea sus propias recetas con nombre, tipo de plato, ingredientes y pasos.
• Aprendiz de cocina: persona que busca y sigue recetas para aprender a cocinar.
• Cocinero que comparte recetas: persona que publica sus propias recetas para que otros las aprendan.
• Eames dot: motivo de tres círculos desplazados en tomate, mostaza y verde azulado usado como puntuación de sección y como estado activo del favorito.