/* 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; /* Esquinas rectas: MASTER-DESIGN seccion 1 y 5, y las cuatro referencias de design/handoff-superficies/reference/ (933 elementos, cero con radio). Los circulos deliberados (avatares, pips, spinner) NO pasan por estos tokens: usan 50% directo. */ --r-sm:0; --r:0; --r-lg:0; --r-pill:0; --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. LA PAGINA ES EL TONO MAS HONDO y todo sube desde ahi: panel, relleno, relieve. Estuvo al reves —`--ground:#36435B` contra `--panel:#303C51`, 1.12:1— y con eso el riel y la cabecera de hq, crm, nora, rita y facto se fundian con la pagina: en una pantalla con poca luz no se veia donde acababa la navegacion y empezaba el contenido. Es la misma rampa que ya corrio `cuenta/base.css`, con el mismo suelo, para que el sistema tenga UNA rampa oscura y no dos aproximaciones al mismo problema: pagina #202B40 · panel/riel #303C51 (1.28:1) · relleno #3E4C66 (1.64:1) · #44526E. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#202B40; --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:#202B40; --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)} /* Esquinas rectas en todo. El radio por superficie que hubo aquí contradecía el MASTER y hacía que `.btn` le ganara por especificidad al `border-radius:0` de nucleo.css. */ .btn,.pill,.card,.panel,input,select,textarea{border-radius:0}