/* ============================================================= Circula — Design Tokens Prefijo --ck- (Circula) para coexistir con tokens legacy. Usage: pegá este archivo en :root al inicio de tu CSS global. ============================================================= */ /* Fonts: self-hosted en /js/lib/fonts.css (NO usamos Google Fonts CDN porque algunos firewalls corporativos bloquean fonts.gstatic.com con ERR_CERT_AUTHORITY_INVALID — ver CLAUDE.md). Si las fonts no cargan, verificá que js/lib/fonts.css esté en el del HTML. */ :root { /* ========================================================= COLOR · BRAND ========================================================= */ --ck-primary: #2563EB; /* azul institucional */ --ck-primary-hover: #1D4ED8; /* hover -10 lightness */ --ck-primary-active: #1E40AF; --ck-primary-light: #EFF6FF; /* fondos suaves, sidebar activa */ --ck-primary-50: #EFF6FF; --ck-primary-100: #DBEAFE; --ck-primary-200: #BFDBFE; --ck-primary-500: #2563EB; --ck-primary-700: #1D4ED8; --ck-primary-900: #1E3A8A; /* Acento secundario (uso muy limitado: detalles, dataviz) */ --ck-accent: #0EA5E9; /* sky-500 */ --ck-accent-light: #E0F2FE; /* ========================================================= COLOR · SEMÁNTICOS (success / warning / danger / info) Cada uno con escalas 50 / 100 / 200 / 500 / 700 / 900. ========================================================= */ /* Success — verde · VIGENTE, confirmación */ --ck-success-50: #F0FDF4; --ck-success-100: #DCFCE7; --ck-success-200: #BBF7D0; --ck-success-500: #16A34A; --ck-success-700: #15803D; --ck-success-900: #14532D; /* Warning — ámbar · alerta a 30 días */ --ck-warning-50: #FFFBEB; --ck-warning-100: #FEF3C7; --ck-warning-200: #FDE68A; --ck-warning-500: #D97706; --ck-warning-700: #B45309; --ck-warning-900: #78350F; /* Danger — rojo · 7 días y vencido */ --ck-danger-50: #FEF2F2; --ck-danger-100: #FEE2E2; --ck-danger-200: #FECACA; --ck-danger-500: #DC2626; --ck-danger-700: #B91C1C; --ck-danger-900: #991B1B; /* Info — azul · banners contextuales */ --ck-info-50: #EFF6FF; --ck-info-100: #DBEAFE; --ck-info-200: #BFDBFE; --ck-info-500: #2563EB; --ck-info-700: #1D4ED8; --ck-info-900: #1E3A8A; /* ========================================================= COLOR · NEUTRALES (slate) ========================================================= */ --ck-neutral-50: #F8FAFC; --ck-neutral-100: #F1F5F9; --ck-neutral-200: #E2E8F0; --ck-neutral-300: #CBD5E1; --ck-neutral-400: #94A3B8; --ck-neutral-500: #64748B; --ck-neutral-600: #475569; --ck-neutral-700: #334155; --ck-neutral-800: #1E293B; --ck-neutral-900: #0F172A; /* Alias semánticos heredados del sistema actual */ --ck-text: var(--ck-neutral-900); /* #0F172A */ --ck-text-secondary: var(--ck-neutral-600); /* #475569 */ --ck-text-muted: #6B7280; /* gray-500 */ --ck-bg: var(--ck-neutral-50); /* #F8FAFC */ --ck-surface: #FFFFFF; --ck-surface-alt: var(--ck-neutral-100); --ck-border: #E5E7EB; --ck-border-strong: var(--ck-neutral-300); /* Estados de trámite mapeados a semántica */ --ck-status-ok: var(--ck-success-500); --ck-status-30: var(--ck-warning-500); --ck-status-15: var(--ck-warning-700); --ck-status-7: var(--ck-danger-500); --ck-status-vencido: var(--ck-danger-900); /* ========================================================= TYPOGRAPHY ========================================================= */ --ck-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ck-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Sizes — 7 niveles + display. Base 17px anti-presbicia. */ --ck-text-display: 48px; --ck-lh-display: 56px; --ck-text-h1: 32px; --ck-lh-h1: 40px; --ck-text-h2: 24px; --ck-lh-h2: 32px; --ck-text-h3: 20px; --ck-lh-h3: 28px; --ck-text-body-lg: 19px; --ck-lh-body-lg: 28px; --ck-text-body: 17px; --ck-lh-body: 26px; --ck-text-sm: 15px; --ck-lh-sm: 22px; --ck-text-xs: 13px; --ck-lh-xs: 18px; --ck-fw-regular: 400; --ck-fw-medium: 500; --ck-fw-semibold: 600; --ck-fw-bold: 700; --ck-fw-extrabold: 800; /* ========================================================= SPACING — grid 4pt ========================================================= */ --ck-space-1: 4px; --ck-space-2: 8px; --ck-space-3: 12px; --ck-space-4: 16px; --ck-space-5: 20px; --ck-space-6: 24px; --ck-space-8: 32px; --ck-space-12: 48px; --ck-space-16: 64px; /* ========================================================= RADIUS ========================================================= */ --ck-radius-sm: 4px; --ck-radius-md: 8px; --ck-radius-lg: 12px; --ck-radius-xl: 16px; --ck-radius-full: 9999px; /* ========================================================= SHADOW ========================================================= */ --ck-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --ck-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08); --ck-shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.10); --ck-shadow-elevated: 0 8px 16px rgba(15, 23, 42, 0.08), 0 20px 40px rgba(15, 23, 42, 0.12); /* Focus ring */ --ck-ring-primary: 0 0 0 3px rgba(37, 99, 235, 0.40); --ck-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.32); --ck-ring-success: 0 0 0 3px rgba(22, 163, 74, 0.32); /* ========================================================= Z-INDEX (escalable y documentado) ========================================================= */ --ck-z-base: 1; --ck-z-sticky: 100; /* sticky headers, sticky footers de modal */ --ck-z-dropdown: 200; /* select, datepicker, menú contextual */ --ck-z-overlay: 500; /* drawer mobile, sidebar collapse */ --ck-z-modal: 600; /* modales centrados */ --ck-z-popover: 700; /* tooltips, popovers */ --ck-z-toast: 800; /* notificaciones flotantes */ --ck-z-tour: 900; /* Shepherd.js spotlight */ --ck-z-max: 9999; /* escape hatch */ /* ========================================================= MOTION ========================================================= */ --ck-dur-micro: 150ms; --ck-dur-soft: 240ms; --ck-dur-emphatic: 440ms; --ck-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ck-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* ========================================================= LAYOUT ========================================================= */ --ck-container-max: 1280px; --ck-sidebar-width: 240px; --ck-content-pad-x: 32px; --ck-content-pad-x-mobile: 16px; --ck-touch-min: 44px; } @media (prefers-reduced-motion: reduce) { :root { --ck-dur-micro: 0.01ms; --ck-dur-soft: 0.01ms; --ck-dur-emphatic: 0.01ms; } } /* ============================================================= SEMANTIC TYPE STYLES — clases utilitarias listas para pegar ============================================================= */ /* Durante la migración NO pisamos html ni body: el legacy ya define la base en 17px (css/styles.css). Si querés aplicar el body-style del DS, usa o aplicá la clase a un wrapper específico. */ .ck-body { font-family: var(--ck-font-sans); font-size: var(--ck-text-body); line-height: var(--ck-lh-body); font-weight: var(--ck-fw-regular); color: var(--ck-text); background: var(--ck-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ck-display { font-size: var(--ck-text-display); line-height: var(--ck-lh-display); font-weight: var(--ck-fw-extrabold); letter-spacing: -0.02em; color: var(--ck-text); } .ck-h1 { font-size: var(--ck-text-h1); line-height: var(--ck-lh-h1); font-weight: var(--ck-fw-bold); letter-spacing: -0.015em; color: var(--ck-text); } .ck-h2 { font-size: var(--ck-text-h2); line-height: var(--ck-lh-h2); font-weight: var(--ck-fw-bold); letter-spacing: -0.01em; color: var(--ck-text); } .ck-h3 { font-size: var(--ck-text-h3); line-height: var(--ck-lh-h3); font-weight: var(--ck-fw-semibold); color: var(--ck-text); } .ck-body-lg { font-size: var(--ck-text-body-lg); line-height: var(--ck-lh-body-lg); } .ck-sm { font-size: var(--ck-text-sm); line-height: var(--ck-lh-sm); color: var(--ck-text-secondary); } .ck-xs { font-size: var(--ck-text-xs); line-height: var(--ck-lh-xs); letter-spacing: 0.04em; text-transform: uppercase; font-weight: var(--ck-fw-medium); color: var(--ck-text-muted); } .ck-mono { font-family: var(--ck-font-mono); font-feature-settings: 'tnum' 1, 'ss01' 1; letter-spacing: 0; } /* Patente chilena: AB1234 */ .ck-plate { font-family: var(--ck-font-mono); font-weight: var(--ck-fw-semibold); font-size: var(--ck-text-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ck-text); background: var(--ck-neutral-100); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); padding: 2px 8px; display: inline-block; } /* Monto CLP: $ 26.000 */ .ck-amount { font-family: var(--ck-font-mono); font-weight: var(--ck-fw-semibold); font-variant-numeric: tabular-nums; } /* Folio: COT-202605-0001 */ .ck-folio { font-family: var(--ck-font-mono); font-weight: var(--ck-fw-medium); color: var(--ck-text-secondary); font-size: var(--ck-text-sm); }