1 La página pública

Es index.html, lo primero que ve cualquier persona. No pide contraseña.

• Logo y nombre de la barbería, con "Walk-ins welcome" y Sergio Hernandez.
• Nuestro equipo: la foto y el nombre de cada barbero activo, con cuántos días trabaja. Solo aparece si hay barberos dados de alta.
• Servicios con precio. Si todos los barberos cobran igual sale $25; si cobran distinto sale desde $25, el más barato.
• Horario: si los siete días son iguales, una sola línea "Todos los días, 9:00 AM - 9:00 PM". Si algún día cambia, se listan los siete.
• Galería de tus trabajos.
• Contacto: Quenita Barbershop · Sergio Hernandez, dirección con enlace a Google Maps, teléfono con botones de llamar, SMS y WhatsApp, e Instagram.

2 Cómo reserva un cliente

Desde el botón "HAZ TU CITA AQUI" llega a reservar.html, en cuatro pasos:

1. Elige barbero. Ve la foto y el nombre de cada uno. Es obligatorio: así la cita nace ya asignada y nunca entra una reserva que después nadie pueda atender.
2. Elige servicios. Los precios y las duraciones son los de ESE barbero.
3. Elige día y hora. Solo se le ofrecen horas que ese barbero puede de verdad.
4. Deja su nombre y teléfono. El código de país viene con +1; puede cambiarlo.

Si su barbero no tiene hueco ese día

No lo deja probando fechas a ciegas: le muestra un botón con el próximo libre de ese barbero ("Próximo libre con Sergio: jueves 30 de julio · 11:00") y al tocarlo salta directo a esa fecha y hora.

Español o inglés

El cliente puede cambiar de idioma arriba. La app se acuerda: si reservó en inglés, la confirmación y el recordatorio que le mandes le llegan en inglés.

3 Tu panel

Es appointments.html, el botón "ADMINISTRAR" arriba a la derecha de la página pública.

El calendario

Cada cita sale con una franja del color de su barbero y su nombre al lado. Arriba hay filtros:

Toca un barbero para ver solo su agenda. "Sin asignar" te dice cuántas citas esperan que les pongas barbero.

En cada cita

• Aprobar o Rechazar las solicitudes pendientes.
• 💬 Confirmación y 🔔 Recordatorio: abren WhatsApp con el mensaje ya escrito.
• Reprogramar, Cancelar, No se presentó.
• Depósitos: marcar que requiere depósito, el monto, y si ya lo pagó. La app no cobra nada, es solo control.

La app lleva la cuenta de cuántas veces ha faltado cada teléfono y te avisa si un cliente con historial vuelve a reservar.

4 Barberos: alta, horarios y precios

Botón 👥 Barberos en el panel. Cada barbero es una silla: tres barberos activos = tres citas a la vez.

Datos de cada uno

• Foto: toca el círculo. Se recorta cuadrada y se reduce sola, así que puedes subir una foto del teléfono sin problema. Esta foto es la que ve el cliente al elegir barbero y en "Nuestro equipo".
• Nombre y color con el que sale en el calendario.
• 📱 Teléfono: su WhatsApp. Sale en los mensajes que recibe el cliente, para que pueda escribirle directo.

Horario propio

Botón Horario dentro de su ficha. Cada barbero tiene lo suyo:

• Qué días trabaja y de qué hora a qué hora.
• Su hora de almuerzo (o ninguna).
• Días libres sueltos: vacaciones, una cita médica, lo que sea. Se añaden con el calendario y se quitan tocando la etiqueta.

Servicios y precios propios

Botón Servicios y precios. Marcas qué hace cada uno y a qué precio y duración.

• Si dejas el precio vacío, usa el general.
• Si desmarcas un servicio, ese barbero no aparece cuando el cliente lo elige.
• Las duraciones pueden variar: un fade de 45 min con uno y de 60 con otro. La app lo tiene en cuenta al calcular los horarios.

Dar de baja o borrar

• Dar de baja: deja de recibir citas y desaparece de la web, pero se conserva su historial. Es lo que conviene casi siempre.
• Borrar: lo elimina. Sus citas quedan sin barbero y vuelven a tu cola para reasignarlas. Te avisa cuántas antes de hacerlo.

5 Asignar citas y rechazos

Dentro de cada cita hay un recuadro con el barbero y un desplegable para cambiarlo.

• Debajo te dice quién está libre de verdad a esa hora, ya contando su horario, su almuerzo, sus días libres y lo que ya tiene agendado.
• Los que no pueden salen marcados "ocupado / no disponible". Puedes asignárselo igual — mandas tú — pero te pregunta antes.

Los estados del barbero

Son aparte del estado de la cita (pendiente / confirmada). Que un barbero rechace no cancela la cita del cliente.

Si un barbero rechaza

La cita vuelve a ti sin barbero, con el motivo que escribió, y aparece en el filtro "Sin asignar". No se reasigna sola: decides tú, y si el cliente había pedido a alguien en concreto puedes llamarle antes de cambiarlo.

6 Clientes que llegan sin cita

Toca un día en el calendario y usa CREAR CITA. Es el camino del cliente que aparece por la puerta.

• Barbero: elígelo aquí mismo. Los que no tienen hueco ese día salen marcados. También puedes dejarla "sin asignar" y decidir después.
• Idioma del cliente: español o inglés, para sus mensajes de WhatsApp.
• Servicios, hora, recordatorio y depósito.

Las horas que se ofrecen son las del barbero que elijas. Si no tiene hueco, te dice cuál es su próximo libre.

La cita entra ya confirmada: la creaste tú, no hace falta aprobarla.

7 La app del barbero

Cada barbero tiene su propia pantalla, barbero.html, donde ve solo sus citas.

Mandarle su enlace

En su ficha, botón 📲 Enviar link. Abre WhatsApp con su número y un mensaje con su enlace personal y las instrucciones para instalarlo en el teléfono.

Qué ve él

• Tres pestañas: Hoy, Próximas e Historial.
• De cada cita: hora, cliente, servicios, duración, total, notas y un enlace de WhatsApp al cliente.
• Tres botones: ✅ Aceptar, 🏁 Terminada y ↩ No puedo (le pide el motivo).

Qué NO puede

Ver las citas de los demás, ni tocar precios, servicios ni horarios. Solo lo suyo.

Tú puedes ver su pantalla desde el panel, con el enlace 👤 Vista del barbero de arriba.

8 Mensajes de WhatsApp

Dos botones en cada cita, y los dos en el idioma en que reservó el cliente:

• 💬 Confirmación — "tu cita ha sido confirmada".
• 🔔 Recordatorio — "te recordamos tu cita".

Los dos llevan fecha, hora, servicios, duración, total y, dentro del cuerpo, el nombre y el teléfono del barbero que le toca:

Al final va siempre la barbería: nombre, dirección, WhatsApp e Instagram.

9 Horario del local

Botón 🕐 Horario del día. Es el horario general de la barbería (ahora 9:00 a 21:00 los siete días). Sirve de base: cada barbero puede tener el suyo.

• Hora de almuerzo general.
• Anticipación mínima: con cuánto tiempo debe reservar un cliente. No te afecta a ti al crear citas.
• Bloquear un día entero desde el calendario, o varios días (vacaciones) de una vez. Esto cierra la barbería completa, para todos.

10 Servicios y precios generales

Botón ⚙ Editar servicios y precios. Es la lista base: nombre, precio y duración. Puedes añadir, quitar y editar.

Cada barbero parte de esta lista y puede cambiar lo suyo. Lo que ve el cliente en la página pública es el precio más bajo entre los barberos que hacen ese servicio.

11 Galería de fotos

Botón 📸 Galería de fotos. Hasta 10 fotos con una descripción corta. Las tres primeras salen en la página pública, con un botón "Ver más".

12 Resumen de citas y respaldo

• CSV: cliente, fecha, servicios y total de cada cita confirmada. Se abre en Excel o Numbers.
• PDF: lo mismo, listo para imprimir.
• Respaldo: baja un archivo con TODOS tus datos (citas, barberos, servicios, horario, galería). Se puede volver a cargar desde recuperar-datos.html.

13 Datos de prueba

Abajo de la pantalla hay una barra azul con Cargar datos de prueba: tres barberos con horarios y precios distintos, y una decena de citas repartidas, incluida una rechazada, dos sin asignar y una reservada en inglés.

Sirve para practicar sin miedo. Quitar datos de prueba borra solo los de ejemplo; lo que hayas creado tú se queda. Borrar todo deja la app en cero.

14 Instalar la app

• iPhone: abre la página en Safari, toca compartir (el cuadrado con la flecha) y elige "Añadir a inicio".
• Android: ábrela en Chrome, menú de tres puntos, "Instalar app".

Esto vale para las tres: la pública, tu panel y la del barbero.

15 Lo que falta (Firebase)

Todo lo de arriba funciona hoy, pero los datos viven solo en este navegador. Falta el paso de conectar Firebase, y con él llegan:

• Que el barbero vea sus citas desde su propio teléfono (hoy su pantalla solo funciona en este mismo navegador).
• Su usuario y contraseña.
• Notificaciones push: aviso al instante cuando entra una cita, cuando asignas a un barbero y cuando él acepta o rechaza.
• Recordatorios automáticos y el resumen diario.
• La contraseña de tu panel.
• Poder instalarla de verdad en los teléfonos.

Los archivos de Firebase están guardados en la carpeta _firebase-guardado, listos para volver.

1 The public page

This is index.html, the first thing anyone sees. No password needed.

• Logo and shop name, with "Walk-ins welcome" and Sergio Hernandez.
• Our team: each active barber's photo and name, and how many days a week he works. Only shows once you've added barbers.
• Services with prices. If every barber charges the same it shows $25; if they differ it shows desde $25 — the lowest.
• Hours: if all seven days match, a single line "Todos los días, 9:00 AM - 9:00 PM". If any day differs, all seven are listed.
• Gallery of your work.
• Contact: Quenita Barbershop · Sergio Hernandez, address linked to Google Maps, phone with call, SMS and WhatsApp buttons, and Instagram.

2 How a client books

The "HAZ TU CITA AQUI" button takes them to reservar.html, in four steps:

1. Pick a barber. They see each one's photo and name. It's required — that way the appointment arrives already assigned and you never get a booking nobody can take.
2. Pick services. Prices and durations are that barber's own.
3. Pick a day and time. Only times that barber can genuinely do.
4. Name and phone. Country code starts at +1; they can change it.

If their barber is full that day

Instead of leaving them guessing at dates, it shows a button with that barber's next opening ("Próximo libre con Sergio: jueves 30 de julio · 11:00"). One tap jumps straight there.

Spanish or English

The client can switch language at the top. The app remembers it: if they booked in English, the confirmation and reminder you send arrive in English.

3 Your panel

That's appointments.html, the "ADMINISTRAR" button on the public page.

The calendar

Each appointment shows a stripe in its barber's colour with his name beside it. Filters sit above:

Tap a barber to see only his schedule. "Sin asignar" tells you how many appointments are waiting for you to assign someone.

On each appointment

• Approve or Reject pending requests.
• 💬 Confirmación and 🔔 Recordatorio: open WhatsApp with the message already written.
• Reschedule, Cancel, No-show.
• Deposits: mark that one's required, the amount, and whether it's been paid. The app doesn't charge anything — it's just a record.

The app counts how many times each phone number has failed to show and warns you if a client with history books again.

4 Barbers: adding them, hours and prices

The 👥 Barberos button in your panel. Each barber is a chair: three active barbers means three appointments at once.

Each barber's details

• Photo: tap the circle. It crops square and shrinks automatically, so a phone photo is fine. This is the photo clients see when choosing, and on the public page.
• Name and the colour he shows in as on the calendar.
• 📱 Phone: his WhatsApp. It goes into the messages the client receives so they can reach him directly.

His own schedule

The Horario button inside his card. Every barber has his own:

• Which days he works, and from when to when.
• His lunch break, or none at all.
• Individual days off: holidays, an appointment, whatever. Add them with the date picker, remove them by tapping the tag.

His own services and prices

The Servicios y precios button. Tick what he does, and at what price and duration.

• Leave the price blank and he uses the general one.
• Untick a service and he won't appear when a client picks it.
• Durations can differ — a fade in 45 minutes with one barber, 60 with another. The app accounts for that when working out available times.

Deactivating or deleting

• Dar de baja: he stops receiving appointments and disappears from the website, but his history stays. This is usually what you want.
• Borrar: removes him. His appointments lose their barber and return to your queue. It tells you how many before doing it.

5 Assigning appointments and declines

Inside each appointment there's a box showing the barber and a dropdown to change him.

• Underneath, it tells you who is genuinely free at that hour — already accounting for his schedule, his lunch, his days off and what he's already booked.
• Anyone who can't is marked "ocupado / no disponible". You can still assign him — you're in charge — but it asks first.

The barber's states

These are separate from the appointment's own status (pending / confirmed). A barber declining does not cancel the client's appointment.

If a barber declines

The appointment comes back to you with no barber, along with the reason he gave, and appears under the "Sin asignar" filter. It does not reassign itself: you decide, and if the client had asked for someone specific you can call them first.

6 Walk-in clients

Tap a day on the calendar and use CREAR CITA. This is the path for someone who walks through the door.

• Barber: pick him right here. Anyone with no openings that day is marked. You can also leave it unassigned and decide later.
• Client's language: Spanish or English, for his WhatsApp messages.
• Services, time, reminder and deposit.

The times offered belong to whichever barber you pick. If he has nothing free, it tells you his next opening.

The appointment goes in already confirmed — you created it, no approval needed.

7 The barber's app

Each barber has his own screen, barbero.html, showing only his appointments.

Sending him his link

In his card, the 📲 Enviar link button. It opens WhatsApp to his number with his personal link and instructions for installing it on his phone.

What he sees

• Three tabs: Hoy, Próximas and Historial.
• For each appointment: time, client, services, duration, total, notes and a WhatsApp link to the client.
• Three buttons: ✅ Aceptar, 🏁 Terminada and ↩ No puedo (which asks for a reason).

What he can't do

See anyone else's appointments, or touch prices, services or schedules. Only his own work.

You can view his screen from your panel with the 👤 Vista del barbero link at the top.

8 WhatsApp messages

Two buttons on every appointment, both in whichever language the client booked in:

• 💬 Confirmación — "your appointment is confirmed".
• 🔔 Recordatorio — "a reminder of your appointment".

Both carry the date, time, services, duration, total and — inside the body — the barber's name and phone:

The shop's details always close the message: name, address, WhatsApp and Instagram.

9 Shop hours

The 🕐 Horario del día button. These are the shop's general hours (currently 9:00 to 21:00, seven days). They're the starting point — each barber can have his own.

• General lunch break.
• Minimum notice: how far ahead a client must book. It doesn't restrict you when creating appointments.
• Block a day from the calendar, or several days (holidays) at once. This closes the whole shop, for everyone.

10 General services and prices

The ⚙ Editar servicios y precios button. This is the base list: name, price and duration. You can add, remove and edit.

Every barber starts from this list and can change his own. What the client sees on the public page is the lowest price among the barbers who offer that service.

11 Photo gallery

The 📸 Galería de fotos button. Up to 10 photos with a short caption. The first three appear on the public page with a "see more" button.

12 Reports and backup

• CSV: client, date, services and total for every confirmed appointment. Opens in Excel or Numbers.
• PDF: the same thing, ready to print.
• Backup: downloads a file with ALL your data (appointments, barbers, services, hours, gallery). It can be loaded back from recuperar-datos.html.

13 Sample data

At the bottom of the screen there's a blue bar with Cargar datos de prueba: three barbers with different schedules and prices, and a dozen appointments spread between them — including one declined, two unassigned, and one booked in English.

It's there so you can practise without worry. Quitar datos de prueba removes only the samples; anything you created stays. Borrar todo wipes everything.

14 Installing the app

• iPhone: open the page in Safari, tap share (the square with the arrow) and choose "Add to Home Screen".
• Android: open it in Chrome, three-dot menu, "Install app".

This works for all three: the public page, your panel and the barber's.

15 What's still missing (Firebase)

Everything above works today, but the data lives only in this browser. The remaining step is connecting Firebase, which brings:

• The barber seeing his appointments on his own phone (today his screen only works in this same browser).
• His username and password.
• Push notifications: instant alerts when a booking comes in, when you assign a barber, and when he accepts or declines.
• Automatic reminders and the daily summary.
• The password on your panel.
• Being able to properly install it on phones.

The Firebase files are saved in the _firebase-guardado folder, ready to come back.