Para el dueño

Guía de tu app

Todo lo que hace tu app y cómo usarla, explicado fácil. Guarda esta página — puedes volver a leerla cuando quieras.

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.

💡 Todo esto se actualiza solo desde el panel. No hay que tocar nada más.

👤 Enlace "BARBERO" (18 ago 2026): junto al botón "ADMIN" de arriba hay uno igual que lleva a barbero.html -- por si un barbero termina en esta página (por ejemplo, después de crear una cita para un walk-in y tocar "Inicio" en la página de reservas) y necesita volver a su panel.

2 Cómo reserva un cliente

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

Elige barbero. Ve la foto y el nombre de cada uno. Elegir algo es obligatorio -- así la cita nace ya asignada y nunca entra una reserva que después nadie pueda atender -- pero si no tiene preferencia puede tocar "¿Cliente nuevo? Sin preferencia" en vez de un barbero en concreto; la cita entra sin barbero y la asignas tú (ver sección 5).
Elige servicios. Los precios y las duraciones son los de ESE barbero. Sin preferencia (18 ago 2026) ve la lista completa de la barbería: los generales MÁS los exclusivos de cada barbero (ej. "Facial", solo Yanelys), agrupados bajo el nombre de quien lo hace -- así puede pedir algo así sin tener que elegir barbero primero. Si termina pidiendo uno de estos, el aviso que te llega te dice quién es el único que lo hace, para que sepas a quién asignársela (ver sección 5).
Elige día y hora. La fecha se toca en una tira de círculos que se desliza hacia los lados con el dedo o con las flechas ‹ › (18 ago 2026), en vez del calendario emergente del teléfono. Solo se le ofrecen horas que ese barbero puede de verdad.
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.

🔒 Justo antes de guardar se vuelve a comprobar que la hora siga libre. Si alguien se le adelantó, se le avisa y elige otra en vez de crear una cita imposible.

3 Tu panel

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

📥 Bandeja

Arriba de todo, siempre visible: la píldora azul "📥 BANDEJA (N)" con el total de lo que tiene dentro (20 ago 2026, mismo nombre que ya usa la app del barbero). Debajo, "Por hacer" (solicitudes sin confirmar y rechazos esperando reasignar) y "Confirmadas" (lo que ya está listo y sigue por pasar). Tocar cualquier fila abre ese día en el calendario.

El calendario

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

🔄 Selector de mes (18 ago 2026): las flechas ◀ ▶ y el mes están pegadas justo arriba de la cuadrícula -- antes quedaban arriba del todo, separadas del calendario por los avisos que a veces aparecen (actualización, reconexión, recordatorio del PDF...). Cada día muestra también un numerito redondo (antes solo "hoy" lo tenía), para que nunca se confunda con la cantidad de citas ni con los puntos de color de cada barbero.

Todos Sergio Luis Sin asignar (2)

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

Confirmada Pendiente No se presentó Bloqueado

Trabajos por barbero

Justo debajo del calendario hay un gráfico de barras (solo lo ves tú, el cliente nunca lo ve) con cuatro barras por cada barbero, del mes que estés viendo en el calendario de arriba:

Confirmadas: citas que ese barbero ya aceptó.
Sin aceptar: le pertenecen pero todavía no las abrió en su propia app para aceptarlas o rechazarlas.
Cancelado por barbero: el barbero avisó que no puede (20 ago 2026: cuenta aquí tanto si cancela una cita ya aceptada como si suelta una "sin preferencia" para que la reasignes).
Cancelado por cliente: el cliente llamó a avisar que no viene.

Se actualiza solo, sin que tengas que recargar la página: cambia al pasar de mes con las flechas del calendario, y también en cuanto llega o cambia una cita.

En cada cita

Aprobar o Rechazar las solicitudes pendientes.
✉️ Confirmación y 🔔 Recordatorio: abren la app de mensajes del teléfono con el SMS 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.

💾 Cada campo se guarda solo en cuanto lo cambias (autoguardado). Además, cada parte de la ficha -- datos, horario, servicios y precios, correo y contraseña -- tiene su propio botón Guardar siempre visible, para que quede clara la confirmación y sirva de respaldo si algún campo no llegó a guardarse solo.

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: sale en los SMS que recibe el cliente, para que pueda escribirle directo.
📝 Bio breve: unas líneas sobre el barbero (experiencia, especialidad). Sale en "Nuestro equipo" de la página principal y al elegir barbero para reservar, recortada a 4 líneas con un botón "Leer más" si escribes de más. Es opcional -- si la dejas vacía, esas pantallas no muestran ningún bloque para ese barbero. Hay un segundo campo para la versión en inglés, también opcional: si no lo llenas, el cliente que elige inglés ve la misma bio en español (no se traduce sola, a diferencia del nombre de un servicio -- una bio es un párrafo completo y el traductor de palabras sueltas saldría roto). El botón 🌐 Traducir con Google Translate, justo debajo del campo en español, abre Google Translate en una pestaña nueva con el texto ya puesto: lees la traducción, la ajustas si hace falta, y la pegas en el campo de inglés.

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, un día a la vez -- puede almorzar a la 1 los lunes y a las 2 los viernes, por ejemplo, o no tener almuerzo cierto día. Cada día tiene su propia casilla, hora y duración, justo debajo del horario de ese día.
Días libres sueltos: una cita médica, un día puntual, lo que sea. Se añaden con el calendario y se quitan tocando la etiqueta.
Vacaciones (varios días de golpe): justo debajo, pones "Desde" y "Hasta" y tocas Bloquear rango. Bloquea solo a ESE barbero — los demás siguen trabajando normal esos días. "Desbloquear rango" lo deshace.

🚫 No puede salirse del horario de la tienda (18 ago 2026): ningún barbero puede abrir antes ni cerrar después que el horario general de la tienda ese mismo día -- si lo intentas, sale un aviso explicando el horario de la tienda para ese día y el cambio no se guarda. Esto evita que la web de reservas le ofrezca a un cliente una hora en la que la barbería ya está cerrada. Ojo: si cambias el horario GENERAL para que sea más corto, los barberos que ya tenían un horario más amplio de antes no se acortan solos -- hay que entrar a la ficha de cada uno y ajustarlo a mano.

👋 Lo que ve el cliente (18 ago 2026): si un cliente elige a un barbero en concreto para reservar y ese día está bloqueado (día libre o vacaciones) pero la barbería SÍ abre para los demás, ya no le sale el aviso genérico de "no atendemos" -- le sale un mensaje con el nombre de ESE barbero explicando que no está ese día, con un botón para elegir a otro directamente ahí mismo. Si el día está bloqueado para TODA la barbería (nadie trabaja), sigue saliendo el aviso genérico, porque cambiar de barbero no serviría de nada.

🔒 Protección de últimos 3 días: si intentas cambiar el horario, el almuerzo, un día libre o vacaciones de un barbero para un día que cae dentro de los próximos 3 días, y ese barbero YA tiene una cita agendada ese día, el cambio no se guarda -- sale un aviso explicando por qué. Habla con ese cliente y reprográmale la cita a mano (botón "Reprogramar" en la cita) y después vuelve a intentar el cambio. Citas de más adelante (la semana que viene, por ejemplo) no bloquean nada.

📵 Citas de más adelante: si el cambio SÍ se guarda pero deja sin hora válida a alguna cita futura (por ejemplo, acortaste el jueves y había una cita a esa hora dentro de tres semanas), se abre solita una ventana con la lista de esos clientes y un botón 📩 Avisar por SMS por cada uno. Al tocarlo se abre tu app de mensajes con el aviso ya escrito -- diciéndole al cliente que su hora ya no está disponible y que llame para elegir otra -- y tú decides si lo mandas. No se manda ni se reprograma nada solo.

Servicios y precios propios

Botón Servicios y precios. Ahí salen con un check todos los servicios generales de la tienda (los mismos para cualquier barbero: Servicio completo, Corte de Cabello + Shampoo, Barba + Toalla Caliente, Perfilado de Barba, y los 2 combos -- 6 en total, 18 ago 2026). Marcas cuáles 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.

Debajo, en "Servicios propios de [nombre]", puedes agregar servicios que solo ofrece ese barbero (por ejemplo, un diseño de barba que solo hace uno de ellos). Van en dos secciones -- Individuales y Combos -- cada una con su propio recuadro para escribir el nombre, precio y duración y tocar ➕ Agregar: el recuadro donde lo escribas es la sección donde queda, sin nada más que elegir. Para moverlo de sección después, bórralo (🗑) y agrégalo de nuevo en el recuadro correcto. Estos servicios no salen en la lista de otro barbero, pero SÍ salen en la página principal (agrupados en "Servicios Individuales" y "Combos") y en el selector de servicios en cuanto el cliente elige a ese barbero en concreto. Se pueden editar o borrar en cualquier momento.

🌐 Traducción automática (18 ago 2026): el nombre en inglés sale SOLO, sin que nadie escriba nada -- la app reconoce las palabras típicas de barbería (corte, barba, afeitado, shampoo, toalla caliente, etc.) y arma el nombre en inglés al mostrarlo. Cada servicio propio también tiene un recuadro "Nombre (inglés)" por si esa traducción automática no te convence para alguno en particular: lo que escribas ahí manda siempre por encima de la traducción automática.

Correo y contraseña

En el recuadro 🔑 Con qué entra a su app le pones un correo de verdad y una contraseña (mínimo 6 caracteres). Son los datos con los que abre su propia app, y se los puedes decir por teléfono si hace falta.

El correo se ve normal; la contraseña sale en puntos, con un 👁 para mostrarla un momento.
El botón Guardar está siempre visible en cuanto el barbero ya tiene cuenta creada (antes de eso, se usa "📲 Enviar link" para crearla). Tócalo después de cambiar el correo o la contraseña para que se aplique.
Además de con estos datos, el barbero siempre puede entrar tocando su enlace personal (el que le mandas con "📲 Enviar link"): no hace falta que escriba nada.

Hacerlo administrador

La casilla "También administrador" (o el botón "⭐ Hacer administrador" en su ficha) le da acceso a tu mismo panel: ve el calendario completo, los datos de todos los clientes, y puede cambiar precios y horarios. Úsalo solo con un encargado de confianza.

Se puede quitar después con "Quitar administrador", salvo al dueño de la barbería: ese cargo no se retira desde el panel a propósito.

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.

⭐ El dueño de la barbería (marcado una sola vez con el botón "Es el dueño") no se puede borrar ni dar de baja: siempre queda alguien con acceso a la barbería.

Administrador sin silla (acceso de IT)

No todo administrador tiene por qué ser también barbero. Alguien que solo entra a arreglar o actualizar la app (por ejemplo, quien la mantiene técnicamente) puede tener acceso completo de administrador sin aparecer nunca como barbero: no sale en "Nuestro equipo", no lo puede elegir un cliente al reservar, y no cuenta como una silla más.

Se crea igual que cualquier administrador: cuenta de Firebase + un documento en roles/{su UID} con role: admin, pero sin el campo barberId.
Si esa persona ya tenía una ficha de barbero (por ejemplo, de cuando se estaba probando la app), se le quita con "Dar de baja" o "Borrar" igual que a cualquier otro (arriba en esta sección), y se borra el barberId de su documento en roles.
El acceso al panel no cambia en nada: sigue viendo el calendario completo, todos los clientes, y puede cambiar precios y horarios -- eso depende solo de role: admin, no de tener silla.
Lo único que cambia son los avisos: como no tiene silla propia, nunca le llega "es tu cita" -- solo los avisos generales de administrador (cliente sin preferencia, rechazo sin resolver, cita sin contestar).

🔧 Esto se hace desde la consola de Firebase (Authentication + Firestore), no desde el panel -- por ahora no hay un botón para "quitarme la silla" desde aquí mismo.

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.
Junto a cada nombre sale cuántas ha aceptado (✅) y cuántas ha rechazado (↩), para que decidas con esa información a quién le toca un cliente nuevo o sin barbero. Los mismos números salen también al crear una cita para un cliente que llega sin reserva (ver sección 6).

Los estados del barbero

📩 Enviada al barbero ✅ Aceptada ↩ Rechazada 🏁 Terminada

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 y aparece en el filtro "Sin asignar" al instante. No se reasigna sola: decides tú, y si el cliente había pedido a alguien en concreto puedes llamarle antes de cambiarlo.

✋ Ya no pide un motivo escrito (20 ago 2026): antes, al rechazar, el barbero tenía que escribir por qué. Se quitó -- menos pasos, y el rechazo ya cuenta solo como "Cancelado por barbero" en Trabajos por barbero (más arriba), así que no hace falta un texto aparte para saber qué pasó.

⏳ El aviso a tu teléfono ya NO es al instante (18 ago 2026): se le da al barbero una hora para resolverlo por su cuenta (reasignarla él mismo, avisar al cliente con otro horario) antes de sonarte el teléfono por algo que a lo mejor ya está arreglando. Si a la hora la cita sigue sin barbero, te llega el aviso -- una sola vez -- y ya dice quién rechazó, y si otro barbero está libre justo a esa hora ("Fulano está libre a esa hora"), para que no tengas que ir a mirarlo tú. Mientras tanto, la cita YA está visible en "Sin asignar" si abres el panel -- el aviso tardío es solo para cuando no lo estás mirando.

👥 Avisa a TODOS los administradores, no solo al dueño (18 ago 2026): tanto un rechazo sin resolver como una cita de "cliente sin preferencia" (sección 2) suenan en el teléfono de cualquier administrador que tenga los avisos activados, no solo en el del dueño de la barbería. Así, si el dueño está de vacaciones y dejó a otra persona como administrador mientras tanto, esa persona se entera igual y puede resolverlo.

🎯 Aviso de servicio exclusivo (18 ago 2026): si una cita "sin preferencia" trae un servicio que solo hace un barbero en concreto (ej. "Facial", exclusivo de Yanelys), el aviso push lo dice explícito -- "Facial: solo Yanelys" -- para que sepas de una vez a quién asignársela, sin tener que abrir el panel a adivinar.

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 SMS.
Servicios, hora, recordatorio y depósito.

☎️ Nombre y teléfono son obligatorios (20 ago 2026): antes el teléfono decía "opcional", pero sin él no se le puede mandar confirmación ni recordatorio por SMS. No deja guardar la cita si falta cualquiera de los dos, o si no elegiste ningún servicio.

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, su correo y contraseña (si se los pusiste), y las instrucciones para instalarlo en el teléfono.

Qué ve él

Cuatro pestañas: Bandeja (por confirmar y ya aceptadas, todo junto, con la fecha de cada cita), Hoy, Calendario (el mes completo, toca un día para ver sus citas) e Historial (el último mes hacia atrás -- para ir más lejos, tiene un buscador de cliente por nombre o teléfono).
De cada cita: hora, cliente, servicios, duración, total, notas y un enlace para mandarle un SMS al cliente.
✅ Aceptar (cita nueva) o ↩ No puedo / ✖ Cancelar (cita nueva o ya aceptada) -- las tres le preguntan primero quién avisa (el cliente llamó, o él mismo no puede), sin pedirle escribir ningún motivo (20 ago 2026, se quitó ese paso), y ofrecen mandarle un SMS al cliente al toque.
✔ Terminada (cita ya aceptada) -- la marca en cuanto termina de atender al cliente. Pasa a estado "Terminada" (el mismo badge 🏁 que ves tú en el panel, más arriba) y en su lugar aparece ⭐ Pedir review.

✉️ SMS de confirmación al aceptar (18 ago 2026): al tocar ✅ Aceptar, se le pregunta al barbero si quiere mandarle ya al cliente el SMS de confirmación -- si dice que sí, se abre la app de mensajes con el texto ya escrito. Es el mismo aviso que antes solo salía al aprobar una cita desde el panel; ahora sale en cualquier sitio donde se acepte una cita (aquí, o en el panel con "Aprobar" / "Aceptar (es mía)"), para que el cliente siempre reciba su confirmación sin importar quién la aceptó ni desde dónde.

Pedir un review de Google (27 ago 2026)

Solo en su app, no aquí en tu panel. Dos botones ⭐ Pedir review: uno en cada cita ya "Terminada" (usa el nombre, teléfono e idioma de esa cita) y otro suelto, arriba de todo, con un formulario para un cliente sin cita en el sistema. Los dos mandan el mismo SMS con el enlace directo para dejar el review en Google, en el idioma que se elija. Si a un mismo teléfono ya se le había pedido un review antes -- lo haya mandado él u otro barbero -- le avisa con la fecha antes de reenviarlo.

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.

Bloquearse horas sueltas de hoy

Arriba de todo, en cualquier pestaña, tiene un botón 🚫 Bloquear una hora: abre una cuadrícula con las horas de hoy (nunca días futuros -- eso lo sigues decidiendo tú, con "Días libres sueltos"/"Bloquear un rango" en su ficha). Toca las horas que quiera bloquear (nunca una que ya tenga cita), y tiene que tocar Guardar al final para que quede -- tocar sola una hora no la guarda todavía. Mientras una hora está bloqueada, ni la web de reservas ni tú al crear una cita para él pueden ponerle nada ahí. No cancela ninguna cita que ya tuviera.

Reservar para un walk-in desde su propia app

El barbero también puede crear una cita él mismo con el botón ➕ Crear cita (arriba de su lista de citas) -- útil, por ejemplo, cuando un cliente le contesta el SMS de disculpa confirmando otra hora. Lo manda a la misma página de reservas que usa cualquier cliente (reservar.html), y al terminar de agendarla le sale un enlace "Volver a mi panel de barbero" para regresar directo a su app (18 ago 2026), sin tener que pasar por la página principal.

8 Mensajes de SMS

Antes estos mensajes se mandaban por WhatsApp; se cambiaron a SMS porque no todos los clientes tienen WhatsApp, pero todos reciben mensajes de texto. WhatsApp se dejó solo como opción de contacto en la página principal.

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".

⏰ Cada tarde, sobre las 6, te llega un aviso al teléfono con cuántas citas confirmadas hay para mañana, para que no se te olvide mandar los recordatorios. El aviso no manda nada él solo: mandar SMS automáticos desde el servidor hace falta un proveedor aparte (Twilio o parecido, con su costo) que todavía no está dado de alta. Lo que sí hace el aviso es acordarse por ti; el toque de enviar sigue siendo tuyo, tocando ✉️ o 🔔 en cada 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:

📅 Fecha: martes, 4 de agosto de 2026 🕐 Hora: 11:00 AM 💈 Servicios: - Fade / degradado ($35) ⏱ Duración total: 45 min · Total: $35 ✂️ Tu barbero: Sergio 📱 +1 (561) 673-5690 Te esperamos. Cualquier cambio avísanos por este medio.

Al final va siempre la barbería: nombre, dirección, teléfono de la tienda, WhatsApp de Sergio (por si el cliente prefiere escribir ahí) 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.

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. Esto cierra la barbería completa, para todos (úsalo para un feriado, por ejemplo).

💡 La hora de almuerzo ya no es general: cada barbero la activa y ajusta en su propia ficha ("Barberos" → su horario), día por día -- no hace falta que almuerce a la misma hora todos los días. Para el día libre (o las vacaciones) de UN barbero, tampoco bloquees el día entero: usa "Días libres sueltos" / "Bloquear un rango" en su ficha. Así los demás siguen trabajando.

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.

🌐 Traducción automática (18 ago 2026): el nombre y la categoría en inglés salen SOLOS, sin que nadie escriba nada. Junto al nombre en español hay un recuadro "Nombre (inglés)" (y otro para la categoría) por si esa traducción automática no te convence para alguno en particular: lo que escribas ahí manda siempre por encima de la traducción automática.

11 Galería de fotos

Botón 📸 Galería de fotos. Puedes subir hasta 10, con una descripción corta, y reordenarlas con las flechas ▲▼.

💡 A los clientes solo les salen las primeras 8, en la página pública y en la app: 3 antes de "Ver más" en el móvil, 8 en tablet y ordenador. Si subes la 9ª y la 10ª, quedan guardadas pero no se ven hasta que reordenes alguna dentro de las primeras 8.

12 Resumen de citas y respaldo

PDF: cliente, fecha, servicios y total de cada cita confirmada en el rango de fechas que elijas, listo para imprimir. Puedes dejarlo en "Toda la barbería" o filtrar por un barbero. Funciona con cualquier rango, aunque sea de hace un año: no depende de lo que el panel tenga cargado en pantalla.
Gestión por barbero: el mismo PDF trae, primero (20 ago 2026 -- antes iba después de la tabla de citas, que puede ser larga), cuántas aceptó y cuántas rechazó cada barbero en ese rango, con una tabla y un gráfico de barras para verlo de un vistazo, y luego el detalle completo de citas.
Respaldo: baja un archivo con TODOS tus datos (citas, barberos, servicios, horario, galería). Se puede volver a cargar desde recuperar-datos.html.

💾 Los datos ya viven en Firebase, no solo en este navegador. Aun así, un respaldo de vez en cuando no está de más.

El recordatorio del PDF mensual

El panel, para no gastar de más en Firestore, solo mantiene cargados los últimos 60 días de citas. Todo el historial sigue guardado para siempre, pero el PDF es la forma cómoda de tener cada mes ya cerrado en un archivo aparte, listo para revisar sin depender de la conexión.

Por eso, si no has descargado el PDF del mes anterior, arriba del todo aparece un aviso: "📄 Descargar ahora" lo genera al momento (con todo ese mes, sin que tengas que tocar fechas), y "Recordar mañana" lo apaga por un día si justo no puedes en ese momento. El aviso no bloquea nada del panel -- puedes seguir gestionando citas con normalidad -- pero vuelve a salir cada día hasta que ese mes quede descargado.

13 Datos de prueba

Solo en local (abriendo los archivos en tu computadora, no en la dirección de internet) aparece abajo 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 antes de tocar datos reales. Quitar datos de prueba borra solo los de ejemplo; lo que hayas creado tú se queda. Borrar todo deja la app en cero.

🔒 En quenitabarberwpb.com (el sitio de verdad, el que usan los clientes) esta barra no aparece nunca, para que nadie borre datos reales por error.

14 Instalar y activar todo en el teléfono de un barbero

Todo lo que hace falta para que un barbero nuevo (o uno que estrena teléfono) quede listo para usar su app solo, sin que tengas que ir guiándolo paso a paso cada vez. Sigue el orden: si te saltas el paso 2, los avisos no le van a llegar nunca, por más veces que repita el paso 4.

1. Dale de alta y mándale el enlace

En "Barberos", crea su ficha (nombre, foto, horario, servicios) y ponle correo y contraseña en "🔑 Con qué entra a su app" (sección 4). Luego toca 📲 Enviar link: se abre WhatsApp con su número, con el mensaje ya escrito. Ese mensaje trae todo junto: el enlace de entrada automática, las instrucciones de instalación de abajo, su correo y contraseña por si el enlace deja de servir algún día, y el link a su propia guía rápida.

🔑 Crear la ficha del barbero NO le da acceso. Eso solo pasa cuando tocas 📲 Enviar link: ese botón es el que crea de verdad su cuenta y le abre la puerta. Hazlo SIEMPRE primero, antes de que él intente entrar -- si intenta entrar sin que hayas tocado ese botón, le va a salir "Esta cuenta no tiene acceso" aunque su ficha ya exista.

2. Instálala en la pantalla de inicio

⚠️ Este es el paso que más se salta, y el que más problemas da. En iPhone, si la app se queda como una pestaña de Safari en vez de instalada en la pantalla de inicio, los avisos push NUNCA le van a sonar -- por más veces que dé permiso, por más veces que abra la app. Apple lo bloquea así a propósito; no es un fallo de esta app en concreto.

iPhone: abre el enlace en Safari (tiene que ser Safari -- Chrome u otro navegador en iPhone no puede instalar nada en la pantalla de inicio). Toca el botón de compartir (el cuadrado con la flecha hacia arriba, abajo al centro de la pantalla). Elige "Añadir a inicio". Confirma el nombre y toca "Añadir". Le queda un ícono nuevo en su pantalla de inicio, como cualquier otra app.
Android: ábrela en Chrome. Puede que salga solo un aviso abajo ofreciendo instalarla -- si sale, toca "Instalar". Si no sale solo, toca el menú de tres puntos (arriba a la derecha) y elige "Instalar app" (en algunos teléfonos dice "Añadir a pantalla de inicio").

Después de instalarla, dile que cierre del todo la pestaña o app que tenía abierta antes, y que de ahora en más entre siempre tocando el ícono nuevo -- no un marcador ni un enlace guardado en el navegador.

3. Entra con su cuenta

Desde el ícono nuevo: la primera vez, si tocó el enlace que le mandaste, entra solo. Si no, escribe el correo y la contraseña que le pusiste en el paso 1. Si algún día se le olvida la contraseña, se la cambias tú desde su ficha (ver sección 15, "Si algo no funciona").

4. Activa los avisos

En cuanto entra, le sale un recuadro arriba con el botón "Activar avisos". Que lo toque, y que le dé "Permitir" al aviso que le muestra el propio teléfono (ese permiso lo pregunta el sistema operativo, no la app -- se ve distinto en cada teléfono, pero siempre hay una opción de permitir y otra de bloquear).

Si el recuadro no le aparece, puede que ya estuvieran activados de una entrada anterior -- no hace falta repetirlo.
Si le sale "no se pudieron activar", casi siempre es porque se saltó el paso 2 (sigue sin estar instalada en la pantalla de inicio) o porque bloqueó el permiso sin querer -- en ese caso hay que activarlo a mano desde los ajustes del teléfono, en notificaciones de esa app.

5. Compruébalo antes de darlo por terminado

La forma más segura: crea tú una cita de prueba desde "Crear cita" (sección 6) y asígnasela a él. Si en unos segundos le suena el teléfono, ya está todo funcionando de punta a punta -- bórrala después si era solo de prueba.

👤 También puedes ver exactamente lo que él ve, sin tocar su teléfono, con el enlace "Vista del barbero" arriba de tu panel (sección 7) -- útil para revisar que su ficha, horario y servicios se vean bien antes de dárselo por listo.

Los mismos dos pasos de instalación (2) valen para meter tu propio panel y la página pública en tu teléfono -- la única diferencia es que la página pública no pide correo ni contraseña, cualquiera puede instalarla.

15 Si algo no funciona

A un barbero no le llegó la notificación: revisa que le haya dado permiso a las notificaciones la primera vez que abrió la app (se lo pide el teléfono solo), y que la tenga instalada en la pantalla de inicio, no solo abierta desde un enlace en el navegador.
Un barbero olvidó su contraseña: ponle una nueva desde su ficha, en "🔑 Con qué entra a su app", y dale a Guardar. Sigue pudiendo entrar también con su enlace de siempre.
"Contraseña incorrecta" al entrar a tu panel: revisa que el correo escrito sea el de tu cuenta -- el teléfono recuerda el último correo que se usó ahí, y a veces queda uno viejo.
Olvidaste tu propia contraseña de administrador:
- Si además eres barbero (tienes tu propia ficha en "Barberos", como el dueño): entra desde otro teléfono que sí tenga sesión abierta -- el mío, por ejemplo -- y ve a tu ficha en "Barberos". En "🔑 Con qué entra a su app" ponte una contraseña nueva y dale a Guardar: funciona igual que para cualquier barbero, porque tu cuenta de administrador es la misma con la que entras a tu app de barbero. No hace falta la consola de Firebase para esto.
- Si eres administrador sin silla (acceso de IT, ver sección 4): no hay ficha en el panel desde la que cambiarla. Ve a la consola de Firebase → Authentication → Users, busca tu correo, abre el menú "..." y elige "Reset password". Te llega un correo con un enlace para poner una contraseña nueva.
Algo no carga o se ve raro: cierra la pestaña o la app y vuelve a abrirla. Si sigue igual, avísame con una captura de pantalla.

¿Dudas o quieres cambiar algo (precios, horario, textos, colores)? Dímelo y lo ajustamos juntos. Esta app es tuya. 💈✂️

For the owner

Your app guide

Everything the app does and how to use it, in plain language. Keep this page — you can come back to it any time.

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.

💡 All of this updates itself from your panel. Nothing else to touch.

👤 "BARBERO" link (Aug 18, 2026): next to the "ADMIN" button up top there's a matching one that leads to barbero.html -- in case a barber ends up on this page (say, after booking a walk-in and tapping "Inicio" on the booking page) and needs to get back to his own panel.

2 How a client books

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

Pick a barber. They see each one's photo and name. Picking something is required — that way the appointment arrives already assigned and you never get a booking nobody can take — but if they have no preference they can tap "New client? No preference" instead of a specific barber; the appointment comes in unassigned and you assign it (see section 5).
Pick services. Prices and durations are that barber's own. No preference (Aug 18, 2026) shows the whole shop's list: general services PLUS every barber's exclusive ones (say, "Facial", only Yanelys), grouped under whoever offers each one -- so a client can ask for something like that without picking a barber first. If they end up requesting one of these, the alert you get names the one barber who can do it, so you know who to assign it to (see section 5).
Pick a day and time. The date is a strip of circles that slides sideways with a swipe or the ‹ › arrows (Aug 18, 2026), instead of the phone's popup calendar. Only times that barber can genuinely do get offered.
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.

🔒 Right before saving, it re-checks the slot is still free. If someone beat them to it, they're told to pick another time instead of creating an impossible appointment.

3 Your panel

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

📥 Bandeja

Right at the top, always visible: the blue "📥 BANDEJA (N)" pill with the total count inside (Aug 20, 2026, same name the barber's app already uses). Below it, "Por hacer" (unconfirmed requests and declines waiting to be reassigned) and "Confirmadas" (what's already set and still coming up). Tap any row to open that day on the calendar.

The calendar

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

🔄 Month selector (18 ago 2026): the ◀ ▶ arrows and the month sit right above the grid now -- they used to be at the very top, separated from the calendar by whichever banners happened to be showing (update, reconnect, PDF reminder...). Every day now also shows a small round badge (before, only "today" had one), so the date number never gets confused with the appointment count or a barber's colour dot.

Todos Sergio Luis Sin asignar (2)

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

Confirmed Pending No-show Blocked

Jobs by barber

Right below the calendar there's a bar chart (only you see it, clients never do) with four bars per barber, for the month you're currently viewing in the calendar above:

Confirmed: appointments that barber has already accepted.
Not accepted yet: assigned to him but he hasn't opened his own app to accept or decline them yet.
Cancelled by barber: the barber said he couldn't make it (Aug 20, 2026: counts both when he cancels an already-accepted appointment and when he releases a "no preference" one back for you to reassign).
Cancelled by client: the client called to say they're not coming.

It updates itself, no need to reload the page: it changes when you flip months with the calendar's arrows, and as soon as an appointment arrives or changes.

On each appointment

Approve or Reject pending requests.
✉️ Confirmación and 🔔 Recordatorio: open the phone's messaging app with the SMS 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.

💾 Every field saves itself as soon as you change it (autosave). On top of that, each part of the card -- details, schedule, services and prices, email and password -- has its own Guardar button that's always visible, so the confirmation is clear and it works as a backup if a field ever doesn't save itself.

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: it goes into the SMS messages the client receives so they can reach him directly.
📝 Short bio: a few lines about the barber (experience, specialty). Shows on the public page's "Our team" section and when a client picks a barber to book, clamped to 4 lines with a "Read more" button if you write more than that. Optional -- leave it blank and neither screen shows a bio block for that barber. There's a second, also optional, field for the English version: leave it blank and English-speaking clients just see the Spanish bio (it's not auto-translated, unlike a service name -- a bio is a full paragraph and word-by-word translation would come out broken). The 🌐 Translate with Google Translate button right below the Spanish field opens Google Translate in a new tab with the text already filled in: read the translation, tweak it if needed, and paste it into the English field.

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: an appointment, a one-off day, whatever. Add them with the date picker, remove them by tapping the tag.
Vacation (several days at once): right below, set "Desde" (from) and "Hasta" (to) and tap Bloquear rango. Only blocks THAT barber — everyone else keeps working normally those days. "Desbloquear rango" undoes it.

🚫 Can't go outside the store's hours (Aug 18, 2026): no barber can open earlier or close later than the store's general hours for that same day -- try it and you'll get a warning showing the store's hours for that day, and the change won't save. This stops the booking site from ever offering a client a time when the shop is actually already closed. Note: if you later shorten the GENERAL hours, barbers who already had a wider schedule don't shrink automatically -- you have to go into each of their cards and adjust it by hand.

👋 What the client sees (Aug 18, 2026): if a client picks a specific barber and that day is blocked for him (day off or vacation) but the shop is open for everyone else, they no longer get the generic "we're closed" message -- they get a message naming THAT barber, explaining he's off that day, with a button to pick another barber right there. If the whole shop is closed that day (nobody working), the generic message still shows, since switching barbers wouldn't help.

His own services and prices

The Servicios y precios button. It lists every shop-wide service (the same for any barber: Full Service, Haircut + Shampoo, Beard Trim + Hot Towel, Beard Lineup, and the 2 combos -- 6 total, added 18 Aug 2026) as a checkbox. 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.

Below that, under "Servicios propios de [name]", you can add services only that barber offers (say, a beard design only one of them does). They live in two sections — Individual and Combo — each with its own box for name, price, and duration and its own ➕ Agregar button: whichever box you type into is the section it lands in, nothing else to pick. To move one to the other section later, delete it (🗑) and add it again in the right box. These don't show up on other barbers' pages, but they DO show on the main page (grouped under "Individual Services" and "Combos") and in the service picker as soon as a client selects that specific barber. Edit or delete them any time.

🌐 Automatic translation (added 18 Aug 2026): the English name is generated on its own, no typing needed -- the app recognizes common barbershop words (haircut, beard, shave, shampoo, hot towel, etc.) and builds the English name when it's shown. Each custom service also has a "Nombre (inglés)" box in case that automatic translation doesn't sound right for a particular one: whatever you type there always wins over the automatic guess.

Email and password

In the 🔑 Con qué entra a su app box you set a real email and a password (6 characters minimum). That's what he uses to open his own app, and you can just tell it to him over the phone.

The email shows normally; the password shows as dots, with a 👁 to reveal it for a moment.
The Guardar button is always visible once the barber already has an account (before that, use "📲 Enviar link" to create one). Tap it after changing the email or password for it to take effect.
Besides these, he can always get in by tapping his personal link (the one from "📲 Enviar link") — no typing needed.

Making him an administrator

The "También administrador" checkbox (or the "⭐ Hacer administrador" button on his card) gives him access to your same panel: the full calendar, every client's details, and the ability to change prices and hours. Only use it for someone you trust to run things.

It can be removed later with "Quitar administrador," except for the shop's owner — that one is kept on purpose and isn't removable from the panel.

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.

⭐ The shop's owner (marked once with the "Es el dueño" button) can't be deleted or deactivated — someone always keeps access to the shop.

Admin without a chair (IT access)

Not every administrator has to also be a barber. Someone who only comes in to fix or update the app (say, whoever maintains it technically) can have full admin access without ever showing up as a barber: not on "Our team", not pickable by a client when booking, and not counted as another chair.

Set up the same way as any admin: a Firebase account plus a document at roles/{their UID} with role: admin, but with no barberId field.
If that person already had a barber card (say, from testing the app early on), remove it with "Dar de baja" or "Borrar" like anyone else (above in this section), and delete the barberId from their roles document.
Panel access doesn't change at all: they still see the full calendar, every client, and can change prices and hours -- that only depends on role: admin, not on having a chair.
The only thing that changes is alerts: with no chair of their own, "it's your appointment" never reaches them -- only the general admin alerts (no-preference client, unresolved decline, unanswered appointment).

🔧 This is done from the Firebase console (Authentication + Firestore), not from the panel -- there's no "remove my own chair" button here yet.

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.
Next to each name you'll see how many he's accepted (✅) and how many he's declined (↩), so you can decide who gets a new or unassigned client with that in mind. The same numbers show up when creating an appointment for a walk-in client too (see section 6).

The barber's states

📩 Sent to barber ✅ Accepted ↩ Declined 🏁 Finished

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 and appears under the "Sin asignar" filter right away. It does not reassign itself: you decide, and if the client had asked for someone specific you can call them first.

✋ No longer asks for a written reason (Aug 20, 2026): declining used to make the barber type why. That step was dropped -- fewer taps, and the decline already counts as "Cancelled by barber" in Jobs by barber (above), so there's no need for a separate note to know what happened.

⏳ The push to your phone is no longer instant (Aug 18, 2026): the barber gets an hour to sort it out on his own -- reassign it himself, offer the client another time -- before your phone rings over something he might already be fixing. If it's still unassigned an hour later, you get pinged once, and it tells you who declined, and whether another barber is free at that exact time ("So-and-so is free at that time"), so you don't have to go check yourself. In the meantime the appointment is already visible under "Sin asignar" if you open the panel -- the delayed alert is just for when you're not looking.

👥 Alerts EVERY administrator, not just the owner (Aug 18, 2026): both an unresolved decline and a "no preference" client appointment (section 2) now ring the phone of any administrator who has alerts turned on, not just the shop owner's. So if the owner is on vacation and left someone else as admin in the meantime, that person finds out too and can handle it.

🎯 Exclusive-service alert (Aug 18, 2026): if a "no preference" appointment includes a service only one barber offers (say, "Facial", exclusive to Yanelys), the push alert spells it out -- "Facial: solo Yanelys" -- so you know right away who to assign it to, no need to open the panel and guess.

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 SMS messages.
Services, time, reminder and deposit.

☎️ Name and phone are required (Aug 20, 2026): the phone used to say "optional", but without it there's no way to send a confirmation or reminder SMS. It won't let you save the appointment if either is missing, or if no service is picked.

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, his email and password (if you set them), and instructions for installing it on his phone.

What he sees

Four tabs: Bandeja (pending plus already-accepted, all together, each with its date), Hoy, Calendario (the full month — tap a day to see that day's appointments) and Historial (the last month back — to go further, it has a client search by name or phone).
For each appointment: time, client, services, duration, total, notes and a link to text the client (SMS).
✅ Aceptar (new appointment) or ↩ No puedo / ✖ Cancelar (new or already-accepted) -- all three first ask who's letting you know (the client called, or he himself can't make it), no longer asking for a written reason (Aug 20, 2026, that step was dropped), and offer to text the client right away.
✔ Terminada (already-accepted appointment) -- he taps it as soon as he's done with the client. It moves to "Terminada" (the same 🏁 badge you see on your own panel, above), and ⭐ Pedir review takes its place.

✉️ Confirmation SMS on accept (Aug 18, 2026): tapping ✅ Aceptar now asks the barber whether to send the client the confirmation SMS right away -- say yes and it opens the messaging app with the text already written. This used to only happen when approving an appointment from the panel; now it happens everywhere an appointment gets accepted (here, or in the panel via "Aprobar" / "Aceptar (es mía)"), so the client always gets their confirmation no matter who accepted it or from where.

Asking for a Google review (Aug 27, 2026)

Only in his app, not here on your panel. Two ⭐ Pedir review buttons: one on every appointment already "Terminada" (uses that appointment's name, phone and language), and a standalone one at the top, with a form, for a client with no appointment in the system. Both send the same text with the direct link to leave a review on Google, in whichever language is picked. If that same phone number was already asked for a review before -- whether he sent it or another barber did -- it warns him with the date before letting him send it again.

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.

Blocking off loose hours today

At the very top, on any tab, there's a 🚫 Bloquear una hora button: it opens a grid of today's hours (never future days -- that's still your call, via "Días libres sueltos"/"Bloquear un rango" on his card). He taps the hours he wants blocked (never one that already has an appointment), and has to tap Guardar at the end for it to stick -- just tapping an hour doesn't save it yet. While an hour is blocked, neither the booking site nor you creating an appointment for him can put anything there. It doesn't cancel any appointment he already had.

Booking a walk-in from his own app

A barber can also create an appointment himself with the ➕ Crear cita button (above his appointment list) -- handy, say, when a client replies to his apology SMS confirming a different time. It sends him to the same booking page any client uses (reservar.html), and once he finishes booking it, a "Volver a mi panel de barbero" link appears to take him straight back to his app (Aug 18, 2026), without having to go through the home page.

8 SMS messages

These used to go out over WhatsApp; they were switched to SMS because not every client has WhatsApp, but everyone gets text messages. WhatsApp was kept only as a contact option on the main page.

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".

⏰ Every afternoon, around 6, you get a notification on your phone saying how many confirmed appointments there are for tomorrow, so you don't forget to send the reminders. The notification doesn't send anything by itself: sending automatic SMS from the server needs a separate provider (Twilio or similar, with its own cost) that isn't set up yet. What the notification does do is remember for you; the tap to send is still yours, on ✉️ or 🔔 on each appointment.

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

📅 Date: Tuesday, August 4, 2026 🕐 Time: 11:00 AM 💈 Services: - Fade / degradado ($35) ⏱ Total time: 45 min · Total: $35 ✂️ Your barber: Sergio 📱 +1 (561) 673-5690 See you then. Let us know here if anything changes.

The shop's details always close the message: name, address, shop phone, Sergio's WhatsApp (in case the client prefers to write there) 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. This closes the whole shop, for everyone (use it for a holiday, for example).

💡 For ONE barber's day off (or vacation), don't block the whole day — use "Días libres sueltos" / "Bloquear un rango" in his card. That way the others keep working.

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.

🌐 Automatic translation (added 18 Aug 2026): the English name and category are generated on their own, no typing needed. Next to the Spanish name there's a "Nombre (inglés)" box (same for the category) in case that automatic translation doesn't sound right for a particular one: whatever you type there always wins over the automatic guess.

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. You can upload up to 10, each with a short caption, and reorder them with the ▲▼ arrows.

💡 Clients only ever see the first 8, both on the public page and in the app: 3 before "See more" on mobile, 8 on tablet and desktop. If you upload a 9th and 10th, they're saved but won't show until you move one of them into the first 8.

12 Reports and backup

PDF: client, date, services and total for every confirmed appointment in the date range you pick, ready to print. Leave it on "Toda la barbería" or filter by one barber. Works for any range, even a year back — it doesn't depend on what the panel currently has loaded on screen.
Management by barber: the same PDF now shows this FIRST (Aug 20, 2026 -- it used to come after the appointments table, which can run long): how many each barber accepted and declined in that range, with a table and a bar chart to see it at a glance, followed by the full appointment detail.
Backup: downloads a file with ALL your data (appointments, barbers, services, hours, gallery). It can be loaded back from recuperar-datos.html.

💾 Your data already lives in Firebase, not just in this browser. Still, taking a backup now and then doesn't hurt.

The monthly PDF reminder

To keep Firestore costs down, the panel only keeps the last 60 days of appointments loaded. The full history stays saved forever, but the PDF is the easy way to have each finished month as its own file, ready to check without needing a connection.

So if you haven't downloaded last month's PDF yet, a banner shows up at the top: "📄 Descargar ahora" generates it right away (covering that whole month, no need to touch any dates), and "Recordar mañana" snoozes it for a day if you just can't right then. It doesn't block anything in the panel — you can keep managing appointments as normal — but it comes back every day until that month has been downloaded.

13 Sample data

Only when running locally (opening the files on your own computer, not on the real web address) does a blue bar appear at the bottom 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 before touching real data. Quitar datos de prueba removes only the samples; anything you created stays. Borrar todo wipes everything.

🔒 On quenitabarberwpb.com (the real site, the one clients use) this bar never shows, so no one wipes real data by accident.

14 Setting up a barber's phone, step by step

Everything needed for a new barber (or one with a new phone) to be fully set up on his own, without you having to walk him through it every time. Follow the order: skip step 2 and notifications will never reach him, no matter how many times he repeats step 4.

1. Add him and send his link

In "Barberos", create his card (name, photo, schedule, services) and set an email and password under "🔑 Con qué entra a su app" (section 4). Then tap 📲 Enviar link: it opens WhatsApp to his number with the message already written. That message bundles everything: his auto-login link, the install instructions below, his email and password in case the link ever stops working, and a link to his own quick guide.

🔑 Creating his card does NOT give him access. That only happens when you tap 📲 Enviar link -- that button is what actually creates his account and unlocks the door. ALWAYS do this first, before he tries to log in -- if he tries before you've tapped it, he'll get "This account has no access" even though his card already exists.

2. Install it to the Home Screen

⚠️ This is the step people skip most, and it causes the most problems. On iPhone, if the app stays as a Safari tab instead of being installed to the Home Screen, push notifications will NEVER reach him -- no matter how many times he grants permission, no matter how many times he opens it. Apple blocks this on purpose; it's not a bug in this app specifically.

iPhone: open the link in Safari (it has to be Safari -- Chrome or any other browser on iPhone can't install anything to the Home Screen). Tap the share button (the square with the arrow pointing up, at the bottom center of the screen). Choose "Add to Home Screen". Confirm the name and tap "Add". He'll get a new icon on his Home Screen, just like any other app.
Android: open it in Chrome. A banner offering to install it may pop up on its own -- if it does, tap "Install". If not, tap the three-dot menu (top right) and choose "Install app" (on some phones it says "Add to Home Screen").

After installing, tell him to fully close whichever tab or app he had open before, and to always open it from the new icon from now on -- not a bookmark or a saved link in the browser.

3. Log in with his account

From the new icon: the first time, if he tapped the link you sent, it logs him in automatically. Otherwise, he types the email and password you set in step 1. If he ever forgets the password, you can reset it from his card (see section 15, "If something isn't working").

4. Turn on notifications

As soon as he logs in, a box appears at the top with an "Enable notifications" button. He taps it, then taps "Allow" on the prompt his phone itself shows (that permission comes from the operating system, not the app -- it looks different on every phone, but there's always an allow option and a block option).

If the box doesn't show up, notifications may already be on from a previous login -- no need to repeat it.
If it says it couldn't turn them on, it's almost always because he skipped step 2 (still not installed to the Home Screen), or because he blocked the permission by accident -- in that case it has to be turned back on manually from the phone's own settings, under that app's notifications.

5. Confirm it before calling it done

The safest way: create a test appointment yourself from "Crear cita" (section 6) and assign it to him. If his phone buzzes within a few seconds, everything is working end to end -- delete it afterward if it was only a test.

👤 You can also see exactly what he sees, without touching his phone, using the "Vista del barbero" link at the top of your panel (section 7) -- handy for checking his card, schedule and services look right before handing it off as done.

The same two installation steps (step 2) apply to putting your own panel and the public page on your phone -- the only difference is the public page doesn't ask for an email or password, anyone can install it.

15 If something isn't working

A barber didn't get a notification: check that he allowed notifications the first time he opened the app (the phone asks on its own), and that it's installed to his home screen rather than just opened from a browser link.
A barber forgot his password: set a new one from his card, under "🔑 Con qué entra a su app," and tap Guardar. He can still get in with his usual link too.
"Wrong password" when logging into your panel: check the email field has your account's email — the phone remembers the last one used there, and it can be an old one.
You forgot your own admin password:
- If you're also a barber (you have your own card in "Barberos," like the owner): log in from another phone that already has a session open -- mine, for example -- and go to your own card in "Barberos." Under "🔑 Con qué entra a su app" set a new password and tap Guardar: it works the same as for any barber, because your admin account is the same account you use in your barber app. No need for the Firebase console.
- If you're an admin with no chair (IT access, see section 4): there's no card in the panel to change it from. Go to the Firebase console → Authentication → Users, find your email, open the "..." menu and choose "Reset password". You'll get an email with a link to set a new one.
Something isn't loading or looks off: close the tab or app and reopen it. If it's still off, send me a screenshot.