# Manual de Usuario - Módulo Cliente

## 1. Introducción

Este manual describe todas las funcionalidades disponibles para los clientes en el **Sistema de Tiendas V3.0**. Aprenderá a ingresar, escanear productos, gestionar su carrito y finalizar compras de manera rápida y sencilla.

## 2. Acceso al Sistema

Para comenzar, abra el navegador en su dispositivo (móvil o de escritorio) y acceda a la URL del sistema.

### 2.1. Ingreso con Cédula o RUC

En la pantalla de inicio, se le solicitará su número de cédula o RUC.

1.  **Ingrese su número**: Escriba su número de cédula (6-7 dígitos) o RUC (8-9 dígitos). Puede incluir o no el guión.
2.  **Click en Ingresar**: El sistema verificará su identidad.

> **Nota**: Si es su primera vez, el sistema lo redirigirá a un breve formulario de registro después de ingresar su cédula.

<img src="https://i.imgur.com/8a3a2b3.png" alt="Pantalla de Login" width="600"/>

### 2.2. Registro de Nuevo Cliente

Si el sistema no lo encuentra, deberá registrarse:

1.  **Complete los campos**: Nombre, Apellido y Ciudad son obligatorios.
2.  **Click en Registrarse**: Su cuenta será creada y podrá acceder al dashboard.

<img src="https://i.imgur.com/3f3f3f3.png" alt="Pantalla de Registro" width="600"/>

## 3. Dashboard del Cliente

Una vez dentro, verá el dashboard principal, dividido en dos secciones:

-   **Panel Principal (Izquierda)**: Aquí se encuentra el scanner de productos y las promociones.
-   **Mi Carrito (Derecha)**: Muestra todos los productos que ha agregado.

<img src="https://i.imgur.com/7g7g7g7.png" alt="Dashboard de Cliente" width="800"/>

### 3.1. Escanear Productos

Para agregar productos, puede usar la cámara de su dispositivo.

1.  **Click en "APRIETE EL BOTON PARA LEER EL CODIGO"**: Se activará la cámara.
2.  **Alinear el código**: Apunte la cámara al código de barras del producto.
3.  **Detección automática**: El sistema detectará el código y mostrará una vista previa del producto.

<img src="https://i.imgur.com/5h5h5h5.png" alt="Scanner de Código de Barras" width="600"/>

### 3.2. Entrada Manual de Código (Alternativa)

Si tiene problemas con la cámara, puede ingresar el código manualmente:

1.  **Escriba el código**: Ingrese el número del código de barras en el campo de texto.
2.  **Click en "Buscar"**: El sistema buscará el producto.

### 3.3. Vista Previa del Producto

Después de escanear o buscar, verá una vista previa con:

-   Nombre y descripción del producto
-   Precio
-   Botones de acción:
    -   **No quiero**: Cancela y vuelve al scanner.
    -   **Si quiero**: Agrega 1 unidad del producto al carrito.
    -   **Este quiero mas**: Permite ingresar una cantidad específica.

<img src="https://i.imgur.com/9j9j9j9.png" alt="Vista Previa de Producto" width="600"/>

## 4. Gestión del Carrito

Todos los productos agregados aparecen en la sección "Mi Carrito".

<img src="https://i.imgur.com/2k2k2k2.png" alt="Carrito de Compras con Items" width="700"/>

### 4.1. Diseño del Carrito

Cada producto se muestra de forma horizontal con:

-   **Imagen** del producto.
-   **Nombre** y precio unitario.
-   **Controles de cantidad** (`+` y `-`).
-   **Subtotal** por producto.
-   **Botón para eliminar** (`×`).

### 4.2. Modificar Cantidad

-   **Click en `+`**: Aumenta la cantidad en 1.
-   **Click en `-`**: Disminuye la cantidad en 1.

El subtotal y el total general se actualizan automáticamente.

### 4.3. Eliminar un Producto

-   **Click en `×`**: Elimina el producto del carrito.

## 5. Finalizar la Compra

Cuando esté listo para pagar, use los botones en la parte inferior del carrito.

-   **Finalizar Compra**: Confirma su compra y la envía al sistema.
-   **Vaciar Carrito**: Elimina todos los productos del carrito.
-   **Ver Última Compra**: Muestra un resumen de su compra anterior.

Al finalizar, se le mostrará una pantalla de confirmación con el total y un mensaje de agradecimiento.

## 6. Mensajes y Promociones

### 6.1. Popups Automáticos

El sistema puede mostrar mensajes emergentes (popups) con:

-   **Ofertas**: Descuentos especiales.
-   **Promociones**: 2x1, combos, etc.
-   **Anuncios**: Información general.
-   **Alertas**: Avisos importantes.

Estos popups aparecen automáticamente al ingresar y se pueden cerrar con el botón `×`.

<img src="https://i.imgur.com/4f4f4f4.png" alt="Popup de Oferta" width="500"/>

### 6.2. Promociones Rotativas

En el panel principal, también verá un área de promociones que rota automáticamente mostrando las ofertas vigentes.

## 7. Salir del Sistema

Para cerrar su sesión, haga click en el botón **"Salir"** en la esquina superior derecha.
