/* ════════════════════════════════════════════════════════════════════════════ TEMA «NEXLINK» — capa de exploración (rama diseno-nexlink, 23-09-2026) ──────────────────────────────────────────────────────────────────────────── Reproduce el sistema visual de la plantilla NexLink (LayoutDrop, Bootstrap 5.3), medido en el navegador sobre sus 15 páginas: · Tipografía Instrument Sans, cuerpo a 14 px / 500, títulos 600 · Primario #5955D1 (índigo) con degradado a #7008E7 (violeta) · Superficies página #FDFDFF, tarjetas blancas, borde #EEEEF3, radio 10 · Sombras casi planas: 0 5px 10px rgba(2,2,76,.02) · Tablas cabecera en píldora gris (#F2F2F6), sin versalitas · Badges fondo «subtle» + texto saturado, radio 6, sin borde · Modales radio 10, sin borde, velo gris azulado #A6ADBF al 60 % · Segmentados cápsula gris con la opción activa en blanco Todo va aquí y nada en index.html: quitar el de este fichero deja la app exactamente como estaba (tag pre-nexlink-2026-09-23). Los tokens llevan !important a propósito. La app escribe --accent, --bg… EN LÍNEA sobre cuando el usuario ha elegido paleta (applyPalette / applyColorTheme), y un estilo en línea solo pierde contra un !important. Se declaran en html Y en body porque body.light redefine los mismos tokens. ════════════════════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS · OSCURO ──────────────────────────────────────────────────── */ html, body { --bg: #282828 !important; --bg2: #282828 !important; --bg3: #232323 !important; --sidebar-bg: #1e1e1e !important; --surface: #1e1e1e !important; --surface2: #262626 !important; --border: #2f2f33 !important; --border2: #3d3d44 !important; --accent: #5955d1 !important; --accent2: #7008e7 !important; --accent3: #9b99e3 !important; --emph: #9b99e3 !important; --green: #22b883 !important; --yellow: #f5a70d !important; --red: #f83636 !important; --orange: #f97316 !important; --purple: #a96bf1 !important; --blue: #5b9bff !important; --text: #e4e4ea !important; --text2: #a8a8b8 !important; --text3: #8c8c9c !important; --on-tint-red: #fb8686 !important; --on-tint-amber: #f9ca6e !important; --on-tint-green: #66c2a3 !important; --on-tint-blue: #9cc2ff !important; --on-tint-accent: #9b99e3 !important; --on-tint-purple: #c7a2f6 !important; --on-tint-orange: #fdba74 !important; --on-accent: #ffffff !important; --badge-emerald-bg: #001f14 !important; --badge-emerald-text: #66c2a3 !important; --badge-emerald-border: transparent !important; --badge-amber-bg: #312103 !important; --badge-amber-text: #f9ca6e !important; --badge-amber-border: transparent !important; --badge-rose-bg: #320b0b !important; --badge-rose-text: #fb8686 !important; --badge-rose-border: transparent !important; --badge-orange-bg: #33180a !important; --badge-orange-text: #fdba74 !important; --badge-orange-border: transparent !important; --badge-cyan-bg: #0d1b33 !important; --badge-cyan-text: #9cc2ff !important; --badge-cyan-border: transparent !important; --badge-blue-bg: #0d1b33 !important; --badge-blue-text: #9cc2ff !important; --badge-blue-border: transparent !important; --badge-violet-bg: #16022e !important; --badge-violet-text: #c7a2f6 !important; --badge-violet-border: transparent !important; --badge-teal-bg: #12112a !important; --badge-teal-text: #9b99e3 !important; --badge-teal-border: transparent !important; --badge-gray-bg: #2a2a2e !important; --badge-gray-text: #b0b0bc !important; --badge-gray-border: transparent !important; --glass-bg: #1e1e1e !important; --glass-border: #2f2f33 !important; --glass-border-hover: #3d3d44 !important; --ctx-deep: #5955d1 !important; --ctx-deep2: #7008e7 !important; --shadow-sm: 0 5px 10px rgba(0,0,0,.25) !important; --shadow-card: 0 5px 10px rgba(0,0,0,.12) !important; --shadow-xl: 0 4px 18px rgba(0,0,0,.45) !important; --nx-th-bg: #262626; --nx-heading: #f0f0f4; --nx-subtle: #12112a; /* primary-bg-subtle */ --nx-velo: rgba(10,10,14,.62); } /* ── 2. TOKENS · CLARO ───────────────────────────────────────────────────── */ html.light, body.light, body.light:not([data-palette]) { --bg: #fdfdff !important; --bg2: #fdfdff !important; --bg3: #f2f2f6 !important; --sidebar-bg: #ffffff !important; --surface: #ffffff !important; --surface2: #f8f8fb !important; --border: #eeeef3 !important; --border2: #dadadd !important; --accent: #5955d1 !important; --accent2: #7008e7 !important; --accent3: #4744a7 !important; --emph: #5955d1 !important; --green: #009966 !important; --yellow: #f5a70d !important; --red: #f83636 !important; --orange: #f97316 !important; --purple: #7008e7 !important; --blue: #2e90fa !important; --text: #0c243c !important; --text2: #696981 !important; --text3: #75758c !important; /* Texto sobre su propio lavado. NexLink pinta el tono puro (#F5A70D sobre #FEFAF0 da 2:1); aquí va un paso más hondo para no bajar de 4.5:1. */ --on-tint-red: #c81e1e !important; --on-tint-amber: #9a6200 !important; --on-tint-green: #007a52 !important; --on-tint-blue: #1d6fd6 !important; --on-tint-accent: #4744a7 !important; --on-tint-purple: #5a06b9 !important; --on-tint-orange: #b4500f !important; --on-accent: #ffffff !important; --badge-emerald-bg: #f0f9f6 !important; --badge-emerald-text: #007a52 !important; --badge-emerald-border: transparent !important; --badge-amber-bg: #fef7e6 !important; --badge-amber-text: #9a6200 !important; --badge-amber-border: transparent !important; --badge-rose-bg: #fff3f3 !important; --badge-rose-text: #c81e1e !important; --badge-rose-border: transparent !important; --badge-orange-bg: #fff4ec !important; --badge-orange-text: #b4500f !important; --badge-orange-border: transparent !important; --badge-cyan-bg: #eff6ff !important; --badge-cyan-text: #1d6fd6 !important; --badge-cyan-border: transparent !important; --badge-blue-bg: #eff6ff !important; --badge-blue-text: #1d6fd6 !important; --badge-blue-border: transparent !important; --badge-violet-bg: #f6f0fe !important; --badge-violet-text: #5a06b9 !important; --badge-violet-border: transparent !important; --badge-teal-bg: #f5f5fc !important; --badge-teal-text: #4744a7 !important; --badge-teal-border: transparent !important; --badge-gray-bg: #f2f2f4 !important; --badge-gray-text: #52526a !important; --badge-gray-border: transparent !important; --glass-bg: #ffffff !important; --glass-border: #eeeef3 !important; --glass-border-hover: #dadadd !important; --ctx-deep: #5955d1 !important; --ctx-deep2: #7008e7 !important; --shadow-sm: 0 5px 10px rgba(0,0,0,.05) !important; --shadow-card: 0 5px 10px rgba(2,2,76,.02) !important; --shadow-xl: 0 4px 18px rgba(45,42,60,.15) !important; --nx-th-bg: rgba(242,242,246,.6); --nx-heading: #0c243c; --nx-subtle: #f5f5fc; --nx-velo: rgba(166,173,191,.6); } /* ── 3. ESCALAS (iguales en los dos temas) ───────────────────────────────── */ :root, body { /* Cuerpo a 14 px como NexLink; lo comprimido se queda en 12/13. */ --fs-1: 12px !important; --fs-2: 13px !important; --fs-3: 14px !important; --fs-4: 17px !important; --fs-5: 20px !important; --fs-6: 28px !important; --radius: 10px !important; --radius-sm: 8px !important; --r-xs: 4px !important; --r-sm: 6px !important; --r-md: 6px !important; --r-lg: 8px !important; --r-xl: 10px !important; --r-2xl: 6px !important; --control-h: 41px !important; --font-mono: 'Instrument Sans', sans-serif !important; --nx-font: 'Instrument Sans', sans-serif; } /* ── 4. TIPOGRAFÍA ─────────────────────────────────────────────────────────── applyFont() ya pone Instrument Sans por defecto (app.js). NexLink no usa monoespaciada para los datos: las cifras van en la misma familia con dígitos tabulares. Los estilos en línea que citan una mono se reescriben aquí; el selector de atributo gana al `*` con !important que inyecta applyFont. */ body { font-weight: 500; -webkit-font-smoothing: antialiased; } /* `html body` delante: applyFont inyecta su