/* =========================================================================== TOKENS DE GS — la paleta, una sola vez. =========================================================================== Hasta acá cada módulo migrado declaraba su propia copia de los mismos valores: cuatro archivos con `--navy: #002b6b`, cuatro con `--hair: #e4e8f0`. Mientras fueran idénticas no molestaba; el problema aparecía cuando NO lo eran, y nadie se enteraba. Dos ejemplos reales, los dos de RRHH: · `--faint` valía #95a1b1 acá y #6b7787 en los otros tres. 2,62:1 sobre blanco contra 4,55:1 — uno pasa AA y el otro no, y es el mismo token. · `--warn` valía #c76a00 contra #a85900. Ídem: 3,83:1 contra 5,13:1. Ninguna de las dos era una decisión: era el módulo más viejo que quedó atrás cuando los otros se corrigieron. Este archivo cierra esa puerta — ahora una diferencia entre módulos hay que ESCRIBIRLA, y al escribirla se ve. Ver docs/identidad-visual.md §2 y §8. ── ORDEN DE CARGA (importa) ──────────────────────────────────────────────── Va PRIMERO en index.html, antes de shell-ui.css y de los cuatro *-ui.css. Un módulo que quiere apartarse redeclara el token en su propio scope (`.abm-ui { --canvas: … }`): misma especificidad (0,1,0), gana el último, y el último es el módulo. Si este archivo se cargara al final, los tres apartamientos legítimos que hoy existen se apagarían en silencio. ── POR QUÉ :root Y NO EL SCOPE ───────────────────────────────────────────── Cada *-ui.css advierte, con razón, que sus SELECTORES no pueden salir del scope: una regla suelta llamada `.card` rompería nueve módulos que siguen en Tailwind. Con las variables no pasa lo mismo. Una custom property no pinta nada por existir; sólo hace algo donde alguien la nombra con `var()`. Se revisó que ningún otro CSS del front declare ni consuma estos nombres (Tailwind usa `--tw-*`, styles.css usa `--moyco-*`), así que en :root no pisan nada — y desde :root las alcanzan también los dos que viven FUERA de todo módulo: el armazón y los avisos flotantes (core/toast.css). =========================================================================== */ :root { /* ── Marca ─────────────────────────────────────────────────────────────── Sale de Public/styles.css, no se inventa: --navy es el #002b6b de la barra lateral histórica y --navy-700 el #001a41 del logo. La escala clara se derivó de ese mismo tono. */ --navy: #002b6b; --navy-700: #001a41; /* hover de superficies navy */ --navy-500: #154a94; /* textos secundarios y trazos */ --navy-300: #4d82c8; --navy-050: #edf2fa; /* fondos teñidos y hover */ /* ── Superficies y tinta — grises con sesgo azul ────────────────────────── `--faint` es color de TEXTO real (versalitas, notas, datos ausentes), no un tinte decorativo: por eso está en el mínimo que pasa AA sobre blanco y no un escalón más claro. La jerarquía la sostienen el tamaño y el peso, que aguantan mejor que el color. */ --canvas: #f1f2f5; --surface: #fff; --ink: #1e2733; --muted: #64707f; --faint: #6b7787; --hair: #e4e8f0; --hair-strong: #d4dbe7; /* ── Estado — el ÚNICO color con significado ────────────────────────────── Nunca categoría. Un artículo no es verde por ser azúcar; es ámbar porque le falta el EAN y no se puede facturar. */ --ok: #0f7a52; --ok-050: #eef7f3; --ok-hair: #c7e4d7; --warn: #a85900; --warn-050: #fdf3e5; --warn-hair: #f2ddbb; --crit: #c62828; --crit-050: #fdecec; --crit-hair: #f3c9c9; /* ── Elevación ─────────────────────────────────────────────────────────── Dos vocabularios, y la diferencia es de tratamiento, no de gusto: · `--shadow` es la sombra PLANA, casi imperceptible, de los módulos que separan por trazo (RRHH, Facturación, Remitos). Una sola. · `--e1/--e2/--e3` es la escala del tratamiento "Capas" del ABM, donde la jerarquía sale de la altura y no del contraste. Vive acá y no en abm-ui.css porque `--e3` —el plano flotante— lo necesitan también los modales y los avisos, que cuelgan de . Si alguna vez hiciera falta un cuarto nivel, el problema es la jerarquía, no la sombra. */ --shadow: 0 1px 2px rgba(20, 40, 80, .06), 0 6px 20px rgba(20, 40, 80, .06); --e1: 0 1px 2px rgba(16, 32, 64, .07); --e2: 0 1px 2px rgba(16, 32, 64, .06), 0 8px 22px rgba(16, 32, 64, .09); --e3: 0 20px 60px rgba(10, 25, 60, .28); /* ── Movimiento ────────────────────────────────────────────────────────── Una sola curva para todo el sistema: sale rápido y frena suave, que es lo que hace que un panel se sienta liviano. */ --curva: cubic-bezier(.2, .8, .3, 1); /* ── Geometría ─────────────────────────────────────────────────────────── `--gutter` es UNA sola medida de margen lateral por pantalla: cabecera, barra de secciones y celdas arrancan exactamente ahí. Si cada bloque pone su propio padding, el contenido queda escalonado y se lee como una sangría involuntaria. */ --r-card: 14px; --gutter: 22px; } /* =========================================================================== BASE TIPOGRÁFICA DE UN MÓDULO CON IDENTIDAD =========================================================================== Lo mismo que declaraban por separado .abm-ui, .fx-ui y .rm-ui. RRHH no lo tenía y heredaba la Inter del : era el único de los cuatro que no seguía el §3 del manual ("fuente del sistema"), otra vez por ser el más viejo. Ahora los cuatro dicen lo mismo porque lo dicen en un solo lugar. OJO con agregar cosas acá: esto es un selector agrupado, así que todo lo que se escriba lo heredan todos los módulos de una. Va sólo lo que es cierto para todos. El `background` NO está: RRHH lo pinta en el scope y el ABM en su `.abm-shell`, y esa diferencia es real. */ .abm-ui, .rrhh-ui, .fx-ui, .rm-ui, .cfg-ui, .ptl-ui, .log-ui, .tf-ui, .trz-ui, .acc-ui, .cx-ui, .cm-ui, .dx-ui, .frc-ui, .pd-ui, .mw-ui, .rc-ui, .ord-ui, .vt-ui, .stk-ui, .dh-ui, .pdp-ui { font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif; font-size: 13.5px; line-height: 1.5; color: var(--ink); -webkit-font-smoothing: antialiased; } /* TRAMPA §7 DEL MANUAL, resuelta una vez para los cuatro. Los módulos ocultan y muestran con la clase `.hidden` de Tailwind, que tiene una sola clase de especificidad (0,1,0). Cualquier regla de identidad que declare `display` —`.abm-ui .abm-btn`, `.rr-filters`, `.fx-seg`— tiene dos (0,2,0) y le gana: el elemento "oculto" se sigue viendo. Esta regla restituye el orden y por eso va al tope del archivo que se carga primero. El caso del ROOT de un modal (que lleva la clase del módulo ÉL MISMO, no en un ancestro) queda en cada *-ui.css: `.abm-ui.abm-modal.hidden` y sus tres hermanas nombran una clase propia de cada módulo. */ .abm-ui .hidden, .rrhh-ui .hidden, .fx-ui .hidden, .rm-ui .hidden, .cfg-ui .hidden, .ptl-ui .hidden, .log-ui .hidden, .tf-ui .hidden, .trz-ui .hidden, .acc-ui .hidden, .cx-ui .hidden, .cm-ui .hidden, .dx-ui .hidden, .frc-ui .hidden, .pd-ui .hidden, .mw-ui .hidden, .prod-ui .hidden, .rc-ui .hidden, .ord-ui .hidden, .vt-ui .hidden, .stk-ui .hidden, .dh-ui .hidden, .pdp-ui .hidden { display: none !important; } /* Números que se comparan de arriba abajo: mismo ancho de dígito o la columna baila. En las tablas de plata esto no es cosmético. */ .abm-ui .tnum, .rrhh-ui .tnum, .fx-ui .tnum, .rm-ui .tnum, .cfg-ui .tnum, .ptl-ui .tnum, .log-ui .tnum, .tf-ui .tnum, .trz-ui .tnum, .acc-ui .tnum, .cx-ui .tnum, .cm-ui .tnum, .dx-ui .tnum, .frc-ui .tnum, .pd-ui .tnum, .mw-ui .tnum, .prod-ui .tnum, .rc-ui .tnum, .ord-ui .tnum, .vt-ui .tnum, .stk-ui .tnum, .dh-ui .tnum, .pdp-ui .tnum { font-variant-numeric: tabular-nums; } /* `.prod-ui` NO entra en el selector agrupado de la base tipográfica de acá arriba, y es a propósito: de esa misma raíz cuelgan las cuatro pantallas de Producción que siguen en Tailwind (Parte Diario, Semanas, Plan, Insumos) y heredarles la fuente y el `--ink` sería repintarlas sin haberlas mirado. La base la declara `produccion-ui.css` sobre lo único que dibuja —la barra de secciones y el panel— y sube a la raíz cuando entre la última de las cuatro. Está escrito allá con su motivo. */ /* =========================================================================== LA ESPERA — el vocabulario de «esperá», una sola vez =========================================================================== Ver docs/identidad-visual.md §5. Dos piezas y una regla: · `.gs-spin` el ANILLO. No es un ícono que gira: `sync` es una flecha, y una flecha girando dice «actualizar», no «esperá». Sale del `.abm-spin` del ABM y del `.acc-spin` de la puerta, que eran la misma pieza escrita dos veces. · `.gs-sk` el ESQUELETO. La forma de lo que está por llegar. · Y la regla: el anillo APARECE A LOS 250 ms. Si la respuesta llega antes no se ve nada, que es lo correcto — un anillo que titila 80 ms y desaparece se lee como un error. ── POR QUÉ ESTAS DOS VAN SIN SCOPE ───────────────────────────────────────── Es la excepción al §1 del manual («todo va bajo la clase raíz del módulo»), y está declarada a propósito. El motivo: de los 341 `animate-spin` que estas dos piezas vienen a reemplazar, 283 viven en módulos que TODAVÍA NO SE MIGRARON y por lo tanto no tienen scope. Scopearlas a los once `.x-ui` las dejaría inservibles justo donde está el 83 % del trabajo. Lo que hace que se pueda: el prefijo `gs-` no lo usa nadie más. Tailwind emite `.animate-*` y `--tw-*`, styles.css usa `--moyco-*`, y no hay ninguna clase `gs-*` en el front fuera de `gs-toast`, que es de core y es hermana de éstas. Se verificó antes de escribirlas. ── EL ARCO ES `currentColor` ─────────────────────────────────────────────── Y eso es la diferencia entre una pieza y trece copias. El ABM le fijaba `--azure` adentro; si cada módulo hiciera lo mismo, la próxima diferencia entre dos anillos no sería una decisión sino un descuido — que es lo que le pasó a `--faint` antes de que existiera este archivo. Acá el anillo toma el color del texto donde está parado, así que el acento lo pone el módulo sin declarar nada. */ .gs-spin { display: inline-block; flex: none; width: 15px; height: 15px; border: 2px solid var(--hair-strong); border-top-color: currentColor; border-radius: 50%; vertical-align: -2px; /* El retardo va en la ANIMACIÓN, no en un setTimeout. Un setTimeout hay que cancelarlo en cada camino de salida, y ése es exactamente el defecto que estos helpers vienen a cerrar: otro `finally` que olvidar. Con `both`, antes de los 250 ms vale el fotograma inicial —opacidad 0— y si el anillo sale del DOM antes, no se vio nunca. */ animation: gsGira .7s linear infinite, gsAsoma .16s var(--curva) .25s both; } .gs-spin.ch { width: 12px; height: 12px; } /* adentro de un botón chico */ .gs-spin.gd { width: 26px; height: 26px; border-width: 3px; } /* zona o pantalla */ /* Sobre navy: el trazo de fondo tiene que ser una luz, no un gris. */ .gs-spin.claro { border-color: rgba(255, 255, 255, .32); border-top-color: #fff; } @keyframes gsGira { to { transform: rotate(360deg); } } @keyframes gsAsoma { from { opacity: 0; } to { opacity: 1; } } /* EL ESQUELETO. Una barra por dato, con la forma de la fila que viene. OJO con el alto: el que arma el esqueleto tiene que hacer que la fila mida lo MISMO que la fila real. Si no coincide, el esqueleto deja de servir para lo único que justifica su costo —que nada salte— y encima miente. */ .gs-sk { display: block; height: 9px; border-radius: 4px; background: var(--hair); background-image: linear-gradient(90deg, var(--hair) 0%, #f2f5fa 45%, var(--hair) 90%); background-size: 280% 100%; animation: gsBarrido 1.4s ease-in-out infinite; } .gs-sk.alto { height: 13px; } /* la cifra grande de una tarjeta */ @keyframes gsBarrido { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } /* §5 DEL MANUAL: no se apaga la información, se apaga el MOVIMIENTO. El anillo se queda —es información, no énfasis— girando más despacio, y CONSERVA el umbral de 250 ms, que también es información: dice «esto está tardando». Lo que se apaga es el desvanecido y el barrido del esqueleto; la FORMA del esqueleto se queda, que es lo que el esqueleto viene a decir. */ @media (prefers-reduced-motion: reduce) { .gs-spin { animation: gsGira 1.4s linear infinite, gsAsoma .01ms linear .25s both; } .gs-sk { animation: none; background-image: none; background: var(--hair-strong); } }