spec :: pantallas 00–01 :: entrega de precisión

::::bastion:::: · handoff a desarrollo · reglas tomadas de design files.html · 2026-06-12 · los json de este documento son los contratos vigentes

0 · reglas de diseño (vigentes para ambas pantallas)

regla	valor
fondo	#050608 obsidian · micro-grid radial 26px · paneles #000000
tipografía oficial	instrument sans (300 light / 700 bold / 800 superbold) · ibm plex mono (valores)
casing	todo en minúsculas, sin excepción · tokens ::::x:::: con los :::: en cian
lema	facta non ficta (blanco-gris-blanco) · sovereign management
octágono canónico	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%)
luz que respira	borde rgba(0,218,248,·) + box-shadow cian · ciclo 3.6s ease-in-out (prefers-reduced-motion aware)
colores de módulo	rh azul #2e6bff · rm amarillo #ffe14d · rf verde #1de9b6 · audit rosa #ff2bd1 · gober morado #a855f7 · midi fushia #ff4fd8 · núcleo cian #00daf8 · grp = cono multicolor de los 5
navegación	octobar :: 4 octágonos 58px (midi amarillo · admin rosa · grp multicolor · sistema verde) + jaguar al centro · el título de color del menú navega al anillo
valores del sistema	blanco #ffffff con glow del color del módulo · ibm plex mono

1 · pantalla 00 :: access gate (bastion grp.html)

la puerta del grp. círculo metálico con login transparente (solo se ven letras, líneas base y la flecha del dropdown): sede · usuario · password · entrar. al validar, se enciende el anillo de 6 octágonos grp.

georeferencia :: geometría del tablero

endpoints

endpoint	uso
POST /auth/login	valida sede + usuario + password · emite token de sesión
GET /api/grp/modulos	módulos habilitados por rol (los 6 octágonos del anillo)

estados :: cerrado (form visible) → validando → abierto (anillo grp con 6 octágonos)
sesión en el cliente hasta picar salir (menú sistema) · sin sesión, cualquier página grp regresa a la puerta
octágonos del anillo :: rh, rm, rf, sys, audit, gober — cada uno con su color de módulo y rayita interna

2 · pantalla 01 :: portal (bastion portal.html)

la pantalla principal. arranca apagada: sin luces, sin brillos, sin colores (grayscale + dim). el usuario escribe su nombre en un campo transparente montado sobre el logo de terra y valida con midi (cualquier nota). al validar, el portal se enciende con una transición de 1.4s y quedan activos los 3 destinos: admin · grp (multicolor) · midi.

georeferencia :: geometría del portal

flujo de validación midi

intro :: video assets/bastion-intro.mp4 a pantalla completa, una vez por sesión, clic para saltar, funde 700ms
modo apagado :: filter grayscale(1) brightness(0.52) sobre el shell · animaciones pausadas · octágonos y menús sin click
campo nombre :: 140px, transparente, solo línea base rgba(255,255,255,0.30), texto blanco centrado, sobre el logo terra
validación :: web midi — noteOn (status 0x90, velocity > 0) en cualquier canal/dispositivo desbloquea
sin dispositivo midi :: nombre + enter (modo demo, marcado como tal en el status)
al validar :: nombre queda en la sesión del navegador · el portal no vuelve a pedirlo hasta cerrar el navegador
octágono grp :: cono multicolor con interior translúcido (rgba(7,8,10,0.50)) para que el cristal deje ver los colores

3 · certificados y seguridad

capa	detalle
tls 1.3	todo el tráfico entra por :8800 vía cloudflare tunnel (certificado administrado)
jwt	token emitido por /auth/login y /auth/midi · expiración 8h · rol por sede
midi factor	la nota midi actúa como segundo factor físico del portal (algo que tienes)