propuesta · ago 2026
marca física · shipping mark

El shipping mark, en marino tinta.

La etiqueta que el proveedor chino imprime y pega en cada caja hoy sale en los azules del admin — #213e83 → #3765c0, que no son de la identidad —, con la marca tecleada con una fuente y sin decir cuál caja es. La nueva versión: marino #021B54 sólido, wordmark vectorial, QR con +45% de área, numeración BOX 3 / 12 y variante para impresoras térmicas. El QR sigue codificando el trackingId plano — cero migraciones. Y al final del viaje, la misma tinta: la firma de entrega como documento (parte B).

Pieza
Etiqueta + firma de entrega
Se imprime
PNG @3x · térmica B/N
QR
MG-YYYYMMDD-XXXX · nivel H
Idiomas
EN · 中文
01Lo que se pega hoy shipping-mark-label.tsx

Cita fiel de producción — mismo degradado, mismas tipografías del sistema, mismos campos. Funciona: es bilingüe, el QR codifica el identifier plano y el proveedor la entiende. Pero no es Mogos, y en el piso del almacén se queda corta.

  1. Los azules no son de la marca

    La banda degrada de #213e83 a #3765c0 — la rampa brand del admin, no el marino #021B54 de identidad. La caja llega con los colores de un dashboard.

  2. La marca, tecleada

    «MOGOS GROUP C.A.» compuesto con la fuente del sistema y un isotipo PNG dentro de un chip. El wordmark vectorial — con su punto rojo — no aparece.

  3. El QR pierde área

    146px dentro de un marco decorativo que le roba espacio al único elemento que la pistola necesita leer de lejos y en movimiento.

  4. Dice cuántas cajas, no cuál

    «12 boxes» en la esquina. Si llegan 11, nadie sabe cuál falta: las doce etiquetas son idénticas.

  5. Frágil fuera de la impresora buena

    Degradado, grises suaves y hairlines gris-azuladas: en la térmica del proveedor o en una fotocopia, la estructura se disuelve.

02La nueva etiqueta marino tinta

Print-first: dos bandas de marino sólido — identidad arriba, la caja abajo — y entre ellas el QR más grande que la tarjeta puede darle. Nada de degradados ni tonos que una fotocopia disuelva. El QR de abajo es real y escaneable: codifica MG-20260803-0042.

  1. Cabecera marino sólido

    El #021B54 de identidad, plano — imprime idéntico en láser, inyección o fotocopia. El wordmark es el vector real de logo-source.mjs, con el punto rojo fijo.

  2. QR a 176px: +45% de área

    Sin marco decorativo; la zona de silencio la da el blanco de la tarjeta. Tinta marino — contraste 17.6:1 — y corrección nivel H: tolera ~30% de daño (cinta, roces, tinta desvanecida) contra el 15% del actual.

  3. Identifier como titular

    El trackingId en 19px con cifras tabulares: legible al teléfono cuando el QR viene dañado y hay que teclearlo.

  4. Labels Oswald, la voz del sistema

    Caps espaciadas bilingües EN/中文 — mismos campos de hoy, ninguna traducción se pierde. Valores en Neue Haas.

  5. La banda de la caja

    3 / 12 en 26px: cada etiqueta sabe cuál caja es. Llegan 11 y el almacén sabe al instante que falta la 7. Sin índice, la banda dice solo el total — compatible con hoy.

  6. Hairlines en marino

    Las líneas internas van en marino, no en el gris-azulado de pantalla: un artefacto impreso no puede apostar a tonos suaves.

03Anatomía de las decisiones tokens.css
Color

Marino tinta, cero degradados

Una etiqueta es tinta sobre papel, no una pantalla. Dos zonas de --marino sólido estructuran la lectura de lejos; el rojo queda reservado al punto del wordmark.

Marca

El wordmark es un vector

Geometría real de tools/logo-source.mjs — nunca tecleado con una fuente (misuse ✗07). El punto #C9313C viaja intacto a cualquier superficie de color.

QR

El QR manda en el layout

De 146 a 176px (+45% de área) y de nivel M a H: ~30% de tolerancia a daño para una etiqueta que vive bajo cinta de embalaje. Codifica el id plano — sin URL, sin token.

Tipografía

Tres voces, tres trabajos

Oswald caps para labels, Neue Haas para valores, cifras tabulares (tabular-nums) para el identifier y el 3/12: columnas de números que no bailan.

Operación

BOX 3 / 12 · 第 3 箱

La mejora operativa de la versión: numeración por caja en banda propia. Detecta faltantes al recibir, y el chino la lee igual que el courier de Caracas.

Impresión

Sobrevive la peor impresora

Sólidos, hairlines marino y una variante 100% B/N para térmicas. La etiqueta se diseñó para la fotocopia de la fotocopia — que es donde vive.

04Color y térmica prop thermal

El proveedor no siempre imprime en color: muchas veces es una térmica de un solo pigmento. La variante B/N conserva la anatomía completa — bandas, QR, numeración — en negro puro, sin tonos intermedios que la cabeza térmica ensucie. Excepción nombrada: en este medio el punto del wordmark vive en la única tinta que existe; en color y en pantalla es siempre #C9313C.

Color · completa · descarga PNG @3x
Térmica · un pigmento · sin campos largos

La térmica omite los campos de texto largos (nombre y dirección viajan en el documento de la orden): en el piso del almacén lo que se escanea es el QR y lo que se cuenta es la banda. Menos tinta, más velocidad de impresión por caja.

05Qué cambia en el código cero migraciones
shipping-mark-label.tsx Solo estilos: los azules brand-* salen, entran los tokens de identidad (marino, Oswald para labels). El componente sigue siendo presentacional y espejado 1:1 entre admin y client.
Prop boxIndex? Opcional. Con índice, la banda dice 3 / 12; sin él, solo el total — exactamente lo que muestra hoy. La numeración se genera al descargar: un PNG por caja.
Prop thermal? Variante B/N: mismos nodos, tema de un solo pigmento, sin nombre ni dirección. Pensada para imprimirse desde el share del proveedor.
El QR QRCodeSVG con el mismo trackingId plano — solo sube de 146 a 176px, pierde el marco y pasa de level="M" a level="H" (~30% de tolerancia a daño). Ninguna pistola ni flujo del almacén se toca.
parte b · experiencia digital

La firma de entrega, como documento.

El viaje que empieza con el QR en la caja termina con otro QR: el que el cliente escanea en su puerta para firmar la recepción. Es el momento de la verdad del servicio completo — las cajas llegaron — y hoy sale vestido de template: azules de Tailwind, cards genéricas y la firma escondida al fondo de un formulario. La arquitectura del flujo es correcta y no se toca (un QR de un solo uso, sin login, una sola pantalla); lo que cambia es qué se siente: firmar un documento, no llenar un formulario.

06La firma hoy delivery-signature-page.tsx

Cita del flujo actual del client: header plano, banner informativo azul, cards apiladas y el canvas punteado al final. Funciona — pero ni es Mogos, ni se siente como firmar una nota de entrega.

  1. Cero marca en el momento de la verdad

    #eff6ff, #1e40af, verdes y ámbar de Tailwind — ni un token de Mogos, ni el wordmark. El único contacto físico del servicio, con la cara de un template.

  2. Formulario, no documento

    Se llama «Nota de Entrega» pero se ve como una pantalla de settings: cards con iconos, jerarquía plana, la firma — el acto central — es la última caja.

  3. El monto se captura a ciegas

    «Monto (opcional)» sin mostrar cuánto debe el cliente. Quien entrega teclea de memoria — fuente clásica de errores de cobro.

  4. La conformidad está escondida

    La declaración legal del documento es una checkbox al fondo de «Observaciones», con default inconsistente entre el form y la base de datos.

  5. Rotar el teléfono borra la firma

    El listener de resize resetea el canvas: girar el dispositivo a mitad de firma la pierde. Bug real de la implementación actual.

  6. El enlace expirado es un callejón

    El estado de error no ofrece salida — ni pedir un nuevo enlace ni contactar. Y el countdown del admin corre por segundos en un token de 24h.

07La nota de entrega el documento

La misma pantalla, la misma UX de una pasada — pero vestida de lo que es: un documento con membrete. Las órdenes son líneas, el pago muestra el monto esperado, la conformidad es una decisión visible, y la firma es la protagonista: una línea de firma real, con tinta marino, y el nombre del que firma debajo.

  1. Membrete, no header

    Wordmark vectorial sobre marino, «NOTA DE ENTREGA» en Oswald y el código del flete con la fecha en cifras tabulares. La pantalla ES el documento que después llega en PDF.

  2. Las órdenes son líneas del documento

    Tracking completo + cajas, sin tabla, sin scroll horizontal, sin columnas vacías. El total cierra la cuenta como en un recibo.

  3. El pago muestra el saldo

    $120.00 · saldo del flete — un dato que el admin ya conoce — y el método como pills. Quien entrega confirma, no adivina.

  4. La conformidad es una decisión

    Dos opciones visibles: Conforme o Con observaciones (que despliega el campo de notas). La declaración legal deja de ser una checkbox escondida.

  5. La firma es la protagonista

    Línea de firma real con ✗, tinta marino — la marca firma en su color — y el nombre + cédula debajo, como en el papel. El trazo se re-dibuja desde el dataURL al rotar: girar el teléfono ya no borra la firma.

  6. El CTA dice la verdad

    Banda marino fija: se habilita al firmar y dice a dónde va la copia. Un solo botón, un solo acto.

08El sello y los estados motion con propósito

Al confirmar, el documento no desaparece en un modal genérico: cae el sello — el monograma en un cuño marino con la fecha — con la easing de la casa (--ease-spring, 420ms) y prefers-reduced-motion lo muestra ya estampado. Y cada estado terminal deja de ser un círculo de colores: dice qué pasó y qué hacer.

  1. El sello es el éxito

    Se estampa sobre la propia nota — el documento queda a la vista, sellado — y debajo aparecen las salidas: descargar la nota (el PDF ya existe en el modelo) y «se envió a tu correo».

  2. Ya firmada = el sello, no un error

    Reabrir el enlace usado muestra el documento sellado con la fecha original. La pantalla cuenta lo que pasó, no lo que falló.

  3. Expirado con salida

    «Este enlace venció» + pedir uno nuevo por WhatsApp al número de la operación. Nadie se queda en la puerta con un callejón sin salida.

Entrega ya completada

Esta nota se firmó el 03 · 08 · 2026. La copia está en tu correo.

Descargar nota de entrega

Este enlace venció

Los enlaces de firma duran 24 horas. Pide uno nuevo y firma al momento.

Pedir nuevo enlace

Tu flete aún no está listo

La firma se habilita cuando el flete llega a «listo para entrega».

Ver estado en mi cuenta
09El QR que abre la firma generate-qr-dialog.tsx

Este QR casi siempre se escanea de pantalla a pantalla: el teléfono del que entrega frente al teléfono del cliente, en una puerta, con reflejos. Y hoy carga una URL de 122 caracteres — dominio del admin + UUID del flete + token — que lo convierte en una matriz de 61×61 módulos. El token ya es único en la base: la URL no necesita nada más. mogosgroup.com/f/<token> baja el payload a 57 caracteres y la matriz a 41×41 — el módulo crece +49% al mismo tamaño físico.

Hoy · admin + uuid + token122 caracteres · 61×61 módulos
Propuesto · mogosgroup.com/f/<token>57 caracteres · 41×41 módulos · módulo +49%

  1. URL corta = QR escaneable

    /f/<token> resuelve el flete del lado del servidor — el token ya es @unique. De versión 11 a versión 6 del QR; a la primera, no al tercer intento.

  2. El dominio del cliente, no del admin

    Hoy el enlace se construye sobre la URL del admin — el cliente firmaría dentro del dominio interno. El enlace corto vive en el dominio público de Mogos, donde la marca da confianza.

  3. Pantalla completa para escanear

    Un tap y el QR toma todo el teléfono con brillo al máximo — el gesto real de la puerta: girar el teléfono hacia el cliente.

  4. WhatsApp como primera clase

    La realidad operativa: muchas veces el enlace se manda, no se escanea. Un botón con el mensaje pre-armado, en vez de copiar y pegar.

  5. Vence en horas, no en segundos

    Un token de 24h no necesita cronómetro: «23 h 14 min» comunica lo mismo sin ansiedad. Y la letra pequeña — un solo uso, regenerar desactiva, todo auditado — dicha en el pie.

10Qué cambia en el código cero endpoints nuevos
delivery-signature-page.tsx Re-composición visual: membrete, secciones de documento y CTA en banda marino. Mismos hooks (useDeliveryFreight, useCaptureDelivery), mismo schema de captura, mismo flujo de token.
signature-canvas.tsx Tinta marino (penColor), línea de firma con nombre + cédula, y el fix del bug real: al redimensionar, el trazo se re-dibuja desde el dataURL en vez de perderse con el reset del canvas.
orders-table.tsx → líneas La tabla scrolleable se convierte en líneas de documento: tracking completo + cajas + total. Desaparecen el índice y la columna de facturas vacías.
Pago con saldo visible El endpoint de la firma ya viaja con el flete; exponer el saldo esperado en esa respuesta llena el «$120.00 · saldo del flete». La captura deja de ser a ciegas.
Estados + sello Sello SVG desde el monograma real (vector, nunca imagen), estados con salida (WhatsApp en expirado, PDF en completada — deliveryNotePdfUrl ya existe) y prefers-reduced-motion en la estampada.
generate-qr-dialog.tsx Tokens del admin en vez de grises hardcodeados, countdown en h/min, pantalla completa y compartir por WhatsApp. La generación y auditoría no se tocan.
Ruta corta /f/<token> Una página (o redirect) en el client que resuelve el flete por token — ya es @unique en la base. El QR baja de 122 a 57 caracteres y deja de apuntar al dominio del admin. Cero migraciones; el enlace largo puede seguir vivo.

Un flete, dos QRs.

El primero se pega en Shenzhen y le da identidad a la caja. El segundo se escanea en Caracas y cierra el viaje con una firma. Hoy ninguno habla el idioma de la marca; con esta propuesta, los dos son Mogos — la misma tinta marino del primer contacto al último.

Marca la caja
Firma la entrega