*{padding:0;margin:0;box-sizing:border-box;font-family:inter,sans-serif}::-webkit-scrollbar{width:0;height:0;scrollbar-color:var(--color-border) transparent;scrollbar-width:thin}:hover::-webkit-scrollbar{opacity:1}::-webkit-scrollbar-thumb{scrollbar-color:var(--color-border) transparent;scrollbar-width:thin;border-radius:4px}body{background-color:var(--color-background)}.demo-container{max-width:1200px;margin:0 auto;padding:var(--space-12) var(--space-5)}.demo-container h1{text-align:center;font-size:2.5rem;font-weight:600;color:var(--color-text-primary)}.demo-description{text-align:center;margin-bottom:var(--space-8);font-size:1.1rem;opacity:.7;color:var(--color-text-secondary)}.demo-section{margin-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.demo-section:last-child{border-bottom:none}.demo-section h2{margin-bottom:var(--space-10);font-size:1.875rem;font-weight:600;color:var(--color-text-primary)}.demo-subsection h3{margin-bottom:var(--space-6);font-size:1.25rem;font-weight:600;color:var(--color-text-primary)}.demo-item{margin-bottom:var(--space-8)}.demo-item h4{margin-bottom:var(--space-4);font-size:1rem;font-weight:600;opacity:.8;color:var(--color-text-secondary)}.demo-item h5{font-weight:600;opacity:.8;color:var(--color-text-secondary)}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--space-8);margin-top:var(--space-6)}.button-group{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}.checkbox-group{display:flex;flex-direction:column;gap:var(--space-4)}.radio-group{display:flex;flex-direction:column;gap:var(--space-3)}.radio-group h5{margin:0 0 var(--space-2) 0;font-size:1rem;font-weight:600;color:var(--color-text-primary)}.input-sizes{display:flex;flex-direction:column;gap:var(--space-5)}.selection-result{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);background-color:var(--color-surface-secondary);border-radius:var(--radius-sm);font-size:.875rem;color:var(--color-text-secondary)}.demo-form{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background-color:var(--color-surface-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border)}.demo-form openiis-button{margin-top:var(--space-2);align-self:flex-start}.tooltip-demo-container{display:flex;justify-content:center;align-items:center;min-height:100px;position:relative}.tooltip-trigger{position:relative;display:inline-block;padding:var(--space-3) var(--space-6);background:var(--primary-600);color:var(--color-text-inverse);border-radius:var(--radius-lg);cursor:pointer;text-align:center;min-width:120px;-webkit-user-select:none;user-select:none;font-size:.9rem;font-weight:500;transition:background .2s}.tooltip-trigger:hover{background:var(--primary-700)}.tooltip-trigger.danger{background:var(--color-error)}.tooltip-trigger.danger:hover{background:#c53030}@media (max-width: 768px){.demo-container{padding:var(--space-5) var(--space-4)}.demo-container h1{font-size:2rem;margin-bottom:var(--space-12)}.demo-grid{grid-template-columns:1fr;gap:var(--space-6)}.button-group{flex-direction:column;align-items:stretch}}@font-face{font-family:Material Icons Outlined;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialiconsoutlined/v110/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format("woff2")}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}body{font-family:Inter,sans-serif;background-color:var(--color-background)}:root{--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .02);--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .03), 0 1px 2px -1px rgb(0 0 0 / .02);--shadow-md: 0 2px 4px -1px rgb(0 0 0 / .04), 0 1px 3px -1px rgb(0 0 0 / .03);--shadow-lg: 0 4px 8px -2px rgb(0 0 0 / .05), 0 2px 4px -1px rgb(0 0 0 / .03);--shadow-xl: 0 8px 16px -4px rgb(0 0 0 / .06), 0 4px 8px -2px rgb(0 0 0 / .04);--opacity-10: .1;--opacity-20: .2;--opacity-30: .3;--opacity-40: .4;--opacity-50: .5;--opacity-60: .6;--opacity-70: .7;--opacity-80: .8;--opacity-90: .9;--opacity-100: 1}[data-openiis-theme=classic][data-theme=dark],[data-openiis-theme=neutral][data-theme=dark],[data-openiis-theme=vivid][data-theme=dark],[data-openiis-theme=custom][data-theme=dark]{--color-background: #0f0f0f;--color-surface: #171717;--color-surface-elevated: #262626;--color-border: #404040;--color-text-primary: #fafafa;--color-text-secondary: #d4d4d4;--color-text-muted: #737373;--color-text-inverse: #171717;--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .15);--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .18), 0 1px 2px -1px rgb(0 0 0 / .15);--shadow-md: 0 2px 4px -1px rgb(0 0 0 / .2), 0 1px 3px -1px rgb(0 0 0 / .18);--shadow-lg: 0 4px 8px -2px rgb(0 0 0 / .22), 0 2px 4px -1px rgb(0 0 0 / .18);--shadow-xl: 0 8px 16px -4px rgb(0 0 0 / .25), 0 4px 8px -2px rgb(0 0 0 / .2)}.ejemplo{background-color:var(--primary-500);color:var(--color-text-inverse)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdownSlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%);opacity:0}}@keyframes spinnerCircle{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinnerDots{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}@keyframes spinnerBars{0%,40%,to{transform:scaleY(.4);opacity:.5}20%{transform:scaleY(1);opacity:1}}@keyframes spinnerPulse{0%,to{transform:scale(0);opacity:1}50%{transform:scale(1);opacity:.7}}@keyframes spinnerWave{0%,60%,to{transform:scale(0);opacity:.5}30%{transform:scale(1);opacity:1}}@keyframes spinnerRing{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinnerBounce{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}@keyframes spinnerFade{0%{opacity:1}to{opacity:0}}@keyframes progressStripe{0%{background-position:0 0}to{background-position:20px 0}}@keyframes progressIndeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progressPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes badgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes badgeGlow{0%,to{box-shadow:0 0 5px currentColor}50%{box-shadow:0 0 20px currentColor}}@keyframes ripple{0%{width:0;height:0;opacity:1}to{width:200px;height:200px;opacity:0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-8px,0)}70%{transform:translate3d(0,-4px,0)}90%{transform:translate3d(0,-2px,0)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes zoomIn{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.3)}}@keyframes pulse-danger{0%,to{background-color:var(--color-error);box-shadow:0 0 rgba(var(--color-error-rgb, 220, 38, 38),.7)}50%{background-color:var(--color-error);box-shadow:0 0 0 10px rgba(var(--color-error-rgb, 220, 38, 38),0)}}.animate-fade-in-up{animation:fadeInUp .5s ease-out}.animate-fade-in{animation:fadeIn .3s ease-out}.animate-modal-slide-up{animation:modalSlideUp .2s ease-out}.animate-dropdown-slide{animation:dropdownSlideDown .15s ease-out}.animate-spin{animation:spin 1s linear infinite}.animate-shimmer{animation:shimmer 2s ease-in-out infinite}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-bounce{animation:bounce 1s ease-in-out infinite}.animate-shake{animation:shake .5s ease-in-out}.animate-ripple{animation:ripple .6s ease-out}.animate-badge-pulse{animation:badgePulse 2s ease-in-out infinite}.animate-badge-glow{animation:badgeGlow 1.5s ease-in-out infinite}.animate-progress-stripe{animation:progressStripe 1s linear infinite}.animate-progress-indeterminate{animation:progressIndeterminate 1.5s ease-in-out infinite}.animate-progress-pulse{animation:progressPulse 1.5s ease-in-out infinite}.animate-spinner-circle{animation:spinnerCircle 1s linear infinite}.animate-spinner-dots{animation:spinnerDots 1s ease-in-out infinite}.animate-spinner-bars{animation:spinnerBars 1s ease-in-out infinite}.animate-spinner-pulse{animation:spinnerPulse 1s ease-in-out infinite}.animate-spinner-wave{animation:spinnerWave 1s ease-in-out infinite}.animate-spinner-ring{animation:spinnerRing 1s linear infinite}.animate-spinner-bounce{animation:spinnerBounce 1s ease-in-out infinite}.animate-spinner-fade{animation:spinnerFade 1s ease-in-out infinite}.animate-slow{animation-duration:2s}.animate-fast{animation-duration:.5s}.animate-slower{animation-duration:3s}.animate-faster{animation-duration:.3s}.animate-paused{animation-play-state:paused}.animate-running{animation-play-state:running}.animate-delay-100{animation-delay:.1s}.animate-delay-200{animation-delay:.2s}.animate-delay-300{animation-delay:.3s}.animate-delay-500{animation-delay:.5s}.animate-delay-700{animation-delay:.7s}.animate-delay-1000{animation-delay:1s}@media (max-width: 768px){.animate-fade-in-up,.animate-modal-slide-up,.animate-dropdown-slide{animation-duration:.2s}.animate-bounce,.animate-pulse{animation-duration:1s}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.animate-spin,.animate-bounce,.animate-pulse,.animate-shake,.animate-shimmer{animation:none!important}}@media (prefers-color-scheme: dark){.animate-shimmer{animation:shimmer 2s ease-in-out infinite}.animate-badge-glow{animation:badgeGlow 1.5s ease-in-out infinite}}@media print{*{animation:none!important;transition:none!important}}[data-openiis-theme=classic]{--primary-50: #f0fdfa;--primary-100: #ccfbf1;--primary-200: #99f6e4;--primary-300: #5eead4;--primary-400: #2dd4bf;--primary-500: #14b8a6;--primary-600: #0d9488;--primary-700: #0f766e;--primary-800: #115e59;--primary-900: #134e4a;--neutral-50: #fafafa;--neutral-100: #f5f5f5;--neutral-200: #e5e5e5;--neutral-300: #d4d4d4;--neutral-400: #a3a3a3;--neutral-500: #737373;--neutral-600: #525252;--neutral-700: #404040;--neutral-800: #262626;--neutral-900: #171717;--color-background: #ffffff;--color-surface: #fafafa;--color-surface-elevated: #ffffff;--color-border: #e5e5e5;--color-border-focus: #14b8a6;--color-text-primary: #171717;--color-text-secondary: #525252;--color-text-muted: #a3a3a3;--color-text-inverse: #ffffff;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6}[data-openiis-theme=classic][data-theme=dark]{--color-border-focus: #2dd4bf;--color-background: #0f0f0f;--color-surface: #171717;--color-surface-elevated: #262626;--color-border: #404040;--color-text-primary: #fafafa;--color-text-secondary: #d4d4d4;--color-text-muted: #737373;--color-text-inverse: #171717;--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .15);--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .18), 0 1px 2px -1px rgb(0 0 0 / .15);--shadow-md: 0 2px 4px -1px rgb(0 0 0 / .2), 0 1px 3px -1px rgb(0 0 0 / .18);--shadow-lg: 0 4px 8px -2px rgb(0 0 0 / .22), 0 2px 4px -1px rgb(0 0 0 / .18);--shadow-xl: 0 8px 16px -4px rgb(0 0 0 / .25), 0 4px 8px -2px rgb(0 0 0 / .2)}[data-openiis-theme=neutral]{--primary-50: #f8fafc;--primary-100: #f1f5f9;--primary-200: #e2e8f0;--primary-300: #cbd5e1;--primary-400: #94a3b8;--primary-500: #64748b;--primary-600: #475569;--primary-700: #334155;--primary-800: #1e293b;--primary-900: #0f172a;--neutral-50: #f9fafb;--neutral-100: #f3f4f6;--neutral-200: #e5e7eb;--neutral-300: #d1d5db;--neutral-400: #9ca3af;--neutral-500: #6b7280;--neutral-600: #4b5563;--neutral-700: #374151;--neutral-800: #1f2937;--neutral-900: #111827;--color-background: #ffffff;--color-surface: #f9fafb;--color-surface-elevated: #ffffff;--color-border: #e5e7eb;--color-border-focus: #64748b;--color-text-primary: #111827;--color-text-secondary: #4b5563;--color-text-muted: #9ca3af;--color-text-inverse: #ffffff;--color-success: #059669;--color-warning: #d97706;--color-error: #dc2626;--color-info: #2563eb}[data-openiis-theme=neutral][data-theme=dark]{--color-border-focus: #94a3b8}[data-openiis-theme=vivid]{--primary-50: #fdf2f8;--primary-100: #fce7f3;--primary-200: #fbcfe8;--primary-300: #f9a8d4;--primary-400: #f472b6;--primary-500: #ec4899;--primary-600: #db2777;--primary-700: #be185d;--primary-800: #9d174d;--primary-900: #831843;--neutral-50: #fafafa;--neutral-100: #f4f4f5;--neutral-200: #e4e4e7;--neutral-300: #d4d4d8;--neutral-400: #a1a1aa;--neutral-500: #71717a;--neutral-600: #52525b;--neutral-700: #3f3f46;--neutral-800: #27272a;--neutral-900: #18181b;--color-background: #ffffff;--color-surface: #fafafa;--color-surface-elevated: #ffffff;--color-border: #e4e4e7;--color-border-focus: #ec4899;--color-text-primary: #18181b;--color-text-secondary: #52525b;--color-text-muted: #a1a1aa;--color-text-inverse: #ffffff;--color-success: #22c55e;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6}[data-openiis-theme=vivid][data-theme=dark]{--color-border-focus: #f472b6}.ejemplo{background-color:var(--color-background);color:var(--color-text-secondary)}