Diferenciar tabs: cliente · dashboard · admin
Las tres superficies usan la misma base crema; un aro de color delimita el rol en cada pestaña. Abre los links para verlo en Chrome.
Activo en producción
Favicon por ruta + títulos de pestaña cortos (Pagar · / Panel · / Admin ·).
App cliente
Pagar · MesitaQR
Marco verde — pago en mesa.
Abrir y mirar el tabDashboard owner
Panel · MesitaQR
Marco ámbar + mini barras — operación.
Abrir y mirar el tabAdmin plataforma
Admin · MesitaQR
Marco violeta + escudo — plataforma.
Abrir y mirar el tabHub accesos
Hub · MesitaQR
Marco azul — central de accesos.
Abrir y mirar el tabActivo — anillos de color
Misma base crema en las tres; un aro delimita el rol.
Vista simulada
Con las tres pestañas abiertas, el icono y el título ya no se confunden.
App cliente
Pagar · MesitaQR
Marco verde — pago en mesa.
Dashboard owner
Panel · MesitaQR
Marco ámbar + mini barras — operación.
Admin plataforma
Admin · MesitaQR
Marco violeta + escudo — plataforma.
Hub accesos
Hub · MesitaQR
Marco azul — central de accesos.
Alternativa — fondos distintos
Misma cuadrícula; el fondo cambia (más contraste, menos cohesión de marca).
Vista simulada
Con las tres pestañas abiertas, el icono y el título ya no se confunden.
App cliente
La Doña Pepa · Mesa 20
Fondo crema — marca pura.
Dashboard owner
Panel · La Doña Pepa
Fondo oscuro + mini barras.
Admin plataforma
Admin · MesitaQR
Fondo violeta + escudo.
Criterio de diseño
- Misma marca — la cuadrícula 2×2 sigue siendo MesitaQR.
- Señal a 16px — el aro (verde / ámbar / violeta) se distingue antes que leer el título.
- Micro-badge — barras = operación; escudo = plataforma.
- Título de tab — prefijos cortos: Pagar · / Panel · / Admin ·