Sistema de Reservas con IA

## ==== INICIO PROMPT ====

Construye una aplicación web de reservas online, production-ready, mobile-first, para un negocio local que actualmente gestiona sus reservas por DM de Instagram. La aplicación debe poder desplegarse en cuanto termines y estar lista para enseñar a un cliente real.

### CONTEXTO (edita estos campos antes de enviar — todo lo que la app necesita saber)

**Identidad del negocio**

• NOMBRE_NEGOCIO: Barbería Lobo

• • NOMBRE_NEGOCIO: Barbería Lobo

• TIPO_NEGOCIO: Barbería de caballero

• • TIPO_NEGOCIO: Barbería de caballero

• TAGLINE: "Cortes con carácter desde 2018"

• • TAGLINE: "Cortes con carácter desde 2018"

• DESCRIPCIÓN_CORTA (1–2 frases para el hero): Barbería de barrio en el centro de Madrid. Cortes clásicos, fades modernos y rituales de barba en un espacio pensado para desconectar 30 minutos.

• • DESCRIPCIÓN_CORTA (1–2 frases para el hero): Barbería de barrio en el centro de Madrid. Cortes clásicos, fades modernos y rituales de barba en un espacio pensado para desconectar 30 minutos.

• AÑO_FUNDACIÓN: 2018

• • AÑO_FUNDACIÓN: 2018

• NÚMERO_BARBEROS: 3

• • NÚMERO_BARBEROS: 3

**Datos de contacto**

• DIRECCIÓN_COMPLETA: Calle del Pez 24, bajo, 28004 Madrid

• • DIRECCIÓN_COMPLETA: Calle del Pez 24, bajo, 28004 Madrid

• CIUDAD: Madrid

• • CIUDAD: Madrid

• PAÍS: España

• • PAÍS: España

• TELÉFONO_WHATSAPP: +34 600 000 000 (los DM y reservas confirmadas llegan aquí)

• • TELÉFONO_WHATSAPP: +34 600 000 000 (los DM y reservas confirmadas llegan aquí)

• EMAIL_NEGOCIO: hola@barberialobo.es

• • EMAIL_NEGOCIO: hola@barberialobo.es

• WEB_ACTUAL: ninguna (la app nueva será la web oficial)

• • WEB_ACTUAL: ninguna (la app nueva será la web oficial)

• INSTAGRAM: @barberialobo

• • INSTAGRAM: @barberialobo

• TIKTOK: @barberialobo

• • TIKTOK: @barberialobo

• GOOGLE_MAPS_LINK: https://maps.google.com/?q=Calle+del+Pez+24+Madrid

• • GOOGLE_MAPS_LINK: https://maps.google.com/?q=Calle+del+Pez+24+Madrid

**Marca visual**

• PALETA: fondo negro carbón (#0E0E0E), texto crema (#F4EFE6), acento cobre/dorado (#C9974A)

• • PALETA: fondo negro carbón (#0E0E0E), texto crema (#F4EFE6), acento cobre/dorado (#C9974A)

• MODO_BASE: oscuro

• • MODO_BASE: oscuro

• TIPOGRAFÍA_TÍTULOS: sans-serif fuerte estilo Satoshi / Inter Display

• • TIPOGRAFÍA_TÍTULOS: sans-serif fuerte estilo Satoshi / Inter Display

• TIPOGRAFÍA_TEXTO: sans-serif neutra (Inter)

• • TIPOGRAFÍA_TEXTO: sans-serif neutra (Inter)

• TIPOGRAFÍA_PRECIOS: serif sutil (Playfair) para sensación premium

• • TIPOGRAFÍA_PRECIOS: serif sutil (Playfair) para sensación premium

• TONO_DE_MARCA: cercano, directo, sin floritura. Tuteo. Cero emojis.

• • TONO_DE_MARCA: cercano, directo, sin floritura. Tuteo. Cero emojis.

• LOGO: no hay aún — usa el nombre del negocio en mayúsculas con espaciado amplio como wordmark provisional

• • LOGO: no hay aún — usa el nombre del negocio en mayúsculas con espaciado amplio como wordmark provisional

• FOTOS: usa stock libre (Unsplash / Pexels) buscando "barbershop interior dark", "fade haircut", "barber tools" — recortes cuadrados y horizontales según sección

• • FOTOS: usa stock libre (Unsplash / Pexels) buscando "barbershop interior dark", "fade haircut", "barber tools" — recortes cuadrados y horizontales según sección

**Servicios reales (precarga estos en la base de datos)**

| Servicio | Duración | Precio |

|---|---|---|

| Corte clásico | 30 min | 15 € |

| Corte + barba | 45 min | 22 € |

| Solo barba | 20 min | 12 € |

| Corte niño (-12) | 25 min | 12 € |

| Tinte / camuflaje canas | 60 min | 30 € |

| Pack ritual completo (corte + barba + mascarilla + masaje) | 75 min | 40 € |

**Horario de apertura**

• Lunes a Viernes: 10:00 – 14:00 y 16:00 – 20:30

• • Lunes a Viernes: 10:00 – 14:00 y 16:00 – 20:30

• Sábado: 10:00 – 18:00 (jornada continua)

• • Sábado: 10:00 – 18:00 (jornada continua)

• Domingo: cerrado

• • Domingo: cerrado

• Festivos: cerrado

• • Festivos: cerrado

**Reglas de reserva**

• Antelación mínima: 2 horas antes del hueco

• • Antelación mínima: 2 horas antes del hueco

• Antelación máxima: 14 días

• • Antelación máxima: 14 días

• Margen entre citas: 5 minutos de buffer automático

• • Margen entre citas: 5 minutos de buffer automático

• Cancelación gratis: hasta 4 horas antes

• • Cancelación gratis: hasta 4 horas antes

• Política de no-show: aviso al WhatsApp del dueño y bloqueo del cliente tras 2 fallos

• • Política de no-show: aviso al WhatsApp del dueño y bloqueo del cliente tras 2 fallos

• Idioma de la app: español de España

• • Idioma de la app: español de España

• Moneda: euro (€)

• • Moneda: euro (€)

• Zona horaria: Europe/Madrid

• • Zona horaria: Europe/Madrid

**Configuración del panel del dueño**

• RUTA_ADMIN: /admin

• • RUTA_ADMIN: /admin

• CLAVE_ADMIN_DEFECTO: lobo2026

• • CLAVE_ADMIN_DEFECTO: lobo2026

• EMAIL_NOTIFICACIONES: hola@barberialobo.es

• • EMAIL_NOTIFICACIONES: hola@barberialobo.es

• WHATSAPP_NOTIFICACIONES: +34 600 000 000

• • WHATSAPP_NOTIFICACIONES: +34 600 000 000

• MENSAJE_WHATSAPP_PRERELLENADO: "Nueva reserva en Barbería Lobo — {servicio} el {fecha} a las {hora} para {nombre} ({telefono})."

• • MENSAJE_WHATSAPP_PRERELLENADO: "Nueva reserva en Barbería Lobo — {servicio} el {fecha} a las {hora} para {nombre} ({telefono})."

**Textos clave (úsalos literales, no inventes)**

• CTA principal del hero: "Reservar ahora"

• • CTA principal del hero: "Reservar ahora"

• Subtítulo del hero: "30 segundos. Sin descargar nada. Sin escribir DMs."

• • Subtítulo del hero: "30 segundos. Sin descargar nada. Sin escribir DMs."

• Confirmación de reserva: "Listo. Te esperamos. Si necesitas mover la cita, escríbenos por WhatsApp."

• • Confirmación de reserva: "Listo. Te esperamos. Si necesitas mover la cita, escríbenos por WhatsApp."

• Footer: "Barbería Lobo · Calle del Pez 24, Madrid · @barberialobo"

• • Footer: "Barbería Lobo · Calle del Pez 24, Madrid · @barberialobo"

**Lo que NO debe aparecer**

• Nada de "lorem ipsum", "tu logo aquí", "coming soon", links rotos, botones que no hacen nada.

• • Nada de "lorem ipsum", "tu logo aquí", "coming soon", links rotos, botones que no hacen nada.

• Nada de pasarela de pago — el cobro es presencial en el local.

• • Nada de pasarela de pago — el cobro es presencial en el local.

• Nada de creación de cuenta para el cliente final — la reserva se hace solo con nombre + teléfono.

• • Nada de creación de cuenta para el cliente final — la reserva se hace solo con nombre + teléfono.

### OBJETIVO

Reemplazar el flujo de "escríbeme por DM para reservar" por un flujo de reserva online en 3 pasos máximos, sin que el cliente final tenga que crear cuenta ni descargar nada. Cada reserva confirmada debe llegar al dueño del negocio por WhatsApp y email automáticamente.

### STACK Y CALIDAD

• React + Tailwind, mobile-first, responsive total (móvil, tablet, desktop).

• • React + Tailwind, mobile-first, responsive total (móvil, tablet, desktop).

• Backend ligero con persistencia (las reservas se guardan, no se pierden al recargar).

• • Backend ligero con persistencia (las reservas se guardan, no se pierden al recargar).

• Despliegue listo en un solo clic con URL pública.

• • Despliegue listo en un solo clic con URL pública.

• Código limpio, comentado en español, listo para que un dev lo amplíe.

• • Código limpio, comentado en español, listo para que un dev lo amplíe.

• Sin dependencias rotas, sin placeholders del tipo "lorem ipsum", sin errores en consola.

• • Sin dependencias rotas, sin placeholders del tipo "lorem ipsum", sin errores en consola.

### ESTÉTICA

Aplica la paleta, tipografías y tono de marca definidos en el bloque CONTEXTO. Diseño moderno, premium, con sensación de marca real — no de plantilla genérica. Microanimaciones suaves al hacer hover y al cambiar de paso. Fotos de stock libres relevantes al sector (Unsplash / Pexels) integradas con buen recorte.

### ESTRUCTURA DE PÁGINAS

**1. Home (landing de una sola página, scroll vertical)**

• Hero a pantalla completa con foto del local + nombre del negocio + tagline + CTA grande "Reservar ahora" que hace scroll suave a la sección de reserva.

• • Hero a pantalla completa con foto del local + nombre del negocio + tagline + CTA grande "Reservar ahora" que hace scroll suave a la sección de reserva.

• Sección "Servicios" con tarjetas (icono, nombre, duración, precio).

• • Sección "Servicios" con tarjetas (icono, nombre, duración, precio).

• Sección "Reserva en 3 pasos" con el flujo embebido (no en otra página).

• • Sección "Reserva en 3 pasos" con el flujo embebido (no en otra página).

• Sección "Horario" con tabla de apertura por día.

• • Sección "Horario" con tabla de apertura por día.

• Sección "Cómo llegar" con dirección, mapa embebido y botón "Cómo llegar" que abre Google Maps.

• • Sección "Cómo llegar" con dirección, mapa embebido y botón "Cómo llegar" que abre Google Maps.

• Footer con Instagram, WhatsApp, teléfono y aviso legal mínimo.

• • Footer con Instagram, WhatsApp, teléfono y aviso legal mínimo.

**2. Panel del dueño (ruta y clave definidos en `CONTEXTO`)**

• Login con un único campo de contraseña.

• • Login con un único campo de contraseña.

• Vista de calendario con las reservas del día, semana y mes.

• • Vista de calendario con las reservas del día, semana y mes.

• Lista de reservas con estado (pendiente / confirmada / cancelada).

• • Lista de reservas con estado (pendiente / confirmada / cancelada).

• Botones para confirmar, cancelar y marcar como completada.

• • Botones para confirmar, cancelar y marcar como completada.

• Sección de configuración: editar servicios, precios, horarios y datos de contacto sin tocar código.

• • Sección de configuración: editar servicios, precios, horarios y datos de contacto sin tocar código.

Tras confirmar:

• Pantalla de confirmación con resumen, fecha, hora, servicio, precio y botón "Añadir a mi calendario" (genera archivo .ics).

• • Pantalla de confirmación con resumen, fecha, hora, servicio, precio y botón "Añadir a mi calendario" (genera archivo .ics).

• Notificación automática al dueño por WhatsApp (link wa.me con mensaje pre-rellenado) y por email (usar EmailJS o equivalente sin clave de pago).

• • Notificación automática al dueño por WhatsApp (link wa.me con mensaje pre-rellenado) y por email (usar EmailJS o equivalente sin clave de pago).

• La reserva queda guardada y visible en el panel del dueño.

• • La reserva queda guardada y visible en el panel del dueño.

### DATOS A PRECARGAR

Usa los servicios, horarios, reglas de reserva y textos definidos en el bloque CONTEXTO como datos iniciales de la base de datos. Todo debe ser editable después desde el panel del dueño.

### REQUISITOS NO NEGOCIABLES

• La app debe poder enseñarse a un cliente sin pedir disculpas por nada.

• • La app debe poder enseñarse a un cliente sin pedir disculpas por nada.

• Cero pantallas en blanco, cero botones que no hacen nada, cero formularios que no validan.

• • Cero pantallas en blanco, cero botones que no hacen nada, cero formularios que no validan.

• El flujo de reserva debe completarse en menos de 30 segundos desde la home.

• • El flujo de reserva debe completarse en menos de 30 segundos desde la home.

• Móvil primero: que se vea perfecto en un iPhone vertical sin zoom ni scroll horizontal.

• • Móvil primero: que se vea perfecto en un iPhone vertical sin zoom ni scroll horizontal.

• Todos los textos en español de España, sin anglicismos innecesarios.

• • Todos los textos en español de España, sin anglicismos innecesarios.

• Al terminar, dame: (a) la URL pública desplegada, (b) la URL del panel /admin y la clave, (c) un resumen de 5 líneas de qué se ha construido.

• • Al terminar, dame: (a) la URL pública desplegada, (b) la URL del panel /admin y la clave, (c) un resumen de 5 líneas de qué se ha construido.

### EXTRAS SI HAY TIEMPO

• Modo claro / oscuro con toggle.

• • Modo claro / oscuro con toggle.

• Animación de "tijera cortando" al confirmar reserva.

• • Animación de "tijera cortando" al confirmar reserva.

• Página /galeria con grid de fotos de cortes (placeholder con stock).

• • Página /galeria con grid de fotos de cortes (placeholder con stock).

• Recordatorio automático por email 24h antes de la cita.

• • Recordatorio automático por email 24h antes de la cita.

Empieza ya. No me preguntes para confirmar nada — usa los valores por defecto cuando dudes y deja todo funcionando end-to-end.

## ==== FIN PROMPT ====

==== INICIO PROMPT UNIVERSAL EMERGENT: APP DE RESERVAS PARA NEGOCIO LOCAL ====

Construye una aplicación web full-stack de reservas online, production-ready, mobile-first, para un negocio local que actualmente gestiona citas por WhatsApp, Instagram, teléfono o de forma manual. La aplicación debe poder desplegarse al terminar y estar lista para enseñar a un cliente real.

CONTEXTO DEL NEGOCIO

Usa exactamente estos datos como configuración inicial de la app. Todo debe quedar editable después desde el panel del dueño.

Identidad del negocio NOMBRE_NEGOCIO: [Nombre del negocio] TIPO_NEGOCIO: [Ejemplo: Barbería, Clínica dental, Centro de estética, Fisioterapia, Peluquería, Estudio de tatuajes, Academia, Masajes, Veterinaria] TAGLINE: "[Frase corta de marca]" DESCRIPCIÓN_CORTA: [1 o 2 frases para el hero explicando qué hace el negocio y su propuesta de valor] AÑO_FUNDACIÓN: [Año] NÚMERO_PROFESIONALES: [Número de trabajadores que atienden citas] NOMBRE_PROFESIONALES: [Lista separada por comas. Ejemplo: Laura, Marta, Javier]

Datos de contacto DIRECCIÓN_COMPLETA: [Dirección completa] CIUDAD: [Ciudad] PAÍS: [País] TELÉFONO_WHATSAPP: [Número completo con prefijo] TELÉFONO_NEGOCIO: [Número del negocio] EMAIL_NEGOCIO: [Email] WEB_ACTUAL: [Si no existe, escribir "ninguna"] INSTAGRAM: [Usuario o enlace] TIKTOK: [Usuario o enlace] GOOGLE_MAPS_LINK: [Enlace de Google Maps]

Marca visual PALETA: [Colores principales con hex] MODO_BASE: [oscuro o claro] TIPOGRAFÍA_TÍTULOS: [Ejemplo: Inter Display, Satoshi, Playfair, Montserrat] TIPOGRAFÍA_TEXTO: [Ejemplo: Inter] TIPOGRAFÍA_PRECIOS: [Opcional] TONO_DE_MARCA: [Ejemplo: cercano, premium, profesional, médico, elegante, minimalista, directo] LOGO: [describir si existe o indicar que use un wordmark provisional] FOTOS: usa stock libre relevante al sector buscando imágenes relacionadas con [TIPO_NEGOCIO], con recortes buenos para móvil y desktop

Servicios reales Precarga estos servicios en la base de datos y muéstralos en la web:

Horario de apertura Lunes: [Ej. 10:00 – 14:00 y 16:00 – 20:00 / o cerrado] Martes: [horario] Miércoles: [horario] Jueves: [horario] Viernes: [horario] Sábado: [horario] Domingo: [horario] Festivos: [abierto o cerrado]

Reglas de reserva ANTELACIÓN_MÍNIMA: [Ej. 2 horas] ANTELACIÓN_MÁXIMA: [Ej. 14 días] BUFFER_ENTRE_CITAS: [Ej. 5 minutos] CANCELACIÓN_GRATIS: [Ej. hasta 4 horas antes] POLÍTICA_NO_SHOW: [Ej. aviso al dueño y bloqueo del cliente tras 2 ausencias] IDIOMA_APP: español de España MONEDA: euro (€) ZONA_HORARIA: Europe/Madrid

Configuración del panel del dueño RUTA_ADMIN: /admin CLAVE_ADMIN_DEFECTO: [Ej. negocio2026] EMAIL_NOTIFICACIONES: [Email] WHATSAPP_NOTIFICACIONES: [Número] MENSAJE_WHATSAPP_PRERELLENADO: "Nueva reserva en {NOMBRE_NEGOCIO} — {servicio} el {fecha} a las {hora} para {nombre} ({telefono})."

Textos clave CTA_PRINCIPAL_HERO: "Reservar ahora" SUBTÍTULO_HERO: "[Ejemplo: Reserva en menos de 30 segundos. Sin llamadas. Sin descargas.]" CONFIRMACIÓN_RESERVA: "[Ejemplo: Listo. Te esperamos. Si necesitas mover la cita, escríbenos por WhatsApp.]" FOOTER: "[Nombre negocio] · [Dirección] · [Instagram o teléfono]"

Lo que NO debe aparecer Nada de "lorem ipsum", "tu logo aquí", "coming soon", textos rotos, pantallas vacías, botones que no hacen nada ni enlaces rotos. Nada de creación de cuenta para el cliente final. Nada de pasarela de pago salvo que se indique expresamente. Nada de anglicismos innecesarios en textos de cara al cliente.

OBJETIVO

Reemplazar el flujo actual de reservas manuales por una web de reservas online en 3 pasos máximos, sin que el cliente final tenga que crear cuenta ni descargar nada. Cada reserva confirmada debe quedar guardada, visible en el panel del dueño y generar una notificación por WhatsApp y email.

STACK Y CALIDAD

Usa React + Tailwind. Hazla mobile-first y totalmente responsive. Backend ligero con persistencia real: las reservas deben guardarse y no perderse al recargar. Despliegue listo en un clic con URL pública. Código limpio y comentado en español. Sin dependencias rotas, sin placeholders, sin errores en consola.

MODELO DE DATOS

Crea y usa estas entidades editables desde admin:

1. professionals

• id
• nombre
• activo

1. services

• id
• nombre
• duracion_min
• precio
• activo
• descripcion_opcional

1. business_hours

• dia_semana
• apertura_1
• cierre_1
• apertura_2
• cierre_2
• cerrado

1. bookings

• id
• servicio_id
• profesional_id
• nombre_cliente
• telefono
• email
• nota
• fecha
• hora_inicio
• hora_fin
• precio
• estado
• created_at

1. settings

• nombre_negocio
• tipo_negocio
• tagline
• descripcion_corta
• direccion
• ciudad
• pais
• whatsapp
• telefono
• email
• instagram
• tiktok
• google_maps_link
• politica_cancelacion
• politica_no_show
• idioma
• moneda
• timezone
• admin_password

1. blocked_clients

• telefono
• motivo
• bloqueado_desde

ESTRUCTURA DE PÁGINAS

1. Home Landing de una sola página con scroll vertical.

Debe incluir:

• Hero principal con imagen potente, nombre del negocio, tagline, subtítulo y CTA grande
• Sección de servicios con tarjetas mostrando nombre, duración y precio
• Sección "Reserva en 3 pasos" con el flujo embebido
• Sección de horario
• Sección "Cómo llegar" con dirección, mapa embebido y botón "Cómo llegar"
• Footer con Instagram, WhatsApp, teléfono y aviso legal mínimo

2. Panel del dueño Ruta: la definida en CONTEXTO Login con un único campo de contraseña Dashboard con calendario y métricas Lista de reservas con filtros y estados Sección de configuración editable sin tocar código

FLUJO DE RESERVA EN 3 PASOS

Paso 1 — Servicio Mostrar una rejilla de tarjetas con los servicios disponibles. Al pulsar uno, queda seleccionado y se activa el botón "Siguiente".

Paso 2 — Día y hora Mostrar calendario con los próximos días permitidos según la antelación máxima. Al elegir un día, mostrar huecos disponibles calculados según:

• duración del servicio
• horarios del negocio
• buffer entre citas
• reservas ya existentes
• profesionales activos
• antelación mínima
• zona horaria correcta

Bloquear automáticamente:

• horas ya ocupadas
• horario cerrado
• días no disponibles
• huecos inválidos o que solapen otra cita

Paso 3 — Datos del cliente Formulario corto con:

• nombre obligatorio
• teléfono obligatorio con prefijo internacional
• email opcional
• nota opcional

Botón grande: "Confirmar reserva"

TRAS CONFIRMAR LA RESERVA

Debe ocurrir todo esto:

1. Guardar la reserva en la base de datos
2. Mostrar pantalla de confirmación con resumen:

• servicio
• fecha
• hora
• profesional asignado
• precio

1. Mostrar botón "Añadir a mi calendario" que genere archivo .ics
2. Generar enlace wa.me con el mensaje pre-rellenado para el dueño
3. Preparar y enviar notificación por email al dueño usando un método sin pago o una solución equivalente
4. Mostrar la reserva en el panel del dueño

REGLAS DE NEGOCIO

• idioma: español de España
• moneda: euro
• sin creación de cuentas para cliente final
• sin scroll horizontal en móvil
• sin pantallas vacías
• sin botones muertos
• validaciones claras y mensajes de error en español
• impedir reservas fuera de rango
• impedir reservas en el pasado
• impedir solapamientos
• impedir reservar en días cerrados
• bloquear clientes según política de no-show
• todo lo inicial debe poder editarse después desde admin

PANEL ADMIN

Debe incluir:

• login por contraseña
• dashboard con resumen del día, semana y mes
• calendario de reservas
• lista de reservas con estados: pendiente, confirmada, cancelada, completada
• botones para confirmar, cancelar y marcar como completada
• edición de servicios
• edición de profesionales
• edición de horarios
• edición de contacto y textos principales
• edición de reglas básicas del negocio

UX Y DISEÑO

Haz que el diseño transmita una marca real del sector indicado, no una plantilla genérica. Debe sentirse moderno, profesional y coherente con el tipo de negocio. Prioriza experiencia móvil perfecta. Usa buenas jerarquías visuales, buen contraste, microanimaciones suaves y botones claros. Todos los textos deben sonar naturales en español de España.

REQUISITOS NO NEGOCIABLES

La app debe poder enseñarse a un cliente sin pedir disculpas por nada. Cero pantallas en blanco. Cero botones que no hagan nada. Cero formularios sin validación. La reserva debe poder completarse rápido desde la home. Todo debe verse perfecto en un iPhone vertical sin zoom ni scroll horizontal.

ENTREGA FINAL

Al terminar:

1. revisa la app completa
2. corrige errores
3. comprueba responsive móvil
4. comprueba que admin funciona
5. comprueba que la persistencia funciona
6. elimina cualquier placeholder
7. despliega

Después dame: (a) la URL pública desplegada (b) la URL del panel /admin (c) la clave del admin (d) un resumen de 5 líneas de qué se ha construido

EXTRAS OPCIONALES

• modo claro/oscuro con toggle
• recordatorio automático por email 24h antes
• página /galeria con imágenes del negocio o stock del sector
• animación sutil de confirmación al reservar
• opción para elegir profesional si el negocio lo necesita

Empieza ya. No preguntes para confirmar nada. Usa los valores por defecto cuando dudes y deja todo funcionando end-to-end.

==== FIN PROMPT UNIVERSAL ====