/* ===================================================================== tokens.css — Design tokens estilo IBM Carbon Design System Tema claro (White) por defecto + tema oscuro (Gray 100) preparado. Cambia el tema con (ver app.js / AppHeader). ===================================================================== */ /* ---- Tipografia ---- IBM Plex se carga con desde el , no con @import: un @import dentro del CSS no se descubre hasta haber descargado y parseado este archivo, encadenando dos viajes antes de pintar texto. Medido en local, la hoja de fuentes no se pedia hasta los 965ms y los .woff2 hasta los 1855ms. El con preconnect los lanza de inmediato. --font-sans y --font-mono quedan mas abajo, con su pila de reserva. */ :root { /* ---------- Paleta Carbon ---------- */ --cds-white: #ffffff; /* Acentos de marca. El branding por empresa elige una familia y de sus pasos salen los tokens: 10 fondo suave, 40 tinta en tema oscuro, 60 base, 80 activo. El hover es el medio paso entre el 60 y el 70, que Carbon deja fuera de la escala. Ver config/branding.php */ --cds-blue-10: #edf5ff; --cds-blue-20: #d0e2ff; --cds-blue-40: #78a9ff; --cds-blue-50: #4589ff; --cds-blue-60: #0f62fe; /* interactive primary */ --cds-blue-70: #0043ce; --cds-blue-80: #002d9c; --cds-blue-90: #001d6c; --cds-cyan-10: #e5f6ff; --cds-cyan-20: #bae6ff; --cds-cyan-40: #33b1ff; --cds-cyan-50: #1192e8; --cds-cyan-60: #0072c3; --cds-cyan-70: #00539a; --cds-cyan-80: #003a6d; --cds-teal-10: #d9fbfb; --cds-teal-20: #9ef0f0; --cds-teal-40: #08bdba; --cds-teal-50: #009d9a; --cds-teal-60: #007d79; --cds-teal-70: #005d5d; --cds-teal-80: #004144; --cds-purple-10: #f6f2ff; --cds-purple-20: #e8daff; --cds-purple-40: #be95ff; --cds-purple-50: #a56eff; --cds-purple-60: #8a3ffc; --cds-purple-70: #6929c4; --cds-purple-80: #491d8b; --cds-magenta-10: #fff0f7; --cds-magenta-20: #ffd6e8; --cds-magenta-40: #ff7eb6; --cds-magenta-60: #d02670; --cds-magenta-70: #9f1853; --cds-magenta-80: #740937; /* Estados. Reservados por Carbon para exito, error y advertencia: no se ofrecen como acento de marca para que un boton no se confunda con una confirmacion */ --cds-green-10: #defbe6; --cds-green-20: #a7f0ba; --cds-green-40: #42be65; --cds-green-50: #24a148; --cds-green-60: #198038; --cds-green-70: #0e6027; --cds-red-10: #fff1f1; --cds-red-20: #ffd7d9; --cds-red-40: #ff8389; --cds-red-50: #fa4d56; --cds-red-60: #da1e28; --cds-red-70: #a2191f; --cds-red-80: #750e13; --cds-yellow-10: #fcf4d6; --cds-yellow-20: #fddc69; --cds-yellow-30: #f1c21b; /* El paquete oficial IBM_Colors_RGB_HEX_v2.1 trae las familias completas de azul, cian, teal, purpura, magenta, verde, rojo y gris, pero de amarillo y naranja solo incluye un tono cada una: Yellow_30 y Orange_40. El 70 de amarillo se conserva con el valor que ya usaba la notificacion de advertencia; no se ha podido contrastar con la fuente. */ --cds-yellow-70: #684e00; --cds-yellow-60: #8e6a00; --cds-orange-20: #ffd9be; --cds-orange-40: #ff832b; --cds-orange-70: #8a3800; /* Neutros. `cool-gray` es la variante fria que Carbon ofrece junto al gris neutro; la interfaz la usa en un par de superficies. */ --cds-cool-gray-10: #f2f4f8; --cds-cool-gray-20: #dde1e6; --cds-cool-gray-60: #697077; --cds-gray-10: #f4f4f4; --cds-gray-20: #e0e0e0; --cds-gray-30: #c6c6c6; --cds-gray-40: #a8a8a8; --cds-gray-50: #8d8d8d; --cds-gray-60: #6f6f6f; --cds-gray-70: #525252; --cds-gray-80: #393939; --cds-gray-90: #262626; --cds-gray-100: #161616; /* ---------- Tokens semánticos (TEMA CLARO) ---------- */ --background: var(--cds-white); --layer-01: var(--cds-gray-10); --layer-02: var(--cds-white); --layer-hover: #e8e8e8; --layer-selected: var(--cds-gray-20); /* Un escalon por debajo del acento de capa. Es el fondo que Carbon da a la cabecera ordenada y al pasar por encima de una ordenable: sobre layer-accent hay que oscurecer, no aclarar, o el resalte va al reves. */ --layer-selected-hover: #d1d1d1; /* Carbon distingue la capa del acento de capa: layer-01 es el fondo de un panel y layer-accent-01 es un escalon mas oscuro, reservado para cosas como la cabecera de una tabla. Faltaba, y por eso el thead usaba layer-01 y se confundia con el cuerpo. */ --layer-accent: var(--cds-gray-20); /* Carbon distingue el hover de una CAPA (layer-hover, opaco, para superficies apiladas) del hover sobre el FONDO de pagina, que es un velo translucido de gray-50 al 12%. Los controles que se apoyan directamente en el fondo -paginacion, por ejemplo- usan este. */ --background-hover: rgba(141, 141, 141, .12); --field-01: var(--cds-gray-10); --field-02: var(--cds-white); --border-subtle: var(--cds-gray-20); /* El escalon que el token de arriba aplana. `--border-subtle` vale lo que Carbon pide sobre layer-02, que es la superficie de casi todo aqui, pero un acordeon anidado se dibuja sobre layer-01 y alli la linea tiene que ser un paso mas oscura: gray-30, no gray-20, que sobre #f4f4f4 se queda en 1.06 de contraste y desaparece. Solo lo usa quien va sobre layer-01. */ --border-subtle-01: var(--cds-gray-30); --border-strong: var(--cds-gray-50); --border-interactive: var(--cds-blue-60); --text-primary: var(--cds-gray-100); --text-secondary: var(--cds-gray-70); --text-placeholder: var(--cds-gray-40); --text-on-color: var(--cds-white); --text-on-color-disabled: var(--cds-gray-50); --text-helper: var(--cds-gray-60); --text-disabled: var(--cds-gray-30); --link-primary: var(--cds-blue-60); /* Texto de error sobre una capa. No vale --support-error: ese tono esta calibrado para hacer de fondo o de borde, y como tinta sobre la capa oscura se queda en 3,44:1. Carbon sube un escalon la paleta cuando el color de estado hace de texto. */ --text-error: var(--cds-red-60); --interactive: var(--cds-blue-60); /* Foco. components.css lo pedia como `var(--focus, var(--interactive))` y nadie lo habia definido: en tema claro el respaldo acierta por casualidad (Carbon tambien usa blue-60), pero en oscuro Carbon cambia a blanco y el respaldo habria seguido pintando azul sobre gray-100. */ --focus: var(--cds-blue-60); --focus-inset: var(--cds-white); --focus-inverse: var(--cds-white); /* Botones. Los tres primarios y sus hover ya coincidian exactos con Carbon (#0050e6 es blue-60-hover y #474747 es gray-80-hover). Faltaban los estados active, el deshabilitado, el separador y toda la familia tertiary, que Carbon define y aqui no existia. --button-danger-hover estaba en #b81922 y la especificacion dice #b81921. */ --button-primary: var(--cds-blue-60); --button-primary-hover: #0050e6; --button-primary-active: var(--cds-blue-80); --button-secondary: var(--cds-gray-80); --button-secondary-hover: #474747; --button-secondary-active: var(--cds-gray-60); --button-tertiary: var(--cds-blue-60); --button-tertiary-hover: #0050e6; --button-tertiary-active: var(--cds-blue-80); --button-danger-hover: #b81921; --button-danger-active: var(--cds-red-80); --button-disabled: var(--cds-gray-30); --button-separator: var(--cds-gray-20); /* Carbon lo llama button-danger-primary; se conserva el nombre corto que ya usaba el ERP y se anade el oficial como sinonimo. */ --button-danger: var(--cds-red-60); --button-danger-primary: var(--cds-red-60); --button-danger-secondary: var(--cds-red-60); --support-success: var(--cds-green-50); --support-error: var(--cds-red-60); --support-warning: var(--cds-yellow-30); --support-info: var(--cds-blue-60); /* ---------- Tag (etiquetas de estado) ---------- Formula oficial del tema White, de packages/themes/src/dtcg/components/ tag.json: fondo = paso 20 de la familia, texto = paso 70, borde = paso 40. Son colores solidos de la paleta, no capas translucidas: el ERP venia pintando estos fondos con rgba(...,.12-.18) calculados a ojo, que sobre una fila con hover cambian de tono porque dejan pasar el fondo de debajo. Carbon define diez familias de tag y ninguna es amarilla ni naranja. Como el ERP necesita marcar advertencias, --tag-*-warning y --tag-*-caution quedan abajo como EXTENSION PROPIA, construidas con la misma formula 20/70 para que no desentonen. Estan aparte a proposito: quien lea esto debe saber que ese par no viene de Carbon. */ --tag-background-gray: var(--cds-gray-20); --tag-color-gray: var(--cds-gray-100); --tag-background-blue: var(--cds-blue-20); --tag-color-blue: var(--cds-blue-70); --tag-background-green: var(--cds-green-20); --tag-color-green: var(--cds-green-70); --tag-background-red: var(--cds-red-20); --tag-color-red: var(--cds-red-70); --tag-background-purple: var(--cds-purple-20); --tag-color-purple: var(--cds-purple-70); --tag-background-magenta: var(--cds-magenta-20); --tag-color-magenta: var(--cds-magenta-70); --tag-background-teal: var(--cds-teal-20); --tag-color-teal: var(--cds-teal-70); --tag-background-cyan: var(--cds-cyan-20); --tag-color-cyan: var(--cds-cyan-70); /* Extension propia: Carbon no publica tag amarillo ni naranja. */ --tag-background-warning: var(--cds-orange-20); --tag-color-warning: var(--cds-orange-70); --tag-background-caution: var(--cds-yellow-20); --tag-color-caution: var(--cds-yellow-70); --icon-primary: var(--cds-gray-100); --icon-secondary: var(--cds-gray-70); --overlay: rgba(22,22,22,.5); --skeleton-bg: #e5e5e5; --skeleton-shine: var(--cds-gray-10); --shadow-sm: 0 2px 6px rgba(0,0,0,.10); --shadow-md: 0 4px 16px rgba(0,0,0,.16); /* ---------- Layout ---------- */ --header-h: 48px; /* 256px = 32 mini-unidades de 8px, el ancho del side nav expandido de Carbon (ui-shell/side-nav/_side-nav.scss, que lo usa como medida y como tope). Estaba en 280px, que no es una anchura del sistema. El margen izquierdo del contenido cuelga de este mismo token, asi que se corrige solo. */ --sidebar-w: 16rem; --sidebar-collapsed-w: 48px; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* ---------- Movimiento (escala oficial de Carbon) ---------- Los seis pasos y las seis curvas salen de @carbon/motion: packages/motion/src/dtcg/motion.json. Antes habia tres duraciones inventadas (.2s/.3s/.45s) que no correspondian a ningun token de Carbon. Productive es el modo de una herramienta de trabajo: el movimiento informa y se aparta. Expressive queda para lo que debe reclamar atencion, como un error que interrumpe. Un ERP vive casi entero en productive. Entrance y exit no son la misma curva: lo que entra arranca a velocidad cero y desacelera; lo que sale arranca ya en movimiento y acelera al irse. Usar `standard` para las tres es lo que hacia el sistema hasta ahora. */ --dur-fast-01: 70ms; /* microinteraccion: boton, toggle */ --dur-fast-02: 110ms; /* fundido de elementos pequenios */ --dur-moderate-01: 150ms; /* velocidad de transicion por defecto */ --dur-moderate-02: 240ms; /* expansion, toast, avisos del sistema */ --dur-slow-01: 400ms; /* expansion grande, notificacion importante */ --dur-slow-02: 700ms; /* atenuado de fondo, transicion de portada */ --ease-standard: cubic-bezier(.2, 0, .38, .9); --ease-entrance: cubic-bezier(0, 0, .38, .9); --ease-exit: cubic-bezier(.2, 0, 1, .9); --ease-standard-expressive: cubic-bezier(.4, .14, .3, 1); --ease-entrance-expressive: cubic-bezier(0, 0, .3, 1); --ease-exit-expressive: cubic-bezier(.4, .14, 1, 1); /* Alias de compatibilidad. Los 17 usos que ya existian en el CSS apuntan aqui y quedan alineados a Carbon sin tocar cada declaracion. Al migrar esas hojas a los nombres de arriba, estos tres se borran. */ --dur-fast: var(--dur-fast-02); --dur-base: var(--dur-moderate-01); --dur-slow: var(--dur-slow-01); --ease: var(--ease-standard); /* ---------- Acento de marca dinámico (branding por empresa) ---------- */ --brand: var(--cds-blue-60); --brand-soft: var(--cds-blue-10); /* ---------- Escala de espaciado Carbon ---------- Todos los pasos son multiplos de la mini-unidad de 8px (packages/layout/src/index.ts): 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12 y 20 mini-unidades. Del 01 al 09 ya estaban y coinciden exactos; del 10 al 13 faltaban, que son los que Carbon usa para margenes de pagina y separacion entre secciones grandes. */ --sp-01: .125rem; --sp-02: .25rem; --sp-03: .5rem; --sp-04: .75rem; --sp-05: 1rem; --sp-06: 1.5rem; --sp-07: 2rem; --sp-08: 2.5rem; --sp-09: 3rem; --sp-10: 4rem; /* 64px */ --sp-11: 5rem; /* 80px */ --sp-12: 6rem; /* 96px */ --sp-13: 10rem; /* 160px */ /* ---------- Escala tipografica ---------- Carbon type scale sobre una raiz de 16px. Antes de estos tokens la tipografia vivia en las vistas: 2042 declaraciones de `font-size` con 62 valores distintos, entre ellos siete tamanos entre 9,9px y 11,5px que nadie puede distinguir. Los pasos de abajo son el destino al que se absorben; los huerfanos mas comunes son 0.8125rem (13px), que baja a `--type-size-01` o sube a `--type-size-02` segun el rol, y 0.6875rem (11px), que sube a `--type-size-01`. El cuerpo de la aplicacion es `--type-size-02` (14px). En movil se queda corto y ademas dispara el zoom automatico de iOS, que reacciona por debajo de 16px; subirlo es un cambio visual y va aparte. */ --type-size-01: 0.75rem; /* 12px etiquetas, pies, texto de ayuda */ --type-size-02: 0.875rem; /* 14px cuerpo por defecto */ --type-size-03: 1rem; /* 16px cuerpo largo, minimo comodo en movil */ --type-size-04: 1.125rem; /* 18px */ --type-size-05: 1.25rem; /* 20px */ --type-size-06: 1.5rem; /* 24px titulo de pagina */ --type-size-07: 1.75rem; /* 28px */ --type-size-08: 2rem; /* 32px */ --type-size-09: 2.25rem; /* 36px cifras de tarjeta resumen */ /* Roles: nombran el uso, no el tamano. Una vista pide `--type-body`, no 14px, y el dia que el cuerpo suba a 16px no hay que tocar la vista. */ --type-caption: var(--type-size-01); --type-body: var(--type-size-02); --type-body-lg: var(--type-size-03); --type-heading-sm: var(--type-size-05); --type-heading: var(--type-size-06); --type-heading-lg: var(--type-size-07); --type-display: var(--type-size-09); /* Pesos. Carbon define TRES y solo tres (packages/type/src/fontWeight.ts): light 300, regular 400, semibold 600. No existe el 500 ni el 700. El semibold se usa hoy cuatro veces mas que el regular porque la jerarquia se venia construyendo engrosando el texto en vez de con la escala de tamanos. Con la escala disponible, el cuerpo deberia volver a regular. */ --type-weight-light: 300; --type-weight-regular: 400; --type-weight-semibold: 600; /* Alias en retirada. `medium` (500) y `bold` (700) no son pesos de Carbon, pero quedan 315 usos en las vistas y 16 en las hojas propias. Borrarlos dejaria ese texto sin font-weight; por eso apuntan al semibold, que es el peso legal mas cercano y conserva el enfasis que buscaban: ambos se usan casi siempre en encabezados y celdas destacadas. Al migrar las vistas se sustituyen por --type-weight-semibold y se borran. Ojo: en un componente concreto manda su spec, no este alias. El Tag de Carbon, por ejemplo, es label-01 y va en regular 400, no en semibold. */ --type-weight-medium: var(--type-weight-semibold); --type-weight-bold: var(--type-weight-semibold); /* Interlineado */ --type-leading-tight: 1.25; --type-leading-base: 1.43; --type-leading-relaxed: 1.6; /* ---------- Superficie del sidenav (claro por defecto) ---------- */ --sidenav-bg: var(--cds-white); --sidenav-active-bg: var(--cds-gray-10); --sidenav-text: var(--cds-gray-70); --sidenav-text-strong: var(--cds-gray-100); --sidenav-hover: var(--cds-gray-10); --sidenav-border: var(--cds-gray-20); /* ---------- Notificaciones ---------- Fondos y textos de las notificaciones inline de Carbon. Existen como tokens porque el color de estado no puede ir escrito a mano en la vista: en tema oscuro un #defbe6 fijo deja un bloque claro sobre fondo negro. */ --notification-bg-success: var(--cds-green-10); --notification-bg-error: var(--cds-red-10); --notification-bg-warning: #fdf6dd; --notification-bg-info: var(--cds-blue-10); --notification-text-success: var(--cds-green-70); --notification-text-error: var(--cds-red-70); --notification-text-warning: var(--cds-yellow-70); --notification-text-info: var(--cds-blue-70); /* ---------- Carbon for AI ---------- Marcan contenido generado o sugerido por IA. Carbon lo resuelve con "efectos de luz: brillo, resplandor y degradados" naciendo en los bordes del contenedor, con difusion contenida para no perder contraste. El degradado va de blue-60 a purple-60, que ya estan en la paleta. Regla de Carbon: nunca usarlos como decoracion. Si un elemento los lleva, es porque hay IA detras; si el usuario edita el valor, se le quitan. Ver docs/desarrollo/carbon-for-ai.md */ --ai-aura-start: rgba(69, 137, 255, 0.16); --ai-aura-end: rgba(138, 63, 252, 0); --ai-border-start: var(--cds-blue-50); --ai-border-end: var(--cds-purple-60); --ai-inner-shadow: rgba(69, 137, 255, 0.10); --ai-popover-bg: var(--cds-white); --ai-text: var(--cds-blue-70); --ai-skeleton: rgba(69, 137, 255, 0.20); } /* ---------- TEMA OSCURO (Gray 100) ---------- */ [data-theme="dark"] { --background: var(--cds-gray-100); --layer-01: var(--cds-gray-90); --layer-02: var(--cds-gray-80); --layer-hover: #333333; --layer-selected: var(--cds-gray-80); /* g100 tiene dos pasos: layer-accent-01 gray-80, para lo que se apoya en layer-01, y layer-accent-02 gray-70, para lo que se apoya en layer-02. Va el segundo porque las tablas y las tarjetas de esta app son layer-02: con gray-80 la cabecera de la tabla salia del mismo color exacto que su cuerpo y no se distinguia de el. En claro los dos pasos valen gray-20, asi que alli esto no mueve nada. */ --layer-accent: var(--cds-gray-70); --layer-selected-hover: #474747; --field-01: var(--cds-gray-90); --field-02: var(--cds-gray-80); /* Mismo caso. g100 separa border-subtle-01 gray-80, para lo dibujado sobre layer-01, de border-subtle-02 gray-70, para lo dibujado sobre layer-02. Este tema aplana los dos en un token, asi que toma el segundo: tarjetas, tablas, modales, cajones, popovers y barras son todos layer-02, y con gray-80 la linea salia del color exacto de la superficie que tenia debajo. Contraste 1.00: no es que se viera poco, es que no estaba. */ --border-subtle: var(--cds-gray-70); /* El mismo escalon en g100: sobre layer-01 (gray-90) la linea es gray-80. */ --border-subtle-01: var(--cds-gray-80); --border-strong: var(--cds-gray-60); --border-interactive: var(--cds-blue-50); --text-primary: var(--cds-gray-10); --text-secondary: var(--cds-gray-30); --text-placeholder: var(--cds-gray-60); --text-on-color: var(--cds-white); --text-helper: var(--cds-gray-50); --text-disabled: var(--cds-gray-70); --link-primary: var(--cds-blue-40); --text-error: var(--cds-red-40); --interactive: var(--cds-blue-50); /* En g100 el anillo de foco es blanco, no azul. */ --focus: var(--cds-white); --focus-inverse: var(--cds-blue-60); --button-primary: var(--cds-blue-60); --button-primary-hover: #0353e9; --button-secondary: var(--cds-gray-60); --button-secondary-hover:#5e5e5e; --icon-primary: var(--cds-gray-10); --icon-secondary: var(--cds-gray-30); /* Estados: sin redefinir heredaban del tema claro, pensado para fondo blanco. El verde 50 sobre Gray 100 se queda en 4.0:1, por debajo del minimo AA de 4.5:1. Carbon sube un escalon la paleta de estado en oscuro. */ --support-success: var(--cds-green-40); --support-error: var(--cds-red-50); --support-warning: var(--cds-yellow-30); --support-info: var(--cds-blue-50); /* Tag en oscuro: la formula se invierte respecto al tema claro. Carbon g100 pone el fondo en el paso 70 y la tinta en el 20, para conservar el contraste sobre gray-100. El gris es la excepcion: 70 sobre 10. */ --tag-background-gray: var(--cds-gray-70); --tag-color-gray: var(--cds-gray-10); --tag-background-blue: var(--cds-blue-70); --tag-color-blue: var(--cds-blue-20); --tag-background-green: var(--cds-green-70); --tag-color-green: var(--cds-green-20); --tag-background-red: var(--cds-red-70); --tag-color-red: var(--cds-red-20); --tag-background-purple: var(--cds-purple-70); --tag-color-purple: var(--cds-purple-20); --tag-background-magenta: var(--cds-magenta-70); --tag-color-magenta: var(--cds-magenta-20); --tag-background-teal: var(--cds-teal-70); --tag-color-teal: var(--cds-teal-20); --tag-background-cyan: var(--cds-cyan-70); --tag-color-cyan: var(--cds-cyan-20); /* Extension propia, misma inversion. */ --tag-background-warning: var(--cds-orange-70); --tag-color-warning: var(--cds-orange-20); --tag-background-caution: var(--cds-yellow-70); --tag-color-caution: var(--cds-yellow-20); /* El acento de marca acompana a --interactive, que en oscuro ya sube a blue-50. Dejarlo en blue-60 partia en dos los acentos de la interfaz: el borde activo del sidenav se veia mas apagado que sus iconos. */ --brand: var(--cds-blue-50); --overlay: rgba(0,0,0,.65); --skeleton-bg: #333333; --skeleton-shine: #4a4a4a; --shadow-sm: 0 2px 6px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.5); /* Sidenav en tema oscuro */ --brand-soft: rgba(69,137,255,.16); --sidenav-bg: var(--cds-gray-100); --sidenav-active-bg: var(--cds-gray-90); --sidenav-text: var(--cds-gray-30); --sidenav-text-strong: var(--cds-gray-10); --sidenav-hover: var(--cds-gray-90); --sidenav-border: var(--cds-gray-80); /* ---------- Notificaciones (oscuro) ---------- Carbon no aclara el fondo en tema oscuro: usa la capa y deja que el borde y el icono lleven el color de estado. Un tinte pastel sobre fondo negro seria un parche luminoso y perderia la jerarquia de la pagina. */ --notification-bg-success: var(--cds-gray-80); --notification-bg-error: var(--cds-gray-80); --notification-bg-warning: var(--cds-gray-80); --notification-bg-info: var(--cds-gray-80); --notification-text-success: var(--cds-gray-10); --notification-text-error: var(--cds-gray-10); --notification-text-warning: var(--cds-gray-10); --notification-text-info: var(--cds-gray-10); /* ---------- Carbon for AI (oscuro) ---------- Sobre fondo oscuro el resplandor se ve mas, asi que baja de opacidad, y los bordes suben un escalon de la paleta para mantener el contraste. */ --ai-aura-start: rgba(120, 169, 255, 0.13); --ai-aura-end: rgba(165, 110, 255, 0); --ai-border-start: var(--cds-blue-40); --ai-border-end: var(--cds-purple-50); --ai-inner-shadow: rgba(120, 169, 255, 0.08); --ai-popover-bg: var(--cds-gray-90); --ai-text: var(--cds-blue-40); --ai-skeleton: rgba(120, 169, 255, 0.16); } /* ===================================================================== base.css — Reset + tipografía + utilidades base (Carbon) ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--text-primary); background: var(--background); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--link-primary); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } h1,h2,h3,h4,h5 { margin: 0; font-weight: var(--type-weight-semibold); color: var(--text-primary); } h1 { font-size: 28px; line-height: 1.25; } h2 { font-size: 20px; } h3 { font-size: 16px; } p { margin: 0; } code, .mono { font-family: var(--font-mono); } ::selection { background: var(--cds-blue-20); } /* Scrollbar discreto estilo Carbon */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0; } ::-webkit-scrollbar-track { background: transparent; } /* ---- Helpers ---- */ .u-flex { display: flex; } .u-between { display: flex; align-items: center; justify-content: space-between; } .u-center { display: flex; align-items: center; } .u-gap-4 { gap: 4px; } .u-gap-8 { gap: 8px; } .u-gap-12 { gap: 12px; } .u-gap-16 { gap: 16px; } .u-grow { flex: 1; } .u-muted { color: var(--text-secondary); } .u-helper { color: var(--text-helper); font-size: 12px; } .u-mono { font-family: var(--font-mono); font-size: 12px; } .u-right { text-align: right; } .u-nowrap { white-space: nowrap; } .u-truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-hidden { display: none !important; } .u-mt-8 { margin-top: 8px; } .u-mt-16 { margin-top: 16px; } .u-mt-24 { margin-top: 24px; } .u-mb-8 { margin-bottom: 8px; } .u-mb-16 { margin-bottom: 16px; } .u-mb-24 { margin-bottom: 24px; } /* ---- Botones Carbon ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; font-size: 14px; font-weight: var(--type-weight-regular); letter-spacing: .16px; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast); white-space: nowrap; user-select: none; min-width: 0; } .btn svg { width: 16px; height: 16px; flex: none; } .btn--primary { background: var(--button-primary); color: var(--text-on-color); } .btn--primary:hover { background: var(--button-primary-hover); } .btn--primary:active { background: var(--button-primary-active); } .btn--secondary { background: var(--button-secondary); color: var(--text-on-color); } .btn--secondary:hover { background: var(--button-secondary-hover); } .btn--danger { background: var(--button-danger); color: var(--text-on-color); } .btn--danger:hover { background: var(--button-danger-hover); } .btn--ghost { background: transparent; color: var(--link-primary); padding: 0 12px; } .btn--ghost:hover { background: var(--layer-hover); } .btn--tertiary { background: transparent; color: var(--interactive); border-color: var(--interactive); } .btn--tertiary:hover { background: var(--interactive); color: var(--text-on-color); } .btn--sm { height: 32px; padding: 0 12px; font-size: 13px; } .btn--icon { width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent; color: var(--icon-primary); } .btn--icon:hover { background: var(--layer-hover); } .btn:disabled { background: var(--text-disabled); color: var(--text-on-color); cursor: not-allowed; } /* ---- Campos de formulario Carbon ---- */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field__label { font-size: 12px; color: var(--text-secondary); } .field__label .req { color: var(--support-error); } .field__control, .field input[type=text], .field input[type=email], .field input[type=number], .field input[type=password], .field input[type=date], .field input[type=url], .field input[type=color], .field select, .field textarea { width: 100%; height: 40px; padding: 0 12px; background: var(--field-01); color: var(--text-primary); border: none; border-bottom: 1px solid var(--border-strong); font-family: inherit; font-size: 14px; outline: none; transition: outline var(--dur-fast); } .field textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.45; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--border-interactive); outline-offset: -2px; } .field input::placeholder, .field textarea::placeholder { color: var(--text-placeholder); } .field input[type=color] { padding: 4px; height: 40px; cursor: pointer; } .field__help { font-size: 12px; color: var(--text-helper); } .field--inline { flex-direction: row; align-items: center; gap: 10px; } .field--checkbox { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; } .field--checkbox input { width: 18px; height: 18px; accent-color: var(--interactive); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } .form-grid .field--full { grid-column: 1 / -1; } .form-section-title { font-size: 12px; font-weight: var(--type-weight-semibold); text-transform: uppercase; letter-spacing: .5px; color: var(--text-helper); margin: 8px 0 12px; grid-column: 1 / -1; border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; } /* ---------- Texto solo para lectores de pantalla ---------- Lo que el diseno comunica con color o forma tiene que llegar tambien como texto: un estado pintado de verde no existe para quien no ve la pantalla. No se usa display:none, que lo sacaria tambien del lector. */ .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ===================================================================== layout.css — Shell: Header (marca cuadrada + switcher), Sidenav clara, Breadcrumb y Content. Línea visual basada en auth-multiempresa-carbon. ===================================================================== */ .app-shell { min-height: 100vh; } /* ====================== Header superior ====================== */ .app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 8000; display: flex; align-items: center; background: var(--cds-gray-100); color: var(--text-on-color); border-bottom: 1px solid var(--cds-gray-80); } /* El header es una superficie Gray 100 fija, no sigue el tema de la pagina. Por eso toma pasos de paleta y no tokens semanticos: en claro quedaria un borde gris claro bajo una barra oscura. En oscuro el fondo de pagina tambien es gray-100, y lo que separa las dos superficies es el borde inferior, que es como Carbon resuelve el UI Shell. Antes se forzaba #000, un negro que la paleta no tiene: se leia mas duro que el resto de la interfaz. */ .app-header__menu { width: 48px; height: 48px; display: grid; place-items: center; color: var(--text-on-color); background: transparent; border: none; } .app-header__menu:hover { background: var(--cds-gray-90); } .app-header__brand { display: flex; align-items: center; gap: var(--sp-03); padding: 0 var(--sp-05) 0 var(--sp-02); height: 100%; } .app-header__brand:hover { text-decoration: none; } .brand-sq { width: 24px; height: 24px; background: var(--brand); display: grid; place-items: center; font-size: var(--type-size-01); font-weight: var(--type-weight-bold); color: #fff; flex: none; transition: background var(--dur-base) var(--ease); } .app-header__brand b { font-weight: var(--type-weight-semibold); color: #fff; } .app-header__brand .sep { color: var(--cds-gray-60); } .app-header__brand .brand-company { color: var(--cds-gray-40); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-header__spacer { flex: 1; } .h-divider { width: 1px; height: 1.5rem; background: var(--cds-gray-80); flex: none; } /* Company switcher (multiempresa) */ .switcher { position: relative; height: 100%; } .switcher__btn { height: 100%; display: flex; align-items: center; gap: var(--sp-03); padding: 0 var(--sp-05); color: #fff; background: transparent; border: none; font-size: var(--type-size-02); transition: background var(--dur-fast); } .switcher__btn:hover, .switcher__btn[aria-expanded="true"] { background: var(--cds-gray-90); } .sw-dot { width: 10px; height: 10px; background: var(--brand); flex: none; transition: background var(--dur-base) var(--ease); } .sw-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .switcher__btn .chev { transition: transform .15s; width: 16px; height: 16px; } .switcher__btn[aria-expanded="true"] .chev { transform: rotate(180deg); } .switcher__panel { position: absolute; top: var(--header-h); right: 0; width: 22rem; background: var(--cds-gray-90); display: none; box-shadow: var(--shadow-md); z-index: 9500; max-height: 70vh; overflow-y: auto; } .switcher__panel.open { display: block; } .switcher__label { font-size: var(--type-size-01); letter-spacing: .32px; color: var(--cds-gray-50); padding: var(--sp-04) var(--sp-05) var(--sp-02); } .sw-item { display: flex; align-items: center; gap: var(--sp-04); width: 100%; text-align: left; padding: var(--sp-04) var(--sp-05); color: #fff; background: transparent; border: none; font-size: var(--type-size-02); } .sw-item:hover { background: var(--cds-gray-80); } .sw-item .swi-logo { width: 28px; height: 28px; flex: none; display: grid; place-items: center; font-size: var(--type-size-01); font-weight: var(--type-weight-bold); color: #fff; } .sw-item .swi-info { flex: 1; min-width: 0; } .sw-item .swi-info b { display: block; font-weight: var(--type-weight-semibold); font-size: var(--type-size-02); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sw-item .swi-info span { font-size: var(--type-size-01); color: var(--cds-gray-40); } .sw-item .check { color: var(--cds-blue-40); flex: none; opacity: 0; width: 18px; height: 18px; } .sw-item.active .check { opacity: 1; } .sw-item .swi-logo svg { width: 14px; height: 14px; } /* Acciones del header */ .app-header__actions { display: flex; align-items: center; height: 100%; } .app-header__btn { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: transparent; border: none; position: relative; } .app-header__btn:hover { background: var(--cds-gray-90); } .app-header__btn .dot { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--support-error); border: 2px solid var(--cds-gray-100); } .app-header__user { display: flex; align-items: center; gap: var(--sp-03); padding: 0 var(--sp-05); height: 100%; color: #fff; background: transparent; border: none; } .app-header__user .hu-meta { line-height: 1.1; text-align: right; } .app-header__user .hu-meta b { display: block; font-weight: var(--type-weight-semibold); font-size: var(--type-size-02); } .app-header__user .hu-meta span { font-size: var(--type-size-01); color: var(--cds-gray-40); } .app-header__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; font-size: var(--type-size-01); font-weight: var(--type-weight-bold); color: #fff; flex: none; transition: background var(--dur-base) var(--ease); } /* ====================== Sidenav (clara) ====================== */ .app-sidebar { position: fixed; top: var(--header-h); bottom: 0; left: 0; width: var(--sidebar-w); z-index: 7000; display: flex; flex-direction: column; background: var(--sidenav-bg); color: var(--sidenav-text); overflow: hidden; transition: width var(--dur-base) var(--ease); border-right: 1px solid var(--sidenav-border); } .app-sidebar__nav { display: flex; flex-direction: column; height: 100%; min-height: 0; } .app-sidebar__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--sp-03) 0 var(--sp-04); } .app-sidebar__footer { flex: none; padding: var(--sp-05); border-top: 1px solid var(--sidenav-border); background: var(--sidenav-bg); } /* Es un boton, pero se ve exactamente igual que el texto gris que habia antes: el guiño que esconde (ico-taller.js) no se anuncia. De ahi `cursor: default` y el reset completo de la apariencia de boton. `user-select: none` no es cosmetico: el gesto son tres clics seguidos y un triple clic sobre texto normal selecciona la linea entera, asi que el pie quedaba resaltado en azul justo cuando Ico aparece. El `min-height` reserva de una vez el alto que ocupa Ico (19px contra los 16 de la linea de texto). Sin el, el pie del menu daba un salto de tres pixeles en el momento exacto en que Ico entra, que es cuando menos falta hace que se mueva algo mas. */ .app-sidebar__version { /* `max-width` porque un