/* NORTIA · tokens.css Fuente de verdad de tokens NORTIA (toolkit de César). Las superficies (index/crm/nora/rita/erp/mission-control/roadmap) mapean sus nombres legacy a este vocabulario canónico en vez de duplicar los valores hex. design-system/_shared.css (los previews del sistema) refleja estos mismos valores por separado, por sincronía manual — ver su cabecera. Vocabulario: --ground/--panel/--fill/--fill-2/--ink/--ink-2/--ink-3/ --hair/--line/--accent/--accent-ink/--accent-solid/--accent-solid-hover/ --on-accent/--tint/--ok/--ok-ink/--ok-tint/--warn/--warn-ink/--warn-tint/ --bad/--bad-ink/--bad-tint/--shadow/--sans/--serif/--mono. Claro por defecto; oscuro vía prefers-color-scheme Y vía [data-theme] (para que completo o un panel "night" anidado puedan pedirlo explícitamente, con el mismo mecanismo que ya usan las páginas). */ /* ── Tipografía propia ─────────────────────────────────────────────────────── Las tres superficies pedían las fuentes a fonts.googleapis.com con un en el , que bloquea la primera pintada: si Google tardaba, la pantalla se quedaba en blanco, y si no contestaba, en blanco para siempre. Ahora se sirven desde el mismo origen y con font-display:swap, así que el texto sale de inmediato con la tipografía del sistema y se cambia sola cuando la fuente llega. Los nombres respetan el regex de /vendor/fonts/. Inter es variable: un archivo cubre de 300 a 600. */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:300 600; font-display:swap; src:url('/vendor/fonts/Inter-var.woff2') format('woff2') } @font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/vendor/fonts/Poppins-600.woff2') format('woff2') } @font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('/vendor/fonts/Poppins-700.woff2') format('woff2') } /* index.html pide Poppins 800 y las superficies no: si el juego local se armara solo con 600 y 700, los titulares del login cambiarían de peso al arreglar. */ @font-face{ font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('/vendor/fonts/Poppins-800.woff2') format('woff2') } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/vendor/fonts/IBMPlexMono-400.woff2') format('woff2') } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/vendor/fonts/IBMPlexMono-500.woff2') format('woff2') } /* ============================================================================ HUESO Y AZUL — sistema vigente desde el 14/08/2026 (decisión de Jan). Sustituye al kit anterior (Warm White + Night, esquinas rectas, peso 300). DOS SUELOS: hueso la página, el marketing, los formularios y todo lo que se imprime azul el instrumento: riel, cabecera de app, indicadores, tablas y chats Los nombres VIEJOS (--ground, --ink, --accent…) se conservan como alias sobre los valores nuevos: el núcleo tiene 375 referencias y así se repintan todas sin tocar una línea de lógica. Los nombres NUEVOS se agregan abajo para que el markup que sale de Claude Design funcione tal cual, sin traducir tokens. Fuente: businesses/Agentes IA/design-system/_shared.css del vault. ============================================================================ */ :root{ /* --- vocabulario nuevo --- */ --hueso:#EDE7DA; --hueso-alto:#F5F1E8; --hueso-hondo:#E1D9C8; --linea:#D9D1BF; --linea-fuerte:#C6BCA5; --tinta:#0F1A2E; --tinta-2:#3D4E66; --tinta-3:#4A5B73; --azul:#36435B; --azul-hondo:#303C51; --azul-alto:#3E4C66; --linea-azul:rgba(255,255,255,.15); --linea-azul-fuerte:rgba(255,255,255,.28); --sobre:#FFFFFF; --sobre-2:#E8EDF5; --sobre-3:#B6C2D4; --norte:#2F6DFF; --norte-solido:#2B66F5; --norte-solido-h:#1F52CF; --norte-tinta:#1F52CF; --norte-claro:#93B7FF; --norte-lavado:rgba(147,183,255,.14); --norte-lavado-2:rgba(147,183,255,.26); --norte-lavado-hu:rgba(31,82,207,.10); --verde:#3FD39E; --ambar:#F0B45E; --coral:#FF947B; --verde-tinta:#1A6A4F; --ambar-tinta:#80510F; --coral-tinta:#93341F; --apagado:#B6C2D4; --chip-verde-az:#223F35; --chip-verde-az-t:#93E6C8; --chip-ambar-az:#3F3322; --chip-ambar-az-t:#F4C686; --chip-coral-az:#3F2722; --chip-coral-az-t:#FF947A; --chip-norte-az:#222C3F; --chip-norte-az-t:#7AA7FF; --chip-neutro-az:#222E3F; --chip-neutro-az-t:#ACB9CE; --chip-verde-hu:#D6E8E0; --chip-verde-hu-t:#17624A; --chip-ambar-hu:#E8DDC8; --chip-ambar-hu-t:#734910; --chip-coral-hu:#E9D6CC; --chip-coral-hu-t:#7C2C1A; --chip-norte-hu:#D5DCEC; --chip-norte-hu-t:#183C99; --chip-neutro-hu:#DCD9D0; --chip-neutro-hu-t:#3F4E63; --sp-05:4px; --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px; --sp-6:48px; --sp-8:64px; --sp-10:80px; --r-sm:6px; --r:9px; --r-lg:13px; --r-pill:999px; --e1:0 1px 2px rgba(28,36,52,.10), 0 8px 18px -12px rgba(28,36,52,.30); --e2:0 1px 2px rgba(28,36,52,.12), 0 20px 42px -24px rgba(28,36,52,.50); --e3:0 2px 4px rgba(28,36,52,.14), 0 30px 60px -26px rgba(28,36,52,.62); --display-f:'Poppins','Inter',sans-serif; /* --- alias del vocabulario viejo sobre los valores nuevos --- */ --ground:#EDE7DA; --panel:#F5F1E8; --fill:#E1D9C8; --fill-2:#DCD4C2; --ink:#0F1A2E; --ink-2:#3D4E66; --ink-3:#4A5B73; --hair:#D9D1BF; --line:#C6BCA5; --accent:#2F6DFF; --accent-ink:#1F52CF; --accent-solid:#2B66F5; --accent-solid-hover:#1F52CF; --on-accent:#FFFFFF; --tint:#D5DCEC; --ok:#1A6A4F; --ok-ink:#17624A; --ok-tint:#D6E8E0; --warn:#80510F; --warn-ink:#734910; --warn-tint:#E8DDC8; --bad:#93341F; --bad-ink:#7C2C1A; --bad-tint:#E9D6CC; --shadow:0 20px 42px -24px rgba(28,36,52,.50); --sans:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif; --serif:'Poppins',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; } /* El modo oscuro del app pasa a ser el AZUL, que es el suelo del instrumento. No es una inversión: es el otro suelo del par, con su propia rampa. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#36435B; --panel:#303C51; --fill:#3E4C66; --fill-2:#44526E; --ink:#FFFFFF; --ink-2:#E8EDF5; --ink-3:#B6C2D4; --hair:rgba(255,255,255,.15); --line:rgba(255,255,255,.28); --accent:#2F6DFF; --accent-ink:#93B7FF; --accent-solid:#2B66F5; --accent-solid-hover:#1F52CF; --on-accent:#FFFFFF; --tint:rgba(147,183,255,.20); --ok:#3FD39E; --ok-ink:#93E6C8; --ok-tint:#223F35; --warn:#F0B45E; --warn-ink:#F4C686; --warn-tint:#3F3322; --bad:#FF947B; --bad-ink:#FF947A; --bad-tint:#3F2722; --shadow:0 20px 42px -24px rgba(6,12,22,.85); } } [data-theme="dark"]{ --ground:#36435B; --panel:#303C51; --fill:#3E4C66; --fill-2:#44526E; --ink:#FFFFFF; --ink-2:#E8EDF5; --ink-3:#B6C2D4; --hair:rgba(255,255,255,.15); --line:rgba(255,255,255,.28); --accent:#2F6DFF; --accent-ink:#93B7FF; --accent-solid:#2B66F5; --accent-solid-hover:#1F52CF; --on-accent:#FFFFFF; --tint:rgba(147,183,255,.20); --ok:#3FD39E; --ok-ink:#93E6C8; --ok-tint:#223F35; --warn:#F0B45E; --warn-ink:#F4C686; --warn-tint:#3F3322; --bad:#FF947B; --bad-ink:#FF947A; --bad-tint:#3F2722; --shadow:0 20px 42px -24px rgba(6,12,22,.85); } /* ── El suelo del instrumento dentro de una página de hueso ────────────────── Hueso y azul es un PAR: la página es papel y el instrumento es azul. Si la app queda de hueso de borde a borde, se perdió el par y queda un documento pálido, que es justo lo que se veía al migrar los tokens. Estas reglas no reescriben el núcleo: redefinen los alias DENTRO del contenedor, y como el núcleo ya lee --ink, --panel y --hair por nombre, todo lo que cuelga de ahí se re-tinta solo. Los valores son los mismos del azul de arriba. */ .topbar, .kpis, .tablawrap, .cola-lista{ --ground:#36435B; --panel:#303C51; --fill:#3E4C66; --fill-2:#44526E; --ink:#FFFFFF; --ink-2:#E8EDF5; --ink-3:#B6C2D4; --hair:rgba(255,255,255,.15); --line:rgba(255,255,255,.28); --accent:#2F6DFF; --accent-ink:#93B7FF; --accent-solid:#2B66F5; --accent-solid-hover:#1F52CF; --on-accent:#FFFFFF; --tint:rgba(147,183,255,.20); --ok:#3FD39E; --ok-ink:#93E6C8; --ok-tint:#223F35; --warn:#F0B45E; --warn-ink:#F4C686; --warn-tint:#3F3322; --bad:#FF947B; --bad-ink:#FF947A; --bad-tint:#3F2722; background:#36435B; color:#FFFFFF; } /* Lo que además hay que corregir de forma (bordes, el logo) va al final del núcleo, porque el núcleo se inyecta después de este archivo y ahí sí se pisan. */ [data-theme="light"]{ --ground:#EDE7DA; --panel:#F5F1E8; --fill:#E1D9C8; --fill-2:#DCD4C2; --ink:#0F1A2E; --ink-2:#3D4E66; --ink-3:#4A5B73; --hair:#D9D1BF; --line:#C6BCA5; --accent:#2F6DFF; --accent-ink:#1F52CF; --accent-solid:#2B66F5; --accent-solid-hover:#1F52CF; --on-accent:#FFFFFF; --tint:#D5DCEC; --ok:#1A6A4F; --ok-ink:#17624A; --ok-tint:#D6E8E0; --warn:#80510F; --warn-ink:#734910; --warn-tint:#E8DDC8; --bad:#93341F; --bad-ink:#7C2C1A; --bad-tint:#E9D6CC; --shadow:0 20px 42px -24px rgba(28,36,52,.50); } /* ── Primitivas del sistema nuevo ───────────────────────────────────────────── Para que el markup que sale de Claude Design funcione pegado tal cual. */ .on-azul,.on-hueso{min-width:0} .on-azul{background:var(--azul);border-radius:var(--r-lg);box-shadow:var(--e2);color:var(--sobre-2)} .on-hueso{background:var(--hueso-alto);border:1px solid var(--linea);border-radius:var(--r-lg); box-shadow:var(--e1);color:var(--tinta-2)} .on-azul .t-title,.on-azul .t-headline{color:var(--sobre)} .on-azul .t-body,.on-azul .t-body-sm{color:var(--sobre-2)} .on-azul .t-bearing{color:var(--sobre-3)} .t-display{font-family:var(--display-f);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.02;letter-spacing:-.034em;color:var(--tinta);margin:0} .t-headline{font-family:var(--display-f);font-weight:700;font-size:1.9rem;line-height:1.12; letter-spacing:-.028em;color:var(--tinta);margin:0} .t-title{font-family:var(--display-f);font-weight:700;font-size:1.15rem;line-height:1.25; letter-spacing:-.02em;color:var(--tinta);margin:0} .t-subtitle{font-weight:600;font-size:.95rem;color:var(--tinta-2);margin:0} .t-body{font-size:1rem;color:var(--tinta-2);margin:0} .t-body-sm{font-size:.875rem;color:var(--tinta-2);margin:0} .t-label{font-weight:600;font-size:.78rem;color:var(--tinta-2);margin:0} .t-bearing{font-family:var(--mono);font-weight:600;font-size:.69rem;letter-spacing:.15em; text-transform:uppercase;color:var(--tinta-3);font-variant-numeric:tabular-nums;margin:0} .t-data{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums; letter-spacing:-.02em;color:var(--tinta)} /* Chips OPACOS: su contraste no depende de la fila que tengan debajo, así el hover no los rompe. Fondo y texto salen del mismo tono. */ .chip{display:inline-flex;align-items:center;gap:.4em;padding:.2em .62em;border-radius:var(--r-pill); font-size:.75rem;font-weight:600;white-space:nowrap;line-height:1.5} .chip--info{background:var(--chip-norte-hu);color:var(--chip-norte-hu-t)} .chip--good{background:var(--chip-verde-hu);color:var(--chip-verde-hu-t)} .chip--attn{background:var(--chip-ambar-hu);color:var(--chip-ambar-hu-t)} .chip--bad{background:var(--chip-coral-hu);color:var(--chip-coral-hu-t)} .chip--idle{background:var(--chip-neutro-hu);color:var(--chip-neutro-hu-t)} .on-azul .chip--info{background:var(--chip-norte-az);color:var(--chip-norte-az-t)} .on-azul .chip--good{background:var(--chip-verde-az);color:var(--chip-verde-az-t)} .on-azul .chip--attn{background:var(--chip-ambar-az);color:var(--chip-ambar-az-t)} .on-azul .chip--bad{background:var(--chip-coral-az);color:var(--chip-coral-az-t)} .on-azul .chip--idle{background:var(--chip-neutro-az);color:var(--chip-neutro-az-t)} .pip{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block} .pip--good{background:var(--verde-tinta)} .pip--attn{background:var(--ambar-tinta)} .pip--bad{background:var(--coral-tinta)} .pip--idle{background:var(--tinta-3)} .on-azul .pip--good{background:var(--verde)} .on-azul .pip--attn{background:var(--ambar)} .on-azul .pip--bad{background:var(--coral)} .on-azul .pip--idle{background:var(--sobre-3)} /* Las dos piezas del sistema que la app todavía no tenía y el rediseño usa: el botón pequeño de las barras de acciones de una ficha, y el marco de tabla que hace scroll solo, sin empujar la página de lado. */ .btn--sm{padding:.32em .7em;font-size:.8rem;min-height:30px} .tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);max-width:100%} .tbl-wrap table{width:100%;border-collapse:collapse} .btn--primary{background:var(--norte-solido);color:#fff;border-color:var(--norte-solido)} .btn--primary:hover{background:var(--norte-solido-h);border-color:var(--norte-solido-h)} .btn--secondary{border:1px solid var(--linea-fuerte);color:var(--tinta);background:var(--hueso-alto)} .btn--ghost{color:var(--norte-tinta);background:transparent;border-color:transparent} .on-azul .btn--secondary{border-color:var(--linea-azul-fuerte);color:var(--sobre-2);background:var(--azul-alto)} .on-azul .btn--ghost{color:var(--norte-claro)} /* El kit anterior imponía esquinas rectas en todo. Con un solo radio, un botón, una tarjeta y un panel se leen como el mismo objeto: el radio ahora crece con la superficie. Se sobreescriben aquí, después del núcleo. */ .btn,.pill,.card,.panel,input,select,textarea{border-radius:var(--r-sm)}