Obra civil
Replanteo del frente
3 nov → 5 nov3 dSupervisoraResponsable: Supervisora Torre
Toolkit
El sistema de diseño completo: tokens, tipografía, átomos, moléculas y organismos tal como se ven en este despliegue. La luna o el sol de arriba lo cambian a oscuro o a claro.
Tokens
Los colores son variables: el hexadecimal solo vive en src/styles/tokens.css, y por eso el modo oscuro invierte solo. Todo par de texto cumple AAA (≥7:1).
--color-brand
Índigo: el cromo. Botón primario, barra lateral.
--color-accent
Amarillo: el puntero. Una cosa por región.
--color-brand-soft
Índigo suave: fondos de ícono, botón suave.
--color-surface
El lienzo.
--color-surface-raised
Lo que flota: tarjetas, tablas.
--color-surface-sunken
Lo hundido: chips neutros, controles apagados.
--color-control
El fondo de todo control.
--color-marca
La marca como bloque: índigo fijo en los dos temas (el panel de la entrada).
--color-success
Éxito como fondo (≥7:1 con blanco).
--color-warning
Advertencia como fondo.
--color-danger
Peligro como fondo.
--color-info
Información como fondo.
Radios, sombras, alturas· sm 8 px lo que se toca · md 14 px lo que contiene · lg 20 px lo que cubre
radius-sm
radius-md
radius-lg
shadow-1
shadow-2
shadow-3
Controles y botones: 44 px donde se toca con el dedo, 40 px con puntero fino; pequeños, 36 y 32.
Tipografía
Montserrat para títulos y cifras; Inter para todo lo demás, a 15 px de base (17 px en las pantallas de campo). Sentence case en toda la interfaz.
Escala
Título de pantalla · 30 px
Sección · 20 px
Título de tarjeta · 17 px
Cuerpo · 15 px. Lo que la persona lee de corrido: explicaciones, motivos, avisos largos.
Interfaz · 14 px. Etiquetas, controles, tablas, chips y menús.
Ayuda · 13 px. Lo que se lee una vez y después se ignora.
1.284 cifras en tabular
Un enlace se ve como enlace, y una tecla como Esc.
Celular y campo
El celular es el dispositivo real de quien captura: una mano, guantes, sol y sin señal. Estos tokens viven en src/styles/tokens.css; una pantalla nueva los usa, no los reinventa. Se diseña desde el celular hacia arriba: cada punto de quiebre agrega, nunca corrige.
Tokens de celular· los tamaños de la izquierda son reales, no escalados
--toque44 pxObjetivo táctil del sistema: todo lo que se toca con el dedo (regla 9).--toque-campo56 pxLa captura: dedo con guante de trabajo. Lo usa BotonCampo y la utilidad toque-campo.--separacion-campo16 pxEntre dos objetivos de campo, para no tocar el vecino. Utilidad separacion-campo.--texto-campo17 pxMínimo de letra en pantallas de campo (casco y gafas). Utilidad pantalla-de-campo.--alto-control44 px · 40 px con puntero finoAlto de entradas, selectores y botones.--alto-control-sm36 px · 32 px con puntero finoControles pequeños: nunca en pantallas de campo.--margen-celular16 pxGutter lateral por debajo de md.--margen-tableta24 pxGutter de md a xl.--margen-escritorio32 pxGutter desde xl.--ancho-piso320 pxEl celular más angosto que tiene que funcionar sin desplazamiento horizontal.
Puntos de quiebre· los de Tailwind, sin inventar ninguno (25-RESPONSIVE)
base· < 640 px- Celular de obra: una columna, cajón lateral, ListaTarjetas, hoja de filtros.
sm· 640 px- Celular grande: galería a 3 columnas.
md· 768 px- Tableta: buscador en la barra, dos columnas.
lg· 1024 px- Barra lateral fija, Tabla en vez de ListaTarjetas, barra de filtros visible.
xl· 1280 px- Escritorio: rejilla completa, galería a 8 columnas.
Botón de campo· BotonCampo: 56 px, 17 px de letra, 16 px entre uno y otro; la etiqueta dice la acción con su número
Pantalla de campo y regla de sol· pantalla-de-campo sube todo a 17 px; texto-sol no baja de neutral-700
Izaje de torre
Frente torre · tomada a las 10:41, sin señal. Se envía sola cuando vuelva la red.
Hasta lo más pequeño se lee con casco y gafas.
Indicador de la cola· IndicadorCola: siempre visible cuando hay cola; cada estado con su palabra, no solo su color
Sin señal. 3 por enviar (la más vieja lleva 25 minutos). Ver la cola →
7 por enviar. Enviando 3 de 7 — va en 0,4 de 1,1 MB. Ver la cola →
2 por enviar. 2 necesitan atención: avísele al supervisor. Ver la cola →
Le quedan unos 180 MB en el celular: alcanzan para unas 60 fotos más.
Vista previa de la marca de agua· PreviaMarcaDeAgua: la foto con su rótulo antes de enviar; no invierte en oscuro porque es material probatorio
Obra: RB-0412 · Radiobase La Primavera
Frente: Frente torre
Fecha y hora: 23/10/2026 10:41 (GMT-5)
GPS: 6.0906, -75.6356 (±8 m)
Responsable: O. Pérez — CUAD-01
Hoja de filtros· HojaDeFiltros: en celular un botón que abre la hoja; desde lg, la barra siempre visible (achique la ventana para verla)
Galería de evidencias· CuadriculaGaleria y TarjetaEvidencia: 2 columnas en celular, 8 en xl; el estado se ve sin abrir, la sugerencia de la IA va como sugerencia
'%2F%3E%3Crect%20y%3D'58'%20width%3D'120'%20height%3D'32'%20fill%3D'rgb(120%2C110%2C95)'%2F%3E%3Crect%20x%3D'52'%20y%3D'14'%20width%3D'6'%20height%3D'50'%20fill%3D'rgb(80%2C85%2C100)'%2F%3E%3Cpath%20d%3D'M40%2026h30M44%2036h22'%20stroke%3D'rgb(80%2C85%2C100)'%20stroke-width%3D'2'%2F%3E%3C%2Fsvg%3E)
RB-0412 · Frente torre
Izaje de torre — O. Pérez
aprobada
Ver la fotoRB-0412 · Frente torre
Montaje de celda — O. Pérez
por revisarIA sugiere: montaje de celda · 82 %
Ver la fotoFO-0188 · Zanja norte
Empalme de fibra — Supervisora Torre
devuelta: foto borrosa
Ver la fotoFO-0188 · Zanja norte
Tendido
apartada, sin decidir
Ver la foto
Átomos
Las piezas mínimas. Cada una es una clase de la librería (control, boton, chip, casilla…) y un componente de React que la usa.
Control: entrada, selector, fecha, número, búsqueda, área de texto, archivo· clase control
Con ayuda debajo del control.
El NIT lleva dígito de verificación: 900123456-7.
Escoja primero la obra.
Campo con contorno· la etiqueta en el borde y el acento de color al enfocar; se usa en la entrada
Lleva dígito de verificación: 900123456-7.
Casilla, radio, interruptor· la etiqueta completa es el objetivo táctil
Botón· ocho variantes, cuatro tamaños; el amarillo señala una sola cosa por región
En la captura no se usa este botón: ahí va BotonCampo, de 56 px, que se toca con guantes.
Chip, insignia, avatar, esqueleto, separador· el color nunca va solo: la palabra y la forma del punto son obligatorias
aprobadarechazadapendienterevisadapor enviarneutropequeñosin punto
Pendientes 7Revisadas 42
Moléculas
Átomos combinados con un propósito: avisar, orientar, resumir, escoger.
Aviso· role=status; role=alert solo cuando interrumpe
La obra se crea aunque Microsoft 365 falle: los artefactos se reintentan solos.
Roles guardados. Sus sesiones quedaron invalidadas: entra de nuevo con los permisos de todos sus roles.
Quedan 12 correos de los 100 del día: el resumen de las 18:00 puede quedarse sin cupo.
La foto llegó sin comprimir: el dispositivo comprime a ~1 MP antes de subir.
Migas y pestañas
Menú desplegable y diálogo· Escape cierra y devuelve el foco
Pregunta que se abre· Pregunta dentro de ul.preguntas: un details con su clase, sin JavaScript; la flecha dice que se abre
¿Funciona sin señal en la obra?
Sí. La foto espera en la cola del celular y se sube sola cuando vuelve la señal.¿Qué pasa si rechazan mi foto?
Vuelve a quien la tomó con el motivo exacto.
Cifra y barra de progreso· todo número lleva su denominador y su ventana; toda barra, su número
Adopción
86 %
al día: 31 de 36 personas · semana 43
Tiempo de ciclo
1,8 d
+13 %vs. la semana anterior
atención: de la foto a la aprobación · 30 días
Fotos del día
1.284
| 1 | 980 |
| 2 | 1040 |
| 3 | 1010 |
| 4 | 1120 |
| 5 | 1090 |
| 6 | 1150 |
| 7 | 1210 |
| 8 | 1180 |
| 9 | 1230 |
| 10 | 1190 |
| 11 | 1250 |
| 12 | 1284 |
+8 %vs. ayer
de 1.300 esperadas · hoy
- Obra
- FO-0188 · Fibra troncal Caldas–Amagá
- Responsable
- Coordinador de obra
- Estado
- en ejecución
Armazón
La barra lateral, completa y encogida a íconos; la barra superior con el cajón del celular y el menú de la cuenta, y las pestañas de un módulo. Desde lg la barra lateral queda fija; por debajo, se abre como cajón con el botón de menú.
El contenido de la pantalla va aquí, con el gutter del punto de quiebre.
El contenido de la pantalla va aquí, con el gutter del punto de quiebre.
Correos
Las plantillas de correo: el sobre con el logo de la empresa sobre el índigo, un solo botón por correo que dice lo que hace, la dirección escrita por si el botón no abre, los datos en un recuadro y la nota de qué hacer si no era para uno. Piezas en src/lib/maqueta-correo.ts: botonDeCorreo, datosDeCorreo y notaDeCorreo.
Organismos
Las piezas que arman una pantalla: el encabezado, la barra de filtros, la tabla, la tarjeta con su pie, el formulario y el vacío.
Encabezado de pantalla· título, subtítulo de una línea y la explicación larga plegada bajo «¿Cómo funciona?»; las acciones a la derecha, una primaria como mucho
Bandeja de revisión
12 por decidir: 9 sin mirar y 3 apartadas para después.
¿Cómo funciona?
Mientras quede alguna foto por decidir, la obra no se puede cerrar. Las fotos sin alertas del mismo frente, actividad y día se aprueban juntas, hasta 50 a la vez, después de abrir una muestra. Las que tienen alguna alerta se deciden de a una, y devolver una foto es siempre de a una, con su motivo.
Chips de filtro· un chip por valor con obras, con su cuenta; el activo es el único con el cromo y «Necesitan atención» lleva el tinte pendiente
Barra de filtros· el filtro es la pantalla, no un panel escondido; los controles quedan alineados aunque haya ayuda
Tabla y lista de tarjetas· encabezado fijo de 12 px, filas de 52 px, la numérica a la derecha; las columnas con flecha ordenan con un clic (un enlace con ?orden=&dir=, la activa con aria-sort) y «Ver más» crece de a cincuenta; por debajo de lg la tabla no se adapta: se cambia por ListaTarjetas (achique la ventana para verla)
- FO-0188 · Frente torreaprobada
- Actividad
- Empalme de fibra
- Autor
- Operario de campo
- Jornada
- 24 oct
- Fotos
- 12
- RB-0412 · Energíapendiente
- Actividad
- Montaje de celda
- Autor
- Supervisora Torre
- Jornada
- 23 oct
- Fotos
- 4
Ver más48 más
Tabla editable· celdas numéricas con teclado decimal y coma aceptada, validación con palabra junto a la celda, columnas de lectura con su pintor, fila atenuada que se ve pero no suma, y totales por columna o calculados sobre las filas (Σ cantidad×precio). Nació para la cotización del favor (doc 96 §9); edite una cantidad y salga de la celda para ver el compromiso
Ítem
Excavación manual
Unidad
m³
Cantidad
Precio unitario
Total del ítem
$ 2.040.000
Ítem
Concreto de 3000 psi
Unidad
m³
Cantidad
Precio unitario
Total del ítem
$ 7.440.000
Ítem
Acero de refuerzo
Unidad
kg
Cantidad
Precio unitario
Total del ítem
$ 5.270.000
Ítem
Señalización provisional
Unidad
excluido
Cantidad
4
Precio unitario
$ 180.000
Total del ítem
$ 720.000
- Totales · Total del ítem
- $ 14.750.000
Calendario· el mes en semanas de lunes a domingo; lo agendado se dice con palabra y tono (el chip trae su forma para daltonismo), el fin de semana y el festivo van hundidos y hoy queda marcado. Por debajo de lg el mes no se aprieta: se cambia por la agenda de los días con algo. Nació para las tareas del CRM (doc 96 §9)
noviembre de 2026
→| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 Visita técnica vencida | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 Llamar al cliente final | 11 | 12 Acta enviadaCierre: estructura metálica | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
2 novya pasó
Visita técnica vencida
6 nov
10 nov
Llamar al cliente final
12 nov
Acta enviadaCierre: estructura metálica
Historial inmutable· Historial y LineaHistorial: número, qué pasó, quién, cuándo, motivo y la huella; compacto dentro de otra ficha
- #1pendiente → revisadaresidente@empresa.co · 9f2c1a7b04e3d5c8a1b2c3d4e5f60718293a4b5c6d7e8f90
- #2revisada → rechazadaresidente@empresa.co · [foto_borrosa] No se lee la placa del empalme: repetir con la placa en primer plano.1b7d33e9a0c4f2d6b8e1a3c5d7f9b0e2c4a6d8f0b2c4e6a8
- #1Abiertacalidad@empresa.co ·
- #2Acción correctivaresidente@empresa.co · Se repite el protocolo con el formato vigente.
Matriz exigido contra presente· MatrizPuntos: la gráfica que decide si el interventor acepta el dossier; cifra y palabra en cada celda, una tarjeta por actividad en celular
- Empalme de fibra
- Foto4 de 4 · presente
- Protocolo0 de 1 · ausente
qué falta
Falta 1 protocolo aprobada de 1.
- Montaje de celda
- Foto1 de 2 · incompleto
qué falta
Falta 1 foto aprobada de 2.
- Foto1 de 2 · incompleto
Región activa· RegionActiva: invisible y siempre montada; anuncia los cambios de estado, nunca cada porcentaje
- «Sin señal. 3 fotos por enviar: se envían solas cuando vuelva.»
- «Volvió la señal. Enviando 3 fotos.»
- «Todo enviado: no queda nada en la cola.»
- «2 fotos necesitan atención: avísele al supervisor.» — la única que interrumpe
Tarjeta con encabezado y pie
El subtítulo dice de qué obra y cuándo.
¿Cómo funciona?
Lo que explica cómo funciona la tarjeta va plegado aquí, con la misma pieza que el encabezado de la pantalla: quien ya sabe no lo lee dos veces.
Dice qué pasó y qué repetir.
Tarjeta que se abre
TarjetaPlegable: lo técnico va plegado y el título dice cómo está · 3 listos · 1 en espera
Un details con la clase de la librería: teclado y lector de pantalla sin JavaScript. Se abre sola de entrada (abierta) solo cuando algo pide atención, como un artefacto que no se pudo crear.
Formulario uniforme: sección, pie y botón con estado
Nada con este filtro
Las fotos llegan desde la captura en campo; las de la cola de un celular sin señal cuentan al reconectar.
Propios del módulo
Las piezas que salen del flujo de obra: los pasos de un proceso, lo que se abre, lo que no tiene vuelta atrás, el tablero de tareas y las gráficas en SVG puro.
Pasos· Pasos: en cuál está, cuáles cerró; horizontal desde lg, vertical en celular
- Alta (hecho)
- Planeación (hecho)
- Ejecución (en curso)
- Dossier
- Cierre
Fila y tarjeta que se abren· FilaEnlace, ListaDeEnlaces, TarjetaEnlace: el título en color de enlace y el verbo con su flecha (G-11)
Lo que no tiene vuelta atrás· BotonConConfirmacion: el primer toque pregunta con la consecuencia y los nombres; el segundo envía
El correo no salió: interventor@ejemplo.co (el buzón no existe). Revise la dirección y vuelva a pedir la firma.
Control segmentado· segmentado y segmento: escoger una vista entre pocas, con su rótulo visible
Ver como
Atajo de teclado: Esc cierra lo que esté abierto.
Tablero kanban· Kanban, ColumnaKanban y TarjetaKanban: el punto de la columna lleva el tono de su estado; la tarjeta dice título, etiquetas de color con su palabra, clave con icono y quién responde, y el acento del borde el estado o la urgencia. Los tableros de obras y de tareas ponen encima el arrastre y el menú «Mover»; en celular las columnas se desplazan
Por hacer2
Izaje de torrevencida
Pedir permiso de alturas
30 oct → 2 novSin responsable
En curso1
EPMTelecomunicaciones
Ejecución y evidencias diarias
Etapa 7 de 1070 %
RB-0412830 dMoverCamila Duque, Óscar Villa, Natalia Ríos, Julián Arango
Hecha0
Todavía nada hecho.
Columnas por semana· ColumnasSemanales: SVG que escala con su contenedor y una tabla equivalente para lectores de pantalla
| Semana | fotos |
|---|---|
| S40 | 120 |
| S41 | 184 |
| S42 | 96 |
| S43 | 211 |
Barra horizontal· BarraHorizontal: avance con el número al lado; el largo solo no se lee
84 %
30 %