Kit de interfaz

Piezas montadas, listas para copiar

Este kit no es una maqueta estática: usa el mismo assets/siga.css y assets/siga.js que las nueve pantallas de producto, con el carril, el conmutador de tema, las superposiciones y los contadores funcionando. Copia el marcado de cada página tal cual y sustituye el contenido.

Estructura

Cascarón de aplicación

Rejilla del shell, carril, barra superior pegajosa, cabecera de página, filas declaradas y barra de acción inferior.

.shell · .sidebar · .topbar · .page · .rowN · .actionbar

Entrada

Formularios y superposiciones

Campos con pista y error, cantidad con unidad, autocompletado, interruptor, contador táctil, modal y gaveta funcionales.

.field · .input · .qty · .aclist · .switch · .stepper · .modal · .drawer

Datos

Tablas, KPI y gráficas

Tarjetas de indicador, tabla agrupada con totales, barras de proporción, gráfica de columnas rellena y estado vacío.

.kpi · table.t · .bar · .chart · .empty

Dominio

Bloques propios de SIGA

Tira de semana, bloque de comida con sus alimentos, sustitución con justificación obligatoria, variante de dieta especial y ledger de inventario. Son las piezas que distinguen a este producto de un panel genérico.

.weekstrip · .meal · .itemrow · .subline · .variantbox · .ledger

Cinco reglas que no se negocian

01Ningún literal de color fuera del bloque A. Todo se deriva con color-mix(). 02Un solo .btn--primary por vista. Los demás accesos son normales, fantasma o enlace. 03El contraste sube en hover, nunca baja. Fondo y tinta se definen en pareja. 04Todo número en mono tabular. Una cifra en la fuente de cuerpo es un error. 05La selección vive en ARIA. aria-current, aria-pressed, aria-selected.

Reglas completas y anti-patrones en DESIGN.md; instrucciones para agentes en SKILL.md.

Componentes modulares

Cada pieza también existe aislada en components/, sobre un fondo desnudo y con sus reglas al lado, para revisarla o copiarla sin arrastrar la pantalla entera. Comparten components/kit-components.css como marco de aislamiento.

App shell

La rejilla de dos columnas con carril, barra superior y área de trabajo, a escala reducida y con las zonas anotadas.

components/app-shell.html

Sidebar

El carril aislado, junto a las seis reglas que gobiernan una superficie oscura dentro de un sistema claro.

components/sidebar.html

Meal Composer

El bloque de comida con sustitución justificada, alimento tachado y variante de dieta especial.

components/meal-composer.html

Ledger table

Tabla agrupada con subtotales y el ledger de solo añadir, incluida la partida en balance negativo.

components/ledger-table.html

Vista previa · Meal Composer Abrir aparte components/meal-composer.html

Arranque de una pantalla nueva

<!DOCTYPE html>
<html lang="es-PR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nombre de la pantalla · SIGA</title>
<link rel="stylesheet" href="assets/siga.css">
<!-- resuelve el tema antes del primer pintado -->
<script>try{var t=localStorage.getItem('siga.tema')||'auto';document.documentElement.dataset.theme=t==='auto'?(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):t;}catch(e){}</script>
</head>
<body>
<div class="shell">
  <aside class="sidebar" data-sidebar data-active="inventario" data-role="centro"></aside>
  <div class="main">
    <header class="topbar">…</header>
    <div class="page">…</div>
  </div>
</div>
<script src="assets/siga.js"></script>
</body>
</html>

data-role acepta admin, nutricionista o centro; data-active acepta panel, programas, recetas, servicio, inventario, facturacion o configuracion.