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

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

Iconografía

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

Paleta de Colores

🥇 Gold Accent (Protagonista)

// 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

Dark Mode

Semánticos

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

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

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