@khipu/design-system 0.1.0-alpha.28 → 0.1.0-alpha.30

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-03-25T18:39:44.178Z
+ * Generated: 2026-03-27T13:16:02.917Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -88,6 +88,12 @@
   --kds-snackbar-error-bg: rgba(211, 47, 47, 0.08);
   --kds-snackbar-info-bg: rgba(2, 136, 209, 0.08);
 
+  /* Alert backgrounds */
+  --kds-alert-info-bg: #EFF6FF;
+  --kds-alert-warning-bg: #FFFBEB;
+  --kds-alert-success-bg: #ECFDF5;
+  --kds-alert-error-bg: #FEF2F2;
+
   /* ==========================================================================
      TYPOGRAPHY TOKENS
      ========================================================================== */
@@ -159,6 +165,25 @@
   --kds-spacing-button-padding: 8px 22px;
   --kds-spacing-button-min-height: 50px;
   --kds-spacing-button-icon-size: 20px;
+  --kds-spacing-sidebar-width: 280px;
+  --kds-spacing-sidebar-width-collapsed: 72px;
+  --kds-spacing-sidebar-width-mobile: 100%;
+  --kds-spacing-sidebar-header-padding: 16px;
+  --kds-spacing-sidebar-nav-item-padding-y: 8px;
+  --kds-spacing-sidebar-nav-item-padding-x: 12px;
+  --kds-spacing-sidebar-nav-item-margin-x: 12px;
+  --kds-spacing-sidebar-nav-item-gap: 12px;
+  --kds-spacing-sidebar-submenu-indent: 64px;
+  --kds-spacing-sidebar-icon-size: 24px;
+  --kds-spacing-sidebar-icon-container-size: 40px;
+  --kds-spacing-sidebar-label-padding-x: 24px;
+  --kds-spacing-sidebar-label-padding-y: 8px;
+  --kds-spacing-sidebar-label-margin-top: 16px;
+  --kds-spacing-sidebar-label-font-size: 11px;
+  --kds-spacing-sidebar-z-index: 100;
+  --kds-spacing-sidebar-z-index-mobile: 1000;
+  --kds-spacing-sidebar-transition: 0.2s;
+  --kds-spacing-sidebar-collapsable-max-height: 500px;
   --kds-spacing-section: 32px;
   --kds-spacing-form-gap: 20px;
   --kds-spacing-inline-gap: 8px;
@@ -183,6 +208,16 @@
   --kds-radius-chip: 16px;
   --kds-radius-iconContainer: 10px;
 
+  /* ==========================================================================
+     BORDER TOKENS
+     ========================================================================== */
+
+
+  /* Border colors */
+  --kds-border-light: #DDDDDD;
+  --kds-border-medium: #999999;
+  --kds-border-dark: #666666;
+
   /* ==========================================================================
      SHADOW TOKENS
      ========================================================================== */
@@ -230,14 +265,117 @@
      BREAKPOINTS
      ========================================================================== */
 
-  --kds-breakpoint-sm: 600px;
-  --kds-breakpoint-md: 900px;
-  --kds-breakpoint-lg: 1200px;
-  --kds-breakpoint-xl: 1536px;
 
+  /* Breakpoints */
+  --kds-breakpoint-mobile: 600px;
+  --kds-breakpoint-tablet: 840px;
+  --kds-breakpoint-desktop: 1280px;
+  --kds-breakpoint-legacyMobile: 768px;
+  --kds-breakpoint-legacyTablet: 1024px;
+
+  /* ==========================================================================
+     RESPONSIVE SPACING (MOBILE BASE)
+     ========================================================================== */
+
+
+  /* Container */
+  --kds-container-padding: 16px;
+
+  /* Cards */
+  --kds-card-padding: 16px;
+
+  /* Sections */
+  --kds-section-gap: 24px;
+
+  /* Elements */
+  --kds-element-gap: 12px;
+
+  /* Margins */
+  --kds-section-margin: 16px;
+
+  /* ==========================================================================
+     RESPONSIVE TYPOGRAPHY (MOBILE BASE)
+     ========================================================================== */
+
+
+  /* Headings */
+  --kds-font-size-h1: 1.75rem;
+  --kds-font-size-h2: 1.5rem;
+  --kds-font-size-h3: 1.25rem;
+  --kds-font-size-h4: 1.125rem;
+  --kds-font-size-h5: 1rem;
+  --kds-font-size-h6: 1rem;
+
+  /* Body */
+  --kds-font-size-body1: 0.875rem;
+  --kds-font-size-body2: 0.8125rem;
+
+  /* Components */
+  --kds-font-size-button: 0.875rem;
+  --kds-font-size-caption: 0.6875rem;
+
+}
+
+/* ============================================================================
+   RESPONSIVE TOKENS (Mobile-First)
+   ============================================================================ */
+
+/* Tablet (600px+) - Spacing */
+@media (min-width: 600px) {
+  :root {
+    --kds-container-padding: 24px;
+    --kds-card-padding: 20px;
+    --kds-section-gap: 32px;
+    --kds-element-gap: 16px;
+    --kds-section-margin: 24px;
+  }
+}
+
+/* Tablet (600px+) - Typography */
+@media (min-width: 600px) {
+  :root {
+    --kds-font-size-h1: 2rem;
+    --kds-font-size-h2: 1.75rem;
+    --kds-font-size-h3: 1.5rem;
+    --kds-font-size-h4: 1.25rem;
+    --kds-font-size-h5: 1.125rem;
+    --kds-font-size-h6: 1rem;
+    --kds-font-size-body1: 0.9375rem;
+    --kds-font-size-body2: 0.875rem;
+    --kds-font-size-button: 0.9375rem;
+    --kds-font-size-caption: 0.75rem;
+  }
+}
+
+/* Desktop (840px+) - Spacing */
+@media (min-width: 840px) {
+  :root {
+    --kds-container-padding: 32px;
+    --kds-card-padding: 24px;
+    --kds-section-gap: 48px;
+    --kds-element-gap: 24px;
+    --kds-section-margin: 32px;
+  }
+}
+
+/* Desktop (840px+) - Typography */
+@media (min-width: 840px) {
+  :root {
+    --kds-font-size-h1: 2.5rem;
+    --kds-font-size-h2: 2rem;
+    --kds-font-size-h3: 1.75rem;
+    --kds-font-size-h4: 1.5rem;
+    --kds-font-size-h5: 1.25rem;
+    --kds-font-size-h6: 1.25rem;
+    --kds-font-size-body1: 1rem;
+    --kds-font-size-body2: 0.875rem;
+    --kds-font-size-button: 0.9375rem;
+    --kds-font-size-caption: 0.75rem;
+  }
 }
 
 
+
 /* Khipu BeerCSS Variable Mappings */
 /* Khipu Material Design 3 Brand Tokens for BeerCSS
  * Imports core tokens from css-variables.css (auto-generated from src/tokens/index.ts)
@@ -246,25 +384,17 @@
  */
 
 /* Import core design tokens (auto-generated) */
-:root {
+:root,
+body.light,
+body.dark {
     /* ========================================
        Map core tokens to BeerCSS-specific names
        (BeerCSS may use different naming conventions)
+       Same selector specificity as BeerCSS to ensure override
        ======================================== */
 
-    /* Alert backgrounds (using info color with transparency) */
-    --kds-alert-info-bg: #EFF6FF;
-    --kds-alert-warning-bg: #FFFBEB;
-    --kds-alert-success-bg: #ECFDF5;
-    --kds-alert-error-bg: #FEF2F2;
-
-    /* Border colors (not in core tokens) */
-    --kds-border-light: #DDD;
-    --kds-border-medium: #999;
-    --kds-border-dark: #666;
-
     /* Input border states */
-    --kds-input-border-hover: rgba(0, 0, 0, 0.42);  /* Slightly darker on hover (Material Design spec) */
+    --kds-input-border-hover: var(--kds-color-input-hover-border);
 
     /* Override BeerCSS native font variable */
     --font: var(--kds-font-family-primary);
@@ -292,13 +422,19 @@
     --warning: var(--kds-color-warning-main);
     --info: var(--kds-color-info-main);
 
-    /* Background and surface colors */
+    /* Background and surface colors - Override BeerCSS purple defaults */
     --background: var(--kds-color-background-default);
     --surface: var(--kds-color-background-paper);
-    --on-surface: var(--kds-color-text-primary);
-    --on-surface-variant: var(--kds-color-action-active);
+    --surface-dim: var(--kds-color-background-elevated);
+    --surface-bright: var(--kds-color-background-paper);
     --surface-variant: var(--kds-color-background-elevated);
+    --surface-container-lowest: var(--kds-color-background-default);
+    --surface-container-low: var(--kds-color-background-paper);
     --surface-container: var(--kds-color-background-default);
+    --surface-container-high: var(--kds-color-background-elevated);
+    --surface-container-highest: var(--kds-color-background-elevated);
+    --on-surface: var(--kds-color-text-primary);
+    --on-surface-variant: var(--kds-color-action-active);
     --outline: var(--kds-color-input-border);
     --outline-variant: var(--kds-border-light);
 
@@ -307,36 +443,36 @@
        ======================================== */
 
     /* File Upload States */
-    --kds-upload-zone-bg: #F9FAFB;              /* gray-50 */
-    --kds-upload-zone-border: #D1D5DB;          /* gray-300 */
-    --kds-upload-zone-border-hover: #3B82F6;    /* blue-500 */
-    --kds-upload-zone-border-drag: #8347AD;     /* primary-500 (purple) */
+    --kds-upload-zone-bg: var(--kds-color-background-elevated);
+    --kds-upload-zone-border: var(--kds-border-light);
+    --kds-upload-zone-border-hover: var(--kds-color-info-main);
+    --kds-upload-zone-border-drag: var(--kds-color-primary-main);
     --kds-upload-zone-border-error: var(--kds-color-error-main);
     --kds-upload-zone-border-success: var(--kds-color-success-main);
-    --kds-upload-item-bg: #FFFFFF;
-    --kds-upload-item-border: #E5E7EB;          /* gray-200 */
+    --kds-upload-item-bg: var(--kds-color-background-paper);
+    --kds-upload-item-border: var(--kds-border-light);
 
     /* OTP Input */
     --kds-otp-digit-size: 56px;
     --kds-otp-digit-height: 64px;
-    --kds-otp-digit-border: #D1D5DB;
-    --kds-otp-digit-border-focus: #3B82F6;
-    --kds-otp-digit-bg: #FFFFFF;
-    --kds-otp-digit-bg-filled: #F9FAFB;
+    --kds-otp-digit-border: var(--kds-border-light);
+    --kds-otp-digit-border-focus: var(--kds-color-info-main);
+    --kds-otp-digit-bg: var(--kds-color-background-paper);
+    --kds-otp-digit-bg-filled: var(--kds-color-background-elevated);
 
     /* Modal Base */
-    --kds-modal-bg: #FFFFFF;
+    --kds-modal-bg: var(--kds-color-background-paper);
     --kds-modal-padding: var(--kds-spacing-6);
     --kds-modal-padding-mobile: var(--kds-spacing-4);
     --kds-modal-border-radius: var(--kds-radius-lg);
-    --kds-modal-shadow: var(--kds-shadow-elevation-4);
+    --kds-modal-shadow: var(--kds-shadow-4);
     --kds-modal-backdrop: rgba(0, 0, 0, 0.5);
     --kds-modal-max-width: 600px;
     --kds-modal-max-width-mobile: 95vw;
 
     /* Modal Content Colors */
-    --kds-modal-title-color: #111827;           /* gray-900 */
-    --kds-modal-text-color: #374151;            /* gray-700 */
+    --kds-modal-title-color: var(--kds-color-text-primary);
+    --kds-modal-text-color: var(--kds-color-text-secondary);
     --kds-modal-icon-warning: var(--kds-color-warning-main);
     --kds-modal-icon-error: var(--kds-color-error-main);
     --kds-modal-icon-success: var(--kds-color-success-main);
@@ -347,22 +483,22 @@
     --kds-welcome-gradient-end: var(--kds-color-primary-dark);    /* Khipu purple dark */
 
     /* Bank Selector */
-    --kds-bank-item-border: #E5E7EB;
-    --kds-bank-item-border-hover: #D1D5DB;
-    --kds-bank-item-border-selected: #3B82F6;
-    --kds-bank-item-bg-selected: #EFF6FF;        /* blue-50 */
-    --kds-bank-item-bg-hover: #F9FAFB;
+    --kds-bank-item-border: var(--kds-border-light);
+    --kds-bank-item-border-hover: var(--kds-border-light);
+    --kds-bank-item-border-selected: var(--kds-color-info-main);
+    --kds-bank-item-bg-selected: var(--kds-alert-info-bg);
+    --kds-bank-item-bg-hover: var(--kds-color-background-elevated);
 
     /* Signature Pad */
-    --kds-signature-border: #D1D5DB;
-    --kds-signature-bg: #FFFFFF;
+    --kds-signature-border: var(--kds-border-light);
+    --kds-signature-bg: var(--kds-color-background-paper);
     --kds-signature-line-color: #000000;
 
     /* Contract Accordion */
-    --kds-accordion-border: #E5E7EB;
-    --kds-accordion-bg: #F9FAFB;
-    --kds-accordion-bg-open: #FFFFFF;
-    --kds-accordion-header-bg: #F3F4F6;
+    --kds-accordion-border: var(--kds-border-light);
+    --kds-accordion-bg: var(--kds-color-background-elevated);
+    --kds-accordion-bg-open: var(--kds-color-background-paper);
+    --kds-accordion-header-bg: var(--kds-color-background-elevated);
 
     /* Onboarding Container */
     --kds-onboarding-max-width: 800px;
@@ -420,9 +556,10 @@ footer {
  * Source: design.khipu.com and Material Design 3 specifications
  */
 
-/* ========================================
-   Button Overrides (Material Design 3)
-   ======================================== */
+
+:has(>main) {
+    background-color: transparent !important;
+}
 
 /* ========================================
    KHIPU BUTTON SYSTEM
@@ -665,8 +802,7 @@ a.kds-btn > .kds-icon > i {
     .kds-card-elevated,
     .khipu-card-elevated,
     .kds-card-main {
-        padding: 20px;
-        margin: 16px;
+        padding: 12px;
     }
 }
 
@@ -1335,100 +1471,24 @@ nav.primary button {
 }
 
 /* ========================================
-   Drawer/Sidenav (Mobile Navigation)
+   Flex Layout System (Body + Container + Sidebar)
    ======================================== */
 
-/* Left drawer hidden by default */
-nav.drawer.left {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 280px;
-    max-width: 80vw;
-    background: var(--surface-container, #FFFFFF);
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
-    transform: translateX(-100%);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 1100;
-    overflow-y: auto;
+/* Body flex-column layout */
+body.kds-layout {
     display: flex;
     flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
 }
 
-/* Show drawer when active */
-nav.drawer.left.active {
-    transform: translateX(0);
-}
-
-/* Drawer overlay */
-nav.drawer.left::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: -1;
-    pointer-events: none;
-}
-
-/* Show overlay when drawer is active */
-nav.drawer.left.active::before {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-}
-
-/* Drawer header styling */
-nav.drawer header {
-    padding: 16px;
-    background: var(--primary-container, rgba(131, 71, 173, 0.1));
-    border-bottom: 1px solid var(--outline-variant, rgba(0, 0, 0, 0.12));
-}
-
-/* Drawer links */
-nav.drawer a {
+/* Layout container (flex-row) - below header */
+.kds-layout-container {
     display: flex;
-    align-items: center;
-    padding: 12px 16px;
-    color: var(--on-surface, rgba(0, 0, 0, 0.87));
-    text-decoration: none;
-    transition: background 0.2s ease;
-    gap: 16px;
-}
-
-nav.drawer a:hover {
-    background: var(--surface-variant, rgba(0, 0, 0, 0.04));
-}
-
-nav.drawer a i {
-    font-size: 24px;
-    color: var(--on-surface-variant, rgba(0, 0, 0, 0.60));
-}
-
-nav.drawer .divider {
-    height: 1px;
-    background: var(--outline-variant, rgba(0, 0, 0, 0.12));
-    margin: 8px 0;
-}
-
-/* Hide menu toggle button on desktop */
-@media (min-width: 769px) {
-    #menu-toggle {
-        display: none;
-    }
-
-    nav.drawer.left {
-        display: none;
-    }
+    flex-direction: row;
+    flex: 1;
+    overflow: hidden;
 }
-
 /* ========================================
    Footer Customization
    ======================================== */
@@ -3284,4 +3344,372 @@ dialog.modal::backdrop {
     margin-top: var(--kds-spacing-6);
 }
 
+/* ===========================================================================
+
+/* ============================================
+   SIDEBAR NAVIGATION (Simple & Sticky)
+   ============================================ */
+
+/* Page layout - Flexbox horizontal */
+.kds-page-layout {
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Sidebar - Sticky flotante a la izquierda */
+.kds-sidebar {
+    width: var(--kds-spacing-sidebar-width);
+    background: var(--kds-color-background-paper);
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-lg);
+    flex-shrink: 0;
+    position: sticky;
+    top: var(--kds-spacing-4);
+    margin: var(--kds-spacing-4);
+    height: fit-content;
+    overflow-y: auto;
+    box-shadow: var(--kds-shadow-2);
+}
+
+/* Sidebar Header */
+.kds-sidebar-header {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-3);
+    padding: var(--kds-spacing-1) var(--kds-spacing-2);
+    border-bottom: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-lg) var(--kds-radius-lg) 0 0;
+    cursor: pointer;
+    position: relative; /* ← Para anclar dropdown */
+    transition: background var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-sidebar-header:hover {
+    background: var(--kds-color-action-hover);
+}
+
+/* Avatar circular */
+.kds-sidebar-avatar {
+    width: var(--kds-spacing-sidebar-icon-container-size);
+    height: var(--kds-spacing-sidebar-icon-container-size);
+    border-radius: var(--kds-radius-full);
+    background: var(--kds-color-error-main);
+    color: var(--kds-color-background-paper);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--kds-font-size-lg);
+    font-weight: var(--kds-font-weight-bold);
+    flex-shrink: 0;
+}
+
+/* Header text */
+.kds-sidebar-header-text {
+    flex: 1;
+    overflow: hidden;
+}
+
+.kds-sidebar-title {
+    font-size: var(--kds-font-size-base);
+    font-weight: var(--kds-font-weight-semibold);
+    color: var(--kds-color-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.kds-sidebar-subtitle {
+    font-size: var(--kds-font-size-sm);
+    color: var(--kds-color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Dropdown icon */
+.kds-sidebar-dropdown-icon {
+    font-size: var(--kds-spacing-sidebar-icon-size);
+    color: var(--kds-color-text-secondary);
+    flex-shrink: 0;
+    transition: transform var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+/* Header Dropdown - Flotante */
+.kds-sidebar-header-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: var(--kds-z-index-drawer);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(calc(var(--kds-spacing-1) * -1));
+    transition: all var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-sidebar-header-dropdown.kds-dropdown-open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+}
+
+/* Navigation */
+.kds-sidebar-nav {
+    padding: var(--kds-spacing-2) 0;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+/* Nav item */
+.kds-sidebar-nav-item {
+    display: flex;
+    align-items: center;
+    gap: var(--kds-spacing-1);
+    padding: var(--kds-spacing-1) var(--kds-spacing-2);
+    color: var(--kds-color-text-primary);
+    text-decoration: none;
+    position: relative;
+    transition: background var(--kds-transition-shorter) var(--kds-easing-standard);
+    width: 100%;
+    justify-content: flex-start;
+}
+
+.kds-sidebar-nav-item:hover {
+    background: var(--kds-color-action-hover);
+}
+
+/* Nav item icon */
+.kds-sidebar-nav-item i {
+    font-size: var(--kds-spacing-sidebar-icon-size);
+    color: var(--kds-color-text-secondary);
+}
+
+/* Nav item text */
+.kds-sidebar-nav-item span {
+    font-size: var(--kds-font-size-base);
+    font-weight: var(--kds-font-weight-medium);
+}
+
+/* Active state - barra morada a la izquierda */
+.kds-sidebar-nav-item.active {
+    background: var(--kds-color-primary-hover);
+}
+
+.kds-sidebar-nav-item.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: calc(var(--kds-spacing-1) / 2);
+    background: var(--kds-color-primary-main);
+}
+
+.kds-sidebar-nav-item.active i,
+.kds-sidebar-nav-item.active span {
+    color: var(--kds-color-primary-main);
+}
+
+/* Main content */
+.kds-main-content {
+    flex: 1;
+    padding: var(--kds-spacing-8);
+    overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+
+    .kds-main-content {
+        padding: var(--kds-spacing-4)
+    }
+}
+
+/* ============================================
+   MOBILE RESPONSIVE SIDEBAR
+   ============================================ */
+
+/* Mobile Topbar - oculto en desktop */
+.kds-mobile-topbar {
+    display: none;
+}
+
+/* Barra superior mobile del sidebar - oculta en desktop */
+.kds-sidebar-mobile-header {
+    display: none;
+}
+
+/* Botón cerrar sidebar */
+.kds-sidebar-close-btn {
+    border: none;
+    background: transparent;
+    border-radius: var(--kds-radius-sm);
+    cursor: pointer;
+    padding: 0;
+}
+
+.kds-sidebar-close-btn:hover {
+    background: var(--kds-color-action-hover);
+}
+
+.kds-sidebar-close-btn i {
+    font-size: var(--kds-spacing-sidebar-icon-size);
+    color: var(--kds-color-text-primary);
+}
+
+/* Botón hamburger */
+.kds-hamburger-btn {
+    width: var(--kds-spacing-sidebar-icon-container-size);
+    height: var(--kds-spacing-sidebar-icon-container-size);
+    border: none;
+    background: transparent;
+    border-radius: var(--kds-radius-sm);
+    cursor: pointer;
+    transition: background-color var(--kds-transition-shorter) var(--kds-easing-standard);
+}
+
+.kds-hamburger-btn:hover {
+    background: var(--kds-color-action-hover);
+}
+
+.kds-hamburger-btn i {
+    font-size: var(--kds-spacing-sidebar-icon-size);
+    color: var(--kds-color-text-primary);
+}
+
+/* Mobile (≤ 768px) */
+@media (max-width: 768px) {
+    /* Mostrar topbar */
+    .kds-mobile-topbar {
+        display: flex;
+        align-items: center;
+        gap: var(--kds-spacing-2);
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--kds-spacing-7);
+        padding: 0 var(--kds-spacing-2);
+        background: var(--kds-color-background-paper);
+        border-bottom: 1px solid var(--kds-color-divider);
+        z-index: var(--kds-z-index-appbar);
+        font-size: var(--kds-font-size-lg);
+        font-weight: var(--kds-font-weight-semibold);
+    }
+
+    /* Layout con espacio para topbar */
+    .kds-page-layout {
+        padding-top: var(--kds-spacing-7);
+    }
+
+    /* Sidebar = drawer full-width */
+    .kds-sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 100vw;
+        margin: 0;
+        height: 100%;
+        transform: translateX(-100%);
+        transition: transform var(--kds-transition-standard) var(--kds-easing-ease-out);
+        z-index: var(--kds-z-index-drawer);
+        border-radius: 0;
+    }
+
+    /* Barra superior mobile visible */
+    .kds-sidebar-mobile-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: var(--kds-spacing-7);
+        padding: 0 var(--kds-spacing-2);
+        background: var(--kds-color-background-paper);
+        border-bottom: 1px solid var(--kds-color-divider);
+        font-size: var(--kds-font-size-lg);
+        font-weight: var(--kds-font-weight-semibold);
+        color: var(--kds-color-text-primary);
+    }
+
+    /* Sidebar abierto */
+    .kds-sidebar-open {
+        transform: translateX(0);
+    }
+
+    /* Main content full-width */
+    .kds-main-content {
+        margin-left: 0;
+    }
+}
+
+/* ============================================
+   LIST UTILITIES
+   ============================================ */
+
+/* Standard list with compact spacing */
+.kds-list {
+    margin: 0;
+    padding-left: var(--kds-spacing-2);
+    list-style-position: outside;
+    line-height: var(--kds-line-height-relaxed);
+}
+
+.kds-list > li {
+    margin-bottom: var(--kds-spacing-2);
+}
+
+.kds-list > li:last-child {
+    margin-bottom: 0;
+}
+
+/* Code block for displaying code snippets */
+.kds-code-block {
+    background: var(--kds-color-background-elevated);
+    padding: var(--kds-spacing-4);
+    border-radius: var(--kds-radius-md);
+    overflow-x: auto;
+    font-family: 'Courier New', monospace;
+    font-size: var(--kds-font-size-sm);
+    line-height: var(--kds-line-height-relaxed);
+    color: var(--kds-color-text-primary);
+}
+
+/* ============================================
+   DEMO PAGE STYLES (DEPRECATED - Use kds-card-* instead)
+   ============================================ */
+
+.demo-card {
+    background: var(--kds-color-background-paper);
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-lg);
+    padding: var(--kds-spacing-6);
+    margin-bottom: var(--kds-spacing-6);
+}
+
+.code-block {
+    background: var(--kds-color-background-elevated);
+    border: 1px solid var(--kds-color-divider);
+    border-radius: var(--kds-radius-md);
+    padding: var(--kds-spacing-4);
+    font-family: var(--kds-font-family-mono);
+    font-size: var(--kds-font-size-sm);
+    line-height: var(--kds-line-height-relaxed);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-x: auto;
+    color: var(--kds-color-text-primary);
+}
+
+.kds-text-secondary-color {
+    color: var(--kds-color-text-secondary);
+}
+
+.kds-main-content > .kds-body-large {
+    margin-bottom: var(--kds-spacing-6);
+}
+
+.kds-main-content > .demo-card ul {
+    line-height: var(--kds-line-height-relaxed);
+}