/* ============ #cambio ============ */
.flow { display: flex; flex-direction: column; gap: var(--space-xl); margin-top: var(--space-lg); }
@media (min-width: 960px) { .flow { flex-direction: row; align-items: stretch; } }
.flow-step { flex: 1; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.flow-step__head { display: flex; align-items: center; gap: var(--space-sm); }
.flow-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-ink-fixed); color: var(--color-accent-onink); font-family: var(--font-mono); font-weight: 500; font-size: var(--text-sm); flex-shrink: 0; }
.flow-step__title { font-weight: 700; font-size: var(--text-base); color: var(--color-text); }
.flow-role { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); }
.flow-role svg { width: 14px; height: 14px; }
.flow-meta { display: flex; flex-direction: column; gap: 3px; }
.flow-agent { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); }
.flow-arrow { display: none; align-items: center; flex-shrink: 0; color: var(--color-border-strong); width: 28px; }
@media (min-width: 960px) { .flow-arrow { display: flex; } }

.context-panel { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); background: var(--color-bg-soft); border-radius: var(--radius-md); }
.context-row { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-xs); }
.context-row svg { width: 16px; height: 16px; color: var(--color-accent); flex-shrink: 0; margin-top: 1px; }
.context-row strong { display: block; font-size: 11px; color: var(--color-text); }
.context-row p { color: var(--color-text-muted); }

.res-panel { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.24); border-radius: var(--radius-md); }
.res-panel svg { width: 20px; height: 20px; color: var(--color-success); flex-shrink: 0; }
.res-panel p { font-size: var(--text-xs); color: var(--color-text-soft); }
.res-panel strong { color: var(--color-text); }

/* ============ MOCKUP DE CHAT (demo dentro de #cambio) ============ */
.mockup { display: flex; width: 100%; min-height: 380px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.mockup__bubbles { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; }
.mockup__bubble { max-width: 82%; padding: 7px 11px; border-radius: 14px; font-size: 11px; line-height: 1.4; }
.mockup__bubble--in { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; color: var(--color-text-soft); }
.mockup__bubble--out { align-self: flex-end; background: #9ABDD3; color: var(--color-ink-fixed); border-bottom-right-radius: 4px; }