📌 1. DASHBOARD (pantalla principal)

¿Qué ves al entrar?

• Barra superior con "Bienvenido, Dr. Martínez" y un icono de campana 🔔.
• Seis tarjetas con números: Pacientes registrados, Citas esta semana, Próximos controles, Recordatorios activos, Entregas pendientes, Consultas realizadas.
• Menú lateral izquierdo con todos los módulos.
• Abajo, cuadrícula con los módulos y un chatbot flotante (abajo a la derecha).

¿Qué puedes hacer?

• Clic en cualquier tarjeta → te lleva directamente al módulo correspondiente.
• Clic en el icono de campana → abre modal para configurar notificaciones.
• Clic en el chatbot → abre chat para preguntar "Próximos controles", "Agenda de hoy", etc.
• Selector de rol (Doctor / Asistente) → cambia el rol (visual por ahora).

¿Qué pasa detrás?

Los números se actualizan solos cuando agregas o modificas datos desde cualquier dispositivo, gracias a Firebase.

📋 2. PACIENTES (pacientes.html)

Al hacer clic en "Pacientes" se abre una página con dos secciones:

2.1. Formulario "Registrar Nuevo Paciente"

• Campos: Cédula, Nombre*, Edad, Teléfono, Email, Dirección, Historial clínico.
• Ejemplo: escribes Juan Pérez en nombre, 12345678 en cédula.
• Haces clic en "Guardar Paciente" → ✅ Aparece mensaje: "Paciente guardado en la nube".
• El paciente aparece automáticamente en la lista de abajo (sin recargar).

2.2. Lista de Pacientes (tabla)

• Muestra todos los pacientes con sus datos.
• Buscador: escribe "Juan" y se filtran los que contengan ese texto (por cédula, nombre o teléfono).
• Cada fila tiene botones:
  • 👁️ Ver → abre un modal con todos los datos del paciente (perfil).
  • 📄 Ficha → te lleva a ficha-medica.html con ese paciente preseleccionado.
  • ✏️ Editar → abre un modal para modificar cualquier campo. Al guardar, se actualiza en Firebase y en la tabla.
  • 🗑️ Eliminar → pregunta confirmación y borra al paciente de la nube.

¿Qué pasa detrás? Todo se guarda en Firestore (colección pacientes). Si otro dispositivo agrega o modifica un paciente, la tabla se actualiza en tiempo real.

🩺 3. FICHA MÉDICA (ficha-medica.html)

Al hacer clic en "Ficha Médica" se abre un formulario largo.

Paso a paso para crear una consulta:

1. Seleccionar paciente (desplegable). Si vienes desde el botón "Ficha" de pacientes, ya viene preseleccionado.
2. Fecha de consulta (por defecto hoy).
3. Motivo de consulta (ej: "Visión borrosa").
4. Diagnóstico (ej: "Miopía").
5. Antecedentes (opcional).
6. Refracción OD/OI: esfera, cilindro, eje, AV con lentes y sin lentes.
7. RX Parcial y RX Total (campos numéricos).
8. Oftalmoscopia, Queratometría, Retinoscopia (texto).
9. Presión intraocular (mmHg).
10. Próxima cita (fecha).
11. Tratamiento/Receta.
12. Observaciones.
13. Clic en "Guardar Consulta" → ✅ Mensaje: "Consulta guardada". El formulario se limpia (excepto el paciente).

¿Qué pasa detrás? Se guarda un documento en Firestore (colección fichas) con todos los campos. Además, si pusiste "Próxima cita", se crea automáticamente un recordatorio en el módulo de Recordatorios.

Botón "Limpiar formulario" → borra todos los campos (pero no guarda).

📈 4. SEGUIMIENTO (seguimiento.html)

Al hacer clic en "Seguimiento" se abre una página con:

• Selector de pacientes (desplegable).
• Debajo, un espacio para mostrar el historial.

¿Cómo usarlo?

• Seleccionas un paciente (ej: Juan Pérez).
• Aparecen todas sus fichas médicas ordenadas por fecha (la más reciente arriba).
• Cada ficha muestra un resumen: fecha, motivo, diagnóstico, receta, próxima cita.
• Botón "Ver ficha completa" → se abre un modal con todos los detalles de esa consulta (refracción, RX, exámenes, etc.).

¿Qué pasa detrás? El sistema consulta Firestore (fichas y pacientes) y se actualiza solo cuando hay nuevas fichas desde cualquier dispositivo.

¿Para qué sirve? Para ver la evolución del paciente y tener todo el historial a mano.

🔔 5. RECORDATORIOS (recordatorios.html)

Al hacer clic en "Recordatorios" se abre una página con dos secciones:

5.1. Agregar recordatorio manual

• Campos: Paciente, Fecha, Mensaje, Teléfono (WhatsApp), Correo.
• Ejemplo: Juan Pérez, fecha mañana, mensaje "Recordar cita".
• Clic en "Guardar Recordatorio" → aparece en la lista de pendientes.

5.2. Lista de recordatorios (con pestañas)

• Pendientes: muestra los que no se han completado, ordenados por fecha. Cada tarjeta tiene badges: "🔔 ¡HOY!", "⚠️ MAÑANA", "📅 En X días", etc. Botones: Completar, Editar, Eliminar, Notificar (notificación push), WhatsApp, Enviar correo.
• Completados: histórico de los que ya se cumplieron.

¿Recordatorios automáticos? Cuando guardas una ficha médica con "Próxima cita", se genera automáticamente un recordatorio en la lista de pendientes (origen "Automático").

¿Qué pasa detrás? Los recordatorios se guardan en Firestore (recordatorios) y se sincronizan en tiempo real.

📦 6. ENTREGAS (entregas.html)

Al hacer clic en "Entregas" se abre una página con:

6.1. Registrar nueva entrega

• Paciente (selector desde la lista de pacientes).
• Fecha de pedido (hoy por defecto).
• Fecha de entrega prometida (ej: dentro de 6 días).
• Producto (ej: "Lentes progresivos").
• Clic en "Agregar entrega" → ✅ Aparece en la lista de pendientes.

6.2. Lista de entregas (con pestañas y buscador)

• Pendientes: muestra cada entrega con cuenta regresiva en días, horas, minutos, segundos. Badges: "⚠️ Vence hoy", "⏰ Quedan 2 días", etc. Botones: Editar, Eliminar, Marcar como entregado.
• Completadas: histórico de entregas ya realizadas.
• Buscador: filtra por nombre o cédula del paciente.

¿Qué pasa detrás? La cuenta regresiva se actualiza cada segundo (localmente). Los datos se guardan en Firestore (entregas) y se sincronizan entre dispositivos.

Botón "Eliminar TODAS las entregas" → borra todas las entregas (solo para pruebas).

📅 7. CALENDARIO (calendario.html)

Al hacer clic en "Calendario" se abre una página con dos secciones:

7.1. Calendario visual

• Por defecto, vista Mes (puedes cambiar a Día o Semana).
• Botones < y > para navegar entre meses.
• Cada día del mes muestra pequeñas etiquetas de las citas (hora + inicial del paciente).
• Clic en un día → cambia a la vista Día y muestra todas las citas de esa fecha (con horarios).

7.2. Formulario "Agregar Nueva Cita"

• Paciente (selector).
• Tipo de cita: Control, Primera vez, Revisión, Otro (cada uno con un color).
• Fecha y hora.
• Motivo (opcional).
• Clic en "Guardar Cita" → ✅ La cita aparece en el calendario y en la vista del día.

¿Qué pasa detrás? Las citas se guardan en Firestore (citas) y se sincronizan. Si otro dispositivo agrega una cita, el calendario se actualiza solo.

Botón "Exportar a Excel" → descarga un archivo CSV con todas las citas.

📊 8. REPORTES (reportes.html)

Al hacer clic en "Reportes" se abre una página con:

8.1. Buscador de paciente

• Escribes el nombre o cédula del paciente (ej: "Juan").
• Aparece una lista de sugerencias; haces clic en el paciente deseado.

8.2. Reporte completo del paciente

• Tarjetas de resumen: total de consultas, citas, entregas, recordatorios.
• Pestañas: Consultas, Citas, Entregas, Recordatorios. Cada pestaña muestra la lista detallada de esos ítems.
• Botón "Guardar reporte completo en PDF" → genera un PDF con todas las pestañas (útil para imprimir o compartir).

¿Qué pasa detrás? Los datos se consultan en tiempo real desde Firestore. El PDF se genera con html2canvas y jsPDF.

¿Para qué sirve? Para obtener un informe integral de un paciente (historial médico, citas, pedidos, recordatorios).

💾 9. RESPALDO (respaldo.html)

Al hacer clic en "Respaldo" se abre una página con dos botones:

• Crear respaldo (descargar JSON): Clic en "Crear respaldo". El sistema descarga un archivo .json que contiene todas las colecciones de Firestore (pacientes, fichas, citas, entregas, recordatorios). Útil para tener una copia de seguridad local.
• Restaurar desde archivo: (No completamente implementado por seguridad) Muestra un selector de archivos. La restauración masiva debe hacerse manualmente desde Firebase Console.

¿Qué pasa detrás? El respaldo se genera leyendo directamente desde Firestore (no desde localStorage).

¿Para qué sirve? Para hacer backups periódicos y poder recuperar datos en caso de pérdida.

📄 10. REPORTE PDF POR PACIENTE (reporte-paciente.html)

Al hacer clic en "Reporte PDF" se abre una página similar a la de Reportes, pero más sencilla:

• Buscador de paciente (igual que antes).
• Seleccionas un paciente.
• Se muestra: datos personales del paciente y lista de todas sus fichas médicas (con fecha, motivo, diagnóstico, receta, refracción OD/OI, etc.).
• Botón "Guardar reporte en PDF" → descarga un PDF con todo el historial médico.

Diferencia con "Reportes": Este módulo está más enfocado en el historial clínico puro (fichas), mientras que el otro incluye citas, entregas y recordatorios.

🤖 ASISTENTE VIRTUAL (Chatbot flotante)

¿Dónde está? En la esquina inferior derecha del dashboard (un círculo rojo con un icono de mensaje).

¿Cómo usarlo?

• Haces clic en el círculo → se abre un panel de chat.
• Escribes una pregunta como: "Próximos controles", "Agenda de hoy", "Citas esta semana", "Recordatorios pendientes".
• El bot responde con información simulada (por ahora son ejemplos, pero se puede conectar a datos reales).
• También hay botones rápidos (chips) para hacer esas preguntas con un solo clic.

¿Para qué sirve? Para que el doctor obtenga respuestas rápidas sin tener que navegar a otros módulos.

🔔 NOTIFICACIONES PUSH (integrado en el dashboard)

¿Dónde está? En la barra superior del dashboard, junto al selector de rol, hay un icono de campana 🔔.

¿Cómo usarlo?

• Haces clic en la campana → se abre un modal.
• Activar notificaciones: clic en "Activar notificaciones" y aceptas el permiso en el navegador.
• Configuración: Sonido (activado/desactivado), Días de anticipación (1, 2, 3 o 7 días antes).
• Historial: muestra las notificaciones enviadas (fecha, título, mensaje, origen).
• Prueba: puedes enviar una notificación de prueba para verificar que funciona.

¿Qué notificaciones se envían automáticamente? Cada cierto tiempo, el sistema revisa en Firestore los recordatorios, entregas y citas. Si hay eventos cuya fecha coincide con la anticipación configurada, se envía una notificación push al navegador (si está abierto).

¿Para qué sirve? Para que el doctor reciba alertas incluso cuando no está mirando la pantalla.