Pantalla de inicio y navegación
Esta sección describe los elementos permanentes de la interfaz — barra de encabezado, pantalla de bienvenida y menú lateral — y explica cómo navegar entre secciones tanto en escritorio como en dispositivos móviles.
Barra de encabezado
La barra de encabezado está siempre visible en la parte superior de la pantalla, independientemente de la sección en la que se encuentre.
Elementos de la barra de encabezado:
| Posición | Elemento | Descripción |
|---|---|---|
| Izquierda | Logo y nombre de la clínica | Toque o clic para volver a la pantalla de inicio desde cualquier sección. |
| Izquierda (desktop) | Botón ‹ / › | Colapsa o expande el menú lateral. Solo visible en pantallas grandes. |
| Izquierda (móvil) | Botón ☰ | Abre el menú lateral en dispositivos móviles. |
| Derecha | Indicadores de servicio | Dos puntos de color que muestran el estado del servidor y del servicio de IA en tiempo real. Verde = operativo, amarillo = degradado, rojo = caído. |
| Derecha | Ícono de ayuda | Acceso directo al Centro de Ayuda (abre en una nueva pestaña). |
| Derecha | Avatar y nombre | Sus iniciales, nombre completo y rol en el sistema. |
La siguiente captura muestra la barra de encabezado en desktop, donde todos los elementos están visibles al mismo tiempo: el botón de colapsar el menú, el logo de la clínica, los indicadores de servicio, el ícono de ayuda y el avatar con nombre y rol:
En dispositivos móviles la barra se adapta: el menú lateral se oculta detrás del botón ☰ y el nombre del usuario desaparece para ganar espacio, mostrando solo el avatar circular:
Página de bienvenida y acciones rápidas
Al ingresar al sistema verá una pantalla de bienvenida con un saludo personalizado (Buenos días / Buenas tardes / Buenas noches, según la hora) y una cuadrícula de acciones rápidas con las tareas más comunes disponibles para su rol.
Acciones rápidas por rol:
| Acción rápida | Visible para |
|---|---|
| Registrar Paciente | Todos los roles |
| Gestionar Tutores | Todos los roles |
| Ver Historias Clínicas | Solo Administrador y Veterinario |
| Panel de Administración | Solo Administrador |
Al hacer clic en cualquiera de estas tarjetas, el sistema lo llevará directamente a la sección correspondiente.
La siguiente captura corresponde a la vista del Administrador, que cuenta con las cuatro tarjetas de acciones rápidas incluyendo el acceso al panel administrativo y a historias clínicas:
Para los roles de Recepcionista y Auxiliar, la pantalla muestra solo las acciones relacionadas con pacientes y tutores — las secciones clínicas y administrativas no aparecen:
Caso especial — Veterinario no verificado
Si es veterinario y su licencia profesional aún no ha sido verificada por el administrador, en lugar de las tarjetas de acciones rápidas verá un banner amarillo con el mensaje:
"Cuenta en revisión. Tu cuenta está en revisión administrativa. Te notificaremos por correo cuando tu perfil sea aprobado para acceder a los datos clínicos."
Mientras el banner esté visible, puede navegar por el sistema pero no podrá crear ni editar historias clínicas. Contacte al administrador para que revise la sección Gestión de Veterinarios.
La siguiente captura muestra cómo se ve la pantalla de bienvenida cuando el veterinario aún no ha sido verificado — las tarjetas de acciones quedan reemplazadas por el aviso de revisión hasta que el administrador apruebe la cuenta:
Menú de navegación lateral
El menú lateral izquierdo le permite acceder a todas las secciones habilitadas para su rol. Las secciones que no estén disponibles para su rol no aparecerán en el menú. La sección activa se resalta en azul.
Secciones del menú según rol:
| Sección | Admin | Veterinario | Recepcionista / Auxiliar |
|---|---|---|---|
| Inicio | ✅ | ✅ | ✅ |
| Pacientes | ✅ | ✅ | ✅ |
| Tutores | ✅ | ✅ | ✅ |
| Historias Clínicas | ✅ | ✅ | ❌ |
| Dashboard | ✅ | ❌ | ❌ |
| Usuarios | ✅ | ❌ | ❌ |
| Veterinarios | ✅ | ❌ | ❌ |
| Métricas IA | ✅ | ❌ | ❌ |
| Configuración | ✅ | ✅ | ✅ |
En la parte inferior del menú encontrará su nombre, correo, un acceso al Centro de Ayuda y el botón Cerrar sesión.
La siguiente captura muestra el menú lateral expandido en la vista del Administrador, con todas las secciones habilitadas para ese rol y la sección activa resaltada en azul:
Modo colapsado (solo desktop)
En pantallas grandes puede reducir el menú lateral a un panel de íconos para ganar espacio de trabajo. Para activarlo, haga clic en el botón ‹ que aparece en la esquina izquierda de la barra de encabezado. Para expandirlo de nuevo, haga clic en ›.
En modo colapsado, al pasar el cursor sobre cualquier ícono aparecerá una etiqueta flotante con el nombre de la sección. El estado colapsado o expandido se recuerda entre sesiones.
La siguiente captura muestra el menú en modo colapsado con la etiqueta flotante visible al pasar el cursor sobre una sección — una forma de ganar espacio de trabajo sin perder acceso a la navegación:
Navegación en móvil
En dispositivos móviles el menú lateral no está visible de forma permanente. Para acceder a él:
- Toque el ícono ☰ en la esquina superior izquierda del encabezado.
- El menú se despliega desde la izquierda sobre un fondo oscuro semitransparente.
- Seleccione la sección deseada; el menú se cierra automáticamente.
- También puede cerrar el menú tocando el fondo oscuro o el botón ✕ en la esquina superior derecha del panel.
Todos los elementos del menú en móvil tienen una altura mínima de 44 px para garantizar que sean fáciles de tocar con el dedo.
En la parte inferior del panel encontrará su nombre y rol, los indicadores de estado del servicio, el acceso al Centro de Ayuda y el botón Cerrar sesión.
La siguiente captura muestra el panel lateral desplegado en un dispositivo móvil, con las secciones del rol a la vista, el fondo semitransparente sobre el contenido y el pie de navegación con perfil, indicadores de servicio y acceso al Centro de Ayuda:
Migas de pan (Breadcrumbs)
En muchas páginas encontrará una barra de migas de pan en la parte superior del contenido que muestra su ubicación actual dentro del sistema, por ejemplo:
Pacientes / Luna / Historial Médico
Haga clic en cualquier elemento de la ruta para regresar a esa sección directamente, sin necesidad de usar el botón de retroceso del navegador.
La siguiente captura ilustra las migas de pan en una ruta de tres niveles. Cada elemento es un enlace activo que lleva directamente a esa sección, sin necesidad de usar el botón de retroceso del navegador:
