/* ===================================================================== VISIONEON · DESIGN SYSTEM — Capa de tokens --------------------------------------------------------------------- Fuente única de verdad para color, tipografía, espaciado, elevación, movimiento y capas. Compartida por la web pública y el panel. ORDEN DE CARGA: este archivo va SIEMPRE antes que admin.css o styles.css. Aquí se definen los tokens; las hojas de cada superficie los consumen. Si una hoja redefine un token, gana la suya (cascada), así que añadir este archivo no rompe nada de lo que ya funciona. REGLA: en los componentes no se escriben valores literales. Mal: padding: 14px; color: #00d4ff; Bien: padding: var(--space-3); color: var(--brand-primary); ===================================================================== */ :root { /* --------------------------------------------------------------- 1 · COLOR — Marca El gradiente cian → violeta → magenta es la firma de Visioneon. Se usa con moderación: acentos, estados activos y una sola superficie destacada por pantalla. Nunca como fondo general. --------------------------------------------------------------- */ --brand-primary: #00d4ff; /* cian · acción principal, foco, enlaces */ --brand-secondary: #4b6cff; /* azul · paso intermedio del gradiente */ --brand-tertiary: #7b5cff; /* violeta · paso intermedio */ --brand-accent: #a259ff; /* púrpura · acento secundario */ --brand-highlight: #ff4d8d; /* magenta · solo remates del gradiente */ /* Componentes RGB: permiten opacidad sin depender de color-mix(), que no existe en navegadores anteriores a 2023. Uso: rgba(var(--brand-primary-rgb), .12) */ --brand-primary-rgb: 0,212,255; --brand-secondary-rgb: 75,108,255; --brand-accent-rgb: 162,89,255; --brand-highlight-rgb: 255,77,141; /* Marca aplicada a TEXTO. Sobre fondo oscuro el cian se lee bien (11,2:1), pero sobre blanco baja a 1,7:1 y resulta ilegible. Por eso el texto de marca tiene su propio token, que el tema claro oscurece. --brand-primary → rellenos, bordes, iconos, resplandores --brand-primary-text → texto y enlaces */ --brand-primary-text: #00d4ff; --gradient-brand: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); --gradient-brand-full: linear-gradient(135deg, var(--brand-primary), var(--brand-tertiary), var(--brand-highlight)); --gradient-brand-soft: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .14), rgba(var(--brand-accent-rgb), .14)); /* --------------------------------------------------------------- 2 · COLOR — Semántico Cada estado trae tres piezas: texto, fondo y borde. Así un badge o una alerta se componen sin inventar tonos sobre la marcha. --------------------------------------------------------------- */ --success: #6ec588; --success-bg: rgba(110,197,136,.12); --success-border: rgba(110,197,136,.32); --danger: #e36a6a; --danger-bg: rgba(227,106,106,.12); --danger-border: rgba(227,106,106,.32); --warning: #f5c85a; --warning-bg: rgba(245,200,90,.12); --warning-border: rgba(245,200,90,.32); --info: #00d4ff; --info-bg: rgba(0,212,255,.10); --info-border: rgba(0,212,255,.30); /* --------------------------------------------------------------- 3 · TIPOGRAFÍA Tres familias con papeles que no se solapan: display — Fraunces. Títulos de página y cifras destacadas. Solo en pesos ligeros: su carácter está en las formas, no en el grosor. Nunca en texto corrido ni en botones. body — Plus Jakarta Sans. Todo el interfaz: etiquetas, párrafos, botones, tablas. mono — JetBrains Mono. Datos, IDs, código, eyebrows en versalitas. Señala "esto es un dato, no una frase". --------------------------------------------------------------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; /* Escala tipográfica · razón 1.25 desde 16px, redondeada a valores legibles. No se usan tamaños fuera de esta lista. */ --text-2xs: 0.6875rem; /* 11px · eyebrows, versalitas */ --text-xs: 0.75rem; /* 12px · metadatos, ayudas */ --text-sm: 0.875rem; /* 14px · etiquetas, tablas, botones */ --text-base:1rem; /* 16px · cuerpo por defecto */ --text-md: 1.125rem; /* 18px · entradilla */ --text-lg: 1.375rem; /* 22px · título de tarjeta */ --text-xl: 1.75rem; /* 28px · título de sección */ --text-2xl: 2.25rem; /* 36px · título de página */ --text-3xl: 3rem; /* 48px · cifras de portada */ --leading-tight: 1.15; /* titulares */ --leading-snug: 1.35; /* subtítulos, tablas */ --leading-normal: 1.6; /* texto corrido */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.015em; /* titulares grandes */ --tracking-normal: 0; --tracking-wide: 0.08em; /* botones pequeños */ --tracking-caps: 0.16em; /* eyebrows en versalitas */ /* --------------------------------------------------------------- 4 · ESPACIADO — base 4px Todo margen, padding y hueco sale de esta escala. Si algo "pide" un valor intermedio, casi siempre es que el componente está mal medido, no que falte un token. --------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px · separación entre icono y texto */ --space-2: 0.5rem; /* 8px · interior de elementos compactos */ --space-3: 0.75rem; /* 12px · interior de inputs y botones */ --space-4: 1rem; /* 16px · hueco base entre elementos */ --space-5: 1.5rem; /* 24px · interior de tarjetas */ --space-6: 2rem; /* 32px · entre bloques */ --space-7: 3rem; /* 48px · entre secciones */ --space-8: 4rem; /* 64px · márgenes de página */ /* --------------------------------------------------------------- 5 · FORMA Radios progresivos: cuanto mayor la superficie, mayor el radio. Un botón y una tarjeta no comparten redondeo. --------------------------------------------------------------- */ --radius-xs: 4px; /* etiquetas, chips */ --radius-sm: 8px; /* inputs, botones */ --radius-md: 12px; /* tarjetas pequeñas, menús */ --radius-lg: 16px; /* paneles */ --radius-xl: 20px; /* tarjetas destacadas, modales */ --radius-pill: 999px; /* badges de estado, avatares */ --border-width: 1px; /* --------------------------------------------------------------- 6 · ELEVACIÓN Cuatro niveles y no más. La sombra indica distancia respecto al fondo, no importancia: un elemento no sube de nivel por ser relevante, sino por flotar por encima de otro. --------------------------------------------------------------- */ --elevation-1: 0 2px 8px rgba(0,0,0,.18); /* reposo: tarjetas */ --elevation-2: 0 6px 24px rgba(0,0,0,.24); /* hover, menús */ --elevation-3: 0 16px 48px rgba(0,0,0,.32); /* modales, popovers */ --elevation-4: 0 24px 70px rgba(0,0,0,.40); /* diálogos a pantalla */ /* Resplandor de marca: reservado al elemento principal de la pantalla. Si aparece dos veces, deja de significar algo. */ --glow-brand: 0 8px 30px rgba(var(--brand-primary-rgb), .28); /* --------------------------------------------------------------- 7 · FOCO — accesibilidad Siempre visible con teclado. No se elimina nunca; si estorba visualmente, se ajusta el offset, no se quita. --------------------------------------------------------------- */ --focus-ring: 0 0 0 3px rgba(var(--brand-primary-rgb), .45); --focus-offset: 2px; /* --------------------------------------------------------------- 8 · MOVIMIENTO Rápido para respuesta directa, lento para aparición. La curva "exit" arranca decidida y frena suave: da sensación de precisión. --------------------------------------------------------------- */ --duration-instant: 120ms; /* cambio de color, hover */ --duration-fast: 200ms; /* despliegues pequeños */ --duration-base: 320ms; /* transiciones de panel */ --duration-slow: 600ms; /* entradas al hacer scroll */ --ease-exit: cubic-bezier(.16, 1, .3, 1); --ease-inout: cubic-bezier(.4, 0, .2, 1); /* --------------------------------------------------------------- 9 · CAPAS Números con hueco entre sí para poder intercalar sin renumerar. Prohibido escribir un z-index literal en un componente. --------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; /* cabeceras de tabla fijas */ --z-nav: 200; /* barra lateral, navegación */ --z-dropdown: 300; /* menús desplegables */ --z-overlay: 400; /* velo de fondo */ --z-modal: 500; /* diálogos */ --z-toast: 600; /* avisos temporales */ /* -------------------------------------------------------------- 10 · DISPOSICIÓN -------------------------------------------------------------- */ --container-max: 1280px; --sidebar-width: 260px; --header-height: 64px; --content-max: 72ch; /* longitud de línea legible */ } /* ===================================================================== TEMA CLARO Solo cambian superficies, texto y sombras. Los colores de marca y los semánticos se mantienen para que la identidad no dependa del tema; únicamente se ajustan los fondos translúcidos, que sobre blanco necesitan algo más de opacidad para conservar contraste. ===================================================================== */ html[data-theme="light"] { /* Cian oscurecido: 4,70:1 sobre #fafafa, cumple AA en texto normal. Conserva el tono de la marca, solo baja la luminosidad. */ --brand-primary-text: #007a9e; --success-bg: rgba(47,158,86,.12); --success-border: rgba(47,158,86,.35); --success: #2f9e56; --danger: #c94a4a; --danger-bg: rgba(201,74,74,.10); --danger-border: rgba(201,74,74,.32); --warning: #d99a12; --warning-bg: rgba(217,154,18,.12); --warning-border: rgba(217,154,18,.35); --info: #0090b8; --info-bg: rgba(0,144,184,.10); --info-border: rgba(0,144,184,.30); --elevation-1: 0 2px 8px rgba(0,0,0,.05); --elevation-2: 0 6px 24px rgba(0,0,0,.08); --elevation-3: 0 16px 48px rgba(0,0,0,.12); --elevation-4: 0 24px 70px rgba(0,0,0,.16); } /* ===================================================================== BASE ACCESIBLE Suelo de calidad que se aplica solo, sin que nadie tenga que acordarse de él en cada componente. ===================================================================== */ /* Foco visible únicamente en navegación por teclado */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand-primary); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); } /* Respetar la preferencia del sistema de reducir movimiento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }