/* ======================================== ARCHIVO: tokens.css PROPÓSITO: Variables de diseño (Design Tokens) globales MANTENIMIENTO: Para cambiar colores, espacios, tipografía o radios en TODO el sistema, edita SOLO este archivo. Todos los componentes consumen estas variables. CONVENCIONES: Usamos CSS Custom Properties (--nombre) en :root para permitir temas y ajustes centralizados. ÚLTIMA ACTUALIZACIÓN: 2026-08-01 ======================================== */ :root { /* ======================================== PALETA DE COLORES - BRAND Inspirada en la app original LUMEN 360 pero modernizada ======================================== */ /* Azul primario (acción, marca, navegación) */ --color-primary-50: #eef4ff; --color-primary-100: #d9e6ff; --color-primary-200: #b8d0ff; --color-primary-300: #8ab2ff; --color-primary-400: #5a8cff; --color-primary-500: #3a6cff; /* Color principal */ --color-primary-600: #2a52e0; --color-primary-700: #1f3fb5; --color-primary-800: #1a348f; --color-primary-900: #15296f; /* ======================================== PALETA DE COLORES - ESTADOS SEMÁNTICOS Codificación por colores para estados clínicos ======================================== */ /* Verde - Estados positivos (al día, hospitalizado, completado) */ --color-success-50: #ecfdf5; --color-success-100: #d1fae5; --color-success-500: #10b981; --color-success-700: #047857; /* Rojo - Alertas críticas (vencido, incidencias) */ --color-danger-50: #fef2f2; --color-danger-100: #fee2e2; --color-danger-500: #ef4444; --color-danger-700: #b91c1c; /* Amarillo - Notificaciones, evolución */ --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-500: #f59e0b; --color-warning-700: #b45309; /* Rosa - Género femenino, identificado en la app original */ --color-pink-50: #fdf2f8; --color-pink-100: #fce7f3; --color-pink-500: #ec4899; --color-pink-700: #be185d; /* Púrpura - Etiquetas especiales (referido, beta) */ --color-purple-50: #faf5ff; --color-purple-100: #f3e8ff; --color-purple-500: #a855f7; --color-purple-700: #7e22ce; /* Naranja - Incidencias (categoría especial) */ --color-orange-50: #fff7ed; --color-orange-500: #f97316; /* ======================================== COLORES NEUTROS (grises) Base para fondos, textos, bordes ======================================== */ --color-white: #ffffff; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* ======================================== COLORES SEMÁNTICOS DEL SISTEMA Asignación de uso - los componentes consumen estos ======================================== */ --bg-app: var(--color-gray-50); /* Fondo general de la app */ --bg-surface: var(--color-white); /* Fondo de tarjetas */ --bg-sidebar: var(--color-white); /* Fondo del sidebar */ --bg-elevated: var(--color-white); /* Fondo de elementos elevados (modals) */ --bg-hover: var(--color-gray-50); /* Hover state */ --bg-active: var(--color-primary-50); /* Active state */ --text-primary: var(--color-gray-900); --text-secondary: var(--color-gray-600); --text-tertiary: var(--color-gray-500); --text-disabled: var(--color-gray-400); --text-inverse: var(--color-white); --text-link: var(--color-primary-600); --border-light: var(--color-gray-100); --border-default: var(--color-gray-200); --border-strong: var(--color-gray-300); --border-focus: var(--color-primary-500); /* ======================================== TIPOGRAFÍA ======================================== */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Monaco", "Cascadia Code", "Roboto Mono", Consolas, monospace; /* Escala tipográfica (1.250 ratio - mayor) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* Pesos */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line height */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-widest: 0.1em; /* ======================================== ESPACiado (Sistema de 4px) ======================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ======================================== BORDES Y RADIOS ======================================== */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* Circular */ --border-width: 1px; --border-width-2: 2px; /* ======================================== SOMBRAS (sutiles y modernas) ======================================== */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.15); --shadow-focus: 0 0 0 3px rgb(58 108 255 / 0.15); /* ======================================== TRANSICIONES Y ANIMACIONES ======================================== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* ======================================== LAYOUT ======================================== */ --sidebar-width: 16rem; /* 256px */ --sidebar-width-collapsed: 4.5rem; /* 72px */ --header-height: 4rem; /* 64px */ --max-content-width: 90rem; /* 1440px */ /* ======================================== GLASSMORPHISM (efecto glass de Apple) Aplicado al sidebar flotante Para que se vea bien, el fondo detrás debe tener algún color/gradiente (no blanco plano). ======================================== */ --glass-bg: rgba(255, 255, 255, 0.62); --glass-bg-hover: rgba(255, 255, 255, 0.78); --glass-border: 1px solid rgba(255, 255, 255, 0.5); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12), 0 2px 8px 0 rgba(31, 38, 135, 0.06); --glass-blur: blur(20px) saturate(180%); /* Sidebar flotante: espacio entre el sidebar y el borde de la ventana */ --sidebar-floating-margin: 0.75rem; /* 12px */ --sidebar-floating-radius: 1.25rem; /* 20px */ /* ======================================== Z-INDEX (jerarquía de capas) ======================================== */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-notification: 800; } /* ======================================== MODO OSCURO (preparado para v2) Por ahora desactivado, pero la estructura está lista para activarlo. ======================================== */ /* Para activar dark mode, descomentar y agregar toggle: @media (prefers-color-scheme: dark) { :root { --bg-app: var(--color-gray-900); --bg-surface: var(--color-gray-800); --text-primary: var(--color-gray-50); /* ... */ } } */