Cómo se enlaza el sistema

assets/siga.css contiene dos bloques :root. El bloque A es el contrato tokens.css del sistema Dashboard, copiado literal: es la única parte del proyecto donde existe un valor de color escrito a mano. El bloque B deriva los alias internos de SIGA con color-mix() a partir del bloque A. Cualquier pantalla nueva enlaza la hoja y usa clases; nunca vuelve a escribir un color.

Reglas de uso

Un solo acento. --accent marca acción primaria, selección y foco; máximo dos apariciones visibles por pantalla.
El estado semántico no usa el acento: verde --success = conforme, ámbar --warn = requiere atención, rojo --danger = bloquea facturación.
Toda cifra va en --font-mono con tabular-nums para que las columnas alineen.
Las superficies se separan por línea de 1px, no por sombra. La sombra queda reservada a lo que flota: menús, modal y gaveta.
El hover mueve fondo y borde, nunca aclara el texto.

Métricas del armazón

Rail lateral244 px

Rail colapsado (≤900 px)80 px

Barra superior57 px

Ancho de contenido100 %

Panel lateral tope (≥1760 px)460 px

Canal de página24 → 44 px

Altura de control32 px

Control con puntero grueso40 px

Color

Bloque A · contrato

Valores del contrato Dashboard. Los cuadros se pintan con el token vivo y el valor mostrado se lee del navegador, no está transcrito a mano.

Derivados

Bloque B · color-mix

Cada alias sale del contrato. Al cambiar de marca solo se sustituye el bloque A y toda la interfaz se recalcula.

Modo oscuro

Bloque A′

El tema oscuro no es otra hoja de estilos: redefine el bloque A y tres anclas de dirección. Las fórmulas del bloque B no cambian, así que cada componente se recalcula solo.

--toward-ink — hacia dónde se desplaza un texto de color: black en claro, white en oscuro. Es lo que convierte «azul oscuro para enlaces» en «azul claro para enlaces» sin tocar la regla.
--ink-abs / --paper-abs — anclas absolutas para lo que siempre debe ser oscuro (velo, sombra, base del rail) o siempre claro (texto del rail, monograma invertido).
Solo cinco derivados se reajustan en oscuro: los rellenos tenues suben en vez de bajar y las barras de datos se aclaran para conservar 3:1 contra la tarjeta.
La preferencia vive en localStorage['siga.tema']; sin elección guardada se sigue al sistema. Un script en el <head> resuelve el tema antes del primer pintado para que no haya destello.

html[data-theme='dark'] .railbtn conmutador en el pie del rail la tabla de abajo recalcula al cambiar de tema

Contraste verificado

Relación calculada en tiempo real sobre los tokens resueltos. Umbral: 4.5:1 en texto normal, 3:1 en texto grande e iconos. El estado deshabilitado es la única excepción permitida.

Par	Uso	Ratio	Mínimo	Estado

Tipografía

Inter para interfaz y títulos, IBM Plex Mono para toda cifra, identificador y fecha. El producto usa una escala densa propia: los títulos van con tracking negativo y las etiquetas en versal con tracking positivo.

h1 · 21px / 1.2 / −0.017em

Registro de servicio

h2 · 16px / 1.3 / −0.012em

Comidas del día

h3 · 14px / 1.35 / −0.008em

Sustituciones registradas

cuerpo · 14px / 1.55

Las raciones no registradas antes del cierre del mes no se facturan al programa.

.small · 12.5px / +0.01em

Iris Maldonado · hoy, 10:18 a.m.

.overline · 11px / +0.085em

Raciones · agosto

.num / .mono · tabular

8,422 · 1,043.75 · CN-2026-0812

--font-display Inter --font-body Inter --font-mono IBM Plex Mono pesos 400 / 500 / 550 / 600

Escala del contrato, disponible para superficies editoriales o de presentación:

11 xs 13 sm 15 base 17 lg 22 xl 30 2xl 42 3xl

--text-xs … --text-4xl--tracking-display −0.015em--leading-body 1.48

Estructura y movimiento

Ritmo de 8 puntos, radios del contrato y transiciones cortas con una sola curva.

--space-1 … --space-12rejilla base 8 pt

sm 8

md 12

lg 18

pill

--r-sm controles--r-md tarjetas--r-lg superposiciones

--elev-ring

--shadow-pop

--shadow-modal

la superficie plana es el estado normal; la sombra indica que el elemento flota

--motion-fast 120 ms — hover, foco, pulsación.
--motion-base 200 ms — interruptor, apertura de gaveta.
--ease-standard cubic-bezier(.2,0,0,1) — única curva del sistema.

sin animación decorativa: el movimiento solo confirma una acción

Rejilla

Filas explícitas, nunca auto-fill. Cada grupo de tarjetas declara cuántas columnas tiene, de modo que una pantalla ancha no inserta una columna extra ni separa dos tarjetas que deben ir juntas. La página no lleva medida tope: .page ocupa el ancho completo del monitor. Lo que sí se limita es el panel lateral —460 px a partir de 1760 px, 520 px a partir de 2200 px— para que el espacio que se libera lo gane la columna de trabajo y no el margen.

.row4

·

.row3

·

.row-2-1

·

.row-1-2

·

.rows pila vertical de 16px.row2 .row3 .row4.row-2-1 .row-1-2 .row-3-2canal 16px

Acciones

Una acción, un botón sólido. El resto de las entradas a la misma acción son neutras, fantasma o enlace. Los especímenes de abajo aparecen juntos solo por referencia.

ver historial

.btn--primary fondo --solid-bg, texto --solid-fg hover --solid-bg-hover active --solid-bg-active foco aro --accent-ink 2px en claro el relleno se hunde para llevar texto blanco; en oscuro usa el acento con tinta oscura

.btn--lg registro en centro (táctil).btn--sm acciones de fila

.segmented vista alterna, estado en localStorage.searchbox icono a 9px del borde

Panel de composición: alimentos, cantidades y aporte por ración.

.tabs subrayado en el seleccionado, nunca color de relleno

Formularios

Etiqueta siempre visible, pista antes del error y foco con aro de 4px del contrato.

Centro Solo los centros de tu organización.

Alimento Escribe para buscar en el catálogo.

Cantidad servida *

Supera el inventario disponible (114).

Descontar del inventario Notificar a la nutricionista

foco --focus-ring error --danger + texto explícito .stepper--lg 52px, uso en tableta .input--num mono, alineado a la derecha

Guineo verde Almidón

Guineo maduro Fruta

Pana guinea Almidón

.aclist / .acitem autocompletar; la coincidencia se marca con --mark

Datos

Tablas densas sin cebreado: la línea de 1px basta. Toda cifra alineada a la derecha y en mono. Las barras y columnas usan relleno sólido, nunca contorno.

Raciones · agosto

8,422

8 días de servicio

Registro completo hoy

2 de 5 centros

2 parciales · 1 sin registrar

Sustituciones · semana

7

con justificación escrita

Partidas bajo mínimo

4

1 sin existencia

Consumo por centro

agosto 2026

Centro	Alimento	Raciones	Costo
Región Ponce
Ponce Playa	Arroz con habichuelas	1,204	$1,043.75
Peñuelas	Pollo guisado	968	$902.40
Subtotal región		2,172	$1,946.15

2 de 5 centros mostrados

Raciones por día

lun

mar

mié

jue

vie

hoy

Movimientos de inventario

08-11 Entrada Arroz grano largo · factura 4471 +120 318

08-11 Servicio Almuerzo · 96 raciones −42 276

08-10 Ajuste Merma por humedad · justificada −8 268

Estado y avisos

El color del estado nunca es el acento. Cada aviso dice qué pasó y qué consecuencia tiene.

Completo Parcial Sin registrar Variante Borrador Vigente Almidón Dieta modificada conforme atención bloquea inactivo

.pill versal 11px, tracking +0.065em.dot 6px, siempre con etiqueta de texto

No hay movimientos en este rango.

Cambia el mes o registra una entrada de inventario.

.banner--warn / --danger / --info.empty siempre ofrece la salida

Superposiciones

Modal para decisiones que bloquean; gaveta para consultar detalle sin perder la lista. Ambas se cierran con Esc, con el velo o con la acción secundaria.

.modal decisión · .drawer detallevelo --scrim-inksombra --shadow-modal

Módulos del dominio

Piezas que solo existen en SIGA: la tira semanal del programa, el bloque de comida y la fila de alimento con sustitución.

.weekstrip / .daybtn un punto por comida planificada

Almuerzo 11:30

Registrado

Sustitución: guineo verde por pana, por falta de existencia. Registrado por Iris Maldonado.

Arroz con habichuelas

Almidón

96 310 kcal

Guineo verde

Almidón

0 —

Pana hervida

Almidón · sustituto

96 128 kcal

Dieta modificada 6 participantes · sin lácteos

.meal--active comida en edición .subline justificación obligatoria .itemrow--replaced tachado, se conserva la evidencia

Composición de receta. Un plato preparado se despliega dentro de su propia fila: el nombre es el disparador, la píldora lo clasifica y el panel enseña de qué está hecho. La marca de receta es neutra a propósito —clasifica, no señala estado— para no gastar el acento, que está reservado a selección y foco.

Almuerzo 11:30

1 receta

Receta

Proteína · legumbre · rinde 50 porciones de 3.0 oz

3.0 oz

108 kcal

.pill--recipe clasificación neutra .disclose el nombre abre la composición .ingredients / .ingrow mismas 4 columnas que .itemrow .unitclass peso · volumen · conteo .yield base de escalado