Rebrand: Logo real de CIS Latam + paleta negro/naranja definitiva

Date: 2026-07-25 Status: ✅ Aplicado sobre el código real y verificado end-to-end (2026-07-27) ⚠️ Leer la sección "Cómo aplicar esto" antes de tocar nada — no es un "reemplazá estos archivos", es una transformación mecánica sobre el código real que ya existe.

Qué pasó

Hasta ahora todo el sistema de diseño (login, sidebar, portal de docs) usaba una paleta navy + naranja que era un placeholder sacado de investigar cis-express.com (marca hermana), porque no teníamos el logo real. El cliente subió los archivos oficiales (cislatam-logo-2023-black.png / cislatam-logo-2023-white.png) y los colores reales, extraídos directo de los píxeles, son:

• Amarillo/dorado de marca (ícono): #FFE500
• Negro (wordmark y glifo): #000000

Se evaluaron 2 caminos con el cliente (capturas reales, corriendo en vivo) y se aprobó un híbrido: el logo se usa tal cual es (negro + círculo amarillo, sin tocarlo), pero el acento de UI (botones, ítem activo, links) sigue siendo naranja (#F5821F), no el amarillo exacto del logo. Esto es una decisión de diseño válida y deliberada, no un error — el logo no cambia nunca, el acento de interacción es una decisión de UI separada.

Assets nuevos (adjuntos en reference/brand/)

• cislatam-logo-2023-black.png — wordmark + ícono, para fondos claros
• cislatam-logo-2023-white.png — wordmark + ícono, para fondos oscuros
• cislatam-icon.png — recorte nuevo, solo el ícono (círculo amarillo + glifo, sin el wordmark) — se armó recortando el bounding box de los píxeles amarillos del archivo negro, con padding. Se usa donde no entra el logo completo (sidebar colapsado a 68px).

Van en frontend/public/brand/ (ya quedan servidos en /brand/... por Vite, sin configuración adicional).

Tokens de color — valores finales

En frontend/src/style.css, dentro de @theme:

--color-cis-ink: #1A1A1A;
--color-cis-ink-deep: #000000;
--color-cis-accent: #F5821F;
--color-cis-accent-deep: #D9690A;

(Los tokens semánticos — --color-status-*, --color-alert-* — no cambian, ya estaban bien separados de la marca.)

Cómo aplicar esto — mecánico, no reemplazo de archivos

Paso 1 — agregar los assets. Copiar reference/brand/* a frontend/public/brand/.

Paso 2 — actualizar style.css. Reemplazar el bloque de tokens de marca (--color-cis-navy, --color-cis-navy-deep, --color-cis-orange, --color-cis-orange-deep) por los 4 de arriba.

Paso 3 — renombrar clases en TODO frontend/src (no solo los archivos que yo toqué — buscar en el código real completo, incluye TransaccionDetalleView.vue, SinAccesoView.vue, y cualquier otra vista nueva que exista):

cd frontend/src
grep -rl "cis-navy\|cis-orange" . | while read f; do
  sed -i 's/cis-navy-deep/cis-ink-deep/g; s/cis-navy/cis-ink/g; s/cis-orange-deep/cis-accent-deep/g; s/cis-orange/cis-accent/g' "$f"
done
grep -rl "cis-navy\|cis-orange" . && echo "quedaron referencias sin actualizar" || echo "limpio"

Paso 4 — chequeo de contraste, a mano (no lo hace el sed). Buscar todo lugar donde bg-cis-accent (fondo naranja sólido) se combine con text-white — con el naranja real (#F5821F) el contraste con blanco es aceptable, así que en este caso SÍ se puede dejar text-white (a diferencia de cuando se probó con el amarillo puro, que sí requería texto negro). Yo ya lo dejé con text-cis-ink (negro) en mis archivos de referencia porque lo probé primero con amarillo — decisión a confirmar con el equipo de diseño: si prefieren volver a text-white sobre naranja (más convencional), ver reference/LoginView.vue línea del botón de submit y reference/AppLayout.vue línea del botón "Salir" en hover, como ejemplo de dónde está el texto negro actual.

Paso 5 — reemplazar el ícono placeholder "◎" y el wordmark de texto por el logo real. Buscar grep -rn "◎" en todo frontend/src (puede haber apariciones en vistas que yo no toqué) y reemplazar cada una según el patrón de reference/LoginView.vue y reference/AppLayout.vue:

• Fondo claro → cislatam-logo-2023-black.png
• Fondo oscuro (dark mode, o el panel de marca del login que siempre es oscuro) → cislatam-logo-2023-white.png
• Espacio muy chico (sidebar colapsado) → cislatam-icon.png (solo el ícono)

Paso 6 — el color hardcodeado de la ilustración del login. En LoginView.vue, los <circle> de la ilustración de "mapa de conexión" usaban fill="#F5821F" a mano — ya lo cambié a fill="var(--color-cis-accent)" en la referencia, para que seas el token, no un hex suelto. Confirmar que no haya otro hex hardcodeado del naranja/amarillo viejo en el resto del código (grep -rn "#F5821F\|#D9690A\|#FFE500" sobre todo frontend/src).

Archivos de referencia adjuntos (reference/)

Son la implementación ya corrida y validada visualmente de este rebrand, pero sobre una versión más simple del código que la que existe ahora en el repo real (antes de M1). Úsenlos para copiar el patrón exacto (qué logo va dónde, qué contraste, qué token), no para pisar los archivos reales:

• LoginView.vue, AppLayout.vue — con el logo real ya integrado
• style.css — con los 4 tokens finales
• DashboardView.vue, TransaccionesView.vue, TabbedSectionLayout.vue, ConfirmActionModal.vue — solo tienen el renombre mecánico de clases, sin cambios de lógica

Checklist final

• [x] Assets copiados a frontend/public/brand/
• [x] style.css con los 4 tokens nuevos
• [x] grep -rl "cis-navy\|cis-orange" frontend/src da vacío — 17 archivos afectados por el renombre (bastante más que los de reference/: incluyó todos los ABMs de Admin, Prefondeo, Reportes, SinAcceso, TransaccionDetalle, el nuevo TabbedSectionLayout.vue y ConfirmActionModal.vue de las 2 tareas mergeadas después de que se escribió este plan).
• [x] grep -rn "◎" frontend/src da vacío — 3 apariciones reemplazadas (sidebar expandido/mobile en AppLayout.vue, panel de marca en LoginView.vue).
• [x] Sin hex hardcodeados del naranja/amarillo viejo — los 6 fill="#F5821F" de los <circle> de la ilustración del login pasaron a fill="var(--color-cis-accent)".
• [x] Probado en claro y oscuro, desktop y mobile, sidebar expandido y colapsado — verificado en navegador real (Playwright + Chrome). Nota para quien reverifique visualmente con capturas: la <aside> tiene transition-all duration-200 (por la animación de colapsar/expandir), así que el cambio de fondo al togglear modo oscuro anima ~200ms — una captura tomada en el mismo instante del click puede mostrar el sidebar todavía en su color anterior. No es un bug.