/* Diagrama `appcmo` del login (CMO-06). Mismo lenguaje de diagram.css; aquí sólo el
   color del acento CMO (diagram.css fija el ámbar dentro de .c4y-diagram, CMO-05),
   los mosaicos con icono y los recorridos del pulso, que coinciden con las líneas de
   appcmo.svg y appcmo.compact.svg. Sin movimiento, diagram.css oculta el pulso. */
.c4y-diagram--appcmo{--c4y-accent:#0ea5e9}
.c4y-diagram--appcmo .lb--num{fill:rgba(14,165,233,.9)}
.c4y-diagram--appcmo .bx--out{fill:rgba(14,165,233,.06);stroke:rgba(14,165,233,.4)}

/* mosaicos opacos: el pulso pasa por detrás y sólo se ve entre etapas */
.c4y-diagram--appcmo .app-tile{fill:#151514;stroke:rgba(236,233,228,.16);stroke-width:1}
.c4y-diagram--appcmo .app-tile--destino{fill:#0d1922;stroke:rgba(14,165,233,.6)}
.c4y-diagram--appcmo .app-ico{color:#cfccc6;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.c4y-diagram--appcmo .app-ico--destino{color:#0ea5e9}

.c4y-diagram--appcmo .app-d-titulo{font-size:12px;font-weight:600;letter-spacing:.12em;fill:#ece9e4}
.c4y-diagram--appcmo .app-d-titulo--destino{fill:#f4f2ee}
.c4y-diagram--appcmo .app-d-texto{font:400 13px var(--c4y-font,'Manrope',system-ui,sans-serif);fill:#9b9893}
.c4y-diagram--appcmo .app-d-corto{font-size:11px;letter-spacing:.08em;fill:#cfccc6}

@keyframes appFlujo{0%{offset-distance:0%;opacity:0}4%{opacity:.95}70%{offset-distance:100%;opacity:.95}73%,100%{offset-distance:100%;opacity:0}}
.c4y-diagram--appcmo.c4y-diagram--full .p--flujo{offset-path:path('M38 34 L38 414');animation-name:appFlujo}
.c4y-diagram--appcmo.c4y-diagram--compact .p--flujo{offset-path:path('M40 30 L440 30');animation-name:appFlujo}