/* ===================================================================== TENIS Y BRILLO — Design Tokens Archivo: /CSS/variables.css Descripción: Sistema de diseño compartido (colores, tipografía, espaciados, sombras, radios, transiciones). Este NO es un Master Page; es una hoja de estilos común que cada página ASPX enlaza de forma independiente, tal como exige la arquitectura del proyecto. Cada módulo (Dashboard.css, Clientes.css, etc.) parte de estos tokens. ===================================================================== */ :root{ /* ---- Marca ---------------------------------------------------- */ --brand-blue: #2563EB; --brand-blue-dark: #1D4ED8; --brand-blue-light: #DBEAFE; --brand-teal: #14B8A6; --brand-teal-dark: #0D9488; --brand-teal-light: #CCFBF1; --brand-green: #10B981; --brand-green-dark: #059669; --brand-green-light: #D1FAE5; --gradient-brand: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-teal) 100%); /* ---- Neutros (modo claro) --------------------------------------- */ --surface-0: #FFFFFF; /* fondo de tarjetas */ --surface-1: #F8FAFC; /* fondo de app */ --surface-2: #F1F5F9; /* fondo hover / secciones */ --border-soft: #E2E8F0; --border-strong:#CBD5E1; --text-primary: #0F172A; --text-secondary: #475569; --text-tertiary: #94A3B8; --text-on-brand: #FFFFFF; /* ---- Estado -------------------------------------------------- */ --state-success: var(--brand-green); --state-warning: #F59E0B; --state-danger: #EF4444; --state-info: var(--brand-blue); /* ---- Tipografía ------------------------------------------------ */ --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fs-2xs: 0.6875rem; /* 11px */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-md: 0.9375rem; /* 15px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.375rem; /* 22px */ --fs-2xl: 1.75rem; /* 28px */ --fs-3xl: 2.25rem; /* 36px */ /* ---- Espaciado (escala base 4px) -------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10:72px; /* ---- Radios ----------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px; /* ---- Sombras (suaves, tipo Stripe/Linear) ----------------------- */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12); --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.25); /* ---- Transiciones ------------------------------------------------ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* ---- Layout ------------------------------------------------------ */ --sidebar-w: 264px; --sidebar-w-collapsed: 76px; --header-h: 72px; } /* ---- Modo oscuro -------------------------------------------------- Se activa agregando data-theme="dark" al o . Preparado desde ya; el toggle real de persistencia se conecta en la fase de backend (preferencia de usuario en BD). --------- */ [data-theme="dark"]{ --surface-0: #12151C; --surface-1: #0B0D12; --surface-2: #1A1E27; --border-soft: #262B36; --border-strong:#333947; --text-primary: #F1F5F9; --text-secondary: #A1A9B8; --text-tertiary: #6B7280; --brand-blue-light: rgba(37, 99, 235, 0.16); --brand-teal-light: rgba(20, 184, 166, 0.16); --brand-green-light: rgba(16, 185, 129, 0.16); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); } /* ---- Reset mínimo compartido --------------------------------------- */ *, *::before, *::after{ box-sizing: border-box; } html, body{ margin:0; padding:0; height:100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body{ font-family: var(--font-body); background: var(--surface-1); color: var(--text-primary); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } img{ max-width:100%; display:block; } button{ font-family: inherit; } a{ color: inherit; text-decoration: none; } /* Foco visible accesible en toda la plataforma */ :focus-visible{ outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }