Sistema de Diseño SIBA (Bauman)

Referencia obligatoria al desarrollar UI para Sistema SIBA. Estilo: Corporate Premium | Dark Mode + Light Mode | Responsive: Desktop-first

---

⚠️ Reglas Críticas

1. SIEMPRE responsive - Desktop-first, debe funcionar en 375px+
2. SIEMPRE ambos modos - Light y Dark mode con dark: prefix
3. NUNCA emojis - Solo iconos Material Symbols
4. NUNCA colores hardcodeados - Usar CSS variables o tokens Tailwind
5. SIEMPRE usar la paleta Gold para acciones principales y estados activos

---

Identidad Visual

Estética

• Corporate Premium: Elegante, minimalista, sofisticado
• Influencia geométrica: Inspirado en el logo Bauman (formas cuadradas)
• Sensación de lujo: Uso estratégico del dorado sobre fondos neutros

Tipografía

Propiedad	Valor
Font Family	Manrope (Google Fonts)
Weights	400, 500, 600, 700, 800
Import	https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap

// Clase Tailwind
className = 'font-sans'; // Manrope configurado como default

Iconografía

Librería	Import
Material Symbols	https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap

<span className="material-symbols-outlined">dashboard</span>

---

Paleta de Colores

🥇 Gold Accent (Protagonista)

Token	HEX	Uso
gold / gold-DEFAULT	#bd8e3d	CTAs, estados activos, highlights
gold-light	#e6c489	Hover states, fondos suaves
gold-muted	#C5A36A	Bordes, elementos secundarios

// Botón primario (CTA)
className = 'bg-gold text-white hover:bg-gold-light';

// Estado activo sidebar
className = 'bg-gold/10 text-gold border-l-2 border-gold';

Light Mode

Token	HEX / Tailwind	Uso
background	#f8f8f7 / bg-[#f8f8f7]	Fondo principal
surface	#ffffff / bg-white	Cards, modales
border	#e5e5e3 / border-[#e5e5e3]	Bordes
text-primary	#18181B / text-slate-900	Texto principal
text-secondary	#52525B / text-slate-500	Texto secundario
text-muted	#a1a1aa / text-slate-400	Placeholders

Dark Mode

Token	HEX / Tailwind	Uso
background	#121416 / dark:bg-[#121416]	Fondo principal
surface	#1a1c1e / dark:bg-[#1a1c1e]	Cards, sidebar
border	#37322a / dark:border-[#37322a]	Bordes
text-primary	#fafafa / dark:text-slate-100	Texto principal
text-secondary	#a1a1aa / dark:text-slate-400	Texto secundario
charcoal	#2F3136	Superficies elevadas

Semánticos

Token	Light	Dark
success	#10b981	#34d399
warning	#f59e0b	#fbbf24
error	#ef4444	#f87171
info	#3b82f6	#60a5fa

---

CSS Variables

:root {
  /* Gold Accent */
  --gold-primary: #bd8e3d;
  --gold-light: #e6c489;
  --gold-muted: #c5a36a;

  /* Backgrounds */
  --background: #f8f8f7;
  --surface: #ffffff;
  --border: #e5e5e3;

  /* Text */
  --foreground: #18181b;
  --muted: #52525b;
}

.dark {
  --background: #121416;
  --surface: #1a1c1e;
  --border: #37322a;
  --foreground: #fafafa;
  --muted: #a1a1aa;
}

---

Tailwind Config

// tailwind.config.js
export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        gold: {
          DEFAULT: '#bd8e3d',
          light: '#e6c489',
          muted: '#C5A36A',
        },
        charcoal: '#2F3136',
        luxury: '#35322c',
      },
      fontFamily: {
        sans: ['Manrope', 'system-ui', 'sans-serif'],
      },
    },
  },
};

---

Responsive Breakpoints

Mobile:   < 768px  (default)
Tablet:   md: 768px
Desktop:  lg: 1024px
Wide:     xl: 1280px

Layout por Breakpoint

Elemento	Mobile	Tablet	Desktop
Sidebar	Drawer (Sheet)	Colapsado 64px	Expandido 260px
Header	Hamburger	Full	Full
Grid cols	1	2	3-4

---

Componentes Core

Sidebar

// Desktop expandido: 260px
<aside className="hidden lg:flex w-[260px] bg-white dark:bg-surface-dark border-r">

// Desktop colapsado: 64px (solo iconos)
<aside className="hidden lg:flex w-16 bg-white dark:bg-surface-dark">

// Mobile: Sheet/Drawer
<Sheet>
  <SheetTrigger className="lg:hidden">
    <span className="material-symbols-outlined">menu</span>
  </SheetTrigger>
  <SheetContent side="left">...</SheetContent>
</Sheet>

Navegación Sidebar

Dashboard           (icon: dashboard)        [SELECCIONADO]
Comercial           (icon: trending_up)      → Tickets, Obras
Finanzas            (icon: account_balance)  → Tesorería Ingresos, Tesorería Egresos
Administración      (icon: corporate_fare)   → Clientes, Sedes, Vehículos, Zonas
Seguridad           (icon: admin_panel)      → Usuarios, Roles
---
Soporte             (icon: help_outline)
Configuración       (icon: settings)

Estado Activo Sidebar

// Link activo
<div className="relative flex items-center gap-3 px-3 py-3 rounded-lg bg-gold/10 text-gold">
  <div className="absolute left-0 top-[20%] bottom-[20%] w-[3px] bg-gold rounded-r shadow-[0_0_10px_rgba(189,142,61,0.4)]" />
  <span className="material-symbols-outlined">dashboard</span>
  <span className="font-semibold">Dashboard</span>
</div>

Botones

// CTA Primary (Gold)
<button className="bg-gold hover:bg-gold-light text-white font-bold rounded-lg px-4 py-2 transition-all shadow-lg shadow-gold/10">
  Iniciar Sesión
</button>

// Secondary
<button className="bg-white dark:bg-gold/10 border border-border-light dark:border-gold/20 text-slate-700 dark:text-gold font-bold rounded-lg px-4 py-2">
  Cancelar
</button>

Cards

<div className="bg-white dark:bg-charcoal/30 rounded-xl border border-[#e5e5e3] dark:border-[#37322a] p-6 shadow-sm">

Empty State

<div className="flex flex-col items-center justify-center min-h-[400px] border-2 border-dashed border-slate-200 dark:border-[#37322a] rounded-xl bg-white/50 dark:bg-charcoal/20 p-12 text-center">
  <div className="size-20 bg-gold/10 rounded-full flex items-center justify-center mb-6 border border-gold/20">
    <span className="material-symbols-outlined text-gold text-5xl">dashboard_customize</span>
  </div>
  <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-3">Título</h3>
  <p className="text-slate-500 dark:text-slate-400 mb-8">Descripción...</p>
</div>

---

Animaciones y Transiciones

// Transiciones globales (150-200ms)
className = 'transition-all duration-200';

// Hover en cards
className = 'hover:shadow-lg hover:-translate-y-0.5';

// Fade in entrada
className = 'animate-fade-in'; // Definir en CSS

// Sidebar collapse
className = 'transition-[width] duration-300 ease-in-out';

---

Checklist Pre-Desarrollo

• Componente funciona en 375px (iPhone SE)
• Componente tiene clases dark:
• Usa Material Symbols, NO emojis
• Sidebar es Sheet en mobile
• CTAs usan color Gold
• Touch targets mínimo 44x44px
• Tipografía es Manrope

---

Mockups de Referencia

Pantalla	Archivo
Login Light	docs/mockup-ui/siba_login_-_light_mode_1/screen.png
Login Dark	docs/mockup-ui/siba_login_-_light_mode_2/screen.png
Dashboard	docs/mockup-ui/siba_dashboard_-_desktop_expanded/screen.png

---

Logo

• Archivo: docs/assets/logo-bauman.png
• Estilo: "BAUMAN" con "BAU" negro, "MAN" gris
• Subtítulo: "SOLUCIONES CORPORATIVAS"
• Icono placeholder: Escaleras geométricas SVG en gold