Navegación y tema

Las cuatro pantallas existen, pero quien entre en la app no tiene cómo llegar a ellas: falta la navegación. Esta etapa es corta y lo cambia todo — al final, la app tiene menú, logo, colores propios y está lista para hablar más de un idioma.

Tres cosas distintas, tres sitios distintos:

Qué	Dónde se hace
La navegación — el menú por el que se anda en la app	Panel UI ▸ Navegación
El tema — colores, esquinas y tipografía	Ajustes de la app ▸ Tema
Los idiomas — las lenguas y las frases	Ajustes de la app ▸ Traducciones

#El editor de navegación

1. En el panel UI, haz clic en Navegación, justo encima de la sección Pantallas. Se abre una pestaña con el editor.
2. El editor es una maqueta de la barra de la app: arrastras menús entre las zonas (izquierda, centro, derecha) y ves el resultado al momento.
3. Los tres botones de dispositivo arriba — Web (1280px), Tablet (768px), Mobile (390px) — cambian de diseño. Empieza en Web.

#Crear los tres menús

1. Haz clic en el + de la zona izquierda. Aparece un elemento nuevo y el panel Elemento seleccionado a la derecha.
2. Elige Menú — el tipo que lleva a una pantalla.
3. Rellena Nombre del menú, elige el Icono y, en Pantalla, la pantalla de destino.
4. Repite para los tres.

Nombre del menú	Icono	Pantalla
Início	layout-dashboard	Início
Contas	building-2	Contas
Oportunidades	target	Oportunidades

Fíjate en lo que no está en la lista: la Ficha de Conta. Es a propósito — se llega ahí haciendo clic en una fila de la tabla de cuentas, no por menú. Una pantalla sin menú sigue accesible por la ruta y por el código; la navegación es solo la puerta principal.

5. En la esquina superior derecha, elige el Menú inicial: Início. Es la pantalla que se abre cuando alguien entra en la app sin indicar ninguna ruta.
6. Haz clic en Guardar — «Navegación guardada.»

#El menú del usuario

En el lado derecho de la barra hay un elemento especial: el Menú del usuario. Es donde quien usa la app ve su nombre y sale. Selecciónalo y afina:

• Mostrar el nombre y Mostrar el usuario (login) — lo que aparece junto al avatar. Sin icono, el avatar muestra las iniciales del nombre.
• Opción «Salir» — deja La del sistema (traducida), salvo que quieras otro texto.

#El logo de la app

El logo vive en la barra, a la izquierda de todo. Antes de elegirlo, hay que subirlo a la app:

1. En el panel UI, en la sección Assets, haz clic en Subir archivos y elige tu logo. Un SVG es la mejor elección: queda nítido en cualquier tamaño y es el único formato que permite encuadrar.
2. Vuelve a la pestaña Navegación y haz clic en el logo de la maqueta (Editar el logo de la app).
3. En Icono o imagen, elige el archivo que subiste.
4. Activa Mostrar el nombre de la app si quieres el nombre escrito junto al símbolo.
5. En Encuadre en la barra, arrastra la imagen para posicionarla y usa la Escala y el Ancho de la caja para dimensionarla — «El archivo SVG queda intacto — el recorte es solo visual y reversible.» Ajustar a la caja hace el trabajo por ti; Sin encuadre vuelve al inicio.
6. Cierra en Hecho y Guardar.

#Cada dispositivo tiene su navegación

Vuelve a la parte superior del editor y haz clic en Mobile (390px). Fíjate en que el diseño es otro — y en que aparece un selector nuevo, Modo:

Modo	Qué da
Barra superior	La misma barra del web, encogida.
Menú hamburguesa	Un botón que abre el menú en un panel lateral. Es lo más común en el móvil.
Barra de acciones	Una barra al pie de la pantalla, con hasta 5 elementos — el patrón de las apps móviles.

Monta en Mobile los mismos tres menús (Início, Contas, Oportunidades), elige el Modo que prefieras y guarda. El Menú inicial también es por dispositivo — puedes abrir el dashboard en el ordenador y la lista de cuentas en el móvil.

#El tema — pintar la app

El Tema pinta la app construida, sin tocar ninguna pantalla.

1. En la parte superior de la barra de la app, haz clic en el icono de engranaje (Ajustes de la app).
2. En el grupo Apariencia, elige Tema.
3. A la izquierda quedan los grupos de colores; a la derecha, el panel Preview — «Ejemplo con los tokens actuales — se actualiza en directo». Cada color que cambias aparece ahí al instante.

Grupo	Qué pinta
Base	Fondo y texto de la app, contornos, campos y el anillo de focus.
Superficies	Tarjetas y popovers (menús, dropdowns, tooltips).
Colores	Los colores semánticos — Primario, Secundario, Destructivo, Acento, Apagado — y el texto sobre cada uno.
Navegación	Las barras de navegación de la app. Por defecto siguen a las superficies; aquí es donde se aplica el branding.

Para la Gestión de Clientes basta tocar dos cosas:

1. En Colores, pon el Primario en el color de tu marca. Es el color de los botones de acción, de los enlaces y del estado activo.
2. En Navegación, decide si la barra queda clara (siguiendo a las superficies, que es lo de origen) o si gana el color de la marca. Si la pintas, ajusta también el Texto de las barras — una barra oscura con texto oscuro no se lee.

Cada color tiene un selector visual y un campo hexadecimal (#rrggbb) — escribir o elegir es lo mismo. Al final de la lista, Forma y tipografía:

• Radio de las esquinas — de Sin esquinas (0) a Máximo (1rem), en cinco pasos.
• Posición de los avisos — en qué esquina aparecen los avisos (los que el keplin.ui.toast() de la etapa anterior muestra).
• Fuente (sans) — el stack de fuentes de la app.

Guarda con Guardar. Para volver a los colores de origen, Restaurar valores por defecto — los restaura en el editor, y solo queda definitivo cuando guardes.

#Los idiomas

La última pieza de esta etapa es la sección Traducciones, en el grupo Localización de los ajustes. Es una matriz: una fila por frase, una columna por idioma.

En una app recién construida está vacía, y eso es normal: los textos que escribiste en los widgets viven en las pantallas. Las traducciones sirven para los textos que el código escribe — y para darle a la app un segundo idioma.

Añadir un idioma:

1. Haz clic en el + de la cabecera de la matriz.
2. Elige el idioma en elegir idioma… y confirma en Añadir idioma. La columna nueva nace vacía.

Crear una frase:

1. Escribe en la última fila, que está siempre esperando («escribir para crear…»).
2. La Clave de la frase «(sale de la frase)» — es el propio texto en el idioma base el que la identifica.
3. Rellena las otras columnas con la traducción.

En los eventos de las pantallas, la frase se usa por el texto:

keplin.ui.toast(keplin.i18n.t("Conta guardada"));

Para meter un valor en medio de una frase, escríbelo entre llaves: {n} contas da 3 contas, y el valor entra por el código — keplin.i18n.t("{n} contas", { n: 3 }). Una celda en amarillo te avisa de que esa traducción perdió una llave que el original tiene: en ese idioma el valor no aparecería.

Al final, Guardar — «Traducciones guardadas y compiladas.»

#¿Por qué no…?

• ¿Por qué no aparece mi pantalla en la lista de pantallas del menú? El selector Pantalla lista las pantallas normales de la app. Las pantallas de sistema (login, recuperación, registro) no entran en menús — la plataforma las sirve sola.
• ¿Por qué la app sigue abriéndose en la pantalla equivocada? El Menú inicial es por dispositivo. Confírmalo en el dispositivo en el que estás probando.
• ¿Por qué mi logo aparece cortado? Usa Ajustar a la caja o aumenta el Ancho de la caja. Y recuerda: el encuadre solo está disponible para archivos SVG.
• ¿Por qué el tema no cambió en la app? Faltó Guardar — el Preview se actualiza en directo, pero la app construida solo recibe el tema cuando guardas.
• ¿Por qué un widget ignoró el color nuevo? Tiene un color escrito a mano en la categoría Apariencia. Cámbialo por un token del tema.

La app está montada y pintada. Próxima etapa: lógica y automatización.