description Documentación de Componentes

Header Master Unificado - Especificaciones de diseño y estructura visual

dashboard Resumen del Sistema

Arquitectura de navegación unificada con 3 perfiles de usuario

check_circle Principios de Diseño

  • verified
    Página Principal = Centralizador
    Punto de entrada único al ecosistema de portales
  • verified
    Header Master Unificado
    Mismo header en todos los portales, se adapta según contexto
  • verified
    Soy Global = Constante
    Visible para todos los perfiles desde cualquier portal
  • verified
    Navegación Sin Fricción
    Autenticación una sola vez, cambio de portal sin re-login

group Perfiles de Usuario

Perfil Portal Específico Acceso Compartido Badge
person Cliente Portal de Clientes Soy Global + Página Principal Cliente
handshake Intermediario Portal de Intermediarios Soy Global + Página Principal Intermediario
badge Funcionario Portal de Funcionarios Soy Global + Página Principal Funcionario

straighten Especificaciones de Diseño

Medidas, espaciados y propiedades CSS del Header Master

height Dimensiones del Topstrip

expand Altura

Min-height 44px
Padding vertical 10px 0

space_bar Espaciado Interno

Gap entre elementos 24px
Gap links 8px

rounded_corner Border Radius

Botones 999px
Topstrip demo 8px
Topstrip - 44px min-height

format_size Tipografía

text_fields Links Topstrip

Font-size 14px
Font-weight 500
Padding 6px 12px

text_fields Portal Switcher

Font-size 13px
Font-weight 600
Padding 6px 14px

text_fields User Badge

Font-size 11px
Font-weight 700
Text-transform uppercase

radio_button_checked Botones y Controles

notifications Notificaciones

Width / Height 36px × 36px
Border-radius 50%
Background rgba(255,255,255,0.2)
Border 1px solid rgba(255,255,255,0.3)

account_circle Avatar

Width / Height 36px × 36px
Border-radius 50%
Background rgba(255,255,255,0.25)
Border 2px solid rgba(255,255,255,0.4)

label Notification Badge

Width / Height 16px × 16px
Position top: 4px, right: 4px
Background #DC2319
Font-size 10px

palette Paleta de Colores

Colores utilizados en el Header Master

gradient Gradiente del Topstrip

Azul Profundo
Azul Profundo
--azul-profundo
#001F3F
Azul Global
Azul Global
--azul-global
#00327D
Gradiente aplicado: linear-gradient(135deg, var(--azul-profundo), var(--azul-global))

opacity Opacidades sobre Topstrip

layers Fondos Transparentes

Link hover rgba(255,255,255,0.15)
Link active rgba(255,255,255,0.2)
Portal btn active rgba(255,255,255,0.25)
Switcher container rgba(255,255,255,0.08)

border_color Bordes Transparentes

Pago Express rgba(255,255,255,0.4)
Notification btn rgba(255,255,255,0.3)
Avatar rgba(255,255,255,0.4)

colorize Colores de Acción

Botón Ingresar
Azul Acción
#183fe2
Notificaciones
Rojo Alerta
#DC2319
Estado Visible
Verde Éxito
#00B578

lock_open Estado No Autenticado

Usuario visitante sin sesión activa

view_compact Topstrip Público

Vista Desktop

widgets Componentes Visibles

  • link
    Links Rápidos: Clientes | Intermediarios | Funcionarios | Soy Global
    Gap: 8px | Padding: 6px 12px | Font-size: 14px
  • payments
    Pago Express: Acceso directo a pagos sin login
    Border: 1px solid rgba(255,255,255,0.4) | Padding: 6px 14px
  • login
    Botón Ingresar: Dropdown con 3 opciones de perfil
    Background: #183fe2 | Padding: 8px 18px | Font-size: 14px

person Perfil Cliente

Usuario autenticado como Cliente

view_compact Topstrip Autenticado Cliente

Vista Desktop - Cliente Autenticado
person Hola, María González Cliente

construction Especificaciones Visuales

waving_hand Saludo Personalizado

Background rgba(255,255,255,0.1)
Padding 6px 12px
Gap 8px
Border-radius 999px

swap_horiz Portal Switcher

Container bg rgba(255,255,255,0.08)
Container padding 4px
Gap entre botones 6px
Active bg rgba(255,255,255,0.25)

handshake Perfil Intermediario

Usuario autenticado como Intermediario

view_compact Topstrip Autenticado Intermediario

Vista Desktop - Intermediario Autenticado
handshake Hola, Carlos Ramírez Intermediario

compare Diferencias vs Cliente

  • Icono: handshake (vs person)
  • Badge: Intermediario
  • Portal: Portal de Intermediarios
  • Iniciales: CR

badge Perfil Funcionario

Usuario autenticado como Funcionario

view_compact Topstrip Autenticado Funcionario

Vista Desktop - Funcionario Autenticado
badge Hola, Ana Martínez Funcionario

compare Diferencias vs Otros Perfiles

  • Icono: badge (identificación corporativa)
  • Badge: Funcionario
  • Portal: Portal de Funcionarios
  • Iniciales: AM

extension Componentes Individuales

Desglose visual de cada elemento del header

swap_horiz Portal Switcher

Permite navegar entre portales sin perder sesión

settings Propiedades CSS

Display flex
Gap 6px
Background rgba(255,255,255,0.08)
Padding 4px
Border-radius 999px

radio_button_checked Botones Internos

Padding 6px 14px
Font-size 13px
Font-weight 600
Active bg rgba(255,255,255,0.25)

notifications Botón de Notificaciones

Muestra alertas y mensajes del sistema

Sin notificaciones
Con notificaciones

circle Botón Principal

Width / Height 36px × 36px
Background rgba(255,255,255,0.2)
Border 1px solid rgba(255,255,255,0.3)
Border-radius 50%

label Badge Contador

Width / Height 16px × 16px
Position top: 4px, right: 4px
Background #DC2319
Font-size 10px

account_circle Avatar de Usuario

Muestra iniciales y da acceso a opciones de cuenta

Cliente
Intermediario
Funcionario

settings Propiedades CSS

Width / Height 36px × 36px
Background rgba(255,255,255,0.25)
Border 2px solid rgba(255,255,255,0.4)
Font-size 14px
Font-weight 700

table_chart Tabla de Estados por Perfil

Matriz completa de visibilidad de componentes

Componente No Autenticado Cliente Intermediario Funcionario
Links Rápidos check_circle Visible
Pago Express check_circle Visible
Botón Ingresar check_circle Visible
Saludo Personalizado check_circle Visible check_circle Visible check_circle Visible
Portal Switcher check_circle Visible check_circle Visible check_circle Visible
Notificaciones check_circle Visible check_circle Visible check_circle Visible
Avatar Usuario check_circle Visible check_circle Visible check_circle Visible
Soy Global (Switcher) check_circle Visible check_circle Visible check_circle Visible
info

Nota Importante

Soy Global es el único elemento compartido que aparece en el Portal Switcher de todos los perfiles autenticados. Esto garantiza que cualquier usuario pueda acceder a la comunidad desde cualquier portal sin fricción.

description

Documentación de Componentes - Header Master Unificado

Global Seguros © 2026 - Sistema de Navegación Multi-Perfil