add spec verifier

specs/01-feed-home.md

@@ -1,6 +1,6 @@
 # SPEC 01 — Home: feed de la guardería (plantilla feed.dc.html)
 
-> **Estado:** Implementada
+> **Estado:** Verificada (2026-10-20)
 > **Depende de:** —
 > **Fecha:** 2026-10-19
 > **Objetivo:** Implementar la plantilla `references/pantallas/feed.dc.html` como página home (`/`) en Next.js, visualmente idéntica al original, sin autenticación ni base de datos.
@@ -9,12 +9,12 @@
 
 **In:**
 
-- Página `/` (`app/page.tsx`) con: sidebar fijo de 248px (logo OpenDayCare · Sala Soles, botón "Nueva publicación", nav con Feed activo + Niños/Avisos/Mi cuenta, tarjeta de usuario "Caro Giménez" con logout), saludo ("GUARDERÍA · SALA SOLES" / "Buenas, Caro" / "12 niños · martes 17 jun"), caja "Compartí un momento…", separador "PUBLICADO HOY" y los 3 posts de la plantilla (logro, actividad con placeholder de foto, anuncio).
+- Página `/` (`app/page.tsx`) con: sidebar sticky de 248px (logo OpenDayCare · Sala Soles, botón "Nueva publicación", nav con Feed activo + Niños/Avisos/Mi cuenta, tarjeta de usuario "Caro Giménez" con logout), saludo ("GUARDERÍA · SALA SOLES" / "Buenas, Caro" / "12 niños · martes 17 jun"), caja "Compartí un momento…", separador "PUBLICADO HOY" y los 3 posts de la plantilla (logro, actividad con placeholder de foto, anuncio).
 - Datos mock tipados en `app/data/feed.ts` con los 3 posts exactos de la plantilla.
 - Componentes en `app/components/`: `Sidebar.tsx`, `FeedHeader.tsx`, `ShareBox.tsx`, `PostCard.tsx`.
 - Cambio de fuentes en `app/layout.tsx` (Fredoka + Nunito vía `next/font/google`), `lang="es"` y metadata "OpenDayCare".
 - Estilos base en `app/globals.css` (fondo #F6ECDF, texto #3F362E, scrollbar custom, tema claro fijo).
-- Todos los links como `<Link>` a rutas futuras (`/crear-publicacion`, `/ninos`, `/avisos`, `/mi-cuenta`, `/detalle-publicacion`, `/login`).
+- Todos los links como `<Link>` a rutas futuras (`/crear-publicacion`, `/ninos`, `/avisos`, `/mi-cuenta`, `/detalle-publicacion`, `/login`, `/foto` — este último en el placeholder de foto, como `foto.dc.html` en la plantilla).
 
 **Out of scope (para specs futuras):**
 
@@ -66,17 +66,17 @@ Convenciones: los colores van como hex exactos de la plantilla; el mapa `categor
 
 ## Criterios de aceptación
 
-- [ ] `npm run dev` levanta sin errores y `/` muestra el feed completo: sidebar + saludo + caja + separador + 3 posts.
-- [ ] `npm run build` completa sin errores.
-- [ ] A ancho ≥1280px el layout coincide con la plantilla: sidebar 248px sticky, main con scroll propio y contenido centrado de 760px.
-- [ ] Fredoka en logo, saludo y nombres de autor; Nunito (pesos 400–800) en el resto.
-- [ ] Post 1: badge LOGRO (fondo `#CFEBD8`, texto `#3E9B6C`), ♥ 3, 💬 1, link "Editar".
-- [ ] Post 2: badge ACTIVIDAD (fondo `#C7E7F1`, texto `#2E89A6`), placeholder dashed "Foto · pintando con témperas", ♥ 5, 💬 2.
-- [ ] Post 3: avatar megáfono (fondo `#CCD8F4`), badge ANUNCIO, "Para: toda la sala", ♥ 8, 💬 0.
-- [ ] Todos los links navegan con `<Link>`: `/crear-publicacion` (botón, caja y Editar), `/ninos`, `/avisos`, `/mi-cuenta`, `/detalle-publicacion` (íconos de comentarios), `/login` (logout).
-- [ ] Colores base exactos: fondo `#F6ECDF`, tarjetas `#FFFDF9` con borde `#ECE0D0`, sombras y radios según plantilla.
-- [ ] Con el sistema en modo oscuro la página se mantiene en tema claro (sin dark mode).
-- [ ] Los componentes nuevos no usan atributos `style`; todo está en utilities Tailwind con valores arbitrarios exactos.
+- [x] `npm run dev` levanta sin errores y `/` muestra el feed completo: sidebar + saludo + caja + separador + 3 posts. *(Verificado 2026-10-20 en `localhost:3001` a 1440×900; consola sin errores de compilación ni hidratación. Capturas: `.playwright-mcp/verify-feed-app-1440.png`, `.playwright-mcp/verify-feed-app-bottom.png`.)*
+- [x] `npm run build` completa sin errores. *(Next.js 16.4.2 + Turbopack: compilación, TypeScript y prerender de `/` OK.)*
+- [x] A ancho ≥1280px el layout coincide con la plantilla: sidebar 248px sticky, main con scroll propio y contenido centrado de 760px. *(Computed styles: `aside` 248px sticky top-0 h-screen; `main` h-screen overflow-y auto; contenedor max-width 760px centrado — márgenes 211px/211px a 1440px.)*
+- [x] Fredoka en logo, saludo y nombres de autor; Nunito (pesos 400–800) en el resto. *(Computed: Fredoka 17px/600 logo, 30px/600 h1, 16.5px/600 autores; Nunito 400 texto, 600 nav inactivo, 700 likes, 800 eyebrow/nav activo. Fuentes variables self-hosted vía `next/font/google`.)*
+- [x] Post 1: badge LOGRO (fondo `#CFEBD8`, texto `#3E9B6C`), ♥ 3, 💬 1, link "Editar". *(Computed: `rgb(207,235,216)` / `rgb(62,155,108)`; acciones 3 / 1 / Editar → `/crear-publicacion`.)*
+- [x] Post 2: badge ACTIVIDAD (fondo `#C7E7F1`, texto `#2E89A6`), placeholder dashed "Foto · pintando con témperas", ♥ 5, 💬 2. *(Computed: `rgb(199,231,241)` / `rgb(46,137,166)`; placeholder dashed 1.5px `#DBCDBA`, 200px alto, link a `/foto`; acciones 5 / 2.)*
+- [x] Post 3: avatar megáfono (fondo `#CCD8F4`), badge ANUNCIO, "Para: toda la sala", ♥ 8, 💬 0. *(Computed: avatar 44px `rgb(204,216,244)` con SVG megáfono idéntico a la plantilla; badge `rgb(204,216,244)` / `rgb(78,114,200)`; acciones 8 / 0.)*
+- [x] Todos los links navegan con `<Link>`: `/crear-publicacion` (botón, caja y Editar), `/ninos`, `/avisos`, `/mi-cuenta`, `/detalle-publicacion` (íconos de comentarios), `/login` (logout), `/foto` (placeholder de foto). *(Hrefs del DOM verificados; `next/link` importado en Sidebar, ShareBox y PostCard; sin `<a>` planos.)*
+- [x] Colores base exactos: fondo `#F6ECDF`, tarjetas `#FFFDF9` con borde `#ECE0D0`, sombras y radios según plantilla. *(Computed: body `rgb(246,236,223)`; tarjetas `rgb(255,253,249)`, borde 1px `rgb(236,224,208)`, radio 20px, sombra `rgba(120,90,60,.5) 0 4px 16px -12px`; caja 18px.)*
+- [x] Con el sistema en modo oscuro la página se mantiene en tema claro (sin dark mode). *(Emulación `prefers-color-scheme: dark` en Playwright: body, aside y tarjetas mantienen sus colores claros. Captura: `.playwright-mcp/verify-feed-darkmode.png`.)*
+- [x] Los componentes nuevos no usan atributos `style`; todo está en utilities Tailwind con valores arbitrarios exactos. *(Grep `style=` en `app/**/*.{tsx,css}`: 0 resultados; los únicos `[style]` del DOM son internos de Next.js — `nextjs-portal`, `next-route-announcer` — fuera de los componentes.)*
 
 ## Decisiones